@import url('../fonts/fonts.css');   /* self-hosted — no third-party font requests */

:root {
  /* ── Palette ported from LMS "Signal Grid": indigo-purple primary + teal
     secondary + green accent, on a soft-white canvas. ── */
  --primary:#5B4FE5; --primary-dark:#3B2FC9; --primary-light:#EEEAFF;
  --accent:#5B4FE5; --accent-dark:#3B2FC9; --accent-light:#EEEAFF;
  --secondary:#0DBED6; --accent-green:#22C55E;
  --success:#10B981; --warning:#F59E0B; --danger:#EF4444; --purple:#8B5CF6;
  --brand-gradient:linear-gradient(135deg,#6D28D9 0%,#0DBED6 55%,#22C55E 100%);
  --text:#0D0E1A; --ink:#1D1147; --text-muted:#5A607A; --text-light:#9299B2;
  --border:#E0E3EE; --border-strong:#C8CCDC; --surface:#ECEEF4; --bg:#F3F4F8; --card:#FFFFFF;
  --success-tint:#ECFDF5; --danger-tint:#FFF1F2; --warning-tint:#FFFBEB;
  /* Chart palette (dashboards): 5 categorical hues in fixed order, colour-blind checked; --chart-other for the fold-in slice. */
  --chart-1:#5B4FE5; --chart-2:#DB2777; --chart-3:#F59E0B; --chart-4:#0891B2; --chart-5:#10B981; --chart-other:#9299B2;
  --radius:12px; --radius-sm:8px; --radius-lg:16px;
  --shadow-xs:0 1px 2px rgba(13,14,26,.05);
  --shadow:0 1px 4px rgba(13,14,26,.07), 0 2px 8px rgba(13,14,26,.04);
  --shadow-md:0 4px 16px rgba(13,14,26,.10);
  --shadow-lg:0 8px 32px rgba(13,14,26,.14);
  --shadow-xl:0 16px 48px rgba(13,14,26,.18);
  --transition:all .18s cubic-bezier(.4,0,.2,1);
  --sidebar-w:240px;
}

/* ── Dark mode — LMS "Ember Rising": deep-navy canvas + warm ember accents
   (amber -> coral -> violet). Surfaces are lifted navy, never pure black. ── */
[data-theme="dark"] {
  --primary:#7B6FF0; --primary-dark:#5B4FE5; --primary-light:rgba(123,111,240,.16);
  --accent:#7B6FF0; --accent-dark:#5B4FE5; --accent-light:rgba(123,111,240,.16);
  --secondary:#22D3E0; --accent-green:#34D399;
  --success:#5ED6A0; --warning:#E8873D; --danger:#E5527A; --purple:#9B8CF2;
  --brand-gradient:linear-gradient(135deg,#E8873D 0%,#E5527A 50%,#7B5FE8 100%);
  --text:#F5F3FF; --ink:#FFF6EC; --text-muted:#9195BC; --text-light:#6A6E92;
  --border:#23253E; --border-strong:#33355A; --surface:#14162A; --bg:#0B0C16; --card:#14162A;
  --success-tint:rgba(94,214,160,.14); --danger-tint:rgba(229,82,122,.16); --warning-tint:rgba(232,135,61,.16);
  --chart-1:#7C70EE; --chart-2:#D9559A; --chart-3:#C77F26; --chart-4:#2AA5B5; --chart-5:#2AA877; --chart-other:#6A6E92;
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 1px 4px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25);
  --shadow-md:0 4px 20px rgba(0,0,0,.4);
  --shadow-lg:0 10px 34px rgba(0,0,0,.45);
  --shadow-xl:0 18px 52px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion: no-preference) {
  body,.topbar,.card,.card-sm,.stat-card,.modal,.nav-item,.btn,.btn-icon,.form-input,.form-select,.form-textarea,.search-input,.chip { transition:background-color .22s ease, border-color .22s ease, color .22s ease; }
}

/* ── Dark-mode polish (the glowing brand lines live in the sidebar/card rules
   below via --brand-gradient, so they work in both themes) ── */
[data-theme="dark"] .topbar { background:rgba(20,22,42,.82); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); }
[data-theme="dark"] .btn-primary { box-shadow:0 0 0 1px rgba(123,111,240,.42), 0 2px 14px rgba(123,111,240,.34); }
[data-theme="dark"] .btn-primary:hover { box-shadow:0 0 0 1px rgba(123,111,240,.62), 0 4px 22px rgba(123,111,240,.5); }
[data-theme="dark"] .search-input:focus { box-shadow:0 0 0 3px rgba(123,111,240,.2); }
[data-theme="dark"] .stat-icon { filter:saturate(1.08) brightness(1.04); }
[data-theme="dark"] .badge-green,[data-theme="dark"] .flash-success { background:rgba(94,214,160,.15); color:#8DE8C2; }
[data-theme="dark"] .badge-blue { background:rgba(34,211,224,.16); color:#8CE3EC; }
[data-theme="dark"] .badge-red,[data-theme="dark"] .flash-error { background:rgba(229,82,122,.16); color:#F4879E; }
[data-theme="dark"] .badge-orange { background:rgba(232,135,61,.16); color:#F0A868; }
[data-theme="dark"] .badge-gray { background:rgba(145,149,188,.14); color:#B7BAD6; }
[data-theme="dark"] .badge-purple { background:rgba(155,140,242,.18); color:#C3B6F7; }
[data-theme="dark"] .flash-info { background:rgba(34,211,224,.14); color:#8CE3EC; }
/* theme-toggle icon swap (inline SVGs, no icon-font) */
.theme-icon-sun { display:none; }
[data-theme="dark"] .theme-icon-moon { display:none; }
[data-theme="dark"] .theme-icon-sun { display:inline-flex; }
.icon-inline { display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.icon-inline svg { width:1em; height:1em; display:block; }
*, *::before, *::after { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; font-family:'Hanken Grotesk',-apple-system,'Segoe UI',Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); font-size:14px; line-height:1.5; overflow:hidden; -webkit-font-smoothing:antialiased; }
.page-header-left h2, .topbar-title-h, .modal-title, .stat-value, .empty-state-title { font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif; }
a { color:inherit; }

/* ── Accessibility: visible keyboard focus, reduced-motion support ── */
a:focus-visible, button:focus-visible, .nav-item:focus-visible, .btn:focus-visible,
.tab:focus-visible, .chip:focus-visible, .btn-icon:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--primary); outline-offset:2px; border-radius:4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ── Layout: fixed-viewport app shell, independently-scrolling page content (Gmail-style) ── */
.app-shell { display:flex; height:100vh; overflow:hidden; }

/* ── Sidebar rail: collapses to a 64px icon-only rail that expands on hover ── */
.sidebar-rail { flex-shrink:0; width:var(--sidebar-w); transition:width .18s ease; position:relative; }
.sidebar { width:100%; height:100%; background:#12132A; color:#C8CCE8; display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden; transition:var(--transition); position:relative; z-index:200;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.04), 3px 0 0 rgba(109,40,217,.5), 6px 0 16px rgba(13,190,214,.12); }

@media (min-width:769px) {
  html.sidebar-mini .sidebar-rail { width:64px; }
  html.sidebar-mini .sidebar-rail .sidebar {
    position:absolute; top:0; left:0; width:64px; height:100vh;
    transition:width .16s ease, box-shadow .16s ease; overflow-x:hidden;
  }
  html.sidebar-mini .sidebar-rail:hover .sidebar { width:var(--sidebar-w); box-shadow:var(--shadow-lg); }
  html.sidebar-mini .sidebar-rail:not(:hover) .sidebar span,
  html.sidebar-mini .sidebar-rail:not(:hover) .sidebar .nav-section-title,
  html.sidebar-mini .sidebar-rail:not(:hover) .sidebar .logo-sub,
  html.sidebar-mini .sidebar-rail:not(:hover) .sidebar .logo-full,
  html.sidebar-mini .sidebar-rail:not(:hover) .sidebar .user-info,
  html.sidebar-mini .sidebar-rail:not(:hover) .sidebar .sidebar-collapse-btn,
  html.sidebar-mini .sidebar-rail:not(:hover) .sidebar .nav-item .nav-badge,
  html.sidebar-mini .sidebar-rail:not(:hover) .sidebar .nav-section-chevron { display:none; }
  html.sidebar-mini .sidebar-rail:not(:hover) .sidebar-logo .mark { display:flex; }
  html.sidebar-mini .sidebar-rail:not(:hover) .sidebar-logo,
  html.sidebar-mini .sidebar-rail:not(:hover) .nav-item,
  html.sidebar-mini .sidebar-rail:not(:hover) .sidebar-user { justify-content:center; }
  html.sidebar-mini .sidebar-rail .nav-item i,
  html.sidebar-mini .sidebar-rail .sidebar-logo .mark { flex-shrink:0; }
}

.sidebar-logo { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:16px 14px 12px; border-bottom:1px solid rgba(255,255,255,.07); flex-shrink:0; position:relative; }
.sidebar-logo .mark { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,#6D28D9,#0DBED6); display:none; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px; flex-shrink:0; }
.sidebar-logo .logo-full { display:flex; flex-direction:column; align-items:center; gap:6px; }
.sidebar-logo .logo-full img { width:132px; max-width:100%; height:auto; display:block; }
.sidebar-logo span { font-weight:700; font-size:14px; color:#fff; white-space:nowrap; }
.sidebar-logo .sidebar-collapse-btn { position:absolute; top:14px; right:10px; margin-left:0; }
.sidebar-collapse-btn { margin-left:auto; background:none; border:none; color:#6366F1; width:24px; height:24px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px; flex-shrink:0; transition:var(--transition); }
.sidebar-collapse-btn:hover { background:rgba(99,102,241,.25); color:#fff; }

.sidebar nav { flex:1; padding:6px; }
.nav-section-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#4A4D80; padding:12px 10px 3px; white-space:nowrap; }
button.nav-section-title { width:100%; background:none; border:none; font-family:inherit; display:flex; align-items:center; justify-content:space-between; gap:6px; cursor:pointer; text-align:left; }
button.nav-section-title:hover { color:#8B90E0; }
button.nav-section-title:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:4px; }
.nav-section-chevron { flex-shrink:0; transition:transform .18s ease; }
.nav-section-chevron svg { width:13px; height:13px; }
.nav-section-toggle[aria-expanded="false"] .nav-section-chevron { transform:rotate(-90deg); }
.nav-group-wrap { display:grid; grid-template-rows:1fr; transition:grid-template-rows .2s ease; }
.nav-group-wrap.collapsed { grid-template-rows:0fr; }
.nav-group { overflow:hidden; min-height:0; }
.nav-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color:#9299C8; text-decoration:none;
  font-size:13px; margin-bottom:1px; transition:var(--transition); white-space:nowrap; position:relative; }
.nav-item::before { content:''; position:absolute; left:-6px; top:50%; transform:translateY(-50%); width:3px; height:18px; background:var(--brand-gradient); border-radius:0 3px 3px 0; opacity:0; transition:opacity .18s ease; }
.nav-item:hover { background:rgba(99,102,241,.15); color:#E4E6F5; }
.nav-item:hover::before { opacity:.6; }
.nav-item.active { background:linear-gradient(90deg,rgba(91,79,229,.32) 0%,rgba(13,190,214,.12) 100%); color:#fff; font-weight:600; }
.nav-item.active::before { opacity:1; }
.nav-item i { font-size:15px; width:17px; text-align:center; flex-shrink:0; }
.nav-badge { margin-left:auto; background:var(--danger); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px; flex-shrink:0; }

.sidebar-footer { padding:6px; border-top:1px solid rgba(255,255,255,.07); flex-shrink:0; }
.sidebar-user { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:7px; cursor:pointer; transition:var(--transition); }
.sidebar-user:hover { background:rgba(99,102,241,.15); }
.sidebar-user .avatar { width:30px; height:30px; background:var(--brand-gradient); color:#fff; flex-shrink:0; }
.sidebar-user .user-name { font-size:12px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user .user-role { font-size:11px; color:#7FA0B8; white-space:nowrap; }
.sidebar-user .user-info { min-width:0; flex:1; }

/* ── Main column ── */
.main-col { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.topbar { background:var(--card); border-bottom:1px solid var(--border); padding:0 20px; height:52px;
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0; box-shadow:var(--shadow); z-index:20; gap:14px; }
.topbar-left { display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 0; }
.topbar-center { display:none; align-items:center; justify-content:center; flex:0 1 auto; }
body.search-open .topbar-center { display:flex; position:absolute; left:0; right:0; top:52px; padding:8px 20px;
  background:var(--card); border-bottom:1px solid var(--border); box-shadow:var(--shadow-md); z-index:40; }
body.search-open .search-wrap { max-width:480px; width:100%; margin:0 auto; }
body.search-open .search-dropdown { width:100%; }
.topbar-right { display:flex; align-items:center; gap:8px; justify-content:flex-end; flex:1 1 0; min-width:0; }

/* Search */
.search-wrap { position:relative; max-width:240px; width:100%; }
.search-wrap > i { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-light); font-size:14px; pointer-events:none; }
.search-input { padding:8px 12px 8px 32px; border:1px solid var(--border); border-radius:9px; font-size:13px; outline:none;
  width:100%; background:var(--surface); color:var(--text); transition:var(--transition); }
.search-input:focus { border-color:var(--primary); background:var(--card); box-shadow:0 0 0 3px rgba(91,79,229,.14); }
.search-dropdown { position:absolute; top:calc(100% + 6px); left:0; width:320px; max-height:380px; overflow-y:auto;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); z-index:200; padding:6px; }
.search-dropdown-item { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:7px; color:var(--text); transition:var(--transition); text-decoration:none; }
.search-dropdown-item:hover { background:var(--surface); }
.search-dropdown-icon { width:28px; height:28px; border-radius:7px; background:var(--primary-light); color:var(--primary);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; }
.search-dropdown-text { display:flex; flex-direction:column; min-width:0; }
.search-dropdown-title { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-dropdown-subtitle { font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-dropdown-empty { padding:14px 10px; font-size:12px; color:var(--text-muted); text-align:center; }

.context-switcher { display:flex; gap:7px; }
.context-switcher select { font-size:12px; padding:5px 9px; border-radius:7px; border:1px solid var(--border); background:var(--card); color:var(--text); }

.btn-icon { width:36px; height:36px; border-radius:9px; border:1px solid var(--border); background:var(--card);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted); position:relative; transition:var(--transition); flex-shrink:0; }
.btn-icon:hover { background:var(--surface); border-color:var(--border-strong); color:var(--text); }
.notif-dot { position:absolute; top:6px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--danger); border:2px solid var(--card); }
.user-chip { display:flex; align-items:center; gap:8px; padding:5px 9px 5px 5px; border-radius:9px; cursor:pointer; transition:var(--transition); }
.user-chip:hover { background:var(--surface); }
.user-chip .avatar { width:28px; height:28px; }
.user-name { font-size:13px; font-weight:600; }
.user-role { font-size:11px; color:var(--text-muted); }

.page-content { padding:20px 24px 28px; flex:1; overflow-y:auto; }

/* ── Notifications ── */
.notif-panel { position:fixed; top:56px; right:20px; width:310px; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); display:none; z-index:500; max-height:70vh; overflow-y:auto; }
.notif-panel.open { display:block; }
.notif-header { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--border); }
.notif-list { padding:6px; }
.notif-item { display:flex; gap:10px; padding:9px; border-radius:8px; transition:var(--transition); }
.notif-item:hover { background:var(--surface); }
.notif-item.unread { background:var(--primary-light); }
.notif-icon { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; }
.notif-title { font-size:12px; font-weight:500; }
.notif-time { font-size:11px; color:var(--text-muted); margin-top:2px; }

/* ── Page header ── */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
.page-header-left h2 { margin:0 0 3px; font-size:20px; font-weight:700; letter-spacing:-.01em; }
.page-header-left p { margin:0; color:var(--text-muted); font-size:13px; }
.page-header-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ── Cards / Grid ── */
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); position:relative; }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--brand-gradient); opacity:0; transition:opacity .2s ease; border-radius:var(--radius) var(--radius) 0 0; }
.card:hover::before { opacity:1; }
.card-sm { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px 12px; box-shadow:var(--shadow); }
a.card-sm:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); border-color:var(--border-strong); }
.card-title { font-size:13px; font-weight:700; display:flex; align-items:center; gap:7px; margin-bottom:10px; }
.card-title i { color:var(--accent); }
.grid { display:grid; gap:12px; }
.g2 { grid-template-columns:repeat(2,1fr); }
.g3 { grid-template-columns:repeat(3,1fr); }
.g4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px) { .g2,.g3,.g4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .g2,.g3,.g4 { grid-template-columns:1fr; } }

.stat-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); display:flex; align-items:center; gap:11px; transition:var(--transition); position:relative; overflow:hidden; }
.stat-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--brand-gradient); opacity:0; transition:opacity .2s ease; }
.stat-card:hover::after { opacity:1; }
.stat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); border-color:var(--border-strong); }
.stat-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.stat-label { font-size:12px; color:var(--text-muted); }
.stat-value { font-size:20px; font-weight:700; line-height:1.15; }
.stat-change { font-size:11px; color:var(--text-muted); margin-top:1px; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:8px 14px; border-radius:9px; border:none; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; transition:var(--transition); }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-outline { background:var(--card); border:1px solid var(--border); color:var(--text); }
.btn-outline:hover { background:var(--surface); border-color:var(--border-strong); }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { background:#0F5E3F; }
.btn-warning { background:var(--warning); color:#fff; }
.btn-warning:hover { background:#93590A; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#9E2A25; }
.btn-accent { background:var(--accent); color:#fff; }
.btn-accent:hover { background:var(--accent-dark); }
.btn-sm { padding:5px 10px; font-size:12px; }
.btn-block { width:100%; justify-content:center; }
.btn:active:not(:disabled) { transform:translateY(1px); }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn-ghost { background:transparent; color:var(--primary); padding:4px 8px; }
.btn-ghost:hover { background:var(--primary-light); }

/* ── Forms ── */
.form-row { display:flex; gap:10px; flex-wrap:wrap; }
.form-row .form-group { flex:1; min-width:140px; }
.form-group { margin-bottom:10px; }
.form-label { display:block; font-size:12px; font-weight:600; margin-bottom:5px; color:var(--text); }
.form-input, .form-select, .form-textarea { width:100%; min-height:36px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; font-size:13px; font-family:inherit; background:var(--card); transition:var(--transition); color:var(--text); }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(91,79,229,.14); }
.form-input::placeholder, .form-textarea::placeholder, .search-input::placeholder { color:var(--text-light); }
.form-textarea { resize:vertical; }
.form-hint { font-size:12px; color:var(--text-muted); margin-top:3px; }
.checkbox-row { display:flex; align-items:center; gap:8px; font-size:13px; }

/* ── Table ── */
.table-wrap { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; }
.table th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap; font-weight:700; background:var(--surface); }
.table td { padding:10px 12px; border-bottom:1px solid var(--border); font-size:13px; vertical-align:middle; }
.table tbody tr { transition:var(--transition); }
.table tbody tr:hover { background:var(--surface); }
.table tbody tr:last-child td { border-bottom:none; }

/* ── Badges / status ── */
.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600; }
.badge-green { background:#DCF3E8; color:#136B45; }
.badge-red { background:#FBE4E2; color:#A32E28; }
.badge-orange { background:#F7E9D3; color:#8A5A0E; }
.badge-blue { background:#DCEEF5; color:#155E82; }
.badge-purple { background:#EAE5F5; color:#5A4791; }
.badge-gray { background:#F1F3F2; color:#54615F; }

/* ── Tabs ── */
.tabs { display:flex; gap:4px; border-bottom:2px solid var(--border); margin-bottom:14px; flex-wrap:wrap; }
.tab { padding:8px 14px; font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; display:flex; align-items:center; gap:6px; transition:var(--transition); }
.tab.active { color:var(--primary); border-bottom-color:var(--accent); }
.tab:hover:not(.active) { color:var(--text); }
.tab-panel {}

/* ── Modal ── */
.modal-backdrop { position:fixed; inset:0; background:rgba(9,10,20,.6); display:flex; align-items:center; justify-content:center; z-index:900; padding:20px; }
.modal { background:var(--card); border-radius:14px; padding:20px; animation:sms-pop .18s cubic-bezier(.4,0,.2,1); width:100%; max-width:560px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); }
.modal.modal-lg { max-width:820px; }
/* For popups that host a full two-column record (e.g. the student card). */
.modal.modal-xl { max-width:1120px; }
/* Nested modals (bus / incident pickers opened from inside a card popup) must
   paint above the popup that owns them. */
.modal-backdrop .modal-backdrop { z-index:950; }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.modal-title { font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px; }
.modal-footer { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }

/* ── Avatar ── */
.avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; background:var(--primary-light); color:var(--primary); flex-shrink:0; overflow:hidden; }
.avatar img { width:100%; height:100%; object-fit:cover; }

/* ── Progress ── */
.progress { height:6px; border-radius:20px; background:var(--surface); overflow:hidden; }
.progress-bar { height:100%; border-radius:20px; transition:width .4s cubic-bezier(.4,0,.2,1); background:var(--brand-gradient); }

/* ── Flash / alerts ── */
.flash { display:flex; align-items:center; gap:8px; padding:10px 14px; font-size:13px; border-left:3px solid currentColor; }
.flash-success { background:#DCF3E8; color:#136B45; }
.flash-error { background:#FBE4E2; color:#A32E28; }
.flash-info { background:#DCEEF5; color:#155E82; }
.flash-close { margin-left:auto; background:none; border:none; cursor:pointer; opacity:.6; color:inherit; }
.flash-close:hover { opacity:1; }

/* ── Utility ── */
.flex { display:flex; }
.flex-col { display:flex; flex-direction:column; }
.flex-1 { flex:1; }
.items-center { align-items:center; }
.items-start { align-items:flex-start; }
.items-end { align-items:flex-end; }
.justify-between { justify-content:space-between; }
.flex-wrap { flex-wrap:wrap; }
.text-center { text-align:center; }
.text-right { text-align:right; }
.text-sm { font-size:12px; }
.text-xs { font-size:11px; }
.text-muted { color:var(--text-muted); }
.fw-500 { font-weight:500; } .fw-600 { font-weight:600; } .fw-700 { font-weight:700; }
.gap-4{gap:4px;} .gap-6{gap:6px;} .gap-8{gap:8px;} .gap-10{gap:10px;} .gap-12{gap:12px;} .gap-14{gap:14px;} .gap-16{gap:16px;}
.mb-0{margin-bottom:0;} .mb-4{margin-bottom:4px;} .mb-6{margin-bottom:6px;} .mb-8{margin-bottom:8px;} .mb-10{margin-bottom:10px;}
.mb-12{margin-bottom:12px;} .mb-16{margin-bottom:16px;} .mb-20{margin-bottom:20px;} .mb-24{margin-bottom:24px;}
.mt-6{margin-top:6px;} .mt-8{margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mt-20{margin-top:20px;}
.mr-6{margin-right:6px;}
.status { display:inline-flex; align-items:center; gap:5px; }
.status::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status-active,.status-approved,.status-completed { color:var(--success); }
.status-pending,.status-scheduled { color:var(--primary); }
.status-progress { color:var(--warning); }
.status-inactive,.status-rejected,.status-cancelled { color:var(--danger); }
.status-rescheduled { color:var(--purple); }

/* Column-toggle / filter chips */
.chip { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border:1px solid var(--border); border-radius:7px; font-size:12px; cursor:pointer; background:var(--card); transition:var(--transition); }
.chip:hover { border-color:#CBD5E1; }
.chip.active { background:var(--primary-light); border-color:var(--primary); color:var(--primary); }

/* Photo upload box */
.photo-upload { width:100px; height:100px; border-radius:11px; border:2px dashed var(--border); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; background:var(--surface); cursor:pointer; transition:var(--transition); }
.photo-upload:hover { border-color:var(--primary); }
.photo-upload img { width:100%; height:100%; object-fit:cover; }
.photo-upload .placeholder { color:var(--text-muted); font-size:11px; text-align:center; padding:8px; }

/* Doc row */
.doc-row { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border:1px solid var(--border); border-radius:8px; margin-bottom:6px; transition:var(--transition); }
.doc-row:hover { border-color:#CBD5E1; }
.doc-row .doc-name { font-size:13px; }
.doc-row .doc-actions { display:flex; gap:6px; }

/* ── Mobile ── */
.sidebar-toggle { display:none; }
@media (max-width:768px) {
  .sidebar-toggle { display:flex !important; }
  .sidebar-rail { width:0 !important; }
  .sidebar-rail .sidebar, .sidebar { position:fixed; left:-100%; top:0; width:var(--sidebar-w); height:100vh; transition:left .2s; z-index:300; }
  .sidebar.open { left:0; }
  .page-content { padding:14px; }
}

/* Spinner (e.g. .ti-loader-2 inside a busy button) */
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes sms-pop { from { opacity:0; transform:translateY(6px) scale(.985); } to { opacity:1; transform:none; } }
.notif-panel.open, .search-dropdown { animation:sms-pop .16s ease; }
.btn .ti-loader-2, .btn-icon .ti-loader-2 { animation:spin .7s linear infinite; display:inline-block; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-light); }
* { scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
::selection { background:var(--primary-light); color:var(--text); }
.sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); }

.report-card { margin-bottom:14px; }

/* ── Popover (used by column-picker, and reusable for future filter menus) ── */
.popover-wrap { position:relative; }
.popover { position:absolute; top:calc(100% + 6px); right:0; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:10px; z-index:150; display:none; min-width:210px; }
.popover.open { display:block; }
.popover-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin-bottom:8px; }
.popover .chip { width:100%; justify-content:flex-start; margin-bottom:5px; }
.popover .chip:last-child { margin-bottom:0; }
/* Wide, scrollable variant for long grouped lists (e.g. the students column picker) */
.popover.popover-lg { min-width:360px; max-height:min(62vh, 470px); overflow-y:auto; }
.popover-actions { display:flex; gap:12px; align-items:center; margin-bottom:9px; }
.popover-group { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-light); margin:11px 0 5px; padding-top:9px; border-top:1px solid var(--border); }
.popover-group:first-of-type { margin-top:0; padding-top:0; border-top:none; }
.popover-cols { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.popover-cols .chip { width:100%; margin-bottom:0; }
/* Long free-text cells (address) must not stretch the table */
.cell-clip { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* The whole student row opens the card, so show it is clickable — except over
   its own controls, which keep their normal cursor. */
tr.student-row { cursor:pointer; }
tr.student-row input, tr.student-row label { cursor:auto; }

/* Result count + pagination for client-side paged tables */
.result-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.result-count { font-size:12px; color:var(--text-muted); }
.result-count b { color:var(--text); font-weight:700; }
.pager { display:flex; align-items:center; justify-content:center; gap:14px; padding:12px 0 2px; border-top:1px solid var(--border); margin-top:6px; }

/* ── Parent column tinting ────────────────────────────────────────────────
   Father = cool blue, Mother = warm rose. Kept very light so the dark body
   text keeps well past 4.5:1 contrast; the tint carries the grouping, and the
   column labels still say Father/Mother so it never relies on colour alone. */
:root {
  --tint-father:       #EFF6FC;  --tint-father-head: #DAE9F6;
  --tint-father-line:  #C6DCEF;  --tint-father-hover:#E3EFFA;
  --tint-mother:       #FDF2F6;  --tint-mother-head: #F8E0EA;
  --tint-mother-line:  #EFC9D9;  --tint-mother-hover:#FAE7EF;
}
.table td.colgrp-father { background:var(--tint-father); }
.table th.colgrp-father { background:var(--tint-father-head); color:#1B5E86; }
.table td.colgrp-mother { background:var(--tint-mother); }
.table th.colgrp-mother { background:var(--tint-mother-head); color:#8C3159; }
/* tr:hover paints the row, but a cell background sits on top of it — so the
   tinted columns need their own hover shade or hover appears to skip them. */
.table tbody tr:hover td.colgrp-father { background:var(--tint-father-hover); }
.table tbody tr:hover td.colgrp-mother { background:var(--tint-mother-hover); }
/* Soft edge where each parent block starts/ends */
.table th.colgrp-father, .table td.colgrp-father { border-left:1px solid var(--tint-father-line); }
.table th.colgrp-mother, .table td.colgrp-mother { border-left:1px solid var(--tint-mother-line); }

/* Matching tinted panels in the column picker */
.popover-section.sect-father,
.popover-section.sect-mother { border-radius:8px; padding:8px 9px 9px; margin-top:10px; }
.popover-section.sect-father { background:var(--tint-father); border:1px solid var(--tint-father-line); }
.popover-section.sect-mother { background:var(--tint-mother); border:1px solid var(--tint-mother-line); }
.popover-section.sect-father .popover-group { color:#1B5E86; }
.popover-section.sect-mother .popover-group { color:#8C3159; }
/* the panel itself provides the separation, so drop the divider rule */
.popover-section.sect-father .popover-group,
.popover-section.sect-mother .popover-group { margin:0 0 6px; padding-top:0; border-top:none; }
/* chips sit on a tinted panel — keep them white so they stay legible */
.popover-section.sect-father .chip,
.popover-section.sect-mother .chip { background:var(--card); }
.popover-section.sect-father .chip.active { background:#D3E7F7; border-color:#3E8DBE; color:#1B5E86; }
.popover-section.sect-mother .chip.active { background:#F7D9E5; border-color:#C4699A; color:#8C3159; }

/* Student card — Father / Mother panels tinted to match the students table */
.parent-panel-father { background:var(--tint-father); border:1px solid var(--tint-father-line); }
.parent-panel-mother { background:var(--tint-mother); border:1px solid var(--tint-mother-line); }
.parent-panel-father > .fw-600 { color:#1B5E86; }
.parent-panel-mother > .fw-600 { color:#8C3159; }
.parent-panel-father .form-input:focus, .parent-panel-father .form-select:focus { border-color:#3E8DBE; box-shadow:0 0 0 3px rgba(62,141,190,.15); }
.parent-panel-mother .form-input:focus, .parent-panel-mother .form-select:focus { border-color:#C4699A; box-shadow:0 0 0 3px rgba(196,105,154,.15); }

/* ── Empty state ── */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:36px 20px; text-align:center; }
.empty-state-icon { width:52px; height:52px; border-radius:14px; background:var(--primary-light); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:23px; margin-bottom:14px; }
.empty-state-title { font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px; }
.empty-state-text { font-size:12px; color:var(--text-muted); max-width:340px; line-height:1.5; }

/* ── Sortable table headers ── */
.table th.sortable { cursor:pointer; user-select:none; transition:var(--transition); }
.table th.sortable:hover { color:var(--text); }
.table th.sortable .sort-icon { display:inline-flex; margin-left:3px; opacity:.35; font-size:11px; vertical-align:-1px; transition:var(--transition); }
.table th.sortable.sort-asc .sort-icon, .table th.sortable.sort-desc .sort-icon { opacity:1; color:var(--primary); }

/* ── Sticky bulk-selection bar ── */
.bulk-bar { position:sticky; bottom:-14px; display:flex; justify-content:space-between; align-items:center;
  background:var(--primary-light); border:1px solid #BFDCE8; border-radius:9px; padding:9px 13px; margin-top:12px; font-size:12px; color:var(--primary-dark); }
.link-btn { background:none; border:none; color:var(--primary); font-size:12px; font-weight:600; cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:2px; }
.link-btn:hover { color:var(--primary-dark); }

/* Dimmed rows for inactive records */
.table tbody tr.row-dim { opacity:.55; }
.table tbody tr.row-dim:hover { opacity:1; }

/* Count pill next to a page title */
.count-pill { display:inline-flex; align-items:center; justify-content:center; background:var(--primary-light); color:var(--primary);
  font-size:11px; font-weight:700; padding:2px 9px; border-radius:20px; margin-left:8px; vertical-align:middle; }

/* Icon badge in a page-header title (opt-in wrapper — doesn't touch the existing
   .page-header-left layout used as-is by other pages) */
.page-icon { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; box-shadow:var(--shadow); }
.title-with-icon { display:flex; align-items:flex-start; gap:11px; }

@media print {
  .sidebar-rail, .topbar, .no-print, .page-header-actions, .tabs { display:none !important; }
  .page-content { padding:0 !important; overflow:visible !important; }
  body { overflow:visible !important; background:#fff; }
  .report-card { break-inside:avoid; page-break-after:always; border:none; box-shadow:none; }
}
/* ── Dashboard list rows (recent items on landing panels) ────────────────── */
.dash-list { display:flex; flex-direction:column; }
.dash-row { display:flex; align-items:center; gap:10px; padding:9px 4px; border-top:1px solid var(--border);
  text-decoration:none; color:inherit; transition:var(--transition); }
.dash-row:first-child { border-top:none; }
.dash-row:hover { background:var(--surface); }
.dash-row-main { flex:1; min-width:0; }
.dash-row-main .fw-600 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-row i.ti-chevron-right { color:var(--text-light); font-size:15px; flex-shrink:0; }
.dash-more { display:inline-flex; align-items:center; gap:5px; margin-top:10px; font-size:12px; font-weight:600;
  color:var(--primary); text-decoration:none; }
.dash-more:hover { gap:8px; }
.dash-more i { transition:var(--transition); }

/* ── Page title relocated into the topbar (icon + title + subtitle) ──────── */
.topbar-title { display:flex; align-items:center; gap:9px; flex-shrink:0; max-width:46%; }
.topbar-title .topbar-page-icon { width:32px; height:32px; border-radius:9px; font-size:15px; }
.topbar-title-text { min-width:0; }
.topbar-title-h { font-size:15px; font-weight:700; line-height:1.15; letter-spacing:-.01em;
  display:flex; align-items:center; gap:6px; white-space:nowrap; }
.topbar-title-h .count-pill { font-size:11px; }
.topbar-title-sub { font-size:11px; color:var(--text-muted); line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-title + .search-wrap { border-left:1px solid var(--border); padding-left:12px; }
@media (max-width:820px) { .topbar-title-sub { display:none; } .topbar-title { max-width:none; } }
@media (max-width:560px) {
  .topbar-title .topbar-page-icon { display:none; }
  .topbar-title + .search-wrap { border-left:none; padding-left:0; }
  .topbar-title { max-width:42vw; }
  .topbar-title-h { overflow:hidden; text-overflow:ellipsis; display:block; }
}

/* topbar page actions (primary buttons relocated from the old header row) */
.topbar-actions { display:flex; align-items:center; gap:8px; }
@media (max-width:700px) { .topbar-actions .btn span, .topbar-actions .btn-label { display:none; } }

/* ═══════════════ Markdown output (Curriculum preview + Learning Portal) ═══════════════
   Rendered by renderMarkdownLite() in main.js. Same subset in both places so a
   teacher's preview matches exactly what the student ends up seeing. */
.markdown-body { line-height:1.75; font-size:14px; color:var(--text); word-wrap:break-word; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { font-weight:800; line-height:1.3; margin:0 0 10px; letter-spacing:-.3px; }
.markdown-body h1 { font-size:24px; }
.markdown-body h2 { font-size:20px; }
.markdown-body h3 { font-size:16px; }
.markdown-body p { margin:0 0 12px; }
.markdown-body p:last-child { margin-bottom:0; }
.markdown-body strong { font-weight:700; }
.markdown-body em { font-style:italic; }
.markdown-body u { text-decoration:underline; }
.markdown-body del { text-decoration:line-through; opacity:.65; }
.markdown-body mark { background:#FEF08A; color:#1F2937; padding:1px 3px; border-radius:3px; }
.markdown-body a { color:var(--primary); text-decoration:underline; }
.markdown-body ul, .markdown-body ol { margin:0 0 12px; padding-left:22px; }
.markdown-body li { margin-bottom:5px; }
.markdown-body blockquote { border-left:3px solid var(--primary); padding:4px 16px; margin:0 0 12px; color:var(--text-muted); background:var(--primary-light); border-radius:0 8px 8px 0; }
.markdown-body blockquote p { margin-bottom:6px; }
.markdown-body code { background:var(--surface); border:1px solid var(--border); padding:2px 6px; border-radius:5px; font-family:monospace; font-size:12.5px; }
.markdown-body pre { background:#0D0E1A; color:#E2E8F0; padding:14px 16px; border-radius:10px; overflow-x:auto; margin:0 0 12px; }
.markdown-body pre code { background:none; border:none; padding:0; color:inherit; }

/* "- [ ] task" checklists typed inside a Text block */
.markdown-body ul.md-tasklist { list-style:none; padding-left:0; margin:0 0 12px; }
.markdown-body li.md-task-item { margin-bottom:6px; }
.markdown-body label.md-task-label { display:flex; align-items:flex-start; gap:9px; cursor:pointer; line-height:1.5; }
.markdown-body input.md-task-checkbox { width:17px; height:17px; flex-shrink:0; margin-top:2px; accent-color:var(--primary); cursor:pointer; }
.markdown-body li.md-task-item.md-task-checked label.md-task-label span { color:var(--text-muted); text-decoration:line-through; }

/* Markdown editor preview toggle (Curriculum step editor) */
.md-preview { min-height:60px; padding:8px 2px; }
.md-preview:empty::before { content:'Nothing to preview yet \2014 switch back to Edit and start typing.'; color:var(--text-muted); font-size:13px; }
.md-toolbar .btn-active { background:var(--primary-light); border-color:var(--primary); color:var(--primary); }

/* ═══════════════ Readability, contrast and shared components ═══════════════
   Declared last on purpose: these rules override the earlier defaults above. */
[hidden] { display:none !important; }
:root {
  /* #636987 keeps 4.5:1 on --card, --bg and --surface (secondary text on grey panels and table heads) */
  --text-light:#636987;
  --success-strong:#047857; --warning-strong:#B45309; --danger-strong:#C62828;
}
[data-theme="dark"] {
  --text-light:#8A8EB3;
  --success-strong:#34D399; --warning-strong:#F0A868; --danger-strong:#F4879E;
  --tint-father:rgba(96,165,250,.10); --tint-father-head:rgba(96,165,250,.20);
  --tint-father-line:rgba(96,165,250,.32); --tint-father-hover:rgba(96,165,250,.16);
  --tint-mother:rgba(244,114,182,.10); --tint-mother-head:rgba(244,114,182,.20);
  --tint-mother-line:rgba(244,114,182,.32); --tint-mother-hover:rgba(244,114,182,.16);
}

/* Type scale: 15px body, nothing secondary below 12px */
body { font-size:15px; }
.nav-item { font-size:14px; }
.nav-section-title { color:#8A8FC7; }
button.nav-section-title:hover { color:#B9BDF2; }
.sidebar-user .user-name { font-size:13px; }
.sidebar-user .user-role, .user-role { font-size:12px; }
.btn { font-size:14px; }
.btn-sm { font-size:13px; }
.form-label { font-size:13px; }
.form-input, .form-select, .form-textarea { font-size:14px; }
.form-hint { font-size:12.5px; }
.table th { font-size:12px; }
.table td { font-size:14px; }
.badge { font-size:12px; }
.text-sm { font-size:13px; }
.text-xs { font-size:12px; }
.tab { font-size:14px; }
.card-title { font-size:14px; }
.stat-label { font-size:13px; }
.empty-state-title { font-size:15px; }
.empty-state-text { font-size:13px; }
.nav-badge, .count-pill, .topbar-title-sub, .notif-time, .search-dropdown-subtitle, .popover-group, .popover-title { font-size:12px; }
.search-dropdown-title { font-size:14px; }
.search-input { font-size:14px; }

/* Buttons that pass 4.5:1 with their label */
.btn-success { background:var(--success-strong); color:#fff; }
.btn-success:hover { background:#065F46; }
.btn-warning { background:var(--warning-strong); color:#fff; }
.btn-warning:hover { background:#92400E; }
.btn-danger { background:var(--danger-strong); color:#fff; }
.btn-danger:hover { background:#9B1C1C; }
[data-theme="dark"] .btn-success, [data-theme="dark"] .btn-warning { color:#10111F; }
[data-theme="dark"] .btn-success:hover { background:#6EE7B7; }
[data-theme="dark"] .btn-warning:hover { background:#F6C08F; }
[data-theme="dark"] .btn-danger { background:#C53A62; color:#fff; }
[data-theme="dark"] .btn-danger:hover { background:#A82F52; }

/* Parent colour groups in dark mode */
[data-theme="dark"] .table th.colgrp-father, [data-theme="dark"] .popover-section.sect-father .popover-group, [data-theme="dark"] .parent-panel-father > .fw-600 { color:#93C5FD; }
[data-theme="dark"] .table th.colgrp-mother, [data-theme="dark"] .popover-section.sect-mother .popover-group, [data-theme="dark"] .parent-panel-mother > .fw-600 { color:#F9A8D4; }
[data-theme="dark"] .popover-section.sect-father .chip.active { background:rgba(96,165,250,.22); border-color:#60A5FA; color:#BFDBFE; }
[data-theme="dark"] .popover-section.sect-mother .chip.active { background:rgba(244,114,182,.22); border-color:#F472B6; color:#FBCFE8; }

/* Missing utility classes some pages already use */
.badge-yellow { background:#FEF3C7; color:#854D0E; }
[data-theme="dark"] .badge-yellow { background:rgba(250,204,21,.16); color:#FDE68A; }
.card-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (max-width:700px) { .grid-2 { grid-template-columns:minmax(0,1fr); } }

/* Layout helpers */
.split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.split.split-wide-left { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
.split.split-sidebar { grid-template-columns:minmax(0,1fr) 360px; }
@media (max-width:900px) { .split, .split.split-wide-left, .split.split-sidebar { grid-template-columns:minmax(0,1fr); } }
.toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.toolbar-spacer { flex:1; }
.save-bar { position:sticky; bottom:0; z-index:30; display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap;
  padding:10px 14px; margin-top:14px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-md); }
.save-bar-text { margin-right:auto; font-size:13px; color:var(--text-muted); }
.save-bar.is-dirty { border-color:var(--primary); box-shadow:0 0 0 3px rgba(91,79,229,.16), var(--shadow-md); }
.save-bar.is-dirty .save-bar-text { color:var(--text); font-weight:600; }
.table-wrap .sticky-col { position:sticky; left:0; z-index:2; background:var(--card); }
.table-wrap th.sticky-col { background:var(--surface); z-index:3; }
.table tbody tr:hover td.sticky-col { background:var(--surface); }

/* Forms: required marks and inline errors */
.req { color:var(--danger-strong); margin-left:3px; font-weight:700; }
.field-error { display:block; font-size:12.5px; color:var(--danger-strong); margin-top:4px; }
.form-input.is-invalid, .form-select.is-invalid, .form-textarea.is-invalid { border-color:var(--danger-strong); box-shadow:0 0 0 3px rgba(198,40,40,.12); }

/* Toasts */
.toast-stack { position:fixed; right:18px; bottom:18px; z-index:2000; display:flex; flex-direction:column; gap:8px; width:min(420px, calc(100vw - 36px)); }
.toast { display:flex; align-items:flex-start; gap:10px; padding:11px 10px 11px 14px; border-radius:10px; background:var(--card); color:var(--text);
  border:1px solid var(--border); border-left:4px solid var(--primary); box-shadow:var(--shadow-lg); font-size:14px; animation:sms-pop .18s ease; }
.toast > i { margin-top:2px; font-size:17px; color:var(--primary); }
.toast-msg { flex:1; line-height:1.45; }
.toast-close { background:none; border:none; color:var(--text-muted); font-size:20px; line-height:1; cursor:pointer; padding:0 4px; }
.toast-success { border-left-color:var(--success-strong); } .toast-success > i { color:var(--success-strong); }
.toast-error { border-left-color:var(--danger-strong); } .toast-error > i { color:var(--danger-strong); }
.toast-warning { border-left-color:var(--warning-strong); } .toast-warning > i { color:var(--warning-strong); }
.toast-hide { opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease; }

/* Confirm / prompt / login-details dialogs */
.sms-dialog-backdrop { position:fixed; inset:0; z-index:1500; background:rgba(9,10,20,.55); display:flex; align-items:center; justify-content:center; padding:20px; }
.sms-dialog { background:var(--card); color:var(--text); border-radius:14px; width:100%; max-width:440px; padding:20px; box-shadow:var(--shadow-xl); animation:sms-pop .16s ease; max-height:90vh; overflow-y:auto; }
.sms-dialog.sms-dialog-wide { max-width:560px; }
.sms-dialog-title { font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif; font-size:18px; font-weight:700; margin-bottom:8px; }
.sms-dialog-body { font-size:14px; color:var(--text-muted); line-height:1.5; }
.sms-dialog-body p { margin:0 0 10px; }
.sms-dialog-body .form-label { color:var(--text); }
.sms-dialog-actions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin-top:16px; }
.cred-list { display:flex; flex-direction:column; gap:8px; margin:6px 0 10px; }
.cred-row { display:grid; grid-template-columns:minmax(120px,auto) minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px 10px;
  border:1px solid var(--border); border-radius:8px; background:var(--surface); }
.cred-label { font-size:13px; color:var(--text-muted); }
.cred-value { font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:15px; font-weight:600; color:var(--text); overflow-wrap:anywhere; user-select:all; }
@media (max-width:520px) { .cred-row { grid-template-columns:minmax(0,1fr) auto; } .cred-label { grid-column:1 / -1; } }

/* Notifications panel */
.notif-panel { width:350px; max-width:calc(100vw - 24px); }
.notif-group { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); padding:8px 9px 4px; }
a.notif-item { text-decoration:none; color:inherit; align-items:flex-start; }
.notif-icon { background:var(--primary-light); color:var(--primary); }
.notif-title { font-size:13px; }
.notif-body { font-size:12.5px; color:var(--text-muted); margin-top:1px; }
.notif-empty { text-align:center; padding:24px 12px; font-size:13px; color:var(--text-muted); }
.notif-btn .notif-count { position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 5px; border-radius:10px; background:var(--danger-strong); color:#fff;
  font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--card); line-height:1; }
[data-theme="dark"] .notif-btn .notif-count { color:#10111F; }

/* Top bar: labelled context switcher, pinned-context chip, child switcher */
.topbar { position:relative; }
.context-switcher { align-items:center; margin:0; }
.ctx-field { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--text-muted); margin:0; }
.ctx-field select { font-size:13px; max-width:170px; }
.ctx-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; background:var(--surface); border:1px solid var(--border);
  font-size:13px; color:var(--text-muted); white-space:nowrap; }
.ctx-chip b { color:var(--text); font-weight:600; }
.child-switcher .ctx-field > span { display:none; }
.child-switcher select { max-width:130px; }
.search-toggle { display:flex; }
.sidebar-close { display:none; }
.nav-group-flat { padding-top:6px; }

/* Division/Year: a narrow icon button in the top bar opens a small popover (same pattern as notifications). */
.ctx-toggle-wrap { position:relative; }
.ctx-panel { position:fixed; top:56px; right:20px; width:220px; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); display:none; z-index:500; padding:12px; }
.ctx-panel.open { display:block; animation:sms-pop .16s ease; }
.ctx-panel .context-switcher { flex-direction:column; align-items:stretch; gap:10px; }
.ctx-panel .ctx-field { flex-direction:column; align-items:stretch; gap:4px; }
.ctx-panel .ctx-field select { max-width:none; width:100%; }
[dir="rtl"] .ctx-panel { right:auto; left:20px; }

@supports (height:100dvh) {
  .app-shell { height:100dvh; }
}
@media (max-width:768px) {
  .topbar { padding:0 10px; gap:8px; }
  .topbar-left { gap:8px; }
  body.search-open .topbar-center { padding:8px 10px; }
  body.search-open .search-wrap { max-width:none; }
  .topbar-right .ctx-chip { display:none; }
  .child-switcher select { max-width:110px; }
  .ctx-panel { right:10px; top:58px; }
  .topbar-title { max-width:none; flex:1 1 auto; min-width:0; }
  .topbar-title-h { overflow:hidden; text-overflow:ellipsis; display:block; }
  .sidebar-close { display:flex; position:absolute; top:12px; left:10px; width:34px; height:34px; border-radius:8px; border:none;
    background:rgba(255,255,255,.08); color:#E4E6F5; align-items:center; justify-content:center; cursor:pointer; font-size:17px; }
  .sidebar-rail .sidebar, .sidebar { height:100vh; height:100dvh; }
  body.sidebar-open::after { content:''; position:fixed; inset:0; background:rgba(9,10,20,.5); z-index:250; }
  .notif-panel { right:10px; top:58px; }
  .toast-stack { right:10px; left:10px; bottom:10px; width:auto; }
}

/* Printing: report headers and signature lines appear only on paper */
.print-only, .report-print-header, .report-signatures { display:none; }
.report-print-header { align-items:center; gap:16px; border-bottom:2px solid #111; padding-bottom:10px; margin-bottom:14px; }
.report-print-header img { height:46px; width:auto; }
@media print {
  .print-only { display:block !important; }
  .report-print-header { display:flex !important; }
  .report-signatures { display:grid !important; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:40px; font-size:12px; }
  .report-signatures > div { border-top:1px solid #111; padding-top:6px; text-align:center; }
  .no-print, .save-bar, .toast-stack, .notif-panel, .sms-dialog-backdrop { display:none !important; }
}

/* Language switch in the top bar (includes/i18n.php) */
.lang-switch { width:auto; min-width:36px; padding:0 10px; font-size:13px; font-weight:700; color:var(--text); gap:6px; }
.lang-switch-label[lang="ar"] { font-family:"Segoe UI",Tahoma,"Noto Sans Arabic","Noto Naskh Arabic",sans-serif; font-size:14px; }
.lang-switch-short { display:none; }
@media (max-width:560px) { .lang-switch { padding:0 8px; } .lang-switch-label { display:none; } .lang-switch-short { display:inline; } }

/* ═══════════════ Arabic interface: right-to-left layout ═══════════════
   <html lang="ar" dir="rtl"> is set by includes/i18n.php; English pages never match these rules.
   Flex and grid rows follow the direction by themselves. The rules below mirror the physical
   left/right values used above and in page-level <style> blocks, and always carry one more
   selector than the rule they mirror so they win over page styles loaded later. */
body:lang(ar), :lang(ar) button, :lang(ar) input, :lang(ar) select, :lang(ar) textarea,
:lang(ar) .page-header-left h2, :lang(ar) .topbar-title-h, :lang(ar) .modal-title, :lang(ar) .stat-value, :lang(ar) .empty-state-title, :lang(ar) .sms-dialog-title {
  font-family:"Segoe UI",Tahoma,"Noto Naskh Arabic","Noto Sans Arabic","Geeza Pro","Arabic UI Text",Arial,sans-serif; }
/* Letter-spacing breaks joined Arabic letters; there is no upper case to transform. */
:lang(ar) .table th, :lang(ar) .nav-section-title, :lang(ar) .popover-title, :lang(ar) .popover-group, :lang(ar) .notif-group,
:lang(ar) .page-header-left h2, :lang(ar) .topbar-title-h, :lang(ar) .markdown-body h1, :lang(ar) .markdown-body h2, :lang(ar) .markdown-body h3 { letter-spacing:0; text-transform:none; }
:lang(ar) .md-preview:empty::before { content:'لا يوجد ما يمكن معاينته بعد — ارجع إلى التحرير وابدأ الكتابة.'; }
:lang(ar) .quiz-option.opt-correct::after { content:"\2713  إجابة صحيحة"; }
:lang(ar) .quiz-option.opt-wrong::after { content:"\2717  إجابتك"; }

/* Directional icons point the other way */
[dir="rtl"] .ti-chevron-left, [dir="rtl"] .ti-chevron-right, [dir="rtl"] .ti-chevrons-left, [dir="rtl"] .ti-chevrons-right,
[dir="rtl"] .ti-arrow-left, [dir="rtl"] .ti-arrow-right, [dir="rtl"] .ti-arrow-narrow-left, [dir="rtl"] .ti-arrow-narrow-right,
[dir="rtl"] .ti-arrow-back, [dir="rtl"] .ti-arrow-back-up, [dir="rtl"] .ti-arrow-forward, [dir="rtl"] .ti-arrow-forward-up,
[dir="rtl"] .ti-arrow-bar-left, [dir="rtl"] .ti-arrow-bar-right, [dir="rtl"] .ti-caret-left, [dir="rtl"] .ti-caret-right,
[dir="rtl"] .ti-player-track-next, [dir="rtl"] .ti-player-track-prev, [dir="rtl"] .ti-corner-down-left, [dir="rtl"] .ti-corner-down-right,
[dir="rtl"] .ti-logout, [dir="rtl"] .ti-login, [dir="rtl"] .ti-send, [dir="rtl"] .ti-indent-increase, [dir="rtl"] .ti-indent-decrease,
[dir="rtl"] .sidebar-collapse-btn svg, [dir="rtl"] .sidebar-footer button svg { display:inline-block; transform:scaleX(-1); }
[dir="rtl"] .nav-section-toggle[aria-expanded="false"] .nav-section-chevron { transform:rotate(90deg); }

/* Values that must stay left-to-right inside Arabic text */
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="password"], [dir="rtl"] .cred-value { direction:ltr; text-align:right; }
/* School-typed content keeps its own direction (an English lesson reads left to right) */
[dir="rtl"] .markdown-body > *, [dir="rtl"] .notif-body { unicode-bidi:plaintext; text-align:start; }

/* Sidebar */
[dir="rtl"] .sidebar { box-shadow:inset 1px 0 0 rgba(255,255,255,.04), -3px 0 0 rgba(109,40,217,.5), -6px 0 16px rgba(13,190,214,.12); }
[dir="rtl"] .sidebar-logo .sidebar-collapse-btn { right:auto; left:10px; }
[dir="rtl"] button.nav-section-title { text-align:right; }
[dir="rtl"] .nav-item::before { left:auto; right:-6px; border-radius:3px 0 0 3px; }
[dir="rtl"] .nav-item.active { background:linear-gradient(270deg,rgba(91,79,229,.32) 0%,rgba(13,190,214,.12) 100%); }
[dir="rtl"] .nav-badge { margin-left:0; margin-right:auto; }
@media (min-width:769px) {
  html[dir="rtl"].sidebar-mini .sidebar-rail .sidebar { left:auto; right:0; }
}
@media (max-width:768px) {
  [dir="rtl"] .sidebar-rail .sidebar, [dir="rtl"] .sidebar { left:auto; right:-100%; transition:right .2s; }
  [dir="rtl"] .sidebar.open { left:auto; right:0; }
  [dir="rtl"] .sidebar-close { left:auto; right:10px; }
  [dir="rtl"] .notif-panel { right:auto; left:10px; }
  [dir="rtl"] .ctx-panel { right:auto; left:10px; }
  [dir="rtl"] .toast-stack { left:10px; right:10px; }
}

/* Top bar, search, notifications, toasts, popovers */
[dir="rtl"] .search-wrap > i { left:auto; right:11px; }
[dir="rtl"] .search-input { padding:8px 32px 8px 12px; }
[dir="rtl"] .search-dropdown { left:auto; right:0; }
[dir="rtl"] .topbar-title + .search-wrap { border-left:0; padding-left:0; border-right:1px solid var(--border); padding-right:12px; }
[dir="rtl"] .notif-dot { right:auto; left:7px; }
[dir="rtl"] .notif-btn .notif-count { right:auto; left:-6px; }
[dir="rtl"] .user-chip { padding:5px 5px 5px 9px; }
[dir="rtl"] .notif-panel { right:auto; left:20px; }
[dir="rtl"] .toast-stack { right:auto; left:18px; }
[dir="rtl"] .toast { border-left:1px solid var(--border); border-right:4px solid var(--primary); padding:11px 14px 11px 10px; }
[dir="rtl"] .toast-success { border-right-color:var(--success-strong); }
[dir="rtl"] .toast-error { border-right-color:var(--danger-strong); }
[dir="rtl"] .toast-warning { border-right-color:var(--warning-strong); }
[dir="rtl"] .popover { right:auto; left:0; }

/* Tables, forms, flashes, utilities */
[dir="rtl"] .table th { text-align:right; }
[dir="rtl"] .text-right { text-align:left; }
[dir="rtl"] .mr-6 { margin-right:0; margin-left:6px; }
[dir="rtl"] .req { margin-left:0; margin-right:3px; }
[dir="rtl"] .flash { border-left:0; border-right:3px solid currentColor; }
[dir="rtl"] .flash-close { margin-left:0; margin-right:auto; }
[dir="rtl"] .save-bar-text { margin-right:0; margin-left:auto; }
[dir="rtl"] .count-pill { margin-left:0; margin-right:8px; }
[dir="rtl"] .table th.sortable .sort-icon { margin-left:0; margin-right:3px; }
[dir="rtl"] .table-wrap .sticky-col { left:auto; right:0; }
[dir="rtl"] .table th.colgrp-father, [dir="rtl"] .table td.colgrp-father { border-left:0; border-right:1px solid var(--tint-father-line); }
[dir="rtl"] .table th.colgrp-mother, [dir="rtl"] .table td.colgrp-mother { border-left:0; border-right:1px solid var(--tint-mother-line); }
[dir="rtl"] .markdown-body ul, [dir="rtl"] .markdown-body ol { padding-left:0; padding-right:22px; }
[dir="rtl"] .markdown-body blockquote { border-left:0; border-right:3px solid var(--primary); border-radius:8px 0 0 8px; }
[dir="rtl"] .markdown-body ul.md-tasklist { padding-right:0; }

/* Page-level styles (class-attendance, attendance, employees, hr-candidates, curriculum, learning-portal,
   edu-system, schedule, promotion, students, settings, vacations, report notes) */
[dir="rtl"] .ca-push { margin-left:0; margin-right:auto; }
[dir="rtl"] .ca-stat { margin-right:0; margin-left:14px; }
[dir="rtl"] .att-table .col-name, [dir="rtl"] .att-table .col-id, [dir="rtl"] .att-table .col-match { text-align:right; }
[dir="rtl"] .emp-search i, [dir="rtl"] .ja-search i { left:auto; right:11px; }
[dir="rtl"] .emp-search input { padding-left:30px; padding-right:32px; }
[dir="rtl"] .ja-search input { padding-left:12px; padding-right:32px; }
[dir="rtl"] .emp-search .emp-search-clear { right:auto; left:6px; }
[dir="rtl"] .view-switch button + button { border-left:0; border-right:1px solid var(--border); }
[dir="rtl"] #staff-table th.sortable .sort-ind { margin-left:0; margin-right:3px; }
[dir="rtl"] .menu-pop { right:auto; left:0; }
[dir="rtl"] .emp-card-check { right:auto; left:12px; }
[dir="rtl"] .chip-icon-btn { border-left:0; border-right:1px solid var(--border); }
[dir="rtl"] .tree-level-nested { margin-left:0; margin-right:20px; border-left:0; border-right:2px dashed var(--border); padding:12px 18px 12px 0; border-radius:10px 0 0 10px; }
[dir="rtl"] .tree-children { padding-left:0; padding-right:14px; }
[dir="rtl"] .tree-open, [dir="rtl"] .es-step, [dir="rtl"] .quiz-option, [dir="rtl"] .outline-row, [dir="rtl"] .th-sort,
[dir="rtl"] .pm-table tr.pm-module th, [dir="rtl"] .tt-lesson, [dir="rtl"] .tt-slot, [dir="rtl"] .tt-agenda .tt-empty,
[dir="rtl"] .tt-range, [dir="rtl"] .tt-grid th.sticky-col { text-align:right; }
[dir="rtl"] .tree-actions, [dir="rtl"] .lp-nav .lp-next, [dir="rtl"] .vac-tab-actions { margin-left:0; margin-right:auto; }
@media (max-width:700px) { [dir="rtl"] .vac-tab-actions { margin-right:0; } }
[dir="rtl"] .md-toolbar { margin-left:0; margin-right:8px; padding-left:0; padding-right:10px; border-left:0; border-right:1px solid var(--border); }
[dir="rtl"] .curr-select-bar .curr-select-count { margin-right:0; margin-left:auto; }
[dir="rtl"] .quiz-option.opt-correct::after, [dir="rtl"] .quiz-option.opt-wrong::after { margin-left:0; margin-right:auto; }
[dir="rtl"] .outline-children { padding-left:0; padding-right:18px; }
[dir="rtl"] .outline-node.lvl-chapter > .outline-children { padding-left:0; padding-right:10px; }
[dir="rtl"] .tt-lesson, [dir="rtl"] .tt-slot { border-left:1px solid var(--border); border-right:3px solid var(--primary); }
[dir="rtl"] .tt-lesson.is-completed { border-left-color:var(--border); border-right-color:var(--success); }
[dir="rtl"] .tt-lesson.is-cancelled { border-left-color:var(--border); border-right-color:var(--danger); }
[dir="rtl"] .tt-lesson.is-rescheduled { border-left-color:var(--border); border-right-color:var(--purple); }
[dir="rtl"] .tt-slot.no-teacher { border-left-color:var(--border); border-right-color:var(--warning); }
[dir="rtl"] .tt-clashes { padding-left:0; padding-right:18px; }
[dir="rtl"] .tabs-cards { padding:0 16px 0 0; border-left:0; border-right:1px solid var(--border); }
@media (max-width:720px) { [dir="rtl"] .tabs-cards { border-right:none; padding:12px 0 0; } }
[dir="rtl"] .tt-agenda-day.today { border-left:1px solid var(--border); border-right:3px solid var(--primary); }
[dir="rtl"] .wz-step { border-left:1px solid var(--border); border-right:3px solid var(--border); }
[dir="rtl"] .wz-step.is-done { border-left-color:var(--border); border-right-color:var(--success); }
[dir="rtl"] .report-note { border-left:1px solid var(--border); border-right:3px solid var(--warning); }
[dir="rtl"] .login-off { margin-left:0; margin-right:4px; }
[dir="rtl"] .vac-tabs .tab .count-pill { margin-left:0; margin-right:4px; }

/* Inline style attributes in page markup */
[dir="rtl"] [style*="margin-left:auto"] { margin-left:0 !important; margin-right:auto !important; }
[dir="rtl"] [style*="margin-right:auto"] { margin-right:0 !important; margin-left:auto !important; }
[dir="rtl"] [style*="margin-left:8px"] { margin-left:0 !important; margin-right:8px !important; }
[dir="rtl"] [style*="padding-left:18px"] { padding-left:0 !important; padding-right:18px !important; }
[dir="rtl"] [style*="padding-left:32px"] { padding-left:12px !important; padding-right:32px !important; }
[dir="rtl"] [style*="border-left:3px solid var(--warning)"] { border-left:1px solid var(--border) !important; border-right:3px solid var(--warning) !important; }
[dir="rtl"] [style*="border-left:3px solid var(--danger)"] { border-left:1px solid var(--border) !important; border-right:3px solid var(--danger) !important; }
[dir="rtl"] [style*="border-left:3px solid var(--success)"] { border-left:1px solid var(--border) !important; border-right:3px solid var(--success) !important; }
[dir="rtl"] [style*="text-align:left"] { text-align:right !important; }
[dir="rtl"] [style*="left:-9999px"] { left:auto !important; right:-9999px !important; }
/* Phones: repeated after the desktop RTL rules above so they win */
@media (max-width:768px) {
  [dir="rtl"] .toast-stack { left:10px; right:10px; }
  [dir="rtl"] .notif-panel { left:10px; right:auto; }
}

/* ══ Density pass 2026-09-16: tighter, aligned layout on every page ══
   Buttons and inputs keep their 36px height (touch targets); only gaps and padding shrink. */
.page-content { padding:14px 18px 20px; }
.page-header { margin-bottom:10px; gap:8px; align-items:center; }
.page-header-left h2 { margin-bottom:1px; }
.page-header-actions { gap:6px; align-items:center; }
.card { padding:13px 14px; }
.card-title { margin-bottom:8px; }
.card-header { margin-bottom:8px; gap:8px; }
.card-header .card-title { margin-bottom:0; }
.grid, .grid-2 { gap:10px; }
.stat-card { padding:11px 12px; gap:10px; }
.form-row { gap:8px; }
.form-group { margin-bottom:8px; }
.form-label { margin-bottom:3px; }
.form-hint { font-size:11.5px; line-height:1.35; margin-top:2px; }
/* :where() keeps this at zero specificity so mb-* / mt-* utilities on the paragraph still win */
:where(.card > p.text-muted, .card > p.text-sm, .card > .text-muted.text-sm) { margin:0 0 8px; line-height:1.4; }
.table th { padding:7px 10px; }
.table td { padding:7px 10px; }
.tabs { margin-bottom:10px; }
.tab { padding:7px 12px; }
.toolbar { gap:8px; margin-bottom:10px; }
.save-bar { gap:8px; }
.modal, .sms-dialog { padding:16px; }
.sms-dialog-actions { margin-top:12px; }
.modal-header { margin-bottom:10px; }
.modal-footer { margin-top:10px; padding-top:10px; }
.empty-state { padding:22px 16px; }
.pager { padding:8px 0 0; }
.flash { padding:8px 12px; }
@media (max-width:768px) { .page-content { padding:10px; } }
.mb-12{margin-bottom:10px;} .mb-16{margin-bottom:12px;} .mb-20{margin-bottom:14px;} .mb-24{margin-bottom:16px;}
.mt-12{margin-top:10px;} .mt-16{margin-top:12px;} .mt-20{margin-top:14px;}

/* ── Row delete buttons: outline + trash icon + danger text. Solid .btn-danger is kept for the confirm button
   of destructive dialogs. Use: class="btn btn-sm btn-outline-danger" (with or without .btn-outline). ── */
.btn.btn-outline-danger { background:var(--card); border:1px solid var(--border); color:var(--danger-strong); }
.btn.btn-outline-danger:hover:not(:disabled) { background:var(--danger-tint); border-color:var(--danger-strong); color:var(--danger-strong); }
.btn.btn-outline-danger:focus-visible { outline-color:var(--danger-strong); }

/* ── Empty state action (emptyState() / emptyStateHTML() with a button) ── */
.empty-state-action { margin-top:10px; }

/* ── Dashboard charts (includes/dashboard_ui.php): rings, donuts, bars, legend ── */
.dash-stat { text-decoration:none; color:inherit; }
.dash-card-title { justify-content:space-between; gap:8px; }
.dash-rings { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
.dash-ring { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:12px 8px 10px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); text-decoration:none; color:inherit; transition:var(--transition); }
a.dash-ring:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); border-color:var(--border-strong); }
.dash-ring-svg { display:block; }
.dash-ring-fill { transition:stroke-dasharray .6s ease-out; }
.dash-ring-center { position:absolute; top:12px; height:104px; width:104px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; pointer-events:none; }
.dash-ring-center b { font-size:22px; font-weight:700; line-height:1.1; font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif; }
.dash-ring-center i { font-size:15px; color:var(--text-muted); }
.dash-ring-label { margin-top:8px; font-size:12.5px; font-weight:600; color:var(--text); }
.dash-ring-hint { font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.dash-ring-success .dash-ring-center b { color:var(--success); }
.dash-ring-warning .dash-ring-center b { color:var(--warning); }
.dash-ring-danger .dash-ring-center b { color:var(--danger); }
.dash-ring-muted .dash-ring-center b { color:var(--text-muted); }
.dash-donut { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.dash-donut-fig { position:relative; flex:0 0 auto; }
.dash-donut-fig svg { display:block; }
.dash-donut-fig circle { transition:stroke-width .15s ease; }
.dash-donut-fig circle:hover { stroke-width:22; }
.dash-donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.dash-donut-center b { font-size:21px; font-weight:700; line-height:1.1; font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif; }
.dash-donut-center span { font-size:11px; color:var(--text-muted); }
.dash-legend { flex:1 1 150px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dash-legend-row { display:grid; grid-template-columns:10px minmax(0,1fr) auto 38px; align-items:center; gap:8px; padding:4px 6px; border-radius:6px; font-size:12.5px; text-decoration:none; color:inherit; }
a.dash-legend-row:hover { background:var(--surface); }
.dash-legend-row.is-zero { color:var(--text-muted); }
.dash-legend-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-legend-n { font-weight:600; font-variant-numeric:tabular-nums; }
.dash-legend-pct { color:var(--text-muted); text-align:end; font-variant-numeric:tabular-nums; }
.dash-swatch { width:10px; height:10px; border-radius:3px; display:inline-block; }
.dash-bars { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.dash-bar-row { display:grid; grid-template-columns:120px minmax(0,1fr) 44px; gap:10px; align-items:center; font-size:12.5px; text-decoration:none; color:inherit; padding:2px 4px; border-radius:6px; }
a.dash-bar-row:hover { background:var(--surface); }
.dash-bar-name { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-bar-name small { color:var(--text-muted); font-weight:400; }
.dash-bar-track { height:9px; background:var(--surface); border-radius:6px; overflow:hidden; display:block; }
.dash-bar-fill { display:block; height:100%; border-radius:6px; min-width:2px; }
.dash-bar-n { text-align:end; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.dash-empty { padding:14px; text-align:center; color:var(--text-muted); font-size:13px; }
.dash-cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:14px; }
.dash-cols > .card { margin:0; }
.dash-avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.dash-avatar-ini { display:inline-flex; align-items:center; justify-content:center; background:var(--primary-light); color:var(--primary); font-size:11px; font-weight:700; }
.dash-actions { display:flex; flex-wrap:wrap; gap:8px; }
@media (max-width:600px) { .dash-bar-row { grid-template-columns:90px minmax(0,1fr) 40px; } .dash-rings { grid-template-columns:repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .dash-ring-fill, .dash-donut-fig circle { transition:none; } }