/* /Pages/Admin/Participants/ParticipantPhoto.razor.rz.scp.css */
/* Scoped CSS dla ParticipantPhoto (ADR-0029). Tokeny/klasy panelu (.panel-input,
   .panel-label, .field-err, .muted) pochodzą z globalnego app.css; tu tylko układ
   podglądu + miniatura, żeby nie dotykać współdzielonego app.css. */

.panel-photo[b-vlag6rdyae] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: .75rem;
}

.panel-photo-preview[b-vlag6rdyae] {
    flex: 0 0 auto;
}

.panel-photo-img[b-vlag6rdyae],
.panel-photo-placeholder[b-vlag6rdyae] {
    width: 96px;
    height: 96px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.panel-photo-placeholder[b-vlag6rdyae] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 2rem;
}

.panel-photo-controls[b-vlag6rdyae] {
    flex: 1 1 auto;
    min-width: 0;
}

.panel-photo-hint[b-vlag6rdyae] {
    font-size: .8rem;
    margin: .35rem 0 0;
}
/* /Pages/Admin/Settings/GeneralSettingsView.razor.rz.scp.css */
/* Scoped CSS dla GeneralSettingsView. Klasy panelu (.panel-label, .panel-input, .panel-media-logo,
   .panel-field-hint, .panel-btn) są globalne w app.css — tutaj wyłącznie UKŁAD wiersza logo, żeby nie
   ruszać współdzielonego app.css. Wzorzec i powód jak w ParticipantPhoto.razor.css (ADR-0029): ten sam
   kształt UI (podgląd obok sterowania), tylko podgląd nie jest kwadratową miniaturą 96 px. */

/* Podgląd logo po LEWEJ, sterowanie po PRAWEJ.
   flex-wrap zostaje jako siatka bezpieczeństwa: na wąskim ekranie sterowanie zjedzie POD podgląd,
   zamiast ścisnąć pole wyboru pliku do szerokości, w której przeglądarka utnie „Nie wybrano pliku". */
.panel-logo[b-3m9s92cg0y] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

/* .panel-media-logo ma w app.css tylko max-height: 80px i width: auto — szerokość logo banerowego jest
   więc nieograniczona i wypchnęłaby sterowanie do następnego wiersza nawet na szerokim ekranie.
   14rem to sufit TEJ kolumny; obrazek skaluje się proporcjonalnie, bo width/height zostają auto. */
.panel-logo-preview[b-3m9s92cg0y] {
    flex: 0 0 auto;
    max-width: 14rem;
}

/* ::deep, bo obrazek renderuje też komponent-dziecko SiteMediaImage, a jego znaczniki nie dostają
   atrybutu zakresu tego komponentu — sama reguła zakresowa trafiłaby wyłącznie w <img> podglądu
   lokalnego bufora. Margines z app.css oddzielał logo od tego, co stało POD nim; w wierszu odstęp
   niesie gap, więc został po nim tylko naddatek wysokości. */
.panel-logo-preview[b-3m9s92cg0y]  .panel-media-logo {
    max-width: 100%;
    margin-bottom: 0;
}

/* Bez flex-grow: wiersz jest na całą szerokość karty (.span-2), więc rosnąca kolumna rozciągnęłaby
   pole wyboru pliku na ~700 px przy oknie 1280 px. 20rem to szerokość, w której „Wybierz plik" i
   „Nie wybrano pliku" mieszczą się z zapasem; kurczyć się wolno (wąski ekran), rosnąć nie. */
.panel-logo-controls[b-3m9s92cg0y] {
    flex: 0 1 20rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
}

/* Odstępy w kolumnie niesie gap — własny margines podpowiedzi (app.css: .25rem 0 .75rem) rozjechałby
   rytm i zostawił zbędny ogon pod ostatnim elementem karty. */
.panel-logo-controls .panel-field-hint[b-3m9s92cg0y] {
    margin: 0;
}
/* /Pages/SystemOwner/Features/FeaturesExplorer.razor.rz.scp.css */
/* Style dokumentacji uprawnień (/system/features). Scoped CSS + ::deep, żeby objąć komponenty
   potomne bez dotykania globalnego app.css. Wszystkie wartości pochodzą z tokenów DESIGN_SYSTEM
   — zero własnych hexów, zero dark mode. */

.docs-root[b-wbfdm4np2p]  .docs-section {
    margin-top: 1.5rem;
}

.docs-root[b-wbfdm4np2p]  .docs-section-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.docs-root[b-wbfdm4np2p]  .docs-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.docs-root[b-wbfdm4np2p]  .docs-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    background: var(--color-light);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.4rem;
    color: var(--color-primary);
    word-break: break-word;
}

.docs-root[b-wbfdm4np2p]  .docs-code-muted {
    color: var(--color-gray);
}

.docs-root[b-wbfdm4np2p]  .docs-note {
    font-size: 0.82rem;
    color: var(--color-gray);
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

.docs-root[b-wbfdm4np2p]  .docs-note-warn {
    color: var(--color-warning);
    background: rgba(244, 162, 97, .12);
    border-left: 3px solid var(--color-gold);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
}

.docs-root[b-wbfdm4np2p]  .docs-note-block {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-gray-light);
    font-size: 0.82rem;
}

.docs-root[b-wbfdm4np2p]  .docs-note-block:last-child {
    border-bottom: none;
}

.docs-root[b-wbfdm4np2p]  .docs-note-block span {
    color: var(--color-gray);
}

.docs-root[b-wbfdm4np2p]  .docs-list {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.83rem;
    line-height: 1.6;
}

.docs-root[b-wbfdm4np2p]  .docs-list-ok li::marker {
    color: var(--color-success);
}

.docs-root[b-wbfdm4np2p]  .docs-list-blocked li::marker {
    color: var(--color-accent);
}

/* ── Badge'e ─────────────────────────────────────────────────────────────────────────────── */

.docs-root[b-wbfdm4np2p]  .docs-badge {
    display: inline-block;
    border-radius: 100px;
    padding: 0.2rem 0.65rem;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.docs-root[b-wbfdm4np2p]  .docs-access-full { background: rgba(22, 163, 74, .12); color: var(--color-success); }
.docs-root[b-wbfdm4np2p]  .docs-access-readonly { background: rgba(37, 99, 235, .12); color: var(--color-info); }
.docs-root[b-wbfdm4np2p]  .docs-access-conditional { background: rgba(244, 162, 97, .18); color: var(--color-warning); }
.docs-root[b-wbfdm4np2p]  .docs-access-none { background: rgba(107, 114, 128, .15); color: var(--color-inactive); }

.docs-root[b-wbfdm4np2p]  .docs-sev-critical { background: rgba(232, 72, 85, .15); color: var(--color-accent-dark); }
.docs-root[b-wbfdm4np2p]  .docs-sev-warning { background: rgba(244, 162, 97, .2); color: var(--color-warning); }
.docs-root[b-wbfdm4np2p]  .docs-sev-info { background: rgba(37, 99, 235, .12); color: var(--color-info); }

.docs-root[b-wbfdm4np2p]  .docs-status-partial { background: rgba(124, 58, 237, .13); color: var(--color-purple); }

.docs-root[b-wbfdm4np2p]  .docs-chip {
    display: inline-block;
    background: rgba(10, 36, 99, .08);
    color: var(--color-primary);
    border-radius: 100px;
    padding: 0.2rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.docs-root[b-wbfdm4np2p]  .docs-chip-muted {
    background: var(--color-light);
    color: var(--color-gray);
}

/* ── Toolbar, breadcrumb, wyszukiwarka ───────────────────────────────────────────────────── */

.docs-root[b-wbfdm4np2p]  .docs-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    background: var(--color-light);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
}

.docs-root[b-wbfdm4np2p]  .docs-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 260px;
    background: var(--color-white);
    border: 1.5px solid var(--color-gray-light);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.7rem;
    color: var(--color-gray);
}

.docs-root[b-wbfdm4np2p]  .docs-search:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(10, 36, 99, .1);
}

.docs-root[b-wbfdm4np2p]  .docs-search-input {
    border: none;
    outline: none;
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.85rem;
}

.docs-root[b-wbfdm4np2p]  .docs-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.docs-root[b-wbfdm4np2p]  .docs-crumb {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-gray);
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.docs-root[b-wbfdm4np2p]  .docs-crumb:hover {
    color: var(--color-primary);
    background: rgba(10, 36, 99, .06);
}

