/* ============================================================================
   CogSOUL THEME — DARK
   Load order in your <head>:
     1. all_dark.min.css        (Limitless base, dark)
     2. style_dark.css          (your existing overrides)
     3. cogsoul-theme-dark.css  (this file)
     4. cogsoul-cogs.css        (cog layer)
   Then before </body>:  <script src=".../cogsoul-cogs.js"></script>
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=Jersey+15&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Brand palette */
  --cs-void:        #0b1020;
  --cs-void-2:      #0e1426;
  --cs-steel:       #1a2238;
  --cs-steel-2:     #232d48;
  --cs-hairline:    rgba(255,255,255,0.06);
  --cs-hairline-2:  rgba(255,255,255,0.12);

  --cs-brass:       #d4a548;
  --cs-brass-deep:  #b5852a;
  --cs-brass-soft:  #e8c478;
  --cs-cyan:        #7dc7d4;
  --cs-cyan-soft:   #b8e2ea;
  --cs-copper:      #b5733a;

  --cs-ink:         #e9edf7;
  --cs-ink-mute:    #a0a9c2;
  --cs-ink-dim:     #6b7796;

  --cs-ok:          #6fcf97;
  --cs-warn:        #e8c478;
  --cs-bad:         #e26b6b;

  --cs-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.35);
  --cs-sidebar-veil: linear-gradient(180deg, rgba(10,15,30,0.5) 0%, rgba(11,17,36,0.5) 100%);

  /* Cog tints (dark = bright line-art) */
  --cs-cog-brass:  #f0c674;
  --cs-cog-cyan:   #a4dbe6;
  --cs-cog-copper: #d49567;

  /* Remap Limitless / Bootstrap tokens (helps anything var-driven) */
  --primary:   #d4a548;
  --primary-100:#2a2410;
  --info:      #7dc7d4;
  --blue:      #7dc7d4;
}

/* ---- Base ---------------------------------------------------------------- */
/* Page color lives on the root element so the z-index:-1 cog layer shows above
   it; body/panels stay transparent so they never paint over the cogs (and the
   content needs no stacking context, so modals are never trapped). !important
   on :root beats the #202125 rule in style_dark.css. */
