/* ==========================================================================
   Mission Control Design System - Component Styles
   Version: 1.0.0
   Description: Reusable component styles for IntelliWiz Mission Control theme
   ========================================================================== */

/* ==========================================================================
   APP SHELL LAYOUT
   ========================================================================== */
.mc-app-shell {
    display: flex;
    min-height: 100vh;  /* Changed from height to min-height for natural page scroll */
    background-color: var(--mc-bg-page);
}

/* Viewport-contained mode for specific pages (wizards, helpbot) */
.mc-app-shell--contained {
    height: 100vh;
    overflow: hidden;
}

.mc-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: var(--mc-sidebar-width);
    transition: margin-left var(--mc-transition-base);
}

/* 3-Mode Main Content Margins */
.mc-main--sidebar-icon {
    margin-left: var(--mc-sidebar-collapsed-width);  /* 72px */
}

.mc-main--sidebar-compact {
    margin-left: 200px;
}

.mc-main--sidebar-full {
    margin-left: var(--mc-sidebar-width);  /* 260px */
}

.mc-content {
    flex: 1;
    padding: var(--mc-space-4) var(--mc-space-6);
    max-width: var(--mc-content-max-width);
    width: 100%;
    margin: 0 auto;
    min-height: 0;  /* Flex containment — prevents blowout on dashboard pages */
    overflow-y: auto;  /* Enable scrolling when content exceeds viewport (forms, long pages) */
}

/* Full-width modifier for dashboards - removes max-width constraint */
.mc-content--full-width {
    max-width: none;
    margin: 0;
}

.mc-content__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-top: var(--mc-space-2);
    overflow: visible;  /* Allow natural page scroll */
}

/* Explicit scrolling region when needed */
.mc-content__body--scrollable {
    overflow: auto;
}

/* ==========================================================================
   12-COLUMN GRID SYSTEM (Dec 2025)
   Explicit, frozen layout grid for predictable wiring
   ========================================================================== */
.mc-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--mc-space-5);
    width: 100%;
}

/* Column span utilities */
.mc-col-12 { grid-column: span 12; } /* Full width */
.mc-col-9  { grid-column: span 9; }  /* 3/4 width */
.mc-col-8  { grid-column: span 8; }  /* 2/3 width */
.mc-col-6  { grid-column: span 6; }  /* Half width */
.mc-col-4  { grid-column: span 4; }  /* Third width */
.mc-col-3  { grid-column: span 3; }  /* Quarter width */

/* Responsive breakpoints */
@media (max-width: 1279px) {
    .mc-col-4 { grid-column: span 6; }
    .mc-col-3 { grid-column: span 6; }
}

@media (max-width: 767px) {
    .mc-grid { gap: var(--mc-space-4); }
    .mc-col-12, .mc-col-9, .mc-col-8,
    .mc-col-6, .mc-col-4, .mc-col-3 { grid-column: span 12; }
}

/* Simple column-count grids (self-contained, do NOT require .mc-grid) */
.mc-grid--2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mc-space-4);
    align-items: start;
}

@media (min-width: 768px) {
    .mc-grid--2col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mc-grid--3col {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mc-space-4);
    align-items: start;
}

@media (min-width: 768px) {
    .mc-grid--3col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .mc-grid--3col {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
.mc-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--mc-sidebar-width);
    /* Phase 3: Structural instrument rail - matte/subdued vs "lit" workspace */
    background: linear-gradient(
        180deg,
        var(--mc-bg-secondary) 0%,
        rgba(235, 236, 240, 1) 100%  /* Slightly darker at bottom */
    );
    border-right: 1px solid var(--mc-border);
    display: flex;
    flex-direction: column;
    z-index: var(--mc-z-fixed);
    transition: width var(--mc-transition-base), transform var(--mc-transition-base);
    /* Phase 3: Inner shadow for "recessed" structural feel */
    box-shadow:
        inset -1px 0 0 var(--mc-border),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);  /* Top light edge */
}

/* Phase 3: Dark mode - deeper structural surface */
[data-theme="dark"] .mc-sidebar {
    background: linear-gradient(
        180deg,
        var(--mc-bg-tertiary) 0%,
        rgba(20, 25, 35, 1) 100%
    );
}

/* 3-Mode Density Toggle: icon (72px) | compact (200px) | full (260px) */
.mc-sidebar--icon {
    width: var(--mc-sidebar-collapsed-width);  /* 72px */
}

.mc-sidebar--compact {
    width: 200px;
}

.mc-sidebar--full {
    width: var(--mc-sidebar-width);  /* 260px */
}

/* Compact mode: denser padding, submenus still expandable */
.mc-sidebar--compact .mc-sidebar__link {
    padding: var(--mc-space-2) var(--mc-space-3);
}

.mc-sidebar--compact .mc-sidebar__group-toggle {
    padding: var(--mc-space-2) var(--mc-space-3);
}

/* Icon mode: hide text labels and section labels */
.mc-sidebar--icon .mc-sidebar__link-text,
.mc-sidebar--icon .mc-sidebar__section-label {
    display: none;
}

.mc-sidebar--icon .mc-sidebar__link {
    justify-content: center;
    padding: var(--mc-space-2);
}

.mc-sidebar--icon .mc-sidebar__group-toggle {
    display: none;
}

.mc-sidebar--hidden {
    transform: translateX(-100%);
}

.mc-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mc-space-4);
    /* Phase 2: Elevated header on instrument panel */
    background-color: var(--mc-bg-primary);
    border-bottom: 1px solid var(--mc-border);
    min-height: var(--mc-header-height);
}

.mc-sidebar__logo {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    text-decoration: none;
    color: var(--mc-text-primary);
}

.mc-sidebar__logo-img {
    width: 32px;
    height: 32px;
}

.mc-sidebar__logo-text {
    font-size: var(--mc-text-lg);
    font-weight: var(--mc-font-semibold);
}

.mc-sidebar__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--mc-text-secondary);
    border-radius: var(--mc-radius-md);
    cursor: pointer;
    transition: background-color var(--mc-transition-fast), color var(--mc-transition-fast);
}

.mc-sidebar__toggle:hover {
    background-color: var(--mc-bg-hover);
    color: var(--mc-text-primary);
}

.mc-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--mc-space-4) 0;
}

.mc-sidebar__section {
    margin-bottom: var(--mc-space-2);  /* Phase 3: More space BETWEEN groups */
}

/* Phase 2: Micro-gap between nav items for visual rhythm */
.mc-sidebar__menu > li + li {
    margin-top: 2px;
}

/* Phase 4: Visual layering for collapsible sections */
.mc-sidebar__section--collapsible {
    background: rgba(0, 0, 0, 0.02);  /* Very subtle surface lift */
    border-radius: var(--mc-radius-md);
    margin: var(--mc-space-1) var(--mc-space-2);
    padding: var(--mc-space-1) 0;
}

[data-theme="dark"] .mc-sidebar__section--collapsible {
    background: rgba(255, 255, 255, 0.02);
}

.mc-sidebar__section--primary {
    background: transparent;
}

.mc-sidebar__section--system {
    background: transparent;
    margin-top: auto;
    padding-top: var(--mc-space-2);
}

/* Legacy section title (for backwards compatibility) */
.mc-sidebar__section-title {
    display: block;
    padding: var(--mc-space-2) var(--mc-space-4);
    font-size: var(--mc-text-xs);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Phase 3: Section labels as zone dividers - they "interrupt" and "command" */
.mc-sidebar__section-label {
    display: block;
    padding: var(--mc-space-2) var(--mc-space-4);
    margin-top: var(--mc-space-6);           /* More breathing room before */
    margin-bottom: var(--mc-space-2);
    font-size: 9px;                          /* Smaller for subtlety */
    font-weight: var(--mc-font-bold);
    text-transform: uppercase;
    letter-spacing: 0.15em;                  /* Wider for authority */
    /* Cooler tone - blue-tinted gray */
    color: rgba(107, 119, 140, 0.8);
    border-bottom: none;                     /* Remove line, use space */
}

/* First section - tighter top */
.mc-sidebar__nav > .mc-sidebar__section-label:first-child,
.mc-sidebar__section:first-child .mc-sidebar__section-label {
    margin-top: var(--mc-space-3);
}

.mc-sidebar__section-label--muted {
    color: rgba(107, 119, 140, 0.6);
    opacity: 1;
}

.mc-sidebar__menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mc-sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    /* Phase 3: Tighter vertical padding for visual compression */
    padding: 6px var(--mc-space-4);
    line-height: 1.3;
    color: var(--mc-text-secondary);
    text-decoration: none;
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-medium);
    border-radius: var(--mc-radius-sm);
    margin: 0 var(--mc-space-2);
    transition: background-color var(--mc-transition-fast),
                color var(--mc-transition-fast),
                transform var(--mc-transition-fast);
}

/* Phase 2: Hover micro-interaction - lift effect on gray drawer */
.mc-sidebar__link:hover:not(.mc-sidebar__link--active) {
    background-color: var(--mc-bg-primary);  /* Elevated white on gray background */
    color: var(--mc-text-primary);
    transform: translateX(2px);
    box-shadow: var(--mc-shadow-xs);
}

/* Phase 3: Active state - "locked in" like cockpit instrument */
.mc-sidebar__link--active {
    background-color: var(--mc-primary-light);
    color: var(--mc-primary);
    font-weight: var(--mc-font-semibold);
    position: relative;
    /* Pronounced depth - inner + outer shadow for lift */
    box-shadow:
        inset 0 0 0 1px rgba(0, 102, 255, 0.2),
        inset 0 2px 4px rgba(0, 102, 255, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.05);  /* Outer shadow for lift */
}

/* Phase 3: Active items are anchored - no shift */
.mc-sidebar__link--active:hover {
    background-color: var(--mc-primary-light);
    transform: none;
    box-shadow:
        inset 0 0 0 1px rgba(0, 102, 255, 0.2),
        inset 0 2px 4px rgba(0, 102, 255, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Phase 3: Full-height accent bar (extreme left) - non-negotiable */
.mc-sidebar__link--active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;                              /* Full height */
    bottom: 0;                           /* Full height */
    width: 3px;                          /* Thinner but full height */
    background: var(--mc-primary);
    border-radius: 0;                    /* Sharp edge */
}

/* Phase 3: Icon system discipline - unified baseline */
.mc-sidebar__link .material-symbols-rounded,
.mc-sidebar__group-toggle .material-symbols-rounded {
    font-size: 20px;
    font-variation-settings: 'wght' 300, 'opsz' 24;  /* Lighter weight */
    opacity: 0.75;                           /* Subdued by default */
    transition: all var(--mc-transition-fast);
}

/* Hover - icons become more prominent */
.mc-sidebar__link:hover .material-symbols-rounded,
.mc-sidebar__group-toggle:hover .material-symbols-rounded {
    opacity: 1;
    font-variation-settings: 'wght' 400, 'opsz' 24;
}

/* Phase 3: Active icon - filled and weighted */
.mc-sidebar__link--active .material-symbols-rounded {
    opacity: 1;
    font-variation-settings: 'FILL' 1, 'wght' 600, 'opsz' 24;
    color: var(--mc-primary);
}

.mc-sidebar__footer {
    padding: var(--mc-space-4);
    border-top: 1px solid var(--mc-border);
}

.mc-sidebar__help-btn {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    width: 100%;
    padding: var(--mc-space-2) var(--mc-space-3);
    background-color: var(--mc-bg-secondary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    color: var(--mc-text-secondary);
    font-size: var(--mc-text-sm);
    cursor: pointer;
    transition: background-color var(--mc-transition-fast);
}

.mc-sidebar__help-btn:hover {
    background-color: var(--mc-bg-hover);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.mc-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--mc-space-6);
    height: var(--mc-header-height);
    background-color: var(--mc-bg-primary);
    border-bottom: 1px solid var(--mc-border);
    z-index: var(--mc-z-sticky);
}

.mc-header__left {
    display: flex;
    align-items: center;
    gap: var(--mc-space-4);
}

.mc-header__right {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
}

.mc-header__site-scope {
    max-width: 320px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mc-header__site-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .mc-header__site-scope {
        max-width: 44px;
        padding-left: var(--mc-space-2);
        padding-right: var(--mc-space-2);
    }

    .mc-header__site-text {
        display: none;
    }
}

.mc-header__menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--mc-text-secondary);
    border-radius: var(--mc-radius-md);
    cursor: pointer;
}

@media (max-width: 1023px) {
    .mc-header__menu-toggle {
        display: flex;
    }

    .mc-sidebar {
        transform: translateX(-100%);
    }

    .mc-sidebar:not(.mc-sidebar--hidden) {
        transform: translateX(0);
    }

    .mc-main {
        margin-left: 0;
    }
}

.mc-header__icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--mc-text-secondary);
    border-radius: var(--mc-radius-md);
    cursor: pointer;
    transition: all 150ms var(--mc-ease-premium);
}

.mc-header__icon-btn:hover {
    background-color: var(--mc-bg-hover);
    color: var(--mc-text-primary);
    transform: scale(1.05);
    box-shadow: var(--mc-shadow-sm);
}

.mc-header__icon-btn:active {
    transform: scale(0.98);
    box-shadow: none;
}

.mc-header__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background-color: var(--mc-danger);
    color: white;
    font-size: 11px;
    font-weight: var(--mc-font-semibold);
    border-radius: var(--mc-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: mc-badge-pulse 2s ease-in-out infinite;
}

/* Badge pulse animation for attention */
@keyframes mc-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(222, 53, 11, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(222, 53, 11, 0); }
}

/* Stop animation when no notifications */
.mc-header__badge:empty,
.mc-header__badge[data-count="0"] {
    animation: none;
    display: none;
}

.mc-header__search-btn {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    padding: var(--mc-space-2) var(--mc-space-3);
    background-color: var(--mc-bg-secondary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    color: var(--mc-text-secondary);
    font-size: var(--mc-text-sm);
    cursor: pointer;
    transition: border-color var(--mc-transition-fast);
}

.mc-header__search-btn:hover {
    border-color: var(--mc-border-strong);
}

.mc-header__search-hint {
    padding: 2px 6px;
    background-color: var(--mc-bg-tertiary);
    border-radius: var(--mc-radius-sm);
    font-size: 11px;
    font-weight: var(--mc-font-medium);
}

/* ==========================================================================
   USER MENU
   ========================================================================== */
.mc-header__user {
    position: relative;
}

.mc-header__user-btn {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    padding: var(--mc-space-1) var(--mc-space-2);
    background: transparent;
    border: none;
    border-radius: var(--mc-radius-md);
    cursor: pointer;
    transition: background-color var(--mc-transition-fast);
}

.mc-header__user-btn:hover {
    background-color: var(--mc-bg-hover);
}

.mc-header__user-name {
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-primary);
}

/* ==========================================================================
   AVATAR
   ========================================================================== */
.mc-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mc-primary-light);
    color: var(--mc-primary);
    border-radius: var(--mc-radius-full);
    font-weight: var(--mc-font-semibold);
}

.mc-avatar--sm {
    width: 32px;
    height: 32px;
    font-size: var(--mc-text-xs);
}

.mc-avatar--md {
    width: 40px;
    height: 40px;
    font-size: var(--mc-text-sm);
}

.mc-avatar--lg {
    width: 48px;
    height: 48px;
    font-size: var(--mc-text-base);
}

.mc-avatar__initials {
    text-transform: uppercase;
}

/* ==========================================================================
   DROPDOWN
   ========================================================================== */
.mc-dropdown-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.mc-dropdown {
    position: absolute;
    top: 100%;
    margin-top: var(--mc-space-2);
    min-width: 200px;
    background-color: var(--mc-bg-primary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    box-shadow: var(--mc-shadow-dropdown);
    z-index: var(--mc-z-dropdown);
    overflow: hidden;
}

.mc-dropdown--right {
    right: 0;
}

.mc-dropdown--left {
    left: 0;
}

.mc-dropdown__header {
    padding: var(--mc-space-3) var(--mc-space-4);
    border-bottom: 1px solid var(--mc-border);
}

.mc-dropdown__title {
    display: block;
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-primary);
}

.mc-dropdown__subtitle {
    display: block;
    font-size: var(--mc-text-xs);
    color: var(--mc-text-secondary);
    margin-top: 2px;
}

.mc-dropdown__divider {
    height: 1px;
    background-color: var(--mc-border);
    margin: var(--mc-space-1) 0;
}

.mc-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    width: 100%;
    padding: var(--mc-space-2) var(--mc-space-4);
    background: transparent;
    border: none;
    color: var(--mc-text-primary);
    font-size: var(--mc-text-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--mc-transition-fast);
}

.mc-dropdown__item:hover {
    background-color: var(--mc-bg-hover);
}

.mc-dropdown__item--danger {
    color: var(--mc-danger);
}

.mc-dropdown__item--danger:hover {
    background-color: var(--mc-danger-light);
}

.mc-dropdown__item .material-symbols-rounded {
    font-size: 18px;
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.mc-breadcrumbs__list {
    display: flex;
    align-items: center;
    gap: var(--mc-space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.mc-breadcrumbs__list li {
    display: flex;
    align-items: center;
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
}

.mc-breadcrumbs__list li:not(:last-child)::after {
    content: '/';
    margin-left: var(--mc-space-1);
    color: var(--mc-text-tertiary);
}

.mc-breadcrumbs__list a {
    color: var(--mc-text-secondary);
    text-decoration: none;
    transition: color var(--mc-transition-fast);
}

.mc-breadcrumbs__list a:hover {
    color: var(--mc-primary);
}

.mc-breadcrumbs__list li[aria-current="page"] {
    color: var(--mc-text-primary);
    font-weight: var(--mc-font-medium);
}

/* ==========================================================================
   PAGE HEADER
   ========================================================================== */
.mc-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mc-space-4);
    position: relative;
    z-index: 1;
}

/* Wizard-specific page header - prevent subtitle from expanding layout */
.mc-content:has(.mc-site-wizard) .mc-page-header {
    max-width: 100%;
    overflow: hidden;
}

.mc-content:has(.mc-site-wizard) .mc-page-header__subtitle {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}

.mc-page-header__title {
    font-size: var(--mc-text-2xl);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-primary);
    margin: 0;
}

.mc-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    flex-shrink: 0;
}

/* ==========================================================================
   COMMAND BAR - Unified dashboard header component
   Combines title, filters, and actions into a single cohesive bar
   ========================================================================== */
.mc-command-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--mc-space-6);
    padding: var(--mc-space-4) 0;
    border-bottom: 1px solid var(--mc-border);
    margin-bottom: var(--mc-space-6);
}

.mc-command-bar--compact {
    padding: var(--mc-space-3) 0;
    margin-bottom: var(--mc-space-4);
    align-items: center;
}

/* Left section: breadcrumbs, title, subtitle */
.mc-command-bar__left {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-1);
    min-width: 0;
    flex-shrink: 1;
}

.mc-command-bar__center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 240px;
}

.mc-command-summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mc-space-2);
    text-align: center;
    font-size: var(--mc-text-sm);
    font-weight: 400;
    color: var(--mc-text-tertiary);
    line-height: 1.2;
    white-space: nowrap;
}

.mc-command-summary__link {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-2);
    color: var(--mc-text-tertiary);
    text-decoration: none;
    transition: color var(--mc-transition-fast);
}

.mc-command-summary__link:hover {
    color: var(--mc-text-primary);
}

.mc-command-summary__link .material-symbols-rounded {
    font-size: 18px;
}

.mc-command-summary__label {
    color: var(--mc-text-tertiary);
    font-weight: 400;
}

.mc-command-summary__value {
    color: var(--mc-text-primary);
    font-weight: var(--mc-font-medium);
}

.mc-command-summary__sep {
    color: var(--mc-text-tertiary);
}

.mc-command-bar__title {
    font-size: var(--mc-text-2xl);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-primary);
    margin: 0;
    line-height: 1.2;
}

.mc-command-bar--compact .mc-command-bar__title {
    font-size: var(--mc-text-xl);
}

.mc-command-bar__subtitle {
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
    margin: 0;
    line-height: 1.4;
}

.mc-command-bar__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: var(--mc-space-2);
    color: var(--mc-text-secondary);
    text-decoration: none;
    border-radius: var(--mc-radius-md);
    transition: background-color var(--mc-transition-fast), color var(--mc-transition-fast);
}

.mc-command-bar__back:hover {
    background-color: var(--mc-bg-secondary);
    color: var(--mc-text-primary);
}

/* Right section: controls grouped horizontally */
.mc-command-bar__right {
    display: flex;
    align-items: center;
    gap: var(--mc-space-4);
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Meta info: last updated + refresh button */
.mc-command-bar__meta {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
}

.mc-command-bar__timestamp {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-tertiary);
    white-space: nowrap;
}

/* Breadcrumb styling — nav-based pattern (mc-breadcrumbs) */
.mc-breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--mc-space-1);
    font-size: var(--mc-text-sm);
    margin-bottom: var(--mc-space-1);
}

.mc-breadcrumbs__link {
    color: var(--mc-text-secondary);
    text-decoration: none;
    transition: color var(--mc-transition-fast);
}

.mc-breadcrumbs__link:hover {
    color: var(--mc-primary);
}

.mc-breadcrumbs__sep {
    color: var(--mc-text-tertiary);
    margin: 0 var(--mc-space-1);
}

.mc-breadcrumbs__current {
    color: var(--mc-text-primary);
    font-weight: var(--mc-font-medium);
}

/* Breadcrumb styling — legacy singular pattern (mc-breadcrumb) */
.mc-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--mc-space-1);
    font-size: var(--mc-text-sm);
    margin-bottom: var(--mc-space-1);
}

.mc-breadcrumb__link {
    color: var(--mc-text-secondary);
    text-decoration: none;
    transition: color var(--mc-transition-fast);
}

.mc-breadcrumb__link:hover {
    color: var(--mc-primary);
}

.mc-breadcrumb__sep {
    color: var(--mc-text-tertiary);
    margin: 0 var(--mc-space-1);
}

.mc-breadcrumb__current {
    color: var(--mc-text-primary);
    font-weight: var(--mc-font-medium);
}

/* Breadcrumb aliases for templates using __item/__separator naming */
.mc-breadcrumb__item {
    color: var(--mc-text-secondary);
    text-decoration: none;
    transition: color var(--mc-transition-fast);
}

.mc-breadcrumb__item:hover {
    color: var(--mc-primary);
}

.mc-breadcrumb__item--current {
    color: var(--mc-text-primary);
    font-weight: var(--mc-font-medium);
    pointer-events: none;
}

.mc-breadcrumb__separator {
    color: var(--mc-text-tertiary);
    margin: 0 var(--mc-space-1);
}

/* Date range filter - segmented control style */
.mc-command-bar__filter {
    display: flex;
    align-items: center;
    background-color: var(--mc-bg-secondary);
    border-radius: var(--mc-radius-md);
    padding: 2px;
    gap: 2px;
}

.mc-command-bar__filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--mc-space-1) var(--mc-space-3);
    font-family: inherit;
    font-size: var(--mc-text-xs);
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-secondary);
    background: transparent;
    border: none;
    border-radius: calc(var(--mc-radius-md) - 2px);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--mc-transition-fast),
                color var(--mc-transition-fast),
                box-shadow var(--mc-transition-fast);
}

.mc-command-bar__filter-btn:hover {
    color: var(--mc-text-primary);
}

.mc-command-bar__filter-btn--active {
    background-color: var(--mc-bg-primary);
    color: var(--mc-text-primary);
    box-shadow: var(--mc-shadow-sm);
}

/* Date range filter - dropdown variant */
.mc-command-bar__filter--dropdown {
    background: transparent;
    padding: 0;
    gap: var(--mc-space-2);
    align-items: center;
}

.mc-command-bar__filter-label {
    font-size: var(--mc-text-xs);
    font-weight: var(--mc-font-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mc-text-tertiary);
    white-space: nowrap;
}

/* Action buttons group */
.mc-command-bar__actions {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
}

/* Responsive: stack on smaller screens */
@media (max-width: 768px) {
    .mc-command-bar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--mc-space-4);
    }

    .mc-command-bar__center {
        justify-content: flex-start;
        min-width: 0;
    }

    .mc-command-summary {
        white-space: normal;
        justify-content: flex-start;
        text-align: left;
    }

    .mc-command-bar__right {
        justify-content: space-between;
    }

    .mc-command-bar__filter {
        order: -1;
        width: 100%;
    }

    .mc-command-bar__filter-btn {
        flex: 1;
    }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mc-btn-gap);
    padding: var(--mc-btn-padding-y) var(--mc-btn-padding-x);
    font-family: inherit;
    font-size: var(--mc-btn-font-size);
    font-weight: var(--mc-btn-font-weight);
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--mc-btn-radius);
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 150ms ease;
    -webkit-font-smoothing: antialiased;
}

.mc-btn .material-symbols-rounded {
    font-size: var(--mc-btn-icon-size);
    line-height: 1;
    font-variation-settings: 'wght' 400, 'opsz' 20;
    flex-shrink: 0;
}

.mc-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mc-btn[aria-busy="true"],
.mc-btn.mc-btn--loading {
    cursor: wait;
}

.mc-btn.mc-btn--loading {
    position: relative;
    pointer-events: none;
    opacity: 0.85;
}

.mc-btn.mc-btn--loading::after {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: inline-block;
    animation: mc-spin 0.8s linear infinite;
}

