/* =====================================================================
   AURORA — Air Force Design System (349th ASTS Fitness)
   Wave 1: tokens + global base + Bootstrap chrome restyle + components.
   Official AF palette, navy-dominant, gold as a restrained premium accent.
   Component classes are namespaced .af-* so pages can opt in (Wave 2).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------- */
:root {
  /* Official Air Force palette */
  --af-blue:#003087;
  --af-navy:#0A1733;
  --af-cobalt:#0B3E9C;
  --af-gold:#FFC72C;
  --af-gold-soft:#F2C14E;
  --af-silver:#B0B7BF;
  --af-cloud:#EEF2F9;
  --af-ink:#0A1733;
  --af-line:rgba(10,23,51,.10);

  /* Derived / supporting tokens */
  --af-white:#ffffff;
  --af-muted:#52607a;            /* readable body-secondary on white */
  --af-muted-soft:#6b7892;
  --af-blue-tint:rgba(0,48,135,.08);
  --af-navy-grad:linear-gradient(135deg,#0A1733 0%, #003087 54%, #06245f 100%);
  --af-gold-grad:linear-gradient(135deg,var(--af-gold),var(--af-gold-soft));

  /* Destructive. Added when .af-btn-danger was consolidated out of 26 inline
     template blocks that had drifted across five different reds. */
  --af-danger:#b42318;
  --af-danger-line:rgba(180,35,24,.4);
  --af-danger-grad:linear-gradient(135deg,#b21f2d,#8e1620);

  /* Radii */
  --af-r-sm:10px;
  --af-r-md:14px;
  --af-r-lg:18px;
  --af-r-xl:24px;
  --af-r-pill:100px;

  /* Shadows */
  --af-shadow-sm:0 8px 20px -16px rgba(10,23,51,.55);
  --af-shadow-md:0 14px 34px -24px rgba(10,23,51,.5);
  --af-shadow-lg:0 26px 56px -28px rgba(10,23,51,.6);
  --af-shadow-hero:0 30px 70px -28px rgba(10,23,51,.6);

  /* Motion */
  --af-ease:cubic-bezier(.2,.9,.25,1.4);
  --af-t:.3s;
}

/* ---------------------------------------------------------------------
   2. GLOBAL BASE
   ------------------------------------------------------------------- */
body {
  background:var(--af-cloud);
  color:var(--af-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,
    "Apple Color Emoji","Segoe UI Emoji",sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:.005em;
}

/* Links — navy by default, cobalt on hover. (base.css strips underlines.) */
a {
  color:var(--af-blue);
  transition:color var(--af-t) ease;
}
a:hover { color:var(--af-cobalt); }

/* Accessible focus ring everywhere (keyboard users) */
:focus-visible {
  outline:3px solid rgba(0,48,135,.45);
  outline-offset:2px;
  border-radius:4px;
}

/* Selection */
::selection { background:rgba(255,199,44,.35); color:var(--af-navy); }

/* ---------------------------------------------------------------------
   3. CHROME — restyle existing Bootstrap markup (no markup changes req'd)
   _base.html uses: .navbar.navbar-dark.bg-dark  and  .footer.bg-dark
   ------------------------------------------------------------------- */

/* ----- Navbar ----- */
.navbar.bg-dark {
  background:var(--af-navy-grad) !important;
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 30px -22px rgba(10,23,51,.9);
  backdrop-filter:saturate(140%);
}
.navbar.navbar-dark .navbar-brand img { filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }

/* Nav links: clean white, thin gold underline on hover/active only */
.navbar.navbar-dark .nav-link {
  position:relative;
  color:rgba(231,239,255,.82) !important;
  font-weight:500;
  padding-top:.5rem;
  padding-bottom:.5rem;
  transition:color var(--af-t) ease;
}
.navbar.navbar-dark .nav-link::after {
  content:"";
  position:absolute;
  left:.75rem; right:.75rem; bottom:.28rem;
  height:2px;
  border-radius:2px;
  background:var(--af-gold-grad);
  transform:scaleX(0);
  transform-origin:left center;
  opacity:0;
  transition:transform var(--af-t) var(--af-ease),opacity var(--af-t) ease;
}
.navbar.navbar-dark .nav-link:hover,
.navbar.navbar-dark .nav-link:focus,
.navbar.navbar-dark .nav-link.active,
.navbar.navbar-dark .nav-link[aria-current="page"] {
  color:#fff !important;
  opacity:1;
}
.navbar.navbar-dark .nav-link:hover::after,
.navbar.navbar-dark .nav-link:focus::after,
.navbar.navbar-dark .nav-link.active::after,
.navbar.navbar-dark .nav-link.show::after { transform:scaleX(1); opacity:1; }

/* Keep the whole navbar (and therefore its dropdowns) above page content.
   Some pages give #page-container / hero sections a stacking context that was
   painting over open dropdown menus. */
.navbar { position:relative; z-index:1030; }

/* Dropdown menus in AF style */
.navbar .dropdown-menu {
  z-index:1031;
  border:1px solid var(--af-line);
  border-radius:var(--af-r-md);
  box-shadow:var(--af-shadow-md);
  padding:.4rem;
  margin-top:.5rem;
}
.navbar .dropdown-item {
  border-radius:var(--af-r-sm);
  font-weight:500;
  color:var(--af-ink);
  padding:.5rem .8rem;
  transition:background var(--af-t) ease,color var(--af-t) ease;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background:var(--af-blue-tint);
  color:var(--af-blue);
}
/* Logout / Login-out is a <button> in a <form>; strip native button + any
   Bootstrap .btn chrome so it inherits the anchor .nav-link box exactly and
   lines up with its neighbours. */
.navbar.navbar-dark button.nav-link {
  border:0;
  background:none;
  box-shadow:none;
  font:inherit;
  cursor:pointer;
  color:rgba(231,239,255,.82) !important;
}
.navbar.navbar-dark button.nav-link:hover { color:#fff !important; }
.navbar .nav-item > form { display:flex; align-items:center; margin:0; }

/* ----- Footer ----- */
.footer.bg-dark {
  background:var(--af-navy-grad) !important;
  border-top:2px solid transparent;
  border-image:var(--af-gold-grad) 1;
}
.footer .col h1 { color:rgba(255,255,255,.45); }
.footer .col ul li { color:var(--af-silver); }
.footer .col ul li:hover { color:#fff; }
.footer a.link-light { transition:color var(--af-t) ease; }
.footer a.link-light:hover { color:var(--af-gold) !important; }
.footer .social a { transition:color var(--af-t) ease,transform var(--af-t) var(--af-ease); display:inline-block; }
.footer .social a:hover { color:var(--af-gold) !important; transform:translateY(-2px); }

/* ---------------------------------------------------------------------
   4. BOOTSTRAP BUTTON NUDGE  (toward AF look, without breaking layout)
   ------------------------------------------------------------------- */
.btn { border-radius:var(--af-r-pill); font-weight:600; transition:transform var(--af-t) var(--af-ease),box-shadow var(--af-t) ease,background var(--af-t) ease; }
.btn:active { transform:translateY(0); }

.btn-primary {
  --bs-btn-bg:var(--af-blue);
  --bs-btn-border-color:var(--af-blue);
  --bs-btn-hover-bg:var(--af-cobalt);
  --bs-btn-hover-border-color:var(--af-cobalt);
  --bs-btn-active-bg:var(--af-navy);
  --bs-btn-active-border-color:var(--af-navy);
  --bs-btn-focus-shadow-rgb:11,62,156;
  box-shadow:0 12px 24px -14px rgba(0,48,135,.75);
}
.btn-primary:hover { transform:translateY(-1px); }

.btn-outline-primary {
  --bs-btn-color:var(--af-blue);
  --bs-btn-border-color:rgba(0,48,135,.5);
  --bs-btn-hover-bg:var(--af-blue);
  --bs-btn-hover-border-color:var(--af-blue);
  --bs-btn-active-bg:var(--af-navy);
}

/* ---------------------------------------------------------------------
   5. REUSABLE COMPONENTS  (.af-*)
   ------------------------------------------------------------------- */

/* ---- HERO ---- */
.af-hero {
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--af-r-xl);
  padding:clamp(2.25rem,5vw,4rem) clamp(1.25rem,4vw,3.5rem) clamp(2.5rem,6vw,4.25rem);
  color:#fff;
  background:
    radial-gradient(120% 140% at 85% -10%, rgba(255,199,44,.18) 0%, rgba(255,199,44,0) 44%),
    radial-gradient(90% 120% at 8% 110%, rgba(11,62,156,.55) 0%, rgba(11,62,156,0) 55%),
    var(--af-navy-grad);
  box-shadow:var(--af-shadow-hero);
}
.af-hero::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 48% at 78% 16%, rgba(242,193,78,.14) 0%, transparent 70%),
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.10) 0 1px, transparent 1.4px) 0 0/46px 46px;
  mix-blend-mode:screen; opacity:.85;
}
.af-hero > * { position:relative; z-index:1; }
.af-hero h1, .af-hero .af-hero-title {
  color:#fff; font-weight:800; line-height:1.05; letter-spacing:-.02em;
  font-size:clamp(1.9rem,5vw,3.1rem); margin:1rem 0 .6rem;
}
.af-hero p, .af-hero .af-hero-sub {
  color:rgba(231,239,255,.85);
  font-size:clamp(1rem,2vw,1.15rem);
  max-width:50ch; margin:0;
}
.af-hero.text-center p, .af-hero.text-center .af-hero-sub { margin-left:auto; margin-right:auto; }

