/* =========================================
   Accessibility Utilities
   ========================================= */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* =========================================
   Brand Palette Variables
   ========================================= */
:root {
    --bs-primary: rgb(30, 90, 170);
    --bs-primary-active: rgb(20, 60, 120);
    --kt-primary: rgb(30, 90, 170);
    --kt-primary-active: rgb(20, 60, 120);
    /* SUCCESS — WCAG compliant */
    --bs-success: #0f5a20 !important;
    --bs-success-rgb: 15, 90, 32 !important;
    --bs-success-hover: #0c4a1a !important;
    --bs-success-active: #093a14 !important;
}

/* =========================================
   Global Color Overrides
   ========================================= */
.bg-primary,
.text-bg-primary,
.btn-primary {
    background-color: var(--bs-primary) !important;
}

.btn-success {
    background-color: rgb(10, 110, 55) !important;
}

.btn-light-primary {
    color: #071437 !important;
}

.btn-danger {
    background-color: #b00020 !important;
    border-color: #b00020 !important;
    color: #ffffff !important;
}

    .btn-danger:hover,
    .btn-danger:focus {
        background-color: #8b001a !important;
        border-color: #8b001a !important;
        color: #ffffff !important;
    }

    .btn-danger:active {
        background-color: #6f0015 !important;
        border-color: #6f0015 !important;
        color: #ffffff !important;
    }


.text-danger {
    color: #D91E18 !important;
}

span.menu-title {
    color: #000 !important;
}

li.active.paginate_button.page-item > a {
    background-color: #071437 !important;
    border-radius: 100%;
}

#forget-password,
#termsAndConditionsLink {
    color: #0D47A1;
}

    #forget-password:hover,
    #termsAndConditionsLink:hover {
        color: #0056B3;
    }

a.btn.btn-primary {
    background-color: rgb(30, 90, 170) !important;
    border-color: rgb(30, 90, 170) !important;
    color: #fff !important;
}

/* Scope text mutations strictly to plain content text nodes, leaving backdrops transparent */
span.text-muted,
p.text-muted,
div.text-muted:not(.daterangepicker) {
    color: #5A627A !important;
    opacity: 1 !important;
}

.badge-success {
    background-color: #1e7e34 !important;
    color: #fff !important;
}

.text-primary {
    color: #1e5bbf !important;
}

.text-warning {
    color: #a34700 !important;
}

/* ---------------------------------------------------------
   GLOBAL LINK SYSTEM
   --------------------------------------------------------- */
/* =========================================================================
   FIXED GLOBAL LINK SYSTEM (SAVES THE DATERANGEPICKER)
   ========================================================================= */

/* Only style standard anchor tags, completely leave daterangepicker links alone */
a:not([class*="drp"]):not([class*="daterangepicker"]):not(.available),
.link-button {
    color: #4f47ff !important;
    text-decoration: none;
}

    a:not([class*="drp"]):not([class*="daterangepicker"]):not(.available):hover,
    .link-button:hover,
    a:not([class*="drp"]):not([class*="daterangepicker"]):not(.available):focus,
    .link-button:focus {
        color: #3a2eff !important;
        text-decoration: none;
    }

    a:not([class*="drp"]):not([class*="daterangepicker"]):not(.available):focus-visible,
    .link-button:focus-visible {
        outline: 2px solid #3a2eff;
        outline-offset: 2px;
    }

    a:not([class*="drp"]):not([class*="daterangepicker"]):not(.available):visited,
    .link-button:visited {
        color: #625eff !important;
    }


    a.page-link {
        color: #fff !important;
    }

.link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    line-height: inherit;
}

/* =========================================
   Stepper Overrides
   ========================================= */
#kt_app_body .stepper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    row-gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

    #kt_app_body .stepper.stepper-pills {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

        #kt_app_body .stepper.stepper-pills .stepper-content {
            width: 100% !important;
            max-width: 100% !important;
        }

#kt_app_body .stepper-item {
    margin: 0.25rem 0.35rem !important;
    border: none !important;
}

    #kt_app_body .stepper-item .stepper-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.15rem !important; /* 🔥 tighter spacing */
        padding: 0.4rem 0.75rem !important;
        min-width: 140px !important;
        min-height: 44px !important;
        border-radius: 0.375rem !important;
        box-sizing: border-box !important;
        background-color: #e5eff4 !important;
        border: 1px solid rgb(30, 90, 170) !important;
    }

