/* COMMAND CENTER — COMPONENTS (filters, cards, KPI/stat tiles, pills, banners, wizard, role pills, activity feed, dialogs, dealer, admin-context). Loaded after cc-chrome.css. */

/* ---------------- FILTER DROPDOWN BUTTON (admin filter bar) ---------------- */
/* Looks like a flat pill button; opens a MudMenu with options. Matches the
   height + border style of .cc-status-toggle so the whole toolbar lines up. */
.cc-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--cc-light-gray);
    border-radius: 8px;
    background: var(--cc-white);
    font-family: var(--cc-font-medium);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cc-dark-gray);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
    line-height: 1;
}
.cc-filter-btn:hover {
    border-color: var(--cc-medium-gray);
    background: var(--cc-bg);
}
.cc-filter-btn.active {
    border-color: var(--cc-red);
    background: rgba(var(--cc-red-rgb), 0.06);
}
.cc-filter-btn-label {
    color: var(--cc-medium-gray);
    font-weight: 500;
}
.cc-filter-btn-value {
    color: var(--cc-black);
    font-weight: 600;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cc-filter-btn.active .cc-filter-btn-label { color: var(--cc-red); opacity: 0.8; }
.cc-filter-btn.active .cc-filter-btn-value { color: var(--cc-red); }
.cc-filter-btn .mud-icon-root {
    color: var(--cc-medium-gray);
    font-size: 16px !important;
}
.cc-filter-btn.active .mud-icon-root { color: var(--cc-red); }

/* Keep the search field locked at 38px and align with the rest. */
/* !important to beat the more-specific ".cc-filter-bar .mud-input-control"
   fixed-width rule below — the search needs room for its full placeholder,
   while the dropdowns stay at the standard 240px. */
.cc-filter-search {
    width: var(--cc-search-w-lg) !important;
    min-width: min(100%, var(--cc-search-w)) !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
}
/* min-height, not height: a dense outlined input is 40px naturally (10.5px
   padding + a 19px text slot + 10.5px), so pinning it to 38px squeezes the slot
   to 17px and the browser clips the bottom of every descender (g, y, p) against
   the input's content box. The floor keeps the row aligned without the pinch. */
.cc-filter-search .mud-input-control { min-height: 38px; }
/* Phones: take the whole filter-bar row rather than overflowing it, but never
   drop below the width that fits the placeholder (min-width above). */
@media (max-width: 599.98px) {
    .cc-filter-search {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
}

/* Support-page header: title block on the left, a single fixed-size serial
   search anchored top-right. Used app-wide so every support page's search box
   sits in the same place and is the same width (--cc-search-w, sized to fit
   "Search Serial Number") and height (38px). */
.cc-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.cc-page-head > :first-child { min-width: 0; }
/* !important so MudBlazor's own .mud-input-control width can't stretch it back
   to full width — the Class lands on that same element, equal specificity. */
.cc-page-search {
    width: var(--cc-search-w) !important;
    min-width: min(100%, var(--cc-search-w)) !important;
    max-width: 100% !important;
    flex: 0 0 auto;
}
/* min-height for the same descender-clipping reason as .cc-filter-search. */
.cc-page-search .mud-input-control { min-height: 38px; }
@media (max-width: 700px) {
    /* Full-width on its own row — the min-width floor above still guarantees the
       placeholder fits if the header row itself is narrower than that. */
    .cc-page-search {
        width: 100% !important;
        flex: 1 1 100%;
    }
}

/* Standard field sizing — filter-bar dropdowns/inputs stay one fixed width so
   they never grow or shrink with their selected text (applies app-wide to
   every .cc-filter-bar). */
.cc-filter-bar .mud-select,
.cc-filter-bar .mud-input-control {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    flex: 0 0 auto;
}

/* Filters sit on the right, consistent with the page-head search across the
   app. Wraps gracefully on narrow widths. */
.cc-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
    /* Stay anchored as the user scrolls long admin lists. Offset clears the
       fixed chrome (cc-header-h + cc-tab-bar-h) plus the page's own padding. */
    position: sticky;
    top: calc(var(--cc-header-h) + var(--cc-tab-bar-h));
    z-index: 5;
    background: var(--cc-bg);
    padding: 8px 4px;
}

/* ---------------- STATUS TOGGLE GROUP (admin filter bar) ---------------- */
.cc-status-toggle {
    display: inline-flex;
    border: 1px solid var(--cc-light-gray);
    border-radius: 8px;
    overflow: hidden;
    background: var(--cc-white);
    height: 38px;
}
.cc-status-toggle-btn {
    border: none;
    background: transparent;
    padding: 0 14px;
    font-family: var(--cc-font-medium);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cc-dark-gray);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-right: 1px solid var(--cc-light-gray);
}
.cc-status-toggle-btn:last-child { border-right: none; }
.cc-status-toggle-btn:hover { background: var(--cc-bg); }
.cc-status-toggle-btn.active {
    background: var(--cc-brand-tint);
    color: var(--cc-red);
}
.cc-status-toggle-btn .cc-status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    flex-shrink: 0;
    background: var(--cc-medium-gray);
}
.cc-status-toggle-btn .cc-status-dot.active   { background: var(--cc-success); }
.cc-status-toggle-btn .cc-status-dot.disabled { background: var(--cc-medium-gray); }
.cc-status-toggle-btn .cc-status-dot.pending  { background: var(--cc-warning); }

/* Phones: the search above already goes flex: 1 1 100%, so an inline-flex pill
   group left a full-width row stacked on a right-aligned one (.cc-filter-bar is
   justify-content: flex-end). Spanning the row and splitting it evenly makes
   the two line up flush, and widens what were ~60px tap targets. */
@media (max-width: 599.98px) {
    .cc-status-toggle {
        display: flex;
        width: 100%;
    }
    .cc-status-toggle-btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding: 0 var(--cc-sp-2);
    }
}

/* Footnote under a KPI tile row (e.g. "Totals reflect all records"). Sits right
   under the tiles it annotates rather than floating at the parent stack's full
   gap. Right-aligned on wide layouts where it trails the tile row; on phones the
   tiles stack into a narrow column and a right-aligned line has nothing to align
   to, so it joins the page's left gutter with everything else. */
.cc-tile-note {
    display: block;
    text-align: right;
    margin-top: calc(-1 * var(--cc-sp-5));
}
@media (max-width: 599.98px) {
    .cc-tile-note { text-align: left; }
}

/* ---------------- ACTIVE FILTER CHIP ROW ---------------- */
.cc-filter-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: var(--cc-bg);
    border: 1px solid var(--cc-light-gray);
    border-radius: 8px;
}
.cc-filter-chips-label {
    font-family: var(--cc-font-heading);
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cc-medium-gray);
    margin-right: 4px;
}
.cc-filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px;
    padding: 0 6px 0 10px;
    border-radius: 13px;
    background: var(--cc-white);
    border: 1px solid var(--cc-light-gray);
    font-size: 13px;
    font-weight: 600;
    color: var(--cc-dark-gray);
    line-height: 1;
}
.cc-filter-chip-key {
    color: var(--cc-medium-gray);
    font-weight: 500;
}
.cc-filter-chip-close {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: transparent;
    color: var(--cc-medium-gray);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    padding: 0;
}
.cc-filter-chip-close:hover {
    background: var(--cc-red);
    color: var(--cc-white);
}
.cc-filter-chip-close .mud-icon-root { font-size: 14px !important; }
.cc-filter-clear-all {
    margin-left: auto;
    background: transparent;
    border: none;
    font-family: var(--cc-font-medium);
    font-size: 13px;
    font-weight: 600;
    color: var(--cc-red);
    cursor: pointer;
    padding: 4px 6px;
}
.cc-filter-clear-all:hover { text-decoration: underline; }

/* ---------------- BREADCRUMBS (admin pages) ---------------- */
.cc-breadcrumbs .mud-breadcrumbs {
    padding: 0 !important;
}
.cc-breadcrumbs .mud-breadcrumb-item,
.cc-breadcrumbs .mud-breadcrumb-item a {
    font-family: var(--cc-font-medium);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cc-medium-gray);
    text-decoration: none;
}
.cc-breadcrumbs .mud-breadcrumb-item a:hover {
    color: var(--cc-red);
}
.cc-breadcrumbs .mud-breadcrumb-item.mud-disabled,
.cc-breadcrumbs .mud-breadcrumb-item.mud-disabled a {
    color: var(--cc-dark-gray) !important;
    cursor: default;
}
.cc-breadcrumbs .mud-breadcrumb-separator {
    color: var(--cc-medium-gray);
    margin: 0 6px;
}

/* ---------------- ACCEPT-INVITE PAGE ----------------
   Lives inside OuterLayout's .auth-main scroll region. The page centers the
   card with margin:auto (scroll-safe — align-items:center would clip the top
   of a tall card) so the card never spills over the header/footer. */
.cc-accept-page {
    min-height: 100%;
    display: flex;
    padding: var(--cc-sp-6) var(--cc-sp-4);
    background: transparent;
}
.cc-accept-card {
    margin: auto;
    width: 100%;
    max-width: 500px;
    background: var(--cc-white);
    border-radius: 20px;
    border: 1px solid var(--cc-gray-200);
    border-top: 3px solid var(--cc-red);
    overflow: hidden;
    box-shadow: var(--cc-shadow-card);
    animation: cc-accept-card-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes cc-accept-card-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.cc-accept-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: var(--cc-light-gray);
    padding: var(--cc-sp-5) var(--cc-sp-8);
    border-bottom: 1px solid var(--cc-gray-300);
}
/* Header bar in the login card's dark gray instead of near-black (#1a1a1a).
   Opt-in via .cc-accept-card--grayhead (forgot/reset pages) so the
   accept-invite card keeps its default header. */
.cc-accept-card--grayhead .cc-accept-header {
    background: rgb(64, 66, 72);
    justify-content: flex-start;
}
/* Seamless-fill text input (ForgotPassword email) — mirrors the login field's
   uniform autofill look, adapted to the light card. MudBlazor renders the
   leading icon (adornment) as a separate element beside the input slot, so a
   plain webkit-autofill box-shadow only fills the text half and leaves a
   two-tone seam. Filling the whole .mud-input container the SAME light gray —
   whenever the field has a value or is browser-autofilled — makes the icon and
   text read as one uniform fill. */
