/**
 * Client Area Theme – čisto crna/bela (ElevenLabs stil)
 * Bez žute, bez obojenih akcenta. Samo siva za highlight, narandžasta za upozorenja.
 */

/* Body – tema pozadina */
body {
    background-color: var(--content-bg) !important;
}

[data-theme="dark"] body {
    background-color: #0a0a0a !important;
}
@media (prefers-color-scheme: dark) {
    [data-theme="system"] body {
        background-color: #0a0a0a !important;
    }
}

/* ========== SEMANTIČKE BOJE – samo upozorenja ========== */
:root, [data-theme="light"], [data-theme="dark"], [data-theme="system"] {
    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.12);
    --warning: #f97316;
    --warning-bg: rgba(249, 115, 22, 0.12);
    --error: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.12);
}

/* ========== SVETLA TEMA – čisto bela ========== */
[data-theme="light"] {
    --sidebar-bg: #ffffff;
    --sidebar-border: #e5e7eb;
    --sidebar-text: #171717;
    --sidebar-text-muted: #6b7280;
    --sidebar-hover: #f5f5f5;
    --sidebar-active: #e5e7eb;
    --header-bg: #ffffff;
    --header-border: #e5e7eb;
    --header-text: #171717;
    --header-hover: #f5f5f5;
    --accent: #404040;
    --accent-hover: #262626;
    --content-bg: #ffffff;
    --card-bg: #ffffff;
}

/* ========== TAMNA TEMA – čisto crna ========== */
[data-theme="dark"] {
    --sidebar-bg: #0a0a0a;
    --sidebar-border: #262626;
    --sidebar-text: #fafafa;
    --sidebar-text-muted: #a3a3a3;
    --sidebar-hover: #171717;
    --sidebar-active: #262626;
    --header-bg: #0a0a0a;
    --header-border: #262626;
    --header-text: #fafafa;
    --header-hover: #171717;
    --accent: #525252;
    --accent-hover: #737373;
    --content-bg: #0a0a0a;
    --card-bg: #171717;
}

/* System */
@media (prefers-color-scheme: dark) {
    [data-theme="system"] {
        --sidebar-bg: #0a0a0a;
        --sidebar-border: #262626;
        --sidebar-text: #fafafa;
        --sidebar-text-muted: #a3a3a3;
        --sidebar-hover: #171717;
        --sidebar-active: #262626;
        --header-bg: #0a0a0a;
        --header-border: #262626;
        --header-text: #fafafa;
        --header-hover: #171717;
        --accent: #525252;
        --accent-hover: #737373;
        --content-bg: #0a0a0a;
        --card-bg: #171717;
    }
}
@media (prefers-color-scheme: light) {
    [data-theme="system"] {
        --sidebar-bg: #ffffff;
        --sidebar-border: #e5e7eb;
        --sidebar-text: #171717;
        --sidebar-text-muted: #6b7280;
        --sidebar-hover: #f5f5f5;
        --sidebar-active: #e5e7eb;
        --header-bg: #ffffff;
        --header-border: #e5e7eb;
        --header-text: #171717;
        --header-hover: #f5f5f5;
        --accent: #404040;
        --accent-hover: #262626;
        --content-bg: #ffffff;
        --card-bg: #ffffff;
    }
}

/* Dugmad – siva (svetla tema: tamno siva, tamna tema: svetlo siva) */
body .bg-purple-600, body .bg-purple-500, body .bg-indigo-600, body .bg-indigo-500,
body button.bg-purple-600, body button.bg-purple-500, body button.bg-indigo-600, body button.bg-indigo-500,
body a.bg-purple-600, body a.bg-purple-500, body a.bg-indigo-600, body a.bg-indigo-500 {
    background-color: var(--accent) !important;
    color: var(--card-bg) !important;
}
body .hover\:bg-indigo-700:hover, body .hover\:bg-indigo-600:hover,
body .hover\:bg-purple-700:hover, body .hover\:bg-purple-600:hover {
    background-color: var(--accent-hover) !important;
}
body .text-purple-600, body .text-purple-700, body .text-purple-800,
body .text-purple-900, body a.text-purple-600 {
    color: var(--accent) !important;
}
body .border-purple-500, body .border-purple-200,
body .focus\:border-purple-500:focus, body .focus\:ring-purple-500:focus,
body .border-l-4.border-purple-500 {
    border-color: var(--accent) !important;
}
body .focus\:ring-purple-500:focus {
    --tw-ring-color: var(--accent);
}
body .bg-purple-50, body .bg-purple-100 {
    background-color: var(--sidebar-hover) !important;
}
body .border-purple-200 { border-color: var(--sidebar-border) !important; }

/* Narandžasta – ostaje za upozorenja */
body .bg-\[#F59E0B\], body .bg-\[#F97316\] {
    background-color: var(--warning) !important;
    color: white !important;
}

/* Inline žuta – override na sivu */
body button[style*="ffd85f"], body a[style*="ffd85f"] {
    background-color: var(--accent) !important;
    color: var(--card-bg) !important;
}

/* Toggle – teal #0d9488 kad uključen */
.peer:checked ~ .peer-checked\:bg-amber-500,
.peer:checked ~ .peer-checked\:bg-indigo-500,
.peer:checked ~ .peer-checked\:bg-indigo-600 {
    background-color: #0d9488 !important;
}
.peer:focus ~ .peer-focus\:ring-amber-300,
.peer:focus ~ .peer-focus\:ring-indigo-300 {
    --tw-ring-color: rgba(13, 148, 136, 0.5);
}

