:root {
  --bg: #0a0e16; --panel: #121826; --panel-2: #0e1420; --border: #1f2a3d;
  --text: #d6e0f0; --muted: #6b7a92; --accent: #29b6d8;
  --online: #2e9e5b; --stale: #d9a23b; --offline: #d6455b;
  --pending: #8b7fd4; --mono: 'IBM Plex Mono', monospace;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 14px; line-height: 1.5; }
a { color: var(--accent); text-decoration: none; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 0.85em; }

/* Topbar */
.topbar { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; background: var(--panel); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand-mark { width: 10px; height: 10px; border-radius: 2px; background: var(--accent);
  align-self: center; box-shadow: 0 0 8px var(--accent); }
.brand-text { font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em; }
.brand-text .accent { color: var(--accent); }
.brand-sub { font-family: var(--mono); font-size: 0.7rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.15em; }
.topnav { display: flex; align-items: center; gap: 20px; }
.topnav a { color: var(--text); font-weight: 500; }
.topnav a:hover { color: var(--accent); }
.topnav .who { color: var(--muted); font-family: var(--mono); font-size: 0.8rem; }
.topnav .logout { color: var(--muted); }
.content { padding: 28px 24px; max-width: 1200px; margin: 0 auto; }
.flash { background: rgba(217,69,91,0.12); border: 1px solid var(--offline);
  color: var(--text); padding: 10px 16px; margin: 16px 24px 0; border-radius: 6px; }

/* Fleet header + pills */
.fleet-header { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
h1 { font-size: 1.5rem; margin: 0; font-weight: 600; }
.stat-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.stat-pill { font-family: var(--mono); font-size: 0.78rem; padding: 4px 11px;
  border-radius: 20px; border: 1px solid var(--border); background: var(--panel); }
.stat-pill.s-online { color: var(--online); border-color: rgba(46,158,91,0.4); }
.stat-pill.s-stale { color: var(--stale); border-color: rgba(217,162,59,0.4); }
.stat-pill.s-offline { color: var(--offline); border-color: rgba(214,69,91,0.4); }
.stat-pill.s-pending { color: var(--pending); border-color: rgba(139,127,212,0.4); }
.stat-pill.s-total { color: var(--muted); }

/* Fleet table */
.fleet-table { width: 100%; border-collapse: collapse; background: var(--panel);
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.fleet-table thead th { text-align: left; font-family: var(--mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
  padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--panel-2); }
.fleet-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.fleet-table tbody tr:last-child td { border-bottom: none; }
.fleet-table tbody tr:hover { background: rgba(41,182,216,0.04); }
.station-link { font-weight: 600; color: var(--text); }
.station-link:hover { color: var(--accent); }
.station-id { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }

/* Status dot */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 8px; vertical-align: middle; }
.dot-online { background: var(--online); box-shadow: 0 0 7px var(--online); }
.dot-stale { background: var(--stale); box-shadow: 0 0 7px var(--stale); }
.dot-offline { background: var(--offline); box-shadow: 0 0 7px var(--offline); }
.dot-pending { background: var(--pending); }
.dot-rejected, .dot-disabled { background: var(--muted); }
.state-label { text-transform: capitalize; font-size: 0.85rem; }
.state-label.big { font-size: 1rem; color: var(--muted); }

.mini-pill { font-family: var(--mono); font-size: 0.7rem; padding: 2px 8px; border-radius: 4px; }
.mini-pill.ok { color: var(--online); background: rgba(46,158,91,0.12); }
.mini-pill.bad { color: var(--offline); background: rgba(214,69,91,0.12); }

/* Buttons */
.btn-mini { font-family: var(--sans); font-size: 0.78rem; padding: 5px 12px;
  border-radius: 5px; border: 1px solid var(--accent); background: var(--accent);
  color: #051016; cursor: pointer; font-weight: 600; }
.btn-mini.ghost, .btn-mini.reject { background: transparent; color: var(--muted); border-color: var(--border); }
.btn-mini.reject:hover { border-color: var(--offline); color: var(--offline); }
.btn-mini.approve { background: var(--online); border-color: var(--online); }
.row-actions { display: flex; gap: 6px; }

/* Detail */
.back { font-family: var(--mono); font-size: 0.8rem; }
.detail-head { display: flex; align-items: center; gap: 12px; margin: 14px 0 22px; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 1px; background: var(--border); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; margin-bottom: 28px; }
.field { background: var(--panel); padding: 12px 16px; display: flex; flex-direction: column; gap: 3px; }
.field .k { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); }
.field .v { font-size: 0.92rem; }
h2 { font-size: 1.1rem; font-weight: 600; margin: 24px 0 12px; }

/* Login */
.login-wrap { min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.login-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 32px; width: 340px; }
.login-card h1 { font-size: 1.2rem; margin-bottom: 4px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.login-card label { display: flex; flex-direction: column; gap: 5px; font-size: 0.8rem;
  color: var(--muted); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.login-card input { background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 10px 12px; border-radius: 6px; font-size: 0.95rem; font-family: var(--mono); }
.login-card input:focus { outline: none; border-color: var(--accent); }
.login-card button { background: var(--accent); color: #051016; border: none; padding: 11px;
  border-radius: 6px; font-weight: 700; cursor: pointer; font-size: 0.95rem; margin-top: 4px; }
.login-error { background: rgba(214,69,91,0.12); border: 1px solid var(--offline);
  padding: 8px 12px; border-radius: 6px; font-size: 0.85rem; margin-top: 12px; }

/* Enrollment */
.enroll-secret { display: flex; align-items: center; gap: 14px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; margin: 18px 0; }
.enroll-secret .k { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); }
.enroll-secret code { font-family: var(--mono); font-size: 1rem; color: var(--accent);
  background: var(--panel-2); padding: 6px 12px; border-radius: 5px; }
.empty { text-align: center; padding: 60px 20px; }
@media (max-width: 640px) {
  .fleet-table { font-size: 0.82rem; }
  .fleet-table td, .fleet-table th { padding: 9px 8px; }
}

/* ── v1.1.0 auth UI ── */
.role-tag { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--accent); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 10px; margin-left: 4px; }
.topnav .who { color: var(--text); display: inline-flex; align-items: center; }
.role-sel, #nu-type, #nu-role { background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); padding: 5px 8px; border-radius: 5px; font-family: var(--mono); font-size: 0.82rem; }
.add-user-card { background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 20px; margin-top: 24px; }
.add-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.add-row input { background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 7px 10px; border-radius: 5px; font-size: 0.88rem; }
.pw-form { display: flex; flex-direction: column; gap: 12px; max-width: 360px; margin-top: 14px; }
.pw-form label { display: flex; flex-direction: column; gap: 5px; font-size: 0.78rem;
  color: var(--muted); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.pw-form input { background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 9px 12px; border-radius: 6px; font-family: var(--mono); }
.pw-form button, .ad-form button { background: var(--accent); color: #051016; border: none;
  padding: 10px 18px; border-radius: 6px; font-weight: 700; cursor: pointer; align-self: flex-start; }
.ad-form { background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 22px; max-width: 720px; }
.ad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 14px; margin: 18px 0; }
.ad-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 0.74rem;
  color: var(--muted); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.05em; }
.ad-grid input, .ad-grid select { background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); padding: 8px 10px; border-radius: 5px; font-size: 0.88rem; }
.toggle-line { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; }

/* ── DFS-style cards (AD settings, Users) ── */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 0; margin-bottom: 20px; overflow: hidden; }
.card-header { display: flex; align-items: center; gap: 10px; padding: 14px 20px;
  font-family: var(--mono); font-size: 0.76rem; font-weight: 600; color: var(--muted);
  letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--border);
  background: var(--panel-2); }
