/* ==========================================================================
   Deep Explo Workforce — v24 redesign.
   Implements the Deep Explo Design System (claude.ai/design, "Deep Explo
   Design System") for an OPERATE surface: dark-first, graphite-900 base,
   orange = identity & selection only, petrol = quiet accent, no shadows on
   dark (elevation is lightness), radius 0/2/4/8, Lucide icons, no emoji.
   Light theme available via [data-theme="light"] — dark is the default.
   ========================================================================== */

:root {
  /* Graphite ramp — cool-tinted, anchored on the catalogue's #939596 */
  --g-50:  #f6f7f7;
  --g-100: #ececed;
  --g-200: #d7d9da;
  --g-300: #b3b5b7;
  --g-400: #939596;
  --g-500: #797b7d;
  --g-600: #5d5f61;
  --g-700: #424446;
  --g-800: #292b2d;
  --g-850: #212325;
  --g-900: #1a1c1e;
  --g-950: #141618;

  --orange-500: #ff6600;   /* [print] — the only saturated colour */
  --orange-700: #cc5200;
  --orange-200: #ffc499;
  --orange-50:  #fff1e6;
  --petrol-500: #0f5f7a;
  --petrol-300: #6fa4b8;
  --ok:      #3d8a4e;      /* running green */
  --ok-dark: #7fc48e;
  --warn:    #e9b417;      /* warning is yellow, never amber */
  --danger:  #c8442c;
  --danger-dark: #e07a66;

  /* Semantic — DARK (default) */
  --bg: var(--g-950);
  --surface: var(--g-900);
  --surface-2: var(--g-850);
  --surface-3: var(--g-800);
  --ink: #e8e9ea;
  --ink-soft: var(--g-300);
  --ink-faint: var(--g-400);
  --line: var(--g-700);
  --line-soft: var(--g-800);
  --accent: var(--orange-500);
  --accent-hover: var(--orange-700);
  --accent-ink: var(--g-900);       /* text ON orange fills — never white */
  --link: var(--petrol-300);
  --focus: var(--petrol-300);
  --sel-bg: rgba(255, 102, 0, 0.12);
  --ok-c: var(--ok-dark);
  --danger-c: var(--danger-dark);
  --ok-tint: rgba(61, 138, 78, 0.18);
  --warn-tint: rgba(233, 180, 23, 0.15);
  --danger-tint: rgba(200, 68, 44, 0.20);
  --info-tint: rgba(15, 95, 122, 0.25);
  --info-c: var(--petrol-300);

  --font-display: "Montserrat", "IBM Plex Sans", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

[data-theme="light"] {
  --bg: var(--g-50);
  --surface: #ffffff;
  --surface-2: var(--g-50);
  --surface-3: var(--g-100);
  --ink: var(--g-900);
  --ink-soft: var(--g-600);
  --ink-faint: var(--g-500);
  --line: var(--g-200);
  --line-soft: var(--g-100);
  --accent-ink: var(--g-900);
  --link: var(--petrol-500);
  --focus: var(--petrol-500);
  --sel-bg: var(--orange-50);
  --ok-c: var(--ok);
  --danger-c: var(--danger);
  --ok-tint: #e3f0e6;
  --warn-tint: #faf0d0;
  --danger-tint: #f7e2dd;
  --info-tint: #dcebf1;
  --info-c: var(--petrol-500);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--ink);
}

/* ---------- App shell ---------- */

#app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 20px;
  background: var(--g-900);
  border-bottom: 1px solid var(--g-700);
}
[data-theme="light"] #app-header { background: var(--g-900); } /* header stays dark — brand block */

.header-left { display: flex; align-items: center; gap: 12px; }

/* Two-tone title: dark word ExtraBold, orange word SemiBold — one orange word. */
.brand { display: flex; align-items: baseline; gap: 6px; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: #f2f2f1;
}
.brand-name .brand-orange { font-weight: 600; color: var(--orange-500); }
.brand-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-400);
}

