/* ════════════════════════════════════════════════════════════════
   MIDNIGHT GLASS  (ui.css)
   Design system for the booking and partner-bidding platform.
   Built on the Midnight Glass kit (2026-07); accent = emerald.
   Direction: Soft-depth Glass × Luxury Dark × Cinematic.
   Every surface is luminous glass floating over photography.

   Tokens → primitives → components → views. No framework.
   ONE-VARIABLE ACCENT: every accent tint derives from --volt via
   color-mix — flip html[data-accent="teal"] (or ?accent=teal) and
   the whole system follows. Amber = live/money moments only.
   Status chips = semantic glow, independent of the accent.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ink + fog */
  --ink: #07080b;
  --panel: rgba(14, 16, 22, 0.72);
  --fog: #f4f3f0;
  --fog-70: rgba(244, 243, 240, 0.70);
  --fog-50: rgba(244, 243, 240, 0.50);
  --fog-30: rgba(244, 243, 240, 0.30);

  /* volt accent (one-variable system: --volt drives everything) — sky */
  --volt: #34d399;
  --volt-hi: #6ee7b7;   /* gradient light end (solid buttons) — emerald, like --volt. These two were still the */
  --volt-lo: #10b981;   /* cloned system's sky blue until 4 October 2026, so every solid button was blue. */
  --volt-ink: #04261a;  /* text on solid accent */
  --volt-soft: color-mix(in srgb, var(--volt) 14%, transparent);
  --volt-glow: color-mix(in srgb, var(--volt) 32%, transparent);
  --amber: #e8c47a;
  --amber-glow: rgba(232, 196, 122, 0.35);

  /* glass */
  --glass: rgba(255, 255, 255, 0.045);
  --glass-2: rgba(255, 255, 255, 0.085);
  --stroke: rgba(255, 255, 255, 0.09);
  --stroke-2: rgba(255, 255, 255, 0.18);

  /* status */
  --ok: #5eead4;
  --good: #4ade80;
  --warn: #fbbf24;
  --bad: #fb7185;
  --info: #7db8ff;
  --viol: #c4b5fd;

  /* geometry + depth */
  --r: 18px;
  --r-lg: 24px;
  --pill: 999px;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.35);
  --glow: 0 0 30px color-mix(in srgb, var(--volt) 18%, transparent);

  --font-d: 'Plus Jakarta Sans', 'Poppins', sans-serif;  /* display font */
  --font-b: 'Inter', sans-serif;
}

/* ───────────────────────── base ───────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ink);
  color: var(--fog);
  font-family: var(--font-b);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4 { font-family: var(--font-d); letter-spacing: -0.02em; margin: 0; }
a { color: inherit; }
::selection { background: color-mix(in srgb, var(--volt) 30%, transparent); color: #fff; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(244, 243, 240, 0.14); border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: rgba(244, 243, 240, 0.26); }
::-webkit-scrollbar-track { background: transparent; }

/* ─────────────────── ambient photography layer ───────────────────
   The whole app sits on imagery. A fixed stack: aerial-city photo,
   tinted to near-black, with volt + amber aurora glows breathing on top. */
#ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1200px 600px at 82% -8%, color-mix(in srgb, var(--volt) 10%, transparent) 0%, transparent 60%),
    radial-gradient(900px 500px at -6% 105%, rgba(232, 196, 122, 0.06) 0%, transparent 55%),
    linear-gradient(180deg, rgba(7, 8, 11, 0.88) 0%, rgba(7, 8, 11, 0.93) 55%, rgba(7, 8, 11, 0.97) 100%),
    url('images/brand/bg-aerial-city.webp') center / cover no-repeat var(--ink);
}
#ambient::after { /* slow breathing glow */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(800px 420px at 60% 30%, color-mix(in srgb, var(--volt) 7%, transparent) 0%, transparent 65%);
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* dashboard-only full-bleed film layer (JS toggles .on per route) */
#film {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1s ease;
}
#film.on { opacity: 1; }
#film video, #film img.poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
#film::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 8, 11, 0.72) 0%, rgba(7, 8, 11, 0.46) 45%, rgba(7, 8, 11, 0.30) 100%),
    linear-gradient(180deg, rgba(7, 8, 11, 0.26) 0%, rgba(7, 8, 11, 0.44) 60%, rgba(7, 8, 11, 0.80) 100%);
}

/* ───────────────────────── glass primitive ───────────────────────── */
.glass {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.glass::before { /* gradient-glow edge */
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--volt) 28%, transparent) 0%, transparent 30%, transparent 65%, rgba(244, 243, 240, 0.14) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.glass.lift { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.glass.lift:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--volt) 25%, transparent);
  box-shadow: var(--shadow-sm), var(--glow);
}
.glass.lift:hover::before { opacity: 1; }

/* photo-backed card: <div class="glass photo" style="--photo:url(...)">
   The brand shots are bright daylight, so the scrim runs heavier than night
   photography would need. */
.glass.photo {
  background:
    linear-gradient(120deg, rgba(9, 11, 16, 0.74) 0%, rgba(9, 11, 16, 0.58) 55%, rgba(9, 11, 16, 0.40) 100%),
    var(--photo) center / cover no-repeat var(--ink);
}

/* ───────────────────────── app frame ───────────────────────── */
#app { position: relative; z-index: 1; display: none; }
#app.on { display: block; }

/* floating glass rail */
#rail {
  position: fixed; left: 16px; top: 16px; bottom: 16px; width: 232px; z-index: 40;
  display: flex; flex-direction: column;
  padding: 22px 14px 16px;
  background:
    linear-gradient(180deg, rgba(13, 15, 21, 0.66) 0%, rgba(9, 11, 15, 0.78) 100%),
    url('images/brand/bg-dark-glass.webp') center / cover no-repeat;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
#rail .logo { display: flex; align-items: center; gap: 10px; padding: 2px 10px 18px; }
#rail .logo img { height: 22px; display: block; filter: brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0, 0, 0, 0.6)); }
/* the product's (or the brand's) name is live text beside the mark, so a rename is one setting */
.wm { font-family: var(--font-d); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fog); font-size: 14px; line-height: 1; }
.nm-sep:not(:empty)::after { content: ' · '; }
#login .lgw { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 12px; min-height: 34px; }
#login .lgw img.lg { margin-bottom: 0; }
#login .lgw .wm { font-size: 22px; }
#rail .logo .sys { font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em; color: var(--fog-30); text-transform: uppercase; margin-top: 3px; }
#rail .group { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fog-30); padding: 14px 12px 6px; }
#rail nav { flex: 1; overflow-y: auto; }
.rl {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; margin: 2px 0;
  border-radius: 13px; cursor: pointer;
  color: var(--fog-70); font-weight: 500; font-size: 13.5px;
  text-decoration: none; border: 1px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.rl svg { width: 17px; height: 17px; stroke-width: 1.8; opacity: 0.75; transition: opacity 0.2s; flex-shrink: 0; }
.rl:hover { background: rgba(255, 255, 255, 0.05); color: var(--fog); }
.rl:hover svg { opacity: 1; }
.rl.on {
  background: linear-gradient(120deg, color-mix(in srgb, var(--volt) 14%, transparent) 0%, color-mix(in srgb, var(--volt) 5%, transparent) 100%);
  border-color: color-mix(in srgb, var(--volt) 25%, transparent);
  color: #fff;
  box-shadow: 0 0 18px color-mix(in srgb, var(--volt) 12%, transparent), inset 0 0 14px color-mix(in srgb, var(--volt) 5%, transparent);
}
.rl.on svg { opacity: 1; stroke: var(--volt); }
.rl .count { margin-left: auto; font-size: 10.5px; font-weight: 700; background: color-mix(in srgb, var(--volt) 16%, transparent); color: var(--volt); border-radius: var(--pill); padding: 2px 8px; }
#rail .foot { border-top: 1px solid var(--stroke); padding-top: 12px; margin-top: 10px; }
#rail .user { display: flex; align-items: center; gap: 10px; padding: 6px 10px; }
#rail .user .av {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; font-family: var(--font-d); color: var(--ink);
  background: linear-gradient(135deg, #f4f3f0, #b9c6d8);
  box-shadow: 0 0 14px rgba(244, 243, 240, 0.18);
}
#rail .user .nm { font-size: 13px; font-weight: 600; line-height: 1.2; }
#rail .user .rl-role { font-size: 10.5px; color: var(--fog-40, var(--fog-30)); }
#rail .user button { margin-left: auto; background: none; border: none; color: var(--fog-30); cursor: pointer; padding: 6px; border-radius: 9px; }
#rail .user button:hover { color: var(--bad); background: rgba(251, 113, 133, 0.08); }

/* main column */
#main { margin-left: 264px; padding: 16px 20px 40px 4px; min-height: 100vh; }

/* floating top bar */
#topbar {
  position: sticky; top: 16px; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  margin-bottom: 22px;
  border-radius: var(--r);
}
#topbar .search {
  flex: 1; max-width: 460px; display: flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--stroke);
  border-radius: var(--pill); padding: 8px 16px;
  color: var(--fog-50); cursor: text; font-size: 13px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#topbar .search:hover, #topbar .search:focus-within { border-color: color-mix(in srgb, var(--volt) 35%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--volt) 10%, transparent); }
#topbar .search svg { width: 14px; height: 14px; opacity: 0.6; }
#topbar .search input { flex: 1; background: none; border: none; outline: none; color: var(--fog); font: inherit; }
#topbar .search kbd {
  font-family: var(--font-b); font-size: 10px; color: var(--fog-30);
  border: 1px solid var(--stroke); border-radius: 6px; padding: 2px 6px;
}
#topbar .spacer { flex: 1; }
.sync {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fog-50); padding: 7px 14px;
  border: 1px solid var(--stroke); border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.04);
}
.sync .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px var(--good); animation: pulse 2.4s ease-in-out infinite; }
.sync.local .dot { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.sync.demo .dot { background: var(--viol); box-shadow: 0 0 10px var(--viol); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ───────────────────────── buttons ───────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-d); font-weight: 600; font-size: 13.5px;
  padding: 11px 22px; border-radius: var(--pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s;
  white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; stroke-width: 2; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-volt {
  background: linear-gradient(135deg, var(--volt-hi) 0%, var(--volt-lo) 100%);
  color: var(--volt-ink);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--volt) 30%, transparent);
}
.btn-volt:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 34px color-mix(in srgb, var(--volt) 45%, transparent); }
.btn-glass {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--stroke-2);
  color: var(--fog);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-glass:hover:not(:disabled) { transform: translateY(-2px); border-color: color-mix(in srgb, var(--volt) 40%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--volt) 14%, transparent); }
.btn-ghost { background: none; color: var(--fog-50); }
.btn-ghost:hover:not(:disabled) { color: var(--fog); }
.btn-danger { background: rgba(251, 113, 133, 0.12); border-color: rgba(251, 113, 133, 0.35); color: var(--bad); }
/* Reset / clear-filter buttons — solid red pill so they stand out */
.btn-reset { background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 700; box-shadow: 0 6px 20px color-mix(in srgb, var(--bad) 32%, transparent); }
.btn-reset:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 30px color-mix(in srgb, var(--bad) 48%, transparent); filter: brightness(1.06); }
/* Back buttons — volt-tinted pill so they're clearly visible */
.btn-back { background: color-mix(in srgb, var(--volt) 16%, transparent); border-color: color-mix(in srgb, var(--volt) 52%, transparent); color: var(--volt); font-weight: 700; }
.btn-back:hover:not(:disabled) { transform: translateY(-2px); background: color-mix(in srgb, var(--volt) 26%, transparent); box-shadow: 0 8px 22px color-mix(in srgb, var(--volt) 22%, transparent); }
.btn-sm { padding: 7px 15px; font-size: 12.5px; }

/* ───────────────────────── status chips ─────────────────────────
   Glowing, semantic. <span class="chip c-pending">Pending</span> */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em;
  padding: 4px 12px; border-radius: var(--pill);
  border: 1px solid; white-space: nowrap;
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
.c-pending   { color: var(--warn); border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.08); }
.c-assigned  { color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); background: color-mix(in srgb, var(--info) 8%, transparent); }
.c-transit   { color: var(--ok);   border-color: rgba(94, 234, 212, 0.35); background: rgba(94, 234, 212, 0.08); }
.c-delivered { color: var(--good); border-color: rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.08); }
.c-invoiced  { color: var(--viol); border-color: rgba(196, 181, 253, 0.35); background: rgba(196, 181, 253, 0.08); }
.c-cancelled { color: var(--bad);  border-color: rgba(251, 113, 133, 0.35); background: rgba(251, 113, 133, 0.08); }
.c-paid      { color: var(--good); border-color: rgba(74, 222, 128, 0.40); background: rgba(74, 222, 128, 0.10); }
.c-awaiting  { color: var(--amber); border-color: rgba(232, 196, 122, 0.40); background: rgba(232, 196, 122, 0.09); }
.c-new       { color: var(--volt); border-color: color-mix(in srgb, var(--volt) 40%, transparent); background: color-mix(in srgb, var(--volt) 10%, transparent); }

