:root {
    --bg-main: #121212;      /* Sfondo principale scurissimo */
    --bg-secondary: #1e1e1e; /* Sfondo per card e sidebar */
    --bg-tertiary: #2d2d2d;  /* Sfondo per input e bordi */
    --text-primary: #ffffff; /* Testo bianco */
    --text-secondary: #a0a0a0; /* Testo grigio chiaro */
    --accent-color: #3B82F6; /* Blu moderno per bottoni e link */
    --accent-hover: #2563eb;
    --danger-color: #ef4444;
    --success-color: #10b981;
    --border-radius: 8px;
}

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    height: 100vh;
}

/* Stili Generici per Form e Input */
.form-container {
    background-color: var(--bg-secondary);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--bg-tertiary);
}

h2 { margin-top: 0; color: var(--text-primary); }
p.subtitle { color: var(--text-secondary); margin-bottom: 1.5rem; }

input[type="text"], input[type="password"] {
    width: 100%;
    padding: 12px;
    margin: 8px 0 16px 0;
    background-color: var(--bg-main);
    border: 1px solid var(--bg-tertiary);
    color: var(--text-primary);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    transition: border-color 0.3s;
}

input:focus { outline: none; border-color: var(--accent-color); }

button.btn-primary {
    width: 100%;
    padding: 12px;
    background-color: var(--accent-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

button.btn-primary:hover { background-color: var(--accent-hover); }

.alert { padding: 10px; border-radius: var(--border-radius); margin-bottom: 15px; font-size: 0.9rem; }
.alert-error { background: rgba(239, 68, 68, 0.2); color: var(--danger-color); border: 1px solid var(--danger-color); }
.alert-success { background: rgba(16, 185, 129, 0.2); color: var(--success-color); border: 1px solid var(--success-color); }

.toggle-link {
    text-align: center; margin-top: 1rem; color: var(--text-secondary); font-size: 0.9rem;
}
.toggle-link a { color: var(--accent-color); text-decoration: none; font-weight: 600; cursor: pointer;}

/* Stili per la Dashboard (Index) */
.dashboard-layout { display: flex; height: 100vh; }
.sidebar {
    width: 260px; background-color: var(--bg-secondary); padding: 1.5rem; border-right: 1px solid var(--bg-tertiary); display: flex; flex-direction: column;
}
.sidebar h3 { margin-top: 0; }
.sidebar-menu { flex-grow: 1; margin-top: 2rem;}
.sidebar a {
    color: var(--text-secondary); text-decoration: none; display: block; padding: 12px 15px;
    border-radius: var(--border-radius); margin-bottom: 5px; transition: all 0.2s;
}
.sidebar a:hover, .sidebar a.active { background-color: var(--bg-tertiary); color: var(--accent-color); }
.sidebar a.logout { color: var(--danger-color); margin-top: auto; }
.sidebar a.logout:hover { background-color: rgba(239, 68, 68, 0.1); }

.main-content { flex-grow: 1; padding: 2rem; overflow-y: auto; }
.dashboard-cards { display: flex; gap: 20px; margin-top: 20px;}
.card {
    background: var(--bg-secondary); padding: 25px; border-radius: var(--border-radius); flex: 1;
    border: 1px solid var(--bg-tertiary); box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
.card h3 { margin: 0 0 10px 0; color: var(--text-secondary); font-size: 1rem; font-weight: normal;}
.card .number { font-size: 2.5rem; margin: 0; font-weight: 700; color: var(--accent-color); }

.alert {
            background-color: #2c2c2c;
            border-left: 5px solid var(--danger-color);
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
            color: var(--danger-color);
            font-weight: bold;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background-color: var(--bg-secondary);
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid var(--bg-tertiary);
        }

        th, td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid var(--bg-tertiary);
        }

        th {
            background-color: rgba(0,0,0,0.2);
            color: var(--text-secondary);
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 1px;
        }

        .status-dot {
            height: 10px;
            width: 10px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 5px;
        }
        .online { background-color: #03dac6; box-shadow: 0 0 8px #03dac6; }
        .offline { background-color: #555; }

        .btn-delete {
            background-color: transparent;
            color: var(--danger-color);
            border: 1px solid var(--danger-color);
            padding: 8px 15px;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.3s;
            font-weight: bold;
            font-size: 0.75rem;
        }

        .btn-delete:hover {
            background-color: var(--danger-color);
            color: white;
        }

        .id-badge {
            background: #111;
            padding: 4px 10px;
            border-radius: 4px;
            font-family: monospace;
            color: var(--accent-color);
            border: 1px solid #333;
        }