/* ==========================================================================
   eMDV Multi-Tenant Application Custom Stylesheet
   Created to extend and customize theme components
   ========================================================================== */

/* ==========================================================================
   Global Application Brand Theme Override: #556ee6 -> #1a5276 (Deep Navy Blue)
   Replaces royal blue with deep navy blue across buttons, tabs, pills,
   badges, avatars, header dropdowns, focus rings, gradients, and active states.
   ========================================================================== */
:root {
    --bs-primary: #1a5276 !important;
    --bs-primary-rgb: 26, 82, 118 !important;
    --bs-primary-hover: #144260 !important;
    --bs-primary-active: #0f3249 !important;
}

/* Base Transitions for Smooth Hover Effects */
.btn,
.nav-link,
.page-link,
.dropdown-item,
.table-hover tbody tr {
    transition: all 0.2s ease-in-out !important;
}

/* High Specificity Background Overrides for Avatars, Badges, Header & Sidebar */
.bg-primary,
.badge.bg-primary,
.avatar-title.bg-primary,
.rounded-circle.bg-primary,
#page-header-user-dropdown .bg-primary,
.avatar-xs .avatar-title.bg-primary,
.avatar-sm .avatar-title.bg-primary,
div.bg-primary,
span.bg-primary,
a.bg-primary,
[class*="bg-primary"] {
    background-color: #1a5276 !important;
    color: #ffffff !important;
}

.bg-soft-primary,
.badge-soft-primary,
.avatar-title.bg-soft-primary,
.rounded-circle.bg-soft-primary,
#page-header-user-dropdown .bg-soft-primary,
.avatar-xs .avatar-title.bg-soft-primary,
.avatar-sm .avatar-title.bg-soft-primary,
div.bg-soft-primary,
span.bg-soft-primary,
a.bg-soft-primary,
[class*="bg-soft-primary"] {
    background-color: rgba(26, 82, 118, 0.15) !important;
    color: #1a5276 !important;
}

.text-primary,
.text-emdv-primary,
a.text-primary,
span.text-primary,
i.text-primary,
div.text-primary {
    color: #1a5276 !important;
}

a.text-primary:hover,
span.text-primary:hover,
.text-primary:hover {
    color: #144260 !important;
}

/* ==========================================================================
   Complete Comprehensive Hover & Active State Design System (#1a5276)
   ========================================================================== */

