/* ============================================================================
   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);
  /* Feeding the rail's colour through the legacy variable is deliberate.
     app-shell.css paints the sidebar from var(--sidebar-bg) in several places,
     including mobile rules that use !important, so re-pointing the variable
     recolours all of them at once instead of us chasing each rule with an
     override of our own. */
  --sidebar-bg: var(--slam-nav-bg);
  --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-nav-bg);
  --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
   ----------------------------------------------------------------------------
   Opaque rather than frosted. Against the navy rail a translucent header read
   as a smudge over whatever happened to be scrolling underneath it, and the
   blur cost a full-width compositor layer on every page.

   The height stays 56px on purpose: .left-menu's top/height and #main-content's
   padding-top are both written against that number in app-shell.css, so
   changing it here would silently misalign the shell.
   ---------------------------------------------------------------------------- */
.top-nav {
  background: var(--slam-surface-1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--slam-border);
  box-shadow: var(--slam-shadow-1);
}

/* One hit-area for every icon-only control in the header, whichever cluster it
   lives in. These are otherwise a mix of bare <a>, .btn-link and custom classes
   that each landed on their own padding, so the row never sat on a rhythm. */
.top-nav .nav-critical > a,
.top-nav .theme-toggle,
.top-nav .nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--slam-radius-md);
  border: none;
  background: transparent;
  color: var(--slam-text-muted);
  transition: background-color var(--slam-dur-fast) var(--slam-ease),
    color var(--slam-dur-fast) var(--slam-ease);
}

.top-nav .nav-critical > a:hover,
.top-nav .theme-toggle:hover,
.top-nav .nav-icon-btn:hover {
  background: var(--slam-surface-2);
  color: var(--slam-text-strong);
}

/* The alert icons carry their meaning in colour (requisitions blue, tags amber,
   muster red), so the shared hit-area must not flatten them. Bootstrap's text
   utilities are !important and win on the <i>; this keeps the hover tint from
   fighting them on the way past. */
.top-nav .nav-critical > a:hover > i {
  filter: brightness(1.08);
}

.top-nav .home-btn {
  border-radius: var(--slam-radius-pill, 999px);
  padding: 6px 12px;
  color: var(--slam-text);
}

.top-nav .home-btn:hover {
  background: var(--slam-surface-2);
  border-radius: var(--slam-radius-pill, 999px);
}

/* Search: a soft pill on the header surface rather than a bordered white box,
   which is what makes it read as one element with the icon buttons beside it. */
.helper-omnisearch-input,
html[data-theme="dark"] .helper-omnisearch-input {
  border-radius: var(--slam-radius-pill, 999px);
  border: 1px solid var(--slam-border);
  background: var(--slam-surface-2);
  color: var(--slam-text);
  padding: 7px 14px 7px 34px;
}

.helper-omnisearch-input:focus,
html[data-theme="dark"] .helper-omnisearch-input:focus {
  background: var(--slam-surface-1);
  border-color: var(--slam-accent);
  box-shadow: var(--slam-focus-ring);
}

.helper-omnisearch-icon,
html[data-theme="dark"] .helper-omnisearch-icon {
  color: var(--slam-text-muted);
  left: 13px;
}

.global-guide-me-btn {
  border-radius: var(--slam-radius-pill, 999px);
}

/* User menu: an initials disc instead of a generic person glyph, so the account
   in use is identifiable at a glance rather than by reading the name. */
.nav-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--slam-accent);
  color: var(--slam-accent-contrast);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.top-nav #userMenu {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 4px 10px 4px 4px;
  border-radius: var(--slam-radius-pill, 999px);
  color: var(--slam-text);
  text-decoration: none;
}

.top-nav #userMenu:hover {
  background: var(--slam-surface-2);
}

/* ----------------------------------------------------------------------------
   3) Left sidebar / icon rail — navy command rail
   ----------------------------------------------------------------------------
   The rail is an opaque navy in both themes. Everything inside it therefore has
   to be coloured from the --slam-nav-* tokens rather than the page text tokens:
   a rule that inherits --slam-text or --muted-text renders near-black slate on
   navy in light mode and disappears.

   The dark-theme selectors below are not redundant. custom.css ships
   `html[data-theme="dark"] .left-menu { background: var(--darkened-bg) }` at
   two-class specificity, which outranks a bare `.left-menu`; matching that
   specificity from this later file is what lets the navy win in dark mode.
   ---------------------------------------------------------------------------- */
