/* Trading Challenges - Dark Theme v1.0.0
 * Cookie-based theme detection for Blocksy
 * Works with .tc-dark-mode class managed by JavaScript
 */

/* ========================================
   CSS VARIABLES - Dark Theme
   Applied when .tc-dark-mode class is present
   ======================================== */

.trading-challenges-wrapper.tc-dark-mode,
.table-wrapper.tc-dark-mode,
.sidebar.tc-dark-mode,
.tc-header.tc-dark-mode {
    /* Gold colors - UNCHANGED */
    --tc-primary: #f59e0b !important;
    --tc-primary-hover: #d97706 !important;
    --tc-primary-light: #78350f !important;
    
    /* Semantic colors */
    --tc-success: #10b981 !important;
    --tc-success-light: #064e3b !important;
    --tc-danger: #ef4444 !important;
    --tc-danger-light: #7f1d1d !important;
    
    /* Inverted grays */
    --tc-gray-50: #0f172a !important;
    --tc-gray-100: #1e293b !important;
    --tc-gray-200: #334155 !important;
    --tc-gray-300: #475569 !important;
    --tc-gray-400: #64748b !important;
    --tc-gray-500: #94a3b8 !important;
    --tc-gray-600: #cbd5e1 !important;
    --tc-gray-700: #e2e8f0 !important;
    --tc-gray-800: #f1f5f9 !important;
    --tc-gray-900: #f8fafc !important;
    
    /* Inverted text */
    --tc-text-primary: #f8fafc !important;
    --tc-text-secondary: #cbd5e1 !important;
    --tc-text-tertiary: #94a3b8 !important;
    --tc-text-light: #64748b !important;
    
    /* Inverted backgrounds */
    --tc-bg-primary: #1e293b !important;
    --tc-bg-secondary: #0f172a !important;
    --tc-bg-tertiary: #334155 !important;
    
    /* Inverted borders */
    --tc-border-light: #334155 !important;
    --tc-border-medium: #475569 !important;
    
    /* Enhanced shadows for dark backgrounds */
    --tc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3) !important;
    --tc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3) !important;
    --tc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4) !important;
    --tc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6), 0 8px 10px -6px rgb(0 0 0 / 0.5) !important;
}

/* ========================================
   COMPONENT OVERRIDES - HEADER
   ======================================== */

.table-wrapper.tc-dark-mode .company-label {
    font-size: 13px;
    color: rgb(255 255 255);
    text-transform: none;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    font-weight: 600;
}

.challenges-table-container.tc-dark-mode {
    --tc-bg-primary: #1e293b !important;
    --tc-bg-secondary: #1e293b !important;
    --tc-bg-tertiary: #334155 !important;
}

