/* ============================================================
   DishSentinel — app.css
   Component styles ported verbatim from the approved mockup
   (scratchpad/mockup.html). Design tokens live in tokens.css;
   this file only styles components THROUGH those tokens.
   ============================================================ */

/* The OTS logo mask needs a URI to draw; tokens.css supplies --logo-fill
   (theme-aware) but leaves the source to the page. Point it at the static PNG. */
:root{ --logo-uri:url("/static/img/logo.png"); }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
button{font-family:inherit}

/* eyebrow micro-label */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); margin:0;
}
.eyebrow.accent{color:var(--accent)}
.mono{font-family:var(--mono)}
.nums{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.app{ display:grid; grid-template-columns:250px 1fr; min-height:100vh; }
.sidebar{
  background:var(--elev); border-right:1px solid var(--border);
  display:flex; flex-direction:column; gap:6px; padding:18px 14px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 16px; }
.brand .mark{
  width:30px;height:30px;border-radius:8px;flex:0 0 auto;
  background:radial-gradient(circle at 50% 42%, var(--accent) 0 3px, transparent 4px),
             var(--accent-ghost);
  border:1px solid var(--accent); position:relative; overflow:hidden;
}
.brand .mark::before,.brand .mark::after{
  content:""; position:absolute; inset:4px; border:1px solid var(--accent);
  border-radius:50%; opacity:.55;
}
.brand .mark::after{ inset:8px; transform:scaleY(.5) rotate(28deg); opacity:.4; }
.brand .wm{ font-family:var(--mono); font-weight:700; letter-spacing:.02em; font-size:15px; }
.brand .wm b{color:var(--accent)}
.brand .sub{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--faint); text-transform:uppercase; }

/* theme-aware OTS brand mark — single-color-on-transparent PNG driven as a mask */
.logo{
  -webkit-mask:var(--logo-uri) left center/contain no-repeat;
          mask:var(--logo-uri) left center/contain no-repeat;
  background:var(--logo-fill); display:block;
}
.brand-ots-wrap{ padding:4px 10px 0; }
.brand-ots{ width:92px; height:26px; }
.brand-divider{ height:1px; background:var(--border); margin:12px 10px 4px; }

.nav-group{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding:14px 10px 6px;}
.nav-item{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:9px 10px; border-radius:var(--radius-sm); border:1px solid transparent;
  background:transparent; color:var(--dim); cursor:pointer; text-align:left;
  font-family:var(--mono); font-size:13px; text-decoration:none;
}
.nav-item svg{width:16px;height:16px;flex:0 0 auto;opacity:.85}
.nav-item:hover{ background:var(--surface-2); color:var(--text); }
.nav-item[aria-current="true"]{ background:var(--accent-ghost); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 30%,transparent); }
.nav-item .badge{ margin-left:auto; font-size:11px; padding:1px 7px; border-radius:20px; background:var(--down-bg); color:var(--down); }
.sidebar .spacer{flex:1}
.side-foot{ border-top:1px solid var(--border); padding-top:12px; margin-top:8px; font-family:var(--mono); font-size:11px; color:var(--faint); }
.side-foot .row{display:flex;align-items:center;gap:8px;padding:3px 8px}

/* ---------- main ---------- */
.main{ min-width:0; display:flex; flex-direction:column; }
.topbar{
  position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:16px; padding:14px 24px;
}
.topbar h1{ font-family:var(--mono); font-size:16px; margin:0; font-weight:600; }
.topbar .crumbs{font-family:var(--mono);font-size:12px;color:var(--faint)}
.topbar .grow{flex:1}
.sync{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; color:var(--dim); }
.sync .dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px var(--good-bg)}
.icon-btn{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--border);
  background:var(--surface); color:var(--dim); cursor:pointer; display:grid; place-items:center;
}
.icon-btn:hover{color:var(--text);border-color:var(--border-strong)}
.icon-btn svg{width:16px;height:16px}

.view{ padding:22px 24px 60px; display:none; }
.view.active{ display:block; }

/* fleet summary chips in topbar */
.fleetchips{display:flex;gap:8px;flex-wrap:wrap}
.fchip{font-family:var(--mono);font-size:12px;display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;border:1px solid var(--border);background:var(--surface)}
.fchip .dot{width:8px;height:8px;border-radius:50%}

