/* Brand-theme layer (Phase: dark cinematic identity). Loaded after
   style.css/admin.css on every page. Everything here is driven by CSS
   custom properties set per-client in each view's own <style> block (see
   server.js's brand-token building) and by data-* attributes on <html>
   (data-theme, data-heading-style, data-label-style, data-field-style) --
   nothing in here is itself client-specific; a client that never sets
   these attributes/variables (demo) renders exactly as style.css/
   admin.css already describe on their own. */

/* ---------- fonts: heading vs body, swapped for RTL --------------------
   *_ar variables are emitted even for clients that don't set them (they
   default to the same value as the non-ar one), so this swap is always
   safe regardless of mode. */
:root {
  --font-heading-active: var(--brand-font-heading, inherit);
  --font-body-active: var(--brand-font-body, inherit);
}
[dir="rtl"] {
  --font-heading-active: var(--brand-font-heading-ar, var(--brand-font-heading, inherit));
  --font-body-active: var(--brand-font-body-ar, var(--brand-font-body, inherit));
}
body { font-family: var(--font-body-active), var(--brand-font, Cairo), sans-serif; }
h1 { font-family: var(--font-heading-active), var(--brand-font, Cairo), serif; }

/* ---------- heading_style: italic -------------------------------------- */
/* Not in RTL: Amiri italic is not shipped, so the browser would fake a slant that distorts Arabic letterforms. */
[data-heading-style="italic"]:not([dir="rtl"]) h1 { font-style: italic; }

/* ---------- label_style: caps -------------------------------------------
   Disabled under RTL on purpose: letter-spacing tracking breaks Arabic
   glyph joining (letters stop connecting), so this only ever applies to
   LTR text regardless of what a client sets it to. */
[data-label-style="caps"]:not([dir="rtl"]) .field label,
[data-label-style="caps"]:not([dir="rtl"]) .kv .k,
[data-label-style="caps"]:not([dir="rtl"]) .btn-primary,
[data-label-style="caps"]:not([dir="rtl"]) .admin-tile-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* ---------- field_style: underline -------------------------------------
   Flat, borderless, bottom-line-only fields instead of the boxed default
   in style.css -- selected/focus state still reads clearly without a
   filled box. */
[data-field-style="underline"] .field input,
[data-field-style="underline"] .field select,
[data-field-style="underline"] .field textarea {
  border: none;
  border-bottom: 2px solid var(--brand-border, #ccc);
  border-radius: 0;
  background: transparent;
  padding-inline: 2px;
}
[data-field-style="underline"] .field input:focus,
[data-field-style="underline"] .field select:focus,
[data-field-style="underline"] .field textarea:focus {
  border-bottom-color: var(--brand-primary, #8B2E2E);
}
[data-field-style="underline"] .slot-btn {
  background: transparent;
}

/* ---------- buttons/pills: readable text on whatever `primary` resolves
   to (a light primary, as in the dark theme, needs dark text -- see
   lib/theme.js's contrastFor()). ---------- */
.btn-primary,
.lang-switch a.active,
.slot-btn.selected {
  color: var(--brand-primary-contrast, #fff);
}

/* ---------- cover image (reserve page header only) ---------------------
   Applied only when the server actually resolved a cover image (body
   gets class="has-cover" and --brand-cover-image is set); grayscale is
   fixed per this brand direction, not configurable. Negative z-index
   pseudo-elements instead of a body background-image so the dark
   gradient overlay can layer cleanly on top without a third element. */
body.has-cover { position: relative; }
body.has-cover::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--brand-cover-image, none);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
  z-index: -2;
}
body.has-cover[data-cover-overlay="dark-gradient"]::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.82) 70%, rgba(0, 0, 0, 0.92) 100%);
  z-index: -1;
}

/* ---------- form panel wrapper (reserve page) ---------------------------
   A thin bordered container around the reservation form -- border is
   transparent by default (var()'s own fallback), so a client that never
   sets --brand-border (demo) gets a zero-width-equivalent, invisible
   border: no visual change, box-sizing:border-box keeps outer dimensions
   identical either way. */
.form-panel {
  border: 1px solid var(--brand-border, transparent);
  border-radius: var(--brand-radius, 0px);
  padding: 20px;
  background: var(--brand-panel, transparent);
}
/* reserve.js hides #reserveForm (not this wrapper) once the booking is
   submitted -- without this, an empty bordered/panel-colored box would be
   left behind above the check-email panel. CSS-only fix (no JS change,
   so reserve.js's actual submit behavior is untouched). */
