/* ================================================
   PFLEEGE ZEITARBEIT - THEME SYSTEM
   10 verschiedene Designs zur Auswahl
   ================================================ */

/* ========== THEME 1: CLASSIC BLUE (Standard) ========== */
[data-theme="classic-blue"] {
  --color-primary: #3498db;
  --color-primary-dark: #2980b9;
  --color-primary-light: #e3f2fd;
  --color-secondary: #2c3e50;
  --color-secondary-dark: #1a252f;
  --theme-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --theme-name: "Classic Blue";
}

/* ========== THEME 2: SOFT PINK (Zart & Feminin) ========== */
[data-theme="soft-pink"] {
  --color-primary: #ec407a;
  --color-primary-dark: #d81b60;
  --color-primary-light: #fce4ec;
  --color-secondary: #4a148c;
  --color-secondary-dark: #311b92;
  --theme-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --theme-name: "Soft Pink";
}

/* ========== THEME 3: LAVENDER DREAM (Hell & Elegant) ========== */
[data-theme="lavender-dream"] {
  --color-primary: #9c27b0;
  --color-primary-dark: #7b1fa2;
  --color-primary-light: #f3e5f5;
  --color-secondary: #4a148c;
  --color-secondary-dark: #311b92;
  --theme-gradient: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  --theme-name: "Lavender Dream";
}

/* ========== THEME 4: MINT FRESH (Frisch & Modern) ========== */
[data-theme="mint-fresh"] {
  --color-primary: #26a69a;
  --color-primary-dark: #00897b;
  --color-primary-light: #e0f2f1;
  --color-secondary: #004d40;
  --color-secondary-dark: #00251a;
  --theme-gradient: linear-gradient(135deg, #a8edea 0%, #6dd5ed 100%);
  --theme-name: "Mint Fresh";
}

/* ========== THEME 5: CORAL SUNSET (Warm & Freundlich) ========== */
[data-theme="coral-sunset"] {
  --color-primary: #ff7043;
  --color-primary-dark: #f4511e;
  --color-primary-light: #fbe9e7;
  --color-secondary: #bf360c;
  --color-secondary-dark: #870000;
  --theme-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  --theme-name: "Coral Sunset";
}

/* ========== THEME 6: OCEAN BREEZE (Beruhigend & Professionell) ========== */
[data-theme="ocean-breeze"] {
  --color-primary: #0288d1;
  --color-primary-dark: #01579b;
  --color-primary-light: #e1f5fe;
  --color-secondary: #01579b;
  --color-secondary-dark: #002f6c;
  --theme-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --theme-name: "Ocean Breeze";
}

/* ========== THEME 7: FOREST GREEN (Natürlich & Ruhig) ========== */
[data-theme="forest-green"] {
  --color-primary: #43a047;
  --color-primary-dark: #2e7d32;
  --color-primary-light: #e8f5e9;
  --color-secondary: #1b5e20;
  --color-secondary-dark: #0d3d14;
  --theme-gradient: linear-gradient(135deg, #667eea 0%, #43a047 100%);
  --theme-name: "Forest Green";
}

/* ========== THEME 8: ROYAL PURPLE (Luxuriös & Kräftig) ========== */
[data-theme="royal-purple"] {
  --color-primary: #673ab7;
  --color-primary-dark: #512da8;
  --color-primary-light: #ede7f6;
  --color-secondary: #311b92;
  --color-secondary-dark: #1a0052;
  --theme-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --theme-name: "Royal Purple";
}

/* ========== THEME 9: MIDNIGHT DARK (Dunkel & Maskulin) ========== */
[data-theme="midnight-dark"] {
  --color-primary: #1976d2;
  --color-primary-dark: #0d47a1;
  --color-primary-light: #bbdefb;
  --color-secondary: #263238;
  --color-secondary-dark: #000a12;
  --theme-gradient: linear-gradient(135deg, #434343 0%, #000000 100%);
  --theme-name: "Midnight Dark";
  
  /* Dunkle Anpassungen */
  --color-gray-50: #37474f;
  --color-gray-100: #263238;
  --color-gray-200: #37474f;
  --color-gray-800: #eceff1;
  --color-gray-900: #ffffff;
}

[data-theme="midnight-dark"] body {
  background: #1a1a1a;
  color: #eceff1;
}

[data-theme="midnight-dark"] .card,
[data-theme="midnight-dark"] .header,
[data-theme="midnight-dark"] .modal-content,
[data-theme="midnight-dark"] table,
[data-theme="midnight-dark"] .stat-card,
[data-theme="midnight-dark"] .calendar-container {
  background: #263238;
  color: #eceff1;
}

[data-theme="midnight-dark"] th {
  background: #37474f;
}

[data-theme="midnight-dark"] tr:hover {
  background: #37474f;
}

[data-theme="midnight-dark"] input,
[data-theme="midnight-dark"] select,
[data-theme="midnight-dark"] textarea {
  background: #37474f;
  color: #eceff1;
  border-color: #455a64;
}

[data-theme="midnight-dark"] .sidebar {
  background: #1a1a1a;
}

[data-theme="midnight-dark"] .logo {
  background: #000000;
}

/* ========== THEME 10: STEEL GREY (Neutral & Business) ========== */
[data-theme="steel-grey"] {
  --color-primary: #546e7a;
  --color-primary-dark: #37474f;
  --color-primary-light: #cfd8dc;
  --color-secondary: #263238;
  --color-secondary-dark: #000a12;
  --theme-gradient: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%);
  --theme-name: "Steel Grey";
}

/* ========== THEME PREVIEW CARDS ========== */
.theme-preview {
  width: 100%;
  height: 80px;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s;
  border: 3px solid transparent;
  overflow: hidden;
  position: relative;
}

.theme-preview:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.theme-preview.active {
  border-color: #27ae60;
  box-shadow: 0 0 0 2px #27ae60;
}

.theme-preview.active::after {
  content: "✓";
  position: absolute;
  top: 5px;
  right: 5px;
  background: #27ae60;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.theme-preview-1 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.theme-preview-2 {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.theme-preview-3 {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.theme-preview-4 {
  background: linear-gradient(135deg, #a8edea 0%, #6dd5ed 100%);
}

.theme-preview-5 {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.theme-preview-6 {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.theme-preview-7 {
  background: linear-gradient(135deg, #667eea 0%, #43a047 100%);
}

.theme-preview-8 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.theme-preview-9 {
  background: linear-gradient(135deg, #434343 0%, #000000 100%);
}

.theme-preview-10 {
  background: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%);
}

.theme-name-label {
  position: absolute;
  bottom: 5px;
  left: 10px;
  color: white;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ========== THEME SELECTOR MODAL ========== */
.theme-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.theme-card {
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s;
}

.theme-card:hover {
  transform: translateY(-5px);
}

.theme-description {
  margin-top: 10px;
  font-size: 13px;
  color: #7f8c8d;
}

/* ========== SMOOTH THEME TRANSITIONS ========== */
:root,
body,
.sidebar,
.header,
.card,
.modal-content,
input,
select,
textarea,
button {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}