/* ================================================================================
   GHOST_OS CORE DESIGN SYSTEM V7.1.0 (LIQUID_SYMMETRY)
================================================================================ */

:root {
    --neon: #00f2ff;
    --panel-bg: rgba(0, 15, 15, 0.85);
    --font-main: 'Share Tech Mono', monospace;
    /* Wir nutzen keine festen Pixel mehr für die Spalten, sondern Flex-Basis */
}

/* [02] GLOBAL BASE */
body {
    margin: 0; padding: 0;
    background: #000;
    color: var(--neon);
    font-family: var(--font-main);
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* [03] NAVIGATION (TOP) */
.service-nav.service-grid {
    width: 100%;
    min-height: 140px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    padding: 20px 60px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.95), transparent);
    box-sizing: border-box;
    flex-shrink: 0;
}

.service-btn {
    text-decoration: none;
    color: var(--neon);
    border: 1px solid rgba(0, 242, 255, 0.2);
    padding: 8px 12px;
    background: rgba(0, 30, 30, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: 0.2s ease-in-out;
}

.service-btn:hover {
    background: rgba(0, 242, 255, 0.15);
    border-color: var(--neon);
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.2);
}

/* [04] VIEWPORT GRID (DYNAMISCH) */
.viewport-content {
    flex: 1; /* Nimmt den restlichen Platz zwischen Nav und Footer */
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 20px 60px;
    box-sizing: border-box;
    overflow: hidden;
}

/* [05] SPALTEN-LOGIK */
.side-column {
    flex: 0 0 360px; /* Breite von 350px, wächst nicht, schrumpft nicht */
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: auto;
}

.center-column {
    flex: 1; /* Mitte füllt ALLES aus */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
}

.panel-box {
    background: var(--panel-bg);
    border: 1px solid var(--neon);
    /* Oben/Seiten 20px, unten 35px für Luft unter dem Forecast */
    padding: 20px 20px 35px 20px; 
    height: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    
    /* WICHTIG: Damit leuchtende Icons (Glow) nicht abgehackt werden, 
       nutzen wir 'visible' oder erhöhen den internen Puffer */
    overflow: visible; 
    position: relative;
    
    /* Ein leichter innerer Schatten gibt dem Fenster mehr Tiefe */
    box-shadow: inset 0 0 15px rgba(0, 242, 255, 0.05);
}

/* Verhindert, dass das Wetter-Modul im Panel gequetscht wird */
#env-weather-mini {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Erzeugt den vertikalen Abstand zwischen Temp und Forecast */
}
/* [06] MAIN HUB */
#central-log-container {
    width: 100%;
    height: 100%;
    background: rgba(0, 242, 255, 0.02);
    border: 1px solid rgba(0, 242, 255, 0.1);
    border-left: 4px solid var(--neon);
    padding: 25px;
    overflow-y: auto;
    box-sizing: border-box;
}

/* [07] FOOTER & UTILITY - Fixiert am Boden */
.utility-dock {
    position: fixed;
    bottom: 45px; /* Direkt über der schwarzen Bottom-Bar */
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 60px;
    pointer-events: none; /* Verhindert, dass unsichtbare Flächen Klicks blocken */
    z-index: 90;
}

.utility-panel {
    display: flex;
    align-items: center;
    gap: 15px;
    pointer-events: auto; /* QR-Codes wieder klickbar machen */
}

.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35px;
    background: #000;
    border-top: 1px solid rgba(0, 242, 255, 0.2);
    display: flex;
    align-items: center;
    padding: 0 25px;
    font-size: 0.7rem;
    z-index: 100;
}
/* [08] DYNAMIC SYSTEM LOG (AUTO-FIT) */
#sys-status-log {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    overflow-x: hidden;
    /* Ermöglicht Container-Queries für die Schriftgröße */
    container-type: inline-size; 
    height: 100%;
}

#sys-status-log div {
    white-space: nowrap;        /* Kein Zeilenumbruch */
    overflow: hidden;           /* Überhang verstecken */
    text-overflow: ellipsis;    /* "..." falls zu lang */
    
    /* Dynamische Schriftgröße: 
       Reagiert auf die Breite der .side-column (360px) */
    font-size: clamp(8px, 3.8cqw, 12px); 
    
    line-height: 1.4;
    border-left: 2px solid rgba(0, 242, 255, 0.1);
    padding-left: 8px;
    transition: all 0.2s ease;
}

/* Optional: Verkleinert die Zeitstempel-Klammern für mehr Platz */
#sys-status-log span[style*="opacity:0.5"] {
    font-size: 0.9em;
    margin-right: 4px;
}
#sys-qr-session {
    background-color: #ffffff; /* Reinweiß wie rechts */
    padding: 10px;             /* Abstand zum Rand */
    border-radius: 2px;        /* Leicht abgerundet */
    display: inline-block;     /* Verhindert, dass der Block die ganze Zeile füllt */
    line-height: 0;            /* Verhindert kleine Lücken unten */
}

/* Optional: Damit das Bild im Container sauber sitzt */
#sys-qr-session img {
    display: block;
    margin: 0 auto;
}