/*
 * VIETKTV control plane console.
 *
 * System fonts only, no external stylesheet, no CDN: this ships inside the backend jar and has to
 * render in a venue whose line is down. Anything loaded from the network is a blank page waiting to
 * happen, and a blank page is exactly when someone is trying to find out why a room is dark.
 *
 * The accent is deliberately quiet. On an operations console the colours that must carry meaning
 * are the status colours -- online, expiring, banned -- so the chrome stays out of their way.
 */

:root {
  --ground: #f4f6f9;
  --surface: #ffffff;
  --surface-sunken: #eef1f5;
  --ink: #151a21;
  --ink-muted: #5b6672;
  --ink-faint: #8b95a1;
  --border: #dde2e9;
  --border-strong: #c6cdd6;

  --accent: #2b4c7e;
  --accent-ink: #ffffff;
  --accent-wash: #e8edf5;

  --ok: #0f7b4f;
  --ok-wash: #e2f2ea;
  --warn: #9a6200;
  --warn-wash: #fbf0dc;
  --danger: #b3261e;
  --danger-wash: #fbe6e4;

  --radius: 6px;
  --shadow: 0 1px 2px rgba(21, 26, 33, 0.06), 0 1px 8px rgba(21, 26, 33, 0.04);

  --font: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0f1319;
    --surface: #161c24;
    --surface-sunken: #1c232d;
    --ink: #e6eaf0;
    --ink-muted: #9aa5b2;
    --ink-faint: #6d7885;
    --border: #262f3a;
    --border-strong: #364252;

    --accent: #7ea3d9;
    --accent-ink: #0f1319;
    --accent-wash: #1b2635;

    --ok: #4cc38a;
    --ok-wash: #14291f;
    --warn: #e0a54a;
    --warn-wash: #2c2314;
    --danger: #f2837a;
    --danger-wash: #2e1a19;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  --ground: #0f1319;
  --surface: #161c24;
  --surface-sunken: #1c232d;
  --ink: #e6eaf0;
  --ink-muted: #9aa5b2;
  --ink-faint: #6d7885;
  --border: #262f3a;
  --border-strong: #364252;

  --accent: #7ea3d9;
  --accent-ink: #0f1319;
  --accent-wash: #1b2635;

  --ok: #4cc38a;
  --ok-wash: #14291f;
  --warn: #e0a54a;
  --warn-wash: #2c2314;
  --danger: #f2837a;
  --danger-wash: #2e1a19;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- shell ---------- */

.shell {
  display: grid;
  grid-template-columns: 216px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 12px;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px 16px;
}

.brand strong {
  font-size: 15px;
  letter-spacing: 0.02em;
}

.brand span {
  color: var(--ink-faint);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nav-link {
  appearance: none;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--ink-muted);
  cursor: pointer;
  font: inherit;
  padding: 8px 10px;
  text-align: left;
  text-decoration: none;
  display: block;
}

.nav-link:hover {
  background: var(--surface-sunken);
  color: var(--ink);
}

.nav-link[aria-current="page"] {
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 600;
}

.sidebar-foot {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.who {
  padding: 0 10px;
  font-size: 12px;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

.who strong {
  display: block;
  color: var(--ink);
}

.main {
  padding: 24px 28px 48px;
  min-width: 0;
}

.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

h1 {
  font-size: 20px;
  margin: 0;
  text-wrap: balance;
}

.page-head p {
  color: var(--ink-muted);
  margin: 4px 0 0;
  font-size: 13px;
}

/* ---------- cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.kpi {
  padding: 14px 16px;
}

.kpi dt {
  color: var(--ink-muted);
  font-size: 12px;
  margin: 0 0 6px;
}

.kpi dd {
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin: 0;
  line-height: 1.1;
}

.kpi dd small {
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 400;
}

.kpi.is-warn dd {
  color: var(--warn);
}

.kpi.is-danger dd {
  color: var(--danger);
}

/* ---------- tables ---------- */

.table-wrap {
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

th {
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 8px 12px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

td {
  border-bottom: 1px solid var(--border);
  padding: 9px 12px;
  vertical-align: middle;
}

tbody tr:hover {
  background: var(--surface-sunken);
}

td.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

td.mono,
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ---------- pills ---------- */

.pill {
  border-radius: 999px;
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 9px;
  white-space: nowrap;
}

.pill.ok {
  background: var(--ok-wash);
  color: var(--ok);
}

.pill.warn {
  background: var(--warn-wash);
  color: var(--warn);
}

.pill.danger {
  background: var(--danger-wash);
  color: var(--danger);
}

.pill.neutral {
  background: var(--surface-sunken);
  color: var(--ink-muted);
}

/* ---------- forms and buttons ---------- */

label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 5px;
}

input,
select {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit;
  padding: 8px 10px;
  width: 100%;
}

input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button {
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--accent-ink);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 8px 14px;
}

button:disabled {
  cursor: progress;
  opacity: 0.6;
}

button.ghost {
  background: none;
  border-color: var(--border-strong);
  color: var(--ink-muted);
  font-weight: 500;
}

button.ghost:hover:not(:disabled) {
  color: var(--ink);
}

.filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 16px;
}

.filters > div {
  min-width: 150px;
}

/* ---------- login ---------- */

.login-screen {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.login-card {
  max-width: 360px;
  padding: 28px;
  width: 100%;
}

.login-card h1 {
  margin-bottom: 4px;
}

.login-card .sub {
  color: var(--ink-muted);
  font-size: 13px;
  margin: 0 0 20px;
}

.field {
  margin-bottom: 14px;
}

.login-card button {
  margin-top: 6px;
  width: 100%;
}

/* ---------- messages ---------- */

.notice {
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 16px;
  padding: 10px 12px;
}

.notice.error {
  background: var(--danger-wash);
  color: var(--danger);
}

.notice.info {
  background: var(--accent-wash);
  color: var(--accent);
}

.empty {
  color: var(--ink-muted);
  padding: 32px 16px;
  text-align: center;
}

.muted {
  color: var(--ink-muted);
}

.retry-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

@media (max-width: 720px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .sidebar-foot {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
    flex-direction: row;
    margin-left: auto;
  }

  .main {
    padding: 16px;
  }
}

/* ---------- layout helpers ---------- */

.grid-2,
.grid-3 {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card.pad { padding: 16px; }

.card-title {
  font-size: 14px;
  margin: 0 0 8px;
}

.head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filters .grow { flex: 1 1 240px; }

.crumb {
  margin: 0 0 12px;
  font-size: 13px;
}

.crumb a,
a {
  color: var(--accent);
}

.hint {
  color: var(--ink-faint);
  font-size: 11px;
  margin: 4px 0 0;
}

.small { font-size: 11px; }
.small-dd { font-size: 15px; font-weight: 500; }
.warn-text { color: var(--warn); }
.danger-text { color: var(--danger); }

.truncate {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- tabs ---------- */

.tabs {
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--ink-muted);
  font-weight: 500;
  padding: 8px 12px;
}

.tab.active {
  border-bottom-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* ---------- row actions ---------- */

.row-actions {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

.link-btn {
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 3px 6px;
  text-decoration: none;
}

.link-btn:hover:not(:disabled) { background: var(--accent-wash); }
.link-btn:disabled { color: var(--ink-faint); cursor: default; }
.link-btn.danger-text:hover:not(:disabled) { background: var(--danger-wash); }

button.danger {
  background: var(--danger);
  color: #fff;
}

button.ghost.danger-text {
  color: var(--danger);
  border-color: var(--danger);
}

/* ---------- hot song rows ---------- */

.thumb {
  border-radius: 4px;
  display: block;
  height: 32px;
  object-fit: cover;
  width: 56px;
}

.thumb-empty {
  background: var(--surface-sunken);
  border: 1px dashed var(--border-strong);
}

.switch {
  height: 16px;
  width: 16px;
  accent-color: var(--accent);
}

/* ---------- modal ---------- */

.modal-backdrop {
  align-items: center;
  background: rgba(10, 14, 20, 0.55);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 50;
}

.modal {
  max-height: 85vh;
  max-width: 460px;
  overflow-y: auto;
  padding: 22px;
  width: 100%;
}

.modal h2 {
  font-size: 16px;
  margin: 0 0 12px;
}

.modal-body p { margin: 0 0 10px; }

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 18px;
}

.detail-pre {
  background: var(--surface-sunken);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 11px;
  margin: 0;
  max-height: 340px;
  overflow: auto;
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- toast ---------- */

.toast {
  background: var(--ok);
  border-radius: var(--radius);
  bottom: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  left: 50%;
  max-width: 420px;
  padding: 11px 18px;
  position: fixed;
  transform: translateX(-50%);
  z-index: 60;
}

.toast.danger { background: var(--danger); }

@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in 160ms ease-out; }
  @keyframes toast-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
  }
}

/* ---------------------------------------------------------------- chart (B-02)
   Inline SVG, no library: the console ships inside the backend jar and fetches nothing from a CDN,
   because it has to open in a venue whose line is down. */

.chart-card h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.chart {
  width: 100%;
  height: 120px;
  display: block;
  /* The bars carry the meaning; a border would imply an axis that is not drawn. */
  background: var(--accent-wash);
  border-radius: 6px;
}

.chart .bar {
  fill: var(--accent);
}

/* A period with no devices is a fact, not a gap. It is drawn as a baseline rather than left blank
   so the axis stays continuous and nobody reads the space as missing data. */
.chart .bar-empty {
  fill: var(--border-strong);
}

.chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.chart-axis span {
  flex: 1;
  text-align: center;
}

/* ---------------------------------------------------------------- report bar (D-01)
   An inline proportion bar inside the total cell: the shape of a year is easier to read than
   twelve numbers, and it costs no chart library. */

.inline-bar {
  display: inline-block;
  height: 6px;
  margin-left: 0.5rem;
  vertical-align: middle;
  background: var(--accent);
  border-radius: 3px;
  /* Zero draws nothing at all rather than a stub, because a stub reads as "a little". */
  min-width: 0;
}

/* ---------------------------------------------------------------- install pairing code
   A number somebody reads down a phone to a technician standing in a noisy room. Sized to be
   legible from arm's length on a laptop pushed to the side of a desk, and spaced so the two groups
   are dictated as two groups. Selectable, because the other half of the time it gets pasted into
   a chat message. */

.pin-code {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-align: center;
  user-select: all;
}

/* ---------------------------------------------------------------- artifact upload
   A file picker on the releases page. Deliberately plain: it is used a handful of times a year, by
   somebody who has just finished a build and is about to sign it, and the useful part of the card
   is the JSON fragment it prints afterwards. */

.upload-card {
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.upload-card label {
  width: 100%;
  font-weight: 600;
}

/* The link is the long thing on its row; the pickers beside it keep their own width. */
.upload-card input[type="url"] {
  flex: 1 1 24rem;
  min-width: 0;
}

.upload-card .hint,
.upload-card pre {
  width: 100%;
  margin: 0;
}

.upload-card pre {
  padding: 0.75rem;
  background: var(--surface-sunken);
  border-radius: var(--radius);
  overflow-x: auto;
}

/* ---------------------------------------------------------------- grouped sidebar
   Eight flat links gave no sense of which screens belong together, and no room to say that one of
   them has work waiting. The group titles are quiet on purpose: they orient, they are not
   navigation themselves. */

.nav-group {
  margin-bottom: 0.75rem;
}

.nav-group-title {
  padding: 0.35rem 0.9rem 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* A count, not a dot: "12 waiting" is actionable and "something is waiting" is not. */
.nav-badge {
  min-width: 1.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--warn);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- global search
   A support call opens with somebody reading out a number, and until now which box to type it into
   depended on which number it was. The panel deliberately covers the page: it is a jump target, not
   a filter, and it closes on Escape, on a click anywhere else, and on picking a result. */

.topbar {
  position: relative;
  margin-bottom: 1rem;
}

.topbar input {
  width: 100%;
  max-width: 520px;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.95rem;
}

.search-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-width: 520px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.search-group-title {
  padding: 0.4rem 0.85rem 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.search-hit {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  color: var(--ink);
  text-decoration: none;
  border-top: 1px solid var(--border);
}

.search-hit:hover {
  background: var(--accent-wash);
}

.search-empty {
  padding: 0.85rem;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------- renewal bands
   Three counts that are also the filter. An operator working a renewal list is working it in
   urgency order, so the tabs are the order and the count is the size of the job. */

.band-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.band {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}

.band.active {
  border-color: var(--accent);
  background: var(--accent-wash);
}

.band-count {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.band-label {
  font-size: 0.75rem;
  color: var(--ink-muted);
}

/* A drilled-in row under its parent: indented and quieter, so the parent still reads as the row. */
.sub-row td {
  background: var(--surface-sunken);
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------- device tabs
   One box on one page. Answering a support call used to mean four screens and four filters with
   somebody on the phone throughout. */

.tab-row {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.tab {
  padding: 0.5rem 0.95rem;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--ink-muted);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Remote support buttons: a fixed vocabulary, laid out as buttons rather than a text box, because
   the safe set is a decision the server already made and the console should not look like it can
   send anything else. */
.remote-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* A button that reads as a link: the recovery door is a sentence, not a call to action. */
.linklike {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}

/* Máy chủ đọc được gì từ file vừa tải lên. Đơn cách, vì mỗi dòng là một sự thật đối chiếu được. */
.ev {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
  margin: 12px 0;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre;
  overflow-x: auto;
}

/* ==========================================================================
   NEON / GLASS SKIN  (iOS26 glassmorphism + neon glow)
   Skin-only: overrides theme tokens and adds glass/glow to existing classes.
   Layout, markup and JS are untouched. Appended last so it wins the cascade.
   ========================================================================== */

:root,
:root[data-theme="light"],
:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  --ground: #070b16;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-sunken: rgba(255, 255, 255, 0.03);
  --ink: #eaf1ff;
  --ink-muted: #9db0d6;
  --ink-faint: #6d80a6;
  --border: rgba(140, 180, 255, 0.16);
  --border-strong: rgba(140, 180, 255, 0.30);
  --rule: rgba(140, 180, 255, 0.16);

  --accent: #38e1ff;
  --accent-ink: #04121a;
  --accent-wash: rgba(56, 225, 255, 0.14);

  --ok: #38f2b0;
  --ok-wash: rgba(56, 242, 176, 0.14);
  --warn: #ffd166;
  --warn-wash: rgba(255, 209, 102, 0.14);
  --danger: #ff6b81;
  --danger-wash: rgba(255, 107, 129, 0.16);

  --radius: 16px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: rgba(255, 255, 255, 0.055);
    --surface-sunken: rgba(255, 255, 255, 0.03);
    --border: rgba(140, 180, 255, 0.16);
  }
}

body {
  color-scheme: dark;
  background-color: #070b16;
  background-image:
    radial-gradient(1200px 620px at 12% -12%, rgba(56, 225, 255, 0.14), transparent 60%),
    radial-gradient(1000px 720px at 112% 8%, rgba(168, 85, 247, 0.16), transparent 55%),
    radial-gradient(1000px 760px at 50% 122%, rgba(45, 120, 255, 0.14), transparent 55%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Frosted glass surfaces */
.sidebar {
  background: rgba(11, 17, 33, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border-right: 1px solid rgba(140, 180, 255, 0.14);
}

.card,
.login-card {
  background: var(--surface);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Brand + a hairline glow under the header */
.brand strong {
  color: #eaf6ff;
  text-shadow: 0 0 18px rgba(56, 225, 255, 0.45);
}

/* Sidebar navigation */
.nav-link {
  position: relative;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}

.nav-link[aria-current="page"] {
  background: linear-gradient(90deg, rgba(56, 225, 255, 0.20), rgba(56, 225, 255, 0.04));
  color: #c8f6ff;
  box-shadow:
    inset 0 0 0 1px rgba(56, 225, 255, 0.35),
    0 0 20px rgba(56, 225, 255, 0.18);
}

.nav-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: #38e1ff;
  box-shadow: 0 0 10px rgba(56, 225, 255, 0.9);
}

/* Neon primary buttons */
button {
  background: linear-gradient(135deg, #38e1ff 0%, #6ea8ff 100%);
  color: #04121a;
  border: 0;
  box-shadow: 0 6px 18px rgba(56, 225, 255, 0.32);
  transition: box-shadow 0.15s ease, transform 0.05s ease;
}

button:hover:not(:disabled) {
  box-shadow: 0 8px 24px rgba(56, 225, 255, 0.5);
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

button.ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(140, 180, 255, 0.28);
  color: var(--ink-muted);
  box-shadow: none;
}

button.ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.10);
  color: var(--ink);
}

/* KPI values glow */
.kpi dd {
  color: #d7f4ff;
  text-shadow: 0 0 22px rgba(56, 225, 255, 0.30);
}

/* Inputs as glass */
input,
select {
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(140, 180, 255, 0.22);
  /* Render the native dropdown popup, caret and scrollbar in dark mode so the option
     list is not dim grey-on-dark. */
  color-scheme: dark;
}

/* The open <select> list is drawn by the OS from the option colours, not the glass
   background — give it a solid dark backing and bright text so every genre is legible. */
select option,
select optgroup {
  background-color: #0e1b2a;
  color: #eaf6ff;
}

select option:checked,
select option:hover {
  background-color: #12405c;
  color: #ffffff;
}

input:focus-visible,
select:focus-visible {
  border-color: rgba(56, 225, 255, 0.65);
  box-shadow: 0 0 0 3px rgba(56, 225, 255, 0.20);
  outline: none;
}

/* Tables */
th {
  background: rgba(255, 255, 255, 0.03);
}

tbody tr:hover {
  background: rgba(56, 225, 255, 0.07);
}

/* Pills / notices: neon-tinted with a hairline glow */
.pill,
.notice {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Neon scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 225, 255, 0.35) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(56, 225, 255, 0.30);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 225, 255, 0.55);
  background-clip: content-box;
}

/* Sidebar section headers — brighter neon so the groups read clearly on the dark glass */
.nav-group-title {
  color: #7fe3ff;
  opacity: 1;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-shadow: 0 0 12px rgba(56, 225, 255, 0.35);
}

.nav-group + .nav-group .nav-group-title {
  border-top: 1px solid rgba(140, 180, 255, 0.10);
  margin-top: 4px;
  padding-top: 0.6rem;
}

/* .band is a <button> tile — the neon button rule darkened its text to near-black, making its big
   number invisible on the dark glass. Restore light text and make the count glow like the KPI values. */
.band {
  color: var(--ink);
  background: var(--surface);
  box-shadow: none;
}

.band:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.band.active {
  border-color: rgba(56, 225, 255, 0.55);
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px rgba(56, 225, 255, 0.35), 0 0 18px rgba(56, 225, 255, 0.18);
}

.band-count {
  color: #d7f4ff;
  text-shadow: 0 0 16px rgba(56, 225, 255, 0.30);
}

.band-count.danger-text {
  color: var(--danger);
  text-shadow: 0 0 16px rgba(255, 107, 129, 0.35);
}

.band-label {
  color: var(--ink-muted);
}