:root { background-color: var(--cs-void) !important; }
body {
  background-color: transparent !important;
  color: var(--cs-ink);
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cs-steel-2); border-radius: 5px; }
::selection { background: rgba(212,165,72,0.3); color: #fff; }

/* ---- Type ---------------------------------------------------------------- */
h1, h2, h3, h4, .h1, .h2, .h3, .h4,
.card-title, .navbar-brand, .page-title, .media-title {
  font-family: 'Jersey 15', 'Space Grotesk', sans-serif;
  letter-spacing: 0.01em;
  /* Jersey 15 ships ONE weight. Stop the browser faux-bolding it when
     .font-weight-bold / <b> / <strong> lands on a heading — faux-bold smears
     the pixels. This renders crisp Jersey even at font-weight:700. */
  font-synthesis: none;
}
h1, h2, h3, .h1, .h2, .h3 { color: var(--cs-brass); }
h4, h5, h6 { color: var(--cs-ink); }
/* Belt-and-braces: bold utilities must never faux-bold a pixel font. Real
   weights still render (they come from actual font faces, not synthesis). */
b, strong, .font-weight-bold, .fw-bold,
.font-weight-semibold, .fw-semibold { font-synthesis: none; }
.text-muted { color: var(--cs-ink-dim) !important; }
a { color: var(--cs-cyan); }
a:hover, a:focus { color: var(--cs-cyan-soft); }
code, kbd, pre, .font-monospace { font-family: 'JetBrains Mono', monospace; }

/* Section header labels in pixel font */
.nav-item-header,
.sidebar-section-header,
.text-uppercase.font-weight-semibold {
  font-family: 'Silkscreen', monospace !important;
  letter-spacing: 0.16em !important;
  font-size: 9px !important;
  color: var(--cs-ink-dim) !important;
  text-transform: uppercase;
}

/* ---- Top navbar ---------------------------------------------------------- */
.navbar-dark,
.navbar.bg-primary,
.navbar-dark.bg-indigo,
.navbar-static .navbar-dark {
  background: linear-gradient(180deg, #0a0f1e 0%, #0b1124 100%) !important;
  border-bottom: 1px solid var(--cs-hairline) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.navbar-brand,
.navbar-brand a,
.navbar-dark .navbar-brand {
  color: var(--cs-brass) !important;
  font-size: 1.35rem;
  text-shadow: 0 2px 0 #6b4d12;
}
.navbar-dark .navbar-nav .nav-link { color: var(--cs-ink-mute) !important; }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link { color: var(--cs-brass-soft) !important; }
/* Limitless's own .navbar-nav-link (alerts, action items, notepad, +): brass icons, not plain white */
.navbar-dark .navbar-nav-link > i { color: var(--cs-brass) !important; }
.navbar-dark .navbar-nav-link:hover > i,
.navbar-dark .show > .navbar-nav-link > i { color: var(--cs-brass-soft) !important; }
.navbar-nav .badge { background-color: var(--cs-brass) !important; color: var(--cs-void) !important; }

/* ---- Sidebar ------------------------------------------------------------- */
.sidebar-dark,
.sidebar-main,
.sidebar-dark .sidebar-content {
  background: linear-gradient(180deg, #0a0f1e 0%, #0b1124 100%) !important;
  border-right: 1px solid var(--cs-hairline);
}
.sidebar-dark .nav-sidebar > .nav-item > .nav-link { color: var(--cs-ink-mute); border-radius: 0; }
.sidebar-dark .nav-sidebar > .nav-item > .nav-link:hover {
  background-color: rgba(255,255,255,0.03);
  color: var(--cs-ink);
}
.sidebar-dark .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark .nav-sidebar > .nav-item.nav-item-expanded > .nav-link {
  background: linear-gradient(90deg, rgba(212,165,72,0.14) 0%, rgba(212,165,72,0) 100%) !important;
  color: var(--cs-brass-soft) !important;
  box-shadow: inset 2px 0 0 var(--cs-brass);
}
.sidebar-dark .nav-sidebar .nav-link .badge { background-color: var(--cs-brass) !important; color: var(--cs-void) !important; }
.sidebar-dark .nav-sidebar > .nav-item-submenu .nav-group-sub .nav-link.active { color: var(--cs-brass-soft); }

/* Sidebar user panel */
.sidebar-dark .card,
.sidebar-dark .sidebar-section .media { color: var(--cs-ink); }

/* ---- Cards --------------------------------------------------------------- */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%) !important;
  border: 1px solid var(--cs-hairline-2) !important;
  border-radius: 8px !important;
  box-shadow: var(--cs-shadow) !important;
  color: var(--cs-ink);
}
.card-header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--cs-hairline) !important;
}
.card-title { color: var(--cs-ink); }
.card-header .text-muted { color: var(--cs-ink-dim) !important; }

/* ---- Buttons ------------------------------------------------------------- */
.btn-primary {
  background: linear-gradient(180deg, var(--cs-brass-soft) 0%, var(--cs-brass) 100%) !important;
  border-color: var(--cs-brass-deep) !important;
  color: var(--cs-void) !important;
  font-family: 'Silkscreen', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 0 var(--cs-brass-deep), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.06); color: var(--cs-void) !important; }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--cs-brass-deep); }
.btn-outline-primary { color: var(--cs-brass) !important; border-color: var(--cs-brass) !important; }
.btn-outline-primary:hover { background-color: var(--cs-brass) !important; color: var(--cs-void) !important; }
.btn-light, .btn-secondary { background-color: var(--cs-steel-2); border-color: var(--cs-hairline-2); color: var(--cs-ink); }
.btn-link { color: var(--cs-cyan); }

/* ---- Utility color overrides -------------------------------------------- */
.text-primary { color: var(--cs-brass) !important; }
.bg-primary   { background-color: var(--cs-brass) !important; color: var(--cs-void) !important; }
.text-info    { color: var(--cs-cyan) !important; }
.bg-info      { background-color: var(--cs-cyan) !important; color: var(--cs-void) !important; }
.border-primary { border-color: var(--cs-brass) !important; }
.badge-primary { background-color: var(--cs-brass) !important; color: var(--cs-void) !important; }
.badge-info    { background-color: var(--cs-cyan) !important; color: var(--cs-void) !important; }