/* ---- EYEBROW (small gold pill) ---- */
.af-eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--af-gold); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; font-size:.72rem;
  padding:.4rem .9rem; border-radius:var(--af-r-pill);
  background:rgba(255,199,44,.10);
  border:1px solid rgba(255,199,44,.32);
  backdrop-filter:blur(6px);
}

/* ---- PAGE HEADER (lighter than hero, for interior pages) ---- */
.af-page-header {
  margin:0 0 1.75rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--af-line);
}
.af-page-header h1, .af-page-header .af-page-title {
  color:var(--af-navy); font-weight:800; letter-spacing:-.01em;
  font-size:clamp(1.5rem,3.4vw,2.1rem); margin:.35rem 0 .25rem;
}
.af-page-header p { color:var(--af-muted); margin:0; max-width:60ch; }

/* ---- CARD ---- */
.af-card {
  position:relative; overflow:hidden;
  background:var(--af-white);
  border:1px solid var(--af-line);
  border-radius:var(--af-r-lg);
  box-shadow:var(--af-shadow-md);
  padding:1.4rem 1.5rem;
  transition:transform .35s var(--af-ease),box-shadow .35s ease,border-color .35s ease;
}
.af-card:hover {
  transform:translateY(-3px);
  border-color:rgba(0,48,135,.22);
  box-shadow:0 22px 44px -22px rgba(10,23,51,.5);
}
.af-card-accent { border-left:3px solid var(--af-gold); }
.af-card-title {
  font-weight:700; color:var(--af-navy);
  font-size:1.1rem; margin:0 0 .5rem;
}

