/*
 * SchoolAdminTheme (SAT) — Preskool-inspired design system
 * Default palette: Preskool Purple (#6C63FF)
 * Color themes: apply .sat-theme-blue | green | orange | teal | rose | dark to any wrapper
 *
 * Usage: <div class="sat-theme-blue sat-page">...</div>
 */

/* ─── COLOR TOKENS ──────────────────────────────────────────────────────── */
:root {
  --sat-primary:        #6C63FF;
  --sat-primary-light:  #EDE9FF;
  --sat-primary-dark:   #4C3DBF;
  --sat-primary-rgb:    108,99,255;

  --sat-bg:             #F5F6FA;
  --sat-surface:        #ffffff;
  --sat-surface-2:      #F8F9FC;
  --sat-border:         #F0F1F5;
  --sat-border-input:   #E9EBF0;

  --sat-text:           #1B2559;
  --sat-text-sub:       #4A4A69;
  --sat-text-muted:     #9396A5;

  --sat-radius-lg:      12px;
  --sat-radius:         10px;
  --sat-radius-sm:      8px;
  --sat-radius-xs:      6px;
  --sat-shadow:         0 4px 24px rgba(0,0,0,.06);
  --sat-shadow-modal:   0 20px 60px rgba(0,0,0,.2);

  /* Status colours — fixed, do not theme */
  --sat-green:          #0B8C4A;
  --sat-green-bg:       #E6F9F0;
  --sat-green-border:   #A3E6C3;
  --sat-red:            #C0392B;
  --sat-red-bg:         #FEE8E8;
  --sat-red-border:     #FBBDBD;
  --sat-amber:          #B7791F;
  --sat-amber-bg:       #FFF8E6;
  --sat-blue:           #1A56DB;
  --sat-blue-bg:        #E8F0FE;
  --sat-orange:         #F97316;
  --sat-orange-bg:      #FFF3E6;
}

/* ─── NAVY THEME — dark #002E6E nav + header, light content ─────────────── */
[data-theme="navy"] .navmenu,
[data-theme="navy"] .nav-brand-header,
[data-theme="navy"] nav.sitenav {
    background: #002E6E !important;
    --sat-text:        #FFFFFF;
    --sat-text-sub:    rgba(255,255,255,.85);
    --sat-text-muted:  rgba(255,255,255,.55);
    --sat-border:      rgba(255,255,255,.12);
    --sat-surface:     #002E6E;
    --sat-surface-2:   #002960;
    --neutral-foreground-rest:       #FFFFFF;
    --neutral-foreground-hint:       rgba(255,255,255,.55);
    /* Stealth hover/active for FluentNavLink items on dark sidebar */
    --neutral-fill-stealth-rest:     transparent;
    --neutral-fill-stealth-hover:    rgba(255,255,255,.12);
    --neutral-fill-stealth-active:   rgba(255,255,255,.20);
    /* Active nav link pill — semi-transparent cyan (readable on dark navy, white text) */
    --accent-fill-rest:              rgba(0,185,241,.28) !important;
    --accent-fill-hover:             rgba(0,185,241,.42);
    --accent-fill-active:            rgba(0,185,241,.55);
    --accent-foreground-rest:        #FFFFFF;
}
/* FluentNavLink hover text color on dark navy sidebar */
[data-theme="navy"] .navmenu .fluent-nav-item .positioning-region:hover:not(:has(.disabled)),
[data-theme="navy"] .navmenu .fluent-nav-item .positioning-region:hover:not(:has(.disabled)) * {
    color: #002E6E !important;
}