/* 1. Primary Buttons Hover & Active States */
.btn-primary {
    background-color: #1a5276 !important;
    border-color: #1a5276 !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.show,
.show > .btn-primary.dropdown-toggle,
button.btn-primary:hover,
a.btn-primary:hover {
    background-color: #144260 !important;
    border-color: #144260 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(26, 82, 118, 0.35) !important;
    transform: translateY(-1px);
}

/* 2. Outline Primary Buttons Hover & Checked States */
.btn-outline-primary {
    color: #1a5276 !important;
    border-color: #1a5276 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-primary:hover,
.btn-check:checked + .btn-outline-primary:focus,
.btn-check:checked + .btn-outline-primary:active,
.btn-check:active + .btn-outline-primary {
    background-color: #1a5276 !important;
    border-color: #1a5276 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(26, 82, 118, 0.25) !important;
}

.btn-check:checked + .btn,
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-primary *,
.btn-check:checked + .btn-outline-primary i,
.btn-check:checked + .btn-outline-secondary,
.btn-check:checked + .btn-outline-success,
.btn-check:checked + .btn-outline-danger,
.btn-check:checked + .btn-outline-warning,
.btn-check:checked + .btn-outline-info,
.btn-check:checked + .btn-outline-dark {
    color: #ffffff !important;
}

/* 3. Soft Primary Buttons Hover */
.btn-soft-primary {
    background-color: rgba(26, 82, 118, 0.12) !important;
    color: #1a5276 !important;
    border: none !important;
}

.btn-soft-primary:hover,
.btn-soft-primary:focus,
.btn-soft-primary:active {
    background-color: #1a5276 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(26, 82, 118, 0.2) !important;
}

/* 4. Green Add Item Button Hover */
.btn-add-item:hover,
.btn-add-item:focus,
.btn-add-item:active,
button[style*="background-color: #20c997"]:hover,
button[style*="background-color:#20c997"]:hover {
    background-color: #1baa80 !important;
    border-color: #1baa80 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(32, 201, 151, 0.35) !important;
}

/* 5. Navy Search Button Hover */
.btn-search-navy:hover,
.btn-search-navy:focus,
.btn-search-navy:active,
button[style*="background-color: #175685"]:hover,
button[style*="background-color:#175685"]:hover {
    background-color: #124368 !important;
    border-color: #124368 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(23, 86, 133, 0.35) !important;
}

/* 6. Nav Pills & Tabs Hover & Active States */
.nav-pills .nav-link {
    color: #495057;
    transition: all 0.2s ease-in-out;
}

.nav-pills .nav-link:hover {
    background-color: rgba(26, 82, 118, 0.12) !important;
    color: #1a5276 !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #1a5276 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(26, 82, 118, 0.25);
}

.nav-pills .nav-link.active:hover,
.nav-pills .show > .nav-link:hover {
    background-color: #144260 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(26, 82, 118, 0.35);
}

.nav-tabs .nav-link:hover {
    color: #1a5276 !important;
    border-bottom: 2px solid rgba(26, 82, 118, 0.5) !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #1a5276 !important;
    border-bottom: 2px solid #1a5276 !important;
    font-weight: 600;
}

.nav-tabs .nav-link.active:hover {
    color: #144260 !important;
    border-bottom: 2px solid #144260 !important;
}

/* Brand & Typography Enhancements */
.bg-emdv-gradient {
    background: linear-gradient(135deg, #1a5276 0%, #11364f 100%) !important;
}

.brand-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.tenant-active-badge {
    background-color: rgb(255 255 255 / 15%);
    color: #000000;
    border: 1px solid rgba(52, 195, 143, 0.3);
}

.tenant-platform-badge {
    background-color: rgba(26, 82, 118, 0.15) !important;
    color: #1a5276 !important;
    border: 1px solid rgba(26, 82, 118, 0.3) !important;
}

/* Authentication Page UI/UX Refinements */
.auth-page-wrapper {
    min-height: 100vh;
    background: #f8f8fb;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-card-wrapper {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

.auth-card {
    border: none;
    box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.08);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.auth-header-box {
    background: linear-gradient(135deg, #1a5276 0%, #11364f 100%) !important;
    padding: 2.25rem 2rem 3rem 2rem;
    color: #ffffff;
    position: relative;
}

.auth-header-title {
    color: #ffffff !important;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.auth-header-subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.9rem;
}

.auth-logo-badge {
    position: absolute;
    bottom: -24px;
    left: 2rem;
    width: 48px;
    height: 48px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: #1a5276;
    font-size: 1.5rem;
    font-weight: bold;
}

.auth-body-content {
    padding: 2.5rem 2rem 2rem 2rem;
    background: #ffffff;
}

.auth-input-group .form-control {
    border-right: none;
}

.auth-input-group .btn-password-toggle {
    border-left: none;
    background-color: #f8f9fa;
    border-color: #ced4da;
    color: #74788d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.47rem 0.75rem;
    cursor: pointer;
    z-index: 4;
}

.auth-input-group .btn-password-toggle:hover {
    background-color: #eff2f7;
    color: #495057;
}

.auth-input-group .btn-password-toggle:focus {
    box-shadow: none;
    border-color: #ced4da;
    color: #495057;
}

.auth-input-group .form-control:focus + .btn-password-toggle {
    border-color: #556ee6;
}

.auth-input-group .form-control.is-invalid + .btn-password-toggle {
    border-color: #f46a6a;
}

.auth-submit-btn {
    padding: 0.65rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 0.4rem;
    box-shadow: 0 4px 10px rgba(26, 82, 118, 0.3);
    transition: all 0.2s ease-in-out;
}

.auth-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(26, 82, 118, 0.4);
}

/* Flash Alert Styling */
.emdv-alert {
    border-radius: 0.5rem;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Card Header Action Styling */
.card-header-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Responsive Table Adjustments */
.table-responsive {
    border-radius: 0.5rem;
}

/* Header User Dropdown Styling */
#page-header-user-dropdown {
    display: flex !important;
    align-items: center !important;
    height: 70px;
}

#page-header-user-dropdown .fw-medium {
    color: #495057;
    font-size: 14px;
    line-height: 1.2;
}

/* Select2 Skote Theme Font & Dropdown Fine-Tuning */
.select2-container,
.select2-container--bootstrap-5,
.select2-dropdown,
.select2-selection,
.select2-selection__rendered,
.select2-selection__placeholder,
.select2-search__field,
.select2-results__option {
    font-family: inherit !important;
    font-size: 13px !important;
}

.select2-container,
.select2-container *,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--bootstrap-5 .select2-selection--single,
.select2-container--bootstrap-5 .select2-selection--multiple,
.select2-dropdown,
.select2-selection__choice,
.select2-search--dropdown .select2-search__field {
    border-radius: 0px !important;
}

.select2-container--bootstrap-5 .select2-selection {
    font-size: 13px !important;
    border-color: #ced4da !important;
    border-radius: 0px !important;
    min-height: 31px !important;
    background-color: #ffffff !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #1a5276 !important;
    box-shadow: 0 0 0 0.15rem rgba(26, 82, 118, 0.2) !important;
}

.select2-container--bootstrap-5 .select2-selection--single {
    height: 31px !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0px !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    font-size: 13px !important;
    color: #495057 !important;
    line-height: 1.5 !important;
    padding-left: 0 !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
    font-size: 13px !important;
    color: #c4c9d0 !important;
    font-weight: 400 !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple {
    min-height: 31px !important;
    padding: 2px 4px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 3px !important;
    border-radius: 0px !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    font-size: 12px !important;
    background-color: #1a5276 !important;
    border: 1px solid #1a5276 !important;
    color: #ffffff !important;
    border-radius: 0px !important;
    padding: 2px 8px !important;
    margin: 1px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.4 !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: bold !important;
    margin-right: 5px !important;
    border: none !important;
    cursor: pointer !important;
    background: transparent !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ffffff !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline .select2-search__field {
    font-size: 13px !important;
    margin-top: 0 !important;
    height: 24px !important;
    line-height: 20px !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline .select2-search__field {
    font-size: 13px !important;
    margin-top: 0 !important;
    height: 24px !important;
    line-height: 24px !important;
}

.select2-dropdown {
    font-size: 13px !important;
    border-color: #ced4da !important;
    border-radius: 0px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    z-index: 1065 !important;
}

.select2-search--dropdown .select2-search__field {
    font-size: 13px !important;
    padding: 4px 8px !important;
    border-color: #ced4da !important;
    border-radius: 0px !important;
}

/* Pagination Fix & SVG Constraints */
.pagination svg,
nav[role="navigation"] svg,
.page-link svg,
.page-item svg {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    fill: currentColor !important;
}

nav[role="navigation"] div.flex {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

nav[role="navigation"] div.hidden {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.pagination {
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.page-item.active .page-link {
    background-color: #1a5276 !important;
    border-color: #1a5276 !important;
    color: #ffffff !important;
}

.page-item.active .page-link:hover {
    background-color: #144260 !important;
    border-color: #144260 !important;
    color: #ffffff !important;
}

.page-link {
    color: #1a5276 !important;
}

.page-link:hover {
    color: #144260 !important;
    background-color: rgba(26, 82, 118, 0.1) !important;
}

.form-check-input:checked {
    background-color: #1a5276 !important;
    border-color: #1a5276 !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #1a5276 !important;
    box-shadow: 0 0 0 0.15rem rgba(26, 82, 118, 0.2) !important;
}

.badge.bg-primary {
    background-color: #1a5276 !important;
}

.badge-soft-primary,
.bg-soft-primary {
    background-color: rgba(26, 82, 118, 0.15) !important;
    color: #1a5276 !important;
}

/* Component Button Design System */
.btn-approve-action {
    background: linear-gradient(135deg, #34c38f 0%, #2ba77a 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(52, 195, 143, 0.25);
    transition: all 0.2s ease-in-out;
}

.btn-approve-action:hover,
.btn-approve-action:focus {
    background: linear-gradient(135deg, #2ba77a 0%, #228b63 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(52, 195, 143, 0.35);
    transform: translateY(-1px);
}

.btn-approve-no-role {
    border: 1px dashed #f1b44c !important;
    background-color: rgba(241, 180, 76, 0.12) !important;
    color: #b7791f !important;
    transition: all 0.2s ease-in-out;
}

.btn-approve-no-role:hover,
.btn-approve-no-role:focus {
    background-color: rgba(241, 180, 76, 0.25) !important;
    color: #92400e !important;
    border-color: #f1b44c !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(241, 180, 76, 0.2);
}

.btn-xs {
    padding: 0.15rem 0.45rem !important;
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
    border-radius: 0.2rem !important;
}

/* ==========================================================================
   Reusable Enterprise Table Header CSS Component
   Dark Navy Blue header theme matching reference design system.
   ========================================================================== */
.table-navy {
    border-top: 1px solid #1a5276 !important;
}

.table-navy thead th,
.table-navy thead tr th,
table.table-navy > thead > tr > th {
    background-color: #1a5276 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
    vertical-align: middle !important;
}

.table-navy thead th:last-child,
.table-navy thead tr th:last-child,
table.table-navy > thead > tr > th:last-child {
    border-right: none !important;
}

/* Enterprise Header Action & Search Buttons */
.btn-add-item {
    background-color: #20c997 !important;
    border-color: #20c997 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    padding: 0.375rem 0.85rem !important;
    border-radius: 4px !important;
    transition: all 0.2s ease-in-out;
}

.btn-add-item:hover,
.btn-add-item:focus {
    background-color: #1baa80 !important;
    border-color: #1baa80 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(32, 201, 151, 0.3);
}

.btn-search-navy {
    background-color: #175685 !important;
    border-color: #175685 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.btn-search-navy:hover,
.btn-search-navy:focus {
    background-color: #124368 !important;
    border-color: #124368 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Clean Enterprise Modal Container & Header Styling
   Fixes thin white background leak and top edge artifacts around dark title.
   ========================================================================== */
.modal-content {
    overflow: hidden !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

.modal-header {
    background-color: #1a5276 !important;
    color: #ffffff !important;
    border-bottom: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    margin: 0 !important;
}

.modal-header .modal-title,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header h6 {
    color: #ffffff !important;
}

.modal-header small,
.modal-header .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 0.85 !important;
}

.modal-header .btn-close:hover {
    opacity: 1 !important;
}

/* ==========================================================================
   Responsive SmartForm Preview Device Viewport Simulator
   ========================================================================== */
#previewDeviceWrapper {
    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-radius 0.3s ease !important;
}

/* Tablet Preview Viewport Simulation (768px - 2 Col Stack) */
#previewDeviceWrapper.preview-mode-tablet {
    max-width: 768px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid #ced4da !important;
    border-radius: 8px !important;
}

#previewDeviceWrapper.preview-mode-tablet .preview-col.col-md-3,
#previewDeviceWrapper.preview-mode-tablet .preview-col.col-md-4,
#previewDeviceWrapper.preview-mode-tablet .preview-col.col-md-2 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
}

/* Mobile Preview Viewport Simulation (420px - 1 Col Stack) */
#previewDeviceWrapper.preview-mode-mobile {
    max-width: 420px !important;
    box-shadow: 0 12px 36px rgba(26, 82, 118, 0.22) !important;
    border: 3px solid #1a5276 !important;
    border-radius: 16px !important;
}

#previewDeviceWrapper.preview-mode-mobile .preview-col,
#previewDeviceWrapper.preview-mode-mobile [class*="col-md-"],
#previewDeviceWrapper.preview-mode-mobile [class*="col-sm-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Collapse Horizontal Labels to Vertical Stack on Mobile Preview */
#previewDeviceWrapper.preview-mode-mobile .preview-col .row.align-items-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

#previewDeviceWrapper.preview-mode-mobile .preview-col label.col-form-label {
    width: 100% !important;
    text-align: left !important;
    padding-bottom: 4px !important;
}

#previewDeviceWrapper.preview-mode-mobile .preview-col div[class*="col-sm-"] {
    width: 100% !important;
}

/* ==========================================================================
   Select2 Global Theme Override: High Visibility & Hover Contrast
   ========================================================================== */

/* 1. Global Select2 Dropdown Option Base */
/* 1. Global Select2 Dropdown Option Base (Clean White Background for ALL options) */
.select2-container .select2-results__option,
.select2-container--bootstrap-5 .select2-results__option,
.select2-container--default .select2-results__option,
.select2-results__option,
.select2-container--bootstrap-5 .select2-results__option--selected,
.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container .select2-results__option[aria-selected="true"],
.select2-results__option[aria-selected="true"],
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"],
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted),
.select2-container--bootstrap-5 .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-results__options .select2-results__option[aria-selected="true"] {
    padding: 7px 12px !important;
    font-size: 13px !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    transition: background-color 0.1s ease, color 0.1s ease !important;
}

.select2-container .select2-results__option *,
.select2-container--bootstrap-5 .select2-results__option *,
.select2-container--default .select2-results__option *,
.select2-container--bootstrap-5 .select2-results__option--selected *,
.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] *,
.select2-container--default .select2-results__option--selected *,
.select2-container--default .select2-results__option[aria-selected="true"] *,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected *,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"] * {
    color: #1e293b !important;
}

/* Checkbox icon styles per state */
.select2-results__option .select2-cb-icon {
    font-size: 15px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    display: inline-block !important;
}

/* Unselected Checkbox Icon Color */
.select2-results__option:not([aria-selected="true"]):not(.select2-results__option--selected) .select2-cb-icon {
    color: #64748b !important;
    opacity: 0.75 !important;
}

/* Selected Checkbox Icon Color */
.select2-results__option[aria-selected="true"] .select2-cb-icon,
.select2-results__option--selected .select2-cb-icon {
    color: #1a5276 !important;
    opacity: 1 !important;
}

/* 2. HOVER / HIGHLIGHTED STATE (Only the single item currently under mouse highlights in Deep Navy #1a5276) */
.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-results__option--highlighted:not(.select2-results__option--selected),
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected="true"],
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected="false"],
.select2-container--bootstrap-5 .select2-results__option.select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container .select2-results__option--highlighted,
.select2-results__option--highlighted,
.select2-results__option--highlighted[aria-selected],
.select2-results__option:hover,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option--highlighted[aria-selected="true"],
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option--highlighted[aria-selected="false"],
.select2-container--bootstrap-5 .select2-results__options .select2-results__option--highlighted {
    background-color: #1a5276 !important;
    background: #1a5276 !important;
    color: #ffffff !important;
}

/* Force ALL text, icons, labels, and elements inside hovered option to solid white */
.select2-container--bootstrap-5 .select2-results__option--highlighted *,
.select2-container--bootstrap-5 .select2-results__option--highlighted i,
.select2-container--bootstrap-5 .select2-results__option--highlighted span,
.select2-container--default .select2-results__option--highlighted *,
.select2-container--default .select2-results__option--highlighted i,
.select2-container--default .select2-results__option--highlighted span,
.select2-container .select2-results__option--highlighted *,
.select2-results__option--highlighted *,
.select2-results__option--highlighted i,
.select2-results__option--highlighted span,
.select2-results__option--highlighted div,
.select2-results__option--highlighted label,
.select2-results__option:hover *,
.select2-results__option:hover i,
.select2-results__option:hover span,
.select2-results__option:hover .select2-cb-icon,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted *,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option--highlighted[aria-selected="true"] * {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* 4. Multiple Choice Tags / Pills in Closed Input Header */
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: #1a5276 !important;
    border: 1px solid #144260 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 0px !important;
    padding: 3px 8px !important;
    margin-top: 4px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    color: #ffffff !important;
    margin-right: 6px !important;
    border: none !important;
    opacity: 0.85;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
    opacity: 1 !important;
    color: #ffdddd !important;
}

/* Sidebar Backdrop Overlay for Mobile / Responsive Drawer ONLY */
@media (max-width: 991.98px) {
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(15, 23, 42, 0.45);
        z-index: 1004;
    }

    body.sidebar-enable .sidebar-overlay {
        display: block !important;
    }
}

/* ==========================================================================
   Input Group Select2 Country Phone Code Styling
   ========================================================================== */
.input-group .select2-container--bootstrap-5,
.input-group .select2-container--default,
.input-group .select2-container {
    flex: 0 0 auto !important;
    width: 145px !important;
}

.input-group .select2-container .select2-selection--single {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    height: 100% !important;
    min-height: 31px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.input-group .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 25px !important;
    font-size: 12px !important;
    padding-left: 8px !important;
    padding-right: 20px !important;
}

.input-group .select2-container + input.form-control,
.input-group .select2-container + .form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.select2-country-code-dropdown {
    min-width: 330px !important;
    max-width: 440px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    z-index: 1060 !important;
}
.select2-country-code-dropdown .select2-search {
    padding: 6px !important;
}
.select2-country-code-dropdown .select2-search__field {
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    padding: 5px 8px !important;
    font-size: 0.825rem !important;
}
.select2-country-code-dropdown .select2-results__options {
    max-height: 250px !important;
}
.select2-country-code-dropdown .select2-results__option {
    padding: 6px 10px !important;
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
}

/* ==========================================================================
   Modern Teal-Navy Sidebar & Brand Box Theme Overrides
   ========================================================================== */
body[data-sidebar="dark"] .navbar-brand-box,
body[data-sidebar="dark"] .vertical-menu,
.vertical-menu {
    background-color: #174f73 !important;
    background: #174f73 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Sidebar Logo / Brand Styling */
body[data-sidebar="dark"] .navbar-brand-box .logo-light span.font-size-18 {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}
body[data-sidebar="dark"] .navbar-brand-box .logo-light span.font-size-12 {
    color: rgba(255, 255, 255, 0.65) !important;
    font-weight: 400 !important;
}

/* Menu Section Titles (e.g., REQUEST PORTAL, ORGANIZATION ADMINISTRATION) */
#sidebar-menu .menu-title,
body[data-sidebar="dark"] #sidebar-menu .menu-title {
    color: rgba(255, 255, 255, 0.45) !important;
    font-weight: 600 !important;
    font-size: 0.6875rem !important; /* 11px */
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 18px 20px 6px !important;
    opacity: 0.85 !important;
}

/* Menu Top-level Links (Pill Container) */
#sidebar-menu ul li a,
body[data-sidebar="dark"] #sidebar-menu ul li a,
.vertical-menu #sidebar-menu ul li a {
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
    margin: 2px 10px !important;
    border-radius: 6px !important;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 0.8125rem !important; /* 13px */
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    position: relative !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* Inner Text Span - Pure text label only, NEVER styled as a button or box */
#sidebar-menu ul li a > span:not(.badge),
body[data-sidebar="dark"] #sidebar-menu ul li a > span:not(.badge),
.vertical-menu #sidebar-menu ul li a > span:not(.badge) {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Icons */
#sidebar-menu ul li a i,
body[data-sidebar="dark"] #sidebar-menu ul li a i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.5rem !important;
    min-width: 1.5rem !important;
    font-size: 1.15rem !important;
    margin-right: 8px !important;
    color: rgba(255, 255, 255, 0.72) !important;
    flex-shrink: 0 !important;
    transition: color 0.15s ease !important;
}

