/*
 * Unified dropdown styling (see docs/UI-CONVENTIONS.md).
 *
 * One radius + elevation scale for every dropdown in the app:
 *   - closed controls (native <select>, Select2, the picker trigger) get the
 *     rounded corner and a soft drop shadow;
 *   - open panels (Bootstrap .dropdown-menu, Select2's body-level dropdown, the
 *     site-management disbursement picker) get the full shadow.
 *
 * Only geometry lives here - colours come from the active Bootstrap/theme
 * variables (with the theme's own values as fallbacks), so dark mode and future
 * theme tweaks keep working.
 */

:root {
    --bim-dd-radius: 0.5rem;        /* controls + panels */
    --bim-dd-radius-item: 0.375rem; /* menu items + list options */
    --bim-dd-elevation: 0 0.5rem 1.25rem rgba(67, 89, 113, 0.2);
    /* Closed controls must look lifted too - a hairline reads as "no change". */
    --bim-dd-elevation-control: 0 0.125rem 0.375rem rgba(67, 89, 113, 0.14);
    /* Panel surface. The body is #f7f7f9 but cards (where these panels open
       over) are white - keep floating panels on the card colour. */
    --bim-dd-surface: #fff;
}

/* ── Closed controls ──────────────────────────────────────────────────────── */

select.form-select,
select.form-control,
select:not([multiple]):not(.bim-picker-native):not(.select2-hidden-accessible) {
    border-radius: var(--bim-dd-radius);
    box-shadow: var(--bim-dd-elevation-control);
}

/* Multi-selects are list boxes, not dropdowns: rounded, not raised. */
select[multiple],
select.form-select[multiple],
select.form-control[multiple] {
    border-radius: var(--bim-dd-radius);
    box-shadow: none;
}

/* ── Open panels ──────────────────────────────────────────────────────────── */

.dropdown-menu {
    border-radius: var(--bim-dd-radius);
    box-shadow: var(--bim-dd-elevation);
    border-color: var(--bs-border-color, rgba(67, 89, 113, 0.16));
}

.dropdown-menu .dropdown-item {
    border-radius: var(--bim-dd-radius-item);
}

/* ── Select2 (renders its own control and a body-level panel) ─────────────── */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--bim-dd-radius);
    box-shadow: var(--bim-dd-elevation-control);
    border-color: var(--bs-border-color, rgba(67, 89, 113, 0.16));
}

/* Put the dropdown arrow inside the rounded corner. */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 0.25rem;
}

/* Vendored Select2 CSS is LTR-only, so undo the nudge when the document is RTL. */
[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: auto;
    left: 0.25rem;
}

.select2-container--default .select2-dropdown {
    border-radius: var(--bim-dd-radius);
    box-shadow: var(--bim-dd-elevation);
    border-color: var(--bs-border-color, rgba(67, 89, 113, 0.16));
    /* Keeps the first/last option inside the rounded corner. */
    overflow: hidden;
}

/* Select2 attaches the open list to <body> (see AttachBody in select2.js:
   `$dropdownParent = $(options.get('dropdownParent') || document.body)`), so it lands in
   the ROOT stacking context at the vendored z-index of 1051 - and the theme puts modals at
   1090 (`--bs-modal-zindex` in vendor/css/core.css), with the backdrop at 1089. So inside a
   modal the list was painted BEHIND the dialog and opening a select appeared to do nothing:
   the invite dialog's Role field looked like it offered one option, "Owner", because all you
   could see was the closed control. Measured in the browser: with this rule absent, the
   topmost element at a point inside the open list was `div.modal-body`; with it, the list
   itself. One above the modal, and still below the admin debug box (2000). */
.select2-container--default .select2-dropdown {
    z-index: 1091;
}

/* The theme squares off the bottom of an open control and the top of the panel so
   the two merge into one shape. Here they are separate rounded boxes (like the
   picker's panel), so both keep every corner when open. */
.light-style .select2-container--default.select2-container--open .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
    border-radius: var(--bim-dd-radius);
}

.light-style .select2-container--default.select2-container--open .select2-dropdown,
.select2-container--default.select2-container--open .select2-dropdown {
    border-radius: var(--bim-dd-radius);
}

