/* ==========================================================================
   Monitoring przetargów URSON
   --------------------------------------------------------------------------
   Panel dla handlowców w firmie sprzedającej ciągniki i maszyny rolnicze.
   Otwierany rano, często na telefonie. Odpowiada na jedno pytanie: co się pali.

   Czerwień pochodzi wprost z logo URSON (#AA100B) — nie jest dobrana „na oko".
   Używana wyłącznie dla marki i dla terminów mijających dziś lub jutro.
   Wszystko inne jest celowo ciche, żeby czerwony zachował znaczenie.
   ========================================================================== */

:root {
    --stal:        #1C1F26;   /* boczna nawigacja */
    --stal-jasna:  #2A2E37;
    --czerwien:    #AA100B;   /* Kolor z logo URSON — marka i pilne terminy */
    --czerwien-jasna: #C9241E; /* rozjaśnienie dla stanu najechania */
    --czerwien-tlo:#FCEAEA;
    --zboze:       #B8860B;   /* terminy w tym tygodniu */
    --zboze-tlo:   #FDF6E3;
    --popiel:      #EFF1F3;   /* tło strony */
    --papier:      #FFFFFF;
    --grafit:      #2B2F38;
    --szary:       #6B7280;
    --szary-jasny: #9CA3AF;
    --linia:       #E3E6EA;
    --zielen:      #1A7F4B;   /* rozstrzygnięcia */

    --cien-karta:  0 1px 2px rgba(28, 31, 38, .06), 0 1px 3px rgba(28, 31, 38, .04);
    --cien-uniesienie: 0 4px 12px rgba(28, 31, 38, .10);

    --szer-nawigacji: 232px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--popiel);
    color: var(--grafit);
    font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Liczby w kolumnach muszą się układać jedna pod drugą */
.liczby { font-variant-numeric: tabular-nums; }

a { color: inherit; }

/* --------------------------------------------------------------------------
   Boczna nawigacja
   -------------------------------------------------------------------------- */

.nawigacja {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--szer-nawigacji);
    background: var(--stal);
    color: #D7DBE0;
    display: flex;
    flex-direction: column;
    z-index: 40;
}

.nawigacja__marka {
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.nawigacja__logo {
    display: block;
    width: 128px;
    height: auto;
    margin-bottom: 3px;
}

.nawigacja__nazwa {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
    line-height: 1.15;
}

.nawigacja__nazwa span { color: var(--czerwien); }

.nawigacja__podpis {
    font-size: 12.5px;
    color: #8B93A0;
    margin-top: 2px;
}

.nawigacja__lista {
    list-style: none;
    margin: 12px 0 0;
    padding: 0 10px;
    flex: 1;
}

.nawigacja__link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 7px;
    color: #C3C9D2;
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    margin-bottom: 2px;
    transition: background .13s ease, color .13s ease;
}

.nawigacja__link:hover { background: var(--stal-jasna); color: #fff; }

.nawigacja__link--aktywny {
    background: var(--stal-jasna);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--czerwien);
}

.nawigacja__link svg { width: 17px; height: 17px; flex: none; opacity: .85; }

.nawigacja__stopka {
    padding: 14px 20px 18px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 13px;
    color: #8B93A0;
}

.nawigacja__wyloguj {
    color: #C3C9D2;
    text-decoration: none;
    font-weight: 500;
}
.nawigacja__wyloguj:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Obszar treści
   -------------------------------------------------------------------------- */

.tresc {
    margin-left: var(--szer-nawigacji);
    min-height: 100vh;
    padding: 26px 30px 60px;
}

