/* ============================================================================
   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-xl / --radius-lg / --sidebar-width
   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
   ============================================================================ */

:root {
  --app-bg: #F3F5F7;
  --app-surface: rgba(255, 255, 255, .86);
  --app-surface-solid: #ffffff;
  --app-border: rgba(32, 54, 102, .10);
  --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;
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-pill: 999px;
  --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 four values to retune every badge site-wide. */
  --ja-badge-font-size: .75rem;
  --ja-badge-padding: 5px 10px;
  --ja-badge-weight: 700;
  --ja-badge-radius: 999px;
  --ja-badge-letter-spacing: .01em;

  /* ---- Standardised button weight ---- */
  --ja-btn-weight: 700;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
}

[data-bs-theme="dark"] {
  --app-bg: #00182e;
  --app-surface: rgba(5, 30, 55, .86);
  --app-surface-solid: #061d35;
  --app-border: rgba(132, 178, 255, .18);
  --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;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--app-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[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: 1.15rem;
  font-weight: 650;
}

.crew-welcome .fw-semibold {
  font-size: 1.45rem;
}

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

.nav-section-label {
  color: var(--app-muted);
  font-size: .78rem;
  font-weight: var(--type-weight-bold);
  letter-spacing: .04em;
  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: 14px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 13px;
  font-weight: var(--type-weight-semibold);
  font-size: .96rem;
  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: 1.04rem;
}

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

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

.chevron {
  font-size: .8rem !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: .91rem;
  font-weight: var(--type-weight-semibold);
  border-radius: 12px;
}

.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: 42px;
  height: 42px;
  border-radius: 999px;
  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: rgba(0, 56, 117, .28);
  color: var(--app-primary);
  background: #fff;
}

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

.flag-btn {
  font-size: 1.05rem;
}

.notification-btn {
  position: relative;
}

.notify-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--app-success);
  color: #031526;
  display: grid;
  place-items: center;
  font-size: .7rem;
  font-weight: var(--type-weight-extrabold);
}

.top-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  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: 999px;
  background: transparent;
  color: var(--app-muted);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .02em;
  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: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  position: relative;
}

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

.user-menu .dropdown-menu {
  margin-top: 14px;
  min-width: 235px;
  padding: 10px;
  border-radius: 18px;
  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: .82rem;
  font-weight: var(--type-weight-bold);
}

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

.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: 850;
}

.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: 999px;
  display: grid;
  place-items: center;
  background: rgb(138 145 179 / 17%);
  color: var(--app-primary-2);
  font-size: 1.25rem;
}

.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: .88rem;
  line-height: 1.45;
}

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

.profile-avatar {
  width: 118px;
  height: 118px;
  border-radius: 999px;
  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: 1.35rem;
  font-weight: var(--type-weight-extrabold);
}

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

.badge-soft-blue {
  background: rgba(0, 56, 117, .10);
  color: var(--app-primary);
  border: 1px solid rgba(0, 56, 117, .14);
  font-weight: var(--type-weight-extrabold);
}

.btn {
  --bs-btn-border-radius: 999px;
  --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: 999px;
  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: 999px;
  box-shadow: none;
}

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

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

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

[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-outline-orange,
[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-outline-orange:hover,
[data-bs-theme="dark"] .btn-outline-orange:focus,
[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: .82rem;
  font-weight: 650;
  margin-bottom: 5px;
}

.profile-stats strong,
.flight-metrics strong,
.next-flight-footer strong {
  display: block;
  font-size: .98rem;
}

/* (Superseded status-chip base removed in 2026 refactor — size/shape/weight
   are now set by the standardised badge scale at the end of this file and the
   "Badge readability pass" below; this block only ever set size, no colours.) */

.status-chip.good,
.status-chip.online {
  background: rgba(0, 207, 125, .14);
  color: var(--app-success);
}

.status-chip.class {
  background: rgba(151, 105, 235, .18);
  color: #a97cff;
}

.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: 1rem;
  font-weight: 850;
  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: .84rem;
  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: 650;
}

.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: 999px;
  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;
}

.btn-orange {
  background: #ffffff;
  color: var(--app-orange);
  border: 1.5px solid var(--app-orange);
  font-weight: var(--type-weight-bold);
  border-radius: 999px;
  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(--app-orange);
  color: #ffffff;
  border-color: var(--app-orange);
}


