/* ═══════════════════════════════════════════════════════════
   Landing / public-pages theme
   --------------------------------------------------------------
   Loaded AFTER /static/style.css on the public-facing pages
   (landing.html, login.html, etc — anything with body.auth-body).
   Does NOT load on /portal (client chat) or /ops (operator portal),
   so those keep their existing look.

   Palette adapted from the Solid State dark template the user
   uploaded as style.css at the project root.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;400;600;700&family=Source+Sans+3:wght@300;400;600&display=swap');

/* ── Token overrides scoped to public pages ─────────────────
   Re-defining the same variable names the rest of the codebase
   uses (so any landing CSS that reads them gets the dark palette
   automatically) plus the new palette tokens for selectors we
   target explicitly below. */
body.auth-body {
  /* New palette */
  --bg-body:      #2e3141;
  --bg-card:      #353849;
  --bg-card-2:    #3d4051;
  --bg-soft:      #454858;
  --accent-deep: #45558d;
  --accent-hover:#53639e;
  --accent-glow: #5b6ba6;
  --text-soft:   rgba(255,255,255,0.65);
  --text-faint:  rgba(255,255,255,0.35);
  --border-soft: rgba(255,255,255,0.125);
  --subtle-bg:   rgba(255,255,255,0.025);

  /* Map the existing variable names that landing-card / cal-* /
     time-slot / hours-btn / etc. read internally, so any selector
     that says `var(--bg)` or `var(--panel)` picks up dark colors
     without us having to override every selector by hand. */
  --bg:        var(--bg-body);
  --panel:     var(--bg-card);
  --panel-2:   var(--bg-card-2);
  --ink:       #ffffff;
  --text:      #ffffff;
  --muted:     var(--text-soft);
  --line:      var(--border-soft);
  --accent:    #4c5c96;
  --accent-2:  var(--accent-deep);

  background:   var(--bg-body) !important;   /* replaces light gradient */
  color:        var(--text);
  font-family:  'Source Sans 3', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight:  300;
  -webkit-font-smoothing: antialiased;
}

/* ── Headings get Raleway, uppercase ───────────────────────── */
body.auth-body h1,
body.auth-body h2,
body.auth-body h3 {
  font-family: 'Raleway', Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text);
}
body.auth-body .landing-hero h1 {
  /* Hero stays normal-case for readability; lighten the tracking. */
  text-transform: none;
  letter-spacing: -0.4px;
}
body.auth-body .landing-hero p,
body.auth-body .muted { color: var(--text-soft) !important; }

/* ── Top header bar ─────────────────────────────────────────
   The original is a translucent-white-on-light strip — replace
   with a translucent-dark-on-dark strip so it lifts off the body. */
body.auth-body .landing-head {
  background: rgba(45, 48, 65, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
body.auth-body .landing-head .brand-title {
  color: var(--text);
  font-family: 'Raleway', sans-serif;
  letter-spacing: 0.05em;
}
body.auth-body .landing-head .brand-sub {
  color: var(--text-faint);
}
body.auth-body .landing-head .brand-mark {
  background: var(--accent);
  color: var(--text);
  font-family: 'Raleway', sans-serif;
}
body.auth-body .landing-head .lang-switch {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
}
body.auth-body .landing-head .lang-switch .lang-btn { color: var(--text-soft); }
body.auth-body .landing-head .lang-switch .lang-btn.active {
  background: var(--accent);
  color: var(--text);
}
body.auth-body .signin-link,
body.auth-body .muted-link {
  color: var(--text-soft);
}
body.auth-body .signin-link:hover,
body.auth-body .muted-link:hover {
  color: var(--accent-glow);
  text-decoration: none;
}
body.auth-body .primary-link {
  background: var(--accent);
  color: var(--text) !important;
}
body.auth-body .primary-link:hover { background: var(--accent-hover); }

/* ── The form card itself ──────────────────────────────────── */
body.auth-body .landing-card .form-card,
body.auth-body .form-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
body.auth-body .landing-card .field label {
  color: var(--text-soft);
  font-family: 'Raleway', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11.5px;
}

/* ── Form inputs: dark surfaces with a subtle ring on focus ── */
body.auth-body .landing-card input,
body.auth-body .landing-card select,
body.auth-body .landing-card textarea,
body.auth-body input[type=text],
body.auth-body input[type=email],
body.auth-body input[type=password],
body.auth-body select,
body.auth-body textarea {
  background: var(--bg-card-2);
  border: 1px solid var(--border-soft);
  color: var(--text);
  border-radius: 8px;
}
body.auth-body .landing-card input::placeholder,
body.auth-body .landing-card textarea::placeholder,
body.auth-body input::placeholder,
body.auth-body textarea::placeholder { color: var(--text-faint); }
body.auth-body .landing-card input:focus,
body.auth-body .landing-card select:focus,
body.auth-body .landing-card textarea:focus,
body.auth-body input:focus,
body.auth-body select:focus,
body.auth-body textarea:focus {
  outline: none;
  border-color: var(--accent-glow);
  /* 0.5 alpha — the previous 0.25 ring was nearly invisible on the dark
     card and failed the visible-focus check. UX audit P11. */
  box-shadow: 0 0 0 3px rgba(91, 107, 166, 0.5);
}
/* Client-side validation state (UX audit M10). */
body.auth-body input[aria-invalid="true"] {
  border-color: #e5484d;
}
body.auth-body input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.35);
}

