/**
 * WDHC Pro UI · sitewide high-end product chrome (2026-07 redesign night pass)
 * Load AFTER soft-ui on public pages + portal.
 * Restore: C:\Users\milob\wdhc-v3-hybrid\backups\pre-redesign-*
 */

/* ── Body depth ── */
body {
  background-color: var(--wdhc-bg, #050505);
  background-image:
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(212, 175, 55, 0.055) 0%, transparent 55%),
    linear-gradient(180deg, #000 0%, #080808 42%, #050505 100%);
  color: var(--wdhc-text, #f2f2f2);
}

/* ── Shared elevated panels ── */
.leaderboard,
.leaderboard-panel,
.controls,
.sidebar-card:not(.sidebar-calc-column .sidebar-card),
.main-column .card,
.card,
.card-highlight,
.wdhc-section-panel,
.about-highlight,
.tier-legend-panel,
.compare-panel,
.post-video-card,
.post-video-rules-card,
.cta-section,
.video-submissions-section,
.ch-card,
.challenge-card,
.pro-card,
.pro-panel,
.gym-card,
.rules-card,
.learn-card,
.submit-card,
.form-card,
.legal-card,
.content-card,
.panel,
.stat-panel {
  border-radius: var(--wdhc-radius-lg, 20px) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

/* Index: drop hard outlines on major plates (soft glow only) */
.about-wdhc-section,
.sidebar-card.grip-calc-card,
.cta-section,
.cta-section--under-submissions,
.video-submissions-section,
.post-video-card,
.post-video-rules-card,
.post-video-pulse-card,
.post-video-challenge-card,
.post-video-challenge-card .ch-card {
  border: none !important;
  border-color: transparent !important;
}

/* Glass fill where solid dark cards look flat */
.card,
.card-highlight,
.wdhc-section-panel,
.sidebar-card:not(.sidebar-calc-column .sidebar-card),
.challenge-card,
.pro-card,
.pro-panel,
.gym-card,
.rules-card,
.learn-card,
.submit-card,
.form-card,
.legal-card,
.content-card {
  background:
    linear-gradient(165deg, rgba(18, 18, 22, 0.96) 0%, rgba(8, 8, 10, 0.99) 100%) !important;
}

/* ── Leaderboard ── */
.leaderboard {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  overflow: hidden;
}

.lb-header {
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.98) 0%, rgba(8, 8, 8, 0.98) 100%) !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.12) !important;
  letter-spacing: 0.08em !important;
  font-size: 0.78rem !important;
  color: #a8a8a8 !important;
  min-height: 44px !important;
}

.lb-row {
  transition: background 0.15s ease !important;
  border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}

.lb-row:hover {
  background: rgba(212, 175, 55, 0.04) !important;
}

.lb-row.rank-1,
.lb-row[data-rank="1"] {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, transparent 55%) !important;
}

.leaderboard-footer-cta {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.5) 0%, #080808 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 0 var(--wdhc-radius-lg, 20px) var(--wdhc-radius-lg, 20px) !important;
  padding: 12px 16px !important;
}

