/*
 * DIR-71 complete theme cascade
 *
 * This file loads last. It bridges legacy selectors to the semantic palette,
 * then normalizes theme-sensitive surfaces that previously retained green or
 * dark literals after the user selected another theme.
 */

html[data-theme] {
  --bg: var(--dirck-color-bg);
  --panel: var(--dirck-color-surface);
  --card: var(--dirck-color-surface);
  --text: var(--dirck-color-text);
  --muted: var(--dirck-color-text-muted);
  --border: var(--dirck-color-border);
  --accent: var(--dirck-color-accent);
  --accentGold: var(--dirck-color-accent-warm);
  --shadow: var(--dirck-shadow-md);
  --fillYellow: color-mix(in srgb, var(--dirck-color-accent-warm) 12%, transparent);
  --fillGreen: color-mix(in srgb, var(--dirck-color-accent) 12%, transparent);
  --fillGray: var(--dirck-color-surface-raised);
  --fillClear: var(--dirck-color-surface-soft);
  background: var(--dirck-color-bg);
}

html[data-theme] body {
  background: var(--dirck-app-background) !important;
  color: var(--dirck-color-text);
}

html[data-theme] :where(.app, .main) {
  background-color: var(--dirck-color-bg);
}

html[data-theme] .main {
  background:
    radial-gradient(48rem 30rem at 54% -12%, color-mix(in srgb, var(--dirck-color-accent) 9%, transparent), transparent 64%),
    var(--dirck-color-bg);
}

html[data-theme="green"] .main {
  background: var(--dirck-logo-beige);
}

html[data-theme] :where(.sidebar, .mobileBottomNav, .settingsDrawer, .settingsDrawer.settingsInline) {
  border-color: var(--dirck-color-border) !important;
  background: color-mix(in srgb, var(--dirck-color-surface) 95%, var(--dirck-color-bg)) !important;
  color: var(--dirck-color-text);
}

html[data-theme] .settingsDrawer.settingsInline {
  border: 0 !important;
  background: transparent !important;
}

html[data-theme] .settingsDrawer.settingsInline :where(.settingsAccountCard, .settingsDrawerFooter) {
  border-color: var(--dirck-color-border) !important;
  background: var(--dirck-color-surface) !important;
  color: var(--dirck-color-text);
}

html[data-theme] :where(
  .card,
  .card[data-kind],
  .glass,
  .moduleCard,
  .quizCard,
  .progressCard,
  .destinationCard,
  .categoryModuleCard,
  .masteryPanel,
  .storeProdCard,
  .storeCatCard,
  .vaultHubCard,
  .vaultVideoCard,
  .swingHistoryCard,
  .quizPanel,
  .qItem
) {
  border-color: var(--dirck-color-border) !important;
  background: var(--dirck-color-surface) !important;
  color: var(--dirck-color-text) !important;
  box-shadow: var(--dirck-shadow-sm) !important;
}

html[data-theme] :where(.dirckCard, .lessonStep, .progressBreakdownRow, .homeTodayCard) {
  border-color: var(--dirck-color-border);
  background-color: var(--dirck-color-surface);
  color: var(--dirck-color-text);
}

html[data-theme] :where(
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select,
  .searchInput,
  .settingInput,
  .notes,
  .noteBox,
  .qText
) {
  border-color: var(--dirck-color-border-strong) !important;
  background: var(--dirck-color-control) !important;
  color: var(--dirck-color-text) !important;
  -webkit-text-fill-color: var(--dirck-color-text) !important;
}

html[data-theme] :where(input, textarea)::placeholder {
  color: var(--dirck-color-text-muted) !important;
  -webkit-text-fill-color: var(--dirck-color-text-muted) !important;
  opacity: 0.72;
}

