/* Wyszukiwarka, strona podmiotu i zestawienia — wszystko, co jest listą umów.

   Portal odpowiada na jedno pytanie: kto komu płaci. Tryb u góry decyduje,
   która strona umowy jest podmiotem — kontrahent czy jednostka publiczna —
   i to ona jest nagłówkiem każdego wiersza.

   Wyszukiwanie idzie wyłącznie do lokalnej bazy, więc wyniki pojawiają się
   natychmiast: nie ma szkieletów ładowania, pasków postępu ani dociągania
   stron umowy w tle. Cały ten aparat był potrzebny, gdy każde wpisanie NIP-u
   uruchamiało kilkadziesiąt żądań do rejestru. */

.tresc { padding-bottom: 8px; }

/* ------------------------------------------------------------- wyszukiwarka */

.szukajka { gap: 16px; margin-top: 4px; }

.szukajka__glowa { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Przełącznik trybu. Dwie pigułki, nie zakładki: wybór jest binarny i zmienia
   znaczenie każdego pola poniżej, więc musi być widoczny bez szukania. */
.tryby {
    display: inline-flex;
    padding: 4px;
    gap: 4px;
    background: var(--surface-2);
    border-radius: var(--r-pill);
    flex: none;
}

.tryby__opt {
    border: none;
    background: transparent;
    padding: 8px 18px;
    border-radius: var(--r-pill);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-2);
    cursor: pointer;
    white-space: nowrap;
}

.tryby__opt:hover { color: var(--ink); }
.tryby__opt.jest { background: var(--solid); color: var(--solid-ink); }

.szukajka__nota { font-size: 12.5px; color: var(--ink-3); flex: 1; min-width: 200px; }

.szukajka__wiersz { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.szukajka__lub { font-size: 12.5px; color: var(--ink-3); padding-bottom: 12px; }
.szukajka__nazwa { flex: 1; min-width: 220px; }

/* ------------------------------------------------------------- pole cyfrowe

   Znaki są renderowane w komórkach siatki, a pole tekstowe leży nad nią
   niewidoczne. Pozycja cyfry nie zależy więc od metryk fontu ani od odstępów
   między znakami — kratka i cyfra zawsze się pokrywają. Wcześniejsza wersja
   pozycjonowała znaki `letter-spacing` i rozjeżdżała się, gdy font się nie
   doładował. */

.kratki { position: relative; flex: none; }
.kratki__siatka { display: grid; grid-auto-flow: column; grid-auto-columns: 30px; height: 42px; }

.kratki__pole {
    display: grid;
    place-items: center;
    border: 1px solid var(--line-2);
    border-right: none;
    background: var(--surface-2);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    line-height: 1;
}

.kratki__pole:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); padding-left: 4px; }
.kratki__pole:last-child { border-right: 1px solid var(--line-2); border-radius: 0 var(--r-pill) var(--r-pill) 0; padding-right: 4px; }
.kratki__pole.pelne { background: var(--accent-tlo); border-color: var(--accent); }
.kratki__pole.nastepne { border-color: var(--accent); background: var(--surface); }
.kratki:focus-within .kratki__pole { border-color: var(--ink-3); }
.kratki:focus-within .kratki__pole.pelne,
.kratki:focus-within .kratki__pole.nastepne { border-color: var(--accent); }

.kratki input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
    padding: 0;
    cursor: text;
}

/* --------------------------------------------------------------- zawężenia */

.wiecej { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 2px; }

.wiecej__przelacz {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-2);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.wiecej__przelacz::-webkit-details-marker { display: none; }
.wiecej__przelacz:hover { color: var(--accent); }
.wiecej[open] .wiecej__przelacz .ikona { transform: rotate(90deg); }
.wiecej__przelacz .ikona { transition: transform .15s; }

.wiecej__ile {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-tlo);
    border-radius: var(--r-pill);
    padding: 2px 8px;
}

.wiecej__ile[hidden] { display: none; }

.wiecej__siatka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px 16px;
    padding-top: 16px;
}

.para { display: flex; gap: 8px; }
.para > * { flex: 1; min-width: 0; }
.pole--data { font-family: var(--font-mono); font-size: 12.5px; }

/* -------------------------------------------------------------- nagłówek listy */

.glowa {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin: 26px 0 4px;
    padding-inline: 4px;
}

