/* =====================================================================
   سامانه مدیریت آموزشگاه — Design System
   Self-hosted Vazirmatn (UI text) + JetBrains Mono (figures / gutter ids)
   ===================================================================== */

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-SemiBold.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-ExtraBold.woff2") format("woff2");
  font-weight: 800; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Black.woff2") format("woff2");
  font-weight: 900; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-SemiBold.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}

:root {
  --bg: #f2f4f7;
  --surface: #ffffff;
  --surface-alt: #f8f9fb;
  --ink: #171b26;
  --ink-soft: #545b6b;
  --ink-faint: #8b92a3;
  --border: #e5e8ee;

  --sidebar: #10121c;
  --sidebar-alt: #1a1d2c;
  --sidebar-ink: #aeb2c4;
  --sidebar-ink-active: #ffffff;
  --sidebar-border: #262a3c;

  --accent: #1fb5a6;
  --accent-dark: #14877c;
  --accent-ink: #063d37;
  --accent-soft: #e2f8f5;

  --warn: #ef9d1f;
  --warn-soft: #fdf1de;
  --danger: #e5484d;
  --danger-soft: #fbe6e7;
  --success: #2fb473;
  --success-soft: #e3f7ee;
  --info: #4f7cf6;
  --info-soft: #e8edfe;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(16, 18, 28, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 18, 28, 0.08);

  --font-body: "Vazirmatn", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

/* ---------------------------------------------------------------------
   حالت تیره — چون کل استایل‌شیت از قبل بر پایه‌ی متغیرهای CSS نوشته شده،
   حالت تیره فقط با بازتعریف همین متغیرها پیاده می‌شود؛ هیچ رنگ ثابتی جای
   دیگری در فایل نیست که نیاز به هماهنگ‌سازی جداگانه داشته باشد.
   فعال‌سازی از طریق ویژگی data-theme="dark" روی <html> (نگاه کنید به
   initDarkMode در main.js) — نه یک کلاس، تا هم با ترجیح سیستم‌عامل هم با
   انتخاب دستی کاربر یکسان کار کند و پیش از رندر اول صفحه اعمال شود (بدون
   چشمک زدن به رنگ روشن).
   --------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg: #0c0e15;
  --surface: #161925;
  --surface-alt: #1d2130;
  --ink: #e9ebf2;
  --ink-soft: #a6acbf;
  --ink-faint: #6d7387;
  --border: #2b2f40;

  --sidebar: #06070c;
  --sidebar-alt: #0f111a;
  --sidebar-ink: #9298ab;
  --sidebar-ink-active: #ffffff;
  --sidebar-border: #1c1f2c;

  --accent: #2bcab8;
  --accent-dark: #1fb5a6;
  --accent-ink: #cffaf3;
  --accent-soft: #123a37;

  --warn: #f2b155;
  --warn-soft: #3a2c15;
  --danger: #f2777b;
  --danger-soft: #3c1d1f;
  --success: #4ecb90;
  --success-soft: #12321f;
  --info: #7f9dfa;
  --info-soft: #1a2340;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* اسکرول‌بار و ورودی‌های بومی مرورگر (تقویم، select و ...) هم رنگ زمینه‌ی
   تیره/روشن مناسب خودشان را بگیرند، وگرنه در حالت تیره سفید و ناهماهنگ
   باقی می‌مانند (این‌ها CSS متغیر ندارند، باید جدا مشخص شوند). */
[data-theme="dark"] { color-scheme: dark; }
:root:not([data-theme="dark"]) { color-scheme: light; }

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-body); font-weight: 800; margin: 0; color: var(--ink); }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--accent-soft); color: var(--accent-ink); }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }

