/* ============================================================
   Balai-Reserve — Design tokens & shared base components
   Loaded first on every layout (public, portal, back office, auth).
   Values follow BALAI_RESERVE_UI_UX_GUIDELINES_V3_COMPLETE_OVERHAUL.md §03.
   The V3 names (--color-*, --radius-*, --space-*, --text-*) are canonical;
   the older --br-* names are kept as aliases so existing stylesheets inherit V3.
   ============================================================ */

:root {
  /* ── V3 colour palette ──────────────────────────────────── */
  --color-ocean-700:    #0f5c66;   /* main brand, primary actions, active navigation */
  --color-ocean-800:    #0b4850;   /* hover / pressed */
  --color-ocean-900:    #14343a;   /* strong headings, dark surfaces */
  --color-seaglass-100: #e7f3f0;   /* soft selected surfaces, quiet highlights */
  --color-seaglass-400: #8fcfc4;   /* limited decorative accent */
  --color-sand-100:     #f7f2e8;   /* warm section backdrop */
  --color-sand-400:     #e8b96a;   /* tiny playful accents — never critical body text */
  --color-canvas:       #fcfbf8;   /* warm site canvas */
  --color-white:        #ffffff;   /* primary surfaces */
  --color-text:         #1c3034;   /* primary copy */
  --color-secondary:    #526368;   /* supporting copy */
  --color-muted:        #6b7a7d;   /* metadata (passes 4.5:1 on white and canvas) */
  --color-divider:      #e7e9e6;   /* necessary separation only */
  --color-danger:       #b43d3d;   /* destructive / error states */
  --color-focus:        #176f7b;   /* visible focus outline */

  /* ── V3 typography ──────────────────────────────────────── */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;   /* selected editorial headings only */
  --font-ui:      'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --text-display: clamp(40px, 5vw, 72px);    /* public display heading, line-height 1.05–1.12 */
  --text-section: clamp(28px, 3vw, 42px);    /* public section heading */
  --text-listing: clamp(22px, 1.6vw, 28px);  /* listing / detail title */
  --text-page:    clamp(26px, 2vw, 32px);    /* admin & portal page title */
  --text-body:    16px;   --lh-body: 1.55;
  --text-small:   14px;   --lh-small: 1.45;
  --text-meta:    13px;

  /* ── V3 spacing (4px grid) & layout ─────────────────────── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 32px;  --space-8: 40px;
  --space-9: 48px;  --space-10: 64px; --space-11: 80px; --space-12: 96px;
  --layout-max:   1280px;   /* public max width (1240–1320) */
  --gutter:       20px;     /* 20 mobile / 32 tablet / 48 desktop — see media queries below */
  --reading-max:  700px;    /* booking detail reading column (640–760) */
  --prose-max:    65ch;     /* marketing paragraphs */

  /* ── V3 radii, sizes & elevation ────────────────────────── */
  --radius-input:  12px;
  --radius-button: 12px;
  --radius-media:  18px;    /* images, listing containers (16–20) */
  --radius-modal:  20px;
  --radius-chip:   999px;   /* functional chips / filters only */
  --control-h:     48px;    /* form controls 44–52 */
  --button-h:      46px;    /* main buttons 44–48 */
  --tap-min:       44px;
  --shadow-raised: 0 6px 20px rgba(20, 52, 58, .10);   /* booking summary, sticky bars */
  --shadow-pop:    0 10px 28px rgba(20, 52, 58, .14);  /* menus, popovers */
  --shadow-modal:  0 24px 60px rgba(20, 52, 58, .24);  /* dialogs */

  /* ── V3 motion ──────────────────────────────────────────── */
  --dur-press:  160ms;   /* hover / press (140–220) */
  --dur-panel:  260ms;   /* drawers / dialogs (220–320) */
  --ease-out:   cubic-bezier(.2, .7, .2, 1);

  /* ── Legacy aliases (pass 1/2 names) → V3 values ───────── */
  --br-deep-sea:      var(--color-ocean-700);
  --br-deep-sea-dark: var(--color-ocean-800);
  --br-deep-sea-tint: var(--color-seaglass-100);
  --br-ink-teal:      var(--color-ocean-900);
  --br-sea-glass:     var(--color-seaglass-400);
  --br-sand:          var(--color-sand-400);
  --br-sand-ink:      #8a5a12;   /* sand-family text that passes contrast on white */
  --br-canvas:        var(--color-canvas);
  --br-surface:       var(--color-white);
  --br-surface-alt:   #f3f5f3;   /* quiet alternate band / table header */
  --br-ink:           var(--color-text);
  --br-ink-2:         var(--color-secondary);
  --br-hairline:      var(--color-divider);
  --br-hairline-2:    #d2d9d7;   /* field borders */

  --br-success: #1f7a4d;
  --br-warning: #a15c07;
  --br-danger:  var(--color-danger);
  --br-info:    #1d5fa8;

  --br-font-display: var(--font-display);
  --br-font-ui:      var(--font-ui);
  --br-fs-display:   var(--text-display);
  --br-fs-section:   var(--text-section);
  --br-fs-page:      var(--text-page);
  --br-fs-sub:       1.25rem;
  --br-fs-body:      var(--text-body);
  --br-fs-small:     var(--text-small);
  --br-fs-meta:      var(--text-meta);
  --br-lh-body:      var(--lh-body);
  --br-lh-tight:     1.12;

  --br-space-1: 4px;  --br-space-2: 8px;  --br-space-3: 12px; --br-space-4: 16px;
  --br-space-5: 24px; --br-space-6: 32px; --br-space-7: 48px; --br-space-8: 64px; --br-space-9: 80px;
  --br-content-max: var(--layout-max);
  --br-text-max:    var(--prose-max);

  --br-radius-sm: 8px;
  --br-radius:    var(--radius-button);
  --br-radius-lg: var(--radius-media);
  --br-shadow-pop:   var(--shadow-pop);
  --br-shadow-modal: var(--shadow-modal);

  --br-dur:  var(--dur-press);
  --br-ease: var(--ease-out);

  /* ── Bootstrap theme bridge ─────────────────────────────── */
  --bs-primary: #0f5c66;            --bs-primary-rgb: 15,92,102;
  --bs-link-color: #0f5c66;         --bs-link-color-rgb: 15,92,102;
  --bs-link-hover-color: #0b4850;   --bs-link-hover-color-rgb: 11,72,80;
  --bs-body-color: #1c3034;         --bs-body-font-family: var(--font-ui);
  --bs-border-color: #e7e9e6;
  --bs-border-radius: 12px;
  --bs-danger: #b43d3d;             --bs-danger-rgb: 180,61,61;
}