/* ─── ACTIVE NAV ITEM HIGHLIGHT ─────────────────────────────────────────── */
/* Light themes: light primary tint bg + left accent bar + primary text */
.navmenu .fluent-nav-item.active > .positioning-region,
.navmenu a.fluent-nav-item.active > .positioning-region {
    background: var(--sat-primary-light, #EDE9FF) !important;
    border-radius: 0 var(--sat-radius-sm, 8px) var(--sat-radius-sm, 8px) 0;
    box-shadow: inset 3px 0 0 var(--sat-primary, #6C63FF);
    color: var(--sat-primary, #6C63FF) !important;
}
.navmenu .fluent-nav-item.active > .positioning-region *,
.navmenu a.fluent-nav-item.active > .positioning-region * {
    color: var(--sat-primary, #6C63FF) !important;
    fill: var(--sat-primary, #6C63FF);
}

/* Navy + other dark-sidebar themes: cyan-tinted bg + white text + cyan left bar */
[data-theme="navy"] .navmenu .fluent-nav-item.active > .positioning-region,
[data-theme="navy"] .navmenu a.fluent-nav-item.active > .positioning-region {
    background: rgba(0,185,241,.22) !important;
    box-shadow: inset 3px 0 0 #00B9F1 !important;
    color: #FFFFFF !important;
}
[data-theme="navy"] .navmenu .fluent-nav-item.active > .positioning-region *,
[data-theme="navy"] .navmenu a.fluent-nav-item.active > .positioning-region * {
    color: #FFFFFF !important;
    fill: #FFFFFF;
}

/* Dark themes (cosmic/aurora/neon/ocean): semi-transparent accent bg + accent text + accent bar */
[data-theme="cosmic"] .navmenu .fluent-nav-item.active > .positioning-region,
[data-theme="aurora"] .navmenu .fluent-nav-item.active > .positioning-region,
[data-theme="neon"]   .navmenu .fluent-nav-item.active > .positioning-region,
[data-theme="ocean"]  .navmenu .fluent-nav-item.active > .positioning-region {
    background: var(--sat-primary-light) !important;
    box-shadow: inset 3px 0 0 var(--sat-primary) !important;
    color: var(--sat-primary) !important;
}
[data-theme="cosmic"] .navmenu .fluent-nav-item.active > .positioning-region *,
[data-theme="aurora"] .navmenu .fluent-nav-item.active > .positioning-region *,
[data-theme="neon"]   .navmenu .fluent-nav-item.active > .positioning-region *,
[data-theme="ocean"]  .navmenu .fluent-nav-item.active > .positioning-region * {
    color: var(--sat-primary) !important;
    fill: var(--sat-primary);
}
[data-theme="navy"] .nav-brand-name   { color: #FFFFFF !important; }
[data-theme="navy"] .nav-toggle-btn   { color: rgba(255,255,255,.75) !important; }
[data-theme="navy"] .nav-toggle-btn:hover { background: rgba(255,255,255,.12) !important; color: #FFFFFF !important; }
/* Tab toggle button on navy header — plain button uses sat-* tokens, adapts automatically */
[data-theme="navy"] .siteheader .sat-tab-toggle-btn {
    border-color: rgba(255,255,255,.30);
    background: rgba(255,255,255,.10);
    color: #FFFFFF;
}
[data-theme="navy"] .siteheader .sat-tab-toggle-btn:hover {
    background: rgba(255,255,255,.20);
    border-color: rgba(255,255,255,.55);
    color: #FFFFFF;
}
[data-theme="navy"] .siteheader .sat-tab-toggle-btn.active {
    background: rgba(0,185,241,.45);
    border-color: rgba(0,185,241,.70);
    color: #FFFFFF;
}
[data-theme="navy"] .siteheader .sat-tab-toggle-btn.active:hover {
    background: rgba(0,185,241,.60);
    border-color: rgba(0,185,241,.85);
    color: #FFFFFF;
}

[data-theme="navy"] .siteheader {
    background-color: #002E6E !important;
    border-bottom-color: rgba(255,255,255,.12) !important;
    --sat-text:        #FFFFFF;
    --sat-text-sub:    rgba(255,255,255,.85);
    --sat-text-muted:  rgba(255,255,255,.55);
    --sat-border:      rgba(255,255,255,.12);
    --neutral-foreground-rest: #FFFFFF;
    --neutral-stroke-rest: rgba(255,255,255,.15);
}
[data-theme="navy"] .siteheader .header-logo-text  { color: #FFFFFF !important; }
[data-theme="navy"] .siteheader .sat-session-chip  { background: rgba(255,255,255,.15) !important; color: #FFFFFF !important; border-color: transparent !important; }
[data-theme="navy"] .siteheader .sat-session-chip:hover { background: rgba(255,255,255,.25) !important; }
[data-theme="navy"] .siteheader .sat-profile-name  { color: #FFFFFF !important; }
[data-theme="navy"] .sat-mobile-bar { background: #002E6E !important; border-bottom-color: rgba(255,255,255,.12) !important; --sat-text: #FFFFFF; }
[data-theme="navy"] .sat-mobile-school-name { color: #FFFFFF !important; }

/* ─── NAVY THEME — panel background restore ─────────────────────────────── */
/* .tp-panel and .sat-profile-dropdown are DOM children of .siteheader,
   so they inherit --sat-surface:transparent set by applyNavyOverrides JS.
   These rules restore solid backgrounds using [data-theme] which is set on <html>. */
[data-theme="navy"] .tp-panel {
    background: #FFFFFF !important;
    --sat-surface: #FFFFFF;
    --sat-surface-2: #EDF3FA;
    --sat-text: #001A40;
    --sat-text-sub: #002E6E;
    --sat-text-muted: #6B8BAF;
    --sat-border: #DAEAF6;
    --neutral-layer-card-rest: #FFFFFF;
    --neutral-foreground-rest: #001A40;
}
[data-theme="navy"] .sat-profile-dropdown {
    background: #002458 !important;
    border-color: rgba(255,255,255,.15) !important;
    --sat-surface: #002458;
    --sat-surface-2: #002960;
    --sat-text: #FFFFFF;
    --sat-text-sub: rgba(255,255,255,.85);
    --sat-text-muted: rgba(255,255,255,.55);
    --sat-border: rgba(255,255,255,.15);
    --sat-red: #FF7B7B;
    --sat-red-bg: rgba(255,123,123,.15);
}
/* Mobile overflow menu inherits --sat-surface:transparent from .siteheader inline styles */
[data-theme="navy"] .sat-mobile-overflow-menu {
    background: #FFFFFF !important;
    border-color: #D0DFF0 !important;
    --sat-surface: #FFFFFF;
    --sat-surface-2: #EDF3FA;
    --sat-text: #001A40;
    --sat-text-sub: #002E6E;
    --sat-text-muted: #6B8BAF;
    --sat-border: #D0DFF0;
    --sat-red: #C0392B;
    --sat-red-bg: #FEE8E8;
}
/* AccountSwitcher dropdown inherits --sat-surface:transparent from .siteheader inline styles */
[data-theme="navy"] .as-dropdown {
    background: #FFFFFF !important;
    border-color: #D0DFF0 !important;
    --sat-surface: #FFFFFF;
    --sat-surface-2: #EDF3FA;
    --sat-text: #001A40;
    --sat-text-sub: #002E6E;
    --sat-text-muted: #6B8BAF;
    --sat-border: #D0DFF0;
    --sat-primary-light: #E6F0FF;
    --sat-red: #C0392B;
    --sat-red-bg: #FEE8E8;
    --sat-green: #0B8C4A;
}

/* ─── COLOUR PRESETS ────────────────────────────────────────────────────── */
.sat-theme-blue   { --sat-primary:#1A56DB; --sat-primary-light:#EBF5FF; --sat-primary-dark:#1141A3; --sat-primary-rgb:26,86,219; }
.sat-theme-green  { --sat-primary:#0B8C4A; --sat-primary-light:#E6F9F0; --sat-primary-dark:#06633A; --sat-primary-rgb:11,140,74; }
.sat-theme-orange { --sat-primary:#F97316; --sat-primary-light:#FFF3E6; --sat-primary-dark:#C4580A; --sat-primary-rgb:249,115,22; }
.sat-theme-teal   { --sat-primary:#0891B2; --sat-primary-light:#E0F9FF; --sat-primary-dark:#0E7490; --sat-primary-rgb:8,145,178; }
.sat-theme-rose   { --sat-primary:#E91E63; --sat-primary-light:#FFF0F3; --sat-primary-dark:#C2185B; --sat-primary-rgb:233,30,99; }
.sat-theme-dark   { --sat-primary:#1B2559; --sat-primary-light:#E8EAF6; --sat-primary-dark:#0D1440; --sat-primary-rgb:27,37,89; }

/* ─── GLOBAL BACKGROUND — ensure all wrapper elements follow the theme ───── */
html,
body,
article,
fluent-body-content,
#body-content,
.body-content { background-color: var(--sat-bg) !important; color: var(--sat-text) !important; }

/* ─── PAGE SHELL ────────────────────────────────────────────────────────── */
.sat-page { padding:24px; background:var(--sat-bg); min-height:100vh; font-family:"Poppins","Roboto",sans-serif; color:var(--sat-text); }

/* ─── BREADCRUMB ────────────────────────────────────────────────────────── */
.sat-breadcrumb { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--sat-text-muted); margin-bottom:18px; flex-wrap:wrap; }
.sat-breadcrumb a { color:var(--sat-text-muted); text-decoration:none; transition:color .15s; }
.sat-breadcrumb a:hover { color:var(--sat-primary); }
.sat-breadcrumb .sep { color:var(--sat-border-input); }
.sat-breadcrumb .cur { color:var(--sat-text); font-weight:600; }

/* ─── PAGE HEADER ───────────────────────────────────────────────────────── */
.sat-hdr { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
.sat-hdr-left h4 { margin:0; font-size:20px; font-weight:700; color:var(--sat-text); }
.sat-hdr-left p  { margin:4px 0 0; font-size:13px; color:var(--sat-text-muted); }

/* ─── CARD ──────────────────────────────────────────────────────────────── */
.sat-card { background:var(--sat-surface); border-radius:var(--sat-radius); box-shadow:var(--sat-shadow); margin-bottom:20px; }
.sat-card-hd { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--sat-border); flex-wrap:wrap; gap:10px; }
.sat-card-hd h5 { margin:0; font-size:15px; font-weight:700; color:var(--sat-text); }
.sat-card-bd { padding:20px; }
.sat-card-ft { padding:12px 20px; border-top:1px solid var(--sat-border); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* ─── STAT CARDS ────────────────────────────────────────────────────────── */
.sat-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:20px; }
.sat-stat { background:var(--sat-surface); border-radius:var(--sat-radius); box-shadow:var(--sat-shadow); padding:20px; display:flex; align-items:center; gap:16px; }
.sat-stat-icon { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sat-stat-icon svg { width:24px; height:24px; }
.sat-stat-icon-primary { background:var(--sat-primary-light); color:var(--sat-primary); }
.sat-stat-icon-green   { background:var(--sat-green-bg);   color:var(--sat-green);   }
.sat-stat-icon-red     { background:var(--sat-red-bg);     color:var(--sat-red);     }
.sat-stat-icon-amber   { background:var(--sat-amber-bg);   color:var(--sat-amber);   }
.sat-stat-icon-blue    { background:var(--sat-blue-bg);    color:var(--sat-blue);    }
.sat-stat-icon-orange  { background:var(--sat-orange-bg);  color:var(--sat-orange);  }
.sat-stat-val { font-size:26px; font-weight:700; line-height:1; color:var(--sat-text); }
.sat-stat-lbl { font-size:12px; color:var(--sat-text-muted); margin-top:4px; }

/* ─── QUICK-ACTION CARDS ────────────────────────────────────────────────── */
.sat-qa-grid { display:flex; flex-wrap:wrap; gap:10px; }
.sat-qa-btn { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 20px; background:var(--sat-surface-2); border:1.5px solid var(--sat-border); border-radius:var(--sat-radius-sm); cursor:pointer; transition:all .2s; min-width:110px; text-align:center; color:var(--sat-text-sub); font-size:12px; font-weight:600; }
.sat-qa-btn:hover { border-color:var(--sat-primary); background:var(--sat-primary-light); color:var(--sat-primary); }
.sat-qa-btn svg { width:22px; height:22px; }

/* ─── FILTER BAR ────────────────────────────────────────────────────────── */
.sat-filter { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.sat-filter-item { flex:1; min-width:150px; }
.sat-filter-actions { display:flex; gap:8px; align-items:flex-end; flex-shrink:0; }

/* ─── BUTTONS ───────────────────────────────────────────────────────────── */
.sat-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:var(--sat-radius-sm); font-size:13px; font-weight:600; border:none; cursor:pointer; transition:opacity .15s; line-height:1; font-family:inherit; }
.sat-btn:hover:not(:disabled) { opacity:.85; }
.sat-btn:disabled { opacity:.5; cursor:not-allowed; }
.sat-btn-primary  { background:var(--sat-primary); color:#fff; }
.sat-btn-outline  { background:var(--sat-surface); color:var(--sat-primary); border:1.5px solid var(--sat-primary); }
.sat-btn-light    { background:var(--sat-surface-2); color:var(--sat-text-sub); border:1px solid var(--sat-border-input); }
.sat-btn-danger   { background:var(--sat-red); color:#fff; }
.sat-btn-success  { background:var(--sat-green); color:#fff; }
.sat-btn-sm  { padding:6px 12px; font-size:12px; border-radius:var(--sat-radius-xs); }
.sat-btn-lg  { padding:11px 24px; font-size:14px; }
.sat-btn-icon { width:36px; height:36px; padding:0; justify-content:center; border-radius:var(--sat-radius-sm); }

/* ─── ICON BUTTONS ──────────────────────────────────────────────────────── */
.sat-ib { width:32px; height:32px; border-radius:var(--sat-radius-sm); border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:opacity .15s; }
.sat-ib:hover { opacity:.8; }
.sat-ib svg { width:14px; height:14px; }
.sat-ib-edit      { background:var(--sat-orange-bg);      color:var(--sat-orange); }
.sat-ib-del       { background:var(--sat-red-bg);         color:var(--sat-red); }
.sat-ib-view      { background:var(--sat-blue-bg);        color:var(--sat-blue); }
.sat-ib-accession { background:var(--sat-green-bg);       color:var(--sat-green); }
.sat-ib-renew     { background:var(--sat-primary-light);  color:var(--sat-primary); }
.sat-ib-collect   { background:var(--sat-green-bg);       color:var(--sat-green); }
.sat-ib-waive     { background:var(--sat-amber-bg);       color:var(--sat-amber); }
.sat-ib-approve   { background:var(--sat-green-bg);       color:var(--sat-green); }
.sat-ib-reject    { background:var(--sat-red-bg);         color:var(--sat-red); }
.sat-ib-collect::before { content:'\2713'; font-size:15px; font-weight:700; line-height:1; }
.sat-ib-waive::before   { content:'\2715'; font-size:14px; font-weight:700; line-height:1; }
.sat-ib-approve::before { content:'\2713'; font-size:15px; font-weight:700; line-height:1; }
.sat-ib-reject::before  { content:'\2715'; font-size:14px; font-weight:700; line-height:1; }

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

/* ─── BADGES ────────────────────────────────────────────────────────────── */
.sat-badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap; }
.sat-badge-primary { background:var(--sat-primary-light); color:var(--sat-primary); }
.sat-badge-green   { background:var(--sat-green-bg);   color:var(--sat-green);   }
.sat-badge-red     { background:var(--sat-red-bg);     color:var(--sat-red);     }
.sat-badge-amber   { background:var(--sat-amber-bg);   color:var(--sat-amber);   }
.sat-badge-blue    { background:var(--sat-blue-bg);    color:var(--sat-blue);    }
.sat-badge-orange  { background:var(--sat-orange-bg);  color:var(--sat-orange);  }
.sat-badge-gray    { background:var(--sat-border);     color:var(--sat-text-muted); }

/* ─── AVATAR ────────────────────────────────────────────────────────────── */
.sat-av { width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff; flex-shrink:0; }

/* ─── FORM CONTROLS ─────────────────────────────────────────────────────── */
.sat-form-group { margin-bottom:16px; }
.sat-form-group label { display:block; font-size:12px; font-weight:600; color:var(--sat-text-sub); margin-bottom:6px; }
.sat-input { width:100%; padding:9px 12px; border:1.5px solid var(--sat-border-input); border-radius:var(--sat-radius-sm); font-size:13px; color:var(--sat-text); background:var(--sat-surface); outline:none; box-sizing:border-box; font-family:inherit; transition:border-color .15s; }
.sat-input:focus { border-color:var(--sat-primary); }
.sat-input[readonly], .sat-input:disabled { background:var(--sat-surface-2); color:var(--sat-text-muted); }
textarea.sat-input { resize:vertical; min-height:80px; }
.sat-row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sat-row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.sat-checkbox { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--sat-text-sub); cursor:pointer; font-family:inherit; }
.sat-checkbox input[type=checkbox] { width:16px; height:16px; accent-color:var(--sat-primary); flex-shrink:0; }
@media(max-width:540px){ .sat-row2,.sat-row3 { grid-template-columns:1fr; } }

/* ─── ALERTS ────────────────────────────────────────────────────────────── */
.sat-alert { padding:10px 16px; border-radius:var(--sat-radius-sm); font-size:13px; font-weight:500; margin-bottom:14px; }
.sat-alert-ok   { background:var(--sat-green-bg);  color:var(--sat-green);  border:1px solid var(--sat-green-border); }
.sat-alert-err  { background:var(--sat-red-bg);    color:var(--sat-red);    border:1px solid var(--sat-red-border); }
.sat-alert-warn { background:var(--sat-amber-bg);  color:var(--sat-amber);  border:1px solid #F6D860; }
.sat-alert-info { background:var(--sat-blue-bg);   color:var(--sat-blue);   border:1px solid #BFD7FD; }

/* ─── EMPLOYEE SEARCH DROPDOWN ──────────────────────────────────────────── */
.sat-dropdown-list { border:1px solid var(--sat-border); border-radius:var(--sat-radius-md); background:var(--sat-surface); margin-top:4px; max-height:220px; overflow-y:auto; box-shadow:var(--sat-shadow-card); }
.sat-dropdown-item { padding:10px 14px; cursor:pointer; font-size:14px; border-bottom:1px solid var(--sat-border-light); transition:background .15s; }
.sat-dropdown-item:last-child { border-bottom:none; }
.sat-dropdown-item:hover { background:var(--sat-blue-bg); }
.sat-dropdown-item-disabled { opacity:.55; cursor:default; pointer-events:none; }

/* ─── PROFILE MENU ───────────────────────────────────────────────────────── */
.sat-profile-wrap { position:relative; }
.sat-profile-btn { display:flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; padding:4px 8px; border-radius:var(--sat-radius-sm); color:var(--sat-text); transition:background .15s; }
.sat-profile-btn:hover { background:var(--sat-surface-2); }
.sat-profile-name { font-size:13px; font-weight:600; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--sat-text); }
@media (max-width: 768px) { .sat-profile-name { display:none; } }
.sat-profile-backdrop { position:fixed; inset:0; z-index:1000; }
.sat-profile-dropdown { position:absolute; top:calc(100% + 6px); right:0; min-width:230px; background:var(--sat-surface); border:1px solid var(--sat-border); border-radius:var(--sat-radius); box-shadow:var(--sat-shadow-modal); z-index:1001; overflow:hidden; }
.sat-profile-info { display:flex; align-items:center; gap:12px; padding:16px; border-bottom:1px solid var(--sat-border); }
.sat-profile-info-name { font-weight:700; font-size:14px; color:var(--sat-text); }
.sat-profile-info-email { font-size:12px; color:var(--sat-text-muted); margin-top:2px; }
.sat-profile-actions { padding:8px; }
.sat-profile-logout { width:100%; display:flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; padding:9px 12px; border-radius:var(--sat-radius-sm); font-size:13px; font-weight:600; color:var(--sat-red); text-align:left; transition:background .15s; }
.sat-profile-logout:hover { background:var(--sat-red-bg); }

/* ─── RESPONSIVE HEADER ─────────────────────────────────────────────────── */
@media (max-width: 768px) { .sat-header-desktop-only { display:none !important; } }
@media (min-width: 769px) { .sat-header-mobile-only  { display:none !important; } }

/* Override Fluent bundle .header-gutters margin on mobile */
@media (max-width: 768px) {
    .header-gutters,
    .siteheader .header-gutters,
    header .header-gutters {
        margin: 0 !important;
        padding: 0 8px !important;
        gap: 6px !important;
    }
}

/* ─── SESSION CHIP ───────────────────────────────────────────────────────── */
.sat-session-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; background:var(--sat-primary-light); color:var(--sat-primary); border:none; cursor:pointer; font-size:11px; font-weight:600; white-space:nowrap; transition:background .15s; }
.sat-session-chip:hover { background:var(--sat-primary); color:#fff; }
@media (max-width: 768px) { .sat-session-chip { max-width:120px; overflow:hidden; text-overflow:ellipsis; } }

/* ─── MOBILE BAR ─────────────────────────────────────────────────────────── */
.sat-mobile-bar { display:flex; align-items:center; gap:10px; padding:8px 14px; background:var(--sat-surface); border-bottom:1px solid var(--sat-border); position:relative; z-index:9901; }
.sat-mobile-school-btn { background:none; border:none; cursor:pointer; padding:0; display:flex; align-items:center; }
.sat-mobile-school-name { font-size:13px; font-weight:600; color:var(--sat-text); }
.sat-mobile-close-btn { background:none; border:none; cursor:pointer; color:var(--sat-text-muted); font-size:15px; line-height:1; padding:0 4px; }

/* ─── TAB TOGGLE BUTTON ───────────────────────────────────────────────────── */
.sat-tab-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    border-radius: var(--sat-radius-sm, 8px);
    border: 1px solid var(--sat-border-input, #E9EBF0);
    background: var(--sat-surface-2, #F8F9FC);
    color: var(--sat-text-muted, #9396A5);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.sat-tab-toggle-btn:hover {
    background: var(--sat-surface, #fff);
    border-color: var(--sat-primary, #6C63FF);
    color: var(--sat-primary, #6C63FF);
}
.sat-tab-toggle-btn.active {
    background: var(--sat-primary, #6C63FF);
    border-color: var(--sat-primary, #6C63FF);
    color: #fff;
}
.sat-tab-toggle-btn.active:hover {
    background: var(--sat-primary-dark, #4C3DBF);
    border-color: var(--sat-primary-dark, #4C3DBF);
    color: #fff;
}

/* ─── MOBILE OVERFLOW (⋯) MENU ───────────────────────────────────────────── */
.sat-mobile-overflow { position:relative; }
.sat-mobile-dots-btn { background:none; border:none; cursor:pointer; padding:6px 8px; border-radius:var(--sat-radius-sm); color:var(--sat-text-muted); display:flex; align-items:center; transition:background .15s; }
.sat-mobile-dots-btn:hover { background:var(--sat-surface-2); color:var(--sat-text); }
.sat-mobile-overflow-backdrop { position:fixed; inset:0; z-index:9902; }
.sat-mobile-overflow-menu { position:fixed; top:52px; right:8px; min-width:220px; max-width:calc(100vw - 16px); background:var(--sat-surface); border:1px solid var(--sat-border); border-radius:var(--sat-radius); box-shadow:var(--sat-shadow-modal); z-index:9903; overflow:hidden; }
.sat-mob-menu-item { display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; border-bottom:1px solid var(--sat-border); transition:background .15s; color:var(--sat-text); width:100%; background:none; border-left:none; border-right:none; border-top:none; text-align:left; font-family:inherit; }
.sat-mob-menu-item:last-child { border-bottom:none; }
.sat-mob-menu-item:hover { background:var(--sat-surface-2); }
.sat-mob-menu-item svg { flex-shrink:0; color:var(--sat-text-muted); }
.sat-mob-menu-label { font-size:11px; font-weight:600; color:var(--sat-text-muted); text-transform:uppercase; letter-spacing:.4px; }
.sat-mob-menu-value { font-size:13px; font-weight:600; color:var(--sat-text); margin-top:2px; }
.sat-mob-menu-item-theme { align-items:flex-start; cursor:default; }
.sat-mob-menu-item-theme:hover { background:none; }
.sat-mob-menu-divider { height:1px; background:var(--sat-border); }
.sat-mob-menu-logout { color:var(--sat-red) !important; }
.sat-mob-menu-logout svg { color:var(--sat-red); }
.sat-mob-menu-logout:hover { background:var(--sat-red-bg) !important; }

/* ─── MODAL OVERLAY ─────────────────────────────────────────────────────── */
.sat-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000; display:flex; align-items:center; justify-content:center; padding:16px; }
.sat-modal { background:var(--sat-surface); border-radius:var(--sat-radius-lg); padding:0; width:100%; max-height:90vh; overflow-y:auto; box-shadow:var(--sat-shadow-modal); display:flex; flex-direction:column; }
.sat-modal-sm  { max-width:420px; }
.sat-modal-md  { max-width:560px; }
.sat-modal-lg  { max-width:720px; }
.sat-modal-hd  { padding:20px 24px; border-bottom:1px solid var(--sat-border); font-size:17px; font-weight:700; color:var(--sat-text); display:flex; align-items:center; justify-content:space-between; }
.sat-modal-close { width:32px; height:32px; border:none; border-radius:var(--sat-radius-sm); background:var(--sat-surface-2); color:var(--sat-text-muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .15s, color .15s; flex-shrink:0; }
.sat-modal-close:hover { background:var(--sat-red-bg); color:var(--sat-red); }
.sat-modal-bd  { padding:24px; flex:1; }
.sat-modal-ft  { padding:16px 24px; border-top:1px solid var(--sat-border); display:flex; justify-content:flex-end; gap:10px; }
@media (max-width:600px) {
    .sat-overlay { padding:0; align-items:flex-end; }
    .sat-modal, .sat-modal-sm, .sat-modal-md, .sat-modal-lg { max-width:100%; width:100%; max-height:92dvh; border-radius:var(--sat-radius-lg) var(--sat-radius-lg) 0 0; }
    .sat-modal-hd { padding:16px 18px; font-size:15px; }
    .sat-modal-bd  { padding:18px; }
    .sat-modal-ft  { padding:12px 18px; }
}

/* ─── TABS ──────────────────────────────────────────────────────────────── */
.sat-tabs { border-bottom:2px solid var(--sat-border); display:flex; gap:4px; margin-bottom:20px; flex-wrap:wrap; }
.sat-tab { padding:10px 18px; border:none; background:none; cursor:pointer; font-size:13px; font-weight:600; color:var(--sat-text-muted); border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .15s; font-family:inherit; }
.sat-tab:hover { color:var(--sat-text); }
.sat-tab.active { color:var(--sat-primary); border-bottom-color:var(--sat-primary); }
.sat-tab-panel { display:none; }
.sat-tab-panel.active { display:block; }

/* ─── SPINNER ───────────────────────────────────────────────────────────── */
.sat-spinner { display:flex; justify-content:center; align-items:center; padding:60px; flex-direction:column; gap:12px; color:var(--sat-text-muted); font-size:13px; }
.sat-spinner-ring { width:40px; height:40px; border:3px solid var(--sat-border-input); border-top-color:var(--sat-primary); border-radius:50%; animation:sat-spin .8s linear infinite; }
@keyframes sat-spin { to { transform:rotate(360deg); } }

/* ─── EMPTY STATE ───────────────────────────────────────────────────────── */
.sat-empty { padding:60px 20px; text-align:center; color:var(--sat-text-muted);}
.sat-empty svg { opacity:.3; max-width:100px;}
.sat-empty p { margin-top:12px; font-size:15px; }

/* ─── PAGINATION ────────────────────────────────────────────────────────── */
.sat-pagination { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-top:1px solid var(--sat-border); flex-wrap:wrap; gap:8px; }
.sat-pagination-info { font-size:13px; color:var(--sat-text-muted); }

/* ─── STICKY SAVE BAR ───────────────────────────────────────────────────── */
.sat-save-bar { position:sticky; bottom:0; background:var(--sat-surface); border-top:1px solid var(--sat-border); padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; box-shadow:0 -4px 20px rgba(0,0,0,.06); z-index:100; flex-wrap:wrap; }
.sat-save-bar-info { font-size:13px; color:var(--sat-text-muted); }
.sat-save-bar-info strong { color:var(--sat-primary); }

/* ─── BANNER ────────────────────────────────────────────────────────────── */
.sat-banner-info { display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--sat-primary-light); border:1px solid rgba(var(--sat-primary-rgb),.3); border-radius:var(--sat-radius-sm); margin-bottom:16px; font-size:13px; color:var(--sat-primary-dark); font-weight:600; }

/* ─── SCHOOL / SESSION SELECT DIALOG ───────────────────────────────────── */
.school-select-dialog { padding:16px 20px 4px; min-width:340px; box-sizing:border-box; }
.school-select-field { display:flex; flex-direction:column; gap:4px; width:100%; }
.school-select-label { font-size:12px; font-weight:600; color:var(--sat-text-sub); }
/* Force the Fluent select control and its inner listbox to fill the dialog width */
.school-select-dialog fluent-select,
.school-select-dialog fluent-select::part(control) { width:100% !important; max-width:100% !important; box-sizing:border-box; }
.school-select-dialog fluent-listbox { min-width:100% !important; }

/* ─── UTILITIES ─────────────────────────────────────────────────────────── */
.sat-flex-between { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.sat-flex-center  { display:flex; align-items:center; gap:8px; }
.sat-text-muted   { color:var(--sat-text-muted); font-size:12px; }
.sat-divider      { border:none; border-top:1px solid var(--sat-border); margin:16px 0; }
.sat-mono         { font-family:monospace; font-size:11px; }
.sat-truncate     { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ─── TIMETABLE ─────────────────────────────────────────────────────────── */
/* Period color palette (8 colors) */
.sat-tt-c1 { --tt-bg:#EEF2FF; --tt-border:#667EEA; --tt-grad:linear-gradient(135deg,#667eea,#764ba2); }
.sat-tt-c2 { --tt-bg:#FDF2F8; --tt-border:#F5576C; --tt-grad:linear-gradient(135deg,#f093fb,#f5576c); }
.sat-tt-c3 { --tt-bg:#EFF8FF; --tt-border:#4FACFE; --tt-grad:linear-gradient(135deg,#4facfe,#00f2fe); }
.sat-tt-c4 { --tt-bg:#F0FDF4; --tt-border:#43E97B; --tt-grad:linear-gradient(135deg,#43e97b,#38f9d7); }
.sat-tt-c5 { --tt-bg:#FFF7ED; --tt-border:#FA709A; --tt-grad:linear-gradient(135deg,#fa709a,#fee140); }
.sat-tt-c6 { --tt-bg:#FAF5FF; --tt-border:#A18CD1; --tt-grad:linear-gradient(135deg,#a18cd1,#fbc2eb); }
.sat-tt-c7 { --tt-bg:#FFF8F1; --tt-border:#FDA085; --tt-grad:linear-gradient(135deg,#fda085,#f6d365); }
.sat-tt-cx { --tt-bg:#F0F9FF; --tt-border:#89F7FE; --tt-grad:linear-gradient(135deg,#89f7fe,#66a6ff); }

/* Period cell */
.sat-tt-table { width:100%; border-collapse:collapse; min-width:700px; }
.sat-tt-head { background:linear-gradient(135deg,#6C63FF,#4C3DBF); }
.sat-tt-head th { padding:12px 10px; color:#fff; font-size:13px; font-weight:600; text-align:center; border-right:1px solid rgba(255,255,255,.2); white-space:nowrap; }
.sat-tt-period-col { padding:8px; text-align:center; background:var(--sat-surface-2); border-right:2px solid var(--sat-border); vertical-align:middle; width:110px; }
.sat-tt-period-badge { width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#fff; margin-bottom:4px; background:var(--tt-grad,linear-gradient(135deg,#667eea,#764ba2)); }
.sat-tt-period-time { font-size:11px; color:var(--sat-text-muted); line-height:1.4; }
.sat-tt-cell { padding:5px; vertical-align:middle; border-right:1px solid var(--sat-border); border-bottom:1px solid var(--sat-border); width:150px; height:88px; }
.sat-tt-cell-inactive { padding:5px; vertical-align:middle; border-right:1px solid var(--sat-border); border-bottom:1px solid var(--sat-border); width:150px; height:88px; background:repeating-linear-gradient(45deg,var(--sat-surface-2,#f5f5f5),var(--sat-surface-2,#f5f5f5) 4px,transparent 4px,transparent 8px); opacity:0.55; cursor:default; }
.sat-tt-slot { border-radius:8px; background:var(--tt-bg,#eef2ff); border-left:4px solid var(--tt-border,#667eea); padding:8px 10px; min-height:70px; display:flex; flex-direction:column; justify-content:center; height:100%; }
.sat-tt-slot-subject { font-weight:700; font-size:13px; color:var(--sat-text); margin-bottom:3px; }
.sat-tt-slot-teacher { font-size:11px; color:var(--sat-text-muted); display:flex; align-items:center; gap:4px; }
.sat-tt-slot-class { font-size:11px; font-weight:600; color:var(--sat-text-sub); margin-bottom:2px; }
.sat-tt-slot-empty { height:70px; border-radius:8px; background:var(--sat-surface-2); border:1px dashed var(--sat-border-input); }
.sat-tt-break { background:#FFFBEB; border-bottom:1px solid #FDE68A; }
.sat-tt-break td:first-child { border-right:2px solid #FDE68A; font-size:11px; color:#92400E; font-weight:600; }
.sat-tt-break-label { font-weight:600; color:#92400E; font-size:13px; }
.sat-tt-row:hover td { background:#FAFAFF; }

/* Period slot preview strip (used in PeriodSlots list) */
.sat-ps-slot { display:flex; align-items:center; gap:10px; }
.sat-ps-slot-bar { width:4px; height:36px; border-radius:2px; flex-shrink:0; background:var(--tt-border,#667eea); }
.sat-ps-slot-name { font-weight:600; font-size:13px; color:var(--sat-text); }

/* Period slot toggle chips (ClassPeriodSlotSetup checklist) */
.sat-ps-chip { display:flex; align-items:center; gap:8px; padding:8px 12px; border:1.5px solid var(--sat-border-input); border-radius:var(--sat-radius-sm); cursor:pointer; transition:all .15s; background:var(--sat-surface); user-select:none; min-width:140px; }
.sat-ps-chip:hover { border-color:var(--tt-border,var(--sat-primary)); background:var(--tt-bg,var(--sat-primary-light)); }
.sat-ps-chip-on { border-color:var(--tt-border,var(--sat-primary)); background:var(--tt-bg,var(--sat-primary-light)); }
.sat-ps-chip-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; background:var(--tt-border,var(--sat-primary)); }
.sat-ps-chip-label { font-weight:600; font-size:12px; color:var(--sat-text); }

/* Day filter tabs */
.sat-day-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.sat-day-tab { padding:6px 14px; border:1.5px solid var(--sat-border-input); background:var(--sat-surface); border-radius:20px; font-size:12px; font-weight:600; color:var(--sat-text-sub); cursor:pointer; transition:all .15s; font-family:inherit; }
.sat-day-tab:hover { border-color:var(--sat-primary); color:var(--sat-primary); }
.sat-day-tab.active { background:var(--sat-primary); border-color:var(--sat-primary); color:#fff; }

/* Substitute card */
.sat-sub-card { border-radius:var(--sat-radius); border:1px solid var(--sat-border); background:var(--sat-surface); box-shadow:var(--sat-shadow); overflow:hidden; }
.sat-sub-card-hd { background:linear-gradient(135deg,#6C63FF,#4C3DBF); padding:12px 16px; color:#fff; }
.sat-sub-card-body { padding:14px 16px; }

/* Stat cards for dashboard */
.sat-tt-stat { border-radius:var(--sat-radius); padding:20px; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.15); flex:1; min-width:160px; }
.sat-tt-stat-lbl { font-size:12px; opacity:.85; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.sat-tt-stat-val { font-size:34px; font-weight:700; line-height:1; }
.sat-tt-stat-ft { margin-top:12px; display:flex; justify-content:space-between; align-items:center; }
.sat-tt-dash-link { font-size:12px; color:rgba(255,255,255,.85); font-weight:600; cursor:pointer; text-decoration:none; border:none; background:none; }
.sat-tt-dash-link:hover { color:#fff; text-decoration:underline; }
@media(max-width:768px) { .sat-tt-dash-bottom { grid-template-columns:1fr !important; } }

/* ─── SYNC DATA PAGE ─────────────────────────────────────────────────────── */
.sat-sync-card { background:var(--sat-surface); border:1px solid var(--sat-border); border-radius:var(--sat-radius); box-shadow:var(--sat-shadow); display:flex; flex-direction:column; transition:box-shadow .15s; }
.sat-sync-card:hover { box-shadow:0 6px 24px rgba(0,0,0,.1); }
.sat-sync-card-hd { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--sat-border); gap:8px; }
.sat-sync-title { font-weight:700; font-size:13px; color:var(--sat-text); }
.sat-sync-icon { width:32px; height:32px; border-radius:var(--sat-radius-sm); background:var(--sat-primary-light); color:var(--sat-primary); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.sat-sync-card-bd { padding:12px 16px; flex:1; }
.sat-sync-desc { font-size:12px; color:var(--sat-text-sub); margin:0 0 6px; line-height:1.5; }
.sat-sync-requires { font-size:11px; color:var(--sat-text-muted); }
.sat-sync-card-ft { padding:10px 16px; border-top:1px solid var(--sat-border); display:flex; gap:8px; align-items:center; }

/* ─── BARCODE PAGE ───────────────────────────────────────────────────────── */
.bc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.bc-card { border:1.5px solid var(--sat-border-input); border-radius:var(--sat-radius-sm); background:var(--sat-surface); padding:12px; display:flex; flex-direction:column; gap:6px; position:relative; cursor:pointer; transition:border-color .15s; }
.bc-card.selected { border-color:var(--sat-primary); background:var(--sat-primary-light); }
.bc-card.printed { opacity:.6; }
.bc-svg { display:flex; justify-content:center; align-items:center; min-height:64px; }
.bc-svg svg { max-width:100%; height:auto; }
.bc-fallback { font-family:monospace; font-size:11px; text-align:center; background:var(--sat-surface-2); padding:10px 6px; border-radius:4px; letter-spacing:1px; color:var(--sat-text); }
.bc-label1 { font-size:12px; font-weight:700; color:var(--sat-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bc-label2 { font-size:11px; color:var(--sat-text-sub); }
.bc-label3 { font-size:11px; color:var(--sat-text-muted); }
.bc-check { position:absolute; top:8px; right:8px; }
.bc-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.bc-tab { padding:8px 18px; border:none; background:none; cursor:pointer; font-size:13px; font-weight:600; color:var(--sat-text-muted); border-bottom:2px solid transparent; margin-bottom:-2px; font-family:inherit; transition:all .15s; }
.bc-tab.active { color:var(--sat-primary); border-bottom-color:var(--sat-primary); }
.bc-tabs { border-bottom:2px solid var(--sat-border); display:flex; gap:4px; margin-bottom:20px; }
@media print {
    body * { visibility:hidden; }
    #bc-print-area, #bc-print-area * { visibility:visible; }
    #bc-print-area { position:fixed; inset:0; background:#fff; padding:16px; }
    .bc-card { break-inside:avoid; border:1px solid #ccc !important; background:#fff !important; }
    .bc-card:not(.print-target) { display:none; }
    .bc-check, .bc-toolbar, .sat-hdr, .sat-breadcrumb, .bc-tabs, .sat-card { display:none !important; }
}

/* ─── ACCESSIONING PAGE ──────────────────────────────────────────────────── */
.acc-batch-hd {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:12px 20px; cursor:pointer; border-bottom:1px solid var(--sat-border);
    background:var(--sat-surface); transition:background .12s;
    user-select:none;
}
.acc-batch-hd:hover { background:var(--sat-surface-2); }
.acc-batch-hd-open { background:var(--sat-primary-light); border-left:3px solid var(--sat-primary); }
.acc-batch-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex:1; }
.acc-batch-date { font-weight:600; font-size:13px; color:var(--sat-text); white-space:nowrap; }
.acc-batch-supplier { font-size:13px; color:var(--sat-text-sub); }
.acc-batch-bill { font-size:12px; color:var(--sat-text-muted); }
.acc-batch-budget { font-size:12px; color:var(--sat-text-muted); font-style:italic; }
.acc-batch-stats { display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex-shrink:0; }
.acc-batch-toggle { font-size:10px; color:var(--sat-text-muted); margin-left:4px; }
.acc-copies-wrap { background:var(--sat-surface-2); border-bottom:1px solid var(--sat-border); }
.acc-copies-table { margin:0; }
.acc-copies-table thead th { background:var(--sat-surface-2); font-size:11px; padding:8px 14px; }
.acc-copies-table tbody td { padding:7px 14px; font-size:12px; }

/* ─── EMPLOYEE COMBOBOX ───────────────────────────────────────────────────── */
.emp-cb { position:relative; width:100%; }
.emp-cb-display {
    display:flex; align-items:center; gap:6px;
    border:1px solid var(--sat-border-input); border-radius:var(--sat-radius-sm);
    background:var(--sat-surface); padding:6px 10px;
    font-size:13px; color:var(--sat-text); cursor:pointer;
    min-height:36px; transition:border-color .15s;
}
.emp-cb-display:hover { border-color:var(--sat-primary); }
.emp-cb-open .emp-cb-display { border-color:var(--sat-primary); }
.emp-cb-placeholder { color:var(--sat-text-muted); }
.emp-cb-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.emp-cb-caret { margin-left:auto; font-size:10px; color:var(--sat-text-muted); flex-shrink:0; }
.emp-cb-clear {
    background:none; border:none; padding:0 2px; cursor:pointer;
    color:var(--sat-text-muted); font-size:12px; line-height:1;
    display:flex; align-items:center; flex-shrink:0;
}
.emp-cb-clear:hover { color:var(--sat-danger); }
.emp-cb-search-wrap {
    display:flex; align-items:center; gap:6px;
    border:1px solid var(--sat-primary); border-radius:var(--sat-radius-sm);
    background:var(--sat-surface); padding:2px 6px 2px 0;
}
.emp-cb-input { border:none !important; box-shadow:none !important; flex:1; padding:5px 8px; }
.emp-cb-input:focus { outline:none; }
.emp-cb-spinner { flex-shrink:0; display:flex; align-items:center; }
.emp-cb-close {
    background:none; border:none; padding:2px 6px; cursor:pointer;
    color:var(--sat-text-muted); font-size:13px; flex-shrink:0;
}
.emp-cb-close:hover { color:var(--sat-danger); }
.emp-cb-dropdown {
    position:absolute; top:100%; left:0; right:0; z-index:200;
    margin-top:2px; max-height:260px; overflow-y:auto;
    border:1px solid var(--sat-border-input); border-radius:var(--sat-radius-sm);
    background:var(--sat-surface); box-shadow:0 4px 16px rgba(0,0,0,.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOST ADMIN PAGE SYSTEM (ps-*)
   All ps-* classes use CSS custom properties so they respond to theme changes.
   Pages must NOT redefine these inline — just use the class names.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Layout ─────────────────────────────────────────────────────────────── */
.ps-page, .ps-page-wrapper { padding:24px; background:var(--sat-bg); min-height:100vh; color:var(--sat-text); }

/* ─── Breadcrumb ─────────────────────────────────────────────────────────── */
.ps-breadcrumb { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--sat-text-muted); margin-bottom:18px; flex-wrap:wrap; }
.ps-breadcrumb a { color:var(--sat-text-muted); text-decoration:none; transition:color .15s; }
.ps-breadcrumb a:hover { color:var(--sat-primary); }
.ps-breadcrumb .sep { color:var(--sat-border-input); }
.ps-breadcrumb .cur, .ps-breadcrumb .active { color:var(--sat-text); font-weight:600; }

/* ─── Page header ────────────────────────────────────────────────────────── */
.ps-hdr, .ps-page-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
.ps-hdr h4, .ps-page-title h4 { margin:0; font-size:20px; font-weight:700; color:var(--sat-text); }
.ps-hdr p, .ps-page-subtitle { margin:4px 0 0; font-size:13px; color:var(--sat-text-muted); }
.ps-section-title { font-size:15px; font-weight:700; color:var(--sat-text); margin:0 0 14px; }

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.ps-card { background:var(--sat-surface); border-radius:var(--sat-radius); box-shadow:var(--sat-shadow); margin-bottom:20px; }
.ps-card-hd, .ps-card-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--sat-border); flex-wrap:wrap; gap:8px; }
.ps-card-hd h5, .ps-card-header h5 { margin:0; font-size:15px; font-weight:700; color:var(--sat-text); }
.ps-card-bd, .ps-card-body { padding:20px; }

/* ─── Filter bar ─────────────────────────────────────────────────────────── */
.ps-filter, .ps-filter-row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.ps-filter > div, .ps-filter-row > div { flex:1; min-width:160px; }
.ps-filter label, .ps-filter-row label { display:block; font-size:12px; font-weight:600; color:var(--sat-text-sub); margin-bottom:5px; }
.ps-filter input, .ps-filter select,
.ps-filter-row input, .ps-filter-row select { width:100%; padding:9px 12px; border:1.5px solid var(--sat-border-input); border-radius:var(--sat-radius-sm); font-size:13px; color:var(--sat-text); background:var(--sat-surface); outline:none; box-sizing:border-box; }
.ps-filter input:focus, .ps-filter select:focus,
.ps-filter-row input:focus, .ps-filter-row select:focus { border-color:var(--sat-primary); }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.ps-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:var(--sat-radius-sm); font-size:13px; font-weight:600; border:none; cursor:pointer; transition:opacity .15s; line-height:1; font-family:inherit; }
.ps-btn:hover:not(:disabled) { opacity:.85; }
.ps-btn:disabled { opacity:.5; cursor:not-allowed; }
.ps-btn-primary { background:var(--sat-primary); color:#fff; }
.ps-btn-outline { background:var(--sat-surface); color:var(--sat-primary); border:1.5px solid var(--sat-primary); }
.ps-btn-light { background:var(--sat-surface-2); color:var(--sat-text-sub); border:1px solid var(--sat-border-input); }
.ps-btn-danger { background:var(--sat-red); color:#fff; }
.ps-btn-sm { padding:6px 12px; font-size:12px; border-radius:var(--sat-radius-xs); }
.ps-btn-icon { width:32px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--sat-radius-sm); border:none; cursor:pointer; transition:opacity .15s; }
.ps-btn-icon:hover { opacity:.8; }
.ps-btn-icon svg { width:14px; height:14px; }

/* ─── Icon buttons (colored) ─────────────────────────────────────────────── */
.ps-icon-btn { width:32px; height:32px; border-radius:var(--sat-radius-sm); border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:opacity .15s; flex-shrink:0; }
.ps-icon-btn:hover { opacity:.8; }
.ps-icon-btn svg { width:14px; height:14px; }
.ps-icon-btn-edit    { background:var(--sat-orange-bg); color:var(--sat-orange); }
.ps-icon-btn-unlock  { background:var(--sat-green-bg);  color:var(--sat-green); }
.ps-icon-btn-users   { background:var(--sat-primary-light); color:var(--sat-primary); }
.ps-icon-btn-roles   { background:var(--sat-red-bg);    color:var(--sat-red); }
.ps-icon-btn-schools { background:var(--sat-green-bg);  color:var(--sat-green); }
.ps-icon-btn-perms   { background:var(--sat-blue-bg);   color:var(--sat-blue); }

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

/* ─── Avatar ─────────────────────────────────────────────────────────────── */
.ps-avatar { width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff; flex-shrink:0; }
.ps-avatar-lg { width:54px; height:54px; min-width:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:22px; color:#fff; background:linear-gradient(135deg,var(--sat-primary),var(--sat-primary-dark)); }

/* ─── User cell ──────────────────────────────────────────────────────────── */
.ps-user-name { font-weight:600; font-size:13px; color:var(--sat-text); }
.ps-user-sub  { font-size:11px; color:var(--sat-text-muted); margin-top:1px; }
.ps-user-info h5 { margin:0 0 4px; font-size:16px; font-weight:700; color:var(--sat-text); }
.ps-user-info p  { margin:0; font-size:12px; color:var(--sat-text-muted); }
.ps-user-card { display:flex; align-items:center; gap:16px; padding:20px; background:var(--sat-surface); border-radius:var(--sat-radius); box-shadow:var(--sat-shadow); margin-bottom:20px; }

/* ─── Badges ─────────────────────────────────────────────────────────────── */
.ps-badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap; }
.ps-badge-primary { background:var(--sat-primary-light); color:var(--sat-primary); }
.ps-badge-info    { background:var(--sat-primary-light); color:var(--sat-primary); }
.ps-badge-success { background:var(--sat-green-bg);     color:var(--sat-green); }
.ps-badge-green   { background:var(--sat-green-bg);     color:var(--sat-green); }
.ps-badge-danger  { background:var(--sat-red-bg);       color:var(--sat-red); }
.ps-badge-red     { background:var(--sat-red-bg);       color:var(--sat-red); }
.ps-badge-warning { background:var(--sat-amber-bg);     color:var(--sat-amber); }
.ps-badge-amber   { background:var(--sat-amber-bg);     color:var(--sat-amber); }
.ps-badge-blue    { background:var(--sat-blue-bg);      color:var(--sat-blue); }
.ps-badge-neutral, .ps-badge-gray { background:var(--sat-border); color:var(--sat-text-muted); }
.ps-badge-role    { background:var(--sat-border); color:var(--sat-text-muted); margin:2px; }
.ps-email-confirmed { display:inline-block; font-size:10px; font-weight:600; padding:2px 7px; border-radius:10px; }

/* ─── Pagination ─────────────────────────────────────────────────────────── */
.ps-pagination { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-top:1px solid var(--sat-border); flex-wrap:wrap; gap:8px; }
.ps-pagination span, .ps-pagination-info { font-size:13px; color:var(--sat-text-muted); }
.ps-pagination-btns { display:flex; gap:4px; }
.ps-page-btn { min-width:34px; height:34px; border:1.5px solid var(--sat-border-input); background:var(--sat-surface); color:var(--sat-text-sub); border-radius:var(--sat-radius-sm); cursor:pointer; font-size:13px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; font-family:inherit; }
.ps-page-btn.active { background:var(--sat-primary); color:#fff; border-color:var(--sat-primary); }
.ps-page-btn:disabled { opacity:.4; cursor:default; }

/* ─── Dashboard stats ────────────────────────────────────────────────────── */
.ps-stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-bottom:24px; }
.ps-stat-card { background:var(--sat-surface); border-radius:var(--sat-radius); box-shadow:var(--sat-shadow); padding:20px 22px; display:flex; align-items:center; gap:16px; transition:transform .15s,box-shadow .15s; }
.ps-stat-card:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,0,0,.10); }
.ps-stat-icon { width:52px; height:52px; min-width:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.ps-stat-value { font-size:28px; font-weight:800; line-height:1; color:var(--sat-text); }
.ps-stat-label { font-size:12px; color:var(--sat-text-muted); margin-top:4px; font-weight:500; }

/* ─── Quick-action cards ─────────────────────────────────────────────────── */
.ps-quick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-bottom:24px; }
.ps-qa-card { background:var(--sat-surface); border-radius:var(--sat-radius); box-shadow:var(--sat-shadow); padding:20px 16px; display:flex; flex-direction:column; align-items:center; gap:12px; cursor:pointer; border:1.5px solid transparent; transition:all .15s; text-decoration:none; }
.ps-qa-card:hover { border-color:var(--sat-primary); background:var(--sat-primary-light); transform:translateY(-2px); box-shadow:0 8px 24px rgba(var(--sat-primary-rgb),.12); }
.ps-qa-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.ps-qa-label { font-size:13px; font-weight:600; color:var(--sat-text); text-align:center; }

/* ─── States ─────────────────────────────────────────────────────────────── */
.ps-loading { text-align:center; padding:48px; color:var(--sat-text-muted); }
.ps-empty { padding:60px 20px; text-align:center; color:var(--sat-text-muted); }
.ps-empty svg { opacity:.3; margin-bottom:12px; }
.ps-spinner { display:flex; justify-content:center; align-items:center; padding:60px; }
.ps-spinner-ring { width:40px; height:40px; border:3px solid var(--sat-border); border-top-color:var(--sat-primary); border-radius:50%; animation:ps-spin .8s linear infinite; }
@keyframes ps-spin { to { transform:rotate(360deg); } }

/* ─── Alerts ─────────────────────────────────────────────────────────────── */
.ps-alert { padding:10px 16px; border-radius:var(--sat-radius-sm); font-size:13px; font-weight:500; margin-bottom:14px; }
.ps-alert-err,   .ps-alert-error   { background:var(--sat-red-bg);   color:var(--sat-red);   border:1px solid var(--sat-red-border); }
.ps-alert-ok,    .ps-alert-success  { background:var(--sat-green-bg); color:var(--sat-green); border:1px solid var(--sat-green-border); }

/* ─── Modal ──────────────────────────────────────────────────────────────── */
.ps-overlay, .ps-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000; display:flex; align-items:center; justify-content:center; padding:16px; }
.ps-modal { background:var(--sat-surface); border-radius:var(--sat-radius-lg); padding:28px; width:100%; max-width:520px; max-height:90vh; overflow-y:auto; box-shadow:var(--sat-shadow-modal); }
.ps-modal h5, .ps-modal-title h5 { margin:0 0 20px; font-size:17px; font-weight:700; color:var(--sat-text); }
.ps-modal-title { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.ps-modal-footer { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; padding-top:16px; border-top:1px solid var(--sat-border); }

/* ─── Form groups ────────────────────────────────────────────────────────── */
.ps-form-group { margin-bottom:16px; }
.ps-form-group label { display:block; font-size:12px; font-weight:600; color:var(--sat-text-sub); margin-bottom:6px; }
.ps-form-group input, .ps-form-group select, .ps-form-group textarea { width:100%; padding:9px 12px; border:1.5px solid var(--sat-border-input); border-radius:var(--sat-radius-sm); font-size:13px; color:var(--sat-text); background:var(--sat-surface); outline:none; box-sizing:border-box; font-family:inherit; }
.ps-form-group input:focus, .ps-form-group select:focus { border-color:var(--sat-primary); }
.ps-form-group input[readonly] { background:var(--sat-surface-2); color:var(--sat-text-muted); }
.ps-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.ps-row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ps-checkbox, .ps-checkbox-row { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--sat-text-sub); cursor:pointer; margin-bottom:10px; }
.ps-checkbox input, .ps-checkbox-row input[type=checkbox] { width:16px; height:16px; accent-color:var(--sat-primary); cursor:pointer; }

/* ─── Roles grid ─────────────────────────────────────────────────────────── */
.ps-roles-grid { display:flex; flex-wrap:wrap; gap:8px; padding:12px; background:var(--sat-surface-2); border-radius:var(--sat-radius-sm); border:1px solid var(--sat-border-input); }

/* ─── Permissions tree ───────────────────────────────────────────────────── */
.ps-perm-section { margin-bottom:12px; border:1.5px solid var(--sat-border-input); border-radius:var(--sat-radius-sm); overflow:hidden; }
.ps-perm-header { display:flex; align-items:center; justify-content:space-between; padding:9px 14px; background:var(--sat-surface-2); cursor:pointer; user-select:none; border-bottom:1px solid var(--sat-border); }
.ps-perm-header span { font-size:12px; font-weight:700; color:var(--sat-text-sub); text-transform:uppercase; letter-spacing:.4px; }
.ps-perm-header small { font-size:10px; color:var(--sat-text-muted); }
.ps-perm-header-left { display:flex; align-items:center; gap:10px; }
.ps-perm-header-left span { font-size:13px; font-weight:700; color:var(--sat-text); text-transform:none; letter-spacing:0; }
.ps-perm-count { font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px; background:var(--sat-primary-light); color:var(--sat-primary); }
.ps-perm-toggle-btn { font-size:11px; font-weight:600; padding:4px 10px; border-radius:6px; border:1px solid var(--sat-border-input); background:var(--sat-surface); color:var(--sat-primary); cursor:pointer; }
.ps-perm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:2px; padding:10px 14px; background:var(--sat-surface); }
.ps-perm-item { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; cursor:pointer; transition:background .1s; }
.ps-perm-item:hover { background:var(--sat-surface-2); }
.ps-perm-item input[type=checkbox] { width:14px; height:14px; cursor:pointer; accent-color:var(--sat-primary); flex-shrink:0; }
.ps-perm-item label { font-size:12px; color:var(--sat-text-sub); cursor:pointer; line-height:1.4; }
.ps-perm-item.granted label { color:var(--sat-text); font-weight:600; }

/* ─── User permissions page ──────────────────────────────────────────────── */
.ps-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ps-search-perms { padding:8px 12px; border:1.5px solid var(--sat-border-input); border-radius:var(--sat-radius-sm); font-size:13px; background:var(--sat-surface); color:var(--sat-text); width:240px; outline:none; }
.ps-search-perms:focus { border-color:var(--sat-primary); }
.ps-sticky-bar { position:sticky; bottom:0; background:var(--sat-surface); border-top:1px solid var(--sat-border); padding:14px 20px; display:flex; justify-content:space-between; align-items:center; z-index:10; box-shadow:0 -4px 16px rgba(0,0,0,.06); flex-wrap:wrap; gap:8px; }
.ps-stat-chip { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--sat-primary); background:var(--sat-primary-light); padding:4px 10px; border-radius:20px; }

/* ─── Banners ────────────────────────────────────────────────────────────── */
.ps-banner-info, .ps-tenant-context { display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--sat-primary-light); border:1px solid rgba(var(--sat-primary-rgb),.3); border-radius:var(--sat-radius-sm); margin-bottom:16px; font-size:13px; color:var(--sat-primary-dark); font-weight:600; }