/* P2GR Operations Console — V2 "Liquid Glass"
   Drop-in replacement for the V1 stylesheet. Every selector, class name and
   custom property from V1 is preserved, so app.js and index.html need no
   changes beyond bumping the ?v= cache-buster.

   The system in one line: translucent glass for CHROME (sidebar, headers,
   toolbars, pills), solid white for DATA (tables, payroll, rosters).
   Text a dispatcher reads at speed never sits on a blurred surface. */

:root {
  --bg: oklch(97% 0.006 255);
  --surface: oklch(100% 0 0);
  --border: oklch(91% 0.004 260);
  --border-soft: oklch(95% 0.003 260);
  --text: oklch(20% 0.005 260);
  --text-secondary: oklch(40% 0.012 260);
  --text-tertiary: oklch(50% 0.012 260);

  --accent: oklch(55% 0.19 258);
  --accent-hover: oklch(50% 0.19 258);
  --accent-soft: oklch(95% 0.03 258);

  --danger: oklch(46% 0.19 25);
  --danger-soft: oklch(95% 0.035 25);
  --warning: oklch(46% 0.13 62);
  --warning-soft: oklch(95% 0.05 75);
  --success: oklch(40% 0.13 148);
  --success-soft: oklch(95% 0.045 148);
  --neutral: oklch(40% 0.012 260);
  --neutral-soft: oklch(95.5% 0.002 260);

  /* glass materials */
  --glass-thin: oklch(100% 0 0 / 0.42);
  --glass: oklch(100% 0 0 / 0.62);
  --glass-thick: oklch(100% 0 0 / 0.82);
  --blur-thin: blur(18px) saturate(170%);
  --blur: blur(30px) saturate(180%);
  --blur-thick: blur(44px) saturate(190%);
  --rim: inset 0 1px 0 oklch(100% 0 0 / 0.8), inset 0 0 0 1px oklch(100% 0 0 / 0.4);
  --rim-soft: inset 0 1px 0 oklch(100% 0 0 / 0.7), inset 0 0 0 1px oklch(100% 0 0 / 0.32);
  --lift: 0 10px 34px oklch(30% 0.04 260 / 0.12);
  --lift-sm: 0 4px 18px oklch(30% 0.04 260 / 0.1);
  --lift-lg: 0 18px 50px oklch(30% 0.04 260 / 0.16);

  /* kept for compatibility — the rail is light glass now */
  --sidebar-bg: oklch(100% 0 0 / 0.5);
  --sidebar-text: oklch(32% 0.012 260);
  --sidebar-text-sub: oklch(48% 0.012 260);
  --sidebar-active-bg: oklch(55% 0.19 258);
  --sidebar-active-text: oklch(100% 0 0);
  --sidebar-border: oklch(100% 0 0 / 0.4);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  color-scheme: light;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.47;
  letter-spacing: -0.011em;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* the ambient field the glass samples */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58vw 46vw at 8% 2%,  oklch(78% 0.13 258 / 0.5),  transparent 62%),
    radial-gradient(52vw 44vw at 92% 14%, oklch(82% 0.11 330 / 0.38), transparent 60%),
    radial-gradient(60vw 50vw at 74% 82%, oklch(84% 0.12 195 / 0.38), transparent 62%),
    radial-gradient(46vw 40vw at 18% 68%, oklch(88% 0.10 95 / 0.3),   transparent 60%);
}

