/* ============================================================================
   JerryAir — ja_styles.css  (shared crew-center stylesheet)
   Loaded site-wide on the `dash` layout via theme partials/head.blade.php.

   This file is the single source of truth for the reusable JerryAir UI
   vocabulary. Build NEW pages on these primitives instead of re-declaring
   card / badge / button / table styles per page. Page-specific sheets
   (schedules-map.css, jerryair-news.css, jumpseat.css, pirep-viewer.css)
   should only hold styles that are genuinely unique to that page.

   ---------------------------------------------------------------------------
   DESIGN TOKENS (see :root below; light + dark variants are defined together)
     --app-bg / --app-surface / --app-surface-solid / --app-border
     --app-text / --app-muted / --app-subtle
     --app-primary / --app-primary-2 / --app-primary-soft
     --app-orange / --app-success
     --radius-sm / -md / -lg / -xl / -pill / --sidebar-width
     --btn-h / -compact / -chip / --icon-btn-size
     --accent-{primary,success,warning,danger,neutral,info}-{solid,tint}
       plus a -fg for each: the six semantic roles, each in a filled form
       (for things you press) and a washed form (for things you read). Reach
       for these rather than a hex whenever a colour has to MEAN something —
       they swap per theme and every pair is contrast-checked.
     --row-wash / --row-wash-strong  table stripe + hover
   Typography weights/sizes live in typography-operations.css (an intentional
   overlay layered on the SAME selectors — that is by design, not duplication).

   REUSABLE COMPONENTS (canonical class names — reuse, don't fork):
     Cards / tiles ....... .status-card, .form-card-header, .table-card-header
     Stat blocks ......... .hero-stats, .stat-item, .quick-grid, .three-up
     Buttons ............. .btn-orange, .btn-outline-orange, .btn-soft-primary,
                           .icon-btn, .avatar-btn
     Badges / status ..... .status-chip (+ state modifiers), .rank-badge
     Flash / alerts ...... .flash-alert (+ .flash-content; tokens --flash-*)
     Tables .............. .app-table (+ responsive variants), .table-person
     Links ............... .entity-link, .airport-link, .link-strong,
                           .inline-link, .link-subtle
     Headings ............ .page-heading, .profile-heading
     Forms ............... .app-check, .app-switch, .app-radio, .file-drop
     Lists ............... .key-value-list, .feed-item

   PLAIN BOOTSTRAP CLASSES are normalised at the very bottom of this file.
   `table`, `alert alert-*`, `btn btn-primary`, `badge bg-*`, `card`,
   `pagination`, `nav-tabs`, `progress` and friends are re-pointed at the
   tokens above by overriding Bootstrap's own --bs-* variables, so the views
   that were built on them (most of the older ones) theme correctly without
   being rewritten. Prefer the canonical components for anything new; the
   normalisation is a floor, not a licence.
   ============================================================================ */

:root {
  /* Native controls the browser paints for itself — the option list a
     <select> opens, scrollbars, date pickers, autofill — take their colours
     from here, not from any rule below. Without it a dark theme sets light
     text on a select while the popup keeps the user agent's white ground,
     which is white-on-white until a row is highlighted. */
  color-scheme: light;
  --app-bg: #F3F5F7;
  --app-surface: rgba(255, 255, 255, .86);
  --app-surface-solid: #ffffff;
  --app-border: rgba(32, 54, 102, .10);
  /* An edge does three jobs — resting, hovered, focused — and the sheets had
     seventeen alphas between them: the dark theme alone spelled a hover edge
     .36, .38, .40, .46, .48 and .72. The median of each cluster becomes its
     step. */
  --app-border-hover: rgba(0, 56, 117, .26);
  --app-border-focus: rgba(0, 56, 117, .40);
  --app-border-accent: rgba(0, 56, 117, .28);
  --app-text: #141250;
  --app-muted: #8a91b3;
  --app-subtle: #69729B;
  --app-primary: #003875;
  --app-primary-2: #003875;
  --app-primary-soft: rgba(0, 56, 117, .10);
  --app-orange: #F58932;
  --app-success: #07b96d;
  --app-shadow: none;
  --sidebar-width: 290px;
  /* ---- Geometry: corners ----
     Four jobs and a pill. xl/lg/md/pill already existed; sm is new, and the
     literals have been folded in. There were nine distinct card corners in
     play — 8, 10, 12, 14, 16, 18 plus one-off 19s, 20s and 22s — so a
     surface's corner told you which page you were on rather than what kind
     of surface it was.

     sm    chips, tags, tooltips, small overlays
     md    form controls, links, tiles — anything inset in a card
     lg    the cards, panels and modals themselves
     xl    the largest surfaces: dashboard shell, table shell, page hero

     Hairline geometry stays raw: a 3px legend swatch, a 6px progress rail,
     a 17px chart bar, the slider track and the map labels are shapes whose
     radius is the whole form, not a corner on one. */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Geometry: control heights ----
     Eight rules described "a full-size action button" and split 42/44 between
     them for no reason, while the route-card buttons carried three generations
     of override — 44px, then height:auto !important, then 34px !important —
     each killing the one before.

     44px is the step because the accessibility rule already sets a 44px
     min-height floor on interactive chrome; anything below it was being
     clamped back up anyway. */
  --btn-h: 44px;
  --btn-h-compact: 34px;
  --btn-h-chip: 30px;
  --icon-btn-size: 42px;

  --shadow-pop: 0 18px 50px rgba(45, 57, 102, .16);
  --chip-expired-fg: #A93612;

  /* ---- Standardised badge / chip / pill scale (2026 refactor) ----
     One size + shape for every status label across all pages. Variant
     COLOURS stay in their own rules; only size/shape is unified here.
     Change these five values to retune every badge site-wide.

     Size, weight and tracking read from the type scale rather than repeating
     it: a badge is small uppercase page type, and when it named .75rem/700/
     .01em of its own it drifted a step off every label beside it. */
  --ja-badge-font-size: var(--type-size-xs);
  --ja-badge-padding: 5px 10px;
  --ja-badge-weight: var(--type-weight-bold);
  --ja-badge-radius: var(--radius-pill);
  --ja-badge-letter-spacing: var(--letter-wide);

  /* ---- Semantic accents: the six roles, in both of their two forms --------
     Every coloured control on the dashboard is one of six meanings — primary,
     success, warning, danger, neutral, info — wearing one of two costumes:

       SOLID  a filled block that carries an action.  `-fg` is the text on it.
       TINT   a soft wash behind text, for chips, badges and alerts.

     The chip variants below already spoke this vocabulary; it is lifted into
     tokens here so a button, a badge, a table and an alert of the same
     meaning cannot drift apart, and so a page sheet needing "the warning
     colour" has one to name instead of a hex to guess at.

     Every pair listed here clears 4.5:1 against its own foreground in both
     themes. The solid fills change between themes rather than the text
     colour: a dark page needs a light fill to read as a raised block, and a
     light fill takes dark text, so on dark every solid is inked in the page's
     own near-black navy. That is the rule the buttons already followed by
     hand (.btn-soft-primary:hover, .cargo-load-pill.is-active) — the orange
     dispatch CTA was the one that did not, and sat at 2.5:1. */
  --accent-primary-solid: #003875;
  --accent-primary-solid-fg: #ffffff;
  --accent-primary-tint: #EAF1FF;
  --accent-primary-tint-fg: #003875;

  --accent-success-solid: #006C43;
  --accent-success-solid-fg: #ffffff;
  --accent-success-tint: #DDF8EC;
  --accent-success-tint-fg: #006C43;

  /* The brand orange itself, kept exactly, and inked in navy rather than
     white. White on it measures 2.5:1; the same fill under #00182E measures
     7.3:1, so the colour that makes this airline recognisable does not have
     to be darkened into an anonymous amber to be readable. */
  --accent-warning-solid: #F58932;
  --accent-warning-solid-fg: #00182E;
  --accent-warning-tint: #FFF2D9;
  --accent-warning-tint-fg: #8A4A00;

  --accent-danger-solid: #A93612;
  --accent-danger-solid-fg: #ffffff;
  --accent-danger-tint: #FFE5DD;
  --accent-danger-tint-fg: #A93612;

  --accent-neutral-solid: #4E5A73;
  --accent-neutral-solid-fg: #ffffff;
  --accent-neutral-tint: #EEF2F7;
  --accent-neutral-tint-fg: #4E5A73;

  --accent-info-solid: #003875;
  --accent-info-solid-fg: #ffffff;
  --accent-info-tint: var(--app-primary-soft);
  --accent-info-tint-fg: #003875;

  /* ---- Row washes --------------------------------------------------------
     The two alphas a table row is ever painted with. .app-table had them
     inline; naming them lets a plain Bootstrap .table land on the same
     stripe and the same hover, which is most of why a bare table looked
     like it belonged to a different product. */
  --row-wash: rgba(0, 56, 117, .028);
  --row-wash-strong: rgba(0, 56, 117, .055);
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --app-bg: #00182e;
  --app-surface: rgba(5, 30, 55, .86);
  --app-surface-solid: #061d35;
  --app-border: rgba(132, 178, 255, .18);
  --app-border-hover: rgba(126, 192, 255, .40);
  --app-border-focus: rgba(126, 192, 255, .72);
  --app-border-accent: rgba(126, 192, 255, .38);
  --app-text: #f4f8ff;
  --app-muted: #8ca2c4;
  --app-subtle: #A7B7D2;
  --app-primary: #003875;
  --app-primary-2: #4DA3FF;
  --app-primary-soft: rgba(77, 163, 255, .16);
  --app-orange: #F58932;
  --app-success: #00e49a;
  --app-shadow: none;

  /* Solids invert: a light fill on the dark ground, inked in the page's own
     navy. Tints keep their role but drop to a low-alpha wash of the same hue,
     which is what the dark chip variants further down already use. */
  --accent-primary-solid: #4DA3FF;
  --accent-primary-solid-fg: #00182E;
  --accent-primary-tint: rgba(77, 163, 255, .16);
  --accent-primary-tint-fg: #7EC0FF;

  --accent-success-solid: #00E49A;
  --accent-success-solid-fg: #00182E;
  --accent-success-tint: rgba(0, 228, 154, .16);
  --accent-success-tint-fg: #48F2B8;

  --accent-warning-solid: #FFB06B;
  --accent-warning-solid-fg: #00182E;
  --accent-warning-tint: rgba(255, 176, 107, .16);
  --accent-warning-tint-fg: #FFCA93;

  --accent-danger-solid: #FF9C83;
  --accent-danger-solid-fg: #00182E;
  --accent-danger-tint: rgba(255, 116, 82, .16);
  --accent-danger-tint-fg: #FF9C83;

  --accent-neutral-solid: #C5D1E4;
  --accent-neutral-solid-fg: #00182E;
  --accent-neutral-tint: rgba(167, 183, 210, .14);
  --accent-neutral-tint-fg: #C5D1E4;

  --accent-info-solid: #7EC0FF;
  --accent-info-solid-fg: #00182E;
  --accent-info-tint: rgba(77, 163, 255, .16);
  --accent-info-tint-fg: #7EC0FF;

  --row-wash: rgba(126, 192, 255, .038);
  --row-wash-strong: rgba(126, 192, 255, .075);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--app-text);
  /* The dashboard shell named Inter here while typography-operations.css set
     Poppins on the same element. Whichever sheet loaded last won, so the whole
     Crew Center's face depended on stylesheet order. */
  font-family: var(--font-sans);
}

[data-bs-theme="dark"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 139, 255, .20), transparent 32%),
    linear-gradient(135deg, #001223 0%, #011a31 42%, #001224 100%);
}

a {
  color: var(--app-primary-2);
  text-decoration: none;
}

.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  background: transparent;
  border: 0;
}

.sidebar-inner {
  position: sticky;
  top: 0;
  min-height: 100vh;
  padding: 34px 32px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 34px;
}

.brand-logo {
  width: 190px;
  max-width: 100%;
  height: auto;
}

.crew-welcome {
  margin-bottom: 30px;
  color: var(--app-text);
  line-height: 1.12;
  min-height: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.crew-welcome .muted {
  color: var(--app-text);
  font-size: var(--type-size-xl);
  font-weight: var(--type-weight-semibold);
}

.crew-welcome .fw-semibold {
  font-size: var(--type-size-3xl);
}

.crew-id {
  color: var(--app-primary-2);
  margin-top: 8px;
  font-weight: var(--type-weight-bold);
  font-size: var(--type-size-xl);
}

.nav-section-label {
  color: var(--app-muted);
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-bold);
  letter-spacing: var(--letter-caps);
  margin: 20px 0 10px;
}

.sidebar-link {
  width: 100%;
  min-height: 44px;
  white-space: nowrap;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--app-text), var(--app-muted) 18%);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 13px;
  font-weight: var(--type-weight-semibold);
  font-size: var(--type-size-base);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.sidebar-link:hover {
  background: var(--app-primary-soft);
  color: var(--app-primary-2);
}

.sidebar-link i {
  font-size: var(--type-size-lg);
}

.sidebar-toggle {
  justify-content: space-between;
}

.link-main {
  display: flex;
  align-items: center;
  gap: 13px;
}

.chevron {
  font-size: var(--type-size-sm) !important;
  transition: transform .18s ease;
}

.sidebar-toggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.sidebar-toggle.active,
.sidebar-toggle[aria-expanded="true"] {
  background: #FBFCFD;
  color: var(--app-text);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

[data-bs-theme="dark"] .sidebar-toggle.active,
[data-bs-theme="dark"] .sidebar-toggle[aria-expanded="true"] {
  background: rgba(14, 116, 255, .12);
}

.sidebar-submenu {
  background: #FBFCFD;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  margin-bottom: 8px;
  padding: 2px 0 10px;
}

[data-bs-theme="dark"] .sidebar-submenu {
  background: rgba(14, 116, 255, .12);
}

.sidebar-submenu a {
  display: flex;
  white-space: normal;
  align-items: center;
  min-height: 34px;
  color: var(--app-muted);
  padding: 8px 18px 8px 42px;
  font-size: var(--type-size-md);
  font-weight: var(--type-weight-semibold);
  border-radius: var(--radius-md);
}

.sidebar-submenu a:hover,
.sidebar-submenu a.active {
  color: var(--app-orange);
}

.active-pill {
  background: var(--app-primary);
  color: #fff !important;
  box-shadow: none;
}

.app-main {
  width: calc(100% - var(--sidebar-width));
  padding: 34px 40px 42px 0;
}

.top-actions {
  min-height: 42px;
  margin-bottom: 34px;
  align-items: center;
}

.content-logo {
  display: inline-flex;
  align-items: center;
}

.content-logo-img {
  width: 240px;
  max-width: 100%;
  height: auto;
}

.logo-dark {
  display: none;
}

[data-bs-theme="dark"] .logo-light {
  display: none;
}

[data-bs-theme="dark"] .logo-dark {
  display: block;
}

.icon-btn,
.flag-btn {
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  border-radius: var(--radius-pill);
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(30, 50, 100, .04);
}

.icon-btn:hover,
.icon-btn:focus {
  border-color: var(--app-border-focus);
  color: var(--app-primary);
  background: #fff;
}

[data-bs-theme="dark"] .icon-btn:hover,
[data-bs-theme="dark"] .icon-btn:focus {
  border-color: var(--app-border-focus);
  color: #7EC0FF;
  background: rgba(77, 163, 255, .10);
}

.flag-btn {
  font-size: var(--type-size-lg);
}

.notification-btn {
  position: relative;
}

.notify-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  /* Red, and ringed in the surface colour, so the count reads as a badge
     sitting on the bell rather than a smudge on its edge. */
  background: #E5322D;
  color: #ffffff;
  box-shadow: 0 0 0 2px var(--app-surface-solid);
  display: grid;
  place-items: center;
  font-size: var(--type-size-3xs);
  font-weight: var(--type-weight-bold);
  line-height: 1;
  pointer-events: none;
}

/* display:grid above would otherwise beat the hidden attribute. */
.notify-dot[hidden] {
  display: none;
}

.notification-panel {
  width: min(380px, calc(100vw - 24px));
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--app-border);
  background: var(--app-surface-solid);
  box-shadow: 0 18px 50px rgba(45, 57, 102, .16);
}

[data-bs-theme="dark"] .notification-panel {
  box-shadow: 0 18px 50px rgba(0, 0, 0, .34);
}

.notification-panel-head,
.notification-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--app-border);
  color: var(--app-text);
}

.notification-panel-head form,
.notification-page-head form {
  margin: 0;
}

.notification-panel-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--app-primary);
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-semibold);
}

.notification-panel-action:hover,
.notification-panel-action:focus-visible {
  background: var(--app-primary-soft);
}

[data-bs-theme="dark"] .notification-panel-action {
  color: #7EC0FF;
}

.notification-panel-list {
  max-height: min(420px, 60vh);
  overflow-y: auto;
  padding: 6px;
}

.notification-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  border-radius: var(--radius-md);
  color: var(--app-text);
  text-decoration: none;
}

.notification-item + .notification-item {
  margin-top: 2px;
}

.notification-item:hover,
.notification-item:focus-visible {
  background: var(--row-wash-strong);
  color: var(--app-text);
}

.notification-item.is-unread {
  background: var(--row-wash);
}

