/* Treści: tylko to, czego nie ma w klockach z app.css (siatka tygodnia, lejek na 7 etapów, karta rolki). */

/* Nagłówek: na telefonie widoki pod tytułem, w jednym rzędzie */
.tydzien-nav { display: flex; align-items: center; gap: 4px; }
.tydzien-etykieta { min-width: 9ch; text-align: center; font-size: 13.5px; font-weight: 500; color: var(--muted); }

/* Karta rolki (tydzień i lejek) */
.tk-karta { padding-top: 9px; padding-bottom: 9px; }
.tk-karta .zadanie-tresc { min-width: 0; }
.tk-karta .zadanie-tytul { padding-right: 22px; font-size: 13.5px; line-height: 1.35; }
.tk-karta .tk-rzad { flex-wrap: nowrap; gap: 8px; margin-top: 5px; }
.tk-karta .tk-rzad + .tk-rzad { margin-top: 1px; }
.tk-karta .tk-rzad > * { min-width: 0; }
.tk-karta .tk-rzad > .tag { align-items: flex-start; white-space: normal; line-height: 16px; overflow-wrap: anywhere; } /* długa nazwa zawija się pod kropką, nie ucina */
.tk-karta .tk-rzad > .tag::before { margin-top: 5px; }
.tk-gora { display: flex; align-items: center; gap: 8px; min-height: 18px; margin-bottom: 2px; padding-right: 22px; }
.tk-czas { display: inline-flex; flex: none; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); }
.tk-czas .i { width: 12px; height: 12px; }
.tk-gora:has(.karta-godz:empty):not(:has(.tr-data)) { display: none; }
.tr-data { display: inline-flex; align-items: center; gap: 4px; }
.tr-data .termin { display: inline-flex; align-items: center; gap: 4px; }
.tk-stopka { display: flex; align-items: center; gap: 2px; margin-top: 6px; }
.tr-platforma { padding: 0 5px; }
.tr-platforma .i { width: 12px; height: 12px; }
.tk-stopka .tr-platforma { padding: 0; width: 20px; justify-content: center; }
.tk-karta .czerwony { color: var(--red); }
.tk-osoba { margin-left: auto; }
.tk-stopka .tk-osoba { width: 22px; height: 22px; font-size: 10px; }
.tk-karta.wyciszona { opacity: .78; }
.tk-karta.wyciszona .zadanie-tytul { color: var(--muted); }
.tk-karta .tk-menu { position: absolute; top: 3px; right: 3px; z-index: 2; }
.tk-karta .tk-menu > summary { width: 26px; height: 26px; opacity: 0; transition: opacity .12s, background .15s; }
.tk-karta:hover .tk-menu > summary, .tk-karta:focus-within .tk-menu > summary, .tk-karta .tk-menu[open] > summary { opacity: 1; }
@media (hover: none) { .tk-karta .tk-menu > summary { opacity: 1; } }

/* Tydzień: 7 kolumn pon–nd */
.tydzien { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: start; margin-bottom: 28px; }
.dzien { min-height: 132px; padding: 2px 4px 8px; border: 1px solid var(--line); border-radius: 12px; transition: background .15s, border-color .15s; }
.dzien.dzis { border-color: rgba(168, 85, 247, 0.5); background: rgba(168, 85, 247, 0.05); }
.dzien.nad, .bez-daty.nad { background: var(--accent-soft); border-color: rgba(168, 85, 247, 0.5); }
.dzien-nag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 0; padding: 7px 6px 8px; font: 500 12.5px var(--font); color: var(--faint); text-transform: lowercase; }
.dzien-numer { font: 600 15px var(--font-head); color: var(--text); }
.tr-dzis { text-transform: none; font-size: 11px; line-height: 17px; align-self: center; }
.dzien-ile { margin-left: auto; font: 500 11.5px var(--font); color: var(--faint); text-transform: none; font-variant-numeric: tabular-nums; }
.dzien-ile:empty { display: none; }
.dzien .tk-karta { padding-left: 9px; padding-right: 9px; }
.dzien-karty { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; } /* bez minmax długi tag rozpychał kartę na sąsiedni dzień */

