/* ============================================================================
   27-powiadomienia.css — dzwonek = powiadomienia (B8a, 27.09.2026) i „Mój pulpit” (B8b)
   ----------------------------------------------------------------------------
   Okno dzwonka: sekcja „Powiadomienia” (nowe na górze, jasne tło i kropka) i pod nią dotychczasowe
   „Przypomnienia” (klasy .reminder-* z arkusza przypomnień). Ikona w kółku w kolorze rodzaju powiadomienia.
   Telefon: te same reguły (okno zajmuje cały ekran — 9-telefon/2-okna.css), wiersz ma min. 56 px.
   ============================================================================ */
.pow-okno { display: flex; flex-direction: column; gap: var(--s-4); }
.pow-sekcja { display: flex; flex-direction: column; gap: var(--s-2); }
.pow-glowa { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.pow-glowa h3 { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--t-md); font-weight: var(--w-bold); }
.pow-licznik { min-width: var(--s-5); padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--danger); color: var(--text-invert); font-size: var(--t-xs); text-align: center; }
.pow-lista { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pow-otworz { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--s-3); width: 100%; min-height: 56px; padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.pow-otworz:hover { background: var(--surface-2); }
.pow-wiersz.is-nowe .pow-otworz { background: var(--accent-soft); }
.pow-wiersz.is-nowe .pow-tytul::before { content: ""; display: inline-block; width: var(--s-2); height: var(--s-2); margin-right: var(--s-2); border-radius: var(--r-pill); background: var(--accent); vertical-align: 1px; }
.pow-ikona { --pow-ton: var(--accent); display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--pow-ton) 16%, var(--surface)); color: color-mix(in srgb, var(--pow-ton) 75%, var(--text)); }
.pow-ikona[data-rodzaj="po-terminie"] { --pow-ton: var(--danger); }
.pow-ikona[data-rodzaj="termin"] { --pow-ton: var(--warn-strong); }
.pow-ikona:is([data-rodzaj="gotowe"], [data-rodzaj="odhaczone"]) { --pow-ton: var(--ok); }
.pow-ikona[data-rodzaj="design"] { --pow-ton: var(--etap-design); }
.pow-ikona:is([data-rodzaj="cena"], [data-rodzaj="oferta"]) { --pow-ton: var(--etap-konsultacje); }
.pow-tresc { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pow-tytul { font-weight: var(--w-medium); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.pow-wiersz.is-nowe .pow-tytul { font-weight: var(--w-bold); }
.pow-opis { color: var(--text-muted); font-size: var(--t-sm); overflow-wrap: anywhere; }
.pow-kiedy { color: var(--text-muted); font-size: var(--t-xs); white-space: nowrap; }
/* POPR-n14: projekt w każdym wierszu i grupa zbiorcza („Po terminie: 29 zadań”) z rozwinięciem. */
.pow-projekt { color: var(--text); font-size: var(--t-sm); font-weight: var(--w-medium); overflow-wrap: anywhere; }
.pow-grupa-strzalka { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--accent-strong); font-weight: var(--w-bold); }
.pow-grupa-strzalka .icon { transition: transform var(--szybko); }
.pow-grupa.is-open .pow-grupa-strzalka .icon { transform: rotate(180deg); }
.pow-grupa-lista { margin: 2px 0 var(--s-2) var(--s-6); padding-left: var(--s-2); border-left: 1px solid var(--line); }
.pow-pusto { margin: 0; padding: var(--s-3); font-size: var(--t-sm); }
.pow-wiecej { align-self: flex-start; }

/* === KÓŁKO ODHACZENIA (B8b, wygląd z dawnego „Mojego pulpitu”) =====================================
   Używa go lista Zadań (zadania-projektu.js: .mp-odhacz.todo-odhacz, 15-zadania.css). v15 PU2: panele „Mojego pulpitu”
   (skróty, Moje zadania, wiadomości, Moje projekty, kafle działu) zeszły — Pulpit to jedna lista, dom: 16b-pulpit.css. */
.mp-odhacz { display: inline-grid; flex: none; place-items: center; width: 28px; height: 28px; border: 2px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: transparent; cursor: pointer; }
.mp-odhacz:hover { border-color: var(--ok); color: var(--ok); }