/* Light / dark theme for the staff app (Oct 2026). Generated from the colors the dark UI was built with:
   every page color is a variable here; dark values are the original look, light values are tuned for
   contrast on white. Toggle: account menu (top right) -> Light mode / Dark mode; saved per device. */
:root{color-scheme:dark;
  --c-f5a524-18:rgba(245,165,36,0.18);
  --c-ff8a7d-60:rgba(255,138,125,0.6);
  --c-000000-40:rgba(0,0,0,0.4);
  --c-000000-45:rgba(0,0,0,0.45);
  --c-000000-50:rgba(0,0,0,0.5);
  --c-000000-55:rgba(0,0,0,0.55);
  --c-0e1a12:#0e1a12;
  --c-123524:#123524;
  --c-131211:#131211;
  --c-171614:#171614;
  --c-171615:#171615;
  --c-1b1a18:#1b1a18;
  --c-1f1d1b:#1f1d1b;
  --c-201f1d:#201f1d;
  --c-232120:#232120;
  --c-24221f:#24221f;
  --c-262422:#262422;
  --c-2a2723:#2a2723;
  --c-2a2825:#2a2825;
  --c-2c2a27:#2c2a27;
  --c-2ed47a:#2ed47a;
  --c-2ed47a-10:rgba(46,212,122,0.1);
  --c-2ed47a-14:rgba(46,212,122,0.14);
  --c-2ed47a-16:rgba(46,212,122,0.16);
  --c-2ed47a-20:rgba(46,212,122,0.2);
  --c-2ed47a-22:rgba(46,212,122,0.22);
  --c-2ed47a-30:rgba(46,212,122,0.3);
  --c-2ed47a-35:rgba(46,212,122,0.35);
  --c-2ed47a-40:rgba(46,212,122,0.4);
  --c-2ed47a-45:rgba(46,212,122,0.45);
  --c-2ed47a-5:rgba(46,212,122,0.05);
  --c-2ed47a-50:rgba(46,212,122,0.5);
  --c-2ed47a-9:rgba(46,212,122,0.09);
  --c-3a2f16:#3a2f16;
  --c-6b6862:#6b6862;
  --c-7cc4ff:#7cc4ff;
  --c-8fb4ff:#8fb4ff;
  --c-8fb4ff-13:rgba(143,180,255,0.13);
  --c-8fb4ff-14:rgba(143,180,255,0.14);
  --c-8fb4ff-16:rgba(143,180,255,0.16);
  --c-8fb4ff-30:rgba(143,180,255,0.3);
  --c-8fb4ff-42:rgba(143,180,255,0.42);
  --c-8fb4ff-45:rgba(143,180,255,0.45);
  --c-8fb4ff-8:rgba(143,180,255,0.08);
  --c-9fd0ff:#9fd0ff;
  --c-c98c1b:#c98c1b;
  --c-e2493b:#e2493b;
  --c-e2493b-11:rgba(226,73,59,0.11);
  --c-e2493b-14:rgba(226,73,59,0.14);
  --c-e2493b-16:rgba(226,73,59,0.16);
  --c-e2493b-42:rgba(226,73,59,0.42);
  --c-e2493b-45:rgba(226,73,59,0.45);
  --c-e2493b-50:rgba(226,73,59,0.5);
  --c-f2f0ec:#f2f0ec;
  --c-f2f0ec-25:rgba(242,240,236,0.25);
  --c-f2f0ec-35:rgba(242,240,236,0.35);
  --c-f2f0ec-40:rgba(242,240,236,0.4);
  --c-f2f0ec-42:rgba(242,240,236,0.42);
  --c-f2f0ec-45:rgba(242,240,236,0.45);
  --c-f2f0ec-50:rgba(242,240,236,0.5);
  --c-f2f0ec-52:rgba(242,240,236,0.52);
  --c-f2f0ec-55:rgba(242,240,236,0.55);
  --c-f2f0ec-60:rgba(242,240,236,0.6);
  --c-f2f0ec-62:rgba(242,240,236,0.62);
  --c-f2f0ec-65:rgba(242,240,236,0.65);
  --c-f2f0ec-66:rgba(242,240,236,0.66);
  --c-f2f0ec-68:rgba(242,240,236,0.68);
  --c-f2f0ec-70:rgba(242,240,236,0.7);
  --c-f2f0ec-72:rgba(242,240,236,0.72);
  --c-f2f0ec-75:rgba(242,240,236,0.75);
  --c-f2f0ec-78:rgba(242,240,236,0.78);
  --c-f2f0ec-80:rgba(242,240,236,0.8);
  --c-f2f0ec-82:rgba(242,240,236,0.82);
  --c-f2f0ec-85:rgba(242,240,236,0.85);
  --c-f2f0ec-90:rgba(242,240,236,0.9);
  --c-f2f0ec-92:rgba(242,240,236,0.92);
  --c-f5a524:#f5a524;
  --c-f5a524-10:rgba(245,165,36,0.1);
  --c-f5a524-12:rgba(245,165,36,0.12);
  --c-f5a524-13:rgba(245,165,36,0.13);
  --c-f5a524-14:rgba(245,165,36,0.14);
  --c-f5a524-15:rgba(245,165,36,0.15);
  --c-f5a524-16:rgba(245,165,36,0.16);
  --c-f5a524-20:rgba(245,165,36,0.2);
  --c-f5a524-25:rgba(245,165,36,0.25);
  --c-f5a524-30:rgba(245,165,36,0.3);
  --c-f5a524-35:rgba(245,165,36,0.35);
  --c-f5a524-38:rgba(245,165,36,0.38);
  --c-f5a524-40:rgba(245,165,36,0.4);
  --c-f5a524-42:rgba(245,165,36,0.42);
  --c-f5a524-45:rgba(245,165,36,0.45);
  --c-f5a524-50:rgba(245,165,36,0.5);
  --c-f5a524-55:rgba(245,165,36,0.55);
  --c-f5a524-60:rgba(245,165,36,0.6);
  --c-f5a524-7:rgba(245,165,36,0.07);
  --c-f5a524-70:rgba(245,165,36,0.7);
  --c-f5a524-75:rgba(245,165,36,0.75);
  --c-f5a524-8:rgba(245,165,36,0.08);
  --c-f5a524-9:rgba(245,165,36,0.09);
  --c-f5a524-90:rgba(245,165,36,0.9);
  --c-f7c56d:#f7c56d;
  --c-f7c56d-50:rgba(247,197,109,0.5);
  --c-ff6b3d:#ff6b3d;
  --c-ff8a7d:#ff8a7d;
  --c-ff8a7d-10:rgba(255,138,125,0.1);
  --c-ff8a7d-18:rgba(255,138,125,0.18);
  --c-ff8a7d-30:rgba(255,138,125,0.3);
  --c-ff8a7d-50:rgba(255,138,125,0.5);
  --c-ff8a7d-55:rgba(255,138,125,0.55);
  --c-ff8a7d-8:rgba(255,138,125,0.08);
  --c-ffc35c:#ffc35c;
  --c-ffffff-10:rgba(255,255,255,0.1);
  --c-ffffff-12:rgba(255,255,255,0.12);
  --c-ffffff-13:rgba(255,255,255,0.13);
  --c-ffffff-14:rgba(255,255,255,0.14);
  --c-ffffff-16:rgba(255,255,255,0.16);
  --c-ffffff-18:rgba(255,255,255,0.18);
  --c-ffffff-2:rgba(255,255,255,0.02);
  --c-ffffff-20:rgba(255,255,255,0.2);
  --c-ffffff-22:rgba(255,255,255,0.22);
  --c-ffffff-25:rgba(255,255,255,0.25);
  --c-ffffff-28:rgba(255,255,255,0.28);
  --c-ffffff-3:rgba(255,255,255,0.03);
  --c-ffffff-30:rgba(255,255,255,0.3);
  --c-ffffff-4:rgba(255,255,255,0.04);
  --c-ffffff-5:rgba(255,255,255,0.05);
  --c-ffffff-6:rgba(255,255,255,0.06);
  --c-ffffff-7:rgba(255,255,255,0.07);
  --c-ffffff-8:rgba(255,255,255,0.08);
  --c-ffffff-9:rgba(255,255,255,0.09);
  /* Semantic tokens (Oct 2026 contrast pass) -- use these instead of hard-coded colors. */
  --on-accent:#151413;            /* text/icons on a solid amber, blue, red or yellow fill (both themes) */
  --on-green:#0f1a12;             /* text on a solid green fill */
  --on-blue:#151413;              /* text on a solid var(--c-9fd0ff) fill */
  --surface-deep:#151413;         /* recessed button/bar surface (bottom nav, timer action buttons) */
  --amber-text:#f5a524;           /* amber text sitting on an amber tint (selected tabs/chips) */
  --c-c9a7ff:#c9a7ff;
  --c-c9a7ff-12:rgba(201,167,255,0.12);
  --c-5fd4c4:#5fd4c4;
  --c-5fd4c4-12:rgba(95,212,196,0.12);
  --c-c9a7ff-16:rgba(201,167,255,0.16);
  --c-ff6b5e:#ff6b5e;
  --c-ff8a7d-14:rgba(255,138,125,0.14);
  --c-ff8a7d-16:rgba(255,138,125,0.16);
  --c-overdue-cell:rgba(255,70,50,0.55);
}
:root[data-theme="light"]{color-scheme:light;
  --c-f5a524-18:rgba(196,122,0,0.225);
  --c-ff8a7d-60:rgba(192,57,43,0.6);
  --c-000000-40:rgba(0,0,0,0.14);
  --c-000000-45:rgba(0,0,0,0.158);
  --c-000000-50:rgba(0,0,0,0.175);
  --c-000000-55:rgba(0,0,0,0.193);
  --c-0e1a12:#eff6f1;
  --c-123524:#e6f7ef;
  --c-131211:#f3f1ec;
  --c-171614:#f3f2f1;
  --c-171615:#f2f2f1;
  --c-1b1a18:#ffffff;
  --c-1f1d1b:#f1f0ef;
  --c-201f1d:#f7f5f1;
  --c-232120:#ffffff;
  --c-24221f:#f0efee;
  --c-262422:#efeeed;
  --c-2a2723:#efeeec;
  --c-2a2825:#efeeec;
  --c-2c2a27:#e8e5df;
  --c-2ed47a:#13804a;
  --c-2ed47a-10:rgba(19,128,74,0.1);
  --c-2ed47a-14:rgba(19,128,74,0.14);
  --c-2ed47a-16:rgba(19,128,74,0.16);
  --c-2ed47a-20:rgba(19,128,74,0.2);
  --c-2ed47a-22:rgba(19,128,74,0.22);
  --c-2ed47a-30:rgba(19,128,74,0.3);
  --c-2ed47a-35:rgba(19,128,74,0.35);
  --c-2ed47a-40:rgba(19,128,74,0.4);
  --c-2ed47a-45:rgba(19,128,74,0.45);
  --c-2ed47a-5:rgba(19,128,74,0.05);
  --c-2ed47a-50:rgba(19,128,74,0.5);
  --c-2ed47a-9:rgba(19,128,74,0.09);
  --c-3a2f16:#fbecc9;
  --c-6b6862:#6b6862;
  --c-7cc4ff:#0076d6;
  --c-8fb4ff:#2a5db0;
  --c-8fb4ff-13:rgba(42,93,176,0.13);
  --c-8fb4ff-14:rgba(42,93,176,0.14);
  --c-8fb4ff-16:rgba(42,93,176,0.16);
  --c-8fb4ff-30:rgba(42,93,176,0.3);
  --c-8fb4ff-42:rgba(42,93,176,0.42);
  --c-8fb4ff-45:rgba(42,93,176,0.45);
  --c-8fb4ff-8:rgba(42,93,176,0.08);
  --c-9fd0ff:#1f6fa8;
  --c-c98c1b:#bd8419;
  --c-e2493b:#c83228;
  --c-e2493b-11:rgba(200,50,40,0.11);
  --c-e2493b-14:rgba(200,50,40,0.14);
  --c-e2493b-16:rgba(200,50,40,0.16);
  --c-e2493b-42:rgba(200,50,40,0.42);
  --c-e2493b-45:rgba(200,50,40,0.45);
  --c-e2493b-50:rgba(200,50,40,0.5);
  --c-f2f0ec:#1b1916;
  --c-f2f0ec-25:rgba(27,25,22,0.475);
  --c-f2f0ec-35:rgba(27,25,22,0.545);
  --c-f2f0ec-40:rgba(27,25,22,0.58);
  --c-f2f0ec-42:rgba(27,25,22,0.594);
  --c-f2f0ec-45:rgba(27,25,22,0.615);
  --c-f2f0ec-50:rgba(27,25,22,0.65);
  --c-f2f0ec-52:rgba(27,25,22,0.664);
  --c-f2f0ec-55:rgba(27,25,22,0.685);
  --c-f2f0ec-60:rgba(27,25,22,0.72);
  --c-f2f0ec-62:rgba(27,25,22,0.734);
  --c-f2f0ec-65:rgba(27,25,22,0.755);
  --c-f2f0ec-66:rgba(27,25,22,0.762);
  --c-f2f0ec-68:rgba(27,25,22,0.776);
  --c-f2f0ec-70:rgba(27,25,22,0.79);
  --c-f2f0ec-72:rgba(27,25,22,0.804);
  --c-f2f0ec-75:rgba(27,25,22,0.825);
  --c-f2f0ec-78:rgba(27,25,22,0.846);
  --c-f2f0ec-80:rgba(27,25,22,0.86);
  --c-f2f0ec-82:rgba(27,25,22,0.874);
  --c-f2f0ec-85:rgba(27,25,22,0.895);
  --c-f2f0ec-90:rgba(27,25,22,0.93);
  --c-f2f0ec-92:rgba(27,25,22,0.944);
  --c-f5a524:#c47a00;
  --c-f5a524-10:rgba(196,122,0,0.125);
  --c-f5a524-12:rgba(196,122,0,0.15);
  --c-f5a524-13:rgba(196,122,0,0.163);
  --c-f5a524-14:rgba(196,122,0,0.175);
  --c-f5a524-15:rgba(196,122,0,0.188);
  --c-f5a524-16:rgba(196,122,0,0.2);
  --c-f5a524-20:rgba(196,122,0,0.25);
  --c-f5a524-25:rgba(196,122,0,0.312);
  --c-f5a524-30:rgba(196,122,0,0.375);
  --c-f5a524-35:rgba(196,122,0,0.438);
  --c-f5a524-38:rgba(196,122,0,0.475);
  --c-f5a524-40:rgba(196,122,0,0.5);
  --c-f5a524-42:rgba(196,122,0,0.525);
  --c-f5a524-45:rgba(196,122,0,0.562);
  --c-f5a524-50:rgba(196,122,0,0.625);
  --c-f5a524-55:rgba(196,122,0,0.688);
  --c-f5a524-60:rgba(196,122,0,0.75);
  --c-f5a524-7:rgba(196,122,0,0.088);
  --c-f5a524-70:rgba(196,122,0,0.875);
  --c-f5a524-75:rgba(196,122,0,0.938);
  --c-f5a524-8:rgba(196,122,0,0.1);
  --c-f5a524-9:rgba(196,122,0,0.112);
  --c-f5a524-90:#c47a00;
  --c-f7c56d:#9a6400;
  --c-f7c56d-50:rgba(154,100,0,0.5);
  --c-ff6b3d:#c2410c;
  --c-ff8a7d:#c0392b;
  --c-ff8a7d-10:rgba(192,57,43,0.1);
  --c-ff8a7d-18:rgba(192,57,43,0.18);
  --c-ff8a7d-30:rgba(192,57,43,0.3);
  --c-ff8a7d-50:rgba(192,57,43,0.5);
  --c-ff8a7d-55:rgba(192,57,43,0.55);
  --c-ff8a7d-8:rgba(192,57,43,0.08);
  --c-ffc35c:#9a5d00;
  --c-ffffff-10:rgba(27,25,22,0.115);
  --c-ffffff-12:rgba(27,25,22,0.138);
  --c-ffffff-13:rgba(27,25,22,0.149);
  --c-ffffff-14:rgba(27,25,22,0.161);
  --c-ffffff-16:rgba(27,25,22,0.184);
  --c-ffffff-18:rgba(27,25,22,0.207);
  --c-ffffff-2:rgba(27,25,22,0.023);
  --c-ffffff-20:rgba(27,25,22,0.23);
  --c-ffffff-22:rgba(27,25,22,0.253);
  --c-ffffff-25:rgba(27,25,22,0.287);
  --c-ffffff-28:rgba(27,25,22,0.322);
  --c-ffffff-3:rgba(27,25,22,0.034);
  --c-ffffff-30:rgba(27,25,22,0.345);
  --c-ffffff-4:rgba(27,25,22,0.046);
  --c-ffffff-5:rgba(27,25,22,0.057);
  --c-ffffff-6:rgba(27,25,22,0.069);
  --c-ffffff-7:rgba(27,25,22,0.081);
  --c-ffffff-8:rgba(27,25,22,0.092);
  --c-ffffff-9:rgba(27,25,22,0.103);
  --on-accent:#151413;
  --on-green:#ffffff;
  --on-blue:#ffffff;
  --surface-deep:#e9e6e0;
  --amber-text:#8f5600;
  --c-c9a7ff:#6b3fc0;
  --c-c9a7ff-12:rgba(107,63,192,0.12);
  --c-5fd4c4:#0b7a6d;
  --c-5fd4c4-12:rgba(11,122,109,0.12);
  --c-c9a7ff-16:rgba(107,63,192,0.16);
  --c-ff6b5e:#c0392b;
  --c-ff8a7d-14:rgba(192,57,43,0.14);
  --c-ff8a7d-16:rgba(192,57,43,0.16);
  --c-overdue-cell:#c0392b;
}
/* The white logo disappears on light surfaces: swap in the same logo with a dark wordmark.
   The gold moon and star keep their original color (only the white lettering is recolored). */