.notification-item.is-unread::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: var(--radius-pill);
  background: #E5322D;
}

.notification-item-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  background: var(--accent-info-tint);
  color: var(--accent-info-tint-fg);
  font-size: var(--type-size-sm);
}

.notification-item.tone-success .notification-item-icon {
  background: var(--accent-success-tint);
  color: var(--accent-success-tint-fg);
}

.notification-item.tone-warning .notification-item-icon {
  background: var(--accent-warning-tint);
  color: var(--accent-warning-tint-fg);
}

.notification-item.tone-danger .notification-item-icon {
  background: var(--accent-danger-tint);
  color: var(--accent-danger-tint-fg);
}

.notification-item-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.notification-item-text strong {
  font-size: var(--type-size-sm);
  font-weight: var(--type-weight-semibold);
  line-height: 1.3;
}

.notification-item.is-unread .notification-item-text strong {
  font-weight: var(--type-weight-bold);
}

.notification-item-text span {
  color: var(--app-subtle);
  font-size: var(--type-size-xs);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.notification-item-text time {
  color: var(--app-muted);
  font-size: var(--type-size-2xs);
}

.notification-item.is-pinned {
  border: 1px solid var(--accent-danger-tint);
}

.notification-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 28px 16px;
  color: var(--app-muted);
  font-size: var(--type-size-sm);
}

.notification-empty i {
  font-size: var(--type-size-2xl);
}

.notification-panel-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--app-border);
  color: var(--app-primary);
  font-size: var(--type-size-sm);
  font-weight: var(--type-weight-semibold);
  text-decoration: none;
}

.notification-panel-foot:hover,
.notification-panel-foot:focus-visible {
  background: var(--app-primary-soft);
  color: var(--app-primary);
}

[data-bs-theme="dark"] .notification-panel-foot,
[data-bs-theme="dark"] .notification-panel-foot:hover {
  color: #7EC0FF;
}

.notification-page {
  padding: 0;
  overflow: hidden;
}

.notification-page-head span {
  color: var(--app-muted);
  font-size: var(--type-size-sm);
  font-weight: var(--type-weight-semibold);
}

.notification-page-list {
  padding: 8px;
}

.notification-page-pagination {
  display: flex;
  justify-content: center;
  padding: 8px 16px 16px;
}

.mobile-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* On a phone the bell is not at the screen's edge, so Popper would pin the
   panel flush to the left. Hang it under the bar with an even margin instead;
   !important because Popper writes its position inline. */
.mobile-topbar .notification-panel {
  position: fixed !important;
  inset: 72px 12px auto 12px !important;
  transform: none !important;
  width: auto;
}

.top-avatar {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.exit-fullscreen-icon {
  display: none;
}

.is-fullscreen .enter-fullscreen-icon {
  display: none;
}

.is-fullscreen .exit-fullscreen-icon {
  display: inline;
}

.language-switch a {
  min-width: 42px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--app-muted);
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-bold);
  letter-spacing: var(--letter-wide);
  transition: background .18s ease, color .18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.language-switch a.active {
  background: var(--app-primary);
  color: #fff;
}

[data-bs-theme="dark"] .language-switch a.active {
  background: #7EC0FF;
  color: #00182E;
}

.avatar-btn {
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  position: relative;
}

.avatar-btn::after {
  display: none;
}

.user-menu .dropdown-menu {
  margin-top: 14px;
  min-width: 235px;
  padding: 10px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--app-border);
  background: var(--app-surface-solid);
  box-shadow: 0 18px 50px rgba(45, 57, 102, .16);
}

[data-bs-theme="dark"] .user-menu .dropdown-menu {
  margin-top: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .34);
}

.user-menu .dropdown-menu.show {
  transform: translate3d(0, 50px, 0) !important;
}

.user-menu .dropdown-header {
  display: grid;
  gap: 3px;
  padding: 10px 12px 8px;
  color: var(--app-text);
}

.user-menu .dropdown-header span {
  color: var(--app-muted);
  font-size: var(--type-size-sm);
  font-weight: var(--type-weight-bold);
}

.user-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  border-radius: var(--radius-md);
  color: var(--app-text);
  font-weight: var(--type-weight-bold);
}

.user-menu .dropdown-item:hover,
.user-menu .dropdown-item:focus {
  background: var(--app-primary-soft);
  color: var(--app-primary);
}

[data-bs-theme="dark"] .user-menu .dropdown-item:hover,
[data-bs-theme="dark"] .user-menu .dropdown-item:focus {
  color: #7EC0FF;
}

.user-menu .dropdown-item-logout {
  color: #D84F1B;
  font-weight: var(--type-weight-bold);
}

.user-menu .dropdown-item-logout:hover,
.user-menu .dropdown-item-logout:focus {
  background: rgba(245, 137, 50, .13);
  color: #D84F1B;
}

[data-bs-theme="dark"] .user-menu .dropdown-item-logout {
  color: #FFB06B;
}

[data-bs-theme="dark"] .user-menu .dropdown-item-logout:hover,
[data-bs-theme="dark"] .user-menu .dropdown-item-logout:focus {
  color: #FFB06B;
}

.theme-icon-dark {
  display: none;
}

[data-bs-theme="dark"] .theme-icon-light {
  display: none;
}

[data-bs-theme="dark"] .theme-icon-dark {
  display: inline;
}

.page-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 34px;
  color: var(--app-subtle);
  font-weight: var(--type-weight-bold);
}

.breadcrumb-line,
.utc {
  display: flex;
  align-items: center;
  gap: 10px;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 26px;
}

.content-grid.content-grid--dashboard {
  grid-template-columns: minmax(0, 1fr) clamp(320px, 24vw, 420px);
}

.main-column,
.right-column {
  display: grid;
  gap: 22px;
  align-content: start;
}

.dashboard-flight-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1200px) {
  .dashboard-flight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dashboard-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--app-shadow);
  backdrop-filter: blur(14px);
  padding: 24px;
}

.ja-card-shell {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--app-shadow);
}

.ja-card-shell--flush {
  padding: 0;
  overflow: hidden;
}

.ja-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ja-card-header--split {
  justify-content: space-between;
  flex-wrap: wrap;
}

.ja-table-shell {
  border-radius: var(--radius-xl);
}

.flight-empty-state {
  min-height: 218px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
  border-top: 1px solid var(--app-border);
  padding: 28px 16px 8px;
}

.flight-empty-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  background: rgb(138 145 179 / 17%);
  color: var(--app-primary-2);
  font-size: var(--type-size-2xl);
}

.flight-empty-state strong {
  color: var(--app-text);
  font-weight: var(--type-weight-semibold);
}

.flight-empty-state p {
  max-width: 360px;
  margin: 0;
  color: var(--app-muted);
  font-size: var(--type-size-md);
  line-height: 1.45;
}

.profile-card {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 24px 28px;
}

.profile-avatar {
  width: 118px;
  height: 118px;
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.profile-body {
  flex: 1;
  min-width: 0;
}

.profile-heading {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--app-border);
}

.profile-heading h1 {
  margin: 0;
  font-size: var(--type-size-3xl);
  font-weight: var(--type-weight-bold);
}

.profile-heading p {
  margin: 2px 0 8px;
  color: var(--app-muted);
  font-weight: var(--type-weight-semibold);
}

.btn {
  --bs-btn-border-radius: var(--radius-pill);
  --bs-btn-font-weight: var(--type-weight-bold);
}

.btn-soft-primary {
  background: #ffffff;
  color: var(--app-primary);
  border: 1.5px solid var(--app-primary);
  font-weight: var(--type-weight-bold);
  border-radius: var(--radius-pill);
  box-shadow: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.btn-soft-primary:hover,
.btn-soft-primary:focus {
  background: var(--app-primary);
  color: #ffffff;
  border-color: var(--app-primary);
}

.btn-primary-brand {
  background: var(--app-primary);
  color: #ffffff;
  border: 1.5px solid var(--app-primary);
  font-weight: var(--type-weight-bold);
  border-radius: var(--radius-pill);
  box-shadow: none;
}

.btn-primary-brand:hover,
.btn-primary-brand:focus {
  background: #002E60;
  border-color: #002E60;
  color: #ffffff;
}

[data-bs-theme="dark"] .btn-soft-primary {
  background: rgba(77, 163, 255, .12);
  color: #7EC0FF;
  border-color: rgba(126, 192, 255, .72);
}

[data-bs-theme="dark"] .btn-soft-primary:hover,
[data-bs-theme="dark"] .btn-soft-primary:focus {
  background: #7EC0FF;
  color: #00182E;
  border-color: #7EC0FF;
}

[data-bs-theme="dark"] .btn-orange {
  background: rgba(255, 176, 107, .18);
  color: #FFD7B0;
  border-color: rgba(255, 176, 107, .62);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 107, .08);
}

[data-bs-theme="dark"] .btn-orange:hover,
[data-bs-theme="dark"] .btn-orange:focus {
  background: #FFB06B;
  color: #00182E;
  border-color: #FFB06B;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(105px, 1fr));
  gap: 14px;
  padding-top: 16px;
}

.profile-stats span,
.flight-metrics span,
.next-flight-footer span,
.time-stack span,
.stat-item span,
.training-item span {
  display: block;
  color: var(--app-muted);
  font-size: var(--type-size-sm);
  font-weight: var(--type-weight-semibold);
  margin-bottom: 5px;
}

.profile-stats strong,
.flight-metrics strong,
.next-flight-footer strong {
  display: block;
  font-size: var(--type-size-base);
}

/* The month's net wallet movement, riding under the balance. Secondary to it
   on purpose: the balance is the figure, this is the direction of travel. */
.profile-balance-delta {
  display: block;
  margin-top: 3px;
  color: var(--app-muted);
  font-size: var(--type-size-sm);
  font-weight: var(--type-weight-semibold);
}

.profile-balance-delta.is-positive {
  color: var(--app-success);
}

.profile-balance-delta.is-negative {
  color: var(--chip-expired-fg);
}

[data-bs-theme="dark"] .profile-balance-delta.is-negative {
  color: #FF8A8A;
}

/* The status-chip's size, shape and weight come from the standardised badge
   scale at the end of this file; its colours from the badge system below.
   Two earlier sets of colour variants lived here and were dead — the later
   block redefined every state they set. */

.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.card-title-row h2,
.quick-actions h2 {
  margin: 0;
  font-size: var(--type-size-lg);
  font-weight: var(--type-weight-bold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.card-title-row h2 i,
.quick-actions h2 i {
  color: inherit;
}

.card-title-row time,
.card-title-row a {
  color: var(--app-muted);
  font-size: var(--type-size-sm);
  font-weight: var(--type-weight-bold);
}

.flight-number {
  margin-bottom: 20px;
}

.flight-number strong,
.flight-number span {
  display: block;
}

.flight-number span {
  color: var(--app-muted);
  font-weight: var(--type-weight-semibold);
}

.route-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}

.route-row::before {
  content: "";
  position: absolute;
  left: clamp(110px, 18%, 190px);
  right: clamp(110px, 18%, 190px);
  top: 50%;
  border-top: 1px dashed var(--app-border);
  transform: translateY(-50%);
  z-index: 0;
}

.route-row > div {
  position: relative;
  z-index: 1;
}

.route-row > i {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 24px;
  color: var(--app-text);
}

.route-row > i::before {
  position: relative;
  z-index: 2;
  background: var(--app-surface-solid);
  border-radius: var(--radius-pill);
  padding: 0 8px;
}

.route-row > i::after {
  display: none;
}

.route-row > div {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.route-row strong,
.route-row span {
  display: block;
}

.route-row strong {
  line-height: 1.15;
}

.route-row span {
  line-height: 1.25;
}

.flight-metrics {
  border-top: 1px solid var(--app-border);
  padding-top: 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.next-flight-footer {
  border-top: 1px solid var(--app-border);
  padding-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* A flight under way pairs each planned time with what actually happened and
   carries progress alongside them: five figures on one line, so following a
   flight does not make the card twice as tall as the rest of the dashboard.
   The times are short and fixed-width, so they hold at five across; below the
   card's own breakpoint they fall to a readable two-up rather than shrinking. */
.next-flight-footer.next-flight-footer--live {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

/* Five across holds well past the point the sidebar stops: a UTC time is five
   characters. The fallbacks are for where the dashboard itself has already
   collapsed, not for a merely narrow desktop — an earlier breakpoint here was
   keyed at 1400px and dropped a 1300px card to three-up for no reason. */
@media (max-width: 991.98px) {
  .next-flight-footer.next-flight-footer--live {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 14px;
  }
}

@media (max-width: 575.98px) {
  .next-flight-footer.next-flight-footer--live {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
  }
}

/* The bar sits under its own figure rather than spanning the card, so the
   progress cell stays the same height as the four beside it. */
.next-flight-progress-track {
  margin-top: 7px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--app-primary-soft);
  overflow: hidden;
}

.next-flight-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: var(--app-orange);
  transition: width .3s ease;
}

.btn-orange {
  background: #ffffff;
  color: var(--app-orange);
  border: 1.5px solid var(--app-orange);
  font-weight: var(--type-weight-bold);
  border-radius: var(--radius-pill);
  box-shadow: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.btn-orange:hover,
.btn-orange:focus {
  background: var(--accent-warning-solid);
  color: var(--accent-warning-solid-fg);
  border-color: var(--accent-warning-solid);
}


.stats-layout {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr)) 160px;
  gap: 24px;
  align-items: end;
}

.stat-item {
  border-right: 1px solid var(--app-border);
  min-height: 86px;
}

.stat-item strong {
  display: block;
  font-size: var(--type-size-4xl);
  margin: 8px 0 7px;
}

.stat-item em {
  color: var(--app-success);
  font-size: var(--type-size-sm);
  font-style: normal;
  font-weight: var(--type-weight-bold);
}

.stats-select {
  max-width: 190px;
  background-color: transparent;
  border-color: var(--app-border);
  color: var(--app-text);
}

.mini-chart {
  height: 92px;
  border-bottom: 1px solid var(--app-border);
  display: flex;
  align-items: end;
  gap: 10px;
  padding: 0 8px;
}

.mini-chart span {
  display: block;
  width: 17px;
  /* Hairline: 17px wide, so a card corner would round the bar into a lozenge. */
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #82aefc, var(--app-primary));
}

.qualification-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
}

.qualification-grid > div {
  display: grid;
  grid-template-columns: 150px 110px 1fr auto;
  align-items: center;
  gap: 14px;
}

.qualification-grid span {
  color: var(--app-muted);
  font-size: var(--type-size-md);
}

.status-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.status-card p {
  margin: 0 0 8px;
  color: var(--app-muted);
  font-weight: var(--type-weight-bold);
}

.status-card > div:first-child strong {
  color: var(--app-success);
  display: flex;
  align-items: center;
  gap: 8px;
}

.time-stack {
  display: grid;
  gap: 20px;
  padding-left: 24px;
  border-left: 1px solid var(--app-border);
}

.time-stack strong {
  font-size: var(--type-size-xl);
}

.notification-card {
  background:
    linear-gradient(135deg, rgba(255, 122, 18, .18), rgba(255, 173, 95, .30)),
    var(--app-surface);
}

[data-bs-theme="dark"] .notification-card {
  background: var(--app-surface);
}

.list-feed {
  display: grid;
  gap: 18px;
}

.feed-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: start;
}

.feed-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .7);
}

.feed-icon.danger { color: #ff495c; }
.feed-icon.info { color: #3988ff; }
.feed-icon.primary { color: var(--app-primary-2); }

.feed-item strong {
  display: block;
  font-size: var(--type-size-md);
}

.feed-item p,
.company-row p {
  margin: 3px 0 0;
  color: var(--app-subtle);
  font-size: var(--type-size-sm);
  line-height: 1.35;
}

.feed-item time {
  color: var(--app-subtle);
  font-size: var(--type-size-xs);
  white-space: nowrap;
}

.training-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--app-border);
}

.training-item:last-child {
  border-bottom: 0;
}

