/* ============================================================
   AEGIS by Allegiance — "Daylight" theme
   Scoped entirely under body.theme-daylight so login.html, gate.html,
   index.html, and reset-password.html keep the original dark "Glacier"
   theme untouched. Applied to: admin.html, staff.html,
   enroll-employee.html, gates.html, events.html.

   Approach: redefine the shared design tokens from style.css (most
   components already read var(--success), var(--pill), etc., so the
   cascade retheme s them automatically) plus explicit overrides for the
   handful of components that use hardcoded rgba/gradients instead of
   tokens (navbar, modal, buttons, calendar, stat tiles).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

body.theme-daylight {
  /* Neutrals are cool grey (not warm cream) - grey desktop, white cards,
     grey hairlines. The pastel tile accents stay warm on purpose; they're
     the color moments against the grey/white chrome. */
  --ink: #eceef1;
  --ink-2: #e4e7eb;
  --panel: rgba(20, 24, 34, 0.035);
  --panel-solid: #ffffff;
  --panel-2: #f2f3f6;
  --field: rgba(20, 24, 34, 0.035);
  --glass: rgba(20, 24, 34, 0.03);

  --ice: #f2c7d8;
  --sky: #a84c6e;
  --azure: #a84c6e;
  --steel: #191b1f;

  --border: #e3e5ea;
  --border-strong: #c9cdd5;
  --hairline: rgba(20, 24, 34, 0.08);

  --text: #191b1f;
  /* #62656c = ~4.9:1 on the white card surface - secondary text passes AA.
     --faint stays decorative-only. */
  --dim: #62656c;
  --faint: #b8bcc4;

  --success: #3f6e34;
  --success-bg: rgba(63, 110, 52, 0.1);
  --success-border: rgba(63, 110, 52, 0.28);
  --danger: #a13a52;
  --danger-bg: rgba(161, 58, 82, 0.09);
  --danger-border: rgba(161, 58, 82, 0.26);
  --warn: #a9791a;
  --warn-bg: rgba(169, 121, 26, 0.1);
  --warn-border: rgba(169, 121, 26, 0.28);
  --info: #3d4f8a;
  --info-bg: rgba(61, 79, 138, 0.1);
  --info-border: rgba(61, 79, 138, 0.26);

  --rule-red: #a13a52;
  --rule-amber: #a9791a;
  --rule-green: #3f6e34;
  --rule-blue: #3d4f8a;

  --grad-brand: linear-gradient(135deg, #a84c6e 0%, #171512 100%);
  --grad-btn: linear-gradient(135deg, #232019 0%, #0d0b08 100%);
  --neon: #a84c6e;

  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --shadow-card: 0 1px 2px rgba(20, 24, 34, 0.06), 0 10px 26px rgba(20, 24, 34, 0.09);
  --shadow-glow: 0 6px 20px rgba(20, 24, 34, 0.15);

  --font-display: "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;

  /* Tile accents, unique to this theme. Richer than the old washed
     pastels - these need to read as pressable colored objects, not
     tinted paper. Deep variants drive shadows/sparklines. */
  --mustard: #f0c64a; --mustard-deep: #8a6a1f;
  --pink: #f0a8c4; --pink-deep: #a84c6e;
  --olive: #b6c05f; --olive-deep: #5c6335;
  --lavender: #a9bdf2; --lavender-deep: #3d4f8a;
  --peach: #eda06e; --peach-deep: #8a4f24;
}

body.theme-daylight,
body.theme-daylight html {
  background: var(--ink);
}
/* Grey desktop behind the window - visible depth behind every card's
   backdrop-filter without going as dark as a first pass at this (reverted -
   too dark, and it read through the translucent glass panels enough to
   dull their contents, e.g. the Today's Breakdown ring's center label).
   Faint warm "light source" follows the cursor (--bgx/--bgy are updated
   from aegis.js, rAF-throttled; they stay at their defaults when
   reduced-motion is on or JS is disabled, so this degrades to a plain
   static gradient). Shared here (not per-page) so every theme-daylight
   page - admin, staff, gates, events, enroll-* - looks the same. */
body.theme-daylight {
  background-image:
    radial-gradient(1000px circle at var(--bgx, 72%) var(--bgy, 18%), rgba(168, 76, 110, 0.05), transparent 62%),
    radial-gradient(950px circle at 88% 12%, rgba(148, 163, 184, 0.32), transparent 58%),
    radial-gradient(1150px circle at 6% 52%, rgba(100, 116, 139, 0.28), transparent 60%),
    radial-gradient(1300px circle at 55% 108%, rgba(71, 85, 105, 0.26), transparent 58%),
    linear-gradient(170deg, #eef0f3 0%, #e2e5eb 45%, #ccd1d9 100%);
  background-attachment: fixed;
}
body.theme-daylight .aurora,
body.theme-daylight .grid-drift {
  display: none;
}
body.theme-daylight ::selection { background: rgba(168, 76, 110, 0.22); }

/* ============================================================
   Shell — .app becomes the floating rounded frame (matching the
   approved mockups exactly): centered, max-width, thick border,
   soft shadow, on the cream backdrop. .navbar becomes a full-height
   left sidebar inside it via flex stretch (the default align-items),
   NOT position:sticky - .app's overflow:hidden (needed to clip
   content to the rounded corners) makes .app itself the nearest
   scrolling ancestor for sticky's positioning math, so a sticky
   sidebar tracks .app's box instead of the true viewport and
   scrolls away instead of staying pinned (confirmed by testing:
   it disappeared entirely on scroll). Flex stretch sidesteps that
   - the sidebar's dark background simply grows to match the
   content column's height and scrolls with the page, same as
   every other element in the frame. No markup changes on this
   page: same elements, same IDs, same onclick handlers, only
   their layout role changes. (admin.html's staff-drawer/
   staff-drawer-tab are the one exception — see the note below.)
   ============================================================ */
html { height: 100%; overflow: hidden; }
body.theme-daylight {
  height: 100vh; margin: 0; padding: 0; box-sizing: border-box;
  overflow: hidden; display: flex;
}
/* Full-bleed app: edge meets edge, no floating frame. The app itself is
   transparent so the grey desktop gradient IS the content backdrop -
   white cards sit on grey with real shadows, and the frosted sidebar
   blurs the gradient behind it (true vibrancy). */
body.theme-daylight .app {
  flex: 1; width: 100%; height: 100%; min-height: 0; min-width: 0;
  display: flex;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

/* macOS-style sidebar: light frosted glass (Finder-sidebar vibrancy) over
   the window body, dark text, hairline divider. The blur is the one
   "expensive" filter kept on a permanently-visible surface - it's a
   static layer (no scroll behind it), so it composites once. */
/* Black rail in both modes - the deepest layer of the interface, so the
   grey content area and white cards step forward from it. The active
   page is the single white highlight on it. */
body.theme-daylight .navbar {
  position: static;
  height: 100%;
  width: 208px; flex-shrink: 0;
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 4px;
  padding: 16px 12px 20px;
  background: linear-gradient(180deg, #1b1c21 0%, #0d0e11 100%);
  border-bottom: none;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  overflow-y: auto;
}
/* Brand mark: lowercase "aegis" + a small accent dot, no image logo. */
body.theme-daylight .navbar-brand { padding: 4px 8px 16px; display: flex; align-items: center; gap: 8px; }
body.theme-daylight .navbar-brand img { display: none; }
body.theme-daylight .brand-text {
  -webkit-text-fill-color: #fff; color: #fff;
  background: none; letter-spacing: -0.01em; font-size: 1.15rem; font-weight: 800;
  display: flex; align-items: center; gap: 8px; text-transform: lowercase;
}
body.theme-daylight .brand-text small { display: none; }
body.theme-daylight .brand-text::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}

/* "General"/"Account" section labels */
body.theme-daylight .nav-section-label {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
  color: rgba(255, 255, 255, 0.35); padding: 14px 12px 8px;
}
body.theme-daylight .navbar-spacer { flex: 1; }

body.theme-daylight .navbar-links { flex-direction: column; align-items: stretch; gap: 2px; }
body.theme-daylight .navbar-links a {
  color: rgba(255, 255, 255, 0.62); padding: 9px 12px; border-radius: 9px;
  text-align: left; display: flex; align-items: center; gap: 11px;
  transition: background 0.15s, color 0.15s;
}
body.theme-daylight .navbar-links a svg { width: 16px; height: 16px; flex-shrink: 0; }
body.theme-daylight .navbar-links a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
/* Active page: the white highlight on the black rail. */
body.theme-daylight .navbar-links a.active {
  background: #fff; color: #14151a; border-color: transparent;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.6);
}

/* .who ("Signed in as X") isn't shown in the approved preview - kept in
   the DOM (aegis.js writes into it unconditionally) but visually hidden. */
body.theme-daylight .navbar-user { display: contents; }
body.theme-daylight .navbar-user .who { display: none; }
body.theme-daylight .navbar-user .btn-ghost {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 11px;
  background: none; border: none; color: rgba(255, 255, 255, 0.62);
  padding: 9px 12px; border-radius: 9px; font-size: 0.85rem; font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
body.theme-daylight .navbar-user .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
body.theme-daylight .navbar-user .btn-ghost svg { width: 16px; height: 16px; flex-shrink: 0; }
body.theme-daylight .navbar-user .btn-ghost:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }

/* .app-main (admin.html only) is the scroll container there: a normal
   flex child taking the remaining width, height:100% of the fixed
   .app box, overflow-y:auto so IT scrolls while .app (the bezel) never
   moves. Pages without an .app-main wrapper (staff/gates/events/enroll)
   have .page/.page-narrow directly inside the flex row instead, so the
   ">" child selector below gives THEM the scroll-container role
   instead - whichever one is the actual direct flex child of .app. */
body.theme-daylight .app-main { flex: 1; min-width: 0; height: 100%; overflow-y: auto; }
body.theme-daylight .app-main.shifted { margin-right: 340px; }
body.theme-daylight .page, body.theme-daylight .page-narrow {
  min-width: 0; margin-left: 0; max-width: none;
  /* Matches the approved preview's .main padding exactly (24/26/40). */
  padding: 24px 26px 40px;
}
body.theme-daylight .app > .page, body.theme-daylight .app > .page-narrow {
  flex: 1; height: 100%; overflow-y: auto;
}
/* Narrow pages (Enroll): the flex item still fills the row (so the scroll
   container spans the window), but its content is laid as a single
   centered 760px grid column - grid centers it without touching any
   child's own margins. */
body.theme-daylight .app > .page-narrow {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
  align-content: start;
}
body.theme-daylight .head-row { margin-bottom: 20px; }
body.theme-daylight .section-title { margin: 28px 0 12px; }
body.theme-daylight .section-title:first-of-type { margin-top: 0; }
body.theme-daylight .feed-empty { padding: 20px 22px; }

@media (max-width: 860px) {
  html { overflow: auto; }
  body.theme-daylight { height: auto; padding: 0; overflow: visible; }
  body.theme-daylight .app { height: auto; border-radius: 0; border: none; flex-direction: column; }
  body.theme-daylight .navbar { position: static; width: auto; height: auto; flex-direction: row; overflow-y: visible; }
  body.theme-daylight .app-main, body.theme-daylight .app > .page, body.theme-daylight .app > .page-narrow {
    height: auto; overflow-y: visible;
  }
  body.theme-daylight .navbar-links { flex-direction: row; }
  body.theme-daylight .navbar-user { margin-top: 0; flex-direction: row; border-top: none; padding-top: 0; }
}

/* ============================================================
   Cards, tables, modals, forms, buttons
   ============================================================ */
/* Cards get the same clay language as the tiles, dialed way down: a hairline
   inner top highlight + a two-layer neutral drop, so panels read as soft
   solid slabs on the cream page instead of flat outlined rectangles. */
body.theme-daylight .card {
  background: var(--panel-solid);
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(20, 24, 34, 0.06),
    0 14px 30px -14px rgba(20, 24, 34, 0.16);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.theme-daylight .card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(20, 24, 34, 0.06),
    0 18px 38px -14px rgba(20, 24, 34, 0.2);
}
body.theme-daylight .section-title::before { background: var(--pink-deep); opacity: 1; width: 3px; height: 15px; border-radius: 2px; }
body.theme-daylight .eyebrow { background: var(--panel-2); color: var(--dim); border-color: var(--border); }

body.theme-daylight input[type="text"], body.theme-daylight input[type="password"],
body.theme-daylight input[type="time"], body.theme-daylight input[type="search"],
body.theme-daylight input[type="email"], body.theme-daylight input[type="date"],
body.theme-daylight input[type="number"], body.theme-daylight input:not([type]),
body.theme-daylight input[type="file"], body.theme-daylight select, body.theme-daylight textarea {
  background: var(--panel-2); border-color: var(--border); color: var(--text);
}
body.theme-daylight input:focus, body.theme-daylight select:focus, body.theme-daylight textarea:focus {
  border-color: var(--pink-deep); box-shadow: 0 0 0 3px rgba(168, 76, 110, 0.14);
}
body.theme-daylight input[type="time"], body.theme-daylight input[type="date"], body.theme-daylight input[type="number"] { color-scheme: light; }
body.theme-daylight select option { background: #fff; color: var(--text); }

body.theme-daylight button, body.theme-daylight a.btn-primary, body.theme-daylight a.btn-outline, body.theme-daylight a.btn-ghost {
  font-family: var(--font-display);
}
/* Clay press: inner top highlight so the button reads as a molded solid,
   deeper tinted drop, and a real push-down on :active. */
body.theme-daylight .btn-primary {
  color: #fff; background: var(--grad-btn);
  box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.28), inset 0 -2px 3px rgba(0, 0, 0, 0.3), 0 10px 20px -8px rgba(23, 21, 18, 0.5);
  transition: transform 0.15s, box-shadow 0.15s;
}
body.theme-daylight .btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.28), inset 0 -2px 3px rgba(0, 0, 0, 0.3), 0 14px 28px -10px rgba(23, 21, 18, 0.55);
}
body.theme-daylight .btn-primary:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35), 0 4px 10px -6px rgba(23, 21, 18, 0.4);
}
body.theme-daylight .btn-primary:disabled { background: var(--faint); color: #fff; }
body.theme-daylight .btn-outline { color: var(--text); background: var(--panel-solid); border-color: var(--border); backdrop-filter: none; box-shadow: var(--shadow-card); }
body.theme-daylight .btn-outline:hover { background: var(--panel-2); border-color: var(--border-strong); box-shadow: var(--shadow-card); }
body.theme-daylight .btn-ghost { color: var(--dim); background: var(--panel-2); border-color: var(--border); box-shadow: none; }
body.theme-daylight .btn-ghost:hover { color: var(--text); background: var(--border); }
body.theme-daylight .btn-danger { background: var(--danger); box-shadow: 0 6px 16px rgba(161, 58, 82, 0.2); }
body.theme-daylight .btn-danger:hover:not(:disabled) { box-shadow: 0 10px 24px rgba(161, 58, 82, 0.28); }
body.theme-daylight .vista-btn { --vista-parchment: #fff; --vista-ink: #171512; --vista-ember: #a84c6e; border-color: var(--border); }

body.theme-daylight th, body.theme-daylight td { border-color: var(--hairline); }
body.theme-daylight tbody tr:hover { background: var(--panel-2); }
body.theme-daylight tbody tr.rowlink:hover { background: rgba(168, 76, 110, 0.08); }
body.theme-daylight tr.late-row { background: var(--danger-bg); }
body.theme-daylight tr.late-row td:first-child { border-left-color: var(--danger); }

body.theme-daylight .modal-overlay { background: rgba(28, 30, 36, 0.32); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); }
/* Glass sheet, not an outlined box: translucent white over the blurred
   overlay, hairline border, bright top rim. */
body.theme-daylight .modal {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 30px 70px rgba(20, 24, 34, 0.3);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
}
body.theme-daylight .modal-close { background: var(--panel-2); color: var(--dim); border-color: var(--border); }
body.theme-daylight .modal-close:hover { background: var(--border); color: var(--text); }

body.theme-daylight .status.ok { color: var(--success); }
body.theme-daylight .status.err { color: var(--danger); }
body.theme-daylight .status.warn { color: var(--warn); }
body.theme-daylight .status.info { color: var(--info); }

/* ---------- status flags: square tick + mono uppercase, no pill fill.
   Overrides .pill.ok/.err/.warn AND the .status-pill active/resigned
   variant used across admin.html + staff.html — the primitive nearly
   every "late/on-time/active/resigned" indicator on the site is built
   from, so one override retheme s all of them. .pill.brand/.dim (plain
   tags: employee code, department, gate id) are left as tinted chips —
   they're not a status judgement, so they keep a background fill. ---------- */
body.theme-daylight .pill.ok, body.theme-daylight .pill.err, body.theme-daylight .pill.warn,
body.theme-daylight .status-pill {
  background: none; border: none; padding: 0;
  font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
}
body.theme-daylight .pill.ok::before, body.theme-daylight .pill.err::before, body.theme-daylight .pill.warn::before,
body.theme-daylight .status-pill::before {
  content: ""; width: 7px; height: 7px; flex-shrink: 0;
}
body.theme-daylight .pill.ok, body.theme-daylight .status-pill.active { color: var(--success); }
body.theme-daylight .pill.ok::before, body.theme-daylight .status-pill.active::before { background: var(--success); }
body.theme-daylight .pill.err, body.theme-daylight .status-pill.resigned { color: var(--danger); }
body.theme-daylight .pill.err::before, body.theme-daylight .status-pill.resigned::before { background: var(--danger); }
body.theme-daylight .pill.warn { color: var(--warn); }
body.theme-daylight .pill.warn::before { background: var(--warn); }

body.theme-daylight .pill.brand { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
body.theme-daylight .pill.dim { background: var(--panel-2); color: var(--dim); border: 1px solid var(--border); }

body.theme-daylight .fmt-badge { background: none !important; border-width: 1.5px; }
body.theme-daylight tr.fmt-red   { background: rgba(161, 58, 82, 0.06); }
body.theme-daylight tr.fmt-amber { background: rgba(169, 121, 26, 0.07); }
body.theme-daylight tr.fmt-green { background: rgba(63, 110, 52, 0.06); }
body.theme-daylight tr.fmt-blue  { background: rgba(61, 79, 138, 0.07); }

/* ---------- activity feed: thin color stripe, not an icon-in-circle ---------- */
body.theme-daylight .activity-icon {
  width: 4px; height: 32px; border-radius: 2px; background: none;
}
body.theme-daylight .activity-icon svg { display: none; }
body.theme-daylight .activity-icon.ontime { background: var(--success); }
body.theme-daylight .activity-icon.late { background: var(--danger); }
body.theme-daylight .activity-icon.exit { background: var(--faint); }

/* ---------- topbar (search pill + chips + icon buttons) + greeting row,
   copied from the approved preview verbatim - the real site previously
   kept its old "Command Center" eyebrow + live clock header instead of
   this, which was the biggest structural gap from the mockup. ---------- */
body.theme-daylight .topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
/* Liquid-glass search: translucent white over the cream page, backdrop
   blur, a bright specular top edge (inset highlight) and a soft drop -
   reads as a lens of glass resting on the page rather than a flat field. */
body.theme-daylight .search-pill {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.28));
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 100px; padding: 9px 16px; max-width: 380px;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    inset 0 -1px 1px rgba(23, 21, 18, 0.04),
    0 8px 20px -10px rgba(23, 21, 18, 0.2);
  transition: box-shadow 0.2s, border-color 0.2s;
}
body.theme-daylight .search-pill:focus-within {
  border-color: rgba(168, 76, 110, 0.45);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    0 8px 22px -10px rgba(168, 76, 110, 0.35),
    0 0 0 3px rgba(168, 76, 110, 0.12);
}
body.theme-daylight .search-pill svg { width: 15px; height: 15px; color: var(--dim); flex-shrink: 0; }
body.theme-daylight .search-pill input { border: none; outline: none; background: none; font-family: var(--font-display); font-size: 0.84rem; width: 100%; color: var(--text); }
body.theme-daylight .chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
body.theme-daylight .chip {
  border: 1.5px solid var(--border); border-radius: 100px; padding: 6px 13px;
  font-size: 0.76rem; font-weight: 600; color: var(--dim); white-space: nowrap;
  cursor: pointer; background: none;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}
