/* ==========================================================================
   TrackFlo base: element defaults and the app frame.
   Reads tokens from tf-tokens.css only — no hex literals.
   ========================================================================== */

body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  /* Hidden hover-tooltips on the rightmost big-number cards (width:280px, absolutely
     positioned, centered) extend ~130px past the viewport's right edge. opacity:0 /
     visibility:hidden elements still occupy their box, so they add to the page's
     scrollable width — producing an empty strip you can scroll into. Clip horizontal
     overflow here. `clip` (not `hidden`) does NOT establish a scroll container, so the
     sticky top nav and vertical scrolling are unaffected; inner .table-responsive
     scroll is its own container. */
  overflow-x: clip;
}

/* Disable the browser's elastic overscroll (rubber-banding) at the page edges, which
   lets you drag past the bottom and exposes empty space below the footer (reads as the
   footer being pushed up). `none` stops the bounce without affecting normal scrolling. */
html, body { overscroll-behavior-y: none; }

a { color: var(--bs-body-color); }

/* Ensures ScrollReveal loads hidden (6.11.21) */
.load-hidden { visibility: hidden; }

/* --------------------------------------------------------------------------
   z-index ladder.

   The sticky top nav sits at 2000. Bootstrap's own overlay defaults (offcanvas 1045,
   modal 1055/1050, popover 1070, tooltip 1080) are all BELOW that, so without these
   overrides the nav paints over an open modal and its backdrop never dims the header.
   Tooltips stay above modals so a tooltip opened inside a modal renders in front of it.
   -------------------------------------------------------------------------- */
/* One soft shadow on the whole stack. The two navs used to carry Bootstrap's heavy
   .shadow each — invisible on the old dark band, but on a light band it cast two
   stacked grey smears (gate review 8.10.26).

   The color declaration matters in classic mode: `color` inherits as a RESOLVED value,
   so the body's light-theme ink would flow into the nav's dark subtree unchanged.
   Re-declaring with the var re-evaluates it where the nav's own data-bs-theme applies —
   light text on the classic/dark band, ink on the light band. */
#topnav-stack        { z-index: 2000; box-shadow: var(--tf-shadow); color: var(--bs-body-color); }

/* The nav band's own surface — bg-body-tertiary came off the nav markup because the
   utility's !important would pin it; this token darkens the light band independently
   of wells and hovers. In dark/classic it resolves to brand ink. */
#topnav-stack > nav  { background-color: var(--tf-nav-bg); }

/* The bottom edge of the stack, all themes. */
#topnav-stack > nav:last-child { border-bottom: 1px solid var(--bs-border-color); }

/* Light nav hairlines (gate round 6): the default border (#e5e7eb) is LIGHTER than the
   #e2e5ea band, so the seam was invisible. A soft gray, well short of the too-dark
   round-4 value the flat look rejected. */
[data-bs-theme="light"] #topnav-stack {
  --bs-border-color: rgba(30, 32, 39, .14);
}

/* Classic bar separation: the ink band needs brighter white-tied hairlines and a
   shadow to keep its two bars distinct. */
[data-bs-theme="classic"] #topnav-stack {
  --bs-border-color: rgba(255, 255, 255, .28);
}
[data-bs-theme="classic"] #topnav-stack > nav:first-child {
  box-shadow: 0 2px 6px rgb(0 0 0 / .45);
  position: relative;      /* paint the shadow above the secondary bar */
  z-index: 2;
}

/* Primary-nav dropdown items looked dimmer than the secondary nav's: they sit inside
   .navbar-nav, whose --bs-nav-link-color is Bootstrap's navbar color at 65% OPACITY,
   while the secondary nav's bare .nav-links (no .navbar-nav ancestor) inherit the full
   body color. Equalize at full contrast in every theme. */
#topnav-stack .dropdown-menu .nav-link { color: var(--bs-body-color); }

/* On the ink band (classic carries data-bs-theme="dark" on the stack; full dark via the
   html ancestor) the nav labels rendered in the grayish dark body color (#E0E7F5) — they
   are anchors, so tf-base's `a` rule outranked inheritance. Lift them to the on-ink
   near-white for higher contrast (gate feedback 8.10.26). Placed after the dropdown rule
   above so it wins the specificity tie inside menus too — menus on the band are dark in
   both cases. */
