@layer sh_utils{
/* 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;}


.u-w-5rem{width: 5rem;}



/* === 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-w-90{width: 90px;}

/* kartoteka: pole powierzchni m² (2026-06-07) */


.u-w-110{width: 110px;}

/* kartoteka: pole oznaczenia składnika (2026-06-07) */


.u-nowrap-btn{white-space: nowrap;}

/* kartoteka: Zapisz bez łamania (2026-06-07) */


/* Nadpisanie dla shellu: data-forms-standard-v213 wymusza input width:100% (dawniej: nadpisanie) —
   wyższa specyficzność + (dawniej: nadpisanie) + późniejsze ładowanie przywracają zwężenie pól. */






/* P4 (2026-06-07): klasy w miejsce inline style= z community_detail (guard no-inline-styles). */


.u-flex-grow-280{flex: 1 1 280px;min-width: 0;}


.u-self-end-row{align-self: end;flex-direction: row;}


.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-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-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;}


.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;}



/* === 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ą{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 */;}



/* Audyt 2026-06-20: utility do ekstrakcji inline-styli (CSP style-src 'self').
   Dodane (addytywnie) dla rozliczenia mediów + szczegółu uchwały. */


.u-my-8{margin: 8px 0;}


.u-mt-16{margin-top: 16px;}


.u-maxw-120{max-width: 120px;}


.u-gap-12{gap: 12px;}


.u-items-end{align-items: flex-end;}


.u-bb-light{border-bottom: 1px solid #eef2f7;}


.u-bb-e5e7eb{border-bottom: 1px solid #e5e7eb;}


.u-flex-1-240{flex: 1 1 240px;}


.u-flex-1-320{flex: 1 1 320px;}


.u-flex-0-200{flex: 0 1 200px;}


.u-radius-10{border-radius: 10px;}


.u-border-teal-2{border: 2px solid #0d9488;}


.u-pad-6-8{padding: 6px 8px;}


.u-pad-12-14{padding: 12px 14px;}


.u-m-8-0-0{margin: 8px 0 0;}


}