/* ========== Global dropdown & select visibility ========== */
:root {
    --rk-dropdown-z: 1025;
    --rk-modal-chrome-z: 1060;
    --rk-dropdown-panel-bg: #ffffff;
    --rk-dropdown-panel-border: #cbd5e1;
    --rk-dropdown-panel-shadow: 0 12px 32px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.08);
    --rk-dropdown-option-hover: #eff6ff;
    --rk-dropdown-option-active: #dbeafe;
    --rk-dropdown-accent: var(--bb-primary, #2563eb);
}

/* ---- Native select: rich styling & readable options ---- */
.form-select,
select.form-control {
    appearance: auto;
    -webkit-appearance: menulist;
    background-color: #fff;
    color: #1e293b;
    cursor: pointer;
    min-height: 2rem;
    line-height: 1.4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%23475569' d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 0.75rem;
    padding-right: 2rem;
}

.form-select-sm,
select.form-control-sm {
    min-height: 1.875rem;
    font-size: 0.8125rem;
    padding-right: 1.75rem;
}

.form-select option,
select.form-control option {
    background-color: #fff;
    color: #1e293b;
    padding: 0.4rem 0.5rem;
}

.form-select option:checked,
.form-select option:hover {
    background-color: #dbeafe;
    color: #1e3a8a;
}

.form-select:focus,
.form-select:focus-visible {
    border-color: var(--rk-dropdown-accent);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.22);
    outline: none;
    z-index: 2;
    position: relative;
}

.form-select:disabled {
    background-color: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
}

/* ---- Searchable select (custom) ---- */
.searchable-select,
.company-search-select {
    position: relative;
    min-width: 0;
}

.searchable-select.is-open,
.company-search-select.is-open {
    z-index: var(--rk-dropdown-z);
}

.company-search-select .company-search-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: calc(var(--rk-dropdown-z) + 1);
    max-height: min(280px, 50vh);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--rk-dropdown-panel-bg);
    border: 1px solid var(--rk-dropdown-panel-border) !important;
    border-radius: 0.5rem;
    box-shadow: var(--rk-dropdown-panel-shadow);
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9;
}

.company-search-panel--floating {
    position: fixed !important;
    right: auto !important;
    margin-top: 0 !important;
    z-index: calc(var(--rk-dropdown-z) + 10) !important;
    box-shadow: var(--rk-dropdown-panel-shadow);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Hide in-flow panel until JS positions it as fixed (prevents modal jump on open) */
.site-material-received-modal .searchable-select.is-open .company-search-panel:not(.company-search-panel--floating),
.leave-modal .searchable-select.is-open .company-search-panel:not(.company-search-panel--floating),
.modal-content .searchable-select.is-open .company-search-panel:not(.company-search-panel--floating) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
}

.rk-dropdown-panel--floating:not(.workflow-role-multiselect-panel--anchored),
.workflow-role-multiselect-panel--floating:not(.workflow-role-multiselect-panel--anchored) {
    position: fixed !important;
    right: auto !important;
    z-index: calc(var(--rk-dropdown-z) + 10) !important;
    box-shadow: var(--rk-dropdown-panel-shadow);
}

.company-search-option {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 0.45rem 0.75rem;
    color: #1e293b;
    transition: background 0.12s ease;
    cursor: pointer;
}

.company-search-option:hover,
.company-search-option:focus {
    background: var(--rk-dropdown-option-hover);
    color: #1e3a8a;
}

.company-search-option:active {
    background: var(--rk-dropdown-option-active);
}

.company-search-panel .small.text-muted {
    padding: 0.5rem 0.75rem;
}

/* ---- Multi-select filter dropdown ---- */
.multi-select-filter {
    position: relative;
    min-width: 0;
}

.multi-select-filter.is-open {
    z-index: var(--rk-dropdown-z);
}

.multi-select-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #334155;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.multi-select-filter-toggle:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.multi-select-filter.is-open .multi-select-filter-toggle {
    border-color: var(--rk-dropdown-accent);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.18);
}

.multi-select-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--rk-dropdown-z) - 5);
    background: rgba(15, 23, 42, 0.08);
    cursor: default;
}

.multi-select-filter-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: calc(var(--rk-dropdown-z) + 1);
    min-width: 220px;
    max-width: min(340px, 96vw);
    max-height: min(400px, calc(100vh - 6rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--rk-dropdown-panel-bg);
    border: 1px solid var(--rk-dropdown-panel-border) !important;
    border-radius: 0.5rem;
    box-shadow: var(--rk-dropdown-panel-shadow);
}

.multi-select-filter-menu--floating {
    position: fixed !important;
    right: auto !important;
    z-index: calc(var(--rk-dropdown-z) + 10) !important;
}

.multi-select-filter-options {
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(280px, calc(100vh - 12rem));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9;
}