#kt_app_body .stepper-icon {
    background: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#kt_app_body .stepper-item:not(.current):not(.completed) .stepper-icon {
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

#kt_app_body .stepper-item .stepper-wrapper:focus {
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgba(30, 90, 170, 0.25) !important;
}

#kt_app_body .stepper-number {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: rgb(20, 60, 120) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    margin-right: 0.1rem !important; /* 🔥 even tighter */
}

#kt_app_body .stepper-desc {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: rgb(20, 60, 120) !important;
    text-align: left !important;
}

#kt_app_body .stepper-item.current .stepper-wrapper {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

#kt_app_body .stepper-item.current .stepper-number,
#kt_app_body .stepper-item.current .stepper-desc {
    color: #fff !important;
}

#kt_app_body .stepper-item.completed .stepper-wrapper {
    background-color: var(--bs-primary-active) !important;
    border-color: var(--bs-primary-active) !important;
}

#kt_app_body .stepper-item.completed .stepper-number,
#kt_app_body .stepper-item.completed .stepper-desc,
#kt_app_body .stepper-item.completed .stepper-icon .stepper-check,
#kt_app_body .stepper-item.completed .stepper-icon svg {
    color: #fff !important;
    fill: #fff !important;
}

#kt_app_body .stepper [data-kt-stepper-element="content"] .wizard-nav-col {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

/* =========================================================================
   BULLETPROOF STEPPER & FLEX-STACK FIX
   ========================================================================= */

/* 1. Keeps your main wizard tracking layout intact */
#kt_app_body .stepper.stepper-pills {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

    #kt_app_body .stepper.stepper-pills [data-kt-stepper-element="content"] {
        width: 100% !important;
        max-width: 100% !important;
    }

/* 2. THE FIX: Overrides any parent stretching ONLY when the picker is open */
body .daterangepicker:not([style*="display: none"]),
#kt_app_body .daterangepicker:not([style*="display: none"]) {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}


/* 3. Re-aligns your wizard headers without stepping on the picker layout */
#kt_app_body .d-flex.flex-stack:not(.daterangepicker) {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

    #kt_app_body .d-flex.flex-stack:not(.daterangepicker) > .d-flex {
        display: flex !important;
        justify-content: flex-end !important;
        gap: 0.5rem !important;
    }


/* =========================================
   Nav Pills overrides
   ========================================= */
.nav-pills .nav-link.active .nav-text {
    color: #ffffff !important; /* white text */
}

.nav-pills .nav-link.active {
    background-color: #1e5aaa !important; /* dark blue */
    border-color: #1e5aaa !important;
}

.nav-pills .nav-link .nav-text {
    color: #1e5aaa !important; /* readable blue */
}

.nav-pills .nav-link {
    background-color: #e5ecf4 !important; /* light blue */
    border: 1px solid #1e5aaa !important;
}

    .nav-pills .nav-link:not(.active):hover {
        background-color: #d7e4f0 !important;
        color: #174a8c !important;
    }

    .nav-pills .nav-link.active:hover .nav-text {
        color: #ffffff !important; /* keep white */
    }


/* =========================================
   Buttons
   ========================================= */
.btn.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-active);
    --bs-btn-hover-border-color: var(--bs-primary-active);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--bs-primary-active);
    --bs-btn-active-border-color: var(--bs-primary-active);
    --bs-btn-active-color: #fff;
}

    .btn.btn-primary:hover,
    .btn.btn-primary:focus,
    .btn.btn-primary:active,
    .btn.btn-primary.btn-active,
    .show > .btn.btn-primary.dropdown-toggle,
    .btn-check:focus + .btn.btn-primary,
    .btn-check:checked + .btn.btn-primary:focus {
        background-color: var(--bs-primary-active) !important;
        border-color: var(--bs-primary-active) !important;
        color: #fff !important;
        box-shadow: 0 0 0 0.25rem rgba(30, 90, 170, 0.25) !important;
    }

/* SUCCESS — now controlled by root variables */
.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success:active,
.btn.btn-success.btn-active,
.show > .btn.btn-success.dropdown-toggle,
.btn-check:focus + .btn.btn-success,
.btn-check:checked + .btn.btn-success:focus {
    background-color: var(--bs-success-hover) !important;
    border-color: var(--bs-success-hover) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.25rem rgba(30, 120, 60, 0.25) !important;
}

