/* Ensure fixed columns have background color in both light and dark modes */

/* For normal mode (light theme) */

table.fixed-columns-table.dataTable thead tr>.dtfc-fixed-start,
table.fixed-columns-table.dataTable thead tr>.dtfc-fixed-end,
table.fixed-columns-table.dataTable tfoot tr>.dtfc-fixed-start,
table.fixed-columns-table.dataTable tfoot tr>.dtfc-fixed-end {
    top: 0;
    bottom: 0;
    z-index: 3;
    background-color: white;
    /* Ensure stacking */
}

table.fixed-columns-table.dataTable tbody tr>.dtfc-fixed-start,
table.fixed-columns-table.dataTable tbody tr>.dtfc-fixed-end {

    z-index: 1;
    background-color: white;
    /* Ensure stacking */
}

/* Add shadow effect on last fixed column (left and right) */
table.fixed-columns-table.dataTable tr>.dtfc-fixed-left::after,
table.fixed-columns-table.dataTable tr>.dtfc-fixed-right::after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    transition: box-shadow 0.3s;
    content: "";
    pointer-events: none;
    /* Transparent shadow area */
}

table.fixed-columns-table.dataTable tr>.dtfc-fixed-left::after {
    right: 0;
    transform: translateX(100%);
}

table.fixed-columns-table.dataTable tr>.dtfc-fixed-right::after {
    left: 0;
    transform: translateX(-80%);
}

table.fixed-columns-table.dataTable.dtfc-scrolling-left tr>.dtfc-fixed-left::after {
    box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.2);
}

table.fixed-columns-table.dataTable.dtfc-scrolling-right tr>.dtfc-fixed-right::after {
    box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.2);
}

table.fixed-columns-table.dataTable.dtfc-scrolling-right tr>.dtfc-fixed-right+.dtfc-fixed-right::after {
    box-shadow: none;
}

div.dt-scroll,
div.dtfh-floatingparent {
    position: relative;
}

div.dt-scroll div.dtfc-top-blocker,
div.dt-scroll div.dtfc-bottom-blocker,
div.dtfh-floatingparent div.dtfc-top-blocker,
div.dtfh-floatingparent div.dtfc-bottom-blocker {
    position: absolute;
    background-color: white;
}

/* Dark mode */

html.dark table.dataTable thead tr>.dtfc-fixed-start,
html.dark table.dataTable thead tr>.dtfc-fixed-end,
html.dark table.dataTable tfoot tr>.dtfc-fixed-start,
html.dark table.dataTable tfoot tr>.dtfc-fixed-end {
    background-color: var(--dt-html-background);
}

html.dark table.dataTable tbody tr>.dtfc-fixed-start,
html.dark table.dataTable tbody tr>.dtfc-fixed-end {
    background-color: var(--dt-html-background);
}

html.dark table.dataTable.dtfc-scrolling-left tbody>tr>.dtfc-fixed-left::after {
    box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.3);
}

html.dark table.dataTable.dtfc-scrolling-right tbody>tr>.dtfc-fixed-right::after {
    box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.3);
}

html.dark table.dataTable.dtfc-scrolling-right tbody>tr>.dtfc-fixed-right+.dtfc-fixed-right::after {
    box-shadow: none;
}

html.dark div.dtfc-top-blocker,
html.dark div.dtfc-bottom-blocker {
    background-color: var(--dt-html-background);
}

/* Ensure borders remain intact */
table.fixed-columns-table.dataTable {
    border-collapse: collapse;
}

table.fixed-columns-table.dataTable thead th,
table.fixed-columns-table.dataTable tbody td {
    border: 1px solid #dee2e6;
}

.select2-container .select2-selection--multiple .select2-selection__choice {
    background-color: #243E5C;
    border: none;
    color: #fff;
    border-radius: 3px;
    padding: 3px;
    margin-top: 6px;
}

