﻿/* ================== DARK MODE OVERRIDES ================== */

/* Global dark mode */
body.darkmode {
    background-color: #121212 !important;
    color: #eaeaea !important;
}

    /* Many blocks / cards / rows */
    body.darkmode .card,
    body.darkmode .cal tr,
    body.darkmode .cal td,
    body.darkmode .cal th,
    body.darkmode .cal .muted,
    body.darkmode h2,
    body.darkmode h1.dashboardheading,
    body.darkmode span,
    body.darkmode .form-label,
    body.darkmode tr,
    body.darkmode th,
    body.darkmode td,
    body.darkmode .muted,
    body.darkmode .month-card,
    body.darkmode .months-grid,
    body.darkmode .month-grid,
    body.darkmode .month-header,
    body.darkmode .list-group-item,
    body.darkmode section,
    body.darkmode footer,
    body.darkmode .btn-group {
        background: #1e1e1e;
        color: #eaeaea;
    }

    /* Global links in dark mode */
    body.darkmode a {
        color: #79aaff !important;
    }

        body.darkmode a:hover {
            color: #a1c4ff !important;
        }

    /* DataTables pagination in dark mode */
    body.darkmode .paginate_button {
        background-color: blue !important;
        color: #eee !important;
        border: 1px solid #555 !important;
    }

        body.darkmode .paginate_button.current {
            background-color: #0d6efd !important;
            color: #fff !important;
            border: 1px solid #0d6efd !important;
        }

        body.darkmode .paginate_button:hover {
            background-color: #555 !important;
            color: #fff !important;
        }

    /* Filter fieldset in dark mode */
    body.darkmode #chooser fieldset {
        background-color: #1f1f1f !important;
        border: 1px solid #333 !important;
        color: #e8e8e8 !important;
    }

    body.darkmode #chooser label {
        color: #e8e8e8 !important;
    }

    body.darkmode #chooser select.form-select {
        background-color: #2a2a2a !important;
        color: #e8e8e8 !important;
        border: 1px solid #444 !important;
    }

        body.darkmode #chooser select.form-select:focus {
            border-color: #0d6efd !important;
            box-shadow: 0 0 4px #0d6efd55 !important;
        }

        body.darkmode #chooser select.form-select option {
            background-color: #2a2a2a !important;
            color: #e8e8e8 !important;
        }

    body.darkmode #chooser button {
        background-color: #0d6efd !important;
        color: #fff !important;
        border-color: #0d6efd !important;
    }

    /* Prev/Next button group */
    body.darkmode .btn-group .btn {
        background-color: #2a2a2a !important;
        border-color: #444 !important;
        color: #e8e8e8 !important;
    }

        body.darkmode .btn-group .btn:hover:not(.disabled) {
            background-color: #3a3a3a !important;
            border-color: #555 !important;
            color: #fff !important;
        }

        body.darkmode .btn-group .btn.disabled,
        body.darkmode .btn-group .btn:disabled {
            background-color: #1c1c1c !important;
            border-color: #333 !important;
            color: #777 !important;
            opacity: 0.6 !important;
        }

        body.darkmode .btn-group .btn.active {
            background-color: #0d6efd !important;
            border-color: #0d6efd !important;
            color: #fff !important;
        }

    /* Change Password – dark */
    body.darkmode .change-password-container {
        background-color: #121212 !important;
    }

    body.darkmode .change-password-box {
        background-color: #1e1e1e !important;
        border: 1px solid #2e2e2e !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
        color: #e6e6e6 !important;
    }

        body.darkmode .change-password-box h4 {
            color: #f0f0f0 !important;
        }

    /* Login – dark */
    body.darkmode .login-container {
        background-color: #121212 !important;
    }

    body.darkmode .login-box {
        background-color: #1e1e1e !important;
        border: 1px solid #2e2e2e !important;
        color: #e6e6e6 !important;
        box-shadow: 0 6px 20px rgba(0,0,0,0.45) !important;
    }

        body.darkmode .login-box h1 {
            color: #f5f5f5 !important;
        }

    /* Forgot password – dark */
    body.darkmode .forgot-password-container {
        background-color: #121212 !important;
    }

    body.darkmode .forgot-password-box {
        background-color: #1e1e1e !important;
        border: 1px solid #2d2d2d !important;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.45) !important;
        color: #e6e6e6 !important;
    }

        body.darkmode .forgot-password-box h1,
        body.darkmode .forgot-password-box h4 {
            color: #f2f2f2 !important;
        }

    /* Reset password – dark (form) */
    body.darkmode .row {
        background-color: #121212 !important;
        padding: 20px;
        border-radius: 8px;
    }

    body.darkmode .col-md-4 {
        background-color: #1e1e1e !important;
        padding: 25px;
        border-radius: 8px;
        border: 1px solid #2d2d2d !important;
        box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important;
    }

    /* Form controls / validation in dark mode */
    body.darkmode label {
        color: #dcdcdc !important;
    }

    body.darkmode input.form-control {
        background-color: #2b2b2b !important;
        border: 1px solid #444 !important;
        color: #fff !important;
    }

        body.darkmode input.form-control:focus {
            border-color: #0d6efd !important;
            box-shadow: 0 0 0 0.25rem rgba(13,110,253,0.35) !important;
        }

    body.darkmode input[type="checkbox"] {
        accent-color: #0d6efd !important;
    }

    body.darkmode .text-danger {
        color: #ff6b6b !important;
    }

    /* Primary buttons in dark mode */
    body.darkmode button.btn-primary,
    body.darkmode .login-box .btn-primary,
    body.darkmode .change-password-box .btn-primary,
    body.darkmode .forgot-password-box .btn-primary {
        background-color: #0d6efd !important;
        border-color: #0d6efd !important;
        color: #fff !important;
    }

        body.darkmode button.btn-primary:hover,
        body.darkmode .login-box .btn-primary:hover,
        body.darkmode .change-password-box .btn-primary:hover,
        body.darkmode .forgot-password-box .btn-primary:hover {
            background-color: #0b5ed7 !important;
        }

    /* Reset password confirmation box */
    body.darkmode .reset-confirm-box {
        background-color: #1e1e1e !important;
        border: 1px solid #2d2d2d !important;
        padding: 25px;
        border-radius: 8px;
        max-width: 450px;
        margin: 40px auto;
        color: #e6e6e6;
        box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important;
    }

    /* Alerts in Login page */
    body.darkmode .alert-info {
        background-color: #1f2a38 !important;
        color: #d6e9ff !important;
        border-color: #29415f !important;
    }

    /* Code blocks (demo creds) */
    body.darkmode code {
        color: #ffd479 !important;
    }
    /* 🌙 DARK MODE — User Menu Dropdown */
    body.darkmode .navbar-nav .nav-link {
        color: #eaeaea !important;
    }

        body.darkmode .navbar-nav .nav-link .bi {
            color: #eaeaea !important;
        }

    /* Dropdown container */
    body.darkmode .dropdown-menu {
        background-color: #1f1f1f !important;
        border: 1px solid #333 !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.45) !important;
    }

    /* Dropdown items */
    body.darkmode .dropdown-item {
        color: #eaeaea !important;
    }

        body.darkmode .dropdown-item i {
            color: #9ecbff !important; /* icon color */
        }

        /* Hover effect */
        body.darkmode .dropdown-item:hover {
            background-color: #2a2a2a !important;
            color: #ffffff !important;
        }

    /* Divider */
    body.darkmode .dropdown-divider {
        border-top: 1px solid #333 !important;
    }

    /* Logout text (danger) */
    body.darkmode .dropdown-item.text-danger {
        color: #ff6b6b !important;
    }

        body.darkmode .dropdown-item.text-danger:hover {
            background-color: #3a1f1f !important;
            color: #ffbbbb !important;
        }
    /* 🌙 DARK MODE — Footer */
    body.darkmode footer.footer,
    body.darkmode footer {
        background-color: #1f1f1f !important;
        border-top: 1px solid #333 !important;
        color: #e2e2e2 !important;
    }

        body.darkmode footer .container {
            color: #e2e2e2 !important;
        }

        /* Footer links */
        body.darkmode footer a {
            color: #79aaff !important;
            text-decoration: none;
        }

            body.darkmode footer a:hover {
                color: #a1c4ff !important;
                text-decoration: underline;
            }
    /* 🌙 DARK MODE — Create New Button */
    body.darkmode .btn-info {
        background-color: #0d6efd !important; /* Primary blue */
        border-color: #0a58ca !important;
        color: #ffffff !important;
    }

        body.darkmode .btn-info:hover {
            background-color: #0b5ed7 !important;
            border-color: #0a58ca !important;
            color: #ffffff !important;
        }

        /* Optional: Make it look more premium */
        body.darkmode .btn-info.form-control {
            box-shadow: 0 2px 10px rgba(13, 110, 253, 0.3);
        }