html[data-theme] :where(
  .btn,
  .linkBtn,
  .settingBtn,
  .textSizeBtn,
  .obFreqBtn,
  .vaultBtn,
  .topicTab,
  .golfSubTab,
  .gearCategoryBtn,
  .profileIconBtn,
  .swingBackBtn,
  .lessonStepToggle,
  .lessonDetailsToggle,
  .curriculumSearchButton
) {
  border-color: var(--dirck-color-border-strong) !important;
  background: var(--dirck-color-control) !important;
  color: var(--dirck-color-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme] :where(
  .btn,
  .linkBtn,
  .settingBtn,
  .textSizeBtn,
  .obFreqBtn,
  .vaultBtn,
  .topicTab,
  .golfSubTab,
  .gearCategoryBtn,
  .profileIconBtn,
  .swingBackBtn
):hover {
  border-color: var(--dirck-color-selected-border) !important;
  background: var(--dirck-color-control-hover) !important;
}

html[data-theme] :where(
  .topicTab.active,
  .golfSubTab.active,
  .vaultBtn.active,
  .gearCategoryBtn.active,
  .textSizeBtn.active,
  .obFreqBtn.active
) {
  border-color: var(--dirck-color-selected-border) !important;
  background: var(--dirck-color-selected-surface) !important;
  color: var(--dirck-color-text-strong) !important;
}

html[data-theme] :where(.settingBtnAccent, .homeContinueCta, .categoryModuleAction, .dirckButton--primary) {
  border-color: transparent !important;
  background: var(--dirck-color-accent) !important;
  color: var(--dirck-color-on-accent) !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme] :where(.topicProgressBar, .moduleProgressBar, .categoryProgressTrack, .curriculumModuleProgress, .prog-bar-wrap, .dirckProgressTrack) {
  background: var(--dirck-color-progress-track) !important;
  border-color: var(--dirck-color-border) !important;
}

html[data-theme] :where(.topicProgressFill, .moduleProgressFill, .categoryProgressFill, .progressFill, .prog-bar-fill, .dirckProgressValue) {
  background: linear-gradient(90deg, var(--dirck-color-accent), var(--dirck-color-accent-warm)) !important;
}

html[data-theme] :where(.tag, .pill, .masteryState, .categoryModuleCode, .homeToolIcon) {
  border-color: var(--dirck-color-border);
  background: var(--dirck-color-surface-raised);
  color: var(--dirck-color-text-muted-strong);
}

html[data-theme] :where(.storeProdImgWrap, .swingPlayerWrap, .progress-row, .categoryProgress) {
  border-color: var(--dirck-color-border) !important;
  background: var(--dirck-color-surface-soft) !important;
}

html[data-theme] :where(.storeProdName, .quizTitle, .moduleTitle, .sectionTitle, .settingsSectionHead, .settingsDrawerUsername, .profileBtnName) {
  color: var(--dirck-color-text-strong) !important;
}

html[data-theme] :where(.storeProdDesc, .storeDisclosure, .storeSideNote, .storeCategoryIntro, .vaultSectionTitle, .settingLabel, .settingsDrawerRole) {
  color: var(--dirck-color-text-muted) !important;
}

html[data-theme] :where(.storeProdCta, .storeProdPlaceholderText, .destinationCardMeta, .pageEyebrow, .stat-n) {
  color: var(--dirck-color-accent) !important;
}

html[data-theme] .storeProdCard:hover .storeProdCta {
  color: var(--dirck-color-accent) !important;
}

html[data-theme] .storeProdBadge {
  background: var(--dirck-color-accent) !important;
  color: var(--dirck-color-on-accent) !important;
}

html[data-theme] .storeDisclosure strong {
  color: var(--dirck-color-text-strong) !important;
}

html[data-theme] .externalFallbackOverlay {
  background: var(--dirck-color-scrim);
}

/* Auth participates in every theme; only the supplied D.G.S. artwork stays
   unchanged. */
html[data-theme] body #authOverlay .authBgVignette {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--dirck-color-bg) 20%, transparent), color-mix(in srgb, var(--dirck-color-bg) 78%, transparent)),
    radial-gradient(ellipse 80% 70% at 50% 38%, transparent 25%, var(--dirck-color-scrim) 100%);
}

html[data-theme] body #authOverlay .authCard {
  border-color: var(--dirck-color-auth-border);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--dirck-color-auth-accent) 7%, transparent), transparent 44%),
    var(--dirck-color-auth-surface);
  color: var(--dirck-color-auth-text);
}

html[data-theme] body #authOverlay .authLogoTitle {
  text-shadow: none !important;
}

html[data-theme] body #authOverlay :where(.authTabs, .authInput) {
  border-color: var(--dirck-color-auth-border) !important;
  background: var(--dirck-color-auth-surface-raised) !important;
  color: var(--dirck-color-auth-text) !important;
  -webkit-text-fill-color: var(--dirck-color-auth-text) !important;
}