.btn-soft-custom-danger {
    --vz-btn-color: #6E4A5A;
    --vz-btn-bg: rgba(110, 74, 90, 0.1);
    --vz-btn-border-color: transparent;
    --vz-btn-hover-color: #6E4A5A;
    --vz-btn-hover-bg: rgba(110, 74, 90, 0.1);
    --vz-btn-hover-border-color: transparent;
    --vz-btn-focus-shadow-rgb: 110, 74, 90;
    --vz-btn-active-color: #6E4A5A;
    --vz-btn-active-bg: rgba(110, 74, 90, 0.1);
    --vz-btn-active-border-color: transparent;
}

.btn-soft-custom-success {
    --vz-btn-color: #385A7D;
    --vz-btn-bg: rgba(56, 90, 125, 0.1);
    --vz-btn-border-color: transparent;
    --vz-btn-hover-color: #385A7D;
    --vz-btn-hover-bg: rgba(56, 90, 125, 0.1);
    --vz-btn-hover-border-color: transparent;
    --vz-btn-focus-shadow-rgb: 56, 90, 125;
    --vz-btn-active-color: var(--vz-btn-hover-color);
    --vz-btn-active-bg: rgba(56, 90, 125, 0.1);
    --vz-btn-active-border-color: transparent;
}

.btn-soft-custom-primary {
    --vz-btn-color: #243E5C;
    --vz-btn-bg: rgba(36, 62, 92, 0.1);
    --vz-btn-border-color: transparent;
    --vz-btn-hover-color: #243E5C;
    --vz-btn-hover-bg: rgba(36, 62, 92, 0.1);
    --vz-btn-hover-border-color: transparent;
    --vz-btn-focus-shadow-rgb: 36, 62, 92;
    --vz-btn-active-color: var(--vz-btn-hover-color);
    --vz-btn-active-bg: rgba(36, 62, 92, 0.1);
    --vz-btn-active-border-color: transparent;
}

.btn-soft-custom-warning {
    --vz-btn-color: var(--vz-warning);
    --vz-btn-bg: var(--vz-warning-bg-subtle);
    --vz-btn-border-color: transparent;
    --vz-btn-hover-bg: var(--vz-warning);
    --vz-btn-hover-border-color: transparent;
    --vz-btn-focus-shadow-rgb: var(--vz-warning-rgb);
    --vz-btn-active-bg: var(--vz-warning);
    --vz-btn-active-border-color: transparent;
}

.dt-new-row {
    color: #243E5C;  
}
.dt-updated-row {
    background-color: #ffff99; /* Light yellow */
    transition: background-color 1s ease;
}

.profile-wid-bg::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: .9;
    background: #243E5C;
}
/* Flatpickr year spinner arrows: always visible and white */
.flatpickr-current-month .numInputWrapper span {
    opacity: 1 !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
    border-bottom-color: #fff !important;
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-top-color: #fff !important;
}

