/* Termix Web - Custom Styles */

/* ── Dashboard cards ──────────────────────────────────────── */
.card-device {
    transition: box-shadow 0.2s;
}
.card-device:hover {
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.15);
}
.card-device .card-title {
    font-size: 1rem;
    font-weight: 600;
}

/* ── Status indicator ─────────────────────────────────────── */
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}
.status-dot.online  { background-color: #198754; }
.status-dot.stale   { background-color: #ffc107; }
.status-dot.offline { background-color: #dc3545; }
.status-dot.unknown { background-color: #6c757d; }

/* ── Big value display ────────────────────────────────────── */
.big-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}
.big-value .unit {
    font-size: 1rem;
    font-weight: 400;
    color: #6c757d;
}

/* ── Chart container ──────────────────────────────────────── */
.chart-container {
    position: relative;
    height: 250px;
}

/* ── Login page ───────────────────────────────────────────── */
.login-container {
    max-width: 400px;
    margin: 80px auto;
}

/* ── Table tweaks ─────────────────────────────────────────── */
.table-devices td {
    vertical-align: middle;
}

/* ── Responsive fixes ─────────────────────────────────────── */
@media (max-width: 768px) {
    .big-value { font-size: 1.5rem; }
    .chart-container { height: 200px; }
}