/* ╔══════════════════════════════════════════════════════════════╗
   ║  ANetBBS COMMAND DECK Theme                                  ║
   ║  Mission-control instrument panel: a fixed icon rail instead  ║
   ║  of a top navbar, cool structural blue + warm amber status    ║
   ║  lights, dense flat surfaces. The one theme that changes the  ║
   ║  page SHAPE, not just its colors.                             ║
   ╚══════════════════════════════════════════════════════════════╝

   Architecture note (read before editing): this file does NOT
   duplicate base.html's nav markup. It restyles the exact same
   <nav class="navbar">/<ul class="navbar-nav">/dropdown structure
   every other theme uses, repositioned via CSS alone. The only
   markup this theme depends on: `data-bs-display="static"` added to
   each dropdown toggle in base.html (harmless no-op for every other
   theme — it only matters once this CSS also repositions the menu),
   and a small additive mobile bottom-tab-bar block, both gated behind
   this same theme being active. See docs/08-themes.md.
*/

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --cd-bg:          #14161c;
  --cd-bg-dark:     #0b0c10;
  --cd-card:        #1a1d24;
  --cd-input:       #0f1116;
  --cd-border:      #2a2e38;
  --cd-text:        #e8eaf0;
  --cd-text-muted:  #9aa2b1;
  --cd-blue:        #4da3ff;
  --cd-blue-dark:   #2f86e0;
  --cd-amber:       #ffb020;
  --cd-green:       #3ddc84;
  --cd-rail-w:       72px;
  --cd-rail-w-open:  232px;
  --cd-drawer-w:     280px;
}

/* ─────────────────────────────────────────
   TYPE
───────────────────────────────────────── */
body {
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--cd-bg) !important;
  /* Blueprint/instrument-panel grid texture — faint, not decorative
     noise. This plus the panel treatment below is what carries the
     theme's "completely different, not just recolored" bar into the
     content area itself, not just the rail (real feedback from a
     live Pi3 screenshot: the first pass only changed the nav's shape
     and left every card/page looking like stock Bootstrap in a new
     color). Fixed (not scrolling) so it reads as the room's own
     backdrop rather than part of the page content. */
  background-image:
    linear-gradient(rgba(77, 163, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 163, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  background-attachment: fixed;
}
h1, h2, h3, h4, h5, h6, .navbar-brand {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* Data readouts — stats, counts, badges, timestamps — get the mono
   treatment, reinforcing the instrument-panel feel. */
.badge, .vote-score, table td, table th, code, .text-muted small,
small.text-muted {
  font-family: 'IBM Plex Mono', 'Consolas', monospace;
}
/* A bold number directly inside card text (every "Label: N" stat row
   across the app's own templates already marks the number with
   <strong>) reads as a real instrument-panel readout instead of
   plain bold text — bigger, mono, accent-colored. Scoped to card
   bodies only so this never touches post/message body text, which
   also uses <strong> for ordinary emphasis. */
.card-body strong, .list-group-item strong {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--cd-blue);
  font-size: 1.05em;
}

/* ─────────────────────────────────────────
   SURFACES — bracketed instrument panels, not flat Bootstrap cards

   Real feedback from a second live Pi3 comparison against Jerry's own
   production theme, side by side: corner brackets + a faint grid
   texture read as decoration on an otherwise identical card stack —
   same uniform height, same flat single-tone fill, same "one accent
   color used sparingly" formula every dark theme on this app already
   has. This pass pushes much harder on things a decorated Bootstrap
   card genuinely can't do: a diagonal two-tone gradient fill per
   card, an alternating blue/amber accent rhythm (amber was built into
   the palette but barely appeared anywhere), a hover-lift + glow
   interaction, and a complete rebuild of the hero banner (shared
   markup every theme reskins identically — the single biggest visual
   "sameness" source on the page) into an actual glowing gradient
   banner instead of a centered logo over a thin line.
───────────────────────────────────────── */
.card {
  background: linear-gradient(145deg, var(--cd-card) 0%, #14161b 100%);
  border: 1px solid var(--cd-border);
  border-radius: 3px;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03),
              0 4px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease,
              border-color 0.15s ease;
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--cd-blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
              0 10px 28px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(77, 163, 255, 0.25);
}
/* HUD-style corner brackets, alternating blue/amber per card in
   document order — a real two-tone rhythm instead of one accent
   color used once in a while. nth-of-type is safe here: it just
   counts sibling .card elements, no markup/template changes. */
.card::before, .card::after {
  content: '';
  position: absolute;
  width: 11px; height: 11px;
  border: 2px solid var(--cd-blue);
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.card:nth-of-type(even)::before, .card:nth-of-type(even)::after {
  border-color: var(--cd-amber);
}
.card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.card:hover::before, .card:hover::after { opacity: 1; }
.card-header {
  background: var(--cd-bg-dark);
  border-bottom: 1px solid var(--cd-border);
  border-left: 3px solid var(--cd-blue);
  color: var(--cd-text);
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.card:nth-of-type(even) .card-header { border-left-color: var(--cd-amber); }
.container {
  background: transparent;
  border: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--cd-blue) 0%, var(--cd-blue-dark) 100%);
  border-color: var(--cd-blue);
  color: #06111f;
  font-weight: 700;
  border-radius: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  box-shadow: 0 0 0 rgba(77, 163, 255, 0);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--cd-blue-dark) 0%, var(--cd-blue) 100%);
  border-color: var(--cd-blue-dark);
  box-shadow: 0 0 16px rgba(77, 163, 255, 0.55);
  transform: translateY(-1px);
}
.form-control, .form-select {
  background: var(--cd-input);
  border: 1px solid var(--cd-border);
  border-radius: 2px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--cd-blue);
  box-shadow: 0 0 0 0.2rem rgba(77, 163, 255, 0.18);
}
a { color: var(--cd-blue); }
a:hover { color: var(--cd-blue-dark); }

