/* =====================================================================
   ClassBan — پوسته اصلی سامانه (فارسی / RTL / ریسپانسیو)
   ===================================================================== */

:root {
    --c-primary: #0f766e;
    --c-primary-dark: #0b5a54;
    --c-primary-light: #e6f4f3;
    --c-accent: #14b8a6;
    --c-indigo: #4f46e5;
    --c-indigo-light: #eef0fe;
    --c-amber: #d97706;
    --c-amber-light: #fef4e6;
    --c-rose: #e11d48;
    --c-rose-light: #fdeaef;
    --c-green: #16a34a;
    --c-green-light: #e9f8ef;
    --c-ink: #16233b;
    --c-body: #3c4a63;
    --c-muted: #7286a3;
    --c-border: #dfe6f0;
    --c-border-strong: #c6d2e3;
    --c-bg: #f3f6fb;
    --c-card: #ffffff;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(16, 42, 84, .06), 0 2px 8px rgba(16, 42, 84, .05);
    --shadow: 0 4px 18px rgba(16, 42, 84, .08);
    --shadow-lg: 0 18px 48px rgba(16, 42, 84, .16);
    --sidebar-w: 268px;
    --topbar-h: 62px;
    --font: "Vazirmatn", "Vazir", "Segoe UI", Tahoma, "Iranian Sans", "Noto Naskh Arabic", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    background: var(--c-bg);
    color: var(--c-body);
    font-size: 14.5px;
    line-height: 1.85;
    -webkit-text-size-adjust: 100%;
    /* پنجره‌های بومی (مثل آیتم‌های select) همیشه روشن بمانند تا در تم تاریک سیستم، سفید روی سفید نشوند */
    color-scheme: light;
}

/* آیتم‌های منوی کشویی: همیشه متن تیره روی زمینه سفید */
select option, select optgroup {
    background: #ffffff;
    color: #1f2a44;
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-dark); }

h1, h2, h3, h4, h5 { color: var(--c-ink); margin: 0 0 .5rem; font-weight: 700; line-height: 1.6; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.22rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .75rem; }

/* ---------- اسکلت صفحه ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    background: linear-gradient(180deg, #0d2b2f 0%, #123b41 55%, #0f2f34 100%);
    color: #d8e9e7;
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    display: flex;
    flex-direction: column;
    z-index: 60;
    transition: transform .25s ease;
    box-shadow: -6px 0 24px rgba(9, 32, 36, .18);
}

.sidebar__brand {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar__logo {
    width: 38px; height: 38px; border-radius: 11px; flex: none;
    background: linear-gradient(135deg, #2dd4bf, #0ea5a0);
    display: grid; place-items: center; color: #06231f; font-weight: 800; font-size: 17px;
    box-shadow: 0 6px 16px rgba(20, 184, 166, .35);
}
.sidebar__name { font-size: 1.02rem; font-weight: 700; color: #fff; letter-spacing: .2px; }
.sidebar__sub { font-size: .72rem; color: #8fb3af; }

.sidebar__nav { flex: 1; overflow-y: auto; padding: 10px 10px 24px; scrollbar-width: thin; }
.sidebar__nav::-webkit-scrollbar { width: 6px; }
.sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 6px; }

.nav-item { display: block; margin: 2px 0; }
.nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 10px;
    color: #cfe3e1; font-size: .9rem; position: relative;
    transition: background .15s, color .15s;
}
.nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-link.is-active { background: linear-gradient(90deg, rgba(45,212,191,.22), rgba(45,212,191,.06)); color: #fff; font-weight: 600; }
.nav-link.is-active::before {
    content: ""; position: absolute; inset-inline-end: -10px; top: 8px; bottom: 8px;
    width: 3px; border-radius: 3px; background: var(--c-accent);
}
.nav-icon { width: 20px; height: 20px; flex: none; opacity: .9; }
.nav-icon svg { width: 20px; height: 20px; display: block; }
.nav-badge {
    margin-inline-start: auto; background: var(--c-rose); color: #fff;
    font-size: .68rem; min-width: 20px; height: 20px; border-radius: 20px;
    display: grid; place-items: center; padding: 0 6px; font-weight: 700;
}
.nav-badge--muted { background: rgba(255,255,255,.16); }
.nav-group > .nav-link { cursor: pointer; }
.nav-caret { margin-inline-start: auto; transition: transform .2s; opacity: .7; }
.nav-group.is-open .nav-caret { transform: rotate(-180deg); }
.nav-children { display: none; padding-inline-start: 14px; margin-top: 2px; }
.nav-group.is-open .nav-children { display: block; }
.nav-children .nav-link { font-size: .85rem; padding: 7px 12px; color: #b8d3d0; }

.sidebar__footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: .74rem; color: #86aaa6; }

/* ---------- ناحیه اصلی ---------- */
.main { flex: 1; min-width: 0; margin-inline-end: var(--sidebar-w); display: flex; flex-direction: column; }

