/**
 * RNZPBA Pipe Band System — design tokens and layout primitives.
 * Bootstrap 5 remains the component layer; this file themes it consistently.
 */

:root {
  /* Primary brand */
  --rnzpba-black-sand: #323e48;
  --rnzpba-pacific-teal: #57b6b2;
  --rnzpba-deep-pacific: #002554;
  --rnzpba-wild-thistle: #b980d0;
  --rnzpba-kowhai: #f5b335;
  --rnzpba-pohutukawa: #c40d3c;

  /* Semantic */
  --ds-color-body-bg: #f5f7f9;
  --ds-color-surface: #ffffff;
  --ds-color-border: #e2e8ef;
  --ds-color-heading: var(--rnzpba-black-sand);
  --ds-color-text: #2d3748;
  --ds-color-muted: #64748b;
  --ds-color-link: var(--rnzpba-pacific-teal);
  --ds-color-link-hover: #3d9e9a;

  --ds-focus-ring: 0 0 0 3px rgba(87, 182, 178, 0.35);

  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;

  --ds-radius-sm: 6px;
  --ds-radius-md: 10px;
  --ds-shadow-card: 0 2px 12px rgba(50, 62, 72, 0.06);
}

body.ds-theme,
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ds-color-text);
  background-color: var(--ds-color-body-bg);
}

.ds-page {
  padding-top: var(--ds-space-6);
  padding-bottom: var(--ds-space-8);
}

.ds-page-header .ds-display {
  color: var(--ds-color-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ds-card {
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-card);
}

.ds-card .card-header {
  background: rgba(87, 182, 178, 0.08);
  border-bottom: 1px solid var(--ds-color-border);
  font-weight: 600;
  color: var(--ds-color-heading);
}

/* Navbar — RNZPBA primary palette */
.navbar.ds-navbar,
.navbar.rnzpba-navbar {
  background-color: var(--rnzpba-black-sand) !important;
}

.navbar.ds-navbar .nav-link,
.navbar.ds-navbar .navbar-brand,
.navbar.rnzpba-navbar .nav-link,
.navbar.rnzpba-navbar .navbar-brand {
  color: #fff !important;
}

.navbar.ds-navbar .nav-link:hover,
.navbar.ds-navbar .nav-link:focus,
.navbar.ds-navbar .nav-link.active,
.navbar.rnzpba-navbar .nav-link:hover,
.navbar.rnzpba-navbar .nav-link:focus,
.navbar.rnzpba-navbar .nav-link.active {
  color: var(--rnzpba-pacific-teal) !important;
}

/* Buttons */
.btn-primary {
  background-color: var(--rnzpba-pacific-teal);
  border-color: var(--rnzpba-pacific-teal);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ds-color-link-hover);
  border-color: var(--ds-color-link-hover);
}

.btn-outline-primary {
  color: var(--rnzpba-deep-pacific);
  border-color: var(--rnzpba-pacific-teal);
}
.btn-outline-primary:hover {
  background-color: var(--rnzpba-pacific-teal);
  border-color: var(--rnzpba-pacific-teal);
}

/* Tables */
.ds-table-wrap {
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-color-border);
  overflow: hidden;
}

.ds-table-wrap .table {
  margin-bottom: 0;
}

.ds-table-wrap .table thead th {
  background: rgba(50, 62, 72, 0.06);
  color: var(--ds-color-heading);
  font-weight: 600;
  font-size: 0.875rem;
  border-bottom-width: 1px;
}

/* Forms */
.ds-form-stack .mb-3:last-child {
  margin-bottom: 0 !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--rnzpba-pacific-teal);
  box-shadow: var(--ds-focus-ring);
}

a {
  color: var(--ds-color-link);
}
a:hover {
  color: var(--ds-color-link-hover);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ds-color-heading);
}

/* Alerts — keep Bootstrap classes; tighten spacing in containers */
.ds-alerts .alert:last-child {
  margin-bottom: 0;
}

/* Utilities */
.ds-dev-banner {
  background: var(--rnzpba-kowhai);
  color: var(--rnzpba-deep-pacific);
  padding: var(--ds-space-2);
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.ds-site-announcements {
  width: 100%;
}

.ds-site-banner {
  padding: var(--ds-space-3) var(--ds-space-4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ds-site-banner__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-space-3);
}

.ds-site-banner__message {
  flex: 1;
  font-weight: 500;
  line-height: 1.5;
}

.ds-site-banner__link {
  margin-left: var(--ds-space-2);
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

.ds-site-banner__details {
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

.ds-site-banner--info {
  background: #e8f4fc;
  color: var(--rnzpba-deep-pacific);
}

.ds-site-banner--info .ds-site-banner__link {
  color: var(--rnzpba-pacific-teal);
}

.ds-site-banner--warning {
  background: var(--rnzpba-kowhai);
  color: var(--rnzpba-deep-pacific);
}

.ds-site-banner--warning .ds-site-banner__link {
  color: var(--rnzpba-deep-pacific);
}

.ds-site-banner--important {
  background: #8b1e1e;
  color: #fff;
}

.ds-site-banner--important .ds-site-banner__link {
  color: #fff;
}

.ds-site-banner--important .btn-close {
  filter: invert(1);
}

/* Page hero / form header strip */
.ds-hero-header {
  background: linear-gradient(
    135deg,
    var(--rnzpba-deep-pacific) 0%,
    var(--rnzpba-pacific-teal) 100%
  );
  color: #fff;
  padding: var(--ds-space-8) var(--ds-space-6);
  border-radius: var(--ds-radius-md);
  margin-bottom: var(--ds-space-6);
  text-align: center;
}
.ds-hero-header .ds-hero-title {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0 0 var(--ds-space-2) 0;
}
.ds-hero-header .ds-hero-subtitle {
  opacity: 0.92;
  margin: 0;
  font-size: 1rem;
}