/* =====================================================================
   سامانه برنامه‌ریزی تحصیلی — سیستم طراحی «شاد/رترو» (Flip7-inspired)
   بر اساس flip7-card-game-DESIGN.md — پالت فیروزه‌ای/طلایی/مرجانی،
   دکمه‌های حبه‌ای، سایه‌های رنگی درخشان، لبه‌های گرد بزرگ.
   واحدهای rpx سند مرجع (مبنای طرح 750rpx=375px) به px تبدیل شده‌اند: px = rpx / 2
   نام متغیرهای CSS با نسخهٔ قبلی یکی نگه داشته شده تا در PHP جایی نشکند؛
   فقط مقادیر رنگ عوض شده‌اند.
   ===================================================================== */

:root,
[data-theme="light"] {
    /* --- پالت اولیهٔ سازگار با مؤلفه‌های قدیمی پروژه --- */
    --teal: #14b8a6;
    --teal-light: #5eead4;
    --teal-dark: #0f766e;
    --teal-bg: #e6f7f5;
    --gold: #ffc329;
    --gold-light: #ffdf9f;
    --gold-dark: #d97706;
    --gold-ink: #795900;
    --coral: #ff7a8c;
    --coral-light: #ffb2b9;
    --coral-dark: #e11d48;
    --coral-ink: #a93349;
    --cream: #f8f3ee;
    --sky: #60a5fa;
    --ok-green: #22c55e;
    --err-red: #ef4444;
    --amber: #f97316;

    /* --- نگاشت معنایی (نام متغیرها ثابت مانده) --- */
    --brand: var(--teal);
    --brand-hover: #00a896;
    --brand-soft: var(--teal-bg);
    --brand-contrast: #ffffff;

    --bg-body: #fdf9f4;
    --bg-card: #fdf9f4;
    --bg-elevated: #ffffff;
    --bg-sidebar: var(--teal-dark);
    --bg-sidebar-active: var(--teal);
    --bg-topbar: #ffffff;
    --bg-hover: #ece7e2;
    --bg-input: #f2ede8;

    --text-main: #1d1b19;
    --text-muted: #3c4947;
    --text-on-brand: #ffffff;
    --text-sidebar: #E8F6F5;
    --text-sidebar-muted: #BFE3DF;

    --border-color: rgba(187, 202, 198, .45);
    --shadow-card: 0 1px 3px rgba(29, 27, 25, .06);
    --shadow-sm: 0 1px 2px rgba(29, 27, 25, .05);
    --shadow-md: 0 2px 6px rgba(29, 27, 25, .07);
    --shadow-lg: 0 4px 12px rgba(29, 27, 25, .09);
    --glow-coral: 0 1px 3px rgba(169, 51, 73, .12);
    --glow-teal: 0 1px 3px rgba(20, 184, 166, .12);
    --glow-gold: 0 4px 20px rgba(255, 195, 41, .45);
    --glow-sky: 0 1px 3px rgba(93, 173, 226, .12);
    --focus-ring: 0 0 0 2px rgba(20, 184, 166, .45);

    /* --- Legacy compatibility tokens --- */
    --page-bg: #fdf9f4;
    --panel-bg: #fdf9f4;
    --panel-muted: #f8f3ee;
    --panel-border: rgba(187, 202, 198, .4);
    --text-soft: #3c4947;
    --text-strong: #1d1b19;
    --teal-ink: #0f766e;
    --teal-ink-deep: #00423b;
    --teal-primary-ink: #006b5f;
    --gold-accent: #ffc329;
    --gold-accent-deep: #795900;
    --surface-1: #fdf9f4;
    --surface-2: #fdf9f4;
    --surface-3: #f8f3ee;
    --stroke-strong: #bbcac6;
    --sidebar-bg: #006b5f;
    --topbar-bg: rgba(253, 249, 244, .9);
    --topbar-border: rgba(187, 202, 198, .35);
    --page-header-bg: var(--panel-bg);
    --page-surface-bg: var(--panel-bg);
    --illustration-bg: var(--panel-muted);
    --shadow-soft: 0 2px 8px rgba(29, 27, 25, .06);
    --shadow-strong: 0 4px 14px rgba(29, 27, 25, .09);
    --shadow-elevated: 0 6px 20px rgba(29, 27, 25, .10);
    --radius-xl: 1rem;
    --radius-lg: 1rem;
    --radius-md: .75rem;
    --radius-sm: .625rem;
    --spacing-1: .25rem;
    --spacing-2: .5rem;
    --spacing-3: .75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;

    --on-teal: #00423b;

    --danger: var(--coral-ink);
    --danger-soft: #FBE9E4;
    --warning: var(--gold-dark);
    --warning-soft: #FFF6DC;
    --info: var(--sky);
    --info-soft: #E9F3FB;
    --success: var(--ok-green);
    --success-soft: #E4F7EC;

    --bounce: cubic-bezier(.34, 1.56, .64, 1);

    color-scheme: light;
}

[data-theme="dark"] {
    --teal: #3CC4BD;
    --teal-light: #5AD6CF;
    --teal-dark: #1E8C86;
    --teal-bg: rgba(60, 196, 189, .14);
    --gold: #FFD23F;
    --gold-light: #FFE47A;
    --gold-dark: #E6B800;
    --gold-ink: #3d2900;
    --coral: #FF8A9A;
    --coral-light: #FFB2B9;
    --coral-dark: #F0637A;
    --coral-ink: #ffb4c0;
    --cream: #262220;
    --sky: #7EC1EA;
    --ok-green: #3FCB80;
    --err-red: #F1685C;
    --amber: #FB923C;

    --brand: var(--teal);
    --brand-hover: var(--teal-light);
    --brand-soft: var(--teal-bg);
    --brand-contrast: #06110e;

    --bg-body: #1c1917;
    --bg-card: #1c1917;
    --bg-elevated: #241f1c;
    --bg-sidebar: #052f2d;
    --bg-sidebar-active: #0f766e;
    --bg-topbar: #1c1917;
    --bg-hover: #241f1c;
    --bg-input: #221f1c;

    --text-main: #f3ede6;
    --text-muted: #b8b0a8;
    --text-on-brand: #06110e;
    --text-sidebar: #DCF0EC;
    --text-sidebar-muted: #7FA69E;

    --page-bg: #1c1917;
    --panel-bg: #1c1917;
    --panel-muted: #262220;
    --panel-border: rgba(140, 150, 147, .22);
    --text-soft: #b8b0a8;
    --text-strong: #f3ede6;
    --teal-ink: #8ce7de;
    --teal-ink-deep: #5eead4;
    --teal-primary-ink: #2dd4bf;
    --surface-1: #1c1917;
    --surface-2: #1c1917;
    --surface-3: #262220;
    --stroke-strong: #3a3532;
    --sidebar-bg: #052f2d;
    --topbar-bg: rgba(20, 17, 15, .92);
    --topbar-border: rgba(255,255,255,.08);
    --page-header-bg: var(--panel-bg);
    --page-surface-bg: var(--panel-bg);
    --illustration-bg: var(--panel-muted);
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, .3);
    --shadow-strong: 0 4px 14px rgba(0, 0, 0, .35);
    --shadow-elevated: 0 6px 20px rgba(0, 0, 0, .4);

    --border-color: rgba(140, 150, 147, .22);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, .35);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, .35);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, .4);
    --glow-coral: 0 1px 3px rgba(255, 138, 154, .14);
    --glow-teal: 0 1px 3px rgba(60, 196, 189, .14);
    --glow-gold: 0 4px 20px rgba(255, 210, 63, .35);
    --glow-sky: 0 1px 3px rgba(126, 193, 234, .14);
    --focus-ring: 0 0 0 2px rgba(60, 196, 189, .5);

    --on-teal: #00332e;

    --danger: var(--coral);
    --danger-soft: rgba(255, 138, 106, .16);
    --warning: var(--gold);
    --warning-soft: rgba(255, 210, 63, .16);
    --info: var(--sky);
    --info-soft: rgba(126, 193, 234, .16);
    --success: var(--ok-green);
    --success-soft: rgba(63, 203, 128, .16);

    --bounce: cubic-bezier(.34, 1.56, .64, 1);

    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    font-weight: 400;
    background: var(--bg-body);
    color: var(--text-main);
    transition: background-color .15s ease, color .15s ease;
}

a {
    text-decoration: none;
}

b, strong, .fw-bold {
    font-weight: 800;
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

::selection {
    background-color: var(--brand);
    color: var(--on-teal);
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--stroke-strong);
}

/* ---------------------------------------------------------------------
   چیدمان کلی: نوار بالا تمام‌عرض + (سایدبار راست + محتوا) زیرش
   --------------------------------------------------------------------- */
:root {
    --topbar-h: 64px;
}

.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

.app-row {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 1rem;
    padding: .8rem 1rem 1rem;
}

.app-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: var(--panel-muted);
    color: var(--text-soft);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: calc(var(--topbar-h) + .4rem);
    height: calc(100vh - var(--topbar-h) - 1.2rem);
    overflow-y: auto;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    isolation: isolate;
}

/* بخش برند داخل نوار بالا — هم‌عرض سایدبار تا خط جداکننده دقیقاً زیرش ادامه پیدا کند */
.topbar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 280px;
    flex-shrink: 0;
    padding-left: 1.1rem;
    margin-left: .25rem;
    color: var(--text-main);
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: .01em;
}

.topbar-brand .brand-badge {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: var(--gold-accent);
    color: var(--gold-accent-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: var(--glow-gold);
}

@media (max-width: 767.98px) {
    .topbar-brand {
        width: auto;
        border-left: none;
        margin-left: 0;
        padding-left: 0;
    }
}

/* Compatibility fallback until the change-password template is refreshed. */
.auth-card:has(> form input[name="current_password"]) {
    display:block;
    width:min(100%, 500px);
    min-height:0;
    padding:3rem;
    border-radius:24px;
    background:#fff;
    border:1px solid #e8dff0;
    box-shadow:0 12px 34px rgba(50,20,78,.09);
}
.auth-card:has(> form input[name="current_password"]) > .text-center > span {
    background:linear-gradient(135deg,#7517d6,#df1683) !important;
    color:#fff !important;
    border-radius:16px !important;
    box-shadow:0 10px 24px rgba(117,23,214,.2);
}
.auth-card:has(> form input[name="current_password"]) h1 { color:#292333; font-size:1.5rem; font-weight:900; }
.auth-card:has(> form input[name="current_password"]) .form-label { color:#3b3445; font-size:.82rem; font-weight:800; }
.auth-card:has(> form input[name="current_password"]) .form-control {
    min-height:50px;
    border-radius:8px;
    border:1px solid #d9d1e1;
    background:#fff;
    box-shadow:none;
}
.auth-card:has(> form input[name="current_password"]) .form-control:focus {
    border-color:#7517d6;
    box-shadow:0 0 0 3px rgba(117,23,214,.12);
}
.auth-card:has(> form input[name="current_password"]) .btn-brand {
    min-height:50px;
    border:0;
    border-radius:8px;
    background:linear-gradient(90deg,#7517d6,#b000df);
    color:#fff;
    box-shadow:0 10px 23px rgba(117,23,214,.18);
}
@media (max-width:575.98px) {
    .auth-card:has(> form input[name="current_password"]) { min-height:100vh; width:100%; padding:2rem 1.25rem; border:0; border-radius:0; box-shadow:none; }
}

.app-sidebar .user-mini {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.15rem 1.05rem;
    border-bottom: 1px solid var(--panel-border);
    margin: 0 0 .55rem;
    background: transparent;
}

.app-sidebar .user-mini .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-soft);
    border: 2px solid var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal-primary-ink);
    font-weight: 800;
    flex-shrink: 0;
}

.app-sidebar .user-mini .name {
    color: var(--teal-primary-ink);
    font-weight: 800;
    font-size: .92rem;
}

.app-sidebar .user-mini .role {
    font-size: .76rem;
    color: var(--text-soft);
}

.app-nav {
    list-style: none;
    margin: 0;
    padding: .65rem;
    flex: 1;
}

.app-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: var(--text-soft);
    padding: .7rem .9rem;
    border-radius: var(--radius-md);
    font-size: .88rem;
    font-weight: 700;
    margin-bottom: .22rem;
    transition: background-color .2s ease, color .2s ease;
    position: relative;
}

.app-nav .nav-link .material-symbols-outlined {
    font-size: 1.05rem;
    width: 20px;
    text-align: center;
    color: inherit;
}

.app-nav .nav-link:hover {
    background-color: var(--bg-hover);
    color: var(--teal-primary-ink);
}

.app-nav .nav-link.active {
    background: var(--teal);
    color: var(--on-teal);
    font-weight: 800;
}

.app-nav .nav-link.active .material-symbols-outlined {
    color: var(--on-teal);
}

.app-nav .nav-badge {
    margin-right: auto;
    background: var(--coral-ink);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .35rem;
}

.app-sidebar .sidebar-footer {
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--panel-border);
    font-size: .75rem;
    color: var(--text-soft);
}

/* ---------------------------------------------------------------------
   ستون محتوا
   --------------------------------------------------------------------- */
.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    background: var(--topbar-bg);
    backdrop-filter: blur(18px);
    border: 1px solid var(--topbar-border);
    padding: 0 1.25rem;
    min-height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: .75rem;
    z-index: 1060;
    margin: .75rem 1rem 0;
    border-radius: 1.45rem;
    box-shadow: 0 14px 34px rgba(15,118,110,.10);
}

/* Bootstrap's default modal layer (1055) was below the sticky top bar
   (1060), so the navigation remained clickable while a planning form was
   open. Keep every dialog and its backdrop above application chrome. */
.modal-backdrop {
    z-index: 1070;
}

.modal {
    z-index: 1080;
}

.jalali-date-input {
    display: inline-block;
    width: 10.5rem;
    padding-inline-end: 2.25rem;
    direction: ltr;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.jalali-calendar-trigger {
    position: relative;
    margin-inline-start: -2.05rem;
    z-index: 2;
    border: 0;
    background: transparent;
    color: var(--teal-ink);
    padding: .2rem;
}

/* Keep generated Persian date input and its trigger as one control. */
.jalali-field {
    position: relative;
    width: 100%;
    min-width: 0;
}

.jalali-field .jalali-date-input {
    display: block;
    width: 100%;
    padding-inline: .85rem 2.65rem;
}

.jalali-field .jalali-calendar-trigger {
    position: absolute;
    inset-inline-end: .7rem;
    top: 50%;
    translate: 0 -50%;
    margin: 0;
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: .55rem;
}

.jalali-field .jalali-calendar-trigger:hover,
.jalali-field .jalali-calendar-trigger:focus-visible {
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
    outline: 0;
}

.jalali-calendar {
    position: fixed;
    z-index: 1090;
    width: 18rem;
    max-width: calc(100vw - 24px);
    padding: .75rem;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-elevated);
}

.jalali-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
    color: var(--text-strong);
}

.jalali-calendar-head .btn { color: var(--teal-ink); }

.jalali-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .18rem;
    text-align: center;
}

