/* ============================================================================
   SchoolERP Admin — Unified Design System
   ----------------------------------------------------------------------------
   One coherent, calm visual layer built on the school's own identity:
   navy + maroon + gold + cream (from the official ID cards and logo)
   over modern neutral surfaces. RTL-first. Bootstrap 5 RTL loads before
   this file; we style on top of it instead of fighting it.

   Section map:
     01. Design tokens
     02. Base & typography
     03. App shell: sidebar / topbar / content (+ focus mode)
     04. Login
     05. Buttons
     06. Chips, pills & badges
     07. Alerts & notes
     08. Cards, panels & dashboards
     09. Module headers & toolbars
     10. Tables & data grids
     11. Grid headers, footers & pagination
     12. Forms
     13. Smart select
     14. File uploads
     15. Bootstrap modal polish
     16. Final workspace layout (unified workspace + tab rail + panels)
     17. Workspace overview (hero / search / stats / templates)
     18. Excel bulk entry & inline import
     19. Import center & report designer
     20. Bulk operation modals (attendance / grades / levels)
     21. Control hub & control-grade grid
     22. Student 360
     23. Roles & permissions screen (rp-*)
     24. Timetable & misc
     25. Print
     26. Responsive (<=1200px, <=768px)
   ============================================================================ */

/* ============================================================================
   01. Design tokens
   ============================================================================ */
:root {
  /* Brand identity — school ID cards / logo */
  --brand-navy: #0e2038;
  --brand-navy-800: #16304f;
  --brand-navy-700: #1d3d63;
  --brand-maroon: #7a0f22;
  --brand-maroon-600: #93122a;
  --brand-gold: #d8b56a;
  --brand-gold-light: #e9c877;
  --brand-cream: #faf3e3;

  /* Neutral surfaces */
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --surface-sunken: #eef2f7;
  --border: #e3e9f1;
  --border-strong: #cfdae6;

  /* Text */
  --text: #1a2b3c;
  --muted: #64748b;

  /* Semantic roles */
  --primary: #16304f;
  --primary-dark: #0e2038;
  --primary-soft: #e9eef6;
  --accent: #0f8b62;          /* success / approve */
  --accent-soft: #e6f5ee;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --warning: #b45309;
  --warning-soft: #fdf3e3;
  --info: #1d6fa8;
  --info-soft: #eaf3fa;
  --gold-soft: rgba(216, 181, 106, .16);
  --gold-hover: rgba(216, 181, 106, .10);

  /* Sidebar */
  --sidebar-top: #14304f;
  --sidebar-mid: #0e2038;
  --sidebar-bottom: #0a1729;
  --sidebar-text: #d6deea;
  --sidebar-muted: #8fa1b8;

  /* Table header */
  --thead-bg: #16304f;
  --thead-text: #f4f7fb;

  /* Elevation — deliberately subtle */
  --shadow-xs: 0 1px 2px rgba(14, 32, 56, .05);
  --shadow-sm: 0 2px 10px rgba(14, 32, 56, .06);
  --shadow: 0 8px 24px rgba(14, 32, 56, .07);
  --shadow-lg: 0 22px 60px rgba(14, 32, 56, .18);

  /* Radii */
  --radius-sm: 10px;
  --radius: 12px;
  --radius-lg: 14px;

  /* Focus ring */
  --focus-ring: 0 0 0 .2rem rgba(29, 61, 99, .16);

  /* Kept for legacy var() consumers */
  --sidebar: var(--sidebar-mid);
  --sidebar-2: var(--sidebar-top);
  --sidebar-hover: rgba(255, 255, 255, .07);
}

/* ============================================================================
   02. Base & typography
   ============================================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 { font-weight: 800; color: var(--text); }

a { color: var(--brand-navy-700); }
a:hover { color: var(--brand-navy); }

::selection { background: var(--brand-gold); color: var(--brand-navy); }

body.modal-open { overflow: hidden; }

/* Quiet, consistent scrollbars */
* { scrollbar-width: thin; scrollbar-color: #b9c6d6 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { border: 2px solid var(--bg); border-radius: 999px; background: #b9c6d6; }
*::-webkit-scrollbar-track { background: transparent; }

:where(.btn, .nav-link, .form-control, .form-select, button, a, label, [tabindex]):focus-visible {
  outline: 3px solid rgba(216, 181, 106, .55);
  outline-offset: 2px;
}

.eyebrow {
  display: inline-block;
  color: var(--brand-maroon);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .01em;
}

.hint { margin: 14px 0 0; color: var(--muted); text-align: center; font-size: 13px; }

/* ============================================================================
   03. App shell — sidebar / topbar / content
   ============================================================================ */
.app-sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: 292px;
  padding: 18px 14px 24px;
  overflow-y: auto;
  color: #fff;
  background: linear-gradient(180deg, var(--sidebar-top) 0%, var(--sidebar-mid) 55%, var(--sidebar-bottom) 100%);
  border-inline-end: 1px solid rgba(216, 181, 106, .18);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px 16px;
  border-bottom: 1px solid rgba(216, 181, 106, .22);
}
.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand-gold-light), var(--brand-gold));
  color: var(--brand-navy);
  font-weight: 900;
  font-size: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.brand strong { display: block; font-size: 19px; color: #fff; }
.brand span { display: block; color: var(--brand-gold-light); font-size: 12.5px; font-weight: 600; }

.side-nav { margin-top: 12px; padding-bottom: 18px; }
.nav-section { margin-top: 8px; }

.nav-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border: 0;
  background: transparent;
  color: var(--sidebar-muted);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: start;
}
.nav-group-toggle:hover { color: var(--brand-gold-light); }
.nav-group-toggle i { font-size: 11px; transition: transform .18s ease; }
.nav-group-toggle:not(.collapsed) i { transform: rotate(180deg); }

.side-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin-bottom: 3px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  color: var(--sidebar-text);
  text-decoration: none;
  font-weight: 600;
}
.side-nav .nav-link:hover { background: var(--sidebar-hover); color: #fff; }
.side-nav .nav-link.active {
  background: var(--gold-soft);
  border-color: rgba(216, 181, 106, .34);
  border-inline-start: 3px solid var(--brand-gold);
  color: var(--brand-gold-light);
  font-weight: 800;
}

.nav-item-icon {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .07);
  color: inherit;
}
.nav-link.active .nav-item-icon { background: rgba(216, 181, 106, .22); color: var(--brand-gold-light); }

.root-link { margin-bottom: 10px; background: rgba(255, 255, 255, .05); }

.system-tools-section {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(216, 181, 106, .16);
}
.system-tools-section .nav-link { min-height: 38px; padding-block: 7px; font-size: 13px; }
.system-tools-section .nav-item-icon { width: 28px; height: 28px; flex-basis: 28px; }

.app-main {
  margin-inline-start: 292px;
  min-height: 100vh;
  padding: 20px 22px 32px;
}

.topbar {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.topbar h1 { margin: 0; font-size: 22px; font-weight: 900; }
.topbar p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.content-shell { margin-top: 16px; }

/* Focus mode (data-sidebar-toggle). Verified by ProductionHardeningTests:
   the collapsed sidebar must hard-collapse even against page-level rules,
   hence the two !important guarantees below. */
.app-sidebar,
.app-main { transition: margin .18s ease, width .18s ease; }

body.sidebar-collapsed .app-sidebar {
  width: 0 !important; /* contract: full collapse, no residual gutter */
  display: none;
  visibility: hidden;
}
body.sidebar-collapsed .app-main {
  margin-inline-start: 0 !important; /* contract: content claims full width */
  width: 100%;
  max-width: none;
  padding-inline: clamp(12px, 2vw, 24px);
}
body.sidebar-collapsed .sidebar-collapse-button,
.sidebar-collapse-button.is-active {
  border-color: var(--brand-gold);
  background: var(--brand-cream);
  color: var(--brand-navy);
}

/* ============================================================================
   04. Login
   ============================================================================ */
.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(216, 181, 106, .14), transparent 60%),
    linear-gradient(180deg, #12294a 0%, var(--brand-navy) 100%);
}
.login-card {
  width: min(430px, 92vw);
  padding: 30px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.login-brand { margin-bottom: 22px; }
.login-brand .brand { border-bottom-color: var(--border); }
.login-brand strong { color: var(--text); }
.login-brand span { color: var(--brand-maroon); }

.remember-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

/* ============================================================================
   05. Buttons
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:focus { box-shadow: var(--focus-ring); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.btn-success {
  background: var(--accent);
  border-color: var(--accent);
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
  background: #0c7252;
  border-color: #0c7252;
}

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background: #93122a;
  border-color: #93122a;
}

.btn-dark {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
}
.btn-dark:hover, .btn-dark:focus { background: #0a1729; border-color: #0a1729; }

/* Quiet segmented style for toolbar clusters (export / import / print) */
.btn-outline-primary {
  color: var(--primary);
  border-color: var(--border-strong);
  background: var(--surface);
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  color: var(--primary-dark);
  border-color: var(--primary);
  background: var(--primary-soft);
}

.btn-outline-secondary {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface);
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active {
  color: var(--primary-dark);
  border-color: var(--brand-gold);
  background: var(--brand-cream);
}

.btn-outline-success {
  color: var(--accent);
  border-color: var(--border-strong);
  background: var(--surface);
}
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active {
  color: #0c7252;
  border-color: var(--accent);
  background: var(--accent-soft);
}

.btn-outline-danger {
  color: var(--danger);
  border-color: var(--border-strong);
  background: var(--surface);
}
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active {
  color: #fff;
  border-color: var(--danger);
  background: var(--danger);
}

.btn-sm { border-radius: 9px; font-size: 13px; }

.icon-only {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
}

/* Segmented button rails: consecutive quiet buttons visually group together */
.toolbar-actions,
.import-actions,
.inline-import-actions,
.excel-bulk-actions,
.workspace-module-tools,
.pager-actions,
.hero-actions,
.report-actions .d-flex,
.rp-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================================================
   06. Chips, pills & badges
   ============================================================================ */
.user-chip,
.counter-chip,
.page-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(216, 181, 106, .5);
  background: var(--brand-cream);
  color: var(--brand-navy);
  font-weight: 800;
  font-size: 13px;
}
.user-chip i { color: var(--brand-maroon); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.record-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
  font-size: 13px;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
  white-space: nowrap;
}

.muted-chip { color: var(--muted); background: var(--surface-sunken); }

.import-chip {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
}

.duplicate-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(180, 83, 9, .35);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 12px;
  font-weight: 800;
}

.page-size,
.pager-summary { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 700; font-size: 13px; }

/* ============================================================================
   07. Alerts & notes
   ============================================================================ */
.app-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius);
  font-weight: 700;
}