/* Dark mode base */
.swal2-popup {
    background-color: #1f1f1f !important;
    color: #e6e6e6 !important;
    border-radius: 12px !important;
}

/* Title */
.swal2-title {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Labels */
#swalPaymentStatus ~ label,
#swalBookingStatus ~ label,
#swalRemarks ~ label,
.form-label {
    color: black !important;
}

/* Select dropdowns */
.swal2-popup select.form-select {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
    border-radius: 6px !important;
}

    .swal2-popup select.form-select option {
        background-color: #2a2a2a !important;
        color: #ffffff !important;
    }

/* Textarea */
.swal2-popup textarea.form-control {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
    border-radius: 6px !important;
}

/* Buttons */
.swal2-confirm {
    background-color: #0d6efd !important;
    color: #fff !important;
    border-radius: 6px !important;
}

.swal2-cancel {
    background-color: #6c757d !important;
    color: #fff !important;
    border-radius: 6px !important;
}

/* Focus ring */
.swal2-popup select.form-select:focus,
.swal2-popup textarea.form-control:focus {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Dark mode styling */
body.darkmode .helpbox-container {
    background-color: #1f2933;
    border-color: rgba(255,255,255,0.08);
    color: #e5e7eb;
}

    body.darkmode .helpbox-container h6 {
        color: #f9fafb;
    }

    body.darkmode .helpbox-container .text-muted {
        color: #9ca3af !important;
    }

/* --- DARK THEME: Theme toggle button --- */
.darkmode .ts-theme-btn {
    border-color: rgba(255, 255, 255, 0.7);
    color: #f8f9fa;
    background-color: transparent;
}

    .darkmode .ts-theme-btn:hover {
        border-color: #ffffff;
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.1);
    }

    .darkmode .ts-theme-btn:active {
        background-color: rgba(255, 255, 255, 0.18);
        color: #ffffff;
    }

    .darkmode .ts-theme-btn:focus {
        box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.4);
    }
@media (prefers‐color‐scheme: dark) {
    .navbar-toggler .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
}

.darkmode .text-muted {
    color: #b0b0b0 !important; /* soft grey, readable on dark */
}
