/* theme.css — mirrors mobileapp/constants/theme.ts. Keep in sync. */
:root {
  /* Primary — Deep Ocean Blue */
  --ctw-primary: #002a3e;
  --ctw-on-primary: #ffffff;
  --ctw-on-primary-subtle: #d8ebf7;
  --ctw-primary-container: #10415a;
  --ctw-on-primary-container: #83adca;
  --ctw-primary-fixed: #c7e7ff;
  --ctw-inverse-primary: #a1ccea;

  /* Secondary — Protea Pink */
  --ctw-secondary: #9d3e53;
  --ctw-on-secondary: #ffffff;
  --ctw-secondary-container: #ff8ba0;
  --ctw-on-secondary-container: #782137;

  /* Tertiary — Fynbos Green */
  --ctw-tertiary: #0b2d19;
  --ctw-tertiary-container: #23442e;
  --ctw-on-tertiary-container: #8cb194;

  /* Surfaces — Sandy Neutral */
  --ctw-background: #fcf9f2;
  --ctw-surface-lowest: #ffffff;
  --ctw-surface-low: #f6f3ec;
  --ctw-surface: #f1eee7;
  --ctw-surface-high: #ebe8e1;
  --ctw-surface-highest: #e5e2db;
  --ctw-on-surface: #1c1c18;
  --ctw-on-surface-variant: #41474d;

  /* Utility */
  --ctw-outline: #72787d;
  --ctw-outline-variant: #c1c7cd;
  --ctw-error: #ba1a1a;
  --ctw-error-container: #ffdad6;
  --ctw-on-error-container: #93000a;
  --ctw-rating: #f59e0b;

  /* Radius — theme.ts Radius */
  --ctw-r-sm: 4px;
  --ctw-r-base: 8px;
  --ctw-r-md: 12px;
  --ctw-r-lg: 16px;
  --ctw-r-xl: 24px;

  /* ── Bootstrap remap ── */
  --bs-primary: var(--ctw-primary);
  --bs-primary-rgb: 0, 42, 62;
  --bs-secondary: var(--ctw-secondary);
  --bs-secondary-rgb: 157, 62, 83;
  --bs-success: var(--ctw-tertiary-container);
  --bs-warning: var(--ctw-rating);
  --bs-danger: var(--ctw-error);
  --bs-body-bg: var(--ctw-background);
  --bs-body-color: var(--ctw-on-surface);
  --bs-secondary-color: var(--ctw-on-surface-variant);
  --bs-border-color: var(--ctw-outline-variant);
  --bs-tertiary-bg: var(--ctw-surface-low);
  --bs-link-color: var(--ctw-secondary);
  --bs-link-hover-color: #7e2f42;
  --bs-link-color-rgb: 157, 62, 83;
  --bs-primary-bg-subtle: #e3eef5;
  --bs-border-radius: var(--ctw-r-md);
  --bs-border-radius-lg: var(--ctw-r-lg);
  --bs-border-radius-xl: var(--ctw-r-xl);
  --bs-font-sans-serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-heading-color: var(--ctw-primary);
}

body { font-family: var(--bs-font-sans-serif); letter-spacing: -0.01em; }

/* Buttons — flatter, larger radius, app-matching fills */
.btn { --bs-btn-border-radius: var(--ctw-r-md); font-weight: 600; }
.btn-primary {
  --bs-btn-bg: var(--ctw-primary); --bs-btn-border-color: var(--ctw-primary);
  --bs-btn-hover-bg: #10415a; --bs-btn-hover-border-color: #10415a;
  --bs-btn-active-bg: #001e2c; --bs-btn-active-border-color: #001e2c;
  --bs-btn-disabled-bg: var(--ctw-primary); --bs-btn-disabled-border-color: var(--ctw-primary);
}
/* Secondary = Protea Pink (mobile CTA/FAB colour), not Bootstrap grey */
.btn-secondary {
  --bs-btn-bg: var(--ctw-secondary); --bs-btn-border-color: var(--ctw-secondary);
  --bs-btn-hover-bg: #b04a60; --bs-btn-hover-border-color: #b04a60;
  --bs-btn-active-bg: #7e2f42; --bs-btn-active-border-color: #7e2f42;
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
}
.btn-outline-secondary {
  --bs-btn-color: var(--ctw-on-surface-variant);
  --bs-btn-border-color: var(--ctw-outline-variant);
  --bs-btn-hover-bg: var(--ctw-surface-high);
  --bs-btn-hover-border-color: var(--ctw-outline);
  --bs-btn-hover-color: var(--ctw-primary);
}
.btn-success {
  --bs-btn-bg: var(--ctw-tertiary-container); --bs-btn-border-color: var(--ctw-tertiary-container);
  --bs-btn-hover-bg: var(--ctw-tertiary); --bs-btn-hover-border-color: var(--ctw-tertiary);
}

/* Focus ring — ocean blue, replaces bootstrap default blue */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--ctw-primary-container);
  box-shadow: 0 0 0 0.2rem rgba(16, 65, 90, 0.25);
}

