/* PR P1-5: utility classes — replacement dla najczestszych inline styles.
 *
 * Cel: <500 inline styles + CSP style-src 'self' (bez 'unsafe-inline').
 * Aktualne 3317 -> kolejne PR-y migruja stopniowo.
 *
 * Konwencja: BEM-compatible utility (Tailwind-inspired) z prefiksem `.u-`
 * lub wzorce projektowe `.app-*`.
 */

/* === Spacing utilities === */
.u-mt-0 { margin-top: 0; }
.u-mt-1 { margin-top: 0.25rem; }
.u-mt-2 { margin-top: 0.5rem; }
.u-mt-3 { margin-top: 1rem; }
.u-mt-4 { margin-top: 1.5rem; }

.u-mb-0 { margin-bottom: 0; }
.u-mb-1 { margin-bottom: 0.25rem; }
.u-mb-2 { margin-bottom: 0.5rem; }
.u-mb-3 { margin-bottom: 1rem; }  /* 16px - top user freq 190× */
.u-mb-4 { margin-bottom: 1.5rem; }  /* 20px - freq 54× */

.u-p-0 { padding: 0; }  /* freq 104× */
.u-p-1 { padding: 0.25rem; }
.u-p-2 { padding: 0.5rem; }
.u-p-3 { padding: 1rem; }

/* === Display utilities === */
.u-inline { display: inline; }  /* freq 56× */
.u-flex { display: flex; }
.u-flex-row-gap-1 {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}  /* freq 33× */

/* === Text utilities === */
.u-text-center { text-align: center; }
.u-text-muted { color: var(--app-muted); }  /* freq 30× */
.u-text-red { color: var(--app-red-ink); }  /* freq 31× */
.u-text-nowrap { white-space: nowrap; }
.u-fs-11 { font-size: 11px; }
.u-fs-13 { font-size: 13px; }

/* === Composite — najczestsze patterny === */
.u-muted-sub {  /* freq 70× — font-size:11px;color:muted;margin-top:2px */
    font-size: 11px;
    color: var(--app-muted);
    margin-top: 2px;
}

.u-muted-sm {  /* freq 56× — color:muted;font-size:11.5px */
    color: var(--app-muted);
    font-size: 11.5px;
}

.u-muted-xs {  /* freq 52× — color:muted;font-size:11px */
    color: var(--app-muted);
    font-size: 11px;
}