/* numerals line up without a code face */
.mono {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

[hidden] { display: none !important; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* ---------- login ---------- */

#login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--glass-thick);
  backdrop-filter: var(--blur-thick);
  -webkit-backdrop-filter: var(--blur-thick);
  border: none;
  border-radius: 28px;
  padding: 34px 32px;
  box-shadow: var(--rim), var(--lift-lg);
}
.login-card .login-logo {
  display: block;
  width: 170px;
  height: auto;
  margin-bottom: 20px;
}
.login-card h1 {
  font-size: 24px;
  font-weight: 660;
  letter-spacing: -0.022em;
  margin: 0 0 22px 0;
}
.login-card label {
  display: block;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-secondary);
  margin-bottom: 7px;
}
.login-card input[type="text"],
.login-card input[type="password"] {
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  border: none;
  border-radius: 14px;
  background: oklch(100% 0 0 / 0.6);
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.5);
  font-family: var(--sans);
  font-size: 16px;
  color: var(--text);
  margin-bottom: 14px;
}
.login-card input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--surface);
}
.login-error {
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13.5px;
  margin-bottom: 14px;
}

/* ---------- app shell ---------- */

#app-shell { display: flex; min-height: 100vh; }

#sidebar {
  width: 236px;
  flex: none;
  background: var(--sidebar-bg);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: inset -1px 0 0 oklch(100% 0 0 / 0.4), inset 0 1px 0 oklch(100% 0 0 / 0.6);
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
/* on desktop these wrappers are structural only — children lay out exactly
   as if unwrapped, so the existing #sidebar flex rules are untouched */
.sidebar-top { display: contents; }
.sidebar-nav { display: contents; }
.nav-toggle { display: none; }
.nav-overlay { display: none; }

#sidebar .brand { padding: 2px 8px 22px 8px; }
.sidebar-logo-chip {
  display: inline-flex;
  align-items: center;
  background: oklch(100% 0 0 / 0.7);
  padding: 9px 12px;
  border-radius: 16px;
  margin-bottom: 12px;
  box-shadow: var(--rim-soft);
}
.sidebar-logo-chip img { display: block; width: 120px; height: auto; }
#sidebar .brand-name {
  font-size: 17px;
  font-weight: 620;
  letter-spacing: -0.015em;
  color: var(--text);
  line-height: 1.22;
}
.nav-group { display: flex; flex-direction: column; gap: 3px; }
.nav-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  min-height: 44px;
  border-radius: 12px;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--sidebar-text);
  background: transparent;
  border: none;
  text-align: left;
  width: 100%;
  transition: background 0.15s ease, transform 0.1s ease;
}
.nav-row:hover:not(.active):not(.disabled) { background: oklch(100% 0 0 / 0.5); }
.nav-row:active:not(.disabled) { transform: scale(0.98); }
.nav-row svg { flex: none; width: 18px; height: 18px; }
.nav-row.active {
  background: var(--accent);
  color: var(--sidebar-active-text);
  font-weight: 560;
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.3), 0 4px 12px oklch(45% 0.18 258 / 0.3);
}
.nav-row.disabled { color: oklch(62% 0.01 260); cursor: not-allowed; justify-content: space-between; }
.nav-row.disabled .v2-tag {
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0;
  background: oklch(100% 0 0 / 0.55);
  color: oklch(52% 0.012 260);
  padding: 2px 9px;
  border-radius: 99px;
}
/* Sidebar "N overdue" warning — e.g. Attendance nav row when a driver/PA
   never submitted a journey. Marked up as the last child of a .nav-row, so
   push it to the end of the row regardless of the label text's length. */
.nav-badge {
  margin-left: auto;
  flex: none;
  font-size: 11px;
  font-weight: 620;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 99px;
  background: var(--danger);
  color: #fff;
}
.nav-row.active .nav-badge { background: oklch(100% 0 0 / 0.9); color: var(--accent); }
.nav-caption {
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-tertiary);
  padding: 16px 11px 6px 11px;
}
#sidebar .footer {
  margin-top: auto;
  padding: 8px;
  border-top: none;
  border-radius: 16px;
  background: oklch(100% 0 0 / 0.45);
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.4);
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600;
  background: var(--accent);
  color: #fff;
}
#sidebar .footer-name { font-size: 14px; color: var(--text); font-weight: 560; }
#sidebar .footer-role { font-size: 12.5px; color: var(--text-tertiary); }
#sign-out {
  background: none; border: none; color: var(--accent);
  font-size: 12.5px; text-decoration: none; padding: 0; margin-top: 6px;
}
#sign-out:hover { text-decoration: underline; }