::selection { background: var(--cd-blue); color: var(--cd-bg-dark); }

/* A small, easy-to-miss polish signal most dark-mode apps on the
   market bother with and most hand-rolled themes don't. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cd-bg-dark); }
::-webkit-scrollbar-thumb {
  background: var(--cd-border);
  border-radius: 5px;
  border: 2px solid var(--cd-bg-dark);
}
::-webkit-scrollbar-thumb:hover { background: var(--cd-blue); }

/* Status-light badges instead of flat pills — small glowing dots. */
.navbar .badge {
  background: var(--cd-amber) !important;
  color: var(--cd-bg-dark) !important;
  box-shadow: 0 0 6px var(--cd-amber);
  font-weight: 600;
}

/* ─────────────────────────────────────────
   HERO — a real glowing gradient banner, not a centered logo over a
   thin line (the exact same .bbs-header markup every other theme
   reskins identically, which is why it was the single biggest
   remaining "looks the same" culprit).
───────────────────────────────────────── */
.bbs-header {
  position: relative;
  border-bottom: none;
  margin: -24px -24px 24px -24px;
  padding: 44px 24px 36px;
  background:
    radial-gradient(ellipse 60% 100% at 50% 0%, rgba(77, 163, 255, 0.16), transparent 70%),
    linear-gradient(180deg, var(--cd-bg-dark) 0%, var(--cd-bg) 100%);
  border-bottom: 1px solid var(--cd-border);
  overflow: hidden;
}
/* Thin animated scan line sweeping the banner — subtle, slow, reads
   as "live system", not a gimmick flourish. Respects reduced-motion. */
.bbs-header::before {
  content: '';
  position: absolute;
  top: 0; left: -30%;
  width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(77, 163, 255, 0.07), transparent);
  animation: cd-scan 7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bbs-header::before { animation: none; display: none; }
}
@keyframes cd-scan {
  0%   { left: -30%; }
  100% { left: 130%; }
}
.bbs-header::after {
  content: '';
  display: block;
  margin: 18px auto 0;
  width: min(420px, 70%);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cd-blue), var(--cd-amber), transparent);
  position: relative;
}
.bbs-header h1 {
  font-size: 2.6rem;
  text-shadow: 0 0 24px rgba(77, 163, 255, 0.6);
  position: relative;
}
.bbs-header p {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--cd-text-muted);
}
/* Real contrast bug found live: some pages (e.g. Admin -> Add-ons)
   put a plain .btn-outline-secondary inside .bbs-header, which is
   transparent by design everywhere else on the page -- but sitting
   directly in this banner's own radial glow, that transparency let
   the glow wash out behind the light button text, reading as a pale,
   hard-to-read patch rather than low-contrast CSS values on paper.
   Give any button inside the hero a solid dark backing so it's never
   at the mercy of whatever's glowing behind it. */
