/* ValleyNet — app styles.
   Colour, spacing and the page shell come from command-theme.css. Everything
   here is either layout this app genuinely owns, or a component the shared theme
   does not have. No colour is hard-coded: every value is a theme token, so all
   six themes work without a single per-theme override in this file. */

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--paper); color:var(--body-ink);
  font-family:var(--font); font-size:13.5px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

/* ── top bar ─────────────────────────────────────────────────────────── */
#topbar{
  height:var(--topbar-h); background:var(--bar); border-bottom:1px solid var(--bar-line);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--mlc-gutter); position:sticky; top:0; z-index:20;
}
@media (min-width:2200px){ #topbar{ padding:0 var(--mlc-gutter-qhd); } }
.tb-left,.tb-right{ display:flex; align-items:center; gap:12px; }
.tb-mark{
  width:24px; height:24px; border-radius:6px; display:grid; place-items:center;
  background:var(--accent); color:var(--bar); font:600 10px/1 var(--mono); letter-spacing:.04em;
}
.tb-title{ color:var(--ink); font-weight:600; letter-spacing:-.01em; }
.tb-sub{ color:var(--muted); font-size:11.5px; }
.tb-stamp{ color:var(--muted); font:400 11px/1 var(--mono); }
.tb-select{
  background:var(--pop); color:var(--ink); border:1px solid var(--pop-line);
  border-radius:7px; padding:5px 8px; font:inherit; font-size:12px;
}

/* ── tiles ───────────────────────────────────────────────────────────── */
.tile{
  background:var(--card); border:1px solid var(--card-line); border-radius:11px;
  padding:14px 16px; display:flex; flex-direction:column; gap:3px; min-height:82px;
}
.tile .k{ font:500 10.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--on-ink-30); }
.tile .v{ font-size:27px; font-weight:600; letter-spacing:-.02em; color:var(--on-ink-100); }
.tile .n{ font-size:11.5px; color:var(--on-ink-60); }
.tile.attn{ border-color:color-mix(in srgb,var(--warn) var(--tint-edge),var(--card));
            background:color-mix(in srgb,var(--warn) var(--tint-wash),var(--card)); }
.tile.attn .v{ color:var(--warn); }

/* ── AP cards ────────────────────────────────────────────────────────── */
.ap{
  background:var(--card); border:1px solid var(--card-line); border-radius:11px; padding:13px 15px;
  display:flex; flex-direction:column; gap:9px;
}
.ap-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.ap-name{ font-weight:600; color:var(--on-ink-100); }
.ap-model{ font:400 10.5px/1 var(--mono); color:var(--on-ink-30); }
.ap-count{ font-size:22px; font-weight:600; color:var(--on-ink-100); letter-spacing:-.02em; }
.ap-count small{ font-size:11.5px; font-weight:400; color:var(--on-ink-60); margin-left:4px; }
.bar{ height:5px; border-radius:3px; background:var(--rule-soft); overflow:hidden; display:flex; }
.bar i{ display:block; height:100%; }
.bar i.b24{ background:var(--orange); }
.bar i.b5 { background:var(--blue); }
.bar i.b6 { background:var(--violet); }
.ap-legend{ display:flex; gap:11px; font-size:11px; color:var(--on-ink-60); flex-wrap:wrap; }
.ap-legend b{ font-weight:600; color:var(--on-ink-80); }
.dot{ width:7px; height:7px; border-radius:2px; display:inline-block; margin-right:4px; }

/* ── section label tools ─────────────────────────────────────────────── */
.lbl-tools{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-left:4px; }
.inp{
  background:var(--card); border:1px solid var(--card-line); color:var(--body-ink);
  border-radius:7px; padding:5px 9px; font:inherit; font-size:12px; min-width:230px;
}
.inp:focus{ outline:2px solid var(--ring-a); outline-offset:1px; }
.chip{
  background:var(--card); border:1px solid var(--card-line); color:var(--on-ink-60);
  border-radius:999px; padding:4px 11px; font:inherit; font-size:11.5px; cursor:pointer;
  letter-spacing:0; text-transform:none;
}
.chip[aria-pressed="true"]{
  background:color-mix(in srgb,var(--accent) var(--tint-chip),var(--card));
  border-color:color-mix(in srgb,var(--accent) var(--tint-edge),var(--card));
  color:var(--accent-text); font-weight:600;
}

