:root {
    --bg-main: #2f3136;
    --bg-sidebar: #202225;
    --bg-content: #36393f;
    --bg-box: #2a2d31;
    --text-light: #f8f9fa;
    --text-muted: #adb5bd;
    --border-color: #40444b;
    --primary: #5865f2;
    --success: #57f287;
    --danger: #ed4245;
    --warning: #faa61a;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --card-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    
    /* NEUE FARBDEFINITIONEN FÜR ALARMSTUFEN */
    --color-low: #57f287; /* Grün (wie success) */
    --color-medium: #faa61a; /* Orange (wie warning) */
    --color-high: #ed4245; /* Rot (wie danger) */
    
    /* NEU: Dunklerer Hintergrund für das Zentrum der Gauges */
    --color-gauge-center: #1e2023; 

    /* NEU: Farbe für den aktiven Hover-Zustand des Menüs */
    --bg-nav-hover: #292d30;
    
    /* NEU: Akzentfarbe für den Server-Namen/Status */
    --bg-server-accent: #17181a;
    
    /* NEU: Farbe für den Schalter (Toggle Switch) */
    --switch-color: var(--primary);
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: var(--font-family);
    background-color: var(--bg-main);
    color: var(--text-light);
    font-size: 14px;
}

a {
    color: var(--primary);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* --- Login / Auth Seite V2 (Hintergrund und Container) --- */
.auth-body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    /* Hintergrundfarbe nur als Fallback */
    background-color: var(--bg-main);
    /* Muss position: relative haben, damit das Pseudo-Element absolut positioniert werden kann */
    position: relative; 
    /* Stellt sicher, dass das Login-Feld über dem Pseudo-Element liegt */
    z-index: 0; 
}

/* NEU: Hintergrundbild-Definition als Pseudo-Element, um Blur vom Inhalt zu trennen */
.auth-body.login-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/bg.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Blur-Effekt auf das Pseudo-Element */
    filter: blur(4px); 
    /* Zoom, um den unscharfen Rand zu verstecken */
    transform: scale(1.02); 
    
    /* Legt das Pseudo-Element hinter den Inhalt (.auth-container) */
    z-index: -1; 
}

/* Die Klasse .login-bg selbst braucht jetzt nur noch die Positionierung, 
   aber die vorherigen Regeln wurden in das Pseudo-Element verschoben.
   Wir überschreiben die alte .login-bg Klasse.
*/
.login-bg {
    /* Keine direkten Hintergrundstile hier mehr, sie sind im ::before */
    background-image: none !important;
    filter: none !important;
    transform: none !important;
}


.auth-container {
    width: 100%;
    max-width: 450px; /* Leicht breiter für besseren Look */
    padding: 35px;
    
    /* Hintergrund leicht transparent und dunkler für Kontrast */
    background-color: rgba(32, 34, 37, 0.95); /* bg-sidebar mit leichter Transparenz */
    
    border: 1px solid var(--border-color);
    border-radius: 12px; /* Stärker abgerundete Ecken */
    text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5); /* Prominenterer Schatten */
    /* Dies macht die Box selbst leicht durchscheinend */
    backdrop-filter: blur(5px); 
    
    /* Wichtig: Stellt sicher, dass die Box über dem unscharfen Hintergrund liegt */
    z-index: 1; 
}

.auth-title {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 26px;
    color: #fff;
}
.auth-subtitle {
    color: var(--text-muted);
    margin-bottom: 25px;
    font-size: 15px;
}
.auth-container .form-group {
    text-align: left;
    margin-bottom: 15px;
}
.auth-container .btn {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    font-size: 16px;
    font-weight: 600;
}
.auth-container .error-message {
    color: var(--danger);
    background-color: rgba(237, 66, 69, 0.15);
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    border: 1px solid var(--danger);
}
.auth-separator {
    height: 1px;
    background-color: var(--border-color);
    margin: 25px 0;
}
.register-info {
    text-align: center;
    color: var(--text-muted);
}
.register-info p:first-child {
    font-weight: bold;
    color: var(--text-light);
    margin-bottom: 5px;
}
.register-info p:nth-child(2) {
    margin-top: 0;
    margin-bottom: 15px;
}
.btn-secondary {
    background-color: var(--bg-box);
    border-color: var(--bg-box);
    color: var(--text-light);
}
.btn-secondary:hover {
    background-color: #3b3f45; /* Dunklerer Hover */
}


