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

/* ── CSS Custom Properties ────────────────────────────────────────────────── */
:root {
  --sdh-primary: #ff6b35;
  --sdh-primary-dark: #e55a25;
  --sdh-accent-admin: #dc3545;
  --sdh-accent-club: #198754;
  --sdh-accent-sk: #e8730a;
  --sdh-bg: #f0f4f8;
  --sdh-bg-admin: #f8f9fa;
  --sdh-text-muted: #374151;
  --sdh-border: #94A3B8;
  --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, #1a1a1a 0%, #2d2d2d 100%);
}

/* ── Outdoor readability: mobile font bump + text contrast overrides ── */
@media (max-width: 767.98px) {
  html { font-size: 19px; }
  body { font-weight: 500; }
}
/* ── Standard phone (375px) adjustments ── */
@media (max-width: 375px) {
  .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
  .card-body { padding: 0.85rem; }
  .btn { padding: 0.4rem 0.75rem; font-size: 0.88rem; }
  h1 { font-size: 1.4rem; }
  h5 { font-size: 1rem; }
}
/* ── Very small phone (320px) adjustments ── */
@media (max-width: 320px) {
  html { font-size: 17px; }
  .container, .container-fluid { padding-left: 8px; padding-right: 8px; }
  .card-body { padding: 0.65rem; }
  .badge { font-size: 0.65rem; padding: 0.2em 0.45em; }
  .btn-sm { font-size: 0.75rem; padding: 0.2rem 0.45rem; }
}

/* ── Swipe-to-delete for mobile table rows ── */
@media (hover: none) and (pointer: coarse) {
  .swipe-row { position: relative; overflow: hidden; }
  .swipe-row td { transition: transform 0.2s ease; }
  .swipe-row.swiped td { transform: translateX(-72px); }
  .swipe-delete-bg {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 72px; background: #dc3545;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 600; font-size: 0.8rem;
  }
}
/* Override Bootstrap text-muted for better outdoor contrast (4.6:1 → 9:1) */
.text-muted { color: var(--sdh-text-muted) !important; }
.text-secondary { color: var(--sdh-text-muted) !important; }

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