.alert { border-radius: var(--radius); }
.alert-info { background: var(--info-soft); border-color: #cfe3f2; color: var(--info); }
.alert-warning { background: var(--warning-soft); border-color: #f0dcc0; color: var(--warning); }
.alert-danger { background: var(--danger-soft); border-color: #f3cdc9; color: var(--danger); }
.alert-secondary { background: var(--surface-sunken); border-color: var(--border); color: var(--text); }

.context-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 14px;
  padding: 13px 15px;
  border: 1px solid rgba(216, 181, 106, .5);
  border-inline-start: 4px solid var(--brand-gold);
  border-radius: var(--radius);
  background: var(--brand-cream);
  color: var(--brand-navy);
}
.context-note i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  border-radius: var(--radius-sm);
  background: rgba(216, 181, 106, .28);
  color: var(--brand-maroon);
}
.context-note strong, .context-note span { display: block; }
.context-note span { margin-top: 3px; color: #4a5a70; font-size: 13px; }

/* ============================================================================
   08. Cards, panels & dashboards
   ============================================================================ */
.crud-panel,
.data-panel,
.dashboard-panel,
.hero-panel,
.report-actions,
.workflow-panel,
.module-toolbar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.crud-panel { padding: 16px; margin-bottom: 14px; }
.data-panel { overflow: hidden; }
.full-width-panel { grid-column: 1 / -1; }
.wide-panel { grid-column: span 2; }
.professional-panel { grid-column: span 2; }

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.dashboard-panel { grid-column: span 2; padding: 18px; }
.dashboard-panel h3,
.grid-header h3,
.report-actions h3,
.crud-title h3 { margin: 4px 0 0; font-size: 17px; font-weight: 800; }

.hero-panel {
  grid-column: span 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
}
.hero-panel h2 { margin: 6px 0; font-size: 30px; font-weight: 900; }
.hero-panel p { margin: 0; max-width: 820px; color: var(--muted); }

.executive-dashboard { display: grid; gap: 14px; }
.executive-hero {
  min-height: 220px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 20px;
  align-items: stretch;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(700px 280px at 90% -20%, rgba(216, 181, 106, .18), transparent 60%),
    linear-gradient(135deg, #14304f 0%, var(--brand-navy) 70%);
  color: #f2f6fb;
  box-shadow: var(--shadow);
}
.executive-hero .eyebrow { color: var(--brand-gold-light); }
.executive-hero h2 {
  max-width: 780px;
  margin: 8px 0;
  color: #fff;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.2;
  font-weight: 900;
}
.executive-hero p { max-width: 920px; margin: 0; color: #c4d2e2; font-size: 15px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.executive-hero .btn-outline-secondary,
.executive-hero .btn-outline-primary {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(216, 181, 106, .5);
  color: var(--brand-gold-light);
}
.executive-hero .btn-outline-secondary:hover,
.executive-hero .btn-outline-primary:hover {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-navy);
}

.dashboard-date {
  min-height: 170px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  border: 1px solid rgba(216, 181, 106, .35);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .06);
  color: var(--brand-gold-light);
}
.dashboard-date i { font-size: 38px; }
.dashboard-date span { color: #c4d2e2; font-weight: 700; }
.dashboard-date strong { direction: ltr; font-size: 22px; color: #fff; }

.action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.action-tile {
  min-height: 110px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 4px 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.action-tile:hover {
  transform: translateY(-2px);
  border-color: var(--brand-gold);
  box-shadow: var(--shadow);
  color: var(--text);
}
.action-tile i {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 20px;
}
.action-tile strong { font-size: 15px; font-weight: 800; }
.action-tile span { color: var(--muted); font-size: 13px; line-height: 1.6; }
.action-label { display: inline; }

.module-icon-grid,
.professional-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.module-icon-card,
.professional-card {
  min-height: 130px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.module-icon-card:hover,
.professional-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-gold);
  box-shadow: var(--shadow);
  color: var(--text);
}
.module-icon-card i,
.professional-card i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 22px;
}
.module-icon-card strong,
.professional-card strong { font-weight: 800; }
.module-icon-card span,
.professional-card span { color: var(--muted); font-size: 13px; line-height: 1.65; }

.section-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.section-stat-card {
  min-height: 140px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.section-stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-gold);
  box-shadow: var(--shadow);
  color: var(--text);
}
.section-stat-card i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 22px;
}
.section-stat-card span { color: var(--muted); font-weight: 700; font-size: 13px; }
.section-stat-card strong { font-size: 25px; font-weight: 900; line-height: 1.15; }
.section-stat-card small { color: var(--muted); font-size: 12.5px; line-height: 1.6; }
/* Area accents — quiet tints of the identity palette */
.section-stat-card.students i { background: var(--accent-soft); color: var(--accent); }
.section-stat-card.academic i { background: var(--primary-soft); color: var(--brand-navy-700); }
.section-stat-card.attendance i { background: var(--warning-soft); color: var(--warning); }
.section-stat-card.finance i { background: var(--accent-soft); color: #0c7252; }
.section-stat-card.accounting i { background: var(--surface-sunken); color: #334155; }
.section-stat-card.exams i { background: var(--brand-cream); color: var(--brand-maroon); }
.section-stat-card.inventory i { background: var(--info-soft); color: var(--info); }
.section-stat-card.portal i { background: rgba(122, 15, 34, .08); color: var(--brand-maroon); }

.ops-hero { margin-bottom: 14px; }
.ops-hero-icon { font-size: 50px; color: var(--brand-gold); }
.ops-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.ops-card {
  min-height: 140px;
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ops-card:hover { transform: translateY(-1px); border-color: var(--brand-gold); box-shadow: var(--shadow); color: var(--text); }
.ops-card i { color: var(--primary); font-size: 26px; }
.ops-card strong { font-size: 17px; font-weight: 800; }
.ops-card span { color: var(--muted); font-size: 13px; }
.ops-actions { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.alerts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.ops-alert {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
.ops-alert:hover { border-color: var(--border-strong); color: var(--text); }
.ops-alert .alert-count {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 18px;
  font-weight: 900;
}
.ops-alert strong { display: block; margin-bottom: 3px; font-weight: 800; }
.ops-alert small { color: var(--muted); line-height: 1.7; }
.ops-alert.danger .alert-count { background: var(--danger-soft); color: var(--danger); }
.ops-alert.warning .alert-count { background: var(--warning-soft); color: var(--warning); }
.ops-alert.info .alert-count { background: var(--info-soft); color: var(--info); }

.empty-alert {
  grid-column: 1 / -1;
  min-height: 110px;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-soft);
  text-align: center;
}
.empty-alert i { color: var(--accent); font-size: 32px; }
.empty-alert span { color: var(--muted); }

.mini-stat-list { display: grid; gap: 9px; margin-top: 14px; }
.mini-stat-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.mini-stat-list span { color: var(--muted); font-weight: 700; }
.mini-stat-list strong { color: var(--text); font-weight: 900; direction: ltr; }

.mini-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 8px;
  margin-bottom: 8px;
}

.rank-list { display: grid; gap: 8px; }
.rank-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}
.rank-list.warning div { background: var(--warning-soft); border-color: #f0dcc0; }

.status-card {
  min-height: 160px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}
.status-card i { font-size: 38px; }
.status-card strong { font-size: 21px; font-weight: 900; }
.status-card span { color: var(--muted); direction: ltr; }
.status-card.ok i, .status-card.ok strong { color: var(--accent); }
.status-card.warn i, .status-card.warn strong { color: var(--warning); }

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.kpi-strip div {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}
.kpi-strip span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.kpi-strip strong { display: block; margin-top: 4px; color: var(--text); font-size: 19px; font-weight: 800; }
.compact-kpis { margin-top: 12px; }

/* ============================================================================
   توليد جدول الحصص: نموذج مضغوط + شبكة أسبوع لكل فصل.
   ============================================================================ */
.tb-form { padding: 16px 18px; margin-bottom: 14px; }
.tb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; }
.tb-grid .field > span { display: block; color: var(--muted); font-weight: 700; font-size: 12px; margin-bottom: 4px; }
.tb-grid .field > * { min-width: 0; }
.tb-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .9rem; color: var(--text); }
.tb-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.tb-note { margin: 10px 0 0; font-size: .82rem; color: var(--muted); }
.tb-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.tb-bad { color: var(--danger); }
.tb-h { margin: 0 0 12px; font-size: 1rem; font-weight: 800; color: var(--text); }
.tb-problems { padding: 16px 18px; margin-bottom: 14px; border-inline-start: 4px solid var(--warning); }
.tb-reason { color: var(--muted); font-size: .86rem; }
.tb-class { padding: 16px 18px; margin-bottom: 14px; }
.tb-table { table-layout: fixed; font-size: 12.5px; }
.tb-table th, .tb-table td { text-align: center; vertical-align: top; padding: 7px 5px; }
.tb-day { font-weight: 800; color: var(--text); white-space: nowrap; }
.tb-subject { display: block; color: var(--text); font-size: 12.5px; }
.tb-teacher { display: block; color: var(--muted); font-size: 11px; }
.tb-time { display: block; color: var(--muted); font-size: 10.5px; }
@media (max-width: 900px) { .tb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============================================================================
   لوحة المدير: رسوم بسيطة بالـCSS فقط (بلا مكتبة رسم) لتعمل داخل المدرسة بلا إنترنت.
   الارتفاعات والنِّسَب تُحسب على الخادم وتصل كقيم جاهزة.
   ============================================================================ */
.md-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 14px; }
.md-danger { color: var(--danger); }
.md-card { padding: 16px 18px; margin-bottom: 14px; }
.md-h { margin: 0 0 12px; font-size: 1rem; font-weight: 800; color: var(--text); }
.md-empty { margin: 0; color: var(--muted); font-size: .9rem; }

.md-progress { height: 22px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.md-progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s ease; }
.md-progress-legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 10px; font-size: .87rem; color: var(--muted); }
.md-progress-legend strong { color: var(--text); }

.md-bars { display: flex; align-items: flex-end; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.md-bar-col { flex: 1 1 0; min-width: 54px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.md-bar { width: 100%; max-width: 46px; background: var(--primary); border-radius: 6px 6px 0 0; }
.md-bar-alt { background: var(--accent); }
.md-bar-val { font-size: 10.5px; font-weight: 800; color: var(--muted); min-height: 14px; }
.md-bar-lbl { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; }

.md-rows { display: flex; flex-direction: column; gap: 9px; }
.md-row { display: grid; grid-template-columns: 130px 1fr 110px; align-items: center; gap: 12px; }
.md-row-name { font-size: .88rem; font-weight: 700; color: var(--text); }
.md-row-track { height: 14px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.md-row-fill { display: block; height: 100%; background: var(--danger); border-radius: 999px; }
.md-row-val { font-size: .88rem; font-weight: 800; color: var(--text); text-align: left; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .md-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-row { grid-template-columns: 96px 1fr 88px; gap: 8px; }
}

/* ============================================================================
   جاهزية التشغيل: ما الذي لم يُهيَّأ بعد. الألوان من المتغيرات الدلالية القائمة.
   ============================================================================ */
.rd-summary { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 18px 20px; }
.rd-score { display: grid; place-items: center; min-width: 116px; padding: 12px 18px; border-radius: 14px; }
.rd-score.rd-ok { background: var(--accent-soft); }
.rd-score.rd-warn { background: var(--warning-soft); }
.rd-score.rd-crit { background: var(--danger-soft); }
.rd-score-num { font-size: 2.1rem; font-weight: 800; line-height: 1; color: var(--text); }
.rd-score-num small { font-size: 1rem; font-weight: 700; color: var(--muted); }
.rd-score-lbl { margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.rd-stats { display: flex; gap: 26px; flex-wrap: wrap; }
.rd-stats div { display: flex; flex-direction: column; }
.rd-n { font-size: 1.25rem; font-weight: 800; color: var(--text); }
.rd-stats span:last-child { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.rd-ok-t { color: var(--accent); }
.rd-warn-t { color: var(--warning); }
.rd-crit-t { color: var(--danger); }
.rd-h { margin: 22px 0 10px; font-size: 1.02rem; font-weight: 800; }
.rd-list { display: flex; flex-direction: column; gap: 10px; }
.rd-item {
  display: flex; align-items: flex-start; gap: 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 13px; padding: 14px 16px;
}
.rd-item.rd-crit { border-inline-start: 4px solid var(--danger); }
.rd-item.rd-warn { border-inline-start: 4px solid var(--warning); }
.rd-item.rd-ok { border-inline-start: 4px solid var(--accent); }
.rd-icon { font-size: 1.15rem; margin-top: 2px; }
.rd-item.rd-crit .rd-icon { color: var(--danger); }
.rd-item.rd-warn .rd-icon { color: var(--warning); }
.rd-item.rd-ok .rd-icon { color: var(--accent); }
.rd-body { flex: 1 1 auto; min-width: 0; }
.rd-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rd-title strong { font-size: .98rem; color: var(--text); }
.rd-pill { font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--surface-sunken); color: var(--muted); }
.rd-detail { margin: 4px 0 0; font-size: .9rem; color: var(--text); }
.rd-why { margin: 4px 0 0; font-size: .84rem; color: var(--muted); }
.rd-go { flex: 0 0 auto; align-self: center; white-space: nowrap; }
.rd-done { margin-top: 22px; }
.rd-done > summary { cursor: pointer; font-weight: 800; color: var(--muted); font-size: .9rem; margin-bottom: 10px; }
.rd-done > summary:hover { color: var(--primary); }
@media (max-width: 640px) {
  .rd-item { flex-wrap: wrap; }
  .rd-go { width: 100%; }
}

/* ============================================================================
   السجل المالي للطالب عبر الأعوام (لوحة المصروفات في ملف الطالب ٣٦٠)
   الألوان من المتغيرات الدلالية القائمة — بلا لوحة ألوان جديدة.
   ============================================================================ */
.fee-timeline-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 12px; }
.fee-timeline-wrap { margin-top: 4px; }
.fee-timeline-table { font-size: 13px; }
.fee-timeline-table td { vertical-align: top; }
.fee-timeline-current > td { background: var(--primary-soft); }
.fee-timeline-now {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.fee-timeline-grade { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; font-weight: 700; }
.fee-tone-paid { background: var(--accent-soft); color: var(--accent); }
.fee-tone-overdue { background: var(--danger-soft); color: var(--danger); }
.fee-tone-partial { background: var(--warning-soft); color: var(--warning); }
.fee-tone-unpaid { background: var(--info-soft); color: var(--info); }
.fee-tone-none { background: var(--surface-sunken); color: var(--muted); }
.fee-timeline-details { margin-top: 6px; }
.fee-timeline-details > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
}
.fee-timeline-details > summary:hover { color: var(--primary); }
.fee-timeline-cancelled { text-decoration: line-through; opacity: .7; }
.fee-timeline-unassigned { margin-top: 10px; }

.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.stat-card {
  display: grid;
  gap: 4px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.stat-card i { color: var(--primary); font-size: 20px; }
.stat-card span { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.stat-card strong { font-size: 22px; font-weight: 900; }

.workflow-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
  gap: 16px;
  margin-bottom: 16px;
}
.workflow-stack { display: grid; gap: 16px; }
.workflow-panel { padding: 18px; }
.compact-workflow { align-self: start; }
.workflow-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.workflow-title i {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 21px;
}
.workflow-title h3 { margin: 0; font-size: 17px; font-weight: 800; }
.workflow-title span { color: var(--muted); font-size: 13px; font-weight: 600; }

.workspace-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.workspace-guide-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.workspace-guide-step > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--brand-cream);
  color: var(--brand-maroon);
  font-weight: 900;
}
.workspace-guide-step strong { display: block; margin-bottom: 4px; font-size: 14.5px; }
.workspace-guide-step p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

.empty-state {
  min-height: 240px;
  display: grid;
  place-items: center;
  padding: 32px;
  color: var(--muted);
  text-align: center;
}
.empty-state.compact {
  min-height: 170px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.empty-state h2 { margin: 10px 0 6px; color: var(--text); font-size: 21px; }
.empty-state p { max-width: 560px; margin: 0; }
.empty-icon { color: var(--brand-gold); font-size: 40px; }

.panel-title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

/* ============================================================================
   09. Module headers & toolbars
   ============================================================================ */
.module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.pro-header,
.compact-header { margin-bottom: 12px; }
.module-title-block { display: flex; align-items: center; gap: 12px; }
.module-icon {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary);
}
.module-title-block .module-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  font-size: 22px;
}
.module-header h2 { margin: 3px 0 0; font-size: 22px; font-weight: 900; }
.module-header p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }

.module-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.search-form { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; }
.input-icon { position: relative; width: min(460px, 100%); }
.input-icon i {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
}
.input-icon .form-control { padding-inline-start: 38px; }

.report-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 16px;
  margin-bottom: 14px;
}