#app-header .user-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.user-name { color: var(--g-200); text-align: right; line-height: 1.3; font-size: 13px; }
.user-name em {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--g-400);
}

#app-header button.secondary {
  background: transparent;
  color: var(--g-200);
  border: 1px solid var(--g-600);
  min-height: 36px;
}
#app-header button.secondary:hover { background: var(--g-800); border-color: var(--g-500); color: #fff; }
#app-header button.secondary.active { border-color: var(--orange-500); color: var(--orange-500); }
#app-header button svg { display: block; }

#nav-scrim { display: none; }
#nav-close { display: none; }

#nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--g-600);
  color: var(--g-200);
  border-radius: 4px;
  padding: 6px 9px;
  min-height: 36px;
}

/* Scope toggle (My team / All employees) — selection is orange */
.scope-toggle {
  display: flex;
  border: 1px solid var(--g-600);
  border-radius: 4px;
  overflow: hidden;
}
.scope-toggle button {
  border: none;
  background: transparent;
  color: var(--g-300);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12.5px;
  padding: 8px 12px;
  cursor: pointer;
  min-height: 36px;
}
.scope-toggle button.active {
  background: var(--orange-500);
  color: var(--g-900);
  font-weight: 600;
}

#app-layout { display: flex; min-height: calc(100vh - 57px); }

#app-nav {
  flex: 0 0 216px;
  padding: 16px 0 24px;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.nav-group-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  padding: 20px 20px 6px;
}
.nav-group-label:first-child { padding-top: 6px; }
#app-nav a {
  display: block;
  padding: 8px 20px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13.5px;
  border-left: 3px solid transparent;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
#app-nav a:hover { color: var(--ink); background: var(--surface-2); }
#app-nav a.active {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--orange-500);
  background: var(--sel-bg);
}

#app-content {
  flex: 1;
  min-width: 0;
  padding: 24px;
  padding-bottom: 48px;
}

/* Signature: the orange base bar — the app sits on an orange plinth. */
body::after {
  content: "";
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 8px;
  background: var(--orange-500);
  z-index: 40;
}

/* ---------- Cards / typography ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;           /* the ceiling */
  padding: 24px;
  margin-bottom: 24px;
}
.card h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--ink);
}
/* Header rule under section titles */
.card > h2::after, .emp-toolbar::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--orange-200);
  opacity: 0.5;
  margin-top: 10px;
}
.emp-toolbar { position: relative; padding-bottom: 0; }
.emp-toolbar::after { position: absolute; left: 0; right: 0; bottom: -6px; }
.card h2 + .muted { margin-top: 12px; }
.card > p.muted { margin: 12px 0 16px; }

h3, .form-section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  margin: 28px 0 10px;
  color: var(--ink);
}
.form-section-title {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}
.history-title { margin-top: 4px; }
.muted { color: var(--ink-soft); }

/* ---------- Forms ---------- */

.field { margin-bottom: 14px; min-width: 0; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-bottom: 5px;
}
.field-inline { max-width: 320px; }

input, select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 2px;           /* inputs are 2 */
  padding: 9px 10px;
  min-height: 40px;
}
textarea { min-height: 72px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
input[type="date"] { font-family: var(--font-mono); font-size: 13px; }
input[type="checkbox"], input[type="radio"] {
  width: auto; min-height: 0; accent-color: var(--orange-500);
}
input:disabled, select:disabled { color: var(--g-400); background: var(--surface-3); }

.checkbox-field { display: flex; align-items: center; gap: 8px; }
.checkbox-field input { width: auto; }
.checkbox-field label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 14px; font-family: var(--font-body); color: var(--ink); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 4px 20px;
}
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px 16px;
  margin: 8px 0 16px;
}
.check-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }

/* ---------- Buttons ---------- */