@media (min-width: 601px)  { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; } }

/* ── Focus: always visible for keyboard users ─────────────── */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
  box-shadow: 0 0 0 3px rgba(23, 111, 123, .32);
  outline: none;
}

/* ── Buttons (V3 §10): 12px radius, 44–48px tall, subtle press ── */
.btn {
  border-radius: var(--radius-button);
  font-weight: 600;
  transition: background-color var(--dur-press) var(--ease-out), border-color var(--dur-press) var(--ease-out),
              color var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.btn:not(.btn-sm):not(.btn-link) { min-height: var(--tap-min); }
.btn-lg { min-height: var(--button-h); }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn-secondary-quiet {
  --bs-btn-color: var(--color-text); --bs-btn-bg: var(--color-white); --bs-btn-border-color: var(--color-divider);
  --bs-btn-hover-color: var(--color-text); --bs-btn-hover-bg: var(--color-seaglass-100); --bs-btn-hover-border-color: #cfe3de;
}
.btn-danger {
  --bs-btn-bg: var(--color-danger); --bs-btn-border-color: var(--color-danger);
  --bs-btn-hover-bg: #9a3232; --bs-btn-hover-border-color: #9a3232;
  --bs-btn-active-bg: #9a3232; --bs-btn-active-border-color: #9a3232;
}
.btn-outline-danger {
  --bs-btn-color: var(--color-danger); --bs-btn-border-color: #e3b7b7;
  --bs-btn-hover-bg: var(--color-danger); --bs-btn-hover-border-color: var(--color-danger); --bs-btn-hover-color: #fff;
}
.btn-primary {
  --bs-btn-bg: var(--br-deep-sea); --bs-btn-border-color: var(--br-deep-sea);
  --bs-btn-hover-bg: var(--br-deep-sea-dark); --bs-btn-hover-border-color: var(--br-deep-sea-dark);
  --bs-btn-active-bg: var(--br-deep-sea-dark); --bs-btn-active-border-color: var(--br-deep-sea-dark);
  --bs-btn-disabled-bg: var(--br-deep-sea); --bs-btn-disabled-border-color: var(--br-deep-sea);
}
.btn-outline-primary {
  --bs-btn-color: var(--br-deep-sea); --bs-btn-border-color: var(--br-deep-sea);
  --bs-btn-hover-bg: var(--br-deep-sea); --bs-btn-hover-border-color: var(--br-deep-sea); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--br-deep-sea-dark); --bs-btn-active-border-color: var(--br-deep-sea-dark);
}
.btn[aria-busy="true"], .btn.is-loading { pointer-events: none; opacity: .7; }

