/* ========== Base Dark Mode Wrapper ========== */
.dark-mode {
    background-color: #121212;
    color: #E0E0E0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    /* ========== Typography ========== */
    .dark-mode h1,
    .dark-mode h2,
    .dark-mode h3,
    .dark-mode h4,
    .dark-mode h5,
    .dark-mode h6,
    .dark-mode p,
    .dark-mode span,
    .dark-mode label,
    .dark-mode .control-label,
    .dark-mode .text-muted {
        color: #E0E0E0 !important;
    }

    /* Muted / secondary text */
    .dark-mode .text-muted {
        color: #B0B0B0 !important;
    }

    /* Validation errors */
    .dark-mode .text-danger {
        color: #FF6B6B !important;
    }

    /* ========== Links ========== */
    .dark-mode a {
        color: #90CAF9;
        text-decoration: underline;
    }

        .dark-mode a:hover {
            color: #BBDEFB;
        }

    /* ========== Inputs & Forms ========== */
    .dark-mode .form-control,
    .dark-mode input,
    .dark-mode select,
    .dark-mode textarea {
        background-color: #1E1E1E !important;
        color: #FFFFFF !important;
        border: 1px solid #444 !important;
    }

        .dark-mode input::placeholder,
        .dark-mode textarea::placeholder {
            color: #AAAAAA !important;
        }

        /* Disabled inputs */
        .dark-mode input[disabled],
        .dark-mode select[disabled],
        .dark-mode textarea[disabled] {
            background-color: #2C2C2C !important;
            color: #888 !important;
        }

    /* ========== Buttons ========== */
    .dark-mode .btn {
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .dark-mode .btn-primary {
        background-color: #1976D2;
        color: #FFFFFF;
        border: none;
    }

    .dark-mode .btn-success {
        background-color: #2E7D32;
        color: #FFFFFF;
    }

    .dark-mode .btn-danger {
        background-color: #EF5350;
        color: #FFFFFF;
    }

    .dark-mode .btn-warning {
        background-color: #FFC107;
        color: #000;
    }

    /* Optional button hover effects */
    .dark-mode .btn:hover {
        filter: brightness(1.1);
    }

    /* ========== Cards / Containers / Panels ========== */
    .dark-mode .card,
    .dark-mode .container,
    .dark-mode .panel,
    .dark-mode .modal-content {
        background-color: #1E1E1E !important;
        color: #FFFFFF !important;
        border-color: #333 !important;
    }

    /* ========== Table ========== */
    .dark-mode .table {
        background-color: #1E1E1E;
        color: #E0E0E0;
    }

        .dark-mode .table th,
        .dark-mode .table td {
            border-color: #333;
        }

    /* ========== Custom: Index Row Highlight ========== */
    .dark-mode .index-row {
        /*background-color: #555;*/
        border-radius: 6px;
        padding: 20px;
        transition: background-color 0.3s ease;
    }

    /* ========== Scrollbar Styling (Optional) ========== */
    .dark-mode ::-webkit-scrollbar {
        width: 8px;
    }

    .dark-mode ::-webkit-scrollbar-thumb {
        background-color: #444;
        border-radius: 4px;
    }

    .dark-mode ::-webkit-scrollbar-track {
        background-color: #1A1A1A;
    }