/* Theme CSS Variables */
:root {
    /* Dark Theme (default) */
    --bg-primary: #000000;
    --bg-secondary: #030712;
    --bg-card: #030712;
    --bg-card-hover: #111827;
    --bg-input: #111827;
    --bg-nav: rgba(0, 0, 0, 0.8);
    --bg-accent: rgba(255, 0, 64, 0.2);
    --bg-accent-hover: rgba(255, 0, 64, 0.3);

    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --text-accent: #ff0040;
    --text-accent-hover: #f87171;

    --border-primary: rgba(127, 29, 29, 0.3);
    --border-secondary: #1f2937;
    --border-accent: #ff0040;

    --neon-color: #ff0040;
    --neon-shadow: 0 0 5px #ff0040, 0 0 10px #ff0040;
    --neon-text-shadow: 0 0 5px #ff0040, 0 0 10px #ff0040, 0 0 20px #ff0040;

    --card-shadow: none;
    --card-hover-shadow: 0 0 15px rgba(255, 0, 64, 0.38), 0 0 30px rgba(255, 0, 64, 0.19);

    --grid-line-color: rgba(255, 0, 64, 0.03);
    --gradient-line-color: rgba(255, 0, 64, 0.1);

    --btn-primary-bg: #dc2626;
    --btn-primary-hover: #b91c1c;
    --btn-primary-text: #ffffff;

    --badge-bg: rgba(255, 0, 64, 0.2);
    --badge-text: #f87171;

    --success-bg: rgba(6, 78, 59, 0.3);
    --success-border: rgba(34, 197, 94, 0.5);
    --success-text: #4ade80;

    --error-bg: rgba(127, 29, 29, 0.3);
    --error-border: rgba(239, 68, 68, 0.5);
    --error-text: #f87171;

    --sidebar-bg: #030712;
    --sidebar-menu-hover: linear-gradient(90deg, rgba(255, 0, 64, 0.2) 0%, transparent 100%);
    --sidebar-menu-active: linear-gradient(90deg, rgba(255, 0, 64, 0.3) 0%, transparent 100%);
}

[data-theme="light"] {
    /* Light Theme */
    --bg-primary: #ffffff;
    --bg-secondary: #f9f9f9;
    --bg-card: #ffffff;
    --bg-card-hover: #f5f0ed;
    --bg-input: #f9f9f9;
    --bg-nav: rgba(255, 255, 255, 0.9);
    --bg-accent: rgba(92, 21, 37, 0.1);
    --bg-accent-hover: rgba(92, 21, 37, 0.15);

    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-muted: #7a7a7a;
    --text-accent: #5c1525;
    --text-accent-hover: #7a1d33;

    --border-primary: #ccb5a7;
    --border-secondary: #e5e5e5;
    --border-accent: #5c1525;

    --neon-color: #5c1525;
    --neon-shadow: 0 0 5px rgba(92, 21, 37, 0.3), 0 0 10px rgba(92, 21, 37, 0.2);
    --neon-text-shadow: 0 0 5px rgba(92, 21, 37, 0.3), 0 0 10px rgba(92, 21, 37, 0.2);

    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --card-hover-shadow: 0 4px 12px rgba(92, 21, 37, 0.15), 0 2px 6px rgba(92, 21, 37, 0.1);

    --grid-line-color: rgba(204, 181, 167, 0.15);
    --gradient-line-color: rgba(92, 21, 37, 0.1);

    --btn-primary-bg: #5c1525;
    --btn-primary-hover: #7a1d33;
    --btn-primary-text: #ffffff;

    --badge-bg: rgba(92, 21, 37, 0.1);
    --badge-text: #5c1525;

    --success-bg: rgba(220, 252, 231, 1);
    --success-border: rgba(34, 197, 94, 0.5);
    --success-text: #166534;

    --error-bg: rgba(254, 226, 226, 1);
    --error-border: rgba(239, 68, 68, 0.5);
    --error-text: #991b1b;

    --sidebar-bg: #ffffff;
    --sidebar-menu-hover: linear-gradient(90deg, rgba(92, 21, 37, 0.08) 0%, transparent 100%);
    --sidebar-menu-active: linear-gradient(90deg, rgba(92, 21, 37, 0.12) 0%, transparent 100%);
}

