/* =====================================================================
   SIMTU WWW Client — screen-tasks.css
   ---------------------------------------------------------------------
   WLASCICIEL: agent "zadania". Ekrany Task List (#/tasks) i Personal
   List (#/personal) oraz komentarze zadan w dialogu edycji.

   Wymaga wczesniejszego zaladowania theme.css i components.css.
   ZASADA: zero wartosci hex/rgba — wylacznie var(--token) z theme.css.
   Wyjatkiem sa surowe piksele z Figmy (35px, 23px, 65px…), ktore sa
   wymiarami ukladu, a nie kolorami.

   ZRODLO WYMIAROW — Figma 5EhOBm4rUvbayzFZkwnQpT, strona 232:159:
     496:6052  Content Window / Task List      988x604
     496:5246  Content Window / Personal List  988x604
     496:4831  naglowki kolumn
     438:3366  Search by keyword   438:3379  Filters
     548:4083  chipy filtrow       438:3556  Status Dot
     496:4242  Task Priority       492:7171  Open or Close List Icon
     553:3829  Column Name         553:3816  Expand_down
     443:2697  Tasks by Status     449:3233  Recent Messages

   SIATKA TASK LIST (mierzona w Figmie, okno 988, padding 12 -> 964):
     x=12   krawedz tresci                     (--panel-pad)
     x=25.5 trojkat rozwijania (9x12)
     x=47   kropka statusu (10x10)
     x=69   nazwa zadania (Inter Medium 10/14)
     x=373  licznik podzadan (ikona 8.084x10 + liczba)
     x=401  stos awatarow (24x24, skok 22 -> zachodza o 2px)
     x=481  priorytet (100x16)
     x=606  data startu (65)      x=683  data konca (65)
     x=760  pigulka projektu (100x16, WYPELNIONA kolorem projektu)
     x=872  postep (100x16, OBRYS w kolorze statusu, procent w srodku)
     x=976  prawa krawedz tresci
   Wiersz: 32px wysokosci, skok 36px (32 + --module-gap), radius 6, glazed.

   WCIECIE PODZADAN — Figma nie przesuwa kolumn, tylko WSUWA KARTE wiersza
   o 23px z lewej (964 -> 941) i zabiera gutter trojkata (35px -> 12px).
   Dzieki temu kropka i nazwa poziomu 1 stoja DOKLADNIE tam, gdzie na
   poziomie 0 (47 i 69), a kolumna nazwy (1fr) pochlania roznice, wiec
   wszystkie kolumny za nia zostaja pod tym samym x niezaleznie od
   poziomu zagniezdzenia. Kolejne poziomy wcinaja sie juz normalnie
   (poziom 2: kropka 70, nazwa 92).

   SPIS TRESCI
     01. Powloka ekranu i pasek narzedzi
     02. Chipy filtrow ze licznikami
     03. Siatka tabeli: naglowek kolumn
     04. Wiersz zadania i komorki
     05. Zagniezdzenie, zaznaczenie, drag & drop
     06. Edycja statusu w miejscu
     07. Stany puste
     08. Personal List — kolumna kart z Figmy
     09. Personal List — wykres "Tasks by Status"
     10. Personal List — "Recent Messages"
     11. Personal List — lista pozycji
     12. Komentarze zadania (dialog)
     13. Zgodnosc: stary szkielet .list-* uzywany przez inne ekrany
     14. Zwezanie — zapytania o kontener
   ===================================================================== */


/* =====================================================================
   01. POWLOKA EKRANU I PASEK NARZEDZI
   ---------------------------------------------------------------------
   Figma: Search by keyword 212x16 na (12,12), Filters tuz obok na
   x=236 (odstep 12). Pasek ma dokladnie 16px wysokosci, wiec przyciski
   akcji sa do niej sprowadzone (components.css daje im 26px w wariancie
   Qt-exact, ktory tu rozbilby linie bazowa).
   ===================================================================== */

.tasklist,
.plist {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: var(--panel-pad);
    gap: var(--panel-pad);
    overflow: hidden;
}

.tl-toolbar {
    display: flex;
    align-items: center;
    gap: var(--panel-pad);
    height: var(--control-h);
    flex-shrink: 0;
}

/* Grupa Add / Edit / Delete — Figma trzyma te akcje w gornym submenu,
   ale ekran musi zachowac CRUD, wiec siedza na prawym koncu paska. */
