:root {
    --bg: #f4f6f8;
    --card: #ffffff;
    --primary: #2563eb;
    --text: #1e293b;
    --gray: #64748b;
    --success: #10b981;
    --danger: #ef4444;
}

body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 20px; }
.container { max-width: 1000px; margin: 0 auto; }

header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
h1 { margin: 0; }

.card { background: var(--card); border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.server-tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid #e2e8f0; padding-bottom: 10px; }
.tab-btn { background: none; border: none; padding: 10px 20px; cursor: pointer; font-weight: 600; color: var(--gray); border-radius: 6px; }
.tab-btn.active { background: #eff6ff; color: var(--primary); }

.console-card {
    background: #0f172a;
    color: #4ade80; 
    font-family: 'Courier New', Courier, monospace;
    padding: 15px;
    height: 200px;
    overflow-y: scroll;
    border: 2px solid #334155;
    margin-bottom: 20px;
    display: block; /* Sicherstellen, dass sie angezeigt wird */
}
.console-card h3 { margin-top: 0; color: #fff; border-bottom: 1px solid #475569; padding-bottom: 5px; font-size: 14px; }
.log-entry { font-size: 13px; margin-bottom: 4px; border-bottom: 1px dashed #334155; padding-bottom: 2px; }
.log-time { color: #94a3b8; margin-right: 8px; }

/* Table Styles */
.table-container { overflow-x: auto; }
.modem-table { width: 100%; border-collapse: collapse; }
.modem-table th { text-align: left; padding: 12px; border-bottom: 2px solid #e2e8f0; color: var(--gray); font-size: 14px; }
.modem-table td { padding: 12px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
.modem-table tr:hover { background: #f8fafc; }

.status-badge { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
.status-badge.online { background: var(--success); box-shadow: 0 0 5px var(--success); }
.status-badge.offline { background: var(--danger); }

.ip-current { font-weight: 600; font-family: monospace; font-size: 15px; }
.ip-old { color: #94a3b8; font-family: monospace; font-size: 13px; text-decoration: line-through; }
.last-change { font-size: 13px; color: var(--gray); }

/* Switch Anpassung für Tabelle */
.switch { margin: 0; }
.switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc; transition: .4s; border-radius: 34px;
}
.slider:before {
    position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px;
    background-color: white; transition: .4s; border-radius: 50%;
}
input:checked + .slider { background-color: var(--primary); }
input:checked + .slider:before { transform: translateX(22px); }

.btn { cursor: pointer; border: none; padding: 8px 16px; border-radius: 6px; font-weight: 600; }
.btn-primary { background: var(--primary); color: white; }
.btn-secondary { background: #e2e8f0; color: var(--text); }
.master-controls { display: flex; justify-content: space-between; align-items: center; }
.btn-large { padding: 12px 24px; font-size: 16px; }
.batch-buttons { display: flex; gap: 10px; align-items: center; }