.jalali-calendar-grid button,
.jalali-weekday {
    min-height: 2rem;
    border: 0;
    border-radius: .55rem;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: .78rem;
}

.jalali-calendar-grid button:hover { background: var(--brand-soft); color: var(--teal-ink); }
.jalali-calendar-grid button.is-selected { background: var(--brand); color: var(--brand-contrast); font-weight: 800; }
.jalali-weekday { display: grid; place-items: center; min-height: 1.5rem; color: var(--text-muted); font-size: .7rem; font-weight: 700; }

/* ---------------------------------------------------------------------
   Legacy visual bridge: shared PHP shell aligned with the approved
   reference while retaining server-rendered pages.
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
    /* از این نقطه به بعد رنگ/شکل پایه (کارت، ناوبری، سایدبار) با موبایل یکی است؛
       این بلوک فقط تفاوت‌های چیدمانی دسکتاپ (position/width/padding) را اضافه می‌کند. */
    .app-topbar {
        position: fixed;
        inset: 0 260px auto 0;
        min-height: 64px;
        margin: 0;
        padding: 0 1.75rem;
        border: 0;
        border-bottom: 1px solid var(--panel-border);
        border-radius: 0;
        background: var(--topbar-bg);
        box-shadow: var(--shadow-sm);
        z-index: 1030;
    }

    .topbar-brand {
        width: auto;
        margin: 0;
        padding: 0;
        font-size: 1.15rem;
    }

    .topbar-brand .brand-badge { display: none; }

    .app-row {
        display: block;
        padding: 84px 284px 2rem 1.75rem;
    }

    .app-sidebar {
        position: fixed;
        inset: 0 0 0 auto;
        width: 260px;
        height: 100vh;
        padding: 1.5rem .75rem 1rem;
        overflow-y: auto;
        border: 0;
        border-left: 1px solid var(--panel-border);
        border-radius: 0;
        box-shadow: var(--shadow-sm);
        z-index: 1040;
    }

    .app-sidebar .user-mini {
        flex-direction: column;
        padding: 0 0 1.25rem;
        text-align: center;
    }

    .app-sidebar .user-mini .avatar {
        width: 58px;
        height: 58px;
    }

    .app-sidebar .user-mini .name { font-size: .95rem; }
    .app-nav { padding: 0; }
}

/* Planning form and weekly board: compact desktop tool, generous touch targets. */
.plan-week-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem; }
.plan-week-toolbar-primary { min-width:0; display:flex; align-items:center; gap:1rem; }
.plan-student-picker { min-width:0; display:flex; align-items:center; gap:.5rem; }
.plan-week-range { white-space:nowrap; font-weight:800; }
.plan-week-toolbar-actions { margin-inline-start:auto; display:flex; align-items:center; gap:.5rem; }
.plan-week-calendar { display:flex; align-items:center; gap:.25rem; }
.plan-board-header { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; }
.plan-board-title { display:inline-flex; align-items:center; gap:.35rem; min-width:0; font-weight:800; }
.plan-board-meta { display:flex; align-items:center; gap:1rem; }
.plan-board-legend { display:flex; align-items:center; gap:.85rem; }
.plan-board-legend > span { display:inline-flex; align-items:center; gap:.25rem; white-space:nowrap; }
.plan-board-actions { display:flex; align-items:center; gap:.3rem; }

@media (max-width:575.98px) {
    .plan-week-toolbar { display:grid; grid-template-rows:auto auto; gap:.65rem; padding:.85rem !important; }
    .plan-week-toolbar-primary { width:100%; display:grid; grid-template-columns:1fr; gap:.65rem; }
    .plan-student-picker { width:100%; }
    .plan-student-picker .form-label { display:none; }
    .plan-student-picker .custom-select,
    .plan-student-picker .form-select { width:100%; min-width:0 !important; }
    .plan-week-range { width:100%; max-width:none; padding:.5rem .7rem; border:1px solid var(--panel-border); border-radius:10px; color:var(--text-muted); background:var(--surface-muted); font-size:.75rem; text-align:center; white-space:normal; line-height:1.6; }
    .plan-week-toolbar-actions { width:100%; margin:0; display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; gap:.35rem; }
    .plan-week-toolbar-actions > .btn { min-width:42px; min-height:42px; padding-inline:.55rem; white-space:nowrap; }
    .plan-week-toolbar-actions > a.btn { font-size:0; }
    .plan-week-toolbar-actions > a.btn .material-symbols-outlined { margin:0; font-size:1.2rem; }
    .plan-week-calendar { min-width:0; }
    .plan-week-calendar .jalali-date-input { width:100%; min-width:0; }
    .plan-week-calendar > .btn { min-width:42px; min-height:42px; padding:.35rem; }
    .plan-board-header { display:grid; grid-template-columns:1fr; align-items:stretch; gap:.65rem; padding:.85rem !important; }
    .plan-board-title { width:100%; padding-bottom:.6rem; border-bottom:1px solid var(--panel-border); }
    .plan-board-meta { display:grid; grid-template-columns:1fr; gap:.65rem; }
    .plan-board-legend { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem .75rem; }
    .plan-board-legend > span { min-width:0; font-size:.72rem; }
    .plan-board-actions { justify-content:flex-start; padding-top:.6rem; border-top:1px dashed var(--panel-border); }
    .plan-board-actions .btn { width:42px; height:40px; display:inline-grid; place-items:center; padding:0; }
}

#planModal .modal-content,
#copyWeekModal .modal-content {
    border-radius: 1.25rem;
    overflow: hidden;
}

#planModal .modal-header,
#copyWeekModal .modal-header {
    background: #f8f3ee;
    border-bottom-color: rgba(187, 202, 198, .45);
}

#planModal .modal-footer,
#copyWeekModal .modal-footer {
    background: #fdf9f4;
    border-top-color: rgba(187, 202, 198, .35);
}

.plan-grid { border-spacing: 5px; }
.plan-grid .week-cell { min-height: 54px; height: 54px; border-radius: .7rem; }
.plan-grid .week-cell.cell-off { background: transparent; border-style: dashed; border-color: rgba(20, 184, 166, .52); }
.plan-grid .week-cell.cell-off::after { content: '+'; display: grid; place-items: center; height: 100%; color: #14b8a6; font-size: 1rem; opacity: 0; transition: opacity .15s ease; }
.plan-grid .week-cell.cell-off:hover::after { opacity: 1; }
.plan-grid .week-cell .cell-title { line-height: 1.45; padding: .35rem; white-space: normal; }
.plan-grid .week-cell.cell-school .cell-title,
.plan-grid .week-cell.cell-class .cell-title { line-height: 54px; white-space: nowrap; }

.app-topbar .search-box {
    flex: 1;
    max-width: 420px;
}

.app-topbar .search-box .form-control {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-main);
    border-radius: 999px;
}

.icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    font-size: 1.05rem;
    transition: transform .2s var(--bounce), background-color .15s ease, color .15s ease;
}

.icon-btn:hover {
    background-color: var(--bg-hover);
    color: var(--brand);
    transform: scale(1.08);
}

.theme-toggle {
    position: relative;
}

.app-content {
    padding: 1.4rem 1.2rem 2rem;
    flex: 1;
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page-header {
    margin-bottom: .2rem;
    padding: 1.3rem 1.35rem;
    border-radius: var(--radius-lg);
    background: var(--page-header-bg);
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    position: relative;
    overflow: hidden;
}

.page-header h1 {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: .01em;
    margin: 0;
    color: var(--teal-ink-deep);
}

.page-header .subtitle {
    color: var(--text-muted);
    font-size: .88rem;
    position: relative;
    z-index: 1;
}

.page-header .header-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    width: fit-content;
    padding: .4rem .7rem;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(0, 106, 102, .12);
    color: var(--teal-ink-deep);
    font-size: .78rem;
    font-weight: 800;
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 1;
}

.page-header .header-pill .material-symbols-outlined {
    color: var(--gold-accent-deep);
}

.page-surface {
    background: var(--page-surface-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    box-shadow: none;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    overflow: hidden;
}

.page-surface > * {
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------------------
   کارت‌ها
   --------------------------------------------------------------------- */
.card {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: var(--text-main);
    overflow: hidden;
    position: relative;
    transition: box-shadow .2s ease;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--panel-border);
    font-weight: 800;
    padding: 1rem 1.15rem;
    color: var(--teal-ink-deep);
    letter-spacing: .01em;
}

.card-body {
    padding: 1.15rem 1.2rem;
}

.card-accent {
    border-right: 3px solid var(--brand);
}

.card-accent.accent-danger {
    border-right-color: var(--coral-ink);
    background: var(--danger-soft);
}
.card-accent.accent-warning {
    border-right-color: var(--gold);
    background: var(--warning-soft);
}
.card-accent.accent-info { border-right-color: var(--info); }
.card-accent.accent-success { border-right-color: var(--success); }

.notification-center { display:grid; gap:1rem; }
.notification-center__hero {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.25rem 1.35rem; color:#fff; border-radius:var(--radius-lg);
  background:linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary) 58%, var(--brand-secondary));
  box-shadow:var(--shadow-float);
}
.notification-center__heading { display:flex; align-items:center; gap:.9rem; min-width:0; }
.notification-center__heading p { color:rgba(255,255,255,.8); }
.notification-center__icon {
  display:grid; place-items:center; width:48px; height:48px; flex:0 0 48px;
  border-radius:14px; background:rgba(255,255,255,.16); font-size:1.65rem;
}
.notification-center__count {
  flex:0 0 auto; padding:.5rem .75rem; border:1px solid rgba(255,255,255,.24);
  border-radius:999px; background:rgba(255,255,255,.12); font-size:.82rem; font-weight:700;
}
.notification-center__panel { overflow:hidden; }
.notification-center__toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--border-subtle); }
.notification-search { display:flex; align-items:center; gap:.55rem; flex:1 1 620px; max-width:760px; }
.notification-search > .material-symbols-outlined { color:var(--text-secondary); }
.notification-search .form-control { min-width:160px; }
.notification-search__summary { flex:0 0 auto; color:var(--text-secondary); font-size:.82rem; }
.notification-center__body { padding:0; }
.notification-list { display:grid; }
.notification-item {
  display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:.85rem;
  min-height:76px; padding:.85rem 1.1rem; color:var(--text-primary); text-decoration:none;
  border-bottom:1px solid var(--border-subtle); transition:background-color .18s ease, transform .18s ease;
}
.notification-item:last-child { border-bottom:0; }
.notification-item--link { grid-template-columns:42px minmax(0,1fr) 28px; }
.notification-item--link:hover { color:var(--text-primary); background:var(--brand-primary-soft); }
.notification-item--link:focus-visible { position:relative; z-index:1; outline:3px solid rgba(117,23,214,.28); outline-offset:-3px; }
.notification-item__symbol {
  display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
  color:var(--brand-primary); background:var(--brand-primary-soft); font-size:1.3rem;
}
.notification-item__content { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-width:0; }
.notification-item__message { line-height:1.8; overflow-wrap:anywhere; }
.notification-item__time { flex:0 0 auto; color:var(--text-secondary); font-size:.76rem; white-space:nowrap; }
.notification-item__arrow { color:var(--text-secondary); font-size:1.2rem; }

@media (max-width: 575.98px) {
  .notification-center__hero { align-items:flex-start; padding:1rem; }
  .notification-center__heading { align-items:flex-start; }
  .notification-center__heading p { font-size:.8rem; line-height:1.7; }
  .notification-center__icon { width:42px; height:42px; flex-basis:42px; }
  .notification-center__count { padding:.38rem .58rem; font-size:.72rem; white-space:nowrap; }
  .notification-center__toolbar { display:block; padding:.85rem; }
  .notification-search { display:grid; grid-template-columns:1fr auto; }
  .notification-search > .material-symbols-outlined { display:none; }
  .notification-search .form-control { grid-column:1 / -1; min-height:44px; }
  .notification-search .btn { min-height:44px; }
  .notification-search__summary { margin-top:.7rem !important; }
  .notification-item,
  .notification-item--link { grid-template-columns:38px minmax(0,1fr) 20px; align-items:start; gap:.7rem; padding:.85rem; }
  .notification-item:not(.notification-item--link) { grid-template-columns:38px minmax(0,1fr); }
  .notification-item__symbol { width:38px; height:38px; border-radius:11px; font-size:1.15rem; }
  .notification-item__content { display:grid; gap:.35rem; }
  .notification-item__message { font-size:.9rem; line-height:1.75; }
  .notification-item__time { font-size:.72rem; white-space:normal; }
  .notification-item__arrow { align-self:center; }
}

@media (prefers-reduced-motion: reduce) {
  .notification-item { transition:none; }
}

.note-thread-item {
    background: var(--panel-muted);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
    padding: .6rem .75rem;
}

.card-tint-brand   { background: var(--brand-soft); }
.card-tint-success { background: var(--success-soft); }
.card-tint-warning { background: var(--warning-soft); }
.card-tint-danger  { background: var(--danger-soft); }

/* کارت آماری کوچک بالای داشبورد — فشرده، آیکون بالا */
.stat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 1.2rem .85rem;
    text-align: center;
}