.tl-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    flex-shrink: 0;
}

.tl-actions .btn-add,
.tl-actions .btn-edit,
.tl-actions .btn-delete {
    width: auto;
    min-width: 0;
    height: var(--control-h);
    padding: 0 9px;
    border-radius: var(--radius-md);
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
}

/* Kontener "Filters" — przycisk z Figmy + menu rozwijane pod nim. */
.tl-filters { position: relative; display: inline-flex; flex-shrink: 0; }
.tl-filters .menu { top: calc(var(--control-h) + var(--space-1)); left: 0; }

.tl-search { flex-shrink: 0; }


/* =====================================================================
   02. CHIPY FILTROW ZE LICZNIKAMI
   ---------------------------------------------------------------------
   Figma 548:4083: 120x16, skok 132 (odstep 12), radius 6, tlo solidne
   w kolorze statusu, etykieta 64px + grupa licznika 38px do prawej.
   Ikona licznika to wyeksportowany glif podzadan (assets/icons/
   chip-count.svg -> .ic-subtasks, 8.084x10) — nie rysujemy jej recznie.
   ===================================================================== */

.tl-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--panel-pad);
    flex-shrink: 0;
}

/* Chip niesie wlasny licznik — .chip-label/.chip-count sa z components.css. */
.tl-chips .filter-chip .ic-subtasks { opacity: 0.85; }


/* =====================================================================
   03. SIATKA TABELI: NAGLOWEK KOLUMN
   ---------------------------------------------------------------------
   Jedna definicja siatki dla naglowka i wierszy — dzieki temu naglowek
   nie moze sie rozjechac z trescia. Kolumny w px pochodza wprost
   z odstepow miedzy naglowkami w Figmie.
   ===================================================================== */

.tl-table {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;

    /* dot | nazwa | podzadania | przypisani | priorytet | start | koniec |
       projekt | postep     (suma stalych = 625px) */
    --tl-cols:
        22px
        minmax(80px, 1fr)
        28px
        80px
        125px
        77px
        77px
        112px
        104px;

    --tl-lead: 35px;   /* gutter trojkata w wierszu poziomu 0 */
    --tl-indent: 23px; /* wsuniecie karty na kazdy poziom zagniezdzenia */
}

.tl-head {
    display: grid;
    grid-template-columns: var(--tl-cols);
    align-items: center;
    height: var(--lh-list);
    padding: 0;
    flex-shrink: 0;
}

/* Naglowek "Name" zaczyna sie przy krawedzi tresci, wiec zajmuje
   kolumny kropki, nazwy i licznika podzadan. */
.tl-head .tl-th-name { grid-column: 1 / 4; }

.tl-th {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    color: var(--text-primary);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    white-space: nowrap;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color var(--t-fast);
}
.tl-th:hover { color: var(--accent-primary); }
.tl-th .ic-sort { opacity: 0.55; transition: opacity var(--t-fast), color var(--t-fast); }
.tl-th:hover .ic-sort { opacity: 1; }
.tl-th.is-sorted { color: var(--accent-primary); }
.tl-th.is-sorted .ic-sort { opacity: 1; }

/* Naglowek bez sortowania (Personal List) — ten sam krój, bez afordancji. */
.tl-th.is-static { cursor: default; }
.tl-th.is-static:hover { color: var(--text-primary); }

/* W Figmie NIE MA kolumny "Status" — status niesie kropka w wierszu.
   Sortowanie po statusie nie ma wiec wlasnego naglowka i przenosi sie
   do menu pod przyciskiem "Filters" (patrz .tl-filters .menu). */


/* =====================================================================
   04. WIERSZ ZADANIA I KOMORKI
   ===================================================================== */

/* Figma: naglowek konczy sie na y=82, pierwszy wiersz zaczyna na y=94. */
.tl-rows {
    flex: 1;
    min-height: 0;
    margin-top: var(--panel-pad);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--module-gap);
    padding-bottom: var(--space-2);
}

.tl-row {
    position: relative;
    display: grid;
    grid-template-columns: var(--tl-cols);
    align-items: center;
    height: 32px;
    /* Poziom >= 1: gutter trojkata zjadlo wciecie karty, wiec zostaje sam
       padding tresci (12px). Poziom 0 ma pelne 35px — patrz nizej. */
    padding-left: var(--panel-pad);
    border-radius: var(--radius-md);
    background-color: var(--glaze-3);
    cursor: pointer;
    user-select: none;
    transition: background-image var(--t-fast);
}
.tl-row[data-depth="0"] { padding-left: var(--tl-lead); }