/* ---------- primitives ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.card-h{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); }
.card-h h2{ font-family:var(--mono); font-size:13px; margin:0; font-weight:600; }
.card-h .grow{flex:1}
.card-b{ padding:16px; }

.pill{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11.5px; padding:3px 10px; border-radius:20px; border:1px solid transparent; white-space:nowrap; }
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.good{color:var(--good);background:var(--good-bg)}
.pill.warn{color:var(--warn);background:var(--warn-bg)}
.pill.down{color:var(--down);background:var(--down-bg)}
.pill.info{color:var(--info);background:var(--info-bg)}
.pill.mute{color:var(--dim);background:var(--surface-2);border-color:var(--border)}

.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot.good{background:var(--good)} .dot.warn{background:var(--warn)} .dot.down{background:var(--down)} .dot.info{background:var(--info)} .dot.mute{background:var(--faint)}

.btn{ font-family:var(--mono); font-size:13px; padding:8px 14px; border-radius:var(--radius-sm); border:1px solid var(--border); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; white-space:nowrap; line-height:1.2; }
.btn svg{width:15px;height:15px}
.btn-primary{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{ background:transparent; color:var(--dim); }
.btn-ghost:hover{ background:var(--surface-2); color:var(--text); }
.btn-secondary{ background:var(--surface); color:var(--text); }
.btn-secondary:hover{border-color:var(--border-strong)}
.btn-danger{ background:var(--down); color:#fff; border-color:var(--down); }
.btn-danger:hover{ filter:brightness(1.12); }
.btn-good{ background:var(--good); color:#04160c; border-color:var(--good); }
.btn-good:hover{ filter:brightness(1.1); }
.btn-sm{padding:5px 10px;font-size:12px}

/* tiles */
.tiles{ display:grid; gap:14px; grid-template-columns:repeat(4,1fr); }
.tile{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 15px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px; min-width:0; }
.tile .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); }
.tile .v{ font-family:var(--mono); font-size:26px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.05; }
.tile .v small{font-size:13px;color:var(--dim);font-weight:400;margin-left:3px}
.tile .m{ font-size:11.5px; color:var(--dim); font-family:var(--mono); display:flex; align-items:center; gap:6px; }
.tile canvas{width:100%;height:34px;display:block}

/* two-col overview */
.overview-grid{ display:grid; grid-template-columns:1.55fr 1fr; gap:14px; margin-top:16px; align-items:start; }

/* globe */
.globe-wrap{ position:relative; }
#globe{ width:100%; height:66vh; min-height:480px; display:block; border-radius:var(--radius); overflow:hidden; position:relative; }
.globe-legend{ position:absolute; left:14px; bottom:12px; display:flex; gap:14px; font-family:var(--mono); font-size:11px; color:var(--dim); background:color-mix(in srgb,var(--surface) 70%,transparent); padding:6px 10px; border-radius:20px; border:1px solid var(--border); backdrop-filter:blur(4px); }
.globe-legend span{display:flex;align-items:center;gap:6px}
.globe-badge{ position:absolute; left:16px; top:14px; font-family:var(--mono); font-size:11px; color:var(--dim); background:color-mix(in srgb,var(--surface) 72%,transparent); padding:5px 10px; border-radius:20px; border:1px solid var(--border); backdrop-filter:blur(4px); z-index:4; }
#globe{cursor:default}
.locator{ position:absolute; left:16px; top:40px; width:auto; min-width:230px; max-width:288px; background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(8px); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:13px 14px; display:flex; flex-direction:column; gap:5px; z-index:6; }
.locator .loc-head{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; }
.locator .loc-head .dot{width:9px;height:9px}
.locator .loc-site{ font-size:11.5px; color:var(--faint); }
.locator .loc-id{ font-size:11px; color:var(--info); }
.locator .loc-stats{ font-size:12px; color:var(--dim); margin-top:2px; }
.locator .loc-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }

/* MapLibre globe: health-colored dish markers + base-layer (Google/Bing) toggle */
.ds-marker{ width:14px; height:14px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 2px rgba(0,0,0,.45); cursor:pointer; transition:transform .12s ease; }
.ds-marker:hover{ transform:scale(1.25); }
.ds-marker.sel{ width:18px; height:18px; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 60%,transparent), 0 0 0 5px rgba(0,0,0,.4); }
/* Google/Bing base-layer toggle — a compact on-theme segmented pill. Selectors are
   qualified with .maplibregl-ctrl-group to outrank MapLibre's default button/group
   styling (equal specificity + its stylesheet loads after ours would otherwise win,
   leaving a white 29px button). */
