/* public/css/sceny/grupa.css — scena „grupa” (/dzial-prawny #jeden-rejestr, silnik public/js/sceny.js, spec §7.8).
   Sześć warstw na jednym placu: rozsypane pisma spółek → rejestr spraw grupy → kartoteka I C 218/26 → kalendarz 14 dni
   → zadania z osobami → raport dla zarządu. Stan z HTML+CSS = scena 6 (raport); warstwy 1–5 są tu ukryte, a oś
   (public/js/sceny/grupa.js) tylko je odsłania i chowa. Wymiary w cqi z dolnym progiem px; dwa układy: plac 4:3 i ≤ 720 px 4:5.
   Selektory tylko z przedrostkiem .sc-grupa; ruch wyłącznie z osi (transform/opacity/filter/stroke-dashoffset). */

.sc-grupa {
  --sc-grupa-f1: var(--accent);
  --sc-grupa-f2: #7cc4fa;
  --sc-grupa-f3: var(--n-ok);
  --sc-grupa-f4: #c4b5fd;
  --sc-grupa-pelne: linear-gradient(180deg, var(--n-tlo3), var(--n-tlo2));
}
.sc-grupa .sc-grupa-f1 { --sc-grupa-kolor: var(--sc-grupa-f1); }
.sc-grupa .sc-grupa-f2 { --sc-grupa-kolor: var(--sc-grupa-f2); }
.sc-grupa .sc-grupa-f3 { --sc-grupa-kolor: var(--sc-grupa-f3); }
.sc-grupa .sc-grupa-f4 { --sc-grupa-kolor: var(--sc-grupa-f4); }

/* warstwy 1–5 ukryte w stanie końcowym (bez JS i przy ograniczonym ruchu widać tylko raport) */
.sc-grupa-chaos, .sc-grupa-rejestr, .sc-grupa-kartoteka, .sc-grupa-kalendarz, .sc-grupa-zadania { opacity: 0; visibility: hidden; }
.sc-grupa .sc-grupa-nowe { opacity: 0; visibility: hidden; }

.sc-grupa-wiersze, .sc-grupa-pola, .sc-grupa-tydzien, .sc-grupa-dni, .sc-grupa-legenda, .sc-grupa-kafle, .sc-grupa-wiecej { margin: 0; padding: 0; list-style: none; }
.sc-grupa .sc-tytul { margin-top: 0.4cqi; }

/* nagłówek panelu: opis + tytuł po lewej, licznik / chip po prawej */
.sc-grupa-naglowek { display: flex; align-items: flex-start; justify-content: space-between; gap: 2cqi; }
.sc-grupa-naglowek > span:first-child { min-width: 0; }
.sc-grupa-naglowek .sc-chip { flex: none; white-space: nowrap; }
.sc-grupa-naglowek b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* nazwa spółki z kropką w jej kolorze */
.sc-grupa-firma {
  display: inline-flex; align-items: center; gap: 0.9cqi; min-width: 0; max-width: 100%;
  font-size: max(12px, 1.7cqi); color: var(--n-tekst); white-space: nowrap;
}
.sc-grupa-firma::before {
  content: ""; flex: none; width: max(7px, 1.1cqi); aspect-ratio: 1; border-radius: 50%;
  background: var(--sc-grupa-kolor); box-shadow: 0 0 1.2cqi var(--sc-grupa-kolor);
}