.stat-tile .stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.stat-icon.bg-brand-soft   { background: var(--brand-soft); color: var(--brand-hover); }
.stat-icon.bg-danger-soft  { background: var(--danger-soft); color: var(--coral-dark); }
.stat-icon.bg-warning-soft { background: var(--warning-soft); color: var(--gold-dark); }
.stat-icon.bg-info-soft    { background: var(--info-soft); color: #2E75A6; }
.stat-icon.bg-success-soft { background: var(--success-soft); color: #1E8449; }

.stat-tile .stat-value {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.2;
}

.stat-tile .stat-label {
    font-size: .78rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* بنر پیشرفت روزانه بالای داشبورد — رینگ درصد + پیام انگیزشی روی زمینهٔ تیل تیره */
.hero-progress {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    background: var(--teal-primary-ink);
    border-radius: var(--radius-xl);
    padding: 1.5rem 1.75rem;
    color: #fff;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.hero-progress-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.hero-progress-ring {
    --hp-percent: 0;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: conic-gradient(var(--gold) calc(var(--hp-percent) * 1%), rgba(255, 255, 255, .18) 0);
}

.hero-progress-ring::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--teal-primary-ink);
}

.hero-progress-ring span {
    position: relative;
    z-index: 1;
    font-weight: 800;
    font-size: 1.05rem;
}

.hero-progress-label {
    font-size: .8rem;
    color: rgba(255, 255, 255, .75);
    font-weight: 700;
}

.hero-progress-value {
    font-weight: 800;
    font-size: 1.02rem;
}

.hero-progress-body {
    flex: 1;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    position: relative;
    z-index: 1;
}

.hero-progress-date {
    font-size: .85rem;
    color: rgba(255, 255, 255, .75);
}

.hero-progress-msg {
    font-size: .9rem;
    color: rgba(255, 255, 255, .92);
}

/* هدر توپر رنگی برای پنل‌های فهرست‌دار (مثل «کارهای من» / «پیگیری از دیگران») */
.list-panel {
    border-right: 3px solid var(--brand);
}

.list-panel .card-header {
    background: var(--panel-muted);
    border-bottom: 1px solid var(--panel-border);
    color: var(--text-strong);
    font-weight: 800;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.list-panel.panel-danger  { border-right-color: var(--coral-ink); }
.list-panel.panel-success { border-right-color: var(--ok-green); }
.list-panel.panel-info    { border-right-color: var(--sky); }
.list-panel.panel-warning { border-right-color: var(--gold-dark); }
.list-panel.panel-brand   { border-right-color: var(--brand); }

/* ---------------------------------------------------------------------
   بج‌ها
   --------------------------------------------------------------------- */
.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
}

.badge-soft.badge-brand   { background: var(--brand-soft); color: var(--brand-hover); }
.badge-soft.badge-danger  { background: var(--danger-soft); color: var(--coral-dark); }
.badge-soft.badge-warning { background: var(--warning-soft); color: var(--gold-dark); }
.badge-soft.badge-info    { background: var(--info-soft); color: #2E75A6; }
.badge-soft.badge-success { background: var(--success-soft); color: #1E8449; }
.badge-soft.badge-muted   { background: var(--bg-hover); color: var(--text-muted); }

/* کد کاربری قابل کپی */
.user-code-box {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--cream);
    border: 2px dashed var(--gold-dark);
    border-radius: 999px;
    padding: .5rem 1rem;
    font-family: 'Courier New', monospace;
    font-weight: 800;
    letter-spacing: .5px;
}

/* ---------------------------------------------------------------------
   فرم‌ها
   --------------------------------------------------------------------- */
.form-control, .form-select {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-main);
    padding: .8rem .95rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* Selects: replace Bootstrap/native split arrow area with one RTL field. */
.form-select {
    min-height: 48px;
    padding: .75rem .95rem .75rem 2.85rem;
    line-height: 1.5;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--bg-input);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237517d6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left .95rem center !important;
    background-size: 18px 18px !important;
    box-shadow: none;
    cursor: pointer;
}

.form-select::-ms-expand { display: none; }
.form-select:hover { background-color: var(--bg-input); }
.form-select:focus {
    background-color: var(--bg-input);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23df1683' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
}
.form-select:disabled {
    color: var(--text-muted);
    background-color: var(--surface-muted, #f3f4f6);
    opacity: .72;
    cursor: not-allowed;
}
.form-select[multiple],
.form-select[size]:not([size="1"]) {
    min-height: auto;
    padding: .7rem .85rem;
    background-image: none !important;
    cursor: default;
}
.form-select option {
    color: var(--text-main);
    background: var(--bg-input);
}

/* Controlled dropdown used site-wide instead of the oversized native popup. */
.custom-select { position:relative; width:100%; min-width:0; }
.custom-select-native {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
    opacity:0 !important;
    pointer-events:none !important;
}
.custom-select-trigger {
    width:100%;
    min-width:0;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    padding:.72rem .95rem;
    color:var(--text-main);
    text-align:right;
    line-height:1.5;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:var(--bg-input);
    box-shadow:none;
    transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.custom-select-trigger:hover { border-color:rgba(117,23,214,.35); }
.custom-select-trigger:focus-visible,
.custom-select.is-open .custom-select-trigger { outline:0; border-color:var(--brand); box-shadow:var(--focus-ring); }
.custom-select-trigger:disabled { color:var(--text-muted); background:var(--surface-muted,#f3f4f6); opacity:.72; cursor:not-allowed; }
.custom-select-value { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.custom-select-trigger.is-placeholder .custom-select-value { color:var(--text-muted); }
.custom-select-arrow { flex:0 0 auto; color:var(--brand-primary,#7517d6); font-size:1.25rem; transition:transform .18s ease; }
.custom-select.is-open .custom-select-arrow { transform:rotate(180deg); }
.custom-select-menu {
    position:fixed;
    z-index:3000;
    display:none;
    padding:.4rem;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    border:1px solid var(--border-color);
    border-radius:14px;
    background:var(--surface-1,#fff);
    box-shadow:0 18px 45px rgba(48,28,66,.18);
    scrollbar-width:thin;
    scrollbar-color:rgba(117,23,214,.38) transparent;
}
.custom-select-menu.is-open { display:block; }
.custom-select-option {
    width:100%;
    min-height:42px;
    display:flex;
    align-items:center;
    padding:.55rem .75rem;
    color:var(--text-main);
    text-align:right;
    border:0;
    border-radius:9px;
    background:transparent;
}
.custom-select-option:hover,
.custom-select-option:focus-visible { outline:0; color:var(--brand-primary,#7517d6); background:var(--brand-primary-soft,#f1e8ff); }
.custom-select-option[aria-selected="true"] { color:#fff; font-weight:800; background:linear-gradient(90deg,#7517d6,#9214dc); }
.custom-select-option:disabled { color:var(--text-muted); opacity:.58; cursor:not-allowed; }
@media (max-width:575.98px) {
    .custom-select-menu { border-radius:12px; }
    .custom-select-option { min-height:44px; }
}
@media (prefers-reduced-motion:reduce) {
    .custom-select-arrow,.custom-select-trigger { transition:none; }
}

.form-control::placeholder, .form-select::placeholder {
    color: var(--text-muted);
    opacity: .85;
}

.form-control:hover, .form-select:hover {
    border-color: rgba(0, 106, 102, .28);
}

.form-control:focus, .form-select:focus {
    background-color: var(--bg-input);
    color: var(--text-main);
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}

.form-label {
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: .35rem;
    color: var(--teal-ink-deep);
}

.alert {
    border-radius: 1rem;
    border: 1px solid transparent;
    box-shadow: var(--shadow-sm);
    padding: .9rem 1rem;
}

.alert-success { background: var(--success-soft); color: #1E5E3B; }
.alert-danger { background: var(--danger-soft); color: #8A2F1D; }
.alert-warning { background: var(--warning-soft); color: #7A5600; }
.alert-info { background: var(--info-soft); color: #1F4C69; }

.list-group-item {
    border-color: var(--panel-border);
    border-radius: 0;
    padding: .95rem 1rem;
}

.list-group-item:hover {
    background: rgba(0, 106, 102, .035);
}

.table {
    --bs-table-color: var(--text-main);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--panel-border);
    --bs-table-striped-color: var(--text-main);
    --bs-table-striped-bg: rgba(0, 106, 102, .03);
    --bs-table-hover-color: var(--text-main);
    --bs-table-hover-bg: rgba(0, 106, 102, .05);
}

.table thead th {
    background: var(--panel-muted);
    color: var(--teal-ink-deep);
    font-weight: 800;
}

.table > :not(caption) > * > * {
    padding: .85rem 1rem;
    vertical-align: middle;
}

.table tbody tr {
    transition: background-color .15s ease, transform .15s ease;
}

.table tbody tr:hover {
    background: rgba(0, 106, 102, .04);
}

.table-responsive {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0, 106, 102, .04);
}

/* Phase 5: users, relations and dense responsive lists */
.people-list-toolbar { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.8rem 1rem; border-bottom:1px solid var(--panel-border); background:var(--surface-muted); }
.people-list-search { position:relative; display:flex; align-items:center; flex:1; max-width:32rem; margin:0; }
.people-list-search > .material-symbols-outlined { position:absolute; right:.8rem; z-index:1; color:var(--text-muted); font-size:1.2rem; pointer-events:none; }
.people-list-search .form-control { min-height:42px; padding-right:2.5rem; padding-left:2.5rem; border-radius:999px; background:var(--surface); }
.people-list-clear { position:absolute; left:.45rem; display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:50%; color:var(--text-muted); background:transparent; }
.people-list-clear:hover { color:var(--brand); background:var(--brand-soft); }
.people-list-clear .material-symbols-outlined { font-size:1.1rem; }
.people-list-count { flex:0 0 auto; color:var(--text-muted); font-size:.82rem; font-weight:700; }
.people-list-no-result { display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:110px; padding:1.25rem; color:var(--text-muted); }
.people-list-no-result[hidden] { display:none; }
.people-data-table td:last-child .btn { margin:.12rem; }

@media (max-width: 767.98px) {
    .people-list-toolbar { align-items:stretch; flex-direction:column; padding:.75rem; }
    .people-list-search { max-width:none; width:100%; }
    .people-list-count { padding-inline:.35rem; }
    .table-responsive:has(> .responsive-data-table) { overflow:visible; border-radius:0; box-shadow:none; }
    .responsive-data-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
    .responsive-data-table, .responsive-data-table tbody { display:block; width:100%; }
    .responsive-data-table tbody { padding:.75rem; }
    .responsive-data-table tbody tr { display:grid; grid-template-columns:1fr; gap:.55rem; margin-bottom:.75rem; padding:.85rem; border:1px solid var(--panel-border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-sm); }
    .responsive-data-table tbody tr:last-child { margin-bottom:0; }
    .responsive-data-table tbody tr[hidden] { display:none; }
    .responsive-data-table tbody td { display:grid; grid-template-columns:minmax(6.5rem, 36%) 1fr; align-items:center; gap:.65rem; width:100%; padding:0 !important; border:0; text-align:start !important; overflow-wrap:anywhere; }
    .responsive-data-table tbody td::before { content:attr(data-label); color:var(--text-muted); font-size:.76rem; font-weight:700; }
    .responsive-data-table tbody td:last-child { margin-top:.2rem; padding-top:.65rem !important; border-top:1px dashed var(--panel-border); }
    .responsive-data-table tbody td:last-child .btn { min-height:40px; }
    .responsive-data-table tbody td[colspan] { display:block; text-align:center !important; }
    .responsive-data-table tbody td[colspan]::before { display:none; }
}

.dropdown-menu, .modal-content {
    border: 1px solid var(--panel-border);
    border-radius: 1rem;
    box-shadow: var(--shadow-strong);
    backdrop-filter: blur(14px);
}

.nav-tabs .nav-link {
    border-radius: 999px;
    margin-left: .2rem;
    color: var(--text-muted);
    font-weight: 700;
}

.nav-tabs .nav-link.active {
    background: var(--brand-soft);
    color: var(--brand-hover);
    border-color: transparent;
}

.pagination .page-link {
    border-radius: 999px;
    margin: 0 .15rem;
    color: var(--teal-ink);
}

.pagination .page-item.active .page-link {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.badge-soft {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .03);
}

/* بازنویسی رنگ پیش‌فرض بوت‌استرپ برای تب‌های nav-pills با پالت برند */
.squishy {
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

.squishy:active {
    transform: scale(.95);
}

.glow-teal {
    box-shadow: 0 4px 16px rgba(0, 106, 102, .08);
}

.glow-gold {
    box-shadow: 0 4px 16px rgba(252, 208, 61, .3);
}

.glow-gold-hover:hover {
    box-shadow: 0 12px 24px rgba(252, 208, 61, .4);
}

.tactile-bevel {
    box-shadow: inset 0 1px rgba(255, 255, 255, .8), 0 4px 6px -1px rgba(0, 0, 0, .1);
}

.tactile-edge {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 2px 4px rgba(0, 0, 0, .03);
}

.inset-tactile {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .05);
}

.glass-panel {
    background: var(--brand-soft);
    backdrop-filter: blur(10px);
}

.focus-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background-color: var(--teal-ink);
    width: 0;
    transition: width .3s ease;
}

.input-wrapper:focus-within .focus-indicator {
    width: 100%;
}

.nav-pills {
    gap: .35rem;
}

.nav-pills .nav-link {
    border-radius: 999px;
    font-weight: 700;
    color: var(--text-muted);
    padding: .4rem 1rem;
    transition: background-color .2s var(--bounce), color .2s var(--bounce);
}

.nav-pills .nav-link:hover {
    background-color: var(--bg-hover);
    color: var(--brand-hover);
}

.nav-pills .nav-link.active {
    background: var(--gold-accent);
    color: var(--gold-ink);
    box-shadow: var(--glow-gold);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    letter-spacing: .01em;
    transition: box-shadow .2s ease, background-color .2s ease;
}

.btn:active {
    transform: scale(.95);
}

.btn-brand {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-teal);
    font-weight: 800;
}

.btn-brand:hover {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    color: var(--on-teal);
}

.btn-gold {
    background: var(--gold-accent);
    border-color: var(--gold-dark);
    color: var(--gold-accent-deep);
    font-weight: 800;
    box-shadow: var(--glow-gold);
}

.btn-gold:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    color: var(--gold-accent-deep);
}

.btn-outline-brand {
    border-color: var(--brand);
    color: var(--brand-hover);
    background: transparent;
}

.btn-outline-brand:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--text-on-brand);
}

/* حالت انتخاب‌شدهٔ چیپ‌های btn-check (مثل درس‌های هر روز در ویزارد) — کامل رنگی و پایدار،
   چه با کلیک کاربر و چه هنگام پرکردن خودکار فرم (ویرایش) با همان وضعیت checked بماند */
.btn-check:checked + .btn-outline-brand,
.btn-check:active + .btn-outline-brand,
.btn-outline-brand.active {
    background: var(--brand);
    border-color: var(--teal-dark);
    color: #fff;
    font-weight: 700;
}

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--page-bg);
    padding: 1rem;
}

.auth-card {
    width: 100%;
    max-width: 1180px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 720px;
}

.auth-card .auth-form-panel {
    background: var(--page-bg);
    padding: clamp(1.5rem, 3vw, 3rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card .auth-form-panel .inner {
    width: 100%;
    max-width: 430px;
}

.auth-card .auth-illustration {
    background: var(--teal-primary-ink);
    padding: clamp(1.5rem, 3vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    border-right: 1px solid rgba(255,255,255,.12);
}


.auth-card .auth-illustration .illustration-sparkle {
    position: absolute;
    color: rgba(255,255,255,.35);
    font-size: 1.6rem;
    z-index: 1;
}

.auth-card .auth-illustration .illustration-sparkle.spark-top { top: 2.4rem; right: 2.4rem; }
.auth-card .auth-illustration .illustration-sparkle.spark-bottom { bottom: 2.4rem; left: 2.4rem; }

.auth-card .auth-branding {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    position: relative;
    z-index: 1;
}

.auth-card .auth-branding .brand-badge {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255,255,255,.14);
    box-shadow: var(--shadow-strong);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    backdrop-filter: blur(6px);
}

.auth-card .auth-branding .brand-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
}

.auth-card .auth-illustration-visual {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
    z-index: 1;
}

.auth-card .auth-illustration-visual .visual-card {
    width: min(100%, 320px);
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 1.75rem;
    box-shadow: 0 20px 50px rgba(0,0,0,.22);
    padding: 1.25rem;
    transform: rotate(-2deg);
}

.auth-card .auth-illustration-visual .visual-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: .35rem;
    height: 8rem;
    margin-bottom: 1rem;
    padding: .75rem;
    background: rgba(0, 106, 102, .05);
    border-radius: 1rem;
}

.auth-card .auth-illustration-visual .visual-bars span {
    width: 1.1rem;
    border-radius: .5rem .5rem 0 0;
    background: linear-gradient(180deg, var(--teal-ink), var(--teal));
}

.auth-card .auth-illustration-visual .visual-bars span:nth-child(3) {
    background: linear-gradient(180deg, var(--gold-accent), var(--gold));
}

.auth-card .auth-illustration-visual .visual-lines {
    display: grid;
    gap: .5rem;
}

.auth-card .auth-illustration-visual .visual-lines div {
    height: .7rem;
    border-radius: 999px;
    background: var(--panel-border);
}

.auth-card .auth-illustration-visual .visual-lines div:last-child {
    width: 55%;
}

.auth-card .floating-badge {
    position: absolute;
    top: 2rem;
    left: 1rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gold-accent);
    color: var(--gold-accent-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(255, 195, 41, .45);
}

.auth-card .auth-illustration-footer {
    text-align: center;
    position: relative;
    z-index: 1;
}

.auth-card .auth-illustration-footer h3 {
    color: #ffffff;
    font-weight: 800;
    margin-bottom: .45rem;
}

.auth-card .auth-illustration-footer p {
    color: rgba(255,255,255,.78);
    font-size: .95rem;
    line-height: 1.7;
    margin: 0 auto;
    max-width: 18rem;
}

.auth-card .auth-tab-switch {
    display: flex;
    gap: .25rem;
    padding: .25rem;
    background: var(--panel-muted);
    border-radius: 999px;
    margin-bottom: 1.5rem;
}

.auth-card .auth-tab-switch button {
    flex: 1;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text-soft);
    font-weight: 800;
    border-radius: 999px;
    padding: .7rem 1rem;
}

.auth-card .auth-tab-switch button.active {
    background: var(--teal-ink);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.auth-card .auth-tab-switch button:hover {
    background: rgba(0, 106, 102, .06);
}

.auth-card .auth-form-group {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--stroke-strong);
    border-radius: var(--radius-md);
    background: var(--panel-bg);
    box-shadow: 0 10px 24px rgba(15,118,110,.06);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.auth-card .auth-form-group:hover {
    transform: translateY(-1px);
}

.auth-card .auth-form-group:focus-within {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
    transform: translateY(-1px);
}

.auth-card .auth-form-group .input-icon {
    color: #bcc9c7;
    margin-left: .75rem;
}

.auth-card .auth-form-group input {
    border: 0;
    outline: 0;
    width: 100%;
    padding: .95rem 0;
    background: transparent;
    color: var(--text-strong);
}

.auth-card .auth-form-group input::placeholder {
    color: #9aa7a3;
}

.auth-card .auth-form-group .ghost-link {
    color: var(--teal-ink);
    font-size: .8rem;
    font-weight: 700;
}

.auth-card .auth-btn {
    width: 100%;
    border: 0;
    border-radius: var(--radius-md);
    padding: .95rem 1.2rem;
    background: var(--gold-accent);
    color: var(--gold-accent-deep);
    font-weight: 800;
    box-shadow: var(--glow-gold);
}

.auth-card .auth-btn:hover {
    background: var(--gold-dark);
}

.auth-card .auth-subtle-link {
    color: var(--teal-ink);
    font-weight: 700;
}

.auth-card .auth-role-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    border-radius: 1rem;
    border: 1px solid var(--panel-border);
    background: var(--panel-bg);
    padding: .9rem .7rem;
    color: var(--text-strong);
}

.auth-card .auth-role-card.active {
    border-color: var(--teal-ink);
    background: rgba(0, 106, 102, .08);
    color: var(--teal-ink-deep);
}

.auth-card .auth-role-card.active.student {
    border-color: var(--teal-ink);
}

.auth-card .auth-role-card.active.consultant {
    border-color: var(--gold-accent);
    background: rgba(252, 208, 61, .15);
    color: var(--gold-accent-deep);
}

.auth-card .auth-success-card {
    background: var(--panel-muted);
    border: 1px solid var(--panel-border);
    border-radius: 1.4rem;
    padding: 1.25rem;
    text-align: center;
}

.auth-card .auth-success-code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: .18em;
    color: var(--teal-ink);
    display: block;
    margin-top: .35rem;
}

@media (max-width: 991.98px) {
    .auth-card {
        grid-template-columns: 1fr;
    }

    .auth-card .auth-illustration {
        display: none;
    }
}

/* ---------------------------------------------------------------------
   حالت خالی
   --------------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
}

.empty-state .material-symbols-outlined {
    font-size: 2.4rem;
    color: var(--border-color);
    display: block;
    margin-bottom: .75rem;
}

/* ---------------------------------------------------------------------
   ویزارد ۳ مرحله‌ای + جدول هفتگی
   --------------------------------------------------------------------- */
.wizard-steps {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.wizard-step-pill {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.1rem;
    border-radius: var(--radius-md);
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-weight: 700;
    font-size: .85rem;
}

.wizard-step-pill .num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-hover);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    flex-shrink: 0;
}

.wizard-step-pill.current {
    background: var(--gold-accent);
    border-color: var(--gold-dark);
    color: var(--gold-accent-deep);
    box-shadow: var(--glow-gold);
}

.wizard-step-pill.current .num {
    background: var(--gold-ink);
    color: var(--gold-light);
}

.wizard-step-pill.done {
    color: var(--brand-hover);
    border-color: var(--brand);
}

.wizard-step-pill.done .num {
    background: var(--brand);
    color: #fff;
}

/* Planning grid, wizard grid and analytics heatmap: the weekday rail is a
   genuinely separate table sitting outside the horizontally-scrolling area,
   instead of a position:sticky first column inside the same table. This
   removes the whole class of "hour cells sliding under/through the day
   column" bugs by construction — there is nothing to keep in sync while
   scrolling, the rail simply never scrolls. Kept deliberately simple (see
   NEXT_SESSION_HANDOFF.md). */
.rail-matrix {
    display: flex;
    align-items: flex-start;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
}
.rail-matrix > table {
    flex: 0 0 auto;
    border-collapse: separate;
    border-spacing: 3px;
}
.rail-matrix-scroll {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--brand) 45%, transparent) transparent;
}
.rail-matrix-scroll > table {
    border-collapse: separate;
    border-spacing: 3px;
    width: max-content;
}

.plan-matrix-rail { width: 96px; }
.plan-matrix-rail th {
    height: 2.4rem;
    padding: .35rem .3rem;
    font-size: .74rem;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
}
.plan-matrix-rail tbody th {
    height: 54px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
}
.week-grid.plan-grid thead th { height: 2.4rem; }
.week-grid.plan-grid tbody tr { height: 54px; }

.wizard-matrix-rail { width: 92px; }
.wizard-matrix-rail th {
    height: 2.4rem;
    padding: .35rem .3rem;
    font-size: .74rem;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
}
.wizard-matrix-rail tbody th {
    height: 34px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
}
.week-grid.wizard-grid thead th { height: 2.4rem; }
.week-grid.wizard-grid tbody tr { height: 34px; }

.heat-matrix-rail { width: 84px; }
.heat-matrix-rail th {
    height: 2.1rem;
    padding: .3rem;
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
}
.heat-matrix-rail tbody th {
    color: var(--text-main);
    white-space: nowrap;
}
.heatmap-table thead th { height: 2.1rem; }
.heatmap-table tbody tr { height: 2.1rem; }
.heatmap-table td {
    border: 1px solid var(--panel-border);
    border-radius: 8px;
}

.week-grid {
    border-collapse: separate;
    border-spacing: 3px;
    width: 100%;
    min-width: 980px;
    table-layout: fixed;
}

.week-grid th {
    font-size: .74rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: .35rem .2rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.week-cell {
    width: 46px;
    height: 34px;
    border-radius: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    cursor: pointer;
    user-select: none;
    transition: background-color .12s ease, transform .1s ease;
    position: relative;
}

.week-cell:hover {
    border-color: var(--brand);
}

/* بلاک مدرسه (بازهٔ شروع/پایان روز، ادغام‌شده با colspan) */
.week-cell.cell-school {
    background: var(--teal-bg);
    border-color: var(--teal-light);
    cursor: default;
}

.week-cell.cell-school .cell-title {
    font-size: .66rem;
    color: var(--teal-primary-ink);
    font-weight: 700;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 6px;
    line-height: 34px;
    text-align: center;
}

/* بلاک کار فوق‌برنامه */
.week-cell.cell-class {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    cursor: not-allowed;
}

.week-cell.cell-class .cell-title {
    font-size: .62rem;
    color: var(--text-muted);
    font-weight: 700;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;
    line-height: 34px;
    text-align: center;
}

.week-cell.cell-study {
    background: linear-gradient(145deg, var(--teal-light), var(--teal));
    border-color: var(--teal-dark);
}

.week-cell.cell-selecting {
    outline: 2px dashed var(--gold-dark);
    outline-offset: 1px;
}

.week-cell.cell-locked {
    cursor: not-allowed;
    opacity: .6;
    background: repeating-linear-gradient(
        45deg,
        var(--bg-hover),
        var(--bg-hover) 5px,
        var(--border-color) 5px,
        var(--border-color) 10px
    );
}

.week-cell.cell-locked:hover {
    border-color: var(--border-color);
}

/* خانهٔ دارای برنامهٔ ثبت‌شده (فاز ۵) */
.week-cell.cell-plan {
    --subject-color: var(--teal);
    background: color-mix(in srgb, var(--subject-color) 16%, var(--surface-1));
    border-color: color-mix(in srgb, var(--subject-color) 45%, var(--surface-1));
    border-inline-end: 3px solid var(--subject-color);
}

.week-cell.cell-plan .cell-title {
    font-size: .6rem;
    color: var(--text-strong);
    font-weight: 700;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;
    line-height: 34px;
    text-align: center;
}

.week-cell.cell-clickable {
    cursor: pointer;
}

.week-cell.cell-clickable:hover {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.week-cell.cell-clickable:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 70%, #fff);
    outline-offset: 1px;
}

@media (max-width: 767.98px) {
    .week-grid {
        min-width: 860px;
        border-spacing: 4px;
    }

    .week-cell {
        min-width: 48px;
        height: 46px;
        scroll-snap-align: start;
    }

    .plan-grid .week-cell {
        min-height: 46px;
        height: 46px;
    }

    .plan-matrix-rail { width: 84px; }
    .plan-matrix-rail th { font-size: .75rem; }
    .plan-matrix-rail tbody th,
    .week-grid.plan-grid tbody tr { height: 46px; }

    .wizard-matrix-rail { width: 84px; }
    .wizard-matrix-rail th { font-size: .75rem; }
    .wizard-matrix-rail tbody th,
    .week-grid.wizard-grid tbody tr { height: 46px; }

    .plan-grid .week-cell.cell-off::after {
        opacity: .7;
    }

    .plan-grid .week-cell .cell-title {
        line-height: 1.25;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    #planModal .modal-dialog {
        align-items: flex-end;
        min-height: 100%;
        margin: 0;
    }

    #planModal .modal-content {
        max-height: 92dvh;
        overflow-y: auto;
        border-radius: 22px 22px 0 0;
    }

    #planModal .modal-footer {
        position: sticky;
        bottom: 0;
        z-index: 2;
        background: var(--bg-card);
    }
}

.day-date {
    font-size: .66rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* Phase 4: daily study report */
.daily-report-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem 1.4rem;
    color: #fff;
    border-radius: var(--radius-lg);
    background: linear-gradient(125deg, var(--brand-primary-dark), var(--brand-primary) 58%, var(--brand-secondary));
    box-shadow: var(--shadow-card);
}
.daily-report-kicker { display: block; margin-bottom: .25rem; color: rgba(255,255,255,.75); font-size: .78rem; font-weight: 800; }
.daily-report-hero h2 { margin: 0 0 .35rem; color: #fff; font-size: 1.25rem; font-weight: 900; }
.daily-report-hero p { margin: 0; color: rgba(255,255,255,.78); font-size: .86rem; }
.daily-report-progress {
    --report-progress: 0%;
    flex: 0 0 auto;
    width: 106px;
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    text-align: center;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, var(--brand-primary) 75%, transparent 77% 99%), conic-gradient(#fff var(--report-progress), rgba(255,255,255,.22) 0);
}
.daily-report-progress strong { font-size: 1.25rem; font-weight: 900; }
.daily-report-progress span { max-width: 70px; color: rgba(255,255,255,.78); font-size: .66rem; }
.daily-report-card { overflow: hidden; border-inline-start: 4px solid var(--border-color); }
.daily-report-card.is-done { border-inline-start-color: var(--accent-green); }
.daily-report-card.is-partial { border-inline-start-color: var(--accent-orange); }
.daily-report-card.is-not-done { border-inline-start-color: var(--danger); }
.daily-report-card.is-pending { border-inline-start-color: var(--brand-primary); }
.daily-report-card-title { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; font-weight: 850; }
.daily-report-time { padding: .35rem .65rem; color: var(--brand-primary-dark); border-radius: 999px; background: var(--brand-primary-soft); font-variant-numeric: tabular-nums; }
.daily-report-meta { display: flex; flex-wrap: wrap; gap: .6rem; }
.daily-report-meta > span { display: inline-flex; align-items: center; gap: .3rem; padding: .4rem .65rem; color: var(--text-secondary); font-size: .78rem; border-radius: 999px; background: var(--surface-muted); }
.report-status-picker { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .6rem; padding: 0; border: 0; }
.report-status-picker legend { float: none; width: 100%; grid-column: 1 / -1; }
.report-status-option { position: relative; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: .35rem; padding: .6rem; cursor: pointer; color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-muted); font-size: .82rem; font-weight: 800; }
.report-status-option input { position: absolute; opacity: 0; pointer-events: none; }
.report-status-option:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--brand-primary) 25%, transparent); }
.report-status-option.is-done:has(input:checked) { color: #187447; border-color: color-mix(in srgb, var(--accent-green) 55%, #fff); background: color-mix(in srgb, var(--accent-green) 12%, #fff); }
.report-status-option.is-partial:has(input:checked) { color: #8a5700; border-color: color-mix(in srgb, var(--accent-orange) 60%, #fff); background: color-mix(in srgb, var(--accent-orange) 14%, #fff); }
.report-status-option.is-not-done:has(input:checked) { color: #a73535; border-color: color-mix(in srgb, var(--danger) 55%, #fff); background: color-mix(in srgb, var(--danger) 10%, #fff); }
.report-input-suffix { position: relative; }
.report-input-suffix .form-control { padding-inline-end: 3.3rem; }
.report-input-suffix span { position: absolute; inset-inline-end: .75rem; top: 50%; translate: 0 -50%; color: var(--text-muted); font-size: .72rem; pointer-events: none; }

@media (max-width: 575.98px) {
    .daily-report-hero { align-items: flex-start; padding: 1rem; }
    .daily-report-hero h2 { font-size: 1rem; }
    .daily-report-hero p { font-size: .75rem; }
    .daily-report-progress { width: 82px; }
    .daily-report-progress strong { font-size: 1rem; }
    .daily-report-stats .stat-tile { min-height: 86px; padding: .75rem; }
    .report-status-picker { grid-template-columns: 1fr; }
    .report-status-option { justify-content: flex-start; padding-inline: 1rem; }
    .daily-report-card .card-header, .daily-report-card .card-body { padding-inline: .85rem; }
}

/* Phase 4: consultant group planning */
.group-plan-hero { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.3rem; border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--border-subtle)); border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--surface), var(--brand-primary-soft)); }
.group-plan-hero-icon { flex: 0 0 auto; width: 54px; height: 54px; display: grid; place-items: center; color: #fff; border-radius: 17px; background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); box-shadow: 0 10px 22px color-mix(in srgb, var(--brand-primary) 24%, transparent); }
.group-plan-hero > div > span { color: var(--brand-primary); font-size: .75rem; font-weight: 850; }
.group-plan-hero h2 { margin: .15rem 0 .25rem; font-size: 1.2rem; font-weight: 900; }
.group-plan-hero p { margin: 0; color: var(--text-secondary); font-size: .82rem; }
.group-plan-students, .group-plan-details { overflow: visible; }
.group-student-tools { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.group-student-search { min-width: 0; flex: 1; display: flex; align-items: center; gap: .4rem; padding: .45rem .65rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-muted); }
.group-student-search .material-symbols-outlined { color: var(--text-muted); font-size: 1.15rem; }
.group-student-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; }
.group-student-list { max-height: 455px; display: grid; gap: .5rem; overflow-y: auto; padding-inline-end: .2rem; scrollbar-width: thin; }
.group-student-item { position: relative; display: flex; align-items: center; gap: .65rem; padding: .65rem; cursor: pointer; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface); transition: border-color .15s ease, background-color .15s ease; }
.group-student-item input { position: absolute; opacity: 0; }
.group-student-item:has(input:checked) { border-color: color-mix(in srgb, var(--brand-primary) 50%, #fff); background: var(--brand-primary-soft); }
.group-student-check { width: 22px; height: 22px; display: grid; place-items: center; color: transparent; border: 1px solid var(--border-subtle); border-radius: 7px; font-size: 1rem; background: var(--surface); }
.group-student-item:has(input:checked) .group-student-check { color: #fff; border-color: var(--brand-primary); background: var(--brand-primary); }
.group-student-item:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--brand-primary) 22%, transparent); }
.group-student-avatar { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; color: var(--brand-primary-dark); border-radius: 11px; background: color-mix(in srgb, var(--brand-primary) 12%, #fff); font-weight: 900; }
.group-student-info { min-width: 0; display: grid; }
.group-student-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.group-student-info small { color: var(--text-muted); font-size: .7rem; }
.group-plan-submit { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem; border-radius: var(--radius-md); background: var(--surface-muted); }
.group-plan-submit > div { display: grid; gap: .15rem; }
.group-plan-submit strong { font-size: .84rem; }
.group-plan-submit small { color: var(--text-muted); font-size: .7rem; }
.group-plan-note { min-height: 118px; resize: vertical; line-height: 1.8; }

@media (max-width: 575.98px) {
    .group-plan-hero { align-items: flex-start; padding: 1rem; }
    .group-plan-hero-icon { width: 44px; height: 44px; border-radius: 14px; }
    .group-plan-hero h2 { font-size: 1rem; }
    .group-student-list { max-height: 330px; }
    .group-plan-submit { align-items: stretch; flex-direction: column; }
    .group-plan-submit .btn { width: 100%; min-height: 48px; }
}

.grid-toolbar {
    position: sticky;
    bottom: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 1rem;
    margin-top: 1rem;
}

.legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
    margin-left: .4rem;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------
   ریسپانسیو
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        right: 0;
        top: var(--topbar-h);
        height: calc(100vh - var(--topbar-h));
        z-index: 1050;
        transform: translateX(100%);
        transition: transform .25s var(--bounce);
        box-shadow: -10px 0 30px rgba(0, 0, 0, .25);
    }

    .app-sidebar.open {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(16, 28, 25, .5);
        z-index: 1040;
    }

    .sidebar-backdrop.open {
        display: block;
    }

    .app-content {
        padding: 1rem;
    }
}