/* ───────────────────────── inputs ───────────────────────── */
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog-50); }
.fld input, .fld select, .fld textarea {
  font: inherit; color: var(--fog);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--stroke);
  border-radius: 13px; padding: 11px 14px;
  outline: none; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.fld input:focus, .fld select:focus, .fld textarea:focus {
  border-color: color-mix(in srgb, var(--volt) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--volt) 12%, transparent), 0 0 18px color-mix(in srgb, var(--volt) 10%, transparent);
  background: rgba(255, 255, 255, 0.07);
}
.fld select option { background: #12151d; color: var(--fog); }
.fld textarea { resize: vertical; min-height: 80px; }

/* ───────────────────────── page header band ─────────────────────────
   <header class="band" style="--photo:url(...)"> — a photo per section */
.band {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--stroke);
  padding: 30px 30px 26px;
  margin-bottom: 20px;
  background:
    linear-gradient(95deg, rgba(7, 8, 11, 0.78) 0%, rgba(7, 8, 11, 0.50) 45%, rgba(7, 8, 11, 0.24) 100%),
    var(--photo) center / cover no-repeat var(--ink);
  box-shadow: var(--shadow-sm);
}
.band .kick { font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--volt); text-shadow: 0 0 14px var(--volt-glow); margin-bottom: 8px; }
.band h1 { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; color: #fff; }
.band .sub { color: var(--fog-70); font-size: 13.5px; margin-top: 4px; }
.band .stats { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.band .bstat {
  background: rgba(10, 12, 17, 0.45);
  border: 1px solid var(--stroke-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 12px; padding: 7px 16px;
  font-size: 12.5px; color: var(--fog-70);
}
.band .bstat b { color: #fff; font-family: var(--font-d); font-size: 15px; margin-right: 5px; }
.band .actions { position: absolute; right: 26px; top: 26px; display: flex; gap: 9px; }

/* compact photo hero for the view-booking modal — van pic + overlaid pills */
.bkhero {
  position: relative; overflow: hidden;
  border-radius: 16px;
  padding: 16px 18px 14px; margin-bottom: 14px; min-height: 140px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background:
    linear-gradient(180deg, rgba(7, 8, 11, 0.10) 0%, rgba(7, 8, 11, 0.42) 50%, rgba(7, 8, 11, 0.96) 100%),
    var(--photo) center / cover no-repeat var(--ink);
}
.bkhero .kick { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--volt); text-shadow: 0 0 14px var(--volt-glow); }
.bkhero h2 { font-size: 21px; font-weight: 700; color: #fff; margin: 4px 0 11px; }
.bkhero .pills { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.bkhero .hpill {
  background: rgba(10, 12, 17, 0.5); border: 1px solid var(--stroke-2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: var(--pill); padding: 4px 12px; font-size: 11.5px; font-weight: 600; color: #fff;
}
.bkhero .hclose {
  position: absolute; top: 12px; right: 12px; font-size: 16px; padding: 3px 9px;
  background: rgba(10, 12, 17, 0.5); border: 1px solid var(--stroke-2); color: #fff;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

/* ───────────────────────── KPI cards ───────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.kpi { padding: 20px 22px; overflow: hidden; }
.kpi .ic {
  width: 34px; height: 34px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--volt-soft); margin-bottom: 14px;
  box-shadow: 0 0 16px color-mix(in srgb, var(--volt) 15%, transparent);
}
.kpi .ic svg { width: 17px; height: 17px; stroke: var(--volt); stroke-width: 1.9; }
.kpi .ic.money { background: rgba(232, 196, 122, 0.12); box-shadow: 0 0 16px var(--amber-glow); }
.kpi .ic.money svg { stroke: var(--amber); }
.kpi .num { font-family: var(--font-d); font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .lbl { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fog-50); margin-top: 5px; }
.kpi .delta { font-size: 11.5px; margin-top: 8px; color: var(--fog-50); }
.kpi .delta b { color: var(--good); }

/* ───────────────────────── glass table ───────────────────────── */
.tbl-wrap { overflow-x: auto; border-radius: var(--r); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl thead th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fog-50); padding: 13px 16px;
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid var(--stroke);
  white-space: nowrap;
}
.tbl tbody td { padding: 13px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: var(--fog-70); white-space: nowrap; }
.tbl tbody tr { cursor: pointer; transition: background 0.18s; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--volt) 5%, transparent); }
.tbl tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--volt); }
.tbl .ref { font-weight: 700; color: #fff; font-family: var(--font-d); font-size: 12.5px; letter-spacing: 0.02em; }
.tbl .money { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--fog); }
/* ref cell that also carries badges/tags — keep the job number and its chips on one
   baseline with even spacing instead of a cramped single literal space */
.tbl td.refcell .refwrap { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tbl td.refcell .refno { font-weight: 700; color: #fff; font-family: var(--font-d); font-size: 12.5px; letter-spacing: 0.02em; }
.tbl td.refcell .rep { color: var(--volt); font-size: 13px; line-height: 1; }
/* clickable sortable column headers */
.tbl th.th-sort { user-select: none; cursor: pointer; }
.tbl th.th-sort:hover { color: var(--fog); }
.tbl th.th-sort.on { color: var(--volt); }
.tbl th .sarr { font-size: 10px; margin-left: 2px; }
.tbl th .sarr.sarr-dim { opacity: 0.22; }
.tbl th.th-sort:hover .sarr.sarr-dim { opacity: 0.5; }

/* ───────────────────────── list rows (runs / activity) ───────────────────────── */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer; transition: background 0.18s; border-radius: 10px;
}
.row:last-child { border-bottom: none; }
.row:hover { background: color-mix(in srgb, var(--volt) 5%, transparent); }
.row .t1 { font-weight: 600; color: var(--fog); font-size: 13.5px; }
.row .t2 { font-size: 12px; color: var(--fog-50); margin-top: 1px; }
.row .end { margin-left: auto; text-align: right; flex-shrink: 0; }

/* activity feed */
.feed { position: relative; padding-left: 10px; }
.feed .ev { position: relative; display: flex; gap: 13px; padding: 10px 6px; }
.feed .ev::before {
  content: ''; position: absolute; left: 16px; top: 34px; bottom: -6px;
  width: 1px; background: linear-gradient(180deg, color-mix(in srgb, var(--volt) 25%, transparent), transparent);
}
.feed .ev:last-child::before { display: none; }
.feed .ic {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--volt) 10%, transparent); border: 1px solid color-mix(in srgb, var(--volt) 30%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--volt) 15%, transparent);
}
.feed .ic svg { width: 12px; height: 12px; stroke: var(--volt); stroke-width: 2; }
.feed .tx { font-size: 12.5px; color: var(--fog-70); line-height: 1.45; }
.feed .tx b { color: var(--fog); font-weight: 600; }
.feed .ago { font-size: 10.5px; color: var(--fog-30); margin-top: 2px; }

/* ───────────────────────── section heads / panels ───────────────────────── */
.panel { padding: 18px 20px; }
.panel-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.panel-h h3 { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fog-50); }
.panel-h .more { margin-left: auto; font-size: 12px; color: var(--volt); cursor: pointer; text-decoration: none; }
.panel-h .more:hover { text-shadow: 0 0 12px var(--volt-glow); }

/* quick-action tiles */
.qa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.qa {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  padding: 18px; cursor: pointer; text-decoration: none;
}
.qa svg { width: 20px; height: 20px; stroke: var(--volt); stroke-width: 1.8; filter: drop-shadow(0 0 8px var(--volt-glow)); }
.qa .t { font-family: var(--font-d); font-weight: 600; font-size: 13.5px; color: var(--fog); }
.qa .d { font-size: 11.5px; color: var(--fog-50); margin-top: -7px; }

/* ───────────────────────── login ───────────────────────── */
#login {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  background:
    linear-gradient(160deg, rgba(7, 8, 11, 0.62) 0%, rgba(7, 8, 11, 0.38) 50%, rgba(7, 8, 11, 0.70) 100%),
    url('images/brand/hero-livingroom.webp') center / cover no-repeat var(--ink);
  overflow: hidden;
}
#login.on { display: flex; }
#login .zoom { position: absolute; inset: -4%; background: inherit; animation: kenburns 26s ease-in-out infinite alternate; z-index: -1; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
#login .card {
  width: min(400px, calc(100vw - 40px));
  padding: 42px 38px 34px;
  border-radius: var(--r-lg);
  background: rgba(12, 14, 19, 0.55);
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  border: 1px solid var(--stroke-2);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  text-align: center;
}
#login img.lg { height: 34px; margin-bottom: 10px; filter: brightness(0) invert(1) drop-shadow(0 2px 18px rgba(0, 0, 0, 0.6)); }
#login .tag { font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fog-30); margin-bottom: 28px; }
#login .fld { text-align: left; margin-bottom: 14px; }
#login .err { display: none; font-size: 12.5px; color: var(--bad); background: rgba(251, 113, 133, 0.08); border: 1px solid rgba(251, 113, 133, 0.3); border-radius: 11px; padding: 9px 13px; margin-bottom: 14px; }
#login .err.on { display: block; }
#login .btn { width: 100%; margin-top: 8px; }

/* ───────────────────────── modal / palette / toast ───────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(4, 5, 8, 0.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 9vh 18px 18px; overflow-y: auto;
}
.overlay.on { display: flex; }
.modal {
  width: min(640px, 100%);
  border-radius: var(--r-lg);
  background: rgba(14, 16, 22, 0.92);
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  border: 1px solid var(--stroke-2);
  box-shadow: var(--shadow);
  padding: 26px 26px 22px;
  animation: rise 0.3s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
.modal h2 { font-size: 19px; margin-bottom: 16px; }

#palette { padding-top: 14vh; }
#palette .modal { padding: 10px; width: min(560px, 100%); }
#palette input {
  width: 100%; font: inherit; font-size: 15px; color: var(--fog);
  background: none; border: none; outline: none; padding: 14px 16px;
  border-bottom: 1px solid var(--stroke);
}
#palette .res { max-height: 320px; overflow-y: auto; padding: 6px; }
#palette .pi { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; cursor: pointer; font-size: 13.5px; color: var(--fog-70); }
#palette .pi.on, #palette .pi:hover { background: color-mix(in srgb, var(--volt) 10%, transparent); color: #fff; }
#palette .pi .k { margin-left: auto; font-size: 10px; color: var(--fog-30); border: 1px solid var(--stroke); border-radius: 6px; padding: 2px 7px; }

#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 9px; }
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 14px;
  background: rgba(14, 16, 22, 0.92);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid color-mix(in srgb, var(--volt) 30%, transparent);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 22px color-mix(in srgb, var(--volt) 10%, transparent);
  font-size: 13px; color: var(--fog);
  animation: rise 0.3s ease both;
}
.toast.err { border-color: rgba(251, 113, 133, 0.4); }

/* ───────────────────────── empty states ───────────────────────── */
.empty { text-align: center; padding: 56px 24px; }
.empty .ico {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--volt) 7%, transparent); border: 1px solid color-mix(in srgb, var(--volt) 22%, transparent);
  box-shadow: 0 0 26px color-mix(in srgb, var(--volt) 12%, transparent);
}
.empty .ico svg { width: 26px; height: 26px; stroke: var(--volt); stroke-width: 1.6; }
.empty h4 { font-size: 15.5px; color: var(--fog); margin-bottom: 5px; }
.empty p { font-size: 13px; color: var(--fog-50); max-width: 380px; margin: 0 auto; }

/* skeleton shimmer */
.skel { position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.05); border-radius: 10px; }
.skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ───────────────────────── timeline (booking detail) ───────────────────────── */
.tline { position: relative; padding-left: 4px; }
.tline .st { position: relative; display: flex; gap: 14px; padding: 12px 4px; }
.tline .st::before { content: ''; position: absolute; left: 14px; top: 36px; bottom: -8px; width: 1px; background: rgba(255, 255, 255, 0.10); }
.tline .st:last-child::before { display: none; }
.tline .dotc { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; z-index: 1; display: flex; align-items: center; justify-content: center; border: 1px solid var(--stroke-2); background: var(--ink); }
.tline .st.done .dotc { border-color: rgba(74, 222, 128, 0.5); background: rgba(74, 222, 128, 0.12); box-shadow: 0 0 12px rgba(74, 222, 128, 0.25); }
.tline .st.now .dotc { border-color: var(--volt); background: var(--volt-soft); box-shadow: 0 0 14px var(--volt-glow); animation: pulse 2.2s infinite; }
.tline .dotc svg { width: 10px; height: 10px; stroke: var(--good); stroke-width: 3; }
.tline .nm { font-weight: 600; font-size: 13.5px; color: var(--fog); }
.tline .ts { font-size: 11px; color: var(--fog-30); }

/* ───────────────────────── reveal motion ───────────────────────── */
/* ⛔ FILL IS `backwards`, NEVER `both`. A `both`-filled animation keeps its final keyframe APPLIED,
   and `transform: none` in a keyframe computes to the IDENTITY MATRIX, not to none — so every finished
   .reveal stayed a stacking context and swallowed clicks meant for any absolutely-positioned child
   (dropdowns, typeaheads). `backwards` fills only the delay, and the end state the keyframes were
   holding (opacity 1, transform none) IS the natural style, so nothing moves.
   29 September 2026. */
