/* =======================================================================
   🎯 UNIFIED COMPONENTS CSS - ocd&me Standardisierung
   =======================================================================
   
   Version: 1.0.0
   Zweck: Einheitliche UI-Komponenten für konsistente Benutzeroberfläche
   Status: ADDITIVE-ONLY - Breaking keine bestehenden Styles
   
   ======================================================================= */

/* =======================================================================
   📋 CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ======================================================================= */

:roo/* =======================================================================
   📦 UNIFIED CONTENT SECTIONS
   ======================================================================= */

.section-box {
  background: var(--surface, white);
  border-radius: 20px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease;
}

.section-box:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.section-box-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 1rem;
  line-height: 1.3;
}

/* Varianten */
.section-box.compact {
  padding: 1rem;
  margin-bottom: 1rem;
}

.section-box.large {
  padding: 2rem;
  margin-bottom: 2rem;
}

/* =======================================================================
   � CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ======================================================================= */

:root {
  /* Bestehende Variablen aus app-styles.css erweitern */
  --unified-border-radius: 20px;
  --unified-border-radius-small: 8px;
  --unified-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --unified-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Alert-System Farben */
  --alert-success-bg: #d1f2eb;
  --alert-success-border: #00d4aa;
  --alert-success-text: #00695c;
  
  --alert-info-bg: #d6eaf8;
  --alert-info-border: #3498db;
  --alert-info-text: #1565c0;
  
  --alert-warning-bg: #fef9e7;
  --alert-warning-border: #f39c12;
  --alert-warning-text: #b7791f;
  
  --alert-error-bg: #fadbd8;
  --alert-error-border: #e74c3c;
  --alert-error-text: #c62828;
  
  /* Button-System Farben (kompatibel mit bestehendem System) */
  --btn-primary-bg: var(--primary-color, #4F7100);
  --btn-primary-hover: #3d5600;
  --btn-secondary-bg: var(--surface, #f8f9fa);
  --btn-secondary-border: var(--border-color, #dee2e6);
}

/* =======================================================================
   🚨 UNIFIED ALERT SYSTEM
   ======================================================================= */

.alert-unified {
  padding: 16px 20px;
  border-radius: var(--unified-border-radius);
  border-left: 4px solid;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  box-shadow: var(--unified-shadow);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.alert-unified-icon {
  font-size: 18px;
  margin-top: 1px;
  flex-shrink: 0;
}

.alert-unified-content {
  flex: 1;
}

.alert-unified-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.alert-unified-message {
  margin: 0;
}

/* Alert Varianten */
.alert-unified.success {
  background-color: var(--alert-success-bg);
  border-left-color: var(--alert-success-border);
  color: var(--alert-success-text);
}

.alert-unified.info {
  background-color: var(--alert-info-bg);
  border-left-color: var(--alert-info-border);
  color: var(--alert-info-text);
}

.alert-unified.warning {
  background-color: var(--alert-warning-bg);
  border-left-color: var(--alert-warning-border);
  color: var(--alert-warning-text);
}

.alert-unified.error {
  background-color: var(--alert-error-bg);
  border-left-color: var(--alert-error-border);
  color: var(--alert-error-text);
}

/* =======================================================================
   🔘 UNIFIED BUTTON SYSTEM
   ======================================================================= */

.btn-unified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: none;
  border-radius: var(--unified-border-radius-small);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 8px;
  min-height: 44px; /* Touch-friendly */
  box-shadow: var(--unified-shadow);
}

.btn-unified:hover {
  transform: translateY(-1px);
  box-shadow: var(--unified-shadow-lg);
  text-decoration: none;
}

.btn-unified:active {
  transform: translateY(0);
  box-shadow: var(--unified-shadow);
}

/* Icon Alignment Fix für Bootstrap Icons */
.btn-unified i[class*="bi-"] {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  vertical-align: middle;
}

.btn-unified.disabled,
.btn-unified:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: var(--unified-shadow) !important;
}

/* Button Varianten */
.btn-unified.primary {
  background-color: var(--btn-primary-bg);
  color: white;
}

.btn-unified.primary:hover:not(:disabled) {
  background-color: var(--btn-primary-hover);
  color: white;
}

.btn-unified.secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--text-color);
  border: 1px solid var(--btn-secondary-border);
}