/* --- Hauptlayout --- */
.main-body {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 50px 1fr;
    grid-template-areas:
        "header header"
        "sidebar main";
    height: 100%;
    overflow: hidden;
}

.top-bar {
    grid-area: header;
    background-color: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-color);
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-muted);
}
.top-bar a {
    color: var(--text-light);
    font-weight: bold;
}
.top-bar i {
    margin-left: 5px;
}

/* --- SIDEBAR MODERNISIERT --- */
.sidebar {
    grid-area: sidebar;
    background-color: var(--bg-sidebar);
    /* Nutzt Flexbox, um den Footer nach unten zu drücken */
    display: flex;
    flex-direction: column; 
    padding: 0; /* Entfernt Padding, um Kontrolle über die Header/Footer-Bereiche zu haben */
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.2); /* Fügt leichten Schatten hinzu */
    z-index: 10;
}
.sidebar-header {
    padding: 20px 20px 15px 20px;
    /* Der Header hat jetzt einen dunkleren Akzent */
    background-color: #1a1c1e; 
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* NEU: Flexbox für Server Name und Status */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sidebar-header h3 {
    margin: 0;
    color: #fff;
    letter-spacing: 1px;
    font-size: 16px;
}

/* NEU: Server-Sektion */
.server-status-section {
    padding: 15px 20px;
    background-color: var(--bg-server-accent); /* Dunkler als Sidebar */
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.server-status-section strong {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--text-light);
}
.server-status-bubble {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    color: #000;
    text-transform: uppercase;
}
.server-status-bubble i {
    font-size: 8px;
    margin-right: 5px;
}
.server-status-bubble.status-online {
    background-color: var(--success);
    /* KORRIGIERT: Setzt die Schriftfarbe explizit auf Dunkel, um Kontrast zu gewährleisten */
    color: var(--bg-sidebar); 
}
.server-status-bubble.status-offline {
    background-color: var(--danger);
}


.sidebar-nav {
    flex-grow: 1; /* Lässt die Navigation den gesamten verfügbaren Platz einnehmen */
    overflow-y: auto; /* Erlaubt Scrollen, falls es zu viele Elemente gibt */
    /* NEU: Etwas Padding unten, falls Footer direkt folgt */
    padding: 10px 0;
}
.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Modernerer Navigations-Link-Stil */
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px; /* Abstand zwischen Icon und Text */
    padding: 10px 20px; /* Weniger vertikales Padding */
    color: var(--text-muted);
    transition: background-color 0.2s ease, color 0.2s ease, border-left-color 0.2s ease;
    border-left: 4px solid transparent; /* Etwas dickerer Indikator */
    font-weight: 500;
}
.sidebar-nav a:hover {
    background-color: var(--bg-nav-hover); /* Spezifischer Hover-Hintergrund */
    color: var(--text-light);
    text-decoration: none;
}
.sidebar-nav a.active {
    background-color: var(--bg-main);
    color: #fff;
    border-left-color: var(--primary); /* Akzentfarbe für Aktiv */
    font-weight: bold;
}
.sidebar-nav a i {
    font-size: 16px;
    width: 20px; /* Einheitliche Icon-Breite */
    text-align: center;
}

/* --- NEUER FOOTER-STIL --- */
.sidebar-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
    background-color: #1a1c1e;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    flex-shrink: 0; /* Verhindert, dass der Footer schrumpft */
}
.sidebar-footer p {
    margin: 5px 0;
    line-height: 1.4;
}
.sidebar-footer a {
    color: var(--text-light);
    font-weight: bold;
    text-decoration: none;
}
.sidebar-footer a:hover {
    color: var(--primary);
    text-decoration: underline;
}
/* Herz-Icon-Stil */
.sidebar-footer .fa-heart {
    animation: heartbeat 1.5s infinite;
}
@keyframes heartbeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
/* --- ENDE FOOTER-STIL --- */

