/* ===================== MusicGenrePicker =====================
 * Reusable hierarchical genre picker: search on top, top-level genres on the
 * left, the focused top's sub-genres on the right. Mirrors the discovery
 * Explore-by-Genre layout, made compact and self-contained.
 */

.mgp-host { position: relative; display: inline-block; }

/* Trigger button (popover mode) */
.mgp-trigger.active,
.mgp-trigger.open {
    background-color: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

/* Floating panel (popover mode) */
.mgp-popover {
    position: absolute;
    z-index: 1080;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    width: min(560px, 92vw);
    background: var(--mv-bg-card, #fff);
    border: 1px solid var(--mv-border-color, #dee2e6);
    border-radius: 0.5rem;
    padding: 0.6rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.mgp-search { margin-bottom: 0.5rem; }

/* Two-column picker: tops (left) + focused top's subs (right) */
.mgp-picker {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(200px, 1.7fr);
    gap: 0.6rem;
    align-items: start;
    border: 1px solid var(--mv-border-color, #dee2e6);
    border-radius: 0.5rem;
    padding: 0.5rem;
}
.mgp-overall {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-content: flex-start;
    max-height: 230px;
    overflow-y: auto;
}
.mgp-subs {
    border-left: 1px solid var(--mv-border-color, #dee2e6);
    padding-left: 0.6rem;
    min-height: 2rem;
    max-height: 230px;
    overflow-y: auto;
}
.mgp-sub-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }

@media (max-width: 575.98px) {
    .mgp-picker { grid-template-columns: 1fr; }
    .mgp-subs {
        border-left: none;
        border-top: 1px solid var(--mv-border-color, #dee2e6);
        padding-left: 0;
        padding-top: 0.5rem;
    }
}

/* Pills (self-contained, so the component looks the same everywhere) */
.mgp-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--mv-border-color, #dee2e6);
    background: var(--mv-bg-surface, #f8f9fa);
    color: var(--mv-text-primary, #212529);
    font-size: 0.85rem;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.mgp-pill:hover { border-color: var(--bs-primary, #0d6efd); }
.mgp-pill.active {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

/* the focused top (its sub-genres are showing on the right) */
.mgp-overall-pill.focused { box-shadow: 0 0 0 2px var(--bs-primary, #0d6efd); }
/* narrowed = top picked but cut down to specific sub-genres */
.mgp-overall-pill.narrowed { background: var(--bs-warning, #ffc107); border-color: var(--bs-warning, #ffc107); color: #212529; }

.mgp-ct { opacity: 0.75; font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.mgp-caret { font-size: 0.7rem; opacity: 0.5; }
.mgp-sub-parent { opacity: 0.6; font-size: 0.72rem; }

/* Done button (close affordance) */
.mgp-footer { display: flex; justify-content: flex-end; margin-top: 0.5rem; }

/* Selected summary chips */
.mgp-selected { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.mgp-selected:empty { margin-top: 0; }
.mgp-chip { background: var(--bs-primary, #0d6efd); border-color: var(--bs-primary, #0d6efd); color: #fff; }
.mgp-chip-top { background: #6f42c1; border-color: #6f42c1; }
.mgp-chip-x { font-size: 0.9rem; cursor: pointer; }

/* Dark mode */
[data-bs-theme="dark"] .mgp-popover {
    background: var(--mv-bg-card, #1e1e1e);
    border-color: var(--mv-border-color, rgba(255, 255, 255, 0.15));
}
[data-bs-theme="dark"] .mgp-picker,
[data-bs-theme="dark"] .mgp-subs { border-color: var(--mv-border-color, rgba(255, 255, 255, 0.15)); }
[data-bs-theme="dark"] .mgp-overall-pill.focused { box-shadow: 0 0 0 2px #8b5cf6; }
[data-bs-theme="dark"] .mgp-overall-pill.narrowed { background: #ffc107; border-color: #ffc107; color: #212529; }