/* ============================================================================
   CogSOUL THEME — LIGHT  (aged brass / parchment steampunk)
   Load order in your <head>:
     1. all.min.css              (Limitless base, light)
     2. style.css                (your existing overrides)
     3. cogsoul-theme-light.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 {
  /* Parchment surfaces */
  --cs-paper:       #ece4d3;
  --cs-paper-2:     #f4eee1;
  --cs-card:        #fbf7ee;
  --cs-hairline:    rgba(58,45,20,0.10);
  --cs-hairline-2:  rgba(58,45,20,0.16);

  --cs-brass:       #a9801f;   /* deeper for contrast on light */
  --cs-brass-deep:  #836014;
  --cs-brass-soft:  #c79a33;
  --cs-cyan:        #2f7c8a;
  --cs-cyan-soft:   #3f96a6;
  --cs-copper:      #9a5a2a;

  --cs-ink:         #2e2718;   /* sepia ink */
  --cs-ink-mute:    #5d5340;
  --cs-ink-dim:     #8c8068;

  --cs-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 6px 18px rgba(80,60,20,0.10);
  --cs-sidebar-veil: linear-gradient(180deg, rgba(236,228,211,0.55) 0%, rgba(244,238,225,0.55) 100%);

  /* Cog tints (light): DEEP sepia/iron so they etch onto parchment at the same
     low opacity the dark theme uses. Medium brass (#9a7320) at 3% over cream is
     invisible; these dark tones give the dark-mode level of subtle contrast. */
  --cs-cog-brass:  #46340c;
  --cs-cog-cyan:   #163d46;
  --cs-cog-copper: #46280f;

  --primary:   #a9801f;
  --info:      #2f7c8a;
}

/* ---- Base ---------------------------------------------------------------- */
/* Page color on the root element so the z-index:-1 cog layer shows above it;
   body stays transparent so it never paints over the cogs and the content
   needs no stacking context (modals never get trapped). */
