/* ============================================================================ 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 with wwwroot/css/bundle-theme.py. ============================================================================ */ /* ============================================================================ LAYER 1: tokens/_primitives.css ============================================================================ */ /* ============================================================================ BEC DESIGN TOKENS — LAYER 1: PRIMITIVES ============================================================================ Raw value definitions from Microsoft Fluent Design System 2. These are the foundational building blocks. Components should NOT reference these directly — use semantic tokens from _semantic-light.css instead. ============================================================================ */ :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 ============================================================================ */ /* ============================================================================ BEC DESIGN TOKENS — LAYER 2: SEMANTIC (LIGHT THEME) ============================================================================ Maps primitive tokens to semantic purpose. Components reference THESE tokens. "What is it for" not "what does it look like". ============================================================================ */ :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 ── Used by wizard-panel, detail-panel, badges, competition components */ --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 app preference: slightly rounder than Fluent 2 defaults */ --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-SPECIFIC DESIGN TOKENS ============================================================================ */ /* Dashboard Layout */ --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); /* ============================================================================ APP SHELL v0.2 TOKENS — Bec* shell components (design system, see BEC Aspire Foundation Setup02/docs/Shell - Spec & Handoff.md §10) Additive only — not yet consumed by any component. ============================================================================ */ --BEC-navSurface: #0F2D6E; --BEC-navSurfaceAlt: #0C244F; --BEC-navText: rgba(255, 255, 255, 0.86); --BEC-navTextMuted: rgba(255, 255, 255, 0.52); --BEC-navActive: rgba(255, 255, 255, 0.16); --BEC-navHover: rgba(255, 255, 255, 0.09); --BEC-surfaceTier2: #F0F2F5; --BEC-focusRing: #2B4D81; } /* ============================================================================ LAYER 2: tokens/_semantic-dark.css ============================================================================ */ /* ============================================================================ BEC DESIGN TOKENS — LAYER 2: SEMANTIC (DARK THEME) ============================================================================ Single canonical dark mode definition. Merged from two previously separate blocks to eliminate duplication. Activated via data-theme="dark" attribute on a parent element. ============================================================================ */ [data-theme="dark"] { /* ── PRIMITIVE OVERRIDES ── Override the neutral/brand/palette primitives for dark surfaces */ /* 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; /* ── SEMANTIC MAPPING ── Re-derive semantic tokens from the dark primitives above */ /* 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; /* ============================================================================ APP SHELL v0.2 TOKENS — Bec* shell components (design system, see BEC Aspire Foundation Setup02/docs/Shell - Spec & Handoff.md §10) Additive only — not yet consumed by any component. ============================================================================ */ --BEC-navSurface: #0C1F45; --BEC-navSurfaceAlt: #0A1A3A; --BEC-navText: rgba(255, 255, 255, 0.84); --BEC-navTextMuted: rgba(255, 255, 255, 0.50); --BEC-navActive: rgba(255, 255, 255, 0.14); --BEC-navHover: rgba(255, 255, 255, 0.08); --BEC-surfaceTier2: #2A2D34; --BEC-focusRing: #89AEE0; color-scheme: dark; } /* ============================================================================ LAYER 2: tokens/_legacy-mappings.css ============================================================================ */ /* ============================================================================ BEC DESIGN TOKENS — LEGACY MAPPINGS ============================================================================ Backward-compatible aliases for older pages that use --bec-* (lowercase) naming convention. These map to the canonical --BEC-* tokens. Used by: MainLayoutLandingPage, PublicVisitorForm, ExternalReferral DO NOT add new tokens here. Use --BEC-* tokens in new code. ============================================================================ */ :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 ── Some pages reference --header-height directly */ --header-height: var(--BEC-layoutHeaderHeight); } /* ============================================================================ LAYER 2: tokens/_z-index.css ============================================================================ */ /* ============================================================================ BEC DESIGN TOKENS — Z-INDEX SCALE ============================================================================ Centralized z-index hierarchy. All z-index values across the app should reference these tokens to prevent stacking-context collisions. Hierarchy (low → high): Content → Header/Footer → Dropdown → Overlay → Modal → Toast ============================================================================ */ :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 ============================================================================ */ /* ============================================================================ BEC DESIGN TOKENS — GRID & DASHBOARD ============================================================================ Semantic tokens for data-grid and dashboard components. Used by: LogisticsDashboard, BookingDashboard, and similar grid-heavy pages. ============================================================================ */ :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 ============================================================================ */ /* ============================================================================ BEC DESIGN TOKENS — MOTION EXTENDED ============================================================================ Premium transition and shadow tokens for public-facing forms and special-purpose pages (Visitor Form, External Referral, etc.). ============================================================================ */ :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 ============================================================================ */ /* ============================================================================ BEC DESIGN TOKENS — EMAIL APPROVAL ============================================================================ Corporate color palette for external-facing email approval pages. These pages use a distinct palette to match the email template branding. Used by: ApprovalReject, ApprovalAction ============================================================================ */ :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 ============================================================================ */ /* ============================================================================ BEC FOUNDATIONS — GLOBAL RESET & BASE STYLES ============================================================================ HTML/body reset, box-sizing inheritance, scrollbar styling. Must load AFTER token files. ============================================================================ */ 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 ============================================================================ */ /* ============================================================================ BEC OVERRIDES — FLUENT UI WEB COMPONENT FIXES ============================================================================ Maps BEC Enterprise Tokens to Fluent Web Component internal variables. Fixes the high-contrast default styling (thick black borders) that the FluentDesignTheme JS computes as inline styles. Uses !important to beat JS-computed inline styles — this is intentional. ============================================================================ */ /* ── 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 ── Beat JS-computed inline styles with !important */ 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 ============================================================================ */ /* ============================================================================ BEC OVERRIDES — SYNCFUSION BLAZOR RESPONSIVE DESIGN SYSTEM ============================================================================ Mobile-First responsive overrides for Syncfusion components. Based on Syncfusion Best Practices for Enterprise ERP. Breakpoints: Small: <= 768px (Mobile) Medium: 768-1024px (Tablet) Large: >= 1024px (Desktop) Extra Large: >= 1366px 4K: >= 1920px ============================================================================ */ /* ======================================== SMALL SCREENS (Mobile <= 768px) ======================================== */ @media (max-width: 768px) { /* ── Syncfusion Grid ── */ .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; } /* ── Syncfusion Toolbar ── */ .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; } /* ── Syncfusion Dialog ── */ .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; } /* ── Syncfusion Form Controls — Mobile Touch Targets ── */ .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; } /* ── Syncfusion Buttons — Mobile Touch Targets ── */ .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; } } /* ======================================== EXCEL-STYLE COLUMN FILTER POPUP ======================================== Syncfusion renders .e-excelfilter at BODY level, outside the component that owns the grid. Page-scoped ::deep rules therefore never reach it — which is why several pages carry a `::deep .e-grid .e-excelfilter { width: 450px }` block that has no effect and the popup still rendered ~560px wide, tall enough to cover the toolbar (reported 28 Sep 2026 on Birthday Administration). These rules are unscoped on purpose. Do not move them into a .razor.css. */ .e-excelfilter.e-popup, .e-excelfilter.e-popup.e-popup-open { width: 340px !important; max-width: 92vw !important; height: auto !important; max-height: min(70vh, 520px) !important; font-size: 13px !important; border-radius: var(--BEC-borderRadiusMedium, 6px) !important; box-shadow: var(--BEC-shadow16, 0 8px 24px rgba(0, 0, 0, 0.18)) !important; overflow: hidden !important; } /* The checkbox list is what made it tall: a 300px min-height forced the popup open to full size even for a handful of values. Let it size to content. */ .e-excelfilter .e-checkboxlist { min-height: 0 !important; max-height: 220px !important; overflow-y: auto !important; } .e-excelfilter .e-dlg-content { padding: 8px !important; } .e-excelfilter .e-searchcontainer { padding: 6px 8px !important; } .e-excelfilter .e-ftrchk { padding: 1px 0 !important; } .e-excelfilter .e-checkboxlist .e-ftrchk .e-label { font-size: 13px !important; } /* Header row (back arrow / title / OK) was oversized relative to the body. */ .e-excelfilter .e-dlg-header, .e-excelfilter .e-dlg-header-content { padding: 8px 10px !important; } .e-excelfilter .e-dlg-header { font-size: 14px !important; } /* Narrow screens: never let it run off the viewport. */ @media (max-width: 640px) { .e-excelfilter.e-popup, .e-excelfilter.e-popup.e-popup-open { width: 92vw !important; max-height: 75vh !important; } .e-excelfilter .e-checkboxlist { max-height: 40vh !important; } } /* ======================================== FILTER ICON vs COLUMN SORT — hit target ======================================== The filter icon (.e-filtermenudiv) sits INSIDE .e-headercell, and the header cell is what carries the sort handler. Syncfusion stops propagation when the icon itself is hit, so the bug is purely one of aim: the default icon is ~16px inside a ~40px cell, so a click a few pixels off opens a sort instead of the filter (reported 28 Sep 2026). Fix is ergonomic, not behavioural — enlarge the icon's clickable area, lift it above the header's click surface, and give it hover/active feedback so the two zones are visibly distinct. Sorting is untouched: clicking the header text still sorts, which is what people expect. */ .e-grid .e-gridheader .e-headercell .e-filtermenudiv, .e-grid .e-gridheader .e-headercelldiv + .e-filtermenudiv { display: inline-flex !important; align-items: center !important; justify-content: center !important; inline-size: 28px !important; block-size: 28px !important; padding: 0 !important; border-radius: var(--BEC-borderRadiusSmall, 4px); position: relative; z-index: 2; /* above the header cell's own click surface */ cursor: pointer; } .e-grid .e-gridheader .e-headercell .e-filtermenudiv:hover { background: var(--BEC-colorNeutralBackground3, rgba(0, 0, 0, 0.08)) !important; } .e-grid .e-gridheader .e-headercell .e-filtermenudiv:active { background: var(--BEC-colorNeutralBackground4, rgba(0, 0, 0, 0.14)) !important; } /* Visible keyboard focus — the enlarged target is also a tab stop. */ .e-grid .e-gridheader .e-headercell .e-filtermenudiv:focus-visible { outline: 2px solid var(--BEC-colorBrandStroke1, #1e3c72) !important; outline-offset: -2px !important; } /* NOTE — a global `padding-inline-end: 32px !important` on .e-headercelldiv used to live here, to keep the header label clear of the enlarged icon. It was removed on 1 Oct 2026 because it broke every grid with narrow columns. Reserving 32px on EVERY header (38px on touch) leaves almost nothing for the label in an 80-120px column. Combined with AllowTextWrap="true" the label wrapped and was then clipped by the header height, so the HR referral dashboard rendered "Source" as "So", "Score" as "S c.", "Status" as "Statu", "Reward" as "Re" and "Payment" as "Paym". Because the rule was !important and global, no page could correct it locally. The enlarged hit target above is kept — that was the actual 28 Sep complaint and it does not reserve layout width. Any grid that needs real clearance asks for it per grid, the way .birthday-admin-grid does below, where the width of its own pinned button is known. */ /* Touch: fingers are blunter than cursors. */ @media (pointer: coarse) { .e-grid .e-gridheader .e-headercell .e-filtermenudiv { inline-size: 34px !important; block-size: 34px !important; } } /* ======================================== BIRTHDAY GRID — own filter button, pinned right ======================================== That grid replaces Syncfusion's filter with its own button, rendered INSIDE .e-headertext. Two things kept it away from the right edge (reported 28 Sep 2026, with the DOM): 1. .e-headertext is shrink-to-fit, so a width:100% child ends where the LABEL ends — the button trailed the text rather than reaching the edge. 2. A global .e-headercelldiv padding-inline-end:32px rule — since removed, see the note above — pushed it a further 32px inboard. This grid now carries its own 48px clearance below instead. So the button is taken out of flow and pinned to .e-headercell, and the sort arrow is moved inboard so the two never overlap. Scoped to this grid: every other grid still uses Syncfusion's icon and needs the rule above unchanged. */ .birthday-admin-grid .e-gridheader .e-headercell { position: relative; } .birthday-admin-grid .e-gridheader .e-headercelldiv { inline-size: 100%; /* room for the sort arrow AND the filter button, not Syncfusion's icon */ padding-inline-end: 48px !important; } .birthday-admin-grid .e-gridheader .e-headertext { display: block; inline-size: 100%; } .birthday-admin-grid .e-gridheader .bf-head { inline-size: 100%; } .birthday-admin-grid .e-gridheader .bf-filter-btn { position: absolute; inset-inline-end: 4px; inset-block-start: 50%; transform: translateY(-50%); z-index: 2; } /* Sort arrow sits inboard of the filter button so they never stack. */ .birthday-admin-grid .e-gridheader .e-sortfilterdiv { inset-inline-end: 28px !important; } /* ============================================================================ LAYER 4: overrides/_performance-eval-responsive.css ============================================================================ */ /* ========================================================================== Performance Evaluation Module — Mobile Responsive Overrides Applied globally to all PE pages via shared CSS class patterns ========================================================================== */ /* 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 ============================================================================ */ /* ============================================================================ BEC OVERRIDES — TOAST NOTIFICATION Z-INDEX ============================================================================ Ensures toast notifications appear above dialog overlays and all elements. Positioned below header (60px header + 36px toolbar + 4px margin = 100px). ============================================================================ */ /* Shared offset: header height + breathing space under app bar */ :root { --BEC-toastTopOffset: calc(var(--BEC-layoutHeaderHeight) + var(--BEC-spacingHorizontalXXXL) + var(--BEC-spacingHorizontalXS)); } /* ── Syncfusion Toast ── */ .e-toast-container, .e-toast { z-index: var(--BEC-zIndex-Toast) !important; pointer-events: auto !important; } .e-toast-container { top: var(--BEC-toastTopOffset, 100px) !important; z-index: var(--BEC-zIndex-Toast) !important; max-width: calc(100vw - 24px) !important; overflow: visible !important; } .e-toast { z-index: var(--BEC-zIndex-Toast) !important; } /* ── BEC Custom Toast ── */ .bec-toast-container { position: fixed !important; top: var(--BEC-toastTopOffset, 100px) !important; right: max(12px, env(safe-area-inset-right)) !important; left: auto !important; width: min(420px, calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; z-index: var(--BEC-zIndex-Toast) !important; pointer-events: none !important; } .bec-toast { pointer-events: auto !important; position: relative !important; max-width: 100% !important; z-index: var(--BEC-zIndex-Toast) !important; } /* ── Fluent UI Toast ── */ .fluent-toast-provider { position: fixed !important; top: var(--BEC-toastTopOffset, 100px) !important; right: max(12px, env(safe-area-inset-right)) !important; left: auto !important; bottom: auto !important; width: min(420px, calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; overflow: visible !important; z-index: var(--BEC-zIndex-Toast) !important; } .fluent-toast-provider[class*="position-top"] { top: var(--BEC-toastTopOffset, 100px) !important; } .fluent-toast { max-width: 100% !important; z-index: var(--BEC-zIndex-Toast) !important; } /* ============================================================================ LAYER 5: foundations/_layout-global.css ============================================================================ */ /* ======================================== GLOBAL LAYOUT POSITIONING RULES These MUST be in a global CSS file to work in Release mode Scoped CSS doesn't support :has() and body class selectors ======================================== */ /* ✅ DEFAULT: Header positioned for OPEN sidebar (sidebar-open class on body) */ 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 (no sidebar-open class) */ 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 (sidebar overlays) Breakpoint: --BEC-breakpointExtraLarge (1024px) minus 1 Note: var() is invalid in @media queries per CSS spec — hardcode value */ @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; /* Default positioning - will be overridden by body classes above */ 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 (z-index: 1050) */ fluent-dialog { z-index: 1100 !important; } .fluent-dialog-overlay { z-index: 1099 !important; } /* ✅ Footer grid layout — kept global because Blazor CSS isolation cannot reliably hot-reload this component's scoped CSS after prior edit failures */ .ftr-body { display: grid !important; grid-template-columns: 1.6fr 1fr 1.2fr !important; gap: 0.75rem !important; align-items: start !important; width: 100% !important; } @media (max-width: 768px) { .ftr-body { grid-template-columns: 1fr !important; } } /* ── Side panels on small screens ───────────────────────────────────────── Every side panel in the app is a Syncfusion SfSidebar, and SfSidebar's Width parameter is a fixed value it writes as an inline style — it has no responsive form. 76 pages open one; 28 of them pass a hard pixel width (500px, 600px, ...) with no media query of their own, so on a 375px phone the panel was wider than the screen: its right-hand side, which is where the Save/Cancel actions live, sat off-canvas and unreachable. The 48 pages that DID handle this each repeat the same two blocks in their own scoped stylesheet (see BecDetailPanel/BecFormPanel/BecListPanel.razor.css). This is those exact breakpoints and values, declared once globally so the remaining 28 are covered too and every panel in the app scales identically. Deliberately width-only: it makes the panel fit the screen without touching any page's internal layout, so each panel keeps its own design and just renders at a smaller scale. Safe against the app shell's own nav: that is a plain