.maplibregl-ctrl-group.ds-layers{
  display:flex; width:auto; overflow:hidden;
  background:color-mix(in srgb,var(--surface) 86%,transparent);
  border:1px solid var(--border); border-radius:20px;
  box-shadow:var(--shadow); backdrop-filter:blur(6px);
}
.maplibregl-ctrl-group.ds-layers button{
  display:block; width:auto; min-width:0; height:auto; margin:0;
  padding:6px 15px; border:none; border-radius:0; background:transparent;
  color:var(--dim); font-family:var(--mono); font-size:11.5px; line-height:1.3;
  white-space:nowrap; cursor:pointer;
}
.maplibregl-ctrl-group.ds-layers button + button{ border-left:1px solid var(--border); }
.maplibregl-ctrl-group.ds-layers button.active{ background:var(--accent); color:var(--on-accent); }
.maplibregl-ctrl-group.ds-layers button:hover:not(.active){ background:var(--surface-2); color:var(--text); }

/* fleet list */
.fleet-list{ display:flex; flex-direction:column; }
.fleet-row{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:11px 14px; border-bottom:1px solid var(--line); cursor:pointer; }
.fleet-row:last-child{border-bottom:none}
.fleet-row:hover{ background:var(--surface-2); }
.fleet-row.offline{ opacity:.5; }
.fleet-row .name{ font-family:var(--mono); font-size:13px; }
.fleet-row .name .off-tag{ color:var(--faint); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; margin-left:6px; }
.fleet-row .loc{ font-size:11.5px; color:var(--faint); font-family:var(--mono); }
.fleet-row .metric{ font-family:var(--mono); font-size:12px; text-align:right; color:var(--dim); font-variant-numeric:tabular-nums; }
.fleet-row .metric b{color:var(--text);font-weight:600}
.fleet-row canvas{width:70px;height:26px;display:block}

