/* theme.css — mirrors mobileapp/constants/theme.ts. Keep in sync with the
   matching file in businessportal; both apps share the CTheWay palette, per the CI Digital Manual p.12 Colour System. */
:root {
  /* Primary — Deep Ocean Blue (CI 60%) */
  --ctw-primary: #0a4968;
  --ctw-on-primary: #ffffff;
  --ctw-on-primary-subtle: #cfe6f2;
  --ctw-primary-container: #0f5c80;
  --ctw-on-primary-container: #bcd6e4;
  --ctw-primary-fixed: #cfe6f2;
  --ctw-inverse-primary: #a9cfe1;

  /* Secondary — Atlantic Teal (CI 20%) */
  --ctw-secondary: #1e7c82;
  --ctw-on-secondary: #ffffff;
  --ctw-secondary-container: #8fc9cc;
  --ctw-on-secondary-container: #0f4448;

  /* Tertiary — Cape Sunset Coral (CI 10%) */
  --ctw-tertiary: #a34141;
  --ctw-tertiary-container: #e67a7a;
  --ctw-on-tertiary-container: #2a1414;

  /* Surfaces — Sandstone (CI 10%) */
  --ctw-background: #f5f2ec;
  --ctw-surface-lowest: #ffffff;
  --ctw-surface-low: #faf8f3;
  --ctw-surface: #f1ede4;
  --ctw-surface-high: #ebe6db;
  --ctw-surface-highest: #e4ded1;
  --ctw-on-surface: #1c2126;
  --ctw-on-surface-variant: #4d565d;

  /* Utility */
  --ctw-outline: #666e75;
  --ctw-outline-variant: #cdc6b6;
  --ctw-error: #ba1a1a;
  --ctw-error-container: #ffdad6;
  --ctw-on-error-container: #93000a;
  --ctw-rating: #f59e0b;

  /* Attention amber — moderation queues only (see .queue-* below) */
  --ctw-attention: #b06d00;
  --ctw-attention-container: #ffeccc;
  --ctw-on-attention-container: #7a4a10;

  /* 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: 10, 73, 104;
  --bs-secondary: var(--ctw-secondary);
  --bs-secondary-rgb: 30, 124, 130;
  --bs-success: var(--ctw-tertiary-container);
  --bs-warning: var(--ctw-attention);
  --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: #145458;
  --bs-link-color-rgb: 30, 124, 130;
  --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 */
.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: #0f5c80; --bs-btn-hover-border-color: #0f5c80;
  --bs-btn-active-bg: #072f42; --bs-btn-active-border-color: #072f42;
  --bs-btn-disabled-bg: var(--ctw-primary); --bs-btn-disabled-border-color: var(--ctw-primary);
}
.btn-secondary {
  --bs-btn-bg: var(--ctw-secondary); --bs-btn-border-color: var(--ctw-secondary);
  --bs-btn-hover-bg: #2a9aa1; --bs-btn-hover-border-color: #2a9aa1;
  --bs-btn-active-bg: #145458; --bs-btn-active-border-color: #145458;
  --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-outline-primary {
  --bs-btn-color: var(--ctw-primary);
  --bs-btn-border-color: var(--ctw-outline-variant);
  --bs-btn-hover-bg: var(--ctw-primary);
  --bs-btn-hover-border-color: var(--ctw-primary);
  --bs-btn-hover-color: var(--ctw-on-primary);
}
/* Approve is the affirmative moderation action — green, not Bootstrap's mint */
.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);
}
.btn-outline-success {
  --bs-btn-color: var(--ctw-tertiary); --bs-btn-border-color: var(--ctw-outline-variant);
  --bs-btn-hover-bg: var(--ctw-tertiary-container); --bs-btn-hover-border-color: var(--ctw-tertiary-container);
  --bs-btn-hover-color: #fff;
}
.btn-outline-danger {
  --bs-btn-color: var(--ctw-error); --bs-btn-border-color: var(--ctw-outline-variant);
  --bs-btn-hover-bg: var(--ctw-error); --bs-btn-hover-border-color: var(--ctw-error);
}

/* Focus ring */
.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(15, 92, 128, 0.25);
}

