/* ─────────────────────────────────────────────────────────────
   main.css — PacketTrends v2 design system (app-wide).
   Light is the default scheme; dark overrides via
   prefers-color-scheme. Pages reference ONLY var(--v2-*) tokens
   (or the shared component classes below) — no hardcoded colors
   in template <style> blocks.

   Legacy aliases (--bg-deep, --accent-cyan, …) are kept at the
   bottom of the token block so not-yet-migrated pages and
   auth.css continue to render during the rollout.
   ───────────────────────────────────────────────────────────── */

/* ── Design tokens ───────────────────────────────────────────────
   Every pair is light-dark(light, dark). Which side applies is
   driven by color-scheme: "light dark" follows the OS; the
   html[data-theme] override (set by /static/js/theme.js from
   localStorage 'pt-theme') forces one scheme app-wide. */
:root {
  color-scheme: light dark;

  /* surfaces */
  --v2-bg:            light-dark(#eef2f8, #070b14);
  --v2-surface:       light-dark(#ffffff, #0e1422);
  --v2-surface-2:     light-dark(#f5f8fc, #131b2c);   /* hover rows, wells, inputs */
  --v2-surface-3:     light-dark(#e9eef6, #1a2436);   /* deeper wells */
  --v2-border:        light-dark(rgba(13, 27, 42, 0.10), rgba(232, 238, 247, 0.09));
  --v2-border-strong: light-dark(rgba(13, 27, 42, 0.18), rgba(232, 238, 247, 0.17));
  --v2-shadow:        0 12px 32px -18px light-dark(rgba(13, 27, 42, 0.35), rgba(0, 0, 0, 0.85));

  /* ink */
  --v2-text:          light-dark(#0d1b2a, #e8eef7);
  --v2-text-dim:      light-dark(#5a6b80, #8b9bb0);
  --v2-text-faint:    light-dark(#8595a8, #5f7088);

  /* brand / interactive */
  --v2-accent:        light-dark(#0561c4, #00d4ff);
  --v2-accent-2:      light-dark(#0891b2, #38bdf8);
  --v2-accent-tint:   light-dark(rgba(5, 97, 196, 0.08), rgba(0, 212, 255, 0.09));
  --v2-accent-contrast: light-dark(#ffffff, #04121c);
  --v2-btn-grad:      linear-gradient(135deg,
                        light-dark(#1d6ae5, #0ea5e9) 0%,
                        light-dark(#0891b2, #00d4ff) 100%);
  --v2-focus-ring:    light-dark(rgba(8, 145, 178, 0.45), rgba(0, 212, 255, 0.45));

  /* status — text/border-grade colors (readable on surface) */
  --v2-ok:            light-dark(#0f8a4d, #2fd584);
  --v2-warn:          light-dark(#b07d10, #f3cb4a);
  --v2-degrade:       light-dark(#c2570e, #f5945c);
  --v2-danger:        light-dark(#c4203e, #fb6e84);
  --v2-info:          light-dark(#2563eb, #62a4fa);
  /* status — tinted backgrounds for badges / notices */
  --v2-ok-tint:       light-dark(rgba(16, 162, 93, 0.10), rgba(47, 213, 132, 0.12));
  --v2-warn-tint:     light-dark(rgba(217, 158, 27, 0.13), rgba(243, 203, 74, 0.12));
  --v2-degrade-tint:  light-dark(rgba(216, 98, 19, 0.11), rgba(245, 148, 92, 0.12));
  --v2-danger-tint:   light-dark(rgba(196, 32, 62, 0.09), rgba(251, 110, 132, 0.12));
  --v2-info-tint:     light-dark(rgba(37, 99, 235, 0.09), rgba(98, 164, 250, 0.12));

  /* heat squares — saturated fills, shared by dashboard + timelines.
     Same hue language in both schemes (legend stays truthful). */
  --v2-sq-normal:     light-dark(#22b86b, #27c473);
  --v2-sq-yellow:     light-dark(#eec331, #f0c93c);
  --v2-sq-orange:     light-dark(#ec7c23, #ef813a);
  --v2-sq-down:       light-dark(#e6455c, #ef5068);
  --v2-sq-nodata:     light-dark(#b3bdcc, #46546b);
  --v2-sq-nobaseline: light-dark(#4d9fdc, #3f8ecb);

  /* typography */
  --v2-font-ui:       'Inter', system-ui, -apple-system, sans-serif;
  --v2-font-mono:     'JetBrains Mono', ui-monospace, monospace;

  /* legacy aliases — keep old names alive while pages migrate */
  --bg-deep:        var(--v2-bg);
  --bg-card:        var(--v2-surface);
  --bg-panel:       var(--v2-surface-2);
  --border:         var(--v2-border);
  --text-primary:   var(--v2-text);
  --text-secondary: var(--v2-text-dim);
  --text-muted:     var(--v2-text-faint);
  --accent-cyan:    var(--v2-accent);
  --accent-green:   var(--v2-ok);
  --font-display:   var(--v2-font-ui);
  --font-mono:      var(--v2-font-mono);
}

/* User preference (Account → Appearance). No attribute = follow the OS. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ── Reset / base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family:      var(--v2-font-ui);
  background:       var(--v2-bg);
  color:            var(--v2-text);
  -webkit-font-smoothing: antialiased;
}

.content { padding: 2rem; color: var(--v2-text-dim); }

/* Page heading row: <div class="page-head"><h1>…</h1><span class="page-sub">…</span></div> */
.page-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.page-head h1 {
  margin: 0;
  font-family: var(--v2-font-ui);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--v2-text);
}
.page-sub { color: var(--v2-text-faint); font-size: 0.9rem; }

/* ── Top navigation (markup in _nav.html) ────────────────────── */
.navbar {
  background: var(--v2-surface);
  padding: 0.8rem 1.25rem;
  border-bottom: 1px solid var(--v2-border);
  font-family: var(--v2-font-ui);
  font-size: 0.9rem;
}
.navbar ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.navbar li { margin-right: 1.75rem; position: relative; }
.navbar a {
  color: var(--v2-text-dim);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}
.navbar a:hover { color: var(--v2-accent); }
.navbar .nav-caret { font-size: 0.7rem; }
.navbar .has-sub > .nav-sub {
  display: none; position: absolute; top: 100%; left: 0;
  /* No margin gap — a gap creates a hover dead-zone that closes the menu.
     Offset visually with transparent padding so hover stays contiguous. */
  padding-top: 0.5rem; min-width: 190px; z-index: 60;
}
.navbar .has-sub:hover > .nav-sub,
.navbar .has-sub.open > .nav-sub { display: block; }
.navbar .nav-sub-inner {
  display: block;            /* not the navbar's flex — items stack */
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  padding: 0.4rem 0;
  box-shadow: var(--v2-shadow);
  list-style: none; margin: 0;
}
.navbar .nav-sub li { margin: 0; display: block; }
.navbar .nav-sub a { display: block; padding: 0.5rem 1rem; white-space: nowrap; }
.navbar .nav-sub a:hover { background: var(--v2-accent-tint); color: var(--v2-accent); }
.navbar .nav-sub-divider { border-top: 1px solid var(--v2-border); margin: 0.3rem 0.6rem; pointer-events: none; }
.navbar .nav-user { color: var(--v2-text-faint); font-size: 0.82rem; margin-right: 1.5rem; }

/* Brand mark at the left end of the navbar */
.navbar .nav-brand {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--v2-font-mono);
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.04em;
  color: var(--v2-text);
}
.navbar .nav-brand:hover { color: var(--v2-text); }
.navbar .nav-brand em { font-style: normal; color: var(--v2-accent); }
.navbar .nav-brand svg { width: 22px; height: 22px; color: var(--v2-accent); }

/* ── Cards / notices ─────────────────────────────────────────── */
.v2-card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  box-shadow: var(--v2-shadow);
}

.v2-notice {
  border-radius: 10px;
  border: 1px solid var(--v2-border);
  background: var(--v2-surface);
  padding: 0.7rem 1rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--v2-text);
}
.v2-notice-info    { background: var(--v2-info-tint);    border-color: var(--v2-info);    color: var(--v2-info); }
.v2-notice-ok      { background: var(--v2-ok-tint);      border-color: var(--v2-ok);      color: var(--v2-ok); }
.v2-notice-warn    { background: var(--v2-warn-tint);    border-color: var(--v2-warn);    color: var(--v2-warn); }
.v2-notice-danger  { background: var(--v2-danger-tint);  border-color: var(--v2-danger);  color: var(--v2-danger); }

/* ── Buttons ─────────────────────────────────────────────────── */
.v2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--v2-font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease,
              color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}
.v2-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.v2-btn:focus-visible { outline: 2px solid var(--v2-focus-ring); outline-offset: 2px; }

.v2-btn-primary {
  background: var(--v2-btn-grad);
  color: var(--v2-accent-contrast);
  box-shadow: 0 8px 20px -12px var(--v2-focus-ring);
}
.v2-btn-primary:hover:not(:disabled) { transform: translateY(-1px); }

.v2-btn-ghost {
  background: transparent;
  color: var(--v2-accent);
  border-color: var(--v2-border-strong);
}
.v2-btn-ghost:hover:not(:disabled) { border-color: var(--v2-accent); background: var(--v2-accent-tint); }

.v2-btn-warn {
  background: transparent;
  color: var(--v2-degrade);
  border-color: var(--v2-degrade);
}
.v2-btn-warn:hover:not(:disabled) { background: var(--v2-degrade-tint); }

.v2-btn-danger {
  background: transparent;
  color: var(--v2-danger);
  border-color: var(--v2-danger);
}
.v2-btn-danger:hover:not(:disabled) { background: var(--v2-danger-tint); }

/* ── Tables (data-dense admin lists) ─────────────────────────── */
.v2-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--v2-font-mono);
  font-size: 0.8rem;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  overflow: hidden;
}
.v2-table thead th {
  text-align: left;
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--v2-border-strong);
  background: var(--v2-surface-2);
  color: var(--v2-text-dim);
  font-family: var(--v2-font-ui);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.v2-table tbody td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--v2-border);
  vertical-align: middle;
  color: var(--v2-text);
}
.v2-table tbody tr:last-child td { border-bottom: none; }
.v2-table tbody tr:hover { background: var(--v2-surface-2); }

/* ── Badges / chips ──────────────────────────────────────────── */
.v2-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem; font-weight: 600;
  border: 1px solid var(--v2-border-strong);
  color: var(--v2-text-dim);
  background: var(--v2-surface-2);
}
.v2-badge-ok      { background: var(--v2-ok-tint);      border-color: var(--v2-ok);      color: var(--v2-ok); }
.v2-badge-warn    { background: var(--v2-warn-tint);    border-color: var(--v2-warn);    color: var(--v2-warn); }
.v2-badge-degrade { background: var(--v2-degrade-tint); border-color: var(--v2-degrade); color: var(--v2-degrade); }
.v2-badge-danger  { background: var(--v2-danger-tint);  border-color: var(--v2-danger);  color: var(--v2-danger); }
.v2-badge-info    { background: var(--v2-info-tint);    border-color: var(--v2-info);    color: var(--v2-info); }
.v2-badge-accent  { background: var(--v2-accent-tint);  border-color: var(--v2-accent);  color: var(--v2-accent); }

/* ── Expandable table rows (probe / host management) ─────────────
   Main row carries the vitals; clicking it toggles .open on itself
   and its sibling tr.detail-row. Page JS owns the toggling. */
tbody tr.expand-row { cursor: pointer; }
tbody tr.expand-row:hover { background: var(--v2-surface-2); }
.chev { display: inline-block; color: var(--v2-text-faint); transition: transform 0.15s; font-size: 0.8rem; }
tr.expand-row.open .chev { transform: rotate(90deg); }
tr.detail-row { display: none; }
tr.detail-row.open { display: table-row; background: var(--v2-surface-2); }
tr.detail-row > td { padding: 1rem 1.25rem 1.1rem 2.4rem; }
.detail-grid { display: flex; flex-wrap: wrap; gap: 1.25rem 2.75rem; align-items: flex-start; }
.detail-sec { min-width: 130px; }
.detail-sec h4 { margin: 0 0 0.4rem; font-size: 0.64rem; text-transform: uppercase;
                 letter-spacing: 0.07em; color: var(--v2-text-faint); font-weight: 600;
                 font-family: var(--v2-font-ui); }

/* ── Time-range breadcrumb switcher (dashboard / timeline views) ── */
.range-nav {
  display:        flex;
  align-items:    center;
  flex-wrap:      wrap;
  gap:            0.5rem;
  margin:         0.75rem 0 1.25rem;
  font-family:    var(--v2-font-mono);
  font-size:      0.8rem;
}
.range-nav a {
  color:          var(--v2-text-dim);
  text-decoration: none;
  padding:        0.25rem 0.7rem;
  border:         1px solid transparent;
  border-radius:  0.4rem;
  transition:     color 0.15s, border-color 0.15s, background 0.15s;
}
.range-nav a:hover { color: var(--v2-accent); border-color: var(--v2-accent); }
.range-nav a.active {
  color:          var(--v2-accent);
  font-weight:    700;
  border-color:   var(--v2-accent);
  background:     var(--v2-accent-tint);
}
.range-nav .sep { color: var(--v2-text-faint); user-select: none; }
/* Inline on the refresh-button row — drop the standalone vertical margin. */
.timer-bar .range-nav { margin: 0; }

/* Line/Spline switch (sits at the right end of the breadcrumb row) */
.chart-mode {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  font-size: 0.72rem;
}
.chart-mode .cm-label { color: var(--v2-text-faint); margin-right: 0.15rem; }
.chart-mode button {
  background: transparent;
  border: 1px solid var(--v2-border-strong);
  color: var(--v2-text-dim);
  font-family: var(--v2-font-mono);
  font-size: 0.72rem;
  padding: 0.15rem 0.55rem;
  border-radius: 0.35rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.chart-mode button:first-of-type { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.chart-mode button:last-of-type  { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.chart-mode button:hover { color: var(--v2-accent); border-color: var(--v2-accent); }
.chart-mode button.active {
  color: var(--v2-accent);
  border-color: var(--v2-accent);
  background: var(--v2-accent-tint);
  font-weight: 700;
}

/* Skull marker overlaid on any heat cell whose bucket dropped packets. */
.loss-skull {
  font-size: 9px;
  line-height: 1;
  pointer-events: none;
  filter: grayscale(0.2) drop-shadow(0 0 1px rgba(0,0,0,0.9));
}
/* On the larger timeline cells the skull sits as a top-right badge over the
   number label instead of replacing it. */
.tl-cell .loss-skull {
  position: absolute;
  top: -2px; right: -1px;
  font-size: 10px;
}

/* ── Form primitives ─────────────────────────────────────────── */
.form-group { margin-bottom: 1.25rem; }

.form-label {
  display:       block;
  font-family:   var(--v2-font-mono);
  font-size:     0.68rem;
  font-weight:   500;
  color:         var(--v2-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.45rem;
}

.form-input {
  width:         100%;
  background:    var(--v2-surface-2);
  border:        1px solid var(--v2-border-strong);
  border-radius: 10px;
  color:         var(--v2-text);
  font-family:   var(--v2-font-ui);
  font-size:     0.875rem;
  padding:       0.6rem 0.85rem;
  outline:       none;
  transition:    border-color 0.2s, box-shadow 0.2s;
}
.form-input::placeholder { color: var(--v2-text-faint); }
.form-input:focus {
  border-color: var(--v2-accent);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--v2-focus-ring) 40%, transparent);
}

/* ── Host form (.hf-*) — shared by host_add.html + host_edit.html via
   _host_form.html. Namespaced so nothing else on the app can collide. ── */
.hf-row { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 0.75rem; }
.hf-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 140px; flex: 1; }
.hf-field label {
  font-family: var(--v2-font-mono); font-size: 0.7rem; color: var(--v2-text-dim);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.hf-field input, .hf-field select {
  font-family: var(--v2-font-mono); font-size: 0.82rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--v2-border-strong);
  background: var(--v2-surface-2);
  color: var(--v2-text);
  border-radius: 0.25rem;
}
.hf-field input:focus, .hf-field select:focus { border-color: var(--v2-accent); outline: none; }
.hf-field input::placeholder { color: var(--v2-text-faint); }
.hf-field input:disabled { color: var(--v2-text-faint); cursor: not-allowed; }
.hf-hint { font-size: 0.72rem; color: var(--v2-text-faint); }
.hf-hint a { color: var(--v2-accent); }

/* the lead "what do you want to monitor?" input — bigger target */
.hf-target input { font-size: 0.95rem; padding: 0.6rem 0.7rem; }
.hf-target label { font-size: 0.78rem; text-transform: none; letter-spacing: 0; color: var(--v2-text); font-weight: 600; }

/* checkbox line */
.hf-check { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.6rem; }
.hf-check input[type="checkbox"] { width: auto; margin-top: 0.15rem; cursor: pointer; flex: none; }
.hf-check label { font-size: 0.82rem; color: var(--v2-text); cursor: pointer; }

/* segmented check-type control — real radios, visually hidden */
.hf-seg { display: inline-flex; border: 1px solid var(--v2-border-strong); border-radius: 0.4rem; overflow: hidden; padding: 0; margin: 0; }
.hf-seg input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.hf-seg label {
  font-family: var(--v2-font-mono); font-size: 0.75rem; padding: 0.35rem 0.8rem;
  color: var(--v2-text-dim); background: var(--v2-surface-2); cursor: pointer;
  border-right: 1px solid var(--v2-border); user-select: none;
}
.hf-seg label:last-of-type { border-right: none; }
.hf-seg label:hover { color: var(--v2-text); background: var(--v2-surface-3); }
.hf-seg input:checked + label { background: var(--v2-accent-tint); color: var(--v2-accent); font-weight: 600; }
.hf-seg input:focus-visible + label { outline: 2px solid var(--v2-accent); outline-offset: -2px; }
.hf-auto { font-size: 0.72rem; color: var(--v2-text-faint); }
.hf-auto a { color: var(--v2-accent); cursor: pointer; }

/* collapsible sections */
.hf-details { border: 1px solid var(--v2-border); border-radius: 10px; background: var(--v2-surface-2); margin-bottom: 0.5rem; }
.hf-summary {
  display: flex; align-items: baseline; gap: 0.5rem; cursor: pointer;
  padding: 0.6rem 0.75rem; list-style: none; border-radius: 10px;
}
.hf-summary::-webkit-details-marker { display: none; }
.hf-summary:hover { background: var(--v2-surface-3); }
.hf-summary:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: -2px; }
.hf-chev { color: var(--v2-text-faint); font-size: 0.7rem; transition: transform 0.15s; flex: none; }
.hf-details[open] > .hf-summary > .hf-chev { transform: rotate(90deg); }
.hf-sum-title { font-size: 0.82rem; font-weight: 600; color: var(--v2-text); flex: none; }
.hf-sum-vals {
  font-family: var(--v2-font-mono); font-size: 0.72rem; color: var(--v2-text-faint);
  margin-left: auto; text-align: right;
}
.hf-body { padding: 0.25rem 0.75rem 0.75rem; border-top: 1px solid var(--v2-border); }
.hf-body > :first-child { margin-top: 0.75rem; }

/* type badge (edit mode) + probe exclude list */
.hf-badge {
  font-size: 0.68rem; color: var(--v2-accent); border: 1px solid var(--v2-accent-tint);
  background: var(--v2-accent-tint); border-radius: 0.3rem; padding: 0.1rem 0.45rem;
  font-weight: 600; font-family: var(--v2-font-mono);
}
.hf-exclude { border: 1px solid var(--v2-border-strong); border-radius: 0.35rem; padding: 0.35rem 0.5rem; max-height: 7.5rem; overflow-y: auto; background: var(--v2-surface); }
.hf-exclude > div { display: flex; align-items: center; gap: 0.4rem; padding: 0.1rem 0; }
.hf-exclude span { font-size: 0.75rem; color: var(--v2-text-dim); }
.hf-exclude input[type="checkbox"] { width: auto; cursor: pointer; }
.hf-auto-badge {
  font-size: 0.62rem; font-family: var(--v2-font-mono); color: var(--v2-warn);
  border: 1px solid var(--v2-warn); border-radius: 999px; padding: 0 0.4rem;
}

/* Author display: rules above outrank the UA [hidden] rule — restore it so the
   JS/Jinja type toggles actually hide .hf-row / .hf-check groups. */
#host-form [hidden] { display: none !important; }