/* ==========================================================================
   South Side Cycles — design tokens
   Palette pulled from the club logo: deep navy, sun-bleached yellow,
   coral outline. Light theme: cream page, navy ink, yellow/coral accents.
   ========================================================================== */

:root {
  --navy:        #5271FF;
  --navy-soft:   #7189FF;
  --navy-mute:   #6E79B8;
  --text:        #1E1E1E;
  --cream:       #FBF6E9;
  --card:        #FFFFFF;
  --yellow:      #E1F558;
  --yellow-deep: #C7D93E;
  --coral:       #FF6F81;
  --coral-deep:  #FF4F68;
  --green:       #6FB98F;
  --line:        #EAE1C8;

  --font-display: 'Baloo 2', 'Arial Rounded MT Bold', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'DM Mono', 'SFMono-Regular', monospace;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --shadow-card: 0 2px 0 var(--line), 0 10px 24px -16px rgba(30, 40, 102, 0.35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.site-footer {
  text-align: center;
  padding: 24px 18px 32px;
}

.strava-badge {
  display: block;
  height: 24px;
  width: auto;
  margin: 0 auto 14px;
}

.site-footer p {
  margin: 0;
  font-size: 12.5px;
  color: var(--navy-mute);
}

.site-footer a {
  color: var(--navy-mute);
  text-decoration: underline;
}

.site-footer a:hover { color: var(--text); }

a { color: inherit; }

img { max-width: 100%; display: block; }

/* --------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 32px;
  background: var(--navy);
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-logo {
  height: 38px;
  width: auto;
  display: block;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.main-nav a {
  text-decoration: none;
  color: #C9C9EA;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.main-nav a:hover { color: #fff; background: rgba(255,255,255,0.08); }

.main-nav a.active { color: var(--text); background: var(--yellow); }

/* "Stats" nav dropdown — same pill look as a plain .main-nav link, but
   opens a small panel with the two stats pages instead of navigating
   directly. Reuses the same toggle/panel JS as the account menu. */
.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  text-decoration: none;
  color: #C9C9EA;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  border: none;
  background: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown-toggle:hover { color: #fff; background: rgba(255,255,255,0.08); }

.nav-dropdown-toggle.active { color: var(--text); background: var(--yellow); }

.nav-dropdown-caret { font-size: 10px; }

.nav-dropdown-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 6px;
  min-width: 160px;
  z-index: 50;
}

.nav-dropdown-panel.open { display: flex; flex-direction: column; gap: 2px; }

.nav-dropdown-panel a {
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 6px;
}

.nav-dropdown-panel a:hover { background: var(--cream); color: var(--text); }

.nav-dropdown-panel a.active { background: var(--yellow); color: var(--text); }

.period-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.period-toggle a {
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.leaderboard-tabs a {
  padding: 6px 10px;
  font-size: 11.5px;
}

.period-toggle a:hover { color: var(--text); }

.period-toggle a.active {
  background: var(--navy);
  color: var(--cream);
}

.btn-strava {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--coral);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--coral-deep);
  transition: transform 0.1s ease;
}

.btn-strava:hover { transform: translateY(-1px); }
.btn-strava:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--coral-deep); }

.rider-account {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rider-avatar-static {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 11px;
}

.rider-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.rider-avatar-leader-flag {
  position: absolute;
  bottom: -3px;
  right: -4px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  background: var(--yellow);
  border: 2px solid var(--navy);
  border-radius: 50%;
}

.rider-menu {
  position: relative;
}

.rider-menu-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
}

.rider-menu-toggle:hover { background: rgba(255,255,255,0.16); }

.nav-menu-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.nav-menu-toggle:hover { background: rgba(255,255,255,0.16); }

.nav-menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--cream);
}

.rider-menu-toggle span {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--cream);
}

.rider-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px -8px rgba(27,27,78,0.45);
  padding: 8px;
  z-index: 50;
}

.rider-menu-dropdown.open { display: block; }

