/*
 * Pythia dark theme
 * -----------------
 * Mirrors the Pylon (Governance) dark theme: a CSS-variable token layer with
 * light defaults under :root and overrides applied when <html> carries the
 * `dark` class. The class is toggled from window.pythiaTheme (see App.razor)
 * and persisted in localStorage under the shared `lisi-dark` key.
 *
 * Light mode is the default and is left untouched — every override below is
 * scoped under html.dark so toggling has zero effect until dark is enabled.
 */

:root {
  --pythia-bg: #f7f7f7;
  --pythia-surface: #ffffff;
  --pythia-surface-elevated: #ffffff;
  --pythia-border: #d6d5d5;
  --pythia-border-strong: #c7c7c7;
  --pythia-text: #1b2235;
  --pythia-text-muted: #6b7280;
  --pythia-link: #0071c1;
  --pythia-accent: #2ebfa5;
  --pythia-topbar-bg: #f7f7f7;
  --pythia-topbar-border: #d6d5d5;
  --pythia-sidebar-gradient: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

html.dark {
  --pythia-bg: #0a0e18;
  --pythia-surface: #11151f;
  --pythia-surface-elevated: #1e253b;
  --pythia-border: #1e2333;
  --pythia-border-strong: #2a3045;
  --pythia-text: #eceef3;
  --pythia-text-muted: #8b93a8;
  --pythia-link: #5ea0ff;
  --pythia-accent: #2ebfa5;
  --pythia-topbar-bg: #11151f;
  --pythia-topbar-border: #1e2333;
  --pythia-sidebar-gradient: linear-gradient(180deg, #0a0e18 0%, #131826 70%);

  color-scheme: dark;
}

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

html.dark body {
  background-color: var(--pythia-bg);
  color: var(--pythia-text);
}

html.dark main,
html.dark article,
html.dark .content {
  background-color: var(--pythia-bg);
  color: var(--pythia-text);
}

/* Sidebar already ships a dark gradient; deepen it for the dark palette. */
html.dark .sidebar {
  background-image: var(--pythia-sidebar-gradient);
}

/* Content top bar flips to a dark surface. Scoped to the bar inside <main> so
   the brand bar inside the sidebar (which sits over the gradient) is untouched. */
html.dark main .top-row {
  background-color: var(--pythia-topbar-bg) !important;
  border-bottom-color: var(--pythia-topbar-border) !important;
  color: var(--pythia-text);
}

html.dark main .top-row a,
html.dark main .top-row .btn-link {
  color: var(--pythia-text);
}

html.dark a:not(.btn):not(.nav-link) {
  color: var(--pythia-link);
}

html.dark hr,
html.dark .dropdown-divider {
  border-color: var(--pythia-border);
}

/* ---- Bootstrap surfaces ------------------------------------------------- */

html.dark .card {
  background-color: var(--pythia-surface);
  border-color: var(--pythia-border);
  color: var(--pythia-text);
}

html.dark .card-header,
html.dark .card-footer {
  background-color: var(--pythia-surface-elevated);
  border-color: var(--pythia-border);
  color: var(--pythia-text);
}

html.dark .modal-content {
  background-color: var(--pythia-surface);
  color: var(--pythia-text);
}

html.dark .modal-header,
html.dark .modal-footer {
  border-color: var(--pythia-border);
}

html.dark .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--pythia-text);
  color: var(--pythia-text);
  border-color: var(--pythia-border);
}

html.dark .table > :not(caption) > * > * {
  border-color: var(--pythia-border);
  background-color: transparent;
}

html.dark .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(255, 255, 255, 0.03);
  color: var(--pythia-text);
}

html.dark .table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: rgba(255, 255, 255, 0.06);
  color: var(--pythia-text);
}

html.dark .form-control,
html.dark .form-select,
html.dark .input-group-text {
  background-color: var(--pythia-surface-elevated);
  border-color: var(--pythia-border);
  color: var(--pythia-text);
}

html.dark .form-control::placeholder {
  color: var(--pythia-text-muted);
}

html.dark .form-control:focus,
html.dark .form-select:focus {
  background-color: var(--pythia-surface-elevated);
  color: var(--pythia-text);
  border-color: var(--pythia-accent);
}

html.dark .list-group-item {
  background-color: var(--pythia-surface);
  border-color: var(--pythia-border);
  color: var(--pythia-text);
}

html.dark .dropdown-menu {
  background-color: var(--pythia-surface);
  border-color: var(--pythia-border);
  color: var(--pythia-text);
}

html.dark .dropdown-item {
  color: var(--pythia-text);
}

html.dark .dropdown-item:hover,
html.dark .dropdown-item:focus {
  background-color: var(--pythia-surface-elevated);
  color: var(--pythia-text);
}

/* Utility classes that hardcode light surfaces. */
html.dark .bg-white,
html.dark .bg-light {
  background-color: var(--pythia-surface) !important;
  color: var(--pythia-text);
}

html.dark .text-muted {
  color: var(--pythia-text-muted) !important;
}

html.dark .text-dark {
  color: var(--pythia-text) !important;
}

html.dark .border {
  border-color: var(--pythia-border) !important;
}

/* ---- Theme toggle button ----------------------------------------------- */

.pythia-theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: 1rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--pythia-text-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pythia-theme-toggle:hover {
  background-color: rgba(127, 127, 127, 0.15);
  color: var(--pythia-text);
}

.pythia-theme-toggle .oi {
  font-size: 1.05rem;
  top: 0;
}