/* ============================================================================
   BEC ARABIA — ENTERPRISE THEME SYSTEM (BUNDLED)
   ============================================================================
   Build-time bundle of BEC_Theme.css and its @import chain.
   Hand edits here are overwritten by the next build — change BEC_Theme.css
   (or the partial it imports) and re-bundle.
   ============================================================================ */

/* ============================================================================
   LAYER 1: tokens/_primitives.css
   ============================================================================ */

:root {
    /* ── COLOR: Neutral Palette ── */
    --BEC-themePrimary: #1e3c72;
    --BEC-colorNeutralForeground1: #242424;
    --BEC-colorNeutralForeground2: #424242;
    --BEC-colorNeutralForeground3: #616161;
    --BEC-colorNeutralForeground4: #707070;
    --BEC-colorNeutralBackground1: #ffffff;
    --BEC-colorNeutralBackground2: #fafafa;
    --BEC-colorNeutralBackground3: #f5f5f5;
    --BEC-colorNeutralBackground4: #f0f0f0;
    --BEC-colorNeutralBackground5: #ebebeb;
    --BEC-colorNeutralBackground6: #e1e1e1;
    --BEC-colorNeutralStroke1: #d1d1d1;
    --BEC-colorNeutralStroke2: #c7c7c7;

    /* ── COLOR: Brand Palette ── */
    --BEC-colorBrandBackground: #0078d4;
    --BEC-colorBrandBackgroundHover: #106ebe;
    --BEC-colorBrandBackgroundPressed: #005a9e;
    --BEC-colorBrandBackgroundSelected: #0078d4;
    --BEC-colorBrandForeground1: #0078d4;
    --BEC-colorBrandForeground2: #106ebe;
    --BEC-colorNeutralForegroundOnBrand: #ffffff;
    --bec-gradient-primary: #b8b8c6;

    /* ── COLOR: Semantic Palette ── */
    --BEC-colorPaletteRedBackground1: #fdf3f4;
    --BEC-colorPaletteRedBackground2: #f9dadd;
    --BEC-colorPaletteRedForeground1: #bc2f32;
    --BEC-colorPaletteGreenBackground1: #f1faf1;
    --BEC-colorPaletteGreenBackground2: #d6edd6;
    --BEC-colorPaletteGreenForeground1: #107c10;
    --BEC-colorPaletteYellowBackground1: #fffef5;
    --BEC-colorPaletteYellowBackground2: #fff8df;
    --BEC-colorPaletteYellowForeground1: #8a6c00;

    /* ── LAYOUT: Dimensions ── */
    --BEC-layoutHeaderHeight: 60px;
    --BEC-layoutSidebarWidth: 260px;
    --BEC-layoutSidebarCollapsedWidth: 48px;

    /* ── LAYOUT: Colors ── */
    --BEC-layoutBlueDark: #005A9E;
    --BEC-layoutBluePrimary: #0078D4;
    --BEC-layoutGray100: #f3f2f1;
    --BEC-layoutGray200: #edebe9;
    --BEC-layoutGray300: #e1dfdd;
    --BEC-layoutGray600: #605e5c;
    --BEC-layoutGray900: #201f1e;
    --BEC-layoutDangerRed: #d13438;

    /* ── SPACING: 8px Grid Scale ── */
    --BEC-spacingHorizontalNone: 0;
    --BEC-spacingHorizontalXXS: 2px;
    --BEC-spacingHorizontalXS: 4px;
    --BEC-spacingHorizontalSNudge: 6px;
    --BEC-spacingHorizontalS: 8px;
    --BEC-spacingHorizontalMNudge: 10px;
    --BEC-spacingHorizontalM: 12px;
    --BEC-spacingHorizontalL: 16px;
    --BEC-spacingHorizontalXL: 20px;
    --BEC-spacingHorizontalXXL: 24px;
    --BEC-spacingHorizontalXXXL: 32px;

    /* ── TYPOGRAPHY: Font Family ── */
    --BEC-fontFamilyBase: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;

    /* ── TYPOGRAPHY: Font Size Scale ── */
    --BEC-fontSizeBase100: 10px;
    --BEC-fontSizeBase200: 12px;
    --BEC-fontSizeBase300: 14px;
    --BEC-fontSizeBase400: 16px;
    --BEC-fontSizeBase500: 20px;
    --BEC-fontSizeBase600: 24px;
    --BEC-fontSizeHero700: 28px;
    --BEC-fontSizeHero800: 32px;
    --BEC-fontSizeHero900: 40px;
    --BEC-fontSizeHero1000: 68px;

    /* ── TYPOGRAPHY: Font Weights ── */
    --BEC-fontWeightRegular: 400;
    --BEC-fontWeightMedium: 500;
    --BEC-fontWeightSemibold: 600;
    --BEC-fontWeightBold: 700;

    /* ── TYPOGRAPHY: Line Heights ── */
    --BEC-lineHeightBase100: 14px;
    --BEC-lineHeightBase200: 16px;
    --BEC-lineHeightBase300: 20px;
    --BEC-lineHeightBase400: 22px;
    --BEC-lineHeightBase500: 28px;
    --BEC-lineHeightBase600: 32px;
    --BEC-lineHeightHero700: 36px;
    --BEC-lineHeightHero800: 40px;
    --BEC-lineHeightHero900: 52px;
    --BEC-lineHeightHero1000: 92px;

    /* ── MOTION: Animation Curves ── */
    --BEC-curveAccelerateMax: cubic-bezier(1, 0, 1, 1);
    --BEC-curveAccelerateMid: cubic-bezier(0.7, 0, 1, 0.5);
    --BEC-curveAccelerateMin: cubic-bezier(0.8, 0, 1, 1);
    --BEC-curveDecelerateMax: cubic-bezier(0, 0, 0, 1);
    --BEC-curveDecelerateMid: cubic-bezier(0.1, 0.9, 0.2, 1);
    --BEC-curveDecelerateMin: cubic-bezier(0.33, 0, 0.1, 1);
    --BEC-curveEasyEase: cubic-bezier(0.33, 0, 0.67, 1);
    --BEC-curveLinear: cubic-bezier(0, 0, 1, 1);

    /* ── MOTION: Animation Durations ── */
    --BEC-durationUltraFast: 50ms;
    --BEC-durationFaster: 100ms;
    --BEC-durationFast: 150ms;
    --BEC-durationNormal: 200ms;
    --BEC-durationGentle: 250ms;
    --BEC-durationSlow: 300ms;
    --BEC-durationSlower: 400ms;
    --BEC-durationUltraSlow: 500ms;

    /* ── ELEVATION: Shadow System ── */
    --BEC-shadow2: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14);
    --BEC-shadow4: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
    --BEC-shadow8: 0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14);
    --BEC-shadow16: 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14);
    --BEC-shadow28: 0 0 8px rgba(0, 0, 0, 0.12), 0 14px 28px rgba(0, 0, 0, 0.14);
    --BEC-shadow64: 0 0 8px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.14);

    /* ── SHAPE: Border Radius ── */
    --BEC-borderRadiusNone: 0;
    --BEC-borderRadiusSmall: 2px;
    --BEC-borderRadiusMedium: 4px;
    --BEC-borderRadiusLarge: 6px;
    --BEC-borderRadiusXLarge: 8px;
    --BEC-borderRadiusXXLarge: 12px;
    --BEC-borderRadiusCircular: 9999px;

    /* ── RESPONSIVE: Breakpoints ── */
    --BEC-breakpointSmall: 320px;
    --BEC-breakpointMedium: 480px;
    --BEC-breakpointLarge: 640px;
    --BEC-breakpointExtraLarge: 1024px;
    --BEC-breakpointExtraExtraLarge: 1366px;
    --BEC-breakpointExtraExtraExtraLarge: 1920px;

    /* ── COLOR: Hover/Interactive States ── */
    --BEC-colorNeutralBackground1Hover: #f5f5f5;
    --BEC-colorNeutralBackground2Hover: #ebebeb;
    --BEC-colorBrandBackground1: #deecf9;
    --BEC-colorBrandBackground2: #e8ebf9;
    --BEC-colorBrandBackground2Hover: #d6ddf5;
    --BEC-colorBrandBackground2Selected: #c4cff0;

    /* ── INTERACTION: Touch Targets ── */
    --BEC-touchTargetMobile: 44px;
    --BEC-touchTargetDesktop: 24px;
}