.docs-root[b-wbfdm4np2p]  .docs-crumb.is-current {
    color: var(--color-primary);
    cursor: default;
}

.docs-root[b-wbfdm4np2p]  .docs-crumb-sep {
    font-size: 0.6rem;
    color: var(--color-gray-light);
}

.docs-root[b-wbfdm4np2p]  .docs-hits {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.docs-root[b-wbfdm4np2p]  .docs-hit {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    transition: var(--transition);
}

.docs-root[b-wbfdm4np2p]  .docs-hit:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.docs-root[b-wbfdm4np2p]  .docs-hit-kind { background: rgba(10, 36, 99, .1); color: var(--color-primary); }
.docs-root[b-wbfdm4np2p]  .docs-hit-label { font-weight: 600; font-size: 0.85rem; }
.docs-root[b-wbfdm4np2p]  .docs-hit-detail { color: var(--color-gray); font-size: 0.78rem; margin-left: auto; }

/* ── Poziom 1: karty ról ─────────────────────────────────────────────────────────────────── */

.docs-root[b-wbfdm4np2p]  .docs-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.docs-root[b-wbfdm4np2p]  .docs-role-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    text-align: left;
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem;
    cursor: pointer;
    transition: var(--transition);
}

.docs-root[b-wbfdm4np2p]  .docs-role-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--color-primary);
}

.docs-root[b-wbfdm4np2p]  .docs-role-card.is-flagged {
    border-left: 4px solid var(--color-gold);
}

.docs-root[b-wbfdm4np2p]  .docs-role-card-head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.docs-root[b-wbfdm4np2p]  .docs-role-name {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
}

.docs-root[b-wbfdm4np2p]  .docs-role-kind,
.docs-root[b-wbfdm4np2p]  .docs-role-scope {
    font-size: 0.75rem;
    color: var(--color-gray);
}

.docs-root[b-wbfdm4np2p]  .docs-role-metrics {
    display: flex;
    gap: 1rem;
    font-size: 0.78rem;
    color: var(--color-gray);
}

.docs-root[b-wbfdm4np2p]  .docs-role-metrics strong {
    color: var(--color-dark);
    font-size: 0.95rem;
}

.docs-root[b-wbfdm4np2p]  .docs-role-warn,
.docs-root[b-wbfdm4np2p]  .docs-role-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--color-warning);
}

/* ── Graf nakładania się ról ─────────────────────────────────────────────────────────────── */

.docs-root[b-wbfdm4np2p]  .docs-overlap { margin-top: 1.5rem; }

.docs-root[b-wbfdm4np2p]  .docs-overlap-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
}

.docs-root[b-wbfdm4np2p]  .docs-overlap-node {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 100px;
    padding: 0.3rem 0.9rem;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    min-width: 170px;
    text-align: left;
}

.docs-root[b-wbfdm4np2p]  .docs-overlap-edges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.docs-root[b-wbfdm4np2p]  .docs-overlap-edge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--color-light);
    border: 1px dashed var(--color-gray-light);
    border-radius: 100px;
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    color: var(--color-gray);
}

.docs-root[b-wbfdm4np2p]  .docs-overlap-count { color: var(--color-primary); font-weight: 600; }
.docs-root[b-wbfdm4np2p]  .docs-overlap-none { font-size: 0.75rem; color: var(--color-gray); font-style: italic; }

.docs-root[b-wbfdm4np2p]  .docs-overlap-note {
    font-size: 0.78rem;
    color: var(--color-gray);
    margin: 0 0 0.75rem 1rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--color-gray-light);
    line-height: 1.5;
}

/* ── Poziom 2: pulpit roli ───────────────────────────────────────────────────────────────── */

.docs-root[b-wbfdm4np2p]  .docs-role-head { margin-top: 1rem; }

.docs-root[b-wbfdm4np2p]  .docs-role-head-body {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 2fr;
    gap: 1.25rem;
}

.docs-root[b-wbfdm4np2p]  .docs-role-head-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0 0 0.4rem;
}

.docs-root[b-wbfdm4np2p]  .docs-defs {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
    font-size: 0.82rem;
}

.docs-root[b-wbfdm4np2p]  .docs-defs dt {
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

.docs-root[b-wbfdm4np2p]  .docs-defs dd {
    margin: 0;
    color: var(--color-gray);
    line-height: 1.5;
}

.docs-root[b-wbfdm4np2p]  .docs-module {
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.docs-root[b-wbfdm4np2p]  .docs-module-head {
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 1rem;
}

.docs-root[b-wbfdm4np2p]  .docs-module-items {
    display: flex;
    flex-direction: column;
}

.docs-root[b-wbfdm4np2p]  .docs-feature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-gray-light);
    padding: 0.6rem 1rem;
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
}

.docs-root[b-wbfdm4np2p]  .docs-feature:last-child { border-bottom: none; }
.docs-root[b-wbfdm4np2p]  .docs-feature:hover { background: rgba(10, 36, 99, .03); }

.docs-root[b-wbfdm4np2p]  .docs-feature-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.docs-root[b-wbfdm4np2p]  .docs-feature-name { font-size: 0.87rem; font-weight: 600; }
.docs-root[b-wbfdm4np2p]  .docs-feature-warn { color: var(--color-warning); font-size: 0.8rem; }

/* Mapa nawigacji */

.docs-root[b-wbfdm4np2p]  .docs-navmap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.4rem;
}

.docs-root[b-wbfdm4np2p]  .docs-navnode {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.7rem;
    font-size: 0.78rem;
}

.docs-root[b-wbfdm4np2p]  .docs-navnode.is-open { border-left: 3px solid var(--color-success); }

.docs-root[b-wbfdm4np2p]  .docs-navnode.is-locked {
    border-left: 3px solid var(--color-gray-light);
    opacity: 0.5;
    filter: grayscale(1);
}

.docs-root[b-wbfdm4np2p]  .docs-navnode-el { color: var(--color-gray); }
.docs-root[b-wbfdm4np2p]  .docs-navnode-state { margin-left: auto; font-size: 0.7rem; text-transform: uppercase; font-weight: 700; }

/* Macierz permissions */

.docs-root[b-wbfdm4np2p]  .docs-perms {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 0.3rem;
}

.docs-root[b-wbfdm4np2p]  .docs-perm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--color-gray-light);
    font-size: 0.78rem;
}

.docs-root[b-wbfdm4np2p]  .docs-perm-check { color: var(--color-success); }
.docs-root[b-wbfdm4np2p]  .docs-perm-origin { margin-left: auto; color: var(--color-gray); font-size: 0.72rem; }
.docs-root[b-wbfdm4np2p]  .docs-perm-origin.is-exclusive { color: var(--color-purple); font-weight: 600; }

/* Zakres danych */

.docs-root[b-wbfdm4np2p]  .docs-entities {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.35rem;
}

.docs-root[b-wbfdm4np2p]  .docs-entity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.65rem;
    font-size: 0.78rem;
    border: 1px solid var(--color-gray-light);
}

.docs-root[b-wbfdm4np2p]  .docs-entity-write { background: rgba(22, 163, 74, .1); border-color: rgba(22, 163, 74, .3); }
.docs-root[b-wbfdm4np2p]  .docs-entity-read { background: rgba(37, 99, 235, .08); border-color: rgba(37, 99, 235, .25); }
.docs-root[b-wbfdm4np2p]  .docs-entity-none { background: var(--color-light); opacity: 0.55; }

.docs-root[b-wbfdm4np2p]  .docs-entity-name { font-weight: 600; }
.docs-root[b-wbfdm4np2p]  .docs-entity-kind { color: var(--color-gray); font-size: 0.7rem; }
.docs-root[b-wbfdm4np2p]  .docs-entity-level { margin-left: auto; font-size: 0.7rem; text-transform: uppercase; font-weight: 700; color: var(--color-gray); }

/* Joby */

.docs-root[b-wbfdm4np2p]  .docs-jobs { display: flex; flex-direction: column; gap: 0.5rem; }

.docs-root[b-wbfdm4np2p]  .docs-job {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-left: 3px solid var(--color-gold);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
}

.docs-root[b-wbfdm4np2p]  .docs-job-cron {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-warning);
    white-space: nowrap;
    min-width: 150px;
}