/* Cards */
.card {
  --bs-card-bg: var(--ctw-surface-lowest);
  --bs-card-border-color: var(--ctw-outline-variant);
  --bs-card-border-radius: var(--ctw-r-lg);
  --bs-card-inner-border-radius: var(--ctw-r-lg);
  --bs-card-spacer-x: 1.25rem;
  --bs-card-spacer-y: 1.25rem;
  box-shadow: 0 1px 2px rgba(10, 73, 104, 0.04);
}

/* Status pills — the ONLY status colour source. Server side: Ui.Status() in
   Helpers/Ui.cs. Client side (DataTables renderers): Ui.pill() in site.js.
   Never hand-pick a bg-* class for a status again. */
.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); }
/* Pending is pink, matching mobile's STATUS_STYLE and the business portal —
   the amber below is for queue *severity*, which is a different signal. */
.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); }
.pill-strong    { background: var(--ctw-primary);             color: var(--ctw-on-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-attention-container) !important; color: var(--ctw-on-attention-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, .badge.text-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; }
.badge.bg-dark    { background: var(--ctw-primary) !important;             color: var(--ctw-on-primary) !important; }
.badge.bg-primary { background: var(--ctw-primary) !important;             color: var(--ctw-on-primary) !important; }

/* Page header — one shape on every screen */
.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; align-items: center; gap: 0.5rem; }
.page-head > i.bi { color: var(--ctw-secondary); }

/* "Admin" tag — the one visual cue separating this panel from the owner portal,
   which shares the same palette and shell. Used in the sidebar brand and on login. */
.brand-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ctw-on-secondary);
  background: var(--ctw-secondary);
  border-radius: 50rem;
  padding: 0.1rem 0.45rem;
  vertical-align: middle;
}

/* Section heading — replaces the h4/h5/h6 text-muted mix */
.section-title { font-size: 1rem; font-weight: 700; color: var(--ctw-primary); margin: 0 0 1rem; }
.section-label {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ctw-on-surface-variant); margin: 0 0 0.75rem;
}

/* Empty state */
.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 */
.stars { white-space: nowrap; letter-spacing: 0.05em; }
.stars .star-on  { color: var(--ctw-rating); }
.stars .star-off { color: var(--ctw-outline-variant); }

/* Queue cards — a queue only takes on colour when it has work in it.
   Replaces the ad-hoc border-warning / border-danger + text-* pairs. */
.queue-idle   { --queue-accent: var(--ctw-outline-variant); }
.queue-active { --queue-accent: var(--ctw-attention); }
.queue-urgent { --queue-accent: var(--ctw-error); }
.queue-idle, .queue-active, .queue-urgent { border-left: 3px solid var(--queue-accent); }
.queue-idle .queue-icon   { color: var(--ctw-outline-variant); }
.queue-active .queue-icon { color: var(--ctw-attention); }
.queue-urgent .queue-icon { color: var(--ctw-error); }

/* 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);
}

/* DataTables chrome — the stock widgets ship their own blue/grey */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--ctw-outline-variant);
  border-radius: var(--ctw-r-base);
  padding: 0.25rem 0.5rem;
  background: var(--ctw-surface-lowest);
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--ctw-on-surface-variant); font-size: 0.875rem; }
.page-link { --bs-pagination-color: var(--ctw-primary); --bs-pagination-hover-bg: var(--ctw-surface-high); --bs-pagination-focus-bg: var(--ctw-surface-high); }
.page-item.active .page-link { --bs-pagination-active-bg: var(--ctw-primary); --bs-pagination-active-border-color: var(--ctw-primary); }

/* 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); }

/* Alerts */
.alert-warning { --bs-alert-bg: var(--ctw-attention-container); --bs-alert-border-color: #ffd9b0; --bs-alert-color: var(--ctw-on-attention-container); }
.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); }
.alert-danger  { --bs-alert-bg: var(--ctw-error-container); --bs-alert-border-color: #f5b8b2; --bs-alert-color: var(--ctw-on-error-container); }

/* Offcanvas (audit log) */
.offcanvas { --bs-offcanvas-bg: var(--ctw-background); }
.offcanvas-header { background: var(--ctw-surface-lowest); }

/* Stat numbers — Bootstrap's .display-6 is oversized for a dense grid */
.display-6 { font-size: 2rem; font-weight: 700; color: var(--ctw-primary); letter-spacing: -0.02em; }