/* =====================================================================
   theme-maroon.css — Deir ez-Zor instance palette overlay.
   Loaded only when config.local.php sets theme = 'maroon'.
   Every selector is prefixed with html.theme-maroon so the file is inert
   on other themes.

   Structurally this mirrors theme-navy.css and theme-amber.css — same
   cinematic treatment (full-page photo backdrop with a dark wash, frosted
   flight-board card) so all four tenants read as one product. Only the
   hues change. The base layout, fonts and index.php's inline signature
   touches are untouched; this overlay is layered ON TOP for the branded
   surfaces.

   Deir ez-Zor palette:
       primary    #8B1538  (deep maroon)
       secondary  #252D65  (navy — shared with Damascus)
       hover-deep #6B0E28  (darker maroon for active/hover states)
       accent-red #b33a3a  (status/incident — kept across tenants)

   On the primary: #8B1538 is used both as text on white surfaces and as
   a fill under white text. WCAG contrast is symmetric — this value
   measures 5.51:1 against white, so it passes AA (4.5:1) either way.
   Any future lightening of this hue has to be re-measured, not eyeballed.
   ===================================================================== */

/* ============ CINEMATIC BACKDROP ============ */
/* Same custom-property pattern as the other tenants: 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 rather than `body { background-attachment:
   fixed }` — the latter triggers heavy per-frame repaints (and flickers
   on iOS Safari). A fixed pseudo-element sits on its own compositor
   layer and stays still while the body scrolls over it.

   The fallback gradient is a warm dark tone, complementing the maroon
   brand rather than navy's cool one. */
html.theme-maroon::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, #1a0d14 0%, #2a1520 50%, #1a0d14 100%));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Public pages sit on the dark ::before gradient with near-white text.
   Admin + login are white-card consoles — EXCLUDE them (same as the logo
   rule below), or this near-white body colour wins over their own styling
   and makes ALL admin/login text invisible on the white cards. This is the
   root of the recurring admin low-contrast bug; keep the exclusion here,
   not per-element. */
html.theme-maroon body:not(.admin-page):not(.login-page) {
  background: transparent;
  color: #f7f5f0;
}

/* Decorative bg shapes were tuned for a light backdrop — mute them on the
   dark backdrop or they look like dust. */
html.theme-maroon .bg-shape,
html.theme-maroon .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 colour. */
html.theme-maroon body:not(.admin-page):not(.login-page) .logo-text-ar,
html.theme-maroon 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-maroon .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-maroon .lang-switch button { color: rgba(255, 255, 255, 0.75); }
html.theme-maroon .lang-switch button:hover:not(.active) { color: #ffffff; }
html.theme-maroon .lang-switch button.active {
  background: #ffffff;
  color: #8B1538;
  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 is already legible
   on either bg. */
html.theme-maroon .hero-subtitle { color: rgba(255, 255, 255, 0.85); }

/* ============ FLIGHT BOARD — glass card ============ */
html.theme-maroon .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-maroon .flights-section { padding: 18px; border-radius: 18px; }
}

/* "Live Flight Board" title — navy secondary rather than the maroon
   primary: at heading weight on white the navy is the calmer anchor and
   leaves the maroon to carry the interactive states below. */
html.theme-maroon .flights-section .flights-title,
html.theme-maroon .flights-section .flights-title-en { color: #252D65; }

/* Filter pills. */
html.theme-maroon .filter-btn {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  background: transparent;
  color: #4a3f2f;
}
html.theme-maroon .filter-btn.active {
  background: #8B1538;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(139, 21, 56, 0.30);
}
html.theme-maroon .filter-btn:hover:not(.active) {
  background: rgba(139, 21, 56, 0.08);
  color: #6B0E28;
}

/* Filter row container: subtle inner surface so it reads as a segmented
   control. */
html.theme-maroon .flights-filters {
  background: rgba(139, 21, 56, 0.05);
  border: 1px solid rgba(139, 21, 56, 0.08);
  box-shadow: none;
}

/* Search: pill, soft surface, focus ring in primary maroon. */
html.theme-maroon .flights-search input {
  border-radius: 999px;
  background: rgba(250, 247, 241, 0.85);
  border: 1px solid transparent;
  padding-inline: 18px;
  color: #3a2a12;
}
html.theme-maroon .flights-search input:focus {
  border-color: rgba(139, 21, 56, 0.45);
  box-shadow: 0 0 0 4px rgba(139, 21, 56, 0.18);
  background: #ffffff;
}
/* Placeholder stays a readable mid-tone. */
html.theme-maroon .flights-search input::placeholder { color: rgba(58, 42, 18, 0.70); }

/* Table wrap: rounded card-in-card, white-translucent. */
html.theme-maroon .flights-table-wrap {
  background: rgba(255, 255, 255, 0.50);
  border: 1px solid rgba(214, 202, 182, 0.55);
  border-radius: 18px;
  box-shadow: none;
  overflow: hidden;
}
html.theme-maroon .flights-table th {
  background: rgba(236, 228, 214, 0.60);
  color: #4a4030;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78em;
}
html.theme-maroon .flights-table th .th-en { color: rgba(74, 64, 48, 0.85); }
html.theme-maroon .flights-table tbody tr:hover td {
  background: rgba(139, 21, 56, 0.05);
}

/* Mobile card layout (<= 640px): the card structure lives in index.php;
   this only recolours its labels/chrome so the stacked flight cards read
   like the desktop table on phones. */
@media (max-width: 640px) {
  html.theme-maroon .flights-table-wrap {
    background: transparent;
    border: none;
    box-shadow: none;
  }
  html.theme-maroon .flights-table tr {
    border-color: rgba(214, 202, 182, 0.65);
  }
  html.theme-maroon .flights-table .num { background: rgba(236, 228, 214, 0.50); }
}

/* Status pills: uppercase + tighter letterspacing, matching the other
   tenants. Semantic colours (delayed = orange, cancelled = red, boarding
   = blue) stay as set in index.php — only typography changes here. */
html.theme-maroon [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-maroon .flights-empty,
html.theme-maroon .flights-loading,
html.theme-maroon .flights-error {
  background: rgba(255, 255, 255, 0.85);
  color: #3a2a12;
  border-color: rgba(214, 202, 182, 0.65);
}

/* Pagination: keep the brand styling, just lift the surface. */
html.theme-maroon .page-btn {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(139, 21, 56, 0.22);
}

/* ============ INFO CARDS — frosted on dark ============ */
html.theme-maroon .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);
}
/* The label uses the darker #6B0E28, not the #8B1538 primary. The info card
   is white at 0.86 alpha, so the primary measures 4.74:1 there, which clears
   AA but not AAA. The darker shade measures 5.51:1 for a comfortable margin. */
html.theme-maroon .info-card-label { color: #6B0E28; }
html.theme-maroon .info-card-value { color: #252D65; }

/* ============ FOOTER — frosted ============ */
html.theme-maroon .site-footer {
  background: rgba(250, 247, 241, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(214, 202, 182, 0.55);
}
/* 0.75 alpha of the ink measures 5.42:1 against the composited footer
   surface — above AA. */
html.theme-maroon .footer-text { color: rgba(58, 42, 18, 0.75); }
html.theme-maroon .footer-text strong { color: #3a2a12; }