.crud-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.search-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-weight: 800;
}
.search-panel-title i { color: var(--brand-gold); }

.workspace-command-title { min-width: 0; display: flex; align-items: center; gap: 10px; }
.workspace-command-title > i {
  width: 42px;
  height: 42px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(216, 181, 106, .22);
  color: var(--brand-gold-light);
  font-size: 21px;
}
.workspace-command-title h2 {
  margin: 0;
  overflow: hidden;
  font-size: 20px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================================
   10. Tables & data grids
   ============================================================================ */
.table-responsive { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }

.data-table,
.workspace-table,
.professional-table,
.audit-table {
  direction: rtl;
  text-align: start;
  border-color: var(--border);
}

.data-table { width: 100%; margin: 0; table-layout: fixed; }
.data-table thead th {
  background: var(--thead-bg);
  color: var(--thead-text);
  border: 0;
  border-bottom: 2px solid var(--brand-gold);
  padding: 11px 12px;
  font-size: 12.5px;
  font-weight: 800;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
  vertical-align: middle;
}
.data-table tbody td {
  max-width: 260px;
  padding: 10px 12px;
  border-color: var(--border);
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.55;
  font-size: 13px;
}
.data-table tbody tr:nth-child(even) { background: var(--surface-soft); }
.data-table tbody tr:hover { background: var(--gold-hover); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent; }

.professional-table thead th {
  background: var(--thead-bg);
  color: var(--thead-text);
  border: 0;
  border-bottom: 2px solid var(--brand-gold);
  white-space: nowrap;
}
.professional-table td,
.professional-table th { padding: 11px 12px; vertical-align: middle; }
.professional-table tbody tr:hover { background: var(--gold-hover); }

.selectable-row { cursor: pointer; transition: background .14s ease, box-shadow .14s ease; }
.selectable-row:hover { background: var(--gold-hover); }
.selectable-row:focus-visible { outline: 3px solid rgba(216, 181, 106, .55); outline-offset: -3px; }
.selectable-row.is-selected {
  background: var(--brand-cream);
  box-shadow: inset 4px 0 0 var(--brand-gold);
}

.actions-col { width: 122px; min-width: 122px; max-width: 122px; text-align: center; }
.row-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  white-space: normal;
}
.row-actions form { display: inline-flex; margin: 0; }
.row-actions .btn { min-height: 32px; font-weight: 700; }

.grid-action-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 9px;
}
.grid-action-btn i { margin: 0; font-size: 15px; }
/* Icon-only action buttons inside grids: label stays for screen readers */
.row-actions .grid-action-btn .action-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.empty-row {
  height: 84px;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
}
.empty-row i { color: var(--brand-gold); margin-inline-end: 6px; }

/* Excel-like column filters */
.column-filter-row th {
  background: var(--surface-sunken);
  color: var(--text);
  border-bottom: 1px solid var(--border-strong);
  padding: 5px;
  vertical-align: top;
}
.table-filter { position: relative; }
.table-filter i {
  position: absolute;
  inset-inline-start: 7px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 12px;
  pointer-events: none;
}
.table-filter input {
  width: 100%;
  min-width: 60px;
  height: 32px;
  padding: 5px 24px 5px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  direction: rtl;
  text-align: start;
}
.table-filter input:focus {
  outline: 0;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.filter-actions-note {
  background: var(--surface-sunken);
  color: var(--muted);
  font-size: 12px;
}

.barcode-cell {
  direction: ltr;
  font-family: "Consolas", "Courier New", monospace;
  letter-spacing: 1px;
  font-weight: 800;
}

.audit-json { min-width: 150px; }
.audit-json summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.audit-json summary::-webkit-details-marker { display: none; }
.audit-json pre {
  margin: 8px 0 0;
  max-width: 420px;
  max-height: 180px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: #334155;
  white-space: pre-wrap;
  direction: ltr;
  text-align: left;
  font-size: 11px;
}

.line-table {
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.line-head,
.line-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) minmax(110px, .5fr) minmax(110px, .5fr) minmax(160px, .9fr);
  gap: 8px;
  align-items: center;
  padding: 10px;
}
.line-head {
  background: var(--thead-bg);
  color: var(--thead-text);
  font-weight: 800;
  font-size: 13px;
}
.line-row { border-top: 1px solid var(--border); background: var(--surface); }
.line-row:nth-child(even) { background: var(--surface-soft); }
.inventory-lines {
  grid-template-columns: minmax(220px, 1.3fr) minmax(100px, .45fr) minmax(100px, .45fr) minmax(160px, .9fr);
}

/* ============================================================================
   11. Grid headers, footers & pagination
   ============================================================================ */
.grid-header,
.grid-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.grid-footer { border-top: 1px solid var(--border); border-bottom: 0; background: var(--surface-soft); }
.compact-grid-header { padding: 13px 14px; }
.compact-grid-header h4 { margin: 0; font-size: 18px; font-weight: 900; }
.compact-grid-footer { padding: 10px 14px; }
.pager-actions { display: inline-flex; align-items: center; gap: 8px; }

/* ============================================================================
   12. Forms
   ============================================================================ */
.form-control,
.form-select {
  border-color: var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-navy-700);
  box-shadow: var(--focus-ring);
}
.form-control.is-invalid,
.form-select.is-invalid,
input.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 .18rem rgba(180, 35, 24, .12);
}
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-label { color: var(--muted); font-weight: 700; font-size: 13px; }

.crud-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  align-items: end;
}
.field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.field .form-control,
.field .form-select {
  min-height: 40px;
  color: var(--text);
  font-weight: 600;
  /* select لا ينكمش أقل من عرض محتواه افتراضيًا، فخيار طويل (مثل اسم امتحان) كان يدفعه فوق الحقل
     المجاور في الشبكة (تداخل شاشة أرقام الجلوس وغيرها). إجباره على عرض خليته يمنع أي تداخل. */
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.compact-field { min-width: 240px; margin: 0; }
.checkbox-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.switch-row {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text);
}
.crud-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.inline-actions { grid-column: auto; justify-content: flex-start; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.form-grid.one-col { grid-template-columns: 1fr; }
.form-grid label,
.line-row label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.span-2 { grid-column: span 2; }

.attachment-panel { border-inline-start: 4px solid var(--brand-gold); }
.attachment-form,
.attachment-delete {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 10px;
}
.attachment-delete {
  grid-template-columns: minmax(220px, 1fr) auto;
  margin-bottom: 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.documents-upload { grid-template-columns: repeat(4, minmax(180px, 1fr)); }

.bulk-area {
  min-height: 220px;
  direction: ltr;
  font-family: "Consolas", "Courier New", monospace;
}

/* ============================================================================
   13. Smart select
   ============================================================================ */
/* min-width:0 ضروري: الغلاف عنصر داخل شبكة (‎.field‎)، والحد الأدنى التلقائي لعنصر الشبكة هو
   عرض محتواه، فخيار طويل (مثل «طلب #62178 — الاسم — ولي الأمر: ... — الحالة: ...») كان يمدّده
   إلى 396px داخل خلية 215px فيطفح 169px فوق الحقل المجاور. القياس: التداخل 169px قبل، ‎-12px‎ بعد.
   نص الزر عليه ellipsis أصلًا (أسفله) فيُقصّ بشكل نظيف بعد التقييد. */
.smart-select-wrap { position: relative; width: 100%; min-width: 0; }
.smart-select-wrap select.smart-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
}
.smart-select-trigger {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  text-align: start;
  font-weight: 600;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.smart-select-trigger:hover,
.smart-select-trigger:focus {
  outline: 0;
  border-color: var(--brand-navy-700);
  box-shadow: var(--focus-ring);
}
.smart-select-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-select-trigger i { color: var(--muted); }

.smart-select-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.smart-select-modal.open { display: flex; }
.smart-select-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 32, 56, .5);
  backdrop-filter: blur(3px);
}
.smart-select-dialog {
  position: relative;
  width: min(720px, 96vw);
  max-height: min(700px, 90vh);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: riseIn .14s ease-out;
}
.smart-select-head,
.smart-select-search { display: flex; align-items: center; gap: 10px; }
.smart-select-head { justify-content: space-between; }
.smart-select-head h3 { margin: 2px 0 0; font-size: 18px; font-weight: 800; }
.smart-select-search { position: relative; }
.smart-select-search i { position: absolute; inset-inline-start: 14px; color: var(--muted); }
.smart-select-search input { min-height: 44px; padding-inline-start: 42px; }
.smart-select-count { color: var(--muted); font-size: 13px; font-weight: 700; }
.smart-select-list {
  overflow: auto;
  display: grid;
  gap: 8px;
  padding-inline-end: 4px;
}
.smart-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text);
  text-align: start;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background .14s ease, border-color .14s ease;
}
.smart-select-option:hover,
.smart-select-option.selected {
  background: var(--brand-cream);
  border-color: var(--brand-gold);
}
.smart-select-option span { font-weight: 700; }
.smart-select-option small { color: var(--muted); direction: ltr; }
.smart-select-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  gap: 8px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--muted);
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================================
   14. File uploads
   ============================================================================ */
