/* ==========================================================================
   BRAC Branding
   Centralized BRAC typography and color design tokens.
   ========================================================================== */

:root {
    /* Typography tokens */
    --brac-font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    --brac-font-size-h1: 96px;
    --brac-font-size-h2: 60px;
    --brac-font-size-h3: 48px;
    --brac-font-size-h4: 34px;
    --brac-font-size-h5: 24px;
    --brac-font-size-h6: 20px;

    --brac-font-size-subtitle-1: 16px;
    --brac-font-size-subtitle-2: 14px;

    --brac-font-size-body-1: 16px;
    --brac-font-size-body-2: 14px;

    --brac-font-size-button: 14px;
    --brac-font-size-caption: 12px;
    --brac-font-size-overline: 10px;

    --brac-font-weight-regular: 400;
    --brac-font-weight-medium: 500;
    --brac-font-weight-bold: 700;

    --brac-line-height-heading: 1.2;
    --brac-line-height-body: 1.5;

    /* Official BRAC root color tokens */
    --brac-primary: #D10D74;
    --brac-primary-dark: #97085E;

    --brac-purple: #80379B;
    --brac-yellow: #ECC200;
    --brac-orange: #FFA100;
    --brac-lime: #C9D600;
    --brac-green: #007161;
    --brac-blue: #3DB7E4;
    --brac-dark-gray: #4D4F53;
    --brac-dark: var(--brac-dark-gray);

    --brac-white: #FFFFFF;
    --brac-black: #000000;

    --brac-page-bg: #F7F7F8;
    --brac-surface-bg: #FFFFFF;
    --brac-surface-muted: #F5F5F5;
    --brac-background: var(--brac-page-bg);
    --brac-light-gray: var(--brac-surface-muted);

    --brac-border: #E1E1E1;
    --brac-border-light: #ECECEC;
    --brac-divider: #DADADA;
    --brac-border-gray: var(--brac-border);

    --brac-text-primary: #4D4F53;
    --brac-text-secondary: #6B6D70;
    --brac-text-muted: #8A8D91;
    --brac-text-disabled: #A9ABAE;

    --brac-link: var(--brac-primary);
    --brac-link-hover: var(--brac-primary-dark);

    --brac-hover-bg: var(--brac-page-bg);
    --brac-active-bg: #FCEAF3;
    --brac-focus-ring: rgba(209, 13, 116, 0.16);

    /* Form tokens */
    --brac-input-height: 40px;
    --brac-input-height-sm: 32px;
    --brac-input-height-lg: 48px;
    --brac-input-radius: 4px;
    --brac-input-radius-lg: 6px;
    --brac-input-border-width: 1px;
    --brac-input-padding-x: 12px;
    --brac-input-padding-y: 8px;
    --brac-input-padding-x-sm: 10px;
    --brac-input-padding-y-sm: 5px;
    --brac-input-padding-x-lg: 14px;
    --brac-input-padding-y-lg: 11px;
    --brac-input-placeholder: var(--brac-text-muted);
    --brac-input-hover-border: var(--brac-divider);
    --brac-input-disabled-bg: var(--brac-surface-muted);
    --brac-input-readonly-bg: var(--brac-page-bg);
    --brac-input-invalid-ring: rgba(198, 40, 40, 0.14);
    --brac-input-valid-ring: rgba(0, 113, 97, 0.14);

    /* Semantic color tokens */
    --brac-success: #007161;
    --brac-warning: #FFA100;
    --brac-danger: #C62828;
    --brac-info: #3DB7E4;

    /* Application-level color tokens */
    --app-primary: var(--brac-primary);
    --app-primary-hover: var(--brac-primary-dark);
    --app-primary-active: var(--brac-primary-dark);
    --app-primary-soft: var(--brac-active-bg);

    --app-body-bg: var(--brac-page-bg);
    --app-surface-bg: var(--brac-surface-bg);
    --app-border-color: var(--brac-border);

    --app-text-primary: var(--brac-text-primary);
    --app-text-secondary: var(--brac-text-secondary);
    --app-text-muted: var(--brac-text-muted);

    --app-header-bg: var(--brac-surface-bg);
    --app-sidebar-bg: var(--brac-surface-bg);
    --app-card-bg: var(--brac-surface-bg);

    --app-input-bg: var(--brac-surface-bg);
    --app-input-border: var(--brac-border);
    --app-input-focus-border: var(--brac-primary);

    --app-table-bg: var(--brac-surface-bg);
    --app-table-header-bg: var(--brac-surface-muted);
    --app-table-border: var(--brac-border);

    --app-button-primary-bg: var(--brac-primary);
    --app-button-primary-hover: var(--brac-primary-dark);
    --app-button-primary-text: var(--brac-white);

    --app-link-color: var(--brac-link);
    --app-link-hover: var(--brac-link-hover);

    /* Backward-compatible component color tokens */
    --sidebar-bg: var(--app-sidebar-bg);
    --header-bg: var(--app-header-bg);
    --page-bg: var(--app-body-bg);
    --card-bg: var(--app-card-bg);
    --table-bg: var(--app-table-bg);
    --table-header-bg: var(--app-table-header-bg);
    --table-border: var(--app-table-border);
    --input-bg: var(--app-input-bg);
    --input-border: var(--app-input-border);
    --input-focus: var(--brac-primary);
    --button-primary-bg: var(--app-button-primary-bg);
    --button-primary-hover: var(--app-button-primary-hover);
    --button-outline: var(--brac-primary);
    --link-color: var(--app-link-color);
    --hover-bg: var(--brac-hover-bg);
    --active-bg: var(--brac-active-bg);
    --badge-bg: var(--brac-active-bg);
    --modal-bg: var(--brac-surface-bg);
    --dropdown-bg: var(--brac-surface-bg);

    /* Bootstrap and Vuexy root color overrides */
    --bs-primary: var(--brac-primary);
    --bs-primary-rgb: 209, 13, 116;
    --bs-link-color: var(--brac-link);
    --bs-link-hover-color: var(--brac-link-hover);
    --bs-body-color: var(--brac-text-primary);
    --bs-body-bg: var(--brac-page-bg);
    --bs-border-color: var(--brac-border);
    --bs-secondary-color: var(--brac-text-secondary);
    --bs-heading-color: var(--brac-text-primary);
    --bs-emphasis-color: var(--brac-text-primary);
    --bs-secondary-bg: var(--brac-surface-muted);
    --bs-tertiary-bg: var(--brac-page-bg);
    --bs-border-color-translucent: rgba(77, 79, 83, 0.16);
}

/* Color usage guide --------------------------------------------------------
   Primary Pink: buttons, active menu, active tabs, focused inputs, and primary
   actions.
   Primary Dark: hover states, pressed states, and high-emphasis brand accents.
   Dark Gray: primary text, titles, and sidebar text.
   Blue: information states and supporting data visuals.
   Green: success states and positive confirmations.
   Yellow: highlights and attention markers.
   Orange: warning states and cautionary emphasis.
   Purple: charts, secondary highlights, and supporting brand moments.
   Neutrals: page surfaces, cards, tables, inputs, borders, dividers, muted text,
   modals, and dropdown surfaces.
   -------------------------------------------------------------------------- */

/* Bootstrap and Vuexy color system -----------------------------------------
   !important is used only for Bootstrap utility classes and Vuexy/vendor
   generated state selectors that are designed to win with high specificity. */

html,
body,
.layout-wrapper,
.layout-container,
.content-wrapper,
.content-wrapper .container-xxl,
.main-content {
    color: var(--app-text-primary);
    background-color: var(--app-body-bg);
}

a {
    color: var(--app-link-color);
}

a:hover,
a:focus {
    color: var(--app-link-hover);
}

.layout-navbar,
.navbar,
.layout-menu,
.menu,
.card,
.modal-content,
.dropdown-menu,
.toast {
    color: var(--app-text-primary);
    background-color: var(--app-surface-bg);
    border-color: var(--app-border-color);
}

.card,
.table,
.table > :not(caption) > * > *,
.modal-content,
.dropdown-menu {
    border-color: var(--app-border-color);
}

.text-primary,
.link-primary {
    color: var(--app-primary) !important;
}

.link-primary:hover,
.link-primary:focus {
    color: var(--app-primary-hover) !important;
}

.bg-primary {
    background-color: var(--app-primary) !important;
}

.border-primary {
    border-color: var(--app-primary) !important;
}

.bg-label-primary {
    color: var(--app-primary) !important;
    background-color: var(--app-primary-soft) !important;
}

.badge.bg-primary {
    color: var(--brac-white) !important;
    background-color: var(--app-primary) !important;
}

.alert-primary {
    color: var(--app-primary-hover);
    background-color: var(--app-primary-soft);
    border-color: rgba(var(--bs-primary-rgb), 0.24);
}

/* Button system -------------------------------------------------------------
   !important is used only where Vuexy, Bootstrap JS states, or plugin inline
   styles commonly override component color and shadow rules. */

.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 16px;
    border-width: 1px;
    border-radius: 6px;
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-button);
    font-weight: var(--brac-font-weight-regular);
    line-height: 1.25;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    background-image: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.btn:not(:disabled):not(.disabled),
button:not(:disabled),
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="reset"]:not(:disabled) {
    cursor: pointer;
}

.btn:disabled,
.btn.disabled,
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
    cursor: not-allowed;
    opacity: 1;
    box-shadow: none;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.show > .btn.dropdown-toggle {
    text-decoration: none;
    box-shadow: none;
    background-image: none;
}

.btn:focus,
.btn.focus,
.btn:focus-visible,
button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--brac-focus-ring);
}

.btn:disabled,
.btn.disabled {
    color: var(--brac-text-muted);
    background-color: var(--brac-surface-muted);
    border-color: var(--brac-border);
}

.btn-sm,
.btn-group-sm > .btn {
    min-height: 32px;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: var(--brac-font-size-caption);
}

.btn-lg,
.btn-group-lg > .btn {
    min-height: 48px;
    padding: 11px 20px;
    border-radius: 8px;
    font-size: var(--brac-font-size-subtitle-1);
}

