/* ============================================================
   CrewTime — NLK terminal-operator design language
   deep navy · emerald glow · mono accents · red = risk only
   tablet-first: 16px base, 44px+ touch targets, high contrast
   ============================================================ */
:root {
  --bg:        #0b1626;
  --bg-deep:   #081020;
  --card:      #101e30;
  --card-2:    #142538;
  --border:    #1e3350;
  --border-hi: #2a4a70;
  --text:      #e8eef5;
  --muted:     #94a3b8;
  --faint:     #5d748f;
  --emerald:   #30a080;
  --emerald-br:#4ade80;
  --emerald-glow: rgba(48, 160, 128, .35);
  --blue:      #4f8fd9;
  --red:       #f03030;   /* NLK RED — RISK ONLY: breaches, deletes, stops, over-allocation */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(48,160,128,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(79,143,217,.06), transparent 55%),
    var(--bg);
  color: var(--text);
  line-height: 1.5;
  font-size: 18px;   /* whole-site floor — everything rem-scaled */
  min-height: 100vh;
}

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 18px;
  padding-top: max(16px, env(safe-area-inset-top));
  background: rgba(8,16,32,.96);
  /* NOTE: no backdrop-filter here — it creates a containing block that traps
     the position:fixed sidebar nav inside the topbar. 96% opaque bg instead. */
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(48,160,128,.15), 0 4px 24px rgba(0,0,0,.45);
}
.topbar .brand {
  display: inline-flex; align-items: center;
  color: #fff; text-decoration: none; line-height: 1;
  text-shadow: 0 0 26px var(--emerald-glow);
}
.topbar .brand img { height: 34px; width: auto; display: block; }
.topbar .brand svg { max-width: 100%; height: auto; display: block; }
html.light .topbar .brand { color: #0f2438; text-shadow: 0 0 16px var(--emerald-glow); }
html.light .topbar .brand img { filter: none; }
.topbar nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.topbar nav a {
  color: var(--muted); text-decoration: none; font-size: .92rem; font-weight: 600;
  padding: 8px 11px; border-radius: 8px; letter-spacing: .2px;
  transition: color .15s, background .15s;
}
.topbar nav a:hover { color: #fff; background: rgba(48,160,128,.12); }
/* Log out — risk-only red in BOTH themes, all breakpoints (the mobile
   hamburger panel has its own red rule below). */
.topbar nav a.nav-logout { color: var(--red); font-weight: 700; }
.topbar nav a.nav-logout:hover { color: var(--red); background: rgba(255,71,71,.08); }
.topbar .who { color: var(--muted); font-size: .8rem; margin: 0 6px; white-space: nowrap; font-family: var(--mono); }

/* install-app button (desktop inline variant; hamburger variant below) */
.install-app {
  background: linear-gradient(180deg,#0f8f48,#0c7339); color: #fff;
  border: 0; border-radius: 10px; padding: 7px 12px; font-weight: 700;
  font-size: .82rem; cursor: pointer; white-space: nowrap;
}
.install-app:hover { box-shadow: 0 4px 14px rgba(15,143,72,.4); }

/* ---------- layout ---------- */
.container { max-width: 1080px; margin: 0 auto; padding: 16px 16px 56px; }
h1 {
  font-size: 1.4rem; margin: 4px 0 14px; font-weight: 800; letter-spacing: -.2px; color: #f4f8fc;
  font-family: var(--mono); letter-spacing: .3px;
}
h1::before { content: "// "; color: var(--emerald-br); }
h2 { font-size: 1.05rem; margin: 24px 0 10px; font-weight: 700; color: #f4f8fc; letter-spacing: .2px; }
h3 { font-size: .95rem; margin: 16px 0 6px; font-weight: 700; }
/* Section titles: big, centered, emerald, with a divider — every section of
   the daily log / dashboard is instantly identifiable. */
.sec-title {
  font-size: 1.35rem; font-weight: 800; text-align: center; margin: 26px 0 14px;
  color: var(--emerald-br); letter-spacing: .4px;
  display: flex; align-items: center; gap: 14px;
}
.sec-title::before, .sec-title::after {
  content: ""; flex: 1; height: 2px;
  background: linear-gradient(90deg, transparent, var(--emerald), transparent);
  opacity: .55;
}
html.light .sec-title { color: var(--emerald); }
.muted { color: var(--muted); font-size: .88rem; }
strong { font-weight: 700; }
code { font-family: var(--mono); background: var(--bg-deep); padding: 2px 7px; border-radius: 6px; font-size: .9rem; color: var(--emerald-br); border: 1px solid var(--border); }

/* ---------- login tabs (foreman vs manager/admin) ---------- */
.login-tabs { display: flex; gap: 8px; margin: 14px 0 12px; }
.login-tab {
  flex: 1; padding: 12px 14px; border-radius: 12px; cursor: pointer;
  background: var(--card-2); border: 1.5px solid var(--border);
  color: var(--muted); font-weight: 700; font-size: .95rem; text-align: center;
}
.login-tab.active {
  background: rgba(15,143,72,.15); border-color: var(--emerald);
  color: var(--emerald-br); box-shadow: 0 0 14px var(--emerald-glow);
}

/* ---------- company portal (/c/<slug>) ---------- */
.portal { text-align: center; padding: 34px 0 40px; }
.portal-logo { display: flex; justify-content: center; }
.portal-logo img {
  max-height: 92px; max-width: 280px; border-radius: 14px;
  background: #fff; border: 1px solid var(--border); padding: 10px 16px;
}
.portal-mark {
  width: 74px; height: 74px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #0f8f48, #0c7339);
  color: #fff; font-family: var(--mono); font-size: 2rem; font-weight: 800;
  box-shadow: 0 6px 24px rgba(15,143,72,.35);
}
.portal .btn { display: block; text-align: center; }

/* ---------- cards ---------- */
.card {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--border-hi); border-radius: 14px;
  padding: 15px; margin: 10px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover {
  border-color: var(--border-hi);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(48,160,128,.12);
}

/* ---------- audit log (who/when/what for shift edits) ---------- */
.audit-list { list-style: none; margin: 0; padding: 0; }
.audit-item {
  display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline;
  padding: 9px 2px; border-bottom: 1px solid var(--border); font-size: .92rem;
}
.audit-item:last-child { border-bottom: none; }
.audit-who { color: var(--text); white-space: nowrap; }
.audit-day {
  font-size: .8rem; font-weight: 700; color: var(--emerald-br);
  background: rgba(48,160,128,.12); border-radius: 6px; padding: 1px 7px;
}
.audit-detail { color: var(--muted); flex: 1 1 220px; min-width: 0; }
.audit-time {
  font-family: var(--mono); font-size: .75rem; color: var(--faint);
  white-space: nowrap;
}

/* ---------- flash / toasts ---------- */
.flash {
  background: linear-gradient(180deg, #0e2a33, #0b2028);
  border: 1px solid #1f4a55; border-radius: 10px;
  padding: 11px 14px; margin: 8px 0; font-size: .95rem;
  color: #a7e8d2;
  display: flex; align-items: center; gap: 8px;
}
.flash::before { content: "▸"; color: var(--emerald-br); }
.flash.error { background: linear-gradient(180deg, #2a1316, #1f0e11); border-color: #5c2329; color: #ffb4ac; }
.flash.error::before { content: "✕"; color: var(--red); }

/* ---------- date nav (big arrows) ---------- */
.datenav {
  display: flex; align-items: center; gap: 10px; margin: 12px 0;
  flex-wrap: wrap;
}
.datenav a {
  text-decoration: none; font-size: 1.1rem; font-weight: 700;
  color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  min-width: 46px; min-height: 46px; display: inline-flex;
  align-items: center; justify-content: center;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.datenav a:hover { border-color: var(--emerald); box-shadow: 0 0 14px var(--emerald-glow); transform: translateY(-1px); }
.datenav .today {
  font-weight: 700; font-size: 1.0rem; padding: 0 8px; color: var(--text);
  font-family: var(--mono); letter-spacing: .5px;
}
.datenav select {
  font-size: 1rem; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); color: var(--text); min-height: 46px;
}
.datenav .crew-select { min-width: 110px; }

/* Foreman / crew switcher — standalone bar under the day pills. Emerald
   border + dark card so it reads as a control, not a banner (the old
   full-gradient slab was too aggressive on the light theme). */
.crew-switch-bar {
  display: flex; justify-content: flex-start; align-items: center;
  margin: 10px 0 14px;
}
.crew-switch {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--card);
  border: 1.5px solid var(--emerald);
  border-radius: 14px; padding: 10px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.crew-switch-label {
  font-weight: 800; font-size: 1rem; color: var(--text);
  white-space: nowrap;
}
.crew-switch .crew-select {
  border: 1px solid var(--border); background: var(--bg-deep);
  min-height: 44px; padding: 8px 14px;
  font-weight: 800; font-size: 1.35rem; color: var(--text);
  border-radius: 10px;
}
.crew-switch .crew-select:focus { outline: 2px solid var(--emerald); }
@media (max-width: 700px) {
  .crew-switch-bar { justify-content: center; }
  .crew-switch { flex: 1 1 auto; justify-content: center; }
  .crew-switch .crew-select { flex: 1 1 auto; font-size: 1.25rem; }
}

/* ---------- week strip (selectable day pills) ---------- */
.week-strip {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  margin: 4px 0 2px;
}
.day-pill {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 8px 2px 7px;
  text-decoration: none; border-radius: 12px;
  border: 1px solid var(--border); background: var(--card);
  color: var(--text); min-height: 52px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.day-pill:hover { border-color: var(--emerald); box-shadow: 0 0 12px var(--emerald-glow); transform: translateY(-1px); }
.dp-wd { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.dp-num { font-size: 1.05rem; font-weight: 800; line-height: 1.1; }
.day-pill.is-active { border-color: var(--emerald); box-shadow: 0 0 0 2px var(--emerald-glow); }
.day-pill.is-today .dp-num { color: var(--emerald-br); }
/* status tints */
.day-pill.st-finalized { border-color: rgba(15,143,72,.45); }
.day-pill.st-finalized .dp-num { color: var(--emerald-br); }
.day-pill.st-draft { border-color: rgba(251,191,36,.45); }
.day-pill.st-draft .dp-num { color: #fbbf24; }
.day-pill.st-off { border-color: rgba(148,163,184,.35); opacity: .75; }
.day-pill.st-off .dp-num { color: var(--muted); }
.day-pill.st-missing { border-color: rgba(240,48,48,.5); border-style: dashed; }
.day-pill.st-missing .dp-num { color: #ff8a8a; }
.day-pill.st-none { opacity: .55; }
.dp-flag { position: absolute; top: 2px; right: 4px; font-size: .62rem; color: #fbbf24; }
.dp-dot { position: absolute; top: 5px; left: 5px; width: 6px; height: 6px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,.7); }
.week-legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 10px;
  font-size: .72rem; color: var(--muted);
}
.week-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.week-legend .lg::before { content: ""; width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.week-legend .lg.finalized::before { background: var(--emerald-br); }
.week-legend .lg.draft::before { background: #fbbf24; }
.week-legend .lg.off::before { background: var(--muted); }
.week-legend .lg.missing::before { background: #ff8a8a; }
.week-legend .lg.flag::before { background: transparent; content: "⚠"; width: auto; height: auto; }

/* ---------- forms: big, tappable ---------- */
.form label, .card label { display: block; margin: 12px 0 5px; font-weight: 600; font-size: .95rem; color: #c9d8e6; }
input, select, button, textarea { font-family: inherit; font-size: 1rem; color: var(--text); }
input[type="text"], input[type="search"], input[type="number"], input[type="password"], input[type="email"],
input[type="time"], input[type="date"], input:not([type]), select, textarea {
  width: 100%; padding: 12px 12px; margin-top: 4px;
  border: 1.5px solid var(--border); border-radius: 12px; background: var(--bg-deep);
  font-size: 1.05rem; min-height: 48px; color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: #6d86a2; }
/* kill browser autofill's white-bg/dark-text takeover on the dark theme */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-deep) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}
select:disabled, input:disabled { opacity: .55; cursor: not-allowed; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--emerald);
  box-shadow: 0 0 0 3px var(--emerald-glow);
}
input[type="time"] { font-size: 1.3rem; font-weight: 600; text-align: center; }
/* 12-hour display: the native input sits invisible on top (wheel still opens),
   the formatted span is what the user sees */
.time-picker { position: relative; display: flex; align-items: center; gap: 6px; }
.time-picker .time-prefix, .time-prefix {
  font-size: .72rem; font-weight: 700; letter-spacing: .5px; color: var(--faint);
  font-family: var(--mono); white-space: nowrap;
}
html.light .time-prefix { color: #5b6b7c; }
.time-picker input[type="time"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; min-height: 0; width: 100%;
}
.time-picker input[type="time"]:disabled { cursor: not-allowed; }
.time-show {
  display: block; text-align: center; padding: 12px 6px; min-height: 48px;
  border: 1.5px solid var(--border); border-radius: 12px; background: var(--bg-deep);
  font-size: 1.1rem; font-weight: 600; color: var(--text);
  line-height: 1.4; white-space: nowrap; flex: 1; min-width: 0;
}
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.row-actions .btn-small { margin: 0; }
/* even action buttons: Save matches the ✕/▲/▼ tap targets (user rule:
   adjacent buttons same size — nothing stubbier than its neighbor) */
table.roster .row-actions .btn-small {
  min-height: 44px; min-width: 46px; padding: 8px 12px; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
}
/* split inputs flagged for non-0.25 increments */
.split-input.quarter-bad { border-color: var(--red); box-shadow: 0 0 0 3px rgba(240,48,48,.25); }
.ttl-hrs { display: none; }
/* finish-before-start warning (AM/PM slip) — NLK red, risk only */
.time-warn {
  display: block; text-align: center; margin-top: 5px;
  color: var(--red); font-size: .78rem; font-weight: 700;
}
.time-warn[hidden] { display: none; }
.bulk-warn {
  margin: 8px 0 0; padding: 8px 12px; border-radius: 10px;
  background: rgba(240,48,48,.12); border: 1px solid rgba(240,48,48,.4);
  color: #ff8a8a; font-size: .85rem; font-weight: 700;
}
.bulk-warn[hidden] { display: none; }
/* native time-picker icon must be visible on dark background */
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1); opacity: .9; cursor: pointer; width: 22px; height: 22px;
}
input[type="time"]::-webkit-clear-button,
input[type="time"]::-webkit-inner-spin-button { filter: invert(1); opacity: .7; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .9; cursor: pointer; width: 22px; height: 22px; }
/* light mode: inputs are light, so the native (dark) icon must NOT be
   inverted — the white icon from the dark rule is invisible on paper */
html.light input[type="date"]::-webkit-calendar-picker-indicator,
html.light input[type="time"]::-webkit-calendar-picker-indicator {
  filter: none; opacity: .75;
}
html.light input[type="time"]::-webkit-clear-button,
html.light input[type="time"]::-webkit-inner-spin-button { filter: none; opacity: .6; }
input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--emerald); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

button {
  background: linear-gradient(180deg, #24475e, #1b3749);
  color: #fff; border: 1px solid var(--border-hi); border-radius: 12px;
  padding: 13px 18px; font-size: 1.02rem; font-weight: 700; cursor: pointer;
  min-height: 48px; margin: 6px 0;
  transition: transform .12s, box-shadow .15s, filter .15s;
}
button:hover { filter: brightness(1.15); box-shadow: 0 4px 18px rgba(0,0,0,.35); }
button:active { transform: scale(.98); }
/* htmx in-flight state: the triggering button dims + ignores clicks until the
   swap lands (visual feedback + double-click guard) */
button.htmx-request { opacity: .55; pointer-events: none; }
.btn-small { padding: 8px 13px; font-size: .88rem; min-height: 40px; margin: 0; }
/* anchor-as-button: the app's <button> styles don't apply to <a class="btn">
   (gate banner, export CSV, demo CTAs) — give them the same look */
a.btn, a.btn-small {
  display: inline-block; text-align: center; text-decoration: none;
  border: 1px solid var(--border-hi); border-radius: 12px;
  color: #fff; font-weight: 700; cursor: pointer; line-height: 1.2;
  transition: transform .12s, box-shadow .15s, filter .15s;
}
a.btn { padding: 13px 18px; font-size: 1.02rem; min-height: 48px; }
a.btn:hover, a.btn-small:hover { filter: brightness(1.15); box-shadow: 0 4px 18px rgba(0,0,0,.35); text-decoration: none; }
a.btn:active, a.btn-small:active { transform: scale(.98); }
a.btn-ghost, a.btn-small.btn-ghost { color: var(--emerald-br); }
.btn-primary {
  background: linear-gradient(180deg, #0f8f48, #0c7339);
  border-color: #16a05a;
  box-shadow: 0 2px 14px rgba(15,143,72,.28);
}
.btn-primary:hover { box-shadow: 0 4px 22px rgba(15,143,72,.45); }
.btn-danger {
  background: linear-gradient(180deg, #d63a3a, #b52a2a);
  border-color: #f03030;
  box-shadow: 0 2px 14px rgba(240,48,48,.3);
}
.btn-danger:hover { box-shadow: 0 4px 24px rgba(240,48,48,.5); }
.btn-ghost { background: rgba(15,143,72,.08); color: var(--emerald-br); border: 1.5px solid rgba(48,160,128,.45); }
.btn-ghost:hover { background: rgba(15,143,72,.15); border-color: var(--emerald); }
.inline { display: inline-block; margin-right: 6px; }
/* borrow worker: select + Add button side by side on one row */
.borrow-row { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 560px; margin: 8px 0; }
.borrow-row select { flex: 1; min-width: 0; }
.borrow-row .btn-small { margin: 0; flex-shrink: 0; }

/* ---------- roster ---------- */
table.roster {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--card); border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border);
}
table.roster th, table.roster td { padding: 8px 8px; text-align: left; font-size: .95rem; border-bottom: 1px solid #33567f; }
table.roster th {
  background: #0d1a2c; font-size: .75rem; text-transform: uppercase; letter-spacing: .6px; color: var(--muted);
  font-family: var(--mono);
}
table.roster tr:last-child td { border-bottom: 0; }
table.roster tr { transition: background .12s; }
table.roster tbody tr:hover { background: rgba(48,160,128,.04); }
/* zebra stripes: makes each employee row pop in dark mode */
table.roster tbody tr:nth-child(even) { background: rgba(48,160,128,.09); }
html.light table.roster tbody tr:nth-child(even) { background: rgba(14,138,95,.05); }
table.roster input[type="time"] { min-height: 44px; padding: 8px; font-size: 1.15rem; }
table.roster select { min-height: 44px; padding: 8px; font-size: .95rem; }
table.roster .btn-small { min-height: 40px; }
table.roster td .muted { font-size: .78rem; }

/* ---------- payroll report ---------- */
.scope-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.scope-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px; min-height: 44px; border-radius: 999px;
  text-decoration: none; font-weight: 700; font-size: .92rem;
  color: var(--text); background: var(--card); border: 1px solid var(--border);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.scope-pill:hover { border-color: var(--emerald); box-shadow: 0 0 12px var(--emerald-glow); transform: translateY(-1px); }
.scope-pill.active { background: var(--emerald); border-color: var(--emerald); color: #04120c; box-shadow: 0 0 14px var(--emerald-glow); }
html.light .scope-pill.active { color: #fff; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.payroll-table th.day-col, table.payroll-table td.day-col { text-align: right; white-space: nowrap; }
table.payroll-table th.tot-col, table.payroll-table td.tot-col { text-align: right; white-space: nowrap; }
table.payroll-table tfoot td { border-top: 2px solid var(--border-hi); font-weight: 700; }
table.payroll-table th.day-col { font-size: .68rem; }

/* name + status in one cell: name/position left, status select right */
.name-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.name-status .name-pos { display: flex; flex-direction: column; line-height: 1.3; }
.name-status select.member-status { min-height: 40px; padding: 6px 8px; font-size: .88rem; width: auto; }
.name-status .pill { margin-left: auto; }

/* status pills */
.pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .76rem; font-weight: 700; text-transform: capitalize; letter-spacing: .3px; }
.pill.present { background: rgba(15,143,72,.15); color: var(--emerald-br); border: 1px solid rgba(15,143,72,.4); }
.pill.sick { background: rgba(251,191,36,.12); color: #fbbf24; border: 1px solid rgba(251,191,36,.35); }
.pill.injured { background: rgba(240,48,48,.14); color: #ff8a8a; border: 1px solid rgba(240,48,48,.45); }
.pill.absent { background: rgba(148,163,184,.12); color: var(--muted); border: 1px solid rgba(148,163,184,.3); }
.pill.warning { background: rgba(251,191,36,.12); color: #fbbf24; border: 1px solid rgba(251,191,36,.35); }
.pill.danger { background: rgba(240,48,48,.14); color: #ff8a8a; border: 1px solid rgba(240,48,48,.45); box-shadow: 0 0 10px rgba(240,48,48,.15); }
.pill.info { background: rgba(79,143,217,.12); color: #7dd3fc; border: 1px solid rgba(79,143,217,.35); }

/* ---------- EOD split ---------- */
.demo-card { border: 1.5px solid var(--border-hi); background: linear-gradient(180deg, #0e2230, var(--card)); }
.demo-card code { background: var(--bg-deep); padding: 2px 7px; border-radius: 6px; font-size: .9rem; color: #9fd8c4; }
.jobnum { white-space: nowrap; font-variant-numeric: tabular-nums; font-family: var(--mono); }
/* all-time "Hours logged" column on the jobs list: mono, right-aligned */
table.roster td.hours-logged {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap; color: var(--emerald-br);
}
.bulk-bar { background: linear-gradient(180deg, #0e2230, var(--card)); border-color: var(--border-hi); }
.bulk-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bulk-time-picker { flex: 0 1 130px; }
.bulk-time-picker .time-show { min-height: 44px; padding: 10px 6px; font-size: 1.05rem; }
.bulk-label { font-weight: 700; font-size: .95rem; margin: 0; color: var(--text); }
.bulk-row .btn-small { margin: 0; }
.action-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.action-bar .btn-small { margin: 0; }
.order-btns { display: flex; gap: 6px; }
table.roster .order-btns .btn-small {
  min-height: 44px; min-width: 46px; padding: 8px 12px; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.job-card { padding: 10px 13px; margin: 6px 0; }
.job-card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.job-card-row .btn-small { margin: 0; }
.task-assign-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.task-assign-row select { flex: 1; min-width: 0; min-height: 40px; }
.emp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trade-section { margin-bottom: 22px; }
.trade-pills { display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
.trade-pill { min-height: 40px; padding: 8px 18px; font-size: .92rem; font-weight: 700; border-radius: 999px; background: var(--card); border: 1.5px solid var(--border); color: var(--muted); cursor: pointer; margin: 0; transition: all .15s; }
.trade-pill:hover { border-color: var(--border-hi); color: var(--text); }
.trade-pill.active { background: rgba(15,143,72,.15); border-color: var(--emerald); color: var(--emerald-br); box-shadow: 0 0 14px var(--emerald-glow); }
/* EOD split category pills (regular/repair/warranty/shop/other) */
.cat-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.cat-pill {
  min-height: 38px; padding: 7px 14px; font-size: .85rem; font-weight: 700;
  border-radius: 999px; background: var(--card); border: 1.5px solid var(--border);
  color: var(--muted); cursor: pointer; margin: 0; transition: all .15s;
}
.cat-pill:hover { border-color: var(--border-hi); color: var(--text); }
.cat-pill.active { background: rgba(15,143,72,.15); border-color: var(--emerald); color: var(--emerald-br); box-shadow: 0 0 12px var(--emerald-glow); }
html.light .cat-pill { background: var(--card); border-color: var(--border); color: var(--muted); }
html.light .cat-pill.active { background: rgba(14,138,95,.1); border-color: var(--emerald); color: var(--emerald-br); }
.emp-card { margin: 0; }
.emp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.emp-head input { margin: 0; font-size: 1.1rem; font-weight: 700; }
.emp-head .pill { flex-shrink: 0; }
.emp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.emp-fields label { margin: 0; font-size: .82rem; font-weight: 600; color: var(--muted); }
.emp-fields input, .emp-fields select { min-height: 44px; font-size: .98rem; }
.emp-fields label[for] { display: block; }
.emp-actions { display: flex; gap: 8px; margin-top: 12px; }
.emp-actions .btn-small { margin: 0; flex: 1; }
.member-picker { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 10px 0 0; }
.member-picker legend { font-size: .82rem; font-weight: 600; color: var(--muted); padding: 0 6px; }
.member-picker .muted { font-weight: 400; }
.member-check { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: .95rem; cursor: pointer; border-radius: 6px; }
.member-check:hover { background: var(--card-2); }
.member-check input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--emerald); }
/* A worker already on another crew is greyed out (visually "taken") but still
   checkable so they can be borrowed/switched. */
.member-check.taken { opacity: .45; }
.member-check.taken:hover { opacity: .8; }
.toggle-row { display: flex; align-items: flex-start; gap: 12px; margin: 6px 0 12px; padding: 10px 12px; background: var(--card-2); border-radius: 10px; cursor: pointer; }
.toggle-row input { margin-top: 4px; flex-shrink: 0; }
.toggle-row span { font-size: .98rem; }
/* collapsible "Add employee" / "New crew" forms — obvious emerald button,
   one tap to expand, list stays visible */
details.add-toggle { margin: 4px 0 14px; }
details.add-toggle summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; min-height: 48px;
  background: linear-gradient(180deg, #0f8f48, #0c7339);
  color: #fff;
  border: 1px solid #16a05a; border-radius: 12px;
  font-size: 1.02rem; font-weight: 700;
  box-shadow: 0 2px 14px rgba(15,143,72,.28);
  transition: filter .15s, box-shadow .15s;
}
details.add-toggle summary::-webkit-details-marker { display: none; }
details.add-toggle summary::before { content: "＋"; font-weight: 800; font-size: 1.1rem; line-height: 1; }
details.add-toggle summary::after {
  content: "▾"; margin-left: 2px; font-size: .8rem; opacity: .85;
  transition: transform .18s ease;
}
details.add-toggle summary:hover { filter: brightness(1.15); box-shadow: 0 4px 22px rgba(15,143,72,.45); }
details.add-toggle[open] summary::after { transform: rotate(180deg); }
details.add-toggle .card { margin: 10px 0 0; }
html.light details.add-toggle summary {
  background: linear-gradient(180deg, #0f9c52, #0b7d42);
  border-color: #0f9c52; color: #fff;
}
fieldset { border: 1.5px solid var(--border); border-radius: 12px; margin: 10px 0; padding: 10px 12px; }
fieldset legend { font-weight: 700; font-size: .92rem; padding: 0 6px; color: #c9d8e6; }
.split-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; }
.split-row label { margin: 0; font-weight: 500; font-size: .95rem; flex: 1; color: #c9d8e6; }
.split-row input { width: 110px; }
.split-row .remaining-btn { flex-shrink: 0; white-space: nowrap; }
.split-cat { margin: 2px 0 2px 4px; }
.split-cat-select {
  min-height: 44px; padding: 8px 12px; font-size: .95rem; font-weight: 600;
  width: auto; min-width: 150px; border-radius: 10px; margin-top: 0;
  background: var(--card); border: 1.5px solid var(--border); color: var(--text); cursor: pointer;
}
.split-options { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 2px 4px; }
.split-options .who-toggle { margin: 0; }
/* Job blocks in the crew split: zebra like roster rows (even blocks tinted
   + #33567f border, odd plain) and self-contained — the dashed divider sits
   at the BOTTOM of each block, separating job entries from each other. */
.job-split-block {
  margin: 6px 0 12px; padding: 10px 12px 12px; border-radius: 12px;
  border: 1px solid transparent;
  border-bottom: 1px dashed var(--border);
}
.job-split-block:nth-child(even) {
  background: rgba(48,160,128,.09);
  border-color: #33567f;
  border-bottom-style: dashed;   /* keep the entry divider dashed */
}
/* per-person fieldsets keep a dashed divider between their job rows */
.person-split .split-row { border-bottom: 1px dashed var(--border); }
.person-split .split-row:last-child { border-bottom: 0; }
.who-toggle { display: flex; gap: 6px; margin: 4px 0 2px 4px; }
.quick-picks { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.quick-picks .chip { font-size: .85rem; padding: 6px 12px; }
.who-toggle button { min-height: 40px; padding: 6px 14px; font-size: .85rem; border-radius: 999px; background: var(--card); border: 1.5px solid var(--border); color: var(--muted); }
.who-toggle button.active { background: rgba(15,143,72,.15); border-color: var(--emerald); color: var(--emerald-br); }
.who-went { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; padding-left: 4px; }
.who-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; margin-right: 2px; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--card-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px 3px 6px; font-size: .8rem; font-weight: 600; cursor: pointer; margin: 0; transition: all .12s; }
.chip input { width: 16px; height: 16px; margin: 0; accent-color: var(--emerald); }
.chip:has(input:checked) { background: rgba(15,143,72,.15); border-color: var(--emerald); color: var(--emerald-br); }
.split-total { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; text-align: center; padding: 12px; margin: 8px 0; background: linear-gradient(180deg, var(--card-2), var(--card)); }
.split-total strong { font-size: 1.25rem; font-family: var(--mono); }
.split-total strong#remaining-val { color: var(--emerald-br); }
.split-total .muted { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; }
#remaining-val.over { color: var(--red) !important; text-shadow: 0 0 12px rgba(240,48,48,.45); animation: redpulse 1.2s ease-in-out infinite; }
.person-remaining.over { color: var(--red); text-shadow: 0 0 10px rgba(240,48,48,.4); }
@keyframes redpulse { 0%,100% { opacity:1; } 50% { opacity:.55; } }
.auto-dist { padding: 8px 12px; margin: 8px 0; font-size: .85rem; line-height: 1.7; background: var(--card); }
.auto-dist .muted { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; }
#auto-dist-detail strong { color: var(--emerald-br); }
#auto-dist-detail strong.split-short { color: var(--red); }

/* ---------- Saved allocations table (EOD split) ----------
   Card-like: --border-hi + subtle shadow, emerald accents, compact 8px
   padding, zebra rows — matches the roster's design language. */
.alloc-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--card); border: 1px solid var(--border-hi);
  border-radius: 14px; overflow: hidden; margin: 8px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
}
.alloc-table th, .alloc-table td { padding: 8px 10px; text-align: left; font-size: .9rem; }
.alloc-table th {
  background: #0d1a2c; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .6px; color: var(--muted); font-family: var(--mono);
  border-bottom: 1px solid #33567f;
}
.alloc-table td { border-bottom: 1px solid #33567f; }
.alloc-table tbody tr:last-child td { border-bottom: 0; }
.alloc-table tfoot td { border-bottom: 0; }
.alloc-table tr.alloc-member-row td {
  background: rgba(240,48,48,.12); color: #ffb4ac;
  font-weight: 700; letter-spacing: .2px;
}
.alloc-table tr.alloc-member-row td .alloc-total { font-weight: 600; }
.alloc-table tr.alloc-row.zebra { background: rgba(48,160,128,.09); }
.alloc-table td.alloc-hours {
  font-family: var(--mono); font-weight: 700; color: var(--emerald-br);
  white-space: nowrap; text-align: right;
}
.alloc-table .alloc-jobnum { font-family: var(--mono); font-size: .8rem; }
.alloc-table tr.alloc-crew-total td {
  border-top: 2px solid var(--emerald); font-weight: 700; background: rgba(15,143,72,.06);
}
h3.alloc-title { color: var(--emerald-br); font-size: 1.05rem; letter-spacing: .3px; margin: 18px 0 8px; }

/* ============================================================
   LIGHT MODE — html.light overrides the dark design system
   Same layout, inverted surfaces. Emerald accents stay.
   ============================================================ */
html.light {
  --bg:        #e7e3da;   /* warm paper, not bright white */
  --bg-deep:   #ddd8cd;
  --card:      #f4f2ec;   /* warm off-white cards (user: never bright white) */
  --card-2:    #ece9e1;
  --border:    #c3cedb;
  --border-hi: #a9b8ca;
  --text:      #14202e;
  --muted:     #5b6b7c;
  --faint:     #8b99a9;
  --emerald:   #0e8a5f;
  --emerald-br:#0b6b4a;
  --emerald-glow: rgba(14,138,95,.22);
  --blue:      #2f6fb2;
  --red:       #d03434;   /* risk-only, darkened for contrast */
}
html.light body {
  /* Flat, clean light theme — NO green gradient (user decision). Section
     separation comes from lighter card surfaces + stronger borders. */
  background: var(--bg);
  color: var(--text);
}
html.light .topbar {
  background: rgba(244,242,236,.94);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(14,138,95,.12), 0 4px 20px rgba(20,32,46,.08);
}
html.light .topbar .brand img { filter: none; }
html.light .topbar nav a { color: var(--muted); }
html.light .topbar nav a:hover { color: #0f2438; background: rgba(14,138,95,.08); }
html.light .topbar nav a.nav-logout { color: var(--red); }
html.light .topbar nav a.nav-logout:hover { color: var(--red); background: rgba(208,52,52,.08); }
html.light .topbar .who { color: var(--muted); }
html.light h1, html.light h2, html.light h3 { color: #14202e; }
html.light .card {
  /* Flat white card on a slightly-off-white page bg — clearly separated. */
  background: var(--card);
  border-color: var(--border-hi);
  box-shadow: 0 1px 4px rgba(20,32,46,.08);
}
html.light .card:hover {
  border-color: #9fb2c5;
  box-shadow: 0 8px 28px rgba(20,32,46,.12);
}
html.light .flash {
  background: linear-gradient(180deg, #e7f6ef, #dcefe6);
  border-color: #b5ddc9; color: #0b6b4a;
}
html.light .flash.error { background: linear-gradient(180deg, #fbe9e9, #f6dcdc); border-color: #e5b3b3; color: #b02323; }
html.light .datenav a { color: var(--text); background: var(--card); border-color: var(--border); }
html.light .datenav a:hover { border-color: var(--emerald); box-shadow: 0 0 12px var(--emerald-glow); }
html.light .datenav .today { color: var(--text); }
html.light .datenav select { background: var(--card); color: var(--text); border-color: var(--border); }
html.light .day-pill { background: var(--card); border-color: var(--border); color: var(--text); }
html.light .day-pill.st-finalized { border-color: rgba(14,138,95,.5); }
html.light .day-pill.st-finalized .dp-num { color: #0b6b4a; }
html.light .day-pill.st-draft { border-color: rgba(217,154,16,.5); }
html.light .day-pill.st-draft .dp-num { color: #92640a; }
html.light .day-pill.st-missing { border-color: rgba(208,52,52,.55); }
html.light .day-pill.st-missing .dp-num { color: #b02323; }
html.light .day-pill.is-today .dp-num { color: #0b6b4a; }
html.light .form label, html.light .card label { color: #33455c; }
html.light input[type="text"], html.light input[type="number"], html.light input[type="password"],
html.light input[type="email"], html.light input[type="time"], html.light input[type="date"],
html.light input:not([type]), html.light select, html.light textarea {
  background: var(--card); border-color: var(--border); color: var(--text);
}
html.light input::placeholder, html.light textarea::placeholder { color: var(--faint); }
html.light input:-webkit-autofill,
html.light input:-webkit-autofill:hover,
html.light input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--card) inset;
  -webkit-text-fill-color: var(--text);
}
html.light input:focus, html.light select:focus, html.light textarea:focus {
  border-color: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-glow);
}
html.light button {
  background: linear-gradient(180deg, #dbe4ee, #c9d5e2);
  border-color: var(--border-hi); color: #14202e;
}
html.light .btn-primary {
  background: linear-gradient(180deg, #0f9c52, #0b7d42);
  border-color: #0f9c52; color: #fff;
}
html.light .btn-danger {
  background: linear-gradient(180deg, #d64545, #b52f2f);
  border-color: #d64545; color: #fff;
}
html.light .btn-ghost { background: rgba(14,138,95,.07); color: var(--emerald-br); border-color: rgba(14,138,95,.4); }
html.light .btn-ghost:hover { background: rgba(14,138,95,.13); }
html.light table.roster { background: var(--card); border-color: var(--border); }
html.light table.roster th { background: var(--bg-deep); color: var(--muted); }
html.light table.roster th, html.light table.roster td { border-bottom-color: #e8edf3; }
html.light table.roster tbody tr:hover { background: rgba(14,138,95,.04); }
html.light .pill.present { background: rgba(14,138,95,.1); color: #0b6b4a; border-color: rgba(14,138,95,.35); }
html.light .pill.sick, html.light .pill.warning { background: rgba(217,154,16,.12); color: #92640a; border-color: rgba(217,154,16,.35); }
html.light .pill.injured { background: rgba(208,52,52,.1); color: #b02323; border-color: rgba(208,52,52,.35); }
html.light .pill.absent { background: rgba(91,107,124,.1); color: #5b6b7c; border-color: rgba(91,107,124,.3); }
html.light .pill.danger { background: rgba(208,52,52,.1); color: #b02323; border-color: rgba(208,52,52,.35); }
html.light .pill.info { background: rgba(47,111,178,.1); color: #1d5a97; border-color: rgba(47,111,178,.35); }
html.light .demo-card, html.light .bulk-bar { background: linear-gradient(180deg, var(--bg-deep), var(--card)); }
html.light .demo-card code { background: #e7ecf3; color: #0b6b4a; }
html.light .split-total, html.light .toggle-row, html.light .chip, html.light .who-toggle button {
  background: var(--card-2); border-color: var(--border);
}
html.light .alloc-table { background: var(--card); box-shadow: 0 1px 4px rgba(20,32,46,.08); }
html.light .alloc-table th { background: var(--bg-deep); color: var(--muted); }
html.light .alloc-table th, html.light .alloc-table td { border-bottom-color: #e8edf3; }
html.light .alloc-table tr.alloc-member-row td { background: rgba(208,52,52,.08); color: #b02323; }
html.light .alloc-table tr.alloc-row.zebra { background: rgba(14,138,95,.05); }
html.light .alloc-table tr.alloc-crew-total td { background: rgba(14,138,95,.05); }
h3.alloc-title { color: var(--emerald); }
html.light .chip:has(input:checked), html.light .who-toggle button.active {
  background: rgba(14,138,95,.1); border-color: var(--emerald); color: var(--emerald-br);
}
html.light .job-split-block { border-bottom-color: var(--border); }
html.light .job-split-block:nth-child(even) { background: rgba(14,138,95,.05); border-color: var(--border); }
html.light .person-split .split-row { border-bottom-color: var(--border); }
html.light .split-row label, html.light fieldset legend { color: #33455c; }
html.light .trade-pill { background: var(--card); border-color: var(--border); color: var(--muted); }
html.light .trade-pill.active { background: rgba(14,138,95,.1); border-color: var(--emerald); color: var(--emerald-br); }
html.light .theme-toggle { background: transparent; border: 0; }
html.light #remaining-val.over, html.light .person-remaining.over { color: var(--red); }
html.light .emp-head input { color: var(--text); }
@media (max-width: 920px) {
  html.light table.roster tr { border-bottom-color: #e8edf3; }
  html.light table.roster td::before { color: var(--faint); }
  html.light table#alloc-table tr { border-bottom-color: #e8edf3; }
}

/* ---------- theme toggle button ---------- */
.theme-toggle { background: transparent; border: 0; font-size: 1.05rem; min-height: 36px; padding: 4px 8px; margin: 0; }
.theme-toggle:hover { background: rgba(48,160,128,.12); box-shadow: none; }

/* ---------- averaging-agreement status pill (topbar, every page) ---------- */
.agreement-badge {
  font-size: .72rem; font-weight: 700; letter-spacing: .3px;
  padding: 4px 10px; border-radius: 999px; border: 1px solid;
  white-space: nowrap; align-self: center; cursor: default;
}
.agreement-badge.on { color: var(--emerald-br); border-color: rgba(74,222,128,.45); background: rgba(15,143,72,.12); }
.agreement-badge.off { color: var(--muted); border-color: var(--border-hi); background: transparent; }
html.light .agreement-badge.off { color: var(--muted); border-color: var(--border); }

/* ---------- hamburger (mobile only) ---------- */
.hamburger {
  display: none; background: transparent; border: 0; font-size: 1.6rem;
  color: var(--text); min-height: 44px; min-width: 44px; margin: 0;
  padding: 0 8px; border-radius: 10px; line-height: 1;
}
.hamburger:hover { background: rgba(48,160,128,.12); box-shadow: none; }

/* active nav link (top bar) */
.topbar nav a.active {
  background: rgba(15,143,72,.14);
  color: var(--emerald-br);
}
html.light .topbar nav a.active { background: rgba(14,138,95,.1); }

/* ---------- mobile/tablet: hamburger nav + compact roster ---------- */
/* Short landscape screens (manager/admin on a rotated tablet): the topbar
   must stay compact so Log out never scrolls out of view. */
@media (max-height: 500px) and (orientation: landscape) {
  .topbar { padding: 4px 12px; }
  .topbar .brand { font-size: 1.1rem; }
  .topbar nav a { padding: 5px 8px; font-size: .8rem; }
  .topbar .who { display: none; }
  .topbar nav .nav-footer { gap: 6px; }
}
@media (max-width: 920px) {
  /* topbar: brand + hamburger, nav collapses into a dropdown panel */
  .hamburger { display: inline-flex; align-items: center; justify-content: center; }
  .topbar nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(0,0,0,.5);
    flex-direction: column; align-items: stretch;
    padding: 8px 12px 12px;
    z-index: 60;
  }
  .topbar nav.open { display: flex; }
  .topbar nav a { padding: 13px 12px; font-size: 1.05rem; border-radius: 10px; }
  .topbar nav a:hover { background: rgba(48,160,128,.1); }
  /* Log out sits in the menu list (after Daily Log / Employees), styled as
     the danger exit — always visible in the hamburger panel. */
  .topbar nav a.nav-logout {
    margin-top: 4px; color: var(--red); font-weight: 700;
    border-top: 1px solid var(--border); border-radius: 0 0 10px 10px;
    padding-top: 12px;
  }
  .topbar nav a.nav-logout:hover { background: rgba(255,71,71,.08); color: var(--red); }
  .topbar nav .nav-footer {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px;
  }
  .topbar nav .who { display: inline; font-size: .85rem; }
  /* install-app button inside the hamburger footer */
  .install-app {
    background: linear-gradient(180deg,#0f8f48,#0c7339); color: #fff;
    border: 0; border-radius: 10px; padding: 9px 12px; font-weight: 700;
    font-size: .88rem; cursor: pointer;
  }
  .install-app:hover { box-shadow: 0 4px 14px rgba(15,143,72,.4); }

  /* grid2 forms stack */
  .grid2 { grid-template-columns: 1fr; }
  .emp-fields { grid-template-columns: 1fr 1fr; }

  /* dashboard + admin tables: keep table layout, horizontal scroll.
     Admin is PC-primary — on mobile just compact it so it doesn't dominate. */
  .card { overflow-x: auto; }
  .card table.roster, .card table.roster th, .card table.roster td {
    min-width: 420px; white-space: nowrap;
  }
  .card table.roster th, .card table.roster td { padding: 7px 8px; font-size: .82rem; }
  .card table.roster th { font-size: .68rem; }

  /* compact roster: 2 rows per person instead of a tall stacked card */
  table#roster-table thead { display: none; }
  table#roster-table tbody { display: block; }
  table#roster-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px 10px;
    padding: 12px;
    border-bottom: 1px solid #33567f;
    align-items: center;
  }
  table#roster-table tr:last-child { border-bottom: 0; }
  table#roster-table td { border: 0; padding: 0; display: block; }
  /* line 1: name left, order buttons right (cols 2 & 3) */
  table#roster-table td[data-label="Name"] {
    grid-column: 1 / 3; grid-row: 1; font-size: 1.25rem;
  }
  table#roster-table td[data-label="Name"] .name-status { font-size: 1.25rem; }
  table#roster-table td[data-label="Name"] .name-status .muted { font-size: .9rem; }
  table#roster-table td[data-label="Order"] { grid-column: 3; grid-row: 1; display: flex; justify-content: flex-end; }
  table#roster-table td[data-label="Order"] .order-btns { gap: 6px; }
  /* line 2: start | finish (even widths) */
  table#roster-table td[data-label="Start"] { grid-row: 2; grid-column: 1 / 2; }
  table#roster-table td[data-label="Finish"] { grid-row: 2; grid-column: 2 / 3; }
  table#roster-table td[data-label="Start"] .time-picker,
  table#roster-table td[data-label="Finish"] .time-picker { min-width: 0; }
  /* IN:/OUT: prefixes get the same fixed width so both time boxes are
     exactly equal (OUT: is one char wider and used to skew the boxes) */
  table#roster-table td[data-label="Start"] .time-prefix,
  table#roster-table td[data-label="Finish"] .time-prefix { width: 2.6em; flex: 0 0 2.6em; }
  /* name cell contains the status select on mobile */
  table#roster-table td[data-label="Name"] .name-status { flex-wrap: wrap; }
  table#roster-table td[data-label="Name"] select.member-status { min-height: 40px; font-size: .95rem; }
  /* line 3: ttl hrs + save/x side by side */
  table#roster-table td[data-label="Hours"] { grid-column: 1 / 2; grid-row: 3; color: var(--emerald-br); font-weight: 700; }
  table#roster-table td[data-label="Save"] { grid-column: 2 / 4; grid-row: 3; display: flex; justify-content: flex-end; }
  table#roster-table td .ttl-hrs { display: inline; font-size: .72rem; color: var(--muted); font-weight: 600; }
  .row-actions { gap: 6px; }
  .row-actions .btn-small { padding: 8px 14px; }
  /* read-only rows: correction/request-fix spans full width below */
  table#roster-table td[data-label="Correction"] { grid-column: 1 / 4; grid-row: 4; margin-top: 4px; }
  table#roster-table td[data-label="Correction"] .inline { display: flex; gap: 6px; }
  table#roster-table td[data-label="Correction"] input { flex: 1; }
  /* hide the tiny uppercase labels — the fields are self-evident on mobile */
  table#roster-table td::before { display: none; }
  table#roster-table td input, table#roster-table td select { width: 100%; min-height: 44px; font-size: 1.05rem; }
  table#roster-table td .muted { display: inline; }
  /* add job/task/delay: bigger controls on mobile — the foreman's main entry
     point gets full-size inputs, labels, and a full-width Add button */
  .add-job-form label { font-size: 1.05rem; }
  .add-job-form input, .add-job-form select { min-height: 52px; font-size: 1.15rem; }
  .add-job-form .btn-small { min-height: 52px; font-size: 1.1rem; width: 100%; }
  .add-job-form .quick-picks .chip { min-height: 44px; font-size: 1rem; padding: 10px 14px; }
  table#roster-table td .pill { font-size: .82rem; }
  .bulk-row { gap: 6px; }
  .bulk-label { order: 1; }
  #bulk-now { order: 1; }
  .bulk-time-picker { order: 2; flex: 1 1 100%; }
  .bulk-time-picker .time-show { min-height: 52px; padding: 12px 10px; font-size: 1.2rem; }
  #bulk-save-all { order: 3; flex: 1 1 100%; }
  .who-toggle { margin-left: 0; }
  .emp-actions { flex-wrap: wrap; }

  /* saved-allocations table stacks with data-label prefixes (like the roster) */
  table#alloc-table thead { display: none; }
  table#alloc-table tbody { display: block; }
  table#alloc-table tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px;
    padding: 10px 12px; border-bottom: 1px solid #33567f;
  }
  table#alloc-table tr:last-child { border-bottom: 0; }
  table#alloc-table td { border: 0; padding: 0; display: block; }
  table#alloc-table tr.alloc-member-row { display: flex; padding: 8px 12px; }
  table#alloc-table tr.alloc-member-row td,
  table#alloc-table tr.alloc-crew-total td {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; gap: 8px;
  }
  table#alloc-table tr.alloc-crew-total { display: flex; }
  table#alloc-table td[data-label="Job"] { grid-column: 1 / 3; }
  table#alloc-table td[data-label]::before {
    content: attr(data-label) ": "; font-size: .72rem; font-weight: 600;
    color: var(--muted); text-transform: uppercase; letter-spacing: .4px;
  }
  table#alloc-table td[data-label="Hours"] { text-align: right; }

  /* insights budget-burn table stacks with data-label prefixes (like the
     alloc table); id beats the .card table.roster min-width rule above */
  table#budget-table { min-width: 0; white-space: normal; }
  table#budget-table thead { display: none; }
  table#budget-table tbody { display: block; }
  table#budget-table tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px;
    padding: 10px 12px; border-bottom: 1px solid #33567f;
  }
  table#budget-table tr:last-child { border-bottom: 0; }
  table#budget-table td { border: 0; padding: 0; display: block; }
  table#budget-table td[data-label="Burn"] { grid-column: 1 / 3; }
  table#budget-table td[data-label]::before {
    content: attr(data-label) ": "; font-size: .72rem; font-weight: 600;
    color: var(--muted); text-transform: uppercase; letter-spacing: .4px;
  }
  table#budget-table td[data-label="Est. spend $"] { text-align: right; }
}
@media (max-width: 720px) {
  .emp-grid { grid-template-columns: 1fr; }
  .emp-fields { grid-template-columns: 1fr 1fr; }
  .topbar .brand { font-size: 1.55rem; }
  /* slightly tighter roster on phones */
  table.roster tr { padding: 10px; gap: 6px 8px; }
  table.roster td[data-label="Name"] { font-size: 1rem; }
  .action-bar { grid-template-columns: 1fr; }
  .split-total { gap: 4px; }
  .emp-fields { grid-template-columns: 1fr; }
}

/* ---------- PWA / mobile chrome ---------- */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); }
}

/* ---------- AI assistant floater (admin/office only) ---------- */
#ai-floater-btn {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(74,222,128,.45);
  background: linear-gradient(180deg, #0f8f48, #0c7339);
  color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(0,0,0,.5), 0 0 22px var(--emerald-glow);
  z-index: 1000;
}
#ai-floater-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0,0,0,.55), 0 0 28px var(--emerald-glow);
}
#ai-floater {
  position: fixed;
  right: 16px;
  bottom: calc(84px + env(safe-area-inset-bottom));
  width: min(360px, calc(100vw - 32px));
  max-height: min(520px, calc(100vh - 140px));
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border-hi);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 30px var(--emerald-glow);
  z-index: 1001;
  overflow: hidden;
}
/* the `hidden` attribute must win over display:flex above */
#ai-floater[hidden] { display: none; }
.ai-floater-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
  font-weight: 700; color: var(--emerald-br); letter-spacing: .3px;
}
#ai-floater-close {
  border: 0; background: none; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 8px;
}
#ai-floater-close:hover { color: var(--text); }
.ai-floater-msgs {
  flex: 1; overflow-y: auto;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: .88rem;
  min-height: 120px;
}
.ai-msg {
  max-width: 92%;
  padding: 8px 12px;
  border-radius: 12px;
  white-space: pre-wrap;      /* model answers keep their short lines */
  word-break: break-word;
}
.ai-msg-user {
  align-self: flex-end;
  background: linear-gradient(180deg, #0f8f48, #0c7339);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-msg-bot {
  align-self: flex-start;
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.ai-msg-error { border-color: var(--red); color: var(--red); }
.ai-floater-form {
  display: flex; gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-deep);
}
.ai-floater-form input {
  flex: 1; min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-hi);
  background: var(--bg);
  color: var(--text);
  font-size: .92rem;
}
.ai-floater-form input:focus { outline: none; border-color: var(--emerald); }
#ai-floater-send {
  border: 0; border-radius: 10px;
  background: linear-gradient(180deg, #0f8f48, #0c7339);
  color: #fff; font-weight: 700; padding: 0 14px; cursor: pointer;
}
#ai-floater-send:hover { filter: brightness(1.12); }
/* small hint under the input (public landing floater) */
.ai-floater-hint {
  padding: 0 12px 10px;
  font-size: .75rem;
  color: var(--faint);
  text-align: center;
  background: var(--bg-deep);
}

/* ==========================================================================
   Desktop sidebar nav (logged-in app only — body.app; landing page untouched)
   ≥921px: the topbar becomes a fixed left rail. ≤920px keeps the existing
   topbar + hamburger dropdown (a sidebar doesn't work on phones).
   ========================================================================== */
@media (min-width: 921px) {
  body.app {
    /* reserve room for the fixed rail */
    padding-left: 240px;
  }
  body.app .topbar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 240px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 20px 14px 16px;
    padding-top: max(20px, env(safe-area-inset-top));
    border-bottom: 0;
    border-right: 1px solid var(--border);
    box-shadow: 1px 0 0 rgba(48,160,128,.15), 4px 0 24px rgba(0,0,0,.35);
    overflow-y: auto;
  }
  body.app .topbar .brand {
    padding: 4px 8px 18px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
  }
  body.app .topbar .brand svg { width: 100%; height: auto; }
  body.app .topbar nav {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    flex-wrap: nowrap;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
  }
  body.app .topbar nav a {
    display: block;
    padding: 11px 12px;
    font-size: .95rem;
    border-radius: 10px;
    white-space: nowrap;
  }
  body.app .topbar nav a.active {
    background: rgba(15,143,72,.16);
    color: var(--emerald-br);
    box-shadow: inset 3px 0 0 var(--emerald);
  }
  body.app .topbar nav a.nav-logout {
    margin-top: 10px;
    border-top: 1px solid var(--border);
    border-radius: 0 0 10px 10px;
    padding-top: 13px;
  }
  /* footer (theme toggle, identity, install-app, agreement badge) pinned
     to the bottom of the rail */
  body.app .topbar nav .nav-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  body.app .topbar nav .nav-footer .who {
    margin: 0;
    font-size: .78rem;
    text-align: center;
    white-space: normal;
  }
  body.app .topbar nav .nav-footer .theme-toggle {
    align-self: center;
  }
  body.app .topbar nav .nav-footer .install-app {
    text-align: center;
  }
  body.app .topbar nav .nav-footer .agreement-badge {
    text-align: center;
    white-space: normal;
  }
  /* content: drop the centered 1080px cap, fill the space beside the rail */
  body.app main.container {
    max-width: none;
    margin: 0;
    padding: 24px 28px 56px;
  }
  /* light theme rail */
  html.light body.app .topbar {
    background: rgba(244,242,236,.97);
    border-right: 1px solid var(--border);
    box-shadow: 1px 0 0 rgba(14,138,95,.12), 4px 0 20px rgba(20,32,46,.08);
  }
}


/* ---------- help dots (?) ---------- */
.help-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--border); color: var(--foreground);
  font-size: .72rem; font-weight: 700; line-height: 1;
  cursor: pointer; user-select: none; vertical-align: middle;
  margin-left: 6px; border: none; padding: 0;
  transition: background .15s, color .15s;
}
.help-dot:hover, .help-dot:focus { background: var(--emerald); color: #04121f; }
.help-dot-wrap { position: relative; display: inline-flex; align-items: center; }
.help-dot-pop {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 240px; max-width: 70vw; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.35);
  font-size: .82rem; line-height: 1.45; color: var(--foreground);
  z-index: 60; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s, transform .15s, visibility .15s;
  text-align: left;
}
.help-dot-wrap[data-open="1"] .help-dot-pop,
.help-dot-wrap:hover .help-dot-pop,
.help-dot-wrap:focus-within .help-dot-pop {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
@media (max-width: 700px) {
  .help-dot-pop { left: auto; right: 0; transform: translateY(4px); }
  .help-dot-wrap[data-open="1"] .help-dot-pop,
  .help-dot-wrap:hover .help-dot-pop { transform: translateY(0); }
}

/* ---------- setup wizard ---------- */
.setup-steps .step-pill {
  padding: 6px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: var(--card); border: 1px solid var(--border); color: var(--muted-foreground);
  cursor: pointer; user-select: none;
}
.setup-steps .step-pill.active {
  background: var(--emerald); color: #04121f; border-color: var(--emerald);
}
.setup-panel { padding: 20px; }
.setup-banner { padding: 14px 16px; }

/* ---------- my hours: request a fix ---------- */
.fix-toggle summary { list-style: none; cursor: pointer; display: inline-block; }
.fix-toggle summary::-webkit-details-marker { display: none; }
.fix-toggle[open] summary { opacity: .8; }
.fix-toggle .btn-small { background: var(--card); border: 1px solid var(--border); color: var(--foreground); }