/* css/base.css */ 
*, *::before, *::after {
    box-sizing: border-box;
}

/* 1. RESET & GLOBALS */
html {
    /* Erzwingt IMMER eine Scrollleiste, auch wenn die Seite kurz ist. 
       Verhindert, dass der Inhalt springt, wenn man zwischen Dashboard und Manage wechselt. */
    overflow-y: scroll; 
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* Hier greifen die Theme-Variablen */
    background: var(--bg-body); 
    color: var(--text-main);
    
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: background 0.3s ease, color 0.3s ease;
}

/* =========================================
   2. LAYOUT
   ========================================= */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem;  /* Reduziert von 1rem */
    flex: 1; /* Sticky Footer Logic */
    display: flex;
    flex-direction: column;
}

.container-narrow { max-width: 800px; }
.container-form { max-width: 900px; }  /* Breiter für bessere Platznutzung */
.container-small { max-width: 450px; }

.flex-center { justify-content: center; align-items: center; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* =========================================
   3. TYPOGRAPHY
   ========================================= */
h1, h2, h3 {
    margin-top: 0;
    color: var(--text-main); /* Überschriften passen sich an */
}

h1 { font-weight: 800; letter-spacing: -0.02em; }
h2 { font-weight: 700; }

.text-muted { color: var(--text-muted); font-size: 0.9em; }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }

.font-mono { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; }

/* =========================================
   4. GLASS PANELS (Cards)
   ========================================= */
.glass-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--backdrop-blur));
    -webkit-backdrop-filter: blur(var(--backdrop-blur));
    border-radius: 16px;
    padding: 1rem;  /* Reduziert von 1.5rem */
    margin-bottom: 1rem;  /* Reduziert von 1.5rem */
    transition: transform 0.2s ease, border-color 0.2s ease;
}

/* =========================================
   5. FORMS & INPUTS (Wichtig für Kontrast!)
   ========================================= */
.form-group { margin-bottom: 1.2rem; }

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-main);
}

input, select, textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    transition: all 0.2s;
    box-sizing: border-box;  /* Wichtig für alle Inputs */
    
    /* Theme Variablen nutzen! */
    background-color: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
}

/* Spezielle Behandlung für Datumsfelder (iOS-Bugfix) */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;  /* Verhindert Overflow */
}

input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

/* =========================================
   6. BUTTONS
   ========================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.4rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    
    background-color: var(--primary);
    color: #ffffff !important; /* Immer Weiß auf Primary */
}

.btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }

.btn-secondary {
    background-color: var(--bg-secondary); /* Neuer Variablen-Name */
    color: var(--text-main) !important;
    border: 1px solid var(--glass-border);
}

.btn-danger { background-color: var(--danger); color: white !important; }
.btn-purple { background-color: #7c3aed; color: #ffffff !important; }
.btn-block { width: 100%; }
.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.85rem; }

/* =========================================
   7. GRIDS & LAYOUTS (Optimiert)
   ========================================= */

/* Basis-Grid Container */
.dashboard-grid,
.manage-grid {
    display: grid;
    gap: 1rem; /* Etwas kleinerer Abstand spart Platz */
    width: 100%;
    margin-bottom: 2rem;
}

/* DASHBOARD (3 Spalten) 
   minmax(0, 1fr) ist wichtig: Es verhindert, dass lange Wörter 
   die Spalte breiter drücken als erlaubt.
*/
.dashboard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* MANAGE (4 Spalten) */
.manage-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 2-Spalten Grid für Formulare (Kategorie + Standort) */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Karten-Design */
.portal-card, .admin-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    color: var(--text-main);
    
    height: 100%; 
    width: 100%;
    
    /* Flachere Optik, aber flexibel */
    min-height: 120px; 
    padding: 1rem; 
    
    /* Verhindert Überlauf von Text */
    overflow: hidden; 
}

/* Hover-Effekte */
.portal-card:hover, .admin-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--primary);
    transform: translateY(-4px);
}

.portal-icon { 
    font-size: 2rem; 
    margin-bottom: 0.5rem;
    flex-shrink: 0; /* Icon darf nicht gequetscht werden */
}

