/* Grundlegendes Styling & Dark Mode Basis */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #050505; 
    color: #e6edf3;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    position: relative; 
    /* Zeigt an, dass der gesamte Bildschirm klickbar ist */
    cursor: pointer; 
}

/* Setzt den Cursor zurück, sobald das Dashboard da ist */
body.revealed {
    cursor: default;
}

/* Dein generiertes Hintergrundbild als gerahmtes Poster */
body::before {
    content: '';
    position: fixed;
    top: 24px;
    bottom: 24px;
    left: 24px;
    right: 24px;
    background-image: url('AI_Griff_ins_Klo_02.jpg');
    
    /* FIX: Bild füllt den Rahmen wieder komplett aus (Satte Optik) */
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center;
    
    border-radius: 20px;
    filter: brightness(1) contrast(1.1);
    transition: filter 0.8s ease; 
    z-index: -1; 
    pointer-events: none;
}

/* Nach dem Klick: Bild leicht abdunkeln für bessere Lesbarkeit der App */
body.revealed::before {
    filter: brightness(0.7) contrast(1.1);
}

/* --- BOSS MODUS (Erweitertes Tarn-Design) --- */
#boss-overlay {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #f3f2f1; 
    color: #323130;
    z-index: 10000; 
    font-family: 'Segoe UI', Arial, sans-serif;
    flex-direction: column;
}

/* Aktivierungs-Logik */
body.boss-mode #boss-overlay {
    display: flex;
}

body.boss-mode::before,
body.boss-mode .engine-container,
body.boss-mode #toast-container {
    display: none !important;
}

body.boss-mode {
    background-color: #f3f2f1;
    cursor: default;
}

.excel-header {
    background-color: #107c41; 
    color: white;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    letter-spacing: 0.3px;
}

.excel-content {
    padding: 20px;
    flex: 1;
    background-color: white;
    margin: 15px;
    border: 1px solid #c8c6c4;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 10px;
    min-width: 800px;
}

th, td {
    border: 1px solid #e1dfdd;
    padding: 10px 12px;
    text-align: left;
}

th {
    background-color: #f3f2f1;
    font-weight: 600;
    color: #605e5c;
    border-bottom: 2px solid #107c41;
}

tbody tr:hover {
    background-color: #f3f2f1;
}

tbody tr:nth-child(even) {
    background-color: #faf9f8;
}

.excel-footer {
    margin-top: 20px;
    font-size: 12px;
    color: #a19f9d;
    font-style: italic;
}

/* --- Toast System --- */
#toast-container {
    position: fixed;
    top: 40px;
    right: 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
    pointer-events: none;
}

.toast {
    background-color: rgba(22, 27, 34, 0.9);
    backdrop-filter: blur(8px);
    color: #e6edf3;
    padding: 16px 24px;
    border-radius: 8px;
    border-left: 4px solid #f85149;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    font-size: 0.9rem;
    min-width: 300px;
    pointer-events: auto;
    animation: toastIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards,
               toastOut 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards 4s;
}

@keyframes toastIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes toastOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* --- Hauptcontainer des Dashboards --- */
.engine-container {
    background-color: rgba(22, 27, 34, 0.75); 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    width: 90%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    z-index: 1; 
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px) scale(0.98);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.engine-container.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* Kopfzeile */
.engine-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background-color: rgba(13, 17, 23, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.brand { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.5px; }
.stats { display: flex; gap: 30px; }
.stat-item { display: flex; flex-direction: column; align-items: flex-end; }
.stat-item .label { font-size: 0.7rem; text-transform: uppercase; color: #8b949e; letter-spacing: 1px; margin-bottom: 4px; }
.stat-item .value { font-size: 1.1rem; font-weight: 600; font-family: monospace; }
.status-active { color: #58a6ff; text-shadow: 0 0 10px rgba(88, 166, 255, 0.4); }

/* Hauptbereich mit Canvas und Text */
.vision-display {
    position: relative;
    height: 400px;
    background-color: transparent; 
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

#particle-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.content-overlay { position: relative; z-index: 2; padding: 0 40px; }
.icon-box { color: #8b949e; margin-bottom: 20px; display: flex; justify-content: center; }
#vision-text { font-size: 2rem; font-weight: 800; line-height: 1.3; margin-bottom: 15px; color: #ffffff; text-wrap: balance; }
.subtitle { color: #8b949e; font-size: 0.9rem; }

/* Fußzeile & Bedienelemente */
.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    background-color: rgba(22, 27, 34, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 3;
}

.btn-primary {
    background-color: #238636;
    color: #ffffff;
    border: 1px solid rgba(240, 246, 252, 0.1);
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.btn-primary:hover { background-color: #2ea043; }
.btn-primary:active { transform: scale(0.98); }

.slider-group { display: flex; align-items: center; gap: 15px; color: #8b949e; font-size: 0.9rem; }
input[type=range] { -webkit-appearance: none; background: transparent; width: 150px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%; background: #58a6ff; cursor: pointer; margin-top: -6px; box-shadow: 0 0 10px rgba(88, 166, 255, 0.5); }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #30363d; border-radius: 2px; }
.slider-badge { background: #21262d; border: 1px solid #30363d; padding: 2px 8px; border-radius: 12px; color: #c9d1d9; font-family: monospace; }