/* ==========================================================================
   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-of-type { 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-of-type {
  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.
   *-of-type, not *-child: the #breakBanner div (9.25.26) became the stack's last child,
   so nav:last-child stopped matching the secondary nav and its "Settings" label painted
   over the open account dropdown (9.27.26). Same for the bottom-edge border above. */
#topnav-stack > nav:first-of-type { position: relative; z-index: 2; }
#topnav-stack > nav:last-of-type  { 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; }

/* Customer-portal brand logo (white-label). Unlike TrackFlo's own logo, these are
   uploaded by customers and come in every shape — wide banners, square marks, tall
   lockups — so a fixed height like the rules above would blow out the navbar on a wide
   logo and shrink a square one to nothing. Constrain by a BOX instead and let the image
   scale inside it: never distorted, never overflowing, whatever was uploaded.
   Pairs with the 1200x400 normalization in utilities_logo_upload.py. */
.tf-brand-logo {
  max-height: 50px;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 576px) {
  .tf-brand-logo { max-height: 40px; max-width: 140px; }
}

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

/* --------------------------------------------------------------------------
   View transitions (8.10.26; scoped 9.14.26): a swap that opts in with
   `hx-swap="... transition:true"` fades/settles in browsers with the API. Kept
   fast — 150ms reads as responsiveness, not decoration.

   Opt-in only. This is a ROOT transition: it freezes the whole page for the
   duration and only one can run at a time, so putting it on anything that swaps
   concurrently (the big-number tiles) makes every transition but the last one
   abort. See the comment on the removed htmx-config meta in base.html.
   -------------------------------------------------------------------------- */
::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;
  }
}