/* Strata FleetWatch — dark operations UI.
   Dark because this runs on an ops desk for long shifts, and because
   severity colour has to read instantly against a neutral background. */

:root {
  --bg:#0d1117; --panel:#151b23; --panel-2:#1b2430; --line:#26313d;
  --text:#e6edf3; --muted:#8b98a5; --dim:#5c6773;
  --accent:#3b82f6; --ok:#22c55e; --warn:#f59e0b; --danger:#ef4444;
  --crit:#dc2626;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
h1,h2,h3 { margin:0; font-weight:600; }
code { font-family:var(--mono); background:var(--panel-2); padding:1px 5px; border-radius:4px; }

/* [hidden] must win over any display rule below. Without this, `.modal
   { display:grid }` overrode the hidden attribute and the empty modal
   painted over the whole page — it covered Clerk's sign-in fields. */
[hidden] { display:none !important; }

.boot { display:grid; place-items:center; height:100vh; color:var(--muted); }

/* ── top bar ─────────────────────────────────────────────────────────── */
.topbar {
  display:flex; align-items:center; gap:28px;
  padding:12px 20px; background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:500;
}
.brand { display:flex; align-items:center; gap:12px; }
.brand h1 { font-size:16px; letter-spacing:-0.01em; }
.brand .sub { font-size:11px; color:var(--dim); }
.mark {
  width:26px; height:26px; border-radius:6px;
  background:linear-gradient(135deg,var(--accent),#8b5cf6);
}

.tabs { display:flex; gap:4px; margin-left:8px; }
.tab {
  background:none; border:none; color:var(--muted); cursor:pointer;
  padding:7px 14px; border-radius:7px; font-size:13px; font-weight:500;
}
.tab:hover { color:var(--text); background:var(--panel-2); }
.tab.active { color:var(--text); background:var(--panel-2); }
.badge {
  display:inline-block; min-width:18px; padding:1px 6px; margin-left:6px;
  background:var(--danger); color:#fff; border-radius:9px;
  font-size:11px; font-weight:700; text-align:center;
}

.status { margin-left:auto; display:flex; align-items:center; gap:10px; font-size:12px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--dim); }
.dot.ok { background:var(--ok); box-shadow:0 0 8px var(--ok); }
.dot.bad { background:var(--danger); box-shadow:0 0 8px var(--danger); }
.muted { color:var(--muted); }
.chip { background:var(--panel-2); padding:4px 10px; border-radius:14px; color:var(--muted); }
.mono { font-family:var(--mono); font-size:11px; font-variant-numeric:tabular-nums; }

/* Suspect data marker: amber dotted underline. Deliberately NOT red — this
   means "do not trust this number", not "the aircraft is in danger", and
   conflating the two is how operators learn to ignore real alerts. */
.dq { color:var(--warn); border-bottom:1px dotted var(--warn); cursor:help; }

/* Column legend under the fleet table. */
.legend { border-top:1px solid var(--line); margin-top:4px; padding:16px 18px 18px; }
.legend h3 { font-size:12px; text-transform:uppercase; letter-spacing:.05em;
             color:var(--muted); margin:0 0 10px; }
.legend dl { margin:0; display:grid; grid-template-columns:max-content 1fr;
             gap:7px 16px; align-items:baseline; }
.legend dt { font-weight:650; font-size:12px; white-space:nowrap; }
.legend dd { margin:0; font-size:12px; color:var(--muted); line-height:1.55; max-width:88ch; }
.legend dd strong { color:var(--text); font-weight:600; }
.legend .disclaimer { margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line);
                      font-size:11px; color:var(--muted); line-height:1.5; max-width:88ch; }

/* Ack / resolve explainer under the alert sidebar. */
.action-key { border-top:1px solid var(--line); padding:12px 14px 2px; }
.action-key p { margin:0 0 10px; font-size:11.5px; color:var(--muted); line-height:1.5; }
.action-key strong { color:var(--text); font-weight:650; }

