/* ── 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: #eef0dd;          /* 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(47, 111, 79, 0.10),
              0 1px 4px  rgba(47, 111, 79, 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: #2f6f4f;
  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: #2f6f4f;
  text-align: center;
  margin-bottom: 24px;
}

.tabs {
  display: flex;
  gap: 4px;
  background: #f5f6ea;
  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: #2f6f4f;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(47, 111, 79, 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: #4a7c3f;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(74, 124, 63, 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: #4a7c3f;
  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: #4a7c3f;
  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: #b9c49a; 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: #f4f5e9;
  display: flex;
  flex-direction: column;
}

.topbar {
  background: #2f6f4f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  box-shadow: 0 2px 8px rgba(47,111,79,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: #2f6f4f;
  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(47,111,79,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: #2f6f4f; }
.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: #2f6f4f;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid #eef0dd;
}

.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(47,111,79,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(47,111,79,0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #eef0dd;
  color: #2f6f4f;
  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(47,111,79,0.07);
}

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

.info-table th,
.scores-table th {
  background: #2f6f4f;
  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: #f4f5e9; }

/* ── 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: #2f6f4f; color: #2f6f4f; }
.score-tab.active { background: #2f6f4f; border-color: #2f6f4f; 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: #eef0dd; color: #3f7d58; }
.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: #2f6f4f !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 #eef0dd;
}

.detail-card-header .icon  { font-size: 22px; }
.detail-card-header .label {
  font-size: 15px;
  font-weight: 700;
  color: #2f6f4f;
}

.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 #eef0dd;
}

/* 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: #4a7c3f;
  background: #f2f3e2;
  border: 1px solid #d2cf9f;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.edit-btn:hover {
  background: #e7e8cf;
  border-color: #b9c49a;
}

/* ── 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: #2f6f4f;
}

.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: #4a7c3f;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74, 124, 63, 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: #f2f3e2;
  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 #4a7c3f;
  border-radius: 6px;
  font-size: inherit;
  font-family: inherit;
  color: #0f172a;
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(74,124,63,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 order: logo · (spacer) · controls · hamburger; nav drops below. */
  .topbar .logo   { order: 1; margin-right: auto; }
  .nav-toggle     { display: flex; order: 2; }
  .topbar-right   { order: 3; }
  .topbar-nav     { order: 4; }

  /* 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: 10px; }
  .btn-logout { padding: 6px 12px; 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; }
  .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(47,111,79,0.14);
  --ts-track-border: rgba(47,111,79,0.3);
  --ts-knob-bg: #2f6f4f;
}
.theme-toggle-float.theme-switch:hover .ts-track { background: rgba(47,111,79,0.22); }
.theme-toggle-float.theme-switch:focus-visible .ts-track {
  box-shadow: 0 0 0 3px rgba(47,111,79,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: #1c3b2b; }

/* 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: #223029;
  border-color: var(--d-line);
  color: var(--d-green);
}
html[data-theme="dark"] .edit-btn:hover,
html[data-theme="dark"] .admin-btn:hover { background: #2a3b31; }

/* 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: #1f2a24; border-color: #2f5a41; color: var(--d-green);
}
html[data-theme="dark"] .ci-editable:hover { background: #232c25; box-shadow: 0 0 0 2px #2f5a41; }

/* Keep the floating login switch readable on dark */
html[data-theme="dark"] .theme-toggle-float.theme-switch {
  --ts-track-bg: rgba(111,174,132,0.18);
  --ts-track-border: rgba(111,174,132,0.4);
  --ts-knob-bg: var(--d-green);
}
html[data-theme="dark"] .theme-toggle-float.theme-switch:hover .ts-track {
  background: rgba(111,174,132,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: #1c3b2b; }
html[data-theme="dark"] .cal-event { background: #223029; border-left-color: var(--d-green); color: var(--d-ink); }
html[data-theme="dark"] .cal-event.editable:hover { background: #2a3b31; }
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: #3f7d58;
  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 #eef0dd;
}
.dash-event-row:last-child { border-bottom: none; }

.dash-event-date {
  font-weight: 700;
  color: #3f7d58;
  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: column;
    align-items: flex-start;
    gap: 2px;
  }
  .detail-val {
    text-align: left;
    width: 100%;
    word-break: break-word;
  }
  .detail-key { white-space: normal; }

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