.docs-root[b-wbfdm4np2p]  .docs-job-main { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; }
.docs-root[b-wbfdm4np2p]  .docs-job-name { font-size: 0.87rem; font-weight: 600; }
.docs-root[b-wbfdm4np2p]  .docs-job-purpose { font-size: 0.78rem; color: var(--color-gray); }
.docs-root[b-wbfdm4np2p]  .docs-job-rel { display: flex; flex-direction: column; gap: 0.25rem; }
.docs-root[b-wbfdm4np2p]  .docs-job-config { background: rgba(10, 36, 99, .1); color: var(--color-primary); }
.docs-root[b-wbfdm4np2p]  .docs-job-affects { background: rgba(244, 162, 97, .18); color: var(--color-warning); }

.docs-root[b-wbfdm4np2p]  .docs-files { display: flex; flex-wrap: wrap; gap: 0.3rem; }

/* ── Ostrzeżenia audytowe ────────────────────────────────────────────────────────────────── */

.docs-root[b-wbfdm4np2p]  .docs-warnings { display: flex; flex-direction: column; gap: 0.6rem; }

.docs-root[b-wbfdm4np2p]  .docs-warning {
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius);
    padding: 0.8rem 1rem;
}

.docs-root[b-wbfdm4np2p]  .docs-warn-critical { border-left: 4px solid var(--color-accent); }
.docs-root[b-wbfdm4np2p]  .docs-warn-warning { border-left: 4px solid var(--color-gold); }
.docs-root[b-wbfdm4np2p]  .docs-warn-info { border-left: 4px solid var(--color-info); }

.docs-root[b-wbfdm4np2p]  .docs-warning-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.docs-root[b-wbfdm4np2p]  .docs-warning-id {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--color-primary);
    font-size: 0.8rem;
}

.docs-root[b-wbfdm4np2p]  .docs-warning-title { font-weight: 600; font-size: 0.9rem; }
.docs-root[b-wbfdm4np2p]  .docs-warning-summary { font-size: 0.83rem; line-height: 1.55; margin: 0.5rem 0; }
.docs-root[b-wbfdm4np2p]  .docs-warning-line { font-size: 0.8rem; color: var(--color-gray); margin: 0.35rem 0; line-height: 1.5; }

/* ── Poziom 3: przepływ ──────────────────────────────────────────────────────────────────── */

.docs-root[b-wbfdm4np2p]  .docs-flow-head { margin-top: 1rem; }

.docs-root[b-wbfdm4np2p]  .docs-flow-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.docs-root[b-wbfdm4np2p]  .docs-flow-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0 0 0.4rem;
}

.docs-root[b-wbfdm4np2p]  .docs-flow-sub { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.docs-root[b-wbfdm4np2p]  .docs-flow-condition { font-size: 0.83rem; line-height: 1.55; margin: 0.75rem 0 0; }
.docs-root[b-wbfdm4np2p]  .docs-flow-compare { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; color: var(--color-gray); }

.docs-root[b-wbfdm4np2p]  .docs-select {
    border: 1.5px solid var(--color-gray-light);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.6rem;
    font-family: var(--font-body);
    font-size: 0.82rem;
    background: var(--color-white);
}

.docs-root[b-wbfdm4np2p]  .docs-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(10, 36, 99, .1);
}

/* Diagram sekwencji */

.docs-root[b-wbfdm4np2p]  .docs-seq-track {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.1rem;
    border-left: 2px solid var(--color-gray-light);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.docs-root[b-wbfdm4np2p]  .docs-seq-node { position: relative; }

.docs-root[b-wbfdm4np2p]  .docs-seq-node::before {
    content: '';
    position: absolute;
    left: -1.45rem;
    top: 1.05rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid var(--color-white);
}

.docs-root[b-wbfdm4np2p]  .docs-seq-node.is-shared::before { background: var(--color-gray); }
.docs-root[b-wbfdm4np2p]  .docs-seq-node.is-only-here::before { background: var(--color-accent); }

.docs-root[b-wbfdm4np2p]  .docs-seq-btn {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    transition: var(--transition);
}

.docs-root[b-wbfdm4np2p]  .docs-seq-btn:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.docs-root[b-wbfdm4np2p]  .docs-seq-node.is-only-here .docs-seq-btn { border-color: rgba(232, 72, 85, .4); }
.docs-root[b-wbfdm4np2p]  .docs-seq-node.is-selected .docs-seq-btn { border-color: var(--color-primary); background: rgba(10, 36, 99, .03); }

.docs-root[b-wbfdm4np2p]  .docs-seq-step {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 50%;
    width: 1.4rem;
    height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.docs-root[b-wbfdm4np2p]  .docs-seq-body { display: flex; flex-direction: column; gap: 0.15rem; }

.docs-root[b-wbfdm4np2p]  .docs-seq-label {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-primary);
}

.docs-root[b-wbfdm4np2p]  .docs-seq-text { font-size: 0.82rem; line-height: 1.5; }
.docs-root[b-wbfdm4np2p]  .docs-seq-chevron { margin-left: auto; color: var(--color-gray); font-size: 0.75rem; }

.docs-root[b-wbfdm4np2p]  .docs-seq-detail {
    margin: 0.3rem 0 0 2.1rem;
    padding: 0.6rem 0.8rem;
    background: var(--color-light);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--color-gray-light);
}

.docs-root[b-wbfdm4np2p]  .docs-seq-expansion { font-size: 0.8rem; color: var(--color-gray); margin: 0 0 0.5rem; line-height: 1.55; }
.docs-root[b-wbfdm4np2p]  .docs-seq-files { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.docs-root[b-wbfdm4np2p]  .docs-seq-files-label { font-size: 0.72rem; font-weight: 700; color: var(--color-primary); text-transform: uppercase; }

.docs-root[b-wbfdm4np2p]  .docs-seq-errors {
    margin-top: 1rem;
    background: rgba(232, 72, 85, .05);
    border: 1px solid rgba(232, 72, 85, .2);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
}

.docs-root[b-wbfdm4np2p]  .docs-seq-errors-head {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-accent-dark);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.docs-root[b-wbfdm4np2p]  .docs-seq-error { margin: 0.2rem 0; }
.docs-root[b-wbfdm4np2p]  .docs-seq-error-exp { display: block; font-size: 0.75rem; color: var(--color-gray); }

/* Porównanie ról */

.docs-root[b-wbfdm4np2p]  .docs-compare-legend,
.docs-root[b-wbfdm4np2p]  .docs-cmp-legend {
    display: flex;
    gap: 1rem;
    font-size: 0.78rem;
    color: var(--color-gray);
    flex-wrap: wrap;
}

.docs-root[b-wbfdm4np2p]  .docs-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }

.docs-root[b-wbfdm4np2p]  .docs-legend-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    display: inline-block;
    background: var(--color-gray);
}

.docs-root[b-wbfdm4np2p]  .docs-legend-item.is-only-here .docs-legend-dot { background: var(--color-accent); }

.docs-root[b-wbfdm4np2p]  .docs-compare-pickers {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.docs-root[b-wbfdm4np2p]  .docs-compare-icon { color: var(--color-primary); }

.docs-root[b-wbfdm4np2p]  .docs-cmp-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--color-gray-light);
    font-size: 0.8rem;
}

.docs-root[b-wbfdm4np2p]  .docs-cmp-both { background: rgba(107, 114, 128, .05); }
.docs-root[b-wbfdm4np2p]  .docs-cmp-left { background: rgba(37, 99, 235, .07); }
.docs-root[b-wbfdm4np2p]  .docs-cmp-right { background: rgba(244, 162, 97, .12); }
.docs-root[b-wbfdm4np2p]  .docs-cmp-name { font-weight: 600; }
.docs-root[b-wbfdm4np2p]  .docs-cmp-levels { margin-left: auto; display: flex; gap: 0.5rem; }
.docs-root[b-wbfdm4np2p]  .docs-cmp-cell { min-width: 84px; text-align: center; font-size: 0.72rem; color: var(--color-gray); text-transform: uppercase; font-weight: 700; }

/* Listy różnicowe */

.docs-root[b-wbfdm4np2p]  .docs-list li.is-only-here { color: var(--color-accent-dark); font-weight: 600; }
.docs-root[b-wbfdm4np2p]  .docs-list li.is-shared { color: var(--color-gray); }

/* Wejścia, pola */