.cc-seamless-input .mud-input:has(.mud-input-slot:not(:placeholder-shown)),
.cc-seamless-input .mud-input:has(.mud-input-slot:-webkit-autofill) {
    background-color: var(--cc-light-gray) !important;
    border-radius: var(--cc-radius-md) !important;
}
/* Round the visible outlined border to match the login field's corners.
   !important is required: MudBlazor's own rule for this element is both more
   specific (3 classes) and loaded after cc-components.css, so it otherwise
   wins and the corners stay at MudBlazor's tighter ~4px default. */
.cc-seamless-input .mud-input-outlined-border {
    border-radius: var(--cc-radius-md) !important;
    /* Dark gray outline matching the card header / login card (rgb(64,66,72)). */
    border-color: rgb(64, 66, 72) !important;
}
/* Keep the same dark-gray outline on hover and focus — MudBlazor would
   otherwise switch it to the primary red. */
.cc-seamless-input .mud-input:hover .mud-input-outlined-border,
.cc-seamless-input .mud-input.mud-input-focused .mud-input-outlined-border {
    border-color: rgb(64, 66, 72) !important;
}
/* Match the leading mail icon (start adornment) to the dark-gray outline. */
.cc-seamless-input .mud-input-adornment-start .mud-icon-root {
    color: rgb(64, 66, 72) !important;
    fill: rgb(64, 66, 72) !important;
}
/* Chrome paints the input slot itself on autofill — pin it to the same gray
   (not the browser's yellow/blue) and keep the text dark so it stays readable. */
.cc-seamless-input .mud-input-slot:-webkit-autofill,
.cc-seamless-input .mud-input-slot:-webkit-autofill:hover,
.cc-seamless-input .mud-input-slot:-webkit-autofill:focus,
.cc-seamless-input .mud-input-slot:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--cc-light-gray) inset;
    -webkit-text-fill-color: rgba(0, 0, 0, 0.87);
    caret-color: rgba(0, 0, 0, 0.87);
    border-radius: var(--cc-radius-md) !important;
}
/* Card entrance — the exact animation used by Login.razor's .login-card, so
   navigating onto the forgot-password page matches the login card's feel.
   (The login keyframes live in Login.razor's scoped CSS and aren't reachable
   here, so the identical definition is copied verbatim.) */
.cc-accept-card--enter {
    animation: login-card-in 0.4s ease both;
}
@keyframes login-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.cc-accept-eyebrow {
    font-family: "DinotBold", "Klavika", sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin: 0;
}
.cc-accept-header-step {
    font-family: var(--cc-font-heading);
    font-size: var(--cc-fs-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cc-dark-gray);
    text-align: left;
    display: block;
}
.cc-accept-title {
    font-family: var(--cc-font-display);
    font-size: var(--cc-fs-xl);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--cc-black);
    margin: 0;
}
.cc-accept-card--grayhead .cc-accept-title {
    color: var(--cc-white);
}
.cc-accept-body {
    padding: var(--cc-sp-8);
}
.cc-accept-context {
    display: flex; align-items: center; gap: var(--cc-sp-4);
    padding-bottom: var(--cc-sp-5);
}

/* The rule under the identity row — a MudDivider rather than a border on
   .cc-accept-context. .mud-divider sets its own border-color and loads after
   this file, so the token needs !important to land. */
.cc-accept-divider {
    border-color: var(--cc-light-gray) !important;
    margin-bottom: var(--cc-sp-6);
}

/* Rendered by MudAvatar. Descendant-scoped (0,2,0) so it outranks .mud-avatar's
   own size/shape/background (0,1,0) — MudBlazor.min.css is linked after this
   file, so an equal-specificity rule here would lose the tie. The .role-* rules
   below are already 0,2,0 and win on their own. */
.cc-accept-context .cc-accept-context-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    /*this background element is a fallback for unspecified roles*/
    background: var(--cc-red);
    color: var(--cc-white);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--cc-font-heading);
    font-weight: 800; font-size: var(--cc-fs-lg);
    flex-shrink: 0;
}

/* Role colors on Users -> reset password -- subject to change*/
.cc-accept-context-avatar.role-superadmin { background: var(--cc-red); }
.cc-accept-context-avatar.role-admin      { background: var(--cc-black); }
.cc-accept-context-avatar.role-cs         { background: var(--cc-info); }
.cc-accept-context-avatar.role-sales      { background: var(--cc-success); }
.cc-accept-context-avatar.role-operator   { background: var(--cc-dark-gray); }
.cc-accept-context-avatar.role-dealer     { background: var(--cc-warning); }

.cc-accept-context--compact .cc-accept-context-avatar {
    width: 36px; height: 36px;
    border-radius: 0;
    font-size: var(--cc-fs-sm);
}
.cc-accept-context-lead {
    margin: 0;
    font-size: var(--cc-fs-md);
    color: var(--cc-black);
}
.cc-accept-context-lead strong { font-weight: 700; }

.cc-accept-context-text { flex: 1; min-width: 0; }
.cc-accept-context-name {
    font-family: var(--cc-font-display);
    font-weight: 800;
    font-size: var(--cc-fs-lg);
    color: var(--cc-black);
    line-height: 1.2;
}
.cc-accept-context-meta {
    font-size: var(--cc-fs-sm);
    color: var(--cc-dark-gray);
    margin-top: 2px;
    word-break: break-word;
}
.cc-accept-context-meta strong {
    color: var(--cc-dark-gray);
    font-weight: 700;
}
.cc-accept-intro {
    font-size: var(--cc-fs-sm);
    color: var(--cc-black);
    line-height: 1.55;
    margin: 0 0 var(--cc-sp-7) 0;
}
.cc-accept-state {
    text-align: center;
    padding: var(--cc-sp-5) var(--cc-sp-2) var(--cc-sp-2);
}
.cc-accept-state-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    margin: 0 auto var(--cc-sp-6);
    display: flex; align-items: center; justify-content: center;
}
.cc-accept-state-icon.success { background: rgba(34,197,94,0.12); color: var(--cc-success-text); }
.cc-accept-state-icon.error   { background: rgba(var(--cc-red-rgb),0.10);  color: var(--cc-danger-text); }
.cc-accept-state-icon .mud-icon-root { font-size: 32px !important; }
.cc-accept-state-title {
    font-family: var(--cc-font-display);
    font-size: 20px; font-weight: 800;
    margin: 0 0 var(--cc-sp-3) 0;
}
.cc-accept-state-text {
    font-size: var(--cc-fs-sm);
    color: var(--cc-dark-gray);
    line-height: 1.55;
    margin: 0;
}
.cc-accept-support {
    margin-top: var(--cc-sp-7);
    padding-top: var(--cc-sp-5);
    border-top: 1px solid var(--cc-light-gray);
    font-size: var(--cc-fs-sm);
    color: var(--cc-dark-gray);
    text-align: center;
}
.cc-accept-support a {
    color: var(--cc-red);
    font-weight: 700;
    text-decoration: none;
}
.cc-accept-support a:hover {
    color: var(--cc-red-hover);
    text-decoration: underline;
}

/* ---- Password entry (new-password + confirm) ---- */
.cc-pw-form {
    display: flex;
    flex-direction: column;
    gap: var(--cc-sp-8);
}
.cc-pw-group {
    display: flex;
    flex-direction: column;
    gap: var(--cc-sp-4);
}
.cc-pw-label-text {
    font-family: var(--cc-font-medium);
    font-size: var(--cc-fs-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cc-dark-gray);
}
.cc-pw-field-shell {
    position: relative;
}
.cc-pw-field-shell .mud-input-root {
    padding-right: calc(var(--cc-sp-5) * 2 + 4ch);
}
.cc-pw-toggle {
    position: absolute;
    top: 50%;
    right: var(--cc-sp-5);
    transform: translateY(-50%);
    border: none;
    background: none;
    padding: 0;
    font-family: "DinotBold", sans-serif;
    font-size: var(--cc-fs-sm);
    font-weight: 700;
    color: var(--cc-black);
    text-decoration: underline;
    cursor: pointer;
    user-select: none;
}
.cc-pw-toggle:hover { color: var(--cc-dark-gray); }
.cc-pw-match {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--cc-sp-1);
    font-family: var(--cc-font-medium);
    font-size: var(--cc-fs-sm);
    font-weight: 700;
    white-space: nowrap;
}
.cc-pw-match.ok  { color: var(--cc-success-text); }
.cc-pw-match.bad { color: var(--cc-danger-text); }

/* ---- Strength meter — segment fill + label color are driven by the
        .cc-pw-strength--* modifier class (no hex in markup/C#) ---- */
.cc-pw-strength {
    display: flex;
    align-items: center;
    gap: var(--cc-sp-5);
    margin-top: var(--cc-sp-2);
}
.cc-pw-strength-bars {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--cc-sp-2);
}
.cc-pw-strength-seg {
    height: 6px;
    border-radius: 3px;
    background: var(--cc-gray-300);
    transition: background 0.2s;
}
.cc-pw-strength-label {
    font-family: var(--cc-font-heading);
    font-size: var(--cc-fs-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.cc-pw-strength--weak   .cc-pw-strength-seg.on { background: var(--cc-danger); }
.cc-pw-strength--fair   .cc-pw-strength-seg.on { background: var(--cc-warning); }
.cc-pw-strength--good   .cc-pw-strength-seg.on,
.cc-pw-strength--strong .cc-pw-strength-seg.on { background: var(--cc-success); }
.cc-pw-strength--weak   .cc-pw-strength-label { color: var(--cc-danger-text); }
.cc-pw-strength--fair   .cc-pw-strength-label { color: var(--cc-warning-text); }
.cc-pw-strength--good   .cc-pw-strength-label,
.cc-pw-strength--strong .cc-pw-strength-label { color: var(--cc-success-text); }

/* ---- Requirement chips (MudChips) ---- */
.cc-pw-reqs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cc-sp-4);
}
.cc-pw-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--cc-sp-2);
    padding: var(--cc-sp-3) var(--cc-sp-5);
    border-radius: 999px;
    font-size: var(--cc-fs-sm);
    font-weight: 600;
    background: var(--cc-light-gray);
    color: var(--cc-medium-gray);
    border: 1px solid var(--cc-border-subtle);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cc-pw-pill .cc-pw-pill-icon {
    font-size: 1em;
    margin-right: 0;
    margin-inline-end: 0;
}

