/* EUROPA - formatka terminalowa wzorowana na klasycznych programach kantorowych
   Clipper/xHarbour (patrz etapy/europa.jpg). Całkowicie odrębna od styl Standardowej
   (css/app.css) - zero współdzielonych klas, zero wpływu na wygląd Standardowej. */

html:has(.europa-root),
body:has(.europa-root) {
    height: 100%;
    margin: 0;
}

.europa-root {
    min-height: 100vh;
    background: #0000aa;
    color: #ffffff;
    font-family: "Consolas", "Lucida Console", "Courier New", monospace;
    font-size: 22px;
    line-height: 1.4;
}

@media (prefers-color-scheme: light) {
    .europa-root {
        /* Styl terminalowy jest zamierzony i stały niezależnie od motywu systemowego -
           klasyczny niebieski ekran, tak samo w dzień i w nocy. */
        background: #0000aa;
        color: #ffffff;
    }
}

.europa-topbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    align-items: baseline;
    background: #000000;
    border-bottom: 2px solid #ffffff;
    padding: 6px 12px;
}

.europa-topbar .europa-topbar-item {
    white-space: nowrap;
}

.europa-topbar .label {
    color: #ffffff;
}

.europa-topbar .value {
    color: #00ffff;
    font-weight: bold;
    margin-left: 4px;
}

.europa-topbar .value.neg {
    color: #ff5555;
}

.europa-topbar .value.pos {
    color: #4caf50;
}

.europa-main {
    display: flex;
    gap: 10px;
    padding: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}

/* Kolumna lewa - pelne menu + (gdy submenu "4. Kasa" otwarte) osobna ramka submenu, ulozone
   PIONOWO. min-height ustawiony z JS (xkantorEuropaZmierzWysokoscMenu, europa.js) na wysokosc
   PELNEGO menu (15 pozycji) - gdy submenu jest otwarte, oba panele razem (4+7=11 pozycji) sa
   naturalnie NIZSZE, wiec bez tego min-height dolny pasek statusu i prawy panel tresci (stretch
   wzgledem tej kolumny w .europa-main) przesuwalyby sie w gore (zgloszenie uzytkownika
   2026-11-06: "ten czarny pasek na dole musi zawsze byc w tym samym miejscu"). */
.europa-menu-kolumna {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 auto;
    align-self: flex-start;
    min-height: var(--europa-menu-stala-wysokosc, auto);
}

.europa-menu-panel {
    border: 2px solid #ffffff;
    background: #0000aa;
    min-width: 400px;
    flex: 0 0 auto;
    /* WAZNE: nie "stretch" (dziedziczone z .europa-main) - menu ma STALA, wlasna wysokosc (15
       pozycji). Gdyby stretch dzialal tu normalnie, wysokosc menu zalezalaby od
       .europa-content-panel, ktorego .europa-kursy-scroll/.europa-slownik-scroll maja max-height
       MIERZONA wzgledem dolu menu (europa.js) - to petla sprzezenia zwrotnego: kazdy pomiar (np.
       co sekunde przy ticku zegara) dokladalby nadwyzke (naglowek+padding) do wysokosci menu,
       ktora przy kolejnym pomiarze znow powiekszalaby tabele, w nieskonczonosc, az strona zaczela
       wymagac pionowego scrolla (zgloszenie uzytkownika 2026-11-06: "jak wejde jest ok, a potem
       wraca do pionowego scrolla"). align-self:flex-start usuwa menu z tej petli - jego wysokosc
       jest zawsze tylko jego wlasna, .europa-content-panel nadal sie do niej dopasowuje (stretch
       z .europa-main), ale juz w jedna strone. */
    align-self: flex-start;
}

.europa-menu-title {
    text-align: center;
    padding: 4px;
    border-bottom: 1px solid #ffffff;
    font-weight: bold;
    letter-spacing: 1px;
}

.europa-menu-item {
    display: block;
    padding: 5px 12px;
    color: #ffffff;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
}

.europa-menu-item.is-active {
    background: #a000a0;
    color: #ffffff;
}

.europa-menu-item.is-disabled {
    color: #8c8cd6;
}

.europa-menu-item .numer {
    display: inline-block;
    width: 1.8em;
}

.europa-content-panel {
    border: 2px solid #ffffff;
    background: #0000aa;
    flex: 1 1 420px;
    min-width: 320px;
    display: flex;
    flex-direction: column;
}

