/* =====================================================================
   Searchable single-select, shared by every country picker on the platform.

   Written against Bootstrap's own custom properties rather than the design system tokens, because
   Footer365.Auth loads Bootstrap's CSS and its own stylesheet but neither theme.css nor site.css. The one
   implementation therefore renders correctly, in both themes, in all five apps.
   ===================================================================== */

.f-combo { position: relative; }

/* The trigger carries whatever class the field beside it uses (form-select in the portals, .select in the two
   wizards), so it inherits that field's height, border and caret. Only the text alignment needs correcting,
   because a button centres its label and a select does not. */
.f-combo-btn { width: 100%; text-align: left; }
.f-combo-value { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-combo-placeholder { color: var(--bs-secondary-color); }

.f-combo-panel {
    position: absolute;
    z-index: 1055; /* above a modal's own stacking context, so a picker inside a dialog is not clipped behind it */
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 15rem;
    padding: 0.5rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.625rem;
    box-shadow: 0 12px 28px rgba(8, 12, 20, 0.18);
}

[data-bs-theme="dark"] .f-combo-panel { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); }

.f-combo-search {
    width: 100%;
    padding: 0.375rem 0.625rem;
    font: inherit;
    font-size: 0.875rem;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
}

.f-combo-search:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 20%, transparent);
}

.f-combo-list { max-height: 15rem; overflow-y: auto; margin-top: 0.375rem; }

.f-combo-item {
    display: block;
    width: 100%;
    padding: 0.3125rem 0.625rem;
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    color: var(--bs-body-color);
    background: none;
    border: 0;
    border-radius: 0.375rem;
}

/* .active is the keyboard cursor, .selected is the country currently held. They are separate states: arrowing
   through the list must not look like the value has already changed. */
.f-combo-item:hover,
.f-combo-item.active { background: var(--bs-secondary-bg); }
.f-combo-item.selected { font-weight: 600; color: var(--bs-primary); }

.f-combo-empty { padding: 0.5rem 0.625rem; font-size: 0.875rem; color: var(--bs-secondary-color); }

/* ---------------------------------------------------------------------
   Every other dropdown (.f-select, built over a <select> by combo.js).

   The <select> stays in the form, holding the value, but out of sight. It is kept laid out at one pixel rather
   than display:none, because client-side validation skips hidden fields and a required dropdown must still be
   checked. Each colour falls back to the website's own tokens, because the website loads no Bootstrap.
   --------------------------------------------------------------------- */
.f-select { display: contents; }

.f-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    /* A min-width on the select's own class, such as the editor's .se-inline-sel, outranks width and would keep
       the hidden select at full size, pushing the page sideways where it ends near the right edge. */
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
    clip-path: inset(50%);
    overflow: hidden;
}

.f-select-btn { text-align: left; cursor: pointer; }
.f-select-btn:disabled { cursor: default; }

/* Every option's text in one cell, only the chosen one visible: the button is as wide as its longest option, as a
   native select is, but can still narrow to its container and cut the label short. */