#main {
  flex: 1;
  padding: 26px 32px 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.page { display: flex; flex-direction: column; gap: 20px; }
.page-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.page-title { font-size: 28px; font-weight: 660; letter-spacing: -0.024em; }
.page-subtitle { font-size: 14px; line-height: 1.45; color: var(--text-tertiary); margin-top: 3px; }

.date-nav {
  display: flex; align-items: center; gap: 3px;
  background: oklch(100% 0 0 / 0.45);
  backdrop-filter: var(--blur-thin);
  -webkit-backdrop-filter: var(--blur-thin);
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.45);
  border-radius: 14px;
  padding: 3px;
}
.date-nav button {
  background: transparent; border: none; border-radius: 11px;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--text);
}
.date-nav button:hover { background: oklch(100% 0 0 / 0.6); }
.date-nav input[type="date"] {
  font-family: var(--sans); font-size: 15px; border: none; border-radius: 11px;
  padding: 8px 10px; width: 152px; background: transparent; color: var(--text);
}
.date-nav input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
  border-radius: 6px;
  padding: 3px;
  margin-left: 4px;
}
.date-nav input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: oklch(100% 0 0 / 0.7);
}

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
#payroll-content { display: flex; flex-direction: column; gap: 20px; }
.stat {
  min-width: 0;
  background: var(--glass);
  backdrop-filter: var(--blur-thin);
  -webkit-backdrop-filter: var(--blur-thin);
  border: none;
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: var(--rim-soft), var(--lift-sm);
}
.stat .n { font-size: 30px; font-weight: 660; letter-spacing: -0.025em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 13px; color: var(--text-tertiary); margin-top: 3px; }

/* data surfaces stay opaque */
.panel {
  background: var(--surface);
  border: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--lift);
}
.panel-header {
  padding: 17px 22px;
  border-bottom: none;
  font-size: 17px; font-weight: 590; letter-spacing: -0.013em;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  background: oklch(100% 0 0 / 0.72);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: inset 0 -1px 0 oklch(30% 0.02 260 / 0.07);
}
.panel-header-title { display: flex; align-items: center; gap: 10px; }

/* ---------- table search boxes (Today / Contracts / Staff / Cover / Attendance) ---------- */

.table-search {
  font-size: 13.5px; font-weight: 400; letter-spacing: normal;
  min-height: 36px; padding: 7px 12px;
  flex: 0 1 220px; min-width: 140px;
}
.table-search-standalone { width: 280px; max-width: 100%; }

table { width: 100%; border-collapse: separate; border-spacing: 0; }
th {
  text-align: left;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-tertiary);
  font-weight: 500;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
td {
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.45;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: oklch(97% 0.004 258); }

.tag {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 530; letter-spacing: -0.005em;
  text-transform: none;
  padding: 5px 11px; border-radius: 99px;
  margin: 2px 4px 2px 0; white-space: nowrap;
}
.tag-ok { background: var(--success-soft); color: var(--success); }
.tag-warn { background: var(--warning-soft); color: var(--warning); }
.tag-danger { background: var(--danger-soft); color: var(--danger); }
.tag-neutral { background: var(--neutral-soft); color: var(--neutral); }

.exc-list { display: flex; flex-direction: column; gap: 10px; }
.exc-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--glass);
  backdrop-filter: var(--blur-thin);
  -webkit-backdrop-filter: var(--blur-thin);
  border: none;
  border-radius: 18px;
  padding: 15px 18px;
  box-shadow: var(--rim-soft), var(--lift-sm);
}
.exc-dot { flex: none; width: 9px; height: 9px; border-radius: 99px; margin-top: 6px; }

.section-label {
  font-size: 13px; font-weight: 590; color: var(--text-secondary);
  text-transform: none; letter-spacing: 0;
}