.cc-pw-pill.met {
    background: color-mix(in srgb, var(--cc-success) 14%, transparent);
    color: var(--cc-success-text);
    border-color: color-mix(in srgb, var(--cc-success) 35%, transparent);
}

/* Brand CTA — used on accept-invite and any future high-emphasis form
   submission. Override MudButton's defaults via the Class= prop. */
.cc-cta-button.mud-button-filled {
    background: linear-gradient(180deg, var(--cc-red), var(--cc-red-hover)) !important;
    color: var(--cc-white) !important;
    height: 42px !important;
    border-radius: 12px !important;
    font-family: var(--cc-font-heading) !important;
    font-size: var(--cc-fs-lg) !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: none !important;
    padding: 0 24px !important;
    box-shadow: 0 8px 20px rgba(var(--cc-red-rgb), 0.28) !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease !important;
    border: none !important;
}
.cc-cta-button.mud-button-filled:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 12px 26px rgba(var(--cc-red-rgb), 0.34) !important;
}
.cc-cta-button.mud-button-filled:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--cc-red-rgb), 0.30) !important;
}

.cc-cta-button.mud-button-filled:disabled {
    background: var(--cc-light-gray) !important;
    color: var(--cc-dark-gray) !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed;
}
.cc-cta-button .mud-button-icon-start { margin-right: 10px; }
.cc-cta-button .mud-icon-root { font-size: 20px !important; }

@media (prefers-reduced-motion: reduce) {
    .cc-accept-card { animation: none; }
    .cc-cta-button.mud-button-filled { transition: none !important; }
    .cc-cta-button.mud-button-filled:hover { transform: none; }
}

/* ---------------- KPI TILE (admin dashboard hero cards) ----------------
   White card · 2px black border · red value · subtle red top-edge accent on hover.
   Whole tile is a clickable surface that navigates into the section.
*/
.cc-kpi-tile {
    background: var(--cc-white);
    border: 2px solid var(--cc-black);
    border-radius: 12px;
    padding: 22px 24px;
    height: 100%;
    min-height: 130px;
    /* Top-anchored so the value row lines up across tiles whether or not a
       sub line is present (space-between would sink sub-less values). */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: var(--cc-black);
    text-decoration: none;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}
.cc-kpi-tile.linkable { cursor: pointer; }
.cc-kpi-tile.linkable:hover {
    border-color: var(--cc-red);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
    text-decoration: none;
}
.cc-kpi-tile-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cc-dark-gray);
    font-family: var(--cc-font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cc-kpi-tile-label .mud-icon-root {
    color: var(--cc-dark-gray) !important;
    font-size: 18px !important;
}
.cc-kpi-tile.linkable:hover .cc-kpi-tile-label,
.cc-kpi-tile.linkable:hover .cc-kpi-tile-label .mud-icon-root {
    color: var(--cc-black) !important;
}
.cc-kpi-tile-value {
    font-family: var(--cc-font-heading);
    font-size: 45px;
    font-weight: 800;
    color: var(--cc-red);
    line-height: 1;
    font-feature-settings: 'tnum';
    letter-spacing: -0.025em;
    margin-top: 14px;
}

/* Compact variant — used on secondary admin pages (Users, etc) where the
   tiles are reference data, not the page's primary CTA. Tighter padding,
   shorter card, smaller value. */
.cc-kpi-tile.compact {
    padding: 14px 16px;
    min-height: 84px;
    border-radius: 10px;
    border-width: 1px;
}
.cc-kpi-tile.compact .cc-kpi-tile-label {
    font-size: 12px;
    letter-spacing: 0.06em;
}
.cc-kpi-tile.compact .cc-kpi-tile-label .mud-icon-root {
    font-size: 16px !important;
}
.cc-kpi-tile.compact .cc-kpi-tile-value {
    font-size: 29px;
    margin-top: 6px;
}
/* Skeleton placeholder while a KPI count is loading. Sits in the same slot
   as cc-kpi-tile-value so the tile height doesn't jump when data lands. */
.cc-kpi-tile-skeleton {
    margin-top: 14px;
    border-radius: 4px;
}
.cc-kpi-tile.compact .cc-kpi-tile-skeleton {
    margin-top: 6px;
    height: 22px !important;
    width: 48px !important;
}

/* Muted secondary line under the value (e.g. "Last updated 21 Jun"). For
   readout tiles whose value needs a qualifier the label can't carry. */
.cc-kpi-tile-sub {
    margin-top: var(--cc-sp-2);
    font-family: var(--cc-font-body);
    font-size: var(--cc-fs-xs);
    font-weight: 400;
    color: var(--cc-dark-gray);
    line-height: 1.3;
}

/* Status accents on the value. Global rather than page-scoped so tiles the
   shared KpiTile renders pick them up through ExtraClass. */
.cc-kpi-tile.is-good .cc-kpi-tile-value { color: var(--cc-success-text); }
.cc-kpi-tile.is-warn .cc-kpi-tile-value { color: var(--cc-warning-text); }
.cc-kpi-tile.is-bad  .cc-kpi-tile-value { color: var(--cc-danger-text); }

/* Selected state for tiles acting as a filter toggle (KpiTile Active). */
.cc-kpi-tile.is-active {
    border-color: var(--cc-red);
    box-shadow: inset 0 0 0 1px var(--cc-red);
}

/* Sticky table header — used on long lists. The MudTable adds its own
   header background on FixedHeader, but the inner data-card border-radius
   masks it. Force the header to sit above and inherit the card surface. */
.cc-data-card .mud-table-container .mud-table-head {
    background: var(--cc-white);
}

/* ---------------- EMPTY STATE ---------------- */
.cc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 36px 24px;
    color: var(--cc-medium-gray);
}
.cc-empty-state-icon {
    font-size: 44px !important;
    color: var(--cc-light-gray);
    margin-bottom: 8px;
}
.cc-empty-state-title {
    font-family: var(--cc-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--cc-black);
    letter-spacing: 0.01em;
}
.cc-empty-state-description {
    margin-top: 4px;
    font-size: 14px;
    max-width: 380px;
    line-height: 1.5;
    color: var(--cc-medium-gray);
}

/* ---------------- WIZARD STEPS (InviteUserForm) ---------------- */
.cc-wizard-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 4px 0 12px;
    border-bottom: 1px solid var(--cc-light-gray);
}
.cc-wizard-step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cc-medium-gray);
    font-family: var(--cc-font-medium);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cc-wizard-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cc-gray-200);
    color: var(--cc-medium-gray);
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 22px;
}
.cc-wizard-step.active .cc-wizard-step-dot {
    background: var(--cc-red);
    color: #fff;
}
.cc-wizard-step.done .cc-wizard-step-dot {
    background: var(--cc-success-solid);
    color: #fff;
}
.cc-wizard-step.active,
.cc-wizard-step.done {
    color: var(--cc-black);
}
.cc-wizard-step-rail {
    flex: 1;
    height: 2px;
    background: var(--cc-gray-200);
    border-radius: 2px;
}
.cc-wizard-step-rail.done {
    background: var(--cc-success-solid);
}

/* Review card on Step 2 — read-only summary of what's about to be sent. */
.cc-review-card {
    border: 1px solid var(--cc-light-gray);
    border-radius: 8px;
    padding: 12px 16px;
    background: var(--cc-bg);
}
.cc-review-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    font-size: 14px;
}
.cc-review-row:last-child { border-bottom: none; }
.cc-review-label {
    color: var(--cc-medium-gray);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.04em;
}
.cc-review-value {
    color: var(--cc-black);
    font-weight: 600;
    text-align: right;
}

/* ---------------- PERMISSION CHECKBOX GROUPS (Roles form) ---------------- */
.cc-perm-group {
    border: 1px solid var(--cc-light-gray);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
    background: var(--cc-white);
}
.cc-perm-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--cc-bg);
    border-bottom: 1px solid var(--cc-light-gray);
}
.cc-perm-group-title {
    font-family: var(--cc-font-heading);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cc-dark-gray);
    flex: 1;
}
.cc-perm-group-count {
    font-family: monospace;
    font-size: 12px;
    color: var(--cc-medium-gray);
    font-weight: 600;
}
.cc-perm-group-items { padding: 4px 0; }
.cc-perm-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 12px;
    cursor: pointer;
    transition: background 0.1s;
    border-radius: 4px;
    margin: 1px 6px;
}
.cc-perm-row:hover { background: var(--cc-bg); }
.cc-perm-row.granted { background: rgba(var(--cc-red-rgb), 0.03); }
.cc-perm-row-text { flex: 1; min-width: 0; }
.cc-perm-code {
    font-family: monospace;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cc-black);
    line-height: 1.3;
}
.cc-perm-name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--cc-black);
    line-height: 1.3;
}
.cc-perm-desc {
    font-size: 12.5px;
    color: var(--cc-medium-gray);
    margin-top: 2px;
    line-height: 1.4;
}

/* ---------------- SECRET FIELD (inline reveal + copy) ---------------- */
.cc-secret-field {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cc-secret-field-value {
    color: var(--cc-black);
    user-select: all;
    min-width: 80px;
    display: inline-block;
}

/* ---------------- STAT CARDS (page hero metrics) ---------------- */
.cc-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.cc-stat-card {
    background: var(--cc-white);
    border: 1px solid var(--cc-light-gray);
    border-left: 4px solid var(--cc-medium-gray);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: box-shadow 0.15s, transform 0.15s;
}
.cc-stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); transform: translateY(-1px); }
.cc-stat-card.tone-success { border-left-color: var(--cc-success-solid); }
.cc-stat-card.tone-warning { border-left-color: var(--cc-warning-solid); }
.cc-stat-card.tone-error   { border-left-color: var(--cc-medium-gray); }
.cc-stat-card.tone-info    { border-left-color: var(--cc-info-solid); }
.cc-stat-card.tone-neutral { border-left-color: var(--cc-dark-gray); }