.form-panel:has(> #reserveForm[hidden]) { display: none; }

/* ---------- logo header (reserve page) ----------------------------------
   [hidden] override is required: an author stylesheet's plain class rule
   otherwise beats the UA stylesheet's default `[hidden] { display: none }`
   regardless of specificity (author origin always wins over UA origin),
   so without this a hidden logo header would still render -- demo (which
   has no logo and renders this element `hidden`) would show a broken
   image icon instead of nothing. */
.brand-logo-header { display: flex; justify-content: center; margin-bottom: 18px; }
.brand-logo-header[hidden] { display: none; }
.brand-logo-header img { max-height: 92px; width: auto; display: block; }

/* ---------- dark mode: panels/status badges that must stay readable on
   a near-black page regardless of whether a client bothered to set every
   single color variable (e.g. a dark client that didn't set `panel`). -- */
[data-theme="dark"] .status-badge {
  background: var(--brand-panel, rgba(255, 255, 255, 0.08));
  color: var(--brand-text, #fff);
  border: 1px solid var(--brand-border, rgba(255, 255, 255, 0.25));
}
[data-theme="dark"] .field-error { color: #ff8a80; }
[data-theme="dark"] .alert { background: rgba(255, 90, 80, 0.15); color: #ff8a80; }
[data-theme="dark"] .dev-banner { background: rgba(255, 214, 10, 0.12); color: #ffd60a; }
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] textarea:focus-visible,
[data-theme="dark"] select:focus-visible {
  box-shadow: 0 0 0 3px var(--brand-bg, #0a0a0a), 0 0 0 5px var(--brand-primary, #fafafa);
}

/* ---------- admin dashboard: status colors stay functionally distinct in
   dark mode by LIGHTNESS as well as hue (not color alone), and keep
   sufficient contrast against a near-black panel. ---------- */
[data-theme="dark"] .status-pending_email { background: rgba(255, 214, 10, 0.16); color: #ffd60a; }
[data-theme="dark"] .status-confirmed { background: rgba(100, 220, 140, 0.16); color: #7CE8A4; }
[data-theme="dark"] .status-arrived { background: rgba(120, 180, 255, 0.18); color: #9CC3FF; }
[data-theme="dark"] .status-no_show { background: rgba(255, 120, 120, 0.16); color: #FF9E9E; }
[data-theme="dark"] .status-cancelled { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); text-decoration: line-through; }
[data-theme="dark"] .status-expired { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.4); }
[data-theme="dark"] .admin-card,
[data-theme="dark"] .admin-tile,
[data-theme="dark"] .admin-slots-details {
  background: var(--brand-panel, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--brand-border, rgba(255, 255, 255, 0.12));
}
[data-theme="dark"] .admin-slot-cell { background: rgba(255, 255, 255, 0.04); border-color: var(--brand-border, rgba(255, 255, 255, 0.12)); }
[data-theme="dark"] .admin-slot-cell.is-full { background: rgba(255, 120, 120, 0.14); border-color: rgba(255, 120, 120, 0.3); }
[data-theme="dark"] .admin-action-btn { background: rgba(255, 255, 255, 0.05); border-color: var(--brand-border, rgba(255, 255, 255, 0.18)); color: var(--brand-text, #fafafa); }
[data-theme="dark"] .admin-action-btn.danger { border-color: rgba(255, 120, 120, 0.4); color: #FF9E9E; }
[data-theme="dark"] .admin-action-btn.danger:hover { background: rgba(255, 120, 120, 0.12); }
[data-theme="dark"] .admin-daybtn,
[data-theme="dark"] .admin-dateinput,
[data-theme="dark"] .admin-filter-btn {
  background: var(--brand-panel, rgba(255, 255, 255, 0.05));
  border-color: var(--brand-border, rgba(255, 255, 255, 0.18));
  color: var(--brand-text, #fafafa);
}
[data-theme="dark"] .admin-filter-btn.is-active {
  background: var(--brand-primary, #fafafa);
  color: var(--brand-primary-contrast, #0f0f0f);
  border-color: var(--brand-primary, #fafafa);
}
[data-theme="dark"] .card,
[data-theme="dark"] .panel {
  background: var(--brand-panel, rgba(255, 255, 255, 0.06));
}