.reveal { animation: rev 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes rev { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* touch devices (iPad/phones): skip the entrance animation — iOS Safari can leave
   `both`-fill elements stuck at opacity:0 after SPA re-renders ("filters missing until refresh"). */
@media (hover: none) and (pointer: coarse) {
  .reveal, .tabpanel { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* count-up shimmer on update */
.tick { animation: tickup 0.5s ease; }
@keyframes tickup { 0% { color: var(--volt); text-shadow: 0 0 18px var(--volt-glow); } 100% {} }

/* ───────────────────────── layout helpers ───────────────────────── */
.grid2c { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }
.grid3c { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formgrid .full { grid-column: 1 / -1; }
/* let grid items shrink to their column — stops inputs/pills forcing horizontal overflow on iPad */
.grid2c > *, .grid3c > *, .formgrid > * { min-width: 0; }
/* new/edit booking: summary + route stacked beside the form, un-sticks when the layout stacks */
.nb-side { align-self: start; position: sticky; top: 84px; display: flex; flex-direction: column; gap: 14px; }
.nb-sumhero { height: 104px; border-radius: 12px; margin-bottom: 12px; background: linear-gradient(180deg, rgba(7, 8, 11, 0.06) 0%, rgba(7, 8, 11, 0.46) 55%, rgba(7, 8, 11, 0.96) 100%), var(--photo) center / cover no-repeat var(--ink); }
.mt { margin-top: 14px; } .mb { margin-bottom: 14px; }
.muted { color: var(--fog-50); font-size: 12.5px; }
.right { margin-left: auto; }
.hr { border: none; border-top: 1px solid var(--stroke); margin: 16px 0; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
/* grouped pill filters (invoices) — neat stacked rows with dividers between groups */
.filtersec { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.filtersec .filters { margin: 0; align-items: center; }
.fdiv { width: 1px; align-self: center; height: 18px; background: var(--stroke-2); margin: 0 5px; flex: none; }
.fglabel { align-self: center; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog-50); margin-right: 2px; }
.fpill {
  font-size: 12px; font-weight: 600; color: var(--fog-50);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--stroke);
  border-radius: var(--pill); padding: 6px 15px; cursor: pointer;
  transition: all 0.2s;
}
.fpill:hover { color: var(--fog); border-color: var(--stroke-2); }
.fpill.on { color: var(--volt); border-color: color-mix(in srgb, var(--volt) 40%, transparent); background: color-mix(in srgb, var(--volt) 9%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--volt) 10%, transparent); }

/* ───────────────────────── responsive ───────────────────────── */
#menu-btn { display: none; }
@media (max-width: 1100px) {
  #rail { transform: translateX(-260px); transition: transform 0.3s ease; }
  #rail.open { transform: none; }
  #main { margin-left: 0; padding: 12px 12px 90px; }
  #menu-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.06); border: 1px solid var(--stroke);
    color: var(--fog); cursor: pointer;
  }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .grid2c, .grid3c, .formgrid { grid-template-columns: 1fr; }
  .qa-grid { grid-template-columns: repeat(2, 1fr); }
  .band .actions { position: static; margin-top: 16px; flex-wrap: wrap; }   /* a row that does not wrap is cut off by the band, "Back" first */
  .nb-side { position: static; }   /* summary/route flow below the form when stacked */
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 15px 16px; }
  #topbar { gap: 8px; padding: 9px 10px; }
  #topbar .search { min-width: 0; flex: 1 1 0; }
  #topbar .search input { min-width: 0; width: 100%; }
  #topbar .search kbd { display: none; }
  #topbar .btn-volt { display: none; }   /* rail + dashboard tiles cover it */
  #sync-label { display: none; }
  .sync { padding: 7px 9px; }
  .band { padding: 22px 18px 20px; }
  .band .actions { position: static; margin-top: 14px; flex-wrap: wrap; }
}

/* belt-and-braces: nothing may widen the viewport */
#main, #view { min-width: 0; max-width: 100%; }

/* ───────────────────────── motion safety ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #film video { display: none; }
}

/* ─────────────── accent variant: teal ───────────────
   Activated by ?accent=teal (core.js sets html[data-accent]).
   Everything else derives from --volt via color-mix, so four
   variables flip the entire system. */
html[data-accent="teal"] {
  --volt: #00d4aa;
  --volt-hi: #5fe9c9;
  --volt-lo: #00b894;
  --volt-ink: #03241c;
}

/* ════════════════════════════════════════════════════════════════
   SHARED COMPONENTS v2 — tabs, rich filter bars, segmented controls,
   grouped forms, detail grids, bulk bar, pagination, drawer.
   Used by the native page rebuilds (full feature parity).
   ════════════════════════════════════════════════════════════════ */

/* ── tabs (in-page section switcher) ── */
.tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 5px; margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--stroke);
  border-radius: var(--pill);
  width: fit-content; max-width: 100%;
}
.tab {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-d); font-weight: 600; font-size: 12.5px;
  color: var(--fog-70); background: transparent; padding: 8px 16px; border-radius: var(--pill);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.tab svg { width: 14px; height: 14px; stroke-width: 1.9; opacity: 0.8; }
.tab:hover { color: var(--fog); }
.tab.on {
  color: var(--volt-ink);
  background: linear-gradient(135deg, var(--volt-hi) 0%, var(--volt-lo) 100%);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--volt) 28%, transparent);
}
.tab.on svg { opacity: 1; }
.tab .tcount { font-size: 10.5px; font-weight: 700; opacity: 0.8; }
.tab.on .tcount { background: rgba(0,0,0,0.18); border-radius: var(--pill); padding: 0 6px; }
.tabpanel { animation: rev 0.4s cubic-bezier(0.2,0.7,0.3,1) backwards; }   /* same trap as .reveal above */
.tabpanel[hidden] { display: none; }
/* underline tab style (for dense detail pages) */
.tabs.under { background: none; border: none; border-bottom: 1px solid var(--stroke); border-radius: 0; padding: 0; gap: 2px; width: 100%; }
.tabs.under .tab { border-radius: 10px 10px 0 0; margin-bottom: -1px; }
.tabs.under .tab.on { background: none; color: var(--volt); box-shadow: none; border-bottom: 2px solid var(--volt); }
.tabs.under .tab.on svg { stroke: var(--volt); }

/* ── rich filter bar (selects + search + chips on one glass strip) ── */
.fbar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--stroke); border-radius: var(--r);
}
.fbar .fsearch {
  flex: 1; min-width: 180px; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--stroke);
  border-radius: var(--pill); padding: 8px 14px;
}
.fbar .fsearch:focus-within { border-color: color-mix(in srgb, var(--volt) 40%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--volt) 10%, transparent); }
.fbar .fsearch svg { width: 14px; height: 14px; opacity: 0.55; flex-shrink: 0; }
.fbar .fsearch input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--fog); font: inherit; font-size: 13px; }
.fsel {
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--fog-70);
  background: rgba(255,255,255,0.05); border: 1px solid var(--stroke);
  border-radius: var(--pill); padding: 8px 30px 8px 14px; cursor: pointer;
  outline: none; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color 0.2s, color 0.2s;
}
.fsel:hover { color: var(--fog); border-color: var(--stroke-2); }
.fsel.on { color: var(--volt); border-color: color-mix(in srgb, var(--volt) 40%, transparent); background-color: color-mix(in srgb, var(--volt) 9%, transparent); }
.fsel option { background: #12151d; color: var(--fog); }
/* a .fsel that is ALSO a .fld select: the .fld select shorthand (higher specificity) wiped the
   chevron + reset background-repeat→repeat, which TILED the chevron into a hatch in light mode.
   This combined selector (0,1,2) restores a single, correctly-placed chevron in both themes. */
.fld select.fsel {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 6px; padding-right: 30px;
}
html[data-theme="light"] .fld select.fsel { background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23475569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* Google address autocomplete dropdown (create/edit booking) */
.nb-acwrap { position: relative; }
.gac-dropdown { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; margin-top: 4px; background: #12151d; border: 1px solid var(--stroke-2); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,0.5); overflow: hidden auto; max-height: 260px; }
.gac-item { padding: 9px 12px; font-size: 13px; color: var(--fog-80); cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.05); }
.gac-item:last-child { border-bottom: none; }
.gac-item:hover { background: color-mix(in srgb, var(--volt) 14%, transparent); color: var(--fog); }
/* A bar holding a typeahead dropdown outranks everything below it — covers the half-second while the
   entrance animation is actually running, when the bar IS a stacking context and z-index 60 cannot
   escape it. Scoped to bars that hold a dropdown, so a later .fbar never wins on DOM order. */
.fbar:has(.gac-dropdown) { position: relative; z-index: 8; }
/* Typeahead combobox (entity menus: customer/driver/contact) — legacy type-to-search UX */
.ta-wrap { position: relative; }
.ta-input { width: 100%; font: inherit; color: var(--fog); background: rgba(255,255,255,0.05); border: 1px solid var(--stroke); border-radius: 13px; padding: 11px 14px; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.ta-input::placeholder { color: var(--fog-30); }
.ta-input:focus { border-color: color-mix(in srgb, var(--volt) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--volt) 12%, transparent), 0 0 18px color-mix(in srgb, var(--volt) 10%, transparent); background: rgba(255,255,255,0.07); }
.ta-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 70; background: #12151d; border: 1px solid var(--stroke-2); border-radius: 12px; box-shadow: 0 16px 38px rgba(0,0,0,0.55); overflow: hidden auto; max-height: 280px; }
.ta-item { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ta-item:last-child { border-bottom: none; }
.ta-item.ta-active, .ta-item:hover { background: color-mix(in srgb, var(--volt) 16%, transparent); }
.ta-lbl { font-size: 13.5px; color: var(--fog); font-weight: 500; }
.ta-sub { font-size: 11.5px; color: var(--fog-50); margin-top: 1px; }
.ta-new { color: var(--volt); font-weight: 600; font-size: 13px; }
.ta-empty { padding: 10px 12px; color: var(--fog-50); font-size: 12.5px; }
/* Compact invoice line items (view-invoice page) */
.invline { display: flex; align-items: flex-start; gap: 8px; padding: 5px 8px; border-radius: 10px; }
.invline + .invline { margin-top: 3px; }
.invline:not(.invline-head):hover { background: rgba(255,255,255,0.03); }
.invline-head { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--fog-50); padding: 0 8px 2px; }
.invline .il-desc { flex: 1; min-width: 170px; display: flex; flex-direction: column; gap: 2px; }
.invline .il-num { width: 80px; flex: none; }
.invline .il-vat { width: 54px; flex: none; }
.invline .il-po { width: 82px; flex: none; }
.invline .il-tot { width: 76px; flex: none; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12.5px; color: var(--fog); padding-top: 8px; }
.invline-head .il-tot { padding-top: 0; }
.invline .il-job { font-size: 10px; color: var(--fog-50); padding-left: 2px; }
.invline input, .invline textarea { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid var(--stroke); border-radius: 8px; padding: 6px 8px; color: var(--fog); font: inherit; font-size: 12.5px; outline: none; }
.invline textarea { resize: none; overflow: hidden; min-height: 32px; line-height: 1.4; }
/* Invoice view: narrow editor + live A4 preview */
.invgrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 14px; align-items: start; }
.invprev-col { position: sticky; top: 14px; min-width: 0; }
.invprev { position: relative; background: #e8e9ed; border-radius: 10px; overflow: hidden; max-width: 100%; }
.invprev #inv-prev-page { border-radius: 2px; box-shadow: 0 2px 14px rgba(0,0,0,0.4); }
@media (max-width: 1100px) { .invgrid { grid-template-columns: minmax(0, 1fr); } .invprev-col { position: static; } }
/* Shipment Journey timeline (View Booking page) */
.bkj { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 10px; }
.bkj-stage { position: relative; padding: 12px; border: 1px solid var(--stroke); border-radius: 12px; background: rgba(255,255,255,0.02); }
.bkj-stage.done { border-color: color-mix(in srgb, var(--good) 55%, transparent); background: color-mix(in srgb, var(--good) 15%, transparent); }
.bkj-stage.done .bkj-label { color: color-mix(in srgb, var(--good) 75%, var(--fog)); }
.bkj-dot { width: 12px; height: 12px; border-radius: 999px; border: 2px solid var(--fog-50); margin-bottom: 8px; }
.bkj-stage.done .bkj-dot { border-color: var(--good); background: var(--good); box-shadow: 0 0 10px color-mix(in srgb, var(--good) 60%, transparent); }
.bkj-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--fog); }
.bkj-time { font-size: 12px; color: var(--fog-50); margin-top: 2px; }
.bkj-note { font-size: 11.5px; color: var(--fog-70); margin-top: 4px; font-style: italic; }
.bkj-meta { font-size: 11px; color: var(--fog-50); margin-top: 3px; min-height: 13px; }
.bkj-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.bkj-acts .btn { padding: 3px 8px; font-size: 11px; }
.invline input:focus, .invline textarea:focus { border-color: color-mix(in srgb, var(--volt) 45%, transparent); }
.invline .il-x { width: 30px; flex: none; background: transparent; border: none; color: var(--fog-50); cursor: pointer; padding: 7px 0 0; display: flex; justify-content: center; }
.invline .il-x svg { width: 15px; height: 15px; }
.invline .il-x:hover { color: var(--bad); }
@media (max-width: 700px) { .invline-head { display: none; } .invline { flex-wrap: wrap; } .invline .il-desc { min-width: 100%; } }
.fbar .fx { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.fbar .fcount { font-size: 12px; color: var(--fog-50); }

/* ── segmented control (All / Account / Online style) ── */
.seg { display: inline-flex; padding: 4px; gap: 3px; background: rgba(255,255,255,0.04); border: 1px solid var(--stroke); border-radius: var(--pill);
       max-width: 100%; overflow-x: auto; scrollbar-width: none; }   /* more tabs than fit: the strip itself scrolls, the page does not */
.seg::-webkit-scrollbar { display: none; }
.seg button {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--fog-50);
  background: none; border: none; border-radius: var(--pill); padding: 6px 15px; cursor: pointer; white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.seg button:hover { color: var(--fog); }
.seg button.on { color: var(--volt-ink); background: linear-gradient(135deg, var(--volt-hi), var(--volt-lo)); }

/* ── grouped form sections ── */
.fsec { margin-bottom: 18px; }
.fsec-h { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.fsec-h .ic { width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--volt-soft); flex-shrink: 0; }
.fsec-h .ic svg { width: 15px; height: 15px; stroke: var(--volt); stroke-width: 1.9; }
.fsec-h h3 { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fog); }
.fsec-h .hint { margin-left: auto; font-size: 11.5px; color: var(--fog-30); }
.formgrid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.fld .req { color: var(--volt); margin-left: 2px; }
.fld .sub { font-size: 10.5px; color: var(--fog-30); font-weight: 400; text-transform: none; letter-spacing: 0; }
.fld.inline { flex-direction: row; align-items: center; gap: 10px; }
.fld .check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; color: var(--fog-70); text-transform: none; letter-spacing: 0; font-weight: 500; }
.fld .check input { width: 17px; height: 17px; accent-color: var(--volt); }

/* ── key/value detail grid ── */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; align-items: baseline; font-size: 13.5px; }
.kv dt { color: var(--fog-50); font-size: 12px; white-space: nowrap; }
.kv dd { margin: 0; color: var(--fog); font-weight: 500; text-align: right; }
.kv dd.money { font-variant-numeric: tabular-nums; }

