/* Becklar Common CSS - Design System CSS Custom Properties */
/* Loads at the shell level to make available to all single-spa applications */

:root {
  /* Enable automatic light/dark mode switching */
  color-scheme: light dark;
  
  /* Adaptive Color Variables with light-dark() and fallbacks */
  --becklar-color-white: #ffffff;
  --becklar-color-light-gray: #dedede;
  --becklar-color-gray: #757575;
  --becklar-color-black: #252525;
  
  /* Adaptive colors that change based on system preference */
  --becklar-bg: light-dark(#ffffff, #111827);
  --becklar-background: light-dark(#ffffff, #111827);
  --becklar-text: light-dark(#252525, #ffffff);
  --becklar-surface: light-dark(#ffffff, #1f2937);
  --becklar-border: light-dark(#e5e7eb, #374151);
  --becklar-muted: light-dark(#757575, #9ca3af);
  
  /*  variable aliases for backward compatibility */
  --becklar-bg-color: var(--becklar-bg);
  --becklar-text-color: var(--becklar-text);
  --becklar-surface-color: var(--becklar-surface);
  --becklar-border-color: var(--becklar-border);
  
  /* Fallbacks for browsers that don't support light-dark() */
  --becklar-bg-fallback: #ffffff;
  --becklar-background-fallback: #ffffff;
  --becklar-text-fallback: #252525;
  --becklar-surface-fallback: #ffffff;
  --becklar-border-fallback: #e5e7eb;
  --becklar-muted-fallback: #757575;
  
  /* Primary Colors (Becklar Blue variations) */
  --becklar-color-primary: #0072ce;
  --becklar-color-primary-light: #b3d9f2;
  --becklar-color-primary-medium: #80c4ec;
  --becklar-color-primary-dark: #4da6e5;
  
  /* Accent Colors (Becklar Light Blue) */
  --becklar-color-accent: #3b9ade;
  --becklar-color-accent-light: #85bce4;
  
  /* Links */
  --becklar-color-link: #006ebc;
  
  /* Status Colors */
  --becklar-color-success: #47a300;
  --becklar-color-warning: #c28b00;
  --becklar-color-error: #c93333;
  --becklar-color-destructive: #c93333;
  
  /* Typography Variables */
  --becklar-font-family: 'Inter', sans-serif;
  
  /* Spacing Variables (8px grid system) */
  --becklar-spacing-xxsm: 8px;
  --becklar-spacing-xsm: 12px;
  --becklar-spacing-sm: 16px;
  --becklar-spacing-md: 24px;
  --becklar-spacing-big: 32px;
  --becklar-spacing-xbig: 40px;
  --becklar-spacing-xxbig: 48px;
  --becklar-spacing-xxxbig: 56px;
  --becklar-spacing-lg: 64px;
  --becklar-spacing-xlg: 72px;
  --becklar-spacing-xxlg: 80px;
  --becklar-spacing-xxxlg: 88px;
  --becklar-spacing-huge: 96px;
  --becklar-spacing-xhuge: 104px;
  --becklar-spacing-xxhuge: 112px;
  --becklar-spacing-xxxhuge: 120px;
  --becklar-spacing-xxxxhuge: 128px;
  
  /* Border Radius Variables */
  --becklar-border-radius-sm: 4px;
  --becklar-border-radius-md: 6px;
  --becklar-border-radius-lg: 8px;
  
  /* Adaptive Shadow Variables */
  --becklar-shadow-large: light-dark(0 10px 25px rgba(0, 0, 0, 0.15), 0 10px 25px rgba(0, 0, 0, 0.5));
  --becklar-shadow-xsmall: light-dark(0 1px 4px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.6));
  --becklar-shadow-small: light-dark(0 2px 5px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.6));
  --becklar-shadow-med: light-dark(0 3px 6px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.6));
  --becklar-shadow-xlarge: light-dark(0 6px 10px rgba(0, 0, 0, 0.15), 0 6px 10px rgba(0, 0, 0, 0.6));
  --becklar-shadow-xxlarge: light-dark(0 8px 12px rgba(0, 0, 0, 0.15), 0 8px 12px rgba(0, 0, 0, 0.6));
  
  /* Shadow fallbacks for browsers that don't support light-dark() */
  --becklar-shadow-large-fallback: 0 10px 25px rgba(0, 0, 0, 0.15);
  --becklar-shadow-xsmall-fallback: 0 1px 4px rgba(0, 0, 0, 0.1);
  --becklar-shadow-small-fallback: 0 2px 5px rgba(0, 0, 0, 0.1);
  --becklar-shadow-med-fallback: 0 3px 6px rgba(0, 0, 0, 0.15);
  --becklar-shadow-xlarge-fallback: 0 6px 10px rgba(0, 0, 0, 0.15);
  --becklar-shadow-xxlarge-fallback: 0 8px 12px rgba(0, 0, 0, 0.15);
  
  /* Z-Index Variables */
  --becklar-z-index-popup: 1000;
  --becklar-z-index-modal: 1050;
  --becklar-z-index-overlay: 9999;
  
  /* Layout Variables */
  --becklar-header-height-mobile: 96px;
  --becklar-header-height-tablet: 64px;
  --becklar-header-height-desktop: 68px;
  --becklar-menu-width: 304px;
  --becklar-menu-collapsed-width: 78px;
  --becklar-menu-speed: 0.5s;
  --becklar-page-color: #f1f1f1;
}

/* Dark mode fallbacks for older browsers */
@media (prefers-color-scheme: dark) {
  :root {
    --becklar-bg-fallback: #111827;
    --becklar-background-fallback: #111827;
    --becklar-text-fallback: #ffffff;
    --becklar-surface-fallback: #1f2937;
    --becklar-border-fallback: #374151;
    --becklar-muted-fallback: #9ca3af;
    
    /*  aliases for dark mode fallbacks */
    --becklar-bg-color: #111827;
    --becklar-text-color: #ffffff;
    --becklar-surface-color: #1f2937;
    --becklar-border-color: #374151;
    
    /* Dark mode shadow fallbacks */
    --becklar-shadow-large-fallback: 0 10px 25px rgba(0, 0, 0, 0.5);
    --becklar-shadow-xsmall-fallback: 0 1px 4px rgba(0, 0, 0, 0.6);
    --becklar-shadow-small-fallback: 0 2px 5px rgba(0, 0, 0, 0.6);
    --becklar-shadow-med-fallback: 0 3px 6px rgba(0, 0, 0, 0.6);
    --becklar-shadow-xlarge-fallback: 0 6px 10px rgba(0, 0, 0, 0.6);
    --becklar-shadow-xxlarge-fallback: 0 8px 12px rgba(0, 0, 0, 0.6);
  }
}

/* Theme override classes for programmatic control - maximum specificity */
html[data-theme="light"],
html[data-theme="light"] *,
body[data-theme="light"],
[data-theme="light"],
[data-theme="light"] * {
  color-scheme: light ;
  --becklar-bg: #ffffff ;
  --becklar-background: #ffffff ;
  --becklar-text: #252525 ;
  --becklar-surface: #ffffff ;
  --becklar-border: #e5e7eb ;
  --becklar-muted: #757575 ;
  
  /* Update fallback variables for light mode */
  --becklar-bg-fallback: #ffffff ;
  --becklar-background-fallback: #ffffff ;
  --becklar-text-fallback: #252525 ;
  --becklar-surface-fallback: #ffffff ;
  --becklar-border-fallback: #e5e7eb ;
  --becklar-muted-fallback: #757575 ;
  

}

html[data-theme="dark"],
html[data-theme="dark"] *,
body[data-theme="dark"],
[data-theme="dark"],
[data-theme="dark"] * {
  color-scheme: dark ;
  --becklar-bg: #111827 ;
  --becklar-background: #111827 ;
  --becklar-text: #ffffff ;
  --becklar-surface: #1f2937 ;
  --becklar-border: #374151 ;
  --becklar-muted: #9ca3af ;
  
  /* Update fallback variables for dark mode */
  --becklar-bg-fallback: #111827 ;
  --becklar-background-fallback: #111827 ;
  --becklar-text-fallback: #ffffff ;
  --becklar-surface-fallback: #1f2937 ;
  --becklar-border-fallback: #374151 ;
  --becklar-muted-fallback: #9ca3af ;
  
  /*  aliases */
  --becklar-bg-color: #111827 ;
  --becklar-text-color: #ffffff ;
  --becklar-surface-color: #1f2937 ;
  --becklar-border-color: #374151 ;
}


html[data-theme="dark"] body,
body[data-theme="dark"] {
  background-color: #111827 ;
  color: #ffffff ;
}

/* Force Material-UI AppBar and Toolbar colors */
html[data-theme="light"] .MuiAppBar-root,
html[data-theme="light"] .appBar,
[data-theme="light"] .MuiAppBar-root,
[data-theme="light"] .appBar {
  background-color: #ffffff ;
  color: #252525 ;
}

html[data-theme="dark"] .MuiAppBar-root,
html[data-theme="dark"] .appBar,
[data-theme="dark"] .MuiAppBar-root,
[data-theme="dark"] .appBar {
  background-color: #1f2937 ;
  color: #ffffff ;
}



/* Force SVG stroke colors based on theme */
/* html[data-theme="dark"] svg[stroke="#0071CE"],
html[data-theme="dark"] svg[stroke="#0072CE"],
[data-theme="dark"] svg[stroke="#0071CE"],
[data-theme="dark"] svg[stroke="#0072CE"] {
  stroke: var(--becklar-text) ;
}

html[data-theme="light"] svg[stroke="#FFFFFF"],
[data-theme="light"] svg[stroke="#FFFFFF"] {
  stroke: var(--becklar-text) ;
} */


/* Force placeholder text colors */
html[data-theme="dark"] input::placeholder,
[data-theme="dark"] input::placeholder {
  color: rgba(255, 255, 255, 0.7) ;
}

html[data-theme="light"] input::placeholder,
[data-theme="light"] input::placeholder {
  color: rgba(37, 37, 37, 0.7) ;
}

/* Base Typography Styles with adaptive colors */
body {
  font-family: var(--becklar-font-family);
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 19px;
  background-color: var(--becklar-background-fallback, var(--becklar-bg-fallback, #ffffff));
  background-color: var(--becklar-background, var(--becklar-bg));
  color: var(--becklar-text-fallback);
  color: var(--becklar-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}


/* Brand Color Utility Classes */
.becklar-primary { color: var(--becklar-color-primary); }
.becklar-success { color: var(--becklar-color-success); }
.becklar-warning { color: var(--becklar-color-warning); }
.becklar-error { color: var(--becklar-color-error); }

.becklar-bg-primary { background-color: var(--becklar-color-primary); }
.becklar-bg-success { background-color: var(--becklar-color-success); }
.becklar-bg-warning { background-color: var(--becklar-color-warning); }
.becklar-bg-error { background-color: var(--becklar-color-error); }

/* Adaptive Color Utility Classes */
.becklar-bg { 
  background-color: var(--becklar-bg-fallback);
  background-color: var(--becklar-bg);
}

.becklar-background { 
  background-color: var(--becklar-background-fallback);
  background-color: var(--becklar-background);
}

.becklar-text { 
  color: var(--becklar-text-fallback);
  color: var(--becklar-text);
}

.becklar-surface { 
  background-color: var(--becklar-surface-fallback);
  background-color: var(--becklar-surface);
}

.becklar-border { 
  border-color: var(--becklar-border-fallback);
  border-color: var(--becklar-border);
}

.becklar-muted { 
  color: var(--becklar-muted-fallback);
  color: var(--becklar-muted);
}

/* Mixed Adaptive Classes */
.becklar-card {
  background-color: var(--becklar-surface-fallback);
  background-color: var(--becklar-surface);
  color: var(--becklar-text-fallback);
  color: var(--becklar-text);
  border: 1px solid var(--becklar-border-fallback);
  border: 1px solid var(--becklar-border);
  border-radius: var(--becklar-border-radius-md);
  padding: var(--becklar-spacing-md);
  box-shadow: var(--becklar-shadow-small-fallback);
  box-shadow: var(--becklar-shadow-small);
}

.becklar-input {
  background-color: var(--becklar-surface-fallback);
  background-color: var(--becklar-surface);
  color: var(--becklar-text-fallback);
  color: var(--becklar-text);
  border: 1px solid var(--becklar-border-fallback);
  border: 1px solid var(--becklar-border);
  border-radius: var(--becklar-border-radius-sm);
  padding: var(--becklar-spacing-sm);
}

.becklar-input:focus {
  border-color: var(--becklar-color-primary);
  outline: 2px solid var(--becklar-color-primary-light);
  outline-offset: -2px;
}

/* Adaptive Shadow Utility Classes */
.becklar-shadow-xsmall {
  box-shadow: var(--becklar-shadow-xsmall-fallback);
  box-shadow: var(--becklar-shadow-xsmall);
}

.becklar-shadow-small {
  box-shadow: var(--becklar-shadow-small-fallback);
  box-shadow: var(--becklar-shadow-small);
}

.becklar-shadow-med {
  box-shadow: var(--becklar-shadow-med-fallback);
  box-shadow: var(--becklar-shadow-med);
}

.becklar-shadow-large {
  box-shadow: var(--becklar-shadow-large-fallback);
  box-shadow: var(--becklar-shadow-large);
}

.becklar-shadow-xlarge {
  box-shadow: var(--becklar-shadow-xlarge-fallback);
  box-shadow: var(--becklar-shadow-xlarge);
}

.becklar-shadow-xxlarge {
  box-shadow: var(--becklar-shadow-xxlarge-fallback);
  box-shadow: var(--becklar-shadow-xxlarge);
}