/*
  Scoped stylesheet for the SchoolAdminModule (ثبت‌نام/تایید مدیر مدرسه).
  Every class and CSS custom property is prefixed with "sam-" so this file is safe to
  include globally in Faradanesh without clashing with existing .btn/.card/.badge/--c-* etc.
  that other modules (like Books) may already define.
  Visually it reproduces the original students.html design (same colors/spacing/radius).
*/

/* 🔴 رفعِ باگِ واقعیِ گسترده (۶ سپتامبر ۲۰۲۶، طبقِ گزارشِ کاربر: «مودال‌ها کاملاً شفاف و
   بی‌رنگ‌اند»). قبلاً همه‌ی متغیرهایِ `--sam-*` فقط داخلِ `.sam-page { ... }` تعریف می‌شدند.
   ده‌ها مودال در سراسرِ پروژه (طبقِ یک الگویِ رایج و آگاهانه — جلوگیری از بریده‌شدنِ مودال
   توسطِ `overflow:hidden`ِ والد) عمداً به‌عنوانِ عنصرِ هم‌سطحِ *بعد* از بسته‌شدنِ همان
   `</div class="sam-page">`، نه داخلِ آن، نوشته شده بودند — یعنی به هیچ‌کدام از این متغیرها
   دسترسی نداشتند: `var(--sam-surface)` بدونِ مقدار به چیزی معادلِ transparent می‌رسید. این
   شاملِ حداقل ۷ فایلِ دیگر هم می‌شد (SchoolAdminTeachersPage، SchoolAdminApprovalQueuePage،
   SchoolAdminClassSectionsPage، TeacherApprovalQueuePage، SchoolCounselorApprovalQueuePage،
   و مودال‌هایِ خودِ ChatModule)، نه فقط سه موردی که کاربر گزارش کرد.
   رفع ریشه‌ای: همان مقادیر، یک‌بارِ دیگر رویِ `:root` هم تعریف شدند — پس هر عنصری در هر
   جایِ DOM (چه داخلِ `.sam-page` باشد چه بیرونش) این متغیرها را می‌بیند. `data-theme="dark"`
   بررسی شد و در کلِ پروژه هیچ‌جا واقعاً توسطِ جاوااسکریپت تنظیم نمی‌شود (یعنی حالتِ تیره
   عملاً هرگز فعال نمی‌شده)، پس اضافه‌کردنِ این fallback هیچ رفتاری را نمی‌شکند. */
:root {
  --sam-bg: #f5f5f3;
  --sam-surface: #ffffff;
  --sam-surface-2: #fafaf8;
  --sam-border: rgba(0,0,0,0.08);
  --sam-border-strong: rgba(0,0,0,0.14);
  --sam-text: #1a1a18;
  --sam-text-2: #5a5a56;
  --sam-text-3: #9a9994;
  --sam-accent: #2563eb;
  --sam-accent-bg: #eff6ff;
  --sam-accent-text: #1d4ed8;
  --sam-accent-border: #bfdbfe;
  --sam-success: #16a34a;
  --sam-success-bg: #f0fdf4;
  --sam-success-text: #15803d;
  --sam-success-border: #bbf7d0;
  --sam-warning: #d97706;
  --sam-warning-bg: #fffbeb;
  --sam-warning-text: #b45309;
  --sam-warning-border: #fde68a;
  --sam-danger: #dc2626;
  --sam-danger-bg: #fef2f2;
  --sam-danger-text: #b91c1c;
  --sam-danger-border: #fecaca;
  --sam-purple: #7c3aed;
  --sam-purple-bg: #f5f3ff;
  --sam-radius-sm: 6px;
  --sam-radius: 10px;
  --sam-radius-lg: 14px;
}

.sam-page {
  --sam-bg: #f5f5f3;
  --sam-surface: #ffffff;
  --sam-surface-2: #fafaf8;
  --sam-border: rgba(0,0,0,0.08);
  --sam-border-strong: rgba(0,0,0,0.14);
  --sam-text: #1a1a18;
  --sam-text-2: #5a5a56;
  --sam-text-3: #9a9994;
  --sam-accent: #2563eb;
  --sam-accent-bg: #eff6ff;
  --sam-accent-text: #1d4ed8;
  --sam-accent-border: #bfdbfe;
  --sam-success: #16a34a;
  --sam-success-bg: #f0fdf4;
  --sam-success-text: #15803d;
  --sam-success-border: #bbf7d0;
  --sam-warning: #d97706;
  --sam-warning-bg: #fffbeb;
  --sam-warning-text: #b45309;
  --sam-warning-border: #fde68a;
  --sam-danger: #dc2626;
  --sam-danger-bg: #fef2f2;
  --sam-danger-text: #b91c1c;
  --sam-danger-border: #fecaca;
  --sam-purple: #7c3aed;
  --sam-purple-bg: #f5f3ff;
  --sam-radius-sm: 6px;
  --sam-radius: 10px;
  --sam-radius-lg: 14px;

  direction: rtl;
  font-family: 'Vazirmatn', system-ui, sans-serif;
  color: var(--sam-text);
  font-size: 13px;
  line-height: 1.5;
}