/* Light-primary outline */
.btn.btn-light-primary.btn-outline,
.btn.btn-primary-outline {
    background-color: transparent !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-primary) !important;
}

    .btn.btn-light-primary.btn-outline:hover,
    .btn.btn-light-primary.btn-outline:focus,
    .btn.btn-light-primary.btn-outline:active,
    .btn.btn-light-primary.btn-outline.btn-active,
    .btn.btn-primary-outline:hover,
    .btn.btn-primary-outline:focus,
    .btn.btn-primary-outline:active,
    .show > .btn.btn-light-primary.btn-outline.dropdown-toggle {
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
        color: #fff !important;
        box-shadow: 0 0 0 0.25rem rgba(30, 90, 170, 0.25) !important;
    }

/* =========================================
   Checkboxes
   ========================================= */
.form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(30, 90, 170, 0.25) !important;
    border-color: var(--bs-primary) !important;
}

.form-check-input:disabled ~ label.form-check-label {
    color: #6C757D !important;
    opacity: 1 !important;
}

/* =========================================
   Alerts
   ========================================= */
.alert-danger {
    background-color: #b91c1c !important;
    color: #ffffff !important;
}

    .alert-danger .alert-heading {
        color: #ffffff !important;
        font-weight: 600;
    }

.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    font-size: 1em;
}

/* =========================================
   Pagination
   ========================================= */
.pagination .page-link {
    color: #333;
    background-color: transparent;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
    text-decoration: none;
}

    .pagination .page-link:hover,
    .pagination .page-link:focus {
        color: #1e5aaa;
        background-color: #e9ecef;
        outline: 2px solid #1e5aaa;
        outline-offset: 2px;
    }

.pagination .active .page-link {
    color: #fff;
    background-color: #1e5aaa;
    border-color: #1e5aaa;
}

.pagination .page-item:not(.active) .page-link {
    color: #333 !important;
    background-color: transparent !important;
    border: 1px solid #dee2e6 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Accessible blue-based alert overrides */
.alert-success {
    background-color: #1E5AAA;
    color: #FFFFFF;
    border-color: #1E5AAA;
}

.alert-secondary {
    background-color: #0F2F5C;
    color: #FFFFFF;
    border-color: #0F2F5C;
}

.alert-warning {
    background-color: #205CA0;
    color: #FFFFFF;
    border-color: #205CA0;
}

.alert-danger {
    background-color: #2A3F80;
    color: #FFFFFF;
    border-color: #2A3F80;
}

/* =========================================
   Select2
   ========================================= */
.select2-container--default .select2-results__option {
    color: #3F4254 !important;
    opacity: 1 !important;
}

.select2-container--default .select2-results__option--selected {
    color: #3F4254 !important;
    font-weight: 600;
}

/* =========================================================================
   SAFE ISOLATED OPACITY SYSTEM (RESTORES DISMISS EVENTS)
   ========================================================================= */

/* Scope text mutations strictly to plain content text nodes, leaving backdrops transparent */
span.text-muted,
p.text-muted,
div.text-muted:not(.daterangepicker) {
    color: #5A627A !important;
    opacity: 1 !important;
}

/* Isolate disabled forms safely without forcing structural layers to paint solid */
.form-check-input:disabled ~ label.form-check-label {
    color: #6C757D !important;
    opacity: 1 !important;
}

/* Restrict third-party option dropdown configurations to select wrappers only */
.select2-container--default ul.select2-results__options .select2-results__option--disabled {
    color: #6C757D !important;
    opacity: 1 !important;
}


.select2-container--bootstrap5 .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #3F4254 !important;
    opacity: 1 !important;
}

.select2-container--default .select2-results__option--highlighted {
    background-color: #1e5bbf !important;
    color: #fff !important;
}

.select2-container--bootstrap5 .select2-selection__choice,
.select2-container--default .select2-selection__choice {
    background-color: #E9ECEF !important;
    color: #3F4254 !important;
    border-color: #1e5bbf !important;
    opacity: 1 !important;
}

