/* SBU theme: the one place colours, type and shared components are defined.
   Colours are RGB triplets so Tailwind utilities (bg-surface, text-muted, …) can apply opacity. */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/vendor/inter/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/vendor/inter/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --bg: 244 246 249;
  --surface: 255 255 255;
  --sunken: 238 241 245;
  --line: 222 227 234;
  --fg: 17 24 39;
  --muted: 92 102 119;
  --accent: 29 78 216;
  --accent-fg: 255 255 255;
  --danger: 200 30 30;
  --success: 21 128 61;
  --warn: 180 83 9;
  --radius: 10px;
  --shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 1px 3px rgb(15 23 42 / 0.08);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: 13 17 23;
  --surface: 22 27 34;
  --sunken: 30 36 45;
  --line: 48 56 68;
  --fg: 230 237 243;
  --muted: 150 160 175;
  --accent: 96 145 255;
  --accent-fg: 10 14 22;
  --danger: 248 113 113;
  --success: 74 222 128;
  --warn: 251 191 36;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4);
}

/* Accent presets (Appearance page). Each has a light and a dark value. */
:root[data-accent='teal'] { --accent: 15 118 110; }
:root[data-accent='violet'] { --accent: 109 40 217; }
:root[data-accent='rose'] { --accent: 190 18 60; }
:root[data-accent='amber'] { --accent: 180 83 9; }
:root[data-theme='dark'][data-accent='teal'] { --accent: 45 212 191; }
:root[data-theme='dark'][data-accent='violet'] { --accent: 167 139 250; }
:root[data-theme='dark'][data-accent='rose'] { --accent: 251 113 133; }
:root[data-theme='dark'][data-accent='amber'] { --accent: 251 191 36; }

html { -webkit-text-size-adjust: 100%; }
body {
  background: rgb(var(--bg));
  color: rgb(var(--fg));
  font-family: 'Inter Variable', system-ui, sans-serif;
  font-feature-settings: 'cv11';
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.5rem; padding: 0 1rem; border-radius: var(--radius);
  border: 1px solid rgb(var(--line)); background: rgb(var(--surface)); color: rgb(var(--fg));
  font-weight: 600; font-size: .875rem; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, opacity .15s;
  user-select: none;
}
.btn:hover:not(:disabled) { background: rgb(var(--sunken)); }
.btn:focus-visible, .input:focus-visible, .tab:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: rgb(var(--accent)); border-color: rgb(var(--accent)); color: rgb(var(--accent-fg)); }
.btn-primary:hover:not(:disabled) { background: rgb(var(--accent) / .9); }
.btn-danger { color: rgb(var(--danger)); }
.btn-danger:hover:not(:disabled) { background: rgb(var(--danger) / .08); }
.btn-sm { min-height: 2rem; padding: 0 .75rem; font-size: .8125rem; }
.btn-icon { width: 2.5rem; padding: 0; }
.btn-block { width: 100%; }

/* ---- Cards & layout ---- */
.card { background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: calc(var(--radius) + 2px); box-shadow: var(--shadow); }
.card-pad { padding: 1rem; }
@media (min-width: 640px) { .card-pad { padding: 1.25rem; } }
.section-title { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--muted)); }

/* ---- Form controls ---- */
.label { display: block; font-size: .8125rem; font-weight: 600; margin-bottom: .375rem; color: rgb(var(--fg)); }
.label .req { color: rgb(var(--danger)); margin-left: .125rem; }
.input {
  display: block; width: 100%; min-height: 2.75rem; padding: .5rem .75rem;
  border: 1px solid rgb(var(--line)); border-radius: var(--radius);
  background: rgb(var(--surface)); color: rgb(var(--fg));
  font-size: 1rem; /* 16px stops iOS zooming into focused fields */
}
@media (min-width: 1024px) { .input { min-height: 2.5rem; font-size: .9375rem; } }
.input:disabled, .input[readonly] { background: rgb(var(--sunken)); color: rgb(var(--muted)); }
.input:disabled { cursor: not-allowed; }
.input.invalid { border-color: rgb(var(--danger)); }
textarea.input { min-height: 5rem; resize: vertical; }
.check { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; cursor: pointer; }
.check input { width: 1.125rem; height: 1.125rem; accent-color: rgb(var(--accent)); }
.hint { font-size: .8125rem; color: rgb(var(--muted)); }

/* A switched-off form section: visibly dimmed, inputs disabled (never merely hidden). */
.section-off { opacity: .55; }
.section-off .section-body { pointer-events: none; filter: grayscale(.4); }

/* ---- Notes & badges ---- */
.note { display: flex; gap: .625rem; align-items: flex-start; padding: .75rem .875rem; border-radius: var(--radius); font-size: .875rem; border: 1px solid; }
.note-info { background: rgb(var(--accent) / .07); border-color: rgb(var(--accent) / .25); }
.note-warn { background: rgb(var(--warn) / .08); border-color: rgb(var(--warn) / .3); }
.note-danger { background: rgb(var(--danger) / .07); border-color: rgb(var(--danger) / .3); color: rgb(var(--danger)); }
.badge { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: rgb(var(--sunken)); color: rgb(var(--muted)); white-space: nowrap; }
.badge-on { background: rgb(var(--success) / .12); color: rgb(var(--success)); }
.badge-off { background: rgb(var(--danger) / .1); color: rgb(var(--danger)); }
.badge-accent { background: rgb(var(--accent) / .12); color: rgb(var(--accent)); }