body.theme-daylight .chip:hover { background: var(--panel-2); color: var(--text); }
body.theme-daylight .chip:active { transform: scale(0.96); }
body.theme-daylight .chip.active {
  background: var(--text); color: #fff; border-color: var(--text);
  box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.22), 0 6px 14px -6px rgba(23, 21, 18, 0.55);
}
body.theme-daylight .topbar-icons { display: flex; gap: 8px; margin-left: auto; flex-shrink: 0; }
body.theme-daylight .icon-btn {
  width: 36px; height: 36px; border-radius: 50%; background: var(--panel-solid);
  border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center;
  color: var(--text); cursor: pointer; position: relative; padding: 0;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 4px 10px -4px rgba(23, 21, 18, 0.18);
  transition: transform 0.15s, box-shadow 0.15s;
}
body.theme-daylight .icon-btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 8px 16px -6px rgba(23, 21, 18, 0.26); }
body.theme-daylight .icon-btn:active { transform: translateY(0) scale(0.95); }
body.theme-daylight .icon-btn svg { width: 15px; height: 15px; }
body.theme-daylight .icon-btn .dot { position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); }
body.theme-daylight .icon-btn.avatar { background: var(--text); color: #fff; font-weight: 700; font-size: 0.8rem; }

body.theme-daylight .greet-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
body.theme-daylight .greet-row h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; }
body.theme-daylight .greet-row p { font-size: 0.85rem; color: var(--dim); margin: 0; max-width: 560px; line-height: 1.55; }

