/* ==========================================================================
   Bryder Group, dark mode for the staff portal (26 Oct 2026).
   Jack: "for me at night its too bright".

   staff-theme.js puts data-ui-theme="dark" or "light" on <html> before the
   page paints (Light, Dark, or Match my device, which is the default), and
   every rule here is under html[data-ui-theme="dark"]. In light, this file
   does nothing at all. (The data-theme="dark" the pages already carry is an
   old marker for site.js and means nothing here.)

   Not an inversion: the Bryder deep green family for the surfaces, mint and
   teal for accents, text in a mint-tinted white. The page is the darkest,
   cards sit a step lighter, and menus, dialogs and the mint "tint" panels
   lighter again, so depth reads the same way as in light. Contrast, on a
   card (#062D2B): text #E4F3EF about 14:1, muted #A3C4BC about 8:1, accent
   #5ED3C1 about 8:1, the primary button (deep #02201E on mint #B3E4D8)
   about 12:1.

   The tokens from calm.css (and the page-level ones in ribbon-auth.css,
   staff-home.css and staff-signin.css) are set again for dark; everything
   that used a fixed light colour, or the ink colour as a background, is
   given its dark version below, file by file.
   ========================================================================== */

html[data-ui-theme="dark"] {
  color-scheme: dark;
  --dk-bg: #021B1A;
  --dk-card: #062D2B;
  --dk-raised: #0A3936;
  --dk-field: #031F1E;
  --dk-field-line: rgba(179, 228, 216, 0.26);
  --dk-tint: #0A3F3B;
  --dk-tint-line: #17605A;
  --dk-solid: #B3E4D8;          /* mint: primary buttons, solid chips */
  --dk-on-solid: #02201E;       /* deep text on mint */
  --dk-deep: #031716;           /* darker than the page: chat header */
  --dk-warn-bg: #3A2F0E;
  --dk-warn-ink: #F3D58A;
  --dk-shadow: rgba(0, 0, 0, 0.45);
  background: var(--dk-bg);
}
html[data-ui-theme="dark"],
html[data-ui-theme="dark"] body,
html[data-ui-theme="dark"] body.auth-page,
html[data-ui-theme="dark"] body.staff-home,
html[data-ui-theme="dark"] body.staff-signin {
  --paper: #021B1A;
  --paper-2: #052826;
  --sheet: #062D2B;
  --ink: #E4F3EF;
  --ink-2: #CBEFE6;
  --ink-3: #5ED3C1;
  --teal: #2EC4B0;
  --black: #F2F4F3;
  --soft: #A3C4BC;
  --line: rgba(179, 228, 216, 0.16);
  --line-2: rgba(179, 228, 216, 0.09);
  --accent-bright: #5ED3C1;
  --err: #F08A80;
  --err-ink: #F6B4AC;
  --err-bg: #3A1512;
  --sh-mint: #0A3F3B;
  --sh-mint-2: #08332F;
  --sh-grey: #0A2C2A;
  --sh-field: rgba(179, 228, 216, 0.26);
  --ss-icon-bg: #0A3936;
  --ss-field: rgba(179, 228, 216, 0.26);
}
html[data-ui-theme="dark"] body { background: var(--paper); color: var(--ink); }

