/* ============================================================================
   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: 13.5px; font-weight: 600; }

/* ---------------- AMR telemetry chrome (shared by Dashboard, fleet map, Monitor) ---- */
.cc-unit-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
    flex-shrink: 0;
    background: var(--cc-unit-dot, var(--cc-unit-blue));
    box-shadow: 0 0 0 1px var(--cc-border-subtle);
}

.cc-unit-dot.is-unit-blue    { --cc-unit-dot: var(--cc-unit-blue); }
.cc-unit-dot.is-unit-magenta { --cc-unit-dot: var(--cc-unit-magenta); }
.cc-unit-dot.is-unit-white   { --cc-unit-dot: var(--cc-gray-400); }

.cc-unit-dot.cc-unit-dot--sm { width: 8px; height: 8px; }

/* Cell/Wi-Fi signal, 0–4 bars. The count comes from MowerStateVisuals.SignalBars()
   so every surface reads the same flag bits. */
.cc-signal-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    flex-shrink: 0;
}

.cc-signal-bar {
    width: 3px;
    border-radius: 1px;
    background: var(--cc-gray-300);
}

.cc-signal-bar:nth-child(1) { height: 5px; }
.cc-signal-bar:nth-child(2) { height: 8px; }
.cc-signal-bar:nth-child(3) { height: 11px; }
.cc-signal-bar:nth-child(4) { height: 14px; }

.cc-signal-bar.on { background: var(--cc-success); }

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

/* keep every cell on one line */
.cc-table-wide .mud-table-cell { white-space: nowrap; }

/* grouped band above the column labels */
.cc-table-wide .cc-table-group-row th {
    font-size: var(--cc-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cc-gray-500);
    text-align: center;
    background: var(--cc-gray-100);
    padding-top: var(--cc-sp-2);
    padding-bottom: var(--cc-sp-2);
}

/* vertical rule where a new field group starts */
.cc-table-wide .cc-table-gs { border-left: 1px solid var(--cc-gray-200); }

/* pinned first column; needs an opaque background to cover the cells
   scrolling underneath it */
.cc-table-wide .cc-table-sticky {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--cc-white);
    border-right: 1px solid var(--cc-gray-200);
}
.cc-table-wide thead .cc-table-sticky { z-index: 3; }
.cc-table-wide .cc-table-group-row .cc-table-sticky { background: var(--cc-gray-100); }
/* keep the pinned cell in step with the Mud row-hover tint */
.cc-table-wide tbody tr:hover .cc-table-sticky { background: var(--cc-hover-surface); }

/* muted timestamp cell (e.g. Last Modified) */
.cc-table-timestamp {
    font-size: var(--cc-fs-xs);
    color: var(--cc-gray-500);
}

.cc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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