/* ---------- stat tiles: pastel fills replace the dark-glass + neon-accent look ----------
   Clay/puffy treatment: a soft inner highlight along the top edge, a faint
   inner shadow along the bottom to round off the puffiness, and an outer
   drop shadow tinted with the tile's own "-deep" accent (via --tile-deep,
   set per accent class below) instead of a flat neutral shadow - each tile
   casts a shadow in its own color, like a piece of colored clay/rubber. */
/* Watch-complication tiles: a vertical light-to-deep gradient of the
   tile's own color (lit from above), squircle radius, and the clay
   shadow stack - they read as physical colored buttons. */
body.theme-daylight .stat-tile {
  --tile-bg: var(--mustard);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tile-bg) 78%, #fff) 0%,
    var(--tile-bg) 48%,
    color-mix(in srgb, var(--tile-bg) 88%, #000) 100%);
  border: 1px solid rgba(255, 255, 255, 0.45); color: var(--text);
  border-radius: 18px;
  cursor: pointer;
  backdrop-filter: none;
  padding: 15px 16px;
  min-height: 118px;
  display: flex; flex-direction: column; align-items: flex-start;
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.65),
    inset 0 -12px 16px -10px rgba(23, 21, 18, 0.12),
    0 14px 24px -12px color-mix(in srgb, var(--tile-deep, var(--text)) 50%, transparent),
    0 3px 8px -2px color-mix(in srgb, var(--tile-deep, var(--text)) 28%, transparent);
}
/* The reference tile has no icon badge at all - number top-left, label
   under it, trend pinned to the bottom, sparkline floating top-right. */