/* Hover States for Menu Items */
#sidebar-menu ul li a:hover,
body[data-sidebar="dark"] #sidebar-menu ul li a:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

#sidebar-menu ul li a:hover i,
body[data-sidebar="dark"] #sidebar-menu ul li a:hover i {
    color: #ffffff !important;
}

/* Active Menu Items - Clean, single unified pill */
#sidebar-menu ul li.mm-active > a,
body[data-sidebar="dark"] #sidebar-menu ul li.mm-active > a,
#sidebar-menu ul li a.active,
body[data-sidebar="dark"] #sidebar-menu ul li a.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.16) !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10) !important;
}

#sidebar-menu ul li.mm-active > a i,
body[data-sidebar="dark"] #sidebar-menu ul li.mm-active > a i,
#sidebar-menu ul li a.active i,
body[data-sidebar="dark"] #sidebar-menu ul li a.active i {
    color: #ffffff !important;
}

/* Ensure active inner span NEVER inherits a separate box or background */
#sidebar-menu ul li.mm-active > a > span:not(.badge),
#sidebar-menu ul li a.active > span:not(.badge),
body[data-sidebar="dark"] #sidebar-menu ul li.mm-active > a > span:not(.badge),
body[data-sidebar="dark"] #sidebar-menu ul li a.active > span:not(.badge) {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Sub-menu Dropdowns (e.g., SmartForm Builder under Smart Forms) */
#sidebar-menu ul li .sub-menu {
    background-color: rgba(10, 36, 56, 0.35) !important;
    border-radius: 6px !important;
    margin: 2px 10px 4px !important;
    padding: 4px 0 !important;
}

