/* dark-theme.css */
/* Dark Mode Overrides for HealthyLife */

/* Using media query for auto dark mode, or you can add data-theme="dark" to the HTML */
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark Backgrounds */
        --color-bg-page: #121413;
        /* Very dark greenish-gray */
        --color-bg-card: #1C201E;
        /* Slightly lighter for cards/containers */
        --color-bg-nav: #181B19;
        /* Navbar background */
        --color-bg-footer: #0F1110;
        /* Footer background */

        /* Dark Accents & Interactions */
        --color-accent-primary: #81C784;
        /* Lighter, vibrant green for dark mode readability */
        --color-accent-hover: #A5D6A7;
        --color-link: #81C784;
        --color-link-hover: #C8E6C9;

        /* Dark Typography */
        --color-text-main: #E2E8E4;
        /* Off-white reading text */
        --color-text-muted: #9AA69F;
        /* Muted gray-green */

        /* Dark Structural / Borders */
        --color-border-subtle: #2D3631;
        /* Dark borders */
        --color-border-focus: #44544A;
        /* Hover state borders */
    }

    /* Override Bootstrap specific colors used in the layout */
    .text-dark {
        color: var(--color-text-main) !important;
    }

    .text-success {
        color: var(--color-accent-primary) !important;
    }

    .text-muted {
        color: var(--color-text-muted) !important;
    }

    .text-secondary {
        color: var(--color-text-muted) !important;
    }

    .bg-light {
        background-color: var(--color-bg-card) !important;
    }

    .bg-white {
        background-color: var(--color-bg-nav) !important;
    }

    /* Card and Utility Overrides */
    .card {
        background-color: var(--color-bg-card) !important;
        border-color: var(--color-border-subtle) !important;
    }

    .border-light-subtle {
        border-color: var(--color-border-subtle) !important;
    }

    /* Navbar overrides */
    .navbar-light .navbar-nav .nav-link {
        color: var(--color-text-muted);
    }

    .navbar-light .navbar-nav .nav-link:hover,
    .navbar-light .navbar-nav .nav-link.active {
        color: var(--color-accent-primary);
    }

    .navbar-toggler {
        filter: invert(1) grayscale(1) brightness(2);
    }

    /* Carousel Controls adjustments for dark mode */
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        filter: invert(1) grayscale(100) brightness(2) !important;
        opacity: 0.9 !important;
    }

    /* Ad placeholders */
    .ad-placeholder {
        color: #6B726E;
        border-color: #2D3631;
    }

    /* Dropdowns */
    .dropdown-menu {
        background-color: var(--color-bg-nav);
        border-color: var(--color-border-subtle);
    }

    .dropdown-item {
        color: var(--color-text-main);
    }

    .dropdown-item:hover {
        background-color: var(--color-bg-card);
        color: var(--color-accent-primary);
    }

    hr {
        border-color: var(--color-border-subtle) !important;
    }

    /* Forms and Inputs */
    .form-control,
    .form-select,
    .input-group-text {
        background-color: var(--color-bg-card);
        border-color: var(--color-border-subtle);
        color: var(--color-text-main);
    }

    .form-control:focus,
    .form-select:focus {
        background-color: var(--color-bg-card);
        border-color: var(--color-border-focus);
        color: var(--color-text-main);
        box-shadow: 0 0 0 0.25rem rgba(129, 199, 132, 0.25);
    }

    .form-control::placeholder {
        color: var(--color-text-muted);
    }

    /* Form Labels */
    .form-label,
    .form-check-label {
        color: var(--color-text-main);
    }

    /* Buttons */
    .btn-success {
        background-color: var(--color-accent-primary);
        border-color: var(--color-accent-primary);
        color: #121413;
    }

    .btn-success:hover,
    .btn-success:focus,
    .btn-success:active {
        background-color: var(--color-accent-hover) !important;
        border-color: var(--color-accent-hover) !important;
        color: #121413 !important;
    }

    .btn-outline-success {
        color: var(--color-accent-primary);
        border-color: var(--color-accent-primary);
    }

    .btn-outline-success:hover,
    .btn-outline-success:focus,
    .btn-outline-success:active {
        background-color: var(--color-accent-primary) !important;
        border-color: var(--color-accent-primary) !important;
        color: #121413 !important;
    }

    /* Pagination */
    .page-link {
        background-color: var(--color-bg-card);
        border-color: var(--color-border-subtle);
        color: var(--color-text-main) !important;
    }

    .page-link:hover,
    .page-link:focus {
        background-color: var(--color-border-subtle);
        border-color: var(--color-border-focus);
        color: var(--color-accent-primary) !important;
    }

    .page-item.active .page-link {
        background-color: var(--color-accent-primary) !important;
        border-color: var(--color-accent-primary) !important;
        color: #121413 !important;
    }

    .page-item.disabled .page-link {
        background-color: var(--color-bg-page);
        border-color: var(--color-border-subtle);
        color: var(--color-text-muted) !important;
    }
}