/* dark theme: apply data-theme="dark" on any ancestor (e.g. <html> or .sam-page itself) */
[data-theme="dark"] .sam-page, .sam-page[data-theme="dark"] {
  --sam-bg: #15161a;
  --sam-surface: #1c1d22;
  --sam-surface-2: #202127;
  --sam-border: rgba(255,255,255,0.08);
  --sam-border-strong: rgba(255,255,255,0.14);
  --sam-text: #f1f1ef;
  --sam-text-2: #b3b3ad;
  --sam-text-3: #76766f;
  --sam-accent-bg: rgba(37,99,235,0.14);
  --sam-success-bg: rgba(22,163,74,0.14);
  --sam-warning-bg: rgba(217,119,6,0.14);
  --sam-danger-bg: rgba(220,38,38,0.14);
}

.sam-page * { box-sizing: border-box; }

/* ── Page header ── */
.sam-page-hdr { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.sam-page-title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.sam-page-desc { font-size: 12px; color: var(--sam-text-2); margin-top: 3px; }

/* ── بنر راهنمای دامنه (مدیر مدرسه، تایید معلمان) — ۲۷ اوت ۲۰۲۶ ── */
.sam-info-banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--sam-accent-bg); border: 1px solid var(--sam-accent-border);
  color: var(--sam-accent-text); border-radius: var(--sam-radius); padding: 10px 14px;
  font-size: 12px; margin-bottom: 16px; line-height: 1.7;
}
.sam-info-banner i { font-size: 18px; flex-shrink: 0; }

