/* ============================================================================
   analytics-theme.css — Data_Analytics design system, scoped to the analytics area
   ----------------------------------------------------------------------------
   Everything is prefixed with `.analytics-page` (the wrapper every merged
   analytics page renders) so it CANNOT leak into Support/Admin.
   ============================================================================ */

/* ---- Tokens + base ---- */
.analytics-page {
    /* Brand + neutral colors — ALIASES, not literals.
       These are declared on .analytics-page rather than :root, so a redefinition
       of --cc-red in cc-brand.css would never have reached this subtree: a
       :root rule simply does not match .analytics-page, and the local value
       would win no matter the source order. Pointing them at the canonical
       tokens instead means the analytics area follows the design system.
       Custom properties resolve lazily at use time, so var(--cc-red) here picks
       up whatever :root holds. */
    --rcm-white: var(--cc-white);
    --rcm-light-gray: var(--cc-light-gray);
    --rcm-red: var(--cc-red);
    --rcm-black: var(--cc-black);
    --rcm-medium-gray: var(--cc-medium-gray);
    --rcm-dark-gray: var(--cc-dark-gray);

    /* Typography */
    --rcm-font-header: 'Klavika', 'DinotBlack', Arial, sans-serif;
    --rcm-font-body: 'DinOTRegular', 'DinotMedium', Arial, sans-serif;

    --amr-primary: var(--rcm-black);
    --amr-secondary: var(--rcm-red);
    --amr-font-header: var(--rcm-font-header);
    --amr-font-body: var(--rcm-font-body);

    /* Font size scale */
    --rcm-text-2xs: 0.65rem;
    --rcm-text-xs: 0.72rem;
    --rcm-text-sm: 0.82rem;
    --rcm-text-md: 0.9rem;
    --rcm-text-base: 1rem;
    --rcm-text-lg: 1.125rem;

    /* Shared design tokens */
    --rcm-radius: 0;
    --rcm-shadow: 0 6px 20px rgba(0,0,0,.12);
    --rcm-shadow-soft: 0 2px 10px rgba(0,0,0,.10);
    --rcm-shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --rcm-shadow-hover: 0 8px 30px rgba(0,0,0,.18);
    --rcm-border: rgba(0,0,0,.08);
    --rcm-blur-bg: rgba(255,255,255,.88);
    --rcm-blur-bg-dark: rgba(30,30,30,.75);
    /* Was #d50027 — a fourth brand red, 4/0/2 out of 255 away from the canonical
       --cc-red-hover (#D10025) and indistinguishable from it. Collapsed rather
       than kept as a near-duplicate the rebrand would have to track separately. */
    --rcm-red-dark: var(--cc-red-hover);
    --rcm-blue: #42A5F5;
    --rcm-blue-dark: #1565C0;
    --rcm-blue-medium: #1976D2;

    /* Semantic status + neutral scale. Exact values carried over from
       Data_Analytics so the merged pages look unchanged; referenced by the
       co-located page/component .razor.css instead of hardcoded hex. */
    --rcm-positive: #2E7D32;       /* savings / positive */
    --rcm-positive-dark: #1B5E20;  /* revenue / profit */
    --rcm-negative: #F44336;       /* loss / negative */
    --rcm-good: #4CAF50;           /* good / high-efficiency */
    --rcm-amber: #FFC107;
    --rcm-orange: #FF9800;
    --rcm-surface-gray: var(--cc-bg);
    --rcm-gray-800: #333333;
    --rcm-gray-600: #666666;
    --rcm-gray-500: #808080;
    --rcm-gray-450: #888888;
    --rcm-gray-400: #999999;

    /* Module aliases (Plan/Property/Coverage/Simulator) */
    --pm-radius: var(--rcm-radius); --pm-shadow: var(--rcm-shadow); --pm-shadow-soft: var(--rcm-shadow-soft);
    --pm-border: var(--rcm-border); --pm-red: var(--rcm-red); --pm-red-dark: var(--rcm-red-dark); --pm-blue: var(--rcm-blue);
    --pc-radius: var(--rcm-radius); --pc-shadow: var(--rcm-shadow); --pc-shadow-soft: var(--rcm-shadow-soft);
    --pc-blur-bg: var(--rcm-blur-bg); --pc-blur-bg-dark: var(--rcm-blur-bg-dark); --pc-border: var(--rcm-border);
    --pc-blue: var(--rcm-blue-medium); --pc-blue-dark: var(--rcm-blue-dark); --pc-blue-light: var(--rcm-blue);
    --cs-radius: var(--rcm-radius); --cs-shadow: var(--rcm-shadow); --cs-shadow-soft: var(--rcm-shadow-soft);
    --cs-blur-bg: var(--rcm-blur-bg); --cs-border: var(--rcm-border); --cs-red: var(--rcm-red);
    --cs-red-dark: var(--rcm-red-dark); --cs-blue: var(--rcm-blue);

    font-family: var(--rcm-font-body);
    color: var(--rcm-black);
}

