/* Shared public/admin controls. Load after module styles; native form behavior is preserved. */
body.portal-page {
    --portal-select-bg: #171a1f;
    --portal-select-menu: #1b1e23;
    --portal-select-border: #3b424d;
    --portal-select-text: #e8edf3;
    --portal-select-muted: #8f9bab;
    --portal-select-accent: #f5a53b;
    --portal-select-hover: #272c33;
    --portal-select-selected: #f5a53b18;
}

body.portal-page.portal-page select {
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
    min-block-size: 44px;
    border: 1px solid var(--portal-select-border);
    border-radius: 9px;
    background-color: var(--portal-select-bg);
    color: var(--portal-select-text);
    color-scheme: dark;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.5;
    accent-color: var(--portal-select-accent);
    box-shadow: 0 1px 0 #ffffff04;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}

body.portal-page.portal-page select:where(:not([multiple])):where(:not([size]), [size="0"], [size="1"]) {
    -webkit-appearance: none;
    appearance: none;
    padding: 10px 40px 10px 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23f5a53b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 13px center;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    text-overflow: ellipsis;
    cursor: pointer;
}

body.portal-page.portal-page select:hover:not(:disabled) {
    border-color: #69717e;
    background-color: #1d2127;
}

body.portal-page.portal-page select:focus {
    border-color: var(--portal-select-accent);
    box-shadow: 0 0 0 3px #f5a53b18;
    outline: none;
}

body.portal-page.portal-page select:focus-visible {
    outline: 2px solid var(--portal-select-accent);
    outline-offset: 3px;
}

body.portal-page.portal-page select:disabled {
    border-color: #30363f;
    background-color: #181b20;
    color: #778391;
    opacity: .65;
    cursor: not-allowed;
}

body.portal-page.portal-page select[hidden] {
    display: none;
}

body.portal-page.portal-page select:is([aria-invalid="true"], :user-invalid) {
    border-color: #e77377;
}

body.portal-page.portal-page select:is([aria-invalid="true"], :user-invalid):focus {
    box-shadow: 0 0 0 3px #e773771a;
}

body.portal-page.portal-page select option,
body.portal-page.portal-page select optgroup {
    background-color: var(--portal-select-menu);
    color: var(--portal-select-text);
    font-family: inherit;
}

body.portal-page.portal-page select option:checked {
    background-color: #433322;
    color: #ffc575;
}

body.portal-page.portal-page select option:disabled,
body.portal-page.portal-page select optgroup:disabled {
    color: #788391;
}

body.portal-page.portal-page select:is([multiple], [size]:not([size="0"]):not([size="1"])) {
    padding: 6px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #5d6571 var(--portal-select-menu);
}

body.portal-page.portal-page select:is([multiple], [size]:not([size="0"]):not([size="1"])) option {
    padding: 9px 11px;
    border-radius: 6px;
    line-height: 1.5;
}

/* The picker stays in the browser top layer, including inside modal dialogs. */
@supports (appearance: base-select) {
    body.portal-page.portal-page select:where(:not([multiple])):where(:not([size]), [size="0"], [size="1"]),
    body.portal-page.portal-page select:where(:not([multiple])):where(:not([size]), [size="0"], [size="1"])::picker(select) {
        appearance: base-select;
    }

    body.portal-page.portal-page select:where(:not([multiple])):where(:not([size]), [size="0"], [size="1"]) {
        display: flex;
        align-items: center;
        gap: 12px;
        padding-inline-end: 15px;
        background-image: none;
    }

    body.portal-page.portal-page select:where(:not([multiple])):where(:not([size]), [size="0"], [size="1"])::picker-icon {
        content: "";
        inline-size: 7px;
        block-size: 7px;
        flex: 0 0 7px;
        margin-inline-start: auto;
        margin-block-start: -4px;
        border-inline-end: 2px solid var(--portal-select-accent);
        border-block-end: 2px solid var(--portal-select-accent);
        rotate: 45deg;
        transition: rotate .15s;
    }

    body.portal-page.portal-page select:open {
        border-color: var(--portal-select-accent);
        box-shadow: 0 0 0 3px #f5a53b18;
    }

    body.portal-page.portal-page select:open::picker-icon {
        rotate: 225deg;
        margin-block-start: 3px;
    }

    body.portal-page.portal-page select:where(:not([multiple])):where(:not([size]), [size="0"], [size="1"])::picker(select) {
        box-sizing: border-box;
        inline-size: anchor-size(self-inline);
        min-inline-size: anchor-size(self-inline);
        max-inline-size: calc(100vw - 24px);
        max-block-size: min(340px, 55dvh);
        margin-block: 7px;
        padding: 6px;
        border: 1px solid #4b525d;
        border-radius: 12px;
        background: var(--portal-select-menu);
        color: var(--portal-select-text);
        box-shadow: 0 14px 40px #0008, 0 1px 0 #ffffff05 inset;
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: #626b78 var(--portal-select-menu);
    }

    body.portal-page.portal-page select:where(:not([multiple])):where(:not([size]), [size="0"], [size="1"]) option {
        display: flex;
        align-items: center;
        gap: 10px;
        min-block-size: 40px;
        padding: 9px 11px;
        border: 0;
        border-radius: 7px;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
        white-space: normal;
        overflow-wrap: anywhere;
        cursor: pointer;
    }

    body.portal-page.portal-page select option::checkmark {
        order: 1;
        flex: 0 0 auto;
        margin-inline-start: auto;
        color: var(--portal-select-accent);
        font-weight: 800;
    }

    body.portal-page.portal-page select option:is(:hover, :focus, :focus-visible) {
        background: var(--portal-select-hover);
        outline: none;
    }

    body.portal-page.portal-page select option:checked {
        background: var(--portal-select-selected);
        color: #ffc575;
        font-weight: 700;
    }

    body.portal-page.portal-page select option:disabled {
        background: var(--portal-select-menu);
        color: #788391;
        cursor: not-allowed;
    }

    body.portal-page.portal-page select option[hidden],
    body.portal-page.portal-page select optgroup[hidden] {
        display: none;
    }

    body.portal-page.portal-page select optgroup {
        padding-block: 5px;
        font-size: 12px;
        font-weight: 700;
        color: var(--portal-select-muted);
    }

    body.portal-page.portal-page select optgroup + optgroup {
        margin-block-start: 4px;
        border-block-start: 1px solid #ffffff0b;
    }
}

@media (max-width: 700px) {
    /* Avoid the automatic iOS zoom while keeping a 44px touch target. */
    body.portal-page.portal-page select {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.portal-page.portal-page select,
    body.portal-page.portal-page select::picker-icon {
        transition: none;
    }
}

@media (forced-colors: active) {
    body.portal-page.portal-page select,
    body.portal-page.portal-page select::picker(select) {
        border-color: ButtonText;
        background-color: Canvas;
        color: CanvasText;
        box-shadow: none;
    }

    body.portal-page.portal-page select option,
    body.portal-page.portal-page select optgroup {
        background-color: Canvas;
        color: CanvasText;
    }

    body.portal-page.portal-page select option:checked {
        background-color: Highlight;
        color: HighlightText;
    }

    body.portal-page.portal-page select:focus-visible {
        outline-color: Highlight;
    }

    body.portal-page.portal-page select::picker-icon {
        border-color: ButtonText;
    }

    body.portal-page.portal-page select option::checkmark {
        color: HighlightText;
    }
}