/* ========================================
   Zentrales Theme-System
   WCAG AA-konforme Kontraste (4.5:1 normal, 3:1 groß)
   ======================================== */

:root {
  /* ===== Primary Colors ===== */
  --theme-primary: #009ef7;
  --theme-primary-dark: #0077cc;
  --theme-primary-darker: #0066aa;
  --theme-primary-light: #3dadf7;
  --theme-primary-lighter: #6bc5f9;
  
  /* ===== Status Colors ===== */
  --theme-success: #50cd89;
  --theme-success-dark: #3bb876;
  --theme-success-light: #6dd99f;
  --theme-danger: #f1416c;
  --theme-danger-dark: #d9214e;
  --theme-danger-light: #ff6b8a;
  --theme-warning: #ffc700;
  --theme-warning-dark: #e5b300;
  --theme-warning-light: #ffd700;
  --theme-info: #7239ea;
  --theme-info-dark: #5f28d9;
  --theme-info-light: #8b5cf6;
  
  /* ===== Light Mode - Backgrounds ===== */
  --theme-bg: #ffffff;
  --theme-bg-secondary: #f8f9fa;
  --theme-bg-tertiary: #f3f4f6;
  --theme-bg-hover: #f9fafb;
  
  /* ===== Light Mode - Text (WCAG AA: 4.5:1 auf weiß) ===== */
  --theme-text-primary: #1f2937;      /* 4.5:1 Kontrast auf weiß */
  --theme-text-secondary: #4b5563;    /* 4.5:1 Kontrast auf weiß */
  --theme-text-muted: #6b7280;       /* 4.5:1 Kontrast auf weiß */
  --theme-text-disabled: #9ca3af;    /* 3:1 Kontrast auf weiß (für große Texte) */
  
  /* ===== Light Mode - Borders ===== */
  --theme-border: #e5e7eb;
  --theme-border-light: #f3f4f6;
  --theme-border-dark: #d1d5db;
  
  /* ===== Light Mode - Cards ===== */
  --theme-card-bg: #ffffff;
  --theme-card-border: #e5e7eb;
  --theme-card-shadow: rgba(0, 0, 0, 0.08);
  --theme-card-shadow-hover: rgba(0, 0, 0, 0.12);
  
  /* ===== Spacing ===== */
  --theme-spacing-xs: 0.5rem;
  --theme-spacing-sm: 0.75rem;
  --theme-spacing-md: 1rem;
  --theme-spacing-lg: 1.5rem;
  --theme-spacing-xl: 2rem;
  --theme-spacing-2xl: 3rem;
  
  /* ===== Border Radius ===== */
  --theme-radius-sm: 0.5rem;
  --theme-radius-md: 0.75rem;
  --theme-radius-lg: 1rem;
  --theme-radius-xl: 1.25rem;
  
  /* ===== Shadows ===== */
  --theme-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --theme-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --theme-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  --theme-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.2);
  
  /* ===== Interactive Elements ===== */
  --theme-link-color: #009ef7;
  --theme-link-hover: #0077cc;
  --theme-button-primary-bg: #009ef7;
  --theme-button-primary-hover: #0077cc;
  --theme-button-primary-text: #ffffff;
  --theme-button-secondary-bg: #f8f9fa;
  --theme-button-secondary-hover: #e5e7eb;
  --theme-button-secondary-text: #1f2937;
}