/* ============================================================
   DBIS brand theme override (loaded last, wins the cascade)
   Primary  / brand : Primary Dark Blue #243E5C  rgb(36, 62, 92)
   Secondary / accent: Accent Mint #C7F1DE  rgb(199, 241, 222)
   ============================================================ */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    --vz-primary: #243E5C;
    --vz-primary-rgb: 36, 62, 92;
    --vz-primary-text-emphasis: #1A2E45;
    --vz-primary-bg-subtle: #e8eaec;
    --vz-primary-border-subtle: #a4adb5;

    /* Secondary -> palette Secondary Blue (#385A7D), a dark fill with white text.
       (Not the mint: mint is the accent/success tone.) */
    --vz-secondary: #385A7D;
    --vz-secondary-rgb: 56, 90, 125;
    --vz-secondary-text-emphasis: #243E5C;
    --vz-secondary-bg-subtle: #e4eaf0;
    --vz-secondary-border-subtle: #c3d0de;

    /* Info -> brand navy (informational / neutral actions use the dark logo tone).
       Kept distinct from red (danger) and yellow (warning), which stay semantic. */
    --vz-info: #243E5C;
    --vz-info-rgb: 36, 62, 92;
    --vz-info-text-emphasis: #1A2E45;
    --vz-info-bg-subtle: #e8eaec;
    --vz-info-border-subtle: #a4adb5;

    /* Success -> brand sage (positive / confirm / add actions use the light logo tone).
       Fills use pastel sage (#C7F1DE, see the .btn-success rule for contrast); the
       -rgb value is a deep sage so `.text-success` / badges stay legible on white. */
    --vz-success: #C7F1DE;
    --vz-success-rgb: 36, 62, 92;
    --vz-success-text-emphasis: #243E5C;
    --vz-success-bg-subtle: #ecf6f3;
    --vz-success-border-subtle: #cee7e2;

    --vz-link-color: #243E5C;
    --vz-link-color-rgb: 36, 62, 92;
    --vz-link-hover-color: #1A2E45;
    --vz-link-hover-color-rgb: 26, 46, 69;

    /* Secondary/muted text colour -> palette Muted Slate (was the Velzon grey
       #878a99). Drives .text-muted and .text-secondary. */
    --vz-secondary-color: #7D8FA3;
    --vz-secondary-color-rgb: 125, 143, 163;

    /* Danger -> muted plum. Carole's brand palette has no bright red/orange
       ("I do not want reds and oranges"); the Velzon default danger is #f06548
       (red-orange). We keep danger semantically distinct for errors/deletes but
       recolour it to a cool, desaturated plum that harmonises with the palette
       and meets WCAG AA (~7.7:1 on white). */
    --vz-danger: #6E4A5A;
    --vz-danger-rgb: 110, 74, 90;
    --vz-danger-text-emphasis: #58323f;
    --vz-danger-bg-subtle: #f0e9ec;
    --vz-danger-border-subtle: #d6c4cc;

    /* Warning -> muted bronze. Replaces the Velzon orange default (#f7b84b).
       Desaturated yellow-bronze (not orange); ~5:1 on white, so it also fixes
       the old orange's failing contrast. */
    --vz-warning: #7C6F4A;
    --vz-warning-rgb: 124, 111, 74;
    --vz-warning-text-emphasis: #5c5236;
    --vz-warning-bg-subtle: #f1efe8;
    --vz-warning-border-subtle: #d8d2c2;
}

/* Secondary = Secondary Blue: a dark fill, so it carries WHITE text and darkens
   on hover. (This is what DataTables toolbar buttons use by default, so they now
   read as brand blue rather than the old green.) */
.btn-secondary {
    --vz-btn-color: #ffffff;
    --vz-btn-bg: #385A7D;
    --vz-btn-border-color: #385A7D;
    --vz-btn-hover-color: #ffffff;
    --vz-btn-hover-bg: #2F4D6B;
    --vz-btn-hover-border-color: #2F4D6B;
    --vz-btn-active-color: #ffffff;
    --vz-btn-active-bg: #2F4D6B;
    --vz-btn-active-border-color: #2F4D6B;
    --vz-btn-disabled-color: #ffffff;
    --vz-btn-disabled-bg: #385A7D;
    --vz-btn-disabled-border-color: #385A7D;
}
/* Success = Accent Mint: a light fill, so it carries dark navy text and hover
   darkens to a mid mint so the navy text stays readable. */
.btn-success {
    --vz-btn-color: #243E5C;
    --vz-btn-bg: #C7F1DE;
    --vz-btn-border-color: #C7F1DE;
    --vz-btn-hover-color: #243E5C;
    --vz-btn-hover-bg: #A6E0C8;
    --vz-btn-hover-border-color: #A6E0C8;
    --vz-btn-active-color: #243E5C;
    --vz-btn-active-bg: #A6E0C8;
    --vz-btn-active-border-color: #A6E0C8;
    --vz-btn-disabled-color: #243E5C;
    --vz-btn-disabled-bg: #C7F1DE;
    --vz-btn-disabled-border-color: #C7F1DE;
}
/* Outline secondary (blue) fills to solid blue with white text on hover. */
.btn-outline-secondary {
    --vz-btn-color: #385A7D;
    --vz-btn-border-color: #385A7D;
    --vz-btn-hover-color: #ffffff;
    --vz-btn-hover-bg: #385A7D;
    --vz-btn-hover-border-color: #385A7D;
    --vz-btn-active-color: #ffffff;
    --vz-btn-active-bg: #385A7D;
    --vz-btn-active-border-color: #385A7D;
}
/* Outline success (mint): navy text, fills to pastel mint + navy text on hover. */
.btn-outline-success {
    --vz-btn-color: #243E5C;
    --vz-btn-border-color: #C7F1DE;
    --vz-btn-hover-color: #243E5C;
    --vz-btn-hover-bg: #C7F1DE;
    --vz-btn-hover-border-color: #C7F1DE;
    --vz-btn-active-color: #243E5C;
    --vz-btn-active-bg: #C7F1DE;
    --vz-btn-active-border-color: #C7F1DE;
}
/* Pastel-mint success badge backgrounds need dark navy text for contrast.
   (Secondary is now a dark blue and uses its default white badge text.) */