/* ---- Tables -------------------------------------------------------------- */
.table { color: var(--cs-ink-mute); }
.table thead th,
.table th {
  font-family: 'Silkscreen', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff !important;
  border-color: var(--cs-hairline) !important;
  background-color: rgba(0,0,0,0.15) !important;
}
.table td { border-color: var(--cs-hairline) !important; }
.table-hover tbody tr:hover { background-color: rgba(255,255,255,0.02); color: var(--cs-ink); }
.table td strong, .table td b { color: var(--cs-ink); }

/* ---- Forms --------------------------------------------------------------- */
.form-control, .custom-select, .form-select {
  background-color: rgba(255,255,255,0.03);
  border: 1px solid var(--cs-hairline-2);
  color: var(--cs-ink);
}
.form-control:focus, .form-select:focus {
  background-color: rgba(212,165,72,0.04);
  border-color: var(--cs-brass);
  box-shadow: 0 0 0 2px rgba(212,165,72,0.18);
  color: var(--cs-ink);
}
.form-control::placeholder { color: var(--cs-ink-dim); }

/* ---- Progress / pulses --------------------------------------------------- */
.progress { background-color: rgba(0,0,0,0.4); }
.progress-bar { background-color: var(--cs-brass); }

/* ---- Pixel divider helper (optional, add class="cs-pixel-rule") ---------- */
.cs-pixel-rule {
  height: 4px; border: 0;
  background-image: linear-gradient(90deg, var(--cs-brass) 0 4px, transparent 4px 8px);
  background-size: 8px 4px;
  opacity: 0.35;
}

/* ============================================================================
   ORDER MANAGEMENT & ANALYTICS (.om-page / .om-* / analytics)
   These pages hardcode slate (#32333a) surfaces and an #00b0ff accent in
   style_dark.css at (0,2,0)+ specificity, so the base .card / .table rules
   above can't reach them. We re-skin with matching selectors + !important.
   (Light mode has no .om-* hardcodes, so these are dark-only.)
   ========================================================================== */

/* Page background — beat .bg-body and the id-scoped body rule (transparent so
   the root-element void shows through behind the cog layer) */
.bg-body { background-color: transparent !important; }
body#cognitiveSOUL_admin_page { background: transparent !important; background-color: transparent !important; }

/* Card + info surfaces → CogSOUL steel (was #32333a, border #ddd) */
.om-page .card {
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%) !important;
  border: 1px solid var(--cs-hairline-2) !important;
  border-radius: 8px !important;
}
.om-page .info-section {
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%) !important;
  border: 1px solid var(--cs-hairline) !important;
}

/* Card headers / table heads → transparent + brass-ink labels */
.analytics-section .card-header,
.om-fulfillment > .card .card-header { background: transparent !important; }
.om-page .table th {
  background-color: rgba(0,0,0,0.15) !important;
  color: var(--cs-ink-dim) !important;
  font-family: 'Silkscreen', monospace;
  letter-spacing: 0.12em;
}

/* Titles & values */
.om-page .card-title,
.om-page .info-section h4,
.om-page .summary-cards .card-title { color: var(--cs-ink) !important; }
.om-page .summary-cards .card-value {
  color: var(--cs-brass) !important;
  font-family: 'Jersey 15', monospace;
  font-synthesis: none;
}

/* Help accordion headings (were #00b0ff) → cyan */
.om-help-accordion .card-body h1,
.om-help-accordion .card-body h2,
.om-help-accordion .card-body h3,
.om-help-accordion .card-body h4,
.om-help-accordion .card-body h5 { color: var(--cs-cyan) !important; }
.om-help-accordion .card-body strong { color: var(--cs-ink-mute) !important; }

/* Pending-packing light table row → transparent so the cogs show through
   (was a flat grey block). Borders kept as hairlines for structure. */
.table-light, .table-light > td, .table-light > th { background-color: transparent !important; }
.table-light tbody + tbody, .table-light td, .table-light th, .table-light thead th { border-color: var(--cs-hairline) !important; }
.om-shipments .card-pending-packing .table-light { background: transparent !important; color: var(--cs-ink) !important; }

/* ============================================================================
   MODULE SWEEP (dark) — file manager, CogWork kanban, FeatureBear chat.
   Same situation as .om-page: style_dark.css hardcodes slate surfaces + blue
   accents at high specificity, so we re-skin with matching selectors +
   !important to bring them into the CogSOUL brand (steel surfaces, brass/cyan
   accents). Status colors (ok/warn/bad) are retinted to the theme equivalents.
   ========================================================================== */

