/* === TAKEDROP AI - MAIN STYLES === */

/* === CRITICAL: Prevent Flash of White Content (FOUC) === */
/* This must be at the top to ensure dark background loads first */
html {
    background-color: #08080A;
}
html[data-theme="light"] {
    background-color: #f8fafc;
}


/* === GLOBAL SELECT DROPDOWN FIX === */
/* Force dark background on all select dropdowns in dark mode */
select,
select:focus {
    color-scheme: dark;
}
select option {
    background-color: #1f2937 !important;
    color: white !important;
    padding: 8px 12px;
}
select option:hover,
select option:focus,
select option:checked {
    background-color: #4f46e5 !important;
    color: white !important;
}

body {
    background-color: #08080A;
    color: #ffffff;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
        linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 100% 100%, 60px 60px, 60px 60px;
}

/* === FLOATING HEADER === */
.island-header {
    background: rgba(18, 18, 22, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.1);
    border-radius: 99px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}
.island-header::after {
    content: ''; position: absolute; inset: 0; border-radius: 99px; padding: 1px;
    background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* === STORE SELECTOR === */
.store-pill {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}
.store-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 15px rgba(255,255,255,0.05);
}

/* === TOKEN BADGE === */
.token-badge {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #c4b5fd;
    position: relative;
}
.token-badge:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.2));
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}
.token-badge .coin-icon { color: #fbbf24; }

/* === BOTTOM DOCK === */
.dock-bar {
    background: rgba(18, 18, 24, 0.75);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 6px 10px;
    box-shadow: 0 4px 24px -4px rgba(0,0,0,0.5);
    position: relative;
}
.dock-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 12px; right: 12px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    z-index: 1;
}

/* === DOCK ICONS === */
.dock-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 6px 12px; border-radius: 10px;
    color: #94a3b8;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    min-width: 56px;
}
.dock-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
}
.dock-btn:hover i { transform: scale(1.08); }
.dock-label {
    font-size: 9px; font-weight: 500; font-family: 'Inter', sans-serif;
    opacity: 0.7; transition: opacity 0.2s;
}
.dock-btn:hover .dock-label { opacity: 1; }

/* Dock Button Colors */
.dock-btn.color-indigo:hover i, .dock-btn.color-indigo.active i { color: #818cf8; filter: drop-shadow(0 0 8px rgba(129, 140, 248, 0.5)); }
.dock-btn.color-emerald:hover i, .dock-btn.color-emerald.active i { color: #34d399; filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.5)); }
.dock-btn.color-cyan:hover i, .dock-btn.color-cyan.active i { color: #22d3ee; filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.5)); }
.dock-btn.color-orange:hover i, .dock-btn.color-orange.active i { color: #fb923c; filter: drop-shadow(0 0 8px rgba(251, 146, 60, 0.5)); }
.dock-btn.color-pink:hover i, .dock-btn.color-pink.active i { color: #f472b6; filter: drop-shadow(0 0 8px rgba(244, 114, 182, 0.5)); }
.dock-btn.color-amber:hover i, .dock-btn.color-amber.active i { color: #fbbf24; filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5)); }
.dock-btn.color-blue:hover i, .dock-btn.color-blue.active i { color: #60a5fa; filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.5)); }
.dock-btn.color-rose:hover i, .dock-btn.color-rose.active i { color: #fb7185; filter: drop-shadow(0 0 8px rgba(251, 113, 133, 0.5)); }
.dock-btn.color-gray:hover i, .dock-btn.color-gray.active i { color: #c4b5fd; filter: drop-shadow(0 0 8px rgba(196, 181, 253, 0.5)); }

.dock-btn.active { color: #fff; }
.dock-btn.color-indigo.active { background: rgba(129, 140, 248, 0.1); box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.2); }
.dock-btn.color-emerald.active { background: rgba(52, 211, 153, 0.1); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.2); }
.dock-btn.color-cyan.active { background: rgba(34, 211, 238, 0.1); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.2); }
.dock-btn.color-orange.active { background: rgba(251, 146, 60, 0.1); box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.2); }
.dock-btn.color-pink.active { background: rgba(244, 114, 182, 0.1); box-shadow: inset 0 0 0 1px rgba(244, 114, 182, 0.2); }
.dock-btn.color-amber.active { background: rgba(251, 191, 36, 0.1); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.2); }
.dock-btn.color-blue.active { background: rgba(96, 165, 250, 0.1); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.2); }
.dock-btn.color-rose.active { background: rgba(251, 113, 133, 0.1); box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.2); }
.dock-btn.color-gray.active { background: rgba(196, 181, 253, 0.1); box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.2); }

/* Slate color for layout toggle */
.dock-btn.color-slate:hover i { color: #94a3b8; filter: drop-shadow(0 0 8px rgba(148, 163, 184, 0.5)); }
.dock-btn.color-slate { opacity: 0.6; }
.dock-btn.color-slate:hover { opacity: 1; }

.dock-sep { width: 1px; height: 24px; background: rgba(255,255,255,0.06); margin: 0 2px; }

/* Drag handle - styled as dock button */
.dock-handle {
    cursor: pointer;
    opacity: 0.5;
}
.dock-handle:hover {
    opacity: 1;
}
.dock-handle:hover i {
    color: #94a3b8;
    filter: drop-shadow(0 0 8px rgba(148, 163, 184, 0.5));
}
.dock-handle:active {
    cursor: pointer;
}
.dock-handle:active i {
    color: #818cf8;
    filter: drop-shadow(0 0 8px rgba(129, 140, 248, 0.5));
}

/* Dock container base */
.dock-container {
    position: fixed;
    z-index: 50;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Horizontal orientation (bottom/top) */
.dock-horizontal .dock-bar {
    flex-direction: row;
    align-items: flex-end;
}
.dock-horizontal .dock-sep {
    width: 1px;
    height: 24px;
    margin: 0 2px;
}
.dock-horizontal .agent-ai-btn {
    transform: translateY(-12px);
}
.dock-horizontal .agent-ai-label {
    margin-top: -4px;
    margin-bottom: 2px;
    font-size: 8px;
}

/* Vertical orientation (left/right) */
html.dock-left .dock-bar {
    flex-direction: column;
    align-items: center;
    padding: 10px 6px;
    gap: 1px;
}
html.dock-left .dock-btn {
    min-width: unset;
    width: 44px;
    padding: 8px 6px;
}
html.dock-left .dock-label {
    display: none;
}
html.dock-left .dock-sep {
    width: 24px;
    height: 1px;
    margin: 3px 0;
}
html.dock-left .agent-ai-wrapper {
    margin: 3px 0;
}
html.dock-left .agent-ai-btn {
    transform: none;
    width: 36px;
    height: 36px;
    margin: 0;
}
html.dock-left .agent-ai-label {
    display: none;
}

/* Tooltips for vertical dock */
html.dock-left .dock-btn {
    position: relative;
}
html.dock-left .dock-btn::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 12px;
    background: rgba(18, 18, 22, 0.95);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 100;
}
html.dock-left .dock-btn:hover::after {
    opacity: 1;
    visibility: visible;
}



/* Voice AI Button */
.agent-ai-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
    border: 1px solid rgba(255,255,255,0.15);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin: 0 4px;
    transform: translateY(-12px);
    position: relative;
    z-index: 10;
}
.agent-ai-btn:hover {
    transform: translateY(-14px) scale(1.05);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45);
    border-color: rgba(255,255,255,0.25);
}
.agent-pulse {
    position: absolute; inset: -3px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25); opacity: 0;
    transition: opacity 0.3s;
}
.agent-ai-btn:hover .agent-pulse { opacity: 0.5; animation: ping-slow 2s infinite; }

@keyframes ping-slow {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* === USER MENU === */
.plan-badge {
    padding: 4px 8px; border-radius: 6px; font-size: 10px; font-weight: 600;
    background: rgba(99, 102, 241, 0.15); color: #a5b4fc;
}
.token-buy-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));
    border: 1px solid rgba(139, 92, 246, 0.3); color: #c4b5fd;
    transition: all 0.2s ease;
}
.token-buy-btn:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.25));
    border-color: rgba(139, 92, 246, 0.5); color: #fff; transform: translateY(-1px);
}
.user-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px; font-size: 13px;
    color: #d1d5db; transition: all 0.15s ease; text-decoration: none;
}
.user-menu-item:hover { background: rgba(255, 255, 255, 0.04); color: #fff; }

.dropdown-animate {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top center;
}

/* === DROPDOWN === */
.active-store-card {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 14px; padding: 12px;
}
.status-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 99px; font-size: 10px;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
}
.status-badge.online { background: rgba(34, 197, 94, 0.1); color: #4ade80; }
.status-badge.draft { background: rgba(251, 191, 36, 0.1); color: #fbbf24; }

.store-item {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 12px; border-radius: 12px;
    text-align: left; border: 1px solid transparent; transition: all 0.15s ease;
}
.store-item:hover { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.06); }

.add-store-btn {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    border: none; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.25);
}
.add-store-btn:hover { box-shadow: 0 6px 25px rgba(99, 102, 241, 0.4); transform: translateY(-1px); }

/* === BENTO CARDS === */
.bento-card {
    background: rgba(18, 18, 26, 0.8);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: 20px; overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}
.bento-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5); }
.bento-card.no-hover:hover { transform: none; box-shadow: none; }

.card-cyan { border: 1px solid rgba(6, 182, 212, 0.2); }
.card-cyan:hover { border-color: rgba(6, 182, 212, 0.4); }
.card-purple { border: 1px solid rgba(168, 85, 247, 0.2); }
.card-purple:hover { border-color: rgba(168, 85, 247, 0.4); }
.card-amber { border: 1px solid rgba(251, 191, 36, 0.2); }
.card-amber:hover { border-color: rgba(251, 191, 36, 0.4); }
.card-green { border: 1px solid rgba(34, 197, 94, 0.2); }
.card-green:hover { border-color: rgba(34, 197, 94, 0.4); }
.card-emerald { border: 1px solid rgba(16, 185, 129, 0.2); }
.card-emerald:hover { border-color: rgba(16, 185, 129, 0.4); }
.card-pink { border: 1px solid rgba(236, 72, 153, 0.2); }
.card-pink:hover { border-color: rgba(236, 72, 153, 0.4); }
.card-gray { border: 1px solid rgba(107, 114, 128, 0.2); }
.card-gray:hover { border-color: rgba(107, 114, 128, 0.4); }
.card-red { border: 1px solid rgba(239, 68, 68, 0.2); }
.card-red:hover { border-color: rgba(239, 68, 68, 0.4); }
.card-orange { border: 1px solid rgba(249, 115, 22, 0.2); }
.card-orange:hover { border-color: rgba(249, 115, 22, 0.4); }
.card-indigo { border: 1px solid rgba(99, 102, 241, 0.2); }
.card-indigo:hover { border-color: rgba(99, 102, 241, 0.4); }
.card-blue { border: 1px solid rgba(59, 130, 246, 0.2); }
.card-blue:hover { border-color: rgba(59, 130, 246, 0.4); }

.card-glow {
    position: absolute; width: 150px; height: 150px;
    border-radius: 50%; filter: blur(60px); opacity: 0.15;
    pointer-events: none; transition: opacity 0.4s;
}
.bento-card:hover .card-glow { opacity: 0.25; }
.card-cyan .card-glow { background: rgba(6, 182, 212, 0.4); }
.card-purple .card-glow { background: rgba(168, 85, 247, 0.4); }
.card-amber .card-glow { background: rgba(251, 191, 36, 0.4); }
.card-green .card-glow { background: rgba(34, 197, 94, 0.4); }
.card-emerald .card-glow { background: rgba(16, 185, 129, 0.4); }
.card-pink .card-glow { background: rgba(236, 72, 153, 0.4); }
.card-gray .card-glow { background: rgba(107, 114, 128, 0.4); }
.card-red .card-glow { background: rgba(239, 68, 68, 0.4); }
.card-orange .card-glow { background: rgba(249, 115, 22, 0.4); }
.card-indigo .card-glow { background: rgba(99, 102, 241, 0.4); }
.card-blue .card-glow { background: rgba(59, 130, 246, 0.4); }