.empty-state { padding: 34px; text-align: center; color: var(--text-tertiary); font-size: 15px; }

.hint-text { font-size: 14px; line-height: 1.5; color: var(--text-tertiary); margin-top: 0; text-wrap: pretty; }

/* ---------- form controls ---------- */

select, input[type="text"], input[type="number"] {
  font-family: var(--sans);
  font-size: 15px;
  min-height: 40px;
  border: none;
  border-radius: 12px;
  padding: 9px 12px;
  background: oklch(100% 0 0 / 0.62);
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.5), inset 0 0 0 1px oklch(30% 0.02 260 / 0.06);
  color: var(--text);
}
select:focus, input[type="text"]:focus, input[type="number"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--surface);
}
select:disabled, input:disabled {
  background: var(--neutral-soft);
  color: var(--text-tertiary);
  box-shadow: none;
}

.btn {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 560;
  letter-spacing: -0.01em;
  border-radius: 14px;
  padding: 11px 20px;
  min-height: 44px;
  border: none;
  background: oklch(100% 0 0 / 0.55);
  backdrop-filter: var(--blur-thin);
  -webkit-backdrop-filter: var(--blur-thin);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.85), inset 0 0 0 1px oklch(100% 0 0 / 0.45), 0 2px 10px oklch(30% 0.04 260 / 0.1);
  color: var(--text);
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.1s ease;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary {
  background: var(--accent);
  color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.32), 0 4px 14px oklch(45% 0.18 258 / 0.34);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-ghost { color: var(--text-secondary); }
.btn-ghost:hover:not(:disabled) { background: oklch(100% 0 0 / 0.75); }
.btn-danger-outline {
  background: var(--danger-soft);
  color: var(--danger);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.5);
}
.btn-danger-outline:hover:not(:disabled) { background: oklch(92% 0.055 25); }

.row-actions { display: flex; gap: 8px; }
.table-scroll { overflow-x: auto; }

/* ---------- Contracts: expandable passenger roster ---------- */

.contract-row { cursor: pointer; }
.contract-row:hover td { background: oklch(97% 0.004 258); }
.chevron-cell {
  width: 22px; text-align: center; color: var(--text-tertiary); font-size: 16px;
  transition: transform 0.18s ease;
}
.chevron-cell.expanded { transform: rotate(90deg); color: var(--text-secondary); }
.contract-detail-row td {
  background: oklch(97.5% 0.003 258);
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
}

/* ---------- Payment runs: expandable per-person rows ---------- */

.run-summary-row { cursor: pointer; }
.run-summary-row:hover td { background: oklch(97% 0.004 258); }
.run-summary-row td { padding: 14px 16px; }
.run-sub { font-size: 11.5px; color: var(--text-tertiary); }
.run-expansion-row td {
  background: oklch(97.5% 0.003 258);
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.run-children { display: flex; flex-direction: column; gap: 10px; }
.run-children-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.run-print-all .btn { min-height: 38px; padding: 7px 15px; font-size: 14px; }
.run-children-table { width: 100%; border-collapse: collapse; }
.run-children-table thead th {
  font-size: 11.5px; font-weight: 560; color: var(--text-tertiary);
  text-align: right; padding: 6px 12px; border-bottom: 1px solid var(--border-soft);
}
.run-children-table thead th:first-child { text-align: left; }
.run-children-table thead th:nth-child(4) { text-align: right; }
.run-children-table tbody td {
  padding: 9px 12px; font-size: 14px; vertical-align: top;
  border-bottom: 1px solid var(--border-soft);
}
.run-children-table tbody tr:last-child td { border-bottom: none; }
.run-children-table tbody td:nth-child(3) { text-align: right; }
.run-children-table tbody td:nth-child(4) { text-align: right; }
.run-children-table tbody td:last-child { text-align: right; white-space: nowrap; }
.run-children-table .btn { min-height: 34px; padding: 5px 13px; font-size: 13.5px; }

.passenger-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px;
}
.passenger-card {
  background: var(--surface); border: none; border-radius: 16px; padding: 13px 15px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--lift-sm);
  min-width: 0;
}
.passenger-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.passenger-name { font-size: 15px; font-weight: 560; }
.passenger-row-order { display: flex; gap: 4px; }
.passenger-line { font-size: 13.5px; color: var(--text-secondary); line-height: 1.45; }
.passenger-flag {
  font-size: 13px; color: var(--warning); background: var(--warning-soft);
  border-radius: 10px; padding: 7px 10px; line-height: 1.45;
}