/* Base styles using variables */
body.themed {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

body.themed .bg-grid {
    background-image: linear-gradient(var(--grid-line-color) 1px, transparent 1px),
                      linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Theme Switcher Button */
.theme-switcher {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid var(--border-secondary);
    background: var(--bg-secondary);
    transition: all 0.3s ease;
}

.theme-switcher:hover {
    border-color: var(--border-accent);
}

.theme-switcher .theme-icon {
    width: 1rem;
    height: 1rem;
    transition: transform 0.3s ease;
}

.theme-switcher .sun-icon {
    display: none;
}

.theme-switcher .moon-icon {
    display: block;
}

[data-theme="light"] .theme-switcher .sun-icon {
    display: block;
}

[data-theme="light"] .theme-switcher .moon-icon {
    display: none;
}

.theme-switcher-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ===== Light Theme Overrides for Tailwind utility classes ===== */
/* These override hardcoded Tailwind classes used in admin pages */

[data-theme="light"] .bg-black {
    background-color: #ffffff !important;
}

[data-theme="light"] .bg-gray-950 {
    background-color: #f9f9f9 !important;
}

[data-theme="light"] .bg-gray-900 {
    background-color: #ffffff !important;
}

[data-theme="light"] .bg-gray-800 {
    background-color: #f5f5f5 !important;
}

[data-theme="light"] .bg-gray-700 {
    background-color: #e5e5e5 !important;
}

[data-theme="light"] .bg-gray-950\/80 {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="light"] .text-white {
    color: #1a1a1a !important;
}

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

[data-theme="light"] .text-gray-400 {
    color: #5a5a5a !important;
}

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

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

[data-theme="light"] .text-red-400 {
    color: #5c1525 !important;
}

[data-theme="light"] .text-red-500 {
    color: #5c1525 !important;
}

[data-theme="light"] .text-red-300 {
    color: #7a1d33 !important;
}

[data-theme="light"] .text-blue-400 {
    color: #2563eb !important;
}

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

[data-theme="light"] .text-green-400 {
    color: #166534 !important;
}

[data-theme="light"] .border-red-900\/30 {
    border-color: #ccb5a7 !important;
}

[data-theme="light"] .border-red-500\/30 {
    border-color: #ccb5a7 !important;
}

[data-theme="light"] .border-red-500\/50 {
    border-color: #ccb5a7 !important;
}

[data-theme="light"] .border-gray-800 {
    border-color: #e5e5e5 !important;
}

[data-theme="light"] .border-gray-700 {
    border-color: #ccb5a7 !important;
}

[data-theme="light"] .bg-red-600 {
    background-color: #5c1525 !important;
}

[data-theme="light"] .bg-red-600:hover,
[data-theme="light"] .hover\:bg-red-700:hover {
    background-color: #7a1d33 !important;
}

[data-theme="light"] .bg-red-500\/20 {
    background-color: rgba(92, 21, 37, 0.1) !important;
}

[data-theme="light"] .bg-red-500\/5 {
    background-color: rgba(92, 21, 37, 0.03) !important;
}

[data-theme="light"] .bg-red-600\/20 {
    background-color: rgba(92, 21, 37, 0.1) !important;
}

[data-theme="light"] .hover\:bg-red-600\/40:hover {
    background-color: rgba(92, 21, 37, 0.15) !important;
}

[data-theme="light"] .bg-green-500\/20 {
    background-color: rgba(220, 252, 231, 1) !important;
}

[data-theme="light"] .bg-green-900\/30 {
    background-color: rgba(220, 252, 231, 1) !important;
}

[data-theme="light"] .border-green-500\/50 {
    border-color: rgba(34, 197, 94, 0.5) !important;
}

[data-theme="light"] .bg-red-900\/30 {
    background-color: rgba(254, 226, 226, 1) !important;
}

[data-theme="light"] .bg-gray-700\/50 {
    background-color: #e5e5e5 !important;
}

[data-theme="light"] .hover\:bg-gray-600:hover {
    background-color: #d4d4d4 !important;
}

[data-theme="light"] .hover\:border-red-500\/50:hover {
    border-color: #5c1525 !important;
}

[data-theme="light"] .hover\:shadow-red-500\/10:hover {
    --tw-shadow-color: rgba(92, 21, 37, 0.1) !important;
}

[data-theme="light"] .hover\:shadow-red-500\/20:hover {
    --tw-shadow-color: rgba(92, 21, 37, 0.15) !important;
}

[data-theme="light"] .hover\:shadow-red-500\/30:hover {
    --tw-shadow-color: rgba(92, 21, 37, 0.2) !important;
}

[data-theme="light"] .hover\:text-red-400:hover {
    color: #5c1525 !important;
}

[data-theme="light"] .hover\:text-red-500:hover {
    color: #5c1525 !important;
}

[data-theme="light"] .hover\:text-red-300:hover {
    color: #7a1d33 !important;
}

[data-theme="light"] .hover\:text-blue-300:hover {
    color: #3b82f6 !important;
}

[data-theme="light"] .focus\:border-red-500:focus {
    border-color: #5c1525 !important;
}

[data-theme="light"] .focus\:ring-red-500:focus {
    --tw-ring-color: #5c1525 !important;
}

[data-theme="light"] .file\:bg-red-600::file-selector-button {
    background-color: #5c1525 !important;
}

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

/* Scrollbar styling for light theme */
[data-theme="light"] ::-webkit-scrollbar {
    width: 8px;
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: #f5f5f5;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #ccb5a7;
    border-radius: 4px;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #b5b5b5;
}

/* Tab styling for settings page */
[data-theme="light"] .border-red-500 {
    border-color: #5c1525 !important;
}

[data-theme="light"] .border-transparent {
    border-color: transparent !important;
}

/* Ensure button text stays white in light theme */
[data-theme="light"] .bg-red-600.text-white,
[data-theme="light"] button[type="submit"].text-white,
[data-theme="light"] a.bg-red-600.text-white,
[data-theme="light"] .bg-gray-700.text-white,
[data-theme="light"] a.bg-gray-700.text-white {
    color: #ffffff !important;
}

/* Select elements */
[data-theme="light"] select {
    background-color: #f5f5f5 !important;
    color: #1a1a1a !important;
}

/* File input button text */
[data-theme="light"] .file\:text-white::file-selector-button {
    color: #ffffff !important;
}

/* Card shadow for admin cards in light theme */
[data-theme="light"] .bg-gray-900.border {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Badge/tag text that should stay white */
[data-theme="light"] .bg-red-500.text-white,
[data-theme="light"] span.bg-red-500 {
    color: #ffffff !important;
}

/* Ensure text on colored backgrounds stays white */
[data-theme="light"] [style*="background-color: var(--btn-primary-bg)"] {
    color: #ffffff !important;
}

[data-theme="light"] [style*="background-color: var(--btn-primary-bg)"] span {
    color: #ffffff !important;
}