/* ------------------------------------------------------------------------------------------
   refleks-utilities.css
   Compatibility layer for the Bootstrap 5 utility classes still used across ~40 report/dialog
   pages after Bootstrap was removed. Only the classes actually in use are implemented, mapped
   to MudBlazor theme variables (--mud-palette-*) so they follow the light/dark theme.

   NOTE: MudBlazor already ships flex/display (d-flex, d-none, justify-*, align-*) and the
   directional spacing helpers (mt-/mb-/ml-/mr-/mx-/my-/pt-/... with a 4px scale). Those are
   intentionally NOT redefined here to avoid clobbering MudBlazor's own component styling.
   Only Bootstrap-only tokens (all-sides m-/p-, start/end ms-/me-/ps-/pe-, auto margins) are
   added, plus grid, buttons, cards, tables, forms, text colours, progress and spinner.
   ------------------------------------------------------------------------------------------ */

/* ---------- Grid: container / row / columns ---------- */
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: .75rem;
    padding-left: .75rem;
}

@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1370px; } }
@media (min-width: 1600px) { .container { max-width: 1570px; } }

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -.75rem;
    margin-left: -.75rem;
}

.row > [class*="col-"],
.row > .col,
.row > .col-auto {
    padding-right: .75rem;
    padding-left: .75rem;
}

.row.g-2 {
    margin-right: -.25rem;
    margin-left: -.25rem;
}

.row.g-2 > [class*="col-"],
.row.g-2 > .col,
.row.g-2 > .col-auto {
    padding: .25rem;
}

.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }

.col-1  { flex: 0 0 auto; width: 8.33333333%; }
.col-2  { flex: 0 0 auto; width: 16.66666667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.33333333%; }
.col-5  { flex: 0 0 auto; width: 41.66666667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.33333333%; }
.col-8  { flex: 0 0 auto; width: 66.66666667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
    .col-sm-6 { flex: 0 0 auto; width: 50%; }
}

@media (min-width: 768px) {
    .col-md-1  { flex: 0 0 auto; width: 8.33333333%; }
    .col-md-2  { flex: 0 0 auto; width: 16.66666667%; }
    .col-md-3  { flex: 0 0 auto; width: 25%; }
    .col-md-4  { flex: 0 0 auto; width: 33.33333333%; }
    .col-md-5  { flex: 0 0 auto; width: 41.66666667%; }
    .col-md-6  { flex: 0 0 auto; width: 50%; }
    .col-md-7  { flex: 0 0 auto; width: 58.33333333%; }
    .col-md-8  { flex: 0 0 auto; width: 66.66666667%; }
    .col-md-9  { flex: 0 0 auto; width: 75%; }
    .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: var(--mud-default-borderradius, 4px);
    background-color: transparent;
    color: var(--mud-palette-text-primary);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.btn:disabled,
.btn.disabled {
    opacity: .55;
    pointer-events: none;
}

.btn-sm { padding: .25rem .5rem; font-size: .875rem; }

.btn-link {
    color: var(--mud-palette-primary);
    background-color: transparent;
    border-color: transparent;
}
.btn-link:hover { text-decoration: underline; }

/* Command-anchor buttons (add/edit/delete cell actions). Both spellings are used across
   the grids; Bootstrap's .nav-link went away with Bootstrap, and .navlink was never defined.
   Give them a link colour + pointer so they read as clickable. Not MudBlazor's .mud-nav-link. */
.nav-link, .navlink { cursor: pointer; color: var(--mud-palette-primary); }
.nav-link:hover, .navlink:hover { text-decoration: underline; }

.btn-fill,
.btn-primary {
    background-color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}
.btn-success { background-color: var(--mud-palette-success); border-color: var(--mud-palette-success); color: var(--mud-palette-success-text); }
.btn-danger  { background-color: var(--mud-palette-error);   border-color: var(--mud-palette-error);   color: var(--mud-palette-error-text); }
.btn-info    { background-color: var(--mud-palette-info);    border-color: var(--mud-palette-info);    color: var(--mud-palette-info-text); }
.btn-warning { background-color: var(--mud-palette-warning); border-color: var(--mud-palette-warning); color: var(--mud-palette-warning-text); }
.btn-light   { background-color: var(--mud-palette-surface);  border-color: var(--mud-palette-lines-default); color: var(--mud-palette-text-primary); }
.btn-secondary { background-color: var(--mud-palette-secondary); border-color: var(--mud-palette-secondary); color: #fff; }

.btn-outline-primary {
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    background-color: transparent;
}
.btn-outline-primary:hover {
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
}

.btn-group,
.btn-group-sm,
.btn-toolbar {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
}

/* ---------- Cards ---------- */
.card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius, 4px);
    color: var(--mud-palette-text-primary);
}

.card-body { flex: 1 1 auto; padding: 1rem; }
.card-title { margin-bottom: .5rem; font-weight: 600; }
.card-text { margin-bottom: 0; }

/* ---------- Tables ---------- */
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--mud-palette-text-primary);
    border-collapse: collapse;
    vertical-align: top;
}

.table > :not(caption) > * > * {
    padding: .5rem .5rem;
    border-bottom: 1px solid var(--mud-palette-table-lines, var(--mud-palette-lines-default));
}