/* ---------- New Contract (document intake) ---------- */

.intake-dropzone {
  border: 1.5px dashed oklch(84% 0.02 258);
  border-radius: 18px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  margin-top: 12px;
  background: oklch(100% 0 0 / 0.4);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.intake-dropzone:hover, .intake-dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.intake-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 14px;
}
.intake-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-secondary);
  font-weight: 400;
  min-width: 0;
}
.intake-field input, .intake-field select, .intake-field textarea {
  font-size: 15px;
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  width: 100%;
  color: var(--text);
}
.intake-field textarea {
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  background: oklch(100% 0 0 / 0.62);
  box-shadow: inset 0 0 0 1px oklch(30% 0.02 260 / 0.06);
  resize: vertical;
}
.intake-field-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 9px;
}
.intake-field-checkbox input { width: auto; min-height: 0; accent-color: var(--accent); }
.intake-field-wide { grid-column: 1 / -1; }

.passenger-edit-card {
  background: oklch(97.5% 0.003 258);
  border: none;
  border-radius: 18px;
  padding: 15px 17px;
  margin-bottom: 12px;
}

/* ---------- Staff CRUD ---------- */

.token-reveal {
  background: var(--warning-soft);
  border: none;
  border-radius: 18px;
  padding: 15px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.6);
}
.token-reveal .token-reveal-title { font-size: 14px; font-weight: 590; color: var(--warning); }
.token-reveal .token-reveal-value {
  font-family: var(--mono);
  font-size: 14px;
  background: var(--surface);
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  word-break: break-all;
  box-shadow: inset 0 0 0 1px oklch(30% 0.02 260 / 0.08);
}
.staff-edit-row td { background: oklch(97.5% 0.003 258); }
.staff-edit-row input[type="text"], .staff-edit-row input[type="number"] { width: 100%; }

/* ---------- Assistant chat ---------- */