.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: 1.6rem;
  margin: 8px 0 7px;
}

.stat-item em {
  color: var(--app-success);
  font-size: .8rem;
  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;
  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: .86rem;
}

.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: 1.18rem;
}

.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: 8px;
  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: .9rem;
}

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

.feed-item time {
  color: var(--app-subtle);
  font-size: .78rem;
  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-extrabold);
}

.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: 14px;
  display: grid;
  place-items: center;
  font-size: .72rem;
  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: 1.25rem;
}

.quick-grid button:hover,
.quick-grid .quick-action:hover {
  border-color: rgba(0, 56, 117, .26);
  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: rgba(126, 192, 255, .40);
  background: rgba(77, 163, 255, .09);
}

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

.company-row img {
  width: 92px;
  border-radius: 12px;
  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: 18px;
  }

  .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: .78rem;
  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: rgba(0, 56, 117, .26);
  background: rgba(0, 56, 117, .045);
}

[data-bs-theme="dark"] .quick-grid button:hover {
  border-color: rgba(126, 192, 255, .40);
  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;
  }
}


/* 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: 18px;
  box-shadow: none;
  backdrop-filter: blur(14px);
}

.flash-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  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: .94rem;
  font-weight: 850;
  color: var(--app-text);
}

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

.flash-alert .btn-close {
  position: static;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  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: 8px;
  font-size: .76rem;
  font-weight: var(--type-weight-extrabold);
  letter-spacing: .01em;
  line-height: 1;
  text-transform: none;
  border: 1px solid transparent;
}

.status-chip.good,
.status-chip.online {
  background: #DDF8EC;
  color: #006C43;
  border-color: rgba(0, 108, 67, .10);
}

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

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

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

.badge-soft-blue {
  background: rgba(0, 56, 117, .10);
  color: #003875;
  border: 1px solid rgba(0, 56, 117, .16);
  font-weight: var(--type-weight-extrabold);
  letter-spacing: .01em;
}

[data-bs-theme="dark"] .badge-soft-blue {
  background: rgba(126, 192, 255, .14);
  color: #7EC0FF;
  border-color: rgba(126, 192, 255, .20);
}


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

[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.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: .78rem;
  font-weight: var(--type-weight-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.page-hero h1 {
  margin: 0;
  color: var(--app-text);
  font-size: clamp(1.65rem, 2.2vw, 2.3rem);
  font-weight: var(--type-weight-bold);
  letter-spacing: -.02em;
}

.page-hero p {
  margin: 0;
  max-width: 760px;
  color: var(--app-subtle);
  font-size: .96rem;
  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);
}

.hero-crew-art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 16px;
  padding: 0 22px 32px;
}

.hero-crew-art span {
  position: relative;
  width: 42px;
  height: 92px;
  border-radius: 999px 999px 16px 16px;
  background: linear-gradient(180deg, #FFFFFF, #DDE7F6);
  border: 1px solid rgba(0, 56, 117, .12);
}

.hero-crew-art span::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: #F0B18E;
  border: 6px solid #EAF0FA;
}

.hero-crew-art span::after {
  content: "";
  position: absolute;
  top: 20px;
  left: -18px;
  width: 78px;
  height: 4px;
  border-radius: 999px;
  background: rgba(0, 56, 117, .20);
}

.hero-crew-art span:nth-child(2),
.hero-crew-art span:nth-child(4) {
  height: 78px;
  opacity: .9;
}

.hero-crew-art span:nth-child(3) {
  height: 104px;
  background: linear-gradient(180deg, #FFFFFF, #CFE0F7);
}

[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);
}

[data-bs-theme="dark"] .hero-crew-art span {
  background: linear-gradient(180deg, #173B61, #08233F);
  border-color: rgba(126, 192, 255, .20);
}

[data-bs-theme="dark"] .hero-crew-art span::before {
  border-color: #08233F;
}

[data-bs-theme="dark"] .hero-crew-art span::after {
  background: rgba(126, 192, 255, .22);
}

.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: 1.18rem;
  font-weight: var(--type-weight-bold);
  letter-spacing: -.015em;
}

.table-card-header p {
  margin: 0;
  max-width: 780px;
  color: var(--app-subtle);
  font-size: .9rem;
  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: .76rem;
  font-weight: var(--type-weight-bold);
  letter-spacing: .045em;
  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: 999px;
  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: .94rem;
  font-weight: var(--type-weight-bold);
}

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

.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: .02em;
}

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

.form-check-input {
  border-color: rgba(20, 18, 80, .28);
}

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

[data-bs-theme="dark"] .form-check-input {
  background-color: rgba(255,255,255,.04);
  border-color: rgba(167, 183, 210, .38);
}

@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: 999px;
  background: rgba(255,255,255,.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  font-size: .78rem;
  font-weight: var(--type-weight-bold);
  letter-spacing: .055em;
  text-transform: uppercase;
}

.crew-photo-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: var(--type-weight-bold);
  letter-spacing: -.035em;
  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: 14px;
  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: 1.18rem;
  line-height: 1;
  font-weight: var(--type-weight-bold);
}

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

[data-bs-theme="dark"] .crew-photo-hero {
  border-color: rgba(126, 192, 255, .20);
  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: .78rem;
  font-weight: var(--type-weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.page-heading h1 {
  margin: 0;
  color: var(--app-text);
  font-size: 1.55rem;
  font-weight: var(--type-weight-bold);
  letter-spacing: -0.02em;
}

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

.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: 999px;
  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: rgba(0, 56, 117, .36);
  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: .82rem;
  font-weight: var(--type-weight-bold);
}

.table-page-size .form-select {
  width: 82px;
  border-radius: 999px;
  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: .78rem;
  font-weight: var(--type-weight-bold);
  letter-spacing: .025em;
  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: .82rem;
}

.table-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
}

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

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

[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: .78rem;
  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: .86rem;
  font-weight: var(--type-weight-semibold);
}

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

.app-pagination .page-link {
  min-width: 34px;
  height: 34px;
  border-radius: 999px;
  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: .86rem;
}

.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: .78rem;
  font-weight: var(--type-weight-bold);
}

.filter-field .form-select {
  min-height: 36px;
  border-radius: 999px;
  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: rgba(0, 56, 117, .36);
  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: .76rem;
    font-weight: var(--type-weight-bold);
    letter-spacing: .045em;
    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: 1rem;
  }

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


/* Entity/link styling */
.link-strong,
.entity-link,
.link-subtle,
.inline-link,
.airport-link,
.rank-image-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 rgba(0, 56, 117, .34);
}