/* ── Fields ──────────────────────────────────────────────── */
.form-control, .form-select {
  border-color: var(--br-hairline-2);
  border-radius: var(--radius-input);
  color: var(--br-ink);
  transition: border-color var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out);
}
/* V3: form controls 44–52px tall (textareas and small/inline controls excluded) */
.form-control:not(textarea):not(.form-control-sm):not([type="file"]),
.form-select:not(.form-select-sm):not([multiple]) { min-height: var(--control-h); }
.form-control:focus, .form-select:focus {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px rgba(23, 111, 123, .2);
}
.form-control[aria-invalid="true"], .form-select[aria-invalid="true"], .form-control.is-invalid { border-color: var(--color-danger); }
.form-label { font-weight: 600; color: var(--br-ink); font-size: var(--br-fs-small); }
.form-text  { color: var(--br-ink-2); }
.invalid-feedback, .field-error { color: var(--br-danger); font-size: var(--br-fs-meta); }

/* ── Tables (shared data-table look) ─────────────────────── */
.table-br {
  --bs-table-bg: transparent;
  width: 100%;
  font-size: var(--br-fs-small);
  border-collapse: collapse;
}
.table-br thead th {
  background: var(--br-surface-alt);
  color: var(--br-ink-2);
  font-size: var(--br-fs-meta);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--br-hairline);
  padding: 10px 12px;
  white-space: nowrap;
}
.table-br tbody td { padding: 10px 12px; border-bottom: 1px solid var(--br-hairline); vertical-align: middle; }
.table-br tbody tr:hover { background: #f8faf9; }
.num, .table-br .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Status system ────────────────────────────────────────
   Reservation / resource / ticket statuses: compact chips (colour + text).
   Payment statuses: dot + text, deliberately a different shape. */
.status-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: var(--br-radius-sm);
  font-size: var(--br-fs-meta);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}
.st-amber  { background: #fdf3dc; color: #7a4a05; border-color: #f3dca6; } /* Pending */
.st-purple { background: #f1e9fb; color: #5b2a91; border-color: #dcc8f3; } /* Pencil Booking */
.st-slate  { background: #e9edf1; color: #33414f; border-color: #cfd7df; } /* On Hold */
.st-orange { background: #fdeadb; color: #8a3b07; border-color: #f6cfae; } /* Awaiting payment */
.st-teal   { background: #dff1ec; color: #0b5345; border-color: #b8e0d5; } /* Confirmed / available */
.st-blue   { background: #e1ecfa; color: #174a8b; border-color: #bfd5f2; } /* Checked in */
.st-gray   { background: #eef0ef; color: #4a5658; border-color: #d9dedd; } /* Completed / closed */
.st-red    { background: #fbe4e2; color: #8c1d14; border-color: #f2c4bf; } /* Cancelled / rejected / no-show */

.pay-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--br-fs-meta); font-weight: 600; color: var(--br-ink);
  white-space: nowrap;
}
.pay-status::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.pay-unpaid         { color: #8c1d14; }
.pay-partially_paid { color: #8a3b07; }
.pay-fully_paid     { color: #1f6b43; }
.pay-refunded       { color: #4a5658; }

/* Accessible text for screen readers only */
.br-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Honest empty photo state ─────────────────────────────── */
.photo-pending {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 100%; min-height: 160px;
  background: var(--br-surface-alt);
  color: var(--br-ink-2);
  font-size: var(--br-fs-small);
}
.photo-pending i { font-size: 1.25rem; opacity: .7; }

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ── Resort badge beside the wordmark (all headers) ───────────── */
.brand-logo { display: block; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px rgba(20, 52, 58, .12); }

/* ── Opening motion for overlays ──────────────────────────────
   Entrance only (closing stays instant). Uses the individual
   translate/scale properties so it composes with Popper's inline
   transform on dropdowns. The reduced-motion block above
   switches all of it off. */
@keyframes br-pop-in  { from { opacity: 0; translate: 0 8px; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes br-rise-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes br-drop-in { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
@keyframes br-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Bootstrap dialogs: a short lift + settle instead of the default 50px drop */
.modal.fade .modal-dialog { transform: translateY(12px) scale(.98); transition: transform var(--dur-panel) var(--ease-out); }
.modal.show .modal-dialog { transform: none; }
.modal.modal-static .modal-dialog { transform: scale(1.01); }

/* Dropdowns (account, notifications, row actions) */
.dropdown-menu.show { animation: br-drop-in var(--dur-press) var(--ease-out) both; }

/* Backdrops behind drawers and sheets */
.sidebar-overlay.open, .sheet-backdrop:not([hidden]) { animation: br-fade-in var(--dur-panel) var(--ease-out); }

/* Phone-only elements (bottom tab bars). Their look lives in mobile.css, which only
   loads at ≤575.98px; at every wider width they stay out of the layout entirely. */
@media (min-width: 576px) { .m-only { display: none !important; } }