.btn-primary,
button.btn-primary,
input.btn-primary,
.btn-check:checked + .btn-primary {
    color: var(--brac-white);
    background-color: var(--brac-primary);
    border-color: var(--brac-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle,
.btn-check:checked + .btn-primary:hover,
.btn-check:checked + .btn-primary:focus {
    color: var(--brac-white);
    background-color: var(--brac-primary-dark);
    border-color: var(--brac-primary-dark);
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: var(--brac-text-muted);
    background-color: var(--brac-surface-muted);
    border-color: var(--brac-border);
}

.btn-outline-primary,
.btn-label-primary {
    color: var(--brac-primary);
    background-color: transparent;
    border-color: var(--brac-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible,
.btn-label-primary:hover,
.btn-label-primary:focus,
.btn-label-primary:focus-visible {
    color: var(--brac-white);
    background-color: var(--brac-primary);
    border-color: var(--brac-primary);
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle,
.btn-label-primary:active,
.btn-label-primary.active,
.show > .btn-label-primary.dropdown-toggle {
    color: var(--brac-white);
    background-color: var(--brac-primary-dark);
    border-color: var(--brac-primary-dark);
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled,
.btn-label-primary:disabled,
.btn-label-primary.disabled {
    color: var(--brac-text-muted);
    background-color: transparent;
    border-color: var(--brac-border);
}

.btn-secondary,
.btn-outline-secondary,
.btn-light {
    color: var(--brac-text-primary);
    background-color: var(--brac-white);
    border-color: var(--brac-border);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:focus-visible,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:focus-visible,
.btn-light:hover,
.btn-light:focus,
.btn-light:focus-visible {
    color: var(--brac-text-primary);
    background-color: var(--brac-surface-muted);
    border-color: var(--brac-divider);
}

.btn-secondary:active,
.btn-secondary.active,
.show > .btn-secondary.dropdown-toggle,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.show > .btn-outline-secondary.dropdown-toggle,
.btn-light:active,
.btn-light.active,
.show > .btn-light.dropdown-toggle {
    color: var(--brac-text-primary);
    background-color: var(--brac-border-light);
    border-color: var(--brac-divider);
}

.btn-success {
    color: var(--brac-white);
    background-color: var(--brac-green);
    border-color: var(--brac-green);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:focus-visible,
.btn-success:active,
.btn-success.active,
.show > .btn-success.dropdown-toggle {
    color: var(--brac-white);
    background-color: color-mix(in srgb, var(--brac-green) 84%, var(--brac-black));
    border-color: color-mix(in srgb, var(--brac-green) 84%, var(--brac-black));
}

.btn-outline-success {
    color: var(--brac-green);
    background-color: transparent;
    border-color: var(--brac-green);
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:focus-visible,
.btn-outline-success:active,
.btn-outline-success.active,
.show > .btn-outline-success.dropdown-toggle {
    color: var(--brac-white);
    background-color: var(--brac-green);
    border-color: var(--brac-green);
}

.btn-warning {
    color: var(--brac-dark-gray);
    background-color: var(--brac-orange);
    border-color: var(--brac-orange);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:focus-visible,
.btn-warning:active,
.btn-warning.active,
.show > .btn-warning.dropdown-toggle {
    color: var(--brac-dark-gray);
    background-color: color-mix(in srgb, var(--brac-orange) 86%, var(--brac-black));
    border-color: color-mix(in srgb, var(--brac-orange) 86%, var(--brac-black));
}

.btn-outline-warning {
    color: var(--brac-dark-gray);
    background-color: transparent;
    border-color: var(--brac-orange);
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:focus-visible,
.btn-outline-warning:active,
.btn-outline-warning.active,
.show > .btn-outline-warning.dropdown-toggle {
    color: var(--brac-dark-gray);
    background-color: var(--brac-orange);
    border-color: var(--brac-orange);
}

.btn-info {
    color: var(--brac-dark-gray);
    background-color: var(--brac-blue);
    border-color: var(--brac-blue);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:focus-visible,
.btn-info:active,
.btn-info.active,
.show > .btn-info.dropdown-toggle {
    color: var(--brac-dark-gray);
    background-color: color-mix(in srgb, var(--brac-blue) 84%, var(--brac-black));
    border-color: color-mix(in srgb, var(--brac-blue) 84%, var(--brac-black));
}

.btn-outline-info {
    color: color-mix(in srgb, var(--brac-blue) 68%, var(--brac-black));
    background-color: transparent;
    border-color: var(--brac-blue);
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:focus-visible,
.btn-outline-info:active,
.btn-outline-info.active,
.show > .btn-outline-info.dropdown-toggle {
    color: var(--brac-dark-gray);
    background-color: var(--brac-blue);
    border-color: var(--brac-blue);
}

.btn-danger {
    color: var(--brac-white);
    background-color: var(--brac-danger);
    border-color: var(--brac-danger);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:focus-visible,
.btn-danger:active,
.btn-danger.active,
.show > .btn-danger.dropdown-toggle {
    color: var(--brac-white);
    background-color: color-mix(in srgb, var(--brac-danger) 84%, var(--brac-black));
    border-color: color-mix(in srgb, var(--brac-danger) 84%, var(--brac-black));
}

.btn-outline-danger {
    color: var(--brac-danger);
    background-color: transparent;
    border-color: var(--brac-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:focus-visible,
.btn-outline-danger:active,
.btn-outline-danger.active,
.show > .btn-outline-danger.dropdown-toggle {
    color: var(--brac-white);
    background-color: var(--brac-danger);
    border-color: var(--brac-danger);
}

.btn-dark {
    color: var(--brac-white);
    background-color: var(--brac-dark-gray);
    border-color: var(--brac-dark-gray);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:focus-visible,
.btn-dark:active,
.btn-dark.active,
.show > .btn-dark.dropdown-toggle {
    color: var(--brac-white);
    background-color: color-mix(in srgb, var(--brac-dark-gray) 82%, var(--brac-black));
    border-color: color-mix(in srgb, var(--brac-dark-gray) 82%, var(--brac-black));
}

.btn-primary:disabled,
.btn-primary.disabled,
.btn-secondary:disabled,
.btn-secondary.disabled,
.btn-success:disabled,
.btn-success.disabled,
.btn-warning:disabled,
.btn-warning.disabled,
.btn-info:disabled,
.btn-info.disabled,
.btn-danger:disabled,
.btn-danger.disabled,
.btn-light:disabled,
.btn-light.disabled,
.btn-dark:disabled,
.btn-dark.disabled {
    color: var(--brac-text-muted);
    background-color: var(--brac-surface-muted);
    border-color: var(--brac-border);
    box-shadow: none;
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled,
.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled,
.btn-outline-success:disabled,
.btn-outline-success.disabled,
.btn-outline-warning:disabled,
.btn-outline-warning.disabled,
.btn-outline-info:disabled,
.btn-outline-info.disabled,
.btn-outline-danger:disabled,
.btn-outline-danger.disabled {
    color: var(--brac-text-muted);
    background-color: transparent;
    border-color: var(--brac-border);
    box-shadow: none;
}

.btn-link,
.brac-text-button {
    min-height: auto;
    padding: 0;
    color: var(--brac-primary);
    background-color: transparent;
    border-color: transparent;
    border-radius: 4px;
    box-shadow: none;
}

.btn-link:hover,
.btn-link:focus,
.btn-link:focus-visible,
.brac-text-button:hover,
.brac-text-button:focus,
.brac-text-button:focus-visible {
    color: var(--brac-primary-dark);
    background-color: transparent;
    border-color: transparent;
    text-decoration: underline;
}

.btn-icon,
.btn-icon-only,
.btn-square,
.brac-btn-icon,
.brac-btn-square {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 6px;
}

.btn-icon.btn-sm,
.btn-sm.btn-icon,
.btn-icon-only.btn-sm,
.btn-sm.btn-icon-only,
.btn-square.btn-sm,
.btn-sm.btn-square,
.brac-btn-icon.btn-sm,
.brac-btn-square.btn-sm {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    border-radius: 5px;
}

.btn-icon.btn-lg,
.btn-lg.btn-icon,
.btn-icon-only.btn-lg,
.btn-lg.btn-icon-only,
.btn-square.btn-lg,
.btn-lg.btn-square,
.brac-btn-icon.btn-lg,
.brac-btn-square.btn-lg {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    border-radius: 8px;
}

.btn-group > .btn,
.btn-group-vertical > .btn {
    min-height: 40px;
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn {
    margin-left: -1px;
}

.dropdown-toggle::after {
    vertical-align: middle;
    margin-left: 2px;
}

.btn .spinner-border,
.btn .spinner-grow,
.btn-loading .spinner-border,
.btn-loading .spinner-grow {
    width: 1rem;
    height: 1rem;
    color: currentColor;
}

.btn.loading,
.btn.is-loading,
.btn-loading {
    pointer-events: none;
}

.rounded-pill,
.btn-pill {
    border-radius: 50rem;
}

.btn[class*="btn-"],
.swal2-styled,
.dt-button {
    box-shadow: none !important;
    background-image: none !important;
}

.btn-close,
.toast .btn-close,
.modal .btn-close {
    width: 1em;
    min-width: 1em;
    height: 1em;
    min-height: 1em;
    padding: 0.25em;
    border: 0;
    border-radius: 4px;
    background-color: transparent;
}

.modal .modal-header .btn-close {
    position: absolute;
    top: 1px;
    right: 1px;
    left: auto;
    inset-block-start: 1px;
    inset-inline-start: auto;
    inset-inline-end: 1px;
    margin: 0;
    transform: none;
    z-index: 2;
}

.modal .modal-header .btn-close:hover,
.modal .modal-header .btn-close:focus,
.modal .modal-header .btn-close:active {
    top: 1px;
    right: 1px;
    left: auto;
    inset-block-start: 1px;
    inset-inline-start: auto;
    inset-inline-end: 1px;
    margin: 0;
    transform: none;
}

.btn-close:focus,
.toast .btn-close:focus,
.modal .btn-close:focus {
    box-shadow: 0 0 0 3px var(--brac-focus-ring);
}

/* =========================================================
   GLOBAL BRAC FORM SYSTEM
   ========================================================= */

/* 1. Form tokens ----------------------------------------------------------- */

.form-control,
.form-select,
.input-group-text,
.form-check-input,
.select2-container,
.flatpickr-calendar,
.dropzone {
    --bs-form-control-bg: var(--brac-white);
    --bs-border-color: var(--brac-border);
    --bs-primary: var(--brac-primary);
    --bs-primary-rgb: 209, 13, 116;
    --bs-danger: var(--brac-danger);
    --bs-success: var(--brac-green);
}

/* 2. Labels ---------------------------------------------------------------- */

.form-label,
.col-form-label,
.form-check-label,
.input-label,
.control-label,
label {
    margin-bottom: 6px;
    color: var(--brac-text-primary);
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-body-2);
    font-weight: var(--brac-font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
}

.form-check-label {
    margin-bottom: 0;
    color: var(--brac-text-secondary);
    font-weight: var(--brac-font-weight-regular);
}

.text-danger,
.required,
.form-label .required,
.form-label .text-danger,
label .required,
label .text-danger {
    color: var(--brac-danger) !important;
}

/* 3. Base controls --------------------------------------------------------- */

.form-control,
.form-select,
input.form-control,
select.form-control,
select.form-select,
textarea.form-control {
    min-height: var(--brac-input-height);
    padding: var(--brac-input-padding-y) var(--brac-input-padding-x);
    color: var(--brac-text-primary);
    background-color: var(--brac-white);
    background-image: none;
    border: var(--brac-input-border-width) solid var(--brac-border);
    border-radius: var(--brac-input-radius);
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-body-2);
    font-weight: var(--brac-font-weight-regular);
    line-height: 1.4;
    box-shadow: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.form-control:not(:disabled):not([readonly]):not(.is-invalid):hover,
.form-select:not(:disabled):not([readonly]):not(.is-invalid):hover,
select.form-control:not(:disabled):not([readonly]):not(.is-invalid):hover,
textarea.form-control:not(:disabled):not([readonly]):not(.is-invalid):hover {
    background-color: var(--brac-white);
    border-color: var(--brac-input-hover-border);
    box-shadow: none;
}

/* 4. Sizes ----------------------------------------------------------------- */

.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
    min-height: var(--brac-input-height-sm);
    padding: var(--brac-input-padding-y-sm) var(--brac-input-padding-x-sm);
    border-radius: var(--brac-input-radius);
    font-size: var(--brac-font-size-caption);
    line-height: 1.35;
}

.form-control-lg,
.form-select-lg,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
    min-height: var(--brac-input-height-lg);
    padding: var(--brac-input-padding-y-lg) var(--brac-input-padding-x-lg);
    border-radius: var(--brac-input-radius-lg);
    font-size: var(--brac-font-size-subtitle-1);
    line-height: 1.4;
}

/* 5. Placeholder ----------------------------------------------------------- */

.form-control::placeholder,
input.form-control::placeholder,
textarea.form-control::placeholder,
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-search--inline .select2-search__field::placeholder {
    color: var(--brac-input-placeholder);
    font-size: inherit;
    opacity: 1;
}

/* 6. Focus ----------------------------------------------------------------- */

.form-control:focus,
.form-select:focus,
select.form-control:focus,
textarea.form-control:focus {
    color: var(--brac-text-primary);
    background-color: var(--brac-white);
    border-color: var(--brac-primary);
    outline: 0;
    box-shadow: 0 0 0 3px var(--brac-focus-ring);
}

.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: 0;
}

/* 7. Disabled/readonly ----------------------------------------------------- */

.form-control:disabled,
.form-select:disabled,
textarea.form-control:disabled,
.form-control.disabled,
.form-select.disabled {
    color: var(--brac-text-disabled);
    background-color: var(--brac-input-disabled-bg);
    border-color: var(--brac-border);
    opacity: 1;
    cursor: not-allowed;
    box-shadow: none;
}

.form-control[readonly],
textarea.form-control[readonly],
.form-control:read-only:not(:disabled) {
    color: var(--brac-text-secondary);
    background-color: var(--brac-input-readonly-bg);
    border-color: var(--brac-border);
    cursor: text;
}

.form-control[readonly]:focus,
textarea.form-control[readonly]:focus {
    border-color: var(--brac-input-hover-border);
    box-shadow: none;
}

/* 8. Validation ------------------------------------------------------------ */

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
select.form-control.is-invalid,
textarea.form-control.is-invalid {
    color: var(--brac-text-primary);
    background-color: var(--brac-white);
    border-color: var(--brac-danger);
    box-shadow: none;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus,
select.form-control.is-invalid:focus,
textarea.form-control.is-invalid:focus {
    border-color: var(--brac-danger);
    box-shadow: 0 0 0 3px var(--brac-input-invalid-ring);
}

.form-control.is-valid,
.form-select.is-valid,
.was-validated .form-control:valid,
.was-validated .form-select:valid,
select.form-control.is-valid,
textarea.form-control.is-valid {
    color: var(--brac-text-primary);
    background-color: var(--brac-white);
    border-color: var(--brac-green);
    box-shadow: none;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus,
.was-validated .form-control:valid:focus,
.was-validated .form-select:valid:focus,
select.form-control.is-valid:focus,
textarea.form-control.is-valid:focus {
    border-color: var(--brac-green);
    box-shadow: 0 0 0 3px var(--brac-input-valid-ring);
}

.invalid-feedback,
.valid-feedback,
.invalid-tooltip,
.valid-tooltip {
    margin-top: 4px;
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-caption);
    font-weight: var(--brac-font-weight-regular);
    line-height: 1.4;
}

.invalid-feedback,
.invalid-tooltip {
    color: var(--brac-danger);
}

.valid-feedback,
.valid-tooltip {
    color: var(--brac-green);
}

.invalid-tooltip,
.valid-tooltip {
    padding: 4px 8px;
    border-radius: var(--brac-input-radius);
    box-shadow: none;
}

.invalid-tooltip {
    background-color: color-mix(in srgb, var(--brac-danger) 10%, var(--brac-white));
}

.valid-tooltip {
    background-color: color-mix(in srgb, var(--brac-green) 10%, var(--brac-white));
}

/* 9. Helper text ----------------------------------------------------------- */

.form-text,
.help-text,
.helper-text,
.field-help,
.input-help {
    margin-top: 4px;
    color: var(--brac-text-muted);
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-caption);
    font-weight: var(--brac-font-weight-regular);
    line-height: 1.4;
}

/* 10. Textarea ------------------------------------------------------------- */

textarea.form-control,
.form-control[type="textarea"] {
    min-height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    resize: vertical;
}

/* 11. Select --------------------------------------------------------------- */

.form-select,
select.form-select {
    padding-right: 36px;
    background-color: var(--brac-white);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--brac-text-secondary) 50%),
        linear-gradient(135deg, var(--brac-text-secondary) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.form-select:focus,
select.form-select:focus,
select.form-control:focus {
    border-color: var(--brac-primary, #D10D74);
    box-shadow: 0 0 0 3px var(--brac-focus-ring, rgba(209, 13, 116, 0.16));
}

.form-select[multiple],
.form-select[size]:not([size="1"]),
select.form-control[multiple] {
    height: auto;
    min-height: var(--brac-input-height);
    padding-right: var(--brac-input-padding-x);
    background-image: none;
}

.layout-wrapper .form-control:not([type="file"]),
.layout-wrapper textarea.form-control,
.layout-wrapper .form-select {
    padding-left: 0.875rem;
}

.layout-wrapper .form-control:not([type="file"]),
.layout-wrapper textarea.form-control {
    padding-right: 0.875rem;
}

.layout-wrapper .form-select:not([multiple]):not([size]),
.layout-wrapper select.form-select:not([multiple]):not([size]),
.layout-wrapper select.form-control:not([multiple]):not([size]) {
    padding-right: 2.5rem;
}

.layout-wrapper .form-select[multiple],
.layout-wrapper .form-select[size]:not([size="1"]),
.layout-wrapper select.form-control[multiple] {
    padding-right: 0.875rem;
}

select option {
    color: var(--brac-text-primary);
    background-color: var(--brac-white);
}

select option:checked,
select option:hover,
select option:focus,
select option:active,
select:focus option:checked,
.form-select option:checked,
.form-select option:hover,
select.form-select option:focus,
select.form-select option:active,
select.form-control option:checked,
select.form-control option:hover {
    color: var(--brac-white) !important;
    background: var(--brac-primary, #D10D74) linear-gradient(0deg, var(--brac-primary, #D10D74), var(--brac-primary, #D10D74)) !important;
    background-color: var(--brac-primary, #D10D74) !important;
    box-shadow: 0 0 0 999px var(--brac-primary, #D10D74) inset !important;
}

/* 12. Input groups --------------------------------------------------------- */

.input-group {
    align-items: stretch;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text,
.input-group > .btn {
    min-height: var(--brac-input-height);
}

.input-group-text {
    padding: var(--brac-input-padding-y) var(--brac-input-padding-x);
    color: var(--brac-text-secondary);
    background-color: var(--brac-surface-muted);
    border: var(--brac-input-border-width) solid var(--brac-border);
    border-radius: var(--brac-input-radius);
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-body-2);
    font-weight: var(--brac-font-weight-regular);
    line-height: 1.4;
    box-shadow: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.input-group:focus-within > .form-control,
.input-group:focus-within > .form-select,
.input-group:focus-within > .input-group-text {
    border-color: var(--brac-primary);
}

.input-group:focus-within > .input-group-text {
    background-color: var(--brac-white);
}

.input-group > .form-control:focus,
.input-group > .form-select:focus {
    z-index: 3;
}

.input-group:has(.is-invalid) > .form-control,
.input-group:has(.is-invalid) > .form-select,
.input-group:has(.is-invalid) > .input-group-text {
    border-color: var(--brac-danger);
}

.input-group:has(.is-valid) > .form-control,
.input-group:has(.is-valid) > .form-select,
.input-group:has(.is-valid) > .input-group-text {
    border-color: var(--brac-green);
}

.input-group > .btn {
    border-radius: var(--brac-input-radius);
}

.input-group-merge .input-group-text,
.form-password-toggle .input-group-text {
    border-left-color: transparent;
}

.input-group-merge:focus-within .input-group-text,
.form-password-toggle .input-group:focus-within .input-group-text {
    border-left-color: transparent;
}

/* 13. Checkboxes/radios ---------------------------------------------------- */

.form-check {
    min-height: var(--brac-input-height-sm);
}

.form-check-input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.2em;
    background-color: var(--brac-white);
    border: var(--brac-input-border-width) solid var(--brac-border);
    box-shadow: none;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.form-check-input:hover:not(:disabled):not(:checked) {
    border-color: var(--brac-input-hover-border);
}

.form-check-input:focus {
    border-color: var(--brac-primary);
    outline: 0;
    box-shadow: 0 0 0 3px var(--brac-focus-ring);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--brac-primary);
    border-color: var(--brac-primary);
}

.form-check-input[type="radio"]:checked {
    background-color: var(--brac-white);
    border-color: var(--brac-primary);
    background-image: radial-gradient(circle, var(--brac-primary) 0 42%, transparent 45%);
}

.form-check-input:disabled {
    background-color: var(--brac-input-disabled-bg);
    border-color: var(--brac-border);
    opacity: 1;
    cursor: not-allowed;
}

.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label {
    color: var(--brac-text-disabled);
    cursor: not-allowed;
}

.form-check-input.is-invalid,
.was-validated .form-check-input:invalid {
    border-color: var(--brac-danger);
}

.form-check-input.is-invalid:focus,
.was-validated .form-check-input:invalid:focus {
    box-shadow: 0 0 0 3px var(--brac-input-invalid-ring);
}

.form-check-input.is-valid,
.was-validated .form-check-input:valid {
    border-color: var(--brac-green);
}

.form-check-input.is-valid:focus,
.was-validated .form-check-input:valid:focus {
    box-shadow: 0 0 0 3px var(--brac-input-valid-ring);
}

/* 14. Switches ------------------------------------------------------------- */

.form-switch .form-check-input {
    width: 2.5rem;
    height: 1.25rem;
    margin-top: 0.1em;
    background-color: var(--brac-text-muted);
    border-color: var(--brac-text-muted);
    background-image: radial-gradient(circle at 0.625rem 50%, var(--brac-white) 0 0.43rem, transparent 0.45rem);
    background-position: left center;
    background-size: 2.5rem 1.25rem;
}

.form-switch .form-check-input:checked {
    background-color: var(--brac-primary);
    border-color: var(--brac-primary);
    background-image: radial-gradient(circle at calc(100% - 0.625rem) 50%, var(--brac-white) 0 0.43rem, transparent 0.45rem);
}

.form-switch .form-check-input:disabled {
    background-color: var(--brac-border);
    border-color: var(--brac-border);
}

.switch-primary .switch-input:checked ~ .switch-toggle-slider,
.switch-input:checked ~ .switch-toggle-slider {
    background-color: var(--brac-primary);
    border-color: var(--brac-primary);
}

.switch-input:checked ~ .switch-toggle-slider::before {
    background-color: var(--brac-white);
}

.switch-input:focus ~ .switch-toggle-slider {
    box-shadow: 0 0 0 3px var(--brac-focus-ring);
}

/* 15. File inputs ---------------------------------------------------------- */

.form-control[type="file"],
input[type="file"].form-control,
input[type="file"]:not(.dz-hidden-input):not(.filepond--browser):not([hidden]) {
    height: var(--brac-input-height);
    min-height: var(--brac-input-height);
    max-height: var(--brac-input-height);
    padding: 0;
    color: var(--brac-text-secondary);
    background-color: var(--brac-white);
    border: var(--brac-input-border-width) solid var(--brac-border);
    border-radius: var(--brac-input-radius);
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-body-2);
    line-height: calc(var(--brac-input-height) - 2px);
    box-shadow: none;
    overflow: hidden;
    cursor: pointer;
}

.form-control[type="file"]::file-selector-button,
input[type="file"].form-control::file-selector-button,
input[type="file"]:not(.dz-hidden-input):not(.filepond--browser):not([hidden])::file-selector-button,
.form-control[type="file"]::-webkit-file-upload-button,
input[type="file"].form-control::-webkit-file-upload-button,
input[type="file"]:not(.dz-hidden-input):not(.filepond--browser):not([hidden])::-webkit-file-upload-button {
    width: auto;
    height: 100%;
    min-height: calc(var(--brac-input-height) - 2px);
    margin: 0 12px 0 0;
    padding: 0 14px;
    color: var(--brac-white);
    background-color: var(--brac-primary);
    border: 0;
    border-right: var(--brac-input-border-width) solid var(--brac-primary);
    border-radius: 3px 0 0 3px;
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-body-2);
    font-weight: var(--brac-font-weight-regular);
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.form-control[type="file"]:hover:not(:disabled)::file-selector-button,
input[type="file"].form-control:hover:not(:disabled)::file-selector-button,
input[type="file"]:not(.dz-hidden-input):not(.filepond--browser):not([hidden]):hover:not(:disabled)::file-selector-button,
.form-control[type="file"]:hover:not(:disabled)::-webkit-file-upload-button,
input[type="file"].form-control:hover:not(:disabled)::-webkit-file-upload-button,
input[type="file"]:not(.dz-hidden-input):not(.filepond--browser):not([hidden]):hover:not(:disabled)::-webkit-file-upload-button,
.form-control[type="file"]:active:not(:disabled)::file-selector-button,
input[type="file"].form-control:active:not(:disabled)::file-selector-button,
input[type="file"]:not(.dz-hidden-input):not(.filepond--browser):not([hidden]):active:not(:disabled)::file-selector-button,
.form-control[type="file"]:active:not(:disabled)::-webkit-file-upload-button,
input[type="file"].form-control:active:not(:disabled)::-webkit-file-upload-button,
input[type="file"]:not(.dz-hidden-input):not(.filepond--browser):not([hidden]):active:not(:disabled)::-webkit-file-upload-button {
    background-color: var(--brac-primary-dark);
    border-color: var(--brac-primary-dark);
}

.form-control[type="file"]:focus,
input[type="file"].form-control:focus,
input[type="file"]:not(.dz-hidden-input):not(.filepond--browser):not([hidden]):focus {
    color: var(--brac-text-secondary);
    border-color: var(--brac-primary);
    box-shadow: 0 0 0 3px var(--brac-focus-ring);
}

.form-control[type="file"]:disabled,
input[type="file"].form-control:disabled,
input[type="file"]:not(.dz-hidden-input):not(.filepond--browser):not([hidden]):disabled {
    color: var(--brac-text-disabled);
    background-color: var(--brac-input-disabled-bg);
    border-color: var(--brac-border);
    cursor: not-allowed;
}

.form-control[type="file"]:disabled::file-selector-button,
input[type="file"].form-control:disabled::file-selector-button,
input[type="file"]:not(.dz-hidden-input):not(.filepond--browser):not([hidden]):disabled::file-selector-button,
.form-control[type="file"]:disabled::-webkit-file-upload-button,
input[type="file"].form-control:disabled::-webkit-file-upload-button,
input[type="file"]:not(.dz-hidden-input):not(.filepond--browser):not([hidden]):disabled::-webkit-file-upload-button {
    color: var(--brac-text-muted);
    background-color: var(--brac-surface-muted);
    border-color: var(--brac-border);
    cursor: not-allowed;
}

.form-control[type="file"].is-invalid,
.was-validated .form-control[type="file"]:invalid,
input[type="file"].form-control.is-invalid,
.was-validated input[type="file"].form-control:invalid {
    border-color: var(--brac-danger);
}

.form-control[type="file"].is-invalid:focus,
.was-validated .form-control[type="file"]:invalid:focus,
input[type="file"].form-control.is-invalid:focus,
.was-validated input[type="file"].form-control:invalid:focus {
    border-color: var(--brac-danger);
    box-shadow: 0 0 0 3px var(--brac-input-invalid-ring);
}

.form-control[type="file"].is-valid,
.was-validated .form-control[type="file"]:valid,
input[type="file"].form-control.is-valid,
.was-validated input[type="file"].form-control:valid {
    border-color: var(--brac-green);
}

.form-control[type="file"].is-valid:focus,
.was-validated .form-control[type="file"]:valid:focus,
input[type="file"].form-control.is-valid:focus,
.was-validated input[type="file"].form-control:valid:focus {
    border-color: var(--brac-green);
    box-shadow: 0 0 0 3px var(--brac-input-valid-ring);
}

.form-control-sm[type="file"],
input[type="file"].form-control-sm {
    height: var(--brac-input-height-sm);
    min-height: var(--brac-input-height-sm);
    max-height: var(--brac-input-height-sm);
    font-size: var(--brac-font-size-caption);
    line-height: calc(var(--brac-input-height-sm) - 2px);
}

.form-control-sm[type="file"]::file-selector-button,
input[type="file"].form-control-sm::file-selector-button,
.form-control-sm[type="file"]::-webkit-file-upload-button,
input[type="file"].form-control-sm::-webkit-file-upload-button {
    min-height: calc(var(--brac-input-height-sm) - 2px);
    padding: 0 10px;
    font-size: var(--brac-font-size-caption);
}

.form-control-lg[type="file"],
input[type="file"].form-control-lg {
    height: var(--brac-input-height-lg);
    min-height: var(--brac-input-height-lg);
    max-height: var(--brac-input-height-lg);
    font-size: var(--brac-font-size-subtitle-1);
    line-height: calc(var(--brac-input-height-lg) - 2px);
}

.form-control-lg[type="file"]::file-selector-button,
input[type="file"].form-control-lg::file-selector-button,
.form-control-lg[type="file"]::-webkit-file-upload-button,
input[type="file"].form-control-lg::-webkit-file-upload-button {
    min-height: calc(var(--brac-input-height-lg) - 2px);
    padding: 0 18px;
    font-size: var(--brac-font-size-subtitle-1);
}

.dropzone {
    color: var(--brac-text-secondary);
    background-color: var(--brac-white);
    border: 1px dashed var(--brac-border);
    border-radius: var(--brac-input-radius);
    box-shadow: none;
}

.dropzone.dz-drag-hover {
    border-color: var(--brac-primary);
    background-color: var(--brac-active-bg);
}

/* 16. Select2 -------------------------------------------------------------- */

.select2-container {
    width: 100% !important;
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-body-2);
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: var(--brac-input-height);
    color: var(--brac-text-primary);
    background-color: var(--brac-white);
    border: var(--brac-input-border-width) solid var(--brac-border);
    border-radius: var(--brac-input-radius);
    box-shadow: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    min-height: calc(var(--brac-input-height) - 2px);
    padding-right: 34px;
    padding-left: var(--brac-input-padding-x);
    color: var(--brac-text-primary);
    line-height: calc(var(--brac-input-height) - 2px);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 34px;
    height: calc(var(--brac-input-height) - 2px);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--brac-text-secondary);
}

.select2-container--default .select2-selection--multiple {
    padding: 3px 6px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 3px;
    color: var(--brac-white);
    background-color: var(--brac-primary, #D10D74);
    border: 1px solid var(--brac-primary, #D10D74);
    border-radius: var(--brac-input-radius);
    font-size: var(--brac-font-size-caption);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    color: var(--brac-white);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--brac-primary, #D10D74);
    box-shadow: 0 0 0 3px var(--brac-focus-ring);
}

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    color: var(--brac-text-disabled);
    background-color: var(--brac-input-disabled-bg);
    border-color: var(--brac-border);
    cursor: not-allowed;
}

.select2-dropdown {
    color: var(--brac-text-primary);
    background-color: var(--brac-white);
    border: 1px solid var(--brac-border);
    border-radius: var(--brac-input-radius);
    box-shadow: 0 8px 18px rgba(77, 79, 83, 0.10);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    min-height: var(--brac-input-height-sm);
    color: var(--brac-text-primary);
    background-color: var(--brac-white);
    border: 1px solid var(--brac-border);
    border-radius: var(--brac-input-radius);
    outline: 0;
    box-shadow: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--brac-primary);
    box-shadow: 0 0 0 3px var(--brac-focus-ring);
}

.select2-results__option {
    color: var(--brac-text-primary);
    font-size: var(--brac-font-size-body-2);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    color: var(--brac-white);
    background-color: var(--brac-primary, #D10D74);
}

.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
    color: var(--brac-white);
    background-color: var(--brac-primary, #D10D74);
}

.is-invalid + .select2-container--default .select2-selection,
.was-validated select:invalid + .select2-container--default .select2-selection {
    border-color: var(--brac-danger);
}

.is-valid + .select2-container--default .select2-selection,
.was-validated select:valid + .select2-container--default .select2-selection {
    border-color: var(--brac-green);
}

/* 16.1 Bootstrap Select and tag-style dropdowns ---------------------------- */

.bootstrap-select > .dropdown-toggle {
    min-height: var(--brac-input-height);
    color: var(--brac-text-primary);
    background-color: var(--brac-white);
    border: var(--brac-input-border-width) solid var(--brac-border);
    border-radius: var(--brac-input-radius);
    box-shadow: none;
}

.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select > select.mobile-device:focus + .dropdown-toggle,
.bootstrap-select.show > .dropdown-toggle {
    border-color: var(--brac-primary, #D10D74);
    box-shadow: 0 0 0 3px var(--brac-focus-ring, rgba(209, 13, 116, 0.16));
    outline: 0 !important;
}

.bootstrap-select.disabled > .dropdown-toggle,
.bootstrap-select > .disabled.dropdown-toggle {
    color: var(--brac-text-disabled);
    background-color: var(--brac-input-disabled-bg);
    border-color: var(--brac-border);
    cursor: not-allowed;
}

.bootstrap-select .dropdown-menu {
    color: var(--brac-text-primary);
    background-color: var(--brac-white);
    border-color: var(--brac-border);
    box-shadow: 0 8px 18px rgba(77, 79, 83, 0.10);
}

.bootstrap-select .dropdown-menu .dropdown-item {
    color: var(--brac-text-primary);
}

.bootstrap-select .dropdown-menu .dropdown-item:hover,
.bootstrap-select .dropdown-menu .dropdown-item:focus {
    color: var(--brac-white);
    background-color: var(--brac-primary, #D10D74);
}

.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item:active,
.bootstrap-select .dropdown-menu li.selected .dropdown-item,
.bootstrap-select .dropdown-menu li.selected a {
    color: var(--brac-white);
    background-color: var(--brac-primary, #D10D74);
}

.bootstrap-select .bs-searchbox .form-control:focus {
    border-color: var(--brac-primary, #D10D74);
    box-shadow: 0 0 0 3px var(--brac-focus-ring, rgba(209, 13, 116, 0.16));
}

.is-invalid + .bootstrap-select > .dropdown-toggle,
.was-validated select:invalid + .bootstrap-select > .dropdown-toggle {
    border-color: var(--brac-danger);
}

.is-invalid + .bootstrap-select > .dropdown-toggle:focus,
.was-validated select:invalid + .bootstrap-select > .dropdown-toggle:focus {
    box-shadow: 0 0 0 3px var(--brac-input-invalid-ring);
}

.is-valid + .bootstrap-select > .dropdown-toggle,
.was-validated select:valid + .bootstrap-select > .dropdown-toggle {
    border-color: var(--brac-green);
}

.is-valid + .bootstrap-select > .dropdown-toggle:focus,
.was-validated select:valid + .bootstrap-select > .dropdown-toggle:focus {
    box-shadow: 0 0 0 3px var(--brac-input-valid-ring);
}

.tagify {
    --tag-bg: var(--brac-primary, #D10D74);
    --tag-hover: var(--brac-primary, #D10D74);
    --tag-text-color: var(--brac-white);
    --tag-remove-btn-color: var(--brac-white);
    --tag-remove-bg: rgba(255, 255, 255, 0.18);
    --tag-remove-btn-bg--hover: rgba(255, 255, 255, 0.28);
    border-color: var(--brac-border);
}

.tagify:hover {
    border-color: var(--brac-input-hover-border);
}

.tagify.tagify--focus {
    border-color: var(--brac-primary, #D10D74);
    box-shadow: 0 0 0 3px var(--brac-focus-ring, rgba(209, 13, 116, 0.16));
}

.tagify__dropdown__item {
    color: var(--brac-text-primary);
}

.tagify__dropdown__item--active,
.tagify__dropdown__item:hover {
    color: var(--brac-white);
    background-color: var(--brac-primary, #D10D74);
}

/* 17. Datepicker/Flatpickr ------------------------------------------------- */

.flatpickr-input.form-control,
.flatpickr-input.form-select,
.datepicker.form-control {
    background-color: var(--brac-white);
}

.flatpickr-calendar {
    color: var(--brac-text-primary);
    background: var(--brac-white);
    border: 1px solid var(--brac-border);
    border-radius: var(--brac-input-radius);
    box-shadow: 0 8px 18px rgba(77, 79, 83, 0.10);
}

.flatpickr-months,
.flatpickr-weekdays,
.flatpickr-current-month,
.flatpickr-weekday {
    color: var(--brac-text-primary);
    background: var(--brac-white);
}

.flatpickr-day {
    color: var(--brac-text-primary);
    border-radius: var(--brac-input-radius);
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    color: var(--brac-primary-dark);
    background: var(--brac-active-bg);
    border-color: var(--brac-active-bg);
}

.flatpickr-day.today {
    color: var(--brac-primary-dark);
    border-color: var(--brac-primary);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    color: var(--brac-white);
    background: var(--brac-primary);
    border-color: var(--brac-primary);
}

.flatpickr-prev-month,
.flatpickr-next-month {
    color: var(--brac-text-primary);
    border-radius: var(--brac-input-radius);
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    color: var(--brac-primary);
    background: var(--brac-hover-bg);
}

/* 17.1 Global select/date/time interaction color overrides ------------------ */

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--selected:hover,
.select2-container--default .select2-results__option--selected:focus,
.select2-container--default .select2-results__option[aria-selected="true"]:hover,
.select2-container--default .select2-results__option[data-selected="true"]:hover {
    color: var(--brac-white) !important;
    background-color: var(--brac-primary, #D10D74) !important;
}

.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
    color: var(--brac-white) !important;
    background-color: var(--brac-primary, #D10D74) !important;
}

.select2-container--default .select2-results__option:active {
    color: var(--brac-white) !important;
    background-color: var(--brac-primary-active, #97085E) !important;
}

.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection,
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--brac-primary, #D10D74) !important;
    box-shadow: 0 0 0 3px rgba(209, 13, 116, 0.18) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: var(--brac-white) !important;
    background-color: var(--brac-primary, #D10D74) !important;
    border-color: var(--brac-primary, #D10D74) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--brac-white) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--brac-white) !important;
    background-color: var(--brac-primary-active, #97085E) !important;
}

.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select > select.mobile-device:focus + .dropdown-toggle,
.bootstrap-select.show > .dropdown-toggle {
    border-color: var(--brac-primary, #D10D74) !important;
    box-shadow: 0 0 0 3px rgba(209, 13, 116, 0.18) !important;
}

.bootstrap-select .dropdown-menu .dropdown-item:hover,
.bootstrap-select .dropdown-menu .dropdown-item:focus,
.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu li.selected .dropdown-item,
.bootstrap-select .dropdown-menu li.selected a {
    color: var(--brac-white) !important;
    background-color: var(--brac-primary, #D10D74) !important;
}

.bootstrap-select .dropdown-menu .dropdown-item:active {
    color: var(--brac-white) !important;
    background-color: var(--brac-primary-active, #97085E) !important;
}

.bootstrap-select .bs-searchbox .form-control:focus {
    border-color: var(--brac-primary, #D10D74) !important;
    box-shadow: 0 0 0 3px rgba(209, 13, 116, 0.18) !important;
}

.flatpickr-calendar .flatpickr-days .flatpickr-day:hover,
.flatpickr-calendar .flatpickr-days .flatpickr-day:focus,
.flatpickr-calendar .flatpickr-days .flatpickr-day.prevMonthDay:hover,
.flatpickr-calendar .flatpickr-days .flatpickr-day.nextMonthDay:hover,
.flatpickr-calendar .flatpickr-days .flatpickr-day.prevMonthDay:focus,
.flatpickr-calendar .flatpickr-days .flatpickr-day.nextMonthDay:focus {
    color: var(--brac-white) !important;
    background: var(--brac-primary, #D10D74) !important;
    border-color: var(--brac-primary, #D10D74) !important;
}

.flatpickr-calendar .flatpickr-days .flatpickr-day.today,
.flatpickr-calendar .flatpickr-days .flatpickr-day.today:hover {
    color: var(--brac-primary, #D10D74) !important;
    background: rgba(209, 13, 116, 0.10) !important;
    border-color: var(--brac-primary, #D10D74) !important;
}

.flatpickr-calendar .flatpickr-days .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-days .flatpickr-day.selected.inRange,
.flatpickr-calendar .flatpickr-days .flatpickr-day.selected:focus,
.flatpickr-calendar .flatpickr-days .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-days .flatpickr-day.selected.nextMonthDay,
.flatpickr-calendar .flatpickr-days .flatpickr-day.selected.prevMonthDay,
.flatpickr-calendar .flatpickr-days .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-days .flatpickr-day.startRange.inRange,
.flatpickr-calendar .flatpickr-days .flatpickr-day.startRange:focus,
.flatpickr-calendar .flatpickr-days .flatpickr-day.startRange:hover,
.flatpickr-calendar .flatpickr-days .flatpickr-day.startRange.nextMonthDay,
.flatpickr-calendar .flatpickr-days .flatpickr-day.startRange.prevMonthDay,
.flatpickr-calendar .flatpickr-days .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-days .flatpickr-day.endRange.inRange,
.flatpickr-calendar .flatpickr-days .flatpickr-day.endRange:focus,
.flatpickr-calendar .flatpickr-days .flatpickr-day.endRange:hover,
.flatpickr-calendar .flatpickr-days .flatpickr-day.endRange.nextMonthDay,
.flatpickr-calendar .flatpickr-days .flatpickr-day.endRange.prevMonthDay,
.flatpickr-calendar .flatpickr-days .flatpickr-day.week.selected {
    color: var(--brac-white) !important;
    background: var(--brac-primary, #D10D74) !important;
    border-color: var(--brac-primary, #D10D74) !important;
}

.flatpickr-calendar .flatpickr-days .flatpickr-day.inRange,
.flatpickr-calendar .flatpickr-days .flatpickr-day.prevMonthDay.inRange,
.flatpickr-calendar .flatpickr-days .flatpickr-day.nextMonthDay.inRange,
.flatpickr-calendar .flatpickr-days .flatpickr-day.today.inRange {
    color: var(--brac-primary, #D10D74) !important;
    background: rgba(209, 13, 116, 0.10) !important;
    border-color: rgba(209, 13, 116, 0.10) !important;
    box-shadow: -5px 0 0 rgba(209, 13, 116, 0.10), 5px 0 0 rgba(209, 13, 116, 0.10) !important;
}

.flatpickr-calendar .flatpickr-time input:focus,
.flatpickr-calendar .flatpickr-current-month input.cur-year:focus,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:focus {
    color: var(--brac-text-primary) !important;
    background: rgba(209, 13, 116, 0.10) !important;
    box-shadow: 0 0 0 3px rgba(209, 13, 116, 0.18) !important;
}

.flatpickr-calendar .flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-calendar .flatpickr-time .flatpickr-am-pm:focus,
.flatpickr-calendar .numInputWrapper:hover,
.flatpickr-calendar .numInputWrapper span:hover {
    color: var(--brac-primary, #D10D74) !important;
    background: rgba(209, 13, 116, 0.10) !important;
}

.flatpickr-calendar .numInputWrapper span.arrowUp:hover::after {
    border-bottom-color: var(--brac-primary, #D10D74) !important;
}

.flatpickr-calendar .numInputWrapper span.arrowDown:hover::after {
    border-top-color: var(--brac-primary, #D10D74) !important;
}

.daterangepicker .calendar-table table td.available:not(.active, .in-range):hover,
.daterangepicker .calendar-table table td.available:focus,
.daterangepicker .ranges ul li:hover,
.daterangepicker .ranges ul li:focus {
    color: var(--brac-white) !important;
    background-color: var(--brac-primary, #D10D74) !important;
}

.daterangepicker .calendar-table table td.active:not(.off),
.daterangepicker .calendar-table table td.active.today.start-date:not(.off),
.daterangepicker .calendar-table table td.active.today.end-date:not(.off),
.daterangepicker .calendar-table table td.start-date:not(.end-date, .off),
.daterangepicker .calendar-table table td.end-date:not(.start-date, .off),
.daterangepicker .ranges ul li.active {
    color: var(--brac-white) !important;
    background: var(--brac-primary, #D10D74) !important;
    border-color: var(--brac-primary, #D10D74) !important;
}

.daterangepicker .calendar-table table td.start-date:not(.end-date, .off):hover,
.daterangepicker .calendar-table table td.end-date:not(.start-date, .off):hover,
.daterangepicker .calendar-table table td.active:not(.off):hover {
    color: var(--brac-white) !important;
    background: var(--brac-primary-active, #97085E) !important;
}

.daterangepicker .calendar-table table td.today,
.daterangepicker .calendar-table table td.today:hover {
    color: var(--brac-primary, #D10D74) !important;
    background: rgba(209, 13, 116, 0.10) !important;
    border-color: var(--brac-primary, #D10D74) !important;
}

.daterangepicker .calendar-table table td.in-range:not(.start-date, .end-date, .off),
.daterangepicker .calendar-table table td.in-range:not(.start-date, .end-date, .off):hover {
    color: var(--brac-primary, #D10D74) !important;
    background-color: rgba(209, 13, 116, 0.10) !important;
}

.daterangepicker .input-mini.active,
.daterangepicker .calendar-time select:focus {
    border-color: var(--brac-primary, #D10D74) !important;
    box-shadow: 0 0 0 3px rgba(209, 13, 116, 0.18) !important;
}

.daterangepicker .applyBtn,
.daterangepicker .btn-primary {
    color: var(--brac-white) !important;
    background-color: var(--brac-primary, #D10D74) !important;
    border-color: var(--brac-primary, #D10D74) !important;
}

.daterangepicker .applyBtn:hover,
.daterangepicker .applyBtn:focus,
.daterangepicker .btn-primary:hover,
.daterangepicker .btn-primary:focus {
    color: var(--brac-white) !important;
    background-color: var(--brac-primary-active, #97085E) !important;
    border-color: var(--brac-primary-active, #97085E) !important;
    box-shadow: 0 0 0 3px rgba(209, 13, 116, 0.18) !important;
}

.ui-timepicker-wrapper {
    color: var(--brac-text-primary) !important;
    background: var(--brac-white) !important;
    border-color: var(--brac-border) !important;
    box-shadow: 0 8px 18px rgba(77, 79, 83, 0.10) !important;
}

.ui-timepicker-wrapper .ui-timepicker-list li {
    color: var(--brac-text-primary) !important;
}

.ui-timepicker-wrapper .ui-timepicker-list li:hover,
.ui-timepicker-wrapper .ui-timepicker-list li:focus,
li.ui-timepicker-selected,
.ui-timepicker-wrapper .ui-timepicker-list li.ui-timepicker-selected,
.ui-timepicker-wrapper .ui-timepicker-list li.ui-timepicker-selected:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
    color: var(--brac-white) !important;
    background: var(--brac-primary, #D10D74) !important;
}

.ui-timepicker-wrapper .ui-timepicker-list li:active {
    color: var(--brac-white) !important;
    background: var(--brac-primary-active, #97085E) !important;
}

.ui-timepicker-wrapper .ui-timepicker-list li:hover .ui-timepicker-duration,
.ui-timepicker-wrapper .ui-timepicker-list li.ui-timepicker-selected .ui-timepicker-duration {
    color: var(--brac-white) !important;
}

input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus {
    border-color: var(--brac-primary, #D10D74) !important;
    box-shadow: 0 0 0 3px rgba(209, 13, 116, 0.18) !important;
    outline: 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    accent-color: var(--brac-primary, #D10D74);
}

/* 18. Authentication forms ------------------------------------------------- */

.brac-auth-body {
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    font-family: var(--brac-font-family);
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.16), transparent 28%),
        radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.10), transparent 30%),
        linear-gradient(135deg, var(--brac-primary, #D10D74) 0%, #B50966 55%, #8F0754 100%);
}

.brac-auth-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    padding: 32px 18px;
    isolation: isolate;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 72px 72px;
}

.brac-auth-wrapper::before,
.brac-auth-wrapper::after {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
}

.brac-auth-wrapper::before {
    width: min(42vw, 460px);
    aspect-ratio: 1;
    inset-block-start: 8%;
    inset-inline-end: 8%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 32px;
    transform: rotate(14deg);
    background: rgba(255, 255, 255, 0.05);
}

.brac-auth-wrapper::after {
    width: min(36vw, 380px);
    aspect-ratio: 1;
    inset-block-end: 6%;
    inset-inline-start: 7%;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(236, 194, 0, 0.24) 0%, rgba(236, 194, 0, 0.10) 36%, transparent 68%);
}

.brac-auth-card {
    width: min(100%, 440px);
    padding: 34px;
    color: var(--brac-text-primary);
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 8px;
    box-shadow: 0 28px 70px rgba(65, 0, 38, 0.26);
    backdrop-filter: blur(10px);
}

.brac-auth-card-header {
    display: grid;
    gap: 22px;
    margin-bottom: 28px;
    text-align: center;
}

.brac-auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 132px;
    min-height: 54px;
    padding: 8px 12px;
    background: var(--brac-white);
    border: 1px solid var(--brac-border-light);
    border-radius: 6px;
}

.brac-auth-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.brac-auth-title {
    margin: 0 0 8px;
    color: var(--brac-text-primary);
    font-size: 24px;
    font-weight: var(--brac-font-weight-bold);
    line-height: 1.25;
    letter-spacing: 0;
}

.brac-auth-subtitle {
    margin: 0;
    color: var(--brac-text-secondary);
    font-size: var(--brac-font-size-body-2);
    line-height: var(--brac-line-height-body);
}

.brac-auth-form .form-label {
    margin-bottom: 8px;
    color: var(--brac-text-primary);
    font-weight: var(--brac-font-weight-medium);
}

.brac-auth-form .form-control,
.brac-auth-form .input-group-text {
    border-color: var(--brac-border);
    border-radius: var(--brac-input-radius-lg);
}

.brac-auth-form .form-control {
    min-height: var(--brac-input-height-lg);
    background-color: var(--brac-white);
}

.brac-auth-form .input-group .form-control {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.brac-auth-form .input-group .input-group-text {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.brac-auth-form .form-control:focus {
    border-color: var(--brac-primary);
    box-shadow: 0 0 0 0.18rem var(--brac-focus-ring);
}

.brac-auth-link {
    color: var(--brac-primary);
    font-weight: var(--brac-font-weight-medium);
}

.brac-auth-link:hover,
.brac-auth-link:focus {
    color: var(--brac-primary-dark);
}

.brac-auth-form .form-check-input {
    border-color: var(--brac-divider);
}

.brac-auth-form .form-check-input:checked {
    background-color: var(--brac-primary);
    border-color: var(--brac-primary);
}

.brac-auth-submit {
    min-height: 46px;
    border: 0;
    border-radius: 6px;
    font-weight: var(--brac-font-weight-bold);
    box-shadow: 0 10px 24px rgba(var(--bs-primary-rgb), 0.28);
}

.brac-auth-alert {
    margin-top: 10px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: var(--brac-font-size-body-2);
}

.brac-auth-field-error {
    display: block;
    margin-top: 8px;
    font-size: var(--brac-font-size-caption);
}

.authentication-wrapper .form-control,
.authentication-wrapper .form-select,
.authentication-wrapper .input-group-text,
.auth-wrapper .form-control,
.auth-wrapper .form-select,
.auth-wrapper .input-group-text,
.login-page .form-control,
.login-page .input-group-text {
    min-height: var(--brac-input-height);
}

.brac-auth-wrapper .brac-auth-form .form-control,
.brac-auth-wrapper .brac-auth-form .input-group-text {
    min-height: var(--brac-input-height-lg);
}

.form-password-toggle .input-group-text,
#togglePassword.input-group-text {
    color: var(--brac-text-secondary);
    background-color: var(--brac-white);
    cursor: pointer;
}

.form-password-toggle .input-group-text:hover,
#togglePassword.input-group-text:hover {
    color: var(--brac-primary);
}

@media (max-width: 575.98px) {
    .brac-auth-wrapper {
        padding: 22px 14px;
    }

    .brac-auth-wrapper::before {
        width: 260px;
        inset-block-start: 3%;
        inset-inline-end: -110px;
    }

    .brac-auth-wrapper::after {
        width: 260px;
        inset-block-end: -90px;
        inset-inline-start: -90px;
    }

    .brac-auth-card {
        padding: 26px 20px;
    }

    .brac-auth-title {
        font-size: 21px;
    }
}

@supports not (backdrop-filter: blur(10px)) {
    .brac-auth-card {
        background: var(--brac-white);
    }
}

/* 19. Responsive rules ----------------------------------------------------- */

@media (max-width: 767.98px) {
    .form-control,
    .form-select,
    .input-group,
    .select2-container {
        max-width: 100%;
    }

    .input-group {
        flex-wrap: nowrap;
    }

    .input-group-text {
        min-width: 0;
        white-space: nowrap;
    }

    .invalid-feedback,
    .valid-feedback,
    .form-text,
    .help-text,
    .helper-text {
        overflow-wrap: anywhere;
    }
}

.menu .menu-link,
.menu .menu-icon {
    color: var(--app-text-primary);
}

.menu .menu-header,
.menu .menu-header-text {
    color: var(--app-text-secondary);
}

.menu .menu-item:not(.active) > .menu-link:hover {
    color: var(--app-text-primary);
    background-color: var(--brac-hover-bg);
}

.menu .menu-item.open > .menu-link,
.menu .menu-item.open > .menu-link .menu-icon {
    color: var(--app-primary);
    background-color: var(--app-primary-soft);
}

.menu .menu-item.active:not(.open) > .menu-link {
    color: var(--brac-white);
    background-color: var(--brac-primary);
}

.menu .menu-item.active:not(.open) > .menu-link:hover,
.menu .menu-item.active:not(.open) > .menu-link:focus {
    color: var(--brac-white);
    background-color: var(--brac-primary-dark);
}

.menu .menu-item.active:not(.open) > .menu-link .menu-icon,
.menu .menu-item.active:not(.open) > .menu-link i,
.menu .menu-item.active:not(.open) > .menu-link svg,
.menu .menu-item.active:not(.open) > .menu-link iconify-icon,
.menu .menu-item.active:not(.open) > .menu-link div,
.menu .menu-item.active:not(.open) > .menu-link .menu-toggle-icon,
.menu .menu-item.active:not(.open) > .menu-link::after {
    color: var(--brac-white);
}

.menu .menu-item.active:not(.open) > .menu-link .badge {
    color: var(--brac-white);
    background-color: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.32);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--app-primary);
    border-color: var(--app-primary);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.dropdown-item.active,
.dropdown-item:active {
    color: var(--brac-white);
    background-color: var(--app-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--app-text-primary);
    background-color: var(--brac-hover-bg);
}

.page-link {
    color: var(--app-primary);
    background-color: var(--app-surface-bg);
    border-color: var(--app-border-color);
}

.page-link:hover,
.page-link:focus {
    color: var(--app-primary-hover);
    background-color: var(--app-primary-soft);
    border-color: var(--app-primary);
    box-shadow: 0 0 0 0.2rem var(--brac-focus-ring);
}

.page-item.active .page-link,
.dt-paging-button.active .page-link {
    color: var(--brac-white);
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}

.table {
    color: var(--app-text-primary);
    background-color: var(--app-table-bg);
    border-color: var(--app-table-border);
}

.table thead th,
.table-light,
.table .table-light {
    color: var(--app-text-primary);
    background-color: var(--app-table-header-bg);
    border-color: var(--app-table-border);
    text-transform: none;
}

.table-active,
.table-active > th,
.table-active > td,
.table-hover > tbody > tr:hover > * {
    color: var(--app-text-primary);
    background-color: var(--app-primary-soft);
}

.progress-bar {
    color: var(--brac-white);
    background-color: var(--app-primary);
}

.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--app-primary) !important;
}

/* Plugin color overrides --------------------------------------------------- */

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button.current:hover {
    color: var(--brac-white) !important;
    background: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dt-container .dt-paging .dt-paging-button:hover {
    color: var(--app-primary-hover) !important;
    background: var(--app-primary-soft) !important;
    border-color: var(--app-primary) !important;
}

.dt-buttons .dt-button,
.dataTables_wrapper .dt-button,
.dt-container .dt-button,
.dt-container .buttons-html5,
.dt-container .buttons-print,
.dt-container .buttons-collection {
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 6px;
    color: var(--brac-white) !important;
    background: var(--brac-primary) !important;
    border-color: var(--brac-primary) !important;
}

.dt-buttons .dt-button:hover,
.dataTables_wrapper .dt-button:hover,
.dt-container .dt-button:hover,
.dt-container .buttons-html5:hover,
.dt-container .buttons-print:hover,
.dt-container .buttons-collection:hover {
    color: var(--brac-white) !important;
    background: var(--brac-primary-dark) !important;
    border-color: var(--brac-primary-dark) !important;
}

.dt-buttons .dt-button:focus,
.dataTables_wrapper .dt-button:focus,
.dt-container .dt-button:focus {
    box-shadow: 0 0 0 3px var(--brac-focus-ring) !important;
}

.select2-container--default .select2-results__option--selected {
    color: var(--brac-white);
    background-color: var(--app-primary);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    color: var(--brac-white);
    background-color: var(--brac-primary);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    color: var(--brac-white);
    background: var(--app-primary);
    border-color: var(--app-primary);
}

.flatpickr-day.today {
    border-color: var(--app-primary);
}

.flatpickr-prev-month,
.flatpickr-next-month {
    color: var(--brac-text-primary);
    border-radius: 6px;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    color: var(--brac-primary);
    background: var(--brac-hover-bg);
}

.swal2-confirm,
.swal2-styled.swal2-confirm {
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 6px;
    color: var(--brac-white) !important;
    background-color: var(--brac-primary) !important;
    border: 1px solid var(--brac-primary) !important;
}

.swal2-confirm:hover,
.swal2-styled.swal2-confirm:hover {
    color: var(--brac-white) !important;
    background-color: var(--brac-primary-dark) !important;
    border-color: var(--brac-primary-dark) !important;
}

.swal2-cancel,
.swal2-styled.swal2-cancel {
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 6px;
    color: var(--brac-text-primary) !important;
    background-color: var(--brac-white) !important;
    border: 1px solid var(--brac-border) !important;
}

.swal2-cancel:hover,
.swal2-styled.swal2-cancel:hover {
    color: var(--brac-text-primary) !important;
    background-color: var(--brac-surface-muted) !important;
    border-color: var(--brac-divider) !important;
}

.swal2-deny,
.swal2-styled.swal2-deny {
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 6px;
    color: var(--brac-white) !important;
    background-color: var(--brac-danger) !important;
    border: 1px solid var(--brac-danger) !important;
}

.swal2-deny:hover,
.swal2-styled.swal2-deny:hover {
    color: var(--brac-white) !important;
    background-color: color-mix(in srgb, var(--brac-danger) 84%, var(--brac-black)) !important;
    border-color: color-mix(in srgb, var(--brac-danger) 84%, var(--brac-black)) !important;
}

.swal2-styled:focus {
    box-shadow: 0 0 0 3px var(--brac-focus-ring) !important;
}

.ql-toolbar .ql-picker-label:hover,
.ql-toolbar .ql-picker-item:hover,
.ql-toolbar button:hover,
.ql-toolbar button:focus,
.ql-toolbar button.ql-active,
.ql-toolbar .ql-picker-label.ql-active,
.ql-toolbar .ql-picker-item.ql-selected {
    color: var(--app-primary);
}

.ql-toolbar button:hover .ql-stroke,
.ql-toolbar button:focus .ql-stroke,
.ql-toolbar button.ql-active .ql-stroke,
.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-toolbar .ql-picker-label.ql-active .ql-stroke {
    stroke: var(--app-primary);
}

.ql-toolbar button:hover .ql-fill,
.ql-toolbar button:focus .ql-fill,
.ql-toolbar button.ql-active .ql-fill {
    fill: var(--app-primary);
}

.ql-toolbar button {
    min-width: 28px;
    min-height: 28px;
    padding: 3px 5px;
    border-radius: 5px;
    background-color: transparent;
    border-color: transparent;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--brac-text-secondary);
    border-radius: 4px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--brac-white);
    border-color: rgba(255, 255, 255, 0.28);
    border-radius: 4px;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--brac-danger);
    background-color: var(--brac-border-light);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--brac-white);
    background-color: rgba(255, 255, 255, 0.22);
}

.dropzone.dz-drag-hover {
    border-color: var(--app-primary);
}

.dropzone .dz-preview .dz-remove,
.dropzone .dz-message .btn,
.dropzone .dz-message button {
    color: var(--brac-primary);
    background-color: transparent;
    border-color: var(--brac-primary);
}

.dropzone .dz-preview .dz-remove:hover,
.dropzone .dz-message .btn:hover,
.dropzone .dz-message button:hover {
    color: var(--brac-white);
    background-color: var(--brac-primary);
    border-color: var(--brac-primary);
}

.modal-footer .btn {
    min-height: 40px;
}

/* BRAC confirmation modals --------------------------------------------------
   Scoped to confirmation flows so generic Bootstrap modals keep their shape. */

.brac-confirm-dialog {
    width: min(100% - 24px, 460px);
    max-width: 460px;
    margin-right: auto;
    margin-left: auto;
}

.brac-confirm-modal.modal-content {
    overflow: hidden;
    color: #4D4F53;
    background: var(--brac-white);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(77, 79, 83, 0.18);
}

.brac-confirm-header {
    position: relative;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 13px 18px;
    color: var(--brac-white);
    background: var(--brac-primary);
    border: 0;
}

.brac-confirm-header .modal-title {
    color: var(--brac-white);
    font-size: var(--brac-font-size-h6);
    font-weight: var(--brac-font-weight-bold);
    line-height: 1.25;
}

.brac-confirm-header .btn-close {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    opacity: 1;
    filter: invert(1) grayscale(100%) brightness(200%);
}

.brac-confirm-header .btn-close:hover,
.brac-confirm-header .btn-close:focus,
.brac-confirm-header .btn-close:active {
    opacity: 0.85;
}

.brac-confirm-body {
    padding: 28px 30px 18px;
}

.brac-confirm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
}

.brac-confirm-icon .icon-base {
    font-size: 32px;
    line-height: 1;
}

.brac-confirm-icon--warning {
    color: #FFA100;
    background: rgba(255, 161, 0, 0.14);
}

.brac-confirm-icon--success {
    color: #007161;
    background: rgba(0, 113, 97, 0.12);
}

.brac-confirm-icon--info {
    color: #3DB7E4;
    background: rgba(61, 183, 228, 0.14);
}

.brac-confirm-title {
    margin: 0 0 8px;
    color: #4D4F53;
    font-size: 1.125rem;
    font-weight: var(--brac-font-weight-bold);
    line-height: 1.3;
}

.brac-confirm-message {
    max-width: 340px;
    margin: 0 auto;
    color: #4D4F53;
    font-size: var(--brac-font-size-body-2);
    line-height: 1.55;
}

.brac-confirm-footer {
    justify-content: center;
    gap: 10px;
    padding: 0 30px 28px;
    border: 0;
}

.brac-confirm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 18px;
    border-radius: 6px;
    font-size: var(--brac-font-size-body-2);
    font-weight: var(--brac-font-weight-bold);
    line-height: 1.25;
    box-shadow: none;
}

.brac-confirm-btn .icon-base {
    color: currentColor;
    font-size: 18px;
}

.brac-confirm-cancel {
    color: var(--brac-primary);
    background: var(--brac-white);
    border: 1px solid var(--brac-primary);
}

.brac-confirm-cancel:hover,
.brac-confirm-cancel:focus {
    color: var(--brac-white);
    background: var(--brac-primary);
    border-color: var(--brac-primary);
    box-shadow: 0 0 0 3px var(--brac-focus-ring);
}

.brac-confirm-delete,
.brac-confirm-warning {
    color: var(--brac-white);
    background: #FFA100;
    border: 1px solid #FFA100;
}

.brac-confirm-delete:hover,
.brac-confirm-delete:focus,
.brac-confirm-warning:hover,
.brac-confirm-warning:focus {
    color: var(--brac-white);
    background: #D98900;
    border-color: #D98900;
    box-shadow: 0 0 0 3px rgba(255, 161, 0, 0.22);
}

.brac-confirm-success {
    color: var(--brac-white);
    background: #007161;
    border: 1px solid #007161;
}

.brac-confirm-success:hover,
.brac-confirm-success:focus {
    color: var(--brac-white);
    background: #00594D;
    border-color: #00594D;
    box-shadow: 0 0 0 3px rgba(0, 113, 97, 0.18);
}

.brac-confirm-info {
    color: var(--brac-white);
    background: #3DB7E4;
    border: 1px solid #3DB7E4;
}

.brac-confirm-info:hover,
.brac-confirm-info:focus {
    color: var(--brac-white);
    background: #269BC6;
    border-color: #269BC6;
    box-shadow: 0 0 0 3px rgba(61, 183, 228, 0.2);
}

@media (max-width: 575.98px) {
    .brac-confirm-body {
        padding: 24px 20px 16px;
    }

    .brac-confirm-footer {
        flex-direction: column-reverse;
        padding: 0 20px 24px;
    }

    .brac-confirm-footer .brac-confirm-btn {
        width: 100%;
    }
}

/* Form Elements Reference ---------------------------------------------------
   Static internal UI reference page. Scoped so production forms are unaffected. */

.form-elements-reference-page .card {
    overflow: visible;
}

.form-elements-reference-page .reference-section {
    padding: 18px 0 8px;
    border-top: 1px solid var(--brac-border-light);
}

.form-elements-reference-page .reference-section:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.form-elements-reference-page .reference-section-last {
    padding-bottom: 0;
}

.form-elements-reference-page .reference-section-title {
    margin: 0 0 14px;
    color: var(--brac-text-primary);
    font-size: var(--brac-font-size-body-1);
    font-weight: var(--brac-font-weight-bold);
    line-height: 1.3;
}

.form-elements-reference-page .reference-code-label {
    display: flex;
    align-items: center;
    color: var(--brac-text-secondary);
    background: var(--brac-page-bg);
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: var(--brac-font-size-caption);
}

.form-elements-reference-page .reference-image-preview {
    width: 80px;
    height: 80px;
    border: 1px solid var(--brac-border);
    border-radius: 6px;
    object-fit: cover;
}

.form-elements-reference-page .reference-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 82px;
    padding: 16px;
    color: var(--brac-primary);
    background: color-mix(in srgb, var(--brac-primary) 6%, var(--brac-white));
    border: 1px dashed var(--brac-primary);
    border-radius: 6px;
    text-align: center;
}

.form-elements-reference-page .reference-dropzone .icon-base {
    font-size: 22px;
}

.form-elements-reference-page .reference-otp-group {
    display: grid;
    grid-template-columns: repeat(4, 44px);
    gap: 8px;
}

.form-elements-reference-page .reference-otp-group .form-control {
    padding-right: 0;
    padding-left: 0;
    text-align: center;
}

.form-elements-reference-page .reference-strength {
    height: 6px;
    background: var(--brac-border-light);
}

.form-elements-reference-page .reference-strength .progress-bar {
    background: #007161;
}

.form-elements-reference-page .reference-editor {
    min-height: 140px;
    background: var(--brac-white);
}

.form-elements-reference-page .reference-button-grid {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 575.98px) {
    .form-elements-reference-page .reference-button-grid .btn {
        width: 100%;
    }

    .form-elements-reference-page .reference-otp-group {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* BRAC Toast Notifications --------------------------------------------------
   Bootstrap Toast is the active notification library; these styles brand the
   shared toast surface without changing existing trigger logic. */

.brac-toast-stack {
    position: fixed !important;
    top: auto !important;
    right: 24px !important;
    bottom: 12px !important;
    left: auto !important;
    z-index: var(--brac-z-toast, 1080);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    width: min(380px, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none;
}

.brac-toast.toast,
.toast.brac-toast {
    position: relative;
    display: block;
    width: 100%;
    max-width: 380px;
    overflow: hidden;
    border: 0;
    border: 1px solid rgba(77, 79, 83, 0.08);
    border-left: 7px solid currentColor;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
    background-image: none;
    opacity: 0;
    transform: translateX(28px);
    transition: opacity 280ms ease, transform 280ms ease;
    pointer-events: none;
}

.brac-toast.toast.showing,
.brac-toast.toast.show {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.brac-toast.toast.hide {
    opacity: 0;
    transform: translateX(18px);
}

.brac-toast .d-flex {
    align-items: flex-start;
    gap: 12px;
    min-height: 78px;
    padding: 16px 14px 16px 16px;
}

.brac-toast .toast-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    color: inherit;
    font-family: var(--brac-font-family);
}

.brac-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin-top: 1px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
}

.brac-toast-title {
    margin: 0 0 3px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.brac-toast-message {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

.brac-toast .btn-close {
    flex: 0 0 auto;
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    margin: -2px 0 0 0 !important;
    padding: 4px;
    opacity: 0.62;
    filter: none;
    box-shadow: none;
}

.brac-toast .btn-close:hover,
.brac-toast .btn-close:focus {
    opacity: 1;
    filter: invert(18%) sepia(94%) saturate(3824%) hue-rotate(314deg) brightness(86%) contrast(94%);
    box-shadow: 0 0 0 3px var(--brac-focus-ring);
}

.brac-toast-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(77, 79, 83, 0.08);
}

.brac-toast-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--brac-primary);
    transform-origin: left center;
}

.brac-toast.show .brac-toast-progress span,
.brac-toast.showing .brac-toast-progress span {
    animation: brac-toast-progress var(--brac-toast-duration, 3000ms) linear forwards;
}

.brac-toast--success,
.toast.brac-toast--success.bg-success {
    color: #16A34A;
    background: linear-gradient(135deg, #DCFCE7 0%, #ECFDF3 100%) !important;
    border-color: rgba(22, 163, 74, 0.28);
    border-left-color: #16A34A;
}

.brac-toast--success .brac-toast-icon {
    background: rgba(22, 163, 74, 0.16);
}

.brac-toast--success .brac-toast-title {
    color: #14532D;
}

.brac-toast--success .brac-toast-message {
    color: #166534;
}

.brac-toast--error,
.toast.brac-toast--error.bg-danger {
    color: #DC2626;
    background: linear-gradient(135deg, #FEE2E2 0%, #FEF2F2 100%) !important;
    border-color: rgba(220, 38, 38, 0.28);
    border-left-color: #DC2626;
}

.brac-toast--error .brac-toast-icon {
    background: rgba(220, 38, 38, 0.16);
}

.brac-toast--error .brac-toast-title {
    color: #7F1D1D;
}

.brac-toast--error .brac-toast-message {
    color: #991B1B;
}

.brac-toast--warning,
.toast.brac-toast--warning.bg-warning {
    color: #EA580C;
    background: linear-gradient(135deg, #FFEDD5 0%, #FFF7ED 100%) !important;
    border-color: rgba(234, 88, 12, 0.3);
    border-left-color: #EA580C;
}

.brac-toast--warning .brac-toast-icon {
    background: rgba(234, 88, 12, 0.16);
}

.brac-toast--warning .brac-toast-title {
    color: #9A3412;
}

.brac-toast--warning .brac-toast-message {
    color: #C2410C;
}

.brac-toast--info,
.toast.brac-toast--info.bg-info {
    color: #2563EB;
    background: linear-gradient(135deg, #DBEAFE 0%, #EFF6FF 100%) !important;
    border-color: rgba(37, 99, 235, 0.28);
    border-left-color: #2563EB;
}

.brac-toast--info .brac-toast-icon {
    background: rgba(37, 99, 235, 0.16);
}

.brac-toast--info .brac-toast-title {
    color: #1E3A8A;
}

.brac-toast--info .brac-toast-message {
    color: #1D4ED8;
}

@keyframes brac-toast-progress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

@media (max-width: 575.98px) {
    .brac-toast-stack {
        right: 16px !important;
        bottom: 10px !important;
        left: 16px !important;
        align-items: center;
        width: auto;
        max-width: none;
    }

    .brac-toast.toast,
    .toast.brac-toast {
        max-width: 100%;
        transform: translateY(22px);
    }

    .brac-toast.toast.showing,
    .brac-toast.toast.show {
        transform: translateY(0);
    }

    .brac-toast.toast.hide {
        transform: translateY(16px);
    }
}

.ps__thumb-y,
.ps__thumb-x {
    background-color: rgba(var(--bs-primary-rgb), 0.48);
}

/* Base typography ---------------------------------------------------------- */

html,
body {
    font-family: var(--brac-font-family);
}

body {
    font-size: var(--brac-font-size-body-2);
    font-weight: var(--brac-font-weight-regular);
    line-height: var(--brac-line-height-body);
}

h1,
.h1,
.brac-h1 {
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-h1);
    font-style: normal;
    font-weight: var(--brac-font-weight-regular);
    line-height: var(--brac-line-height-heading);
}

h2,
.h2,
.brac-h2 {
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-h2);
    font-style: normal;
    font-weight: var(--brac-font-weight-regular);
    line-height: var(--brac-line-height-heading);
}

h3,
.h3,
.brac-h3 {
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-h3);
    font-style: normal;
    font-weight: var(--brac-font-weight-regular);
    line-height: var(--brac-line-height-heading);
}

h4,
.h4,
.brac-h4 {
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-h4);
    font-style: normal;
    font-weight: var(--brac-font-weight-regular);
    line-height: var(--brac-line-height-heading);
}

h5,
.h5,
.brac-h5 {
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-h5);
    font-style: normal;
    font-weight: var(--brac-font-weight-bold);
    line-height: var(--brac-line-height-heading);
}

h6,
.h6,
.brac-h6 {
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-h6);
    font-style: normal;
    font-weight: var(--brac-font-weight-bold);
    line-height: var(--brac-line-height-heading);
}

.brac-subtitle-1 {
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-subtitle-1);
    font-style: normal;
    font-weight: var(--brac-font-weight-regular);
    line-height: var(--brac-line-height-body);
}

.brac-subtitle-2 {
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-subtitle-2);
    font-style: normal;
    font-weight: var(--brac-font-weight-medium);
    line-height: var(--brac-line-height-body);
}

.brac-body-1 {
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-body-1);
    font-style: normal;
    font-weight: var(--brac-font-weight-regular);
    line-height: var(--brac-line-height-body);
}

.brac-body-2 {
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-body-2);
    font-style: normal;
    font-weight: var(--brac-font-weight-regular);
    line-height: var(--brac-line-height-body);
}

.brac-button-text {
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-button);
    font-style: normal;
    font-weight: var(--brac-font-weight-regular);
    line-height: var(--brac-line-height-body);
}

.brac-caption {
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-caption);
    font-style: normal;
    font-weight: var(--brac-font-weight-regular);
    line-height: var(--brac-line-height-body);
}

.brac-overline {
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-overline);
    font-style: normal;
    font-weight: var(--brac-font-weight-regular);
    line-height: var(--brac-line-height-body);
    text-transform: uppercase;
}

/* Application surfaces ----------------------------------------------------- */

body,
p,
a,
.app-brand-text,
.menu,
.menu-link,
.menu-header,
.menu-header-text,
.layout-navbar,
.navbar,
.breadcrumb,
.breadcrumb-item,
.page-title,
.card-title,
.card-header,
.card-body,
.table,
.table th,
.table td,
.form-label,
.col-form-label,
.form-control,
.form-select,
textarea,
button,
.btn,
.badge,
.dropdown-menu,
.dropdown-item,
.pagination,
.page-link,
.nav,
.nav-link,
.alert,
.toast,
.toast-body,
.modal,
.modal-title,
.modal-body,
.invalid-feedback,
.valid-feedback,
.form-text,
.help-text,
small,
.tooltip,
.tooltip-inner {
    font-family: var(--brac-font-family);
}

p,
a,
.menu-link,
.breadcrumb,
.breadcrumb-item,
.card-body,
.table,
.table th,
.table td,
.form-label,
.col-form-label,
.form-control,
.form-select,
textarea,
.dropdown-menu,
.dropdown-item,
.pagination,
.page-link,
.nav,
.nav-link,
.alert,
.toast,
.toast-body,
.modal-body {
    font-size: var(--brac-font-size-body-2);
    font-weight: var(--brac-font-weight-regular);
    line-height: var(--brac-line-height-body);
}

.page-title {
    font-size: var(--brac-font-size-h5);
    font-weight: var(--brac-font-weight-bold);
    line-height: var(--brac-line-height-heading);
}

.card-title,
.card-header h6,
.modal-title {
    font-size: var(--brac-font-size-h6);
    font-weight: var(--brac-font-weight-bold);
    line-height: var(--brac-line-height-heading);
}

.card-header h5 {
    font-size: var(--brac-font-size-h5);
    font-weight: var(--brac-font-weight-bold);
    line-height: var(--brac-line-height-heading);
}

.form-label,
.col-form-label,
.table th,
.brac-supporting-heading {
    font-size: var(--brac-font-size-subtitle-2);
    font-weight: var(--brac-font-weight-medium);
}

.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    font-size: var(--brac-font-size-button);
    font-weight: var(--brac-font-weight-regular);
}

small,
.small,
.form-text,
.help-text,
.invalid-feedback,
.valid-feedback {
    font-size: var(--brac-font-size-caption);
    font-weight: var(--brac-font-weight-regular);
    line-height: var(--brac-line-height-body);
}

.menu-header,
.menu-header-text {
    font-size: var(--brac-font-size-overline);
    font-weight: var(--brac-font-weight-regular);
    line-height: var(--brac-line-height-body);
}

input::placeholder,
textarea::placeholder {
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-body-2);
    font-weight: var(--brac-font-weight-regular);
}

/* Vendor and plugin typography -------------------------------------------- */

.dataTables_wrapper,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate,
.dt-container,
.dt-container .dt-search,
.dt-container .dt-length,
.dt-container .dt-info,
.dt-container .dt-paging,
.select2-container,
.select2-container .select2-selection__rendered,
.select2-container .select2-results__option,
.select2-search__field,
.flatpickr-calendar,
.flatpickr-calendar input,
.daterangepicker,
.daterangepicker .calendar-table,
.bootstrap-select,
.bootstrap-select .dropdown-menu,
.notyf,
.notiflix-notify,
.swal2-container,
.swal2-popup,
.bs-toast,
.ql-container,
.ql-editor {
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-body-2);
    font-weight: var(--brac-font-weight-regular);
    line-height: var(--brac-line-height-body);
}

.swal2-title {
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-h6);
    font-weight: var(--brac-font-weight-bold);
    line-height: var(--brac-line-height-heading);
}

.swal2-html-container,
.swal2-actions .swal2-confirm,
.swal2-actions .swal2-cancel {
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-body-2);
    font-weight: var(--brac-font-weight-regular);
    line-height: var(--brac-line-height-body);
}

/* =========================================================
   ALL USERS TABLE - MIGRATION MIS FINAL MATCH
   ========================================================= */

.sclms-all-users-page.card,
.sclms-all-users-page .card-datatable,
.sclms-all-users-page .dt-layout-table,
.sclms-all-users-page .dt-layout-full {
    background: var(--brac-white);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-image: none;
}

.sclms-all-users-page.card {
    border: 0;
}

.sclms-all-users-page .card-datatable {
    overflow: visible;
}

.sclms-all-users-page .user-table-shell {
    padding: 0 14px;
}

.sclms-all-users-page .user-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0 8px;
}

.sclms-all-users-page .user-table-title .card-title {
    color: var(--brac-text-primary);
    font-size: var(--brac-font-size-h6);
    font-weight: var(--brac-font-weight-bold);
    line-height: 1.25;
}

.sclms-all-users-page .user-page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.sclms-all-users-page .user-table-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto minmax(190px, 1fr);
    align-items: center;
    gap: 16px;
    padding: 8px 0 9px;
    color: var(--brac-text-primary);
    font-size: var(--brac-font-size-body-2);
}

.sclms-all-users-page .user-table-summary {
    color: var(--brac-text-secondary);
    font-size: var(--brac-font-size-body-2);
    line-height: 1.4;
}

.sclms-all-users-page .user-table-page-size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.sclms-all-users-page .user-table-page-size label {
    margin: 0;
    color: var(--brac-text-primary);
    font-size: var(--brac-font-size-body-2);
    font-weight: var(--brac-font-weight-medium);
}

.sclms-all-users-page .user-table-page-size .form-select {
    width: auto;
    min-width: 86px;
    min-height: 38px;
    padding-top: 7px;
    padding-bottom: 7px;
    color: var(--brac-text-primary);
    background-color: var(--brac-white);
    border-color: var(--brac-border);
    border-radius: 6px;
    font-size: var(--brac-font-size-body-2);
}

.sclms-all-users-page .user-table-page-size .form-select:focus {
    border-color: var(--brac-primary);
    box-shadow: 0 0 0 3px var(--brac-focus-ring);
}

.sclms-all-users-page .user-table-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 6px;
    min-height: 38px;
    padding: 7px 10px;
    color: var(--brac-primary);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-body-2);
    font-weight: var(--brac-font-weight-medium);
    line-height: 1.25;
    box-shadow: none;
}

.sclms-all-users-page .user-table-filter-toggle:hover,
.sclms-all-users-page .user-table-filter-toggle:focus {
    color: var(--brac-primary-dark);
    background-color: var(--brac-hover-bg);
    border-color: var(--brac-border-light);
}

.sclms-all-users-page .user-table-filter-toggle:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--brac-focus-ring);
}

.sclms-all-users-page .user-table-filter-toggle[aria-expanded="true"] .filter-chevron-down,
.sclms-all-users-page .user-table-filter-toggle[aria-expanded="false"] .filter-chevron-up {
    display: none;
}

.sclms-all-users-page .user-table-divider {
    height: 1px;
    background-color: var(--brac-primary);
}

.sclms-all-users-page .user-table-filter-panel {
    margin: 10px 0;
    padding: 12px;
    background-color: var(--brac-white);
    border: 1px solid var(--brac-border-light);
    border-radius: 2px;
}

.sclms-all-users-page .user-filter-field {
    max-width: 340px;
}

.sclms-all-users-page .user-filter-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.sclms-all-users-page .dt-layout-table {
    margin-top: 0;
}

.sclms-all-users-page .table-responsive {
    width: 100%;
    overflow-x: auto;
    border: 0;
}

.sclms-all-users-page table,
.sclms-all-users-page .table,
.sclms-all-users-page .dataTable {
    width: 100%;
    margin-bottom: 0;
    color: var(--brac-text-primary);
    background: var(--brac-white);
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-body-2);
    table-layout: auto;
}

.sclms-all-users-page .table > :not(caption) > * > *,
.sclms-all-users-page .dataTable > :not(caption) > * > * {
    background-color: transparent;
    box-shadow: none;
}

.sclms-all-users-page .table thead,
.sclms-all-users-page .dataTable thead {
    background: var(--brac-white);
    border-top: 0;
    border-bottom: 1px solid var(--brac-dark-gray);
}

.sclms-all-users-page .table thead th,
.sclms-all-users-page .dataTable thead th {
    padding: 12px 10px;
    color: var(--brac-text-primary);
    background: var(--brac-white);
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid var(--brac-dark-gray);
    border-left: 0;
    font-size: var(--brac-font-size-body-2);
    font-weight: var(--brac-font-weight-bold);
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
}

.sclms-all-users-page .table tbody tr,
.sclms-all-users-page .dataTable tbody tr {
    background: var(--brac-white);
    border-bottom: 1px solid var(--brac-border-light);
    box-shadow: none;
}

.sclms-all-users-page .table tbody tr:hover,
.sclms-all-users-page .dataTable tbody tr:hover {
    background: var(--brac-hover-bg);
}

.sclms-all-users-page .table tbody td,
.sclms-all-users-page .dataTable tbody td {
    min-height: 64px;
    padding: 12px 10px;
    color: var(--brac-text-primary);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--brac-border-light);
    font-size: var(--brac-font-size-body-2);
    line-height: 1.4;
    vertical-align: middle;
}

.sclms-all-users-page .table tbody tr:last-child td {
    border-bottom-color: var(--brac-border-light);
}

.sclms-all-users-page .user-index-col {
    width: 5%;
}

.sclms-all-users-page .user-info-col {
    width: 35%;
}

.sclms-all-users-page .user-role-col,
.sclms-all-users-page .user-status-col {
    width: 15%;
}

.sclms-all-users-page .user-otp-col {
    width: 18%;
}

.sclms-all-users-page .user-actions-col {
    width: 12%;
}

.sclms-all-users-page .user-index-column,
.sclms-all-users-page .user-index-cell {
    width: 56px;
    text-align: center;
}

.sclms-all-users-page .user-info-column,
.sclms-all-users-page .user-info-cell,
.sclms-all-users-page .user-role-column,
.sclms-all-users-page .user-role-cell {
    text-align: left;
}

.sclms-all-users-page .user-status-column,
.sclms-all-users-page .user-status-cell,
.sclms-all-users-page .user-otp-column,
.sclms-all-users-page .user-otp-column-cell,
.sclms-all-users-page .user-actions-column,
.sclms-all-users-page .user-actions-column-cell {
    text-align: center;
}

.sclms-all-users-page .user-identity-cell {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 260px;
}

.sclms-all-users-page .user-avatar {
    flex: 0 0 auto;
    margin-right: 0;
}

.sclms-all-users-page .user-avatar,
.sclms-all-users-page .user-avatar img {
    width: 34px;
    height: 34px;
}

.sclms-all-users-page .user-identity-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sclms-all-users-page .user-name {
    color: var(--brac-text-primary);
    font-size: var(--brac-font-size-body-2);
    font-weight: var(--brac-font-weight-medium);
    line-height: 1.4;
}

.sclms-all-users-page .user-email {
    margin-top: 2px;
    color: var(--brac-text-muted);
    font-size: var(--brac-font-size-caption);
    font-weight: var(--brac-font-weight-regular);
    line-height: 1.35;
}

.sclms-all-users-page .status-badge,
.sclms-all-users-page .otp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: var(--brac-font-size-caption);
    font-weight: var(--brac-font-weight-medium);
    line-height: 1.2;
    box-shadow: none;
    background-image: none;
}

.sclms-all-users-page .status-badge.bg-label-success,
.sclms-all-users-page .otp-badge.bg-label-success {
    color: var(--brac-green) !important;
    background-color: color-mix(in srgb, var(--brac-green) 12%, var(--brac-white)) !important;
}

.sclms-all-users-page .status-badge.bg-label-danger,
.sclms-all-users-page .otp-badge.bg-label-danger {
    color: var(--brac-danger) !important;
    background-color: color-mix(in srgb, var(--brac-danger) 10%, var(--brac-white)) !important;
}

.sclms-all-users-page .user-otp-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
}

.sclms-all-users-page .user-table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
}

.sclms-all-users-page .user-table-actions a {
    display: inline-flex;
    text-decoration: none;
}

.sclms-all-users-page .user-action-btn {
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    border-radius: 50%;
    color: var(--brac-white);
    background-color: var(--brac-primary);
    border: 1px solid var(--brac-primary);
    box-shadow: none;
    line-height: 1;
}

.sclms-all-users-page .user-action-btn:hover,
.sclms-all-users-page .user-action-btn:focus,
.sclms-all-users-page .user-action-btn:active {
    color: var(--brac-white);
    background-color: var(--brac-primary-dark);
    border-color: var(--brac-primary-dark);
    box-shadow: none;
}

.sclms-all-users-page .user-action-btn:focus-visible {
    box-shadow: 0 0 0 3px var(--brac-focus-ring);
}

.sclms-all-users-page .user-action-btn i,
.sclms-all-users-page .user-action-btn i::before,
.sclms-all-users-page .user-action-btn .icon-base,
.sclms-all-users-page .user-action-btn .icon-base::before {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    color: var(--brac-white);
    font-size: 11px !important;
    line-height: 1 !important;
    block-size: 12px !important;
    inline-size: 12px !important;
}

.sclms-all-users-page .user-table-actions .switch {
    margin-left: 2px;
}

.sclms-all-users-page .switch .switch-input:checked ~ .switch-toggle-slider {
    --bs-switch-bg: var(--brac-primary);
    --bs-switch-border-color: var(--brac-primary);
    --bs-switch-box-shadow-color: 209, 13, 116;
    background: var(--brac-primary) !important;
    border-color: var(--brac-primary) !important;
}

.sclms-all-users-page .switch:hover .switch-input:checked ~ .switch-toggle-slider,
.sclms-all-users-page .switch .switch-input:checked:active ~ .switch-toggle-slider {
    --bs-switch-bg: var(--brac-primary-dark);
    --bs-switch-border-color: var(--brac-primary-dark);
    background: var(--brac-primary-dark) !important;
    border-color: var(--brac-primary-dark) !important;
}

.sclms-all-users-page .switch .switch-input:focus ~ .switch-toggle-slider,
.sclms-all-users-page .switch .switch-input:focus-visible ~ .switch-toggle-slider {
    box-shadow: 0 0 0 3px var(--brac-focus-ring) !important;
}

.sclms-all-users-page .user-empty-state {
    height: 96px;
    color: var(--brac-text-muted);
    text-align: center;
    vertical-align: middle;
}

.sclms-all-users-page .user-table-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 14px 4px;
    background: var(--brac-white);
}

.sclms-all-users-page .user-table-pagination {
    display: flex;
    justify-content: flex-end;
    overflow-x: auto;
}

.sclms-all-users-page .pagination {
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
}

.sclms-all-users-page .page-link {
    min-width: 32px;
    min-height: 32px;
    padding: 5px 10px;
    color: var(--brac-text-primary);
    background-color: var(--brac-white);
    border: 1px solid var(--brac-border);
    border-radius: 4px;
    font-size: var(--brac-font-size-caption);
    box-shadow: none;
}

.sclms-all-users-page .page-link:hover,
.sclms-all-users-page .page-link:focus {
    color: var(--brac-primary-dark);
    background-color: var(--brac-hover-bg);
    border-color: var(--brac-primary);
    box-shadow: none;
}

.sclms-all-users-page .page-link:focus-visible {
    box-shadow: 0 0 0 3px var(--brac-focus-ring);
}

.sclms-all-users-page .page-item.active .page-link {
    color: var(--brac-white);
    background-color: var(--brac-primary);
    border-color: var(--brac-primary);
}

.sclms-all-users-page .page-item.disabled .page-link {
    color: var(--brac-text-muted);
    background-color: var(--brac-surface-muted);
    border-color: var(--brac-border-light);
}

.sclms-all-users-page .dataTables_paginate .paginate_button,
.sclms-all-users-page .dt-paging .dt-paging-button {
    min-width: 32px;
    min-height: 32px;
    padding: 5px 10px;
    color: var(--brac-text-primary) !important;
    background: var(--brac-white) !important;
    border: 1px solid var(--brac-border) !important;
    border-radius: 4px;
    box-shadow: none !important;
}

.sclms-all-users-page .dataTables_paginate .paginate_button.current,
.sclms-all-users-page .dt-paging .dt-paging-button.current {
    color: var(--brac-white) !important;
    background: var(--brac-primary) !important;
    border-color: var(--brac-primary) !important;
}

.sclms-all-users-page .dataTables_paginate .paginate_button:hover,
.sclms-all-users-page .dt-paging .dt-paging-button:hover {
    color: var(--brac-primary-dark) !important;
    background: var(--brac-hover-bg) !important;
    border-color: var(--brac-primary) !important;
}

.sclms-all-users-page .dataTables_paginate .paginate_button.disabled,
.sclms-all-users-page .dt-paging .dt-paging-button.disabled {
    color: var(--brac-text-muted) !important;
    background: var(--brac-surface-muted) !important;
    border-color: var(--brac-border-light) !important;
}

.sclms-all-users-page table.dataTable thead > tr > th.dt-orderable-asc,
.sclms-all-users-page table.dataTable thead > tr > th.dt-orderable-desc,
.sclms-all-users-page table.dataTable thead > tr > th.sorting,
.sclms-all-users-page table.dataTable thead > tr > th.sorting_asc,
.sclms-all-users-page table.dataTable thead > tr > th.sorting_desc {
    padding-right: 28px;
}

.sclms-all-users-page table.dataTable thead .dt-column-order,
.sclms-all-users-page table.dataTable thead .sorting::before,
.sclms-all-users-page table.dataTable thead .sorting::after {
    color: var(--brac-text-secondary);
    opacity: 0.7;
}

.sclms-all-users-page table.dataTable thead .dt-ordering-asc .dt-column-order,
.sclms-all-users-page table.dataTable thead .dt-ordering-desc .dt-column-order,
.sclms-all-users-page table.dataTable thead .sorting_asc::before,
.sclms-all-users-page table.dataTable thead .sorting_desc::after {
    color: var(--brac-primary);
    opacity: 1;
}

.sclms-all-users-page .table-striped > tbody > tr:nth-of-type(odd) > *,
.sclms-all-users-page table.dataTable.stripe > tbody > tr:nth-child(odd) > *,
.sclms-all-users-page table.dataTable.display > tbody > tr:nth-child(odd) > * {
    background: var(--brac-white);
}

@media (max-width: 1199.98px) {
    .sclms-all-users-page .user-table-toolbar {
        grid-template-columns: 1fr auto auto;
        gap: 12px;
    }

    .sclms-all-users-page .table thead th,
    .sclms-all-users-page .dataTable thead th,
    .sclms-all-users-page .table tbody td,
    .sclms-all-users-page .dataTable tbody td {
        padding-right: 10px;
        padding-left: 10px;
    }
}

@media (max-width: 991.98px) {
    .sclms-all-users-page .user-table-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .sclms-all-users-page .user-table-filter-toggle {
        justify-self: start;
    }

    .sclms-all-users-page .user-table-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .sclms-all-users-page .user-table-pagination {
        justify-content: flex-start;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .sclms-all-users-page .user-identity-cell {
        min-width: 210px;
    }

    .sclms-all-users-page .user-table-actions {
        gap: 5px;
    }
}

/* =========================================================
   REUSABLE BACKEND DATA TABLE
   Apply .sclms-data-table-page to any table card and use
   the sclms-table-* utility classes for the shared MIS style.
   ========================================================= */

.sclms-data-table-page.card,
.sclms-data-table-page .card-datatable,
.sclms-data-table-page .dt-layout-table,
.sclms-data-table-page .dt-layout-full {
    background: var(--brac-white);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-image: none;
}

.sclms-data-table-page.card {
    border: 0;
}

.sclms-data-table-page .card-datatable {
    overflow: visible;
}

.sclms-data-table-page .content-wrapper {
    background: transparent;
    min-height: 0;
}

.sclms-data-table-page .container-xxl {
    max-width: none;
    padding: 0 !important;
}

.sclms-data-table-page .sclms-table-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.sclms-data-table-page .sclms-table-shell {
    padding: 0 14px;
}

.sclms-data-table-page .sclms-data-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0 8px;
    margin: 0 !important;
}

.sclms-data-table-page .sclms-data-table-title .card-title,
.sclms-data-table-page .sclms-data-table-header .card-title {
    color: var(--brac-text-primary);
    font-size: var(--brac-font-size-h6);
    font-weight: var(--brac-font-weight-bold);
    line-height: 1.25;
}

.sclms-data-table-page .sclms-data-table-page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.sclms-data-table-page .sclms-data-table-page-actions > .d-flex {
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px !important;
}

.sclms-data-table-page .sclms-list-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto minmax(190px, 1fr);
    align-items: center;
    gap: 16px;
    padding: 8px 0 9px;
    color: var(--brac-text-primary);
    font-size: var(--brac-font-size-body-2);
}

.sclms-data-table-page .sclms-list-summary {
    color: var(--brac-text-secondary);
    font-size: var(--brac-font-size-body-2);
    line-height: 1.4;
}

.sclms-data-table-page .sclms-list-page-size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.sclms-data-table-page .sclms-list-page-size label {
    margin: 0;
    color: var(--brac-text-primary);
    font-size: var(--brac-font-size-body-2);
    font-weight: var(--brac-font-weight-medium);
}

.sclms-data-table-page .sclms-list-page-size .form-select {
    width: auto;
    min-width: 86px;
    min-height: 38px;
    padding-top: 7px;
    padding-bottom: 7px;
    color: var(--brac-text-primary);
    background-color: var(--brac-white);
    border-color: var(--brac-border);
    border-radius: 6px;
    font-size: var(--brac-font-size-body-2);
    box-shadow: none;
}

.sclms-data-table-page .sclms-list-page-size .form-select:focus {
    border-color: var(--brac-primary);
    box-shadow: 0 0 0 3px var(--brac-focus-ring);
}

.sclms-data-table-page .sclms-list-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 6px;
    min-height: 38px;
    padding: 7px 10px;
    color: var(--brac-primary);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-body-2);
    font-weight: var(--brac-font-weight-medium);
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
}

.sclms-data-table-page .sclms-list-filter-toggle:hover,
.sclms-data-table-page .sclms-list-filter-toggle:focus {
    color: var(--brac-primary-dark);
    background-color: var(--brac-hover-bg);
    border-color: var(--brac-border-light);
}

.sclms-data-table-page .sclms-list-filter-toggle:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--brac-focus-ring);
}

.sclms-data-table-page .sclms-list-filter-toggle .filter-chevron-up {
    display: none;
}

.sclms-data-table-page .sclms-list-filter-toggle[aria-expanded="true"] .filter-chevron-down {
    display: none;
}

.sclms-data-table-page .sclms-list-filter-toggle[aria-expanded="true"] .filter-chevron-up {
    display: inline-block;
}

.sclms-data-table-page .sclms-table-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.sclms-data-table-page .sclms-data-table-divider {
    height: 1px;
    margin: 0;
    background-color: var(--brac-primary);
}

.sclms-data-table-page .sclms-data-table-filter-panel {
    margin: 10px 0;
    padding: 12px;
    background-color: var(--brac-white);
    border: 1px solid var(--brac-border-light);
    border-radius: 2px;
}

.sclms-data-table-page .sclms-data-table-filter-panel .form-label {
    color: var(--brac-text-primary);
    font-size: var(--brac-font-size-caption);
    font-weight: var(--brac-font-weight-medium);
}

.sclms-data-table-page .sclms-table-filter-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* SCLMS reusable filter bar -------------------------------------------------
   Shared presentation for listing-page filters. Blade keeps page-specific
   form actions, field names, IDs, and JavaScript hooks intact. */

.sclms-filter-bar,
.sclms-all-users-page .sclms-filter-bar,
.sclms-data-table-page .sclms-filter-bar {
    width: 100%;
    margin: 10px 0;
    padding: 14px 16px;
    background: #FDF1F8;
    background: color-mix(in srgb, var(--brac-primary) 7%, var(--brac-white));
    border: 0;
    border-radius: 4px;
    box-shadow: none;
}

.sclms-filter-bar.collapse:not(.show) {
    display: none;
}

.sclms-filter-bar.collapse.show {
    display: block;
}

.sclms-filter-grid,
.sclms-all-users-page .sclms-filter-grid,
.sclms-data-table-page .sclms-filter-grid {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}

.sclms-filter-field,
.sclms-all-users-page .sclms-filter-field,
.sclms-data-table-page .sclms-filter-field {
    display: flex;
    flex: 1 1 220px;
    flex-direction: column;
    min-width: 180px;
    max-width: 280px;
    margin: 0;
}

.sclms-filter-field--wide,
.sclms-data-table-page .sclms-filter-field--wide {
    flex-basis: 300px;
    max-width: 360px;
}

.sclms-filter-label,
.sclms-all-users-page .sclms-filter-label,
.sclms-data-table-page .sclms-filter-label,
.sclms-data-table-page .sclms-data-table-filter-panel .sclms-filter-label {
    display: block;
    margin: 0 0 7px;
    color: var(--brac-text-primary);
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-caption);
    font-weight: var(--brac-font-weight-bold);
    line-height: 1.25;
}

.sclms-filter-control,
.sclms-all-users-page .sclms-filter-control,
.sclms-data-table-page .sclms-filter-control {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    color: var(--brac-text-primary);
    background-color: var(--brac-white);
    border: 1px solid var(--brac-border);
    border-radius: 4px;
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-body-2);
    line-height: 1.4;
    box-shadow: none;
}

.sclms-filter-actions,
.sclms-all-users-page .sclms-filter-actions,
.sclms-data-table-page .sclms-filter-actions {
    display: flex;
    align-items: flex-end;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.sclms-filter-action,
.sclms-filter-actions .btn,
.sclms-all-users-page .sclms-filter-actions .btn,
.sclms-data-table-page .sclms-filter-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 4px;
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-body-2);
    font-weight: var(--brac-font-weight-bold);
    line-height: 1.25;
    white-space: nowrap;
    box-shadow: none;
}

.sclms-filter-apply,
.sclms-filter-actions .sclms-filter-apply,
.sclms-all-users-page .sclms-filter-actions .sclms-filter-apply,
.sclms-data-table-page .sclms-filter-actions .sclms-filter-apply {
    color: var(--brac-primary);
    background-color: var(--brac-white);
    border-color: var(--brac-primary);
}

.sclms-filter-apply:hover,
.sclms-filter-apply:focus,
.sclms-filter-actions .sclms-filter-apply:hover,
.sclms-filter-actions .sclms-filter-apply:focus {
    color: var(--brac-primary-dark);
    background-color: var(--brac-white);
    border-color: var(--brac-primary-dark);
    box-shadow: 0 0 0 3px var(--brac-focus-ring);
}

.sclms-filter-apply .icon-base,
.sclms-filter-actions .sclms-filter-apply .icon-base,
.sclms-filter-action .icon-base {
    color: currentColor;
    font-size: 18px;
}

.sclms-filter-action,
.sclms-filter-reset,
.sclms-filter-close,
.sclms-filter-actions .sclms-filter-reset,
.sclms-filter-actions .sclms-filter-close {
    color: var(--brac-primary);
    background-color: var(--brac-white);
    border-color: var(--brac-primary);
}

.sclms-filter-action:hover,
.sclms-filter-action:focus,
.sclms-filter-reset:hover,
.sclms-filter-reset:focus,
.sclms-filter-close:hover,
.sclms-filter-close:focus {
    color: var(--brac-white);
    background-color: var(--brac-primary);
    border-color: var(--brac-primary);
    box-shadow: 0 0 0 3px var(--brac-focus-ring);
}

.sclms-data-table-page .dt-layout-table {
    margin-top: 0;
}

.sclms-data-table-page .sclms-table-responsive,
.sclms-data-table-page .table-responsive {
    width: 100%;
    overflow-x: auto;
    border: 0;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.sclms-data-table-page table,
.sclms-data-table-page .table,
.sclms-data-table-page .dataTable {
    width: 100%;
    margin-bottom: 0;
    color: var(--brac-text-primary);
    background: var(--brac-white);
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    font-family: var(--brac-font-family);
    font-size: var(--brac-font-size-body-2);
    table-layout: auto;
}

.sclms-data-table-page .table > :not(caption) > * > *,
.sclms-data-table-page .dataTable > :not(caption) > * > * {
    background-color: transparent;
    box-shadow: none;
}

.sclms-data-table-page .table thead,
.sclms-data-table-page .dataTable thead {
    background: var(--brac-white);
    border-top: 0;
    border-bottom: 1px solid var(--brac-dark-gray);
}

.sclms-data-table-page .table thead th,
.sclms-data-table-page .dataTable thead th {
    padding: 12px 10px;
    color: var(--brac-text-primary);
    background: var(--brac-white);
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid var(--brac-dark-gray);
    border-left: 0;
    font-size: var(--brac-font-size-body-2);
    font-weight: var(--brac-font-weight-bold);
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    vertical-align: middle;
    white-space: nowrap;
}

.sclms-data-table-page .table tbody tr,
.sclms-data-table-page .dataTable tbody tr {
    background: var(--brac-white);
    border-bottom: 1px solid var(--brac-border-light);
    box-shadow: none;
}

.sclms-data-table-page .table tbody tr:hover,
.sclms-data-table-page .dataTable tbody tr:hover {
    background: var(--brac-hover-bg);
}

.sclms-data-table-page .table tbody td,
.sclms-data-table-page .dataTable tbody td {
    min-height: 64px;
    padding: 12px 10px;
    color: var(--brac-text-primary);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--brac-border-light);
    font-size: var(--brac-font-size-body-2);
    line-height: 1.4;
    vertical-align: middle;
}

.sclms-data-table-page .table tbody tr:last-child td {
    border-bottom-color: var(--brac-border-light);
}

.sclms-list-page-subtitle {
    color: var(--brac-text-secondary);
    font-size: var(--brac-font-size-body-2);
}

.sclms-table-align-middle th,
.sclms-table-align-middle td {
    vertical-align: middle;
}

.sclms-table-wide {
    min-width: 1280px;
}

.sclms-table-primary-text {
    display: block;
    color: var(--brac-text-primary);
    font-weight: var(--brac-font-weight-bold);
}

.sclms-table-secondary-text {
    display: block;
    color: var(--brac-text-secondary);
    font-size: var(--brac-font-size-body-2);
}

.sclms-action-placeholder:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    pointer-events: auto;
}

.sclms-data-table-page .table-striped > tbody > tr:nth-of-type(odd) > *,
.sclms-data-table-page table.dataTable.stripe > tbody > tr:nth-child(odd) > *,
.sclms-data-table-page table.dataTable.display > tbody > tr:nth-child(odd) > * {
    background: var(--brac-white);
}

.sclms-data-table-page .sclms-table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
}

.sclms-data-table-page .sclms-table-actions a {
    display: inline-flex;
    text-decoration: none;
}

.sclms-data-table-page .sclms-action-icon-btn {
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    border-radius: 50%;
    color: var(--brac-white);
    background-color: var(--brac-primary);
    border: 1px solid var(--brac-primary);
    box-shadow: none;
    line-height: 1;
}

.sclms-data-table-page .sclms-action-icon-btn:hover,
.sclms-data-table-page .sclms-action-icon-btn:focus,
.sclms-data-table-page .sclms-action-icon-btn:active {
    color: var(--brac-white);
    background-color: var(--brac-primary-dark);
    border-color: var(--brac-primary-dark);
    box-shadow: none;
}

.sclms-data-table-page .sclms-action-icon-btn:focus-visible,
.sclms-data-table-page .sclms-action-text-btn:focus-visible {
    box-shadow: 0 0 0 3px var(--brac-focus-ring);
}

.sclms-data-table-page .sclms-action-icon-btn i,
.sclms-data-table-page .sclms-action-icon-btn i::before,
.sclms-data-table-page .sclms-action-icon-btn .icon-base,
.sclms-data-table-page .sclms-action-icon-btn .icon-base::before {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    color: var(--brac-white);
    font-size: 11px !important;
    line-height: 1 !important;
    block-size: 12px !important;
    inline-size: 12px !important;
}

.sclms-data-table-page .sclms-action-text-btn {
    min-height: 28px;
    padding: 5px 9px;
    color: var(--brac-primary);
    background-color: var(--brac-hover-bg);
    border: 1px solid var(--brac-border-light);
    border-radius: 4px;
    font-size: var(--brac-font-size-caption);
    font-weight: var(--brac-font-weight-medium);
    line-height: 1.2;
    box-shadow: none;
}

.sclms-data-table-page .sclms-action-text-btn:hover,
.sclms-data-table-page .sclms-action-text-btn:focus,
.sclms-data-table-page .sclms-action-text-btn:active {
    color: var(--brac-primary-dark);
    background-color: var(--brac-hover-bg);
    border-color: var(--brac-primary);
    box-shadow: none;
}

.sclms-data-table-page .sclms-data-table-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 0 !important;
    padding: 12px 14px 4px;
    color: var(--brac-text-secondary);
    background: var(--brac-white);
    font-size: var(--brac-font-size-body-2);
}

.sclms-data-table-page .sclms-data-table-pagination {
    display: flex;
    justify-content: flex-end;
    overflow-x: auto;
}

.sclms-data-table-page .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    margin: 0;
}

.sclms-data-table-page .page-item {
    margin: 0;
}

.sclms-data-table-page .page-link,
.sclms-data-table-page .dataTables_paginate .paginate_button,
.sclms-data-table-page .dt-paging .dt-paging-button {
    min-width: 32px;
    min-height: 32px;
    padding: 6px 10px;
    color: var(--brac-text-primary) !important;
    background: var(--brac-white) !important;
    border: 1px solid var(--brac-border) !important;
    border-radius: 4px;
    font-size: var(--brac-font-size-caption);
    box-shadow: none !important;
}

.sclms-data-table-page .page-link:hover,
.sclms-data-table-page .page-link:focus,
.sclms-data-table-page .dataTables_paginate .paginate_button:hover,
.sclms-data-table-page .dt-paging .dt-paging-button:hover {
    color: var(--brac-primary-dark) !important;
    background: var(--brac-hover-bg) !important;
    border-color: var(--brac-primary) !important;
    box-shadow: none !important;
}

.sclms-data-table-page .page-item.active .page-link,
.sclms-data-table-page .dataTables_paginate .paginate_button.current,
.sclms-data-table-page .dt-paging .dt-paging-button.current {
    color: var(--brac-white) !important;
    background: var(--brac-primary) !important;
    border-color: var(--brac-primary) !important;
}

.sclms-data-table-page .page-item.disabled .page-link,
.sclms-data-table-page .dataTables_paginate .paginate_button.disabled,
.sclms-data-table-page .dt-paging .dt-paging-button.disabled {
    color: var(--brac-text-muted) !important;
    background: var(--brac-white) !important;
    border-color: var(--brac-border-light) !important;
}

@media (max-width: 991.98px) {
    .sclms-data-table-page .sclms-list-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .sclms-data-table-page .sclms-list-filter-toggle {
        justify-self: start;
    }

    .sclms-data-table-page .sclms-data-table-header,
    .sclms-data-table-page .sclms-data-table-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .sclms-data-table-page .sclms-data-table-page-actions,
    .sclms-data-table-page .sclms-data-table-pagination {
        justify-content: flex-start;
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .sclms-data-table-page .sclms-table-shell {
        padding: 0 12px;
    }

    .sclms-data-table-page .sclms-data-table-header,
    .sclms-data-table-page .sclms-data-table-page-actions,
    .sclms-data-table-page .sclms-list-toolbar,
    .sclms-data-table-page .sclms-list-page-size,
    .sclms-data-table-page .sclms-list-filter-toggle {
        align-items: stretch;
        width: 100%;
    }

    .sclms-data-table-page .sclms-data-table-header,
    .sclms-data-table-page .sclms-list-toolbar {
        display: flex;
        flex-direction: column;
    }

    .sclms-data-table-page .sclms-list-page-size {
        justify-content: space-between;
    }

    .sclms-data-table-page .sclms-list-filter-toggle {
        justify-content: center;
    }

    .sclms-data-table-page .sclms-data-table-page-actions {
        flex-direction: column;
    }
}

@media (min-width: 1200px) {
    .sclms-data-table-page .sclms-filter-field {
        flex: 1 1 150px;
        min-width: 140px;
        max-width: 220px;
    }

    .sclms-data-table-page .sclms-filter-field--wide {
        flex-basis: 250px;
        max-width: 300px;
    }
}

@media (max-width: 991.98px) {
    .sclms-filter-field,
    .sclms-all-users-page .sclms-filter-field,
    .sclms-data-table-page .sclms-filter-field {
        flex: 1 1 calc(50% - 8px);
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .sclms-all-users-page .user-table-shell {
        padding: 0 12px;
    }

    .sclms-all-users-page .user-table-header,
    .sclms-all-users-page .user-page-actions,
    .sclms-all-users-page .user-table-toolbar,
    .sclms-all-users-page .user-table-page-size,
    .sclms-all-users-page .user-table-filter-toggle {
        align-items: stretch;
        width: 100%;
    }

    .sclms-all-users-page .user-table-header,
    .sclms-all-users-page .user-table-toolbar {
        display: flex;
        flex-direction: column;
    }

    .sclms-all-users-page .user-table-page-size {
        justify-content: space-between;
    }

    .sclms-all-users-page .user-table-filter-toggle {
        justify-content: center;
    }

    .sclms-all-users-page .user-filter-field {
        max-width: none;
    }

    .sclms-all-users-page .user-filter-actions .btn {
        flex: 1 1 100%;
    }

    .sclms-filter-bar,
    .sclms-all-users-page .sclms-filter-bar,
    .sclms-data-table-page .sclms-filter-bar {
        padding: 12px;
    }

    .sclms-filter-grid,
    .sclms-all-users-page .sclms-filter-grid,
    .sclms-data-table-page .sclms-filter-grid,
    .sclms-filter-actions,
    .sclms-all-users-page .sclms-filter-actions,
    .sclms-data-table-page .sclms-filter-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sclms-filter-field,
    .sclms-all-users-page .sclms-filter-field,
    .sclms-data-table-page .sclms-filter-field,
    .sclms-filter-actions,
    .sclms-all-users-page .sclms-filter-actions,
    .sclms-data-table-page .sclms-filter-actions,
    .sclms-filter-actions .btn,
    .sclms-all-users-page .sclms-filter-actions .btn,
    .sclms-data-table-page .sclms-filter-actions .btn {
        width: 100%;
        max-width: none;
    }

    .sclms-all-users-page .user-table-footer {
        padding-right: 12px;
        padding-left: 12px;
    }
}

/* Icon font safety ---------------------------------------------------------
   No icon font-family overrides are declared here. Vendor icon CSS remains
   responsible for Font Awesome, Tabler, Iconify, Bootstrap, and Remix icons. */

/* BRAC collapsed sidebar ---------------------------------------------------
   Uses Vuexy's existing .layout-menu-collapsed state; no custom collapse
   behavior or toggle markup is introduced here. */

#layout-menu .app-brand,
#layout-menu .app-brand-link,
#layout-menu .app-brand-logo,
#layout-menu .app-brand-logo > span,
#layout-menu .app-brand-logo img {
    transition: opacity 0.22s ease, visibility 0.22s ease, inline-size 0.24s ease, max-inline-size 0.24s ease, padding 0.24s ease, transform 0.24s ease;
}

@media (min-width: 1200px) {
    .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu.layout-menu.menu-vertical {
        overflow-x: hidden;
    }

    .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand {
        justify-content: center;
        gap: 0;
        width: var(--bs-menu-collapsed-width);
        min-height: 48px;
        height: 48px;
        padding: 8px 0;
        overflow: visible;
    }

    .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand-link {
        flex: 0 0 0;
        width: 0;
        inline-size: 0;
        min-width: 0;
        max-width: 0;
        max-inline-size: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        pointer-events: none;
        transform: scale(0.96);
    }

    .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand-logo,
    .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand-logo > span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 0;
        inline-size: 0;
        min-width: 0;
        max-width: 0;
        max-inline-size: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
    }

    .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand-logo img {
        display: block;
        width: 0;
        inline-size: 0;
        max-width: 0;
        max-inline-size: 0;
        height: auto;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        object-fit: contain;
    }

    .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand .layout-menu-toggle {
        flex: 0 0 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        min-width: 32px;
        height: 32px;
        margin-left: 0 !important;
        padding: 0;
    }

    .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-inner {
        align-items: center;
        width: var(--bs-menu-collapsed-width);
        padding-right: 0;
        padding-left: 0;
    }

    .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-inner > .menu-header {
        display: none;
    }

    .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-inner > .menu-item {
        display: block;
        width: var(--bs-menu-collapsed-width);
        inline-size: var(--bs-menu-collapsed-width);
        margin: 4px 0 0;
    }

    .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-inner > .menu-item > .menu-sub,
    .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-inner > .menu-item.open > .menu-sub {
        display: none;
    }

    .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-inner > .menu-item > .menu-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-width: 44px;
        min-height: 40px;
        margin: 0 auto;
        padding: 0;
        border-radius: 6px;
    }

    .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-inner > .menu-item > .menu-link > div,
    .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-inner > .menu-item > .menu-toggle::after {
        display: none;
    }

    .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-inner > .menu-item > .menu-link .menu-icon,
    .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-inner > .menu-item > .menu-link i.menu-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        min-width: 22px;
        height: 22px;
        margin: 0;
        font-size: 22px;
        line-height: 1;
        opacity: 1;
        visibility: visible;
        text-align: center;
    }
}

/* BRAC admin topbar --------------------------------------------------------
   Scoped overrides for the Vuexy navbar to match BRAC Header Style 3 while
   keeping Vuexy's existing menu, search, notification, and profile hooks. */

.brac-admin-topbar.layout-navbar {
    --brac-topbar-height: 84px;
    display: flex;
    align-items: center;
    min-height: var(--brac-topbar-height);
    height: var(--brac-topbar-height);
    width: 100%;
    color: var(--brac-text-primary);
    background: var(--brac-white);
    border: 0;
    border-bottom: 1px solid #E4E4E4;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(77, 79, 83, 0.06);
    background-image: none;
}

.brac-admin-topbar.layout-navbar.navbar-detached {
    inline-size: calc(100% - var(--bs-menu-width));
    inset-inline: var(--bs-menu-width) 0;
    margin: 0;
    padding-inline: 14px;
}

html[data-template="vertical-menu-template"]
    .layout-content-navbar
    .brac-admin-topbar.layout-navbar.admin-layout-container {
    padding-right: 14px;
    padding-left: 14px;
}

:root[data-skin="bordered"] .brac-admin-topbar.layout-navbar.navbar-detached,
[data-bs-theme="light"][data-skin="bordered"] .brac-admin-topbar.layout-navbar.navbar-detached,
.layout-menu.menu-vertical ~ .layout-page.window-scrolled .brac-admin-topbar.layout-navbar {
    color: var(--brac-text-primary);
    background: var(--brac-white);
    border-bottom: 1px solid #E4E4E4;
    box-shadow: 0 2px 8px rgba(77, 79, 83, 0.06);
    backdrop-filter: none;
}

.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page,
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
    padding-top: 84px !important;
}

.layout-navbar-fixed.layout-menu-collapsed .brac-admin-topbar.layout-navbar.navbar-detached {
    inline-size: calc(100% - var(--bs-menu-collapsed-width));
    inset-inline-start: var(--bs-menu-collapsed-width);
}

.layout-menu-collapsed .brac-admin-topbar.layout-navbar.navbar-detached,
.layout-without-menu .brac-admin-topbar.layout-navbar.navbar-detached {
    inline-size: calc(100% - var(--bs-menu-collapsed-width));
    inset-inline-start: var(--bs-menu-collapsed-width);
}

.brac-admin-topbar,
.brac-admin-topbar .navbar-nav-right,
.brac-admin-topbar .navbar-nav,
.brac-admin-topbar .nav-item,
.brac-admin-topbar .nav-link,
.brac-admin-topbar .layout-menu-toggle {
    min-height: 0;
}

.brac-admin-topbar .navbar-nav-right {
    flex: 0 0 auto;
    flex-basis: auto;
    min-width: 0;
    width: auto;
    margin-left: auto;
}

html[data-template="vertical-menu-template"].layout-navbar-fixed.layout-menu-fixed
    body
    > .layout-wrapper.layout-content-navbar:not(.layout-without-menu)
    .brac-admin-topbar.layout-navbar.navbar-detached.admin-layout-container
    > .navbar-nav-right,
.brac-admin-topbar.layout-navbar.navbar-detached.admin-layout-container > #navbar-collapse {
    flex: 0 0 auto;
    flex-basis: auto;
    width: auto;
    max-width: none;
    margin-left: auto;
}

.brac-admin-topbar .layout-menu-toggle {
    flex: 0 0 auto;
}

.brac-admin-topbar .layout-menu-toggle .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #333333;
}

.brac-admin-topbar .layout-menu-toggle i,
.brac-admin-topbar .layout-menu-toggle i::before {
    color: #333333;
}

.brac-topbar-heading {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    width: auto;
    max-width: none;
    margin-right: 24px;
    margin-left: 0;
    padding-left: 0;
    color: var(--brac-text-primary);
    font-family: var(--brac-font-family);
    min-height: 52px;
}

.brac-topbar-title {
    overflow: visible;
    width: auto;
    max-width: none;
    color: var(--brac-primary);
    font-size: 24px;
    font-weight: var(--brac-font-weight-bold);
    line-height: 1.15;
    text-overflow: clip;
    white-space: nowrap;
}

.brac-topbar-subtitle {
    overflow: hidden;
    margin-top: 3px;
    color: #222222;
    font-size: 14px;
    font-weight: var(--brac-font-weight-regular);
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brac-topbar-actions {
    flex: 0 0 auto;
    gap: 12px;
    margin-left: auto;
}

.brac-topbar-search {
    flex: 0 0 auto;
    margin-right: 12px;
}

.brac-admin-topbar .navbar-search-wrapper {
    display: flex;
    align-items: center;
    padding: 0 !important;
}

.brac-admin-topbar .brac-topbar-action,
.brac-admin-topbar .search-toggler .aa-DetachedSearchButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    color: #222222;
    background: var(--brac-white);
    border: 1px solid #6F6F6F;
    border-radius: 2px;
    box-shadow: none;
}

.brac-admin-topbar .brac-topbar-action:hover,
.brac-admin-topbar .brac-topbar-action:focus,
.brac-admin-topbar .brac-topbar-action:active,
.brac-admin-topbar .search-toggler .aa-DetachedSearchButton:hover,
.brac-admin-topbar .search-toggler .aa-DetachedSearchButton:focus {
    color: #222222;
    background: #F7F7F8;
    border-color: #333333;
    box-shadow: none;
}

.brac-admin-topbar .brac-topbar-action i,
.brac-admin-topbar .brac-topbar-action i::before,
.brac-admin-topbar .search-toggler .aa-DetachedSearchButtonIcon,
.brac-admin-topbar .search-toggler .aa-DetachedSearchButtonIcon svg {
    color: #222222;
    stroke: #222222;
}

.brac-admin-topbar #autocomplete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.brac-admin-topbar .aa-DetachedSearchButtonPlaceholder,
.brac-admin-topbar .aa-DetachedSearchButtonQuery {
    display: none;
}

.brac-admin-topbar .badge-notifications {
    background-color: var(--brac-primary) !important;
    border-color: var(--brac-white) !important;
}

.brac-topbar-user {
    flex: 0 0 auto;
}

.brac-topbar-user-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #333333;
}

.brac-topbar-user-toggle:hover,
.brac-topbar-user-toggle:focus,
.brac-topbar-user-toggle:active {
    color: #333333;
}

.brac-topbar-user-info {
    display: flex;
    flex-direction: column;
    max-width: 220px;
    min-width: 0;
    text-align: right;
}

.brac-topbar-user-name,
.brac-topbar-user-role {
    overflow: hidden;
    font-family: var(--brac-font-family);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brac-topbar-user-name {
    color: #333333;
    font-size: 15px;
    font-weight: var(--brac-font-weight-bold);
    line-height: 1.2;
}

.brac-topbar-user-role {
    margin-top: 2px;
    color: #A5A5A5;
    font-size: 12px;
    line-height: 1.2;
}

.brac-admin-topbar .brac-topbar-avatar,
.brac-admin-topbar .brac-topbar-avatar img {
    width: 44px;
    height: 44px;
}

.brac-admin-topbar .brac-topbar-avatar img {
    border: 1px solid #A5A5A5;
    object-fit: cover;
}

.brac-admin-topbar .brac-topbar-avatar.avatar-online::after {
    right: 1px;
    bottom: 1px;
    border-color: var(--brac-white);
}

.brac-admin-topbar .dropdown-menu {
    color: var(--app-text-primary);
    background: var(--brac-white);
}

@media (max-width: 1199.98px) {
    .brac-admin-topbar.layout-navbar.navbar-detached,
    .layout-navbar-fixed .brac-admin-topbar.layout-navbar.navbar-detached {
        inline-size: 100% !important;
        inset-inline: 0;
        padding-right: 14px;
        padding-left: 14px;
    }

    .brac-topbar-heading {
        margin-right: 18px;
    }

    .brac-topbar-actions {
        gap: 10px;
    }
}

@media (max-width: 991.98px) {
    .brac-admin-topbar.layout-navbar {
        --brac-topbar-height: 76px;
    }

    .layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page,
    .layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
        padding-top: 76px !important;
    }

    .brac-admin-topbar.layout-navbar.navbar-detached,
    .layout-navbar-fixed .brac-admin-topbar.layout-navbar.navbar-detached {
        padding-right: 14px;
        padding-left: 14px;
    }

    .brac-topbar-title {
        font-size: 20px;
    }

    .brac-topbar-user-role {
        display: none;
    }

    .brac-topbar-user-info {
        max-width: 150px;
    }
}

@media (max-width: 767.98px) {
    .brac-admin-topbar.layout-navbar {
        --brac-topbar-height: 68px;
    }

    .layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page,
    .layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
        padding-top: 68px !important;
    }

    .brac-admin-topbar.layout-navbar.navbar-detached,
    .layout-navbar-fixed .brac-admin-topbar.layout-navbar.navbar-detached {
        padding-right: 14px;
        padding-left: 14px;
    }

    .brac-topbar-heading {
        margin-right: 10px;
    }

    .brac-topbar-title {
        font-size: 16px;
        line-height: 1.15;
    }

    .brac-topbar-subtitle,
    .brac-topbar-user-role {
        display: none;
    }

    .brac-topbar-actions {
        gap: 8px;
    }

    .brac-topbar-search {
        margin-right: 8px;
    }

    .brac-admin-topbar .brac-topbar-action,
    .brac-admin-topbar .search-toggler .aa-DetachedSearchButton,
    .brac-admin-topbar #autocomplete,
    .brac-admin-topbar .layout-menu-toggle .nav-link,
    .brac-admin-topbar .brac-topbar-avatar,
    .brac-admin-topbar .brac-topbar-avatar img {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
    }

    .brac-topbar-user-info {
        display: none;
    }
}

@media (max-width: 420px) {
    .brac-topbar-heading {
        margin-right: 8px;
    }

    .brac-topbar-title {
        overflow: hidden;
        max-width: none;
        white-space: normal;
        max-height: 2.3em;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 575.98px) {
    html[data-template="vertical-menu-template"]
        .layout-content-navbar
        .brac-admin-topbar.layout-navbar.admin-layout-container,
    .brac-admin-topbar.layout-navbar.navbar-detached,
    .layout-navbar-fixed .brac-admin-topbar.layout-navbar.navbar-detached {
        padding-right: 12px;
        padding-left: 12px;
    }
}

/* Global footer hitbox fix ---------------------------------------------------
   Vuexy's fixed footer spans the full viewport width. Keep the visible footer
   links usable, but let page buttons underneath receive clicks. */
.content-footer {
    pointer-events: none;
}

.content-footer a,
.content-footer button,
.content-footer .footer-link {
    pointer-events: auto;
}

.content-backdrop.fade:not(.show),
.layout-overlay:not(.show) {
    pointer-events: none;
}

/* Bootstrap/Vuexy validation padding stability ------------------------------
   Keep value text in the same position when validation/focus increases borders. */
.layout-wrapper .form-control:not([type="file"]):focus,
.layout-wrapper form.was-validated .form-control:not([type="file"]):valid,
.layout-wrapper form.was-validated .form-control:not([type="file"]):invalid,
.layout-wrapper form .form-control:not([type="file"]).is-valid,
.layout-wrapper form .form-control:not([type="file"]).is-invalid,
.layout-wrapper textarea.form-control:focus,
.layout-wrapper form.was-validated textarea.form-control:valid,
.layout-wrapper form.was-validated textarea.form-control:invalid,
.layout-wrapper form textarea.form-control.is-valid,
.layout-wrapper form textarea.form-control.is-invalid {
    padding-left: 0.875rem !important;
    padding-inline-start: 0.875rem !important;
    padding-right: 0.875rem !important;
    padding-inline-end: 0.875rem !important;
    background-image: none;
}

.layout-wrapper .form-select:focus:not([multiple]):not([size]),
.layout-wrapper form.was-validated .form-select:valid:not([multiple]):not([size]),
.layout-wrapper form.was-validated .form-select:invalid:not([multiple]):not([size]),
.layout-wrapper form .form-select.is-valid:not([multiple]):not([size]),
.layout-wrapper form .form-select.is-invalid:not([multiple]):not([size]) {
    padding-left: 0.875rem !important;
    padding-inline-start: 0.875rem !important;
    padding-right: 2.5rem !important;
    padding-inline-end: 2.5rem !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--brac-text-secondary) 50%),
        linear-gradient(135deg, var(--brac-text-secondary) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.layout-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered,
.layout-wrapper form .form-select.is-valid ~ .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered,
.layout-wrapper form .form-select.is-invalid ~ .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered,
.layout-wrapper form.was-validated .form-select:valid ~ .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered,
.layout-wrapper form.was-validated .form-select:invalid ~ .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered,
.layout-wrapper form .form-select.is-valid ~ .select2-container.select2-container--default.select2-container--focus .select2-selection--single .select2-selection__rendered,
.layout-wrapper form .form-select.is-invalid ~ .select2-container.select2-container--default.select2-container--focus .select2-selection--single .select2-selection__rendered,
.layout-wrapper form.was-validated .form-select:valid ~ .select2-container.select2-container--default.select2-container--focus .select2-selection--single .select2-selection__rendered,
.layout-wrapper form.was-validated .form-select:invalid ~ .select2-container.select2-container--default.select2-container--focus .select2-selection--single .select2-selection__rendered,
.layout-wrapper form .form-select.is-valid ~ .select2-container.select2-container--default.select2-container--open .select2-selection--single .select2-selection__rendered,
.layout-wrapper form .form-select.is-invalid ~ .select2-container.select2-container--default.select2-container--open .select2-selection--single .select2-selection__rendered,
.layout-wrapper form.was-validated .form-select:valid ~ .select2-container.select2-container--default.select2-container--open .select2-selection--single .select2-selection__rendered,
.layout-wrapper form.was-validated .form-select:invalid ~ .select2-container.select2-container--default.select2-container--open .select2-selection--single .select2-selection__rendered,
.layout-wrapper .select2-container--default.select2-container--focus .select2-selection--single .select2-selection__rendered,
.layout-wrapper .select2-container--default.select2-container--open .select2-selection--single .select2-selection__rendered {
    padding-left: 0.875rem !important;
    padding-inline-start: 0.875rem !important;
    padding-right: 34px !important;
    padding-inline-end: 34px !important;
}