/* Cards — mobile "rounded-[28px] + hairline outline + white surface" */
.card {
  --bs-card-bg: var(--ctw-surface-lowest);
  --bs-card-border-color: var(--ctw-outline-variant);
  --bs-card-border-radius: var(--ctw-r-xl);
  --bs-card-inner-border-radius: var(--ctw-r-xl);
  --bs-card-spacer-x: 1.25rem;
  --bs-card-spacer-y: 1.25rem;
  box-shadow: 0 1px 2px rgba(0, 42, 62, 0.04);
}

/* Status pills — the ONLY status colour source. Tones mirror theme.ts STATUS_STYLE.
   Use Ui.Status(status).Css from Helpers/Ui.cs; never hand-pick a bg-* class. */
.pill {
  display: inline-block;
  border-radius: 50rem;
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.pill-positive  { background: var(--ctw-tertiary-container);  color: var(--ctw-on-tertiary-container); }
.pill-attention { background: var(--ctw-secondary-container); color: var(--ctw-on-secondary-container); }
.pill-negative  { background: var(--ctw-error-container);     color: var(--ctw-on-error-container); }
.pill-neutral   { background: var(--ctw-surface-high);        color: var(--ctw-on-surface-variant); }
.pill-info      { background: var(--bs-primary-bg-subtle);    color: var(--ctw-primary); }

/* Any stray Bootstrap badge still in the tree resolves to a theme colour. */
.badge { border-radius: 50rem; font-weight: 700; letter-spacing: 0.02em; }
.badge.bg-info    { background: var(--bs-primary-bg-subtle) !important;   color: var(--ctw-primary) !important; }
.badge.bg-warning { background: var(--ctw-secondary-container) !important; color: var(--ctw-on-secondary-container) !important; }
.badge.bg-success { background: var(--ctw-tertiary-container) !important; color: var(--ctw-on-tertiary-container) !important; }
.badge.bg-danger  { background: var(--ctw-error-container) !important;    color: var(--ctw-on-error-container) !important; }
.badge.bg-secondary { background: var(--ctw-surface-high) !important;     color: var(--ctw-on-surface-variant) !important; }
.badge.bg-light   { background: var(--ctw-surface-low) !important;        color: var(--ctw-on-surface-variant) !important; border-color: var(--ctw-outline-variant) !important; }

/* Page header — same shape on every screen: title, optional sub, right-aligned action */
.page-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.page-head h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ctw-primary);
  margin: 0;
  letter-spacing: -0.02em;
}
.page-head .page-sub {
  font-size: 0.875rem;
  color: var(--ctw-on-surface-variant);
  margin: 0.15rem 0 0;
}
.page-head .page-actions { margin-left: auto; display: flex; gap: 0.5rem; }
.page-head i.bi { color: var(--ctw-secondary); }

/* Section heading inside a card — replaces the h5/h6 text-muted mix */
.section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ctw-primary);
  margin: 0 0 1rem;
}

/* Empty state — one shape everywhere, instead of a bare <p class="text-muted"> */
.ctw-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--ctw-on-surface-variant);
}
.ctw-empty i.bi {
  font-size: 1.75rem;
  color: var(--ctw-outline-variant);
  display: block;
  margin-bottom: 0.75rem;
}
.ctw-empty .empty-title {
  font-weight: 600;
  color: var(--ctw-on-surface);
  margin-bottom: 0.25rem;
}
.ctw-empty .empty-hint { font-size: 0.875rem; margin: 0; }

/* Stars — shared rating rendering */
.stars { white-space: nowrap; letter-spacing: 0.05em; }
.stars .star-on  { color: var(--ctw-rating); }
.stars .star-off { color: var(--ctw-outline-variant); }

/* Nav pills — tabs on Bookings */
.nav-pills {
  --bs-nav-pills-border-radius: 50rem;
  --bs-nav-pills-link-active-bg: var(--ctw-primary);
  --bs-nav-pills-link-active-color: var(--ctw-on-primary);
}
.nav-pills .nav-link { color: var(--ctw-on-surface-variant); font-weight: 600; font-size: 0.9rem; }
.nav-pills .nav-link:hover:not(.active) { background: var(--ctw-surface-high); color: var(--ctw-primary); }

/* Alerts — soften to theme containers */
.alert-warning { --bs-alert-bg: #fff3e6; --bs-alert-border-color: #ffd9b0; --bs-alert-color: #7a4a10; }
.alert-light   { --bs-alert-bg: var(--ctw-surface-low); --bs-alert-border-color: var(--ctw-outline-variant); --bs-alert-color: var(--ctw-on-surface-variant); }

/* Tables */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--ctw-surface-low); --bs-table-border-color: var(--ctw-outline-variant); }
.table > thead th {
  color: var(--ctw-on-surface-variant); font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; border-bottom-color: var(--ctw-outline-variant);
}

/* Forms */
.form-control, .form-select {
  background: var(--ctw-surface-lowest);
  border-color: var(--ctw-outline-variant);
  border-radius: var(--ctw-r-md);
}
.form-label { font-size: 0.875rem; font-weight: 600; color: var(--ctw-on-surface-variant); }

/* Stars */
.text-warning, .ctw-star { color: var(--ctw-rating) !important; }

/* Dashboard stat numbers — tone down Bootstrap's oversized .display-6 */
.display-6 { font-size: 2rem; font-weight: 700; color: var(--ctw-primary); letter-spacing: -0.02em; }