.europa-panel-header {
    background: #cc0000;
    color: #ffffff;
    text-align: center;
    font-weight: bold;
    padding: 6px;
    letter-spacing: 1px;
}

/* Kupno = zielony nagłówek, Sprzedaż = czerwony (zgłoszenie użytkownika, zgodnie z referencją). */
.europa-header-kupno {
    background: #1f8c1f;
}

.europa-header-sprzedaz {
    background: #cc0000;
}

/* Czerwony pasek na SAMYM DOLE panelu tresci (submenu Kasy - Stan kasy/Srednie-Zyski/Zasilek-
   Odprowadzenie zlotowkowe, zgodnie ze zrzutami starego programu DOS) - wizualnie identyczny z
   .europa-panel-header (ten sam kolor/waga), tylko na koncu zamiast na poczatku. Naturalnie
   przyklejony do dolu dzieki .europa-panel-body {flex:1 1 auto} wyzej (rosnie i wypycha ten
   pasek w dol), bez potrzeby margin-top:auto. */
.europa-panel-footer-red {
    background: #cc0000;
    color: #ffffff;
    text-align: center;
    font-weight: bold;
    padding: 6px;
    letter-spacing: 1px;
}

/* Srednie/Zyski - ZYSK ma byc MAX na prawo (zgloszenie uzytkownika), "D - drukowac..." zostaje
   po lewej - flex zamiast wysrodkowanego tekstu, justify-content rozpycha oba spany do
   przeciwnych krancow paska. */
.europa-panel-footer-rozlozony {
    display: flex;
    justify-content: space-between;
    text-align: left;
}

/* Tabele "Stan kasy"/"Srednie/Zyski" (submenu Kasy) - lekko mniejsza czcionka na wszelki wypadek
   (5-6 kolumn liczbowych z duzymi kwotami), ten sam zapobiegawczy wzorzec co .europa-kursy-tabela. */
.europa-kasy-tabela {
    font-size: 0.86em;
}

/* Raporty submenu Kasy (Stan kasy/Srednie-Zyski) maja az tyle wierszy (wszystkie waluty kasy), ze
   musza miec WLASNY, ograniczony scroll pionowy - zasada uzytkownika: w EUROPIE nigdy nie wolno
   dopuscic do scrolla calej przegladarki. max-height ustawiany z JS
   (xkantorEuropaUstawWysokoscKasyRaport, europa.js) na podstawie realnej wysokosci lewej kolumny
   menu (dol "15. Koniec pracy") - ten sam mechanizm co .europa-kursy-scroll/.europa-slownik-scroll. */
.europa-kasa-raport-scroll {
    max-height: var(--europa-kasa-raport-max-wysokosc, 300px);
    overflow-y: auto;
}

/* Wiersz posredniej sumy "RAZEM WALUTY OBCE" w tabeli Stan kasy - miedzy walutami obcymi a
   wierszem PLN (zgloszenie uzytkownika: "daj podsumowanie walut w PLN i potem PLN i potem
   razem"), wizualnie wyrozniony od zwyklych wierszy, ale lzejszy niz koncowe RAZEM. */
.europa-kasa-podsuma td {
    border-top: 1px solid #ffffff;
    font-weight: bold;
    color: #ffff00;
}

.europa-kasa-razem {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 2px double #ffffff;
    text-align: right;
    font-weight: bold;
}

.europa-kasa-razem .value {
    color: #00ffff;
}

.europa-kasa-formularz {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 24px;
}

.europa-kasa-form-podpowiedz {
    color: #00ffff;
    font-weight: bold;
}

.europa-kasa-form-podpowiedz.europa-kasa-form-blad {
    color: #ff5555;
}

/* Pole Waluta ma wpisywać WIELKIE litery (symbol waluty) - czysto wizualne (text-transform nie
   zmienia faktycznej wartości pola ani nie ingeruje w synchronizację z C#, więc nie wraca problem
   z gubieniem znaków przy wpisywaniu). */
#europa-kupno-waluta {
    text-transform: uppercase;
    /* Wyjątek od .europa-kupno-field input (text-align:right, wspólne dla Kwoty/Ceny) -
       zgłoszenie użytkownika: symbol waluty ma być wyrównany do lewej. */
    text-align: left;
}

