/* =====================================================================
   theme-navy.css — Aleppo instance Stitch skin overlay.
   Loaded only when config.local.php sets theme = 'navy' (the default).
   Every selector is prefixed with html.theme-navy so the file is inert
   on Damascus (theme-green).

   This file is the Stitch-mockup cinematic treatment for Aleppo:
   full-page photo backdrop with dark wash, frosted flight-board card,
   forest-green "coming soon" banner. The base layout, fonts, and
   Aleppo signature touches (citadel bar above the hero title, square
   filter pills, formal info cards) live inline in index.php — those
   stay untouched. This overlay is layered ON TOP for the cinematic
   surfaces only.

   Aleppo palette:
       primary    #242C65  (deep navy)
       secondary  #1E7960  (forest green — heritage cue)
       hover-deep #1a1f4d  (darker navy for active/hover states)
       accent-red #b33a3a  (status/incident — kept across tenants)
   ===================================================================== */

/* ============ CINEMATIC BACKDROP ============ */
/* Same custom-property pattern as Damascus: index.php emits
   `:root { --body-bg-image: url(...) }` when an admin uploads a body
   bg photo. Top layer is a dark wash so glass cards always read as
   light surfaces over either a photo or the gradient fallback.

   Painted onto html::before instead of `body { background-attachment:
   fixed }`. The latter triggers heavy per-frame repaints (and outright
   flickers on iOS Safari) because every scroll moves the body's
   painted area against a fixed background. A fixed pseudo-element
   sits on its own compositor layer and stays still while the body
   scrolls over it. */