.cc-stat-icon {
    width: 42px; height: 42px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--cc-white);
}
.cc-stat-icon.tone-success { background: var(--cc-success-solid); }
.cc-stat-icon.tone-warning { background: var(--cc-warning-solid); }
.cc-stat-icon.tone-error   { background: var(--cc-red); }
.cc-stat-icon.tone-info    { background: var(--cc-info-solid); }
.cc-stat-icon.tone-neutral { background: var(--cc-dark-gray); }
.cc-stat-icon .mud-icon-root { font-size: 22px !important; color: var(--cc-white) !important; }

.cc-stat-text { display: flex; flex-direction: column; min-width: 0; }
.cc-stat-value {
    font-family: var(--cc-font-heading);
    font-size: 31px;
    font-weight: 800;
    line-height: 1;
    color: var(--cc-black);
    letter-spacing: -0.02em;
    font-feature-settings: 'tnum';
}
.cc-stat-label {
    font-family: var(--cc-font-heading);
    font-size: 12.5px;
    color: var(--cc-medium-gray);
    margin-top: 4px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---------------- DATA TABLE CARD (titled card with restyled MudTable) ---------------- */
.cc-data-card {
    background: var(--cc-white);
    border: 1px solid var(--cc-light-gray);
    border-radius: 10px;
    overflow: hidden;
}
.cc-data-card-header {
    padding: 14px 20px;
    font-family: var(--cc-font-heading);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cc-black);
    border-bottom: 2px solid var(--cc-black);
    display: flex;
    align-items: center;
    gap: 12px;
}
.cc-data-card-header-spacer { flex: 1; }

/* MudTable restyle inside the card — small uppercase headers, more breathing room */
.cc-data-card .mud-table-container { background: var(--cc-white); }
.cc-data-card .mud-table-head th {
    font-family: var(--cc-font-heading) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cc-black) !important;
    background: var(--cc-white) !important;
    border-bottom: 2px solid var(--cc-light-gray) !important;
    padding: 14px 18px !important;
}
.cc-data-card .mud-table-row td {
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--cc-light-gray);
    font-size: 14.5px;
    color: var(--cc-black);
}
.cc-data-card .mud-table-row:last-child td { border-bottom: none; }
.cc-data-card .mud-table-cell-mono { font-family: monospace; font-size: 14px; }

/* Laptop-width breathing room for WIDE admin tables.

   The 18px side padding above is a design choice and stays at desktop widths,
   but it is charged per column: the Users table has eight, so 288px of a 1366px
   laptop screen — minus the nav drawer — is padding before a single character of
   data is drawn. That is what makes these tables feel cramped in the 600–1440px
   band, where MudTable is still a real table (it only flips to stacked cards
   below Breakpoint.Sm = 600px) but has nowhere near desktop room.

   Trimming the sides gives roughly 100px back across an eight-column table,
   which is the difference between columns that fit and columns that wrap. The
   vertical padding is untouched, so row height and rhythm are unchanged.

   Scoped to .cc-admin-context so this affects the wide admin/analytics tables
   that have the problem and leaves narrower data cards elsewhere alone. */
@media (min-width: 600px) and (max-width: 1439.98px) {
    .cc-admin-context .cc-data-card .mud-table-head th,
    .cc-admin-context .cc-data-card .mud-table-row td {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ---- Phones: red divider between records in a MudTable's stacked list ----
   Below its Breakpoint, MudTable drops the header and stacks each cell as its own
   "Label   Value" line (root gets .mud-xs/sm/md-table; see MudBlazor.min.css).
   Every cell then carries the same faint 1px line, so one record is impossible to
   tell from the next. Drop the per-cell lines and put a red rule under the LAST
   cell of each row — that line now means "end of this record".
   Gated on the stacked-mode class so a real (non-collapsed) table is untouched;
   at this width every declared breakpoint is collapsed, hence all three.
   !important because cc-components.css is linked before MudBlazor's own CSS. */
@media (max-width: 599.98px) {
    .mud-xs-table .mud-table-body .mud-table-row .mud-table-cell,
    .mud-sm-table .mud-table-body .mud-table-row .mud-table-cell,
    .mud-md-table .mud-table-body .mud-table-row .mud-table-cell {
        border-bottom: none !important;
    }

    .mud-xs-table .mud-table-body .mud-table-row .mud-table-cell:last-child,
    .mud-sm-table .mud-table-body .mud-table-row .mud-table-cell:last-child,
    .mud-md-table .mud-table-body .mud-table-row .mud-table-cell:last-child {
        border-bottom: 2px solid var(--cc-medium-gray) !important;
        padding-bottom: var(--cc-sp-6) !important;
    }

    /* Card edge / pagination already closes the list — no trailing rule. */
    .mud-xs-table .mud-table-body .mud-table-row:last-child .mud-table-cell:last-child,
    .mud-sm-table .mud-table-body .mud-table-row:last-child .mud-table-cell:last-child,
    .mud-md-table .mud-table-body .mud-table-row:last-child .mud-table-cell:last-child {
        border-bottom: none !important;
    }
}

/* ---------------- STATUS / TYPE PILLS ---------------- */
.cc-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 4px;
    font-family: var(--cc-font-heading);
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.5;
    white-space: nowrap;
}
.cc-pill.tone-critical   { background: rgba(var(--cc-red-rgb), 0.10);  color: var(--cc-danger-text); }
.cc-pill.tone-stable     { background: rgba(59, 130, 246, 0.10); color: var(--cc-info-text); }
.cc-pill.tone-legacy     { background: var(--cc-light-gray);    color: var(--cc-dark-gray); }
.cc-pill.tone-pending    { background: rgba(245, 158, 11, 0.18); color: var(--cc-warning-text); }
.cc-pill.tone-current    { background: rgba(34, 197, 94, 0.16);  color: var(--cc-success-text); }
.cc-pill.tone-superseded { background: var(--cc-light-gray);    color: var(--cc-dark-gray); }
.cc-pill.tone-eol        { background: rgba(var(--cc-red-rgb), 0.10);  color: var(--cc-danger-text); }
.cc-pill.tone-success    { background: rgba(34, 197, 94, 0.16);  color: var(--cc-success-text); }
.cc-pill.tone-info       { background: rgba(59, 130, 246, 0.10); color: var(--cc-info-text); }
.cc-pill.tone-warning    { background: rgba(245, 158, 11, 0.18); color: var(--cc-warning-text); }
.cc-pill.tone-neutral    { background: var(--cc-light-gray);    color: var(--cc-dark-gray); }
.cc-pill.tone-yellow     { background: rgba(234, 179, 8, 0.18);  color: var(--cc-yellow-text); }
.cc-pill.tone-teal       { background: rgba(20, 184, 166, 0.16); color: var(--cc-teal-text); }
.cc-pill.tone-indigo     { background: rgba(99, 102, 241, 0.16); color: var(--cc-indigo-text); }

/* ---------------- ADMIN PAGE TITLES & STRUCTURE ---------------- */
/* Mirrors the Data_Analytics typographic system: industrial-uppercase H1-H6
   with tracked letterforms. !important defeats the inline letter-spacing left
   over from the original mixed-case design without having to edit every page. */
.cc-admin-page-title {
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-family: var(--cc-font-display) !important;
}

/* Subtitle under the page title — unified treatment so every page reads with
   the same density and color, replacing scattered inline styles. */
.cc-admin-page-subtitle {
    color: var(--cc-dark-gray) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin-top: 2px !important;
}

/* Small uppercase eyebrow label — Data_Analytics's .pc-toolbar-label pattern.
   Used above content groups (KPI grid, etc.) to give the page report-like
   structure without taking real estate. */
.cc-admin-eyebrow {
    font-family: var(--cc-font-heading);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--cc-medium-gray);
    margin-bottom: -4px;
}

/* Generic admin panel — same red-rail accent as KPI tiles so the dashboard
   activity feed / quick actions visually belong to the same family instead of
   being one-off rounded boxes. */
.cc-admin-panel {
    position: relative;
    background: var(--cc-white);
    border: 1px solid var(--cc-light-gray);
    border-radius: 12px;
    padding: 20px 24px;
    overflow: hidden;
}
.cc-admin-panel::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 4px;
    background: var(--cc-red);
}

/* Dashboard welcome strip — two-column layout. Identity on the left, a
   handful of live signals on the right. Red left rail keeps the same family
   as KPI tiles below; no gradient, no decorative pills. */
.cc-welcome-strip {
    position: relative;
    background: var(--cc-white);
    border: 1px solid var(--cc-light-gray);
    border-radius: 12px;
    padding: 20px 24px 20px 28px;
    display: flex;
    align-items: stretch;
    gap: 32px;
    overflow: hidden;
}
.cc-welcome-strip::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 4px;
    background: var(--cc-red);
}
.cc-welcome-strip-main { flex: 1; min-width: 0; }
.cc-welcome-eyebrow {
    font-family: var(--cc-font-heading);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--cc-medium-gray);
}
.cc-welcome-strip-title {
    font-family: var(--cc-font-display);
    font-size: 23px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cc-black);
    line-height: 1.15;
    margin-top: 4px;
}
.cc-welcome-identity {
    margin-top: 6px;
    font-family: var(--cc-font-medium);
    font-size: 14px;
    font-weight: 500;
    color: var(--cc-dark-gray);
    letter-spacing: 0.02em;
}

/* Right-side stat column — three discreet items, vertically centered, with
   a thin separator from the identity column. */
