/* --- BASIS-EINSTELLUNGEN --- */
body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: #121212; 
    color: #e0e0e0; 
    margin: 0; 
    padding: 20px; 
    line-height: 1.6;
}

/* Haupt-Container */
.container { 
    width: 95%; 
    max-width: 1600px; 
    margin: 20px auto; 
    background: #1e1e1e; 
    padding: 25px; 
    border-radius: 12px; 
    box-shadow: 0 8px 32px rgba(0,0,0,0.5); 
}

h2 { 
    color: #007bff; 
    margin-top: 0; 
    border-bottom: 1px solid #333; 
    padding-bottom: 15px; 
    text-align: center;
}

/* --- DASHBOARD TABELLE (stats.php) --- */
table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 10px; 
    background: #1e1e1e; 
}

th { 
    background: #252525; 
    color: #007bff; 
    padding: 12px; 
    text-align: left; 
    font-size: 0.85em; 
    text-transform: uppercase;
    border-bottom: 2px solid #333; 
}

td { 
    padding: 10px 12px; 
    border-bottom: 1px solid #2a2a2a; 
    font-size: 0.95em;
}

tr:hover { background: #252525; }

.total-row { 
    background: #2c2c2c; 
    font-weight: bold; 
    border-top: 2px solid #007bff; 
}

/* --- EINGABEMASKE GRID (index.php) --- */
.row { 
    display: grid; 
    grid-template-columns: 140px repeat(6, 1fr); 
    gap: 10px; 
    padding: 8px 0; 
    align-items: center; 
    border-bottom: 1px solid #2a2a2a; 
    transition: 0.2s;
}

.row:hover { background: #252525; }
.row:focus-within { 
    background: #1a2a3a; 
    border-left: 4px solid #007bff; 
    border-radius: 4px;
}

.header-row { 
    font-weight: bold; 
    color: #007bff;
    background: #252525; 
    padding: 10px;
    border-radius: 4px;
    font-size: 0.8em;
}

/* --- NANOKVM GRID (kvm.php) --- */
.kvm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.kvm-card {
    background: #1e1e1e;
    border: 2px solid #333;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s;
}

.kvm-card:hover { border-color: #007bff; }

.kvm-header {
    background: #252525;
    padding: 10px 15px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
}

.kvm-content {
    width: 100%;
    height: 250px;
    background: #000;
    position: relative;
}

.kvm-preview { width: 100%; height: 100%; object-fit: contain; }
.kvm-frame { width: 100%; height: 100%; border: none; }

.status-indicator {
    font-size: 0.75em;
    padding: 2px 8px;
    border-radius: 10px;
    background: #121212;
    border: 1px solid #444;
}

/* --- FORMULAR-ELEMENTE --- */
input { 
    width: 100%; 
    box-sizing: border-box; 
    padding: 8px 10px; 
    background: #2a2a2a; 
    border: 1px solid #444; 
    color: white; 
    border-radius: 5px; 
}

input:focus { border-color: #007bff; outline: none; background: #333; }

/* --- BUTTONS --- */
.btn { 
    display: inline-block; 
    padding: 10px 20px; 
    border-radius: 6px; 
    text-decoration: none; 
    font-weight: bold; 
    cursor: pointer; 
    border: none; 
    transition: 0.2s;
}

.btn-blue { background: #007bff; color: white; }
.btn-blue:hover { background: #0056b3; }

.btn-save { background: #28a745; color: white; width: 100%; font-size: 1.1em; margin-top: 20px; }
.btn-save:hover { background: #218838; }

.btn-panik {
    background: linear-gradient(135deg, #ff4444, #cc0000);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

.btn-del { color: #ff4444; text-decoration: none; font-weight: bold; font-size: 1.1em; }

/* --- DIAGRAMM --- */
.chart-container {
    margin-top: 40px;
    background: #1e1e1e;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #333;
}

.chart-controls { text-align: center; margin-bottom: 15px; }

.toggle-btn {
    background: #333;
    color: #aaa;
    border: 1px solid #444;
    padding: 8px 20px;
    margin: 0 5px;
    border-radius: 20px;
    cursor: pointer;
}

.toggle-btn.active { background: #007bff; color: white; border-color: #007bff; }

/* --- LOGIN & STATUS --- */
.login-box { 
    max-width: 340px; 
    margin: 100px auto; 
    background: #1e1e1e; 
    padding: 40px; 
    border-radius: 12px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.7); 
    text-align: center;
    border: 1px solid #333;
}

.km { color: #4caf50; font-weight: bold; }
.traffic { color: #ffa000; font-weight: bold; }
.duration { font-size: 0.8em; color: #aaa; }

.footer-nav { margin-top: 30px; text-align: center; }
.footer-nav a { color: #888; text-decoration: none; margin: 0 10px; }

/* --- IMPORT & RESET SPEZIAL-STYLES --- */
.admin-box {
    max-width: 500px;
    margin: 60px auto;
    background: #1e1e1e;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #333;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.warning-text {
    color: #ff4444;
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 1.1em;
}

.file-input {
    background: #2a2a2a;
    padding: 15px;
    border-radius: 6px;
    border: 1px dashed #555;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Animation für die Erfolgsmeldung */
.status-msg {
    animation: fadeOut 5s forwards;
}

@keyframes fadeOut {
    0% { opacity: 1; }
    80% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); display: none; }
}

/* In der style.css unter .row anpassen */
.row { 
    display: grid; 
    grid-template-columns: 140px 80px repeat(6, 1fr); 
    gap: 8px; 
}