body.theme-daylight .stat-tile .stat-icon { display: none !important; }
body.theme-daylight .stat-tile::after { content: none; }
/* Cursor-spotlight hover glow was tuned amber-on-dark; neutralize to a
   faint ink tint so it still works on solid pastel card fills. */
body.theme-daylight .card::before, body.theme-daylight .stat-tile::before {
  background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), rgba(23, 21, 18, 0.05), transparent 55%);
}
body.theme-daylight .stat-tile:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.65),
    inset 0 -12px 16px -10px rgba(23, 21, 18, 0.12),
    0 18px 30px -12px color-mix(in srgb, var(--tile-deep, var(--text)) 55%, transparent),
    0 4px 10px -2px color-mix(in srgb, var(--tile-deep, var(--text)) 32%, transparent);
}
/* Clay push-in on press - the tile squashes slightly and its shadow
   collapses, like pressing a soft solid. */
body.theme-daylight .stat-tile:active {
  transform: translateY(0) scale(0.985);
  box-shadow:
    inset 0 2px 6px rgba(23, 21, 18, 0.14),
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    0 4px 10px -6px color-mix(in srgb, var(--tile-deep, var(--text)) 35%, transparent);
}
body.theme-daylight .stat-tile .num { color: var(--text); font-size: 1.55rem; font-weight: 700; }
body.theme-daylight .stat-tile .label {
  color: rgba(23, 21, 18, 0.72);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; margin-top: 1px;
}
body.theme-daylight .stat-tile .stat-trend {
  margin-top: auto; padding-top: 8px;
  font-size: 0.66rem; font-weight: 700; font-family: var(--font-mono);
}
/* Total Attendance Records reuses .stat-tile but is a full-width summary
   card, not one of the five compact metric tiles - keep it roomier. */
body.theme-daylight #total-records-card { min-height: 0; padding: 18px 20px; }
/* Colors + order match the approved preview exactly: mustard=Enrolled,
   pink=Check-ins, olive=On Time, peach=Late, lavender=Gates. Numbers stay
   plain ink (not red/green) in every tile there - the card's own color
   carries the distinction, not the digits. --tile-deep feeds the clay
   shadow above with a matching tint per tile. */
body.theme-daylight .stat-tile.acc-violet { --tile-bg: var(--mustard); --tile-deep: var(--mustard-deep); }
body.theme-daylight .stat-tile.acc-blue { --tile-bg: var(--pink); --tile-deep: var(--pink-deep); }
body.theme-daylight .stat-tile.acc-amber { --tile-bg: var(--lavender); --tile-deep: var(--lavender-deep); }
body.theme-daylight .stat-tile.late { --tile-bg: var(--peach); --tile-deep: var(--peach-deep); }
body.theme-daylight .stat-tile.ontime { --tile-bg: var(--olive); --tile-deep: var(--olive-deep); }
body.theme-daylight .stat-trend.good { color: var(--success); }
body.theme-daylight .stat-trend.bad { color: var(--danger); }
body.theme-daylight .stat-trend.neutral { color: rgba(23, 21, 18, 0.5); }
body.theme-daylight .stat-icon {
  background: rgba(23, 21, 18, 0.08) !important; color: var(--text) !important;
  width: 30px; height: 30px;
}
body.theme-daylight .stat-icon svg { width: 15px; height: 15px; }
body.theme-daylight .stat-glow { display: none; }
/* Decorative mini-sparkline per tile, matching the approved mockup -
   purely decorative (not real trend data), so a plain low-opacity glyph
   in the tile's own text color is enough; no per-tile data wiring.
   Top-right (not bottom-right) so it never collides with the bottom-
   anchored .stat-trend text, which can wrap to a longer line. */
body.theme-daylight .stat-decor { position: absolute; right: 10px; top: 12px; width: 46px; height: 26px; color: var(--tile-deep, rgba(23, 21, 18, 0.4)); opacity: 0.55; z-index: 0; }
body.theme-daylight .stat-decor svg { width: 100%; height: 100%; }