.u-section-label {  /* freq 37× — uppercase muted label */
    font-size: 11px;
    font-weight: 700;
    color: var(--app-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}

.u-table-empty {  /* freq 35× — text-align:center;padding:24px;color:muted */
    text-align: center;
    padding: 24px;
    color: var(--app-muted);
}

.u-grid-full {  /* freq 34× — grid-column:1/-1 */
    grid-column: 1 / -1;
}

/* === Icon utilities === */
.u-icon-22 {  /* freq 97× — width:22px;height:22px (SVG icons) */
    width: 22px;
    height: 22px;
}
.u-icon-15 {  /* freq 21× — small SVG icons */
    width: 15px;
    height: 15px;
}
/* P52: mała ikona inline (np. domek przy adresie na karcie kartoteki). Bez tej definicji
   SVG z viewBox bez width/height rozdymał się do szerokości kontenera flex. */
.u-icon-14 {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* === Additional spacing (P1-5 batch composite) === */
.u-mb-5 { margin-bottom: 20px; }  /* freq 54× */
.u-mb-12 { margin-bottom: 12px; }  /* freq 26× */
.u-mb-14 { margin-bottom: 14px; }  /* freq 33× */
.u-mt-10 { margin-top: 10px; }  /* freq 23× */
.u-m-0 { margin: 0; }  /* freq 20× */

.u-pad-8 { padding: 8px; }  /* freq 23× */

.u-fs-12 { font-size: 12px; }
.u-fs-14 { font-size: 14px; }  /* freq 23× */
.u-fs-115 { font-size: 11.5px; }

/* === Display additions === */
.u-inline-flex { display: inline-flex; }  /* freq 23× */
.u-block { display: block; }
.u-w-full { width: 100%; }  /* freq 21× */
.u-w-auto { width: auto; }

/* === Color additions === */
.u-text-green { color: var(--app-green-ink); }  /* freq 21× */
.u-text-slate-400 { color: #94a3b8; }
.u-text-slate-500 { color: #64748b; }
.u-bg-white { background: #fff; }
.u-fw-600 { font-weight: 600; }
.u-fw-700 { font-weight: 700; }
.u-fw-800 { font-weight: 800; }
.u-cursor-pointer { cursor: pointer; }
.u-border-none { border: none; }
.u-text-right { text-align: right; }
.u-text-left { text-align: left; }

/* === P1-5 batch final: kolejne kompozytowe === */
.u-pad-8-px { padding: 8px; }  /* freq 23× — note: space syntax */
.u-mt-14 { margin-top: 14px; }  /* freq 19× */
.u-link-blue { color: var(--app-blue-ink); text-decoration: none; }  /* freq 19× */
.u-table-empty-18 {  /* freq 18× — text-align:center;padding:18px;color:muted */
    text-align: center;
    padding: 18px;
    color: var(--app-muted);
}
.u-muted-12 {  /* freq 18× — color:muted;font-size:12px */
    color: var(--app-muted);
    font-size: 12px;
}
.u-input-tight {  /* freq 17× — full-width tight input */
    width: 100%;
    padding: 4px;
    border: 1px solid var(--app-line);
    border-radius: 4px;
}
.u-muted-600 {  /* freq 17× — color:muted;font-weight:600 */
    color: var(--app-muted);
    font-weight: 600;
}
.u-table-empty-32 {  /* freq 16× */
    text-align: center;
    padding: 32px;
    color: var(--app-muted);
}
.u-cursor-list-clean {  /* freq 16× — cursor:pointer;list-style:none */
    cursor: pointer;
    list-style: none;
}
.u-bg-slate-soft {  /* freq 16× */
    background: var(--app-slate-soft);
    color: var(--app-slate-ink);
}
.u-fs-13-600 {  /* freq 14× — font-size:13px;font-weight:600 */
    font-size: 13px;
    font-weight: 600;
}
.u-w-32 { width: 32px; }  /* freq 13× */
.u-flex-row-gap-2 {  /* freq 13× */
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.u-flex-row-gap-1-5 {  /* freq 13× */
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.u-muted-sub-4 {  /* freq 12× — fs:11px;color:muted;mt:4px */
    font-size: 11px;
    color: var(--app-muted);
    margin-top: 4px;
}

/* === P1-5 medium batch — kompozyty 8-12 wystapien === */
.u-block-mb-6 { display: block; margin-bottom: 6px; }  /* freq 12× */
.u-pad-8-left { padding: 8px; text-align: left; }  /* freq 11× */
.u-muted-fs-11 { font-size: 11px; color: var(--app-muted); }  /* freq 11× */
.u-muted-sm-2 { color: var(--app-muted); font-size: 11.5px; margin-top: 2px; }  /* freq 11× */
.u-mt-18 { margin-top: 18px; }  /* freq 10× */
.u-fs-16 { font-size: 16px; }  /* freq 10× */
.u-muted-fs-12 { font-size: 12px; color: var(--app-muted); }  /* freq 10× */
.u-flex-row-gap-1-5b { display: flex; gap: 6px; }  /* freq 10× */
.u-text-orange { color: var(--app-orange-ink); }  /* freq 10× */
.u-block-fs-13 { display: block; font-size: 13px; }  /* freq 9× */
.u-muted-sm-4 { color: var(--app-muted); font-size: 11.5px; margin-top: 4px; }  /* freq 8× */
.u-muted-fs-12-mt-4 { font-size: 12px; color: #60708a; margin-top: 4px; }  /* freq 8× */

/* === P1-5 long-tail batch === */
.u-table-100 { width: 100%; border-collapse: collapse; }  /* 9× */
.u-cell-right { padding: 10px 12px; text-align: right; }  /* 9× */
.u-cell-head { padding: 10px 12px; background: #f8fafc; color: #475569; }  /* 9× */
.u-mb-16 { margin-bottom: 16px; }  /* 9× */
.u-pad-24-12 { padding: 24px 12px; }  /* 8× */
.u-rounded-12 { border-radius: 12px; }  /* 8× */
.u-w-full-2 { width: 100%; }  /* 7× alt */
.u-no-decoration { text-decoration: none; }  /* 7× */
.u-pad-24 { padding: 24px; }  /* 7× */
.u-fs-17-bold { font-size: 17px; font-weight: 900; color: #0f172a; }  /* 7× */
.u-kicker { font-size: 12px; color: var(--app-muted); text-transform: uppercase; }  /* 7× */
.u-display-contents { display: contents; }  /* 7× */
.u-row-border { border-bottom: 1px solid var(--app-line-2); padding: 12px 18px; }  /* 7× */
.u-row-left { width: 100%; text-align: left; }  /* 6× */
.u-table-empty-20 { text-align: center; padding: 20px; color: var(--app-muted); }  /* 6× */
.u-pad-card { padding: 8px 14px 14px; }  /* 6× */
.u-table-empty-32-24 { padding: 32px 24px; text-align: center; color: var(--app-muted); }  /* 6× */
.u-pad-14 { padding: 14px; }  /* 6× */
.u-disabled-row { opacity: .45; cursor: default; pointer-events: none; }  /* 6× */
.u-min-w-flex { min-width: 0; flex: 1; }  /* 6× */
.u-fs-13-flow { margin: 0 0 8px; font-size: 13px; }  /* 6× */
.u-fw-700-end { font-weight: 700; }  /* 6× */
.u-inline-flex-1 { display: inline-flex; align-items: center; gap: 6px; }  /* 6× */
.u-flex-gap-2-center { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }  /* 6× */
.u-flex-gap-2-only { display: flex; gap: 8px; }  /* 6× */
.u-flex-col-gap-2 { display: flex; flex-direction: column; gap: 8px; }  /* 6× */
.u-flex-col-gap-1-5 { display: flex; flex-direction: column; gap: 6px; }  /* 6× */
.u-block-mb-12 { display: block; margin-bottom: 12px; }  /* 6× */
.u-block-fs-125 { display: block; font-size: 12.5px; }  /* 6× */

/* === P1-5 atomic batch (sesja 2026-05-23 auto-2): 58 nowych atomowych utility === */
.u-items-center { align-items: center; }  /* 94× */
.u-flex-wrap { flex-wrap: wrap; }  /* 86× */
.u-gap-15 { gap: 6px; }  /* 50× */
.u-gap-2 { gap: 8px; }  /* 46× */
.u-justify-between { justify-content: space-between; }  /* 38× */
.u-text-blue { color: var(--app-blue-ink); }  /* 32× */
.u-gap-1 { gap: 4px; }  /* 31× */
.u-pad-18 { padding: 18px; }  /* 24× */
.u-flex-col { flex-direction: column; }  /* 23× */
.u-mb-px8 { margin-bottom: 8px; }  /* 23× */
.u-gap-3 { gap: 12px; }  /* 21× */
.u-mt-px8 { margin-top: 8px; }  /* 21× */
.u-mt-px4 { margin-top: 4px; }  /* 20× */
.u-mb-px10 { margin-bottom: 10px; }  /* 19× */
.u-gap-25 { gap: 10px; }  /* 19× */
.u-fs-125 { font-size: 12.5px; }  /* 19× */
.u-mt-px6 { margin-top: 6px; }  /* 18× */
.u-mt-px2 { margin-top: 2px; }  /* 17× */
.u-mt-12 { margin-top: 12px; }  /* 16× */
.u-mt-px16 { margin-top: 16px; }  /* 15× */
.u-mb-px4 { margin-bottom: 4px; }  /* 14× */
.u-mb-px6 { margin-bottom: 6px; }  /* 12× */
.u-min-w-0 { min-width: 0; }  /* 11× */
.u-flex-1 { flex: 1; }  /* 10× */
.u-text-ink { color: var(--app-ink); }  /* 10× */
.u-fs-18 { font-size: 18px; }  /* 10× */
.u-mb-px18 { margin-bottom: 18px; }  /* 9× */
.u-uppercase { text-transform: uppercase; }  /* 9× */
.u-inline-block { display: inline-block; }  /* 8× */
.u-mb-px16 { margin-bottom: 16px; }  /* 7× */
.u-fw-400 { font-weight: 400; }  /* 6× */
.u-overflow-x-auto { overflow-x: auto; }  /* 6× */
.u-items-start { align-items: flex-start; }  /* 5× */
.u-hidden { display: none; }  /* 5× */
.u-justify-end { justify-content: flex-end; }  /* 5× */
.u-fs-20 { font-size: 20px; }  /* 4× */
.u-justify-center { justify-content: center; }  /* 4× */
.u-pad-12 { padding: 12px; }  /* 4× */
.u-list-none { list-style: none; }  /* 4× */
.u-fs-10 { font-size: 10px; }  /* 4× */
.u-mb-px24 { margin-bottom: 24px; }  /* 3× */
.u-gap-4 { gap: 16px; }  /* 3× */
.u-mt-px20 { margin-top: 20px; }  /* 3× */
.u-text-slate-600 { color: #475569; }  /* 3× */
.u-gap-35 { gap: 14px; }  /* 3× */
.u-fs-135 { font-size: 13.5px; }  /* 3× */
.u-text-ink-2 { color: var(--app-ink-2); }  /* 3× */
.u-fw-500 { font-weight: 500; }  /* 2× */
.u-relative { position: relative; }  /* 2× */
.u-gap-05 { gap: 2px; }  /* 2× */
.u-overflow-hidden { overflow: hidden; }  /* 1× */
.u-ml-auto { margin-left: auto; }  /* 1× */
.u-fs-15 { font-size: 15px; }  /* 1× */
.u-opacity-50 { opacity: 0.5; }  /* 1× */
.u-cursor-default { cursor: default; }  /* 1× */
.u-bg-transparent { background: transparent; }  /* 1× */
.u-justify-start { justify-content: flex-start; }  /* 1× */
.u-flex-shrink-0 { flex-shrink: 0; }  /* 1× */

/* === P1-5 atomic batch 3 (sesja 2026-05-23 auto-2 part 2): 96 utility classes === */
.u-radius-8 { border-radius: 8px; }  /* 56× */
.u-bg-fafbfc { background: #fafbfc; }  /* 36× */
.u-border-line-2 { border: 1px solid var(--app-line-2); }  /* 30× */
.u-border-line { border: 1px solid var(--app-line); }  /* 30× */
.u-grid { display: grid; }  /* 29× */
.u-pad-10 { padding: 10px; }  /* 25× */
.u-pad-12-18 { padding: 12px 18px; }  /* 19× */
.u-bt-line-2 { border-top: 1px solid var(--app-line-2); }  /* 19× */
.u-m-0-0-10 { margin: 0 0 10px; }  /* 16× */
.u-bg-line-2 { background: var(--app-line-2); }  /* 12× */
.u-bg-f8fafc { background: #f8fafc; }  /* 12× */
.u-radius-lg { border-radius: var(--app-radius-lg); }  /* 11× */
.u-radius-6 { border-radius: 6px; }  /* 10× */
.u-fs-11pt { font-size: 11pt; }  /* 10× */
.u-grid-auto-240 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }  /* 10× */
.u-m-0-0-4 { margin: 0 0 4px; }  /* 9× */
.u-m-0-0-8 { margin: 0 0 8px; }  /* 9× */
.u-fs-10pt { font-size: 10pt; }  /* 9× */
.u-ml-8 { margin-left: 8px; }  /* 8× */
.u-pad-6-10 { padding: 6px 10px; }  /* 8× */
.u-radius-pill { border-radius: 999px; }  /* 8× */
.u-pl-20 { padding-left: 20px; }  /* 7× */
.u-bb-line-2 { border-bottom: 1px solid var(--app-line-2); }  /* 7× */
.u-grid-auto-260 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }  /* 6× */
.u-m-0-0-6 { margin: 0 0 6px; }  /* 6× */
.u-fs-22 { font-size: 22px; }  /* 6× */
.u-pad-16 { padding: 16px; }  /* 6× */
.u-h-full { height: 100%; }  /* 6× */
.u-ws-pre-wrap { white-space: pre-wrap; }  /* 6× */
.u-grid-auto-200 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }  /* 6× */
.u-ls-04 { letter-spacing: 0.04em; }  /* 6× */
.u-m-6-0-0 { margin: 6px 0 0; }  /* 5× */
.u-place-center { place-items: center; }  /* 5× */
.u-fs-24 { font-size: 24px; }  /* 5× */
.u-w-48 { width: 48px; }  /* 5× */
.u-h-48 { height: 48px; }  /* 5× */
.u-border-base { border: 1px solid var(--app-border); }  /* 5× */
.u-bg-card { background: var(--app-bg-card); }  /* 5× */
.u-mnw-280 { min-width: 280px; }  /* 5× */
.u-my-14 { margin: 14px 0; }  /* 5× */
.u-font-mono { font-family: monospace; }  /* 5× */
.u-mw-720 { max-width: 720px; }  /* 5× */
.u-text-1e40af { color: #0f172a; }  /* 5× */
.u-mnw-140 { min-width: 140px; }  /* 5× */
.u-pad-14-16 { padding: 14px 16px; }  /* 5× */
.u-mnw-200 { min-width: 200px; }  /* 5× */
.u-h-4 { height: 4px; }  /* 5× */
.u-m-0-0-12 { margin: 0 0 12px; }  /* 5× */
.u-fs-normal { font-style: normal; }  /* 4× */
.u-text-ellipsis { text-overflow: ellipsis; }  /* 4× */
.u-bg-f8fbff { background: #f8fbff; }  /* 4× */
.u-items-end-css { align-items: end; }  /* 4× */
.u-object-cover { object-fit: cover; }  /* 4× */
.u-gap-px9 { gap: 9px; }  /* 4× */
.u-text-b91c1c { color: #b91c1c; }  /* 4× */
.u-text-92400e { color: #92400e; }  /* 4× */
.u-mx-auto { margin: 0 auto; }  /* 4× */
.u-border-e2e8f0 { border: 1px solid #e2e8f0; }  /* 4× */
.u-pad-6-12 { padding: 6px 12px; }  /* 4× */
.u-pad-8-0 { padding: 8px 0; }  /* 4× */
.u-gap-px3 { gap: 3px; }  /* 4× */
.u-w-120 { width: 120px; }  /* 3× */
.u-col-full { grid-column: 1 / -1; }  /* 3× */
.u-w-44 { width: 44px; }  /* 3× */
.u-h-44 { height: 44px; }  /* 3× */
.u-bg-blue-soft { background: var(--app-blue-soft); }  /* 3× */
.u-fw-900 { font-weight: 900; }  /* 3× */
.u-bg-fef3c7 { background: #fef3c7; }  /* 3× */
.u-grid-2cols { grid-template-columns: 1fr 1fr; }  /* 3× */
.u-border-collapse { border-collapse: collapse; }  /* 3× */
.u-mw-520 { max-width: 520px; }  /* 3× */
.u-mxw-120 { max-width: 120px; }  /* PR-C: podgląd logo wspólnoty */
.u-mxh-120 { max-height: 120px; }  /* PR-C: podgląd logo wspólnoty */
.u-radius-4 { border-radius: 4px; }  /* 3× */
.u-text-0f172a { color: #0f172a; }  /* 3× */
.u-bg-blue { background: var(--app-blue); }  /* 3× */
.u-gap-px18 { gap: 18px; }  /* 3× */
.u-h-8 { height: 8px; }  /* 3× */
.u-border-e5e7eb { border: 1px solid #e5e7eb; }  /* 3× */
.u-bg-fee2e2 { background: #fee2e2; }  /* 2× */
.u-pad-6-0 { padding: 6px 0; }  /* 2× */
.u-mr-4 { margin-right: 4px; }  /* 2× */
.u-pt-14 { padding-top: 14px; }  /* 2× */
.u-fs-14pt { font-size: 14pt; }  /* 2× */
.u-radius-12 { border-radius: 12px; }  /* 1× */
.u-pad-10-14 { padding: 10px 14px; }  /* 1× */
.u-w-10 { width: 10px; }  /* 1× */
.u-h-10 { height: 10px; }  /* 1× */
.u-radius-2 { border-radius: 2px; }  /* 1× */
.u-mnw-240 { min-width: 240px; }  /* 1× */
.u-bb-line { border-bottom: 1px solid var(--app-line); }  /* 1× */
.u-ml-6 { margin-left: 6px; }  /* 1× */
.u-radius-circle { border-radius: 50%; }  /* 1× */
.u-mr-8 { margin-right: 8px; }  /* 1× */
.u-ls-08 { letter-spacing: 0.08em; }  /* 1× */
.u-mw-280 { max-width: 280px; }  /* 1× */
.u-text-60708a { color: #60708a; }  /* 1× */
.u-text-white { color: #fff; }  /* 1× */

/* === P1-5 batch 4: dynamic value progress bars (CSS-var-only) ===
 * Inline styles "height:100%;background:COLOR;width:{{ x }}%" → CSS vars.
 * Trick: te konwersje LIKWIDUJA inline-style attribute jezeli zostaje
 * tylko `--var: value`, ktore tests_no_inline_styles.py wyklucza
 * (CSS_VAR_ONLY_PATTERN).
 */
.u-progress-fill {
  height: 100%;
  width: var(--progress-w);
}
.u-progress-fill--green { background: var(--app-green); }
.u-progress-fill--red { background: var(--app-red); }
.u-progress-fill--orange { background: var(--app-orange); }
.u-progress-fill--blue { background: var(--app-blue); }
.u-progress-fill-dynamic {
  height: 100%;
  width: var(--progress-w);
  background: var(--progress-bg);
}

/* === P1-5 batch 4 compound: 50+ utility classes for repeating patterns === */
.u-btn-reset-flex-row { background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; text-align: left; }
.u-chip-slate { background: var(--app-slate-soft); color: var(--app-slate-ink); }
.u-chip-green-soft { background: #e9f8ef; color: #10864a; }
.u-chip-red-bold { background: #fee; color: #c00; font-weight: 700; }
.u-chip-gray-soft { background: #f4f5f7; color: #1f2937; }
.u-progress-track-6 { height: 6px; background: var(--app-line-2); border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.u-edit-highlight { margin-bottom: 16px; border: 2px solid var(--app-blue-ink); }
.u-box-800 { padding: 24px; max-width: 800px; margin: 0 auto; }
.u-empty-40 { text-align: center; padding: 40px; color: var(--app-muted); }
.u-empty-40-wp { text-align: center; padding: 40px; color: var(--wp-muted); }
.u-empty-dashed { padding: 18px; text-align: center; color: var(--app-muted); background: #fafbfc; border-radius: 8px; border: 1px dashed var(--app-line); }
.u-input-soft { width: 100%; padding: 6px; border: 1px solid #d9e1ef; border-radius: 4px; margin-bottom: 8px; }
.u-link-bold-blue { font-weight: 800; color: #1f2937; text-decoration: none; }
.u-row-card-56 { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--app-line-2); background: #fff; border-radius: 8px; padding: 10px; }
.u-row-card-80 { display: grid; grid-template-columns: 80px 1fr auto; gap: 10px; border: 1px solid var(--app-line-2); background: #fff; border-radius: 8px; padding: 10px; }
.u-row-auto-3 { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--app-line-2); text-align: left; }
.u-box-520-auto { max-width: 520px; margin: 40px auto; }
.u-empty-italic-36 { padding: 36px; text-align: center; color: #64748b; font-style: italic; background: #f8fafc; border-radius: 8px; }
.u-h-16pt { margin: 0 0 8px; font-size: 16pt; }
.u-bb-soft { border-bottom: 1px solid #e5e7eb; }
.u-pad-0-8 { padding: 0 8px; }
.u-my-12 { margin: 12px 0; }
.u-mt-px3 { margin-top: 3px; }
.u-banner-red { background: #991b1b; color: #fff; }
.u-mt-20-blue { margin-top: 20px; color: #0f172a; }
.u-muted-pad-14 { color: var(--app-muted); padding: 14px 0; }
.u-mnw-900 { min-width: 900px; }
.u-mnw-280-comp { min-width: 280px; }
.u-fs-13-muted-mb-14 { font-size: 13px; color: var(--app-muted); margin: 0 0 14px; }
.u-text-125-muted-line { font-size: 12.5px; color: var(--app-muted); line-height: 1.5; }
.u-square-13 { width: 13px; height: 13px; }
.u-section-h-14 { margin: 14px 0 4px; font-size: 14px; }
.u-section-h-13 { font-size: 13px; font-weight: 700; margin: 8px 0; }
.u-wp-text2-12 { font-size: 12px; color: var(--wp-text2); margin: 0 0 8px; }
.u-text-orange-or-red { color: var(--app-orange-ink, var(--app-red-ink)); }
.u-wp-blue-600 { color: var(--wp-blue); font-weight: 600; }
.u-card-footer-dark { background: #0f172a; color: #fff; border-radius: 0 0 var(--app-radius-lg) var(--app-radius-lg); display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.u-scroll-320 { max-height: 320px; overflow-y: auto; margin-top: 10px; }
.u-grid-auto-150 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; margin-bottom: 14px; }
.u-segment-btn { flex-direction: column; text-align: left; padding: 12px; min-height: 74px; }
.u-col-100 { display: flex; flex-direction: column; gap: 4px; min-width: 100px; }
.u-m-14 { margin: 14px; }
.u-bt-soft-pad { border-top: 1px solid #cbd5e1; padding-top: 6px; margin-top: 4px; }
.u-w-full-h60 { width: 100%; height: 60px; }
.u-bt-line-2-pad-12 { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--app-line-2); }
.u-hover-row { display: flex; align-items: center; gap: 14px; border: 2px solid #e2e8f0; border-radius: 10px; padding: 16px; cursor: pointer; transition: all .15s; }
.u-row-clickable { display: flex; gap: 10px; padding: 10px 0; cursor: pointer; }

/* === P1-5 batch 5: more compound mappings === */
.u-pad-12-14-14 { padding: 12px 14px 14px; }
.u-row-empty-10-18 { padding: 10px 18px; color: var(--app-muted); font-size: 12px; }
.u-grid-100-1-140 { display: grid; grid-template-columns: 100px 1fr 140px; gap: 12px; align-items: center; margin-bottom: 10px; }
.u-grid-160-1 { display: grid; grid-template-columns: 160px 1fr; gap: 8px 14px; font-size: 13px; }
.u-card-info-blue { margin-bottom: 16px; background: #f8fbff; border-color: var(--app-blue-soft); }
.u-muted-12-mt-14 { color: var(--app-muted); font-size: 12px; margin: 14px 0 0; }
.u-mt-6-mb-4-fs-13 { margin: 6px 0 4px; font-size: 13px; }
.u-block-fs-13-margin { display: block; font-size: 13px; margin: 8px 0 4px; }
.u-fs-95pt { font-size: 9.5pt; }
.u-soft-pad-row { padding: 6px 10px; background: #f9fafb; border: 1px solid #e5e7eb; }
.u-pad-12-20 { padding: 12px 20px; }
.u-pad-32 { padding: 32px; }
.u-pad-40 { padding: 40px; }
.u-warning-banner-40 { padding: 40px; text-align: center; background: #fef3c7; border: 1px solid #fde68a; border-radius: 8px; }
.u-pl-28 { padding-left: 28px; }
.u-tag-left-soft { margin-left: 8px; font-size: 11.5px; padding: 2px 8px; }
.u-btn-danger-imp { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; background-image: none !important; }
.u-btn-danger-ghost-imp { background: none !important; border-color: #dc2626 !important; color: #dc2626 !important; background-image: none !important; }
.u-card-footer-soft { border-radius: 0 0 var(--app-radius-lg) var(--app-radius-lg); background: #fff; padding: 6px 14px 14px; border-top: 1px solid var(--app-line-2); }
.u-th-label-soft { text-align: left; padding: 12px 18px; color: var(--app-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.u-flex-gap-15-center { display: flex; align-items: center; gap: 6px; }
.u-flex-gap-2-center-simple { display: flex; align-items: center; gap: 8px; }
.u-flex-gap-25-center { display: flex; align-items: center; gap: 10px; }
.u-flex-gap-3-center { display: flex; align-items: center; gap: 12px; }
.u-flex-gap-35-center { display: flex; align-items: center; gap: 14px; }
.u-flex-gap-4-center { display: flex; align-items: center; gap: 16px; }
.u-flex-gap-px18-center { display: flex; align-items: center; gap: 18px; }
.u-col-gap-1 { display: flex; flex-direction: column; gap: 4px; }
.u-col-gap-15 { display: flex; flex-direction: column; gap: 6px; }
.u-col-gap-2 { display: flex; flex-direction: column; gap: 8px; }
.u-col-gap-25 { display: flex; flex-direction: column; gap: 10px; }
.u-col-gap-3 { display: flex; flex-direction: column; gap: 12px; }
.u-flex-center-center { display: flex; justify-content: center; align-items: center; }
.u-flex-wrap-gap-2 { flex-wrap: wrap; gap: 8px; }
.u-flex-wrap-gap-15 { flex-wrap: wrap; gap: 6px; }
.u-flex-wrap-only { flex-wrap: wrap; }
.u-segment-tall { min-height: 74px; padding: 12px; text-align: left; flex-direction: column; }
.u-chip-slate-strict { background: var(--app-slate-soft); color: var(--app-slate-ink); }
.u-bg-f9fafb { background: #f9fafb; }
.u-bg-fff { background: #fff; }
.u-chip-red-soft { background: #fef2f2; color: #b91c1c; }
.u-chip-amber-soft { background: #fffbeb; color: #92400e; }
.u-border-amber { border: 1px solid #fde68a; }
.u-border-red-soft { border: 1px solid #fecaca; }
.u-border-green-soft { border: 1px solid #bbf7d0; }
.u-text-1f2937 { color: #1f2937; }
.u-text-374151 { color: #374151; }
.u-text-dc2626 { color: #dc2626; }
.u-text-0891b2 { color: #0891b2; }
.u-text-0b3a8c { color: #0f172a; }
.u-bg-wp-blue-soft { background: var(--wp-blue-soft, #eef2f7); }
.u-text-wp-blue { color: var(--wp-blue, #0f172a); }
.u-text-wp-muted { color: var(--wp-muted, #64748b); }
.u-text-blue-2 { color: var(--app-blue); }
.u-text-green-2 { color: var(--app-green); }
.u-bg-red { background: var(--app-red); }
.u-bg-red-soft { background: var(--app-red-soft); }
.u-bg-orange-soft { background: var(--app-orange-soft); }
.u-bg-orange { background: var(--app-orange); }
.u-bg-green { background: var(--app-green); }

/* === P1-5 batch 6: multi-line + conditional patterns === */
.u-dashed-box-ccc { border: 2px dashed #ccc; padding: 20px; text-align: center; border-radius: 10px; margin-bottom: 15px; }
.u-btn-primary-base { padding: 12px 20px; background: #1f2937; color: #fff; border: none; }
.u-btn-green-inline { display: inline-block; padding: 10px 15px; background: #16a34a; color: #fff; }
.u-btn-green-action { margin-top: 10px; background: #16a34a; color: #fff; border: none; padding: 8px 14px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 600; }
.u-btn-blue-action { background: #0f172a; color: #fff; border: none; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 600; }
.u-btn-danger-simple { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; }
.u-border-success { border-color: #16a34a; background: #f0fdf4; }
.u-ml-10-fs-12-475 { margin-left: 10px; font-size: 12px; color: #475569; }
.u-ml-10-fs-12-647 { margin-left: 10px; font-size: 12px; color: #64748b; }
.u-avatar-36-blue { width: 36px; height: 36px; border-radius: 50%; background: var(--app-blue-soft); color: var(--app-blue-ink); display: grid; place-items: center; font-weight: 700; }
.u-muted-12-margin-10-0 { color: var(--app-muted); font-size: 12px; margin: 10px 0 0; }
.u-grid-auto-280-14 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.u-col-full-success-box { grid-column: 1 / -1; padding: 10px 12px; background: #f0fdf4; border: 1px solid #16a34a; border-radius: 6px; }
.u-block-success-clickable { display: block; font-weight: 600; font-size: 13px; color: #14532d; cursor: pointer; }
.u-col-full-info-dashed { grid-column: 1 / -1; margin: -10px 0 8px; padding: 10px 12px; background: #eef2f7; border: 1px dashed #0f172a; border-radius: 6px; }
.u-col-full-info-box { grid-column: 1 / -1; margin-top: 14px; padding: 14px; background: var(--app-blue-soft); border: 1px solid var(--app-blue); border-radius: var(--app-radius-lg); }
.u-dark-footer-bar { background: #0f172a; color: #fff; border-radius: 0 0 var(--app-radius-lg) var(--app-radius-lg); display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.u-row-3col-bb { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--app-line-2); text-align: left; }
.u-mt-15 { margin-top: 15px; }
.u-mt-10-only { margin-top: 10px; }

/* Slate-soft conditional KPI icon — used when status is "empty/zero".
   Replaces {% if not X %}style="..."{% endif %} with class :empty fallback. */
.app-kpi__icon--slate { background: var(--app-slate-soft); color: var(--app-slate-ink); }

/* === P1-5 batch 7 conditional rewrite === */
.u-bg-ink-text-white { background: var(--app-ink); color: #fff; }
.u-bg-fef2f2 { background: #fef2f2; }

/* === P1-5 final: dynamic CSS variable utilities === */
.u-dyn-w { width: var(--dyn-w); }
.u-dyn-h { height: var(--dyn-h); }
.u-dyn-bg { background: var(--dyn-bg); }
.u-dyn-color { color: var(--dyn-color); }
.u-dyn-fs { font-size: var(--dyn-fs); }
.u-dyn-mw { max-width: var(--dyn-mw); }
.u-dyn-mnw { min-width: var(--dyn-mnw); }
.u-dyn-mh { max-height: var(--dyn-mh); }
.u-dyn-mnh { min-height: var(--dyn-mnh); }
.u-dyn-opacity { opacity: var(--dyn-opacity); }
.u-dyn-radius { border-radius: var(--dyn-radius); }
.u-dyn-pad { padding: var(--dyn-pad); }
.u-dyn-margin { margin: var(--dyn-margin); }
.u-dyn-top { top: var(--dyn-top); }
.u-dyn-left { left: var(--dyn-left); }
.u-dyn-right { right: var(--dyn-right); }
.u-dyn-bottom { bottom: var(--dyn-bottom); }

/* === P1-5 final 2: more dynamic CSS var classes === */
.u-dyn-border { border: var(--dyn-border); }
.u-dyn-border-color { border-color: var(--dyn-border-color); }
.u-dyn-border-left { border-left: var(--dyn-border-left); }
.u-dyn-gtc { grid-template-columns: var(--dyn-gtc); }
.u-dyn-fstyle { font-style: var(--dyn-fstyle); }
.u-dyn-fw { font-weight: var(--dyn-fw); }
.u-dyn-ta { text-align: var(--dyn-ta); }
.u-dyn-ws { white-space: var(--dyn-ws); }
.u-dyn-cursor { cursor: var(--dyn-cursor); }
.u-pad-10-0-only { padding: 10px 0; }
.u-opacity-60 { opacity: 0.6; }
.u-pad-14-18 { padding: 14px 18px; }
.u-bg-white { background: #fff; }
.u-opacity-85 { opacity: 0.85; }

/* === P74 noty odsetkowe: akordeon podglądu paczki + formularze okresu (CSP-safe, bez JS) === */
.app-field--inline { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; }
.app-field--inline .app-field__label { margin: 0; }
.app-table--compact th, .app-table--compact td { padding: 5px 8px; font-size: 12px; }
.u-interest-accordion-row > td { background: #f8fafc; }
.u-interest-details { width: 100%; }
.u-interest-summary { cursor: pointer; padding: 8px 14px; font-size: 12.5px; font-weight: 600; color: #1f2937; }
.u-interest-summary:hover { background: #eef2f7; }
.u-interest-details__body { padding: 8px 14px 14px; }
.u-interest-period-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; }
.u-interest-period-form__label { font-size: 12px; font-weight: 600; color: #1f2937; }
.u-interest-period-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.u-interest-period-inline input[type="date"] { font-size: 11px; padding: 2px 4px; }

/* === Ujednolicenie UI 2026-05-30: ostatnie statyczne inline styles -> klasy ===
 * Eliminacja 83 statycznych inline style w szablonach UI (test core.tests_no_inline_styles
 * wymaga 0). Wartości 1:1 odwzorowują poprzednie inline, więc render bez zmian. */
.u-grid-fill-240 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.u-grid-fill-220 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.u-grid-fill-200 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.u-grid-fill-200-10 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.u-mnw-16rem { min-width: 16rem; }
.u-mnw-18rem { min-width: 18rem; }
.u-mnw-11rem { min-width: 11rem; }
.u-mnw-9rem { min-width: 9rem; }
.u-mnw-8rem { min-width: 8rem; }
.u-mnw-260 { min-width: 260px; }
.u-w-9rem { width: 9rem; }
.u-w-140 { width: 140px; }
.u-img-fluid-8 { max-width: 100%; border-radius: 8px; }
.u-maxh-300-scroll { max-height: 300px; overflow-y: auto; }
.u-dropdown-280 { position: absolute; top: calc(100% + 4px); right: 0; min-width: 280px; z-index: 20; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.u-mt-10-hidden { margin-top: 10px; display: none; }
.u-hint-mt6-475 { margin-top: 6px; font-size: 12px; color: #475569; }
.u-box-soft-e5 { border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; background: #f8fafc; margin: 8px 0; }
.u-h-13-600 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.u-note-mt8-647 { margin: 8px 0 0; font-size: 11px; color: #64748b; }

/* === Pole okresu (picker miesiąca) — pole zwęża się DO TREŚCI („maj 2026"), ikona kalendarza
   tuż za wartością, bez luki i bez rozciągania na szerokość kontenera. field-sizing:content
   (Chrome/Edge) daje dopasowanie do wpisanej wartości; min/max chronią skrajne miesiące.
   2026-05-30 (poprzednio width:100% rozciągał pole do kontenera → luka na szerokich stronach). */
input[type="month"]{
  field-sizing: content;
  width: auto;
  min-width: 7rem;
  max-width: 220px;
  box-sizing: border-box;
  accent-color: #1f2937; /* kalendarz/kontrolki w kolorze grafitowym, nie niebieskim */
}
/* Zaznaczony segment pickera (miesiąc/rok) NIE może być niebieski — domyślny systemowy
   highlight to błękit; nadpisujemy na grafit (zakaz koloru niebieskiego w aplikacji). 2026-05-30 */
input[type="month"]::-webkit-datetime-edit-month-field:focus,
input[type="month"]::-webkit-datetime-edit-year-field:focus,
input[type="month"]::-webkit-datetime-edit-day-field:focus{
  background-color: #1f2937;
  color: #fff;
  outline: none;
  border-radius: 3px;
}