.file-upload-field { display: grid; gap: 8px; }
.file-upload-field.is-dragging {
  padding: 8px;
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}
.file-upload-field small { color: var(--muted); }
.file-upload-preview,
.grid-file-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.file-upload-empty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--muted);
  font-weight: 700;
}
.file-preview-thumb,
.grid-file-thumb {
  display: inline-grid;
  place-items: center;
  color: var(--text);
  text-decoration: none;
}
.file-preview-thumb img,
.grid-file-thumb img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.file-preview-thumb span {
  max-width: 130px;
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-preview-chip,
.grid-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  max-width: 220px;
  padding: 6px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  text-decoration: none;
  font-weight: 700;
}
.file-preview-chip span,
.grid-file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================================
   15. Bootstrap modal polish
   ============================================================================ */
.modal-content {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.modal-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
}
.modal-title { font-weight: 800; }
.modal-footer { border-top: 1px solid var(--border); }

/* ============================================================================
   16. Final workspace layout
   ----------------------------------------------------------------------------
   Sidebar stays global; every section works through one wrapped tab rail.
   Contract (ProductionHardeningTests): .unified-workspace stays display: block,
   the rail wraps (flex-wrap: wrap / overflow: visible) and the table keeps a
   predictable fixed layout (table-layout: fixed).
   ============================================================================ */
.unified-workspace {
  display: block;
}
.unified-workspace > input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.workspace-tab-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: flex-start;
  gap: 8px;
  overflow: visible;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.workspace-tab-rail label {
  flex: 1 1 160px;
  min-width: 138px;
  max-width: 230px;
  min-height: 46px;
  display: inline-grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  line-height: 1.3;
  user-select: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.workspace-tab-rail label span {
  min-width: 0; /* يسمح لعمود النص بالانكماش داخل الجريد فلا يطفح فوق الأيقونة */
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 13px;
}
.workspace-tab-rail i {
  width: 32px;
  height: 32px;
  flex-shrink: 0; /* الأيقونة ثابتة الحجم دائمًا فلا تنكمش فوق نص التبويب */
  align-self: center; /* تبقى في منتصف الشريحة حين يلتف النص لسطرين */
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 16px;
}
.workspace-tab-rail label:hover {
  border-color: var(--brand-gold);
  background: var(--brand-cream);
}
.workspace-tab-rail label.is-active {
  border-color: var(--brand-gold);
  background: var(--brand-cream);
  color: var(--brand-navy);
  box-shadow: inset 0 -3px 0 var(--brand-gold);
  font-weight: 800;
}
.workspace-tab-rail label.is-active i {
  background: var(--brand-navy);
  color: var(--brand-gold-light);
}
.workspace-tab-rail label:focus-visible {
  outline: 3px solid rgba(216, 181, 106, .55);
  outline-offset: 2px;
}

/* Optional stage groups rendered by JS filters (may be absent) */
.workspace-rail-stage { display: none; gap: 8px; }
.workspace-rail-stage.is-active { display: flex; flex-wrap: wrap; }
.workspace-stage-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
}
.workspace-stage-chip.is-active {
  border-color: var(--brand-gold);
  background: var(--brand-cream);
  color: var(--brand-navy);
}

/* ----------------------------------------------------------------------------
   Sticky stage switcher (dense workspaces: exams/accounting/inventory/hr…):
   a horizontally-scrollable bar of "logical screen" chips pinned to the top of
   the tabs area, with ONLY the active stage's tabs rendered as a short rail
   beneath it. Keeps the full-width panel near the top so the densest screen
   (exams, 8 stages) needs almost no scrolling, and jumping stages is one click
   without scrolling back up. Reuses the already-wired .workspace-stage-chip.
   ---------------------------------------------------------------------------- */
.workspace-stage-switcher {
  position: sticky;
  top: var(--workspace-sticky-top, 0px);
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  padding-bottom: 8px;
}
.workspace-stage-switch-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 2px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.workspace-stage-switch-bar .workspace-stage-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-height: 40px;
  gap: 7px;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.workspace-stage-switch-bar .workspace-stage-chip:hover {
  border-color: var(--brand-gold);
  background: var(--brand-cream);
}
.workspace-stage-switch-bar .workspace-stage-chip:focus-visible {
  outline: 3px solid rgba(216, 181, 106, .55);
  outline-offset: 2px;
}
.workspace-stage-switch-bar .workspace-stage-chip.is-active {
  border-color: var(--brand-gold);
  background: var(--brand-navy);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--brand-gold);
}
.workspace-stage-chip-num {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px; font-weight: 800;
}
.workspace-stage-switch-bar .workspace-stage-chip.is-active .workspace-stage-chip-num {
  background: var(--brand-gold);
  color: var(--brand-navy);
}
.workspace-stage-chip-title { white-space: nowrap; font-size: 13px; }
.workspace-stage-chip-count {
  flex-shrink: 0;
  min-width: 18px; height: 18px;
  display: inline-grid; place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px; font-weight: 800;
}
.workspace-stage-switch-bar .workspace-stage-chip.is-active .workspace-stage-chip-count {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}
.workspace-stage-chip.is-setup { border-style: dashed; }
.workspace-stage-chip.is-setup .workspace-stage-chip-num {
  background: transparent;
  color: var(--brand-gold);
}
.workspace-switch-active-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 2px 10px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.workspace-switch-active-hint > i { color: var(--primary); font-size: 15px; flex-shrink: 0; }
.workspace-switch-active-hint strong { color: var(--brand-navy); font-weight: 800; }
.workspace-tab-rail.workspace-switch-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
/* اللوح يقفز تحت الشريط اللاصق دون أن يختفي رأسه خلفه عند النقر على chip نشط (href=#panel) */
.workspace-panel { scroll-margin-top: 140px; }
@media (max-width: 640px) {
  .workspace-stage-chip-count { display: none; }
  .workspace-panel { scroll-margin-top: 96px; }
}
@media print {
  .workspace-stage-switcher { position: static; }
  .workspace-stage-switch-bar { overflow: visible; flex-wrap: wrap; }
}

/* ----------------------------------------------------------------------------
   Stage-grouped tab rail (dense workspaces): the shared .workspace-tab-rail
   keeps site.js label wiring intact; .workspace-stage-rail turns it into a
   vertical list of ordered stage cards (number + icon + title + short details)
   with an RTL-consistent 1→2→3 sequence connector between cards.
   ---------------------------------------------------------------------------- */
.workspace-tab-rail.workspace-stage-rail {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 20px;
}
.workspace-stage-group {
  position: relative;
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  padding: 12px 14px 14px;
}
/* Downward sequence arrow linking each stage to the next (symmetric, direction-agnostic) */
.workspace-stage-rail .workspace-stage-group:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-inline-start: 6px solid transparent;
  border-inline-end: 6px solid transparent;
  border-top: 8px solid var(--brand-gold);
}
.workspace-stage-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
details.workspace-stage-group > summary.workspace-stage-group-head {
  margin-bottom: 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
details.workspace-stage-group > summary.workspace-stage-group-head::-webkit-details-marker { display: none; }
details.workspace-stage-group[open] > summary.workspace-stage-group-head { margin-bottom: 10px; }
.workspace-stage-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-navy);
  color: var(--brand-gold-light);
  font-weight: 800;
  font-size: 13px;
}
.workspace-stage-ico {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 15px;
}
.workspace-stage-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
  flex: 1 1 auto;
}
.workspace-stage-meta strong {
  color: var(--brand-navy);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}
.workspace-stage-details {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
.workspace-stage-setup-hint { color: var(--brand-gold); }
.workspace-stage-group-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.workspace-stage-group--setup {
  border-style: dashed;
  border-color: var(--border-strong);
  background: var(--surface);
}
.workspace-stage-group--setup .workspace-setup-count {
  flex-shrink: 0;
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}
.workspace-stage-caret {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform .18s ease;
}
details.workspace-stage-group[open] > summary .workspace-stage-caret { transform: rotate(180deg); }

/* ----------------------------------------------------------------------------
   Side-box hub (شؤون الطلاب): the shared .workspace-tab-rail keeps site.js label
   wiring intact; .workspace-sidebox-rail turns it into a responsive grid of
   self-contained stage boxes laid side by side (stacks on narrow screens). Each
   box lists its items as full-width rows; clicking one switches the panel below
   through the same radio+label mechanism. Numbers 1→4 imply the suggested flow.
   ---------------------------------------------------------------------------- */
.workspace-sidebox-flow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 9px 12px;
  border: 1px dashed var(--brand-gold);
  border-radius: var(--radius-sm);
  background: var(--brand-cream);
  color: var(--brand-navy);
  font-size: 12.5px;
  line-height: 1.6;
}
.workspace-sidebox-flow > i { color: var(--brand-gold); font-size: 16px; flex-shrink: 0; }
.workspace-sidebox-flow strong { color: var(--brand-navy); font-weight: 800; }

.workspace-tab-rail.workspace-sidebox-rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 14px;
  align-items: start;
}
.workspace-sidebox {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  padding: 12px 12px 13px;
  min-width: 0;
}
.workspace-sidebox-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.workspace-sidebox-num {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-navy);
  color: var(--brand-gold-light);
  font-weight: 800; font-size: 12px;
}
.workspace-sidebox-ico {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 15px;
}
.workspace-sidebox-meta { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.workspace-sidebox-meta strong { color: var(--brand-navy); font-size: 13.5px; font-weight: 800; line-height: 1.3; }
.workspace-sidebox-hint { color: var(--muted); font-size: 11.5px; font-weight: 500; line-height: 1.45; }
.workspace-sidebox-items { display: flex; flex-direction: column; gap: 6px; }

/* Each item reuses the tab <label> but renders as a full-width row inside its box.
   Selectors carry extra classes so they outrank the base .workspace-tab-rail label,
   label span and label i rules (including the .is-active i inversion). */
.workspace-tab-rail .workspace-sidebox-item {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 42px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.workspace-tab-rail .workspace-sidebox-item:hover {
  border-color: var(--brand-gold);
  background: var(--brand-cream);
}
.workspace-tab-rail .workspace-sidebox-item.is-active {
  border-color: var(--brand-gold);
  background: var(--brand-cream);
  color: var(--brand-navy);
  box-shadow: inset 0 0 0 1px var(--brand-gold);
  font-weight: 800;
}
.workspace-tab-rail .workspace-sidebox-item > .workspace-sidebox-item-ico {
  width: 26px; height: 26px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 14px;
}
.workspace-tab-rail .workspace-sidebox-item.is-active > .workspace-sidebox-item-ico {
  background: var(--brand-navy);
  color: var(--brand-gold-light);
}
.workspace-tab-rail .workspace-sidebox-item > .workspace-sidebox-item-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.workspace-tab-rail .workspace-sidebox-item > .workspace-sidebox-go {
  width: auto; height: auto;
  min-width: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  background: none;
  border-radius: 0;
  color: var(--muted);
  font-size: 12px;
  opacity: .5;
}
.workspace-tab-rail .workspace-sidebox-item.is-active > .workspace-sidebox-go {
  color: var(--brand-gold);
  opacity: 1;
}
@media (max-width: 560px) {
  .workspace-tab-rail.workspace-sidebox-rail { grid-template-columns: 1fr; }
}

.workspace-panels { min-width: 0; }
.workspace-panel {
  display: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  animation: riseIn .18s ease;
}
.workspace-panel.is-active { display: block; }

.workspace-module-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}
.workspace-module-head h3 { margin: 0; font-size: 18px; }
.workspace-module-head p { margin: 0; color: var(--muted); }
.workspace-module-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.workspace-module-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 16px;
}
.workspace-form-card,
.workspace-data-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.workspace-form-card { padding: 14px; background: var(--surface-soft); }
.workspace-data-card { overflow: hidden; }

