/* --------------------------------------------------------
   THEME VARIABLES (EXTENDED FOR FULL CONTROL)
--------------------------------------------------------- */
html.light {
  /* =========================================================
     BOOTSTRAP CORE — Neutral, predictable baseline
  ========================================================= */
  color-scheme: light;
  color: #0f172a;
  font-weight: 400;

  --bs-body-bg: #e9eaeb;
  --bs-body-color: #0f172a;
  --bs-border-color: rgba(15, 23, 42, 0.14);
  --bs-secondary-color: #475569;

  --bs-body-bg-rgb: 246, 248, 251;
  --bs-body-color-rgb: 15, 23, 42;

  /* =========================================================
     ACCENT — Aviation Blue (restrained, confident)
  ========================================================= */
  --accent: #1e40af;               /* deeper, more serious blue */
  --accent-strong: #1e3a8a;        /* intent / active */
  --accent-alt: #3b82f6;           /* secondary actions */
  --accent-soft: #eaf1ff;          /* selection / subtle fills */

  --glow: 0 0 12px rgba(30, 64, 175, 0.25);

  /* =========================================================
     BACKGROUNDS — Daylight Ops
  ========================================================= */
  --bg-body: #f6f8fb;
  --bg-surface: #ffffff;
  --bg-surface-hover: #eef3fb;

  --bg-navbar: rgba(246, 248, 251, 0.94);
  --bg-footer: #f1f4fa;

  --bg-panel-alt: #f3f6fc;
  --bg-image-card: #edf2fa;

  /* =========================================================
     TEXT — High legibility, no washout
  ========================================================= */
  --text-main: #0f172a;
  --text-muted: #475569;           /* FIXED: actually muted */
  --text-label: #1e3a8a;           /* metadata / headings */
  --text-subtle: #64748b;

  /* =========================================================
     LINKS — Calm authority, no neon
  ========================================================= */
  --link: var(--accent);
  --link-hover: var(--accent-strong);
  --link-muted: #475569;

  --link-underline: rgba(30, 64, 175, 0.3);
  --link-focus-ring: rgba(30, 64, 175, 0.45);

  /* =========================================================
     FOCUS / SELECTION
  ========================================================= */
  --bg-focus: #eaf1ff;

  /* =========================================================
     BORDERS / SHAPE — Crisp but not sharp
  ========================================================= */
  --border-soft: rgba(15, 23, 42, 0.12);
  --border-strong: rgba(30, 64, 175, 0.45);

  --radius: 12px;

  /* =========================================================
     SHADOWS — Paper elevation, modern
  ========================================================= */
  --shadow-soft: 0 4px 14px rgba(15, 23, 42, 0.08);
  --shadow-strong: 0 10px 26px rgba(15, 23, 42, 0.14);
  --shadow-hover: 0 12px 30px rgba(30, 64, 175, 0.18);

  /* =========================================================
     BADGES / CHIPS — Instrument labels
  ========================================================= */
  --badge-bg-start: #f1f4fa;
  --badge-bg-end: #e6edf9;
  --badge-border: rgba(30, 64, 175, 0.3);

  /* =========================================================
     PAGINATION / CONTROLS
  ========================================================= */
  --pagination-bg: #ffffff;
  --pagination-active-bg: var(--accent);
  --pagination-active-text: #ffffff;

  /* =========================================================
     SEMANTIC STATUS COLORS — Slightly muted
  ========================================================= */
  --success: #15803d;
  --warning: #d97706;
  --danger: #b91c1c;

  /* =========================================================
     BUTTONS — Professional, not pastel
  ========================================================= */
  --btn-surface: var(--accent);
  --btn-surface-hover: var(--accent-strong);
  --btn-text: #ffffff;
  --btn-outline-text: var(--accent);
  --btn-outline-border: rgba(30, 64, 175, 0.45);
}