.training-item p {
  margin: 0;
  font-weight: var(--type-weight-bold);
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.quick-grid button,
.quick-grid .quick-action {
  border: 1px solid var(--app-border);
  background: transparent;
  color: var(--app-text);
  min-height: 74px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  font-size: var(--type-size-2xs);
  font-weight: var(--type-weight-semibold);
  text-align: center;
  text-decoration: none;
  padding: 8px 4px;
  gap: 5px;
}

.quick-grid i {
  color: var(--app-primary-2);
  font-size: var(--type-size-2xl);
}

.quick-grid button:hover,
.quick-grid .quick-action:hover {
  border-color: var(--app-border-hover);
  background: rgba(0, 56, 117, .045);
  color: var(--app-text);
  transform: translateY(-1px);
}

.quick-grid button:active,
.quick-grid .quick-action:active {
  transform: translateY(0);
}

[data-bs-theme="dark"] .quick-grid button:hover,
[data-bs-theme="dark"] .quick-grid .quick-action:hover {
  border-color: var(--app-border-hover);
  background: rgba(77, 163, 255, .09);
}

.company-row {
  display: flex;
  gap: 14px;
  align-items: center;
}

.company-row img {
  width: 92px;
  border-radius: var(--radius-md);
  background: var(--app-primary-soft);
}

.mobile-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: 66px;
  background: color-mix(in srgb, var(--app-bg), transparent 8%);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--app-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.mobile-logo {
  width: 150px;
}

/* Responsive behaviour */
@media (max-width: 1679px) {
  .content-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
  }

  .content-grid.content-grid--dashboard {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 380px);
  }

  .profile-stats {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }

  .stats-layout {
    grid-template-columns: repeat(2, 1fr);
  }

  .mini-chart {
    grid-column: span 2;
  }

  .qualification-grid > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (max-width: 1199.98px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  .content-grid.content-grid--dashboard {
    grid-template-columns: 1fr;
  }

  .right-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.content-grid--dashboard .btn-orange {
  font-weight: var(--type-weight-semibold);
}

.content-grid--dashboard .flight-empty-state strong,
.content-grid--dashboard .route-row strong,
.content-grid--dashboard .route-row strong .entity-link {
  font-weight: var(--type-weight-semibold);
}

@media (max-width: 991.98px) {
  .app-shell {
    display: block;
  }

  .app-sidebar {
    width: min(330px, 92vw);
    background: var(--app-bg);
    max-height: 100dvh;
  }

  [data-bs-theme="dark"] .app-sidebar {
    background: #00182e;
  }

  .sidebar-inner {
    min-height: 0;
    height: 100dvh;
    max-height: 100dvh;
    padding: 26px 20px;
    display: flex;
    flex-direction: column;
  }

  .app-sidebar .sidebar-nav {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .app-main {
    width: 100%;
    padding: 22px 16px 34px;
  }

  .page-meta {
    margin-top: 0;
  }

  .profile-card {
    align-items: flex-start;
  }

  .profile-avatar {
    width: 92px;
    height: 92px;
  }

  .profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .dashboard-card {
    padding: 18px;
    border-radius: var(--radius-lg);
  }

  .profile-card {
    display: grid;
    gap: 16px;
  }

  .profile-avatar {
    width: 84px;
    height: 84px;
  }

  .profile-stats,
  .flight-metrics,
  .next-flight-footer,
  .stats-layout,
  .qualification-grid,
  .right-column,
  .status-card,
  .quick-grid {
    grid-template-columns: 1fr;
  }

  .stat-item {
    border-right: 0;
    border-bottom: 1px solid var(--app-border);
    padding-bottom: 14px;
  }

  .mini-chart {
    grid-column: auto;
  }

  .time-stack {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--app-border);
    padding-top: 16px;
  }

  .feed-item {
    grid-template-columns: 32px 1fr;
  }

  .feed-item time {
    grid-column: 2;
  }

  .route-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .route-row::before {
    display: none;
  }

  .route-row > i {
    justify-content: flex-start;
    transform: rotate(90deg);
    width: 34px;
  }

  .route-row .text-end {
    text-align: left !important;
  }
}


.btn-sm {
  padding: .42rem .9rem;
  line-height: 1.15;
}

/* btn-xs is used in markup but Bootstrap 5 has no such size, so these buttons
   were silently rendering full-size. Define it as a consistent extra-small. */
.btn-xs {
  padding: .26rem .6rem;
  font-size: var(--type-size-xs);
  line-height: 1.1;
}

.btn:not(.icon-btn):not(.flag-btn):active {
  transform: translateY(1px);
}


.utc .vr {
  opacity: .42;
}


/* Interaction polish */
@media (prefers-reduced-motion: no-preference) {
  .btn,
  .sidebar-link,
  .sidebar-submenu a,
  .quick-grid button,
  .language-switch button,
  .user-menu .dropdown-item,
  .dashboard-card a,
  .icon-btn,
  .avatar-btn {
    transition:
      background-color .18s ease,
      background .18s ease,
      border-color .18s ease,
      color .18s ease,
      opacity .18s ease,
      box-shadow .18s ease,
      transform .18s ease,
      filter .18s ease;
  }

  .dashboard-card {
    transition:
      border-color .18s ease,
      background .18s ease;
  }
}

.btn:not(.icon-btn):not(.flag-btn):not(.avatar-btn):hover {
  transform: translateY(-1px);
}

.btn:not(.icon-btn):not(.flag-btn):not(.avatar-btn):active {
  transform: translateY(0);
  filter: brightness(.98);
}

.icon-btn:hover,
.avatar-btn:hover,
.quick-grid button:hover {
  transform: translateY(-1px);
}

.icon-btn:active,
.avatar-btn:active,
.quick-grid button:active {
  transform: translateY(0);
}

.sidebar-link:hover {
  transform: translateX(2px);
}

.sidebar-link:active,
.sidebar-submenu a:active {
  transform: translateX(0);
}

.quick-grid button:hover {
  border-color: var(--app-border-hover);
  background: rgba(0, 56, 117, .045);
}

[data-bs-theme="dark"] .quick-grid button:hover {
  border-color: var(--app-border-hover);
  background: rgba(77, 163, 255, .09);
}

.dashboard-card a:hover {
  opacity: .82;
}

.language-switch button:not(.active):hover {
  background: rgba(0, 56, 117, .08);
  color: var(--app-primary);
}

[data-bs-theme="dark"] .language-switch button:not(.active):hover {
  background: rgba(126, 192, 255, .12);
  color: #7EC0FF;
}

.user-menu .dropdown-menu {
  margin-top: 14px;
  animation: menuFadeIn .16s ease both;
  transform-origin: top right;
}

@keyframes menuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.collapse.sidebar-submenu {
  transition: height .22s ease;
}

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

/* The pilot's own Reduced motion setting, stamped on <html> by the dashboard
   shell. It is additive to the device preference above, never a licence to
   override it: with the setting off, a device asking for reduced motion still
   gets it. Nothing here hides content or stops a status from updating — only
   the movement is held back. */
[data-ja-reduced-motion="true"] *,
[data-ja-reduced-motion="true"] *::before,
[data-ja-reduced-motion="true"] *::after {
  transition-duration: .001ms !important;
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}


/* Flash messages */
.flash-stack {
  display: grid;
  gap: 12px;
  margin: 0;
}

.flash-stack:has(.alert.show),
.flash-stack.has-flashes {
  margin-bottom: 24px;
}

.flash-stack:not(:has(.alert.show)) {
  gap: 0;
}

.flash-alert {
  --flash-bg: var(--app-surface);
  --flash-border: var(--app-border);
  --flash-accent: var(--app-primary);
  --flash-text: var(--app-text);
  --flash-icon-bg: rgba(0, 56, 117, .10);

  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  margin: 0;
  padding: 14px 16px;
  color: var(--flash-text);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--flash-accent), transparent 88%), transparent 34%),
    var(--flash-bg);
  border: 1px solid var(--flash-border);
  border-left: 4px solid var(--flash-accent);
  border-radius: var(--radius-lg);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

.flash-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  color: var(--flash-accent);
  background: var(--flash-icon-bg);
}

.flash-content {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.flash-content strong {
  font-size: var(--type-size-base);
  font-weight: var(--type-weight-bold);
  color: var(--app-text);
}

.flash-content span {
  color: var(--app-subtle);
  font-size: var(--type-size-md);
  line-height: 1.35;
}

.flash-alert .btn-close {
  position: static;
  width: 34px;
  height: var(--btn-h-compact);
  padding: 0;
  border-radius: var(--radius-pill);
  background-size: .72rem;
  opacity: .55;
}

.flash-alert .btn-close:hover {
  opacity: 1;
  background-color: rgba(20, 18, 80, .06);
}

.flash-alert.alert-primary {
  --flash-accent: #003875;
  --flash-icon-bg: rgba(0, 56, 117, .10);
}

.flash-alert.alert-secondary {
  --flash-accent: #69729B;
  --flash-icon-bg: rgba(105, 114, 155, .12);
}

.flash-alert.alert-success {
  --flash-accent: #07B96D;
  --flash-icon-bg: rgba(7, 185, 109, .13);
}

.flash-alert.alert-danger {
  --flash-accent: #D84F1B;
  --flash-icon-bg: rgba(216, 79, 27, .12);
}

.flash-alert.alert-warning {
  --flash-accent: #F58932;
  --flash-icon-bg: rgba(245, 137, 50, .14);
}

.flash-alert.alert-info {
  --flash-accent: #2F8DFF;
  --flash-icon-bg: rgba(47, 141, 255, .12);
}

.flash-alert.alert-light {
  --flash-accent: #A9B2C8;
  --flash-icon-bg: rgba(169, 178, 200, .16);
}

.flash-alert.alert-dark {
  --flash-accent: #141250;
  --flash-icon-bg: rgba(20, 18, 80, .10);
}

[data-bs-theme="dark"] .flash-alert {
  --flash-bg: var(--app-surface);
  box-shadow: none;
}

[data-bs-theme="dark"] .flash-content strong {
  color: #F4F8FF;
}

[data-bs-theme="dark"] .flash-content span {
  color: var(--app-subtle);
}

[data-bs-theme="dark"] .flash-alert .btn-close {
  filter: invert(1) grayscale(1);
  opacity: .62;
}

[data-bs-theme="dark"] .flash-alert .btn-close:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, .08);
}

[data-bs-theme="dark"] .flash-alert.alert-primary,
[data-bs-theme="dark"] .flash-alert.alert-info {
  --flash-accent: #7EC0FF;
  --flash-icon-bg: rgba(126, 192, 255, .14);
}

[data-bs-theme="dark"] .flash-alert.alert-secondary,
[data-bs-theme="dark"] .flash-alert.alert-light {
  --flash-accent: #A7B7D2;
  --flash-icon-bg: rgba(167, 183, 210, .13);
}

[data-bs-theme="dark"] .flash-alert.alert-success {
  --flash-accent: #00E49A;
  --flash-icon-bg: rgba(0, 228, 154, .13);
}

[data-bs-theme="dark"] .flash-alert.alert-danger,
[data-bs-theme="dark"] .flash-alert.alert-warning {
  --flash-accent: #FFB06B;
  --flash-icon-bg: rgba(255, 176, 107, .14);
}

[data-bs-theme="dark"] .flash-alert.alert-dark {
  --flash-accent: #F4F8FF;
  --flash-icon-bg: rgba(244, 248, 255, .12);
}

@media (max-width: 767.98px) {
  .flash-alert {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    padding-right: 14px;
  }

  .flash-alert .btn-close {
    position: absolute;
    top: 12px;
    right: 12px;
  }

  .flash-content {
    padding-right: 34px;
  }
}


/* Rank image badge */
.rank-badge {
  display: inline-block;
  width: auto;
  height: 26px;
  max-width: 112px;
  object-fit: contain;
  vertical-align: middle;
}

/* Badge readability pass */
.status-chip {
  min-height: 22px;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-bold);
  letter-spacing: var(--letter-wide);
  line-height: 1;
  text-transform: none;
  border: 1px solid transparent;
}

/* Disabled buttons */
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  cursor: not-allowed;
  pointer-events: none;
  opacity: .48;
  filter: grayscale(.12);
  transform: none !important;
  box-shadow: none !important;
}

.btn-soft-primary:disabled,
.btn-soft-primary.disabled {
  background: #F5F7FA;
  color: #7E879F;
  border-color: #CDD5E3;
}

[data-bs-theme="dark"] .btn-soft-primary:disabled,
[data-bs-theme="dark"] .btn-soft-primary.disabled {
  background: rgba(167, 183, 210, .08);
  color: rgba(167, 183, 210, .55);
  border-color: rgba(167, 183, 210, .28);
}

/* Status and warning badge system
   (Base size/shape/weight is set once by the "Badge readability pass" rule
   above and the standardised badge scale at the end of this file; the
   duplicate base block that lived here was removed in the 2026 refactor.
   The colour state variants below remain in effect.) */

/* Valid / active / available */
.status-chip.good,
.status-chip.valid,
.status-chip.status-active,
.status-chip.available,
.status-chip.online {
  background: #DDF8EC;
  color: #006C43;
  border-color: rgba(0, 108, 67, .12);
}

/* Warning / expiring soon */
.status-chip.warning,
.status-chip.expiring {
  background: #FFF2D9;
  color: #8A4A00;
  border-color: rgba(245, 137, 50, .22);
}

/* Expired / invalid */
.status-chip.expired,
.status-chip.invalid {
  background: #FFE5DD;
  color: #A93612;
  border-color: rgba(169, 54, 18, .16);
}

/* Flight-status specific badges */
.status-chip.unavailable {
  background: #EEF2F7;
  color: #4E5A73;
  border-color: rgba(78, 90, 115, .16);
}

.status-chip.leave {
  background: #EAF1FF;
  color: #003875;
  border-color: rgba(0, 56, 117, .16);
}

.status-chip.suspended {
  background: #F2E7FF;
  color: #5D35A8;
  border-color: rgba(93, 53, 168, .14);
}

.status-chip.class {
  background: #EEE6FF;
  color: #5D35A8;
  border-color: rgba(93, 53, 168, .12);
}

/* Neutral, informational — a limit or a rule rather than a state. */
.status-chip.info {
  background: var(--app-primary-soft);
  color: var(--app-primary);
  border-color: rgba(0, 56, 117, .14);
}

[data-bs-theme="dark"] .status-chip.good,
[data-bs-theme="dark"] .status-chip.valid,
[data-bs-theme="dark"] .status-chip.status-active,
[data-bs-theme="dark"] .status-chip.available,
[data-bs-theme="dark"] .status-chip.online {
  background: rgba(0, 228, 154, .16);
  color: #48F2B8;
  border-color: rgba(72, 242, 184, .20);
}

[data-bs-theme="dark"] .status-chip.info {
  background: rgba(77, 163, 255, .16);
  color: #7EC0FF;
  border-color: rgba(126, 192, 255, .22);
}

[data-bs-theme="dark"] .status-chip.warning,
[data-bs-theme="dark"] .status-chip.expiring {
  background: rgba(255, 176, 107, .16);
  color: #FFCA93;
  border-color: rgba(255, 202, 147, .22);
}

[data-bs-theme="dark"] .status-chip.expired,
[data-bs-theme="dark"] .status-chip.invalid {
  background: rgba(255, 116, 82, .16);
  color: #FF9C83;
  border-color: rgba(255, 156, 131, .22);
}

[data-bs-theme="dark"] .status-chip.unavailable {
  background: rgba(167, 183, 210, .14);
  color: #C5D1E4;
  border-color: rgba(197, 209, 228, .18);
}

[data-bs-theme="dark"] .status-chip.leave {
  background: rgba(126, 192, 255, .14);
  color: #9ED0FF;
  border-color: rgba(158, 208, 255, .20);
}

[data-bs-theme="dark"] .status-chip.suspended,
[data-bs-theme="dark"] .status-chip.class {
  background: rgba(167, 124, 255, .18);
  color: #CBB4FF;
  border-color: rgba(203, 180, 255, .20);
}

/* Today's status card variants */
.status-card > div:first-child strong {
  color: var(--status-card-accent, var(--app-success));
}

.status-card .bi-check-circle-fill,
.status-card .bi-x-circle-fill,
.status-card .bi-calendar2-check-fill,
.status-card .bi-slash-circle-fill {
  color: var(--status-card-accent, var(--app-success));
}

.status-card.status-available {
  --status-card-accent: #07B96D;
}

.status-card.status-unavailable {
  --status-card-accent: #69729B;
}

.status-card.status-leave {
  --status-card-accent: #003875;
}

.status-card.status-suspended {
  --status-card-accent: #A93612;
}

[data-bs-theme="dark"] .status-card.status-available {
  --status-card-accent: #48F2B8;
}

[data-bs-theme="dark"] .status-card.status-unavailable {
  --status-card-accent: #C5D1E4;
}

[data-bs-theme="dark"] .status-card.status-leave {
  --status-card-accent: #9ED0FF;
}

[data-bs-theme="dark"] .status-card.status-suspended {
  --status-card-accent: #FF9C83;
}


/* Table subpages */
.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: stretch;
  gap: 24px;
  margin-bottom: 24px;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-xl);
  background: var(--app-surface);
  overflow: hidden;
}

.page-hero-copy {
  padding: 30px;
  display: grid;
  align-content: center;
  gap: 10px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  color: var(--app-subtle);
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-bold);
  letter-spacing: var(--letter-caps);
  text-transform: uppercase;
}

.page-hero h1 {
  margin: 0;
  color: var(--app-text);
  font-size: var(--type-size-hero);
  font-weight: var(--type-weight-bold);
  letter-spacing: var(--letter-tight);
}

.page-hero p {
  margin: 0;
  max-width: 760px;
  color: var(--app-subtle);
  font-size: var(--type-size-base);
  line-height: 1.55;
}

.page-hero-image {
  position: relative;
  min-height: 190px;
  background:
    linear-gradient(135deg, rgba(0, 56, 117, .12), rgba(245, 137, 50, .14)),
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.12));
  overflow: hidden;
}

.page-hero-image::before {
  content: "";
  position: absolute;
  inset: auto -10% -38% -10%;
  height: 70%;
  border-radius: 50% 50% 0 0;
  background: rgba(0, 56, 117, .10);
}

[data-bs-theme="dark"] .page-hero-image {
  background:
    linear-gradient(135deg, rgba(126, 192, 255, .16), rgba(245, 137, 50, .12)),
    rgba(5, 30, 55, .92);
}

[data-bs-theme="dark"] .page-hero-image::before {
  background: rgba(126, 192, 255, .10);
}