.card-header .pill { margin-left: auto; }
.card-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.field-hint-block { color: var(--muted); font-size: 0.85rem; line-height: 1.5; margin: 0; }
.field-hint-block.small { font-size: 0.78rem; }
.field-hint-block code { font-family: var(--mono); color: var(--accent);
  background: var(--panel-2); padding: 1px 6px; border-radius: 4px; }
.field-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.field-group { display: flex; flex-direction: column; gap: 5px; }
.field-sublabel { display: block; font-size: 0.7rem; color: var(--muted); margin-bottom: 5px;
  font-weight: 600; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.field-input { background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 9px 12px; color: var(--text); font-family: var(--sans); font-size: 0.9rem;
  width: 100%; outline: none; transition: border-color 0.15s; }
.field-input:focus { border-color: var(--accent); }
select.field-input { font-family: var(--mono); font-size: 0.85rem; }

/* Toggle slider (matches DFS) */
.toggle-wrap { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.toggle-input { display: none; }
.toggle-slider { width: 42px; height: 23px; background: var(--border); border-radius: 12px;
  position: relative; transition: background 0.2s; flex-shrink: 0; }
.toggle-slider::after { content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px;
  border-radius: 50%; background: var(--muted); transition: transform 0.2s, background 0.2s; }
.toggle-input:checked + .toggle-slider { background: rgba(41,182,216,0.35); }
.toggle-input:checked + .toggle-slider::after { transform: translateX(19px); background: var(--accent); }
.toggle-label { font-size: 0.88rem; color: var(--text); }

/* Pills */
.pill { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 12px;
  font-size: 0.72rem; font-weight: 600; font-family: var(--mono); }
.pill-ok { background: rgba(46,158,91,0.14); color: var(--online); }
.pill-off { background: rgba(255,255,255,0.05); color: var(--muted); }

/* Buttons (DFS-style) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 18px; border-radius: 6px; font-family: var(--sans); font-size: 0.85rem;
  font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: filter 0.15s; }
.btn:hover { filter: brightness(1.1); }
.btn-sm { padding: 7px 14px; font-size: 0.8rem; }
.btn-primary { background: var(--accent); color: #051016; border-color: var(--accent); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border); }
.btn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.add-user-panel { background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 16px; }
.panel-title { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.ad-test-area { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
.test-result { font-family: var(--mono); font-size: 0.82rem; }
.test-result.ok { color: var(--online); }
.test-result.bad { color: var(--offline); }
.ad-card { max-width: 760px; }

/* Combined Users & AD page — AD form is comfortable narrow; the Users table
   needs more room for its per-row action buttons. Give AD a fixed share and
   let Users take the larger remainder. */
.settings-2col { display: grid; grid-template-columns: minmax(360px, 440px) 1fr;
  gap: 20px; align-items: start; }
.settings-col { min-width: 0; }
.settings-col .card { margin-bottom: 0; }
/* Inside the grid the AD card should fill its column, not cap at 760px. */
.settings-2col .ad-card { max-width: none; }
/* Action buttons wrap instead of clipping when a row is tight. */
.settings-2col .row-actions { flex-wrap: wrap; gap: 6px; }
/* Stack when there isn't enough width for both cards to be usable. */
@media (max-width: 1100px) { .settings-2col { grid-template-columns: 1fr; } }
/* The combined Users & AD page benefits from extra width for the table.
   Driven by a body class (reliable everywhere); :has() kept as a bonus. */
.page-admin-settings .content,
.content:has(.settings-2col) { max-width: 1500px; }

/* Fleet filter row */
.fleet-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 16px; padding: 12px 14px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px; }
.fleet-filters .filter-input { background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 7px 11px; color: var(--text); font-family: var(--sans);
  font-size: 0.85rem; outline: none; }
.fleet-filters .filter-input:focus { border-color: var(--accent); }
.fleet-filters #f-search { flex: 1 1 220px; min-width: 180px; }
.fleet-filters select.filter-input { font-family: var(--mono); font-size: 0.8rem; }
.filter-count { color: var(--muted); font-size: 0.8rem; font-family: var(--mono); margin-left: auto; }

/* Group tags + scope UI */
.group-tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.72rem;
  font-family: var(--mono); font-weight: 600; background: rgba(41,182,216,0.14); color: var(--accent); }
