/* ============================================================================
   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.
   ============================================================================ */

/* ---- Font aliases: map DA's family names onto the fonts already in wwwroot/fonts ---- */
@font-face {
    font-family: 'KlavikaBasicBold';
    src: url('/fonts/klavika-bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'DinOTRegular';
    src: url('/fonts/FontFont - DINOT-Medium.otf') format('opentype'),
         url('/fonts/FontFont - DINOT.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'DinotBlack';
    src: url('/fonts/FontFont - DINOT-Black.otf') format('opentype');
    font-weight: 700;
    font-display: swap;
}

/* ---- Tokens + base ---- */
.analytics-page {
    /* Brand colors */
    --rcm-white: #FFFFFF;
    --rcm-light-gray: #EBEBEB;
    --rcm-red: #F3002B;
    --rcm-black: #000000;
    --rcm-medium-gray: #B3B3B3;
    --rcm-dark-gray: #4D4D4D;

    /* Typography */
    --rcm-font-header: 'KlavikaBasicBold', '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);
    --rcm-red-dark: #d50027;
    --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: #F5F5F5;
    --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 {
    --rcm-good: #4CAF50;
    --rcm-light-gray: #EBEBEB;
    --rcm-dark-gray: #4D4D4D;
    --rcm-white: #FFFFFF;
    --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; }
}