/* Dark Mode Styles - High Quality Slate Theme */

:root {
    /* Light mode colors (default) */
    --bg-primary: #f9fafb;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --text-primary: #2d3436;
    --text-secondary: #636e72;
    --text-tertiary: #b2bec3;
    --border-color: rgba(0, 0, 0, 0.05);
    --border-subtle: #f3f4f6;
    --shadow-color: rgba(0, 0, 0, 0.05);
    --shadow-hover: rgba(0, 0, 0, 0.1);
    --primary-color: #0984e3;
    --primary-hover: #0770c4;
}

[data-theme="dark"] {
    /* Dark mode colors - Slate Palette */
    /* Deep blue-gray backgrounds for reduced eye strain but high contrast */
    --bg-primary: #0f172a;
    /* Slate 900 */
    --bg-secondary: #1e293b;
    /* Slate 800 */
    --bg-card: #1e293b;
    /* Slate 800 */

    /* High contrast text */
    --text-primary: #ffffff;
    --text-secondary: #ffffff;
    --text-tertiary: #ffffff;

    /* Subtle but visible borders */
    --border-color: #334155;
    /* Slate 700 */
    --border-subtle: #1e293b;
    /* Slate 800 */

    /* Shadows */
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-hover: rgba(0, 0, 0, 0.5);

    /* Primary Color - Adjusted for dark mode visibility */
    --primary-color: #38bdf8;
    /* Sky 400 - Bright and legible */
    --primary-hover: #0ea5e9;
    /* Sky 500 */
}

/* Apply theme colors */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Header */
header {
    background-color: rgba(255, 255, 255, 0.9);
    transition: background-color 0.3s ease;
}

[data-theme="dark"] header {
    background-color: rgba(15, 23, 42, 0.9);
    /* Translucent Slate 900 */
    border-bottom: 1px solid var(--border-color);
}

/* Cards and containers */
.bg-white {
    background-color: var(--bg-card) !important;
    transition: background-color 0.3s ease;
}

.bg-gray-50 {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .bg-gray-100 {
    background-color: #334155 !important;
    /* Slate 700 */
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .bg-gray-200 {
    background-color: #475569 !important;
    /* Slate 600 */
    border: 1px solid var(--border-color) !important;
}

/* Text colors - Enforce white */
[data-theme="dark"] .text-\[\#2d3436\],
[data-theme="dark"] .text-\[\#636e72\],
[data-theme="dark"] .text-\[\#b2bec3\],
[data-theme="dark"] p,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] li,
[data-theme="dark"] span:not(.text-primary),
[data-theme="dark"] div:not(.text-primary) {
    color: var(--text-primary) !important;
}

/* Borders */
[data-theme="dark"] .border-black\/\[0\.02\],
[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200 {
    border-color: var(--border-color) !important;
}

/* Shadows */
[data-theme="dark"] .shadow-\[0_10px_30px_rgba\(0\,0\,0\,0\.05\)],
[data-theme="dark"] .shadow-\[0_5px_15px_rgba\(0\,0\,0\,0\.1\)] {
    box-shadow: 0 10px 30px var(--shadow-color) !important;
}

[data-theme="dark"] .hover\:shadow-\[0_20px_40px_rgba\(0\,0\,0\,0\.1\)\]:hover,
[data-theme="dark"] .hover\:shadow-\[0_8px_20px_rgba\(0\,0\,0\,0\.15\)\]:hover {
    box-shadow: 0 20px 40px var(--shadow-hover) !important;
}

/* Primary color elements */
[data-theme="dark"] .bg-primary {
    background-color: var(--primary-color) !important;
    color: #0f172a !important;
    /* Dark text on bright button for contrast */
}

[data-theme="dark"] .text-primary {
    color: var(--primary-color) !important;
}

[data-theme="dark"] .border-primary {
    border-color: var(--primary-color) !important;
}

/* Input fields */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: #1e293b;
    /* Slate 800 */
    color: var(--text-primary);
    border-color: var(--border-color);
    border-width: 1px;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-tertiary);
}

/* Footer */
[data-theme="dark"] footer {
    color: var(--text-tertiary);
}

/* =========================================
   Image Handling (Logos & Icons)
   ========================================= */

/* Default behavior: Invert dark logos to white */
[data-theme="dark"] img[src*="logo"],
[data-theme="dark"] img[src*="icon"],
[data-theme="dark"] .logo,
[data-theme="dark"] .icon,
[data-theme="dark"] svg {
    filter: brightness(0) invert(1) !important;
}

/* EXCEPTION: Do NOT invert images that have been swapped via JS (Tonoko/UNICEF) */
[data-theme="dark"] img.no-invert {
    filter: none !important;
}

/* EXCEPTION: Experience/Testimonial logos that need transparency */
/* If they are NOT the swapped images, we apply the transparency filter */
[data-theme="dark"] #competences-experiences img:not(.no-invert),
[data-theme="dark"] #testimonials img:not(.no-invert),
[data-theme="dark"] .logo-container img:not(.no-invert) {
    filter: invert(1) grayscale(100%) brightness(2) !important;
    mix-blend-mode: screen;
}

/* Fix for Canva Logo - Invert colors as requested */
[data-theme="dark"] img[src*="canva"] {
    filter: invert(1) !important;
    mix-blend-mode: normal !important;
}

/* FontAwesome Icons - Make white */
[data-theme="dark"] i.fas,
[data-theme="dark"] i.fab,
[data-theme="dark"] i.far {
    color: var(--text-primary) !important;
}

/* Primary colored icons should use the new primary color */
[data-theme="dark"] .text-primary i {
    color: var(--primary-color) !important;
}

/* =========================================
   Component Specifics
   ========================================= */

/* Buttons */
[data-theme="dark"] button:not(.bg-primary),
[data-theme="dark"] .btn:not(.bg-primary),
[data-theme="dark"] a.button:not(.bg-primary) {
    background-color: var(--bg-card);
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Primary Buttons */
[data-theme="dark"] button.bg-primary,
[data-theme="dark"] a.bg-primary {
    background-color: var(--primary-color) !important;
    color: #0f172a !important;
    /* Dark text for contrast against bright blue */
}

[data-theme="dark"] button.bg-primary i,
[data-theme="dark"] a.bg-primary i {
    color: #0f172a !important;
}

/* Title Separators */
[data-theme="dark"] h2::after {
    background-color: var(--primary-color) !important;
}

/* Scroll Down Button */
[data-theme="dark"] #scroll-down-btn i,
[data-theme="dark"] #scroll-down-btn-2 i {
    color: var(--primary-color) !important;
}

/* =========================================
   Chat Widget
   ========================================= */

[data-theme="dark"] #chatWidgetWindow {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] #chatWidgetWindow h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] #chatWidgetWindow p {
    color: var(--text-secondary) !important;
}

/* Chat Header Gradient */
[data-theme="dark"] #chatWidgetWindow>div:first-child {
    background: linear-gradient(135deg, #0984e3 0%, #0770c4 100%) !important;
    border-bottom: none;
}

[data-theme="dark"] #chatWidgetWindow>div:first-child div {
    color: #ffffff !important;
}

/* Floating Chat Button */
[data-theme="dark"] #chatWidgetBtn {
    background: linear-gradient(135deg, #0984e3 0%, #0770c4 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

/* Chat Input Area */
[data-theme="dark"] #messagesArea,
[data-theme="dark"] #staffMessagesArea {
    background-color: var(--bg-primary) !important;
}

/* =========================================
   Staff Dashboard
   ========================================= */

/* Staff Sent Messages (Bubbles) */
[data-theme="dark"] .message.staff-message,
[data-theme="dark"] .message.sent {
    color: #000000 !important;
    /* Keep black text for sent bubbles if they remain light */
}

/* Close Ticket Modal */
[data-theme="dark"] #closeTicketStaffModal .bg-white {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color);
}