html.dark {
  /* =========================================================
     BOOTSTRAP CORE (authoritative, predictable)
  ========================================================= */
  --bs-body-bg: #0b111a;
  --bs-body-color: #e6edf7;
  --bs-border-color: rgba(148, 163, 184, 0.18);
  --bs-secondary-color: #9aa7bd;

  --bs-body-bg-rgb: 11, 17, 26;
  --bs-body-color-rgb: 230, 237, 247;

  /* =========================================================
     ACCENTS — Aviation Blue (restrained, credible)
  ========================================================= */
  --accent: #4da3ff;
  --accent-strong: #1f7ae0;
  --accent-alt: #7cc7ff;
  --accent-soft: #1b2a3d;

  --glow: 0 0 16px rgba(77, 163, 255, 0.35);

  /* =========================================================
     BACKGROUNDS — Clear Hierarchy
  ========================================================= */
  --bg-body: #0b111a;          /* page background */
  --bg-surface: #121a26;       /* cards, tables */
  --bg-surface-hover: #182233; /* hover rows */

  --bg-navbar: rgba(11, 17, 26, 0.88);
  --bg-footer: #0e1622;

  --bg-panel-alt: #0f1724;
  --bg-image-card: #101826;
  --bs-list-group-action-hover-bg: #0b111a;

  /* =========================================================
     TEXT — Calm, Non-fatiguing
  ========================================================= */
  --text-main: #e6edf7;
  --text-muted: #9aa7bd;
  --text-label: #7fa6d9;
  --text-subtle: #7b8aa3;

  /* =========================================================
     LINKS — Clear but Controlled
  ========================================================= */
  --link: var(--accent-alt);
  --link-hover: var(--accent);
  --link-muted: #9aa7bd;

  --link-underline: rgba(124, 199, 255, 0.45);
  --link-focus-ring: rgba(77, 163, 255, 0.55);

  /* =========================================================
     BORDERS / SHAPE — Precise, Not Heavy
  ========================================================= */
  --border-soft: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(77, 163, 255, 0.45);

  --radius: 12px;

  /* =========================================================
     SHADOWS — Neutral Elevation
  ========================================================= */
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-strong: 0 10px 30px rgba(0, 0, 0, 0.65);
  --shadow-hover: 0 14px 34px rgba(77, 163, 255, 0.25);

  /* =========================================================
     BADGES / CHIPS — Instrument Panels
  ========================================================= */
  --badge-bg-start: #142033;
  --badge-bg-end: #0f1a2a;
  --badge-border: rgba(77, 163, 255, 0.35);

  /* =========================================================
     PAGINATION / CONTROLS
  ========================================================= */
  --pagination-bg: #101826;
  --pagination-active-bg: var(--accent);
  --pagination-active-text: #06121f;

   --btn-surface:var(--badge-bg-start);
   --btn-text:rgb(206, 206, 206);

}

html.future {
  /* =========================================================
     BOOTSTRAP CORE
  ========================================================= */
  --bs-body-bg: #101929;
  --bs-body-color: #e5edff;
  --bs-border-color: rgba(99, 179, 237, 0.18);
  --bs-secondary-color: #9fb3d1;

  --bs-body-bg-rgb: 6, 11, 20;
  --bs-body-color-rgb: 229, 237, 255;

  /* =========================================================
     ACCENTS — Electric Cyan / Vector Blue
  ========================================================= */
  --accent: #38bdf8;          /* electric cyan */
  --accent-strong: #0ea5e9;  /* focused action */
  --accent-alt: #22d3ee;     /* secondary glow */
  --accent-soft: rgb(26, 79, 102);

  --glow: 0 0 22px rgba(56, 191, 248, 0.199);

  /* =========================================================
     BACKGROUNDS — Deep Space / Glass
  ========================================================= */
  --bg-body: #14171b;
  --bg-surface: rgba(15, 23, 42, 0.65);
  --bg-surface-hover: rgba(30, 41, 59, 0.75);

  --bg-navbar: rgba(6, 11, 20, 0.82);
  --bg-footer: #050912;

  --bg-panel-alt: rgba(15, 23, 42, 0.85);
  --bg-image-card: rgba(10, 18, 32, 0.9);

  /* =========================================================
     TEXT — Cool, High-Clarity
  ========================================================= */
  --text-main: #e5edff;
  --text-muted: #9fb3d1;
  --text-label: #7dd3fc;
  --text-subtle: #7a8fb3;

  /* =========================================================
     LINKS
  ========================================================= */
  --link: #38bdf8;
  --link-hover: #22d3ee;
  --link-muted: #9fb3d1;

  --link-underline: rgba(56, 189, 248, 0.45);
  --link-focus-ring: rgba(56, 189, 248, 0.65);

  /* =========================================================
     BORDERS / SHAPE — Precision Geometry
  ========================================================= */
  --border-soft: rgba(99, 179, 237, 0.18);
  --border-strong: rgba(56, 189, 248, 0.65);

  --radius: 10px;

  /* =========================================================
     SHADOWS — Light Emission
  ========================================================= */
  --shadow-soft: 0 6px 20px rgba(6, 182, 212, 0.15);
  --shadow-strong: 0 14px 40px rgba(6, 182, 212, 0.25);
  --shadow-hover: 0 18px 46px rgba(56, 189, 248, 0.25);

  /* =========================================================
     BADGES / CHIPS — HUD Labels
  ========================================================= */
  --badge-bg-start: rgba(56, 189, 248, 0.18);
  --badge-bg-end: rgba(34, 211, 238, 0.12);
  --badge-border: rgba(56, 189, 248, 0.55);

  /* =========================================================
     PAGINATION / CONTROLS
  ========================================================= */
  --pagination-bg: rgba(15, 23, 42, 0.75);
  --pagination-active-bg: var(--accent);
  --pagination-active-text: #02131f;
}