.main-content {
    grid-area: main;
    background-color: var(--bg-content);
    padding: 20px;
    overflow-y: auto;
}

.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}

.content-box {
    background-color: var(--bg-box);
    border: 1px solid var(--border-color);
    border-radius: 8px; /* Moderner */
    box-shadow: var(--card-shadow);
    transition: transform 0.2s ease;
}
/* Entferne den Hover-Effekt, da er bei Kacheln im Grid stören kann */
.content-box:hover {
     transform: none; 
}

.box-header {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* Wichtig für Info-Icon-Positionierung */
}
.box-header h2 {
    margin: 0;
    font-size: 18px;
}
.box-content {
    padding: 15px;
}

/* --- Konfiguration Kachel-Layout (Bild 2) --- */
.config-grid-layout {
    display: grid;
    /* FIX: Erzwinge 3 Spalten auf Desktop */
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px;
    padding-bottom: 20px;
}

.config-item-card {
    background-color: var(--bg-content);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.2s ease;
}
.config-item-card:hover {
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(88, 101, 242, 0.5);
    transform: translateY(-1px);
}

.config-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 5px; 
}

.config-item-header label {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-light);
    margin: 0;
    line-height: 1.3;
}
.config-item-header .info-icon {
    position: static;
    transform: none;
    margin-left: 10px;
    flex-shrink: 0;
}

.config-item-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    /* FIX: Stellt sicher, dass das Content-Padding korrekt ist */
    padding-top: 5px; 
}

/* Styling der Eingabefelder in den Kacheln */
.config-item-content input[type="text"],
.config-item-content select,
.config-item-content input[type="number"] {
    width: 100%;
    padding: 8px;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    border-radius: 4px;
    font-size: 14px;
    /* FIX: Abstand zur Description */
    margin-top: 15px; 
}
.config-item-content select {
    height: 38px;
}

.config-item-content .config-desc {
    font-size: 12px;
    color: var(--text-muted);
    /* FIX: Abstand zum Titel/Header */
    margin-top: 0; 
    flex-grow: 1; 
    padding-bottom: 5px;
    line-height: 1.4; 
}

/* FIX: Styling für den Toggle Switch (wenn Checkbox oder Optionswert) */
.toggle-switch-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* FIX: Abstand zur Description (ersetzt margin-top: 10px) */
    margin-top: 15px; 
}

/* FIX: AN/AUS Labels */
.toggle-switch-container > span {
    font-weight: bold;
    font-size: 14px;
    color: var(--danger); 
    transition: color 0.2s ease;
    /* FIX: Positionierung */
    width: 30px; 
    text-align: center;
}

/* Das 'AN'-Label vor dem Switch */
.toggle-switch-container input:checked ~ .switch + span {
    color: var(--text-muted); 
}
.toggle-switch-container input:checked ~ span:first-of-type {
    color: var(--success);
}
.toggle-switch-container input:not(:checked) ~ span:first-of-type {
    color: var(--text-muted);
}
.toggle-switch-container input:not(:checked) ~ .switch + span {
    color: var(--danger);
}


.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  margin: 0;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-color); /* Aus-Zustand */
  transition: .4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: var(--text-light);
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--switch-color); /* An-Zustand */
}

input:checked + .slider:before {
  transform: translateX(26px);
}


/* --- Status-Seite V2 Styles (Kacheln) --- */

/* Spezifische Anordnung des Headers für die Statusseite */
.content-box .status-header-override {
    border-bottom: none; /* Keine Linie unter dem Haupttitel */
    padding-bottom: 0;
    margin-bottom: -5px; /* Etwas näher an die Kacheln rücken */
}
.content-box .status-header-override h2 {
    font-size: 24px; /* Größerer Titel für Servernamen */
    font-weight: 700;
}

/* Layout für die Status-Action Buttons im Header */
.action-buttons-compact {
    display: flex;
    gap: 10px;
}
.action-buttons-compact .btn {
    padding: 8px 15px;
}