.table-card {
  padding: 0;
  overflow: hidden;
}

.table-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 28px;
  border-bottom: 1px solid var(--app-border);
}

.table-card-header h2 {
  margin: 4px 0 4px;
  font-size: var(--type-size-xl);
  font-weight: var(--type-weight-bold);
  letter-spacing: var(--letter-tight);
}

.table-card-header p {
  margin: 0;
  max-width: 780px;
  color: var(--app-subtle);
  font-size: var(--type-size-md);
  line-height: 1.45;
}

.table-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.app-table-wrap {
  width: 100%;
}

.app-table {
  min-width: 1100px;
  margin: 0;
  color: var(--app-text);
  border-color: var(--app-border);
  --bs-table-bg: transparent;
  --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--app-border);
  --bs-table-hover-bg: rgba(0, 56, 117, .035);
}

[data-bs-theme="dark"] .app-table {
  --bs-table-hover-bg: rgba(126, 192, 255, .055);
}

.app-table thead th {
  padding: 16px 18px;
  color: var(--app-subtle);
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-bold);
  letter-spacing: var(--letter-caps);
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--app-border);
  background: rgba(0, 56, 117, .025);
}

[data-bs-theme="dark"] .app-table thead th {
  background: rgba(126, 192, 255, .045);
}

.app-table tbody td {
  padding: 16px 18px;
  vertical-align: middle;
  white-space: nowrap;
}

.app-table tbody tr {
  transition: background .16s ease;
}

.app-table tbody tr:hover {
  background: var(--bs-table-hover-bg);
}

.table-check-col {
  width: 46px;
}

.table-avatar {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  background: #EAF0FA;
  border: 1px solid var(--app-border);
}

.table-person {
  display: grid;
  gap: 3px;
}

.table-person strong {
  color: var(--app-text);
  font-size: var(--type-size-base);
  font-weight: var(--type-weight-bold);
}

.table-person span {
  color: var(--app-subtle);
  font-size: var(--type-size-sm);
}

.rank-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.rank-cell img {
  width: auto;
  height: 24px;
  max-width: 92px;
  object-fit: contain;
}

.rank-cell span {
  color: var(--app-text);
  font-weight: var(--type-weight-semibold);
}

.airport-code {
  display: inline-flex;
  align-items: center;
  min-width: 52px;
  color: var(--app-primary);
  font-weight: var(--type-weight-bold);
  letter-spacing: var(--letter-wide);
}

[data-bs-theme="dark"] .airport-code {
  color: #9ED0FF;
}

@media (max-width: 1199.98px) {
  .page-hero {
    grid-template-columns: 1fr;
  }

  .page-hero-image {
    min-height: 150px;
  }
}

@media (max-width: 767.98px) {
  .page-hero-copy,
  .table-card-header {
    padding: 20px;
  }

  .table-card-header {
    display: grid;
  }

  .table-actions {
    justify-content: flex-start;
  }

  .page-hero-image {
    display: none;
  }
}


/* Crew Members photo hero */
.crew-photo-hero {
  position: relative;
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 26px;
  padding: 32px;
  margin-bottom: 24px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--app-border);
  background:
    linear-gradient(90deg, rgba(20, 18, 80, .88) 0%, rgba(0, 56, 117, .72) 38%, rgba(20, 18, 80, .10) 100%),
    url("../../../assets/img/pilots_header.jpg") center / cover no-repeat;
}

.crew-photo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .22)),
    radial-gradient(circle at 70% 10%, rgba(255,255,255,.20), transparent 32%);
  pointer-events: none;
}

.crew-photo-hero .page-hero-copy,
.crew-photo-hero .hero-stats {
  position: relative;
  z-index: 1;
}

.crew-photo-hero .page-hero-copy {
  padding: 0;
  display: grid;
  gap: 16px;
  max-width: 720px;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-bold);
  letter-spacing: var(--letter-caps);
  text-transform: uppercase;
}

.crew-photo-hero h1 {
  margin: 0;
  color: #fff;
  font-size: var(--type-size-display);
  font-weight: var(--type-weight-bold);
  letter-spacing: var(--letter-tighter);
  line-height: 1.02;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 150px));
  gap: 12px;
}

.hero-stats > div {
  min-height: 68px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.20);
  color: #fff;
  backdrop-filter: blur(10px);
}

.hero-stats strong {
  display: block;
  font-size: var(--type-size-xl);
  line-height: 1;
  font-weight: var(--type-weight-bold);
}

.hero-stats span {
  display: block;
  margin-top: 7px;
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-semibold);
  color: rgba(255,255,255,.82);
}

[data-bs-theme="dark"] .crew-photo-hero {
  border-color: var(--app-border);
  background:
    linear-gradient(90deg, rgba(0, 18, 35, .92) 0%, rgba(0, 56, 117, .76) 44%, rgba(0, 18, 35, .22) 100%),
    url("../../../assets/crew-members-header.png") center / cover no-repeat;
}

@media (max-width: 991.98px) {
  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .crew-photo-hero {
    min-height: 300px;
    padding: 22px;
  }

  .hero-stats {
    grid-template-columns: 1fr;
  }
}


/* Generic sortable/paginated tables */
.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.page-heading .eyebrow {
  margin: 0 0 4px;
  color: var(--app-subtle);
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-bold);
  letter-spacing: var(--letter-caps);
  text-transform: uppercase;
}

.page-heading h1 {
  margin: 0;
  color: var(--app-text);
  font-size: var(--type-size-4xl);
  font-weight: var(--type-weight-bold);
  letter-spacing: var(--letter-tight);
}

.page-heading span {
  display: block;
  margin-top: 6px;
  color: var(--app-subtle);
  font-weight: var(--type-weight-medium);
}

/* A chip riding beside the title — a version, a release number, a state — is
   not the subtitle, and the rule above was written for the subtitle: it out-
   specifies any class the chip carries and drops it onto its own line. */
.page-heading h1 span {
  display: inline-flex;
  margin-top: 0;
  color: inherit;
  font-weight: inherit;
}

.page-heading-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.table-card {
  padding: 0;
  overflow: hidden;
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--app-border);
}

.table-search {
  position: relative;
  flex: 1;
  max-width: 430px;
}

.table-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--app-subtle);
  pointer-events: none;
}

.table-search .form-control {
  min-height: 42px;
  padding-left: 40px;
  border-radius: var(--radius-pill);
  border-color: var(--app-border);
  background: rgba(255, 255, 255, .72);
  color: var(--app-text);
  font-weight: var(--type-weight-medium);
}

.table-search .form-control:focus,
.table-page-size .form-select:focus {
  border-color: var(--app-border-focus);
  box-shadow: 0 0 0 .2rem rgba(0, 56, 117, .08);
}

[data-bs-theme="dark"] .table-search .form-control,
[data-bs-theme="dark"] .table-page-size .form-select {
  background: rgba(255, 255, 255, .04);
  color: #F4F8FF;
}

.table-page-size {
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-page-size label {
  color: var(--app-subtle);
  font-size: var(--type-size-sm);
  font-weight: var(--type-weight-bold);
}

.table-page-size .form-select {
  width: 82px;
  border-radius: var(--radius-pill);
  border-color: var(--app-border);
  font-weight: var(--type-weight-semibold);
}

.app-table {
  margin: 0;
  color: var(--app-text);
}

.app-table thead th {
  padding: 14px 18px;
  color: var(--app-subtle);
  background: rgba(0, 56, 117, .025);
  border-bottom: 1px solid var(--app-border);
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-bold);
  letter-spacing: var(--letter-wide);
  white-space: nowrap;
}

[data-bs-theme="dark"] .app-table thead th {
  background: rgba(126, 192, 255, .045);
}

.app-table tbody td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--app-border);
  vertical-align: middle;
  font-weight: var(--type-weight-medium);
}

.app-table tbody tr:last-child td {
  border-bottom: 0;
}

.app-table tbody tr {
  transition: background .16s ease;
}

.app-table tbody tr:hover {
  background: rgba(0, 56, 117, .025);
}

[data-bs-theme="dark"] .app-table tbody tr:hover {
  background: rgba(126, 192, 255, .045);
}

.app-table td strong {
  display: block;
  color: var(--app-text);
  font-weight: var(--type-weight-bold);
}

.app-table td span {
  display: block;
  color: var(--app-subtle);
  font-size: var(--type-size-sm);
}

.table-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.th-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.th-label i {
  color: var(--app-primary);
  font-size: var(--type-size-base);
}

[data-bs-theme="dark"] .th-label i {
  color: #7EC0FF;
}

.table-sort {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font: inherit;
  text-align: left;
}

.table-sort:hover {
  color: var(--app-primary);
}

[data-bs-theme="dark"] .table-sort:hover {
  color: #7EC0FF;
}

.sort-icon {
  font-size: var(--type-size-xs);
  opacity: .46;
}

th.sorted-asc .sort-icon,
th.sorted-desc .sort-icon {
  opacity: 1;
  color: var(--app-primary);
}

th.sorted-asc .sort-icon::before {
  content: "\f145";
}

th.sorted-desc .sort-icon::before {
  content: "\f124";
}

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-top: 1px solid var(--app-border);
  color: var(--app-subtle);
  font-size: var(--type-size-md);
  font-weight: var(--type-weight-semibold);
}

.app-pagination {
  margin: 0;
  gap: 6px;
}

.app-pagination .page-link {
  min-width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--app-border);
  color: var(--app-primary);
  background: transparent;
  display: grid;
  place-items: center;
  font-weight: var(--type-weight-bold);
}

.app-pagination .page-item.active .page-link {
  background: var(--app-primary);
  color: #fff;
  border-color: var(--app-primary);
}

.app-pagination .page-item.disabled .page-link {
  color: var(--app-muted);
  opacity: .55;
}

[data-bs-theme="dark"] .app-pagination .page-link {
  color: #7EC0FF;
}

[data-bs-theme="dark"] .app-pagination .page-item.active .page-link {
  background: #7EC0FF;
  color: #00182E;
  border-color: #7EC0FF;
}

@media (max-width: 991.98px) {
  .page-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .table-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .table-search {
    max-width: none;
  }

  .table-footer {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 767.98px) {
  .app-table thead {
    display: none;
  }

  .app-table,
  .app-table tbody,
  .app-table tr,
  .app-table td {
    display: block;
    width: 100%;
  }

  .app-table tbody tr {
    padding: 14px 18px;
    border-bottom: 1px solid var(--app-border);
  }

  .app-table tbody td {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 8px 0;
    border-bottom: 0;
    text-align: right;
  }

  .app-table tbody td::before {
    content: attr(data-label);
    color: var(--app-subtle);
    font-weight: var(--type-weight-bold);
    text-align: left;
  }

  .app-table tbody td[data-label="Avatar"] {
    justify-content: flex-start;
  }

  .app-table tbody td[data-label="Avatar"]::before {
    display: none;
  }
}


/* Table-page compatibility refinements */
.table-actions-extended {
  align-items: center;
}

.table-search-compact {
  width: min(280px, 42vw);
  max-width: 280px;
}

.table-search-compact .form-control {
  min-height: 36px;
  font-size: var(--type-size-md);
}

.table-footer-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.app-table td[hidden],
.app-table tr[hidden] {
  display: none !important;
}

@media (max-width: 991.98px) {
  .table-actions-extended {
    width: 100%;
    justify-content: stretch;
  }

  .table-search-compact {
    width: 100%;
    max-width: none;
  }

  .table-footer-controls {
    justify-content: space-between;
  }
}

@media (max-width: 767.98px) {
  .table-footer-controls {
    align-items: stretch;
    flex-direction: column;
  }
}


/* Table dynamic filters */
.table-filter-panel {
  border-bottom: 1px solid var(--app-border);
}

.table-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
  gap: 14px;
  align-items: end;
  padding: 16px 20px 18px;
  background: rgba(0, 56, 117, .018);
}

[data-bs-theme="dark"] .table-filter-grid {
  background: rgba(126, 192, 255, .035);
}

.filter-field {
  display: grid;
  gap: 6px;
}

.filter-field label {
  color: var(--app-subtle);
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-bold);
}

.filter-field .form-select {
  min-height: 36px;
  border-radius: var(--radius-pill);
  border-color: var(--app-border);
  background-color: rgba(255, 255, 255, .72);
  color: var(--app-text);
  font-weight: var(--type-weight-semibold);
}

.filter-field .form-select:focus {
  border-color: var(--app-border-focus);
  box-shadow: 0 0 0 .2rem rgba(0, 56, 117, .08);
}

[data-bs-theme="dark"] .filter-field .form-select {
  background-color: rgba(255, 255, 255, .04);
  color: #F4F8FF;
}

.table-clear-filters {
  white-space: nowrap;
}

.table-filter-toggle.has-active-filters {
  background: var(--app-primary);
  color: #fff;
  border-color: var(--app-primary);
}

[data-bs-theme="dark"] .table-filter-toggle.has-active-filters {
  background: #7EC0FF;
  color: #00182E;
  border-color: #7EC0FF;
}

@media (max-width: 1399.98px) {
  .table-filter-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
  }
}

@media (max-width: 767.98px) {
  .table-filter-grid {
    grid-template-columns: 1fr;
  }

  .table-clear-filters {
    width: 100%;
  }
}


/* Mobile table cards */
@media (max-width: 767.98px) {
  .app-table-wrap {
    overflow: visible;
  }

  .app-table {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .app-table thead {
    display: none;
  }

  .app-table tbody,
  .app-table tr,
  .app-table td {
    display: block;
    width: 100%;
  }

  .app-table tbody tr {
    padding: 18px;
    border-bottom: 1px solid var(--app-border);
    background: transparent;
  }

  .app-table tbody tr:last-child {
    border-bottom: 0;
  }

  .app-table tbody tr:hover {
    background: transparent;
  }

  .app-table tbody td {
    padding: 0;
    border: 0;
    white-space: normal;
  }

  .app-table tbody td + td {
    margin-top: 16px;
  }

  .app-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    color: var(--app-subtle);
    font-size: var(--type-size-xs);
    font-weight: var(--type-weight-bold);
    letter-spacing: var(--letter-caps);
    text-transform: uppercase;
  }

  .app-table tbody td[data-label="Avatar"]::before {
    display: none;
  }

  .table-avatar {
    width: 46px;
    height: 46px;
  }

  .rank-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 280px;
  }

  .table-person strong {
    font-size: var(--type-size-lg);
  }

  .airport-code {
    min-width: 0;
  }
}

.link-strong,
.entity-link,
.link-subtle,
.inline-link,
.airport-link {
  text-decoration: none;
  transition:
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    opacity .18s ease,
    transform .18s ease;
}

.link-strong {
  color: inherit;
  border-bottom: 1px solid transparent;
}

.link-strong:hover,
.link-strong:focus {
  color: var(--app-primary);
  border-bottom-color: currentColor;
}

[data-bs-theme="dark"] .link-strong:hover,
[data-bs-theme="dark"] .link-strong:focus {
  color: #7EC0FF;
}

.entity-link {
  color: inherit;
  border-bottom: 1px dotted var(--app-border-accent);
}

.entity-link:hover,
.entity-link:focus {
  color: var(--app-primary);
  border-bottom-style: solid;
  border-bottom-color: currentColor;
}

[data-bs-theme="dark"] .entity-link {
  border-bottom-color: var(--app-border-accent);
}

[data-bs-theme="dark"] .entity-link:hover,
[data-bs-theme="dark"] .entity-link:focus {
  color: #7EC0FF;
}

.link-subtle {
  color: var(--app-subtle);
  border-bottom: 1px solid transparent;
}

.link-subtle:hover,
.link-subtle:focus {
  color: var(--app-primary);
  border-bottom-color: currentColor;
}

[data-bs-theme="dark"] .link-subtle:hover,
[data-bs-theme="dark"] .link-subtle:focus {
  color: #7EC0FF;
}

.inline-link {
  color: var(--app-primary);
  font-weight: var(--type-weight-bold);
  border-bottom: 1px solid var(--app-border-accent);
}

.inline-link:hover,
.inline-link:focus {
  color: #002E60;
  background: rgba(0, 56, 117, .07);
  border-bottom-color: currentColor;
}

[data-bs-theme="dark"] .inline-link {
  color: #7EC0FF;
  border-bottom-color: var(--app-border-accent);
}

[data-bs-theme="dark"] .inline-link:hover,
[data-bs-theme="dark"] .inline-link:focus {
  color: #B8DDFF;
  background: rgba(126, 192, 255, .10);
}

.airport-code {
  display: inline-flex;
}

.airport-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  color: var(--app-primary);
  background: rgba(0, 56, 117, .075);
  border: 1px solid var(--app-border);
  font-weight: var(--type-weight-bold);
  letter-spacing: var(--letter-wide);
}

.airport-link:hover,
.airport-link:focus {
  color: #ffffff;
  background: var(--app-primary);
  border-color: var(--app-primary);
  transform: translateY(-1px);
}

[data-bs-theme="dark"] .airport-link {
  color: #9ED0FF;
  background: rgba(126, 192, 255, .12);
  border-color: var(--app-border);
}

[data-bs-theme="dark"] .airport-link:hover,
[data-bs-theme="dark"] .airport-link:focus {
  color: #00182E;
  background: #9ED0FF;
  border-color: #9ED0FF;
}