.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: rgba(126, 192, 255, .42);
}

[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 rgba(0, 56, 117, .26);
}

.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: rgba(126, 192, 255, .34);
}

[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: 8px;
  color: var(--app-primary);
  background: rgba(0, 56, 117, .075);
  border: 1px solid rgba(0, 56, 117, .10);
  font-weight: var(--type-weight-extrabold);
  letter-spacing: .015em;
}

.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: rgba(126, 192, 255, .18);
}

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

.rank-image-link {
  display: inline-flex;
  border-radius: 6px;
}

.rank-image-link:hover,
.rank-image-link:focus {
  opacity: .82;
  transform: translateY(-1px);
}

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

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

.route-row .entity-link {
  font-weight: 850;
}


/* 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: 1.02rem;
  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: .86rem;
  font-weight: var(--type-weight-bold);
}

.form-control,
.form-select {
  min-height: 42px;
  border-radius: 14px;
  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: rgba(0, 56, 117, .22);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(0, 56, 117, .42);
  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: rgba(126, 192, 255, .36);
}

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

.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: .8rem;
  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: 650;
  text-transform: uppercase;
}

.ja-code-input::placeholder {
  font-weight: 650;
  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: 16px;
  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: rgba(0, 56, 117, .24);
  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: rgba(126, 192, 255, .36);
  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: .9rem;
}

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

.form-check-input {
  width: 1.1rem;
  height: 1.1rem;
  margin: .1rem 0 0;
  border-color: rgba(0, 56, 117, .28);
  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: rgba(126, 192, 255, .44);
  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: 999px;
}

.file-drop {
  min-height: 132px;
  border: 1.5px dashed rgba(0, 56, 117, .26);
  border-radius: 18px;
  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: 1.8rem;
}

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

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

[data-bs-theme="dark"] .file-drop {
  border-color: rgba(126, 192, 255, .34);
  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-menu {
  position: absolute;
  z-index: 25;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: none;
  max-height: 260px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--app-border);
  border-radius: 16px;
  background: var(--app-surface-solid);
  box-shadow: 0 18px 42px rgba(45, 57, 102, .12);
}

.search-select.is-open .search-select-menu {
  display: grid;
  gap: 4px;
  animation: menuFadeIn .14s ease both;
}

.search-select-menu button {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--app-text);
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  text-align: left;
  transition:
    background-color .18s ease,
    color .18s ease,
    transform .18s ease;
}

.search-select-menu button:hover,
.search-select-menu button:focus,
.search-select-menu button.is-active {
  background: rgba(0, 56, 117, .07);
  color: var(--app-primary);
  transform: translateX(2px);
}

.search-select-menu button[hidden] {
  display: none;
}

.search-select-menu strong {
  font-weight: var(--type-weight-extrabold);
  letter-spacing: .02em;
}

.search-select-menu span {
  color: var(--app-subtle);
  font-size: .84rem;
  font-weight: var(--type-weight-semibold);
}

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

[data-bs-theme="dark"] .search-select-menu {
  box-shadow: 0 18px 42px rgba(0, 0, 0, .32);
}

[data-bs-theme="dark"] .search-select-menu button:hover,
[data-bs-theme="dark"] .search-select-menu button:focus,
[data-bs-theme="dark"] .search-select-menu button.is-active {
  background: rgba(126, 192, 255, .10);
  color: #7EC0FF;
}


/* 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: clamp(2rem, 4vw, 3.2rem);
  font-weight: var(--type-weight-bold);
  letter-spacing: -.035em;
  line-height: 1.02;
}

.fleet-photo-hero p {
  margin: 0;
  max-width: 680px;
  color: rgba(255,255,255,.82);
  font-size: .96rem;
  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: 14px;
  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: 1.18rem;
  line-height: 1;
  font-weight: var(--type-weight-bold);
  color: #fff;
}

.fleet-photo-hero .hero-stats span {
  display: block;
  margin-top: 7px;
  font-size: .78rem;
  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-card {
  padding: 22px;
  position: sticky;
  top: 24px;
}

.fleet-browser-header h2 {
  margin: 0;
  font-size: 1.35rem;
}
.fleet-browser-header p {
  margin: 6px 0 0;
  color: var(--app-muted);
  font-size: .9rem;
}

.fleet-browser-search {
  margin-top: 18px;
}

.fleet-browser-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 16px;
}

.fleet-filter-chip {
  border: 1px solid var(--app-border);
  background: var(--app-surface-solid);
  color: var(--app-text);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: .82rem;
  font-weight: var(--type-weight-bold);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.fleet-filter-chip span { color: var(--app-muted); }
.fleet-filter-chip:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--app-primary-2), transparent 60%);
  color: var(--app-primary-2);
}
.fleet-filter-chip.active {
  background: var(--app-primary);
  color: #fff;
  border-color: var(--app-primary);
}
.fleet-filter-chip.active span { color: rgba(255,255,255,.78); }

.fleet-browser-list {
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 330px);
  overflow: auto;
  padding-right: 4px;
}

.fleet-browser-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--app-border);
  border-radius: 18px;
  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-browser-thumb {
  width: 92px;
  height: 52px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--app-border);
  background: color-mix(in srgb, var(--app-primary-soft), #fff 12%);
}
.fleet-browser-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.fleet-browser-copy > span {
  color: var(--app-muted);
  font-size: .84rem;
  font-weight: var(--type-weight-semibold);
}
.fleet-browser-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fleet-browser-row strong {
  font-size: 1rem;
}
.fleet-browser-route {
  color: var(--app-text);
  font-size: .88rem;
  font-weight: var(--type-weight-bold);
}
.fleet-browser-route i {
  color: var(--app-muted);
  vertical-align: -1px;
}
.fleet-browser-meta {
  color: var(--app-text);
  font-size: .82rem;
  font-weight: var(--type-weight-bold);
  white-space: nowrap;
}

.fleet-detail-main {
  min-width: 0;
  display: grid;
  gap: 18px;
}
.fleet-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--app-subtle);
  font-weight: var(--type-weight-bold);
}
.fleet-back-link:hover { color: var(--app-primary-2); }

.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: clamp(2rem, 3vw, 2.85rem);
  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: 16px;
  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: .75rem;
  font-weight: var(--type-weight-bold);
  text-transform: none;
  margin-bottom: 7px;
}
.aircraft-stat-grid strong {
  display: block;
  font-size: 1rem;
  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,
.fleet-detail-right {
  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: 1.08rem;
}
.card-topline a { font-size: .88rem; font-weight: var(--type-weight-bold); }

.utilization-wrap {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr);
  gap: 16px;
  align-items: center;
}
.utilization-ring {
  width: 132px;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.45rem;
  font-weight: var(--type-weight-extrabold);
  color: var(--app-primary-2);
  background:
    radial-gradient(circle at center, var(--app-surface-solid) 56%, transparent 57%),
    conic-gradient(var(--app-primary-2) 0 78.6%, color-mix(in srgb, var(--app-primary-2), transparent 82%) 78.6% 100%);
  box-shadow: inset 0 0 0 1px var(--app-border);
}
.utilization-metrics {
  display: grid;
  gap: 10px;
}
.utilization-metrics div { display: grid; gap: 3px; }
.utilization-metrics span {
  color: var(--app-muted);
  font-size: .8rem;
  font-weight: var(--type-weight-bold);
}
.utilization-metrics strong { font-size: 1rem; }

.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: .84rem;
  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: .92rem;
}
.maintenance-table td:last-child { text-align: right; font-weight: var(--type-weight-bold); }

.live-position-map {
  position: relative;
  min-height: 220px;
  border-radius: 18px;
  border: 1px solid var(--app-border);
  background:
    linear-gradient(180deg, rgba(0,56,117,.14), rgba(0,56,117,.04)),
    radial-gradient(circle at 20% 35%, rgba(77,163,255,.16), transparent 30%),
    color-mix(in srgb, var(--app-primary-soft), var(--app-surface-solid) 74%);
  overflow: hidden;
}
[data-bs-theme="dark"] .live-position-map {
  background:
    linear-gradient(180deg, rgba(0,56,117,.22), rgba(0,18,35,.12)),
    radial-gradient(circle at 20% 35%, rgba(77,163,255,.20), transparent 30%),
    #082442;
}
.live-position-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .45;
}
.live-position-map svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 220px;
}
.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: 1rem; }
.live-map-label span { color: var(--app-muted); font-size: .82rem; }
.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-card {
  padding: 24px;
}

.fleet-browser-list {
  max-height: min(760px, calc(100vh - 260px));
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
}

.fleet-browser-list::-webkit-scrollbar {
  width: 8px;
}

.fleet-browser-list::-webkit-scrollbar-track {
  background: transparent;
}

.fleet-browser-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--app-muted), transparent 54%);
  border-radius: 999px;
}

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

.fleet-browser-thumb {
  width: 108px;
  height: 60px;
}

.fleet-back-link {
  display: none !important;
}

.aircraft-headline h1 .status-chip {
  font-size: .76rem;
  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,
.fleet-overview-cards.three-up .status-overview-card .key-value-list.compact div {
  grid-template-columns: minmax(0, 1fr) auto;
}

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

.fleet-detail-right {
  align-content: start;
}

@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-browser-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
}

.fleet-browser-row strong {
  min-width: 0;
}

.fleet-browser-row .status-chip {
  justify-self: end;
  white-space: nowrap;
  line-height: 1;
}

.side-trend-card .trend-graphic {
  height: 190px;
  margin-top: 4px;
}

.side-trend-card .card-topline {
  margin-bottom: 10px;
}

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

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

.fleet-browser-card {
  display: none !important;
}

.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;
}

.empty-tab-card {
  padding: 28px;
  min-height: 240px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
}

.empty-tab-card h2 {
  margin: 0;
  font-size: 1.25rem;
}

.empty-tab-card p {
  margin: 0;
  color: var(--app-subtle);
  font-weight: var(--type-weight-medium);
}

.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: 18px;
  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: .95rem;
  font-weight: var(--type-weight-extrabold);
}

.live-flight-map .live-map-label span {
  color: var(--app-subtle);
  font-size: .76rem;
  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: 18px;
  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: .76rem;
  font-weight: 750;
}

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

.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);
}

.fleet-detail-right:empty {
  display: none;
}

.side-trend-card {
  display: none !important;
}


/* ============================================================================
   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: 22px;
  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: 8px;
  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: #ed7400;
  color: #ffffff;
}

/* Buttons */
.current-bid-panel .btn-acars {
  background: linear-gradient(170deg, #1547AB, #235AC8);
  color: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  text-decoration: none;
}

.current-bid-panel .btn-simbrief {
  background: #ed7400;
  color: #fff;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  text-decoration: none;
}

.current-bid-panel .btn-simbrief:hover {
  background-color: #cc6300 !important;  /* darken on hover */
}

.current-bid-panel .btn-cancel-flight {
  background: #dc3545;
  color: #fff;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  text-decoration: none;
}

.current-bid-panel .btn-cancel-flight:hover {
  background-color: #c12e2a !important;  /* darken on hover */
}

/* Desktop table */
.current-bid-panel .current-bid-table th {
  font-size: 13px;
  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: 14px;
  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: 14px;
}

.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: 14px;
            display: grid;
            place-items: center;
            color: #D84F1B;
            background: rgba(245, 137, 50, .18);
            font-size: 1.1rem;
        }
        .jumpseat-flash-content {
            display: grid;
            gap: 3px;
            min-width: 0;
        }
        .jumpseat-flash-content strong {
            color: var(--app-text);
            font-weight: 850;
            line-height: 1.2;
        }
        .jumpseat-flash-content span {
            color: var(--app-subtle);
            font-size: .9rem;
            line-height: 1.42;
        }
        .jumpseat-flash-remaining b {
            color: var(--app-orange);
            font-weight: 850;
        }
        .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;
            }
        }