.mc-btn--secondary.mc-btn--loading::after,
.mc-btn--ghost.mc-btn--loading::after {
    border-color: rgba(0, 0, 0, 0.18);
    border-top-color: rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .mc-btn--secondary.mc-btn--loading::after,
[data-theme="dark"] .mc-btn--ghost.mc-btn--loading::after {
    border-color: rgba(255, 255, 255, 0.18);
    border-top-color: rgba(255, 255, 255, 0.55);
}

.mc-btn--primary {
    background-color: var(--mc-primary);
    border-color: var(--mc-primary);
    color: white;
}

.mc-btn--primary:hover:not(:disabled) {
    background-color: var(--mc-primary-hover);
    border-color: var(--mc-primary-hover);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.mc-btn--primary:active:not(:disabled) {
    background-color: var(--mc-primary-active);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
}

.mc-btn--primary:focus-visible {
    box-shadow: 0 0 0 2px var(--mc-bg-primary, #fff), 0 0 0 4px var(--mc-primary);
}

.mc-btn--secondary {
    background-color: var(--mc-bg-surface, #fff);
    border-color: var(--mc-border);
    color: var(--mc-text-primary);
}

.mc-btn--secondary:hover:not(:disabled) {
    background-color: var(--mc-bg-hover);
    border-color: var(--mc-border-strong);
}

.mc-btn--secondary:active:not(:disabled) {
    background-color: var(--mc-bg-tertiary, #f3f4f6);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.mc-btn--secondary:focus-visible {
    box-shadow: 0 0 0 2px var(--mc-bg-primary, #fff), 0 0 0 4px var(--mc-primary);
}

/* Legacy button aliases (older templates) */
.mc-btn-primary {
    background-color: var(--mc-primary);
    border-color: var(--mc-primary);
    color: white;
}

.mc-btn-primary:hover:not(:disabled) {
    background-color: var(--mc-primary-hover);
    border-color: var(--mc-primary-hover);
}

.mc-btn-secondary {
    background-color: transparent;
    border-color: var(--mc-border);
    color: var(--mc-text-primary);
}

.mc-btn-secondary:hover:not(:disabled) {
    background-color: var(--mc-bg-hover);
    border-color: var(--mc-border-strong);
}

.mc-btn--ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--mc-text-secondary);
}

.mc-btn--ghost:hover:not(:disabled) {
    background-color: var(--mc-bg-hover);
    color: var(--mc-text-primary);
}

.mc-btn--danger {
    background-color: var(--mc-danger);
    border-color: var(--mc-danger);
    color: white;
}

.mc-btn--danger:hover:not(:disabled) {
    background-color: var(--mc-danger-hover);
    border-color: var(--mc-danger-hover);
}

.mc-btn--sm {
    padding: var(--mc-btn-padding-y-sm) var(--mc-btn-padding-x-sm);
    font-size: 12px;
    gap: 4px;
}

.mc-btn--sm .material-symbols-rounded {
    font-size: var(--mc-btn-icon-size-sm);
}

.mc-btn--lg {
    padding: var(--mc-btn-padding-y-lg) var(--mc-btn-padding-x-lg);
    font-size: 14px;
    gap: 8px;
}

.mc-btn--lg .material-symbols-rounded {
    font-size: var(--mc-btn-icon-size-lg);
}

.mc-btn--icon {
    padding: var(--mc-btn-padding-y);
    aspect-ratio: 1;
}

.mc-btn--icon.mc-btn--sm {
    padding: var(--mc-btn-padding-y-sm);
}

.mc-btn--icon.mc-btn--lg {
    padding: var(--mc-btn-padding-y-lg);
}

/* ==========================================================================
   FORM INPUTS
   ========================================================================== */
.mc-input,
.mc-textarea {
    display: block;
    width: 100%;
    padding: var(--mc-space-2) var(--mc-space-3);
    font-family: inherit;
    font-size: var(--mc-text-sm);
    line-height: 1.5;
    color: var(--mc-text-primary);
    background-color: var(--mc-bg-primary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    transition: border-color var(--mc-transition-fast), box-shadow var(--mc-transition-fast);
}

.mc-input:hover,
.mc-textarea:hover {
    border-color: var(--mc-border-strong);
}

.mc-input:focus,
.mc-textarea:focus {
    outline: none;
    border-color: var(--mc-border-focus);
    box-shadow: 0 0 0 3px rgba(76, 154, 255, 0.2);
}

.mc-input::placeholder,
.mc-textarea::placeholder {
    color: var(--mc-text-tertiary);
}

.mc-input:disabled,
.mc-textarea:disabled {
    background-color: var(--mc-bg-secondary);
    color: var(--mc-text-disabled);
    cursor: not-allowed;
}

.mc-input--error {
    border-color: var(--mc-danger);
}

.mc-input--error:focus {
    box-shadow: 0 0 0 3px rgba(222, 53, 11, 0.2);
}

.mc-input--sm {
    padding: var(--mc-space-1) var(--mc-space-3);
    font-size: var(--mc-text-xs);
}

.mc-input--lg {
    padding: var(--mc-space-3) var(--mc-space-4);
    font-size: var(--mc-text-base);
}

/* Textarea */
.mc-textarea {
    min-height: 100px;
    resize: vertical;
}

/* ==========================================================================
   WIZARDS (Client/Site/People)
   ========================================================================== */
.mc-wizard-fallback {
    margin-bottom: var(--mc-space-4);
}

.mc-wizard--ready .mc-wizard-fallback {
    display: none;
}

.mc-wizard-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--mc-space-6);
    padding: var(--mc-space-4);
    background: var(--mc-bg-secondary);
    border-radius: var(--mc-radius-lg);
}

.mc-wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mc-space-2);
}

.mc-wizard-step__number {
    width: 40px;
    height: 40px;
    border-radius: var(--mc-radius-full);
    background: var(--mc-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-secondary);
    transition: all var(--mc-transition-base);
}

.mc-wizard-step--active .mc-wizard-step__number {
    background: var(--mc-primary);
    color: white;
}

.mc-wizard-step--completed .mc-wizard-step__number {
    background: var(--mc-success);
    color: white;
}

.mc-wizard-step__label {
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
}

.mc-wizard-step--active .mc-wizard-step__label {
    color: var(--mc-text-primary);
    font-weight: var(--mc-font-medium);
}

.mc-wizard-step__line {
    width: 80px;
    height: 2px;
    background: var(--mc-border);
    margin: 0 var(--mc-space-2);
}

.mc-wizard-step__line--active {
    background: var(--mc-success);
}

/* Wizard entry accordions (sites/contacts) */
.mc-entry-toggle {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mc-space-3);
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
    min-width: 0;
}

.mc-entry-toggle__meta {
    flex: 1;
    min-width: 0;
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-entry-toggle__chevron {
    font-size: 20px;
    color: var(--mc-text-tertiary);
    flex-shrink: 0;
}

.mc-site-entry__body,
.mc-contact-entry__body {
    margin-top: var(--mc-space-3);
}

@media (max-width: 1024px) {
    .mc-wizard-progress {
        flex-wrap: wrap;
        gap: var(--mc-space-2);
    }

    .mc-wizard-step__line {
        display: none;
    }
}

/* ==========================================================================
   MC-WIZARD — Reusable design system wizard component
   ========================================================================== */
.mc-wizard {
    background: var(--mc-bg-primary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-xl);
    padding: var(--mc-space-6);
}

/* Step indicator (horizontal stepper) */
.mc-wizard__steps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--mc-space-5);
}

.mc-wizard__step-indicator {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--mc-space-2) var(--mc-space-3);
    border-radius: var(--mc-radius-md);
    transition: background-color var(--mc-transition-fast);
    color: var(--mc-text-tertiary);
    font-size: var(--mc-text-sm);
}

.mc-wizard__step-indicator:hover:not(:disabled) {
    background: var(--mc-bg-hover);
}

.mc-wizard__step-indicator:disabled {
    cursor: default;
}

.mc-wizard__step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--mc-radius-full);
    background: var(--mc-bg-tertiary);
    font-weight: var(--mc-font-semibold);
    font-size: var(--mc-text-sm);
    transition: all var(--mc-transition-base);
}

.mc-wizard__step-indicator--active .mc-wizard__step-number {
    background: var(--mc-primary);
    color: white;
}

.mc-wizard__step-indicator--completed .mc-wizard__step-number {
    background: var(--mc-success);
    color: white;
}

.mc-wizard__step-title {
    font-weight: var(--mc-font-medium);
}

.mc-wizard__step-indicator--active .mc-wizard__step-title {
    color: var(--mc-text-primary);
}

.mc-wizard__step-connector {
    width: 48px;
    height: 2px;
    background: var(--mc-border);
    margin: 0 var(--mc-space-1);
    transition: background-color var(--mc-transition-base);
}

.mc-wizard__step-connector--completed {
    background: var(--mc-success);
}

/* Progress bar */
.mc-wizard__progress {
    height: 3px;
    background: var(--mc-bg-tertiary);
    border-radius: var(--mc-radius-full);
    margin-bottom: var(--mc-space-6);
    overflow: hidden;
}

.mc-wizard__progress-bar {
    height: 100%;
    background: var(--mc-primary);
    border-radius: var(--mc-radius-full);
    transition: width 300ms var(--mc-ease-premium);
}

/* Step content transitions */
.mc-wizard__step-content {
    min-height: 200px;
}

.mc-wizard__step-enter {
    transition: opacity 200ms ease, transform 200ms ease;
}

.mc-wizard__step-enter-start {
    opacity: 0;
    transform: translateX(16px);
}

.mc-wizard__step-enter-end {
    opacity: 1;
    transform: translateX(0);
}

/* Navigation actions */
.mc-wizard__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--mc-space-6);
    padding-top: var(--mc-space-5);
    border-top: 1px solid var(--mc-border);
}

.mc-wizard__actions-right {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
}

/* Responsive: stack steps vertically on mobile */
@media (max-width: 639px) {
    .mc-wizard__steps {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--mc-space-2);
    }

    .mc-wizard__step-connector {
        width: 2px;
        height: 16px;
        margin: 0 0 0 15px;
    }

    .mc-wizard__actions {
        flex-direction: column;
        gap: var(--mc-space-3);
    }

    .mc-wizard__actions-right {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Select - Inherits base input styles with dropdown arrow */
.mc-select {
    display: block;
    width: 100%;
    padding: var(--mc-space-2) var(--mc-space-3);
    padding-right: var(--mc-space-8);
    font-family: inherit;
    font-size: var(--mc-text-sm);
    line-height: 1.5;
    color: var(--mc-text-primary);
    background-color: var(--mc-bg-primary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    transition: border-color var(--mc-transition-fast), box-shadow var(--mc-transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B778C' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--mc-space-3) center;
    cursor: pointer;
}

.mc-select:hover {
    border-color: var(--mc-border-strong);
}

.mc-select:focus {
    outline: none;
    border-color: var(--mc-border-focus);
    box-shadow: 0 0 0 3px rgba(76, 154, 255, 0.2);
}

.mc-select:disabled {
    background-color: var(--mc-bg-secondary);
    color: var(--mc-text-disabled);
    cursor: not-allowed;
}

/* Select dropdown options - Dark theme styling */
.mc-select option {
    background-color: var(--mc-bg-primary);
    color: var(--mc-text-primary);
    padding: var(--mc-space-2);
}

.mc-select--error {
    border-color: var(--mc-danger);
}

.mc-select--error:focus {
    box-shadow: 0 0 0 3px rgba(222, 53, 11, 0.2);
}

.mc-select--sm {
    padding: var(--mc-space-1) var(--mc-space-3);
    padding-right: var(--mc-space-6);
    font-size: var(--mc-text-xs);
}

.mc-select--lg {
    padding: var(--mc-space-3) var(--mc-space-4);
    padding-right: var(--mc-space-8);
    font-size: var(--mc-text-base);
}

/* Card variants */
.mc-card--highlight {
    border-color: var(--mc-primary);
    box-shadow: 0 0 0 3px rgba(76, 154, 255, 0.12);
}

/* Form Group */
.mc-form-group {
    margin-bottom: var(--mc-space-4);
}

.mc-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mc-space-4);
}

.mc-form-grid--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mc-form-grid--3col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mc-form-grid--4col {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 992px) {
    .mc-form-grid--4col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .mc-form-grid,
    .mc-form-grid--2col,
    .mc-form-grid--3col,
    .mc-form-grid--4col {
        grid-template-columns: 1fr;
    }
}

.mc-label {
    display: block;
    margin-bottom: var(--mc-space-1);
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-primary);
}

.mc-label--required::after {
    content: ' *';
    color: var(--mc-danger);
}

/* Backward-compatible alias: mc-form-label -> mc-label (deprecated, use mc-label) */
.mc-form-label {
    display: block;
    margin-bottom: var(--mc-space-1);
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-primary);
}

.mc-form-label--required::after {
    content: ' *';
    color: var(--mc-danger);
}

.mc-help-text {
    margin-top: var(--mc-space-1);
    font-size: var(--mc-text-xs);
    color: var(--mc-text-secondary);
}

.mc-form-hint {
    margin-top: var(--mc-space-1);
    font-size: var(--mc-text-xs);
    color: var(--mc-text-secondary);
}

.mc-error-text {
    margin-top: var(--mc-space-1);
    font-size: var(--mc-text-xs);
    color: var(--mc-danger);
}

/* Form Rows */
.mc-form-row {
    display: grid;
    gap: var(--mc-space-4);
}

.mc-form-row--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
    .mc-form-row--2col {
        grid-template-columns: 1fr;
    }
}

/* Form group layout fixes for 2-column forms */
.mc-form-row--2col .mc-form-group {
    min-width: 0; /* Allow flex item to shrink - prevents overflow */
}

/* Label fixes - prevent truncation in 2-column layouts */
.mc-form-row--2col .mc-label {
    white-space: nowrap;
    overflow: visible; /* Allow label to show fully */
}

/* Form hint and error positioning - ensure they appear below inputs */
.mc-form-group {
    position: relative;
}

.mc-form-group .mc-form-hint,
.mc-form-group .mc-error-text {
    display: block;
    clear: both;
}

/* ==========================================================================
   FORM VIEW LAYOUT (CSP/HTMX-safe)
   These must be global because hx-boost navigation does not update <head>.
   ========================================================================== */
.mc-form-view {
    max-width: 800px;
}

.mc-form-view--wide {
    max-width: 1200px;
}

.mc-form-view--fluid {
    max-width: none;
}

.mc-form-view .mc-card__body {
    padding: var(--mc-space-6);
}

.mc-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mc-space-3);
}

/* Required indicator styling */
.mc-required {
    color: var(--mc-danger);
    font-weight: var(--mc-font-medium);
}

/* Info Panel */
.mc-info-panel {
    display: flex;
    align-items: flex-start;
    gap: var(--mc-space-3);
    padding: var(--mc-space-4);
    background: var(--mc-info-alpha-5);
    border: 1px solid var(--mc-info-alpha-15);
    border-radius: var(--mc-radius-md);
    color: var(--mc-text-primary);
    font-size: var(--mc-text-sm);
}

.mc-info-panel .material-symbols-rounded {
    flex-shrink: 0;
    color: var(--mc-info);
}

/* ==========================================================================
   BADGES
   ========================================================================== */
.mc-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: var(--mc-text-xs);
    font-weight: var(--mc-font-medium);
    line-height: 1.5;
    border-radius: var(--mc-radius-full);
}

.mc-badge--neutral {
    background-color: var(--mc-bg-tertiary);
    color: var(--mc-text-secondary);
}

.mc-badge--primary {
    background-color: var(--mc-primary-light);
    color: var(--mc-primary);
}

.mc-badge--success {
    background-color: var(--mc-success-light);
    color: var(--mc-success);
}

.mc-badge--warning {
    background-color: var(--mc-warning-light);
    color: var(--mc-warning);
}

.mc-badge--danger {
    background-color: var(--mc-danger-light);
    color: var(--mc-danger);
}

.mc-badge--info {
    background-color: var(--mc-info-light);
    color: var(--mc-blue-700);  /* WCAG AA: 5.65:1 contrast on info-light (#0052CC on #DEEBFF) */
}

/* Badge size variants */
.mc-badge--small {
    padding: 1px 6px;
    font-size: 10px;
    line-height: 1.4;
}

/* Badge icon styling - extracted from inline styles */
.mc-badge__icon {
    font-size: 14px;
    line-height: 1;
}

.mc-badge__icon--sm {
    font-size: 12px;
    margin-right: 2px;
}

/* Sample/Placeholder data indicator - subtle but visible */
.mc-badge--sample {
    background-color: var(--mc-bg-tertiary);
    color: var(--mc-text-tertiary);
    border: 1px dashed var(--mc-border);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
}

[data-theme="dark"] .mc-badge--sample {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

/* LIVE badge - intentional green with pulse */
.mc-badge--live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--mc-success-light, rgba(0, 135, 90, 0.1));
    color: var(--mc-success);
    font-size: 10px;
    font-weight: var(--mc-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: var(--mc-radius-full);
}

.mc-badge__pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mc-success);
    animation: mc-pulse-live 2s ease-in-out infinite;
}

@keyframes mc-pulse-live {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

/* DEMO badge - neutral but intentional */
.mc-badge--demo {
    background-color: var(--mc-bg-tertiary);
    color: var(--mc-text-secondary);
    font-size: 10px;
    font-weight: var(--mc-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: var(--mc-radius-full);
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.mc-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--mc-space-3);
    padding: var(--mc-space-3) var(--mc-space-4);
    border-radius: var(--mc-radius-md);
    font-size: var(--mc-text-sm);
}

.mc-alert .material-symbols-rounded {
    flex-shrink: 0;
    font-size: 20px;
}

.mc-alert__close {
    margin-left: auto;
    padding: 0;
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity var(--mc-transition-fast);
}

.mc-alert__close:hover {
    opacity: 1;
}

.mc-alert-info {
    background-color: var(--mc-info-light);
    color: var(--mc-info);
}

.mc-alert-success {
    background-color: var(--mc-success-light);
    color: var(--mc-success);
}

.mc-alert-warning {
    background-color: var(--mc-warning-light);
    color: var(--mc-warning);
}

.mc-alert-danger,
.mc-alert-error {
    background-color: var(--mc-danger-light);
    color: var(--mc-danger);
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.mc-card {
    background-color: var(--mc-bg-primary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    box-shadow: var(--mc-shadow-card);
    transition: box-shadow 200ms ease, transform 200ms ease;
}

.mc-card:hover {
    box-shadow: var(--mc-shadow-card-hover);
}

/* Interactive cards — hover lift + press compression */
a.mc-card:hover,
.mc-card--interactive:hover {
    transform: translateY(-1px);
    box-shadow: var(--mc-shadow-card-hover);
    transition: all 200ms var(--mc-ease-premium);
}

a.mc-card:active,
.mc-card--interactive:active {
    transform: scale(0.99);
    box-shadow: var(--mc-shadow-xs);
    transition: transform 100ms var(--mc-ease-premium);
}

/* ==========================================================================
   STANDARDIZED CARD HEADER (Dec 2025)
   One pattern for all cards:
   [ Icon ] [ Title ]                    [ filters | actions ]
           [ Subtitle / context ]
   ========================================================================== */
.mc-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--mc-space-4);
    padding: var(--mc-space-4) var(--mc-space-5);
    border-bottom: 1px solid var(--mc-border);
}

.mc-card__header-left {
    display: flex;
    align-items: flex-start;
    gap: var(--mc-space-3);
    flex: 1;
    min-width: 0;
}

.mc-card__header-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mc-radius-md);
    background: var(--mc-primary-light);
    color: var(--mc-primary);
    flex-shrink: 0;
}

.mc-card__header-icon .material-symbols-rounded {
    font-size: 20px;
}

.mc-card__header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mc-card__title {
    font-size: var(--mc-text-base);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-primary);
    margin: 0;
    line-height: 1.3;
}

.mc-card__subtitle {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-secondary);
    margin: 0;
    line-height: 1.4;
}

.mc-card__header-actions {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    flex-shrink: 0;
}

.mc-card__body {
    padding: var(--mc-space-5);
}

.mc-card__footer {
    padding: var(--mc-space-4) var(--mc-space-5);
    border-top: 1px solid var(--mc-border);
    background-color: var(--mc-bg-secondary);
    border-radius: 0 0 var(--mc-radius-lg) var(--mc-radius-lg);
}

/* ==========================================================================
   KPI CARDS - Premium Design
   ========================================================================== */
.mc-kpi-card {
    background: var(--mc-bg-primary);
    background-image: var(--mc-gradient-subtle);
    border: 1px solid var(--mc-border);
    border-left: 4px solid var(--mc-primary);
    border-radius: var(--mc-radius-lg);
    padding: var(--mc-space-5);
    box-shadow: var(--mc-shadow-premium);
    transition: all 250ms var(--mc-ease-premium);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.mc-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(6, 102, 255, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

.mc-kpi-card:hover {
    box-shadow: var(--mc-shadow-premium-hover);
    transform: translateY(-4px);
    border-left-color: var(--mc-primary-hover);
}

.mc-kpi-card:active {
    transform: translateY(-2px);
    box-shadow: var(--mc-shadow-premium-active);
}

/* Remove underlines from KPI cards when used as links */
a.mc-kpi-card,
a.mc-kpi-card *,
.mc-kpi-card a,
.mc-kpi-card a * {
    text-decoration: none !important;
}

/* Variant-specific left borders */
.mc-kpi-card--success { border-left-color: var(--mc-success); }
.mc-kpi-card--warning { border-left-color: var(--mc-warning); }
.mc-kpi-card--danger { border-left-color: var(--mc-danger); }
.mc-kpi-card--info { border-left-color: var(--mc-info); }

/* ==========================================================================
   Hero Variant - Primary KPIs (larger, more prominent)
   ========================================================================== */
.mc-kpi-card--hero {
    padding: var(--mc-space-6);
    border-left-width: 5px;
    background: linear-gradient(135deg, var(--mc-bg-primary) 0%, var(--mc-bg-secondary) 100%);
    animation: hero-presence 3s ease-in-out infinite;  /* Subtle pulse for attention */
}

.mc-kpi-card--hero .mc-kpi-card__icon {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
}

.mc-kpi-card--hero .mc-kpi-card__value {
    font-size: var(--mc-text-5xl);
}

.mc-kpi-card--hero .mc-kpi-card__label {
    font-size: var(--mc-text-sm);
}

/* Hero variant with danger state - red pulse for critical attention */
.mc-kpi-card--hero[data-variant="danger"] {
    animation: hero-danger-presence 3s ease-in-out infinite;
}

/* Hero presence animations - Subtle pulse for attention direction */
@keyframes hero-presence {
    0%, 100% {
        box-shadow: var(--mc-shadow-premium);
    }
    50% {
        box-shadow: var(--mc-shadow-premium),
                    0 0 0 3px rgba(6, 182, 212, 0.1);  /* Cyan glow */
    }
}

@keyframes hero-danger-presence {
    0%, 100% {
        box-shadow: var(--mc-shadow-premium);
    }
    50% {
        box-shadow: var(--mc-shadow-premium),
                    0 0 0 3px rgba(239, 68, 68, 0.12);  /* Red glow */
    }
}

/* Secondary Variant - Subdued for monitoring metrics */
.mc-kpi-card--secondary {
    border-left-width: 3px;
    border-left-color: var(--mc-border);
    box-shadow: var(--mc-shadow-sm);
}

.mc-kpi-card--secondary .mc-kpi-card__icon {
    background-color: var(--mc-bg-tertiary);
    color: var(--mc-text-secondary);
}

.mc-kpi-card--secondary:hover {
    transform: translateY(-2px);
}

/* ==========================================================================
   State-Based Styling (operational health indicators)
   ========================================================================== */
.mc-kpi-card--state-stable {
    border-left-color: var(--mc-success);
}

.mc-kpi-card--state-stable .mc-kpi-card__icon {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--mc-success);
}

.mc-kpi-card--state-warning {
    border-left-color: var(--mc-warning);
}

.mc-kpi-card--state-warning .mc-kpi-card__icon {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--mc-warning);
}

.mc-kpi-card--state-critical {
    border-left-color: var(--mc-danger);
    animation: mc-pulse-attention 2s ease-in-out infinite;
}

.mc-kpi-card--state-critical .mc-kpi-card__icon {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--mc-danger);
}

.mc-kpi-card--state-neutral {
    border-left-color: var(--mc-primary);
}

.mc-kpi-card--state-neutral .mc-kpi-card__icon {
    background-color: rgba(0, 101, 255, 0.1);
    color: var(--mc-primary);
}

@keyframes mc-pulse-attention {
    0%, 100% { box-shadow: var(--mc-shadow-premium); }
    50% { box-shadow: var(--mc-shadow-premium), 0 0 0 4px rgba(239, 68, 68, 0.15); }
}

/* Clickable KPI Cards */
.mc-kpi-card--clickable {
    text-decoration: none;
    position: relative;
    cursor: pointer;
    transition: transform 200ms var(--mc-ease-premium),
                box-shadow 200ms var(--mc-ease-premium);
}

.mc-kpi-card--clickable:hover {
    transform: translateY(-1px);
    box-shadow: var(--mc-shadow-card-hover);
    transition: all 200ms var(--mc-ease-premium);
}

.mc-kpi-card--clickable:active {
    transform: scale(0.99);
    box-shadow: var(--mc-shadow-xs);
    transition: transform 100ms var(--mc-ease-premium);
}

/* Remove underlines from clickable cards */
.mc-kpi-card--clickable,
.mc-kpi-card--clickable * {
    text-decoration: none !important;
}

/* Action indicator (arrow that appears on hover) */
.mc-kpi-card__action {
    position: absolute;
    top: var(--mc-space-4);
    right: var(--mc-space-4);
    color: var(--mc-text-tertiary);
    opacity: 0;
    transition: opacity 200ms var(--mc-ease-premium),
                transform 200ms var(--mc-ease-premium);
}

.mc-kpi-card--clickable:hover .mc-kpi-card__action {
    opacity: 1;
    transform: translateX(2px);
}

/* Footer text (for custom footer without link arrow) */
.mc-kpi-card__footer-text {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-tertiary);
}

/* ==========================================================================
   Tertiary Context Row (minimal, inline display)
   ========================================================================== */
.mc-context-row {
    display: flex;
    gap: var(--mc-space-6);
    padding: var(--mc-space-3) var(--mc-space-4);
    background: var(--mc-bg-secondary);
    border-radius: var(--mc-radius-md);
}

.mc-context-item {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
}

.mc-context-item__value {
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-primary);
}

.mc-context-item__label {
    color: var(--mc-text-tertiary);
}

/* ==========================================================================
   Fade-in Animation (subtle load animation)
   ========================================================================== */
@keyframes mc-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Note: animation-fill-mode: both ensures opacity starts at 0 during delay,
   then stays at 1 after animation completes. No explicit opacity: 0 needed. */
.mc-animate-in {
    animation: mc-fade-in-up 300ms var(--mc-ease-premium) both;
}

.mc-animate-in:nth-child(1) { animation-delay: 50ms; }
.mc-animate-in:nth-child(2) { animation-delay: 100ms; }
.mc-animate-in:nth-child(3) { animation-delay: 150ms; }
.mc-animate-in:nth-child(4) { animation-delay: 200ms; }