.card-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 10px; font-size: 10px;
    font-family: 'JetBrains Mono', monospace; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.badge-cyan { background: rgba(6, 182, 212, 0.15); border: 1px solid rgba(6, 182, 212, 0.3); color: #22d3ee; }
.badge-purple { background: rgba(168, 85, 247, 0.15); border: 1px solid rgba(168, 85, 247, 0.3); color: #c084fc; }
.badge-amber { background: rgba(251, 191, 36, 0.15); border: 1px solid rgba(251, 191, 36, 0.3); color: #fbbf24; }
.badge-green { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3); color: #4ade80; }
.badge-pink { background: rgba(236, 72, 153, 0.15); border: 1px solid rgba(236, 72, 153, 0.3); color: #f472b6; }
.badge-gray { background: rgba(107, 114, 128, 0.15); border: 1px solid rgba(107, 114, 128, 0.3); color: #9ca3af; }
.badge-red { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; }
.badge-orange { background: rgba(249, 115, 22, 0.15); border: 1px solid rgba(249, 115, 22, 0.3); color: #fb923c; }
.badge-indigo { background: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.3); color: #818cf8; }

/* === UPSELL SLOTS === */
.upsell-slot {
    background: rgba(255, 255, 255, 0.02);
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 16px; transition: all 0.3s ease;
}
.upsell-slot:hover { border-color: rgba(168, 85, 247, 0.4); background: rgba(168, 85, 247, 0.05); }
.upsell-slot.filled { border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); }

/* === FORM STYLES === */
.form-input {
    width: 100%; padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px; color: #fff; font-size: 14px;
    transition: all 0.2s;
}
.form-input:focus { outline: none; border-color: rgba(99, 102, 241, 0.5); background: rgba(99, 102, 241, 0.05); }
.form-input::placeholder { color: #6b7280; }

.form-label {
    display: block; font-size: 12px; font-weight: 500;
    color: #9ca3af; margin-bottom: 8px;
    text-transform: uppercase; letter-spacing: 0.5px;
}

.card {
    background: rgba(18, 18, 26, 0.8);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px; padding: 24px;
}

.variant-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px; font-size: 13px; color: #fff;
}
.variant-tag button { color: #6b7280; transition: color 0.2s; }
.variant-tag button:hover { color: #ef4444; }

.image-upload {
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 16px; transition: all 0.3s;
}
.image-upload:hover { border-color: rgba(99, 102, 241, 0.5); background: rgba(99, 102, 241, 0.05); }

/* === ANIMATIONS === */
.view-section { animation: fadeIn 0.3s ease; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#floatingSave { animation: slideUp 0.3s ease; }
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ====================================== */
/* MOBILE DOCK                            */
/* ====================================== */
@media (max-width: 768px) {
    /* Hide desktop dock */
    .dock-container {
        display: none !important;
    }
    
    /* Show mobile dock */
    .mobile-dock {
        display: flex !important;
    }
    
    /* Adjust main padding for mobile */
    main {
        padding-bottom: 100px !important;
        padding-top: 80px !important;
    }
    
    /* Mobile header */
    .island-header {
        padding: 6px 8px !important;
        height: 52px !important;
    }
    
    /* Hide logo text */
    .island-header .font-sans.font-bold {
        display: none !important;
    }
    
    /* Smaller logo */
    .island-header img {
        width: 28px !important;
        height: 28px !important;
    }
    
    /* Logo section - smaller */
    .island-header > div:first-child {
        padding: 0 8px !important;
        gap: 0 !important;
    }
    
    /* Store selector - compact */
    .store-pill {
        padding: 4px 8px 4px 4px !important;
        gap: 6px !important;
    }
    
    .store-pill > div:first-child {
        width: 28px !important;
        height: 28px !important;
    }
    
    .store-pill > div:first-child i {
        font-size: 10px !important;
    }
    
    /* Hide store name details on very small screens */
    .store-pill .text-left {
        display: none !important;
    }
    
    /* Hide eye icon */
    .store-pill > a {
        display: none !important;
    }
    
    /* Hide tokens badge */
    .token-badge {
        display: none !important;
    }
    
    /* Smaller notification button */
    .island-header button.w-9 {
        width: 32px !important;
        height: 32px !important;
    }
    
    /* User avatar - smaller */
    .island-header .w-8.h-8.rounded-full {
        width: 28px !important;
        height: 28px !important;
    }
    
    /* Hide username */
    .island-header span.text-xs.font-medium {
        display: none !important;
    }
    
    /* Adjust right side gap */
    .island-header > div:last-child {
        gap: 4px !important;
    }
    
    /* Store dropdown - full width on mobile */
    .island-header .dropdown-animate {
        position: fixed !important;
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
        top: 70px !important;
    }
}

@media (max-width: 380px) {
    /* Extra small screens */
    .store-pill {
        padding: 4px !important;
    }
    
    .store-pill .fa-chevron-down {
        display: none !important;
    }
}

@media (min-width: 480px) and (max-width: 768px) {
    /* Show store name on medium mobile */
    .store-pill .text-left {
        display: flex !important;
    }
    
    .store-pill .text-left span:first-child {
        font-size: 11px !important;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (min-width: 769px) {
    .mobile-dock {
        display: none !important;
    }
}

/* Mobile dock base */
.mobile-dock {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(14, 14, 18, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 8px 12px 20px 12px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}

.mobile-dock-bar {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    max-width: 400px;
    margin: 0 auto;
}

.mobile-dock-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 12px;
    color: #6b7280;
    transition: all 0.2s ease;
    text-decoration: none;
}

.mobile-dock-btn.active {
    color: #818cf8;
}

.mobile-dock-btn:active {
    transform: scale(0.92);
}

.mobile-dock-btn i {
    font-size: 20px;
}

.mobile-dock-btn span {
    font-size: 10px;
    font-weight: 500;
}

/* Mobile Voice AI button */
.mobile-agent-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.4);
    margin: -16px 8px 0 8px;
    position: relative;
    flex-shrink: 0;
}

.mobile-agent-btn img {
    width: 24px;
    height: 24px;
}

.mobile-agent-btn:active {
    transform: scale(0.95);
}

/* More menu overlay */
.mobile-more-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-more-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-more-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.mobile-more-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(18, 18, 24, 0.98);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 12px 16px 24px 16px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-more-overlay.active .mobile-more-panel {
    transform: translateY(0);
}

.mobile-more-handle {
    width: 36px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 0 auto 16px auto;
}

.mobile-more-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.mobile-more-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #9ca3af;
    transition: all 0.2s ease;
    text-decoration: none;
}

.mobile-more-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.06);
}

.mobile-more-btn.active {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    color: #818cf8;
}

.mobile-more-btn i {
    font-size: 22px;
}

.mobile-more-btn span {
    font-size: 11px;
    font-weight: 500;
    text-align: center;
}

/* ============================================
   VISUAL EFFECTS
   ============================================ */

/* Shimmer Effect for CTA buttons */
.shimmer-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

/* Typing indicator */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
}

.typing-indicator span {
    width: 6px;
    height: 6px;
    background: #818cf8;
    border-radius: 50%;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
.typing-indicator span:nth-child(3) { animation-delay: 0s; }

@keyframes typing-bounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Ripple effect */
[data-ripple] {
    position: relative;
    overflow: hidden;
}

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%) scale(0);
    animation: ripple-expand 0.6s ease-out forwards;
    pointer-events: none;
}

@keyframes ripple-expand {
    to {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
    }
}

/* Gradient border animation */
.gradient-border-animated {
    position: relative;
}

.gradient-border-animated::before {
    content: '';
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(
        var(--gradient-angle, 0deg),
        #ec4899,
        #8b5cf6,
        #3b82f6,
        #10b981,
        #ec4899
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: gradient-rotate 4s linear infinite;
}

@keyframes gradient-rotate {
    0% { --gradient-angle: 0deg; }
    100% { --gradient-angle: 360deg; }
}

@property --gradient-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Pulse glow effect */
.pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(99, 102, 241, 0.5);
    }
}

/* Skeleton loading animation */
@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.7;
    }
}

.skeleton-card,
.skeleton-row,
.skeleton-text {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* Fade in animation */
.fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide up animation */
.slide-up {
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale in animation */
.scale-in {
    animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Hover lift effect class */
.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.3);
}

/* Number highlight animation */
.number-highlight {
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
}

.number-highlight.updated {
    animation: number-pop 0.4s ease;
    color: #10b981;
}

@keyframes number-pop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Progress bar animation */
.progress-animated {
    position: relative;
    overflow: hidden;
}

.progress-animated::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    animation: progress-shine 2s infinite;
}

@keyframes progress-shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Card hover glow */
.card-glow {
    transition: all 0.3s ease;
}

.card-glow:hover {
    box-shadow: 
        0 0 0 1px rgba(99, 102, 241, 0.3),
        0 10px 40px -10px rgba(99, 102, 241, 0.2);
}