/* ── Stats ── */
.sam-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.sam-stat-card { background: var(--sam-surface); border: 1px solid var(--sam-border); border-radius: var(--sam-radius); padding: 16px; transition: border-color .15s ease; }
.sam-stat-card:hover { border-color: var(--sam-border-strong); }
.sam-stat-icon { width: 30px; height: 30px; border-radius: var(--sam-radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 15px; }
.sam-stat-icon.green  { background: var(--sam-success-bg); color: var(--sam-success-text); }
.sam-stat-icon.amber  { background: var(--sam-warning-bg); color: var(--sam-warning-text); }
.sam-stat-icon.blue   { background: var(--sam-accent-bg);  color: var(--sam-accent-text); }
.sam-stat-icon.purple { background: var(--sam-purple-bg);  color: var(--sam-purple); }
.sam-stat-val { font-size: 20px; font-weight: 600; }
.sam-stat-label { font-size: 11px; color: var(--sam-text-2); margin-top: 2px; }

/* ── Card / table ── */
.sam-card { background: var(--sam-surface); border: 1px solid var(--sam-border); border-radius: var(--sam-radius); overflow: hidden; }
.sam-tbl-wrap { overflow-x: auto; }
table.sam-tbl { width: 100%; border-collapse: collapse; }
table.sam-tbl th {
  text-align: right; font-size: 11px; font-weight: 600; color: var(--sam-text-2);
  padding: 10px 14px; border-bottom: 1px solid var(--sam-border); background: var(--sam-surface-2); white-space: nowrap;
}
table.sam-tbl td { padding: 10px 14px; border-bottom: 1px solid var(--sam-border); font-size: 12.5px; vertical-align: middle; }
table.sam-tbl tr:last-child td { border-bottom: none; }
table.sam-tbl tr:hover td { background: var(--sam-bg); }

.sam-mini-avatar {
  width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.sam-row-actions { display: flex; gap: 4px; white-space: nowrap; }
.sam-row-act-btn {
  width: 28px; height: 28px; border: 1px solid var(--sam-border); border-radius: var(--sam-radius-sm);
  background: transparent; color: var(--sam-text-2); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; transition: all .15s ease;
}
.sam-row-act-btn i { font-size: 14px; }
.sam-row-act-btn:hover { background: var(--sam-accent-bg); border-color: var(--sam-accent-border); color: var(--sam-accent); }
.sam-row-act-btn.danger:hover { background: var(--sam-danger-bg); border-color: var(--sam-danger-border); color: var(--sam-danger); }

/* ── Badges ── */
.sam-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500;
  padding: 3px 8px; border-radius: 20px; border: 1px solid transparent; white-space: nowrap;
}
.sam-badge i { font-size: 11px; }
.sam-badge.b-success { background: var(--sam-success-bg); color: var(--sam-success-text); border-color: var(--sam-success-border); }
.sam-badge.b-warning { background: var(--sam-warning-bg); color: var(--sam-warning-text); border-color: var(--sam-warning-border); }
.sam-badge.b-danger  { background: var(--sam-danger-bg);  color: var(--sam-danger-text);  border-color: var(--sam-danger-border); }
.sam-badge.b-gray    { background: #f4f4f2; color: #5a5a56; border-color: #e0e0dc; }

/* ── Buttons ── */
.sam-btn {
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 12.5px; font-weight: 500;
  padding: 0 13px; height: 34px; border-radius: var(--sam-radius-sm, 6px); border: 1px solid var(--sam-border-strong, rgba(0,0,0,0.14));
  background: var(--sam-surface, #ffffff); color: var(--sam-text, #1a1a18); cursor: pointer; transition: all .15s ease;
}
.sam-btn:hover { border-color: var(--sam-text-3, #9a9994); }
.sam-btn i { font-size: 14px; }
.sam-btn-primary { background: var(--sam-accent, #2563eb); border-color: var(--sam-accent, #2563eb); color: #fff; }
.sam-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.sam-btn-danger { background: var(--sam-danger); border-color: var(--sam-danger); color: #fff; }
.sam-btn-danger:hover { background: var(--sam-danger-text); border-color: var(--sam-danger-text); }

/* ── Forms ── */
.sam-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sam-field { display: flex; flex-direction: column; gap: 5px; }
.sam-field label { font-size: 11px; font-weight: 600; color: var(--sam-text-2); letter-spacing: .02em; }
.sam-field input, .sam-field select, .sam-field textarea,
.sam-page > .sam-card input[type="text"], .sam-page select {
  height: 36px; border: 1px solid var(--sam-border-strong); border-radius: var(--sam-radius-sm);
  padding: 0 11px; font-size: 13px; background: var(--sam-surface); color: var(--sam-text);
  font-family: inherit; outline: none; transition: border-color .15s ease;
}
.sam-field input:focus, .sam-field select:focus, .sam-field textarea:focus { border-color: var(--sam-accent); }
.sam-field input::placeholder { color: var(--sam-text-3); }
.sam-form-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sam-border); }

/* ── حالت نمایش فقط‌خواندنی (key/value)، برای Viewer های آینده ── */
.sam-view-list { display: flex; flex-direction: column; }
.sam-view-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--sam-border); font-size: 12.5px; }
.sam-view-row:last-child { border-bottom: none; }
.sam-view-row .vk { color: var(--sam-text-2); }
.sam-view-row .vv { font-weight: 500; }

/* ── Blazor validation ── */
.sam-page .validation-message { color: var(--sam-danger-text); font-size: 11px; margin-top: 2px; display: block; }
.sam-page .validation-summary { background: var(--sam-danger-bg); border: 1px solid var(--sam-danger-border); color: var(--sam-danger-text); border-radius: var(--sam-radius-sm); padding: 10px 12px; font-size: 12px; margin-bottom: 14px; }
.sam-page .validation-summary ul { margin: 0; padding-inline-start: 18px; }


/* ── Responsive ── */
@media (max-width: 720px) {
  .sam-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .sam-form-grid { grid-template-columns: 1fr; }

  .sam-tbl-wrap.responsive table.sam-tbl thead { display: none; }
  .sam-tbl-wrap.responsive table.sam-tbl,
  .sam-tbl-wrap.responsive table.sam-tbl tbody,
  .sam-tbl-wrap.responsive table.sam-tbl tr,
  .sam-tbl-wrap.responsive table.sam-tbl td { display: block; width: 100%; }
  .sam-tbl-wrap.responsive table.sam-tbl tr { border-bottom: 1px solid var(--sam-border); padding: 10px 14px; }
  .sam-tbl-wrap.responsive table.sam-tbl td {
    display: flex; justify-content: space-between; align-items: center; border-bottom: none; padding: 6px 0;
  }
  .sam-tbl-wrap.responsive table.sam-tbl td::before { content: attr(data-label); font-size: 11px; color: var(--sam-text-3); }
}

@media (max-width: 380px) {
  .sam-stats-grid { grid-template-columns: 1fr; }
}

/* ── Registration wizard (specific to SchoolAdminRegisterPage) ── */
.sam-wizard-wrap { max-width: 480px; margin: 40px auto; padding: 0 12px; }
.sam-wizard-card { background: var(--sam-surface); border: 1px solid var(--sam-border); border-radius: var(--sam-radius-lg); padding: 28px 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
.sam-wizard-title { font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 4px; }
.sam-wizard-sub { font-size: 12px; color: var(--sam-text-2); text-align: center; margin-bottom: 22px; }

.sam-steps { display: flex; justify-content: center; gap: 6px; margin-bottom: 24px; }
.sam-step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sam-border-strong); transition: all .2s ease; }
.sam-step-dot.active { background: var(--sam-accent); width: 22px; border-radius: 4px; }
.sam-step-dot.done { background: var(--sam-success); }

.sam-wizard-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.sam-wizard-field label { font-size: 12.5px; font-weight: 600; color: var(--sam-text-2); }
.sam-wizard-field input[type="text"], .sam-wizard-field input[type="tel"], .sam-wizard-field select, .sam-wizard-field textarea {
  border: 1px solid var(--sam-border-strong); border-radius: var(--sam-radius-sm); padding: 0 12px; height: 42px;
  font-size: 13.5px; font-family: inherit; background: var(--sam-surface); color: var(--sam-text);
}
.sam-wizard-field textarea { padding: 10px 12px; height: auto; min-height: 70px; resize: vertical; }
.sam-wizard-field input:focus, .sam-wizard-field select:focus, .sam-wizard-field textarea:focus { outline: none; border-color: var(--sam-accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }

.sam-otp-row { display: flex; gap: 8px; justify-content: center; direction: ltr; margin-bottom: 8px; }
.sam-otp-digit { width: 46px; height: 52px; text-align: center; font-size: 20px; font-weight: 700; border: 1px solid var(--sam-border-strong); border-radius: var(--sam-radius-sm); background: var(--sam-surface); }
.sam-otp-digit:focus { outline: none; border-color: var(--sam-accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }

.sam-choice-row { display: flex; gap: 10px; margin-bottom: 16px; }
.sam-choice-btn { flex: 1; padding: 10px; border-radius: var(--sam-radius-sm); border: 1px solid var(--sam-border-strong); background: var(--sam-surface); font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: center; color: var(--sam-text-2); }
.sam-choice-btn.active { border-color: var(--sam-accent); background: var(--sam-accent-bg); color: var(--sam-accent-text); }

.sam-wizard-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; border-radius: var(--sam-radius-sm); border: 1px solid var(--sam-border-strong); background: var(--sam-surface); color: var(--sam-text); font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.sam-wizard-btn:hover { background: var(--sam-bg); }
.sam-wizard-btn:disabled { opacity: .55; cursor: not-allowed; }
.sam-wizard-btn-primary { background: var(--sam-accent); border-color: var(--sam-accent); color: #fff; }
.sam-wizard-btn-primary:hover { background: #1d4ed8; }
.sam-wizard-btn-ghost { border: none; background: transparent; color: var(--sam-text-2); height: 34px; }

.sam-error-text { color: var(--sam-danger-text); font-size: 12px; text-align: center; margin: 6px 0; }
.sam-hint-text { color: var(--sam-text-3, #9a9994); font-size: 11.5px; text-align: center; margin-top: 10px; }

/* ── آپلود تصویر سردر مدرسه (ویزارد ثبت‌نام مدیر مدرسه) — ناحیه‌ی Drag & Drop از کلاس‌های
   مشترک mpm-dropzone (site.css) استفاده می‌کند؛ اینجا فقط پیش‌نمایش بعد از آپلود مانده. ── */
.sam-school-image-preview {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  border: 1px solid var(--sam-border); border-radius: var(--sam-radius); padding: 10px; background: var(--sam-surface-2);
}
.sam-school-image-preview img {
  width: 100%; max-height: 180px; object-fit: cover; border-radius: var(--sam-radius-sm);
  border: 1px solid var(--sam-border);
}
.sam-school-image-preview .sam-wizard-btn-ghost { width: auto; padding: 0 14px; }

/* ── احراز هویت (کارت ملی + سلفی) در ویزارد ثبت‌نام مدیر مدرسه ── */
.sam-verify-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 6px; }
.sam-verify-dropzone { min-height: 150px; }
.sam-verify-grid .sam-school-image-preview img { max-height: 150px; }
@media (max-width: 520px) {
  .sam-verify-grid { grid-template-columns: 1fr; }
}

.sam-success-box { text-align: center; padding: 20px 6px; }
.sam-success-icon { width: 60px; height: 60px; border-radius: 50%; background: var(--sam-success-bg); color: var(--sam-success-text); display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 14px; }

/* ── Approval queue table extras ── */
.sam-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--sam-border); }
.sam-tab { padding: 9px 16px; font-size: 12.5px; font-weight: 600; color: var(--sam-text-2); cursor: pointer; border-bottom: 2px solid transparent; }
.sam-tab.active { color: var(--sam-accent-text); border-bottom-color: var(--sam-accent); }

/* ── Dashboard extras ── */
.sam-dash-hero { background: linear-gradient(135deg, var(--sam-accent-bg), var(--sam-surface)); border: 1px solid var(--sam-border); border-radius: var(--sam-radius-lg); padding: 24px; margin-bottom: 20px; }
.sam-soon-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--sam-warning-bg); color: var(--sam-warning-text); border: 1px solid var(--sam-warning-border); border-radius: 20px; padding: 2px 10px; font-size: 10.5px; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   الگوی استاندارد ماژول‌ها (Toolbar/Skeleton/EmptyState/Modal/Toast) — دقیقاً
   هم‌شکل GeoModule، طبق اصل «همه‌ی ماژول‌ها باید یه الگوی مشترک داشته باشن».
   ══════════════════════════════════════════════════════════════════════ */

/* ── Toolbar (جستجو با Debounce) ── */
.sam-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--sam-border); flex-wrap: wrap; }
.sam-search-box { display: flex; align-items: center; gap: 8px; background: var(--sam-bg); border: 1px solid var(--sam-border); border-radius: var(--sam-radius-sm); padding: 0 10px; height: 34px; flex: 1; min-width: 180px; transition: border-color .15s ease; }
.sam-search-box:focus-within { border-color: var(--sam-accent); }
.sam-search-box i { font-size: 15px; color: var(--sam-text-3); flex-shrink: 0; }
.sam-search-box input { border: none; outline: none; background: transparent; font-family: inherit; font-size: 12.5px; color: var(--sam-text); width: 100%; height: 100%; }
.sam-search-box input::placeholder { color: var(--sam-text-3); }

/* ── Skeleton loading ── */
.sam-skeleton { padding: 6px 14px; }
.sam-skeleton-row { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--sam-border); }
.sam-skeleton-row:last-child { border-bottom: none; }
.sam-skeleton-cell { height: 13px; border-radius: 4px; flex: 1; background: linear-gradient(90deg, var(--sam-bg) 25%, var(--sam-border) 37%, var(--sam-bg) 63%); background-size: 400% 100%; animation: samShimmer 1.4s ease infinite; }
.sam-skeleton-cell.narrow { flex: 0.4; }
@keyframes samShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── Empty state ── */
.sam-empty { text-align: center; padding: 48px 20px; color: var(--sam-text-3); }
.sam-empty i { font-size: 38px; margin-bottom: 12px; display: block; opacity: 0.4; }
.sam-empty p { font-size: 13px; margin-bottom: 16px; }
.sam-empty .sam-btn { display: inline-flex; }

/* ── Toast ── */
.sam-toast-wrap { position: fixed; bottom: 24px; left: 24px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; }
.sam-toast { display: flex; align-items: center; gap: 10px; background: var(--sam-text); color: #fff; padding: 12px 16px; border-radius: var(--sam-radius); font-size: 13px; font-weight: 500; cursor: pointer; animation: samSlideUp 0.25s ease; }
.sam-toast i { font-size: 16px; }
@keyframes samSlideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ── Modal (تایید حذف/تایید و مشابه) ── */
.sam-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,15,14,0.5); z-index: 10000; align-items: center; justify-content: center; padding: 20px; }
.sam-modal-backdrop.open { display: flex; animation: samFadeIn 0.15s ease; }
@keyframes samFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* 🔴 رفعِ نهاییِ باگِ «مودالِ شفاف» (۶ سپتامبر ۲۰۲۶، طبقِ گزارشِ دومِ کاربر — تلاشِ قبلی
   کافی نبود). به‌جایِ تکیه‌ی صرف به این‌که `--sam-*` از یک جای دیگرِ DOM (`:root` یا
   `.sam-page`) درست Cascade شود، الان **مقدارِ Fallbackِ صریح** به‌عنوانِ آرگومانِ دومِ هر
   var() اضافه شده — طبقِ خودِ مشخصاتِ CSS، اگر متغیر به هر دلیلی (ترتیبِ بارگذاریِ فایل،
   یک قانونِ دیگر با تخصصِ بالاتر، یا هر چیزِ پیش‌بینی‌نشده‌ی دیگر) resolve نشود، مرورگر
   بدونِ نیاز به هیچ زنجیره‌ی وراثتی، فوراً از همین مقدارِ صریح استفاده می‌کند. این مودال‌ها
   دیگر به هیچ ساختارِ خاصی از DOM (بودن/نبودن داخلِ `.sam-page`) وابسته نیستند.
   رنگِ متن هم دیگر به ارثِ `.sam-page` متکی نیست — مستقیماً رویِ خودِ باکس ست شده. */
.sam-modal-box {
    width: 100%; max-width: 560px;
    background: var(--sam-surface, #ffffff);
    color: var(--sam-text, #1a1a18);
    border-radius: var(--sam-radius-lg, 14px);
    border: 1px solid var(--sam-border, rgba(0,0,0,0.08));
    box-shadow: 0 24px 64px rgba(0,0,0,0.32);
    max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
    animation: samModalPop 0.18s ease;
    font-family: 'Vazirmatn', system-ui, sans-serif; font-size: 13px; line-height: 1.5;
}
@keyframes samModalPop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.sam-modal-head {
    display: flex; align-items: center; justify-content: space-between; padding: 16px 20px;
    border-bottom: 1px solid var(--sam-border, rgba(0,0,0,0.08)); flex-shrink: 0;
    background: var(--sam-surface, #ffffff); color: var(--sam-text, #1a1a18);
}
.sam-modal-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: inherit; }
.sam-modal-close {
    width: 30px; height: 30px; border: none; background: var(--sam-bg, #f5f5f3); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: var(--sam-text-2, #5a5a56);
    cursor: pointer; flex-shrink: 0;
}
.sam-modal-close:hover { background: var(--sam-border, rgba(0,0,0,0.08)); color: var(--sam-text, #1a1a18); }
.sam-modal-body { padding: 20px; overflow-y: auto; background: var(--sam-surface, #ffffff); color: var(--sam-text, #1a1a18); }
.sam-confirm-icon {
    width: 52px; height: 52px; border-radius: 50%; background: var(--sam-danger-bg, #fef2f2);
    color: var(--sam-danger, #dc2626); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.sam-confirm-icon i { font-size: 26px; }
.sam-confirm-text { text-align: center; font-size: 13px; color: var(--sam-text-2, #5a5a56); line-height: 1.7; margin-bottom: 4px; }
.sam-modal-actions { display: flex; gap: 8px; margin-top: 20px; }
.sam-modal-actions .sam-btn { flex: 1; justify-content: center; }

/* ── مودال «مشاهده‌ی مدارک» در صف تایید مدیران مدرسه ── */
.sam-doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sam-doc-card { display: flex; flex-direction: column; gap: 6px; }
.sam-doc-card label { font-size: 11.5px; font-weight: 600; color: var(--sam-text-2); text-align: center; }
.sam-doc-card img {
  width: 100%; height: 140px; object-fit: cover; border-radius: var(--sam-radius-sm);
  border: 1px solid var(--sam-border); background: var(--sam-surface-2);
}
.sam-doc-empty {
  height: 140px; border-radius: var(--sam-radius-sm); border: 1.5px dashed var(--sam-border-strong);
  background: var(--sam-surface-2); color: var(--sam-text-3); font-size: 11px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.sam-doc-empty .ti { font-size: 22px; }
@media (max-width: 560px) {
  .sam-doc-grid { grid-template-columns: 1fr; }
}

/* ── Tab count badge (برای شمارنده‌ی تعداد در تب‌ها) ── */
.sam-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-inline-start: 5px; border-radius: 20px; background: var(--sam-bg); border: 1px solid var(--sam-border); color: var(--sam-text-3); font-size: 10px; font-weight: 600; }
.sam-tab.active .sam-tab-count { background: var(--sam-accent-bg); border-color: var(--sam-accent-border); color: var(--sam-accent-text); }

@media (max-width: 720px) {
  .sam-toast-wrap { bottom: 12px; left: 12px; right: 12px; }
  .sam-toast { width: 100%; }
  .sam-modal-backdrop { padding: 0; align-items: flex-end; }
  .sam-modal-box { max-width: 100%; border-radius: var(--sam-radius-lg) var(--sam-radius-lg) 0 0; max-height: 92vh; }
  .sam-modal-body { padding: 16px; }
}

/* ── فیلد فقط‌خواندنی و نوار پیشرفت — برای صفحه‌ی پروفایل اختصاصی مدیر مدرسه ── */
.sam-view-static { border: 1px solid var(--sam-border); border-radius: var(--sam-radius-sm); padding: 8px 11px; min-height: 36px; font-size: 13px; background: var(--sam-bg); color: var(--sam-text); display: flex; align-items: center; }
.sam-progress-bar { height: 6px; border-radius: 4px; background: var(--sam-border); overflow: hidden; }
.sam-progress-fill { height: 100%; background: var(--sam-accent); border-radius: 4px; transition: width .25s ease; }

/* ── انتخاب چندگانه (درس‌ها/مدرسه‌ها) — فرم ثبت‌نام معلم (۲۵ اوت ۲۰۲۶) ── */
.sam-multi-select {
  display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto;
  border: 1px solid var(--sam-border); border-radius: var(--sam-radius-sm); padding: 8px;
}
.sam-multi-item { display: flex; align-items: center; gap: 8px; padding: 8px 8px; border-radius: var(--sam-radius-sm); cursor: pointer; font-size: 12.5px; }
.sam-multi-item:hover { background: var(--sam-bg); }
.sam-multi-item input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; }

/* ── چیپ‌های «کتاب‌های انتخاب‌شده» — پیکرِ کتابِ معلم (۱۰ سپتامبر ۲۰۲۶) ── */
.sam-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sam-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--sam-accent-bg, #eef2ff);
  color: var(--sam-accent-text, #3730a3); border: 1px solid var(--sam-accent-border, #c7d2fe);
  border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 12px; font-weight: 600;
}
.sam-chip-remove {
  border: none; background: transparent; color: inherit; cursor: pointer; font-size: 15px;
  line-height: 1; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.sam-chip-remove:hover { background: rgba(0,0,0,0.08); }

/* ── کارت‌های میان‌بر داشبورد + نشان اطلاعاتی — ماژول معلمان (۲۵ اوت ۲۰۲۶) ── */
.sam-quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.sam-quick-card {
  display: block; background: var(--sam-surface); border: 1px solid var(--sam-border); border-radius: var(--sam-radius-lg);
  padding: 18px; text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.sam-quick-card:hover { border-color: var(--sam-accent); box-shadow: 0 6px 18px rgba(37,99,235,0.12); transform: translateY(-1px); }
.sam-quick-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--sam-accent-bg); color: var(--sam-accent-text); display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 10px; }
.sam-quick-title { font-size: 13px; font-weight: 700; color: var(--sam-text); }
.sam-quick-sub { font-size: 11.5px; color: var(--sam-text-3); margin-top: 3px; }
.sam-badge.b-info { background: var(--sam-accent-bg); color: var(--sam-accent-text); border-color: var(--sam-accent-border); }

/* ── پنل پیامکی مدیر مدرسه (۲۵ اوت ۲۰۲۶) ── */
.sam-msg-textarea {
  width: 100%; min-height: 90px; border: 1px solid var(--sam-border-strong); border-radius: var(--sam-radius-sm);
  padding: 10px 12px; font-size: 13px; font-family: inherit; resize: vertical;
}
.sam-msg-toolbar { padding: 12px 14px; border-bottom: 1px solid var(--sam-border); }
.sam-msg-select-all { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--sam-text-2); cursor: pointer; }

/* ── نمودار محبوبیت معلمان (۲۵ اوت ۲۰۲۶) ── */
.sam-pop-chart { display: flex; flex-direction: column; gap: 16px; }
.sam-pop-row { display: grid; grid-template-columns: 160px 1fr 70px; align-items: center; gap: 12px; }
.sam-pop-name { font-size: 12.5px; font-weight: 700; color: var(--sam-text); display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sam-pop-bar-track { height: 26px; background: var(--sam-bg); border-radius: 20px; overflow: hidden; position: relative; }
.sam-pop-bar-fill {
  height: 100%; border-radius: 20px; display: flex; align-items: center; justify-content: flex-end; padding-inline-end: 10px;
  background: linear-gradient(90deg, var(--sam-accent), #60a5fa);
  transition: width 0.6s cubic-bezier(.4,0,.2,1); min-width: 34px;
}
.sam-pop-bar-value { font-size: 11px; font-weight: 700; color: #fff; }
.sam-pop-count { font-size: 11px; color: var(--sam-text-3); text-align: left; }

/* 🆕 اضافه‌شده (طبق درخواستِ صریحِ کاربر): رنگ‌بندیِ اختصاصیِ نمودارِ «نتایجِ شرکت در
   تسکِ کلاس» — سبز برایِ نرخِ حضور، نارنجی/زرد برایِ میانگینِ رضایت، تا از نمودارِ
   محبوبیتِ معلمان (آبیِ پیش‌فرض) بصری متمایز باشد. */
.sam-pop-bar-fill.attendance { background: linear-gradient(90deg, #16a34a, #4ade80); }
.sam-pop-bar-fill.rating { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
@media (max-width: 560px) {
  .sam-pop-row { grid-template-columns: 1fr; gap: 6px; }
  .sam-pop-count { text-align: right; }
}

/* ── بنر «حالت مدرسه» — قابل‌استفاده در هر صفحه‌ی مدیر مدرسه (۲۶ اوت ۲۰۲۶) ── */
.sam-scope-banner {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  background: var(--sam-accent-bg); color: var(--sam-accent-text);
  border: 1px solid var(--sam-accent-border); border-radius: var(--sam-radius-sm);
  padding: 10px 14px; margin-bottom: 14px;
}
.sam-scope-banner .ti { font-size: 15px; flex-shrink: 0; }

/* 🆕 اضافه‌شده (۶ سپتامبر ۲۰۲۶، طبق درخواست کاربر: مودال‌های انتخاب در داشبورد مدیر مدرسه
   — «مدیریت محتوا» و «صفحاتِ اختصاصیِ مدرسه‌ی من»). */
.sam-choice-list { display: flex; flex-direction: column; gap: 8px; }
.sam-choice-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--sam-border, rgba(0,0,0,0.08));
    border-radius: var(--sam-radius-sm, 6px); text-decoration: none; color: inherit; transition: border-color .15s ease, background .15s ease;
    background: var(--sam-surface, #ffffff);
}
.sam-choice-item:hover { border-color: var(--sam-accent, #2563eb); background: var(--sam-accent-bg, #eff6ff); }
.sam-choice-item i { font-size: 20px; color: var(--sam-accent, #2563eb); flex-shrink: 0; }
.sam-choice-title { font-size: 12.5px; font-weight: 700; color: var(--sam-text, #1a1a18); }
.sam-choice-sub { font-size: 10.5px; color: var(--sam-text-3, #9a9994); margin-top: 2px; }

/* 🆕 اضافه‌شده (۶ سپتامبر ۲۰۲۶، فاز ۱ از درخواست کاربر: «کلاس‌های درسی» — مدیریتِ رسترِ یک
   شعبه در مودال). */
.sam-roster-list { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; }
.sam-roster-row {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--sam-radius-sm);
    cursor: pointer; transition: background 0.12s ease;
}
.sam-roster-row:hover { background: var(--sam-bg); }
.sam-roster-row input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.sam-roster-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sam-roster-name { font-size: 12.5px; font-weight: 600; color: var(--sam-text); }
.sam-roster-mobile { font-size: 11px; color: var(--sam-text-3); }
.sam-roster-warning { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--sam-warning-text); margin-top: 2px; }

/* ── 🆕 زمان‌بندیِ کلاس: انتخابِ روزها + بازه‌ی ساعتی (۷ سپتامبر ۲۰۲۶) ── */
.sam-days-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sam-day-chip {
  padding: 8px 14px; border-radius: 20px; border: 1px solid var(--sam-border-strong);
  background: var(--sam-surface); color: var(--sam-text-2); font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all .15s ease;
}
.sam-day-chip:hover { border-color: var(--sam-accent); color: var(--sam-accent-text); }
.sam-day-chip.active { background: var(--sam-accent); border-color: var(--sam-accent); color: #fff; }

.sam-schedule-rows { display: flex; flex-direction: column; gap: 8px; }
.sam-schedule-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--sam-border); border-radius: var(--sam-radius-sm); background: var(--sam-bg); }
.sam-schedule-day-label { font-size: 12.5px; font-weight: 700; color: var(--sam-text); min-width: 56px; flex-shrink: 0; }
.sam-schedule-time-inputs { display: flex; align-items: center; gap: 6px; flex: 1; }
.sam-schedule-time-inputs input[type="time"] {
  border: 1px solid var(--sam-border-strong); border-radius: var(--sam-radius-sm); padding: 6px 8px;
  font-size: 12.5px; font-family: inherit; background: var(--sam-surface); color: var(--sam-text); flex: 1; min-width: 0;
}
.sam-schedule-time-inputs input[type="time"]:focus { outline: none; border-color: var(--sam-accent); }
.sam-schedule-time-inputs span { font-size: 11px; color: var(--sam-text-3); flex-shrink: 0; }

.sam-schedule-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sam-schedule-chip {
  display: inline-flex; align-items: center; gap: 3px; background: var(--sam-accent-bg); color: var(--sam-accent-text);
  border: 1px solid var(--sam-accent-border); border-radius: 20px; padding: 2px 8px; font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.sam-schedule-range {
  display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 10.5px; color: var(--sam-text-3);
}
.sam-schedule-range i { font-size: 12px; }

/* ── 🆕 انتخابگرِ درون‌ردیفیِ نحوه‌ی برگزاری (حضوری/آنلاین) ── */
.sam-inline-select {
  border: 1px solid var(--sam-border-strong); border-radius: var(--sam-radius-sm); background: var(--sam-surface);
  color: var(--sam-text); font-size: 11.5px; font-family: inherit; padding: 5px 8px; cursor: pointer;
}
.sam-inline-select:focus { outline: none; border-color: var(--sam-accent); }