/* aeo-audit: aeo-sidebar — Round 21 / D-102 additions to the customer sidebar.
 *
 * Scope: ONLY the markup added in Round 21 (page-picker dropdowns, audit-module
 * list section). The legacy chrome — `.cstm-sidebar`, `.sidebar-menu`, group
 * titles, Help & Support dropdown — is owned by `assets/css/custom-style.css`
 * + the compiled `assets/css/style.css` from the original template, and is
 * NOT touched here.
 *
 * Tokens: existing ScoreBand (D-081), neutral grays, brand-purple. NO new
 * color tokens introduced.
 */

/* ─── PAGES section: dropdown wrapper ──────────────────────────────────── */

.aeo-sb-pages {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 0.25rem;
    margin-bottom: 0.5rem;
}

.aeo-sb-pages__field {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
}

.aeo-sb-pages__label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(115 115 115);
}
:is(.dark .aeo-sb-pages__label) {
    color: rgb(163 163 163);
}

.aeo-sb-pages__select {
    width: 100%;
    padding: 0.4375rem 0.5rem;
    font-size: 0.8125rem;
    border-radius: 0.375rem;
    border: 1px solid rgb(229 231 235);
    background-color: #ffffff;
    color: rgb(23 23 23);
    cursor: pointer;
    line-height: 1.25;
}
:is(.dark .aeo-sb-pages__select) {
    background-color: rgb(38 38 38);
    border-color: rgb(64 64 64);
    color: #ffffff;
}
.aeo-sb-pages__select:focus {
    outline: none;
    border-color: var(--bg-primary, rgb(124 58 237));
    box-shadow: 0 0 0 2px rgb(var(--bg-primary-rgb, 124 58 237) / 0.20);
}

.aeo-sb-pages__empty {
    font-size: 0.75rem;
    font-style: italic;
    color: rgb(115 115 115);
    padding: 0.5rem 0;
}
:is(.dark .aeo-sb-pages__empty) {
    color: rgb(163 163 163);
}

/* ─── AUDIT MODULES section: 13-entry list ─────────────────────────────── */

/* Visual treatment matches the existing `.cstm-sidebar-menu li > a` chrome —
 * we don't introduce a parallel hover/active design. This class is only for
 * Round-21-specific markers (icon size, active dot, leading text color). The
 * outer `<li>` uses the same `.cstm-sidebar-menu` flow as every other entry.
 */
.aeo-sb-modules__item.is-active > a {
    background-color: var(--bg-primary, rgb(124 58 237));
    color: #ffffff;
    font-weight: 600;
}
.aeo-sb-modules__item.is-active > a .menu-icon {
    color: #ffffff;
}

/* Slight indent so module entries read as nested under "AUDIT MODULES" */
.aeo-sb-modules__item > a {
    padding-left: 0.625rem;
}

/* ─── Round 22 Part 2.5 / Issue 5: page-picker custom combobox ──────────── */

/* Vanilla combobox — no library. Replaces the prior <select id="aeo-sb-page">
 * with a searchable text input + filtered list. Page-type dropdown stays as
 * native <select> (5-6 options, no search overhead).
 */

.aeo-combobox {
    position: relative;
    width: 100%;
}

/* The visible input reuses .aeo-sb-pages__select for border + dark-mode +
 * focus chrome (composed in markup). This block adds combobox-specific
 * affordances: placeholder colour, expanded-state border colour. */
.aeo-combobox__input {
    width: 100%;
}
.aeo-combobox__input::placeholder {
    color: rgb(163 163 163);
    font-style: italic;
}
:is(.dark .aeo-combobox__input)::placeholder {
    color: rgb(115 115 115);
}
.aeo-combobox[aria-expanded="true"] .aeo-combobox__input {
    border-color: var(--bg-primary, rgb(124 58 237));
    box-shadow: 0 0 0 2px rgb(var(--bg-primary-rgb, 124 58 237) / 0.20);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.aeo-combobox__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid var(--bg-primary, rgb(124 58 237));
    border-top: none;
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    max-height: 18rem;
    overflow-y: auto;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
:is(.dark .aeo-combobox__list) {
    background-color: rgb(38 38 38);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.aeo-combobox__list[hidden] { display: none; }

.aeo-combobox__option {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.4375rem 0.625rem;
    border-radius: 0.25rem;
    cursor: pointer;
    color: rgb(38 38 38);
    line-height: 1.25;
}
:is(.dark .aeo-combobox__option) {
    color: rgb(229 231 235);
}
.aeo-combobox__option[hidden] { display: none; }

.aeo-combobox__option:hover,
.aeo-combobox__option.is-active {
    background-color: rgb(243 244 246);
}
:is(.dark .aeo-combobox__option):hover,
:is(.dark .aeo-combobox__option.is-active) {
    background-color: rgb(64 64 64);
}

.aeo-combobox__option.is-current {
    background-color: rgb(var(--bg-primary-rgb, 124 58 237) / 0.10);
}
:is(.dark .aeo-combobox__option.is-current) {
    background-color: rgb(var(--bg-primary-rgb, 124 58 237) / 0.18);
}

.aeo-combobox__option-label {
    font-size: 0.8125rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aeo-combobox__option-meta {
    font-size: 0.6875rem;
    color: rgb(115 115 115);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
:is(.dark .aeo-combobox__option-meta) {
    color: rgb(163 163 163);
}

.aeo-combobox__empty {
    padding: 0.5rem 0.625rem;
    font-size: 0.75rem;
    font-style: italic;
    color: rgb(115 115 115);
    text-align: center;
    list-style: none;
}
:is(.dark .aeo-combobox__empty) {
    color: rgb(163 163 163);
}

/* Long display names — sidebar module list items get truncate-with-ellipsis
 * so a long product name doesn't overflow the sidebar's narrow column. */
.aeo-sb-modules__item > a > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}