/* Darkmode Styles for Jombang Business Directory */

/* Dark mode variables */
:root {
    --dark-bg: #121212;
    --dark-surface: #1e1e1e;
    --dark-primary: #90caf9;
    --dark-secondary: #ce93d8;
    --dark-error: #f44336;
    --dark-text-primary: rgba(255, 255, 255, 0.87);
    --dark-text-secondary: rgba(255, 255, 255, 0.6);
    --dark-border: #2d2d2d;
    --dark-divider: rgba(255, 255, 255, 0.12);
    --light-bg: #ffffff;
    --light-surface: #f8f9fa;
    --light-primary: #0d6efd;
    --light-text-primary: rgba(0, 0, 0, 0.87);
    --light-text-secondary: rgba(0, 0, 0, 0.6);
}

/* Dark Mode Styling */
body.dark-mode {
    background-color: var(--dark-bg);
    color: var(--dark-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

    /* Navbar Dark Mode */
    body.dark-mode .navbar-dark {
        background-color: #000 !important;
    }

    body.dark-mode .navbar-nav .nav-link {
        color: var(--dark-text-primary);
    }

    /* Hero Section Dark Mode */
    body.dark-mode .hero {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/static/img/bg.jpg");
        background-size: cover;
        background-position: center;
        color: white;
        padding: 100px 0;
        margin-bottom: 30px;
    }

    /* Info Boxes Dark Mode */
    body.dark-mode .info-box {
        background-color: var(--dark-surface);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    /* Search Section Dark Mode */
    body.dark-mode .search-section {
        background-color: var(--dark-surface);
    }

    body.dark-mode .form-control {
        background-color: #2d2d2d;
        border-color: var(--dark-border);
        color: var(--dark-text-primary);
    }

        body.dark-mode .form-control::placeholder {
            color: var(--dark-text-secondary);
        }

    body.dark-mode .btn-outline-secondary {
        color: var(--dark-text-primary);
        border-color: var(--dark-border);
    }

        body.dark-mode .btn-outline-secondary:hover,
        body.dark-mode .btn-outline-secondary.active {
            background-color: var(--dark-primary);
            color: #000;
            border-color: var(--dark-primary);
        }

    /* Business Slider Dark Mode */
    body.dark-mode .business-showcase {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    }

    body.dark-mode .slider-arrow {
        background-color: rgba(30, 30, 30, 0.9);
        color: var(--dark-text-primary);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    }

        body.dark-mode .slider-arrow:hover {
            background-color: rgba(50, 50, 50, 0.9);
        }

    body.dark-mode .indicator-dot {
        background-color: #444;
    }

        body.dark-mode .indicator-dot.active {
            background-color: var(--dark-primary);
        }

    /* Card Dark Mode */
    body.dark-mode .card {
        background-color: var(--dark-surface);
        border-color: var(--dark-border);
    }

    body.dark-mode .card-header {
        background-color: rgba(0, 0, 0, 0.2);
        border-color: var(--dark-border);
    }

    body.dark-mode .card-body {
        color: var(--dark-text-primary);
    }

    /* Modal Dark Mode */
    body.dark-mode .modal-content {
        background-color: var(--dark-surface);
        border-color: var(--dark-border);
    }

    body.dark-mode .modal-header {
        border-color: var(--dark-border);
    }

    body.dark-mode .modal-footer {
        border-color: var(--dark-border);
    }

    body.dark-mode .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    /* Chatbot Dark Mode */
    body.dark-mode .chatbot-container {
        background-color: var(--dark-surface);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }

        /* Memastikan text di dalam chatbot selalu terlihat di mode gelap */
        body.dark-mode .chatbot-container * {
            color: var(--dark-text-primary);
        }

    /* Memastikan pesan user tetap kontras baik dengan background */
    body.dark-mode .user-message {
        background-color: #0d6efd;
        color: white;
    }

    /* Memastikan link dalam chatbot tetap terlihat */
    body.dark-mode .chatbot-container a {
        color: var(--dark-primary);
    }

        body.dark-mode .chatbot-container a:hover {
            color: #a5d8ff;
            text-decoration: underline;
        }

    body.dark-mode .chatbot-header {
        background-color: #000;
    }

    body.dark-mode .chat-messages {
        background-color: var(--dark-surface);
    }

    body.dark-mode .bot-message {
        background-color: #2d2d2d;
        color: var(--dark-text-primary);
    }

        body.dark-mode .bot-message .message-content {
            color: var(--dark-text-primary);
        }

            body.dark-mode .bot-message .message-content p,
            body.dark-mode .bot-message .message-content ul,
            body.dark-mode .bot-message .message-content li {
                color: var(--dark-text-primary);
            }

    body.dark-mode .chat-input {
        border-top-color: var(--dark-border);
    }

        body.dark-mode .chat-input input {
            background-color: #2d2d2d;
            border-color: var(--dark-border);
            color: var(--dark-text-primary);
        }

    /* Footer Dark Mode */
    body.dark-mode .footer {
        background-color: #000;
    }

/* Dark mode toggle button */
.dark-mode-toggle {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--light-primary);
    color: white;
    border: none;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

body.dark-mode .dark-mode-toggle {
    background-color: var(--dark-primary);
    color: #000;
}

/* Menyesuaikan warna untuk daftar, text highlight, dan elemen lainnya dalam dark mode */
body.dark-mode ul,
body.dark-mode ol {
    color: var(--dark-text-primary);
}

body.dark-mode ::-moz-selection {
    background: var(--dark-primary);
    color: #000;
}

body.dark-mode ::selection {
    background: var(--dark-primary);
    color: #000;
}

/* Memastikan tombol dalam chatbot terlihat jelas */
body.dark-mode .chat-input button {
    background-color: var(--dark-primary);
    color: #000;
}

    body.dark-mode .chat-input button:hover {
        background-color: #a5d8ff;
    }

/* Dark mode transition */
body,
.navbar,
.card,
.modal-content,
.info-box,
.business-showcase,
.chatbot-container,
.search-section,
.form-control,
.btn,
.chat-messages,
.message,
.message-content,
.bot-message,
.user-message {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

    /* Achievements page */
    body.dark-mode .achievement-hero,
    body.dark-mode .about-hero,
    body.dark-mode .contact-hero {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/static/img/bg.jpg");
        background-size: cover;
        background-position: center;
        color: white;
        padding: 100px 0;
        margin-bottom: 30px;
    }

    body.dark-mode .progress-card,
    body.dark-mode .contact-form-card,
    body.dark-mode .map-card,
    body.dark-mode .contact-info-card,
    body.dark-mode .achievement-card {
        background-color: var(--dark-surface);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        border-color: var(--dark-border);
    }

    /* Memperbaiki warna teks untuk total number achievement di dark mode */
    body.dark-mode .achievements-number {
        color: var(--dark-text-primary);
    }

    body.dark-mode .achievements-text {
        color: var(--dark-text-secondary);
    }

    body.dark-mode .progress {
        background-color: var(--dark-border);
    }

    /* Memperbaiki hover effect pada achievement-info di dark mode */
    body.dark-mode .achievement-info {
        background-color: rgba(0, 0, 0, 0.85);
    }

    body.dark-mode .achievement-card:hover .achievement-info,
    body.dark-mode .achievement-item:hover .achievement-info {
        background-color: var(--dark-primary);
    }

    body.dark-mode .achievement-info p,
    body.dark-mode .achievement-info:hover p {
        color: #000; /* Warna hitam agar kontras dengan background biru saat hover */
    }

    body.dark-mode .team-member,
    body.dark-mode .testimonial {
        background-color: var(--dark-surface);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    body.dark-mode .accordion-item {
        background-color: var(--dark-surface);
        border-color: var(--dark-border);
    }

    body.dark-mode .accordion-button {
        background-color: var(--dark-surface);
        color: var(--dark-text-primary);
    }

        body.dark-mode .accordion-button:not(.collapsed) {
            background-color: rgba(0, 0, 0, 0.2);
            color: var(--dark-primary);
        }

        body.dark-mode .accordion-button::after {
            filter: invert(1) grayscale(100%) brightness(200%);
        }

    /* Contact page map in dark mode */
    body.dark-mode .contact-map {
        filter: invert(0.9) hue-rotate(180deg);
    }