/* ──────── App shell ──────── */

.app {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 60px;
  padding: 0 22px;
  background: linear-gradient(90deg, var(--bfc-navy), var(--bfc-indigo-dark));
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 30;
}

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand-logo {
  display: block;
  height: 44px;
  width: auto;
  border-radius: 9px;
  /* The logo asset carries its own (brighter) navy field; a subtle ring
     frames it as a deliberate badge on the darker topbar gradient. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* Mobile nav toggle — hidden on desktop, revealed by responsive.css. */
.nav-toggle {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.16); }
.nav-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(35, 177, 165, 0.45); }
.nav-toggle-bars { position: relative; display: block; width: 18px; height: 12px; }
.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 5px; }
.nav-toggle-bars span:nth-child(3) { top: 10px; }
.topbar.nav-open .nav-toggle-bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.topbar.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.topbar.nav-open .nav-toggle-bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); }

.module-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.module-tab {
  padding: 8px 14px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.module-tab:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.module-tab.active { background: rgba(255, 255, 255, 0.16); color: #fff; }
.module-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(35, 177, 165, 0.45);
}
/* "BFC Classic" — same-tab return to the old GUI (Sam, 2026-06-07).
   Sits at the end of the tab row, dimmer than module tabs until hovered. */
.module-tab-classic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.55);
}
.module-tab-classic:hover { color: #fff; }
.module-tab-classic svg { display: block; }

/* Grouped topbar dropdowns (app IA decision 2026-06-06: Option A).
   Click-to-open, Esc/outside-click closes; the group button highlights
   when the active page lives inside it. */
.module-group { position: relative; }
.module-group .group-btn {
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.module-group .caret { font-size: 10px; opacity: 0.7; }
.module-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  padding: 6px;
  background: var(--bfc-surface);
  border: 1px solid var(--bfc-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elev);
  z-index: 40;
}
.module-group.open .module-menu { display: block; }
.module-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--bfc-ink);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
}
.module-menu a:hover { background: var(--bfc-soft); }
.module-menu a.active { background: var(--bfc-soft-2); color: var(--bfc-indigo-dark); }
.module-menu a[hidden] { display: none; }

.topbar-session {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
  text-align: right;
}
.topbar-session .who { font-size: 13.5px; font-weight: 700; color: #fff; }
.topbar-session .ctx { font-size: 11.5px; color: rgba(255, 255, 255, 0.6); }

.logout-form { margin: 0; flex-shrink: 0; }
.logout-button {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  padding: 7px 11px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.logout-button:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.logout-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(35, 177, 165, 0.45);
}

body.booting .module-tabs {
  opacity: 0;
  pointer-events: none;
}
body.booting .topbar-session,
body.booting .logout-form { opacity: 0.55; }

/* ──────── Main / page scaffold ──────── */

.main {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 22px;
  /* Grid item: allow it to shrink below its content's intrinsic min-width so a
     wide table (e.g. the Deliver routes grid) scrolls inside its own wrapper
     instead of pushing the whole page wider than the viewport. */
  min-width: 0;
}

.boot-card {
  min-height: calc(100vh - 104px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 20px;
  text-align: center;
  color: var(--bfc-navy);
}
.boot-mark {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--bfc-navy), var(--bfc-indigo-dark));
  box-shadow: var(--shadow-elev);
}
.boot-mark img {
  width: 72px;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25);
}
.boot-kicker {
  color: var(--bfc-teal);
  font-weight: 850;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.boot-copy h1 {
  font-family: var(--font-display);
  margin: 0;
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: -.045em;
}
.boot-copy p {
  margin: 10px auto 0;
  color: var(--bfc-muted);
  line-height: 1.55;
  max-width: 520px;
}
.boot-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid rgba(35,177,165,.18);
  border-top-color: var(--bfc-teal);
  animation: boot-spin .8s linear infinite;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }

/* ──────── First-load skeleton (SPA boot overlay) ────────
   A full-viewport skeleton of the shell shown while the session + capabilities
   resolve, then cross-faded away to reveal the ready app underneath. Fixed to
   the viewport so a wide page never shifts or clips it (the old boot-card
   centered inside the topbar's intrinsic width, which overflowed and clipped
   the headline on phones). body.booting drives visibility; boot.js clears it. */