/* --------------------------------------------------------
   BODY / BASE
--------------------------------------------------------- */
body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--bs-body-bg);
  color: var(--text-main);
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
}
/* --------------------------------------------------------
   NAVBAR
--------------------------------------------------------- */
.navbar {
  background: var(--bg-navbar);
  border-bottom: 1px solid var(--border-soft);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
}

.navbar-brand {
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.7px;
}

.navbar-nav .nav-link {
  color: var(--text-muted);
  transition: 0.2s ease;
}
.navbar-nav .nav-link:hover {
  color: var(--accent);
  transform: translateY(-1px);
}

/* --------------------------------------------------------
   MAIN CONTAINER
--------------------------------------------------------- */
main.container {
  border-radius: var(--radius);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft), var(--glow);
  margin-top: 2rem;
  padding: 1.6rem;
}

/* --------------------------------------------------------
   FOOTER
--------------------------------------------------------- */
footer {
  background: var(--bg-footer);
  color: var(--text-muted);
  border-top: 1px solid var(--border-soft);
}
footer a { color: var(--accent); }
footer a:hover { text-decoration: underline; }

/* --------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  padding: 0.5rem 0.95rem;
  border-radius: calc(var(--radius) - 4px);

  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.015em;

  color: var(--btn-text);
  background-color: var(--btn-surface);
  border: 1px solid var(--border-soft);

  box-shadow: var(--shadow-soft);
  text-decoration: none;
  white-space: nowrap;

  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

/* --------------------------------------------------------
   DATA LABELS & VALUES
--------------------------------------------------------- */
.meta-text    { color: var(--text-muted); font-size: 0.86rem; }
.data-label   { color: var(--text-label); text-transform: uppercase; font-size: 0.8rem; }
.data-value   { color: var(--text-main); font-size: 0.98rem; }

/* --------------------------------------------------------
   BADGES
--------------------------------------------------------- */
.badge-variant {
  background: linear-gradient(
    to right,
    var(--badge-bg-start),
    var(--badge-bg-end)
  );
  border: 1px solid var(--badge-border);
  color: var(--text-main);
  padding: 0.35rem 0.6rem;
  border-radius: 12px;
}

/* --------------------------------------------------------
   SEARCH INPUT
--------------------------------------------------------- */
.search-box { position: relative; }

.dropdown-loading {
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  color: var(--text-muted);
}

.dropdown-panel {
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.dropdown-panel .card:hover {
  background: var(--bg-surface-hover) !important;
}

/* --------------------------------------------------------
   PAGINATION
--------------------------------------------------------- */

.pagination .page-link {
  background: var(--pagination-bg) !important;
  border: 1px solid var(--border-strong);
  color: var(--text-main);
}

.pagination .page-item.active .page-link {
  background: var(--pagination-active-bg) !important;
  color: var(--pagination-active-text) !important;
  border-color: var(--accent-strong) !important;
}

/* --------------------------------------------------------
   IMAGE CARDS
--------------------------------------------------------- */

.image-card {
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  background: var(--bg-panel-alt);
}
.image-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.image-card img {
  opacity: 0;
  transition: opacity .35s ease-out;
}
.image-card img.loaded {
  opacity: 1;
}

/* --------------------------------------------------------
   SKELETON
--------------------------------------------------------- */
.skeleton {
  background: linear-gradient(
      110deg,
      #21242a 10%,
      #32353c 18%,
      #21242a 33%
  );
  animation: shimmer 1.1s linear infinite;
}

/* --------------------------------------------------------
   TITLES
--------------------------------------------------------- */
.card {
  background-color: var(--bg-surface);
  color: var(--text-main);

  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);

  box-shadow: var(--shadow-soft);
  transition:
    box-shadow 0.25s ease,
    transform 0.18s ease,
    border-color 0.25s ease;
  overflow: hidden;
}

