/**
 * Universal Mobile CSS - Dark Mode & Light Mode Support
 * Funktioniert auf allen Geräten und Browsern
 */

/* ================================================
   BASIC RESET - Verhindert Browser-Theme Probleme
   ================================================ */
* {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body, html {
    color-scheme: light !important; /* Erzwingt Light Mode */
    background-color: #f5f5f5 !important;
    color: #333333 !important;
}

/* ================================================
   HAUPT-CONTAINER - Immer weißer Hintergrund
   ================================================ */
.booking-card,
.room-card,
.modal-content,
.egb-bookings-container,
#wpcontent,
.wrap {
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* ================================================
   HEADER & TITEL - Dunkler Text auf hellem Grund
   ================================================ */
h1, h2, h3, h4, h5, h6 {
    color: #2c3e50 !important;
    background-color: transparent !important;
}

/* Reservierungsverwaltung Header */
.page-title,
.admin-header,
h1.wp-heading-inline {
    background-color: #667eea !important;
    color: #ffffff !important;
    padding: 15px 20px !important;
    border-radius: 8px !important;
}

/* ================================================
   GRUPPEN-KARTEN - Weiß mit dunklem Text
   ================================================ */
.group-booking-card {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* Gruppen-ID */
.group-booking-card .group-id,
.booking-group-id {
    color: #2c3e50 !important;
    font-weight: 600 !important;
    background-color: #f8f9fa !important;
    padding: 8px 12px !important;
    border-radius: 5px !important;
}

/* Status-Badge */
.status-badge,
.booking-status {
    color: #ffffff !important;
    font-weight: bold !important;
    padding: 5px 12px !important;
    border-radius: 5px !important;
}

.status-badge.approved,
.booking-status.approved {
    background-color: #28a745 !important;
}

.status-badge.pending,
.booking-status.pending {
    background-color: #ffc107 !important;
    color: #000000 !important;
}

.status-badge.cancelled,
.booking-status.cancelled {
    background-color: #dc3545 !important;
}

/* ================================================
   ZIMMER-LISTE - Gute Lesbarkeit
   ================================================ */
.room-item,
.booking-room {
    background-color: #f8f9ff !important;
    color: #333333 !important;
    border-left: 4px solid #667eea !important;
    padding: 12px !important;
    margin: 8px 0 !important;
    border-radius: 5px !important;
}

.room-item .room-name,
.booking-room-name {
    color: #2c3e50 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

.room-item .room-details,
.booking-details {
    color: #555555 !important;
    font-size: 14px !important;
    margin-top: 5px !important;
}

/* "Zimmer:" Label */
.room-label,
label[for*="zimmer"] {
    color: #2c3e50 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    display: block !important;
    margin-bottom: 10px !important;
}

/* ================================================
   BUTTONS - Hoher Kontrast
   ================================================ */
button,
.button,
.btn,
input[type="submit"],
input[type="button"] {
    background-color: #667eea !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

button:hover,
.button:hover,
.btn:hover {
    background-color: #5568d3 !important;
    opacity: 1 !important;
}

/* Bearbeiten Button */
.edit-button,
button[name*="bearbeiten"],
.action-button {
    background-color: #667eea !important;
    color: #ffffff !important;
}

/* Löschen Button */
.delete-button,
button[class*="delete"] {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

/* ================================================
   LINKS - Immer sichtbar
   ================================================ */
a {
    color: #667eea !important;
    text-decoration: none !important;
}

a:hover {
    color: #5568d3 !important;
    text-decoration: underline !important;
}

/* Email-Links */
a[href^="mailto:"] {
    color: #667eea !important;
    font-weight: 500 !important;
    word-break: break-all !important;
}

/* ================================================
   FORMULAR-FELDER
   ================================================ */
input,
textarea,
select {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #cccccc !important;
    padding: 10px !important;
    border-radius: 5px !important;
    font-size: 16px !important;
}

input::placeholder,
textarea::placeholder {
    color: #999999 !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #667eea !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

/* ================================================
   TABELLEN
   ================================================ */
table {
    background-color: #ffffff !important;
    color: #333333 !important;
}

th {
    background-color: #667eea !important;
    color: #ffffff !important;
    padding: 12px !important;
}

td {
    background-color: #ffffff !important;
    color: #333333 !important;
    padding: 12px !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

tr:nth-child(even) td {
    background-color: #f8f9fa !important;
}

/* ================================================
   WORDPRESS ADMIN FIXES
   ================================================ */
#wpadminbar {
    background-color: #23282d !important;
}

.wp-admin #wpbody-content {
    background-color: #f5f5f5 !important;
}

/* ================================================
   MOBILE-SPEZIFISCHE ANPASSUNGEN
   ================================================ */
@media screen and (max-width: 768px) {
    /* Größere Touch-Targets */
    button,
    .button,
    a {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Größere Schrift auf kleinen Displays */
    body, html {
        font-size: 16px !important;
    }
    
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    
    /* Mehr Padding für bessere Lesbarkeit */
    .booking-card,
    .room-card {
        padding: 15px !important;
        margin: 10px !important;
    }
}

/* ================================================
   DARK MODE ÜBERSCHREIBUNG
   Erzwingt Light Mode, egal welches Theme aktiv ist
   ================================================ */
@media (prefers-color-scheme: dark) {
    /* Erzwinge Light Mode für die gesamte App */
    body, html,
    .booking-card,
    .room-card,
    .modal-content,
    .egb-bookings-container {
        background-color: #ffffff !important;
        color: #333333 !important;
    }
    
    /* Text immer dunkel */
    h1, h2, h3, h4, h5, h6,
    p, span, div, label {
        color: #2c3e50 !important;
    }
    
    /* Nur Header darf dunkel sein */
    .page-title,
    .admin-header,
    h1.wp-heading-inline {
        background-color: #667eea !important;
        color: #ffffff !important;
    }
}

/* ================================================
   BROWSER-SPEZIFISCHE FIXES
   ================================================ */

/* Mi Browser Fix */
body[data-browser*="mi"],
html[data-browser*="mi"] {
    color-scheme: light only !important;
    forced-color-adjust: none !important;
}

/* Samsung Internet Fix */
@supports (-webkit-appearance: none) {
    * {
        color-scheme: light !important;
    }
}

/* ================================================
   ZUSÄTZLICHE SICHERHEIT
   Überschreibt alle möglichen Theme-Klassen
   ================================================ */
.dark-mode,
.dark-theme,
[data-theme="dark"],
[class*="dark"] {
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* ================================================
   KONTRAST-VERBESSERUNG
   ================================================ */
.high-contrast {
    filter: contrast(1.1) !important;
}

/* Schatten für bessere Tiefe */
.card-shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* ================================================
   PRINT STYLES (Bonus)
   ================================================ */
@media print {
    * {
        background-color: white !important;
        color: black !important;
    }
}

/* ================================================
   ACCESSIBILITY - Hoher Kontrast Modus
   ================================================ */
@media (prefers-contrast: high) {
    * {
        border-width: 2px !important;
    }
    
    button,
    .button {
        border: 2px solid #000000 !important;
    }
}

/* ================================================
   DEBUGGING (Entfernen in Production)
   ================================================ */
/*
.debug-mode * {
    border: 1px solid red !important;
}
*/

/* ================================================
   ENDE DER CSS-REGELN
   ================================================ */

/**
 * INSTALLATION:
 * 1. Speichere diese Datei als: universal-mobile-fix.css
 * 2. Lade sie hoch nach: /wp-content/plugins/elegant-guesthouse-booking/assets/
 * 3. In pwa_integration.php oder main plugin file diese Zeile hinzufügen:
 * 
 * wp_enqueue_style(
 *     'egb-mobile-fix',
 *     plugins_url('assets/universal-mobile-fix.css', __FILE__),
 *     [],
 *     '1.0.0'
 * );
 */