.tc-header.tc-dark-mode {
    background: var(--tc-bg-primary, #1e293b) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.tc-header.tc-dark-mode .tc-header-title {
    color: var(--tc-text-primary, #f8fafc) !important;
}

.tc-header.tc-dark-mode .tc-header-disclaimer {
    color: var(--tc-text-secondary, #cbd5e1) !important;
}

.tc-header.tc-dark-mode .tc-email-link {
    color: #60a5fa !important;
}

.tc-header.tc-dark-mode .tc-email-link:hover {
    color: #93c5fd !important;
}

/* ========================================
   HERO SECTION - DARK THEME
   ======================================== */

.tc-hero-section.tc-dark-mode {
    background: transparent !important;
}

.tc-hero-section.tc-dark-mode .tc-hero-title {
    color: var(--tc-text-primary, #f8fafc) !important;
}

.tc-hero-section.tc-dark-mode .tc-hero-subtitle {
    color: var(--tc-text-secondary, #cbd5e1) !important;
}

.tc-hero-section.tc-dark-mode .tc-benefit-card {
    background: var(--tc-bg-primary, #1e293b) !important;
    border-color: var(--tc-bg-primary, #1e293b) !important;
}

.tc-hero-section.tc-dark-mode .tc-benefit-card:hover {
    background: var(--tc-bg-tertiary, #334155) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.tc-hero-section.tc-dark-mode .tc-benefit-value {
    color: var(--tc-primary, #f59e0b) !important;
}

.tc-hero-section.tc-dark-mode .tc-benefit-label {
    color: var(--tc-text-secondary, #cbd5e1) !important;
}

/* ========================================
   COMPONENT OVERRIDES - WRAPPER & SIDEBAR
   ======================================== */

.trading-challenges-wrapper.tc-dark-mode {
    background: var(--tc-bg-secondary, #0f172a) !important;
}

.sidebar.tc-dark-mode {
    background: var(--tc-bg-primary, #1e293b) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.sidebar.tc-dark-mode h3,
.sidebar.tc-dark-mode h4 {
    color: var(--tc-text-primary, #f8fafc) !important;
}

/* ========================================
   COMPONENT OVERRIDES - FILTERS
   ======================================== */

.sidebar.tc-dark-mode .filter-btn {
    background: var(--tc-bg-tertiary, #334155) !important;
    color: var(--tc-text-primary, #f8fafc) !important;
}

.sidebar.tc-dark-mode .filter-btn:hover {
    background: var(--tc-gray-300, #475569) !important;
}

.sidebar.tc-dark-mode .filter-btn.active {
    background: var(--tc-primary, #f59e0b) !important;
    color: #000 !important;
}

.sidebar.tc-dark-mode .filter-checkbox {
    color: var(--tc-text-primary, #f8fafc) !important;
}

.sidebar.tc-dark-mode .range-values {
    color: var(--tc-text-primary, #f8fafc) !important;
}

/* Range Slider Dark Theme */
.sidebar.tc-dark-mode .range-slider .noUi-target {
    background: var(--tc-gray-300, #475569) !important;
}

.sidebar.tc-dark-mode .range-slider .noUi-connect {
    background: var(--tc-primary, #f59e0b) !important;
}

.sidebar.tc-dark-mode .range-slider .noUi-handle {
    background: var(--tc-bg-primary, #1e293b) !important;
    border-color: var(--tc-primary, #f59e0b) !important;
}

/* ========================================
   COMPONENT OVERRIDES - TABLE
   ======================================== */

.table-wrapper.tc-dark-mode {
    background: var(--tc-bg-primary, #1e293b) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.table-wrapper.tc-dark-mode .table-header {
    background: var(--tc-bg-secondary, #0f172a) !important;
}

.table-wrapper.tc-dark-mode .table-header > div {
    background: var(--tc-bg-secondary, #0f172a) !important;
    color: var(--tc-text-primary, #f8fafc) !important;
    border-bottom-color: var(--tc-border-light, #334155) !important;
}

.table-wrapper.tc-dark-mode .table-header > div[data-sort]:hover {
    background: var(--tc-bg-tertiary, #334155) !important;
}

/* Sticky columns dark mode */
.table-wrapper.tc-dark-mode .col-company,
.table-wrapper.tc-dark-mode .table-header .col-company {
    background: var(--tc-bg-secondary, #0f172a) !important;
}

.table-wrapper.tc-dark-mode .col-actions,
.table-wrapper.tc-dark-mode .table-header .col-actions {
    background: var(--tc-bg-secondary, #0f172a) !important;
}

/* Table Rows */
.table-wrapper.tc-dark-mode .challenge-row > div {
    border-bottom-color: var(--tc-border-light, #334155) !important;
    background: var(--tc-bg-primary, #1e293b) !important;
}

.table-wrapper.tc-dark-mode .challenge-row:hover > * {
    background: var(--tc-bg-tertiary, #334155) !important;
}

.table-wrapper.tc-dark-mode .challenge-row .col-company {
    background: var(--tc-bg-primary, #1e293b) !important;
}

.table-wrapper.tc-dark-mode .challenge-row:hover .col-company {
    background: var(--tc-bg-tertiary, #334155) !important;
}

.table-wrapper.tc-dark-mode .challenge-row .col-actions {
    background: var(--tc-bg-primary, #1e293b) !important;
}

.table-wrapper.tc-dark-mode .challenge-row:hover .col-actions {
    background: var(--tc-bg-tertiary, #334155) !important;
}

/* ========================================
   COMPONENT OVERRIDES - CHALLENGE INFO
   ======================================== */

.table-wrapper.tc-dark-mode .challenge-logo {
    background: var(--tc-bg-tertiary, #334155) !important;
}

.table-wrapper.tc-dark-mode .discount-badge {
    background: var(--tc-primary, #f59e0b) !important;
    color: #000 !important;
}

.table-wrapper.tc-dark-mode .challenge-name {
    color: var(--tc-text-primary, #f8fafc) !important;
}

.table-wrapper.tc-dark-mode .company-name {
    color: var(--tc-text-secondary, #cbd5e1) !important;
}

.table-wrapper.tc-dark-mode .rating-container {
    border-color: var(--tc-primary, #f59e0b) !important;
    background: transparent !important;
}

.table-wrapper.tc-dark-mode .rating-score {
    color: var(--tc-text-primary, #f8fafc) !important;
}

.table-wrapper.tc-dark-mode .rating-star {
    color: var(--tc-primary, #f59e0b) !important;
}

.table-wrapper.tc-dark-mode .rating-star.empty {
    color: var(--tc-gray-400, #64748b) !important;
}

.table-wrapper.tc-dark-mode .rating-reviews {
    color: var(--tc-primary, #f59e0b) !important;
}

/* ========================================
   COMPONENT OVERRIDES - PRICES & VALUES
   ======================================== */

.table-wrapper.tc-dark-mode .price {
    color: #10b981 !important;
}

.table-wrapper.tc-dark-mode .price-value {
    color: #10b981 !important;
}

.table-wrapper.tc-dark-mode .old-price {
    color: var(--tc-text-secondary, #cbd5e1) !important;
}

.table-wrapper.tc-dark-mode .info-value {
    color: var(--tc-text-primary, #f8fafc) !important;
}

.table-wrapper.tc-dark-mode .size-value,
.table-wrapper.tc-dark-mode .steps-value,
.table-wrapper.tc-dark-mode .target-value,
.table-wrapper.tc-dark-mode .split-value,
.table-wrapper.tc-dark-mode .loss-value,
.table-wrapper.tc-dark-mode .payout-value,
.table-wrapper.tc-dark-mode .leverage-value {
    color: var(--tc-text-primary, #f8fafc) !important;
}

/* ========================================
   COMPONENT OVERRIDES - BADGES
   ======================================== */

.table-wrapper.tc-dark-mode .step-badge {
    background: var(--tc-bg-tertiary, #334155) !important;
    color: var(--tc-text-primary, #f8fafc) !important;
}

.table-wrapper.tc-dark-mode .step-badge.instant {
    background: var(--tc-success-light, #064e3b) !important;
    color: #6ee7b7 !important;
}

.table-wrapper.tc-dark-mode .leverage-badge {
    background: var(--tc-primary-light, #78350f) !important;
    color: #fcd34d !important;
}

.table-wrapper.tc-dark-mode .profit-split-badge {
    background: var(--tc-bg-tertiary, #334155) !important;
    color: var(--tc-text-primary, #f8fafc) !important;
}

/* ========================================
   COMPONENT OVERRIDES - BUTTONS
   ======================================== */

.table-wrapper.tc-dark-mode .btn-primary,
.table-wrapper.tc-dark-mode .view-btn {
    background: var(--tc-primary, #f59e0b) !important;
    color: #000 !important;
}

.table-wrapper.tc-dark-mode .btn-primary:hover,
.table-wrapper.tc-dark-mode .view-btn:hover {
    background: var(--tc-primary-hover, #d97706) !important;
    color: #000 !important;
}

/* ========================================
   COMPONENT OVERRIDES - INFO ICONS & TOOLTIPS
   ======================================== */

.table-wrapper.tc-dark-mode .info-icon {
    border-color: var(--tc-gray-400, #64748b) !important;
}

.table-wrapper.tc-dark-mode .info-icon::after {
    color: var(--tc-gray-400, #64748b) !important;
}

.table-wrapper.tc-dark-mode .info-icon:hover {
    background: var(--tc-bg-tertiary, #334155) !important;
    border-color: var(--tc-text-secondary, #cbd5e1) !important;
}

.table-wrapper.tc-dark-mode .info-icon:hover::after {
    color: var(--tc-text-primary, #f8fafc) !important;
}

.table-wrapper.tc-dark-mode .tooltip {
    background: var(--tc-bg-primary, #1e293b) !important;
    color: var(--tc-text-primary, #f8fafc) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid var(--tc-border-light, #334155) !important;
}

.table-wrapper.tc-dark-mode .tooltip::after {
    border-bottom-color: var(--tc-bg-primary, #1e293b) !important;
}

.table-wrapper.tc-dark-mode .tooltip a {
    color: #60a5fa !important;
}

.table-wrapper.tc-dark-mode .tooltip a:hover {
    color: #93c5fd !important;
}

/* ========================================
   COMPONENT OVERRIDES - SORT ICONS
   ======================================== */

.table-wrapper.tc-dark-mode .sort-icon {
    border-bottom-color: var(--tc-gray-400, #64748b) !important;
}

.table-wrapper.tc-dark-mode .table-header > div[data-sort].sort-asc .sort-icon {
    border-bottom-color: var(--tc-primary, #f59e0b) !important;
}

.table-wrapper.tc-dark-mode .table-header > div[data-sort].sort-desc .sort-icon {
    border-top-color: var(--tc-primary, #f59e0b) !important;
}

/* ========================================
   COMPONENT OVERRIDES - PAGINATION
   ======================================== */

.trading-challenges-wrapper.tc-dark-mode .pagination {
    background: transparent !important;
}

.trading-challenges-wrapper.tc-dark-mode .pagination-btn {
    background: var(--tc-bg-primary, #1e293b) !important;
    color: var(--tc-text-primary, #f8fafc) !important;
    border-color: var(--tc-border-light, #334155) !important;
}

.trading-challenges-wrapper.tc-dark-mode .pagination-btn:hover {
    background: var(--tc-bg-tertiary, #334155) !important;
    border-color: var(--tc-primary, #f59e0b) !important;
}

.trading-challenges-wrapper.tc-dark-mode .pagination-btn.active {
    background: var(--tc-primary, #f59e0b) !important;
    border-color: var(--tc-primary, #f59e0b) !important;
    color: #000 !important;
}

.trading-challenges-wrapper.tc-dark-mode .pagination-dots {
    color: var(--tc-text-tertiary, #94a3b8) !important;
}

/* ========================================
   MOBILE FILTERS POPUP
   ======================================== */

.mobile-filters-popup.tc-dark-mode {
    background: var(--tc-bg-primary, #1e293b) !important;
}

.mobile-filters-popup.tc-dark-mode .mobile-filters-header {
    border-bottom-color: var(--tc-border-light, #334155) !important;
}

.mobile-filters-popup.tc-dark-mode .mobile-filters-header h3 {
    color: var(--tc-text-primary, #f8fafc) !important;
}

.mobile-filters-popup.tc-dark-mode .mobile-filters-close {
    color: var(--tc-text-secondary, #cbd5e1) !important;
}

.mobile-filters-popup.tc-dark-mode .filter-section h4 {
    color: var(--tc-text-primary, #f8fafc) !important;
}

.mobile-filters-popup.tc-dark-mode .filter-btn {
    background: var(--tc-bg-tertiary, #334155) !important;
    color: var(--tc-text-primary, #f8fafc) !important;
}

.mobile-filters-popup.tc-dark-mode .filter-btn.active {
    background: var(--tc-primary, #f59e0b) !important;
    color: #000 !important;
}

.mobile-filters-popup.tc-dark-mode .filter-checkbox {
    color: var(--tc-text-primary, #f8fafc) !important;
}

.mobile-filters-popup.tc-dark-mode .range-values {
    color: var(--tc-text-primary, #f8fafc) !important;
}

.mobile-filters-popup.tc-dark-mode .range-values span {
    color: var(--tc-text-primary, #f8fafc) !important;
}

.mobile-filters-btn.tc-dark-mode {
    background: var(--tc-bg-tertiary, #334155) !important;
    color: var(--tc-text-primary, #f8fafc) !important;
}

.mobile-filters-btn.tc-dark-mode:hover {
    background: var(--tc-gray-300, #475569) !important;
}

/* ========================================
   MOBILE RESPONSIVE - Dark Theme
   ======================================== */

@media (max-width: 1024px) {
    .trading-challenges-wrapper.tc-dark-mode {
        background: var(--tc-bg-secondary, #0f172a) !important;
    }
}

@media (max-width: 768px) {
    .tc-header.tc-dark-mode {
        background: var(--tc-bg-primary, #1e293b) !important;
    }
    
    .table-wrapper.tc-dark-mode {
        box-shadow: none !important;
    }
    
    .table-wrapper.tc-dark-mode .table-header > div {
        background: var(--tc-bg-secondary, #0f172a) !important;
    }
    
    .table-wrapper.tc-dark-mode .challenge-row > div {
        background: var(--tc-bg-primary, #1e293b) !important;
    }
    
    .table-wrapper.tc-dark-mode .challenge-row:hover > * {
        background: var(--tc-bg-tertiary, #334155) !important;
    }
}

/* ========================================
   POPUP - DARK THEME
   ======================================== */

.popup-overlay.tc-dark-mode {
    background: rgba(0, 0, 0, 0.75) !important;
}

.popup.tc-dark-mode {
    background: var(--tc-bg-primary, #1e293b) !important;
    color: var(--tc-text-primary, #f8fafc) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.popup.tc-dark-mode .popup-fixed-header {
    background: var(--tc-bg-primary, #1e293b) !important;
    border-bottom: 1px solid var(--tc-border-light, #334155) !important;
}

.popup.tc-dark-mode .popup-title {
    color: var(--tc-text-primary, #f8fafc) !important;
}

.popup.tc-dark-mode .rating-score {
    color: var(--tc-text-primary, #f8fafc) !important;
}

.popup.tc-dark-mode .popup-logo {
    background: var(--tc-bg-tertiary, #334155) !important;
}

.popup.tc-dark-mode .popup-current-price {
    color: #10b981 !important;
}

.popup.tc-dark-mode .popup-old-price {
    color: var(--tc-text-tertiary, #94a3b8) !important;
}

.popup.tc-dark-mode .popup-close {
    color: var(--tc-text-tertiary, #94a3b8) !important;
}

.popup.tc-dark-mode .popup-close:hover {
    color: var(--tc-text-primary, #f8fafc) !important;
}

.popup.tc-dark-mode .popup-drawdown-section {
    background: var(--tc-bg-tertiary, #334155) !important;
}

.popup.tc-dark-mode .popup-drawdown-header {
    color: var(--tc-text-primary, #f8fafc) !important;
}

.popup.tc-dark-mode .popup-step-label {
    color: var(--tc-text-secondary, #cbd5e1) !important;
}

.popup.tc-dark-mode .popup-step-loss,
.popup.tc-dark-mode .popup-step-target {
    color: var(--tc-text-primary, #f8fafc) !important;
}

.popup.tc-dark-mode .popup-card {
    background: var(--tc-bg-tertiary, #334155) !important;
    border: 1px solid var(--tc-border-light, #334155) !important;
}

.popup.tc-dark-mode .popup-card-label {
    color: var(--tc-text-secondary, #cbd5e1) !important;
}

.popup.tc-dark-mode .popup-card-value {
    color: var(--tc-text-primary, #f8fafc) !important;
}

.popup.tc-dark-mode .popup-section-title {
    color: var(--tc-text-primary, #f8fafc) !important;
}

.popup.tc-dark-mode .popup-overview-item {
    border-bottom: 1px solid var(--tc-border-light, #334155) !important;
}

.popup.tc-dark-mode .popup-overview-label {
    color: var(--tc-text-secondary, #cbd5e1) !important;
}

.popup.tc-dark-mode .popup-overview-value {
    color: var(--tc-text-primary, #f8fafc) !important;
}

.popup.tc-dark-mode .popup-overview-value.yes {
    color: #10b981 !important;
}

.popup.tc-dark-mode .popup-overview-value.no {
    color: #ef4444 !important;
}

.popup.tc-dark-mode .btn-primary {
    background: var(--tc-primary, #f59e0b) !important;
    color: #000 !important;
}

.popup.tc-dark-mode .btn-primary:hover {
    background: var(--tc-primary-hover, #d97706) !important;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Force dark mode styling on specific elements when needed */
[data-tc-theme="dark"] .trading-challenges-wrapper,
[data-tc-theme="dark"] .table-wrapper,
[data-tc-theme="dark"] .sidebar,
[data-tc-theme="dark"] .tc-header {
    /* Inherit all dark mode styles when data attribute is present */
}