/* Select2 GOV.UK / IDSK3 look-and-feel overrides.

   Cieľ: Select2 widgety (single aj multi) vyzerajú ako natívny IDSK3 .govuk-select
   (vendor frontend-3.0.0-beta.0.min.css): 2px border, border-radius 5px,
   font-size 19px, výška 40px, oranžová focus outline + inner border.

   Pokrýva tri Select2 inicializácie (assets/javascripts/select2.js):
     • .js-select2-invalidate — invalidácia záznamu (single, všetky číselníky)
     • .js-select2-town-codes — výber obce v create/edit (single: faculty, workplace, school)
     • .js-select2-multi      — viacnásobný výber (studyProgram studyFieldCodes)

   Select2 4.1.0 vkladá .select2-container hneď za <select> → control cielime adjacent
   siblingom (`+`). Dropdown popup je body child (nie sibling) → cielime cez
   dropdownCssClass .select2-govuk-dropdown (nastavený v init pre všetky tri triedy). */

/* ── Spoločný control — single aj multi (zdroj pravdy pre IDSK3 .govuk-select look) ── */
:is(.js-select2-invalidate, .js-select2-town-codes, .js-select2-multi) + .select2-container :is(.select2-selection--single, .select2-selection--multiple) {
    box-sizing: border-box;
    background-color: var(--color-bg);
    border: 2px solid var(--color-black);
    border-radius: 5px;
    font-family: "Source Sans Pro", arial, sans-serif;
    font-size: var(--fs-input);
    line-height: 1.25;
}

/* ── Spoločný focus/open — oranžová outline + inner border (ako paginator:focus) ── */
:is(.js-select2-invalidate, .js-select2-town-codes, .js-select2-multi) + :is(.select2-container--focus, .select2-container--open) :is(.select2-selection--single, .select2-selection--multiple) {
    border-color: var(--color-black);
    outline: 3px solid var(--color-warning);
    outline-offset: 0;
    box-shadow: inset 0 0 0 2px var(--color-black);
}

/* ── Single-select špecifiká (invalidate, town-codes) ── */
:is(.js-select2-invalidate, .js-select2-town-codes) + .select2-container .select2-selection--single {
    height: 40px;
    padding: 0;
    /* chevron SVG identický s natívnym .govuk-select / paginatorom (app-idsk3.css) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='none' stroke='%230b0c0c' stroke-width='2' d='M2 4l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px 12px;
}

:is(.js-select2-invalidate, .js-select2-town-codes) + .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 30px 0 10px;
    line-height: 36px; /* 40px − 2×2px border = vertikálne vycentrovaný text */
    color: var(--color-black);
}

:is(.js-select2-invalidate, .js-select2-town-codes) + .select2-container .select2-selection--single .select2-selection__placeholder {
    color: var(--color-text-muted);
}

/* Default Select2 šípka (CSS triangle) — nahradená SVG chevronom vyššie */
:is(.js-select2-invalidate, .js-select2-town-codes) + .select2-container .select2-selection--single .select2-selection__arrow {
    display: none;
}

/* Clear (×) odsadiť doľava od chevronu, aby sa neprekrývali */
:is(.js-select2-invalidate, .js-select2-town-codes) + .select2-container .select2-selection--single .select2-selection__clear {
    margin-right: 26px;
    color: var(--color-black);
    font-weight: var(--fw-bold);
}

/* ── Multi-select špecifiká (.js-select2-multi) ── */
.js-select2-multi + .select2-container .select2-selection--multiple {
    min-height: 40px;
    padding: var(--space-1);
}

.js-select2-multi + .select2-container .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
    line-height: 28px;
    font-size: var(--fs-input);
}

.js-select2-multi + .select2-container .select2-selection--multiple .select2-selection__choice {
    background-color: var(--color-bg-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-2);
    margin: 0 var(--space-1) 0 0;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-black);
}

.js-select2-multi + .select2-container .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--color-error);
    font-weight: bold;
    margin-right: 0 !important;
    padding-right: var(--space-2) !important;
    border: none !important;
    background: transparent !important;
}

.js-select2-multi + .select2-container .select2-selection--multiple .select2-selection__choice__remove > span {
    padding-right: 6px;
}

.js-select2-multi + .select2-container .select2-selection--multiple .select2-selection__choice__display {
    padding-left: var(--space-1) !important;
    padding-right: var(--space-1);
}

.js-select2-multi + .select2-container .select2-search--inline .select2-search__field {
    font-family: "Source Sans Pro", arial, sans-serif;
    font-size: 16px;
    line-height: 1.25;
    margin: 0;
    padding: 0;
    height: 24px;
}

.js-select2-multi + .select2-container .select2-selection__clear {
    margin-right: var(--space-1);
    color: var(--color-black);
}

/* ── Dropdown popup — všetky tri triedy (dropdownCssClass v init) ── */
.select2-dropdown.select2-govuk-dropdown {
    border: 2px solid var(--color-black);
    border-radius: 5px;
    font-family: "Source Sans Pro", arial, sans-serif;
}

.select2-dropdown.select2-govuk-dropdown .select2-search__field {
    border: 2px solid var(--color-black);
    border-radius: 5px;
    padding: 6px var(--space-2);
    font-size: var(--fs-input);
    line-height: 1.25;
}

.select2-dropdown.select2-govuk-dropdown .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-primary);
    color: #fff;
}

.select2-dropdown.select2-govuk-dropdown .select2-results__option {
    padding: 6px 10px;
    font-size: var(--fs-input);
    line-height: 1.25;
}