/* Utility layer: small single-purpose helpers that replace the most common inline
   style="…" patterns during the U1 migration (Phase B). Loaded LAST so a utility
   wins over a component default at equal specificity. Nothing references these in
   Phase A — introducing them is a no-op until templates start using them.

   NOTE: `.row` is intentionally absent — templates/content/homepage.html already
   ships class="row" as an unstyled block; a generic `.row { display:flex }` here
   would silently restyle it. Use `.flex`/`.row-between` instead. */

/* Text color */
.text-muted { color: var(--muted); }

/* Text size */
.text-sm { font-size: .9rem; }

/* Text alignment / wrapping / weight */
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }
.fw-600 { font-weight: 600; }

/* Margin-top / margin-bottom scale (0, .25, .5, 1, 1.5rem) */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-3 { margin-bottom: 1rem; }

/* Gap scale (flex/grid) */
.gap-1 { gap: .4rem; }

/* Padding scale */
.p-1 { padding: .4rem; }

/* Layout helpers */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.hidden { display: none; }
.clickable { cursor: pointer; }

/* A flex row with the two ends pushed apart (label ↔ action), wrapping on narrow. */

/* Responsive card grid used by the settings / dashboard tile screens. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }

/* Narrower centered content column for forms / prose. */

/* --- Phase B: exact-value classes replacing recurring inline style= patterns.
   Each reproduces a specific inline declaration set byte-for-byte (verified per page
   by the computed-style snapshot), so migrating style="…" → class changes nothing.
   Values are dictated by the templates, not a clean scale — keep them exact. */

/* margins / paddings seen as inline shorthands */
.m-0 { margin: 0; }
.m-15 { margin: .15rem 0; }
.m-20 { margin: .2rem 0; }
.m-30 { margin: .3rem 0; }
.m-020 { margin: .2rem 0 0; }
.m-040 { margin: .4rem 0 0; }
.mt-04 { margin-top: .4rem; }
.mt-075 { margin-top: .75rem; }
.p-05 { padding: .5rem; }
.cell { padding: .3rem .5rem; }
.pad-56 { padding: .5rem .6rem; }
.pad-36 { padding: .3rem .6rem; }

