/* ── SportDogHub shared styles ─────────────────────────────────────────────── */

/* ── CSS Custom Properties ────────────────────────────────────────────────── */
:root {
  --sdh-primary: #0d6efd;
  --sdh-primary-dark: #0a3d91;
  --sdh-accent-admin: #dc3545;
  --sdh-accent-club: #198754;
  --sdh-accent-sk: #e8730a;
  --sdh-bg: #f0f4f8;
  --sdh-bg-admin: #f8f9fa;
  --sdh-card-radius: 16px;
  --sdh-card-shadow: 0 2px 12px rgba(0,0,0,.08);
  --sdh-card-shadow-hover: 0 6px 20px rgba(0,0,0,.13);
  --sdh-gradient: linear-gradient(135deg, #0d6efd 0%, #0a3d91 100%);
}

body { background: var(--sdh-bg); }

/* ── Specialty class badges ───────────────────────────────────────────────── */
.badge-mini       { background-color: #fd7e14; color: #fff; }

/* ── Shared card style ────────────────────────────────────────────────────── */
.sdh-card {
  border-radius: var(--sdh-card-radius);
  border: none;
  box-shadow: var(--sdh-card-shadow);
  transition: transform .15s, box-shadow .15s;
}
.sdh-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sdh-card-shadow-hover);
}

/* ── Avatar overlay (upload prompt) ───────────────────────────────────────── */
.avatar-wrap { position: relative; display: inline-block; cursor: pointer; }
.avatar-wrap:hover .avatar-overlay { opacity: 1; }
.avatar-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
  color: #fff; font-size: 0.7rem;
  text-align: center; line-height: 1.2;
}