.navbar {
  text-decoration: none;
  background-color: var(--bg-surface);
  color: var(--text-main);

  border-bottom: 1.5px solid var(--border-strong);

  box-shadow: var(--shadow-soft);
}

/* Hover = float + glossy glow */
.hover:hover {
  box-shadow:
    var(--shadow-hover),
    var(--glow);
  transform: translateY(-2px);
  border-color: var(--accent);
}

.section-title {
  font-size: 1rem;
  color: var(--text-main);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-subtitle {
  font-size: 0.85rem;
  color: var(--text-subtle);
  letter-spacing: 0.12em;
}

.fw-semibold {
  font-weight: 600 !important;
  color: var(--text-main);
  letter-spacing: 0.02em;
}

.card-header {
  background: var(--bg-surface-hover);
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-main);
  font-weight: 600;
}

.card-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-soft);
}

/* =========================================================
   TABLE REFINEMENT — BOOTSTRAP-EXTENDED (NO CUSTOM MARKUP)
========================================================= */

.table {
  --bs-table-bg: var(--bg-surface);
  --bs-table-striped-bg: var(--bg-surface-hover);
  --bs-table-hover-bg: rgba(0, 123, 255, 0.08);

  --bs-table-color: var(--text-main);
  --bs-table-striped-color: var(--text-main);
  --bs-table-hover-color: var(--text-main);

  --bs-table-border-color: var(--border-soft);

  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

/* Header */
.table thead th {
  background: linear-gradient(
    to bottom,
    var(--bg-surface-hover),
    var(--bg-surface)
  );
  color: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-strong);
  vertical-align: middle;
}

/* Cells */
.table td {
  vertical-align: middle;
  padding: 0.7rem 0.75rem;
  font-size: 0.9rem;
}

/* Row hover = subtle ops affordance */
.table tbody tr {
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.table tbody tr:hover {
  background-color: var(--bs-table-hover-bg);
}

/* Clickable rows feel clickable */
.table tbody tr[onclick],
.table tbody tr[data-href] {
  cursor: pointer;
}

/* Compact variant */
.table.table-sm td,
.table.table-sm th {
  padding: 0.45rem 0.6rem;
  font-size: 0.85rem;
}
/* ---------------------------------------------
   TAG / CHIP LINKS
--------------------------------------------- */
a {
  color: var(--link);
  text-decoration-color: var(--link-underline);
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;

  transition:
    color 0.15s ease,
    text-decoration-color 0.15s ease;
}

a:hover {
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
}

a.text-muted,
a.muted {
  color: var(--link-muted);
}

a:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg-body),
    0 0 0 4px var(--link-focus-ring);
}

/* ===============================
   RIGHT NAV DRAWER (THEMED)
================================ */

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 90vw;
  height: 100vh;

  background: var(--bg-panel-alt);
  color: var(--text-main);

  box-shadow: var(--shadow-strong);
  border-left: 1px solid var(--border-soft);

  transform: translateX(100%);
  transition: transform 0.3s ease;

  z-index: 1050;
  display: flex;
  flex-direction: column;
}

.nav-drawer.open {
  transform: translateX(0);
}

/* ===============================
   HEADER
================================ */

.drawer-header {
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-soft);
}

/* ===============================
   NAV CONTENT
================================ */

.drawer-nav {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ===============================
   LINKS
================================ */

.drawer-link {
  color: var(--text-main);
  text-decoration: none;
  font-weight: 500;
}

.drawer-link:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
}

/* ===============================
   BACKDROP
================================ */

.drawer-backdrop {
  position: fixed;
  inset: 0;

  background: rgba(var(--bs-body-bg-rgb), 0.65);
  backdrop-filter: blur(2px);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;

  z-index: 1040;
}

.drawer-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

/* Base drawer already exists as .nav-drawer */

.facet-drawer {
  z-index: 1055; /* above content, below modals */
}

/* Open state */
.nav-drawer.open {
  transform: translateX(0);
}

/* Prevent body scroll when drawer open */
body.drawer-open {
  overflow: hidden;
}

.list-group-item:hover, .list-group-item-action:hover {
   background: var(--accent-soft);
}

/* ---------------------------------------------
   CHIP / TAG — BASE
--------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  padding: 0.28rem 0.65rem;
  border-radius: 999px;

  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  color: var(--text-main);
  background: linear-gradient(
    to right,
    var(--badge-bg-start),
    var(--badge-bg-end)
  );

  border: 1px solid var(--badge-border);
  white-space: nowrap;

  box-shadow: var(--shadow-soft);
}

/* ---------------------------------------------
   CHIP — INTERACTIVE
--------------------------------------------- */
.chip-action {
  cursor: pointer;
  text-decoration: none;
  color: var(--text-main);

  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease;
}