html[data-theme] body #authOverlay .authInput:-webkit-autofill,
html[data-theme] body #authOverlay .authInput:-webkit-autofill:hover,
html[data-theme] body #authOverlay .authInput:-webkit-autofill:focus,
html[data-theme] body #authOverlay .authInput:-webkit-autofill:active {
  -webkit-text-fill-color: var(--dirck-color-auth-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--dirck-color-auth-surface-raised) inset !important;
  box-shadow: 0 0 0 1000px var(--dirck-color-auth-surface-raised) inset !important;
  caret-color: var(--dirck-color-auth-text);
}

html[data-theme="green"] body #authOverlay .authInput,
html[data-theme="light"] body #authOverlay .authInput {
  color-scheme: light;
}

html[data-theme="dark"] body #authOverlay .authInput {
  color-scheme: dark;
}

html[data-theme] body #authOverlay :where(.authLogo, .authLabel, .authSub, .authPasswordToggle, .authRecoveryLink, .authPolicyLinks a) {
  color: var(--dirck-color-auth-muted);
}

html[data-theme] body #authOverlay .authTab {
  color: var(--dirck-color-auth-muted);
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme] body #authOverlay .authTab.active {
  background: var(--dirck-color-auth-accent);
  color: var(--dirck-color-auth-on-accent);
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme] body #authOverlay .authSubmitBtn {
  border-color: var(--dirck-color-auth-accent) !important;
  background: var(--dirck-color-auth-accent) !important;
  color: var(--dirck-color-auth-on-accent) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Green is deliberately spare: beige canvas, white working surfaces, green
   actions, and black copy. The logo is the only decorative artwork. */
html[data-theme="green"] body #authOverlay {
  background-color: var(--dirck-logo-beige) !important;
  background-image: none !important;
}

html[data-theme="green"] body #authOverlay :where(.authBgPhoto, .authBgFilmBorder, .authBgVignette) {
  display: none;
}

html[data-theme="green"] body #authOverlay .authCard {
  border-color: var(--dirck-color-auth-border);
  background: var(--dirck-logo-white);
  box-shadow: var(--dirck-shadow-lg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-theme="green"] body #authOverlay .authTabs {
  background: var(--dirck-logo-beige) !important;
}

html[data-theme="green"] body #authOverlay .authSubmitBtn[data-loading="true"] {
  opacity: 1 !important;
}

html[data-theme="green"] :where(.sidebar, .mobileBottomNav, .settingsDrawer, .settingsDrawer.settingsInline) {
  background: var(--dirck-logo-white) !important;
}

html[data-theme="green"] .settingsDrawer.settingsInline {
  background: transparent !important;
}

html[data-theme="green"] .globalNavItem.dirckNavItem:is(.active, [aria-current="page"]) {
  border-color: var(--dirck-logo-green);
  background: var(--dirck-logo-green);
  color: var(--dirck-logo-white);
  box-shadow: none;
}

html[data-theme="green"] .globalNavItem:is(.active, [aria-current="page"]) .globalNavIcon {
  border-color: transparent;
  background: transparent;
  color: var(--dirck-logo-white);
}

html[data-theme="green"] :where(
  .topicTab.active,
  .golfSubTab.active,
  .vaultBtn.active,
  .gearCategoryBtn.active,
  .textSizeBtn.active,
  .obFreqBtn.active
) {
  border-color: var(--dirck-logo-green) !important;
  background: var(--dirck-logo-green) !important;
  color: var(--dirck-logo-white) !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme="green"] :where(.topicProgressFill, .moduleProgressFill, .categoryProgressFill, .progressFill, .prog-bar-fill, .dirckProgressValue) {
  background: var(--dirck-logo-green) !important;
}

html[data-theme] .homeTrainingHero .dirckButton--primary {
  border-color: var(--dirck-logo-white) !important;
  background: var(--dirck-logo-white) !important;
  color: var(--dirck-logo-green) !important;
}

html[data-theme] .homeTrainingHero .dirckButton--ghost {
  border-color: var(--dirck-logo-white) !important;
  background: transparent !important;
  color: var(--dirck-logo-white) !important;
}

html[data-theme="green"] :where(.homeEffortChip, .homeTrainingHeroProgress) {
  border-color: var(--dirck-logo-white);
  background: transparent;
  backdrop-filter: none;
}

html[data-theme="green"] .homeTodayIcon,
html[data-theme="green"] .homeTodayCard--practice .homeTodayIcon {
  background: var(--dirck-logo-green);
  color: var(--dirck-logo-white);
}

