:root {
    --tblr-dark-mode-border-color: none;
    --tblr-primary: var(--primary);
    --tblr-heading-color: var(--dark);
}

.page-wrapper {
    background-color: var(--background) !important;
}

.navbar {
    --tblr-navbar-bg: var(--secondary) !important;
}

.breadcrumb a {
    --tblr-breadcrumb-link-color: var(--link-color, --primary);
}

a {
    color: var(--link-color, var(--primary));
}

.navbar .nav-item {

    .nav-link {
        color: var(--dark) !important;

        >.nav-icon {
            color: var(--primary) !important;
        }

        &:hover {
            color: var(--dark) !important;

            &::after {
                color: var(--dark) !important;
            }
        }

        &:focus {
            box-shadow: none !important;
        }
    }


    .dropdown-menu {
        background-color: var(--light);
        color: var(--dark);

        .dropdown-item.active {
            background-color: var(--secondary);
            color: var(--primary);
        }

        a[href]:hover {
            color: var(--primary) !important;
        }

    }
}

.dataTable tr.odd td {
    background-color: var(--background) !important;
    box-shadow: none !important;
}

[data-bs-theme=dark] .dropdown-item:not(.btn):hover {
    color: var(--tblr-navbar-bg) !important;
}

.nav-link.dropdown-toggle:focus-visible {
    box-shadow: none;
}

header[data-bs-theme="dark"] .nav-item>a.nav-link {
    color: #ffffff;
}

.card {

    .card-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #5a5c69;
        margin: 0;
    }



    &.file-upload-status {
        border: 1px solid #e3e6f0;
        box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
        margin-bottom: 1.5rem;

        .card-header {
            background-color: #f8f9fc;
            border-bottom: 1px solid #e3e6f0;
            padding: 1rem 1.25rem;
        }

        .table th {
            background-color: #f8f9fc;
            font-weight: 600;
        }

        .table-responsive {
            max-height: 600px;
            overflow-y: auto;
        }
    }
}

#crudTable td:has(.hide-bulk-checkbox)>* {
    display: none;
}

#crudTable td:has(.hide-bulk-checkbox) {

    display: flex;
    align-items: center;
    justify-content: center;

    span:has(.hide-bulk-checkbox) {
        display: block !important;
    }
}

[bp-section="crud-operation-create"],
[bp-section="crud-operation-edit"],
[bp-section="crud-operation-show"] {
    margin-top: 3rem !important;
}

/* ──────────────────────────────────────────────────────────────
   Dark-mode overrides for Harrewijn custom rules.
   Tabler already handles its own --tblr-* tokens under data-bs-theme="dark"
   (body bg, body color, card bg, borders, etc.). We only override the
   Harrewijn-specific rules above that reference light-only hard-coded hexes.
   ────────────────────────────────────────────────────────────── */

/* .card .card-title colour (#5a5c69, hsl 231,7%,38%) — dark-mode: flip to hsl(231,7%,62%). */
[data-bs-theme="dark"] .card .card-title {
    color: #959aa6;  /* hsl(225,9%,62%) — was #5a5c69 (hsl 231,7%,38%); inverted lightness */
}

/* .card.file-upload-status used #e3e6f0 borders and #f8f9fc header/th bg.
 * Invert those for dark bg so the upload-status cards read consistently. */
[data-bs-theme="dark"] .card.file-upload-status {
    border: 1px solid #2c2f3a;  /* hsl(225,14%,20%) — was #e3e6f0 (hsl 225,24%,92%); inverted */
    box-shadow: 0 0.15rem 1.75rem 0 rgba(0, 0, 0, 0.5);  /* stronger shadow on dark bg */
}

[data-bs-theme="dark"] .card.file-upload-status .card-header,
[data-bs-theme="dark"] .card.file-upload-status .table th {
    background-color: #1b1d24;  /* hsl(225,14%,12%) — was #f8f9fc (hsl 225,33%,98%); inverted */
    border-bottom-color: #2c2f3a;
}

/* .dataTable tr.odd already uses var(--background); the var flips automatically. */