/* ============================================================================
   LAYER 2: tokens/_semantic-light.css
   ============================================================================ */

:root {
    /* ── Neutral Semantic Mapping ── */
    --BEC-neutralPrimary: var(--BEC-colorNeutralForeground1);
    --BEC-neutralPrimaryAlt: var(--BEC-colorNeutralForeground2);
    --BEC-neutralSecondary: var(--BEC-colorNeutralForeground3);
    --BEC-neutralTertiary: var(--BEC-colorNeutralForeground4);
    --BEC-neutralTertiaryAlt: var(--BEC-colorNeutralStroke1);
    --BEC-neutralQuaternary: var(--BEC-colorNeutralStroke2);
    --BEC-neutralQuaternaryAlt: var(--BEC-colorNeutralBackground6);
    --BEC-neutralLight: var(--BEC-colorNeutralBackground5);
    --BEC-neutralLighter: var(--BEC-colorNeutralBackground4);
    --BEC-neutralLighterAlt: var(--BEC-colorNeutralBackground3);

    /* ── Brand Color Tints ── */
    --BEC-themeLighterAlt: #f3f5f9;
    --BEC-themeLighter: #d0d9e6;
    --BEC-themeLight: #a9bbd3;
    --BEC-themeTertiary: #5c7ca8;
    --BEC-themeSecondary: #2b4d81;
    --BEC-themeDarkAlt: #1b3566;
    --BEC-themeDark: #172c56;
    --BEC-themeDarker: #111f40;

    /* ── Communication Colors ── */
    --BEC-errorText: var(--BEC-colorPaletteRedForeground1);
    --BEC-errorBackground: var(--BEC-colorPaletteRedBackground1);
    --BEC-successText: var(--BEC-colorPaletteGreenForeground1);
    --BEC-successBackground: var(--BEC-colorPaletteGreenBackground1);
    --BEC-warningText: var(--BEC-colorPaletteYellowForeground1);
    --BEC-warningBackground: var(--BEC-colorPaletteYellowBackground1);
    --BEC-infoText: var(--BEC-colorBrandForeground1);
    --BEC-infoBackground: var(--BEC-colorNeutralBackground2);

    /* ── Background Surface Colors ── */
    --BEC-neutral-background-1: var(--BEC-colorNeutralBackground1);
    --BEC-neutral-background-2: var(--BEC-colorNeutralBackground2);
    --BEC-neutral-background-3: var(--BEC-colorNeutralBackground3);
    --BEC-neutral-foreground-rest: var(--BEC-colorNeutralForeground1);
    --BEC-neutral-foreground-hover: var(--BEC-colorNeutralForeground2);
    --BEC-neutral-foreground-2: var(--BEC-colorNeutralForeground3);
    --BEC-neutral-stroke-1: var(--BEC-colorNeutralStroke1);
    --BEC-neutral-stroke-2: var(--BEC-colorNeutralStroke2);

    /* ── Accent Integration ── */
    --BEC-accent-background-rest: var(--BEC-colorBrandBackground);
    --BEC-accent-background-hover: var(--BEC-colorBrandBackgroundHover);
    --BEC-accent-foreground-rest: var(--BEC-colorBrandForeground1);

    /* ── Semantic Surface Tokens ── */
    --BEC-Surface-Base: var(--BEC-colorNeutralBackground1);
    --BEC-Surface-Alt: #faf9f8;
    --BEC-Surface-Hover: var(--BEC-colorNeutralBackground3);
    --BEC-Surface-Elevated: var(--BEC-colorNeutralBackground3);

    /* ── Semantic Text Tokens ── */
    --BEC-Text-Primary: #323130;
    --BEC-Text-Secondary: #605e5c;

    /* ── Semantic Brand Tokens ── */
    --BEC-Brand-Primary: var(--BEC-colorBrandBackground);
    --BEC-Brand-Secondary: var(--BEC-colorBrandBackgroundHover);

    /* ── Semantic Border Tokens ── */
    --BEC-Border-Subtle: #edebe9;
    --BEC-Border-Strong: #c8c6c4;

    /* ── Semantic Status Tokens ── */
    --BEC-Error-Main: #d13438;
    --BEC-Error-Subtle: #fde7e9;
    --BEC-Success-Main: #107c10;
    --BEC-Success-Subtle: #dff6dd;
    --BEC-Success-BG: #dff6dd;
    --BEC-Warning-Main: #ffb900;
    --BEC-Warning-Subtle: #fff4ce;
    --BEC-Info-Main: var(--BEC-colorBrandBackground);
    --BEC-Info-Subtle: #deecf9;

    /* ── App-Level Shape Overrides ── */
    --BEC-borderRadiusSmall: 4px;
    --BEC-borderRadiusMedium: 8px;
    --BEC-borderRadiusCircular: 50%;

    /* ── App-Level Depth System ── */
    --BEC-depth-1: 0 1px 2px rgba(0, 0, 0, 0.1);
    --BEC-depth-2: 0 2px 4px rgba(0, 0, 0, 0.1);
    --BEC-depth-4: 0 4px 8px rgba(0, 0, 0, 0.12);
    --BEC-depth-8: 0 8px 16px rgba(0, 0, 0, 0.15);

    /* ── Dashboard ── */
    --BEC-dashboard-bg: linear-gradient(135deg, #f0f2f5 0%, #fafbfc 50%, #ffffff 100%);
    --BEC-metric-card-height: 120px;
    --BEC-metric-icon-size: 48px;
    --BEC-dashboard-sidebar-width: 285px;
    --BEC-dashboard-header-height: 64px;

    /* Performance Indicators */
    --BEC-performance-excellent: #0e7c0e;
    --BEC-performance-good: #0078d4;
    --BEC-performance-average: #ffb900;
    --BEC-performance-poor: #d83b01;

    /* Chart Colors */
    --BEC-chart-primary: #0078d4;
    --BEC-chart-secondary: #40e0d0;
    --BEC-chart-tertiary: #ff4b4b;
    --BEC-chart-quaternary: #ffd700;

    /* Glassmorphism Effects */
    --BEC-glassmorphism-bg: rgba(255, 255, 255, 0.95);
    --BEC-glassmorphism-border: rgba(255, 255, 255, 0.18);
    --BEC-glassmorphism-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    --BEC-glassmorphism-blur: blur(10px);

    /* Status Colors */
    --BEC-status-approved-bg: linear-gradient(135deg, #e6f7e6 0%, #d4f4d4 100%);
    --BEC-status-approved-color: #0e7c0e;
    --BEC-status-approved-border: rgba(14, 124, 14, 0.2);
    --BEC-status-pending-bg: linear-gradient(135deg, #fff4e6 0%, #ffead4 100%);
    --BEC-status-pending-color: #bc4b00;
    --BEC-status-pending-border: rgba(188, 75, 0, 0.2);
    --BEC-status-rejected-bg: linear-gradient(135deg, #fde7e9 0%, #fcd4d7 100%);
    --BEC-status-rejected-color: #a80000;
    --BEC-status-rejected-border: rgba(168, 0, 0, 0.2);

    /* Progress Bar */
    --BEC-progress-bg: rgba(0, 0, 0, 0.08);
    --BEC-progress-fill: linear-gradient(90deg, var(--BEC-colorBrandBackground) 0%, var(--BEC-chart-secondary) 100%);
    --BEC-progress-height: 8px;

    /* Button Enhancements */
    --BEC-button-primary-bg: linear-gradient(135deg, #0078d4 0%, #106ebe 100%);
    --BEC-button-primary-hover-shadow: 0 4px 12px rgba(0, 120, 212, 0.35);
    --BEC-button-secondary-border: 1px solid #0078d4;
    --BEC-button-secondary-hover-bg: rgba(0, 120, 212, 0.08);

    /* Focus Indicators */
    --BEC-focus-indicator: 2px solid #0078d4;
    --BEC-focus-offset: 2px;
    --BEC-focus-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
}

/* ============================================================================
   LAYER 2: tokens/_semantic-dark.css
   ============================================================================ */

[data-theme="dark"] {
    /* Neutral Palette (Dark) */
    --BEC-colorNeutralForeground1: #ffffff;
    --BEC-colorNeutralForeground2: #d1d1d1;
    --BEC-colorNeutralForeground3: #a19f9d;
    --BEC-colorNeutralForeground4: #8a8886;
    --BEC-colorNeutralBackground1: #1a1a1a;
    --BEC-colorNeutralBackground2: #2d2d2d;
    --BEC-colorNeutralBackground3: #323130;
    --BEC-colorNeutralBackground4: #3b3a39;
    --BEC-colorNeutralBackground5: #484644;
    --BEC-colorNeutralBackground6: #605e5c;
    --BEC-colorNeutralStroke1: #484644;
    --BEC-colorNeutralStroke2: #605e5c;

    /* Brand Colors (Dark) */
    --BEC-colorBrandBackground: #106ebe;
    --BEC-colorBrandBackgroundHover: #0078d4;
    --BEC-colorBrandBackgroundPressed: #005a9e;
    --BEC-colorBrandBackgroundSelected: #106ebe;
    --BEC-colorBrandForeground1: #106ebe;
    --BEC-colorBrandForeground2: #0078d4;

    /* Semantic Palette (Dark) */
    --BEC-colorPaletteRedBackground1: #3d1a1a;
    --BEC-colorPaletteRedBackground2: #5c2a2a;
    --BEC-colorPaletteRedForeground1: #f1707b;
    --BEC-colorPaletteGreenBackground1: #1a3d1a;
    --BEC-colorPaletteGreenBackground2: #2a5c2a;
    --BEC-colorPaletteGreenForeground1: #92c5f7;
    --BEC-colorPaletteYellowBackground1: #3d3d1a;
    --BEC-colorPaletteYellowBackground2: #5c5c2a;
    --BEC-colorPaletteYellowForeground1: #fde047;

    /* BEC Theme Color Tints (Dark) */
    --BEC-themePrimary: #ffffff;
    --BEC-themeLighterAlt: #1e2130;
    --BEC-themeLighter: #242736;
    --BEC-themeLight: #6a94d7;
    --BEC-themeTertiary: #4776b9;
    --BEC-themeSecondary: #1e3c72;
    --BEC-themeDarkAlt: #0c2654;
    --BEC-themeDark: #172c56;
    --BEC-themeDarker: #111f40;

    /* Communication Colors (Dark) */
    --BEC-errorText: #e74c53;
    --BEC-errorBackground: #2d1b1c;
    --BEC-successText: #30b030;
    --BEC-successBackground: #1b2d1b;
    --BEC-warningText: #ff8c52;
    --BEC-warningBackground: #2d241b;
    --BEC-infoText: #4776b9;
    --BEC-infoBackground: #1b1f2d;

    /* Neutral Semantic Mapping (Dark) */
    --BEC-neutralPrimary: var(--BEC-colorNeutralForeground1);
    --BEC-neutralPrimaryAlt: var(--BEC-colorNeutralForeground2);
    --BEC-neutralSecondary: var(--BEC-colorNeutralForeground3);
    --BEC-neutralTertiary: var(--BEC-colorNeutralForeground4);
    --BEC-neutralTertiaryAlt: var(--BEC-colorNeutralStroke1);
    --BEC-neutralQuaternary: var(--BEC-colorNeutralStroke2);
    --BEC-neutralQuaternaryAlt: var(--BEC-colorNeutralBackground6);
    --BEC-neutralLight: var(--BEC-colorNeutralBackground5);
    --BEC-neutralLighter: var(--BEC-colorNeutralBackground4);
    --BEC-neutralLighterAlt: var(--BEC-colorNeutralBackground3);

    /* Background Surface Colors (Dark) */
    --BEC-neutral-background-1: var(--BEC-colorNeutralBackground1);
    --BEC-neutral-background-2: var(--BEC-colorNeutralBackground2);
    --BEC-neutral-background-3: var(--BEC-colorNeutralBackground3);
    --BEC-neutral-foreground-rest: var(--BEC-colorNeutralForeground1);
    --BEC-neutral-foreground-hover: var(--BEC-colorNeutralForeground2);
    --BEC-neutral-foreground-2: var(--BEC-colorNeutralForeground3);
    --BEC-neutral-stroke-1: var(--BEC-colorNeutralStroke1);
    --BEC-neutral-stroke-2: var(--BEC-colorNeutralStroke2);

    /* Accent Colors (Dark) */
    --BEC-accent-background-rest: var(--BEC-colorBrandBackground);
    --BEC-accent-background-hover: var(--BEC-colorBrandBackgroundHover);
    --BEC-accent-foreground-rest: var(--BEC-colorBrandForeground1);

    /* Semantic Surface Tokens (Dark) */
    --BEC-Surface-Base: var(--BEC-colorNeutralBackground1);
    --BEC-Surface-Alt: var(--BEC-colorNeutralBackground2);
    --BEC-Surface-Hover: var(--BEC-colorNeutralBackground3);
    --BEC-Surface-Elevated: var(--BEC-colorNeutralBackground3);

    /* Semantic Text Tokens (Dark) */
    --BEC-Text-Primary: var(--BEC-colorNeutralForeground1);
    --BEC-Text-Secondary: var(--BEC-colorNeutralForeground3);

    /* Semantic Brand Tokens (Dark) */
    --BEC-Brand-Primary: var(--BEC-colorBrandBackground);
    --BEC-Brand-Secondary: var(--BEC-colorBrandBackgroundHover);

    /* Semantic Border Tokens (Dark) */
    --BEC-Border-Subtle: var(--BEC-colorNeutralStroke1);
    --BEC-Border-Strong: var(--BEC-colorNeutralStroke2);

    /* Semantic Status Tokens (Dark) */
    --BEC-Error-Main: #f1707b;
    --BEC-Error-Subtle: var(--BEC-colorPaletteRedBackground1);
    --BEC-Success-Main: #30b030;
    --BEC-Success-Subtle: var(--BEC-colorPaletteGreenBackground1);
    --BEC-Success-BG: var(--BEC-colorPaletteGreenBackground1);
    --BEC-Warning-Main: #fde047;
    --BEC-Warning-Subtle: var(--BEC-colorPaletteYellowBackground1);
    --BEC-Info-Main: var(--BEC-colorBrandBackground);
    --BEC-Info-Subtle: #1b2d4d;

    color-scheme: dark;
}

/* ============================================================================
   LAYER 2: tokens/_legacy-mappings.css
   ============================================================================ */

:root {
    /* ── Primary Brand ── */
    --bec-primary: var(--BEC-themePrimary);
    --bec-primary-light: var(--BEC-themeLight);
    --bec-primary-dark: var(--BEC-themeDark);

    /* ── Text ── */
    --bec-text: var(--BEC-neutralPrimary);
    --bec-text-light: var(--BEC-neutralSecondary);
    --bec-text-white: #ffffff;

    /* ── Backgrounds ── */
    --bec-bg: var(--BEC-colorNeutralBackground1);
    --bec-border: var(--BEC-neutralLight);

    /* ── Elevation ── */
    --bec-shadow-light: var(--BEC-depth-4);
    --bec-shadow-medium: var(--BEC-depth-8);

    /* ── Communication ── */
    --bec-success: var(--BEC-successText);
    --bec-warning: var(--BEC-warningText);
    --bec-danger: var(--BEC-errorText);
    --bec-info: var(--BEC-infoText);

    /* ── Surface Aliases ── */
    --bec-card-bg: var(--BEC-neutral-background-1);
    --bec-card-header-bg: var(--BEC-neutral-background-2);
    --bec-header-bg: var(--BEC-neutral-background-1);
    --bec-toolbar-bg: var(--BEC-neutral-background-1);
    --bec-container-bg: var(--BEC-neutral-background-1);
    --bec-grid-header-bg: var(--BEC-neutral-background-2);
    --bec-grid-body-bg: var(--BEC-neutral-background-1);

    /* ── Shape Aliases ── */
    --bec-button-radius: var(--BEC-borderRadiusSmall);
    --bec-card-radius: var(--BEC-borderRadiusMedium);
    --bec-input-border: var(--BEC-neutralTertiary);
    --bec-input-radius: var(--BEC-borderRadiusSmall);

    /* ── Table Aliases ── */
    --bec-table-border: var(--BEC-neutral-stroke-2);
    --bec-table-header-background: var(--BEC-neutral-background-2);

    /* ── Neutral Aliases ── */
    --bec-neutral-light: var(--BEC-neutralLight);
    --bec-neutral-medium: var(--BEC-neutralTertiary);
    --bec-neutral-dark: var(--BEC-neutralSecondary);

    /* ── Layout Compatibility ── */
    --header-height: var(--BEC-layoutHeaderHeight);
}

/* ============================================================================
   LAYER 2: tokens/_z-index.css
   ============================================================================ */

:root {
    --BEC-zIndex-Content: 10;
    --BEC-zIndex-Header: 100;
    --BEC-zIndex-Footer: 100;
    --BEC-zIndex-Dropdown: 1000;
    --BEC-zIndex-Overlay: 1050;
    --BEC-zIndex-Modal: 1100;
    --BEC-zIndex-Toast: 1100001;
}

/* ============================================================================
   LAYER 2: tokens/_grid-dashboard.css
   ============================================================================ */

:root {
    /* ── Fluent Blue Palette (Dashboard Accent) ── */
    --BEC-Blue-Light: #EFF6FC;
    --BEC-Blue-Lighter: #DEECF9;

    /* ── Grid-Specific Tokens ── */
    --BEC-Grid-HeaderBg: var(--BEC-Blue-Light);
    --BEC-Grid-Border: #E1DFDD;
    --BEC-Grid-Text: #201F1E;
    --BEC-Grid-Hover: #F3F9FD;
    --BEC-Grid-Selection: #DEECF9;

    /* ── Neutral Gray Aliases (for dashboard pages) ── */
    --BEC-neutralGray10: #FAF9F8;
    --BEC-neutralGray20: #F3F2F1;
    --BEC-neutralGray30: #EDEBE9;
    --BEC-neutralGray60: #C8C6C4;
    --BEC-neutralGray90: #A19F9D;
    --BEC-neutralGray130: #605E5C;
    --BEC-neutralGray160: #323130;
}

/* ============================================================================
   LAYER 2: tokens/_motion-extended.css
   ============================================================================ */

:root {
    /* ── Premium Transition ── */
    --BEC-transitionPremium: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);

    /* ── Premium Shadow (elevated card / hero) ── */
    --BEC-shadowPremium: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   LAYER 2: tokens/_email-approval.css
   ============================================================================ */

:root {
    /* ── Status Colors (Email Corporate Palette) ── */
    --BEC-Approval-PrimaryBlue: #1a5276;
    --BEC-Approval-SuccessGreen: #27ae60;
    --BEC-Approval-WarningOrange: #e67e22;
    --BEC-Approval-DangerRed: #c0392b;
    --BEC-Approval-InfoBlue: #3498db;

    /* ── Text ── */
    --BEC-Approval-TextDark: #2c3e50;
    --BEC-Approval-TextMuted: #5d6d7e;
    --BEC-Approval-TextLight: #7f8c8d;

    /* ── Surface ── */
    --BEC-Approval-Border: #e0e0e0;
    --BEC-Approval-BgLight: #f8f9fa;
}

/* ============================================================================
   LAYER 3: foundations/_global-reset.css
   ============================================================================ */

html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--BEC-fontFamilyBase);
    color: var(--BEC-neutral-foreground-rest);
    background: var(--BEC-neutral-background-1);
    color-scheme: light;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/* ── Scrollbar Styling ── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--BEC-neutralLighter);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorNeutralStroke2);
}

/* ============================================================================
   LAYER 4: overrides/_fluent-web-fixes.css
   ============================================================================ */

/* ── Token Mapping to Fluent Internals ── */
:root {
    /* Stroke (Borders) */
    --neutral-stroke-rest: var(--BEC-colorNeutralStroke1);
    --neutral-stroke-hover: var(--BEC-colorNeutralStroke2);
    --neutral-stroke-active: var(--BEC-themePrimary);
    --neutral-stroke-focus: var(--BEC-themePrimary);

    /* Backgrounds (Fills) */
    --neutral-fill-input-rest: var(--BEC-colorNeutralBackground1);
    --neutral-fill-input-hover: var(--BEC-colorNeutralBackground1);
    --neutral-fill-input-active: var(--BEC-colorNeutralBackground1);
    --neutral-fill-input-focus: var(--BEC-colorNeutralBackground1);

    /* Accents (Primary Brand Color) */
    --accent-fill-rest: var(--BEC-themePrimary);
    --accent-fill-hover: var(--BEC-colorBrandBackgroundHover);
    --accent-fill-active: var(--BEC-colorBrandBackgroundPressed);
    --accent-foreground-rest: var(--BEC-themePrimary);

    /* Text Integration */
    --neutral-foreground-rest: var(--BEC-colorNeutralForeground1);
    --body-font: var(--BEC-fontFamilyBase);

    /* Radius */
    --control-corner-radius: 4px;

    /* Stealth Buttons */
    --neutral-fill-stealth-rest: transparent;
    --neutral-fill-stealth-hover: var(--BEC-colorNeutralBackground6);
}

/* ── Input & Control Border Overrides ── */
fluent-select,
fluent-text-field,
fluent-number-field,
fluent-date-picker,
fluent-search,
fluent-combobox {
    --neutral-stroke-rest: var(--BEC-colorNeutralStroke1) !important;
    --neutral-stroke-hover: var(--BEC-colorNeutralStroke2) !important;
    --neutral-stroke-active: var(--BEC-themePrimary) !important;
    --neutral-stroke-focus: var(--BEC-themePrimary) !important;
    --stroke-width: 1 !important;
    border-radius: 4px;
}

/* ── Outline Buttons ── */
fluent-button[appearance="outline"] {
    --neutral-stroke-rest: var(--BEC-colorNeutralStroke1) !important;
    --neutral-stroke-hover: var(--BEC-colorNeutralStroke2) !important;
    --neutral-stroke-active: var(--BEC-themePrimary) !important;
    --stroke-width: 1 !important;
}

/* ── Accent Buttons — no visible external border ── */
fluent-button[appearance="accent"] {
    --stroke-width: 0 !important;
}

/* ── Shadow DOM Piercing via ::part(control) ── */
fluent-select::part(control),
fluent-text-field::part(control),
fluent-search::part(control),
fluent-combobox::part(control) {
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    border-radius: 4px !important;
}

fluent-select:hover::part(control),
fluent-text-field:hover::part(control),
fluent-search:hover::part(control),
fluent-combobox:hover::part(control) {
    border-color: var(--BEC-colorNeutralStroke2) !important;
}

fluent-select:focus-within::part(control),
fluent-text-field:focus-within::part(control),
fluent-search:focus-within::part(control),
fluent-combobox:focus-within::part(control) {
    border-color: var(--BEC-themePrimary, #0078d4) !important;
    box-shadow: 0 0 0 1px var(--BEC-themePrimary, #0078d4) !important;
}

/* ── Outline Button Shadow DOM ── */
fluent-button[appearance="outline"]::part(control) {
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: 4px !important;
}

fluent-button[appearance="outline"]:hover::part(control) {
    border-color: var(--BEC-colorNeutralStroke2) !important;
    background: var(--BEC-colorNeutralBackground3) !important;
}

/* ── Popup / Listbox ── */
fluent-listbox {
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
}

/* ============================================================================
   LAYER 4: overrides/_syncfusion-responsive.css
   ============================================================================ */

/* ── SMALL SCREENS (Mobile <= 768px) ── */
@media (max-width: 768px) {

    .e-grid {
        font-size: var(--BEC-fontSizeBase300) !important;
    }

    .e-grid .e-gridheader {
        font-size: var(--BEC-fontSizeBase200) !important;
    }

    .e-grid .e-headercell {
        padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalXS) !important;
        font-size: var(--BEC-fontSizeBase200) !important;
    }

    .e-toolbar.e-control {
        padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS) !important;
    }

    .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn {
        padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS) !important;
    }

    .e-dialog {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 90vh !important;
    }

    .e-dialog .e-dlg-header {
        padding: var(--BEC-spacingHorizontalM) !important;
        font-size: var(--BEC-fontSizeBase400) !important;
    }

    .e-dialog .e-dlg-content {
        padding: var(--BEC-spacingHorizontalM) !important;
        font-size: var(--BEC-fontSizeBase300) !important;
    }

    .e-dialog .e-footer-content {
        padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM) !important;
    }

    .e-textbox,
    .e-input-group,
    .e-dropdownlist,
    .e-datepicker,
    .e-numerictextbox {
        min-height: 44px !important;
    }

    .e-input-group .e-input,
    .e-textbox.e-input,
    .e-dropdownlist .e-input,
    .e-datepicker .e-input {
        font-size: var(--BEC-fontSizeBase300) !important;
        padding: var(--BEC-spacingHorizontalM) !important;
    }

    .e-btn {
        min-height: 44px !important;
        padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL) !important;
        font-size: var(--BEC-fontSizeBase300) !important;
    }

    .e-btn.e-small {
        min-height: 36px !important;
        padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM) !important;
    }
}