.multi-select-filter-option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    margin: 0;
    cursor: pointer;
    color: #1e293b;
    transition: background 0.12s ease;
}

.multi-select-filter-option:hover {
    background: var(--rk-dropdown-option-hover);
}

.multi-select-filter-option .form-check-input {
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.multi-select-filter-option .form-check-input:disabled {
    opacity: 1;
    pointer-events: none;
}

/* ---- Bootstrap dropdown menus ---- */
.dropdown-menu {
    z-index: calc(var(--rk-dropdown-z) + 5);
    border: 1px solid var(--rk-dropdown-panel-border);
    border-radius: 0.5rem;
    box-shadow: var(--rk-dropdown-panel-shadow);
    max-height: min(320px, 60vh);
    overflow-y: auto;
}

.dropdown-item {
    color: #1e293b;
    padding: 0.4rem 0.85rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--rk-dropdown-option-hover);
    color: #1e3a8a;
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--rk-dropdown-accent);
    color: #fff;
}

/* ---- Prevent clipping: open dropdowns in scroll/overflow containers ---- */
body.rk-dropdown-open {
    overflow-x: hidden;
}

.card:has(.searchable-select.is-open),
.card:has(.multi-select-filter.is-open),
.card:has(.company-search-select.is-open),
.payroll-data-card:has(.is-open),
.payroll-filter-card:has(.is-open),
.leave-table-scroll:has(.is-open),
.leave-form-card:has(.is-open),
.leave-modal:has(.is-open),
.table-responsive:has(.is-open),
.admin-grid-filter-bar:has(.is-open),
.dashboard-filter-card:has(.is-open),
.uniform-filter-card:has(.is-open),
.projects-page-filters:has(.is-open),
.modal-content:has(.is-open),
.modal-body:has(.is-open),
.admin-modal-body:has(.is-open),
.project-edit-modal-body:has(.is-open),
.project-edit-modal-content:has(.is-open),
.site-sc-entry-form:has(.is-open),
.site-material-received-modal__body:has(.is-open),
.site-material-received-modal:has(.is-open),
.create-lead-section:has(.is-open),
.create-lead-card:has(.is-open),
.create-lead-step1:has(.is-open),
.site-labour-ledger-filters:has(.is-open),
.site-material-ledger-filters:has(.is-open),
.site-construction-home-filters:has(.is-open),
.rk-filter-grid:has(.is-open),
.leads-filter-row,
.leads-filter-row:has(.is-open),
.leads-main-card:has(.searchable-select.is-open),
.leads-main-card:has(.multi-select-filter.is-open),
.leads-flow-page .leads-main-card .card-header:has(.searchable-select.is-open),
.leads-flow-page .leads-main-card .card-header:has(.multi-select-filter.is-open) {
    overflow: visible !important;
}

.leads-flow-page .leads-main-card .card-header:has(.searchable-select.is-open),
.leads-flow-page .leads-main-card .card-header:has(.multi-select-filter.is-open) {
    position: relative;
    z-index: calc(var(--rk-dropdown-z) + 20);
}

.leads-flow-page .searchable-multi-select.is-open .company-search-panel {
    pointer-events: auto;
    z-index: calc(var(--rk-dropdown-z) + 21);
}

.searchable-multi-select__option-icon {
    font-size: 1rem;
    line-height: 1.2;
    margin-top: 0.1rem;
}

/* Modals with floating dropdowns */
.modal.show:has(.is-open),
.site-sc-material-received-backdrop:has(.is-open),
.site-sc-approval-detail-backdrop:has(.is-open),
.leave-modal-backdrop:has(.is-open),
.site-material-received-modal:has(.is-open) {
    overflow: visible !important;
}

.has-searchable-open,
.has-dropdown-open {
    overflow: visible !important;
}

/* Workflow role multiselect */
.workflow-role-multiselect {
    position: relative;
}

.workflow-role-multiselect.is-open {
    z-index: var(--rk-dropdown-z);
}

.workflow-role-multiselect-toggle {
    min-height: 2.125rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    background: #fff !important;
    color: #1e293b;
    font-size: 0.8125rem;
    line-height: 1.35;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.workflow-role-multiselect-toggle:hover:not(:disabled) {
    border-color: #94a3b8;
    background: #f8fafc !important;
}

.workflow-role-multiselect.is-open .workflow-role-multiselect-toggle {
    border-color: var(--rk-dropdown-accent);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.18);
}

.workflow-role-multiselect-summary {
    color: #334155;
}

.workflow-role-multiselect-chevron {
    color: #64748b;
    font-size: 0.75rem;
}

.workflow-role-multiselect-panel {
    z-index: calc(var(--rk-dropdown-z) + 1);
    background: var(--rk-dropdown-panel-bg);
    border: 1px solid var(--rk-dropdown-panel-border) !important;
    border-radius: 0.625rem;
    box-shadow: var(--rk-dropdown-panel-shadow);
    overflow: hidden;
    pointer-events: auto;
}