.chat-panel { display: flex; flex-direction: column; height: 580px; }
.chat-log {
  flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px;
}
.chat-bubble {
  max-width: 72%; padding: 11px 15px; border-radius: 20px; font-size: 15px; line-height: 1.45;
}
.chat-bubble.user {
  align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 6px;
  box-shadow: 0 4px 14px oklch(45% 0.18 258 / 0.28);
}
.chat-bubble.assistant {
  align-self: flex-start; background: oklch(96% 0.004 258); border: none;
  border-bottom-left-radius: 6px;
}
.chat-proposal-card {
  align-self: flex-start; max-width: 78%; background: var(--surface); border: none;
  border-radius: 20px; padding: 15px 17px; display: flex; flex-direction: column; gap: 11px;
  box-shadow: var(--lift-sm);
}
.chat-proposal-card .cp-label {
  font-size: 13px; font-weight: 560; text-transform: none; letter-spacing: 0; color: var(--text-tertiary);
}
.chat-proposal-card .cp-summary { font-size: 15px; }
.chat-proposal-card .cp-status { font-size: 13.5px; color: var(--text-tertiary); }
.chat-input-row {
  display: flex; gap: 10px; padding: 14px 18px;
  border-top: none;
  background: oklch(100% 0 0 / 0.72);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: inset 0 1px 0 oklch(30% 0.02 260 / 0.07);
}
.chat-input-row input[type="text"] {
  flex: 1; font-size: 16px; padding: 11px 14px; min-height: 44px; border-radius: 14px;
}
#chat-attach-btn { font-size: 18px; padding: 0 12px; min-height: 44px; line-height: 1; }
#chat-mic-btn { font-size: 18px; padding: 0 12px; min-height: 44px; line-height: 1; }
#chat-mic-btn.recording {
  background: var(--danger); color: #fff; animation: chat-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes chat-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(55% 0.22 25 / 0.45); }
  50% { box-shadow: 0 0 0 8px oklch(55% 0.22 25 / 0); }
}
.chat-attach-chosen {
  display: flex; align-items: center; gap: 10px; padding: 8px 18px; font-size: 13.5px;
  color: var(--text-secondary); border-top: 1px solid var(--border);
}
.chat-attach-chosen .chat-attach-remove {
  color: var(--danger); cursor: pointer; font-weight: 560; background: none; border: none; padding: 0;
}
.chat-calendar-card {
  align-self: flex-start; max-width: 82%; background: var(--surface); border: none;
  border-radius: 20px; padding: 15px 17px; display: flex; flex-direction: column; gap: 11px;
  box-shadow: var(--lift-sm);
}
.chat-calendar-card .cc-label {
  font-size: 13px; font-weight: 560; color: var(--text-tertiary);
}
.chat-calendar-card .cc-field { display: flex; flex-direction: column; gap: 3px; }
.chat-calendar-card .cc-field label { font-size: 12.5px; color: var(--text-tertiary); }
.chat-calendar-card .cc-field input {
  font-size: 14.5px; padding: 6px 9px; border-radius: 8px;
}
.chat-calendar-card .cc-stats { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }
.chat-calendar-card .cc-notes { font-size: 13px; color: var(--text-tertiary); font-style: italic; }
.chat-calendar-card .cc-status { font-size: 13.5px; color: var(--text-tertiary); }

/* ---------- Payroll ---------- */

.payroll-layout { display: flex; gap: 20px; align-items: stretch; flex-wrap: wrap; }
.payroll-layout > .panel:not(.payroll-detail) { flex: 1 1 450px; min-width: 0; max-height: min(680px, 78vh); display: flex; flex-direction: column; }
/* The whole pay-data block scrolls inside the panel — the stats row, the staff
   detail panel and the action bar stay put. `flex: 1 1 auto; min-height: 0`
   lets the wrap shrink to the panel's max-height instead of growing to content
   height (which is what made the table read as "cut off": the panel clipped it
   and no scrollbar ever appeared). */
#payroll-table-wrap { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; overflow-y: auto; }
/* The two engagement blocks size to their content; only the container scrolls. */
#payroll-table-wrap .table-scroll { flex: 0 0 auto; overflow: visible; }
/* macOS hides scrollbars until you scroll, which reads as "cut off" — force a
   visible one so it's obvious there are more rows below. */
#payroll-table-wrap::-webkit-scrollbar { -webkit-appearance: none; width: 10px; }
#payroll-table-wrap::-webkit-scrollbar-thumb { background: #c4c6cc; border-radius: 5px; }
#payroll-table-wrap::-webkit-scrollbar-track { background: transparent; }
.payroll-layout > .payroll-detail { flex: 0 0 360px; }
tr.payroll-row-selected td { background: var(--accent-soft); }
tr.payroll-row-blocked td { background: oklch(97% 0.025 25); }
.payroll-block-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border, oklch(92% 0.01 260));
}
.payroll-block-head .pd-title { flex: 0 0 auto; }
.payroll-block-head .hint-text { flex: 1 1 260px; margin: 0; }
.payroll-block-head .payroll-bank-total { flex: 0 0 auto; color: var(--accent, oklch(52% 0.15 260)); }
.payroll-block-head .payroll-select-all { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary, oklch(40% 0.02 260)); cursor: pointer; user-select: none; }
.payroll-block-head .payroll-select-all input { accent-color: var(--accent, oklch(52% 0.15 260)); cursor: pointer; }
/* The awaiting-agreement figure sits on its own line under the transfer
   total, so the two can never be misread as one number. Empty when nobody
   ticked needs to agree a statement. */