.cc-welcome-stats {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
    border-left: 1px solid var(--cc-light-gray);
    padding-left: 24px;
    min-width: 200px;
}
.cc-welcome-stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
    text-decoration: none;
    color: var(--cc-black);
    transition: color 0.15s;
}
a.cc-welcome-stat:hover { color: var(--cc-red); }
.cc-welcome-stat.muted { color: var(--cc-medium-gray); }
.cc-welcome-stat-value {
    font-family: var(--cc-font-heading);
    font-size: 19px;
    font-weight: 800;
    color: inherit;
    font-feature-settings: 'tnum';
    letter-spacing: -0.01em;
}
.cc-welcome-stat-value-sm {
    font-family: var(--cc-font-medium);
    font-size: 14px;
    font-weight: 600;
    color: inherit;
}
.cc-welcome-stat-label {
    font-family: var(--cc-font-medium);
    font-size: 13px;
    font-weight: 500;
    color: var(--cc-medium-gray);
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .cc-welcome-strip { flex-direction: column; gap: 16px; }
    .cc-welcome-stats {
        border-left: none;
        border-top: 1px solid var(--cc-light-gray);
        padding-left: 0;
        padding-top: 14px;
        align-items: flex-start;
        width: 100%;
    }
}

/* Drawer / side-form title block — standardized across BranchForm, CompanyForm,
   InviteUserForm, MachineTransferForm, RoleForm so every drawer opens with the
   same uppercase-tracked heading and muted subtitle. */
.cc-drawer-title {
    font-family: var(--cc-font-display) !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--cc-black) !important;
    line-height: 1.2 !important;
}

/* ---------------- ADMIN PAGE SHELL TWEAKS (Stripe-inspired) ---------------- */
.cc-admin-shell { padding: 4px; }
.cc-admin-card  {
    background: var(--cc-white);
    border: 1px solid var(--cc-light-gray);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(10,18,36,0.05);
}

/* ---------------- COMPACT ROLE PILLS (Invite dialog) ---------------- */
.cc-role-pill-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cc-role-pill {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--cc-light-gray);
    background: var(--cc-white);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    font-family: var(--cc-font-medium);
    font-size: 14px;
    font-weight: 600;
    color: var(--cc-dark-gray);
    line-height: 1.2;
    white-space: nowrap;
    width: 100%;
    text-align: left;
}
/* Role-name span grows; pushes any trailing badge to the right edge. */
.cc-role-pill > span:not(.cc-role-pill-radio):not(.cc-role-pill-badge) {
    flex: 1;
    text-align: left;
}
.cc-role-pill:hover {
    border-color: var(--cc-medium-gray);
    background: var(--cc-bg);
}
.cc-role-pill.selected {
    border-color: var(--cc-red);
    background: rgba(var(--cc-red-rgb), 0.06);
    color: var(--cc-red);
}
.cc-role-pill-radio {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--cc-medium-gray);
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    background: var(--cc-white);
}
.cc-role-pill.selected .cc-role-pill-radio {
    border-color: var(--cc-red);
    border-width: 2px;
}
.cc-role-pill.selected .cc-role-pill-radio::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cc-red);
}
.cc-role-pill-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--cc-light-gray);
    color: var(--cc-dark-gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cc-role-pill.selected .cc-role-pill-badge {
    background: rgba(var(--cc-red-rgb), 0.12);
    color: var(--cc-red);
}
.cc-role-description {
    font-size: 13.5px;
    color: var(--cc-medium-gray);
    margin-top: 8px;
    line-height: 1.4;
    min-height: 18px; /* prevents layout jump as text changes */
}

/* ---------------- ROLE CARDS (legacy, kept for any other uses) ---------------- */
.cc-role-card {
    border: 1px solid var(--cc-light-gray);
    border-radius: 8px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: var(--cc-white);
}
.cc-role-card + .cc-role-card { margin-top: 8px; }
.cc-role-card:hover {
    border-color: var(--cc-medium-gray);
    background: var(--cc-bg);
}
.cc-role-card.selected {
    border-color: var(--cc-red);
    border-width: 2px;
    padding: 13px 15px;
    background: rgba(var(--cc-red-rgb), 0.04);
}
.cc-role-card-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.cc-role-card-radio {
    width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid var(--cc-medium-gray);
    flex-shrink: 0; margin-top: 2px;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.15s;
    background: var(--cc-white);
}
.cc-role-card.selected .cc-role-card-radio { border-color: var(--cc-red); border-width: 2px; }
.cc-role-card.selected .cc-role-card-radio::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--cc-red);
}
.cc-role-card-body { flex: 1; min-width: 0; }
.cc-role-card-chips {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-bottom: 6px;
}
.cc-role-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 4px;
    font-family: var(--cc-font-medium);
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.5;
}
.cc-role-chip.role-superadmin { background: rgba(var(--cc-red-rgb), 0.10); color: var(--cc-danger-text); }
.cc-role-chip.role-admin      { background: rgba(var(--cc-red-rgb), 0.08); color: var(--cc-danger-text); }
.cc-role-chip.role-operator   { background: rgba(59, 130, 246, 0.10); color: var(--cc-info-text); }
.cc-role-chip.role-dealer     { background: rgba(245, 158, 11, 0.12); color: var(--cc-warning-text); }
.cc-role-chip.role-cs         { background: rgba(59, 130, 246, 0.10); color: var(--cc-info-text); }
.cc-role-chip.role-sales      { background: rgba(34, 197, 94, 0.12); color: var(--cc-success-text); }
.cc-role-chip-secondary {
    background: var(--cc-light-gray);
    color: var(--cc-dark-gray);
}
.cc-role-chip-mini {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600; color: var(--cc-medium-gray);
}
.cc-role-card-description {
    font-size: 14px; color: var(--cc-dark-gray);
    line-height: 1.5;
}