.workspace-form-section-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 10px;
  border-inline-start: 3px solid var(--brand-gold);
  border-radius: 8px;
  background: var(--brand-cream);
  color: var(--brand-navy);
  font-weight: 800;
  font-size: 13.5px;
}
.workspace-form-section-title i { color: var(--brand-maroon); }

.workspace-crud-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  align-items: end;
}
.workspace-crud-form .field span:first-child { color: var(--muted); font-weight: 700; }
.workspace-crud-form .crud-actions { grid-column: 1 / -1; }
.workspace-crud-form textarea.form-control,
.crud-form textarea.form-control { min-height: 78px; }

/* Workspace tables: fixed layout for calm columns; JS flips wide tables
   (>5 data columns) to a scrollable auto layout via has-wide-workspace-table
   and --workspace-column-count. */
.workspace-data-card .table-responsive { width: 100%; overflow-x: auto; }
.workspace-table {
  width: 100%;
  margin: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.workspace-data-card .table-responsive.has-wide-workspace-table .workspace-table {
  table-layout: auto;
  /* ميزانية العمود كانت 132px فتتجاوز الجداول ذات 9+ أعمدة عرض شاشة 15 بوصة (1366px) ويظهر
     سكرول سفلي ويُقص آخر عمود. 104px + سماح العناوين بالالتفاف يُدخل الجداول المعتادة في الشاشة. */
  min-width: max(100%, calc(var(--workspace-column-count, 7) * 104px + 96px));
}
.workspace-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--thead-bg);
  color: var(--thead-text);
  border: 0;
  border-bottom: 2px solid var(--brand-gold);
  padding: 10px 9px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: middle;
}
.workspace-table tbody td {
  max-width: 260px;
  padding: 9px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.55;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  vertical-align: middle;
}
.workspace-table tbody tr:nth-child(even) td { background: var(--surface-soft); }
.workspace-table tbody tr:hover td { background: var(--gold-hover); }

/* Sticky actions column (inline-end) so row actions never scroll away */
.workspace-table .actions-col,
.workspace-table .row-actions {
  width: 108px;
  min-width: 108px;
  max-width: 108px;
  text-align: center;
}
.workspace-table td.row-actions,
.workspace-table th.actions-col {
  position: sticky;
  inset-inline-end: 0;
}
.workspace-table th.actions-col {
  z-index: 5;
  background: var(--brand-navy);
}
.workspace-table td.row-actions {
  z-index: 2;
  background: var(--surface);
  box-shadow: -8px 0 14px rgba(14, 32, 56, .06);
  display: table-cell;
}
.workspace-table tbody tr:nth-child(even) td.row-actions { background: var(--surface-soft); }
.workspace-table tbody tr:hover td.row-actions { background: var(--brand-cream); }
.workspace-table .row-actions .grid-action-btn { margin-inline: 2px; }
.workspace-table .empty-row td { white-space: normal; }

/* ============================================================================
   17. Workspace overview — hero / search / stats / templates
   ============================================================================ */
.workspace-overview-shell {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}
.workspace-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(600px 240px at 90% -30%, rgba(216, 181, 106, .2), transparent 60%),
    linear-gradient(135deg, #14304f 0%, var(--brand-navy) 75%);
  color: #f2f6fb;
  box-shadow: var(--shadow);
}
.workspace-hero-card .eyebrow { color: var(--brand-gold-light); }
.workspace-hero-card h2 { color: #fff; }
.workspace-hero-card p { margin: 0; color: #c4d2e2; }
.workspace-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #c4d2e2; margin-bottom: 6px; }
.workspace-breadcrumb i { font-size: 11px; }
.workspace-hero-cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.workspace-hero-cta .btn-primary {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-navy);
  font-weight: 800;
}
.workspace-hero-cta .btn-primary:hover {
  background: var(--brand-gold-light);
  border-color: var(--brand-gold-light);
  color: var(--brand-navy);
}

.workspace-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.workspace-stat-strip article {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.workspace-stat-strip i {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 18px;
}
.workspace-stat-strip span { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.workspace-stat-strip strong { font-size: 19px; font-weight: 900; }
.workspace-stat-strip article.is-primary {
  border-color: rgba(216, 181, 106, .55);
  background: var(--brand-cream);
}
.workspace-stat-strip article.is-primary i {
  background: var(--brand-navy);
  color: var(--brand-gold-light);
}
.workspace-stat-strip article.is-primary strong { color: var(--brand-navy); }

.workspace-search-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.workspace-global-search { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.workspace-context-input { flex: 1 1 320px; min-width: 220px; }

.workspace-template-strip {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
}
.workspace-template-title {
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.workspace-template-title > i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 22px;
}
.workspace-template-title strong { display: block; margin-top: 3px; font-size: 16px; font-weight: 800; }
.workspace-template-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}
.workspace-template-chip {
  min-height: 84px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 3px 10px;
  align-content: center;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.workspace-template-chip:hover {
  transform: translateY(-1px);
  border-color: var(--brand-gold);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}
.workspace-template-chip i {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 19px;
}
.workspace-template-chip span { font-weight: 800; }
.workspace-template-chip small { min-width: 0; color: var(--muted); line-height: 1.55; white-space: normal; }

/* ============================================================================
   18. Excel bulk entry & inline import
   ============================================================================ */
.excel-bulk-entry {
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.excel-bulk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.excel-bulk-head strong { display: block; font-size: 15.5px; }
.excel-bulk-scroll {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.excel-bulk-table {
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  direction: rtl;
}
.excel-bulk-table th,
.excel-bulk-table td {
  padding: 8px;
  border-inline-end: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.excel-bulk-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--primary-soft);
  color: var(--brand-navy);
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}
.excel-bulk-table td:first-child,
.excel-bulk-table th:first-child,
.excel-bulk-table td:last-child,
.excel-bulk-table th:last-child { width: 64px; text-align: center; }
.excel-bulk-table .form-control,
.excel-bulk-table .form-select,
.excel-bulk-table .smart-select-trigger {
  min-height: 34px;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--surface);
}
.excel-row-number {
  background: var(--brand-cream);
  color: var(--brand-maroon);
  font-weight: 900;
}

/* Quick-entry sheet preview (Modules page) */
.excel-entry-sheet {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.excel-entry-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.excel-entry-title strong,
.excel-entry-title span { display: block; }
.excel-entry-title span { color: var(--muted); font-size: 13px; }
.excel-entry-columns {
  display: grid;
  grid-template-columns: 42px repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--border-strong);
}
.excel-entry-columns span {
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 6px 8px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 800;
  text-align: center;
}
.excel-entry-columns .excel-index { background: var(--primary-soft); color: var(--primary); }

.inline-import-panel {
  margin: 12px 0;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-soft);
}
.inline-import-panel[open] { border-style: solid; background: var(--surface); box-shadow: var(--shadow-xs); }
.inline-import-panel summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  cursor: pointer;
  color: var(--primary);
  font-weight: 800;
  list-style: none;
  user-select: none;
}
.inline-import-panel summary::-webkit-details-marker { display: none; }
.inline-import-panel summary i { color: var(--accent); }
.inline-import-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  align-items: end;
  padding: 0 14px 14px;
}
.inline-import-form input[type="file"] { background: var(--surface); }
.inline-import-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.compact-inline-import { margin-top: 8px; }

/* ============================================================================
   19. Import center & report designer
   ============================================================================ */
.import-center { padding: 16px; }
.import-workflow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}
.import-path { grid-column: 1 / -1; }
.import-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; grid-column: 1 / -1; }

.import-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.import-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.import-card i {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 20px;
}
.import-card strong { font-weight: 800; }
.import-card span { color: var(--muted); font-size: 13px; line-height: 1.65; }

.import-steps { display: grid; gap: 8px; margin-top: 10px; }
.import-steps span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text);
  font-weight: 600;
}
.import-steps i { color: var(--brand-maroon); }

.import-stage-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 8px;
  margin: 14px 0;
}
.import-stage-track span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.import-stage-track span.active {
  border-color: var(--brand-gold);
  background: var(--brand-cream);
  color: var(--brand-navy);
}

.template-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.template-card {
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.template-card:hover {
  transform: translateY(-1px);
  border-color: var(--brand-gold);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}
.template-card i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary);
}
.template-card span,
.template-card small { display: block; }
.template-card small { color: var(--muted); font-weight: 600; line-height: 1.5; }
.primary-template { border-color: rgba(15, 139, 98, .4); background: var(--accent-soft); }

.import-file-review { display: grid; gap: 14px; }
.import-file-card,
.import-sheet-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.import-file-card { padding: 14px; box-shadow: var(--shadow-xs); }
.import-file-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.import-file-title strong { display: block; color: var(--text); }
.import-file-title span { display: block; color: var(--muted); font-size: 13px; }
.import-file-title i {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 19px;
}
.import-sheet-card { margin-top: 8px; padding: 0; overflow: hidden; }
.import-sheet-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  background: var(--surface-soft);
  font-weight: 700;
}
.import-sheet-card summary small { color: var(--muted); font-weight: 600; }
.import-sheet-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 14px;
  padding: 12px;
}
.import-chip-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.import-mapping-list {
  margin: 8px 0 0;
  padding: 0 18px 0 0;
  color: var(--text);
  line-height: 1.8;
  font-size: 13.5px;
}

.design-hero { min-height: 200px; }
.designer-template-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.designer-template {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  text-align: start;
  font-weight: 700;
  transition: border-color .14s ease, background .14s ease;
}
.designer-template:hover {
  border-color: var(--brand-gold);
  background: var(--brand-cream);
}
.designer-template i { color: var(--brand-maroon); font-size: 18px; }
.designer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.designer-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}
.designer-check input { accent-color: var(--primary); }

/* ============================================================================
   20. Bulk operation modals (attendance / grades / levels)
   ============================================================================ */
.bulk-attendance-card { display: grid; gap: 14px; }
.bulk-attendance-card .crud-title p { margin: 4px 0 0; color: var(--muted); }
.bulk-attendance-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 22px;
}
.bulk-attendance-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, .55fr);
  gap: 10px;
}
.bulk-attendance-actions,
.bulk-attendance-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bulk-attendance-summary,
.bulk-attendance-message {
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
}
.bulk-attendance-message.is-error {
  border-color: #f3cdc9;
  background: var(--danger-soft);
  color: var(--danger);
}

