/* ==========================================================================
   SchoolPilot Design System — fast, accessible (WCAG 2.2 AA), RTL-ready, dark mode
   Tokens → base → layout → components → modules → utilities → print
   ========================================================================== */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jakarta";font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/jakarta.woff2) format("woff2")}
@font-face{font-family:"Nastaliq";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/nastaliq-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Nastaliq";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/nastaliq-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}

:root{
  --brand:#3b5bdb; --accent:#f59f00;
  --brand-700:color-mix(in oklab,var(--brand) 78%,#000); --brand-600:color-mix(in oklab,var(--brand) 90%,#000);
  --brand-100:color-mix(in oklab,var(--brand) 16%,#fff); --brand-50:color-mix(in oklab,var(--brand) 8%,#fff);
  --bg:#f5f7fb; --surface:#fff; --surface-2:#f8fafc; --surface-3:#eef2f7; --border:#e4e8f0; --border-strong:#cfd6e3;
  --text:#0f172a; --text-2:#334155; --muted:#64748b; --faint:#94a3b8;
  --green:#0ca678; --green-bg:#e6fcf5; --red:#e03131; --red-bg:#fff5f5; --amber:#e67700; --amber-bg:#fff9db; --blue:#1c7ed6; --blue-bg:#e7f5ff; --violet:#7048e8; --violet-bg:#f3f0ff; --pink:#d6336c; --pink-bg:#fff0f6; --teal:#0c8599; --teal-bg:#e3fafc; --gray:#495057; --gray-bg:#f1f3f5;
  --input-border:#8a94a8;
  --green-ink:#087f5b; --red-ink:#c92a2a; --amber-ink:#a34a00; --blue-ink:#1864ab; --violet-ink:#5f3dc4; --pink-ink:#a61e4d; --teal-ink:#0b7285; --gray-ink:#343a40;
  --sb-bg:#0c1533; --sb-bg-2:#111c44; --sb-text:#aab4d4; --sb-text-strong:#fff; --sb-hover:rgba(255,255,255,.06); --sb-active:rgba(255,255,255,.1); --sb-border:rgba(255,255,255,.08);
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-xl:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06); --shadow:0 1px 3px rgba(15,23,42,.06),0 6px 16px -8px rgba(15,23,42,.12); --shadow-lg:0 12px 40px -12px rgba(15,23,42,.28);
  --focus:0 0 0 3px color-mix(in oklab,var(--brand) 35%,transparent);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-display:"Jakarta","Inter",system-ui,sans-serif;
  --sidebar-w:264px; --topbar-h:64px; --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#0b1020; --surface:#121a2e; --surface-2:#0f1628; --surface-3:#1a2440; --border:#223052; --border-strong:#2e3f68;
  --text:#e6ebf5; --text-2:#c3cce0; --muted:#8c99b8; --faint:#6b789a;
  --brand-100:color-mix(in oklab,var(--brand) 30%,#0b1020); --brand-50:color-mix(in oklab,var(--brand) 16%,#0b1020);
  --green-bg:rgba(12,166,120,.14); --red-bg:rgba(224,49,49,.15); --amber-bg:rgba(230,119,0,.16); --blue-bg:rgba(28,126,214,.16); --violet-bg:rgba(112,72,232,.18); --pink-bg:rgba(214,51,108,.16); --teal-bg:rgba(12,133,153,.18); --gray-bg:rgba(148,163,184,.12);
  --green:#38d9a9; --red:#ff8787; --amber:#ffc078; --blue:#74c0fc; --violet:#b197fc; --pink:#faa2c1; --teal:#66d9e8; --gray:#ced4da;
  --sb-bg:#080d1c; --sb-bg-2:#0c1328;
  --input-border:#4a5a82;
  --green-ink:#63e6be; --red-ink:#ffa8a8; --amber-ink:#ffd8a8; --blue-ink:#a5d8ff; --violet-ink:#d0bfff; --pink-ink:#fcc2d7; --teal-ink:#99e9f2; --gray-ink:#dee2e6;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6); --shadow-lg:0 16px 48px -12px rgba(0,0,0,.7);
  color-scheme:dark;
}
[dir="rtl"]{--font:"Nastaliq","Inter",system-ui,sans-serif;--font-display:"Nastaliq","Jakarta",system-ui,sans-serif}
[dir="rtl"] body{line-height:1.9}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:14.5px;line-height:1.55;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01";text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;vertical-align:middle}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.25;margin:0 0 .5em;color:var(--text);letter-spacing:-.01em}
h1{font-size:1.6rem;font-weight:750} h2{font-size:1.25rem;font-weight:700} h3{font-size:1.05rem;font-weight:700} h4{font-size:.95rem;font-weight:650}
p{margin:0 0 1em}
hr{border:0;border-top:1px solid var(--border);margin:1.25rem 0}
small,.small{font-size:.85em}
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em}
kbd{background:var(--surface-3);border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;padding:1px 6px;color:var(--text-2)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
::selection{background:var(--brand-100)}
.icon{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:inline-block}
.icon-sm{width:14px;height:14px}.icon-lg{width:22px;height:22px}.icon-xl{width:32px;height:32px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;inset-inline-start:12px;top:-60px;background:var(--brand);color:#fff;padding:10px 14px;border-radius:10px;z-index:1000;transition:top .2s}
.skip-link:focus{top:12px;color:#fff}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ---------------------------------------------------------------- app layout */
.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.sidebar{position:sticky;top:0;height:100vh;height:100dvh;background:linear-gradient(180deg,var(--sb-bg-2),var(--sb-bg));color:var(--sb-text);display:flex;flex-direction:column;z-index:40;border-inline-end:1px solid var(--sb-border)}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:18px 18px 14px;color:#fff;text-decoration:none!important}
.brand-logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--brand),color-mix(in oklab,var(--brand) 55%,var(--accent)));display:grid;place-items:center;color:#fff;font-weight:800;font-family:var(--font-display);box-shadow:0 6px 16px -6px var(--brand);overflow:hidden;flex-shrink:0}
.brand-logo img{width:100%;height:100%;object-fit:cover}
.brand-name{font-family:var(--font-display);font-weight:750;font-size:15px;line-height:1.2;color:#fff}
.brand-sub{font-size:11.5px;color:var(--sb-text);opacity:.8}
.sidebar-search{margin:4px 14px 10px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid var(--sb-border);color:var(--sb-text);border-radius:10px;padding:8px 10px;font-size:13px;cursor:pointer;width:calc(100% - 28px);text-align:start;font-family:inherit}
.sidebar-search:hover{background:rgba(255,255,255,.1)}
.sidebar-search kbd{margin-inline-start:auto;background:transparent;border-color:var(--sb-border);color:var(--sb-text)}
.sidebar-nav{flex:1;overflow-y:auto;padding:4px 10px 16px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.nav-group{margin-top:14px}
.nav-group-title{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;font-weight:700;color:color-mix(in oklab,var(--sb-text) 70%,transparent);padding:0 10px 6px}
.nav-link{display:flex;align-items:center;gap:11px;padding:8.5px 10px;border-radius:9px;color:var(--sb-text);font-weight:520;font-size:13.8px;text-decoration:none!important;width:100%;background:none;border:0;cursor:pointer;font-family:inherit;text-align:start;position:relative;transition:background .15s,color .15s}
.nav-link:hover{background:var(--sb-hover);color:var(--sb-text-strong)}
.nav-link.active{background:var(--sb-active);color:#fff}
.nav-link.active::before{content:"";position:absolute;inset-inline-start:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.nav-link .icon{opacity:.9}
.nav-link .chev{margin-inline-start:auto;transition:transform .2s;opacity:.6}
.nav-item.open>.nav-link .chev{transform:rotate(180deg)}
.nav-sub{display:none;padding:2px 0 4px;margin-inline-start:21px;border-inline-start:1px solid var(--sb-border)}
.nav-item.open>.nav-sub{display:block}
.nav-sub a{display:block;padding:6.5px 12px;margin-inline-start:6px;border-radius:8px;color:var(--sb-text);font-size:13.3px;text-decoration:none!important}
.nav-sub a:hover{color:#fff;background:var(--sb-hover)}
.nav-sub a.active{color:#fff;background:var(--sb-active);font-weight:600}
.nav-badge{margin-inline-start:auto;background:var(--accent);color:#1a1300;font-size:10.5px;font-weight:800;border-radius:999px;padding:1px 7px}
.sidebar-foot{padding:12px 14px;border-top:1px solid var(--sb-border);display:flex;align-items:center;gap:10px}
.sidebar-foot .who{min-width:0;flex:1}
.sidebar-foot .who b{display:block;color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-foot .who span{font-size:11.5px;color:var(--sb-text)}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;height:var(--topbar-h);display:flex;align-items:center;gap:10px;padding:0 24px;background:color-mix(in oklab,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--border)}
.topbar .grow{flex:1}
.topbar-title{font-weight:700;font-family:var(--font-display);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;border:1px solid transparent;background:transparent;color:var(--text-2);cursor:pointer;transition:background .15s,border-color .15s}
.icon-btn:hover{background:var(--surface);border-color:var(--border);text-decoration:none}
.icon-btn .dot{position:absolute;top:7px;inset-inline-end:7px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;border:2px solid var(--bg)}
.topbar-search{display:flex;align-items:center;gap:10px;min-width:280px;max-width:420px;flex:1;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:8px 12px;color:var(--muted);cursor:pointer;font-family:inherit;font-size:14px;text-align:start}
.topbar-search:hover{border-color:var(--border-strong)}
.topbar-search kbd{margin-inline-start:auto}
.menu-toggle{display:none}
.content{padding:24px;flex:1;width:100%;max-width:1480px;margin:0 auto}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.page-head h1{margin:0}
.page-sub{color:var(--muted);margin-top:4px;font-size:14px}
.page-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.breadcrumbs a{color:var(--muted)} .breadcrumbs a:hover{color:var(--brand)}
.breadcrumbs .sep{opacity:.5}
.app-foot{padding:18px 24px;color:var(--faint);font-size:12.5px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.backdrop{display:none}

/* ---------------------------------------------------------------- buttons */
.btn{--b:var(--surface);--c:var(--text);--bd:var(--border);display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--bd);background:var(--b);color:var(--c);font:600 14px/1 var(--font);cursor:pointer;white-space:nowrap;text-decoration:none!important;transition:background .15s,border-color .15s,box-shadow .15s,transform .05s;user-select:none}
.btn:hover{--bd:var(--border-strong);background:color-mix(in oklab,var(--b) 94%,var(--text))}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn.disabled{opacity:.55;pointer-events:none}
.btn-primary{--b:var(--brand);--c:#fff;--bd:transparent;box-shadow:0 4px 14px -6px color-mix(in oklab,var(--brand) 70%,transparent)}
.btn-primary:hover{background:var(--brand-600);--bd:transparent}
.btn-accent{--b:var(--accent);--c:#1d1300;--bd:transparent}
.btn-success{--b:var(--green);--c:#fff;--bd:transparent}
.btn-danger{--b:var(--red);--c:#fff;--bd:transparent}
.btn-danger-soft{--b:var(--red-bg);--c:var(--red);--bd:transparent}
.btn-soft{--b:var(--brand-50);--c:var(--brand);--bd:transparent}
.btn-soft:hover{background:var(--brand-100)}
.btn-ghost{--b:transparent;--bd:transparent;--c:var(--text-2)}
.btn-ghost:hover{background:var(--surface-3)}
.btn-sm{height:32px;padding:0 11px;font-size:13px;border-radius:8px;gap:6px}
.btn-sm .icon{width:15px;height:15px}
.btn-lg{height:48px;padding:0 22px;font-size:15px;border-radius:12px}
.btn-block{width:100%}
.btn-icon{width:40px;padding:0}
.btn-sm.btn-icon{width:32px}
.btn-group{display:inline-flex}
.btn-group .btn{border-radius:0}.btn-group .btn:first-child{border-start-start-radius:10px;border-end-start-radius:10px}.btn-group .btn:last-child{border-start-end-radius:10px;border-end-end-radius:10px}
.inline-form{display:inline}
.link{color:var(--brand);font-weight:550;display:inline-flex;align-items:center;gap:5px}

/* ---------------------------------------------------------------- forms */
.form-grid,.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 18px}
.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}
.field{min-width:0}
.label{display:block;font-weight:600;font-size:13px;color:var(--text-2);margin-bottom:6px}
.req{color:var(--red)}
.input,select.input,textarea.input{display:block;width:100%;min-height:42px;padding:9px 12px;font:inherit;font-size:14.5px;color:var(--text);background:var(--surface);border:1px solid var(--input-border);border-radius:10px;transition:border-color .15s,box-shadow .15s;appearance:none;-webkit-appearance:none}
textarea.input{min-height:96px;resize:vertical;line-height:1.5}
select.input{padding-inline-end:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
[dir="rtl"] select.input{background-position:left 11px center}
select.input[multiple]{background-image:none;padding:6px}
.input:hover{border-color:color-mix(in oklab,var(--border-strong) 60%,var(--text))}
.input:focus{outline:none;border-color:var(--brand);box-shadow:var(--focus)}
.input::placeholder{color:var(--faint)}
.input.is-invalid{border-color:var(--red);box-shadow:0 0 0 3px color-mix(in oklab,var(--red) 18%,transparent)}
.input:disabled,.input[readonly]{background:var(--surface-2);color:var(--muted)}
.input-sm{min-height:34px;padding:5px 10px;font-size:13.5px;border-radius:8px}
.help{font-size:12.5px;color:var(--muted);margin-top:5px}
.field-error{font-size:12.5px;color:var(--red);margin-top:5px;font-weight:550}
.input-group{display:flex;align-items:stretch}
.input-group .input{border-start-start-radius:0;border-end-start-radius:0}
.input-addon{display:flex;align-items:center;padding:0 12px;background:var(--surface-3);border:1px solid var(--border-strong);border-inline-end:0;border-start-start-radius:10px;border-end-start-radius:10px;color:var(--muted);font-weight:600;font-size:13px}
.input-icon{position:relative}
.input-icon .icon{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.input-icon .input{padding-inline-start:38px}
.form-heading{padding-top:6px;border-top:1px dashed var(--border);margin-top:4px}
.form-heading:first-child{border-top:0;padding-top:0;margin-top:0}
.form-heading h3{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:10px 0 0}
.form-heading p{color:var(--muted);font-size:13px;margin:4px 0 0}
.form-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding-top:18px;margin-top:6px;border-top:1px solid var(--border)}
.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:500}
.check input,.radio-pill input{width:18px;height:18px;accent-color:var(--brand)}
.radio-group{display:flex;flex-wrap:wrap;gap:8px}
.radio-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border-strong);border-radius:10px;padding:8px 12px;cursor:pointer;background:var(--surface)}
.radio-pill:has(input:checked){border-color:var(--brand);background:var(--brand-50);color:var(--brand);font-weight:600}
.switch-row{display:flex;gap:12px;align-items:flex-start;cursor:pointer;padding:6px 0}
.switch{position:relative;flex-shrink:0;margin-top:1px}
.switch input[type=checkbox]{position:absolute;opacity:0;width:44px;height:26px;margin:0;cursor:pointer;z-index:1}
.switch-ui{display:block;width:44px;height:26px;border-radius:999px;background:var(--border-strong);transition:background .2s;position:relative}
.switch-ui::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s var(--ease)}
.switch input:checked+.switch-ui{background:var(--brand)}
.switch input:checked+.switch-ui::after{transform:translateX(18px)}
[dir="rtl"] .switch input:checked+.switch-ui::after{transform:translateX(-18px)}
.switch input:focus-visible+.switch-ui{box-shadow:var(--focus)}
.switch-label{display:block;font-weight:600;color:var(--text)}
.switch-row .help{margin-top:2px}
.file-input{display:flex;flex-direction:column;gap:8px}
.file-preview{width:84px;height:84px;object-fit:cover;border-radius:12px;border:1px solid var(--border)}
.select-search{margin-bottom:6px}

/* ---------------------------------------------------------------- cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.card-head h2,.card-head h3{margin:0;font-size:15.5px;display:flex;align-items:center;gap:9px}
.card-head .sub{color:var(--muted);font-size:13px;margin-top:2px}
.card-body{padding:20px}
.card-body.tight{padding:12px}
.card-foot{padding:14px 20px;border-top:1px solid var(--border);background:var(--surface-2);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.card-flush .card-body{padding:0}
:where(:not(.grid,.cards,.stats,.form-grid,.billboard))>.card+.card{margin-top:18px}
.cards{display:grid;gap:18px}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.section-gap{margin-top:18px}
.card-link{display:block;color:inherit;text-decoration:none!important;transition:transform .15s var(--ease),box-shadow .15s,border-color .15s}
.card-link:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border-strong)}

/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.stat{display:flex;gap:14px;align-items:center;padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);color:inherit;text-decoration:none!important;transition:transform .15s var(--ease),box-shadow .15s}
a.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex-shrink:0;background:var(--t-bg);color:var(--t)}
.stat-icon .icon{width:23px;height:23px}
.stat-label{font-size:12.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.stat-value{font-family:var(--font-display);font-size:1.6rem;font-weight:800;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.tone-blue{--t:var(--blue);--t-bg:var(--blue-bg)}.tone-green{--t:var(--green);--t-bg:var(--green-bg)}.tone-amber{--t:var(--amber);--t-bg:var(--amber-bg)}.tone-red{--t:var(--red);--t-bg:var(--red-bg)}.tone-violet{--t:var(--violet);--t-bg:var(--violet-bg)}.tone-pink{--t:var(--pink);--t-bg:var(--pink-bg)}.tone-teal{--t:var(--teal);--t-bg:var(--teal-bg)}.tone-gray{--t:var(--gray);--t-bg:var(--gray-bg)}.tone-brand{--t:var(--brand);--t-bg:var(--brand-50)}
.up{color:var(--green);font-weight:650}.down{color:var(--red);font-weight:650}

/* ---------------------------------------------------------------- tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.table th{position:sticky;top:0;background:var(--surface-2);color:var(--muted);font-weight:650;font-size:12px;text-transform:uppercase;letter-spacing:.05em;text-align:start;padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap;z-index:1}
.table th a{color:inherit;display:inline-flex;align-items:center;gap:4px}
.table td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.table tbody tr{transition:background .12s}
.table tbody tr:hover{background:var(--surface-2)}
.table tbody tr:last-child td{border-bottom:0}
.table .num,.table td.num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.table .actions{text-align:end;white-space:nowrap;width:1%}
.table .check-col{width:42px}
.table-compact td{padding:8px 12px}.table-compact th{padding:8px 12px}
.table tfoot td{font-weight:700;background:var(--surface-2);border-top:1px solid var(--border)}
.cell-main{display:flex;align-items:center;gap:11px;min-width:0}
.cell-main b{font-weight:620;color:var(--text);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell-main>span:not(.avatar):not(.badge):not(.stat-icon):not(.swatch),.cell-main span>span:not(.avatar):not(.badge){font-size:12.5px;color:var(--muted);display:block}
.cell-main>span:not(.avatar):not(.badge):not(.stat-icon){min-width:0}
.thumb{width:40px;height:40px;border-radius:10px;object-fit:cover;border:1px solid var(--border)}
.swatch{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:middle;border:1px solid var(--border)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--border)}
.toolbar .grow{flex:1}
.toolbar .input{min-height:38px;width:auto;max-width:100%}
.toolbar .input-icon .input,.toolbar .search .input{width:100%}
.toolbar .search{min-width:240px;flex:1;max-width:380px}
.bulkbar{display:none;align-items:center;gap:10px;padding:10px 16px;background:var(--brand-50);border-bottom:1px solid var(--border);font-weight:600;color:var(--brand)}
.bulkbar.show{display:flex}

/* ---------------------------------------------------------------- badges, chips, avatars */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:650;line-height:1.4;white-space:nowrap;background:var(--gray-bg);color:var(--gray)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.badge-plain::before{display:none}
.badge{color:var(--gray-ink)}.badge-green{background:var(--green-bg);color:var(--green-ink)}.badge-red{background:var(--red-bg);color:var(--red-ink)}.badge-amber{background:var(--amber-bg);color:var(--amber-ink)}.badge-blue{background:var(--blue-bg);color:var(--blue-ink)}.badge-violet{background:var(--violet-bg);color:var(--violet-ink)}.badge-pink{background:var(--pink-bg);color:var(--pink-ink)}.badge-teal{background:var(--teal-bg);color:var(--teal-ink)}.badge-brand{background:var(--brand-50);color:var(--brand-700)}
[data-theme="dark"] .badge-brand{color:color-mix(in oklab,var(--brand) 55%,#fff)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:13px;font-weight:550;color:var(--text-2);cursor:pointer;text-decoration:none!important}
.chip:hover{border-color:var(--border-strong)}
.chip.active{background:var(--brand);border-color:var(--brand);color:#fff}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.avatar{--h:220;display:inline-grid;place-items:center;border-radius:50%;background:hsl(var(--h) 70% 92%);color:hsl(var(--h) 55% 32%);font-weight:750;flex-shrink:0;object-fit:cover;font-size:13px}
[data-theme="dark"] .avatar{background:hsl(var(--h) 40% 24%);color:hsl(var(--h) 80% 84%)}
.avatar-xs{width:24px;height:24px;font-size:10px}.avatar-sm{width:32px;height:32px;font-size:12px}.avatar-md{width:40px;height:40px}.avatar-lg{width:56px;height:56px;font-size:18px}.avatar-xl{width:88px;height:88px;font-size:28px}
.avatar-stack{display:flex}.avatar-stack .avatar{border:2px solid var(--surface);margin-inline-start:-8px}.avatar-stack .avatar:first-child{margin-inline-start:0}

/* ---------------------------------------------------------------- alerts, toasts */
.alert{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-radius:12px;border:1px solid transparent;margin-bottom:16px;font-size:14px}
.alert .icon{margin-top:1px}
.alert-info{background:var(--blue-bg);color:var(--blue)}.alert-success{background:var(--green-bg);color:var(--green)}.alert-warning{background:var(--amber-bg);color:var(--amber)}.alert-danger,.alert-error{background:var(--red-bg);color:var(--red)}
.alert b{color:inherit}
.toasts{position:fixed;inset-inline-end:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:200;max-width:min(420px,calc(100vw - 32px))}
.toast{display:flex;gap:12px;align-items:flex-start;background:var(--surface);color:var(--text);border:1px solid var(--border);border-inline-start:4px solid var(--brand);border-radius:12px;padding:13px 14px;box-shadow:var(--shadow-lg);animation:toast-in .35s var(--ease)}
.toast.success{border-inline-start-color:var(--green)}.toast.error{border-inline-start-color:var(--red)}.toast.warning{border-inline-start-color:var(--amber)}
.toast .icon{margin-top:1px}
.toast.success .icon{color:var(--green)}.toast.error .icon{color:var(--red)}.toast.warning .icon{color:var(--amber)}.toast.info .icon{color:var(--brand)}
.toast-msg{flex:1;font-weight:550;font-size:14px}
.toast button{background:none;border:0;color:var(--muted);cursor:pointer;padding:0}
.toast.hide{animation:toast-out .25s var(--ease) forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px)}}

/* ---------------------------------------------------------------- dropdowns, modals, drawers, palette */
.dropdown{position:relative;display:inline-block}
.dropdown-menu{position:absolute;inset-inline-end:0;top:calc(100% + 6px);min-width:220px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;z-index:60;display:none;animation:pop .15s var(--ease)}
.dropdown.open>.dropdown-menu{display:block}
.dropdown-menu.left{inset-inline-end:auto;inset-inline-start:0}
.dropdown-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:8px;color:var(--text-2);font-size:14px;font-weight:520;background:none;border:0;cursor:pointer;text-align:start;text-decoration:none!important;font-family:inherit}
.dropdown-item:hover{background:var(--surface-3);color:var(--text)}
.dropdown-item.danger{color:var(--red)}
.dropdown-sep{height:1px;background:var(--border);margin:6px 4px}
.dropdown-head{padding:10px 11px 8px;font-size:12px;color:var(--muted)}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.modal{position:fixed;inset:0;z-index:150;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(10,15,30,.55);backdrop-filter:blur(3px)}
.modal.open{display:flex;animation:fade .15s}
.modal-dialog{width:100%;max-width:560px;max-height:calc(100dvh - 32px);overflow:auto;background:var(--surface);border-radius:18px;box-shadow:var(--shadow-lg);animation:pop .2s var(--ease)}
.modal-dialog.lg{max-width:860px}.modal-dialog.sm{max-width:420px}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--border)}
.modal-head h3{margin:0}
.modal-body{padding:22px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid var(--border);background:var(--surface-2)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.palette{align-items:flex-start;padding-top:10vh}
.palette .modal-dialog{max-width:640px;overflow:hidden}
.palette-input{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border)}
.palette-input input{flex:1;border:0;background:transparent;font:inherit;font-size:17px;color:var(--text);outline:none}
.palette-results{max-height:56vh;overflow:auto;padding:8px}
.palette-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--text);text-decoration:none!important;cursor:pointer}
.palette-item .pi-icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--surface-3);color:var(--text-2)}
.palette-item b{display:block;font-weight:600}
.palette-item span{font-size:12.5px;color:var(--muted)}
.palette-item .type{margin-inline-start:auto;font-size:11.5px;color:var(--faint)}
.palette-item.sel,.palette-item:hover{background:var(--brand-50)}
.palette-item.sel .pi-icon{background:var(--brand);color:#fff}
.palette-empty{padding:28px;text-align:center;color:var(--muted)}
.palette-foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--border);font-size:12px;color:var(--muted);background:var(--surface-2)}

/* ---------------------------------------------------------------- tabs, lists, misc */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;margin-bottom:18px}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;color:var(--muted);font-weight:600;font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;text-decoration:none!important;background:none;border-top:0;border-inline:0;cursor:pointer;font-family:inherit}
.tab:hover{color:var(--text)}
.tab.active{color:var(--brand);border-bottom-color:var(--brand)}
.tab .count{background:var(--surface-3);color:var(--muted);border-radius:999px;padding:0 7px;font-size:11.5px}
.tab-panel{display:none}.tab-panel.active{display:block}
.segmented{display:inline-flex;background:var(--surface-3);border-radius:10px;padding:3px;gap:2px}
.segmented a,.segmented button{padding:6px 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none!important;border:0;background:none;cursor:pointer;font-family:inherit}
.segmented .active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.list{list-style:none;margin:0;padding:0}
.list-item{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border)}
.list-item:last-child{border-bottom:0}
.list-item .grow{flex:1;min-width:0}
.list-item b{font-weight:620;display:block}
.list-item .meta{font-size:12.5px;color:var(--muted)}
.dl{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:0;margin:0}
.dl dt{color:var(--muted);font-size:13px;font-weight:600;padding:10px 0;border-bottom:1px solid var(--border)}
.dl dd{margin:0;padding:10px 0;border-bottom:1px solid var(--border);font-weight:520;min-width:0;overflow-wrap:anywhere}
.dl dt:last-of-type,.dl dd:last-of-type{border-bottom:0}
.progress{height:8px;background:var(--surface-3);border-radius:999px;overflow:hidden}
.progress>span{display:block;height:100%;background:var(--brand);border-radius:999px;transition:width .6s var(--ease)}
.progress.green>span{background:var(--green)}.progress.amber>span{background:var(--amber)}.progress.red>span{background:var(--red)}
.empty-state{text-align:center;padding:48px 20px;color:var(--muted)}
.empty-icon{width:64px;height:64px;border-radius:20px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;margin:0 auto 14px}
.empty-icon .icon{width:28px;height:28px}
.empty-state h3{color:var(--text);margin-bottom:6px}
.empty-state p{max-width:420px;margin:0 auto 16px}
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline li{position:relative;padding:0 0 18px 30px}
[dir="rtl"] .timeline li{padding:0 30px 18px 0}
.timeline li::before{content:"";position:absolute;inset-inline-start:7px;top:18px;bottom:0;width:2px;background:var(--border)}
.timeline li:last-child::before{display:none}
.timeline .t-dot{position:absolute;inset-inline-start:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--surface);border:3px solid var(--brand)}
.timeline .t-time{font-size:12px;color:var(--muted)}
.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--border);flex-wrap:wrap;font-size:13px;color:var(--muted)}
.pages{display:flex;gap:4px;flex-wrap:wrap}
.pages a,.pages span{min-width:34px;height:34px;display:inline-grid;place-items:center;padding:0 8px;border-radius:9px;border:1px solid var(--border);color:var(--text-2);font-weight:600;text-decoration:none!important;background:var(--surface)}
.pages a:hover{border-color:var(--border-strong)}
.pages .cur{background:var(--brand);border-color:var(--brand);color:#fff}
.pages .gap{border:0;background:none}
.text-muted{color:var(--muted)!important}.text-faint{color:var(--faint)}.text-green{color:var(--green)}.text-red{color:var(--red)}.text-amber{color:var(--amber)}.text-brand{color:var(--brand)}
.text-end{text-align:end}.text-center{text-align:center}.nowrap{white-space:nowrap}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fw-600{font-weight:600}.fw-700{font-weight:700}.fs-sm{font-size:13px}.fs-xs{font-size:12px}.fs-lg{font-size:17px}.mono{font-family:ui-monospace,Menlo,Consolas,monospace}.tabular{font-variant-numeric:tabular-nums}
.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.flex-wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}.shrink-0{flex-shrink:0}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}
.mt-0{margin-top:0}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mb-0{margin-bottom:0}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.p-0{padding:0!important}.p-3{padding:12px}.p-4{padding:16px}
.w-100{width:100%}.hidden{display:none!important}
.divider{height:1px;background:var(--border);margin:14px 0}
.dot-sep::before{content:"·";margin:0 6px;color:var(--faint)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--border)}
.kv:last-child{border-bottom:0}
.kv span{color:var(--muted)}
.mini-bars{display:flex;align-items:flex-end;gap:4px;height:48px}
.mini-bars span{flex:1;background:var(--brand-100);border-radius:4px 4px 0 0;min-height:3px}
.mini-bars span.hi{background:var(--brand)}
.chart-box{position:relative;height:280px}
.chart-box.sm{height:200px}.chart-box.lg{height:340px}
.welcome{position:relative;overflow:hidden;border-radius:var(--radius-xl);padding:26px 28px;color:#fff;background:radial-gradient(1200px 400px at 100% -20%,color-mix(in oklab,var(--accent) 55%,transparent),transparent 60%),linear-gradient(120deg,var(--brand-700),var(--brand));box-shadow:0 20px 40px -24px var(--brand)}
.welcome h1{color:#fff;margin-bottom:6px;font-size:1.5rem}
.welcome p{opacity:.88;margin:0}
.welcome .btn{--b:rgba(255,255,255,.14);--c:#fff;--bd:rgba(255,255,255,.22)}
.welcome .btn:hover{background:rgba(255,255,255,.22)}
.welcome-art{position:absolute;inset-inline-end:-30px;bottom:-40px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08)}
.welcome-art::after{content:"";position:absolute;inset:40px;border-radius:50%;background:rgba(255,255,255,.07)}
.quick-actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.qa{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 10px;border-radius:14px;background:var(--surface);border:1px solid var(--border);color:var(--text-2);font-weight:600;font-size:13px;text-align:center;text-decoration:none!important;transition:transform .15s var(--ease),box-shadow .15s,border-color .15s}
.qa:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border-strong);color:var(--text)}
.qa .qa-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--t-bg,var(--brand-50));color:var(--t,var(--brand))}
.profile-hero{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.profile-hero h1{margin:0}
.profile-meta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--muted);font-size:13.5px;margin-top:6px}
.profile-meta span{display:inline-flex;align-items:center;gap:6px}

