/* ============================================================
   IconSelect - shared icon dropdown styling
   ============================================================

   Structure only. Every colour, size and shape comes from an --isel-*
   custom property, so each page themes the dropdown to match itself. Override
   the tokens on the .isel element (or an ancestor) in the page's own
   stylesheet, the same way form-stepper.css is themed.

   Pairs with js/icon-select.js and templates/includes/forms/icon_select.html.
   ============================================================ */

.isel {
    /* Colour */
    --isel-accent:        #1EA99B;
    --isel-accent-deep:   #17857a;
    --isel-tint:          #eef8f7;
    --isel-border:        rgba(0, 0, 0, 0.15);
    --isel-ink:           #2c3e50;
    --isel-muted:         #6c757d;
    --isel-surface:       #ffffff;
    --isel-shadow:        0 6px 18px rgba(0, 0, 0, 0.12);

    /* Shape and size */
    --isel-radius:        4px;
    --isel-font-size:     0.9rem;
    --isel-pad-y:         0.25rem;
    --isel-pad-x:         0.55rem;
    --isel-trigger-icon:  24px;
    --isel-row-icon:      34px;
    --isel-row-pad-y:     7px;
    --isel-menu-height:   320px;

    /* Icons. The defaults suit a line-drawn sprite; a filled one sets
       --isel-icon-fill to currentColor and --isel-icon-stroke to none. */
    --isel-icon-fill:     none;
    --isel-icon-stroke:   currentColor;
    --isel-icon-stroke-width: 1.5;

    position: relative;
    min-width: 0;
}

/* ---- Native select ------------------------------------------------- */

/* Visually hidden, not display:none: it still submits, and it still has an
   offsetParent, so a step validator that skips unrendered controls keeps
   checking it. Before the script runs it is left as a normal select. */
.isel.isel-is-ready .isel-native {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* ---- Trigger ------------------------------------------------------- */

.isel-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: var(--isel-pad-y) calc(var(--isel-pad-x) + 18px) var(--isel-pad-y) var(--isel-pad-x);
    border: 1px solid var(--isel-border);
    border-radius: var(--isel-radius);
    background: var(--isel-surface);
    color: var(--isel-ink);
    font: inherit;
    font-size: var(--isel-font-size);
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.isel-trigger:hover {
    border-color: var(--isel-accent);
}

.isel-trigger:focus {
    outline: none;
}

.isel-trigger:focus-visible,
.isel-is-open .isel-trigger {
    border-color: var(--isel-accent);
    box-shadow: 0 0 0 2px var(--isel-tint), 0 0 0 3px var(--isel-accent);
}

.isel-trigger:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.isel-value {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

/* A drawn chevron rather than a glyph, so it needs no icon font. */
.isel-chevron {
    position: absolute;
    top: 50%;
    right: var(--isel-pad-x);
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 1.5px solid var(--isel-muted);
    border-bottom: 1.5px solid var(--isel-muted);
    transform: rotate(45deg);
    transition: transform 0.12s ease, margin-top 0.12s ease;
}

.isel-is-open .isel-chevron {
    margin-top: -1px;
    transform: rotate(225deg);
}

/* ---- Label, badge, icon -------------------------------------------- */

.isel-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.isel-badge {
    color: var(--isel-accent-deep);
    font-weight: 600;
    font-size: 0.92em;
}

/* Inherited into the <use> shadow tree, which selectors cannot reach, so
   these are the only declarations the sprite geometry ever sees. */
.isel-icon {
    flex: 0 0 auto;
    color: var(--isel-accent-deep);
    fill: var(--isel-icon-fill);
    stroke: var(--isel-icon-stroke);
    stroke-width: var(--isel-icon-stroke-width);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.isel-icon-trigger {
    width: var(--isel-trigger-icon);
    height: var(--isel-trigger-icon);
}

.isel-icon-row {
    width: var(--isel-row-icon);
    height: var(--isel-row-icon);
    opacity: 0.75;
}

/* ---- Menu ---------------------------------------------------------- */

.isel-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: var(--isel-menu-height);
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--isel-border);
    border-radius: var(--isel-radius);
    background: var(--isel-surface);
    box-shadow: var(--isel-shadow);
    overscroll-behavior: contain;
}

.isel-menu[hidden] {
    display: none;
}

.isel-is-above .isel-menu {
    top: auto;
    bottom: calc(100% + 4px);
}

.isel-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--isel-row-pad-y) 34px var(--isel-row-pad-y) 8px;
    border-radius: calc(var(--isel-radius) - 1px);
    color: var(--isel-ink);
    font-size: var(--isel-font-size);
    line-height: 1.3;
    cursor: pointer;
    position: relative;
    user-select: none;
}

/* Rows wrap rather than truncate: the full label matters more in the list
   than it does in the closed trigger. */
.isel-option .isel-text {
    white-space: normal;
}

.isel-option.isel-is-active {
    background: var(--isel-tint);
}

.isel-option.isel-is-active .isel-icon-row,
.isel-option[aria-selected="true"] .isel-icon-row {
    opacity: 1;
}

.isel-option[aria-selected="true"] .isel-label {
    font-weight: 600;
    color: var(--isel-accent-deep);
}

.isel-option[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* The tick on the selected row, drawn from borders. */
.isel-check {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 6px;
    height: 11px;
    margin-top: -7px;
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transform: rotate(45deg);
}

.isel-option[aria-selected="true"] .isel-check {
    border-color: var(--isel-accent-deep);
}

@media (prefers-reduced-motion: reduce) {
    .isel-trigger,
    .isel-chevron {
        transition: none;
    }
}