/* Segmented freshness filter on the map panel. */
.segmented { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.seg {
  background:transparent; border:0; border-right:1px solid var(--line);
  color:var(--muted); font:inherit; font-size:12px; padding:4px 11px; cursor:pointer;
}
.seg:last-child { border-right:0; }
.seg:hover { background:var(--panel-2); color:var(--text); }
.seg.on { background:var(--accent); color:#04121f; font-weight:600; }

/* ── banners ─────────────────────────────────────────────────────────── */
.banner { padding:9px 20px; font-size:13px; border-bottom:1px solid var(--line); }
.banner.warn { background:rgba(245,158,11,.12); color:#fbbf24; }
.banner.danger { background:rgba(239,68,68,.12); color:#fca5a5; }

/* ── layout ──────────────────────────────────────────────────────────── */
.view { padding:18px 20px 60px; max-width:1600px; margin:0 auto; }
/* The overview is a live situational display, not a document — it fills the
   full window width. The 1600px cap stays on the other views, where long
   measure hurts readability of tables and forms. */
#view-overview { max-width:none; padding:14px 16px 16px; }

.stats { display:grid; grid-template-columns:repeat(7,1fr); gap:12px; margin-bottom:16px; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.stat .k { font-size:26px; font-weight:650; font-variant-numeric:tabular-nums; }
.stat .l { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.stat.warn .k { color:var(--warn); }
.stat.danger .k { color:var(--danger); }

/* Overview fills the viewport: header + stats are fixed cost, the map/alerts
   row absorbs whatever height is left. --chrome is header + stats + padding. */
.split { display:grid; grid-template-columns:1fr 420px; gap:14px; align-items:stretch; }
#view-overview .split {
  --chrome: 232px;
  height: calc(100vh - var(--chrome));
  min-height: 420px;
}
#view-overview .split > .panel { display:flex; flex-direction:column; min-height:0; }
@media (max-width:1200px){
  .split{grid-template-columns:1fr;} .stats{grid-template-columns:repeat(3,1fr);}
  /* Stacked: give each panel its own height instead of splitting one row. */
  #view-overview .split { height:auto; }
  #map { height:60vh; }
  #view-overview .scroll { max-height:50vh; }
}

.panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.panel-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--line);
}
/* With three children (title, filter, action) space-between strands the
   filter mid-header. Pin the title left and the action right; the filter
   sits beside the title. */
.panel-head h2 { font-size:14px; margin-right:auto; }
.toggle { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; cursor:pointer; }

/* Map flexes to fill its panel; the fixed 560px is only a fallback for
   browsers that ignore the flex sizing above. */
#map { flex:1 1 auto; min-height:320px; height:560px; background:#0b1622; }
#view-overview #map { height:auto; }
.scroll { max-height:560px; overflow-y:auto; }
#view-overview .scroll { flex:1 1 auto; max-height:none; min-height:0; }
/* Keep Leaflet's attribution legible on the dark basemap. */
.leaflet-control-attribution {
  background:rgba(13,17,23,.78) !important; color:var(--muted) !important;
  font-size:10px !important; padding:1px 6px !important;
}
.leaflet-control-attribution a { color:var(--muted) !important; }

/* ── alert cards ─────────────────────────────────────────────────────── */
.list { display:flex; flex-direction:column; }
.alert {
  padding:12px 16px; border-bottom:1px solid var(--line);
  border-left:3px solid var(--dim); display:flex; gap:12px; align-items:flex-start;
}
.alert:last-child { border-bottom:none; }
.alert.critical { border-left-color:var(--crit); background:rgba(220,38,38,.05); }
.alert.warning  { border-left-color:var(--warn); }
.alert.info     { border-left-color:var(--accent); }
.alert.resolved { opacity:.55; }
.alert .body { flex:1; min-width:0; }
.alert .msg { font-weight:600; font-size:13px; }
.alert .meta { font-size:11px; color:var(--muted); margin-top:3px; }
.alert .why { font-size:11px; color:var(--dim); margin-top:5px; font-family:var(--mono); }
.alert .actions { display:flex; gap:6px; flex-shrink:0; }

.sev-tag {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:2px 7px; border-radius:4px; align-self:flex-start;
}
.sev-tag.critical { background:var(--crit); color:#fff; }
.sev-tag.warning  { background:var(--warn); color:#0d1117; }
.sev-tag.info     { background:var(--accent); color:#fff; }

/* ── tables ──────────────────────────────────────────────────────────── */
.grid { width:100%; border-collapse:collapse; font-size:13px; }
.grid th {
  text-align:left; padding:9px 14px; font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--panel);
}
.grid td { padding:9px 14px; border-bottom:1px solid var(--line); }
.grid tr:last-child td { border-bottom:none; }
.grid tr:hover td { background:var(--panel-2); }
.grid .num { text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono); }
.tail { font-family:var(--mono); font-weight:600; }
.hex { font-family:var(--mono); color:var(--dim); font-size:12px; }

.pill { font-size:11px; padding:2px 8px; border-radius:10px; white-space:nowrap; }
.pill.air { background:rgba(34,197,94,.15); color:var(--ok); }
.pill.ground { background:var(--panel-2); color:var(--muted); }
.pill.stale { background:rgba(245,158,11,.15); color:var(--warn); }
.pill.dark { background:rgba(239,68,68,.15); color:var(--danger); }

/* ── buttons / forms ─────────────────────────────────────────────────── */
.btn {
  background:var(--panel-2); color:var(--text); border:1px solid var(--line);
  padding:6px 12px; border-radius:7px; font-size:12px; cursor:pointer; font-weight:500;
}
.btn:hover { border-color:var(--dim); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { background:#2563eb; }
.btn.ghost { background:none; border:none; color:var(--muted); }
.btn.danger { color:var(--danger); }
.btn:disabled { opacity:.5; cursor:not-allowed; }

label.field { display:block; margin-bottom:12px; }
label.field span { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
/* Scoped to our own forms. An unscoped `input {...}` rule leaked into
   Clerk's mounted components and made its fields dark-on-dark. */
#app input[type=text], #app input[type=number], #app select, #app textarea,
.modal input[type=text], .modal input[type=number], .modal select, .modal textarea {
  width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text);
  padding:8px 10px; border-radius:7px; font-size:13px; font-family:inherit;
}
.modal textarea, #app textarea { font-family:var(--mono); font-size:12px; resize:vertical; min-height:110px; }
#app input:focus, #app select:focus, #app textarea:focus,
.modal input:focus, .modal select:focus, .modal textarea:focus {
  outline:none; border-color:var(--accent);
}
.row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ── modal / toast ───────────────────────────────────────────────────── */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.65); display:grid; place-items:center; z-index:2000; }
.modal-card { background:var(--panel); border:1px solid var(--line); border-radius:12px; width:min(560px,92vw); max-height:88vh; overflow:auto; }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line); }
.modal-card > div:last-child { padding:18px; }

.toast {
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  padding:11px 18px; border-radius:9px; z-index:3000; font-size:13px;
  box-shadow:0 8px 28px rgba(0,0,0,.5);
}
.toast.err { border-color:var(--danger); color:#fca5a5; }

.disclaimer {
  max-width:1600px; margin:0 auto; padding:14px 20px 26px;
  font-size:11px; color:var(--dim); line-height:1.6;
}
.empty { padding:32px; text-align:center; color:var(--dim); font-size:13px; }

/* Leaflet dark trim */
.leaflet-container { background:#0b1622; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background:var(--panel-2); color:var(--text); border-radius:8px;
}
.leaflet-popup-content { margin:10px 12px; font-size:12px; }
.leaflet-bar a { background:var(--panel-2); color:var(--text); border-color:var(--line); }