/* ---------------------------------------------------------------- attendance / timetable / grids */
.att-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.att-card{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);transition:border-color .15s,background .15s}
.att-card .grow b{display:block;font-size:14px}
.att-card .grow span{font-size:12px;color:var(--muted)}
.att-toggle{display:flex;gap:4px}
.att-toggle label{position:relative}
.att-toggle input{position:absolute;opacity:0;inset:0;cursor:pointer}
.att-toggle span{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--border);font-weight:750;font-size:13px;color:var(--muted);cursor:pointer;transition:all .12s}
.att-toggle input:focus-visible+span{box-shadow:var(--focus)}
.att-toggle input[value=present]:checked+span{background:var(--green);border-color:var(--green);color:#fff}
.att-toggle input[value=absent]:checked+span{background:var(--red);border-color:var(--red);color:#fff}
.att-toggle input[value=late]:checked+span{background:var(--amber);border-color:var(--amber);color:#fff}
.att-toggle input[value=leave]:checked+span{background:var(--blue);border-color:var(--blue);color:#fff}
.att-toggle input[value=half_day]:checked+span{background:var(--violet);border-color:var(--violet);color:#fff}
.att-card:has(input[value=absent]:checked){border-color:color-mix(in oklab,var(--red) 45%,var(--border));background:var(--red-bg)}
.att-card:has(input[value=late]:checked){border-color:color-mix(in oklab,var(--amber) 45%,var(--border))}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-head{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;text-align:center;padding:4px 0}
.cal-day{min-height:92px;border:1px solid var(--border);border-radius:10px;padding:6px 7px;background:var(--surface);font-size:12px;overflow:hidden}
.cal-day.muted{background:var(--surface-2);color:var(--faint)}
.cal-day.today{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.cal-day .d{font-weight:750;font-size:12.5px;margin-bottom:4px}
.cal-ev{display:block;padding:2px 6px;border-radius:6px;margin-top:3px;font-size:11.5px;font-weight:600;background:var(--brand-50);color:var(--brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none!important}
.tt-grid{display:grid;gap:6px;min-width:760px}
.tt-cell{border:1px solid var(--border);border-radius:10px;padding:8px 10px;min-height:66px;background:var(--surface);font-size:12.5px}
.tt-cell.head{background:var(--surface-2);font-weight:700;color:var(--muted);min-height:auto;text-align:center}
.tt-cell .s{font-weight:700;font-size:13px;display:block}
.tt-cell .t{color:var(--muted)}
.tt-cell.break{background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 8px,var(--surface-3) 8px,var(--surface-3) 16px);display:grid;place-items:center;color:var(--muted);font-weight:700}
.marks-input{width:84px;text-align:center;min-height:36px;padding:5px 8px}

/* ---------------------------------------------------------------- billboard / kiosk */
.billboard{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.bb-tile{border-radius:20px;padding:20px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.bb-tile h3{display:flex;align-items:center;gap:8px;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:12px}
.bb-hero{color:#fff;background:linear-gradient(135deg,var(--brand-700),var(--brand) 60%,color-mix(in oklab,var(--brand) 60%,var(--accent)));border:0}
.bb-hero h3{color:rgba(255,255,255,.8)}
.bb-post{padding:12px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);margin-bottom:10px}
.bb-post.pinned{border-color:color-mix(in oklab,var(--accent) 60%,var(--border));background:color-mix(in oklab,var(--accent) 8%,var(--surface))}
.kiosk{min-height:100vh;background:radial-gradient(900px 500px at 0% 0%,color-mix(in oklab,var(--brand) 35%,transparent),transparent 70%),radial-gradient(900px 500px at 100% 100%,color-mix(in oklab,var(--accent) 25%,transparent),transparent 70%),#070b18;color:#fff;padding:28px;font-size:18px}
.kiosk .bb-tile{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#fff}
.kiosk .bb-tile h3{color:rgba(255,255,255,.7)}
.kiosk .bb-post{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.kiosk .text-muted{color:rgba(255,255,255,.65)!important}
.kiosk-clock{font-family:var(--font-display);font-size:64px;font-weight:800;letter-spacing:-.03em;line-height:1}
.slide{display:none;animation:fade .6s}.slide.active{display:block}
.ticker{overflow:hidden;white-space:nowrap;border-radius:14px;background:rgba(255,255,255,.08);padding:12px 0}
.ticker span{display:inline-block;padding-inline-start:100%;animation:ticker 40s linear infinite}
@keyframes ticker{to{transform:translateX(-100%)}}
[dir="rtl"] .ticker span{animation-name:ticker-rtl}
@keyframes ticker-rtl{to{transform:translateX(100%)}}

/* ---------------------------------------------------------------- auth pages */
.auth{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1.05fr 1fr;background:var(--surface)}
.auth-art{position:relative;overflow:hidden;background:radial-gradient(800px 500px at 10% 10%,color-mix(in oklab,var(--accent) 45%,transparent),transparent 60%),radial-gradient(700px 600px at 90% 90%,color-mix(in oklab,var(--brand) 70%,#000),transparent 70%),linear-gradient(135deg,var(--brand-700),var(--brand));color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.auth-art h2{color:#fff;font-size:2.1rem;line-height:1.15;max-width:520px;font-weight:800}
.auth-art p{opacity:.85;max-width:480px;font-size:15.5px}
.auth-feats{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px;margin-top:22px}
.auth-feat{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px;font-weight:600;font-size:13.5px}
.auth-feat .icon{color:#ffe08a}
.auth-panel{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.auth-card{width:100%;max-width:420px}
.auth-card h1{font-size:1.75rem;margin-bottom:6px}
.auth-card .sub{color:var(--muted);margin-bottom:26px}
.auth-card .field{margin-bottom:16px}
.demo-logins{margin-top:26px;padding-top:20px;border-top:1px solid var(--border)}
.demo-logins h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.demo-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:12px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font:600 12.5px var(--font);color:var(--text-2);transition:all .15s}
.demo-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-50)}
.demo-btn .icon{width:20px;height:20px}
.pw-wrap{position:relative}
.pw-wrap .input{padding-inline-end:44px}
.pw-toggle{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:8px}
.setup-card{max-width:760px}

/* ---------------------------------------------------------------- mobile bottom nav */
.bottom-nav{display:none}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1200px){.cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1024px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;inset-block:0;inset-inline-start:0;width:min(86vw,var(--sidebar-w));transform:translateX(-100%);transition:transform .25s var(--ease)}
  [dir="rtl"] .sidebar{transform:translateX(100%)}
  body.nav-open .sidebar{transform:none;box-shadow:var(--shadow-lg)}
  body.nav-open .backdrop{display:block;position:fixed;inset:0;background:rgba(8,12,28,.5);z-index:35}
  .menu-toggle{display:inline-grid}
  .topbar-search{min-width:0;max-width:none}
  .cards-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .auth{grid-template-columns:1fr}.auth-art{display:none}
}
@media (max-width:760px){
  body{font-size:15px}
  .content{padding:16px 14px 90px}
  .topbar{padding:0 12px;gap:6px}
  .topbar-search span,.topbar-search kbd{display:none}
  .topbar-search{flex:0 0 40px;width:40px;height:40px;padding:0;justify-content:center;border-radius:11px;min-width:40px}
  .hide-sm{display:none!important}
  .form-grid>.field,.grid>*{grid-column:span 12!important}
  .cards-2,.cards-3,.cards-4{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat{padding:14px;gap:10px;flex-direction:column;align-items:flex-start}
  .stat-icon{width:40px;height:40px;border-radius:12px}
  .stat-value{font-size:1.35rem}
  .page-head{align-items:flex-start;margin-bottom:14px}
  .page-head>.grow{flex-basis:100%}
  .page-actions{width:100%}
  .toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .toolbar .search,.toolbar .input-icon,.toolbar .grow{grid-column:1/-1}
  .toolbar .input{width:100%;min-width:0}
  .table-stack,.table-stack tbody{display:block}
  .table-stack td.actions,.table-stack td.check-col{width:auto}
  .page-head h1{font-size:1.35rem}
  .card-body{padding:16px}.card-head{padding:14px 16px}
  .toolbar .search{min-width:0;max-width:none;width:100%}
  .dl{grid-template-columns:1fr}.dl dt{border-bottom:0;padding-bottom:0}
  /* stacked table rows */
  .table-stack thead{display:none}
  .table-stack tr{display:block;border-bottom:1px solid var(--border);padding:10px 14px}
  .table-stack td{display:flex;justify-content:space-between;gap:12px;border:0;padding:5px 0;text-align:end}
  .table-stack td::before{content:attr(data-label);font-size:12px;font-weight:650;color:var(--muted);text-align:start;text-transform:uppercase;letter-spacing:.04em}
  .table-stack td.check-col,.table-stack td.actions{justify-content:flex-end}
  .table-stack td.check-col::before,.table-stack td.actions::before,.table-stack td.no-label::before{display:none}
  .table-stack td.cell-first{justify-content:flex-start;text-align:start}
  .table-stack td.cell-first::before{display:none}
  .bottom-nav{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:45;background:color-mix(in oklab,var(--surface) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--border);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:12px;color:var(--muted);font-size:11px;font-weight:650;text-decoration:none!important}
  .bottom-nav a .icon{width:22px;height:22px}
  .bottom-nav a.active{color:var(--brand);background:var(--brand-50)}
  .toasts{bottom:84px;inset-inline:16px}
  .modal{padding:0;align-items:flex-end}
  .modal-dialog{border-radius:20px 20px 0 0;max-height:92dvh}
  .palette{padding-top:0;align-items:flex-start}
  .palette .modal-dialog{border-radius:0 0 20px 20px}
  .att-grid{grid-template-columns:1fr}
  .demo-grid{grid-template-columns:repeat(3,1fr)}
  .welcome{padding:22px 20px}
  .kiosk{padding:16px;font-size:16px}.kiosk-clock{font-size:44px}
  .billboard>*{grid-column:span 12!important}
}

/* ---------------------------------------------------------------- print (report cards, challans, receipts, ID cards) */
.print-only{display:none}
@media print{
  @page{margin:10mm}
  body{background:#fff;color:#000;font-size:12px}
  .sidebar,.topbar,.bottom-nav,.page-actions,.toolbar,.pagination,.no-print,.toasts,.app-foot,.btn{display:none!important}
  .app{display:block}.content{padding:0;max-width:none}
  .card{border:1px solid #ccc;box-shadow:none}
  .no-break,.stat,.bb-tile{break-inside:avoid}
  :root{--text:#000;--surface:#fff;--bg:#fff;--muted:#444;--border:#ccc}
  .print-only{display:block}
  a{color:#000;text-decoration:none}
  .page-break{break-after:page}
}
.h-100{height:100%}.d-block{display:block}.d-none{display:none}
.card.h-100{display:flex;flex-direction:column}.card.h-100>.card-body{flex:1}
.btn.loading{position:relative;color:transparent!important}
.btn.loading::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-color:#fff #fff transparent transparent;animation:spin .7s linear infinite}
.btn:not(.btn-primary):not(.btn-danger):not(.btn-success).loading::after{border-color:var(--text) var(--text) transparent transparent}
@keyframes spin{to{transform:rotate(360deg)}}
[hidden]{display:none!important}

/* shared additions */
:root{--bottom-nav-h:0px}
@media (max-width:760px){:root{--bottom-nav-h:68px}.sticky-bottom{bottom:var(--bottom-nav-h)!important}}
.wrap{flex-wrap:wrap}