/* ---- Typography (RCMowersTheme) ---- */
.analytics-page h1, .analytics-page h2, .analytics-page h3,
.analytics-page h4, .analytics-page h5, .analytics-page h6,
.analytics-page .mud-typography-h1, .analytics-page .mud-typography-h2,
.analytics-page .mud-typography-h3, .analytics-page .mud-typography-h4,
.analytics-page .mud-typography-h5, .analytics-page .mud-typography-h6 {
    font-family: var(--rcm-font-header);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rcm-black);
}
.analytics-page .mud-typography-h1 { font-size: 2.5rem; font-weight: 700; }
.analytics-page .mud-typography-h2 { font-size: 2rem; font-weight: 700; }
.analytics-page .mud-typography-h3 { font-size: 1.75rem; font-weight: 700; }
.analytics-page .mud-typography-h4 { font-size: 1.5rem; font-weight: 700; }
.analytics-page .mud-typography-h5 { font-size: 1.25rem; font-weight: 700; }
.analytics-page .mud-typography-h6 { font-size: 1rem; font-weight: 700; }
.analytics-page .mud-typography-overline {
    font-family: var(--rcm-font-header);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}
.analytics-page .mud-typography-button { font-family: var(--rcm-font-header); text-transform: uppercase; letter-spacing: 0.05em; }

/* ============================================================================
   MudBlazor component overrides — square corners + RC Mowers palette.
   The global theme is CommandCenterTheme (rounded / red-primary), so these
   scoped !important rules are what actually reproduce DA inside analytics.
   ============================================================================ */
.analytics-page .mud-paper,
.analytics-page .mud-card,
.analytics-page .mud-chart,
.analytics-page .mud-snackbar { border-radius: 0 !important; }

/* Sessions "Mow Settings Statistics" panel — bordered MudPaper (was an inline style). */
.analytics-page .analytics-settings-panel { border: 1px solid var(--mud-palette-lines-default); }

.analytics-settings-card {
    /* Re-declared here because this card is portalled out of .analytics-page
       (MudPopover renders to the document root), so it does not inherit the
       wrapper's token block. Same aliases as above. */
    --rcm-good: #4CAF50;
    --rcm-light-gray: var(--cc-light-gray);
    --rcm-dark-gray: var(--cc-dark-gray);
    --rcm-white: var(--cc-white);
    --rcm-border: rgba(0, 0, 0, .08);
    min-width: 320px;
    max-width: 420px;
}
.analytics-settings-card .sess-toggle-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: center;
}
.analytics-settings-card .sess-toggle-on  { background: var(--rcm-good); color: var(--rcm-white); }
.analytics-settings-card .sess-toggle-off { background: var(--rcm-light-gray); color: var(--rcm-dark-gray); }
.analytics-settings-card .sess-setting-pill {
    border: 1px solid var(--rcm-border);
    border-radius: 10px;
    text-align: center;
}
.analytics-settings-card .sess-settings-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.analytics-settings-card .sess-settings-close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.analytics-page .mud-table-head { background-color: var(--rcm-light-gray); }
.analytics-page .mud-table-head th,
.analytics-page .mud-th {
    font-family: var(--rcm-font-header);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--rcm-black);
}
.analytics-page .mud-table-row:hover { background-color: var(--rcm-light-gray) !important; }

.analytics-page .mud-tabs-header { border-bottom: 2px solid var(--rcm-light-gray); }
.analytics-page .mud-tab {
    font-family: var(--rcm-font-header);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rcm-black);
}
.analytics-page .mud-tab.mud-tab-active { color: var(--rcm-red) !important; }
.analytics-page .mud-tab-slider { background-color: var(--rcm-red) !important; }