@media (min-width: 992px) {
    .sidebar-toggle-btn {
        display: none;
    }
}

/* ---------------------------------------------------------------------
   نوار پایین موبایل + دکمهٔ شناور «+» — مکمل سایدبار کشویی، فقط زیر ۷۶۸px
   --------------------------------------------------------------------- */
.mobile-bottom-nav {
    position: fixed;
    inset: auto 0 0 0;
    height: 64px;
    background: var(--panel-muted);
    border-top: 1px solid var(--panel-border);
    box-shadow: var(--shadow-md);
    z-index: 1045;
    align-items: center;
    justify-content: space-around;
    padding: 0 .5rem;
}

.mobile-bottom-nav .tab-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    font-size: .66rem;
    font-weight: 700;
    color: var(--text-soft);
    flex: 1;
    padding: .3rem 0;
}

.mobile-bottom-nav .tab-btn .material-symbols-outlined {
    font-size: 1.3rem;
}

.mobile-bottom-nav .tab-btn.active {
    color: var(--teal-primary-ink);
}

.mobile-bottom-nav .mobile-fab {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    margin-top: -26px;
    flex-shrink: 0;
    background: var(--gold-accent);
    color: var(--gold-accent-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--glow-gold);
    border: 3px solid var(--panel-bg);
}