/* ── Sun Mode: amber-on-navy high-contrast for outdoor use ────────────── */
body.sun-mode {
  background: #0A1628 !important;
  color: #F1F5F9 !important;
  --bs-body-color: #F1F5F9;
  --bs-body-bg: #0A1628;
  --bs-emphasis-color: #F1F5F9;
  --bs-emphasis-color-rgb: 241, 245, 249;
  --bs-secondary-color: rgba(241,245,249,.75);
  --bs-tertiary-color: rgba(241,245,249,.5);
  --bs-border-color: rgba(255,255,255,.1);
}
body.sun-mode .text-muted,
body.sun-mode .text-secondary { color: #94A3B8 !important; }
body.sun-mode .text-dark { color: #F1F5F9 !important; }
body.sun-mode .text-body { color: #F1F5F9 !important; }
body.sun-mode .text-primary { color: #60A5FA !important; }
body.sun-mode .text-success { color: #4ADE80 !important; }
body.sun-mode .text-danger { color: #F87171 !important; }
body.sun-mode .text-warning { color: #FCD34D !important; }
body.sun-mode .text-info { color: #22D3EE !important; }
body.sun-mode .text-body-secondary { color: #94A3B8 !important; }
body.sun-mode a:not(.btn):not(.nav-link):not(.dropdown-item) { color: #60A5FA; }
body.sun-mode a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: #93C5FD; }
body.sun-mode h1, body.sun-mode h2, body.sun-mode h3,
body.sun-mode h4, body.sun-mode h5, body.sun-mode h6 { color: #F1F5F9; }
body.sun-mode .btn-outline-secondary { color: #94A3B8; border-color: rgba(255,255,255,.2); }
body.sun-mode .btn-outline-secondary:hover { background: #334155; color: #F1F5F9; border-color: #475569; }
body.sun-mode .btn-outline-secondary.active { background: #334155; color: #F1F5F9; border-color: #475569; }
body.sun-mode .dropdown-menu { background: #1E293B; border-color: rgba(255,255,255,.1); }
body.sun-mode .dropdown-item { color: #F1F5F9; }
body.sun-mode .dropdown-item:hover { background: #334155; color: #F1F5F9; }
body.sun-mode .badge.bg-light { background: #334155 !important; color: #F1F5F9 !important; }
body.sun-mode .badge.bg-secondary { background: #334155 !important; }
body.sun-mode .badge.bg-warning { color: #0A1628 !important; }
body.sun-mode .badge.bg-success { background: #166534 !important; }
body.sun-mode .badge.bg-danger { background: #991B1B !important; }
body.sun-mode .border-bottom { border-bottom-color: rgba(255,255,255,.1) !important; }
body.sun-mode .border { border-color: rgba(255,255,255,.1) !important; }

/* Global inline dark color overrides (attribute selectors) */
body.sun-mode [style*="color:#374151"] { color: #94A3B8 !important; }
body.sun-mode [style*="color:#495057"] { color: #94A3B8 !important; }
body.sun-mode [style*="color:#6b7280"] { color: #94A3B8 !important; }
body.sun-mode [style*="color:#111827"] { color: #F1F5F9 !important; }
body.sun-mode [style*="color:#333"] { color: #F1F5F9 !important; }
body.sun-mode [style*="color:#555"] { color: #CBD5E1 !important; }
body.sun-mode [style*="color:#1d4ed8"] { color: #60A5FA !important; }
body.sun-mode [style*="color:#047857"] { color: #4ADE80 !important; }
body.sun-mode [style*="color:#6610f2"] { color: #A78BFA !important; }
body.sun-mode [style*="color:#0d6efd"] { color: #60A5FA !important; }
body.sun-mode [style*="color:#667eea"] { color: #818CF8 !important; }
body.sun-mode [style*="color:#9ca3af"] { color: #64748B !important; }
body.sun-mode [style*="background:#e9ecef"] { background: #334155 !important; }
body.sun-mode [style*="background:#f8f9fa"] { background: #1E293B !important; }
body.sun-mode .info-icon { color: #94A3B8 !important; }
body.sun-mode .alert-light { background: #1E293B !important; border-color: rgba(255,255,255,.1) !important; color: #CBD5E1 !important; }

/* Cards, tables, inputs */
body.sun-mode .sdh-card,
body.sun-mode .card,
body.sun-mode .table { background: #1E293B !important; color: #F1F5F9 !important; border-color: rgba(255,255,255,.1) !important; }
body.sun-mode .table {
  --bs-table-color: #F1F5F9;
  --bs-table-bg: #1E293B;
  --bs-table-border-color: rgba(255,255,255,.1);
  --bs-table-hover-color: #F1F5F9;
  --bs-table-hover-bg: #162035;
  --bs-table-striped-color: #F1F5F9;
  --bs-table-striped-bg: rgba(255,255,255,.05);
  --bs-table-active-color: #F1F5F9;
  --bs-table-active-bg: rgba(255,255,255,.1);
}
body.sun-mode .table-light {
  --bs-table-color: #F1F5F9;
  --bs-table-bg: #0A1628;
  --bs-table-border-color: rgba(255,255,255,.15);
  --bs-table-hover-color: #F1F5F9;
  --bs-table-hover-bg: #162035;
}
body.sun-mode .table-light { background: #0A1628 !important; color: #F1F5F9 !important; }
body.sun-mode .table > :not(caption) > * > * { color: #F1F5F9 !important; }
body.sun-mode .table-bordered td,
body.sun-mode .table-bordered th { border-color: rgba(255,255,255,.15) !important; }
body.sun-mode .form-control,
body.sun-mode .form-select { background: #0F172A; border-color: #F59E0B; color: #F1F5F9; }

/* Badges & alerts */
body.sun-mode .alert-warning { background: #162035; border-color: #F59E0B; color: #FEF3C7; }

/* Live order cards */
body.sun-mode .live-card { background: #1E293B !important; color: #F1F5F9 !important; }
body.sun-mode .live-card.status-up { background: #14532d !important; border-left-color: #22c55e; }
body.sun-mode .live-card.status-deck { background: #422006 !important; border-left-color: #F59E0B; }
body.sun-mode .live-card.status-hole { background: #083344 !important; border-left-color: #22d3ee; }
body.sun-mode .live-card.status-scored { background: #1E293B !important; border-left-color: #64748b; }

/* Bubble table */
body.sun-mode .bubble-qualified { background: #14532d !important; }
body.sun-mode .bubble-table { background: #1E293B !important; color: #F1F5F9 !important; }
body.sun-mode .bubble-handler { color: #94A3B8 !important; }
body.sun-mode .bubble-update { color: #94A3B8 !important; }
body.sun-mode .bubble-dog { color: #F1F5F9; }
body.sun-mode .bubble-rank { color: #F59E0B; }
body.sun-mode .bubble-score { color: #F59E0B; }

/* Live order page */
body.sun-mode .progress-bar-live { background: #334155; }
body.sun-mode .btn-outline-dark { color: #94A3B8; border-color: rgba(255,255,255,.2); }
body.sun-mode .btn-outline-dark:hover { background: #334155; color: #F1F5F9; border-color: #475569; }
body.sun-mode .run-tab { background: #1E293B; color: #94A3B8; border-color: rgba(255,255,255,.15); }
body.sun-mode .run-tab.active { background: #F59E0B !important; color: #0A1628 !important; border-color: #F59E0B !important; }
body.sun-mode .bg-white { background: #1E293B !important; color: #F1F5F9 !important; }
body.sun-mode .bg-light { background: #162035 !important; color: #F1F5F9 !important; }
body.sun-mode .list-group-item { background: #1E293B; color: #F1F5F9; border-color: rgba(255,255,255,.1); }
body.sun-mode .card-body { color: #F1F5F9; }
body.sun-mode .card-title { color: #F1F5F9; }
body.sun-mode .card-text { color: #F1F5F9; }
body.sun-mode .modal-title { color: #F1F5F9; }
body.sun-mode .badge.text-dark { color: #0A1628 !important; }

/* Score inputs */
body.sun-mode input[type="number"],
body.sun-mode input[type="text"] { background: #0F172A; border-color: #F59E0B; color: #FFFFFF; }
::placeholder { color: #b0b8c1 !important; opacity: 1; }
body.sun-mode input::placeholder { color: rgba(255,255,255,.3) !important; }

/* Containers */
body.sun-mode .container,
body.sun-mode .container-fluid { color: #F1F5F9; }

/* Staff sidebar & entry table */
body.sun-mode .staff-sidebar { background: #0F172A; border-color: rgba(255,255,255,.1); }
body.sun-mode .staff-sidebar .sidebar-link { color: #CBD5E1; }
body.sun-mode .staff-sidebar .sidebar-link:hover { background: #1E293B; }
body.sun-mode .staff-sidebar .sidebar-link.active { background: #1E293B; }
body.sun-mode .staff-main { background: #0A1628; }
body.sun-mode .entry-section { color: #F1F5F9; }
body.sun-mode tr.editing td { background: #422006 !important; color: #F1F5F9 !important; }
body.sun-mode tr.best-row { background: #14532d !important; }

/* Event cards & stat cards */
body.sun-mode .evt-stat-card { background: #1E293B !important; border-color: rgba(255,255,255,.1) !important; }
body.sun-mode .evt-stat-card .stat-value { color: #F1F5F9 !important; }
body.sun-mode .evt-stat-card .stat-label { color: #94A3B8 !important; }
body.sun-mode .evt-card { background: #1E293B !important; border-color: rgba(255,255,255,.1) !important; }
body.sun-mode .evt-card .evt-card-title { color: #F1F5F9 !important; }
body.sun-mode .evt-card .evt-card-meta { color: #94A3B8 !important; }
body.sun-mode .evt-card .evt-card-footer { border-color: rgba(255,255,255,.1) !important; }
body.sun-mode .evt-section-header { color: #94A3B8 !important; }
body.sun-mode .past-events-table th { color: #94A3B8 !important; }
body.sun-mode .past-events-table td { color: #F1F5F9 !important; }
/* Sun toggle button */
.sun-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; background: #FEF3C7; border: 1px solid #F59E0B;
  border-radius: 8px; font-size: .75rem; font-weight: 700;
  color: #D97706; cursor: pointer; font-family: inherit;
}
.sun-toggle:hover { background: #FDE68A; }
body.sun-mode .sun-toggle {
  background: #F59E0B; color: #0A1628; border-color: #F59E0B;
}

/* ── Specialty class badges ───────────────────────────────────────────────── */
.badge-mini       { background-color: #fd7e14; color: #fff; }
.badge-pro {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #6610f2, #8b5cf6);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  vertical-align: middle;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  cursor: default;
  opacity: 0.75;
}

/* ── Loading skeleton shimmer ─────────────────────────────────────────────── */
.skeleton {
  background: #e2e8f0;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer { to { left: 100%; } }
.skeleton-line { height: 1rem; margin-bottom: 0.5rem; }
.skeleton-line.w75 { width: 75%; }
.skeleton-line.w50 { width: 50%; }
.skeleton-line.w25 { width: 25%; }
.skeleton-circle { border-radius: 50%; }
.skeleton-row {
  display: flex; gap: 0.75rem; align-items: center;
  padding: 0.75rem 0; border-bottom: 1px solid #f1f5f9;
}

/* ── Shared card style ────────────────────────────────────────────────────── */
.sdh-card {
  border-radius: var(--sdh-card-radius);
  border: 1px solid var(--sdh-border);
  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;
}
/* Camera badge for touch devices */
.avatar-cam {
  position: absolute; bottom: -2px; right: -2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sdh-primary); color: #fff;
  display: none; align-items: center; justify-content: center;
  font-size: 0.65rem; border: 2px solid #fff;
  pointer-events: none; z-index: 2;
}
@media (hover: none) and (pointer: coarse) {
  .avatar-cam { display: flex; }
  .avatar-overlay { display: none; }
}

/* ── Stat card gradients ──────────────────────────────────────────────────── */
.stat-card { border-radius: 12px; }
.card-best     { background: linear-gradient(135deg, #ff6b35 0%, #e55a25 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;
  position: relative;
}

.auth-home-link {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 10;
}
.auth-home-link a {
  color: #495057;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
}
.auth-home-link a:hover { color: #212529; text-decoration: underline; }

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

/* Reusable empty state component — centered icon + heading + optional CTA */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #6c757d;
}
.empty-state-icon {
  font-size: 2.5rem;
  color: #adb5bd;
  margin-bottom: .75rem;
  display: block;
  line-height: 1;
}
.empty-state-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: #212529;
  margin-bottom: .5rem;
}
.empty-state-text {
  font-size: .9rem;
  margin-bottom: 1rem;
}
.empty-state .btn { margin-top: .25rem; }
body.sun-mode .empty-state { color: #cbd5e1; }
body.sun-mode .empty-state-icon { color: #64748b; }
body.sun-mode .empty-state-title { color: #f5e8c7; }

@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: 110px; padding: 0.9rem 1rem; }
  .auth-wrap { padding: 1.5rem 1rem; }
}

/* ── Global mobile touch targets ─────────────────────────────────────────── */
/* iOS 44px floor for form inputs and buttons so every page gets sane tap
   targets on phones without needing per-template audits. Small variants get
   a 40px floor. */
@media (max-width: 575.98px) {
  .form-control,
  .form-select,
  .btn:not(.btn-sm):not(.btn-xs) {
    min-height: 44px;
  }
  .form-control-sm,
  .form-select-sm,
  .btn-sm {
    min-height: 40px;
  }
}

/* ── Monospace distances ──────────────────────────────────────────────────── */
.dist-mono { font-family: 'JetBrains Mono', monospace; }
.dist-cell { font-family: 'JetBrains Mono', monospace; }
.dog-uid   { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: var(--sdh-text-muted); }

/* ── 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: var(--sdh-primary); }

/* ── 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: 12px; padding: 6px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.35);
}
.avatar-preview-popup img {
  max-width: 320px; max-height: 420px;
  border-radius: 10px; 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;
  display: inline-block;
  align-self: flex-start;
}
.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 #ff6b35; 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: var(--sdh-text-muted); text-decoration: none; }
.sdh-breadcrumb .breadcrumb-item a:hover { color: var(--sdh-primary); 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; }

/* ── Default avatar placeholder (minimal outline) ────────────────────────── */
.sdh-avatar-ph {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid #cbd5e1;
  background: #fafbfc;
  color: #94a3b8;
  vertical-align: middle;
}
.sdh-avatar-ph.on-dark {
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.35);
}
body.sun-mode .sdh-avatar-ph {
  border-color: #475569;
  background: #1e293b;
  color: #64748b;
}

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


/* Nav search trigger (desktop) */
.sdh-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  padding: 5px 10px;
  color: rgba(255,255,255,.55);
  font-size: .82rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.sdh-search-trigger:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.35);
  color: rgba(255,255,255,.8);
}
.sdh-search-trigger-text { pointer-events: none; }
.sdh-search-trigger-kbd {
  font-family: inherit;
  font-size: .7rem;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 3px;
  padding: 1px 5px;
  line-height: 1.3;
  color: rgba(255,255,255,.5);
}

/* Mobile search button */
.sdh-mobile-search-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  padding: 10px 14px;
  color: rgba(255,255,255,.5);
  font-size: .9rem;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.sdh-mobile-search-btn:hover {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.7);
}

/* ═══════════════════════════════════════════════════════════════════════════
   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: var(--sdh-text-muted);
  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: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sdh-text-muted);
  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: var(--sdh-text-muted); }


/* ═══════════════════════════════════════════════════════════════════════════
   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);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.footer-beta-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255,107,53,.15);
  border: 1px solid rgba(255,107,53,.35);
  color: #ff9466;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: help;
}


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

/* Hero */
.landing-hero {
  color: #fff;
  padding: 5rem 1.5rem 4.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: #111;
}
/* Dark overlay above carousel slides, below content */
.landing-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.45)),
              radial-gradient(circle at 50% 50%, transparent 30%, rgba(0,0,0,.2) 100%);
  z-index: 2;
  pointer-events: none;
}
/* Carousel container — sits behind the overlay */
.hero-carousel {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
}
.hero-slide {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hero-slide.active {
  opacity: 1;
}
/* Ken Burns — slow zoom/pan for cinematic feel */
@keyframes kenBurns1 { from { transform: scale(1) translate(0,0); } to { transform: scale(1.08) translate(-1%,-1%); } }
@keyframes kenBurns2 { from { transform: scale(1.02) translate(1%,0); } to { transform: scale(1.1) translate(-1%,1%); } }
@keyframes kenBurns3 { from { transform: scale(1) translate(-1%,1%); } to { transform: scale(1.08) translate(1%,-1%); } }
@keyframes kenBurns4 { from { transform: scale(1.04) translate(0,1%); } to { transform: scale(1.1) translate(-1%,0); } }
@keyframes kenBurns5 { from { transform: scale(1.02) translate(1%,-1%); } to { transform: scale(1.08) translate(0,1%); } }
.hero-slide:nth-child(1) { animation: kenBurns1 8s ease-in-out infinite alternate; }
.hero-slide:nth-child(2) { animation: kenBurns2 8s ease-in-out infinite alternate; }
.hero-slide:nth-child(3) { animation: kenBurns3 8s ease-in-out infinite alternate; }
.hero-slide:nth-child(4) { animation: kenBurns4 8s ease-in-out infinite alternate; }
.hero-slide:nth-child(5) { animation: kenBurns5 8s ease-in-out infinite alternate; }
/* Dot indicators */
.hero-dots {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 10px;
  z-index: 4;
}
.hero-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  transition: background .3s, transform .3s;
  border: none; padding: 0;
}
.hero-dot:hover { background: rgba(255,255,255,.7); }
.hero-dot.active {
  background: var(--sdh-primary);
  transform: scale(1.3);
}
.landing-hero > .container {
  position: relative;
  z-index: 3;
}
.landing-hero-title {
  font-size: 3.2rem;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: .75rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
}
.landing-hero-sub {
  font-size: 1.2rem;
  opacity: .9;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}

/* Pillar cards */
.pillar-card {
  border-radius: 12px;
  border-top: 3px solid var(--sdh-primary);
  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: 1.8rem;
  color: var(--sdh-primary);
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 107, 53, 0.1);
}

/* Sports roadmap */
.sports-roadmap { position: relative; }
.roadmap-stage { display: flex; gap: 1.25rem; }

/* Kanban-style grid: status sections sit side-by-side as columns */
.sports-roadmap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 991.98px) {
  .sports-roadmap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .sports-roadmap-grid { grid-template-columns: 1fr; }
}
/* Override the default flex layout when stage is acting as a column */
.roadmap-stage-col {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.roadmap-stage-col .roadmap-label {
  flex-direction: row;
  width: auto;
  padding-top: 0;
  gap: .5rem;
  justify-content: flex-start;
}
.roadmap-stage-col .roadmap-label-text { margin-top: 0; }
.roadmap-stage-col .roadmap-content { flex: none; }

.roadmap-label {
  display: flex; flex-direction: column; align-items: center;
  width: 130px; flex-shrink: 0; 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; height: 100%;
}
.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%);
}
.roadmap-card-coming {
  border-color: #dee2e6; background: linear-gradient(135deg, #f8f9fa 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: #ff6b35;
}
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Events Nationwide map section */
.events-map-section {
  background: linear-gradient(135deg, #111 0%, #1a1a1a 100%);
}
.events-map-section .leaflet-container {
  background: #1a1a1a;
}

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

/* CTA Banner */
.cta-banner {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 60%, #ff6b35 100%);
  padding: 4rem 1.5rem;
}

/* ── Brand CTA button ────────────────────────────────────────────────────── */
.btn-brand {
  background-color: #ff6b35;
  border-color: #ff6b35;
  color: #fff;
  font-weight: 700;
}
.btn-brand:hover, .btn-brand:focus {
  background-color: #e55a25;
  border-color: #e55a25;
  color: #fff;
}


/* ═══════════════════════════════════════════════════════════════════════════
   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;
}
body.sun-mode .staff-sidebar .sidebar-section[style*="border-top"] { border-color: rgba(255,255,255,.1) !important; }
.staff-sidebar .sidebar-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sdh-text-muted);
  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: var(--sdh-primary); }
.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: var(--sdh-text-muted); 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: var(--sdh-primary); box-shadow: inset 0 0 0 1px var(--sdh-primary); }
.cal-date { font-weight: 600; margin-bottom: 2px; }
.cal-event-pill {
  display: flex; align-items: center; gap: 4px;
  background: var(--sdh-primary); 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: var(--sdh-primary-dark); color: #fff; }
.cal-event-pill.continued {
  background: #ffad85; 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: var(--sdh-primary); cursor: pointer;
  padding: 1px 2px; text-align: center;
}
.cal-more-link:hover { text-decoration: underline; }

/* ── Calendar mobile adjustments ──────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .cal-cell { min-height: 60px; padding: 3px 3px; font-size: .68rem; }
  .cal-day-header { font-size: .6rem; padding: 2px 0; }
  .cal-event-pill { padding: 1px 3px; font-size: .6rem; gap: 2px; }
  .cal-date { font-size: .7rem; }
}
@media (max-width: 374px) {
  .cal-cell { min-height: 50px; padding: 2px 2px; }
  .cal-event-pill .pill-text { font-size: .55rem; }
  .cal-event-pill { padding: 0px 2px; gap: 1px; }
  .cal-status-dot { width: 5px; height: 5px; }
}

/* ── 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 and .dog-avatar-gradient-breed removed — replaced by .sdh-avatar-ph */

/* ── Dogs page hero ──────────────────────────────────────────────────────── */
.dogs-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 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 removed — replaced by .sdh-avatar-ph */

/* ── Avatar showcase strip (Browse Dogs page) ────────────────────────────── */
.avatar-strip-wrap {
  position: relative;
  background: linear-gradient(180deg, #0f3460 0%, #162447 100%);
  padding: 1.1rem 0 .9rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: opacity .3s ease;
}
.avatar-strip-dismiss {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 3;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.5);
  font-size: 1rem;
  line-height: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s, border-color .2s;
  backdrop-filter: blur(4px);
}
.avatar-strip-dismiss:hover {
  background: rgba(255,255,255,.18);
  color: #fff;
  border-color: rgba(255,255,255,.3);
}
.avatar-strip-track {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 48px, black calc(100% - 48px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 48px, black calc(100% - 48px), transparent 100%);
}
.avatar-strip-content {
  display: flex;
  gap: 1.5rem;
  white-space: nowrap;
  animation: avatarScroll 45s linear infinite;
  width: max-content;
  padding: 4px 0;
}
.avatar-strip-content:hover {
  animation-play-state: paused;
}
.avatar-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  width: 72px;
}
.avatar-strip-item img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.avatar-strip-item:hover img {
  border-color: var(--sdh-primary);
  transform: scale(1.12);
  box-shadow: 0 0 16px rgba(59,130,246,.35), 0 4px 12px rgba(0,0,0,.3);
}
.avatar-strip-name {
  color: rgba(255,255,255,.7);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .02em;
  margin-top: 5px;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  transition: color .2s;
}
.avatar-strip-item:hover .avatar-strip-name {
  color: #fff;
}

@keyframes avatarScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-strip-content {
    animation: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .avatar-strip-track {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }
}

@media (max-width: 767.98px) {
  .avatar-strip-wrap { padding: .8rem 0 .65rem; }
  .avatar-strip-item { width: 58px; }
  .avatar-strip-item img { width: 44px; height: 44px; }
  .avatar-strip-name { font-size: .58rem; max-width: 58px; }
  .avatar-strip-content { gap: 1rem; animation-duration: 32s; }
  .avatar-strip-dismiss { top: 5px; right: 8px; width: 22px; height: 22px; font-size: .85rem; }
}

/* ── 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: 180px;
  background-size: cover;
  background-position: center;
}
@media (max-width: 576px) {
  .event-card-img { height: 140px; }
}

/* ── Events page hero ────────────────────────────────────────────────────── */
.events-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: #fff;
  padding: 2.5rem 1.5rem 2rem;
  text-align: center;
}
.events-hero-title {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: .25rem;
}
.events-hero-sub {
  color: rgba(255,255,255,.7);
  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, #1a1a2e 0%, #16213e 50%, #0f3460 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;
}

/* ── Org badge pills on sport cards ──────────────────────────────────────── */
.sport-org-pills { display:flex; justify-content:center; gap:.25rem; flex-wrap:wrap; }
.sport-org-pill { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:.1rem .4rem; border-radius:3px; background:#e9ecef; color:#495057; }
.sport-org-ukc { background:rgba(13,110,253,.12); color:#0d6efd; }
.sport-org-srs { background:rgba(220,53,69,.12); color:#dc3545; }
.sport-org-bad { background:rgba(25,135,84,.12); color:#198754; }
.sport-org-coming-soon { background:#f0f0f0; color:#adb5bd; font-style:italic; border:1px dashed #ced4da; }

/* ── Sport teaser chips (homepage) ───────────────────────────────────────── */
.sport-teaser-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  border-radius: 50px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  font-size: .9rem;
  font-weight: 500;
  color: #212529;
}
.sport-teaser-icon { font-size: 1.15rem; }
.sport-teaser-chip-more {
  background: transparent;
  border: 1px dashed #ced4da;
  color: #6c757d;
  font-style: italic;
}

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

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

/* ── Import badges (admin import) ─────────────────────────────────────────── */
.badge-new-event      { background-color: var(--sdh-primary); 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: var(--sdh-gradient);
  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;
    min-height: 520px;
  }
  .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; }

  /* Compact footer on mobile */
  .sdh-footer { margin-top: 1.5rem; }
  .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: var(--sdh-text-muted);
  font-size: .8rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE UX ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A1: Sticky Navigation on Mobile ─────────────────────────────────────── */
@media (max-width: 991.98px) {
  .sdh-nav {
    position: sticky;
    top: 0;
  }
}

/* ── A3: Breadcrumb Truncation on Small Screens ──────────────────────────── */
@media (max-width: 575.98px) {
  .sdh-breadcrumb .breadcrumb-item {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ── A4: Horizontal Scroll Hints for Tab Strips ──────────────────────────── */
.scroll-hint-wrap {
  position: relative;
}
.scroll-hint-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, var(--sdh-bg));
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transition: opacity .2s;
}
.scroll-hint-wrap.scrolled-end::after {
  opacity: 0;
}

/* ── A5: Minimum Font Size Floor for Outdoor Readability ─────────────────── */
@media (max-width: 575.98px) {
  .chip-day, .chip-status, .dash-badge-desc,
  .status-pill, .search-cat-label {
    font-size: 0.78rem !important;
  }
}

/* ── A7: Compact Status Legend on Live Running Order ─────────────────────── */
@media (max-width: 575.98px) {
  #legendArea {
    gap: 0.5rem !important;
    font-size: 0.78rem !important;
  }
  #legendArea .badge {
    font-size: 0.75rem;
    padding: 0.25em 0.55em;
  }
}

/* ── B1: Fixed-Position Flash Messages on Mobile ─────────────────────────── */
@media (max-width: 991.98px) {
  .sdh-flash-wrap {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    z-index: 1025;
    padding: 0 1rem;
  }
  .sdh-flash-wrap .alert {
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
  }
}

/* ── B2: Floating "Back to Event" FAB ────────────────────────────────────── */
.sdh-fab-back {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 1020;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sdh-primary);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform .15s, background .15s;
}
.sdh-fab-back:hover {
  transform: scale(1.1);
  background: var(--sdh-primary-dark);
  color: #fff;
}

/* ── C1: Find My Dog Sticky Search ───────────────────────────────────────── */
.sdh-find-dog-wrap {
  position: sticky;
  top: 56px;
  z-index: 100;
  background: var(--sdh-bg);
  padding: 0.5rem 0;
}
@media (min-width: 992px) {
  .sdh-find-dog-wrap {
    top: 0;
  }
}
.sdh-find-dog-input {
  border-radius: 20px;
  padding-left: 2.25rem;
  font-size: 0.9rem;
}
.sdh-find-dog-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sdh-text-muted);
  pointer-events: none;
}

/* ── Kanban Event Board ─────────────────────────────────────────────────── */
.kanban-board {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  min-height: 340px;
}
.kanban-col {
  flex: 0 0 220px;
  min-height: 300px;
  background: var(--sdh-bg);
  border-radius: 10px;
  border: 1px solid var(--sdh-border);
  display: flex;
  flex-direction: column;
}
.kanban-col-header {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .75rem;
  font-weight: 600;
  font-size: .82rem;
  border-bottom: 1px solid var(--sdh-border);
  user-select: none;
}
.kanban-col-header .kanban-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kanban-col-header .kanban-count {
  margin-left: auto;
  background: #e2e8f0;
  color: #475569;
  font-size: .7rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
}
.kanban-col-body {
  flex: 1;
  overflow-y: auto;
  padding: .5rem;
  min-height: 80px;
}
.kanban-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: .55rem .65rem;
  margin-bottom: .4rem;
  cursor: grab;
  transition: box-shadow .15s, opacity .15s, transform .15s;
  font-size: .8rem;
}
.kanban-card:hover {
  box-shadow: var(--sdh-card-shadow-hover);
}
.kanban-card:active {
  cursor: grabbing;
}
.kanban-card.dragging {
  opacity: 0.5;
  transform: rotate(2deg);
}
.kanban-card-title {
  font-weight: 600;
  font-size: .82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.kanban-card-meta {
  color: var(--sdh-text-muted);
  font-size: .72rem;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .6rem;
}
.kanban-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: 4px;
}
.kanban-card-badges .badge {
  font-size: .65rem;
  padding: 1px 5px;
}
.kanban-card-actions {
  text-align: right;
}
.kanban-manage-btn {
  font-size: .68rem;
  padding: 1px 8px;
  cursor: pointer;
}
.kanban-col.drag-over {
  background: #DBEAFE;
  border-color: var(--sdh-primary);
}
.kanban-col.drag-blocked {
  background: #FEE2E2;
  border-color: #DC2626;
}
/* Status dot colors */
.kanban-dot-draft        { background: #6b7280; }
.kanban-dot-mock         { background: #0dcaf0; }
.kanban-dot-open         { background: #16a34a; }
.kanban-dot-in_progress  { background: #eab308; }
.kanban-dot-pending_review { background: #f97316; }
.kanban-dot-closed       { background: #1e293b; }
.kanban-dot-cancelled    { background: #9ca3af; }
/* Hide kanban on mobile */
@media (max-width: 767.98px) {
  #events-board-view { display: none !important; }
  #evViewToggle { display: none !important; }
}

/* ── Flatpickr overrides ───────────────────────────────────────────────── */
/* Ensure calendar renders above Bootstrap modals */
.flatpickr-calendar { z-index: 1060 !important; }
/* Match site color scheme */
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
span.flatpickr-weekday { background: var(--sdh-primary-dark); color: #fff; }
.flatpickr-weekdays { background: var(--sdh-primary-dark); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover { background: var(--sdh-primary); border-color: var(--sdh-primary); }
.flatpickr-day.today:not(.selected) { border-color: var(--sdh-primary); }
.flatpickr-current-month .numInputWrapper span { border-color: rgba(255,255,255,.4); }
.flatpickr-current-month .numInputWrapper span:hover { background: rgba(255,255,255,.15); }
.flatpickr-current-month input.cur-year { color: #fff; }
/* Alt-input styling: match Bootstrap form-control appearance */
.flatpickr-date + .form-control.flatpickr-input { cursor: pointer; }
/* Sun-mode overrides */
body.sun-mode .flatpickr-calendar { background: #1E293B; border-color: #F59E0B; }
body.sun-mode .flatpickr-day { color: #F1F5F9; }
body.sun-mode .flatpickr-day:hover { background: #334155; border-color: #334155; }
body.sun-mode .flatpickr-day.selected { background: #F59E0B; border-color: #F59E0B; color: #0A1628; }