.docs-root[b-wbfdm4np2p]  .docs-entrypoint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--color-gray-light);
    font-size: 0.8rem;
    flex-wrap: wrap;
}

.docs-root[b-wbfdm4np2p]  .docs-entrypoint:last-child { border-bottom: none; }
.docs-root[b-wbfdm4np2p]  .docs-entrypoint-el { color: var(--color-gray); }

.docs-root[b-wbfdm4np2p]  .docs-ep-ui { background: rgba(10, 36, 99, .1); color: var(--color-primary); }
.docs-root[b-wbfdm4np2p]  .docs-ep-api { background: rgba(37, 99, 235, .12); color: var(--color-info); }
.docs-root[b-wbfdm4np2p]  .docs-ep-ws { background: rgba(124, 58, 237, .12); color: var(--color-purple); }
.docs-root[b-wbfdm4np2p]  .docs-ep-device,
.docs-root[b-wbfdm4np2p]  .docs-ep-external,
.docs-root[b-wbfdm4np2p]  .docs-ep-background { background: rgba(244, 162, 97, .18); color: var(--color-warning); }

.docs-root[b-wbfdm4np2p]  .docs-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.5rem; }
.docs-root[b-wbfdm4np2p]  .docs-fields-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--color-primary); }

.docs-root[b-wbfdm4np2p]  .docs-field {
    border-radius: 100px;
    padding: 0.15rem 0.6rem;
    font-size: 0.74rem;
}

.docs-root[b-wbfdm4np2p]  .docs-field.is-visible { background: rgba(22, 163, 74, .12); color: var(--color-success); }
.docs-root[b-wbfdm4np2p]  .docs-field.is-hidden { background: rgba(107, 114, 128, .15); color: var(--color-gray); text-decoration: line-through; }

.docs-root[b-wbfdm4np2p]  .docs-related { margin-bottom: 0.75rem; }

.docs-root[b-wbfdm4np2p]  .docs-related-title {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-primary);
    margin-bottom: 0.25rem;
}

.docs-root[b-wbfdm4np2p]  .docs-related-items { display: flex; flex-wrap: wrap; gap: 0.25rem; }

/* ── Loading skeleton ────────────────────────────────────────────────────────────────────── */

.docs-root[b-wbfdm4np2p]  .docs-skeleton {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.docs-root[b-wbfdm4np2p]  .docs-skeleton-card {
    height: 150px;
    border-radius: var(--radius);
    background: linear-gradient(90deg, var(--color-light) 25%, var(--color-gray-light) 50%, var(--color-light) 75%);
    background-size: 200% 100%;
    animation: docs-shimmer-b-wbfdm4np2p 1.4s ease-in-out infinite;
}

@keyframes docs-shimmer-b-wbfdm4np2p {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (max-width: 991.98px) {
    .docs-root[b-wbfdm4np2p]  .docs-role-head-body { grid-template-columns: 1fr; }
    .docs-root[b-wbfdm4np2p]  .docs-job { flex-direction: column; gap: 0.4rem; }
}
/* /Pages/SystemOwner/Ideas/IdeasPage.razor.rz.scp.css */
/* Style backlogu pomysłów (/panel/system/ideas, issue #7). Scoped CSS + ::deep, żeby objąć komponenty
   potomne bez dotykania globalnego app.css — wzorzec FeaturesExplorer.razor.css.

   WSZYSTKIE wartości pochodzą z tokenów DESIGN_SYSTEM: zero własnych hexów, zero dark mode.
   Jedyne kolory spoza palety to kolory kategorii wybrane przez użytkownika — te przychodzą inline
   ze stylu elementu, nigdy stąd. Breakpointy globalne: 991.98 / 767.98 / 575.98. */

/* --- Szybkie dodawanie --- */

.idea-root[b-czylr3udqt]  .idea-quickadd {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.idea-root[b-czylr3udqt]  .idea-quickadd > i {
    color: var(--color-gold);
    font-size: 1.1rem;
}

.idea-root[b-czylr3udqt]  .idea-quickadd .panel-input {
    flex: 1 1 auto;
    min-width: 0;
}

.idea-root[b-czylr3udqt]  .idea-quickadd-hint {
    margin: 0 0 1rem 1.7rem;
}

/* --- Tablica (kanban) --- */

/* Kanban ma DWA układy, nie jeden zwężany.
   Od 768 px: kolumny obok siebie, DZIELĄCE dostępną szerokość (patrz .idea-column) — przewijanie
   poziome w tym kontenerze zostaje jako zabezpieczenie na okna węższe od progu czytelności, a nie
   jako stan normalny (strona nigdy nie dostaje paska poziomego).
   Poniżej 768 px: kolumny JEDNA POD DRUGĄ — patrz media query na dole pliku.
   Powód jest merytoryczny, nie kosmetyczny: na telefonie mieści się jedna kolumna, więc porównywanie
   obok siebie (cały sens kanbanu) i tak znika, a przewijanie w poziomie chowa pięć z sześciu kolumn
   za gestem. Przeciąganie i tak nie działa na dotyku (stąd select statusu w modalu), więc układ
   pionowy nic nie zabiera.
   min-width:0 jest tu istotne, a nie ozdobne: bez niego kontener przewijany osadzony w elastycznym
   przodku potrafi rozepchnąć się do szerokości zawartości zamiast ją przewijać. */
.idea-root[b-czylr3udqt]  .idea-board {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    overflow-x: auto;
    min-width: 0;
    padding-bottom: 0.5rem;
    /* Przewijanie palcem zatrzymuje się na krawędzi kolumny — inaczej kanban na telefonie
       zostawia karty w połowie ekranu. */
    scroll-snap-type: x proximity;
}

/* Kolumna NIE deklaruje własnej szerokości — sześć kolumn dzieli między siebie dostępną (issue #35).
   Wcześniejsze `flex: 0 0 280px` wymagało okna ≥ 1908 px: tablica żyje w kontenerze pomniejszonym
   o sidebar (260/70 px) i dwa paddingi, więc kolumny wychodziły szersze, niż jest miejsca, i dwie
   ostatnie wypadały poza kadr. Układ ze sztywną szerokością wymaga reguły dla KAŻDEGO zakresu
   z osobna i jednej zawsze zabraknie; „podaj minimum, resztę rozdziel" nie wymaga żadnej — to ten
   sam wzorzec, co repeat(auto-fill, minmax(X, 1fr)) w .panel-card-grid i niżej w .idea-form-grid.
   Wszystkie sześć kolumn jest jednakowych i zawsze rozwiniętych: stan zwinięty dla
   Zrobiony/Odrzucony został usunięty (decyzja właściciela w #35), więc nie ma tu wariantu węższego.
   min-width jest tu konieczne, nie ozdobne: bez niego długi tytuł karty rozepchnie kolumnę mimo
   flex-basis 0 (min-width: auto = szerokość min-content). Realny próg czytelności nadaje dopiero
   media query na dole pliku — poniżej 768 px kolumny i tak stoją jedna pod drugą. */
.idea-root[b-czylr3udqt]  .idea-column {
    flex: 1 1 0;
    min-width: 0;
    scroll-snap-align: start;
    background: var(--color-light);
    border: 1px solid var(--color-gray-light);
    border-top: 3px solid var(--idea-accent, var(--color-inactive));
    border-radius: var(--radius);
    padding: 0.75rem;
    transition: var(--transition);
}

.idea-root[b-czylr3udqt]  .idea-column--dragover {
    background: var(--color-white);
    box-shadow: var(--shadow);
}

.idea-root[b-czylr3udqt]  .idea-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--idea-accent, var(--color-dark));
}

.idea-root[b-czylr3udqt]  .idea-count {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0.1rem 0.4rem;
    border-radius: 100px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    color: var(--color-gray);
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
}

.idea-root[b-czylr3udqt]  .idea-column-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    min-height: 3rem;
}

.idea-root[b-czylr3udqt]  .idea-column-empty {
    margin: 0;
    padding: 0.75rem 0;
    text-align: center;
    font-size: 0.78rem;
    color: var(--color-gray);
}

/* --- Karta --- */

.idea-root[b-czylr3udqt]  .idea-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-left: 4px solid var(--color-gray-light);   /* nadpisywane inline kolorem kategorii */
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: 0.6rem 0.7rem;
    cursor: grab;
    transition: var(--transition);
}

