/* ============================================================
   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,.92);
  backdrop-filter: blur(8px);
  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 {
  font-family: var(--mono); font-weight: 800; font-size: 2.1rem;
  color: #fff; text-decoration: none; letter-spacing: .6px;
  text-shadow: 0 0 26px var(--emerald-glow);
  line-height: 1;
}
.topbar .brand::before { content: "//"; color: var(--emerald-br); margin-right: 6px; }
.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); }
.topbar .who { color: var(--faint); font-size: .8rem; margin: 0 6px; white-space: nowrap; font-family: var(--mono); }

/* ---------- layout ---------- */
.container { max-width: 880px; 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; }
.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); }

/* ---------- cards ---------- */
.card {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--border); border-radius: 14px;
  padding: 15px; margin: 10px 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  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);
}

/* ---------- 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; }

/* ---------- 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="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: block; }
.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;
}
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.row-actions .btn-small { margin: 0; }
.ttl-hrs { 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; }
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); }
.btn-small { padding: 8px 13px; font-size: .88rem; min-height: 40px; margin: 0; }
.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; }

/* ---------- 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: 10px 10px; text-align: left; font-size: .95rem; border-bottom: 1px solid #16273c; }
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); }
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; }

/* 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.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); }
.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-label { font-weight: 700; font-size: .95rem; margin: 0; color: var(--text); }
.bulk-row input[type="time"] { width: 150px; margin: 0; }
.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: 4px; }
.order-btns .btn-small { min-height: 36px; padding: 4px 8px; font-size: .75rem; }
.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; }
.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); }
.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; }
.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; }
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; border-bottom: 1px dashed var(--border); }
.split-row:last-child { border-bottom: 0; }
.split-row label { margin: 0; font-weight: 500; font-size: .95rem; flex: 1; color: #c9d8e6; }
.split-row input { width: 110px; }
.split-cat { margin: 2px 0 2px 4px; }
.split-cat-select { min-height: 34px; padding: 4px 8px; font-size: .85rem; width: auto; min-width: 120px; }
.job-split-block { margin: 4px 0 10px; }
.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: 30px; padding: 4px 12px; font-size: .78rem; border-radius: 999px; background: var(--card); border: 1px 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; } }

/* ============================================================
   LIGHT MODE — html.light overrides the dark design system
   Same layout, inverted surfaces. Emerald accents stay.
   ============================================================ */
html.light {
  --bg:        #f2f5f9;
  --bg-deep:   #e7ecf3;
  --card:      #ffffff;
  --card-2:    #f6f9fd;
  --border:    #d7dfe8;
  --border-hi: #b9c7d6;
  --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 {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(14,138,95,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(47,111,178,.05), transparent 55%),
    var(--bg);
  color: var(--text);
}
html.light .topbar {
  background: rgba(255,255,255,.92);
  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 { color: #0f2438; text-shadow: 0 0 16px var(--emerald-glow); }
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 .who { color: var(--faint); }
html.light h1, html.light h2, html.light h3 { color: #14202e; }
html.light .card {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(20,32,46,.06);
}
html.light .card:hover {
  border-color: var(--border-hi);
  box-shadow: 0 8px 28px rgba(20,32,46,.12), 0 0 0 1px rgba(14,138,95,.1);
}
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 .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: #fff; 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 #fff 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: #fff; border-color: var(--border); }
html.light table.roster th { background: #eef2f7; 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.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, #eef6f2, #fff); }
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 .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 .split-row { border-bottom-color: var(--border); }
html.light .split-row label, html.light fieldset legend { color: #33455c; }
html.light .trade-pill { background: #fff; 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); }
}

/* ---------- 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; }

/* ---------- 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; }

/* ---------- mobile/tablet: hamburger nav + compact roster ---------- */
@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); }
  .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; }

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

  /* dashboard + admin tables: keep table layout, horizontal scroll */
  .card { overflow-x: auto; }
  .card table.roster, .card table.roster th, .card table.roster td {
    min-width: 540px; white-space: nowrap;
  }

  /* 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 #16273c;
    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.05rem;
  }
  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: status | start | finish */
  table#roster-table td[data-label="Status"],
  table#roster-table td[data-label="Start"],
  table#roster-table td[data-label="Finish"] {
    grid-row: 2;
  }
  /* 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; }
  table#roster-table td .pill { font-size: .82rem; }
  .bulk-row { gap: 6px; }
  .bulk-row input[type="time"] { width: 100%; flex: 1; }
  .who-toggle { margin-left: 0; }
  .emp-actions { flex-wrap: wrap; }
}
@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); }
}