/* ************************************************************
 * ESTHELOGUE WEBCLUB - DESIGN-SYSTEM
 * app.css - HAUPT-STYLESHEET
 * 
 * ZENTRALE IMPORT-DATEI FÜR DAS GESAMTE DESIGN-SYSTEM
 * Diese Datei ist die einzige CSS-Datei, die in HTML-Templates eingebunden
 * wird. Sie orchestriert das gesamte modulare CSS-System durch gezielte
 * Imports in einer spezifischen Reihenfolge.
 * 
 * IMPORT-HIERARCHIE (REIHENFOLGE IST KRITISCH):
 * 1. fonts.css        → Schrift-Definitionen (Basis für alles)
 * 2. variables.css    → CSS-Variablen und Design-Tokens  
 * 3. components.css   → Grundlegende UI-Komponenten
 * 4. layout.css       → Layout-Strukturen und Grid-System
 * 5. administrator.css → Administrator-spezifische Komponenten
 * 6. moderator.css    → Moderator-spezifische Komponenten
 * 7. user.css         → Kosmetiker-spezifische Komponenten
 * 8. dashboard-components.css → Dashboard-Overrides (höhere Priorität)
 * 9. deletion-requests.css → DSGVO-Löschanfragen-System
 * 10. ticket-system.css → Ticketsystem-Komponenten (STILLGELEGT)
 * 
 * WARUM DIESE REIHENFOLGE:
 * - Variablen müssen vor ihrer Verwendung definiert sein
 * - Basis-Komponenten vor spezifischen Varianten
 * - Spezifische Overrides am Ende für höchste CSS-Spezifität
 * 
 * VERWENDUNG IN BLADE-TEMPLATES:
 * <link href="{{ asset('css/esthelogue-app.css') }}" rel="stylesheet">
 * 
 * WARTUNG:
 * - Keine direkten Stile hier hinzufügen (nur in globale Überschreibungen)
 * - Import-Reihenfolge niemals ohne Abstimmung ändern
 * - Bei neuen CSS-Modulen: An passender Stelle in Hierarchie einfügen
 * *************************************************************/

/* ************************************************************
 * MODULARE CSS-IMPORTS
 * Alle Design-System-Komponenten in hierarchischer Reihenfolge
 * *************************************************************/

/* STUFE 1: GRUNDLAGEN - Schriften und Design-Tokens */
@import 'esthelogue-fonts.css';        /* Lokale Schrifteinbindung (Open Sans + EstetologueLogo) */

/* STUFE 2: DESIGN-TOKENS - CSS-Variablen für Farben, Abstände, etc. */
@import 'esthelogue-variables.css';    /* Farben, Abstände, Typografie-Skala, Schatten */

/* STUFE 3: BASIS-KOMPONENTEN - Buttons, Cards, Forms, etc. */
@import 'esthelogue-components.css';   /* Grundlegende UI-Elemente für alle Bereiche */

/* STUFE 4: LAYOUT-SYSTEM - Grid, Navigation, Strukturen */
@import 'esthelogue-layout.css';       /* Header, Sidebar, Footer, responsive Grid */

/* STUFE 5: ROLLENSPEZIFISCHE KOMPONENTEN */
@import 'esthelogue-administrator.css'; /* Administrator-Dashboards, Verwaltungstabellen */
@import 'esthelogue-moderator.css';     /* Moderator-Dashboards, eingeschränkte Verwaltung */
@import 'esthelogue-user.css';          /* Kosmetiker-Bereiche, Garantieformulare */

/* STUFE 6: SPEZIFISCHE OVERRIDES - Höhere Priorität */
@import 'esthelogue-dashboard-components.css'; /* Dashboard-spezifische Überschreibungen */

/* STUFE 7: LÖSCHANFRAGEN-SYSTEM */
@import 'esthelogue-deletion-requests.css';

/* STUFE 8: TICKETSYSTEM-KOMPONENTEN - STILLGELEGT AM 29.01.2025 */
/* Kann später wieder aktiviert werden durch Entfernen der Kommentare */
/* @import 'esthelogue-ticket-system.css'; */

/* ************************************************************
 * GLOBALE ÜBERSCHREIBUNGEN UND UTILITIES
 * 
 * Kritische globale Stile, die am Ende angewendet werden und
 * höchste Priorität haben. Nur für systemweite Korrekturen
 * und grundlegende Utilities verwenden.
 * 
 * INHALT:
 * 1. Bootstrap-Grid-Korrekturen
 * 2. Barrierefreiheits-Verbesserungen
 * 3. Mobile/Touch-Optimierungen  
 * 4. Druck-Optimierungen
 * 
 * VORSICHT: Änderungen hier wirken sich auf die gesamte Anwendung aus!
 * *************************************************************/

/* ************************************************************
 * BOOTSTRAP-GRID-KORREKTUREN
 * Entfernung der Standard-Bootstrap-Abstände für spezielle Layouts
 * *************************************************************/
.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

/* ************************************************************
 * BARRIEREFREIHEIT (ACCESSIBILITY)
 * Verbesserungen für Benutzer mit besonderen Bedürfnissen
 * *************************************************************/

/* Deutliche Fokus-Hervorhebung für Tastatur-Navigation */
/* Verwendet Corporate-Gold-Farbe für Marken-Konsistenz */
:focus {
  outline: 3px solid rgba(166, 144, 100, 0.5) !important;
  outline-offset: 2px !important;
}

/* ************************************************************
 * INTERAKTIONS-VERBESSERUNGEN
 * Globale Verbesserungen für Benutzererfahrung
 * *************************************************************/

/* Verhindert ungewollte Textauswahl bei UI-Elementen */
.no-select {
  user-select: none;
}

/* Sanfte Übergangseffekte für alle interaktiven Elemente */
/* Verbessert die Benutzererfahrung durch einheitliche Animationen */
a, button, input, select, textarea {
  transition: all var(--esthelogue-transition-fast);
}

/* ************************************************************
 * MOBILE/TOUCH-OPTIMIERUNGEN
 * Spezielle Anpassungen für Smartphones und Tablets
 * *************************************************************/
@media (max-width: 768px) {
  /* Touch-optimierte Buttons: Mindestgröße 44px für bessere Bedienbarkeit */
  button, 
  [type="button"],
  [type="reset"],
  [type="submit"],
  .btn {
    padding: 0.75rem 1rem;
    min-height: 44px; /* Apple/Google Empfehlung für Touch-Ziele */
  }
  
  /* iOS Safari Zoom-Fix: 16px Mindestschriftgröße verhindert automatisches Zoomen */
  input, 
  select, 
  textarea {
    font-size: 16px !important; /* Kritisch für iOS-Benutzerfreundlichkeit */
  }
}

/* ************************************************************
 * DRUCK-OPTIMIERUNGEN
 * Spezielle Stile für Druckausgaben (Print Media Query)
 * *************************************************************/
@media print {
  /* Optimale Druckfarben: Schwarz auf Weiß für beste Lesbarkeit */
  body {
    color: black;
    background: white;
  }
  
  /* Nützliche URL-Anzeige: Links werden mit ihrer URL gedruckt */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 90%;
    color: #555;
  }
  
  /* Navigation verstecken: Nur Inhalte werden gedruckt */
  .navbar, .sidebar, .footer {
    display: none !important;
  }
  
  /* Vollbreiten-Layout: Maximale Papiernutzung für Inhalte */
  .content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Druck-optimierte Karten: Ohne Schatten, mit sichtbaren Rändern */
  .card, .stats-card, .feature-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
}