/* Client-area Graphs tab (Natbox extension, Graphs.php + graphs.blade.php). Bump ?v= in Natbox.php after edits.
   Series colours: validated pair (blue = series 1, orange = series 2), own step per mode. */
.nbx-graphs {
  --nbx-s1: #2a78d6; --nbx-s2: #eb6834;
  --nbx-ok: #2a78d6; --nbx-ok-track: #cde2fb; --nbx-warn: #c98500; --nbx-warn-track: #fbe6b5; --nbx-crit: #d03b3b; --nbx-crit-track: #f6d3d3;
  --nbx-grid: hsl(var(--color-neutral) / .75);
  display: flex; flex-direction: column; gap: 16px;
}
.dark .nbx-graphs {
  --nbx-s1: #3987e5; --nbx-s2: #d95926;
  --nbx-ok: #3987e5; --nbx-ok-track: #16243a; --nbx-warn: #fab219; --nbx-warn-track: #3a2c0c; --nbx-crit: #e66767; --nbx-crit-track: #3d1a1a;
  --nbx-grid: hsl(var(--color-neutral));
}
.nbx-note { font-size: 14px; padding: 10px 14px; border-radius: 8px; border: 1px solid hsl(var(--color-neutral)); color: hsl(var(--color-muted)); }

.nbx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nbx-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid hsl(var(--color-neutral)); border-radius: 12px; background: hsl(var(--color-background)); }
.nbx-tile-label { font-size: 13px; color: hsl(var(--color-muted)); }
.nbx-tile-value { font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: hsl(var(--color-base)); }
.nbx-tile-sub { font-size: 13px; color: hsl(var(--color-muted)); }
.nbx-tile-sub b { color: hsl(var(--color-base)); font-weight: 600; }
.nbx-meter { display: block; height: 6px; border-radius: 99px; overflow: hidden; margin: 4px 0 2px; }
.nbx-meter i { display: block; height: 100%; border-radius: 99px; }
.nbx-meter.ok { background: var(--nbx-ok-track); } .nbx-meter.ok i { background: var(--nbx-ok); }
.nbx-meter.warn { background: var(--nbx-warn-track); } .nbx-meter.warn i { background: var(--nbx-warn); }
.nbx-meter.crit { background: var(--nbx-crit-track); } .nbx-meter.crit i { background: var(--nbx-crit); }

/* range switch: radio inputs before the toolbar, no JS (Livewire swaps this markup in) */
.nbx-range-input { position: absolute; opacity: 0; pointer-events: none; }
.nbx-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.nbx-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid hsl(var(--color-neutral)); border-radius: 10px; }
.nbx-seg label { padding: 5px 12px; border-radius: 7px; font-size: 14px; font-weight: 500; color: hsl(var(--color-muted)); cursor: pointer; user-select: none; }
.nbx-seg label:hover { color: hsl(var(--color-base)); background: hsl(var(--color-neutral) / .4); }
#nbx-r-24h:checked ~ .nbx-toolbar .nbx-seg-24h, #nbx-r-7d:checked ~ .nbx-toolbar .nbx-seg-7d, #nbx-r-30d:checked ~ .nbx-toolbar .nbx-seg-30d {
  background: hsl(var(--color-base)); color: hsl(var(--color-background)); }
#nbx-r-24h:focus-visible ~ .nbx-toolbar .nbx-seg-24h, #nbx-r-7d:focus-visible ~ .nbx-toolbar .nbx-seg-7d, #nbx-r-30d:focus-visible ~ .nbx-toolbar .nbx-seg-30d {
  box-shadow: var(--nbx-ring); }
.nbx-updated { font-size: 13px; color: hsl(var(--color-muted)); }
.nbx-panel { display: none; flex-direction: column; gap: 14px; }
#nbx-r-24h:checked ~ .nbx-panel-24h, #nbx-r-7d:checked ~ .nbx-panel-7d, #nbx-r-30d:checked ~ .nbx-panel-30d { display: flex; }
.nbx-traffic { font-size: 14px; color: hsl(var(--color-muted)); }
.nbx-traffic b { color: hsl(var(--color-base)); font-weight: 600; }