/* ---------- File Manager (.fm-*) ----------------------------------------- */
.fm-modal { background: var(--cs-steel) !important; color: var(--cs-ink) !important; }
.fm-modal-header, .fm-modal-footer { background: rgba(0,0,0,0.2) !important; border-color: var(--cs-hairline) !important; color: var(--cs-ink); }
.fm-toolbar-sticky { background: rgba(10,15,30,0.6) !important; border-bottom-color: var(--cs-hairline) !important; }
.fm-breadcrumb { background: rgba(0,0,0,0.15) !important; border-bottom-color: var(--cs-hairline) !important; color: var(--cs-ink-mute); }
.fm-breadcrumb a, .fm-breadcrumb a:hover { color: var(--cs-cyan) !important; }
.fm-filter-row { background: rgba(0,0,0,0.15) !important; border-bottom-color: var(--cs-hairline) !important; }
.fm-filter-row input[type="text"] { background: rgba(255,255,255,0.03) !important; border-color: var(--cs-hairline-2) !important; color: var(--cs-ink) !important; }
.fm-filter-row input[type="text"]:focus { border-color: var(--cs-brass) !important; box-shadow: 0 0 0 2px rgba(212,165,72,0.2) !important; }
.fm-list thead th { background: rgba(0,0,0,0.25) !important; color: var(--cs-ink-dim) !important; font-family: 'Silkscreen', monospace; letter-spacing: 0.1em; }
.fm-list th, .fm-list td { border-bottom-color: var(--cs-hairline) !important; color: var(--cs-ink-mute); }
.fm-list tbody tr:hover { background: rgba(255,255,255,0.03) !important; }
.fm-list tbody tr.selected, .fm-list tbody tr.selected:hover {
  background: rgba(212,165,72,0.12) !important;
  box-shadow: inset 4px 0 0 0 var(--cs-brass) !important;
  color: var(--cs-brass-soft) !important;
}
.fm-list tbody tr.selected td .text-muted { color: var(--cs-brass-soft) !important; }
.fm-list tbody tr.fm-drop-target { background: rgba(212,165,72,0.10) !important; box-shadow: inset 4px 0 0 0 var(--cs-brass) !important; }
.fm-breadcrumb a.fm-drop-target { background: rgba(212,165,72,0.10) !important; box-shadow: inset 0 -2px 0 0 var(--cs-brass) !important; }
.fm-modal-footer button.primary { background: rgba(212,165,72,0.18) !important; border-color: var(--cs-brass) !important; color: var(--cs-brass-soft) !important; }
.fm-context-menu { background: var(--cs-steel) !important; border-color: var(--cs-hairline-2) !important; }
.fm-context-menu .fm-ctx-item { color: var(--cs-ink) !important; }
.fm-context-menu .fm-ctx-item:hover { background: rgba(212,165,72,0.12) !important; color: var(--cs-brass-soft) !important; }
.fm-context-menu .fm-ctx-divider { background: var(--cs-hairline) !important; }
.fm-drop-overlay { background: rgba(212,165,72,0.08) !important; border-color: var(--cs-brass) !important; color: var(--cs-brass-soft) !important; }
.fm-drop-overlay .fm-drop-overlay-msg { background: rgba(20,26,46,0.95) !important; color: var(--cs-ink) !important; }
.fm-create-map-choice, .fm-modal-footer button { background: rgba(255,255,255,0.03) !important; border-color: var(--cs-hairline-2) !important; color: var(--cs-ink) !important; }
.fm-create-map-choice:hover:not(:disabled) { border-color: var(--cs-brass) !important; background: rgba(212,165,72,0.06) !important; }
.fm-create-map-choice .fm-choice-icon { color: var(--cs-cyan) !important; }
.fm-create-map-choice.ai .fm-choice-icon { color: var(--cs-ok) !important; }
.fm-ai-bulk-progress-wrap, .fm-ai-bulk-progress-bar-track { background: rgba(0,0,0,0.3) !important; border-color: var(--cs-hairline) !important; }
.fm-ai-bulk-progress-bar-fill { background: linear-gradient(90deg, var(--cs-brass-deep), var(--cs-brass)) !important; }
.fm-activity-panel { background: var(--cs-steel) !important; color: var(--cs-ink) !important; }
.fm-activity-panel-header, .fm-activity-panel-footer, .fm-activity-filter-row { background: rgba(0,0,0,0.2) !important; border-color: var(--cs-hairline) !important; }
.fm-activity-panel-header h5 i { color: var(--cs-brass) !important; }
.fm-activity-entry { border-bottom-color: var(--cs-hairline) !important; }
.fm-activity-entry .summary { color: var(--cs-ink); }
.fm-activity-entry .undo-btn { background: rgba(255,255,255,0.03) !important; border-color: var(--cs-hairline-2) !important; color: var(--cs-cyan) !important; }
.fm-activity-entry .undo-btn:hover:not(:disabled) { background: var(--cs-cyan) !important; color: var(--cs-void) !important; border-color: var(--cs-cyan) !important; }

