/* Desktop navbar surface for the official logo (Ryan, 2026-07-30: "Change
   the color of the bar?"). The two supplied logo renders are solid black
   ink with no reversed/light treatment, so in LIGHT theme the navbar itself
   moves to a light brand surface instead of recoloring the artwork.
   Bootstrap's navbar-light utility (see base.html's <nav> classes, chosen
   per current_theme) already supplies accessible dark-ink nav-link/toggler
   colors for a light bar; only the background needs a brand-specific value
   in place of Bootstrap's generic bg-light gray.

   Ryan, 2026-07-31: "The dark mode bar needs to be dark" -- a light band
   sitting on an otherwise-dark page read as a mistake, not a choice. DARK
   theme keeps the navbar back on Bootstrap's original bg-dark (#212529),
   proven good before this change, paired with navbar-dark (base.html) and
   the generated white-ink reversed logo. #eef4f0 is the app's existing
   light brand surface tint, frozen here rather than referencing the CSS
   custom property (which itself flips dark in [data-bs-theme="dark"] --
   using the frozen literal keeps this rule the single place both states
   are decided, instead of splitting the decision across two files). */
.tr-navbar {
  background: #eef4f0 !important;
  border-bottom: 1px solid #cfe0d5;
}

/* The link precedes the opaque navbar in source order, so focused keyboard
   access needs an explicit layer to remain visibly above that later paint. */
.tr-skip-link { z-index: 1100; }
[data-bs-theme="dark"] .tr-navbar {
  background: #212529 !important;
  border-bottom-color: #343a40;
}

/* The public pages can preview dark mode without a server round-trip, so the
   navbar may still carry its server-rendered `navbar-light` class for the
   first frame. Keep its links readable in that state too. Dropping the color
   transition avoids a brief dark-on-dark midpoint while the theme changes. */
[data-bs-theme="dark"] .tr-navbar .nav-link {
  color: #dee2e6;
  transition: none;
}
[data-bs-theme="dark"] .tr-navbar .nav-link:hover,
[data-bs-theme="dark"] .tr-navbar .nav-link:focus {
  color: #fff;
}

/* Kid navigation used to borrow `text-light` and `btn-outline-light` from
   the old charcoal navbar.  On the current pale brand surface that made the
   child name and the two device controls nearly disappear (about 1.06:1).
   These controls own a two-theme palette now: dark ink on sage in light
   mode, light ink on charcoal in dark mode.  The disabled colors stay
   opaque so they remain readable instead of being faded below AA. */
.tr-navbar .kid-nav-status {
  color: #24402e;
  font-weight: 650;
}
.tr-navbar .nav-link.kid-nav-control {
  color: #24402e;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.tr-navbar .btn-kid-nav {
  --bs-btn-color: #24402e;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #24402e;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #24402e;
  --bs-btn-hover-border-color: #24402e;
  --bs-btn-focus-shadow-rgb: 10, 88, 202;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #172a1e;
  --bs-btn-active-border-color: #172a1e;
  --bs-btn-disabled-color: #495057;
  --bs-btn-disabled-bg: #fff;
  --bs-btn-disabled-border-color: #495057;
  --bs-btn-disabled-opacity: 1;
  transition: none;
}
.tr-navbar .kid-nav-control:focus-visible {
  outline: 3px solid #0a58ca;
  outline-offset: 3px;
}
[data-bs-theme="dark"] .tr-navbar .kid-nav-status {
  color: #f8f9fa;
}
[data-bs-theme="dark"] .tr-navbar .nav-link.kid-nav-control {
  color: #f8f9fa;
}
[data-bs-theme="dark"] .tr-navbar .btn-kid-nav {
  --bs-btn-color: #f8f9fa;
  --bs-btn-bg: #292f33;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #212529;
  --bs-btn-hover-bg: #f8f9fa;
  --bs-btn-hover-border-color: #f8f9fa;
  --bs-btn-focus-shadow-rgb: 255, 193, 7;
  --bs-btn-active-color: #212529;
  --bs-btn-active-bg: #dee2e6;
  --bs-btn-active-border-color: #dee2e6;
  --bs-btn-disabled-color: #adb5bd;
  --bs-btn-disabled-bg: #292f33;
  --bs-btn-disabled-border-color: #adb5bd;
}
[data-bs-theme="dark"] .tr-navbar .kid-nav-control:focus-visible {
  outline-color: #ffc107;
}

/* The collapsed-menu affordance is itself a kid-header control on phones.
   Give its boundary the same unmistakable at-rest treatment as the actions
   inside the menu; Bootstrap's default translucent border was easy to miss
   on the sage navbar even though the hamburger glyph was technically there. */
.tr-navbar .navbar-toggler {
  border-color: #24402e;
  border-width: 2px;
}
[data-bs-theme="dark"] .tr-navbar .navbar-toggler {
  border-color: #f8f9fa;
}

/* Ryan, 2026-07-31: web chrome for navigating the app, not part of any
   printed document -- a family or district reading a printed page has no
   use for "Dashboard Calendar Plan..." at the top of it. Same treatment
   as base.html's existing footer print rule. */
@media print {
  .navbar { display: none !important; }
}