/* Disable animations on HTMX page swaps to prevent flash */
.htmx-swapping .mc-animate-in,
.htmx-settling .mc-animate-in {
    animation: none;
    opacity: 1;
}

.mc-kpi-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--mc-space-3);
}

.mc-kpi-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--mc-primary-light);
    color: var(--mc-primary);
    border-radius: var(--mc-radius-lg);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    transition: transform 200ms var(--mc-ease-premium);
}

.mc-kpi-card:hover .mc-kpi-card__icon {
    transform: scale(1.05);
}

/* Time period context (e.g., "Last 30 days") — top of card, subtle */
.mc-kpi-card__time-period {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-tertiary);
    font-weight: var(--mc-font-normal);
    margin-bottom: var(--mc-space-0-5, 2px);
}

.mc-kpi-card__label {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-secondary);
    font-weight: var(--mc-font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--mc-tracking-wider);
    margin-bottom: var(--mc-space-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-kpi-card__value {
    font-size: var(--mc-text-4xl);
    font-weight: var(--mc-font-bold);
    color: var(--mc-text-primary);
    line-height: 1.1;
    letter-spacing: var(--mc-tracking-tight);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.mc-kpi-card__trend {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-1);
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-medium);
    margin-top: var(--mc-space-2);
    padding: var(--mc-space-1) var(--mc-space-2);
    border-radius: var(--mc-radius-sm);
}

.mc-kpi-card__trend--up {
    color: var(--mc-trend-up);
    background-color: var(--mc-kpi-positive-bg);
}

.mc-kpi-card__trend--down {
    color: var(--mc-trend-down);
    background-color: var(--mc-kpi-negative-bg);
}

.mc-kpi-card__trend--flat {
    color: var(--mc-trend-flat);
    background-color: var(--mc-kpi-neutral-bg);
}

/* Trend comparison label (e.g., "vs last month") */
.mc-kpi-card__trend-label {
    color: var(--mc-text-tertiary);
    font-weight: var(--mc-font-normal);
    margin-left: var(--mc-space-0-5, 2px);
}

.mc-kpi-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--mc-space-4);
    padding-top: var(--mc-space-3);
    border-top: 1px solid var(--mc-border);
}

.mc-kpi-card__link {
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-medium);
    color: var(--mc-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--mc-space-1);
    transition: gap 200ms var(--mc-ease-premium);
}

.mc-kpi-card__link:hover {
    gap: var(--mc-space-2);
}

/* Loading State */
.mc-kpi-card--loading {
    position: relative;
    overflow: hidden;
}

.mc-kpi-card--loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: mc-shimmer 1.5s infinite;
}

@keyframes mc-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ==========================================================================
   TABLES
   ========================================================================== */
.mc-table-container {
    overflow-x: auto;
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    -webkit-overflow-scrolling: touch;
}

.mc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mc-text-sm);
}

.mc-table th,
.mc-table td {
    padding: var(--mc-density-cell-padding-y) var(--mc-density-cell-padding-x);
    text-align: left;
    border-bottom: 1px solid var(--mc-border);
    font-variant-numeric: tabular-nums;
}

.mc-table thead {
    position: sticky;
    top: 0;
    z-index: var(--mc-z-sticky);
}

@media (max-width: 640px) {
    .mc-table th,
    .mc-table td {
        padding: var(--mc-space-2) var(--mc-space-3);
        font-size: var(--mc-text-xs);
    }

    .mc-table th {
        letter-spacing: 0.04em;
    }
}

.mc-table th {
    background-color: var(--mc-bg-secondary);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-secondary);
    text-transform: uppercase;
    font-size: var(--mc-text-xs);
    letter-spacing: 0.05em;
}

.mc-table tbody tr {
    transition: background-color var(--mc-transition-fast);
}

.mc-table tbody tr:hover {
    background-color: var(--mc-bg-hover);
}

.mc-table tbody tr:last-child td {
    border-bottom: none;
}

.mc-table--striped tbody tr:nth-child(even) {
    background-color: var(--mc-bg-secondary);
}

/* Column resize handles */
.mc-table__resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    background: transparent;
    transition: background-color var(--mc-transition-fast);
    z-index: 1;
}

.mc-table__resize-handle:hover,
.mc-table__resize-handle--active {
    background-color: var(--mc-primary);
}

.mc-table--resizing {
    cursor: col-resize;
    user-select: none;
}

/* Sticky first column for wide tables */
.mc-table--sticky-col td:first-child,
.mc-table--sticky-col th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: inherit;
}

.mc-table--sticky-col th:first-child {
    z-index: calc(var(--mc-z-sticky) + 1);
}

/* Alias: JS applies mc-table--sticky-first */
.mc-table--sticky-first td:first-child,
.mc-table--sticky-first th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: inherit;
}

.mc-table--sticky-first th:first-child {
    z-index: calc(var(--mc-z-sticky) + 1);
}

/* Column visibility toggle dropdown */
.mc-table__col-toggle {
    display: inline-block;
    position: relative;
}

.mc-table__col-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: var(--mc-space-1);
    background: var(--mc-dropdown-bg);
    border: 1px solid var(--mc-dropdown-border);
    border-radius: var(--mc-dropdown-radius);
    box-shadow: var(--mc-dropdown-shadow);
    padding: var(--mc-space-2);
    min-width: 180px;
    max-height: 300px;
    overflow-y: auto;
    z-index: var(--mc-z-dropdown);
}

.mc-table__col-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    padding: var(--mc-space-1-5, 6px) var(--mc-space-2);
    font-size: var(--mc-text-sm);
    color: var(--mc-text-primary);
    cursor: pointer;
    border-radius: var(--mc-radius-sm);
}

.mc-table__col-dropdown-item:hover {
    background: var(--mc-dropdown-item-hover);
}

.mc-table__col-reset {
    width: 100%;
    margin-top: var(--mc-space-2);
    padding-top: var(--mc-space-2);
    border-top: 1px solid var(--mc-border);
    text-align: center;
    font-size: var(--mc-text-xs);
    color: var(--mc-text-secondary);
}

/* Table helpers used across dashboards */
.mc-table__subtitle {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-secondary);
    margin-top: var(--mc-space-1);
}

.mc-table__empty {
    text-align: center;
    color: var(--mc-text-tertiary);
    font-size: var(--mc-text-sm);
}

.mc-table__empty-cell {
    text-align: center;
    color: var(--mc-text-tertiary);
    font-size: var(--mc-text-sm);
}

.mc-table__empty--success {
    color: var(--mc-success);
}

/* Numeric cell variant - tabular nums for aligned numbers */
.mc-table__cell--numeric {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.mc-table__cell--truncate {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-table__cell--date {
    white-space: nowrap;
    color: var(--mc-text-secondary);
    font-size: var(--mc-text-sm);
}

/* General-purpose truncation utility */
.mc-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Table column modifiers - extracted from inline styles */
.mc-table__col--checkbox {
    width: 40px;
}

.mc-table__col--actions {
    width: 100px;
    text-align: right;
}

/* Table sort icon styling */
.mc-table__sort-icon {
    font-size: 14px;
    vertical-align: middle;
    color: var(--mc-text-tertiary);
}

/* Simple inline form row (used in card headers) */
.mc-form--inline {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
}

.mc-form--inline .mc-input {
    width: auto;
}

/* Simple two-table layout used by Mission Control dashboards */
.mc-tables-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--mc-space-4);
}

@media (max-width: 1023px) {
    .mc-tables-grid {
        grid-template-columns: 1fr;
    }
}

/* Card tone variants (used by dashboards) */
.mc-card--warning {
    border-color: var(--mc-warning);
}

.mc-card--warning .mc-card__header {
    background: var(--mc-warning-light);
}

.mc-card--warning .mc-card__title {
    color: var(--mc-warning);
}

.mc-card--danger {
    border-color: var(--mc-danger);
}

.mc-card--danger .mc-card__header {
    background: var(--mc-danger-light);
}

.mc-card--danger .mc-card__title {
    color: var(--mc-danger);
}

/* Trend chart - bars variant (used by Work Orders dashboards) */
.mc-trend-chart--bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 160px;
    padding: var(--mc-space-4) 0;
}

.mc-trend-chart--bars .mc-trend-chart__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mc-space-1);
    flex: 1;
}

.mc-trend-chart--bars .mc-trend-chart__bar {
    width: 32px;
    min-height: 4px;
    background: var(--mc-primary);
    border-radius: var(--mc-radius-sm) var(--mc-radius-sm) 0 0;
    transition: height var(--mc-transition-base);
}

.mc-trend-chart--bars .mc-trend-chart__count {
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-semibold);
}

.mc-trend-chart--bars .mc-trend-chart__label {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-secondary);
}

.mc-trend-chart__bar--success {
    background: var(--mc-success);
}

/* ==========================================================================
   MODALS
   ========================================================================== */
.mc-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--mc-z-modal);
}

.mc-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(23, 43, 77, 0.6);
}

[data-theme="dark"] .mc-modal__backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}

.mc-modal__content {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    background-color: var(--mc-bg-primary);
    border-radius: var(--mc-radius-xl);
    box-shadow: var(--mc-shadow-modal);
    overflow: hidden;
}

/* Named size variants (used by mc-modal.html macros) */
.mc-modal__content--small {
    max-width: 400px;
}

.mc-modal__content--medium {
    max-width: 560px;
}

.mc-modal__content--large {
    max-width: 800px;
}

.mc-modal__content--fullscreen {
    max-width: 100%;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

/* Shorthand size variants (used in inline HTML) */
.mc-modal__content--search {
    max-width: 640px;
    max-height: 480px;
}

.mc-modal__content--lg {
    max-width: 800px;
}

.mc-modal__content--xl {
    max-width: 1024px;
}

/* Active state for HTMX-loaded modals */
.mc-modal--active {
    z-index: var(--mc-z-modal);
}

.mc-modal__content--visible {
    animation: mc-modal-enter 0.2s ease-out;
}

@keyframes mc-modal-enter {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.mc-modal__backdrop--visible {
    animation: mc-modal-fade-in 0.2s ease-out;
}

@keyframes mc-modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mc-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mc-space-4) var(--mc-space-5);
    border-bottom: 1px solid var(--mc-border);
}

.mc-modal__header-left {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    min-width: 0;
}

.mc-modal__icon {
    font-size: 20px;
    color: var(--mc-text-secondary);
    flex-shrink: 0;
}

.mc-modal__title {
    font-size: var(--mc-text-lg);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-primary);
    margin: 0;
}

.mc-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--mc-text-secondary);
    border-radius: var(--mc-radius-md);
    cursor: pointer;
    transition: background-color var(--mc-transition-fast);
}

.mc-modal__close:hover {
    background-color: var(--mc-bg-hover);
}

.mc-modal__body {
    padding: var(--mc-space-5);
    overflow-y: auto;
}

/* Allow Select2 dropdowns to escape modal overflow clipping */
.mc-modal__content:has(.select2-container--open) {
    overflow: visible;
}
.mc-modal__body:has(.select2-container--open) {
    overflow: visible;
}

.mc-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mc-space-2);
    padding: var(--mc-space-4) var(--mc-space-5);
    border-top: 1px solid var(--mc-border);
    background-color: var(--mc-bg-secondary);
}

/* ==========================================================================
   SEARCH MODAL
   ========================================================================== */
.mc-search-modal {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mc-search-modal__input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    padding: var(--mc-space-4);
    border-bottom: 1px solid var(--mc-border);
}

.mc-search-modal__input-wrapper .material-symbols-rounded {
    color: var(--mc-text-tertiary);
}

.mc-search-modal__input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--mc-text-base);
    color: var(--mc-text-primary);
    outline: none;
}

.mc-search-modal__input::placeholder {
    color: var(--mc-text-tertiary);
}

.mc-search-modal__kbd {
    padding: 2px 8px;
    background-color: var(--mc-bg-tertiary);
    border-radius: var(--mc-radius-sm);
    font-size: var(--mc-text-xs);
    font-family: var(--mc-font-mono);
    color: var(--mc-text-secondary);
}

.mc-search-modal__results {
    flex: 1;
    overflow-y: auto;
    padding: var(--mc-space-4);
    max-height: 400px;
}

/* Command palette sections */
.mc-search-modal__section {
    margin-bottom: var(--mc-space-4);
}

.mc-search-modal__section:last-child {
    margin-bottom: 0;
}

.mc-search-modal__section-label {
    font-size: var(--mc-text-xs);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--mc-space-1) 0;
    margin-bottom: var(--mc-space-1);
}

.mc-search-modal__item {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    padding: var(--mc-space-2) var(--mc-space-3);
    border-radius: var(--mc-radius-md);
    color: var(--mc-text-primary);
    text-decoration: none;
    font-size: var(--mc-text-sm);
    cursor: pointer;
    transition: background-color var(--mc-transition-fast);
}

.mc-search-modal__item:hover,
.mc-search-modal__item:focus-visible {
    background-color: var(--mc-bg-hover);
}

.mc-search-modal__item .material-symbols-rounded {
    font-size: var(--mc-icon-md);
    color: var(--mc-text-secondary);
    flex-shrink: 0;
}

.mc-search-modal__shortcut {
    margin-left: auto;
    font-size: var(--mc-text-xs);
    color: var(--mc-text-tertiary);
    background: var(--mc-bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--mc-radius-sm);
    font-family: var(--mc-font-mono);
}

/* ==========================================================================
   FLASH MESSAGES
   ========================================================================== */
.mc-flash-messages {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2);
    margin-bottom: var(--mc-space-4);
}

/* ==========================================================================
   SPINNER / LOADING
   ========================================================================== */
.mc-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--mc-border);
    border-top-color: var(--mc-primary);
    border-radius: 50%;
    animation: mc-spin 0.8s linear infinite;
}

.mc-spinner--sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.mc-spinner--lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

.mc-spinner--inline {
    display: inline-block;
    vertical-align: middle;
}

@keyframes mc-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.mc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mc-space-10);
    text-align: center;
}

.mc-empty-state__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background-color: var(--mc-bg-secondary);
    color: var(--mc-text-tertiary);
    border-radius: var(--mc-radius-full);
    margin-bottom: var(--mc-space-4);
}

.mc-empty-state__icon .material-symbols-rounded {
    font-size: 32px;
}

.mc-empty-state__icon.material-symbols-rounded {
    font-size: 32px;
}

.mc-empty-state__title {
    font-size: var(--mc-text-lg);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-primary);
    margin: 0 0 var(--mc-space-2);
}

.mc-empty-state__description {
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
    margin: 0 0 var(--mc-space-4);
    max-width: 400px;
}

/* Backwards-compatible aliases used by older templates */
.mc-empty-state__text {
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
    margin: 0 0 var(--mc-space-2);
    max-width: 560px;
}

.mc-empty-state__subtext {
    font-size: var(--mc-text-sm);
    color: var(--mc-text-tertiary);
    margin: 0;
    max-width: 560px;
}

.mc-empty-state__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--mc-space-2);
    flex-wrap: wrap;
}

.mc-empty-state__actions .mc-btn {
    min-width: 160px;
    justify-content: center;
}

.mc-empty-state__icon--warning {
    background-color: rgba(245, 158, 11, 0.12);
    color: var(--mc-warning);
}

/* Illustration support for richer empty states */
.mc-empty-state__illustration {
    max-width: 200px;
    margin-bottom: var(--mc-space-5);
}

.mc-empty-state__illustration img {
    width: 100%;
    height: auto;
    opacity: 0.85;
}

/* First-time setup variant — encouraging, branded accent */
.mc-empty-state--first-time .mc-empty-state__icon {
    background-color: var(--mc-primary-light);
    color: var(--mc-primary);
}

.mc-empty-state--first-time .mc-empty-state__title {
    font-size: var(--mc-text-xl);
}

/* ==========================================================================
   STAT GRID — with container query support
   ========================================================================== */
.mc-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--mc-space-4);
    container-type: inline-size;
}

/* Viewport-based fallback for older browsers */
@media (max-width: 1279px) {
    .mc-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639px) {
    .mc-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* Container queries — component-level responsiveness (96%+ browser support) */
@container (max-width: 900px) {
    .mc-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container (max-width: 500px) {
    .mc-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* KPI card adapts to container width */
@container (max-width: 280px) {
    .mc-kpi-card {
        padding: var(--mc-space-3);
    }
    .mc-kpi-card__sparkline {
        display: none;
    }
    .mc-kpi-card__value {
        font-size: var(--mc-text-2xl);
    }
}

/* 6-column grid variant for consolidated KPIs */
.mc-stat-grid--6 {
    grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 1439px) {
    .mc-stat-grid--6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1023px) {
    .mc-stat-grid--6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639px) {
    .mc-stat-grid--6 {
        grid-template-columns: 1fr;
    }
}

/* Animation delays for 6 KPIs */
.mc-stat-grid--6 .mc-kpi-card:nth-child(5) { animation-delay: 300ms; }
.mc-stat-grid--6 .mc-kpi-card:nth-child(6) { animation-delay: 350ms; }

/* 4-column grid variant (explicit, same as base) */
.mc-stat-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* 5-column grid variant for extended KPI bands */
.mc-stat-grid--5 {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1279px) {
    .mc-stat-grid--5 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1023px) {
    .mc-stat-grid--4,
    .mc-stat-grid--5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639px) {
    .mc-stat-grid--4,
    .mc-stat-grid--5 {
        grid-template-columns: 1fr;
    }
}

/* 2-column grid for hero/primary KPIs */
.mc-stat-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767px) {
    .mc-stat-grid--2 {
        grid-template-columns: 1fr;
    }
}

/* 3-column grid for secondary KPIs */
.mc-stat-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1023px) {
    .mc-stat-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639px) {
    .mc-stat-grid--3 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   KPI GRID - Template-referenced grid classes
   Used by: Operations Hub, Route Plans, Issue Tracker, WO Analytics,
            System Health, ML Training, Portfolio Command Center
   ========================================================================== */
.mc-kpi-grid {
    display: grid;
    gap: var(--mc-space-4);
}

.mc-kpi-grid--4,
.mc-kpi-grid--4col {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mc-kpi-grid--5 {
    grid-template-columns: repeat(5, 1fr);
}

.mc-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--mc-space-4);
}

@media (max-width: 1279px) {
    .mc-kpi-grid--4,
    .mc-kpi-grid--4col,
    .mc-kpi-grid--5 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .mc-kpi-grid--4,
    .mc-kpi-grid--4col,
    .mc-kpi-grid--5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .mc-kpi-grid--4,
    .mc-kpi-grid--4col,
    .mc-kpi-grid--5 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   OPERATIONAL CANVAS GRID (12-column fluid layout for dashboards)
   ========================================================================== */
.mc-canvas-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--mc-space-4);
    width: 100%;
}

/* Span utilities */
.mc-span-2 { grid-column: span 2; }
.mc-span-3 { grid-column: span 3; }
.mc-span-4 { grid-column: span 4; }
.mc-span-6 { grid-column: span 6; }
.mc-span-8 { grid-column: span 8; }
.mc-span-12, .mc-span-full { grid-column: 1 / -1; }

/* Responsive canvas grid */
@media (max-width: 1439px) {
    .mc-canvas-grid {
        grid-template-columns: repeat(10, 1fr);
    }
    .mc-span-6 { grid-column: span 5; }
}

@media (max-width: 1279px) {
    .mc-canvas-grid {
        grid-template-columns: repeat(8, 1fr);
    }
    .mc-span-3 { grid-column: span 4; }
    .mc-span-4 { grid-column: span 4; }
    .mc-span-6 { grid-column: span 4; }
}

@media (max-width: 1023px) {
    .mc-canvas-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .mc-span-2, .mc-span-3 { grid-column: span 2; }
    .mc-span-4, .mc-span-6 { grid-column: span 4; }
}

@media (max-width: 639px) {
    .mc-canvas-grid {
        grid-template-columns: 1fr;
    }
    .mc-span-2, .mc-span-3, .mc-span-4, .mc-span-6 { grid-column: 1 / -1; }
}

/* ==========================================================================
   DIAGNOSTIC BAR (horizontal performance indicator for Site Attendance)
   ========================================================================== */
.mc-diagnostic-bar {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    padding: var(--mc-space-3) var(--mc-space-4);
    background: var(--mc-bg-primary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    transition: all 200ms var(--mc-ease-premium);
    cursor: pointer;
}

.mc-diagnostic-bar:hover {
    background: var(--mc-bg-secondary);
    border-color: var(--mc-border-hover);
}

.mc-diagnostic-bar__name {
    min-width: 160px;
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-primary);
}

.mc-diagnostic-bar__track {
    flex: 1;
    height: 8px;
    background: var(--mc-bg-tertiary);
    border-radius: var(--mc-radius-full);
    overflow: hidden;
}

.mc-diagnostic-bar__fill {
    height: 100%;
    border-radius: var(--mc-radius-full);
    transition: width 500ms var(--mc-ease-premium);
}

.mc-diagnostic-bar__fill--stable { background: var(--mc-success); }
.mc-diagnostic-bar__fill--warning { background: var(--mc-warning); }
.mc-diagnostic-bar__fill--critical { background: var(--mc-danger); }

.mc-diagnostic-bar__count {
    min-width: 70px;
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
    text-align: right;
}

.mc-diagnostic-bar__percent {
    min-width: 50px;
    font-weight: var(--mc-font-semibold);
    text-align: right;
}

.mc-diagnostic-bar__percent--stable { color: var(--mc-success); }
.mc-diagnostic-bar__percent--warning { color: var(--mc-warning); }
.mc-diagnostic-bar__percent--critical { color: var(--mc-danger); }

.mc-diagnostic-bar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 1rem;
}

/* Critical row gets attention background */
.mc-diagnostic-bar--critical {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.2);
}

/* ==========================================================================
   SHIFT HEALTH BLOCK (compact status for Shift Attendance)
   ========================================================================== */
.mc-shift-block {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2);
    padding: var(--mc-space-4);
    background: var(--mc-bg-primary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    position: relative;
}

.mc-shift-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mc-space-3);
}

.mc-shift-block__name {
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-primary);
}

.mc-shift-block__time {
    font-size: var(--mc-text-sm);
    color: var(--mc-text-tertiary);
}

.mc-shift-block__live {
    display: flex;
    align-items: center;
    gap: var(--mc-space-1);
    font-size: var(--mc-text-xs);
    color: var(--mc-success);
    font-weight: var(--mc-font-medium);
}

.mc-shift-block__live::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--mc-success);
    border-radius: 50%;
    animation: mc-pulse-live 2s ease-in-out infinite;
}

@keyframes mc-pulse-live {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.mc-shift-block__bar {
    width: 100%;
    height: 12px;
    border-radius: var(--mc-radius-full);
    background: var(--mc-bg-tertiary, #E5E7EB); /* Fallback if no gradient set */
    margin: var(--mc-space-3) 0;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
    /* Gradient background is set inline for dynamic percentages */
}

/* Shift bar uses CSS gradient for segments - colors defined here for reference:
   On Time: #00875A (--mc-success)
   Late:    #FF8B00 (--mc-warning)
   Absent:  #DE350B (--mc-danger)
*/

.mc-shift-block__stats {
    display: flex;
    gap: var(--mc-space-4);
}

.mc-shift-block__stat {
    display: flex;
    align-items: baseline;
    gap: var(--mc-space-1);
}

.mc-shift-block__stat-value {
    font-weight: var(--mc-font-bold);
    font-size: var(--mc-text-lg);
}

.mc-shift-block__stat-value--ontime { color: var(--mc-success); }
.mc-shift-block__stat-value--late { color: var(--mc-warning); }
.mc-shift-block__stat-value--absent { color: var(--mc-danger); }

.mc-shift-block__stat-label {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-tertiary);
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
.mc-animate-fade-in {
    animation: mc-fade-in var(--mc-transition-base) ease-out;
}

@keyframes mc-fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mc-animate-slide-up {
    animation: mc-slide-up var(--mc-transition-base) ease-out;
}

@keyframes mc-slide-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   HTMX LOADING STATES
   ========================================================================== */
.htmx-request {
    cursor: wait;
}

.htmx-request .mc-btn {
    pointer-events: none;
}

/* Indicator while loading */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-request.htmx-indicator {
    display: inline-block;
}

/* ==========================================================================
   OPTIMISTIC UPDATE INDICATOR
   Subtle pulsing dot for elements with pending server confirmation.
   ========================================================================== */
.mc-optimistic--syncing {
    position: relative;
}

.mc-optimistic--syncing::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--mc-primary);
    animation: mc-optimistic-pulse 1.2s ease-in-out infinite;
}

@keyframes mc-optimistic-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Toast container — bottom-right, stacked */
.mc-toast-container {
    position: fixed;
    bottom: var(--mc-space-5);
    right: var(--mc-space-5);
    z-index: var(--mc-z-toast);
    display: flex;
    flex-direction: column-reverse;
    gap: var(--mc-space-2);
    pointer-events: none;
}

.mc-toast-container > * {
    pointer-events: auto;
}

.mc-global-htmx-indicator {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: var(--mc-z-toast);
}

.mc-toast__code {
    margin-left: var(--mc-space-2);
    font-size: var(--mc-text-xs);
    font-family: var(--mc-font-mono);
    color: var(--mc-text-tertiary);
}

/* ==========================================================================
   UTILITIES FOR TRANSITIONS
   ========================================================================== */
.mc-transition {
    transition-property: all;
    transition-timing-function: ease;
}

.mc-duration-fast {
    transition-duration: 150ms;
}

.mc-duration-base {
    transition-duration: 250ms;
}

.mc-duration-slow {
    transition-duration: 350ms;
}

.mc-opacity-0 {
    opacity: 0;
}

.mc-opacity-100 {
    opacity: 1;
}

.mc-scale-95 {
    transform: scale(0.95);
}

.mc-scale-100 {
    transform: scale(1);
}

.-mc-translate-x-full {
    transform: translateX(-100%);
}

.mc-translate-x-0 {
    transform: translateX(0);
}

/* ==========================================================================
   SKELETON LOADERS
   ========================================================================== */