/* ---------- CogWork kanban (.cw-* / #cw-*) -------------------------------
   Kanban 15: .cw-kanban-col and .cw-col-name deleted — dead selectors, not
   rendered since the board moved onto the framework component. Their colour
   now comes from the kanban surface/ink tokens in style_dark.css, which
   always loads (this file does not, when $admin_cogsoul_theme == "off").
   Kanban 16 (fix round 1): the #cw-view-kanban .cw-card SURFACE !important
   (background/border-color) is deleted too — .cs-kanban-card in
   cogsoul-kanban.css now declares its own background/border and outranks
   tasks.css's .cw-card on plain specificity, so no !important is needed or
   wanted here (an !important on LEFTOVER pre-component styling is what let
   it keep outranking .cs-kanban-card:hover's border-color regardless of
   hover state — the fix is deleting the leftover rule, not out-!important-ing
   it, which would only restart the same specificity war this extraction
   exists to end). The rules below remain card-CONTENT surfacing (title, due
   pill, flag, done-state) — kept per Task 4's "Keep .cw-card*" instruction,
   which was always about content, never about the surface the component now
   owns. */
.cw-card-inner .cw-card-title { color: var(--cs-ink) !important; }
.cw-awaiting-deploy { background: rgba(224,196,108,0.16) !important; color: #e0c46c !important; }
.cw-due-pill, .cw-created-pill { background: var(--cs-steel-2) !important; color: var(--cs-ink-mute) !important; }
.cw-due-pill.cw-overdue { background: rgba(226,107,107,0.16) !important; color: var(--cs-bad) !important; }
.cw-card-flag { color: var(--cs-bad) !important; }
.cw-card.cw-done .cw-card-title { color: var(--cs-ink-dim) !important; }
#cw-task-drawer { background: var(--cs-void) !important; }
#cw-task-drawer .cw-drawer-tabs { background: var(--cs-void-2) !important; }
#cw-task-drawer .cw-tag-dropdown { background: var(--cs-steel) !important; border-color: var(--cs-hairline-2) !important; }
#cw-task-drawer .cw-tag-option { color: var(--cs-ink) !important; }
#cw-task-drawer .cw-tag-option:hover { background: rgba(255,255,255,0.06) !important; }
#cw-task-drawer .cw-tag-filter,
#cw-task-drawer .cw-tag-create .cw-tag-new-name { background: rgba(255,255,255,0.03) !important; border-color: var(--cs-hairline-2) !important; color: var(--cs-ink) !important; }
#cw-task-drawer .cw-tag-edit-btn { border-color: var(--cs-hairline-2) !important; color: var(--cs-ink-mute) !important; }

/* ---------- FeatureBear chat dashboard (.fb-chat-dashboard) -------------- */
/* Re-point the --fbc-* palette → CogSOUL; cascades through ~130 references. */
.fb-chat-dashboard {
  --fbc-bg: #0b1020 !important;
  --fbc-surface: #141a2e !important;
  --fbc-surface-hover: #1a2238 !important;
  --fbc-border: rgba(255,255,255,0.12) !important;
  --fbc-border-light: rgba(255,255,255,0.06) !important;
  --fbc-text: #e9edf7 !important;
  --fbc-text-secondary: #a0a9c2 !important;
  --fbc-text-muted: #6b7796 !important;
  --fbc-bg-hover: #1a2238 !important;
  --fbc-primary: #d4a548 !important;
  --fbc-primary-hover: #e8c478 !important;
  --fbc-primary-light: #2a2410 !important;
  --fbc-success-light: #14241a !important;
  --fbc-warning-light: #2a2410 !important;
  --fbc-danger-light: #2a1414 !important;
}
.fb-help-accordion .card-body h5 { color: var(--cs-cyan) !important; }
.fb-help-body { color: var(--cs-ink) !important; }

/* ---------- Settings / config tables (personalCard / configCard) -------- */
#personalCard th, #configCard th { background-color: rgba(0,0,0,0.25) !important; color: var(--cs-ink) !important; }
#personalCard th a, #configCard th a { color: var(--cs-brass-soft) !important; }
#personalCard input[type="text"], #personalCard input[type="password"], #personalCard select, #personalCard textarea,
#configCard input[type="text"], #configCard input[type="password"], #configCard input[type="file"], #configCard select, #configCard textarea {
  background-color: rgba(255,255,255,0.03) !important;
  color: var(--cs-ink) !important;
}