.rider-menu-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
  padding: 8px 10px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.role-badge {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
  background: var(--yellow);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Wraps a row of role badges as whole units - a badge that doesn't fit
   the current line moves entirely to the next one, rather than its
   text breaking mid-word inside the pill (the .role-badge white-space:
   nowrap above is what stops that). Used on riders.php and
   personal-bests.php wherever a rider can have several custom badges. */
.role-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Milestone badges on rider.php — deliberately distinct from the
   dark navy .kpi-card blocks (rider.php's own averages), since these
   celebrate milestones rather than report plain stats. */
.milestone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.milestone-badge {
  background: var(--cream);
  border: 1px solid var(--yellow-deep);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.milestone-badge-icon {
  font-size: 26px;
  flex-shrink: 0;
  line-height: 1;
}

.milestone-badge-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--navy-mute);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.milestone-badge-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}

/* The milestone feed — index.php, milestones.php — styled like a social
   feed: each milestone is its own bordered "post" card, not just a thin
   list row, with a clear name+timestamp header and the achievement
   itself as the prominent line, not an afterthought crammed after a
   colon. */
/* Ride attendance heatmap (index.php) — Strava-style: small dots, one
   color, size (not color) carries the intensity, no numbers, minimal
   footprint. Each .heatmap-cell is a fixed-size slot that just centers
   an inner dot — the dot's diameter is set per-level below. Level 0 has
   no dot at all (an empty day just looks empty, same as Strava's own).
   The level itself is relative to the club's own average attendance
   (see heatmap_intensity_level() in functions.php), not a fixed
   headcount — a fixed CSS scale wouldn't know what "a lot of riders"
   means for this particular club. */
.heatmap-outer {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.heatmap-day-labels {
  display: grid;
  grid-template-rows: repeat(7, 14px);
  row-gap: 4px;
  text-align: right;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy-mute);
  flex-shrink: 0;
}

.heatmap-grid {
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 14px;
  grid-template-rows: repeat(7, 14px);
  row-gap: 4px;
  justify-content: space-between;
}

.heatmap-cell {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.heatmap-cell::before {
  content: "";
  display: block;
  border-radius: 50%;
  background: var(--navy);
  width: 3px;
  height: 3px;
  opacity: 0.35;
}

.heatmap-cell.heatmap-level-0::before { opacity: 0; }
.heatmap-cell.heatmap-level-1::before { width: 6px;  height: 6px;  opacity: 0.45; }
.heatmap-cell.heatmap-level-2::before { width: 9px;  height: 9px;  opacity: 0.65; }
.heatmap-cell.heatmap-level-3::before { width: 12px; height: 12px; opacity: 0.85; }
.heatmap-cell.heatmap-level-4::before { width: 15px; height: 15px; opacity: 1; }

.milestone-post {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

.milestone-post:last-child { margin-bottom: 0; }

.milestone-post-avatar img,
.milestone-post-avatar .avatar-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}

.milestone-post-avatar .avatar-badge { font-size: 15px; }

.milestone-post-body { flex: 1; min-width: 0; }

.milestone-post-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.milestone-post-name {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text);
  text-decoration: none;
}

.milestone-post-name:hover { color: var(--coral-deep); text-decoration: underline; }

.milestone-post-time {
  font-size: 12px;
  color: var(--navy-mute);
  white-space: nowrap;
  flex-shrink: 0;
}

.milestone-post-content {
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.4;
}

.milestone-post-emoji {
  font-size: 13px;
  margin-right: 5px;
  vertical-align: middle;
}

.milestone-post-meta {
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--navy-mute);
}

.role-badge.role-rider {
  background: var(--line);
  color: var(--navy-mute);
}

/* Custom role tags (rider.php) — purely cosmetic, no permissions
   attached, so deliberately a different color from role-leader/role-rider
   rather than looking like a third "real" access level. */
.role-badge.role-custom {
  background: #E8ECFB;
  color: var(--navy);
}

.rider-menu-dropdown a {
  display: block;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

.rider-menu-dropdown a:hover { background: var(--cream); }

.rider-menu-dropdown a.active { background: var(--yellow); color: var(--text); }

/* A labeled subsection within the account dropdown (e.g. "Admin" with
   just Site Admin in it, "Account" with Profile/Settings/Sign out) —
   its own divider and small uppercase label, same visual language as
   .rider-menu-name's divider above it, so each group reads as distinct
   rather than everything sitting flat in one undivided list. */
.rider-menu-subsection {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 4px;
}

.rider-menu-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy-mute);
  padding: 6px 10px 2px;
}

.rider-menu-nav-section {
  display: none;
}

/* --------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------- */

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}

.page-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.page-heading h1 {
  font-family: var(--font-display);
  font-size: 30px;
  margin: 0;
}

.page-heading p {
  margin: 4px 0 0;
  color: var(--navy-mute);
  font-size: 15px;
}

.page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------
   KPI strip — "cyclocomputer" readouts
   -------------------------------------------------------------------- */

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 36px;
}

.kpi-card {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 16px 14px;
  color: var(--cream);
  position: relative;
  overflow: hidden;
}

.kpi-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(245,214,103,0.10), transparent 55%);
  pointer-events: none;
}

.kpi-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--yellow);
  margin-bottom: 8px;
  line-height: 1.3;
}