.europa-panel-body {
    padding: 10px 14px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.europa-table {
    width: 100%;
    border-collapse: collapse;
}

.europa-table th {
    text-align: left;
    border-bottom: 1px solid #ffffff;
    padding: 3px 8px;
    color: #00ffff;
}

.europa-table td {
    padding: 3px 8px;
    border-bottom: 1px solid #333399;
}

.europa-table tr:hover td {
    background: #1a1ac2;
}

/* Wiersze wyboru klienta (Q-Kto) - klikalne, inaczej niz zwykle wiersze historii/pozycji. */
.europa-klikalny {
    cursor: pointer;
}

/* Podswietlony (strzalkami gora/dol) wiersz slownika walut przy Kupnie/Sprzedazy - ten sam
   kolor co aktywna pozycja menu glownego, dla spojnosci. */
.europa-table tr.podswietlona td {
    background: #a000a0;
    color: #ffffff;
}

/* Slownik walut (pod polem Waluty przy Kupnie/Sprzedazy) - wezszy niz reszta formatki, zeby nie
   rozciagac sie na cala szerokosc ramki (zgloszenie uzytkownika), kolumna Ilosc wyrownana do
   prawej (liczby). */
/* Słownik nie ma wypadać poza widoczny obszar Handlu, gdy lista walut jest długa (zgłoszenie
   użytkownika - ma się mieścić dokładnie do dolnego czarnego paska ESC, nie dalej) - to teraz
   załatwia .europa-panel-body (overflow-y:auto, wysokość ograniczona przez .europa-root/
   .europa-main/.europa-content-panel, cały łańcuch flex z min-height:0), NIE sam słownik -
   dzięki temu identyczny mechanizm działa też dla innych długich list (Kursy Walut, Podgląd
   Pracy), nie tylko dla tego słownika. Tu zostaje tylko wygląd (ramka/cień/szerokość). */
/* max-height ustawiana z JS (xkantorEuropaUstawWysokoscSlownika, europa.js) na podstawie
   rzeczywistej wysokości panelu MENU GŁÓWNE (dół pozycji "15. Koniec pracy") - zgłoszenie
   użytkownika: "sprawdź na jakiej wysokości jest 15. Koniec Pracy i daj słownik do tej wysokości".
   Zero zgadywania na sztywno (vh/px) - zawsze dokładnie dopasowane, niezależnie od rozdzielczości. */
.europa-slownik-scroll {
    width: fit-content;
    min-width: 320px;
    overflow-y: auto;
    border: 1px solid #00ffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    /* Wartości z JS (xkantorEuropaUstawWysokoscSlownika, europa.js) - zmienne CSS na :root,
       NIE inline style na tym elemencie, żeby przeżyły ewentualne odtworzenie tego <div> przez
       Blazor przy kolejnym renderze (zero migania/skakania pozycji - zgłoszenie użytkownika). */
    max-height: var(--europa-slownik-max-wysokosc, 400px);
    margin-left: var(--europa-slownik-offset, 0px);
}

.europa-slownik-tabela {
    width: auto;
    min-width: 320px;
}

/* Tło słownika trochę jaśniejsze niż reszta formatki (#0000aa), żeby się wyróżniał od ramki
   wokół - zgłoszenie użytkownika ("ten niebieski zrob nieco jasniejszy"). */
.europa-slownik-tabela td,
.europa-slownik-tabela th {
    background: #2323c8;
}

.europa-slownik-ilosc {
    text-align: right;
}

/* Podglad Pracy - kolumna Typ (K/S/Z/O): zielony = wplyw do kantoru (Kupno/Zasilenie),
   czerwony = wydatek z kantoru (Sprzedaz/Odprowadzenie) - zgloszenie uzytkownika 2026-10-17. */
.europa-typ-zielony {
    color: #4caf50;
    font-weight: bold;
}

.europa-typ-czerwony {
    color: #ff5555;
    font-weight: bold;
}

.europa-hint {
    color: #c9c9ff;
}

.europa-placeholder {
    padding: 20px;
    text-align: center;
    color: #ffd700;
}

.europa-statusbar {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    background: #000000;
    border-top: 2px solid #ffffff;
    padding: 6px 12px;
}

.europa-statusbar .key {
    color: #00ffff;
    font-weight: bold;
}

.europa-statusbar .opis {
    color: #ffffff;
}

.europa-footer-link {
    margin-left: auto;
    color: #ffd700;
    text-decoration: underline;
    cursor: pointer;
}

.europa-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
}

