/*
╔════════════════════════════════════════════════════════════════════╗
║  ROOTED VITALITY, INC.                                             ║
║  File: styles/dark-mode/dark-mode-interactive.css                  ║
║  Purpose: Dark mode styling for interactive components and cards   ║
║  Holistic Wellness · Modern Connection Platform                    ║
║  rootedvitality.health | 2025                                      ║
╚════════════════════════════════════════════════════════════════════╝

TABLE OF CONTENTS
  1. Navigation Tabs & Buttons
  2. Cards & Containers
  3. Badges & Tags
  4. Interactive Elements & States
  5. Text & Utility Classes
  6. Landing Page Components
*/

@media (prefers-color-scheme: dark) {
    /* ========================================== */
    /* 6. LANDING PAGE COMPONENTS */
    /* ========================================== */

    .slideshow-hero {
        background: #000 !important;
    }

    .slideshow-card {
        background: rgba(0, 0, 0, 0.6) !important;
        border-color: rgba(217, 204, 148, 0.2) !important;
    }

    .slideshow-card__title {
        color: #ffffff !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
    }

    .slideshow-card__text {
        color: var(--dm-text-primary) !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
    }

    .slideshow-card__button {
        background: #77883e !important;
        color: #ffffff !important;
    }

    .slideshow-card__button:hover {
        background: #5f7030 !important;
    }

    .story-section {
        background: var(--dm-bg-page) !important;
    }

    .story-section__label {
        color: #d9cc94 !important;
    }

    .story-section__heading {
        color: #ffffff !important;
    }

    .story-section__body {
        color: var(--dm-text-primary) !important;
    }

    .story-section__image::before {
        border-color: rgba(119, 136, 62, 0.3) !important;
    }

    .story-section__image::after {
        background: radial-gradient(circle at center, rgba(119, 136, 62, 0.2) 0%, rgba(119, 136, 62, 0.1) 70%, transparent 100%) !important;
    }

    .client-story {
        background: var(--dm-bg-page) !important;
    }

    .client-story__container {
        background: transparent;
    }

    .client-story__header {
        background: transparent;
    }

    .client-story__title {
        color: #ffffff !important;
    }

    .client-story__subtitle {
        color: #b8b3b0 !important;
    }

    .client-story__card {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-bg-card-secondary) !important;
    }

    .client-story__card:hover {
        border-color: #77883e !important;
        box-shadow: 0 8px 24px rgba(119, 136, 62, 0.15) !important;
    }

    .client-story__quote {
        color: var(--dm-text-primary) !important;
    }

    .client-story__name {
        color: #ffffff !important;
    }

    .client-story__description {
        color: #b8b3b0 !important;
    }

    .client-story__cta {
        color: #d9cc94 !important;
    }

    /* Wellness Categories Section */
    .wellness-categories {
        background: var(--dm-bg-card) !important;
        padding: 6rem 1rem !important;
    }

    .wellness-categories__container {
        background: transparent !important;
    }

    .wellness-categories__header {
        background: transparent !important;
    }

    .wellness-categories__title {
        color: #ffffff !important;
    }

    .wellness-categories__subtitle {
        color: #b8b3b0 !important;
    }

    .wellness-categories__help-link {
        color: #d9cc94 !important;
    }

    .wellness-categories__help-link:hover {
        color: #e8c547 !important;
    }

    .wellness-card {
        background: var(--dm-bg-card-secondary) !important;
        border: 1px solid var(--dm-border-primary) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }

    .wellness-card:hover {
        border-color: #77883e !important;
        box-shadow: 0 8px 24px rgba(119, 136, 62, 0.15) !important;
        transform: translateY(-8px);
    }

    .wellness-card--link {
        color: inherit;
    }

    .wellness-card__image {
        background: linear-gradient(135deg, var(--dm-bg-card-secondary) 0%, var(--dm-bg-card-secondary) 100%) !important;
    }

    .wellness-card__content {
        background: var(--dm-bg-card-secondary) !important;
    }

    .wellness-card__title {
        color: #ffffff !important;
    }

    .wellness-card__description {
        color: var(--dm-text-primary) !important;
    }

    .wellness-card__link {
        color: #d9cc94 !important;
    }

    .wellness-card--link:hover .wellness-card__link {
        color: #e8c547 !important;
        text-decoration: underline;
    }

    .wellness-card__reading-time {
        background: rgba(119, 136, 62, 0.3) !important;
        color: #d9cc94 !important;
    }

    /* ========================================== */
    /* 1. NAVIGATION TABS & BUTTONS */
    /* ========================================== */

    .nav-tab {
        background-color: var(--dm-bg-card) !important;
        color: var(--dm-text-primary) !important;
        border-color: var(--dm-border-primary) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }

    .nav-tab:hover {
        background-color: var(--dm-bg-card-secondary) !important;
        color: #ffffff !important;
        border-color: #77883e !important;
        box-shadow: 0 4px 12px rgba(119, 136, 62, 0.15) !important;
    }

    .nav-tab.active {
        background-color: var(--dm-bg-card-secondary) !important;
        color: #ffffff !important;
        border-color: #77883e !important;
        box-shadow: 0 4px 12px rgba(119, 136, 62, 0.2) !important;
    }

    .nav-tab__title {
        color: var(--dm-text-primary) !important;
    }

    .nav-tab.active .nav-tab__title {
        color: #d9cc94 !important;
    }

    .nav-tab__description {
        color: #b8b3b0 !important;
    }

    /* Navigation Items */
    .nav-section-item,
    .menu-item {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary) !important;
        color: var(--dm-text-primary) !important;
    }

    .nav-section-item:hover,
    .menu-item:hover {
        background: var(--dm-bg-card-secondary) !important;
        border-color: var(--dm-color-primary) !important;
        color: #ffffff !important;
    }

    .nav-section-item.active,
    .menu-item.active {
        background: var(--dm-bg-card-secondary) !important;
        color: var(--dm-color-primary) !important;
        border-color: var(--dm-color-primary) !important;
    }

    .inbox-tab {
        background-color: var(--dm-bg-card) !important;
        color: var(--dm-text-primary) !important;
        border-color: var(--dm-border-primary) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }

    .inbox-tab:hover {
        background-color: var(--dm-bg-card-secondary) !important;
        color: #ffffff !important;
        border-color: #77883e !important;
        box-shadow: 0 4px 12px rgba(119, 136, 62, 0.15) !important;
    }

    .inbox-tab.active {
        background-color: var(--dm-bg-card-secondary) !important;
        color: #ffffff !important;
        border-color: #77883e !important;
        box-shadow: 0 4px 12px rgba(119, 136, 62, 0.2) !important;
    }

    .inbox-tab__title {
        color: var(--dm-text-primary) !important;
    }

    .inbox-tab.active .inbox-tab__title {
        color: #d9cc94 !important;
    }

    .inbox-tab__description {
        color: #b8b3b0 !important;
    }

    /* ========================================== */
    /* 2. CARDS & CONTAINERS */
    /* ========================================== */

    /* Content Cards & Panels */
    .content-panel,
    .panel,
    .sidebar-panel {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary) !important;
    }

    .card-section,
    .universal-card {
        background: var(--dm-bg-card) !important;
    }

    .card-section-title {
        color: #ffffff !important;
    }

    /* Article Cards (TIPS section) */
    .article-card {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary) !important;
        color: var(--dm-text-primary) !important;
    }

    .article-card .article-title,
    .tips-section__title,
    .tips-section__header {
        color: #ffffff !important;
    }

    .tips-icon {
        background: #77883e !important;
        color: #ffffff !important;
    }

    .tips-list {
        color: #d4cfc3 !important;
    }

    .tips-list li {
        color: #d4cfc3 !important;
    }

    .sidebar-section {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary) !important;
    }

    .sidebar-section__title {
        color: #ffffff !important;
    }

    /* Sidebar Styling */
    .sidebar,
    .sidebar-nav,
    [class*="sidebar"] {
        background-color: var(--dm-bg-page) !important;
        border-color: var(--dm-border-primary);
    }
    
    .sidebar-section,
    .nav-section {
        background-color: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary);
    }
    
    .sidebar-section__title,
    .nav-section-title {
        color: #ffffff;
    }
    
    .sidebar-item,
    .nav-item {
        color: var(--dm-text-primary) !important;
    }
    
    .sidebar-item:hover,
    .nav-item:hover {
        background-color: var(--dm-bg-card-secondary) !important;
        color: #ffffff;
    }
    
    .sidebar-item.active,
    .nav-item.active {
        background-color: var(--dm-bg-card-secondary) !important;
        color: #77883e;
        border-left-color: #77883e;
    }

    .sidebar-tab {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary) !important;
        color: var(--dm-text-primary) !important;
    }

    .sidebar-tab.active {
        background: var(--dm-bg-card-secondary) !important;
        color: #77883e !important;
        border-color: #77883e !important;
    }

    .sidebar-tab__title {
        color: var(--dm-text-primary) !important;
    }

    .sidebar-tab.active .sidebar-tab__title {
        color: #ffffff !important;
    }

    .sidebar-tab__badge {
        background: #77883e !important;
        color: #ffffff !important;
    }

    /* Coverage & Option Boxes */
    .coverage-option-box,
    .option-box,
    .coverage-option {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary) !important;
        color: var(--dm-text-primary) !important;
    }

    .coverage-option-title,
    .option-title {
        color: #ffffff !important;
    }

    .coverage-option-description,
    .option-description {
        color: var(--dm-text-primary) !important;
    }

    /* Category/List Items */
    .category-card,
    .category-item,
    .list-item {
        background: var(--dm-bg-card-secondary) !important;
        border-color: var(--dm-border-primary) !important;
        color: var(--dm-text-primary) !important;
    }

    .category-card:hover,
    .category-item:hover,
    .list-item:hover {
        background: var(--dm-border-primary) !important;
        border-color: var(--dm-color-primary) !important;
    }

    .category-card.selected,
    .category-item.selected,
    .list-item.selected {
        background: var(--dm-primary-opacity-20) !important;
        border-color: var(--dm-color-primary) !important;
        box-shadow: 0 0 0 3px var(--dm-primary-opacity-20) !important;
    }

    .category-card h4,
    .category-item h4 {
        color: #ffffff !important;
    }

    .category-card p,
    .category-item p {
        color: var(--dm-text-secondary) !important;
    }

    /* Subcategory Cards */
    .subcategory-card {
        background-color: var(--dm-bg-card-secondary) !important;
        border: 1px solid var(--dm-border-primary) !important;
        color: var(--dm-text-primary) !important;
    }

    .subcategory-card:hover {
        background-color: var(--dm-border-primary) !important;
        border-color: var(--dm-color-primary) !important;
    }

    .subcategory-card input[type="checkbox"] {
        background: var(--dm-bg-card) !important;
    }

    .subcategory-card .checkbox-text {
        color: var(--dm-text-primary) !important;
    }

    .subcategory-card .checkbox-text div {
        color: var(--dm-text-secondary) !important;
    }

    .checkbox-label:hover {
        background-color: var(--dm-border-primary) !important;
        border-color: var(--dm-color-primary) !important;
    }

    .checkbox-label input[type="checkbox"]:checked + .checkbox-text {
        color: var(--dm-accent-gold) !important;
        font-weight: 600 !important;
    }

    .subcategories-list {
        background: var(--dm-bg-card) !important;
    }

    /* Choice Cards */
    .choice-card,
    .step-choice-card {
        background: var(--dm-bg-card-secondary) !important;
        border-color: var(--dm-border-primary) !important;
        color: var(--dm-text-primary) !important;
    }

    .choice-card:hover,
    .step-choice-card:hover {
        border-color: var(--dm-color-primary) !important;
        background: var(--dm-primary-opacity-15) !important;
    }

    .choice-title,
    .choice-card h3 {
        color: #ffffff !important;
    }

    .choice-desc,
    .choice-card p {
        color: var(--dm-text-secondary) !important;
    }

    /* Section Groups & Containers */
    .section-group,
    .settings-group {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary) !important;
    }

    /* ========================================== */
    /* 3. BADGES & TAGS */
    /* ========================================== */

    /* Coverage Tags */
    .coverage-tags-container,
    .tags-container {
        background: var(--dm-bg-page) !important;
    }

    .coverage-tag,
    .tag {
        background: var(--dm-primary-opacity-15) !important;
        color: var(--dm-color-primary) !important;
        border-color: var(--dm-color-primary) !important;
    }

    .coverage-tag:hover,
    .tag:hover {
        background: var(--dm-primary-opacity-20) !important;
    }

    .status-badge,
    .status-label {
        background: var(--dm-primary-opacity-15) !important;
        color: var(--dm-color-primary) !important;
    }

    /* ========================================== */
    /* 4. INTERACTIVE ELEMENTS & STATES */
    /* ========================================== */

    /* Filter Controls */
    .filter-section,
    .filters-panel,
    [class*="filter"] {
        background-color: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary);
    }
    
    .filter-group label,
    .filter-label {
        color: #ffffff;
    }
    
    .filter-item {
        background-color: var(--dm-bg-page) !important;
        border-color: var(--dm-border-primary);
    }
    
    .filter-item:hover {
        background-color: var(--dm-bg-card-secondary) !important;
    }
    
    .filter-item input[type="checkbox"],
    .filter-item input[type="radio"] {
        border-color: var(--dm-border-primary);
    }

    .filter-select,
    .filter-label {
        background: var(--dm-bg-page) !important;
        color: var(--dm-text-primary) !important;
        border-color: var(--dm-border-primary) !important;
    }

    .filter-button {
        background-color: var(--dm-bg-card) !important;
        color: var(--dm-text-primary) !important;
        border-color: var(--dm-border-primary) !important;
    }

    .filter-button:hover {
        background-color: var(--dm-bg-card-secondary) !important;
        color: #ffffff !important;
        border-color: #77883e !important;
    }

    .filter-button.active {
        background-color: #77883e !important;
        color: #ffffff !important;
        border-color: #77883e !important;
    }

    .sidebar-filters-section {
        background: var(--dm-bg-card) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }

    /* Tips & Help */
    .tips-section,
    .help-section,
    [class*="tips"],
    [class*="help"] {
        background-color: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary);
    }
    
    .tips-section-title,
    .help-section-title {
        color: #ffffff;
    }
    
    .tips-list,
    .help-list {
        color: #d4cfc3;
    }
    
    .tips-list li,
    .help-list li {
        color: #d4cfc3;
    }

    .tips-container {
        background-color: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary) !important;
    }

    .tip-item {
        border-color: var(--dm-border-primary) !important;
        color: var(--dm-text-primary) !important;
    }

    .tip-title {
        color: #ffffff !important;
    }

    .tip-description {
        color: #b8b3b0 !important;
    }

    .info-box {
        background-color: var(--dm-bg-card-secondary) !important;
        border-color: #77883e !important;
        color: var(--dm-text-primary) !important;
    }

    .info-box-title {
        color: #d9cc94 !important;
    }

    /* Progress & Status */
    .progress {
        background: var(--dm-bg-card-secondary) !important;
    }

    .progress-bar {
        background: var(--dm-color-primary) !important;
    }

    .status-badge,
    .status-label {
        background: var(--dm-primary-opacity-15) !important;
        color: var(--dm-color-primary) !important;
    }

    /* Toggle switch styling */
    .toggle-switch .toggle-slider {
        background-color: var(--dm-bg-card-secondary) !important;
    }
    
    .toggle-switch input:checked + .toggle-slider {
        background-color: #77883e !important;
    }

    .toggle-label .toggle-slider {
        background-color: var(--dm-bg-card-secondary) !important;
        border-color: var(--dm-border-primary) !important;
    }
    
    .toggle-checkbox:checked + .toggle-slider {
        background-color: #77883e !important;
    }
    
    .toggle-label .toggle-slider::after {
        background-color: var(--dm-text-primary) !important;
    }

    /* ========================================== */
    /* 5. TEXT & UTILITY CLASSES */
    /* ========================================== */

    .text-primary {
        color: #77883e !important;
    }

    .text-secondary {
        color: #b8b3b0 !important;
    }

    .text-muted {
        color: #8a8580 !important;
    }

    .text-light {
        color: var(--dm-text-primary) !important;
    }

    .text-white {
        color: #ffffff !important;
    }

    .text-accent {
        color: #d9cc94 !important;
    }

    /* Background utilities */
    .bg-primary {
        background-color: #77883e !important;
        color: #ffffff !important;
    }

    .bg-secondary {
        background-color: var(--dm-bg-card-secondary) !important;
        color: var(--dm-text-primary) !important;
    }

    .bg-dark {
        background-color: var(--dm-text-on-light) !important;
        color: var(--dm-text-primary) !important;
    }

    .bg-card {
        background-color: var(--dm-bg-card) !important;
        color: var(--dm-text-primary) !important;
    }

    /* Border utilities */
    .border-primary {
        border-color: #77883e !important;
    }

    .border-secondary {
        border-color: var(--dm-border-primary) !important;
    }

    .border-light {
        border-color: var(--dm-bg-card-secondary) !important;
    }

    /* Spacing & Layout */
    .container {
        background-color: transparent;
    }

    .section {
        background-color: var(--dm-text-on-light) !important;
    }

    .text-muted,
    .help-text,
    .form-hint {
        color: var(--dm-text-secondary) !important;
    }

    .text-accent,
    .highlight {
        color: var(--dm-accent-gold) !important;
    }

    /* Step/Fieldset Elements */
    .form-fieldset {
        border-color: var(--dm-border-primary) !important;
        background: var(--dm-bg-card-secondary) !important;
    }

    .form-fieldset legend {
        color: var(--dm-text-primary) !important;
    }

    /* Step Footer */
    .step-footer-text,
    .step-info,
    .privacy-disclaimer {
        color: var(--dm-text-secondary) !important;
    }

    /* Path/Options Grid */
    .options-grid,
    .step-path-choice {
        background: var(--dm-bg-card) !important;
        border-top-color: var(--dm-border-primary) !important;
    }

    /* Coverage Controls & Sections */
    .coverage-controls-column,
    .coverage-section-group {
        background: var(--dm-bg-card) !important;
    }

    .coverage-section-label,
    .coverage-label {
        color: var(--dm-text-primary) !important;
    }

    .coverage-radius-display,
    .radius-value {
        color: var(--dm-accent-gold) !important;
    }

    .radius-slider,
    .coverage-option-checkbox {
        accent-color: var(--dm-color-primary) !important;
    }

    /* Search/Filter Inputs */
    .category-search,
    .search-input,
    .filter-input {
        background: var(--dm-bg-card-secondary) !important;
        border-color: var(--dm-border-primary) !important;
        color: var(--dm-text-primary) !important;
    }

    .category-search::placeholder,
    .search-input::placeholder,
    .filter-input::placeholder {
        color: var(--dm-form-placeholder) !important;
    }

    .category-search:focus,
    .search-input:focus,
    .filter-input:focus {
        border-color: var(--dm-color-primary) !important;
    }

    /* Matching Status */
    .matching-status-value,
    .status-value {
        color: var(--dm-accent-gold) !important;
    }

    /* Generic Text */
    .section-description {
        color: var(--dm-text-primary) !important;
    }

    /* Visibility Utilities */
    .visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border-width: 0 !important;
    }
}