/* ==========================================================================
   Airport Dashboard — dark "departures board" theme.
   Near-black surfaces, red accent, DM Sans, generous spacing, high contrast.
   No dragon branding: this is a client-facing operational tool.
   ========================================================================== */

:root {
  --bg: #121212;
  --surface: #1c1c1c;
  --surface-2: #232323;
  --surface-3: #2b2b2b;
  --border: #333333;
  --border-strong: #454545;

  --text: #f4f4f4;
  --text-muted: #a8a8a8;
  --text-dim: #7d7d7d;

  --accent: hsl(0 85% 55%);
  --accent-hover: hsl(0 85% 62%);
  --accent-soft: hsl(0 85% 55% / 0.14);

  --amber: hsl(42 96% 58%);
  --amber-soft: hsl(42 96% 58% / 0.16);
  --green: hsl(145 62% 49%);
  --green-soft: hsl(145 62% 49% / 0.16);

  --radius: 10px;
  --radius-sm: 6px;
  --space: 1rem;
  --shadow: 0 8px 24px rgb(0 0 0 / 0.45);

  --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }

.muted { color: var(--text-muted); font-size: 0.9375rem; }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------- top bar */
.topbar {
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #1a1a1a, #151515);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0.875rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 0.75rem; }

.brand-mark {
  width: 12px;
  height: 28px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 14px hsl(0 85% 55% / 0.5);
}

.brand-name {
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.role-chip {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  background: var(--surface-2);
}

.topnav { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.inline-form { display: inline; margin: 0; }

/* ---------------------------------------------------------------- layout */
.page {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.page--narrow { max-width: 720px; }
/* The departures board wants as much of the viewport as it can get — this is
   the page that must show all 9 columns with no horizontal scroll at normal
   desktop widths (1366px+). A generous cap still exists so rows don't stretch
   absurdly thin on an ultrawide monitor. */
.page--wide { max-width: 2000px; padding-left: 1rem; padding-right: 1rem; }

.footer {
  border-top: 1px solid var(--border);
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--text-dim);
  font-size: 0.8125rem;
}

.footer-flag { color: var(--accent); opacity: 0.85; }

/* ----------------------------------------------------------------- cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}

.card--login { margin-top: 4rem; }
.card--error { text-align: center; }
.card-head { margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.35rem; }
.card-title { font-size: 1.375rem; }

.error-code {
  font-family: var(--font-mono);
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.empty {
  color: var(--text-dim);
  padding: 1.25rem 0;
  font-style: italic;
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }

.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover { background: var(--surface-3); border-color: var(--accent); }

.btn-sm { padding: 0.4rem 0.75rem; font-size: 0.875rem; }
.btn-block { width: 100%; }

.btn:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------- forms */
.stack { display: flex; flex-direction: column; gap: 1.1rem; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.25rem;
}

.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.field--wide { grid-column: span 2; }
.field--small { max-width: 100%; }
.form-grid__full { grid-column: 1 / -1; }

label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

input[type="text"],
input[type="password"],
input[type="datetime-local"] {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
}

input::placeholder { color: var(--text-dim); }
input:focus { border-color: var(--accent); }

/* Keep the native date/time picker icon visible on a dark background. */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.75;
  cursor: pointer;
}

.field--error input { border-color: var(--accent); background: var(--accent-soft); }
.field-error { color: var(--accent-hover); font-size: 0.8125rem; }

.checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-size: 0.9375rem;
  cursor: pointer;
}

.checkbox input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }

.form-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

