/* ============================================================
   listy.css — wspólne style list tabelarycznych w Systemie TN2
   Wzorzec: lista przypomnień (hierarchia kontrastu:
   tytuł ciemny → metadane szare → ID ledwo widoczne).
   Kolory ze skali slate-* i sky-* Tailwind 3.x (wartości RGB
   wpisane ręcznie, bo Tailwind leci z CDN = brak @apply).

   Dotyczy list: zadania, przypomnienia, zgłoszenia.
   Docelowo: kontrahenci, projekty, poczta — po ujednoliceniu.
   ============================================================ */

/* ---------- tabela ----------
   Zasada (2026-05-02): tabela zawsze 100% szerokosci kontenera, BEZ poziomego scrolla.
   Browser z table-layout: fixed proporcjonalnie skaluje kolumny gdy suma col.width
   nie miesci sie w 100% — kolumny sciskaja sie razem zachowujac proporcje. */
.listy-table {
    font-size: 0.875rem;          /* text-sm */
    white-space: nowrap;
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

/* ---------- nagłówek ---------- */
.listy-thead {
    background-color: #f8fafc;    /* slate-50 */
    color: #475569;               /* slate-600 */
    border-bottom: 1px solid #e2e8f0; /* slate-200 */
    text-transform: uppercase;
    font-size: 0.75rem;           /* text-xs */
}
.listy-th {
    padding: 0.5rem 0.75rem;      /* py-2 px-3 */
    text-align: left;
    position: relative;
    font-weight: 500;
}
.listy-th--srodek { text-align: center; }
.listy-th--prawo  { text-align: right;  }

/* uchwyt przeciągania na krawędzi nagłówka — widoczny klocek (drag-grip pattern).
   16px strefa klikalna wycentrowana na granicy kolumn (right: -8px wystawia uchwyt 8px za prawą
   krawędź th, więc strefa jest 8px po obu stronach granicy — łatwo trafić myszą).
   Wewnątrz: pionowy pasek 4px slate-300 widoczny zawsze, hover sky-600, active sky-900. */
.listy-resize-uchwyt {
    position: absolute;
    right: -8px;
    top: 0;
    bottom: 0;
    width: 16px;
    cursor: col-resize;
    user-select: none;
    z-index: 20;
}
.listy-resize-uchwyt::before {
    content: '';
    position: absolute;
    left: 6px;            /* (16 - 4) / 2 = 6 — pasek wycentrowany w strefie 16px */
    top: 20%;
    bottom: 20%;
    width: 4px;
    background-color: #cbd5e1; /* slate-300 — widoczny klocek-uchwyt */
    border-radius: 2px;
    transition: background-color 0.15s;
}
.listy-resize-uchwyt:hover { background-color: rgba(56, 189, 248, 0.12); } /* sky-400 / 12% — lekkie tlo strefy */
.listy-resize-uchwyt:hover::before  { background-color: #0284c7; } /* sky-600 — uchwyt mocniejszy */
.listy-resize-uchwyt:active::before { background-color: #0c4a6e; } /* sky-900 — uchwyt aktywny */

/* ---------- wiersz ---------- */
.listy-wiersz {
    border-bottom: 1px solid #f1f5f9; /* slate-100 */
}
.listy-wiersz:hover { background-color: #f0f9ff; } /* sky-50 */

.listy-wiersz--klikalny { cursor: pointer; }

/* Sygnał klikalności: gdy cały wiersz jest linkiem (onclick na <tr>),
   hover musi pokazać USEROWI że to jest klikalne — nie tylko kursor,
   ale też wizualne wyróżnienie tekstu. Zasada TN2: widać gdzie jesteś
   i gdzie możesz kliknąć. */
.listy-wiersz--klikalny:hover .listy-td-tytul {
    color: #0369a1;               /* sky-700 */
    text-decoration: underline;
}
.listy-wiersz--klikalny:hover .listy-td-drugorzedny,
.listy-wiersz--klikalny:hover .listy-td-data {
    color: #334155;               /* slate-700 — podniesiony kontrast */
}
.listy-wiersz--klikalny:hover .listy-td-metka {
    color: #64748b;               /* slate-500 — też lekko wyraźniej */
}

/* warianty specjalne dla przypomnień (dzisiaj / przeszłe) */
.listy-wiersz--dzis    { background-color: #fffbeb; } /* amber-50 */
.listy-wiersz--przeszle{ background-color: #fff1f2; opacity: 0.6; } /* rose-50 */

/* warianty zamknięte (zadania ukończone) — bez globalnego opacity
   (byłoby za mocne gdy CAŁA lista to zamknięte). Wygaszamy tylko tytuł. */
.listy-wiersz--zamkniety .listy-td-tytul {
    color: #64748b;               /* slate-500 */
    text-decoration: line-through;
    text-decoration-color: #94a3b8; /* slate-400 — dyskretna kreska */
}

/* ---------- komórki ---------- */
.listy-td {
    padding: 0.5rem 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.listy-td--srodek { text-align: center; }
.listy-td--prawo  { text-align: right;  }

/* HIERARCHIA KONTRASTU — to jest kluczowe, żeby listy wyglądały spójnie */

/* tytuł wiersza (najważniejszy tekst) — text-sm + slate-800 */
.listy-td-tytul {
    color: #1e293b;               /* slate-800 */
}

/* metadane drugorzędne — text-xs + slate-600 */
.listy-td-drugorzedny {
    color: #475569;               /* slate-600 */
    font-size: 0.75rem;
}

/* daty, krótkie liczby — text-xs + slate-500 */
.listy-td-data {
    color: #64748b;               /* slate-500 */
    font-size: 0.75rem;
    white-space: nowrap;
}

/* ID i metki techniczne — text-xs + slate-400 + monospace */
.listy-td-metka {
    color: #94a3b8;               /* slate-400 */
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* link wewnątrz listy (spójny kolor sky-600) */
.listy-link {
    color: #0284c7;               /* sky-600 */
    text-decoration: none;
}
.listy-link:hover { text-decoration: underline; }

/* Wrapper <a> owijający zawartość komórki klikalnego wiersza.
   Dzięki niemu przeglądarka pokazuje URL w pasku statusu przy hover —
   user wie, gdzie kliknięcie go zaprowadzi. Link pokrywa całą komórkę
   (display: block) i dziedziczy styl, żeby nie wyglądał jak niebieski
   podkreślony link — hover-efekty przejmują reguły
   .listy-wiersz--klikalny:hover .listy-td-*. */
.listy-td-link {
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
}
.listy-td-link:hover,
.listy-td-link:focus,
.listy-td-link:visited { color: inherit; text-decoration: none; }

/* badge / plakietka (np. status, "obserwujesz") */
.listy-plakietka {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    border: 1px solid transparent;
}

/* Plakietka statusu z "przyciemnioną" wersją kolorową — tło ~12% koloru
   admina na białym (jasne), tekst ZAWSZE ciemny (slate-900). Obok może
   stać kropka w pełnym kolorze dla sygnału wizualnego. ZASADA: na jasnym
   tle NIGDY nie kładziemy tekstu w tym samym (też jasnym) kolorze. */
.listy-plakietka-tint {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    color: #0f172a;                 /* slate-900 — twardy kontrast */
    line-height: 1.2;
}
.listy-plakietka-tint:hover { opacity: 0.85; }
.listy-plakietka-tint .listy-plakietka-kropka {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

/* Neutralna plakietka (źródło, tag systemowy, atrybut tak/nie) — ta sama
   geometria co .listy-plakietka-tint, żeby plakietki w jednym widoku
   wyglądały spójnie: taka sama wielkość, padding, obwódka 1px, ciemny
   tekst. Różnią się tylko kolorem: tint = kolor admina, neutral = szary. */
.listy-plakietka-neutral {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.2;
    color: #334155;                 /* slate-700 */
    background-color: #f1f5f9;      /* slate-100 */
    border: 1px solid #e2e8f0;      /* slate-200 */
    text-decoration: none;
}
.listy-plakietka-neutral:hover {
    background-color: #e2e8f0;      /* slate-200 */
    color: #0f172a;                 /* slate-900 */
}

/* Plakietka "solid" — pełny kolor tła (nie z alfą), używana gdy trzeba
   mocniejszego wyróżnienia: tag w wierszu, aktywny filtr, akcent.
   Tło + obwódka inline z koloru admina/tagu, tekst przez filtr
   Twig |contrast_color (WCAG luminance) żeby zawsze dać czytelny.
   Anatomia IDENTYCZNA z tint/neutral — tylko kolor tła inny. */
.listy-plakietka-solid {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.2;
    border: 1px solid;
    text-decoration: none;
    /* background-color, color, border-color — ustawiane inline per element */
}
.listy-plakietka-solid:hover { opacity: 0.85; }

/* Linia wielu etykiet w jednym wierszu (np. tagi projektu przy
   kontrahencie). Kontener nie zawija, a pojedyncze etykiety mogą się
   skurczyć do ellipsis gdy wszystkie razem są szersze niż dostępne
   miejsce. Nazwa projektu (flex-1 obok) nadal ma priorytet przestrzeni. */
.listy-tagi-linia {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    min-width: 0;
    overflow: hidden;
    flex: 0 1 auto;
}
.listy-tagi-linia .listy-plakietka-solid {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 160px;
}
.listy-tag-tekst {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    min-width: 0;
    max-width: 100%;
}

/* ---------- kontener / karta tabeli ----------
   Brak overflow-x — tabela ma width 100%, scroll horizontalny niepotrzebny (2026-05-02). */
.listy-karta {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;    /* slate-200 */
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* pusty stan ("Brak …") */
.listy-pusto {
    padding: 2rem;
    text-align: center;
    color: #64748b;               /* slate-500 */
}

/* ============================================================
   SZEROKOŚCI STRON — globalna konwencja TN2
   ------------------------------------------------------------
   Stosuj na pierwszym <div> bezpośrednio po {% block content %}.
   Padding strony idzie z <main> w base.twig (px-8 py-8).
   Zmiana wartości tutaj = globalna zmiana wszystkich podstron danego typu.

   tn2-strona-pelna  — listy, tabele, dashboardy, panele admin (100%)
   tn2-strona-tekst  — pojedynczy rekord, formularz, edycja, opis  (56rem)
   tn2-strona-waska  — logowanie, reset hasła, mini formularz       (28rem)
   ============================================================ */

.tn2-strona-pelna {
    max-width: 100%;
}

.tn2-strona-tekst {
    max-width: 56rem;          /* 896px */
    margin-left: auto;
    margin-right: auto;
}

.tn2-strona-waska {
    max-width: 28rem;          /* 448px */
    margin-left: auto;
    margin-right: auto;
}