/* ---------- calendar ---------- */
body.theme-daylight .cal-day:hover { background: var(--panel-2); }
body.theme-daylight .cal-day.today { border-color: var(--pink-deep); color: var(--pink-deep); }
body.theme-daylight .cal-day.selected { background: var(--text); color: #fff; box-shadow: none; }
body.theme-daylight .cal-nav button { background: var(--panel-2); border-color: var(--border); color: var(--dim); }
body.theme-daylight .cal-nav button:hover { background: var(--border); color: var(--text); }

/* ---------- rule swatches / avatars ---------- */
body.theme-daylight .avatar-fallback { background: var(--pink-deep); box-shadow: none; }
body.theme-daylight .avatar { border-color: var(--border); box-shadow: none; }
body.theme-daylight .change-photo-btn { background: var(--text); border-color: #fff; }

/* wov-chart-wrap's dark 24%/10%-opacity black gradient was meant to
   darken an already-dark card further for a trading-terminal look; on a
   white card it renders as a muddy gray box instead. */
body.theme-daylight .wov-chart-wrap {
  background: var(--panel-2);
  border: 1px solid var(--border);
}
/* Fixed literal, not var(--text): this tooltip is an inverted dark bubble
   by design (dark bg + white text) in light mode. Hovering the card it
   lives in redefines --text to a light value (readability for OTHER text
   inside the darkened card) - if this background read var(--text) too, it
   would inherit that redefinition and flip to a near-white bg while the
   title/rows below stay hardcoded white, i.e. white-on-white. */
body.theme-daylight .wov-tooltip {
  background: #191b1f; border-color: #191b1f; color: #fff;
  box-shadow: 0 8px 22px rgba(23, 21, 18, 0.25);
}
body.theme-daylight .wov-tooltip .wov-tip-title { color: #fff; }
body.theme-daylight .wov-tooltip .wov-tip-row { color: rgba(255, 255, 255, 0.7); }

/* ---------- live feed tiles / staff drawer / donut / chart panels:
   token-driven already via var(--success)/var(--danger)/var(--faint)/
   var(--border) inside admin.html's own <style> block, so they retheme
   automatically once those tokens are redefined above. Only the dark
   literal backgrounds need an explicit override. ---------- */
body.theme-daylight .feed-tile { background: #171512; }
body.theme-daylight .feed-empty { background: var(--panel-2); border-color: var(--border-strong); color: var(--dim); }
/* The drawer/tab's top offset was derived from --navbar-h (a short
   horizontal bar's rendered height, synced by JS from .navbar's actual
   bounding rect). .navbar is now a full-viewport-height sidebar, so that
   same JS would measure --navbar-h as ~100vh and push both elements
   off-screen. Override the positions directly instead of fighting the
   JS-set inline variable (inline style wins specificity over any
   stylesheet rule, so redefining --navbar-h here would not work). */
body.theme-daylight .staff-drawer {
  top: 0; height: 100vh;
  background: var(--panel-solid); border-left: 1px solid var(--border);
  box-shadow: -14px 0 44px rgba(23, 21, 18, 0.12); backdrop-filter: none;
}
body.theme-daylight .staff-drawer-tab {
  top: 50%; transform: translateY(-50%);
  background: var(--panel-solid); border-color: var(--border); color: var(--text); box-shadow: var(--shadow-card);
}
body.theme-daylight .staff-drawer-tab.open { transform: translateY(-50%); }
body.theme-daylight .staff-drawer-tab:hover { background: var(--text); color: #fff; box-shadow: var(--shadow-card); transform: translateY(-50%) scale(1.08); }

/* ---------- reduced motion: the clay press/lift micro-interactions above
   are pure polish - kill the movement (transforms/transitions) but keep
   the shadow styling itself, which is static. ---------- */
@media (prefers-reduced-motion: reduce) {
  body.theme-daylight .stat-tile, body.theme-daylight .chip, body.theme-daylight .icon-btn,
  body.theme-daylight .btn-primary, body.theme-daylight .search-pill { transition: none; }
  body.theme-daylight .stat-tile:hover, body.theme-daylight .stat-tile:active,
  body.theme-daylight .chip:active, body.theme-daylight .icon-btn:hover,
  body.theme-daylight .icon-btn:active, body.theme-daylight .btn-primary:hover:not(:disabled),
  body.theme-daylight .btn-primary:active:not(:disabled) { transform: none; }
}

/* ============================================================
   macOS-glass layer: focus rings, page transitions, density,
   glass drawer. Appended last so it wins equal-specificity ties.
   ============================================================ */

/* Keyboard focus: a real ring on everything interactive. :focus-visible
   only - mouse clicks don't paint rings, tab always does. */
body.theme-daylight :is(a, button, input, select, textarea, [tabindex], .chip):focus-visible {
  outline: 2px solid var(--pink-deep);
  outline-offset: 2px;
  border-radius: 6px;
}
body.theme-daylight .navbar-links a:focus-visible { outline-offset: -2px; }

/* ---------- page transitions (Mac-style content crossfade) ----------
   Enter: content area rises/fades in once per load, after the splash
   reveals the page. Leave: aegis.js adds .page-leave to <body> when a
   sidebar link is clicked, waits ~170ms, then navigates - the content
   dips out while the frame + sidebar stay planted, so switching pages
   feels like one window swapping views, not a full page reload. */
@keyframes dl-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
body.theme-daylight.aegis-ready .app-main,
body.theme-daylight.aegis-ready .app > .page,
body.theme-daylight.aegis-ready .app > .page-narrow {
  animation: dl-page-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.theme-daylight .app-main,
body.theme-daylight .app > .page,
body.theme-daylight .app > .page-narrow {
  transition: opacity 0.17s ease-in, transform 0.17s ease-in;
}
body.theme-daylight.page-leave .app-main,
body.theme-daylight.page-leave .app > .page,
body.theme-daylight.page-leave .app > .page-narrow {
  opacity: 0; transform: translateY(8px) scale(0.995);
}

/* ---------- density: same information, less chrome around it ---------- */
body.theme-daylight .page, body.theme-daylight .page-narrow { padding: 20px 24px 36px; }
body.theme-daylight .card { padding: 18px 20px; }
body.theme-daylight .greet-row { margin-bottom: 18px; }
body.theme-daylight .topbar { margin-bottom: 16px; }

/* ---------- staff drawer + floating tab: same glass as the sidebar ---------- */
body.theme-daylight .staff-drawer {
  background: rgba(248, 249, 251, 0.82);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  box-shadow: -14px 0 44px rgba(20, 24, 34, 0.18);
}
body.theme-daylight .staff-drawer-tab {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 10px 24px -8px rgba(20, 24, 34, 0.25);
}

/* ---------- reduced motion for everything this layer added ---------- */
@media (prefers-reduced-motion: reduce) {
  body.theme-daylight.aegis-ready .app-main,
  body.theme-daylight.aegis-ready .app > .page,
  body.theme-daylight.aegis-ready .app > .page-narrow { animation: none; }
  body.theme-daylight .app-main,
  body.theme-daylight .app > .page,
  body.theme-daylight .app > .page-narrow { transition: none; }
  body.theme-daylight .navbar-links a, body.theme-daylight .navbar-user .btn-ghost { transition: none; }
}

/* ============================================================
   Global search dropdown + notification panel (both injected/driven
   by JS; token-driven so they restyle themselves in dark mode).
   ============================================================ */
/* z-index alone on .search-results wasn't enough: cards further down the
   page (e.g. #rules-card) get their own stacking context from the
   stagger-in entrance animation's `transform`, which then competes with
   .search-results at the SAME ancestor stacking level and can paint on
   top of the middle of an open dropdown. Giving .search-pill its own
   stacking context (position + z-index here, not just on the child)
   isolates the dropdown so nothing else on the page can ever cut into it. */
body.theme-daylight .search-pill { position: relative; z-index: 60; }
body.theme-daylight .search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 70;
  background: var(--panel-solid); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 18px 44px -12px rgba(20, 24, 34, 0.35);
  padding: 6px; display: none; max-height: 340px; overflow-y: auto;
}
body.theme-daylight .search-results.open { display: block; }
body.theme-daylight .search-result {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 8px; cursor: pointer; font-size: 0.84rem; color: var(--text);
}
body.theme-daylight .search-result .sr-type {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--dim); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 6px; flex-shrink: 0; min-width: 62px; text-align: center;
}
body.theme-daylight .search-result .sr-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.theme-daylight .search-result.active, body.theme-daylight .search-result:hover { background: var(--panel-2); }
body.theme-daylight .search-empty { padding: 10px 12px; color: var(--dim); font-size: 0.8rem; }

body.theme-daylight .notif-wrap { position: relative; z-index: 60; }
body.theme-daylight .notif-panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: 330px; z-index: 70;
  background: var(--panel-solid); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 44px -12px rgba(20, 24, 34, 0.35);
  padding: 10px; display: none;
}
body.theme-daylight .notif-panel.open { display: block; }
body.theme-daylight .notif-head {
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--dim); padding: 4px 8px 8px;
}
body.theme-daylight .notif-row { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 8px; }
body.theme-daylight .notif-row:hover { background: var(--panel-2); }
body.theme-daylight .notif-stripe { width: 3px; align-self: stretch; border-radius: 2px; flex-shrink: 0; }
body.theme-daylight .notif-stripe.ontime { background: var(--success); }
body.theme-daylight .notif-stripe.late { background: var(--danger); }
body.theme-daylight .notif-stripe.exit { background: var(--faint); }
body.theme-daylight .notif-main { flex: 1; min-width: 0; }
body.theme-daylight .notif-name { font-size: 0.82rem; font-weight: 700; color: var(--text); }
body.theme-daylight .notif-meta { font-size: 0.7rem; color: var(--dim); margin-top: 1px; }
body.theme-daylight .notif-time { font-family: var(--font-mono); font-size: 0.7rem; color: var(--dim); white-space: nowrap; }
body.theme-daylight .notif-empty { padding: 16px; color: var(--dim); font-size: 0.8rem; text-align: center; }

/* Stat-modal headers put a Download CSV button top-right; keep it clear of
   the absolutely-positioned close (x) and keep the x on top. */
body.theme-daylight .modal-close { z-index: 6; }

/* ============================================================
   DARK MODE - body.theme-daylight.theme-dark, toggled from the
   topbar button (persisted in localStorage, seeded from
   prefers-color-scheme). Tokens flip here; the component rules
   above are token-driven, so most restyle themselves. Literal
   light-mode colors are overridden explicitly below.
   ============================================================ */
body.theme-daylight.theme-dark {
  --ink: #17181c;
  --ink-2: #131418;
  --panel: rgba(255, 255, 255, 0.04);
  --panel-solid: #1d1f24;
  --panel-2: #262830;
  --field: rgba(255, 255, 255, 0.05);
  --glass: rgba(255, 255, 255, 0.04);

  --border: #33363e;
  --border-strong: #4a4e59;
  --hairline: rgba(255, 255, 255, 0.09);

  --text: #f0f1f4;
  --dim: #a4a8b2;
  --faint: #5b5f6a;

  --success: #8fc47c;
  --success-bg: rgba(143, 196, 124, 0.14);
  --success-border: rgba(143, 196, 124, 0.35);
  --danger: #e37b93;
  --danger-bg: rgba(227, 123, 147, 0.14);
  --danger-border: rgba(227, 123, 147, 0.35);
  --warn: #d9a94a;
  --warn-bg: rgba(217, 169, 74, 0.14);
  --warn-border: rgba(217, 169, 74, 0.35);
  --info: #93a6e8;
  --info-bg: rgba(147, 166, 232, 0.14);
  --info-border: rgba(147, 166, 232, 0.35);

  --sky: #c76d92;
  --pink-deep: #c76d92;

  --grad-btn: linear-gradient(135deg, #f2f3f5 0%, #d3d6dd 100%);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 26px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
body.theme-daylight.theme-dark {
  color: var(--text);
  background-image:
    radial-gradient(1000px circle at var(--bgx, 72%) var(--bgy, 18%), rgba(199, 109, 146, 0.06), transparent 62%),
    radial-gradient(1400px circle at 15% 95%, rgba(147, 166, 232, 0.05), transparent 55%),
    linear-gradient(168deg, #1b1c21 0%, #141519 55%, #0f1013 100%);
}
/* sidebar: deeper again than the dark content backdrop */
body.theme-daylight.theme-dark .navbar {
  background: linear-gradient(180deg, rgba(15, 16, 19, 0.88) 0%, rgba(8, 9, 11, 0.92) 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}
body.theme-daylight.theme-dark .nav-section-label { color: rgba(255, 255, 255, 0.35); }
body.theme-daylight.theme-dark .navbar-links a { color: rgba(255, 255, 255, 0.62); }
body.theme-daylight.theme-dark .navbar-links a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
body.theme-daylight.theme-dark .navbar-links a.active { color: #14151a; } /* bg is var(--text) = near-white */
body.theme-daylight.theme-dark .navbar-user .btn-ghost { color: rgba(255, 255, 255, 0.62); }
body.theme-daylight.theme-dark .navbar-user .btn-ghost:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

/* topbar glass on dark */
body.theme-daylight.theme-dark .search-pill {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    0 8px 20px -10px rgba(0, 0, 0, 0.5);
}
body.theme-daylight.theme-dark .search-pill:focus-within {
  border-color: rgba(199, 109, 146, 0.5);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    0 8px 22px -10px rgba(199, 109, 146, 0.4),
    0 0 0 3px rgba(199, 109, 146, 0.15);
}
body.theme-daylight.theme-dark .chip.active { color: #14151a; }
body.theme-daylight.theme-dark .icon-btn {
  /* The later "liquid glass pass" below hardcoded this to an always-light
     gradient (rgba(255,255,255,0.55/0.22)) instead of a theme-aware token,
     so its icons (already correctly light-colored for dark mode) were
     rendering near-white on a near-white background - invisible. This
     block used to only patch box-shadow, trusting the background was
     still theme-aware; it no longer is, so the background needs patching
     here too. */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 4px 10px -4px rgba(0, 0, 0, 0.5);
}
body.theme-daylight.theme-dark .icon-btn:hover {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 8px 16px -6px rgba(0, 0, 0, 0.6);
}
body.theme-daylight.theme-dark .icon-btn.avatar { color: #14151a; }

/* buttons: --grad-btn flipped to a light gradient, so text goes dark */
body.theme-daylight.theme-dark .btn-primary { color: #14151a; }
body.theme-daylight.theme-dark .btn-primary:disabled { background: var(--faint); color: #14151a; }

/* cards + modals: dark slabs, hairline highlights instead of white rims.
   Same issue as .icon-btn above: the "liquid glass pass" further down
   hardcoded .card's background to an always-light gradient regardless of
   theme, so every card's own text (correctly light-colored for dark mode
   via var(--text)/var(--dim)) was sitting on a still-light card and
   reading as barely-there. This block used to only patch box-shadow. */
body.theme-daylight.theme-dark .card {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 14px 30px -14px rgba(0, 0, 0, 0.55);
}
body.theme-daylight.theme-dark .card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 18px 38px -14px rgba(0, 0, 0, 0.65);
}
body.theme-daylight.theme-dark .modal-overlay { background: rgba(0, 0, 0, 0.55); }
body.theme-daylight.theme-dark .modal {
  background: rgba(32, 34, 40, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 30px 70px rgba(0, 0, 0, 0.6);
}
body.theme-daylight.theme-dark .wov-tooltip {
  background: #0b0c0f; border-color: rgba(255, 255, 255, 0.16);
}
body.theme-daylight.theme-dark .staff-drawer {
  background: rgba(20, 21, 26, 0.88);
  box-shadow: -14px 0 44px rgba(0, 0, 0, 0.5);
}
body.theme-daylight.theme-dark .staff-drawer-tab {
  background: rgba(38, 40, 48, 0.8);
  border-color: rgba(255, 255, 255, 0.12); color: var(--text);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 10px 24px -8px rgba(0, 0, 0, 0.6);
}
body.theme-daylight.theme-dark .feed-empty { background: var(--panel-2); }
body.theme-daylight.theme-dark .search-results,
body.theme-daylight.theme-dark .notif-panel { box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.6); }

/* This used to read "tiles keep their light saturated fills in dark mode -
   they're the color pops - so everything on a tile must stay dark ink."
   True back when tiles had per-tile hue (mustard/pink/lavender/olive) -
   but those colors were later removed ("remove the colours of enrolled
   and other such tiles"), leaving tiles as plain neutral glass. Nobody
   came back to update this dark-ink assumption, so it was fighting the
   newer white-text rule further below (same specificity, this one lost
   on source order) while ALSO leaving the tile's own background stuck on
   its light-mode fill - the two bugs masked each other in the diff but
   compounded in the browser. Give the tile a real dark-glass background
   instead, and let the white-text rule below (now correct) stand alone. */
body.theme-daylight.theme-dark .stat-tile {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.1),
    inset 0 -10px 14px -10px rgba(0, 0, 0, 0.3),
    0 10px 18px -12px rgba(0, 0, 0, 0.45);
}
body.theme-daylight.theme-dark .stat-tile .stat-trend.good { color: var(--success); }
body.theme-daylight.theme-dark .stat-tile .stat-trend.bad { color: var(--danger); }
body.theme-daylight.theme-dark .stat-tile .stat-trend.neutral { color: var(--faint); }
body.theme-daylight.theme-dark .stat-tile .tr-date-sub { color: var(--faint); }

/* .rules-bar and .panel-block (admin.html's own components, defined in its
   inline <style>) never had dark-mode support at all - same always-light
   rgba(255,255,255,0.4) glass as the bugs above, just never patched even
   once. Their own light-mode border/shadow values stay put; only
   background+border need a dark counterpart. */
body.theme-daylight.theme-dark .rules-bar,
body.theme-daylight.theme-dark .panel-block {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ============================================================
   Liquid glass pass: cards, tiles, icon buttons, the primary CTA, and
   the sidebar's active-page highlight all move from solid fills to
   translucent blurred glass. Appended last so these win the equal-
   specificity ties against the solid versions defined earlier in this
   file, without having to touch those original rules in place.
   ============================================================ */
body.theme-daylight .card {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.32));
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    0 14px 30px -14px rgba(20, 24, 34, 0.18);
}
body.theme-daylight .card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    0 18px 38px -14px rgba(20, 24, 34, 0.22);
}
body.theme-daylight .icon-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.22));
  border: 1px solid rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
}
body.theme-daylight .btn-primary {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.22));
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    inset 0 -1px 1px rgba(23, 21, 18, 0.04),
    0 10px 20px -8px rgba(23, 21, 18, 0.2);
}
body.theme-daylight .btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    0 14px 28px -10px rgba(23, 21, 18, 0.28);
}
body.theme-daylight .btn-primary:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(23, 21, 18, 0.1), 0 4px 10px -6px rgba(23, 21, 18, 0.2);
}
/* Sidebar itself stays solid chrome - only the active-page marker becomes
   a frosted glass pill floating on that solid dark surface. */