.europa-filters input,
.europa-filters select {
    background: #000080;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 3px 6px;
    font-family: inherit;
    font-size: inherit;
    height: 1.8em;
    box-sizing: border-box;
}

/* Prosty tekstowy przycisk w stylu EUROPA - w odroznieniu od .btn-icon (Standardowa, okragly,
   tylko na pojedynczy znak/ikone) ten ma miejsce na pelny tekst etykiety. Uzyty tam, gdzie
   .btn-icon z dluzszym tekstem ("+ Dopisz nowego") nachodzil na sasiednie pole (zgloszenie
   uzytkownika - porownanie zrzutow pokazalo nakladajacy sie, okragly przycisk). */
.europa-btn {
    background: #000080;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 3px 10px;
    font-family: inherit;
    font-size: inherit;
    height: 1.8em;
    box-sizing: border-box;
    cursor: pointer;
}

.europa-btn:hover {
    background: #a000a0;
}

/* Analiza Ryzyka (menu 8) - tekst pseudo-DOS: czarne tlo/jasnoszary tekst jak reszta formatki
   Europa, pelna szerokosc, scroll WEWNETRZNY (textarea), zeby dlugi tekst nie wymuszal scrolla
   calej strony (zasada "w Europie strona nigdy nie scrolluje"). */
.europa-analiza-textarea {
    width: 100%;
    height: var(--europa-kasa-raport-max-wysokosc, 300px);
    box-sizing: border-box;
    background: #000000;
    color: #e0e0e0;
    border: 2px solid #ffffff;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.3;
    padding: 10px;
    margin-top: 8px;
    resize: vertical;
}

.europa-analiza-textarea:focus {
    outline: none;
    border-color: #ffd700;
}

.europa-kupno-info {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 14px;
    font-weight: bold;
}

.europa-kupno-info .value {
    color: #ffffff;
}

.europa-kupno-info select {
    background: #000080;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 2px 4px;
    font-family: inherit;
    font-weight: normal;
}