.bulk-attendance-modal {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: grid;
  place-items: center;
  padding: 20px;
}
.bulk-attendance-modal[hidden] { display: none; }
.bulk-attendance-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 32, 56, .5);
}
.bulk-attendance-dialog {
  position: relative;
  z-index: 1;
  width: min(1180px, 96vw);
  max-height: 88vh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.bulk-attendance-head,
.bulk-attendance-toolbar {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.bulk-attendance-head { background: var(--brand-navy); color: #fff; }
.bulk-attendance-head h3 { margin: 0; color: #fff; }
.bulk-attendance-head p { margin: 0; color: #c4d2e2; font-size: 13px; }
.bulk-attendance-toolbar { align-items: center; flex-wrap: wrap; background: var(--surface-soft); }
.bulk-attendance-counts { color: var(--accent); font-weight: 900; }
.bulk-attendance-counts.has-invalid { color: var(--danger); }
.bulk-attendance-list {
  overflow: auto;
  display: grid;
  gap: 8px;
  padding: 12px;
  background: var(--surface-sunken);
}
.bulk-attendance-row {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(430px, 1.2fr) minmax(220px, .7fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.bulk-student-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bulk-student-cell strong,
.bulk-student-cell small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bulk-student-cell small { color: var(--muted); font-weight: 700; }
.bulk-row-number {
  width: 34px;
  height: 34px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 900;
}
.bulk-status-group {
  display: grid;
  grid-template-columns: repeat(5, minmax(78px, 1fr));
  gap: 6px;
}
.bulk-status-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--text);
  font-weight: 800;
}
.bulk-status-btn.is-active { color: #fff; box-shadow: var(--shadow-sm); }
.bulk-status-btn.present.is-active { background: var(--accent); border-color: var(--accent); }
.bulk-status-btn.absent.is-active { background: var(--danger); border-color: var(--danger); }
.bulk-status-btn.late.is-active { background: #c97a10; border-color: #c97a10; }
.bulk-status-btn.excused.is-active { background: var(--info); border-color: var(--info); }
.bulk-status-btn.early.is-active { background: var(--brand-maroon); border-color: var(--brand-maroon); }
.bulk-reason-input { min-width: 0; }
.bulk-attendance-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 700;
}

/* Grades variant */
.bulk-grade-card { display: grid; gap: 14px; }
.bulk-grade-list { overflow-x: visible; }
.bulk-grade-row {
  grid-template-columns: minmax(220px, 1fr) minmax(130px, 160px) minmax(140px, .65fr);
}
.bulk-grade-input-wrap {
  display: grid;
  gap: 5px;
  margin: 0;
  color: var(--text);
  font-weight: 800;
}
.bulk-grade-input-wrap input { max-width: 180px; text-align: center; font-weight: 800; }
.bulk-grade-input-wrap input.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 .18rem rgba(180, 35, 24, .12);
}

/* Level assessments variant */
.bulk-level-row {
  grid-template-columns: minmax(230px, 1fr) minmax(240px, .9fr) minmax(110px, .35fr) minmax(180px, .7fr);
}
.bulk-level-choices {
  display: grid;
  grid-template-columns: repeat(4, minmax(46px, 1fr));
  gap: 8px;
}
.level-choice {
  min-height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-weight: 900;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.level-choice:hover,
.level-choice.active { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.level-choice.active {
  border-color: var(--brand-gold);
  background: var(--brand-cream);
  color: var(--brand-navy);
}
.bulk-level-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}

/* Professional evaluation variant (شاشة التقييم المهني): اسم الموظف، ثلاث نسب، متوسط آلي للقراءة فقط، تقرير عريض */
.bulk-eval-row {
  grid-template-columns: minmax(200px, 1fr) minmax(90px, 110px) minmax(90px, 110px) minmax(90px, 110px) minmax(90px, 110px) minmax(260px, 1.4fr);
  align-items: start;
}
.bulk-eval-row .bulk-grade-input-wrap input { max-width: 100px; }
.bulk-eval-average {
  display: grid;
  gap: 5px;
  margin: 0;
  color: var(--text);
  font-weight: 800;
  text-align: center;
}
.bulk-eval-average strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
}
.report-wide-col { display: grid; gap: 5px; margin: 0; color: var(--text); font-weight: 800; }
.report-wide-col input { width: 100%; font-weight: 600; }

/* ============================================================================
   21. Control hub & control-grade grid (Egyptian exam control)
   ============================================================================ */
.control-hub-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--brand-maroon);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.control-hub-head,
.control-stage-title { display: flex; align-items: center; gap: 12px; }
.control-hub-icon,
.control-stage-title > i {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(122, 15, 34, .18);
  background: rgba(122, 15, 34, .07);
  color: var(--brand-maroon);
  font-size: 21px;
}
.control-hub-head h4,
.control-stage-title strong { margin: 0; color: var(--text); font-weight: 800; }
.control-hub-head p,
.control-stage-card p,
.control-stage-title span { margin: 4px 0 0; color: var(--muted); line-height: 1.7; }
.control-hub-actions,
.control-stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.control-hub-action {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 3px 10px;
  align-items: center;
  min-height: 76px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
.control-hub-action:hover {
  border-color: var(--brand-gold);
  color: var(--brand-navy);
  box-shadow: var(--shadow-sm);
}
.control-hub-action i {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary);
}
.control-hub-action span { font-weight: 800; }
.control-hub-action small { color: var(--muted); line-height: 1.55; }
.control-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
}
.control-check {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
.control-check:hover,
.control-report-chip:hover {
  border-color: var(--brand-gold);
  color: var(--brand-navy);
  transform: translateY(-1px);
}
.control-check strong {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-maroon);
  color: #fff;
  font-weight: 900;
}
.control-check span,
.control-report-chip span { font-weight: 800; }
.control-check small,
.control-report-chip small { color: var(--muted); line-height: 1.45; }
.control-stage-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.control-stage-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.control-stage-steps span {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--brand-cream);
  color: var(--brand-navy);
  font-size: 12.5px;
  font-weight: 700;
}
.control-report-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.control-report-chip {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
.control-report-chip i {
  grid-row: span 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary);
}

/* Control grade entry grid (JS-rendered composite sheet). Sticky serial +
   name columns on the inline-start side; sticky navy header. */
.control-grade-grid-wrap {
  width: 100%;
  max-height: 70vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.control-grade-grid {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  direction: rtl;
  font-size: 13px;
}
.control-grade-grid th,
.control-grade-grid td {
  padding: .55rem;
  border-bottom: 1px solid var(--border);
  border-inline-start: 1px solid var(--surface-sunken);
  vertical-align: middle;
  white-space: nowrap;
}
.control-grade-grid thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--brand-navy-800);
  color: #fff;
  font-weight: 800;
  text-align: center;
}
.control-grade-grid th small {
  display: block;
  margin-top: .15rem;
  color: var(--brand-gold-light);
  font-size: .74rem;
  font-weight: 700;
}
.control-grade-sticky {
  position: sticky;
  right: 0;
  z-index: 3;
  min-width: 52px;
  background: var(--surface);
  text-align: center;
  font-weight: 900;
}
.control-grade-sticky-name {
  position: sticky;
  right: 52px;
  z-index: 3;
  min-width: 250px;
  max-width: 310px;
  background: var(--surface);
}
.control-grade-grid thead .control-grade-sticky,
.control-grade-grid thead .control-grade-sticky-name {
  z-index: 5;
  background: var(--brand-navy-800);
}
.control-grade-student strong {
  display: block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.control-grade-student small {
  display: block;
  color: var(--muted);
  direction: ltr;
  text-align: right;
  font-weight: 700;
}
.control-grade-cell-input {
  min-width: 112px;
  text-align: center;
  font-weight: 800;
}
/* توزيع الدرجات: محرر أعمدة كشف الرصد القابل للتخصيص - جدول أعمدة بسيط لا شبكة طالب×مكون. */
.grade-distribution-editor { display: grid; gap: 10px; }
.grade-distribution-columns { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.grade-distribution-table { width: 100%; min-width: 520px; border-collapse: collapse; direction: rtl; font-size: 13px; }
.grade-distribution-table th,
.grade-distribution-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.grade-distribution-table thead th { background: var(--surface-soft); font-weight: 800; text-align: center; }
.grade-distribution-table [data-dist-name] { min-width: 180px; }
.grade-distribution-table [data-dist-max] { min-width: 90px; text-align: center; }
.control-grade-note { min-width: 180px; }
.control-grade-cell-input.is-invalid {
  border-color: var(--danger);
  background: var(--danger-soft);
  box-shadow: 0 0 0 .16rem rgba(180, 35, 24, .14);
}
.control-grade-group-head {
  border-inline-start-width: 2px;
  border-inline-start-color: rgba(255, 255, 255, .25);
}
.control-grade-entry-head {
  background: var(--brand-navy-700);
  font-size: .78rem;
  font-weight: 700;
}
.control-grade-entry-head small { color: var(--brand-gold-light); font-size: .7rem; }
.control-grade-total-head { background: var(--brand-navy); min-width: 100px; }
.control-grade-total {
  text-align: center;
  font-weight: 900;
  background: var(--surface-soft);
  color: var(--brand-navy);
}
.control-grade-total.is-over { color: var(--danger); background: var(--danger-soft); }

/* ============================================================================
   22. Student 360
   ============================================================================ */
.student-360-card {
  margin: 0 0 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.student-360-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.student-avatar {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: var(--brand-cream);
  color: var(--brand-maroon);
  font-size: 26px;
}
.student-360-head h2 { margin: 2px 0 4px; font-size: 23px; }
.student-360-head p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: var(--muted);
}
.student-360-head p span:not(:empty) {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  font-weight: 700;
  font-size: 13px;
}
.student-360-actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.student-360-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.student-360-stats article,
.student-360-tabs article {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.student-360-stats article { padding: 12px; display: grid; gap: 4px; }
.student-360-stats i { color: var(--primary); font-size: 19px; }
.student-360-stats span { color: var(--muted); font-weight: 700; font-size: 12px; }
.student-360-stats strong { color: var(--text); font-size: 21px; }
.student-360-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.student-360-tabs article { padding: 12px; min-height: 140px; }
.student-360-tabs h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14.5px;
  color: var(--brand-navy);
}
.student-360-tabs p {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid var(--surface-sunken);
  color: var(--text);
  font-size: 13px;
}
.student-360-tabs p:first-of-type { border-top: 0; }
.student-360-tabs p strong,
.student-360-tabs p span { min-width: 0; overflow-wrap: anywhere; }
.student-360-empty { background: var(--surface-soft); }
.student-360-empty .student-avatar { color: var(--muted); background: var(--surface-sunken); }

/* Tabbed 360 view (JS-driven) */
.student-360-tabs[data-student360-tabs] {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.student-360-nav { display: grid; gap: 8px; position: sticky; top: 78px; }
.student-360-nav button {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  text-align: start;
  transition: background .16s ease, border-color .16s ease;
}
.student-360-nav button:hover,
.student-360-nav button.is-active {
  border-color: var(--brand-gold);
  background: var(--brand-cream);
  color: var(--brand-navy);
}
.student-360-nav i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary);
}
.student-360-panel-wrap { min-width: 0; }
.student-360-panel { display: none; min-height: 260px; }
.student-360-panel.is-active { display: grid; gap: 8px; }
.student-360-panel h3 { padding-bottom: 10px; border-bottom: 1px solid var(--border); }

/* ============================================================================
   23. Roles & permissions screen (rp-*) — screen-granular permission editor.
   Carried over from the purpose-built implementation; colors harmonized to
   the identity palette. Replaces the old .permission-* implementation.
   ============================================================================ */
.rp-shell { display: flex; flex-direction: column; gap: 20px; }

.rp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.rp-stat-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px 18px; box-shadow: var(--shadow-xs);
}
.rp-stat-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary); font-size: 20px; flex-shrink: 0;
}
.rp-stat-card strong { display: block; font-size: 1.4rem; color: var(--text); line-height: 1.2; }
.rp-stat-card span { color: var(--muted); font-size: .82rem; }