/* Grid-Definition für die Statusseite (4 Spalten) */
.status-grid-detailed {
    display: grid;
    /* 2 oder 4 Spalten, je nach Bildschirmgröße */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
    padding-top: 15px; /* Abstand zur Kopfzeile */
}

.status-grid-item {
    height: 150px; /* Einheitliche Höhe für alle Kacheln */
    padding: 20px !important; 
    display: flex;
    flex-direction: column;
}
/* Entferne den Hover-Effekt hier, da er schon auf content-box entfernt wurde */

.status-info-card {
    background-color: var(--bg-box);
}

.kpi-icon-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--text-muted);
}
.kpi-icon-header i {
    font-size: 18px;
    color: var(--primary); /* Akzentfarbe für Icons */
}
.kpi-icon-header .kpi-label {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-muted);
    margin: 0;
}

.kpi-main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/* Hauptwert der Kachel (z.B. IP, Uptime, RAM-Gesamt) */
.kpi-value {
    font-size: 24px;
    font-weight: bold;
    color: var(--text-light);
    line-height: 1.2;
}

.kpi-primary-text {
    color: var(--success); /* Für die IP-Adresse */
}

.kpi-sub-value {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 5px;
}

/* Spezielle Styles für Status-Text und Farbgebung */
#status-text {
    font-size: 28px;
}
#status-text.status-online { color: var(--success); }
#status-text.status-offline { color: var(--danger); }


/* Styles für die Bar-Kacheln */
.resource-bar-card .kpi-main-content {
    align-items: flex-start;
    padding-top: 5px;
}

.kpi-bar-text {
    display: flex;
    align-items: baseline;
    margin-bottom: 5px;
}
.kpi-bar-text .text-muted {
    font-size: 16px;
    font-weight: normal;
    margin-left: 5px;
}

.bar-large {
    height: 15px; /* Größere Bar */
}

/* --- Status-Seite --- */
.status-line {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    margin-bottom: 10px;
    flex-wrap: wrap; /* Wichtig für responsive */
}
.status-line p {
    flex-basis: 30%; /* Gleichmäßige Verteilung */
    text-align: center;
    padding: 5px;
    margin: 0;
}
.status-line strong {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 3px;
}
.status-online { color: var(--success); font-weight: bold; }
.status-offline { color: var(--danger); font-weight: bold; }

.resource-bars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.bar-label {
    margin-bottom: 5px;
    font-size: 13px;
    color: var(--text-muted);
}
.bar-container {
    height: 10px;
    background-color: var(--bg-content);
    border-radius: 5px;
    overflow: hidden;
}
.bar-fill {
    height: 100%;
    background-color: var(--primary);
    transition: width 0.5s ease;
    border-radius: 5px;
}

/* --- Buttons --- */
.action-buttons {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
}
.btn {
    padding: 8px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    background-color: #495057;
    color: var(--text-light);
    transition: background-color 0.2s, border-color 0.2s;
    display: inline-flex;
    align-items: center;
}
.btn:hover { background-color: #6c757d; }
.btn:disabled { cursor: not-allowed; opacity: 0.6; }
.btn-primary { background-color: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background-color: #4752c4; }
.btn-success { background-color: var(--success); border-color: var(--success); color: #000; }
.btn-success:hover { background-color: #45e073; }
.btn-danger { background-color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background-color: #d83b3e; }
.btn-small { padding: 5px 10px; font-size: 12px; }
.btn-small i, .btn i { margin-right: 5px; }

/* --- Konsole & Editor --- */
#console-log, #file-editor {
    width: 100%;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 13px;
    padding: 10px;
    border-radius: 4px;
    /* WICHTIG: Erlaubt Zeilenumbrüche für farbigen Text */
    white-space: pre-wrap; 
    /* Scroll-Anpassung: Muss sichtbar sein */
    overflow-y: auto !important;
}

#console-log { height: 60vh; resize: vertical; }
.console-input { display: flex; gap: 10px; margin-top: 15px; }
.console-input input {
    flex-grow: 1;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    padding: 8px;
    border-radius: 4px;
}

/* NEUE KONSOLE FARBCODING KLASSEN */
#console-log .log-error {
    color: var(--danger); /* Rot für Fehler */
    font-weight: bold;
}
#console-log .log-warning {
    color: var(--warning); /* Gelb/Orange für Warnungen */
}
#console-log .log-info {
    color: var(--success); /* Grün für wichtige Infos (Start/Stop) */
}


/* NEUE HILFE-SEKTION FÜR BEFEHLE */
.command-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
    gap: 20px;
}
.command-item {
    padding: 15px;
    background-color: var(--bg-content);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}
