/**
 * ============================================================================
 * MUAADH UTILITIES — Atomic CSS utility classes
 * ============================================================================
 *
 * Single source of truth for utility classes consolidated from
 * muaadh-core.css in Phase 13 Wave 15 (band 13, 2026-05-13).
 *
 * Owns (9 families, ~125 rules):
 *   - .muaadh-margin-*   (33 rules — margin scale + sides)
 *   - .muaadh-padding-*  (16 rules — padding scale + sides)
 *   - .muaadh-text-*     (25 rules — alignment, transforms, sizes)
 *   - .muaadh-background-* (14 rules — bg color/shorthand utilities)
 *   - .muaadh-icon-*     (13 rules — icon size + state utilities)
 *   - .muaadh-display-*  (8 rules — display: none/block/flex/etc.)
 *   - .muaadh-flex-*     (7 rules — flex direction/wrap/grow)
 *   - .muaadh-position-* (5 rules — position helpers)
 *   - .muaadh-gap-*      (4 rules — gap scale)
 *
 * Atomic by design — each rule sets ONE property. Used as composable
 * primitives in blade templates wherever inline style="..." would be
 * tempting (see project rule: no inline style without justification).
 *
 * Loaded on every page via shell layouts (linked in every layout
 * shell since utilities are used everywhere).
 * ============================================================================
 */