/* Banners inside dialogs (info / warning / success) */
.cc-banner {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 14px; line-height: 1.5;
}
.cc-banner .mud-icon-root { font-size: 18px !important; flex-shrink: 0; margin-top: 1px; }
.cc-banner.warn { background: #fff7e6; color: var(--cc-warning-text); }
.cc-banner.warn .mud-icon-root { color: #b45309; }
.cc-banner.info { background: #eff6ff; color: #1e40af; }
.cc-banner.info .mud-icon-root { color: var(--cc-info-solid); }
.cc-banner.muted { background: var(--cc-bg); color: var(--cc-dark-gray); border: 1px solid var(--cc-light-gray); }
.cc-banner.success { background: #e8f8ee; color: var(--cc-success-text); }
.cc-banner.success .mud-icon-root { color: var(--cc-success); }
.cc-banner.brand { background: #fff1f3; color: #92002b; border-left: 3px solid var(--cc-red); }
.cc-banner.brand .mud-icon-root { color: var(--cc-red); }

/* Branded "action needed" notification. Applied to a single snackbar via
   SnackbarOptions.SnackbarTypeClass so app-wide toasts are unaffected: a white card
   with a Command Center red accent stripe, dark icon/text, and a charcoal action. */
.mud-snackbar.cc-snackbar-notice {
    background: var(--cc-white) !important;
    color: var(--cc-black) !important;
    border-left: 3px solid var(--cc-red);
    border-radius: 0;                 /* docked flush to the window corner */
    margin: 0 !important;
    animation: cc-snackbar-slide-in-right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dock this notice flush to the top-right window corner (no gap) and slide it in from
   the right. :has scopes the container move to when the notice is present, so every
   other toast keeps its configured position. */
#mud-snackbar-container:has(.cc-snackbar-notice) {
    top: calc(var(--cc-header-h) + var(--cc-tab-bar-h)) !important;  /* flush under the top chrome */
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    padding: 0 !important;
}
@keyframes cc-snackbar-slide-in-right {
    from { transform: translateX(110%); }
    to   { transform: translateX(0); }
}
/* Leading clipboard icon + message: dark on the white surface. */
.cc-snackbar-notice .mud-snackbar-icon,
.cc-snackbar-notice .mud-snackbar-icon .mud-icon-root { color: var(--cc-black); opacity: 1; }
.cc-snackbar-notice .mud-snackbar-content-message { color: var(--cc-black); }
/* ASSIGN action — filled charcoal with white label. */
.cc-snackbar-notice .mud-snackbar-content-action .mud-button-filled {
    background-color: var(--cc-dark-gray) !important;
    color: var(--cc-white) !important;
    font-weight: 700;
    border-radius: var(--cc-radius-sm);
}
/* Close (X) — dark on the white surface. */
.cc-snackbar-notice .mud-snackbar-content-action .mud-icon-button,
.cc-snackbar-notice .mud-snackbar-content-action .mud-icon-button .mud-icon-root {
    color: var(--cc-black) !important;
}

/* ---------------- ADMIN DASHBOARD (activity feed + quick actions) ---------------- */
.cc-activity-bucket-header {
    font-family: var(--cc-font-heading);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cc-medium-gray);
    padding: 16px 4px 8px;
    margin-top: 4px;
}
.cc-activity-bucket-header:first-of-type { padding-top: 6px; }
.cc-activity-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 8px;
    border-bottom: 1px solid var(--cc-light-gray);
    color: inherit;
    text-decoration: none;
    transition: background 0.12s;
    position: relative;
    border-radius: 6px;
}
.cc-activity-row:last-child { border-bottom: none; }
.cc-activity-row:hover {
    background: var(--cc-bg);
    text-decoration: none;
}
.cc-activity-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cc-font-heading);
    font-size: 11px;
    font-weight: 800;
    color: var(--cc-white);
    margin-top: 1px;
    user-select: none;
}
.cc-activity-avatar.color-0 { background: #475569; } /* slate */
.cc-activity-avatar.color-1 { background: var(--cc-info-solid); } /* blue */
.cc-activity-avatar.color-2 { background: var(--cc-success-solid); } /* green */
.cc-activity-avatar.color-3 { background: var(--cc-warning-solid); } /* orange */
.cc-activity-avatar.color-4 { background: #9333ea; } /* purple */
.cc-activity-avatar.color-5 { background: #dc2626; } /* red */

.cc-activity-content {
    flex: 1;
    min-width: 0;
}
.cc-activity-text {
    font-size: 15px;
    color: var(--cc-black);
    line-height: 1.45;
}
.cc-activity-text strong { font-weight: 700; }
.cc-activity-text .cc-activity-kind-icon {
    color: var(--cc-medium-gray);
    font-size: 14px !important;
    vertical-align: middle;
    margin: 0 4px;
}
.cc-activity-meta {
    margin-top: 3px;
    font-size: 13px;
    color: var(--cc-medium-gray);
}
.cc-activity-action {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--cc-font-medium);
    font-size: 13px;
    font-weight: 600;
    color: var(--cc-medium-gray);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0 4px;
}
.cc-activity-action .mud-icon-root { font-size: 14px !important; }
.cc-activity-row:hover .cc-activity-action {
    opacity: 1;
    color: var(--cc-red);
}
@media (max-width: 599px) {
    .cc-activity-action { display: none; }
}

.cc-quick-actions { display: flex; flex-direction: column; gap: 10px; }
.cc-quick-action {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--cc-light-gray);
    border-radius: 8px;
    text-decoration: none;
    color: var(--cc-black);
    transition: border-color 0.15s, background 0.15s;
    background: var(--cc-white);
    text-align: left;
    width: 100%;
    font: inherit;
    cursor: pointer;
}
.cc-quick-action:hover {
    border-color: var(--cc-medium-gray);
    background: var(--cc-bg);
    text-decoration: none;
}
.cc-quick-action-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--cc-black);
    border: 1px solid var(--cc-black);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
/* Force the MudIcon glyph inside to render white — pages render the icons
   with Color=Primary (brand red) which would otherwise clash with the black
   tile. */
.cc-quick-action-icon .mud-icon-root {
    color: var(--cc-white) !important;
}
.cc-quick-action:hover .cc-quick-action-icon {
    background: var(--cc-red);
    border-color: var(--cc-red);
    transform: scale(1.04);
}
.cc-quick-action-text  { flex: 1; min-width: 0; text-align: left; }
.cc-quick-action-title {
    flex: 1; min-width: 0;
    font-weight: 700; font-size: 13.5px;
    line-height: 1.3;
    color: var(--cc-black);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Subtle inline kind tag used inside MudSelect dropdown rows so a Dealer-Kind
   Company is distinguishable from a Customer at a glance. Customer rows show
   no tag (it's the default); only Dealer rows are marked. */
.cc-kind-tag {
    font-family: var(--cc-font-display);
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 9px;
    border-radius: 4px;
    line-height: 1.4;
}

.cc-kind-tag.dealer {
    color: var(--cc-white);
    background: var(--cc-black);
}

.cc-kind-tag.draft {
    color: var(--cc-dark-gray);
    background: var(--cc-light-gray);
}
.cc-quick-action-desc  { font-size: 13px; color: var(--cc-medium-gray); margin-top: 2px; text-align: left; }
.cc-quick-action-arrow { color: var(--cc-medium-gray); }
.cc-quick-action:hover .cc-quick-action-arrow { color: var(--cc-red); }

/* Link-style quick action — tile navigates to a full page rather than opening
   a drawer. The OpenInNew glyph on the right hints at that, and the slightly
   smaller size keeps it visually distinct from the drawer-action arrow. */
.cc-quick-action-link .cc-quick-action-arrow .mud-icon-root,
.cc-quick-action-link .cc-quick-action-arrow.mud-icon-root {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.cc-section-eyebrow {
    font-family: var(--cc-font-heading);
    font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--cc-medium-gray);
}

/* ---------------- SIDE-DRAWER FORM SHELL ---------------- */
/* Used inside <MudDrawer Anchor="Anchor.Right" Variant="DrawerVariant.Temporary">
   to host a multi-section form with a fixed header + scrollable body + fixed footer. */
.cc-side-drawer .mud-drawer-content {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.cc-side-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
}
.cc-side-form-header {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 20px 24px 16px;
    border-top: 3px solid var(--cc-red);
    border-bottom: 1px solid var(--cc-light-gray);
    flex-shrink: 0;
}
/* Side-drawer titles render in caps + brand display font for a stronger
   visual anchor at the top of the form. Applies to every cc-side-form drawer
   (Invite User, Add Customer/Dealer, Add Branch, Transfer AMR, Create Role). */
.cc-side-form-header .mud-typography-h6 {
    font-family: var(--cc-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 800;
}
.cc-side-form-body {
    padding: 18px 24px;
    overflow-y: auto;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
}
.cc-side-form-footer {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid var(--cc-light-gray);
    background: var(--cc-white);
    flex-shrink: 0;
}

/* ---------------- BRANDED DIALOG ---------------- */
/* Applied to <MudDialog Class="cc-dialog"> to match the side-drawer chrome:
   3px red top accent, DinotBold uppercase title. Sized to feel substantial
   on desktop without going so wide that simple confirmations look bloated. */
.cc-dialog {
    border-top: 3px solid var(--cc-red);
    border-radius: 8px;
    overflow: hidden;
}
/* !important on every padding/gap below is load-bearing, not defensive.
   MudBlazor styles these with `.mud-dialog .mud-dialog-title` etc. — the same
   0,2,0 specificity as `.cc-dialog .mud-dialog-*` — and MudBlazor.min.css is
   linked AFTER cc-components.css in App.razor, so it wins every tie. Drop the
   !important and these rules silently stop applying. */
.cc-dialog .mud-dialog-title {
    padding: 24px 32px 12px !important;
}
.cc-dialog .mud-dialog-title,
.cc-dialog .mud-dialog-title .mud-typography-h6 {
    font-family: var(--cc-font-heading) !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 21px;
}
.cc-dialog .mud-dialog-content {
    padding: 4px 32px 16px !important;
}

.cc-dialog .mud-dialog-actions {
    padding: 24px 48px 32px;
    gap: 16px;
}

/* Mobile: tighter padding so the dialog doesn't push content past the fold. */
@media (max-width: 599.98px) {
    .cc-dialog .mud-dialog-title   { padding: 16px 20px 8px !important; }
    .cc-dialog .mud-dialog-content { padding: 4px 20px 12px !important; }
    .cc-dialog .mud-dialog-actions { padding: 10px 20px 14px !important; }
}

/* ---------------- ACCENT DIALOG ----------------
   Opt-in modifier for the reset-password mockup: hard-squared corners, a
   light-gray step band instead of a title bar, 24px body. Used only by
   UserPasswordDialog — the other .cc-dialog modals keep the standard title bar.

   These rules MUST come after the .cc-dialog block above: both are 0,2,0 with
   !important, so source order is what makes the accent variant win. */
.cc-dialog-accent {
    border-radius: 0 !important;
    border: 1px solid var(--cc-gray-200);
}
.cc-dialog-accent .mud-dialog-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: var(--cc-light-gray);
    border-bottom: 1px solid var(--cc-gray-300);
    padding: var(--cc-sp-5) var(--cc-sp-8) !important;
}
/* Close sits hard right in the step band (margin-left:auto against the
   flex-start title) and is sized/colored to the step text, so it reads as the
   end of that label row rather than a control floating above it. Mud's own
   .mud-icon-button padding and .mud-icon-size-* are what make it taller than
   the text — these selectors outrank both without needing !important. */
.cc-dialog-accent .mud-dialog-title .cc-dialog-accent-close {
    margin-left: auto;
    padding: 0;
    /* The band's height is max(step-text line box, button box). Pinning the box
       to the step text's own font size takes the button out of that contest for
       good, and overflow:visible lets the glyph below render larger than its box
       — so the icon can be resized freely without ever growing the band. */
    width: var(--cc-fs-xs);
    height: var(--cc-fs-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    color: var(--cc-dark-gray);
    background-color: transparent;
}
.cc-dialog-accent .mud-dialog-title .cc-dialog-accent-close:hover {
    color: var(--cc-black);
    background-color: transparent;
}
/* Glyph size is the one knob to turn — it overflows the fixed box above rather
   than expanding it. Zeroing the margin keeps it flush to the band's right edge,
   since Mud gives icons inside buttons a trailing margin. */
.cc-dialog-accent .mud-dialog-title .cc-dialog-accent-close .mud-icon-root {
    font-size: var(--cc-fs-lg);
    width: 1em;
    height: 1em;
    margin: 0;
}

/* MudBlazor also puts `margin: 8px 0` on .mud-dialog-content; zero it so the
   body inset is exactly the card's 24px, matching .cc-accept-body. */
.cc-dialog-accent .mud-dialog-content {
    padding: var(--cc-sp-8) !important;
    margin: 0 !important;
}

/* The action footer. .cc-dialog's own rule insets actions 48px, but the accent
   variant runs a 24px body, so realign or the buttons sit proud of the form
   above them. Later in the file than the .cc-dialog rule, which is what lets an
   equal-specificity selector win — see the note at the top of this section. */
.cc-dialog-accent .mud-dialog-actions {
    padding: var(--cc-sp-2) var(--cc-sp-8) var(--cc-sp-6) !important;
    gap: var(--cc-sp-3);
}

.cc-dialog-accent .mud-dialog-actions .mud-button-root {
    height: 52px;
    border-radius: 0;
    font-family: "DinotBold", "Klavika", sans-serif;
    font-size: var(--cc-fs-sm);
    letter-spacing: 0.06em;
}
.cc-dialog-accent .mud-dialog-actions .mud-button-outlined {
    flex: 1;
    border: 2px solid var(--cc-black);
    color: var(--cc-black);
    background: var(--cc-white);
}
.cc-dialog-accent .mud-dialog-actions .mud-button-outlined:hover {
    background: var(--cc-light-gray);
}
.cc-dialog-accent .mud-dialog-actions .mud-button-filled {
    flex: 2;
    background: var(--cc-red);
    color: var(--cc-white);
}
.cc-dialog-accent .mud-dialog-actions .mud-button-filled:hover {
    background: var(--cc-red-hover);
}
.cc-dialog-accent .mud-dialog-actions .mud-button-filled:disabled {
    background: var(--cc-medium-gray);
    color: var(--cc-white);
}

@media (max-width: 599.98px) {
    .cc-dialog-accent .mud-dialog-title   { padding: var(--cc-sp-4) var(--cc-sp-5) !important; }
    .cc-dialog-accent .mud-dialog-content { padding: var(--cc-sp-5) !important; }
    .cc-dialog-accent .mud-dialog-actions { padding: var(--cc-sp-2) var(--cc-sp-5) var(--cc-sp-5) !important; }
}

/* ---------------- IN-COLUMN FILTER TRIGGER ---------------- */
/* Used in MudTh inside MudTable header to act as both the column label and
   the filter activator. Sits unobtrusively next to the column title with a
   small filter glyph that lights up red when a filter is applied. */
.cc-col-filter-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    border: none;
    padding: 4px 6px; margin: -4px -6px;
    border-radius: 6px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}
.cc-col-filter-btn:hover {
    background: var(--cc-bg);
}
.cc-col-filter-btn .mud-icon-root {
    color: var(--cc-medium-gray);
    transition: color 0.15s;
}
.cc-col-filter-btn:hover .mud-icon-root {
    color: var(--cc-black);
}
.cc-col-filter-btn.active {
    color: var(--cc-red);
}
.cc-col-filter-btn.active .mud-icon-root {
    color: var(--cc-red);
}

/* ---------------- AVATAR STACK + POPOVER ----------------
   Used in the Dealers list "Customer Companies" cell. Shows up to 3 initials
   bubbles overlapping with a "+N" pill when there are more, and opens a
   MudMenu popover listing every assigned customer with a deep-link to the
   filtered Customers page. */
.cc-avatar-stack {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 2px 4px;
    margin: -2px -4px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
}
.cc-avatar-stack:hover {
    background: var(--cc-bg);
}
.cc-avatar-stack-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid var(--cc-white);
    margin-left: -8px;
    font-family: var(--cc-font-heading);
    font-size: 11px;
    font-weight: 800;
    color: var(--cc-white);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.cc-avatar-stack-item:first-child { margin-left: 0; }
/* 6 deterministic shades — keyed by FNV-1a hash of the customer's name so the
   same customer is always the same color across the table and popover. */
.cc-avatar-stack-item.color-0 { background: var(--cc-red); }   /* brand red */
.cc-avatar-stack-item.color-1 { background: var(--cc-header-bg); }   /* near black */
.cc-avatar-stack-item.color-2 { background: var(--cc-dark-gray); }   /* dark gray */
.cc-avatar-stack-item.color-3 { background: #1565C0; }   /* dealer-tag blue */
.cc-avatar-stack-item.color-4 { background: var(--cc-success); }   /* success green */
.cc-avatar-stack-item.color-5 { background: var(--cc-warning); }   /* warning amber */
.cc-avatar-stack-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px; height: 28px; padding: 0 6px;
    border-radius: 14px;
    border: 2px solid var(--cc-white);
    background: var(--cc-bg);
    color: var(--cc-black);
    margin-left: -8px;
    font-family: var(--cc-font-heading);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 0 0 1px var(--cc-light-gray);
}

/* Popover that lists every customer assigned to a dealer. Headed with a small
   DinotBold count, each row showing the same colored initial bubble for
   continuity with the stack on the row itself. */
.cc-customer-popover {
    min-width: 280px;
    max-width: 380px;
    padding: 4px 0;
}
.cc-customer-popover-header {
    padding: 8px 16px 6px;
    font-family: var(--cc-font-heading);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cc-medium-gray);
}

/* ---------------- LAST MODIFIED CELL ---------------- */
/* Two-line audit cell: primary relative-time label on top, with the modifier's
   colored initial bubble + name as the secondary line. Full timestamp lives in
   a title-tooltip on the wrapping div for precision. */
.cc-modified-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
}
.cc-modified-when {
    font-weight: 600;
    font-size: 14px;
    color: var(--cc-black);
}
.cc-modified-by {
    font-size: 13px;
    color: var(--cc-medium-gray);
}
.cc-modified-by-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* ---------------- ROW ACTIONS ---------------- */
/* Per-row action cluster used in MudTable. Groups icon buttons with explicit
   spacing and inserts a thin vertical rule before the destructive action so
   Delete reads as separate from Edit / Reset password. */
.cc-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Minimal row-action icon button — neutral at rest, brand-red on hover. */
.cc-row-action-btn,
.cc-row-action-btn .mud-icon-root {
    color: var(--cc-dark-gray) !important;
}
.cc-row-action-btn:hover {
    background: rgba(var(--cc-red-rgb), 0.08) !important;
}
.cc-row-action-btn:hover,
.cc-row-action-btn:hover .mud-icon-root {
    color: var(--cc-red) !important;
}

/* Software column — single inline row: version · CHANNEL. No pill. */
.cc-software-cell {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}
.cc-software-version {
    font-family: "JetBrains Mono", "Fira Code", monospace;
    font-size: 13.5px;
    color: var(--cc-black);
    font-weight: 600;
}
.cc-software-sep {
    color: var(--cc-medium-gray);
    font-weight: 600;
}
.cc-software-channel {
    font-family: var(--cc-font-heading);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--cc-medium-gray);
}
.cc-row-actions-divider {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: var(--cc-light-gray);
    margin: 0 6px;
}