@media (max-width: 767.98px) {
    .app-content {
        padding-bottom: 5.5rem;
    }
}

/* --- امتیازدهی ستاره‌ای (یادداشت مشاوره) --- */
.star-rating {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: .15rem;
}

.star-rating input {
    display: none;
}

.star-rating label {
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--border-color);
    transition: color .15s;
}

.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: var(--gold);
}

.star-display .star-ico {
    font-size: 1.1rem;
    color: var(--border-color);
    margin-inline-start: .1rem;
    font-variation-settings: 'FILL' 0;
}

.star-display .star-ico.is-filled {
    color: var(--gold);
    font-variation-settings: 'FILL' 1;
}

/* --- نوتیفیکیشن داخلی --- */
.notif-badge {
    position: absolute;
    top: 2px;
    inset-inline-end: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--coral);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--bg-topbar);
}

.notif-dropdown {
    width: 320px;
    max-height: 420px;
    overflow-y: auto;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

.notif-dropdown-header {
    padding: .7rem 1rem;
    font-weight: 700;
    border-bottom: 1px solid var(--border-color);
}

.notif-item {
    display: block;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    text-decoration: none;
}

.notif-item:hover {
    background: var(--bg-hover);
}

.notif-item.notif-unread {
    background: var(--brand-soft);
    position: relative;
}

.notif-dropdown-footer {
    display: block;
    padding: .6rem 1rem;
    text-align: center;
    font-size: .85rem;
    color: var(--brand-hover);
    text-decoration: none;
    font-weight: 700;
}

.notif-dropdown-footer:hover {
    background: var(--bg-hover);
}

/* ---------------------------------------------------------------------
   صفحهٔ آنالیز پیشرفت — کنترل سگمنتد بازهٔ زمانی + هیت‌مپ دوبعدی
   --------------------------------------------------------------------- */
.doughnut-wrap {
    position: relative;
}

.doughnut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
}

.doughnut-center .doughnut-percent {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--teal-primary-ink);
    line-height: 1.15;
}

.doughnut-center .doughnut-caption {
    font-size: .75rem;
    font-weight: 700;
    color: var(--text-muted);
}

#analytics-range-group {
    background: var(--surface-3);
    padding: .25rem;
    border-radius: 999px;
    gap: .15rem;
}

#analytics-range-group .btn {
    border: 0 !important;
    border-radius: 999px !important;
    color: var(--text-soft);
    font-weight: 700;
}

#analytics-range-group .btn:hover {
    background: var(--teal-bg);
    color: var(--teal-primary-ink);
}

#analytics-range-group .btn.active {
    background: var(--teal) !important;
    color: #fff !important;
    box-shadow: var(--glow-teal);
}

.heatmap-table th,
.heatmap-table td {
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    padding: .3rem;
}

/* Semantic tables keep their two-dimensional layout instead of becoming cards. */
.table-responsive:has(> table[data-table-layout]) {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

/* Prevent Chart.js from deriving excessive height from wide card bodies. */
#chart-trend { width: 100% !important; height: 280px !important; max-height: 280px; }
#chart-subject,
#chart-grouped { width: 100% !important; height: 250px !important; max-height: 250px; }
#chart-doughnut { width: 100% !important; height: 230px !important; max-height: 230px; }

@media (max-width: 575.98px) {
    #chart-trend { height: 220px !important; max-height: 220px; }
    #chart-subject,
    #chart-grouped { height: 210px !important; max-height: 210px; }
    #chart-doughnut { height: 205px !important; max-height: 205px; }
    .heatmap-table th,
    .heatmap-table td { min-width: 42px; }
    .heat-matrix-rail { width: 78px; }
}

/* --- چاپ / خروجی PDF (از طریق دیالوگ چاپ مرورگر) --- */
@media print {
    .no-print {
        display: none !important;
    }

    body * {
        visibility: hidden;
    }

    .print-area,
    .print-area * {
        visibility: visible;
    }

    .print-area {
        position: absolute;
        inset-inline-start: 0;
        top: 0;
        width: 100%;
        box-shadow: none !important;
        border: none !important;
    }
}

/* =====================================================================
   Doctor Plan — Phase 1 shared application shell
   Purple/pink visual language approved in the Stitch prototypes.
   Legacy tokens are remapped so existing role pages inherit this system.
   ===================================================================== */
:root,
[data-theme="light"] {
    --brand-primary: #7517d6;
    --brand-primary-dark: #5710a8;
    --brand-primary-soft: #f1e8ff;
    --brand-secondary: #df1683;
    --accent-cyan: #16b9d4;
    --accent-green: #35c875;
    --accent-orange: #ff9f43;
    --page-bg: #f1f6fb;
    --panel-bg: #f1f6fb;
    --panel-muted: #f7f9fc;
    --panel-border: #e4e9f1;
    --surface-1: #ffffff;
    --surface-2: #ffffff;
    --surface-3: #f7f9fc;
    --text-strong: #252333;
    --text-soft: #697386;
    --stroke-strong: #d8deea;
    --sidebar-bg: #ffffff;
    --topbar-bg: rgba(255, 255, 255, .92);
    --topbar-border: #e4e9f1;
    --page-header-bg: transparent;
    --page-surface-bg: transparent;
    --teal: var(--brand-primary);
    --teal-light: #a65cf1;
    --teal-dark: var(--brand-primary-dark);
    --teal-bg: var(--brand-primary-soft);
    --teal-ink: var(--brand-primary);
    --teal-ink-deep: var(--brand-primary-dark);
    --teal-primary-ink: var(--brand-primary);
    --gold: var(--accent-orange);
    --gold-accent: var(--brand-secondary);
    --gold-accent-deep: #ffffff;
    --coral: var(--brand-secondary);
    --coral-dark: #b80f69;
    --brand: var(--brand-primary);
    --brand-hover: var(--brand-primary-dark);
    --brand-soft: var(--brand-primary-soft);
    --bg-body: var(--page-bg);
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-sidebar-active: var(--brand-primary-soft);
    --bg-topbar: #ffffff;
    --bg-hover: #f5f0fc;
    --bg-input: #f7f9fc;
    --text-main: var(--text-strong);
    --text-muted: var(--text-soft);
    --text-sidebar: var(--text-strong);
    --text-sidebar-muted: var(--text-soft);
    --border-color: var(--panel-border);
    --focus-ring: 0 0 0 3px rgba(117, 23, 214, .2);
    --shadow-card: 0 8px 26px rgba(45, 35, 72, .07);
    --shadow-md: 0 10px 30px rgba(45, 35, 72, .10);
    --shadow-lg: 0 18px 45px rgba(45, 35, 72, .14);
    --glow-teal: 0 8px 24px rgba(117, 23, 214, .22);
    --glow-gold: 0 8px 24px rgba(223, 22, 131, .24);
}

[data-theme="dark"] {
    --brand-primary: #a65cf1;
    --brand-primary-dark: #c18af6;
    --brand-primary-soft: rgba(166, 92, 241, .16);
    --brand-secondary: #f04a9f;
    --page-bg: #15121c;
    --panel-bg: #15121c;
    --panel-muted: #211c2a;
    --panel-border: #373040;
    --surface-1: #211c2a;
    --surface-2: #211c2a;
    --surface-3: #292232;
    --text-strong: #f7f3fb;
    --text-soft: #b8afc2;
    --sidebar-bg: #1c1724;
    --topbar-bg: rgba(28, 23, 36, .94);
    --topbar-border: #373040;
    --page-header-bg: transparent;
    --page-surface-bg: transparent;
    --teal: var(--brand-primary);
    --teal-light: #c18af6;
    --teal-dark: #8640ca;
    --teal-bg: var(--brand-primary-soft);
    --teal-ink: var(--brand-primary-dark);
    --teal-ink-deep: var(--brand-primary-dark);
    --teal-primary-ink: var(--brand-primary-dark);
    --gold: #ffad66;
    --gold-accent: var(--brand-secondary);
    --gold-accent-deep: #ffffff;
    --coral: var(--brand-secondary);
    --brand: var(--brand-primary);
    --brand-hover: var(--brand-primary-dark);
    --brand-soft: var(--brand-primary-soft);
    --bg-body: var(--page-bg);
    --bg-card: var(--surface-1);
    --bg-elevated: var(--surface-2);
    --bg-sidebar: var(--sidebar-bg);
    --bg-sidebar-active: var(--brand-primary-soft);
    --bg-topbar: #1c1724;
    --bg-hover: #2c2437;
    --bg-input: #292232;
    --text-main: var(--text-strong);
    --text-muted: var(--text-soft);
    --text-sidebar: var(--text-strong);
    --text-sidebar-muted: var(--text-soft);
    --border-color: var(--panel-border);
}

body {
    background: var(--page-bg);
    font-family: 'Vazirmatn', Tahoma, sans-serif;
}

.app-topbar {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--topbar-border);
    box-shadow: 0 4px 18px rgba(45, 35, 72, .04);
}

.brand-badge,
.sidebar-brand-mark {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: #fff;
    box-shadow: 0 8px 20px rgba(117, 23, 214, .22);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .35rem .35rem 1.15rem;
    margin-bottom: .85rem;
    border-bottom: 1px solid var(--panel-border);
    color: var(--text-strong);
    text-decoration: none;
}

.sidebar-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-weight: 900;
}

.sidebar-brand strong,
.sidebar-brand small { display: block; }
.sidebar-brand strong { font-size: 1rem; }
.sidebar-brand small { color: var(--text-soft); font-size: .68rem; margin-top: .12rem; }

.app-sidebar {
    border-inline-end: 1px solid var(--panel-border);
    box-shadow: -8px 0 28px rgba(45, 35, 72, .05);
}

.app-sidebar .user-mini {
    background: var(--panel-muted);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
}