button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  border: none;
  border-radius: 4px;           /* buttons are 4 */
  background: var(--orange-500);
  color: var(--accent-ink);     /* graphite-900 on orange, never white */
  padding: 10px 18px;
  min-height: 40px;
  cursor: pointer;
  transition: background 120ms var(--ease);
}
button:hover { background: var(--accent-hover); color: #fff; }
button:active { transform: translateY(1px); }
button:disabled { background: var(--surface-3); color: var(--g-400); cursor: default; transform: none; }

button.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
button.secondary:hover { background: var(--surface-2); color: var(--ink); border-color: var(--g-500); }

button.danger { background: transparent; color: var(--danger-c); border: 1px solid var(--danger-c); }
button.danger:hover { background: var(--danger-tint); color: var(--danger-c); }

/* Shift-grid row remove — quiet danger outline, never the primary orange. */
button.remove-row-btn {
  background: transparent;
  color: var(--danger-c);
  border: 1px solid var(--danger-c);
  font-size: 15px;
  padding: 4px 10px;
  min-height: 36px;
}
button.remove-row-btn:hover { background: var(--danger-tint); color: var(--danger-c); }
/* .rr-text: extra button caption that only appears in the mobile card
   layout, where a bare "x" button would be ambiguous. */
.rr-text { display: none; font-size: 12.5px; }

.actions-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.entry-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.entry-row .field { flex: 1 1 200px; margin-bottom: 8px; }
.entry-row .field-wide { flex: 2 1 240px; }
.remove-btn { min-height: 40px; }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
tbody tr:hover { background: var(--surface-2); }
td button { min-height: 36px; padding: 7px 14px; }

/* ---------- Badges (status tags are full-radius) ---------- */

.badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-pending  { background: var(--warn-tint);   color: var(--warn); }
.badge-approved { background: var(--ok-tint);     color: var(--ok-c); }
.badge-rejected, .badge-error { background: var(--danger-tint); color: var(--danger-c); }
.badge-info     { background: var(--info-tint);   color: var(--info-c); }

/* ---------- Banners ---------- */

.error-banner, .success-banner {
  border-radius: 4px;
  padding: 10px 14px;
  margin: 10px 0 16px;
  font-size: 13.5px;
  border: 1px solid;
}
.error-banner   { background: var(--danger-tint); color: var(--danger-c); border-color: var(--danger-c); }
.success-banner { background: var(--ok-tint); color: var(--ok-c); border-color: var(--ok-c); }

.empty-state {
  padding: 28px 16px;
  text-align: center;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: 4px;
  margin: 8px 0;
}

/* ---------- Tabs — 2px orange underline + weight step ---------- */

.tab-row { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 18px 0 14px; }
.tab-btn {
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--ink-soft);
  font-weight: 500;
  padding: 8px 14px;
  min-height: 38px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab-btn:hover { background: var(--surface-2); color: var(--ink); }
.tab-btn.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--orange-500); background: transparent; }

/* ---------- Balance summary (Leave History) ---------- */

.balance-summary {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px 18px;
  margin: 14px 0 18px;
}
.balance-summary h3 { margin: 0 0 12px; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px 18px;
}
.stat { display: flex; flex-direction: column-reverse; }  /* label ABOVE value */
.stat-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.2;
}
.stat.good .stat-value { color: var(--ok-c); }
.stat.bad  .stat-value { color: var(--danger-c); }
.stat-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-bottom: 3px;
}

/* ---------- Employee picker ---------- */