.idea-root[b-czylr3udqt]  .idea-card:hover,
.idea-root[b-czylr3udqt]  .idea-card:focus-visible {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.idea-root[b-czylr3udqt]  .idea-card--dragging {
    opacity: 0.45;
    cursor: grabbing;
}

.idea-root[b-czylr3udqt]  .idea-card-title {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.idea-root[b-czylr3udqt]  .idea-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.idea-root[b-czylr3udqt]  .idea-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.5rem;
    border-radius: 100px;
    background: var(--color-light);
    color: var(--color-gray);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.idea-root[b-czylr3udqt]  .idea-pill--source {
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
}

.idea-root[b-czylr3udqt]  .idea-score {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    color: var(--color-gray);
    font-size: 0.72rem;
    font-weight: 600;
}

.idea-root[b-czylr3udqt]  .idea-score-sep {
    opacity: 0.5;
}

/* --- Macierz wartość × wysiłek --- */

.idea-root[b-czylr3udqt]  .idea-matrix {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.idea-root[b-czylr3udqt]  .idea-matrix-axis--effort,
.idea-root[b-czylr3udqt]  .idea-matrix-row {
    display: grid;
    grid-template-columns: 2.25rem 1fr 1fr;
    gap: 0.75rem;
}

.idea-root[b-czylr3udqt]  .idea-matrix-axis {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-gray);
    text-align: center;
}

.idea-root[b-czylr3udqt]  .idea-matrix-axis--value {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.idea-root[b-czylr3udqt]  .idea-quadrant,
.idea-root[b-czylr3udqt]  .idea-unscored {
    background: var(--color-light);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius);
    padding: 0.75rem;
}

.idea-root[b-czylr3udqt]  .idea-unscored {
    margin-top: 1rem;
}

.idea-root[b-czylr3udqt]  .idea-quadrant h4,
.idea-root[b-czylr3udqt]  .idea-unscored h4 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-primary);
}

/* Akcent ćwiartek z mapy statusów — zielony „rób", czerwony „odpuść"; zero nowych kolorów. */
.idea-root[b-czylr3udqt]  .idea-quadrant--win { border-top: 3px solid var(--color-success); }
.idea-root[b-czylr3udqt]  .idea-quadrant--bet { border-top: 3px solid var(--color-info); }
.idea-root[b-czylr3udqt]  .idea-quadrant--filler { border-top: 3px solid var(--color-gold); }
.idea-root[b-czylr3udqt]  .idea-quadrant--skip { border-top: 3px solid var(--color-error); }

.idea-root[b-czylr3udqt]  .idea-quadrant-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 4rem;
}

/* --- Tabele --- */

/* .table-responsive daje przewijanie poziome, ale samo nie wystarcza: bez progu szerokości tabela
   ściska się do szerokości ekranu i kolumny robią się nieczytelne. Próg sprawia, że zamiast zgniatać
   treść, kontener zaczyna ją przewijać. */
.idea-root[b-czylr3udqt]  .idea-table-ideas {
    min-width: 860px;
}

.idea-root[b-czylr3udqt]  .idea-table-categories {
    min-width: 620px;
}

/* --- Formularze --- */

.idea-root[b-czylr3udqt]  .idea-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.idea-root[b-czylr3udqt]  .idea-category-add {
    display: grid;
    grid-template-columns: 1fr 5rem 6rem auto;
    gap: 0.5rem;
    align-items: center;
}

.idea-root[b-czylr3udqt]  .idea-confirm-text {
    flex: 1 1 auto;
    font-size: 0.85rem;
    color: var(--color-gray);
}

/* --- Responsywność (breakpointy globalne: 991.98 / 767.98 / 575.98) --- */

/* UKŁAD POZIOMY (od 768 px). To jest PRÓG, nie szerokość: sześć równych kolumn rozdziela między
   siebie dostępne miejsce, a gdy na kolumnę zostaje mniej niż 9 rem, tablica zaczyna się PRZEWIJAĆ
   zamiast zgniatać karty do słupków (przy oknie 1024 px kolumna zeszłaby inaczej do 103 px).
   Dostępne = okno − sidebar 260 − padding .panel-content 2×24 − padding .panel-card-body 2×20;
   sześć kolumn i pięć odstępów 12 px mieści się od ~1272 px: przy 1366 px kolumna ma 160 px,
   przy 1536 px — 188 px, przy 1920 px — 252 px. Zwinięcie sidebara oddaje kolejne 190 px.
   Reguła siedzi w media query, a nie w bazie, bo poniżej 768 px kolumny stoją jedna pod drugą
   i próg szerokości nie ma tam czego pilnować — dzięki temu oba układy nie zachodzą na siebie. */
@media (min-width: 768px) {
    .idea-root[b-czylr3udqt]  .idea-column {
        min-width: 9rem;
    }
}