@media (max-width: 900px) {
  .leaderboard-footer-cta {
    padding: 4px 10px 6px !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  .leaderboard-footer-cta-btn,
  a.leaderboard-footer-cta-btn {
    padding: 8px 16px !important;
    font-size: 0.82rem !important;
    line-height: 1.15 !important;
  }
}

/* ── Buttons ──
   Shiny orange rim: same chrome as portal Submit a hang / Unlocked.
   Gold fill + metallic orange outline + inner highlight. */
.btn-primary,
a.btn-primary,
a.btn-primary:link,
a.btn-primary:visited,
button.btn-primary,
.leaderboard-footer-cta-btn,
a.leaderboard-footer-cta-btn,
a.leaderboard-footer-cta-btn:link,
a.leaderboard-footer-cta-btn:visited,
.btn-submit,
button[type="submit"].btn-primary,
.submit-btn-primary,
a.submit-btn-primary,
.cta-btn,
a.cta-btn,
.nav-cta,
a.nav-cta,
nav .nav-cta,
a.nav-submit,
.wdhc-cine-hero__cta,
a.wdhc-cine-hero__cta,
a.wdhc-cine-hero__cta.nav-cta,
.gyms-btn-primary,
a.gyms-btn-primary,
.ch-hero__cta,
a.ch-hero__cta,
.chm-season__cta--primary,
a.chm-season__cta--primary,
.btn-sidebar-primary,
button.btn-sidebar-primary,
.overview-primary-btn,
.featured-hang-journal__cta,
.wdhc-friend-share__btn--primary,
.mobile-submit-bar,
a.mobile-submit-bar,
.post-video-cta,
a.post-video-cta,
a.post-video-cta--gold,
.nav-mobile-submit-link,
a.nav-mobile-submit-link {
  border-radius: var(--wdhc-radius-pill, 999px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, #D4AF37 0%, #cd7f32 100%) !important;
  background-color: #D4AF37 !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  border: 1px solid #e08a2a !important;
  box-shadow:
    0 0 0 1px rgba(232, 120, 32, 0.72),
    0 0 14px rgba(232, 120, 32, 0.38),
    0 6px 18px rgba(212, 175, 55, 0.22),
    inset 0 1px 0 rgba(255, 230, 170, 0.62),
    inset 0 -1px 0 rgba(140, 55, 8, 0.32) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, filter 0.15s ease !important;
}

.btn-primary:hover,
a.btn-primary:hover,
a.btn-primary:focus-visible,
button.btn-primary:hover,
.leaderboard-footer-cta-btn:hover,
a.leaderboard-footer-cta-btn:hover,
.nav-cta:hover,
a.nav-cta:hover,
.cta-btn:hover,
a.cta-btn:hover,
.wdhc-cine-hero__cta:hover,
a.wdhc-cine-hero__cta.nav-cta:hover,
.gyms-btn-primary:hover,
.ch-hero__cta:hover,
.btn-sidebar-primary:hover,
.overview-primary-btn:hover,
.featured-hang-journal__cta:hover,
.wdhc-friend-share__btn--primary:hover,
.mobile-submit-bar:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #e8c96a 0%, #d4954a 100%) !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  box-shadow:
    0 0 0 1px rgba(255, 147, 51, 0.9),
    0 0 18px rgba(232, 120, 32, 0.5),
    0 10px 28px rgba(212, 175, 55, 0.28),
    inset 0 1px 0 rgba(255, 240, 200, 0.75),
    inset 0 -1px 0 rgba(140, 55, 8, 0.28) !important;
  filter: brightness(1.03);
}

/* Outline / ghost variants that reuse btn-primary with transparent bg.
   Must override -webkit-text-fill-color too: Chrome paints fill, not color. */
a.btn-primary[style*="transparent"],
.btn-primary.btn-outline-on-primary {
  background: transparent !important;
  background-image: none !important;
  color: #D4AF37 !important;
  -webkit-text-fill-color: #D4AF37 !important;
  border: 1px solid rgba(212, 175, 55, 0.7) !important;
  box-shadow: none !important;
}

.btn-secondary,
a.btn-secondary,
button.btn-secondary,
.btn-outline,
a.btn-outline,
button.btn-outline,
.btn-outline--gold,
a.btn-outline--gold,
.btn-ghost,
button.btn-ghost,
.btn-sm.btn-outline,
a.btn-sm.btn-outline,
.achievement-filter-btn,
button.achievement-filter-btn,
.wdhc-friend-share__btn--ghost,
a.wdhc-friend-share__btn--ghost {
  border-radius: var(--wdhc-radius-pill, 999px) !important;
  border: 1px solid #e08a2a !important;
  box-shadow:
    0 0 0 1px rgba(232, 120, 32, 0.5),
    0 0 10px rgba(232, 120, 32, 0.26),
    inset 0 1px 0 rgba(255, 200, 120, 0.16) !important;
}

.achievement-filter-btn.active,
button.achievement-filter-btn.active {
  color: #f0d78c !important;
  border-color: #e08a2a !important;
  background: rgba(232, 120, 32, 0.14) !important;
  box-shadow:
    0 0 0 1px rgba(232, 120, 32, 0.72),
    0 0 12px rgba(232, 120, 32, 0.34),
    inset 0 1px 0 rgba(255, 220, 150, 0.22) !important;
}

.btn-sm {
  border-radius: var(--wdhc-radius-pill, 999px) !important;
}

/* ── Forms ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="url"],
input[type="tel"],
input[type="search"],
select,
textarea,
.form-input,
.form-select,
.search-input {
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #f0f0f0 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

input:focus,
select:focus,
textarea:focus,
.form-input:focus,
.form-select:focus,
.search-input:focus {
  outline: none !important;
  border-color: rgba(212, 175, 55, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.14) !important;
}

label,
.form-label {
  letter-spacing: 0.02em;
}

/* ── Controls / filters ── */
.controls {
  padding: 14px 16px !important;
  gap: 10px !important;
}

/* Selects: full skin in wdhc-selects.css (avoid flat pill-only override) */
.controls input:not([type="checkbox"]):not([type="radio"]),
.division-tabs button {
  border-radius: var(--wdhc-radius-pill, 999px) !important;
}

.division-tabs,
.lb-tab-strip.division-tabs {
  border-radius: 0 !important;
  border: none !important;
  border-color: transparent !important;
  background: transparent !important;
  padding: 0 !important;
  gap: 4px !important;
  box-shadow: none !important;
}

.division-tabs button.active,
.lb-tab-strip.division-tabs button.active {
  background: rgba(212, 175, 55, 0.14) !important;
  color: #f0d78c !important;
  border-color: rgba(212, 175, 55, 0.35) !important;
}

/* ── Heroes / page titles ── */
.hero-title,
.hero h1,
.wdhc-page-hero h1,
.page-hero h1,
.chm-hero h1,
.ch-hero h1,
.gyms-hero h1,
.pro-hero h1,
.submit-hero h1,
main h1 {
  letter-spacing: 0.03em;
  text-wrap: balance;
}

/* Do not override index hero glow here - late load caused a 1s flash vs critical/home */

.wdhc-page-hero,
.page-hero,
.chm-hero,
.gyms-hero,
.pro-hero,
.submit-hero {
  position: relative;
}

/* ── Page sections ── */
.section-title,
.page-section-title,
h2.section-title {
  letter-spacing: 0.03em;
}

.section-subtitle,
.page-lead,
.hero-lead {
  color: #a3a3a3;
  line-height: 1.55;
}

/* ── Nav polish (non-breaking) ── */
nav .nav-cta,
.nav-cta,
a.nav-submit {
  border-radius: 999px !important;
}

/* ── Marquee ── */
.marquee-container {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ── Grip calc widget ── */
.grip-calc-widget {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.sidebar-card.grip-calc-card {
  border: none !important;
  border-color: transparent !important;
}
.grip-calc-result-wrap,
.grip-calc-explainer summary {
  border: none !important;
  border-color: transparent !important;
}

/* ── Submit page ── */
.submit-form,
.submission-form,
#submitForm,
.form-section,
.step-card,
.submit-step {
  border-radius: 18px;
}

/* ── Pro / challenges / gyms cards ── */
.pro-grid .pro-card,
.challenges-grid .challenge-card,
.gyms-grid .gym-card,
.plans-grid .plan-card {
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.pro-grid .pro-card:hover,
.challenges-grid .challenge-card:hover,
.gyms-grid .gym-card:hover {
  border-color: rgba(212, 175, 55, 0.28) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* ── Tables ── */
table.data-table,
.legal-table,
.simple-table {
  border-collapse: separate;
  border-spacing: 0;
}

table.data-table th,
.legal-table th {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: #a0a0a0;
}

table.data-table td,
table.data-table th {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Footer visual system: css/wdhc-site-footer.css */

/* ── Legal / longform ── */
.legal-body,
.legal-content,
.page-content,
.prose-dark {
  max-width: 760px;
  line-height: 1.7;
  color: #d0d0d0;
}

.legal-body h2,
.legal-content h2,
.page-content h2 {
  color: #f2f2f2;
  letter-spacing: 0.02em;
  margin-top: 1.6em;
}

/* ── Athlete portal shell ── */
.dashboard-page,
.dashboard-layout {
  background: transparent;
}

.dashboard-sidebar {
  border-right-color: rgba(255, 255, 255, 0.06) !important;
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.98) 0%, rgba(6, 6, 8, 0.99) 100%) !important;
}

.dashboard-content .content-section .card,
.dashboard-content .section-header-row + .card,
#section-progress .card,
#section-achievements .card,
#section-settings .card,
#section-calculator .card,
#section-leaderboard .card {
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  background: linear-gradient(165deg, rgba(16, 16, 18, 0.98) 0%, rgba(8, 8, 10, 0.99) 100%) !important;
}

.dashboard-content .section-title {
  letter-spacing: 0.02em;
}

.dashboard-content .section-subtitle {
  color: #8a8a8a;
}

/* Achievement cards denser */
.achievement-card {
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: rgba(0, 0, 0, 0.28) !important;
  transition: border-color 0.15s ease, transform 0.15s ease !important;
}

.achievement-card.unlocked:hover {
  border-color: rgba(212, 175, 55, 0.3) !important;
  transform: translateY(-1px);
}

.achievement-card.locked {
  opacity: 0.55;
  filter: grayscale(0.35);
}

.achievement-filter-btn {
  border-radius: 999px !important;
}

/* Progress charts */
.chart-container,
.progress-chart-card {
  border-radius: 18px !important;
}

/* Settings rows */
.settings-group,
.settings-card,
.profile-card {
  border-radius: 18px !important;
}

/* Modal */
.modal {
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
  background: linear-gradient(165deg, #141416 0%, #0a0a0c 100%) !important;
}

.modal-overlay {
  backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.62) !important;
}

/* Portal landing */
.portal-landing .card,
.auth-card,
.magic-link-card {
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.42) !important;
}

/* Pills */
.tier-badge,
.pr-badge,
.status-pill,
.lb-tier,
.tl-source-badge {
  border-radius: 999px !important;
}

/* Full leaderboard page */
.full-leaderboard-page .leaderboard {
  border-radius: var(--wdhc-radius-lg, 20px) !important;
}

/* ── Spacing rhythm ── */
.main-column {
  gap: 18px;
}
/* Homepage only: no flex gap so Recent Submissions sits tight under the board */
.main-column:has(.home-lower-band) {
  gap: 0;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .leaderboard,
  .controls,
  .card,
  .sidebar-card {
    border-radius: 16px !important;
  }

  .lb-header {
    font-size: 0.7rem !important;
  }

  .pro-grid .pro-card:hover,
  .challenges-grid .challenge-card:hover,
  .gyms-grid .gym-card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover,
  .leaderboard-footer-cta-btn:hover,
  .pro-grid .pro-card:hover,
  .challenges-grid .challenge-card:hover,
  .gyms-grid .gym-card:hover,
  .achievement-card.unlocked:hover {
    transform: none;
  }
}