.analytics-page .mud-chip {
    font-family: var(--rcm-font-header);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.analytics-page .mud-chip.mud-chip-color-primary,
.analytics-page .mud-chip.mud-chip-filled.mud-chip-color-primary { background-color: var(--rcm-black) !important; color: var(--rcm-white) !important; }
.analytics-page .mud-chip.mud-chip-color-primary *,
.analytics-page .mud-chip.mud-chip-filled.mud-chip-color-primary * { color: var(--rcm-white) !important; }
.analytics-page .mud-chip.mud-chip-color-secondary,
.analytics-page .mud-chip.mud-chip-filled.mud-chip-color-secondary { background-color: var(--rcm-red) !important; color: var(--rcm-white) !important; }
.analytics-page .mud-chip.mud-chip-color-secondary *,
.analytics-page .mud-chip.mud-chip-filled.mud-chip-color-secondary * { color: var(--rcm-white) !important; }

.analytics-page .mud-button-filled.mud-button-filled-primary { background-color: var(--rcm-black) !important; color: var(--rcm-white) !important; }
.analytics-page .mud-button-filled.mud-button-filled-primary .mud-button-label,
.analytics-page .mud-button-filled.mud-button-filled-primary span,
.analytics-page .mud-button-filled.mud-button-filled-primary .mud-icon { color: var(--rcm-white) !important; }
.analytics-page .mud-button-filled.mud-button-filled-primary:hover { background-color: var(--rcm-dark-gray) !important; }
.analytics-page .mud-button-filled.mud-button-filled-secondary { background-color: var(--rcm-red) !important; color: var(--rcm-white) !important; }
.analytics-page .mud-button-filled.mud-button-filled-secondary .mud-button-label,
.analytics-page .mud-button-filled.mud-button-filled-secondary span,
.analytics-page .mud-button-filled.mud-button-filled-secondary .mud-icon { color: var(--rcm-white) !important; }
.analytics-page .mud-button-filled.mud-button-filled-secondary:hover { background-color: var(--rcm-light-gray) !important; color: var(--rcm-black) !important; outline: 1px solid var(--rcm-black); }

.analytics-page .mud-toggle-group { border-radius: 0 !important; }
.analytics-page .mud-toggle-item { border-radius: 0 !important; }
.analytics-page .mud-toggle-item.mud-toggle-item-selected.mud-primary { background-color: var(--rcm-black) !important; color: var(--rcm-white) !important; }
.analytics-page .mud-toggle-item.mud-toggle-item-selected.mud-primary * { color: var(--rcm-white) !important; }
.analytics-page .mud-toggle-item.mud-toggle-item-selected.mud-secondary { background-color: var(--rcm-red) !important; color: var(--rcm-white) !important; }
.analytics-page .mud-toggle-item.mud-toggle-item-selected.mud-secondary * { color: var(--rcm-white) !important; }


.analytics-page .mud-toggle-group.mud-primary,
.analytics-page .filter-toggle-group.mud-primary,
.analytics-page .mud-toggle-item.mud-primary,
/* MudBlazor 8 renamed the color class to .mud-toggle-group-{color} on the group root;
   items + inter-item dividers inherit border-color from the group. */
.analytics-page .mud-toggle-group-primary,
.analytics-page .mud-toggle-group-primary .mud-toggle-item { border-color: var(--rcm-black) !important; }

.analytics-page .mud-toggle-group.mud-secondary,
.analytics-page .filter-toggle-group.mud-secondary,
.analytics-page .mud-toggle-item.mud-secondary,
.analytics-page .mud-toggle-group-secondary,
.analytics-page .mud-toggle-group-secondary .mud-toggle-item { border-color: var(--rcm-red) !important; }

.analytics-page .mud-toggle-item:not(.mud-toggle-item-selected),
.analytics-page .mud-toggle-item:not(.mud-toggle-item-selected) .mud-typography,
.analytics-page .mud-toggle-item:not(.mud-toggle-item-selected) .mud-button-label,
.analytics-page .mud-toggle-item:not(.mud-toggle-item-selected) span,
.analytics-page .mud-toggle-item:not(.mud-toggle-item-selected) * { color: var(--rcm-black) !important; }

.analytics-page .mud-input-outlined .mud-input-slot,
.analytics-page .mud-select .mud-input-outlined .mud-input-slot { border-radius: 0 !important; }
.analytics-page .mud-input:focus-within { border-color: var(--rcm-red) !important; }
.analytics-page .mud-input-underline:after { border-bottom-color: var(--rcm-red) !important; }
.analytics-page .mud-divider { border-color: var(--rcm-light-gray) !important; }
.analytics-page .mud-progress-linear-color-secondary .mud-progress-linear-bar { background-color: var(--rcm-red); }

/* Date picker: red toolbar */
.analytics-page .mud-picker-toolbar,
.analytics-page .mud-picker .mud-picker-toolbar { background-color: var(--rcm-red) !important; color: var(--rcm-white) !important; }
.analytics-page .mud-picker-toolbar *, .analytics-page .mud-picker-toolbar button { color: var(--rcm-white) !important; }
.analytics-page .mud-picker-calendar-day.mud-selected,
.analytics-page .mud-picker-calendar-day.mud-range,
.analytics-page .mud-picker-calendar-day.mud-range-start,
.analytics-page .mud-picker-calendar-day.mud-range-end { background-color: var(--rcm-red) !important; color: var(--rcm-white) !important; }

/* ============================================================================
   Shared component classes (Data_Analytics global-utilities + app.css)
   ============================================================================ */

/* KPI cards */
.analytics-page .kpi-card {
    border-radius: var(--rcm-radius);
    border: 1px solid var(--rcm-border);
    background: rgba(255,255,255,0.92);
    box-shadow: var(--rcm-shadow-sm);
    transition: box-shadow 0.2s ease;
}
.analytics-page .kpi-card:hover { box-shadow: var(--rcm-shadow); }
.analytics-page .kpi-card-primary { border-left: 4px solid var(--mud-palette-primary); }
.analytics-page .kpi-card-success { border-left: 4px solid var(--mud-palette-success); }
.analytics-page .kpi-card-info    { border-left: 4px solid var(--mud-palette-info); }
.analytics-page .kpi-card-warn    { border-left: 4px solid var(--mud-palette-warning); }
.analytics-page .kpi-card-error   { border-left: 4px solid var(--mud-palette-error); }
.analytics-page .kpi-card-accent  { border-left: 4px solid var(--rcm-amber); }
.analytics-page .kpi-card-red     { border-left: 4px solid var(--rcm-red); }
.analytics-page .kpi-card-black   { border-left: 4px solid var(--rcm-black); }
.analytics-page .kpi-card-gray    { border-left: 4px solid var(--rcm-medium-gray); }

.analytics-page .kpi-trend { display: flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 600; margin-top: 2px; }
.analytics-page .trend-up, .analytics-page .trend-up span:first-child { color: var(--mud-palette-success) !important; }
.analytics-page .trend-down, .analytics-page .trend-down span:first-child { color: var(--mud-palette-error) !important; }
.analytics-page .trend-flat, .analytics-page .trend-flat span:first-child { color: var(--mud-palette-text-secondary) !important; opacity: 0.7; }

.analytics-page .kpi-icon {
    width: 44px; height: 44px;
    border-radius: var(--rcm-radius);
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.04);
}