@media (max-width: 767.98px) {
    /* TABLICA PIONOWO — kolumny jedna pod drugą, każda na pełną szerokość. Bez tego kanban zostawał
       poziomym paskiem także na telefonie, gdzie mieści się jedna kolumna.
       overflow wraca do `visible`: nie ma czego przewijać w poziomie, a `overflow-x:auto` wymusza
       obliczone `overflow-y:auto`, które przycinałoby cień karty przy najechaniu. */
    .idea-root[b-czylr3udqt]  .idea-board {
        flex-direction: column;
        overflow: visible;
        scroll-snap-type: none;
        padding-bottom: 0;
    }

    /* Kolumny na pełną szerokość, jedna pod drugą. `flex: 0 0 auto` gasi rozdzielanie szerokości
       z reguły bazowej — w osi pionowej flex-basis to wysokość, a kolumna ma być tak wysoka,
       jak jej karty. */
    .idea-root[b-czylr3udqt]  .idea-column {
        flex: 0 0 auto;
        width: 100%;
    }

    /* Macierz w jednej kolumnie: etykiety osi znikają, bo nagłówki ćwiartek niosą tę samą informację. */
    .idea-root[b-czylr3udqt]  .idea-matrix-axis--effort,
    .idea-root[b-czylr3udqt]  .idea-matrix-axis--value {
        display: none;
    }

    /* KATEGORIE: wiersz tabeli → karta z podpisanymi polami.
       To jedyna tabela w tym module, która jest FORMULARZEM (w komórkach siedzą inputy), a
       przewijany poziomo formularz jest nieużywalny — dlatego tu odchodzę od repozytoryjnego
       wzorca „.table-responsive i przewijaj". Podpisy pól biorą się z data-label na <td>,
       bo nagłówek tabeli jest w tym układzie ukryty. Tabela Lista jest tylko do odczytu
       i zostaje przy przewijaniu, spójnie z resztą panelu. */
    .idea-root[b-czylr3udqt]  .idea-table-categories,
    .idea-root[b-czylr3udqt]  .idea-table-categories tbody,
    .idea-root[b-czylr3udqt]  .idea-table-categories tr,
    .idea-root[b-czylr3udqt]  .idea-table-categories td {
        display: block;
        width: 100%;
    }

    .idea-root[b-czylr3udqt]  .idea-table-categories {
        min-width: 0;
    }

    .idea-root[b-czylr3udqt]  .idea-table-categories thead {
        display: none;
    }

    .idea-root[b-czylr3udqt]  .idea-table-categories tr {
        background: var(--color-white);
        border: 1px solid var(--color-gray-light);
        border-radius: var(--radius-sm);
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.75rem;
    }

    .idea-root[b-czylr3udqt]  .idea-table-categories td {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        border: none;
        padding: 0.35rem 0;
    }

    .idea-root[b-czylr3udqt]  .idea-table-categories td::before {
        content: attr(data-label);
        flex: 0 0 6.5rem;
        font-family: var(--font-heading);
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--color-gray);
    }

    .idea-root[b-czylr3udqt]  .idea-table-categories td .panel-input {
        flex: 1 1 auto;
        min-width: 0;
    }

    .idea-root[b-czylr3udqt]  .idea-matrix-row {
        grid-template-columns: 1fr;
    }

    /* Wiersz dodawania kategorii: nazwa na pełną szerokość, pod nią kolor i kolejność obok siebie,
       przycisk na dole. Wcześniejsze „1fr 1fr" rozdymało próbnik koloru do pół ekranu. */
    .idea-root[b-czylr3udqt]  .idea-category-add {
        grid-template-columns: 1fr 1fr;
    }

    .idea-root[b-czylr3udqt]  .idea-category-add > :first-child,
    .idea-root[b-czylr3udqt]  .idea-category-add > .panel-btn {
        grid-column: 1 / -1;
    }

    .idea-root[b-czylr3udqt]  .idea-category-add > .panel-btn {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    /* Tu NIE ma już reguł szerokości kolumny — od 767.98 w dół tablica jest pionowa, a kolumny
       biorą 100% szerokości. Poprzednia wersja ustawiała tu `min(84vw, 300px)`, czyli 300 px przy
       kontenerze o realnych 288 px (360 − 32 padding treści − 40 padding karty): kolumna była
       szersza od kontenera nawet wtedy, gdy była jedyna. */

    /* Szybkie dodawanie: pole nad przyciskiem, oba na pełną szerokość. Ikona to czysta ozdoba —
       znika, bo w dwóch rzędach zabierała miejsce i rozbijała kolejność (pole lądowało POD przyciskiem). */
    .idea-root[b-czylr3udqt]  .idea-quickadd {
        flex-wrap: wrap;
    }

    .idea-root[b-czylr3udqt]  .idea-quickadd > i {
        display: none;
    }

    .idea-root[b-czylr3udqt]  .idea-quickadd .panel-input,
    .idea-root[b-czylr3udqt]  .idea-quickadd .panel-btn {
        flex: 1 1 100%;
    }

    .idea-root[b-czylr3udqt]  .idea-quickadd .panel-btn {
        justify-content: center;
    }

    .idea-root[b-czylr3udqt]  .idea-quickadd-hint {
        margin-left: 0;
    }

    /* Stopka modalu ma trzy przyciski (Usuń / Anuluj / Zapisz) i nie zawijała, a .panel-modal
       przycina zawartość (overflow:hidden) — na telefonie „Zapisz" bywał poza kadrem. */
    .idea-root[b-czylr3udqt]  .panel-modal-footer {
        flex-wrap: wrap;
    }

    .idea-root[b-czylr3udqt]  .panel-modal-footer .panel-btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    /* Po zawinięciu w kolumnę kolejność DOM (Usuń / Anuluj / Zapisz) stawiałaby przycisk
       DESTRUKCYJNY na samej górze — czyli tam, gdzie trafia wzrok i kciuk. Odwracamy: najpierw
       akcja główna, na końcu usuwanie. Sama treść potwierdzenia idzie przed przyciskami, bo ma
       zostać przeczytana zanim cokolwiek się kliknie. */
    .idea-root[b-czylr3udqt]  .idea-confirm-text {
        flex: 1 1 100%;
        order: -3;
        text-align: center;
    }

    .idea-root[b-czylr3udqt]  .panel-modal-footer .panel-btn-primary {
        order: -2;
    }

    .idea-root[b-czylr3udqt]  .panel-modal-footer .panel-btn-edit {
        order: -1;
    }

    /* Lista zostaje tabelą przewijaną poziomo (wzorzec panelu), ale kolumny drugorzędne znikają —
       na 360 px liczy się, żeby tytuł, status i ocena były widoczne bez przewijania. */
    .idea-root[b-czylr3udqt]  .idea-col-optional {
        display: none;
    }

    .idea-root[b-czylr3udqt]  .idea-table-ideas {
        min-width: 480px;
    }

    /* Ćwiartki i kolumny oddychają ciaśniej — na 360 px liczy się każdy piksel treści. */
    .idea-root[b-czylr3udqt]  .idea-quadrant,
    .idea-root[b-czylr3udqt]  .idea-unscored,
    .idea-root[b-czylr3udqt]  .idea-column {
        padding: 0.6rem;
    }
}
/* /Shared/Calendar/CalendarView.razor.rz.scp.css */
/* Kalendarz panelu (ADR-0042) — siatka miesiąca 6×7 + agenda dnia. Tokeny z globalnego :root
   (DESIGN_SYSTEM); brak nowej zależności JS. Zakres = scoped CSS isolation (atrybut b-*). */

.cal[b-078ym2xtlt] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* --- Pasek nawigacji. Gęstość równana do paska filtrów, który stoi bezpośrednio pod nim:
   te same odstępy 0.5rem i ta sama wysokość kontrolek. Bez tła i paddingu .panel-filter-bar —
   dwa identyczne szare pudełka jedno nad drugim byłyby zmianą wyglądu, nie zagęszczeniem. --- */
.cal-toolbar[b-078ym2xtlt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cal-nav[b-078ym2xtlt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cal-title[b-078ym2xtlt] {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0;
    min-width: 11rem;
    text-align: center;
}

/* Date-picker toolbara — szerokość treści zamiast pełnej szerokości pola formularza, a metryki
   1:1 z polami .panel-filter-bar (app.css). Bez nich natywne pole ma 39 px przy 26 px sąsiednich
   .panel-btn-sm i to ONO ustawia wysokość całego wiersza. Wartości = metryki .panel-btn-sm
   pomniejszone o obramowanie 1.5px, którego przycisk nie ma; min-height, bo Chrome ignoruje
   line-height na polach z własnym widgetem. Klasa .panel-input zostaje w markupie — niesie
   obramowanie i focus-ring, które inaczej trzeba by tu odtwarzać. */
.cal-datepicker[b-078ym2xtlt] {
    max-width: 10.5rem;
    width: auto;
    min-height: calc(0.75rem * 1.5 + 0.5rem);
    padding: calc(0.25rem - 1.5px) calc(0.6rem - 1.5px);
    font-size: 0.75rem;
    line-height: 1.5;
}

/* --- Pasek filtrów: etykieta obok selecta; zwijanie tylko na wąskich ekranach (media query niżej) --- */
/* Margines UJEMNY jest celowy (#99 B) i nie jest błędem do „naprawienia": odstęp pasek → oś składał
   się z DWÓCH wartości — 20 px z `.cal { gap }` plus 12 px stąd, razem 32 px. Zejście samym gapem
   ścisnęłoby też toolbar ↔ filtry i oś ↔ agendę, czyli trzy pary zamiast jednej; −4 px podcina
   wyłącznie tę jedną parę i daje dokładnie połowę, czyli 16 px. */
.cal-filters[b-078ym2xtlt] { margin-bottom: -0.25rem; }
.cal-filter-field[b-078ym2xtlt] { display: inline-flex; align-items: center; gap: 0.4rem; }
/* Przycisk „Filtry" istnieje w markupie zawsze, ale pokazuje go dopiero breakpoint tabletu. */
.cal-filters-toggle[b-078ym2xtlt] { display: none; }
.cal-filters-count[b-078ym2xtlt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 100px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.65rem;
    font-weight: 700;
}

/* --- Siatka miesiąca --- */
.cal-grid[b-078ym2xtlt] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.4rem;
}

.cal-weekday[b-078ym2xtlt] {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray);
    padding: 0.25rem 0;
}

.cal-cell[b-078ym2xtlt] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    min-height: 5rem;
    padding: 0.4rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
    overflow: hidden;
}

.cal-cell:hover[b-078ym2xtlt] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.cal-cell--muted[b-078ym2xtlt] {
    background: var(--color-light);
}

.cal-cell--muted .cal-daynum[b-078ym2xtlt] {
    color: var(--color-gray);
    opacity: 0.6;
}

.cal-cell--today[b-078ym2xtlt] {
    border-color: var(--color-primary);
}

.cal-cell--today .cal-daynum[b-078ym2xtlt] {
    background: var(--color-primary);
    color: var(--color-white);
}

.cal-cell--selected[b-078ym2xtlt] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary) inset;
}

.cal-daynum[b-078ym2xtlt] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--color-dark);
}

.cal-cell-events[b-078ym2xtlt] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.cal-chip[b-078ym2xtlt] {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    line-height: 1.3;
    border-left: 3px solid var(--color-primary);
    background: rgba(10, 36, 99, .07);
    white-space: nowrap;
    overflow: hidden;
}

.cal-chip-time[b-078ym2xtlt] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cal-chip-label[b-078ym2xtlt] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-more[b-078ym2xtlt] {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--color-gray);
    padding-left: 0.2rem;
}

/* Kolor wg SessionType — spójny w komórce (kreska + tło) i w agendzie (kropka). */
.cal-type-regular[b-078ym2xtlt] { border-left-color: var(--color-info); background: rgba(37, 99, 235, .08); }
.cal-type-substitute[b-078ym2xtlt] { border-left-color: var(--color-warning); background: rgba(244, 162, 97, .14); }
.cal-type-individual[b-078ym2xtlt] { border-left-color: var(--color-purple); background: rgba(124, 58, 237, .08); }
.cal-type-additional[b-078ym2xtlt] { border-left-color: var(--color-success); background: rgba(22, 163, 74, .08); }