/* ── MEDIUM SCREENS (Tablet 768px - 1024px) ── */
@media (min-width: 768px) and (max-width: 1024px) {

    .e-grid {
        font-size: var(--BEC-fontSizeBase300) !important;
    }

    .e-grid .e-headercell {
        padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM) !important;
    }

    .e-toolbar.e-control {
        padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL) !important;
    }

    .e-dialog {
        width: 85% !important;
        max-width: 700px !important;
    }

    .e-textbox,
    .e-input-group,
    .e-dropdownlist,
    .e-datepicker,
    .e-numerictextbox {
        min-height: 40px !important;
    }

    .e-btn {
        min-height: 40px !important;
    }
}

/* ── LARGE SCREENS (Desktop >= 1024px) ── */
@media (min-width: 1024px) {

    .e-grid {
        font-size: var(--BEC-fontSizeBase300) !important;
    }

    .e-grid .e-headercell {
        padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL) !important;
    }

    .e-dialog.e-dialog-small {
        width: 400px !important;
        max-width: 400px !important;
    }

    .e-dialog.e-dialog-medium {
        width: 700px !important;
        max-width: 700px !important;
    }

    .e-dialog.e-dialog-large {
        width: 1000px !important;
        max-width: 1000px !important;
    }

    .e-textbox,
    .e-input-group,
    .e-dropdownlist,
    .e-datepicker,
    .e-numerictextbox {
        min-height: 32px !important;
    }

    .e-input-group .e-input,
    .e-textbox.e-input {
        font-size: var(--BEC-fontSizeBase300) !important;
    }

    .e-btn {
        min-height: 32px !important;
        padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL) !important;
    }
}