.tl-row::before,
.tl-row::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
}
.tl-row::before { background: var(--glaze-1); mix-blend-mode: color-burn; }
.tl-row::after  { background: var(--glaze-2); mix-blend-mode: plus-lighter; }

@supports not (mix-blend-mode: color-burn) {
    .tl-row {
        background-color: var(--glaze-flat);
        box-shadow: inset 0 0 0 1px var(--glaze-edge);
    }
    .tl-row::before,
    .tl-row::after { display: none; }
}

/* Rozjasnienie hoveru idzie background-image, zeby nie ruszac
   background-color (to warstwa 3 efektu glazed). */
.tl-row:hover {
    background-image: linear-gradient(var(--overlay-hover), var(--overlay-hover));
}

/* --- Trojkat rozwijania (Figma 492:7171, 9x12) ---------------------- */

.tl-toggle {
    position: absolute;
    top: 50%;
    left: 13.5px;                 /* poziom 0: w gutterze wewnatrz karty */
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 9px;
    height: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--t-fast);
}
/* Poziom >= 1: gutter ma juz tylko 12px paddingu, wiec trojkat siada
   w nim tak samo jak na poziomie 0 (1.5px od poczatku gutteru) —
   kolumna kropki nie drgnie, a wciecia ukladaja sie w drabinke. */
.tl-row:not([data-depth="0"]) > .tl-toggle { left: 1.5px; }
.tl-toggle:hover { color: var(--text-primary); }
.tl-toggle .ic-list-toggle { transition: transform var(--t-base) var(--ease); }
.tl-toggle[aria-expanded="true"] .ic-list-toggle { transform: rotate(90deg); }

/* --- Komorki -------------------------------------------------------- */

.tl-cell {
    min-width: 0;
    display: flex;
    align-items: center;
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
}

/* Kropka statusu (Figma 438:3556, 10x10) — jednoczesnie cel edycji
   statusu w miejscu, wiec ma powiekszone pole klikalne. */
.tl-cell-status {
    position: relative;
    justify-content: flex-start;
    /* Sciezka ma 22px, wiersz 32px — kropka stoi dokladnie na x z Figmy,
       a caly prostokat komorki jest celem edycji statusu. */
    height: 100%;
    cursor: pointer;
}

.tl-cell-name {
    font-weight: var(--fw-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: var(--lh-list);
    padding-right: var(--space-2);
}
.tl-cell-name.completed {
    color: var(--text-secondary);
    text-decoration: line-through;
}

/* Licznik podzadan — ikona z Figmy + liczba, wyrownane do prawej. */
.tl-cell-subs {
    justify-content: flex-end;
    gap: 2px;
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* Stos awatarow — Figma: 24x24, radius 6, skok 22px (zachodza o 2px),
   inicjaly Inter Regular 13/18. Bez obwodki, inaczej kafle rozejda sie
   o 4px i kolumna Assignee wyjdzie poza 80px. */
.tl-cell-assignees { justify-content: flex-start; overflow: hidden; }
.tl-cell-assignees .avatar-stack > .avatar {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: var(--radius-md);
    font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font);
}
.tl-cell-assignees .avatar-stack > .avatar + .avatar { margin-left: -2px; }
.tl-cell-assignees .avatar-more {
    height: 24px;
    margin-left: 2px;
    border-radius: var(--radius-md);
    font: var(--fw-regular) var(--fs-list) / 1 var(--font);
}

.tl-cell-empty { color: var(--text-tertiary); }

/* Daty — Figma: pole 65px, Inter Regular 10/14, format DD.MM.RRRR. */
.tl-cell-date {
    width: 65px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Pigulka projektu — Figma 553:3910: 100x16, radius 6, WYPELNIENIE
   kolorem projektu, tekst bialy, dlugie nazwy ucinane wielokropkiem.
   (components.css daje .pill-project wariant obrysowy — na liscie
   zadan projekt jest wypelniony, wiec nadpisujemy punktowo.) */
.tl-project {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--priority-w);
    max-width: 100%;
    height: var(--control-h);
    padding: 0 9px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--pill-color, var(--project-gray));
    color: var(--text-on-accent);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Postep — Figma 553:3840: 100x16, radius 6, obrys w kolorze statusu,
   procent wysrodkowany W SRODKU pigulki. Wypelnienie pokazuje wartosc. */
.tl-progress {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--priority-w);
    max-width: 100%;
    height: var(--control-h);
    border: 1px solid var(--progress-color, var(--status-neutral));
    border-radius: var(--radius-md);
    background: transparent;
    overflow: hidden;
}
.tl-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--progress, 0%);
    background: var(--progress-color, var(--status-neutral));
    opacity: 0.3;
    transition: width var(--t-slow) var(--ease);
}
.tl-progress-value {
    position: relative;
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}


