/* Nothing of the dashboard shows until the login check is done: without a
   session the page goes to login.html. */
html.auth-pending body { visibility: hidden; }
:root {
  --navy: #1c1c1c; --navy2: #262626; --navy3: #333333;
  --green: #5eda9b; --green-d: #34b87a; --green-soft: rgba(94,218,155,.16);
  --blue: #2f9bd6;
  --bg: #f4f6f5; --panel: #ffffff; --panel2: #f6f8f7; --border: #e4e9e6;
  --text: #1c1c1c; --muted: #6b7671;
  --ok: #34b87a; --warn: #e0952a; --err: #d64545; --idle: #9aa5a0; --own: #8ccfb0;
  --shadow: 0 1px 3px rgba(28,28,28,.08), 0 1px 2px rgba(28,28,28,.06);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
/* ---- header ---- */
header {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 0 26px; height: 64px; background: var(--navy);
  box-shadow: 0 2px 10px rgba(11,31,42,.18); position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand .mark { display: block; flex: none; }
.brand .wordmark { height: 22px; width: auto; display: block; filter: brightness(0) invert(1); }
.brand .pipe { width: 1px; height: 24px; background: rgba(255,255,255,.22); }
.brand .product { font-size: 12px; color: var(--green); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.meta { display: flex; gap: 18px; align-items: center; color: #b7c6cf; font-size: 13px; }
.meta .sep { width: 1px; height: 26px; background: rgba(255,255,255,.12); }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.meta label { display: flex; align-items: center; gap: 6px; margin: 0; color: #b7c6cf; cursor: pointer; }
.meta input[type=checkbox] { width: auto; accent-color: var(--green); }
/* ---- layout ---- */
main { padding: 26px; margin: 0 auto; }
main { max-width: 1600px; }
/* ---- tabs: one view at a time instead of one long page ---- */
.tabs { display: flex; gap: 2px; margin: 0 0 18px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 10px 16px; color: var(--muted); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap;
          border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.tabs a:hover { color: var(--navy); }
.tabs a.active { color: var(--navy); border-bottom-color: var(--green); }
.tab-count { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--panel2); border: 1px solid var(--border); border-radius: 10px; padding: 0 7px; }
.tab-count:empty { display: none; }
.tab-badge { font-size: 11px; font-weight: 700; color: #fff; background: var(--err); border-radius: 10px; padding: 0 7px; }
.tab-badge.warn { background: var(--warn); }
.tab-panel { display: flex; flex-direction: column; gap: 20px; }
.tab-panel[hidden] { display: none; }
/* let cards shrink below their content so tables scroll inside them */
.tab-panel > * { min-width: 0; }
.scroll-x { overflow-x: auto; }
.small { font-size: 12px; }
/* a second, quieter line under a table value */
.sub { font-size: 11px; color: var(--muted); }
.table-head .small { white-space: nowrap; }
select.compact { width: auto; padding: 4px 8px; font-size: 12px; }
.legend-top { margin: -8px 0 10px; }
.col-timeline { width: 38%; }
/* ---- KPI tiles on the overview ---- */
.kpis { margin-bottom: 0; }
.kpis .stat { background: var(--panel); box-shadow: var(--shadow); border-left: 4px solid var(--border); }
.kpis .stat.ok { border-left-color: var(--ok); }
.kpis .stat.info { border-left-color: var(--blue); }
.kpis .stat.warn { border-left-color: var(--warn); }
.kpis .stat.err { border-left-color: var(--err); }
.kpis .stat.idle { border-left-color: var(--idle); }
.kpis .stat .val { font-size: 22px; }
.kpis .stat .sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; box-shadow: var(--shadow); }
.card h2 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--navy); }
.card .lead, .modal .lead { color: var(--muted); font-size: 12.5px; margin: 0 0 14px; }
/* ---- env badge + config bar ---- */
.env-badge { display:none; margin-left:10px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#fff; }
.env-badge.show { display:inline-block; }
.env-prod { background:#d64545; }
.env-preprod { background:#e0952a; }
.env-dev { background:#2f9bd6; }
.env-local { background:#6b7671; }
.cfgbar { display:flex; flex-wrap:wrap; gap:8px 20px; margin-bottom:16px; padding:10px 14px; background:var(--panel); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); font-size:12px; color:var(--muted); }
.cfgbar b { color:var(--navy); font-weight:600; }
.cfg-item code, .cfgbar code { color:var(--text); }
/* ---- map ---- */
#map { height: 460px; border-radius: 10px; border: 1px solid var(--border); z-index: 0; }
.leaflet-container { font: inherit; background: var(--panel2); }
.map-legend { display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:12px; color:var(--muted); }
.map-legend .k { display:inline-flex; align-items:center; gap:6px; }
.map-legend .swatch { width:12px; height:12px; border-radius:50%; display:inline-block; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15); }
.map-pin-label { font-weight:700; font-size:11px; }
/* compact base-layer toggle */
.basemap-toggle { display:flex; background:var(--panel); border:1px solid var(--border); border-radius:8px; overflow:hidden; box-shadow:var(--shadow); }
.basemap-toggle button { border:0; background:transparent; padding:6px 12px; font:inherit; font-size:12px; font-weight:600; color:var(--muted); cursor:pointer; line-height:1; }
.basemap-toggle button + button { border-left:1px solid var(--border); }
.basemap-toggle button:hover { background:var(--panel2); color:var(--navy); }
.basemap-toggle button.active { background:var(--green); color:#fff; }
/* ---- form ---- */
label { display:block; color: var(--navy); font-size: 12px; font-weight: 600; margin: 12px 0 5px; }
input {
  width: 100%; padding: 10px 11px; background: var(--panel2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: 14px; transition: border-color .15s, box-shadow .15s;
}
input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); background:#fff; }
select {
  width: 100%; padding: 10px 11px; background: var(--panel2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: 14px; transition: border-color .15s, box-shadow .15s;
}
select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); background:#fff; }
button {
  cursor: pointer; border: none; border-radius: 8px; padding: 10px 16px; font-size: 14px; font-weight: 700;
  color: var(--navy); background: var(--green); transition: background .15s, transform .05s;
}
button:hover { background: var(--green-d); color:#fff; }
button:active { transform: translateY(1px); }
button.secondary { background: transparent; border: 1px solid rgba(255,255,255,.22); color: #dbe6ec; font-weight:600; padding:7px 12px; }
button.secondary:hover { background: rgba(255,255,255,.08); color:#fff; }
button.danger { background: transparent; color: var(--err); border: 1px solid #eccaca; padding: 7px 12px; }
button.danger:hover { background: var(--err); color: #fff; border-color: var(--err); }
button:disabled { opacity: .55; cursor: not-allowed; }
.btn-full { width: 100%; margin-top: 18px; padding: 11px; }
button.ghost { background: transparent; color: var(--navy); border: 1px solid var(--border); padding: 7px 12px; font-weight: 600; flex: none; }
button.ghost:hover { background: var(--panel2); color: var(--navy); }
.table-head > button { flex: none; }
button.btn-link { background: transparent; color: var(--navy); border: 1px solid var(--border); padding: 2px 8px; font-size: 11px; font-weight: 600; margin-left: 6px; }
button.btn-link:hover { background: var(--panel2); color: var(--navy); }
/* ---- table ---- */
.table-head { display:flex; align-items:baseline; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.table-head h2 { flex: 1; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 9px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
tbody tr:hover { background: var(--panel2); }
tbody tr:last-child td { border-bottom: none; }
.badge { display:inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing:.02em; }
.st-STREAMING { background: var(--green-soft); color: var(--green-d); }
.st-DEGRADED, .st-NTRIP_RECONNECTING { background: rgba(224,149,42,.15); color: var(--warn); }
.st-ACTIVATING, .st-POSITION_ACQUIRED, .st-NTRIP_CONNECTING { background: rgba(47,155,214,.15); color: var(--blue); }
.st-STOPPED, .st-DEACTIVATING, .st-IDLE { background: rgba(138,154,165,.18); color: var(--idle); }
.st-served { background: var(--green-soft); color: var(--green-d); }
.st-held { background: rgba(138,154,165,.18); color: var(--idle); }
.st-own { background: rgba(140,207,176,.25); color: var(--green-d); }
.st-unavailable { background: rgba(214,69,69,.14); color: var(--err); }
.tl { position: relative; height: 14px; min-width: 160px; border-radius: 4px; overflow: hidden;
      background: repeating-linear-gradient(45deg, var(--panel2), var(--panel2) 4px, var(--border) 4px, var(--border) 5px); }
.tl > span { position: absolute; top: 0; bottom: 0; min-width: 1px; }
.tl-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.pct { font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.clickable { cursor: pointer; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.demand { margin: 4px 0 12px; padding: 8px 12px; border-radius: 8px; background: rgba(224,149,42,.12); font-size: 13px; }
.demand.crit { background: rgba(214,69,69,.12); }
.inv-company { border: 1px solid var(--line, #e3e8e6); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.inv-company h3 { margin: 0 0 6px; font-size: 14px; display:flex; gap:8px; align-items:center; }
.inv-sub { font-size: 12px; font-weight: 700; color: var(--muted); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .04em; }
#inventoryCard input, #inventoryCard select, #inventoryCard textarea { font-size: 12px; padding: 4px 6px; min-width: 0; }
#inventoryCard input[type=number] { width: 72px; }
#inventoryCard textarea { width: 100%; min-height: 34px; font-family: monospace; }
#inventoryCard td { padding: 4px 6px; vertical-align: middle; }
#inventoryCard .lic { white-space: nowrap; font-size: 12px; margin-right: 8px; display: inline-flex; align-items: center; gap: 3px; }
#inventoryCard input[type=checkbox] { width: auto; display: inline-block; margin: 0; }
#inventoryCard td input[type=text], #inventoryCard td input[type=password] { width: 100%; max-width: 170px; }
#inventoryCard td select { max-width: 190px; }
#inventoryCard button.small.secondary { color: var(--green-d); border-color: var(--green-d); margin-top: 6px; }
#inventoryCard button.small { padding: 4px 10px; font-size: 12px; }
.muted { color: var(--muted); }
.kv { font-variant-numeric: tabular-nums; }
code { background: var(--panel2); border:1px solid var(--border); padding: 1px 6px; border-radius: 5px; font-size: 12px; color: var(--navy); }
.empty { color: var(--muted); text-align: center; padding: 34px 0; }
/* ---- toast ---- */
.toast {
  position: fixed; bottom: 22px; right: 22px; background: var(--navy); color:#eaf1f4;
  border-left: 4px solid var(--green); padding: 13px 18px; border-radius: 10px; max-width: 380px;
  box-shadow: 0 8px 24px rgba(11,31,42,.28); opacity: 0; transform: translateY(10px); transition: all .25s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.err { border-left-color: var(--err); }
.toast.ok { border-left-color: var(--green); }
/* ---- detail modal ---- */
.modal-backdrop { position:fixed; inset:0; background:rgba(20,24,22,.55); display:none; align-items:flex-start; justify-content:center; z-index:1000; padding:40px 16px; overflow-y:auto; }
.modal-backdrop.show { display:flex; }
.modal.wide { max-width: 980px; }
.modal { background:var(--panel); border-radius:14px; box-shadow:0 12px 40px rgba(11,31,42,.3); width:100%; max-width:760px; }
#userBox { display:none; align-items:center; gap:10px; }
#userBox.show { display:flex; }
#userBox .offline { color:var(--warn); font-weight:600; }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--border); }
.modal-head h2 { margin:0; font-size:16px; color:var(--navy); }
.modal-close { background:transparent; color:var(--muted); font-size:22px; line-height:1; padding:2px 10px; border-radius:8px; font-weight:400; }
.modal-close:hover { background:var(--panel2); color:var(--navy); }
.modal-body { padding:18px 22px 24px; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:12px; margin-bottom:20px; }
.stat { background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
.stat .lbl { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:5px; }
.stat .val { font-size:17px; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; }
.stat .val small { font-size:11px; font-weight:600; color:var(--muted); }
.conf { display:inline-block; padding:2px 11px; border-radius:20px; font-size:13px; font-weight:800; letter-spacing:.03em; }
.conf-HIGH { background:var(--green-soft); color:var(--green-d); }
.conf-MEDIUM { background:rgba(47,155,214,.16); color:var(--blue); }
.conf-LOW { background:rgba(224,149,42,.16); color:var(--warn); }
.conf-UNTRUSTED { background:rgba(214,69,69,.14); color:var(--err); }
.spark-row { margin-bottom:16px; }
.spark-row .spark-lbl { display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:var(--muted); margin-bottom:5px; }
.spark-row .spark-lbl b { color:var(--navy); font-variant-numeric:tabular-nums; }
.spark { background:var(--panel2); border:1px solid var(--border); border-radius:8px; padding:4px 6px; }
.spark svg { display:block; width:100%; height:44px; }
.fixstrip { display:flex; height:16px; border-radius:5px; overflow:hidden; border:1px solid var(--border); }
.fixstrip > span { flex:1 1 0; min-width:0; }
.fixlegend { display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; font-size:11px; color:var(--muted); }
.fixlegend .k { display:inline-flex; align-items:center; gap:5px; }
.fixlegend .sw { width:11px; height:11px; border-radius:3px; display:inline-block; }
/* ---- member rows in the new-session form ---- */
/* ---- mobile ---- */
@media (max-width: 720px) {
  header { flex-wrap: wrap; height: auto; min-height: 56px; padding: 10px 14px; row-gap: 8px; }
  .brand { gap: 10px; }
  .brand .wordmark { height: 18px; }
  .brand .pipe { display: none; }
  .meta { width: 100%; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; }
  .meta .sep { display: none; }
  main { padding: 12px; }
  .tab-panel { gap: 14px; }
  .tabs a { padding: 9px 11px; font-size: 13px; }
  .card { padding: 14px 14px; }
  .cfgbar { gap: 6px 14px; padding: 8px 12px; }
  #map { height: 320px; }
  /* prevent iOS focus zoom */
  input, select { font-size: 16px; }
  th, td { padding: 8px 6px; font-size: 12px; }
  .modal-backdrop { padding: 12px 8px; }
  .modal-head { padding: 12px 14px; }
  .modal-body { padding: 14px 14px 18px; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}