.bbs-header .btn {
  background: var(--cd-bg-dark);
}
.bbs-header .btn-primary {
  background: linear-gradient(135deg, var(--cd-blue) 0%, var(--cd-blue-dark) 100%);
}

/* Quick-link style lists ("→ Browse Boards" etc.) get mono treatment
   and a tighter technical rhythm instead of plain stacked links. */
.card-body a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.92rem;
}

/* ─────────────────────────────────────────
   DESKTOP RAIL (>=992px) — the core of the theme
───────────────────────────────────────── */
@media (min-width: 992px) {
  body { padding-left: var(--cd-rail-w); }

  .navbar.navbar-expand-lg {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--cd-rail-w);
    height: 100vh;
    background: var(--cd-bg-dark) !important;
    border-bottom: none;
    border-right: 1px solid var(--cd-border);
    z-index: 1040;
    /* No overflow:hidden/auto here on purpose — either one clips an
       absolutely-positioned descendant that extends past this box,
       which is exactly what the flyout submenus below do (left:100%
       puts them outside the rail's own width). Confirmed live via a
       real screenshot: the flyout silently rendered with zero visible
       pixels until this was removed. */
    transition: width 0.18s ease;
  }
  .navbar.navbar-expand-lg:hover,
  .navbar.navbar-expand-lg:focus-within {
    width: var(--cd-rail-w-open);
  }

  .navbar .container-fluid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    padding: 0;
  }
  .navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 0 18px 22px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    border-bottom: 1px solid var(--cd-border);
    font-size: 0;
  }
  .navbar .navbar-brand i.bi {
    font-size: 1.3rem;
    flex: 0 0 auto;
  }
  .navbar.navbar-expand-lg:hover .navbar-brand,
  .navbar.navbar-expand-lg:focus-within .navbar-brand {
    font-size: 1.05rem;
  }
  .navbar .navbar-toggler { display: none; }

  .navbar .navbar-collapse {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 10px 0;
  }
  /* Right-hand group (presence/badges/account) pins to the bottom of
     the rail via flex ordering — no markup/DOM reorder needed. */
  .navbar .navbar-collapse > ul.navbar-nav:last-child {
    margin-top: auto;
    border-top: 1px solid var(--cd-border);
    padding-top: 8px;
  }

  .navbar .navbar-nav { flex-direction: column; width: 100%; }
  .navbar .nav-item { position: relative; width: 100%; }
  .navbar .nav-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 0 11px 22px;
    white-space: nowrap;
    border-left: 3px solid transparent;
  }
  .navbar .nav-link:hover,
  .navbar .nav-link:focus {
    background: rgba(77, 163, 255, 0.08);
    border-left-color: var(--cd-blue);
  }
  /* Icon stays a fixed, absolute size (rem, not em) so it survives
     the label being shrunk to font-size:0 below — this is how the
     rail shows icon-only when collapsed without touching markup to
     split icon/label into separate elements. */
  .navbar .nav-link i.bi {
    font-size: 1.2rem;
    flex: 0 0 auto;
    width: 1.2rem;
    text-align: center;
  }
  /* Label text is a bare text node after the icon in the existing
     markup — collapse it via font-size:0 on the link when the rail
     is collapsed, restored to normal on hover/focus-within (the same
     trigger that widens the rail), so the label reappears exactly
     when there's room to read it. */
  .navbar .nav-link {
    font-size: 0;
  }
  .navbar.navbar-expand-lg:hover .nav-link,
  .navbar.navbar-expand-lg:focus-within .nav-link {
    font-size: 0.92rem;
  }
  .navbar .nav-link .badge { font-size: 0.7rem; }

  .navbar .dropdown-toggle::after { display: none; }

  /* Flyout submenus to the RIGHT of the rail. Requires
     data-bs-display="static" on the toggle (see base.html) so
     Bootstrap skips Popper's own inline-transform positioning and
     lets this plain CSS control placement instead. */
  .navbar .dropdown-menu {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    right: auto !important;
    transform: none !important;
    margin-left: 6px;
    min-width: 230px;
    background: var(--cd-bg-dark);
    border: 1px solid var(--cd-blue);
    border-radius: 4px;
  }
  .navbar .dropdown-menu-end {
    left: 100% !important;
    right: auto !important;
  }
  /* Real bug found live (Pi3 screenshot, 2026-10-06): the Account
     dropdown lives in the bottom-pinned group, so top:0 above opens
     the flyout DOWNWARD from near the bottom of the viewport — with
     8 items (View/Edit Profile, Themes, Password, Block List,
     Notification Settings, Export Data, Logout) it ran off the
     bottom of the screen, below "Edit Profile", with no way to reach
     the rest. Anchor this one group's flyout to its own BOTTOM edge
     instead, so it grows upward into the room that's actually
     available above a trigger sitting near the bottom of the rail. */
  .navbar .navbar-collapse > ul.navbar-nav:last-child .dropdown-menu {
    top: auto !important;
    bottom: 0 !important;
  }
  .navbar .dropdown-item {
    color: var(--cd-text) !important;
    font-size: 0.9rem;
    padding: 8px 14px;
  }
  .navbar .dropdown-item:hover {
    background: rgba(77, 163, 255, 0.12) !important;
  }

  /* Search bar — a direct sibling of .navbar in base.html's own DOM
     order, selected structurally (no new class needed, and immune to
     any other unrelated .bg-dark element elsewhere on the page). */
  .navbar.navbar-expand-lg + .bg-dark.border-bottom {
    margin-left: var(--cd-rail-w);
    background: var(--cd-bg-dark) !important;
    border-bottom: 1px solid var(--cd-border) !important;
  }

  /* Main content + footer — both direct children of <body> in
     base.html, selected via the child combinator so nested
     .container usage deeper in page content (common throughout the
     app's own templates) is never affected. Breaks out of Bootstrap's
     own centered/max-width .container look on purpose — a bounded
     column of cards floating in empty space reads exactly like stock
     Bootstrap with new colors; a dashboard that actually uses the
     room next to the rail is the whole point of this theme. */
  body > .container,
  body > .footer {
    margin-left: calc(var(--cd-rail-w) + 20px);
    margin-right: 20px;
    max-width: none;
    width: auto;
  }
}