#sidebar-menu ul li .sub-menu li a {
    display: flex !important;
    align-items: center !important;
    padding: 6px 12px 6px 34px !important;
    margin: 1px 6px !important;
    font-size: 0.80rem !important;
    color: rgba(255, 255, 255, 0.72) !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    background: transparent !important;
    box-shadow: none !important;
}

#sidebar-menu ul li .sub-menu li a > span {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#sidebar-menu ul li .sub-menu li a:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

#sidebar-menu ul li .sub-menu li.mm-active > a,
#sidebar-menu ul li .sub-menu li a.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.14) !important;
    font-weight: 500 !important;
}

/* Badges inside Sidebar (e.g., Drafts Counter) */
#sidebar-menu ul li a .badge,
#sidebar-menu .badge {
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 2px 7px !important;
    font-size: 0.6875rem !important; /* 11px */
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    background-color: #f1b44c !important;
    color: #1a252f !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}

/* Arrows for expandable menus */
#sidebar-menu .has-arrow:after,
body[data-sidebar="dark"] #sidebar-menu .has-arrow:after {
    color: rgba(255, 255, 255, 0.6) !important;
    right: 14px !important;
    top: 50% !important;
    margin-top: -3px !important;
    transition: transform 0.2s ease, color 0.15s ease !important;
}
#sidebar-menu ul li a:hover.has-arrow:after,
body[data-sidebar="dark"] #sidebar-menu .has-arrow:hover:after,
body[data-sidebar="dark"] #sidebar-menu li.mm-active > .has-arrow:after {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ==========================================================================
   Input Placeholder Styling: Soft, Very Light Gray & Non-Bold
   Ensures placeholders are clearly distinguished from filled values
   ========================================================================== */