.group-tag.hint { background: rgba(255,255,255,0.05); color: var(--muted); }
.group-checklist { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; }
.grp-check { font-size: 0.85rem; color: var(--text); display: flex; align-items: center; gap: 7px; cursor: pointer; }
.grp-check input { margin: 0; }

/* Group column: code tag + name on two rows (like the Station column) */
.group-cell .group-name { font-size: 0.72rem; color: var(--muted); margin-top: 3px; }

/* Fleet page: widen so the filter row fits on one line */
.page-fleet .content { max-width: 1600px; }
.page-fleet .fleet-filters { flex-wrap: nowrap; }
.page-fleet .fleet-filters .filter-input { flex-shrink: 1; min-width: 0; }
@media (max-width: 1300px) {
  .page-fleet .fleet-filters { flex-wrap: wrap; }  /* wrap again only when truly narrow */
}

/* Modal + searchable picker (group assignment, user scope) */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000;
  display: flex; align-items: center; justify-content: center; }
.modal-box { background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 22px; width: min(440px, 92vw); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
.modal-title { font-size: 1.05rem; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.picker-list { margin-top: 10px; max-height: 280px; overflow-y: auto; display: flex;
  flex-direction: column; gap: 4px; border: 1px solid var(--border); border-radius: 6px; padding: 6px; }
.picker-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px 10px; background: transparent; border: none; border-radius: 5px; color: var(--text);
  font-family: var(--sans); font-size: 0.88rem; cursor: pointer; }
.picker-item:hover { background: var(--panel-2); }
.picker-empty { padding: 14px; color: var(--muted); font-size: 0.85rem; text-align: center; }

/* Insecure transport (HTTP testing mode) badge */
.insecure-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; margin: 0 14px;
  background: rgba(220, 53, 69, 0.16); color: #ff6b7a;
  border: 1px solid rgba(220, 53, 69, 0.4); border-radius: 6px;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Update upload panel */
.upload-panel { padding: 14px; margin-bottom: 16px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px; }
.upload-panel .panel-title { font-weight: 600; color: var(--text); margin-bottom: 6px; }
.upload-panel input[type=file] { font-size: 0.8rem; padding: 6px; }

/* Station type badge (DFS / MDR) — reported by the station, not admin-set */
.type-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.04em;vertical-align:middle;
  background:rgba(120,144,168,.16);color:#8fa6bd;border:1px solid rgba(120,144,168,.28)}
.type-tag.type-dfs{background:rgba(41,182,216,.13);color:#4fc3dd;border-color:rgba(41,182,216,.30)}
.type-tag.type-mdr{background:rgba(167,120,224,.14);color:#b98ce8;border-color:rgba(167,120,224,.32)}
.type-note{font-size:11px;color:var(--muted)}

/* Auto-update: orange pulsing "updating" dot + no-key flag */
.dot-updating { background: #ff9800; box-shadow: 0 0 7px #ff9800;
  animation: dot-upd-pulse 1.1s ease-in-out infinite; }
@keyframes dot-upd-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.78); } }
.nokey-flag { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 9px;
  font-size: 0.68rem; font-weight: 600; background: rgba(220,53,69,0.16); color: #ff6b7a;
  border: 1px solid rgba(220,53,69,0.4); }

/* App footer with version */
.app-footer { text-align: center; padding: 16px; margin-top: 24px;
  color: var(--text-dim); font-size: 0.74rem; border-top: 1px solid var(--border); }

/* Intentionally-stopped-reporting state (distinct from offline) */
.dot-not_reporting { background: #6b7a92; box-shadow: 0 0 6px rgba(107,122,146,.6); }

/* Full-width settings cards (Public Fleet, Transport): centered, readable width,
   so they align cleanly instead of hugging the left of the wide grid span. */
/* Public Fleet + Transport now stack in the LEFT column under the AD card,
   filling the gutter and balancing the two columns. Each is full width of its
   column, with spacing between the stacked cards. */
.settings-2col .settings-col-left { grid-column: 1; }
.settings-2col .settings-col-left .card { margin-top: 18px; }
.settings-2col .fullspan-card { width: 100%; max-width: none; margin: 0; }