/* ============================================================================
   SLAM Design System — App Chrome
   ----------------------------------------------------------------------------
   Re-themes the application shell (top nav, left sidebar, icon rail, dropdowns,
   toggles, drag affordances) onto the design tokens.

   base.html ships a second, parallel theming layer inside its inline <style>:
   :root[data-theme="light|dark"] define --bg-color / --nav-bg / --sidebar-bg /
   --link-color / --card-bg / --hover-bg / etc., and explicit rules apply them to
   body, a, .card, .top-nav, .left-menu, inputs and tables.

   This file is loaded AFTER those inline styles, so re-pointing those legacy
   variables here (at matching specificity) cascades the new command-center
   palette through the existing shell rules without rewriting the inline CSS.
   Hardcoded blue accents that are NOT variable-driven are overridden directly.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1) Re-map the legacy chrome variables to design tokens
   ---------------------------------------------------------------------------- */
:root[data-theme="light"] {
  --bg-color: var(--slam-surface-0);
  --text-color: var(--slam-text);
  --nav-bg: var(--slam-surface-1);
  --sidebar-bg: var(--slam-surface-1);
  --border-color: var(--slam-border);
  --card-bg: var(--slam-surface-1);
  --table-bg: var(--slam-surface-1);
  --table-stripe: var(--slam-surface-2);
  --input-bg: var(--slam-surface-1);
  --input-text: var(--slam-text);
  --link-color: var(--slam-accent);
  --hover-bg: var(--slam-surface-3);
  --muted-text: var(--slam-text-muted);
}

:root[data-theme="dark"] {
  --bg-color: var(--slam-surface-0);
  --text-color: var(--slam-text);
  --nav-bg: var(--slam-surface-1);
  --sidebar-bg: var(--slam-surface-1);
  --border-color: var(--slam-border);
  --card-bg: var(--slam-surface-1);
  --table-bg: var(--slam-surface-1);
  --table-stripe: var(--slam-surface-2);
  --input-bg: var(--slam-surface-1);
  --input-text: var(--slam-text);
  --link-color: var(--slam-accent-hover);
  --hover-bg: var(--slam-surface-3);
  --muted-text: var(--slam-text-muted);
}

/* ----------------------------------------------------------------------------
   2) Top navigation bar — frosted glass, elevated, hairline border
   ---------------------------------------------------------------------------- */
.top-nav {
  background: var(--slam-glass-bg-strong);
  -webkit-backdrop-filter: var(--slam-glass-blur);
  backdrop-filter: var(--slam-glass-blur);
  border-bottom: 1px solid var(--slam-glass-border);
  box-shadow: var(--slam-shadow-1), var(--slam-glass-highlight);
}

/* ----------------------------------------------------------------------------
   3) Left sidebar / icon rail — frosted glass
   ---------------------------------------------------------------------------- */
.left-menu,
#icon-nav {
  background: var(--slam-glass-bg-strong);
  -webkit-backdrop-filter: var(--slam-glass-blur);
  backdrop-filter: var(--slam-glass-blur);
  border-right: 1px solid var(--slam-glass-border);
}

.left-menu .nav-link {
  color: var(--slam-text);
  border-radius: var(--slam-radius-sm);
  margin: 1px 6px;
  transition: background-color var(--slam-dur-fast) var(--slam-ease),
    color var(--slam-dur-fast) var(--slam-ease);
}

.left-menu .nav-link:hover {
  background: var(--slam-accent-soft);
  color: var(--bs-emphasis-color);
}

/* Active item: accent fill + emphasis text. Covers the common ways an active
   link is flagged across the app. */
.left-menu .nav-link.active,
.left-menu .nav-link[aria-current="page"],
.left-menu .nav-link.is-active {
  background: var(--slam-accent-soft-strong);
  color: var(--slam-accent);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--slam-accent);
}

.left-menu:not(.expanded) .nav-link.active,
.left-menu:not(.expanded) .nav-link[aria-current="page"] {
  box-shadow: inset 0 0 0 1px rgba(var(--slam-accent-rgb), 0.4);
}

.left-menu .collapse {
  background-color: rgba(0, 0, 0, 0.02);
}
[data-bs-theme="dark"] .left-menu .collapse {
  background-color: rgba(255, 255, 255, 0.03);
}

/* ----------------------------------------------------------------------------
   4) Dropdowns — recolor hardcoded blue active/hover states
   ---------------------------------------------------------------------------- */
.dropdown-menu {
  background-color: var(--slam-glass-bg-strong);
  -webkit-backdrop-filter: var(--slam-glass-blur);
  backdrop-filter: var(--slam-glass-blur);
  border: 1px solid var(--slam-glass-border);
  border-radius: var(--slam-radius-md);
  box-shadow: var(--slam-shadow-2), var(--slam-glass-highlight);
}

.dropdown-item:hover,
.dropdown-menu .dropdown-item:hover {
  background-color: var(--slam-surface-2);
}

.dropdown-item.active,
.dropdown-item:active,
.dropdown-menu .dropdown-item.active {
  background-color: var(--slam-accent);
  color: var(--slam-accent-contrast);
}

/* ----------------------------------------------------------------------------
   5) Toggle switch — accent when on
   ---------------------------------------------------------------------------- */
.toggle-input:checked + .toggle-slider {
  background-color: var(--slam-accent);
}
.toggle-input:focus + .toggle-slider {
  box-shadow: var(--slam-focus-ring);
}
.toggle-slider:hover {
  box-shadow: 0 0 8px rgba(var(--slam-accent-rgb), 0.35);
}

/* ----------------------------------------------------------------------------
   6) Drag affordances + starred rows — accent instead of legacy blue
   ---------------------------------------------------------------------------- */
.drag-placeholder {
  background: var(--slam-accent) !important;
}
.drag-placeholder-space {
  border-color: var(--slam-accent);
}
.drag-placeholder-space .placeholder-content {
  color: var(--slam-accent);
}
.starred-row .drag-handle:hover {
  color: var(--slam-accent);
}
.starred-row.dragging {
  background: var(--slam-accent-soft);
  box-shadow: 0 4px 16px 0 rgba(var(--slam-accent-rgb), 0.18);
}
.starred-row.placeholder {
  background: var(--slam-accent-soft);
  border-color: var(--slam-accent);
}

/* ----------------------------------------------------------------------------
   7) Weather widget + chat accents
   ---------------------------------------------------------------------------- */
.weather-nav-widget .btn-link:hover {
  color: var(--slam-accent);
}
.chat-header {
  background: var(--slam-accent);
}
.chat-input button {
  background: var(--slam-accent);
}
.ai-page-help-card button {
  background: var(--slam-accent);
}
.chat-messages > div > strong:first-child,
.chat-messages a {
  color: var(--slam-accent);
}

/* ----------------------------------------------------------------------------
   8) Breadcrumbs
   ---------------------------------------------------------------------------- */
.breadcrumb {
  --bs-breadcrumb-divider-color: var(--slam-text-muted);
  background: transparent;
}
.breadcrumb-item.active {
  color: var(--slam-text-muted);
}
.breadcrumb a {
  color: var(--slam-accent);
}

/* ----------------------------------------------------------------------------
   9) Page transition progress bar — on-brand gradient
   ---------------------------------------------------------------------------- */
#slamPageProgress {
  background: linear-gradient(90deg, var(--slam-accent) 0%, var(--slam-cyan) 100%) !important;
  box-shadow: 0 0 10px rgba(var(--slam-accent-rgb), 0.5) !important;
}