/* ── floating bulk-action bar ── */
.bulkbar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(120%);
  display: flex; align-items: center; gap: 14px; z-index: 60;
  padding: 12px 16px 12px 20px; border-radius: var(--pill);
  background: rgba(14, 16, 22, 0.92);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--stroke-2);
  box-shadow: var(--shadow), 0 0 26px color-mix(in srgb, var(--volt) 12%, transparent);
  transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1); opacity: 0;
}
.bulkbar.on { transform: translateX(-50%) translateY(0); opacity: 1; }
.bulkbar .n { font-family: var(--font-d); font-weight: 700; color: #fff; white-space: nowrap; flex: none; }
.bulkbar .n b { color: var(--volt); }
.bulkbar .sep { width: 1px; height: 22px; background: var(--stroke-2); }
.bulkbar .x { background: none; border: none; color: var(--fog-50); cursor: pointer; font-size: 18px; line-height: 1; padding: 4px; }
.bulkbar .x:hover { color: var(--fog); }
.tbl .cb { width: 34px; text-align: center; }
/* liquid-glass checkbox — blends with the dark UI, volt fill + tick when checked */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 17px; height: 17px; flex: none; border-radius: 6px;
  border: 1px solid var(--stroke-2); background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; position: relative; vertical-align: -3px; margin: 0;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
input[type="checkbox"]:hover { border-color: color-mix(in srgb, var(--volt) 55%, transparent); }
input[type="checkbox"]:checked {
  background: linear-gradient(135deg, var(--volt-hi), var(--volt-lo));
  border-color: transparent; box-shadow: 0 0 12px color-mix(in srgb, var(--volt) 35%, transparent);
}
input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 5px; top: 2px;
  width: 4px; height: 8px; border: solid var(--volt-ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ── pagination ── */
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; }
.pager button {
  font: inherit; font-size: 12.5px; font-weight: 600; min-width: 34px; height: 34px;
  color: var(--fog-70); background: rgba(255,255,255,0.04); border: 1px solid var(--stroke);
  border-radius: 10px; cursor: pointer; padding: 0 10px; transition: all 0.2s;
}
.pager button:hover:not(:disabled) { color: var(--fog); border-color: var(--stroke-2); }
.pager button.on { color: var(--volt); border-color: color-mix(in srgb, var(--volt) 40%, transparent); background: color-mix(in srgb, var(--volt) 9%, transparent); }
.pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.pager .info { font-size: 12px; color: var(--fog-50); margin: 0 8px; }

/* ── right-side drawer (detail/edit without leaving the list) ── */
.drawer-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(4,5,8,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.drawer-overlay.on { opacity: 1; pointer-events: auto; }
/* full booking detail as a pop-up overlay (list stays behind) */
.bkmodal-overlay { position: fixed; inset: 0; z-index: 79; display: none; align-items: flex-start; justify-content: center; padding: 26px 16px; background: rgba(4,5,8,0.6); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); overflow-y: auto; animation: rise 0.22s ease; }
.bkmodal { width: min(1120px, 100%); margin: auto; }
html[data-theme="light"] .bkmodal-overlay { background: rgba(23, 32, 58, 0.30); }
@media (max-width: 720px) { .bkmodal-overlay { padding: 12px 8px; } }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); z-index: 71;
  background: rgba(12, 14, 20, 0.96); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  border-left: 1px solid var(--stroke-2); box-shadow: -30px 0 80px rgba(0,0,0,0.5);
  transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1);
  overflow-y: auto; padding: 24px;
}
.drawer.on { transform: none; }

/* ── misc helpers used by rebuilds ── */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .right { margin-left: auto; }
.tag-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 8px; border-radius: var(--pill); border: 1px solid; }
.tag-cx { color: var(--viol); border-color: color-mix(in srgb, var(--viol) 35%, transparent); background: color-mix(in srgb, var(--viol) 9%, transparent); }
/* user-defined tag chips (jobs + customers) — coloured dot + neutral text = legible in both themes */
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  padding: 3px 10px; border-radius: var(--pill); color: var(--fog);
  border: 1px solid color-mix(in srgb, var(--tagc, var(--volt)) 42%, var(--stroke));
  background: color-mix(in srgb, var(--tagc, var(--volt)) 14%, transparent);
}
.tag-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--tagc, var(--volt)); box-shadow: 0 0 7px color-mix(in srgb, var(--tagc, var(--volt)) 60%, transparent); }
.tag-chip.sm { font-size: 10px; padding: 2px 8px; }
.tag-chip .x { cursor: pointer; opacity: 0.5; margin-left: 1px; font-weight: 700; }
.tag-chip .x:hover { opacity: 1; color: var(--bad); }
/* tag swatch for the manager + picker dots */
.tagdot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--tagc, var(--volt)); box-shadow: 0 0 6px color-mix(in srgb, var(--tagc, var(--volt)) 55%, transparent); }
.mini { font-size: 11px; color: var(--fog-30); }
.addref { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; cursor: pointer; color: var(--volt); border: 1px solid color-mix(in srgb, var(--volt) 35%, transparent); background: color-mix(in srgb, var(--volt) 12%, transparent); white-space: nowrap; }
.addref:hover { background: color-mix(in srgb, var(--volt) 20%, transparent); }
.tbl td .sub2 { display: block; font-size: 11px; color: var(--fog-30); margin-top: 1px; }
.stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.stat-row .sc { flex: 1; min-width: 130px; padding: 14px 16px; }
.stat-row .sc .v { font-family: var(--font-d); font-size: 22px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.stat-row .sc .l { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog-50); margin-top: 3px; }
@media (max-width: 700px) {
  .formgrid, .formgrid.cols-3 { grid-template-columns: 1fr; }
  .kv dd { text-align: left; }
  .drawer { width: 100vw; }
}

/* ───────────────────────── native SVG charts ───────────────────────── */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .cax { fill: var(--fog-50); font-size: 13px; font-family: var(--font-b); }
.chart .cgrid { stroke: var(--stroke); stroke-width: 1; }
.donut-wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.donut { flex: none; max-width: 190px; height: auto; }
.donut .dctr { fill: #fff; font-family: var(--font-d); font-size: 21px; font-weight: 700; }
.donut .dctl { fill: var(--fog-50); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--fog-70); margin-top: 10px; }
.chart-legend.col { flex-direction: column; gap: 7px; margin-top: 0; min-width: 150px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }

/* wide booking-view modal + modal card icons */
.modal.bkm { width: min(880px, 100%); }
.modal.bkm .grid2c { grid-template-columns: 1fr 1fr; }
.panel-h h3 svg { width: 15px; height: 15px; vertical-align: -2px; opacity: .85; stroke: var(--volt); }
@media (max-width: 700px) { .modal.bkm .grid2c { grid-template-columns: 1fr; } }

/* tariff pill grid + priority cards (new/edit booking) */
.pillgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.pillgrid.cards3 { grid-template-columns: repeat(3, 1fr); }
.pill-card {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--fog-70);
  background: rgba(255,255,255,.04); border: 1px solid var(--stroke); border-radius: 12px;
  padding: 11px 12px; cursor: pointer; text-align: center; transition: all .18s;
}
.pill-card:hover { color: var(--fog); border-color: var(--stroke-2); }
.pill-card.on { color: var(--volt); border-color: color-mix(in srgb, var(--volt) 45%, transparent); background: color-mix(in srgb, var(--volt) 10%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--volt) 12%, transparent); }
.pill-card.big { display: flex; flex-direction: column; gap: 3px; padding: 14px 12px; text-align: left; }
.pill-card.big b { font-family: var(--font-d); font-size: 14px; color: var(--fog); }
.pill-card.big span { font-size: 11px; color: var(--fog-50); }
.pill-card.big.on b { color: var(--volt); }
@media (max-width: 700px) { .pillgrid.cards3 { grid-template-columns: 1fr; } }

/* dashboard film — smooth crossfade loop + slow breathing zoom (no Higgsfield) */
#film .film-v { opacity: 0; transition: opacity 1.2s ease; will-change: opacity, transform; animation: filmZoom 28s ease-in-out infinite alternate; }
#film .film-v.on { opacity: 1; }
@keyframes filmZoom { from { transform: scale(1.04); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { #film .film-v { animation: none; } }

/* ════════════════════════════════════════════════════════════════
   DAYLIGHT GLASS — light theme  (html[data-theme="light"])
   Activated by ?theme=light (core.js sets html[data-theme]) or the
   Settings → Theme toggle. A *dimmed* light, not stark white: a cool
   slate canvas with luminous white glass cards floating on it, so
   every surface still stands out. Tokens flip first; then the ~40
   hardcoded dark scrims / translucent-whites are flipped per-selector
   (they don't derive from variables). Status hues are deepened so they
   stay legible on white; the volt accent is deepened to read on light.
   ════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  color-scheme: light;
  /* ink + fog */
  --ink: #eef2f7;                       /* bright daylight canvas — airy, not stark */
  --panel: rgba(255, 255, 255, 0.82);
  --fog: #14171d;                       /* near-black charcoal text */
  --fog-70: rgba(20, 23, 29, 0.74);
  --fog-50: rgba(20, 23, 29, 0.56);
  --fog-30: rgba(20, 23, 29, 0.42);

  /* volt accent — sky deepened so it reads on white (still derives via color-mix) */
  --volt: #0b8a62;
  --volt-hi: #12a877;
  --volt-lo: #087a55;
  --volt-ink: #ffffff;                  /* white text on solid accent */
  --amber: #b5832a;                     /* deepened gold for white bg */
  --amber-glow: rgba(181, 131, 42, 0.30);

  /* glass — crisp white panels on the bright canvas = they pop */
  --glass: rgba(255, 255, 255, 0.84);
  --glass-2: rgba(255, 255, 255, 0.94);
  --stroke: rgba(20, 28, 48, 0.12);
  --stroke-2: rgba(20, 28, 48, 0.20);

  /* status — deepened for legibility on light */
  --ok: #0d9488;
  --good: #16a34a;
  --warn: #c2820a;
  --bad: #e11d48;
  --info: #2f6bd6;
  --viol: #7c5cd6;

  /* depth — softer but present so cards lift off the canvas */
  --shadow: 0 18px 44px rgba(23, 32, 58, 0.18);
  --shadow-sm: 0 8px 22px rgba(23, 32, 58, 0.12);
  --glow: 0 0 26px color-mix(in srgb, var(--volt) 16%, transparent);
}
/* teal accent within the light theme — deepened teal (higher specificity wins) */
html[data-theme="light"][data-accent="teal"] {
  --volt: #0f9d8a;
  --volt-hi: #14b39c;
  --volt-lo: #0c8576;
  --volt-ink: #ffffff;
}

/* selection + scrollbar */
html[data-theme="light"] ::selection { background: color-mix(in srgb, var(--volt) 26%, transparent); color: var(--fog); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(20, 28, 48, 0.18); }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(20, 28, 48, 0.30); }

/* DAYLIGHT 2.0 photo surfaces — vivid brand photography, NOT a grey wash.
   #ambient + .band + #rail + .rl.on are the single source in the colour pass
   below (block B). The rules here own #film / .glass.photo / heroes / #login. */
/* dashboard van video reads VIVID — light wash only on the left (greeting) + soft bottom fade */
html[data-theme="light"] #film::after {
  background:
    linear-gradient(90deg, rgba(238, 242, 247, 0.60) 0%, rgba(238, 242, 247, 0.22) 42%, rgba(238, 242, 247, 0.04) 100%),
    linear-gradient(180deg, rgba(238, 242, 247, 0.00) 0%, rgba(238, 242, 247, 0.14) 60%, rgba(238, 242, 247, 0.62) 100%);
}
html[data-theme="light"] .glass.photo {
  background:
    linear-gradient(120deg, rgba(248, 250, 253, 0.55) 0%, rgba(248, 250, 253, 0.30) 55%, rgba(248, 250, 253, 0.12) 100%),
    var(--photo) center / cover no-repeat var(--ink);
}
html[data-theme="light"] .band h1,
html[data-theme="light"] .band .bstat b { color: var(--fog); }
html[data-theme="light"] .band .bstat { background: rgba(255, 255, 255, 0.62); color: var(--fog-70); }
html[data-theme="light"] .bkhero {
  background:
    linear-gradient(180deg, rgba(248, 250, 253, 0.10) 0%, rgba(248, 250, 253, 0.42) 55%, rgba(248, 250, 253, 0.90) 100%),
    var(--photo) center / cover no-repeat var(--ink);
}
html[data-theme="light"] .bkhero h2 { color: var(--fog); }
html[data-theme="light"] .bkhero .hpill,
html[data-theme="light"] .bkhero .hclose { background: rgba(255, 255, 255, 0.72); color: var(--fog); }
html[data-theme="light"] .nb-sumhero {
  background:
    linear-gradient(180deg, rgba(250, 251, 253, 0.16) 0%, rgba(250, 251, 253, 0.46) 55%, rgba(250, 251, 253, 0.86) 100%),
    var(--photo) center / cover no-repeat var(--ink);
}

/* floating rail — light wash over the dark-glass texture; black logo */
html[data-theme="light"] #rail {
  background:
    linear-gradient(180deg, rgba(252, 253, 255, 0.82) 0%, rgba(247, 249, 252, 0.88) 100%),
    url('images/brand/bg-dark-glass.webp') center / cover no-repeat;
}
html[data-theme="light"] #rail .logo img { filter: brightness(0) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.18)); }
html[data-theme="light"] .rl:hover { background: rgba(20, 28, 48, 0.05); }
html[data-theme="light"] .rl.on { color: var(--volt); }
html[data-theme="light"] #rail .user .av { color: #0b1020; box-shadow: 0 0 10px rgba(23, 32, 58, 0.12); }

/* login */
html[data-theme="light"] #login {
  background:
    linear-gradient(160deg, rgba(238, 242, 247, 0.28) 0%, rgba(238, 242, 247, 0.08) 50%, rgba(238, 242, 247, 0.42) 100%),
    url('images/brand/hero-livingroom.webp') center / cover no-repeat var(--ink);
}
html[data-theme="light"] #login .card { background: rgba(255, 255, 255, 0.93); box-shadow: 0 30px 80px rgba(23, 32, 58, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
html[data-theme="light"] #login img.lg { filter: brightness(0) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.18)); }

/* overlays / modals / drawer / toast / bulk bar → light glass; dim scrim behind */
html[data-theme="light"] .overlay { background: rgba(23, 32, 58, 0.30); }
html[data-theme="light"] .drawer-overlay { background: rgba(23, 32, 58, 0.28); }
html[data-theme="light"] .modal,
html[data-theme="light"] .toast,
html[data-theme="light"] .bulkbar { background: rgba(252, 253, 255, 0.96); }
html[data-theme="light"] .drawer { background: rgba(252, 253, 255, 0.97); }
html[data-theme="light"] .bulkbar .n { color: var(--fog); }
html[data-theme="light"] #palette .pi.on,
html[data-theme="light"] #palette .pi:hover { color: var(--volt); }

/* interactive surface fills: translucent-white → subtle translucent-dark
   (background-color only, so the .fsel chevron image survives) */
