/* "New look" -- an opt-in reskin of the dashboards, in the same visual
   language as the /guide page (Fraunces + Public Sans + IBM Plex Mono,
   the same color tokens/light-dark handling). Entirely scoped under
   body.ui-new so it has zero effect anywhere this class isn't present --
   toggled client-side by static/js/theme-toggle.js, nothing server-side
   depends on it. This is a temporary rollout toggle: once the new look is
   trusted, the .ui-new-scoped overrides below can simply become the
   default (unscoped) rules and this whole gate removed. */

body.ui-new {
  --ground: #F5F6F3; --surface: #FFFFFF; --surface-2: #EFF2EE;
  --ink: #182420; --ink-soft: #51605A; --ink-faint: #7C887F;
  --line: #DCE3DE; --line-soft: #E8ECE6;
  --accent: #1F6F64; --accent-ink: #0E4A42; --accent-soft: #DCEAE6;
  --good: #2E7D46; --warn: #9C6C2C; --bad: #AE4436;
  --shadow: 0 1px 2px rgba(24, 36, 32, .06), 0 6px 20px -8px rgba(24, 36, 32, .12);
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  body.ui-new:not([data-theme="light"]) {
    --ground: #10140F; --surface: #161C16; --surface-2: #1B221A;
    --ink: #E9EEE9; --ink-soft: #AAB6AC; --ink-faint: #79857B;
    --line: #293229; --line-soft: #212A21;
    --accent: #5FBBA9; --accent-ink: #9BDACB; --accent-soft: #1B2B26;
    --good: #5BB57C; --warn: #D8A85C; --bad: #E08477;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -12px rgba(0, 0, 0, .5);
  }
}
body.ui-new[data-theme="dark"] {
  --ground: #10140F; --surface: #161C16; --surface-2: #1B221A;
  --ink: #E9EEE9; --ink-soft: #AAB6AC; --ink-faint: #79857B;
  --line: #293229; --line-soft: #212A21;
  --accent: #5FBBA9; --accent-ink: #9BDACB; --accent-soft: #1B2B26;
  --good: #5BB57C; --warn: #D8A85C; --bad: #E08477;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -12px rgba(0, 0, 0, .5);
}

body.ui-new {
  background: var(--ground);
  color: var(--ink);
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.ui-new h1, body.ui-new h2, body.ui-new h3, body.ui-new h4, body.ui-new h5 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  color: var(--ink);
}
body.ui-new p, body.ui-new .text-muted { color: var(--ink-soft) !important; }
body.ui-new a { color: var(--accent-ink); }
body.ui-new code { font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* Navbar (base.html) */
body.ui-new .navbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
body.ui-new .navbar-brand, body.ui-new .navbar .nav-link {
  color: var(--ink) !important;
  font-family: "Fraunces", Georgia, serif;
}
body.ui-new .navbar .nav-link:hover { color: var(--accent-ink) !important; }

/* Cards */
body.ui-new .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
body.ui-new .card-header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
}

/* Buttons */
body.ui-new .btn {
  border-radius: 8px;
  font-weight: 600;
  font-family: "Public Sans", sans-serif;
}
body.ui-new .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}
body.ui-new .btn-primary:hover, body.ui-new .btn-primary:focus {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}
body.ui-new .btn-outline-primary {
  color: var(--accent-ink);
  border-color: var(--accent);
}
body.ui-new .btn-outline-primary:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: var(--accent);
}
body.ui-new .btn-outline-secondary {
  color: var(--ink-soft);
  border-color: var(--line);
}
body.ui-new .btn-outline-secondary:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line);
}
body.ui-new .btn-success { background: var(--good); border-color: var(--good); }
body.ui-new .btn-danger { background: var(--bad); border-color: var(--bad); }

/* Badges */
body.ui-new .badge {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: 99px;
}
body.ui-new .badge.bg-primary { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
body.ui-new .badge.bg-success { background: #DFEBE0 !important; color: var(--good) !important; }
body.ui-new .badge.bg-warning { background: #F1E4CC !important; color: var(--warn) !important; }
body.ui-new .badge.bg-danger { background: #F3DEDA !important; color: var(--bad) !important; }
body.ui-new .badge.bg-secondary { background: var(--surface-2) !important; color: var(--ink-soft) !important; }

/* Tables */
body.ui-new .table { color: var(--ink); }
body.ui-new .table thead th {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  background: transparent;
}
body.ui-new .table td, body.ui-new .table th { border-color: var(--line-soft); }
body.ui-new .table-hover tbody tr:hover { background: var(--surface-2); }

/* List groups */
body.ui-new .list-group-item {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
body.ui-new .list-group-item-action:hover { background: var(--surface-2); }

/* Forms */
body.ui-new .form-control, body.ui-new .form-select {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 7px;
}
body.ui-new .form-control:focus, body.ui-new .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
body.ui-new label, body.ui-new .form-label { color: var(--ink-soft); font-weight: 600; font-size: .9rem; }

/* Dropdown menus */
body.ui-new .dropdown-menu {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
body.ui-new .dropdown-item { color: var(--ink); }
body.ui-new .dropdown-item:hover { background: var(--surface-2); color: var(--ink); }

/* Modals */
body.ui-new .modal-content {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
body.ui-new .modal-header, body.ui-new .modal-footer { border-color: var(--line); }

/* Alerts */
body.ui-new .alert-info { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-soft); }
body.ui-new .alert-success { background: #DFEBE0; color: var(--good); border-color: #DFEBE0; }
body.ui-new .alert-danger { background: #F3DEDA; color: var(--bad); border-color: #F3DEDA; }

/* ---------- UI/theme toggle controls (top-right of each dashboard) ---------- */
.ui-toggle-group { display: inline-flex; gap: 6px; align-items: center; }
.ui-toggle-btn {
  border: 1px solid #ced4da;
  background: #fff;
  border-radius: 8px;
  padding: .375rem .75rem;
  font-size: .875rem;
  line-height: 1.5;
  cursor: pointer;
}
body.ui-new .ui-toggle-btn {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: "Public Sans", sans-serif;
}
body.ui-new .ui-toggle-btn:hover { background: var(--surface-2); }
/* The theme (light/dark) button only makes sense once the new look is on --
   the classic Bootstrap look has no dark-mode styling of its own. */
.theme-toggle-btn { display: none; }
body.ui-new .theme-toggle-btn { display: inline-flex; }