.kpi-value {
  font-family: var(--font-mono);
  font-size: clamp(19px, 2.6vw, 30px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.kpi-unit {
  font-size: 14px;
  color: #C9C9EA;
  margin-left: 4px;
}

/* .kpi-label/.kpi-value default to colors meant for the dark .kpi-card
   background (yellow label, light value) — this page reuses them on a
   plain white card, so both need overriding for readable contrast. */
.sync-rider-count .kpi-label { color: var(--navy-mute); }
.sync-rider-count .kpi-value { color: var(--text); }

.progress-row-label {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy-mute);
  margin-bottom: 6px;
}

.progress-track {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--navy);
  border-radius: 999px;
  transition: width 0.2s ease;
}

.progress-fill-alt {
  background: var(--coral);
}

/* --------------------------------------------------------------------
   Elevation-line divider — signature element
   -------------------------------------------------------------------- */

.elevation-divider {
  width: 100%;
  height: 28px;
  margin: 8px 0 32px;
  color: var(--yellow-deep);
  opacity: 0.9;
}

/* --------------------------------------------------------------------
   Dashboard grid: leaderboard + recent rides
   -------------------------------------------------------------------- */

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line);
}

.card-header h2 {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0;
}

/* Collapsible groupings on admin/admin.php — native <details>/<summary>,
   so expand/collapse works with zero JS and stays keyboard/screen-reader
   accessible for free. Each section's own cards sit inside unchanged;
   this only wraps them, it doesn't restyle them. */
.admin-section {
  margin-bottom: 20px;
}

.admin-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 14px 20px;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  user-select: none;
}

.admin-section-title::-webkit-details-marker { display: none; }

.admin-section-title .admin-section-arrow {
  font-size: 11px;
  color: #fff;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.admin-section[open] > .admin-section-title .admin-section-arrow {
  transform: rotate(90deg);
}

.admin-section-body {
  padding-top: 20px;
}

.subtle-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--coral-deep);
  text-decoration: none;
}

/* Leaderboard table */

.leaderboard { width: 100%; border-collapse: collapse; }

.leaderboard th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy-mute);
  font-weight: 700;
  padding: 10px 22px;
  border-bottom: 1px solid var(--line);
}

/* Sortable column headers (riders.php, personal-bests.php) — the link
   inherits the th's own text styling rather than looking like a normal
   inline link, so a sortable header reads the same as a plain one
   until you notice the arrow or hover it. */
.leaderboard th a.sortable-col {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}

.leaderboard th a.sortable-col:hover { color: var(--text); }

.leaderboard th a.sortable-col.active { color: var(--text); }

.leaderboard th a.sortable-col .sort-arrow { font-size: 9px; }

.leaderboard td {
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.leaderboard tr:last-child td { border-bottom: none; }

.pace-group-row td {
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 9px 22px;
}

.rank-cell {
  font-family: var(--font-mono);
  color: var(--navy-mute);
  width: 28px;
}

.rider-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avatar-badge.rider-avatar-static {
  width: 30px;
  height: 30px;
  font-size: 11px;
}

.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--line);
}

.avatar-badge.profile-avatar-badge {
  width: 96px;
  height: 96px;
  font-size: 32px;
  flex-shrink: 0;
}

.rider-name { font-weight: 600; }
.rider-name a { text-decoration: none; }
.rider-name a:hover { color: var(--coral-deep); text-decoration: underline; }

/* Same treatment as .ride-title on rides.php — used for links inside
   table cells on ride.php, riders.php, and rider.php (e.g. the ride
   history table's title links). */
.table-link { text-decoration: none; }
.table-link:hover { color: var(--coral-deep); text-decoration: underline; }
.rider-nickname { color: var(--navy-mute); font-size: 12.5px; }

.stat-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Recent rides list */

.ride-list { list-style: none; margin: 0; padding: 0; }

.ride-item {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}

.ride-item:last-child { border-bottom: none; }

.ride-item-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.ride-title {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text);
  text-decoration: none;
}

.ride-title:hover { color: var(--coral-deep); text-decoration: underline; }

.ride-date {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--navy-mute);
  white-space: nowrap;
}

.ride-route {
  font-size: 13px;
  color: var(--navy-mute);
  margin: 3px 0 8px;
}

.detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.detail-list li {
  font-size: 14px;
  color: var(--text);
}

.ride-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 12.5px;
}

.ride-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  color: var(--text);
  white-space: nowrap;
}

/* Empty state */

.empty-state {
  padding: 40px 22px;
  text-align: center;
  color: var(--navy-mute);
}

.empty-state strong { display: block; color: var(--text); margin-bottom: 4px; font-family: var(--font-display); font-size: 15px; }