.mc-skeleton {
    background-color: var(--mc-bg-tertiary);
    border-radius: var(--mc-radius-sm);
    animation: mc-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes mc-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.mc-skeleton--text {
    height: 14px;
    margin-bottom: 8px;
    width: 100%;
}

.mc-skeleton--circle {
    border-radius: var(--mc-radius-full);
}

.mc-skeleton--rect {
    width: 100%;
    height: 80px;
}

.mc-skeleton-text {
    display: flex;
    flex-direction: column;
}

.mc-skeleton-card {
    background-color: var(--mc-bg-primary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    overflow: hidden;
}

.mc-skeleton-card__body {
    padding: var(--mc-space-4);
}

/* ==========================================================================
   CHART LOADING / EMPTY / ERROR STATES
   ========================================================================== */
.mc-chart-skeleton {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mc-bg-secondary);
    border-radius: var(--mc-radius-md);
    overflow: hidden;
}

.mc-chart-skeleton__content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mc-space-4);
}

.mc-chart-skeleton__svg {
    width: 100%;
    height: 100%;
}

.mc-skeleton-fill {
    fill: var(--mc-bg-tertiary);
    animation: mc-skeleton-pulse 1.5s ease-in-out infinite;
}

.mc-skeleton-stroke {
    stroke: var(--mc-bg-tertiary);
    animation: mc-skeleton-pulse 1.5s ease-in-out infinite;
}

.mc-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mc-space-2);
    padding: var(--mc-space-6);
    background: var(--mc-bg-secondary);
    border-radius: var(--mc-radius-md);
    min-height: 160px;
}

.mc-chart-empty__icon {
    font-size: 40px;
    color: var(--mc-text-tertiary);
}

.mc-chart-empty__message {
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
    text-align: center;
}

.mc-chart-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mc-space-3);
    padding: var(--mc-space-6);
    background: var(--mc-danger-light);
    border-radius: var(--mc-radius-md);
    min-height: 160px;
}

.mc-chart-error__icon {
    font-size: 40px;
    color: var(--mc-danger);
}

.mc-chart-error__message {
    font-size: var(--mc-text-sm);
    color: var(--mc-danger);
    text-align: center;
}

/* ==========================================================================
   LOADING COMPONENT
   ========================================================================== */
.mc-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mc-space-3);
}

.mc-loading__label {
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
}

.mc-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: var(--mc-z-modal);
}

[data-theme="dark"] .mc-loading-overlay {
    background-color: rgba(29, 33, 37, 0.8);
}

.mc-loading-overlay__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mc-space-3);
}

.mc-loading-overlay__message {
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
}

/* ==========================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */
.mc-toast {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    padding: var(--mc-space-3) var(--mc-space-4);
    background-color: var(--mc-bg-primary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    box-shadow: var(--mc-shadow-lg);
    font-size: var(--mc-text-sm);
    min-width: 300px;
    max-width: 400px;
}

.mc-toast .material-symbols-rounded {
    flex-shrink: 0;
    font-size: 20px;
}

.mc-toast--success .material-symbols-rounded {
    color: var(--mc-success);
}

.mc-toast--warning .material-symbols-rounded {
    color: var(--mc-warning);
}

.mc-toast--danger .material-symbols-rounded,
.mc-toast--error .material-symbols-rounded {
    color: var(--mc-danger);
}

.mc-toast--info .material-symbols-rounded {
    color: var(--mc-info);
}

.mc-toast__close {
    margin-left: auto;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--mc-text-tertiary);
    cursor: pointer;
    transition: color var(--mc-transition-fast);
}

.mc-toast__close:hover {
    color: var(--mc-text-primary);
}

/* Toast enter/exit animations */
.mc-toast--enter {
    opacity: 0;
    transform: translateX(100%);
}

.mc-toast {
    transition: opacity 200ms var(--mc-ease-premium),
                transform 300ms var(--mc-ease-spring-native, var(--mc-ease-spring));
}

.mc-toast--exit {
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 150ms ease-in, transform 150ms ease-in;
}

/* Undo button inside toast */
.mc-toast__undo {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-weight: var(--mc-font-semibold);
    text-decoration: underline;
    padding: 0 var(--mc-space-1);
    font-size: inherit;
    white-space: nowrap;
}

.mc-toast__undo:hover {
    opacity: 0.8;
}

/* Toast message (for grouping counter) */
.mc-toast__message {
    flex: 1;
    min-width: 0;
}

/* ==========================================================================
   DOT INDICATOR
   ========================================================================== */
.mc-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--mc-radius-full);
}

.mc-dot--success {
    background-color: var(--mc-success);
}

.mc-dot--warning {
    background-color: var(--mc-warning);
}

.mc-dot--danger {
    background-color: var(--mc-danger);
}

.mc-dot--info {
    background-color: var(--mc-info);
}

.mc-dot--neutral {
    background-color: var(--mc-text-tertiary);
}

/* ==========================================================================
   INPUT WITH ICON
   ========================================================================== */
.mc-input-icon-wrapper {
    position: relative;
}

.mc-input-icon {
    position: absolute;
    left: var(--mc-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--mc-text-tertiary);
    font-size: 20px;
    pointer-events: none;
}

.mc-input--with-icon {
    padding-left: calc(var(--mc-space-3) + 24px + var(--mc-space-2));
}

/* ==========================================================================
   CHECKBOX & RADIO
   ========================================================================== */
.mc-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    cursor: pointer;
    font-size: var(--mc-text-sm);
}

.mc-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--mc-primary);
    cursor: pointer;
}

.mc-checkbox-text {
    color: var(--mc-text-primary);
}

.mc-form-group--inline {
    display: flex;
    align-items: center;
}

/* ==========================================================================
   ALERT CONTENT
   ========================================================================== */
.mc-alert__content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mc-alert__title {
    font-weight: var(--mc-font-semibold);
    margin-bottom: 2px;
}

.mc-alert__message {
    line-height: 1.5;
}

.mc-alert-inline {
    font-size: var(--mc-text-xs);
}

.mc-alert-inline--danger {
    color: var(--mc-danger);
}

.mc-alert-inline--success {
    color: var(--mc-success);
}

/* ==========================================================================
   SLIDEOUT PANEL
   ========================================================================== */
.mc-slideout {
    position: fixed;
    inset: 0;
    z-index: var(--mc-z-modal);
    display: flex;
    justify-content: flex-end;
}

.mc-slideout__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23, 43, 77, 0.5);
}

.mc-slideout__panel {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 100%;
    background: var(--mc-bg-primary);
    box-shadow: var(--mc-shadow-2xl);
    display: flex;
    flex-direction: column;
}

.mc-slideout__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mc-space-4) var(--mc-space-5);
    border-bottom: 1px solid var(--mc-border);
}

.mc-slideout__title {
    font-size: var(--mc-text-lg);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-primary);
    margin: 0;
}

.mc-slideout__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--mc-text-secondary);
    border-radius: var(--mc-radius-md);
    cursor: pointer;
    transition: all var(--mc-transition-fast);
}

.mc-slideout__close:hover {
    background: var(--mc-bg-hover);
    color: var(--mc-text-primary);
}

.mc-slideout__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--mc-space-5);
}

/* Helpbot Styles */
.mc-helpbot__welcome {
    text-align: center;
    padding: var(--mc-space-6) var(--mc-space-4);
}

.mc-helpbot__quick-links {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2);
}

.mc-helpbot__link {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    padding: var(--mc-space-3) var(--mc-space-4);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    color: var(--mc-text-primary);
    text-decoration: none;
    transition: all var(--mc-transition-fast);
}

.mc-helpbot__link:hover {
    background: var(--mc-bg-hover);
    border-color: var(--mc-primary);
}

.mc-helpbot__link .material-symbols-rounded {
    color: var(--mc-primary);
}

/* Translation utilities for slideout animations */
.mc-translate-x-full {
    transform: translateX(100%);
}

.mc-translate-x-0 {
    transform: translateX(0);
}

/* ==========================================================================
   FOCUS STATES - Accessibility (WCAG 2.1 AA Compliance)
   ========================================================================== */
.mc-sidebar__link:focus-visible,
.mc-sidebar__toggle:focus-visible,
.mc-header__icon-btn:focus-visible,
.mc-header__user-btn:focus-visible,
.mc-header__search-btn:focus-visible,
.mc-header__menu-toggle:focus-visible,
.mc-dropdown__item:focus-visible,
.mc-shortcut-card:focus-visible,
.mc-kpi-card:focus-visible,
.mc-btn:focus-visible,
.mc-input:focus-visible,
.mc-select:focus-visible,
.mc-textarea:focus-visible,
.mc-slideout__close:focus-visible,
.mc-modal__close:focus-visible,
.mc-sidebar__help-btn:focus-visible {
    outline: 2px solid var(--mc-border-focus);
    outline-offset: 2px;
}

/* Remove default browser focus outline when custom is applied */
.mc-sidebar__link:focus,
.mc-sidebar__toggle:focus,
.mc-header__icon-btn:focus,
.mc-header__user-btn:focus,
.mc-header__search-btn:focus,
.mc-btn:focus,
.mc-slideout__close:focus,
.mc-modal__close:focus {
    outline: none;
}

/* ==========================================================================
   SEARCH MODAL POLISH - Backdrop Blur
   ========================================================================== */
.mc-modal__backdrop {
    background: rgba(23, 43, 77, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

[data-theme="dark"] .mc-modal__backdrop {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Search input focus animation */
.mc-search-modal__input:focus {
    box-shadow: none;
}

.mc-search-modal__input-wrapper:focus-within {
    border-color: var(--mc-primary);
    box-shadow: 0 0 0 3px var(--mc-primary-light);
}

/* ==========================================================================
   STAGGER ANIMATIONS - List Items (Linear/Vercel style)
   ========================================================================== */
@keyframes mc-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mc-fade-in-scale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Activity and alert item animations */
.mc-activity-item,
.mc-alert-item {
    animation: mc-fade-in-up 300ms ease forwards;
    opacity: 0;
}

.mc-activity-item:nth-child(1),
.mc-alert-item:nth-child(1) { animation-delay: 50ms; }
.mc-activity-item:nth-child(2),
.mc-alert-item:nth-child(2) { animation-delay: 100ms; }
.mc-activity-item:nth-child(3),
.mc-alert-item:nth-child(3) { animation-delay: 150ms; }
.mc-activity-item:nth-child(4),
.mc-alert-item:nth-child(4) { animation-delay: 200ms; }
.mc-activity-item:nth-child(5),
.mc-alert-item:nth-child(5) { animation-delay: 250ms; }
.mc-activity-item:nth-child(n+6),
.mc-alert-item:nth-child(n+6) { animation-delay: 300ms; }

/* Shortcut card stagger */
.mc-shortcut-card {
    animation: mc-fade-in-scale 350ms ease forwards;
    opacity: 0;
}

.mc-shortcut-card:nth-child(1) { animation-delay: 50ms; }
.mc-shortcut-card:nth-child(2) { animation-delay: 80ms; }
.mc-shortcut-card:nth-child(3) { animation-delay: 110ms; }
.mc-shortcut-card:nth-child(4) { animation-delay: 140ms; }
.mc-shortcut-card:nth-child(5) { animation-delay: 170ms; }
.mc-shortcut-card:nth-child(6) { animation-delay: 200ms; }
.mc-shortcut-card:nth-child(7) { animation-delay: 230ms; }
.mc-shortcut-card:nth-child(8) { animation-delay: 260ms; }
.mc-shortcut-card:nth-child(9) { animation-delay: 290ms; }
.mc-shortcut-card:nth-child(10) { animation-delay: 320ms; }
.mc-shortcut-card:nth-child(n+11) { animation-delay: 350ms; }

/* KPI card stagger */
.mc-kpi-card {
    animation: mc-fade-in-scale 400ms ease forwards;
    animation-fill-mode: backwards;
}

.mc-stat-grid .mc-kpi-card:nth-child(1) { animation-delay: 100ms; }
.mc-stat-grid .mc-kpi-card:nth-child(2) { animation-delay: 150ms; }
.mc-stat-grid .mc-kpi-card:nth-child(3) { animation-delay: 200ms; }
.mc-stat-grid .mc-kpi-card:nth-child(4) { animation-delay: 250ms; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .mc-activity-item,
    .mc-alert-item,
    .mc-shortcut-card,
    .mc-kpi-card {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .mc-header__badge {
        animation: none;
    }
}

/* ==========================================================================
   ACTIVITY & ALERT ITEMS - Hover States
   ========================================================================== */
.mc-activity-item {
    display: flex;
    align-items: flex-start;
    gap: var(--mc-space-3);
    padding: var(--mc-space-3) var(--mc-space-4);
    border-radius: var(--mc-radius-md);
    transition: background-color 150ms ease;
    cursor: pointer;
}

.mc-activity-item:hover {
    background-color: var(--mc-bg-hover);
}

.mc-activity-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--mc-radius-full);
    flex-shrink: 0;
}

.mc-activity-item__icon--success {
    background-color: var(--mc-success-light);
    color: var(--mc-success);
}

.mc-activity-item__icon--warning {
    background-color: var(--mc-warning-light);
    color: var(--mc-warning);
}

.mc-activity-item__icon--danger {
    background-color: var(--mc-danger-light);
    color: var(--mc-danger);
}

.mc-activity-item__icon--info {
    background-color: var(--mc-info-light);
    color: var(--mc-info);
}

.mc-activity-item__content {
    flex: 1;
    min-width: 0;
}

.mc-activity-item__title {
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-primary);
    margin: 0;
}

.mc-activity-item__meta {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-secondary);
    margin-top: 2px;
}

/* Alert items */
.mc-alert-item {
    display: flex;
    align-items: flex-start;
    gap: var(--mc-space-3);
    padding: var(--mc-space-3) var(--mc-space-4);
    border-radius: var(--mc-radius-md);
    border-left: 3px solid transparent;
    transition: background-color 150ms ease;
    cursor: pointer;
}

.mc-alert-item:hover {
    background-color: var(--mc-bg-hover);
}

.mc-alert-item--critical {
    border-left-color: var(--mc-danger);
    background-color: var(--mc-danger-light);
}

.mc-alert-item--warning {
    border-left-color: var(--mc-warning);
    background-color: var(--mc-warning-light);
}

.mc-alert-item--info {
    border-left-color: var(--mc-info);
    background-color: var(--mc-info-light);
}

/* ==========================================================================
   ENHANCED SHORTCUT CARD - Stronger hover
   ========================================================================== */
.mc-shortcut-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mc-space-2);
    padding: var(--mc-space-4);
    background: var(--mc-bg-primary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    text-decoration: none;
    color: var(--mc-text-primary);
    transition: all 200ms var(--mc-ease-premium);
    cursor: pointer;
}

.mc-shortcut-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mc-shadow-lg);
    border-color: var(--mc-border-strong);
}

.mc-shortcut-card:active {
    transform: translateY(-2px);
    box-shadow: var(--mc-shadow-md);
}

.mc-shortcut-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--mc-radius-lg);
    font-size: 22px;
    transition: transform 200ms var(--mc-ease-premium);
}

.mc-shortcut-card:hover .mc-shortcut-card__icon {
    transform: scale(1.1);
}

.mc-shortcut-card__label {
    font-size: var(--mc-text-xs);
    font-weight: var(--mc-font-medium);
    text-align: center;
    color: var(--mc-text-secondary);
}

/* Shortcut card icon color variants */
.mc-shortcut-card__icon--teal {
    background-color: rgba(49, 151, 149, 0.15);
    color: #319795;
}

.mc-shortcut-card__icon--blue {
    background-color: rgba(49, 130, 206, 0.15);
    color: #3182CE;
}

.mc-shortcut-card__icon--purple {
    background-color: rgba(128, 90, 213, 0.15);
    color: #805AD5;
}

.mc-shortcut-card__icon--green {
    background-color: rgba(72, 187, 120, 0.15);
    color: #48BB78;
}

.mc-shortcut-card__icon--red {
    background-color: rgba(245, 101, 101, 0.15);
    color: #F56565;
}

.mc-shortcut-card__icon--orange {
    background-color: rgba(237, 137, 54, 0.15);
    color: #ED8936;
}

.mc-shortcut-card__icon--yellow {
    background-color: rgba(236, 201, 75, 0.15);
    color: #D69E2E;
}

/* ==========================================================================
   DARK MODE POLISH - Enhanced icon colors
   ========================================================================== */
[data-theme="dark"] .mc-shortcut-card__icon--teal {
    background: rgba(129, 230, 217, 0.2);
    color: #81E6D9;
}

[data-theme="dark"] .mc-shortcut-card__icon--blue {
    background: rgba(144, 205, 244, 0.2);
    color: #90CDF4;
}

[data-theme="dark"] .mc-shortcut-card__icon--purple {
    background: rgba(183, 148, 244, 0.2);
    color: #B794F4;
}

[data-theme="dark"] .mc-shortcut-card__icon--green {
    background: rgba(154, 230, 180, 0.2);
    color: #9AE6B4;
}

[data-theme="dark"] .mc-shortcut-card__icon--red {
    background: rgba(254, 178, 178, 0.2);
    color: #FEB2B2;
}

[data-theme="dark"] .mc-shortcut-card__icon--orange {
    background: rgba(251, 211, 141, 0.2);
    color: #FBD38D;
}

[data-theme="dark"] .mc-shortcut-card__icon--yellow {
    background: rgba(250, 240, 137, 0.2);
    color: #FAF089;
}

/* Dark mode activity icons */
[data-theme="dark"] .mc-activity-item__icon--success {
    background: rgba(154, 230, 180, 0.2);
    color: #9AE6B4;
}

[data-theme="dark"] .mc-activity-item__icon--warning {
    background: rgba(251, 211, 141, 0.2);
    color: #FBD38D;
}

[data-theme="dark"] .mc-activity-item__icon--danger {
    background: rgba(254, 178, 178, 0.2);
    color: #FEB2B2;
}

[data-theme="dark"] .mc-activity-item__icon--info {
    background: rgba(144, 205, 244, 0.2);
    color: #90CDF4;
}

/* ==========================================================================
   QUICK ACCESS - MODERN PILL DESIGN (Dec 2025)
   Premium horizontal pill layout with visible labels and gradient accents
   ========================================================================== */
.mc-quick-access--modern {
    background: var(--mc-bg-primary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-xl);
    padding: var(--mc-space-5);
    box-shadow: var(--mc-shadow-premium);
}

/* Glass effect for dark mode */
[data-theme="dark"] .mc-quick-access--modern {
    background: rgba(22, 27, 34, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.06);
}

/* Header row */
.mc-quick-access__title-row {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
}

.mc-quick-access__bolt {
    font-size: 20px;
    color: var(--mc-warning);
}

.mc-quick-access--modern .mc-quick-access__title {
    font-size: var(--mc-text-base);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-primary);
    margin: 0;
}

.mc-quick-access__customize {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-1);
    font-size: var(--mc-text-xs);
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-tertiary);
    text-decoration: none;
    padding: var(--mc-space-1) var(--mc-space-2);
    border-radius: var(--mc-radius-sm);
    transition: all 150ms ease;
}

.mc-quick-access__customize .material-symbols-rounded {
    font-size: 16px;
}

.mc-quick-access__customize:hover {
    color: var(--mc-text-primary);
    background: var(--mc-bg-hover);
}

/* Pills container - Horizontal wrap layout */
.mc-quick-access__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mc-space-3);
    margin-top: var(--mc-space-4);
}

/* Access Pill - Modern horizontal button */
.mc-access-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-2);
    padding: var(--mc-space-2) var(--mc-space-3);
    background: var(--mc-bg-secondary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-full);
    text-decoration: none;
    transition: all 200ms var(--mc-ease-premium);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Dark mode pill background */
[data-theme="dark"] .mc-access-pill {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

/* Icon container with gradient background */
.mc-access-pill__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--mc-radius-full);
    transition: transform 200ms var(--mc-ease-bounce);
}

.mc-access-pill__icon .material-symbols-rounded {
    font-size: 18px;
    color: inherit;
}

/* Label styling */
.mc-access-pill__label {
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-primary);
    white-space: nowrap;
}

/* Arrow - hidden by default, slides in on hover */
.mc-access-pill__arrow {
    font-size: 16px;
    color: var(--mc-text-tertiary);
    opacity: 0;
    transform: translateX(-8px);
    transition: all 200ms var(--mc-ease-premium);
}

/* Hover state */
.mc-access-pill:hover {
    transform: translateY(-2px);
    border-color: transparent;
}

.mc-access-pill:hover .mc-access-pill__icon {
    transform: scale(1.1);
}

.mc-access-pill:hover .mc-access-pill__arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Focus visible for accessibility */
.mc-access-pill:focus-visible {
    outline: 2px solid var(--mc-border-focus);
    outline-offset: 2px;
}

/* ===== COLOR VARIANTS - Gradient icon backgrounds ===== */

/* Blue variant */
.mc-access-pill--blue .mc-access-pill__icon {
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    color: white;
}
.mc-access-pill--blue:hover {
    background: rgba(59, 130, 246, 0.1);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.25);
}

/* Cyan variant */
.mc-access-pill--cyan .mc-access-pill__icon {
    background: linear-gradient(135deg, #22D3EE 0%, #0891B2 100%);
    color: white;
}
.mc-access-pill--cyan:hover {
    background: rgba(34, 211, 238, 0.1);
    box-shadow: 0 4px 20px rgba(34, 211, 238, 0.25);
}

/* Emerald variant */
.mc-access-pill--emerald .mc-access-pill__icon {
    background: linear-gradient(135deg, #34D399 0%, #059669 100%);
    color: white;
}
.mc-access-pill--emerald:hover {
    background: rgba(52, 211, 153, 0.1);
    box-shadow: 0 4px 20px rgba(52, 211, 153, 0.25);
}

/* Amber variant */
.mc-access-pill--amber .mc-access-pill__icon {
    background: linear-gradient(135deg, #FBBF24 0%, #D97706 100%);
    color: white;
}
.mc-access-pill--amber:hover {
    background: rgba(251, 191, 36, 0.1);
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.25);
}

/* Violet variant */
.mc-access-pill--violet .mc-access-pill__icon {
    background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%);
    color: white;
}
.mc-access-pill--violet:hover {
    background: rgba(167, 139, 250, 0.1);
    box-shadow: 0 4px 20px rgba(167, 139, 250, 0.25);
}

/* Rose variant */
.mc-access-pill--rose .mc-access-pill__icon {
    background: linear-gradient(135deg, #FB7185 0%, #E11D48 100%);
    color: white;
}
.mc-access-pill--rose:hover {
    background: rgba(251, 113, 133, 0.1);
    box-shadow: 0 4px 20px rgba(251, 113, 133, 0.25);
}

/* Teal variant */
.mc-access-pill--teal .mc-access-pill__icon {
    background: linear-gradient(135deg, #2DD4BF 0%, #14B8A6 100%);
    color: white;
}
.mc-access-pill--teal:hover {
    background: rgba(45, 212, 191, 0.1);
    box-shadow: 0 4px 20px rgba(45, 212, 191, 0.25);
}

/* Indigo variant */
.mc-access-pill--indigo .mc-access-pill__icon {
    background: linear-gradient(135deg, #818CF8 0%, #6366F1 100%);
    color: white;
}
.mc-access-pill--indigo:hover {
    background: rgba(129, 140, 248, 0.1);
    box-shadow: 0 4px 20px rgba(129, 140, 248, 0.25);
}

/* ===== STAGGERED ENTRANCE ANIMATION ===== */
@keyframes mc-pill-entrance {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mc-access-pill {
    animation: mc-pill-entrance 0.4s var(--mc-ease-premium) both;
}

.mc-access-pill:nth-child(1) { animation-delay: 0ms; }
.mc-access-pill:nth-child(2) { animation-delay: 50ms; }
.mc-access-pill:nth-child(3) { animation-delay: 100ms; }
.mc-access-pill:nth-child(4) { animation-delay: 150ms; }
.mc-access-pill:nth-child(5) { animation-delay: 200ms; }
.mc-access-pill:nth-child(6) { animation-delay: 250ms; }

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 767px) {
    .mc-quick-access__pills {
        gap: var(--mc-space-2);
    }

    .mc-access-pill {
        padding: var(--mc-space-2);
        flex: 1 1 calc(50% - var(--mc-space-2));
        justify-content: center;
    }

    .mc-access-pill__arrow {
        display: none;
    }
}

@media (max-width: 480px) {
    .mc-access-pill {
        flex: 1 1 100%;
    }
}

/* ===== LEGACY COMPACT MODE (preserved for backwards compatibility) ===== */
.mc-quick-access--compact {
    padding: var(--mc-space-4);
}

.mc-quick-access__view-all {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-1);
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-secondary);
    text-decoration: none;
    transition: color 150ms ease;
}

.mc-quick-access__view-all:hover {
    color: var(--mc-accent-analytics, var(--mc-primary));
}

.mc-quick-access__grid--compact {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--mc-space-3);
}

@media (max-width: 1279px) {
    .mc-quick-access__grid--compact {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 639px) {
    .mc-quick-access__grid--compact {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Shortcut Tile - Icon-only with hover label (legacy) */
.mc-shortcut-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    background: var(--mc-tile-default, #151A20);
    border: 1px solid var(--mc-tile-border, rgba(255, 255, 255, 0.03));
    border-radius: var(--mc-radius-lg);
    color: var(--mc-text-secondary);
    text-decoration: none;
    transition: all 200ms var(--mc-ease-premium);
    cursor: pointer;
}

.mc-shortcut-tile .material-symbols-rounded {
    font-size: 24px;
    transition: transform 150ms ease, color 150ms ease;
}

.mc-shortcut-tile:hover {
    background: var(--mc-tile-hover, #1B222A);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.mc-shortcut-tile:hover .material-symbols-rounded {
    color: var(--mc-text-primary);
    transform: scale(1.1);
}

/* Hover label - appears below tile on hover */
.mc-shortcut-tile::after {
    content: attr(data-label);
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    padding: 4px 8px;
    background: var(--mc-bg-primary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-sm);
    font-size: var(--mc-text-xs);
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-primary);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease, transform 150ms ease;
    z-index: 10;
}

.mc-shortcut-tile:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Light theme adjustments */
:root .mc-shortcut-tile {
    background: var(--mc-bg-secondary);
    border-color: var(--mc-border);
}

:root .mc-shortcut-tile:hover {
    background: var(--mc-bg-tertiary);
}

/* ==========================================================================
   CAPABILITY ROWS - Compact category navigation
   Dec 2025: Replaces Feature Categories grid with cleaner row layout
   ========================================================================== */
.mc-capability-list {
    display: flex;
    flex-direction: column;
    background: var(--mc-row-bg, var(--mc-bg-secondary));
    border-radius: var(--mc-radius-lg);
    overflow: hidden;
}

.mc-capability-row {
    display: flex;
    align-items: center;
    gap: var(--mc-space-4);
    padding: var(--mc-space-4) var(--mc-space-5);
    text-decoration: none;
    transition: background-color 150ms ease;
}

.mc-capability-row:not(:last-child) {
    border-bottom: 1px solid var(--mc-row-divider, rgba(255, 255, 255, 0.04));
}

.mc-capability-row:hover {
    background: var(--mc-bg-hover);
}

.mc-capability-row__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--mc-radius-md);
    background: var(--mc-primary-light);
    color: var(--mc-primary);
    flex-shrink: 0;
}

.mc-capability-row__icon--success {
    background: var(--mc-success-light);
    color: var(--mc-success);
}

.mc-capability-row__icon--warning {
    background: var(--mc-warning-light);
    color: var(--mc-warning);
}

.mc-capability-row__icon--danger {
    background: var(--mc-danger-light);
    color: var(--mc-danger);
}

.mc-capability-row__icon--info {
    background: var(--mc-info-light);
    color: var(--mc-info);
}

.mc-capability-row__icon .material-symbols-rounded {
    font-size: 20px;
}

.mc-capability-row__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mc-capability-row__title {
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-primary);
}

.mc-capability-row__desc {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-tertiary);
}