:root[data-theme="light"] img[src*="logo-white"]{content:url("./icons/logo-ink.png")}

/* ---- Layout rules shared by every staff page (Oct 2026) -------------------------------------
   One scroll at a time: while a drawer / sheet / pop-up is open the page behind it is frozen, so
   only the drawer scrolls (no scroll-inside-a-scroll, no "the page moved instead of the drawer"). */
html:has(.overlay), html:has(.sheet-wrap), html:has([data-mv="bg"]){ overflow:hidden; }
html:has(.overlay) body, html:has(.sheet-wrap) body, html:has([data-mv="bg"]) body{ overflow:hidden; }
.overlay, .sheet-wrap, [data-mv="bg"]{ overscroll-behavior:contain; }
.overlay .drawer, .sheet-wrap .sheet, [data-mv="bg"] > *{ overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
/* Drawer title + Close button stay pinned at the top while the drawer scrolls. */
.overlay .drawer > .head:first-child{ position:sticky; top:-20px; z-index:3; background:var(--c-1b1a18);
  margin:-20px calc(-1 * clamp(14px,3vw,24px)) 0; padding:16px clamp(14px,3vw,24px) 12px; border-bottom:1px solid var(--c-ffffff-8); }
.overlay .drawer > .head:first-child [data-close]{ flex:none; }
/* iPhone (Nov 2026): the app runs edge-to-edge (viewport-fit=cover), so the drawer's top sat under the
   clock / notch and the Close button was hidden behind the status bar. Push the pinned header down by
   the notch height and give Close a full-size, easy-to-see
   tap target. env() is 0 on desktops and Android, so nothing changes there. */
.overlay .drawer > .head:first-child{ padding-top:calc(16px + env(safe-area-inset-top, 0px)); }
.overlay .drawer > .head:first-child [data-close]{ min-height:44px; min-width:76px; font-size:12px;
  border-color:var(--c-f5a524); color:var(--c-f5a524); }
.overlay .drawer > .head:first-child [data-close]::before{ content:"✕ "; }
/* Never wider than the screen. */
html, body{ max-width:100%; overflow-x:clip; }
img, video, canvas, svg{ max-width:100%; }
pre, code, .desc, .note{ overflow-wrap:anywhere; }

/* Phones & small tablets */
@media (max-width: 760px){
  /* iOS zooms the whole page in when you tap a text box smaller than 16px -- that zoom is what left
     the ticket's Close button off-screen. 16px boxes = no zoom. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea{ font-size:16px !important; }
  /* Tables turn into stacked cards instead of scrolling sideways. theme.js labels each cell with
     its column name. Tables marked data-wide (big grids like the training matrix) keep a sideways scroll. */
  .sf-stack, .sf-stack tbody, .sf-stack tr, .sf-stack td{ display:block; width:100% !important; }
  .sf-stack thead{ display:none; }
  .sf-stack tr{ border:1px solid var(--c-ffffff-12); border-radius:10px; padding:8px 10px; margin:0 0 8px; background:var(--c-ffffff-2); }
  .sf-stack td{ border:0 !important; padding:3px 0 !important; text-align:left !important; white-space:normal !important; min-width:0 !important; }
  .sf-stack td[data-label]:not([data-label=""])::before{ content:attr(data-label); display:block; font:600 9.5px/1.4 'JetBrains Mono',ui-monospace,monospace;
    letter-spacing:.07em; text-transform:uppercase; color:var(--c-f2f0ec-55); }
  .sf-stack td:empty{ display:none; }
  /* The box around a stacked table stops scrolling sideways -- and drops any fixed height too, or the
     cards spill out over whatever comes next (Oct 29: Vault -> Manage Access on an iPhone). */
  .tablewrap:has(> .sf-stack), div:has(> table.sf-stack){ overflow:visible !important; max-height:none !important; height:auto !important; }
}

/* Clickable summary tiles: look and feel like buttons; the one that matches the current filter is outlined. */
[data-jump], [data-quick], [data-only], [data-status].kpi, [data-rquick], .kpi[data-f], a.kpi{ cursor:pointer; }
.kpi[data-jump]:hover, .kpi[data-quick]:hover, .kpi[data-only]:hover, .kpi[data-status]:hover, .kpi[data-rquick]:hover, a.kpi:hover{ border-color:var(--c-f5a524) !important; }
.kpi.is-on{ border-color:var(--c-f5a524) !important; box-shadow:inset 0 0 0 1px var(--c-f5a524); }
[data-jump]:focus-visible, [data-quick]:focus-visible, [data-rquick]:focus-visible{ outline:2px solid var(--c-f5a524); outline-offset:2px; }
@keyframes sfFlash{ 0%{ box-shadow:0 0 0 3px var(--c-f5a524-60); } 100%{ box-shadow:0 0 0 3px transparent; } }
.sf-flash{ animation:sfFlash 1.4s ease-out 1; border-radius:12px; scroll-margin-top:12px; }

/* Every dropdown's opened list uses the theme's solid colors (a transparent/tinted select otherwise
   opens a white list with light text on Windows). */
select option, select optgroup{ background-color:var(--c-1b1a18); color:var(--c-f2f0ec); }