/* Page toolbars */
.analytics-page .page-toolbar { border-radius: var(--rcm-radius); overflow: hidden; }
.analytics-page .page-toolbar-inner { padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.analytics-page .page-toolbar-light { background: var(--rcm-light-gray); }
.analytics-page .page-toolbar-dark { background: var(--rcm-black); color: var(--rcm-white); }

/* Section headers / badges */
.analytics-page .section-title { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.analytics-page .section-title-sm { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.analytics-page .count-badge { font-size: 0.7rem; font-weight: 700; color: var(--rcm-white); background: var(--rcm-red); padding: 2px 10px; border-radius: var(--rcm-radius); }

/* Shadow utilities */
.analytics-page .shadow-sm { box-shadow: var(--rcm-shadow-sm); }
.analytics-page .shadow-soft { box-shadow: var(--rcm-shadow-soft); }
.analytics-page .shadow-md { box-shadow: var(--rcm-shadow); }
.analytics-page .shadow-hover { box-shadow: var(--rcm-shadow-hover); }

/* Mini-KPI cards */
.analytics-page .mini-kpi {
    border-radius: 0;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.92);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.analytics-page .mini-kpi-red      { border-left: 4px solid var(--rcm-red); }
.analytics-page .mini-kpi-black    { border-left: 4px solid var(--rcm-black); }
.analytics-page .mini-kpi-darkgray { border-left: 4px solid var(--rcm-dark-gray); }
.analytics-page .mini-kpi-medgray  { border-left: 4px solid var(--rcm-medium-gray); }
/* Muted "no value" state for a mini-KPI. Global (not scoped) so ProductionSummary
   and ProductionCompare reach it too — the CustomerDashboard-scoped copy was
   unreachable from those components. */
.analytics-page .mini-kpi-empty    { color: var(--rcm-medium-gray); }

/* Filter toolbar + controls (DA `rcm-filter-toolbar` and the merged `analytics-filter-toolbar` alias) */
.analytics-page .rcm-filter-toolbar,
.analytics-page .analytics-filter-toolbar {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0;
    padding: 12px 16px;
    margin-bottom: 12px;
}
.analytics-page .filter-toggle-group,
.analytics-page .analytics-filter-toggle-group { border-radius: 0 !important; }
.analytics-page .filter-toggle-group .mud-toggle-item {
    min-height: 44px !important; padding: 0 18px !important; font-size: 0.95rem !important;
    border-radius: 0 !important; line-height: 1 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
.analytics-page .filter-date-picker .mud-input-slot,
.analytics-page .filter-select .mud-input-slot { min-height: 44px !important; font-size: 0.95rem !important; }
.analytics-page .filter-date-picker .mud-input,
.analytics-page .filter-select .mud-input { min-height: 44px !important; }
.analytics-page .filter-date-picker .mud-input-control { min-width: 240px; }
.analytics-page .filter-select .mud-select-input { padding: 10px 14px !important; }
.analytics-page .filter-select-compact .mud-input-slot { min-height: 38px !important; font-size: 0.9rem !important; }
.analytics-page .filter-select-compact .mud-input { min-height: 38px !important; }
.analytics-page .filter-select-fixed { min-width: 250px; max-width: 250px; }

/* Export button (icon-only toolbar style) */
.analytics-page .rcm-export-btn,
.analytics-page .rcm-export-btn .mud-icon-root { color: var(--rcm-dark-gray) !important; }
.analytics-page .rcm-export-btn:hover { background: rgba(0,0,0,0.08) !important; }

/* Empty state */
.analytics-page .rcm-empty-state {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 10px; padding: 48px 32px; border: 1px dashed var(--rcm-medium-gray);
    border-radius: 0; background: rgba(0,0,0,0.015);
}
.analytics-page .rcm-empty-state-icon { width: 56px; height: 56px; background: var(--rcm-black); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.analytics-page .rcm-empty-state-icon .mud-icon-root { color: var(--rcm-white); font-size: 28px; }
.analytics-page .rcm-empty-state-title { font-size: 1rem; font-weight: 700; color: var(--rcm-black); }
.analytics-page .rcm-empty-state-desc { font-size: 0.85rem; color: var(--rcm-dark-gray); max-width: 360px; line-height: 1.5; }

/* Loading skeleton */
@keyframes rcm-skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.analytics-page .rcm-skeleton {
    background: linear-gradient(90deg, var(--rcm-light-gray) 25%, var(--rcm-surface-gray) 50%, var(--rcm-light-gray) 75%);
    background-size: 200% 100%;
    animation: rcm-skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 0; color: transparent !important;
}
.analytics-page .rcm-skeleton-text { height: 1em; margin-bottom: 0.5rem; width: 100%; }
.analytics-page .rcm-skeleton-card { height: 120px; width: 100%; }
.analytics-page .rcm-skeleton-chart { height: 300px; width: 100%; }

/* Accent text + banner */
.analytics-page .rcm-text-accent { color: var(--rcm-red); font-size: 1.125rem; }
.analytics-page .page-title-banner { background-color: var(--rcm-dark-gray); color: var(--rcm-white); padding: 1rem 1.5rem; text-align: center; }
.analytics-page .page-title-banner h1, .analytics-page .page-title-banner h2, .analytics-page .page-title-banner h3 {
    color: var(--rcm-white); margin: 0; font-family: var(--rcm-font-header); text-transform: uppercase; letter-spacing: 0.1em;
}

/* Subtle helper */
.analytics-page .subtle { color: var(--rcm-dark-gray); }

@media (prefers-reduced-motion: reduce) {
    .analytics-page .rcm-skeleton { animation: none !important; background: var(--rcm-light-gray) !important; }
}