@import url('./design-tokens.css');

/* =============================================================================
   BASE WINDOW FRAMEWORK (brain.css)
   =============================================================================
   Zentrales Fenster-Framework der App.
   .base-window (ehemals .brain-window) wird von ~29 Fenstern als Basis-Klasse verwendet.
   .brain-content ist der generische Content-Container (~12 Fenster).

   Inhalt:
   1. .base-window / .brain-content — Basis-Layout (alle Fenster)
   2. .brain-header — DEPRECATED (kein HTML nutzt es, nur JS-Selektoren)

   Ausgelagert (2026-02 Cleanup):
   - css/brain-scene.css — #brain-canvas, #brain-buttons, #brain-info-box, etc.
   - css/dashboard.css — Dashboard-spezifische Regeln
   - css/context-graph.css — #context-graph-canvas
   ============================================================================= */

/* Base Window Styles */
.base-window {
    position: fixed;
    /* Standard 2026: Positionierung erfolgt via JS (Zentrieren) */
    width: 90vw;
    height: 85vh;
    /* top muss >= Topbar-Höhe (110px) liegen — vorher 80px → Topbar überdeckte Fenster-Header */
    top: 115px;
    left: 5vw;
    padding: 0; /* Entfernt Padding, um Canvas-Raum zu maximieren */
    /* Erhöhte Deckkraft verhindert Klick-Durchlässigkeit auf darunterliegende Elemente */
    background: var(--color-bg-darker);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    cursor: default;
    resize: both;
    min-width: 200px;
    min-height: 50px;
    /* max-width/max-height ENTFERNT für Expertaizer 2026 Standard (2000px) */
    overflow: hidden;
    box-sizing: border-box;
    display: flex; /* Flex-Container für Full-Size */
    flex-direction: column; /* Stellt sicher, dass Inhalte vertikal gestapelt werden */
    /* Fenster über Canvas (--z-canvas: 10) und Nav-Ebenen */
    z-index: var(--z-window, 500);
    /* Verhindert dass Klicks auf darunterliegende 3D-Szene durchgehen */
    isolation: isolate;
}

.base-window.fullscreen {
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 60001 !important;
    padding: 0 !important; /* Kein Padding im Fullscreen */
    max-width: none !important; /* Entfernt Größenbeschränkungen */
    max-height: none !important;
    border-radius: 0 !important; /* Keine abgerundeten Ecken im Fullscreen */
}

/* #brain-canvas Fullscreen → css/brain-scene.css (2026-02 Cleanup) */

/* Fullscreen Content Optimierung */
.base-window.fullscreen .brain-content,
.base-window:fullscreen .brain-content {
    width: 100% !important;
    height: calc(100% - 34px) !important; /* Berücksichtigt Header */
}

/* Native Fullscreen API Support */
.base-window:fullscreen {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* DEPRECATED: .brain-header — Kein HTML-Template nutzt diese Klasse mehr.
   Alle Fenster verwenden .unified-header (css/window-header-unified.css).
   Diese Regeln bleiben nur für JS-Selektor-Kompatibilität:
   - window-handling.js: '.unified-header, .brain-header'
   - intelligent-positioning.js: '.brain-header'
   - autosave-indicator.js: '.unified-header, .brain-header'
   TODO: JS-Referenzen bereinigen, dann diese Regeln entfernen. */
.brain-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    margin: 0;
    justify-content: space-between;
    background: linear-gradient(180deg, rgba(var(--color-bg-dark-rgb), 0.95), rgba(var(--color-bg-darker-rgb), 0.9));
    border-bottom: 1px solid rgba(var(--color-primary-light-rgb), 0.25);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    color: var(--text-primary);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    min-height: 38px;
    cursor: move;
    user-select: none;
    border-radius: var(--radius-lg) 12px 0 0;
    transition: all var(--transition-normal) ease;
}

.header-title {
    flex: 1;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.4px;
    text-align: left;
    margin-right: auto;
    padding-left: 6px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.brain-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: shimmer 20s infinite linear;
    pointer-events: none;
}

.brain-header:hover {
    background: linear-gradient(180deg, rgba(30, 35, 50, 0.95), rgba(25, 30, 43, 0.9));
    border-bottom-color: rgba(121, 211, 255, 0.4);
}

.brain-header .controls {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    margin-left: auto;
}

.brain-content {
    margin: 0;
    padding: 0;
    padding-top: 0; /* Kein extra Padding - flex-column sorgt für richtige Anordnung */
    font-size: 12px;
    width: 100%;
    height: calc(100% - 44px); /* Anpassung an Unified Header-Höhe (44px) */
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    flex-grow: 1; /* Nimmt restlichen Raum ein */
}

/* #brain-canvas, #brain-buttons, #brain-info-box, #audio-guide-image,
   #scan-status, #sector-status, #scan-results-popup, .click-popup
   → verschoben nach css/brain-scene.css (2026-02 Cleanup) */

/* #context-graph-canvas → Regeln in css/context-graph.css (2026-02 Cleanup) */

/* Responsive Anpassungen */
@media (max-width: 600px) {
    .base-window {
        top: 100px;
        width: 200px;
        height: 200px;
    }

    /* Brain-Scene responsive Regeln → css/brain-scene.css (2026-02 Cleanup) */
}
/* Dashboard-spezifische Regeln → verschoben nach css/dashboard.css (2026-02 Cleanup) */