/* =====================================================================
   05. ZAGNIEZDZENIE, ZAZNACZENIE, DRAG & DROP
   ===================================================================== */

/* Karta wiersza wsuwa sie o 23px na kazdy poziom — kolumny za nazwa
   zostaja pod tym samym x, bo 1fr nazwy pochlania roznice. */
.tl-row { margin-left: calc(var(--tl-depth, 0) * var(--tl-indent)); }

.tl-row.selected {
    background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
    box-shadow: inset 0 0 0 1px var(--border-accent);
}

.tl-row.dragging { opacity: 0.45; }
.tl-row.drop-above { box-shadow: inset 0 2px 0 0 var(--accent-primary); }
.tl-row.drop-below { box-shadow: inset 0 -2px 0 0 var(--accent-primary); }
.tl-row.drop-on    { box-shadow: inset 0 0 0 2px var(--accent-primary); }
.tl-row.drop-forbidden { box-shadow: inset 0 0 0 1px var(--status-danger); }


/* =====================================================================
   06. EDYCJA STATUSU W MIEJSCU
   ---------------------------------------------------------------------
   Kropka ma 10px, wiec lista rozwijana nie zmiesci sie w kolumnie —
   wychodzi nad kolumne nazwy, ktora i tak jest pod nia zaslaniana.
   ===================================================================== */

.tl-cell-status .tl-status-select {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-sticky);
    width: 150px;
    height: 22px;
    min-height: 22px;
    padding: 0 var(--space-1);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
}


/* =====================================================================
   07. STANY PUSTE
   ===================================================================== */

.tl-empty,
.pl-empty {
    padding: var(--space-6) var(--panel-pad);
    color: var(--text-secondary);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    text-align: center;
}


/* =====================================================================
   08. PERSONAL LIST — KOLUMNA KART Z FIGMY
   ---------------------------------------------------------------------
   Figma 496:5246: kolumna 319px przy lewej krawedzi tresci, karta
   "Tasks by Status" 319x170 na y=40, "Recent Messages" 319x378 na
   y=214 (odstep 4 = --module-gap). Prawa czesc okna zostala w projekcie
   pusta — trafia tam wlasciwa lista osobista, zeby CRUD nie zniknal.
   ===================================================================== */

.pl-body {
    display: flex;
    gap: var(--module-gap);
    flex: 1;
    min-height: 0;
}

.pl-side {
    display: flex;
    flex-direction: column;
    gap: var(--module-gap);
    width: 319px;
    flex-shrink: 0;
    min-height: 0;
}

.pl-main {
    display: flex;
    flex-direction: column;
    gap: var(--panel-pad);
    flex: 1;
    min-width: 0;
    min-height: 0;
}

/* Naglowek karty — Figma: tytul na (8.5, 8), Inter Medium 10/14,
   bez linii podzialu (eksport naklada na karte pusta grupe SVG). */
.pl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-2) 9px;
    border-radius: var(--radius-md);
    min-height: 0;
}
.pl-card-title {
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
    flex-shrink: 0;
}


/* =====================================================================
   09. PERSONAL LIST — WYKRES "TASKS BY STATUS"  (Figma 443:2697)
   ---------------------------------------------------------------------
   Karta 319x170. Pierscien i legenda zaczynaja sie na y=54.
   Pierscien: pole 94x94 na x=9. Szary okrag r=46, obrys 2 (wszystkie
   zadania). Wycinki: promien srodkowy 35.6244, grubosc 12.5674 —
   liczby wprost z eksportu (94x94 i 83.7826x83.7827 z ta sama osia).
   Legenda na x=121: [kropka 10][9][etykieta][16][liczba 30 do prawej]
   [16][procent 32 do prawej].
   ===================================================================== */