/* ---- BUTTONS (.af-*) ---- */
.af-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; font-size:.95rem; line-height:1;
  padding:.7rem 1.35rem; border-radius:var(--af-r-pill);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform var(--af-t) var(--af-ease),box-shadow var(--af-t) ease,
    background var(--af-t) ease,color var(--af-t) ease,border-color var(--af-t) ease;
}
.af-btn:active { transform:translateY(0); }

/* Gold — PRIMARY CTA ONLY */
.af-btn-gold {
  color:var(--af-navy);
  background:var(--af-gold-grad);
  box-shadow:0 12px 26px -10px rgba(255,199,44,.6);
}
.af-btn-gold:hover { color:var(--af-navy); transform:translateY(-2px); box-shadow:0 16px 32px -10px rgba(255,199,44,.75); }

/* Navy — solid secondary action */
.af-btn-navy {
  color:#fff;
  background:linear-gradient(135deg,var(--af-navy),var(--af-blue));
  box-shadow:0 12px 26px -14px rgba(0,48,135,.7);
}
.af-btn-navy:hover { color:#fff; transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(0,48,135,.8); }

/* Outline — tertiary */
.af-btn-outline {
  color:var(--af-blue);
  background:transparent;
  border-color:rgba(0,48,135,.4);
}
.af-btn-outline:hover { color:#fff; background:var(--af-blue); border-color:var(--af-blue); transform:translateY(-1px); }

/* Danger — TWO deliberate roles, mirroring the filled/outline split above.
   Both were previously undefined here and re-declared inline in 26 templates,
   so which one you got depended on the page you were standing on.

   .af-btn-danger        tertiary destructive: a delete sitting among many rows
                         on a list or detail page. Quiet until hovered, so a
                         table of records is not a wall of red.
   .af-btn-danger-solid  primary destructive: the confirm button on a dedicated
                         "are you sure?" page, where destroying the record is
                         the entire purpose of the screen.

   Keep both. Collapsing them into one would either shout on every list row or
   make the final confirm read as a secondary link. */
.af-btn-danger {
  color:var(--af-danger);
  background:transparent;
  border-color:var(--af-danger-line);
}
.af-btn-danger:hover { color:#fff; background:var(--af-danger); border-color:var(--af-danger); transform:translateY(-1px); }

.af-btn-danger-solid {
  color:#fff;
  background:var(--af-danger-grad);
  box-shadow:0 12px 26px -14px rgba(178,31,45,.7);
}
.af-btn-danger-solid:hover { color:#fff; transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(178,31,45,.85); }

/* Compact modifier for buttons in dense table rows. */
.af-btn-sm { padding:.4rem .85rem; font-size:.82rem; }

/* ---- CHIP ---- */
.af-chip {
  display:inline-flex; align-items:center; gap:.45rem;
  border:1px solid var(--af-line);
  background:rgba(255,255,255,.85);
  color:var(--af-navy); font-weight:600; font-size:.86rem;
  padding:.5rem 1rem; border-radius:var(--af-r-pill); cursor:pointer;
  white-space:nowrap; box-shadow:var(--af-shadow-sm);
  transition:transform var(--af-t) var(--af-ease),background var(--af-t) ease,
    color var(--af-t) ease,border-color var(--af-t) ease,box-shadow var(--af-t) ease;
}
.af-chip:hover { transform:translateY(-2px); border-color:rgba(0,48,135,.35); }
.af-chip.active {
  background:linear-gradient(135deg,var(--af-navy),var(--af-blue));
  color:#fff; border-color:transparent;
  box-shadow:0 14px 28px -12px rgba(0,48,135,.65);
}
.af-chip.active i { color:var(--af-gold); }   /* gold accent only when active */

/* ---- SEARCH (frosted, for use over navy heroes) ---- */
.af-search {
  position:relative; display:flex; align-items:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.30);
  border-radius:var(--af-r-pill);
  padding:.35rem .4rem .35rem 1.2rem;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 22px 50px -22px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.35);
  transition:border-color .35s ease,box-shadow .35s ease,transform .35s var(--af-ease);
}
.af-search:focus-within {
  border-color:rgba(255,199,44,.65);
  transform:translateY(-2px);
  box-shadow:0 26px 60px -22px rgba(0,0,0,.55),0 0 0 4px rgba(255,199,44,.2),inset 0 1px 0 rgba(255,255,255,.4);
}
.af-search input {
  flex:1; border:0; background:transparent; outline:none; color:#fff;
  font-size:1.05rem; padding:.7rem .9rem; min-width:0;
}
.af-search input::placeholder { color:rgba(231,239,255,.7); }
.af-search i { color:rgba(255,255,255,.85); }

/* ---- STAT TILE ---- */
.af-stat {
  background:var(--af-white);
  border:1px solid var(--af-line);
  border-radius:var(--af-r-lg);
  box-shadow:var(--af-shadow-md);
  padding:1.25rem 1.4rem;
  display:flex; flex-direction:column; gap:.2rem;
}
.af-stat .af-stat-num {
  font-size:clamp(1.8rem,3.5vw,2.4rem); font-weight:800; line-height:1;
  color:var(--af-navy); letter-spacing:-.02em;
}
.af-stat.af-stat-gold .af-stat-num { color:var(--af-gold); text-shadow:0 1px 0 rgba(10,23,51,.08); }
.af-stat .af-stat-label {
  font-size:.78rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--af-muted);
}

/* ---- TABLE ---- */
.af-table-wrap {
  border:1px solid var(--af-line);
  border-radius:var(--af-r-lg);
  /* overflow-x:auto (was overflow:hidden) so tables wider than the container
     scroll horizontally instead of being clipped with no way to reach the
     right-hand columns. */
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  box-shadow:var(--af-shadow-md);
  background:var(--af-white);
}
.af-table { width:100%; border-collapse:collapse; margin:0; }
.af-table thead th {
  background:var(--af-cloud);
  color:var(--af-navy);
  font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  text-align:left; padding:.85rem 1rem;
  border-bottom:1px solid var(--af-line);
}
.af-table tbody td {
  padding:.85rem 1rem;
  border-bottom:1px solid var(--af-line);
  color:var(--af-ink); font-size:.95rem;
}
.af-table tbody tr:last-child td { border-bottom:0; }
.af-table tbody tr { transition:background var(--af-t) ease; }
.af-table tbody tr:hover { background:var(--af-blue-tint); }

/* ---- BADGE ---- */
.af-badge {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--af-blue);
  background:var(--af-blue-tint);
  border:1px solid rgba(0,48,135,.14);
  padding:.22rem .6rem; border-radius:var(--af-r-pill);
}
.af-badge.af-badge-gold {
  color:var(--af-navy);
  background:rgba(255,199,44,.16);
  border-color:rgba(242,193,78,.5);
}
.af-badge.af-badge-silver {
  color:#43506a;
  background:rgba(176,183,191,.22);
  border-color:rgba(176,183,191,.5);
}