/* --------------------------------------------------------------------
   Strava connect callout
   -------------------------------------------------------------------- */

.connect-callout {
  margin-top: 24px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--cream);
  flex-wrap: wrap;
}

.connect-callout h3 {
  font-family: var(--font-display);
  font-size: 17px;
  margin: 0 0 4px;
}

.connect-callout p {
  margin: 0;
  font-size: 13.5px;
  color: #C9C9EA;
  max-width: 46ch;
}

/* --------------------------------------------------------------------
   Forms + admin UI
   -------------------------------------------------------------------- */

.form-group { margin-bottom: 18px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.form-hint {
  font-size: 12px;
  color: var(--navy-mute);
  margin-top: 4px;
}

.form-input,
.form-textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--coral);
}

.form-textarea { resize: vertical; min-height: 90px; }

.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

.btn-primary,
.btn-secondary,
.btn-danger,
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}

.btn-primary {
  background: var(--navy);
  color: var(--cream);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}

.btn-danger {
  background: transparent;
  color: var(--coral-deep);
  border: 1px solid var(--coral);
}

.btn-whatsapp {
  background: #25D366;
  color: #fff;
}

.btn-whatsapp:hover { background: #1EBE5A; }

.btn-sm {
  padding: 6px 12px;
  font-size: 12.5px;
}

.alert-error {
  background: #FFF0F1;
  border: 1px solid var(--coral);
  color: var(--coral-deep);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 20px;
}

.alert-error ul { margin: 4px 0 0; padding-left: 18px; }

.alert-success {
  background: #EEF8F2;
  border: 1px solid var(--green);
  color: #2F7550;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 20px;
}

.alert-info {
  display: block;
  background: #FFFBEA;
  border: 1px solid var(--yellow-deep);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 20px;
  text-decoration: none;
}

.alert-info:hover { background: #FFF6D6; }

.table-actions { display: flex; gap: 10px; }

.table-actions a { font-size: 13px; font-weight: 600; text-decoration: none; }

.link-edit { color: var(--navy-soft); }
.link-delete { color: var(--coral-deep); }

/* --------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------- */

.table-mobile-hint {
  display: none;
}

@media (max-width: 860px) {
  .dashboard-grid { grid-template-columns: 1fr; }

  .nav-menu-toggle { display: flex; }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--navy);
    padding: 10px;
    box-shadow: 0 12px 30px -10px rgba(30, 40, 102, 0.5);
    z-index: 70;
  }

  .main-nav.open { display: flex; }

  .main-nav a {
    padding: 12px 14px;
    border-radius: 8px;
  }

  /* Logged-in visitors get their nav links folded into the account
     dropdown instead (see .rider-menu-nav-section below) — one
     hamburger, not two. The inline/toggleable .main-nav above is only
     for logged-out visitors, who have no account menu to fold it into. */
  .site-header.is-logged-in .main-nav { display: none; }

  .rider-menu-dropdown { min-width: 220px; }

  .rider-menu-nav-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
    padding-bottom: 8px;
  }
}

/* Portrait phones only — landscape phones and anything wider than
   860px keep the full table. Deliberately keyed on orientation, not
   just width, since a phone turned sideways has plenty of room for
   every column. */
@media (max-width: 860px) and (orientation: portrait) {
  .table-mobile-hint {
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--navy-mute);
    padding: 10px 16px;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
  }

  .col-extra { display: none; }
}

@media (max-width: 620px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Shared by the "Next ride" card (index.php) and each ride on
   upcoming.php: a route image sits beside the ride's title/details on
   desktop, but a fixed-width image column squashes the details column
   into too little space on a narrow phone. Grid areas let the exact
   same markup reorder into a clean single-column stack on mobile
   (title, then image, then the rest) instead - no separate markup
   needed for each breakpoint. */
.ride-card-layout {
  display: grid;
  grid-template-columns: 160px 1fr;
  grid-template-areas:
    "image title"
    "image details";
  column-gap: 18px;
  row-gap: 6px;
}

.ride-card-layout.no-image {
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    "details";
}

.ride-card-image-col { grid-area: image; }
.ride-card-title-row { grid-area: title; margin: 0; }
.ride-card-details { grid-area: details; min-width: 0; }

@media (max-width: 620px) {
  .ride-card-layout,
  .ride-card-layout.no-image {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "image"
      "details";
    row-gap: 12px;
  }
}

@media (max-width: 520px) {
  .kpi-strip { grid-template-columns: 1fr; }
  .page { padding: 28px 18px 60px; }
  .form-row { grid-template-columns: 1fr; }
}