.mc-capability-row__action {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-1);
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-tertiary);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 150ms ease, transform 150ms ease, color 150ms ease;
}

.mc-capability-row:hover .mc-capability-row__action {
    opacity: 1;
    transform: translateX(0);
    color: var(--mc-accent-analytics, var(--mc-primary));
}

.mc-capability-row__action .material-symbols-rounded {
    font-size: 16px;
}

/* Light theme */
:root .mc-capability-list {
    background: var(--mc-bg-primary);
    border: 1px solid var(--mc-border);
}

:root .mc-capability-row:not(:last-child) {
    border-bottom-color: var(--mc-border);
}

/* ==========================================================================
   SECTION TITLE ENHANCEMENT
   ========================================================================== */
.mc-dashboard__section {
    margin-bottom: var(--mc-space-4);
}

.mc-dashboard__section-title {
    font-size: var(--mc-text-lg);
    font-weight: var(--mc-font-bold);
    color: var(--mc-text-primary);
    letter-spacing: -0.01em;
    margin: 0 0 var(--mc-space-3);
}

.mc-dashboard__section-subtitle {
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
    margin-top: var(--mc-space-1);
}

/* Section title - uppercase variant (Premium typography) */
.mc-dashboard__section-title--caps {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--mc-text-xs);
    font-weight: var(--mc-font-bold);
    color: var(--mc-text-tertiary);
}

/* Section with spacious margin (48px top) */
.mc-dashboard__section--spacious {
    margin-top: var(--mc-space-8);
}

/* Remove underlines from all dashboard metric/stat links */
.mc-stat-grid a,
.mc-stat-grid a *,
.mc-card a:not(.mc-btn),
.mc-card a:not(.mc-btn) * {
    text-decoration: none !important;
}

/* ==========================================================================
   EMPTY STATE COMPACT
   ========================================================================== */
.mc-empty-state--compact {
    padding: var(--mc-space-6);
}

.mc-empty-state--compact .material-symbols-rounded {
    font-size: 40px;
    color: var(--mc-text-tertiary);
    margin-bottom: var(--mc-space-2);
}

.mc-empty-state--compact p {
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
    margin: 0;
}

/* ==========================================================================
   SLIDEOUT PANEL POLISH
   ========================================================================== */
.mc-slideout__backdrop {
    background: rgba(23, 43, 77, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

[data-theme="dark"] .mc-slideout__backdrop {
    background: rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   SPARKLINE CHARTS - Micro-trend indicators (Premium Feature)
   ========================================================================== */
.mc-kpi-card__sparkline {
    margin-top: var(--mc-space-3);
    margin-bottom: var(--mc-space-2);
    height: 32px;
    width: 100%;
}

.mc-sparkline {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Animated draw-on effect for sparkline */
.mc-sparkline__line {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: mc-sparkline-draw 1.2s var(--mc-ease-premium) forwards;
    animation-delay: 0.3s;
}

.mc-sparkline__area {
    opacity: 0;
    animation: mc-sparkline-fade 0.8s var(--mc-ease-premium) forwards;
    animation-delay: 0.8s;
}

.mc-sparkline__dot {
    opacity: 0;
    transform-origin: center;
    animation: mc-sparkline-dot 0.4s var(--mc-ease-bounce) forwards;
    animation-delay: 1.2s;
}

@keyframes mc-sparkline-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes mc-sparkline-fade {
    to {
        opacity: 1;
    }
}

@keyframes mc-sparkline-dot {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Hover effect - highlight sparkline */
.mc-kpi-card:hover .mc-sparkline__line {
    stroke-width: 2.5;
}

.mc-kpi-card:hover .mc-sparkline__dot {
    r: 4;
    filter: drop-shadow(0 0 4px currentColor);
}

/* ==========================================================================
   KPI VALUE COUNT-UP ANIMATION
   ========================================================================== */
.mc-kpi-card__value {
    /* tabular-nums set by global selector in tokens.css and primary rule above */
}

.mc-kpi-card__value[data-countup] {
    animation: mc-countup-reveal 0.6s var(--mc-ease-premium) forwards;
}

@keyframes mc-countup-reveal {
    0% {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* ==========================================================================
   CHART ANIMATION SYSTEM - Line, Bar, Donut
   ========================================================================== */

/* Line chart draw-on animation */
.mc-chart-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: mc-chart-line-draw 1.5s var(--mc-ease-premium) forwards;
}

@keyframes mc-chart-line-draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Line chart gridlines fade-in */
.mc-chart-grid {
    opacity: 0;
    animation: mc-chart-grid-fade 0.6s ease forwards;
}

@keyframes mc-chart-grid-fade {
    to {
        opacity: 0.1;
    }
}

/* Bar chart rise animation */
.mc-chart-bar {
    transform-origin: bottom center;
    transform: scaleY(0);
    animation: mc-chart-bar-rise 0.6s var(--mc-ease-premium) forwards;
}

/* Staggered bar delays */
.mc-chart-bar:nth-child(1) { animation-delay: 0.1s; }
.mc-chart-bar:nth-child(2) { animation-delay: 0.14s; }
.mc-chart-bar:nth-child(3) { animation-delay: 0.18s; }
.mc-chart-bar:nth-child(4) { animation-delay: 0.22s; }
.mc-chart-bar:nth-child(5) { animation-delay: 0.26s; }
.mc-chart-bar:nth-child(6) { animation-delay: 0.30s; }
.mc-chart-bar:nth-child(7) { animation-delay: 0.34s; }
.mc-chart-bar:nth-child(8) { animation-delay: 0.38s; }
.mc-chart-bar:nth-child(9) { animation-delay: 0.42s; }
.mc-chart-bar:nth-child(10) { animation-delay: 0.46s; }
.mc-chart-bar:nth-child(11) { animation-delay: 0.50s; }
.mc-chart-bar:nth-child(12) { animation-delay: 0.54s; }

@keyframes mc-chart-bar-rise {
    to {
        transform: scaleY(1);
    }
}

/* Donut/radial chart sweep animation */
.mc-chart-donut {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: mc-chart-donut-sweep 1s var(--mc-ease-premium) forwards;
}

@keyframes mc-chart-donut-sweep {
    to {
        stroke-dashoffset: 0;
    }
}

/* Donut segment hover - expand outward */
.mc-chart-donut-segment {
    transition: transform 200ms var(--mc-ease-premium);
    transform-origin: center;
}

.mc-chart-donut-segment:hover {
    transform: scale(1.05);
}

/* Chart point hover expansion */
.mc-chart-point {
    transition: r 200ms var(--mc-ease-premium);
}

.mc-chart-point:hover {
    r: 6;
}

/* ==========================================================================
   DARK THEME CHART ENHANCEMENTS - Cyan Glow & Points on Hover
   Dec 2025: "Less black, more contrast" visual upgrade
   ========================================================================== */
[data-theme="dark"] .mc-chart-line {
    filter: drop-shadow(0 0 6px var(--mc-accent-analytics-glow, rgba(56, 189, 248, 0.25)));
}

[data-theme="dark"] .mc-chart-point {
    opacity: 0;
    transition: opacity 200ms ease, r 200ms ease;
}

[data-theme="dark"] .mc-trend-chart:hover .mc-chart-point,
[data-theme="dark"] .mc-trend-chart__body:hover .mc-chart-point {
    opacity: 1;
}

[data-theme="dark"] .mc-chart-bar {
    filter: drop-shadow(0 0 4px var(--mc-accent-analytics-glow, rgba(56, 189, 248, 0.2)));
}

/* Line hover brightness - data becomes the focus */
[data-theme="dark"] .mc-trend-chart:hover .mc-chart-line {
    stroke-width: 2.5;
    filter: drop-shadow(0 0 8px var(--mc-accent-analytics-glow)) brightness(1.1);
}

/* Tooltip dark theme - same family as graph surface */
[data-theme="dark"] .mc-chart-tooltip {
    background: var(--mc-tooltip-bg, #1C2330);
    border-color: var(--mc-graph-border);
}

/* Bar chart track layer - background for progress bars */
.mc-chart-track rect {
    transition: opacity var(--mc-transition-fast);
}

[data-theme="dark"] .mc-trend-chart:hover .mc-chart-track rect {
    opacity: 0.6;
}

/* ==========================================================================
   ANALYTICS SECTION - Modern Chart Cards (Dec 2025)
   Professional data visualization with metrics, axes, and insights
   ========================================================================== */
.mc-analytics-section {
    margin-bottom: var(--mc-space-4);
}

.mc-analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mc-space-5);
}

@media (max-width: 1023px) {
    .mc-analytics-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Chart Card Container --- */
.mc-chart-card {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-4);
    padding: var(--mc-space-5);
    background: var(--mc-bg-primary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-xl);
    box-shadow: var(--mc-shadow-premium);
    transition: box-shadow 200ms ease, transform 200ms ease;
    /* Entrance animation */
    opacity: 0;
    animation: mc-card-entrance 0.6s var(--mc-ease-premium) forwards;
}

/* Staggered chart card entrance */
.mc-analytics-grid .mc-chart-card:nth-child(1) { animation-delay: 0.1s; }
.mc-analytics-grid .mc-chart-card:nth-child(2) { animation-delay: 0.25s; }

.mc-chart-card:hover {
    box-shadow: var(--mc-shadow-premium-hover);
    transform: translateY(-2px);
}

/* --- Header --- */
.mc-chart-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--mc-space-4);
}

.mc-chart-card__title-group {
    display: flex;
    align-items: flex-start;
    gap: var(--mc-space-3);
}

.mc-chart-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--mc-radius-md);
    background: var(--mc-primary-light);
    color: var(--mc-primary);
    font-size: 20px;
    flex-shrink: 0;
}

.mc-chart-card__icon--success {
    background: var(--mc-success-light);
    color: var(--mc-success);
}

.mc-chart-card__titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mc-chart-card__title {
    font-size: var(--mc-text-base);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-primary);
    margin: 0;
    line-height: 1.3;
}

.mc-chart-card__subtitle {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-tertiary);
}

.mc-chart-card__period {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-1);
    font-size: var(--mc-text-xs);
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-secondary);
    background: var(--mc-bg-secondary);
    padding: var(--mc-space-1) var(--mc-space-2);
    border-radius: var(--mc-radius-sm);
}

.mc-chart-card__period .material-symbols-rounded {
    font-size: 14px;
    opacity: 0.7;
}

/* --- Metrics Row --- */
.mc-chart-card__metrics {
    display: flex;
    align-items: stretch;
    gap: var(--mc-space-3);
    flex-wrap: wrap;
}

.mc-metric-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--mc-space-2) var(--mc-space-3);
    background: var(--mc-bg-secondary);
    border-radius: var(--mc-radius-md);
    min-width: 70px;
    /* Entrance animation */
    opacity: 0;
    transform: translateY(10px);
    animation: mc-metric-fade-up 0.5s var(--mc-ease-premium) forwards;
}

/* Staggered metric pill animation delays */
.mc-chart-card__metrics .mc-metric-pill:nth-child(1) { animation-delay: 0.1s; }
.mc-chart-card__metrics .mc-metric-pill:nth-child(2) { animation-delay: 0.2s; }
.mc-chart-card__metrics .mc-metric-pill:nth-child(3) { animation-delay: 0.3s; }
.mc-chart-card__metrics .mc-metric-pill:nth-child(4) { animation-delay: 0.4s; }

.mc-metric-pill--hero {
    background: var(--mc-primary-light);
    padding: var(--mc-space-2) var(--mc-space-4);
}

.mc-metric-pill--hero .mc-metric-pill__value {
    font-size: var(--mc-text-2xl);
    color: var(--mc-primary);
}

.mc-metric-pill__value {
    font-size: var(--mc-text-lg);
    font-weight: var(--mc-font-bold);
    color: var(--mc-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.mc-metric-pill__value--success { color: var(--mc-success); }
.mc-metric-pill__value--warning { color: var(--mc-warning); }
.mc-metric-pill__value--danger { color: var(--mc-danger); }

.mc-metric-pill__label {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.mc-metric-pill--trend {
    flex-direction: row;
    gap: var(--mc-space-1);
    padding: var(--mc-space-2);
    margin-left: auto;
}

.mc-metric-pill--trend .material-symbols-rounded {
    font-size: 18px;
}

.mc-metric-pill--trend-up {
    background: var(--mc-success-light);
    color: var(--mc-success);
}

.mc-metric-pill--trend-up .mc-metric-pill__value {
    color: var(--mc-success);
    font-size: var(--mc-text-sm);
}

.mc-metric-pill--trend-down {
    background: var(--mc-danger-light);
    color: var(--mc-danger);
}

/* --- Chart Canvas (Y-Axis + Chart + X-Axis) --- */
.mc-chart-card__canvas {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: 1fr auto;
    gap: var(--mc-space-2);
}

.mc-chart-yaxis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding-right: var(--mc-space-2);
    font-size: 10px;
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-tertiary);
    font-variant-numeric: tabular-nums;
}

.mc-chart-area {
    position: relative;
    height: 160px; /* Taller for better proportions */
    background: var(--mc-graph-bg, var(--mc-bg-secondary));
    border: 1px solid var(--mc-graph-border, var(--mc-border));
    border-radius: var(--mc-radius-md);
    overflow: hidden;
}

.mc-chart-area svg {
    position: absolute;
    inset: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
}

.mc-chart-xaxis {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
    font-size: 10px;
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-tertiary);
}

.mc-chart-xaxis--8 {
    justify-content: space-around;
}

.mc-chart-xaxis__today {
    color: var(--mc-primary);
    font-weight: var(--mc-font-semibold);
}

/* ==========================================================================
   CHART ENTRANCE ANIMATIONS (Dec 2025)
   Professional, subtle animations for data visualization
   ========================================================================== */

/* --- Line Chart Path Drawing Animation --- */
@keyframes mc-line-draw {
    0% {
        stroke-dashoffset: 500;
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* --- Area Fill Fade In --- */
@keyframes mc-area-reveal {
    0% {
        opacity: 0;
        transform: scaleY(0);
        transform-origin: bottom;
    }
    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}

/* --- Data Points Pop In --- */
@keyframes mc-point-pop {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    60% {
        transform: scale(1.3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- Bar Chart Fade In (SVG-compatible) --- */
@keyframes mc-bar-grow {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* --- Metrics Fade Up --- */
@keyframes mc-metric-fade-up {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Card Entrance --- */
@keyframes mc-card-entrance {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Pulse Glow for Current Data Point --- */
@keyframes mc-point-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 4px var(--mc-accent-analytics, #38BDF8));
    }
    50% {
        filter: drop-shadow(0 0 12px var(--mc-accent-analytics, #38BDF8));
    }
}

/* --- Line Chart Specific --- */
.mc-line-chart__line {
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 4px rgba(56, 189, 248, 0.2));
    transition: stroke-width 250ms ease, filter 250ms ease;
}

.mc-chart-card:hover .mc-line-chart__line {
    stroke-width: 3;
    filter: drop-shadow(0 3px 8px rgba(56, 189, 248, 0.4));
}

/* Area fill - visible by default with subtle gradient */
.mc-line-chart path[fill^="url"] {
    opacity: 1;
    transition: opacity 300ms ease;
}

.mc-chart-card:hover .mc-line-chart path[fill^="url"] {
    opacity: 1;
}

/* Data points - HIDDEN by default, VISIBLE on hover (premium UX) */
.mc-line-chart__point {
    fill: var(--mc-bg-primary);
    stroke: var(--mc-accent-analytics, #38BDF8);
    stroke-width: 2;
    opacity: 0;
    transition: opacity 150ms ease, r 150ms ease;
    cursor: pointer;
}

/* Show all points on chart area hover */
.mc-chart-area:hover .mc-line-chart__point {
    opacity: 1;
}

/* Point hover state - subtle enlarge */
.mc-line-chart__point:hover {
    r: 6;
    filter: drop-shadow(0 0 6px var(--mc-accent-analytics-glow, rgba(56, 189, 248, 0.4)));
}

/* Today point - ALWAYS visible with pulse animation */
.mc-line-chart__point--today {
    opacity: 1 !important;
    fill: var(--mc-accent-analytics, #38BDF8);
    stroke: var(--mc-bg-primary);
    animation: mc-point-pulse 2s ease-in-out infinite;
}

/* =============================================================================
   EXECUTIVE SIGNAL CHART - Calm, confident, restrained
   Principle: The line IS the story. Everything else supports it.
   ============================================================================= */

.mc-chart-area--signal {
    background: var(--mc-bg-secondary, #1E293B);
    border: 1px solid var(--mc-border, rgba(255, 255, 255, 0.06));
    border-radius: var(--mc-radius-md, 8px);
    overflow: hidden;
}

.mc-signal-chart {
    display: block;
}

/* The signal line - medium weight, softened color, no effects */
.mc-signal-chart__line {
    transition: stroke-width 200ms ease;
}

.mc-chart-card:hover .mc-signal-chart__line {
    stroke-width: 3;
}

/* Y-axis for signal charts - 3 ticks, muted */
.mc-chart-yaxis--signal {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 10px;
    font-weight: 500;
    color: var(--mc-text-quaternary, rgba(148, 163, 184, 0.6));
    letter-spacing: 0.02em;
}

/* X-axis minimal - abbreviated days */
.mc-chart-xaxis--minimal {
    font-size: 10px;
    color: var(--mc-text-quaternary, rgba(148, 163, 184, 0.5));
    letter-spacing: 0.05em;
}

.mc-chart-xaxis--minimal .mc-chart-xaxis__today {
    color: var(--mc-text-secondary);
    font-weight: 500;
}

/* Legacy support: old circle selectors without class */
.mc-line-chart__points circle:not([class]) {
    opacity: 0;
    transition: opacity 150ms ease;
}
.mc-chart-area:hover .mc-line-chart__points circle:not([class]) {
    opacity: 1;
}

/* --- Bar Chart Specific --- */
.mc-bar-chart__bar {
    transition: filter 200ms ease;
    opacity: 0;
    animation: mc-bar-grow 0.5s var(--mc-ease-premium) forwards;
}

/* Staggered bar animation delays */
.mc-bar-chart__bar:nth-of-type(1) { animation-delay: 0.2s; }
.mc-bar-chart__bar:nth-of-type(2) { animation-delay: 0.28s; }
.mc-bar-chart__bar:nth-of-type(3) { animation-delay: 0.36s; }
.mc-bar-chart__bar:nth-of-type(4) { animation-delay: 0.44s; }
.mc-bar-chart__bar:nth-of-type(5) { animation-delay: 0.52s; }
.mc-bar-chart__bar:nth-of-type(6) { animation-delay: 0.60s; }
.mc-bar-chart__bar:nth-of-type(7) { animation-delay: 0.68s; }
.mc-bar-chart__bar:nth-of-type(8) { animation-delay: 0.76s; }

.mc-chart-card:hover .mc-bar-chart__bar {
    filter: drop-shadow(0 0 8px rgba(0, 135, 90, 0.3));
}

.mc-bar-chart__bar--current {
    filter: drop-shadow(0 0 8px rgba(0, 135, 90, 0.4));
    animation: mc-bar-grow 0.5s var(--mc-ease-premium) forwards,
               mc-bar-pulse 2s ease-in-out 1s infinite;
}

/* Pulsing glow for current bar */
@keyframes mc-bar-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(0, 135, 90, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(0, 135, 90, 0.6));
    }
}

/* --- Y-Axis Minimal Style (only min/max labels) --- */
.mc-chart-yaxis--minimal {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding-right: var(--mc-space-2);
    font-size: 9px;
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-tertiary);
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

/* --- Crosshair - Vertical guide on hover --- */
.mc-chart-crosshair {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--mc-accent-analytics, #38BDF8);
    opacity: 0;
    pointer-events: none;
    transition: opacity 100ms ease, left 50ms ease;
    z-index: 5;
}

.mc-chart-crosshair--active {
    opacity: 0.4;
}

/* --- Today Vertical Marker --- */
.mc-chart__today-marker line {
    pointer-events: none;
}

.mc-chart-card:hover .mc-chart__today-marker line {
    opacity: 0.4;
    transition: opacity 200ms ease;
}

/* --- Premium Chart Tooltip --- */
.mc-chart-tooltip {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--mc-space-2) var(--mc-space-3);
    background: var(--mc-bg-primary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    box-shadow: var(--mc-shadow-dropdown);
    font-size: var(--mc-text-xs);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 150ms ease, transform 150ms ease;
    z-index: var(--mc-z-tooltip, 9999);
    min-width: 80px;
}

.mc-chart-tooltip--visible {
    opacity: 1;
    transform: translateY(0);
}

.mc-chart-tooltip__header {
    display: flex;
    align-items: baseline;
    gap: var(--mc-space-1);
}

.mc-chart-tooltip__value {
    font-size: var(--mc-text-base);
    font-weight: var(--mc-font-bold);
    color: var(--mc-text-primary);
    font-variant-numeric: tabular-nums;
}

.mc-chart-tooltip__unit {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-tertiary);
}

.mc-chart-tooltip__day {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-secondary);
}

.mc-chart-tooltip__delta {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    margin-top: 2px;
}

.mc-chart-tooltip__delta--up {
    color: var(--mc-success);
}

.mc-chart-tooltip__delta--down {
    color: var(--mc-danger);
}

/* Tooltip arrow */
.mc-chart-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--mc-bg-primary);
}

/* ============================================
   Bar Chart Animations (Premium SaaS Quality)
   ============================================ */

/* Bar pulse for Today/current bar */
@keyframes mc-bar-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 0 transparent);
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(0, 200, 120, 0.6));
    }
}

/* Base bar styles - LIGHT GREEN, visible by default */
.mc-bar-chart__bar {
    fill: rgba(0, 180, 100, 0.7) !important; /* Light green - ensures visibility */
    opacity: 1 !important;
    transform-origin: bottom center;
    transform-box: fill-box;
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 250ms ease,
                fill 250ms ease;
    cursor: pointer;
}

/* Hover effect - POP UP with smooth elastic animation */
.mc-bar-chart__bar:hover {
    fill: rgba(0, 200, 120, 0.9) !important; /* Brighter green on hover */
    transform: scaleY(1.08) scaleX(1.05);
    filter: drop-shadow(0 4px 12px rgba(0, 180, 100, 0.5));
}

/* Dim other bars when one is hovered - focus effect */
.mc-bar-chart__bars:hover .mc-bar-chart__bar:not(:hover) {
    opacity: 0.4 !important;
    fill: rgba(0, 150, 80, 0.5) !important;
}

/* Today/Current bar - brighter with pulse animation */
.mc-bar-chart__bar--current {
    fill: rgba(0, 220, 130, 0.9) !important;
    animation: mc-bar-pulse 2s ease-in-out infinite;
}

/* Ensure current bar stays bright when others dim */
.mc-bar-chart__bars:hover .mc-bar-chart__bar--current:not(:hover) {
    opacity: 0.7 !important;
}

/* --- Footer --- */
.mc-chart-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--mc-space-3);
    border-top: 1px solid var(--mc-border);
}

.mc-chart-card__insight {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-2);
    font-size: var(--mc-text-xs);
    color: var(--mc-text-secondary);
}

.mc-chart-card__insight .material-symbols-rounded {
    font-size: 16px;
    color: var(--mc-warning);
}

.mc-chart-card__legend {
    display: flex;
    align-items: center;
    gap: var(--mc-space-4);
}

.mc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-2);
    font-size: var(--mc-text-xs);
    color: var(--mc-text-secondary);
}

.mc-legend-item__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mc-text-tertiary);
}

.mc-legend-item__dot--success {
    background: var(--mc-success);
}

.mc-legend-item__line {
    width: 16px;
    height: 2px;
    background: var(--mc-success);
    border-radius: 1px;
}

.mc-chart-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-1);
    font-size: var(--mc-text-xs);
    font-weight: var(--mc-font-medium);
    color: var(--mc-primary);
    text-decoration: none;
    transition: gap 200ms ease;
}

.mc-chart-card__link:hover {
    gap: var(--mc-space-2);
}

.mc-chart-card__link .material-symbols-rounded {
    font-size: 14px;
    transition: transform 200ms ease;
}

.mc-chart-card__link:hover .material-symbols-rounded {
    transform: translateX(2px);
}

/* --- Dark Theme --- */
[data-theme="dark"] .mc-chart-card {
    background: var(--mc-graph-bg, #151A20);
    border-color: var(--mc-graph-border, rgba(255, 255, 255, 0.05));
}

[data-theme="dark"] .mc-chart-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .mc-metric-pill {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .mc-metric-pill--hero {
    background: rgba(56, 189, 248, 0.1);
}

[data-theme="dark"] .mc-metric-pill--hero .mc-metric-pill__value {
    color: var(--mc-accent-analytics, #38BDF8);
}

[data-theme="dark"] .mc-chart-card__period {
    background: rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   TREND ROWS - Legacy Support (Deprecated Dec 2025)
   ========================================================================== */
.mc-trend-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mc-space-5);
    padding: var(--mc-space-5);
    background: var(--mc-bg-primary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-xl);
    box-shadow: var(--mc-shadow-premium);
    margin-bottom: var(--mc-space-5);
}

@media (max-width: 1023px) {
    .mc-trend-row {
        grid-template-columns: 1fr;
    }
}

.mc-trend-chart {
    position: relative;
    min-height: 160px;
}

.mc-trend-chart__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--mc-space-3);
}