.app-sidebar .user-mini .avatar {
    background: linear-gradient(135deg, var(--brand-primary-soft), #ffe7f4);
    color: var(--brand-primary);
}

.app-nav .nav-link { border-radius: 12px; color: var(--text-soft); }
.app-nav .nav-link:hover { background: var(--brand-primary-soft); color: var(--brand-primary); }
.app-nav .nav-link.active {
    background: linear-gradient(90deg, var(--brand-primary-soft), rgba(223, 22, 131, .07));
    color: var(--brand-primary);
    box-shadow: inset -3px 0 0 var(--brand-primary);
}

.page-header h1 { color: var(--text-strong); font-weight: 900; }
.card, .stat-tile, .table-responsive, .form-section {
    border-color: var(--panel-border);
    box-shadow: var(--shadow-card);
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    border-color: transparent;
    box-shadow: var(--glow-teal);
}
.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--brand-primary-dark), #c40f73);
    border-color: transparent;
}

.mobile-bottom-nav {
    background: var(--surface-1);
    border-color: var(--panel-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.mobile-bottom-nav .tab-btn.active { color: var(--brand-primary); }
.mobile-bottom-nav .mobile-fab {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: #fff;
    border-color: var(--surface-1);
}

@media (max-width: 991.98px) {
    body.sidebar-is-open { overflow: hidden; }
    .app-sidebar { background: var(--sidebar-bg); }
    .sidebar-backdrop { background: rgba(23, 16, 35, .5); backdrop-filter: blur(2px); }
}

/* =====================================================================
   Stitch-auth rebuild — login, registration and role selection
   ===================================================================== */

.auth-shell {
    padding: 2rem;
    background:
        radial-gradient(circle at 8% 12%, rgba(117,23,214,.08), transparent 28%),
        radial-gradient(circle at 92% 88%, rgba(223,22,131,.07), transparent 25%),
        #f7f3fb;
}

.stitch-auth {
    max-width: 1080px;
    min-height: 650px;
    border-radius: 24px;
    border: 1px solid #e8dff0;
    background: #fff;
    box-shadow: 0 12px 34px rgba(50, 20, 78, .09);
}

.stitch-auth .auth-form-panel { background: #fff; padding: 3.25rem 4rem; }
.stitch-auth .auth-form-panel .inner { max-width: 410px; }
.stitch-auth .auth-heading .brand-badge {
    width: 50px !important;
    height: 50px !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, #8e18e6, #d70b91) !important;
    color: #fff !important;
    box-shadow: 0 10px 25px rgba(117,23,214,.22) !important;
}
.stitch-auth .stitch-brand-name { color: #7517d6; font-size: 1.4rem; font-weight: 900; margin-top: 1rem; }
.stitch-auth .auth-heading h1 { color: #272334; font-weight: 900 !important; }
.stitch-auth .form-label { color: #3b3445; font-size: .82rem; margin-bottom: .4rem; }
.stitch-auth .auth-form-group {
    height: 50px;
    border: 1px solid #d9d1e1;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}
.stitch-auth .auth-form-group:hover { transform: none; }
.stitch-auth .auth-form-group:focus-within { transform: none; border-color: #861bd5; box-shadow: 0 0 0 3px rgba(117,23,214,.12); }
.stitch-auth .auth-form-group .input-icon { color: #81788c; }
.stitch-auth .auth-form-group input { padding: .72rem 0; font-size: .86rem; }
.auth-card .password-toggle {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #81788c;
    transition: color .15s ease, background-color .15s ease;
}
.auth-card .password-toggle:hover,
.auth-card .password-toggle:focus-visible {
    color: #7517d6;
    background: #f3eaff;
    outline: none;
}
.auth-card .password-toggle .material-symbols-outlined { font-size: 1.2rem; }
.password-field-wrap { position:relative; }
.password-field-wrap > .form-control { padding-inline-start:3rem; }
.password-field-wrap > .password-toggle {
    position:absolute;
    inset-inline-start:.45rem;
    bottom:.38rem;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:9px;
    background:transparent;
    color:#81788c;
}
.password-field-wrap > .password-toggle:hover,
.password-field-wrap > .password-toggle:focus-visible { color:#7517d6; background:#f3eaff; outline:none; }
.password-field-wrap > .password-toggle .material-symbols-outlined { font-size:1.2rem; }
.stitch-auth .auth-form-group input:-webkit-autofill,
.stitch-auth .auth-form-group input:-webkit-autofill:hover,
.stitch-auth .auth-form-group input:-webkit-autofill:focus,
.stitch-auth .auth-form-group input:-webkit-autofill:active {
    -webkit-text-fill-color: #272334;
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    caret-color: #272334;
    border-radius: 0;
    transition: background-color 9999s ease-out 0s;
}
.stitch-auth .ghost-link,
.stitch-auth .auth-subtle-link { color: #7517d6 !important; }
.stitch-auth .auth-btn {
    min-height: 50px;
    border-radius: 7px;
    background: linear-gradient(90deg, #7412d2, #9814de);
    color: #fff;
    box-shadow: 0 10px 23px rgba(117,23,214,.22);
}
.stitch-auth .auth-btn:hover { background: linear-gradient(90deg, #5d0fa9, #7b10b8); }
.stitch-auth .auth-trust { margin-top: 1.5rem; color: #81778b; font-size: .72rem; text-align: center; }
.stitch-auth .auth-trust .material-symbols-outlined { color: #7d19ca; font-size: 1rem; vertical-align: middle; }
.stitch-auth .auth-back-link { display: flex; justify-content: center; gap: .3rem; margin-top: 1rem; color: #7517d6; text-decoration: none; font-size: .78rem; }
.stitch-auth .auth-back-link .material-symbols-outlined { font-size: 1rem; }

.stitch-login { grid-template-columns: 1fr 1fr; }
.stitch-login .auth-illustration {
    padding: 4rem;
    background: linear-gradient(145deg, #6904bd 0%, #8a05da 50%, #6100a9 100%);
    border: 0;
    color: #fff;
    justify-content: center;
    gap: 2rem;
}
.stitch-login .stitch-login-visual {
    position: relative; height: 220px; border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,255,255,.97), rgba(234,225,255,.85));
    box-shadow: 0 20px 45px rgba(33,0,64,.22); overflow: hidden;
}
.stitch-login .visual-teacher {
    position: absolute; right: 50%; top: 45px; transform: translateX(50%);
    width: 92px; height: 115px; border-radius: 46px 46px 28px 28px;
    display: grid; place-items: center; background: linear-gradient(180deg,#ffcae4,#c761ed); color:#6710a3;
}
.stitch-login .visual-teacher .material-symbols-outlined { font-size: 3.3rem; }
.stitch-login .visual-board { position:absolute; left:24px; top:30px; width:120px; height:78px; padding:18px; background:#fff; border:2px solid #c8a6e5; border-radius:10px; }
.stitch-login .visual-board span { display:block; height:6px; margin-bottom:8px; border-radius:8px; background:#ddc6ee; }
.stitch-login .visual-orbit { position:absolute; z-index:2; padding:10px; border-radius:12px; background:#fff; color:#861bd5; box-shadow:0 8px 20px rgba(68,18,99,.15); }
.stitch-login .orbit-one { right:22px; top:25px; }
.stitch-login .orbit-two { right:45px; bottom:20px; color:#df1683; }
.stitch-login .auth-illustration-footer { text-align: right; }
.stitch-login .auth-illustration-footer h3 { font-size: 1.35rem; }
.auth-feature-list { list-style:none; padding:1rem; margin:1rem 0 0; border-radius:12px; background:rgba(255,255,255,.1); }
.auth-feature-list li { display:flex; align-items:center; gap:.5rem; padding:.32rem 0; font-size:.85rem; }
.auth-feature-list .material-symbols-outlined { font-size:1.05rem; color:#72e4e7; }

.stitch-register {
    max-width: 1180px;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 72px auto;
    min-height: 760px;
}
.stitch-register .auth-site-header {
    grid-column: 1 / -1; display:flex; align-items:center; justify-content:space-between;
    padding:0 2rem; border-bottom:1px solid #eee6f4; background:#fff;
}
.auth-site-brand { display:flex; align-items:center; gap:.45rem; color:#7517d6; text-decoration:none; font-weight:900; }
.auth-site-brand .material-symbols-outlined { color:#df1683; }
.auth-site-actions { display:flex; align-items:center; gap:1.4rem; }
.auth-site-actions a { color:#6f6678; font-size:.78rem; text-decoration:none; }
.auth-site-actions strong { color:#7517d6; }
.stitch-register .auth-form-panel { grid-column:1; grid-row:2; align-items:flex-start; padding:2.4rem 3rem 3rem; }
.stitch-register .auth-form-panel .inner { max-width:680px; }
.stitch-register .auth-illustration { grid-column:2; grid-row:2; background:#f3f7fb; color:#352b42; border:0; padding:3rem 2rem; justify-content:center; gap:2.5rem; }
.register-stepper { display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:2rem; position:relative; }
.register-stepper::before { content:""; position:absolute; top:17px; right:16%; left:16%; height:3px; background:#e4dce9; }
.register-stepper div { display:flex; flex-direction:column; align-items:center; gap:.35rem; color:#93899c; font-size:.72rem; z-index:1; }
.register-stepper b { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#f4f0f7; border:2px solid #e0d7e6; }
.register-stepper .active { color:#7517d6; font-weight:800; }
.register-stepper .active b { background:#7517d6; color:#fff; border-color:#7517d6; box-shadow:0 0 0 6px #f1e8ff; }
.role-selection-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
.stitch-register .auth-role-card {
    min-height:112px; position:relative; justify-content:center; padding:1rem;
    border:1px solid #ded5e5; border-radius:12px; box-shadow:none; cursor:pointer;
}
.stitch-register .auth-role-card .role-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:#f3eaff; color:#7517d6; }
.stitch-register .auth-role-card strong { color:#352c3e; font-size:.92rem; }
.stitch-register .auth-role-card small { color:#84798c; font-size:.7rem; }
.stitch-register .auth-role-card .role-check { display:none; position:absolute; top:.55rem; left:.55rem; color:#7517d6; font-size:1rem; }
.stitch-register .auth-role-card.active { border:2px solid #7517d6; background:#fcf9ff; color:#7517d6; }
.stitch-register .auth-role-card.active .role-check { display:block; }
.stitch-register label[for="role_school"] {
    grid-column: 1 / -1;
    min-height: 104px;
    flex-direction: row;
    justify-content: flex-start;
    text-align: right;
    padding-inline: 2rem;
}
.stitch-register label[for="role_school"] small { margin-inline-start: auto; }
.register-form-title { margin:1.6rem 0 1rem; padding-top:1.2rem; border-top:1px solid #e8e0ed; color:#3c3245; font-size:1rem; font-weight:900; }
.register-side-brand { display:flex; justify-content:center; align-items:center; gap:.5rem; color:#7517d6; font-weight:900; }
.register-side-visual { position:relative; height:230px; display:grid; place-items:center; border-radius:16px; background:linear-gradient(145deg,#dbeaf2,#f8f1ff); overflow:hidden; }
.register-side-visual > .material-symbols-outlined { font-size:6rem; color:#7517d6; filter:drop-shadow(0 12px 15px rgba(117,23,214,.18)); }
.mini-books { position:absolute; bottom:25px; display:flex; align-items:flex-end; gap:6px; }
.mini-books i { display:block; width:38px; height:15px; background:#df1683; border-radius:4px; }
.mini-books i:nth-child(2) { width:50px; background:#7517d6; }
.mini-books i:nth-child(3) { background:#16b9d4; }
.stitch-register .auth-illustration-footer h3 { color:#7517d6; }
.stitch-register .auth-illustration-footer p { color:#6f6578; }

@media (max-width: 991.98px) {
    .auth-shell { padding:0; align-items:flex-start; }
    .stitch-auth { border-radius:0; border:0; min-height:100vh; box-shadow:none; }
    .stitch-login { grid-template-columns:1fr; }
    .stitch-login .auth-illustration { display:none; }
    .stitch-auth .auth-form-panel { padding:2rem 1.25rem; }
    .stitch-register { display:flex; flex-direction:column; }
    .stitch-register .auth-site-header { min-height:64px; padding:0 1rem; }
    .auth-site-actions a:first-child { display:none; }
    .stitch-register .auth-illustration { display:none; }
    .stitch-register .auth-form-panel { padding:1.5rem 1rem 3rem; }
}

@media (max-width: 575.98px) {
    .role-selection-grid { grid-template-columns:1fr 1fr; gap:.55rem; }
    .stitch-register .auth-role-card { min-height:105px; padding:.7rem; }
    .stitch-register label[for="role_school"] {
        min-height: 96px;
        padding-inline: 1rem;
    }
    .stitch-register label[for="role_school"] small { margin-inline-start: 0; }
    .stitch-auth .auth-options { align-items:flex-start !important; gap:.5rem; }
}

/* Change password — aligned with the Stitch authentication family. */
.change-password-card {
    max-width: 980px;
    min-height: 650px;
    grid-template-columns: 1.15fr .85fr;
}
.change-password-card .auth-form-panel { padding: 3.25rem 4rem; }
.change-password-card .auth-form-panel .inner { max-width: 440px; }
.change-password-heading { display:flex; align-items:center; gap:1rem; margin-bottom:2rem; }
.change-password-icon {
    width:58px; height:58px; flex:0 0 58px; display:grid; place-items:center;
    border-radius:18px; background:linear-gradient(135deg,#7517d6,#df1683); color:#fff;
    box-shadow:0 10px 24px rgba(117,23,214,.2);
}
.change-password-icon .material-symbols-outlined { font-size:1.7rem; }
.change-password-eyebrow { display:block; color:#7517d6; font-size:.72rem; font-weight:900; margin-bottom:.15rem; }
.change-password-heading h1 { margin:0; color:#292333; font-size:1.55rem; font-weight:900; }
.change-password-heading p { margin:.3rem 0 0; color:#776d81; font-size:.8rem; line-height:1.7; }
.change-password-form .auth-form-group { height:52px; }
.password-strength { display:flex; align-items:center; gap:.7rem; color:#877d91; font-size:.7rem; }
.strength-bar { width:92px; height:5px; border-radius:10px; background:#ece6f0; overflow:hidden; }
.strength-bar i { display:block; width:0; height:100%; border-radius:inherit; transition:width .2s ease,background-color .2s ease; }
.strength-bar i[data-score="1"] { width:25%; background:#ef4444; }
.strength-bar i[data-score="2"] { width:50%; background:#ff9f43; }
.strength-bar i[data-score="3"] { width:75%; background:#16b9d4; }
.strength-bar i[data-score="4"] { width:100%; background:#35c875; }
.password-match { min-height:18px; font-size:.7rem; }
.password-match.is-valid { color:#168a4b; }
.password-match.is-invalid { color:#d32855; }
.password-strength-track {
    width: 96px;
    height: 5px;
    overflow: hidden;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #ece6f0;
}
.password-strength-track > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #ef4444;
    transition: width .2s ease, background-color .2s ease;
}
.password-strength[data-score="2"] .password-strength-track > span { background:#ff9f43; }
.password-strength[data-score="3"] .password-strength-track > span { background:#16b9d4; }
.password-strength[data-score="4"] .password-strength-track > span { background:#35c875; }
.auth-btn.is-loading { cursor:wait; opacity:.86; }
.auth-spinner {
    width:18px;
    height:18px;
    border:2px solid rgba(255,255,255,.45);
    border-top-color:#fff;
    border-radius:50%;
    animation:auth-spin .7s linear infinite;
}
@keyframes auth-spin { to { transform:rotate(360deg); } }

/* Pending approval — visual fallback for the existing server template. */
.auth-shell > .auth-card.text-center {
    width:min(100%, 560px);
    min-height:0;
    padding:3rem;
    border:1px solid #e8dff0;
    border-radius:24px;
    background:#fff;
    box-shadow:0 16px 44px rgba(50,20,78,.1);
}
.auth-shell > .auth-card.text-center > span:first-child {
    width:72px !important;
    height:72px !important;
    border-radius:22px !important;
    background:linear-gradient(135deg,#7517d6,#df1683) !important;
    color:#fff !important;
    box-shadow:0 12px 26px rgba(117,23,214,.22);
}
.auth-shell > .auth-card.text-center h1 { color:#292333; font-size:1.45rem !important; font-weight:900 !important; }
.auth-shell > .auth-card.text-center p { line-height:2; }
.auth-shell > .auth-card.text-center .btn { min-height:48px; padding:.65rem 1.1rem; border-radius:10px; }

@media (max-width:575.98px) {
    .auth-shell > .auth-card.text-center {
        width:100%;
        min-height:100vh;
        padding:2.5rem 1.25rem;
        border:0;
        border-radius:0;
        box-shadow:none;
    }
    .auth-shell > .auth-card.text-center .d-flex { flex-direction:column; }
    .auth-shell > .auth-card.text-center .btn { width:100%; justify-content:center; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-spinner { animation-duration:1.5s; }
}

/* =====================================================================
   Phase 3 — shared role dashboard language
   ===================================================================== */
.page-surface > .dashboard-hero,
.page-surface > .list-panel.panel-brand:first-child {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(125deg, #6810ba 0%, #8215d8 56%, #d31891 100%);
    box-shadow: 0 18px 40px rgba(117, 23, 214, .18);
}
.page-surface > .dashboard-hero::before,
.page-surface > .list-panel.panel-brand:first-child::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    inset-inline-start: -80px;
    top: -120px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}
.page-surface > .dashboard-hero::after,
.page-surface > .list-panel.panel-brand:first-child::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    inset-inline-end: 12%;
    bottom: -75px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
}
.page-surface > .dashboard-hero .card-body,
.page-surface > .list-panel.panel-brand:first-child .card-body {
    position: relative;
    z-index: 1;
    min-height: 132px;
    padding: 2rem 2.25rem;
}
.page-surface > .dashboard-hero .text-muted,
.page-surface > .list-panel.panel-brand:first-child .text-muted { color: rgba(255,255,255,.76) !important; }
.page-surface > .dashboard-hero .code-box,
.page-surface > .list-panel.panel-brand:first-child .code-box {
    border-color: rgba(255,255,255,.26);
    background: rgba(255,255,255,.14);
    color: #fff;
    backdrop-filter: blur(8px);
}

.page-surface .stat-tile {
    position: relative;
    overflow: hidden;
    min-height: 116px;
    padding: 1.2rem;
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    background: var(--surface-1);
    box-shadow: 0 10px 28px rgba(45,35,72,.07);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.page-surface .stat-tile::after {
    content: "";
    position: absolute;
    width: 70px;
    height: 70px;
    inset-inline-end: -28px;
    bottom: -35px;
    border-radius: 50%;
    background: var(--brand-primary-soft);
    opacity: .75;
}
.page-surface .stat-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(117,23,214,.22);
    box-shadow: 0 16px 34px rgba(66,38,91,.11);
}
.page-surface .stat-tile .stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
}
.page-surface .stat-tile .stat-value { color: var(--text-strong); font-size: 1.65rem; font-weight: 900; }
.page-surface .stat-tile .stat-label { color: var(--text-soft); font-weight: 700; }

.page-surface > .card,
.page-surface > .row .card:not(.stat-tile) {
    border-radius: 18px;
    border-color: var(--panel-border);
}
.page-surface .card-header {
    min-height: 58px;
    padding: .9rem 1.15rem;
    background: transparent;
    border-bottom-color: var(--panel-border);
    color: var(--text-strong);
    font-weight: 900;
}
.page-surface .card-header > span { display: inline-flex; align-items: center; gap: .45rem; }
.page-surface .card-header .material-symbols-outlined { color: var(--brand-primary); }

@media (max-width: 575.98px) {
    .page-surface > .dashboard-hero .card-body,
    .page-surface > .list-panel.panel-brand:first-child .card-body { min-height: 118px; padding: 1.4rem; }
    .page-surface .stat-tile { min-height: 102px; padding: 1rem; }
    .page-surface .stat-tile .stat-icon { width: 44px; height: 44px; border-radius: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .page-surface .stat-tile { transition: none; }
    .page-surface .stat-tile:hover { transform: none; }
}

.dashboard-section-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1rem;
}
.dashboard-section-kicker {
    display:block;
    margin-bottom:.2rem;
    color:var(--brand-primary);
    font-size:.7rem;
    font-weight:900;
}
.dashboard-section-heading h2 {
    margin:0;
    color:var(--text-strong);
    font-size:1.08rem;
    font-weight:900;
}
.dashboard-section-hint { color:var(--text-soft); font-size:.75rem; }
.dashboard-action-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.85rem;
}
.dashboard-action-card {
    --action-color:var(--brand-primary);
    --action-soft:var(--brand-primary-soft);
    position:relative;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:.75rem;
    min-height:102px;
    padding:1rem;
    overflow:hidden;
    color:var(--text-strong);
    text-decoration:none;
    border:1px solid var(--panel-border);
    border-radius:17px;
    background:var(--surface-1);
    box-shadow:0 8px 24px rgba(45,35,72,.06);
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.dashboard-action-card::after {
    content:"";
    position:absolute;
    width:78px;
    height:78px;
    inset-inline-end:-38px;
    top:-38px;
    border-radius:50%;
    background:var(--action-soft);
}
.dashboard-action-card:hover {
    color:var(--text-strong);
    transform:translateY(-3px);
    border-color:color-mix(in srgb,var(--action-color) 28%,var(--panel-border));
    box-shadow:0 14px 30px rgba(55,35,75,.1);
}
.dashboard-action-icon {
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:14px;
    color:var(--action-color);
    background:var(--action-soft);
}
.dashboard-action-card strong,.dashboard-action-card small { display:block; }
.dashboard-action-card strong { margin-bottom:.25rem; font-size:.84rem; font-weight:900; }
.dashboard-action-card small { color:var(--text-soft); font-size:.67rem; line-height:1.65; }
.dashboard-action-arrow { color:var(--action-color); font-size:1.1rem; }
.dashboard-action-card.action-cyan { --action-color:#078ca5; --action-soft:#e5f8fb; }
.dashboard-action-card.action-pink { --action-color:#d3187e; --action-soft:#ffe9f4; }
.dashboard-action-card.action-orange { --action-color:#d9750b; --action-soft:#fff1df; }

@media (max-width:1199.98px) {
    .dashboard-action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:575.98px) {
    .dashboard-section-heading { align-items:flex-start; }
    .dashboard-section-hint { display:none; }
    .dashboard-action-grid { grid-template-columns:1fr; gap:.65rem; }
    .dashboard-action-card { min-height:86px; padding:.85rem; }
}
@media (prefers-reduced-motion: reduce) {
    .dashboard-action-card { transition:none; }
    .dashboard-action-card:hover { transform:none; }
}

/* Phase 3 shell alignment — closer to the approved Stitch dashboard. */
:root { --topbar-h: 48px; }
.app-topbar {
    position:relative;
    inset:auto;
    width:calc(100% - 260px);
    align-self:flex-end;
    flex:0 0 var(--topbar-h);
    min-height:var(--topbar-h);
    height:var(--topbar-h);
    margin:0;
    padding:0 1.1rem;
    border:0;
    border-radius:0;
    color:#fff;
    background:linear-gradient(90deg,#6510aa 0%,#8610ce 58%,#5a0d99 100%);
    box-shadow:0 3px 12px rgba(70,18,120,.18);
}
.app-topbar .topbar-brand { color:#fff; }
.app-topbar .brand-badge {
    width:32px;
    height:32px;
    border-radius:9px;
    background:rgba(255,255,255,.16);
    box-shadow:none;
}
.app-topbar .icon-btn { color:rgba(255,255,255,.9); background:transparent; }
.app-topbar .icon-btn:hover,.app-topbar .icon-btn:focus-visible { color:#fff; background:rgba(255,255,255,.14); }
.app-topbar .search-box {
    width:250px;
    max-width:28vw;
    flex:0 0 250px;
    margin-inline-start:1.25rem;
}
.app-topbar .search-box .input-group {
    height:34px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.18);
    border-radius:8px;
    background:rgba(53,0,96,.24);
}
.app-topbar .search-box .input-group-text,
.app-topbar .search-box .form-control { color:#fff; border:0 !important; }
.app-topbar .search-box .form-control::placeholder { color:rgba(255,255,255,.66); }
.app-row { display:block; gap:0; padding:0 260px 0 0; }
.app-sidebar {
    width:260px;
    top:0;
    height:100vh;
    border-width:0 0 0 1px;
    border-color:var(--panel-border);
    border-radius:0;
    background:linear-gradient(180deg,#fff 0%,#fdf8ff 100%);
    box-shadow:-8px 0 28px rgba(65,35,90,.055);
}
.app-sidebar .sidebar-brand { display:none; }
.app-sidebar .user-mini {
    position:relative;
    flex-direction:column;
    justify-content:center;
    gap:.55rem;
    margin:1rem .85rem .7rem;
    padding:1.1rem .75rem;
    text-align:center;
    border:1px solid #eee3f5;
    border-radius:17px;
    background:#fff;
    box-shadow:0 7px 20px rgba(60,35,80,.05);
    color:inherit;
    text-decoration:none;
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.app-sidebar .user-mini:hover { color:inherit; transform:translateY(-2px); border-color:#d9b8ee; box-shadow:0 11px 25px rgba(75,38,100,.09); }
.app-sidebar .user-mini .avatar {
    width:62px;
    height:62px;
    border:2px solid #9b27e8;
    background:#fff;
    color:#7517d6;
    font-size:1.05rem;
    overflow:hidden;
    box-shadow:0 6px 16px rgba(117,23,214,.12);
}
.app-sidebar .user-mini .avatar img { width:100%; height:100%; display:block; object-fit:cover; }
.app-sidebar .user-mini .avatar .material-symbols-outlined { font-size:2rem; }
.app-sidebar .user-mini .name { color:#7517d6; font-size:.92rem; }
.app-sidebar .user-mini .role { margin-top:.1rem; font-size:.7rem; }
.app-sidebar .user-mini .academic { margin-top:.3rem; color:#4d4255; font-size:.7rem; font-weight:700; line-height:1.65; }
.app-sidebar .user-mini .school-name { display:flex; align-items:center; justify-content:center; gap:.2rem; margin-top:.12rem; color:#82768a; font-size:.67rem; }
.app-sidebar .user-mini .school-name .material-symbols-outlined { color:#9221d1; font-size:.85rem; }
.app-sidebar .user-mini-edit { position:absolute; top:.7rem; inset-inline-end:.7rem; width:27px; height:27px; display:grid; place-items:center; border-radius:9px; color:#8a33c3; background:#f5eaff; font-size:.9rem; }
.profile-avatar-large {
    width:86px;
    height:86px;
    overflow:hidden;
    display:grid;
    place-items:center;
    border:3px solid #9b27e8;
    border-radius:50%;
    color:#7517d6;
    background:#f5eaff;
    box-shadow:0 8px 20px rgba(117,23,214,.16);
}
.profile-avatar-large img { width:100%; height:100%; display:block; object-fit:cover; }
.profile-avatar-large .material-symbols-outlined { font-size:2.65rem; }
.app-nav { padding:.25rem .75rem 1rem; }
.app-nav .nav-link {
    min-height:45px;
    margin-bottom:.25rem;
    padding:.65rem .8rem;
    border-radius:10px;
    color:#665d70;
}
.app-nav .nav-link:hover { color:#7517d6; background:#f4eaff; }
.app-nav .nav-link.active {
    color:#fff;
    background:linear-gradient(90deg,#7517d6,#9214dc);
    box-shadow:0 8px 18px rgba(117,23,214,.2);
}
.app-nav .nav-link.active::before { display:none; }
.app-nav .nav-link.active .material-symbols-outlined { color:#fff; }
.app-sidebar .sidebar-footer { margin-top:auto; background:#fff; }

/* Dark theme: the Phase 3 shell-alignment rules above hardcode a light
   gradient/white palette for the topbar and sidebar, so they need explicit
   dark counterparts here (loaded after, so they win the cascade) instead of
   silently staying light when [data-theme="dark"] is active. */
[data-theme="dark"] .app-topbar {
    background: linear-gradient(90deg, #3a1063 0%, #4c1380 58%, #2b0a52 100%);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .app-topbar .search-box .input-group { background: rgba(0, 0, 0, .28); border-color: rgba(255, 255, 255, .12); }
[data-theme="dark"] .app-sidebar {
    background: var(--sidebar-bg);
    box-shadow: -8px 0 28px rgba(0, 0, 0, .3);
}
[data-theme="dark"] .app-sidebar .user-mini {
    background: var(--surface-2);
    border-color: var(--panel-border);
    box-shadow: 0 7px 20px rgba(0, 0, 0, .2);
}
[data-theme="dark"] .app-sidebar .user-mini:hover { border-color: var(--brand-primary); box-shadow: 0 11px 25px rgba(0, 0, 0, .3); }
[data-theme="dark"] .app-sidebar .user-mini .avatar { background: var(--surface-3); color: var(--brand-primary); }
[data-theme="dark"] .app-sidebar .user-mini .name { color: var(--brand-primary); }
[data-theme="dark"] .app-sidebar .user-mini .academic { color: var(--text-soft); }
[data-theme="dark"] .app-sidebar .user-mini .school-name { color: var(--text-soft); }
[data-theme="dark"] .app-sidebar .user-mini .school-name .material-symbols-outlined { color: var(--brand-primary); }
[data-theme="dark"] .app-sidebar .user-mini-edit { color: var(--brand-primary); background: var(--brand-primary-soft); }
[data-theme="dark"] .app-nav .nav-link { color: var(--text-soft); }
[data-theme="dark"] .app-nav .nav-link:hover { color: var(--brand-primary); background: var(--brand-primary-soft); }
[data-theme="dark"] .app-sidebar .sidebar-footer { background: var(--sidebar-bg); }

.app-content { padding:1.35rem 1.5rem 2rem; }
.page-header {
    min-height:58px;
    margin-bottom:1rem;
    padding:.85rem 1.1rem;
    border:1px solid var(--panel-border);
    border-radius:15px;
    background:var(--surface-1);
    box-shadow:0 5px 16px rgba(45,35,72,.04);
}
.page-header h1 { margin:0; font-size:1.25rem; }

@media (max-width:991.98px) {
    .app-topbar { position:sticky; inset:0 auto auto; width:100%; align-self:stretch; }
    .app-row { display:block; padding:0; }
    .app-sidebar {
        top:0;
        height:100vh;
        width:min(86vw,290px);
        border-radius:0;
    }
    .app-sidebar .sidebar-brand { display:flex; margin:.9rem .85rem 0; padding:.5rem 0 1rem; }
    .app-content { padding:1rem 1rem 6.5rem; }
}

@media (max-width:575.98px) {
    .app-topbar { padding:0 .75rem; }
    .app-topbar .search-box { display:none !important; }
    .topbar-brand { font-size:.9rem; }
    .page-header { min-height:52px; padding:.75rem .9rem; border-radius:12px; }
    .page-header h1 { font-size:1.05rem; }
}

/* Student dashboard banner: school image, admin image, then native fallback. */
.dashboard-banner-preview,
.student-uploaded-banner {
    position:relative;
    overflow:hidden;
    width:100%;
    aspect-ratio:30 / 7;
    min-height:150px;
    border:1px solid #eadff2;
    border-radius:16px;
    background:#fbf8fd;
    box-shadow:0 7px 20px rgba(65,35,90,.055);
}
.dashboard-banner-preview img,
.student-uploaded-banner img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.dashboard-banner-empty {
    min-height:150px;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    padding:1rem;
    color:#887c91;
    text-align:center;
    background:linear-gradient(135deg,#fcf9ff,#f7f1fb);
}
.dashboard-banner-empty .material-symbols-outlined { color:#9a2bd3; font-size:2rem; }
.student-default-banner {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:150px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    padding:1.3rem 1.8rem;
    border:1px solid #eee5f4;
    border-radius:16px;
    background:linear-gradient(105deg,#fff 0%,#fffafd 62%,#f5efff 100%);
    box-shadow:0 7px 20px rgba(65,35,90,.055);
}
.student-default-banner::after {
    content:"";
    position:absolute;
    z-index:-1;
    inset:auto auto -65px -25px;
    width:190px;
    height:190px;
    border-radius:50%;
    background:rgba(125,30,210,.055);
}
.student-default-banner-copy { flex:1 1 auto; }
.student-default-banner-copy h2 { margin:0 0 .5rem; color:#392c43; font-size:1.12rem; font-weight:900; }
.student-default-banner-copy p { margin:0 0 .8rem; color:#db217d; font-size:.78rem; }
.student-default-banner-copy .btn { min-width:155px; border-radius:8px; }
.student-default-banner-art {
    position:relative;
    flex:0 0 155px;
    height:104px;
    border-radius:13px;
    background:linear-gradient(145deg,#fff,#eee7ff);
    box-shadow:0 9px 22px rgba(95,43,142,.12);
    transform:rotate(-2deg);
}
.student-default-banner-art::before {
    content:"";
    position:absolute;
    inset:10px;
    border:1px dashed #ddcfec;
    border-radius:10px;
}
.student-default-banner-art .material-symbols-outlined { position:absolute; font-size:2rem; }
.student-default-banner-art .art-book { right:18px; bottom:15px; color:#7720c5; }
.student-default-banner-art .art-calc { left:17px; bottom:15px; color:#ff7b45; }
.student-default-banner-art .art-idea { left:58px; top:10px; color:#f5b400; }
.student-default-banner-art .art-school { right:20px; top:12px; color:#36a4b6; font-size:1.65rem; }
.student-mobile-welcome { display:none; }

.role-dashboard-banner {
    --role-accent:#7517d6;
    --role-secondary:#df1683;
    --role-soft:#f3eaff;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:158px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    padding:1.45rem 1.8rem;
    border:1px solid color-mix(in srgb,var(--role-accent) 12%,#ece5f1);
    border-radius:18px;
    background:linear-gradient(105deg,#fff 0%,#fffafd 58%,var(--role-soft) 100%);
    box-shadow:0 9px 26px rgba(65,35,90,.07);
}
.role-dashboard-banner::after { content:""; position:absolute; z-index:-1; width:210px; height:210px; inset:auto auto -90px -35px; border-radius:50%; background:color-mix(in srgb,var(--role-accent) 7%,transparent); }
.role-dashboard-banner.role-school { --role-accent:#087f91; --role-secondary:#11a8a0; --role-soft:#e8f9fa; }
.role-dashboard-banner.role-consultant { --role-accent:#7517d6; --role-secondary:#df1683; --role-soft:#f4eaff; }
.role-dashboard-banner.role-admin { --role-accent:#c21b72; --role-secondary:#7517d6; --role-soft:#fff0f7; }
.role-dashboard-banner-copy { flex:1 1 auto; min-width:0; }
.role-dashboard-kicker { display:block; margin-bottom:.25rem; color:var(--role-accent); font-size:.7rem; font-weight:900; }
.role-dashboard-banner-copy h2 { margin:0 0 .4rem; color:#392c43; font-size:1.16rem; font-weight:900; }
.role-dashboard-banner-copy p { max-width:650px; margin:0 0 .85rem; color:var(--role-secondary); font-size:.78rem; line-height:1.9; }
.role-dashboard-banner-copy .btn { min-width:160px; display:inline-flex; align-items:center; justify-content:center; gap:.3rem; color:var(--role-accent); border:1px solid color-mix(in srgb,var(--role-accent) 20%,#fff); border-radius:9px; background:#fff; box-shadow:0 5px 14px color-mix(in srgb,var(--role-accent) 10%,transparent); }
.role-dashboard-banner-art { position:relative; flex:0 0 165px; height:110px; display:grid; place-items:center; border-radius:17px; color:var(--role-accent); background:linear-gradient(145deg,#fff,var(--role-soft)); box-shadow:0 10px 25px color-mix(in srgb,var(--role-accent) 16%,transparent); transform:rotate(-2deg); }
.role-dashboard-banner-art::before { content:""; position:absolute; inset:10px; border:1px dashed color-mix(in srgb,var(--role-accent) 25%,transparent); border-radius:12px; }
.role-dashboard-banner-art .art-main { position:relative; z-index:1; font-size:3.5rem; }
.role-dashboard-banner-art .art-float { position:absolute; width:32px; height:32px; display:grid; place-items:center; border-radius:10px; color:#fff; font-size:1.15rem; background:var(--role-secondary); box-shadow:0 7px 14px color-mix(in srgb,var(--role-secondary) 25%,transparent); }
.role-dashboard-banner-art .art-one { top:-8px; right:-7px; }
.role-dashboard-banner-art .art-two { left:-8px; bottom:-7px; background:var(--role-accent); }

@media (max-width:767.98px) {
    .dashboard-banner-preview,.student-uploaded-banner { aspect-ratio:16 / 6; min-height:115px; border-radius:13px; }
    .student-default-banner { min-height:145px; padding:1.1rem 1.2rem; }
    .student-default-banner-copy h2 { font-size:.98rem; line-height:1.8; }
    .student-default-banner-art { flex-basis:112px; height:86px; }
    .role-dashboard-banner { min-height:148px; padding:1.15rem 1.25rem; }
    .role-dashboard-banner-copy h2 { font-size:1rem; }
    .role-dashboard-banner-art { flex-basis:120px; height:90px; }
}
@media (max-width:575.98px) {
    .student-uploaded-banner { display:none; }
    .student-mobile-welcome {
        display:block;
        padding:1rem;
        border:1px solid var(--panel-border);
        border-radius:var(--radius-lg);
        background:var(--surface);
        box-shadow:var(--shadow-card);
    }
    .student-mobile-welcome h2 { margin:0 0 .35rem; color:var(--text-main); font-size:1rem; font-weight:900; }
    .student-mobile-welcome p { margin:0 0 .8rem; color:var(--brand-secondary); font-size:.78rem; line-height:1.8; }
    .student-mobile-welcome .btn { display:inline-flex; align-items:center; justify-content:center; gap:.3rem; min-height:40px; border-radius:10px; }
    .student-default-banner {
        min-height:0;
        align-items:flex-start;
        padding:1rem;
        border-color:var(--panel-border);
        border-radius:var(--radius-lg);
        background:var(--surface);
        box-shadow:var(--shadow-card);
    }
    .student-default-banner::after { display:none; }
    .student-default-banner-copy { position:relative; z-index:2; }
    .student-default-banner-copy h2 { max-width:none; margin-bottom:.35rem; font-size:1rem; line-height:1.7; }
    .student-default-banner-copy p { line-height:1.8; }
    .student-default-banner-copy .btn { min-height:40px; }
    .student-default-banner-art { display:none; }
    .role-dashboard-banner {
        min-height:0;
        align-items:flex-start;
        padding:1rem;
        border-color:var(--panel-border);
        border-radius:var(--radius-lg);
        background:var(--surface);
        box-shadow:var(--shadow-card);
    }
    .role-dashboard-banner::after { display:none; }
    .role-dashboard-banner-copy { position:relative; z-index:2; }
    .role-dashboard-banner-copy h2,.role-dashboard-banner-copy p { max-width:none; }
    .role-dashboard-banner-copy .btn { min-height:40px; }
    .role-dashboard-banner-art { display:none; }
}
.change-password-back { display:flex; justify-content:center; align-items:center; gap:.35rem; margin-top:1.2rem; color:#7517d6; text-decoration:none; font-size:.78rem; font-weight:700; }
.change-password-back .material-symbols-outlined { font-size:1rem; }
.change-password-guide {
    position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center;
    padding:3.5rem; color:#fff; background:linear-gradient(150deg,#6810ba 0%,#8c12d6 55%,#b812ba 100%);
}
.change-password-guide::before { content:""; position:absolute; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,.06); top:-100px; left:-80px; }
.security-visual { position:relative; width:190px; height:190px; margin:0 auto 2.5rem; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.18); }
.security-visual > .material-symbols-outlined { font-size:5.2rem; color:#fff; filter:drop-shadow(0 12px 18px rgba(42,0,75,.24)); }
.security-orbit { position:absolute; width:22px; height:22px; border-radius:8px; background:#64e2e8; box-shadow:0 0 0 8px rgba(100,226,232,.12); }
.security-orbit.orbit-a { top:25px; right:18px; }
.security-orbit.orbit-b { bottom:28px; left:22px; background:#ff8bc4; box-shadow:0 0 0 8px rgba(255,139,196,.12); }
.change-password-guide h2 { font-size:1.35rem; font-weight:900; margin-bottom:.55rem; }
.change-password-guide p { color:rgba(255,255,255,.78); font-size:.82rem; }
.change-password-guide ul { list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.75rem; }
.change-password-guide li { display:flex; align-items:center; gap:.55rem; font-size:.82rem; }
.change-password-guide li .material-symbols-outlined { font-size:1.1rem; color:#65e5ea; }

@media (max-width: 767.98px) {
    .change-password-card { display:block; min-height:100vh; }
    .change-password-card .auth-form-panel { padding:2rem 1.15rem; min-height:100vh; }
    .change-password-guide { display:none; }
    .change-password-heading { align-items:flex-start; }
}

/* ---------------------------------------------------------------------
   صفحهٔ فرود عمومی (landing.php) — نمایش قبل از ورود کاربر
   --------------------------------------------------------------------- */
.landing-navbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--panel-border);
}
.landing-navbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: .85rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.landing-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--text-main);
}
.landing-brand-mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--brand-soft);
    color: var(--brand-hover);
    flex-shrink: 0;
}
.landing-navbar-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.landing-hero {
    background: var(--panel-muted);
}
.landing-hero-carousel {
    max-width: 1600px;
    margin: 0 auto;
}
.landing-hero-img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
}
.landing-hero-fallback {
    max-width: 720px;
    margin: 0 auto;
    padding: 5rem 1.5rem;
    text-align: center;
}
.landing-hero-fallback h1 {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: var(--teal-ink-deep);
}
.landing-hero-fallback p {
    color: var(--text-muted);
    margin-bottom: 1.75rem;
    font-size: 1.05rem;
}

.landing-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
}
.landing-section {
    padding: 3.5rem 0;
}
.landing-section-tint {
    background: var(--panel-muted);
    margin: 0 -1.25rem;
    padding: 3.5rem 1.25rem;
    border-radius: var(--radius-xl);
}
.landing-section-head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 2.25rem;
}
.landing-kicker {
    display: inline-block;
    font-size: .78rem;
    font-weight: 800;
    color: var(--brand-hover);
    background: var(--brand-soft);
    padding: .3rem .9rem;
    border-radius: 999px;
    margin-bottom: .75rem;
}
.landing-section-head h2 {
    font-size: 1.6rem;
    font-weight: 900;
    margin: 0;
}

.landing-feature-card .card-body {
    padding: 1.75rem 1.5rem;
}
.landing-feature-icon,
.landing-role-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    border-radius: var(--radius-md);
    background: var(--brand-soft);
    color: var(--brand-hover);
}
.landing-role-icon {
    margin-inline: auto;
}
.landing-feature-icon .material-symbols-outlined,
.landing-role-icon .material-symbols-outlined {
    font-size: 1.6rem;
}
.landing-feature-card h3,
.landing-role-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: .5rem;
}
.landing-feature-card p,
.landing-role-card p {
    color: var(--text-muted);
    font-size: .88rem;
    margin: 0;
}
.landing-section-tint .row > div:nth-child(4n+2) .landing-role-icon { background: rgba(255, 195, 41, .16); color: var(--gold-ink); }
.landing-section-tint .row > div:nth-child(4n+3) .landing-role-icon { background: rgba(255, 122, 140, .14); color: var(--coral-ink); }
.landing-section-tint .row > div:nth-child(4n+4) .landing-role-icon { background: rgba(96, 165, 250, .14); color: var(--sky); }

.landing-cta {
    margin: 1rem 0 3.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--teal-dark), var(--brand));
    color: #fff;
}
.landing-cta h2 {
    font-weight: 900;
    font-size: 1.5rem;
    margin-bottom: .6rem;
}
.landing-cta p {
    opacity: .92;
    margin-bottom: 1.5rem;
}
.landing-cta .btn-brand {
    background: #fff;
    color: var(--teal-dark);
    border-color: #fff;
}
.landing-cta .btn-brand:hover {
    background: var(--cream);
}

.landing-footer {
    background: var(--panel-bg);
    border-top: 1px solid var(--panel-border);
}
.landing-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1.25rem 1.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}
.landing-muted {
    color: var(--text-muted);
}
.landing-footer-col a {
    color: var(--text-muted);
}
.landing-footer-col a:hover {
    color: var(--brand-hover);
}
.landing-seal img {
    max-height: 72px;
}
.landing-footer-bottom {
    text-align: center;
    padding: 1rem;
    font-size: .8rem;
    color: var(--text-muted);
    border-top: 1px solid var(--panel-border);
}

@media (max-width: 991.98px) {
    .landing-footer-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .landing-footer-inner { grid-template-columns: 1fr; }
    .landing-hero-fallback { padding: 3rem 1.25rem; }
    .landing-hero-fallback h1 { font-size: 1.5rem; }
    .landing-section { padding: 2.5rem 0; }
    .landing-navbar-actions .btn { padding: .4rem .7rem; font-size: .82rem; }
}