.command-item strong {
    font-size: 16px;
    color: var(--primary);
    margin-bottom: 5px;
    word-break: break-all;
}
.command-item p {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 0;
    margin-bottom: 10px;
    flex-grow: 1;
}
.command-grid .btn-quick-command {
    margin-top: auto; /* Buttons nach unten drücken */
    align-self: flex-start;
}

@media (max-width: 1024px) {
    .command-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten auf Tablets */
    }
    .status-grid-detailed {
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten auf Medium-Screens */
    }
    .config-grid-layout {
        /* Angepasst: 2 Spalten bei kleineren Bildschirmen */
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .command-grid {
        grid-template-columns: 1fr; /* 1 Spalte auf Mobile */
    }
    .status-grid-detailed {
        grid-template-columns: 1fr; /* 1 Spalte auf Mobile-Screens */
    }
    .config-grid-layout {
        grid-template-columns: 1fr;
    }
}

/* --- Dateimanager (NEUES DESIGN) --- */
.file-manager-layout { 
    display: flex;
    flex-direction: column;
    height: 75vh; 
}
.file-browser { 
    border: 1px solid var(--border-color); 
    border-radius: 8px; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    flex-grow: 1;
    background-color: var(--bg-box);
}

#current-path { 
    padding: 10px 15px;
    margin: 0;
    border-bottom: 1px solid var(--border-color); 
    color: var(--text-muted);
    background-color: var(--bg-content);
    font-size: 13px;
    flex-shrink: 0;
}

.file-list-header {
    display: grid;
    grid-template-columns: 1fr 120px 140px; 
    gap: 15px;
    padding: 10px 15px;
    font-weight: bold;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.file-list-header .header-name { text-align: left; padding-left: 35px; }
.file-list-header .header-size { text-align: right; }
.file-list-header .header-actions { text-align: center; }

#file-list { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    overflow-y: auto; 
    flex-grow: 1; 
}
#file-list li {
    display: grid;
    grid-template-columns: 1fr 120px 140px; 
    gap: 15px;
    padding: 12px 15px;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.15s ease-in-out;
}
#file-list li:last-child {
    border-bottom: none;
}
#file-list li:hover {
    background-color: var(--bg-main);
}

#file-list li a { 
    display: flex; 
    align-items: center;
    color: var(--text-light); 
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

#file-list i { 
    margin-right: 15px; 
    font-size: 18px;
    width: 20px;
    text-align: center;
}
#file-list a .fa-folder { color: var(--primary); }
#file-list a .fa-file-alt { color: var(--text-muted); }
#file-list a .fa-arrow-left { color: var(--primary); }

.file-size {
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 14px;
    color: var(--text-muted);
    white-space: nowrap;
    text-align: right;
}

.file-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.file-actions .btn-small, .file-actions a.btn-small {
    background: none;
    border: none;
    color: var(--text-muted); 
    padding: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}
.file-actions .btn-small:hover, .file-actions a.btn-small:hover {
    color: white;
    transform: scale(1.1);
}
#file-list li .file-actions {
    opacity: 0.4;
    transition: opacity 0.2s ease-in-out;
}
#file-list li:hover .file-actions {
    opacity: 1;
}

/* --- Tabellen & Listen --- */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 12px; border-bottom: 1px solid var(--border-color); text-align: left; }
.data-table th { background-color: var(--bg-content); font-weight: bold; }
.data-table td { color: var(--text-muted); }
.data-table td:first-child { color: var(--text-light); }

