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

   Structurally this mirrors theme-navy.css — same cinematic treatment
   (full-page photo backdrop with a dark wash, frosted flight-board card)
   so all three 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.

   Qamishli palette:
       primary    #A05F00  (deep amber / ochre)
       secondary  #252D65  (navy — shared with Damascus)
       hover-deep #7F4B00  (darker amber for active/hover states)
       accent-red #b33a3a  (status/incident — kept across tenants)

   On the primary: #A05F00 is used both as text on white surfaces and as
   a fill under white text. WCAG contrast is symmetric, and this value
   measures 5.08:1 against white, so it passes AA (4.5:1) either way. The
   brighter #B26A00 it was chosen from measures 4.24:1 and fails both.
   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 near-black rather than navy's cool
   one, so the backdrop agrees with the amber brand when a tenant has
   not uploaded a photo yet. */
html.theme-amber::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, #1c1710 0%, #2c2318 50%, #1c1710 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-amber 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-amber .bg-shape,
html.theme-amber .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-amber body:not(.admin-page):not(.login-page) .logo-text-ar,
html.theme-amber 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-amber .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-amber .lang-switch button { color: rgba(255, 255, 255, 0.75); }
html.theme-amber .lang-switch button:hover:not(.active) { color: #ffffff; }
html.theme-amber .lang-switch button.active {
  background: #ffffff;
  color: #A05F00;
  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-amber .hero-subtitle { color: rgba(255, 255, 255, 0.85); }

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

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

/* Filter pills. */
html.theme-amber .filter-btn {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  background: transparent;
  color: #4a3f2f;
}
html.theme-amber .filter-btn.active {
  background: #A05F00;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(160, 95, 0, 0.30);
}
html.theme-amber .filter-btn:hover:not(.active) {
  background: rgba(160, 95, 0, 0.08);
  color: #7F4B00;
}

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

/* Search: pill, soft surface, focus ring in primary amber. */
html.theme-amber .flights-search input {
  border-radius: 999px;
  background: rgba(250, 247, 241, 0.85);
  border: 1px solid transparent;
  padding-inline: 18px;
  color: #3a2a12;
}
html.theme-amber .flights-search input:focus {
  border-color: rgba(160, 95, 0, 0.45);
  box-shadow: 0 0 0 4px rgba(160, 95, 0, 0.18);
  background: #ffffff;
}
/* Placeholder stays a readable mid-tone: the 0.40-alpha value the other
   themes use drops to ~2.5:1 on this warm surface. 0.70 measures 5.07:1. */
html.theme-amber .flights-search input::placeholder { color: rgba(58, 42, 18, 0.70); }

/* Table wrap: rounded card-in-card, white-translucent. */
html.theme-amber .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-amber .flights-table th {
  background: rgba(236, 228, 214, 0.60);
  color: #4a4030;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78em;
}
/* 0.85, not the 0.65-0.70 the other themes use for this secondary line:
   on this warm header fill those alphas land at 3.9:1 and fail AA. */
html.theme-amber .flights-table th .th-en { color: rgba(74, 64, 48, 0.85); }
html.theme-amber .flights-table tbody tr:hover td {
  background: rgba(160, 95, 0, 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-amber .flights-table-wrap {
    background: transparent;
    border: none;
    box-shadow: none;
  }
  html.theme-amber .flights-table tr {
    border-color: rgba(214, 202, 182, 0.65);
  }
  html.theme-amber .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.

   Worth knowing for this theme specifically: `pill--delayed` is orange,
   which is the nearest neighbour to the amber brand. It is deliberately
   NOT retuned — status colour is semantic and shared across tenants, and
   a tenant-local shift would break the one visual language operations
   staff read across all three airports. */
html.theme-amber [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-amber .flights-empty,
html.theme-amber .flights-loading,
html.theme-amber .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-amber .page-btn {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(160, 95, 0, 0.22);
}

/* ============ INFO CARDS — frosted on dark ============ */
html.theme-amber .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 deeper #7F4B00, not the #A05F00 primary. The info card
   is white at 0.86 alpha, so with no uploaded backdrop photo it composites
   to roughly #DFDFDE — and the primary measures only 3.81:1 there. #7F4B00
   gives 5.41:1 on the same surface. */
html.theme-amber .info-card-label { color: #7F4B00; }
html.theme-amber .info-card-value { color: #252D65; }

/* ============ FOOTER — frosted ============ */
html.theme-amber .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. The navy theme's 0.70 does not clear it here. */
html.theme-amber .footer-text { color: rgba(58, 42, 18, 0.75); }
html.theme-amber .footer-text strong { color: #3a2a12; }