/* table */
.table-scroll{ overflow-x:auto; }
table.grid{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12.5px; }
table.grid th{ text-align:left; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:500; padding:10px 14px; border-bottom:1px solid var(--border); white-space:nowrap; }
table.grid td{ padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.grid tr:hover td{ background:var(--surface-2); }
table.grid .num{text-align:right;font-variant-numeric:tabular-nums}

/* dish detail */
.detail-grid{ display:grid; grid-template-columns:300px 1fr; gap:14px; align-items:start; }
.health-card{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 16px; text-align:center; }
#healthRing{width:170px;height:170px}
.health-state{ font-family:var(--mono); font-size:20px; font-weight:700; }
.detail-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.kv{ display:grid; grid-template-columns:1fr auto; gap:8px 12px; font-family:var(--mono); font-size:12.5px; }
.kv .kk{color:var(--faint)}
.kv .vv{text-align:right;font-variant-numeric:tabular-nums}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
#dome{width:100%;max-width:320px;height:320px;display:block;margin:0 auto}
.dome-legend{display:flex;gap:14px;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:8px;flex-wrap:wrap}
.dome-legend span{display:flex;align-items:center;gap:6px}
.sq{width:9px;height:9px;border-radius:2px;display:inline-block}

/* console */
.console{ background:var(--bg-grain); border:1px solid var(--border); border-radius:var(--radius); font-family:var(--mono); font-size:13px; overflow:hidden; }
.console .bar{ display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--border); background:var(--surface); }
.console .body{ padding:8px 10px; height:60vh; min-height:420px; overflow:hidden; }
.console .body .xterm{ height:100%; }
.console .body .xterm-viewport{ overflow-y:auto; }
.console .body .c-dim{color:var(--dim)}
.console .body .c-accent{color:var(--accent)}
.console .body .c-good{color:var(--good)}
.console .body .c-warn{color:var(--warn)}
.console .body .prompt{color:var(--accent)}
.cursor{display:inline-block;width:8px;height:15px;background:var(--accent);vertical-align:-2px;animation:blink 1.1s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* segmented control (Terminal / Dish Web UI) */
.seg{ display:inline-flex; gap:2px; padding:3px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; margin-bottom:14px; }
.seg-btn{ font-family:var(--mono); font-size:12.5px; padding:6px 15px; border-radius:7px; border:none; background:transparent; color:var(--dim); cursor:pointer; }
.seg-btn.active{ background:var(--surface); color:var(--text); box-shadow:var(--shadow); }

/* embedded dish web UI, tunneled through the agent */
.webframe{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.wf-bar{ display:flex; align-items:center; gap:12px; padding:9px 14px; background:var(--surface); border-bottom:1px solid var(--border); }
.wf-dots{ display:inline-flex; gap:6px; } .wf-dots i{ width:10px;height:10px;border-radius:50%;background:var(--border-strong);display:inline-block; }
.wf-url{ font-family:var(--mono); font-size:11.5px; color:var(--dim); background:var(--surface-2); padding:5px 10px; border-radius:7px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wf-body{ background:#0b0f14; color:#e6edf5; padding:26px 28px; min-height:412px; font-family:var(--sans); }
.sl-top{ display:flex; align-items:center; gap:14px; border-bottom:1px solid #1c2733; padding-bottom:16px; }
.sl-wm{ font-family:var(--mono); font-weight:700; letter-spacing:.28em; font-size:15px; color:#fff; }
.sl-tag{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#5c6b7a; }
.sl-status{ display:flex; align-items:baseline; gap:14px; margin:22px 0 2px; }
.sl-status .big{ font-size:30px; font-weight:600; }
.sl-off{ color:#ff8f6b; } .sl-on{ color:#57d08b; }
.sl-sub{ color:#8695a6; font-size:13px; }
.sl-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:22px; }
.sl-card{ background:#111823; border:1px solid #1c2733; border-radius:10px; padding:13px 14px; }
.sl-card .k{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#5c6b7a; }
.sl-card .v{ font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:5px; }
.sl-note{ margin-top:20px; background:rgba(255,143,107,.1); border:1px solid rgba(255,143,107,.3); color:#ffb59a; border-radius:8px; padding:11px 14px; font-size:12.5px; }
.sl-bar{ margin-top:18px; font-family:var(--mono); font-size:11px; color:#5c6b7a; display:flex; gap:18px; flex-wrap:wrap; }

/* rename affordance */
.rename-btn{ background:none; border:1px solid var(--border); color:var(--dim); width:28px; height:28px; border-radius:8px; cursor:pointer; font-size:13px; line-height:1; }
.rename-btn:hover{ color:var(--accent); border-color:var(--accent); }
.rename-input{ font-size:18px !important; font-weight:600; max-width:340px; width:auto; padding:5px 10px !important; }
@media (max-width:760px){ .sl-cards{grid-template-columns:repeat(2,1fr)} }

/* timeline */
.tl-legend{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.tl-legend span{display:flex;align-items:center;gap:6px}
.bar-key{width:16px;height:9px;border-radius:2px;display:inline-block}
#timeline{width:100%;height:360px;display:block}
.tl-controls{display:flex;align-items:center;gap:12px}
.scrub{flex:1;height:5px;border-radius:5px;background:var(--surface-2);position:relative;cursor:pointer}
.scrub .fill{position:absolute;left:0;top:0;bottom:0;width:62%;background:var(--accent);border-radius:5px}
.scrub .head{position:absolute;top:50%;left:62%;transform:translate(-50%,-50%);width:13px;height:13px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);box-shadow:var(--shadow)}

/* updates + settings */
.progress{height:8px;border-radius:8px;background:var(--surface-2);overflow:hidden;min-width:90px}
.progress i{display:block;height:100%;background:var(--good);border-radius:8px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.input{ font-family:var(--mono); font-size:13px; padding:9px 11px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2); color:var(--text); width:100%; }
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ghost)}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.callout{ border:1px dashed var(--border-strong); border-radius:var(--radius); padding:13px 15px; font-size:12.5px; color:var(--dim); display:flex; gap:11px; }
.callout .nd{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:5px;flex:0 0 auto}

.section-head{display:flex;align-items:baseline;gap:12px;margin:0 0 4px}
.section-head h2{font-family:var(--mono);font-size:15px;margin:0;font-weight:600}
.lede{color:var(--dim);font-size:13px;margin:2px 0 18px;max-width:64ch}
.back{font-family:var(--mono);font-size:12px;color:var(--dim);background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:0;margin-bottom:12px}
.back:hover{color:var(--accent)}

.stack{display:flex;flex-direction:column;gap:14px}

@media (max-width:1080px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .overview-grid{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
  .detail-tiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;overflow-x:auto}
  .sidebar .spacer,.side-foot{display:none}
  .nav-group{display:none}
  .brand{padding:6px 8px}
  .view{padding:16px 14px 50px}
  .form-2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ .cursor{animation:none} }

/* ---- DishSentinel additions (not in the mockup) ---- */
[x-cloak]{ display:none !important; }
.selwrap{ position:relative; display:inline-flex; }
.selwrap select{ appearance:none; -webkit-appearance:none; padding-right:30px; cursor:pointer; }
.selwrap::after{ content:"▾"; position:absolute; right:11px; top:50%; transform:translateY(-50%); color:var(--faint); pointer-events:none; font-size:11px; }