/* Fix 'OR' separator background in modal */
[data-theme="dark"] #closeTicketStaffModal span.bg-white {
    background-color: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    border: none !important;
    /* Remove border to avoid 'box' look */
}

/* Fix Cross Icon Background */
[data-theme="dark"] #closeTicketStaffModal .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.1) !important;
    /* Dark transparent red */
}

/* Modal Buttons - Make them round and visible */
[data-theme="dark"] #confirmStaffCloseBtn,
[data-theme="dark"] #confirmStaffCloseReasonBtn,
[data-theme="dark"] #cancelStaffCloseBtn,
[data-theme="dark"] #logoutBtn {
    border-radius: 9999px !important;
    /* rounded-full */
}

[data-theme="dark"] #confirmStaffCloseBtn {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] #cancelStaffCloseBtn {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] #cancelStaffCloseBtn:hover {
    color: var(--text-primary) !important;
}

/* =========================================
   Games
   ========================================= */

/* Tic Tac Toe */
[data-theme="dark"] .cell {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color);
}

[data-theme="dark"] .cell.x {
    color: var(--primary-color) !important;
}

[data-theme="dark"] .cell.o {
    color: #f87171 !important;
    /* Red-400 for O */
}

[data-theme="dark"] .cell.winning {
    background-color: var(--primary-color) !important;
    color: #0f172a !important;
}

/* Snake Canvas */
[data-theme="dark"] canvas {
    /* Invert colors slightly to make game visible but dark-themed */
    filter: invert(0.9) hue-rotate(180deg);
}

/* =========================================
   Toggle Animation (Sunset/Sunrise)
   ========================================= */

@keyframes sunset {
    0% {
        transform: rotate(0deg) translateY(0);
        opacity: 1;
    }

    50% {
        transform: rotate(90deg) translateY(20px);
        opacity: 0;
    }

    51% {
        transform: rotate(-90deg) translateY(20px);
        opacity: 0;
    }

    100% {
        transform: rotate(0deg) translateY(0);
        opacity: 1;
    }
}

@keyframes sunrise {
    0% {
        transform: rotate(0deg) translateY(0);
        opacity: 1;
    }

    50% {
        transform: rotate(-90deg) translateY(20px);
        opacity: 0;
    }

    51% {
        transform: rotate(90deg) translateY(20px);
        opacity: 0;
    }

    100% {
        transform: rotate(0deg) translateY(0);
        opacity: 1;
    }
}

.animate-sunset {
    animation: sunset 0.6s ease-in-out forwards;
}

.animate-sunrise {
    animation: sunrise 0.6s ease-in-out forwards;
}

/* Ensure the button itself has overflow hidden so the icon 'sets' out of view */
#darkModeToggle {
    overflow: hidden;
    position: relative;
}

/* Explicitly force the toggle icon to be white in dark mode */
[data-theme="dark"] #darkModeToggle i {
    color: #ffffff !important;
}