/* ── Stat card gradients ──────────────────────────────────────────────────── */
.stat-card { border-radius: 12px; }
.card-best     { background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%); color: #fff; }
.card-avg      { background: linear-gradient(135deg, #198754 0%, #157347 100%); color: #fff; }
.card-splashes { background: linear-gradient(135deg, #6f42c1 0%, #59359a 100%); color: #fff; }
.card-dogs     { background: linear-gradient(135deg, #6f42c1 0%, #59359a 100%); color: #fff; }

/* ── Auth page layout (login, register, change-password) ──────────────────── */
.auth-body { background: #f8f9fa; margin: 0; padding: 0; overflow-x: hidden; }

.auth-split {
  display: flex;
  min-height: 100vh;
}

.auth-photo {
  flex: 0 0 45%;
  background: linear-gradient(rgba(10,30,50,.45), rgba(10,30,50,.6)),
              url('/static/images/auth-hero.jpg') center/cover no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 3rem;
  position: relative;
}
.auth-photo-overlay {
  position: relative;
  z-index: 1;
}
.auth-photo-brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
  margin-bottom: .5rem;
}
.auth-photo-brand .sdh-brand-top {
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 4px;
  color: #fff;
  font-weight: 700;
}
.auth-photo-brand .sdh-brand-bot {
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: 2rem;
  letter-spacing: 2px;
  color: #fff;
  font-weight: 700;
  line-height: 1.1;
  border-bottom: 3px solid #ff6b35;
  padding-bottom: 4px;
  display: inline-block;
  align-self: flex-start;
}
.auth-photo-tagline {
  color: rgba(255,255,255,.85);
  font-size: 1rem;
  margin: 0;
  font-weight: 500;
}

.auth-form-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}

.auth-wrap { max-width: 420px; margin: 0 auto; padding: 2rem 1.5rem; }
.auth-wrap.wide { max-width: 500px; }
.brand-icon { font-size: 3rem; line-height: 1; }
.sdh-logo-auth { height: 80px; width: auto; display: block; margin: 0 auto 8px; }

@media (max-width: 991.98px) {
  .auth-split { flex-direction: column; }
  .auth-photo {
    flex: 0 0 auto;
    min-height: 200px;
    padding: 2rem;
    align-items: flex-end;
  }
  .auth-photo-brand .sdh-brand-top { font-size: 1.2rem; }
  .auth-photo-brand .sdh-brand-bot { font-size: 1.5rem; }
  .auth-form-panel { justify-content: flex-start; }
  .auth-wrap { padding-top: 2rem; }
}

@media (max-width: 575.98px) {
  .auth-photo { min-height: 160px; padding: 1.5rem; }
  .auth-wrap { padding: 1.5rem 1rem; }
}

/* ── Monospace distances ──────────────────────────────────────────────────── */
.dist-mono { font-family: monospace; }
.dist-cell { font-family: monospace; }
.dog-uid   { font-family: monospace; font-size: 0.85rem; color: #6c757d; }

/* ── Medal ────────────────────────────────────────────────────────────────── */
.medal { font-size: 1.1rem; line-height: 1; }

/* ── Rich text (club descriptions, event descriptions) ────────────────────── */
.club-description p:last-child  { margin-bottom: 0; }
.club-description p:first-child { margin-top: 0; }
.club-description ul,
.club-description ol { padding-left: 1.25rem; margin-bottom: 0; }

.event-description p,
.event-description ul,
.event-description ol { margin-bottom: 0.5rem; }
.event-description p:last-child,
.event-description ul:last-child,
.event-description ol:last-child { margin-bottom: 0; }
.event-description a { color: #0d6efd; }

/* ── Sortable columns ────────────────────────────────────────────────────── */
.sortable { cursor: pointer; user-select: none; }
.sortable:hover { background: #f0f0f0; }
.sort-icon { opacity: 0.3; font-size: 0.75rem; }
.sort-icon.active { opacity: 1; }

/* ── Best row highlight ───────────────────────────────────────────────────── */
tr.best-row { background: #d1e7dd !important; }

/* ── Avatar hover preview ─────────────────────────────────────────────────── */
.avatar-preview-popup {
  position: fixed; z-index: 9999;
  display: none; pointer-events: none;
  background: #fff; border-radius: 10px; padding: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.avatar-preview-popup img {
  width: 180px; height: 180px;
  object-fit: cover; border-radius: 8px; display: block;
}


/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION (Phase 1A)
   ═══════════════════════════════════════════════════════════════════════════ */

.sdh-nav {
  padding: .5rem 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  position: relative;
  z-index: 1030;
}
.sdh-nav.bg-dark { background-color: #111 !important; }

.sdh-nav .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}

/* ── Brand logo (CSS text) ─────────────────────────────────────────────── */
.sdh-brand-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}
.sdh-brand-top {
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: 1rem;
  letter-spacing: 3px;
  color: #fff;
  font-weight: 700;
}
.sdh-brand-bot {
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: 1.3rem;
  letter-spacing: 2px;
  color: #fff;
  font-weight: 700;
  line-height: 1.1;
  border-bottom: 3px solid #ff6b35;
  padding-bottom: 3px;
  display: inline-block;
  align-self: flex-start;
}
.sdh-brand-accent { color: #ff6b35; }
.sdh-brand-logo:hover { text-decoration: none; }
.sdh-brand-logo:hover .sdh-brand-top,
.sdh-brand-logo:hover .sdh-brand-bot { color: #fff; }

/* Footer size */
.sdh-brand-lg .sdh-brand-top { font-size: 1rem; letter-spacing: 3px; }
.sdh-brand-lg .sdh-brand-bot { font-size: 1.3rem; letter-spacing: 2px; }

/* Auth pages (dark text on light bg, centered, larger) */
.sdh-brand-auth {
  align-items: center;
  margin-bottom: 8px;
}
.sdh-brand-auth .sdh-brand-top {
  color: #1a1a1a;
  font-size: 1.4rem;
  letter-spacing: 4px;
}
.sdh-brand-auth .sdh-brand-bot {
  color: #1a1a1a;
  font-size: 1.8rem;
  letter-spacing: 2px;
  align-self: center;
}
.sdh-brand-auth:hover .sdh-brand-top,
.sdh-brand-auth:hover .sdh-brand-bot { color: #1a1a1a; }

@media (max-width: 575.98px) {
  .sdh-brand-top { font-size: .85rem; }
  .sdh-brand-bot { font-size: 1.05rem; }
}

.sdh-nav .nav-link {
  font-weight: 500;
  font-size: .9rem;
  padding: .5rem .75rem;
  transition: opacity .15s;
}
.sdh-nav .nav-link:hover { opacity: .85; }
.sdh-nav .nav-link.active { font-weight: 700; }
.sdh-nav .nav-link.dropdown-toggle.active { border-bottom: 2px solid #ffc107; padding-bottom: calc(.5rem - 2px); }

/* Breadcrumbs */
.sdh-breadcrumb { background: transparent; padding: .5rem 0 0; margin-bottom: 0; font-size: .85rem; }
.sdh-breadcrumb .breadcrumb-item a { color: #6c757d; text-decoration: none; }
.sdh-breadcrumb .breadcrumb-item a:hover { color: #0d6efd; text-decoration: underline; }
.sdh-breadcrumb .breadcrumb-item.active { color: #212529; font-weight: 500; }

/* Nav dropdown styling */
.sdh-dropdown {
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  padding: .5rem;
  min-width: 220px;
}
.sdh-dropdown .dropdown-item {
  border-radius: 8px;
  padding: .5rem .75rem;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.sdh-dropdown .dropdown-item:hover { background: #f0f4f8; }
.dropdown-icon { font-size: 1.1rem; width: 1.5rem; text-align: center; flex-shrink: 0; }

/* Nav avatar placeholder */
.nav-avatar-placeholder {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL SEARCH (Phase 1A)
   ═══════════════════════════════════════════════════════════════════════════ */

.sdh-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.sdh-search-overlay.open {
  opacity: 1;
  visibility: visible;
}

.sdh-search-container {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 64px rgba(0,0,0,.25);
  overflow: hidden;
  transform: translateY(-10px);
  transition: transform .2s;
}
.sdh-search-overlay.open .sdh-search-container {
  transform: translateY(0);
}

.sdh-search-input-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e9ecef;
}
.sdh-search-icon { flex-shrink: 0; }
.sdh-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  background: transparent;
}
.sdh-search-close {
  background: none;
  border: none;
  color: #6c757d;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}
.sdh-search-close:hover { background: #f0f0f0; }

.sdh-search-results {
  max-height: 60vh;
  overflow-y: auto;
}

.search-category { padding: .5rem 0; }
.search-cat-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6c757d;
  font-weight: 700;
  padding: .25rem 1.25rem;
}
.search-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 1.25rem;
  text-decoration: none;
  color: #212529;
  transition: background .1s;
}
.search-item:hover { background: #f0f4f8; }
.search-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.search-avatar-ph {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.search-emoji {
  width: 32px;
  text-align: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.search-name { font-weight: 600; font-size: .9rem; }
.search-sub { font-size: .78rem; color: #6c757d; }


/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER (Phase 1D)
   ═══════════════════════════════════════════════════════════════════════════ */

.sdh-footer {
  background: #1a1d21;
  color: rgba(255,255,255,.6);
  font-size: .85rem;
  margin-top: 3rem;
}
.sdh-footer a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
}
.sdh-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}
.footer-tagline {
  font-size: .85rem;
  color: rgba(255,255,255,.5);
  line-height: 1.6;
}
.footer-heading {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.4);
  font-weight: 700;
  margin-bottom: .75rem;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li { margin-bottom: .4rem; }
.footer-links a { font-size: .85rem; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 1rem 0;
  font-size: .78rem;
  color: rgba(255,255,255,.35);
}


/* ═══════════════════════════════════════════════════════════════════════════
   LANDING PAGE — LOGGED OUT (Phase 1B)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero */
.landing-hero {
  background: linear-gradient(rgba(15,40,65,.55), rgba(15,40,65,.7)),
              url('/static/images/hero-collage.jpg') center/cover no-repeat;
  color: #fff;
  padding: 5rem 1.5rem 4.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.landing-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(15,40,65,.4) 100%);
  pointer-events: none;
}
.landing-hero-title {
  font-size: 3.2rem;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: .75rem;
  position: relative;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.landing-hero-sub {
  font-size: 1.2rem;
  opacity: .9;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
  position: relative;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* Pillar cards */
.pillar-card {
  border-radius: 16px;
  transition: transform .2s, box-shadow .2s;
}
.pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.pillar-icon { font-size: 2.5rem; }

/* Sports roadmap */
.sports-roadmap { position: relative; }
.roadmap-stage { display: flex; gap: 1.25rem; }
.roadmap-label {
  display: flex; flex-direction: column; align-items: center;
  min-width: 90px; padding-top: .5rem;
}
.roadmap-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
.roadmap-label-text {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; margin-top: .4rem; white-space: nowrap;
}
.roadmap-content { flex: 1; min-width: 0; }

/* Roadmap cards */
.roadmap-card {
  background: #fff; border-radius: 14px; padding: 1.25rem 1rem;
  text-align: center; transition: transform .2s, box-shadow .2s;
  border: 1px solid #e9ecef;
}
.roadmap-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.roadmap-card-icon { font-size: 2.2rem; margin-bottom: .35rem; }

.roadmap-card-active {
  border-color: #198754; border-width: 2px;
  background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
}
.roadmap-card-ondeck {
  border-color: #b6d4fe; background: linear-gradient(135deg, #eff6ff 0%, #fff 100%);
}
.roadmap-card-hole {
  border-color: #ffecb5; background: linear-gradient(135deg, #fffbeb 0%, #fff 100%);
}

/* Coming soon pills */
.coming-soon-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 2rem;
  padding: .35rem .9rem; font-size: .85rem; color: #666;
  transition: background .15s;
}
.coming-soon-pill:hover { background: #ebebeb; }

/* Roadmap responsive: stack on small screens */
@media (max-width: 575.98px) {
  .roadmap-stage { flex-direction: column; gap: .5rem; }
  .roadmap-label { flex-direction: row; gap: .5rem; min-width: auto; padding-top: 0; }
}

/* Stats section */
.stats-section {
  background: var(--sdh-gradient);
  color: #fff;
}
.stat-counter { padding: 1rem; }
.stat-num {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
}
.stat-lbl {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .7;
  margin-top: .25rem;
}

/* Ticker */
.ticker-wrap {
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  padding: .5rem 0;
}
.ticker-content {
  display: flex;
  gap: 2rem;
  white-space: nowrap;
  animation: ticker 30s linear infinite;
}
.ticker-item {
  flex-shrink: 0;
  font-size: .85rem;
  opacity: .85;
}
.ticker-score {
  font-weight: 700;
  color: #ffc107;
}
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Steps */
.step-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sdh-gradient);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* CTA Banner */
.cta-banner {
  background: linear-gradient(135deg, #0a3d91 0%, #0d6efd 50%, #6610f2 100%);
  padding: 4rem 1.5rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LOGGED-IN DASHBOARD (Phase 1C)
   ═══════════════════════════════════════════════════════════════════════════ */

.dash-welcome {
  background: #fff;
  border-bottom: 1px solid #e9ecef;
  padding: 1.25rem 0;
}
.dash-avatar {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px;
  max-height: 48px;
  object-fit: cover;
  flex-shrink: 0;
}
.dash-avatar-ph {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sdh-gradient);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Account dashboard dog cards */
.dash-dog-card {
  border: 1px solid #e9ecef; border-radius: 12px; padding: 1rem;
  cursor: pointer; transition: box-shadow 0.2s, transform 0.15s;
  background: #fff;
}
.dash-dog-card:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.1); transform: translateY(-2px); }
.dash-dog-card .dog-avatar-sm {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
}
.dash-dog-card .dog-avatar-placeholder {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem; color: #fff;
}



/* ═══════════════════════════════════════════════════════════════════════════
   EXISTING STYLES (preserved from original)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Staff portal sidebar ─────────────────────────────────────────────────── */
.staff-layout { display: flex; min-height: calc(100vh - 56px); }

.staff-sidebar {
  width: 240px;
  background: #fff;
  border-right: 1px solid #dee2e6;
  flex-shrink: 0;
  overflow-y: auto;
  padding-top: 1rem;
}

.staff-sidebar .sidebar-section {
  padding: 0 0.75rem;
  margin-bottom: 1rem;
}
.staff-sidebar .sidebar-label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6c757d;
  padding: 0 0.75rem;
  margin-bottom: 0.25rem;
  font-weight: 700;
}
.staff-sidebar .sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  color: #212529;
  text-decoration: none;
  font-size: .875rem;
  border-left: 3px solid transparent;
  transition: background .1s;
}
.staff-sidebar .sidebar-link:hover {
  background: #f0f4f8;
}
.staff-sidebar .sidebar-link.active {
  background: #e8f0fe;
  font-weight: 600;
}
.staff-sidebar .sidebar-link.active.accent-admin  { border-left-color: var(--sdh-accent-admin); }
.staff-sidebar .sidebar-link.active.accent-club   { border-left-color: var(--sdh-accent-club); }
.staff-sidebar .sidebar-link.active.accent-sk     { border-left-color: var(--sdh-accent-sk); }

.staff-main {
  flex: 1;
  min-width: 0;
  background: var(--sdh-bg-admin);
}

/* Mobile sidebar overlay */
.staff-sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1040;
}

@media (max-width: 767.98px) {
  .staff-sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    height: 100vh;
    z-index: 1050;
    transition: left .25s ease;
    padding-top: 1rem;
  }
  .staff-sidebar.show {
    left: 0;
  }
  .staff-sidebar-backdrop.show {
    display: block;
  }
  .staff-main {
    width: 100%;
  }
  .staff-toggle-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1030;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
  }
}
@media (min-width: 768px) {
  .staff-toggle-btn { display: none !important; }
}

/* ── Staff-specific ───────────────────────────────────────────────────────── */
tr.editing td { background: #fff9c4 !important; }
.btn-close-sm { width: 1rem; height: 1rem; flex-shrink: 0; }
.reg-item {
  display: flex; justify-content: space-between;
  align-items: center; padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
}
.reg-item:last-child { border-bottom: none; }
.entry-section { border-top: 2px solid #dee2e6; padding-top: 1.5rem; margin-top: 0.5rem; }

/* ── Drilldown (leaderboard) ──────────────────────────────────────────────── */
.drilldown { list-style: none; padding: 0; margin: 0; }
.drilldown li { border-left: 3px solid #dee2e6; padding: .35rem .75rem; margin-bottom: 4px; font-size: .9rem; }
.drilldown li.live { border-color: #0d6efd; }
.drilldown li.soon { border-color: #dee2e6; color: #adb5bd; }

/* ── Calendar (events page) ───────────────────────────────────────────────── */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-day-header {
  text-align: center; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; color: #6c757d; padding: 4px 0;
}
.cal-cell {
  min-height: 80px; background: #fff; border-radius: 6px; padding: 4px 6px;
  border: 1px solid #e9ecef; font-size: .78rem;
  overflow: hidden; min-width: 0;
}
.cal-cell.other-month { background: #f8f9fa; color: #bbb; }
.cal-cell.today { border-color: #0d6efd; box-shadow: inset 0 0 0 1px #0d6efd; }
.cal-date { font-weight: 600; margin-bottom: 2px; }
.cal-event-pill {
  display: flex; align-items: center; gap: 4px;
  background: #0d6efd; color: #fff; border-radius: 3px;
  padding: 1px 5px; margin-bottom: 2px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-size: .7rem;
  text-decoration: none; position: relative;
}
.cal-event-pill:hover { background: #0a58ca; color: #fff; }
.cal-event-pill.continued {
  background: #6ea8fe; border-radius: 3px;
  padding: 1px 5px;
}
.cal-event-pill .pill-text {
  overflow: hidden; text-overflow: ellipsis;
}
.cal-status-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  display: inline-block; border: 1px solid rgba(255,255,255,.4);
}
.cal-status-dot.st-open { background: #198754; }
.cal-status-dot.st-in_progress { background: #ffc107; border-color: rgba(255,255,255,.6); }
.cal-status-dot.st-pending_review { background: #fd7e14; }
.cal-status-dot.st-closed { background: #6c757d; }
.cal-status-dot.st-draft { background: #adb5bd; }
.cal-status-dot.st-cancelled { background: #dc3545; }
.cal-more-link {
  display: block; font-size: .65rem; color: #0d6efd; cursor: pointer;
  padding: 1px 2px; text-align: center;
}
.cal-more-link:hover { text-decoration: underline; }

/* ── Section divider (leaderboard) ────────────────────────────────────────── */
.section-divider { border-top: 2px solid #dee2e6; }

/* ── Day divider (dog detail) ─────────────────────────────────────────────── */
.day-divider td {
  background: #e9ecef; text-transform: uppercase;
  font-size: .75rem; letter-spacing: 0.06em;
}

/* ── Dog cards ────────────────────────────────────────────────────────────── */
.dog-card { transition: box-shadow .15s, transform .1s; cursor: pointer; }
.dog-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.14) !important; transform: translateY(-2px); }
.dog-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dog-avatar-placeholder {
  width: 64px; height: 64px; border-radius: 50%; background: #dee2e6;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; flex-shrink: 0;
}
.dog-avatar-gradient {
  background: #e9ecef; color: #6c757d;
}
.dog-avatar-gradient-breed {
  background: #e9ecef; color: #6c757d;
}

/* ── Dogs page hero ──────────────────────────────────────────────────────── */
.dogs-hero {
  background: linear-gradient(135deg, #6610f2 0%, #0d6efd 60%, #0dcaf0 100%);
  color: #fff;
  padding: 2.5rem 1.5rem 0;
}
.dogs-hero-title {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: .25rem;
}
.dogs-hero-sub {
  opacity: .85;
  font-size: 1rem;
  margin-bottom: 0;
}
.dogs-hero-tabs .nav-link {
  color: rgba(255,255,255,.7);
  font-weight: 600;
  font-size: .9rem;
  border-radius: 8px 8px 0 0;
  padding: .5rem 1rem;
  border: none;
}
.dogs-hero-tabs .nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,.1);
}
.dogs-hero-tabs .nav-link.active {
  color: #212529;
  background: #f0f4f8;
}
.handler-avatar-gradient {
  background: linear-gradient(135deg, #fd7e14 0%, #dc3545 100%);
}

/* ── Event cards ──────────────────────────────────────────────────────────── */
.event-card { transition: box-shadow .15s, transform .1s; overflow: hidden; }
.event-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.15) !important; transform: translateY(-1px); }
.event-card-img {
  height: 100px;
  background-size: cover;
  background-position: center;
}

/* ── Events page hero ────────────────────────────────────────────────────── */
.events-hero {
  background: linear-gradient(135deg, #0d6efd 0%, #0a3d91 60%, #6610f2 100%);
  color: #fff;
  padding: 2.5rem 1.5rem 2rem;
}
.events-hero-title {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: .25rem;
}
.events-hero-sub {
  opacity: .85;
  font-size: 1rem;
  margin-bottom: 0;
}

/* ── Club cards ───────────────────────────────────────────────────────────── */
.club-card { cursor: pointer; transition: box-shadow .15s, transform .1s; overflow: hidden; }
.club-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); transform: translateY(-2px); }
.club-card-accent {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.club-card-initial {
  font-size: 1.5rem;
  font-weight: 800;
  color: rgba(255,255,255,.9);
  letter-spacing: .05em;
}

/* ── Clubs page hero ─────────────────────────────────────────────────────── */
.clubs-hero {
  background: linear-gradient(135deg, #198754 0%, #0d6efd 60%, #6610f2 100%);
  color: #fff;
  padding: 2.5rem 1.5rem 2rem;
}
.clubs-hero-title {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: .25rem;
}
.clubs-hero-sub {
  opacity: .85;
  font-size: 1rem;
  margin-bottom: 0;
}

/* ── Sport cards ──────────────────────────────────────────────────────────── */
.sport-card { border-radius: 16px; border: none; box-shadow: 0 2px 12px rgba(0,0,0,.08); transition: transform .15s, box-shadow .15s; }
.sport-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.13); }
.sport-icon { font-size: 2.8rem; margin-bottom: .6rem; }

/* ── Sport photo cards (sports browse page) ──────────────────────────────── */
.sport-photo-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e9ecef;
  background: #fff;
  transition: transform .2s, box-shadow .2s;
}
.sport-photo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.sport-photo-card-img {
  height: 140px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.sport-photo-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgba(0,0,0,.3));
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: .5rem;
}
.sport-photo-card-icon {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  position: relative;
}
.sport-photo-card-icon .sport-photo-card-badge {
  position: absolute;
  top: .5rem;
  right: .5rem;
}
.sport-photo-card-badge {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  padding: .2rem .5rem;
  border-radius: 4px;
}
.sport-photo-card-body {
  padding: .75rem 1rem;
  text-align: center;
}

/* ── Browse card (competitor) ─────────────────────────────────────────────── */
.browse-card { transition: box-shadow .15s, transform .1s; }
.browse-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.14) !important; transform: translateY(-2px); }

/* ── Competitor ───────────────────────────────────────────────────────────── */
.dog-link { text-decoration: none; font-weight: 600; }
.dog-link:hover { text-decoration: underline; }
.btn-mini  { background-color: #fd7e14; color: #fff; border-color: #fd7e14; }
.btn-mini:hover { background-color: #e8660a; color: #fff; border-color: #e8660a; }

/* ── Accordion highlight (leaderboards) ───────────────────────────────────── */
.accordion-button:not(.collapsed) { background-color: #e8f0fe; }

/* ── Status pill ──────────────────────────────────────────────────────────── */
.status-pill { font-size: .7rem; }

/* ── Import badges (admin import) ─────────────────────────────────────────── */
.badge-new-event      { background-color: #0d6efd; color: #fff; }
.badge-existing-event { background-color: #6c757d; color: #fff; }
.badge-new-dog        { background-color: #198754; color: #fff; }
.badge-existing-dog   { background-color: #6c757d; color: #fff; }
.badge-entry-skipped  { background-color: #ffc107; color: #212529; }

/* ── Hero (sport_detail) ─────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, #0d6efd 0%, #0a3d91 100%);
  color: #fff; padding: 3rem 1.5rem 2.5rem; text-align: center;
}
.hero h1 { font-size: 2.5rem; font-weight: 800; letter-spacing: -.02em; }
.hero .tagline { font-size: 1.15rem; opacity: .85; margin-top: .5rem; }
.stat-pill {
  display: inline-block; background: rgba(255,255,255,.15);
  border-radius: 999px; padding: .35rem 1rem;
  font-size: .9rem; margin: .25rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE-FIRST RESPONSIVE (Phase 1E)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
  .landing-hero {
    padding: 3rem 1rem 2.5rem;
  }
  .landing-hero-title {
    font-size: 2rem;
  }
  .landing-hero-sub {
    font-size: 1rem;
  }
  .stat-num { font-size: 1.8rem; }
  .step-circle { width: 44px; height: 44px; font-size: 1.2rem; }
  .cta-banner { padding: 2.5rem 1rem; }
  .cta-banner h2 { font-size: 1.5rem; }

  /* Stacked footer columns */
  .sdh-footer .row > [class*="col-"] { text-align: center; }
  .footer-tagline { max-width: 300px; margin: 0 auto; }

  /* Dashboard */
  .dash-quick-btns { display: none !important; }
  .dash-dog-card { flex: 0 0 140px; }
}

@media (max-width: 767.98px) {
  /* Search overlay */
  .sdh-search-container {
    margin: 0 1rem;
    border-radius: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .landing-hero-title { font-size: 2.6rem; }
}

/* ── Breed Autocomplete ──────────────────────────────────────────────────── */
.breed-dropdown {
  border: 1px solid #dee2e6;
  border-top: none;
  border-radius: 0 0 .375rem .375rem;
  background: #fff;
}
.breed-dropdown .breed-item {
  padding: .45rem .75rem;
  cursor: pointer;
  font-size: .875rem;
  border-bottom: 1px solid #f0f0f0;
}
.breed-dropdown .breed-item:last-child { border-bottom: none; }
.breed-dropdown .breed-item:hover,
.breed-dropdown .breed-item.active {
  background: #e9ecef;
}
.breed-dropdown .breed-item .breed-alias {
  color: #6c757d;
  font-size: .8rem;
}