.europa-kupno-row {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.europa-kupno-field label {
    display: block;
    color: #c9c9ff;
    font-size: 0.85em;
    margin-bottom: 2px;
}

/* TYLKO lewy padding komórki Waluty, NIC więcej (szerokość/box-sizing pól celowo nietknięte -
   poprzednia próba "wypełnij całą komórkę" na WSZYSTKICH polach na raz rozwaliła układ tabeli,
   zgłoszenie użytkownika "fatalna zmiana") - zgłoszenie użytkownika 2026-11-05: zielony/czerwony
   box w polu Waluty ma zaczynać się DOKŁADNIE tam, gdzie zaczyna się kolorowe tło w wierszu
   zapisanej pozycji powyżej (które pokrywa całą komórkę łącznie z jej domyślnym paddingiem
   8px - .europa-table td). Usunięcie samego lewego paddingu komórki przesuwa input dokładnie o
   tyle w lewo, bez zmiany jego własnej szerokości (160px) ani układu pozostałych kolumn. */
.europa-kupno-field-waluta {
    padding-left: 0;
}

.europa-kupno-field input,
.europa-kupno-field select {
    background: #1f8c1f;
    color: #ffffff;
    border: 2px solid transparent;
    padding: 4px 10px;
    font-family: inherit;
    font-size: 1.05em;
    font-weight: bold;
    text-align: right;
    width: 160px;
}

.europa-kupno-field select {
    text-align: left;
    width: 120px;
}

/* <select> nie pokazuje migającego kursora tekstowego (to wyłącznie cecha pól tekstowych,
   przeglądarka tego nie da się zasymulować) - zamiast tego wyraźne podświetlenie obramowania
   i jaśniejsze tło, żeby było widać które pole ma teraz fokus. */
.europa-kupno-field input:focus,
.europa-kupno-field select:focus {
    outline: none;
    border-color: #ffff00;
    background: #2aad2a;
}

/* Sprzedaż = czerwone tło pól wpisywania (symetrycznie do zielonego nagłówka/pól Kupna,
   zgłoszenie użytkownika) - nadpisuje domyślny zielony z .europa-kupno-field input wyżej. */
.europa-row-sprzedaz .europa-kupno-field input,
.europa-row-sprzedaz .europa-kupno-field select {
    background: #a51c1c;
}

.europa-row-sprzedaz .europa-kupno-field input:focus,
.europa-row-sprzedaz .europa-kupno-field select:focus {
    background: #d62828;
}

.europa-wartosc {
    font-size: 1.1em;
    font-weight: bold;
}

/* Teraz wiersze TEJ SAMEJ tabeli (colspan=4 etykieta + własna komórka Wartość), nie osobne
   <div> pod tabelą - zgłoszenie użytkownika 2026-11-05: wartość ma stać dokładnie w kolumnie
   Wartość, nie dalej na prawo poza krawędzią tabeli. */
.europa-wyplacono td {
    padding-top: 10px;
    border-top: 1px solid #ffffff;
    font-size: 1.2em;
    font-weight: bold;
}

.europa-wyplacono td:first-child {
    text-align: right;
}

/* Zapisane/zatwierdzone pozycje mają zostać "w kolorowym boksie" tak jak aktywny wiersz
   wpisywania (zgłoszenie użytkownika: "zostaw boxy zatwierdzone też na zielono") - ten sam
   zielony/czerwony co .europa-kupno-field input, tylko na zwykłych komórkach (bez <input>). */
.europa-pozycja-box-k {
    background: #1f8c1f;
    color: #ffffff;
    font-weight: bold;
}

.europa-pozycja-box-s {
    background: #a51c1c;
    color: #ffffff;
    font-weight: bold;
}

.europa-usun-pozycje {
    background: none;
    border: none;
    color: #ff6666;
    cursor: pointer;
    font-size: 1.1em;
    padding: 2px 6px;
}

.europa-usun-pozycje:hover {
    color: #ff0000;
}

/* Kupno/Sprzedaż/Stan w KURSY WALUT - wyrównane do prawej (zgłoszenie użytkownika 2026-11-05). */
.europa-prawo {
    text-align: right;
}

/* Pole edycji Kupna/Sprzedaży w tabeli Kursów Walut - neutralne (żółte obramowanie), bo ta sama
   wartość rzędu dotyczy ZARÓWNO Kupna jak i Sprzedaży tej waluty, nie jednego kierunku transakcji
   (w odróżnieniu od .europa-kupno-field, celowo zielonego/czerwonego w Handlu). */
#europa-kurs-edycja {
    background: #000080;
    color: #ffffff;
    border: 2px solid #ffff00;
    padding: 2px 8px;
    font-family: inherit;
    font-size: 1em;
    font-weight: bold;
    /* Migajacy kursor od lewej (zgloszenie uzytkownika 2026-11-06), nie na koncu szerokiego boxa -
       mimo ze kolumna liczbowa jest .europa-prawo (wyrownanie w trybie odczytu), pole edycji
       samo w sobie ma tekst/kursor od lewej, jak reszta pol edycyjnych w EUROPA. */
    text-align: left;
    width: 110px;
    box-sizing: border-box;
}

/* table-layout:fixed - szerokości kolumn ustalone RAZ (z pierwszego/nagłówkowego wiersza), więc
   podmiana komórki tekst<->input (wejście/wyjście z edycji) NIE przelicza już całej tabeli na
   nowo - zgłoszenie użytkownika 2026-11-05: "usuń ten efekt skaczącej tabeli jak naciskam enter
   to się powiększa". box-sizing:border-box na polu edycji wyżej z tego samego powodu - jego
   zadeklarowana szerokość (110px) ma być CAŁKOWITĄ szerokością (z paddingiem/obramowaniem), a nie
   dodatkową do nich, żeby nie być szersza niż typowa zawartość komórki obok. */
.europa-kursy-tabela {
    table-layout: fixed;
    /* 7. kolumna ("Śr. kurs" - zgłoszenie użytkownika 2026-11-06) zostawiła za mało miejsca na
       najdłuższe liczby (np. "1 650 000,00") przy pełnej czcionce EUROPA (22px) - dawalo
       niechciany poziomy scroll. Lekkie zmniejszenie tylko w tej tabeli. */
    font-size: 0.82em;
}

/* 6 kolumn (po dodaniu "Kurs średni" - zgłoszenie użytkownika 2026-11-06) było o wlos za szerokie
   dla panelu, dawalo niechciany poziomy scroll - lekko zciesniony padding odzyskuje te kilkanascie
   pikseli bez zmiany czytelnosci. */
