/*
 * Układ stron widoków (pages.js): kolumny, dashboard, szczegóły, alerty — klasy makiety v4.3.2
 * (wspolne/ekrany.css: .columns, .teams; wspolne/v4.css: .pas, .sound, .table .wrap). Wyłącznie tokeny DS;
 * wygląd samych widoków daje render.css. Jedyny próg układu: 720 px.
 */

.app-main.app-main--wide { max-width: none; }
.views-page { display: flex; flex-direction: column; gap: var(--density-gap); min-width: 0; }
.views-page .page-head { justify-content: space-between; }
.views-page .page-head .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.views-page [data-page-notices]:empty,
.views-page [data-bands]:empty,
.views-page [data-rules]:empty { display: none; }
.views-page [data-bands], .views-page [data-page-notices], .views-page [data-rules] { display: flex; flex-direction: column; gap: var(--space-3); }
.views-page .alert { margin-bottom: var(--space-0); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); }

/* Widok kolumnowy: kolumna ma szerokość minimalną; pas przewija się w poziomie z przyciąganiem (ekrany.css:93). */
.columns {
    --col-min: 17.5rem;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(var(--col-min), 1fr);
    gap: var(--density-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-2);
}
/* Obudowa widoku w kolumnie flex: ostrzeżenie stanu projektu (B6) nad kartą, nie obok niej. */
.columns > .views__item { scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.columns > .views__item > .card { display: flex; flex-direction: column; flex: 1; min-width: 0; margin-bottom: var(--space-0); }
.columns .card__header { flex-direction: column; align-items: stretch; gap: var(--space-2); }

/* Dashboard: karty zespołów w siatce (ekrany.css:68). */
.teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--density-gap); margin: var(--space-0); padding: var(--space-0); list-style: none; }
.teams > li { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.teams > li > .card { display: flex; flex-direction: column; flex: 1; min-width: 0; margin-bottom: var(--space-0); }
.teams .card__header { flex-wrap: wrap; }

/* Szczegóły i alerty: jeden pod drugim. */
.views-list { display: flex; flex-direction: column; gap: var(--density-gap); min-width: 0; }
.views-list .detail { max-width: var(--layout-narrow-max); }

/* Pas alertu u góry treści (v4.css:152–160): obowiązkowy z „Przyjąłem”, ciągły przyklejony z dźwiękiem. */
.pas { flex-wrap: wrap; align-items: center; }
.pas .alert__body { min-width: min(100%, 14rem); }
.pas__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pas--sticky { position: sticky; top: calc(var(--layout-topbar-height) + var(--space-2)); z-index: var(--z-sticky); box-shadow: var(--shadow-md); }
.pas--90 { --alert-fg: var(--color-threshold-3); --alert-border: var(--color-threshold-3); --alert-bg: var(--color-feedback-warning-bg); }
.pas .sound, [data-rules] .sound { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.125rem var(--space-2); border-radius: var(--radius-full); border: var(--border-width) solid currentColor; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.pas .sound .icon, [data-rules] .sound .icon { width: 0.875rem; height: 0.875rem; }
.pas .sound--on, [data-rules] .sound--on { color: var(--color-feedback-error-fg); }
.pas .sound--off, [data-rules] .sound--off { color: var(--color-text-secondary); border-style: dashed; }
.pas .sound--blocked, [data-rules] .sound--blocked { color: var(--color-feedback-warning-fg); border-style: dashed; }

.views-page .table td.wrap, .views-page .table th.wrap { white-space: normal; min-width: 12rem; }

/* B4: napis o kolumnach poza ekranem (ekrany.css:111). */
.col-overflow { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* B6: projekt wyłączony — ostatnie dane wyciszone kolorem (ekrany.css:108 .col-dimmed). */
[data-project-state="disabled"] > .view { color: var(--color-text-secondary); }

/* B2: legenda stanów (v4.css:100–108). Kolory kropek = tokeny valueLabels szablonu kolumny; paski = pasma progów szablonu. */
.legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-2) var(--space-4); margin: var(--space-0); padding: var(--space-0); list-style: none; counter-reset: leg; }
.legend > li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--font-size-sm); counter-increment: leg; }
.legend > li::before { content: counter(leg) "."; min-width: 1.5rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.legend .mono { color: var(--color-text-secondary); font-size: var(--font-size-xs); overflow-wrap: anywhere; }
.legend .sdot { --sdot-color: var(--color-neutral-fg); display: inline-block; flex: none; width: 0.625rem; height: 0.625rem; border-radius: var(--radius-full); background: var(--sdot-color); }
.legend .sdot--error-terminal { --sdot-color: var(--color-session-error-terminal); }
.legend .sdot--error-retry { --sdot-color: var(--color-session-error-retry); }
.legend .sdot--compact { --sdot-color: var(--color-session-compact); }
.legend .sdot--new { --sdot-color: var(--color-session-new); }
.legend .sdot--active { --sdot-color: var(--color-session-active); }
.legend .sdot--active-bg { --sdot-color: var(--color-session-active-bg); }
.legend .sdot--paused-permission { --sdot-color: var(--color-session-paused-permission); }
.legend .sdot--paused-question { --sdot-color: var(--color-session-paused-question); }
.legend .sdot--idle { --sdot-color: var(--color-session-idle); }
.legend .sdot--idle-bg { --sdot-color: var(--color-session-idle-bg); }
.legend-ctx { display: grid; gap: var(--space-2); margin: var(--space-0); padding: var(--space-0); list-style: none; font-size: var(--font-size-sm); }
.legend-ctx > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.legend-ctx .ctxbar { display: inline-flex; width: 8rem; }
.legend-ctx .ctxbar__track { position: relative; flex: 1; height: 0.5rem; border-radius: var(--radius-full); background: var(--color-neutral-bg); box-shadow: inset 0 0 0 var(--border-width) var(--color-border-subtle); overflow: hidden; }
.legend-ctx .ctxbar__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-full); background: var(--ctx-color); }
.legend-ctx .lc--1 { --ctx-color: var(--color-threshold-1); }
.legend-ctx .lc--2 { --ctx-color: var(--color-threshold-2); }
.legend-ctx .lc--3, .legend-ctx .lc--4, .legend-ctx .lc--5 { --ctx-color: var(--color-threshold-4); }
.legend-ctx .lc--1 .ctxbar__fill { width: 60%; }
.legend-ctx .lc--2 .ctxbar__fill { width: 74%; }
.legend-ctx .lc--3 .ctxbar__fill { width: 82%; }
.legend-ctx .lc--4 .ctxbar__fill { width: 91%; }
.legend-ctx .lc--5 .ctxbar__fill { width: 96%; }

/* N2: szczegóły sesji obok kolumn (v4.css:112–122); przy ≤ 720 px na całą treść, kolumny schowane. */
.views-split { display: grid; gap: var(--density-gap); grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
.views-cols { min-width: 0; }
.views-detail { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.views-detail[hidden] { display: none; }
.views-detail__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.views-detail .views-list .detail { max-width: none; margin-bottom: var(--space-0); }

@media (min-width: 721px) {
    .views-split[data-detail-open] { grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); }
    .views-detail { position: sticky; top: calc(var(--layout-topbar-height) + var(--space-2)); max-height: calc(100vh - var(--layout-topbar-height) - var(--space-4)); overflow-y: auto; }
    .views-detail__back { display: none; }
    .views-detail__bar { justify-content: flex-end; }
}

@media (max-width: 720px) {
    /* Telefon: kolumna prawie na całą szerokość, następna wystaje — widać, że pas się przewija (ekrany.css:123). */
    .columns { --col-min: min(85%, 20rem); }
    .views-split[data-detail-open] > .views-cols { display: none; }
    .views-detail__close { display: none; }
}