/* ============================================================================
   PAGE HEADER + BREADCRUMB — steampunk flourish (CSS-only, no markup changes)
   Targets the standard Limitless .page-header / .breadcrumb-line block.
   ========================================================================== */
.page-header {
  position: relative;
  background: linear-gradient(180deg, rgba(212,165,72,0.06) 0%, rgba(212,165,72,0) 100%) !important;
  border-bottom: 0 !important;
}
/* riveted brass pixel-rule along the bottom edge */
.page-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background-image: linear-gradient(90deg, var(--cs-brass) 0 4px, transparent 4px 8px);
  background-size: 8px 3px;
  opacity: 0.45;
}

/* Title: turning brass cog bullet + crisp pixel heading */
.page-header .page-title h4 {
  font-family: 'Jersey 15', monospace;
  letter-spacing: 0.02em;
  font-synthesis: none;
  display: inline-flex; align-items: center; gap: 11px;
  margin: 0;
}
.page-header .page-title h4 .font-weight-semibold { color: var(--cs-ink); font-synthesis: none; }
.page-header .page-title h4::before {
  font-family: 'icomoon';
  content: "\eb73";                 /* icon-cog */
  color: var(--cs-brass);
  font-size: 19px;
  line-height: 1;
  display: inline-block;
  animation: cogsoul-cw 120s linear infinite;
  transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: reduce) {
  .page-header .page-title h4::before { animation: none; }
}