.topbar {
    height: var(--topbar-h); background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 14px; padding: 0 20px;
}
.topbar__title { font-weight: 700; color: var(--c-ink); font-size: 1.02rem; }
.topbar__date { font-size: .78rem; color: var(--c-muted); }
.topbar__spacer { flex: 1; }
.topbar__actions { display: flex; align-items: center; gap: 8px; }

.content { padding: 22px 20px 60px; flex: 1; }
.container { max-width: 1320px; margin: 0 auto; }
.container--narrow { max-width: 900px; }
.container--wide { max-width: 1560px; }

.sidebar-toggle { display: none; background: none; border: 1px solid var(--c-border); border-radius: 10px; padding: 6px 9px; cursor: pointer; color: var(--c-body); }

/* ---------- دکمه‌ها ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 16px; border-radius: 10px; border: 1px solid transparent;
    font-family: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
    transition: transform .12s, box-shadow .15s, background .15s, border-color .15s;
    text-decoration: none; line-height: 1.6; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.is-disabled { opacity: .55; cursor: not-allowed; }
.btn--primary { background: var(--c-primary); color: #fff; box-shadow: 0 4px 14px rgba(15,118,110,.25); }
.btn--primary:hover { background: var(--c-primary-dark); color: #fff; }
.btn--accent { background: var(--c-accent); color: #04231f; }
.btn--accent:hover { background: #0ea394; color: #04231f; }
.btn--indigo { background: var(--c-indigo); color: #fff; }
.btn--indigo:hover { background: #4338ca; color: #fff; }
.btn--outline { background: #fff; border-color: var(--c-border-strong); color: var(--c-body); }
.btn--outline:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-light); }
.btn--ghost { background: transparent; color: var(--c-body); }
.btn--ghost:hover { background: #eef2f8; }
.btn--danger { background: var(--c-rose); color: #fff; }
.btn--danger:hover { background: #be123c; color: #fff; }
.btn--warn { background: var(--c-amber); color: #fff; }
.btn--sm { padding: 5px 11px; font-size: .8rem; border-radius: 9px; }
.btn--lg { padding: 12px 24px; font-size: 1rem; border-radius: 12px; }
.btn--block { width: 100%; }
.btn-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* ---------- کارت ---------- */
.card {
    background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); margin-bottom: 18px; overflow: hidden;
}
.card__head {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 15px 18px; border-bottom: 1px solid var(--c-border); background: #fcfdff;
}
.card__title { font-size: 1rem; font-weight: 700; color: var(--c-ink); margin: 0; }
.card__sub { font-size: .78rem; color: var(--c-muted); margin: 0; }
.card__actions { margin-inline-start: auto; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.card__body { padding: 18px; }
.card__body--flush { padding: 0; }
.card__foot { padding: 13px 18px; border-top: 1px solid var(--c-border); background: #fafcff; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* ---------- آمار ---------- */
.stat {
    background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius);
    padding: 15px 16px; display: flex; align-items: center; gap: 13px; box-shadow: var(--shadow-sm);
    position: relative; overflow: hidden;
}
.stat::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: var(--c-accent); opacity: .8; }
.stat--indigo::after { background: var(--c-indigo); }
.stat--amber::after { background: var(--c-amber); }
.stat--rose::after { background: var(--c-rose); }
.stat--green::after { background: var(--c-green); }
.stat__icon {
    width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center;
    background: var(--c-primary-light); color: var(--c-primary);
}
.stat--indigo .stat__icon { background: var(--c-indigo-light); color: var(--c-indigo); }
.stat--amber .stat__icon { background: var(--c-amber-light); color: var(--c-amber); }
.stat--rose .stat__icon { background: var(--c-rose-light); color: var(--c-rose); }
.stat--green .stat__icon { background: var(--c-green-light); color: var(--c-green); }
.stat__icon svg { width: 22px; height: 22px; }
.stat__value { font-size: 1.42rem; font-weight: 800; color: var(--c-ink); line-height: 1.3; }
.stat__label { font-size: .79rem; color: var(--c-muted); }
.stat__trend { font-size: .72rem; color: var(--c-green); }