.payroll-block-head .payroll-awaiting-total:empty { display: none; }
.payroll-block-head .payroll-awaiting-total { flex: 1 1 100%; }
.payroll-detail {
  display: flex;
  flex-direction: column;
  max-height: min(680px, 78vh);
  min-height: 0;
}
.payroll-detail .panel-header {
  flex: 0 0 auto;
}
.payroll-detail-content {
  flex: 1 1 0;
  min-height: 0;
  padding: 18px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.payroll-detail .pd-title { font-size: 17px; font-weight: 590; letter-spacing: -0.013em; }
.payroll-detail .pd-subtitle { font-size: 13px; color: var(--text-tertiary); margin-bottom: 8px; }
.payroll-line {
  display: flex; align-items: center; justify-content: space-between; padding: 9px 0;
  border-bottom: 1px solid var(--border-soft); font-size: 14.5px; gap: 10px;
  font-variant-numeric: tabular-nums;
}
.payroll-line:last-of-type { border-bottom: none; }
.payroll-line-total {
  display: flex; align-items: center; justify-content: space-between; padding-top: 11px; margin-top: 6px;
  border-top: 1px solid var(--border); font-weight: 620; font-variant-numeric: tabular-nums;
}
.payroll-actionbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: none; border-radius: 20px; padding: 17px 22px;
  box-shadow: var(--rim-soft), var(--lift-sm);
}

/* ---------- Portal Access ---------- */

.portal-layout { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.portal-list-col { width: 320px; flex: none; display: flex; flex-direction: column; gap: 10px; }
#portal-search {
  width: 100%; font-size: 16px; min-height: 44px; padding: 11px 14px;
  border: none; border-radius: 14px;
  background: oklch(100% 0 0 / 0.6);
  backdrop-filter: var(--blur-thin);
  -webkit-backdrop-filter: var(--blur-thin);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.8), inset 0 0 0 1px oklch(100% 0 0 / 0.45);
  color: var(--text);
}
#portal-search:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--surface); }
.portal-list {
  background: var(--surface); border: none; border-radius: 20px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px; max-height: 640px; overflow-y: auto;
  box-shadow: var(--lift-sm);
}
.portal-srow {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; min-height: 44px;
  border-radius: 13px; cursor: pointer; border: none; background: none;
  width: 100%; text-align: left; font-family: inherit;
}
.portal-srow:hover { background: oklch(97% 0.004 258); }
.portal-srow.active { background: var(--accent-soft); }
.portal-srow-name { font-weight: 560; font-size: 15px; }
.portal-srow-sub { font-size: 13px; color: var(--text-tertiary); }
.portal-dot { width: 8px; height: 8px; border-radius: 99px; flex: none; margin-left: auto; }
.portal-dot-on { background: oklch(58% 0.15 148); }
.portal-dot-off { background: oklch(78% 0.008 260); }
.portal-detail { flex: 1 1 380px; padding: 26px 28px; display: flex; flex-direction: column; gap: 20px; min-height: 320px; min-width: 0; }
.portal-field-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 20px; padding: 18px 0;
  border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
}
.portal-field .k { font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--text-tertiary); font-weight: 400; }
.portal-field .v { font-size: 15px; margin-top: 3px; }
.portal-footnote {
  font-size: 13px; color: var(--text-tertiary); background: oklch(97% 0.004 258);
  border-radius: 14px; padding: 12px 14px; line-height: 1.5;
}

#error-banner {
  background: var(--danger-soft); color: var(--danger); border-radius: 14px;
  padding: 12px 16px; font-size: 14px;
}

