/* HBR — dark mode.
   The booking form's own stylesheet (assets/index-2DDudgPv.css) already
   drives most surfaces off CSS variables (--cream/--paper/--ink/--muted/
   --mist/--sand), so redefining those under [data-theme="dark"] re-themes
   the bulk of the page for free. The rest of this file targets the spots
   that hardcode a light color instead of a variable (white inputs/cards,
   light-tinted status colors, the gallery modal, the event section) plus
   the toggle button itself. --forest/--leaf/--sage/--accent and friends are
   deliberately left unchanged: they're used both as backgrounds on already-
   dark elements (the summary sidebar, primary buttons, selected states) and
   as text color on light surfaces, so where --forest is used as TEXT it is
   swapped for --sage explicitly below instead of redefining the variable
   itself (which would break the already-dark elements using it as a
   background). */

:root[data-theme="dark"] {
  --cream: #10201a;
  --paper: #16261f;
  --mist: #1e3129;
  --sand: #2c4437;
  --ink: #eef1ea;
  --muted: #9fb0a3;
}

/* Form controls (hardcode background:#fff) */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--paper) !important;
  border-color: var(--sand) !important;
  color: var(--ink) !important;
}

/* Surfaces that hardcode background:#fff or a light neutral */
[data-theme="dark"] .package-card,
[data-theme="dark"] .calendar-shell,
[data-theme="dark"] .upload-field,
[data-theme="dark"] .signature-shell,
[data-theme="dark"] .terms-box,
[data-theme="dark"] .calendar-navigation button {
  background: var(--paper) !important;
  border-color: var(--sand) !important;
}

[data-theme="dark"] .calendar-topline { background: var(--mist) !important; border-bottom-color: var(--sand) !important; }
[data-theme="dark"] .calendar-feedback { background: var(--mist) !important; border-top-color: var(--sand) !important; }
[data-theme="dark"] .consent-field { background: var(--mist) !important; border-color: var(--sand) !important; }
[data-theme="dark"] .calendar-placeholder { background: var(--mist) !important; border-color: var(--sand) !important; }
[data-theme="dark"] .form-actions { background: rgba(16, 32, 26, .94) !important; border-top-color: var(--sand) !important; }
[data-theme="dark"] .calendar-weekdays span { color: #7f9187; }

/* --forest used as TEXT on a light bg reads poorly on a dark one -- swap for --sage */
[data-theme="dark"] .subsection-label,
[data-theme="dark"] .secondary-button,
[data-theme="dark"] .complete,
[data-theme="dark"] .progress-steps li.active,
[data-theme="dark"] .progress-steps li.complete,
[data-theme="dark"] .calendar-navigation button,
[data-theme="dark"] .calendar-placeholder,
[data-theme="dark"] .in-range,
[data-theme="dark"] .availability-message {
  color: var(--sage) !important;
}
[data-theme="dark"] .secondary-button { border-color: var(--sand) !important; }

/* Selected / in-range / success tints (light green -> dark green) */
[data-theme="dark"] .in-range,
[data-theme="dark"] .chosen,
[data-theme="dark"] .availability-message,
[data-theme="dark"] .package-card.selected {
  background: #1c3229 !important;
  border-color: #345143 !important;
}

/* Checking / pending tint */
[data-theme="dark"] .checking {
  background: #2a2a1c !important;
  border-color: var(--sand) !important;
}

/* Busy / error tints (light red -> dark red) */
[data-theme="dark"] .busy,
[data-theme="dark"] .error,
[data-theme="dark"] .error-message {
  background: #33211e !important;
  border-color: #5c332c !important;
  color: #e5a79c !important;
}

[data-theme="dark"] footer { border-top-color: var(--sand) !important; }

/* --- "Sewa Tapak untuk Majlis" section (hbr-event.css hardcodes its own colors) --- */
[data-theme="dark"] .hbr-event-inner { background: var(--paper); border-color: var(--sand); }
[data-theme="dark"] .hbr-event-copy { color: var(--ink); }
[data-theme="dark"] .hbr-event-copy h2,
[data-theme="dark"] .hbr-event-copy h3 { color: var(--ink); }
[data-theme="dark"] .hbr-event-summary,
[data-theme="dark"] .hbr-event-features li { color: var(--muted); }
[data-theme="dark"] .hbr-event-btn-outline { background: var(--paper); color: var(--ink); border-color: var(--sand); }
[data-theme="dark"] .hbr-event-btn-outline:hover { background: var(--mist); }

/* --- Photo gallery modal (hbr-gallery.css hardcodes its own colors) --- */
[data-theme="dark"] .hbr-gallery-dialog { background: var(--paper); }
[data-theme="dark"] .hbr-gallery-close { background: var(--mist); color: var(--ink); border-color: var(--sand); }
[data-theme="dark"] .hbr-gallery-visual { background: var(--cream); }
[data-theme="dark"] .hbr-gallery-stage,
[data-theme="dark"] .hbr-gallery-thumb { background: var(--mist); }
[data-theme="dark"] .hbr-gallery-copy { color: var(--ink); }
[data-theme="dark"] .hbr-gallery-copy h2,
[data-theme="dark"] .hbr-gallery-copy h3 { color: var(--ink); }
[data-theme="dark"] .hbr-gallery-summary,
[data-theme="dark"] .hbr-gallery-features li { color: var(--muted); }
[data-theme="dark"] .hbr-gallery-facts span { background: var(--mist); color: var(--sage); }

/* --- Theme toggle button: always sits on the (always-dark) hero, so it looks the same in both modes --- */
.hbr-theme-toggle {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid #ffffff2e;
  border-radius: 50%;
  background: #ffffff17;
  color: #fffc;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.hbr-theme-toggle:hover { background: #ffffff26; transform: translateY(-1px); }
.hbr-theme-toggle:active { transform: translateY(0); }