/* ---------------------------------------------------------------- calm.css */
html[data-ui-theme="dark"] ::selection { background: rgba(46, 196, 176, 0.35); color: #fff; }
html[data-ui-theme="dark"] .skip { background: var(--dk-solid); color: var(--dk-on-solid); }
html[data-ui-theme="dark"] .btn { background: var(--dk-solid); border-color: var(--dk-solid); color: var(--dk-on-solid); }
html[data-ui-theme="dark"] .btn:hover { background: #D2F1E9; border-color: #D2F1E9; color: var(--dk-on-solid); }
html[data-ui-theme="dark"] .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
html[data-ui-theme="dark"] .btn--ghost:hover { background: var(--dk-raised); border-color: var(--ink-3); color: var(--ink); }
html[data-ui-theme="dark"] .arrow-link { border-bottom-color: rgba(94, 211, 193, 0.45); }
html[data-ui-theme="dark"] .hdr,
html[data-ui-theme="dark"] body.portal-dash .hdr { background: rgba(2, 27, 26, 0.9); border-bottom-color: var(--line); }
html[data-ui-theme="dark"] .hdr-brand img,
html[data-ui-theme="dark"] .ss-brand img { content: url("/assets/img/logo-group-white-304.webp"); }
html[data-ui-theme="dark"] .f input,
html[data-ui-theme="dark"] .f select,
html[data-ui-theme="dark"] .f textarea { background: var(--dk-field); border-color: var(--dk-field-line); color: var(--ink); }
html[data-ui-theme="dark"] .f input::placeholder,
html[data-ui-theme="dark"] .f textarea::placeholder { color: #86A9A0; }

/* ---------------------------------------------------------- ribbon-auth.css */
html[data-ui-theme="dark"] .auth__card,
html[data-ui-theme="dark"] body.auth-page .auth__card { box-shadow: 0 0 0 1px var(--line), 0 24px 48px -36px var(--dk-shadow); }
html[data-ui-theme="dark"] .field input,
html[data-ui-theme="dark"] .field textarea,
html[data-ui-theme="dark"] .field select { background: var(--dk-field); border-color: var(--dk-field-line); color: var(--ink); }
html[data-ui-theme="dark"] .field input:hover,
html[data-ui-theme="dark"] .field textarea:hover,
html[data-ui-theme="dark"] .field select:hover { border-color: rgba(179, 228, 216, 0.45); }
html[data-ui-theme="dark"] .field input:focus,
html[data-ui-theme="dark"] .field textarea:focus,
html[data-ui-theme="dark"] .field select:focus { background: #052826; border-color: var(--ink-3); }
html[data-ui-theme="dark"] .field input::placeholder,
html[data-ui-theme="dark"] .field textarea::placeholder { color: #86A9A0; }
html[data-ui-theme="dark"] .field__aside { text-decoration-color: rgba(94, 211, 193, 0.45); }
html[data-ui-theme="dark"] .btn--provider { background: var(--dk-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
html[data-ui-theme="dark"] .auth__status { background: var(--dk-raised); color: var(--ink); }
html[data-ui-theme="dark"] .auth__status[data-state="success"] { background: var(--dk-tint); color: var(--ink); }
html[data-ui-theme="dark"] .auth__status[data-state="error"] { background: var(--err-bg); color: var(--err-ink); }
html[data-ui-theme="dark"] .aside-link:hover { background: var(--dk-solid); color: var(--dk-on-solid); }
html[data-ui-theme="dark"] .auth__point > svg,
html[data-ui-theme="dark"] .action__icon,
html[data-ui-theme="dark"] .pd-links__icon { background: var(--dk-tint); color: var(--ink-3); }
html[data-ui-theme="dark"] .pd-card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 18px 40px -32px var(--dk-shadow); }
html[data-ui-theme="dark"] .pd-staffnote,
html[data-ui-theme="dark"] .pp-staff__tag,
html[data-ui-theme="dark"] .pt-late,
html[data-ui-theme="dark"] .ps-pill--waiting { background: var(--dk-warn-bg); color: var(--dk-warn-ink); }
html[data-ui-theme="dark"] .ps-reveal__warn { color: var(--dk-warn-ink); }

/* Jack's status dots keep their greens; the ring matches the surface. */
html[data-ui-theme="dark"] .ps-dot { box-shadow: 0 0 0 2px var(--sheet); }
html[data-ui-theme="dark"] .ps-dot[data-state="busy"] { background: #0F7A70; }
html[data-ui-theme="dark"] .ps-dot[data-state="away"] { box-shadow: inset 0 0 0 2px #02B1A0, 0 0 0 2px var(--sheet); }
html[data-ui-theme="dark"] .ps-dot[data-state="offline"] { background: transparent; box-shadow: inset 0 0 0 2px #8FB1A9, 0 0 0 2px var(--sheet); }
html[data-ui-theme="dark"] .pd-jack { background: var(--dk-tint); }
html[data-ui-theme="dark"] .pd-jack__active { background: var(--dk-solid); color: var(--dk-on-solid); }

/* to-dos */
html[data-ui-theme="dark"] .pt-item { background: var(--sheet); }
html[data-ui-theme="dark"] .pt-item.is-done,
html[data-ui-theme="dark"] .pt-form,
html[data-ui-theme="dark"] .pt-page .pt-details { background: var(--paper-2); }
html[data-ui-theme="dark"] .pt-item.is-done .pt-title { text-decoration-color: rgba(179, 228, 216, 0.4); }
html[data-ui-theme="dark"] .pt-tick { accent-color: #5ED3C1; }
html[data-ui-theme="dark"] .pt-state { background: var(--dk-tint); color: var(--ink-2); }
html[data-ui-theme="dark"] .pt-state[data-done="yes"] { background: var(--dk-solid); color: var(--dk-on-solid); }
html[data-ui-theme="dark"] .pt-del { color: var(--err-ink); }
html[data-ui-theme="dark"] .pt-made { background: var(--dk-tint); }
html[data-ui-theme="dark"] .pt-url { background: var(--dk-field); border-color: var(--dk-field-line); color: var(--ink); }

/* projects: pills, stages, the preview card, uploads */
html[data-ui-theme="dark"] .pp-pill { background: var(--dk-tint); color: var(--ink); }
html[data-ui-theme="dark"] .pp-pill--ok,
html[data-ui-theme="dark"] .ps-pill--viewed { background: var(--dk-solid); color: var(--dk-on-solid); }
html[data-ui-theme="dark"] .pp-stage.is-done .pp-stage__dot::after { border-color: var(--dk-on-solid); }
html[data-ui-theme="dark"] .pp-stage.is-now .pp-stage__dot { box-shadow: 0 0 0 5px rgba(46, 196, 176, 0.25); }
html[data-ui-theme="dark"] .pp-card,
html[data-ui-theme="dark"] .ps-reveal { background: var(--dk-tint); box-shadow: inset 0 0 0 1px var(--dk-tint-line); }
html[data-ui-theme="dark"] .pp-drop { border-color: rgba(179, 228, 216, 0.3); }
html[data-ui-theme="dark"] .pp-drop.is-over,
html[data-ui-theme="dark"] .pp-crumbs__link.is-target,
html[data-ui-theme="dark"] .pp-item.is-target,
html[data-ui-theme="dark"] .pp-items--list .pp-item.is-target,
html[data-ui-theme="dark"] .pp-items--list .pp-item.is-picked,
html[data-ui-theme="dark"] .pp-tool[aria-pressed="true"],
html[data-ui-theme="dark"] .pp-selbar,
html[data-ui-theme="dark"] .pp-pick:has(input:checked),
html[data-ui-theme="dark"] .pp-choice:has(input:checked),
html[data-ui-theme="dark"] .ps-lock { background: var(--dk-tint); }
html[data-ui-theme="dark"] .pp-selbar { box-shadow: inset 0 0 0 1px var(--dk-tint-line); }
html[data-ui-theme="dark"] .pp-seg__btn[aria-pressed="true"] { background: var(--dk-raised); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
html[data-ui-theme="dark"] .pp-tool:hover { border-color: var(--ink-3); }
html[data-ui-theme="dark"] .pp-item:hover { box-shadow: 0 0 0 1px rgba(179, 228, 216, 0.3), 0 10px 22px -16px var(--dk-shadow); }
html[data-ui-theme="dark"] .pp-item__thumb { background: #0A3431; }
html[data-ui-theme="dark"] .pp-item__thumb--folder { background: var(--dk-tint); }
html[data-ui-theme="dark"] .pp-item__thumb[data-kind="pdf"] { background: #3A1A17; color: #F5A99F; }
html[data-ui-theme="dark"] .pp-item__thumb[data-kind="pdf"].has-img { background: #fff; }
html[data-ui-theme="dark"] .pp-item__thumb[data-kind="doc"] { background: #16274A; color: #A9C1F5; }
html[data-ui-theme="dark"] .pp-item__thumb[data-kind="sheet"] { background: #12351F; color: #9FDDB2; }
html[data-ui-theme="dark"] .pp-item__thumb[data-kind="slides"] { background: #3A2414; color: #F4B98F; }
html[data-ui-theme="dark"] .pp-item__thumb[data-kind="zip"] { background: var(--dk-warn-bg); color: var(--dk-warn-ink); }
html[data-ui-theme="dark"] .pp-item__thumb[data-kind="design"] { background: #2A1F48; color: #C9B4F7; }
html[data-ui-theme="dark"] .pp-item__thumb[data-kind="audio"],
html[data-ui-theme="dark"] .pp-item__thumb[data-kind="video"] { background: #1C2833; color: #B6C6D6; }
html[data-ui-theme="dark"] .pp-item__pick { box-shadow: 0 0 0 1px var(--line), 0 2px 6px -2px var(--dk-shadow); }
html[data-ui-theme="dark"] .pp-files__bar.is-stuck { box-shadow: 0 1px 0 var(--line), 0 12px 16px -14px var(--dk-shadow); }
html[data-ui-theme="dark"] .pp-find__search input,
html[data-ui-theme="dark"] .pp-find__sort select,
html[data-ui-theme="dark"] .sc-req__status { background: var(--dk-field); color: var(--ink); }
/* Quotes, invoices and updates you can edit (staff-docs.js, 26 Oct 2026). */
html[data-ui-theme="dark"] .pp-pill[data-tone="bad"] { background: #4A1512; color: #FFC9C2; }
html[data-ui-theme="dark"] .pp-pill[data-tone="soon"] { background: var(--dk-warn-bg); color: var(--dk-warn-ink); }
html[data-ui-theme="dark"] .pp-pill[data-tone="quiet"] { background: var(--dk-raised); color: var(--soft); }
html[data-ui-theme="dark"] .pp-doc__due[data-tone="soon"] { color: var(--dk-warn-ink); }
html[data-ui-theme="dark"] .pp-doc__due[data-tone="bad"] { color: #FFB4AB; }
html[data-ui-theme="dark"] .sd-paid,
html[data-ui-theme="dark"] .sd-edit { background: var(--dk-raised); }
html[data-ui-theme="dark"] .pp-find__search input:hover,
html[data-ui-theme="dark"] .pp-find__sort select:hover { border-color: rgba(179, 228, 216, 0.4); }
html[data-ui-theme="dark"] .pp-totop { background: var(--dk-solid); color: var(--dk-on-solid); }
html[data-ui-theme="dark"] .pp-totop:hover { background: #D2F1E9; }
html[data-ui-theme="dark"] .pp-staff > summary::before { background: var(--dk-solid); color: var(--dk-on-solid); }

/* menus and dialogs sit a step above the page */
html[data-ui-theme="dark"] .pp-menu,
html[data-ui-theme="dark"] .pp-dialog { background: var(--dk-raised); color: var(--ink); }
html[data-ui-theme="dark"] .pp-menu { box-shadow: 0 0 0 1px var(--line), 0 20px 40px -16px var(--dk-shadow); }
html[data-ui-theme="dark"] .pp-menu__item:hover,
html[data-ui-theme="dark"] .pp-menu__item:focus { background: var(--dk-tint); }
html[data-ui-theme="dark"] .pp-dialog { box-shadow: 0 0 0 1px var(--line), 0 30px 60px -20px rgba(0, 0, 0, 0.7); }
html[data-ui-theme="dark"] .pp-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
html[data-ui-theme="dark"] .pp-dialog .field input,
html[data-ui-theme="dark"] .pp-dialog .field textarea,
html[data-ui-theme="dark"] .pp-dialog .field select { background: var(--dk-field); }
html[data-ui-theme="dark"] .btn--danger,
html[data-ui-theme="dark"] .pp-dialog .btn--danger { background: #E0675C; border-color: #E0675C; color: #1C0705; }
html[data-ui-theme="dark"] .btn--danger:hover,
html[data-ui-theme="dark"] .pp-dialog .btn--danger:hover { background: #EC8C83; border-color: #EC8C83; color: #1C0705; }
html[data-ui-theme="dark"] .btn--danger-line { background: transparent; color: var(--err-ink); border-color: rgba(240, 138, 128, 0.5); }
html[data-ui-theme="dark"] .btn--danger-line:hover { background: var(--err-bg); border-color: var(--err); color: var(--err-ink); }
html[data-ui-theme="dark"] .sc-danger { border-color: rgba(240, 138, 128, 0.35); }
html[data-ui-theme="dark"] .pp-page { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); }

/* the Clients list, the staff logins and the chat card on the Clients page */
html[data-ui-theme="dark"] .sc-chat__new,
html[data-ui-theme="dark"] .sc-chatpill { background: var(--dk-solid); color: var(--dk-on-solid); }

/* ---------------------------------------------------------- portal-chat.css */
html[data-ui-theme="dark"] .pc-launch { background: var(--dk-solid); color: var(--dk-on-solid); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.35); }
html[data-ui-theme="dark"] .pc-launch:hover { background: #D2F1E9; }
html[data-ui-theme="dark"] .pc-panel { background: var(--sheet); box-shadow: 0 0 0 1px var(--line), 0 34px 80px -26px rgba(0, 0, 0, 0.75); }
html[data-ui-theme="dark"] .pc-head { background: var(--dk-deep); color: #fff; box-shadow: inset 0 -1px 0 var(--line); }
html[data-ui-theme="dark"] .pc-avatar { background: var(--teal); color: var(--dk-on-solid); }
html[data-ui-theme="dark"] .pc-scroll { background: var(--paper); }
html[data-ui-theme="dark"] .pc-msg__body { background: var(--dk-raised); box-shadow: 0 0 0 1px var(--line); }
html[data-ui-theme="dark"] .pc-msg--me .pc-msg__body { background: #0E4A45; box-shadow: 0 0 0 1px var(--dk-tint-line); }
html[data-ui-theme="dark"] .pc-empty { background: var(--dk-raised); }
html[data-ui-theme="dark"] .pc-compose { background: var(--sheet); }
html[data-ui-theme="dark"] .pc-compose__box { background: var(--dk-field); border-color: var(--dk-field-line); color: var(--ink); }
html[data-ui-theme="dark"] .pc-compose__box::placeholder { color: #86A9A0; }
html[data-ui-theme="dark"] .pc-compose__box:hover { border-color: rgba(179, 228, 216, 0.45); }
html[data-ui-theme="dark"] .pc-compose__box:focus { background: #052826; border-color: var(--ink-3); }
html[data-ui-theme="dark"] .pc-send { background: var(--dk-solid); color: var(--dk-on-solid); }
html[data-ui-theme="dark"] .pc-send:hover { background: #D2F1E9; }
html[data-ui-theme="dark"] .pc-count[data-state="error"] { color: var(--err-ink); }
html[data-ui-theme="dark"] .pc-status { background: var(--dk-raised); }
html[data-ui-theme="dark"] .pc-status[data-state="error"] { background: var(--err-bg); color: var(--err-ink); box-shadow: inset 3px 0 0 var(--err); }

/* ----------------------------------------------------------- staff-home.css */
html[data-ui-theme="dark"] .staff-home .sh-hero {
  background:
    linear-gradient(112deg, rgba(2, 40, 37, 0.95) 0%, rgba(2, 56, 52, 0.86) 46%, rgba(2, 27, 26, 0.78) 100%),
    url("/assets/img/hero/approach.jpg") center 42% / cover no-repeat,
    var(--dk-bg);
}
html[data-ui-theme="dark"] .staff-home .sh-status__change { background: var(--dk-solid); color: var(--dk-on-solid); }
html[data-ui-theme="dark"] .staff-home .sh-status__now[aria-expanded="true"] .sh-status__change { background: #D2F1E9; }
html[data-ui-theme="dark"] .staff-home .sh-status__form { background: var(--dk-raised); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -22px rgba(0, 0, 0, 0.8); }
html[data-ui-theme="dark"] .staff-home .sh-status__opt { background: var(--dk-field); border-color: var(--dk-field-line); }
html[data-ui-theme="dark"] .staff-home .sh-status__opt input { accent-color: #5ED3C1; }
html[data-ui-theme="dark"] .staff-home .sh-status__opt:has(input:checked) { background: var(--dk-tint); border-color: #2EC4B0; box-shadow: inset 0 0 0 1px #2EC4B0; }
html[data-ui-theme="dark"] .staff-home .sh-search__input { background: var(--dk-field); color: var(--ink); border-color: rgba(179, 228, 216, 0.35); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.8); }
html[data-ui-theme="dark"] .staff-home .sh-search__input::placeholder { color: #8DB0A7; }
html[data-ui-theme="dark"] .staff-home .sh-search__icon { color: var(--ink-3); }
html[data-ui-theme="dark"] .staff-home .sh-results { background: var(--dk-raised); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -24px rgba(0, 0, 0, 0.7); }
html[data-ui-theme="dark"] .staff-home .sh-tile { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
html[data-ui-theme="dark"] .staff-home .sh-tile:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 22px 40px -28px rgba(0, 0, 0, 0.8); }
html[data-ui-theme="dark"] .staff-home .sh-tile--do .sh-tile__icon { background: var(--dk-solid); color: var(--dk-on-solid); }
html[data-ui-theme="dark"] .staff-home .sh-tile--do.sh-tile--alt .sh-tile__icon { background: var(--teal); color: var(--dk-on-solid); }
html[data-ui-theme="dark"] .staff-home .sh-card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 18px 40px -32px var(--dk-shadow); }
html[data-ui-theme="dark"] .staff-home .sh-card__count { background: var(--dk-solid); color: var(--dk-on-solid); }
html[data-ui-theme="dark"] .staff-home .sh-tag--new { background: var(--dk-solid); color: var(--dk-on-solid); }
html[data-ui-theme="dark"] .staff-home .sh-tag--warn { background: var(--dk-warn-bg); color: var(--dk-warn-ink); }
html[data-ui-theme="dark"] .staff-home .ask { box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 0.7); }
html[data-ui-theme="dark"] .staff-home .sh-scrim { background: rgba(0, 0, 0, 0.55); }
html[data-ui-theme="dark"] .staff-home .ask__mark { background: var(--dk-solid); color: var(--dk-on-solid); }
html[data-ui-theme="dark"] .staff-home .ask__msg--me { background: #0E4A45; color: var(--ink); }
html[data-ui-theme="dark"] .staff-home .ask__msg--bot { background: var(--dk-raised); }
html[data-ui-theme="dark"] .staff-home .ask__msg--calm { border-color: var(--dk-tint-line); }
html[data-ui-theme="dark"] .staff-home .ask__box { background: var(--dk-field); color: var(--ink); }
html[data-ui-theme="dark"] .staff-home .ask__box:hover { border-color: rgba(179, 228, 216, 0.45); }
html[data-ui-theme="dark"] .staff-home .ask__box:focus { border-color: var(--ink-3); }
html[data-ui-theme="dark"] .staff-home .ask__send { background: var(--dk-solid); color: var(--dk-on-solid); }
html[data-ui-theme="dark"] .staff-home .ask__send:hover { background: #D2F1E9; }
html[data-ui-theme="dark"] .staff-home .sh-askbtn[aria-expanded="true"] { background: var(--dk-tint); border-color: var(--ink-3); }

/* ------------------------------------------------------- staff-calendar.css */
html[data-ui-theme="dark"] .staff-cal .cal-cell:hover { background: var(--dk-raised); }
html[data-ui-theme="dark"] .staff-cal .cal-cell.is-today .cal-cell__num { background: var(--dk-solid); color: var(--dk-on-solid); }
html[data-ui-theme="dark"] .staff-cal .cal-ev { background: #0B3533; background: color-mix(in srgb, var(--c) 30%, #062D2B); color: var(--ink); }
html[data-ui-theme="dark"] .staff-cal .cal-ev:hover { background: color-mix(in srgb, var(--c) 45%, #062D2B); }
html[data-ui-theme="dark"] .staff-cal .cal-wday.is-today .cal-wday__head,
html[data-ui-theme="dark"] .staff-cal .cal-agenda__today,
html[data-ui-theme="dark"] .staff-cal .cal-receipt,
html[data-ui-theme="dark"] .staff-cal .cal-feed__link { background: var(--dk-tint); }
html[data-ui-theme="dark"] .staff-cal .cal-feed__link { box-shadow: inset 0 0 0 1px var(--dk-tint-line); }
html[data-ui-theme="dark"] .staff-cal .cal-feed__warn { color: var(--dk-warn-ink); }
html[data-ui-theme="dark"] .staff-cal .cal-file { background: var(--dk-field); border-color: rgba(179, 228, 216, 0.35); color: var(--ink); }
html[data-ui-theme="dark"] .staff-cal .cal-swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--ink); }

/* ------------------------------------------------------- staff-signin.css */
html[data-ui-theme="dark"]:has(body.staff-signin) { background: #010F0E; }
html[data-ui-theme="dark"] .staff-signin .ss-card,
html[data-ui-theme="dark"] .staff-signin .ss-main { background: var(--sheet); }
html[data-ui-theme="dark"] .staff-signin .ss-input,
html[data-ui-theme="dark"] .staff-signin .ss-ms { background: var(--dk-field); color: var(--ink); border-color: var(--dk-field-line); }
html[data-ui-theme="dark"] .staff-signin .ss-input:hover,
html[data-ui-theme="dark"] .staff-signin .ss-ms:hover { border-color: rgba(179, 228, 216, 0.5); background: var(--dk-raised); }
html[data-ui-theme="dark"] .staff-signin .ss-input__icon { border-right-color: var(--line); }
html[data-ui-theme="dark"] .staff-signin .ss-input input::placeholder { color: #86A9A0; }
html[data-ui-theme="dark"] .staff-signin .ss-link { text-decoration-color: rgba(94, 211, 193, 0.45); }

/* --------------------------------------------------------- the theme switch */
/* Built by staff-theme.js into the header of each staff page. */
.ut { position: relative; }
.ut-btn { gap: 8px; }
.ut-btn svg { flex: none; }
.ut-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; display: grid; gap: 2px;
  min-width: 220px; padding: 6px; border-radius: 12px;
  background: var(--sheet); color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 20px 40px -16px rgba(18, 32, 28, 0.42);
}
html[data-ui-theme="dark"] .ut-menu { background: var(--dk-raised); box-shadow: 0 0 0 1px var(--line), 0 20px 40px -16px rgba(0, 0, 0, 0.8); }
.ut-menu__k { padding: 8px 10px 4px; font-size: 12px; font-weight: 640; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.ut-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 8px 10px;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink);
  font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
.ut-opt:hover, .ut-opt:focus-visible { background: var(--paper-2); outline: none; }
html[data-ui-theme="dark"] .ut-opt:hover, html[data-ui-theme="dark"] .ut-opt:focus-visible { background: var(--dk-tint); }
.ut-opt__tick { flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); }
.ut-opt[aria-checked="true"] .ut-opt__tick { background: var(--ink-3); box-shadow: inset 0 0 0 4px var(--sheet), 0 0 0 2px var(--ink-3); }
html[data-ui-theme="dark"] .ut-opt[aria-checked="true"] .ut-opt__tick { box-shadow: inset 0 0 0 4px var(--dk-raised), 0 0 0 2px var(--ink-3); }
.ut-opt__sub { display: block; font-size: 13px; color: var(--soft); }
@media (max-width: 479px) { .ut-btn__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
/* On a phone the button sits mid-header, so the menu spans the screen. */
@media (max-width: 599px) { .ut-menu { position: fixed; left: 16px; right: 16px; top: calc(var(--hdr) + 4px); min-width: 0; } }

/* Money to chase on staff home (staff-money.js, 26 Oct 2026). */
html[data-ui-theme="dark"] .staff-home .sm-owed { background: var(--dk-tint); color: var(--ink); }
html[data-ui-theme="dark"] .staff-home .sm-lead[data-tone="bad"] { background: #4A1512; color: #FFC9C2; }
html[data-ui-theme="dark"] .staff-home .sm-lead[data-tone="soon"] { background: var(--dk-warn-bg); color: var(--dk-warn-ink); }
html[data-ui-theme="dark"] .staff-home .sm-nudge { background: var(--dk-field); border-color: var(--dk-field-line); color: var(--ink); }

/* Something didn't send on staff home (staff-health.js, 26 Oct 2026). */
html[data-ui-theme="dark"] .staff-home .shh { background: #3A1311; border-color: #6B2420; border-left-color: #FF8A80; color: #FFD8D3; }
html[data-ui-theme="dark"] .staff-home .shh-title,
html[data-ui-theme="dark"] .staff-home .shh-open { color: #FFD8D3; }
html[data-ui-theme="dark"] .staff-home .shh.shh--quiet { background: transparent; border-color: var(--line); color: var(--soft); }