/* Szuflada „Bez daty” (panel z nagłówkiem, zwijana) */
.bez-daty { margin: 0 0 18px; padding-bottom: 12px; transition: background .15s, border-color .15s; }
.bez-daty > summary { list-style: none; cursor: pointer; }
.bez-daty > summary::-webkit-details-marker { display: none; }
.bez-daty > summary .panel-nag { margin: 0 0 8px; }
.bez-daty > summary .panel-nag::after { content: ""; width: 6px; height: 6px; margin: 0 4px 0 auto; border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint); transform: rotate(-45deg); transition: transform .15s; }
.bez-daty[open] > summary .panel-nag::after { transform: rotate(45deg); }
.bez-daty:not([open]) > summary .panel-nag { margin-bottom: 0; }
.bez-daty-karty { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); max-height: 340px; overflow-y: auto; }
.bez-daty-pusto { display: none; margin: 0; }
.bez-daty.pusta .bez-daty-pusto { display: flex; }
.bez-daty.pusta .bez-daty-karty { display: none; }

/* Lejek: 7 etapów, przewijany w poziomie */
.tablica.lejek { grid-template-columns: repeat(7, minmax(215px, 1fr)); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; margin: 0 -8px; }
.lejek .kolumna { scroll-snap-align: start; }
.tr-kolumna { border-radius: 12px; }
.tr-kolumna.nad { background: var(--accent-soft); }
.tr-kol-nag { display: flex; align-items: center; justify-content: space-between; padding: 8px 6px 6px !important; margin-bottom: 4px; }
.tr-kol-nag .tag { font-size: 12.5px; line-height: 22px; }
.tr-kol-nag .licznik { padding: 0 7px; border-radius: 999px; background: var(--chip); color: var(--muted); line-height: 20px; }
.lejek .kolumna-karty { min-height: 96px; }