.naglowek {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.naglowek__tytul {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
    line-height: 1.2;
}

.naglowek__opis {
    color: var(--szary);
    font-size: 14px;
    margin: 3px 0 0;
}

/* --------------------------------------------------------------------------
   Grupa przetargów według pilności terminu
   --------------------------------------------------------------------------
   To nie jest dekoracja: handlowiec otwiera panel, żeby zobaczyć, co się pali.
   Kolejność grup odpowiada kolejności działania, nie dacie dodania.
   -------------------------------------------------------------------------- */

.grupa { margin-bottom: 26px; }

.grupa__naglowek {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
    padding-left: 2px;
}

.grupa__nazwa {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.grupa__licznik {
    font-size: 12.5px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 20px;
    background: var(--linia);
    color: var(--szary);
}

.grupa--pilna .grupa__nazwa   { color: var(--czerwien); }
.grupa--pilna .grupa__licznik { background: var(--czerwien-tlo); color: var(--czerwien); }
.grupa--bliska .grupa__nazwa  { color: var(--zboze); }
.grupa--bliska .grupa__licznik{ background: var(--zboze-tlo); color: var(--zboze); }

/* --------------------------------------------------------------------------
   Wiersz przetargu
   -------------------------------------------------------------------------- */

.przetarg {
    display: flex;
    align-items: stretch;
    gap: 16px;
    background: var(--papier);
    border: 1px solid var(--linia);
    border-left-width: 3px;
    border-left-color: var(--linia);
    border-radius: 8px;
    padding: 13px 15px;
    margin-bottom: 7px;
    transition: box-shadow .14s ease, border-color .14s ease;
}

.przetarg:hover { box-shadow: var(--cien-uniesienie); }

/* Wiek ogłoszenia — liczony od dnia, w którym trafiło do systemu, nie od ostatniej
   wizyty w panelu. Wyróżnienie oparte na wizycie znikało przy drugim wejściu tego
   samego dnia, czyli wtedy, gdy jeszcze było potrzebne.

   Kolor stalowy, nie czerwony: czerwień w tym panelu znaczy „termin się pali"
   i nie może znaczyć jednocześnie „świeże". Świeżość słabnie z każdym dniem,
   pilność terminu rośnie — to dwie różne skale. */
.przetarg--dzis {
    background: linear-gradient(90deg, #F3F6FA 0%, var(--papier) 300px);
    border-color: #D6DEE8;
}

.plakietka-wiek {
    display: inline-block;
    vertical-align: 2px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 2px 7px;
    border-radius: 4px;
    margin-right: 7px;
    white-space: nowrap;
}

/* Dzisiaj — pełne wypełnienie, widoczne z drugiego końca listy */
.plakietka-wiek--dzis {
    background: var(--stal);
    color: #fff;
}

/* Wczoraj — obrys zamiast wypełnienia: wciąż świeże, ale już nie krzyczy */
.plakietka-wiek--wczoraj {
    background: #fff;
    color: var(--stal);
    box-shadow: inset 0 0 0 1.5px var(--stal);
}

/* Dwa i trzy dni — wygasająca informacja */
.plakietka-wiek--starsze {
    background: var(--popiel);
    color: var(--szary);
}

.przetarg--pilny  { border-left-color: var(--czerwien); }
.przetarg--bliski { border-left-color: var(--zboze); }
.przetarg--minal  { opacity: .55; }

.przetarg__glowna { flex: 1; min-width: 0; }

.przetarg__tytul {
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    color: var(--grafit);
    display: block;
    margin-bottom: 3px;
}

.przetarg__tytul:hover { color: var(--czerwien); }

.przetarg__zamawiajacy {
    font-size: 13.5px;
    color: var(--szary);
    line-height: 1.4;
}

.przetarg__miejsce { color: var(--szary-jasny); }

.przetarg__znaczniki {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

/* Notatka — zwinięta, dopóki jest pusta.
   Rozwija się sama, gdy coś w niej jest: uwaga zapisana przy przetargu ma być
   widoczna od razu, bez klikania i bez pamiętania, że gdzieś tam była. */
.notatka { margin-top: 8px; }

.notatka__przycisk {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--szary);
    cursor: pointer;
    list-style: none;
    padding: 3px 0;
    opacity: .6;
    transition: opacity .14s ease, color .14s ease;
}

.notatka__przycisk::-webkit-details-marker { display: none; }
.notatka__przycisk svg { width: 13px; height: 13px; }
.notatka__przycisk:hover { opacity: 1; color: var(--grafit); }

.przetarg:hover .notatka__przycisk { opacity: 1; }
details[open] > .notatka__przycisk { opacity: 1; color: var(--grafit); }

.notatka__form { margin-top: 6px; }

.notatka__pole {
    width: 100%;
    border: 1px solid var(--linia);
    border-radius: 7px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--grafit);
    resize: vertical;
    background: #FCFCFD;
}

.notatka__pole:focus {
    outline: 2px solid var(--czerwien);
    outline-offset: -1px;
    border-color: var(--czerwien);
    background: var(--papier);
}

.notatka__stopka {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.notatka__podpowiedz { font-size: 11.5px; color: var(--szary-jasny); }

/* Licznik dni — pierwsza rzecz, na którą pada wzrok.
   Zbudowany jak wskaźnik na desce rozdzielczej maszyny: duża cyfra, mały opis. */
.licznik {
    flex: none;
    width: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--linia);
    padding-left: 14px;
    text-align: center;
}

.licznik__dni {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.licznik__opis {
    font-size: 11px;
    color: var(--szary);
    margin-top: 2px;
    line-height: 1.2;
}

.licznik__data {
    font-size: 11.5px;
    color: var(--szary-jasny);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}

.licznik--pilny  .licznik__dni { color: var(--czerwien); }
.licznik--bliski .licznik__dni { color: var(--zboze); }
.licznik--brak   .licznik__dni { color: var(--szary-jasny); font-size: 20px; }

/* Oznaczenia — ikona z podpisem.
   Sama ikona była zagadką: gwiazdka, ptaszek i krzyżyk nie mówią nic osobie,
   która widzi panel pierwszy raz, a podpowiedź po najechaniu nie działa na telefonie.
   Podpis zostaje przygaszony, dopóki nie najedzie się na wiersz — czytelny,
   gdy jest potrzebny, cichy przez resztę czasu. */
.oznacz {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    border-radius: 7px;
    border: 1px solid var(--linia);
    background: var(--papier);
    color: var(--szary);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all .12s ease;
    white-space: nowrap;
}

.oznacz:hover { border-color: var(--szary); color: var(--grafit); }
.oznacz svg { width: 14px; height: 14px; flex: none; }

.oznacz--wybrany            { color: #fff; }
.oznacz--interesujace.oznacz--wybrany { background: var(--zboze);   border-color: var(--zboze); }
.oznacz--zlozono.oznacz--wybrany      { background: var(--zielen);  border-color: var(--zielen); }
.oznacz--odrzucone.oznacz--wybrany    { background: var(--szary);   border-color: var(--szary); }

.przetarg__oznaczenia {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 9px;
    opacity: .55;
    transition: opacity .14s ease;
}

.przetarg:hover .przetarg__oznaczenia,
.przetarg__oznaczenia:focus-within { opacity: 1; }

/* Gdy coś już oznaczono, ikony zostają widoczne bez najeżdżania */
.przetarg--oznaczony .przetarg__oznaczenia { opacity: 1; }

/* --------------------------------------------------------------------------
   Znaczniki
   -------------------------------------------------------------------------- */

.znacznik {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--popiel);
    color: var(--szary);
    white-space: nowrap;
}

.znacznik--zmiana  { background: var(--zboze-tlo);   color: var(--zboze); }
.znacznik--wynik   { background: #E8F5EE;            color: var(--zielen); }
.znacznik--uniewaz { background: var(--czerwien-tlo);color: var(--czerwien); }
.znacznik--cpv     { background: transparent; color: var(--szary-jasny); font-weight: 500; padding-left: 0; }
.znacznik--zrodlo  { background: #EEF2FF; color: #4338CA; }

/* --------------------------------------------------------------------------
   Karty i formularze
   -------------------------------------------------------------------------- */

.karta {
    background: var(--papier);
    border: 1px solid var(--linia);
    border-radius: 10px;
    box-shadow: var(--cien-karta);
}

.karta__naglowek {
    padding: 15px 18px 13px;
    border-bottom: 1px solid var(--linia);
    font-weight: 600;
    font-size: 15.5px;
}

.karta__tresc { padding: 16px 18px; }

.pasek-filtrow {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    background: var(--papier);
    border: 1px solid var(--linia);
    border-radius: 10px;
    padding: 11px 13px;
    margin-bottom: 22px;
    box-shadow: var(--cien-karta);
}

.pole {
    border: 1px solid var(--linia);
    border-radius: 7px;
    padding: 7px 11px;
    font-size: 14px;
    font-family: inherit;
    color: var(--grafit);
    background: var(--papier);
    min-width: 0;
}

.pole:focus {
    outline: 2px solid var(--czerwien);
    outline-offset: -1px;
    border-color: var(--czerwien);
}

.pole--szukaj { flex: 1; min-width: 190px; }

/* Pigułki filtrów — stan widoczny bez rozwijania listy */
.pigulka {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: 20px;
    border: 1px solid var(--linia);
    background: var(--papier);
    color: var(--szary);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all .13s ease;
}

.pigulka:hover { border-color: var(--szary-jasny); color: var(--grafit); }

.pigulka--wybrana {
    background: var(--stal);
    border-color: var(--stal);
    color: #fff;
    font-weight: 600;
}

.pigulka__licznik {
    font-size: 11.5px;
    opacity: .75;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Przyciski
   -------------------------------------------------------------------------- */

.przycisk {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 7px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .13s ease, border-color .13s ease, transform .08s ease;
}

.przycisk:active { transform: scale(.98); }

.przycisk--glowny { background: var(--czerwien); color: #fff; }
.przycisk--glowny:hover { background: var(--czerwien-jasna); }

.przycisk--stal { background: var(--stal); color: #fff; }
.przycisk--stal:hover { background: var(--stal-jasna); }

.przycisk--obrys { background: var(--papier); border-color: var(--linia); color: var(--grafit); }
.przycisk--obrys:hover { border-color: var(--szary-jasny); }

.przycisk--maly { padding: 5px 11px; font-size: 13px; }

/* --------------------------------------------------------------------------
   Przełącznik kategorii
   -------------------------------------------------------------------------- */

.przelacznik {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 12px;
    border: none;
    background: #CBD2DA;
    cursor: pointer;
    padding: 0;
    flex: none;
    transition: background .16s ease;
}

.przelacznik::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
    transition: transform .16s cubic-bezier(.4, 0, .2, 1);
}

.przelacznik--wl { background: var(--czerwien); }
.przelacznik--wl::after { transform: translateX(18px); }

.przelacznik:focus-visible { outline: 2px solid var(--stal); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Kategoria
   -------------------------------------------------------------------------- */

.kategoria {
    background: var(--papier);
    border: 1px solid var(--linia);
    border-radius: 10px;
    padding: 15px 16px;
    height: 100%;
    transition: border-color .14s ease;
}

.kategoria--wylaczona { background: #FAFBFC; }
.kategoria--wylaczona .kategoria__nazwa { color: var(--szary); }

.kategoria__gora { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.kategoria__nazwa { font-weight: 600; font-size: 15.5px; }
.kategoria__opis { font-size: 13px; color: var(--szary); margin-top: 3px; line-height: 1.45; }
.kategoria__zawartosc { margin-top: 12px; }

.kategoria__rozwin {
    font-size: 13px;
    color: var(--czerwien);
    cursor: pointer;
    font-weight: 500;
    list-style: none;
}
.kategoria__rozwin::-webkit-details-marker { display: none; }
.kategoria__rozwin::before { content: '+ '; font-weight: 700; }
details[open] .kategoria__rozwin::before { content: '– '; }

/* Element listy filtrów — kliknięcie usuwa */
.fraza {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--popiel);
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 13px;
    color: var(--grafit);
    cursor: pointer;
    font-family: inherit;
    transition: all .12s ease;
}

.fraza:hover { background: var(--czerwien-tlo); border-color: var(--czerwien); color: var(--czerwien); }
.fraza__usun { opacity: .45; font-weight: 700; }
.fraza:hover .fraza__usun { opacity: 1; }

.fraza--wykluczenie { background: #FDF2F2; color: #9B2C2C; }
.fraza--wykluczenie:hover { background: var(--czerwien); color: #fff; border-color: var(--czerwien); }

/* Województwa — szesnaście przełączników w jednym miejscu.
   Wybrane są ciemne, pominięte przygaszone: stan całego zasięgu widać na raz,
   bez rozwijania listy i bez liczenia zaznaczonych pól. */
.wojewodztwa {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.woj {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--linia);
    background: var(--papier);
    color: var(--szary-jasny);
    font-family: inherit;
    font-size: 13.5px;
    cursor: pointer;
    transition: all .12s ease;
}

.woj:hover { border-color: var(--szary); color: var(--grafit); }

.woj--wybrane {
    background: var(--stal);
    border-color: var(--stal);
    color: #fff;
    font-weight: 500;
}

.woj__liczba {
    font-size: 11.5px;
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Tabela kondycji
   -------------------------------------------------------------------------- */

.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th {
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: var(--szary);
    padding: 10px 14px;
    border-bottom: 1px solid var(--linia);
    background: #FAFBFC;
}
.tabela td { padding: 11px 14px; border-bottom: 1px solid var(--linia); }
.tabela tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: #FAFBFC; }
.tabela .prawo { text-align: right; }

.stan { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; }
.stan::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stan--sukces      { color: var(--zielen); }
.stan--ostrzezenie { color: var(--zboze); }
.stan--awaria      { color: var(--czerwien); }
.stan--trwa        { color: var(--szary); }

/* --------------------------------------------------------------------------
   Komunikaty
   -------------------------------------------------------------------------- */

.komunikat {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 16px;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 14px;
    border: 1px solid;
}

.komunikat--sukces  { background: #E8F5EE; border-color: #B7E0C7; color: #14532D; }
.komunikat--uwaga   { background: var(--zboze-tlo); border-color: #EDD9A3; color: #78500A; }
.komunikat--blad    { background: var(--czerwien-tlo); border-color: #F3C0C0; color: #8B1A1A; }
.komunikat__tresc   { flex: 1; }

.pusto {
    background: var(--papier);
    border: 1px dashed var(--linia);
    border-radius: 10px;
    padding: 46px 24px;
    text-align: center;
}

.pusto__tytul { font-size: 17px; font-weight: 600; margin-bottom: 5px; }
.pusto__opis { color: var(--szary); font-size: 14px; }

/* --------------------------------------------------------------------------
   Siatka
   -------------------------------------------------------------------------- */

.siatka { display: grid; gap: 14px; }
.siatka--2 { grid-template-columns: repeat(2, 1fr); }
.siatka--3 { grid-template-columns: repeat(3, 1fr); }

/* --------------------------------------------------------------------------
   Telefon
   -------------------------------------------------------------------------- */

.przelacz-menu {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 60;
    background: var(--stal);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 11px;
    cursor: pointer;
}

@media (max-width: 900px) {
    .siatka--2, .siatka--3 { grid-template-columns: 1fr; }

    .przelacz-menu { display: block; }

    .nawigacja {
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 8px 0 24px rgba(0, 0, 0, .2);
    }
    .nawigacja--otwarta { transform: translateX(0); }

    .tresc { margin-left: 0; padding: 58px 16px 50px; }

    .przetarg { flex-direction: row; gap: 12px; padding: 12px; }

    .licznik {
        width: 52px;
        padding-left: 10px;
    }
    .licznik__dni { font-size: 23px; }

    .naglowek__tytul { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::after { transition: none !important; animation: none !important; }
}