.pl-tbs { height: 170px; flex-shrink: 0; }

.pl-tbs-body {
    display: flex;
    align-items: flex-start;
    gap: 18px;              /* 121 - (9 + 94) = 18 */
    /* Tytul konczy sie na y=22 (8 padding + 14 wiersz), blok od y=54. */
    margin-top: var(--space-7);
    flex: 1;
    min-height: 0;
}

.pl-donut {
    width: 94px;
    height: 94px;
    flex-shrink: 0;
}
.pl-donut svg { display: block; width: 94px; height: 94px; }
.pl-donut-track { stroke: var(--status-neutral); }
.pl-donut-seg   { transition: stroke-dasharray var(--t-slow) var(--ease); }
.pl-donut-seg.s-not-started { stroke: var(--status-info); }
.pl-donut-seg.s-in-progress { stroke: var(--status-warning); }
.pl-donut-seg.s-overdue     { stroke: var(--status-danger); }
.pl-donut-seg.s-completed   { stroke: var(--status-success); }

.pl-legend {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    min-width: 0;
}
.pl-legend-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: opacity var(--t-fast);
}
.pl-legend-row:hover { opacity: 0.75; }
.pl-legend-row.is-muted { opacity: 0.4; }
.pl-legend-name {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 95px;
    flex-shrink: 0;
    min-width: 0;
}
.pl-legend-name span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pl-legend-count { width: 30px; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pl-legend-pct   { width: 32px; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; }


/* =====================================================================
   10. PERSONAL LIST — "RECENT MESSAGES"  (Figma 449:3233)
   ---------------------------------------------------------------------
   Karta 319x378. Lista od y=54, szerokosc 301, wiersz 32px, odstep 16,
   miedzy wierszami separator 2px (w Figmie to pasek w tym samym stylu
   glazed co karta). Wiersz: avatar 32x32 radius 6 | nazwa Inter Medium
   10/14 + rola Inter Regular 7/14 | podglad Inter Regular 10/14 szary |
   po prawej godzina 10/14 szara i odznaka powiadomienia 13px.
   ===================================================================== */

.pl-rm { flex: 1; min-height: 0; }

/* Nota o braku archiwum + lista: 8 (padding) + 14 (tytul) + 10 + 14 (nota)
   + 8 = 54, czyli linia startu listy z Figmy zostaje nietknieta. */
.pl-rm-note {
    margin-top: 10px;
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
}

.pl-rm-list {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-2);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.pl-rm-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-2);
    height: 32px;
    flex-shrink: 0;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
}
.pl-rm-row .avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
    border: 0;
    border-radius: var(--radius-md);
    font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font);
}

/* Nazwa i podglad to dwie linie (Figma: y=2 i y=16 wewnatrz wiersza 32px),
   wiec musza byc blokami — inaczej spany splynelyby w jedna linie. */
.pl-rm-text { display: block; min-width: 0; }
.pl-rm-name {
    display: block;
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pl-rm-role {
    font: var(--fw-regular) var(--fs-badge) / var(--lh-badge) var(--font);
    color: var(--text-primary);
}
.pl-rm-preview {
    display: block;
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-rm-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    height: var(--avatar-size);
    flex-shrink: 0;
}
.pl-rm-time {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    white-space: nowrap;
}
.pl-rm-badge-slot { height: 13px; }

/* Separator 2px miedzy wierszami — w Figmie odstep 16 z paskiem
   posrodku, wiec 7px marginesu z kazdej strony. */
.pl-rm-sep {
    height: 2px;
    margin: 7px 0;
    flex-shrink: 0;
    background-color: var(--glaze-3);
}
@supports not (mix-blend-mode: color-burn) {
    .pl-rm-sep { background-color: var(--glaze-flat); }
}


/* =====================================================================
   11. PERSONAL LIST — LISTA POZYCJI
   ---------------------------------------------------------------------
   Ten sam jezyk co Task List: wiersz 32px, radius 6, glazed, siatka
   z jedna definicja kolumn. Kubelki Today / This Week / Later zostaja
   (bucketowanie 1:1 z Qt) — dostaja tylko naglowek w stylu naglowka
   kolumn z Figmy.
   ===================================================================== */

.pl-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;

    /* dot | tytul | projekt | data | notatki */
    --pl-cols: 22px minmax(80px, 1.4fr) 112px 77px minmax(0, 1fr);
}

