/* #####################################################################
   MONARCH DESIGN SYSTEM v0.7
   MODULE: Utility Reference
   PURPOSE: Small, composable, single-purpose classes for layout,
            spacing, typography, effects, accessibility, and debugging.
   DEPENDENCIES: colors.php, fonts.css, layout.css
   MAINTENANCE: Utilities should do one job and avoid component styling.
   ##################################################################### */

/* =====================================================================
   FLOW, CLUSTER, AND STACK
   ===================================================================== */
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-space, var(--space-md)); align-items: center; }
.stack { display: grid; gap: var(--stack-space, var(--space-md)); }

/* =====================================================================
   DISPLAY
   ===================================================================== */
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-none { display: none !important; }

/* =====================================================================
   FLEXBOX
   ===================================================================== */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.align-start { align-items: flex-start !important; }
.align-center { align-items: center !important; }
.align-end { align-items: flex-end !important; }
.align-stretch { align-items: stretch !important; }

/* =====================================================================
   GRID AND GAPS
   ===================================================================== */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.gap-xs { gap: var(--space-xs) !important; }
.gap-sm { gap: var(--space-sm) !important; }
.gap-md { gap: var(--space-md) !important; }
.gap-lg { gap: var(--space-lg) !important; }
.gap-xl { gap: var(--space-xl) !important; }

/* =====================================================================
   CONTAINERS
   Generated by assets/css/layout-tokens.php from design/layouts.php.
   ===================================================================== */

/* =====================================================================
   SPACING
   ===================================================================== */
.m-0 { margin: 0 !important; }
.m-xs { margin: var(--space-xs) !important; }
.m-sm { margin: var(--space-sm) !important; }
.m-md { margin: var(--space-md) !important; }
.m-lg { margin: var(--space-lg) !important; }
.m-xl { margin: var(--space-xl) !important; }
.mt-md { margin-top: var(--space-md) !important; }
.mb-md { margin-bottom: var(--space-md) !important; }
.mx-lg { margin-inline: var(--space-lg) !important; }
.my-lg { margin-block: var(--space-lg) !important; }
.p-0 { padding: 0 !important; }
.p-sm { padding: var(--space-sm) !important; }
.p-md { padding: var(--space-md) !important; }
.p-lg { padding: var(--space-lg) !important; }
.p-xl { padding: var(--space-xl) !important; }

/* =====================================================================
   SIZE
   ===================================================================== */
.w-25 { width: 25% !important; }
.w-33 { width: 33.333% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.min-vh-100 { min-height: 100vh !important; }
.max-400 { max-width: 400px !important; }
.max-600 { max-width: 600px !important; }
.max-800 { max-width: 800px !important; }
.max-1200 { max-width: 1200px !important; }

/* =====================================================================
   TEXT AND COLOR
   ===================================================================== */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-primary { color: var(--site-color-primary) !important; }
.text-secondary { color: var(--site-color-secondary) !important; }
.text-accent { color: var(--site-color-accent) !important; }
.text-muted { opacity: .72 !important; }
.bg-primary { background: var(--site-color-primary) !important; }
.bg-secondary { background: var(--site-color-secondary) !important; }
.bg-accent { background: var(--site-color-accent) !important; }
.bg-light { background: var(--surface-strong) !important; }
.bg-dark { background: var(--overlay-dark) !important; }

/* =====================================================================
   BORDER, RADIUS, AND SHADOW
   ===================================================================== */
.border { border: 1px solid var(--color-border) !important; }
.border-top { border-top: 1px solid var(--color-border) !important; }
.border-primary { border-color: var(--site-color-primary) !important; }
.border-secondary { border-color: var(--site-color-secondary) !important; }
.rounded-none { border-radius: 0 !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: 1.5rem !important; }
.rounded-pill { border-radius: 999px !important; }
.rounded-circle { border-radius: 50% !important; }
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow, .shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: 0 1.5rem 3rem var(--overlay-dark) !important; }