.f-select-sizer { display: grid; grid-template-columns: minmax(0, max-content); }
.f-select-sizer > * { grid-area: 1 / 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-select-ghost { visibility: hidden; height: 0; }
/* The ghosts come first and have no height, so without this the button's baseline is its top edge and a label
   lined up with it on a form grid sits above the text. */
.f-select-sizer > .f-combo-value { align-self: baseline; }

/* form-select draws its own caret. Anything else (the wizards' .select, the signature editor's .se-ctrl) gets
   one drawn from the text colour, so it follows the theme with no image. */
.f-select-btn:not(.form-select) { position: relative; padding-right: 2rem; }
.f-select-btn:not(.form-select)::after {
    content: "";
    position: absolute;
    right: 0.8rem;
    top: 50%;
    width: 0.4rem;
    height: 0.4rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    opacity: 0.7;
    pointer-events: none;
}

/* Placed against the window by combo.js, so no card, table or scrolling panel can cut it off. Above a modal,
   which sits at 1055. As wide as its trigger at least, and wider where a row needs it, like the multi-select. */
.f-select-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    z-index: 1075;
    max-width: min(34rem, calc(100vw - 2rem));
    background: var(--bs-body-bg, var(--surface, #fff));
    border-color: var(--bs-border-color, var(--border-strong, #cfd7e3));
    color: var(--bs-body-color, var(--ink, #1b2433));
    text-align: left;
}

/* Bootstrap hides [hidden] with !important; the website has no Bootstrap, and .f-combo-item's display would win. */
.f-select-panel [hidden] { display: none !important; }
.f-select-panel .f-combo-search[hidden] + .f-combo-list { margin-top: 0; }
.f-select-panel .f-combo-search {
    color: var(--bs-body-color, var(--ink, #1b2433));
    background: var(--bs-body-bg, var(--surface, #fff));
    border-color: var(--bs-border-color, var(--border-strong, #cfd7e3));
}
.f-select-panel .f-combo-list:focus { outline: none; }
.f-select-panel .f-combo-item {
    color: var(--bs-body-color, var(--ink, #1b2433));
    white-space: normal;
    cursor: pointer;
}
.f-select-panel .f-combo-item:hover,
.f-select-panel .f-combo-item.active { background: var(--bs-secondary-bg, var(--surface-2, #f1f4f9)); }
.f-select-panel .f-combo-item.selected { color: var(--bs-primary, var(--brand-600, #1668ff)); }
.f-select-panel .f-combo-item:disabled { opacity: 0.5; cursor: default; background: none; }
.f-select-panel .f-combo-empty { color: var(--bs-secondary-color, var(--ink-3, #8a93a6)); }
/* An option that stands for a state (data-tone on the <option>, applied by combo.js) is drawn in that state's
   style, in the list and in the closed dropdown: muted for the default, the success colour and semibold for on,
   struck through for off. The line through "off" carries the meaning without the colour, for anyone who cannot tell
   green from grey. In the list the chosen one is marked by its background, since its colour now says its state. */
.f-select-btn .f-tone-default,
.f-select-panel .f-combo-item.f-tone-default { color: var(--f-ink-3, var(--bs-secondary-color, #8a93a6)); }
.f-select-btn .f-tone-on,
.f-select-panel .f-combo-item.f-tone-on { color: var(--f-ok, var(--bs-success, #16834a)); font-weight: 600; }
.f-select-btn .f-tone-off,
.f-select-panel .f-combo-item.f-tone-off { color: var(--f-ink-3, var(--bs-secondary-color, #8a93a6)); text-decoration: line-through; }
.f-select-panel .f-combo-item.selected[class*="f-tone-"] { background: var(--bs-secondary-bg, var(--surface-2, #f1f4f9)); }

/* An option with a note after its name (data-note on the <option>, such as what a web font falls back to): the name on
   the left, drawn in its own font where data-font gives one, and the note on the right in the list's own font. */
.f-select-panel .f-combo-item.f-combo-noted { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.f-select-panel .f-combo-item.f-combo-noted[hidden] { display: none !important; }
.f-select-panel .f-combo-note { flex: none; font-size: 0.75rem; font-weight: 400; color: var(--bs-secondary-color, var(--ink-3, #8a93a6)); }
/* A person (bi-person) or a group (bi-people), and any other option drawn with an icon (data-icon or data-option-icon). */
.f-select-panel .f-combo-item.f-combo-iconed { display: flex; align-items: center; gap: 0.5rem; }
.f-select-panel .f-combo-item.f-combo-iconed[hidden] { display: none !important; }
.f-combo-icon { flex: none; color: var(--bs-secondary-color, var(--ink-3, #8a93a6)); }
.f-combo-value .f-combo-icon { margin-right: 0.4rem; }

.f-select-group {
    padding: 0.5rem 0.625rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, var(--ink-3, #8a93a6));
}

/* Bootstrap joins an input group's members by their direct parent, which the button no longer is. */
.input-group > .f-select > .f-select-btn { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .f-select:not(:last-child) > .f-select-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .f-select:not(:first-child) > .f-select-btn {
    margin-left: calc(var(--bs-border-width) * -1);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group > .f-select > .f-select-btn:focus { z-index: 5; }
.input-group-sm > .f-select > .form-select {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    font-size: 0.875rem;
    border-radius: var(--bs-border-radius-sm);
}

/* Cards clip their own rounded corners, which would cut the panel off at the card edge. Scoped with :has so a card
   only opts out of clipping when it actually contains a picker. */
.f-card:has(.f-combo),
.card:has(.f-combo) { overflow: visible; }

/* The header band was relying on the card's clipping for its top corners, so it has to round them itself once the
   card stops clipping, or it squares off against the card's own radius. */
.f-card:has(.f-combo) > .f-card-head {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

/* And its bottom corners too, when the header is the card's only content. */
.f-card:has(.f-combo) > .f-card-head:last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    border-bottom: 0;
}