/* ============================================================================
   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-xl          { font-size: var(--cc-fs-xl); }
.cc-text-2xl         { font-size: var(--cc-fs-2xl); }
.cc-text-3xl         { font-size: var(--cc-fs-3xl); }
.cc-text-display-sm  { font-size: var(--cc-fs-display-sm); }
.cc-text-display     { font-size: var(--cc-fs-display); }
.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; }

/* ---------------- responsive utilities (canonical breakpoints) ----------------
   A small breakpoint-aware layer authored at the canonical edges documented in
   cc-tokens.css (sm 600 / md 960). Prefer these over hand-rolling a bespoke
   @media in a component, and over MudHidden where a pure-CSS toggle is enough.
   Naming: *-sm targets the phone edge (<600), *-md targets the compact edge
   (<960). "hide-*" hides at/below that edge; "show-*-only" shows ONLY at/below. */

/* hide at/below the phone edge */
@media (max-width: 599.98px) {
    .cc-hide-sm { display: none !important; }
}
/* hide at/below the compact edge (phones + small tablets) */
@media (max-width: 959.98px) {
    .cc-hide-md { display: none !important; }
}
/* show ONLY at/below an edge (hidden on wider screens) */
.cc-show-sm-only,
.cc-show-md-only { display: none !important; }
@media (max-width: 599.98px) {
    .cc-show-sm-only { display: revert !important; }
}
@media (max-width: 959.98px) {
    .cc-show-md-only { display: revert !important; }
}

/* stack a flex row into a column below the compact edge */
@media (max-width: 959.98px) {
    .cc-stack-md { flex-direction: column !important; align-items: stretch !important; }
}
/* force full width below the phone edge (e.g. toolbar filters, search fields) */
@media (max-width: 599.98px) {
    .cc-full-sm { width: 100% !important; min-width: 0 !important; }
}
/* let wide content (data grids, tables) scroll sideways inside its own box so
   the page body never scrolls horizontally */
.cc-scroll-x { overflow-x: auto; max-width: 100%; }

/* ---------------- 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;
    }
}