/* ═══════════════════════════════════════════════════════════════════════════
   Arka – Light Theme Expansion
   ═══════════════════════════════════════════════════════════════════════════ */

body.light-theme {
    --bg: #f7f7f8;
    --fg: #111111;
    --fg-muted: #555555;
    --border: #e0e0e0;
    --border-light: #cccccc;
    --accent: #E52E2E;
    --accent-hover: #ff4444;
}

body.light-theme .bg-grid {
    background-image: radial-gradient(var(--border-light) 1px, transparent 1px);
    opacity: 0.6;
}

body.light-theme .sidebar {
    background: rgba(255, 255, 255, 0.9);
}

body.light-theme .toolbar,
body.light-theme .glass-btn {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: var(--fg) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme .toolbar:hover,
body.light-theme .glass-btn:hover {
    background: rgba(255, 255, 255, 0.6) !important;
}

body.light-theme input[type="text"],
body.light-theme textarea,
body.light-theme select {
    background: rgba(255, 255, 255, 0.9);
    color: var(--fg);
}

body.light-theme .mode-toggle {
    background: rgba(0, 0, 0, 0.05);
}

body.light-theme .prop-shape-btn.active {
    background: rgba(0, 0, 0, 0.08);
}

body.light-theme .prop-shape-btn:hover,
body.light-theme .prop-size-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

body.light-theme .prop-color-swatch:hover {
    border-color: #000;
}

body.light-theme .modal {
    background: var(--bg);
}

body.light-theme .modal-overlay {
    background: rgba(255, 255, 255, 0.8);
}

body.light-theme .icon-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

body.light-theme #app-theme-toggle {
    border: 1px solid var(--border-light) !important;
    background: rgba(0, 0, 0, 0.03) !important;
    color: var(--fg);
}

body.light-theme #app-theme-toggle:hover {
    border-color: #999 !important;
}

body.light-theme .generate-btn .spinner {
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-top-color: #000;
}

body.light-theme .dropdown-menu {
    background: var(--bg);
    border-color: var(--border-light);
}

body.light-theme .dropdown-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

body.light-theme .inline-editor input {
    background: rgba(255, 255, 255, 0.85) !important;
    color: #111 !important;
    border-color: #E52E2E !important;
    box-shadow: 0 0 10px rgba(229, 46, 46, 0.5) !important;
}

body.light-theme .dropdown-menu::-webkit-scrollbar-track {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-theme .dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

body.light-theme .dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
}

/* ── Light Theme: Profile Drawer Buttons Fix ────────────────────────── */
/* Ensure all profile dropdown buttons/links remain visible in light mode */
body.light-theme #profile-dropdown-wrapper .dropdown-item,
body.light-theme #profile-dropdown-wrapper a.dropdown-item {
    color: var(--fg) !important;
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: var(--border) !important;
}

body.light-theme #profile-dropdown-wrapper .dropdown-item:hover,
body.light-theme #profile-dropdown-wrapper a.dropdown-item:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: var(--fg) !important;
}

body.light-theme #profile-dropdown-wrapper .dropdown-item:active,
body.light-theme #profile-dropdown-wrapper a.dropdown-item:active {
    background: rgba(0, 0, 0, 0.12) !important;
    transform: scale(0.98);
}

/* Keep the logout button styled correctly */
body.light-theme #btn-logout,
body.light-theme #btn-logout span,
body.light-theme #btn-logout svg {
    color: #ff4d4d !important;
}

body.light-theme #btn-logout {
    border-color: rgba(255, 77, 77, 0.3) !important;
    background: rgba(255, 77, 77, 0.06) !important;
}

body.light-theme #btn-logout:hover {
    background: rgba(255, 77, 77, 0.12) !important;
}

/* User profile container in light theme */
body.light-theme #user-profile-container {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: var(--border) !important;
}

/* Signup Google button in light theme */
body.light-theme #btn-signup-google {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: var(--border) !important;
    color: var(--fg) !important;
}

body.light-theme #btn-signup-google:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* Theme toggle button text fix */
body.light-theme #theme-toggle-text {
    color: var(--fg) !important;
}

/* Toolbar in light theme */
body.light-theme .toolbar .icon-btn {
    color: var(--fg-muted);
}

body.light-theme .toolbar .icon-btn:hover {
    color: var(--fg);
    background: rgba(0, 0, 0, 0.06);
}

/* Sidebar toggle handled by .glass-btn styling above */

@media (max-width: 768px) {
    body.light-theme #profile-dropdown-wrapper .dropdown-menu {
        background: rgba(245, 245, 245, 0.98) !important;
        border-top-color: var(--border) !important;
    }

    /* Ensure mobile bottom-sheet items are fully visible */
    body.light-theme #profile-dropdown-wrapper .dropdown-menu .dropdown-item,
    body.light-theme #profile-dropdown-wrapper .dropdown-menu a.dropdown-item {
        color: var(--fg) !important;
        background: rgba(0, 0, 0, 0.03) !important;
        border-color: var(--border) !important;
    }

    body.light-theme #profile-dropdown-wrapper .dropdown-menu .dropdown-item:hover,
    body.light-theme #profile-dropdown-wrapper .dropdown-menu a.dropdown-item:hover {
        background: rgba(0, 0, 0, 0.07) !important;
    }

    body.light-theme #profile-dropdown-wrapper .dropdown-menu #btn-logout,
    body.light-theme #profile-dropdown-wrapper .dropdown-menu #btn-logout span,
    body.light-theme #profile-dropdown-wrapper .dropdown-menu #btn-logout svg {
        color: #ff4d4d !important;
    }

    body.light-theme #profile-dropdown-wrapper .dropdown-menu #btn-logout {
        background: rgba(255, 77, 77, 0.06) !important;
        border-color: rgba(255, 77, 77, 0.3) !important;
    }

    /* Mobile toolbar dropdown menus */
    body.light-theme .dropdown-wrapper .dropdown-menu {
        background: rgba(250, 250, 250, 0.98) !important;
        border-color: var(--border) !important;
    }

    /* Restore glass effect on mobile light theme for all buttons/trays */
    body.light-theme .toolbar,
    body.light-theme .glass-btn,
    body.light-theme .theme-download-tray .toolbar-btn,
    body.light-theme #btn-theme {
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        background: rgba(255, 255, 255, 0.4) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
    }

    body.light-theme .glass-btn:hover,
    body.light-theme .theme-download-tray .toolbar-btn:hover,
    body.light-theme #btn-theme:hover {
        background: rgba(255, 255, 255, 0.6) !important;
        border-color: rgba(0, 0, 0, 0.2) !important;
        color: var(--fg) !important;
    }

    body.light-theme .glass-btn:active,
    body.light-theme .theme-download-tray .toolbar-btn:active,
    body.light-theme #btn-theme:active {
        background: rgba(255, 255, 255, 0.8) !important;
        transform: scale(0.96) !important;
    }
}