.employee-picker { position: relative; display: flex; align-items: stretch; }
.employee-picker-clear {
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-right: none;
  border-radius: 2px 0 0 2px;
  background: var(--surface-2);
  color: var(--danger-c);
  cursor: pointer;
  font-size: 15px;
  min-height: 40px;
  padding: 0;
}
.employee-picker-clear:hover { background: var(--danger-tint); color: var(--danger-c); }
input.employee-picker-input { flex: 1; min-width: 0; }
.employee-picker:not(:has(.employee-picker-clear[hidden])) input.employee-picker-input {
  border-radius: 0 2px 2px 0;
}
.employee-picker-dropdown {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  z-index: 25;
  max-height: 300px;
  overflow-y: auto;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 0 0 4px 4px;
}
.employee-picker-dropdown div {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.employee-picker-dropdown div:hover { background: var(--sel-bg); }
.employee-picker-empty, .employee-picker-error { color: var(--ink-soft); cursor: default; }

/* ---------- Overtime Overview detail entries ---------- */

.oo-entry { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.oo-entry + .oo-entry { border-top: 1px solid var(--line-soft); }
.oo-entry .oo-void { margin-left: auto; flex: 0 0 auto; min-height: 34px; padding: 5px 12px; font-size: 12.5px; }

/* ---------- Shift grid ---------- */

.shift-grid-toolbar { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.shift-grid th, .shift-grid td { text-align: center; }
.shift-grid td:first-child, .shift-grid th:first-child { text-align: left; }

.toggle-switch { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.toggle-switch .toggle-state-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ink-soft);
  min-width: 38px;
}
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-switch .toggle-track {
  position: relative;
  width: 40px; height: 22px;
  background: var(--g-600);
  border-radius: 999px;
  transition: background 120ms var(--ease);
}
.toggle-switch .toggle-track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--g-100);
  transition: transform 120ms var(--ease);
}
.toggle-switch input:checked + .toggle-track { background: var(--orange-500); }
.toggle-switch input:checked + .toggle-track::after { transform: translateX(18px); }
.toggle-switch input:focus-visible + .toggle-track { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Audit log ---------- */

.audit-entry {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
  margin-bottom: 10px;
}
.audit-entry summary {
  cursor: pointer;
  padding: 12px 14px;
  display: flex;
  align-items: baseline;
  gap: 4px 14px;
  flex-wrap: wrap;
  list-style: none;
}
.audit-entry summary::-webkit-details-marker { display: none; }
.audit-entry summary::before { content: "\25B8"; color: var(--ink-faint); }
.audit-entry[open] summary::before { content: "\25BE"; }
.audit-action { font-family: var(--font-display); font-weight: 600; text-transform: capitalize; }
.audit-target { font-weight: 600; }
.audit-meta { font-size: 12px; color: var(--ink-soft); }
.audit-role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}
.audit-body { padding: 2px 14px 14px; border-top: 1px solid var(--line-soft); }
.audit-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12.5px; color: var(--ink-soft); margin: 10px 0 4px; }
.audit-facts b { color: var(--ink); font-weight: 600; }
.audit-reason { margin: 6px 0 10px; }
table.audit-diff { font-size: 12.5px; }
table.audit-diff td:first-child { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); }
tr.audit-changed td { background: var(--warn-tint); }
.audit-sub { margin-bottom: 2px; }

/* ---------- Misc ---------- */