.nbx-charts { display: grid; gap: 12px; }
.nbx-chart-card { margin: 0; padding: 14px 16px 10px; border: 1px solid hsl(var(--color-neutral)); border-radius: 12px; background: hsl(var(--color-background)); }
.nbx-chart-card figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.nbx-chart-title { font-weight: 600; color: hsl(var(--color-base)); }
.nbx-chart-sub { font-size: 13px; color: hsl(var(--color-muted)); }
.nbx-legend { display: flex; gap: 16px; font-size: 13px; color: hsl(var(--color-muted)); margin: -4px 0 10px; }
.nbx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.nbx-key { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: var(--nbx-s1); }
.nbx-key.s2 { background: var(--nbx-s2); }

.nbx-plot-wrap { position: relative; padding-left: 64px; }
.nbx-yaxis { position: absolute; left: 0; top: 0; bottom: 0; width: 58px; }
.nbx-yaxis span { position: absolute; right: 0; transform: translateY(-50%); font-size: 11px; line-height: 1; color: hsl(var(--color-muted)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nbx-plot { position: relative; height: 150px; outline: none; touch-action: pan-y; }
.nbx-plot:focus-visible { box-shadow: var(--nbx-ring); border-radius: 4px; }
.nbx-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nbx-grid { stroke: var(--nbx-grid); stroke-width: 1; }
.nbx-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke: var(--nbx-s1); }
.nbx-line.s2 { stroke: var(--nbx-s2); }
.nbx-area { fill: var(--nbx-s1); opacity: .1; }
.nbx-area.s2 { fill: var(--nbx-s2); opacity: .08; }
.nbx-plot-wrap.has-ends { padding-right: 36px; }
.nbx-endlabel { position: absolute; right: -34px; transform: translateY(-50%); font-size: 11px; font-weight: 600; color: hsl(var(--color-muted)); pointer-events: none; }
.nbx-xaxis { position: relative; height: 18px; margin: 6px 0 0 64px; }
.nbx-xaxis.has-ends { margin-right: 36px; }
.nbx-xaxis span { position: absolute; transform: translateX(-50%); font-size: 11px; color: hsl(var(--color-muted)); white-space: nowrap; }

.nbx-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: hsl(var(--color-base) / .35); pointer-events: none; }
.nbx-tip { position: absolute; top: 4px; z-index: 5; min-width: 150px; padding: 8px 10px; border-radius: 8px; pointer-events: none;
  background: hsl(var(--color-background)); border: 1px solid hsl(var(--color-neutral)); box-shadow: var(--nbx-shadow); font-size: 12px; }
.nbx-tip-time { color: hsl(var(--color-muted)); margin-bottom: 4px; white-space: nowrap; }
.nbx-tip-row { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.nbx-tip-row b { font-weight: 600; color: hsl(var(--color-base)); font-variant-numeric: tabular-nums; }
.nbx-tip-row span { color: hsl(var(--color-muted)); }

.nbx-details summary { cursor: pointer; font-size: 14px; color: hsl(var(--color-muted)); }
.nbx-details summary:hover { color: hsl(var(--color-base)); }
.nbx-table-wrap { max-height: 320px; overflow: auto; margin-top: 8px; border: 1px solid hsl(var(--color-neutral)); border-radius: 8px; }
.nbx-table { width: 100%; font-size: 13px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.nbx-table th { position: sticky; top: 0; background: hsl(var(--color-background-secondary)); text-align: left; font-weight: 600; padding: 6px 10px; }
.nbx-table td { padding: 4px 10px; border-top: 1px solid hsl(var(--color-neutral) / .6); white-space: nowrap; }

@media (max-width: 640px) {
  .nbx-tiles { grid-template-columns: 1fr; }
  .nbx-plot { height: 120px; }
  .nbx-plot-wrap { padding-left: 56px; } .nbx-yaxis { width: 50px; } .nbx-xaxis { margin-left: 56px; }
}
@media (forced-colors: active) { .nbx-line { stroke: CanvasText; } .nbx-line.s2 { stroke-dasharray: 4 3; } }