/**
 * DeBands Theme CSS
 * Light and Dark mode custom properties and utilities
 */

/* ============================================
   CSS Custom Properties (Variables)
   ============================================ */

:root {
    /* Light Mode (default when no .dark class) */
    --bg-primary: #E8E8E8;
    --bg-secondary: #DEDEDE;
    --bg-tertiary: #D4D4D4;
    --bg-card: #F5F5F5;
    --bg-input: #FFFFFF;
    --bg-hover: #D4D4D4;
    --bg-active: #CACACA;

    --text-primary: #18181b;
    --text-secondary: #3f3f46;
    --text-tertiary: #52525b;
    --text-muted: #71717a;
    --text-inverse: #ffffff;

    --border-primary: #e4e4e7;
    --border-secondary: #d4d4d8;
    --border-focus: #3b82f6;

    --accent-primary: #eab308;
    --accent-secondary: #f59e0b;
    --accent-hover: #ca8a04;

    --success: #22c55e;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Overlay for modals */
    --overlay-bg: rgba(0, 0, 0, 0.5);
}

/* Dark Mode */
.dark {
    --bg-primary: #09090b;
    --bg-secondary: #18181b;
    --bg-tertiary: #27272a;
    --bg-card: #18181b;
    --bg-input: #27272a;
    --bg-hover: #27272a;
    --bg-active: #3f3f46;

    --text-primary: #fafafa;
    --text-secondary: #d4d4d8;
    --text-tertiary: #a1a1aa;
    --text-muted: #71717a;
    --text-inverse: #18181b;

    --border-primary: #27272a;
    --border-secondary: #3f3f46;
    --border-focus: #3b82f6;

    --accent-primary: #eab308;
    --accent-secondary: #f59e0b;
    --accent-hover: #facc15;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);

    --overlay-bg: rgba(0, 0, 0, 0.7);
}

/* ============================================
   Base Element Styles
   ============================================ */