.mc-trend-chart__title {
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-primary);
    margin: 0;
}

.mc-trend-chart__badge {
    font-size: var(--mc-text-xs);
    font-weight: var(--mc-font-medium);
    padding: 2px 8px;
    border-radius: var(--mc-radius-full);
    background: var(--mc-bg-tertiary);
    color: var(--mc-text-secondary);
}

.mc-trend-chart__body {
    position: relative;
    height: 120px;
    background: var(--mc-graph-bg, var(--mc-bg-secondary));
    border: 1px solid var(--mc-graph-border, var(--mc-border));
    border-radius: var(--mc-radius-lg);
    overflow: hidden;
    padding: var(--mc-space-2);
}

/* Trend chart placeholder with gradient */
.mc-trend-chart__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mc-text-tertiary);
    font-size: var(--mc-text-sm);
    background: linear-gradient(135deg, var(--mc-bg-secondary) 0%, var(--mc-bg-tertiary) 100%);
}

/* ==========================================================================
   REFINED COLOR DISCIPLINE - Tighter Contrast
   ========================================================================== */

/* Inner stroke for cards - subtle depth */
.mc-card,
.mc-kpi-card,
.mc-feature-card,
.mc-shortcut-card,
.mc-quick-access {
    box-shadow:
        var(--mc-shadow-premium),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.mc-card:hover,
.mc-kpi-card:hover,
.mc-feature-card:hover {
    box-shadow:
        var(--mc-shadow-premium-hover),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Dark mode - enhanced inner stroke visibility */
[data-theme="dark"] .mc-card,
[data-theme="dark"] .mc-kpi-card,
[data-theme="dark"] .mc-feature-card,
[data-theme="dark"] .mc-shortcut-card,
[data-theme="dark"] .mc-quick-access {
    box-shadow:
        var(--mc-shadow-premium),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .mc-card:hover,
[data-theme="dark"] .mc-kpi-card:hover,
[data-theme="dark"] .mc-feature-card:hover {
    box-shadow:
        var(--mc-shadow-premium-hover),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   ALERT PULSE ANIMATION - Critical Item Attention
   ========================================================================== */
.mc-alert-item--critical {
    animation: mc-alert-pulse 3s ease-in-out infinite;
}

@keyframes mc-alert-pulse {
    0%, 100% {
        background-color: var(--mc-danger-light);
        box-shadow: 0 0 0 0 rgba(222, 53, 11, 0);
    }
    50% {
        background-color: var(--mc-danger-light);
        box-shadow: 0 0 0 4px rgba(222, 53, 11, 0.1);
    }
}

/* Reduced motion - disable pulse */
@media (prefers-reduced-motion: reduce) {
    .mc-alert-item--critical {
        animation: none;
    }
}

/* ==========================================================================
   SKELETON LOADING - Refined Shimmer Effect
   ========================================================================== */
.mc-skeleton--shimmer {
    background: linear-gradient(
        90deg,
        var(--mc-bg-tertiary) 0%,
        var(--mc-bg-secondary) 20%,
        var(--mc-bg-tertiary) 40%,
        var(--mc-bg-tertiary) 100%
    );
    background-size: 200% 100%;
    animation: mc-skeleton-shimmer 1.5s linear infinite;
}

@keyframes mc-skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Skeleton for KPI sparkline area */
.mc-skeleton--sparkline {
    height: 32px;
    width: 100%;
    border-radius: var(--mc-radius-sm);
    margin-top: var(--mc-space-3);
}

/* ==========================================================================
   SIDEBAR POLISH - Width Animation (Icons visible first, then labels)
   ========================================================================== */
.mc-sidebar {
    will-change: width;
    transition: width 250ms var(--mc-ease-premium);
}

.mc-sidebar--collapsed .mc-sidebar__link span:not(.material-symbols-rounded) {
    opacity: 0;
    transition: opacity 100ms ease;
}

.mc-sidebar:not(.mc-sidebar--collapsed) .mc-sidebar__link span:not(.material-symbols-rounded) {
    opacity: 1;
    transition: opacity 200ms ease 100ms;
}

/* ==========================================================================
   MICRO-INTERACTIONS - Refined Press & Scale
   ========================================================================== */

/* Card link arrow animation */
.mc-kpi-card__link .material-symbols-rounded,
.mc-feature-card .material-symbols-rounded.arrow {
    transition: transform 200ms var(--mc-ease-premium);
}

.mc-kpi-card:hover .mc-kpi-card__link .material-symbols-rounded {
    transform: translateX(4px);
}

/* ==========================================================================
   ENHANCED SECTION HEADERS - Bold & Intentional
   ========================================================================== */
.mc-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--mc-space-5);
    padding-bottom: var(--mc-space-3);
    border-bottom: 1px solid var(--mc-border);
}

.mc-section-header__title {
    font-size: var(--mc-text-xl);
    font-weight: var(--mc-font-bold);
    color: var(--mc-text-primary);
    letter-spacing: var(--mc-tracking-tight);
    margin: 0;
}

.mc-section-header__subtitle {
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
    margin-top: var(--mc-space-1);
}

.mc-section-header__actions {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
}

/* ==========================================================================
   INLINE METRIC - Compact Stats for Trend Rows
   ========================================================================== */
.mc-inline-metric {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    padding: var(--mc-space-2) var(--mc-space-3);
    background: var(--mc-bg-secondary);
    border-radius: var(--mc-radius-md);
}

.mc-inline-metric__value {
    font-size: var(--mc-text-lg);
    font-weight: var(--mc-font-bold);
    color: var(--mc-text-primary);
    font-variant-numeric: tabular-nums;
}

.mc-inline-metric__label {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-secondary);
}

.mc-inline-metric--positive {
    border-left: 3px solid var(--mc-success);
}

.mc-inline-metric--negative {
    border-left: 3px solid var(--mc-danger);
}

.mc-inline-metric--neutral {
    border-left: 3px solid var(--mc-text-tertiary);
}

/* ==========================================================================
   COMMAND CENTER HERO - Dominant Dashboard Section
   Wraps the primary operational narrative (Health Score)
   ========================================================================== */
/* ==========================================================================
   SYSTEM STATUS HEADER (Dec 2025)
   NOT a card. This is the system's verdict - sits ABOVE all metrics.
   Intentionally different from cards to establish hierarchy.
   ========================================================================== */
.mc-hero {
    background: transparent;
    border-radius: 0;
    padding: var(--mc-space-4) 0;
    margin-bottom: var(--mc-space-5);
    border-bottom: 1px solid var(--mc-border);
    box-shadow: none;
}

/* Full-bleed status header - edge to edge */
.mc-hero--full-bleed {
    margin-left: calc(-1 * var(--mc-space-6));
    margin-right: calc(-1 * var(--mc-space-6));
    margin-top: calc(-1 * var(--mc-space-4));
    padding: var(--mc-space-4) var(--mc-space-6);
    border-bottom: 1px solid var(--mc-border);
}

/* Light theme: subtle warm gray background */
.mc-hero--full-bleed {
    background: linear-gradient(180deg, var(--mc-bg-secondary) 0%, var(--mc-bg-page) 100%);
}

/* Dark theme: subtle gradient, not card-like */
[data-theme="dark"] .mc-hero {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .mc-hero--full-bleed {
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
}

.mc-hero__content {
    width: 100%;
}

/* When Health Score is inside hero, remove its margin and shadow */
.mc-hero .mc-health-score {
    margin-bottom: 0;
    box-shadow: none;
    background: transparent;
    border: none;
    padding: 0;
}

/* ==========================================================================
   ATTENTION REQUIRED - Alerts + Activity Combined Section
   Two-column layout for operational context
   ========================================================================== */
.mc-attention-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mc-space-4);
}

.mc-attention-grid__alerts,
.mc-attention-grid__activity {
    background: var(--mc-bg-primary);
    border-radius: var(--mc-radius-lg);
    padding: var(--mc-space-4);
    border: 1px solid var(--mc-border);
}

.mc-attention-grid__heading {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-secondary);
    margin-bottom: var(--mc-space-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mc-attention-grid__heading .material-symbols-rounded {
    font-size: 18px;
    color: var(--mc-text-tertiary);
}

.mc-attention-empty {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    padding: var(--mc-space-4);
    color: var(--mc-text-tertiary);
    font-size: var(--mc-text-sm);
}

.mc-attention-empty .material-symbols-rounded {
    font-size: 20px;
    color: var(--mc-success);
}

@media (max-width: 767px) {
    .mc-attention-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   FOOTER NAVIGATION - Drill-Down Gateways
   Minimal-weight links replacing heavy Capabilities cards
   ========================================================================== */
.mc-dashboard__footer {
    margin-top: var(--mc-space-8);
    padding-top: var(--mc-space-4);
    border-top: 1px solid var(--mc-border);
}

.mc-footer-nav {
    display: flex;
    align-items: center;
    gap: var(--mc-space-4);
    flex-wrap: wrap;
}

.mc-footer-nav__label {
    font-size: var(--mc-text-sm);
    color: var(--mc-text-tertiary);
    font-weight: var(--mc-font-medium);
}

.mc-footer-nav__link {
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
    text-decoration: none;
    padding: var(--mc-space-1) var(--mc-space-2);
    border-radius: var(--mc-radius-sm);
    transition: color var(--mc-transition-fast), background-color var(--mc-transition-fast);
}

.mc-footer-nav__link:hover {
    color: var(--mc-primary);
    background-color: var(--mc-primary-lighter);
}

[data-theme="dark"] .mc-footer-nav__link:hover {
    background-color: var(--mc-primary-light);
}

@media (max-width: 639px) {
    .mc-footer-nav {
        justify-content: center;
        gap: var(--mc-space-2);
    }

    .mc-footer-nav__label {
        width: 100%;
        text-align: center;
        margin-bottom: var(--mc-space-1);
    }
}

/* ==========================================================================
   OPERATIONAL HEALTH SCORE - Primary Narrative Component
   Enterprise command center dominant indicator
   ========================================================================== */
.mc-health-score {
    background: var(--mc-bg-primary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-xl);
    padding: var(--mc-space-5);
    box-shadow: var(--mc-shadow-premium);
    margin-bottom: var(--mc-space-6);
    animation: mc-fade-in-scale 0.4s var(--mc-ease-premium) forwards;
}

.mc-health-score__main {
    display: flex;
    align-items: flex-start;
    gap: var(--mc-space-4);
}

.mc-health-score__indicator {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 4px;
}

.mc-health-score__dot {
    position: absolute;
    inset: 0;
    border-radius: var(--mc-radius-full);
    animation: mc-health-pulse 2s ease-in-out infinite;
}

/* Status indicator colors */
.mc-health-score__indicator--green .mc-health-score__dot {
    background: var(--mc-success);
    box-shadow: 0 0 12px rgba(0, 135, 90, 0.4);
}

.mc-health-score__indicator--amber .mc-health-score__dot {
    background: var(--mc-warning);
    box-shadow: 0 0 12px rgba(255, 139, 0, 0.4);
}

.mc-health-score__indicator--red .mc-health-score__dot {
    background: var(--mc-danger);
    box-shadow: 0 0 12px rgba(222, 53, 11, 0.4);
    animation: mc-health-pulse-critical 1s ease-in-out infinite;
}

.mc-health-score__indicator--gray .mc-health-score__dot {
    background: var(--mc-text-tertiary);
}

@keyframes mc-health-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

@keyframes mc-health-pulse-critical {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

.mc-health-score__content {
    flex: 1;
}

.mc-health-score__header {
    display: flex;
    align-items: baseline;
    gap: var(--mc-space-3);
    flex-wrap: wrap;
}

.mc-health-score__label {
    font-size: var(--mc-text-lg);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-primary);
}

.mc-health-score__value {
    font-size: var(--mc-text-3xl);
    font-weight: var(--mc-font-bold);
    color: var(--mc-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--mc-tracking-tight);
}

.mc-health-score__trend {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-1);
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-medium);
    padding: 2px 8px;
    border-radius: var(--mc-radius-full);
}

.mc-health-score__trend--up {
    color: var(--mc-success);
    background: var(--mc-success-light);
}

.mc-health-score__trend--down {
    color: var(--mc-danger);
    background: var(--mc-danger-light);
}

.mc-health-score__trend .material-symbols-rounded {
    font-size: 16px;
}

/* Progress bar */
.mc-health-score__bar-container {
    margin: var(--mc-space-3) 0;
}

.mc-health-score__bar {
    height: 8px;
    background: var(--mc-bg-tertiary);
    border-radius: var(--mc-radius-full);
    overflow: hidden;
}

.mc-health-score__bar-fill {
    height: 100%;
    border-radius: var(--mc-radius-full);
    transition: width 1s var(--mc-ease-premium);
    animation: mc-bar-grow 1.2s var(--mc-ease-premium) forwards;
}

.mc-health-score__bar-fill--green {
    background: linear-gradient(90deg, var(--mc-success) 0%, #36B37E 100%);
}

.mc-health-score__bar-fill--amber {
    background: linear-gradient(90deg, var(--mc-warning) 0%, #FFAB00 100%);
}

.mc-health-score__bar-fill--red {
    background: linear-gradient(90deg, var(--mc-danger) 0%, #FF5630 100%);
}

.mc-health-score__bar-fill--gray {
    background: var(--mc-text-tertiary);
}

@keyframes mc-bar-grow {
    from { width: 0; }
}

/* Footer with status and freshness */
.mc-health-score__footer {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
}

.mc-health-score__status {
    font-weight: var(--mc-font-medium);
}

.mc-health-score__separator {
    color: var(--mc-text-tertiary);
}

.mc-health-score__freshness {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-1);
    color: var(--mc-text-tertiary);
}

.mc-health-score__freshness--stale {
    color: var(--mc-warning);
}

/* Pillar breakdown grid */
.mc-health-score__pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--mc-space-4);
    margin-top: var(--mc-space-5);
    padding-top: var(--mc-space-5);
    border-top: 1px solid var(--mc-border);
}

@media (max-width: 1023px) {
    .mc-health-score__pillars {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639px) {
    .mc-health-score__pillars {
        grid-template-columns: 1fr;
    }
}

.mc-health-score__pillar {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2);
}

.mc-health-score__pillar-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.mc-health-score__pillar-name {
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-primary);
}

.mc-health-score__pillar-weight {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-tertiary);
}

.mc-health-score__pillar-bar {
    height: 4px;
    background: var(--mc-bg-tertiary);
    border-radius: var(--mc-radius-full);
    overflow: hidden;
}

.mc-health-score__pillar-fill {
    height: 100%;
    border-radius: var(--mc-radius-full);
    transition: width 0.8s var(--mc-ease-premium);
}

.mc-health-score__pillar-fill--green {
    background: var(--mc-success);
}

.mc-health-score__pillar-fill--amber {
    background: var(--mc-warning);
}

.mc-health-score__pillar-fill--red {
    background: var(--mc-danger);
}

.mc-health-score__pillar-score {
    font-size: var(--mc-text-lg);
    font-weight: var(--mc-font-bold);
    color: var(--mc-text-primary);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   OPERATIONAL HEALTH - Status-First Design (Dec 2025)

   Redesigned for clarity: Status → Why → When → Drivers → Action
   Answers "Is my operation healthy?" without requiring mental math.
   ========================================================================== */

/* Primary status display - dominant, interpretable */
.mc-health-score__primary {
    display: flex;
    align-items: flex-start;
    gap: var(--mc-space-4);
    margin-bottom: var(--mc-space-4);
}

.mc-health-score__status-block {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-1);
}

.mc-health-score__status-label {
    font-size: var(--mc-text-2xl);
    font-weight: var(--mc-font-bold);
    line-height: var(--mc-leading-tight);
    letter-spacing: var(--mc-tracking-tight);
}

/* Status label colors by state */
.mc-health-score--green .mc-health-score__status-label {
    color: var(--mc-success);
}

.mc-health-score--amber .mc-health-score__status-label {
    color: var(--mc-warning);
}

.mc-health-score--red .mc-health-score__status-label {
    color: var(--mc-danger);
}

.mc-health-score--gray .mc-health-score__status-label {
    color: var(--mc-text-tertiary);
}

.mc-health-score__title {
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--mc-tracking-wide);
}

/* Context section - why and when */
.mc-health-score__context {
    margin-bottom: var(--mc-space-5);
    padding-bottom: var(--mc-space-4);
    border-bottom: 1px solid var(--mc-border);
}

.mc-health-score__why {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
    margin-bottom: var(--mc-space-2);
}

.mc-health-score__why .material-symbols-rounded {
    font-size: 16px;
    color: var(--mc-text-tertiary);
}

.mc-health-score__why--positive {
    color: var(--mc-success);
}

.mc-health-score__why--positive .material-symbols-rounded {
    color: var(--mc-success);
}

.mc-health-score__when {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-tertiary);
}

/* Health drivers section */
.mc-health-score__drivers {
    margin-top: var(--mc-space-4);
}

.mc-health-score__drivers-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--mc-space-3);
}

.mc-health-score__drivers-title {
    font-size: var(--mc-text-xs);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--mc-tracking-wider);
}

.mc-health-score__weights-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--mc-bg-secondary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    color: var(--mc-text-tertiary);
    cursor: pointer;
    transition: all var(--mc-transition-fast);
}

.mc-health-score__weights-toggle:hover {
    background: var(--mc-bg-hover);
    color: var(--mc-text-secondary);
}

.mc-health-score__weights-toggle .material-symbols-rounded {
    font-size: 16px;
}

/* Driver grid - 4 columns on desktop */
.mc-health-score__driver-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--mc-space-3);
}

@media (max-width: 1023px) {
    .mc-health-score__driver-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639px) {
    .mc-health-score__driver-grid {
        grid-template-columns: 1fr;
    }
}

/* Individual driver item */
.mc-health-score__driver {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2);
    padding: var(--mc-space-3);
    background: var(--mc-bg-secondary);
    border-radius: var(--mc-radius-md);
    border-left: 3px solid transparent;
    transition: background var(--mc-transition-fast);
}

.mc-health-score__driver:hover {
    background: var(--mc-bg-hover);
}

/* Driver border colors by status */
.mc-health-score__driver--green {
    border-left-color: var(--mc-success);
}

.mc-health-score__driver--amber {
    border-left-color: var(--mc-warning);
}

.mc-health-score__driver--red {
    border-left-color: var(--mc-danger);
}

.mc-health-score__driver--gray {
    border-left-color: var(--mc-text-disabled);
}

.mc-health-score__driver-main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--mc-space-2);
}

.mc-health-score__driver-name {
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-primary);
}

/* Status label - the key insight */
.mc-health-score__driver-status {
    font-size: var(--mc-text-xs);
    font-weight: var(--mc-font-semibold);
    padding: 2px 8px;
    border-radius: var(--mc-radius-full);
}

.mc-health-score__driver--green .mc-health-score__driver-status {
    color: var(--mc-success);
    background: var(--mc-success-light);
}

.mc-health-score__driver--amber .mc-health-score__driver-status {
    color: var(--mc-warning);
    background: var(--mc-warning-light);
}

.mc-health-score__driver--red .mc-health-score__driver-status {
    color: var(--mc-danger);
    background: var(--mc-danger-light);
}

.mc-health-score__driver--gray .mc-health-score__driver-status {
    color: var(--mc-text-tertiary);
    background: var(--mc-bg-tertiary);
}

/* Driver progress bar (subordinate to status) */
.mc-health-score__driver-bar {
    height: 3px;
    background: var(--mc-bg-tertiary);
    border-radius: var(--mc-radius-full);
    overflow: hidden;
}

.mc-health-score__driver-fill {
    height: 100%;
    border-radius: var(--mc-radius-full);
    transition: width 0.6s var(--mc-ease-premium);
}

.mc-health-score__driver-fill--green {
    background: var(--mc-success);
}

.mc-health-score__driver-fill--amber {
    background: var(--mc-warning);
}

.mc-health-score__driver-fill--red {
    background: var(--mc-danger);
}

.mc-health-score__driver-fill--gray {
    background: var(--mc-text-disabled);
}

/* Weight display (low emphasis) */
.mc-health-score__driver-weight {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-tertiary);
    text-align: right;
}

/* Actionable next step */
.mc-health-score__action {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    margin-top: var(--mc-space-4);
    padding: var(--mc-space-3) var(--mc-space-4);
    background: var(--mc-primary-light);
    border-radius: var(--mc-radius-md);
    font-size: var(--mc-text-sm);
    color: var(--mc-primary);
    font-weight: var(--mc-font-medium);
}

.mc-health-score__action .material-symbols-rounded {
    font-size: 18px;
}

/* Dark theme adjustments */
[data-theme="dark"] .mc-health-score__driver {
    background: var(--mc-bg-tertiary);
}

[data-theme="dark"] .mc-health-score__driver:hover {
    background: var(--mc-bg-active);
}

[data-theme="dark"] .mc-health-score__action {
    background: rgba(0, 102, 255, 0.15);
}

/* ==========================================================================
   DATA FRESHNESS INDICATOR - Confidence Signals
   ========================================================================== */
.mc-data-freshness {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    padding: var(--mc-space-2) var(--mc-space-3);
    background: var(--mc-bg-secondary);
    border-radius: var(--mc-radius-md);
    font-size: var(--mc-text-xs);
    color: var(--mc-text-secondary);
}

.mc-data-freshness__icon {
    font-size: 14px;
    color: var(--mc-success);
}

.mc-data-freshness--stale .mc-data-freshness__icon {
    color: var(--mc-warning);
    animation: mc-alert-pulse 1.5s ease-in-out infinite;
}

.mc-data-freshness--very-stale {
    background: var(--mc-danger-light);
}

.mc-data-freshness--very-stale .mc-data-freshness__icon {
    color: var(--mc-danger);
}

/* ==========================================================================
   CHART TOOLTIPS - Interactive Data Display
   ========================================================================== */
.mc-chart-tooltip {
    position: absolute;
    padding: var(--mc-space-2) var(--mc-space-3);
    background: var(--mc-bg-primary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    box-shadow: var(--mc-shadow-dropdown);
    font-size: var(--mc-text-sm);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 150ms ease, transform 150ms ease;
    z-index: var(--mc-z-tooltip);
}

.mc-chart-tooltip--visible {
    opacity: 1;
    transform: translateY(0);
}

.mc-chart-tooltip__value {
    font-weight: var(--mc-font-bold);
    color: var(--mc-text-primary);
    font-variant-numeric: tabular-nums;
}

.mc-chart-tooltip__date {
    color: var(--mc-text-secondary);
    margin-left: var(--mc-space-2);
}

/* Tooltip arrow */
.mc-chart-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--mc-bg-primary);
}

/* Interactive chart points */
.mc-chart-point {
    cursor: pointer;
    transition: r 150ms ease, fill 150ms ease;
}

.mc-chart-point:hover {
    r: 6;
    fill: var(--mc-primary);
}

/* ==========================================================================
   OPERATIONAL HEALTH - Modern Radial Design (Dec 2025)
   Status-first architecture with animated ring + radial gauge drivers
   ========================================================================== */

/* --- Container --- */
/* ==========================================================================
   OPERATIONAL HEALTH - System Status Strip (Dec 2025)
   Intentionally NOT a card. This is a diagnostic headline.
   Horizontal layout emphasizes "status at a glance".
   ========================================================================== */
.mc-ops-health {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--mc-space-5);
    padding: 0;
    width: 100%;
    background: transparent;
    border-radius: 0;
    border: none;
}

/* No border accents - status is communicated through ring + label */
.mc-ops-health--green,
.mc-ops-health--amber,
.mc-ops-health--red,
.mc-ops-health--gray {
    border: none;
}

@media (max-width: 1023px) {
    .mc-ops-health {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- Hero Section (Status Ring + Text) --- */
.mc-ops-health__hero {
    display: flex;
    align-items: center;
    gap: var(--mc-space-5);
    flex-wrap: wrap;
}

/* --- Animated Status Ring --- */
.mc-ops-health__status-ring {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.mc-ops-health__ring-glow {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    opacity: 0.4;
    animation: mc-ring-pulse 2.5s ease-in-out infinite;
}

/* Glow colors by status */
.mc-ops-health__status-ring--green .mc-ops-health__ring-glow {
    background: radial-gradient(circle, var(--mc-success) 0%, transparent 70%);
}
.mc-ops-health__status-ring--amber .mc-ops-health__ring-glow {
    background: radial-gradient(circle, var(--mc-warning) 0%, transparent 70%);
}
.mc-ops-health__status-ring--red .mc-ops-health__ring-glow {
    background: radial-gradient(circle, var(--mc-danger) 0%, transparent 70%);
    animation: mc-ring-pulse-urgent 1.5s ease-in-out infinite;
}
.mc-ops-health__status-ring--gray .mc-ops-health__ring-glow {
    background: radial-gradient(circle, var(--mc-text-tertiary) 0%, transparent 70%);
    opacity: 0.2;
}

.mc-ops-health__ring-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mc-bg-secondary);
    border: 3px solid var(--mc-border);
    z-index: 1;
}

/* Ring border color by status */
.mc-ops-health__status-ring--green .mc-ops-health__ring-inner {
    border-color: var(--mc-success);
    background: var(--mc-success-light);
}
.mc-ops-health__status-ring--amber .mc-ops-health__ring-inner {
    border-color: var(--mc-warning);
    background: var(--mc-warning-light);
}
.mc-ops-health__status-ring--red .mc-ops-health__ring-inner {
    border-color: var(--mc-danger);
    background: var(--mc-danger-light);
}
.mc-ops-health__status-ring--gray .mc-ops-health__ring-inner {
    border-color: var(--mc-border-strong);
    background: var(--mc-bg-tertiary);
}

.mc-ops-health__status-icon {
    font-size: 26px;
}

/* Icon colors by status */
.mc-ops-health__status-ring--green .mc-ops-health__status-icon { color: var(--mc-success); }
.mc-ops-health__status-ring--amber .mc-ops-health__status-icon { color: var(--mc-warning); }
.mc-ops-health__status-ring--red .mc-ops-health__status-icon { color: var(--mc-danger); }
.mc-ops-health__status-ring--gray .mc-ops-health__status-icon { color: var(--mc-text-tertiary); }

/* --- Status Text Block --- */
.mc-ops-health__status-text {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-1);
    flex: 1;
    min-width: 200px;
}