.pl-head {
    display: grid;
    grid-template-columns: var(--pl-cols);
    align-items: center;
    height: var(--lh-list);
    flex-shrink: 0;
}
.pl-head .tl-th-name { grid-column: 1 / 3; }

.pl-rows {
    flex: 1;
    min-height: 0;
    margin-top: var(--panel-pad);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--module-gap);
    padding-bottom: var(--space-2);
}

.pl-bucket {
    display: flex;
    flex-direction: column;
    gap: var(--module-gap);
}
.pl-bucket + .pl-bucket { margin-top: var(--panel-pad); }

.pl-bucket-head {
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    padding-bottom: 2px;
}

.pl-row {
    position: relative;
    display: grid;
    grid-template-columns: var(--pl-cols);
    align-items: center;
    height: 32px;
    padding: 0 var(--panel-pad);
    border-radius: var(--radius-md);
    background-color: var(--glaze-3);
    cursor: pointer;
    user-select: none;
}
.pl-row::before,
.pl-row::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
}
.pl-row::before { background: var(--glaze-1); mix-blend-mode: color-burn; }
.pl-row::after  { background: var(--glaze-2); mix-blend-mode: plus-lighter; }

@supports not (mix-blend-mode: color-burn) {
    .pl-row {
        background-color: var(--glaze-flat);
        box-shadow: inset 0 0 0 1px var(--glaze-edge);
    }
    .pl-row::before,
    .pl-row::after { display: none; }
}

.pl-row:hover { background-image: linear-gradient(var(--overlay-hover), var(--overlay-hover)); }
.pl-row.selected {
    background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
    box-shadow: inset 0 0 0 1px var(--border-accent);
}

.pl-row .tl-cell-name { font-weight: var(--fw-medium); }
.pl-cell-notes {
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pl-cell-date.overdue { color: var(--status-danger-fg); }


/* =====================================================================
   12. KOMENTARZE ZADANIA (dialog edycji, parts/task_comments.js)
   ===================================================================== */

.comments-loading,
.comments-empty,
.comments-error {
    padding: var(--panel-pad);
    color: var(--text-secondary);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    text-align: center;
}
.comments-error { color: var(--status-danger-fg); }

.comments-list {
    display: flex;
    flex-direction: column;
    gap: var(--module-gap);
}

.comment-row {
    position: relative;
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) 9px;
    border-radius: var(--radius-md);
    background-color: var(--glaze-3);
}
.comment-row::before,
.comment-row::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
}
.comment-row::before { background: var(--glaze-1); mix-blend-mode: color-burn; }
.comment-row::after  { background: var(--glaze-2); mix-blend-mode: plus-lighter; }

@supports not (mix-blend-mode: color-burn) {
    .comment-row {
        background-color: var(--glaze-flat);
        box-shadow: inset 0 0 0 1px var(--glaze-edge);
    }
    .comment-row::before,
    .comment-row::after { display: none; }
}

.comment-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--avatar-6);
    color: var(--text-on-accent);
    font: var(--fw-regular) var(--fs-list) / 1 var(--font);
}

.comment-body { flex: 1; min-width: 0; }
.comment-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 2px;
}
.comment-name { font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font); color: var(--text-primary); }
.comment-time { font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font); color: var(--text-secondary); }
.comment-actions { margin-left: auto; display: flex; gap: var(--space-1); }

.comment-edit-btn,
.comment-delete-btn {
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    transition: color var(--t-fast), background var(--t-fast);
}
.comment-edit-btn:hover   { color: var(--text-primary); background: var(--overlay-hover); }
.comment-delete-btn:hover { color: var(--status-danger-fg); background: var(--overlay-hover); }

.comment-content {
    font: var(--fw-regular) var(--fs-list) / 1.5 var(--font);
    color: var(--text-bright);
    white-space: pre-wrap;
    word-break: break-word;
}

.comments-editor {
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.comment-input {
    width: 100%;
    min-height: 50px;
    padding: var(--space-2) 9px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
    font: var(--fw-regular) var(--fs-list) / 1.5 var(--font);
    resize: vertical;
    outline: none;
}
.comment-input:focus { border-color: var(--border-accent); }
.comments-editor-actions { display: flex; justify-content: flex-end; gap: var(--space-1); }
.comments-editor-actions .btn-add,
.comments-editor-actions .btn-edit { min-width: 70px; }

.comment-inline-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-1);
}