.table-person .link-strong {
  display: inline-flex;
}

.flight-number .entity-link {
  font-size: inherit;
}

.route-row .entity-link {
  font-weight: var(--type-weight-bold);
}


/* Forms */
.form-hero {
  margin-bottom: 22px;
}

.form-layout {
  display: grid;
  gap: 22px;
}

.form-card {
  padding: 0;
  overflow: hidden;
}

.form-card-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 24px;
  border-bottom: 1px solid var(--app-border);
}

.form-card-header h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--app-text);
  font-size: var(--type-size-lg);
  font-weight: var(--type-weight-bold);
}

.form-card-header h2 i {
  color: var(--app-primary);
}

[data-bs-theme="dark"] .form-card-header h2 i {
  color: #7EC0FF;
}

.form-card-header p {
  margin: 5px 0 0;
  color: var(--app-subtle);
  font-weight: var(--type-weight-medium);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
  padding: 24px;
}

.form-field {
  min-width: 0;
}

.form-field-wide {
  grid-column: 1 / -1;
}

.form-label {
  margin-bottom: 7px;
  color: var(--app-text);
  font-size: var(--type-size-md);
  font-weight: var(--type-weight-bold);
}

.form-control,
.form-select {
  min-height: 42px;
  border-radius: var(--radius-md);
  border: 1px solid var(--app-border);
  background-color: rgba(255, 255, 255, .74);
  color: var(--app-text);
  font-weight: var(--type-weight-medium);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    transform .18s ease;
}

.form-control:hover,
.form-select:hover {
  border-color: var(--app-border-hover);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--app-border-focus);
  box-shadow: 0 0 0 .2rem rgba(0, 56, 117, .08);
  background-color: #ffffff;
  color: var(--app-text);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: rgba(255, 255, 255, .045);
  color: #F4F8FF;
  border-color: rgba(167, 183, 210, .20);
}

[data-bs-theme="dark"] .form-control:hover,
[data-bs-theme="dark"] .form-select:hover {
  border-color: var(--app-border-hover);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  border-color: var(--app-border-focus);
  box-shadow: 0 0 0 .2rem rgba(126, 192, 255, .10);
  background-color: rgba(255, 255, 255, .07);
  color: #F4F8FF;
}

/* `color-scheme: dark` on the root is what actually fixes the option list in
   a current browser. These are the floor under it: some Windows builds still
   paint the popup from the page's own ground, and the select's background
   above is a translucent white the popup does not inherit — so the colours
   are stated outright rather than left to be composited. */
[data-bs-theme="dark"] select option,
[data-bs-theme="dark"] select optgroup {
  background-color: var(--app-surface-solid);
  color: var(--app-text);
}

[data-bs-theme="dark"] select option:checked {
  background-color: #004f9f;
  color: #ffffff;
}

.form-control::placeholder {
  color: var(--app-muted);
}

.form-control:disabled,
.form-select:disabled {
  cursor: not-allowed;
  background-color: #EEF2F7;
  color: #7E879F;
  opacity: 1;
}

.form-control[readonly] {
  background-color: #F8FAFC;
  color: var(--app-subtle);
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled,
[data-bs-theme="dark"] .form-control[readonly] {
  background-color: rgba(167, 183, 210, .08);
  color: rgba(167, 183, 210, .62);
}

.form-text {
  color: var(--app-subtle);
  font-size: var(--type-size-sm);
  font-weight: var(--type-weight-medium);
}

.input-icon {
  position: relative;
}

.input-icon i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--app-subtle);
  pointer-events: none;
}

.input-icon .form-control {
  padding-left: 40px;
}

/* Reusable ICAO / code search input — uppercase display, semibold placeholder */
.ja-code-input {
  min-height: 48px;
  font-weight: var(--type-weight-semibold);
  text-transform: uppercase;
}

.ja-code-input::placeholder {
  font-weight: var(--type-weight-semibold);
  text-transform: none;
  color: var(--app-muted);
}

.is-valid,
.was-validated .form-control:valid,
.was-validated .form-select:valid {
  border-color: rgba(0, 108, 67, .46);
}

.is-valid:focus,
.was-validated .form-control:valid:focus,
.was-validated .form-select:valid:focus {
  border-color: rgba(0, 108, 67, .66);
  box-shadow: 0 0 0 .2rem rgba(0, 108, 67, .10);
}

.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: rgba(169, 54, 18, .52);
}

.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus {
  border-color: rgba(169, 54, 18, .72);
  box-shadow: 0 0 0 .2rem rgba(169, 54, 18, .10);
}

.valid-feedback {
  color: #006C43;
  font-weight: var(--type-weight-semibold);
}

.invalid-feedback {
  color: #A93612;
  font-weight: var(--type-weight-semibold);
}

[data-bs-theme="dark"] .valid-feedback {
  color: #48F2B8;
}

[data-bs-theme="dark"] .invalid-feedback {
  color: #FF9C83;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.app-check,
.app-radio,
.app-switch {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 58px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .48);
  transition:
    border-color .18s ease,
    background-color .18s ease,
    transform .18s ease;
}

.app-check:hover,
.app-radio:hover,
.app-switch:hover {
  border-color: var(--app-border-hover);
  background: rgba(0, 56, 117, .025);
  transform: translateY(-1px);
}

[data-bs-theme="dark"] .app-check,
[data-bs-theme="dark"] .app-radio,
[data-bs-theme="dark"] .app-switch {
  background: rgba(255, 255, 255, .035);
}

[data-bs-theme="dark"] .app-check:hover,
[data-bs-theme="dark"] .app-radio:hover,
[data-bs-theme="dark"] .app-switch:hover {
  border-color: var(--app-border-hover);
  background: rgba(126, 192, 255, .07);
}

.app-check.disabled {
  cursor: not-allowed;
  opacity: .58;
}

.app-check span,
.app-radio span,
.app-switch span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.app-check strong,
.app-switch strong {
  color: var(--app-text);
  font-size: var(--type-size-md);
}

.app-check em,
.app-switch em {
  color: var(--app-subtle);
  font-size: var(--type-size-sm);
  font-style: normal;
  font-weight: var(--type-weight-medium);
}

.form-check-input {
  width: 1.1rem;
  height: 1.1rem;
  margin: .1rem 0 0;
  border-color: var(--app-border-accent);
  box-shadow: none !important;
}

.form-check-input:checked {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
}

[data-bs-theme="dark"] .form-check-input {
  border-color: var(--app-border-accent);
  background-color: transparent;
}

[data-bs-theme="dark"] .form-check-input:checked {
  background-color: #7EC0FF;
  border-color: #7EC0FF;
}

.radio-stack,
.switch-stack {
  display: grid;
  gap: 12px;
}

.app-switch .form-check-input {
  width: 2.4rem;
  height: 1.25rem;
  border-radius: var(--radius-pill);
}

.file-drop {
  min-height: 132px;
  border: 1.5px dashed var(--app-border-accent);
  border-radius: var(--radius-lg);
  background: rgba(0, 56, 117, .025);
  color: var(--app-text);
  display: grid;
  place-items: center;
  text-align: center;
  gap: 6px;
  padding: 24px;
  cursor: pointer;
  transition:
    border-color .18s ease,
    background-color .18s ease,
    transform .18s ease;
}

.file-drop:hover,
.file-drop:focus-within {
  border-color: var(--app-primary);
  background: rgba(0, 56, 117, .055);
  transform: translateY(-1px);
}

.file-drop input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.file-drop i {
  color: var(--app-primary);
  font-size: var(--type-size-5xl);
}

.file-drop strong {
  font-weight: var(--type-weight-bold);
}

.file-drop span {
  color: var(--app-subtle);
  font-size: var(--type-size-sm);
  font-weight: var(--type-weight-medium);
}

[data-bs-theme="dark"] .file-drop {
  border-color: var(--app-border-accent);
  background: rgba(126, 192, 255, .06);
}

[data-bs-theme="dark"] .file-drop:hover,
[data-bs-theme="dark"] .file-drop:focus-within {
  border-color: #7EC0FF;
  background: rgba(126, 192, 255, .10);
}

[data-bs-theme="dark"] .file-drop i {
  color: #7EC0FF;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 24px;
  border-top: 1px solid var(--app-border);
  background: rgba(0, 56, 117, .018);
}

[data-bs-theme="dark"] .form-actions {
  background: rgba(126, 192, 255, .035);
}

@media (max-width: 991.98px) {
  .form-card-header {
    flex-direction: column;
  }

  .form-grid,
  .check-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .form-card-header,
  .form-grid,
  .form-actions {
    padding-left: 18px;
    padding-right: 18px;
  }

  .form-actions {
    flex-direction: column-reverse;
  }

  .form-actions .btn {
    width: 100%;
  }
}


/* Form switch spacing refinement */
.switch-stack {
  padding: 2px 4px;
}

.app-switch {
  padding: 16px 18px;
}

.app-switch .form-check-input {
  flex: 0 0 auto;
  margin-left: 0;
}

/* Searchable select / combobox */
.search-select {
  position: relative;
}

.search-select-empty {
  padding: 12px;
  color: var(--app-subtle);
  font-size: var(--type-size-md);
  font-weight: var(--type-weight-semibold);
}


/* Checkbox/radio alignment refinement */
.check-grid {
  grid-template-columns: 1fr;
}

.app-check.form-check,
.app-radio.form-check,
.app-switch.form-switch {
  padding: 16px 18px;
  padding-left: 18px;
}

.app-check .form-check-input,
.app-radio .form-check-input,
.app-switch .form-check-input {
  position: static;
  float: none;
  flex: 0 0 auto;
  margin-left: 0;
}

.app-check .form-check-input,
.app-radio .form-check-input {
  margin-top: .15rem;
}

.app-check,
.app-radio,
.app-switch {
  align-items: flex-start;
}

.app-check span,
.app-radio span,
.app-switch span {
  padding-left: 2px;
}

/* Fleet overview page */

/* Fleet overview page */
.fleet-photo-hero {
  position: relative;
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 26px;
  padding: 32px;
  margin-bottom: 24px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--app-border);
  background:
    linear-gradient(90deg, rgba(20, 18, 80, .86) 0%, rgba(0, 56, 117, .70) 38%, rgba(20, 18, 80, .08) 100%),
    url("../../../assets/img/fleet-overview-light.jpg") center 45% / cover no-repeat;
}

.fleet-photo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .22)),
    radial-gradient(circle at 72% 8%, rgba(255,255,255,.20), transparent 32%);
  pointer-events: none;
}

[data-bs-theme="dark"] .fleet-photo-hero {
  background:
    linear-gradient(90deg, rgba(0, 18, 35, .90) 0%, rgba(0, 56, 117, .66) 40%, rgba(0, 18, 35, .20) 100%),
    url("../../../assets/img/fleet-overview-dark.jpg") center 48% / cover no-repeat;
}

[data-bs-theme="dark"] .fleet-photo-hero::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .36)),
    radial-gradient(circle at 72% 8%, rgba(126,192,255,.16), transparent 32%);
}

.fleet-photo-hero .page-hero-copy,
.fleet-photo-hero .hero-stats {
  position: relative;
  z-index: 1;
}

.fleet-photo-hero .page-hero-copy {
  padding: 0;
  display: grid;
  gap: 16px;
  max-width: 720px;
}

.fleet-photo-hero h1 {
  margin: 0;
  color: #fff;
  font-size: var(--type-size-display);
  font-weight: var(--type-weight-bold);
  letter-spacing: var(--letter-tighter);
  line-height: 1.02;
}

.fleet-photo-hero p {
  margin: 0;
  max-width: 680px;
  color: rgba(255,255,255,.82);
  font-size: var(--type-size-base);
  line-height: 1.55;
}

/* Explicitly match the table-page/crew-page stat tiles */
.fleet-photo-hero .hero-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 150px));
  gap: 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.fleet-photo-hero .hero-stats > div {
  min-height: 68px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.20);
  color: #fff;
  backdrop-filter: blur(10px);
}

.fleet-photo-hero .hero-stats strong {
  display: block;
  font-size: var(--type-size-xl);
  line-height: 1;
  font-weight: var(--type-weight-bold);
  color: #fff;
}

.fleet-photo-hero .hero-stats span {
  display: block;
  margin-top: 7px;
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-semibold);
  color: rgba(255,255,255,.82);
}

@media (max-width: 991.98px) {
  .fleet-photo-hero {
    min-height: 240px;
    background-position: center center;
  }

  .fleet-photo-hero .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .fleet-photo-hero {
    min-height: auto;
    padding: 22px;
  }

  .fleet-photo-hero .hero-stats {
    grid-template-columns: 1fr 1fr;
  }
}


/* Fleet information page */
.fleet-detail-page {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.fleet-browser-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-lg);
  background: var(--app-surface-solid);
  padding: 14px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  color: var(--app-text);
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.fleet-browser-item:hover {
  border-color: color-mix(in srgb, var(--app-primary-2), transparent 55%);
  background: color-mix(in srgb, var(--app-surface-solid), var(--app-primary-soft) 30%);
  transform: translateY(-1px);
}
.fleet-browser-item.active {
  border-color: color-mix(in srgb, var(--app-primary-2), transparent 42%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-primary-2), transparent 42%);
}

.fleet-detail-main {
  min-width: 0;
  display: grid;
  gap: 18px;
}

.aircraft-hero-card {
  position: relative;
  overflow: hidden;
  min-height: 350px;
  padding: 28px;
  background: var(--app-surface-solid);
}
.aircraft-hero-media,
.aircraft-hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.aircraft-hero-media {
  background: url("../../../assets/img/fleet-overview-light.jpg") center 44% / cover no-repeat;
}
[data-bs-theme="dark"] .aircraft-hero-media {
  background-image: url("../../../assets/img/fleet-overview-dark.jpg");
}
.aircraft-hero-overlay {
  background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 34%, rgba(255,255,255,.52) 58%, rgba(255,255,255,.10) 82%);
}
[data-bs-theme="dark"] .aircraft-hero-overlay {
  background: linear-gradient(90deg, rgba(6,29,53,.96) 0%, rgba(6,29,53,.92) 34%, rgba(6,29,53,.56) 58%, rgba(6,29,53,.18) 82%);
}
.aircraft-hero-content {
  position: relative;
  z-index: 1;
  max-width: 660px;
  display: grid;
  gap: 22px;
}
.aircraft-headline h1 {
  margin: 0;
  font-size: var(--type-size-display);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.aircraft-headline p {
  margin: 10px 0 0;
  color: var(--app-subtle);
  font-weight: var(--type-weight-semibold);
}
.dot-divider { color: var(--app-muted); margin: 0 6px; }
.aircraft-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 520px;
}
.aircraft-stat-grid article {
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--app-surface-solid), var(--app-primary-soft) 30%);
  border: 1px solid var(--app-border);
}
.aircraft-stat-grid span {
  display: block;
  color: var(--app-muted);
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-bold);
  text-transform: none;
  margin-bottom: 7px;
}
.aircraft-stat-grid strong {
  display: block;
  font-size: var(--type-size-lg);
  font-weight: var(--type-weight-bold);
}
.aircraft-stat-grid strong .status-chip { vertical-align: middle; }

.fleet-section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--app-border);
}
.fleet-section-tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--app-subtle);
  padding: 10px 8px;
  font-weight: var(--type-weight-bold);
  transition: color .18s ease, border-color .18s ease;
}
.fleet-section-tabs button.active,
.fleet-section-tabs button:hover {
  color: var(--app-primary-2);
  border-color: var(--app-primary-2);
}

.fleet-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: start;
}