:root { background-color: var(--cs-paper) !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: #cdbf9f; border-radius: 5px; }
::selection { background: rgba(169,128,31,0.25); }

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

.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-static .navbar-dark {
  background: linear-gradient(180deg, #2e2718 0%, #3a3120 100%) !important;
  border-bottom: 2px solid var(--cs-brass) !important;
}
.navbar-brand, .navbar-dark .navbar-brand {
  color: var(--cs-brass-soft) !important;
  font-size: 1.35rem;
  text-shadow: 0 2px 0 #1c1709;
}
.navbar-dark .navbar-nav .nav-link { color: #d8cdb4 !important; }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .active > .nav-link { color: var(--cs-brass-soft) !important; }
/* Limitless's own .navbar-nav-link (alerts, action items, notepad, +). The bar stays dark
   brown in light mode, so the soft brass is the readable one here. */
.navbar-dark .navbar-nav-link > i { color: var(--cs-brass-soft) !important; }
.navbar-dark .navbar-nav-link:hover > i,
.navbar-dark .show > .navbar-nav-link > i { color: #e8c478 !important; }

/* ---- Sidebar ------------------------------------------------------------- */
.sidebar-dark,
.sidebar-main,
.sidebar-dark .sidebar-content {
  background: linear-gradient(180deg, #2e2718 0%, #352c1b 100%) !important;
  border-right: 1px solid rgba(0,0,0,0.2);
}
.sidebar-dark .nav-sidebar > .nav-item > .nav-link { color: #cabfa6; }
.sidebar-dark .nav-sidebar > .nav-item > .nav-link:hover { background-color: rgba(255,255,255,0.05); color: #f0e8d4; }
.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(199,154,51,0.22) 0%, rgba(199,154,51,0) 100%) !important;
  color: var(--cs-brass-soft) !important;
  box-shadow: inset 2px 0 0 var(--cs-brass);
}
.sidebar-dark .nav-item-header { color: #9b8f72 !important; }
.sidebar-dark .nav-sidebar .nav-link .badge { background-color: var(--cs-brass) !important; color: #2e2718 !important; }

/* When cogs bleed through sidebar in light mode the surface tint above keeps
   it dark-on-parchment for contrast — sidebar stays the dark "iron" panel. */

/* ---- Cards --------------------------------------------------------------- */
.card {
  background-color: var(--cs-card) !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); }

/* ---- 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: #2e2718 !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.4);
}
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.05); color: #2e2718 !important; }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--cs-brass-deep); }
.btn-outline-primary { color: var(--cs-brass-deep) !important; border-color: var(--cs-brass) !important; }
.btn-outline-primary:hover { background-color: var(--cs-brass) !important; color: #2e2718 !important; }
.btn-link { color: var(--cs-cyan); }

/* ---- Utility color overrides -------------------------------------------- */
.text-primary { color: var(--cs-brass-deep) !important; }
.bg-primary   { background-color: var(--cs-brass) !important; color: #2e2718 !important; }
.text-info    { color: var(--cs-cyan) !important; }
.bg-info      { background-color: var(--cs-cyan) !important; color: #fff !important; }
.border-primary { border-color: var(--cs-brass) !important; }
.badge-primary { background-color: var(--cs-brass) !important; color: #2e2718 !important; }
.badge-info    { background-color: var(--cs-cyan) !important; color: #fff !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: var(--cs-ink-dim) !important;
  border-color: var(--cs-hairline) !important;
  background-color: rgba(58,45,20,0.05) !important;
}
.table td { border-color: var(--cs-hairline) !important; }
.table-hover tbody tr:hover { background-color: rgba(169,128,31,0.06); color: var(--cs-ink); }
.table td strong, .table td b { color: var(--cs-ink); }

/* ---- Forms --------------------------------------------------------------- */
.form-control, .custom-select, .form-select {
  background-color: #fffdf8;
  border: 1px solid var(--cs-hairline-2);
  color: var(--cs-ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--cs-brass);
  box-shadow: 0 0 0 2px rgba(169,128,31,0.18);
}
.form-control::placeholder { color: var(--cs-ink-dim); }

/* ---- Pixel divider helper ------------------------------------------------ */
.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.5;
}

/* ============================================================================
   MODULE SWEEP (light) — file manager accent retint. Light surfaces from
   style.css are fine on parchment; we only swap the blue (#2c6fbb) accents for
   brass/cyan and pixel-ify the table heads. (CogWork / FeatureBear have no
   light-mode hardcodes, so nothing to do there.)
   ========================================================================== */
.fm-breadcrumb a, .fm-breadcrumb a:hover,
.fm-create-map-choice .fm-choice-icon,
.fm-activity-entry .undo-btn { color: var(--cs-cyan) !important; }
.fm-list thead th { font-family: 'Silkscreen', monospace; letter-spacing: 0.1em; color: var(--cs-ink-dim) !important; }
.fm-list tbody tr.selected, .fm-list tbody tr.selected:hover {
  background: rgba(169,128,31,0.12) !important;
  box-shadow: inset 4px 0 0 0 var(--cs-brass) !important;
  color: var(--cs-brass-deep) !important;
}
.fm-list tbody tr.selected td .text-muted { color: var(--cs-brass-deep) !important; }
.fm-filter-row input[type="text"]:focus { border-color: var(--cs-brass) !important; box-shadow: 0 0 0 2px rgba(169,128,31,0.18) !important; }
.fm-context-menu .fm-ctx-item:hover { background: rgba(169,128,31,0.10) !important; color: var(--cs-brass-deep) !important; }
.fm-create-map-choice:hover:not(:disabled) { border-color: var(--cs-brass) !important; background: rgba(169,128,31,0.06) !important; }
.fm-ai-bulk-progress-bar-fill { background: linear-gradient(90deg, var(--cs-brass-deep), var(--cs-brass)) !important; }
.fm-activity-entry .undo-btn:hover:not(:disabled) { background: var(--cs-brass) !important; color: #2e2718 !important; border-color: var(--cs-brass) !important; }

/* ============================================================================
   PAGE HEADER + BREADCRUMB — steampunk flourish (light / parchment)
   ========================================================================== */
.page-header {
  position: relative;
  background: linear-gradient(180deg, rgba(169,128,31,0.08) 0%, rgba(169,128,31,0) 100%) !important;
  border-bottom: 0 !important;
}
.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.6;
}
.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";
  color: var(--cs-brass-deep);
  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 {
  background: rgba(58,45,20,0.05) !important;
  border-top: 1px solid var(--cs-hairline) !important;
}
.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-deep) !important; }
.breadcrumb-item i { color: var(--cs-brass-deep) !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-deep) !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) !important; }
.breadcrumb-item + .breadcrumb-item { padding-left: 0; }
.breadcrumb-item + .breadcrumb-item::before {
  font-family: 'icomoon' !important;
  content: "\eb73" !important;
  color: var(--cs-brass-deep) !important;
  opacity: 0.6;
  font-size: 10px;
  padding: 0 11px;
  vertical-align: -1px;
}

/* ============================================================================
   FOOTER NAVBAR — blend + flourish (light / parchment)
   ========================================================================== */
.navbar.navbar-light.border-top {
  position: relative;
  background: linear-gradient(180deg, rgba(169,128,31,0) 0%, rgba(169,128,31,0.07) 100%) !important;
  background-color: transparent !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
.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.6;
}
.navbar.navbar-light.border-top .navbar-text {
  color: var(--cs-ink-mute) !important;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px;
}
.navbar.navbar-light.border-top .navbar-text::before {
  font-family: 'icomoon';
  content: "\eb73";
  color: var(--cs-brass-deep);
  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-deep) !important; }
.navbar.navbar-light.border-top .navbar-nav-link i { color: var(--cs-brass-deep) !important; }

/* ============================================================================
   RIVETED IRON-PLATE FLOURISHES (non-gear) — bolts + engraving (light).
   Sidebar + top navbar are dark iron in both themes, so those rivets match
   dark; the page-header sits on parchment, so its bolts use deeper brass.
   ========================================================================== */

/* Top navbar (dark iron in light theme too): brass riveted seam */
.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 on parchment: deeper-brass corner bolts so they read on cream */
.page-header {
  background-image:
    radial-gradient(circle 3px at 15px 13px,                       #d4ab4e 0 1px, #9a7320 1px 2.6px, #5c440f 2.6px 3px, transparent 3px),
    radial-gradient(circle 3px at calc(100% - 15px) 13px,          #d4ab4e 0 1px, #9a7320 1px 2.6px, #5c440f 2.6px 3px, transparent 3px),
    radial-gradient(circle 3px at 15px calc(100% - 11px),          #d4ab4e 0 1px, #9a7320 1px 2.6px, #5c440f 2.6px 3px, transparent 3px),
    radial-gradient(circle 3px at calc(100% - 15px) calc(100% - 11px), #d4ab4e 0 1px, #9a7320 1px 2.6px, #5c440f 2.6px 3px, transparent 3px),
    linear-gradient(180deg, rgba(169,128,31,0.08) 0%, rgba(169,128,31,0) 100%) !important;
  background-repeat: no-repeat !important;
}

/* Sidebar section headers (dark iron): 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 (light) --------------------------------------------------- */
.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); }