/* ─────────────────────────────────────────
   MOVABLE RAIL — right/top/bottom variants of the desktop layout
   above, which remains the default ("left") behavior. Each block only
   overrides what's actually different for that position; everything
   not mentioned here falls through to the left-rail rules above
   unchanged, since an attribute-scoped selector only wins the cascade
   for the specific properties it sets.

   User picks this at Profile -> Edit (nav_position), rendered as
   body[data-nav-position="..."] in base.html -- inert for every other
   theme, which never references this attribute at all.
───────────────────────────────────────── */
@media (min-width: 992px) {
  /* ---- RIGHT: a straight mirror of left ---- */
  body[data-nav-position="right"] { padding-left: 0; padding-right: var(--cd-rail-w); }
  body[data-nav-position="right"] .navbar.navbar-expand-lg {
    left: auto; right: 0;
    border-right: none;
    border-left: 1px solid var(--cd-border);
  }
  body[data-nav-position="right"] .navbar .dropdown-menu {
    left: auto !important;
    right: 100% !important;
    margin-left: 0;
    margin-right: 6px;
  }
  body[data-nav-position="right"] .navbar .dropdown-menu-end {
    left: auto !important;
    right: 100% !important;
  }
  body[data-nav-position="right"] .navbar.navbar-expand-lg + .bg-dark.border-bottom {
    margin-left: 0;
    margin-right: var(--cd-rail-w);
  }
  body[data-nav-position="right"] body > .container,
  body[data-nav-position="right"] body > .footer {
    margin-left: 20px;
    margin-right: calc(var(--cd-rail-w) + 20px);
  }

  /* ---- TOP / BOTTOM shared shape: a horizontal bar instead of a
     vertical rail. Enough width is naturally available that there's
     no need for the icon-only-collapsed/hover-to-expand trick the
     vertical rail uses -- labels just stay visible, closer to a
     traditional navbar but still in Command Deck's own visual
     language (same panel/glow/mono treatment everywhere else). ---- */
  body[data-nav-position="top"] .navbar.navbar-expand-lg,
  body[data-nav-position="bottom"] .navbar.navbar-expand-lg {
    left: 0; right: 0;
    width: auto;
    height: 64px;
    border-right: none;
  }
  body[data-nav-position="top"] .navbar.navbar-expand-lg:hover,
  body[data-nav-position="top"] .navbar.navbar-expand-lg:focus-within,
  body[data-nav-position="bottom"] .navbar.navbar-expand-lg:hover,
  body[data-nav-position="bottom"] .navbar.navbar-expand-lg:focus-within {
    width: auto; /* never grows -- there's no collapsed state to expand from */
  }
  body[data-nav-position="top"] .navbar .container-fluid,
  body[data-nav-position="bottom"] .navbar .container-fluid {
    flex-direction: row;
    align-items: stretch;
  }
  body[data-nav-position="top"] .navbar .navbar-brand,
  body[data-nav-position="bottom"] .navbar .navbar-brand {
    font-size: 1.05rem;
    border-bottom: none;
    border-right: 1px solid var(--cd-border);
    padding: 0 18px;
  }
  body[data-nav-position="top"] .navbar .navbar-collapse,
  body[data-nav-position="bottom"] .navbar .navbar-collapse {
    flex-direction: row;
    padding: 0 10px;
  }
  /* Bootstrap's own .me-auto on the first <ul> (already in the
     markup) pushes the second group to the far end of a horizontal
     row on its own -- the vertical rail's margin-top:auto trick was
     only needed for a column layout, so it's explicitly undone here. */
  body[data-nav-position="top"] .navbar .navbar-collapse > ul.navbar-nav:last-child,
  body[data-nav-position="bottom"] .navbar .navbar-collapse > ul.navbar-nav:last-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
  }
  body[data-nav-position="top"] .navbar .navbar-nav,
  body[data-nav-position="bottom"] .navbar .navbar-nav {
    flex-direction: row;
    align-items: center;
    width: auto;
  }
  body[data-nav-position="top"] .navbar .nav-link,
  body[data-nav-position="bottom"] .navbar .nav-link {
    padding: 0 14px;
    font-size: 0.92rem; /* always-visible labels -- no collapsed state */
    border-left: none;
    border-bottom: 3px solid transparent;
    height: 64px;
  }
  body[data-nav-position="top"] .navbar .nav-link:hover,
  body[data-nav-position="bottom"] .navbar .nav-link:hover {
    border-left-color: transparent;
    border-bottom-color: var(--cd-blue);
  }

  /* ---- TOP specifically ---- */
  body[data-nav-position="top"] { padding-left: 0; padding-top: 64px; }
  body[data-nav-position="top"] .navbar.navbar-expand-lg { top: 0; bottom: auto; border-bottom: 1px solid var(--cd-border); }
  body[data-nav-position="top"] .navbar .dropdown-menu {
    top: 100% !important; bottom: auto !important;
    left: 0 !important; right: auto !important;
    margin-left: 0; margin-top: 6px;
  }
  body[data-nav-position="top"] .navbar .dropdown-menu-end { left: auto !important; right: 0 !important; }
  body[data-nav-position="top"] .navbar.navbar-expand-lg + .bg-dark.border-bottom { margin-left: 0; }
  body[data-nav-position="top"] body > .container,
  body[data-nav-position="top"] body > .footer { margin-left: 20px; margin-right: 20px; }
  /* Real sysop screenshot (2026-10-09): the vertical rail's own
     bottom-pinned-account-group rule just above this media query
     (.navbar .navbar-collapse > ul.navbar-nav:last-child .dropdown-menu,
     "anchor to bottom edge, grow upward" -- needed there since that
     group sits at the bottom of a vertical list) has 5 class-level
     selectors to this block's own .navbar .dropdown-menu override's 3,
     so it was STILL winning the cascade here despite coming first in
     the file -- !important only breaks ties on EQUAL specificity, it
     doesn't override specificity itself. With the top bar's trigger
     only ~64px tall near the very top of the viewport, "grow upward
     from bottom:0" pushed every item except the bottommost ("Logout")
     off-screen above y=0. Needs its own equally-specific override. */
  body[data-nav-position="top"] .navbar .navbar-collapse > ul.navbar-nav:last-child .dropdown-menu {
    top: 100% !important; bottom: auto !important;
  }

  /* ---- BOTTOM specifically — dropdowns must open upward; there's no
     room below a bar pinned to the viewport's own bottom edge. ---- */
  body[data-nav-position="bottom"] { padding-left: 0; padding-bottom: 64px; }
  body[data-nav-position="bottom"] .navbar.navbar-expand-lg { bottom: 0; top: auto; border-top: 1px solid var(--cd-border); }
  body[data-nav-position="bottom"] .navbar .dropdown-menu {
    bottom: 100% !important; top: auto !important;
    left: 0 !important; right: auto !important;
    margin-left: 0; margin-bottom: 6px;
  }
  body[data-nav-position="bottom"] .navbar .dropdown-menu-end { left: auto !important; right: 0 !important; }
  body[data-nav-position="bottom"] .navbar.navbar-expand-lg + .bg-dark.border-bottom { margin-left: 0; }
  body[data-nav-position="bottom"] body > .container,
  body[data-nav-position="bottom"] body > .footer { margin-left: 20px; margin-right: 20px; }
  /* Same specificity fix as TOP above -- here the account group's
     bottom:0 anchor doesn't push it fully off-screen (the bar itself
     is already pinned to the viewport bottom), but it still overlaps
     the trigger row instead of sitting cleanly above it. */
  body[data-nav-position="bottom"] .navbar .navbar-collapse > ul.navbar-nav:last-child .dropdown-menu {
    bottom: 100% !important; top: auto !important;
  }
}