.portal-title { 
    font-weight: 700; 
    margin-bottom: 0.2rem; 
    font-size: 1.1rem; 
    line-height: 1.2;
    width: 100%;
}

/* =========================================
   RESPONSIVE (Hier verhindern wir das Scrollen)
   ========================================= */

/* LAPTOP & TABLET (unter 1100px)
   Wir brechen früher auf 2 Spalten um, damit nichts abgeschnitten wird.
   Das gilt jetzt für BEIDE Grids (Dashboard & Manage).
*/
@media (max-width: 1100px) {
    .dashboard-grid, 
    .manage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* HANDY (unter 600px)
   Alles untereinander.
*/
@media (max-width: 600px) {
    .dashboard-grid, 
    .manage-grid {
        grid-template-columns: 1fr;
    }
    
    /* Auf dem Handy: Liste statt Kacheln für bessere Lesbarkeit */
    .portal-card, .admin-card {
        flex-direction: row; 
        justify-content: flex-start;
        align-items: center;
        text-align: left;
        min-height: 80px;
        padding: 1rem 1.5rem;
        gap: 1.5rem;
    }
    
    .portal-icon { 
        margin-bottom: 0; 
        font-size: 1.8rem; 
    }
}

/* Hilfsklasse (bleibt gleich) */
.grid-2 { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 1rem; 
}
@media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } }

/* =========================================
   8. TABLES & ALERTS
   ========================================= */
.table-wrapper { overflow-x: auto; border-radius: 8px; }
table { width: 100%; border-collapse: collapse; }

th {
    text-align: left;
    padding: 1rem;
    border-bottom: 2px solid var(--glass-border);
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
}
td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-main);
}
tr:hover td { background-color: var(--glass-bg-hover); }

.alert {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    background: var(--glass-bg);
    border-left: 4px solid var(--primary);
    color: var(--text-main);
}
.alert-error { border-color: var(--danger); background: var(--bg-danger-light); color: var(--danger); }
.alert-success { border-color: var(--success); background: var(--bg-success-light); color: var(--success); }
.alert-simple { margin-bottom: 0.75rem; padding: 0.75rem 1rem; }

.th-check, .td-check {
    width: 2.5rem;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    text-align: center;
}

/* =========================================
   9. UTILS & NAVBAR
   ========================================= */
.flex-row { display: flex; gap: 0.5rem; align-items: center; }
.flex-col { display: flex; flex-direction: column; gap: 1rem; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 0.8rem 1rem;
}

.hub-footer {
    text-align: center;
    padding: 2rem;
    margin-top: auto;
    color: var(--text-muted);
    font-size: 0.85rem;
    border-top: 1px solid var(--glass-border);
}

/* =========================================
   10. MODAL
   ========================================= */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
}
.modal.active { display: flex; }
.modal-content { width: 90%; max-width: 450px; }

/* Mobile */
@media (max-width: 768px) {
    .grid-2 { grid-template-columns: 1fr; }
    .hide-mobile { display: none !important; }
    .navbar { flex-direction: column; gap: 1rem; }
}


/* =========================================
   11. PRINT STYLING (Optimiert für A4)
   ========================================= */

/* Hilfsklasse: Header nur im Druck anzeigen, sonst ausblenden */
.print-header-only { display: none; }