/* Success checkmark animation */
.success-check {
    animation: check-appear 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes check-appear {
    0% {
        transform: scale(0) rotate(-45deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(0deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Floating animation */
.float {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Glow text */
.glow-text {
    text-shadow: 0 0 20px currentColor;
}

/* Smooth color transition for stats */
.stat-value {
    transition: color 0.5s ease;
}

.stat-value.positive {
    color: #10b981;
}

.stat-value.negative {
    color: #ef4444;
}

/* Stagger children animation helper */
[data-stagger] > * {
    opacity: 0;
    transform: translateY(10px);
}

/* Button press effect */
.btn-press {
    transition: transform 0.1s ease;
}

.btn-press:active {
    transform: scale(0.97);
}

/* ============================================
   MODAL ANIMATIONS
   ============================================ */

/* Modal backdrop */
.modal-backdrop {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-backdrop.active {
    opacity: 1;
}

/* Modal content */
.modal-content {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-backdrop.active .modal-content {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Success state animation */
.success-state {
    animation: success-bounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes success-bounce {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

/* Loading spinner */
.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Gradient animation for backgrounds */
.gradient-animated {
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Pulse dot for live indicators */
.pulse-dot {
    position: relative;
}

.pulse-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* Smooth tab transition */
.tab-content {
    animation: tab-fade-in 0.3s ease;
}

@keyframes tab-fade-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Icon bounce on hover */
.icon-bounce:hover i {
    animation: icon-bounce 0.4s ease;
}

@keyframes icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Subtle breathe animation for important elements */
.breathe {
    animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Count up number animation helper */
.count-up {
    font-variant-numeric: tabular-nums;
}

/* ============================================
   LIGHT THEME OVERRIDES - MAIN.CSS
   ============================================ */

/* Body grid pattern */
[data-theme="light"] body {
    background-color: #f8fafc;
    color: #18181b;
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.05) 0%, transparent 50%),
        linear-gradient(to right, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
}

/* Island Header */
[data-theme="light"] .island-header {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(99, 102, 241, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .island-header::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0));
}

/* Store Pill */
[data-theme="light"] .store-pill {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .store-pill:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .store-pill .text-white,
[data-theme="light"] .store-pill span.text-white {
    color: #1e293b !important;
}

/* Token Badge */
[data-theme="light"] .token-badge {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.08));
    border-color: rgba(139, 92, 246, 0.25);
    color: #7c3aed;
}

[data-theme="light"] .token-badge span {
    color: #5b21b6;
}

/* Dock Bar */
[data-theme="light"] .dock-bar {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .dock-bar::before {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.03), transparent);
}

[data-theme="light"] .dock-btn {
    color: #64748b;
}

[data-theme="light"] .dock-btn:hover {
    color: #1e293b;
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .dock-btn.active {
    color: #1e293b;
}

[data-theme="light"] .dock-sep {
    background: rgba(0, 0, 0, 0.08);
}

/* Agent AI Button */
[data-theme="light"] .agent-ai-btn {
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.25);
}

[data-theme="light"] .agent-ai-btn:hover {
    box-shadow: 0 6px 28px rgba(99, 102, 241, 0.35);
}

[data-theme="light"] .agent-ai-label {
    color: #6366f1 !important;
}

/* Mobile Dock */
[data-theme="light"] .mobile-dock-bar {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .mobile-dock-btn {
    color: #64748b;
}

[data-theme="light"] .mobile-dock-btn.active {
    color: #6366f1;
}

[data-theme="light"] .mobile-more-panel {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .mobile-more-btn {
    color: #1e293b;
}

[data-theme="light"] .mobile-more-btn i {
    color: #64748b;
}

/* Dropdown */
[data-theme="light"] .dropdown-animate {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .store-item {
    color: #1e293b;
}

[data-theme="light"] .store-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .store-item p {
    color: #1e293b;
}

[data-theme="light"] .active-store-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.05));
    border-color: rgba(99, 102, 241, 0.2);
}

[data-theme="light"] .active-store-card p.text-white {
    color: #1e293b !important;
}

[data-theme="light"] .add-store-btn {
    background: rgba(99, 102, 241, 0.08);
}

[data-theme="light"] .add-store-btn:hover {
    background: rgba(99, 102, 241, 0.15);
}

[data-theme="light"] .add-store-btn span {
    color: #4f46e5 !important;
}

[data-theme="light"] .add-store-btn i {
    color: #4f46e5 !important;
}

/* Plan Badge */
[data-theme="light"] .plan-badge {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

/* User Menu Dropdown */
[data-theme="light"] .user-menu-item {
    color: #1e293b;
}

[data-theme="light"] .user-menu-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* Bento Card */
[data-theme="light"] .bento-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .bento-card:hover {
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Widget (Kokpit) */
[data-theme="light"] .widget {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .widget:hover {
    border-color: rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .widget.editing {
    border-color: rgba(99, 102, 241, 0.4) !important;
    background: rgba(99, 102, 241, 0.02) !important;
}

/* Quick Action */
[data-theme="light"] .quick-action {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .quick-action:hover {
    background: rgba(99, 102, 241, 0.05) !important;
    border-color: rgba(99, 102, 241, 0.2) !important;
}

/* Available Widget */
[data-theme="light"] .available-widget {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .available-widget:hover:not(.added) {
    background: rgba(99, 102, 241, 0.05) !important;
    border-color: rgba(99, 102, 241, 0.2) !important;
}

/* Sidebar Nav */
[data-theme="light"] .sidebar-nav-item {
    color: #64748b;
}

[data-theme="light"] .sidebar-nav-item:hover {
    background: rgba(0, 0, 0, 0.03);
    color: #1e293b;
}

[data-theme="light"] .sidebar-nav-item.active {
    background: rgba(99, 102, 241, 0.08);
    color: #6366f1;
}

/* Status Badges */
[data-theme="light"] .status-badge {
    background: rgba(0, 0, 0, 0.05);
    color: #64748b;
}

[data-theme="light"] .status-badge.online {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

/* ============================================
   TEXT COLOR OVERRIDES (IMPORTANT)
   ============================================ */

/* Main text - must be dark */
[data-theme="light"] .text-white {
    color: #18181b !important;
}

[data-theme="light"] .text-gray-100 {
    color: #18181b !important;
}

[data-theme="light"] .text-gray-200 {
    color: #27272a !important;
}

[data-theme="light"] .text-gray-300 {
    color: #3f3f46 !important;
}

/* CRITICAL: These must be readable! */
[data-theme="light"] .text-gray-400 {
    color: #3f3f46 !important;
}

[data-theme="light"] .text-gray-500 {
    color: #52525b !important;
}

[data-theme="light"] .text-gray-600 {
    color: #71717a !important;
}

/* Inline style overrides for gray text */
[data-theme="light"] [style*="color: rgb(161, 161, 170)"],
[data-theme="light"] [style*="color: #a1a1aa"],
[data-theme="light"] [style*="color: rgb(113, 113, 122)"],
[data-theme="light"] [style*="color: #71717a"] {
    color: #52525b !important;
}

[data-theme="light"] [style*="color: rgb(82, 82, 91)"],
[data-theme="light"] [style*="color: #52525b"] {
    color: #3f3f46 !important;
}

/* All small text sizes must be readable */
[data-theme="light"] .text-\[10px\],
[data-theme="light"] .text-\[11px\],
[data-theme="light"] .text-\[9px\],
[data-theme="light"] .text-xs {
    color: #52525b;
}

/* Fix text-xs and text-sm with gray colors */
[data-theme="light"] .text-xs.text-gray-400,
[data-theme="light"] .text-xs.text-gray-500,
[data-theme="light"] .text-xs.text-gray-600,
[data-theme="light"] .text-sm.text-gray-400,
[data-theme="light"] .text-sm.text-gray-500,
[data-theme="light"] .text-sm.text-gray-600 {
    color: #52525b !important;
}

/* Keep gradient text readable */
[data-theme="light"] .bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
}

/* ============================================
   BACKGROUND OVERRIDES (IMPORTANT)
   ============================================ */

/* Catch-all for inline rgba white backgrounds */
[data-theme="light"] [style*="background: rgba(255, 255, 255"],
[data-theme="light"] [style*="background-color: rgba(255, 255, 255"],
[data-theme="light"] [style*="background:rgba(255, 255, 255"],
[data-theme="light"] [style*="background-color:rgba(255, 255, 255"] {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .bg-white\/3,
[data-theme="light"] [style*="rgba(255, 255, 255, 0.02)"],
[data-theme="light"] [style*="rgba(255, 255, 255, 0.03)"] {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

[data-theme="light"] .bg-white\/5,
[data-theme="light"] [style*="rgba(255, 255, 255, 0.05)"] {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .bg-white\/8,
[data-theme="light"] .bg-white\/10,
[data-theme="light"] [style*="rgba(255, 255, 255, 0.08)"],
[data-theme="light"] [style*="rgba(255, 255, 255, 0.1)"] {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .bg-white\/15,
[data-theme="light"] .bg-white\/20 {
    background-color: rgba(0, 0, 0, 0.08) !important;
}

/* Dark background classes */
[data-theme="light"] .bg-\[\#08080A\],
[data-theme="light"] .bg-\[\#0d0d12\],
[data-theme="light"] .bg-\[\#12121a\],
[data-theme="light"] .bg-\[\#121216\],
[data-theme="light"] .bg-\[\#15151a\],
[data-theme="light"] .bg-\[\#1a1a20\],
[data-theme="light"] .bg-\[\#1a1a24\],
[data-theme="light"] .bg-\[\#18181b\],
[data-theme="light"] .bg-black {
    background-color: #ffffff !important;
}

[data-theme="light"] .bg-black\/50,
[data-theme="light"] .bg-black\/70 {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

/* ============================================
   BORDER OVERRIDES (IMPORTANT)
   ============================================ */

/* Catch-all for inline rgba white borders */
[data-theme="light"] [style*="border"][style*="rgba(255, 255, 255"] {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .border-white\/5,
[data-theme="light"] [style*="border"] [style*="rgba(255, 255, 255, 0.05)"],
[data-theme="light"] [style*="border"] [style*="rgba(255, 255, 255, 0.06)"] {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .border-white\/8,
[data-theme="light"] .border-white\/10,
[data-theme="light"] [style*="border"][style*="rgba(255, 255, 255, 0.08)"],
[data-theme="light"] [style*="border"][style*="rgba(255, 255, 255, 0.1)"] {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .border-white\/15,
[data-theme="light"] .border-white\/20 {
    border-color: rgba(0, 0, 0, 0.15) !important;
}

/* ============================================
   SPECIFIC COMPONENT FIXES
   ============================================ */

/* Goal cards (A/B testing, etc) */
[data-theme="light"] .goal-card {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .goal-card:hover {
    background: rgba(99, 102, 241, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .goal-card.selected {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="light"] .goal-icon {
    background: rgba(0, 0, 0, 0.05);
}

/* Target cards */
[data-theme="light"] .target-card {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .target-card.selected {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

/* Element options */
[data-theme="light"] .element-option {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .element-option.selected {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

/* Variant cards */
[data-theme="light"] .variant-card {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .variant-card.selected,
[data-theme="light"] .variant-card.winner {
    background: rgba(16, 185, 129, 0.05) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

/* Platform buttons */
[data-theme="light"] .platform-btn {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .platform-btn:hover {
    background: rgba(0, 0, 0, 0.02) !important;
}

/* Type cards */
[data-theme="light"] .type-card {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .type-card:hover {
    background: rgba(0, 0, 0, 0.02) !important;
}

[data-theme="light"] .type-card.selected {
    background: rgba(236, 72, 153, 0.08) !important;
    border-color: rgba(236, 72, 153, 0.3) !important;
}

/* Category chips */
[data-theme="light"] .category-chip {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .category-chip.selected {
    background: rgba(168, 85, 247, 0.1) !important;
    border-color: rgba(168, 85, 247, 0.3) !important;
}

/* Length options */
[data-theme="light"] .length-option {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .length-option.selected {
    background: rgba(168, 85, 247, 0.08) !important;
    border-color: rgba(168, 85, 247, 0.3) !important;
}

/* Keyword tags */
[data-theme="light"] .keyword-tag {
    background: rgba(168, 85, 247, 0.08) !important;
    border-color: rgba(168, 85, 247, 0.2) !important;
}

/* Outline items */
[data-theme="light"] .outline-item {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .outline-item.completed {
    background: rgba(16, 185, 129, 0.05) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
}

/* AI confidence box */
[data-theme="light"] .ai-confidence {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(5, 150, 105, 0.05)) !important;
    border-color: rgba(16, 185, 129, 0.15) !important;
}

/* Time slots */
[data-theme="light"] .time-slot {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .time-slot.recommended {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
}

/* Hashtag chips */
[data-theme="light"] .hashtag-chip {
    background: rgba(236, 72, 153, 0.08) !important;
    border-color: rgba(236, 72, 153, 0.2) !important;
}

/* Variant post */
[data-theme="light"] .variant-post {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .variant-post.selected {
    background: rgba(236, 72, 153, 0.05) !important;
    border-color: rgba(236, 72, 153, 0.3) !important;
}

/* Phone frame */
[data-theme="light"] .phone-frame {
    background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%) !important;
    border-color: #94a3b8 !important;
}

[data-theme="light"] .phone-screen {
    background: #ffffff !important;
}

/* Tone buttons */
[data-theme="light"] .tone-btn {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #64748b !important;
}

[data-theme="light"] .tone-btn.active {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #3b82f6 !important;
}

/* AI steps */
[data-theme="light"] .ai-step .step-icon {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .ai-step.active .step-icon {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
}

[data-theme="light"] .ai-step.completed .step-icon {
    background: #10b981;
}

/* Insight cards */
[data-theme="light"] .insight-card {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Progress bars */
[data-theme="light"] .ai-progress,
[data-theme="light"] .test-progress,
[data-theme="light"] .seo-meter,
[data-theme="light"] .prediction-bar {
    background: rgba(0, 0, 0, 0.06) !important;
}

/* Email preview */
[data-theme="light"] .email-preview {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Article preview */
[data-theme="light"] .article-preview {
    background: #ffffff;
}

/* ============================================
   HOVER EFFECTS
   ============================================ */

[data-theme="light"] .hover-lift:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .card-glow:hover {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.1);
}

/* ============================================
   FORM INPUTS
   ============================================ */

[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #18181b !important;
}

[data-theme="light"] input:hover,
[data-theme="light"] textarea:hover,
[data-theme="light"] select:hover {
    border-color: rgba(0, 0, 0, 0.25) !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: #a1a1aa !important;
}

/* Checkboxes */
[data-theme="light"] input[type="checkbox"] {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

/* ============================================
   MISC OVERRIDES
   ============================================ */

/* Selection */
[data-theme="light"] ::selection {
    background: rgba(99, 102, 241, 0.2);
    color: #18181b;
}

/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* Toast */
[data-theme="light"] #toast {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Modal Backdrop */
[data-theme="light"] .modal-backdrop,
[data-theme="light"] #scheduleModal,
[data-theme="light"] [class*="bg-black\\/"] {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

/* Modal content */
[data-theme="light"] .modal-content,
[data-theme="light"] #scheduleModal > div {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Promo gradient (kokpit) */
[data-theme="light"] .promo-gradient {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(168, 85, 247, 0.08) 100%) !important;
    border-color: rgba(99, 102, 241, 0.2) !important;
}

/* Mini chart */
[data-theme="light"] .mini-chart .bar {
    background: linear-gradient(to top, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.4)) !important;
}

[data-theme="light"] .mini-chart .bar:hover {
    background: linear-gradient(to top, rgba(99, 102, 241, 0.3), rgba(99, 102, 241, 0.5)) !important;
}

/* Separators */
[data-theme="light"] .h-px.bg-white\/10,
[data-theme="light"] .w-px.bg-white\/10,
[data-theme="light"] div[class*="border-t"][class*="border-white"] {
    background-color: rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Live dot */
[data-theme="light"] .live-dot {
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

/* Accent colors remain vibrant */
[data-theme="light"] .text-indigo-400 { color: #6366f1 !important; }
[data-theme="light"] .text-indigo-300 { color: #818cf8 !important; }
[data-theme="light"] .text-emerald-400 { color: #10b981 !important; }
[data-theme="light"] .text-cyan-400 { color: #06b6d4 !important; }
[data-theme="light"] .text-pink-400 { color: #ec4899 !important; }
[data-theme="light"] .text-purple-400 { color: #a855f7 !important; }
[data-theme="light"] .text-amber-400 { color: #f59e0b !important; }
[data-theme="light"] .text-rose-400 { color: #f43f5e !important; }
[data-theme="light"] .text-blue-400 { color: #3b82f6 !important; }
[data-theme="light"] .text-red-400 { color: #ef4444 !important; }
[data-theme="light"] .text-green-400 { color: #22c55e !important; }

/* Gradient buttons stay the same */
[data-theme="light"] .bg-gradient-to-r,
[data-theme="light"] .bg-gradient-to-br {
    /* Gradients remain unchanged */
}

/* Fix for notification badge border */
[data-theme="light"] .border-\[\#151519\] {
    border-color: #ffffff !important;
}

/* ============================================
   ADDITIONAL LIGHT THEME FIXES
   ============================================ */

/* Select dropdowns */
[data-theme="light"] select {
    background-color: #ffffff !important;
    color: #18181b !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] select option {
    background-color: #ffffff;
    color: #18181b;
}

/* Persona cards (Influencer) */
[data-theme="light"] .persona-card {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Workflow cards */
[data-theme="light"] .workflow-card {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Alert cards */
[data-theme="light"] .alert-item {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Stats labels - make them darker */
[data-theme="light"] .stat-label,
[data-theme="light"] .widget-label {
    color: #52525b !important;
}

/* Muted/secondary text should be readable */
[data-theme="light"] [class*="text-xs"][class*="text-gray"],
[data-theme="light"] [class*="text-sm"][class*="text-gray"],
[data-theme="light"] .text-\[11px\],
[data-theme="light"] .text-\[10px\],
[data-theme="light"] .text-\[9px\] {
    color: #52525b !important;
}

/* Template/category labels */
[data-theme="light"] .template-label,
[data-theme="light"] .category-label {
    color: #52525b !important;
}

/* Fix inline rgba text colors */
[data-theme="light"] [style*="rgba(255, 255, 255, 0.5)"],
[data-theme="light"] [style*="rgba(255, 255, 255, 0.6)"],
[data-theme="light"] [style*="rgba(255, 255, 255, 0.7)"],
[data-theme="light"] [style*="rgba(255, 255, 255, 0.8)"] {
    color: #52525b !important;
}

/* Tab buttons */
[data-theme="light"] .tab-btn {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #52525b !important;
}

[data-theme="light"] .tab-btn:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    color: #18181b !important;
}

[data-theme="light"] .tab-btn.active {
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #4f46e5 !important;
}

/* Info/helper text */
[data-theme="light"] .helper-text,
[data-theme="light"] .info-text {
    color: #71717a !important;
}

/* Preview boxes that should STAY dark */
[data-theme="light"] .checkout-preview,
[data-theme="light"] .cart-preview,
[data-theme="light"] .dark-preview,
[data-theme="light"] .preserve-dark,
[data-theme="light"] .bg-\[\#0f0f14\],
[data-theme="light"] .bg-\[\#0d0d12\] {
    background: #1a1a24 !important;
}

/* Text inside dark previews should stay light */
[data-theme="light"] .bg-\[\#0f0f14\] .text-gray-500,
[data-theme="light"] .bg-\[\#0d0d12\] .text-gray-500,
[data-theme="light"] .bg-\[\#0f0f14\] .text-gray-400,
[data-theme="light"] .bg-\[\#0d0d12\] .text-gray-400 {
    color: #a1a1aa !important;
}

[data-theme="light"] .bg-\[\#0f0f14\] .text-white,
[data-theme="light"] .bg-\[\#0d0d12\] .text-white,
[data-theme="light"] .bg-\[\#0f0f14\] span,
[data-theme="light"] .bg-\[\#0d0d12\] span {
    color: #ffffff !important;
}

[data-theme="light"] .bg-\[\#0f0f14\] .bg-white\/5,
[data-theme="light"] .bg-\[\#0d0d12\] .bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="light"] .bg-\[\#0f0f14\] .bg-white\/10,
[data-theme="light"] .bg-\[\#0d0d12\] .bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="light"] .bg-\[\#0f0f14\] .border-white\/5,
[data-theme="light"] .bg-\[\#0d0d12\] .border-white\/5,
[data-theme="light"] .bg-\[\#0f0f14\] .border-white\/10,
[data-theme="light"] .bg-\[\#0d0d12\] .border-white\/10 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dark preview labels inside should be light */
[data-theme="light"] .bg-\[\#0f0f14\] div,
[data-theme="light"] .bg-\[\#0d0d12\] div {
    color: #a1a1aa;
}

/* But the label OUTSIDE preview should be dark */
[data-theme="light"] h3:has(+ .bg-\[\#0f0f14\]),
[data-theme="light"] h3:has(+ .bg-\[\#0d0d12\]) {
    color: #18181b !important;
}

/* BUT labels outside preview should be dark */
[data-theme="light"] .preview-label {
    color: #18181b !important;
}

/* Product cards in orders */
[data-theme="light"] .product-item {
    background: #ffffff !important;
}

[data-theme="light"] .product-item .variant-text,
[data-theme="light"] .product-item .sku-text {
    color: #71717a !important;
}

/* Client card */
[data-theme="light"] .client-card {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .client-info {
    color: #52525b !important;
}

/* Badge pills - keep colors but adjust for readability */
[data-theme="light"] .badge-pill {
    border-color: currentColor !important;
}

/* Footer stats in cards */
[data-theme="light"] .card-footer-stats {
    color: #71717a !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Dividers */
[data-theme="light"] .divider,
[data-theme="light"] hr {
    border-color: rgba(0, 0, 0, 0.08) !important;
    background-color: rgba(0, 0, 0, 0.08) !important;
}

/* Icon containers with bg */
[data-theme="light"] .icon-container {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* Arrows and chevrons */
[data-theme="light"] .fa-chevron-right,
[data-theme="light"] .fa-arrow-right,
[data-theme="light"] .fa-chevron-down {
    color: #71717a !important;
}

/* Date picker */
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="time"] {
    background: #ffffff !important;
    color: #18181b !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

/* Number inputs */
[data-theme="light"] input[type="number"] {
    background: #ffffff !important;
    color: #18181b !important;
}

/* Range slider track */
[data-theme="light"] input[type="range"] {
    background: rgba(0, 0, 0, 0.1) !important;
}

/* Fix all text-white/80, text-white/60 etc */
[data-theme="light"] .text-white\/80,
[data-theme="light"] .text-white\/70,
[data-theme="light"] .text-white\/60,
[data-theme="light"] .text-white\/50 {
    color: #52525b !important;
}

/* Fix spans with inline opacity */
[data-theme="light"] span[style*="opacity: 0.5"],
[data-theme="light"] span[style*="opacity: 0.6"],
[data-theme="light"] span[style*="opacity: 0.7"] {
    opacity: 1 !important;
    color: #71717a !important;
}

/* Template cards bottom section */
[data-theme="light"] .template-footer {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Execution count text */
[data-theme="light"] .execution-count {
    color: #71717a !important;
}

/* Progress text */
[data-theme="light"] .progress-text {
    color: #52525b !important;
}

/* Ensure all icon-only buttons are visible */
[data-theme="light"] button i,
[data-theme="light"] a i {
    color: inherit;
}

/* Fix breadcrumb */
[data-theme="light"] .breadcrumb a {
    color: #71717a !important;
}

[data-theme="light"] .breadcrumb a:hover {
    color: #18181b !important;
}

/* Workflow/automation rule chips */
[data-theme="light"] .rule-chip {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #52525b !important;
}

/* Status indicators */
[data-theme="light"] .status-dot {
    box-shadow: 0 0 6px currentColor;
}

/* Empty state text */
[data-theme="light"] .empty-state p {
    color: #71717a !important;
}

/* Tooltip */
[data-theme="light"] .tooltip {
    background: #18181b !important;
    color: #ffffff !important;
}

/* Code/mono text blocks */
[data-theme="light"] code,
[data-theme="light"] .font-mono {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #18181b !important;
}

/* Filter buttons */
[data-theme="light"] .filter-btn {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #52525b !important;
}

[data-theme="light"] .filter-btn.active {
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #4f46e5 !important;
}

/* Action buttons in cards */
[data-theme="light"] .card-action-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #52525b !important;
}

[data-theme="light"] .card-action-btn:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #18181b !important;
}

/* Tables */
[data-theme="light"] table {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] th {
    background: rgba(0, 0, 0, 0.02) !important;
    color: #52525b !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] td {
    border-color: rgba(0, 0, 0, 0.06) !important;
    color: #18181b !important;
}

[data-theme="light"] tr:hover td {
    background: rgba(0, 0, 0, 0.02) !important;
}

/* ============================================
   SPECIFIC SCREEN FIXES
   ============================================ */

/* Influencer AI - category subtitles */
[data-theme="light"] .template-card .text-gray-500,
[data-theme="light"] .template-card .text-gray-400,
[data-theme="light"] .category-subtitle {
    color: #71717a !important;
}

/* Workflow Builder - execution counts */
[data-theme="light"] .workflow-stats,
[data-theme="light"] .execution-stats {
    color: #52525b !important;
}

/* Aktywne alerty - descriptions */
[data-theme="light"] .alert-card p.text-gray-500,
[data-theme="light"] .alert-card p.text-gray-400,
[data-theme="light"] .alert-description {
    color: #52525b !important;
}

/* Stats widget - labels */
[data-theme="light"] .stat-widget .text-gray-500,
[data-theme="light"] .stat-box .text-gray-500,
[data-theme="light"] .stats-label {
    color: #52525b !important;
}

/* Select dropdowns - ensure dark text */
[data-theme="light"] select,
[data-theme="light"] select option {
    background-color: #ffffff !important;
    color: #18181b !important;
}

/* Produkty - orange CTA bar text */
[data-theme="light"] .bg-amber-500\/10 .text-amber-500,
[data-theme="light"] .bg-amber-500\/10 .text-amber-600,
[data-theme="light"] .bg-orange-500\/10 .text-orange-500,
[data-theme="light"] [class*="bg-amber"] p,
[data-theme="light"] [class*="bg-orange"] p {
    color: #92400e !important;
}

/* Zamówienia - product variants and SKUs */
[data-theme="light"] .product-variant,
[data-theme="light"] .product-sku,
[data-theme="light"] .order-product .text-gray-500,
[data-theme="light"] .order-product .text-gray-600 {
    color: #71717a !important;
}

/* Zamówienia - summary totals */
[data-theme="light"] .order-summary .text-gray-500,
[data-theme="light"] .order-summary .text-gray-400,
[data-theme="light"] .summary-label {
    color: #52525b !important;
}

/* Klient card info */
[data-theme="light"] .customer-card .text-gray-500,
[data-theme="light"] .customer-info {
    color: #52525b !important;
}

/* Fix ALL paragraphs and spans with gray classes */
[data-theme="light"] p[class*="text-gray-4"],
[data-theme="light"] p[class*="text-gray-5"],
[data-theme="light"] span[class*="text-gray-4"],
[data-theme="light"] span[class*="text-gray-5"],
[data-theme="light"] div[class*="text-gray-4"],
[data-theme="light"] div[class*="text-gray-5"] {
    color: #52525b !important;
}

/* Fix tiny text */
[data-theme="light"] .text-\[10px\],
[data-theme="light"] .text-\[11px\],
[data-theme="light"] .text-\[9px\] {
    color: #52525b !important;
}

/* Arrows and separators in workflows */
[data-theme="light"] .workflow-arrow,
[data-theme="light"] .rule-arrow {
    color: #71717a !important;
}

/* Footer meta in cards */
[data-theme="light"] .card-meta,
[data-theme="light"] .card-footer-meta {
    color: #71717a !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Fix border-t dividers */
[data-theme="light"] .border-t {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Pricing and amounts in order summary should be darker */
[data-theme="light"] .price-amount,
[data-theme="light"] .order-total {
    color: #18181b !important;
}

/* Secondary prices (subtotal, shipping) */
[data-theme="light"] .price-secondary,
[data-theme="light"] .subtotal-amount {
    color: #52525b !important;
}

/* Notification bell badge */
[data-theme="light"] .notification-badge {
    border-color: #ffffff !important;
}

/* ============================================
   SPECIFIC ELEMENT FIXES FOR LIGHT MODE
   ============================================ */

/* Stats labels - MUST be readable */
[data-theme="light"] .stat-label,
[data-theme="light"] .widget h3 + div .text-gray-500,
[data-theme="light"] .bento-card .text-gray-500,
[data-theme="light"] .bento-card .text-gray-400,
[data-theme="light"] p.text-gray-500,
[data-theme="light"] p.text-gray-400,
[data-theme="light"] span.text-gray-500,
[data-theme="light"] span.text-gray-400,
[data-theme="light"] div.text-gray-500,
[data-theme="light"] div.text-gray-400 {
    color: #52525b !important;
}

/* Card footer stats */
[data-theme="light"] .card-footer,
[data-theme="light"] [class*="border-t"][class*="pt-"],
[data-theme="light"] [class*="mt-"][class*="pt-"][class*="border-t"] {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .card-footer span,
[data-theme="light"] .card-footer p,
[data-theme="light"] .card-footer div {
    color: #52525b !important;
}

/* Execution counts, usage stats */
[data-theme="light"] [class*="Wykonano"],
[data-theme="light"] [class*="Użyta"],
[data-theme="light"] [class*="wysłanych"],
[data-theme="light"] [class*="open rate"] {
    color: #52525b !important;
}

/* Arrows between elements */
[data-theme="light"] .text-gray-600 {
    color: #71717a !important;
}

/* Small descriptive text under headings */
[data-theme="light"] h1 + p,
[data-theme="light"] h2 + p,
[data-theme="light"] h3 + p,
[data-theme="light"] .font-bold + p,
[data-theme="light"] .font-semibold + p {
    color: #52525b !important;
}

/* Template/category subtitles */
[data-theme="light"] .text-center .text-gray-500,
[data-theme="light"] .text-center .text-gray-400 {
    color: #71717a !important;
}

/* Alert descriptions */
[data-theme="light"] .alert-item p,
[data-theme="light"] .alert-description {
    color: #52525b !important;
}

/* Product details - Variant, SKU */
[data-theme="light"] .text-sm.text-gray-500,
[data-theme="light"] .text-xs.text-gray-600,
[data-theme="light"] [class*="SKU"],
[data-theme="light"] [class*="Wariant"] {
    color: #71717a !important;
}

/* Summary rows */
[data-theme="light"] .summary-row,
[data-theme="light"] [class*="Suma"],
[data-theme="light"] [class*="Dostawa"],
[data-theme="light"] [class*="Do zapłaty"] {
    color: #3f3f46 !important;
}

/* Icons in text */
[data-theme="light"] i.text-gray-400,
[data-theme="light"] i.text-gray-500,
[data-theme="light"] i.text-gray-600 {
    color: #71717a !important;
}

/* Calendar icon */
[data-theme="light"] .fa-calendar,
[data-theme="light"] .fa-calendar-alt,
[data-theme="light"] .fa-calendar-days {
    color: #71717a !important;
}

/* Breadcrumb */
[data-theme="light"] nav a.text-gray-400,
[data-theme="light"] nav a.text-gray-500 {
    color: #71717a !important;
}

[data-theme="light"] nav a.text-gray-400:hover,
[data-theme="light"] nav a.text-gray-500:hover {
    color: #18181b !important;
}

/* Warning/CTA cards with colored backgrounds - keep text readable */
[data-theme="light"] .bg-amber-500\/10 p,
[data-theme="light"] .bg-orange-500\/10 p,
[data-theme="light"] [style*="background"][style*="amber"] p,
[data-theme="light"] [style*="background"][style*="orange"] p {
    color: #92400e !important;
}

/* Persona/influencer card footers */
[data-theme="light"] .persona-card .text-gray-500,
[data-theme="light"] .persona-footer {
    color: #52525b !important;
}

/* Workflow rule descriptions */
[data-theme="light"] .workflow-card .text-gray-500,
[data-theme="light"] .workflow-card .text-gray-400 {
    color: #52525b !important;
}

/* Client info */
[data-theme="light"] .client-card .text-gray-500,
[data-theme="light"] .client-info {
    color: #52525b !important;
}

/* Time ago text */
[data-theme="light"] .time-ago,
[data-theme="light"] [class*="temu"] {
    color: #71717a !important;
}

/* Label text in forms */
[data-theme="light"] label.text-gray-500,
[data-theme="light"] label.text-gray-400 {
    color: #52525b !important;
}

/* Fix opacity on white text */
[data-theme="light"] .text-white\/80,
[data-theme="light"] .text-white\/70,
[data-theme="light"] .text-white\/60,
[data-theme="light"] .text-white\/50,
[data-theme="light"] .text-white\/40 {
    color: #52525b !important;
}

/* Fix inline rgba text colors */
[data-theme="light"] [style*="color: rgba(255, 255, 255"],
[data-theme="light"] [style*="color:rgba(255, 255, 255"] {
    color: #52525b !important;
}

/* Product quantity indicators */
[data-theme="light"] .quantity-badge,
[data-theme="light"] .text-gray-400.text-sm {
    color: #71717a !important;
}

/* Helper/info text in cards */
[data-theme="light"] .helper-text,
[data-theme="light"] .info-text,
[data-theme="light"] .description-text {
    color: #71717a !important;
}

/* Empty state descriptions */
[data-theme="light"] .empty-state p,
[data-theme="light"] .placeholder-text {
    color: #71717a !important;
}

/* Meta info in lists */
[data-theme="light"] .meta-info,
[data-theme="light"] .list-item .text-gray-500,
[data-theme="light"] .list-item .text-gray-400 {
    color: #52525b !important;
}

/* ============================================
   AGGRESSIVE TEXT COLOR FIX FOR LIGHT MODE
   Catch-all for any gray text
   ============================================ */

/* Target any element with text-gray in class */
[data-theme="light"] [class*="text-gray-4"]:not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *):not(.preserve-dark *) {
    color: #3f3f46 !important;
}

[data-theme="light"] [class*="text-gray-5"]:not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *):not(.preserve-dark *) {
    color: #52525b !important;
}

[data-theme="light"] [class*="text-gray-6"]:not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *):not(.preserve-dark *) {
    color: #71717a !important;
}

/* Target any element with inline opacity on white */
[data-theme="light"] [class*="text-white\/"]:not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *):not(.preserve-dark *) {
    color: #52525b !important;
}

/* Ensure all labels are readable */
[data-theme="light"] label:not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *) {
    color: #3f3f46 !important;
}

/* All descriptions and helper text */
[data-theme="light"] .description:not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *),
[data-theme="light"] .subtitle:not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *),
[data-theme="light"] .meta:not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *) {
    color: #52525b !important;
}

/* All icons that should be visible */
[data-theme="light"] i[class*="text-gray"]:not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *) {
    color: #71717a !important;
}


/* ============================================
   ZAMÓWIENIA & KLIENT CARD FIXES
   ============================================ */

/* Order summary labels - must be dark */
[data-theme="light"] .summary-section p,
[data-theme="light"] .summary-section span {
    color: #3f3f46 !important;
}

/* Contact info with icons */
[data-theme="light"] .contact-row,
[data-theme="light"] .info-row {
    color: #3f3f46 !important;
}

[data-theme="light"] .contact-row i,
[data-theme="light"] .info-row i {
    color: #71717a !important;
}

/* Fix icons in client cards */
[data-theme="light"] .fa-envelope,
[data-theme="light"] .fa-phone,
[data-theme="light"] .fa-at,
[data-theme="light"] .fa-mobile,
[data-theme="light"] .fa-user {
    color: #71717a !important;
}

/* Fix all muted icons */
[data-theme="light"] i.fa-solid:not([class*="text-"]):not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *),
[data-theme="light"] i.fa-regular:not([class*="text-"]):not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *) {
    color: #71717a !important;
}

/* Fix stat labels in client/order cards */
[data-theme="light"] .stat-row,
[data-theme="light"] .info-stat {
    color: #3f3f46 !important;
}

/* Specific fix for email/phone rows with icons */
[data-theme="light"] .flex.items-center.gap-2 > i + span,
[data-theme="light"] .flex.items-center.gap-2 > i + p,
[data-theme="light"] .flex.items-center.gap-3 > i + span,
[data-theme="light"] .flex.items-center.gap-3 > i + p {
    color: #3f3f46 !important;
}

/* Fix divider borders */
[data-theme="light"] .border-t.border-white\/5,
[data-theme="light"] .border-t.border-white\/10,
[data-theme="light"] [class*="border-t"][class*="border-white"] {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Summary row items */
[data-theme="light"] .flex.items-center.justify-between p,
[data-theme="light"] .flex.items-center.justify-between span,
[data-theme="light"] .flex.justify-between p,
[data-theme="light"] .flex.justify-between span {
    color: #3f3f46 !important;
}

/* Keep colored text intact */
[data-theme="light"] .text-emerald-400,
[data-theme="light"] .text-emerald-500,
[data-theme="light"] .text-green-400,
[data-theme="light"] .text-green-500 {
    color: #10b981 !important;
}

[data-theme="light"] .text-red-400,
[data-theme="light"] .text-red-500,
[data-theme="light"] .text-rose-400,
[data-theme="light"] .text-rose-500 {
    color: #ef4444 !important;
}

/* Fix "Zamówienia: 3" type labels */
[data-theme="light"] .detail-label,
[data-theme="light"] .detail-value {
    color: #3f3f46 !important;
}

/* Total amount row - keep dark background if present */
[data-theme="light"] .total-row.bg-gray-50,
[data-theme="light"] .total-row.bg-gray-100 {
    background: #f1f5f9 !important;
}

[data-theme="light"] .total-row p,
[data-theme="light"] .total-row span {
    color: #18181b !important;
}

/* Dark total bar should stay dark */
[data-theme="light"] .bg-\[\#1a1a24\],
[data-theme="light"] .bg-\[\#18181b\],
[data-theme="light"] .total-dark {
    background: #1e293b !important;
}

[data-theme="light"] .bg-\[\#1a1a24\] p,
[data-theme="light"] .bg-\[\#1a1a24\] span,
[data-theme="light"] .bg-\[\#18181b\] p,
[data-theme="light"] .bg-\[\#18181b\] span {
    color: #ffffff !important;
}


/* ============================================
   PRECISE FIXES FOR ORDER/CLIENT CARDS
   Based on actual HTML structure
   ============================================ */

/* Summary rows - "Suma produktów", "Dostawa", etc */
[data-theme="light"] .flex.justify-between span.text-gray-500,
[data-theme="light"] .flex.justify-between span.text-gray-400 {
    color: #3f3f46 !important;
}

/* Values in summary - "249,00 zł" etc */
[data-theme="light"] .flex.justify-between span.text-gray-300,
[data-theme="light"] .flex.justify-between span.text-gray-200 {
    color: #3f3f46 !important;
}

/* Email, phone rows with icon */
[data-theme="light"] .flex.items-center.gap-3 i.text-gray-500,
[data-theme="light"] .flex.items-center.gap-3 i.text-gray-400,
[data-theme="light"] .flex.items-center.gap-2 i.text-gray-500,
[data-theme="light"] .flex.items-center.gap-2 i.text-gray-400 {
    color: #64748b !important;
}

/* Contact info text */
[data-theme="light"] .flex.items-center.gap-3 span.text-gray-300,
[data-theme="light"] .flex.items-center.gap-3 span.text-gray-400,
[data-theme="light"] .flex.items-center.gap-2 span.text-gray-300,
[data-theme="light"] .flex.items-center.gap-2 span.text-gray-400 {
    color: #3f3f46 !important;
}

/* Stats like "Zamówienia: 3" */
[data-theme="light"] .flex.items-center.justify-between span.text-gray-500 {
    color: #52525b !important;
}

/* White text values should be dark */
[data-theme="light"] .flex.items-center.justify-between span.text-white:not(.bg-\[\#1a1a24\] *) {
    color: #18181b !important;
}

/* Border dividers */
[data-theme="light"] .border-t.border-gray-800,
[data-theme="light"] .border-t.border-gray-700,
[data-theme="light"] .border-t[class*="border-white"] {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Icon colors - make them visible */
[data-theme="light"] .w-5.text-center.text-gray-500,
[data-theme="light"] i.text-gray-500.w-5,
[data-theme="light"] i.w-5.text-gray-500 {
    color: #64748b !important;
}

/* All fa icons that are gray */
[data-theme="light"] i.fa-solid.text-gray-500:not(.bg-\[\#0f0f14\] *):not(.preserve-dark *),
[data-theme="light"] i.fa-solid.text-gray-400:not(.bg-\[\#0f0f14\] *):not(.preserve-dark *),
[data-theme="light"] i.fa-regular.text-gray-500:not(.bg-\[\#0f0f14\] *):not(.preserve-dark *),
[data-theme="light"] i.fa-regular.text-gray-400:not(.bg-\[\#0f0f14\] *):not(.preserve-dark *) {
    color: #64748b !important;
}


/* ============================================
   FINAL AGGRESSIVE FIX FOR GRAY TEXT
   These have highest specificity
   ============================================ */

/* Force all gray spans to be readable */
[data-theme="light"] span.text-gray-300:not(.preserve-dark *):not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *):not(.bg-\[\#1a1a24\] *):not(.bg-\[\#18181b\] *) {
    color: #3f3f46 !important;
}

[data-theme="light"] span.text-gray-400:not(.preserve-dark *):not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *):not(.bg-\[\#1a1a24\] *):not(.bg-\[\#18181b\] *) {
    color: #52525b !important;
}

[data-theme="light"] span.text-gray-500:not(.preserve-dark *):not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *):not(.bg-\[\#1a1a24\] *):not(.bg-\[\#18181b\] *) {
    color: #52525b !important;
}

/* Force all gray paragraphs */
[data-theme="light"] p.text-gray-300:not(.preserve-dark *):not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *):not(.bg-\[\#1a1a24\] *):not(.bg-\[\#18181b\] *) {
    color: #3f3f46 !important;
}

[data-theme="light"] p.text-gray-400:not(.preserve-dark *):not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *):not(.bg-\[\#1a1a24\] *):not(.bg-\[\#18181b\] *) {
    color: #52525b !important;
}

[data-theme="light"] p.text-gray-500:not(.preserve-dark *):not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *):not(.bg-\[\#1a1a24\] *):not(.bg-\[\#18181b\] *) {
    color: #52525b !important;
}

/* Force all gray divs */
[data-theme="light"] div.text-gray-300:not(.preserve-dark *):not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *):not(.bg-\[\#1a1a24\] *):not(.bg-\[\#18181b\] *) {
    color: #3f3f46 !important;
}

[data-theme="light"] div.text-gray-400:not(.preserve-dark *):not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *):not(.bg-\[\#1a1a24\] *):not(.bg-\[\#18181b\] *) {
    color: #52525b !important;
}

[data-theme="light"] div.text-gray-500:not(.preserve-dark *):not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *):not(.bg-\[\#1a1a24\] *):not(.bg-\[\#18181b\] *) {
    color: #52525b !important;
}

/* Force all gray icons */
[data-theme="light"] i.text-gray-400:not(.preserve-dark *):not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *):not(.bg-\[\#1a1a24\] *):not(.bg-\[\#18181b\] *) {
    color: #64748b !important;
}

[data-theme="light"] i.text-gray-500:not(.preserve-dark *):not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *):not(.bg-\[\#1a1a24\] *):not(.bg-\[\#18181b\] *) {
    color: #64748b !important;
}

[data-theme="light"] i.text-gray-600:not(.preserve-dark *):not(.bg-\[\#0f0f14\] *):not(.bg-\[\#0d0d12\] *):not(.bg-\[\#1a1a24\] *):not(.bg-\[\#18181b\] *) {
    color: #71717a !important;
}


/* ============================================
   CARD VISIBILITY FIXES FOR LIGHT MODE
   Add shadows and borders to floating elements
   ============================================ */

/* All bento cards need visible shadows in light mode */
[data-theme="light"] .bento-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .bento-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

/* List items / rows need visible separation */
[data-theme="light"] .list-item,
[data-theme="light"] .automation-row,
[data-theme="light"] .communication-row {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
}

/* Stats cards */
[data-theme="light"] .stat-card,
[data-theme="light"] .stats-widget,
[data-theme="light"] .metric-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    border-radius: 16px !important;
}

/* Specific fix for stats row with labels */
[data-theme="light"] .flex.items-start.justify-between {
    background: transparent !important;
}

/* Widget containers */
[data-theme="light"] .widget {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Ensure main content area has subtle background */
[data-theme="light"] main {
    background: #f8fafc;
}

/* Dividers between list items */
[data-theme="light"] .divide-y > * {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .space-y-3 > *,
[data-theme="light"] .space-y-4 > * {
    /* These are typically list items */
}

/* Fix for stats that look like they're floating */
[data-theme="light"] .flex.flex-col.gap-1,
[data-theme="light"] .flex.flex-col.gap-2 {
    /* Stats container */
}

/* Hover effect for clickable rows */
[data-theme="light"] .hover\:bg-white\/5:hover {
    background: rgba(0, 0, 0, 0.02) !important;
}

[data-theme="light"] .hover\:bg-white\/10:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}


/* ============================================
   SPECIFIC CLASS OVERRIDES FOR LIGHT MODE
   Override inline <style> definitions
   ============================================ */

/* Message cards (komunikacja.html) */
[data-theme="light"] .message-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .message-card:hover {
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .message-card.expanded {
    border-color: rgba(99, 102, 241, 0.3) !important;
    background: rgba(99, 102, 241, 0.03) !important;
}

/* Stat cards (sprzedaz.html, dane/) */
[data-theme="light"] .stat-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Trend indicators */
[data-theme="light"] .trend-up {
    color: #10b981 !important;
}

[data-theme="light"] .trend-down {
    color: #ef4444 !important;
}

/* Secondary stat text */
[data-theme="light"] .stat-card .text-gray-600,
[data-theme="light"] .stat-card .text-gray-500 {
    color: #71717a !important;
}

/* Tab buttons */
[data-theme="light"] .tab-btn {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #52525b !important;
}

[data-theme="light"] .tab-btn:hover {
    background: rgba(0, 0, 0, 0.02) !important;
    color: #18181b !important;
}

[data-theme="light"] .tab-btn.active {
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #4f46e5 !important;
}

/* Toggle switches */
[data-theme="light"] .toggle-switch {
    background: #e2e8f0 !important;
}

[data-theme="light"] .toggle-switch.active {
    background: #10b981 !important;
}

/* Chevron icons */
[data-theme="light"] .fa-chevron-down.text-gray-500,
[data-theme="light"] .fa-chevron-right.text-gray-500 {
    color: #94a3b8 !important;
}


/* ============================================
   COMPREHENSIVE CARD/BOX VISIBILITY FIX
   Catch all semi-transparent white backgrounds
   ============================================ */

/* Common card patterns with tailwind classes */
[data-theme="light"] .bg-white\/2,
[data-theme="light"] .bg-white\/3,
[data-theme="light"] .bg-white\/4,
[data-theme="light"] .bg-white\/5 {
    background: rgba(0, 0, 0, 0.02) !important;
}

/* Explicit overrides for known card classes */
[data-theme="light"] .metric-card,
[data-theme="light"] .info-card,
[data-theme="light"] .data-card,
[data-theme="light"] .chart-card,
[data-theme="light"] .action-card,
[data-theme="light"] .preview-card,
[data-theme="light"] .item-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Main value text in stat cards */
[data-theme="light"] .stat-card .text-2xl,
[data-theme="light"] .stat-card .text-3xl,
[data-theme="light"] .metric-card .text-2xl {
    color: #18181b !important;
}

/* Labels in stat cards */
[data-theme="light"] .stat-card .text-sm.text-gray-500,
[data-theme="light"] .stat-card .text-xs.text-gray-500,
[data-theme="light"] .stat-card .text-xs.text-gray-600 {
    color: #64748b !important;
}


/* ============================================
   RESET UNWANTED BACKGROUNDS
   Ensure footers and dividers are transparent
   ============================================ */

/* Footer sections should not have background */
[data-theme="light"] .card-footer {
    background: transparent !important;
    box-shadow: none !important;
}

/* Pagination footer - must be transparent */
[data-theme="light"] .pagination,
[data-theme="light"] .pagination-container {
    background: transparent !important;
}

/* Remove gray backgrounds from simple flex containers */
[data-theme="light"] .flex.items-center.justify-between:not(.bento-card):not(.stat-card):not(.message-card) {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Avatar groups - no background */
[data-theme="light"] .avatar-group,
[data-theme="light"] .flex.-space-x-2,
[data-theme="light"] .flex.-space-x-3,
[data-theme="light"] [class*="-space-x-"] {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Workflow/add buttons - no background */
[data-theme="light"] .add-btn,
[data-theme="light"] [class*="add-"]:not(button) {
    background: transparent !important;
}

/* Border-t dividers should be transparent */
[data-theme="light"] [class*="border-t"]:not(.bento-card):not(.stat-card):not(.message-card) {
    background: transparent !important;
    box-shadow: none !important;
}

/* Reset for pt- mt- elements that look like footers */
[data-theme="light"] [class*="pt-3"]:not(.bento-card):not(.stat-card),
[data-theme="light"] [class*="pt-4"]:not(.bento-card):not(.stat-card),
[data-theme="light"] [class*="mt-3"]:not(.bento-card):not(.stat-card),
[data-theme="light"] [class*="mt-4"]:not(.bento-card):not(.stat-card) {
    background: transparent !important;
    box-shadow: none !important;
}

/* Cards that SHOULD have white background */
[data-theme="light"] .bento-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .message-card,
[data-theme="light"] .persona-card,
[data-theme="light"] .widget,
[data-theme="light"] .landing-card,
[data-theme="light"] .order-card,
[data-theme="light"] .product-card,
[data-theme="light"] .template-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}


/* ============================================
   OPTION CARDS (Templates, Categories)
   ============================================ */

[data-theme="light"] .option-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .option-card:hover {
    background: #f8fafc !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .option-card.active,
[data-theme="light"] .option-card.selected {
    border-color: rgba(99, 102, 241, 0.4) !important;
    background: rgba(99, 102, 241, 0.05) !important;
}

/* Template card text */
[data-theme="light"] .option-card .text-white {
    color: #18181b !important;
}

[data-theme="light"] .option-card .text-gray-600,
[data-theme="light"] .option-card .text-gray-500 {
    color: #71717a !important;
}

/* Section containers that need card styling */
[data-theme="light"] section,
[data-theme="light"] .section-card {
    /* Don't add bg to all sections */
}

/* Specific section wrappers that should have cards */
[data-theme="light"] .templates-section,
[data-theme="light"] .categories-section {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}


/* ============================================
   LABELS & FORM ELEMENTS - LIGHT MODE
   ============================================ */

/* All labels should be readable */
[data-theme="light"] label {
    color: #3f3f46 !important;
}

[data-theme="light"] label.text-gray-400,
[data-theme="light"] label.text-gray-500 {
    color: #52525b !important;
}

/* ============================================
   BUTTONS WITH bg-white/X - LIGHT MODE
   ============================================ */

/* Small action buttons */
[data-theme="light"] button.bg-white\/5,
[data-theme="light"] button.bg-white\/10,
[data-theme="light"] button[class*="bg-white\/5"],
[data-theme="light"] button[class*="bg-white\/10"] {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #52525b !important;
}

[data-theme="light"] button.bg-white\/5:hover,
[data-theme="light"] button.bg-white\/10:hover,
[data-theme="light"] button[class*="bg-white\/5"]:hover,
[data-theme="light"] button[class*="bg-white\/10"]:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #18181b !important;
}

/* Tone buttons */
[data-theme="light"] .tone-btn {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #52525b !important;
}

[data-theme="light"] .tone-btn:hover {
    background: #f8fafc !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #18181b !important;
}

[data-theme="light"] .tone-btn.active {
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    color: #4f46e5 !important;
}

/* Channel buttons */
[data-theme="light"] .channel-btn {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #52525b !important;
}

[data-theme="light"] .channel-btn:hover {
    background: #f8fafc !important;
    color: #18181b !important;
}

[data-theme="light"] .channel-btn.active {
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    color: #4f46e5 !important;
}

/* Aspect ratio buttons */
[data-theme="light"] .aspect-ratio-btn {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #52525b !important;
}

[data-theme="light"] .aspect-ratio-btn:hover {
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: #18181b !important;
}

[data-theme="light"] .aspect-ratio-btn.selected,
[data-theme="light"] .aspect-ratio-btn.active {
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    color: #4f46e5 !important;
}

/* Timing option labels */
[data-theme="light"] .timing-option {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #52525b !important;
}

[data-theme="light"] .timing-option:hover {
    border-color: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .timing-option.selected {
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    color: #4f46e5 !important;
}

/* Filter/tab style buttons */
[data-theme="light"] .filter-btn,
[data-theme="light"] .segment-btn {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #52525b !important;
}

[data-theme="light"] .filter-btn:hover,
[data-theme="light"] .segment-btn:hover {
    background: #f8fafc !important;
    color: #18181b !important;
}

[data-theme="light"] .filter-btn.active,
[data-theme="light"] .segment-btn.active {
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    color: #4f46e5 !important;
}

/* Icon-only buttons (copy, edit, etc) */
[data-theme="light"] button.w-8.h-8,
[data-theme="light"] button.w-9.h-9 {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #64748b !important;
}

[data-theme="light"] button.w-8.h-8:hover,
[data-theme="light"] button.w-9.h-9:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #18181b !important;
}

/* Text buttons with gray color */
[data-theme="light"] button.text-gray-400,
[data-theme="light"] button.text-gray-500 {
    color: #64748b !important;
}

[data-theme="light"] button.text-gray-400:hover,
[data-theme="light"] button.text-gray-500:hover {
    color: #18181b !important;
}

/* ============================================
   SECONDARY/OUTLINE BUTTONS
   ============================================ */

[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-outline {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: #3f3f46 !important;
}

[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .btn-outline:hover {
    background: #f8fafc !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: #18181b !important;
}

/* ============================================
   GRADIENT CTA BUTTONS - Keep as is
   ============================================ */

/* Primary gradient buttons should stay vibrant */
[data-theme="light"] button[class*="bg-gradient"] {
    /* Keep gradient colors */
}

[data-theme="light"] button[class*="bg-gradient"] .text-white,
[data-theme="light"] button[class*="from-rose"] .text-white,
[data-theme="light"] button[class*="from-indigo"] .text-white,
[data-theme="light"] button[class*="from-emerald"] .text-white {
    color: #ffffff !important;
}

/* ============================================
   INLINE BUTTONS/LINKS
   ============================================ */

[data-theme="light"] a.text-gray-400,
[data-theme="light"] a.text-gray-500 {
    color: #64748b !important;
}

[data-theme="light"] a.text-gray-400:hover,
[data-theme="light"] a.text-gray-500:hover {
    color: #4f46e5 !important;
}

/* Close buttons */
[data-theme="light"] button[onclick*="display='none'"],
[data-theme="light"] .close-btn {
    color: #64748b !important;
}

[data-theme="light"] button[onclick*="display='none'"]:hover,
[data-theme="light"] .close-btn:hover {
    color: #18181b !important;
}


/* ============================================
   TEMPLATE CARDS
   ============================================ */

[data-theme="light"] .template-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #52525b !important;
}

[data-theme="light"] .template-card:hover {
    background: #f8fafc !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .template-card.selected,
[data-theme="light"] .template-card.active {
    background: rgba(99, 102, 241, 0.08) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}

[data-theme="light"] .template-card .text-white {
    color: #18181b !important;
}

[data-theme="light"] .template-card .text-gray-400,
[data-theme="light"] .template-card .text-gray-500,
[data-theme="light"] .template-card .text-gray-600 {
    color: #71717a !important;
}

/* ============================================
   CATEGORY CHIPS
   ============================================ */

[data-theme="light"] .category-chip {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #52525b !important;
    cursor: pointer;
}

[data-theme="light"] .category-chip:hover {
    background: #f8fafc !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #18181b !important;
}

[data-theme="light"] .category-chip.selected,
[data-theme="light"] .category-chip.active {
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    color: #4f46e5 !important;
}

/* ============================================
   STEP INDICATORS
   ============================================ */

[data-theme="light"] .step-indicator {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #71717a !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .step-indicator.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

[data-theme="light"] .step-indicator.completed {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

[data-theme="light"] .step-indicator.pending {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #a1a1aa !important;
}

/* Step icons */
[data-theme="light"] .step-icon {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* ============================================
   KEYWORD TAGS / HASHTAGS
   ============================================ */

[data-theme="light"] .keyword-tag,
[data-theme="light"] .hashtag-chip {
    background: rgba(99, 102, 241, 0.1) !important;
    color: #4f46e5 !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
}

[data-theme="light"] .keyword-tag .remove-btn,
[data-theme="light"] .hashtag-chip .remove-btn {
    color: #6366f1 !important;
}

/* ============================================
   STATUS BADGES
   ============================================ */

[data-theme="light"] .status-badge {
    border: 1px solid currentColor !important;
}

/* Keep colored badges as they are */
[data-theme="light"] .status-badge.success,
[data-theme="light"] .bg-emerald-500\/20 {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #059669 !important;
}

[data-theme="light"] .status-badge.warning,
[data-theme="light"] .bg-amber-500\/20 {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #d97706 !important;
}

[data-theme="light"] .status-badge.error,
[data-theme="light"] .bg-red-500\/20 {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #dc2626 !important;
}

[data-theme="light"] .status-badge.info,
[data-theme="light"] .bg-blue-500\/20 {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #2563eb !important;
}

/* ============================================
   AIDA BADGES (Copywriting)
   ============================================ */

[data-theme="light"] .aida-badge {
    /* Keep original colors - they're semantic */
}

/* ============================================
   RANGE SLIDERS
   ============================================ */

[data-theme="light"] input[type="range"] {
    background: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] input[type="range"]::-webkit-slider-thumb {
    background: #6366f1 !important;
}

/* ============================================
   CHECKBOXES & TOGGLES
   ============================================ */

[data-theme="light"] input[type="checkbox"] {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] input[type="checkbox"]:checked {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
}

/* ============================================
   DROPDOWN ARROWS
   ============================================ */

[data-theme="light"] .fa-chevron-down,
[data-theme="light"] .fa-chevron-right,
[data-theme="light"] .fa-angle-down {
    color: #94a3b8 !important;
}

/* ============================================
   ICON CONTAINERS WITH WHITE BG
   ============================================ */

[data-theme="light"] .bg-white\/10,
[data-theme="light"] .bg-white\/5 {
    background: rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .bg-white\/10:hover,
[data-theme="light"] .bg-white\/5:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* ============================================
   BORDER WHITE/X
   ============================================ */

[data-theme="light"] .border-white\/5,
[data-theme="light"] .border-white\/10,
[data-theme="light"] .border-white\/20 {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] [class*="hover\\:border-white"]:hover {
    border-color: rgba(0, 0, 0, 0.15) !important;
}


/* ============================================
   MODALS
   ============================================ */

[data-theme="light"] .modal-content,
[data-theme="light"] [id*="modal"] > div:not(.bg-black) {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .modal-header {
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .modal-footer {
    border-top-color: rgba(0, 0, 0, 0.08) !important;
}

/* Modal backdrop */
[data-theme="light"] .modal-backdrop,
[data-theme="light"] [id*="modal"] > .bg-black {
    background: rgba(0, 0, 0, 0.4) !important;
}

/* ============================================
   TOOLTIPS
   ============================================ */

[data-theme="light"] .tooltip,
[data-theme="light"] [class*="tooltip"] {
    background: #18181b !important;
    color: #ffffff !important;
}

/* Chart tooltips can stay dark */

/* ============================================
   DROPDOWNS / MENUS
   ============================================ */

[data-theme="light"] .dropdown-menu,
[data-theme="light"] .context-menu,
[data-theme="light"] .popup-menu {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .dropdown-item,
[data-theme="light"] .menu-item {
    color: #3f3f46 !important;
}

[data-theme="light"] .dropdown-item:hover,
[data-theme="light"] .menu-item:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #18181b !important;
}

/* ============================================
   ADDITIONAL FIXES
   ============================================ */

/* Fix all remaining text-gray on non-dark backgrounds */
[data-theme="light"] .text-gray-300:not(.preserve-dark *):not([class*="bg-\\[#0"]):not([class*="bg-\\[#1"]) {
    color: #3f3f46 !important;
}

/* Ensure placeholder text is visible */
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: #94a3b8 !important;
}

/* Fix any remaining white text on light backgrounds */
[data-theme="light"] .text-white:not(.preserve-dark *):not([class*="bg-gradient"]):not([class*="bg-\\[#0"]):not([class*="bg-\\[#1"]):not(button[class*="bg-gradient"] *):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-indigo"]):not([class*="bg-blue"]):not([class*="bg-purple"]):not([class*="bg-amber"]):not([class*="bg-green"]):not([class*="bg-red"]):not([class*="bg-pink"]):not([class*="bg-orange"]):not([class*="from-"]) {
    color: #18181b !important;
}

/* Fix info boxes/alerts */
[data-theme="light"] .info-box,
[data-theme="light"] .alert-box {
    background: rgba(59, 130, 246, 0.1) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

[data-theme="light"] .warning-box {
    background: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

[data-theme="light"] .success-box {
    background: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

[data-theme="light"] .error-box {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

/* Fix dividers */
[data-theme="light"] hr,
[data-theme="light"] .divider {
    border-color: rgba(0, 0, 0, 0.08) !important;
    background: rgba(0, 0, 0, 0.08) !important;
}

/* Fix any inline borders */
[data-theme="light"] [style*="border"][style*="rgba(255, 255, 255"] {
    border-color: rgba(0, 0, 0, 0.1) !important;
}


/* ============================================
   DARK BACKGROUND COLORS → WHITE IN LIGHT MODE
   ============================================ */

[data-theme="light"] .bg-\[\#121216\],
[data-theme="light"] .bg-\[\#12121a\],
[data-theme="light"] .bg-\[\#15151a\],
[data-theme="light"] .bg-\[\#16161d\],
[data-theme="light"] .bg-\[\#18181b\],
[data-theme="light"] .bg-\[\#1a1a20\],
[data-theme="light"] .bg-\[\#1a1a24\] {
    background: #ffffff !important;
}

/* Modal containers specifically */
[data-theme="light"] [id*="modal"] .bg-\[\#16161d\],
[data-theme="light"] [id*="modal"] .bg-\[\#12121a\],
[data-theme="light"] [id*="modal"] .bg-\[\#15151a\],
[data-theme="light"] [id*="modal"] .bg-\[\#1a1a24\] {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Text in converted dark sections */
[data-theme="light"] .bg-\[\#16161d\] .text-white,
[data-theme="light"] .bg-\[\#12121a\] .text-white,
[data-theme="light"] .bg-\[\#15151a\] .text-white,
[data-theme="light"] .bg-\[\#1a1a24\] .text-white {
    color: #18181b !important;
}

[data-theme="light"] .bg-\[\#16161d\] .text-gray-400,
[data-theme="light"] .bg-\[\#16161d\] .text-gray-500,
[data-theme="light"] .bg-\[\#12121a\] .text-gray-400,
[data-theme="light"] .bg-\[\#12121a\] .text-gray-500 {
    color: #71717a !important;
}

/* ============================================
   CARD CLASS
   ============================================ */

[data-theme="light"] .card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .card .text-white {
    color: #18181b !important;
}

[data-theme="light"] .card .text-gray-400,
[data-theme="light"] .card .text-gray-500 {
    color: #71717a !important;
}

/* ============================================
   CLOSE BUTTON (X) FIX
   ============================================ */

[data-theme="light"] button .fa-xmark,
[data-theme="light"] button .fa-times,
[data-theme="light"] button .fa-close {
    color: #64748b !important;
}

[data-theme="light"] button:hover .fa-xmark,
[data-theme="light"] button:hover .fa-times,
[data-theme="light"] button:hover .fa-close {
    color: #18181b !important;
}

/* Close button container */
[data-theme="light"] button[onclick*="close"],
[data-theme="light"] button[onclick*="Close"],
[data-theme="light"] .close-btn,
[data-theme="light"] .btn-close {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #64748b !important;
}

[data-theme="light"] button[onclick*="close"]:hover,
[data-theme="light"] button[onclick*="Close"]:hover,
[data-theme="light"] .close-btn:hover,
[data-theme="light"] .btn-close:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #18181b !important;
}

/* ============================================
   TOGGLE SWITCHES - COMPLETE FIX
   ============================================ */

[data-theme="light"] .toggle-switch {
    background: #d1d5db !important;
    border: none !important;
}

[data-theme="light"] .toggle-switch::after {
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .toggle-switch.active {
    background: #10b981 !important;
}

[data-theme="light"] .toggle-switch.active::after {
    background: #ffffff !important;
}

/* Alternative toggle syntax */
[data-theme="light"] .toggle,
[data-theme="light"] .switch {
    background: #d1d5db !important;
}

[data-theme="light"] .toggle.active,
[data-theme="light"] .toggle.on,
[data-theme="light"] .switch.active,
[data-theme="light"] .switch.on {
    background: #10b981 !important;
}

/* Input checkbox styled as toggle */
[data-theme="light"] input[type="checkbox"].toggle-checkbox {
    background: #d1d5db !important;
}

[data-theme="light"] input[type="checkbox"].toggle-checkbox:checked {
    background: #10b981 !important;
}

/* ============================================
   MODAL SPECIFIC FIXES
   ============================================ */

/* Modal content area */
[data-theme="light"] [id*="modal"] > div:not(.bg-black):not([class*="bg-black"]) {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Modal headers */
[data-theme="light"] [id*="modal"] .border-b {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Modal text */
[data-theme="light"] [id*="modal"] h3,
[data-theme="light"] [id*="modal"] h4 {
    color: #18181b !important;
}

[data-theme="light"] [id*="modal"] p {
    color: #52525b !important;
}

[data-theme="light"] [id*="modal"] label {
    color: #3f3f46 !important;
}

/* Modal inputs */
[data-theme="light"] [id*="modal"] input,
[data-theme="light"] [id*="modal"] textarea,
[data-theme="light"] [id*="modal"] select {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: #18181b !important;
}

[data-theme="light"] [id*="modal"] input:focus,
[data-theme="light"] [id*="modal"] textarea:focus,
[data-theme="light"] [id*="modal"] select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

/* Modal info boxes */
[data-theme="light"] [id*="modal"] .bg-amber-500\/10,
[data-theme="light"] [id*="modal"] .bg-purple-500\/10 {
    background: rgba(139, 92, 246, 0.08) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
}

[data-theme="light"] [id*="modal"] .bg-amber-500\/10 p,
[data-theme="light"] [id*="modal"] .bg-purple-500\/10 p {
    color: #6d28d9 !important;
}

/* Modal footer buttons */
[data-theme="light"] [id*="modal"] .border-t {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Anuluj button in modals */
[data-theme="light"] [id*="modal"] button.text-gray-400,
[data-theme="light"] [id*="modal"] button.text-gray-500 {
    color: #64748b !important;
}

[data-theme="light"] [id*="modal"] button.text-gray-400:hover,
[data-theme="light"] [id*="modal"] button.text-gray-500:hover {
    color: #18181b !important;
}

/* ============================================
   PRODUCT EDIT SECTION FIXES
   ============================================ */

/* Variant chips */
[data-theme="light"] .variant-chip,
[data-theme="light"] [onclick*="variant"] {
    background: #f1f5f9 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #3f3f46 !important;
}

[data-theme="light"] .variant-chip:hover,
[data-theme="light"] [onclick*="variant"]:hover {
    background: #e2e8f0 !important;
}

/* Add variant button */
[data-theme="light"] .add-variant-btn,
[data-theme="light"] [onclick*="addVariant"] {
    color: #6366f1 !important;
}

/* Image upload area */
[data-theme="light"] .image-upload {
    background: #f8fafc !important;
    border: 2px dashed rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .image-upload:hover {
    border-color: #6366f1 !important;
    background: rgba(99, 102, 241, 0.02) !important;
}

/* Section headers in edit page */
[data-theme="light"] .section-header,
[data-theme="light"] h3.text-white {
    color: #18181b !important;
}

/* Price inputs */
[data-theme="light"] .price-input,
[data-theme="light"] input[type="number"] {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: #18181b !important;
}

/* Currency label */
[data-theme="light"] .currency-label {
    color: #64748b !important;
}

/* SEO preview */
[data-theme="light"] .seo-preview {
    background: #f8fafc !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Character counter */
[data-theme="light"] .char-counter {
    color: #71717a !important;
}

/* AI suggestion box */
[data-theme="light"] .ai-suggestion,
[data-theme="light"] .suggestion-box {
    background: rgba(245, 158, 11, 0.08) !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

[data-theme="light"] .ai-suggestion p,
[data-theme="light"] .suggestion-box p {
    color: #92400e !important;
}

/* ============================================
   GALLERY MODAL FIXES
   ============================================ */

[data-theme="light"] .gallery-sidebar,
[data-theme="light"] .image-details {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .gallery-sidebar .text-white,
[data-theme="light"] .image-details .text-white {
    color: #18181b !important;
}

[data-theme="light"] .gallery-sidebar .text-gray-400,
[data-theme="light"] .gallery-sidebar .text-gray-500,
[data-theme="light"] .image-details .text-gray-400,
[data-theme="light"] .image-details .text-gray-500 {
    color: #71717a !important;
}

/* Tags in gallery */
[data-theme="light"] .image-tag {
    background: #f1f5f9 !important;
    color: #3f3f46 !important;
}


/* ============================================
   KOKPIT WIDGETS & BENTO CARDS
   ============================================ */

/* Widget headers */
[data-theme="light"] .widget h3.text-white,
[data-theme="light"] .bento-card h3.text-white {
    color: #18181b !important;
}

/* NEW badge */
[data-theme="light"] .bg-indigo-500\/30 {
    background: rgba(99, 102, 241, 0.15) !important;
}

[data-theme="light"] .text-indigo-300 {
    color: #4f46e5 !important;
}

/* Widget items */
[data-theme="light"] .widget a,
[data-theme="light"] .bento-card a {
    background: rgba(0, 0, 0, 0.02) !important;
}

[data-theme="light"] .widget a:hover,
[data-theme="light"] .bento-card a:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .widget .text-white,
[data-theme="light"] .bento-card .text-white {
    color: #18181b !important;
}

[data-theme="light"] .widget .text-gray-500,
[data-theme="light"] .bento-card .text-gray-500 {
    color: #71717a !important;
}

/* ============================================
   DRAG HANDLE & REMOVE BUTTON (Widgets)
   ============================================ */

[data-theme="light"] .drag-handle,
[data-theme="light"] .widget-handle {
    color: #94a3b8 !important;
}

[data-theme="light"] .remove-widget,
[data-theme="light"] .widget-remove {
    background: #fef2f2 !important;
    color: #ef4444 !important;
}

[data-theme="light"] .remove-widget:hover,
[data-theme="light"] .widget-remove:hover {
    background: #fecaca !important;
}

/* ============================================
   INLINE BG WHITE/X THAT WAS MISSED
   ============================================ */

/* Links and items with bg-white/5 */
[data-theme="light"] a.bg-white\/5,
[data-theme="light"] a[class*="bg-white\/5"],
[data-theme="light"] div.bg-white\/5:not(.preserve-dark) {
    background: rgba(0, 0, 0, 0.02) !important;
}

[data-theme="light"] a.bg-white\/5:hover,
[data-theme="light"] a[class*="bg-white\/5"]:hover,
[data-theme="light"] a.bg-white\/10:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* ============================================
   BORDERS IN MODALS AND CARDS
   ============================================ */

[data-theme="light"] .border-white\/5,
[data-theme="light"] .border-white\/10,
[data-theme="light"] [class*="border-white\/"] {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ============================================
   GALLERY TAGS FIX
   ============================================ */

[data-theme="light"] .tag,
[data-theme="light"] .image-tag,
[data-theme="light"] span[class*="rounded"][class*="bg-"][class*="text-xs"] {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ============================================
   ACTION ICONS IN IMAGE PREVIEW
   ============================================ */

[data-theme="light"] .image-actions button,
[data-theme="light"] .preview-actions button {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #64748b !important;
}

[data-theme="light"] .image-actions button:hover,
[data-theme="light"] .preview-actions button:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #18181b !important;
}

/* ============================================
   NAVIGATION ARROWS IN GALLERY
   ============================================ */

[data-theme="light"] .nav-arrow,
[data-theme="light"] .gallery-nav {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #18181b !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .nav-arrow:hover,
[data-theme="light"] .gallery-nav:hover {
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ============================================
   DOWNLOAD BUTTON
   ============================================ */

[data-theme="light"] .download-btn,
[data-theme="light"] button[class*="bg-gradient"][class*="from-purple"] {
    /* Keep gradient buttons vibrant */
}


/* ============================================
   GALLERY SIDEBAR & DETAILS PANEL
   ============================================ */

/* Sidebar items */
[data-theme="light"] .sidebar-item {
    color: #52525b !important;
}

[data-theme="light"] .sidebar-item:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .sidebar-item.active {
    background: rgba(99, 102, 241, 0.1) !important;
}

[data-theme="light"] .sidebar-item .text-white,
[data-theme="light"] .sidebar-item .text-gray-300 {
    color: #3f3f46 !important;
}

[data-theme="light"] .sidebar-item .text-gray-600 {
    color: #94a3b8 !important;
}

/* Sidebar section headers */
[data-theme="light"] h3.text-gray-500.text-\[10px\] {
    color: #64748b !important;
}

/* Gallery tags */
[data-theme="light"] span.rounded.bg-white\/10 {
    background: #f1f5f9 !important;
    color: #475569 !important;
}

/* View toggle buttons */
[data-theme="light"] .view-btn {
    background: transparent !important;
    color: #64748b !important;
}

[data-theme="light"] .view-btn:hover {
    color: #18181b !important;
}

[data-theme="light"] .view-btn.active {
    background: #ffffff !important;
    color: #18181b !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* View toggle container */
[data-theme="light"] .flex.items-center.bg-white\/5.border.border-white\/10.rounded-xl {
    background: #f1f5f9 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Gallery image overlay actions */
[data-theme="light"] .image-overlay button {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #3f3f46 !important;
}

[data-theme="light"] .image-overlay button:hover {
    background: #ffffff !important;
    color: #18181b !important;
}

/* Details panel (right side of lightbox) */
[data-theme="light"] .details-panel {
    background: #ffffff !important;
    border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .details-panel .text-white {
    color: #18181b !important;
}

[data-theme="light"] .details-panel .text-gray-400,
[data-theme="light"] .details-panel .text-gray-500 {
    color: #71717a !important;
}

/* Image info rows */
[data-theme="light"] .info-row,
[data-theme="light"] .detail-row {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

/* ============================================
   SELECT DROPDOWNS IN GALLERY
   ============================================ */

[data-theme="light"] select.bg-white\/5 {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #3f3f46 !important;
}

[data-theme="light"] select.bg-white\/5:focus {
    border-color: #6366f1 !important;
}

[data-theme="light"] select.bg-white\/5 option {
    background: #ffffff !important;
    color: #18181b !important;
}

/* ============================================
   PRODUCT VARIANT BUTTONS
   ============================================ */

/* Color variant pills */
[data-theme="light"] .variant-pill,
[data-theme="light"] [class*="rounded-full"][class*="px-"][class*="py-"][class*="bg-"] {
    /* Keep color backgrounds */
}

/* Variant text */
[data-theme="light"] .variant-pill span,
[data-theme="light"] .color-variant span {
    color: #ffffff !important;
}

/* Add type button */
[data-theme="light"] .add-type-btn {
    color: #6366f1 !important;
    background: transparent !important;
}

[data-theme="light"] .add-type-btn:hover {
    background: rgba(99, 102, 241, 0.1) !important;
}

/* ============================================
   WYSIWYG / RICH TEXT EDITOR
   ============================================ */

[data-theme="light"] .editor-toolbar {
    background: #f8fafc !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .editor-toolbar button {
    color: #52525b !important;
}

[data-theme="light"] .editor-toolbar button:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #18181b !important;
}

[data-theme="light"] .editor-toolbar button.active {
    background: rgba(99, 102, 241, 0.1) !important;
    color: #4f46e5 !important;
}

[data-theme="light"] .editor-content {
    background: #ffffff !important;
    color: #18181b !important;
}

/* ============================================
   AI GENERATION BUTTON BOX
   ============================================ */

[data-theme="light"] .ai-generate-box {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)) !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
}

[data-theme="light"] .ai-generate-box .text-white {
    color: #4f46e5 !important;
}

[data-theme="light"] .ai-generate-box .text-gray-400,
[data-theme="light"] .ai-generate-box .text-gray-500 {
    color: #6366f1 !important;
}

/* ============================================
   ADDITIONAL FIXES FOR MISSED ELEMENTS
   ============================================ */

/* Floating panels */
[data-theme="light"] .floating-panel,
[data-theme="light"] .popup-panel {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
}

/* Status labels */
[data-theme="light"] .status-label {
    color: #52525b !important;
}

/* AI badge */
[data-theme="light"] .ai-badge {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #ffffff !important;
}


/* ============================================
   VARIANT TAGS (Biały, Czarny, Drewno)
   ============================================ */

[data-theme="light"] .variant-tag {
    background: #f8fafc !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #3f3f46 !important;
}

[data-theme="light"] .variant-tag button {
    color: #94a3b8 !important;
}

[data-theme="light"] .variant-tag button:hover {
    color: #ef4444 !important;
}

/* ============================================
   CARD INNER BOXES (bg-white/5 inside cards)
   ============================================ */

[data-theme="light"] .card .bg-white\/5,
[data-theme="light"] .card [class*="bg-white\/5"] {
    background: #f8fafc !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .card .bg-white\/10,
[data-theme="light"] .card [class*="bg-white\/10"] {
    background: #f1f5f9 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ============================================
   PRODUCT EDIT - ALL ELEMENTS
   ============================================ */

/* Main card sections */
[data-theme="light"] #view-edit .card,
[data-theme="light"] #view-dna .card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Card headers */
[data-theme="light"] #view-edit h3,
[data-theme="light"] #view-dna h3 {
    color: #18181b !important;
}

/* Descriptions */
[data-theme="light"] #view-edit .text-gray-500,
[data-theme="light"] #view-dna .text-gray-500 {
    color: #71717a !important;
}

/* Inputs in edit view */
[data-theme="light"] #view-edit input,
[data-theme="light"] #view-edit textarea,
[data-theme="light"] #view-dna input,
[data-theme="light"] #view-dna textarea {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: #18181b !important;
}

/* Price boxes */
[data-theme="light"] .price-box,
[data-theme="light"] .rounded-xl.p-4.border {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

/* Currency suffix */
[data-theme="light"] .input-suffix {
    color: #64748b !important;
}

/* AI suggestion amber box */
[data-theme="light"] [class*="bg-amber-500"],
[data-theme="light"] .bg-amber-500\/10 {
    background: rgba(245, 158, 11, 0.1) !important;
}

[data-theme="light"] .bg-amber-500\/10 p {
    color: #92400e !important;
}

/* ============================================
   BREADCRUMB & PAGE HEADERS
   ============================================ */

[data-theme="light"] #view-edit h1,
[data-theme="light"] #view-dna h1 {
    color: #18181b !important;
}

/* Breadcrumb links */
[data-theme="light"] .breadcrumb a,
[data-theme="light"] button.text-gray-500 {
    color: #64748b !important;
}

[data-theme="light"] .breadcrumb a:hover,
[data-theme="light"] button.text-gray-500:hover {
    color: #18181b !important;
}

/* ============================================
   IMAGE UPLOAD / DROPZONE
   ============================================ */

[data-theme="light"] .dropzone,
[data-theme="light"] label.border-dashed {
    background: #fafbfc !important;
    border: 2px dashed rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .dropzone:hover,
[data-theme="light"] label.border-dashed:hover {
    border-color: #6366f1 !important;
    background: rgba(99, 102, 241, 0.02) !important;
}

[data-theme="light"] .dropzone .text-white,
[data-theme="light"] label.border-dashed .text-white {
    color: #3f3f46 !important;
}

[data-theme="light"] .dropzone .text-gray-500,
[data-theme="light"] label.border-dashed .text-gray-500 {
    color: #71717a !important;
}

/* ============================================
   STICKY SIDEBAR BUTTONS
   ============================================ */

[data-theme="light"] .sticky button.bg-white\/5 {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #52525b !important;
}

[data-theme="light"] .sticky button.bg-white\/5:hover {
    background: #f8fafc !important;
    color: #18181b !important;
}

/* ============================================
   LINK/REFERENCE IN MODALS
   ============================================ */

[data-theme="light"] [id*="modal"] a.text-indigo-400,
[data-theme="light"] [id*="modal"] a.text-blue-400 {
    color: #4f46e5 !important;
}

[data-theme="light"] [id*="modal"] a.text-indigo-400:hover,
[data-theme="light"] [id*="modal"] a.text-blue-400:hover {
    color: #4338ca !important;
}

/* ============================================
   PILLS/CHIPS IN MODALS
   ============================================ */

[data-theme="light"] [id*="modal"] .pill,
[data-theme="light"] [id*="modal"] .chip {
    background: #f1f5f9 !important;
    color: #3f3f46 !important;
}


/* ============================================
   WIDGET REMOVE BUTTON (RED X)
   ============================================ */

[data-theme="light"] .widget-remove,
[data-theme="light"] .remove-widget,
[data-theme="light"] button[class*="bg-rose"],
[data-theme="light"] button[class*="bg-red"] {
    background: #fef2f2 !important;
    color: #ef4444 !important;
    border: 1px solid #fecaca !important;
}

[data-theme="light"] .widget-remove:hover,
[data-theme="light"] .remove-widget:hover,
[data-theme="light"] button[class*="bg-rose"]:hover,
[data-theme="light"] button[class*="bg-red"]:hover {
    background: #fecaca !important;
    color: #dc2626 !important;
}

/* ============================================
   ADDITIONAL MODAL FIXES
   ============================================ */

/* Ensure ALL modal content is white */
[data-theme="light"] [id^="modal-"] > div > div:not([class*="bg-black"]) {
    background: #ffffff !important;
}

/* Modal with relative positioning */
[data-theme="light"] [id^="modal-"] .relative.bg-\[\#16161d\],
[data-theme="light"] [id^="modal-"] .relative.bg-\[\#12121a\],
[data-theme="light"] [id^="modal-"] .relative[class*="bg-"] {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* ============================================
   FINAL CATCH-ALL FOR REMAINING ISSUES
   ============================================ */

/* Any remaining dark backgrounds in main content */
[data-theme="light"] main .bg-\[\#0a0a0c\],
[data-theme="light"] main .bg-\[\#08080a\],
[data-theme="light"] main .bg-\[\#0d0d10\] {
    background: #f8fafc !important;
}

/* Any card-like element should be white */
[data-theme="light"] [class*="rounded-2xl"][class*="p-4"]:not(.preserve-dark):not([class*="bg-gradient"]),
[data-theme="light"] [class*="rounded-2xl"][class*="p-5"]:not(.preserve-dark):not([class*="bg-gradient"]),
[data-theme="light"] [class*="rounded-2xl"][class*="p-6"]:not(.preserve-dark):not([class*="bg-gradient"]) {
    /* Only style if it looks like a card */
}

/* Ensure toggle switch works properly */
[data-theme="light"] .toggle-switch[data-active="true"],
[data-theme="light"] .toggle-switch[aria-checked="true"],
[data-theme="light"] .toggle-switch:has(input:checked) {
    background: #10b981 !important;
}

/* Fix any remaining text-white that should be dark */
[data-theme="light"] h1.text-white,
[data-theme="light"] h2.text-white,
[data-theme="light"] h3.text-white,
[data-theme="light"] h4.text-white {
    color: #18181b !important;
}

/* Fix label text in forms */
[data-theme="light"] .form-label,
[data-theme="light"] label[class*="text-gray"] {
    color: #3f3f46 !important;
}

/* Character counter in SEO */
[data-theme="light"] .char-count,
[data-theme="light"] [class*="znaków"] {
    color: #71717a !important;
}