/* 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: 1rem;
    flex: 1; /* Sticky Footer Logic */
    display: flex;
    flex-direction: column;
}

.container-narrow { max-width: 800px; }
.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); }

.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; /* Etwas runder für modernen Look */
    padding: 1.5rem;
    margin-bottom: 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;
    
    /* Theme Variablen nutzen! */
    background-color: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
}

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-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));
}

/* 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); }

/* =========================================
   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; }
}

/* ========================================================== */
/* FOOTER STYLE (Integration IT-Wilfinger Branding)           */
/* ========================================================== */

:root {
    /* Dein Corporate Orange explizit für den Footer, falls --primary mal abweicht */
    --it-footer-orange: #F7931E; 
    --it-footer-text: #4D4D4D;
}

[data-theme="dark"] {
    --it-footer-text: #bdc3c7; /* Helleres Grau für Darkmode */
}

.main-footer {
    position: fixed;  /* WICHTIG: Fixiert den Footer am Bildschirmrand */
    bottom: 0;        /* Ganz unten andocken */
    left: 0;
    width: 100%;
    
    padding: 15px 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    
    /* Damit er sich schön in den Gradienten einfügt: */
    background: rgba(255, 255, 255, 0.3); /* Leicht transparent */
    backdrop-filter: blur(5px);           /* Milchglas-Effekt */
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 10;      /* Sicherstellen, dass er über dem Hintergrund liegt */
}

/* Links im Footer */
.main-footer a {
    color: var(--text-main);
    text-decoration: none;
    margin: 0 10px;
    font-weight: normal;
}

.main-footer a:hover {
    color: var(--it-footer-orange, #F7931E);
    text-decoration: underline;
}

.main-footer span {
    color: rgba(0,0,0,0.2);
}

/* Responsive Anpassung für sehr kleine Screens */
@media (max-width: 400px) {
    .main-footer {
        font-size: 0.8rem;
        padding: 20px 10px;
    }
}