html.theme-navy::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    var(--body-bg-image,
      linear-gradient(135deg, #161a2e 0%, #1f2540 50%, #161a2e 100%));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
html.theme-navy body {
  background: transparent;
  color: #f5f8ff;
}

/* Decorative bg shapes were tuned for the cream backdrop — mute on
   the dark backdrop or they look like dust. */
html.theme-navy .bg-shape,
html.theme-navy .bg-plane { opacity: 0.18; }

/* ============ HEADER / LOGO ============ */
/* Logo text reads on dark — lift to white with a soft drop-shadow.
   Skip admin/login pages: their headers are white cards, where white
   text would be invisible. They keep the inline dark navy color. */
html.theme-navy body:not(.admin-page):not(.login-page) .logo-text-ar,
html.theme-navy body:not(.admin-page):not(.login-page) .logo-text-en {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* Lang switch: pearl pill on dark bg. */
html.theme-navy .lang-switch {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html.theme-navy .lang-switch button { color: rgba(255, 255, 255, 0.75); }
html.theme-navy .lang-switch button:hover:not(.active) { color: #ffffff; }
html.theme-navy .lang-switch button.active {
  background: #ffffff;
  color: #242C65;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* Hero subtitle on dark needs a lift. The hero title gradient is
   variable-driven (set on :root in index.php) so it's already
   legible on either bg. */
html.theme-navy .hero-subtitle { color: rgba(255, 255, 255, 0.85); }

/* ============ FLIGHT BOARD — glass card ============ */
html.theme-navy .flights-section {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
@media (max-width: 640px) {
  html.theme-navy .flights-section { padding: 18px; border-radius: 18px; }
}

/* "Live Flight Board" title — primary navy. */
html.theme-navy .flights-section .flights-title,
html.theme-navy .flights-section .flights-title-en { color: #242C65; }

/* Filter pills — keep Aleppo's square shape (set inline in index.php
   via `border-radius: 8px`); only the typography + colors change here. */
html.theme-navy .filter-btn {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  background: transparent;
  color: #3e4a3f;
}
html.theme-navy .filter-btn.active {
  background: #242C65;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(36, 44, 101, 0.30);
}
html.theme-navy .filter-btn:hover:not(.active) {
  background: rgba(36, 44, 101, 0.08);
  color: #1a1f4d;
}

/* Filter row container: subtle inner surface so it reads as a
   segmented control. */
html.theme-navy .flights-filters {
  background: rgba(36, 44, 101, 0.05);
  border: 1px solid rgba(36, 44, 101, 0.06);
  box-shadow: none;
}

/* Search: pill, soft surface, focus ring in primary navy. */
html.theme-navy .flights-search input {
  border-radius: 999px;
  background: rgba(245, 248, 245, 0.85);
  border: 1px solid transparent;
  padding-inline: 18px;
  color: #242C65;
}
html.theme-navy .flights-search input:focus {
  border-color: rgba(36, 44, 101, 0.40);
  box-shadow: 0 0 0 4px rgba(36, 44, 101, 0.15);
  background: #ffffff;
}
html.theme-navy .flights-search input::placeholder { color: rgba(36, 44, 101, 0.40); }

/* Table wrap: rounded card-in-card, white-translucent. */
html.theme-navy .flights-table-wrap {
  background: rgba(255, 255, 255, 0.50);
  border: 1px solid rgba(189, 197, 215, 0.45);
  border-radius: 18px;
  box-shadow: none;
  overflow: hidden;
}
html.theme-navy .flights-table th {
  background: rgba(220, 224, 235, 0.55);
  color: #3e4258;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78em;
}
html.theme-navy .flights-table th .th-en { color: rgba(62, 66, 88, 0.65); }
html.theme-navy .flights-table tbody tr:hover td {
  background: rgba(36, 44, 101, 0.05);
}

/* Mobile card layout (<= 640px): the card structure lives in index.php;
   this only recolours its labels/chrome to the navy theme so the stacked
   flight cards read like the desktop table on phones. */
@media (max-width: 640px) {
  html.theme-navy .flights-table-wrap {
    background: transparent;
    border: none;
    box-shadow: none;
  }
  html.theme-navy .flights-table tr {
    border-color: rgba(189, 197, 215, 0.55);
  }
  html.theme-navy .flights-table .num { background: rgba(220, 224, 235, 0.45); }
}

/* Status pills: uppercase + tighter letterspacing for the mockup vibe.
   Semantic colors (delayed = orange, cancelled = red, boarding = blue)
   stay as set in index.php — only typography changes here. */
html.theme-navy [class*="pill--"] {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 0.72em;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ============ EMPTY / LOADING / ERROR — read on dark ============ */
html.theme-navy .flights-empty,
html.theme-navy .flights-loading,
html.theme-navy .flights-error {
  background: rgba(255, 255, 255, 0.85);
  color: #242C65;
  border-color: rgba(189, 197, 215, 0.55);
}

/* Pagination: keep the brand styling, just lift the surface. */
html.theme-navy .page-btn {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(36, 44, 101, 0.20);
}

/* ============ HERO STATEMENT — forest-green banner ============ */
/* Aleppo distinction: where Damascus uses navy for the lower banner,
   Aleppo uses its forest-green secondary so the two tenants stay
   visually separable. */
html.theme-navy .hero-statement {
  background: linear-gradient(135deg, #1E7960 0%, #166447 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.30);
}
html.theme-navy .hero-statement-text { color: #ffffff; }
html.theme-navy .hero-statement-sub  { color: rgba(255, 255, 255, 0.88); }
html.theme-navy .hero-bottom .hero-subtitle { color: rgba(255, 255, 255, 0.85); }

/* "قيد التطوير" badge — solid navy pill with white caps. The square
   pulse-dot from the inline html.theme-navy rule still applies. */
html.theme-navy .badge {
  background: #242C65;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 0.78em;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(36, 44, 101, 0.30);
}

/* ============ INFO CARDS — frosted on dark ============ */
html.theme-navy .info-card {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.55);
}
html.theme-navy .info-card-label { color: #1E7960; }
html.theme-navy .info-card-value { color: #242C65; }

/* ============ FOOTER — frosted ============ */
html.theme-navy .site-footer {
  background: rgba(245, 248, 245, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(189, 197, 215, 0.45);
}
html.theme-navy .footer-text { color: rgba(36, 44, 101, 0.70); }
html.theme-navy .footer-text strong { color: #242C65; }