html[data-theme="green"] .storeDisclosure {
  border-color: var(--dirck-color-border) !important;
  background: var(--dirck-logo-white) !important;
  color: var(--dirck-color-text-muted) !important;
}

/* Home keeps the D.G.S. green; editorial lesson heroes follow each palette. */
html[data-theme] .homeTrainingHero {
  border-color: var(--dirck-logo-green);
  background: var(--dirck-logo-green) !important;
}

html[data-theme] .homeTrainingHero :where(h2, .homeTrainingNextTitle, .homeTrainingProgressValue, .dirckButton--ghost) {
  color: var(--dirck-logo-white) !important;
}

html[data-theme] .homeTrainingHero :where(.studentHomeKicker, .homeTrainingNextLabel, .dirckProgressHeader) {
  color: var(--dirck-color-accent-on-dark) !important;
}

html[data-theme] .homeTrainingHero :where(.homeTrainingModule, .homeEffortChip, .homeTrainingProgressNote, .progressSyncStatus, .progressSyncStatus strong) {
  color: var(--dirck-color-text-muted-on-dark) !important;
}

html[data-theme="green"] :where(.lessonHero, .curriculumProgramHero) {
  border-color: var(--dirck-logo-green);
  background: var(--dirck-logo-green) !important;
}

html[data-theme="green"] :where(.lessonHero, .curriculumProgramHero),
html[data-theme="green"] :where(.lessonHero, .curriculumProgramHero) * {
  color: var(--dirck-logo-white) !important;
}

html[data-theme="green"] :where(.lessonStat, .curriculumProgramStats span, .curriculumProgramContinue) {
  border-color: var(--dirck-logo-white) !important;
  background: transparent !important;
}