/* Native <select> chevron stays visible on dark — let the browser
   colour it but tint the option list. */
body.auth-body select option {
  background: var(--bg-card-2);
  color: var(--text);
}

/* ── Calendar widget ──────────────────────────────────────── */
body.auth-body .calendar-widget {
  background: var(--bg-card-2);
  border: 1px solid var(--border-soft);
  box-shadow: none;
}
body.auth-body .cal-title {
  color: var(--text);
  font-family: 'Raleway', sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 13.5px;
}
body.auth-body .cal-nav {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  color: var(--text-soft);
}
body.auth-body .cal-nav:hover {
  background: var(--bg-soft);
  color: var(--text);
}
body.auth-body .cal-dow > div { color: var(--text-faint); }
body.auth-body .cal-day {
  color: var(--text);
}
body.auth-body .cal-day:hover:not(:disabled) {
  background: rgba(255,255,255,0.04);
  border-color: var(--border-soft);
}
body.auth-body .cal-day.out,
body.auth-body .cal-day.past,
body.auth-body .cal-day.full { color: var(--text-faint); }
body.auth-body .cal-day.today {
  /* Today indicator on dark: subtle ring, not a heavy box */
  border-color: var(--accent-glow);
  color: var(--accent-glow);
  font-weight: 700;
}
body.auth-body .cal-day.selected,
body.auth-body .cal-day.selected:hover {
  background: var(--accent) !important;
  color: var(--text) !important;
  border-color: var(--accent) !important;
}

/* ── Time-slot grid + hours buttons ─────────────────────────
   Sub-section labels (Date, Start time, Hours) get the same
   Raleway-uppercase treatment as the field labels for consistency. */
body.auth-body .cal-section-label {
  color: var(--text-soft);
  font-family: 'Raleway', sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 11.5px;
}
body.auth-body .time-grid-empty {
  background: var(--bg-card-2);
  border: 1px dashed var(--border-soft);
  color: var(--text-faint);
}
body.auth-body .time-slot,
body.auth-body .hours-btn {
  background: var(--bg-card-2);
  border: 1px solid var(--border-soft);
  color: var(--text);
}
body.auth-body .time-slot:hover:not(:disabled),
body.auth-body .hours-btn:hover:not(:disabled) {
  border-color: var(--accent-glow);
  color: var(--accent-glow);
  background: rgba(91, 107, 166, 0.08);
}
body.auth-body .time-slot.busy {
  background: rgba(255,255,255,0.02);
  color: var(--text-faint);
  border-color: var(--border-soft);
}
body.auth-body .time-slot.selected,
body.auth-body .time-slot.selected:hover,
body.auth-body .hours-btn.active,
body.auth-body .hours-btn.active:hover {
  background: var(--accent);
  color: var(--text);
  border-color: var(--accent);
}

/* ── Primary button (Reserve, Send, Sign in) ──────────────── */
body.auth-body .form-card button.primary,
body.auth-body .form-actions button.primary,
body.auth-body button#btn-reserve,
body.auth-body button[type="submit"].primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--text);
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12.5px;
  padding: 11px 22px;
}
body.auth-body .form-card button.primary:hover:not(:disabled),
body.auth-body button#btn-reserve:hover:not(:disabled),
body.auth-body button[type="submit"].primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
body.auth-body .form-card button.primary:disabled,
body.auth-body button#btn-reserve:disabled {
  background: var(--bg-soft);
  border-color: var(--bg-soft);
  color: var(--text-faint);
  opacity: 1;
}

/* ── Perks row (cards under the form on the landing page) ── */
body.auth-body .landing-perks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
body.auth-body .perk {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
body.auth-body .perk-icon {
  font-size: 22px;
  line-height: 1;
  color: var(--accent-glow);
}
body.auth-body .perk strong {
  display: block;
  margin-bottom: 4px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--text);
}
body.auth-body .perk p { margin: 0; color: var(--text-soft); font-size: 13px; }

/* ── Footer ───────────────────────────────────────────────── */
body.auth-body .auth-foot {
  padding: 24px;
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
  border-top: 1px solid var(--border-soft);
  margin-top: 32px;
}
body.auth-body .auth-foot a { color: var(--accent-glow); }
body.auth-body .auth-foot a:hover { color: var(--text); }

/* ── Auth panes (login / register / forgot / reset / verify) ─
   Same treatment as the booking card so the visual transition
   from /login → / is seamless. */
body.auth-body .auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  color: var(--text);
}
body.auth-body .auth-pane h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
body.auth-body .auth-pane label {
  color: var(--text-soft);
  font-family: 'Raleway', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11.5px;
}
body.auth-body .auth-status.error { color: #fca5a5; }
body.auth-body .auth-status.success { color: #86efac; }

/* ── Tiny refinements ───────────────────────────────────── */
/* Dotted borders look harsh on dark; soften them. */
body.auth-body * { border-color: var(--border-soft); }
/* Long-form description text on the booking form (the pack hint
   that wrapped weirdly earlier, plus the brief-help line). */
body.auth-body .form-card .field > small { color: var(--text-faint); }