/* ============================================================================
   COMMAND CENTER UTILITIES — small, composable classes that replace the most
   frequently copy-pasted inline-style combos across the .razor components.
   Token-backed (see cc-chrome.css :root). Keep this set minimal — this is NOT
   a replacement for Bootstrap; only the combos that recur in our markup.
   ============================================================================ */

/* ---------------- flex layout ---------------- */
.cc-flex          { display: flex; align-items: center; }
.cc-flex-between  { display: flex; align-items: center; justify-content: space-between; }
.cc-flex-center   { display: flex; align-items: center; justify-content: center; }
.cc-flex-end      { display: flex; align-items: center; justify-content: flex-end; }
.cc-inline-flex   { display: inline-flex; align-items: center; }
.cc-flex-col      { display: flex; flex-direction: column; }
.cc-flex-wrap     { flex-wrap: wrap; }

/* ---------------- gaps (spacing scale) ---------------- */
.cc-gap-1 { gap: var(--cc-sp-1); }
.cc-gap-2 { gap: var(--cc-sp-2); }
.cc-gap-3 { gap: var(--cc-sp-3); }
.cc-gap-4 { gap: var(--cc-sp-4); }
.cc-gap-5 { gap: var(--cc-sp-5); }
.cc-gap-6 { gap: var(--cc-sp-6); }

/* ---------------- padding (spacing scale) ---------------- */
.cc-p-5  { padding: var(--cc-sp-5); }
.cc-p-7  { padding: var(--cc-sp-7); }
.cc-px-7 { padding-left: var(--cc-sp-7); padding-right: var(--cc-sp-7); }
.cc-py-5 { padding-top: var(--cc-sp-5); padding-bottom: var(--cc-sp-5); }
.cc-py-6 { padding-top: var(--cc-sp-6); padding-bottom: var(--cc-sp-6); }

/* ---------------- typography ---------------- */
.cc-text-xs     { font-size: var(--cc-fs-xs); }
.cc-text-sm     { font-size: var(--cc-fs-sm); }
.cc-text-md     { font-size: var(--cc-fs-md); }
.cc-text-lg     { font-size: var(--cc-fs-lg); }
.cc-text-muted  { color: var(--cc-medium-gray); }
.cc-text-dim    { color: var(--cc-dark-gray); }
.cc-text-strong    { font-weight: 600; }
.cc-text-bold      { font-weight: 700; }
.cc-text-extrabold { font-weight: 800; }
.cc-text-right     { text-align: right; }
.cc-mono           { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }

/* page-head H4 title treatment (shared by cc-page-head across pages) */
.cc-page-title  { font-weight: 800; letter-spacing: -0.01em; margin-top: var(--cc-sp-4); }

/* ---------------- misc surface helpers ---------------- */
/* transparent wrapper paper (MudPaper Class= reaches its root, no ::deep needed) */
.cc-bg-transparent { background: transparent; }

/* the "N of M" / "N machines" record-count badge used inside .cc-data-card headers
   and page heads. Centralizes a combo that was repeated verbatim across many pages. */
.cc-data-card-count { color: var(--cc-medium-gray); font-size: 12.5px; font-weight: 600; }

/* ---------------- accessibility: honor reduced-motion ----------------
   Neutralizes all animations/transitions (incl. the faulted-mower fault-flash
   strobe and the infinite status pulses) for users who request reduced motion.
   Loaded last, so this wins without !important on most rules; the !important
   guards against animation/transition shorthands declared elsewhere. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}