/*
 * Styly pro znovupoužitelnou multiselect komponentu (rozbalovací seznam s checkboxy).
 * Vychází přímo z tokenů design systému gov.cz (sémantické tokeny --background-*,
 * --border-*, --text-*, --corner-radius-* …) s palette fallbackem (--color-*),
 * aby vzhled odpovídal DS i bez aktivního motivu.
 */
.gov-multiselect {
    position: relative;
    display: block;
    font-family: inherit;
}

.gov-multiselect__label {
    display: block;
    margin-bottom: .375rem;
    font-weight: 600;
    color: var(--text-primary, var(--color-neutral-950, #0c0c0c));
}

.gov-multiselect__required {
    margin-left: .125rem;
    color: var(--text-status-error, var(--color-error-600, #c52a3a));
}

.gov-multiselect__message {
    margin-top: .375rem;
    font-size: .875rem;
    line-height: 1.4;
}

.gov-multiselect__message--error {
    color: var(--text-status-error, var(--color-error-600, #c52a3a));
}

.gov-multiselect__message--helper {
    color: var(--text-secondary, var(--color-neutral-600, #5c5c5c));
}

.gov-multiselect__host {
    position: relative;
}

/* Skrytý nativní <select multiple> – jen nositel hodnot pro odeslání formuláře. */
.gov-multiselect__native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Tlačítko (trigger) – vizuálně jako vstupní pole DS (gov-form-input). */
.gov-multiselect__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    min-height: var(--height-component-m, 2.5rem);
    padding: .375rem .75rem;
    background: var(--background-white, var(--color-neutral-0, #fff));
    border: 1px solid var(--border-subtle, var(--color-neutral-300, #d9d9d9));
    border-radius: var(--corner-radius-s, .5rem);
    font: inherit;
    line-height: var(--height-line-m, 1.5rem);
    color: var(--text-primary, var(--color-neutral-950, #0c0c0c));
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

    /* Hover – pouze modré podbarvení vnitřku pole (primary-subtle); rámeček zůstává beze změny. */
    .gov-multiselect__trigger:hover {
        background: var(--background-primary-subtle, var(--color-primary-100, #e1eaf4));
    }

/* Otevřený stav – jemné neutrální zvýraznění. */
.gov-multiselect--open .gov-multiselect__trigger {
    border-color: var(--border-neutral, var(--color-neutral-700, #4a4a4a));
}

/* Focus – viditelné oramování přesně podle DS (gov-form-select):
   outline ve `status-focus` s odsazením. Použito :focus (ne :focus-visible),
   aby se rámeček zobrazil i při otevření kliknutím myší. */
.gov-multiselect__trigger:focus,
.gov-multiselect--open .gov-multiselect__trigger {
    outline: var(--outline-width, .125rem) solid var(--status-focus, var(--color-focus-600, #2362a2));
    outline-offset: var(--outline-offset, .125rem);
}

.gov-multiselect__trigger:disabled {
    background: var(--background-neutral-disabled, var(--color-neutral-200, #e7e7e7));
    color: var(--text-disabled, var(--color-neutral-500, #767676));
    cursor: not-allowed;
}

.gov-multiselect__trigger-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    flex: 1 1 auto;
    min-width: 0;
}

.gov-multiselect__trigger-label--empty {
    color: var(--text-placeholder, var(--color-neutral-500, #767676));
}

/* Šipka – jednoduchý chevron laděný do barev DS. */
.gov-multiselect__caret {
    flex: 0 0 auto;
    width: .625rem;
    height: .625rem;
    margin-left: .25rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform .15s ease;
    color: var(--text-primary, var(--color-primary-600, #2362a2));
}

.gov-multiselect--open .gov-multiselect__caret {
    transform: rotate(-135deg);
}

/* Vybrané položky jako „chips“ ve stylu gov-tag. */
.gov-multiselect__chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .125rem .25rem .125rem .5rem;
    background: var(--background-primary-subtle, var(--color-primary-100, #e1eaf4));
    color: var(--text-primary, var(--color-primary-800, #194173));
    border-radius: var(--corner-radius-xs, .25rem);
    font-size: .875rem;
    line-height: 1.4;
}

.gov-multiselect__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

    .gov-multiselect__chip-remove:hover {
        background: var(--background-primary-subtle, var(--color-primary-200, #c4d5ea));
        color: var(--text-status-error, var(--color-error-600, #c52a3a));
    }

/* Rozbalovací panel. */
.gov-multiselect__panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 18rem;
    overflow-y: auto;
    background: var(--background-white, var(--color-neutral-0, #fff));
    border: 1px solid var(--border-subtle, var(--color-neutral-300, #d9d9d9));
    border-radius: var(--corner-radius-s, .5rem);
    box-shadow: 0 6px 16px rgba(12, 12, 12, .16);
    padding: .25rem;
}

    .gov-multiselect__panel[hidden] {
        display: none;
    }

/*
 * Top-layer režim: panel je vykreslen jako popover (nad vším, i nad gov-dialog
 * s vlastním overflow) a napozicován pod trigger přes CSS Anchor Positioning.
 * Tím se vyřeší ořezávání panelu uvnitř scrollujícího dialogu (z-index nestačí).
 */
.gov-multiselect__panel--anchored {
    /* Reset UA stylů popoveru (position: fixed; inset: 0; margin: auto; border; padding). */
    position: fixed;
    inset: auto;
    margin: 0;
    /* Pozicování vůči triggeru (position-anchor se nastavuje inline v JS). */
    top: anchor(bottom);
    left: anchor(left);
    width: anchor-size(width);
    margin-top: 4px;
    /* Když se panel nevejde dolů, prohodí se nad trigger. */
    position-try-fallbacks: flip-block;
}

    /* Popover je skrytý, dokud není otevřený – display řídí stav :popover-open. */
    .gov-multiselect__panel--anchored:popover-open {
        display: block;
    }

.gov-multiselect label.gov-multiselect__option {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .625rem;
    border-radius: var(--corner-radius-xs, .25rem);
    cursor: pointer;
    color: var(--text-primary, var(--color-neutral-950, #0c0c0c));
    margin-bottom: 0;
    font-weight: inherit;
}

    .gov-multiselect label.gov-multiselect__option:hover {
        background: var(--background-neutral-subtle, var(--color-neutral-100, #f3f3f3));
    }

.gov-multiselect label.gov-multiselect__option--all {
    font-weight: 600;
}

.gov-multiselect .gov-multiselect__option-text {
    flex: 1 1 auto;
}

.gov-multiselect input.gov-multiselect__checkbox {
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    max-width: 1.25rem;
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-subtle, var(--color-neutral-300, #d9d9d9));
    border-radius: var(--corner-radius-xs, .25rem);
    box-shadow: none;
    accent-color: var(--background-primary, var(--color-primary-600, #2362a2));
    cursor: pointer;
}

    .gov-multiselect input.gov-multiselect__checkbox:focus,
    .gov-multiselect input.gov-multiselect__checkbox:focus-visible {
        outline: var(--outline-width, .125rem) solid var(--status-focus, var(--color-focus-600, #2362a2));
        outline-offset: var(--outline-offset, .125rem);
        border-color: var(--border-subtle, var(--color-neutral-300, #d9d9d9));
        box-shadow: none;
    }

.gov-multiselect__divider {
    height: 1px;
    margin: .25rem;
    background: var(--border-subtle, var(--color-neutral-200, #d9d9d9));
}

.gov-multiselect label.gov-multiselect__option input:disabled,
.gov-multiselect label.gov-multiselect__option input:disabled + .gov-multiselect__option-text {
    cursor: not-allowed;
    color: var(--text-disabled, var(--color-neutral-500, #767676));
    opacity: .7;
}

.gov-multiselect[invalid=""] > .element, .gov-multiselect[invalid=true i] > .element, .gov-multiselect[invalid="1"] > .element {
    border-color: var(--form-state-border-error, var(--status-error))
}

.gov-multiselect[invalid=""] .gov-multiselect__trigger,
.gov-multiselect[invalid=true i] .gov-multiselect__trigger,
.gov-multiselect[invalid="1"] .gov-multiselect__trigger {
    border-color: var(--form-state-border-error, var(--status-error));
}

.gov-multiselect[invalid=""] .gov-multiselect__caret,
.gov-multiselect[invalid=true i] .gov-multiselect__caret,
.gov-multiselect[invalid="1"] .gov-multiselect__caret {
    border-color: var(--form-state-border-error, var(--status-error));
}