/* =====================================================================
   POSITION, OVERFLOW, VISIBILITY, OPACITY, CURSOR
   ===================================================================== */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.sticky { position: sticky !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-help { cursor: help !important; }
.cursor-wait { cursor: wait !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* =====================================================================
   TRANSITIONS AND HOVER EFFECTS
   ===================================================================== */
.transition { transition: all var(--transition-normal) ease; }
.transition-fast { transition: all var(--transition-fast) ease; }
.transition-slow { transition: all var(--transition-slow) ease; }
.hover-shadow:hover { box-shadow: var(--shadow-lg); }
.hover-grow:hover { transform: scale(1.03); }
.hover-primary:hover { color: var(--site-color-primary); }
.hover-accent:hover { color: var(--site-color-accent); }

/* =====================================================================
   LABEL / IDENTIFIER UTILITIES
   Reusable outside Lists for cards, tables, alerts, navigation, and docs.
   ===================================================================== */
.label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: var(--label-margin-top) 0 var(--label-margin-bottom);
    padding: var(--label-padding-y) var(--label-padding-x);
    border-radius: var(--label-radius);
    font-family: var(--font-primary);
    font-size: var(--label-font-size);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: var(--label-letter-spacing);
    text-transform: uppercase;
    text-shadow: none;
}
.label-primary { background: var(--site-color-primary); color: var(--site-color-background); }
.label-secondary { background: var(--site-color-secondary); color: var(--site-color-background); }
.label-accent { background: var(--site-color-accent); color: var(--site-color-background); }
.label-outline { border: 2px solid var(--site-color-primary); color: var(--site-color-text); background: transparent; }
.label-gradient { background: linear-gradient(90deg,var(--site-color-primary),var(--site-color-secondary)); color: var(--site-color-background); }
.label-soft { background: var(--surface-strong); color: var(--site-color-text); }
/* Backward-compatible aliases retained for existing list markup. */
.list-label, .list-label-primary, .list-label-secondary, .list-label-accent, .list-label-outline, .list-label-gradient { }
.list-label { display:inline-flex;align-items:center;width:fit-content;margin:0 0 1rem;padding:.38rem .8rem;border-radius:999px;font-family:var(--font-primary);font-size:.85rem;font-weight:var(--fw-bold);line-height:1.2;letter-spacing:.045em;text-transform:uppercase;text-shadow:none; }
.list-label-primary { background:var(--site-color-primary);color:var(--site-color-background); }
.list-label-secondary { background:var(--site-color-secondary);color:var(--site-color-background); }
.list-label-accent { background:var(--site-color-accent);color:var(--site-color-background); }
.list-label-outline { border:2px solid var(--site-color-primary);color:var(--site-color-text);background:transparent; }
.list-label-gradient { background:linear-gradient(90deg,var(--site-color-primary),var(--site-color-secondary));color:var(--site-color-background); }

/* =====================================================================
   ACCESSIBILITY AND PRINT
   ===================================================================== */
.sr-only, .visually-hidden { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }
.focus-ring:focus-visible { outline: 3px solid var(--site-color-accent); outline-offset: 3px; }
.print-only { display: none !important; }
@media print { .no-print { display:none !important; } .print-only { display:block !important; } }

/* =====================================================================
   DEVELOPER DEBUG UTILITIES
   Add temporarily while developing. Remove classes before production.
   ===================================================================== */
.debug, .debug * { outline: 1px solid var(--debug-outline) !important; }
.debug-grid { background-image: linear-gradient(var(--surface-strong) 1px,transparent 1px),linear-gradient(90deg,var(--surface-strong) 1px,transparent 1px); background-size: 16px 16px; }
.debug-flex { outline: 2px dashed var(--site-color-secondary) !important; }
.debug-flex > * { outline: 1px dotted var(--site-color-accent) !important; }
.debug-spacing { box-shadow: inset 0 0 0 8px var(--debug-spacing) !important; }
.debug-card { outline: 3px solid var(--site-color-accent) !important; }

@media (max-width: 760px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .w-25, .w-33, .w-50, .w-75 { width: 100% !important; }
}

/* v0.8.3.6 official spacing utilities */
.u-margin-top-lg { margin-top: var(--space-lg) !important; }
.u-margin-bottom-lg { margin-bottom: var(--space-lg) !important; }

/* v0.8.3.7.2 token alias: used by compact UI controls. */
:root { --space-2xs: calc(var(--space-xs) / 2); }