.fleet-detail-left {
  display: grid;
  gap: 18px;
}
.fleet-overview-cards.three-up {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.fleet-overview-cards.two-up {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.info-card {
  padding: 18px 18px 16px;
}
.card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.card-topline h2 {
  margin: 0;
  font-size: var(--type-size-xl);
}
.card-topline a { font-size: var(--type-size-md); font-weight: var(--type-weight-bold); }

.trend-graphic {
  width: 100%;
  height: 180px;
}
.trend-axis {
  stroke: var(--app-border);
  stroke-width: 2;
  fill: none;
}
.trend-line {
  stroke: var(--app-primary-2);
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.key-value-list {
  display: grid;
  gap: 10px;
}
.key-value-list.compact div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--app-border);
}
.key-value-list.compact div:last-child { border-bottom: 0; padding-bottom: 0; }
.key-value-list dt {
  color: var(--app-muted);
  font-size: var(--type-size-sm);
  font-weight: var(--type-weight-bold);
}
.key-value-list dd {
  margin: 0;
  text-align: right;
  font-weight: var(--type-weight-semibold);
}
.key-value-list dd .status-chip { font-style: normal; }

.maintenance-table td {
  padding: 10px 0;
  border-color: var(--app-border);
  font-size: var(--type-size-base);
}
.maintenance-table td:last-child { text-align: right; font-weight: var(--type-weight-bold); }
.route-path {
  fill: none;
  stroke: var(--app-primary-2);
  stroke-width: 4;
  stroke-linecap: round;
}
.map-dot { fill: var(--app-primary-2); }
.aircraft-marker { fill: #fff; }
.live-map-label {
  position: absolute;
  z-index: 2;
  bottom: 16px;
  display: grid;
  gap: 2px;
}
.live-map-label strong { font-size: var(--type-size-lg); }
.live-map-label span { color: var(--app-muted); font-size: var(--type-size-sm); }
.live-map-label.start { left: 16px; }
.live-map-label.end { right: 16px; text-align: right; }

.compact-history-card .app-table th,
.compact-history-card .app-table td {
  white-space: nowrap;
}

.fleet-browser-item[hidden] { display: none !important; }

@media (max-width: 1399.98px) {
  .fleet-overview-cards.three-up { grid-template-columns: 1fr 1fr; }
  .fleet-overview-cards.three-up > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 1199.98px) {
  .fleet-detail-page {
    grid-template-columns: 1fr;
  }
  .fleet-browser-card {
    position: static;
  }
  .fleet-browser-list { max-height: 420px; }
  .fleet-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 991.98px) {
  .aircraft-stat-grid,
  .fleet-overview-cards.two-up,
  .fleet-overview-cards.three-up {
    grid-template-columns: 1fr;
  }
  .utilization-wrap { grid-template-columns: 1fr; }
  .aircraft-hero-card { min-height: 300px; }
}

@media (max-width: 767.98px) {
  .fleet-detail-page { gap: 16px; }
  .fleet-browser-card,
  .aircraft-hero-card,
  .info-card { padding: 16px; }
  .fleet-browser-item {
    grid-template-columns: 76px minmax(0, 1fr);
  }
  .fleet-browser-meta { grid-column: 2; }
  .aircraft-hero-card { min-height: auto; }
  .aircraft-hero-overlay {
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 44%, rgba(255,255,255,.68) 100%);
  }
  [data-bs-theme="dark"] .aircraft-hero-overlay {
    background: linear-gradient(180deg, rgba(6,29,53,.96) 0%, rgba(6,29,53,.90) 44%, rgba(6,29,53,.74) 100%);
  }
}

.fleet-detail-page {
  grid-template-columns: 420px minmax(0, 1fr);
}

.fleet-browser-item {
  grid-template-columns: 108px minmax(0, 1fr) auto;
  padding: 16px;
  gap: 14px;
}

.aircraft-headline h1 .status-chip {
  font-size: var(--type-size-xs);
  vertical-align: middle;
}

.fleet-section-tabs {
  gap: 18px;
}

.fleet-section-tabs button {
  padding-inline: 0;
}

@media (min-width: 1600px) {
  .fleet-detail-page {
    grid-template-columns: 460px minmax(0, 1fr);
  }
}

@media (max-width: 1199.98px) {
  .fleet-detail-page {
    grid-template-columns: 1fr;
  }

  .fleet-browser-list {
    max-height: 520px;
  }
}

@media (max-width: 767.98px) {
  .fleet-browser-item {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .fleet-browser-thumb {
    width: 92px;
    height: 52px;
  }
}

.fleet-overview-cards.three-up {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) minmax(0, .95fr);
}

.fleet-overview-cards.three-up .quick-info-card .key-value-list.compact div {
  grid-template-columns: minmax(0, 1fr) auto;
}

.fleet-overview-cards.three-up .quick-info-card dd {
  max-width: 170px;
}

@media (max-width: 1399.98px) {
  .fleet-overview-cards.three-up {
    grid-template-columns: 1fr;
  }

  .fleet-overview-cards.three-up > :last-child {
    grid-column: auto;
  }
}

.fleet-detail-page {
  display: block;
}

.fleet-detail-main {
  width: 100%;
}

.aircraft-hero-card {
  min-height: 370px;
}

.fleet-detail-grid {
  grid-template-columns: minmax(0, 1fr) 360px;
}

.fleet-section-tabs {
  overflow-x: auto;
  scrollbar-width: thin;
}

.fleet-section-tabs button {
  white-space: nowrap;
}

@media (min-width: 1600px) {
  .fleet-detail-grid {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
}

@media (max-width: 1199.98px) {
  .fleet-detail-grid {
    grid-template-columns: 1fr;
  }
}

.fleet-tab-panels {
  min-width: 0;
}

.fleet-tab-panel {
  display: none;
}

.fleet-tab-panel.active {
  display: block;
}

.live-flight-card {
  display: grid;
  align-content: start;
}

.live-flight-card .card-topline {
  margin-bottom: 14px;
}

.live-flight-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(180px, .8fr);
  gap: 16px;
  align-items: stretch;
}

.live-flight-map {
  position: relative;
  min-height: 230px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--app-border);
  background:
    linear-gradient(180deg, rgba(0, 56, 117, .12), rgba(0, 56, 117, .035)),
    radial-gradient(circle at 18% 72%, rgba(77, 163, 255, .20), transparent 30%),
    radial-gradient(circle at 88% 28%, rgba(245, 137, 50, .12), transparent 26%),
    color-mix(in srgb, var(--app-primary-soft), var(--app-surface-solid) 72%);
  overflow: hidden;
}

[data-bs-theme="dark"] .live-flight-map {
  background:
    linear-gradient(180deg, rgba(77, 163, 255, .14), rgba(0, 18, 35, .20)),
    radial-gradient(circle at 18% 72%, rgba(77, 163, 255, .24), transparent 30%),
    radial-gradient(circle at 88% 28%, rgba(245, 137, 50, .18), transparent 26%),
    #082442;
}

.live-flight-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .42;
}

.live-flight-map svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 230px;
}

.map-contour {
  fill: none;
  stroke: color-mix(in srgb, var(--app-muted), transparent 62%);
  stroke-width: 1.2;
  stroke-dasharray: 5 7;
}

.live-route-path {
  fill: none;
  stroke: url(#liveFlightRoute);
  stroke-width: 5;
  stroke-linecap: round;
}

.live-route-dot {
  fill: var(--app-primary-2);
  stroke: var(--app-surface-solid);
  stroke-width: 3;
}

.live-route-dot.destination {
  fill: var(--app-orange);
}

.live-aircraft-marker {
  fill: #ffffff;
  stroke: var(--app-primary);
  stroke-width: 1.5;
  filter: drop-shadow(0 4px 10px rgba(0, 56, 117, .22));
}

.live-flight-map .live-map-label {
  position: absolute;
  z-index: 2;
  bottom: 14px;
  display: grid;
  gap: 2px;
}

.live-flight-map .live-map-label strong {
  color: var(--app-text);
  font-size: var(--type-size-base);
  font-weight: var(--type-weight-bold);
}

.live-flight-map .live-map-label span {
  color: var(--app-subtle);
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-semibold);
}

.live-flight-map .live-map-label.start {
  left: 14px;
}

.live-flight-map .live-map-label.end {
  right: 14px;
  text-align: right;
}

.live-flight-details {
  display: grid;
  align-content: stretch;
  gap: 0;
  margin: 0;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: color-mix(in srgb, var(--app-surface-solid), var(--app-primary-soft) 18%);
}

.live-flight-details div {
  display: grid;
  gap: 6px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--app-border);
}

.live-flight-details div:last-child {
  border-bottom: 0;
}

.live-flight-details dt {
  color: var(--app-muted);
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-bold);
}

.live-flight-details dd {
  margin: 0;
  color: var(--app-text);
  font-size: var(--type-size-base);
  font-weight: var(--type-weight-bold);
}

.fleet-overview-cards.three-up {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(420px, 1.28fr);
}

@media (max-width: 1599.98px) {
  .live-flight-layout {
    grid-template-columns: 1fr;
  }

  .fleet-overview-cards.three-up {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .live-flight-map {
    min-height: 210px;
  }

  .live-flight-map svg {
    height: 210px;
  }
}


/* v36 remove obsolete side trend */
.fleet-detail-grid {
  grid-template-columns: minmax(0, 1fr);
}


/* ============================================================================
   DASHBOARD COMPONENTS (consolidated 2026 refactor)
   Previously embedded as <style> blocks inside the module Blade components
   components/current-bid-panel.blade.php and components/jumpseat-active-flash.blade.php.
   Moved here so the markup is clean and the CSS is not re-emitted on every
   component render. These components only render on dash-layout pages, which
   always load this stylesheet. Class names unchanged (JS hooks use data-* attrs).
   ============================================================================ */

/* ---- Current bid panel ---- */
/* =========================================================
   CURRENT BID PANEL — ISOLATED + RESPONSIVE
========================================================= */

.current-bid-panel {
  background: #eaf0fb;
  border: 2px solid #3b6de0;
  border-radius: var(--radius-xl);
  padding: 22px 22px 20px;
}

/* Header */
.current-bid-panel .current-bid-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--type-weight-bold);
  color: #141250;
  margin-bottom: 16px;
}

/* Pills */
.current-bid-panel .flag-pill {
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-weight: var(--type-weight-semibold);
  box-shadow: 0 2px 6px rgba(20,18,80,0.12);
  white-space: nowrap;
}

.current-bid-panel .flag-pill.orange {
  background: var(--accent-warning-solid);
  color: var(--accent-warning-solid-fg);
}

/* The panel hardcodes a light surface, so under the dark theme its text — which
   inherits var(--app-text) — was near-white on pale blue and effectively
   unreadable. It stays a highlight, just one built from the theme's own tokens.
   The solid brand fills on the buttons below read on both grounds and are left
   alone. */
[data-bs-theme="dark"] .current-bid-panel {
  background: var(--app-primary-soft);
  border-color: var(--app-primary-2);
}

[data-bs-theme="dark"] .current-bid-panel .current-bid-header {
  color: var(--app-text);
}

[data-bs-theme="dark"] .current-bid-panel .flag-pill {
  background: var(--app-surface-solid);
  color: var(--app-text);
  box-shadow: none;
}

[data-bs-theme="dark"] .current-bid-panel .current-bid-table th {
  color: var(--app-subtle);
  border-bottom-color: var(--app-border) !important;
}

/* Buttons */
.current-bid-panel .btn-simbrief {
  background: var(--accent-warning-solid);
  color: var(--accent-warning-solid-fg);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: var(--type-size-sm);
  font-weight: var(--type-weight-bold);
  text-decoration: none;
}

.current-bid-panel .btn-simbrief:hover {
  filter: brightness(1.08);
}

.current-bid-panel .btn-cancel-flight {
  background: var(--accent-danger-solid);
  color: var(--accent-danger-solid-fg);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: var(--type-size-sm);
  font-weight: var(--type-weight-bold);
  text-decoration: none;
}

.current-bid-panel .btn-cancel-flight:hover {
  filter: brightness(1.08);
}

/* Desktop table */
.current-bid-panel .current-bid-table th {
  font-size: var(--type-size-sm);
  color: #8e8ead;
  font-weight: var(--type-weight-medium);
  border-bottom: 1px solid #cfd8ee !important;
  white-space: nowrap;
}

.current-bid-panel .current-bid-table td {
  font-size: var(--type-size-md);
  border-bottom: none !important;
  white-space: nowrap;
}

/* Force horizontal scroll when needed */
.current-bid-panel .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.current-bid-panel .bid-actions {
  display: inline-flex;   /* keeps text-end alignment */
  gap: 10px;
}

/* ===============================
   VISIBILITY CONTROL (ISOLATED)
=============================== */

/* Default: desktop/tablet */
.current-bid-panel .bid-desktop-only {
  display: block !important;
}

.current-bid-panel .bid-mobile-only {
  display: none !important;
}

/* Mobile */
@media (max-width: 992px) {
  .current-bid-panel .bid-desktop-only {
    display: none !important;
  }

  .current-bid-panel .bid-mobile-only {
    display: block !important;
  }
}

/* ===============================
   MOBILE LAYOUT
=============================== */

.current-bid-panel .current-bid-mobile {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.current-bid-panel .mobile-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.current-bid-panel .route-pills {
  display: flex;
  align-items: center;
  gap: 8px;
}

.current-bid-panel .mobile-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  font-size: var(--type-size-md);
}

.current-bid-panel .mobile-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

/* =========================================================
   REMOVE BOOTSTRAP TABLE ROW BACKGROUND + BORDERS
========================================================= */

.current-bid-panel .current-bid-table,
.current-bid-panel .current-bid-table tbody,
.current-bid-panel .current-bid-table tr,
.current-bid-panel .current-bid-table td,
.current-bid-panel .current-bid-table th {
  background: transparent !important;
}

/* Remove top border / separators Bootstrap adds */
.current-bid-panel .current-bid-table > :not(caption) > * > * {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Optional: add subtle divider under header only */
.current-bid-panel .current-bid-table thead th {
  border-bottom: 1px solid #cfd8ee !important;
}

/* ---- Jumpseat active flash banner ---- */
        .jumpseat-flash {
            display: grid;
            grid-template-columns: 44px minmax(0, 1fr) auto;
            gap: 14px;
            align-items: center;
            margin-bottom: 18px;
            border-color: rgba(245, 137, 50, .34);
            background:
                linear-gradient(135deg, rgba(245, 137, 50, .16), rgba(255, 255, 255, .84)),
                var(--app-surface);
        }
        .jumpseat-flash-icon {
            width: 44px;
            height: 44px;
            border-radius: var(--radius-md);
            display: grid;
            place-items: center;
            color: #D84F1B;
            background: rgba(245, 137, 50, .18);
            font-size: var(--type-size-xl);
        }
        .jumpseat-flash-content {
            display: grid;
            gap: 3px;
            min-width: 0;
        }
        .jumpseat-flash-content strong {
            color: var(--app-text);
            font-weight: var(--type-weight-bold);
            line-height: 1.2;
        }
        .jumpseat-flash-content span {
            color: var(--app-subtle);
            font-size: var(--type-size-md);
            line-height: 1.42;
        }
        .jumpseat-flash-remaining b {
            color: var(--app-orange);
            font-weight: var(--type-weight-bold);
        }
        .jumpseat-flash-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 8px;
        }
        [data-bs-theme="dark"] .jumpseat-flash {
            background:
                linear-gradient(135deg, rgba(255, 176, 107, .16), rgba(5, 30, 55, .80)),
                var(--app-surface);
            border-color: rgba(255, 176, 107, .32);
        }
        @media (max-width: 767.98px) {
            .jumpseat-flash {
                grid-template-columns: 38px minmax(0, 1fr);
            }
            .jumpseat-flash-actions {
                grid-column: 1 / -1;
                justify-content: stretch;
            }
            .jumpseat-flash-actions .btn {
                flex: 1 1 auto;
            }
        }

.status-chip,
.badge,
.ja-type-pill,
.ja-notam-series-badge,
.ja-notam-ref-badge,
.ja-notam-location-badge,
.ja-notam-state-pill,
.ja-admin-series-badge,
.ja-dashboard-notam-read-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px;
  width: fit-content;
  font-size: var(--ja-badge-font-size) !important;
  padding: var(--ja-badge-padding) !important;
  font-weight: var(--ja-badge-weight) !important;
  border-radius: var(--ja-badge-radius) !important;
  letter-spacing: var(--ja-badge-letter-spacing) !important;
  line-height: 1 !important;
  text-transform: none !important;
  /* Most of these are written as <em>, which was making a chip italic on some
     pages and upright on others depending only on the element it happened to
     sit on. A badge is a badge whatever carries it. */
  font-style: normal !important;
  white-space: nowrap;
  vertical-align: middle;
}

/* ============================================================================
   AIRPORT PROFILE PAGE — components unique to airports.show
   Layers on the design tokens above; reuses .dashboard-card, .status-chip,
   .fleet-section-tabs / .fleet-tab-panel for the tab system, and
   .key-value-list for simple key/value blocks. The classes below are the
   ones with no existing equivalent (hero, metric strip, map, demand radar,
   METAR block, route bars, cost-compare bars, alternates, stands).
   ============================================================================ */

.section-stack { display: flex; flex-direction: column; gap: 20px; }