/* text */
.text-left { text-align: left; }
.text-danger { color: #dc2626; }
.text-ok { color: #16a34a; }
.text-warn { color: #b45309; }
.caption { color: var(--muted); font-size: .85rem; }
.fs-105 { font-size: 1.05rem; }
.fs-08 { font-size: .8rem; }

/* layout / controls */
.field { width: 100%; padding: .5rem; margin: .3rem 0 1rem; }
.field-tight { width: 100%; padding: .5rem; margin: .3rem 0; }
.table-full { width: 100%; border-collapse: collapse; }
.split-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.d-inline { display: inline; }
.border-top { border-top: 1px solid var(--border); }
.flex-1 { flex: 1; }
.overflow-auto { overflow: auto; }
.max-40 { max-width: 40rem; }
.max-44 { max-width: 44rem; }
.max-48 { max-width: 48rem; }
.ctl { background: transparent; color: var(--text); border: 1px solid var(--border); }

/* solid badge backgrounds */
.bg-ok { background: #16a34a; }
.bg-danger { background: #dc2626; }
.bg-warn { background: #b45309; }

/* flex/grid helpers + more exact shorthands (cross-file recurring inline patterns) */
.items-center { align-items: center; }
.gap-05 { gap: .5rem; }
.flex-col { flex-direction: column; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.fw-400 { font-weight: 400; }
.col-span { grid-column: 1 / 3; }
.pad-25 { padding: .2rem .5rem; }
.pad-50 { padding: .5rem 0; }
.pad-357 { padding: .35rem .7rem; }
.mt-06 { margin-top: .6rem; }
.m-300 { margin: .3rem 0 0; }
.m-501 { margin: .5rem 0 1rem; }
.m-1501 { margin: 1.5rem 0 1rem; }
.m-12501 { margin: 1.25rem 0 1rem; }
.m-2820 { margin: .2rem .8rem .2rem 0; }
.hr-soft { border: 0; border-top: 1px solid var(--border); margin: .5rem 0 1rem; }
.ctl-danger { background: transparent; color: #dc2626; border: 1px solid var(--border); }
.h-sub { font-size: 1.1rem; margin: .2rem 0 .6rem; }
.m-1202 { margin: 1.2rem 0 .2rem; }
.m-1502 { margin: 1.5rem 0 .2rem; }

/* --- Fáze C2: přesné třídy pro opakující se (≥2×) inline vzory --- */
.flex-none { flex: 0 0 auto; }
.mx-auto { margin: 0 auto; }
.w-2 { width: 2rem; }
.w-6 { width: 6rem; }
.w-8 { width: 8rem; }
.min-12 { min-width: 12rem; }
.min-14 { min-width: 14rem; }
.max-28 { max-width: 28rem; }
.max-36 { max-width: 36rem; }
.mr-3 { margin-right: 1rem; }
.m-05 { margin: .5rem 0; }
.m-301 { margin: .3rem 0 1rem; }
.m-2505 { margin: .25rem 0 .5rem; }
.m-list { margin: .3rem 0 1rem 1.5rem; }
.p-035 { padding: .35rem; }
.fs-11 { font-size: 1.1rem; }
.fs-085 { font-size: .85rem; }
.d-contents { display: contents; }
.inline-center { display: inline-flex; align-items: center; gap: .3rem; }
.anchor-scroll { margin-top: 1rem; scroll-margin-top: 1rem; }
.text-crimson { color: #991b1b; }
.text-forest { color: #166534; }
.danger-box { max-width: 44rem; margin-top: 1rem; border: 2px solid #dc2626; }
.danger-rule { border-left: 4px solid #dc2626; margin-top: 1rem; }
.codeblock { white-space: pre-wrap; background: var(--bg); padding: .75rem; border-radius: 8px; border: 1px solid var(--border); font-size: .85rem; overflow: auto; }
.codeblock-sm { white-space: pre-wrap; background: var(--bg); padding: .6rem; border-radius: 8px; border: 1px solid var(--border); font-size: .8rem; overflow: auto; margin: .4rem 0 0; }

/* --- Fáze C: base.html chrome (přesné třídy) --- */
.gap-06 { gap: .6rem; }
.ml-3 { margin-left: 1rem; }
.m-035 { margin: .35rem 0; }
.pad-4595 { padding: .45rem .95rem; }

/* table / form / badge patterns (recurring across list + edit screens) */
.pr-05 { padding-right: .5rem; }
.py-1 { padding: .4rem 0; }
.pad-255 { padding: .25rem .5rem; }
.pt-06 { padding-top: .6rem; }
.border-bottom { border-bottom: 1px solid var(--border); }
.th { text-align: left; border-bottom: 1px solid var(--border); }
.bg-gray { background: #6b7280; }
.text-amber2 { color: #d97706; }
.text-blue { color: #2563eb; }
.btn-link-danger { background: none; border: 0; color: #dc2626; cursor: pointer; }
.max-26 { max-width: 26rem; }
.max-52 { max-width: 52rem; }
.max-56 { max-width: 56rem; }
.m-1 { margin: 1rem 0; }
.m-04 { margin: .4rem 0; }
.input { width: 100%; padding: .5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.field-label { display: block; font-size: .9rem; color: var(--muted); margin-bottom: .3rem; }
.card-soft { margin: 1rem 0; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); }
.mt-125 { margin-top: 1.25rem; }
.m-600 { margin: .6rem 0 0; }
.mt-08 { margin-top: .8rem; }

/* component-ish patterns */
.link-plain { text-decoration: none; color: inherit; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.tile-title { margin-top: 0; font-size: 1.1rem; }
.border-danger { border-color: #dc2626; }

/* --- Fáze C: monitoring/backups zbytky --- */
.o-55 { opacity: .55; }
.bl-danger { border-left: 4px solid #dc2626; }
.m-3506 { margin: .35rem 0 .6rem; }

/* --- Fáze C4-lite: podmíněné (mixed static+cond) --- */
.stat-num { font-size: 2rem; font-weight: 600; line-height: 1.1; }
.text-inherit { color: inherit; }
.sw-tile { display: block; border-radius: var(--radius); padding: 1rem; cursor: pointer; }
.sw-sel { border: 2px solid var(--brand); }
.sw-unsel { border: 2px solid var(--border); }