.styled-list { list-style: none; padding: 0; }
.styled-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid var(--border-color); }
.styled-list li:last-child { border-bottom: none; }
.styled-list i { margin-right: 10px; }
.styled-list div { display: flex; gap: 10px; }
/* Aktivitäts-Log auf feste Höhe setzen, um die Box an den Inhalt anzupassen */
.activity-log-container { max-height: 270px; overflow-y: auto; }


/* --- Admin-Bereiche & Modals --- */
body:not([data-role="admin"]) .admin-only {
    display: none !important;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.modal-content {
    background-color: var(--bg-content);
    padding: 25px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    position: relative;
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    /* Flex-Layout für Modal-Inhalt (Editor) */
    display: flex; 
    flex-direction: column;
}
/* Spezielle CSS-Anpassungen für den File Editor Modal */
.modal-content[style*="max-width: 900px"] {
    max-width: 900px !important;
}
#modal-file-editor {
    width: 100%;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 13px;
    padding: 10px;
    border-radius: 4px;
    white-space: pre-wrap; 
    overflow-y: auto !important;
    /* Füllt den verbleibenden Platz im Modal-Content */
    flex-grow: 1; 
    min-height: 40vh;
    margin-top: 15px;
    resize: none; 
}


.form-group { margin-bottom: 15px; position: relative; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-group input, .form-group select {
    width: 100%;
    padding: 10px;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    border-radius: 4px;
}
.form-group-checkbox { display: flex; align-items: center; gap: 10px; }

/* Info-Icon und Tooltip (Für Overview/Status) */
.info-icon {
    position: absolute; 
    right: 10px; 
    top: 50%;
    transform: translateY(-50%); 
    cursor: pointer;
    color: var(--text-muted);
    padding: 5px; 
}
.info-icon:hover {
    color: var(--text-light);
}

.tooltip {
    position: absolute;
    background-color: var(--bg-sidebar);
    color: var(--text-light);
    padding: 10px;
    border-radius: 5px;
    z-index: 1050; 
    width: 300px; 
    display: none;
    font-size: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    top: 40px; 
    right: -10px;
    text-align: left;
}

/* Zeigt Tooltip an, wenn das Info-Icon gehovert wird */
.info-icon:hover + .tooltip {
    display: block;
}

/* Positionierung für Tooltips in der letzten Box (.activity-box) */
.activity-box .tooltip {
    top: auto; 
    bottom: 40px; 
    right: -10px; 
}

/* Korrektur für Formulare */
.form-group .tooltip {
    top: 0;
    left: 100%;
    margin-left: 10px;
    width: 250px;
    z-index: 1050;
}


/* --- Toasts (Benachrichtigungen) --- */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.toast {
    padding: 15px;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    opacity: 0.95;
    transition: opacity 0.5s ease;
}
.toast-info { background-color: var(--primary); }
.toast-success { background-color: var(--success); color: #000; }
.toast-error { background-color: var(--danger); }

/* --- OVERVIEW GRID LAYOUT (WICHTIG) --- */
.overview-grid {
    display: grid;
    /* 5 Spalten für die obere KPI-Reihe (Gauge Charts) */
    grid-template-columns: repeat(5, 1fr); 
    grid-auto-rows: minmax(200px, auto); /* Höhere Mindesthöhe für Gauge Charts */
    gap: 20px;
    grid-template-areas:
        "status-kpi uptime-kpi players-kpi cpu-kpi ram-kpi"
        "chart-cpu-full chart-cpu-full chart-cpu-full chart-cpu-full chart-cpu-full" 
        "chart-ram-full chart-ram-full chart-ram-full chart-ram-full chart-ram-full"
        "players-chart-full players-chart-full players-chart-full players-chart-full players-chart-full"
        "activity-log-full activity-log-full activity-log-full activity-log-full activity-log-full";
}

/* NEUE GRID ZUWEISUNG für Overview */
.status-box-kpi { grid-area: status-kpi; }
.uptime-box-kpi { grid-area: uptime-kpi; }
.players-box-kpi { grid-area: players-kpi; } 
.cpu-box-kpi { grid-area: cpu-kpi; }
.ram-box-kpi { grid-area: ram-kpi; }

/* Ressourcen-Charts */
.chart-box-cpu { grid-area: chart-cpu-full; }
.chart-box-ram { grid-area: chart-ram-full; }
.chart-box-players { grid-area: players-chart-full; }

/* Aktivität als letztes */
.activity-box { grid-area: activity-log-full; }

/* Styles für KPI-Kacheln (Gauge-spezifisch für Overview) */
.kpi-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 10px; 
    position: relative;
}
.kpi-chart-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1; 
    width: 100%;
    position: relative;
    padding: 0 5px;
}
.kpi-gauge-value {
    position: absolute;
    top: 60%; 
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: bold;
    color: var(--text-light);
    z-index: 10;
    pointer-events: none;
}
.status-box-kpi .kpi-value.status-online, 
.status-box-kpi .kpi-value.status-offline {
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
}
.kpi-card .box-header {
    border-bottom: none !important;
    padding: 0 10px 5px 10px !important;
    display: block; 
    height: auto !important;
    line-height: 1.2;
    flex-shrink: 0; 
}
.kpi-chart-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
}