/* Gradijenti – siva */
body .from-purple-50, body .to-purple-100 {
    --tw-gradient-from: var(--sidebar-hover);
    --tw-gradient-to: var(--sidebar-active);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
body .from-purple-600, body .to-indigo-600 {
    background: linear-gradient(to right, var(--accent), var(--accent-hover)) !important;
}

/* ========== TAMNA TEMA – karte ========== */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100 {
    background-color: var(--card-bg) !important;
}
[data-theme="dark"] .bg-blue-50,
[data-theme="dark"] .bg-purple-50,
[data-theme="dark"] .bg-indigo-50,
[data-theme="dark"] .bg-pink-50 {
    background-color: var(--sidebar-hover) !important;
}
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300,
[data-theme="dark"] .border-purple-200,
[data-theme="dark"] .border-blue-200,
[data-theme="dark"] .border-green-200,
[data-theme="dark"] .border-orange-200 {
    border-color: var(--sidebar-border) !important;
}
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700 {
    color: var(--sidebar-text) !important;
}
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500 {
    color: var(--sidebar-text-muted) !important;
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--sidebar-hover) !important;
    color: var(--sidebar-text) !important;
    border-color: var(--sidebar-border) !important;
}
[data-theme="dark"] .hover\:bg-gray-50:hover,
[data-theme="dark"] .hover\:bg-gray-100:hover {
    background-color: var(--sidebar-hover) !important;
}
[data-theme="dark"] .border-l-4.border-purple-500,
[data-theme="dark"] .border-l-4.border-blue-500 {
    border-color: var(--accent) !important;
}
[data-theme="dark"] .border-l-4.border-green-500 { border-color: var(--success) !important; }
[data-theme="dark"] .border-l-4.border-orange-500 { border-color: var(--warning) !important; }
[data-theme="dark"] .bg-green-50 { background-color: var(--success-bg) !important; }
[data-theme="dark"] .bg-orange-50 { background-color: var(--warning-bg) !important; }
[data-theme="dark"] .bg-yellow-50 { background-color: var(--warning-bg) !important; }
[data-theme="dark"] .bg-red-50 { background-color: var(--error-bg) !important; }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--sidebar-text-muted) !important;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    background-color: var(--sidebar-active) !important;
    border-color: var(--accent) !important;
}

/* System dark */
@media (prefers-color-scheme: dark) {
    [data-theme="system"] .bg-white,
    [data-theme="system"] .bg-gray-50,
    [data-theme="system"] .bg-gray-100 {
        background-color: var(--card-bg) !important;
    }
    [data-theme="system"] .bg-purple-50,
    [data-theme="system"] .bg-indigo-50 {
        background-color: var(--sidebar-hover) !important;
    }
    [data-theme="system"] .border-gray-200,
    [data-theme="system"] .border-gray-300,
    [data-theme="system"] .border-purple-200 {
        border-color: var(--sidebar-border) !important;
    }
    [data-theme="system"] .text-gray-900,
    [data-theme="system"] .text-gray-800,
    [data-theme="system"] .text-gray-700 {
        color: var(--sidebar-text) !important;
    }
    [data-theme="system"] .text-gray-600,
    [data-theme="system"] .text-gray-500 {
        color: var(--sidebar-text-muted) !important;
    }
    [data-theme="system"] input,
    [data-theme="system"] select,
    [data-theme="system"] textarea {
        background-color: var(--sidebar-hover) !important;
        color: var(--sidebar-text) !important;
        border-color: var(--sidebar-border) !important;
    }
    [data-theme="system"] input::placeholder,
    [data-theme="system"] textarea::placeholder {
        color: var(--sidebar-text-muted) !important;
    }
    [data-theme="system"] input:focus,
    [data-theme="system"] select:focus,
    [data-theme="system"] textarea:focus {
        background-color: var(--sidebar-active) !important;
        border-color: var(--accent) !important;
    }
    [data-theme="system"] .bg-green-50 { background-color: var(--success-bg) !important; }
    [data-theme="system"] .bg-orange-50 { background-color: var(--warning-bg) !important; }
    [data-theme="system"] .bg-yellow-50 { background-color: var(--warning-bg) !important; }
}

/* Sidebar – aktivni tab svetlo siva (ne obojena) */
#sidebar .nav-link {
    color: var(--sidebar-text);
}
#sidebar .nav-link:hover {
    background-color: var(--sidebar-hover);
    color: var(--sidebar-text);
}
#sidebar .nav-link.sidebar-active {
    background-color: var(--sidebar-active) !important;
    color: var(--sidebar-text) !important;
    border-radius: 0.5rem;
}
#sidebar .nav-link.sidebar-active .sidebar-icon,
#sidebar .nav-link.sidebar-active .sidebar-text {
    color: var(--sidebar-text) !important;
}

/* Fallback */
:root:not([data-theme]) {
    --sidebar-bg: #ffffff;
    --sidebar-border: #e5e7eb;
    --sidebar-text: #171717;
    --sidebar-text-muted: #6b7280;
    --sidebar-hover: #f5f5f5;
    --sidebar-active: #e5e7eb;
    --header-bg: #ffffff;
    --header-border: #e5e7eb;
    --header-text: #171717;
    --header-hover: #f5f5f5;
    --accent: #404040;
    --accent-hover: #262626;
    --content-bg: #ffffff;
    --card-bg: #ffffff;
}