.select2-container--bootstrap5 .select2-selection__choice__remove,
.select2-container--default .select2-selection__choice__remove {
    color: #3F4254 !important;
    opacity: 1 !important;
}

    .select2-container--bootstrap5 .select2-selection__choice__remove:hover,
    .select2-container--default .select2-selection__choice__remove:hover {
        color: #1e5bbf !important;
    }

/* =========================================
   WCAG Text Utilities
   ========================================= */
.text-success-wcag {
    color: #0f6d3f !important;
}

#kt_app_header_wrapper span.symbol-label {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

#kt_app_header_wrapper span.symbol-label.symbol-label {
    background-color: var(--bs-primary) !important;
}

#kt_app_header_wrapper .symbol .symbol-label {
    background-color: var(--bs-primary) !important;
}

.badge-warning,
.badge.badge-warning,
.badge-warning.unread-notification-count {
    background-color: #C05600 !important; /* deep amber */
    color: #FFFFFF !important; /* white text */
}

.symbol-label {
    background-color: transparent !important;
}

/* ===========================================
    FIELDSET OVERRIDES
    ========================================== */

fieldset legend {
    display: inline-block;
    font-size: 1rem; /* same as label */
    font-weight: 400; /* same as label */
    margin-bottom: .5rem; /* same spacing as label */
    padding: 0; /* remove default legend padding */
    width: auto; /* prevents full-width block behavior */
}

/* ================================
   ABP CONFIRMATION MODAL (YES/NO)
   ================================ */
#AbpConfirmationModal .modal-footer .btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

#AbpConfirmationModal .modal-footer .btn-secondary {
    background-color: #071437 !important; /* matches your .btn-light-primary text color */
    border-color: #071437 !important;
    color: #fff !important;
}

/* Hover states */
#AbpConfirmationModal .modal-footer .btn-primary:hover {
    background-color: rgb(30, 90, 170) !important;
    border-color: rgb(30, 90, 170) !important;
}

#AbpConfirmationModal .modal-footer .btn-secondary:hover {
    background-color: #0056B3 !important;
    border-color: #0056B3 !important;
}

/* ================================
   SWEETALERT2 — COMPRESSED GLOBAL
   ================================ */

/* Confirm (OK / YES) */
.swal2-confirm.swal2-styled,
.swal2-actions .swal2-confirm {
    background-color: var(--bs-primary) !important;
    border: none !important;
    color: #fff !important;
}

    .swal2-confirm.swal2-styled:hover,
    .swal2-actions .swal2-confirm:hover {
        background-color: rgb(30, 90, 170) !important;
        color: #fff !important;
    }

/* Cancel (Cancel / No) */
.swal2-cancel.swal2-styled,
.swal2-actions .swal2-cancel {
    background-color: #fff !important;
    border: 1px solid #071437 !important;
    color: #071437 !important;
}

    .swal2-cancel.swal2-styled:hover,
    .swal2-actions .swal2-cancel:hover {
        background-color: #f0f2f7 !important;
        border-color: #071437 !important;
        color: #071437 !important;
    }

/* Deny (third button type) */
.swal2-deny.swal2-styled,
.swal2-actions .swal2-deny {
    background-color: #b00020 !important;
    border: none !important;
    color: #fff !important;
}

    .swal2-deny.swal2-styled:hover,
    .swal2-actions .swal2-deny:hover {
        background-color: #8a001a !important;
        color: #fff !important;
    }

/* Fallback for ANY styled SweetAlert2 button */
.swal2-popup .swal2-styled {
    box-shadow: none !important;
    border-radius: 0.375rem !important;
}


/* =========================================
   Date Picker
   ========================================= */
.ui-datepicker-calendar th {
    font-size: 0 !important;
    position: relative;
}

    .ui-datepicker-calendar th::before {
        content: attr(title);
        font-size: 12px;
        color: #333;
        font-weight: 600;
    }

.ui-datepicker-calendar .ui-state-disabled span {
    color: #666 !important;
    opacity: 1 !important;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
    border-color: #333 !important;
}

.ui-datepicker-prev:hover span,
.ui-datepicker-next:hover span {
    border-color: #000 !important;
}

.ui-datepicker-calendar td a:hover {
    background-color: #e6f0ff !important;
    color: #000 !important;
}

.ui-datepicker-calendar .ui-state-active {
    background-color: #0d6efd !important;
    color: #fff !important;
    border-color: #0a58ca !important;
}

.ui-datepicker-title {
    color: #000 !important;
    font-weight: 600;
}