[data-bs-theme="dark"] #topnav-stack .nav-link,
#topnav-stack[data-bs-theme="dark"] .nav-link {
  color: var(--tf-on-ink);
}
.offcanvas-backdrop  { z-index: 2049; }
.offcanvas           { z-index: 2050; }
.modal-backdrop      { z-index: 2059; }
.modal               { z-index: 2060; }
.popover             { z-index: 2070; }
.tooltip             { z-index: 2080; }

/* Tooltips are ink-on-light in EVERY theme (gate feedback 8.10.26: classic's nav
   tooltips rendered white-on-gray). Bootstrap derives tooltip colors from the palette
   at the insertion point — nav tooltips insert inside the classic band's dark subtree
   and inherit values never meant for them. Pinning to the ink tokens matches
   .tf-hover-tip and reads identically everywhere. */
.tooltip {
  --bs-tooltip-bg: var(--tf-ink);
  --bs-tooltip-color: var(--tf-on-ink);
}

/* Breathing room so submit buttons don't sit flush against the bottom edge. */
.offcanvas-body { padding-bottom: 2rem; }

/* Every .nav-item carries z-index:100 (for the hover underline), which makes each
   nav-item a stacking context that traps its own dropdown menu. The two stacked navbars
   then tie at 100, so the secondary nav (later in the DOM) paints over the primary nav's
   open dropdowns. Order the navs at the wrapper level so the whole primary nav outranks
   the whole secondary nav. */
#topnav-stack > nav:first-child { position: relative; z-index: 2; }
#topnav-stack > nav:last-child  { position: relative; z-index: 1; }

/* The nav hover underline (4.3.23). Was in custom_css.css, which lives inside
   minified_all_new.css — unlinking the bundle in the final task would otherwise delete
   this. The gradient is the brand green-to-blue and is deliberately theme-independent:
   it is what carries brand identity once the nav itself follows the theme. */
.nav-item { z-index: 100; }
.nav-item::after {
  content: '';
  display: block;
  width: 0%;
  height: 2px;
  background: var(--tf-brand-gradient);
  transition: .5s;
}
.nav-item:hover::after { width: 100%; }

/* --------------------------------------------------------------------------
   Theme-swapped logo. Both <img> tags are always in the DOM and CSS picks one, so the
   choice survives a client-side theme toggle — a server-rendered branch would go stale
   the moment the user switches.
   -------------------------------------------------------------------------- */
.tf-logo-dark  { display: none; }
.tf-logo-light { display: inline-block; }
[data-bs-theme="dark"] .tf-logo-light { display: none; }
[data-bs-theme="dark"] .tf-logo-dark  { display: inline-block; }

/* --------------------------------------------------------------------------
   Scrollbars (was #conversation-container in conversations.css; applied to any
   scroll region that opts in with .tf-thin-scroll).
   -------------------------------------------------------------------------- */
.tf-thin-scroll::-webkit-scrollbar             { width: 6px; }
.tf-thin-scroll::-webkit-scrollbar-track       { background: var(--bs-tertiary-bg); border-radius: 3px; }
.tf-thin-scroll::-webkit-scrollbar-thumb       { background: var(--tf-neutral); border-radius: 3px; }
.tf-thin-scroll::-webkit-scrollbar-thumb:hover { background: var(--bs-secondary-color); }

/* --------------------------------------------------------------------------
   Guided tour (driver.js) — welcome step only: wider popover + 16:9 video frame.
   -------------------------------------------------------------------------- */
.driver-popover.trackflo-tour-welcome { max-width: 520px; }
.driver-popover.trackflo-tour-welcome .tour-video-frame {
  position: relative; width: 100%; padding-top: 56.25%;
  margin-top: 12px; border-radius: var(--tf-radius-sm); overflow: hidden;
  background: var(--tf-ink);
}
.driver-popover.trackflo-tour-welcome .tour-video-frame video {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  border: 0; object-fit: contain; background: var(--tf-ink);
}

/* --------------------------------------------------------------------------
   View transitions (8.10.26): HTMX swaps fade/settle in browsers with the API
   (htmx-config meta in base.html). Kept fast — 150ms reads as responsiveness,
   not decoration.
   -------------------------------------------------------------------------- */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 150ms;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}