body.theme-daylight .navbar-links a.active {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.1));
  backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 14px -6px rgba(0, 0, 0, 0.6);
}
body.theme-daylight.theme-dark .navbar-links a.active { color: #fff; }

/* Stat tiles: neutral glass, no per-tile hue, sized up so the three
   headline numbers carry more visual weight. */
body.theme-daylight .stat-tile {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.26));
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px; padding: 20px 18px; min-height: 172px;
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.75),
    inset 0 -10px 14px -10px rgba(20, 24, 34, 0.06),
    0 10px 18px -12px rgba(20, 24, 34, 0.14);
}
body.theme-daylight .stat-tile .num { color: var(--text); font-size: 1.85rem; }
body.theme-daylight .stat-tile .label { color: var(--dim); font-size: 0.66rem; letter-spacing: 0.05em; margin-top: 4px; }
body.theme-daylight.theme-dark .stat-tile .num { color: #fff; }
body.theme-daylight.theme-dark .stat-tile .label { color: rgba(255, 255, 255, 0.6); }

/* ============================================================
   Hover spotlight: hovering any .blurable section turns IT into black
   liquid glass and blurs every other .blurable section on the page.
   None of the elements marked .blurable are nested inside another
   .blurable, so the blur filter never doubles up through an ancestor.
   .is-hovered is toggled by Aegis.initHoverSpotlight() in aegis.js.
   ============================================================ */
body.theme-daylight .blurable { transition: filter 0.28s ease, transform 0.25s ease, box-shadow 0.25s ease; }
/* Subtle now (was blur(6px) saturate(0.8) - read as heavy/harsh). .group-
   active exempts siblings sharing a data-glass-group with the actually-
   hovered element (see Aegis.initHoverSpotlight) - e.g. hovering one
   tile in the Highlight Rules panel shouldn't blur the other tiles
   right next to it, only sections outside that panel. */
body.theme-daylight.spotlight-active .blurable:not(.is-hovered):not(.group-active) { filter: blur(0.4px) saturate(0.985); }

/* .pill-tile is deliberately excluded here - On Time/Late brighten their
   own hue on hover instead (see the .pill-tile.ontime/.late.is-hovered
   rules in admin.html), not this shared black-glass state. */
body.theme-daylight .stat-tile.is-hovered, body.theme-daylight .rules-bar.is-hovered,
body.theme-daylight .card.spot-dark.is-hovered, body.theme-daylight .search-pill.is-hovered,
body.theme-daylight .icon-btn.is-hovered, body.theme-daylight .btn-primary.is-hovered,
body.theme-daylight .staff-drawer-tab.is-hovered, body.theme-daylight .navbar.is-hovered,
body.theme-daylight .panel-block.is-hovered {
  background: linear-gradient(160deg, rgba(32, 33, 38, 0.85) 0%, rgba(8, 9, 11, 0.92) 100%) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(28px) saturate(180%) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 22px 46px -16px rgba(0, 0, 0, 0.55) !important;
  z-index: 6; position: relative;
}
body.theme-daylight .stat-tile.is-hovered, body.theme-daylight .card.is-hovered { transform: translateY(-3px); }
/* Generic cards (tables, forms - no dark-text styling): lift, don't darken.
   Still needs an actual background/border shift, not just a shadow tweak -
   a shadow-only change is nearly invisible against the solid white card
   background (see .card's own background: var(--panel-solid)), which read
   as "hover does nothing" even though .is-hovered was applied correctly. */
body.theme-daylight .card.spot-soft {
  transition: filter 0.28s ease, transform 0.25s ease, box-shadow 0.25s ease,
    background-color 0.25s ease, border-color 0.25s ease;
}
body.theme-daylight .card.spot-soft.is-hovered {
  /* var(--panel-2) (plain off-white) read as no change at all next to the
     rest of the site's dramatic black-glass hover - a visible tint instead,
     the same brand pink already used for table-row hover just below, mixed
     into the card's own base instead of a flat rgba (which would tint
     whatever page background shows through, not the card itself). */
  background: color-mix(in srgb, var(--panel-solid) 88%, var(--sky) 12%);
  border-color: var(--border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    0 22px 44px -16px rgba(20, 24, 34, 0.3);
}
body.theme-daylight .rules-bar.is-hovered, body.theme-daylight .search-pill.is-hovered,
body.theme-daylight .icon-btn.is-hovered, body.theme-daylight .btn-primary.is-hovered,
body.theme-daylight .staff-drawer-tab.is-hovered, body.theme-daylight .panel-block.is-hovered { transform: translateY(-1px); }

body.theme-daylight .stat-tile.is-hovered .num { color: #fff; }
body.theme-daylight .stat-tile.is-hovered .label { color: rgba(255, 255, 255, 0.6); }
body.theme-daylight .rules-bar.is-hovered .rules-title { color: #fff; }
body.theme-daylight .rules-bar.is-hovered .rules-sub, body.theme-daylight .rules-bar.is-hovered .rule-count { color: rgba(255, 255, 255, 0.55); }
body.theme-daylight .rules-bar.is-hovered .rules-left svg { color: #ffb199; }
body.theme-daylight .rules-bar.is-hovered .rule-note { color: #ff8fa8; }
body.theme-daylight .card.spot-dark.is-hovered h2, body.theme-daylight .card.spot-dark.is-hovered .card-head h2 { color: #fff; }
body.theme-daylight .card.spot-dark.is-hovered .card-sub, body.theme-daylight .card.spot-dark.is-hovered .sheet-date,
body.theme-daylight .card.spot-dark.is-hovered .note, body.theme-daylight .card.spot-dark.is-hovered .hint { color: rgba(255, 255, 255, 0.55); }
body.theme-daylight .card.spot-dark.is-hovered .chart-wrap, body.theme-daylight .card.spot-dark.is-hovered .wov-chart-wrap {
  background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14);
}
body.theme-daylight .card.spot-dark.is-hovered .donut-stat .pct, body.theme-daylight .card.spot-dark.is-hovered .checkedin-name { color: #fff; }
body.theme-daylight .card.spot-dark.is-hovered .donut-stat .dot-label, body.theme-daylight .card.spot-dark.is-hovered .checkedin-time,
body.theme-daylight .card.spot-dark.is-hovered .checkedin-meta { color: rgba(255, 255, 255, 0.65); }
body.theme-daylight .card.spot-dark.is-hovered .checkedin-avatar { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.8); }
body.theme-daylight .card.spot-dark.is-hovered .checkedin-row { border-bottom-color: rgba(255, 255, 255, 0.14); }
body.theme-daylight .card.spot-dark.is-hovered .cal-btn { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.24); color: #fff; }
/* Dark-safe palette for whatever else lives inside a spot-dark card (Day
   Sheet's table/toolbar, the Calendar grid) - rather than chasing every
   individual selector (table cells, pill badges, labels...), redefine the
   custom properties they already read (--text/--dim/--faint,
   --success/danger/warn/info + their -bg/-border pairs) so the cascade
   carries every descendant to a readable value automatically. Values are
   the exact same ones already designed and shipped for
   body.theme-daylight.theme-dark, not new colors invented for this. Cards
   with their own specific overrides above (donut-stat, checkedin-*) are
   unaffected - those are literal colors, not var()-driven, so they still
   win outright. --grad-btn is deliberately left alone: it stays the
   default dark gradient, which is what keeps .cal-day.selected's hardcoded
   white text readable. */
body.theme-daylight .card.spot-dark.is-hovered {
  /* html/body sets color:var(--text) exactly once, at the top - table
     cells and other plain text below never re-declare it themselves, so
     they were inheriting body's already-resolved LIGHT --text straight
     through this element, unaffected by redefining the custom property
     here alone. Setting color itself (not just the variable) makes this
     card the new nearest ancestor actually assigning it, so inheritance
     carries the dark value the rest of the way down. */
  color: var(--text);
  --panel-solid: #1d1f24;
  --panel-2: #262830;
  --border: #33363e;
  --border-strong: #4a4e59;
  --hairline: rgba(255, 255, 255, 0.09);
  --text: #f0f1f4;
  --dim: #a4a8b2;
  --faint: #5b5f6a;
  --sky: #c76d92;
  --success: #8fc47c;
  --success-bg: rgba(143, 196, 124, 0.14);
  --success-border: rgba(143, 196, 124, 0.35);
  --danger: #e37b93;
  --danger-bg: rgba(227, 123, 147, 0.14);
  --danger-border: rgba(227, 123, 147, 0.35);
  --warn: #d9a94a;
  --warn-bg: rgba(217, 169, 74, 0.14);
  --warn-border: rgba(217, 169, 74, 0.35);
  --info: #93a6e8;
  --info-bg: rgba(147, 166, 232, 0.14);
  --info-border: rgba(147, 166, 232, 0.35);
}
body.theme-daylight .icon-btn.is-hovered, body.theme-daylight .btn-primary.is-hovered,
body.theme-daylight .staff-drawer-tab.is-hovered { color: #fff; }

/* .panel-block (mini Today's Breakdown / mini Checked In, nested inside the
   glass-panel) reuses the same dark-text-safety treatment as .card.spot-dark
   once Aegis.initHoverSpotlight() turns it black - same descendant classes
   (.donut-stat, .checkedin-*, .cal-btn), different ancestor. */
body.theme-daylight .panel-block.is-hovered .panel-block-head h3 { color: #fff; }
body.theme-daylight .panel-block.is-hovered .card-sub { color: rgba(255, 255, 255, 0.55); }
body.theme-daylight .panel-block.is-hovered .donut-stat .pct, body.theme-daylight .panel-block.is-hovered .checkedin-name { color: #fff; }
/* SVG text uses fill, not color - donut-center-label was missing entirely
   from this list, so the ring's own percentage stayed dark-on-black
   (barely visible) the moment its panel-block went black on hover. */
body.theme-daylight .panel-block.is-hovered .donut-center-label { fill: #fff; }
/* The backdrop is only there to guarantee contrast in the default state -
   on hover the label is already white directly against the black glass, so
   disable it rather than leaving a stray white disc on a black card. */
body.theme-daylight .panel-block.is-hovered .donut-backdrop { fill: none; }
/* .cal-day.selected reuses --text as its own BACKGROUND (a dark-filled
   circle on a light card) with a hardcoded white label - flipping --text
   to a light value for the black-glass hover state above turns that into
   a light circle with hardcoded-white (now invisible) text. Mirror the
   same idea instead: a bright circle on the now-dark card. */
body.theme-daylight .card.spot-dark.is-hovered .cal-day.selected,
body.theme-daylight .panel-block.is-hovered .cal-day.selected { background: #fff; color: #14151a; }
body.theme-daylight .panel-block.is-hovered .donut-stat .dot-label, body.theme-daylight .panel-block.is-hovered .checkedin-time,
body.theme-daylight .panel-block.is-hovered .checkedin-meta { color: rgba(255, 255, 255, 0.65); }
body.theme-daylight .panel-block.is-hovered .checkedin-avatar { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.8); }
body.theme-daylight .panel-block.is-hovered .checkedin-row { border-bottom-color: rgba(255, 255, 255, 0.14); }
body.theme-daylight .panel-block.is-hovered .cal-btn { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.24); color: #fff; }
body.theme-daylight .panel-block.is-hovered .checkedin-row:hover { background: rgba(255, 255, 255, 0.08); }

@media (prefers-reduced-motion: reduce) {
  body.theme-daylight .blurable { transition: none; }
}