.europa-kursy-tabela th,
.europa-kursy-tabela td {
    padding: 3px 5px;
}

/* Pionowy scroll - tabela Kursów ma kończyć się dokładnie na dole panelu MENU GŁÓWNE (pozycja
   "15. Koniec pracy"), tak jak słownik walut w Handlu - zgłoszenie użytkownika 2026-11-05. Wartość
   z JS (xkantorEuropaUstawWysokoscKursow, europa.js) jako zmienna CSS na :root (nie inline style)
   z tego samego powodu co .europa-slownik-scroll - przeżywa ewentualne odtworzenie elementu. */
.europa-kursy-scroll {
    overflow-y: auto;
    max-height: var(--europa-kursy-max-wysokosc, 400px);
}

/* Duży, czytelny headliner "ile wypłacić/wpłacić" (zgłoszenie użytkownika 2026-11-05) - pod
   rozpisanymi sumami, nad czerwonym paskiem ESC. */
.europa-naglowek-platnosc {
    color: #ffd700;
    font-size: 1.3em;
    font-weight: bold;
    letter-spacing: 2px;
}

.europa-duza-kwota {
    color: #ffffff;
    font-size: 2.6em;
    font-weight: bold;
}

.europa-blad-zapisu {
    color: #ff6666;
    font-weight: bold;
    margin-top: 10px;
}

.europa-confirm-bar,
.europa-esc-bar {
    background: #cc0000;
    color: #ffffff;
    padding: 8px 14px;
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    font-weight: bold;
}

.europa-esc-bar .key {
    color: #ffff00;
    margin-right: 4px;
}

/* Karta klienta EUROPA (Shared/Europa/KartaKlientaEuropa.razor) - pseudotekstowa formatka
   dodawania/edycji kontrahenta, wzorowana na zrzucie !!!/formatka.jpg. Dwie kolumny (zgloszenie
   uzytkownika 2026-11-06: cala formatka ma zmiescic sie do wysokosci panelu menu, bez scrolla) -
   stad tez troche mniejsza czcionka niz reszta EUROPY (duzo wiecej pol na tym jednym ekranie niz
   gdziekolwiek indziej w aplikacji). KAZDE pole jest zawsze realnym, klikalnym <input> (zgloszenie
   uzytkownika: "kazdy box musi byc edytowalny") - nie ma juz podzialu "aktywne pole = input,
   reszta = tekst". */
.europa-karta-klienta {
    font-size: 0.82em;
}

