/* ============================================================
   حضور و غیاب — سیستم طراحی اختصاصی (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');
}

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%; }
}