/* ── Brand colours ──────────────────────────────────────────
   Defaults (original Club green). The Admin page can replace these through
   /css/theme.css, which is generated from public/js/palette.js. */
:root {
  --brand: #2f6f4f;
  --brand-rgb: 47, 111, 79;
  --brand-hover: #285f43;
  --brand-dark: #1d4a33;
  --brand-soft: #3f7d58;
  --accent: #4a7c3f;
  --accent-rgb: 74, 124, 63;
  --tint-1: #eef0dd;
  --tint-2: #dfe3cc;
  --tint-3: #e6e8d6;
  --tint-4: #f4f5e9;
  --tint-5: #f8faf5;
  --tint-6: #ecf5ee;
  --tint-line: #b7c4a3;
}
html[data-theme="dark"] {
  --d-green: #6fae84;
  --d-green-rgb: 111, 174, 132;
  --d-green-2: #3f7d58;
  --d-topbar: #1c3b2b;
  --d-brand-line: #2f5a41;
  --d-tint-1: #1f2a24;
  --d-tint-2: #223029;
}

/* ── Reset & base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  color: #1e293b;
}

/* ── Auth page layout ───────────────────────────────────── */
body.auth-page {
  min-height: 100vh;
  background-color: var(--tint-1);          /* pale blue */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* ── Card ───────────────────────────────────────────────── */
.auth-container {
  width: 100%;
  max-width: 420px;
}

.auth-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 40px 36px;
  box-shadow: 0 4px 24px rgba(var(--brand-rgb), 0.10),
              0 1px 4px  rgba(var(--brand-rgb), 0.06);
}

/* ── Logo ───────────────────────────────────────────────── */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  justify-content: center;
}

.logo svg { width: 40px; height: 40px; }

.logo span {
  font-size: 22px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.3px;
}

/* ── Logo image ─────────────────────────────────────────── */
.logo { text-decoration: none; }

.logo-img {
  height: 42px;
  width: auto;
  display: block;
}

/* Larger, centred logo on the login card */
.logo-auth { justify-content: center; }
.logo-auth .logo-img { height: 132px; }

/* ── Tabs ───────────────────────────────────────────────── */
/* ── Auth page title ────────────────────────────────────── */
.auth-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand);
  text-align: center;
  margin-bottom: 24px;
}

.tabs {
  display: flex;
  gap: 4px;
  background: var(--tint-4);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 28px;
}

.tab {
  flex: 1;
  padding: 9px 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.tab.active {
  background: #ffffff;
  color: var(--brand);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(var(--brand-rgb), 0.12);
}

/* ── Forms ──────────────────────────────────────────────── */
.auth-form { display: flex; flex-direction: column; gap: 18px; }
.auth-form.hidden { display: none; }

.field-group { display: flex; flex-direction: column; gap: 5px; }

.field-group label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.field-group input {
  padding: 10px 13px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  color: #0f172a;
  background: #f8fafc;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field-group input:focus {
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}

.field-group input.invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10);
}

/* Password wrapper */
.password-wrap { position: relative; }
.password-wrap input { width: 100%; padding-right: 42px; }

.toggle-pw {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: #94a3b8;
  padding: 2px;
}
.toggle-pw:hover { color: #475569; }

/* Field errors */
.field-error {
  font-size: 12px;
  color: #ef4444;
  min-height: 16px;
}

/* Remember me / forgot row */
.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: -6px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
}

.link {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.link:hover { text-decoration: underline; }

/* ── Password strength ──────────────────────────────────── */
.strength-bar {
  height: 4px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
  margin-top: 4px;
}

#strength-fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  transition: width 0.3s, background 0.3s;
}

.strength-label {
  font-size: 11px;
  color: #64748b;
}

/* ── Primary button ─────────────────────────────────────── */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px;
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  margin-top: 4px;
}