/* Responsive Anpassung für kleinere Bildschirme */
@media (max-width: 1200px) {
    /* Bei mittelgroßen Bildschirmen gehen wir auf 2 Spalten */
    .overview-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: minmax(180px, auto); 
        grid-template-areas:
            "status-kpi uptime-kpi"
            "players-kpi cpu-kpi"
            "ram-kpi ram-kpi"
            "chart-cpu-full chart-cpu-full"
            "chart-ram-full chart-ram-full"
            "players-chart-full players-chart-full"
            "activity-log-full activity-log-full"; 
    }
}

@media (max-width: 768px) {
    /* Bei kleinen Bildschirmen (Mobil) gehen wir auf 1 Spalte */
    .main-body {
        grid-template-columns: 1fr;
        grid-template-rows: 50px auto 1fr;
        grid-template-areas:
            "header"
            "sidebar"
            "main";
    }
    /* Mobile: Sidebar wird standardmäßig ausgeblendet, muss über JS eingeblendet werden */
    .sidebar { display: none; } 
    .main-content { padding: 10px; }
    
    .overview-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(150px, auto);
        grid-template-areas:
            "status-kpi"
            "uptime-kpi"
            "players-kpi"
            "cpu-kpi"
            "ram-kpi"
            "chart-cpu-full"
            "chart-ram-full"
            "players-chart-full"
            "activity-log-full";
    }

    .status-grid-detailed {
        grid-template-columns: 1fr; /* 1 Spalte auf Mobile-Screens */
    }
    .content-box .status-header-override {
        flex-direction: column;
        align-items: flex-start;
    }
    .action-buttons-compact .btn {
        margin-top: 15px;
        width: 100%;
        justify-content: space-between;
    }
    .action-buttons-compact .btn {
        flex-grow: 1;
        text-align: center;
        justify-content: center;
    }
    
    /* Dateimanager-Layout auf Mobilgeräten */
    .file-manager-layout { grid-template-columns: 1fr; height: auto; }
}

/* --- NEU: Custom Chart.js Tooltip --- */
#chartjs-tooltip {
    opacity: 1;
    position: absolute;
    background: rgba(42, 45, 49, 0.95); /* --bg-box mit hoher Deckkraft */
    color: var(--text-light);
    border-radius: 4px;
    padding: 8px 12px;
    pointer-events: none;
    transition: all .1s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    border: 1px solid var(--border-color);
    font-size: 12px;
    z-index: 1001; /* Stellt sicher, dass es über dem Diagramm-Canvas liegt */
    min-width: 150px;
}

#chartjs-tooltip table {
    margin: 0;
    border-collapse: collapse;
    width: 100%;
}

#chartjs-tooltip th,
#chartjs-tooltip td {
    border-width: 0;
    padding: 3px 0;
    text-align: left;
}

#chartjs-tooltip .tooltip-title {
    font-weight: bold;
    color: var(--text-muted);
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 5px;
    display: block;
}

#chartjs-tooltip .tooltip-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
}