/* ================================
   ENHANCED UNIVERSAL DARK MODE CSS
   Specifically targets your app's custom classes
   ================================ */

@media (prefers-color-scheme: dark) {
    
    /* ===== FORCE OVERRIDE BASE STYLES ===== */
    html, body {
        background: #1a202c !important;
        color: #f7fafc !important;
    }
    
    /* ===== YOUR CUSTOM APP CLASSES ===== */
    
    /* Main containers */
    .bodyContains,
    .primaryBloc,
    .secondaryBloc {
        background: #1a202c !important;
        color: #f7fafc !important;
    }
    
    /* Headers and Navigation */
    .theHeader,
    .theFooter {
        background: #2d3748 !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    .theHeader span,
    .theHeader button,
    .theFooter .fContent {
        color: #f7fafc ;
        background: rgba(255, 255, 255, 0.1) ;
    }
    
    .theHeader button:active,
    .theFooter .fContent:active {
        opacity: 0.7 !important;
    }
    
    .theFooter .active button {
        background: #667eea !important;
    }
    
    .theFooter .active span,
    .theFooter .active label {
        color: #ffffff !important;
    }
    
    /* Modal and Backdrop */
    .modal-content,
    .modal-backdrop {
        background: #2d3748 !important;
        color: #f7fafc !important;
    }
    
    .modal-backdrop {
        background: rgba(45, 55, 72, 0.8) !important;
    }
    
    .fullscreenbg {
        background: #2d3748 !important;
    }
    
    /* Cards and Containers */
    .accountCard,
    .home-products,
    .products,
    .subscription-card {
        background: rgba(255, 255, 255, 0.05) !important;
        color: #f7fafc !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }
    
    .accountCard .titleBar,
    .rewards_history .titleBar {
        background: #4a5568 !important;
        color: #f7fafc !important;
    }
    
    /* Text Content */
    .accountCard .cenvamartBalance,
    .accountCard .customStyle,
    .accountCard .cashBalance,
    .subsection-name > span:nth-of-type(2),
    .btnContent > span:nth-of-type(2),
    .activity-nadaty .activity-name,
    .activity-ampost .activity-amount {
        color: #e2e8f0 !important;
    }
    
    /* Specific color overrides for your brand colors */
    .accountCard,
    .accountCard .title,
    .subsection-name > span:first-child,
    .btnContent > span:first-child,
    .theHeader span {
        color: #81a9ff !important; /* Lighter version of your #324483 */
    }
    
    /* Buttons and Interactive Elements */
    .accountCard .S_R_W,
    .addItemToCart,
    .buyItemNow,
    .btnContent {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #e2e8f0 !important;
        cursor: pointer;
    }
    
    .addItemToCart {
        background: #f6d55c !important; /* Darker gold */
        color: #1a202c !important;
    }
    
    .buyItemNow {
        background: #ed8936 !important; /* Darker orange */
        color: #1a202c !important;
    }
    
    /* Subsections and Menu Items */
    .mysubsections,
    .subsection {
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    .mysubsections .active,
    .subsection.active {
        background: rgba(129, 169, 255, 0.2) !important;
        border-color: #81a9ff !important;
    }
    
    .active .pseudo,
    .active .team-number,
    .step.active .step-label {
        color: #81a9ff !important;
    }
    
    /* Input and Form Elements */
    .input-container,
    .messageBoxtext {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #f7fafc !important;
        border-color: #4a5568 !important;
    }
    
    .messageBoxtext {
        background: #4a5568 !important;
        color: #ffffff !important;
    }
    
    /* Shop and Activity Sections */
    .shopMenu-container,
    .shopSubmenu-container,
    .activity-menu-container {
        background: #2d3748 !important;
    }
    
    .shopMenu .active,
    .shopSubmenu .active,
    .activity-menu-container .active {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #81a9ff !important;
    }
    
    /* Product Cards */
    .home-products-container,
    .products-container {
        background: transparent !important;
    }
    
    .amount-container,
    .products-container .prsection .amount-container {
        color: #f6ad55 !important; /* Lighter orange for dark mode */
    }
    
    .beforeRealPrice {
        color: rgba(252, 129, 129, 0.7) !important; /* Lighter red */
    }
    
    /* Activity and Status Elements */
    .activity-bg,
    .subactivities-container {
        background: rgba(255, 255, 255, 0.05) !important;
    }
    
    .activity-status-title {
        color: #81a9ff !important;
    }
    
    .activity-nadaty .activity-date,
    .activity-nadaty .activity-type,
    .activity-ampost .activity-status,
    .activity-duration {
        color: #a0aec0 !important;
    }
    
    /* Cart and Badge Elements */
    .custom-cart {
        background: #2d3748 !important;
        border-color: #48bb78 !important;
    }
    
    .cart-number {
        background: #ed8936 !important;
        color: #ffffff !important;
    }
    
    .custom-badge {
        background: #ed8936 !important;
        color: #ffffff !important;
    }
    
    .already-in-cart {
        background: #319795 !important;
        color: #ffffff !important;
    }
    
    /* Profile and User Sections */
    .back-fore-ground-container .bfground-container {
        background: rgba(255, 255, 255, 0.1) !important;
    }
    
    .fground .userFullname,
    .fground .username {
        color: #f7fafc !important;
    }
    
    .profileLetter {
        background-color: #4a5568 !important;
        color: #ffffff !important;
    }
    
    /* Date Range and Filter Elements */
    #dateRange-container .dateRange {
        background: rgba(129, 169, 255, 0.2) !important;
        color: #81a9ff !important;
    }
    
    /* Empty States */
    .empty-list-container span {
        color: #718096 !important;
    }
    
    #chooseAnotherDateRange {
        color: #81a9ff !important;
    }
    
    /* Payment and Subscription Specific */
    .payment-method-selector,
    .payment-section {
        background: #2d3748 !important;
        color: #f7fafc !important;
    }
    
    .payment-nav {
        background: #4a5568 !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    .payment-nav-btn {
        color: #a0aec0 !important;
    }
    
    .payment-nav-btn.active {
        background: #2d3748 !important;
        color: #81a9ff !important;
        box-shadow: 0 2px 0 #667eea !important;
    }
    
    /* Search Results */
    .search-product {
        background: rgba(45, 55, 72, 0.8) !important;
        color: #e2e8f0 !important;
    }
    
    .search-product .result-text {
        color: #e2e8f0 !important;
    }
    
    /* Legal and Footer Text */
    .legal-agreement-container {
        color: #81a9ff !important;
    }
    
    /* Generic text colors for your app */
    .mySection .inner-container h4,
    .second-header h4 {
        color: #f7fafc !important;
    }
    
    /* Override any remaining brand colors */
    [style*="color: #324483"],
    [style*="background: #324483"] {
        color: #81a9ff !important;
        background: #4a5568 !important;
    }
    
    [style*="background: #d5defd"],
    [style*="background: #e8edfe"] {
        background: #2d3748 !important;
    }
    
    /* Additional force overrides for stubborn elements */
    * [class*="primary"],
    * [class*="main"],
    * [class*="content"] {
        color: #e2e8f0 !important;
    }
    
    /* ===== FORCE IMPORTANT OVERRIDES ===== */
    
    /* For elements that use inline styles or very specific CSS */
    .primaryBloc .theHeader,
    .primaryBloc .theFooter {
        background: #2d3748 !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Override any background images or gradients in dark mode */
    [style*="background-image"],
    [style*="background: linear-gradient"] {
        background-image: none !important;
        background: #2d3748 !important;
    }
    
    /* Final catch-all for any missed elements */
    [class*="container"]:not([class*="image"]),
    [class*="wrapper"]:not([class*="image"]),
    [class*="section"]:not([class*="image"]),
    [class*="content"]:not([class*="image"]) {
        background: rgba(45, 55, 72, 0.95) !important;
        color: #e2e8f0 !important;
    }
}