/* With their corners rounded, the two boxes must not touch: the theme removes the
   panel's top border to merge them into one shape, which left a notch at each
   corner. A small gap, like the picker's panel, keeps them separate surfaces. */
.select2-container--open .select2-dropdown--below {
    margin-top: 0.25rem;
}

.select2-container--open .select2-dropdown--above {
    margin-bottom: 0.25rem;
}

/* Long labels ("Preview Site - Disbursement - 29 Sep 2026 - UGX 10,000 - …") are
   truncated to the control's width like the picker's rows; bim-selects.js puts
   the full text on the row's title so nothing is lost. Groups wrap their own
   children, so they are left alone. */
.select2-container--default .select2-results__options > .select2-results__option:not([role=group]) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Row padding and the ACTIVE-row highlight come from the theme itself
   (.light-style .select2-container--default .select2-results__option...) - a rule
   written against the bare .select2-container--default selector loses to it. Only
   the CHOSEN row is overridden, to the picker's tint, because the vendored theme
   leaves it a flat grey and the two list styles should mark a selection alike. */
.light-style .select2-container--default .select2-results__option[aria-selected=true],
.dark-style .select2-container--default .select2-results__option[aria-selected=true] {
    background: rgba(238, 132, 55, 0.18);
    color: var(--bs-body-color, #435971);
    font-weight: 600;
}

/* Select2 always draws its default height, and the theme ships no small
   variant, so bim-selects.js tags a .form-select-sm container and it is sized
   here to match what Bootstrap would have drawn. */
.light-style .bim-sel-sm.select2-container--default .select2-selection--single,
.dark-style .bim-sel-sm.select2-container--default .select2-selection--single {
    height: calc(1.5em + 0.5rem + 2px);
    font-size: 0.875rem;
}

.light-style .bim-sel-sm.select2-container--default .select2-selection--single .select2-selection__rendered,
.dark-style .bim-sel-sm.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 1.25rem 0 0.5rem;
    line-height: calc(1.5em + 0.5rem);
}

.light-style .bim-sel-sm.select2-container--default .select2-selection--single .select2-selection__arrow,
.dark-style .bim-sel-sm.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.5rem + 2px);
}

/* ── Disbursement picker (site management, built in JS) ───────────────────── */

.bim-picker-native {
    display: none !important;
}

.bim-picker-trigger {
    /* A <button> dressed as a select, so it must match one exactly - Bootstrap's
       .form-select rules only reach <select> elements. */
    display: block;
    width: 100%;
    border-radius: var(--bim-dd-radius);
    box-shadow: var(--bim-dd-elevation-control);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.bim-picker-trigger.is-placeholder {
    color: var(--bs-secondary-color, #8592a3);
}

.bim-picker-panel {
    position: fixed;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    overflow: hidden;
    background: var(--bim-dd-surface);
    border: 1px solid var(--bs-border-color, rgba(67, 89, 113, 0.16));
    border-radius: var(--bim-dd-radius);
    box-shadow: var(--bim-dd-elevation);
}

/* display:flex above would otherwise beat the [hidden] attribute. */
.bim-picker-panel[hidden] {
    display: none;
}

.bim-picker-list {
    overflow-y: auto;
    padding: 0.25rem;
}

.bim-picker-option {
    display: block;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 0;
    border-radius: var(--bim-dd-radius-item);
    background: transparent;
    color: var(--bs-body-color, #435971);
    font-size: 0.8125rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.bim-picker-option:hover,
.bim-picker-option:focus {
    background: rgba(238, 132, 55, 0.12);
    outline: none;
}

.bim-picker-option.is-selected {
    background: rgba(238, 132, 55, 0.18);
    font-weight: 600;
}

.bim-picker-actions {
    display: flex;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    border-top: 1px solid var(--bs-border-color, rgba(67, 89, 113, 0.12));
    background: var(--bim-dd-surface);
}

/* ── Floating pickers that live in the body ───────────────────────────────── */

.daterangepicker,
.bootstrap-datetimepicker-widget.dropdown-menu {
    border-radius: var(--bim-dd-radius);
    box-shadow: var(--bim-dd-elevation);
}