.mc-ops-health__status-label {
    font-size: var(--mc-text-2xl);
    font-weight: var(--mc-font-bold);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Label colors by status */
.mc-ops-health__status-label--green { color: var(--mc-success); }
.mc-ops-health__status-label--amber { color: var(--mc-warning); }
.mc-ops-health__status-label--red { color: var(--mc-danger); }
.mc-ops-health__status-label--gray { color: var(--mc-text-tertiary); }

.mc-ops-health__title {
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Context/Explanation --- */
.mc-ops-health__context {
    margin-top: var(--mc-space-2);
}

.mc-ops-health__context-text {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-2);
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
}

.mc-ops-health__context-text .material-symbols-rounded {
    font-size: 16px;
    color: var(--mc-warning);
}

.mc-ops-health__context-text--positive .material-symbols-rounded {
    color: var(--mc-success);
}

/* --- Meta/Timestamp --- */
.mc-ops-health__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--mc-space-1);
    margin-left: auto;
}

.mc-ops-health__freshness {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-tertiary);
}

.mc-ops-health__period {
    font-size: var(--mc-text-xs);
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-secondary);
    background: var(--mc-bg-secondary);
    padding: var(--mc-space-1) var(--mc-space-2);
    border-radius: var(--mc-radius-sm);
}

/* ==========================================================================
   HEALTH DRIVERS - Radial Gauge Cards
   ========================================================================== */
/* --- Health Drivers: Horizontal Mini-Gauges --- */
.mc-ops-health__drivers {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--mc-space-3);
    flex-shrink: 0;
}

@media (max-width: 1023px) {
    .mc-ops-health__drivers {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* --- Individual Gauge: Compact Inline Style --- */
.mc-driver-gauge {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--mc-space-2);
    padding: var(--mc-space-2) var(--mc-space-3);
    background: var(--mc-bg-primary);
    border-radius: var(--mc-radius-full);
    border: 1px solid var(--mc-border);
    position: relative;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.mc-driver-gauge:hover {
    transform: translateY(-2px);
    box-shadow: var(--mc-shadow-card-hover);
}

/* --- Radial Circle Container --- */
.mc-driver-gauge__circle {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.mc-driver-gauge__svg {
    width: 100%;
    height: 100%;
    transform: rotate(0deg);
}

/* Progress arc styling */
.mc-driver-gauge__progress {
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Progress colors by status */
.mc-driver-gauge__progress--green { stroke: var(--mc-success); }
.mc-driver-gauge__progress--amber { stroke: var(--mc-warning); }
.mc-driver-gauge__progress--red { stroke: var(--mc-danger); }
.mc-driver-gauge__progress--gray { stroke: var(--mc-text-tertiary); }

/* --- Center Icon --- */
.mc-driver-gauge__center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-driver-gauge__icon {
    font-size: 14px;
    color: var(--mc-text-secondary);
}

/* Icon colors by status */
.mc-driver-gauge--green .mc-driver-gauge__icon { color: var(--mc-success); }
.mc-driver-gauge--amber .mc-driver-gauge__icon { color: var(--mc-warning); }
.mc-driver-gauge--red .mc-driver-gauge__icon { color: var(--mc-danger); }

/* Hide weight badge in compact mode */
.mc-driver-gauge__weight {
    display: none;
}

/* --- Info Section --- */
.mc-driver-gauge__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    text-align: left;
    line-height: 1.2;
}

.mc-driver-gauge__name {
    font-size: var(--mc-text-xs);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-primary);
}

.mc-driver-gauge__status {
    font-size: 10px;
    font-weight: var(--mc-font-medium);
}

/* Status text colors */
.mc-driver-gauge--green .mc-driver-gauge__status { color: var(--mc-success); }
.mc-driver-gauge--amber .mc-driver-gauge__status { color: var(--mc-warning); }
.mc-driver-gauge--red .mc-driver-gauge__status { color: var(--mc-danger); }
.mc-driver-gauge--gray .mc-driver-gauge__status { color: var(--mc-text-tertiary); }

/* --- Weight Badge --- */
.mc-driver-gauge__weight {
    position: absolute;
    top: var(--mc-space-2);
    right: var(--mc-space-2);
    font-size: var(--mc-text-xs);
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-tertiary);
    background: var(--mc-bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--mc-radius-sm);
}

/* ==========================================================================
   ACTION CTA BUTTON
   ========================================================================== */
.mc-ops-health__cta {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    padding: var(--mc-space-3) var(--mc-space-4);
    background: var(--mc-bg-secondary);
    border-radius: var(--mc-radius-md);
    border: 1px solid var(--mc-border);
    text-decoration: none;
    transition: all 200ms ease;
}

.mc-ops-health__cta:hover {
    background: var(--mc-bg-tertiary);
    border-color: var(--mc-border-strong);
}

.mc-ops-health__cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--mc-radius-md);
    font-size: 18px;
}

/* CTA icon colors by status */
.mc-ops-health__cta--amber .mc-ops-health__cta-icon {
    background: var(--mc-warning-light);
    color: var(--mc-warning);
}
.mc-ops-health__cta--red .mc-ops-health__cta-icon {
    background: var(--mc-danger-light);
    color: var(--mc-danger);
}

.mc-ops-health__cta-text {
    flex: 1;
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-primary);
}

.mc-ops-health__cta-arrow {
    font-size: 20px;
    color: var(--mc-text-tertiary);
    transition: transform 200ms ease, color 200ms ease;
}

.mc-ops-health__cta:hover .mc-ops-health__cta-arrow {
    transform: translateX(4px);
    color: var(--mc-text-secondary);
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes mc-ring-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.6;
    }
}

@keyframes mc-ring-pulse-urgent {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

/* ==========================================================================
   DARK THEME OVERRIDES
   ========================================================================== */
[data-theme="dark"] .mc-ops-health {
    background: var(--mc-graph-bg, #151A20);
    border-color: var(--mc-graph-border, rgba(255, 255, 255, 0.05));
}

[data-theme="dark"] .mc-driver-gauge {
    background: var(--mc-tile-default, #151A20);
    border-color: var(--mc-tile-border, rgba(255, 255, 255, 0.03));
}

[data-theme="dark"] .mc-driver-gauge:hover {
    background: var(--mc-tile-hover, #1B222A);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .mc-ops-health__cta {
    background: var(--mc-tile-default, #151A20);
    border-color: var(--mc-tile-border, rgba(255, 255, 255, 0.03));
}

[data-theme="dark"] .mc-ops-health__cta:hover {
    background: var(--mc-tile-hover, #1B222A);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mc-ops-health__period {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .mc-driver-gauge__weight {
    background: rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   SIDEBAR 3-TIER HIERARCHY (Dec 2025)
   Professional restructure: Primary → Secondary (Collapsible) → System
   ========================================================================== */

/* ----- PRIMARY TIER - Daily Operations ----- */
.mc-sidebar__section--primary {
    padding-bottom: var(--mc-space-2);
}

.mc-sidebar__section--primary .mc-sidebar__menu {
    gap: var(--mc-space-1);
}

.mc-sidebar__section--primary .mc-sidebar__link {
    font-weight: var(--mc-font-medium);
}

/* ----- DIVIDERS ----- */
.mc-sidebar__divider {
    height: 1px;
    background: var(--mc-border);
    margin: var(--mc-space-2) var(--mc-space-3);
    opacity: 0.5;
}

.mc-sidebar__divider--spacer {
    margin-top: auto;
    margin-bottom: var(--mc-space-2);
}

/* ----- COLLAPSIBLE GROUPS ----- */
.mc-sidebar__section--collapsible {
    margin-bottom: var(--mc-space-1);
}

/* Phase 2: Group toggle as module header - elevated from drawer surface */
.mc-sidebar__group-toggle {
    display: flex;
    align-items: center;
    width: calc(100% - var(--mc-space-4));
    padding: var(--mc-space-2) var(--mc-space-3);
    /* Phase 2: Elevated white surface on gray drawer */
    background: var(--mc-bg-primary);
    border: none;
    color: var(--mc-text-primary);           /* Phase 2: Primary text, not secondary */
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-medium);
    cursor: pointer;
    border-radius: var(--mc-radius-sm);
    margin: 0 var(--mc-space-2);
    transition: all var(--mc-transition-fast);
    gap: var(--mc-space-2);
}

.mc-sidebar__group-toggle:hover {
    background: var(--mc-bg-elevated);
    box-shadow: var(--mc-shadow-xs);
}

/* Active group context (when a child route is active) */
.mc-sidebar__group-toggle--active {
    background: var(--mc-bg-elevated);
    box-shadow: var(--mc-shadow-xs);
    border-left: 3px solid var(--mc-primary);
}

.mc-sidebar__group-toggle--active .mc-sidebar__chevron {
    opacity: 0.6;
}

/* Phase 2: Expanded group header - subtle emphasis */
.mc-sidebar__group-toggle[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: var(--mc-shadow-xs);
}

.mc-sidebar__group-toggle .material-symbols-rounded:first-child {
    font-size: 20px;
    opacity: 0.8;
}

.mc-sidebar__group-toggle .mc-sidebar__link-text {
    flex: 1;
    text-align: left;
}

/* Phase 3: Chevrons - always lighter */
.mc-sidebar__chevron {
    font-size: 16px;
    opacity: 0.4;
    font-variation-settings: 'wght' 300;
    transition: transform 150ms ease-out;
}

.mc-rotate-180,
.mc-sidebar__group-toggle[aria-expanded="true"] .mc-sidebar__chevron {
    transform: rotate(180deg);
}

/* ----- SUBMENU - Module Body ----- */
.mc-sidebar__submenu {
    list-style: none;
    padding: var(--mc-space-1) 0;
    margin: 0 var(--mc-space-2) var(--mc-space-2);
    /* Phase 2: Elevated module body - connects with group toggle */
    background: var(--mc-bg-primary);
    border-radius: 0 0 var(--mc-radius-sm) var(--mc-radius-sm);
    box-shadow: var(--mc-shadow-xs);
    overflow: hidden;
    /* Phase 3: Smooth expand/collapse - industrial 150ms */
    transition: height 150ms ease-out, opacity 150ms ease-out;
    /* GPU acceleration for smooth x-collapse animation */
    will-change: height;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Phase 3: Children visually quieter than parents */
.mc-sidebar__link--sub {
    padding: 5px var(--mc-space-4);
    padding-left: var(--mc-space-8);         /* Deeper indent */
    font-size: 13px;                         /* Slightly smaller */
    color: var(--mc-text-tertiary);          /* Quieter color */
    margin: 0;
    border-radius: 0;
}

.mc-sidebar__link--sub:hover {
    background: var(--mc-bg-hover);
    color: var(--mc-text-primary);
}

.mc-sidebar__link--sub:last-child {
    border-radius: 0 0 var(--mc-radius-sm) var(--mc-radius-sm);
}

.mc-sidebar__link--sub.mc-sidebar__link--active {
    color: var(--mc-primary);
    background: var(--mc-primary-light);
}

/* ----- ICON-ONLY MODE (Collapsed Sidebar) ----- */
.mc-sidebar__link--icon-only {
    justify-content: center;
    padding: var(--mc-space-2);
}

.mc-sidebar__link--icon-only .material-symbols-rounded {
    font-size: 20px;
}

/* ----- SYSTEM TIER - Admin (Bottom, Muted) ----- */
.mc-sidebar__section--system {
    margin-top: auto;
    padding-top: var(--mc-space-2);
    border-top: 1px solid var(--mc-border);
}

.mc-sidebar__section-title--muted {
    color: var(--mc-text-tertiary);
    font-size: var(--mc-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

.mc-sidebar__link--muted {
    color: var(--mc-text-tertiary);
    opacity: 0.8;
}

.mc-sidebar__link--muted:hover {
    opacity: 1;
}

.mc-sidebar__link--muted .material-symbols-rounded {
    opacity: 0.7;
}

/* ----- DARK THEME OVERRIDES ----- */
[data-theme="dark"] .mc-sidebar__group-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .mc-sidebar__link--sub:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .mc-sidebar__section--system {
    border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mc-sidebar__divider {
    background: rgba(255, 255, 255, 0.08);
}

/* ----- ALPINE.JS COLLAPSE ANIMATION ----- */
[x-collapse] {
    overflow: hidden !important;
}

[x-collapse].x-collapsing {
    transition: height 200ms ease-out !important;
}

/* ==========================================================================
   PROFESSIONAL DROPDOWN MOTION (Dec 2025)
   "This content was always here — I'm just revealing it."
   
   Principles:
   - Motion is subtle, origin is clear, duration is short
   - Easing is intentional, nothing jumps
   - Fast start, soft landing
   ========================================================================== */

/* ----- PROFESSIONAL EASING CURVES ----- */
:root {
    /* Modern "snappy" ease - fast start, soft landing */
    --mc-ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
    /* Material-style standard ease */
    --mc-ease-material: cubic-bezier(0.4, 0, 0.2, 1);
    /* Quick close (feels responsive) */
    --mc-ease-close: cubic-bezier(0.4, 0, 1, 1);
    
    /* Timing tokens */
    --mc-duration-open: 180ms;
    --mc-duration-close: 140ms;
    --mc-stagger-delay: 16ms;
}

/* ----- SUBMENU CONTAINER TRANSITIONS ----- */
.mc-submenu-enter {
    transition: opacity var(--mc-duration-open) var(--mc-ease-snappy),
                transform var(--mc-duration-open) var(--mc-ease-snappy);
}

.mc-submenu-enter-from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
}

.mc-submenu-enter-to {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.mc-submenu-leave {
    transition: opacity var(--mc-duration-close) var(--mc-ease-close),
                transform var(--mc-duration-close) var(--mc-ease-close);
}

.mc-submenu-leave-from {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.mc-submenu-leave-to {
    opacity: 0;
    transform: translateY(-2px) scale(0.99);
}

/* ----- STAGGERED CHILD REVEAL ----- */
.mc-submenu-item {
    opacity: 0;
    transform: translateX(-6px);
}

/* Parent expanded - trigger stagger animation with slide-in */
.mc-sidebar__submenu:not([style*="display: none"]) .mc-submenu-item {
    animation: mc-submenu-item-reveal 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--i, 0) * 50ms + 80ms);
}

@keyframes mc-submenu-item-reveal {
    0% {
        opacity: 0;
        transform: translateX(-8px);
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ----- CHEVRON SYNC ANIMATION ----- */
.mc-sidebar__chevron {
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center;
}

.mc-rotate-180 {
    transform: rotate(180deg);
}

/* ----- GROUP TOGGLE HOVER/FOCUS AFFORDANCES ----- */
.mc-sidebar__group-toggle {
    position: relative;
    transition: background-color 150ms var(--mc-ease-material),
                color 150ms var(--mc-ease-material);
}

/* Subtle background tint on hover */
.mc-sidebar__group-toggle:hover {
    background: var(--mc-bg-secondary);
    color: var(--mc-text-primary);
}

/* Chevron opacity increase on hover */
.mc-sidebar__group-toggle:hover .mc-sidebar__chevron {
    opacity: 1;
}

/* Focus ring for accessibility */
.mc-sidebar__group-toggle:focus-visible {
    outline: 2px solid var(--mc-primary);
    outline-offset: 2px;
}

/* Pressed state - micro-compression */
.mc-sidebar__group-toggle:active {
    transform: scale(0.98);
    transition: transform 80ms ease;
}

/* ----- SUBMENU ITEM HOVER POLISH ----- */
.mc-sidebar__link--sub {
    transition: background-color 120ms var(--mc-ease-material),
                color 120ms var(--mc-ease-material),
                padding-left 120ms var(--mc-ease-material);
}

.mc-sidebar__link--sub:hover {
    background: var(--mc-bg-secondary);
    color: var(--mc-text-primary);
    padding-left: calc(var(--mc-space-3) + 2px); /* Subtle indent on hover */
}

/* Active state override */
.mc-sidebar__link--sub.mc-sidebar__link--active {
    color: var(--mc-primary);
    background: var(--mc-primary-light);
    font-weight: var(--mc-font-medium);
}

/* ----- DARK THEME REFINEMENTS ----- */
[data-theme="dark"] .mc-sidebar__group-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .mc-sidebar__link--sub:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .mc-sidebar__link--sub.mc-sidebar__link--active {
    background: rgba(var(--mc-primary-rgb, 59, 130, 246), 0.15);
}

/* ----- REDUCED MOTION PREFERENCE ----- */
@media (prefers-reduced-motion: reduce) {
    .mc-submenu-enter,
    .mc-submenu-leave,
    .mc-sidebar__chevron,
    .mc-sidebar__group-toggle,
    .mc-sidebar__link--sub,
    .mc-submenu-item {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   DROPDOWN TRANSITION UTILITIES (Dec 2025)
   Utility classes for Alpine.js x-transition
   ========================================================================== */

/* Transition timing */
.transition {
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.ease-out {
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.duration-200 {
    transition-duration: 200ms;
}

.duration-150 {
    transition-duration: 150ms;
}

/* Opacity states */
.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

/* Transform states */
.-translate-y-1 {
    transform: translateY(-4px);
}

.translate-y-0 {
    transform: translateY(0);
}

.scale-95 {
    transform: scale(0.95);
}

.scale-100 {
    transform: scale(1);
}

/* Combined transforms */
.opacity-0.-translate-y-1.scale-95 {
    opacity: 0;
    transform: translateY(-4px) scale(0.95);
}

.opacity-100.translate-y-0.scale-100 {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ----- STAGGERED ITEM ANIMATION ----- */
.mc-submenu-item {
    animation: mc-fade-slide-in 180ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--i, 0) * 30ms + 60ms);
    opacity: 0;
}

@keyframes mc-fade-slide-in {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Reset animation when parent is hidden */
.mc-sidebar__submenu[style*="display: none"] .mc-submenu-item {
    animation: none;
    opacity: 1;
}

/* ==========================================================================
   INSIGHTS BANNER - Rule-Based Intelligence Display
   Dashboard-level actionable insights with priority-based styling
   ========================================================================== */
.mc-dashboard__insights {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2);
    margin-bottom: var(--mc-space-4);
}

.mc-insight {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    padding: var(--mc-space-3) var(--mc-space-4);
    border-radius: var(--mc-radius-lg);
    background: var(--mc-bg-surface);
    border-left: 4px solid var(--mc-border-default);
    animation: mc-insight-slide-in 300ms ease-out;
}

@keyframes mc-insight-slide-in {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.mc-insight__icon {
    font-size: 20px;
    flex-shrink: 0;
}

.mc-insight__message {
    flex: 1;
    font-size: var(--mc-text-sm);
    color: var(--mc-text-primary);
    font-weight: 500;
}

.mc-insight__action {
    font-size: var(--mc-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--mc-space-1) var(--mc-space-2);
    border-radius: var(--mc-radius-sm);
    text-decoration: none;
    transition: all 150ms ease;
}

/* Critical insight - Red */
.mc-insight--critical {
    background: rgba(239, 68, 68, 0.08);
    border-left-color: var(--mc-color-danger);
}

.mc-insight--critical .mc-insight__icon {
    color: var(--mc-color-danger);
}

.mc-insight--critical .mc-insight__action {
    background: var(--mc-color-danger);
    color: white;
}

.mc-insight--critical .mc-insight__action:hover {
    background: #DC2626;
}

/* Warning insight - Amber */
.mc-insight--warning {
    background: rgba(245, 158, 11, 0.08);
    border-left-color: var(--mc-color-warning);
}

.mc-insight--warning .mc-insight__icon {
    color: var(--mc-color-warning);
}

.mc-insight--warning .mc-insight__action {
    background: var(--mc-color-warning);
    color: #1F2937;
}

.mc-insight--warning .mc-insight__action:hover {
    background: #D97706;
}

/* Success insight - Green */
.mc-insight--success {
    background: rgba(34, 197, 94, 0.08);
    border-left-color: var(--mc-color-success);
}

.mc-insight--success .mc-insight__icon {
    color: var(--mc-color-success);
}

/* Info insight - Blue */
.mc-insight--info {
    background: rgba(59, 130, 246, 0.08);
    border-left-color: var(--mc-color-info);
}

.mc-insight--info .mc-insight__icon {
    color: var(--mc-color-info);
}

.mc-insight--info .mc-insight__action {
    background: var(--mc-color-info);
    color: white;
}

.mc-insight--info .mc-insight__action:hover {
    background: #2563EB;
}

/* ==========================================================================
   RIGHT-SIDE DRAWER COMPONENT

   Maintains context while showing details. Slides in from right.
   Used for alert details, entity previews, quick actions.
   ========================================================================== */
.mc-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: calc(var(--mc-z-modal) - 1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms var(--mc-ease-out), visibility 300ms;
}

.mc-drawer-backdrop[data-open="true"] {
    opacity: 1;
    visibility: visible;
}

.mc-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 90vw;
    height: 100vh;
    background: var(--mc-bg-primary);
    border-left: 1px solid var(--mc-border);
    box-shadow: var(--mc-shadow-xl);
    z-index: var(--mc-z-modal);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 300ms var(--mc-ease-out);
}

.mc-drawer[data-open="true"] {
    transform: translateX(0);
}

/* Drawer Header */
.mc-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mc-space-4) var(--mc-space-5);
    border-bottom: 1px solid var(--mc-border);
    flex-shrink: 0;
}

.mc-drawer__title {
    font-size: var(--mc-text-lg);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
}

.mc-drawer__close {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mc-radius-md);
    background: transparent;
    border: none;
    color: var(--mc-text-tertiary);
    cursor: pointer;
    transition: all var(--mc-transition-fast);
}

.mc-drawer__close:hover {
    background: var(--mc-bg-hover);
    color: var(--mc-text-primary);
}

.mc-drawer__close:focus-visible {
    outline: 2px solid var(--mc-border-focus);
    outline-offset: 2px;
}

/* Drawer Content - Scrollable */
.mc-drawer__content {
    flex: 1;
    overflow-y: auto;
    padding: var(--mc-space-5);
}

/* Drawer Loading State */
.mc-drawer__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mc-space-10);
    color: var(--mc-text-tertiary);
}

.mc-drawer__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--mc-border);
    border-top-color: var(--mc-primary);
    border-radius: var(--mc-radius-full);
    animation: mc-spin 1s linear infinite;
}

@keyframes mc-spin {
    to { transform: rotate(360deg); }
}

/* Drawer Footer - Sticky Actions */
.mc-drawer__footer {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    padding: var(--mc-space-4) var(--mc-space-5);
    border-top: 1px solid var(--mc-border);
    background: var(--mc-bg-secondary);
    flex-shrink: 0;
}

/* Drawer Section */
.mc-drawer__section {
    margin-bottom: var(--mc-space-6);
}

.mc-drawer__section:last-child {
    margin-bottom: 0;
}

.mc-drawer__section-title {
    font-size: var(--mc-text-xs);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--mc-tracking-wider);
    margin-bottom: var(--mc-space-3);
}

/* Drawer Detail Row */
.mc-drawer__detail {
    display: flex;
    justify-content: space-between;
    padding: var(--mc-space-2) 0;
    border-bottom: 1px solid var(--mc-border);
}

.mc-drawer__detail:last-child {
    border-bottom: none;
}

.mc-drawer__detail-label {
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
}

.mc-drawer__detail-value {
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-medium);
    color: var(--mc-text-primary);
}

/* Timeline in Drawer */
.mc-drawer__timeline {
    position: relative;
    padding-left: var(--mc-space-5);
}

.mc-drawer__timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--mc-border);
}

.mc-drawer__timeline-item {
    position: relative;
    padding-bottom: var(--mc-space-4);
}

.mc-drawer__timeline-item:last-child {
    padding-bottom: 0;
}

.mc-drawer__timeline-dot {
    position: absolute;
    left: calc(-1 * var(--mc-space-5) - 1px);
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: var(--mc-radius-full);
    background: var(--mc-bg-primary);
    border: 2px solid var(--mc-primary);
}

.mc-drawer__timeline-time {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-tertiary);
    margin-bottom: var(--mc-space-1);
}

.mc-drawer__timeline-text {
    font-size: var(--mc-text-sm);
    color: var(--mc-text-primary);
}

/* Responsive */
@media (max-width: 480px) {
    .mc-drawer {
        width: 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   SITE WIZARD - Card Grid Layout
   ========================================================================== */

/* Site Card Grid */
.mc-site-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--mc-space-4);
}

/* Site Card */
.mc-site-card {
    background: var(--mc-bg-primary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    padding: var(--mc-space-4);
    transition: all var(--mc-transition-base);
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-4);
}

.mc-site-card:hover {
    box-shadow: var(--mc-shadow-md);
    border-color: var(--mc-border-hover, var(--mc-border));
}

/* Status border variants */
.mc-site-card--not_started {
    border-left: 3px solid var(--mc-info);
}

.mc-site-card--in_progress {
    border-left: 3px solid var(--mc-warning);
}

.mc-site-card--activated {
    border-left: 3px solid var(--mc-success);
}

/* Card Header */
.mc-site-card__header {
    display: flex;
    align-items: flex-start;
    gap: var(--mc-space-3);
}

.mc-site-card__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mc-bg-secondary);
    border-radius: var(--mc-radius-md);
    flex-shrink: 0;
}

.mc-site-card__icon .material-symbols-rounded {
    font-size: 24px;
    color: var(--mc-text-secondary);
}

.mc-site-card__info {
    flex: 1;
    min-width: 0;
}

.mc-site-card__name {
    display: block;
    font-size: var(--mc-text-base);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--mc-transition-fast);
}

.mc-site-card__name:hover {
    color: var(--mc-primary);
}

.mc-site-card__code {
    display: block;
    font-size: var(--mc-text-xs);
    color: var(--mc-text-tertiary);
    font-family: var(--mc-font-mono, monospace);
    margin-top: 2px;
}

/* Progress Section */
.mc-site-card__progress {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2);
}

.mc-site-card__progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mc-site-card__step {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-secondary);
}