/* Breadcrumb line */
.breadcrumb-line {
  background: rgba(0,0,0,0.18) !important;
  border-top: 1px solid var(--cs-hairline) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.breadcrumb-line .breadcrumb { background: transparent !important; }
.breadcrumb-item,
.breadcrumb-item > a,
.breadcrumb-item.active {
  font-family: 'Silkscreen', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
a.breadcrumb-item,
.breadcrumb-item > a { color: var(--cs-cyan) !important; }
a.breadcrumb-item:hover,
.breadcrumb-item > a:hover { color: var(--cs-cyan-soft) !important; }
.breadcrumb-item.active { color: var(--cs-brass-soft) !important; }
.breadcrumb-item i { color: var(--cs-brass) !important; }
/* header-elements links on the breadcrumb line (Search, Inbox, Recents, Jump to Project...).
   Links that already carry a text-* colour (e.g. Sessions' text-teal) keep it. */
.breadcrumb-line a.breadcrumb-elements-item:not([class*="text-"]) { color: var(--cs-brass) !important; }
.breadcrumb-line a.breadcrumb-elements-item:not([class*="text-"]):hover,
.breadcrumb-line .show > a.breadcrumb-elements-item:not([class*="text-"]) { color: var(--cs-brass-soft) !important; }
/* gear-shaped separators between crumbs (override Limitless default) */
.breadcrumb-item + .breadcrumb-item { padding-left: 0; }
.breadcrumb-item + .breadcrumb-item::before {
  font-family: 'icomoon' !important;
  content: "\eb73" !important;      /* icon-cog */
  color: var(--cs-brass) !important;
  opacity: 0.55;
  font-size: 10px;
  padding: 0 11px;
  vertical-align: -1px;
}

/* ============================================================================
   FOOTER NAVBAR — blend into the void + steampunk flourish (CSS-only)
   Targets the footer (.navbar.navbar-light.border-top). Scoped tightly so it
   won't touch the top navbar (which is .navbar-dark).
   ========================================================================== */
.navbar.navbar-light.border-top {
  position: relative;
  background: linear-gradient(180deg, rgba(212,165,72,0) 0%, rgba(212,165,72,0.04) 100%) !important;
  background-color: transparent !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
/* brass pixel-rule along the top edge (mirrors the page-header bottom) */
.navbar.navbar-light.border-top::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background-image: linear-gradient(90deg, var(--cs-brass) 0 4px, transparent 4px 8px);
  background-size: 8px 3px;
  opacity: 0.45;
}
.navbar.navbar-light.border-top .navbar-text {
  color: var(--cs-ink-dim) !important;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px;
}
/* slow turning brass cog before the version string (matches title/bg cogs) */
.navbar.navbar-light.border-top .navbar-text::before {
  font-family: 'icomoon';
  content: "\eb73";                 /* icon-cog */
  color: var(--cs-brass);
  font-size: 13px;
  line-height: 1;
  display: inline-block;
  animation: cogsoul-cw 120s linear infinite;
  transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: reduce) {
  .navbar.navbar-light.border-top .navbar-text::before { animation: none; }
}
.navbar.navbar-light.border-top .navbar-text a { color: var(--cs-cyan) !important; }
.navbar.navbar-light.border-top .navbar-text a:hover { color: var(--cs-cyan-soft) !important; }
.navbar.navbar-light.border-top .navbar-nav-link { color: var(--cs-ink-mute) !important; }
.navbar.navbar-light.border-top .navbar-nav-link:hover { color: var(--cs-brass-soft) !important; }
.navbar.navbar-light.border-top .navbar-nav-link i { color: var(--cs-brass) !important; }
.navbar.navbar-light.border-top .navbar-toggler {
  color: var(--cs-ink-mute) !important;
  border-color: var(--cs-hairline-2) !important;
}

/* ============================================================================
   RIVETED IRON-PLATE FLOURISHES (non-gear) — bolts + engraving. CSS-only.
   Keeps the steampunk feel going in the chrome without another spinning gear.
   ========================================================================== */

/* Top navbar: riveted seam of brass bolts along the bottom edge */
.navbar-dark { position: relative; }
.navbar-dark::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 5px; height: 6px;
  background-image: radial-gradient(circle 2.5px at 6px 50%,
    #f0d28a 0 1px, #cfa040 1px 2.1px, #6f4f12 2.1px 2.5px, transparent 2.5px);
  background-size: 34px 6px; background-repeat: repeat-x;
  opacity: 0.5; pointer-events: none;
}

/* Page header: four corner bolts → a bolted nameplate (layered over the tint) */
.page-header {
  background-image:
    radial-gradient(circle 3px at 15px 13px,                       #f0d28a 0 1px, #cfa040 1px 2.6px, #6f4f12 2.6px 3px, transparent 3px),
    radial-gradient(circle 3px at calc(100% - 15px) 13px,          #f0d28a 0 1px, #cfa040 1px 2.6px, #6f4f12 2.6px 3px, transparent 3px),
    radial-gradient(circle 3px at 15px calc(100% - 11px),          #f0d28a 0 1px, #cfa040 1px 2.6px, #6f4f12 2.6px 3px, transparent 3px),
    radial-gradient(circle 3px at calc(100% - 15px) calc(100% - 11px), #f0d28a 0 1px, #cfa040 1px 2.6px, #6f4f12 2.6px 3px, transparent 3px),
    linear-gradient(180deg, rgba(212,165,72,0.06) 0%, rgba(212,165,72,0) 100%) !important;
  background-repeat: no-repeat !important;
}

/* Sidebar section headers: engraved nameplate + end rivet cap */
.sidebar-dark .nav-item-header { position: relative; }
.sidebar-dark .nav-item-header > div {
  text-shadow: 0 1px 0 rgba(0,0,0,0.55), 0 -1px 0 rgba(255,255,255,0.05);
}
.sidebar-dark .nav-item-header::after {
  content: ""; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #f0d28a, #cfa040 55%, #6f4f12);
  opacity: 0.65; pointer-events: none;
}

/* ---- Cog tints (dark) ---------------------------------------------------- */
.cog-wrap.cog-brass  { color: var(--cs-cog-brass); }
.cog-wrap.cog-cyan   { color: var(--cs-cog-cyan); }
.cog-wrap.cog-copper { color: var(--cs-cog-copper); }