/* ============================================================================
 * APPENDED (Phase 13 Wave 15 — utilities): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-margin-top-40 { margin-top: 40px; }

.muaadh-margin-top-20 {
  margin-top: var(--space-5);
}

.muaadh-margin-0 { margin: 0; }

.muaadh-margin-bottom-0 { margin-bottom: 0; }

.muaadh-margin-bottom-1 { margin-bottom: var(--space-1); }

.muaadh-margin-bottom-2 { margin-bottom: var(--space-2); }

.muaadh-margin-bottom-3 { margin-bottom: var(--space-3); }

.muaadh-margin-bottom-4 { margin-bottom: var(--space-4); }

.muaadh-margin-top-1 { margin-top: var(--space-1); }

.muaadh-margin-top-2 { margin-top: var(--space-2); }

.muaadh-margin-top-3 { margin-top: var(--space-3); }

.muaadh-margin-top-4 { margin-top: var(--space-4); }

.muaadh-margin-bottom-5 { margin-bottom: var(--space-5); }

.muaadh-margin-bottom-8 { margin-bottom: var(--space-8); }

.muaadh-margin-top-8 { margin-top: var(--space-8); }

.muaadh-margin-start-0 { margin-inline-start: 0; }

.muaadh-margin-start-1 { margin-inline-start: var(--space-1); }

.muaadh-margin-start-2 { margin-inline-start: var(--space-2); }

.muaadh-margin-start-auto { margin-inline-start: auto; }

.muaadh-margin-end-1 { margin-inline-end: var(--space-1); }

.muaadh-margin-end-2 { margin-inline-end: var(--space-2); }

.muaadh-margin-end-3 { margin-inline-end: var(--space-3); }

.muaadh-margin-inline-1 { margin-inline: var(--space-1); }

.muaadh-margin-inline-4 { margin-inline: var(--space-4); }

.muaadh-margin-x-auto { margin-inline: auto; }

.muaadh-margin-block-2 { margin-block: var(--space-2); }

.muaadh-margin-block-3 { margin-block: var(--space-3); }

.muaadh-margin-block-4 { margin-block: var(--space-4); }

.muaadh-margin-block-5 { margin-block: var(--space-5); }

.muaadh-margin-block-1 { margin-block: var(--space-1); }

.muaadh-margin-right-1 { margin-inline-end: 0.25rem; }

.muaadh-margin-right-2 { margin-inline-end: 0.5rem; }

.muaadh-margin-right-3 { margin-inline-end: 1rem; }


/* ============================================================================
 * APPENDED (Phase 13 Wave 15 — utilities): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-padding-0 { padding: 0; }

.muaadh-padding-2 { padding: var(--space-2); }

.muaadh-padding-3 { padding: var(--space-3); }

.muaadh-padding-4 { padding: var(--space-4); }

.muaadh-padding-bottom-0 { padding-bottom: 0; }

.muaadh-padding-start-3 { padding-inline-start: var(--space-3); }

.muaadh-padding-inline-2 { padding-inline: var(--space-2); }

.muaadh-padding-inline-3 { padding-inline: var(--space-3); }

.muaadh-padding-block-1 { padding-block: var(--space-1); }

.muaadh-padding-block-2 { padding-block: var(--space-2); }

.muaadh-padding-block-3 { padding-block: var(--space-3); }

.muaadh-padding-block-4 { padding-block: var(--space-4); }

.muaadh-padding-block-5 { padding-block: var(--space-5); }

.muaadh-padding-top-3 { padding-top: var(--space-3); }

.muaadh-padding-bottom-3 { padding-bottom: var(--space-3); }

.muaadh-padding-inline-20 { padding-inline: 20px; }


/* ============================================================================
 * APPENDED (Phase 13 Wave 15 — utilities): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-text-primary-theme { color: var(--theme-primary); }

.muaadh-text-danger-theme { color: var(--theme-danger); }

.muaadh-text-primary { color: var(--text-primary); }

.muaadh-text-muted { color: var(--text-muted); }

.muaadh-text-inverse { color: var(--text-inverse); }

.muaadh-text-success { color: var(--action-success); }

.muaadh-text-danger { color: var(--action-danger); }

.muaadh-text-warning { color: var(--action-warning); }

.muaadh-text-info { color: var(--action-info); }

.muaadh-text-white { color: var(--theme-text-white); }

.muaadh-text-dark { color: var(--text-primary); }

.muaadh-text-decoration-line-through { text-decoration: line-through; }

.muaadh-text-align-center { text-align: center; }

.muaadh-text-sm { font-size: var(--text-sm); }

.muaadh-text-decoration-none { text-decoration: none; }

.muaadh-text-mono { font-family: 'Roboto Mono', monospace; }

.muaadh-text-break-all { word-break: break-all; }

.muaadh-text-eyebrow {
    font-size: var(--text-xs);
    letter-spacing: var(--theme-letter-spacing-tight);
}

.muaadh-text-align-start { text-align: start; }

.muaadh-text-align-end { text-align: end; }

.muaadh-text-nowrap { white-space: nowrap; }

.muaadh-text-uppercase { text-transform: uppercase; }

.muaadh-text-capitalize { text-transform: capitalize; }

.muaadh-text-xs { font-size: var(--text-xs); }

.muaadh-text-align-right { text-align: end; }


/* ============================================================================
 * APPENDED (Phase 13 Wave 15 — utilities): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-background-danger-subtle {
    background-color: var(--danger-light);
}

.muaadh-background-warning-subtle {
    background-color: var(--warning-light);
}

.muaadh-background-light-themed { background: var(--theme-bg-light); }

.muaadh-background-elevated { background: var(--surface-elevated); }

.muaadh-background-primary { background-color: var(--action-primary); }

.muaadh-background-success { background-color: var(--action-success); }

.muaadh-background-danger { background-color: var(--action-danger); }

.muaadh-background-warning { background-color: var(--action-warning); }

.muaadh-background-light { background-color: var(--surface-secondary); }

.muaadh-background-dark { background-color: var(--surface-inverse); }

.muaadh-background-surface { background-color: var(--surface-card); }

.muaadh-background-info      { background-color: var(--action-info); }

.muaadh-background-secondary { background-color: var(--surface-secondary); }

.muaadh-background-opacity-10 { opacity: 0.1; }


/* ============================================================================
 * APPENDED (Phase 13 Wave 15 — utilities): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-icon {
    display: inline-block;
    vertical-align: -0.125em;
    fill: currentColor;
    stroke: currentColor;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.muaadh-icon--lg { width: 1.25em; height: 1.25em; }

.muaadh-icon--2x { width: 2em; height: 2em; }

.muaadh-icon--2-5x { width: 2.5em; height: 2.5em; font-size: 2.5em; }

.muaadh-icon--3x { width: 3em; height: 3em; }

.muaadh-icon--4x { width: 4em; height: 4em; }

.muaadh-icon--5x { width: 5em; height: 5em; }

.muaadh-icon-bubble       { flex-shrink: 0; }

.muaadh-icon-bubble--35   { width: 35px; height: 35px; }

.muaadh-icon-bubble--45   { width: 45px; height: 45px; }

.muaadh-icon-bubble--70   { width: 70px; height: 70px; }

.muaadh-icon-circle { width: 60px; height: 60px; }

.muaadh-icon-clock { width: 1em; height: 1em; }


/* ============================================================================
 * APPENDED (Phase 13 Wave 15 — utilities): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-display-none { display: none !important; }

.muaadh-display-inline { display: inline; }

.muaadh-display-inline-block { display: inline-block; }

.muaadh-display-block { display: block; }

.muaadh-display-flex { display: flex; }

.muaadh-display-inline-flex { display: inline-flex; }

.muaadh-display-4 { font-size: var(--text-4xl); font-weight: 300; line-height: 1.2; }


/* ============================================================================
 * APPENDED (Phase 13 Wave 15 — utilities): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-flex-column { flex-direction: column; }

.muaadh-flex-column-reverse { flex-direction: column-reverse; }

.muaadh-flex-grow-1 { flex-grow: 1; }

.muaadh-flex-shrink-0 { flex-shrink: 0; }

.muaadh-flex-nowrap { flex-wrap: nowrap; }

.muaadh-flex-wrap { flex-wrap: wrap; }

.muaadh-flex-1 { flex: 1; }


/* ============================================================================
 * APPENDED (Phase 13 Wave 15 — utilities): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-position-top-0 { top: 0; }

.muaadh-position-start-0 { inset-inline-start: 0; }

.muaadh-position-start-100 { inset-inline-start: 100%; }

.muaadh-position-relative { position: relative; }

.muaadh-position-absolute { position: absolute; }


/* ============================================================================
 * APPENDED (Phase 13 Wave 15 — utilities): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-gap-1 { gap: var(--space-1); }

.muaadh-gap-2 { gap: var(--space-2); }

.muaadh-gap-3 { gap: var(--space-3); }

.muaadh-gap-4 { gap: var(--space-4); }


/* ============================================================================
 * APPENDED (Phase 13 Wave 19 — font utilities): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-font-bold { font-weight: var(--theme-font-bold); }

.muaadh-font-size-4 { font-size: var(--text-2xl); }

.muaadh-font-size-5 { font-size: var(--text-xl); }

.muaadh-font-size-6 { font-size: var(--text-base); }

.muaadh-font-weight-medium { font-weight: var(--theme-font-medium); }

.muaadh-font-weight-semibold { font-weight: var(--theme-font-semibold); }

.muaadh-font-weight-bold { font-weight: var(--theme-font-bold); }

.muaadh-font-size-sm { font-size: var(--text-sm); }


/* ============================================================================
 * APPENDED (Phase 13 Wave 19 — border utilities): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-border { border: var(--chassis-border-thin) solid var(--border-default); }

.muaadh-border-color-primary { border-color: var(--action-primary); }

.muaadh-border-top { border-top: var(--chassis-border-thin) solid var(--border-default); }
.muaadh-border-top--strong  { border-top-width: 2px; }
.muaadh-border-top--light   { border-top-color: var(--border-light); }
.muaadh-border-top--primary { border-top-color: var(--action-primary); }

.muaadh-border-none { border: none; }

.muaadh-border-color-danger  { border-color: var(--action-danger); }

.muaadh-border-color-info    { border-color: var(--action-info); }

.muaadh-border-color-success { border-color: var(--action-success); }

.muaadh-border-color-warning { border-color: var(--action-warning); }


/* ============================================================================
 * APPENDED (Phase 13 Wave 22 — min utility): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-min-width-0   { min-width: 0; }

.muaadh-min-width-100 { min-width: 100px; }

.muaadh-min-height-100 { min-height: 100px; }


/* ============================================================================
 * APPENDED (Phase 13 Wave 22 — justify utility): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-justify-center { justify-content: center; }

.muaadh-justify-end { justify-content: flex-end; }

.muaadh-justify-between { justify-content: space-between; }


/* ============================================================================
 * APPENDED (Phase 13 Wave 23 — state util): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: var(--chassis-border-normal) solid var(--border-light);
    border-top-color: var(--action-primary);
    border-radius: var(--chassis-radius-circle);
    animation: m-spinner-border 0.6s linear infinite;
}

.muaadh-is-active {
    background-color: var(--action-primary-light);
    color: var(--action-primary);
}


/* ============================================================================
 * APPENDED (Phase 13 Wave 23 — state util): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-hover-lift .muaadh-panel__body {
    background: var(--theme-primary-light);
}

.muaadh-hover-lift {
    transition: transform var(--chassis-duration-quick) ease, box-shadow var(--chassis-duration-quick) ease;
}

.muaadh-hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}


/* ============================================================================
 * APPENDED (Phase 13 Wave 23 — state util): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-loading-spinner {
    border-top-color: var(--theme-primary);
}


/* ============================================================================
 * APPENDED (Phase 13 Wave 23 — state util): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-show-table { overflow-x: auto; }


/* ============================================================================
 * APPENDED (Phase 13 Wave 23 — state util): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-state--collapsed {
    display: none;
}


/* ============================================================================
 * APPENDED (Phase 13 Wave 28 — utility): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-shadow-small { box-shadow: var(--shadow-sm); }

.muaadh-shadow-large { box-shadow: var(--shadow-lg); }


/* ============================================================================
 * APPENDED (Phase 13 Wave 28 — utility): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-overflow-hidden { overflow: hidden; }

.muaadh-overflow-x-auto { overflow-x: auto; }


/* ============================================================================
 * APPENDED (Phase 13 Wave 28 — utility): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-opacity-50 { opacity: 0.5; }

.muaadh-opacity-75 { opacity: 0.75; }


/* ============================================================================
 * APPENDED (Phase 13 Wave 28 — utility): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-height-100 { height: 100%; }

.muaadh-height-122 { height: 122px; }


/* ============================================================================
 * APPENDED (Phase 13 Wave 28 — utility): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-foreground-danger { color: var(--theme-danger); }

.muaadh-foreground-success { color: var(--theme-success); }


/* ============================================================================
 * APPENDED (Phase 13 Wave 28 — utility): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-balance-positive { color: var(--action-success); }

.muaadh-balance-negative { color: var(--action-danger); }


/* ============================================================================
 * APPENDED (Phase 13 Wave 28 — utility): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-aspect-ratio-3-4 {
    padding-top: 75%;
    position: relative;
    overflow: hidden;
}

.muaadh-aspect-ratio-3-4 > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* is-loading state appended (Phase 13 Wave 31, 2026-05-13) */
.muaadh-is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

/* ============================================================================
 * APPENDED 2026-05-19 — fill gaps revealed by the inline-style cleanup audit.
 * Each rule replaces a static inline style="..." that previously bypassed
 * the design system.
 * ============================================================================ */

.muaadh-opacity-60 { opacity: 0.6; }

.muaadh-max-width-200 { max-width: 200px; }

.muaadh-text-pre-wrap { white-space: pre-wrap; }

.muaadh-grid-column-full { grid-column: 1 / -1; }

.muaadh-font-family-mono { font-family: var(--theme-font-mono, monospace); }