html[data-theme="light"] #topbar .search,
html[data-theme="light"] .sync,
html[data-theme="light"] .btn-glass,
html[data-theme="light"] .fld input,
html[data-theme="light"] .fld select,
html[data-theme="light"] .fld textarea,
html[data-theme="light"] .fbar,
html[data-theme="light"] .fbar .fsearch,
html[data-theme="light"] .fsel,
html[data-theme="light"] .tabs,
html[data-theme="light"] .seg,
html[data-theme="light"] .fpill,
html[data-theme="light"] .pager button,
html[data-theme="light"] .pill-card,
html[data-theme="light"] .invline input,
html[data-theme="light"] .invline textarea,
html[data-theme="light"] input[type="checkbox"],
html[data-theme="light"] #menu-btn,
html[data-theme="light"] .tbl thead th { background-color: rgba(20, 28, 48, 0.045); }
html[data-theme="light"] .fld input:focus,
html[data-theme="light"] .fld select:focus,
html[data-theme="light"] .fld textarea:focus { background-color: rgba(20, 28, 48, 0.06); }
html[data-theme="light"] .bkj-stage { background: rgba(20, 28, 48, 0.035); }
html[data-theme="light"] .invline:not(.invline-head):hover { background: rgba(20, 28, 48, 0.04); }
html[data-theme="light"] .fsel {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23475569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* dropdown option lists + Google autocomplete → white */
html[data-theme="light"] .fld select option,
html[data-theme="light"] .fsel option,
html[data-theme="light"] .gac-dropdown { background: #ffffff; color: var(--fog); }
html[data-theme="light"] .gac-item { border-bottom-color: rgba(20, 28, 48, 0.06); }
/* typeahead in light: opaque field + white menu */
html[data-theme="light"] .ta-input { background-color: rgba(20, 28, 48, 0.05); }
html[data-theme="light"] .ta-input:focus { background-color: #ffffff; }
html[data-theme="light"] .ta-menu { background: #ffffff; }
html[data-theme="light"] .ta-item { border-bottom-color: rgba(20, 28, 48, 0.06); }

/* hairlines that were literal translucent-white */
html[data-theme="light"] .tbl tbody td,
html[data-theme="light"] .row { border-bottom-color: rgba(20, 28, 48, 0.08); }
html[data-theme="light"] .tline .st::before { background: rgba(20, 28, 48, 0.12); }
html[data-theme="light"] .skel { background: rgba(20, 28, 48, 0.06); }
html[data-theme="light"] .skel::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent); }

/* white text that would vanish on light → charcoal */
html[data-theme="light"] .tbl .ref,
html[data-theme="light"] .kpi .num,
html[data-theme="light"] .stat-row .sc .v { color: var(--fog); }
html[data-theme="light"] .donut .dctr { fill: var(--fog); }
/* inline-white hero/band text (dashboard greeting, band action labels) — beat inline style */
html[data-theme="light"] .dash-hello { color: var(--fog) !important; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important; }
html[data-theme="light"] .band .check { color: var(--fog) !important; }

/* ════════════════════════════════════════════════════════════════
   DAYLIGHT COLOUR PASS (WS6) — richer light theme, less flat.
   Lets the brand photography + accent glow show through, colours the
   rail / active nav / KPI tiles. Content stays on white glass cards so
   contrast is preserved. Source-order-last so it wins same-specificity. */
/* global backdrop: BRIGHT PDL light-mesh + an airy volt/amber aurora — clean, not grey */
html[data-theme="light"] #ambient {
  background:
    radial-gradient(1100px 560px at 84% -6%, color-mix(in srgb, var(--volt) 16%, transparent) 0%, transparent 58%),
    radial-gradient(820px 460px at -8% 108%, color-mix(in srgb, var(--amber) 12%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, rgba(238, 242, 247, 0.66) 0%, rgba(238, 242, 247, 0.74) 55%, rgba(238, 242, 247, 0.82) 100%),
    url('images/brand/bg-light-mesh.webp') center / cover no-repeat var(--ink);
}
/* bands: brand photo shown VIVID on the right + a volt sheen; title sits on a crisply-lit left */
html[data-theme="light"] .band {
  background:
    linear-gradient(95deg, rgba(248, 250, 253, 0.95) 0%, rgba(248, 250, 253, 0.72) 38%, rgba(248, 250, 253, 0.14) 100%),
    linear-gradient(95deg, transparent 52%, color-mix(in srgb, var(--volt) 22%, transparent) 100%),
    var(--photo) center / cover no-repeat var(--ink);
  border-color: color-mix(in srgb, var(--volt) 20%, var(--stroke));
}
html[data-theme="light"] .band .bstat { background: rgba(255, 255, 255, 0.88); border-color: color-mix(in srgb, var(--volt) 18%, var(--stroke-2)); }
/* rail: clean light glass (no dark texture), coloured group labels, a vibrant filled active pill */
html[data-theme="light"] #rail {
  background: linear-gradient(180deg, color-mix(in srgb, var(--volt) 9%, #ffffff) 0%, color-mix(in srgb, var(--volt) 4%, #f5f8fc) 100%);
}
html[data-theme="light"] #rail .group { color: color-mix(in srgb, var(--volt) 72%, var(--fog-50)); }
html[data-theme="light"] .rl.on {
  background: linear-gradient(120deg, var(--volt-hi), var(--volt-lo));
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--volt) 32%, transparent);
}
html[data-theme="light"] .rl.on svg { stroke: #ffffff; }
/* vivid KPI icon tiles + coloured glass-hover */
html[data-theme="light"] .kpi .ic { background: color-mix(in srgb, var(--volt) 18%, #fff); box-shadow: 0 6px 16px color-mix(in srgb, var(--volt) 18%, transparent); }
html[data-theme="light"] .kpi .ic.money { background: color-mix(in srgb, var(--amber) 26%, #fff); box-shadow: 0 6px 16px var(--amber-glow); }
html[data-theme="light"] .glass.lift:hover { border-color: color-mix(in srgb, var(--volt) 30%, transparent); }
/* a little colour on primary CTA + segmented active */
html[data-theme="light"] .btn-volt { box-shadow: 0 8px 22px color-mix(in srgb, var(--volt) 32%, transparent); }

/* ════════════════════════════════════════════════════════════════
   DAYLIGHT 2.0 — vibrant colour layer (light theme).
   Solid status pills, solid active filters, blue ref links. Source-order
   last so it wins same-specificity. Dark theme is never touched.
   Pill fills are deepened so white text passes contrast on white. */

/* solid status pills — colour you can read across the room (old-system energy) */
html[data-theme="light"] .chip { color: #ffffff; border-color: transparent; }
html[data-theme="light"] .c-assigned  { background: #2f6bd6; }   /* volt blue */
html[data-theme="light"] .c-new       { background: var(--volt); }
html[data-theme="light"] .c-transit   { background: #0f766e; }   /* teal */
html[data-theme="light"] .c-delivered { background: #15803d; }   /* green */
html[data-theme="light"] .c-paid      { background: #15803d; }
html[data-theme="light"] .c-invoiced  { background: #6d4fc6; }   /* violet */
html[data-theme="light"] .c-cancelled { background: #c81e3a; }   /* red */
html[data-theme="light"] .c-pending,
html[data-theme="light"] .c-awaiting  { background: #e7a417; color: #2a1d02; }  /* bright gold + dark ink */

/* active filters read as solid colour, not a ghost tint */
html[data-theme="light"] .fpill.on {
  background: var(--volt); color: #ffffff; border-color: transparent;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--volt) 26%, transparent);
}
html[data-theme="light"] .fsel.on {
  background-color: color-mix(in srgb, var(--volt) 15%, #ffffff);
  color: var(--volt); border-color: color-mix(in srgb, var(--volt) 45%, transparent);
}

/* booking / record reference numbers → clickable blue (old-system links) */
html[data-theme="light"] .tbl .ref,
html[data-theme="light"] .tbl td.refcell .refno { color: var(--volt); }

/* ════════════════════════════════════════════════════════════════════════════════════════
   KIT EXTENSION — the stays components (4 October 2026)

   This stylesheet and the stays system's are the same Midnight Glass kit: 543 of this file's
   551 rules were already in both. What follows is every kit rule the stays system has and this
   file did not (filter and sort toolbar, bulk selection, calendars, boards, task cards,
   widgets, alerts, focus rings, phone layouts), verbatim and in its own order, so its screens
   and modules render here unchanged. NOT taken: its palette, fonts, ambient orbs and its
   light-theme glass treatment. Those are its skin; this system keeps its own.
   The tokens below are the ones those rules read and this palette did not define.
   ⛔ This file is served to partners. No product name and no brand name belongs in it, comments
   included (tools/verify_brand.php A1).
   ════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --font-ui: 'Inter', sans-serif;
  --font-k: 'Inter', sans-serif;
  --panel-solid: #0e1016;
  --title: #fff;
  --card: rgba(255, 255, 255, 0.05);
  --r-card: 24px;
  --navy: #12141c;
  --muted: var(--fog-50);
}
html[data-theme="light"] {
  --panel-solid: #ffffff;
  --title: #14171d;
  --card: #ffffff;
  --navy: #e6ebf2;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--volt), 0 0 18px var(--volt-glow);
}
@media (prefers-reduced-motion: reduce) {
  #ambient::before,
  #ambient::after { animation: none;
  }
}
.kpi .num.money { color: var(--volt); text-shadow: 0 0 18px var(--volt-glow);
}
.detail-grid > * { min-width: 0;
}
.crm-stack { min-width: 0; display: grid; gap: 14px;
}
.crm-stack > * { min-width: 0;
}
@media (max-width: 700px) {
  .invline .il-num { flex: 1 1 0; width: auto; min-width: 58px;
  }
  .invline .il-tot { flex: 0 0 auto;
  }
  .invline .il-x { margin-left: auto;
  }
}
@media (max-width: 640px) {
  .bulkbar {
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateY(180%);
    flex-wrap: wrap; justify-content: center; gap: 8px;
    padding: 12px 12px 12px 12px; border-radius: 20px;
  }
  .bulkbar.on { transform: translateY(0);
  }
  .bulkbar .n { width: 100%; text-align: center; font-size: 13px; padding-right: 22px;
  }
  .bulkbar .sep { display: none;
  }
  .bulkbar .btn { flex: 1 1 auto; min-width: 0; justify-content: center;
  }
  .bulkbar .x { position: absolute; top: 8px; right: 10px; padding: 2px 6px;
  }
}
.detail-grid { display: grid; gap: 14px; margin-top: 18px;
}
.kpis.kpis-3 { grid-template-columns: repeat(3, 1fr);
}
.liners { display: flex; flex-direction: column; gap: 2px;
}
.liner { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px;
  text-decoration: none; transition: background .18s;
}
.liner:hover { background: color-mix(in srgb, var(--volt) 6%, transparent);
}
.liner .av { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; font-family: var(--font-ui); font-weight: 700;
  font-size: 12px; color: var(--volt-ink); background: linear-gradient(135deg, var(--volt-hi), var(--volt-lo));
}
.liner .ln-main { flex: 1; min-width: 0;
}
.liner .ln-t { color: var(--fog); font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.liner .ln-s { color: var(--fog-50); font-size: 11.5px;
}
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
}
.pcard { display: block; text-decoration: none; overflow: hidden; padding: 0;
}
.pcard-photo { height: 150px; background: var(--photo) center / cover no-repeat, var(--glass-2);
  border-bottom: 1px solid var(--stroke);
}
.pcard-body { padding: 16px 18px 18px;
}
.pcard-body h3 { color: var(--fog); font-size: 16px;
}
.pcard-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 12px; font-size: 12px; color: var(--fog-50);
}
.pcard-stats b { color: var(--fog); font-family: var(--font-ui); font-weight: 700; margin-right: 4px;
}
.lnk { color: var(--volt); text-decoration: none;
}
.lnk:hover { text-shadow: 0 0 12px var(--volt-glow);
}
.btnrow { display: flex; gap: 8px; flex-wrap: wrap;
}
.btn-bad { background: color-mix(in srgb, var(--bad) 16%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); color: var(--bad);
}
.btn-bad:hover { background: color-mix(in srgb, var(--bad) 26%, transparent);
}
.pres { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px;
  border-radius: 12px; text-decoration: none; color: var(--fog); transition: background .15s;
}
.pres:hover { background: color-mix(in srgb, var(--volt) 8%, transparent);
}
.pres .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--fog-50);
}
@media (max-width: 760px) {
  .kpis.kpis-3 { grid-template-columns: 1fr 1fr;
  }
}
.cjboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start;
}
.cjcol { display: flex; flex-direction: column; gap: 10px;
}
.cjcol-h { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fog-50); padding: 2px 4px;
}
.cjcol-h .cjn { margin-left: auto; background: var(--volt-soft); color: var(--volt); border-radius: 999px; padding: 1px 8px; font-size: 11px;
}
.cjcard { display: block; text-decoration: none; padding: 13px 14px;
}
.cj-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px;
}
.cj-prop { color: var(--fog); font-weight: 600; font-size: 13.5px;
}
@media (max-width: 1000px) {
  .cjboard { grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .cjboard { grid-template-columns: 1fr;
  }
}
.cal-title { font-family: var(--font-d); font-size: 18px; color: var(--fog); margin-bottom: 12px;
}
.cal-scroll { overflow-x: auto; border-radius: var(--r);
}
.cal-inner { min-width: 100%;
}
.cal-row { display: flex; align-items: stretch; border-bottom: 1px solid rgba(255,255,255,.05);
}
.cal-row.cal-headrow { border-bottom: 1px solid var(--stroke);
}
.cal-prop { width: 170px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 12px 12px; font-size: 13px; font-weight: 600; color: var(--fog); position: sticky; left: 0; background: color-mix(in srgb, var(--ink) 86%, transparent); backdrop-filter: blur(6px); z-index: 2;
}
.cal-prop .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.cal-track { position: relative; height: 46px; flex-shrink: 0;
}
.cal-headrow .cal-track { height: 40px;
}
.cal-day { width: 42px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-left: 1px solid rgba(255,255,255,.04);
}
.cal-day.wknd { background: rgba(255,255,255,.025);
}
.cal-day.today { background: color-mix(in srgb, var(--volt) 14%, transparent);
}
.cal-day .cdw { font-size: 9px; color: var(--fog-30); text-transform: uppercase;
}
.cal-day .cdn { font-size: 12px; color: var(--fog-70); font-weight: 600;
}
.cal-bar { position: absolute; top: 8px; height: 30px; border-radius: 8px; display: flex; align-items: center; padding: 0 9px;
  background: color-mix(in srgb, var(--barc) 88%, transparent); color: #fff; font-size: 11.5px; font-weight: 600;
  text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.35); overflow: hidden; white-space: nowrap;
}
.cal-bar span { overflow: hidden; text-overflow: ellipsis;
}
.cal-bar.clipL { border-top-left-radius: 0; border-bottom-left-radius: 0;
}
.cal-bar.clipR { border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.cal-bar:hover { filter: brightness(1.08); transform: translateY(-1px);
}
.cal-legend { display: flex; gap: 16px; margin-top: 14px; flex-wrap: wrap; font-size: 12px; color: var(--fog-50);
}
.cal-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px;
}
html[data-theme="light"] .liner:hover { background: color-mix(in srgb, var(--volt) 10%, #fff);
}
html[data-theme="light"] .liner .ln-t,
html[data-theme="light"] .pcard-body h3,
html[data-theme="light"] .cj-prop,
html[data-theme="light"] .cal-day .cdn { color: var(--fog);
}
html[data-theme="light"] .pcard-photo,
html[data-theme="light"] .cal-day { border-color: rgba(0,0,0,.08);
}
html[data-theme="light"] .cal-prop { background: rgba(255,255,255,.86);
}
html[data-theme="light"] .cal-row,
html[data-theme="light"] .cjcard,
html[data-theme="light"] .pcard { border-color: rgba(0,0,0,.08);
}
html[data-theme="light"] .cjcol-h .cjn { background: color-mix(in srgb, var(--volt) 18%, #fff);
}
html[data-theme="light"] .pres:hover { background: color-mix(in srgb, var(--volt) 12%, #fff);
}
html[data-theme="light"] .cal-day.wknd { background: rgba(0,0,0,.03);
}
.msg-edit { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: start;
}
.msg-prev { position: sticky; top: 0;
}
.mail { padding: 0; overflow: hidden;
}
.mail-h { padding: 14px 16px; border-bottom: 1px solid var(--stroke);
}
.mail-from { font-size: 11.5px; color: var(--fog-50);
}
.mail-subj { font-weight: 700; color: var(--fog); margin-top: 3px; font-size: 14.5px;
}
.mail-body { padding: 16px; font-size: 13.5px; color: var(--fog-70); line-height: 1.6; white-space: normal;
}
.ph-pal { margin-top: 12px;
}
.ph-chip { display: inline-block; font-family: ui-monospace, monospace; font-size: 11px; color: var(--volt);
  background: var(--volt-soft); border: 1px solid color-mix(in srgb, var(--volt) 30%, transparent);
  border-radius: 7px; padding: 3px 7px; margin: 0 5px 5px 0; cursor: pointer;
}
.ph-chip:hover { background: color-mix(in srgb, var(--volt) 22%, transparent);
}
.sw { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer;
}
.sw input { display: none;
}
.sw span { position: absolute; inset: 0; background: var(--glass-2); border: 1px solid var(--stroke-2); border-radius: 999px; transition: .2s;
}
.sw span::after { content: ''; position: absolute; left: 2px; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--fog-50); transition: .2s;
}
.sw input:checked + span { background: color-mix(in srgb, var(--volt) 30%, transparent); border-color: color-mix(in srgb, var(--volt) 50%, transparent);
}
.sw input:checked + span::after { transform: translateX(18px); background: linear-gradient(135deg, var(--volt-hi), var(--volt-lo));
}
@media (max-width: 800px) {
  .msg-edit { grid-template-columns: 1fr;
  }
  .msg-prev { position: static;
  }
}
.tkgrp { margin-top: 18px;
}
.tkgrp-h { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fog-50); margin: 0 2px 10px;
}
.tkgrp-h .cjn { background: var(--volt-soft); color: var(--volt); border-radius: 999px; padding: 1px 8px; font-size: 11px;
}
.tkgrp.od .tkgrp-h { color: var(--bad);
}
.tkgrp.od .tkgrp-h .cjn { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad);
}
.tkgrp.dn { opacity: .72;
}
.tkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px;
}
.tkcard { display: block; text-decoration: none; padding: 14px 15px; border-left: 3px solid var(--stroke-2);
}
.tkcard.p-high { border-left-color: var(--bad);
}
.tkcard.p-normal { border-left-color: color-mix(in srgb, var(--volt) 60%, transparent);
}
.tk-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.tk-title { color: var(--fog); font-weight: 600; font-size: 14px; line-height: 1.35; min-width: 0;
}
.tk-cycle { cursor: pointer; flex-shrink: 0; transition: transform .15s ease;
}
.tk-cycle:hover { transform: scale(1.06);
}
.tk-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px;
}
.tk-tag { font-size: 11px; color: var(--fog-70); background: var(--glass); border: 1px solid var(--stroke); border-radius: 999px; padding: 2px 9px;
}
.tk-tag.hi { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); background: color-mix(in srgb, var(--bad) 8%, transparent);
}
.tk-due { font-size: 11.5px; color: var(--fog-50); margin-left: auto; white-space: nowrap;
}
.tk-due.od { color: var(--bad); font-weight: 700;
}
.tk-empty { text-align: center; padding: 36px 20px;
}
.tk-empty .em { width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--volt); background: var(--volt-soft); border: 1px solid color-mix(in srgb, var(--volt) 30%, transparent);
}
.tk-empty p { color: var(--fog-50); margin: 0 0 14px;
}
.cjcard { padding: 0; overflow: hidden;
}
.cj-photo { height: 72px; background: linear-gradient(180deg, rgba(6, 14, 32, .16), rgba(6, 14, 32, .5)), var(--photo) center / cover no-repeat, var(--glass-2);
  padding: 9px 11px; display: flex; align-items: flex-start;
}
.cj-photo .cj-top { margin-bottom: 0; width: 100%;
}
.cj-body { padding: 11px 14px 13px;
}
.cj-warn { font-size: 11px; font-weight: 700; color: #ffd7dd; background: color-mix(in srgb, var(--bad) 55%, rgba(7,8,11,.5));
  border-radius: 999px; padding: 2px 9px;
}
.modal-brand { margin: -26px -26px 18px; padding: 18px 26px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--volt) 22%, var(--stroke));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(120deg, color-mix(in srgb, var(--volt) 14%, transparent) 0%, transparent 60%);
}
.modal-brand .mb-kick { display: block; font-size: 10px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: var(--volt); margin-bottom: 5px;
}
.modal-brand h2 { margin-bottom: 0; font-family: var(--font-d);
}
.tbl-empty { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 34px 16px; color: var(--fog-50); font-size: 13px;
}
.tbl-empty .te-ic { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--volt); background: var(--volt-soft); border: 1px solid color-mix(in srgb, var(--volt) 28%, transparent);
}
.kpi.wdg { display: flex; flex-direction: column;
}
.wdg-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.spark { width: 118px; height: 42px; flex-shrink: 0; margin-top: 4px; opacity: .95;
}
.delta .d-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px;
  font-weight: 700; font-size: 11px; background: var(--glass-2); border: 1px solid var(--stroke);
}
.delta.up .d-pill { color: var(--good); background: color-mix(in srgb, var(--good) 10%, transparent); border-color: color-mix(in srgb, var(--good) 30%, transparent);
}
.delta.down .d-pill { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); border-color: color-mix(in srgb, var(--bad) 30%, transparent);
}
.wdg-controls { flex-wrap: wrap; gap: 10px;
}
.wdg-ctl { display: flex; align-items: center; gap: 8px;
}
.ctl-sel { background: var(--glass-2); border: 1px solid var(--stroke); color: var(--fog); border-radius: 9px;
  padding: 6px 10px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.ctl-sel:focus { outline: none; border-color: color-mix(in srgb, var(--volt) 45%, transparent);
}
.wtabs { display: flex; gap: 6px; flex-wrap: wrap;
}
.wtab { background: none; border: 1px solid transparent; color: var(--fog-50); font: inherit; font-size: 12.5px;
  font-weight: 600; padding: 6px 11px; border-radius: 999px; cursor: pointer; transition: all .18s;
}
.wtab:hover { color: var(--fog);
}
.wtab.on { color: var(--volt); background: var(--volt-soft); border-color: color-mix(in srgb, var(--volt) 30%, transparent);
}
.ota { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--stroke); white-space: nowrap; flex-shrink: 0;
}
.ota-abnb { color: #ff8087; background: rgba(255, 90, 95, .1); border-color: rgba(255, 90, 95, .32);
}
.ota-bdc { color: #7db8ff; background: rgba(59, 130, 246, .12); border-color: rgba(59, 130, 246, .34);
}
.ota-direct { color: var(--volt); background: var(--volt-soft); border-color: color-mix(in srgb, var(--volt) 34%, transparent);
}
.ota-other { color: var(--fog-50);
}
.ragrow { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; text-decoration: none; transition: background .15s;
}
.ragrow:hover { background: var(--glass-2);
}
.ragdot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.ragdot.ok { background: var(--good); box-shadow: 0 0 10px color-mix(in srgb, var(--good) 60%, transparent);
}
.ragdot.warn { background: var(--amber); box-shadow: 0 0 10px color-mix(in srgb, var(--amber) 60%, transparent);
}
.ragdot.bad { background: var(--bad); box-shadow: 0 0 10px color-mix(in srgb, var(--bad) 60%, transparent); animation: ragPulse 1.6s ease-in-out infinite;
}
.ragdot.info { background: #7db8ff; box-shadow: 0 0 10px rgba(125, 184, 255, .5);
}
@keyframes ragPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .ragdot.bad { animation: none;
  }
}
.raglbl { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.raglbl.ok { color: var(--good);
}
.raglbl.warn { color: var(--amber);
}
.raglbl.bad { color: var(--bad);
}
.raglbl.info { color: #7db8ff;
}
.ops-strip { display: flex; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--stroke); flex-wrap: wrap;
}
.ops-stat { flex: 1; min-width: 86px; text-align: center; padding: 10px 8px; border-radius: 12px; background: var(--glass-2);
  border: 1px solid var(--stroke); font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--fog-50);
}
.ops-stat b { display: block; font-family: var(--font-d); font-size: 19px; letter-spacing: 0; text-transform: none; color: var(--fog); margin-bottom: 3px; font-variant-numeric: tabular-nums;
}
.ops-stat.alert { border-color: color-mix(in srgb, var(--bad) 40%, transparent);
}
.ops-stat.alert b { color: var(--bad);
}
.ccal-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 14px 0 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fog-50); text-align: center;
}
.ccal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.ccal-cell { min-height: 84px; border-radius: 12px; background: var(--glass-2); border: 1px solid var(--stroke); padding: 7px 7px 6px; position: relative;
}
.ccal-cell.pad { background: none; border-color: transparent;
}
.ccal-cell.today { border-color: color-mix(in srgb, var(--volt) 55%, transparent); box-shadow: 0 0 14px var(--volt-glow, rgba(200,169,110,.2));
}
.ccal-cell.today .ccal-d { color: var(--volt);
}
.ccal-d { font-size: 11.5px; font-weight: 700; color: var(--fog-50); display: block; margin-bottom: 5px;
}
.ccal-job { display: flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 8px; margin-bottom: 4px;
  font-size: 10.5px; font-weight: 700; text-decoration: none; border: 1px solid transparent; overflow: hidden; white-space: nowrap; transition: transform .12s;
}
.ccal-job:hover { transform: translateY(-1px);
}
.ccal-job .cj-code { flex-shrink: 0;
}
.ccal-job .cj-who { font-weight: 500; opacity: .85; overflow: hidden; text-overflow: ellipsis;
}
.ccal-job .b2b { flex-shrink: 0;
}
.j-sch { color: #7db8ff; background: rgba(59, 130, 246, .13); border-color: rgba(59, 130, 246, .3);
}
.j-prog { color: var(--amber); background: color-mix(in srgb, var(--amber) 13%, transparent); border-color: color-mix(in srgb, var(--amber) 34%, transparent);
}
.j-done { color: var(--good); background: color-mix(in srgb, var(--good) 11%, transparent); border-color: color-mix(in srgb, var(--good) 30%, transparent);
}
.j-ver { color: var(--volt); background: var(--volt-soft); border-color: color-mix(in srgb, var(--volt) 34%, transparent);
}
.j-can { color: var(--fog-50); background: var(--glass-2); text-decoration: line-through;
}
.j-prob { border-color: color-mix(in srgb, var(--bad) 55%, transparent) !important; box-shadow: 0 0 8px color-mix(in srgb, var(--bad) 30%, transparent);
}
.cal-legend .lg-sch { background: #7db8ff;
}
.cal-legend .lg-prog { background: var(--amber);
}
.cal-legend .lg-done { background: var(--good);
}
.cal-legend .lg-ver { background: var(--volt);
}
.cal-legend .lg-prob { background: var(--bad);
}
@media (max-width: 900px) {
  .ccal-cell { min-height: 58px; padding: 5px;
  }
  .ccal-job .cj-who { display: none;
  }
}
.paycard { display: flex; flex-direction: column;
}
.pay-strip { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.pay-strip .ops-stat { min-width: 96px;
}
.rate-matrix input,
.rate-matrix select { background: var(--glass-2); border: 1px solid var(--stroke); color: var(--fog);
  border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px;
}
.rate-matrix input:focus,
.rate-matrix select:focus { outline: none; border-color: color-mix(in srgb, var(--volt) 45%, transparent);
}
.probgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px;
}
.probcard { display: block; padding: 16px 18px; text-decoration: none; border-left: 3px solid var(--bad);
}
.prob-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; color: var(--fog); font-size: 14px;
}
.prob-txt { color: var(--fog-50); font-size: 12.5px; line-height: 1.55; margin: 0 0 9px;
}
.chk-row input,
.sup-row input { background: var(--glass-2); border: 1px solid var(--stroke); color: var(--fog);
  border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13px;
}
.chk-row input:focus,
.sup-row input:focus { outline: none; border-color: color-mix(in srgb, var(--volt) 45%, transparent);
}
html[data-theme="light"] .ops-stat b { color: var(--ink-2, #1a2233);
}
html[data-theme="light"] .ccal-cell { background: rgba(255, 255, 255, .72);
}
html[data-theme="light"] .j-sch { color: #1d4ed8;
}
html[data-theme="light"] .j-done { color: #15803d;
}
html[data-theme="light"] .raglbl.ok { color: #15803d;
}
html[data-theme="light"] .ragdot.info,
html[data-theme="light"] .raglbl.info { color: #1d4ed8;
}
.ci-thumbs { display: flex; flex-wrap: wrap; gap: 10px;
}
.ci-thumbs figure { width: 150px;
}
.ci-thumbs img { width: 150px; height: 110px; object-fit: cover; border-radius: 12px; border: 1px solid var(--stroke); display: block; cursor: zoom-in;
}
.ci-thumbs .vid { width: 150px; height: 110px; border-radius: 12px; border: 1px solid var(--stroke); display: flex; align-items: center; justify-content: center; font-size: 26px; background: var(--glass-2);
}
html[data-theme="light"] .ota-abnb { color: #c2333c;
}
html[data-theme="light"] .ota-bdc { color: #1d4ed8;
}
html[data-theme="light"] .j-prog,
html[data-theme="light"] .raglbl.warn { color: #92600a;
}
html[data-theme="light"] .j-ver { color: var(--volt);
}
.ft-bar {padding:12px 14px
}
.ft-row {display:flex;flex-wrap:wrap;gap:10px;align-items:center
}
.ft-q {flex:1 1 260px;min-width:200px
}
.ft-bar .ctl-sel {flex:0 1 auto
}
.ft-dr {display:inline-flex;align-items:center;gap:6px
}
.ft-d {width:auto;min-width:132px
}
.ft-dash {color:var(--muted);font-size:12px
}
.ft-count {margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap;
  font-family:var(--font-m,ui-monospace,monospace);letter-spacing:.04em
}
.ft-th {cursor:pointer;user-select:none;white-space:nowrap
}
.ft-th:hover {color:var(--volt)
}
.ft-th.on {color:var(--volt)
}
.ft-pager {display:flex;gap:12px;align-items:center;justify-content:center;padding:12px 0 4px
}
.tbl tfoot td {border-top:1px solid var(--stroke-2,rgba(255,255,255,.14));padding-top:10px
}
.ft-bar .inp {background:var(--glass-2,rgba(255,255,255,.05));border:1px solid var(--stroke,rgba(255,255,255,.12));
  border-radius:10px;padding:9px 12px;color:var(--fog,#f4f3f0);font:inherit;font-size:14px
}
.ft-bar .inp:focus {outline:none;border-color:var(--volt);box-shadow:0 0 0 3px color-mix(in srgb,var(--volt) 22%,transparent)
}
@media(max-width:640px) {
  .ft-count {margin-left:0;width:100%
  }
  .ft-q {flex:1 1 100%
  }
}
.lc-wrap {display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px
}
.lc-wrap.with-panel {grid-template-columns:1fr 330px
}
@media(max-width:1100px) {
  .lc-wrap.with-panel {grid-template-columns:1fr
  }
}
.lc-top {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap
}
.lc-title {display:flex;align-items:center;gap:12px;flex-wrap:wrap
}
.lc-title h2 {margin:0;font-size:22px;letter-spacing:-.01em
}
.lc-nav {display:flex;gap:6px
}
.lc-dow {display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px
}
.lc-dow span {font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fog-50);padding:0 4px
}
.lc-grid {display:flex;flex-direction:column;gap:6px
}
.lc-week {position:relative
}
.lc-cells {display:grid;grid-template-columns:repeat(7,1fr);gap:6px
}
.lc-cell {position:relative;min-height:var(--cellh,104px);border:1px solid var(--stroke);border-radius:12px;
  background:var(--glass-2);padding:8px 10px;transition:border-color .15s,background .15s
}
.lc-cell.out {opacity:.35
}
.lc-cell.past {background:transparent;border-style:dashed
}
.lc-cell.today {border-color:var(--volt)
}
.lc-cell:hover {border-color:var(--stroke-2)
}
.lc-num {font-size:13px;font-weight:600;color:var(--fog)
}
.lc-num.bk {text-decoration:line-through;text-decoration-thickness:1px;opacity:.7
}
.lc-dot {display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--volt);color:var(--volt-ink,#08121a);font-style:normal;font-size:12px;font-weight:700
}
.lc-rate {position:absolute;left:10px;bottom:8px;font-size:12px;color:var(--fog-50)
}
.lc-rate.got {color:var(--fog);font-weight:700
}
.lc-min {position:absolute;right:10px;bottom:8px;font-size:10px;color:var(--fog-50);letter-spacing:.04em
}
.lc-clean {position:absolute;right:9px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--fog-50)
}
.lc-clean.s-completed,
.lc-clean.s-verified {background:#3ecf8e
}
.lc-clean.s-in_progress {background:#f5b544
}
.lc-clean.s-scheduled {background:var(--volt)
}
.lc-pills {position:absolute;inset:34px 0 0 0;display:grid;grid-template-columns:repeat(7,1fr);
  gap:6px;grid-auto-rows:28px;align-content:start;pointer-events:none;padding:0
}
.lc-pill {pointer-events:auto;display:flex;align-items:center;gap:7px;height:24px;margin:0 3px;
  padding:0 10px;border-radius:999px;background:var(--panel-solid,var(--glass));
  border:1px solid var(--stroke-2);box-shadow:var(--shadow);text-decoration:none;color:var(--fog);
  font-size:12px;overflow:hidden;white-space:nowrap;transition:transform .12s,box-shadow .12s
}
.lc-pill:hover {transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.28)
}
.lc-pill.clipl {border-top-left-radius:4px;border-bottom-left-radius:4px;margin-left:0
}
.lc-pill.clipr {border-top-right-radius:4px;border-bottom-right-radius:4px;margin-right:0
}
.lc-src {width:8px;height:8px;border-radius:50%;background:var(--pc);flex:0 0 auto
}
.lc-pg {font-weight:600;overflow:hidden;text-overflow:ellipsis
}
.lc-pv {color:var(--volt);font-weight:700
}
.lc-pn,
.lc-pp {color:var(--fog-50);font-size:11px
}
.lc-pp {border-left:1px solid var(--stroke);padding-left:7px
}
.lc-legend {display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;
  font-size:11.5px;color:var(--fog-50)
}
.lc-legend i {display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px
}
.lc-panel {align-self:start;position:sticky;top:18px;display:flex;flex-direction:column
}
.lc-ph {display:flex;align-items:center;gap:8px;margin-bottom:12px
}
.lc-ph h3 {margin:0;font-size:15px
}
.lc-row {display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--stroke);cursor:pointer
}
.lc-rt {font-size:13.5px;font-weight:600
}
.lc-rs {font-size:11.5px;color:var(--fog-50);margin-top:2px;max-width:210px
}
.lc-sw {width:38px;height:22px;-webkit-appearance:none;appearance:none;border-radius:999px;
  background:var(--stroke-2);position:relative;cursor:pointer;transition:background .18s;flex:0 0 auto
}
.lc-sw::after {content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:transform .18s
}
.lc-sw:checked {background:var(--volt)
}
.lc-sw:checked::after {transform:translateX(16px)
}
.lc-seg {display:flex;border:1px solid var(--stroke-2);border-radius:999px;overflow:hidden;margin-top:8px
}
.lc-seg button {flex:1;padding:9px 0;background:transparent;border:0;color:var(--fog-50);
  font:inherit;font-size:13px;cursor:pointer
}
.lc-seg button.on {background:var(--volt);color:var(--volt-ink,#08121a);font-weight:700
}
.lc-pf {margin-top:auto;padding-top:18px
}
@media(max-width:760px) {
  .lc-cell {min-height:76px;padding:6px 7px;border-radius:9px
  }
  .lc-cells,
  .lc-pills,
  .lc-dow {gap:3px
  }
  .lc-pills {inset:24px 0 0 0;grid-auto-rows:22px
  }
  .lc-pill {height:18px;font-size:10.5px;padding:0 6px;gap:4px;margin:0 1px
  }
  .lc-pv,
  .lc-pn,
  .lc-pp {display:none
  }
  .lc-rate {font-size:10.5px;left:7px;bottom:5px
  }
  .lc-min {display:none
  }
  .lc-title h2 {font-size:18px
  }
}
#demo-banner {position:fixed;left:0;right:0;bottom:0;z-index:9999;
  padding:11px 18px;text-align:center;font-size:13px;line-height:1.5;
  background:#b4331f;color:#fff;box-shadow:0 -6px 22px rgba(0,0,0,.35)
}
#demo-banner b {letter-spacing:.02em
}
#demo-banner a {color:#fff;text-decoration:underline
}
body.has-demo-banner #main {padding-bottom:64px
}
@media(max-width:760px) {
  #demo-banner {font-size:11.5px;padding:9px 12px
  }
}
.fin-step {display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--stroke)
}
.fin-step:last-child {border-bottom:0
}
.fin-l {color:var(--fog-70)
}
.fin-v {font-weight:700;font-variant-numeric:tabular-nums
}
.fin-step.neg .fin-v {color:var(--bad,#e06c5b)
}
.fin-step.tot {border-top:1px solid var(--stroke-2);margin-top:4px;padding-top:14px
}
.fin-step.tot .fin-l {color:var(--fog);font-weight:700
}
.fin-step.tot .fin-v {font-size:20px;color:var(--volt)
}

/* ════════════════════════════════════════════════════════════════════════════════════════
   CRM SCREENS — contacts, tags, saved lists, the timeline and follow-ups (4 October 2026)
   ════════════════════════════════════════════════════════════════════════════════════════ */
.crm-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: start; margin-top: 16px; }
.crm-two > * { min-width: 0; }
@media (max-width: 900px) { .crm-two { grid-template-columns: minmax(0, 1fr); } }
.note-bar { border-left: 3px solid var(--warn); font-size: 13.5px; margin-top: 14px; }
.note-bar.bad { border-left-color: var(--bad); }
.note-bar .btn { margin-left: 8px; }
.panel > h3 { font-size: 13px; letter-spacing: 0.04em; margin-bottom: 12px; color: var(--fog-70); }

/* a tag: its colour is --tc, set inline from the tag's own colour */
.tagc { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-family: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--fog); background: color-mix(in srgb, var(--tc, var(--volt)) 16%, transparent); border: 1px solid color-mix(in srgb, var(--tc, var(--volt)) 46%, transparent); white-space: nowrap; }
.tagc::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--tc, var(--volt)); flex: none; }
button.tagc { cursor: pointer; }
.tagc.on { background: color-mix(in srgb, var(--tc, var(--volt)) 40%, transparent); border-color: var(--tc, var(--volt)); }
.tagc button { all: unset; cursor: pointer; opacity: 0.6; padding: 0 2px; font-size: 14px; line-height: 1; }
.tagc button:hover { opacity: 1; }
.tagstrip, .viewstrip { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.viewstrip { margin-top: 16px; }
.tagstrip { margin-top: 12px; }
.panel .tagstrip { margin-top: 0; }

/* a saved list */
.vchip { font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px; cursor: pointer; color: var(--fog-70); background: var(--glass); border: 1px solid var(--stroke); }
.vchip:hover { color: var(--fog); border-color: var(--stroke-2); }
.vchip.on { color: var(--volt); border-color: color-mix(in srgb, var(--volt) 50%, transparent); background: var(--volt-soft); }
.vchip.add { border-style: dashed; }

.kvrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--stroke); font-size: 13.5px; }
.kvrow:first-of-type { border-top: 0; }
.kvrow a { color: var(--fog); font-weight: 500; overflow-wrap: anywhere; }
.checkrow { display: flex; flex-wrap: wrap; gap: 8px 16px; }

.quickadd { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin-top: 10px; }
.quickadd input, .quickadd textarea { flex: 1 1 180px; min-width: 0; background: var(--glass); border: 1px solid var(--stroke); color: var(--fog); border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 13.5px; }
.quickadd input[type="date"] { flex: 0 0 150px; }
.taskrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--stroke); font-size: 13.5px; cursor: pointer; }
.taskrow:first-child { border-top: 0; }
.taskrow > span:first-of-type { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.taskrow.done > span:first-of-type { text-decoration: line-through; color: var(--fog-50); }
.taskrow.late .muted { color: var(--bad); }
.taskrow input { width: 17px; height: 17px; accent-color: var(--volt); flex: none; }

/* the timeline */
.tl { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; padding: 11px 0; border-top: 1px solid var(--stroke); font-size: 13.5px; }
.tl:first-child { border-top: 0; }
.tl-when { color: var(--fog-50); font-size: 11.5px; line-height: 1.45; }
.tl-body { color: var(--fog-70); margin-top: 3px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-x { all: unset; cursor: pointer; color: var(--fog-30); font-size: 16px; padding: 0 4px; }
.tl-x:hover { color: var(--bad); }
.tl-system .tl-what { color: var(--fog-50); }
@media (max-width: 520px) { .tl { grid-template-columns: minmax(0, 1fr) auto; } .tl-when { grid-column: 1 / -1; } }

/* the pipeline board: a column per stage; scrolls sideways inside itself, never the page */
.plboard { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 12px; margin-top: 16px; overflow-x: auto; padding-bottom: 10px; align-items: start; }
.plcol { display: flex; flex-direction: column; gap: 9px; min-height: 120px; padding: 8px; border-radius: 16px; border: 1px dashed transparent; }
.plcol.over { border-color: var(--volt); background: var(--volt-soft); }
.plcol.k-won .cjcol-h { color: var(--good); }
.plcol.k-lost .cjcol-h { color: var(--bad); }
.pl-sum { font-size: 11.5px; color: var(--fog-50); padding: 0 4px; }
.pl-empty { font-size: 12.5px; color: var(--fog-30); padding: 14px 6px; text-align: center; }
.pl-more { font-size: 12px; color: var(--volt); padding: 4px 6px; }
.plcard { padding: 12px 13px; cursor: grab; border-radius: 14px; }
.plcard:active { cursor: grabbing; }
.pl-t { font-weight: 600; font-size: 13.5px; color: var(--fog); line-height: 1.35; overflow-wrap: anywhere; }
.pl-m { font-size: 12px; color: var(--fog-50); margin-top: 3px; }
.pl-f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; font-size: 12px; }
.pl-f b { color: var(--fog); font-variant-numeric: tabular-nums; }
.pl-age { margin-left: auto; color: var(--fog-50); font-size: 11.5px; }
.pl-own { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; background: var(--volt-soft); color: var(--volt); }
.pl-move { display: none; width: 100%; margin-top: 9px; }
@media (hover: none), (max-width: 900px) { .pl-move { display: block; } }

/* a lead's stages, and a pipeline's, as a row of steps */
.stepper { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.step { font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; color: var(--fog-70); background: var(--glass); border: 1px solid var(--stroke); }
button.step { cursor: pointer; }
button.step:hover { color: var(--fog); border-color: var(--stroke-2); }
.step.on { color: var(--volt-ink); background: linear-gradient(135deg, var(--volt-hi), var(--volt-lo)); border-color: transparent; }
.step.k-won.on { background: var(--good); }
.step.k-lost.on { background: var(--bad); color: #fff; }
.step b { margin-left: 5px; color: var(--fog); }
.stagerow { display: flex; gap: 7px; align-items: center; margin-bottom: 7px; flex-wrap: wrap; }
.stagerow .st-name { flex: 1 1 160px; min-width: 0; background: var(--glass); border: 1px solid var(--stroke); color: var(--fog); border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 13.5px; }

/* ═══════════════ DOCUMENT SCREENS (the board, one document, its files) ═══════════════ */
.chip.c-muted { color: var(--fog-50); border-color: var(--stroke-2); background: rgba(255, 255, 255, 0.04); }
html[data-theme="light"] .chip.c-muted { color: var(--fog-70); background: rgba(0, 0, 0, 0.05); }
.band .bstat.bad b { color: var(--bad); }
.band .bstat.warn b { color: var(--warn); }
.doc-nofile { color: var(--warn); font-size: 12px; }
.docfile { align-items: center; gap: 10px; }
.docfile .df-name { min-width: 0; overflow-wrap: anywhere; }
.docfile .df-act { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.kvrow.here { font-weight: 600; }
.dropzone { margin-top: 12px; padding: 14px; border: 1px dashed var(--stroke-2); border-radius: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; transition: border-color .15s, background .15s; }
.dropzone.over { border-color: var(--volt); background: color-mix(in srgb, var(--volt) 8%, transparent); }
.doc-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; }
.doc-hint .vchip { flex: none; width: auto; }
.doc-view { display: block; width: 100%; max-height: 72vh; margin-top: 12px; border: 1px solid var(--stroke); border-radius: 12px; background: #fff; }
iframe.doc-view { height: 72vh; }
img.doc-view { object-fit: contain; background: rgba(0, 0, 0, 0.25); }
@media (max-width: 720px) { .docfile { flex-direction: column; align-items: flex-start; } iframe.doc-view { height: 60vh; } }

/* ═══════════════ DEAL INBOX (candidates, the stack, the verdict, areas) ═══════════════ */
.tbl th.num, .tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.fnd-verdict { margin-top: 14px; border-left: 3px solid var(--stroke-2); }
.fnd-verdict.fnd-deal { border-left-color: var(--good); }
.fnd-verdict.fnd-renegotiate { border-left-color: var(--warn); }
.fnd-verdict.fnd-no_deal { border-left-color: var(--bad); }
.fnd-verdict h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fnd-why { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--fog-70); display: grid; gap: 4px; }
.fnd-bar { font-size: 12.5px; color: var(--warn); margin-top: 4px; white-space: normal; }
.fnd-used { display: grid; gap: 4px; margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--stroke-2); border-radius: 10px; font-size: 12.5px; color: var(--fog-70); }
.fnd-used b { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fog-50); }
.fnd-opinion { font-size: 12.5px; color: var(--fog-70); border-left: 3px solid var(--info); padding: 6px 10px; margin-top: 10px; }
.fnd-fit { margin-top: 10px; font-size: 13.5px; }
.fnd-stack tbody td { vertical-align: top; white-space: normal; }
.fnd-stack tbody td:first-child, .fnd-stack tbody td.num { white-space: nowrap; }
.fnd-stack tbody tr { cursor: default; }
.fnd-stack td.num b { font-family: var(--font-d); color: var(--fog); }
#fnd-searches .vchip b { margin-left: 4px; color: var(--fog); }
#ft-finder .tbl tbody td { white-space: normal; vertical-align: top; }
#ft-finder .tbl tbody td.num, #ft-finder .tbl tbody td .muted.nw { white-space: nowrap; }
/* the stays list: a cell wraps, so the key code is on the screen beside the money. On a phone each stay is a card and nothing scrolls sideways */
#ft-stays .tbl tbody td { white-space: normal; vertical-align: top; }
#ft-stays .tbl tbody td .nw { white-space: nowrap; }
#ft-stays .tbl tbody td.st-home { min-width: 128px; }
#ft-stays .st-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.st-rule-h { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog-50); }
.st-rule { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; padding: 11px 13px; border: 1px solid var(--stroke); border-radius: 12px; cursor: pointer; font-size: 13.5px; line-height: 1.45; color: var(--fog-70); }
.st-rule input { flex: none; margin: 3px 0 0; accent-color: var(--volt); }
.st-rule:has(input:checked) { border-color: color-mix(in srgb, var(--volt) 55%, transparent); color: var(--fog); }
.st-rule:has(input:disabled) { cursor: default; }
#sc-rule { margin-bottom: 12px; }
#st-homes .tbl tbody tr { cursor: default; }
@media (max-width: 720px) {
  #ft-stays .tbl, #ft-stays .tbl tbody { display: block; }
  #ft-stays .tbl thead { display: none; }
  #ft-stays .tbl tbody tr { display: grid; gap: 7px; padding: 14px 2px; border-bottom: 1px solid var(--stroke); }
  #ft-stays .tbl tbody td, #ft-stays .tbl tbody td.st-home { display: block; min-width: 0; padding: 0 12px; border: 0; }
  #st-homes .tbl, #st-homes .tbl tbody { display: block; }
  #st-homes .tbl thead { display: none; }
  #st-homes .tbl tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 14px 2px; border-bottom: 1px solid var(--stroke); cursor: default; }
  #st-homes .tbl tbody td { display: block; padding: 0 12px; border: 0; white-space: normal; }
  #st-homes .tbl tbody td:first-child, #st-homes .tbl tbody td:last-child { grid-column: 1 / -1; }
  #st-homes .tbl tbody td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 3px; font-size: 11px; color: var(--fog-50); }
}
@media (max-width: 720px) { .fnd-stack thead { display: none; } .fnd-stack tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--stroke); }
  .fnd-stack tbody td { padding: 2px 0; border: 0; } .fnd-stack tbody td:first-child, .fnd-stack tbody td:nth-child(4), .fnd-stack tbody td:nth-child(5) { grid-column: 1 / -1; }
  .fnd-stack tbody td.num { text-align: left; } .fnd-stack tbody td.num::before { content: attr(data-l) ' '; color: var(--fog-50); font-size: 11.5px; } }

/* ═══════════════ PROJECT SCREENS (homes, the deal, the works, the money, papers) ═══════════════ */
.tbl td.over, .tbl tbody td.over, .over { color: var(--bad); font-weight: 600; }
/* a small list edited in place (shares, rooms, quotes, funding). Up to four columns sit on one line under a row of
   headings; with more than four (or in a narrow space) every box carries its own label. Each cell is a .fld, so it
   looks and themes exactly like the rest of a form. */
.rowsed { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 10px; }
.rowsed-h, .rowsed.few .rcells { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 8px; }
.rowsed-h { padding-right: 36px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog-50); }
.rowed { display: flex; gap: 8px; align-items: flex-end; }
.rowed .rcells { flex: 1 1 auto; min-width: 0; }
.rowed .rc { min-width: 0; gap: 4px; }
.rowed .rc > span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog-50); }
.rowsed.few .rc > span { display: none; }
.rowed .rc input, .rowed .rc select { width: 100%; min-width: 0; font-size: 13.5px; border-radius: 11px; }
.rowed .rc input { padding: 9px 12px; }
.rowed .rc select.fsel { padding: 9px 30px 9px 12px; font-weight: 400; color: var(--fog); }
.rowed .tl-x { flex: 0 0 22px; text-align: center; margin-bottom: 9px; }
.rowsed.many .rcells { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 10px; }
.rowsed.many .rowed { padding: 10px 12px; border: 1px solid var(--stroke); border-radius: 12px; align-items: flex-start; }
/* it is the room the list itself has that decides, not the screen: a four-column list in a narrow panel is as cramped as on a phone */
.rowsed { container-type: inline-size; }
@container (max-width: 520px) {
  .rowsed-h { display: none; }
  .rowsed.few .rc > span { display: block; }
  .rowsed.few .rcells { grid-template-columns: 1fr 1fr; }
  .rowsed.few .rowed { padding: 10px 12px; border: 1px solid var(--stroke); border-radius: 12px; align-items: flex-start; }
}
/* a heading that carries a button keeps it on its own side, clear of the first row beneath */
.panel > h3:has(> button) { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.panel > h3 > button { flex: 0 0 auto; }
/* in the deal form a long label wraps: the boxes still line up along the bottom of each row */
.an-grid .fld { justify-content: flex-end; }
.an-big { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 6px; }
.an-fig { padding: 12px 14px; border: 1px solid var(--stroke); border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.an-fig b { display: block; font-family: var(--font-d); font-size: 22px; color: var(--fog); }
.an-fig span { font-size: 12px; color: var(--fog-50); }
.an-fig em { display: block; font-style: normal; font-size: 12px; color: var(--warn); margin-top: 3px; }
.an-miss { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--warn); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--warn) 7%, transparent); font-size: 13px; }
.an-miss b { display: block; margin-bottom: 4px; }
.an-miss span { display: block; color: var(--fog-70); }
@media (min-width: 901px) { .an-sticky { position: sticky; top: 14px; } }
.phgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.phcell2 { position: relative; margin: 0; }
.phcell2 .ph-img { height: 100px; border-radius: 10px; border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.04) center / cover no-repeat; }
.phcell2 figcaption { font-size: 11.5px; color: var(--fog-50); margin-top: 4px; overflow-wrap: anywhere; }
.phcell2 .tl-x { position: absolute; top: 4px; right: 4px; background: rgba(7, 8, 11, 0.7); border-radius: 50%; }
.ckrow { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--stroke); }
.ckrow .ck-seg { justify-self: start; }
/* on a phone the four answers sit two by two: every one in reach of a thumb, none hidden off the edge */
@media (max-width: 720px) { .ckrow .ck-seg { display: grid; grid-template-columns: 1fr 1fr; justify-self: stretch; border-radius: 16px; } .ckrow .ck-seg button { text-align: center; padding: 10px 8px; } }
.ckrow .ck-note { width: 100%; font: inherit; font-size: 13.5px; color: var(--fog); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--stroke); border-radius: 11px; padding: 9px 12px; outline: none; }
.ckrow .ck-note:focus { border-color: color-mix(in srgb, var(--volt) 55%, transparent); }
html[data-theme="light"] .ckrow .ck-note { background-color: rgba(20, 28, 48, 0.04); }
.ckrisk { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--stroke); font-size: 13.5px; cursor: pointer; }
.ckrisk input { flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--volt); }
tfoot td { border-top: 1px solid var(--stroke-2); }
.tbl tfoot td { padding: 12px 16px; white-space: nowrap; color: var(--fog); }
.modal code, .panel code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; padding: 1px 5px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); }
html[data-theme="light"] .modal code, html[data-theme="light"] .panel code { background: rgba(20, 28, 48, 0.07); }