.left-menu,
#icon-nav,
html[data-theme="dark"] .left-menu,
html[data-theme="dark"] #icon-nav {
  background: var(--slam-nav-bg);
  /* No backdrop blur here: the rail is opaque, so blurring only costs a
     compositor layer the length of the viewport. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-right: 1px solid var(--slam-nav-border);
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.left-menu::-webkit-scrollbar {
  width: 8px;
}
.left-menu::-webkit-scrollbar-track {
  background: transparent;
}
.left-menu::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}
.left-menu:hover::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
}

.left-menu .nav-link,
html[data-theme="dark"] .left-menu .nav-link {
  color: var(--slam-nav-text);
  /* The rail is scanned, not read. Semibold labels hold their weight against
     the navy and keep the destination legible at a glance; the current item
     goes one step heavier again below. */
  font-weight: 600;
  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);
}

/* Last-layer wrap for expanded nav labels. app-shell.css still has nowrap +
   ellipsis on .left-menu / .nav-link (needed for the collapsed icon rail);
   those inherit into HSE submenu rows and cut "Documents & Policies" to
   "Documents & Polic…". This file loads after app-shell, so these rules are
   the ones the browser actually paints. */
.left-menu.expanded,
.left-menu.expanded .nav-link,
.left-menu.expanded .nav-subhead,
.left-menu.expanded .nav-header {
  white-space: normal;
}

.left-menu.expanded .nav-link {
  overflow: visible;
  text-overflow: unset;
  align-items: flex-start;
}

.left-menu.expanded .nav-link span:not(.badge),
.left-menu.expanded .nav-subhead span,
.left-menu.expanded .nav-header span {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

/* Icons sit a step back from the label so the rail scans as words, not glyphs;
   they come forward with the row on hover and when the row is current. */
.left-menu .nav-link > i {
  color: var(--slam-nav-muted);
  transition: color var(--slam-dur-fast) var(--slam-ease);
}

.left-menu .nav-link:hover,
html[data-theme="dark"] .left-menu .nav-link:hover {
  background: var(--slam-nav-hover-bg);
  color: var(--slam-nav-text-strong);
}

.left-menu .nav-link:hover > i {
  color: var(--slam-nav-text-strong);
}

/* Active item: solid brand fill. 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,
html[data-theme="dark"] .left-menu .nav-link.active,
html[data-theme="dark"] .left-menu .nav-link[aria-current="page"] {
  background: var(--slam-nav-active-bg);
  color: var(--slam-nav-active-text);
  font-weight: 700;
  box-shadow: none;
}

.left-menu .nav-link.active > i,
.left-menu .nav-link[aria-current="page"] > i,
.left-menu .nav-link.is-active > i {
  color: var(--slam-nav-active-text);
}

.left-menu:not(.expanded) .nav-link.active,
.left-menu:not(.expanded) .nav-link[aria-current="page"] {
  box-shadow: none;
}

/* Submenus are the point of the lighter step: an open group reads as one block
   of related links instead of the list simply getting longer. The rounded slab
   plus the accent spine on the left is what draws the section boundary. */
.left-menu .collapse,
[data-bs-theme="dark"] .left-menu .collapse,
html[data-theme="dark"] .left-menu .collapse {
  background-color: var(--slam-nav-surface);
  border-radius: var(--slam-radius-md);
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.16);
  margin: 2px 6px 6px;
  padding: 4px 0;
}

/* A submenu inside a submenu takes one more step up, so depth stays legible
   without inventing a third hardcoded colour. */
.left-menu .collapse .collapse,
html[data-theme="dark"] .left-menu .collapse .collapse {
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.06)
  );
}

/* Text that is not a link still has to survive on navy. These rules inherit
   --text-color / --muted-text by default, which are page-surface colours. */
.left-menu .nav-subhead,
.left-menu .nav-header,
.left-menu .toggle-label,
.left-menu .dropdown-header {
  color: var(--slam-nav-muted);
}

.left-menu .nav-header {
  color: var(--slam-nav-text);
}

.left-menu hr,
.left-menu .dropdown-divider {
  border-color: var(--slam-nav-border);
  opacity: 1;
}

.left-menu .starred-row:hover {
  background: var(--slam-nav-hover-bg);
  border-radius: var(--slam-radius-sm);
}

.left-menu .drag-handle {
  color: var(--slam-nav-muted);
}

/* ----------------------------------------------------------------------------
   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,
.dropdown-item-form .dropdown-item.active {
  background-color: var(--slam-accent) !important;
  color: var(--slam-accent-contrast) !important;
  font-weight: 700;
}

/* ----------------------------------------------------------------------------
   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;
}