html, body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Light mode gradient background with shadow glow */
:root:not(.dark) body {
    background:
        radial-gradient(ellipse at top, rgba(255, 255, 255, 1) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(200, 200, 210, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(180, 180, 195, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(180, 180, 195, 0.2) 0%, transparent 40%),
        linear-gradient(180deg, #FFFFFF 0%, #F0F0F2 50%, #E8E8EC 100%) !important;
    background-attachment: fixed !important;
}

/* ============================================
   Theme-Aware Utility Classes
   ============================================ */

/* Backgrounds */
.theme-bg-primary { background-color: var(--bg-primary) !important; }
.theme-bg-secondary { background-color: var(--bg-secondary) !important; }
.theme-bg-tertiary { background-color: var(--bg-tertiary) !important; }
.theme-bg-card { background-color: var(--bg-card) !important; }
.theme-bg-input { background-color: var(--bg-input) !important; }
.theme-bg-hover:hover { background-color: var(--bg-hover) !important; }

/* Text Colors */
.theme-text-primary { color: var(--text-primary) !important; }
.theme-text-secondary { color: var(--text-secondary) !important; }
.theme-text-tertiary { color: var(--text-tertiary) !important; }
.theme-text-muted { color: var(--text-muted) !important; }
.theme-text-inverse { color: var(--text-inverse) !important; }

/* Borders */
.theme-border { border-color: var(--border-primary) !important; }
.theme-border-secondary { border-color: var(--border-secondary) !important; }

/* Shadows */
.theme-shadow-sm { box-shadow: var(--shadow-sm) !important; }
.theme-shadow-md { box-shadow: var(--shadow-md) !important; }
.theme-shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* ============================================
   Component Overrides for Light Mode
   ============================================ */

/* Cards and containers */
:root:not(.dark) .bg-black {
    background-color: var(--bg-card) !important;
}

:root:not(.dark) .bg-zinc-900 {
    background-color: var(--bg-secondary) !important;
}

:root:not(.dark) .bg-zinc-800 {
    background-color: var(--bg-tertiary) !important;
}

:root:not(.dark) .bg-zinc-700 {
    background-color: #d4d4d8 !important;
}

/* Dark backgrounds in light mode */
:root:not(.dark) .bg-gray-900 {
    background-color: var(--bg-secondary) !important;
}

:root:not(.dark) .bg-gray-800 {
    background-color: var(--bg-tertiary) !important;
}

/* Semi-transparent backgrounds */
:root:not(.dark) .bg-black\/30,
:root:not(.dark) [class*="bg-black/30"] {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

:root:not(.dark) .bg-black\/50,
:root:not(.dark) [class*="bg-black/50"] {
    background-color: rgba(0, 0, 0, 0.08) !important;
}

:root:not(.dark) .bg-white\/5 {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

:root:not(.dark) .bg-white\/10 {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Semi-transparent zinc backgrounds for cards/containers */
:root:not(.dark) [class*="bg-zinc-800/30"],
:root:not(.dark) .bg-zinc-800\/30 {
    background-color: #FAFAFA !important; /* Off-white */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #E5E5E5 !important;
}

:root:not(.dark) [class*="bg-zinc-800/40"],
:root:not(.dark) .bg-zinc-800\/40 {
    background-color: #F5F5F5 !important; /* Slightly darker off-white */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #E5E5E5 !important;
}

:root:not(.dark) [class*="bg-zinc-800/50"],
:root:not(.dark) .bg-zinc-800\/50 {
    background-color: #F0F0F0 !important; /* Darker off-white */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #E5E5E5 !important;
}

/* Icon container backgrounds - transparent */
:root:not(.dark) [class*="bg-zinc-700/50"],
:root:not(.dark) .bg-zinc-700\/50 {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Badge icon backgrounds - transparent in light mode */
:root:not(.dark) [class*="bg-zinc-900/50"],
:root:not(.dark) .bg-zinc-900\/50 {
    background-color: transparent !important;
}

/* Text colors in light mode */
:root:not(.dark) .text-black {
    color: #000000 !important;
}

/* Ensure dark mode text-white overrides text-black */
.dark .dark\:text-white,
:root.dark .dark\:text-white {
    color: #ffffff !important;
}

/* Progress ring background in light mode */
:root:not(.dark) .progress-ring-bg {
    stroke: #D4D4D8 !important; /* Light zinc color */
}

:root:not(.dark) .text-white {
    color: var(--text-primary) !important;
}

:root:not(.dark) .text-gray-100 {
    color: var(--text-primary) !important;
}

:root:not(.dark) .text-gray-200 {
    color: var(--text-secondary) !important;
}

:root:not(.dark) .text-gray-300 {
    color: var(--text-secondary) !important;
}

:root:not(.dark) .text-gray-400 {
    color: var(--text-tertiary) !important;
}

:root:not(.dark) .text-gray-500 {
    color: var(--text-muted) !important;
}

:root:not(.dark) .text-zinc-400 {
    color: var(--text-tertiary) !important;
}

:root:not(.dark) .text-zinc-500 {
    color: var(--text-muted) !important;
}

/* Border colors in light mode */
:root:not(.dark) .border-gray-700 {
    border-color: var(--border-primary) !important;
}

:root:not(.dark) .border-gray-700\/50,
:root:not(.dark) [class*="border-gray-700/50"] {
    border-color: var(--border-primary) !important;
}

:root:not(.dark) .border-gray-600 {
    border-color: var(--border-secondary) !important;
}

:root:not(.dark) .border-zinc-700 {
    border-color: var(--border-primary) !important;
}

:root:not(.dark) .border-zinc-600 {
    border-color: var(--border-secondary) !important;
}

:root:not(.dark) .border-zinc-800 {
    border-color: #E5E5E5 !important;
}

:root:not(.dark) .border-white\/10 {
    border-color: var(--border-primary) !important;
}

:root:not(.dark) .border-zinc-900 {
    border-color: var(--bg-card) !important;
}

/* Ring colors */
:root:not(.dark) .ring-gray-700 {
    --tw-ring-color: var(--border-primary) !important;
}

/* Divide colors */
:root:not(.dark) .divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--border-primary) !important;
}

/* Form inputs */
:root:not(.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
:root:not(.dark) textarea,
:root:not(.dark) select {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-secondary) !important;
}

:root:not(.dark) input::placeholder,
:root:not(.dark) textarea::placeholder {
    color: var(--text-muted) !important;
}

/* Focus states in light mode */
:root:not(.dark) input:focus,
:root:not(.dark) textarea:focus,
:root:not(.dark) select:focus {
    border-color: var(--border-focus) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

/* Hover states */
:root:not(.dark) .hover\:bg-gray-800:hover {
    background-color: var(--bg-hover) !important;
}

:root:not(.dark) .hover\:bg-zinc-800:hover {
    background-color: var(--bg-hover) !important;
}

:root:not(.dark) .hover\:bg-zinc-700:hover {
    background-color: var(--bg-tertiary) !important;
}

:root:not(.dark) .hover\:bg-white\/10:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* ============================================
   Navigation-specific Overrides
   ============================================ */

:root:not(.dark) .profile-dropdown-menu {
    background-color: var(--bg-card) !important;
    border-color: var(--border-secondary) !important;
    box-shadow: var(--shadow-lg) !important;
}

:root:not(.dark) .profile-dropdown-menu .dropdown-item {
    color: var(--text-primary) !important;
}

:root:not(.dark) .profile-dropdown-menu .dropdown-item:hover {
    background-color: var(--bg-hover) !important;
}

:root:not(.dark) .profile-dropdown-menu .dropdown-divider {
    border-color: var(--border-primary) !important;
}

/* Nav dropdown items */
:root:not(.dark) .nav-dropdown-item {
    color: var(--text-secondary) !important;
}

:root:not(.dark) .nav-dropdown-item:hover {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   Modal Overrides
   ============================================ */

:root:not(.dark) .modal-content,
:root:not(.dark) [class*="modal"] > div {
    background-color: var(--bg-card) !important;
}

/* ============================================
   Table Overrides
   ============================================ */

:root:not(.dark) table th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

:root:not(.dark) table td {
    color: var(--text-primary) !important;
}

:root:not(.dark) table tr:hover {
    background-color: var(--bg-hover) !important;
}

/* ============================================
   Button Specific Overrides
   ============================================ */

/* Keep accent buttons as-is */
.bg-yellow-500, .bg-yellow-600, .bg-amber-500, .bg-amber-600 {
    /* Keep original colors */
}

/* Keep colored buttons */
.bg-blue-500, .bg-blue-600, .bg-green-500, .bg-green-600,
.bg-red-500, .bg-red-600, .bg-purple-500, .bg-purple-600,
.bg-cyan-500, .bg-cyan-600, .bg-teal-500, .bg-teal-600 {
    /* Keep original colors */
}

/* ============================================
   Scrollbar Styling
   ============================================ */

:root:not(.dark) ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

:root:not(.dark) ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

:root:not(.dark) ::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: 4px;
}

:root:not(.dark) ::-webkit-scrollbar-thumb:hover {
    background: #a1a1aa;
}

/* ============================================
   Theme Toggle Button
   ============================================ */

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.theme-toggle:hover {
    background-color: var(--bg-hover);
}

.theme-toggle .theme-icon-sun,
.theme-toggle .theme-icon-moon {
    font-size: 18px;
}

.theme-toggle .theme-icon-sun {
    color: #facc15;
}

.theme-toggle .theme-icon-moon {
    color: #a1a1aa;
}

/* ============================================
   Transition for Theme Changes
   ============================================ */

*, *::before, *::after {
    transition-property: background-color, border-color, color;
    transition-duration: 0.15s;
    transition-timing-function: ease-out;
}

/* Disable transitions on page load */
.no-transitions,
.no-transitions *,
.no-transitions *::before,
.no-transitions *::after {
    transition: none !important;
}