/* Pomysły i archiwum */
.tk-maly { padding: 6px 12px; font-size: 13px; }
.pomysly .rzad form { flex: none; }
.tr-fakt { display: inline-flex; align-items: center; gap: 4px; }
.tr-fakt .i { width: 13px; height: 13px; }
.tr-fakt.czerwony { color: var(--red); }
.tr-osoba { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.tr-osoba .i { color: var(--faint); }
.tr-tabela-panel .tabela-wrap { margin: 0 -8px; }
.tr-tabela-panel .tabela th { background: var(--surface); }
.tr-tabela-panel .tabela tr:last-child td { border-bottom: 0; }
.tr-pod { display: flex; align-items: center; gap: 6px; }
.tr-pod .i { color: var(--faint); flex: none; }
.tr-wroc { display: inline-flex; align-items: center; gap: 6px; }
.pomysly .panel:last-child { margin-bottom: 0; }

/* Kolorowa kropka opcji (seria, etap) w pigułkach i menu */
.tr-kropka { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--k, #a1a1aa); }

/* Szczegół */
.tresc-akcje { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.tresc-akcje .przycisk { padding: 7px 14px; }
.tresc-akcje .menu-akcji-lista { right: auto; left: 0; min-width: 240px; }
.tk-platformy { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 34px; }
.edytor.krotki { min-height: 88px; }
.tresc-szczegol .panel { margin-bottom: 14px; }
.tresc-szczegol .panel .wlasciwosci { margin: 4px 0 6px; }
.tresc-szczegol .check .i { width: 15px; height: 15px; }
.tr-prawo { margin-left: auto; }
.tr-autor { display: flex; align-items: center; gap: 6px; }
.tk-kopiuj { display: inline-flex; align-items: center; gap: 6px; }
.wl-wartosc > input.num { font-variant-numeric: tabular-nums; }
.po-publikacji > summary { cursor: pointer; list-style: none; }
.po-publikacji > summary::-webkit-details-marker { display: none; }
.po-publikacji > summary .panel-nag { margin-bottom: 0; }
.po-publikacji[open] > summary .panel-nag { margin-bottom: 8px; }
.po-publikacji > summary .panel-nag::after { content: ""; width: 6px; height: 6px; margin: 0 4px 0 auto; border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint); transform: rotate(-45deg); transition: transform .15s; }
.po-publikacji[open] > summary .panel-nag::after { transform: rotate(45deg); }

/* Tablet: tydzień przewija się w bok */
@media (max-width: 1100px) {
  .tydzien { grid-template-columns: repeat(7, minmax(158px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
  .tablica.lejek { grid-template-columns: repeat(7, minmax(250px, 78vw)); scroll-snap-type: x mandatory; }
}

/* Telefon: dni jedna pod drugą, puste dni to sam nagłówek */
@media (max-width: 760px) {
  .tresci .naglowek { flex-direction: column; align-items: stretch; gap: 14px; }
  .tresci .zdanie { max-width: none; }
  .tresci .widoki { display: flex; overflow-x: auto; }
  .tresci .widoki a { flex: 1; justify-content: center; min-height: 44px; }  /* cel dotyku: zakładki to jedyna droga do widoków (Z3) */
  .tydzien { grid-template-columns: 1fr; overflow: visible; gap: 6px; }
  .dzien { min-height: 0; }
  .dzien-nag { padding: 8px 6px; }
  .dzien.pusty .dzien-karty { display: none; }
  .dzien.pusty { border-color: transparent; padding-bottom: 0; }
  .dzien.pusty .dzien-nag { padding-bottom: 4px; }
  .bez-daty-karty { grid-template-columns: 1fr; max-height: none; }
  .tresc-akcje .przycisk { flex: 1 1 auto; }
  .tydzien-nav { margin-left: auto; }
  .tresc-szczegol .tytul-edytuj { font-size: 20px !important; text-overflow: ellipsis; }
  .wl-wartosc > input[type=datetime-local] { min-width: 0; }
}

/* Wąski telefon: pięć zakładek (z „Wyniki”) mieści się bez przewijania w bok, kosztem ikon */
@media (max-width: 480px) {
  .tresci .widoki a { padding-inline: 8px; gap: 0; }
  .tresci .widoki a .i { display: none; }
}

/* Cele dotyku ≥44 px (Z22). Pole „Nowy pomysł zdaniem”: input rozciągnięty na całą pigułkę, nie 24 px w środku.
   „Bez daty” i „Wróć do treści” rosną naprawdę. Ikony 32 px (strzałki tygodnia, „Więcej”) i zakładki: na telefonie i
   dotyku mają 44 px, na myszy zostają z wyglądu, a pole kliknięcia sięga 44 px niewidzialną nakładką. */
.tresci .zap-pole input.zap-q { align-self: stretch; }
.tresci .bez-daty > summary { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
.tresci .tr-wroc { min-height: 44px; }
.tresci form.nowe .nowe-tytul { min-height: 44px; }
.tresci .pasek-narzedzi .ikona-btn, .tresci .tydzien-nav .ikona-btn { position: relative; }
.tresci .pasek-narzedzi .ikona-btn::after, .tresci .tydzien-nav .ikona-btn::after { content: ""; position: absolute; inset: -7px; }
@media (min-width: 761px) and (pointer: fine) {
  .tresci .widoki a, .tresci .pigulka { position: relative; }
  .tresci .widoki a::after { content: ""; position: absolute; inset: -8px 0; }
  .tresci .pigulka::after { content: ""; position: absolute; inset: -6px 0; }
}
@media (max-width: 760px), (pointer: coarse) {
  .tresci .pasek-narzedzi .ikona-btn, .tresci .tydzien-nav .ikona-btn { width: 44px; height: 44px; }
  .tresci .pasek-narzedzi .ikona-btn::after, .tresci .tydzien-nav .ikona-btn::after { content: none; }
}