[data-theme="light"] {
    --bs-body-bg: #ffffff;
    --bs-card-bg: #ffffff;
    --bs-card-body-bg: #ffffff;
    --bs-modal-bg: #ffffff;
    --navbar-brand: #fff;
    --bs-navbar-brand-color: #000;
    --bs-navbar-brand-color: #000;
    --mobile-user-menu-bg: #fff;
    --mobile-user-menu-fc: #212529;
    --bs-navbar-bg: #fff !important;
    --bs-navbar-fc: #000 !important;
    --navbar-toggler-icon-fc: #000 !important;
}

[data-theme="dark"] {
    --bs-body-bg: #2b2b2b;
    --bs-card-bg: #2b2b2b;
    --bs-card-body-bg: #2b2b2b;
    --bs-modal-bg: #2b2b2b;
    --navbar-brand: #5a5858;
    --bs-navbar-brand-color: #2b2b2b;
    --mobile-user-menu-bg: #212529;
    --mobile-user-menu-fc: #f8f9fa;
    --bs-navbar-bg: #212529 !important;
    --bs-navbar-fc: #f8f9fa !important;
    --navbar-toggler-icon-fc: #f8f9fa !important;
}

/*body[data-theme="light"] .navbar {
    background-color: #f8f9fa;*/ /* Bootstrap light */
/*color: #212529;
}

body[data-theme="dark"] .navbar {
    background-color: #212529;*/ /* dark */
/*color: #f8f9fa;
}*/

/* Light theme menu */
/*body[data-theme="light"] .mobile-user-menu {
    background-color: #fff;*/ /* Bootstrap light background */
/*color: #212529;*/ /* Bootstrap body text color */
/*}*/

/* Dark theme menu */
/*body[data-theme="dark"] .mobile-user-menu {
    background-color: #212529;*/ /* Bootstrap dark bg */
/*color: #f8f9fa;*/ /* light text */
/*}*/

/* Optional: ensure links inside also change color */
/*body[data-theme="light"] .mobile-user-menu a {
    color: #212529;
}

body[data-theme="dark"] .mobile-user-menu a {
    color: #f8f9fa;
}*/

/* light mode (default) */
body {
    padding-top: 70px; /* match navbar height */
    color: #000;
}

    /* dark mode */
    body[data-theme="dark"] {
        background-color: #121212;
        color: #c8c4c4; /* applies to headings, labels, text */
    }


        body[data-theme="dark"] .form-control {
            background-color: #222;
            color: #fff;
            border: 1px solid #444;
        }

.navbar {
    margin-bottom: 20px;
    background: var(--bs-navbar-bg);
    color: var(--bs-navbar-fc);
}

.navbar-toggler-icon-fc {
    color: var(--navbar-toggler-icon-fc);
}



.theme-option.active {
    color: #6c757d; /* Bootstrap muted gray */
    pointer-events: none; /* disable clicking */
}

    .theme-option.active::after {
        content: "✓";
        float: right;
    }

body[data-theme="dark"] .nav-link {
    color: #e0e0e0;
}
body[data-theme="dark"] .navbar-brand {
    color: #e0e0e0;
}

/* Dark theme tables */
body[data-theme="dark"] .table {
    background-color: #121212;
    color: #e0e0e0;
}

    /* Header */
    body[data-theme="dark"] .table thead {
        background-color: #212529;
        color: #fff;
    }

/* Striped rows */
body[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: #1e1e1e;
}

body[data-theme="dark"] .table-striped tbody tr:nth-of-type(even) {
    background-color: #121212;
}

/* Borders */
body[data-theme="dark"] .table-bordered td,
body[data-theme="dark"] .table-bordered th {
    border-color: #444;
    color: #d4d4d4; /* override text if needed */
}

body[data-theme="dark"] table.table-bordered td, 
body[data-theme="dark"] table.table-bordered th {
    border-color: #444; /* soften borders in dark mode */
    color: #d4d4d4;
}

/* Light (default Bootstrap look, no change needed) */

/* Dark mode cards */
body[data-theme="dark"] .card {
    background-color: #1e1e1e; /* dark gray */
    color: #e0e0e0; /* light text */
    border: 1px solid #333; /* subtle border */
}

    body[data-theme="dark"] .card .card-title {
        color: #fff; /* keep titles brighter */
    }

    /* Buttons inside cards */
    body[data-theme="dark"] .card .btn-light {
        background-color: #333;
        color: #e0e0e0;
        border-color: #444;
    }

        body[data-theme="dark"] .card .btn-light:hover {
            background-color: #444;
            color: #fff;
        }

        /*lignt*/
.table-row-selected {
    background-color: #dbeafe !important; /* soft blue */
    transition: background-color 0.3s ease;
}

body[data-theme="dark"] .table-row-selected {
    background-color: #4b4b4b !important;
    color: #000 !important;
}

body[data-theme="dark"] .table-primary {
    background-color: #4b4b4b !important;
    color: #000 !important;
}