:root { 
    --bg: #0f172a; 
    --card: #1e293b; 
    --text: #f1f5f9; 
    --accent: #3b82f6; 
    --online: #10b981; 
    --offline: #ef4444; 
    --gray: #64748b; 
}

body { background: var(--bg); color: var(--text); font-family: sans-serif; padding: 20px; margin: 0; }
.main-container { width: 1240px; margin: 0 auto; }

.tabs { margin-bottom: 20px; border-bottom: 1px solid #334155; display: flex; gap: 20px; }
.tab-btn { background:none; border:none; color: var(--gray); padding: 8px 0; cursor:pointer; font-weight:bold; font-size: 13px; text-transform: uppercase; }
.tab-btn.active { color: var(--accent); border-bottom: 2px solid var(--accent); }

.panel { background: var(--card); padding: 20px; border-radius: 8px; border: 1px solid #334155; }
.hidden { display: none; }

/* Tabell-design för DISCOVERY */
table { width: 100%; border-collapse: collapse; }
th { color: var(--accent); font-size: 11px; text-transform: uppercase; text-align: left; padding: 10px; border-bottom: 1px solid #334155; }
td { padding: 10px; border-bottom: 1px solid #334155; font-size: 13.5px; }

.btn-action { color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: bold; background: var(--accent); }
.btn-action:hover { filter: brightness(1.2); }

/* --- NY TILLÄGGSDESIGN --- */

.device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.device-card {
    background: var(--card);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #334155;
    transition: transform 0.2s;
}

.device-card:hover { border-color: var(--accent); }

/* Status-färger för logiken */
.status-indicator { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.status-online { background-color: var(--online); }
.status-offline { background-color: var(--offline); }
.status-unstable { background-color: #fbbf24; }

/* Discovery input-design */
#discovery-table input {
    background: #0f172a;
    border: 1px solid #334155;
    color: white;
    padding: 5px;
    border-radius: 4px;
    width: 90%;
}