/* ---- Hero ---------------------------------------------------------------- */
.hero-card { padding: 0; overflow: hidden; }
.hero-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 24px; background: var(--app-primary-soft);
  color: var(--app-primary-2); font-weight: var(--type-weight-bold); font-size: var(--type-size-md);
  border-bottom: 1px solid var(--app-border);
}
.hero-banner i { font-size: var(--type-size-lg); }
.hero-banner .spacer { flex: 1; }
.hero-body { display: grid; grid-template-columns: 360px minmax(0,1fr); gap: 30px; align-items: stretch; padding: 26px 28px; }
.hero-photo {
  width: 360px; align-self: stretch; min-height: 256px; border-radius: var(--radius-lg); object-fit: cover;
  background: var(--app-primary-soft); display: block;
}
.hero-id { display: flex; flex-direction: column; justify-content: center; }
.hero-idents { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-id h1 { margin: 0; font-size: var(--type-size-4xl); font-weight: var(--type-weight-bold); letter-spacing: var(--letter-tight); line-height: 1.06; }
.code-pair { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--app-border); border-radius: var(--radius-sm); overflow: hidden; font-weight: var(--type-weight-bold); font-size: var(--type-size-sm); }
.code-pair span { padding: 4px 9px; }
.code-pair .icao { background: var(--app-primary); color: #fff; letter-spacing: var(--letter-caps); }
.code-pair .iata { background: var(--app-surface-solid); color: var(--app-text); }
[data-bs-theme="dark"] .code-pair .icao { background: var(--app-primary-2); color: #00182e; }
.hero-id .meta { margin: 10px 0 0; color: var(--app-muted); font-weight: var(--type-weight-semibold); font-size: var(--type-size-md); }
.hero-id .meta b { color: var(--app-text); font-weight: var(--type-weight-bold); }
.hero-id .meta .sep { margin: 0 7px; opacity: .5; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fact { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--app-border);
  border-radius: var(--radius-md); background: var(--app-surface-solid); font-size: var(--type-size-sm); font-weight: var(--type-weight-semibold); }
.fact i { color: var(--app-primary-2); font-size: var(--type-size-base); }
.fact b { font-weight: var(--type-weight-bold); }
.fact .lab { color: var(--app-muted); font-weight: var(--type-weight-semibold); }
.chip-stack { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.hero-actions { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.hero-actions .btn { justify-content: flex-start; }

/* ---- Metric strip -------------------------------------------------------- */
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.metric {
  background: var(--app-surface); border: 1px solid var(--app-border);
  border-radius: var(--radius-lg); padding: 16px 18px; backdrop-filter: blur(14px);
  display: flex; flex-direction: column; gap: 2px; min-height: 104px;
}
.metric .lbl { display: flex; align-items: center; gap: 7px; color: var(--app-muted); font-size: var(--type-size-xs); font-weight: var(--type-weight-semibold); }
.metric .lbl i { color: var(--app-primary-2); font-size: var(--type-size-base); }
.metric .val { font-size: var(--type-size-4xl); font-weight: var(--type-weight-bold); letter-spacing: var(--letter-tight); line-height: 1.15; margin-top: 4px; }
.metric .val u { font-size: var(--type-size-md); font-weight: var(--type-weight-semibold); text-decoration: none; color: var(--app-subtle); margin-left: 2px; }
.metric .hlp { color: var(--app-muted); font-size: var(--type-size-xs); font-weight: var(--type-weight-semibold); margin-top: 2px; }
.metric .hlp em { font-style: normal; font-weight: var(--type-weight-bold); }
.metric .hlp em.up { color: var(--app-success); }
.metric .hlp em.down { color: var(--chip-expired-fg); }
.metric--link { cursor: pointer; transition: border-color .18s ease; }
.metric--link:hover { border-color: var(--app-border-hover); }
[data-bs-theme="dark"] .metric--link:hover { border-color: var(--app-border-hover); }

/* ---- Data-quality chip row ----------------------------------------------- */
.quality-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.quality-row .status-chip { cursor: default; }
.quality-row .status-chip[data-explain] { cursor: help; }

/* ---- Time-window pills --------------------------------------------------- */
.timepills { display: inline-flex; flex-wrap: wrap; gap: 5px; padding: 4px; border: 1px solid var(--app-border); border-radius: var(--radius-pill); background: var(--app-surface-solid); }
.timepill { border: 0; background: transparent; cursor: pointer; color: var(--app-subtle); font-family: inherit;
  font-weight: var(--type-weight-bold); font-size: var(--type-size-xs); padding: 6px 12px; border-radius: var(--radius-pill); transition: background .18s ease, color .18s ease; }
.timepill:hover { background: var(--app-primary-soft); color: var(--app-primary-2); }
.timepill[aria-pressed="true"] { background: var(--app-primary); color: #fff; }
[data-bs-theme="dark"] .timepill[aria-pressed="true"] { background: var(--app-primary-2); color: #00182e; }
.period-head { font-size: var(--type-size-lg); font-weight: var(--type-weight-bold); letter-spacing: var(--letter-tight); margin: 0; }

/* ---- Generic columns / grids --------------------------------------------- */
.two-col { display: grid; grid-template-columns: minmax(0,1fr) clamp(320px,26vw,400px); gap: 20px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 20px; }
.cards-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.cards-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.cards-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.mini-card { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--radius-lg); padding: 18px; backdrop-filter: blur(14px); }
.mini-card h3 { margin: 0 0 12px; font-size: var(--type-size-md); font-weight: var(--type-weight-bold); display: flex; align-items: center; gap: 8px; }
.mini-card h3 i { color: var(--app-primary-2); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 9px 14px; font-size: var(--type-size-md); }
.kv dt { color: var(--app-muted); font-weight: var(--type-weight-semibold); }
.kv dd { margin: 0; font-weight: var(--type-weight-bold); text-align: right; }
.helper { color: var(--app-muted); font-size: var(--type-size-sm); font-weight: var(--type-weight-semibold); margin: 10px 0 0; }
.pos { color: var(--app-success); }

.neg { color: var(--chip-expired-fg); }

/* ---- Map ------------------------------------------------------------------ */
.map-card { padding: 0; overflow: hidden; }
.map-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border-bottom: 1px solid var(--app-border); }
.map-head .route-mini { display: flex; align-items: center; gap: 12px; font-weight: var(--type-weight-bold); }
.map-head .route-mini b { font-size: var(--type-size-lg); letter-spacing: var(--letter-tight); }
.map-head .route-mini i { color: var(--app-primary-2); }
.map-toggles { display: inline-flex; gap: 5px; margin-left: auto; }
.map-stage { position: relative; height: 420px; overflow: hidden; border-radius: 0; }
.map-stage .ja-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-note { position: absolute; left: 16px; bottom: 14px; z-index: 5; background: var(--app-surface-solid); border: 1px solid var(--app-border);
  border-radius: var(--radius-sm); padding: 7px 12px; font-size: var(--type-size-xs); font-weight: var(--type-weight-semibold); color: var(--app-muted); display: flex; gap: 7px; align-items: center; }
.map-legend { position: absolute; right: 16px; top: 14px; z-index: 5; background: var(--app-surface-solid); border: 1px solid var(--app-border);
  border-radius: var(--radius-sm); padding: 9px 13px; font-size: var(--type-size-xs); font-weight: var(--type-weight-semibold); display: flex; flex-direction: column; gap: 6px; }
.map-legend span { display: inline-flex; align-items: center; gap: 8px; color: var(--app-subtle); }
.map-legend i { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.map-summary { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; padding: 18px 22px; border-top: 1px solid var(--app-border); }
.map-summary span { display: block; color: var(--app-muted); font-size: var(--type-size-xs); font-weight: var(--type-weight-semibold); margin-bottom: 4px; }
.map-summary strong { display: block; font-size: var(--type-size-base); font-weight: var(--type-weight-bold); }
.node-label { fill: var(--app-text); font-size: var(--type-size-base); font-weight: var(--type-weight-bold); }
.node-label.muted { fill: var(--app-muted); font-size: var(--type-size-xs); font-weight: var(--type-weight-semibold); }
.map-stage-fullscreen-btn { position: absolute; right: 16px; bottom: 14px; z-index: 5; }
.map-card:fullscreen, .map-card.ja-map-fullscreen-active { background: var(--app-surface-solid); }
.map-card:fullscreen .map-stage, .map-card.ja-map-fullscreen-active .map-stage { height: 100vh; }

/* ---- Demand radar (ECharts host) ----------------------------------------- */
.radar-wrap { display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: center; }
.radar-canvas { width: 230px; height: 230px; flex: none; }
.demand-rows { display: flex; flex-direction: column; gap: 13px; }
.demand-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 14px; align-items: center; }
.demand-row .dname { font-weight: var(--type-weight-bold); font-size: var(--type-size-md); }
.demand-row .track { height: 9px; border-radius: var(--radius-pill); background: var(--app-primary-soft); position: relative; overflow: hidden; }
.demand-row .track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill); background: var(--app-primary); }
[data-bs-theme="dark"] .demand-row .track i { background: var(--app-primary-2); }
.demand-row .track i.hi { background: var(--app-orange); }
.demand-row .dval { font-weight: var(--type-weight-bold); font-size: var(--type-size-md); min-width: 46px; text-align: right; }
.demand-row .dval small { display: block; color: var(--app-muted); font-weight: var(--type-weight-semibold); font-size: var(--type-size-3xs); }

/* ---- METAR / weather ------------------------------------------------------ */
.metar-box { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--type-size-base); font-weight: var(--type-weight-semibold); line-height: 1.5;
  background: var(--app-primary-soft); color: var(--app-primary-2); border-radius: var(--radius-md); padding: 14px 16px; word-break: break-word; }
[data-bs-theme="dark"] .metar-box { color: #BFE0FF; }
.metar-label { font-size: var(--type-size-2xs); font-weight: var(--type-weight-bold); letter-spacing: var(--letter-caps); color: var(--app-muted); margin: 0 0 7px; }
.decode-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.decode-grid > div { display: flex; flex-direction: column; gap: 3px; }
.decode-grid dt { color: var(--app-muted); font-size: var(--type-size-xs); font-weight: var(--type-weight-semibold); }
.decode-grid dd { margin: 0; font-weight: var(--type-weight-bold); font-size: var(--type-size-base); }
.wx-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

/* ---- Cost compare bars ----------------------------------------------------- */
.compare { display: flex; flex-direction: column; gap: 18px; }
.compare-row .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.compare-row .top b { font-weight: var(--type-weight-bold); font-size: var(--type-size-md); }
.compare-row .top span { color: var(--app-muted); font-weight: var(--type-weight-semibold); font-size: var(--type-size-sm); }
.compare-track { position: relative; height: 12px; border-radius: var(--radius-pill); background: var(--app-primary-soft); }
.compare-track .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill); background: var(--app-primary); }
[data-bs-theme="dark"] .compare-track .fill { background: var(--app-primary-2); }
.compare-track .avg { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--app-orange); }
.compare-track .avg::after { content: "avg"; position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-size: var(--type-size-4xs); font-weight: var(--type-weight-bold); color: var(--app-orange); }

/* ---- Movement / aircraft-type trail --------------------------------------- */
.trail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.trail .stop { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--radius-pill);
  background: #EAF1FF; color: #003875; font-weight: var(--type-weight-bold); font-size: var(--type-size-sm); }
[data-bs-theme="dark"] .trail .stop { background: rgba(77,163,255,.16); color: #9CCBFF; }
.trail .arrow { color: var(--app-muted); font-size: var(--type-size-3xs); }

/* ---- Empty + error states -------------------------------------------------- */
.empty { min-height: 170px; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; padding: 26px 16px; }
.empty .ico { width: 46px; height: 46px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--app-primary-soft); color: var(--app-primary-2); font-size: var(--type-size-2xl); }
.empty strong { font-weight: var(--type-weight-semibold); font-size: var(--type-size-base); }

.empty p { max-width: 340px; margin: 0; color: var(--app-muted); font-size: var(--type-size-md); }
.error-notice { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--app-primary-soft); color: var(--app-primary-2); border-radius: var(--radius-lg); font-size: var(--type-size-md); font-weight: var(--type-weight-semibold); }
.error-notice i { font-size: var(--type-size-xl); flex: none; }

/* ---- Operations layout (narrow crew + wide flights) ------------------------ */
.ops-grid { display: grid; grid-template-columns: 312px minmax(0,1fr); gap: 20px; align-items: start; }

/* ---- Alternates ------------------------------------------------------------ */
.alt-list { display: flex; flex-direction: column; gap: 8px; }
.alt-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 13px; border: 1px solid var(--app-border); border-radius: var(--radius-md); background: var(--app-surface-solid); }
.alt-row .rank { width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--app-primary-soft); color: var(--app-primary-2);
  font-weight: var(--type-weight-bold); font-size: var(--type-size-xs); display: grid; place-items: center; }
.alt-row .acode { font-weight: var(--type-weight-bold); font-size: var(--type-size-base); }
.alt-row .aname { color: var(--app-muted); font-weight: var(--type-weight-semibold); font-size: var(--type-size-sm); }
.alt-row .adist { font-weight: var(--type-weight-bold); font-size: var(--type-size-sm); color: var(--app-subtle); white-space: nowrap; }

/* ---- Stands ----------------------------------------------------------------- */
.stand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px,1fr)); gap: 10px; }
.stand { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--app-border);
  border-left: 3px solid var(--app-primary); border-radius: var(--radius-md); background: var(--app-surface-solid); }