/* ---- Tabs ---- */
.tabs { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgb(var(--line)); }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: .625rem .875rem; font-size: .875rem; font-weight: 600; color: rgb(var(--muted)); border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer; background: none; }
.tab[aria-selected='true'] { color: rgb(var(--accent)); border-bottom-color: rgb(var(--accent)); }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th { position: sticky; top: 0; background: rgb(var(--sunken)); text-align: left; font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: rgb(var(--muted)); padding: .625rem .75rem; white-space: nowrap; }
.table td { padding: .5rem .75rem; border-top: 1px solid rgb(var(--line)); vertical-align: middle; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody tr:hover { background: rgb(var(--sunken) / .6); }
.table tr.row-sub td { font-weight: 600; background: rgb(var(--sunken) / .5); }
.table tr.row-total td { font-weight: 700; background: rgb(var(--accent) / .07); }

/* ---- KPI tiles ---- */
.kpi { padding: 1rem; }
.kpi-label { font-size: .75rem; font-weight: 600; color: rgb(var(--muted)); text-transform: uppercase; letter-spacing: .04em; }
.kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: .8125rem; color: rgb(var(--muted)); margin-top: .125rem; }

/* ---- App shell: collapsible sidebar on desktop, slide-in drawer on phones ---- */
.shell { min-height: 100dvh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: 15rem;
  background: rgb(var(--surface)); border-right: 1px solid rgb(var(--line));
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .2s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
.sidebar.open { transform: none; }
.scrim { position: fixed; inset: 0; z-index: 30; background: rgb(0 0 0 / .4); }
.nav-link { display: flex; align-items: center; gap: .75rem; padding: .625rem .875rem; margin: .125rem .5rem; border-radius: var(--radius); font-size: .9rem; font-weight: 500; color: rgb(var(--muted)); }
.nav-link i { width: 1.25rem; text-align: center; }
.nav-link:hover { background: rgb(var(--sunken)); color: rgb(var(--fg)); }
.nav-link[aria-current='page'] { background: rgb(var(--accent) / .1); color: rgb(var(--accent)); font-weight: 600; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; padding: 0 1rem; padding-top: env(safe-area-inset-top); background: rgb(var(--surface) / .92); backdrop-filter: blur(8px); border-bottom: 1px solid rgb(var(--line)); }
.content { padding: 1rem; max-width: 90rem; margin: 0 auto; }
@media (min-width: 640px) { .content { padding: 1.5rem; } }

@media (min-width: 1024px) {
  .sidebar { transform: none; transition: width .2s ease; }
  .scrim { display: none; }
  .main { margin-left: 15rem; transition: margin-left .2s ease; }
  .collapsed .sidebar { width: 4.25rem; }
  .collapsed .main { margin-left: 4.25rem; }
  .collapsed .nav-text { display: none; }
  .collapsed .nav-link { justify-content: center; }
}

/* ---- Toasts & dialogs ---- */
.toasts { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(1rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: .5rem; width: min(26rem, calc(100vw - 2rem)); }
.toast { padding: .75rem 1rem; border-radius: var(--radius); background: rgb(var(--fg)); color: rgb(var(--bg)); font-size: .875rem; font-weight: 500; box-shadow: 0 8px 24px rgb(0 0 0 / .2); animation: toast-in .2s ease-out; }
.toast-error { background: rgb(var(--danger)); color: #fff; }
.toast-success { background: rgb(var(--success)); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
dialog.modal { border: 1px solid rgb(var(--line)); border-radius: calc(var(--radius) + 4px); padding: 0; width: min(36rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); background: rgb(var(--surface)); color: rgb(var(--fg)); box-shadow: 0 20px 50px rgb(0 0 0 / .3); }
dialog.modal::backdrop { background: rgb(0 0 0 / .45); }

/* ---- QR scanner ---- */
.scanner { position: relative; overflow: hidden; border-radius: var(--radius); background: #000; aspect-ratio: 1 / 1; max-height: 60dvh; margin: 0 auto; }
.scanner video { width: 100%; height: 100%; object-fit: cover; }
.scanner .frame { position: absolute; inset: 15%; border: 3px solid rgb(255 255 255 / .85); border-radius: 12px; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .35); }

/* ---- Charts ---- */
.chart-box { position: relative; height: 16rem; }
@media (min-width: 640px) { .chart-box { height: 18rem; } }
.chart-box.tall { height: 22rem; }
.empty { display: flex; align-items: center; justify-content: center; min-height: 6rem; color: rgb(var(--muted)); font-size: .875rem; text-align: center; padding: 1rem; }

/* ---- Printing (QR cards) ---- */
.qr-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .75rem; }
.qr-card { border: 1px dashed rgb(var(--line)); border-radius: 8px; padding: .75rem; text-align: center; break-inside: avoid; background: #fff; color: #111; }
.qr-card svg { width: 100%; height: auto; max-width: 9rem; margin: 0 auto; }
@media print {
  .no-print, .sidebar, .topbar, .scrim, .toasts { display: none !important; }
  .main { margin: 0 !important; }
  .content { padding: 0; max-width: none; }
  body { background: #fff; }
  .qr-sheet { grid-template-columns: repeat(4, 1fr); gap: 4mm; }
  .qr-card { border-color: #999; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}