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

   Damascus airport palette (green-primary / navy-secondary):

       primary    #009552  (official Damascus green)
       secondary  #252d65  (deep navy — almost identical to Aleppo's
                            primary; the two airports share that family)
       hover-deep #006e3d  (darker green for active/hover states)
       bg cream   #F5F8F5  (very light green-tinted off-white)

   Status reds/oranges (delayed, cancelled) are semantic, not brand —
   they stay unchanged so the meaning is preserved across instances.

   The legacy theme name 'gold' (from the very first Damascus mockup)
   is still accepted by api/instance.php as an alias for 'green' so a
   server with the old config.local.php keeps working until it's
   updated to theme = 'green'.
   ===================================================================== */

/* ============ ROOT ACCENT STRIP ============ */
/* Subtle ribbon at the top of every page so the brand telegraphs before
   the user reads any text. Uses the green primary. */
html.theme-green body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #009552 0%, #00b865 50%, #009552 100%);
  z-index: 1000;
  pointer-events: none;
}

/* ============ BODY / GLOBAL ============ */
html.theme-green body {
  color: #252d65;
  background: #F5F8F5;
}
html.theme-green :focus-visible {
  outline-color: #009552;
}

/* ============ DECORATIVE BG (home only) ============ */
html.theme-green .bg-shape--top {
  background: radial-gradient(circle, rgba(37, 45, 101, 0.06) 0%, rgba(37, 45, 101, 0) 70%);
}
html.theme-green .bg-shape--bottom {
  background: radial-gradient(circle, rgba(0, 149, 82, 0.07) 0%, rgba(0, 149, 82, 0) 70%);
}
html.theme-green .bg-plane path {
  fill: #252d65;
}