/* Mobile: side drawer takes the full viewport, form padding is tighter,
   and any in-form MudStack Row wraps so two-column layouts (Country+Phone,
   City+State+ZIP, First+Last) stack vertically when there's no room. */
@media (max-width: 599.98px) {
    .cc-side-drawer .mud-drawer-fixed,
    .cc-side-drawer.mud-drawer-fixed {
        width: 100vw !important;
        max-width: 100vw !important;
    }
    .cc-side-form-header { padding: 14px 16px 12px; }
    .cc-side-form-body   { padding: 14px 16px; }

    .cc-side-form-footer {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
        padding: 12px 16px;
    }
    .cc-side-form-footer .mud-spacer { display: none; }
    .cc-side-form-footer .mud-button-root {
        width: 100%;
        margin: 0 !important;
    }

    .cc-side-form-body .mud-stack-row {
        flex-wrap: wrap;
    }
    /* Anything inside a wrapping form row should grow to the full line on mobile,
       except for inputs that explicitly opt out via the cc-keep-row class. */
    .cc-side-form-body .mud-stack-row > .mud-input-control,
    .cc-side-form-body .mud-stack-row > .mud-input-helper-text,
    .cc-side-form-body .mud-stack-row > .mud-input,
    .cc-side-form-body .mud-stack-row > .mud-form-control {
        min-width: 100%;
    }
}

/* ---------------- MY DEALER PAGE (map-led hero) ---------------- */
.cc-dealer-map {
    width: 100%;
    height: 320px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--cc-light-gray);
    background: var(--cc-bg);
}

.cc-dealer-hero {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cc-dealer-hero-identity {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cc-dealer-hero-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cc-dealer-hero-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--cc-medium-gray);
    font-size: 14px;
}

.cc-dealer-hero-sep { color: var(--cc-light-gray); }

.cc-dealer-hero-address {
    color: var(--cc-dark-gray);
    font-weight: 500;
}

.cc-dealer-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: 0.02em;
}
.cc-dealer-status.active   { color: var(--cc-success-text); }
.cc-dealer-status.inactive { color: var(--cc-medium-gray); }

.cc-dealer-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cc-medium-gray);
    display: inline-block;
}
.cc-dealer-status.active   .cc-dealer-status-dot { background: var(--cc-success); }
.cc-dealer-status.inactive .cc-dealer-status-dot { background: var(--cc-medium-gray); }

.cc-dealer-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--cc-light-gray);
}

.cc-dealer-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--cc-bg);
    border: 1px solid var(--cc-light-gray);
    color: var(--cc-black);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cc-dealer-action:hover {
    background: var(--cc-white);
    border-color: var(--cc-red);
    color: var(--cc-red);
    text-decoration: none;
}
.cc-dealer-action .mud-icon-root { font-size: 16px !important; }

.cc-dealer-branch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.cc-dealer-branch-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--cc-light-gray);
    border-radius: 10px;
    background: var(--cc-white);
    transition: border-color 0.12s, box-shadow 0.12s;
}
.cc-dealer-branch-card:hover {
    border-color: var(--cc-red);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.cc-dealer-branch-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--cc-bg);
    color: var(--cc-red);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cc-dealer-branch-icon .mud-icon-root { color: var(--cc-red); }

.cc-dealer-branch-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.cc-dealer-branch-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--cc-black);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .cc-dealer-map { height: 240px; }
    .cc-dealer-hero-actions { gap: 6px; }
    .cc-dealer-action {
        padding: 7px 12px;
        font-size: 13.5px;
    }
}

/* ============================================================================
   RC MOWERS DESIGN LANGUAGE — Admin surface only (scoped to .cc-admin-context)
   Ported from Data_Analytics so the Admin module shares the RC Mowers brand
   tokens, typography rhythm, and MudBlazor component overrides without
   disturbing the Support surface.
   ============================================================================ */

.cc-admin-context {
    --rcm-white:       var(--cc-white);
    --rcm-light-gray:  var(--cc-light-gray);
    --rcm-red:         var(--cc-red);
    --rcm-red-dark:    var(--cc-red-hover);
    --rcm-black:       var(--cc-black);
    --rcm-medium-gray: var(--cc-medium-gray);
    --rcm-dark-gray:   var(--cc-dark-gray);

    --rcm-font-header: "Klavika", "DinotBold", Arial, sans-serif;
    --rcm-font-body:   "Dinot", "DinotMedium", Arial, sans-serif;

    --rcm-shadow-soft: 0 2px 10px rgba(0,0,0,0.10);
    --rcm-shadow:      0 6px 20px rgba(0,0,0,0.12);
    --rcm-border:      rgba(0,0,0,0.08);
}

/* ---- Typography rhythm: uppercase headers with brand letter-spacing ---- */
.cc-admin-context h1,
.cc-admin-context h2,
.cc-admin-context h3,
.cc-admin-context h4,
.cc-admin-context h5,
.cc-admin-context h6,
.cc-admin-context .mud-typography-h1,
.cc-admin-context .mud-typography-h2,
.cc-admin-context .mud-typography-h3,
.cc-admin-context .mud-typography-h4,
.cc-admin-context .mud-typography-h5,
.cc-admin-context .mud-typography-h6 {
    font-family: var(--rcm-font-header);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rcm-black);
}