.btn-primary:hover  { background: #3a6332; }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { background: var(--tint-line); cursor: not-allowed; }

/* Spinner inside button */
.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Form message (success/error feedback) ──────────────── */
.form-message {
  font-size: 13px;
  text-align: center;
  min-height: 18px;
  font-weight: 500;
}
.form-message.success { color: #16a34a; }
.form-message.error   { color: #dc2626; }

/* ── Utility ─────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Dashboard page ─────────────────────────────────────── */
body.dashboard-page {
  min-height: 100vh;
  background-color: var(--tint-4);
  display: flex;
  flex-direction: column;
}

.topbar {
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  box-shadow: 0 2px 8px rgba(var(--brand-rgb),0.18);
}

.topbar .logo { margin-bottom: 0; }
.topbar .logo span { color: #fff; }
.topbar .logo svg circle,
.topbar .logo svg path { stroke: #bcae7a; }
.topbar .logo svg circle:last-child { fill: #bcae7a; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-logout {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 7px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-logout:hover { background: rgba(255,255,255,0.22); }

.dashboard-main {
  flex: 1;
  padding: 40px 32px;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.dashboard-main h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 8px;
}

.dashboard-main p.subtitle {
  color: #64748b;
  font-size: 13px;
  margin-bottom: 32px;
}

/* ── Dashboard grids ─────────────────────────────────────── */
/* Summary cards: auto-fitting row of compact cards */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

/* Detail cards: two equal columns on desktop, stacking on narrow screens */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

/* Legacy alias (kept so other markup using .cards-grid still works) */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.dash-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px 20px;
  box-shadow: 0 2px 10px rgba(var(--brand-rgb),0.07);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-card .icon { font-size: 28px; }
.dash-card .label { font-size: 13px; color: #64748b; font-weight: 500; }
.dash-card .value { font-size: 26px; font-weight: 700; color: var(--brand); }
.dash-card .value.email-value { font-size: 15px; word-break: break-all; font-weight: 600; }

/* ── Top-bar navigation ─────────────────────────────────── */
.topbar-nav {
  display: flex;
  gap: 4px;
}

.nav-link {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 7px;
  transition: background 0.2s, color 0.2s;
}

.nav-link:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.nav-link.active {
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-weight: 600;
}

/* ── Hamburger toggle (mobile only; hidden on desktop) ──── */
.nav-toggle {
  display: none;                 /* shown via the ≤680px media query */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  cursor: pointer;
}
.nav-toggle:hover { background: rgba(255,255,255,0.22); }

/* The bars: a center bar with ::before/::after as the top & bottom bars.
   Animates into an X when the button has .open. */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top:  6px; }

.nav-toggle.open .nav-toggle-bars            { background: transparent; }
.nav-toggle.open .nav-toggle-bars::before    { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open .nav-toggle-bars::after     { transform: translateY(-6px) rotate(-45deg); }

/* ── Wide main area (club & scores pages) ───────────────── */
.dashboard-main.wide {
  max-width: 1100px;
}

/* ── Info sections ──────────────────────────────────────── */
.info-section {
  margin-bottom: 40px;
}

.info-section h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--tint-1);
}

.info-section p {
  color: #475569;
  line-height: 1.7;
  max-width: 720px;
}

/* ── Fact grid ──────────────────────────────────────────── */
.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.fact-card {
  background: #fff;
  border-radius: 12px;
  padding: 18px 16px;
  box-shadow: 0 2px 10px rgba(var(--brand-rgb),0.07);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.fact-icon  { font-size: 22px; }
.fact-label { font-size: 12px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; }
.fact-value { font-size: 14px; font-weight: 600; color: #1e293b; }

/* ── Committee grid ─────────────────────────────────────── */
.committee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

.committee-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px 16px;
  box-shadow: 0 2px 10px rgba(var(--brand-rgb),0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--tint-1);
  color: var(--brand);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.c-name { font-size: 14px; font-weight: 600; color: #1e293b; }
.c-role { font-size: 12px; color: #64748b; }

/* ── Shared table styles ────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(var(--brand-rgb),0.07);
}

.info-table,
.scores-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 14px;
}

.info-table th,
.scores-table th {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  padding: 11px 14px;
  text-align: left;
  white-space: nowrap;
}

.info-table td,
.scores-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
  white-space: nowrap;
}

.info-table tr:last-child td,
.scores-table tr:last-child td { border-bottom: none; }

.info-table tbody tr:hover,
.scores-table tbody tr:hover { background: var(--tint-4); }

/* ── Scores page extras ─────────────────────────────────── */
.score-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.score-tab {
  padding: 8px 20px;
  border: 1.5px solid #cbd5e1;
  border-radius: 99px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}

.score-tab:hover  { border-color: var(--brand); color: var(--brand); }
.score-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.score-table-wrap { margin-bottom: 8px; }
.score-table-wrap.hidden { display: none; }

.table-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.table-note { font-size: 13px; color: #64748b; }

.badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fullbore-badge  { background: var(--tint-1); color: var(--brand-soft); }
.smallbore-badge { background: #dcfce7; color: #166534; }
.airgun-badge    { background: #fef9c3; color: #854d0e; }
.pistol-badge    { background: #fce7f3; color: #9d174d; }

.avg-col   { background: #f8fafc; }
.highlight { font-weight: 700; color: var(--brand) !important; }

/* ── Detail cards (insurance & licence) ─────────────────── */
/* .detail-card sits in .detail-grid (auto-fit), so no column span needed */

.detail-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--tint-1);
}

.detail-card-header .icon  { font-size: 22px; }
.detail-card-header .label {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand);
}

.detail-rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.detail-key {
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
}

.detail-val {
  color: #1e293b;
  font-weight: 600;
  text-align: right;
}

.expiry-warn    { color: #d97706; }   /* amber — expiring soon        */
.expiry-ok      { color: #16a34a; }   /* green — still valid          */
.expiry-expired { color: #dc2626; }   /* red   — past the expiry date */

@media (max-width: 600px) {
  .detail-card { grid-column: span 1; }
}

/* ── Card top row (icon + edit button) ──────────────────── */
.card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.detail-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--tint-1);
}

/* push edit button to the far right in detail card header */
.detail-card-header .edit-btn { margin-left: auto; }

/* ── Edit button ─────────────────────────────────────────── */
.edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--tint-4);
  border: 1px solid #d2cf9f;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.edit-btn:hover {
  background: var(--tint-3);
  border-color: var(--tint-line);
}

/* ── Modal backdrop ─────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
  backdrop-filter: blur(2px);
}

.modal-backdrop.hidden { display: none !important; }

/* ── Modal box ──────────────────────────────────────────── */
.modal {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 8px 40px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  animation: modal-in 0.18s ease;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid #e2e8f0;
}

.modal-header h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand);
}

.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.modal-close:hover { background: #f1f5f9; color: #475569; }

.modal-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.modal-field label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.modal-field input {
  padding: 9px 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  color: #0f172a;
  background: #f8fafc;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-field input:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}

.modal-error {
  color: #dc2626;
  font-size: 13px;
  font-weight: 500;
  min-height: 16px;
  margin-top: 2px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid #e2e8f0;
}

/* Secondary button (cancel) */
.btn-secondary {
  padding: 9px 18px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-secondary:hover { background: #e2e8f0; }

.modal-footer .btn-primary { width: auto; margin-top: 0; }

/* ── Editable club-info content (admin) ─────────────────── */
.ci-editable {
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, box-shadow 0.15s;
}
.ci-editable:hover {
  background: var(--tint-4);
  box-shadow: 0 0 0 2px #d2cf9f;
}

.ci-editing {
  display: block;
  background: transparent !important;
  box-shadow: none !important;
}

.ci-input {
  width: 100%;
  min-width: 90px;
  padding: 6px 8px;
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  font-size: inherit;
  font-family: inherit;
  color: #0f172a;
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.14);
}

textarea.ci-input { resize: vertical; line-height: 1.6; }

/* ════════════════════════════════════════════════════════════
   Responsive — tablet & mobile
   ════════════════════════════════════════════════════════════ */

/* Tablets and small laptops */
@media (max-width: 900px) {
  .dashboard-main,
  .dashboard-main.wide {
    padding: 28px 20px;
    max-width: 100%;
  }

  .topbar { padding: 12px 20px; }
}

/* Phones and narrow screens */
@media (max-width: 680px) {

  /* ── Top bar: stack into rows, keep everything reachable ── */
  .topbar {
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 12px 16px;
  }
  .topbar .logo span { font-size: 18px; }

  /* Row 1: ☰ hamburger on the left · logo dead centre · controls on the right.
     The logo is pinned to the middle of the bar (rather than sitting in the
     flex flow) so it stays centred however wide the left/right groups are.
     The nav dropdown wraps onto its own row below. */
  .topbar         { position: relative; --tb-pad: 12px; }
  .nav-toggle     { display: flex; order: 1; }
  .topbar-right   { order: 2; margin-left: auto; }
  .topbar-nav     { order: 3; }
  .topbar .logo {
    position: absolute;
    top: var(--tb-pad);
    left: 50%;
    transform: translateX(-50%);
    height: 40px;               /* = the hamburger's height, so it centres on row 1 */
    margin: 0;
    z-index: 1;
  }
  .topbar .logo-img { height: 40px; }

  /* Nav collapses into a dropdown panel toggled by the hamburger.
     Hidden by default; shown when .open is set by page-guard.js. */
  .topbar-nav {
    order: 4;
    width: 100%;
    flex-direction: column;
    gap: 2px;
    display: none;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.18);
  }
  .topbar-nav.open { display: flex; }
  .nav-link {
    white-space: nowrap;
    padding: 11px 12px;
    border-radius: 8px;
  }

  .topbar-right { gap: 8px; }
  .btn-logout { padding: 6px 10px; font-size: 12px; }

  /* ── Content spacing ── */
  .dashboard-main,
  .dashboard-main.wide { padding: 20px 14px; }
  .dashboard-main h1 { font-size: 20px; }
  .dashboard-main p.subtitle { margin-bottom: 20px; }

  /* ── Grids collapse to a single column ── */
  .cards-grid,
  .fact-grid,
  .committee-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Detail cards (dashboard) span full width */
  .detail-card { grid-column: span 1 !important; }

  /* ── Modal fits the viewport ── */
  .modal { max-width: 100%; margin: 0 8px; }
  .modal-body { padding: 16px; }
  .modal-footer { padding: 12px 16px 16px; }

  /* ── Auth / login card ── */
  body.auth-page { padding: 16px; }
  .auth-card { padding: 28px 22px; }

  /* ── Section headings ── */
  .info-section h2 { font-size: 16px; }

  /* ── Scores: keep the table scrollable, tighten chrome ── */
  .season-tabs,
  .score-tabs { gap: 5px; }
  .season-tab,
  .score-tab { padding: 7px 14px; font-size: 12px; }
  .scores-stats { gap: 8px; }
  .scores-stat { font-size: 10px; padding: 7px 11px; }

  /* Admin table already scrolls via .admin-table-wrap; let it */
  .add-member-row input,
  .add-member-row select,
  .add-member-row .btn-primary { width: 100%; }
}

/* Very small phones */
@media (max-width: 400px) {
  .topbar .logo span { font-size: 16px; }
  .dashboard-main h1 { font-size: 18px; }
}

/* ════════════════════════════════════════════════════════════
   Landscape phones — wide but short viewports
   (e.g. a phone turned sideways: ~740×360)
   ════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {

  /* ── Login page: don't vertically centre a tall card on a short
        screen — align to top and allow scrolling so nothing is cut off ── */
  body.auth-page {
    align-items: flex-start;
    padding: 14px;
    overflow-y: auto;
  }
  .auth-container { max-width: 460px; }
  .auth-card { padding: 20px 26px; }
  .logo-auth { margin-bottom: 14px; }
  .logo-auth .logo-img { height: 72px; }   /* smaller so the form fits */
  .auth-title { margin-bottom: 14px; }
  .auth-form { gap: 12px; }

  /* ── Top bar: slim it down to reclaim vertical space ── */
  .topbar { padding: 8px 16px; --tb-pad: 8px; }
  .logo-img { height: 34px; }

  /* ── Use the extra width: keep grids multi-column (unlike portrait) ── */
  .summary-grid,
  .cards-grid,
  .fact-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  .detail-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .committee-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  /* ── Tighten page padding so more content is visible ── */
  .dashboard-main,
  .dashboard-main.wide { padding: 16px 18px; }

  /* ── Modal: cap height and scroll its body on a short screen ── */
  .modal { max-height: 92vh; display: flex; flex-direction: column; }
  .modal-body { overflow-y: auto; }
}

/* ════════════════════════════════════════════════════════════
   Theme toggle button
   ════════════════════════════════════════════════════════════ */
/* ── Theme pill switch ───────────────────────────────────
   A sliding toggle: a rounded track with a sun on the left and a moon on
   the right, and a knob that slides to the active side. Tokens below let
   the same component sit on the green top bar or the pale login page.    */
.theme-switch {
  --ts-w: 52px;
  --ts-h: 28px;
  --ts-pad: 3px;
  --ts-knob: calc(var(--ts-h) - var(--ts-pad) * 2);
  --ts-track-bg: rgba(255,255,255,0.22);
  --ts-track-border: rgba(255,255,255,0.35);
  --ts-knob-bg: #ffffff;

  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.theme-switch .ts-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: var(--ts-w);
  height: var(--ts-h);
  padding: 0 7px;
  border-radius: 99px;
  background: var(--ts-track-bg);
  border: 1px solid var(--ts-track-border);
  transition: background 0.2s, border-color 0.2s;
}

.theme-switch .ts-ico {
  font-size: 12px;
  line-height: 1;
  z-index: 1;
  opacity: 0.85;
  transition: opacity 0.2s;
}
/* Dim the icon on the side the knob is NOT covering emphasis for. */
.theme-switch:not(.is-dark) .ts-moon { opacity: 0.45; }
.theme-switch.is-dark .ts-sun        { opacity: 0.45; }

.theme-switch .ts-knob {
  position: absolute;
  top: var(--ts-pad);
  left: var(--ts-pad);
  width: var(--ts-knob);
  height: var(--ts-knob);
  border-radius: 50%;
  background: var(--ts-knob-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  transition: transform 0.22s cubic-bezier(.3,.7,.4,1);
}
.theme-switch.is-dark .ts-knob {
  transform: translateX(calc(var(--ts-w) - var(--ts-knob) - var(--ts-pad) * 2));
}

.theme-switch:hover .ts-track { background: rgba(255,255,255,0.3); }
.theme-switch:focus-visible { outline: none; }
.theme-switch:focus-visible .ts-track {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.4);
}

/* Floating variant for the login page (no top bar): tint for the pale bg. */
.theme-toggle-float {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
}
.theme-toggle-float.theme-switch {
  --ts-track-bg: rgba(var(--brand-rgb),0.14);
  --ts-track-border: rgba(var(--brand-rgb),0.3);
  --ts-knob-bg: var(--brand);
}
.theme-toggle-float.theme-switch:hover .ts-track { background: rgba(var(--brand-rgb),0.22); }
.theme-toggle-float.theme-switch:focus-visible .ts-track {
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb),0.3);
}

/* ════════════════════════════════════════════════════════════
   DARK MODE
   Activated by <html data-theme="dark"> (set by js/theme.js, which also
   applies it pre-paint so there's no flash of the light theme).

   The palette lives in one place — the --d-* design tokens below — and
   every rule in this section references those tokens rather than raw hex.
   To retune the dark theme, change a token here; do not hunt through the
   individual component rules. Brand greens stay as the accent; surfaces
   and text shift to the dark ramp.

   Token            Role
   --d-bg           page background
   --d-card         cards / panels / table surfaces
   --d-card-2       raised state / row hover
   --d-line         borders & dividers
   --d-ink          primary text
   --d-mute         secondary / muted text
   --d-green        accent green (lightened to read on dark)
   --d-green-2      deep accent green (active tabs, left borders)
   ════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --d-bg:      #14181d;
  --d-card:    #1e242b;
  --d-card-2:  #262d35;
  --d-line:    #333b44;
  --d-ink:     #e6eaee;
  --d-mute:    #9aa5b2;
  --d-green:   #6fae84;
  --d-green-2: #3f7d58;
}

/* Base surfaces */
html[data-theme="dark"] body { color: var(--d-ink); }
html[data-theme="dark"] body.dashboard-page { background-color: var(--d-bg); }
html[data-theme="dark"] body.auth-page { background-color: var(--d-bg); }

/* Cards & panels */
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .dash-card,
html[data-theme="dark"] .fact-card,
html[data-theme="dark"] .committee-card,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .scores-stat,
html[data-theme="dark"] .admin-table-wrap,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .scores-scroll,
html[data-theme="dark"] .modal {
  background: var(--d-card) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

/* Headings & brand text → lighter green so it reads on dark */
html[data-theme="dark"] .dashboard-main h1,
html[data-theme="dark"] .info-section h2,
html[data-theme="dark"] .auth-title,
html[data-theme="dark"] .logo span,
html[data-theme="dark"] .dash-card .value,
html[data-theme="dark"] .fact-value,
html[data-theme="dark"] .c-name,
html[data-theme="dark"] .scores-stat strong,
html[data-theme="dark"] .highlight { color: var(--d-green) !important; }

/* Muted / secondary text */
html[data-theme="dark"] .dashboard-main p.subtitle,
html[data-theme="dark"] .dash-card .label,
html[data-theme="dark"] .fact-label,
html[data-theme="dark"] .c-role,
html[data-theme="dark"] .detail-key,
html[data-theme="dark"] .scores-stat,
html[data-theme="dark"] .checkbox-label,
html[data-theme="dark"] .table-note,
html[data-theme="dark"] .strength-label { color: var(--d-mute) !important; }

/* General value text */
html[data-theme="dark"] .detail-val,
html[data-theme="dark"] .info-section p { color: var(--d-ink) !important; }

/* Inputs */
html[data-theme="dark"] .field-group input,
html[data-theme="dark"] .modal-field input,
html[data-theme="dark"] .admin-toolbar input[type="search"],
html[data-theme="dark"] .add-member-row input,
html[data-theme="dark"] .admin-select,
html[data-theme="dark"] .ci-input {
  background: #11161b;
  border-color: var(--d-line);
  color: var(--d-ink);
}
html[data-theme="dark"] .field-group input::placeholder,
html[data-theme="dark"] .modal-field input::placeholder { color: #6b7684; }

/* Field labels */
html[data-theme="dark"] .field-group label,
html[data-theme="dark"] .modal-field label { color: #c3cbd3; }

/* Borders that used the pale khaki tint */
html[data-theme="dark"] .info-section h2,
html[data-theme="dark"] .detail-card-header { border-color: var(--d-line) !important; }

/* Top bar: a touch darker than default green */
html[data-theme="dark"] .topbar { background: var(--d-topbar); }

/* Tabs / pill backgrounds */
html[data-theme="dark"] .tabs { background: #11161b; }
html[data-theme="dark"] .score-tab,
html[data-theme="dark"] .season-tab {
  background: var(--d-card);
  border-color: var(--d-line);
  color: var(--d-mute);
}
html[data-theme="dark"] .score-tab.active,
html[data-theme="dark"] .season-tab.active {
  background: var(--d-green-2);
  border-color: var(--d-green-2);
  color: #fff;
}

/* Tables (shared + scores) */
html[data-theme="dark"] .info-table,
html[data-theme="dark"] .scores-table,
html[data-theme="dark"] #scores-tbl,
html[data-theme="dark"] table.admin-table { background: var(--d-card); }

html[data-theme="dark"] .info-table td,
html[data-theme="dark"] .scores-table td,
html[data-theme="dark"] #scores-tbl tbody td,
html[data-theme="dark"] table.admin-table td {
  color: var(--d-ink);
  border-color: var(--d-line);
}

html[data-theme="dark"] .info-table tbody tr:hover,
html[data-theme="dark"] .scores-table tbody tr:hover,
html[data-theme="dark"] table.admin-table tbody tr:hover,
html[data-theme="dark"] #scores-tbl tbody tr:hover td { background: var(--d-card-2) !important; }

/* Sticky name column + its hover need an opaque dark bg */
html[data-theme="dark"] #scores-tbl tbody td.sc-name { background: var(--d-card); color: var(--d-ink); }
html[data-theme="dark"] #scores-tbl tbody tr:hover td.sc-name { background: var(--d-card-2); }

/* Scores Att/Avg + editable-cell surfaces */
html[data-theme="dark"] #scores-tbl tbody td.sc-att { background: #20303a; color: #a7d0ff; }
html[data-theme="dark"] #scores-tbl tbody td.sc-avg { background: #1f3a2b; color: var(--d-green); }
html[data-theme="dark"] #scores-tbl tbody td.sc-score  { color: var(--d-ink); }
html[data-theme="dark"] #scores-tbl tbody td.sc-empty  { color: var(--d-mute); }
html[data-theme="dark"] #scores-tbl tbody td.sc-modified { background: var(--d-card) !important; }
html[data-theme="dark"] #scores-tbl tbody td.sc-high { background: #1f4a2e !important; color: #7ee29a !important; }

/* Edit buttons */
html[data-theme="dark"] .edit-btn,
html[data-theme="dark"] .admin-btn {
  background: var(--d-tint-2);
  border-color: var(--d-line);
  color: var(--d-green);
}
html[data-theme="dark"] .edit-btn:hover,
html[data-theme="dark"] .admin-btn:hover { background: var(--d-tint-2); }

/* Secondary modal button */
html[data-theme="dark"] .btn-secondary {
  background: #262d35;
  border-color: var(--d-line);
  color: var(--d-ink);
}

/* Modal chrome */
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--d-line); }
html[data-theme="dark"] .modal-close:hover { background: #2a3139; color: var(--d-ink); }

/* Admin note & editable-info hover */
html[data-theme="dark"] .admin-note {
  background: var(--d-tint-1); border-color: var(--d-brand-line); color: var(--d-green);
}
html[data-theme="dark"] .ci-editable:hover { background: var(--d-tint-1); box-shadow: 0 0 0 2px var(--d-brand-line); }

/* Keep the floating login switch readable on dark */
html[data-theme="dark"] .theme-toggle-float.theme-switch {
  --ts-track-bg: rgba(var(--d-green-rgb),0.18);
  --ts-track-border: rgba(var(--d-green-rgb),0.4);
  --ts-knob-bg: var(--d-green);
}
html[data-theme="dark"] .theme-toggle-float.theme-switch:hover .ts-track {
  background: rgba(var(--d-green-rgb),0.28);
}

/* Scores: no-shoot / lost cells that had light inline backgrounds */
html[data-theme="dark"] #scores-tbl tbody td.sc-noshoot { background: #20262d; color: #5c6670; }
html[data-theme="dark"] #scores-tbl tbody td.sc-lost    { background: #3a3320; color: #d9c77a; }

/* Admin role pills on dark */
html[data-theme="dark"] .role-member { background: #1f3a2b; color: #7ee29a; }
html[data-theme="dark"] .role-admin  { background: #3a2230; color: #f0a9c9; }

/* Scores-empty note text */
html[data-theme="dark"] .scores-empty-note { color: var(--d-mute); background: var(--d-card); }

/* ── Calendar: dark mode ─────────────────────────────────── */
html[data-theme="dark"] .cal-grid { background: var(--d-line); border-color: var(--d-line); }
html[data-theme="dark"] .cal-cell { background: var(--d-card); }
html[data-theme="dark"] .cal-cell.other-month { background: #191f25; }
html[data-theme="dark"] .cal-cell.clickable:hover { background: var(--d-card-2); }
html[data-theme="dark"] .cal-daynum { color: var(--d-mute); }
html[data-theme="dark"] .cal-dow { background: var(--d-topbar); }
html[data-theme="dark"] .cal-event { background: var(--d-tint-2); border-left-color: var(--d-green); color: var(--d-ink); }
html[data-theme="dark"] .cal-event.editable:hover { background: var(--d-tint-2); }
html[data-theme="dark"] .cal-event .cal-event-time { color: var(--d-green); }
html[data-theme="dark"] .cal-nav button,
html[data-theme="dark"] .cal-today-btn {
  background: var(--d-card); border-color: var(--d-line); color: var(--d-ink);
}
html[data-theme="dark"] .cal-title,
html[data-theme="dark"] .cal-upcoming h2 { color: var(--d-green); }
html[data-theme="dark"] .cal-up-item { background: var(--d-card); box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
html[data-theme="dark"] .cal-up-date { color: var(--d-green); }
html[data-theme="dark"] .cal-up-title { color: var(--d-ink); }
html[data-theme="dark"] .cal-up-time { color: var(--d-mute); }

/* ── Dashboard: upcoming events card ─────────────────────── */

.dash-events .detail-card-header .events-link {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-soft);
  text-decoration: none;
  white-space: nowrap;
}
.dash-events .detail-card-header .events-link:hover { text-decoration: underline; }

.dash-event-row {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--tint-1);
}
.dash-event-row:last-child { border-bottom: none; }

.dash-event-date {
  font-weight: 700;
  color: var(--brand-soft);
  min-width: 92px;
  font-size: 13px;
}
.dash-event-title { color: #1e293b; font-size: 14px; }
.dash-event-time { color: #64748b; font-size: 12px; margin-left: 8px; }
.dash-events-empty { color: #94a3b8; font-size: 13px; }

/* Dark mode */
html[data-theme="dark"] .dash-event-row { border-bottom-color: var(--d-line); }
html[data-theme="dark"] .dash-event-date { color: var(--d-green); }
html[data-theme="dark"] .dash-event-title { color: var(--d-ink); }
html[data-theme="dark"] .dash-event-time,
html[data-theme="dark"] .dash-events-empty { color: var(--d-mute); }
html[data-theme="dark"] .dash-events .events-link { color: var(--d-green); }


/* ════════════════════════════════════════════════════════════
   Mobile polish — small-screen fixes layered on top of the
   responsive rules above. Kept at the end so these win on
   specificity ties.
   ════════════════════════════════════════════════════════════ */

/* Stop iOS/Android from auto-inflating text, and never let the page
   scroll sideways (only designated scroll containers may). */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body { overflow-x: hidden; }

/* Media never forces the layout wider than the screen. */
img, svg { max-width: 100%; height: auto; }
.logo-img { height: 42px; width: auto; }          /* keep the fixed logo height */
.logo-auth .logo-img { height: 132px; }

@media (max-width: 680px) {

  /* iOS Safari zooms the whole page when you focus an input whose text
     is < 16px. Bump every form control to 16px on phones so tapping a
     field never triggers that jarring zoom. */
  input, select, textarea,
  .field-group input,
  .modal-field input,
  .admin-toolbar input[type="search"],
  .add-member-row input,
  .add-member-row select,
  .admin-select,
  .rec-search,
  .admin-search {
    font-size: 16px !important;
  }

  /* Comfortable touch targets (~44px) for the things you tap most. */
  .btn-primary,
  .btn-secondary,
  .btn-logout,
  .theme-toggle,
  .edit-btn,
  .nav-link,
  .score-tab,
  .season-tab,
  .admin-tab,
  .rec-tab {
    min-height: 40px;
  }

  /* My Account / detail cards: let long values (email, emergency
     contact, licence numbers) wrap under their label instead of
     overflowing the right edge. */
  .detail-row {
    flex-direction: row;       /* same label-left / value-right layout as desktop */
    align-items: baseline;
    gap: 12px;
  }
  .detail-val {
    text-align: right;
    min-width: 0;
    max-width: 65%;
    word-break: break-word;
  }
  .detail-key { white-space: normal; flex: 0 0 auto; }

  /* Summary grid (account + events) stacks to one column. */
  .summary-grid { grid-template-columns: 1fr; gap: 14px; }

  /* Detail grid (insurance + licence) stacks to one column. */
  .detail-grid { grid-template-columns: 1fr; gap: 14px; }

  /* Card header: edit buttons can wrap under the title on tiny screens. */
  .detail-card-header { flex-wrap: wrap; gap: 6px 8px; }
  .detail-card-header .label { flex: 1 1 auto; }

  /* Horizontal-scroll hint: give scrollable tables a touch-friendly
     momentum scroll and a slim scrollbar instead of none. */
  .table-wrap,
  .admin-table-wrap,
  .rec-table-wrap,
  .scores-scroll {
    -webkit-overflow-scrolling: touch;
  }

  /* Calendar event text can shrink a touch so day cells stay usable. */
  .dash-event-row { flex-wrap: wrap; gap: 4px 12px; }
  .dash-event-date { min-width: 0; }

  /* Modal footer buttons go full width and stack for easy thumbing. */
  .modal-footer {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .modal-footer .btn-primary,
  .modal-footer .btn-secondary {
    width: 100%;
  }
}

/* Landscape phones keep side-by-side modal buttons (there's width). */
@media (orientation: landscape) and (max-height: 500px) {
  .modal-footer { flex-direction: row; }
  .modal-footer .btn-primary,
  .modal-footer .btn-secondary { width: auto; }
}

/* ── Trophies card (Club Info) ───────────────────────────── */
.trophy-card { max-width: 520px; }
.trophy-card .detail-val { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.trophy-winner { font-weight: 700; color: var(--brand); }
.trophy-sub    { font-size: 12px; font-weight: 500; color: #64748b; }

html[data-theme="dark"] .trophy-winner { color: var(--d-green) !important; }
html[data-theme="dark"] .trophy-sub    { color: var(--d-mute) !important; }

@media (max-width: 680px) {
  .trophy-card .detail-val { align-items: flex-end; }
}

/* ── Dashboard: Shoot Statistics card ────────────────────── */
.stats-card .events-link {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-soft);
  text-decoration: none;
  white-space: nowrap;
}
.stats-card .events-link:hover { text-decoration: underline; }
/* Two links stacked in the card header, right-aligned. */
.card-links {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.card-links .events-link { margin-left: 0; }
/* Each value is a main line with a smaller line beneath it (name+score / date, etc.) */
.stats-card .detail-val { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.stats-card .detail-row { align-items: flex-start; }

html[data-theme="dark"] .stats-card .events-link { color: var(--d-green); }

@media (max-width: 680px) {
  .stats-card .detail-val { align-items: flex-start; }
}

/* Very narrow phones (≤360px): tighten the right-hand controls and shrink the
   centred logo so the three groups in the top bar never touch. */
@media (max-width: 360px) {
  .topbar { padding-left: 10px; padding-right: 10px; }
  .topbar-right { gap: 6px; }
  .btn-logout { padding: 6px 8px; }
  .topbar .logo, .topbar .logo-img { height: 32px; }
  .topbar .logo { top: calc(var(--tb-pad) + 4px); }
}

/* Smallest phones (≤340px, e.g. iPhone SE 1st gen): a little more room around the logo. */
@media (max-width: 340px) {
  .topbar .logo, .topbar .logo-img { height: 28px; }
  .topbar .logo { top: calc(var(--tb-pad) + 6px); }
}

/* ── Card header actions: buttons stacked, so they stay inside narrow cards ── */
.card-actions {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;      /* both buttons the same width */
  gap: 6px;
  flex-shrink: 0;
}
.card-actions .edit-btn { margin-left: 0; justify-content: center; }

/* ── Scores: "last shoot" results view ───────────────────── */
#last-shoot .table-wrap { max-width: 560px; }   /* card hugs the table instead of stretching past it */
.last-shoot-tbl { width: 100%; }
.last-shoot-tbl .ls-pos   { width: 56px; text-align: center; }
.last-shoot-tbl .ls-score { width: 80px; text-align: right; font-variant-numeric: tabular-nums; }
.last-shoot-tbl td.ls-pos   { color: #64748b; }
.last-shoot-tbl td.ls-score { font-weight: 700; }
.last-shoot-tbl tr.ls-top td { color: #15803d; font-weight: 700; background: #dcfce7; }
.last-shoot-tbl tr.ls-top td.ls-pos { color: #15803d; }
.last-shoot-tbl tr.ls-me td.ls-name { text-decoration: underline; text-underline-offset: 3px; }
.last-shoot-back { margin-top: 14px; }

html[data-theme="dark"] .last-shoot-tbl td.ls-pos { color: var(--d-mute); }
html[data-theme="dark"] .last-shoot-tbl tr.ls-top td { background: #1f4a2e !important; color: #7ee29a !important; }

/* ── Dashboard: Last Shoot card ──────────────────────────── */
.last-date { margin-left: auto; font-size: 12px; color: #64748b; white-space: nowrap; }
.high-gun-row .detail-key,
.high-gun-row .trophy-winner { color: #15803d; font-weight: 700; }
.last-list { margin-top: 4px; }
.last-list .detail-row { align-items: center; }
.last-list .detail-val { font-weight: 700; }
.last-list .last-me .detail-key { text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="dark"] .last-date { color: var(--d-mute); }
html[data-theme="dark"] .high-gun-row .detail-key,
html[data-theme="dark"] .high-gun-row .trophy-winner { color: #7ee29a; }

/* ── Shoot Statistics: best 10 list ──────────────────────── */
.stat-subhead { margin: 14px 0 4px; font-size: 13px; font-weight: 700; color: var(--brand-soft); }
.best-list .detail-row { align-items: center; }
.best-list .detail-val { font-weight: 700; align-items: flex-end; }
html[data-theme="dark"] .stat-subhead { color: var(--d-green); }

/* ── Shoot Statistics + Last Shoot: same layout on desktop and mobile ──
   Label on the left, value on the right, on every screen size (the generic
   mobile rule that stacks label over value is overridden for these cards). */
.stats-card .detail-row {
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.stats-card .detail-key { flex: 1 1 auto; min-width: 0; }
.stats-card .detail-val {
  flex: 0 0 auto;
  width: auto;
  max-width: 60%;
  text-align: right;
  align-items: flex-end;
}
.stats-card .trophy-sub { text-align: right; }
@media (max-width: 680px) {
  .stats-card .detail-row { flex-direction: row; align-items: baseline; gap: 12px; }
  .stats-card .detail-val { width: auto; text-align: right; align-items: flex-end; }
}

/* Upcoming Events spans the full dashboard row */
.summary-grid .dash-events { grid-column: 1 / -1; }

/* Best 10 heading row: title on the left, their average at the top of the score column */
.stat-subhead-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 14px 0 4px; }
.stat-subhead-row .stat-subhead { margin: 0; }
.stat-subavg { font-size: 13px; font-weight: 700; color: var(--brand-soft); white-space: nowrap; }
html[data-theme="dark"] .stat-subavg { color: var(--d-green); }

/* Club Info: free-text boxes with paragraphs and bullet points */
.ci-rich p { margin: 0 0 12px; }
.ci-rich ul { margin: 0 0 12px 22px; padding: 0; list-style: disc; }
.ci-rich li { margin: 0 0 4px; }
.ci-rich > :last-child { margin-bottom: 0; }
.ci-rich, .ci-rich p, .ci-rich li { color: #475569; line-height: 1.7; }
.ci-hint { margin-top: 6px; font-size: 12px; color: #64748b; }
html[data-theme="dark"] .ci-rich, html[data-theme="dark"] .ci-rich p, html[data-theme="dark"] .ci-rich li { color: var(--d-ink); }
html[data-theme="dark"] .ci-hint { color: var(--d-mute); }

/* Dashboard edit form: DD/MM/YYYY date boxes */
.modal-hint { display: block; margin-top: 4px; font-size: 12px; color: #64748b; }
.modal-field input.invalid { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }
html[data-theme="dark"] .modal-hint { color: var(--d-mute); }

/* Last-shoot view: back links */
.last-shoot-sep { margin: 0 8px; color: #94a3b8; }

/* Admin Records: edit form + action column */
#rec-modal-fields { display: contents; }   /* fields join the .modal-body flex layout */
table.rec-table td.rec-actions { text-align: right; width: 1%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── Dashboard: My Account / Insurance / Licence as a tabbed card deck ─────────
   All three cards share one grid cell, so the deck is as tall as the tallest card
   and switching never shifts the page. The active card sits on top; the others
   lie behind it, nudged down and narrower, so the deck's edges peek out below. */
.dash-deck { display: flex; flex-direction: column; min-width: 0; }

.deck-tabs { display: flex; gap: 4px; padding: 0 12px; position: relative; z-index: 4; }
.deck-tab {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 6px 9px; margin-bottom: -1px;
  border: 1.5px solid var(--tint-2); border-bottom: none; border-radius: 10px 10px 0 0;
  background: var(--tint-1); color: #64748b;
  font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.deck-tab:hover { color: var(--brand); transform: translateY(-1px); }
.deck-tab[aria-selected="true"] {
  background: #fff; color: var(--brand); border-color: var(--tint-3);
  box-shadow: 0 -2px 6px rgba(var(--brand-rgb), 0.06);
}
.deck-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Expiry status dot on the Insurance / Licence tabs */
.deck-flag { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.deck-flag-expired { background: #dc2626; box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18); }
.deck-flag-due     { background: #d97706; box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.18); }

.deck-cards {
  display: grid; grid-template-columns: minmax(0, 1fr);
  position: relative; isolation: isolate; flex: 1; padding-bottom: 14px;
}
.deck-cards > .deck-card {
  /* !important beats the phone rule ".detail-card { grid-column: span 1 !important }",
     which would otherwise put each card in its own column */
  grid-row: 1; grid-column: 1 !important; min-width: 0;
  transform-origin: 50% 100%;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
}
.deck-cards > .deck-card.is-active {
  z-index: 3; opacity: 1; visibility: visible; transform: none;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s;
}
.deck-cards > .deck-card:not(.is-active) { opacity: 0; visibility: hidden; pointer-events: none; }
.deck-cards > .deck-card[data-depth="1"] { z-index: 2; transform: translateY(8px) scale(0.965); }
.deck-cards > .deck-card[data-depth="2"] { z-index: 1; transform: translateY(16px) scale(0.93); }
.deck-cards > .deck-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* The two sheets peeking out under the top card */
.deck-cards::before, .deck-cards::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(var(--brand-rgb), 0.08);
}
.deck-cards::before { left: 12px; right: 12px; top: 8px; bottom: 6px;  opacity: 0.85; }
.deck-cards::after  { left: 24px; right: 24px; top: 16px; bottom: 0;   opacity: 0.6; }

html[data-theme="dark"] .deck-tab { background: var(--d-card-2); border-color: var(--d-line); color: var(--d-mute); }
html[data-theme="dark"] .deck-tab:hover { color: var(--d-green); }
html[data-theme="dark"] .deck-tab[aria-selected="true"] { background: var(--d-card); color: var(--d-green); }
html[data-theme="dark"] .deck-cards::before,
html[data-theme="dark"] .deck-cards::after { background: var(--d-card); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }

/* Four tabs (Account / Insurance / Licence / Club fees): icon above the label so
   every name fits; the status dot sits in the tab's corner. */
.deck-tab { position: relative; flex-direction: column; gap: 2px; font-size: 12px; padding: 7px 2px 8px; line-height: 1.15; }
.deck-tab .deck-flag { position: absolute; top: 6px; right: 7px; }

@media (max-width: 680px) {
  .deck-tabs { padding: 0 8px; gap: 3px; }
  .deck-tab { font-size: 12px; padding: 9px 4px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .deck-cards > .deck-card, .deck-cards > .deck-card.is-active, .deck-tab { transition: none; }
}

/* -- Dashboard: Leaderboard card (full row; two ranked lists side by side) -- */
.summary-grid .leaderboard-card { grid-column: 1 / -1; }
.lb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 32px; }
.lb-col .stat-subhead, .lb-col .stat-subhead-row { margin-top: 10px; }
.lb-col .stat-subhead-row .stat-subhead { margin-top: 0; }
.lb-note { font-size: 12px; color: #64748b; white-space: nowrap; }
.lb-list { list-style: none; margin: 4px 0 0; padding: 0; }
.lb-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--tint-1);
}
.lb-row:last-child { border-bottom: none; }
.lb-pos { font-size: 13px; color: #64748b; font-weight: 600; }
.lb-who { display: flex; flex-direction: column; min-width: 0; }
.lb-name { font-size: 14px; font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-detail { font-size: 12px; color: #64748b; }
.lb-val { font-size: 15px; font-weight: 700; color: #1e293b; }
.lb-first .lb-pos, .lb-first .lb-name, .lb-first .lb-val { color: #15803d; }
.lb-me .lb-name { text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="dark"] .lb-row { border-bottom-color: var(--d-line); }
html[data-theme="dark"] .lb-name, html[data-theme="dark"] .lb-val { color: var(--d-ink); }
html[data-theme="dark"] .lb-pos, html[data-theme="dark"] .lb-detail, html[data-theme="dark"] .lb-note { color: var(--d-mute); }
html[data-theme="dark"] .lb-first .lb-pos, html[data-theme="dark"] .lb-first .lb-name, html[data-theme="dark"] .lb-first .lb-val { color: #7ee29a; }

/* ══ Live Shoot page ══════════════════════════════════════════════════════ */
#shoot-live [hidden], #shoot-setup [hidden] { display: none !important; }
.shoot-empty { padding: 22px; color: #64748b; }
.shoot-setup { padding: 20px 22px; margin-bottom: 20px; }
.shoot-setup h2 { font-size: 17px; color: var(--brand); margin: 0 0 14px; }
.setup-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; }
.setup-field, .setup-presets { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: #475569; }
.setup-presets > div { display: flex; gap: 6px; flex-wrap: wrap; }
.setup-field input, .setup-field select, .setup-stand input {
  padding: 8px 10px; border: 1.5px solid #cbd5e1; border-radius: 8px; font: inherit; font-size: 14px; color: #0f172a; background: #fff;
}
.setup-field input { width: 130px; }
.setup-field input:focus, .setup-field select:focus, .setup-stand input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14); }
.shoot-note { margin: -4px 0 14px; padding: 8px 12px; border-radius: 8px; background: var(--tint-6); color: var(--brand); font-size: 14px; }
html[data-theme="dark"] .shoot-note { background: rgba(var(--accent-rgb), 0.18); color: var(--d-green); }
.setup-date select { min-width: 250px; max-width: 100%; }
.setup-date-other { display: flex; }
.setup-date-other.hidden, .setup-hint.hidden { display: none; }
.setup-hint { margin: 0; max-width: 300px; font-size: 12px; font-weight: 400; color: #64748b; }
html[data-theme="dark"] .setup-hint { color: var(--d-muted, #94a3b8); }
.setup-stands { border: none; padding: 0; margin: 16px 0 0; }
.setup-stands legend { font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 6px; }
#setup-stands { display: flex; flex-wrap: wrap; gap: 10px; }
.setup-stand { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #64748b; }
.setup-stand input { width: 74px; }
.setup-total { margin: 12px 0 0; font-weight: 700; color: var(--brand); }
.setup-total.over { color: #dc2626; }
.setup-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.setup-actions .btn-primary, .setup-actions .btn-secondary { width: auto; margin-top: 0; }

.shoot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.shoot-bar-info { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.shoot-layout { font-size: 13px; color: #64748b; }
.shoot-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.shoot-bar-actions .btn-primary { width: auto; margin-top: 0; padding: 9px 16px; }
.shoot-note { font-size: 13px; color: #64748b; margin: 0 0 14px; min-height: 1px; }

.shoot-add { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 24px; padding: 16px 20px; margin-bottom: 18px; }
.shoot-add-form label { display: block; font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 5px; }
.shoot-add-row { display: flex; gap: 8px; }
.shoot-add-row input, .shoot-add-row select { flex: 1; min-width: 0; padding: 9px 12px; border: 1.5px solid #cbd5e1; border-radius: 8px; font: inherit; font-size: 14px; background: #fff; }
.shoot-add-row input:focus, .shoot-add-row select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14); }
.shoot-add-row .btn-primary { width: auto; margin-top: 0; white-space: nowrap; padding: 9px 14px; }
.shoot-add .modal-error { grid-column: 1 / -1; margin: 0; }

.shoot-board { padding: 18px 20px; margin-bottom: 18px; }

/* Score-card deck: shooters' names as tabs down the left, cards stacked on the right */
.shooter-grid { display: flex; flex-direction: column; gap: 26px; }
.shooter-deck { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
.deck-names {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 640px; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px 0 4px 4px; position: relative; z-index: 4;
  scrollbar-width: thin; scrollbar-color: var(--tint-line) transparent;
}
.deck-name {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  width: 100%; padding: 9px 12px 9px 14px; margin-right: -2px;
  border: 1.5px solid var(--tint-2); border-right: none; border-radius: 10px 0 0 10px;
  background: var(--tint-1); color: #475569; font: inherit; cursor: pointer;
  border-left: 4px solid transparent;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.deck-name:hover { color: var(--brand); transform: translateX(-2px); }
.deck-name[aria-selected="true"] {
  background: #fff; color: #1e293b; border-color: var(--tint-3); border-left-color: var(--brand);
  box-shadow: -3px 2px 8px rgba(var(--brand-rgb), 0.08);
}
.deck-name:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.deck-name.is-complete { border-left-color: var(--accent); }
.deck-name[aria-selected="true"].is-complete { border-left-color: #16a34a; }
.deck-name-text { font-size: 14px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-name-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.deck-name-score { font-size: 12px; font-weight: 700; color: var(--brand); }

.deck-stack { display: grid; grid-template-columns: minmax(0, 1fr); position: relative; isolation: isolate; padding-bottom: 14px; }
.deck-stack > .deck-shooter {
  grid-row: 1; grid-column: 1; min-width: 0;
  transform-origin: 50% 100%;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
}
.deck-stack > .deck-shooter.is-active {
  z-index: 3; opacity: 1; visibility: visible; transform: none;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s;
}
.deck-stack > .deck-shooter:not(.is-active) { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(14px) scale(0.97); }
.deck-stack::before, .deck-stack::after {      /* the sheets peeking out under the top card */
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(var(--brand-rgb), 0.08);
}
.deck-stack::before { left: 12px; right: 12px; top: 8px; bottom: 6px; opacity: 0.85; }
.deck-stack::after  { left: 24px; right: 24px; top: 16px; bottom: 0;  opacity: 0.6; }
.deck-stack:has(> .deck-shooter:only-child)::before,
.deck-stack:has(> .deck-shooter:only-child)::after { display: none; }   /* one shooter: no stack */
.deck-shooter.is-me { box-shadow: 0 0 0 2px var(--brand), 0 2px 10px rgba(var(--brand-rgb), 0.1); }

html[data-theme="dark"] .deck-name { background: var(--d-card-2); border-color: var(--d-line); color: var(--d-mute); }
html[data-theme="dark"] .deck-name[aria-selected="true"] { background: var(--d-card); color: var(--d-ink); border-left-color: var(--d-green); }
html[data-theme="dark"] .deck-name-score { color: var(--d-green); }
html[data-theme="dark"] .deck-stack::before, html[data-theme="dark"] .deck-stack::after { background: var(--d-card); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
@media (prefers-reduced-motion: reduce) {
  .deck-stack > .deck-shooter, .deck-stack > .deck-shooter.is-active, .deck-name { transition: none; }
}
.shooter-card { padding: 16px 18px; border-top: 4px solid #e2e8f0; }
.shooter-card.is-complete { border-top-color: var(--accent); }
.shooter-card.is-me { box-shadow: 0 0 0 2px var(--brand), 0 2px 10px rgba(var(--brand-rgb), 0.1); }
.shooter-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--tint-1); }
.shooter-name { font-size: 16px; font-weight: 700; color: #1e293b; margin: 0; flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.guest-badge, .you-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.guest-badge { background: #fef3c7; color: #92400e; }
.you-badge { background: #dcfce7; color: #15803d; }
.shooter-total { font-size: 18px; font-weight: 800; color: var(--brand); white-space: nowrap; }
.shooter-remove { border: none; background: none; color: #94a3b8; font-size: 15px; cursor: pointer; width: 30px; height: 30px; border-radius: 6px; }
.shooter-remove:hover { background: #fef2f2; color: #dc2626; }
.shooter-remove:focus-visible { outline: 2px solid var(--brand); }

.stand-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) 40px; align-items: center; gap: 8px; padding: 5px 0; }
.stand-label { font-size: 12px; font-weight: 600; color: #64748b; }
.stand-birds { display: flex; flex-wrap: wrap; gap: 5px; }
.stand-total { font-size: 12px; font-weight: 700; color: #475569; text-align: right; }
.bird {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid #cbd5e1; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; line-height: 1; color: #fff; padding: 0;
}
button.bird { cursor: pointer; transition: transform 0.08s, background 0.15s, border-color 0.15s; }
button.bird:hover { border-color: var(--accent); }
button.bird:active { transform: scale(0.9); }
button.bird:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.bird.hit { background: #16a34a; border-color: #16a34a; }
.bird.miss { background: #dc2626; border-color: #dc2626; }

.shoot-history { margin-top: 30px; }
.shoot-history h2 { font-size: 16px; font-weight: 700; color: var(--brand); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--tint-1); }
.shoot-history ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.history-item { display: flex; justify-content: space-between; gap: 12px; background: #fff; border-radius: 8px; padding: 10px 14px; box-shadow: 0 1px 4px rgba(var(--brand-rgb), 0.08); font-size: 14px; }
.history-item.is-current { box-shadow: 0 0 0 2px var(--brand); }
.history-meta { color: #64748b; font-size: 13px; }
.finish-warn { color: #b45309; font-size: 13px; }
.finish-post { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 4px; font-size: 14px; }

html[data-theme="dark"] .shoot-setup h2, html[data-theme="dark"] .setup-total, html[data-theme="dark"] .shooter-total,
html[data-theme="dark"] .shoot-history h2 { color: var(--d-green); }
html[data-theme="dark"] .setup-field, html[data-theme="dark"] .setup-presets, html[data-theme="dark"] .setup-stands legend,
html[data-theme="dark"] .shoot-add-form label, html[data-theme="dark"] .stand-total { color: var(--d-ink); }
html[data-theme="dark"] .setup-field input, html[data-theme="dark"] .setup-field select, html[data-theme="dark"] .setup-stand input,
html[data-theme="dark"] .shoot-add-row input, html[data-theme="dark"] .shoot-add-row select { background: #11161b; border-color: var(--d-line); color: var(--d-ink); }
html[data-theme="dark"] .shooter-name { color: var(--d-ink); }
html[data-theme="dark"] .shooter-head { border-bottom-color: var(--d-line); }
html[data-theme="dark"] .shooter-card { border-top-color: var(--d-line); }
html[data-theme="dark"] .shooter-card.is-complete { border-top-color: var(--d-green-2); }
html[data-theme="dark"] .bird { background: var(--d-card-2); border-color: var(--d-line); }
html[data-theme="dark"] .bird.hit { background: #16a34a; border-color: #16a34a; }
html[data-theme="dark"] .bird.miss { background: #dc2626; border-color: #dc2626; }
html[data-theme="dark"] .history-item { background: var(--d-card); }
html[data-theme="dark"] .shoot-layout, html[data-theme="dark"] .shoot-note, html[data-theme="dark"] .stand-label,
html[data-theme="dark"] .history-meta, html[data-theme="dark"] .shoot-empty { color: var(--d-mute); }

@media (max-width: 680px) {
  /* Phones: no room beside the card, so the name tabs run along the top and scroll sideways */
  .shooter-deck { grid-template-columns: 1fr; }
  .deck-names {
    flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden;
    padding: 4px 4px 0; gap: 4px; scroll-snap-type: x proximity;
  }
  .deck-name {
    flex: 0 0 auto; width: auto; max-width: 160px; scroll-snap-align: start;
    margin: 0 0 -2px; padding: 8px 12px; border: 1.5px solid var(--tint-2); border-bottom: none;
    border-top: 4px solid transparent; border-radius: 10px 10px 0 0;
  }
  .deck-name:hover { transform: none; }
  .deck-name[aria-selected="true"] { border-top-color: var(--brand); border-left-color: var(--tint-3); }
  .deck-name.is-complete { border-top-color: var(--accent); border-left-color: var(--tint-2); }
  .deck-name[aria-selected="true"].is-complete { border-top-color: #16a34a; border-left-color: var(--tint-3); }
  .bird { width: 34px; height: 34px; }          /* bigger targets for thumbs */
  .stand-row { grid-template-columns: 50px minmax(0, 1fr) 36px; }
  .shoot-bar-actions { width: 100%; }
  .shoot-bar-actions .btn-primary { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { button.bird { transition: none; } }

/* Small secondary buttons on the Live Shoot page (same look as Admin's) */
.shoot-page .admin-btn {
  padding: 7px 12px; border: 1px solid #cbd5e1; border-radius: 6px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; background: #f1f5f9; color: #475569;
}
.shoot-page .admin-btn:hover { background: #e2e8f0; }
.shoot-page .admin-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.shoot-page .admin-btn.danger { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
.shoot-page .admin-btn.danger:hover { background: #fee2e2; }
.shoot-page .admin-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Live Shoot: squads */
.shooter-group select {
  padding: 7px 10px; border: 1.5px solid #cbd5e1; border-radius: 8px; font: inherit; font-size: 14px; background: #fff; color: #0f172a;
}
.shooter-group select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14); }
.shooter-group select { padding: 4px 6px; font-size: 12px; }
.group-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #e0f2fe; color: #075985; white-space: nowrap; }
.deck-group {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin: 8px 6px 0 2px; padding: 0 6px 2px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--brand-soft); border-bottom: 1px solid var(--tint-2);
}
.deck-group:first-child { margin-top: 0; }
.deck-group-count { font-weight: 700; color: #64748b; letter-spacing: 0; }
html[data-theme="dark"] .shooter-group select { background: #11161b; border-color: var(--d-line); color: var(--d-ink); }
html[data-theme="dark"] .deck-group { color: var(--d-green); border-bottom-color: var(--d-line); }
html[data-theme="dark"] .group-badge { background: #0c2b3a; color: #7dd3fc; }
@media (max-width: 680px) {
  /* tabs run along the top on phones: the squad label becomes a small divider chip */
  .deck-group { flex: 0 0 auto; flex-direction: column; justify-content: center; margin: 0 2px; padding: 4px 6px; border-bottom: none; border-left: 2px solid var(--tint-line); }
}
/* One deck per squad: a heading above each deck */
.shoot-deck-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px 4px; }
.shoot-deck-title { font-size: 16px; font-weight: 800; color: var(--brand); margin: 0; }
.shoot-deck-info { font-size: 13px; color: #64748b; }
html[data-theme="dark"] .shoot-deck-title { color: var(--d-green); }
html[data-theme="dark"] .shoot-deck-info { color: var(--d-mute); }

/* ════════════════════════════════════════════════════════════════════════════
   Treasurer (the Admin page's Treasurer tab, admin.html#treasurer)
   ════════════════════════════════════════════════════════════════════════════ */
.fin-page .admin-btn {
  padding: 5px 11px; border: 1px solid #cbd5e1; border-radius: 6px;
  font-size: 12px; font-weight: 600; cursor: pointer; background: #f1f5f9; color: #475569;
}
.fin-page .admin-btn:hover { background: #e2e8f0; }
.fin-page .admin-btn.danger { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
.fin-page .admin-btn:focus-visible, .fin-tab:focus-visible, .fin-subtab:focus-visible, .fin-link:focus-visible,
.fin-shoot-item:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.fin-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.fin-head .subtitle { margin: 4px 0 0; }
.fin-year { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #475569; }
.fin-year select, .fin-toolbar select, .fin-toolbar input, .fin-f input, .fin-f select, .fin-f textarea,
.fin-modal select, .fin-modal textarea, .fin-bud-input {
  padding: 7px 10px; border: 1.5px solid #cbd5e1; border-radius: 8px; font: inherit; font-size: 14px; background: #fff; color: #0f172a;
}
.fin-modal select, .fin-modal textarea { width: 100%; }
.fin-tabs, .fin-subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.fin-tab, .fin-subtab {
  padding: 8px 16px; border: 1.5px solid #cbd5e1; border-radius: 99px; background: #fff;
  font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer;
}
.fin-tab:hover, .fin-subtab:hover { border-color: var(--brand); color: var(--brand); }
.fin-tab.active, .fin-subtab.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.fin-subtab { padding: 6px 14px; font-size: 12px; }
.fin-tab[hidden] { display: none; }
.fin-note { margin: 0 0 14px; padding: 9px 13px; border-radius: 8px; background: var(--tint-6); color: var(--brand); font-size: 14px; }
.fin-note.warn { background: #fef2f2; color: #b91c1c; }
.fin-muted { color: #64748b; font-size: 13px; }
.fin-bad { color: #dc2626; font-weight: 600; }
.fin-empty { color: #94a3b8; text-align: center; padding: 18px !important; }
.fin-card { padding: 18px 20px; margin-bottom: 18px; }
.fin-card h2 { font-size: 16px; color: var(--brand); margin: 0 0 12px; }
.fin-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.fin-card-head h2 { margin: 0; }
.fin-h3 { font-size: 14px; color: var(--brand); margin: 14px 0 6px; }

.fin-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.fin-tile { background: #fff; border-radius: 12px; padding: 16px 18px; box-shadow: 0 2px 10px rgba(var(--brand-rgb), 0.08); display: flex; flex-direction: column; gap: 4px; }
.fin-tile-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #64748b; }
.fin-tile-val { font-size: 24px; font-weight: 800; color: #1e293b; }
.fin-tile-val.in { color: #15803d; } .fin-tile-val.out { color: #b91c1c; } .fin-tile-val.warn { color: #b45309; }
.fin-tile-sub { font-size: 12px; color: #94a3b8; }
.fin-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; }
.fin-chart { width: 100%; height: auto; display: block; }
.fin-grid-line { stroke: #e2e8f0; stroke-width: 1; }
.fin-axis { font-size: 11px; fill: #64748b; }
.fin-bar-in { fill: #16a34a; } .fin-bar-out { fill: #dc2626; }
.fin-legend { font-size: 12px; color: #64748b; margin-top: 6px; }
.fin-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; }
.fin-key-in { background: #16a34a; } .fin-key-out { background: #dc2626; margin-left: 10px; }
.fin-action { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.fin-action li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--tint-5); font-size: 14px; }
.fin-action li.is-overdue { background: #fef2f2; }

.fin-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.fin-toolbar input[type="search"] { flex: 1; min-width: 180px; }
.fin-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: #475569; }
.fin-f small { font-weight: 400; color: #64748b; }
.fin-f-wide { margin-top: 10px; }
.fin-f-wide textarea { width: 100%; }
.fin-table-wrap { overflow-x: auto; border-radius: 10px; box-shadow: 0 2px 10px rgba(var(--brand-rgb), 0.08); background: #fff; margin-bottom: 12px; }
table.fin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.fin-table th { background: var(--brand); color: #fff; font-weight: 600; padding: 9px 12px; text-align: left; white-space: nowrap; }
table.fin-table td { padding: 8px 12px; border-bottom: 1px solid #e2e8f0; color: #334155; vertical-align: middle; }
table.fin-table tbody tr:hover td { background: var(--tint-5); }
table.fin-table tfoot td, table.fin-table tr.fin-total td { font-weight: 700; background: var(--tint-4); color: #1e293b; }
table.fin-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.fin-table .ctr { text-align: center; }
table.fin-table th.fin-group { background: var(--tint-1); color: var(--brand); }
table.fin-mini th { background: var(--tint-1); color: var(--brand); }
.fin-link { background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--brand); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.fin-row-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.fin-pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.fin-pill-ok { background: #dcfce7; color: #15803d; } .fin-pill-warn { background: #fef3c7; color: #92400e; }
.fin-pill-bad { background: #fee2e2; color: #b91c1c; } .fin-pill-info { background: #dbeafe; color: #1d4ed8; }
.fin-pill-muted { background: #f1f5f9; color: #64748b; }
.fin-chip { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 99px; font-size: 10px; font-weight: 700; background: var(--tint-1); color: var(--brand-soft); vertical-align: middle; }
.fin-chip.warn { background: #fef3c7; color: #92400e; }

.fin-split { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }
.fin-shoot-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; max-height: 620px; overflow-y: auto; }
.fin-shoot-item { width: 100%; display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px 10px;
  border: 1.5px solid transparent; border-radius: 8px; background: #fff; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.fin-shoot-item:hover { border-color: #cbd5e1; }
.fin-shoot-item.is-active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.fin-shoot-date { font-weight: 600; color: #1e293b; }
.fin-shoot-meta { display: inline-flex; gap: 6px; align-items: center; }
.fin-shoot-net { font-weight: 700; color: #15803d; font-variant-numeric: tabular-nums; }
.fin-shoot-net.out, .fin-net.out { color: #b91c1c; }
.fin-shoot-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fin-shoot-groups fieldset { border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.fin-shoot-groups legend { font-size: 13px; font-weight: 700; color: var(--brand); padding: 0 4px; }
.fin-net { font-size: 18px; font-weight: 800; color: #15803d; margin: 12px 0 4px; }
.fin-modal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.fin-btn-link, .fin-btn-auto { width: auto !important; margin-top: 0 !important; display: inline-flex; text-decoration: none; padding: 9px 16px; }
.fin-modal-wide { max-width: 640px !important; width: 94vw; }
.fin-modal .modal-body { max-height: 70vh; overflow-y: auto; }
.fin-check { flex-direction: row !important; align-items: center; gap: 8px; }
.fin-static-label { font-size: 13px; font-weight: 600; color: #475569; }
.fin-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 6px; font-size: 14px; }
.fin-dl dt { color: #64748b; } .fin-dl dd { margin: 0; font-weight: 600; }
.fin-remind-list { margin: 8px 0; padding-left: 18px; font-size: 13px; max-height: 240px; overflow-y: auto; }
.fin-diff { margin: 0; padding-left: 16px; font-size: 12px; }
.fin-bud-input { width: 110px; text-align: right; padding: 5px 8px; }
.fin-bar { display: inline-block; width: 120px; height: 10px; border-radius: 99px; background: #e2e8f0; overflow: hidden; vertical-align: middle; }
.fin-bar-fill { display: block; height: 100%; background: var(--brand); }
.fin-bar-fill.inc { background: #16a34a; } .fin-bar-fill.over { background: #dc2626; }
.fin-bar-pct { margin-left: 8px; font-size: 12px; color: #475569; }
.fin-reports { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.fin-rep { display: flex; flex-direction: column; gap: 10px; }
.fin-rep h2 { margin: 0; }
.fin-rep .btn-primary { margin-top: auto; }
.fin-report-doc header { border-bottom: 2px solid var(--brand); margin-bottom: 14px; padding-bottom: 8px; }
.fin-report-club { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #64748b; }
.fin-report-doc h2 { font-size: 22px; margin: 2px 0; }
.fin-report-period { margin: 0; color: #475569; }
.fin-report-doc h3 { font-size: 15px; color: var(--brand); margin: 16px 0 6px; }
.fin-report-foot { margin-top: 18px; font-size: 12px; color: #94a3b8; }
.fin-settings { max-width: 760px; }
.fin-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 18px; margin: 12px 0; }
.fin-settings .btn-primary { width: auto; }

@media (max-width: 900px) {
  .fin-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-grid, .fin-split, .fin-shoot-groups { grid-template-columns: 1fr; }
  .fin-shoot-list { max-height: 260px; }
}

html[data-theme="dark"] .fin-tile, html[data-theme="dark"] .fin-table-wrap, html[data-theme="dark"] table.fin-table,
html[data-theme="dark"] .fin-shoot-item, html[data-theme="dark"] .fin-tab, html[data-theme="dark"] .fin-subtab { background: var(--d-card); color: var(--d-ink); border-color: var(--d-line); }
html[data-theme="dark"] .fin-tab.active, html[data-theme="dark"] .fin-subtab.active { background: var(--d-green-2); border-color: var(--d-green-2); color: #fff; }
html[data-theme="dark"] table.fin-table td { color: var(--d-ink); border-color: var(--d-line); }
html[data-theme="dark"] table.fin-table tbody tr:hover td { background: var(--d-card-2); }
html[data-theme="dark"] table.fin-table tfoot td, html[data-theme="dark"] table.fin-table tr.fin-total td,
html[data-theme="dark"] table.fin-table th.fin-group, html[data-theme="dark"] table.fin-mini th { background: var(--d-card-2); color: var(--d-ink); }
html[data-theme="dark"] .fin-tile-val, html[data-theme="dark"] .fin-shoot-date { color: var(--d-ink); }
html[data-theme="dark"] .fin-card h2, html[data-theme="dark"] .fin-h3, html[data-theme="dark"] .fin-report-doc h3,
html[data-theme="dark"] .fin-link, html[data-theme="dark"] .fin-shoot-groups legend { color: var(--d-green); }
html[data-theme="dark"] .fin-action li { background: var(--d-card-2); }
html[data-theme="dark"] .fin-action li.is-overdue { background: rgba(220, 38, 38, 0.15); }
html[data-theme="dark"] .fin-year select, html[data-theme="dark"] .fin-toolbar select, html[data-theme="dark"] .fin-toolbar input,
html[data-theme="dark"] .fin-f input, html[data-theme="dark"] .fin-f select, html[data-theme="dark"] .fin-f textarea,
html[data-theme="dark"] .fin-modal select, html[data-theme="dark"] .fin-modal textarea, html[data-theme="dark"] .fin-bud-input {
  background: #11161b; border-color: var(--d-line); color: var(--d-ink);
}
html[data-theme="dark"] .fin-muted, html[data-theme="dark"] .fin-axis, html[data-theme="dark"] .fin-f, html[data-theme="dark"] .fin-year,
html[data-theme="dark"] .fin-tile-label, html[data-theme="dark"] .fin-legend { color: var(--d-mute); fill: var(--d-mute); }
html[data-theme="dark"] .fin-grid-line { stroke: var(--d-line); }
html[data-theme="dark"] .fin-note { background: rgba(var(--accent-rgb), 0.18); color: var(--d-green); }
html[data-theme="dark"] .fin-note.warn { background: rgba(220, 38, 38, 0.18); color: #fca5a5; }
html[data-theme="dark"] .fin-page .admin-btn { background: var(--d-card-2); border-color: var(--d-line); color: var(--d-ink); }
html[data-theme="dark"] .fin-bar { background: var(--d-line); }
html[data-theme="dark"] .fin-shoot-groups fieldset { border-color: var(--d-line); }

/* Budget: configurable layout */
.fin-group-type { font-weight: 400; font-size: 11px; color: #64748b; margin-left: 6px; text-transform: lowercase; }
table.fin-table th.fin-group-muted { background: #f1f5f9; color: #64748b; }
.fin-cfg { border: 2px solid #cfe3d4; }
.fin-cfg-cols { border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 6px; }
.fin-cfg-cols legend { font-size: 13px; font-weight: 700; color: var(--brand); padding: 0 4px; }
.fin-cfg-cols .fin-muted { flex-basis: 100%; margin: 2px 0 0; font-size: 12px; }
.fin-cfg-cols .fin-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.fin-cfg-ghead .admin-btn.danger { padding: 3px 8px; font-size: 11px; }
.fin-cfg-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.fin-cfg-group { border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; background: var(--tint-5); }
.fin-cfg-ghead { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.fin-cfg-ghead input { flex: 1; min-width: 120px; font-weight: 700; padding: 6px 9px; border: 1.5px solid #cbd5e1; border-radius: 8px; font: inherit; font-size: 14px; }
.fin-cfg-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.fin-cfg-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; font-size: 13px; }
.fin-cfg-list li:hover { background: var(--tint-5); }
.fin-cfg-list select { padding: 4px 6px; border: 1.5px solid #cbd5e1; border-radius: 6px; font: inherit; font-size: 12px; }
.fin-cfg-out { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px 12px; }
.fin-cfg-name { flex: 1; min-width: 0; }
.fin-icon-btn { min-width: 30px; padding: 3px 7px !important; }
.fin-icon-btn:disabled { opacity: 0.35; cursor: default; }
.fin-cfg-add { margin-top: 12px; }
html[data-theme="dark"] .fin-cfg { border-color: var(--d-line); }
html[data-theme="dark"] .fin-cfg-group { background: var(--d-card-2); border-color: var(--d-line); }
html[data-theme="dark"] .fin-cfg-cols { border-color: var(--d-line); }
html[data-theme="dark"] .fin-cfg-list li:hover { background: var(--d-card); }
html[data-theme="dark"] .fin-cfg-ghead input, html[data-theme="dark"] .fin-cfg-list select { background: #11161b; border-color: var(--d-line); color: var(--d-ink); }
html[data-theme="dark"] table.fin-table th.fin-group-muted { background: var(--d-card); color: var(--d-mute); }

/* Health & Safety (Admin page) — reuses the Treasurer's fin-* styles */
.hs-print-view { display: none; }
.hs-checklist td:first-child { white-space: normal; min-width: 220px; }
.hs-checklist input { width: 100%; min-width: 140px; padding: 5px 8px; border: 1.5px solid #cbd5e1; border-radius: 6px; font: inherit; font-size: 13px; }
.hs-checklist select { padding: 5px 6px; border: 1.5px solid #cbd5e1; border-radius: 6px; font: inherit; font-size: 13px; }
html[data-theme="dark"] .hs-checklist input, html[data-theme="dark"] .hs-checklist select { background: #11161b; border-color: var(--d-line); color: var(--d-ink); }
@media print {
  /* Printing the safety register: only the register (beats the Treasurer's rules) */
  body.fin-page.hs-printing main > :not(#section-safety) { display: none !important; }
  body.fin-page.hs-printing main > #section-safety { display: block !important; }
  body.fin-page.hs-printing #section-safety > :not(#hs-print-view) { display: none !important; }
  body.fin-page.hs-printing #section-safety > #hs-print-view { display: block !important; }
  body.fin-page.hs-printing #hs-print-view section { break-inside: avoid; }
}

/* On the Admin page: a smaller heading under the Admin title */
.fin-title { font-size: 20px; color: var(--brand); margin: 0; }
html[data-theme="dark"] .fin-title { color: var(--d-green); }

/* Print: only the report preview */
@media print {
  body.fin-page main > :not(#section-treasurer) { display: none !important; }
  body.fin-page .topbar, body.fin-page .fin-head, body.fin-page .fin-tabs, body.fin-page .fin-note,
  body.fin-page .fin-sec:not(#sec-reports), body.fin-page .fin-reports, body.fin-page #rep-error,
  body.fin-page .fin-no-print, body.fin-page .modal-backdrop, body.fin-page .nav-toggle { display: none !important; }
  body.fin-page, body.fin-page .dashboard-main { background: #fff !important; padding: 0 !important; margin: 0 !important; }
  body.fin-page .fin-report { box-shadow: none !important; padding: 0 !important; }
  body.fin-page table.fin-table th { background: #e5e7eb !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.fin-page .fin-table-wrap { box-shadow: none; overflow: visible; }
  body.fin-page .fin-report-doc section { break-inside: avoid; }
}

/* Dashboard: my club fees + claims */
.myfin-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.myfin-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; }
.myfin-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--tint-1); }
.myfin-list li:last-child { border-bottom: none; }
.myfin-sub { font-size: 12px; color: #64748b; }
html[data-theme="dark"] .myfin-list li { border-color: var(--d-line); }
html[data-theme="dark"] .myfin-sub { color: var(--d-mute); }

/* ── Admin: club logo ── */
.logo-admin { padding: 18px 20px; max-width: 760px; }
.logo-admin-preview { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.logo-admin-box { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; min-width: 160px; }
.logo-admin-box img { height: 72px; width: auto; max-width: 260px; object-fit: contain; }
.logo-admin-dark { background: var(--brand); border-color: var(--brand); }
.logo-admin-dark .logo-admin-label { color: var(--tint-3); }
.logo-admin-label { font-size: 12px; font-weight: 600; color: #64748b; }
.logo-admin-controls label { display: block; font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 6px; }
.logo-admin-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.logo-admin-actions .btn-primary { width: auto; margin-top: 0; }
html[data-theme="dark"] .logo-admin-box { background: var(--d-card-2); border-color: var(--d-line); }
html[data-theme="dark"] .logo-admin-dark { background: var(--d-topbar); }
html[data-theme="dark"] .logo-admin-controls label, html[data-theme="dark"] .logo-admin-label { color: var(--d-ink); }

/* ── Admin: colour theme ── */
.theme-admin .theme-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.theme-preset { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid #e2e8f0; border-radius: 10px; background: #fff; color: #1e293b; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.theme-preset:hover { border-color: #94a3b8; }
.theme-preset[aria-checked="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.18); font-weight: 600; }
.theme-preset:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.theme-swatch { width: 38px; height: 24px; border-radius: 6px; flex: none; border: 1px solid rgba(0, 0, 0, 0.15); }
.theme-custom { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-bottom: 10px; }
.theme-pick { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #475569; }
.theme-pick input[type="color"] { width: 46px; height: 34px; padding: 2px; border: 1.5px solid #cbd5e1; border-radius: 8px; background: #fff; cursor: pointer; }
.theme-pick code { font-weight: 400; color: #64748b; }
.theme-sample { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0 14px; }
.theme-sample > span { padding: 8px 14px; border-radius: 8px; font-size: 13px; }
.theme-sample-bar { background: var(--brand); color: #fff; font-weight: 600; }
.theme-sample-btn { background: var(--brand); color: #fff; }
.theme-sample-note { background: var(--tint-6); color: var(--brand); }
.theme-sample-focus { background: #fff; color: #1e293b; border: 2px solid var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25); }
html[data-theme="dark"] .theme-preset { background: var(--d-card-2); border-color: var(--d-line); color: var(--d-ink); }
html[data-theme="dark"] .theme-preset[aria-checked="true"] { border-color: var(--d-green); }
html[data-theme="dark"] .theme-pick, html[data-theme="dark"] .theme-pick code { color: var(--d-ink); }
html[data-theme="dark"] .theme-pick input[type="color"] { background: var(--d-card-2); border-color: var(--d-line); }
html[data-theme="dark"] .theme-sample-bar, html[data-theme="dark"] .theme-sample-btn { background: var(--d-topbar); }
html[data-theme="dark"] .theme-sample-note { background: var(--d-tint-1); color: var(--d-green); }
html[data-theme="dark"] .theme-sample-focus { background: var(--d-card-2); color: var(--d-ink); }

/* Seven nav links now: tighten them a little between phone and laptop widths so they all fit */
@media (min-width: 681px) and (max-width: 1050px) {
  .topbar-nav { gap: 2px; }
  .nav-link { padding: 7px 9px; font-size: 13px; }
}

/* ── Demo site ── */
.demo-banner { background: #1e293b; color: #f8fafc; text-align: center; font-size: 13px; line-height: 1.4; padding: 7px 14px; }
.demo-banner strong { color: #fde68a; }
.demo-try { margin-top: 22px; padding-top: 16px; border-top: 1px solid #e2e8f0; }
.demo-try h2 { font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 4px; }
.demo-try-note { font-size: 13px; color: #475569; margin-bottom: 10px; }
.demo-try-disclaimer { font-size: 13px; line-height: 1.4; color: #78350f; background: #fef3c7; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 10px; margin: 6px 0 10px; }
.demo-try-disclaimer strong { color: #78350f; }
html[data-theme="dark"] .demo-try-disclaimer { background: #2a2410; border-color: #5c4a14; color: #fde68a; }
html[data-theme="dark"] .demo-try-disclaimer strong { color: #fde68a; }
.demo-try-list { list-style: none; display: grid; gap: 8px; }
.demo-try-btn { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border: 1.5px solid #cbd5e1; border-radius: 10px; background: #fff; color: #1e293b; font: inherit; cursor: pointer; }
.demo-try-btn:hover { border-color: var(--brand); background: var(--tint-5); }
.demo-try-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.demo-try-role { font-size: 14px; font-weight: 700; color: var(--brand); }
.demo-try-can { font-size: 12px; color: #64748b; }
html[data-theme="dark"] .demo-banner { background: #0b0f13; }
html[data-theme="dark"] .demo-try { border-top-color: var(--d-line); }
html[data-theme="dark"] .demo-try h2 { color: var(--d-ink); }
html[data-theme="dark"] .demo-try-note, html[data-theme="dark"] .demo-try-can { color: var(--d-mute); }
html[data-theme="dark"] .demo-try-btn { background: var(--d-card-2); border-color: var(--d-line); color: var(--d-ink); }
html[data-theme="dark"] .demo-try-btn:hover { background: var(--d-card); border-color: var(--d-green); }
html[data-theme="dark"] .demo-try-role { color: var(--d-green); }