.boot {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--bfc-page);
  overflow: hidden;
  opacity: 1;
  transition: opacity .32s ease-out;
}
body:not(.booting) .boot {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .32s ease-out, visibility 0s .32s;
}

/* Calm, static placeholders — no shimmer. The only motion on the boot screen
   is the single progress bar in the status pill, which reads as one clean,
   natural loading cue instead of dozens of sweeping highlights. */
.sk {
  display: block;
  border-radius: 8px;
  background: rgba(19, 38, 82, .08);
}
.sk-light {
  background: rgba(255, 255, 255, .16);
}

/* skeleton topbar — mirrors the navy .topbar so the reveal is seamless */
.boot-topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 60px;
  padding: 0 22px;
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--bfc-navy), var(--bfc-indigo-dark));
}
.boot-logo { display: flex; align-items: center; flex-shrink: 0; }
.boot-logo img { height: 34px; width: auto; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
.boot-topbar-nav { display: flex; gap: 12px; flex: 1 1 auto; min-width: 0; }
.boot-topbar-nav i { width: 68px; height: 15px; border-radius: 999px; }
.boot-topbar-right { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.boot-sk-search { width: 130px; height: 30px; border-radius: 999px; }
.boot-sk-btn { width: 62px; height: 30px; border-radius: 999px; }

/* skeleton body — mirrors .main + the Home hero/grid */
.boot-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 22px;
  min-width: 0;
}
.boot-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 26px 28px;
  margin: 2px 0 20px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-elev);
  background:
    radial-gradient(1100px 320px at 8% -40%, rgba(63, 83, 216, .32), transparent 70%),
    radial-gradient(900px 300px at 92% 130%, rgba(35, 177, 165, .25), transparent 70%),
    linear-gradient(110deg, var(--bfc-navy-deep), var(--bfc-navy) 55%, var(--bfc-indigo-dark));
}
.boot-hero-text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* Match the real .home-kicker exactly (white @ .65) so the reveal reads as the
   placeholder sharpening into the real hero, not two layers of different color. */
.boot-main .boot-kicker { margin: 0; color: rgba(255, 255, 255, .65); }
.boot-sk-title { width: min(340px, 60vw); height: 30px; border-radius: 10px; }
.boot-sk-sub { width: min(200px, 42vw); height: 14px; }
.boot-sk-herosearch { width: min(360px, 100%); height: 46px; border-radius: 999px; flex-shrink: 0; }
.boot-sk-label { width: 118px; height: 12px; margin: 8px 4px 12px; }
.boot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 14px;
}
.boot-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 18px;
  min-height: 128px;
  background: var(--bfc-surface);
  border: 1px solid var(--bfc-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.boot-sk-cardtitle { width: 54%; height: 16px; border-radius: 6px; }
.boot-sk-line { width: 100%; height: 11px; }
.boot-sk-line.short { width: 68%; }

/* Loading splash — the branded "opening" panel on a translucent brand-blue
   scrim, floating over the skeleton so the page reads as loading *behind* it.
   The whole .boot layer fades out together once the app is ready. */
.boot-splash {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  padding: 28px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, rgba(11, 26, 60, .82), rgba(19, 38, 82, .78) 52%, rgba(28, 62, 149, .78));
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
/* the shared boot-mark/copy/spinner classes are light-on-navy here */
.boot-splash .boot-mark { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 22px 46px rgba(0, 0, 0, .34); }
.boot-splash .boot-copy h1 { color: #fff; }
.boot-splash .boot-copy p { color: rgba(255, 255, 255, .74); }
.boot-splash .boot-spinner { border-color: rgba(255, 255, 255, .20); border-top-color: var(--bfc-teal); }

@media (prefers-reduced-motion: reduce) {
  .boot, body:not(.booting) .boot { transition: none; }
  .boot-spinner { animation: none; }
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 18px;
}
.page-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--bfc-navy);
  letter-spacing: -0.01em;
  margin: 0;
}
.page-sub { color: var(--bfc-muted); font-size: 14px; margin: 3px 0 0; }