/* ---------- جدول ---------- */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: .87rem; }
table.table th {
    background: #f6f9fd; color: var(--c-ink); font-weight: 700; text-align: right;
    padding: 11px 12px; border-bottom: 1px solid var(--c-border); white-space: nowrap; font-size: .82rem;
}
table.table td { padding: 10px 12px; border-bottom: 1px solid #eef2f8; vertical-align: middle; color: var(--c-body); }
table.table tbody tr:hover td { background: #f9fbff; }
table.table tbody tr:last-child td { border-bottom: none; }
table.table .num { text-align: center; font-variant-numeric: tabular-nums; }
table.table .actions { display: flex; gap: 5px; justify-content: flex-start; flex-wrap: wrap; }
.table-compact th, .table-compact td { padding: 7px 9px; font-size: .82rem; }
.cell-title { color: var(--c-ink); font-weight: 600; }
.cell-sub { font-size: .75rem; color: var(--c-muted); }
.t-row-selected td { background: #eef8f7 !important; }

/* ---------- برچسب وضعیت ---------- */
.badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px;
    border-radius: 30px; font-size: .74rem; font-weight: 600; white-space: nowrap;
    border: 1px solid transparent;
}
.badge--ok { background: var(--c-green-light); color: #14713c; border-color: #bfe6cd; }
.badge--warn { background: var(--c-amber-light); color: #97560a; border-color: #f6dcb2; }
.badge--bad { background: var(--c-rose-light); color: #a8123c; border-color: #f7c3d0; }
.badge--muted { background: #eef2f8; color: #5c6b85; border-color: #dde5f0; }
.badge--info { background: var(--c-indigo-light); color: #3f37c9; border-color: #d6d9fb; }
.badge--primary { background: var(--c-primary-light); color: var(--c-primary-dark); border-color: #bfe2df; }
.badge--lg { padding: 4px 14px; font-size: .82rem; }

.chip {
    display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--c-border-strong);
    border-radius: 30px; padding: 3px 11px; font-size: .78rem; color: var(--c-body);
}
.chip--active { border-color: var(--c-primary); background: var(--c-primary-light); color: var(--c-primary-dark); }
label.chip:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-light); color: var(--c-primary-dark); font-weight: 600; }
.chip--active::before, label.chip:has(input:checked)::before { content: "✓ "; font-weight: 700; }
.att-row--member { background: var(--c-primary-light); border-radius: 10px; padding-inline: 6px; }

/* ---------- فرم ---------- */
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.field { grid-column: span 12; }
.field--6 { grid-column: span 6; }
.field--4 { grid-column: span 4; }
.field--3 { grid-column: span 3; }
.field--8 { grid-column: span 8; }
.field--9 { grid-column: span 9; }

label.lbl, .lbl { display: block; font-size: .83rem; font-weight: 600; color: var(--c-ink); margin-bottom: 5px; }
.lbl .req { color: var(--c-rose); margin-inline-start: 2px; }
.hint { font-size: .75rem; color: var(--c-muted); margin-top: 4px; display: block; }

input[type=text], input[type=password], input[type=email], input[type=number], input[type=date],
input[type=time], input[type=tel], input[type=url], input[type=search], input[type=file],
select, textarea {
    width: 100%; padding: 9px 12px; border: 1px solid var(--c-border-strong); border-radius: 10px;
    font-family: inherit; font-size: .88rem; color: var(--c-ink); background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.9; }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(20,184,166,.16);
}
input[readonly], input:disabled, select:disabled, textarea:disabled { background: #f4f7fb; color: var(--c-muted); }
input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: var(--c-rose); background: #fff8f9; }
.field-error { color: var(--c-rose); font-size: .76rem; margin-top: 4px; display: block; }

.check { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--c-primary); margin-top: 3px; flex: none; }
.check span { font-size: .85rem; color: var(--c-body); }

.form-section { border: 1px solid var(--c-border); border-radius: var(--radius); margin-bottom: 16px; background: #fff; }
.form-section__head {
    padding: 11px 15px; background: linear-gradient(180deg, #f7fbfb, #f2f8f8);
    border-bottom: 1px solid var(--c-border); border-radius: var(--radius) var(--radius) 0 0;
    display: flex; align-items: center; gap: 9px;
}
.form-section__head h3 { margin: 0; font-size: .95rem; }
.form-section__head .step-no {
    width: 24px; height: 24px; border-radius: 50%; background: var(--c-primary); color: #fff;
    display: grid; place-items: center; font-size: .76rem; flex: none;
}
.form-section__body { padding: 16px 15px; }

fieldset { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 14px; }
legend { font-size: .84rem; font-weight: 700; color: var(--c-primary-dark); padding: 0 8px; }

/* ---------- پیام‌ها ---------- */
.alert { border-radius: var(--radius); padding: 12px 15px; margin-bottom: 14px; border: 1px solid; display: flex; gap: 10px; align-items: flex-start; }
.alert svg { width: 19px; height: 19px; flex: none; margin-top: 3px; }
.alert--success { background: var(--c-green-light); border-color: #bfe6cd; color: #12603a; }
.alert--error { background: var(--c-rose-light); border-color: #f7c3d0; color: #97103a; }
.alert--warning { background: var(--c-amber-light); border-color: #f6dcb2; color: #85500a; }
.alert--info { background: var(--c-indigo-light); border-color: #d6d9fb; color: #3a34b5; }
.alert__title { font-weight: 700; }

.empty { text-align: center; padding: 46px 20px; color: var(--c-muted); }
.empty svg { width: 60px; height: 60px; opacity: .35; margin-bottom: 10px; }
.empty__title { color: var(--c-ink); font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.empty__text { font-size: .86rem; max-width: 460px; margin: 0 auto 14px; }

.loading { display: inline-flex; align-items: center; gap: 8px; color: var(--c-muted); font-size: .85rem; }
.spinner {
    width: 17px; height: 17px; border: 2px solid var(--c-border-strong); border-top-color: var(--c-primary);
    border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; bottom: 20px; inset-inline-start: 20px; z-index: 200; display: flex; flex-direction: column; gap: 9px; }
.toast {
    background: #14213a; color: #fff; padding: 11px 16px; border-radius: 12px; box-shadow: var(--shadow-lg);
    font-size: .86rem; display: flex; align-items: center; gap: 9px; min-width: 240px; max-width: 380px;
    animation: toastIn .25s ease;
}
.toast--ok { background: #0e7a4f; }
.toast--err { background: #b3123f; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Modal ---------- */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(11, 24, 40, .55); z-index: 150;
    display: none; align-items: center; justify-content: center; padding: 18px; backdrop-filter: blur(2px);
}
.modal-backdrop.is-open { display: flex; animation: fadeIn .18s ease; }
.modal {
    background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column;
    animation: modalIn .22s cubic-bezier(.2,.9,.3,1.2);
}
.modal--lg { max-width: 860px; }
.modal__head { padding: 15px 18px; border-bottom: 1px solid var(--c-border); display: flex; align-items: center; gap: 10px; }
.modal__head h3 { margin: 0; font-size: 1rem; }
.modal__close { margin-inline-start: auto; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--c-muted); line-height: 1; }
.modal__body { padding: 18px; overflow-y: auto; }
.modal__foot { padding: 13px 18px; border-top: 1px solid var(--c-border); display: flex; gap: 9px; justify-content: flex-start; background: #fafcff; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(-14px) scale(.98); } }

/* ---------- تب ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-border); margin-bottom: 16px; overflow-x: auto; }
.tab {
    padding: 9px 16px; font-size: .88rem; color: var(--c-muted); border-bottom: 2px solid transparent;
    cursor: pointer; white-space: nowrap; font-weight: 600;
}
.tab:hover { color: var(--c-primary); }
.tab.is-active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ---------- فیلترها ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filters .field { grid-column: auto; flex: 1 1 150px; min-width: 140px; margin: 0; }
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; padding: 14px 16px; background: #fbfdff; border-bottom: 1px solid var(--c-border); }

/* ---------- صفحه‌بندی ---------- */
.pagination { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; padding: 14px 4px 0; }
.page-link {
    min-width: 34px; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--c-border-strong);
    background: #fff; color: var(--c-body); display: grid; place-items: center; font-size: .83rem;
}
.page-link:hover { border-color: var(--c-primary); color: var(--c-primary); }
.page-link.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 700; }
.page-link.disabled { opacity: .45; pointer-events: none; }
.page-dots { color: var(--c-muted); padding: 0 3px; }
.page-info { margin-inline-start: auto; font-size: .78rem; color: var(--c-muted); }

/* ---------- زنگ/اعلان ---------- */
.bell { position: relative; }
.bell .btn--ghost svg { width: 19px; height: 19px; display: block; }
.bell__count {
    position: absolute; top: -5px; inset-inline-start: -5px; background: var(--c-rose); color: #fff;
    font-size: .64rem; min-width: 17px; height: 17px; border-radius: 20px; display: grid; place-items: center; padding: 0 4px; font-weight: 700;
}
.dropdown { position: relative; }
.dropdown__menu {
    position: absolute; top: calc(100% + 8px); inset-inline-start: 0; background: #fff;
    border: 1px solid var(--c-border); border-radius: 14px; box-shadow: var(--shadow-lg);
    min-width: 300px; padding: 7px; display: none; z-index: 80; overflow: hidden;
}
.dropdown.is-open .dropdown__menu { display: block; animation: fadeIn .15s ease; }
/* آیکون‌های SVG داخل منوی کشویی همیشه کوچک و هم‌تراز با متن باشند */
.dropdown__menu svg {
    width: 17px; height: 17px; flex: none; color: var(--c-muted);
    stroke-width: 1.7; margin-top: 2px;
}
.dropdown__item { display: flex; gap: 9px; padding: 8px 10px; border-radius: 9px; align-items: center; }
.dropdown__item:hover { background: #f4f8fd; }
.dropdown__item:hover svg { color: var(--c-primary); }
.dropdown__item.is-unread { background: #f3fbfa; }
.dropdown__item > svg { align-self: center; margin-top: 0; }
.dropdown__title { font-size: .84rem; font-weight: 600; color: var(--c-ink); }
.dropdown__body { font-size: .76rem; color: var(--c-muted); line-height: 1.7; }
.dropdown__time { font-size: .7rem; color: var(--c-muted); }

.avatar {
    width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #2dd4bf, #0f766e);
    color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .82rem; flex: none;
}
.avatar--student { background: linear-gradient(135deg, #818cf8, #4f46e5); }
.avatar--lg { width: 76px; height: 76px; font-size: 1.5rem; }
.user-chip { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 4px 8px; border-radius: 12px; }
.user-chip:hover { background: #eef2f8; }
.user-chip__name { font-size: .84rem; font-weight: 600; color: var(--c-ink); line-height: 1.4; }
.user-chip__role { font-size: .71rem; color: var(--c-muted); }

/* ---------- ابزارها ---------- */
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.col { display: flex; flex-direction: column; gap: 12px; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 8px !important; } .mt-2 { margin-top: 16px !important; } .mt-3 { margin-top: 24px !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 8px !important; } .mb-2 { margin-bottom: 16px !important; }
.text-muted { color: var(--c-muted); }
.text-small { font-size: .8rem; }
.text-center { text-align: center; }
.text-start { text-align: right; }
.text-end { text-align: left; }
.text-bold { font-weight: 700; }
.text-ok { color: var(--c-green); }
.text-bad { color: var(--c-rose); }
.text-warn { color: var(--c-amber); }
.text-primary { color: var(--c-primary); }
.w-100 { width: 100%; }
.hidden { display: none !important; }
.ltr { direction: ltr; text-align: left; }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .82rem; }
.divider { height: 1px; background: var(--c-border); margin: 14px 0; }
.scroll-x { overflow-x: auto; }
.nowrap { white-space: nowrap; }

.progress { height: 8px; background: #e9eef6; border-radius: 20px; overflow: hidden; }
.progress__bar { height: 100%; background: linear-gradient(90deg, var(--c-accent), var(--c-primary)); border-radius: 20px; }
.progress--warn .progress__bar { background: linear-gradient(90deg, #fbbf24, #d97706); }
.progress--bad .progress__bar { background: linear-gradient(90deg, #fb7185, #e11d48); }

.kv { display: grid; grid-template-columns: 160px 1fr; gap: 7px 14px; font-size: .87rem; }
.kv dt { color: var(--c-muted); }
.kv dd { margin: 0; color: var(--c-ink); font-weight: 600; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 6px; }
.timeline li { position: relative; padding: 0 22px 18px 0; border-inline-end: 2px solid var(--c-border); }
.timeline li::before {
    content: ""; position: absolute; inset-inline-end: -7px; top: 4px; width: 12px; height: 12px;
    border-radius: 50%; background: #fff; border: 3px solid var(--c-accent);
}
.timeline li:last-child { border-inline-end-color: transparent; padding-bottom: 0; }
.timeline__time { font-size: .73rem; color: var(--c-muted); }
.timeline__text { font-size: .85rem; color: var(--c-body); }

/* ---------- حضور و غیاب ---------- */
.att-grid { display: grid; gap: 8px; }
.att-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--c-border);
    border-radius: 12px; background: #fff; flex-wrap: wrap;
}
.att-row__name { font-weight: 600; color: var(--c-ink); min-width: 150px; flex: 1; }
.att-opts { display: flex; gap: 5px; flex-wrap: wrap; }
.att-opt { position: relative; }
.att-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.att-opt span {
    display: block; padding: 5px 13px; border-radius: 30px; border: 1px solid var(--c-border-strong);
    font-size: .79rem; cursor: pointer; color: var(--c-muted); transition: all .15s; background: #fff;
}
.att-opt input:checked + span { color: #fff; font-weight: 700; }
.att-opt[data-status=PRESENT] input:checked + span { background: var(--c-green); border-color: var(--c-green); }
.att-opt[data-status=ABSENT] input:checked + span { background: var(--c-rose); border-color: var(--c-rose); }
.att-opt[data-status=LATE] input:checked + span { background: var(--c-amber); border-color: var(--c-amber); }
.att-opt[data-status=EXCUSED] input:checked + span { background: var(--c-indigo); border-color: var(--c-indigo); }
.att-opt[data-status=LEFT_EARLY] input:checked + span { background: #64748b; border-color: #64748b; }

/* دکمه‌های حاضر/غایب/تأخیر/موجه — هر وضعیت رنگ اختصاصی دارد (حتی قبل از انتخاب) */
.att-opt__chip { border-width: 1.5px !important; }
.att-opt__chip--present { color: #15803d !important; border-color: #86efac !important; background: #f0fdf4 !important; }
.att-opt__chip--absent { color: #be123c !important; border-color: #fda4af !important; background: #fff1f2 !important; }
.att-opt__chip--late { color: #b45309 !important; border-color: #fcd34d !important; background: #fffbeb !important; }
.att-opt__chip--excused { color: #4338ca !important; border-color: #a5b4fc !important; background: #eef2ff !important; }
.att-opt__chip--left_early { color: #475569 !important; border-color: #cbd5e1 !important; background: #f8fafc !important; }
.att-opt input:checked + .att-opt__chip--present { color: #fff !important; background: var(--c-green) !important; border-color: var(--c-green) !important; }
.att-opt input:checked + .att-opt__chip--absent { color: #fff !important; background: var(--c-rose) !important; border-color: var(--c-rose) !important; }
.att-opt input:checked + .att-opt__chip--late { color: #fff !important; background: var(--c-amber) !important; border-color: var(--c-amber) !important; }
.att-opt input:checked + .att-opt__chip--excused { color: #fff !important; background: var(--c-indigo) !important; border-color: var(--c-indigo) !important; }
.att-opt input:checked + .att-opt__chip--left_early { color: #fff !important; background: #64748b !important; border-color: #64748b !important; }
.att-opt input:disabled + span { opacity: .55; cursor: not-allowed; }
.att-note { flex: 1 1 180px; min-width: 150px; padding: 5px 10px !important; font-size: .8rem !important; }

/* ---------- Drag & Drop ترتیب سؤال ---------- */
.sortable { list-style: none; margin: 0; padding: 0; }
.sortable li {
    display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; margin-bottom: 8px;
    border: 1px solid var(--c-border); border-radius: 12px; background: #fff; cursor: grab;
}
.sortable li.is-dragging { opacity: .45; border-style: dashed; }
.sortable li.is-over { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(20,184,166,.14); }
.drag-handle { color: var(--c-muted); cursor: grab; flex: none; padding-top: 2px; }
.sort-no {
    width: 26px; height: 26px; border-radius: 8px; background: var(--c-primary-light); color: var(--c-primary-dark);
    display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex: none;
}

/* ---------- آزمون آنلاین ---------- */
.exam-shell { max-width: 900px; margin: 0 auto; }
.exam-q {
    background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg);
    padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.exam-q__head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.exam-q__text { font-weight: 600; color: var(--c-ink); font-size: .97rem; line-height: 2; }
.exam-opt { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--c-border); border-radius: 11px; margin-bottom: 8px; cursor: pointer; }
.exam-opt:hover { border-color: var(--c-accent); background: #f7fdfc; }
.exam-opt input { margin-top: 4px; accent-color: var(--c-primary); }
.exam-opt.is-correct { border-color: var(--c-green); background: var(--c-green-light); }
.exam-opt.is-wrong { border-color: var(--c-rose); background: var(--c-rose-light); }
.exam-opt__id { font-weight: 700; color: var(--c-primary); min-width: 20px; }
.exam-timer {
    position: sticky; top: 74px; z-index: 40; background: #14213a; color: #fff; border-radius: 14px;
    padding: 10px 16px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow);
}
.exam-timer__value { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.exam-timer.is-warning { background: #b3123f; }

/* ---------- نمودار میله‌ای ساده (بدون کتابخانه) ---------- */
.bars { display: flex; align-items: flex-end; gap: 9px; height: 170px; padding-top: 10px; }
.bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.bars__bar { width: 100%; max-width: 46px; background: linear-gradient(180deg, var(--c-accent), var(--c-primary)); border-radius: 8px 8px 3px 3px; min-height: 4px; transition: height .5s ease; }
.bars__bar--indigo { background: linear-gradient(180deg, #818cf8, #4f46e5); }
.bars__bar--amber { background: linear-gradient(180deg, #fbbf24, #d97706); }
.bars__bar--rose { background: linear-gradient(180deg, #fb7185, #e11d48); }
.bars__label { font-size: .71rem; color: var(--c-muted); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bars__value { font-size: .75rem; font-weight: 700; color: var(--c-ink); }

.donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut__legend { display: grid; gap: 5px; font-size: .82rem; }
.donut__legend span { display: inline-flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ---------- چاپ ---------- */
@media print {
    .sidebar, .topbar, .no-print, .toast-wrap, .pagination { display: none !important; }
    .main { margin: 0 !important; }
    body { background: #fff; font-size: 11pt; }
    .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
    a[href]::after { content: ""; }
}

/* ---------- ریسپانسیو ---------- */
@media (max-width: 1100px) {
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
    /* RTL: سایدبار چسبیده به چپ است؛ برای پنهان‌شدن باید به چپ (منفی) برود */
    .sidebar { transform: translateX(-100%); width: 280px; z-index: 90; }
    html[dir=rtl] .sidebar { transform: translateX(-100%); }
    html[dir=ltr] .sidebar { transform: translateX(100%); }
    .sidebar.is-open { transform: translateX(0) !important; }
    .main { margin-inline-end: 0; }
    .sidebar-toggle { display: inline-flex; }
    .content { padding: 16px 13px 50px; }
    .topbar { padding: 0 13px; gap: 9px; }
    .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
    .field--6, .field--4, .field--3, .field--8, .field--9 { grid-column: span 12; }
    .kv { grid-template-columns: 1fr; gap: 2px 0; }
    .kv dd { margin-bottom: 8px; }
    .user-chip__name, .user-chip__role { display: none; }
    .modal { max-width: 100%; }
    .exam-timer { position: static; }
}

@media (max-width: 520px) {
    body { font-size: 14px; }
    .stat { padding: 12px; }
    .stat__value { font-size: 1.2rem; }
    .btn { padding: 7px 12px; font-size: .83rem; }
    .card__head { padding: 12px 13px; }
    .card__body { padding: 13px; }
}

/* ============ ریسپانسیو کامل موبایل ============ */

/* پس‌زمینه تاریک پشت منوی کناری در موبایل */
.sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(9, 32, 36, .5);
    z-index: 85; opacity: 0; transition: opacity .2s ease;
    pointer-events: none; /* وقتی بسته است، کلیک/تپ دکمه ☰ را نباید بدزدد */
}
.sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 861px) { .sidebar-backdrop { display: none; } }

@media (max-width: 860px) {
    /* هدر و اکشن‌های کارت */
    .card__head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .card__actions { width: 100%; flex-wrap: wrap; gap: 6px; }

    /* جدول‌ها: اسکرول افقی روان + هدر چسبان برای جدول‌های بلند */
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-wrap table { min-width: 640px; }
    .table-wrap table.table-compact { min-width: 520px; }

    /* نوار اقدام سریع داشبورد */
    .row { gap: 8px; }

    /* دکمه‌ها و فیلدها بزرگ‌تر برای لمس */
    .btn { min-height: 38px; }
    select.w-100, input.w-100, textarea.w-100 { font-size: 16px; }
    .form-grid { gap: 10px; }

    /* آمارها دو ستونی جمع‌وجور */
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* مودال‌ها تمام‌عرض با ارتفاع مناسب */
    .modal-backdrop { padding: 10px; }
    .modal { max-height: 92vh; overflow-y: auto; }

    /* تایم‌لاین و نمودار میله‌ای */
    .timeline__time { white-space: normal; }
    .bars { gap: 4px; }
    .bars__label { font-size: .62rem; }

    /* منوی آبشاری ناوبری داخل صفحه‌های کوچک */
    .dropdown__menu { max-width: 92vw; }

    /* فرم آزمون: دکمه‌های پایین فرم تمام‌عرض */
    .card__body > .row.row--end .btn { flex: 1 1 auto; }
}

@media (max-width: 520px) {
    .content { padding: 12px 10px 44px; }

    /* عنوان بالای صفحه */
    .topbar__title { font-size: .92rem; max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar { gap: 7px; }

    /* جداول اسکرول‌شونده: لبه‌های راهنما */
    .table-wrap { border-radius: 10px; }

    /* صفحه‌بندی */
    .pagination { flex-wrap: wrap; gap: 4px; }

    /* آمار تک‌ستونی در صفحه‌های خیلی باریک حفظ دو ستونی جمع‌وجور */
    .grid--4 { gap: 8px; }
    .stat__label { font-size: .68rem; }

    /* آیکون‌ها در منوی کناری کمی بزرگ‌تر برای لمس */
    .sidebar .nav-link { padding: 11px 12px; }
}

/* حالت افقی موبایل: منو فشرده‌تر */
@media (max-height: 480px) and (orientation: landscape) {
    .sidebar__nav { padding-top: 4px; }
    .sidebar__footer { display: none; }
}