/* ——— 1 · rozsypane pisma ——— */
.sc-grupa-chaos { inset: 0; z-index: 5; pointer-events: none; }
.sc-grupa-karta {
  position: absolute; width: 27cqi; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: 0.9cqi 1.4cqi; padding: 1.7cqi 1.9cqi; background: var(--sc-grupa-pelne);
}
.sc-grupa-karta .sc-mono { min-width: 0; font-size: max(10px, 1.3cqi); letter-spacing: 0.06em; line-height: 1.3; }
.sc-grupa-karta-tytul { grid-column: 1 / -1; font-family: var(--fd); font-weight: 600; font-size: max(14px, 2.15cqi); line-height: 1.15; color: #fff; }
.sc-grupa-karta .sc-grupa-firma {
  grid-column: 1 / -1; justify-self: start; padding: 0.5cqi 1.2cqi; border: 1px solid var(--n-brzeg); border-radius: 99px;
  font-size: max(11px, 1.5cqi);
}
.sc-grupa-ikona {
  position: relative; display: grid; place-items: center; width: max(26px, 4.4cqi); aspect-ratio: 1; border-radius: 50%;
  background: rgba(244, 122, 32, 0.14); border: 1px solid rgba(244, 122, 32, 0.45);
}
.sc-grupa-ikona svg { width: 56%; height: 56%; fill: none; stroke: var(--accent-l); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sc-grupa-fala { position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--accent-l); opacity: 0; }
.sc-grupa-karta[data-do="1"] { left: 5%; top: 9%; }
.sc-grupa-karta[data-do="2"] { left: 37%; top: 4%; }
.sc-grupa-karta[data-do="3"] { left: 68%; top: 12%; }
.sc-grupa-karta[data-do="4"] { left: 8%; top: 52%; }
.sc-grupa-karta[data-do="5"] { left: 39%; top: 58%; }
.sc-grupa-karta[data-do="6"] { left: 69%; top: 51%; }

/* ——— 2 · rejestr spraw grupy ——— */
.sc-grupa-rejestr { left: 5%; top: 11%; width: 90cqi; padding: 2.4cqi 2.6cqi 1.6cqi; background: var(--sc-grupa-pelne); }
.sc-grupa-siatka {
  display: grid; align-items: center; gap: 1.4cqi;
  grid-template-columns: max(128px, 21cqi) minmax(0, 1fr) max(104px, 18cqi) max(40px, 7cqi);
  padding: 0 1.4cqi;
}
.sc-grupa-glowka { margin-top: 2cqi; padding-bottom: 1cqi; font-family: var(--fm); font-size: max(10px, 1.25cqi); letter-spacing: 0.1em; text-transform: uppercase; color: var(--n-szary); }
.sc-grupa-glowka span:last-child, .sc-grupa-termin { text-align: right; }
.sc-grupa-wiersz { position: relative; height: max(34px, 6.4cqi); border-top: 1px solid var(--n-brzeg); font-size: max(12px, 1.7cqi); }
.sc-grupa-wiersz > span { position: relative; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-grupa-wiersz > .sc-grupa-wybor, .sc-grupa-wiersz > .sc-grupa-blysk { position: absolute; inset: 0; pointer-events: none; }
.sc-grupa-sygn { font-family: var(--fm); font-weight: 500; font-size: max(11px, 1.5cqi); color: #fff; }
.sc-grupa-sygn.sc-grupa-bez { color: var(--n-szary); font-weight: 400; }
.sc-grupa-sprawa { color: var(--n-tekst); }
.sc-grupa-termin { font-family: var(--fm); font-size: max(11px, 1.5cqi); color: var(--accent-l); font-variant-numeric: tabular-nums; }
.sc-grupa-blysk { opacity: 0; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(244, 122, 32, 0), rgba(244, 122, 32, 0.32) 70%, rgba(255, 154, 60, 0.6)); }
.sc-grupa-wybor { opacity: 0; border-radius: 1cqi; border: 1px solid var(--accent); background: rgba(244, 122, 32, 0.1); box-shadow: 0 0 2.4cqi var(--n-blask); }
.sc-grupa-wiecej { display: none; }

/* ——— 3 · kartoteka sprawy ——— */
.sc-grupa-kartoteka {
  left: 39%; top: 41%; width: 56cqi; z-index: 3; padding: 2.2cqi 2.6cqi; background: var(--sc-grupa-pelne);
  border-color: rgba(244, 122, 32, 0.5); box-shadow: 0 2cqi 6cqi rgba(0, 0, 0, 0.6), 0 0 4cqi rgba(244, 122, 32, 0.18);
}
.sc-grupa-strony { display: block; margin-top: 0.4cqi; color: var(--n-szary); font-size: max(12px, 1.7cqi); }
.sc-grupa-pola { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4cqi 2cqi; margin-top: 1.8cqi; }
.sc-grupa-pola > div { min-width: 0; padding-top: 1cqi; border-top: 1px solid var(--n-brzeg); }
.sc-grupa-pola .sc-grupa-pole-pelne { grid-column: 1 / -1; }
.sc-grupa-pola dt { font-family: var(--fm); font-size: max(10px, 1.25cqi); letter-spacing: 0.1em; text-transform: uppercase; color: var(--n-szary); }
.sc-grupa-pola dd { margin: 0.4cqi 0 0; font-size: max(12px, 1.75cqi); color: #fff; }
.sc-grupa-termin-chip { font-size: max(11px, 1.45cqi); }

/* ——— 4 · kalendarz grupy, 14 dni ——— */
.sc-grupa-kalendarz { left: 5%; top: 18%; width: 90cqi; padding: 2.4cqi 2.6cqi; background: var(--sc-grupa-pelne); }
.sc-grupa-licznik { display: flex; align-items: baseline; gap: 1cqi; }
.sc-grupa-licznik .sc-liczba { display: inline-block; color: var(--accent-l); }
.sc-grupa-tydzien, .sc-grupa-dni { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1cqi; }
.sc-grupa-tydzien { margin-top: 2cqi; font-family: var(--fm); font-size: max(10px, 1.25cqi); letter-spacing: 0.1em; text-transform: uppercase; color: var(--n-szary); text-align: center; }
.sc-grupa-dni { margin-top: 1cqi; }
.sc-grupa-dni li {
  position: relative; height: max(42px, 10cqi); border-radius: 1.2cqi; background: var(--n-szklo); border: 1px solid var(--n-brzeg);
  display: flex; flex-direction: column; justify-content: space-between; padding: 0.9cqi 1cqi; overflow: hidden;
}
.sc-grupa-dni b { position: relative; font-family: var(--fm); font-weight: 500; font-size: max(11px, 1.5cqi); color: var(--n-tekst); }
.sc-grupa-dni .sc-grupa-wolne { background: transparent; }
.sc-grupa-dni .sc-grupa-wolne b { color: var(--n-szary); }
.sc-grupa-blask { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(244, 122, 32, 0.38), rgba(244, 122, 32, 0.08)); box-shadow: inset 0 0 0 1px var(--accent); }
.sc-grupa-dni .sc-grupa-z b { color: #fff; }
.sc-grupa-kropki { position: relative; display: flex; gap: 0.6cqi; }
.sc-grupa-kropki i, .sc-grupa-legenda i {
  display: block; width: max(7px, 1.2cqi); aspect-ratio: 1; border-radius: 50%; background: var(--sc-grupa-kolor); box-shadow: 0 0 1cqi var(--sc-grupa-kolor);
}
.sc-grupa-legenda { display: flex; flex-wrap: wrap; gap: 0.8cqi 2.6cqi; margin-top: 1.8cqi; font-size: max(11px, 1.5cqi); color: var(--n-szary); }
.sc-grupa-legenda li { display: flex; align-items: center; gap: 0.8cqi; }
.sc-grupa-najblizszy { margin-top: 1.6cqi; }

/* ——— 5 · zadania z osobami ——— */
.sc-grupa-zadania { left: 13%; top: 22%; width: 74cqi; z-index: 3; display: flex; flex-direction: column; gap: 2.2cqi; }
.sc-grupa-zadanie {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2cqi;
  padding: 1.8cqi 2.2cqi; background: var(--sc-grupa-pelne);
}
.sc-grupa-awatar {
  display: grid; place-items: center; width: max(34px, 6cqi); aspect-ratio: 1; border-radius: 50%;
  background: var(--accent); color: var(--n-tlo); font-family: var(--fd); font-weight: 600; font-size: max(13px, 2cqi);
}
.sc-grupa-zadanie-tresc { display: grid; gap: 0.3cqi; min-width: 0; }
.sc-grupa-zadanie-tresc > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-grupa-zadanie-tytul { font-family: var(--fd); font-weight: 600; font-size: max(14px, 2.2cqi); color: #fff; }
.sc-grupa-osoba { color: var(--n-szary); font-size: max(12px, 1.6cqi); }
.sc-grupa-status { display: grid; justify-items: end; }
.sc-grupa-status > .sc-chip { grid-area: 1 / 1; white-space: nowrap; }
.sc-grupa-przyjete { display: inline-flex; align-items: center; gap: 0.6cqi; }
.sc-grupa-przyjete svg { width: max(11px, 1.6cqi); height: max(11px, 1.6cqi); fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sc-grupa-przyjete path { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* ——— 6 · raport dla zarządu (stan końcowy) ——— */
.sc-grupa-raport { left: 5%; top: 13%; width: 90cqi; padding: 2.4cqi 2.6cqi; background: var(--sc-grupa-pelne); }
.sc-grupa-raport .sc-tytul b { color: var(--accent-l); }
.sc-grupa-kafle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8cqi; margin-top: 2cqi; }
.sc-grupa-kafel {
  display: grid; gap: 1cqi; min-width: 0; padding: 1.8cqi 2cqi; border-radius: 1.6cqi;
  background: var(--n-szklo); border: 1px solid var(--n-brzeg);
}
.sc-grupa-kafel .sc-grupa-firma { font-family: var(--fm); font-size: max(10px, 1.35cqi); letter-spacing: 0.08em; text-transform: uppercase; color: var(--n-szary); }
.sc-grupa-kafel-glowna { display: flex; align-items: baseline; gap: 1cqi; color: var(--n-szary); font-size: max(12px, 1.6cqi); }
.sc-grupa-kafel-glowna .sc-liczba { font-size: max(22px, 4.4cqi); }
.sc-grupa-slupek { display: block; height: max(6px, 1cqi); border-radius: 99px; background: var(--n-szklo2); overflow: hidden; }
.sc-grupa-slupek i { display: block; height: 100%; border-radius: inherit; background: var(--sc-grupa-kolor); box-shadow: 0 0 1.4cqi var(--sc-grupa-kolor); transform-origin: 0 50%; }
.sc-grupa-f1 .sc-grupa-slupek i { width: 100%; }
.sc-grupa-f2 .sc-grupa-slupek i { width: 83.3%; }
.sc-grupa-f3 .sc-grupa-slupek i { width: 50%; }
.sc-grupa-f4 .sc-grupa-slupek i { width: 27.8%; }
.sc-grupa-kafel-dane { display: grid; gap: 0.3cqi; font-size: max(12px, 1.5cqi); color: var(--n-szary); }
.sc-grupa-kafel-dane > span { display: flex; justify-content: space-between; gap: 1cqi; white-space: nowrap; }
.sc-grupa-kafel-dane b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ——— telefon (plac 4:5): mniej pism, rejestr 4 wiersze + „2 kolejne”, kolumny pod sobą ——— */
@media (max-width: 720px) {
  .sc-grupa .sc-grupa-szeroki { display: none; }
  .sc-grupa-karta { width: 57cqi; gap: 1.4cqi 2.4cqi; padding: 3cqi 3.4cqi; }
  .sc-grupa-karta[data-do="1"] { left: 5%; top: 5%; }
  .sc-grupa-karta[data-do="2"] { left: 38%; top: 28%; }
  .sc-grupa-karta[data-do="4"] { left: 6%; top: 51%; }
  .sc-grupa-karta[data-do="5"] { left: 37%; top: 74%; }

  .sc-grupa-rejestr, .sc-grupa-kalendarz, .sc-grupa-raport { left: 4%; width: 92cqi; padding: 4cqi; }
  .sc-grupa-rejestr { top: 8%; }
  .sc-grupa-naglowek { flex-direction: column; gap: 1.6cqi; }
  .sc-grupa-glowka { display: none; }
  .sc-grupa-wiersz {
    height: max(52px, 15cqi); gap: 0.6cqi 2cqi; padding: 0 2cqi; margin-top: 0;
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center;
  }
  .sc-grupa-wiersz:first-child { margin-top: 3cqi; }
  .sc-grupa-wiersz .sc-grupa-sprawa { grid-area: 2 / 1; }
  .sc-grupa-wiersz .sc-grupa-firma { grid-area: 2 / 2; justify-self: end; }
  .sc-grupa-wiersz .sc-grupa-sygn { grid-area: 1 / 1; }
  .sc-grupa-wiersz .sc-grupa-termin { grid-area: 1 / 2; }
  .sc-grupa-wiecej { display: block; padding: 2.4cqi 2cqi 0; border-top: 1px solid var(--n-brzeg); font-family: var(--fm); font-size: max(10px, 1.45cqi); letter-spacing: 0.08em; text-transform: uppercase; color: var(--n-szary); }

  .sc-grupa-kartoteka { left: 4%; top: 41%; width: 92cqi; padding: 4cqi; }
  .sc-grupa-pola { gap: 2cqi 3cqi; }

  .sc-grupa-kalendarz { top: 14%; }
  .sc-grupa-tydzien, .sc-grupa-dni { gap: 1.4cqi; }
  .sc-grupa-dni li { height: max(46px, 14cqi); padding: 1.4cqi; border-radius: 2cqi; }
  .sc-grupa-legenda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6cqi 3cqi; margin-top: 3cqi; }
  .sc-grupa-najblizszy { margin-top: 3cqi; white-space: normal; }

  .sc-grupa-zadania { left: 4%; top: 11%; width: 92cqi; gap: 3.6cqi; }
  .sc-grupa-zadanie { grid-template-columns: auto minmax(0, 1fr); gap: 1.6cqi 3cqi; padding: 3.2cqi 3.6cqi; }
  .sc-grupa-status { grid-column: 2; justify-items: start; }

  .sc-grupa-raport { top: 10%; }
  .sc-grupa-kafle { gap: 3cqi; margin-top: 3.4cqi; }
  .sc-grupa-kafel { gap: 1.6cqi; padding: 3cqi; border-radius: 2.6cqi; }
  .sc-grupa-kafel-dane > span { white-space: normal; }
}