::placeholder,
.form-control::placeholder,
.form-control-field::placeholder,
.form-control-corp-sm::placeholder,
input::placeholder,
textarea::placeholder,
.flatpickr-input::placeholder {
    color: #c4c9d0 !important;
    font-weight: 400 !important;
    opacity: 0.85 !important;
    letter-spacing: normal !important;
}

::-webkit-input-placeholder {
    color: #c4c9d0 !important;
    font-weight: 400 !important;
    opacity: 0.85 !important;
}

::-moz-placeholder {
    color: #c4c9d0 !important;
    font-weight: 400 !important;
    opacity: 0.85 !important;
}

:-ms-input-placeholder {
    color: #c4c9d0 !important;
    font-weight: 400 !important;
    opacity: 0.85 !important;
}

:-moz-placeholder {
    color: #c4c9d0 !important;
    font-weight: 400 !important;
    opacity: 0.85 !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-search__field::placeholder {
    color: #c4c9d0 !important;
    font-weight: 400 !important;
}

.badge-soft-purple {
    background-color: #f3e8ff !important;
    color: #6b21a8 !important;
    border: 1px solid #d8b4fe !important;
}

/* ==========================================================================
   Header & Dropdown Stacking Context Fix
   Ensures topbar dropdowns (e.g., Action Notifications) float above all sticky sidebars
   ========================================================================== */
#page-topbar {
    z-index: 1030 !important;
}