.rp-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px;
}
.rp-header .eyebrow { color: var(--brand-maroon); font-size: .78rem; font-weight: 700; }
.rp-header h2 { margin: 4px 0; font-size: 1.3rem; }
.rp-header p { margin: 0; color: var(--muted); font-size: .86rem; max-width: 640px; }
.rp-header-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.rp-role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.rp-role-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px;
  box-shadow: var(--shadow-xs);
}
.rp-role-top { display: flex; align-items: flex-start; justify-content: space-between; }
.rp-role-avatar {
  width: 46px; height: 46px; border-radius: var(--radius); display: grid; place-items: center; font-size: 20px; color: #fff;
}
.rp-role-top-actions { display: flex; gap: 6px; }
.rp-icon-btn {
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-soft);
  color: var(--muted); display: grid; place-items: center; cursor: pointer;
}
.rp-icon-btn:hover { background: var(--primary-soft); color: var(--primary); }
.rp-icon-btn-danger:hover { background: var(--danger-soft); color: var(--danger); }
.rp-role-card h4 { margin: 4px 0 0; font-size: 1.02rem; }
.rp-role-card code { color: var(--muted); font-size: .78rem; direction: ltr; display: inline-block; }
.rp-role-card p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.rp-role-progress { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.rp-role-progress span { color: var(--muted); font-size: .74rem; white-space: nowrap; }
.rp-progress-track { flex: 1; height: 7px; border-radius: 5px; background: var(--surface-sunken); overflow: hidden; }
.rp-progress-track i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--accent), #34c78e); }
.rp-role-progress b { font-size: .78rem; color: var(--text); }
.rp-role-metrics { display: flex; gap: 14px; color: var(--muted); font-size: .8rem; }
.rp-role-metrics b { color: var(--text); }
.rp-role-open {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px;
  padding: 8px 12px; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary);
  font-weight: 700; font-size: .86rem; text-decoration: none;
}
.rp-role-open:hover { background: var(--brand-cream); color: var(--brand-navy); }
.rp-role-card > small { color: var(--muted); font-size: .74rem; text-align: center; }

