/* ============================================================
   حضور و غیاب — سیستم طراحی اختصاصی (Modern UI)
   ============================================================
   این فایل آخرین CSS لودشده است و ظاهر قالب Adomx را با یک
   طراحی مدرن (پالت ایندیگو، کارت‌های گرد، شادوهای نرم، هدر بلور)
   بازطراحی می‌کند. الزامات:
   - کاملاً لوکال (صفر CDN)
   - فونت فارسی IRANSans لوکال
   - ریسپانسیو کامل موبایل
   - همه پیام‌ها فقط با toast
   ============================================================ */

/* ============================================================
   ۰) متغیرهای طراحی (Design Tokens)
   ============================================================ */
:root {
    --primary: #6366f1;          /* ایندیگو — رنگ اصلی */
    --primary-2: #8b5cf6;        /* بنفش — مکمل گرادیان */
    --primary-soft: #eef2ff;     /* زمینه آبی خیلی روشن */
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #0ea5e9;
    --dark: #0f172a;             /* سایدبار و هدر تیره */
    --text: #0f172a;
    --muted: #64748b;
    --border: #e8ecf4;
    --bg: #f1f5f9;               /* پس‌زمینه صفحات */
    --radius: 16px;              /* گوشه کارت‌ها */
    --radius-sm: 10px;           /* گوشه دکمه/فیلد */
    --shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 14px rgba(15, 23, 42, .04);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);
    --grad: linear-gradient(135deg, var(--primary), var(--primary-2));
}

/* ---------- ۱) فونت فارسی لوکال ---------- */
@font-face {
    font-family: 'IRANSans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/IRANSansWeb_Light.eot');
    src: url('../fonts/IRANSansWeb_Lightd41d.eot?#iefix') format('embedded-opentype'),
         url('../fonts/IRANSansWeb_Light.woff2') format('woff2'),
         url('../fonts/IRANSansWeb_Light.woff') format('woff'),
         url('../fonts/IRANSansWeb_Light.ttf') format('truetype');
}

/* وزن‌های ۵۰۰ و ۷۰۰ هم لوکال بار می‌شوند. بدون این دو، مرورگر متن‌های
   بولد را «جعلی» می‌سازد (لبه‌ها را پهن می‌کند) و همین در چاپ لَک می‌افتد. */
@font-face {
    font-family: 'IRANSans';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/IRANSansWeb_Medium.woff2') format('woff2'),
         url('../fonts/IRANSansWeb_Medium.woff') format('woff');
}
@font-face {
    font-family: 'IRANSans';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/IRANSansWeb_Bold.woff2') format('woff2'),
         url('../fonts/IRANSansWeb_Bold.woff') format('woff');
}

body.adomx-dashboard {
    font-family: 'IRANSans', Tahoma, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    font-size: 14px;
}

/* ============================================================
   ۲) هدر بالای صفحه (سفارشی — در قالب استایل نداشت)
   ============================================================ */
.header {
    position: fixed;
    top: 0; right: 0; left: 0;
    height: 76px;
    z-index: 1040;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 22px;
}
.header-inner { width: 100%; }

/* دکمه همبرگری */
.side-header-toggle {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
}
.side-header-toggle:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

/* عنوان صفحه در هدر */
.header-text h2 {
    font-size: 19px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

/* ---------- برند (لوگو متنی + آیکون SVG) ---------- */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
}
.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--grad);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 6px 16px rgba(99, 102, 241, .35);
    flex-shrink: 0;
}
.brand-mark svg { width: 24px; height: 24px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.brand-text b {
    font-size: 15px;
    color: var(--text);
    font-weight: 600;
}
.brand-text small {
    font-size: 11px;
    color: var(--muted);
}
/* برند در سایدبار (پس‌زمینه تیره) */
.side-header .brand-text b { color: #fff; }
.side-header .brand-text small { color: #94a3b8; }

/* ---------- منوی کاربر (هدر) ---------- */
.header-right .user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.header-right .user .avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--primary-soft);
    background: var(--bg);
}
.header-right .user .avatar img { width: 100%; height: 100%; object-fit: cover; }
.header-right .user .name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* منوی بازشونده کاربر — باکس رنگی تیره (هم‌رنگ سایدبار) */
.adomx-dropdown-menu.dropdown-menu-user {
    background: var(--dark);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .35);
    padding: 14px;
    min-width: 230px;
    margin-top: 12px;
}
.dropdown-menu-user h5.name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
    color: #fff;
}
.dropdown-menu-user p.email {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding-bottom: 10px;
}
.dropdown-menu-user li a {
    display: block;
    padding: 8px 12px;
    color: #e2e8f0;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background .15s ease;
}
.dropdown-menu-user li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

/* ============================================================
   ۳) سایدبار (بازطراحی روی قالب Adomx)
   ============================================================ */
/* حالت پیش‌فرض: مخفی (دبیر) — کلاس .show (مدیر در markup) آن را نمایش می‌دهد */
.side-header {
    position: fixed;
    right: -270px;
    left: auto !important;
    top: 0 !important;
    height: 100vh !important;
    width: 270px !important;
    background-color: var(--dark) !important;
    padding: 22px 16px !important;
    box-shadow: 4px 0 24px rgba(15, 23, 42, .12) !important;
    overflow-y: auto;
    transition: right .3s ease;
    z-index: 1100;
}
.side-header.show { right: 0; }
/* جابجایی بدنه وقتی سایدبار باز است (هم‌تراز با محتوای ردیف: `.side-header` → ... → `.content-body`/`.footer`) */
.side-header.show ~ .content-body,
.side-header.show ~ .footer {
    margin-right: 270px;
    margin-left: 0;
}
.side-header.hide ~ .content-body,
.side-header.hide ~ .footer {
    margin-right: 0;
}
.side-header .side-header-close {
    background-color: var(--dark) !important;
    border-radius: 50%;
}
/* دسکتاپ بزرگ (≥1200px): سایدبار همیشه باز (رفتار قالب) — دکمه توگل هم دیده نمی‌شود */
@media (min-width: 1200px) {
    .side-header,
    .side-header.hide {
        right: 0 !important;
    }
    .side-header ~ .content-body,
    .side-header ~ .footer {
        margin-right: 270px;
        margin-left: 0;
    }
}

/* لوگو در سایدبار */
.side-header-logo {
    padding: 6px 8px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    margin-bottom: 10px;
}
.side-header-logo img { display: none; } /* تصویر قدیمی قالب → برند SVG جایگزین شد */

/* آیتم‌های منو */
.side-header-menu > ul > li > a {
    color: #94a3b8 !important;
    font-size: 13.5px;
    padding: 11px 14px !important;
    border-radius: 10px;
    margin: 2px 0;
    gap: 12px;
    transition: all .15s ease;
}
.side-header-menu > ul > li > a i {
    width: 22px;
    text-align: center;
    font-size: 16px;
}
.side-header-menu > ul > li > a::before { display: none; } /* حذف میله قدیمی */
.side-header-menu > ul > li > a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .06);
}
.side-header-menu > ul > li.active > a {
    background: var(--grad) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(99, 102, 241, .35);
}
.side-header-menu > ul > li.active > a i { color: #fff; }

/* دسته‌بندی منو */
.menu-category {
    color: #64748b;
    font-size: 10.5px;
    letter-spacing: .8px;
    padding: 16px 14px 6px;
    text-transform: uppercase;
}

/* اسکرول‌بار سایدبار */
.side-header::-webkit-scrollbar { width: 5px; }
.side-header::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }

/* ---------- بک‌دراپ سایدبار (موبایل) ---------- */
.sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 1090;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.sidebar-backdrop.show { display: block; }

/* ============================================================
   ۴) بدنه و فوتر
   ============================================================ */
/* فوتر چسبان ته صفحه (sticky footer): بدنه flex ستونی؛ محتوا کش
   می‌آید و فوتر همیشه پایین می‌ماند — در صفحات کوتاه ته ویوپورت،
   در صفحات بلند بعد از محتوا. هدر و سایدبار fixed هستند و
   در این چیدمان شرکت نمی‌کنند. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.content-body {
    flex: 1 0 auto;
    padding: 24px;
    margin-top: 76px;
    transition: margin .3s ease;
}
.footer {
    flex-shrink: 0;
    padding: 18px 0;
    background: #fff;
    border-top: 1px solid var(--border);
    margin-top: 24px;
}
.footer p { color: var(--muted); font-size: 13px; }

/* ============================================================
   ۵) کامپوننت‌های پایه (بوت‌استرپ بازطراحی‌شده)
   ============================================================ */
/* ---------- کارت ---------- */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: #fff;
}
.card-body { padding: 24px; }
.card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 18px;
}

/* ---------- دکمه ---------- */
.btn {
    border-radius: var(--radius-sm);
    font-size: 14px;
    padding: 9px 18px;
    border: 1px solid transparent;
    transition: all .15s ease;
    font-family: 'IRANSans', Tahoma, sans-serif;
}
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgba(99, 102, 241, .2); }
.btn-primary {
    background: var(--grad);
    border: none;
    box-shadow: 0 4px 12px rgba(99, 102, 241, .3);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #5759e9, #7c4cf5);
    box-shadow: 0 6px 16px rgba(99, 102, 241, .4);
    transform: translateY(-1px);
}
.btn-outline-primary {
    border: 1.5px solid var(--primary);
    color: var(--primary);
    background: transparent;
}
.btn-outline-primary:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
}
.btn-outline-secondary {
    border: 1.5px solid #cbd5e1;
    color: var(--muted);
}
.btn-outline-secondary:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: var(--text);
}
.btn-danger {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    border: none;
    box-shadow: 0 4px 12px rgba(225, 29, 72, .25);
}
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }

/* ---------- فیلدهای فرم ---------- */
label { font-size: 13px; font-weight: 500; color: #475569; margin-bottom: 6px; }
/* قالب اصلی این مقدار را صفر کرده بود — فاصله عمودی لازم بین فیلدها */
.form-group { margin-bottom: 20px; }
.form-control, .custom-select {
    border-radius: var(--radius-sm);
    border: 1px solid #dfe5f0;
    height: 44px;
    font-size: 14px;
    color: var(--text);
    font-family: 'IRANSans', Tahoma, sans-serif;
    transition: all .15s ease;
}
.form-control:focus, .custom-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}
textarea.form-control { height: auto; }