@media print {
    /* Seitenränder: 10mm oben/unten, 15mm links/rechts (Querformat empfohlen) */
    @page {
        size: A4 Landscape;
        margin: 10mm 15mm;
    }

    /* Störende Elemente ausblenden */
    .no-print, 
    .navbar, 
    .theme-switch, 
    .btn, 
    form, 
    .alert,
    .sticky-toolbar { 
        display: none !important; 
    }

    /* Body Reset: Weißer Hintergrund, schwarzer Text */
    body { 
        background: white !important; 
        color: black !important; 
        font-family: 'Segoe UI', Tahoma, sans-serif;
        font-size: 10pt;
        margin: 0 !important; 
        padding: 0 !important;
        -webkit-print-color-adjust: exact; 
        print-color-adjust: exact;
        display: block !important; /* Flexbox vom Body deaktivieren */
    }

    /* Layout Reset */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .glass-panel { 
        border: none !important; 
        box-shadow: none !important; 
        background: none !important; 
        padding: 0 !important; 
        margin: 0 !important;
        width: 100% !important;
        border-radius: 0 !important;
    }

    /* Nur die Navigations-Leiste im Panel ausblenden (enthält Titel & Suche) */
    .glass-panel .flex-between { 
        display: none !important; 
    }
    
    /* Protokoll-Kopfzeile (nur im Druck sichtbar machen) */
    .print-header-only {
        display: block !important;
        margin-bottom: 20px;
        padding-bottom: 10px;
        width: 100%;
    }
    
    .print-title {
        font-size: 16pt;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 20px;
        border-bottom: 2px solid #000;
        padding-bottom: 10px;
    }

    .print-meta {
        display: flex;
        justify-content: space-between;
        font-size: 11pt;
        margin-bottom: 20px;
    }

    /* --- TABELLEN DESIGN (Aggressiv für Druck) --- */
    .table-wrapper { 
        overflow: visible !important; 
        width: 100% !important;
    }
    
    table { 
        width: 100% !important; 
        border-collapse: collapse !important; 
        font-size: 10pt;
        border: 2px solid #000 !important;
    }
    
    th {
        border: 1px solid #000 !important;
        background-color: #eee !important; /* Hellgrau für Header */
        color: #000 !important;
        padding: 5px 8px !important;
        text-align: left;
        font-weight: bold;
    }
    
    td {
        border: 1px solid #000 !important;
        padding: 5px 8px !important;
        color: #000 !important; 
        vertical-align: top;
    }
    
    /* Links schwarz und ohne Unterstreichung */
    a { text-decoration: none !important; color: #000 !important; }
    
    /* Elemente spezifisch für Druck ausblenden */
    .hide-in-print { display: none !important; }
}

/* ========================================================== */
/* NAVBAR STYLE (Menüleiste)                                 */
/* ========================================================== */

.navbar {
    /* Keine Abrundung oben links und rechts */
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    
    /* Sticky oben, damit sie beim Scrollen sichtbar bleibt */
    position: sticky;
    top: 0;
    z-index: 100;
    
    /* Flexbox für Layout */
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Kompakteres Padding für iPad */
    padding: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

/* ========================================================== */
/* FOOTER STYLE - Am Ende der Seite, wie Navbar formatiert   */
/* ========================================================== */

.main-footer {
    /* Am Ende der Seite (nicht fixiert) */
    margin-top: auto;  /* Pusht Footer nach unten */
    width: 100%;
    
    /* Gleiche Eigenschaften wie Navbar, nur gespiegelt */
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--backdrop-blur));
    -webkit-backdrop-filter: blur(var(--backdrop-blur));
    
    /* Abrundung oben statt unten (gespiegelt zur Navbar) */
    border-radius: 16px 16px 0 0;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    
    /* Kompaktes Padding wie Navbar */
    padding: 0.5rem 1rem;
    margin-top: 0.75rem;
    margin-bottom: 0;
    
    /* Flexbox Layout - 3 Spalten */
    display: flex;
    justify-content: center;  /* Zentriert alle Inhalte */
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    
    /* Text-Styling */
    font-size: 0.85rem;
    color: var(--text-muted);
    
    /* Z-Index wie Navbar */
    z-index: 100;
}

/* Footer Content (mittig) */
.footer-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: center;  /* Text zentrieren */
}

/* Footer Links (werden rechts neben Content angezeigt wenn vorhanden) */
.footer-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Footer Links nur anzeigen wenn nicht leer */
.footer-links:empty {
    display: none;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--primary);
}

.footer-links span {
    color: var(--glass-border);
}

