/* ==========================================================================
   Dhee SMS — custom styles + print stylesheet
   ========================================================================== */

:root {
  /* Defaults; Theme.apply() overrides these from the institution's theme settings. */
  --brand: #006a4e; --brand-700: #005a42; --brand-ink: #00281d; --brand-50: #edf7f4; --accent: #f42a41; --surface: #f6f8f7; --radius: 10px;
  --b50: 237 247 244; --b100: 217 237 231; --b200: 179 218 207; --b300: 128 181 166; --b400: 77 151 131; --b500: 31 124 98; --b600: 0 106 78; --b700: 0 90 66; --b800: 0 74 55; --b900: 0 58 43; --b950: 0 40 30;
  --font-sans: Inter, 'Hind Siliguri', system-ui, sans-serif; --font-heading: 'Source Serif 4', 'Hind Siliguri', Georgia, serif;
  --cr80-w: 85.6mm;
  --cr80-h: 53.98mm;
}

html { scroll-behavior: smooth; }
body { min-height: 100vh; background: var(--surface) !important; font-family: var(--font-sans); }
.font-heading, .font-serif, h1.font-serif, h2.font-serif { font-family: var(--font-heading); }

/* ---------- Generic UI primitives ---------- */
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: calc(var(--radius) + 2px); box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .9rem; border-radius: var(--radius); font-weight: 600; font-size: .875rem; transition: background .15s, color .15s, box-shadow .15s, transform .05s; cursor: pointer; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-700); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { filter: brightness(.92); }
.btn-ghost { background: transparent; color: #334155; border: 1px solid #e2e8f0; }
.btn-ghost:hover { background: #f1f5f9; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-success { background: #059669; color: #fff; }
.btn-success:hover { background: #047857; }
.btn-sm { padding: .3rem .6rem; font-size: .78rem; border-radius: 8px; }
.input, .select, .textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; padding: .5rem .7rem; font-size: .9rem; background: #fff; color: #0f172a; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid rgb(var(--b200)); border-color: var(--brand); }
.label { display: block; font-size: .75rem; font-weight: 600; color: #475569; margin-bottom: .25rem; text-transform: uppercase; letter-spacing: .03em; }
.badge { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; font-weight: 700; padding: .6rem .75rem; border-bottom: 1px solid #e2e8f0; background: #f8fafc; position: sticky; top: 0; }
.table td { padding: .55rem .75rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.table tr:hover td { background: #f8fafc; }
.kpi { padding: 1rem 1.1rem; }
.kpi .v { font-size: clamp(1.05rem, 1.45vw, 1.6rem); font-weight: 800; color: #0f172a; line-height: 1.15; overflow-wrap: anywhere; }
.kpi .l { font-size: .75rem; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
/* Dashboard sidebar — palette from Theme.sidebar() (default: same as page background) */
.sidebar { background: var(--sb-bg, var(--surface)); color: var(--sb-fg, #334155); border-right: 1px solid var(--sb-border, #e2e8f0); }
.sb-strong { color: var(--sb-strong, #0f172a); }
.sb-muted { color: var(--sb-muted, #64748b); }
.nav-link { position: relative; display: flex; align-items: center; gap: .65rem; width: 100%; text-align: left; padding: .38rem .65rem; border-radius: 8px; color: var(--sb-fg, #334155); font-size: .875rem; font-weight: 500; line-height: 1.45; }
.nav-link > svg, .nav-link > i[data-lucide] { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.nav-link > i[data-lucide] { border: 2px solid currentColor; border-radius: 999px; opacity: .45; transform: scale(.6); }   /* unknown icon name: neutral dot keeps the row aligned */
.nav-link .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-link:hover { background: var(--sb-hover, rgba(15,23,42,.05)); color: var(--sb-strong, #0f172a); }
.nav-link.active { background: var(--sb-active, var(--brand-50)); color: var(--sb-active-fg, var(--brand-700)); font-weight: 600; box-shadow: inset 3px 0 0 var(--sb-bar, var(--brand)); }
.nav-link:disabled { opacity: .45; cursor: not-allowed; background: none; }
.nav-link:focus-visible { outline: 2px solid var(--sb-bar, var(--brand)); outline-offset: -2px; }
.nav-count { margin-left: auto; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 0 .4rem; background: var(--sb-hover, rgba(15,23,42,.06)); }

/* ---------- Dashboard shell (Cloudflare-style): full-height sidebar, slim top bar, icon rail, phone drawer ---------- */
:root { --sbw: 16.5rem; }
html.dash.sb-mini { --sbw: 4.25rem; }
#sb { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sbw); z-index: 45; display: flex; flex-direction: column; transition: width .18s ease, transform .2s ease; }
html.dash #topbar, .dash-main { margin-left: var(--sbw); transition: margin-left .18s ease; }
.dash-main { max-width: 100%; }
.sb-head { position: relative; display: flex; align-items: center; gap: .25rem; padding: .6rem .6rem .4rem; }
.sb-ws { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; padding: .4rem .45rem; border-radius: 10px; color: var(--sb-fg, #334155); }
.sb-ws:hover, .sb-ws[aria-expanded="true"] { background: var(--sb-hover, rgba(15,23,42,.05)); }
.sb-ws > :first-child { flex-shrink: 0; }
.sb-ws-menu { position: absolute; left: .6rem; top: calc(100% - .1rem); width: 17.5rem; max-width: calc(100vw - 1.5rem); max-height: 70vh; overflow-y: auto; padding: .4rem; z-index: 60; box-shadow: 0 18px 40px -12px rgba(15,23,42,.35); color: #0f172a; }
.sb-mh { padding: .45rem .6rem .2rem; font-weight: 700; color: #64748b; }
.sb-mi { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; padding: .4rem .6rem; border-radius: 8px; }
.sb-mi:hover, .sb-mi:focus-visible { background: #f1f5f9; }
.sb-mi.on { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.sb-minfo { margin-top: .35rem; padding: .5rem .6rem .3rem; border-top: 1px solid #e2e8f0; color: #64748b; line-height: 1.5; }
.sb-tools { display: flex; flex-direction: column; gap: .3rem; padding: .1rem .6rem .5rem; border-bottom: 1px solid var(--sb-border, #e2e8f0); }
.sb-search { position: relative; display: flex; align-items: center; }
.sb-search .sb-search-ic { position: absolute; left: .6rem; width: 1rem; height: 1rem; color: var(--sb-muted, #64748b); pointer-events: none; }
.sb-search input { width: 100%; padding: .38rem 2rem .38rem 2.05rem; border-radius: 8px; border: 1px solid var(--sb-border, #e2e8f0); background: var(--sb-input, #fff); color: var(--sb-strong, #0f172a); font-size: 1rem; }
.sb-search input::placeholder { color: var(--sb-muted, #64748b); opacity: 1; }
.sb-search input:focus { outline: 2px solid var(--sb-bar, var(--brand)); outline-offset: 0; border-color: transparent; }
.sb-search input::-webkit-search-cancel-button { display: none; }
.sb-kbd { position: absolute; right: .45rem; padding: 0 .35rem; border: 1px solid var(--sb-border, #e2e8f0); border-radius: 5px; color: var(--sb-muted, #64748b); font-size: 1rem; line-height: 1.3; font-family: inherit; pointer-events: none; }
.sb-search input:focus + .sb-kbd, .sb-search input:not(:placeholder-shown) + .sb-kbd { display: none; }
.sb-nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .35rem .6rem 1rem; display: flex; flex-direction: column; gap: .1rem; }
.sb-nav.searching .nav-group-b { display: flex !important; }
.sb-nav.searching .nav-group-h .nav-chev { visibility: hidden; }
.sb-nav .nomatch { display: none !important; }
.nav-link.kb { background: var(--sb-hover, rgba(15,23,42,.05)); outline: 2px solid var(--sb-bar, var(--brand)); outline-offset: -2px; }
mark.sb-hit { background: var(--sb-hit, #fde68a); color: inherit; border-radius: 3px; padding: 0 1px; }
.sb-empty { padding: 1rem .65rem; color: var(--sb-muted, #64748b); text-align: center; }
.sb-foot { padding: .45rem .6rem .6rem; border-top: 1px solid var(--sb-border, #e2e8f0); }
.sb-collapse .sb-ic-close, .sb-collapse .sb-ic-open { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.sb-collapse .sb-ic-open, .sb-collapse .sb-l-open { display: none; }
/* back (left) and the icon-only collapse control (right) on one row */
.sb-row1 { display: flex; align-items: center; gap: .35rem; }
.sb-row1 .sb-back { flex: 1; min-width: 0; }
.sb-collapse-ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 8px; color: var(--sb-muted, #64748b); }
.sb-collapse-ic:hover { background: var(--sb-hover, rgba(15,23,42,.05)); color: inherit; }
.sb-collapse-ic:focus-visible { outline: 2px solid var(--sb-bar, var(--brand)); outline-offset: 1px; }
#sb .sb-x, .sb-overlay, #sb .sb-search-mini { display: none; }
.tb-icon { display: inline-flex; align-items: center; justify-content: center; padding: .45rem; border-radius: 8px; color: #475569; }
.tb-icon:hover { background: #f1f5f9; }
.tb-crumbs { min-width: 0; }
.tb-crumbs ol { display: flex; align-items: center; gap: .1rem; min-width: 0; }
.tb-crumbs li { align-items: center; gap: .1rem; min-width: 0; }
.tb-crumb { color: #475569; font-weight: 500; white-space: nowrap; padding: .15rem .3rem; border-radius: 6px; }
.tb-crumb:hover { color: var(--brand-700); background: #f1f5f9; }
.tb-crumb-mid { color: #64748b; white-space: nowrap; padding: 0 .3rem; }
.tb-crumb-cur { color: #0f172a; font-weight: 700; padding: 0 .3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tb-sep { color: #94a3b8; padding: 0 .1rem; }
#sb-tip { position: fixed; z-index: 96; transform: translateY(-50%); background: #0f172a; color: #fff; padding: .3rem .65rem; border-radius: 7px; font-size: 1rem; white-space: nowrap; pointer-events: none; box-shadow: 0 8px 20px -6px rgba(15,23,42,.4); }
#sb-tip.hidden { display: none; }
/* Icon rail (desktop / tablet only) */
@media (min-width: 769px) {
  html.sb-mini #sb .nav-label, html.sb-mini #sb .sb-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  html.sb-mini #sb .nav-count, html.sb-mini #sb .sb-search, html.sb-mini #sb .nav-group-h { display: none; }
  html.sb-mini #sb .nav-group-b { display: flex !important; }
  html.sb-mini #sb .nav-group + .nav-group { border-top: 1px solid var(--sb-border, #e2e8f0); margin-top: .35rem; padding-top: .35rem; }
  html.sb-mini #sb .nav-link { justify-content: center; padding: .5rem 0; }
  html.sb-mini #sb .sb-ws { justify-content: center; padding: .35rem 0; }
  html.sb-mini #sb .sb-search-mini { display: flex; }
  html.sb-mini #sb .sb-collapse .sb-ic-open, html.sb-mini #sb .sb-collapse .sb-l-open { display: block; }
  html.sb-mini #sb .sb-collapse .sb-ic-close, html.sb-mini #sb .sb-collapse .sb-l-close { display: none; }
  /* rail: both icon-only, stacked (back above, expand below) */
  html.sb-mini #sb .sb-row1 { flex-direction: column; align-items: center; gap: .15rem; }
  html.sb-mini #sb .sb-row1 .sb-back { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; padding: 0; }
}
/* the phone drawer closes with its own ✕; no collapse there */
@media (max-width: 768px) { #sb .sb-collapse-ic { display: none; } }
/* Phones: the sidebar becomes a slide-in drawer opened from the top bar */
@media (max-width: 768px) {
  html.dash #topbar, .dash-main { margin-left: 0; }
  #sb { width: min(18rem, 86vw); transform: translateX(-105%); z-index: 75; box-shadow: none; visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
  html.sb-open #sb { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(15,23,42,.35); transition: transform .2s ease; }
  html.sb-open .sb-overlay { display: block; position: fixed; inset: 0; z-index: 74; background: rgba(15,23,42,.45); }
  html.sb-open body { overflow: hidden; }
  #sb .sb-x { display: inline-flex; color: var(--sb-fg, #334155); }
  #sb .sb-x:hover { background: var(--sb-hover, rgba(15,23,42,.05)); }
  .sb-foot { display: none; }
}
@media (min-width: 769px) { #topbar .sb-menu-btn { display: none; } }
/* Government-style public chrome */
.gov-strip { background: var(--brand-ink); color: #e8f3ef; border-bottom: 3px solid var(--accent); }
.gov-nav { background: var(--brand); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.gov-link { display: block; padding: .7rem .62rem; color: #fff; font-size: .84rem; white-space: nowrap; font-weight: 600; border-bottom: 3px solid transparent; }
.gov-link:hover { background: rgba(255,255,255,.1); }
.gov-link.active { background: rgba(0,0,0,.15); border-bottom-color: var(--accent); }
#gov-nav.flex, #gov-nav:not(.hidden) { display: flex; }
.ticker-bar { background: #fff; border-bottom: 1px solid #e2e8f0; font-size: .875rem; }
.ticker-label { background: var(--accent); color: #fff; font-weight: 700; padding: .45rem .9rem; display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.ticker-track { overflow: hidden; flex: 1; display: flex; align-items: center; }
.ticker-move { display: inline-flex; animation: ticker 45s linear infinite; padding: .45rem 0; color: var(--brand-ink); }
.ticker-track:hover .ticker-move { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.section-title { font-family: var(--font-heading); color: var(--brand-ink); border-left: 5px solid var(--accent); padding-left: .75rem; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: #fff; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.att-btn { width: 2.1rem; height: 2.1rem; border-radius: 8px; font-weight: 700; font-size: .8rem; border: 1px solid #e2e8f0; color: #64748b; background: #fff; }
.att-btn.on-P { background: #059669; color: #fff; border-color: #059669; }
.att-btn.on-A { background: #dc2626; color: #fff; border-color: #dc2626; }
.att-btn.on-L { background: #d97706; color: #fff; border-color: #d97706; }
.att-btn.on-E { background: #6366f1; color: #fff; border-color: #6366f1; }
.grid-input { width: 4rem; text-align: center; padding: .3rem; border: 1px solid #cbd5e1; border-radius: 6px; }
.grid-input.bad { border-color: #dc2626; background: #fef2f2; }
.step-dot { width: 2rem; height: 2rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }
.dropzone { border: 2px dashed #94a3b8; border-radius: 14px; transition: all .15s; }
.dropzone.drag { border-color: var(--brand); background: var(--brand-50); }
.cal-cell { aspect-ratio: 1; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 600; }
.fade-in { animation: fadeIn .18s ease-out; }
/* page content fades in only on real navigation (App.render adds .nav-anim); in-place refreshes never flash */
html:not(.nav-anim) #view .fade-in, #undo-snack .fade-in.shown { animation: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.hero-bg { background-color: var(--brand); background-image: linear-gradient(135deg, rgba(0,0,0,.18), rgba(0,0,0,0) 60%), radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0); background-size: auto, 22px 22px; }
.annot-canvas { touch-action: none; cursor: crosshair; background: #fff; max-width: 100%; height: auto; }
.sig-pad { touch-action: none; cursor: crosshair; background: #fff; border: 1px dashed #94a3b8; border-radius: 10px; }
.seat { width: 4.4rem; height: 3rem; border-radius: 8px; font-size: .62rem; line-height: 1.1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid; }

/* Phone ID card preview */
.id-phone { width: 100%; max-width: 340px; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 40px -12px rgba(21,33,83,.45); }

/* ---------- Print host (screen hidden) ---------- */
#print-root { display: none; }

/* ==========================================================================
   PRINT STYLESHEET
   ========================================================================== */
@page { size: A4 portrait; margin: 0; }

@media print {
  html, body { background: #fff !important; }
  #app, #modal-root, #toast-root { display: none !important; }
  #print-root { display: block !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* A4 sheet (also used for on-screen print previews) */
.sheet { width: 210mm; height: 297mm; position: relative; overflow: hidden; background: #fff; page-break-after: always; break-after: page; box-sizing: border-box; font-family: var(--font-sans, "Noto Serif Bengali", Inter, system-ui, sans-serif); color: #0f172a; }
.sheet:last-child { page-break-after: auto; break-after: auto; }
.sheet.padded { padding: 14mm 14mm; }

/* ---------- CR80 ID cards ---------- */
.cr80 { position: absolute; box-sizing: border-box; overflow: hidden; border-radius: 3.18mm; background: #fff; border: .2mm solid #cbd5e1; font-family: Inter, system-ui, sans-serif; }
.cr80.h { width: var(--cr80-w); height: var(--cr80-h); }
.cr80.v { width: var(--cr80-h); height: var(--cr80-w); }
.cr80 .band { background: var(--brand); color: #fff; }
.cr80 .photo { background: #e2e8f0; border: .4mm solid #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; }
.cr80 .photo img { width: 100%; height: 100%; object-fit: cover; }
.cr80 svg.barcode { display: block; }
/* Crop marks: drawn as absolutely positioned hairlines around each card slot */
.crop { position: absolute; background: #000; }
.crop.hz { height: .15mm; width: 4mm; }
.crop.vt { width: .15mm; height: 4mm; }

/* ---------- Admit cards / marksheet / receipts ---------- */
.admit { border: .5mm solid #152153; border-radius: 3mm; padding: 5mm; box-sizing: border-box; height: 64mm; margin-bottom: 5mm; position: relative; }
.doc-title { font-family: "Source Serif 4", Georgia, serif; }
.ms-table { width: 100%; border-collapse: collapse; font-size: 10pt; }
.ms-table th, .ms-table td { border: .25mm solid #94a3b8; padding: 1.6mm 2mm; text-align: center; }
.ms-table th { background: #eef2ff; }
.ms-table td:first-child, .ms-table th:first-child { text-align: left; }
.watermark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 68pt; font-weight: 800; color: rgba(0,106,78,.05); transform: rotate(-28deg); pointer-events: none; }
.seat-print { border-collapse: collapse; width: 100%; font-size: 8pt; }
.seat-print td { border: .25mm solid #64748b; padding: 1.5mm; text-align: center; height: 12mm; }

/* ---------- Pills (replace scrolling tab strips), breadcrumbs, sidebar groups, student picker ---------- */
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: 999px; font-size: .84rem; font-weight: 600; color: #475569; background: #fff; border: 1px solid #e2e8f0; transition: all .15s; white-space: nowrap; }
.pill:hover { border-color: var(--brand); color: var(--brand-700); }
.pill-on, .pill-on:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.crumb { color: var(--brand-700); font-weight: 600; }
.crumb:hover { text-decoration: underline; }
.crumb-cur { color: #0f172a; font-weight: 700; }
.nav-group { margin-top: .35rem; }
.nav-group-h { display: flex; align-items: center; width: 100%; padding: .45rem .75rem; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sb-muted, #64748b); border-radius: 8px; }
.nav-group-h:hover { color: var(--sb-strong, #0f172a); background: var(--sb-hover, rgba(15,23,42,.05)); }
.md-body h3 { font-weight: 700; font-size: 1.15rem; margin: 1.1rem 0 .4rem; color: var(--brand-ink); }
.md-body p { margin: .6rem 0; line-height: 1.75; }
.md-body ul { list-style: disc; margin: .5rem 0 .5rem 1.4rem; }
.md-body a { color: var(--brand-700); text-decoration: underline; }
.nav-group-h .nav-chev { transition: transform .15s; }
.nav-group-h[aria-expanded="false"] .nav-chev { transform: rotate(-90deg); }
.sp-active { background: var(--brand-50); }
.site-footer-date { font-variant-numeric: tabular-nums; }

/* ---------------- Accessibility & display (js/a11y.js) ---------------- */
.skip-link { position: absolute; left: .75rem; top: -3rem; z-index: 100; background: var(--brand); color: #fff; padding: .5rem .9rem; border-radius: 8px; font-weight: 700; transition: top .15s; }
.skip-link:focus { top: .75rem; }
/* floating round button, bottom-right on every page; toasts sit above it, the undo snackbar (bottom-left) leaves room for it */
.a11y-fab { position: fixed; right: 1rem; bottom: 1rem; z-index: 85; width: 3rem; height: 3rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand, #006a4e); color: #fff; box-shadow: 0 6px 18px rgba(15,23,42,.25); border: 2px solid #fff; transition: transform .15s; }
.a11y-fab:hover { transform: scale(1.06); }
#toast-root { bottom: 4.75rem !important; }
#undo-snack { max-width: min(24rem, calc(100vw - 6rem)) !important; }
@media print { .a11y-fab, #a11y-panel, #undo-snack { display: none !important; } }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.label { text-transform: none; letter-spacing: 0; }
@media (max-width: 640px) { .pill { white-space: normal; max-width: 100%; } .table th, .table td { padding: .5rem .55rem; } }
html[data-links="underline"] a:not(.btn):not(.pill):not(.nav-link) { text-decoration: underline; text-underline-offset: 3px; }
html[data-spacing="wide"] body { letter-spacing: .015em; word-spacing: .12em; }
html[data-spacing="wide"] p, html[data-spacing="wide"] li, html[data-spacing="wide"] td, html[data-spacing="wide"] .card { line-height: 1.95; }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-motion="reduce"] .ticker-track { overflow-x: auto; }
html[data-contrast="high"] body { color: #000; }
html[data-contrast="high"] .text-slate-400, html[data-contrast="high"] .text-slate-500, html[data-contrast="high"] .text-slate-600, html[data-contrast="high"] .label { color: #1e293b !important; }
html[data-contrast="high"] .card, html[data-contrast="high"] .input, html[data-contrast="high"] .select, html[data-contrast="high"] .textarea, html[data-contrast="high"] .btn-ghost, html[data-contrast="high"] .pill { border-color: #334155 !important; }
html[data-contrast="high"] .btn-primary { background: #00382a; }

/* ---------------- Dark mode ---------------- */
html[data-mode="dark"] { color-scheme: dark; }
html[data-mode="dark"] body { background: #0b1220 !important; color: #e2e8f0; }
html[data-mode="dark"] .card, html[data-mode="dark"] .bg-white, html[data-mode="dark"] .ticker-bar { background-color: #111a2b !important; border-color: #233047 !important; }
html[data-mode="dark"] .bg-slate-50, html[data-mode="dark"] .bg-slate-50\/60, html[data-mode="dark"] .bg-slate-50\/50 { background-color: #0f1726 !important; }
html[data-mode="dark"] .bg-slate-100 { background-color: #1b2537 !important; }
html[data-mode="dark"] .bg-slate-200 { background-color: #263247 !important; }
html[data-mode="dark"] .text-slate-900, html[data-mode="dark"] .text-slate-800, html[data-mode="dark"] .text-ink-900, html[data-mode="dark"] .kpi .v, html[data-mode="dark"] .crumb-cur { color: #f1f5f9 !important; }
html[data-mode="dark"] .text-slate-700 { color: #e2e8f0 !important; }
html[data-mode="dark"] .text-slate-600, html[data-mode="dark"] .label, html[data-mode="dark"] .kpi .l { color: #cbd5e1 !important; }
html[data-mode="dark"] .text-slate-500 { color: #9fb0c6 !important; }
html[data-mode="dark"] .text-slate-400 { color: #7d8ca3 !important; }
html[data-mode="dark"] .text-brand-700, html[data-mode="dark"] .text-brand-800, html[data-mode="dark"] .text-brand-900, html[data-mode="dark"] .crumb { color: rgb(var(--b300)) !important; }
html[data-mode="dark"] .section-title { color: #f1f5f9; }
html[data-mode="dark"] .border-slate-100, html[data-mode="dark"] .border-slate-200, html[data-mode="dark"] .border-b, html[data-mode="dark"] .border-t, html[data-mode="dark"] .border-y { border-color: #233047 !important; }
html[data-mode="dark"] .border-slate-300 { border-color: #334155 !important; }
html[data-mode="dark"] .divide-slate-100 > * + *, html[data-mode="dark"] .divide-slate-200 > * + * { border-color: #1e293b !important; }
html[data-mode="dark"] .input, html[data-mode="dark"] .select, html[data-mode="dark"] .textarea { background: #0f1726; color: #e2e8f0; border-color: #334155; }
html[data-mode="dark"] .btn-ghost { color: #e2e8f0; border-color: #334155; }
html[data-mode="dark"] .btn-ghost:hover, html[data-mode="dark"] .hover\:bg-slate-50:hover, html[data-mode="dark"] .hover\:bg-slate-100:hover, html[data-mode="dark"] .hover\:bg-brand-50:hover { background-color: #1b2537 !important; }
html[data-mode="dark"] .bg-brand-50, html[data-mode="dark"] .sp-active { background-color: rgb(var(--b600) / .18) !important; }
html[data-mode="dark"] .pill { background: #111a2b; color: #cbd5e1; border-color: #334155; }
html[data-mode="dark"] .pill-on { background: var(--brand); color: #fff; border-color: var(--brand); }
html[data-mode="dark"] .table th { background: #0f1726; color: #9fb0c6; border-color: #233047; }
html[data-mode="dark"] .table td { border-color: #1e293b; }
html[data-mode="dark"] .table tr:hover td { background: #162033; }
html[data-mode="dark"] .sidebar { background: #0d1524 !important; border-color: #1e293b !important; }
html[data-mode="dark"] .sidebar .nav-link, html[data-mode="dark"] .sidebar .sb-muted, html[data-mode="dark"] .nav-group-h { color: #a7b4c8 !important; }
html[data-mode="dark"] .sidebar .sb-strong { color: #f1f5f9 !important; }
html[data-mode="dark"] .sidebar .nav-link:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
html[data-mode="dark"] .sidebar .nav-link.active { background: rgb(var(--b600) / .25) !important; color: #fff !important; }
html[data-mode="dark"] #sb { --sb-border: #1e293b; --sb-hover: rgba(255,255,255,.06); --sb-bar: rgb(var(--b400)); --sb-hit: rgba(250,204,21,.32); --sb-fg: #a7b4c8; --sb-muted: #8b9ab0; --sb-strong: #f1f5f9; }
html[data-mode="dark"] .sb-search input { background: #0f1726; border-color: #233047; color: #e2e8f0; }
html[data-mode="dark"] .sb-ws-menu { color: #e2e8f0; }
html[data-mode="dark"] .sb-mi:hover, html[data-mode="dark"] .sb-mi:focus-visible, html[data-mode="dark"] .tb-icon:hover, html[data-mode="dark"] .tb-crumb:hover { background: #1b2537; }
html[data-mode="dark"] .sb-mi.on { background: rgb(var(--b600) / .25); color: #fff; }
html[data-mode="dark"] .sb-mh, html[data-mode="dark"] .sb-minfo, html[data-mode="dark"] .tb-crumb-mid { color: #9fb0c6; border-color: #233047; }
html[data-mode="dark"] .tb-crumb, html[data-mode="dark"] .tb-icon { color: #cbd5e1; }
html[data-mode="dark"] .tb-crumb-cur { color: #f1f5f9; }
html[data-mode="dark"] .dropzone { border-color: #475569; }
html[data-mode="dark"] .ticker-move { color: #e2e8f0; }
html[data-mode="dark"] img:not([src*="svg"]) { filter: brightness(.92); }
html[data-mode="dark"] #print-preview .sheet, html[data-mode="dark"] .pw-pages .sheet { filter: none; }
html[data-mode="dark"] [class*="bg-"][class*="-50"]:not(.bg-slate-50):not(.bg-brand-50) { filter: brightness(.82) saturate(.9); }
/* ---------------- Mobile: nothing wider than the screen ---------------- */
.grid > * { min-width: 0; }
.flex-1 { min-width: 0; }
@media (max-width: 767px) {
  #page-host .card { max-width: 100%; }
  #page-host table.table:not(.scroll-x table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #page-host .card > .flex, #page-host .card > div > .flex { flex-wrap: wrap; }
  #page-host .card [class*="flex"][class*="items-end"][class*="gap-"] { flex-wrap: wrap; }
  #page-host .card [class*="h-40"], #page-host .card [class*="h-48"] { overflow-x: auto; }
}
/* ---------------- Homepage section looks (Settings → Homepage builder) ---------------- */
.sec-dark h1, .sec-dark h2, .sec-dark h3, .sec-dark .text-slate-900, .sec-dark .text-slate-800, .sec-dark .text-slate-700, .sec-dark .md-body, .sec-dark .section-title { color: #fff !important; }
.sec-dark .text-slate-600, .sec-dark .text-slate-500, .sec-dark .text-brand-600 { color: rgba(255,255,255,.8) !important; }
.sec-dark .card, .sec-dark .card * { color: #0f172a; }
.sec-dark .card .text-slate-500, .sec-dark .card .text-slate-600 { color: #475569 !important; }
.sec-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.sec-accent { background: color-mix(in srgb, var(--accent) 10%, #fff); }
.sec-compact section { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
.sec-spacious section { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
.sec-compact .min-h-\[16rem\] { min-height: 11rem; } .sec-spacious .min-h-\[16rem\] { min-height: 28rem; }
.sec-center section > h2, .sec-center section > div:first-child, .sec-center .section-title { text-align: center; }
.sec-center section > h2 { border-left: 0; }
[id^="bnH"]::-webkit-scrollbar { display: none; }
html[data-mode="dark"] .sec-accent { background: #1b2537; }
/* ---------------- Public menu: drop-downs and bar colours ---------------- */
.gov-dd > .gov-link { width: 100%; text-align: left; }
.gov-dd-menu { display: none; }
.gov-sub { display: block; padding: .55rem 1rem; font-size: .84rem; color: #0f172a; white-space: nowrap; }
.gov-sub:hover, .gov-sub.active { background: var(--brand-50); color: var(--brand-700); }
@media (min-width: 1280px) {
  .gov-dd-menu { position: absolute; left: 0; top: 100%; min-width: 13rem; background: #fff; border-radius: 0 0 10px 10px; box-shadow: 0 12px 30px rgba(15,23,42,.18); padding: .35rem 0; z-index: 50; }
  .gov-dd:hover > .gov-dd-menu, .gov-dd:focus-within > .gov-dd-menu, .gov-dd.open > .gov-dd-menu { display: block; }
}
@media (max-width: 1279px) {
  .gov-dd.open > .gov-dd-menu { display: block; background: rgba(0,0,0,.12); }
  .gov-dd-menu .gov-sub { color: #fff; padding-left: 1.6rem; }
  #gov-nav { flex-direction: column; }
}
.gov-nav-white { background: #fff; border-bottom: 1px solid #e2e8f0; box-shadow: none; }
.gov-nav-white .gov-link { color: var(--brand-700); }
.gov-nav-white .gov-link:hover { background: var(--brand-50); }
.gov-nav-white .gov-link.active { background: var(--brand-50); }
.gov-nav-dark { background: #0f172a; }
.gov-nav-accent { background: var(--accent); }
@media (max-width: 1279px) { .gov-nav-white .gov-dd-menu .gov-sub { color: var(--brand-700); } }
html[data-mode="dark"] .gov-dd-menu { background: #111a2b; } html[data-mode="dark"] .gov-sub { color: #e2e8f0; }
/* ---------------- Readability: no interface text smaller than 1rem (printed sheets use their own pt sizes) ---------------- */
.btn, .btn-sm, .input, .select, .textarea, .label, .badge, .table, .table th, .kpi .l, .nav-link, .nav-count, .gov-link, .gov-sub,
.ticker-bar, .att-btn, .step-dot, .cal-cell, .pill, .nav-group-h, .crumb, .crumb-cur,
.tb-crumb, .tb-crumb-mid, .tb-crumb-cur, .sb-mi, .sb-mh, .sb-minfo, .sb-empty, .sb-ws { font-size: 1rem; }
.seat { font-size: 1rem; width: 5.6rem; height: 3.6rem; }
.att-btn { width: 2.5rem; height: 2.5rem; }
.badge { padding: .15rem .6rem; }
.nav-group-h { letter-spacing: .02em; }
/* ---------------- Sidebar: calm grouped menu (headers with icon + count, pins, recent, accordion) ---------------- */
.sb-nav .nav-group { margin-top: 0; padding: .2rem 0; }
.sb-nav .nav-group + .nav-group { border-top: 1px solid var(--sb-border, rgba(15,23,42,.07)); }
.sb-nav .nav-group-h { gap: .6rem; min-height: 2.5rem; padding: .35rem .65rem; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--sb-fg, #334155); }
.sb-nav .nav-group-h .nav-gi { width: 1.1rem; height: 1.1rem; flex-shrink: 0; opacity: .75; }
.sb-nav .nav-group-h .nav-gl, .nav-qh .nav-gl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.sb-nav .nav-group.has-active > .nav-group-h { color: var(--sb-strong, #0f172a); }
.nav-gc { font-size: 1rem; line-height: 1.4; min-width: 1.6rem; text-align: center; padding: 0 .4rem; border-radius: 999px; background: var(--sb-hover, rgba(15,23,42,.06)); color: var(--sb-muted, #64748b); font-weight: 600; }
.sb-nav .nav-group-b { padding: .1rem 0 .25rem .55rem; gap: 1px; }
.sb-nav .nav-solo .nav-group-b, .sb-nav .nav-quick .nav-group-b { padding-left: 0; }
.nav-row { position: relative; display: flex; align-items: center; }
.nav-row > .nav-link { min-height: 2.4rem; padding-right: 2.2rem; }
.nav-pin { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 6px; color: var(--sb-muted, #94a3b8); opacity: 0; }
.nav-row:hover .nav-pin, .nav-pin:focus-visible, .nav-pin.on { opacity: 1; }
.nav-pin:hover { background: var(--sb-hover, rgba(15,23,42,.06)); color: var(--sb-strong, #0f172a); }
.nav-pin.on { color: #ca8a04; }
.nav-pin.on svg { fill: currentColor; }
.nav-row:has(.nav-count):hover .nav-pin { opacity: 1; }
.nav-row:has(.nav-count):hover .nav-count { visibility: hidden; }
.nav-qh { display: flex; align-items: center; gap: .6rem; padding: .35rem .65rem; color: var(--sb-muted, #64748b); font-size: 1rem; font-weight: 600; }
.sb-nav.searching .nav-quick { display: none; }
@media (hover: none) { .nav-pin { opacity: .6; } }
@media (min-width: 769px) {
  html.sb-mini #sb .nav-pin, html.sb-mini #sb .nav-qh,html.sb-mini #sb .nav-gc { display: none; }
  html.sb-mini #sb .nav-row > .nav-link { padding-right: 0; }
  html.sb-mini #sb .nav-group-b { padding-left: 0; }
}
/* active page + its group: clearly marked (light, dark, collapsed rail) */
.sb-nav .nav-link.active { background: rgb(var(--b600, 22 163 74) / .14); color: var(--sb-active-fg, var(--brand-700)); font-weight: 700; box-shadow: inset 4px 0 0 var(--sb-bar, var(--brand)); }
.sb-nav .nav-link.active svg { color: var(--sb-bar, var(--brand)); }
.sb-nav .nav-group.has-active > .nav-group-h { background: rgb(var(--b600, 22 163 74) / .08); color: var(--sb-strong, #0f172a); font-weight: 700; }
.sb-nav .nav-group.has-active > .nav-group-h .nav-gi { color: var(--sb-bar, var(--brand)); opacity: 1; }
.sb-nav .nav-group.has-active > .nav-group-h .nav-gc { background: rgb(var(--b600, 22 163 74) / .18); color: var(--sb-strong, #0f172a); }
html[data-mode="dark"] .sb-nav .nav-link.active { background: rgb(var(--b600, 22 163 74) / .35) !important; color: #fff !important; box-shadow: inset 4px 0 0 rgb(var(--b400, 74 222 128)); }
html[data-mode="dark"] .sb-nav .nav-link.active svg, html[data-mode="dark"] .sb-nav .nav-group.has-active > .nav-group-h .nav-gi { color: rgb(var(--b400, 74 222 128)); }
html[data-mode="dark"] .sb-nav .nav-group.has-active > .nav-group-h { background: rgb(var(--b600, 22 163 74) / .18); color: #fff !important; }
@media (min-width: 769px) {
  html.sb-mini #sb .nav-link.active { box-shadow: inset 4px 0 0 var(--sb-bar, var(--brand)); background: rgb(var(--b600, 22 163 74) / .2); }
  html.sb-mini #sb .nav-group.has-active { background: rgb(var(--b600, 22 163 74) / .06); border-radius: 8px; }
}
:is(#app, #modal-root, #toast-root, #a11y-panel, #undo-snack, #undo-menu, .sp-list) :is(.text-xs, .text-sm, [class*="text-[9px]"], [class*="text-[10px]"], [class*="text-[11px]"], [class*="text-[12px]"], [class*="text-[13px]"], [class*="text-[14px]"], [class*="text-[.7"], [class*="text-[.8"], [class*="text-[0.7"], [class*="text-[0.8"]):not(.sheet, .sheet *) { font-size: 1rem !important; line-height: 1.55 !important; }
.sheet .badge, .sheet .table, .sheet .table th { font-size: inherit; }