/* In the light theme the band's picture is still dark where its buttons sit. The plain and "back" buttons were dark
   text on that picture and could not be read, on every record page. They get a light surface of their own. */
html[data-theme="light"] .band .actions .btn-glass,
html[data-theme="light"] .band .actions .btn-back { background: rgba(255, 255, 255, 0.92); border-color: color-mix(in srgb, var(--volt) 24%, var(--stroke-2)); backdrop-filter: none; }
html[data-theme="light"] .band .actions .btn-back { color: var(--volt); }

/* a paper: a white sheet over the screen and the only thing that prints */
#paper { position: fixed; inset: 0; z-index: 900; overflow: auto; background: rgba(7, 8, 11, 0.86); padding: 0 12px 40px; }
.paper-bar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 210mm; margin: 0 auto; padding: 12px 2px; color: #fff; }
.paper-bar span { display: inline-flex; gap: 8px; }
.paper { box-sizing: border-box; max-width: 210mm; min-height: 297mm; margin: 0 auto; padding: 16mm; background: #fff; color: #14171c; border-radius: 4px; font: 400 10.5pt/1.45 var(--font-ui, system-ui), sans-serif; }
.paper header { border-bottom: 2px solid #14171c; padding-bottom: 8px; margin-bottom: 14px; }
.paper .who { font-size: 9pt; letter-spacing: 0.12em; text-transform: uppercase; color: #5b6470; }
.paper h1 { font-size: 20pt; margin: 2px 0; color: #14171c; }
.paper .ref { font-size: 9.5pt; color: #5b6470; }
.paper h2 { font-size: 12pt; margin: 16px 0 6px; color: #14171c; break-after: avoid; }
.paper h3 { font-size: 10.5pt; margin: 12px 0 4px; color: #14171c; break-after: avoid; }
.paper p { margin: 6px 0; }
.paper dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 16px; margin: 6px 0; }
.paper dt { color: #5b6470; }
.paper dd { margin: 0; font-weight: 600; }
.paper dl.figs dd { text-align: right; }
.paper table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 9.5pt; }
.paper th { text-align: left; font-size: 8.5pt; letter-spacing: 0.06em; text-transform: uppercase; color: #5b6470; border-bottom: 1px solid #14171c; padding: 4px 6px; }
.paper td { padding: 4px 6px; border-bottom: 1px solid #dfe3e8; vertical-align: top; }
.paper tfoot td { border-top: 1px solid #14171c; border-bottom: 0; }
.paper .r { text-align: right; white-space: nowrap; }
.paper .none, .paper .small { color: #5b6470; font-size: 9pt; }
.paper .need { border-left: 3px solid #b7791f; padding: 4px 10px; background: #fdf6e7; }
.paper .shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.paper .shots figure { margin: 0; break-inside: avoid; }
.paper .shots img { width: 100%; height: 42mm; object-fit: cover; border-radius: 3px; display: block; }
.paper .shots figcaption { font-size: 8.5pt; color: #5b6470; margin-top: 2px; }
.paper.letter { font-size: 11pt; line-height: 1.55; }
.paper.letter header { border-bottom: 0; margin-bottom: 22px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.paper.letter .who { font-size: 11pt; letter-spacing: 0.1em; color: #14171c; font-weight: 700; }
.paper.letter p { margin: 0 0 11px; }
.paper.letter .subject { font-weight: 700; margin-bottom: 14px; }
.paper footer { margin-top: 18px; padding-top: 6px; border-top: 1px solid #dfe3e8; font-size: 8.5pt; color: #5b6470; }
tr { break-inside: avoid; }
@media print {
  html.paper-open, html.paper-open body { background: #fff !important; }
  html.paper-open body > *:not(#paper) { display: none !important; }
  html.paper-open #paper { position: static; background: none; padding: 0; overflow: visible; }
  html.paper-open .paper-bar { display: none; }
  html.paper-open .paper { max-width: none; min-height: 0; margin: 0; padding: 0; border-radius: 0; }
}