/* ---------- جدول ---------- */
.table thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 12.5px;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.table tbody td {
    vertical-align: middle;
    border-color: #f1f5f9;
}
.table-hover tbody tr:hover { background: #f8fafc; }
.table-striped tbody tr:nth-of-type(odd) { background: #fafbfe; }
.table-striped tbody tr:hover { background: #f1f5f9; }
.table-sticky-col:first-child {
    position: sticky;
    right: 0;
    background: #fff;
    z-index: 2;
    box-shadow: -2px 0 4px rgba(0,0,0,.06);
}

/* ---------- نشان (Badge) ---------- */
.badge {
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'IRANSans', Tahoma, sans-serif;
}
.badge-primary { background: var(--grad); }
.badge-success { background: #d1fae5; color: #047857; }
.badge-danger { background: #fee2e2; color: #b91c1c; }
.badge-warning { background: #fef3c7; color: #b45309; }
.badge-info { background: #e0f2fe; color: #0369a1; }
.badge-present { background: #d1fae5; color: #047857; }
.badge-absent { background: #fee2e2; color: #b91c1c; }
.badge-late { background: #fef3c7; color: #b45309; }

/* ---------- صفحه‌بندی ---------- */
.pagination { margin-bottom: 0; }
.page-link {
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 10px !important;
    margin: 0 3px;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'IRANSans', Tahoma, sans-serif;
}
.page-item.active .page-link {
    background: var(--grad);
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(99, 102, 241, .3);
}

/* ============================================================
   ۶) توست (toastr) — همه پیام‌ها
   ============================================================ */
/* پایه کانتینر — CSS خودِ toastr لود نمی‌شود (فقط JS لوکال)؛
   این قوانین جایگزین آن است. بدون fixed، توست داخل جریان صفحه
   رندر می‌شود و قالب را به هم می‌ریزد. */
#toast-container {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
    width: 300px;
    max-width: calc(100vw - 24px);
}
#toast-container.toast-top-left    { top: 12px; left: 12px; }
#toast-container.toast-top-right   { top: 12px; right: 12px; }
#toast-container.toast-bottom-left { bottom: 12px; left: 12px; }
#toast-container.toast-bottom-right{ bottom: 12px; right: 12px; }
#toast-container > div {
    position: relative;
    overflow: hidden;
    margin: 0 0 8px;
    width: 300px;
    max-width: 100%;
    background-position: 14px center;
    background-repeat: no-repeat;
    background-size: 26px;
    direction: rtl;
    text-align: right;
    font-family: 'IRANSans', Tahoma, sans-serif;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    opacity: 1;
    padding: 12px 14px 12px 50px;
    min-height: 56px;
    pointer-events: auto;
}
#toast-container .toast-message {
    word-wrap: break-word;
    line-height: 1.7;
}
#toast-container > .toast-success { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="26" height="26"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 14.5l-4.3-4.3 1.4-1.4 2.9 2.9 5.7-5.7 1.4 1.4-7.1 7.1z"/></svg>'); }
#toast-container > .toast-error   { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="26" height="26"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>'); }
#toast-container > .toast-warning { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="26" height="26"><path d="M12 2L1 21h22L12 2zm1 14h-2v-2h2v2zm0-4h-2V8h2v4z"/></svg>'); }
#toast-container > .toast-info    { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="26" height="26"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>'); }
#toast-container > .toast-success { background-color: var(--success); }
#toast-container > .toast-error   { background-color: var(--danger); }
#toast-container > .toast-warning { background-color: var(--warning); }
#toast-container > .toast-info    { background-color: var(--info); }
#toast-container .toast-close-button {
    right: auto;
    left: 6px;
    top: 2px;
    font-size: 20px;
    color: #fff;
    opacity: .8;
    text-shadow: none;
}

/* ============================================================
   ۷) کارت‌های آماری داشبورد
   ============================================================ */
.stat-card {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
    transition: all .2s ease;
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.stat-card .stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .15);
}
.stat-card .stat-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
}
.stat-card .stat-label { color: var(--muted); font-size: 13px; }

/* گرادیان‌های آیکون آماری */
.stat-icon.bg-indigo { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.stat-icon.bg-emerald { background: linear-gradient(135deg, #10b981, #059669); }
.stat-icon.bg-rose { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.stat-icon.bg-amber { background: linear-gradient(135deg, #f59e0b, #f97316); }
.stat-icon.bg-sky { background: linear-gradient(135deg, #0ea5e9, #3b82f6); }

/* باکس وضعیت زنگ — داشبورد دانش‌آموز (پس‌زمینه ملایم هم‌رنگ وضعیت) */
.bell-box {
    border-radius: var(--radius, .75rem);
    border: 1px solid var(--border, #e2e8f0);
    background: #f8fafc;
}
.bell-box.bell-present { border-color: #10b981; background: rgba(16, 185, 129, .08); }
.bell-box.bell-absent  { border-color: #f43f5e; background: rgba(244, 63, 94, .08); }
.bell-box.bell-late    { border-color: #f59e0b; background: rgba(245, 158, 11, .08); }

/* زنگوله بزرگ در باکس وضعیت — رنگ هر وضعیت به‌جای عبارت */
.bell-box .bell-stat-icon { font-size: 30px; display: block; color: #cbd5e1; }
.bell-box.bell-present .bell-stat-icon { color: #10b981; }
.bell-box.bell-absent  .bell-stat-icon { color: #f43f5e; }
.bell-box.bell-late    .bell-stat-icon { color: #f59e0b; }

/* زنگوله کوچک در جدول «آخرین ثبت‌ها» */
.bell-dot { font-size: 18px; color: #cbd5e1; }
.bell-dot.bell-dot-present { color: #10b981; }
.bell-dot.bell-dot-absent  { color: #f43f5e; }
.bell-dot.bell-dot-late    { color: #f59e0b; }

/* ============================================================
   ۷-ب) کانتینر نمودارها (صفحه نمودارها)
   ============================================================ */
.chart-box {
    position: relative;
    height: 300px;
}
.chart-box-lg {
    height: 340px;
}
.chart-box-bars {
    height: 260px; /* با ردیف‌های زیاد توسط JS بیشتر می‌شود */
}
@media (max-width: 767.98px) {
    .chart-box-lg { height: 280px; }
}

/* ============================================================
   ۸) گرید ثبت حضور — چیدمان دقیقاً مثل نسخه قدیمی
   ستون‌ها: # / عکس / ثبت حضور-غیاب (رادیو ح/غ/ت) / نام / کد
   ============================================================ */
.attendance-grid {
    display: grid;
    /* ستون اول (شماره ردیف) و عکس با عرض ثابت باریک تا نام/وضعیت جا بگیرند */
    grid-template-columns: 36px 72px 2.4fr 2.2fr 1.1fr;
    gap: 8px;
    align-items: center;
}
.attendance-grid .ag-header {
    background: var(--dark);
    color: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    font-weight: 600;
    text-align: center;
    font-size: 13.5px;
}
.attendance-grid .ag-row { display: contents; }
.attendance-grid .ag-cell {
    background: #f8fafc;
    border: 1px solid #eef1f7;
    border-radius: 10px;
    padding: 9px 12px;
    min-width: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ag-row:hover .ag-cell {
    border-color: #dbe2f0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
}
.ag-row .ag-id { text-align: center; font-weight: 600; color: var(--muted); }
.ag-row .ag-photo { text-align: center; }
.ag-row .ag-photo img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e2e8f0;
    background: #fff;
}
.ag-row .ag-status { display: flex; gap: 8px; justify-content: center; }
.ag-row .ag-name {
    font-weight: 600;
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ag-row .ag-code { font-size: 12px; color: var(--muted); text-align: center; }

/* پیل‌های رادیویی ح/غ/ت — هدف لمسی ≥۴۴px */
.bell-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-width: 64px;
    border-radius: 22px;
    cursor: pointer;
    font-size: 14px;
    background: #fff;
    border: 2px solid #e2e8f0;
    color: var(--muted);
    transition: all .15s ease;
    user-select: none;
    text-align: center;
    padding: 0 6px;
    margin: 0;
}
.bell-pill:hover { border-color: var(--primary); color: var(--primary); }
.bell-pill input { position: absolute; opacity: 0; pointer-events: none; }
.bell-pill span { display: inline; }

.bell-pill.selected-present {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
    box-shadow: 0 4px 10px rgba(16, 185, 129, .35);
}
.bell-pill.selected-absent {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
    box-shadow: 0 4px 10px rgba(239, 68, 68, .35);
}
.bell-pill.selected-late {
    background: var(--warning);
    border-color: var(--warning);
    color: #fff;
    box-shadow: 0 4px 10px rgba(245, 158, 11, .35);
}

/* ============================================================
   ۹) سلول وضعیت گزارش (رنگ‌بندی)
   ============================================================ */
.st-present { color: var(--success); font-weight: 600; }
.st-absent  { color: var(--danger); font-weight: 600; }
.st-late    { color: var(--warning); font-weight: 600; }
.st-none    { color: #cbd5e1; }

/* ============================================================
   ۱۰) موبایل
   ============================================================ */
@media (max-width: 991.98px) {
    .side-header {
        right: -270px;
        left: auto !important;
    }
    .side-header.show {
        right: 0;
        left: auto !important;
    }
    .side-header.show + .content-body,
    .side-header.show ~ .footer,
    .side-header.hide + .content-body,
    .side-header.hide ~ .footer {
        margin-right: 0;
        margin-left: 0;
    }
    .btn { min-height: 44px; }
}

@media (max-width: 767.98px) {
    /* گرید حضور: کارت برای هر دانش‌آموز */
    .attendance-grid { display: block; }
    .attendance-grid .ag-header { display: none; }
    .attendance-grid .ag-row {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 6px 12px;
        background: #f8fafc;
        border: 1px solid #eef1f7;
        border-radius: 14px;
        padding: 12px;
        margin-bottom: 10px;
    }
    .ag-row .ag-id { display: none; }
    .ag-row .ag-photo { grid-row: 1 / span 2; align-self: center; }
    .ag-row .ag-photo img { width: 54px; height: 54px; }
    .ag-row .ag-name { align-self: end; }
    .ag-row .ag-code { align-self: start; text-align: right; }
    .ag-row .ag-status {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 4px;
    }
    .ag-row .ag-status .bell-pill { width: 100%; min-width: 0; }

    /* هدر موبایل */
    .header { height: 64px; padding: 0 14px; }
    .content-body { margin-top: 64px; padding: 16px 12px; }
    .header-text { display: none !important; }
    .header-right .user .name { display: none; }

    /* فرم‌ها: جلوگیری از زوم خودکار iOS */
    .form-control, .custom-select { font-size: 16px; }
    .card-body { padding: 18px; }

    /* کارت‌های آماری */
    .stat-card .stat-value { font-size: 22px; }

    /* باکس‌های اکشن */
    .action-bar { flex-direction: column; gap: 8px; }
    .action-bar .btn, .action-bar .form-control { width: 100%; }
}

@media (max-width: 575.98px) {
    .container-fluid { padding-right: 12px; padding-left: 12px; }
}

/* ============================================================
   ۱۱) صفحه ورود — مدرن
   ============================================================ */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 45%, #7c3aed 100%);
    padding: 20px;
    position: relative;
    overflow: hidden;
    font-family: 'IRANSans', Tahoma, sans-serif;
}
/* آیکون‌های ورودی فرم لاگین
   نکته: بوت‌استرپ روی .input-group-prepend گوشه‌های داخلی را با longhand
   صفر می‌کند (منطق LTR)؛ در RTL اینجا prepend سمت راست است و گوشه‌های
   بیرونی باید گرد شوند → با longhand صریح + !important غلبه می‌کنیم. */
.login-page .form-label { color: #334155; font-weight: 600; }
.login-page .input-group-prepend .input-group-text {
    background: #f1f5f9;
    border: 1px solid #dfe5f0;
    border-left: 0;
    color: var(--primary);
    padding: 0 14px;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.login-page .input-group > .form-control:not(:first-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-right: 0;
    border-left: 1px solid #dfe5f0;
}
.login-page .input-group > .form-control:not(:first-child):focus {
    border-color: var(--primary);
    border-left: 1px solid var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}
.login-page .btn-lg { min-height: 52px; font-size: 15.5px; font-weight: 600; }
/* حباب‌های تزئینی پس‌زمینه (فقط CSS — بدون تصویر) */
.login-page::before,
.login-page::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
}
.login-page::before {
    width: 420px; height: 420px;
    background: #6366f1;
    top: -140px; right: -120px;
}
.login-page::after {
    width: 380px; height: 380px;
    background: #ec4899;
    bottom: -120px; left: -100px;
}
.login-card {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, .96);
    border-radius: 24px;
    box-shadow: 0 32px 80px rgba(15, 23, 42, .4);
    padding: 40px 32px;
    width: 100%;
    max-width: 420px;
    border: 1px solid rgba(255, 255, 255, .6);
}
.login-card .login-logo {
    width: 84px;
    height: 84px;
    border-radius: 24px;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    color: #fff;
    font-size: 40px;
    box-shadow: 0 12px 28px rgba(99, 102, 241, .4);
}
.login-card h3 {
    font-weight: 700;
    text-align: center;
    margin-bottom: 4px;
    color: var(--text);
    font-size: 21px;
}
.login-card p.subtitle {
    text-align: center;
    color: var(--muted);
    margin-bottom: 26px;
    font-size: 13px;
}
.captcha-row { display: flex; gap: 10px; align-items: center; }
.captcha-row img {
    height: 44px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid var(--border);
}
.captcha-refresh { font-size: 20px; color: var(--primary); cursor: pointer; }

/* جلوگیری از اسکرول افقی در موبایل: حباب‌های تزئینی (::before/::after بالا)
   عمداً از لبه صفحه بیرون می‌زنند؛ overflow بدن (که به‌صورت خودکار به ویوپورت
   منتقل می‌شود) جلوی اسکرول را نمی‌گیرد، پس overflow-x ریشه صفحه لاگین clip می‌شود.
   این کلاس فقط روی <html> صفحه لاگین است (سایر صفحات را لمس نمی‌کند). */
.login-doc { overflow-x: hidden; }
/* حباب‌ها و کارت در صفحات باریک هم‌اندازه‌تر شوند */
@media (max-width: 575.98px) {
    .login-page { padding: 16px; }
    .login-page::before { width: 280px; height: 280px; top: -90px; right: -80px; }
    .login-page::after  { width: 240px; height: 240px; bottom: -80px; left: -70px; }
    .login-card { padding: 28px 20px; border-radius: 20px; }
}

/* ============================================================
   ۱۲) دکمه خروج و ابزارها
   ============================================================ */
.logout-form { margin: 0; }
.logout-btn {
    border: none;
    background: transparent;   /* بدون پس‌زمینه پیش‌فرض مرورگر (buttonface) */
    padding: 8px 12px;
    font-size: 14px;
    text-align: right;
    color: #e2e8f0;
    display: block;
    width: 100%;
    text-decoration: none !important;
    border-radius: 8px;
    transition: background .15s ease;
}
.logout-btn:hover { color: #fca5a5; background: rgba(239, 68, 68, .18); }
.dropdown-menu-user li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.dropdown-menu-user li:last-child { border-bottom: none; }

/* ============================================================
   ۱۳) صفحه ۴۰۴/۴۰۳
   ============================================================ */
.error-box {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 20px;
    text-align: center;
}
.error-box .error-code {
    font-size: 90px;
    font-weight: 700;
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
}
.error-box .btn { margin-top: 16px; }

/* ============================================================
   ۱۴) ابزارهای عمومی
   ============================================================ */
.action-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.search-box {
    max-width: 320px;
    position: relative;
}
.search-box .ti-search {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
    color: #94a3b8;
}
.search-box input { padding-right: 36px; }

/* لینک‌های داخل متن */
a { transition: color .15s ease; }
a.text-primary, a.text-primary:hover { color: var(--primary) !important; }

/* پروفایل‌ها و آواتار در لیست‌ها */
.avatar-sm {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e2e8f0;
}

/* لینک‌های سریع داشبورد */
.quick-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    text-decoration: none !important;
    transition: all .18s ease;
    color: var(--text);
}
.quick-link:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(99, 102, 241, .15);
    transform: translateY(-2px);
}
.quick-link .ql-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
}
.quick-link b { font-size: 13.5px; font-weight: 600; display: block; }
.quick-link small { color: var(--muted); font-size: 11.5px; }

/* سربرگ داخلی صفحات */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

/* ============================================================
   ۱۵) ابزارهای مفقود بوت‌استرپ ۴ (نسخه ۵ جایگزین‌ها)
   ============================================================ */
.d-flex.gap-1 { gap: .25rem !important; }
.d-flex.gap-2 { gap: .5rem !important; }
.d-flex.gap-3 { gap: 1rem !important; }
.fw-bold { font-weight: 700 !important; }
.ms-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }

/* ---------- ابزارهای نمایش ریسپانسیو (در بیلد کپی‌شده بوت‌استرپ نیستند) ---------- */
@media (min-width: 1200px) {
    .d-xl-none  { display: none !important; }
    .d-xl-block { display: block !important; }
}

/* ============================================================
   ۱۶) پیش‌نمایش بزرگ عکس هنگام hover (جدول دانش‌آموزان)
   ============================================================
   تصویر .avatar-hover با نگه‌داشتن موس، نسخه بزرگ را در کادر
   شناور کنار موس نشان می‌دهد (عنصر کادر توسط app.js ساخته می‌شود).
   pointer-events:none → کادر مزاحم hover بعدی نمی‌شود. */
.avatar-hover { cursor: zoom-in; }
.avatar-preview {
    position: fixed;
    z-index: 2000;
    display: none;
    pointer-events: none;
    border: 3px solid #fff;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .28);
    overflow: hidden;
    background: #fff;
}
.avatar-preview img {
    display: block;
    width: 140px;
    height: 140px;
    object-fit: cover;
}

/* ============================================================
   ۱۷) گزارش وضعیت امروز — جدول کلاس‌ها × زنگ‌ها
   ============================================================ */
/* جدول پهن → اسکرول افقی داخل .table-responsive */
.report-today-table { min-width: 960px; }

/* هر سلول زنگ: سه شمارنده کوچک (حاضر/غایب/تاخیر) کنار هم */
.rep-bell-cell { white-space: nowrap; }
.rep-bell {
    display: inline-block;
    min-width: 24px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    padding: 2px 5px;
    margin-left: 2px;
}
.rep-bell:last-child { margin-left: 0; }

/* نوار درصد حضور داخل سلول */
.rep-progress {
    height: 8px;
    min-width: 70px;
    margin-bottom: 0;
    background: #eef0f4;
    border-radius: 8px;
}
.rep-progress .progress-bar { border-radius: 8px; }

/* ردیف کلاس بدون ثبت امروز — خاکستری و کم‌رنگ */
.row-unrecorded td {
    background: #f8f9fa !important;
    color: #6c757d;
}
.row-unrecorded .badge { font-size: 11px; }

/* ============================================================
   ۱۸) کارت‌های آماری فشرده — ۴ کارت در یک سطر (حتی در موبایل)
   ============================================================ */
.stat-card-compact .card-body { padding: .6rem; }
.stat-card-compact .stat-icon {
    width: 42px;
    height: 42px;
    font-size: 19px;
    border-radius: 11px;
    flex: 0 0 42px;
}
@media (max-width: 575.98px) {
    .stat-card-compact .card-body { padding: .45rem .35rem; }
    .stat-card-compact .stat-value { font-size: 16px; }
    .stat-card-compact .text-muted { font-size: 10px; line-height: 1.6; }
}

/* ============================================================
   ۱۹) گزارش ماهانه — ماتریس دانش‌آموز × روز
   ============================================================ */
/* ستون نام چسبان به راست (RTL) هنگام اسکرول افقی ماتریس */
.month-matrix th, .month-matrix td {
    text-align: center;
    vertical-align: middle;
}
.month-matrix th.name-col,
.month-matrix td.name-cell {
    position: sticky;
    right: 0;
    z-index: 2;
    background: #fff;
    text-align: right;
    white-space: nowrap;
    border-left: 1px solid #dee2e6;
}
.month-matrix tbody td.name-cell { background: #fff; }
.month-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f8f9fa;
    padding: .3rem .2rem;
    font-size: 12px;
}
.month-matrix thead th.name-col { z-index: 4; }
.month-matrix td.day-cell-td {
    padding: .25rem .1rem;
    min-width: 42px;
}
/* چیپ وضعیت روز */
.day-cell {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 22px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
}
.day-cell.st-present { background: #d4edda; color: #155724; }
.day-cell.st-absent  { background: #f8d7da; color: #721c24; }
.day-cell.st-late    { background: #fff3cd; color: #856404; }
.day-cell.no-record  { background: #eef0f4; color: #adb5bd; }
.month-matrix tfoot th { font-size: 11px; }

/* ============================================================
   ۲۰) Tooltip سفارشی ماتریس ماه — چندخطی با فونت پروژه
   ============================================================ */
.matrix-tooltip {
    z-index: 9999;
    max-width: 220px;
    background: #1e293b;
    color: #f1f5f9;
    border-radius: 10px;
    padding: 9px 14px;
    font-family: IRANSans, Vazirmatn, Tahoma, sans-serif;
    font-size: 12.5px;
    line-height: 2;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .4);
    border: 1px solid rgba(255, 255, 255, .08);
}
.matrix-tooltip .mt-title {
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    margin-bottom: 3px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.matrix-tooltip .mt-row {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.matrix-tooltip .mt-row i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 8px;
}
.matrix-tooltip .mt-present i { background: #34d399; }
.matrix-tooltip .mt-absent  i { background: #f87171; }
.matrix-tooltip .mt-late    i { background: #fbbf24; }
.matrix-tooltip .mt-none {
    color: #94a3b8;
    font-size: 12px;
}

/* ============ تخصیص کلاس به دبیر ============ */
.class-check-label {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: border-color .15s, background-color .15s;
    user-select: none;
}
.class-check-label:hover {
    border-color: #2563eb;
    background-color: #eff6ff;
}
.class-check-label input {
    margin-left: 6px;
    cursor: pointer;
}

/* ============================================================
   ۱۷) پیام‌رسان — فهرست گفتگوها + نخ چت + نشان منو
   ============================================================ */
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- نشان «خوانده‌نشده» کنار آیتم منوی سایدبار ---------- */
.side-header-menu .menu-badge {
    display: inline-block;
    min-width: 18px;
    line-height: 18px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    padding: 0 5px;
    margin-inline-start: 6px;
    vertical-align: 1px;
}

/* ---------- فهرست گفتگوها ---------- */
.conv-list { display: flex; flex-direction: column; }
.conv-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid #f1f5f9;
    position: relative;
}
.conv-row:last-child { border-bottom: 0; }
.conv-row:hover {
    background-color: #f8fafc;
    color: inherit;
    text-decoration: none;
}
.conv-unread .conv-title { font-weight: 700; }
.conv-unread { background-color: #f1f5ff; }

.conv-avatar {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    background: #eef2ff;
}
.conv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.conv-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #6366f1;
    font-size: 20px;
}
.conv-main { flex: 1 1 auto; min-width: 0; }
.conv-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.conv-title { font-size: 14px; font-weight: 600; color: #1e293b; }
.conv-time {
    font-size: 11px;
    color: #94a3b8;
    margin-inline-start: auto;
    white-space: nowrap;
}
.conv-preview {
    display: block;
    font-size: 12.5px;
    color: #64748b;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.conv-count {
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    padding: 0 6px;
}

/* ---------- نخ چت ---------- */
.chat-header-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: #eef2ff;
    display: inline-block;
}
.chat-header-avatar img { width: 100%; height: 100%; object-fit: cover; }

.chat-body {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: #fafbfc;
}
.bubble-row {
    display: flex;
    flex-direction: column;      /* نام بالای حباب، حباب زیر آن */
}
.bubble-row:not(.mine) { align-items: flex-end; } /* طرف مقابل: سمت راست (در RTL این column، لبه راست = flex-end) */
.bubble-row .bubble {
    max-width: 78%;
    width: fit-content;        /* حباب به اندازه متن جمع شود، نه تمام‌عرض */
    min-width: 64px;
    padding: 6px 12px;
    border-radius: 14px;
    border-start-start-radius: 4px; /* گوشه متصل به فرستنده (حباب طرف مقابل سمت راست است) */
    background: #e9edf3;
    color: #1e293b;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.bubble-row.mine { align-items: flex-start; } /* پیام خودی سمت چپ */
.bubble-row.mine .bubble {
    border-radius: 14px;
    border-start-end-radius: 4px;
    background: #2563eb;
    color: #fff;
}
.bubble-text {
    font-size: 13.5px;
    line-height: 1.6;
    white-space: pre-wrap;     /* فقط متن واقعی پیام — نه کل حباب (فضای خالی قالب حباب را بلند می‌کرد) */
    word-break: break-word;
}
.bubble-sender {
    font-size: 11px;
    font-weight: 700;
    color: #7c3aed;
    margin-bottom: 3px;
    padding-inline-start: 4px;
}
.bubble-time {
    display: block;
    font-size: 10px;
    opacity: .7;
    margin-top: 2px;
    text-align: left;
}

.chat-composer { background: #fff; }
.chat-composer textarea { resize: none; }

/* ============================================================
   (۱۸) تکالیف — متن + فایل پیوست
   ============================================================ */
.hw-body {
    display: block;
    font-size: 13.5px;
    line-height: 1.7;
    color: #1e293b;
    margin-top: 6px;
    overflow-wrap: break-word;
}
.hw-file-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.hw-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    font-size: 13px;
    color: #334155;
}
.hw-file-chip .hw-fname {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
    direction: ltr;
    font-weight: 600;
}
.hw-del-form {
    display: inline-flex;
    margin-inline-start: 4px;
}
.hw-del-form .btn {
    line-height: 1.4;
}

/* ============================================================
   (۲۱) طرح درس سالانه — چیپ ماه‌ها + کارت ردیف‌ها (موبایل‌فرست)
   ============================================================ */
.lp-hint { font-size: 12.5px; margin-bottom: 14px; line-height: 1.9; }

/* ---------- چیپ ماه‌های تحصیلی ---------- */
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: border-color .15s, background-color .15s, color .15s;
    scroll-margin-top: 90px;
}
.lp-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.lp-chip.active {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .14);
}
.lp-chip .count {
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 10px;
    background: #eef0f4;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    padding: 0 6px;
}
/* ماهِ دارای ردیف — سبز روشن */
.lp-chip.done { border-color: #a7e3cd; background: #ecfdf5; color: #065f46; }
.lp-chip.done .count { background: var(--success); color: #fff; }

/* ---------- سربرگ ماه فعال ---------- */
.lp-month-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 16px 0 12px;
}
.lp-month-title { font-size: 16px; font-weight: 700; color: var(--text); }
[id^="month-"] { scroll-margin-top: 90px; }
/* دکمه/بج سمت چپ سربرگ ماه (نمای «همهٔ ماه‌ها») */
.lp-month-actions {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* ماه‌های نمای «همه» داخل یک کارت سفید جدا (تا ۹ ماه خوانا باشند) */
.lp-month-allbox {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 2px 14px 4px;
    margin-bottom: 16px;
}
.lp-month-allbox .lp-month-head { margin: 12px 0 10px; }
.lp-month-allbox .lp-week-card { box-shadow: none; margin-bottom: 10px; }
.lp-month-allbox .lp-empty-month { background: #fbfcfe; }

/* ---------- بلاک هر کلاس در نمای «یک رشته» (مدیر) ---------- */
.lp-class-block { padding: 0 2px; }
.lp-class-block + .lp-class-block {
    margin-top: 28px;
    border-top: 2px dashed var(--border);
    padding-top: 8px;
}
.lp-class-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 8px;
}
.lp-class-title { font-size: 16.5px; font-weight: 700; color: var(--text); }

/* ---------- کارت هر ردیف «هفته» ---------- */
.lp-week-card {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 12px 14px;
    margin-bottom: 10px;
}
/* ردیف خالی (scaffold) — حاشیه‌چین تا دیده شود فرست نشده */
.lp-week-card.lp-scaffold { border-style: dashed; background: #fbfcff; }
.lp-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.lp-row-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.lp-row-actions { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; }
.lp-saved-badge { font-size: 10.5px; padding: .3em .6em; }
.lp-del-btn, .lp-row-remove { line-height: 1.2; padding: .2rem .45rem; }

/* ---------- فیلدهای فرم ردیف ---------- */
.lp-field { margin-bottom: 10px; }
.lp-field-label {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 4px;
}
.lp-dates-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }

/* ---------- حالت فقط‌خواندنی (مدیر) ---------- */
.lp-read-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px 18px;
}
.lp-read-key { display: block; font-size: 11px; color: var(--muted); font-weight: 600; margin-bottom: 3px; }
.lp-read-val { font-size: 13.5px; line-height: 1.9; overflow-wrap: break-word; white-space: pre-wrap; }
.lp-empty-month {
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 34px 14px;
    text-align: center;
    color: var(--muted);
    background: #fbfcfe;
}
.lp-empty-month i { font-size: 34px; display: block; margin-bottom: 8px; }

/* ---------- دکمه‌های افزودن/ذخیره ---------- */
.lp-add-zone { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.lp-add-row {
    width: 100%;
    border: 1.5px dashed #c7d2fe;
    border-radius: var(--radius-sm);
    background: #f5f7ff;
    color: #4338ca;
    font-weight: 700;
    padding: .55rem;
    font-size: 13.5px;
    transition: border-color .15s, background-color .15s;
}
.lp-add-row:hover { background: #eef2ff; border-color: #a5b4fc; color: #3730a3; }
.lp-save-btn { width: 100%; font-size: 15px; font-weight: 700; padding: .8rem; border-radius: var(--radius-sm); }

/* ---------- انتخاب کلاس ---------- */
.lp-class-form { display: inline-flex; align-items: center; }
.lp-class-select { width: auto; min-width: 190px; border-radius: var(--radius-sm); }

@media (max-width: 575.98px) {
    .lp-dates-row { grid-template-columns: 1fr; }
    .lp-chip { padding: 6px 11px; font-size: 12.5px; }
    .lp-class-form { width: 100%; }
    .lp-class-select { width: 100%; }
}

/* ============================================================
   (۲۲) شارژ حساب پیامک — کارت برجسته بالای صفحه‌های پیامک
   ------------------------------------------------------------
   عدد شارژ درشت و در نگاه اول دیده می‌شود؛ رنگ کل کارت با وضعیت
   عوض می‌شود: کافی (سبز) / کم (کهربایی) / تمام‌شده (قرمز) /
   نامشخص (خاکستری — درگاه در دسترس نبوده). ویو: partials/sms_credit.php
   ============================================================ */
.credit-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    margin-bottom: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    color: #fff;
    background: linear-gradient(135deg, #10b981, #059669); /* پیش‌فرض: کافی */
}
.credit-hero--low { background: linear-gradient(135deg, #f59e0b, #f97316); }
.credit-hero--out { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.credit-hero--off { background: linear-gradient(135deg, #64748b, #475569); }

.credit-hero-main {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}
.credit-hero-icon {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    background: rgba(255, 255, 255, .18);
}
.credit-hero-body { min-width: 0; }
.credit-hero-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    opacity: .92;
    margin-bottom: 2px;
}
.credit-hero-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.credit-hero-number {
    font-size: clamp(34px, 5.4vw, 54px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .16);
}
.credit-hero-number--plain { opacity: .7; }
.credit-hero-unit { font-size: 17px; font-weight: 600; opacity: .92; }

.credit-hero-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 13px;
}
.credit-hero-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    font-weight: 600;
}
.credit-hero-chip-exp { font-weight: 400; opacity: .85; margin-inline-start: 3px; }
.credit-hero-time { opacity: .85; }

.credit-hero-note {
    margin: 8px 0 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.7;
}

.credit-hero-side {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
}
.credit-hero-badge {
    padding: 5px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .45);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}
.credit-hero-refresh {
    border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}
.credit-hero-refresh:hover,
.credit-hero-refresh:focus {
    background: rgba(255, 255, 255, .28);
    color: #fff;
}
.credit-hero-refresh.is-loading { opacity: .75; pointer-events: none; }
.credit-hero-refresh.is-loading i { display: inline-block; animation: ch-spin .9s linear infinite; }
@keyframes ch-spin { to { transform: rotate(360deg); } }

@media (max-width: 575.98px) {
    .credit-hero { padding: 16px 18px; gap: 14px; }
    .credit-hero-main { gap: 13px; }
    .credit-hero-icon { width: 48px; height: 48px; border-radius: 14px; font-size: 24px; }
    .credit-hero-side { width: 100%; margin-inline-start: 0; justify-content: space-between; }
}

/* ============================================================
   نمره پرسش کلاسی — فرم ثبت و کارنامه
   ============================================================ */
/* فیلد نام درس: در موبایل تمامعرض، در دسکتاپ عرض معقول */
.quiz-lesson-input {
    max-width: 320px;
    min-width: 180px;
    flex: 1 1 200px;
}

/* خانهٔ نمره: ورودی باریک و وسطچین + بج «ثبتشده» کنارش */
.quiz-score-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}
.quiz-score {
    width: 64px;
    min-width: 64px;
    text-align: center;
    font-weight: 700;
    padding-left: 6px;
    padding-right: 6px;
}
/* نمرهٔ نامعتبر (خارج از ۰..۲۰) — قبل از ارسال هم دیده شود */
.quiz-score.is-invalid {
    border-color: #e11d48;
    background: #fff1f2;
}
.quiz-saved-badge {
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

/* بج نمره در جدولهای ریز/کارنامه — عرض ثابت تا ستون بههم نریزد */
.quiz-score-badge {
    min-width: 34px;
    font-weight: 700;
}

/* جدول نمرات: ستون نام در موبایل فشرده شود، بقیه ثابت بمانند */
.quiz-table td,
.quiz-table th {
    vertical-align: middle;
}

@media (max-width: 575.98px) {
    .quiz-score-cell { gap: 5px; }
    .quiz-score { width: 52px; min-width: 52px; }
    .quiz-saved-badge { display: none; }   /* در موبایل جای کافی نیست */
    .quiz-lesson-input { max-width: 100%; }
}

/* ============================================================
   ماژول «نمره» — نمرات دروس، کارنامه و نمودار
   ============================================================
   صفحهٔ کاشی‌کاری این ماژول از کلاس .quick-link بالا استفاده می‌کند
   (استایلش از قبل موجود بود و تا حالا هیچ ویویی از آن استفاده نمی‌کرد).
   اینجا فقط چیزهایی است که مخصوص خودِ ماژول است. */

/* ---------- فیلد نمره در جدول ثبت ---------- */
.grades-score {
    width: 78px;
    min-width: 78px;
    text-align: center;
    font-weight: 700;
    padding-left: 6px;
    padding-right: 6px;
}
/* مقدار نامعتبر (بیش از سقف) — قبل از ارسال هم دیده شود */
.grades-score.is-invalid {
    border-color: #e11d48;
    background: #fff1f2;
}

.grades-table td,
.grades-table th,
.grades-matrix td,
.grades-matrix th {
    vertical-align: middle;
}

/* میانگین زندهٔ ردیف در صفحهٔ ثبت */
.grades-row-avg {
    font-weight: 700;
    font-size: 12.5px;
}

/* ---------- لجند کلیک‌پذیر نمودار پیشرفت ----------
   هر آیتم یک دکمه است: کلیک = خاموش/روشن‌کردن سری همان نوبت روی نمودار. */
.grades-legend-item {
    text-decoration: none !important;
    color: inherit;
    font-size: 12.5px;
    line-height: 1.6;
}
.grades-legend-item:hover,
.grades-legend-item:focus {
    text-decoration: none !important;
    opacity: .8;
}
/* نوبت خاموش‌شده: کم‌رنگ و خط‌خورده تا وضعیتش بدون حدس فهمیده شود */
.grades-legend-off .grades-legend-label {
    text-decoration: line-through;
    opacity: .5;
}

/* ---------- ماتریس کلاس: ستون نام در اسکرول افقی بماند ---------- */
.grades-matrix .grades-sticky-col {
    position: sticky;
    right: 0;
    background: #fff;
    z-index: 2;
    box-shadow: -2px 0 4px rgba(15, 23, 42, .04);
}
.grades-matrix thead .grades-sticky-col {
    background: #f8fafc;
    z-index: 3;
}
.grades-matrix tfoot .grades-sticky-col {
    background: #f8fafc;
}

/* ---------- کارت کارنامه (پنل دانش‌آموز + صفحهٔ عمومی) ---------- */
/* پالت تم کارنامه — نارنجی روشن. محلی است تا فقط کارنامه را رنگی کند
   و بقیهٔ سامانه با پالت ایندیگو دست‌نخورده بماند. */
.grades-card {
    --g-orange-50:  #fff7ed;
    --g-orange-100: #ffedd5;
    --g-orange-200: #fed7aa;
    --g-orange-400: #fb923c;
    --g-orange-500: #f97316;
    --g-orange-700: #c2410c;
    --g-orange-800: #9a3412;
    --g-line:       #fed7aa;
}
.grades-card-head {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    text-align: right;
    border-bottom: 2px solid var(--g-line);
    padding-bottom: 14px;
    margin-bottom: 16px;
}
/* عکس دانش‌آموز — گوشهٔ بالا سمت راست کارنامه (اولین فرزند flex در RTL) */
.grades-card-photo {
    flex: 0 0 auto;
    width: 84px;
    height: 104px;
    object-fit: cover;
    background: var(--g-orange-50);
    border: 2px solid var(--g-orange-200);
    border-radius: var(--radius-sm);
}
.grades-card-id {
    flex: 1 1 220px;
    min-width: 0;
}
/* تاریخ صدور فقط روی کاغذ می‌آید — روی نمایشگر جایی برایش نیست و
   «معدل نهایی» هم بالای همان ستون است. */
.grades-card-date {
    display: none;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    align-self: flex-end;
}

/* ---------- نوار خلاصهٔ کارنامه — بالای جدول ----------
   flex-wrap است نه گرید بوت‌استرپ، چون تعداد آیتم‌ها متغیر است (با رتبه
   پنج‌تا، بی‌رتبه چهارتا) و در ۳۹۰px باید دوستونی بشکند. */
.grades-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    text-align: center;
}
.grades-sum-item {
    flex: 1 1 140px;
    min-width: 0;
    padding: 10px 12px;
    background: var(--g-orange-50);
    border: 1px solid var(--g-orange-200);
    border-radius: var(--radius-sm);
}
.grades-sum-label {
    display: block;
    color: var(--g-orange-800);
    font-size: 12px;
}
.grades-sum-value {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--g-orange-700);
    word-break: break-word;
}
.grades-sum-value.is-pass { color: var(--success); }
.grades-sum-value.is-fail { color: var(--danger); }
/* «بهترین درس» نام درس است نه عدد — کوچک‌تر تا در کارت جا شود */
.grades-sum-value-sm { font-size: 15px; padding-top: 5px; }
.grades-sum-tag {
    display: block;
    font-size: 11px;
    line-height: 1.7;
}

/* ---------- بج قبول/افتاده — ستون «معدل درس» و بلوک معدل نهایی ----------
   رنگ از توکن می‌آید و پس‌زمینه شفاف است تا رنگ تازه‌ای هاردکد نشود. */
.grades-badge {
    display: inline-block;
    padding: 0 7px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
}
.grades-badge-pass { color: var(--success); }
.grades-badge-fail { color: var(--danger); }
/* ستون معدل درس: عدد بالا، بج زیرش */
.grades-lesson-avg .grades-badge {
    display: block;
    width: fit-content;
    margin: 2px auto 0;
}
.grades-final-value-sm {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 14px;
}

@media print {
    /* نوار خلاصه نباید بین دو برگ بشکند و رنگ کارت‌هایش باید چاپ شود */
    .grades-summary { break-inside: avoid; page-break-inside: avoid; }
    .grades-sum-item { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.grades-card-name {
    font-weight: 700;
    color: var(--g-orange-800);
    margin-bottom: 4px;
}

.grades-report td,
.grades-report th {
    vertical-align: middle;
}
/* ستون «#» و ستون‌های عددی وسط‌چین، نام درس راست‌چین */
.grades-report td:first-child,
.grades-report th:first-child,
.grades-report td.text-center,
.grades-report th.text-center {
    text-align: center;
}
.grades-report td:nth-child(2),
.grades-report th:nth-child(2) {
    text-align: right;
}

/* ---------- ظاهر جدول کارنامه: هدر شاد + سطرهای یک‌درمیان رنگی ----------
   تم نارنجی روشن. پالت اینجا محلی تعریف شده تا تغییرش یک‌جا باشد. */
.grades-report {
    border-color: var(--g-line);
    /* درشت‌تر از جدول‌های معمول سامانه — کارنامه روی نمایشگر و روی کاغذ
       خوانده می‌شود، نه در یک پنل مدیریت فشرده. */
    font-size: 16px;
}
.grades-report th,
.grades-report td {
    padding: 9px 10px;
}
.grades-report thead th {
    background: linear-gradient(135deg, var(--g-orange-400), var(--g-orange-500));
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    border-color: rgba(255, 255, 255, .38);
}
/* پس‌زمینه روی td گذاشته می‌شود نه tr — چاپگرها پس‌زمینهٔ tr را
   به‌خوبی رنگ نمی‌کنند و نوارهای یک‌درمیان از بین می‌رفت. */
.grades-report tbody tr:nth-child(odd)  td { background: #ffffff; }
.grades-report tbody tr:nth-child(even) td { background: var(--g-orange-100); }
.grades-report tbody tr:hover td          { background: var(--g-orange-200); }
.grades-report tbody td {
    border-color: var(--g-line);
}
/* نمرهٔ زیر ۱۰ کمی پررنگ‌تر دیده شود */
.grades-report .is-fail {
    color: var(--danger);
    font-weight: 700;
}

/* سطر آخر کارنامه — «معدل هر نوبت» زیر ستون خودش */
.grades-report tfoot .grades-period-avg td {
    background: var(--g-orange-200);
    color: var(--g-orange-800);
    font-weight: 700;
    border-color: var(--g-orange-400);
    border-top: 2px solid var(--g-orange-500);
}

/* ---------- معدل نهایی — زیر جدول، نه داخل سربرگ و نه در tfoot ---------- */
.grades-final {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 28px;
    text-align: right;
    border-top: 2px solid var(--g-orange-400);
    margin-top: 14px;
    padding-top: 12px;
}
.grades-final-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.grades-final-label {
    color: var(--g-orange-800);
    font-size: 13px;
    font-weight: 500;
}
.grades-final-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--g-orange-700);
}
.grades-final-value.is-fail {
    color: var(--danger);
}
.grades-final-note {
    flex: 1 1 100%;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

/* ---------- مهر و امضاء مدیر — انتهای کارنامه، روبه‌روی «معدل نهایی» ----------
   `.grades-final` یک سطر flex است و در RTL اولین فرزندش سمت **راست** می‌افتد؛
   پس معدل نهایی خودبه‌خود راست می‌ماند و این بلوک با `margin-inline-start: auto`
   (در RTL یعنی `margin-right: auto`) به انتهای سطر — سمت چپ — رانده می‌شود.
   `.grades-final-note` با `flex: 1 1 100%` به سطر بعد می‌رود، پس ترتیب DOM
   باید همین باشد: معدل نهایی ← مهر و امضاء ← یادداشت. */
.grades-sign {
    margin-inline-start: auto;
    text-align: center;
    min-width: 150px;
}
.grades-sign-label {
    color: var(--g-orange-800);
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
}
/* جای خالی مُهر — کادر خط‌چین تا معلوم باشد مهر کجا می‌خورد */
.grades-sign-box {
    height: 42px;
    border: 1px dashed var(--g-line);
    border-radius: 4px;
    background: #fff;
}

/* ---------- نمودار ستونی نمرات — پایین کارنامه ----------
   فاصلهٔ ۲۸px از بلوک معدل نهایی و یک جداکنندهٔ خط‌چین، تا نمودار از
   جدول جدا دیده شود و به آن نچسبد. */
.grades-chart {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 2px dashed var(--g-line);
}
.grades-chart-title {
    font-weight: 700;
    color: var(--g-orange-800);
    margin-bottom: 14px;
}
/* ارتفاع بیشتر از نمودارهای دیگر سامانه: نام درس‌ها مورب‌اند و برچسبِ
   نمره هم بالای هر ستون می‌آید، پس ناحیهٔ ترسیم جا لازم دارد. */
.grades-chart-box {
    position: relative;
    height: 420px;
}
/* نمودار دایره‌ای به این ارتفاع نیازی ندارد؛ برش‌ها مربعی‌اند و لجندش
   زیرشان می‌آید. */
.grades-pie-box {
    height: 340px;
}
.grades-chart-note {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}
/* راهنمای افقی‌کشیدنِ نمودار فقط جایی معنا دارد که نمودار اسکرول دارد */
.grades-chart-scroll-hint {
    display: none;
}

/* ---------- صفحهٔ عمومی کارنامه (بدون لِی‌اوت) ----------
   این صفحه لِی‌اوت اصلی ندارد، پس body.adomx-dashboard هم ندارد؛ فونت
   باید صریحاً همین‌جا ست شود وگرنه مرورگر به فونت پیش‌فرض بوت‌استرپ
   (سیستمی، بدون وزن فارسی) می‌افتد و چاپ درشت و بدشکل می‌شود. */
.grades-lookup-page {
    font-family: 'IRANSans', Tahoma, sans-serif;
    font-size: 14px;
    background: #f1f5f9;
    min-height: 100vh;
    padding: 28px 14px 48px;
    /* body سراسری flex است (برای چسبیدن فوتر به پایین در لِی‌اوت اصلی).
       این صفحه لِی‌اوت اصلی و فوتر ندارد؛ اگر flex بماند، کارت یک flex item
       می‌شود و نمی‌تواند از عرض جدول کوچک‌تر شود — نتیجه: در موبایل کل صفحه
       افقی اسکرول می‌خورد. با block، خودِ .table-responsive اسکرول افقی
       جدول را می‌گیرد و صفحه سر جایش می‌ماند. */
    display: block;
}
/* عرض کارنامه روی نمایشگرهای بزرگ. قبلاً ۹۰۰px بود و روی مانیتور ۱۵۰۰px
   فقط ۶۰٪ عرض را می‌گرفت؛ نتیجه این بود که جدول و نمودارها ریز به نظر
   می‌رسیدند. حالا تا ۱۳۰۰px باز می‌شود و بقیهٔ فضا هم برای فاصلهٔ نفس‌کشیدن
   می‌ماند. */
.grades-lookup-wrap {
    max-width: 1300px;
    margin: 0 auto;
}
.grades-lookup-head {
    text-align: right;
    margin-bottom: 20px;
}
.grades-lookup-head h4 {
    font-weight: 700;
}

/* ---------- کارنامهٔ کلاسی — چاپ دو کارنامه در هر برگ A4 ----------
   صفحهٔ مستقل (مثل grades/lookup) با نوار ابزار no-print در بالا و یک
   «ورق» به عرض A4. هر کارنامه یک .cc-card است؛ قاعدهٔ شکست صفحه بین
   کارت‌ها در @media print پایین همین فایل است. */
.cc-print-page {
    padding: 20px 12px 40px;
    /* ⚠️ بوت‌استرپ (نسخهٔ LTR) روی body مقدار `text-align: left` می‌گذارد و
       با وجود `dir="rtl"` متن‌های بدون کلاس به چپ می‌چسبند — همین باعث شده
       بود مشخصات دانش‌آموز در باکس سربرگ، چپ‌چین دیده شود. این صفحه لِی‌اوت
       اصلی ندارد که آن را جبران کند، پس صریحاً راست‌چین می‌شود. سلول‌های
       جدول کارنامه قاعدهٔ خودشان را دارند و از این مقدار اثر نمی‌گیرند. */
    text-align: right;
}

.cc-toolbar {
    max-width: 186mm;                 /* عرض قابل چاپ A4 با حاشیهٔ ۱۲mm */
    margin: 0 auto 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
}
.cc-toolbar h4 {
    font-weight: 700;
    margin: 0 0 2px;
    font-size: 17px;
}
.cc-toolbar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ورق: همان عرض قابل چاپ A4 (۲۱۰mm − ۲×۱۲mm حاشیهٔ @page = ۱۸۶mm) تا
   پیش‌نمایش نمایشگر با کاغذ یکی باشد. */
.cc-sheet {
    max-width: 186mm;
    margin: 0 auto;
}

.cc-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 18px;
}
/* روی نمایشگر جدول کمی فشرده‌تر از کارنامهٔ تک‌صفحه‌ای است تا دو کارنامه
   در یک نگاه جا شوند؛ روی کاغذ فشرده‌تر هم می‌شود (بلوک چاپ). */
.cc-card .grades-report {
    font-size: 13px;
}

/* دو باکس در یک سطر با فاصله.
   ⚠️ در RTL اولین فرزند flex سمت **راست** می‌افتد؛ پس در مارک‌آپ عکس اول
   می‌آید (راست) و مشخصات بعدش (چپ) — دقیقاً برعکس ترتیب بصری LTR. */
.cc-head {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 10px;
}
.cc-box {
    border: 1px solid var(--g-line);
    background: var(--g-orange-50);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
}
.cc-photo-box {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cc-photo {
    width: 72px;
    height: 88px;
    object-fit: cover;
    background: #fff;
    border: 1px solid var(--g-orange-200);
    border-radius: 4px;
}
.cc-info-box {
    flex: 1 1 auto;
    min-width: 0;                     /* وگرنه نام بلند کل جعبه را پهن می‌کند */
}
.cc-school {
    color: var(--g-orange-800);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 2px;
}
.cc-name {
    color: #0f172a;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 3px;
}
.cc-meta {
    color: var(--muted);
    font-size: 12.5px;
}
.cc-meta b {
    color: #0f172a;
}
.cc-sep {
    color: #cbd5e1;
    margin: 0 6px;
}
.cc-date {
    color: var(--muted);
    font-size: 11.5px;
    margin-top: 4px;
}

/* ---------- نمودارهای خطی حالت «با نمودار» (?chart=1) ----------
   هر کارنامه دو نمودار خطی دارد: «روند معدل نوبت‌ها» و «نمرهٔ هر درس در
   نوبت‌ها». این بلوک بین جدول و نوار «معدل نهایی / مهر و امضاء» می‌آید تا
   مهر و امضاء پایین‌ترین جای کارنامه بماند.

   ⚠️ ارتفاع جعبه عمداً در نمایشگر و چاپ **یکسان** است. در کارنامهٔ دانش‌آموز
   ارتفاع چاپ با نمایشگر فرق داشت و همین یک «مسابقهٔ» resize می‌ساخت: اگر
   پیش‌نمایش چاپ پیش از حلقهٔ requestAnimationFrame عکس می‌گرفت، بوم بلندتر از
   جعبه‌اش می‌ماند و روی نمودار بعدی می‌افتاد. اینجا چون ارتفاع عوض نمی‌شود،
   آن مسابقه از ریشه وجود ندارد.

   ⚠️ **هر کارنامه در این حالت یک برگ A4 کامل می‌گیرد، نه نصف برگ.** اول
   دو کارنامه با نمودار در یک برگ امتحان شد، ولی دو نمودار در نصف برگ
   (~۵۲۰px) آن‌قدر کوچک می‌شدند که خطوط تخت و ناخوانا بودند. حالا نمودارها
   بزرگ‌اند (۲۰۰px) و برگ بین دو کارنامه نصف نمی‌شود؛ قاعدهٔ شکست صفحه در
   `@media print` با `body.cc-with-chart` عوض می‌شود. حالت بی‌نمودار همچنان
   دو کارنامه در هر برگ و با خط برش ثابت چاپ می‌کند. */
.cc-charts {
    margin-top: 12px;
}
.cc-chart + .cc-chart {
    margin-top: 14px;
}
.cc-chart-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--g-orange-800);
    margin: 0 0 6px;
}
/* لجند فشردهٔ نوبت‌ها در **همان سطر عنوان** — یک سطر جدا نمی‌گیرد (لجند
   پیش‌فرض Chart.js حدود ۲۰px ارتفاع می‌برد). */
.cc-chart-legend {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    font-weight: 400;
    color: var(--muted);
}
.cc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}
.cc-legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
}
/* ارتفاع نمودار — بزرگ و خوانا. هر کارنامه در این حالت یک **برگ A4 کامل**
   می‌گیرد (بلوک چاپ پایین‌تر)، پس اینجا برخلاف حالت بی‌نمودار لازم نیست
   ارتفاع را برای جا شدن دو کارنامه در یک برگ فشرده کنیم.

   ⚠️ ۲۰۰px سقفِ حساب‌شده است، نه یک عدد دلبخواه: با حاشیهٔ سراسری `@page`
   ارتفاع قابل چاپ ۱۰۴۷px است؛ سربرگ ۹۴ + سرستون ۲۵ + ردیف معدل ۲۵ + نوار
   پایانی ۷۲ + دو نمودار با عنوان و فاصله‌هایشان (۴۶۶) = ۶۸۲px ثابت می‌ماند و
   ~۳۳۸px برای سطرهای درس (هر کدام ~۲۶px) می‌ماند ⇒ **۱۲ درس** در یک برگ.
   برای درس‌های بیشتر، خودِ ویو `--cc-chart-h` را کوچک‌تر می‌فرستد
   (app/Views/grades/class-cards-print.php، تابع $chartHeight) تا کارنامه
   همیشه در همان یک برگ بماند. */
.cc-chart-box {
    position: relative;
    height: var(--cc-chart-h, 200px);
}
/* جای نمودار وقتی هیچ نمره/معدلی برای رسم نیست — هم‌ارتفاع جعبه تا چیدمان
   کارنامه نپرد */
.cc-chart-empty {
    margin: 0;
    height: var(--cc-chart-h, 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--muted);
    border: 1px dashed var(--g-line);
    border-radius: 4px;
}

/* دکمه‌های چاپ هر ردیف فهرست کلاس‌ها — «چاپ کارنامه‌ها» و «چاپ با نمودار».
   کنار هم می‌مانند و در باریکی زیر هم می‌روند؛ بدون این، دو دکمهٔ بلند در
   ستون «عملیات» روی هم می‌افتادند و جدول را از عرض صفحه بیرون می‌بردند. */
.cc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

/* ---------- موبایل ----------
   عمداً `screen and` آمده: این قواعد مخصوصِ نمایش روی گوشی‌اند. اگر در چاپ
   هم اعمال می‌شدند، `min-width: 720px` نمودار ستونی از عرض کاغذ بیرون می‌زد
   و نمودار بریده چاپ می‌شد. (چاپ قواعد خودش را در @media print دارد.) */
@media screen and (max-width: 575.98px) {
    .grades-score { width: 62px; min-width: 62px; font-size: 12.5px; }
    .grades-final-value { font-size: 20px; }
    .grades-card-photo { width: 64px; height: 80px; }
    .grades-lookup-page { padding: 16px 8px 32px; }

    /* کارنامهٔ کلاسی روی گوشی: نوار ابزار زیر هم می‌آید و دو باکس سربرگ
       کمی جمع‌وجور می‌شوند، ولی کنار هم می‌مانند (خواستهٔ صریح: یک سطر). */
    .cc-print-page { padding: 14px 8px 28px; }
    .cc-toolbar { padding: 10px 12px; }
    .cc-toolbar-actions { width: 100%; }
    .cc-toolbar-actions .btn { flex: 1 1 auto; }
    .cc-card { padding: 10px 10px; margin-bottom: 12px; }
    .cc-head { gap: 8px; }
    .cc-box { padding: 6px 8px; }
    .cc-photo { width: 56px; height: 68px; }
    .cc-name { font-size: 14.5px; }
    .cc-meta, .cc-date { font-size: 11.5px; }
    .cc-card .grades-report { font-size: 12px; }

    /* کارنامه روی گوشی ستون‌های زیادی دارد (نام درس + ۵ نوبت + غایب) و در
       عرض ۳۶۰px جا نمی‌شود؛ پس جدول کمی ریزتر می‌شود و در صورت نیاز داخل
       جعبهٔ خودش افقی اسکرول می‌خورد — نه کل صفحه. */
    .grades-report { font-size: 13px; }
    .grades-report th,
    .grades-report td { padding: 6px 7px; }

    /* نمودار ستونی: ۵ نوبت × ۶ درس = ۳۰ ستون. در عرض گوشی هر ستون حدود
       ۱۰px می‌شود و برچسبِ عددِ بالای ستون‌ها روی هم می‌افتد. پس نمودار را
       داخل یک جعبهٔ اسکرول‌دار می‌گذاریم و به خودِ نمودار حداقل عرض می‌دهیم
       تا ستون‌ها و اعدادشان خوانا بمانند. (لازم است min-width روی
       .grades-chart-box باشد نه canvas، چون Chart.js عرض canvas را از
       والدش می‌خواند.) */
    .grades-chart-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* فقط نمودار ستونی؛ نمودار دایره‌ای مربعی است و با عرض گوشی هم جا می‌شود
       (وگرنه min-width آن را از کارت بیرون می‌زند و کل صفحه افقی می‌شود). */
    .grades-chart-box:not(.grades-pie-box) { min-width: 720px; }
    .grades-chart-scroll-hint { display: inline; }
}

/* ---------- چاپ: فقط خودِ جدول/کارت روی کاغذ بیاید ----------
   سایدبار، هدر، فوتر، دکمه‌ها و فیلترها با .no-print یا با انتخابگر
   ساختاری پنهان می‌شوند. رنگ پس‌زمینه‌ها هم برای کاغذ سفید می‌شوند.
   کاغذ A4 با حاشیهٔ ۱۰mm بالا/پایین و ۱۲mm چپ/راست ⇒ ناحیهٔ قابل چاپ
   ۷۰۳×۱۰۴۷ پیکسل (در ۹۶dpi) که مبنای همهٔ ارتفاع‌های چاپِ کارنامه است.
   (قاعدهٔ @page داخل همین بلوک است، پایین‌تر.) */
@media print {
    .side-header,
    .header,
    .footer,
    .sidebar-backdrop,
    .page-head .page-actions,
    .no-print,
    .alert {
        display: none !important;
    }

    body,
    .content-body,
    .container-fluid {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        width: 100% !important;
    }

    .card {
        border: none !important;
        box-shadow: none !important;
    }
    .card-header,
    .card-footer {
        background: #fff !important;
    }

    .grades-matrix .grades-sticky-col {
        position: static !important;
        box-shadow: none !important;
    }

    .table {
        font-size: 11px;
    }
    .table th,
    .table td {
        border-color: #cbd5e1 !important;
    }

    /* صفحهٔ عمومی کارنامه روی کاغذ: بدون زمینهٔ خاکستری و بدون حاشیهٔ صفحه */
    .grades-lookup-page {
        background: #fff !important;
        min-height: 0 !important;
        padding: 0 !important;
    }
    .grades-lookup-wrap {
        max-width: none;
    }

    /* ⚠️ تلهٔ بوت‌استرپ ۴ در چاپ: خودِ بوت‌استرپ داخل @media print این‌ها را
       می‌گذارد (برای صفحات container-محورِ خودش):
           @page { size: a3 }
           body { min-width: 992px !important }
       نتیجه‌اش این است که کارنامه در چاپ ۹۹۲px عرض می‌گیرد، از عرض A4
       (۷۹۴px) بیرون می‌زند و کروم برای جا کردنش کل صفحه را کوچک می‌کند ⇒
       همه‌چیز روی کاغذ ریز و بودجهٔ ارتفاعیِ زیر بی‌اعتبار می‌شود.
       هر دو با !important خنثی می‌شوند (app.css بعد از بوت‌استرپ بار می‌شود،
       پس با همان specificity برنده است). `size` را هم همین‌جا می‌گذاریم تا
       اگر روزی ترتیب فایل‌ها عوض شد، A4 بماند.
       :has() عمداً در قاعدهٔ جدا آمده: اگر مرورگر پشتیبانی نکند فقط همین یک
       قاعده دور ریخته می‌شود، نه کل بلوک. */
    body.grades-lookup-page {
        min-width: 0 !important;
    }
    body:has(.grades-card) {
        min-width: 0 !important;
    }
    @page {
        size: A4 portrait;
        margin: 10mm 12mm;
    }

    /* ---------- چیدمان کارنامه روی کاغذ A4 ----------
       بودجهٔ عمودی یک صفحهٔ A4 با حاشیهٔ ۱۰/۱۲mm حدود ۱۰۴۷px است. اندازه‌گیری
       واقعی با ۶ درس (کروم، عرض ۷۰۳px): عنوان آموزشگاه ۳۴ + سربرگ ۱۰۰ +
       جدول ۲۴۲ + معدل نهایی ۶۴ + نمودار ستونی ۳۱۰ (شامل لجندِ نوبت‌ها) +
       نمودار دایره‌ای ۱۹۵ ⇒ حدود ۱۰۲۲px. پس همه‌چیز در یک صفحه جا می‌شود.
       ⚠️ هر درس اضافه حدود ۲۷px به جدول اضافه می‌کند؛ با ۸ درس و بیشتر،
       کارنامه به صفحهٔ دوم می‌رود. اگر روزی لازم شد، اول از ارتفاع
       .grades-pie-box کم کنید (برش‌ها مربعی‌اند و زودتر از نمودار ستونی
       خوانایی را از دست می‌دهند). */

    /* سربرگ آموزشگاه مثل سرصفحهٔ نامه: وسط‌چین با یک خط زیرش. زیرعنوانِ
       «مشاهدهٔ کارنامه با کد ملی» از قبل no-print است. */
    .grades-lookup-head {
        text-align: center;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 2px solid #0f172a;
    }
    .grades-lookup-head h4 {
        font-size: 17px;
        margin-bottom: 0;
    }

    /* کارنامه در چاپ: کمی درشت‌تر از جدول‌های دیگر، چون تک‌صفحه‌ای است */
    .grades-report {
        font-size: 12.5px;
    }
    .grades-report th,
    .grades-report td {
        padding: 4px 6px;
    }
    /* حاشیهٔ کارت در چاپ لازم نیست؛ حاشیهٔ کاغذ را خودِ @page می‌دهد. */
    .grades-lookup-wrap .card-body {
        padding: 0;
    }
    .grades-card-head {
        margin-bottom: 10px;
        padding-bottom: 8px;
        /* خط جداکنندهٔ سربرگ روی کاغذ سیاه‌وسفز هم دیده شود (نارنجی روشنِ
           نمایشگر روی چاپگر رنگی هم کم‌رنگ است). */
        border-bottom-color: #94a3b8 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .grades-card-name {
        font-size: 16px;
    }
    .grades-card-photo {
        width: 72px;
        height: 90px;
    }
    /* تاریخ صدور فقط روی کاغذ می‌آید — روی نمایشگر جایی برایش نیست */
    .grades-card-date {
        display: block;
        font-size: 11px;
    }
    .grades-final {
        margin-top: 8px;
        padding-top: 8px;
    }
    /* سربرگ، عکس، سطرها، معدل نهایی و نمودار بین دو صفحه نصف نشوند */
    .grades-card-head,
    .grades-final,
    .grades-chart,
    .grades-report tr {
        page-break-inside: avoid;
    }

    /* نمودارها در چاپ کوتاه‌تر از نمایشگر می‌شوند تا هر دو در یک صفحهٔ A4
       جا شوند، ولی نه آن‌قدر کوچک که خواندنشان سخت شود. */
    .grades-chart {
        margin-top: 10px;
        padding-top: 8px;
    }
    .grades-chart-title {
        font-size: 12.5px;
        margin-bottom: 4px;
    }
    .grades-chart-box {
        height: 250px;
        /* تور اطمینان برای «مسابقهٔ» resize در پیش‌نمایش چاپ:
           Chart.js v2 اندازهٔ canvas را با یک حلقهٔ requestAnimationFrame از
           روی جعبهٔ والد می‌خواند، ولی در پیش‌نمایش چاپ آن حلقه اجرا نمی‌شود.
           اگر resize پیش از عکس‌گرفتن نرسیده باشد، canvas با ارتفاع نمایشگر
           (۴۲۰px) داخل این جعبهٔ ۲۴۰px می‌ماند، از آن بیرون می‌زند و روی
           لجندِ نوبت‌ها و نمودار دایره‌ای می‌افتد. با overflow:hidden جلوی
           بیرون‌زدن گرفته می‌شود و با دو قاعدهٔ زیر، canvas در بدترین حالت
           فشرده می‌شود ولی سر جایش می‌ماند. (grades-report-chart.js هم
           پیش از چاپ صریحاً resize می‌کند؛ این لایهٔ دوم است.) */
        overflow: hidden;
    }
    .grades-chart-box > canvas {
        width: 100% !important;
        height: 100% !important;
    }
    /* نمودار دایره‌ای کوچک‌تر؛ برش‌ها مربعی‌اند و با ارتفاع کمتر هم خوانا
       می‌مانند، ولی جای کاغذ کم است. */
    .grades-pie-box {
        height: 175px;
    }
    .grades-chart-note {
        display: none;
    }
    /* لجندِ نوبت‌ها روی کاغذ فشرده‌تر و بدون ظاهر دکمه چاپ شود */
    #grades-report-legend {
        margin-top: 2px !important;
    }
    .grades-legend-item {
        font-size: 11.5px;
        padding: 0 !important;
        color: #0f172a !important;
    }
    .grades-card-photo {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    /* رنگ‌های جدول روی کاغذ هم چاپ شوند (وگرنه هدر و نوارها سفید می‌مانند) */
    .grades-report thead th,
    .grades-report tbody tr:nth-child(even) td,
    .grades-report tfoot .grades-period-avg td {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* اعداد وسط‌چین و نام درس راست‌چین در چاپ هم حفظ شوند */
    .grades-report td:first-child,
    .grades-report th:first-child,
    .grades-report td.text-center,
    .grades-report th.text-center {
        text-align: center !important;
    }
    .grades-report td:nth-child(2),
    .grades-report th:nth-child(2) {
        text-align: right !important;
    }

    /* رنگ بج‌ها روی چاپ سیاه‌وسفید هم خوانا بماند */
    .badge {
        border: 1px solid #94a3b8;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    a[href]::after {
        content: "";   /* آدرس‌ها را کنار لینک‌ها چاپ نکن */
    }
}

/* ---------- چاپ: کارنامهٔ کلاسی — دو کارنامه در هر برگ A4 ----------
   این صفحه `@page` مخصوص خودش ندارد و از همان حاشیهٔ سراسری
   `@page { size: A4 portrait; margin: 10mm 12mm }` بالای همین بلوک استفاده
   می‌کند؛ پس ارتفاع قابل چاپ ۲۹۷ − ۲×۱۰ = ۲۷۷mm ≈ ۱۰۴۷px و نصفش ≈ ۵۲۳px
   است. عرض قابل چاپ هم ۲۱۰ − ۲×۱۲ = ۱۸۶mm ≈ ۷۰۳px.

   بودجهٔ ارتفاع هر کارنامه (اندازه‌گیری‌شده با عرض واقعی ۷۰۳px): سربرگ
   دو‌باکسی ۹۴px + هدر جدول ۲۱px + سطر «معدل هر نوبت» ۲۰px + نوار پایانی
   (معدل نهایی و مهر و امضاء) ۵۸px = ۱۹۴px ثابت، و هر سطر درس ۲۰px (سطرهایی
   که نشان «غایب» دارند ~۳۱px). با نصف‌برگ ۵۲۳px، حدود **۱۶ درس** جا می‌شود.
   اگر کارنامه‌ای از این بیشتر شود، `min-height` اجازه می‌دهد بلندتر شود و
   `break-inside: avoid` کارت بعدی را به برگ بعدی می‌فرستد (یک کارنامه در آن
   برگ) — تنزلِ تدریجی، نه بریده‌شدن نمره‌ها. */
@media print {
    body.cc-print-page {
        min-width: 0 !important;
        background: #fff !important;
        /* پدینگِ نمایشی بدنه باید در چاپ صفر شود. وگرنه کارنامهٔ اول ۲۰px
           پایین‌تر از لبهٔ کاغذ شروع می‌شود و خط برش (نصف ارتفاع کارت) هم
           ۲۰px از وسط کاغذ فاصله می‌گیرد. */
        padding: 0 !important;
    }

    .cc-toolbar {
        display: none !important;
    }
    .cc-sheet {
        max-width: none !important;
        margin: 0 !important;
    }

    /* ---------- هر کارنامه دقیقاً نصف ارتفاع کاغذ ----------
       خواستهٔ مدیر: کارنامهٔ اول از بالای کاغذ شروع شود و کارنامهٔ دوم **دقیقاً
       از وسط کاغذ** — تا برشِ دسته‌های بزرگ کارنامه (که ارتفاعشان با تعداد
       درس فرق می‌کند) همیشه روی یک خط ثابت باشد و سخت نباشد.

       حساب: A4 = ۲۹۷mm منهای ۲×۱۰mm حاشیهٔ سراسری `@page` در همین فایل ⇒
       ۲۷۷mm قابل چاپ، نصفش ۱۳۸٫۵mm. عمداً ۱۳۸mm گذاشته شده (نه ۱۳۸٫۵) تا دو
       کارت مجموعاً ۲۷۶mm شوند و با خطای رُند شدن، کارت دوم به برگ بعد سرریز
       نکند. نتیجه: خط برش همیشه ۱۴۸mm از لبهٔ بالای کاغذ است (وسط کاغذ
       ۱۴۸٫۵mm است — نیم‌میلی‌متر اختلاف، ولی **ثابت** روی همهٔ برگ‌ها).

       `min-height` است نه `height`: اگر کارنامه‌ای بیش از ۱۴۰mm محتوا داشته
       باشد (درس‌های زیاد)، به‌جای بریده‌شدن نمره‌ها کمی بلندتر می‌شود و کارت
       بعدی به برگ بعدی می‌رود — تنزل تدریجی، نه از دست رفتن داده.
       `margin: 0` هم لازم است؛ فاصلهٔ ۵mm بین کارت‌ها خط برش را جابه‌جا می‌کرد. */
    .cc-card {
        border: none !important;
        border-radius: 0;
        box-shadow: none !important;
        padding: 0;
        margin: 0;
        min-height: 138mm;
        /* یک کارنامه بین دو برگ نصف نشود */
        break-inside: avoid;
        page-break-inside: avoid;
    }
    /* شکست صفحه بعد از هر کارنامهٔ **زوج** ⇒ دو کارنامه در هر برگ.
       `:not(:last-child)` تا برگ سفید خالی در آخر چاپ نشود (کروم برای
       page-break-after روی آخرین عنصر یک برگ اضافه می‌سازد). */
    .cc-card:nth-child(2n):not(:last-child) {
        break-after: page;
        page-break-after: always;
    }

    .cc-head {
        gap: 10px;
        margin-bottom: 6px;
    }
    .cc-box {
        padding: 6px 9px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .cc-photo {
        width: 56px;
        height: 68px;
    }
    .cc-school {
        font-size: 11px;
    }
    .cc-name {
        font-size: 14.5px;
    }
    .cc-meta,
    .cc-date {
        font-size: 11px;
    }

    /* جدول کارنامهٔ کلاسی فشرده‌تر از کارنامهٔ تک‌صفحه‌ای است؛ specificity
       بالاتر (.cc-card .grades-report) قاعدهٔ عمومی .grades-report را
       می‌شکند و لازم نیست !important بگذاریم. */
    .cc-card .grades-report {
        font-size: 11.5px;
    }
    /* فشرده‌سازی عمدی برای جا شدن درس‌های بیشتر در نصف برگ: با padding و
       line-height پیش‌فرض فقط ۱۳ درس در ۱۴۰mm جا می‌شد و کلاس‌های پردرس
       کارنامهٔ دوم را از وسط کاغذ پایین‌تر می‌بردند. */
    .cc-card .grades-report th,
    .cc-card .grades-report td {
        padding: 2px 6px;
        line-height: 1.3;
    }
    .cc-card .grades-final {
        margin-top: 6px;
        padding-top: 5px;
    }
    .cc-card .grades-final-value {
        font-size: 16px;
    }
    .cc-card .grades-final-label,
    .cc-card .grades-final-note {
        font-size: 11px;
    }
    /* مهر و امضاء روی کاغذ جمع‌وجور می‌شود تا در بودجهٔ نصف صفحه بماند */
    .cc-card .grades-sign-label {
        font-size: 10px;
        margin-bottom: 3px;
    }
    .cc-card .grades-sign-box {
        height: 30px;
    }

    /* ---------- حالت «با نمودار» روی کاغذ ----------
       نمودارها خودشان بوم‌اند و رنگ‌شان با چاپگر مشکلی ندارد؛ فقط مربع‌های
       رنگیِ لجند HTML‌اند و بدون print-color-adjust ممکن است در چاپگر
       سیاه‌وسفید (یا با «Background graphics» خاموش) سفید چاپ شوند. */
    .cc-legend-swatch {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ---------- حالت «با نمودار»: هر کارنامه یک برگ A4 کامل ----------
       خواستهٔ صریح: نمودارها بزرگ و خوانا باشند. در نصف برگ (~۵۲۰px) دو
       نمودار آن‌قدر کوچک می‌شدند که خطوط تخت و ناخوانا بودند، پس در این حالت
       قاعدهٔ «دو کارنامه در هر برگ» عمداً کنار گذاشته می‌شود و هر کارنامه
       برگ خودش را می‌گیرد. **حالت بی‌نمودار دست‌نخورده است** و همچنان دو
       کارنامه در هر برگ با خط برش ثابت چاپ می‌کند.

       `min-height: 270mm` (و نه ۲۷۷mm قابل چاپ) تا کارنامهٔ کوتاه هم برگ را
       پر کند ولی با خطای رُند شدن، برگ سفید اضافه نسازد.

       ⚠️ `break-inside: avoid` حالت بی‌نمودار اینجا عمداً خنثی می‌شود: کارنامه‌ای
       که از یک برگ بلندتر شود (درس‌های بسیار زیاد) با `avoid` اول به برگ بعد
       پرت می‌شود — یعنی یک برگ سفید — و تازه بعدش می‌شکند. با `auto` همان
       کارنامه بی‌واسطه از وسط می‌شکند و برگ سفید ساخته نمی‌شود. */
    body.cc-with-chart .cc-card {
        min-height: 270mm;
        break-inside: auto;
        page-break-inside: auto;
    }
    /* شکست صفحه بعد از **هر** کارنامه — قاعدهٔ زوج/فرد حالت بی‌نمودار اینجا
       نمی‌خواهیم. `:last-child` صریح خنثی می‌شود تا برگ سفید آخر چاپ نشود. */
    body.cc-with-chart .cc-card,
    body.cc-with-chart .cc-card:nth-child(2n):not(:last-child) {
        break-after: page;
        page-break-after: always;
    }
    body.cc-with-chart .cc-card:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    /* در برگ کامل، سطرهای جدول و نوار پایانی به اندازهٔ راحت خودشان می‌مانند
       (فشرده‌سازی حالت بی‌نمودار اینجا لازم نیست) */
    body.cc-with-chart .cc-card .grades-report th,
    body.cc-with-chart .cc-card .grades-report td {
        padding: 4px 8px;
        line-height: 1.45;
    }
    body.cc-with-chart .cc-card .grades-final {
        margin-top: 10px;
        padding-top: 8px;
    }
    body.cc-with-chart .cc-card .grades-sign-box {
        height: 40px;
    }
}

/* ============================================================
   فرم‌های گروه‌ها — فرم ثبت گروهی (شش جلسه در یک جدول)
   ============================================================
   ⚠️ استایلِ **برگ چاپی** فرم ۹۰۱ جای دیگری است (assets/css/group-forms.css)
      و این صفحه آن را بار نمی‌کند. این‌جا فقط خودِ فرم ورود اطلاعات است. */

/* سه دراپ‌داون تاریخ شمسی داخل یک سلول جدول.
   ترتیب DOM (روز، ماه، سال) است تا در RTL روز سمت راست بیفتد. */
.gf-date {
    display: flex;
    gap: 4px;
    min-width: 210px;
}

.gf-date select {
    flex: 1 1 auto;
    min-width: 0;
}

.gf-date .jalali-d { flex: 0 0 62px; }
.gf-date .jalali-y { flex: 0 0 78px; }

/* جدول ثبت گروهی در گوشی.
   چهار ستون (ستون/جلسه/موضوع/تاریخ) در ۳۹۰px جا نمی‌شود و کادر «موضوع»
   نصفه می‌ماند. پس ستون شمارهٔ ستون حذف می‌شود (ترتیب ردیف‌ها خودش شماره
   را می‌رساند و placeholder هم همان را می‌گوید) و عرض کادرهای تاریخ کم
   می‌شود تا جدول بدون اسکرول افقی جا شود. */
@media (max-width: 575.98px) {
    .gf-bulk-table td,
    .gf-bulk-table th {
        white-space: nowrap;
    }

    .gf-bulk-table th:nth-child(1),
    .gf-bulk-table td:nth-child(1) {
        display: none;
    }

    .gf-bulk-table th:nth-child(2),
    .gf-bulk-table td:nth-child(2) {
        width: 84px;
    }

    .gf-date {
        min-width: 164px;
        gap: 3px;
    }

    .gf-date .jalali-d { flex: 0 0 46px; }
    .gf-date .jalali-y { flex: 0 0 60px; }
}

/* ============================================================
   فرم‌های گروه‌ها — فهرست برگ‌ها (یک ردیف برای هر برگ شش‌جلسه‌ای)
   ============================================================
   هر برگ یک <details> است (الگوی خانه، نه data-toggle="collapse").

   ⚠️ سربرگ ستون‌ها و ردیف هر برگ **یک شبکهٔ ستونی مشترک** دارند تا «از تاریخ»
      و «تا تاریخ» در همهٔ ردیف‌ها دقیقاً زیر هم بیفتند و بازهٔ هر برگ با یک
      نگاه خوانده شود. اگر چیدمان را عوض کردید، هر دو را با هم عوض کنید.

   ستون‌ها (در RTL از راست): مثلث | برگ | از تاریخ | تا تاریخ | جلسه | عملیات

   ⚠️ نمای مدیر یک ستون «دبیر» بیشتر دارد (کلاس `gf-has-teacher` روی **هر دو**
      `.gf-sheet-head` و `.gf-sheet-sum`). قالب ستون‌ها فقط در همان دو قاعده
      بازنویسی می‌شود؛ اگر ستونی اضافه/کم کردید، هر دو جا را با هم عوض کنید. */

.gf-sheet-list {
    display: block;
}

.gf-sheet {
    border-bottom: 1px solid rgba(0, 0, 0, .075);
}

.gf-sheet:last-child {
    border-bottom: 0;
}

.gf-sheet-head,
.gf-sheet-sum {
    display: grid;
    grid-template-columns: 16px 86px minmax(104px, 1fr) minmax(104px, 1fr) 78px auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}

/* مدیر: یک ستون «دبیر» بین «برگ» و «از تاریخ» */
.gf-sheet-head.gf-has-teacher,
.gf-sheet-sum.gf-has-teacher {
    grid-template-columns: 16px 86px minmax(110px, .8fr) minmax(104px, 1fr) minmax(104px, 1fr) 78px auto;
}

.gf-sheet-head {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    background: #f6f7f9;
    border-bottom: 1px solid rgba(0, 0, 0, .075);
}

.gf-sheet-sum {
    cursor: pointer;
    list-style: none;          /* فلش پیش‌فرض حذف؛ خودمان نشانگر می‌گذاریم */
    margin: 0;
}

.gf-sheet-sum::-webkit-details-marker { display: none; }

.gf-sheet-sum:hover {
    background: rgba(0, 0, 0, .025);
}

.gf-sheet-sum::before {
    content: '\25BE';          /* مثلث کوچک، در RTL سمت راست می‌افتد */
    font-size: 11px;
    color: var(--muted);
    transition: transform .15s ease;
}

.gf-sheet[open] > .gf-sheet-sum::before {
    transform: rotate(180deg);
}

.gf-sheet[open] > .gf-sheet-sum {
    background: rgba(0, 0, 0, .025);
}

.gf-sheet-no,
.gf-sheet-teacher,
.gf-sheet-from,
.gf-sheet-to,
.gf-sheet-count {
    justify-self: start;       /* در RTL یعنی چسبیده به راستِ ستون خودش */
}

.gf-sheet-no {
    font-size: 12px;
}

.gf-sheet-teacher {
    font-size: 13px;
    font-weight: 600;
    color: #2f3b4c;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* کادر تاریخ: مقدار را از متن اطراف جدا می‌کند تا با یک نگاه دیده شود */
.gf-date-box {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid #d5dded;
    border-radius: 6px;
    background: #f7f9fc;
    font-size: 13px;
    font-weight: 600;
    color: #22324a;
    white-space: nowrap;
}

/* برچسب «از»/«تا» فقط در گوشی لازم است؛ در دسکتاپ سربرگ ستون‌ها را داریم */
.gf-date-box .gf-lbl {
    display: none;
    font-size: 11px;
    font-weight: 400;
    color: var(--muted);
}

/* دکمه‌ها در دسکتاپ به انتهای ردیف می‌چسبند و در گوشی تمام‌عرض می‌شوند */
.gf-sheet-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-self: end;
}

@media (max-width: 575.98px) {
    /* سربرگ ستون‌ها جا نمی‌شود ⇒ پنهان و برچسب «از»/«تا» داخل خود کادرها می‌آید.
       هر آیتم باید area بگیرد؛ وگرنه شبکهٔ ستونی به‌هم می‌ریزد. */
    .gf-sheet-head { display: none; }

    .gf-sheet-sum {
        grid-template-columns: 16px 1fr 1fr;
        grid-template-areas:
            "ar no    count"
            "ar from  to"
            "ar acts  acts";
        row-gap: 6px;
        padding: 10px;
    }

    .gf-sheet-sum::before { grid-area: ar; }
    .gf-sheet-no          { grid-area: no; }
    .gf-sheet-from        { grid-area: from; }
    .gf-sheet-to          { grid-area: to; }
    .gf-sheet-count       { grid-area: count; }
    .gf-sheet-acts        { grid-area: acts; justify-self: stretch; }

    /* مدیر یک سطر بیشتر دارد: نام دبیر زیر «برگ» می‌آید.
       ⚠️ `grid-template-columns` را باید **دوباره** بدهیم: قاعدهٔ دسکتاپِ
          `.gf-sheet-sum.gf-has-teacher` دو کلاس دارد و از قاعدهٔ تک‌کلاسیِ
          بالا (هرچند پایین‌تر آمده) قوی‌تر است؛ بدون این خط، موبایل ستون‌های
          دسکتاپ را می‌گیرد و شبکه از عرض صفحه بیرون می‌زند. */
    .gf-sheet-sum.gf-has-teacher {
        grid-template-columns: 16px 1fr 1fr;
        grid-template-areas:
            "ar no      count"
            "ar teacher teacher"
            "ar from    to"
            "ar acts    acts";
    }

    .gf-sheet-sum.gf-has-teacher .gf-sheet-teacher { grid-area: teacher; }

    .gf-date-box {
        justify-self: stretch;
        justify-content: center;
    }

    .gf-date-box .gf-lbl { display: inline; }

    .gf-sheet-acts .btn {
        flex: 1 1 auto;
    }
}

/* ============================================================
   جعبهٔ «افزودن» — فرم تخصیص درس به دبیر
   ============================================================
   کارت‌های فهرست سفیدند؛ فرم افزودن زمینهٔ ایندیگوی روشن و سربرگ گرادیانی
   می‌گیرد تا با یک نگاه از «فهرست» جدا شود (در هر دو نمای دبیرمحور و
   کلاس‌محور همین کلاس به کار رفته است).

   ⚠️ کلاس `bg-light` بوت‌استرپ روی این کارت‌ها **نباید** بماند؛ آن کلاس
      `!important` دارد و سربرگ گرادیانی را سفید می‌کند. */

.add-box {
    border: 1px solid var(--primary);
    background: var(--primary-soft);
}

.add-box > .card-header {
    background: var(--grad);
    color: #fff;
    border-bottom: 0;
}

.add-box > .card-header strong,
.add-box > .card-header .badge {
    color: #fff;
}

.add-box .form-text {
    color: var(--muted);
}