/* ============================================================================
   STANDARDISED BADGE / CHIP / PILL SCALE  (2026 refactor)
   ----------------------------------------------------------------------------
   Before this, the same "status label" job was done with ~9 classes spread
   across ja_styles.css, jerryair-news.css, jerryair-admin-news.css and
   schedules-map.css, at font-sizes from .69rem to .86rem, three different
   radii and weights of 700/800/900 — so badges looked inconsistent between
   pages (the NOTAM badges were noticeably larger than status chips, etc.).

   This single rule forces ONE size + shape + weight on every badge variant.
   It uses !important *only on sizing properties* so it reliably wins over the
   page-specific stylesheets that load after this file AND over their
   responsive @media overrides. Each variant keeps its own colour/background
   rules (which use normal specificity and are untouched here).

   Excluded on purpose:
     .hero-chip            — uppercase section "eyebrow", a different element
     .jumpseat-action-chip — a clickable action control, sized as a button
     .rank-badge           — an <img> rank insignia (height-based)
   Retune via the --ja-badge-* tokens in :root.
   ============================================================================ */
.status-chip,
.badge,
.ja-type-pill,
.ja-status-pill,
.ja-json-chip,
.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;
  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: .9rem;
  border-bottom: 1px solid var(--app-border);
}
.hero-banner i { font-size: 1.05rem; }
.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: 1.62rem; font-weight: var(--type-weight-bold); letter-spacing: -.02em; line-height: 1.06; }
.code-pair { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--app-border); border-radius: 9px; overflow: hidden; font-weight: var(--type-weight-extrabold); font-size: .82rem; }
.code-pair span { padding: 4px 9px; }
.code-pair .icao { background: var(--app-primary); color: #fff; letter-spacing: .04em; }
.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: .9rem; }
.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: .82rem; font-weight: 650; }
.fact i { color: var(--app-primary-2); font-size: .95rem; }
.fact b { font-weight: var(--type-weight-extrabold); }
.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: .78rem; font-weight: 650; }
.metric .lbl i { color: var(--app-primary-2); font-size: .95rem; }
.metric .val { font-size: 1.5rem; font-weight: var(--type-weight-bold); letter-spacing: -.015em; line-height: 1.15; margin-top: 4px; }
.metric .val u { font-size: .9rem; font-weight: 650; text-decoration: none; color: var(--app-subtle); margin-left: 2px; }
.metric .hlp { color: var(--app-muted); font-size: .78rem; 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: rgba(0,56,117,.28); }
[data-bs-theme="dark"] .metric--link:hover { border-color: rgba(132,178,255,.4); }