.workflow-role-multiselect-panel--anchored {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    margin-top: 0 !important;
}

.workflow-role-multiselect-panel--floating:not(.workflow-role-multiselect-panel--anchored) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: min(100%, 280px);
}

.workflow-role-multiselect-panel-label,
.workflow-role-multiselect-panel > .small.text-muted {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b !important;
    padding: 0.5rem 0.75rem 0.35rem;
    margin: 0 !important;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border-bottom: 1px solid #e2e8f0;
}

.workflow-role-multiselect-list {
    max-height: min(220px, 40vh);
    overflow-x: visible;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.35rem 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9;
}

.workflow-role-multiselect-list .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border-radius: 0.375rem;
    padding: 0.4rem 0.5rem;
    margin: 0.1rem 0;
    min-height: 1.75rem;
    padding-left: 0.5rem;
    transition: background 0.12s ease;
    cursor: pointer;
}

.workflow-role-multiselect-option {
    user-select: none;
}

.workflow-role-multiselect-list .form-check-input {
    float: none;
    margin-left: 0 !important;
    margin-top: 0.2rem;
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
    position: static;
    pointer-events: none;
}

.workflow-role-multiselect-list .form-check:hover {
    background: var(--rk-dropdown-option-hover);
}

.workflow-role-multiselect-list .form-check-label {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
    padding-left: 0;
    color: #1e293b;
    cursor: pointer;
    word-break: break-word;
    pointer-events: none;
}

.workflow-role-multiselect-panel > .d-flex.border-top {
    padding: 0.5rem 0.75rem 0.65rem !important;
    margin-top: 0 !important;
    background: #f8fafc;
    border-top-color: #e2e8f0 !important;
}

.project-edit-modal-panel--roles.is-expanded {
    overflow: visible;
}

.project-edit-modal-panel--roles .project-edit-role-filter.multi-select-filter {
    min-height: 4.5rem;
}

.project-edit-modal-panel--roles.is-expanded:has(.multi-select-filter.is-open),
.project-edit-modal-panel--roles.is-expanded:has(.workflow-role-multiselect.is-open) {
    overflow: visible;
    z-index: 3;
}

.project-edit-modal-accordion-body:has(.multi-select-filter.is-open),
.project-edit-modal-accordion-body:has(.workflow-role-multiselect.is-open) {
    overflow: visible;
}

.project-edit-modal-body:has(.multi-select-filter.is-open),
.project-edit-modal-body:has(.workflow-role-multiselect.is-open) {
    overflow: visible !important;
}

.project-edit-modal-content:has(.multi-select-filter.is-open),
.project-edit-modal-content:has(.workflow-role-multiselect.is-open) {
    overflow: visible !important;
}

.project-edit-modal-content .multi-select-filter.is-open {
    z-index: var(--rk-dropdown-z);
}

.project-edit-modal-content .multi-select-filter-menu,
.project-edit-modal-content .multi-select-filter-menu--floating {
    z-index: calc(var(--rk-dropdown-z) + 10) !important;
}

.project-edit-modal-content .multi-select-filter-backdrop {
    z-index: calc(var(--rk-dropdown-z) - 1) !important;
}

/* Embedded multiselect: pure Blazor in-flow panel (no JavaScript) */
.multi-select-filter--embedded {
    position: relative;
}

.multi-select-filter--embedded.is-open {
    z-index: var(--rk-dropdown-z);
}

.multi-select-filter-menu--embedded {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: auto !important;
    max-height: min(280px, 40vh) !important;
    z-index: calc(var(--rk-dropdown-z) + 1) !important;
}

.project-edit-modal-content .multi-select-filter--embedded {
    position: relative;
}

.project-edit-modal-content .multi-select-filter--embedded.is-open {
    z-index: var(--rk-dropdown-z);
}

.project-edit-modal-content .multi-select-filter-menu--embedded {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: auto !important;
    max-height: min(280px, 40vh) !important;
    z-index: calc(var(--rk-dropdown-z) + 1) !important;
}

.project-edit-modal-dialog:has(.multi-select-filter.is-open) {
    overflow: visible !important;
}

/* Keep modal chrome (close / cancel) above in-modal dropdown panels */
.modal.show .modal-header,
.modal.show .modal-footer,
.project-edit-modal-backdrop .modal-header,
.project-edit-modal-backdrop .modal-footer {
    position: relative;
    z-index: var(--rk-modal-chrome-z);
}

/* Searchable multi-select chips */
.searchable-multi-select__chip {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
}

@media (max-width: 768px) {
    .company-search-panel--floating,
    .multi-select-filter-menu--floating {
        max-width: calc(100vw - 1rem) !important;
    }

    .multi-select-filter-menu {
        min-width: min(260px, 92vw);
    }
}