/* =========================================================================
   COMPLIANT DATERANGEPICKER VISUAL STYLING (GHOST-PROOFED)
   ========================================================================= */

/* Only paint or style the picker if it has actively computed positioning styles */
body > .daterangepicker:not([style*="top"]),
body > .daterangepicker[style*="display: none"],
body > .daterangepicker[style*="display:none"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- WCAG Compliance Styles (Completely Safe & Preserved) --- */
body > .daterangepicker[style*="top"] {
    box-sizing: border-box !important;
}

.daterangepicker[style*="top"] td.off {
    color: #666 !important;
    opacity: 1 !important;
}

.daterangepicker[style*="top"] td.weekend {
    color: #333 !important;
}

.daterangepicker[style*="top"] td.available:hover {
    background-color: #e6f0ff !important;
    color: #000 !important;
}

.daterangepicker[style*="top"] .month,
.daterangepicker[style*="top"] th {
    color: #000 !important;
    font-weight: 600;
}

.daterangepicker[style*="top"] .calendar-table table {
    border-color: #ccc !important;
}

.daterangepicker[style*="top"] td.active,
.daterangepicker[style*="top"] td.active:hover,
.daterangepicker[style*="top"] td.active.start-date,
.daterangepicker[style*="top"] td.active.end-date,
.daterangepicker[style*="top"] td.active.start-date.end-date,
.daterangepicker[style*="top"] td.active.start-date.end-date.available {
    background-color: #0d6efd !important;
    color: #fff !important;
    border: none !important;
}

.daterangepicker[style*="top"] .calendar-table .table-condensed tbody tr td.active {
    background-color: #0d6efd !important;
    color: #fff !important;
    border: none !important;
}

/* =========================================================================
   DATATABLE PAGINATION STYLING RESTORATION (PROTECTS DATE PICKER)
   ========================================================================= */

/* 1. Tell the wizard flex-stack system to completely ignore datatable structures */
#kt_app_body .d-flex.flex-stack:has(.dataTables_paginate),
#kt_app_body .d-flex.flex-stack:has(.pagination),
#kt_app_body .dataTables_paginate .pagination {
    display: flex !important;
    justify-content: flex-end !important; /* Forces row alignment to group beautifully on the right */
    width: auto !important;
}

/* 2. Re-establish standard structural block constraints for datatable lists */
body .pagination .page-item,
body .dataTables_wrapper .pagination .page-item {
    display: inline-block !important;
    margin: 0 2px !important;
}

    /* 3. Restore your native dark blue active circle layout highlight */
    body .pagination .page-item.active .page-link,
    body .dataTables_wrapper .pagination .page-item.active .page-link,
    li.active.paginate_button.page-item > a {
        background-color: #071437 !important;
        border-color: #071437 !important;
        color: #ffffff !important;
        border-radius: 50% !important; /* Perfect rounding track */
        padding: 0.375rem 0.75rem !important;
        display: block !important;
    }

    /* 4. Restore standard padding parameters to non-active numbers so they match perfectly */
    body .pagination .page-item:not(.active) .page-link,
    body .dataTables_wrapper .pagination .page-item:not(.active) .page-link {
        color: #333333 !important;
        background-color: transparent !important;
        border: 1px solid #dee2e6 !important;
        padding: 0.375rem 0.75rem !important;
        border-radius: 4px !important;
        display: block !important;
    }

    /* =========================================================================
   DATATABLE PAGINATION PERFECT CENTERING TWEAK
   ========================================================================= */

    /* Force all pagination links to center their text perfectly inside their boxes */
    body .pagination .page-item .page-link,
    body .dataTables_wrapper .pagination .page-item .page-link,
    li.paginate_button.page-item > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        /* Lock dimensions to a perfect square track so it forms a seamless circle */
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important; /* Wipe out uneven block padding causing the offset */
        box-sizing: border-box !important;
    }

    /* Ensure the active blue circle handles the exact same flex geometry layout specifications */
    body .pagination .page-item.active .page-link,
    li.active.paginate_button.page-item > a {
        border-radius: 50% !important;
    }

.fileinput-button {
    position: relative;
    overflow: hidden;
    display: inline-block !important;
    width: auto !important;
    max-width: fit-content !important;
    cursor: pointer !important;
}

    .fileinput-button input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer !important;
    }