.emp-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.emp-toolbar h2 { margin: 0; }
.emp-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.emp-filters input, .emp-filters select { width: auto; flex: 1 1 150px; }
.photo-row { display: flex; gap: 16px; align-items: center; margin: 8px 0 16px; }
.photo-row img { width: 84px; height: 100px; object-fit: cover; border: 1px solid var(--line); border-radius: 2px; }
.hours-select { width: auto; }
.report-controls { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.json-viewer {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 10px;
  overflow-x: auto;
  white-space: pre-wrap;
}
a { color: var(--link); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Mobile — vertical scrolling only. Tables become stacked cards; the nav
   becomes a drawer; touch targets stay >= 40px.
   ========================================================================== */

@media (max-width: 760px) {
  #app-content { padding: 14px 12px 56px; }
  .card { padding: 16px 14px; }

  #nav-toggle { display: block; }
  #app-nav {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 250px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 200ms var(--ease);
    overflow-y: auto;
    border-right: 1px solid var(--line);
  }
  #app-nav.open { transform: translateX(0); }
  #app-nav a { min-height: 44px; display: flex; align-items: center; }
  #app-nav { padding-top: 52px; }

  /* Tap anywhere outside the drawer to close it. */
  #nav-scrim.open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(0, 0, 0, 0.45);
  }
  /* And an explicit x, top-right inside the drawer. */
  #nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--ink-soft);
  }
  #nav-close:hover { background: var(--surface-2); color: var(--ink); }

  /* Stacked tables: thead hidden, each row a bordered card, each cell a
     label/value pair. Labels are injected as data-label by app.js. */
  .table-wrap { overflow-x: visible; }
  table.stacked, table.stacked tbody { display: block; width: 100%; }
  table.stacked thead { display: none; }
  table.stacked tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--surface-2);
  }
  table.stacked tr:hover { background: var(--surface-2); }
  table.stacked td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border: none;
    padding: 5px 0;
    text-align: right;
  }
  table.stacked td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
    text-align: left;
    flex: 0 0 auto;
    white-space: pre-line;          /* multi-line headers (date over day) */
    line-height: 1.35;
  }
  table.stacked td[data-label=""]::before { display: none; }
  table.stacked td:has(button) { justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
  table.stacked td button { flex: 1 1 40%; min-height: 44px; }
  /* display:block on tr would defeat the hidden attribute (expandable
     detail rows) — restate it. Empty spacer cells vanish. */
  table.stacked tr[hidden] { display: none; }
  table.stacked td:empty { display: none; }
  /* Cells with bare form controls (dependants table): label on its own
     line, control full-width below. Direct children only — toggle
     switches wrap their checkbox and must stay label-left / toggle-right. */
  table.stacked td:has(> input, > select, > textarea) { flex-wrap: wrap; }
  table.stacked td:has(> input, > select, > textarea)::before { flex: 1 1 100%; }

  /* Overtime Overview: caret column is meaningless in card layout; the
     detail cell is a plain block of entry lines, not a label/value pair. */
  table.stacked .oo-caret { display: none; }
  table.stacked td.oo-detail-cell { display: block; text-align: left; }
  table.stacked td.oo-detail-cell button { flex: 0 0 auto; min-height: 36px; }
  table.stacked tr.oo-detail {
    margin-top: -11px;              /* visually attach to the row above */
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: var(--surface-3);
  }

  /* Row-builder forms (Overtime Allocation, Leave Submission, Audit Log
     filters): fields could shrink under their content and overlap — stack
     them full-width instead. */
  .entry-row { flex-direction: column; align-items: stretch; }
  .entry-row .field { flex: 1 1 auto; }
  .entry-row .remove-btn { align-self: flex-end; min-height: 40px; }

  /* Row-remove buttons read as labelled actions, not a bare x. */
  .rr-text { display: inline; }

  .form-grid, .check-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .actions-row button { flex: 1 1 45%; min-height: 46px; }
  .emp-toolbar { flex-direction: column; align-items: stretch; }
}

/* ---------- Version checker (Documents / Pending PDF Requests) ---------- */

/* Pending-count badge on the nav link — orange = selection/attention,
   per the design system's "orange is identity & selection only". */
.nav-badge {
  display: inline-block;
  margin-left: 8px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--orange-500);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  vertical-align: 1px;
}

/* Native <dialog> modals (Add document / Add version / QR) */
dialog.vc-dialog {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px 24px;
  width: min(440px, 92vw);
}
dialog.vc-dialog::backdrop { background: rgba(20, 22, 24, 0.72); }
dialog.vc-dialog h3 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 16px;
}
dialog.vc-dialog input[type="file"] { padding: 9px; }

/* ------------------------------------------------------------------ */
/* Phase 0 shell additions: dashboard quick actions + task list, and   */
/* sidebar module-switcher icons. Everything below inherits the same   */
/* tokens; no module redefines these.                                  */

#app-nav a i { vertical-align: -3px; margin-right: 7px; }
#app-nav a.module-current { border-left: 2px solid var(--accent); }

.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.quick-action {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 999px;   /* pills on buttons only */
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); text-decoration: none;
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 0.85rem;
}
.quick-action:hover { border-color: var(--accent); color: var(--ink); }

.button-link {
  display: inline-block; padding: 5px 14px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: 0.8rem; font-weight: 600;
}
.button-link:hover { border-color: var(--accent); }

tr.priority td:first-child { border-left: 2px solid var(--danger-c); }