html[data-theme="dark"] :where(.lessonHero, .curriculumProgramHero) {
  border-color: var(--dirck-color-border-strong);
  background:
    radial-gradient(circle at 91% 5%, rgba(196, 184, 155, 0.12), transparent 36%),
    linear-gradient(140deg, #303748, #202532 58%, #1a1e29) !important;
}

html[data-theme="light"] :where(.lessonHero, .curriculumProgramHero) {
  border-color: var(--dirck-color-border-strong);
  background:
    radial-gradient(circle at 91% 5%, rgba(169, 130, 90, 0.1), transparent 36%),
    linear-gradient(140deg, #ffffff, #edf2ef 58%, #f4efe8) !important;
}

/* Light uses an editorial pale hero, so it must not inherit the inverse text
   contract used by the green and dark hero treatments. */
html[data-theme="light"] .curriculumProgramHero h1,
html[data-theme="light"] .curriculumProgramHero .curriculumProgramProgress strong,
html[data-theme="light"] .lessonHero h1,
html[data-theme="light"] .lessonHero .lessonProgressValue,
html[data-theme="light"] .lessonHero .lessonProgressLabel {
  color: var(--dirck-color-text-strong) !important;
}

html[data-theme="light"] .curriculumProgramHero .curriculumProgramProgress,
html[data-theme="light"] .lessonHero .lessonHeroTopline,
html[data-theme="light"] .lessonHero .lessonPurpose,
html[data-theme="light"] .lessonHero .lessonProgressText,
html[data-theme="light"] .lessonHero .progressSyncStatus,
html[data-theme="light"] .lessonHero .progressSyncStatus strong {
  color: var(--dirck-color-text-muted-strong) !important;
}

html[data-theme="light"] .curriculumProgramHero .curriculumProgramProgressTrack,
html[data-theme="light"] .lessonHero .moduleProgressBar {
  border-color: var(--dirck-color-border) !important;
  background: var(--dirck-color-progress-track) !important;
}

/* The Gear category card remains logo green in every theme. Shared control
   rules therefore use inverse labels here instead of each theme's page-level
   control colors. */
html[data-theme] .gearGuide .gearCategoryBtn {
  border-color: rgba(255, 255, 255, 0.52) !important;
  background: transparent !important;
  color: var(--dirck-logo-white) !important;
}

html[data-theme] .gearGuide .gearCategoryBtn:is(:hover, :focus-visible) {
  border-color: var(--dirck-logo-white) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--dirck-logo-white) !important;
}

html[data-theme] .gearGuide .gearCategoryBtn.active {
  border-color: var(--dirck-logo-white) !important;
  background: var(--dirck-logo-white) !important;
  color: var(--dirck-logo-green) !important;
}

/* Search sits inside the permanently green Video Library hero. Keep the input
   a true white field even when Light or Dark changes global form controls. */
html[data-theme] .videoLibraryHero .videoLibrarySearch input {
  border-color: var(--dirck-logo-white) !important;
  background: var(--dirck-logo-white) !important;
  color: var(--dirck-logo-black) !important;
  -webkit-text-fill-color: var(--dirck-logo-black) !important;
}

html[data-theme] .videoLibraryHero .videoLibrarySearch input::placeholder {
  color: rgba(14, 14, 12, 0.64) !important;
  -webkit-text-fill-color: rgba(14, 14, 12, 0.64) !important;
  opacity: 1;
}

html[data-theme="light"] .homeTrainingHeroProgress {
  border-color: var(--dirck-color-border);
  background: rgba(255, 255, 255, 0.58);
}

html[data-theme="light"] .homeTrainingHero .dirckProgressTrack {
  border-color: var(--dirck-color-border);
  background: var(--dirck-color-progress-track);
}

html[data-theme] :where(.programPathCard, .curriculumPathHero, .curriculumResumeCard, .lessonNextAction) {
  border-color: var(--dirck-color-border-strong);
  background: linear-gradient(145deg, var(--dirck-color-surface), var(--dirck-color-surface-soft));
}

html[data-theme] :where(.programPathCard[data-state="in-progress"], .curriculumPathPage .categoryModuleCard.current) {
  border-color: var(--dirck-color-selected-border) !important;
  background: linear-gradient(145deg, var(--dirck-color-selected-surface), var(--dirck-color-surface)) !important;
}

/* Accessible theme picker state. */
.themeOption {
  appearance: none;
  font-family: inherit;
  color: var(--dirck-color-text);
}

.themeOption[aria-pressed="true"] {
  border-color: var(--dirck-color-accent);
  background: var(--dirck-color-selected-surface);
}

/* Admin is a shared product surface and inherits the same persisted palette. */
.adminSurface {
  --bg: var(--dirck-color-bg);
  --panel: var(--dirck-color-surface);
  --text: var(--dirck-color-text);
  --muted: var(--dirck-color-text-muted);
  --border: var(--dirck-color-border);
  --accent: var(--dirck-color-accent);
  --gold: var(--dirck-color-accent-warm);
  --shadow: var(--dirck-shadow-md);
  background: var(--dirck-app-background) !important;
  color: var(--dirck-color-text);
}

.adminSurface :where(.card, .stat-card, .section, .swing-card, .swing-card-notes, .progress-row) {
  border-color: var(--dirck-color-border) !important;
  background: var(--dirck-color-surface) !important;
  color: var(--dirck-color-text) !important;
  box-shadow: var(--dirck-shadow-sm);
}

.adminSurface :where(input, textarea, select, .role-select, .search-bar, .codeChip) {
  border-color: var(--dirck-color-border-strong) !important;
  background: var(--dirck-color-control) !important;
  color: var(--dirck-color-text) !important;
  -webkit-text-fill-color: var(--dirck-color-text) !important;
}

.adminSurface :where(th, td, .analysis-form, .divider) {
  border-color: var(--dirck-color-border) !important;
}

.adminSurface :where(.chip, .btn-sm, .view-btn) {
  border-color: var(--dirck-color-selected-border);
  background: var(--dirck-color-selected-surface);
  color: var(--dirck-color-text-strong);
}

.adminSurface .btn-green {
  border-color: transparent;
  background: var(--dirck-color-accent);
  color: var(--dirck-color-on-accent);
  -webkit-text-fill-color: currentColor;
}

.adminSurface :where(.logout-btn, .btn-danger, .del-btn, .reset-btn) {
  border-color: var(--dirck-color-border-strong);
  background: var(--dirck-color-control);
}

.adminSurface :where(input, textarea, select, button):focus-visible {
  outline: 2px solid var(--dirck-color-focus);
  outline-offset: 2px;
  box-shadow: var(--dirck-focus-ring);
}

.adminSurface :where(.section-header h2, .btn-gold) {
  color: var(--dirck-color-accent-warm);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] *,
  html[data-theme] *::before,
  html[data-theme] *::after {
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  html[data-theme] :where(.card, .dirckCard, .section, input, textarea, select, button) {
    border-color: CanvasText !important;
  }
}