/* ---- 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: .78rem; 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: 1.02rem; font-weight: var(--type-weight-bold); letter-spacing: -.01em; 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: .9rem; 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: .88rem; }
.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: .8rem; 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: 1.05rem; letter-spacing: -.01em; }
.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: 10px; padding: 7px 12px; font-size: .76rem; font-weight: 650; 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: 10px; padding: 9px 13px; font-size: .74rem; font-weight: 650; 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: .76rem; font-weight: 650; margin-bottom: 4px; }
.map-summary strong { display: block; font-size: .95rem; font-weight: var(--type-weight-bold); }
.node-label { fill: var(--app-text); font-size: 15px; font-weight: var(--type-weight-bold); }
.node-label.muted { fill: var(--app-muted); font-size: 12px; font-weight: 650; }
.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: .88rem; }
.demand-row .track { height: 9px; border-radius: 999px; background: var(--app-primary-soft); position: relative; overflow: hidden; }
.demand-row .track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; 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-extrabold); font-size: .85rem; min-width: 46px; text-align: right; }
.demand-row .dval small { display: block; color: var(--app-muted); font-weight: 650; font-size: .68rem; }

/* ---- METAR / weather ------------------------------------------------------ */
.metar-box { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92rem; 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: .72rem; font-weight: var(--type-weight-extrabold); letter-spacing: .06em; 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: .76rem; font-weight: 650; }
.decode-grid dd { margin: 0; font-weight: var(--type-weight-bold); font-size: .98rem; }
.wx-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