.europa-karta-kolumny {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.europa-karta-kolumna {
    flex: 1 1 0;
    min-width: 0;
}

/* Lewa kolumna ma pola szersze (Imie/Nazwa Firmy, Adres, Nazwisko - zgloszenie uzytkownika
   2026-11-06: "zrob szersze pola dla nazwy i dla nazwiska oraz imie, dla adresu") - wiecej
   miejsca niz prawej, zeby te szersze inputy sie zmiescily bez zawijania calego wiersza. */
.europa-karta-kolumny > .europa-karta-kolumna:first-child {
    flex: 1.15 1 0;
}

.europa-karta-wiersz {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    flex-wrap: nowrap;
}

/* Szerokosc NA SZTYWNO (nie min-width) - zgloszenie uzytkownika 2026-11-06: "wyrownaj kolumny i
   boxy zeby byly w tych samych kolumnach". Dlugie etykiety (np. "Rodzaj dokumentu tozsamosci")
   zawijaja sie w tej stalej szerokosci zamiast przesuwac caly wiersz w prawo - dzieki temu
   wszystkie pola Input w kolumnie zaczynaja sie dokladnie w tym samym miejscu. */
.europa-karta-etykieta {
    flex: 0 0 195px;
    width: 195px;
    color: #ffffff;
}

.europa-karta-dwukropek {
    color: #ffffff;
}

.europa-karta-wartosc-plain {
    color: #00ffff;
    font-weight: bold;
}

.europa-karta-podpowiedz {
    color: #c9c9ff;
    font-size: 0.85em;
}

.europa-karta-sekcja {
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px solid #ffffff;
    color: #ffff00;
    text-align: center;
    font-weight: bold;
}

.europa-karta-blad {
    color: #ff5555;
    margin-top: 8px;
}

.europa-karta-input {
    background: #a000a0;
    color: #ffffff;
    border: 2px solid transparent;
    padding: 1px 6px;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: inherit;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
}

.europa-karta-wiersz-numer {
    position: relative;
}

/* Slownik klientow pod polem "Numer klienta" - ten sam wzorzec wizualny co slownik walut w
   Handlu (.europa-slownik-scroll/.europa-table), tylko wlasna, prostsza lista (bez tabeli). */
.europa-karta-slownik-klientow {
    position: absolute;
    top: 100%;
    left: 195px;
    z-index: 5;
    background: #000080;
    border: 2px solid #ffffff;
    max-height: 340px;
    overflow-y: auto;
    min-width: 260px;
}

/* Wlasny, cienki pasek przewijania zamiast domyslnego systemowego (zgloszenie uzytkownika:
   "scrollbar pionowy jest brzydki") - ten sam motyw kolorystyczny co reszta EUROPY
   (tlo granatowe, uchwyt purpurowy), bez strzalek gora/dol. Dotyczy WSZYSTKICH wewnetrznych,
   ograniczonych obszarow przewijania w EUROPIE (zasada: strona nigdy nie scrolluje, tylko te
   wewnetrzne obszary - maja wiec wygladac spojnie ze soba). */
.europa-karta-slownik-klientow,
.europa-slownik-scroll,
.europa-kursy-scroll,
.europa-kasa-raport-scroll {
    scrollbar-width: thin;
    scrollbar-color: #a000a0 #000080;
}

.europa-karta-slownik-klientow::-webkit-scrollbar,
.europa-slownik-scroll::-webkit-scrollbar,
.europa-kursy-scroll::-webkit-scrollbar,
.europa-kasa-raport-scroll::-webkit-scrollbar {
    width: 10px;
}

.europa-karta-slownik-klientow::-webkit-scrollbar-button,
.europa-slownik-scroll::-webkit-scrollbar-button,
.europa-kursy-scroll::-webkit-scrollbar-button,
.europa-kasa-raport-scroll::-webkit-scrollbar-button {
    display: none;
}

.europa-karta-slownik-klientow::-webkit-scrollbar-track,
.europa-slownik-scroll::-webkit-scrollbar-track,
.europa-kursy-scroll::-webkit-scrollbar-track,
.europa-kasa-raport-scroll::-webkit-scrollbar-track {
    background: #000080;
}

.europa-karta-slownik-klientow::-webkit-scrollbar-thumb,
.europa-slownik-scroll::-webkit-scrollbar-thumb,
.europa-kursy-scroll::-webkit-scrollbar-thumb,
.europa-kasa-raport-scroll::-webkit-scrollbar-thumb {
    background: #a000a0;
    border: 1px solid #ffffff;
}

.europa-karta-slownik-wiersz {
    padding: 3px 10px;
    cursor: pointer;
    white-space: nowrap;
}

.europa-karta-slownik-wiersz:hover,
.europa-karta-slownik-wiersz.podswietlony {
    background: #a000a0;
}

.europa-karta-slownik-brak {
    color: #c9c9ff;
    cursor: default;
    padding: 6px 10px;
}

.europa-karta-slownik-brak:hover {
    background: transparent;
}

/* Słownik klientów pod OD KLIENTA/ODBIORCA (Zasiłek/Odprowadzenie złotówkowe) - zgłoszenie
   użytkownika "zrob w podobnym stylu jak Q-Kto" - prawdziwa tabela Id/Nazwa (.europa-table,
   ten sam wygląd co Q-Kto w Handlu), nie pojedyncza kolumna tekstu jak "Numer klienta" wyżej.
   Szersza niż domyślne 260px, żeby dłuższe nazwy firm się nie zawijały. */
.europa-karta-slownik-tabela {
    min-width: 420px;
    padding: 0;
}

.europa-karta-slownik-tabela .europa-table {
    width: 100%;
}

.europa-karta-input:focus {
    outline: none;
    border-color: #ffff00;
    background: #c200c2;
}

.europa-karta-gus-btn {
    flex: 0 0 auto;
    background: #000080;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 1px 8px;
    font-family: inherit;
    font-size: inherit;
    font-weight: bold;
    cursor: pointer;
}

.europa-karta-gus-btn:hover:not(:disabled) {
    background: #2323c8;
}

.europa-karta-gus-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

@media (max-width: 760px) {
    .europa-main {
        flex-direction: column;
    }

    .europa-menu-panel {
        width: 100%;
        min-width: 0;
    }
}