/* ============================================================
   theme-base.css — LAN Registration System theme component layer
   Load order: bootstrap-5.3.8.min.css → site.css → theme-base.css → themes/<theme>.css
   This file only references tokens; it never defines brand values.
   Tokens come from the per-theme file (themes/*.css):
     --brand / --brand-rgb / --brand-hover / --brand-contrast
     --sem-secondary / --sem-success / --sem-warning / --sem-danger / --sem-info
       (+ optional --sem-*-fg for readable text on bright fills)
     --pl-surface / --pl-surface-2  (raised card surfaces)
     --pl-font-head / --pl-font-body / --pl-radius / --pl-nav-bg
     --pl-btn-transform / --pl-btn-tracking / --pl-btn-weight
   Notes: uses color-mix() (all evergreen browsers since 2023).
   ============================================================ */

body {
  font-family: var(--pl-font-body, var(--bs-body-font-family));
  --bs-primary: var(--brand, #0d6efd);
  --bs-primary-rgb: var(--brand-rgb, 13, 110, 253);
  --bs-link-color: var(--brand, #0d6efd);
  --bs-link-hover-color: var(--brand-hover, #0a58ca);
  --bs-link-color-rgb: var(--brand-rgb, 13, 110, 253);
  --bs-link-hover-color-rgb: var(--brand-rgb, 13, 110, 253);
  --bs-focus-ring-color: rgba(var(--brand-rgb, 13, 110, 253), .25);
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .card-title, .modal-title { font-family: var(--pl-font-head, inherit); }

/* Site navbar (base.html uses .navbar-dark.bg-dark) */
.navbar.bg-dark {
  background-color: var(--pl-nav-bg, var(--bs-dark)) !important;
  border-bottom: var(--pl-nav-border, 0);
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--pl-radius, var(--bs-border-radius));
  text-transform: var(--pl-btn-transform, none);
  letter-spacing: var(--pl-btn-tracking, normal);
  font-weight: var(--pl-btn-weight, 400);
  font-family: var(--pl-font-head, inherit);
}
.btn-primary {
  --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-color: var(--brand-contrast, #fff); --bs-btn-hover-color: var(--brand-contrast, #fff);
  --bs-btn-active-color: var(--brand-contrast, #fff);
  --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-disabled-color: var(--brand-contrast, #fff);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand);
  --bs-btn-hover-color: var(--brand-contrast, #fff);
  --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand);
  --bs-btn-active-color: var(--brand-contrast, #fff);
}
.btn-secondary {
  --bs-btn-bg: var(--sem-secondary); --bs-btn-border-color: var(--sem-secondary);
  --bs-btn-color: var(--sem-secondary-fg, #fff); --bs-btn-hover-color: var(--sem-secondary-fg, #fff); --bs-btn-active-color: var(--sem-secondary-fg, #fff);
  --bs-btn-hover-bg: color-mix(in srgb, var(--sem-secondary) 82%, var(--bs-body-color));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--sem-secondary) 82%, var(--bs-body-color));
  --bs-btn-active-bg: color-mix(in srgb, var(--sem-secondary) 75%, var(--bs-body-color));
  --bs-btn-active-border-color: color-mix(in srgb, var(--sem-secondary) 75%, var(--bs-body-color));
}
.btn-success {
  --bs-btn-bg: var(--sem-success); --bs-btn-border-color: var(--sem-success);
  --bs-btn-color: var(--sem-success-fg, #fff); --bs-btn-hover-color: var(--sem-success-fg, #fff); --bs-btn-active-color: var(--sem-success-fg, #fff);
  --bs-btn-hover-bg: color-mix(in srgb, var(--sem-success) 82%, var(--bs-body-color));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--sem-success) 82%, var(--bs-body-color));
  --bs-btn-active-bg: color-mix(in srgb, var(--sem-success) 75%, var(--bs-body-color));
  --bs-btn-active-border-color: color-mix(in srgb, var(--sem-success) 75%, var(--bs-body-color));
}
.btn-danger {
  --bs-btn-bg: var(--sem-danger); --bs-btn-border-color: var(--sem-danger);
  --bs-btn-color: var(--sem-danger-fg, #fff); --bs-btn-hover-color: var(--sem-danger-fg, #fff); --bs-btn-active-color: var(--sem-danger-fg, #fff);
  --bs-btn-hover-bg: color-mix(in srgb, var(--sem-danger) 82%, var(--bs-body-color));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--sem-danger) 82%, var(--bs-body-color));
  --bs-btn-active-bg: color-mix(in srgb, var(--sem-danger) 75%, var(--bs-body-color));
  --bs-btn-active-border-color: color-mix(in srgb, var(--sem-danger) 75%, var(--bs-body-color));
}
.btn-warning {
  --bs-btn-bg: var(--sem-warning); --bs-btn-border-color: var(--sem-warning);
  --bs-btn-color: var(--sem-warning-fg, #fff); --bs-btn-hover-color: var(--sem-warning-fg, #fff); --bs-btn-active-color: var(--sem-warning-fg, #fff);
  --bs-btn-hover-bg: color-mix(in srgb, var(--sem-warning) 82%, var(--bs-body-color));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--sem-warning) 82%, var(--bs-body-color));
  --bs-btn-active-bg: color-mix(in srgb, var(--sem-warning) 75%, var(--bs-body-color));
  --bs-btn-active-border-color: color-mix(in srgb, var(--sem-warning) 75%, var(--bs-body-color));
}

/* ---------- Badges ---------- */
.text-bg-primary { background-color: var(--brand) !important; color: var(--brand-contrast, #fff) !important; }
.text-bg-secondary { background-color: var(--sem-secondary) !important; color: var(--sem-secondary-fg, #fff) !important; }
.text-bg-success { background-color: var(--sem-success) !important; color: var(--sem-success-fg, #fff) !important; }
.text-bg-danger { background-color: var(--sem-danger) !important; color: var(--sem-danger-fg, #fff) !important; }
.text-bg-warning { background-color: var(--sem-warning) !important; color: var(--sem-warning-fg, #fff) !important; }
.text-bg-info { background-color: var(--sem-info) !important; color: var(--sem-info-fg, #fff) !important; }
.badge.text-bg-light { background-color: var(--bs-tertiary-bg) !important; color: var(--bs-body-color) !important; }

/* ---------- Alerts (tinted against the theme's own surfaces) ---------- */
.alert { border-radius: var(--pl-radius, var(--bs-border-radius)); }
.alert-secondary { background-color: color-mix(in srgb, var(--sem-secondary) 12%, var(--bs-body-bg)); border-color: color-mix(in srgb, var(--sem-secondary) 38%, var(--bs-body-bg)); color: color-mix(in srgb, var(--sem-secondary) 45%, var(--bs-body-color)); }
.alert-success { background-color: color-mix(in srgb, var(--sem-success) 12%, var(--bs-body-bg)); border-color: color-mix(in srgb, var(--sem-success) 38%, var(--bs-body-bg)); color: color-mix(in srgb, var(--sem-success) 55%, var(--bs-body-color)); }
.alert-danger { background-color: color-mix(in srgb, var(--sem-danger) 12%, var(--bs-body-bg)); border-color: color-mix(in srgb, var(--sem-danger) 38%, var(--bs-body-bg)); color: color-mix(in srgb, var(--sem-danger) 55%, var(--bs-body-color)); }
.alert-warning { background-color: color-mix(in srgb, var(--sem-warning) 14%, var(--bs-body-bg)); border-color: color-mix(in srgb, var(--sem-warning) 42%, var(--bs-body-bg)); color: color-mix(in srgb, var(--sem-warning) 58%, var(--bs-body-color)); }
.alert-info { background-color: color-mix(in srgb, var(--sem-info) 12%, var(--bs-body-bg)); border-color: color-mix(in srgb, var(--sem-info) 38%, var(--bs-body-bg)); color: color-mix(in srgb, var(--sem-info) 55%, var(--bs-body-color)); }

/* ---------- Forms ---------- */
.form-label { font-family: var(--pl-font-head, inherit); font-weight: 600; }
.form-control, .form-select, .input-group-text, .dropdown-menu, .card, .modal-content { border-radius: var(--pl-radius, var(--bs-border-radius)); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25);
}

/* ---------- Nav / pagination / misc ---------- */
.nav { --bs-nav-link-color: var(--brand); --bs-nav-link-hover-color: var(--brand-hover); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--brand); --bs-nav-pills-link-active-color: var(--brand-contrast, #fff); }
.pagination {
  --bs-pagination-color: var(--brand); --bs-pagination-hover-color: var(--brand-hover);
  --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand);
  --bs-pagination-active-color: var(--brand-contrast, #fff);
  --bs-pagination-focus-color: var(--brand-hover);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25);
}
.progress-bar { background-color: var(--brand); color: var(--brand-contrast, #fff); }
.list-group-item.active { background-color: var(--brand); border-color: var(--brand); color: var(--brand-contrast, #fff); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--brand); --bs-dropdown-link-active-color: var(--brand-contrast, #fff); }
.spinner-border.text-primary { color: var(--brand) !important; }
.table th { font-family: var(--pl-font-head, inherit); }

/* ---------- Raised surfaces (cards etc. sit one step above the page) ---------- */
.card { --bs-card-bg: var(--pl-surface, var(--bs-body-bg)); --bs-card-cap-bg: var(--pl-surface-2, var(--bs-tertiary-bg)); }
.modal { --bs-modal-bg: var(--pl-surface, var(--bs-body-bg)); }
.list-group { --bs-list-group-bg: var(--pl-surface, var(--bs-body-bg)); }
.dropdown-menu { --bs-dropdown-bg: var(--pl-surface, var(--bs-body-bg)); }
.table { --bs-table-bg: var(--pl-surface, var(--bs-body-bg)); }
.content-block { background: var(--pl-surface, #fff); }

/* ---------- Seating chart states (replaces site.css hardcoded colors) ---------- */
.event_seating_chart .event_seat { border-color: var(--bs-border-color); }
.event_seating_chart .taken { background: var(--brand); border-color: color-mix(in srgb, var(--brand) 70%, black); color: var(--brand-contrast, #fff); }
.event_seating_chart .reserved { background: var(--sem-danger); border-color: color-mix(in srgb, var(--sem-danger) 70%, black); color: var(--sem-danger-fg, #fff); }
.event_seating_chart .pretaken { background: var(--sem-info); border-color: color-mix(in srgb, var(--sem-info) 70%, black); color: var(--sem-info-fg, #fff); }
.event_seating_chart .unavailable { background: var(--bs-secondary-bg); border-color: var(--bs-border-color); color: var(--bs-secondary-color); }
.event_seating_chart .active_seat { background: var(--sem-success) !important; color: var(--sem-success-fg, #fff); }
.event_seating_chart .broken-multiple { background: var(--sem-warning) !important; color: var(--sem-warning-fg, #fff); }