/* ── table ───────────────────────────────────────────────────────────── */
.tablewrap{
  background:var(--card); border:1px solid var(--card-line); border-radius:11px;
  overflow-x:auto;   /* wide content scrolls inside its own box, never the page */
}
.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.tbl th{
  text-align:left; font:500 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-ink-30); padding:11px 13px; border-bottom:1px solid var(--card-line);
  position:sticky; top:var(--topbar-h); background:var(--card); cursor:pointer; white-space:nowrap;
}
.tbl th.num{ text-align:right; }
.tbl td{ padding:9px 13px; border-bottom:1px solid var(--rule-soft); vertical-align:middle; }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl tbody tr:hover{ background:color-mix(in srgb,var(--accent) 6%,var(--card)); }
.tbl td.num{ text-align:right; font-family:var(--mono); font-size:12px; }
.mono{ font-family:var(--mono); font-size:11.5px; color:var(--on-ink-60); }

.dev{ display:flex; flex-direction:column; gap:1px; min-width:210px; }
.dev-n{ font-weight:600; color:var(--on-ink-100); }
.dev-s{ font-size:11px; color:var(--on-ink-30); font-family:var(--mono); }
.row-unid .dev-n{ color:var(--warn); }

.pill{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font:500 10.5px/1.5 var(--mono); letter-spacing:.04em; white-space:nowrap;
}
.pill.b24{ color:var(--orange); background:color-mix(in srgb,var(--orange) var(--tint-chip),var(--card)); }
.pill.b5 { color:var(--blue);   background:color-mix(in srgb,var(--blue)   var(--tint-chip),var(--card)); }
.pill.b6 { color:var(--violet); background:color-mix(in srgb,var(--violet) var(--tint-chip),var(--card)); }
.pill.wired{ color:var(--on-ink-60); background:var(--rule-soft); }
.pill.rnd{ color:var(--on-ink-60); background:var(--rule-soft); margin-left:6px; }

.sig{ display:inline-flex; align-items:center; gap:7px; justify-content:flex-end; }
.sig b{ font:600 12px/1 var(--mono); }
.sig.excellent b{ color:var(--ok); }  .sig.good b{ color:var(--ok); }
.sig.fair b{ color:var(--warn); }     .sig.poor b{ color:var(--bad); }
.sigbar{ width:34px; height:5px; border-radius:3px; background:var(--rule-soft); overflow:hidden; }
.sigbar i{ display:block; height:100%; background:currentColor; }
.sig.excellent .sigbar i,.sig.good .sigbar i{ background:var(--ok); }
.sig.fair .sigbar i{ background:var(--warn); }
.sig.poor .sigbar i{ background:var(--bad); }

.btn{
  background:var(--card); border:1px solid var(--card-line); color:var(--on-ink-80);
  border-radius:7px; padding:4px 11px; font:inherit; font-size:12px; cursor:pointer;
}
.btn:hover{ border-color:var(--accent); color:var(--accent-text); }
.btn.primary{ background:var(--accent); border-color:var(--accent-deep); color:var(--bar); font-weight:600; }