/* ── EXTRA LARGE SCREENS (>= 1366px) ── */
@media (min-width: 1366px) {
    .e-dialog.e-dialog-large {
        width: 1200px !important;
        max-width: 1200px !important;
    }
}

/* ── 4K SCREENS (>= 1920px) ── */
@media (min-width: 1920px) {
    .e-dialog.e-dialog-large {
        width: 1400px !important;
        max-width: 1400px !important;
    }

    .e-grid .e-headercell,
    .e-grid .e-rowcell {
        padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL) !important;
    }
}

/* ============================================================================
   LAYER 4: overrides/_performance-eval-responsive.css
   ============================================================================ */

/* G7: On mobile, remove fixed-height + overflow:hidden from page containers.
   Syncfusion grid's Height="100%" triggers JS that calculates content-area
   pixel heights. On mobile Safari the flex layout chain hasn't fully resolved
   when this JS runs, producing height:0px on .e-gridcontent AND its child
   .e-content — making rows invisible even though the grid frame is visible.

   Fix: let the container auto-size (flex:1 still fills space) and scroll
   instead of clipping.  !important overrides per-page scoped CSS. */
@media (max-width: 768px) {
    .erp-page-container {
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* G7a: Override Syncfusion's JS-calculated inline pixel heights.
       Both .e-gridcontent AND its child .e-content receive inline style
       "height: 0px" from Syncfusion when the parent's computed height is 0
       at initialization time. The previous fix only targeted .e-gridcontent —
       the inner .e-content still collapsed to 0, hiding all rows.
       height:auto !important overrides the inline style; min-height
       guarantees visibility.  Specificity (0,5,0) beats scoped (0,3,0). */
    .erp-page-container .erp-page-content .e-grid .e-gridcontent {
        min-height: 40vh !important;
        height: auto !important;
    }

    .erp-page-container .erp-page-content .e-grid .e-gridcontent .e-content {
        min-height: 40vh !important;
        height: auto !important;
    }
}

/* G3: Page header — stack vertically on mobile */
@media (max-width: 768px) {
    .erp-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 12px;
    }

    .header-right {
        width: 100%;
    }
}

