/* Pole wyboru z dodawaniem i edycją pozycji - patrz `apps/core/select2_modal.py`.

   Całość sprowadza się do dwóch rzeczy: przycisk ma siedzieć NA KOŃCU POLA (a nie pod
   nim), a wpis „Dodaj…" ma wyglądać jak część listy, a nie jak ostrzeżenie. */

/* Select2 renderuje się jako `<span class="select2">` z ustawioną szerokością w stylu
   inline (`data-width: 100%`), więc w grupie wejściowej trzeba mu ją odebrać - inaczej
   rozpycha się na całą szerokość i wypycha przycisk do następnego wiersza.

   `flex-wrap: nowrap` i `min-width: 0` są tu równie ważne: bez nich DŁUGA nazwa
   kontrahenta rozpychała pole ponad szerokość kolumny (tekst w select2 nie zawija się
   sam), grupa wejściowa łamała się na dwa wiersze i ołówek lądował pod polem. Teraz
   pole nie może urosnąć ponad przydzielone miejsce, a nazwa, która się nie mieści,
   jest przycinana wielokropkiem. */
.s2m {
    flex-wrap: nowrap;
}

.s2m > .select2-container {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    max-width: 100%;
}

/* Sam napis w polu: bez tego select2 rozciąga kontener do długości tekstu */
.s2m > .select2-container .select2-selection__rendered {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Zaokrąglenia: pole i przycisk mają wyglądać jak jeden element, więc stykające się
   narożniki są proste. Select2 rysuje własną ramkę, stąd celowanie w `.selection`. */
.s2m > .select2-container .select2-selection {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    height: 100%;
}

.s2m > .form-select,
.s2m > select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Ołówek jest pomocniczy - nie może przyciągać wzroku bardziej niż samo pole */
.s2m .s2m-edit {
    display: flex;
    align-items: center;
    z-index: 3;                 /* nad ramką select2, inaczej ginie pod jej krawędzią */
}

.s2m .s2m-edit:disabled {
    opacity: 0.45;
}

/* Wpis „Dodaj…" na dole listy: oddzielony kreską, w kolorze akcji - ma się czytać
   jako NOWA POZYCJA do dodania, a nie jako kolejny wynik wyszukiwania. */
.s2m-add-option {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    color: var(--bs-primary, #0d6efd);
    cursor: pointer;
    font-weight: 500;
    padding: 0.4rem 0.75rem;
}

.s2m-add-option:hover,
.s2m-add-option.select2-results__option--highlighted {
    background-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

/* Ramka z formularzem: wysokość na oko okna, żeby okno nie skakało przy każdym
   formularzu, a długi formularz przewijał się w środku, a nie rozpychał stronę. */
#s2m-modal .s2m-frame {
    width: 100%;
    height: 75vh;
    border: 0;
    display: block;
}

#s2m-modal .modal-sm .s2m-frame {
    height: 60vh;
}