.btn-unified.secondary:hover:not(:disabled) {
  background-color: var(--surface-hover, #e9ecef);
  color: var(--text-color);
}

.btn-unified.outline {
  background-color: transparent;
  color: var(--btn-primary-bg);
  border: 2px solid var(--btn-primary-bg);
}

.btn-unified.outline:hover:not(:disabled) {
  background-color: var(--btn-primary-bg);
  color: white;
}

/* Button Größen */
.btn-unified.small {
  padding: 8px 16px;
  font-size: 12px;
  min-height: 36px;
}

.btn-unified.large {
  padding: 16px 32px;
  font-size: 16px;
  min-height: 52px;
}

/* =======================================================================
   📋 UNIFIED CARD SYSTEM
   ======================================================================= */

.card-unified {
  background-color: var(--surface, white);
  border-radius: var(--unified-border-radius);
  box-shadow: var(--unified-shadow);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.card-unified:hover {
  box-shadow: var(--unified-shadow-lg);
}

.card-unified-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-color, #e9ecef);
}

.card-unified-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
}

.card-unified-subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}

.card-unified-body {
  padding: 20px 24px;
}

.card-unified-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border-color, #e9ecef);
  background-color: var(--surface-alt, #f8f9fa);
}

/* Card Varianten */
.card-unified.highlight {
  border-left: 4px solid var(--primary-color, #4F7100);
}

.card-unified.compact .card-unified-header,
.card-unified.compact .card-unified-body,
.card-unified.compact .card-unified-footer {
  padding-left: 16px;
  padding-right: 16px;
}

/* =======================================================================
   📊 UNIFIED STATUS INDICATORS
   ======================================================================= */

.status-unified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--unified-border-radius-small);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-unified-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Status Varianten */
.status-unified.active .status-unified-dot {
  background-color: #00d4aa;
}
.status-unified.active {
  background-color: #d1f2eb;
  color: #00695c;
}

.status-unified.inactive .status-unified-dot {
  background-color: #95a5a6;
}
.status-unified.inactive {
  background-color: #ecf0f1;
  color: #5d6d7e;
}

.status-unified.warning .status-unified-dot {
  background-color: #f39c12;
}
.status-unified.warning {
  background-color: #fef9e7;
  color: #b7791f;
}

/* =======================================================================
   🎨 UNIFIED FORM ELEMENTS
   ======================================================================= */

.form-group-unified {
  margin-bottom: 20px;
}

.form-label-unified {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--text-color);
  font-size: 14px;
}