/* Mobile Anpassung */
@media (max-width: 768px) {
    .main-footer {
        flex-direction: column;
        text-align: center;
        padding: 0.75rem 1rem;
    }
    
    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Sticky filter/bulk-action toolbar below the navbar */
.sticky-toolbar {
    position: sticky;
    top: 3rem;
    z-index: 50;
}

/* ==========================================================
   MOBILE OPTIMIERUNGEN (iPad, iPhone)
   ========================================================== */

/* Datumsfelder und andere Inputs auf Mobile */
@media (max-width: 768px) {
    /* Datumsfelder nicht zu breit - iOS Fix */
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;  /* WICHTIG für iOS */
        font-size: 16px !important; /* Verhindert Auto-Zoom auf iOS */
        padding: 0.75rem !important;  /* Konsistentes Padding */
        -webkit-appearance: none;  /* iOS Standard-Styling entfernen */
        appearance: none;
    }
    
    /* Alle Inputs Touch-freundlich */
    input, select, textarea {
        font-size: 16px !important; /* iOS auto-zoom verhindern */
        padding: 0.75rem !important;
        min-height: 44px; /* Apple-Empfehlung für Touch-Targets */
    }
    
    /* Buttons größer für Touch */
    .btn {
        min-height: 44px;
        padding: 0.75rem 1.25rem !important;
        font-size: 1rem !important;
    }
    
    .btn-sm {
        min-height: 36px;
        padding: 0.5rem 1rem !important;
    }
    
    /* Grid-Layouts einspaltiger auf iPhone */
    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    }
    
    /* Filter-Grid einspaltiger auf sehr kleinen Screens */
    .glass-panel [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Sticky Toolbar nicht sticky auf Mobile */
    .sticky-toolbar {
        position: relative !important;
        top: auto !important;
    }
    
    /* Schrift etwas größer */
    body {
        font-size: 16px;
    }
    
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
}

/* iPhone & kleine Phones spezifisch (unter 600px) */
@media (max-width: 600px) {
    /* grid-2 wird einspaltig auf kleinen Phones */
    .grid-2 {
        grid-template-columns: 1fr !important;
    }
}

/* iPad spezifisch (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Datumsfelder auf iPad - WICHTIGER FIX */
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;  /* Verhindert zu schmale Felder */
        box-sizing: border-box !important;  /* KRITISCH für iOS */
        font-size: 16px !important;
        padding: 0.75rem !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        /* Verhindert internen Overflow */
        overflow: hidden !important;
    }
    
    /* Form-Group Container auch sicherstellen */
    .form-group {
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    .form-group input[type="date"],
    .form-group input[type="datetime-local"],
    .form-group input[type="time"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* 2-Spalten-Layout beibehalten wo sinnvoll */
    .grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* iPad Querformat spezifisch - Nuclear Option */
@media (min-width: 1000px) and (max-width: 1030px) and (orientation: landscape) {
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"] {
        width: calc(100% - 2px) !important;
        max-width: calc(100% - 2px) !important;
        box-sizing: border-box !important;
        padding: 0.7rem !important;  /* Etwas weniger Padding */
    }
}

/* AGGRESSIVER FIX: iPad Querformat - Alle Viewports */
@media (min-width: 1000px) and (max-width: 1200px) {
    /* Datumsfelder massiv eingrenzen */
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"] {
        width: 95% !important;  /* 95% statt 100% */
        max-width: 95% !important;
        min-width: 0 !important;
        padding: 0.6rem 0.8rem !important;  /* Weniger Padding */
        font-size: 15px !important;  /* Kleinere Schrift */
        box-sizing: border-box !important;
        overflow: hidden !important;
        margin: 0 !important;
        /* iOS-Shadow-DOM verkleinern */
        -webkit-text-size-adjust: 100% !important;
    }
    
    /* Container müssen auch begrenzt sein */
    .form-group,
    .glass-panel [style*="grid-template-columns"] > div {
        max-width: 100% !important;
        overflow: hidden !important;
    }
}

/* Touch-Geräte: Hover-Effekte anpassen */
@media (hover: none) {
    .portal-card:hover,
    .admin-card:hover {
        transform: none !important;
    }
    
    /* Active-State statt Hover */
    .portal-card:active,
    .admin-card:active {
        transform: scale(0.98);
        opacity: 0.8;
    }
}