.badge.bg-success,
.badge.text-bg-success,
.text-bg-success {
    color: #243E5C !important;
}

/* Danger (muted plum) and warning (muted bronze) are dark fills, so solid
   buttons carry white text in every state for AA contrast. Backgrounds and
   hovers are inherited from the recoloured --vz-danger / --vz-warning vars. */
.btn-danger,
.btn-warning {
    --vz-btn-color: #fff;
    --vz-btn-hover-color: #fff;
    --vz-btn-active-color: #fff;
    --vz-btn-disabled-color: #fff;
}

/* ================= Palette: dark headings ================= */
/* Keep teal primary; recolor all headings to dark slate #243E5C by overriding
   the theme heading variable (so `.text-white` headings, e.g. the client banner,
   stay white). Dark mode keeps light headings. Accent: brand navy. */
:root {
    --vz-heading-color: #243E5C;
    --bs-heading-color: #243E5C;
    --vz-accent: #243E5C;
}
[data-bs-theme="dark"] {
    --vz-heading-color: #ced4da;
    --bs-heading-color: #ced4da;
}
.card-title,
.page-title-box h4 {
    color: var(--vz-heading-color);
}

/* Nav pills/tabs with the "info" accent use Velzon's sky-blue (#299cdb) by
   default, which is off-palette. Repoint the active state to the brand Primary
   Dark Blue so tabs (e.g. Learner Permissions, live session) match the palette. */
.nav-info .nav-link.active {
    color: #fff;
    background-color: #243E5C;
}
.nav-info.nav-tabs .nav-link.active,
.nav-info.nav-tabs-custom .nav-link.active,
.nav-info.nav-custom-outline .nav-link.active {
    color: #243E5C;
}
.nav-info.nav-custom-outline .nav-link.active {
    border-color: #243E5C;
}
.nav-info.nav-tabs-custom .nav-link.active::after {
    background-color: #243E5C;
}
.nav-info.arrow-navtabs .nav-link.active::before {
    border-top-color: #243E5C;
}
.nav-info.custom-verti-nav-pills .nav-link.active::before {
    border-left-color: #243E5C;
}

/* =========================================================================
   Page hero — standard title card at the top of Settings & inner pages.
   Pairs with the breadcrumb trail: breadcrumb = navigation, hero = page
   identity. Mirrors the .settings-hero used on the Settings hub so every
   configuration screen shares one title treatment. Theme-aware.
   ========================================================================= */
.page-hero {
    border: 1px solid var(--db-border, #e3e8e6);
    border-radius: 14px;
}
.page-hero .card-body {
    padding: 1.5rem;
}
.page-hero h4 {
    color: #243E5C;
    font-weight: 700;
}
/* Subtitle: navy (regular weight) in light mode for AA contrast. */
.page-hero .text-muted {
    color: #243E5C !important;
    font-weight: 400;
}
/* Optional right-aligned actions area inside the hero. */
.page-hero-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}
[data-bs-theme=dark] .page-hero {
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}
[data-bs-theme=dark] .page-hero h4 {
    color: #f3f6f9;
}
[data-bs-theme=dark] .page-hero .text-muted {
    color: #aab1b8 !important;
}