/*
 * bootstrap-multiselect — Bootstrap 5 compatibility shim + CWH brand styling.
 *
 * Loaded globally via sharedAssets/sharedCSS.php so every portal's multiselects
 * render identically. Two responsibilities:
 *
 *   1. Patch the BS3-era markup the plugin emits (input-group-addon, glyphicon,
 *      <b class="caret">) so it renders correctly under Bootstrap 5.
 *   2. Apply the CWH brand palette (tokens from brandingPalette.css) to the
 *      trigger button, dropdown menu, items, filter input, and group headers
 *      so all multiselects look the same regardless of where they are used.
 *
 * Per-page wrappers like `.multiselectButton` should NOT add their own colour,
 * border, or font rules — they fight this stylesheet. Keep them for layout only.
 */

@import url('brandingPalette.css');

/* ── Trigger button ──────────────────────────────────────────────────────── */

.btn-group .multiselect.dropdown-toggle {
    /* Flexbox vertical centering — robust against inherited line-height,
       browser button defaults, and content-overflow quirks that broke the
       previous height/line-height math approach. */
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 100%;
    text-align: left;
    overflow: hidden;
    background: var(--cwh-white);
    border: 1px solid var(--cwh-border);
    color: var(--cwh-dark-grey);
    font-family: var(--cwh-font-family);
    font-weight: var(--cwh-font-medium);
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    border-radius: 10px;
    height: calc(1.5em + 0.75rem + 2px);
    position: relative;
}

.btn-group .multiselect.dropdown-toggle:hover,
.btn-group .multiselect.dropdown-toggle:focus,
.btn-group.show .multiselect.dropdown-toggle {
    background: var(--cwh-white);
    border-color: var(--cwh-open-blue);
    color: var(--cwh-dark-grey);
    box-shadow: 0 0 0 0.15rem rgba(0, 51, 126, 0.10);
    outline: 0;
}

.btn-group .multiselect.dropdown-toggle .multiselect-selected-text {
    /* min-width: 0 lets the flex item shrink below its content size so
       text-overflow: ellipsis can engage when the selection is long. */
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hide the legacy <b class="caret"> — BS5's dropdown-toggle::after handles it */
.btn-group .multiselect.dropdown-toggle .caret {
    display: none;
}

.btn-group .multiselect.dropdown-toggle::after {
    border-top-color: var(--cwh-dark-blue);
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
}

/* ── Dropdown menu ───────────────────────────────────────────────────────── */

.multiselect-container.dropdown-menu {
    min-width: 100%;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1056; /* above BS5 modal (1055) */
    padding: 0.25rem 0;
    background: var(--cwh-white);
    border: 1px solid var(--cwh-border);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 51, 126, 0.10);
    color: var(--cwh-dark-grey);
    font-family: var(--cwh-font-family);

    /* Pin to bottom-left of parent .btn-group — Popper miscomputes the offset
       because bootstrap-multiselect wraps the toggle in a position:relative span,
       leaving a large vertical gap between trigger and menu. */
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
}

.multiselect-container.dropdown-menu.show {
    top: 100% !important;
    left: 0 !important;
    transform: none !important;
}

/* ── Filter row ──────────────────────────────────────────────────────────── */

.multiselect-container .multiselect-filter {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--cwh-border);
    background: var(--cwh-white);
}

.multiselect-container .multiselect-filter > .input-group {
    margin: 0;
    flex-wrap: nowrap;
    background: transparent;
}

/* Hide the BS3 addon boxes and clear button — pure decoration */
.multiselect-container .multiselect-filter .input-group-addon,
.multiselect-container .multiselect-filter .input-group-btn,
.multiselect-container .multiselect-filter .glyphicon {
    display: none !important;
}