/* G1: Stats container — wrap to multi-row on mobile */
@media (max-width: 768px) {
    .stats-container,
    .proxy-stats,
    .compact-stats {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .stat-card,
    .proxy-stat {
        min-width: 60px;
    }

    .stat-divider,
    .proxy-stat-divider {
        display: none;
    }

    /* G8: Compact stats alignment */
    .compact-stats {
        justify-content: flex-start;
        padding: 6px 12px;
    }
}

/* G2: Filter bar — wrap dropdowns on mobile */
@media (max-width: 768px) {
    .filter-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px;
    }

    .filter-group {
        flex: 1 1 calc(50% - 8px);
        min-width: 120px;
    }

    .filter-actions {
        margin-left: 0;
        width: 100%;
    }
}

/* G4: Employee info header — wrap on mobile */
@media (max-width: 768px) {
    .employee-info-header {
        flex-wrap: wrap;
        gap: 4px 12px;
    }

    .header-divider {
        display: none;
    }

    .info-item-header {
        flex: 1 1 calc(50% - 12px);
        min-width: 120px;
    }
}

/* G5: Reduce side padding on mobile */
@media (max-width: 768px) {
    .erp-page-header {
        padding: 6px 12px;
    }

    .erp-page-content {
        padding: 8px 8px 24px 8px;
    }

    .erp-page-container .e-toolbar.e-control {
        margin: 3px 8px 1px 8px !important;
        padding: 2px 8px !important;
    }

    .filter-bar {
        padding: 6px 12px;
    }
}