/* ---------------------------------------------------------------- alerts */
.alert {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: 0.9375rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.alert--error { background: var(--accent-soft); border-color: var(--accent); color: #ffd9d9; }
.alert--warn { background: var(--amber-soft); border-color: var(--amber); color: #ffe9b8; }
.alert--ok { background: var(--green-soft); border-color: var(--green); color: #c8f5da; }

/* ---------------------------------------------------------------- tables */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  -webkit-overflow-scrolling: touch;
  /* Visible scroll affordance: on narrow (mobile) widths these tables scroll
     horizontally, and the scrollbar itself must be a clear, always-present
     hint that there's more to the right — not the auto-hiding overlay
     scrollbar some browsers use by default. */
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) var(--surface-2);
}

.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-track { background: var(--surface-2); }
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.data-table,
.board-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.data-table th,
.board-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  /* Defensive: a header label that's ever a touch too long for its fixed
     desktop column width (see media query below) must clip with an ellipsis
     rather than visually run into the next column's header — that actually
     happened during testing ("LATEST LEAVE" bleeding into "ROUTE") before
     these labels were shortened and this safety net was added. */
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
}

/* SR's "Scheduled today" table gets the same no-horizontal-scroll treatment
   as the dashboard board: tighter padding + fixed, budgeted column widths so
   Company, Destination, Route, and Driver (all free text) can't force the
   row wider than the viewport at normal desktop widths. Scoped to desktop
   widths only (see media query below) — at mobile widths this table falls
   back to natural sizing, which is allowed to scroll horizontally. */
.data-table--scheduled th,
.data-table--scheduled td {
  padding: 0.55rem 0.6rem;
}

.data-table--scheduled .zone-tag {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.data-table tr:last-child td,
.board-table tr:last-child td { border-bottom: none; }

.data-table tbody tr:hover,
.board-table tbody tr:hover { background: var(--surface-2); }

.col-action { text-align: right; white-space: nowrap; }

.zone-tag {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid;
}

.badge--new { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }
.badge--scheduled { background: var(--green-soft); border-color: var(--green); color: var(--green); }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 1.5rem;
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.25rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.detail-grid dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

.detail-grid dd { margin: 0.2rem 0 0; font-size: 0.9375rem; }

.dup-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.dup-card .detail-grid { margin-bottom: 0; border: none; background: transparent; padding: 0; }
.dup-title { font-size: 1rem; margin-bottom: 0.75rem; color: var(--text-muted); }

/* ------------------------------------------------------- departures board */
.board-body { background: #0d0d0d; }

.board {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.board-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.5rem 1.75rem;
  border-bottom: 2px solid var(--accent);
}

.board-title {
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.board-date { color: var(--text-muted); font-size: 1rem; }

.board-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.board-count { color: var(--text); font-weight: 500; }
.board-clock { font-family: var(--font-mono); font-size: 0.875rem; color: var(--text-dim); }

.board .table-wrap { border: none; border-radius: 0; }

/* Column-width budget for the 9-column board, tuned so the full row fits with
   no horizontal scroll at 1366px and wider. Status and the time columns keep
   their full text size for across-the-room readability; the free-text
   columns (company/destination/route/driver) get an ellipsis instead of
   growing the table past the viewport — see .cell-company etc. below. */
.board-table th {
  padding: 0.55rem 0.65rem;
  font-size: 0.8125rem;
  background: #171717;
}

.board-table td {
  padding: 0.7rem 0.65rem;
  border-bottom: 1px solid var(--border);
  font-size: 1.25rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}

.board-table .cell-company { font-weight: 700; }
.board-table .cell-time { font-family: var(--font-mono); font-size: 1.2rem; letter-spacing: 0.02em; }
.board-table .zone-tag { font-size: 0.9375rem; padding: 0.2rem 0.7rem; }
.board-table .badge { font-size: 0.9375rem; padding: 0.3rem 0.9rem; }

/* Free-text fields have no practical length cap from the form (up to 120/100
   characters), so they get a bounded column width plus an ellipsis + native
   title tooltip on overflow rather than being allowed to blow out the row. */
.cell-company,
.cell-destination,
.cell-route,
.cell-driver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Zone names can run long ("Peel (Mississauga/Brampton)") — clip with an
   ellipsis inside the pill rather than letting it force the column wider. */
.board-table .zone-tag {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.board-empty-row td {
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
  font-size: 1rem;
}

.connection-badge {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--amber);
  color: var(--amber);
  font-size: 0.8125rem;
  box-shadow: var(--shadow);
  z-index: 30;
}

[hidden] { display: none !important; }

/* ------------------------------------------------------------------------
   Desktop-only fixed column widths for the two tables the fix bundle calls
   out by name (the dashboard board, and SR's "Scheduled today" table).
   table-layout: fixed makes the widths below authoritative — the browser
   stops sizing columns to their content, which is what guarantees the row
   can never exceed the table's own width no matter how long a company name,
   route, or driver value turns out to be. Scoped to >=761px on purpose: at
   mobile widths these two tables fall back to natural (auto) sizing, so they
   may still scroll horizontally there — allowed per spec, as long as
   .table-wrap's scrollbar (styled above) makes that scrollability visible.
   ------------------------------------------------------------------------ */
@media (min-width: 761px) {
  .board-table { table-layout: fixed; }

  .board-table th:nth-child(1), .board-table td:nth-child(1) { width: 17%; } /* Company */
  .board-table th:nth-child(2), .board-table td:nth-child(2) { width: 10%; } /* Destination (city) */
  .board-table th:nth-child(3), .board-table td:nth-child(3) { width: 14%; } /* Zone */
  .board-table th:nth-child(4), .board-table td:nth-child(4) { width: 9%; }  /* Requested */
  .board-table th:nth-child(5), .board-table td:nth-child(5) { width: 8%; }  /* Leave */
  .board-table th:nth-child(6), .board-table td:nth-child(6) { width: 11%; } /* Route */
  .board-table th:nth-child(7), .board-table td:nth-child(7) { width: 12%; } /* Driver */
  .board-table th:nth-child(8), .board-table td:nth-child(8) { width: 9%; }  /* Ready By */
  .board-table th:nth-child(9), .board-table td:nth-child(9) { width: 10%; } /* Status */

  .data-table--scheduled { table-layout: fixed; }

  .data-table--scheduled th:nth-child(1), .data-table--scheduled td:nth-child(1) { width: 16%; } /* Company */
  .data-table--scheduled th:nth-child(2), .data-table--scheduled td:nth-child(2) { width: 14%; } /* Destination */
  .data-table--scheduled th:nth-child(3), .data-table--scheduled td:nth-child(3) { width: 12%; } /* Zone */
  .data-table--scheduled th:nth-child(4), .data-table--scheduled td:nth-child(4) { width: 9%; }  /* Requested */
  .data-table--scheduled th:nth-child(5), .data-table--scheduled td:nth-child(5) { width: 8%; }  /* Leave */
  .data-table--scheduled th:nth-child(6), .data-table--scheduled td:nth-child(6) { width: 10%; } /* Route */
  .data-table--scheduled th:nth-child(7), .data-table--scheduled td:nth-child(7) { width: 11%; } /* Driver */
  .data-table--scheduled th:nth-child(8), .data-table--scheduled td:nth-child(8) { width: 8%; }  /* Ready By */
  .data-table--scheduled th:nth-child(9), .data-table--scheduled td:nth-child(9) { width: 12%; } /* Action */
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 760px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .field--wide { grid-column: span 1; }
  .page { padding: 1.25rem 1rem 2.5rem; }
  .card { padding: 1.25rem; }
  .card--login { margin-top: 1.5rem; }
  .board-title { font-size: 1.5rem; }
  .board-table td { font-size: 1rem; padding: 0.75rem 0.85rem; }
  .board-table .cell-time { font-size: 1rem; }
  .topbar-inner { padding: 0.75rem 1rem; }
}