/* ---- Horizontal bar list (routes / destinations / costs) ------------------ */
.hbars { display: flex; flex-direction: column; gap: 11px; }
.hbar { display: grid; grid-template-columns: 132px 1fr auto; gap: 14px; align-items: center; }
.hbar .hlabel { font-weight: var(--type-weight-bold); font-size: .85rem; display: flex; align-items: center; gap: 8px; }
.hbar .hlabel small { color: var(--app-muted); font-weight: var(--type-weight-semibold); }
.hbar .htrack { height: 22px; border-radius: 7px; background: var(--app-primary-soft); overflow: hidden; }
.hbar .htrack i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--app-primary), #2f6bb0); min-width: 3px; }
[data-bs-theme="dark"] .hbar .htrack i { background: linear-gradient(90deg, var(--app-primary-2), #2f6bb0); }
.hbar .hval { font-weight: var(--type-weight-extrabold); font-size: .85rem; min-width: 56px; text-align: right; }

/* ---- 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: .88rem; }
.compare-row .top span { color: var(--app-muted); font-weight: 650; font-size: .8rem; }
.compare-track { position: relative; height: 12px; border-radius: 999px; background: var(--app-primary-soft); }
.compare-track .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; 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: .62rem; font-weight: var(--type-weight-extrabold); 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: 999px;
  background: #EAF1FF; color: #003875; font-weight: var(--type-weight-extrabold); font-size: .8rem; }
[data-bs-theme="dark"] .trail .stop { background: rgba(77,163,255,.16); color: #9CCBFF; }
.trail .arrow { color: var(--app-muted); font-size: .7rem; }

/* ---- 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: 999px; display: grid; place-items: center; background: var(--app-primary-soft); color: var(--app-primary-2); font-size: 1.25rem; }
.empty strong { font-weight: var(--type-weight-semibold); font-size: .98rem; } .empty p { max-width: 340px; margin: 0; color: var(--app-muted); font-size: .86rem; }
.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: .86rem; font-weight: 650; }
.error-notice i { font-size: 1.1rem; 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: 999px; background: var(--app-primary-soft); color: var(--app-primary-2);
  font-weight: var(--type-weight-extrabold); font-size: .76rem; display: grid; place-items: center; }
.alt-row .acode { font-weight: var(--type-weight-extrabold); font-size: .92rem; }
.alt-row .aname { color: var(--app-muted); font-weight: var(--type-weight-semibold); font-size: .8rem; }
.alt-row .adist { font-weight: var(--type-weight-bold); font-size: .82rem; 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-extrabold); font-size: 1rem; }
.stand .stype { font-size: .68rem; font-weight: var(--type-weight-extrabold); letter-spacing: .05em; 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; }
}