/* WebApp/base.css - Redesign v3.5 - Fixed Header Centering & Stretch Layout */

:root {
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    /* NEUE Farbpalette: Zinc / Neutral */
    --color-bg-app: #09090b;       
    --color-bg-card: #18181b;      
    --color-bg-card-hover: #27272a; 
    --color-bg-input: #27272a;     
    
    /* Akzentfarbe */
    --color-primary: #f97316;            
    --color-primary-hover: #ea580c;
    --color-primary-subtle: rgba(249, 115, 22, 0.1); 

    /* Textfarben */
    --color-text-main: #f4f4f5;    
    --color-text-muted: #a1a1aa;   
    --color-text-dim: #52525b;     

    /* Ränder */
    --color-border: #27272a;       
    --color-border-hover: #3f3f46;
    
    /* Status */
    --color-danger: #ef4444;
    --color-success: #22c55e;
    
    /* Dimensionen */
    --radius-sm: 0.5rem;   
    --radius-md: 0.75rem;  
    --radius-lg: 1rem;     
    
    /* Schatten */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

/* Global Reset & Typography */
body {
    font-family: var(--font-family-sans);
    background-color: var(--color-bg-app);
    color: var(--color-text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-main);
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.2;
    border: none !important; 
    padding-bottom: 0 !important;
}

h1 { font-size: 2rem; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; letter-spacing: -0.015em; margin-bottom: 1.5rem; }
h3 { font-size: 1.25rem; font-weight: 500; color: var(--color-text-main); }
h4 { font-size: 1rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg-app); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-border-hover); }

/* Utility */
.spinner {
    width: 2rem; height: 2rem;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }

/* App Main Content Wrapper */
.app-main-content {
    padding: 2rem;
    max-width: 1400px; 
    margin: 0 auto;
}

/* HEADER - Hybrid Style: Mobile Floating / Desktop Docked 
   -------------------------------------------------------
*/
.app-header {
    /* Flexbox Layout */
    display: flex !important;
    /* FIX: Column Direction erzwingen, damit Dashboard unter der Nav erscheint */
    flex-direction: column !important;
    /* FIX: Stretch sorgt dafür, dass Kinder (Dashboard) volle Breite nehmen */
    align-items: stretch !important; 
    justify-content: flex-start !important;
    
    /* Design: Transparenter Milchglas-Effekt (Global) */
    background-color: rgba(9, 9, 11, 0.4) !important; 
    backdrop-filter: blur(20px) !important;            
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    
    /* Positionierung Global */
    position: sticky;
    z-index: 1000;
    box-sizing: border-box;
    
    /* --- MOBILE DEFAULT (Floating Island) --- */
    top: 0.5rem !important; /* Schwebt etwas unter dem Rand */
    
    /* Rahmen rundherum */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    
    /* Ecken überall rund */
    border-radius: var(--radius-lg) !important; 
    
    /* Layout Mobile */
    padding: 0.5rem 1rem 0.5rem 0.5rem !important;
    width: calc(100% - 1rem) !important; /* Kleiner seitlicher Rand */
    margin: 0 auto 1.5rem auto !important; /* Center Mobile */
    height: auto !important;
}

/* FIX: Dashboard Container soll immer volle Breite haben */
#headerDashboardContainer {
    width: 100% !important;
    flex-basis: 100% !important;
    margin-top: 0;
    /* Animation geschieht über maxHeight in JS */
}

/* --- TABLET & DESKTOP OVERRIDE (Docked Tab) --- */
@media (min-width: 640px) {
    .app-header {
        /* Andocken an den oberen Rand */
        top: 0 !important;
        
        /* Rahmen oben entfernen für nahtlosen Übergang */
        border-top: 0 none transparent !important;
        border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        
        /* Ecken oben eckig, unten rund */
        border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
        
        /* Padding & Layout anpassen */
        padding: 0.75rem 1.5rem 0.75rem 0.75rem !important; 
        
        /* Abstand zum Content */
        margin-bottom: 2rem !important;
        
        /* Notch-Support */
        padding-top: calc(env(safe-area-inset-top) + 0.5rem) !important;
        
        /* Breite an Content anpassen */
        width: calc(100% - 3rem) !important; 
        max-width: calc(1400px - 3rem) !important;
        
        /* FIX: Explizite Zentrierung auf Desktop */
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Desktop Large (lg) */
@media (min-width: 1024px) {
    .app-header { 
        width: calc(100% - 4rem) !important; 
        max-width: calc(1400px - 4rem) !important; 
    }
}

/* Desktop Extra Large (xl) */
@media (min-width: 1280px) {
    .app-header { 
        width: calc(100% - 5rem) !important; 
        max-width: calc(1400px - 5rem) !important; 
    }
}

/* USER AVATAR STYLING */
#headerUserAvatarContainer {
    width: 2.75rem !important;        
    height: 2.75rem !important;       
    border-radius: 50% !important;   
    border-color: rgba(255, 255, 255, 0.15); 
    border-width: 2px !important;
    border-style: solid !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    margin-right: 0 !important;
    overflow: hidden !important; 
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: var(--color-slate-800);
    
    /* FIX: Darf nicht schrumpfen */
    flex-shrink: 0 !important; 
}

#headerUserAvatarContainer img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
}

#headerUserButton {
    padding: 0 !important;            
    border: none !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

/* Benutzername Styling: Mobile aus, Desktop an */
#currentUserName {
    display: none; 
    margin-left: 1rem !important; 
    font-size: 0.95rem !important;
    letter-spacing: 0.01em !important;
}

@media (min-width: 640px) {
    #currentUserName {
        display: inline-block !important; 
    }
}