/* ---- SECTION TITLE ---- */
.af-section-title {
  display:flex; align-items:center; gap:.75rem;
  font-weight:800; color:var(--af-navy); letter-spacing:-.01em;
  font-size:clamp(1.2rem,2.4vw,1.55rem);
  margin:0 0 1rem;
}
.af-section-title::before {
  content:""; flex:0 0 auto;
  width:4px; height:1.3em; border-radius:4px;
  background:var(--af-gold-grad);   /* thin gold accent line */
}

/* ---- EMPTY STATE ---- */
.af-empty {
  max-width:560px; margin:1.5rem auto 0; text-align:center;
  padding:2.5rem 1.5rem; border-radius:var(--af-r-xl);
  background:linear-gradient(180deg,#fff,#f3f6fc);
  border:1px dashed rgba(0,48,135,.3);
}
.af-empty .af-empty-ico {
  width:74px; height:74px; border-radius:50%; margin:0 auto 1rem;
  display:grid; place-items:center; font-size:1.7rem; color:var(--af-blue);
  background:linear-gradient(135deg,rgba(0,48,135,.1),rgba(255,199,44,.16));
}
.af-empty h3 { font-weight:800; color:var(--af-navy); margin:0 0 .35rem; font-size:1.25rem; }
.af-empty p { color:var(--af-muted); margin:0 0 1.1rem; }

/* ---------------------------------------------------------------------
   6. TOM SELECT DROPDOWN — opaque panel (vendor bootstrap5 compat)
   ------------------------------------------------------------------- */
/* The vendored Tom Select bootstrap5 theme paints the dropdown panel with
   `background: var(--bs-body-bg)`. That CSS variable only exists in Bootstrap
   5.2+, but the fitness site still loads Bootstrap 5.0.2, so it resolves to
   nothing → a fully transparent panel that lets the fields underneath show
   through when the menu is open (options overlapping the Date/Description
   fields). Force an opaque panel — preferring the bs var where it IS defined
   (e.g. the VCO section's Bootstrap 5.3, so that area is unchanged). The
   `.ts-wrapper` prefix lifts specificity above the vendor rule, so this wins
   regardless of stylesheet load order. */
.ts-wrapper .ts-dropdown {
  background: var(--bs-body-bg, #fff);
}

/* ---------------------------------------------------------------------
   7. REDUCED MOTION
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}