/*
 * Bootstrap-compatible utility classes — replacement po wycięciu bootstrap.min.css w DS-003.
 *
 * Aplikacja używa Bootstrap-style utility classes (mt-N, mb-N, p-N, flex-column,
 * align-items-center, justify-content-end, text-center itp.) w setkach miejsc.
 * MudBlazor 7.x ma własny zestaw utility, ale NIE w pełni overlapping z Bootstrap:
 *   - MudBlazor ma: pa-N, ma-N, mx-N, my-N, px-N, py-N, d-*, align-center, justify-center
 *   - MudBlazor brak: p-N, m-N, mt-N, mb-N, ml-N, mr-N, pt-N, pb-N, pl-N, pr-N,
 *     text-center/-left/-right, flex-column, flex-row, flex-grow-N, flex-shrink-N,
 *     align-items-*, justify-content-*, rounded-xl
 *
 * Ten plik dostarcza brakujące klasy z Bootstrap convention (`!important` by design).
 * Skala spacing zgodna z Bootstrap (rem-based): 0=0, 1=0.25rem, 2=0.5rem, 3=1rem,
 * 4=1.5rem, 5=3rem, 8=4rem (extension).
 *
 * Linkowanie: w index.html PO tokens.css ale PRZED app.css i MudBlazor.min.css.
 *
 * Future cleanup: gdy MudBlazor 8+ dostarczy te utility natywnie lub aplikacja
 * zmigruje do MudBlazor utility names (mt-N → pa-N, justify-content-end → justify-end),
 * cały ten plik można usunąć (DS-019 future scope).
 */

/* ===== Text alignment ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ===== Spacing — margin all ===== */
.m-0 { margin: 0 !important; }

/* ===== Spacing — margin top ===== */
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mt-8 { margin-top: 4rem !important; }

/* ===== Spacing — margin bottom ===== */
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }

/* ===== Spacing — margin left / right ===== */
.ml-auto { margin-left: auto !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-auto { margin-right: auto !important; }

/* ===== Spacing — margin y (top + bottom combined) ===== */
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

/* ===== Spacing — padding all ===== */
.p-0 { padding: 0 !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }

/* ===== Spacing — padding top ===== */
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }

/* ===== Spacing — padding x ===== */
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

/* ===== Spacing — padding y ===== */
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }

/* ===== Flex direction / grow / shrink ===== */
.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

/* ===== Flex alignment — align-items (cross-axis) ===== */
.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-stretch { align-items: stretch !important; }

/* ===== Flex alignment — justify-content (main-axis) ===== */
.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }

/* ===== Border radius — Bootstrap-style alias (Bootstrap 4 rounded-xl).
   Używa --radius-xl z tokens.css (20px). */
.rounded-xl { border-radius: var(--radius-xl) !important; }