/* ==========================================================================
   SIGNAL ON TABLER (Peter, 3 Oct 2026: Signal follows Tabler, an admin-dashboard system for power users; only Bullet's
   colours carry over). Tabler itself is dashboard/vendor/tabler/tabler.min.css, loaded first on every page as the base.
   This file is the theme on top of it, and the left menu (js/side-nav.js, Tabler's vertical sidebar):
     - Tabler's primary is Bullet's ink (#2c2c2c), so active items and primary buttons are Bullet's colour.
     - No small grey headings, anywhere (CLAUDE.md, Peter 3 Oct): Tabler's own .dropdown-header and .subheader are
       small uppercase grey by default, so here they are full ink, bold, 14px, no capitals.
     - Nothing under 13px.
   ========================================================================== */
:root, [data-bs-theme="light"] {
  --tblr-primary: #2c2c2c;
  --tblr-primary-rgb: 44, 44, 44;
  --tblr-primary-fg: #fff;
  --tblr-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --snav-w: 15rem;
}
/* Tabler's small sizes are 12px (small buttons, badges, table headings in grey capitals); Signal's floor is 13px and a
   table heading is a heading: ink, bold, no capitals (found moving the Tester sessions page, 3 Oct) */
.btn-sm, .badge, .form-text, .small, small { font-size: 13px; }
.table thead th, .table > thead > tr > th { font-size: 14px; font-weight: 700; color: var(--tblr-body-color, #1d273b); text-transform: none; letter-spacing: 0; }
/* dark mode: Bullet's ink would vanish on dark cards, so primary turns light there (found on the Accountant page, 3 Oct) */
[data-bs-theme="dark"] { --tblr-primary: #f2f2f0; --tblr-primary-rgb: 242, 242, 240; --tblr-primary-fg: #1a1a1a; }
[data-bs-theme="dark"] .btn-primary { --tblr-btn-color: #1a1a1a; --tblr-btn-hover-color: #1a1a1a; }
.dropdown-header, .subheader { color: var(--tblr-body-color, #1d273b) !important; font-weight: 700; font-size: 14px; text-transform: none; letter-spacing: 0; }

/* ---- the left menu: Tabler's .navbar-vertical, fixed, scrolling on its own ---- */
.snav.navbar-vertical { position: fixed; top: 0; bottom: 0; left: 0; width: var(--snav-w); z-index: 1030; overflow-y: auto; overscroll-behavior: contain;
  background: var(--tblr-bg-surface, #fff); border-right: 1px solid var(--tblr-border-color, #e6e7e9); align-items: flex-start; padding: 0; }
.snav .container-fluid { flex-direction: column; align-items: stretch; padding: 16px 12px 32px; }
.snav .navbar-brand { padding: 4px 8px 12px; margin: 0; }
.snav__brand { font-size: 18px; font-weight: 700; color: var(--tblr-body-color, #1d273b); text-decoration: none; }
.snav .navbar-collapse { display: block; }
.snav .navbar-nav { flex-direction: column; gap: 2px; }
.snav .nav-link { display: flex; align-items: center; padding: 8px 10px; border-radius: 6px; font-size: 14px; color: var(--tblr-body-color, #1d273b); font-weight: 500; }
.snav .nav-link:hover { background: rgba(var(--tblr-body-color-rgb, 44, 44, 44), .06); }
.snav .nav-item.active > .nav-link:not(.dropdown-toggle) { background: rgba(var(--tblr-body-color-rgb, 44, 44, 44), .1); font-weight: 700; }
/* a group: bold, full ink, a line above it, a caret that turns when it is open */
.snav .nav-item.dropdown { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--tblr-border-color, #e6e7e9); }
.snav .dropdown-toggle { font-weight: 700 !important; color: var(--tblr-body-color, #1d273b) !important; }   /* an open group stays bold (Tabler dims the active one) */
.snav .dropdown-toggle::after { content: ""; margin-left: auto; width: 7px; height: 7px; border: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease; }
.snav .dropdown-toggle.show::after { transform: rotate(45deg); }
.snav .dropdown-menu { position: static; display: none; float: none; border: 0; box-shadow: none; background: transparent; padding: 2px 0 4px 8px; margin: 0; min-width: 0; }
.snav .dropdown-menu.show { display: block; }
.snav .dropdown-item { display: block; padding: 6px 10px; border-radius: 6px; font-size: 14px; color: var(--tblr-body-color, #1d273b); white-space: normal; }
.snav .dropdown-item:hover { background: rgba(var(--tblr-body-color-rgb, 44, 44, 44), .06); }
.snav .dropdown-item.active { background: rgba(var(--tblr-body-color-rgb, 44, 44, 44), .1); color: var(--tblr-body-color, #1d273b); font-weight: 700; }
.snav__out { color: #66707a; font-size: 13px; }

/* Tabler also pushes .page-wrapper over by its sidebar's width; the body's padding already does that, so not twice
   (found moving the Overview, 3 Oct). And a 16px side gutter on a phone (Tabler's is 8px). */
body.has-snav .page-wrapper { margin-left: 0 !important; }
/* FULL WIDTH, EVERY PAGE (Peter, 3 Oct: "make the Signal pages full width"): no Tabler container caps the page */
.page-wrapper .container-xl, .page-wrapper .container-lg, .page-wrapper .container-md, .page-wrapper .container-narrow, .page-wrapper .container-tight { max-width: none; }
@media (max-width: 576px) { .page-wrapper .container-xl, .page-wrapper .container-fluid { padding-left: 16px; padding-right: 16px; } }

/* THE SHOWING MODE ON TABLER PAGES (5 Oct, found by the living-docs run): the page header carries the tint the old top
   bar did, so Demo and Everything still look different from Real at a glance */
html[data-data-view="demo"] .page-header { background: rgba(255, 224, 0, .14); border-bottom: 1px solid rgba(214, 170, 0, .45); }
html[data-data-view="all"] .page-header { background: rgba(247, 103, 7, .10); border-bottom: 1px solid rgba(247, 103, 7, .35); }
html[data-data-view] .page-header { margin: 0 -1px; padding-top: 12px; padding-bottom: 12px; }

/* the page moves over; the top bar keeps the theme buttons and the date, and loses what the menu now holds */
body.has-snav { padding-left: var(--snav-w); }
body.has-snav .topbar .section-switch,
body.has-snav .topbar .menu-dd { display: none; }

.snav-toggle { display: none; }
@media (max-width: 1000px) {
  body.has-snav { padding-left: 0; }
  .snav.navbar-vertical { transform: translateX(-100%); transition: transform .2s ease; }
  body.snav-open .snav.navbar-vertical { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .25); }
  .snav-toggle { display: flex; position: fixed; left: 12px; bottom: 16px; z-index: 1031; width: 44px; height: 44px; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid #ddd; background: #fff; color: var(--tblr-body-color, #1d273b); cursor: pointer; }
  .snav-toggle svg { width: 20px; height: 20px; }
}
@media print { .snav, .snav-toggle { display: none; } body.has-snav { padding-left: 0; } }