/* ============================================================
   Merge the horizontal menu into the header row (desktop only) to
   reclaim the second bar's vertical space.
   ============================================================ */
@media (min-width: 992px) {
  [data-nav-layout="horizontal"] .app-sidebar {
    inset-block-start: 0 !important;
    inset-inline-start: 10rem !important;  /* clear the logo + breathing room */
    inset-inline-end: 6rem !important;     /* clear the header icons */
    width: auto !important;
    height: 4.71rem !important;
    background: transparent !important;
    border-block-end: 0 !important;
    box-shadow: none !important;
    z-index: 105 !important;               /* above the header (104) */
    pointer-events: none;                  /* let clicks fall through the empty areas */
  }
  [data-nav-layout="horizontal"] .app-sidebar .main-menu { pointer-events: auto; } /* ...except the menu itself */
  [data-nav-layout="horizontal"] .app-sidebar .main-sidebar {
    padding-block-end: 0 !important;
    height: 4.71rem !important;
    display: flex !important;
    align-items: center !important;
  }
  [data-nav-layout="horizontal"] .app-sidebar .main-sidebar-header { display: none !important; }
  /* Top-level items fill the header height so the hover area reaches the
     dropdown with no gap (otherwise the submenu closes before you can click) */
  [data-nav-layout="horizontal"] .app-sidebar .main-menu-container,
  [data-nav-layout="horizontal"] .app-sidebar .main-menu { height: 4.71rem !important; align-items: stretch; }
  [data-nav-layout="horizontal"] .app-sidebar .main-menu > .slide { display: flex; align-items: center; }
  [data-nav-layout="horizontal"] .app-sidebar .main-menu > .slide > .side-menu__item { height: 4.71rem; display: flex; align-items: center; }
  /* Keep the logo above the menu overlay and clickable */
  [data-nav-layout="horizontal"] .app-header .header-content-left { position: relative; z-index: 106; }
  [data-nav-layout="horizontal"] .app-content { margin-block-start: 4.71rem !important; }
}

/* ============================================================
   Dark mode: neutral "true dark" palette.
   The Sash theme ships a purple-tinted dark mode (--body-bg-rgb: 26,26,60).
   Override the base background vars here (custom.css loads after
   styles.min.css). Surfaces, header, menu, inputs and --custom-white all
   derive from these two vars, so overriding them recolors everything.
   ============================================================ */
[data-theme-mode="dark"] {
  --body-bg-rgb: 17, 18, 21;        /* page background — near-black, no purple */
  --body-bg-rgb2: 28, 30, 34;       /* cards, header, menu, inputs (elevated surface) */
  --light-rgb: 28, 30, 34;          /* subtle/hover backgrounds, matched to surfaces */
  --default-text-color: #e6e7ea;    /* was #dedefd (lavender) → neutral off-white */
  --text-muted: #9aa0a6;            /* was #9595b5 (purple) → neutral gray */
  --shadow-color: rgba(0, 0, 0, 0.4);
}

/* The active/hover nav item is colored with --primary (#000085, dark navy),
   which is nearly invisible on the dark background. Recolor it to the same
   light blue the flight page uses for navy accents in dark mode. We can't
   just lighten --primary globally because it's also the button background. */
[data-theme-mode="dark"] .app-sidebar .side-menu__item.active,
[data-theme-mode="dark"] .app-sidebar .side-menu__item:hover,
[data-theme-mode="dark"] .app-sidebar .side-menu__item.active .side-menu__label,
[data-theme-mode="dark"] .app-sidebar .side-menu__item.active .side-menu__angle,
[data-theme-mode="dark"] .app-sidebar .side-menu__item:hover .side-menu__label,
[data-theme-mode="dark"] .app-sidebar .side-menu__item:hover .side-menu__angle {
  color: rgb(138, 180, 248) !important;
}
[data-theme-mode="dark"] .app-sidebar .side-menu__item.active .side-menu__icon,
[data-theme-mode="dark"] .app-sidebar .side-menu__item:hover .side-menu__icon {
  color: rgb(138, 180, 248) !important;
  fill: rgb(138, 180, 248) !important;
}

.card-header {
  padding: 0.75rem !important;
}

.card-body {
  padding: 1rem !important;
}