.table-sm > :not(caption) > * > * { padding: .25rem .25rem; }

.table-bordered > :not(caption) > * > * {
    border: 1px solid var(--mud-palette-table-lines, var(--mud-palette-lines-default));
}

.table-borderless > :not(caption) > * > * { border: 0; }

.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Forms ---------- */
.form-label { margin-bottom: .25rem; display: inline-block; }

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs, var(--mud-palette-lines-default));
    border-radius: var(--mud-default-borderradius, 4px);
}

.form-check { display: block; min-height: 1.5rem; padding-left: 1.5em; }
.form-check-inline { display: inline-flex; align-items: center; margin-right: 1rem; padding-left: 0; }
.form-check-input { margin-right: .35rem; }
.form-check-label { display: inline-block; }

/* ---------- Text alignment & colours ---------- */
.text-center { text-align: center !important; }
.text-start  { text-align: left !important; }
.text-end    { text-align: right !important; }
.text-right  { text-align: right !important; }
.text-left   { text-align: left !important; }

.text-primary   { color: var(--mud-palette-primary) !important; }
.text-secondary { color: var(--mud-palette-secondary) !important; }
.text-success   { color: var(--mud-palette-success) !important; }
.text-danger    { color: var(--mud-palette-error) !important; }
.text-info      { color: var(--mud-palette-info) !important; }
.text-warning   { color: var(--mud-palette-warning) !important; }
.text-muted     { color: var(--mud-palette-text-secondary) !important; }
.text-dark      { color: var(--mud-palette-text-primary) !important; }
.text-white     { color: #fff !important; }

.bg-primary { background-color: var(--mud-palette-primary) !important; color: var(--mud-palette-primary-text); }
.bg-info    { background-color: var(--mud-palette-info) !important; color: var(--mud-palette-info-text); }

.fw-bold   { font-weight: 700 !important; }
.fw-normal { font-weight: 400 !important; }

/* ---------- Progress & spinner ---------- */
.progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius, 4px);
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: var(--mud-palette-primary);
    transition: width .6s ease;
}

.progress-info { background-color: var(--mud-palette-info); }

.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -.125em;
    border: .25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

/* ---------- Misc / Bootstrap-only tokens not covered by MudBlazor ---------- */
.w-100 { width: 100% !important; }
.float-end { float: right !important; }
.float-start { float: left !important; }
.overflow-auto { overflow: auto !important; }
.rounded { border-radius: var(--mud-default-borderradius, 4px) !important; }
.border { border: 1px solid var(--mud-palette-lines-default) !important; }
.border-1 { border-width: 1px !important; }

/* Auto margins (Bootstrap start/end naming; Mud only ships ml-/mr-/mx- auto) */
.ms-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.mx-auto { margin-right: auto !important; margin-left: auto !important; }

/* All-sides & start/end spacing (Bootstrap 0.25rem scale) — tokens Mud names differently */
.m-0 { margin: 0 !important; }
.m-1 { margin: .25rem !important; }
.m-2 { margin: .5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: .25rem !important; }
.p-2 { padding: .5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: .25rem !important; }
.ms-2 { margin-left: .5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }

.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: .25rem !important; }
.me-2 { margin-right: .5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }

.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: .25rem !important; }
.ps-2 { padding-left: .5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }

.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: .25rem !important; }
.pe-2 { padding-right: .5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }

/* ---------- Fixed-size editor helpers (cw = component width, chi = component height) ---------- */
/* chi-220 is a bounded scroll box (always paired with overflow-auto). Do not add a matching
   "ch-220" height rule: the report pages' wrappers grow to fit their table and scroll via
   .content — clamping them to a fixed height squeezes a whole report into a 220px sliver. */
.cw-400 { width: 400px; max-width: 100%; }
.cw-480 { width: 480px; max-width: 100%; }
.chi-220 { height: 220px; }

/* ---------- Alert boxes (Bootstrap subset still used by validation messages) ---------- */
.alert {
    position: relative;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

/* ---------- RfPopup (MudOverlay-based modal) ---------- */
/* Sit at dialog z-index so it clears the AppBar/Drawer; internal MudSelect popovers
   still render above it, matching MudDialog behaviour. */
.rf-popup-overlay {
    z-index: var(--mud-zindex-dialog, 1400) !important;
}

.rf-popup-overlay .mud-overlay-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rf-popup-center {
    display: flex;
    max-width: 95vw;
    max-height: 92vh;
}

.rf-popup-paper {
    display: flex;
    flex-direction: column;
    max-width: 95vw;
    max-height: 92vh;
    overflow-x: hidden;
    overflow-y: auto;
    /* Surface and background are near-identical in the dark palettes, so elevation alone does
       not separate the popup from the page behind it; the hairline does. */
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--rf-radius-lg, 12px);
}

.rf-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem .5rem .6rem 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.rf-popup-title {
    font-weight: 600;
    font-size: 1.1rem;
}

.rf-popup-body {
    /* Vertical scrolling only: .row's negative side margins would otherwise
       produce a horizontal scrollbar inside the popup. */
    overflow-x: hidden;
    overflow-y: auto;
}