.cc-admin-context .mud-typography-subtitle1,
.cc-admin-context .mud-typography-subtitle2 {
    font-family: var(--rcm-font-body);
    letter-spacing: 0.01em;
}

.cc-admin-context .mud-typography-overline {
    font-family: var(--rcm-font-header);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.cc-admin-context .mud-button,
.cc-admin-context .mud-button-root {
    font-family: var(--rcm-font-header);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

/* ---- MudBlazor component overrides (admin only) ---- */

/* Tables — uppercase tracked headers, brand hover */
.cc-admin-context .mud-table-head {
    background-color: var(--rcm-light-gray);
}
.cc-admin-context .mud-table-head th,
.cc-admin-context .mud-th {
    font-family: var(--rcm-font-header);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--rcm-black);
}
.cc-admin-context .mud-table-row:hover {
    background-color: var(--rcm-light-gray) !important;
}

/* Tabs — red active indicator + uppercase labels */
.cc-admin-context .mud-tabs-header {
    border-bottom: 2px solid var(--rcm-light-gray);
}
.cc-admin-context .mud-tab {
    font-family: var(--rcm-font-header);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rcm-black);
}
.cc-admin-context .mud-tab.mud-tab-active {
    color: var(--rcm-red) !important;
}
.cc-admin-context .mud-tab-slider {
    background-color: var(--rcm-red) !important;
}

/* Chips — uppercase, brand-color filled variants */
.cc-admin-context .mud-chip {
    font-family: var(--rcm-font-header);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cc-admin-context .mud-chip.mud-chip-filled.mud-chip-color-primary {
    background-color: var(--rcm-black) !important;
    color: var(--rcm-white) !important;
}
.cc-admin-context .mud-chip.mud-chip-filled.mud-chip-color-secondary {
    background-color: var(--rcm-red) !important;
    color: var(--rcm-white) !important;
}

/* Filled buttons — black primary / red secondary, white labels */
.cc-admin-context .mud-button-filled.mud-button-filled-primary {
    background-color: var(--rcm-black) !important;
    color: var(--rcm-white) !important;
}
.cc-admin-context .mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--rcm-dark-gray) !important;
}
.cc-admin-context .mud-button-filled.mud-button-filled-secondary {
    background-color: var(--rcm-red) !important;
    color: var(--rcm-white) !important;
}
.cc-admin-context .mud-button-filled.mud-button-filled-secondary:hover {
    background-color: var(--rcm-light-gray) !important;
    color: var(--rcm-black) !important;
    outline: 1px solid var(--rcm-black);
}
.cc-admin-context .mud-button-filled.mud-button-filled-secondary:hover .mud-button-label,
.cc-admin-context .mud-button-filled.mud-button-filled-secondary:hover span {
    color: var(--rcm-black) !important;
}

/* Inputs — red focus underline + outline matches brand */
.cc-admin-context .mud-input:focus-within {
    border-color: var(--rcm-red) !important;
}
.cc-admin-context .mud-input-underline:after {
    border-bottom-color: var(--rcm-red) !important;
}

/* Snackbar — red left rail, square corners */
.cc-admin-context ~ .mud-snackbar-provider .mud-snackbar,
.cc-admin-context .mud-snackbar {
    border-left: 4px solid var(--rcm-red) !important;
    background: var(--rcm-white) !important;
    color: var(--rcm-black) !important;
    max-width: 620px !important;
    min-height: 56px !important;
    padding: 14px 16px !important;
}

/* Date picker — red header toolbar */
.cc-admin-context .mud-picker-toolbar {
    background-color: var(--rcm-red) !important;
    color: var(--rcm-white) !important;
}
.cc-admin-context .mud-picker-toolbar *,
.cc-admin-context .mud-picker-toolbar .mud-typography,
.cc-admin-context .mud-picker-toolbar button {
    color: var(--rcm-white) !important;
}
.cc-admin-context .mud-picker-calendar-day.mud-selected,
.cc-admin-context .mud-picker-calendar-day.mud-range-start,
.cc-admin-context .mud-picker-calendar-day.mud-range-end {
    background-color: var(--rcm-red) !important;
    color: var(--rcm-white) !important;
}

/* Linear progress accent */
.cc-admin-context .mud-progress-linear-color-secondary .mud-progress-linear-bar {
    background-color: var(--rcm-red);
}

/* Divider tone */
.cc-admin-context .mud-divider {
    border-color: var(--rcm-light-gray) !important;
}

/* ---- Utility classes ported from Data_Analytics ---- */

.cc-admin-context .rcm-filter-toolbar {
    background: var(--rcm-white);
    border: 1px solid var(--rcm-border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.cc-admin-context .filter-toggle-group {
    border-radius: 8px !important;
}
.cc-admin-context .filter-toggle-group .mud-toggle-item {
    min-height: 40px !important;
    padding: 0 18px !important;
    font-size: calc(0.95rem + 1px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.cc-admin-context .mud-toggle-item.mud-toggle-item-selected.mud-primary {
    background-color: var(--rcm-black) !important;
    color: var(--rcm-white) !important;
}
.cc-admin-context .mud-toggle-item.mud-toggle-item-selected.mud-primary * {
    color: var(--rcm-white) !important;
}
.cc-admin-context .mud-toggle-item.mud-toggle-item-selected.mud-secondary {
    background-color: var(--rcm-red) !important;
    color: var(--rcm-white) !important;
}
.cc-admin-context .mud-toggle-item.mud-toggle-item-selected.mud-secondary * {
    color: var(--rcm-white) !important;
}

.cc-admin-context .filter-select .mud-input-slot,
.cc-admin-context .filter-date-picker .mud-input-slot {
    min-height: 40px !important;
    font-size: calc(0.95rem + 1px) !important;
}
.cc-admin-context .filter-select-fixed {
    min-width: 250px;
    max-width: 250px;
}

.cc-admin-context .rcm-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 48px 32px;
    border: 1px dashed var(--rcm-medium-gray);
    border-radius: 8px;
    background: rgba(0,0,0,0.015);
}
.cc-admin-context .rcm-empty-state-icon {
    width: 56px;
    height: 56px;
    background: var(--rcm-black);
    color: var(--rcm-white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    border-radius: 8px;
}
.cc-admin-context .rcm-empty-state-title {
    font-family: var(--rcm-font-header);
    font-size: calc(1rem + 1px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rcm-black);
}
.cc-admin-context .rcm-empty-state-desc {
    font-size: calc(0.85rem + 1px);
    color: var(--rcm-dark-gray);
    max-width: 360px;
    line-height: 1.5;
}

/* Mini-KPI helper utilities (subtle, neutral-only by default — no red rails) */
.cc-admin-context .mini-kpi {
    border-radius: 8px;
    border: 1px solid var(--rcm-border);
    background: var(--rcm-white);
    box-shadow: var(--rcm-shadow-soft);
}
.cc-admin-context .mini-kpi-black    { border-left: 4px solid var(--rcm-black); }
.cc-admin-context .mini-kpi-darkgray { border-left: 4px solid var(--rcm-dark-gray); }
.cc-admin-context .mini-kpi-medgray  { border-left: 4px solid var(--rcm-medium-gray); }

/* The old vertical .cc-pwd-checklist lived here. Both password forms now use
   the .cc-pw-* field group (strength meter + requirement pills) defined above,
   rendered by Components/Shared/PasswordSetFields.razor. */

/* ----- LEGAL DOCUMENT CLASSES -----*/

.cc-legal-document-page {
    flex-shrink: 0; 
    min-height: 100%;
    padding: var(--cc-sp-8);
}

.cc-legal-document-body {
    max-width: 130ch;
    margin: 0 auto;
    padding: var(--cc-sp-8);
    background: var(--cc-white);
    border: 1px solid var(--cc-gray-200);
    border-radius: var(--cc-radius-lg);
    box-shadow: var(--cc-shadow-card);

    /*Alters the regular text*/
    font-family: var(--cc-font-body);
    font-size: var(--cc-fs-md);
    color: var(--cc-dark-gray);
}

.cc-legal-document-title {
    font-family: var(--cc-font-heading);
    font-size: var(--cc-fs-display-sm);
    color: var(--cc-brand-text);
}

.cc-legal-document-meta {
    margin: 0 0 var(--cc-sp-8);
    padding-bottom: var(--cc-sp-5);
    border-bottom: 1px solid var(--cc-border-subtle);
    font-size: var(--cc-fs-sm);
    color: var(--cc-gray-500);
}

/* The meta already draws the divider under the title block — don't let a
   heading right below it draw a second line. */
.cc-legal-document-meta + .cc-legal-document-heading {
    padding-top: 0;
    border-top: none;
}

.cc-legal-document-heading {
    padding-top: var(--cc-sp-4);
    border-top: 1px solid var(--cc-border-subtle);
    font-family: var(--cc-font-heading);
    font-size: var(--cc-fs-2xl);
    color: var(--cc-black);
}

.cc-legal-document-subheading {
    margin: var(--cc-sp-8) 0 var(--cc-sp-4);
    font-family: var(--cc-font-medium);
    font-size: var(--cc-fs-lg);
    line-height: 1.4;
    color: var(--cc-black);
}

.cc-legal-document-heading + .cc-legal-document-subheading {
    margin-top: var(--cc-sp-5);
}

/* -- text variations -- */
.cc-legal-document-body p {
    margin: 0 0 var(--cc-sp-5);
}

.cc-legal-document-body ul,
.cc-legal-document-body ol {
    margin: 0 0 var(--cc-sp-5);
    padding-left: var(--cc-sp-8);
}

.cc-legal-document-body li + li {
    margin-top: var(--cc-sp-4);
}

.cc-legal-document-body li::marker {
    color: var(--cc-red);
}

.cc-legal-document-body strong {
    font-family: var(--cc-font-medium);
    font-weight: 400;
    color: var(--cc-black);
}

.cc-legal-document-body a {
    color: var(--cc-brand-text);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.cc-legal-document-body a:hover {
    color: var(--cc-red-hover);
}