/* G6: Toolbar search responsive width */
@media (max-width: 768px) {
    .e-toolbar .e-textbox.e-input-group {
        max-width: 180px !important;
    }
}

@media (max-width: 480px) {
    .e-toolbar .e-textbox.e-input-group {
        max-width: 140px !important;
    }
}

/* ============================================================================
   LAYER 4: overrides/_toast-zindex.css
   ============================================================================ */

/* ── Syncfusion Toast ── */
.e-toast-container,
.e-toast {
    z-index: 1100001 !important;
    pointer-events: auto !important;
}

.e-toast-container {
    top: 100px !important;
    z-index: 1100001 !important;
}

.e-toast {
    z-index: 1100001 !important;
}

/* ── BEC Custom Toast ── */
.bec-toast-container {
    position: fixed !important;
    top: 100px !important;
    right: 20px !important;
    z-index: 1100001 !important;
    pointer-events: none !important;
}

.bec-toast {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1100001 !important;
}

/* ── Fluent UI Toast ── */
:global(.fluent-toast-container) {
    top: 100px !important;
    z-index: 1100001 !important;
}

:global(.fluent-toast) {
    z-index: 1100001 !important;
}

/* ============================================================================
   LAYER 5: foundations/_layout-global.css
   ============================================================================ */

/* ── DEFAULT: Header positioned for OPEN sidebar ── */
body.sidebar-open .header-bar {
    left: var(--BEC-dashboard-sidebar-width) !important;
    width: calc(100% - var(--BEC-dashboard-sidebar-width)) !important;
    transition: left var(--BEC-durationNormal) var(--BEC-curveEasyEase),
                width var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

/* ── Header positioned for CLOSED sidebar ── */
body:not(.sidebar-open) .header-bar {
    left: 0 !important;
    width: 100% !important;
    transition: left var(--BEC-durationNormal) var(--BEC-curveEasyEase),
                width var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

/* ── Main content adjusts when sidebar is open ── */
body.sidebar-open .main-content {
    margin-left: var(--BEC-dashboard-sidebar-width) !important;
    width: calc(100% - var(--BEC-dashboard-sidebar-width)) !important;
    transition: margin-left var(--BEC-durationNormal) var(--BEC-curveEasyEase),
                width var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

/* ── Main content full width when sidebar is closed ── */
body:not(.sidebar-open) .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    transition: margin-left var(--BEC-durationNormal) var(--BEC-curveEasyEase),
                width var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

/* ── Mobile: Header always full width ── */
@media (max-width: 1023px) {
    .header-bar {
        left: 0 !important;
        width: 100% !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* ── Ensure header is always visible and positioned correctly ── */
.header-bar {
    position: fixed !important;
    top: 0 !important;
    z-index: 1001 !important;
    left: var(--BEC-dashboard-sidebar-width);
    width: calc(100% - var(--BEC-dashboard-sidebar-width));
}

/* ── Syncfusion sidebar visibility detection (fallback) ── */
.e-sidebar.e-open ~ .header-bar {
    left: var(--BEC-dashboard-sidebar-width) !important;
    width: calc(100% - var(--BEC-dashboard-sidebar-width)) !important;
}

.e-sidebar:not(.e-open) ~ .header-bar {
    left: 0 !important;
    width: 100% !important;
}

/* ── Ensure FluentUI dialogs always appear above drawers/panels ── */
fluent-dialog {
    z-index: 1100 !important;
}

.fluent-dialog-overlay {
    z-index: 1099 !important;
}

/* ============================================================================
   LAYER 6: shared/_wizard-panel.css
   ============================================================================ */

/* ── PANEL CONTAINER ── */
.sp-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--BEC-Surface-Alt, #fff);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
    will-change: transform;
}

/* ── HEADER ── */
.sp-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--BEC-Surface-Base, #fff);
}

.sp-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--BEC-Text-Primary, #323130);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-close-btn {
    border: none;
    background: transparent;
    padding: 8px;
    cursor: pointer;
    color: var(--BEC-Text-Secondary, #605e5c);
    border-radius: 4px;
    transition: background 0.15s ease;
}

.sp-close-btn:hover {
    background: var(--BEC-Surface-Hover, #f3f2f1);
}

/* ── BODY ── */
.sp-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--BEC-Surface-Base, #fff);
}

.sp-content {
    flex: 1;
    padding: 20px 24px;
    overflow-y: auto;
}

/* ── FOOTER ── */
.sp-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
    background: var(--BEC-Surface-Alt, #faf9f8);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── FORM ELEMENTS ── */
.sp-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-form-group {
    margin-bottom: 16px;
}

/* Tame FluentTextArea thick black border */
.sp-form-group fluent-text-area::part(control) {
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
}

.sp-form-group fluent-text-area::part(control):focus-within {
    border-color: var(--BEC-colorBrandBackground, #0078d4);
    outline: none;
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground, #0078d4);
}

.sp-label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
    color: var(--BEC-Text-Primary, #323130);
}

.sp-required {
    color: var(--BEC-Error-Main, #a4262c);
}

/* ── Inline Field Validation Errors ── */
.sp-field-error {
    display: block;
    font-size: 12px;
    color: var(--BEC-Error-Main, #d13438);
    margin-top: 4px;
    line-height: 1.3;
}

.sp-form-group--error .e-outline .e-input-group,
.sp-form-group--error .e-outline.e-input-group {
    border-color: var(--BEC-Error-Main, #d13438) !important;
}

.sp-form-group--error .sp-label {
    color: var(--BEC-Error-Main, #d13438);
}

.sp-file-upload--error {
    border-color: var(--BEC-Error-Main, #d13438) !important;
}

.sp-form-row {
    display: flex;
    gap: 16px;
}

.sp-form-col {
    flex: 1;
}

/* ── FILE UPLOAD ── */
.sp-file-upload {
    border: 2px dashed var(--BEC-Border-Strong, #c8c6c4);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--BEC-Surface-Base, #fff);
}

.sp-file-upload:hover {
    border-color: var(--BEC-Brand-Primary, #0078d4);
    background: var(--BEC-Surface-Alt, #faf9f8);
}

.sp-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.sp-file-content {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.sp-file-icon {
    font-size: 24px;
}

.sp-file-upload--attached {
    border-style: solid;
    border-color: var(--BEC-Success-Main, #107c10);
    background: var(--BEC-Success-Subtle, #dff6dd);
}

.sp-file-upload--attached .sp-file-content {
    color: var(--BEC-Success-Main, #107c10);
}

.sp-file-name {
    font-weight: 600;
}

.sp-file-size {
    font-size: 12px;
    opacity: 0.8;
}

/* ── STATES (Loading, Success) ── */
.sp-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    gap: 16px;
    padding: 48px 24px;
}

.sp-state h4 {
    margin: 0;
    font-size: 20px;
    color: var(--BEC-Text-Primary, #323130);
}

.sp-state p {
    margin: 0;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.sp-state-icon {
    font-size: 48px;
}

.sp-state--success .sp-state-icon {
    color: var(--BEC-Success-Main, #107c10);
}

.sp-state-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

/* Loading Spinner */
.sp-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--BEC-Border-Subtle, #edebe9);
    border-top-color: var(--BEC-Brand-Primary, #0078d4);
    border-radius: 50%;
    animation: sp-spin 0.8s linear infinite;
}

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

/* ── ALERT ── */
.sp-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 14px;
}

.sp-alert-error,
.sp-alert--error {
    background: var(--BEC-Error-Subtle, #fde7e9);
    color: var(--BEC-Error-Main, #a4262c);
    border: 1px solid var(--BEC-Error-Main, #a4262c);
}

.sp-alert-warning,
.sp-alert--warning {
    background: var(--BEC-Warning-Subtle, #fff4ce);
    color: var(--BEC-Warning-Main, #797673);
    border: 1px solid var(--BEC-Warning-Main, #ffb900);
}

.sp-alert-dismiss {
    margin-left: auto;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px;
    color: inherit;
    opacity: 0.7;
}

.sp-alert-dismiss:hover {
    opacity: 1;
}

/* ── EMPTY STATE ── */
.sp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.sp-empty p {
    margin: 16px 0 0;
}

/* ── LOADING BUTTON ── */
.sp-footer .e-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    font-size: 13px;
    padding: 6px 16px;
    line-height: 1;
}

.sp-footer .e-btn fluent-progress-ring {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ============================================================================
   LAYER 6: shared/_competition.css
   ============================================================================ */

/* ── COMPETITION CARD ── */
.BEC-Competition-Card {
    background: linear-gradient(135deg, var(--BEC-Brand-Primary, #0078d4) 0%, var(--BEC-Brand-Secondary, #106ebe) 100%);
    border-radius: 8px;
    padding: 24px;
    color: #fff;
    margin-bottom: 24px;
}

.BEC-Competition-Card--past {
    background: linear-gradient(135deg, #605e5c 0%, #484644 100%);
}

.BEC-Competition-Header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.BEC-Competition-Period {
    font-size: 16px;
    font-weight: 600;
}

.BEC-Competition-Stats {
    display: flex;
    gap: 32px;
}

.BEC-Stat-Item {
    text-align: center;
}

.BEC-Stat-Value {
    display: block;
    font-size: 24px;
    font-weight: 700;
}

.BEC-Stat-Label {
    font-size: 12px;
    opacity: 0.9;
}

/* ── SECTION HEADERS ── */
.BEC-Section-Header-Row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 24px 0 16px;
}

.BEC-Section-Title {
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── TOP 5 GRID ── */
.BEC-Top5-Grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.BEC-Top5-Card {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--BEC-Surface-Base, #fff);
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 8px;
    gap: 16px;
}

.BEC-Top5-Card--current {
    background: var(--BEC-Info-Subtle, #deecf9);
    border-color: var(--BEC-Info-Main, #0078d4);
}

.BEC-Top5-Rank {
    min-width: 48px;
    font-size: 16px;
    font-weight: 700;
    color: var(--BEC-Text-Secondary, #605e5c);
    display: flex;
    align-items: center;
    gap: 4px;
}

.BEC-Top5-Rank.BEC-Rank--gold { color: #ffc107; }
.BEC-Top5-Rank.BEC-Rank--silver { color: #9e9e9e; }
.BEC-Top5-Rank.BEC-Rank--bronze { color: #cd7f32; }

.BEC-Top5-Info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.BEC-Top5-Name {
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

.BEC-Top5-Dept {
    font-size: 12px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.BEC-Top5-Score {
    text-align: right;
}

.BEC-Top5-Count {
    font-size: 20px;
    font-weight: 700;
    color: var(--BEC-Brand-Primary, #0078d4);
}

.BEC-Top5-Label {
    display: block;
    font-size: 11px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ── MY POSITION CARD ── */
.BEC-MyPosition-Card {
    background: var(--BEC-Surface-Alt, #faf9f8);
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}

.BEC-MyPosition-Header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--BEC-Text-Primary, #323130);
}

.BEC-MyPosition-Stats {
    display: flex;
    gap: 24px;
    align-items: center;
}

/* ── WINNERS PODIUM ── */
.BEC-Winners-Podium {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.BEC-Winner-Card {
    display: flex;
    align-items: center;
    padding: 16px;
    background: var(--BEC-Surface-Base, #fff);
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 8px;
    gap: 16px;
}

.BEC-Winner-Card.BEC-Rank--gold {
    background: linear-gradient(90deg, rgba(255,193,7,0.1) 0%, transparent 100%);
    border-color: #ffc107;
}

.BEC-Winner-Card.BEC-Rank--silver {
    background: linear-gradient(90deg, rgba(158,158,158,0.1) 0%, transparent 100%);
    border-color: #9e9e9e;
}

.BEC-Winner-Card.BEC-Rank--bronze {
    background: linear-gradient(90deg, rgba(205,127,50,0.1) 0%, transparent 100%);
    border-color: #cd7f32;
}

.BEC-Winner-Medal {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
}

.BEC-Winner-Rank {
    font-weight: 700;
    font-size: 12px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.BEC-Winner-Info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.BEC-Winner-Name {
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    display: flex;
    align-items: center;
    gap: 8px;
}

.BEC-Winner-Name--you {
    color: var(--BEC-Brand-Primary, #0078d4);
}

.BEC-Winner-Dept {
    font-size: 12px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.BEC-Winner-Stats {
    text-align: right;
}

.BEC-Winner-Count {
    font-size: 24px;
    font-weight: 700;
    color: var(--BEC-Brand-Primary, #0078d4);
}

.BEC-Winner-Label {
    display: block;
    font-size: 11px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ============================================================================
   LAYER 6: shared/_badges-helpers.css
   ============================================================================ */

/* ── Grid Rank Indicators ── */
.BEC-Grid-Rank {
    font-weight: 700;
}

.BEC-Grid-Rank.BEC-Rank--gold { color: #ffc107; }
.BEC-Grid-Rank.BEC-Rank--silver { color: #9e9e9e; }
.BEC-Grid-Rank.BEC-Rank--bronze { color: #cd7f32; }

.BEC-Grid-Employee {
    display: flex;
    align-items: center;
    gap: 8px;
}

.BEC-Grid-Employee--current {
    font-weight: 600;
}

.BEC-Grid-Name {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Semantic Badges ── */
.BEC-Badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.BEC-Badge--success {
    background: var(--BEC-Success-Subtle, #dff6dd);
    color: var(--BEC-Success-Main, #107c10);
}

.BEC-Badge--info {
    background: var(--BEC-Info-Subtle, #deecf9);
    color: var(--BEC-Info-Main, #0078d4);
}

.BEC-Badge--error {
    background: var(--BEC-Error-Subtle, #fde7e9);
    color: var(--BEC-Error-Main, #d13438);
}

.BEC-Badge--neutral {
    background: var(--BEC-Surface-Alt, #f3f2f1);
    color: var(--BEC-Text-Secondary, #605e5c);
}

.BEC-Badge--warning {
    background: var(--BEC-Warning-Subtle, #fff4ce);
    color: var(--BEC-Warning-Main, #ffaa44);
}

.BEC-Badge--accent {
    background: var(--BEC-Info-Subtle, #deecf9);
    color: var(--BEC-Info-Main, #0078d4);
    font-weight: 700;
}

.BEC-Badge--viewed {
    background: var(--BEC-Success-Subtle, #dff6dd);
    color: var(--BEC-Success-Main, #107c10);
    font-size: 11px;
}

.BEC-Badge--sm {
    font-size: 10px;
    padding: 2px 6px;
}

/* ── Text Helpers ── */
.BEC-Text-Small {
    font-size: 12px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ── Load More ── */
.BEC-Load-More {
    padding: 16px;
    text-align: center;
}

/* ── Empty State ── */
.BEC-Empty-State {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.BEC-Empty-State p {
    margin: 8px 0;
}

/* ── Filter Row ── */
.BEC-Filter-Row {
    margin-bottom: 24px;
}

.BEC-Label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
    color: var(--BEC-Text-Primary, #323130);
}

/* ── Horizontal Capacity Bar ── */
.BEC-Utilization {
    display: flex;
    align-items: center;
    gap: 8px;
}

.BEC-Utilization-Track {
    flex: 1;
    height: 8px;
    background: var(--BEC-colorNeutralBackground3, #f3f2f1);
    border-radius: 4px;
    overflow: hidden;
}

.BEC-Utilization-Fill {
    height: 100%;
    border-radius: 4px;
    background: var(--BEC-colorBrandBackground, #0078d4);
    width: var(--util-width, 0%);
    transition: width 0.3s ease;
}

.BEC-Utilization-Fill--warning {
    background: var(--BEC-Warning-Main, #ffb900);
}

.BEC-Utilization-Fill--danger {
    background: var(--BEC-Error-Main, #d13438);
}

.BEC-Utilization-Label {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-Text-Secondary, #605e5c);
    white-space: nowrap;
    min-width: 40px;
    text-align: right;
}

/* ============================================================================
   LAYER 6: shared/_detail-panel.css
   ============================================================================ */

/* ── PERSONA HEADER ── */
.dp-persona {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    margin-bottom: 20px;
    background: var(--BEC-Surface-Alt, #faf9f8);
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 8px;
}

.dp-persona-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--BEC-Brand-Primary, #0078d4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.dp-persona-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dp-persona-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-persona-role {
    font-size: 13px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ── SECTIONS ── */
.dp-section {
    margin-bottom: 20px;
}

.dp-section--compact {
    margin-bottom: 12px;
}

.dp-section-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

/* ── DATA GRID ── */
.dp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.dp-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dp-label {
    font-size: 12px;
    color: var(--BEC-Text-Secondary, #605e5c);
    text-transform: uppercase;
}

.dp-value {
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
}

.dp-value--accent {
    font-weight: 700;
    color: var(--accent-fill-rest, #0078d4);
}

.dp-link {
    color: var(--BEC-Brand-Primary, #0078d4);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dp-link:hover {
    text-decoration: underline;
}

/* ── NOTES ── */
.dp-notes {
    background: var(--BEC-Surface-Alt, #faf9f8);
    padding: 8px 12px;
    border-radius: 6px;
}

.dp-notes p {
    margin: 0;
    color: var(--BEC-Text-Primary, #323130);
    line-height: 1.5;
}

.dp-notes-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-Text-Primary, #323130);
    background: var(--BEC-Surface-Alt, #faf9f8);
    padding: 8px 12px;
    border-radius: 6px;
}

/* ── CV CARD ── */
.dp-cv-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--BEC-Surface-Alt, #faf9f8);
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 6px;
}

.dp-cv-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.dp-cv-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--BEC-Text-Primary, #323130);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── ICON BUTTON ── */
.dp-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--BEC-Border-Strong, #c8c6c4);
    border-radius: 4px;
    background: transparent;
    color: var(--BEC-Text-Secondary, #605e5c);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.dp-icon-btn:hover:not(:disabled) {
    background: var(--BEC-Surface-Hover, #f3f2f1);
    color: var(--BEC-Brand-Primary, #0078d4);
    border-color: var(--BEC-Brand-Primary, #0078d4);
}

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

/* ── STATUS GRID ── */
.dp-status-grid {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.dp-status-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dp-score {
    font-size: 24px;
    font-weight: 700;
}

.dp-score--qualified {
    color: var(--BEC-Success-Main, #107c10);
}

.dp-score--not-qualified {
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ── FEEDBACK ── */
.dp-feedback {
    margin-top: 16px;
    padding: 16px;
    background: var(--BEC-Info-Subtle, #deecf9);
    border-radius: 8px;
}

.dp-feedback-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-Info-Main, #0078d4);
    margin-bottom: 8px;
}

.dp-feedback-text {
    margin: 0;
    color: var(--BEC-Text-Primary, #323130);
    line-height: 1.5;
}

/* ── TIMELINE ── */
.dp-timeline {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dp-timeline-item {
    display: flex;
    gap: 16px;
}

.dp-timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}

.dp-dot-success {
    background: var(--BEC-Success-Main, #107c10);
}

.dp-dot-neutral {
    background: var(--BEC-Text-Secondary, #605e5c);
}

.dp-timeline-content {
    display: flex;
    flex-direction: column;
}

.dp-timeline-date {
    font-size: 12px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.dp-timeline-text {
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
}

.dp-timeline-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    line-height: 1.4;
}

.dp-timeline-subtitle {
    font-size: 12px;
    color: var(--BEC-Text-Secondary, #605e5c);
    line-height: 1.4;
}

/* ── AI Profile ── */
.dp-section-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--BEC-colorBrandBackground2, #e8ebf9);
    color: var(--BEC-colorBrandForeground1, #0078d4);
    margin-left: auto;
}

/* ── Chips ── */
.dp-chips-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.dp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dp-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    color: var(--BEC-Text-Primary, #323130);
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    line-height: 1.3;
}

.dp-chip--brand {
    background: var(--BEC-colorBrandBackground2, #e8ebf9);
    color: var(--BEC-colorBrandForeground1, #0078d4);
    border-color: transparent;
}

.dp-chip--success {
    background: var(--BEC-Success-BG, #dff6dd);
    color: var(--BEC-Success-Main, #107c10);
    border-color: transparent;
}

.dp-chip--outline {
    background: transparent;
    border: 1px solid var(--BEC-Border-Strong, #8a8886);
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ── Subsections ── */
.dp-subsection {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.dp-subsection .dp-timeline-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    border-radius: 6px;
    border-left: 3px solid var(--BEC-colorBrandBackground, #0078d4);
}

/* ============================================================================
   LAYER 6: shared/_toast-styles.css
   ============================================================================ */

.BEC-Toast {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    box-shadow: var(--BEC-shadow16, 0 6.4px 14.4px rgba(0,0,0,.132), 0 1.2px 3.6px rgba(0,0,0,.108));
}

.BEC-Toast--error {
    background: rgba(253, 231, 233, 0.95);
    border: 1px solid var(--BEC-Error-Main, #d13438);
}

.BEC-Toast--success {
    background: rgba(223, 246, 221, 0.95);
    border: 1px solid var(--BEC-Success-Main, #107c10);
}

.BEC-Toast--warning {
    background: rgba(255, 244, 206, 0.95);
    border: 1px solid var(--BEC-Warning-Main, #ffb900);
}