/* TPG Training - night-shift theme on top of Basecoat (shadcn/ui tokens). */
:root, .dark {
  --background: #0f1419; --foreground: #dde4ec;
  --card: #1a212b; --card-foreground: #dde4ec;
  --popover: #1a212b; --popover-foreground: #dde4ec;
  --primary: #2f6fd1; --primary-foreground: #ffffff;
  --secondary: #243040; --secondary-foreground: #e3e9f0;
  --muted: #202935; --muted-foreground: #9aa7b7;
  --accent: #26324a; --accent-foreground: #ffffff;
  --destructive: #ef5b5b;
  --border: #2a3542; --input: #3a4756; --ring: #3a6fc2;
  --radius: .65rem;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-heading: var(--font-sans);
  --ok: #4ade80; --okbg: #14321f; --warn: #fbbf24; --warnbg: #3a2d0b; --err: #f87171; --errbg: #3b1717; --blue: #93c5fd; --bluebg: #1b2a44;
  --navy: #06090d; --line: var(--border); --ink: var(--foreground);
  color-scheme: dark;
}
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--background); color: var(--foreground); font-size: 15px; line-height: 1.45; }
a { color: #8db4f0; text-decoration: none; } a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 4px 0 12px; font-weight: 700; letter-spacing: -.01em; }
h1 .badge, h2 .badge { vertical-align: middle; }
.hidden { display: none !important; }
.muted { color: var(--muted-foreground); } .small { font-size: 13px; } .tiny { font-size: 12px; }
.right { text-align: right; } .center { text-align: center; } .nowrap { white-space: nowrap; } .num { text-align: right; font-variant-numeric: tabular-nums; }
.break { word-break: break-all; }

/* ---- header / navigation --------------------------------------------------------------- */
header.top { background: var(--navy); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40; }
header.top .topbar { display: flex; align-items: center; gap: 10px; padding: 7px 14px; max-width: 1240px; margin: 0 auto; }
header.top .brand { font-weight: 800; letter-spacing: .3px; color: #fff; white-space: nowrap; font-size: 16px; }
header.top .brand span { color: #c2ccd8; font-weight: 600; }
header.top nav.nav-desktop { display: flex; gap: 2px; flex-wrap: wrap; margin-left: auto; align-items: center; }
header.top nav a, header.top .navbtn { color: #e3e9f0; padding: 6px 10px; border-radius: 7px; font-size: 14px; font-weight: 600; background: transparent; border: 0; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; line-height: 1.3; }
header.top nav a:hover, header.top .navbtn:hover { background: #16202c; color: #fff; text-decoration: none; }
header.top nav a.active, header.top .navbtn.active { background: #2a5aa6; color: #fff; }
header.top .caret { font-size: 11px; opacity: .8; }
header.top .count { display: inline-block; background: #dc2626; color: #fff; border-radius: 999px; font-size: 11px; padding: 0 6px; margin-left: 5px; vertical-align: middle; }
header.top .user-menu { margin-left: 6px; }
header.top .user-menu .avatar { width: 26px; height: 26px; border-radius: 50%; background: #2a5aa6; color: #fff; display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; }
header.top .user-menu .uname { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-mobile-links { display: none; }
.menu-form-btn { all: unset; display: block; width: 100%; box-sizing: border-box; cursor: pointer; }
[role=menu] a[role=menuitem] { text-decoration: none; color: inherit; }
[role=menu] form { margin: 0; }
@media (max-width: 860px) {
  header.top nav.nav-desktop { display: none; }
  header.top .user-menu { margin-left: auto; }
  header.top .user-menu .uname { display: none; }
  .nav-mobile-links { display: block; }
}

/* ---- page structure ---------------------------------------------------------------------- */
main { max-width: 1240px; margin: 0 auto; padding: 16px 16px 60px; }
.page-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.page-head h1 { margin: 0; }
.grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.grid > * { min-width: 0; }
@media (min-width: 900px) { .grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.main-side { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); } }
.card { margin-bottom: 14px; min-width: 0; max-width: 100%; }
.card > section { min-width: 0; }
.card > header .card-action { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.card > header h2 { font-size: 16px; }
.card > header + section { padding-top: 0; }
.card h3 { margin: 14px 0 6px; font-size: 12px; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions.between { justify-content: space-between; }
.actions form { margin: 0; display: contents; }
.subnav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.alert { margin-bottom: 12px; }
.alert[data-variant=success] { border-color: #1f4d2f; color: var(--ok); }

/* ---- forms ------------------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 12px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid .two { grid-column: span 2; }
.field > p { margin: 0; font-size: 12px; color: var(--muted-foreground); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--foreground); cursor: pointer; margin: 0; }
.check input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primary); margin: 0; }
input[type=number].short { max-width: 110px; }
input[type=date], input[type=time] { color-scheme: dark; }
.inline-form { display: inline; }
.field-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.btn.block { width: 100%; }
.btn[data-size=lg] { font-size: 16px; padding: 12px 18px; height: auto; }

/* ---- badges / pills ---------------------------------------------------------------------- */
.pill { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.5; background: #2a3542; color: #c3ccd8; }
.pill.ok { background: var(--okbg); color: var(--ok); } .pill.warn { background: var(--warnbg); color: var(--warn); } .pill.err { background: var(--errbg); color: var(--err); } .pill.blue { background: var(--bluebg); color: var(--blue); } .pill.grey { background: #2a3542; color: #c3ccd8; }

/* ---- tables ------------------------------------------------------------------------------ */
.table-container { border: 1px solid var(--border); border-radius: var(--radius); max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.table { font-size: 14px; }
table.table th { font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted-foreground); background: var(--muted); }
table.table td, table.table th { padding: 7px 9px; vertical-align: top; }
table.table tr:hover td { background: #1f2834; }
table.table td.num, table.table th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.compact td, table.compact th { padding: 4px 6px; }
table.compact input, table.compact select { height: 34px; padding: 4px 8px; }
table.plain { width: 100%; border-collapse: collapse; font-size: 13px; }
table.plain td { padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.scroll-y { max-height: 340px; overflow: auto; }

/* ---- rosters, chips, meters -------------------------------------------------------------- */
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.roster label.pick { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--muted); color: var(--foreground); font-size: 15px; cursor: pointer; margin: 0; min-height: 44px; }
.roster label.pick input { width: 20px; height: 20px; accent-color: var(--primary); margin: 0; flex: none; }
.roster label.pick:has(input:checked) { background: #17294a; border-color: var(--primary); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 8px 13px; border-radius: 999px; border: 1px solid var(--input); background: var(--muted); cursor: pointer; font-size: 14px; color: var(--foreground); font-family: inherit; line-height: 1.2; min-height: 38px; display: inline-flex; align-items: center; gap: 6px; }
.chip:has(input:checked), .chip.on { background: var(--primary); color: #fff; border-color: #3a6fc2; }
.chip input { display: none; }
.bar-wrap { background: #2a3542; border-radius: 4px; height: 8px; overflow: hidden; min-width: 60px; }
.bar { height: 100%; background: #3a6fc2; } .bar.ok { background: #22c55e; } .bar.short { background: #ef4444; }
.stat { display: inline-block; min-width: 92px; padding: 8px 12px; border-radius: 9px; background: var(--muted); border: 1px solid var(--border); margin: 0 6px 6px 0; }
.stat b { display: block; font-size: 20px; } .stat span { font-size: 12px; color: var(--muted-foreground); }
.block { display: inline-block; padding: 3px 7px; border-radius: 6px; font-size: 12px; margin: 2px; border: 1px solid var(--border); }
.block.met { background: var(--okbg); color: var(--ok); } .block.short { background: var(--errbg); color: var(--err); } .block.in_progress { background: var(--bluebg); color: var(--blue); } .block.upcoming, .block.exempt, .block.not_required { background: #1f2834; color: var(--muted-foreground); }
.att-row input[type=number] { max-width: 84px; }
.sub-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---- dashboard ------------------------------------------------------------------------ */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; color: var(--foreground); display: block; }
.kpi b { display: block; font-size: 26px; line-height: 1.1; } .kpi span { font-size: 12px; color: var(--muted-foreground); }
.kpi.err b { color: var(--err); } .kpi.ok b { color: var(--ok); } .kpi.warn b { color: var(--warn); }
a.kpi:hover { text-decoration: none; border-color: #3f4f63; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.filters input[type=search] { width: 190px; }
.status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.officer { display: block; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--muted); color: var(--foreground); }
.officer:hover { text-decoration: none; border-color: #3f4f63; }
.officer .name { font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.officer .meter { display: grid; grid-template-columns: 56px 1fr 52px; gap: 6px; align-items: center; font-size: 12px; color: var(--muted-foreground); margin-top: 6px; }
.officer .meter b { color: var(--foreground); text-align: right; font-variant-numeric: tabular-nums; }
.officer.attention { border-color: #7a2e2e; } .officer.done { border-color: #1f4d2f; }
.list-row { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.list-row:last-child { border-bottom: 0; }

/* ---- misc ---------------------------------------------------------------------------- */
.login { max-width: 400px; margin: 48px auto; }
.login .brand-big { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
.confirm-box { max-width: 440px; }
.file-drop { border: 1px dashed var(--input); border-radius: 10px; padding: 12px; background: var(--muted); }
.progress-wrap { background: #2a3542; border-radius: 4px; height: 6px; overflow: hidden; margin-top: 6px; }
.progress-wrap > div { height: 100%; background: var(--primary); width: 0; transition: width .2s; }
.qr { background: #fff; padding: 8px; border-radius: 8px; display: inline-block; }
.qr img, .qr svg { width: 180px; height: 180px; display: block; }
code.secret { font-family: ui-monospace, Consolas, monospace; letter-spacing: .08em; background: var(--muted); padding: 4px 8px; border-radius: 6px; user-select: all; }
.toaster { z-index: 60; top: 58px; bottom: auto; }
@media (max-width: 700px) { .toaster { top: 52px; } }
@media (max-width: 700px) { .card > header { grid-template-columns: 1fr; } .card > header .card-action { grid-column: 1; grid-row: auto; justify-self: stretch; } .card > header .card-action input[type=search] { flex: 1 1 160px; } main { padding: 12px 12px 60px; } h1 { font-size: 19px; } table.table td, table.table th { padding: 6px 6px; } .filters input[type=search] { width: 100%; } }
@media print { body { background: #fff; color: #000; } header.top, .actions, .btn, .toaster { display: none !important; } }