/* =======================================================
   VERAH Tools – Design System (Web Dashboard)
   6 Themes: 3 Light + 3 Dark
   Synchronized with Flutter App
   ======================================================= */

/* --- BASE VARIABLES --- */
:root {
  /* Typography */
  --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-lg: 22px;
  --text-md: 16px;
  --text-sm: 14px;
  --text-xs: 12px;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* =======================================================
   THEME 1: LIGHT CLASSIC (Default)
   Weiß + Grau + Blau (neutral)
   ======================================================= */
[data-theme="light-classic"], :root {
  --primary: #4A90E2;
  --primary-dark: #357ABD;
  --primary-light: #6BA3E8;
  --on-primary: #FFFFFF;
  
  --secondary: #F8F9FA;
  --on-secondary: #2C3E50;
  
  --surface: #FAFBFC;
  --surface-variant: #F5F7F9;
  --on-surface: #2C3E50;
  --on-surface-variant: #6C757D;
  
  --background: #FAFBFC;
  --on-background: #2C3E50;
  
  --error: #DC3545;
  --on-error: #FFFFFF;
  
  --success: #28A745;
  --on-success: #FFFFFF;
  
  --border: #DEE2E6;
  --border-focus: #4A90E2;
  
  --input-bg: #FFFFFF;
  --input-border: #CED4DA;
  
  --card-bg: #FFFFFF;
  --card-shadow: rgba(0, 0, 0, 0.06);
  
  --sidebar-bg: #FFFFFF;
  --sidebar-hover: #F0F4F8;
  
  --badge-orange-bg: #FFF3E0;
  --badge-orange-text: #E65100;
  --badge-orange-border: #FFB74D;
}

/* =======================================================
   THEME 2: LIGHT BLUE GLASS
   Glasig-hellblau, stärkerer Blau-Akzent
   ======================================================= */
[data-theme="light-blue-glass"] {
  --primary: #5B9BD5;
  --primary-dark: #4682B4;
  --primary-light: #7CB8E8;
  --on-primary: #FFFFFF;
  
  --secondary: #E8F2F9;
  --on-secondary: #2C3E50;
  
  --surface: #EDF5FA;
  --surface-variant: #F5FAFD;
  --on-surface: #2C3E50;
  --on-surface-variant: #546E7A;
  
  --background: #EDF5FA;
  --on-background: #2C3E50;
  
  --error: #DC3545;
  --on-error: #FFFFFF;
  
  --success: #28A745;
  --on-success: #FFFFFF;
  
  --border: #B0D4F1;
  --border-focus: #5B9BD5;
  
  --input-bg: rgba(255, 255, 255, 0.9);
  --input-border: #C5E1F5;
  
  --card-bg: #F8FBFE;
  --card-shadow: rgba(0, 0, 0, 0.05);
  
  --sidebar-bg: #EDF5FA;
  --sidebar-hover: #E0EFF8;
  
  --badge-orange-bg: #FFF3E0;
  --badge-orange-text: #E65100;
  --badge-orange-border: #FFB74D;
}

/* =======================================================
   THEME 3: LIGHT BEIGE ACCENT
   Weiß + Beige-Akzent + Blau
   ======================================================= */
[data-theme="light-beige-accent"] {
  --primary: #6A8CAF;
  --primary-dark: #556F8C;
  --primary-light: #8BA5C1;
  --on-primary: #FFFFFF;
  
  --secondary: #F5F2ED;
  --on-secondary: #2C3E50;
  
  --surface: #FAF8F5;
  --surface-variant: #F9F7F3;
  --on-surface: #2C3E50;
  --on-surface-variant: #6C757D;
  
  --background: #FAF8F5;
  --on-background: #2C3E50;
  
  --error: #DC3545;
  --on-error: #FFFFFF;
  
  --success: #28A745;
  --on-success: #FFFFFF;
  
  --border: #E6E1D8;
  --border-focus: #6A8CAF;
  
  --input-bg: #FFFFFF;
  --input-border: #E0DDD5;
  
  --card-bg: #FFFEFB;
  --card-shadow: rgba(0, 0, 0, 0.04);
  
  --sidebar-bg: #FAF8F5;
  --sidebar-hover: #F0ECE5;
  
  --badge-orange-bg: #FFF3E0;
  --badge-orange-text: #E65100;
  --badge-orange-border: #FFB74D;
}

/* =======================================================
   THEME 4: DARK CLASSIC
   Graphit + Blau (neutral)
   ======================================================= */
[data-theme="dark-classic"] {
  --primary: #6BA3E8;
  --primary-dark: #5B93D8;
  --primary-light: #8BB8EC;
  --on-primary: #FFFFFF;
  
  --secondary: #2A2E35;
  --on-secondary: #E8EAED;
  
  --surface: #2A2E35;
  --surface-variant: #33373F;
  --on-surface: #E8EAED;
  --on-surface-variant: #B8BCC2;
  
  --background: #2A2E35;
  --on-background: #E8EAED;
  
  --error: #F28B82;
  --on-error: #000000;
  
  --success: #81C995;
  --on-success: #000000;
  
  --border: #4A4E56;
  --border-focus: #6BA3E8;
  
  --input-bg: #33373F;
  --input-border: #5A5E66;
  
  --card-bg: #33373F;
  --card-shadow: rgba(0, 0, 0, 0.4);
  
  --sidebar-bg: #2A2E35;
  --sidebar-hover: #35393F;
  
  --badge-orange-bg: #4A3A2A;
  --badge-orange-text: #FFB74D;
  --badge-orange-border: #A67C52;
}

/* =======================================================
   THEME 5: DARK BLUE
   Dunkelblau + Cobalt-Akzent
   ======================================================= */
[data-theme="dark-blue"] {
  --primary: #7CB8E8;
  --primary-dark: #6BA3D8;
  --primary-light: #9CCBF0;
  --on-primary: #1A1F26;
  
  --secondary: #1E2430;
  --on-secondary: #E8EAED;
  
  --surface: #1E2430;
  --surface-variant: #272D3A;
  --on-surface: #E8EAED;
  --on-surface-variant: #B8BCC2;
  
  --background: #1E2430;
  --on-background: #E8EAED;
  
  --error: #F28B82;
  --on-error: #000000;
  
  --success: #81C995;
  --on-success: #000000;
  
  --border: #3E4956;
  --border-focus: #7CB8E8;
  
  --input-bg: #252B37;
  --input-border: #4A5260;
  
  --card-bg: #272D3A;
  --card-shadow: rgba(0, 0, 0, 0.45);
  
  --sidebar-bg: #1E2430;
  --sidebar-hover: #272D3A;
  
  --badge-orange-bg: #3A2F1F;
  --badge-orange-text: #FFB74D;
  --badge-orange-border: #A67C52;
}

/* =======================================================
   THEME 6: DARK GRAPHITE + BEIGE
   Graphit + warme Beige-Akzente
   ======================================================= */
[data-theme="dark-graphite-beige"] {
  --primary: #6BA3E8;
  --primary-dark: #5B93D8;
  --primary-light: #8BB8EC;
  --on-primary: #FFFFFF;
  
  --secondary: #35373A;
  --on-secondary: #E8EAED;
  
  --surface: #35373A;
  --surface-variant: #3E4043;
  --on-surface: #E8EAED;
  --on-surface-variant: #B8AFA8;
  
  --background: #35373A;
  --on-background: #E8EAED;
  
  --error: #F28B82;
  --on-error: #000000;
  
  --success: #81C995;
  --on-success: #000000;
  
  --border: #4A4C4F;
  --border-focus: #6BA3E8;
  
  --input-bg: #2A2C2E;
  --input-border: #45474A;
  
  --card-bg: #3E4043;
  --card-shadow: rgba(0, 0, 0, 0.45);
  
  --sidebar-bg: #35373A;
  --sidebar-hover: #3E4043;
  
  --badge-orange-bg: #4A3A2A;
  --badge-orange-text: #B8AFA8;
  --badge-orange-border: #6D6E71;
}

/* =======================================================
   GLOBAL STYLES USING CSS VARIABLES
   ======================================================= */

body {
  font-family: var(--font-family);
  background-color: var(--background);
  color: var(--on-background);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Primary button colors */
.bg-primary {
  background-color: var(--primary) !important;
  color: var(--on-primary) !important;
}

.text-primary {
  color: var(--primary) !important;
}

.border-primary {
  border-color: var(--primary) !important;
}

/* Surface colors */
.bg-surface {
  background-color: var(--surface) !important;
}

.bg-surface-variant {
  background-color: var(--surface-variant) !important;
}

/* Error colors */
.bg-error {
  background-color: var(--error) !important;
  color: var(--on-error) !important;
}

.text-error {
  color: var(--error) !important;
}

/* Success colors */
.bg-success {
  background-color: var(--success) !important;
  color: var(--on-success) !important;
}

/* Sidebar */
.sidebar-bg {
  background-color: var(--sidebar-bg) !important;
}

.sidebar-hover:hover {
  background-color: var(--sidebar-hover) !important;
}

/* Cards */
.card-bg {
  background-color: var(--card-bg) !important;
  box-shadow: 0 4px 6px var(--card-shadow) !important;
}

.card-accent-left {
  border-left: 4px solid var(--primary);
}

.card-stat {
  background-color: var(--card-bg);
  box-shadow: 0 2px 4px var(--card-shadow);
  border-radius: 12px;
  padding: 1.5rem;
}

.card-stat-icon {
  border-radius: 8px;
  padding: 0.75rem;
}

/* Inputs */
.input-theme {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--on-surface) !important;
}

.input-theme:focus {
  border-color: var(--border-focus) !important;
  outline: 2px solid var(--border-focus);
  outline-offset: 0px;
}

/* Theme transitions */
* {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* =======================================================
   RESPONSIVE UTILITIES
   ======================================================= */

/* Prevent overflow on mobile */
@media (max-width: 768px) {
  /* Ensure cards don't overflow */
  .card-bg, .rounded-lg {
    overflow-x: hidden;
  }
  
  /* Make select elements responsive */
  select {
    max-width: 100%;
    min-width: 0 !important;
  }
  
  /* Prevent text overflow */
  h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }
  
  /* Ensure flex containers wrap on mobile */
  .flex {
    flex-wrap: wrap;
  }
}

/* Ensure inputs don't overflow their containers */
input, select, textarea {
  max-width: 100%;
  box-sizing: border-box;
}