/* ---------------------------------------------------------------------
   Layout shell
   --------------------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 264px; flex-shrink: 0;
  background: var(--sidebar);
  color: var(--sidebar-ink);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar-brand {
  padding: 22px 22px 16px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-brand .mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(155deg, var(--accent), var(--accent-dark));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 600; color: #06231f; font-size: 15px;
}
.sidebar-brand .name { font-weight: 700; color: #fff; font-size: 15px; }
.sidebar-brand .sub { font-size: 11px; color: var(--sidebar-ink); font-family: var(--font-mono); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 14px 12px; }
.sidebar-section-label {
  font-family: var(--font-mono);
  font-size: 11px; color: #565b76;
  padding: 16px 10px 6px; letter-spacing: .3px;
}
.sidebar-section-label:first-child { padding-top: 4px; }
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px;
  color: var(--sidebar-ink); font-size: 13.5px; font-weight: 500;
  margin-bottom: 2px; transition: background .12s ease, color .12s ease;
}
.sidebar-link:hover { background: var(--sidebar-alt); color: #fff; }
.sidebar-link.active { background: var(--accent); color: #06231f; font-weight: 700; }
.sidebar-link .dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55;
}
.sidebar-link .badge-count {
  margin-inline-start: auto; background: var(--danger); color: #fff;
  font-family: var(--font-mono); font-size: 10.5px; padding: 1px 6px; border-radius: 999px;
}

.sidebar-footer {
  padding: 14px 18px; border-top: 1px solid var(--sidebar-border);
  font-size: 12px; color: #565b76;
}

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 64px; flex-shrink: 0;
  background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; position: sticky; top: 0; z-index: 20;
}
.topbar-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: 9px; padding: 8px 14px; width: 320px; color: var(--ink-faint);
}
.topbar-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.back-btn {
  display: flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 13px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-soft); font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
.back-btn:hover { background: var(--surface-alt); color: var(--ink); }
.back-btn .arrow { font-size: 15px; line-height: 1; }
.topbar-search input { border: none; background: transparent; outline: none; width: 100%; font-family: inherit; color: var(--ink); }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.topbar-icon-btn {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; position: relative; background: var(--surface);
}
.topbar-icon-btn .ping {
  position: absolute; top: -3px; left: -3px; background: var(--danger); color: #fff;
  font-family: var(--font-mono); font-size: 10px; border-radius: 999px; padding: 0 4px; line-height: 1.5;
}
.user-chip { display: flex; align-items: center; gap: 10px; }
.avatar-circle {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.user-chip .who { display: flex; flex-direction: column; line-height: 1.3; }
.user-chip .who b { font-size: 13px; }
.user-chip .who span { font-size: 11px; color: var(--ink-faint); }

.content { padding: 26px 28px 60px; flex: 1; }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 22px; gap: 16px; flex-wrap: wrap;
}
.page-head .eyebrow {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--accent-dark);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; display: block;
}
.page-head h1 { font-size: 22px; }
.page-head p.desc { color: var(--ink-soft); margin-top: 6px; font-size: 13.5px; }
.page-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.live-clock {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); margin-inline-end: 6px;
}
.live-clock-time { font-size: 20px; font-weight: 700; letter-spacing: 0.5px; color: var(--accent-ink); line-height: 1.2; }
.live-clock-date { font-size: 11.5px; color: var(--ink-faint); }

/* ---------------------------------------------------------------------
   Cards / stats
   --------------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow-sm);
}
.card-title { font-size: 14.5px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
.card-title .see-all { font-size: 12px; color: var(--accent-dark); font-weight: 600; }

.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }

.stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 18px 16px; position: relative; overflow: hidden;
}
.stat-card::before {
  content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--accent);
}
.stat-card.warn::before { background: var(--warn); }
.stat-card.danger::before { background: var(--danger); }
.stat-card.info::before { background: var(--info); }
.stat-card .label { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 10px; }
.stat-card .value { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--ink); }
.stat-card .value small { font-size: 13px; color: var(--ink-faint); font-family: var(--font-body); font-weight: 500; }
.stat-card .foot { margin-top: 8px; font-size: 11.5px; color: var(--ink-faint); }

.section-gap { margin-top: 22px; }

/* ---------------------------------------------------------------------
   Alerts (dashboard warnings list + Django messages)
   --------------------------------------------------------------------- */
