/* Panel administratora platformy (/admin, js/widoki/admin.js). Te same tokeny i karty co panel rodzica.
 * Kolor = znaczenie stanu: mint = działa, pear (żółty) = uwaga, coral = źle. Kropka zawsze z tekstem obok (nie tylko kolor).
 */

/* ---------- Podsumowanie na górze ---------- */
.podsumowanie { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: center; }
.podsumowanie p { margin: 0; }
.podsumowanie-zdanie { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); line-height: 1.3; overflow-wrap: anywhere; }
.podsumowanie-lista { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 2px; }
.podsumowanie-lista li { overflow-wrap: anywhere; }
.podsumowanie-lista .stan-kropka { width: 10px; height: 10px; margin-right: 4px; vertical-align: 1px; }
@media (max-width: 560px) {
  .podsumowanie { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); padding: var(--space-sm); }
  .podsumowanie-ikona { width: 40px; height: 40px; }
  .podsumowanie-ikona .ikona { width: 22px; height: 22px; }
  .podsumowanie-zdanie { font-size: var(--text-md); }
}
.podsumowanie-ikona { width: 52px; height: 52px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--color-card); }
.podsumowanie-ikona .ikona { width: 28px; height: 28px; }
.podsumowanie--ok { background: var(--color-mint-tint); box-shadow: 0 var(--edge) 0 0 var(--color-mint-deep); }
.podsumowanie--uwaga { background: var(--color-accent-tint); box-shadow: 0 var(--edge) 0 0 var(--color-accent-deep); }
.podsumowanie--zle { background: var(--color-accent-3-tint); box-shadow: 0 var(--edge) 0 0 var(--color-accent-3); }

/* ---------- Grupy sprawdzeń ---------- */
.siatka-stanu { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.siatka-stanu > .karta + .karta { margin-top: 0; }
.grupa-stanu { padding: var(--space-sm) var(--space-md); min-width: 0; }
.grupa-stanu > h3 { display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-lg); margin-bottom: var(--space-2xs); }
.grupa-stanu > h3 .stan-kropka { margin-left: auto; }
.grupa-stanu h4 { font-size: var(--text-sm); font-family: var(--font-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-ink-2); margin: var(--space-sm) 0 var(--space-2xs); }
.sprawdzenia { list-style: none; margin: 0; padding: 0; display: grid; }
.sprawdzenie { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px var(--space-xs); align-items: baseline; padding: 9px 0;
  border-bottom: 2px dashed var(--color-rule); }
.sprawdzenie:last-child { border-bottom: 0; }
.sprawdzenie-nazwa { font-weight: 700; min-width: 0; }
.sprawdzenie-nazwa .maly { display: block; font-weight: 500; overflow-wrap: anywhere; }
.sprawdzenie-wartosc { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; max-width: 18ch; }
.sprawdzenie--zle .sprawdzenie-wartosc { color: var(--color-accent-3-deep); }
@media (max-width: 480px) {
  .sprawdzenie { grid-template-columns: auto minmax(0, 1fr); }
  .sprawdzenie-wartosc { grid-column: 2; text-align: left; max-width: none; }
}
.stan-kropka { width: 12px; height: 12px; border-radius: var(--radius-pill); display: inline-block; flex: none; align-self: center;
  background: var(--color-mint-deep); box-shadow: 0 0 0 3px var(--color-mint-tint); }
.stan-kropka--uwaga { background: var(--color-accent-deep); box-shadow: 0 0 0 3px var(--color-accent-tint); }
.stan-kropka--zle { background: var(--color-accent-3); box-shadow: 0 0 0 3px var(--color-accent-3-tint); }

/* błędy kolejek z „Ponów” i dziennik błędów */
.lista-bledow, .dziennik-bledow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.lista-bledow li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs); align-items: center; background: var(--color-paper);
  border-radius: var(--radius-input); padding: var(--space-xs) var(--space-sm); }
.lista-bledow .maly { display: block; overflow-wrap: anywhere; }
.dziennik-bledow li { display: grid; gap: 2px; min-width: 0; }
.komunikat-bledu { display: block; background: var(--color-paper-2); border-radius: 8px; padding: 6px 10px; font-size: 0.8rem; white-space: pre-wrap;
  overflow-wrap: anywhere; }
.dziennik-bledow + .zaawansowane { margin-top: var(--space-xs); }

/* ---------- Platforma i zużycie ---------- */
.staty--admin { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin-bottom: var(--space-sm); }
.staty--admin .stat { box-shadow: 0 2px 0 0 var(--color-rule); background: var(--color-paper); }
.staty--admin .stat b { font-size: 1.75rem; }
.staty--admin .stat .etykieta { display: block; margin-bottom: 2px; }
.staty--admin .stat .maly { display: block; }
.tabela--aktywni { max-width: 420px; margin-bottom: var(--space-xs); }
.okna-zuzycia { display: flex; gap: var(--space-2xs); flex-wrap: wrap; margin-bottom: var(--space-sm); }
.okna-zuzycia .pigulka { background: var(--color-paper); }

.wykresy { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.wykres { margin: 0; background: var(--color-paper); border-radius: var(--radius-input); padding: var(--space-xs) var(--space-sm); min-width: 0; }
.wykres figcaption { margin-bottom: var(--space-2xs); }
.wykres figcaption .maly { display: block; }
.wykres svg { display: block; width: 100%; height: 150px; overflow: visible; }
.wykres rect { fill: var(--color-accent-2); }
.wykres--elevenlabs rect { fill: var(--color-lavender); }
.wykres rect:hover { fill: var(--color-accent-2-deep); }
.wykres--elevenlabs rect:hover { fill: var(--color-lavender-deep); }
.wykres .os { stroke: var(--color-rule); stroke-width: 2; vector-effect: non-scaling-stroke; }
.wykres text { font-family: var(--font-label); font-size: 13px; fill: var(--color-ink-2); }

/* tabela rodzin: na komputerze tabela, na telefonie karty z podpisami */
.tabela-rodzin-wrap { overflow-x: auto; }
.tabela-rodzin th { padding: 0; white-space: nowrap; }
.tabela-rodzin td { white-space: nowrap; }
.tabela-rodzin td:first-child { white-space: normal; min-width: 14ch; }
.sortuj-wybor { display: none; }
.tabela-rodzin .sortuj { border: 0; background: none; padding: 9px 8px; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
  cursor: pointer; text-align: left; }
.tabela-rodzin .sortuj:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; border-radius: 6px; }
.tabela-rodzin th[aria-sort="ascending"], .tabela-rodzin th[aria-sort="descending"] { color: var(--color-ink); }
.tabela-rodzin .email { font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .tabela-rodzin, .tabela-rodzin tbody, .tabela-rodzin tr, .tabela-rodzin td { display: block; width: 100%; }
  .tabela-rodzin thead { display: none; }
  .sortuj-wybor { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xs); align-items: center; font-weight: 700; margin-bottom: var(--space-2xs); }
  .tabela-rodzin tr { background: var(--color-paper); border-radius: var(--radius-input); padding: var(--space-2xs) var(--space-sm); margin-top: var(--space-2xs); }
  .tabela-rodzin td { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs); border-bottom: 1px dashed var(--color-rule); padding: 5px 0;
    white-space: normal; }
  .tabela-rodzin td:last-child { border-bottom: 0; }
  .tabela-rodzin td::before { content: attr(data-etykieta); color: var(--color-ink-2); font-size: var(--text-xs); }
  .tabela-rodzin td:first-child { grid-template-columns: minmax(0, 1fr); }
  .tabela-rodzin td:first-child::before { display: none; }
}