.glowa h2 { font-size: 19px; font-weight: 600; }
.glowa__meta { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.glowa__meta strong { color: var(--ink-2); font-variant-numeric: tabular-nums; font-weight: 600; }
.glowa__narzedzia { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sortuj { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.sortuj select { width: auto; min-width: 210px; }

/* ------------------------------------------------------------ wiersz umowy */

.wyniki { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

.umowa-karta {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--cien);
    overflow: hidden;
}

.umowa-karta.otwarta { border-color: var(--line-2); box-shadow: var(--cien-mocny); }

.umowa-karta__przycisk {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 24px;
    align-items: start;
    width: 100%;
    padding: 16px 20px;
    cursor: pointer;
    background: none;
    border: none;
    text-align: left;
    font: inherit;
    color: inherit;
}

.umowa-karta__przycisk:hover { background: var(--surface-2); }

.umowa-karta__co {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.umowa-karta__rola { margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.umowa-karta__tlo { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.umowa-karta__liczby { text-align: right; }

.umowa-karta__kwota {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.umowa-karta__data { margin-top: 3px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }

.flaga {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 500;
    vertical-align: 2px;
}

.flaga--zniknela { background: var(--accent); color: var(--accent-ink); }
.flaga--zmieniona { background: var(--accent-tlo); color: var(--accent-mocny); }

/* ------------------------------------------------------- rozwinięcie umowy */

.panel { padding: 4px 20px 20px; border-top: 1px solid var(--line); background: var(--surface-2); }
.panel__kolumny { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding-top: 18px; }

.panel__tytul {
    margin: 0 0 10px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-3);
}

.dl { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 7px 14px; margin: 0; }
.dl dt { font-size: 12.5px; color: var(--ink-3); }
.dl dd { margin: 0; font-size: 13px; }
.dl dd.num { font-variant-numeric: tabular-nums; }

.strona {
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-2);
    border-radius: var(--r-sm);
    padding: 11px 14px;
    margin-bottom: 8px;
    background: var(--surface);
}

.strona--jsfp { border-left-color: var(--ink-3); }
.strona--wykonawca { border-left-color: var(--accent); }
.strona__rola { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); }
.strona__nazwa { font-weight: 600; font-size: 13.5px; margin: 2px 0 3px; }
.strona__ids { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }

.takze { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.takze__glowa { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.takze__lista { list-style: none; margin: 0; padding: 0; }

.takze__el {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: baseline;
    padding: 7px 0;
    border-top: 1px solid var(--line);
    font-size: 13px;
}

.takze__el:first-child { border-top: 0; }
.takze__link { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.takze__link:hover { color: var(--accent); }
.takze__kto { font-size: 12px; color: var(--ink-3); white-space: nowrap; }

.takze__suma {
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 12ch;
    text-align: right;
}

.panel__stopka { margin-top: 16px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }

.roznica { font-family: var(--font-mono); font-size: 11.5px; padding: 6px 0; border-top: 1px solid var(--line); }
.roznica__sciezka { color: var(--ink-3); }
.roznica__stare { color: var(--accent); text-decoration: line-through; }
.roznica__nowe { color: var(--ok); }

/* ---------------------------------------------------------- strona podmiotu */

.podmiot-karta { margin-top: 6px; }
.podmiot-karta__glowa { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.podmiot-karta__rola { margin: 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); }
.podmiot-karta__nazwa { margin: 5px 0 6px; font-size: clamp(20px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.podmiot-karta__ids { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.podmiot-karta__sumy { text-align: right; }

.podmiot-karta__suma {
    display: block;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.podmiot-karta--jednostka .podmiot-karta__suma { color: var(--ink); }
.podmiot-karta__nota { font-size: 12px; color: var(--ink-3); }
.partnerzy { list-style: none; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }

/* --------------------------------------------------------- strona zestawienia */

.lista-glowa { margin: 8px 0 0; }
.lista-glowa__tytul { font-size: clamp(22px, 2.6vw, 32px); font-weight: 600; letter-spacing: -.03em; margin: 12px 0 0; }
.lista-glowa__opis { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); max-width: 74ch; line-height: 1.5; }
.lista-glowa__zawezenie { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); }

.lista-glowa__liczby { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.sortpick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; }
.sortpick > span { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }

.poz-lista { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.poz {
    display: grid;
    grid-template-columns: 3.5ch minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.poz__nr { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.poz__tresc { font-size: 14px; line-height: 1.35; min-width: 0; }
.poz__meta { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-3); }

.poz__kwota {
    text-align: right;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.poz__pod { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }

/* --------------------------------------------------------- wąskie ekrany */

@media (max-width: 820px) {
    .panel__kolumny { grid-template-columns: 1fr; gap: 18px; }
    .dl { grid-template-columns: 1fr; gap: 2px; }
    .dl dt { margin-top: 8px; }
    .takze__el, .partnerzy .lista__el { grid-template-columns: minmax(0, 1fr) auto; }
    .takze__kto { display: none; }
    .podmiot-karta__sumy { text-align: left; }
}

@media (max-width: 640px) {
    .szukajka__wiersz { gap: 10px; }
    .szukajka__lub { display: none; }
    .szukajka__nazwa { flex-basis: 100%; }
    .szukajka__wiersz .pigulka { flex: 1 1 100%; }
    .tryby { width: 100%; }
    .tryby__opt { flex: 1; }
    .kratki__siatka { grid-auto-columns: minmax(0, 1fr); width: 100%; }
    .kratki { width: 100%; }
    .umowa-karta__przycisk { grid-template-columns: 1fr; }
    .umowa-karta__liczby { text-align: left; display: flex; gap: 12px; align-items: baseline; margin-top: 8px; }
    .umowa-karta__data { margin-top: 0; }
    .poz { grid-template-columns: 2.5ch minmax(0, 1fr); }
    .poz__kwota { grid-column: 2; text-align: left; }
}