.card-doughnut {
  height: 300px;
}

.clickable {
  cursor: pointer;
  text-decoration: var(--primary-rgb);
}

.leaflet-falcon {
  z-index: 20;
  top: 0;
  left: 0;
  overflow: hidden;
  height: 70vh; /* 70% of viewport height */
}

/* Use media queries for different screen orientations */
@media (orientation: portrait) {
  .leaflet-falcon {
      height: 70vh; /* Adjust the percentage as needed */
  }
}

@media (orientation: landscape) {
  .leaflet-falcon {
      height: 80vh; /* Adjust the percentage as needed */
  }
}

/* Contact page: vertically center the cards in the available space so the
   whitespace is balanced instead of pooling below a short page */
@media (min-width: 992px) {
    html[data-page="contact"] .contact-fill {
        min-height: calc(100vh - 12rem);
        display: flex;
        align-items: center;
    }
    html[data-page="contact"] .contact-fill > .row { width: 100%; margin: 0; }
}

.promo-banner {
    display: block;
    background: linear-gradient(90deg, #e0f7fa, #e8f5e9);
    border: none;
    border-radius: 0;
    font-size: 0.85rem;
    z-index: 99;
    /* Full-bleed: break out of the (85%) container to span the whole width */
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    /* Whole row is the link */
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.promo-banner:hover { color: inherit; filter: brightness(0.98); }

[data-theme-mode="dark"] .promo-banner {
    background: linear-gradient(90deg, #1a3a3a, #1a3a1a);
    color: #e0e0e0;
}

@media (max-width: 991.98px) {
    .promo-banner {
        margin-top: 1.5rem;
        font-size: 0.78rem;
    }
}

/* ============================================================
   Flight page — fullscreen map (scoped to html[data-page="flight"])
   ============================================================ */

/* --- Page shell: strip chrome, fill viewport --- */
html[data-page="flight"] .footer { display: none !important; }
/* The promo banner shows on the flight map view but not in the compact card */
html[data-compact] .promo-banner { display: none !important; }
/* Flight container is already full width, so the banner needs no 100vw breakout
   (which would overshoot by the scrollbar width and add a scrollbar) */
html[data-page="flight"] .promo-banner { width: 100%; left: 0; margin-left: 0; margin-right: 0; }
html[data-page="flight"] .page { justify-content: flex-start; }
html[data-page="flight"] .main-content { padding: 0 !important; }
html[data-page="flight"] .app-content > .container-fluid {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding: 0 !important;
}

.flight-stage {
  position: relative;
  width: 100%;
  height: calc(100dvh - 4.7rem); /* fallback; JS sets exact height from real offset */
  overflow: hidden;
}
.flight-map { position: absolute; inset: 0; z-index: 1; }

/* When the stage is taken fullscreen (Leaflet control), fill the screen and
   drop the mobile navbar offset so the map + panels cover everything. */
.flight-stage:fullscreen,
.flight-stage:-webkit-full-screen { margin-top: 0 !important; width: 100% !important; height: 100% !important; }

/* Avoid first-paint flash: keep panels, tabs and buttons hidden and un-animated
   until the JS has applied the correct initial state (.is-ready on the stage). */
.flight-stage:not(.is-ready) .flight-panel,
.flight-stage:not(.is-ready) .flight-panel__reopen,
.flight-stage:not(.is-ready) .flight-mobile-btn { opacity: 0 !important; }
.flight-stage:not(.is-ready) .flight-panel { transition: none !important; }

/* Keep Leaflet controls clear of the side panels — only while that panel is open
   (desktop only). The JS toggles .left-open / .right-open on .flight-stage. */
@media (min-width: 992px) {
  html[data-page="flight"] .leaflet-top.leaflet-left,
  html[data-page="flight"] .leaflet-top.leaflet-right {
    transition: left 0.25s ease, right 0.25s ease;
  }
  html[data-page="flight"] .flight-stage.left-open .leaflet-top.leaflet-left { left: calc(340px + 1.5rem); }
  html[data-page="flight"] .flight-stage.right-open .leaflet-top.leaflet-right { right: calc(340px + 1.5rem); }
}

/* --- Mobile at-a-glance summary (hidden on desktop) --- */
.flight-summary { display: none; }
.flight-summary__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.flight-summary__route { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.flight-summary__place { display: flex; flex-direction: column; min-width: 0; }
.flight-summary__place:last-child { text-align: right; align-items: flex-end; }
.flight-summary__loc { font-size: 0.78rem; color: var(--flight-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
.flight-summary__time { font-size: 0.78rem; font-weight: 600; color: var(--flight-ink); }
.flight-summary__arrow { color: rgb(var(--primary-rgb)); flex: 0 0 auto; }
.flight-summary__people { display: flex; }
.flight-summary__avatar { width: 26px; height: 26px; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid var(--flight-glass-bg); margin-left: -6px; }
.flight-summary__avatar:first-child { margin-left: 0; }

/* --- Floating glass panels --- */
html[data-page="flight"] {
  --flight-glass-bg: rgba(255, 255, 255, 0.82);
  --flight-glass-border: rgba(255, 255, 255, 0.6);
  --flight-glass-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  --flight-ink: #1c2434;
  --flight-muted: #6b7280;
}
.flight-panel {
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  width: 340px;
  max-width: calc(100% - 2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--flight-glass-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--flight-glass-border);
  border-radius: 18px;
  box-shadow: var(--flight-glass-shadow);
  z-index: 10;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.flight-panel--left { left: 1rem; }
.flight-panel--right { right: 1rem; }

.flight-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex: 0 0 auto;
}
.flight-panel__heading { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.flight-panel__title { font-weight: 700; font-size: 0.95rem; color: var(--flight-ink); }
.flight-panel__sep { color: var(--flight-muted); opacity: 0.5; }
.flight-usage-badge {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgb(var(--primary-rgb));
  background: rgba(var(--primary-rgb), 0.1);
  padding: 0.15rem 0.55rem;
  border-radius: 8px;
  white-space: nowrap;
}
.flight-panel__body {
  padding: 1rem;
  overflow: auto;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.flight-panel__toggle {
  border: none;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.05);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--flight-muted);
}

/* Desktop collapsed: slide panel off-screen, reveal small reopen handle */
.flight-panel.is-collapsed { opacity: 0; pointer-events: none; }
.flight-panel--left.is-collapsed { transform: translateX(calc(-100% - 1rem)); }
.flight-panel--right.is-collapsed { transform: translateX(calc(100% + 1rem)); }

.flight-panel__reopen {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--flight-glass-border);
  border-radius: 12px;
  cursor: pointer;
  color: var(--flight-ink);
  background: var(--flight-glass-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--flight-glass-shadow);
}
.flight-panel__reopen--left { left: 1rem; }
.flight-panel__reopen--right { right: 1rem; flex-direction: row-reverse; }
.flight-panel__reopen-label {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--flight-ink);
}
.flight-panel__reopen.is-visible { display: flex; }

/* --- Left panel content --- */
.flight-panel__img {
  width: 100%;
  height: 95px;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  display: block;
}
.flight-panel__plane { text-align: center; font-weight: 700; color: var(--flight-ink); }
.flight-route-flags { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; gap: 0.35rem 0.6rem; text-align: center; padding: 0.65rem 0.85rem; background: rgba(var(--primary-rgb), 0.1); border-radius: 12px; }
.flight-route-flags__name { font-size: 0.9rem; font-weight: 700; color: var(--flight-ink); line-height: 1.2; overflow-wrap: anywhere; }
.flight-route-flags__arrow { font-size: 1.2rem; color: rgb(var(--primary-rgb)); }
.flight-route-flags__time { font-size: 0.7rem; line-height: 1.3; color: var(--flight-muted); }
.flight-route-flags__dur { font-size: 0.78rem; font-weight: 600; color: var(--flight-ink); white-space: nowrap; }

.flight-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0; padding: 0; }
.flight-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.025);
}
.flight-stat > i { flex: 0 0 auto; width: 18px; text-align: center; font-size: 1rem; color: rgb(var(--primary-rgb)); }
.flight-stat > div { min-width: 0; display: flex; flex-direction: column; }
.flight-stat b { font-size: 0.9rem; font-weight: 700; color: var(--flight-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flight-stat__u { font-size: 0.7em; font-weight: 600; color: var(--flight-muted); margin-left: 0.15rem; }
.flight-stat span { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.3px; color: var(--flight-muted); line-height: 1.2; }
/* Footprint tiles stand out as the environmental cost */
.flight-stat--eco { background: rgba(202, 92, 60, 0.1); }
.flight-stat--eco > i { color: #c0563c; }

/* --- Recent flights (clickable badges) --- */
.flight-recent { margin-top: 0.25rem; }
.flight-recent__title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.4px; color: rgb(var(--primary-rgb)); margin: 0.5rem 0 0.4rem; padding-top: 0.75rem; border-top: 2px solid rgba(var(--primary-rgb), 0.18); }
.flight-recent__day { font-size: 0.7rem; font-weight: 600; color: var(--flight-muted); margin: 0.5rem 0 0.15rem; padding-left: 0.5rem; }
.flight-recent__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  padding: 0.5rem 0.6rem;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  background: rgba(0, 0, 0, 0.025);
  text-decoration: none;
  color: var(--flight-ink);
  font-size: 0.78rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.flight-recent__item:hover { background: rgba(var(--primary-rgb), 0.08); border-color: rgba(var(--primary-rgb), 0.25); }
.flight-recent__place { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.flight-recent__head { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.flight-recent__flag { width: 18px; height: auto; border-radius: 2px; flex: 0 0 auto; }
.flight-recent__loc { color: var(--flight-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.flight-recent__sep { color: rgb(var(--primary-rgb)); font-size: 0.7rem; flex: 0 0 auto; }
.flight-recent__when { display: flex; align-items: center; gap: 0.3rem; padding-left: 1.55rem; font-size: 0.72rem; color: var(--flight-ink); }
.flight-recent__when i { font-size: 0.62rem; color: var(--flight-muted); }
.flight-recent__time { font-weight: 600; }

/* --- Right panel content --- */
.flight-people { display: flex; flex-direction: column; }
.flight-person { display: flex; gap: 0.75rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
.flight-person__avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; background-size: cover; background-position: center; }
.flight-person__name { font-weight: 600; font-size: 0.9rem; color: var(--flight-ink); }
.flight-person__title { font-size: 0.78rem; color: var(--flight-muted); }
.flight-reason h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.4px; color: rgb(var(--primary-rgb)); margin: 0.25rem 0 0.4rem; }
.flight-reason p { font-size: 0.85rem; color: var(--flight-ink); line-height: 1.5; margin: 0 0 0.4rem; }
.flight-reason__link { display: flex; gap: 0.4rem; align-items: center; font-size: 0.85rem; color: rgb(var(--primary-rgb)); text-decoration: none; padding: 0.4rem 0; }
/* Divider between the trip reason and the news links */
.flight-reason p + .flight-reason__link { border-top: 1px solid rgba(0, 0, 0, 0.1); margin-top: 0.25rem; padding-top: 0.65rem; }

/* --- Superuser edit trigger --- */
.flight-edit-btn {
  width: 100%;
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* --- Floating prev/next nav --- */
.flight-nav { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 12; display: flex; gap: 0.5rem; }
.flight-nav__btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--primary-rgb));
  background: var(--flight-glass-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--flight-glass-border);
  box-shadow: var(--flight-glass-shadow);
}
.flight-nav__btn:hover { color: rgb(var(--primary-rgb)); }

/* --- Mobile panel-open buttons (hidden on desktop; shown in the mobile media query) --- */
.flight-mobile-btn {
  display: none;
  position: absolute;
  bottom: 1.25rem;
  z-index: 15;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  border-radius: 14px;
  color: #fff;
  background: rgb(var(--primary-rgb));
  box-shadow: var(--flight-glass-shadow);
}
.flight-mobile-btn--left { left: 1rem; }
.flight-mobile-btn--right { right: 1rem; }
.flight-mobile-btn i { font-size: 1.05rem; }

/* --- Messages toast --- */
.flight-toast { position: fixed; top: calc(4.7rem + 1rem); left: 50%; transform: translateX(-50%); z-index: 1080; width: min(92%, 420px); }

/* --- Edit offcanvas --- */
.flight-edit { width: 50vw !important; }
@media (max-width: 991.98px) { .flight-edit { width: 100vw !important; } }
.flight-edit__section { margin-bottom: 1.75rem; }
.flight-edit__section:last-of-type { margin-bottom: 1rem; }
.flight-edit__section h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; color: rgb(var(--primary-rgb)); padding-bottom: 0.4rem; margin-bottom: 1rem; border-bottom: 1px solid var(--default-border); }
.flight-edit .form-label { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.35rem; }
/* Toggle switches grouped */
.flight-edit__switches { display: flex; flex-direction: column; gap: 0.5rem; }
.flight-edit__switches .form-check { margin-bottom: 0; padding-left: 2.75em; }
.flight-edit__switches .form-check-input { width: 2.25em; height: 1.15em; margin-left: -2.75em; cursor: pointer; }
.flight-edit__switches .form-check-label { cursor: pointer; }
/* Searchable passenger select (select2) fills the field width */
.flight-edit .select2-container { width: 100% !important; }
.flight-edit .select2-selection--multiple { min-height: 44px; padding: 2px 4px; border-color: var(--default-border) !important; }
/* Removable news links */
.flight-edit__news { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.flight-edit__news-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.65rem; border: 1px solid var(--default-border); border-radius: 8px; font-size: 0.85rem; }
.flight-edit__news-item > i { color: rgb(var(--primary-rgb)); font-size: 0.72rem; flex: 0 0 auto; }
.flight-edit__news-item a { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.flight-edit__news-item.is-removing { opacity: 0.5; }
.flight-edit__news-item.is-removing a { text-decoration: line-through; }
.flight-edit__news-remove { flex: 0 0 auto; border: 0; background: none; line-height: 1; font-size: 1.25rem; padding: 0 0.25rem; cursor: pointer; color: var(--text-muted, #8c9097); }
.flight-edit__news-remove:hover { color: #d64545; }

/* --- Dark mode --- */
[data-theme-mode="dark"][data-page="flight"] {
  --flight-glass-bg: rgba(26, 30, 40, 0.82);
  --flight-glass-border: rgba(255, 255, 255, 0.12);
  --flight-ink: #e8eaed;
  --flight-muted: #9aa3b2;
}
[data-theme-mode="dark"][data-page="flight"] .flight-person { border-bottom-color: rgba(255, 255, 255, 0.08); }
[data-theme-mode="dark"][data-page="flight"] .flight-stat { background: rgba(255, 255, 255, 0.05); }
[data-theme-mode="dark"][data-page="flight"] .flight-stat--eco { background: rgba(255, 140, 110, 0.14); }
[data-theme-mode="dark"][data-page="flight"] .flight-stat--eco > i { color: #ff9e86; }
[data-theme-mode="dark"][data-page="flight"] .flight-panel__head { border-bottom-color: rgba(255, 255, 255, 0.1); }
[data-theme-mode="dark"][data-page="flight"] .flight-reason p + .flight-reason__link { border-top-color: rgba(255, 255, 255, 0.12); }
[data-theme-mode="dark"][data-page="flight"] .flight-recent__item { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); }
/* Recolor navy accents to a light blue so they stay visible on dark glass */
[data-theme-mode="dark"][data-page="flight"] .flight-stat > i,
[data-theme-mode="dark"][data-page="flight"] .flight-route-flags__arrow,
[data-theme-mode="dark"][data-page="flight"] .flight-reason h4,
[data-theme-mode="dark"][data-page="flight"] .flight-reason__link,
[data-theme-mode="dark"][data-page="flight"] .flight-recent__title,
[data-theme-mode="dark"][data-page="flight"] .flight-recent__sep,
[data-theme-mode="dark"][data-page="flight"] .flight-nav__btn,
[data-theme-mode="dark"][data-page="flight"] .flight-nav__btn:hover,
[data-theme-mode="dark"][data-page="flight"] .flight-summary__arrow,
[data-theme-mode="dark"][data-page="flight"] .flight-edit__section h4 { color: rgb(138, 180, 248); }
[data-theme-mode="dark"][data-page="flight"] .flight-usage-badge { color: rgb(138, 180, 248); background: rgba(138, 180, 248, 0.15); }
[data-theme-mode="dark"][data-page="flight"] .flight-route-flags { background: rgba(138, 180, 248, 0.12); }
[data-theme-mode="dark"][data-page="flight"] .flight-recent__title { border-top-color: rgba(138, 180, 248, 0.25); }
[data-theme-mode="dark"][data-page="flight"] .flight-plane-marker { filter: invert(1) brightness(1.4); }

/* --- Compact "social" card mode (?compact=1) — one rich card, clean map --- */
.flight-card { display: none; }
html[data-compact] .flight-panel,
html[data-compact] .flight-panel__reopen,
html[data-compact] .flight-mobile-btn,
html[data-compact] .flight-nav,
html[data-compact] .flight-summary,
html[data-compact] .leaflet-control-zoom,
html[data-compact] .leaflet-control-layers,
html[data-compact] .leaflet-control-fullscreen { display: none !important; }

/* Compact mode = pseudo-fullscreen: the stage covers the whole viewport (no navbar) */
html[data-compact] body { overflow: hidden; }
html[data-compact] .app-header { display: none !important; }
html[data-compact] .flight-stage {
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 1000;
}

html[data-compact] .flight-card {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 1rem;
  left: 1rem;
  bottom: 1rem;
  width: 380px;
  max-width: calc(100% - 2rem);
  z-index: 10;
  overflow: hidden;
  background: var(--flight-glass-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--flight-glass-border);
  border-radius: 18px;
  box-shadow: var(--flight-glass-shadow);
}
.flight-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex: 0 0 auto;
}
.flight-card__body {
  padding: 1rem;
  overflow: auto;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
[data-theme-mode="dark"][data-page="flight"] .flight-card__head { border-bottom-color: rgba(255, 255, 255, 0.1); }

/* Tighten the compact card so it fits everything in less vertical space */
html[data-compact] .flight-card__head { padding: 0.6rem 0.85rem; }
html[data-compact] .flight-card__body { padding: 0.6rem 0.85rem; gap: 0.5rem; }
html[data-compact] .flight-card .flight-panel__img { height: 70px; }
html[data-compact] .flight-card .flight-panel__plane { font-size: 0.88rem; }
html[data-compact] .flight-card .flight-route-flags img { width: 24px; height: auto; }
html[data-compact] .flight-card .flight-stat { padding: 0.4rem 0.5rem; }
html[data-compact] .flight-card .flight-person { padding: 0.3rem 0; }
html[data-compact] .flight-card .flight-person__avatar { width: 36px; height: 36px; }
html[data-compact] .flight-card .flight-person__name { font-size: 0.82rem; }
html[data-compact] .flight-card .flight-reason p { font-size: 0.8rem; margin-bottom: 0.25rem; }
html[data-compact] .flight-card .flight-reason__link { padding: 0.3rem 0; }
/* Clear separation between flight info and passenger info */
html[data-compact] .flight-card__section {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 2px solid rgba(var(--primary-rgb), 0.18);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgb(var(--primary-rgb));
}
[data-theme-mode="dark"][data-page="flight"] .flight-card__section { color: rgb(138, 180, 248); border-top-color: rgba(138, 180, 248, 0.25); }
[data-theme-mode="dark"][data-page="flight"] .flight-recent__item:hover { background: rgba(138, 180, 248, 0.12); border-color: rgba(138, 180, 248, 0.3); }

/* --- Mobile (< 992px): panels open from big bottom buttons instead of side tabs --- */
@media (max-width: 991.98px) {
  .flight-stage { height: calc(100dvh - 3.75rem); }
  .flight-panel { width: 100%; max-width: calc(100% - 2rem); bottom: 8rem; }
  .flight-toast { top: calc(3.75rem + 0.5rem); }

  .flight-panel__reopen { display: none !important; } /* replaced by bottom buttons */
  .flight-nav { bottom: 5rem; } /* sit above the open buttons */
  .flight-mobile-btn { display: inline-flex; width: calc(50% - 1.5rem); }

  /* At-a-glance summary, inset so it clears the zoom/layers controls */
  .flight-summary {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: absolute;
    top: 0.75rem;
    left: 3.5rem;
    right: 4rem;
    z-index: 5; /* below the panels so an open panel covers it */
    padding: 0.6rem 0.8rem;
    border-radius: 14px;
    font-size: 0.8rem;
    color: var(--flight-ink);
    background: var(--flight-glass-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--flight-glass-border);
    box-shadow: var(--flight-glass-shadow);
  }
}