#page-topbar .dropdown-menu {
    z-index: 1035 !important;
}

/* ==========================================================================
   Main Content Layout & Sticky Scroll Context Fix
   Allows position: sticky sidebars (such as Completion Progress) to track
   window scroll smoothly without being clipped or disabled by overflow: hidden
   ========================================================================== */
.main-content,
.page-content,
#layout-wrapper {
    overflow: visible !important;
}

@media (min-width: 992px) {
    .workspace-side-pane {
        align-self: stretch !important;
        position: relative !important;
        overflow: visible !important;
    }

    .workspace-side-pane .sticky-top {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 85px !important;
        z-index: 20 !important;
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        scrollbar-width: thin !important;
        scrollbar-color: #cbd5e1 transparent !important;
    }

    .workspace-side-pane .sticky-top::-webkit-scrollbar {
        width: 5px !important;
    }

    .workspace-side-pane .sticky-top::-webkit-scrollbar-track {
        background: transparent !important;
    }

    .workspace-side-pane .sticky-top::-webkit-scrollbar-thumb {
        background: #cbd5e1 !important;
        border-radius: 4px !important;
    }

    .workspace-side-pane .sticky-top::-webkit-scrollbar-thumb:hover {
        background: #94a3b8 !important;
    }
}

@media (max-width: 991.98px) {
    .workspace-side-pane .sticky-top {
        position: static !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
}