.rp-color-red { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.rp-color-gold { background: linear-gradient(135deg, var(--brand-gold-light), #b8860b); }
.rp-color-blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.rp-color-green { background: linear-gradient(135deg, #22c55e, #15803d); }
.rp-color-teal { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.rp-color-amber { background: linear-gradient(135deg, #f59e0b, #b45309); }
.rp-color-indigo { background: linear-gradient(135deg, #6366f1, #4338ca); }
.rp-color-slate { background: linear-gradient(135deg, #64748b, #334155); }
.rp-color-pink { background: linear-gradient(135deg, #ec4899, #be185d); }
.rp-color-cyan { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.rp-color-rose { background: linear-gradient(135deg, #fb7185, #be123c); }
.rp-color-violet { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.rp-color-brown { background: linear-gradient(135deg, #a16207, #78350f); }

.rp-overview {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px;
}
.rp-overview-head h3 { margin: 0 0 2px; font-size: 1.05rem; }
.rp-overview-head p { margin: 0; color: var(--muted); font-size: .8rem; }
.rp-overview-scroll { overflow: auto; margin-top: 12px; max-height: 460px; }
.rp-overview-table { border-collapse: collapse; width: 100%; font-size: .8rem; }
.rp-overview-table th, .rp-overview-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
.rp-overview-table thead th { position: sticky; top: 0; background: var(--surface-soft); z-index: 2; color: var(--muted); font-weight: 700; }
.rp-sticky-col { position: sticky; right: 0; background: var(--surface); z-index: 1; text-align: right; min-width: 220px; }
.rp-overview-table thead .rp-sticky-col { z-index: 3; }
.rp-overview-table td.rp-sticky-col { display: flex; align-items: center; gap: 8px; }
.rp-overview-table td.rp-sticky-col i { color: var(--primary); }
.rp-overview-table td.rp-sticky-col strong { display: block; font-size: .82rem; }
.rp-overview-table td.rp-sticky-col small { color: var(--muted); font-size: .72rem; }
.rp-cell {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; border-radius: 8px;
  font-size: .74rem; font-weight: 700; text-decoration: none;
}
.rp-cell-full { background: var(--accent-soft); color: #0c7252; }
.rp-cell-partial { background: var(--warning-soft); color: var(--warning); }
.rp-cell-empty { background: var(--surface-sunken); color: #94a3b8; }

.rp-overlay { position: fixed; inset: 0; z-index: 1050; display: none; }
.rp-overlay.is-open { display: block; }
.rp-overlay-backdrop { position: absolute; inset: 0; background: rgba(14, 32, 56, .5); }
/* محرر الصلاحيات: كان شريطًا جانبيًا ضيقًا (640px) يقسم المحتوى - أصبح لوحة عريضة تكاد تملأ
   الشاشة (طلب صاحب المدرسة)، والشجرة بداخلها تطابق أقسام القائمة الجانبية نفسها. */
.rp-editor-panel {
  position: absolute; inset: 12px; margin: auto;
  width: min(1360px, calc(100vw - 24px)); height: calc(100vh - 24px);
  background: var(--surface); box-shadow: var(--shadow-lg); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
}
/* قسم رئيسي مطابق للسايدبار: يُفتح ويُطوى بالضغط، وبداخله الشاشات المجمّعة حسب مساحات العمل. */
.rp-cat { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.rp-cat > summary {
  display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer;
  padding: 12px 16px; background: var(--brand-navy); color: #fff; font-weight: 800; font-size: .95rem;
}
.rp-cat > summary::-webkit-details-marker { display: none; }
.rp-cat > summary i.bi { color: var(--brand-gold); }
.rp-cat > summary .rp-cat-count { color: rgba(255, 255, 255, .75); font-size: .76rem; font-weight: 600; }
.rp-cat > summary .rp-cat-caret { margin-inline-start: auto; transition: transform .15s ease; }
.rp-cat[open] > summary .rp-cat-caret { transform: rotate(180deg); }
.rp-cat > summary .rp-select-all { color: var(--brand-gold); }
.rp-cat-body { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; }
.rp-ws-title {
  display: flex; align-items: center; gap: 8px; color: var(--brand-maroon);
  font-size: .8rem; font-weight: 800; margin-top: 2px;
}
.rp-ws-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.rp-editor-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.rp-editor-header h3 { margin: 0; font-size: 1.05rem; }
.rp-editor-close { width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--muted); background: var(--surface-soft); }
.rp-editor-close:hover { background: var(--danger-soft); color: var(--danger); }
.rp-editor-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.rp-editor-role-chip { margin-inline-start: auto; color: var(--muted); font-size: .84rem; }
.rp-editor-role-chip strong { color: var(--primary); }
/* min-height:0 ضروري: عنصر flex داخل عمود لا ينكمش تحت حجم محتواه افتراضيًا (min-height:auto)،
   فكان overflow-y:auto لا يعمل إطلاقًا ويُقصّ باقي الأقسام خلف اللوحة (overflow:hidden) بلا اسكرول. */
.rp-editor-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 18px; display: flex; flex-direction: column; gap: 14px; }
/* أبناء العمود المرن لا ينكمشون: بدون هذا كانت الأقسام تُضغط فوق بعضها لتتسع في الارتفاع المتاح
   (فتتراكب وتُقصّ) بدل أن تفيض فيظهر الاسكرول - وهو سبب «مش بينزل بالاسكرول» المُبلَّغ عنه. */
.rp-editor-body > * { flex: 0 0 auto; }
.rp-group-title { display: flex; align-items: center; gap: 8px; color: var(--brand-maroon); font-size: .78rem; font-weight: 800; letter-spacing: .02em; margin-top: 4px; }
.rp-screen-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--surface-soft); }
.rp-screen-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rp-screen-title { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.rp-screen-title i { color: var(--primary); }
.rp-screen-title span { color: var(--muted); font-size: .74rem; }
.rp-select-all { border: none; background: none; color: var(--primary); font-size: .76rem; font-weight: 700; cursor: pointer; padding: 0; }
.rp-action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 14px; }
.rp-check { display: flex; align-items: center; gap: 8px; font-size: .84rem; cursor: pointer; }
.rp-check input { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
.rp-editor-footer { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--border); }
.rp-editor-footer #rpSelectedCount { margin-inline-start: auto; color: var(--muted); font-size: .82rem; }
.rp-role-modal-body { display: flex; flex-direction: column; gap: 12px; }

/* ============================================================================
   24. Timetable & misc
   ============================================================================ */
.timetable-generator-card { padding: 16px; }
.timetable-generator-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  align-items: end;
}
.timetable-generator-form .checkbox-field { min-height: 40px; }

/* ============================================================================
   25. Print
   ============================================================================ */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background: #fff !important; color: #000 !important; } /* print must not inherit tinted surfaces */
  .app-sidebar,
  .topbar,
  .module-toolbar,
  .crud-panel,
  .report-actions,
  .workspace-tab-rail,
  .workspace-overview-shell,
  .workspace-template-strip,
  .toolbar-actions,
  .grid-footer,
  .column-filter-row,
  .row-actions,
  .actions-col,
  .inline-import-panel,
  .btn { display: none !important; } /* interactive chrome never prints */
  .app-main { margin: 0 !important; padding: 0 !important; }
  .content-shell,
  .data-panel,
  .workspace-panel,
  .workspace-data-card,
  .table-responsive {
    margin: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  .workspace-panel { display: block !important; }
  .data-table,
  .workspace-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    font-size: 10px;
  }
  .data-table thead th,
  .data-table tbody td,
  .workspace-table thead th,
  .workspace-table tbody td {
    position: static !important;
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #999 !important;
    padding: 5px 6px !important;
    overflow-wrap: anywhere;
  }
}

/* ============================================================================
   26. Responsive
   ============================================================================ */
@media (max-width: 1200px) {
  .app-sidebar { width: 264px; }
  .app-main { margin-inline-start: 264px; }

  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-panel, .dashboard-panel { grid-column: span 2; }
  .executive-hero { grid-template-columns: 1fr; }
  .ops-grid,
  .action-grid,
  .module-icon-grid,
  .professional-grid,
  .section-stat-grid,
  .alerts-grid,
  .import-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-shell { grid-template-columns: 1fr; }
  .workspace-guide { grid-template-columns: 1fr; }
  .import-stage-track, .template-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .import-sheet-columns { grid-template-columns: 1fr; }
  .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crud-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-template-strip { grid-template-columns: 1fr; }
  .student-360-tabs[data-student360-tabs] { grid-template-columns: 1fr; }
  .student-360-nav { position: static; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .student-360-actions { margin-inline-start: 0; justify-content: flex-start; }
  .bulk-attendance-row { grid-template-columns: 1fr; }
  .bulk-status-group { grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); }
}

@media (max-width: 768px) {
  .app-sidebar { position: static; width: auto; max-height: 340px; }
  .app-main { margin-inline-start: 0; padding: 12px; }

  .topbar,
  .module-toolbar,
  .module-header,
  .hero-panel,
  .grid-header,
  .grid-footer,
  .report-actions,
  .crud-title,
  .panel-title-row { display: block; height: auto; }
  .top-actions,
  .toolbar-actions,
  .pager-actions,
  .search-form { margin-top: 10px; flex-wrap: wrap; }
  .crud-title .btn { margin-top: 10px; }
  .live-badge { margin-top: 10px; white-space: normal; }

  .dashboard-grid,
  .ops-grid,
  .action-grid,
  .module-icon-grid,
  .professional-grid,
  .section-stat-grid,
  .alerts-grid,
  .import-grid,
  .form-grid,
  .crud-form,
  .workspace-crud-form,
  .line-head,
  .line-row,
  .inventory-lines,
  .mini-line,
  .kpi-strip,
  .import-stage-track,
  .template-strip,
  .bulk-attendance-filters { grid-template-columns: 1fr; }
  .hero-panel, .dashboard-panel, .wide-panel, .professional-panel { grid-column: span 1; }
  .span-2 { grid-column: span 1; }
  .executive-hero { padding: 16px; }
  .hero-actions { display: grid; }
  .dashboard-date { min-width: 0; width: 100%; }
  .input-icon { width: 100%; }
  .workspace-context-input { width: 100%; min-width: 0; }
  .workspace-global-search, .workspace-module-tools { display: grid; justify-content: stretch; }

  .workspace-tab-rail label { flex-basis: calc(50% - 8px); max-width: none; }

  .workspace-table .actions-col,
  .workspace-table .row-actions {
    width: 92px;
    min-width: 92px;
    max-width: 92px;
  }
  .workspace-table tbody td,
  .workspace-table thead th { padding: 8px 7px; font-size: 12px; }
  .grid-action-btn { width: 30px; min-width: 30px; height: 30px; }

  .bulk-grade-row { grid-template-columns: 1fr; }
  .bulk-level-row { grid-template-columns: 1fr; }
  .bulk-eval-row { grid-template-columns: 1fr; }
  .student-360-head { align-items: flex-start; }
  .student-360-tabs p { display: grid; }
  .smart-select-dialog { padding: 12px; }

  .rp-editor-panel { width: 100vw; }
  .rp-action-grid { grid-template-columns: 1fr; }
  .rp-role-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   Sidebar two-level nav: main category accordion -> workspace section links
   ============================================================================ */
.side-cat-list { margin-top: 4px; }

.side-cat { margin-bottom: 3px; }

.side-cat-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--sidebar-text);
  font-size: 14px;
  font-weight: 700;
  text-align: start;
}
.side-cat-toggle:hover { background: var(--sidebar-hover); color: #fff; }
.side-cat-toggle span { flex: 1 1 auto; min-width: 0; }

.side-cat-caret {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--sidebar-muted);
  transition: transform .18s ease;
}
.side-cat.is-open > .side-cat-toggle { color: var(--brand-gold-light); }
.side-cat.is-open > .side-cat-toggle .nav-item-icon {
  background: rgba(216, 181, 106, .22);
  color: var(--brand-gold-light);
}
.side-cat.is-open > .side-cat-toggle .side-cat-caret {
  color: var(--brand-gold-light);
  transform: rotate(180deg);
}

.side-cat-panel {
  display: none;
  margin: 2px 0 8px;
  padding-inline-start: 14px;
  border-inline-start: 1px solid rgba(216, 181, 106, .18);
}
.side-cat.is-open > .side-cat-panel { display: block; }

.side-nav .side-cat-link {
  min-height: 36px;
  margin-bottom: 2px;
  padding: 6px 8px;
  gap: 8px;
  font-size: 13px;
}

.side-cat-link-icon {
  width: 24px;
  flex: 0 0 24px;
  display: inline-grid;
  place-items: center;
  font-size: 13px;
  color: inherit;
}

/* Exams workspace refinements */
.seat-plan-hidden { display: none !important; }

.seat-plan-committees {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(14, 32, 56, 0.12);
  border-radius: 12px;
  background: var(--brand-cream, #faf3e3);
}

.seat-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.seat-plan-head > strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-navy, #0e2038);
  font-size: 14px;
}

.seat-plan-split {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.seat-plan-split > span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-navy, #0e2038);
  white-space: nowrap;
}

.seat-plan-split input[data-seat-student-count] { width: 110px; }

.seat-plan-rows {
  display: grid;
  gap: 6px;
}

.seat-plan-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 110px auto;
  gap: 6px;
  align-items: center;
}

.seat-plan-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.seat-plan-foot small { color: rgba(14, 32, 56, 0.65); }

/* ============================================================================
   27. AJAX regions (shared contract) + comfortable table columns
   ============================================================================ */

/* Light loading indicator while a data-ajax-region is being refreshed */
[data-ajax-region] { position: relative; }
[data-ajax-region].ajax-region-loading {
  opacity: .45;
  pointer-events: none;
  transition: opacity .15s ease;
}
[data-ajax-region].ajax-region-loading::after {
  content: "";
  position: absolute;
  top: 22px;
  inset-inline-start: calc(50% - 14px);
  width: 28px;
  height: 28px;
  border: 3px solid rgba(216, 181, 106, .35);
  border-top-color: var(--brand-gold, #d8b56a);
  border-radius: 50%;
  animation: ajax-region-spin .7s linear infinite;
  z-index: 9;
}
@keyframes ajax-region-spin { to { transform: rotate(360deg); } }

/* منع الإدخال المزدوج: تعطيل بصري فوري للزر/الرابط الذي أطلق طلب AJAX أثناء انتظار الرد،
   حتى لا تبدو نقرة ثانية سريعة (أو تركيز غير واضح) وكأنها لم تُسجَّل. */
.is-ajax-busy {
  opacity: .6;
  cursor: wait !important;
  pointer-events: none;
}

@media screen {
  /* Every display table lives inside a horizontally scrollable wrapper so no
     column ever gets squeezed; the page itself never scrolls sideways. */
  .table-responsive,
  .table-wrap,
  .table-scroll,
  .grid-scroll {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  /* جداول البيانات (الموديولات ومساحات العمل): توزيع ثابت بعرض الشاشة والعناوين تلتف على
     سطرين بدل القص - لا سكرول أفقي على شاشات 15 بوصة (طلب صاحب المدرسة). الجداول العريضة
     فعلًا (10+ أعمدة) وحدها تُعلَّم بـ has-wide-workspace-table فتأخذ عرضًا حرًا مع سكرول
     داخل حاويتها فقط. */
  .data-table,
  .workspace-table {
    width: 100%;
    table-layout: fixed;
  }
  .table-responsive.has-wide-workspace-table .data-table,
  .table-responsive.has-wide-workspace-table .workspace-table {
    table-layout: auto;
    min-width: max(100%, calc(var(--workspace-column-count, 7) * 104px + 96px));
  }
  .data-table thead th,
  .workspace-table thead th {
    white-space: normal;
    overflow-wrap: anywhere;
    padding-inline: .45rem;
  }
  .data-table tbody td,
  .workspace-table tbody td {
    padding-inline: .45rem;
    overflow-wrap: anywhere;
  }

  /* جداول التقارير الاحترافية وسجل المراقبة تبقى بعرضها الطبيعي داخل حاوية قابلة للتمرير. */
  .professional-table,
  .audit-table {
    width: 100%;
    table-layout: auto;
  }
  .professional-table thead th,
  .audit-table thead th {
    white-space: nowrap;
    overflow-wrap: normal;
    padding-inline: .75rem;
  }
  .professional-table thead th:not(.actions-col):not(.serial-col):not(:first-child),
  .professional-table tbody td:not(.row-actions):not(.actions-col):not(.serial-col):not(:first-child),
  .audit-table thead th:not(.actions-col):not(.serial-col):not(:first-child),
  .audit-table tbody td:not(.row-actions):not(.actions-col):not(.serial-col):not(:first-child) {
    min-width: 110px;
  }
  .professional-table tbody td,
  .audit-table tbody td {
    padding-inline: .75rem;
  }
}

/* Phone numbers, dates and other numeric cells render left-to-right inside the
   RTL grids (class applied by site.js initLtrCells + available as a utility). */
.cell-ltr,
td.dir-ltr,
th.dir-ltr,
.cell-phone,
.cell-date {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* ============================================================================
   Notification bell (topbar, all screens) + dropdown panel + red badge.
   RTL, brand identity colors. Alerts are computed live; hide/mark-read are
   local (localStorage) only — see the small note in the panel footer.
   ============================================================================ */
.notif-bell { position: relative; display: inline-flex; }

.notif-bell-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(216, 181, 106, .5);
  background: var(--brand-cream);
  color: var(--brand-navy);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.notif-bell-button:hover { background: #fff; border-color: var(--brand-gold); }
.notif-bell-button:active { transform: scale(.96); }
.notif-bell-button i { font-size: 18px; }
.notif-bell.is-open .notif-bell-button {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: var(--brand-gold-light);
}

/* Gentle wiggle when there are unread alerts. */
.notif-bell.has-unread .notif-bell-button i { animation: notifWiggle 2.4s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes notifWiggle {
  0%, 82%, 100% { transform: rotate(0); }
  86% { transform: rotate(-11deg); }
  90% { transform: rotate(9deg); }
  94% { transform: rotate(-6deg); }
  98% { transform: rotate(3deg); }
}

.notif-badge {
  position: absolute;
  top: -5px;
  inset-inline-start: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand-maroon);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 19px;
  text-align: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(122, 15, 34, .45);
}

.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  /* الجرس قرب طرف الشاشة: التثبيت على البداية كان يفرد اللوحة 360px خارج حافة الشاشة فتُقص.
     التثبيت على النهاية يفردها إلى داخل الصفحة دائمًا. */
  inset-inline-end: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(14, 32, 56, .12);
  border-top: 4px solid var(--brand-gold);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(14, 32, 56, .22);
  z-index: 1200;
  overflow: hidden;
}

.notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #12294a 0%, var(--brand-navy) 100%);
  color: #fff;
}
.notif-panel-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; }
.notif-panel-title i { color: var(--brand-gold-light); }

.notif-mark-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(216, 181, 106, .55);
  background: rgba(216, 181, 106, .14);
  color: var(--brand-gold-light);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease;
}
.notif-mark-all:hover { background: rgba(216, 181, 106, .28); }

.notif-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  overflow-y: auto;
}

.notif-card {
  position: relative;
  display: flex;
  align-items: stretch;
  border-radius: 12px;
  border: 1px solid rgba(14, 32, 56, .1);
  border-inline-start: 4px solid var(--info);
  background: var(--info-soft);
  overflow: hidden;
}
.notif-card.danger { border-inline-start-color: var(--danger); background: var(--danger-soft); }
.notif-card.warning { border-inline-start-color: var(--warning); background: var(--warning-soft); }
.notif-card.info { border-inline-start-color: var(--info); background: var(--info-soft); }

.notif-card-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 12px;
  color: var(--brand-navy);
  text-decoration: none;
}
.notif-card-link:hover { color: var(--brand-navy); background: rgba(255, 255, 255, .45); }

.notif-card-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #fff;
  font-size: 15px;
}
.notif-card.danger .notif-card-icon { color: var(--danger); }
.notif-card.warning .notif-card-icon { color: var(--warning); }
.notif-card.info .notif-card-icon { color: var(--info); }

.notif-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.notif-card-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 13px; }
.notif-card-title > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.notif-card-count {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand-maroon);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}
.notif-card-desc {
  font-size: 12px;
  font-weight: 600;
  color: #4a5a6e;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notif-card-dismiss {
  flex: 0 0 auto;
  width: 30px;
  border: 0;
  border-inline-start: 1px solid rgba(14, 32, 56, .08);
  background: transparent;
  color: #7a889a;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.notif-card-dismiss:hover { background: rgba(180, 35, 24, .1); color: var(--danger); }
.notif-card-dismiss i { font-size: 12px; }

.notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 30px 18px;
  text-align: center;
  color: var(--brand-navy);
}
.notif-empty i { font-size: 30px; color: #2f9e6d; margin-bottom: 4px; }
.notif-empty strong { font-size: 14px; font-weight: 800; }
.notif-empty span { font-size: 12.5px; font-weight: 600; color: #667487; }

.notif-panel-foot {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 10px 14px;
  border-top: 1px solid rgba(14, 32, 56, .08);
  background: var(--brand-cream);
  color: #6a5a3a;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.55;
}
.notif-panel-foot i { flex: 0 0 auto; margin-top: 1px; color: var(--brand-maroon); }

@media (max-width: 768px) {
  .notif-panel {
    position: fixed;
    top: auto;
    inset-inline: 12px;
    width: auto;
    max-width: none;
  }
}