/* ============ HEADER / LOGO TEXT ============ */
html.theme-green .lang-switch {
  background: rgba(37, 45, 101, 0.06);
  box-shadow: inset 0 0 0 1px rgba(37, 45, 101, 0.04);
}
html.theme-green .lang-switch button { color: rgba(37, 45, 101, 0.55); }
html.theme-green .lang-switch button:hover:not(.active) { color: #252d65; }
html.theme-green .lang-switch button.active {
  background: #fff;
  color: #252d65;
  box-shadow: 0 1px 4px rgba(37, 45, 101, 0.12);
}

html.theme-green .logo-placeholder {
  border-color: rgba(37, 45, 101, 0.30);
  background: rgba(37, 45, 101, 0.02);
  color: rgba(37, 45, 101, 0.50);
}
html.theme-green .logo-placeholder:hover {
  border-color: #009552;
  color: #009552;
}
html.theme-green .logo-text-ar { color: #252d65; }
html.theme-green .logo-text-en { color: #009552; }

/* ============ HERO ============ */
html.theme-green .badge {
  background: rgba(0, 149, 82, 0.10);
  color: #009552;
}
/* The live-dot color is now the shared --accent-red across both tenants
   (set by index.php). Damascus's gradient surface override lives in the
   "DAMASCUS SIGNATURE" block at the bottom of this file; we do not
   reset .badge::before here. */

/* Title color now comes from the variable-driven gradient in index.php.
   Setting a solid color here would win on specificity and hide the
   gradient — leave it alone. */
html.theme-green .hero-subtitle { color: #009552; }

html.theme-green .hero-statement {
  background: linear-gradient(135deg, rgba(37, 45, 101, 0.04), rgba(0, 149, 82, 0.05));
  border: 1px solid rgba(37, 45, 101, 0.10);
}
html.theme-green .hero-statement-text { color: #252d65; }

/* ============ INFO STRIP ============ */
html.theme-green .info-card {
  border-color: rgba(37, 45, 101, 0.10);
}
html.theme-green .info-card:hover {
  box-shadow: 0 8px 24px rgba(0, 149, 82, 0.10);
}
html.theme-green .info-card-label { color: #009552; }
html.theme-green .info-card-value { color: #252d65; }

/* ============ FLIGHTS — TITLE + TABLE ============ */
html.theme-green .flights-title { color: #252d65; }
html.theme-green .flights-title-en { color: #009552; }

html.theme-green .flights-table-wrap {
  border-color: rgba(37, 45, 101, 0.10);
  box-shadow: 0 2px 8px rgba(0, 149, 82, 0.05);
}
html.theme-green .flights-table th,
html.theme-green .flights-table td {
  border-bottom-color: rgba(37, 45, 101, 0.08);
}
html.theme-green .flights-table th {
  color: #009552;
  background: rgba(0, 149, 82, 0.05);
}
html.theme-green .flights-table th .th-en { color: rgba(37, 45, 101, 0.50); }
html.theme-green .flights-table tbody tr:hover td { background: rgba(37, 45, 101, 0.02); }
html.theme-green .flights-table .num,
html.theme-green .flights-table .route,
html.theme-green .flights-table .gate { color: #252d65; }
html.theme-green .flights-table .route .arrow { color: #009552; }

/* Mobile card layout (<= 640px): match the card labels/chrome to the green
   brand so Damascus's stacked flight cards read like its desktop table.
   The card structure itself lives in index.php; this only recolours it. */
@media (max-width: 640px) {
  html.theme-green .flights-table-wrap {
    background: transparent;
    border: none;
    box-shadow: none;
  }
  html.theme-green .flights-table tr {
    border-color: rgba(37, 45, 101, 0.12);
    box-shadow: 0 1px 4px rgba(0, 149, 82, 0.06);
  }
  html.theme-green .flights-table .num { background: rgba(0, 149, 82, 0.05); }
}

/* ============ FLIGHTS — PILLS (brand only; semantic colors kept) ============ */
html.theme-green .pill--arrival   { background: rgba(0, 149, 82, 0.10);   color: #009552; }
html.theme-green .pill--departure { background: rgba(37, 45, 101, 0.08);  color: #252d65; }
html.theme-green .pill--scheduled { background: rgba(37, 45, 101, 0.06);  color: #252d65; }
html.theme-green .pill--on-time   { background: rgba(0, 149, 82, 0.12);   color: #006e3d; }
html.theme-green .pill--departed  { background: rgba(37, 45, 101, 0.12);  color: #252d65; }
html.theme-green .pill--arrived   { background: rgba(0, 149, 82, 0.12);   color: #006e3d; }
/* delayed/boarding/cancelled keep their orange/blue/red — they're semantic */

/* ============ FLIGHTS — CTA / FILTERS / SEARCH ============ */
html.theme-green .flights-cta {
  background: #009552;
  box-shadow: 0 2px 6px rgba(0, 149, 82, 0.20);
}
html.theme-green .flights-cta:hover {
  background: #006e3d;
  box-shadow: 0 4px 12px rgba(0, 149, 82, 0.30);
}

html.theme-green .flights-empty,
html.theme-green .flights-loading,
html.theme-green .flights-error {
  border-color: rgba(37, 45, 101, 0.18);
}
html.theme-green .flights-filters {
  border-color: rgba(37, 45, 101, 0.10);
  box-shadow: 0 2px 8px rgba(37, 45, 101, 0.04);
}
html.theme-green .filter-btn.active { background: #009552; color: #fff; }
html.theme-green .filter-btn:hover:not(.active) {
  background: rgba(0, 149, 82, 0.08);
  color: #252d65;
}

html.theme-green .flights-search input {
  border-color: rgba(37, 45, 101, 0.18);
  color: #252d65;
}
html.theme-green .flights-search input:focus {
  border-color: #009552;
  box-shadow: 0 0 0 3px rgba(0, 149, 82, 0.18);
}
html.theme-green .flights-search input::placeholder { color: rgba(37, 45, 101, 0.40); }

/* ============ FLIGHTS — PAGINATION ============ */
html.theme-green .page-btn {
  border-color: rgba(37, 45, 101, 0.20);
  color: #252d65;
}
html.theme-green .page-btn:hover:not(:disabled) {
  background: rgba(0, 149, 82, 0.08);
  border-color: #009552;
  color: #009552;
}
html.theme-green .flights-loading::before {
  border: 2px solid rgba(0, 149, 82, 0.25);
  border-top-color: #009552;
}

/* ============ FLIGHTS — CARD VARIANT ============ */
html.theme-green .flight-card {
  border-color: rgba(37, 45, 101, 0.10);
  border-inline-start-color: #009552;
  box-shadow: 0 2px 8px rgba(37, 45, 101, 0.04);
}
html.theme-green .flight-card:hover {
  box-shadow: 0 8px 20px rgba(37, 45, 101, 0.08);
}
html.theme-green .flight-card--arrival   { border-inline-start-color: #009552; }
html.theme-green .flight-card--departure { border-inline-start-color: #252d65; }
html.theme-green .flight-card__number { color: #252d65; }
html.theme-green .flight-card__dir {
  background: rgba(0, 149, 82, 0.10);
  color: #009552;
}
html.theme-green .flight-card--departure .flight-card__dir {
  background: rgba(37, 45, 101, 0.08);
  color: #252d65;
}
html.theme-green .flight-card__route { color: #252d65; }
html.theme-green .flight-card__arrow { color: #009552; }
html.theme-green .flight-card__status { background: rgba(37, 45, 101, 0.06); color: #252d65; }
html.theme-green .flight-card__status--on-time   { background: rgba(0, 149, 82, 0.12);   color: #006e3d; }
html.theme-green .flight-card__status--departed  { background: rgba(37, 45, 101, 0.12);  color: #252d65; }
html.theme-green .flight-card__status--arrived   { background: rgba(0, 149, 82, 0.12);   color: #006e3d; }
html.theme-green .flight-card__status--scheduled { background: rgba(37, 45, 101, 0.06);  color: #252d65; }

/* ============ FOOTER ============ */
html.theme-green .site-footer { border-top-color: rgba(37, 45, 101, 0.08); }
html.theme-green .footer-text { color: rgba(37, 45, 101, 0.60); }
html.theme-green .footer-text strong { color: #252d65; }

/* =====================================================================
   LOGIN PAGE OVERRIDES
   login.php sets <body class="login-page"> so we can scope the radial
   gradient bg without touching the flat-white home page.
   ===================================================================== */
html.theme-green body.login-page {
  background:
    radial-gradient(circle at 0% 0%,    rgba(37, 45, 101, 0.06), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(0, 149, 82, 0.08), transparent 50%),
    #F5F8F5;
}
html.theme-green .card {
  border-color: rgba(37, 45, 101, 0.08);
  box-shadow: 0 10px 30px rgba(37, 45, 101, 0.08);
}
html.theme-green .card-icon {
  background: linear-gradient(135deg, #252d65, #009552);
}
html.theme-green .card-title { color: #252d65; }
html.theme-green .field label { color: #252d65; }
html.theme-green .field input {
  border-color: rgba(37, 45, 101, 0.18);
  color: #252d65;
}
html.theme-green .field input:focus {
  border-color: #009552;
  box-shadow: 0 0 0 3px rgba(0, 149, 82, 0.18);
}

/* Password show/hide + captcha refresh links */
html.theme-green .pw-toggle { color: #009552; }
html.theme-green .pw-toggle:hover { background: rgba(0, 149, 82, 0.08); }
html.theme-green .captcha-img {
  border-color: rgba(37, 45, 101, 0.18);
  background: rgba(37, 45, 101, 0.03);
}
html.theme-green .captcha-reload { color: #009552; }

/* Submit button — solid primary green */
html.theme-green .submit {
  background: #009552;
}
html.theme-green .submit:hover:not(:disabled) {
  background: #006e3d;
  box-shadow: 0 6px 16px rgba(0, 149, 82, 0.25);
}

/* Banners — keep error red; success uses primary green */
html.theme-green .banner--ok {
  background: rgba(0, 149, 82, 0.08);
  color: #006e3d;
  border-color: rgba(0, 149, 82, 0.25);
}

/* "Forgot password" link + help text */
html.theme-green .help a,
html.theme-green .help button.linklike { color: #009552; }
html.theme-green .help a:hover,
html.theme-green .help button.linklike:hover { color: #006e3d; }
html.theme-green .forgot-panel {
  background: rgba(37, 45, 101, 0.04);
  border-color: rgba(37, 45, 101, 0.08);
}
html.theme-green .forgot-panel strong { color: #252d65; }

/* Login footer */
html.theme-green body.login-page footer { color: rgba(37, 45, 101, 0.55); }
html.theme-green body.login-page footer strong { color: #252d65; }

/* =====================================================================
   DAMASCUS SIGNATURE — jasmine / motion personality
   Distinct cues that pair with Aleppo's citadel formality without
   breaking the shared template.
   ===================================================================== */

/* Three small dots above the hero title — jasmine-bloom punctuation. */
html.theme-green .hero-title::before {
  content: "• • •";
  display: block;
  color: #009552;
  font-size: 12px;
  letter-spacing: 6px;
  margin-bottom: 12px;
  opacity: 0.75;
}

/* Hero title gradient is now driven by --title-gradient-start /
   --title-gradient-end on :root, set by index.php from the admin-
   tunable settings (alp_setting_color). The shared rule lives in
   index.php so it applies to Aleppo too. We keep no override here. */

/* Brighter, softer green orb in the upper-left bg shape — replaces
   the muted navy radial set earlier in this file. */
html.theme-green .bg-shape--top {
  background: radial-gradient(circle at 30% 30%,
    rgba(0, 149, 82, 0.18) 0%,
    rgba(0, 149, 82, 0.06) 35%,
    rgba(0, 149, 82, 0)    70%);
}

/* Rounder info cards with green-tinted shadow + a livelier hover lift. */
html.theme-green .info-card {
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0, 149, 82, 0.08);
}
html.theme-green .info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 149, 82, 0.16);
}

/* Filter pills: pure pill shape + a small scale on the active state. */
html.theme-green .filter-btn {
  border-radius: 999px;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
html.theme-green .filter-btn.active { transform: scale(1.04); }

/* Badge: subtle gradient surface and a jasmine floret after the label. */
html.theme-green .badge {
  background: linear-gradient(135deg, rgba(0, 149, 82, 0.12), rgba(37, 45, 101, 0.06));
}
html.theme-green .badge::after {
  content: "❋";
  margin-inline-start: 6px;
  font-size: 13px;
  color: #009552;
  opacity: 0.9;
}

/* Reduced-motion: drop the scale/lift micro-interactions. */
@media (prefers-reduced-motion: reduce) {
  html.theme-green .filter-btn.active   { transform: none; }
  html.theme-green .info-card:hover     { transform: none; }
}

/* =====================================================================
   STITCH SKIN — fixed-bg, glass surfaces, navy banner
   Layered on top of the rules above so the page reads as the Google-
   Stitch mockup: cinematic dark backdrop, frosted flight-board card,
   pill toggles, navy "coming soon" panel. All overrides scoped to
   html.theme-green so Aleppo (navy) is unaffected.
   ===================================================================== */

/* Cinematic backdrop. The bottom layer is the --body-bg-image custom
   property (set inline by index.php when an admin uploads a photo) or a
   slate-to-charcoal gradient fallback. The top layer is a dark wash so
   glass cards always read as light surfaces over either backdrop.

   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. The green ribbon at body::before above is untouched
   — it uses a different pseudo-element root. */
html.theme-green::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, #1a1f2e 0%, #232a3d 50%, #1a1f2e 100%));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
html.theme-green body {
  background: transparent;
  color: #f5fbf2;
}

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

/* Header: logo text is now reading on a dark bg, lift it to white with
   a soft drop-shadow. Keep the AR/EN split colors (still distinct).
   Skip admin/login pages: their headers are white cards, where white
   text would be invisible. They keep the inline dark navy color. */
html.theme-green body:not(.admin-page):not(.login-page) .logo-text-ar,
html.theme-green 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-green .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-green .lang-switch button { color: rgba(255, 255, 255, 0.75); }
html.theme-green .lang-switch button:hover:not(.active) { color: #ffffff; }
html.theme-green .lang-switch button.active {
  background: #ffffff;
  color: #252d65;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* Hero subtitle and statement now sit on dark — lighten copy. */
html.theme-green .hero-subtitle { color: #84faac; }

/* The big hero title gradient is set on :root and uses background-clip:
   text — already legible on either background, so no change. */

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

/* "Live Flight Board" title — primary green, mockup-faithful. */
html.theme-green .flights-section .flights-title,
html.theme-green .flights-section .flights-title-en { color: #009552; }

/* Filter pills — ALL CAPS label feel from the mockup, pill shape kept. */
html.theme-green .filter-btn {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  background: transparent;
  color: #3e4a3f;
}
html.theme-green .filter-btn.active {
  background: #009552;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 149, 82, 0.30);
}
html.theme-green .filter-btn:hover:not(.active) {
  background: rgba(0, 149, 82, 0.10);
  color: #006e3d;
}

/* Filter row container: subtle inner pill so it reads as a segmented
   control like the mockup's Departures/Arrivals toggle. */
html.theme-green .flights-filters {
  background: rgba(0, 149, 82, 0.06);
  border: 1px solid rgba(37, 45, 101, 0.06);
  box-shadow: none;
}

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

/* Table wrap: rounded card-in-card, white-translucent. */
html.theme-green .flights-table-wrap {
  background: rgba(255, 255, 255, 0.50);
  border: 1px solid rgba(189, 202, 189, 0.45);
  border-radius: 18px;
  box-shadow: none;
  overflow: hidden;
}
html.theme-green .flights-table th {
  background: rgba(222, 228, 219, 0.55);
  color: #3e4a3f;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78em;
}
html.theme-green .flights-table th .th-en { color: rgba(62, 74, 63, 0.65); }
html.theme-green .flights-table tbody tr:hover td {
  background: rgba(0, 149, 82, 0.05);
}
html.theme-green .flights-table .num    { color: #252d65; }
html.theme-green .flights-table .route  { color: #252d65; }
html.theme-green .flights-table .gate   { color: #252d65; }

/* Status pills: uppercase + tighter letterspacing for the mockup's vibe.
   Semantic colors (delayed = orange, cancelled = red, boarding = blue)
   stay as set in index.php — only the typography changes here. */
html.theme-green [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-green .flights-empty,
html.theme-green .flights-loading,
html.theme-green .flights-error {
  background: rgba(255, 255, 255, 0.85);
  color: #252d65;
  border-color: rgba(189, 202, 189, 0.55);
}

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

/* ============ HERO STATEMENT — navy banner ============ */
/* Mocks the "Our New Site is Coming Soon" panel: solid navy, generous
   radius, soft drop-shadow. Uses the existing .hero-statement element
   so the admin-tunable bottom hero image still composites underneath. */
html.theme-green .hero-statement {
  background: linear-gradient(135deg, #1f2761 0%, #252d65 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-green .hero-statement-text { color: #ffffff; }
html.theme-green .hero-statement-sub  { color: rgba(255, 255, 255, 0.88); }
html.theme-green .hero-bottom .hero-subtitle { color: rgba(255, 255, 255, 0.85); }

/* "قيد التطوير" badge — sits on the dark backdrop above the navy
   statement banner. Solid green pill with white text; the jasmine
   floret (::after) stays. Wins over the lighter rules higher up. */
html.theme-green .badge {
  background: #009552;
  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(0, 149, 82, 0.30);
}
html.theme-green .badge::after { color: #ffffff; }

/* ============ FOOTER — frosted ============ */
html.theme-green .site-footer {
  background: rgba(245, 251, 242, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(189, 202, 189, 0.45);
}
html.theme-green .footer-text { color: rgba(37, 45, 101, 0.70); }
html.theme-green .footer-text strong { color: #252d65; }

/* ============ INFO CARDS — also frosted on dark ============ */
html.theme-green .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);
}