/* ── dialog ──────────────────────────────────────────────────────────── */
dialog#edit{
  border:1px solid var(--card-line); border-radius:13px; background:var(--card);
  color:var(--body-ink); padding:0; width:min(460px,92vw);
}
dialog#edit::backdrop{ background:rgba(0,0,0,.45); }
.edit-form{ padding:20px 22px; display:flex; flex-direction:column; gap:11px; }
.edit-form h2{ margin:0; font-size:16px; font-weight:600; }
.edit-meta{ margin:0; font:400 11.5px/1.5 var(--mono); color:var(--on-ink-30); }
.edit-form label{ display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--on-ink-60); }
.edit-form input,.edit-form textarea{
  background:var(--paper); border:1px solid var(--card-line); color:var(--body-ink);
  border-radius:7px; padding:7px 9px; font:inherit; font-size:13px;
}
.edit-form input:focus,.edit-form textarea:focus{ outline:2px solid var(--ring-a); outline-offset:1px; }
.edit-form menu{ display:flex; gap:8px; justify-content:flex-end; margin:6px 0 0; padding:0; }
.warn-inline{
  font-size:11.5px; color:var(--warn); padding:7px 9px; border-radius:7px;
  background:color-mix(in srgb,var(--warn) var(--tint-wash),var(--card));
  border:1px solid color-mix(in srgb,var(--warn) var(--tint-edge),var(--card));
}
.err{
  background:color-mix(in srgb,var(--bad) var(--tint-wash),var(--card));
  border:1px solid color-mix(in srgb,var(--bad) var(--tint-edge),var(--card));
  color:var(--bad); border-radius:9px; padding:11px 14px; margin:6px 0 0; font-size:12.5px;
}
.empty{ padding:26px; text-align:center; color:var(--on-ink-30); }

.tb-btn{
  background:var(--pop); color:var(--ink); border:1px solid var(--pop-line);
  border-radius:7px; padding:5px 10px; font-size:12px; text-decoration:none;
}
.tb-btn:hover{ border-color:var(--accent); color:var(--accent); }

/* ── stat cards are controls, not decoration ─────────────────────────────
   A card that shows a number you cannot act on just occupies space. Clicking
   one filters the table below; clicking the active one clears it, so it reads
   as a toggle rather than a one-way trip. */
.tile{
  font:inherit; text-align:left; cursor:pointer; width:100%;
  transition:border-color .12s, transform .12s;
}
.tile:hover{ border-color:var(--accent); transform:translateY(-1px); }
.tile:focus-visible{ outline:2px solid var(--ring-a); outline-offset:2px; }
.tile.on{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) var(--tint-wash),var(--card));
}
.tile.on .k{ color:var(--accent-text); }

.ap{ transition:border-color .12s; }
.ap.on{ border-color:var(--accent); }
.ap-hit{
  background:none; border:0; padding:0; margin:0; font:inherit; color:inherit;
  text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:9px; width:100%;
}
.ap-hit:focus-visible{ outline:2px solid var(--ring-a); outline-offset:3px; border-radius:6px; }
.ap-hit .ap-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.legbtn{
  background:none; border:1px solid transparent; border-radius:999px;
  padding:2px 8px; font:inherit; font-size:11px; color:var(--on-ink-60); cursor:pointer;
  display:inline-flex; align-items:center;
}
.legbtn:hover{ border-color:var(--card-line); color:var(--on-ink-80); }
.legbtn.on{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) var(--tint-chip),var(--card));
  color:var(--accent-text);
}
.legbtn b{ font-weight:600; color:var(--on-ink-80); margin-left:4px; }

/* ── what am I looking at ──────────────────────────────────────────────── */
.activebar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:12px 0 -6px; font-size:12px;
}
.afl{ color:var(--on-ink-30); font:500 10.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.atag{
  background:color-mix(in srgb,var(--accent) var(--tint-chip),var(--card));
  border:1px solid color-mix(in srgb,var(--accent) var(--tint-edge),var(--card));
  color:var(--accent-text); border-radius:999px; padding:3px 11px; font-weight:600;
}
.aclear{
  background:none; border:0; color:var(--on-ink-60); cursor:pointer;
  font:inherit; font-size:11.5px; text-decoration:underline; padding:3px 2px;
}
.aclear:hover{ color:var(--accent-text); }
.cnt{ font:400 11px/1 var(--mono); color:var(--on-ink-30); letter-spacing:0; text-transform:none; }