/* =====================================================================
   13. ZGODNOSC: STARY SZKIELET .list-*
   ---------------------------------------------------------------------
   Te klasy sa w manifescie przypisane do screen-tasks.css, ale uzywaja
   ich takze ekrany innych agentow (brands, products, gantt, board,
   calendar, projects, home). Zostaja tu jako neutralny szkielet paska
   narzedzi w nowym jezyku wizualnym — bez zalozen o konkretnym ekranie.
   Po migracji tamtych ekranow na wlasne klasy mozna je usunac.
   ===================================================================== */

.list-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: var(--panel-pad);
    gap: var(--panel-pad);
    overflow: hidden;
}

.list-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.list-toolbar-header {
    display: flex;
    align-items: center;
    gap: var(--panel-pad);
    min-height: var(--control-h);
    flex-shrink: 0;
}

.list-title {
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
}

.list-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    flex-shrink: 0;
}

.list-toolbar-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--panel-pad);
    flex-shrink: 0;
}

.list-empty {
    padding: var(--space-6) var(--panel-pad);
    color: var(--text-secondary);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    text-align: center;
}


/* =====================================================================
   14. ZWEZANIE — ZAPYTANIA O KONTENER
   ---------------------------------------------------------------------
   O szerokosci tych ekranow decyduje NIE okno przegladarki, tylko szeroko
   sc okna tresci: rail (44/182) i lewy panel (236) mozna zwijac niezalezn
   ie od viewportu. Dlatego progi liczymy od kontenera, a nie od @media.

   Kolumny gasna od konca — najpierw to, co w Figmie jest najbardziej
   pomocnicze (postep, projekt), potem daty, przypisani i termin.
   WAZNE: trzy pierwsze sciezki (kropka, nazwa, licznik podzadan) zostaja
   ZAWSZE, bo naglowek "Name" rozciaga sie przez nie (grid-column 1/4).
   Gdyby zgasla ktoras z nich, liczba komorek rozminelaby sie z liczba
   sciezek i siatka utworzylaby kolumne domyslna.

   Progi wynikaja z arytmetyki siatki: gutter 35 + stale kolumny 625
   + minimum nazwy. Po zgaszeniu kolumny suma stalych spada o jej
   szerokosc, wiec kolejny prog jest odpowiednio nizej.
   ===================================================================== */

.tasklist,
.plist {
    container-type: inline-size;
    container-name: screen;
}

.pl-main {
    container-type: inline-size;
    container-name: plmain;
}

@container screen (max-width: 900px) {
    .tl-table { --tl-cols: 22px minmax(80px, 1fr) 28px 80px 125px 77px 77px 112px; }
    .tl-col-progress { display: none; }
}

@container screen (max-width: 760px) {
    .tl-table { --tl-cols: 22px minmax(80px, 1fr) 28px 80px 125px 77px 77px; }
    .tl-col-project { display: none; }
}

@container screen (max-width: 700px) {
    /* Kolumna kart z Figmy przestaje sie miescic obok listy. */
    .pl-body { flex-direction: column; }
    .pl-side { width: 100%; }
    .pl-rm { min-height: 240px; }
}

@container screen (max-width: 620px) {
    .tl-table { --tl-cols: 22px minmax(80px, 1fr) 28px 80px 125px 77px; }
    .tl-col-start { display: none; }

    .tl-toolbar { flex-wrap: wrap; height: auto; }
    .tl-actions { margin-left: 0; }
    .tl-search { width: 100%; }
}

@container screen (max-width: 500px) {
    .tl-table { --tl-cols: 22px minmax(80px, 1fr) 28px 125px 77px; }
    .tl-col-assignees { display: none; }
}

@container screen (max-width: 380px) {
    .tl-table { --tl-cols: 22px minmax(80px, 1fr) 28px 125px; }
    .tl-col-due { display: none; }
}

/* Lista osobista ma wlasny kontener — jej szerokosc zalezy jeszcze od
   tego, czy kolumna kart stoi obok, czy nad nia. */
@container plmain (max-width: 620px) {
    .pl-list { --pl-cols: 22px minmax(80px, 1.4fr) 112px 77px; }
    .pl-col-notes { display: none; }
}

@container plmain (max-width: 420px) {
    .pl-list { --pl-cols: 22px minmax(80px, 1fr) 77px; }
    .pl-col-project { display: none; }
}