.form-control-unified {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: var(--unified-border-radius-small);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-color);
  background-color: var(--surface, white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control-unified:focus {
  outline: none;
  border-color: var(--primary-color, #4F7100);
  box-shadow: 0 0 0 3px rgba(79, 113, 0, 0.1);
}

.form-control-unified::placeholder {
  color: var(--text-muted);
}

/* =======================================================================
   � UNIFIED CONTENT SECTIONS
   ======================================================================= */

.section-box {
  background: var(--surface, white);
  border-radius: var(--unified-border-radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--unified-shadow);
  transition: box-shadow 0.2s ease;
}

.section-box:hover {
  box-shadow: var(--unified-shadow-lg);
}

.section-box-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 1rem;
  line-height: 1.3;
}

/* Varianten */
.section-box.compact {
  padding: 1rem;
  margin-bottom: 1rem;
}

.section-box.large {
  padding: 2rem;
  margin-bottom: 2rem;
}

/* =======================================================================
   �📱 RESPONSIVE UTILITIES
   ======================================================================= */

@media (max-width: 768px) {
  .alert-unified {
    padding: 14px 16px;
    margin-bottom: 16px;
  }
  
  .btn-unified {
    padding: 12px 20px;
    font-size: 14px;
  }
  
  .btn-unified.large {
    padding: 14px 24px;
    font-size: 15px;
  }
  
  .card-unified-header,
  .card-unified-body,
  .card-unified-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* =======================================================================
   💥 UNIFIED FULL-SCREEN ERROR PAGES
   ======================================================================= */

.error-page-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: linear-gradient(135deg, #F8F9FB 0%, #FAFBFC 100%);
  margin: 0;
  font-family: var(--font-family);
  box-sizing: border-box;
  width: 100%;
  /* Desktop: Berücksichtige Sidebar-Breite (260px) */
  margin-left: 0;
}

/* Desktop mit Sidebar: Content-Bereich anpassen */
@media (min-width: 992px) {
  .error-page-container {
    /* Sidebar ist 260px breit, also verfügbarer Raum ist calc(100vw - 260px) */
    width: calc(100vw - 260px);
    margin-left: 260px;
    /* Zusätzlich: Zentriere im verfügbaren Raum */
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* =======================================================================
   🏠 TEMPLATE-AWARE ERROR PAGES (für Seiten mit Sidebar)
   ======================================================================= */

/* Spezielle Klasse für template-basierte Error-Pages */
.error-page-container.template-based {
  min-height: 80vh; /* Weniger hoch als full-screen */
  background: transparent; /* Kein Gradient-Background */
  width: 100%;
  margin-left: 0;
  padding: 2rem 1rem;
}

/* Template-based hat keine Sidebar-Probleme, da es im Template-Container ist */
@media (min-width: 992px) {
  .error-page-container.template-based {
    width: 100%;
    margin-left: 0;
    padding: 2rem;
  }
}

.error-page-card {
  background: var(--surface, white);
  border-radius: var(--unified-border-radius);
  box-shadow: var(--unified-shadow-lg);
  padding: 3rem;
  max-width: 640px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

.error-page-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--unified-border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin: 0 auto 2rem;
}

.error-page-icon.error {
  background: linear-gradient(135deg, rgba(250, 112, 84, 0.1) 0%, rgba(250, 112, 84, 0.05) 100%);
  color: var(--accent-color, #FA7054);
}

.error-page-icon.warning {
  background: linear-gradient(135deg, rgba(243, 156, 18, 0.1) 0%, rgba(243, 156, 18, 0.05) 100%);
  color: var(--alert-warning-border, #f39c12);
}

.error-page-icon.info {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.1) 0%, rgba(52, 152, 219, 0.05) 100%);
  color: var(--alert-info-border, #3498db);
}

.error-page-title {
  color: var(--text-color);
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.error-page-message {
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.error-page-submessage {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 2.5rem;
  opacity: 0.7;
}

.error-page-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Error Page Responsive */
@media (max-width: 768px) {
  .error-page-container {
    padding: 0.5rem;
  }
  
  /* Template-based: Oben positioniert, weniger Padding */
  .error-page-container.template-based {
    align-items: flex-start !important;
    padding-top: 1rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    min-height: 100vh !important;
  }
  
  .error-page-card {
    padding: 2rem 1.5rem;
    margin: 1rem auto;
  }
  
  /* Template-based: Kompaktere Cards für bessere Mobile-Nutzung */
  .error-page-container.template-based .error-page-card {
    padding: 1.5rem 1rem !important;
    margin: 0 auto !important;
  }
  
  .error-page-title {
    font-size: 1.5rem;
  }
  
  /* Template-based: Kleinere Titel für kompakte Darstellung */
  .error-page-container.template-based .error-page-title {
    font-size: 1.4rem !important;
    margin-bottom: 1rem !important;
  }
  
  .error-page-message {
    font-size: 1rem;
  }
  
  /* Template-based: Kompakte Messages */
  .error-page-container.template-based .error-page-message {
    font-size: 0.95rem !important;
    margin-bottom: 1.2rem !important;
  }
  
  /* Template-based: Kompakte Listen */
  .error-page-container.template-based ul {
    margin-bottom: 1.5rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    max-width: 100%;
  }
  
  .error-page-container.template-based li {
    margin-bottom: 0.6rem !important;
    font-size: 0.9rem !important;
    text-align: left !important;
  }
  
  .error-page-container.template-based .error-page-submessage {
    font-size: 0.85rem !important;
    margin-top: 0.5rem !important;
  }
  
  .error-page-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .error-page-buttons .btn-unified {
    min-width: 200px;
  }
}

/* Tablet/Laptop optimiert (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .error-page-container {
    padding: 2rem 1.5rem;
  }
  
  .error-page-card {
    max-width: 580px;
    padding: 2.5rem;
  }
}

/* =======================================================================
   🔧 MIGRATION HELPERS - TEMPORÄRE KLASSEN
   ======================================================================= */

/* Migration von bestehenden .alert-* Klassen - CSS Fallback */
.alert-migration-success {
  /* Kopiere alle Eigenschaften von .alert-unified.success */
  padding: 16px 20px;
  border-radius: var(--unified-border-radius);
  border-left: 4px solid var(--alert-success-border);
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  box-shadow: var(--unified-shadow);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background-color: var(--alert-success-bg);
  color: var(--alert-success-text);
}

.alert-migration-info {
  padding: 16px 20px;
  border-radius: var(--unified-border-radius);
  border-left: 4px solid var(--alert-info-border);
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  box-shadow: var(--unified-shadow);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background-color: var(--alert-info-bg);
  color: var(--alert-info-text);
}

.alert-migration-warning {
  padding: 16px 20px;
  border-radius: var(--unified-border-radius);
  border-left: 4px solid var(--alert-warning-border);
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  box-shadow: var(--unified-shadow);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background-color: var(--alert-warning-bg);
  color: var(--alert-warning-text);
}

.alert-migration-error {
  padding: 16px 20px;
  border-radius: var(--unified-border-radius);
  border-left: 4px solid var(--alert-error-border);
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  box-shadow: var(--unified-shadow);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background-color: var(--alert-error-bg);
  color: var(--alert-error-text);
}

/* =======================================================================
   💡 USAGE EXAMPLES (als Kommentar für Entwickler)
   =======================================================================

<!-- Alert Beispiele -->
<div class="alert-unified success">
  <i class="alert-unified-icon bi bi-check-circle"></i>
  <div class="alert-unified-content">
    <div class="alert-unified-title">Erfolgreich!</div>
    <p class="alert-unified-message">Die Aktion wurde erfolgreich durchgeführt.</p>
  </div>
</div>

<!-- Button Beispiele -->
<button class="btn-unified primary">Primärer Button</button>
<button class="btn-unified secondary">Sekundärer Button</button>
<button class="btn-unified outline">Outline Button</button>

<!-- Card Beispiele -->
<div class="card-unified">
  <div class="card-unified-header">
    <h3 class="card-unified-title">Card Titel</h3>
    <p class="card-unified-subtitle">Untertitel</p>
  </div>
  <div class="card-unified-body">
    Content hier...
  </div>
  <div class="card-unified-footer">
    <button class="btn-unified primary">Aktion</button>
  </div>
</div>

<!-- Status Beispiele -->
<span class="status-unified active">
  <span class="status-unified-dot"></span>
  Aktiv
</span>

<!-- FULL-SCREEN ERROR PAGE Template -->
<body style="margin: 0;">
  <div class="error-page-container">
    <div class="error-page-card">
      <div class="error-page-icon error">
        <i class="bi bi-exclamation-triangle"></i>
      </div>
      
      <h1 class="error-page-title">Fehler aufgetreten</h1>
      
      <p class="error-page-message">
        Eine detaillierte Fehlerbeschreibung für den Benutzer.
      </p>
      
      <p class="error-page-submessage">
        Zusätzliche Informationen oder Hilfestellungen.
      </p>
      
      <div class="error-page-buttons">
        <a href="/dashboard" class="btn-unified secondary">
          <i class="bi bi-arrow-left me-2"></i>
          Zurück
        </a>
        <a href="/retry" class="btn-unified primary">
          <i class="bi bi-arrow-clockwise me-2"></i>
          Erneut versuchen
        </a>
      </div>
    </div>
  </div>
</body>

<!-- Error Page Varianten -->
<!-- error, warning, info -->
<div class="error-page-icon warning">...</div>
<div class="error-page-icon info">...</div>

======================================================================= */