.stand .snum { font-weight: var(--type-weight-bold); font-size: var(--type-size-lg); }
.stand .stype { font-size: var(--type-size-3xs); font-weight: var(--type-weight-bold); letter-spacing: var(--letter-caps); text-transform: uppercase; color: var(--app-primary-2); }
.stand.cargo { border-left-color: #4E5A73; }

.stand.cargo .stype { color: #4E5A73; }
.stand.mixed { border-left-color: var(--app-orange); }

.stand.mixed .stype { color: #B5660F; }
[data-bs-theme="dark"] .stand.mixed .stype { color: #FFB874; }
[data-bs-theme="dark"] .stand.cargo .stype { color: #AEBBD0; }

/* ---- Responsive ------------------------------------------------------------- */
@media (max-width: 991px) {
  .hero-body { grid-template-columns: 1fr; gap: 18px; }
  .hero-photo { width: 100%; height: 200px; min-height: 0; }
  .hero-actions { flex-direction: row; flex-wrap: wrap; }
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .two-col { grid-template-columns: 1fr; }
  .cards-2 { grid-template-columns: 1fr; }
  .cards-3 { grid-template-columns: 1fr; }
  .cards-4 { grid-template-columns: repeat(2,1fr); }
  .map-summary { grid-template-columns: repeat(3,1fr); }
  .radar-wrap { grid-template-columns: 1fr; justify-items: center; }
  .decode-grid { grid-template-columns: repeat(2,1fr); }
  .ops-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .map-stage { height: 280px; }
  .map-summary { grid-template-columns: repeat(2,1fr); }
  .hbar { grid-template-columns: 96px 1fr auto; }
  .demand-row { grid-template-columns: 72px 1fr auto; }
}



/* Fleet list filtered to a single tail, e.g. from a flight record's aircraft
   link. Says which registration is showing and how to get back to the fleet. */
.fleet-filter-note {
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--type-size-xs);
  color: var(--app-muted);
}

.fleet-filter-note strong {
  color: var(--app-text);
  font-weight: var(--type-weight-semibold);
}

/* ============================================================================
   BOOTSTRAP PRIMITIVE NORMALISATION
   ---------------------------------------------------------------------------
   The canonical JerryAir components above (.app-table, .status-chip,
   .btn-orange, .btn-soft-primary, .flash-alert) are what a new page should
   reach for. But roughly three hundred views across nine modules were built
   on plain Bootstrap classes instead — `table table-striped`, `alert
   alert-success`, `btn btn-primary`, `badge bg-danger` — and those fall
   through to Bootstrap 5.3's own palette. Its dark theme is a neutral slate
   that has nothing to do with this product's navy, which is why a table on
   the cargo board read as grey sitting inside a navy card, and why the same
   table on two different pages could disagree about what "success" is.

   Rewriting that many views is not the fix. Bootstrap 5.3 drives every
   component from its own `--bs-*` custom properties, so this section
   re-points those properties at the JerryAir tokens. Two consequences worth
   knowing:

     - Only variables are set here, never the properties themselves. A rule
       like `.app-table thead th { background: ... }` earlier in this file
       therefore still wins outright: this is a floor under the components
       nobody styled, not a ceiling over the ones somebody did.
     - Page sheets load after this file, so a page that genuinely needs to
       differ still can, exactly as before.

   Anything that needs a colour here names a semantic accent token. No new
   hex values are introduced below.
   ============================================================================ */

/* ---- Tables ------------------------------------------------------------- */

.table {
  --bs-table-color: var(--app-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--app-border);
  --bs-table-striped-color: var(--app-text);
  --bs-table-striped-bg: var(--row-wash);
  --bs-table-hover-color: var(--app-text);
  --bs-table-hover-bg: var(--row-wash-strong);
  --bs-table-active-color: var(--app-text);
  --bs-table-active-bg: var(--row-wash-strong);
}

/* `table-secondary` and friends are Bootstrap's contextual row tints, which
   in its dark theme resolve to opaque greys that black out a row. Route them
   through the accents so a highlighted row stays a wash over the card. */
.table-primary { --bs-table-bg: var(--accent-primary-tint); --bs-table-color: var(--app-text); }
.table-success { --bs-table-bg: var(--accent-success-tint); --bs-table-color: var(--app-text); }
.table-warning { --bs-table-bg: var(--accent-warning-tint); --bs-table-color: var(--app-text); }
.table-danger  { --bs-table-bg: var(--accent-danger-tint);  --bs-table-color: var(--app-text); }
.table-info    { --bs-table-bg: var(--accent-info-tint);    --bs-table-color: var(--app-text); }
.table-secondary,
.table-light,
.table-dark    { --bs-table-bg: var(--accent-neutral-tint); --bs-table-color: var(--app-text); }

/* ---- Buttons ------------------------------------------------------------ */

/* Solid semantic buttons. `.btn-orange` / `.btn-soft-primary` stay the
   house's outline-first pair for ordinary actions; these are the fallbacks
   for the views that asked Bootstrap directly. */
.btn-primary {
  --bs-btn-bg: var(--accent-primary-solid);
  --bs-btn-border-color: var(--accent-primary-solid);
  --bs-btn-color: var(--accent-primary-solid-fg);
  --bs-btn-hover-bg: var(--accent-primary-solid);
  --bs-btn-hover-border-color: var(--accent-primary-solid);
  --bs-btn-hover-color: var(--accent-primary-solid-fg);
  --bs-btn-active-bg: var(--accent-primary-solid);
  --bs-btn-active-border-color: var(--accent-primary-solid);
  --bs-btn-active-color: var(--accent-primary-solid-fg);
}

.btn-success {
  --bs-btn-bg: var(--accent-success-solid);
  --bs-btn-border-color: var(--accent-success-solid);
  --bs-btn-color: var(--accent-success-solid-fg);
  --bs-btn-hover-bg: var(--accent-success-solid);
  --bs-btn-hover-border-color: var(--accent-success-solid);
  --bs-btn-hover-color: var(--accent-success-solid-fg);
  --bs-btn-active-bg: var(--accent-success-solid);
  --bs-btn-active-border-color: var(--accent-success-solid);
  --bs-btn-active-color: var(--accent-success-solid-fg);
}

.btn-warning {
  --bs-btn-bg: var(--accent-warning-solid);
  --bs-btn-border-color: var(--accent-warning-solid);
  --bs-btn-color: var(--accent-warning-solid-fg);
  --bs-btn-hover-bg: var(--accent-warning-solid);
  --bs-btn-hover-border-color: var(--accent-warning-solid);
  --bs-btn-hover-color: var(--accent-warning-solid-fg);
  --bs-btn-active-bg: var(--accent-warning-solid);
  --bs-btn-active-border-color: var(--accent-warning-solid);
  --bs-btn-active-color: var(--accent-warning-solid-fg);
}

.btn-danger {
  --bs-btn-bg: var(--accent-danger-solid);
  --bs-btn-border-color: var(--accent-danger-solid);
  --bs-btn-color: var(--accent-danger-solid-fg);
  --bs-btn-hover-bg: var(--accent-danger-solid);
  --bs-btn-hover-border-color: var(--accent-danger-solid);
  --bs-btn-hover-color: var(--accent-danger-solid-fg);
  --bs-btn-active-bg: var(--accent-danger-solid);
  --bs-btn-active-border-color: var(--accent-danger-solid);
  --bs-btn-active-color: var(--accent-danger-solid-fg);
}

.btn-secondary {
  --bs-btn-bg: var(--accent-neutral-solid);
  --bs-btn-border-color: var(--accent-neutral-solid);
  --bs-btn-color: var(--accent-neutral-solid-fg);
  --bs-btn-hover-bg: var(--accent-neutral-solid);
  --bs-btn-hover-border-color: var(--accent-neutral-solid);
  --bs-btn-hover-color: var(--accent-neutral-solid-fg);
  --bs-btn-active-bg: var(--accent-neutral-solid);
  --bs-btn-active-border-color: var(--accent-neutral-solid);
  --bs-btn-active-color: var(--accent-neutral-solid-fg);
}

.btn-info {
  --bs-btn-bg: var(--accent-info-solid);
  --bs-btn-border-color: var(--accent-info-solid);
  --bs-btn-color: var(--accent-info-solid-fg);
  --bs-btn-hover-bg: var(--accent-info-solid);
  --bs-btn-hover-border-color: var(--accent-info-solid);
  --bs-btn-hover-color: var(--accent-info-solid-fg);
  --bs-btn-active-bg: var(--accent-info-solid);
  --bs-btn-active-border-color: var(--accent-info-solid);
  --bs-btn-active-color: var(--accent-info-solid-fg);
}

/* Hover is a lift rather than a second colour: the solids are already at the
   contrast ceiling for their theme, so darkening one on light (or lightening
   it on dark) walks it back off. */
.btn-primary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-secondary:hover,
.btn-info:hover {
  filter: brightness(1.06);
}

[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-success:hover,
[data-bs-theme="dark"] .btn-warning:hover,
[data-bs-theme="dark"] .btn-danger:hover,
[data-bs-theme="dark"] .btn-secondary:hover,
[data-bs-theme="dark"] .btn-info:hover {
  filter: brightness(1.1);
}

/* Outline buttons: tinted ground on hover rather than Bootstrap's full
   inversion, which on dark flashed a saturated block under pale text. */
.btn-outline-primary   { --bs-btn-color: var(--accent-primary-tint-fg); --bs-btn-border-color: var(--accent-primary-tint-fg); --bs-btn-hover-bg: var(--accent-primary-tint); --bs-btn-hover-color: var(--accent-primary-tint-fg); --bs-btn-hover-border-color: var(--accent-primary-tint-fg); --bs-btn-active-bg: var(--accent-primary-tint); --bs-btn-active-color: var(--accent-primary-tint-fg); --bs-btn-active-border-color: var(--accent-primary-tint-fg); }
.btn-outline-success   { --bs-btn-color: var(--accent-success-tint-fg); --bs-btn-border-color: var(--accent-success-tint-fg); --bs-btn-hover-bg: var(--accent-success-tint); --bs-btn-hover-color: var(--accent-success-tint-fg); --bs-btn-hover-border-color: var(--accent-success-tint-fg); --bs-btn-active-bg: var(--accent-success-tint); --bs-btn-active-color: var(--accent-success-tint-fg); --bs-btn-active-border-color: var(--accent-success-tint-fg); }
.btn-outline-warning   { --bs-btn-color: var(--accent-warning-tint-fg); --bs-btn-border-color: var(--accent-warning-tint-fg); --bs-btn-hover-bg: var(--accent-warning-tint); --bs-btn-hover-color: var(--accent-warning-tint-fg); --bs-btn-hover-border-color: var(--accent-warning-tint-fg); --bs-btn-active-bg: var(--accent-warning-tint); --bs-btn-active-color: var(--accent-warning-tint-fg); --bs-btn-active-border-color: var(--accent-warning-tint-fg); }
.btn-outline-danger    { --bs-btn-color: var(--accent-danger-tint-fg);  --bs-btn-border-color: var(--accent-danger-tint-fg);  --bs-btn-hover-bg: var(--accent-danger-tint);  --bs-btn-hover-color: var(--accent-danger-tint-fg);  --bs-btn-hover-border-color: var(--accent-danger-tint-fg);  --bs-btn-active-bg: var(--accent-danger-tint);  --bs-btn-active-color: var(--accent-danger-tint-fg);  --bs-btn-active-border-color: var(--accent-danger-tint-fg); }
.btn-outline-secondary { --bs-btn-color: var(--accent-neutral-tint-fg); --bs-btn-border-color: var(--accent-neutral-tint-fg); --bs-btn-hover-bg: var(--accent-neutral-tint); --bs-btn-hover-color: var(--accent-neutral-tint-fg); --bs-btn-hover-border-color: var(--accent-neutral-tint-fg); --bs-btn-active-bg: var(--accent-neutral-tint); --bs-btn-active-color: var(--accent-neutral-tint-fg); --bs-btn-active-border-color: var(--accent-neutral-tint-fg); }
.btn-outline-info      { --bs-btn-color: var(--accent-info-tint-fg);    --bs-btn-border-color: var(--accent-info-tint-fg);    --bs-btn-hover-bg: var(--accent-info-tint);    --bs-btn-hover-color: var(--accent-info-tint-fg);    --bs-btn-hover-border-color: var(--accent-info-tint-fg);    --bs-btn-active-bg: var(--accent-info-tint);    --bs-btn-active-color: var(--accent-info-tint-fg);    --bs-btn-active-border-color: var(--accent-info-tint-fg); }

.btn-link {
  --bs-btn-color: var(--app-primary-2);
  --bs-btn-hover-color: var(--app-primary-2);
}

/* Bootstrap 3 names that survived into views phpVMS shipped and modules
   copied. Bootstrap 5 defines none of them, so `btn btn-default` — the cancel
   button on most forms — was rendering as unstyled text with no ground and no
   edge, and `alert alert-error` as an unstyled paragraph. Aliased rather than
   renamed in the markup: the same names appear in the two stock themes this
   install still carries, and a stylesheet can cover all of them at once. */
.btn-default {
  --bs-btn-color: var(--accent-neutral-tint-fg);
  --bs-btn-border-color: var(--accent-neutral-tint-fg);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--accent-neutral-tint);
  --bs-btn-hover-color: var(--accent-neutral-tint-fg);
  --bs-btn-hover-border-color: var(--accent-neutral-tint-fg);
  --bs-btn-active-bg: var(--accent-neutral-tint);
  --bs-btn-active-color: var(--accent-neutral-tint-fg);
  --bs-btn-active-border-color: var(--accent-neutral-tint-fg);
  border: 1px solid var(--accent-neutral-tint-fg);
}

.btn-warn {
  --bs-btn-bg: var(--accent-warning-solid);
  --bs-btn-border-color: var(--accent-warning-solid);
  --bs-btn-color: var(--accent-warning-solid-fg);
  --bs-btn-hover-bg: var(--accent-warning-solid);
  --bs-btn-hover-color: var(--accent-warning-solid-fg);
}

.btn-neutral {
  --bs-btn-bg: var(--accent-neutral-solid);
  --bs-btn-border-color: var(--accent-neutral-solid);
  --bs-btn-color: var(--accent-neutral-solid-fg);
  --bs-btn-hover-bg: var(--accent-neutral-solid);
  --bs-btn-hover-color: var(--accent-neutral-solid-fg);
}

/* ---- Badges ------------------------------------------------------------- */

/* Shape and size are already unified further up; this is the colour half.
   A badge is always a tint — a badge is a label, not a button, and the solid
   fills belong to things you can press. */
.badge.bg-primary,   .badge.text-bg-primary   { background-color: var(--accent-primary-tint) !important; color: var(--accent-primary-tint-fg) !important; }
.badge.bg-success,   .badge.text-bg-success   { background-color: var(--accent-success-tint) !important; color: var(--accent-success-tint-fg) !important; }
.badge.bg-warning,   .badge.text-bg-warning   { background-color: var(--accent-warning-tint) !important; color: var(--accent-warning-tint-fg) !important; }
.badge.bg-danger,    .badge.text-bg-danger    { background-color: var(--accent-danger-tint)  !important; color: var(--accent-danger-tint-fg)  !important; }
.badge.bg-info,      .badge.text-bg-info      { background-color: var(--accent-info-tint)    !important; color: var(--accent-info-tint-fg)    !important; }
.badge.bg-secondary, .badge.text-bg-secondary,
.badge.bg-light,     .badge.text-bg-light,
.badge.bg-dark,      .badge.text-bg-dark      { background-color: var(--accent-neutral-tint) !important; color: var(--accent-neutral-tint-fg) !important; }

/* ---- Alerts ------------------------------------------------------------- */

/* `.flash-alert` is the house banner and keeps its own tokens. These are the
   inline `alert alert-*` blocks scattered through module views. */
.alert {
  --bs-alert-border-color: var(--app-border);
  border-radius: var(--radius-lg);
  font-weight: var(--type-weight-medium);
}

.alert-primary   { --bs-alert-bg: var(--accent-primary-tint); --bs-alert-color: var(--accent-primary-tint-fg); }
.alert-success   { --bs-alert-bg: var(--accent-success-tint); --bs-alert-color: var(--accent-success-tint-fg); }
.alert-warning   { --bs-alert-bg: var(--accent-warning-tint); --bs-alert-color: var(--accent-warning-tint-fg); }
.alert-danger    { --bs-alert-bg: var(--accent-danger-tint);  --bs-alert-color: var(--accent-danger-tint-fg); }
.alert-info      { --bs-alert-bg: var(--accent-info-tint);    --bs-alert-color: var(--accent-info-tint-fg); }
.alert-secondary,
.alert-light,
.alert-dark      { --bs-alert-bg: var(--accent-neutral-tint); --bs-alert-color: var(--accent-neutral-tint-fg); }

/* Bootstrap 3 spellings, same reason as the legacy buttons below. Without
   these an `alert alert-error` is an unstyled paragraph — which is the one
   alert that most needs to be seen. */
.alert-error     { --bs-alert-bg: var(--accent-danger-tint);  --bs-alert-color: var(--accent-danger-tint-fg);  background-color: var(--accent-danger-tint);  color: var(--accent-danger-tint-fg); }
.alert-default   { --bs-alert-bg: var(--accent-neutral-tint); --bs-alert-color: var(--accent-neutral-tint-fg); background-color: var(--accent-neutral-tint); color: var(--accent-neutral-tint-fg); }

/* ---- Cards, list groups, modals, dropdowns ------------------------------ */

/* `.dashboard-card` and `.status-card` are the house surfaces. A plain
   Bootstrap `.card` should at least sit on the same ground as one. */
.card {
  --bs-card-bg: var(--app-surface-solid);
  --bs-card-color: var(--app-text);
  --bs-card-border-color: var(--app-border);
  --bs-card-cap-bg: transparent;
  --bs-card-cap-color: var(--app-text);
  --bs-card-border-radius: var(--radius-lg);
  --bs-card-inner-border-radius: var(--radius-md);
}

.list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-color: var(--app-text);
  --bs-list-group-border-color: var(--app-border);
  --bs-list-group-action-hover-bg: var(--row-wash);
  --bs-list-group-action-hover-color: var(--app-text);
  --bs-list-group-active-bg: var(--accent-primary-solid);
  --bs-list-group-active-border-color: var(--accent-primary-solid);
  --bs-list-group-active-color: var(--accent-primary-solid-fg);
}

.modal {
  --bs-modal-bg: var(--app-surface-solid);
  --bs-modal-color: var(--app-text);
  --bs-modal-border-color: var(--app-border);
  --bs-modal-header-border-color: var(--app-border);
  --bs-modal-footer-border-color: var(--app-border);
  --bs-modal-border-radius: var(--radius-lg);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--app-surface-solid);
  --bs-dropdown-color: var(--app-text);
  --bs-dropdown-border-color: var(--app-border);
  --bs-dropdown-link-color: var(--app-text);
  --bs-dropdown-link-hover-bg: var(--row-wash-strong);
  --bs-dropdown-link-hover-color: var(--app-text);
  --bs-dropdown-link-active-bg: var(--accent-primary-solid);
  --bs-dropdown-link-active-color: var(--accent-primary-solid-fg);
  --bs-dropdown-border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
}

/* ---- Tabs, pagination, progress ----------------------------------------- */

.nav-tabs {
  --bs-nav-tabs-border-color: var(--app-border);
  --bs-nav-tabs-link-hover-border-color: var(--app-border-hover);
  --bs-nav-tabs-link-active-color: var(--app-text);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: var(--app-border) var(--app-border) transparent;
  --bs-nav-link-color: var(--app-subtle);
  --bs-nav-link-hover-color: var(--app-text);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--accent-primary-solid);
  --bs-nav-pills-link-active-color: var(--accent-primary-solid-fg);
  --bs-nav-link-color: var(--app-subtle);
  --bs-nav-link-hover-color: var(--app-text);
}

.pagination {
  --bs-pagination-bg: transparent;
  --bs-pagination-color: var(--app-text);
  --bs-pagination-border-color: var(--app-border);
  --bs-pagination-hover-bg: var(--row-wash-strong);
  --bs-pagination-hover-color: var(--app-text);
  --bs-pagination-hover-border-color: var(--app-border-hover);
  --bs-pagination-focus-bg: var(--row-wash-strong);
  --bs-pagination-focus-color: var(--app-text);
  --bs-pagination-active-bg: var(--accent-primary-solid);
  --bs-pagination-active-border-color: var(--accent-primary-solid);
  --bs-pagination-active-color: var(--accent-primary-solid-fg);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-color: var(--app-muted);
  --bs-pagination-disabled-border-color: var(--app-border);
}

.progress {
  --bs-progress-bg: var(--accent-neutral-tint);
  --bs-progress-bar-bg: var(--accent-primary-solid);
  --bs-progress-bar-color: var(--accent-primary-solid-fg);
}

.progress-bar.bg-success { background-color: var(--accent-success-solid) !important; }
.progress-bar.bg-warning { background-color: var(--accent-warning-solid) !important; }
.progress-bar.bg-danger  { background-color: var(--accent-danger-solid)  !important; }
.progress-bar.bg-info    { background-color: var(--accent-info-solid)    !important; }

/* ---- Native control popups ---------------------------------------------- */

/* `color-scheme` is what decides how the browser paints a <select>'s option
   list, and it is already set on the root. Restating it on the control
   itself is the belt to that braces: the root value reaches the popup by
   inheritance, and an ancestor that sets its own `color-scheme` — the PIREP
   viewer does, for its forked palette — silently takes the popup with it.
   Stating it where the control is means the popup matches the control it
   dropped out of, wherever that control happens to sit. */
select,
.form-select,
.form-control,
input,
textarea {
  color-scheme: light;
}

[data-bs-theme="dark"] select,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] input,
[data-bs-theme="dark"] textarea {
  color-scheme: dark;
}

/* ---- Text and background utilities -------------------------------------- */

/* Bootstrap's semantic text utilities resolve to its own palette, so a
   `.text-success` figure on a JerryAir card was a different green from the
   `.status-chip.good` beside it. */
.text-primary   { color: var(--accent-primary-tint-fg) !important; }
.text-success   { color: var(--accent-success-tint-fg) !important; }
.text-warning   { color: var(--accent-warning-tint-fg) !important; }
.text-danger    { color: var(--accent-danger-tint-fg)  !important; }
.text-info      { color: var(--accent-info-tint-fg)    !important; }
.text-secondary { color: var(--app-subtle) !important; }
.text-muted     { color: var(--app-muted)  !important; }
.text-body-secondary { color: var(--app-subtle) !important; }