.multiselect-container .multiselect-filter .form-control,
.multiselect-container .multiselect-filter .multiselect-search {
    width: 100% !important;
    border: 1px solid var(--cwh-border);
    border-radius: 10px !important;
    height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.6rem;
    font-family: var(--cwh-font-family);
    font-size: 0.875rem;
    color: var(--cwh-dark-grey);
    background: var(--cwh-white);
}

.multiselect-container .multiselect-filter .form-control:focus,
.multiselect-container .multiselect-filter .multiselect-search:focus {
    border-color: var(--cwh-open-blue);
    box-shadow: 0 0 0 0.15rem rgba(0, 51, 126, 0.10);
    outline: 0;
}

/* ── Items ───────────────────────────────────────────────────────────────── */

.multiselect-container > li > a {
    display: block;
    padding: 0;
    color: var(--cwh-dark-grey);
    font-family: var(--cwh-font-family);
    font-size: 0.875rem;
    text-decoration: none;
    background: transparent;
}

.multiselect-container > li > a:hover,
.multiselect-container > li > a:focus,
.multiselect-container > li.active > a {
    background-color: var(--cwh-light-blue);
    color: var(--cwh-dark-grey);
}

/*
 * Padding lives on the label (not the <a>) because the plugin's own stylesheet
 * forces `.multiselect-container > li > a { padding: 0 }` and is loaded after
 * this file in some page contexts. The label has the same specificity, so we
 * use !important to guarantee the padding survives. Background colour stays on
 * the <a> so hover highlight fills the row edge-to-edge.
 */
.multiselect-container > li > a > label {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    padding: 0.55rem 1rem 0.55rem 1.5rem !important;
    cursor: pointer;
    font-weight: var(--cwh-font-medium);
    line-height: 1.4;
    color: inherit;
}

.multiselect-container > li > a > label.checkbox,
.multiselect-container > li > a > label.radio {
    padding-left: 0;
}

.multiselect-container > li > a > label > input[type="checkbox"],
.multiselect-container > li > a > label > input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--cwh-dark-blue);
}

/* ── Group headers ───────────────────────────────────────────────────────── */

.multiselect-container > li.multiselect-group label {
    padding: 0.5rem 1rem;
    color: var(--cwh-middle-blue);
    background-color: var(--cwh-white);
    border-bottom: 1px solid var(--cwh-border);
    font-family: var(--cwh-font-family);
    font-weight: var(--cwh-font-bold);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    margin: 0;
}

/* ── "Select all" item ───────────────────────────────────────────────────── */

.multiselect-container > li > a.multiselect-all label {
    color: var(--cwh-dark-blue);
    font-weight: var(--cwh-font-bold);
}

/* ── Disabled state ──────────────────────────────────────────────────────── */

.multiselect-container > li.disabled > a > label {
    color: var(--cwh-light-grey);
    cursor: not-allowed;
}

/* When a disabled row is also selected (e.g. "already linked" sites in the
   Corporate User Link Sites modal) the row uses the light-blue selected
   highlight, and light-grey text on light-blue is unreadable. Switch the text
   to dark-blue and italicise so it's legible AND visibly distinct from the
   normal selected rows. */
.multiselect-container > li.active.disabled > a > label,
.multiselect-container > li.active.disabled > a:hover > label,
.multiselect-container > li.disabled.active > a > label,
.multiselect-container > li.disabled.active > a:hover > label {
    color: var(--cwh-dark-blue);
    font-style: italic;
    opacity: 0.85;
    cursor: not-allowed;
}

/* Some bootstrap-multiselect builds mark the row's checkbox itself disabled
   instead of the parent <li>. Cover that variant too so the styling is
   consistent regardless of which markup the plugin emits. */
.multiselect-container > li > a > label > input[type="checkbox"]:disabled + .multiselect-option-text,
.multiselect-container > li > a.disabled,
.multiselect-container > li > a > label.disabled {
    color: var(--cwh-dark-blue);
    font-style: italic;
    opacity: 0.85;
    cursor: not-allowed;
}