.alert-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px; margin-bottom: 8px;
  border: 1px solid var(--border); background: var(--surface-alt); font-size: 13px;
}
.alert-row .tag {
  font-family: var(--font-mono); font-size: 10.5px; padding: 2px 8px; border-radius: 999px; flex-shrink: 0;
}
.alert-row.warn .tag { background: var(--warn-soft); color: #8a5a10; }
.alert-row.danger .tag { background: var(--danger-soft); color: #99282c; }
.alert-row.info .tag { background: var(--info-soft); color: #29459e; }
.alert-row.success .tag { background: var(--success-soft); color: #1c714b; }

.messages { margin-bottom: 18px; }
.msg {
  padding: 12px 16px; border-radius: 10px; font-size: 13.5px; margin-bottom: 8px;
  border: 1px solid var(--border); display: flex; align-items: center; gap: 8px;
}
.msg.success { background: var(--success-soft); border-color: #b9e9d1; color: #1c714b; }
.msg.error { background: var(--danger-soft); border-color: #f3c3c5; color: #99282c; }
.msg.warning { background: var(--warn-soft); border-color: #f5dfb1; color: #8a5a10; }
.msg.info { background: var(--info-soft); border-color: #c6d3fb; color: #29459e; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: 9px; font-size: 13.5px; font-weight: 600;
  border: 1px solid transparent; transition: all .12s ease; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #06231f; }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-outline { background: var(--surface); border-color: var(--border); color: var(--ink); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent-dark); }
.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--surface-alt); }
.btn-danger { background: var(--danger-soft); color: #99282c; }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-success { background: var(--success-soft); color: #1c714b; }
.btn-success:hover { background: var(--success); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.is-loading, input[type="submit"].is-loading { opacity: .85; cursor: wait; }
.btn-spinner {
  display: inline-block; width: 12px; height: 12px; margin-left: 7px; vertical-align: -1px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   Tables — gutter-numbered rows (signature element)
   --------------------------------------------------------------------- */
.table-wrap {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
}
table.data-table { width: 100%; border-collapse: collapse; }
table.data-table th {
  text-align: right; font-size: 12px; color: var(--ink-faint); font-weight: 600;
  padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface-alt);
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .3px;
}
table.data-table td {
  padding: 13px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; vertical-align: middle;
}
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tr:hover td { background: var(--surface-alt); }
table.data-table td.gutter, table.data-table th.gutter {
  font-family: var(--font-mono); color: var(--ink-faint); width: 44px; font-size: 12px;
}
table.data-table .form-input { width: auto; min-width: 64px; }
table.data-table select.form-input { min-width: 92px; }
.cell-primary { font-weight: 700; color: var(--ink); }
.cell-sub { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* Badges / pills */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-mono);
}
.badge-success { background: var(--success-soft); color: #1c714b; }
.badge-warn { background: var(--warn-soft); color: #8a5a10; }
.badge-danger { background: var(--danger-soft); color: #99282c; }
.badge-info { background: var(--info-soft); color: #29459e; }
.badge-neutral { background: var(--surface-alt); color: var(--ink-soft); border: 1px solid var(--border); }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; max-width: 880px; }
.form-section-title {
  font-family: var(--font-mono); font-size: 12px; color: var(--accent-dark);
  margin: 26px 0 14px; padding-bottom: 8px; border-bottom: 1px dashed var(--border);
}
.form-section-title:first-child { margin-top: 0; }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 16px; }
.form-row.single { grid-template-columns: 1fr; }
@media (max-width: 700px) { .form-row { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.form-label .req { color: var(--danger); }
.form-input, select.form-input, textarea.form-input {
  border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px;
  font-family: inherit; font-size: 13.5px; background: var(--surface-alt); color: var(--ink);
  outline: none; transition: border-color .12s ease, background .12s ease; width: 100%;
}
.form-input:focus { border-color: var(--accent); background: var(--surface); }
.form-input-file { font-size: 12.5px; }

/* دکمه‌ی سفارشی input[type=file] (به‌جای دکمه‌ی پیش‌فرض مرورگر) — جاوااسکریپت
   input اصلی را داخل .file-input-wrap مخفی می‌کند و دکمه/نام فایل فارسی را نشان می‌دهد. */
.file-input-wrap { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.file-input-native.file-input-native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  border: 0; opacity: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.file-input-name { font-size: 12.5px; color: var(--ink-faint); }

/* دکمه‌ی نمایش/پنهان‌کردن رمز عبور — همان الگوی آیکون تقویم جلالی (ویژگی left
   چون در چیدمان راست‌به‌چپ سایت، این‌جور آیکون‌های کمکی طرف چپ ورودی می‌نشینند). */
.password-input-wrap { position: relative; display: block; }
.password-input-wrap input.password-input-native { padding-left: 34px; width: 100%; }
.password-toggle-btn {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; padding: 0; border: none; background: transparent;
  display: flex; align-items: center; justify-content: center; color: var(--ink-faint); cursor: pointer;
}
.password-toggle-btn:hover { color: var(--ink-soft); }

/* نوار باریک بارگذاری صفحه (بالای صفحه) — رجوع کنید به initPageLoadingIndicator در main.js */
.page-loading-bar {
  position: fixed; top: 0; right: 0; left: 0; height: 3px; z-index: 9999;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  width: 0%; opacity: 0; pointer-events: none;
  transition: width 4s cubic-bezier(0.1, 0.7, 0.3, 1), opacity .2s ease;
}
.page-loading-bar.is-active { opacity: 1; width: 78%; }

/* دکمه‌ی تعویض حالت تیره/روشن — همان ظاهر بقیه‌ی دکمه‌های آیکونیِ نوار بالا */
[data-theme-toggle] svg { display: block; }
textarea.form-input { resize: vertical; min-height: 80px; }
.form-help { font-size: 11.5px; color: var(--ink-faint); }
.form-error { font-size: 11.5px; color: var(--danger); }

/* ---------------------------------------------------------------------
   Jalali date picker (progressive enhancement of input[type=date])
   --------------------------------------------------------------------- */
.jalali-date-wrap { position: relative; display: flex; align-items: stretch; width: 100%; }
.jalali-native-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: 0;
  border: 0; opacity: 0; overflow: hidden; pointer-events: none;
}
.jalali-display-input { flex: 1; min-width: 0; cursor: pointer; padding-left: 34px; }
.jalali-display-input[disabled] { cursor: not-allowed; opacity: .6; }
.jalali-date-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; cursor: pointer; line-height: 1; pointer-events: none;
  color: var(--ink-faint);
}
.jalali-date-icon svg { width: 100%; height: 100%; display: block; }

.jalali-cal-popup {
  z-index: 200; width: 268px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 12px;
}
.jalali-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.jalali-cal-title { font-weight: 700; font-size: 13.5px; }
.jalali-cal-nav {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-alt); font-size: 15px; display: flex; align-items: center; justify-content: center;
}
.jalali-cal-nav:hover { background: var(--accent-soft); border-color: var(--accent); }
.jalali-cal-selects { display: flex; gap: 4px; flex: 1; justify-content: center; min-width: 0; }
.jalali-cal-select {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 700; color: var(--ink);
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 4px; cursor: pointer; min-width: 0;
}
.jalali-cal-select-year { font-family: var(--font-mono); }
.jalali-cal-select:hover, .jalali-cal-select:focus { border-color: var(--accent); outline: none; }
.jalali-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.jalali-cal-wd { text-align: center; font-size: 11px; color: var(--ink-faint); font-weight: 600; padding: 4px 0; }
.jalali-cal-day {
  height: 32px; border-radius: 8px; border: 1px solid transparent; background: transparent;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink);
}
.jalali-cal-day:hover { background: var(--surface-alt); }
.jalali-cal-day-empty { pointer-events: none; }
.jalali-cal-day.is-today { border-color: var(--accent); color: var(--accent-dark); font-weight: 700; }
.jalali-cal-day.is-selected { background: var(--accent); color: #06231f; font-weight: 700; }
.jalali-cal-footer {
  display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.jalali-cal-today-btn, .jalali-cal-clear-btn {
  font-size: 12px; font-weight: 600; background: transparent; border: none; padding: 4px 6px;
}
.jalali-cal-today-btn { color: var(--accent-dark); }
.jalali-cal-clear-btn { color: var(--ink-faint); }
.jalali-cal-today-btn:hover, .jalali-cal-clear-btn:hover { text-decoration: underline; }
.form-check-row { display: flex; align-items: center; gap: 8px; }
.checkbox-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  max-height: 260px; overflow-y: auto; padding: 12px; border: 1px solid var(--border);
  border-radius: 9px; background: var(--surface-alt);
}
@media (max-width: 700px) { .checkbox-grid { grid-template-columns: 1fr; } }
.checkbox-tile {
  display: flex; align-items: center; gap: 8px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12.5px;
}
.weekday-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.weekday-picker label {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; font-size: 12.5px;
  background: var(--surface-alt); cursor: pointer; display: flex; gap: 6px; align-items: center;
}
.weekday-picker input:checked + span, .weekday-picker input:checked ~ span {}
.weekday-picker label:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

/* Score picker (0–10 radio pills + "no opinion") — mentor/teacher report forms */
.score-picker { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.score-picker label {
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; font-size: 12.5px;
  background: var(--surface-alt); cursor: pointer; display: flex; gap: 5px; align-items: center;
  font-family: var(--font-mono);
}
.score-picker label:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.score-picker label.score-pick-na { font-family: var(--font-body); color: var(--ink-faint); border-style: dashed; }
.score-picker label.score-pick-na:has(input:checked) { border-style: solid; }

/* Attendance status picker — همان الگوی score-picker، رنگ‌بندی‌شده بر اساس وضعیت */
.status-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.status-picker label {
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; font-size: 12.5px;
  background: var(--surface-alt); cursor: pointer; display: flex; gap: 5px; align-items: center; white-space: nowrap;
}
.status-pick-present:has(input:checked) { background: var(--success-soft); border-color: var(--success); color: #1c714b; font-weight: 700; }
.status-pick-absent:has(input:checked) { background: var(--danger-soft); border-color: var(--danger); color: #99282c; font-weight: 700; }
.status-pick-excused:has(input:checked) { background: var(--info-soft); border-color: var(--info); color: #29459e; font-weight: 700; }
.status-pick-late:has(input:checked), .status-pick-early_leave:has(input:checked) { background: var(--warn-soft); border-color: var(--warn); color: #8a5a10; font-weight: 700; }

.form-actions { display: flex; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }

/* ---------------------------------------------------------------------
   Wizard stepper
   --------------------------------------------------------------------- */
.stepper { display: flex; align-items: center; margin-bottom: 26px; max-width: 880px; }
.step { display: flex; align-items: center; gap: 8px; flex: 1; position: relative; }
.step:not(:last-child)::after {
  content: ""; flex: 1; height: 2px; background: var(--border); margin: 0 6px;
}
.step.done:not(:last-child)::after { background: var(--accent); }
.step .num {
  width: 26px; height: 26px; border-radius: 50%; background: var(--surface-alt); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-faint); flex-shrink: 0;
}
.step.active .num { background: var(--accent); border-color: var(--accent); color: #06231f; font-weight: 700; }
.step.done .num { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.step .lbl { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.step.active .lbl { color: var(--ink); font-weight: 700; }

.wizard-panel { display: none; }
.wizard-panel.active { display: block; }

/* ---------------------------------------------------------------------
   Login page
   --------------------------------------------------------------------- */
.login-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--sidebar);
  background-image:
    linear-gradient(var(--sidebar-alt) 1px, transparent 1px),
    linear-gradient(90deg, var(--sidebar-alt) 1px, transparent 1px);
  background-size: 42px 42px;
  padding: 20px;
}
.login-card {
  width: 100%; max-width: 380px; background: var(--surface); border-radius: 16px;
  padding: 34px 30px; box-shadow: var(--shadow-md);
}
.login-card .mark {
  width: 44px; height: 44px; border-radius: 11px; margin-bottom: 18px;
  background: linear-gradient(155deg, var(--accent), var(--accent-dark));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; color: #06231f; font-size: 18px;
}
.login-card h1 { font-size: 19px; margin-bottom: 4px; }
.login-card p.sub { color: var(--ink-soft); font-size: 13px; margin-bottom: 24px; }
.login-card .form-group { margin-bottom: 14px; }

/* ---------------------------------------------------------------------
   Misc
   --------------------------------------------------------------------- */
.empty-state {
  text-align: center; padding: 50px 20px; color: var(--ink-faint);
}
/* آیکون حالت خالی: به‌جای متن «[ ]» (که در برخی مرورگرها/فونت‌ها به‌شکل یک نویسه‌ی
   نامفهوم رندر می‌شد)، یک آیکون جعبه‌ی خالی به‌صورت SVG با mask نمایش داده می‌شود؛
   چون فقط CSS است، همه‌ی جاهایی که از markup «glyph» استفاده می‌کنند یک‌جا اصلاح می‌شوند. */
.empty-state .glyph {
  width: 40px; height: 40px; margin: 0 auto 10px;
  font-size: 0; line-height: 0; color: var(--border);
}
.empty-state .glyph::before {
  content: ""; display: block; width: 100%; height: 100%;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l2-5h14l2 5M3 9v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V9M3 9h5.5a2.5 2.5 0 0 0 5 0H21'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l2-5h14l2 5M3 9v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V9M3 9h5.5a2.5 2.5 0 0 0 5 0H21'/%3E%3C/svg%3E") center / contain no-repeat;
}
.empty-state p { font-size: 13.5px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab-link {
  padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--ink-faint);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex-shrink: 0;
}
.tab-link.active { color: var(--accent-dark); border-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.pagination { display: flex; gap: 6px; margin-top: 18px; justify-content: center; }
.pagination a, .pagination span {
  padding: 7px 12px; border-radius: 8px; font-size: 12.5px; border: 1px solid var(--border); background: var(--surface);
  font-family: var(--font-mono);
}
.pagination .current { background: var(--accent); color: #06231f; border-color: var(--accent); font-weight: 700; }

.filter-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filter-bar .form-input { width: auto; min-width: 160px; }
.filter-bar form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.profile-header {
  display: flex; align-items: center; gap: 18px; margin-bottom: 22px;
}
.profile-header .avatar-circle { width: 64px; height: 64px; font-size: 22px; }
.profile-header h1 { font-size: 20px; }
.profile-header .meta { color: var(--ink-soft); font-size: 13px; margin-top: 4px; }

.timeline { position: relative; padding-inline-start: 20px; }
.timeline::before { content: ""; position: absolute; top: 4px; bottom: 4px; right: 5px; width: 1px; background: var(--border); }
.timeline-item { position: relative; padding-bottom: 20px; padding-inline-end: 18px; }
.timeline-item::before {
  content: ""; position: absolute; right: -20px; top: 4px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border);
}
.timeline-item .t { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.timeline-item .title { font-size: 13.5px; font-weight: 600; margin-top: 2px; }

.notif-panel {
  position: absolute; left: 24px; top: 60px; width: 320px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-md); z-index: 40; display: none; overflow: hidden;
}
.notif-panel.open { display: block; }
.notif-panel .head { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 13px; }
.notif-item { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.notif-item:last-child { border-bottom: none; }
.notif-item .title { font-weight: 600; margin-bottom: 3px; }
.notif-item .time { color: var(--ink-faint); font-family: var(--font-mono); font-size: 10.5px; }
.push-subscribe-btn {
  width: 100%; text-align: right; background: transparent; border: none; border-bottom: 1px solid var(--border);
  font-family: inherit; font-weight: 600; color: var(--accent-dark); cursor: pointer;
}
.push-subscribe-btn:hover { background: var(--accent-soft); }

.progress-chart { width: 100%; height: auto; display: block; }
.progress-chart circle { cursor: pointer; }

/* نمودار میله‌ای بدون کتابخانه‌ی جاوااسکریپتی (رجوع کنید به build_bar_chart در
   evaluations/services.py) — استفاده‌شده برای «روند ثبت‌نام دانش‌آموزان» در داشبورد. */
.bar-chart { width: 100%; height: auto; display: block; }
.bar-chart-baseline { stroke: var(--border); stroke-width: 1; }
.bar-chart rect { transition: opacity .12s ease; cursor: pointer; }
.bar-chart rect:hover { opacity: .8; }
.bar-chart-label { font-size: 11px; fill: var(--ink-faint); text-anchor: middle; font-family: var(--font-body); }
.bar-chart-value { font-size: 11px; fill: var(--ink); text-anchor: middle; font-family: var(--font-mono); font-weight: 700; }

/* نمودار حلقه‌ای (دونات) — رجوع کنید به build_donut_chart در evaluations/services.py */
.donut-total { font-family: var(--font-mono); font-size: 22px; font-weight: 700; fill: var(--ink); }
.donut-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 160px; }
.donut-legend-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.donut-legend-row .swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.donut-legend-row .cell-sub { margin-inline-start: auto; }

/* ---------------------------------------------------------------------
   کارت‌های «مهارت» در بخش آموزشیِ کارت دانش‌آموز (رجوع کنید به
   student_skill_breakdown در evaluations/services.py) — هر کارت یک سوالِ
   امتیازیِ فرم ارزیابی است: نمره‌ی فعلی به‌صورت نوار مقیاس ۰ تا ۱۰ + روند
   چند هفته‌ی اخیر، تا برای خانواده هم قابل‌فهم و هم دیدنی باشد.
   --------------------------------------------------------------------- */
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.skill-card {
  padding: 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 8px;
}
.skill-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.skill-card-title { font-weight: 700; font-size: 13.5px; line-height: 1.5; min-width: 0; flex: 1; }
.skill-card-score { display: flex; align-items: baseline; gap: 4px; flex-shrink: 0; }
.skill-card-score .num { font-family: var(--font-mono); font-weight: 700; font-size: 17px; }
.skill-card-score .max { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.skill-scale { position: relative; height: 8px; border-radius: 5px; background: var(--surface-alt); overflow: hidden; }
.skill-scale-fill { position: absolute; inset: 0; border-radius: 5px; transition: width .2s ease; }
.skill-scale-fill.good { background: var(--success); }
.skill-scale-fill.mid { background: var(--warn); }
.skill-scale-fill.low { background: var(--danger); }
.skill-card-delta { font-size: 11.5px; font-family: var(--font-mono); }
.skill-card-delta.up { color: #1c714b; }
.skill-card-delta.down { color: #99282c; }
.skill-card-delta.flat { color: var(--ink-faint); }
.skill-card .progress-chart { height: 48px; }
.skill-card { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.skill-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.skill-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------------
   مودال روند مهارت — با کلیک روی هر کارت مهارت باز می‌شود. هر مودال خودش
   یک overlay کامل و مستقل است (با hidden نمایش/مخفی می‌شود) تا نیازی به
   هماهنگی بین دو بخش include‌شده‌ی «مهارت‌های منتور/استاد» در صفحه نباشد.
   --------------------------------------------------------------------- */
.skill-modal {
  position: fixed; inset: 0; background: rgba(10, 14, 20, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  z-index: 200;
}
.skill-modal[hidden] { display: none; }
.skill-modal-panel {
  background: var(--surface); border-radius: var(--radius); max-width: 680px; width: 100%;
  max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-md); padding: 22px;
}
.skill-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.skill-modal-title { font-size: 15.5px; font-weight: 800; line-height: 1.6; min-width: 0; flex: 1; }
.skill-modal-close {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface-alt); color: var(--ink-soft); font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.skill-modal-close:hover { background: var(--danger-soft); color: #99282c; border-color: transparent; }
.skill-modal-sub { font-size: 12.5px; color: var(--ink-faint); margin-bottom: 18px; }
.skill-modal-chart { width: 100%; height: auto; margin-bottom: 8px; }
.skill-modal-chart .grid-line { stroke: var(--border); stroke-width: 1; }
.skill-modal-chart .grid-label { fill: var(--ink-faint); font-size: 9px; font-family: var(--font-mono); }
.skill-modal-chart .point-value { fill: var(--ink); font-size: 10px; font-weight: 700; font-family: var(--font-mono); }
.skill-modal-chart .point-date { fill: var(--ink-faint); font-size: 9px; font-family: var(--font-mono); }
.skill-modal-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 12.5px; }
.skill-modal-table th { text-align: start; color: var(--ink-faint); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.skill-modal-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); }
.skill-modal-table tr:last-child td { border-bottom: none; }

/* ---------------------------------------------------------------------
   Weekly report boxes (mentor panel) — grid of week boxes + sequential
   student survey flow. Top accent bar reuses the .stat-card::before
   language so status reads at a glance without leaning on the badge text.
   --------------------------------------------------------------------- */
.week-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.week-box {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 12px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.week-box::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--border); }
a.week-box:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.week-box .num { font-family: var(--font-mono); font-size: 21px; font-weight: 800; line-height: 1.1; }
.week-box .range { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); }
.week-box .count { font-size: 10.5px; color: var(--ink-soft); margin-top: 6px; }
.week-box .badge { align-self: flex-start; margin-top: 4px; padding: 2px 8px; font-size: 10px; }

.week-box.is-active::before { background: var(--accent); }
.week-box.is-active { background: var(--accent-soft); border-color: var(--accent); }
.week-box.is-unlocked::before { background: var(--warn); }
.week-box.is-unlocked { background: var(--warn-soft); border-color: var(--warn); }
.week-box.is-missed::before { background: var(--danger); }
.week-box.is-missed { background: var(--danger-soft); border-color: var(--danger); }
.week-box.is-completed_locked::before { background: var(--ink-faint); }
.week-box.is-completed_locked { opacity: .82; }
.week-box.is-future { opacity: .5; }

.week-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; font-size: 12px; color: var(--ink-soft); }
.week-legend span { display: inline-flex; align-items: center; gap: 5px; }
.week-legend .dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex-shrink: 0; }

.student-pill-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.student-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; border: 1px solid var(--border); background: var(--surface-alt); color: var(--ink-soft);
  text-decoration: none; max-width: 160px;
}
.student-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-pill:hover { border-color: var(--accent); }
.student-pill.is-current { background: var(--accent); border-color: var(--accent); color: #06231f; font-weight: 700; }
.student-pill.is-done { background: var(--success-soft); border-color: #b9e9d1; color: #1c714b; }

.progress-track { height: 6px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; margin-bottom: 18px; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .2s ease; }

/* ---------------------------------------------------------------------
   Attendance — quick check-in/check-out buttons (mentor panel)
   --------------------------------------------------------------------- */
.attendance-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.attendance-actions form { display: inline-flex; }
.btn-checkin.is-recorded, .btn-checkout.is-recorded {
  background: var(--success-soft); border-color: #b9e9d1; color: #1c714b; font-family: var(--font-mono);
}

/* اصلاح دستی ساعت ورود/خروج، کنار دکمه‌های سریع — به‌صورت پیش‌فرض بسته (details/summary)
   تا رابط اصلی (تک‌کلیک) شلوغ نشود، ولی همیشه یک کلیک آن‌طرف‌تر در دسترس باشد. */
.attendance-manual-time { margin-top: 6px; }
.attendance-manual-time summary {
  font-size: 11.5px; color: var(--ink-faint); cursor: pointer; user-select: none;
}
.attendance-manual-time summary:hover { color: var(--accent-ink); }
.attendance-manual-time input[type="time"] { padding: 4px 8px; font-size: 12.5px; }

/* ---------------------------------------------------------------------
   Alert row with a trailing action (banner + button) — used on the
   mentor class page for "today's session" / "active week" notices.
   --------------------------------------------------------------------- */
.alert-row.with-action { flex-wrap: wrap; }
.alert-row .msg-text { flex: 1 1 200px; min-width: 0; }
.alert-row .msg-action { flex-shrink: 0; }

/* ردیف جلسه‌ی کلاس: تگ+موضوع یک سطر، و دکمه‌های عملیات (ویرایش/قفل مجدد/
   لغو/انتقال) همیشه روی سطر جدا و خودشان با هم می‌شکنند — به‌جای بیرون‌زدن
   از کارت وقتی موضوع جلسه طولانی است یا صفحه باریک می‌شود. */
.alert-row.session-row { flex-wrap: wrap; }
.alert-row.session-row > .row-actions { flex-wrap: wrap; justify-content: flex-end; flex-basis: 100%; }
.alert-row.session-row .session-transfer-form { flex-wrap: wrap; }

/* =====================================================================
   Responsive / Mobile
   ===================================================================== */

/* Hamburger button — hidden on desktop, shown under the drawer breakpoint */
.sidebar-toggle {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 4px; width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--surface);
}
.sidebar-toggle span { width: 18px; height: 2px; background: var(--ink-soft); border-radius: 2px; }

/* Backdrop behind the drawer */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0; background: rgba(16, 18, 28, .45); z-index: 45;
}

/* ---- ≤960px: sidebar becomes an off-canvas drawer ---- */
@media (max-width: 960px) {
  .sidebar-toggle { display: flex; }

  .sidebar {
    position: fixed; top: 0; right: 0; height: 100dvh;
    width: 84%; max-width: 300px; z-index: 50;
    transform: translateX(100%);
    transition: transform .22s ease;
    box-shadow: var(--shadow-md);
  }
  .app-shell.sidebar-open .sidebar { transform: translateX(0); }
  .app-shell.sidebar-open .sidebar-overlay { display: block; }

  .topbar { padding: 0 14px; gap: 10px; }
  .topbar-search { width: auto; flex: 1; min-width: 0; }
  .content { padding: 18px 16px 40px; }

  .grid-4, .grid-3, .grid-2 { grid-template-columns: repeat(2, 1fr); }

  .week-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- ≤640px: phones — collapse to single column, simplify chrome ---- */
@media (max-width: 640px) {
  html, body { font-size: 13.5px; }

  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  .page-head { flex-direction: column; align-items: flex-start; }
  .page-head-actions { width: 100%; }
  .page-head-actions .btn { flex: 1; }

  .user-chip .who { display: none; }
  .topbar-right { gap: 10px; }

  /* Tables scroll horizontally instead of squeezing columns unreadable.
     Narrow tables (few columns) still fit the screen with no scroll. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
  table.data-table th, table.data-table td { white-space: nowrap; }
  table.data-table .cell-sub { white-space: normal; }

  /* راهنمای بصری: وقتی جدول از عرض صفحه بیرون می‌زند، یک سایه‌ی محو در لبه‌ی
     شروع محتوا (چپ، چون جهت صفحه راست‌به‌چپ است) نشان می‌دهد که با کشیدن
     انگشت می‌شود ستون‌های بیشتری را دید — بدون این، کاربر موبایل متوجه
     نمی‌شد که جدول اصلاً قابل اسکرول است. */
  .table-wrap::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 22px;
    background: linear-gradient(to left, transparent, var(--surface));
    pointer-events: none;
  }
  .table-wrap.is-scroll-end::after { display: none; }

  .form-card { padding: 18px; }
  .step .lbl { display: none; }

  .notif-panel { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; }

  .profile-header { flex-wrap: wrap; }

  /* Topbar gets tight on phones — icon-only back button, no search placeholder crowding */
  .topbar { padding: 0 10px; gap: 6px; }
  .topbar-left { gap: 6px; }
  .back-btn { padding: 0 10px; }

  .week-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .week-box { padding: 11px 9px 9px; }
  .week-box .num { font-size: 18px; }

  /* Banner rows and per-row action buttons wrap instead of overflowing narrow screens */
  .alert-row { flex-wrap: wrap; }
  .alert-row.with-action .msg-action { width: 100%; }
  .alert-row.with-action .msg-action .btn { width: 100%; }
  .row-actions { flex-wrap: wrap; justify-content: flex-start; }
}

/* ---- ≤480px: small phones ---- */
@media (max-width: 480px) {
  .content { padding: 14px 12px 32px; }
  .login-card { padding: 26px 20px; }
  .back-btn-label { display: none; }
  .back-btn { padding: 0 9px; }
  .jalali-cal-popup { width: 240px; padding: 10px; }
  .jalali-cal-day { height: 28px; font-size: 11.5px; }
  .stat-card .value { font-size: 24px; }

  .week-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------
   کارنامه (Report card) — نوار مقیاس، کارت‌های ریز آمار، متن نظر استاد،
   فیلد لینک قابل کپی. هم در پنل ادمین/استاد و هم در صفحه‌ی عمومی خانواده استفاده می‌شود.
   --------------------------------------------------------------------- */
.rc-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-radius: var(--radius); padding: 22px 24px; margin-bottom: 18px; flex-wrap: wrap;
}
.rc-hero.status-pass { background: var(--success-soft); }
.rc-hero.status-fail { background: var(--danger-soft); }
.rc-hero.status-incomplete, .rc-hero.status-nodata { background: var(--surface-alt); }
.rc-hero .rc-score { font-family: var(--font-mono); font-size: 42px; font-weight: 800; line-height: 1; }
.rc-hero .rc-score small { font-size: 15px; font-weight: 600; color: var(--ink-faint); margin-inline-end: 6px; }
.rc-hero .rc-status { font-size: 15px; font-weight: 700; margin-top: 6px; }
.rc-hero .rc-caption { font-size: 12.5px; color: var(--ink-faint); max-width: 260px; }
.status-pass .rc-score, .status-pass .rc-status { color: #1c714b; }
.status-fail .rc-score, .status-fail .rc-status { color: #99282c; }
.status-incomplete .rc-score, .status-incomplete .rc-status, .status-nodata .rc-score, .status-nodata .rc-status { color: var(--ink-soft); }

.rc-mini-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.rc-mini-grid .rc-mini { flex: 1 1 calc(25% - 8px); }
@media (max-width: 640px) { .rc-mini-grid .rc-mini { flex: 1 1 calc(50% - 5px); } }
.rc-mini {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 10px; text-align: center;
}
.rc-mini .rc-mini-label { font-size: 11.5px; color: var(--ink-faint); margin-bottom: 6px; }
.rc-mini .rc-mini-value { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--ink); }
.rc-mini .rc-mini-sub { font-size: 10.5px; color: var(--ink-faint); margin-top: 3px; }

.rc-scale-row { margin-bottom: 18px; }
.rc-scale-row:last-child { margin-bottom: 0; }
.rc-scale-label { font-size: 13px; color: var(--ink); font-weight: 600; line-height: 1.7; margin-bottom: 8px; }
.rc-scale-meter { display: flex; align-items: center; gap: 10px; }
.rc-scale-value {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; flex-shrink: 0;
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 10px; white-space: nowrap;
}
.rc-scale-track { flex: 1; height: 9px; border-radius: 999px; background: var(--border); overflow: hidden; }
.rc-scale-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width .4s ease; }
.rc-scale-fill.tier-good { background: var(--success); }
.rc-scale-fill.tier-mid { background: var(--warn); }
.rc-scale-fill.tier-low { background: var(--danger); }
.rc-scale-row.overall .rc-scale-label { font-weight: 800; }
.rc-scale-row.overall .rc-scale-track { height: 12px; }
.rc-scale-row.overall .rc-scale-value { background: var(--accent-soft); border-color: transparent; color: var(--accent-dark); }

.rc-quote {
  background: var(--surface-alt); border-radius: 12px; padding: 16px 18px;
  border-inline-end: 4px solid var(--accent); font-size: 14px; line-height: 2; color: var(--ink);
  white-space: pre-line;
}

.rc-copy-field {
  display: flex; align-items: center; gap: 8px; background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
}
.rc-copy-field input {
  flex: 1; border: none; background: transparent; outline: none; font-family: var(--font-mono);
  font-size: 12.5px; color: var(--ink-soft); min-width: 0;
}

/* ---------------------------------------------------------------------
   صفحه‌ی عمومی کارنامه (لینک خانواده) — مستقل از base.html، موبایل‌محور
   --------------------------------------------------------------------- */
.rcp-page { max-width: 720px; margin: 0 auto; padding: 0 0 40px; }
.rcp-header {
  background: linear-gradient(155deg, var(--accent), var(--accent-dark)); color: #fff;
  padding: 28px 20px 24px; border-radius: 0 0 22px 22px; margin-bottom: 18px;
}
.rcp-header-top { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.rcp-logo {
  width: 52px; height: 52px; border-radius: 14px; background: #fff; color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px;
  flex-shrink: 0; overflow: hidden;
}
.rcp-logo img { width: 100%; height: 100%; object-fit: contain; }
.rcp-school-name { font-size: 16px; font-weight: 800; }
.rcp-subtitle { font-size: 12.5px; opacity: .9; margin-top: 2px; }
.rcp-manager { font-size: 11.5px; opacity: .85; margin-top: 10px; }
.rcp-body { padding: 0 16px; }
.rcp-section { margin-bottom: 22px; }
.rcp-section-title {
  font-size: 14.5px; font-weight: 800; color: var(--ink); margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.rcp-section-title::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--accent); display: inline-block; }
.rcp-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px;
  box-shadow: var(--shadow-sm);
}
.rcp-empty { color: var(--ink-faint); font-size: 13px; padding: 6px 2px; }
.rcp-actions { display: flex; gap: 10px; padding: 4px 16px 4px; flex-wrap: wrap; }
.rcp-actions .btn { flex: 1; min-width: 140px; }
.rcp-footer { text-align: center; font-size: 11px; color: var(--ink-faint); margin-top: 24px; padding: 0 16px; }
@media (max-width: 480px) {
  .rcp-header { border-radius: 0 0 16px 16px; padding: 22px 16px 18px; }
  .rc-hero { padding: 18px; }
  .rc-hero .rc-score { font-size: 34px; }
}