#status-footer {
  font-size: 12.5px; color: var(--text-tertiary); margin-top: auto; padding-top: 8px;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  #app-shell { flex-direction: column; }

  /* the rail becomes a compact sticky top bar; the nav itself collapses
     into a dropdown drawer opened with the hamburger button, so it never
     pushes page content down the screen */
  #sidebar {
    width: 100%; height: auto; overflow: visible; position: sticky; top: 0; z-index: 30;
    flex-direction: column; align-items: stretch;
    padding: max(10px, env(safe-area-inset-top)) 14px 10px 14px;
    box-shadow: inset 0 -1px 0 oklch(100% 0 0 / 0.4), 0 4px 20px oklch(30% 0.04 260 / 0.1);
  }

  .sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  #sidebar .brand { padding: 0; display: flex; align-items: center; }
  .sidebar-logo-chip { margin-bottom: 0; padding: 6px 9px; }
  .sidebar-logo-chip img { width: 84px; }
  #sidebar .brand-name { display: none; }

  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    flex: none; width: 44px; height: 44px;
    border: none; border-radius: 12px;
    background: oklch(100% 0 0 / 0.55);
    box-shadow: var(--rim-soft);
    color: var(--text);
  }
  .nav-toggle:hover { background: oklch(100% 0 0 / 0.75); }
  .nav-toggle svg { width: 20px; height: 20px; }

  .sidebar-nav {
    display: none;
    position: absolute;
    left: 14px; right: 14px; top: calc(100% + 8px);
    flex-direction: column; gap: 4px;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
    background: var(--glass-thick);
    backdrop-filter: var(--blur-thick);
    -webkit-backdrop-filter: var(--blur-thick);
    border-radius: 20px;
    box-shadow: var(--rim), var(--lift-lg);
  }
  .sidebar-nav.open { display: flex; }

  .nav-overlay {
    display: block;
    position: fixed; inset: 0; z-index: 25;
    background: oklch(20% 0.01 260 / 0.28);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
  }
  .nav-overlay[hidden] { display: none; }

  .nav-group { flex-direction: column; gap: 3px; }
  .nav-row { width: 100%; padding: 12px 12px; font-size: 15.5px; }
  .nav-caption { display: block; }
  #sidebar .footer { margin-top: 8px; margin-left: 0; padding: 10px; }
  #sign-out { margin-top: 2px; }

  #main { padding: 16px 14px 40px; gap: 18px; }
  .page { gap: 16px; }
  .page-title { font-size: 24px; }
  .page-header { align-items: flex-start; }

  .panel { border-radius: 18px; }
  .panel-header { padding: 15px 18px; font-size: 16px; }
  .table-scroll { -webkit-overflow-scrolling: touch; }
  .table-scroll table { min-width: 560px; }
  th, td { padding: 12px 14px; }

  .btn { padding: 11px 18px; font-size: 15px; }
  select, input[type="text"], input[type="number"] { padding: 11px 12px; font-size: 16px; min-height: 44px; }
  .date-nav { width: 100%; }
  .date-nav button { width: 44px; height: 44px; }
  .date-nav input[type="date"] { flex: 1; width: auto; }

  .payroll-detail { width: 100%; }
  .portal-list-col { width: 100%; }
  .chat-panel { height: 70vh; }
}

@media (max-width: 420px) {
  .login-card { padding: 26px 20px; border-radius: 22px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .page-title { font-size: 21px; }
}

/* ---------- accessibility fallbacks ---------- */

@media (prefers-reduced-transparency: reduce) {
  #sidebar, .panel-header, .stat, .exc-card, .btn, .login-card,
  .payroll-actionbar, .chat-input-row, #portal-search, .date-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--surface) !important;
  }
  body::before { display: none; }
  body { background: oklch(97.5% 0.003 258); }
}

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

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #sidebar, .panel-header, .stat, .exc-card, .btn, .login-card,
  .payroll-actionbar, .chat-input-row, #portal-search, .date-nav {
    background: var(--surface);
  }
}