.chip-action:hover {
  background: linear-gradient(
    to right,
    var(--accent-soft),
    var(--badge-bg-end)
  );

  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

.chip-action:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg-body),
    0 0 0 4px var(--link-focus-ring);
}

/* ---------------------------------------------
   BADGE — BASE (STATUS / FACT)
--------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;

  padding: 0.32rem 0.6rem;
  border-radius: 8px;

  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  background: linear-gradient(
    to bottom,
    var(--badge-bg-start),
    var(--badge-bg-end)
  );

  color: var(--text-main);
  border: 1px solid var(--badge-border);

  box-shadow: var(--shadow-soft);
  white-space: nowrap;
}

.hero-title {
  color: #fff;
  font-size: clamp(1.5rem, 5vw, 3.5rem);
  font-weight: 700;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.9),
    0 8px 24px rgba(0, 0, 0, 0.7);
}

hero-text {
   text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.9),
    0 8px 24px rgba(0, 0, 0, 0.7);
}

.breadcrumb-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

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

.nav-group-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
  margin-bottom: 0.5rem;
}

.drawer-link {
  display: block;
  padding: 0.4rem 0;
}


a.text-reset,
a.text-reset:hover,
a.text-reset:focus,
a.text-reset:active {
  color: inherit !important;
  text-decoration: none !important;
}

/* Breadcrumb links should not look like hyperlinks */
.breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.flash-float {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 1080; /* above navbars, below modals */
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: min(90vw, 360px);
  pointer-events: none; /* allow clicks through empty space */
}

.flash-float .alert {
  pointer-events: auto; /* but allow interaction with alerts */
  animation: flash-slide-in 0.25s ease-out;
}

@keyframes flash-slide-in {
  from {
    transform: translateX(12px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}


.sidebar { width: 250px; }

/* Offcanvas styling only */
#adminSidebar.offcanvas {
  background: var(--bg-main);
}

/* Force sidebar visible in desktop mode */
@media (min-width: 768px) {
  #adminSidebar {
    position: relative !important;
    transform: none !important;
    visibility: visible !important;
  }
}

/* Mobile drawer behavior */
@media (max-width: 767.98px) {
  #adminSidebar {
    width: 250px;
    position: fixed !important;
    inset: 0 auto 0 0;
  }

  .admin-body > .d-flex {
    overflow-x: hidden;
  }
}

.offcanvas-backdrop {
  background: rgba(0,0,0,.6);
}

/* Sidebar UI */
.sidebar-nav { padding-left: 0; }
.nav-section + .nav-section { margin-top: .25rem; }

.nav-heading {
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-subtle);
  padding:.4rem .5rem;
  margin-bottom:.35rem;
}

.sidebar-group {
  padding-left:.25rem;
  border-left:1px solid var(--border-soft);
  margin-left:.35rem;
}

.sidebar .nav-link {
  position:relative;
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.55rem .75rem;
  border-radius:.6rem;
  font-weight:500;
  line-height:1.1;
  transition:.15s;
  color: var(--text-main);
}

.sidebar .nav-link::before {
  content:"";
  position:absolute;
  left:-.25rem;
  top:20%;
  bottom:20%;
  width:3px;
  border-radius:2px;
  background:transparent;
}

.sidebar .nav-link:hover { background:var(--bg-surface-hover); transform:translateX(1px); }

.sidebar .nav-link.active {
  background:linear-gradient(to right,var(--accent-soft),transparent);
  font-weight:600;
}

.sidebar .nav-link.active::before {
  background:var(--accent);
  box-shadow:var(--glow);
}

.nav-icon {
  width:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.85;
}

.nav-icon i { font-size:1rem; }

/* Prevent flex overflow bugs */
html, body { width: 100%; overflow-x: hidden; }
.container-fluid, .content { max-width:100vw; overflow-x:hidden; }
.d-flex > .flex-grow-1 { min-width:0; }
.flex-grow-1 { min-width:0; }
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;

}

.sidebar-overlay.show {
  opacity: 1;
  pointer-events: all;
}

.accordion-icon {
  transition: transform 0.2s ease;
}

button[aria-expanded="true"] .accordion-icon {
  transform: rotate(180deg);
}