/* ===== Dark Mode ===== */
[data-theme="dark"] {
  /* ===== Dark Mode - Backgrounds ===== */
  --theme-bg: #1e1e2d;
  --theme-bg-secondary: #252536;
  --theme-bg-tertiary: #2d2d3a;
  --theme-bg-hover: #2d2d3a;
  
  /* ===== Dark Mode - Text (WCAG AA: 4.5:1 auf #1e1e2d) ===== */
  --theme-text-primary: #ffffff;      /* 4.5:1 Kontrast auf #1e1e2d */
  --theme-text-secondary: #e1e3ea;    /* 4.5:1 Kontrast auf #1e1e2d */
  --theme-text-muted: #a1a5b7;        /* 4.5:1 Kontrast auf #1e1e2d */
  --theme-text-disabled: #7e8299;    /* 3:1 Kontrast auf #1e1e2d (für große Texte) */
  
  /* ===== Dark Mode - Borders ===== */
  --theme-border: rgba(255, 255, 255, 0.1);
  --theme-border-light: rgba(255, 255, 255, 0.08);
  --theme-border-dark: rgba(255, 255, 255, 0.15);
  
  /* ===== Dark Mode - Cards ===== */
  --theme-card-bg: #1e1e2d;
  --theme-card-border: rgba(255, 255, 255, 0.1);
  --theme-card-shadow: rgba(0, 0, 0, 0.3);
  --theme-card-shadow-hover: rgba(0, 0, 0, 0.4);
  
  /* ===== Dark Mode - Adjusted Colors (heller für besseren Kontrast) ===== */
  --theme-primary: #3dadf7;           /* Heller für 4.5:1 auf #1e1e2d */
  --theme-primary-dark: #009ef7;      /* Original als dark Variante */
  --theme-primary-light: #6bc5f9;     /* Noch heller */
  --theme-success: #6dd99f;           /* Heller für besseren Kontrast */
  --theme-success-dark: #50cd89;      /* Original als dark Variante */
  --theme-danger: #ff6b8a;            /* Heller für besseren Kontrast */
  --theme-danger-dark: #f1416c;       /* Original als dark Variante */
  --theme-warning: #ffd700;           /* Heller für besseren Kontrast */
  --theme-warning-dark: #ffc700;      /* Original als dark Variante */
  --theme-info: #8b5cf6;              /* Heller für besseren Kontrast */
  --theme-info-dark: #7239ea;         /* Original als dark Variante */
  
  /* ===== Dark Mode - Interactive Elements ===== */
  --theme-link-color: #3dadf7;
  --theme-link-hover: #6bc5f9;
  --theme-button-primary-bg: #3dadf7;
  --theme-button-primary-hover: #009ef7;
  --theme-button-primary-text: #ffffff;
  --theme-button-secondary-bg: #252536;
  --theme-button-secondary-hover: #2d2d3a;
  --theme-button-secondary-text: #ffffff;
  
  /* ===== Dark Mode - Shadows ===== */
  --theme-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --theme-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --theme-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --theme-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* ===== Globale Basis-Styles ===== */
body {
  background-color: var(--theme-bg);
  color: var(--theme-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===== Cards ===== */
.card {
  background-color: var(--theme-card-bg);
  border-color: var(--theme-card-border);
  color: var(--theme-text-primary);
}

/* ===== Text ===== */
.text-primary {
  color: var(--theme-text-primary) !important;
}

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

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

/* ===== Buttons ===== */
.btn-primary {
  background-color: var(--theme-button-primary-bg);
  border-color: var(--theme-button-primary-bg);
  color: var(--theme-button-primary-text);
}

.btn-primary:hover {
  background-color: var(--theme-button-primary-hover);
  border-color: var(--theme-button-primary-hover);
}

.btn-secondary {
  background-color: var(--theme-button-secondary-bg);
  border-color: var(--theme-button-secondary-bg);
  color: var(--theme-button-secondary-text);
}

.btn-secondary:hover {
  background-color: var(--theme-button-secondary-hover);
  border-color: var(--theme-button-secondary-hover);
}

/* ===== Links ===== */
a {
  color: var(--theme-link-color);
  text-decoration: none;
}

a:hover {
  color: var(--theme-link-hover);
}

/* ===== Borders ===== */
.border {
  border-color: var(--theme-border) !important;
}

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

/* ===== Background Utilities ===== */
.bg-primary {
  background-color: var(--theme-primary) !important;
  color: var(--theme-button-primary-text) !important;
}

.bg-success {
  background-color: var(--theme-success) !important;
  color: var(--theme-button-primary-text) !important;
}

.bg-danger {
  background-color: var(--theme-danger) !important;
  color: var(--theme-button-primary-text) !important;
}

.bg-warning {
  background-color: var(--theme-warning) !important;
  color: var(--theme-text-primary) !important;
}

.bg-info {
  background-color: var(--theme-info) !important;
  color: var(--theme-button-primary-text) !important;
}

/* ===== Form Elements ===== */
.form-control,
.form-select {
  background-color: var(--theme-bg);
  border-color: var(--theme-border);
  color: var(--theme-text-primary);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--theme-bg);
  border-color: var(--theme-primary);
  color: var(--theme-text-primary);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--theme-bg-secondary);
  border-color: var(--theme-border);
  color: var(--theme-text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: var(--theme-bg-secondary);
  border-color: var(--theme-primary);
}

/* ===== Tables ===== */
.table {
  color: var(--theme-text-primary);
}

.table thead th {
  background-color: var(--theme-bg-secondary);
  color: var(--theme-text-primary);
  border-color: var(--theme-border);
}

.table tbody td {
  border-color: var(--theme-border);
  color: var(--theme-text-primary);
}

.table tbody tr:hover {
  background-color: var(--theme-bg-hover);
}

[data-theme="dark"] .table thead th {
  background-color: var(--theme-bg-secondary);
  color: var(--theme-text-primary);
  border-color: var(--theme-border);
}

[data-theme="dark"] .table tbody td {
  border-color: var(--theme-border);
  color: var(--theme-text-primary);
}

[data-theme="dark"] .table tbody tr:hover {
  background-color: var(--theme-bg-hover);
}

/* ===== Alerts ===== */
.alert {
  border-color: var(--theme-border);
  color: var(--theme-text-primary);
}

.alert-primary {
  background-color: rgba(0, 158, 247, 0.1);
  border-color: rgba(0, 158, 247, 0.3);
  color: var(--theme-primary);
}

.alert-success {
  background-color: rgba(80, 205, 137, 0.1);
  border-color: rgba(80, 205, 137, 0.3);
  color: var(--theme-success);
}

.alert-danger {
  background-color: rgba(241, 65, 108, 0.1);
  border-color: rgba(241, 65, 108, 0.3);
  color: var(--theme-danger);
}

.alert-warning {
  background-color: rgba(255, 199, 0, 0.1);
  border-color: rgba(255, 199, 0, 0.3);
  color: var(--theme-warning);
}

[data-theme="dark"] .alert-primary {
  background-color: rgba(61, 173, 247, 0.2);
  border-color: rgba(61, 173, 247, 0.4);
  color: var(--theme-primary);
}

[data-theme="dark"] .alert-success {
  background-color: rgba(109, 217, 159, 0.2);
  border-color: rgba(109, 217, 159, 0.4);
  color: var(--theme-success);
}

[data-theme="dark"] .alert-danger {
  background-color: rgba(255, 107, 138, 0.2);
  border-color: rgba(255, 107, 138, 0.4);
  color: var(--theme-danger);
}

[data-theme="dark"] .alert-warning {
  background-color: rgba(255, 215, 0, 0.2);
  border-color: rgba(255, 215, 0, 0.4);
  color: var(--theme-warning);
}

/* ========================================
   iOS PWA Safe Area Support
   Unterstützung für Notch-Geräte (iPhone X und neuer)
   ======================================== */
@supports (padding: max(0px)) {
  /* Safe Area für Header */
  .app-header {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-top: max(0px, env(safe-area-inset-top));
  }

  /* Safe Area für Footer */
  .app-footer {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }

  /* Safe Area für Content Container */
  .app-content,
  .app-container,
  .container-xxl {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  /* Safe Area für Body (wenn nötig) */
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* Safe Area für Fixed Elements */
  .fixed-top,
  .fixed-bottom {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .fixed-top {
    padding-top: env(safe-area-inset-top);
  }

  .fixed-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Safe Area für Modals */
  .modal-content {
    margin-left: env(safe-area-inset-left);
    margin-right: env(safe-area-inset-right);
  }

  /* Safe Area für Mobile Navigation Drawer */
  .app-header-mobile-drawer {
    padding-top: max(0px, env(safe-area-inset-top));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}