.mc-site-card__percent {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-tertiary);
    font-weight: var(--mc-font-medium);
}

/* Card Footer */
.mc-site-card__footer {
    margin-top: auto;
}

/* Filter Toolbar for Site Wizard */
.mc-filter-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mc-space-4);
    padding: var(--mc-space-3) var(--mc-space-4);
    background: var(--mc-bg-secondary);
    border-radius: var(--mc-radius-lg);
    margin: var(--mc-space-6) 0;
}

.mc-filter-toolbar__filters {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
}

.mc-filter-toolbar__filters .mc-select {
    min-width: 160px;
}

.mc-filter-toolbar__meta {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
}

.mc-filter-toolbar__count {
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
}

/* Search Input */
.mc-search-input {
    position: relative;
    display: flex;
    align-items: center;
}

.mc-search-input__icon {
    position: absolute;
    left: 12px;
    color: var(--mc-text-tertiary);
    font-size: 20px;
    pointer-events: none;
}

.mc-search-input .mc-input {
    padding-left: 40px;
    min-width: 240px;
}

/* KPI Card Links */
.mc-kpi-card-link {
    text-decoration: none;
    display: block;
    transition: transform var(--mc-transition-base);
}

.mc-kpi-card-link:hover {
    transform: translateY(-2px);
}

.mc-kpi-card-link:hover .mc-kpi-card {
    box-shadow: var(--mc-shadow-lg);
}

.mc-kpi-card-link--active .mc-kpi-card {
    border-color: var(--mc-primary);
    box-shadow: 0 0 0 1px var(--mc-primary);
}

/* Full-width Button */
.mc-btn--full {
    width: 100%;
    justify-content: center;
}

/* Site Wizard Responsive */
@media (max-width: 768px) {
    .mc-filter-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--mc-space-3);
    }

    .mc-filter-toolbar__filters {
        flex-direction: column;
    }

    .mc-filter-toolbar__filters .mc-select,
    .mc-search-input .mc-input {
        width: 100%;
        min-width: unset;
    }

    .mc-filter-toolbar__meta {
        justify-content: space-between;
    }
}

/* ==========================================================================
   PRD 5.5: SITE READINESS COMPONENTS (Jan 2026)
   ========================================================================== */

/* Radial Progress Chart */
.mc-radial-progress {
    transform: rotate(-90deg);
}

.mc-radial-progress__track {
    fill: none;
    stroke: var(--mc-bg-tertiary);
    stroke-width: 4;
}

.mc-radial-progress__fill {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset var(--mc-transition-base), stroke var(--mc-transition-base);
}

.mc-radial-progress__fill--success { stroke: var(--mc-success); }
.mc-radial-progress__fill--warning { stroke: var(--mc-warning); }
.mc-radial-progress__fill--danger { stroke: var(--mc-danger); }

/* Readiness Score Indicator */
.mc-readiness-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mc-space-2);
}

.mc-readiness-score--warning {
    color: var(--mc-warning);
}

.mc-readiness-score__label {
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
}

.mc-readiness-score__status {
    font-size: var(--mc-text-xs);
    color: var(--mc-danger);
    font-weight: var(--mc-font-medium);
}

/* Readiness Indicator (Compact) */
.mc-readiness-indicator {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    padding: var(--mc-space-2) var(--mc-space-3);
    background: var(--mc-bg-primary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
}

/* ==========================================================================
   PRD 8.6.3: TICKET → WORK ORDER LINKED ITEMS (Jan 2026)
   ========================================================================== */

.mc-linked-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2);
}

.mc-linked-item {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    padding: var(--mc-space-3);
    background: var(--mc-bg-secondary);
    border-radius: var(--mc-radius-md);
    transition: background-color var(--mc-transition-fast);
}

.mc-linked-item:hover {
    background: var(--mc-bg-tertiary);
}

.mc-linked-item__main {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    flex: 1;
}

.mc-linked-item__link {
    font-weight: var(--mc-font-medium);
    color: var(--mc-primary);
    text-decoration: none;
}

.mc-linked-item__link:hover {
    text-decoration: underline;
}

.mc-linked-item__meta {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
}

/* ==========================================================================
   PRD 8.4: VENDOR SCHEDULING COMPONENTS (Jan 2026)
   ========================================================================== */

/* Vendor Chips */
.mc-vendor-suggestions {
    margin-top: var(--mc-space-3);
}

.mc-vendor-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mc-space-2);
    margin-top: var(--mc-space-2);
}

.mc-vendor-chip {
    display: flex;
    flex-direction: column;
    padding: var(--mc-space-2) var(--mc-space-3);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    background: var(--mc-bg-primary);
    cursor: pointer;
    transition: all var(--mc-transition-fast);
}

.mc-vendor-chip:hover {
    border-color: var(--mc-primary);
    background: var(--mc-bg-hover);
}

.mc-vendor-chip--unavailable {
    opacity: 0.5;
    cursor: not-allowed;
}

.mc-vendor-chip__name {
    font-weight: var(--mc-font-medium);
    font-size: var(--mc-text-sm);
}

.mc-vendor-chip__workload,
.mc-vendor-chip__sla {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-secondary);
}

/* Strategy Options (Auto-Assign Modal) */
.mc-strategy-options {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2);
}

.mc-strategy-option {
    display: flex;
    align-items: flex-start;
    gap: var(--mc-space-3);
    padding: var(--mc-space-3);
    border: 2px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    cursor: pointer;
    transition: all var(--mc-transition-fast);
}

.mc-strategy-option:hover {
    background-color: var(--mc-bg-secondary);
}

.mc-strategy-option--selected {
    border-color: var(--mc-primary);
    background-color: var(--mc-bg-primary-subtle);
}

.mc-strategy-option__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--mc-radius-md);
    background-color: var(--mc-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mc-text-secondary);
    flex-shrink: 0;
}

.mc-strategy-option--selected .mc-strategy-option__icon {
    background-color: var(--mc-primary);
    color: white;
}

.mc-strategy-option__content {
    flex: 1;
}

.mc-strategy-option__content strong {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    margin-bottom: var(--mc-space-1);
}

.mc-strategy-option__content p {
    margin: 0;
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
}

/* Vendor Mini List */
.mc-vendor-mini-list {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-1);
}

.mc-vendor-mini {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mc-space-2);
    background-color: var(--mc-bg-secondary);
    border-radius: var(--mc-radius-sm);
    font-size: var(--mc-text-sm);
}

.mc-vendor-mini--unavailable {
    opacity: 0.6;
}

.mc-vendor-mini__name {
    font-weight: var(--mc-font-medium);
}

.mc-vendor-mini__stats {
    color: var(--mc-text-secondary);
}

/* Capacity Meter */
.mc-capacity-meter {
    margin-bottom: var(--mc-space-4);
}

.mc-capacity-meter__bar {
    height: 8px;
    background: var(--mc-bg-tertiary);
    border-radius: var(--mc-radius-full);
    overflow: hidden;
}

.mc-capacity-meter__fill {
    height: 100%;
    background: var(--mc-success);
    transition: width var(--mc-transition-base);
}

.mc-capacity-meter__fill--danger {
    background: var(--mc-danger);
}

.mc-capacity-meter__fill--warning {
    background: var(--mc-warning);
}

.mc-capacity-meter__stats {
    display: flex;
    justify-content: space-between;
    margin-top: var(--mc-space-1);
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
}

.mc-capacity-details {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2);
}

.mc-stat-row {
    display: flex;
    justify-content: space-between;
    padding: var(--mc-space-2) 0;
    border-bottom: 1px solid var(--mc-border-light);
}

.mc-stat-row:last-child {
    border-bottom: none;
}

/* ==========================================================================
   PRD 3.4: UNIVERSAL CONTROLS COMPONENTS (Jan 2026)
   ========================================================================== */

/* Settings Page Layout */
.mc-settings-page {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-5);
}

/* Control Groups */
.mc-control-group {
    border-bottom: 1px solid var(--mc-border-light);
    padding: var(--mc-space-4) 0;
}

.mc-control-group:first-child {
    padding-top: 0;
}

.mc-control-group:last-child {
    border-bottom: none;
}

.mc-control-group h4 {
    font-size: var(--mc-text-base);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-text-primary);
    margin: 0 0 var(--mc-space-3) 0;
}

.mc-control-row {
    display: flex;
    align-items: flex-start;
    gap: var(--mc-space-3);
    margin: var(--mc-space-3) 0;
}

.mc-control-info {
    flex: 1;
}

.mc-control-info strong {
    display: block;
    margin-bottom: var(--mc-space-1);
    font-weight: var(--mc-font-medium);
}

.mc-control-info p {
    margin: 0;
    color: var(--mc-text-secondary);
    font-size: var(--mc-text-sm);
}

/* Toggle Switch */
.mc-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.mc-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mc-toggle__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--mc-bg-tertiary);
    transition: var(--mc-transition-fast);
    border-radius: 12px;
}

.mc-toggle__slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: var(--mc-transition-fast);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.mc-toggle input:checked + .mc-toggle__slider {
    background-color: var(--mc-primary);
}

.mc-toggle input:checked + .mc-toggle__slider::before {
    transform: translateX(20px);
}

.mc-toggle input:focus + .mc-toggle__slider {
    box-shadow: 0 0 0 2px var(--mc-primary-light);
}

.mc-toggle input:disabled + .mc-toggle__slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Radio Cards */
.mc-radio-cards {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2);
}

.mc-radio-card {
    display: flex;
    align-items: flex-start;
    gap: var(--mc-space-3);
    padding: var(--mc-space-4);
    border: 2px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    cursor: pointer;
    transition: all var(--mc-transition-fast);
}

.mc-radio-card:hover {
    background-color: var(--mc-bg-secondary);
}

.mc-radio-card--selected {
    border-color: var(--mc-primary);
    background-color: var(--mc-bg-primary-subtle);
}

.mc-radio-card input[type="radio"] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    accent-color: var(--mc-primary);
}

.mc-radio-card__content {
    flex: 1;
}

.mc-radio-card__content strong {
    display: block;
    margin-bottom: var(--mc-space-1);
}

.mc-radio-card__content p {
    margin: 0;
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
}

/* Override Items */
.mc-override-list {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2);
    margin: var(--mc-space-3) 0;
}

.mc-override-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mc-space-3);
    background: var(--mc-bg-secondary);
    border-radius: var(--mc-radius-md);
}

.mc-override-item__name {
    font-weight: var(--mc-font-medium);
}

.mc-override-item__settings {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
}

/* Audit Log */
.mc-audit-log {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2);
    max-height: 300px;
    overflow-y: auto;
}

.mc-audit-entry {
    display: flex;
    align-items: flex-start;
    gap: var(--mc-space-3);
    padding: var(--mc-space-2);
    font-size: var(--mc-text-sm);
}

.mc-audit-entry__time {
    flex-shrink: 0;
    color: var(--mc-text-secondary);
    min-width: 140px;
}

.mc-audit-entry__user {
    font-weight: var(--mc-font-medium);
}

.mc-audit-entry__change {
    color: var(--mc-text-secondary);
}

/* ==========================================================================
   HTMX LOADING STATES (Jan 2026)
   ========================================================================== */

.mc-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mc-space-2);
    padding: var(--mc-space-4);
    color: var(--mc-text-secondary);
}

.mc-loading__spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--mc-border);
    border-top-color: var(--mc-primary);
    border-radius: 50%;
    animation: mc-spin 0.6s linear infinite;
}

.mc-loading__spinner--sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.mc-loading__spinner--lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

@keyframes mc-spin {
    to { transform: rotate(360deg); }
}

/* HTMX Loading Indicator - opacity-based (for inline indicators like spinners)
   NOTE: Skeleton grid indicators should use ID selectors for higher specificity
   to override both display:none and opacity:0 approaches. See kpi-tasks.css, kpi-tours.css */
.htmx-indicator:not([id]) {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator:not([id]),
.htmx-request.htmx-indicator:not([id]) {
    opacity: 1;
}

/* Mini Progress (Site List) */
.mc-mini-progress {
    width: 60px;
    height: 6px;
    background: var(--mc-bg-tertiary);
    border-radius: var(--mc-radius-full);
    position: relative;
    overflow: hidden;
}

.mc-mini-progress::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--progress, 0%);
    background: var(--mc-primary);
    border-radius: var(--mc-radius-full);
    transition: width var(--mc-transition-base);
}
/* ==========================================================================
   Operations Header (shared)
   Used by Operations hub, tours list, route plans list
   ========================================================================== */
.mc-ops-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--mc-space-4) 0 var(--mc-space-6);
  margin-bottom: var(--mc-space-2);
  gap: var(--mc-space-4);
}

.mc-ops-header__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--mc-space-1);
  font-size: var(--mc-text-xs);
  color: var(--mc-text-tertiary);
  margin-bottom: var(--mc-space-2);
}

.mc-ops-header__breadcrumb a {
  color: var(--mc-text-tertiary);
  text-decoration: none;
  transition: color var(--mc-transition-fast);
}

.mc-ops-header__breadcrumb a:hover {
  color: var(--mc-primary);
}

.mc-ops-header__breadcrumb .material-symbols-rounded {
  font-size: 14px;
  opacity: 0.5;
}

.mc-ops-header__title {
  font-size: var(--mc-text-2xl);
  font-weight: 700;
  color: var(--mc-text-primary);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.mc-ops-header__subtitle {
  font-size: var(--mc-text-sm);
  color: var(--mc-text-tertiary);
  font-weight: 400;
  margin: var(--mc-space-1) 0 0;
}

.mc-ops-header__actions {
  flex-shrink: 0;
}

/* ==========================================================================
   NESTED SUBMENU (for Work Order Management module)
   Styled to match regular submenu items - text only with small chevron
   ========================================================================== */

.mc-submenu-nested-group {
    width: 100%;
}

.mc-sidebar__nested-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--mc-space-2) var(--mc-space-3);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--mc-text-secondary);
    font-size: var(--mc-text-sm);
    font-weight: 400;
    text-align: left;
    border-radius: var(--mc-radius-sm);
    transition: color var(--mc-transition-fast);
}

.mc-sidebar__nested-toggle:hover {
    color: var(--mc-text-primary);
}

.mc-sidebar__nested-toggle.mc-sidebar__link--active {
    color: var(--mc-primary);
}

.mc-sidebar__nested-chevron {
    font-size: 16px;
    opacity: 0.5;
    flex-shrink: 0;
    margin-left: auto;
}

.mc-sidebar__submenu--nested {
    padding-left: var(--mc-space-3);
    margin: 0;
    list-style: none;
}

.mc-submenu-item--nested {
    margin: 0;
}

.mc-sidebar__link--nested {
    display: flex;
    align-items: center;
    padding: var(--mc-space-1) var(--mc-space-3) var(--mc-space-1) var(--mc-space-4);
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
    text-decoration: none;
    border-radius: var(--mc-radius-sm);
    transition: color var(--mc-transition-fast);
}

.mc-sidebar__link--nested:hover {
    color: var(--mc-text-primary);
}

.mc-sidebar__link--nested.mc-sidebar__link--active {
    color: var(--mc-primary);
    font-weight: var(--mc-font-medium);
}

/* ==========================================================================
   STATUS INDICATOR - Colorblind-safe (icon + text + color)
   WCAG 1.4.1: Never rely on color alone
   ========================================================================== */
.mc-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-1);
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-medium);
    line-height: 1;
    white-space: nowrap;
}

.mc-status-indicator .material-symbols-rounded {
    font-size: var(--mc-icon-sm);
}

.mc-status-indicator--success { color: var(--mc-success-text); }
.mc-status-indicator--warning { color: var(--mc-warning-text); }
.mc-status-indicator--danger  { color: var(--mc-danger-text); }
.mc-status-indicator--info    { color: var(--mc-info-text); }
.mc-status-indicator--neutral { color: var(--mc-text-secondary); }

/* Pill variant (with background) */
.mc-status-indicator--pill {
    padding: 2px 8px;
    border-radius: var(--mc-radius-full);
    font-size: var(--mc-text-xs);
}

.mc-status-indicator--pill.mc-status-indicator--success { background: var(--mc-success-alpha-10); }
.mc-status-indicator--pill.mc-status-indicator--warning { background: var(--mc-warning-alpha-10); }
.mc-status-indicator--pill.mc-status-indicator--danger  { background: var(--mc-danger-alpha-10); }
.mc-status-indicator--pill.mc-status-indicator--info    { background: var(--mc-info-alpha-10); }
.mc-status-indicator--pill.mc-status-indicator--neutral { background: var(--mc-neutral-alpha-10); }

/* ==========================================================================
   SPRING MICRO-INTERACTIONS
   Applied to modals, dropdowns, toasts, buttons
   ========================================================================== */

/* Modal spring entrance */
.mc-transition-scale {
    transition: opacity 200ms var(--mc-ease-premium),
                transform 300ms var(--mc-ease-spring-native, var(--mc-ease-spring));
}

/* Dropdown spring entrance */
.mc-dropdown {
    transition: opacity 150ms var(--mc-ease-out),
                transform 200ms var(--mc-ease-spring-native, var(--mc-ease-spring));
}

/* Toast enter/exit now handled by class-based transitions in .mc-toast / .mc-toast--enter / .mc-toast--exit */

/* Toggle switch spring */
.mc-toggle__slider::before {
    transition: transform 250ms var(--mc-ease-spring-native, var(--mc-ease-spring));
}

/* Sidebar expand/collapse spring */
.mc-sidebar {
    transition: width 280ms var(--mc-ease-spring-native, var(--mc-ease-spring));
}

/* ==========================================================================
   DENSITY-AWARE COMPONENT OVERRIDES
   ========================================================================== */
[data-density="compact"] .mc-table th,
[data-density="compact"] .mc-table td {
    padding: var(--mc-density-cell-padding-y) var(--mc-density-cell-padding-x);
    font-size: var(--mc-text-xs);
}

[data-density="compact"] .mc-table th {
    padding-top: 4px;
    padding-bottom: 4px;
}

[data-density="compact"] .mc-card__body {
    padding: var(--mc-density-card-padding);
}

[data-density="compact"] .mc-kpi-card {
    padding: var(--mc-density-card-padding);
}

[data-density="compact"] .mc-kpi-card__value {
    font-size: var(--mc-text-2xl);
}

[data-density="compact"] .mc-form-group {
    margin-bottom: var(--mc-space-2);
}

[data-density="compact"] .mc-input,
[data-density="compact"] .mc-select,
[data-density="compact"] .mc-textarea {
    padding: 6px 10px;
    font-size: var(--mc-text-xs);
}

/* ==========================================================================
   FLOATING BULK ACTION TOOLBAR
   ========================================================================== */
.mc-bulk-toolbar {
    position: fixed;
    bottom: var(--mc-space-6);
    left: 50%;
    transform: translateX(-50%);
    background: var(--mc-bg-primary);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-xl);
    padding: var(--mc-space-2) var(--mc-space-4);
    box-shadow: var(--mc-shadow-xl);
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    z-index: var(--mc-z-fixed);
    animation: mc-bulk-toolbar-in 200ms var(--mc-ease-spring-native, var(--mc-ease-spring)) forwards;
}

@keyframes mc-bulk-toolbar-in {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.mc-bulk-toolbar__count {
    font-size: var(--mc-text-sm);
    font-weight: var(--mc-font-semibold);
    color: var(--mc-primary);
    white-space: nowrap;
}

/* ==========================================================================
   FORM UX ENHANCEMENTS
   ========================================================================== */

/* Password visibility toggle */
.mc-input-wrapper--password {
    position: relative;
}

.mc-input-wrapper--password .mc-input {
    padding-right: 40px;
}

.mc-password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--mc-text-tertiary);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--mc-radius-sm);
    display: flex;
    align-items: center;
}

.mc-password-toggle:hover {
    color: var(--mc-text-secondary);
}

/* Character count */
.mc-char-count {
    font-size: var(--mc-text-xs);
    color: var(--mc-text-tertiary);
    text-align: right;
    margin-top: 2px;
}

.mc-char-count--warning {
    color: var(--mc-warning-text);
}

.mc-char-count--danger {
    color: var(--mc-danger-text);
}

/* Error focus animation */
.mc-input--focus-error {
    animation: mc-shake 400ms var(--mc-ease-premium);
}

@keyframes mc-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* Progressive disclosure */
.mc-advanced-toggle {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    padding: var(--mc-space-3) 0;
    font-size: var(--mc-text-sm);
    color: var(--mc-text-secondary);
    cursor: pointer;
    border: none;
    background: none;
}

.mc-advanced-toggle:hover {
    color: var(--mc-text-primary);
}

.mc-advanced-toggle .material-symbols-rounded {
    transition: transform 200ms var(--mc-ease-premium);
}

.mc-advanced-toggle[aria-expanded="true"] .material-symbols-rounded {
    transform: rotate(180deg);
}

/* ==========================================================================
   HTMX LOADING STATES
   ========================================================================== */

/* aria-busy indicator for HTMX-loaded containers */
[aria-busy="true"] {
    position: relative;
    pointer-events: none;
}

[aria-busy="true"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--mc-bg-primary);
    opacity: 0.5;
    z-index: 1;
}

/* Inline error recovery state */
.mc-htmx-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mc-space-3);
    padding: var(--mc-space-8);
    text-align: center;
    color: var(--mc-text-secondary);
}

.mc-htmx-error__icon {
    font-size: var(--mc-icon-2xl);
    color: var(--mc-danger);
}

.mc-htmx-error__message {
    font-size: var(--mc-text-sm);
    max-width: 400px;
}

/* ==========================================================================
   MOBILE RESPONSIVE ENHANCEMENTS
   ========================================================================== */
@media (max-width: 768px) {
    /* Touch targets: min 44x44px (WCAG 2.5.5) */
    .mc-btn {
        min-height: 44px;
    }

    .mc-btn--sm {
        min-height: 44px;
    }

    .mc-btn--icon {
        min-height: 44px;
        min-width: 44px;
    }

    .mc-header__icon-btn {
        width: 44px;
        height: 44px;
    }

    .mc-sidebar__link {
        min-height: 44px;
    }

    .mc-table__sortable {
        min-height: 44px;
    }

    /* Checkbox/radio min size */
    .mc-checkbox,
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 20px;
        min-height: 20px;
    }

    /* Horizontal scroll for non-responsive tables */
    .mc-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Column resize not practical on mobile */
    .mc-table__resize-handle {
        display: none;
    }

    /* Dashboard chart: horizontal scroll */
    .mc-chart-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Table card layout on mobile */
    .mc-table-container--responsive .mc-table,
    .mc-table-container--responsive .mc-table tbody,
    .mc-table-container--responsive .mc-table tr {
        display: block;
    }

    .mc-table-container--responsive .mc-table thead {
        display: none;
    }

    .mc-table-container--responsive .mc-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--mc-space-2) var(--mc-space-4);
        border-bottom: 1px solid var(--mc-border);
    }

    .mc-table-container--responsive .mc-table td::before {
        content: attr(data-label);
        font-weight: var(--mc-font-semibold);
        font-size: var(--mc-text-xs);
        color: var(--mc-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        flex-shrink: 0;
        margin-right: var(--mc-space-3);
    }

    .mc-table-container--responsive .mc-table tr {
        background: var(--mc-bg-primary);
        border: 1px solid var(--mc-border);
        border-radius: var(--mc-radius-md);
        margin-bottom: var(--mc-space-2);
        overflow: hidden;
    }

    /* Full-width form fields on mobile */
    .mc-form-grid {
        grid-template-columns: 1fr !important;
    }

    /* Stack KPIs to 2-column on tablet */
    .mc-stat-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Main content: reduce padding on mobile */
    .mc-content {
        padding: var(--mc-space-3) var(--mc-space-3);
    }

    /* Page header: stack title and actions */
    .mc-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--mc-space-3);
    }

    .mc-page-header__actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: var(--mc-space-2);
    }

    /* Modal: near full-screen on mobile */
    .mc-modal__panel {
        width: 95vw;
        max-height: 90vh;
        margin: 5vh auto;
    }

    /* Sticky bottom CTA bar */
    .mc-mobile-bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--mc-bg-primary);
        border-top: 1px solid var(--mc-border);
        padding: var(--mc-space-3) var(--mc-space-4);
        z-index: var(--mc-z-fixed);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
        display: flex;
        gap: var(--mc-space-2);
    }

    .mc-mobile-bottom-bar .mc-btn {
        flex: 1;
    }

    /* Full-screen sidebar overlay on mobile */
    .mc-sidebar {
        position: fixed;
        z-index: var(--mc-z-modal);
        height: 100vh;
        width: 280px;
    }
}

@media (max-width: 640px) {
    /* Single column on small phones */
    .mc-stat-grid,
    .mc-stat-grid--4,
    .mc-stat-grid--3 {
        grid-template-columns: 1fr;
    }

    /* Smaller font sizes for small screens */
    .mc-page-title,
    .mc-page-header__title {
        font-size: var(--mc-text-xl);
    }
}

/* ==========================================================================
   HEADING TYPOGRAPHY TIGHTENING
   Tighter letter-spacing at larger sizes for premium feel
   ========================================================================== */
h1, .mc-text-3xl, .mc-text-4xl, .mc-text-5xl,
.mc-page-title, .mc-page-header__title {
    letter-spacing: -0.025em;
}

h2, .mc-text-2xl, .mc-text-xl,
.mc-card__title, .mc-modal__title {
    letter-spacing: -0.02em;
}

/* ==========================================================================
   CELEBRATORY EMPTY STATE VARIANT
   ========================================================================== */
.mc-empty-state--celebrate .mc-empty-state__icon {
    background-color: var(--mc-success-alpha-10);
    color: var(--mc-success-text);
}

.mc-empty-state--celebrate .mc-empty-state__title {
    color: var(--mc-success-text);
}

/* ==========================================================================
   REDUCED MOTION OVERRIDE FOR NEW ANIMATIONS
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .mc-toast,
    .mc-toast--enter,
    .mc-toast--exit {
        animation: none;
        transition: none;
        opacity: 1;
        transform: none;
    }

    .mc-bulk-toolbar {
        animation: none;
        opacity: 1;
    }

    .mc-btn:active:not(:disabled) {
        transform: none;
    }

    .mc-transition-scale {
        transition-duration: 0.01ms;
    }

    .mc-input--focus-error {
        animation: none;
    }
}