/* Event (K2) — odróżniony złotym akcentem od treningów (kreska + tło chipu, kropka agendy, ikona). */
.cal-chip.cal-kind-event[b-078ym2xtlt] { border-left-color: var(--color-gold); background: rgba(244, 162, 97, .16); }
.cal-dot.cal-kind-event[b-078ym2xtlt] { background: var(--color-gold); }
.cal-agenda-event-icon[b-078ym2xtlt] { color: var(--color-gold); font-size: .8rem; }

/* --- K4: przełącznik widoku --- */
.cal-viewswitch[b-078ym2xtlt] { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; }
.cal-view-active[b-078ym2xtlt] { background: var(--color-primary); color: var(--color-white); }

/* --- K4: oś czasu (tydzień/dzień). Trzy wiersze (.cal-trow) współdzielą szablon kolumn
   [gutter | dni…] → nagłówki, all-day i oś stoją w tych samych kolumnach. Liczba dni przychodzi
   z komponentu jako --cal-days, więc sam szablon może żyć TUTAJ i być nadpisany w media query
   (inline wygrywałoby z arkuszem i nie dałoby się zrobić przewijanej osi na telefonie). --- */
.cal-timegrid[b-078ym2xtlt] { --cal-gutter: 3.25rem; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.cal-trow[b-078ym2xtlt] {
    display: grid;
    grid-template-columns: var(--cal-gutter) repeat(var(--cal-days), minmax(0, 1fr));
    gap: 0.25rem;
    align-items: stretch;
}
/* Wysokość korpusu = wysokość godziny × szerokość okna godzin. Obie wartości z komponentu, żeby
   siatka, etykiety i bloki liczyły się z JEDNEJ liczby (Pułapka 1 z #6). */
.cal-tbody[b-078ym2xtlt] { height: calc(var(--cal-hour-px) * var(--cal-hours)); }

/* Wiersz nagłówków dni o 20 % niżej (37,6 → ~31 px): padding i oba fonty w dół. Padding NIE
   schodzi poniżej 0.15rem, bo .cal-dayhead--selected rysuje ring 2px INSET w polu paddingu —
   przy 0.1rem ring zjadłby cały prześwit i dotknął tekstu. Wiersz stoi nad .cal-tbody, więc
   jego wysokość nie wchodzi do wysokości osi liczonej z --cal-hour-px. */
.cal-dayhead[b-078ym2xtlt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0.15rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}
.cal-dayhead:hover[b-078ym2xtlt] { border-color: var(--color-primary); }
.cal-dayhead--today[b-078ym2xtlt] { border-color: var(--color-primary); background: var(--color-light); }
.cal-dayhead--selected[b-078ym2xtlt] { box-shadow: 0 0 0 2px var(--color-primary) inset; }
.cal-dayhead-dow[b-078ym2xtlt] { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--color-gray); line-height: 1.2; }
.cal-dayhead-num[b-078ym2xtlt] { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 800; color: var(--color-primary); line-height: 1.2; }

/* Pasek all-day: renderowany TYLKO gdy w zakresie są wydarzenia całodniowe (patrz komponent),
   więc nie musi się bronić pustym pudełkiem — bez tła, ramki i minimalnej wysokości; wysokość
   biorą same chipy. Gutter zostaje pusty (etykieta „Cały dzień" zdjęta), bo trzyma wyrównanie
   kolumn z nagłówkami dni i osią godzin. */
.cal-allday-cell[b-078ym2xtlt] { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.cal-allday-cell .cal-chip[b-078ym2xtlt] { cursor: pointer; }

/* Korpus osi: gutter godzin (etykiety absolutnie) + kolumny dni (linie godzin co --cal-hour-px). */
.cal-hours[b-078ym2xtlt] { position: relative; }
.cal-hourlabel[b-078ym2xtlt] { position: absolute; right: 0.4rem; transform: translateY(-0.5em); font-size: 0.64rem; color: var(--color-gray); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-daycol[b-078ym2xtlt] {
    position: relative;
    border-left: 1px solid var(--color-gray-light);
    /* Linie godzin liczone z --cal-hour-px — CELOWO bez wartości domyślnej: gdyby tu stała własna
       liczba, mogłaby po cichu rozjechać się z pozycjami bloków liczonymi w C# (Pułapka 1 z #6). */
    background: repeating-linear-gradient(to bottom,
        transparent 0,
        transparent calc(var(--cal-hour-px) - 1px),
        var(--color-gray-light) calc(var(--cal-hour-px) - 1px),
        var(--color-gray-light) var(--cal-hour-px));
    overflow: hidden;
}
.cal-daycol--today[b-078ym2xtlt] { background-color: rgba(10, 36, 99, .035); }
/* Kursor TYLKO tam, gdzie klik faktycznie coś robi — komponent dokłada tę klasę wyłącznie, gdy host
   przekazał OnAdd. Bez tego gatowania trener i rodzic dostaliby łapkę nad obszarem, który dla nich
   nic nie znaczy (a formularz i tak odrzuciłby im zapis). Wcześniej reguły `cursor` nie było wcale,
   więc funkcja była jednocześnie ukryta i nadwrażliwa. */
.cal-daycol--addable[b-078ym2xtlt] { cursor: pointer; }

/* --- #99 A: pas zaznaczonego slotu (1. klik w oś) --- */
/* pointer-events: none jak `.cal-drop-ghost` — pas nachodzi na kafle sesji leżące niżej, więc klik
   należący do istniejących zajęć musi przejść pod spód; inaczej zamiast szczegółów wystąpienia
   dostalibyśmy przestawienie zaznaczenia. Klikalny jest WYŁĄCZNIE przycisk (reguła niżej). */
.cal-slot[b-078ym2xtlt] {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 5;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border: 2px dashed var(--color-primary);
    border-radius: var(--radius-sm);
    background: rgba(10, 36, 99, .10);
    color: var(--color-primary);
    font-size: 0.64rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    /* 0.15rem, a nie 0.3rem jak w duchu dropu: przy najwęższej kolumnie dnia (72 px — `minmax(4.5rem, 1fr)`
       na telefonie) przycisk 62,3 px wystawał o ~2 px poza kolumnę, a `.cal-daycol { overflow: hidden }`
       ścinał mu narożnik. Zmierzone w Chrome na wygenerowanym bundlu scoped CSS. */
    padding: 0 0.15rem;
    pointer-events: none;
    white-space: nowrap;
}
/* Zakres godzin ustępuje przyciskowi: w wąskiej kolumnie (72 px na telefonie) chowa się, zamiast
   go wypychać. Dlatego overflow siedzi TUTAJ, a nie na `.cal-slot` — pas nie może obcinać przycisku,
   który jest od niego wyższy. */
.cal-slot-time[b-078ym2xtlt] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Slot 30 min ma przy --cal-hour-px: 36px dokładnie 18 px. Ten przycisk jest ŚWIADOMYM, LOKALNYM
   wyjątkiem od podłogi z DESIGN_SYSTEM.md („.panel-btn-sm → ~24 px. Niżej nie schodzimy — 24 px to
   minimalny sensowny obszar kliknięcia"): na prośbę właściciela schodzi o 20%, z 24,4 na 19,5 px.
   Wyjątek niesie klasa `.cal-slot-add`, więc dotyczy WYŁĄCZNIE pasa zaznaczenia w kalendarzu —
   globalnego `.panel-btn-sm` nie ruszamy, bo to kanoniczny przycisk wiersza tabeli w całym panelu.
   Skalujemy 0,8× wszystko naraz: font (czyli i „+", i napis — ikona FA jest glifem, więc idzie za
   font-size), padding i odstęp między nimi. Dzięki temu kurczy się cały przycisk, a nie sam napis
   w pudełku dawnego rozmiaru.
   Skutek uboczny na plus: przy 19,5 px przycisk niemal mieści się w 18-px pasie (wystaje ~0,8 px
   zamiast ~3,2 px), więc `.cal-daycol { overflow: hidden }` ma mu co ścinać znacznie mniej.
   Odzyskuje zdarzenia myszy, które pas oddał. */
.cal-slot-add[b-078ym2xtlt] {
    flex: none;
    pointer-events: auto;
    font-size: 0.6rem;          /* 0,75rem × 0,8 */
    padding: 0.16rem 0.48rem;   /* 0,2rem × 0,8 i 0,6rem × 0,8 */
    gap: 0.32rem;               /* 0,4rem × 0,8 */
}

/* Blok wystąpienia: absolutnie pozycjonowany (top/height z minut, left/width z kolumny nakładania). */
.cal-block[b-078ym2xtlt] {
    position: absolute;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0.1rem 0.3rem;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-info);
    background: rgba(37, 99, 235, .12);
    font-size: 0.66rem;
    line-height: 1.15;
    cursor: pointer;
    text-align: left;
}
.cal-block-time[b-078ym2xtlt] { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-block-label[b-078ym2xtlt] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Kolory bloku jak K2: trening wg .cal-type-* (reguły niżej, nie-scopowane), event złoty. */
.cal-block.cal-kind-event[b-078ym2xtlt] { border-left-color: var(--color-gold); background: rgba(244, 162, 97, .2); }

/* --- I5: live feedback przeciągania na osi --- */
/* Aktywna kolumna dnia (cel dragu) — subtelny akcent jak --today, lecz mocniejszy. */
.cal-daycol--dragover[b-078ym2xtlt] { background-color: rgba(10, 36, 99, .07); }
/* „Duch" docelowego slotu: placeholder o wysokości sesji (top/height inline z minut), snap 10 min.
   pointer-events:none → dragover/drop przechodzą do kolumny pod spodem; z-index nad blokami. */
.cal-drop-ghost[b-078ym2xtlt] {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 5;
    box-sizing: border-box;
    border: 2px dashed var(--color-primary);
    border-radius: var(--radius-sm);
    background: rgba(10, 36, 99, .10);
    color: var(--color-primary);
    font-size: 0.64rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0.1rem 0.3rem;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
}

/* --- Agenda dnia --- */
.cal-agenda[b-078ym2xtlt] {
    border-top: 1px solid var(--color-gray-light);
    padding-top: 1rem;
}

.cal-agenda-title[b-078ym2xtlt] {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.75rem;
}

.cal-agenda-list[b-078ym2xtlt] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cal-agenda-item[b-078ym2xtlt] {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.6rem 0.75rem;
    background: var(--color-light);
    border-radius: var(--radius-sm);
}

.cal-agenda-time[b-078ym2xtlt] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
    white-space: nowrap;
    min-width: 6.5rem;
}

.cal-agenda-main[b-078ym2xtlt] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.cal-agenda-head[b-078ym2xtlt] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.cal-dot[b-078ym2xtlt] {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    flex: none;
    background: var(--color-info);
    border-left: none;
}

/* Kropka agendy reużywa te same modyfikatory typu (kolor z border-left-color). */
.cal-dot.cal-type-regular[b-078ym2xtlt] { background: var(--color-info); }
.cal-dot.cal-type-substitute[b-078ym2xtlt] { background: var(--color-warning); }
.cal-dot.cal-type-individual[b-078ym2xtlt] { background: var(--color-purple); }
.cal-dot.cal-type-additional[b-078ym2xtlt] { background: var(--color-success); }

.cal-agenda-meta[b-078ym2xtlt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.85rem;
    font-size: 0.8rem;
    color: var(--color-gray);
}

.cal-agenda-meta i[b-078ym2xtlt] {
    margin-right: 0.2rem;
    opacity: 0.7;
}

/* --- I1: klikalne wystąpienia (kursor + hover) + modal szczegółów --- */
.cal-clickable[b-078ym2xtlt] { cursor: pointer; }
.cal-chip.cal-clickable:hover[b-078ym2xtlt] { filter: brightness(0.95); }
.cal-block.cal-clickable:hover[b-078ym2xtlt] { filter: brightness(0.92); }
.cal-agenda-item.cal-clickable:hover[b-078ym2xtlt] { box-shadow: var(--shadow-sm); }

.cal-detail-row[b-078ym2xtlt] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--color-dark);
    margin-bottom: 0.55rem;
}
.cal-detail-row i[b-078ym2xtlt] { width: 1rem; text-align: center; color: var(--color-gray); flex: none; }
.cal-detail-badges[b-078ym2xtlt] { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }

/* Modale kalendarza — węższe niż domyślny .panel-modal (krótka treść: szczegóły / jedno pytanie). */
.cal-modal--detail[b-078ym2xtlt] { max-width: 460px; }
.cal-modal--recurring[b-078ym2xtlt] { max-width: 420px; }

/* S3: sekcja zastępstwa w modalu szczegółów — oddzielona od reszty treści. */
.cal-detail-substitute[b-078ym2xtlt] { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-gray-light); }
.cal-substitute-picker[b-078ym2xtlt] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cal-substitute-select[b-078ym2xtlt] { max-width: 220px; }

/* --- drag&drop (kursory przeciągania); I3: cykliczne też przeciągalne (dialog), brak „not-allowed" --- */
.cal-draggable[b-078ym2xtlt] { cursor: grab; }
.cal-draggable:active[b-078ym2xtlt] { cursor: grabbing; }

/* --- Responsywność: GLOBALNE breakpointy aplikacji (app.css, DESIGN_SYSTEM.md), nie własne progi.
   Wcześniej kalendarz miał jedyny próg 640 px, więc tablet i podzielone okno (641–991 px) nie
   dostawały żadnej adaptacji: nadal 7 kolumn i komórki po 100 px. --- */

/* Tablet / podzielone okno — ciaśniejszy toolbar i niższe komórki miesiąca.
   .cal-title nie zmienia tu już font-size: desktop zszedł do 1rem, więc reguła byłaby martwa. */
@media (max-width: 991.98px) {
    .cal-title[b-078ym2xtlt] { min-width: 8rem; }
    .cal-datepicker[b-078ym2xtlt] { max-width: 9rem; }
    .cal-cell[b-078ym2xtlt] { min-height: 4.5rem; }
}

@media (max-width: 767.98px) {
    /* Oś PRZEWIJA SIĘ poziomo zamiast ściskać kolumny bez granicy: przy 360 px siedmiodniowy tydzień
       dawał ~38 px na dzień, czyli kilka znaków nazwy. min-content = suma minimów ścieżek, więc
       wiersz nie zejdzie poniżej sumy kolumn, ale też nie rozepchnie się długimi etykietami. */
    .cal-timegrid[b-078ym2xtlt] { overflow-x: auto; }
    .cal-trow[b-078ym2xtlt] {
        grid-template-columns: var(--cal-gutter) repeat(var(--cal-days), minmax(4.5rem, 1fr));
        min-width: min-content;
    }

    /* Pasek filtrów zwijany — cztery selecty zajmowały cały ekran nad siatką. */
    .cal-filters-toggle[b-078ym2xtlt] { display: inline-flex; margin-bottom: 0.5rem; }
    .cal-filters--collapsed[b-078ym2xtlt] { display: none; }
    .cal-filters[b-078ym2xtlt] { flex-direction: column; align-items: stretch; }
    .cal-filter-field[b-078ym2xtlt] { justify-content: space-between; }

    .cal-cell[b-078ym2xtlt] { min-height: 4rem; }
    .cal-agenda-item[b-078ym2xtlt] { flex-direction: column; gap: 0.35rem; }
}

@media (max-width: 575.98px) {
    /* Komórka miesiąca ma tu ~37 px szerokości — na godzinę I nazwę miejsca nie ma. Wcześniej znikała
       NAZWA (`.cal-chip-label { display: none }`), więc zostawało samo „16:00": użytkownik wiedział
       KIEDY, ale nie CZEGO dotyczy. Teraz odwrotnie — skracamy godzinę, nie nazwę grupy; pełne
       „HH:mm – HH:mm" i tak stoi w agendzie pod siatką. Reszta reguł odzyskuje piksele na tekst. */
    .cal-grid[b-078ym2xtlt] { gap: 0.15rem; }
    .cal-cell[b-078ym2xtlt] { min-height: 3.75rem; padding: 0.2rem; }
    .cal-cell .cal-chip[b-078ym2xtlt] { font-size: 0.62rem; padding: 0.05rem 0.15rem; }
    .cal-cell .cal-chip-time[b-078ym2xtlt] { display: none; }
}