/* ─────────────────────────────────────────
   MOBILE DRAWER (<992px) — restyle Bootstrap's existing
   hamburger-collapse as a slide-in panel instead of inline drop-down.
   Zero new JS: same .show class Bootstrap's bundle already toggles.
───────────────────────────────────────── */
@media (max-width: 991.98px) {
  .navbar .navbar-collapse {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: var(--cd-drawer-w);
    max-width: 85vw;
    background: var(--cd-bg-dark);
    border-right: 1px solid var(--cd-blue);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
    padding: 16px 0;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 1045;
  }
  .navbar .navbar-collapse.show {
    transform: translateX(0);
  }
  .navbar .nav-link { padding: 12px 18px; }
  .navbar .dropdown-menu {
    background: var(--cd-bg);
    border: 1px solid var(--cd-border);
    margin: 0 18px 8px 18px;
    width: calc(100% - 36px);
  }
}

/* ─────────────────────────────────────────
   PHONE BOTTOM TAB BAR (<=768px) — new, small, additive markup in
   base.html (#cdMobileTabbar), gated to this theme only. Gives the
   5 most-reached-for destinations real thumb access instead of
   requiring the drawer for everything, matching native mobile app
   convention.
───────────────────────────────────────── */
#cdMobileTabbar { display: none; }
@media (max-width: 768px) {
  body { padding-bottom: 60px; }
  #cdMobileTabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 56px;
    background: var(--cd-bg-dark);
    border-top: 1px solid var(--cd-border);
    z-index: 1050;
  }
  #cdMobileTabbar a {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--cd-text-muted);
    font-size: 0.65rem;
    font-family: 'IBM Plex Mono', monospace;
    text-decoration: none;
    position: relative;
  }
  #cdMobileTabbar a.active,
  #cdMobileTabbar a:active {
    color: var(--cd-blue);
  }
  #cdMobileTabbar a i.bi { font-size: 1.15rem; }
  #cdMobileTabbar a .badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 20px);
    font-size: 0.6rem;
    padding: 2px 5px;
    box-shadow: 0 0 6px var(--cd-amber);
  }
}