:root {
    --dc-bg: #0f1420;
    --dc-panel: #171e2e;
    --dc-panel-2: #1e2740;
    --dc-border: #2a3350;
    --dc-text: #e6e9f0;
    --dc-muted: #8b93a7;
    --dc-accent: #3b82f6;
    --dc-ok: #22c55e;
    --dc-warn: #f59e0b;
    --dc-danger: #ef4444;
    --dc-brand: #333f69;
}

body {
    background-color: var(--dc-bg);
    color: var(--dc-text);
}

.navbar-datacenter {
    background-color: var(--dc-brand);
    border-bottom: 1px solid var(--dc-border);
}

.navbar-brand-logo {
    height: 28px;
}

.navbar-center-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    color: var(--dc-text);
    white-space: nowrap;
}

.sidebar-datacenter {
    width: 250px;
    flex-shrink: 0;
    min-height: calc(100vh - 56px);
    background-color: var(--dc-panel);
    border-right: 1px solid var(--dc-border);
}

.sidebar-datacenter .nav-link {
    color: var(--dc-muted);
    padding: 0.5rem 1.25rem;
}

.sidebar-datacenter .nav-link:hover,
.sidebar-datacenter .nav-link.active {
    color: var(--dc-text);
    background-color: var(--dc-panel-2);
}

.sidebar-datacenter .nav-item-title {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--dc-muted);
    padding: 1rem 1.25rem 0.25rem;
}

.content-datacenter {
    min-height: calc(100vh - 56px);
    min-width: 0;
    overflow-x: auto;
}

.card-datacenter {
    background-color: var(--dc-panel);
    border: 1px solid var(--dc-border);
    border-radius: 0.75rem;
}

.card-datacenter .card-body {
    padding: 1.25rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
}

.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: relative;
}

.status-dot.online, .status-dot.up, .status-dot.running, .status-dot.normal { background-color: var(--dc-ok); }
.status-dot.alerta, .status-dot.degradado, .status-dot.paused { background-color: var(--dc-warn); }
.status-dot.offline, .status-dot.down, .status-dot.critico { background-color: var(--dc-danger); }
.status-dot.desconhecido, .status-dot.manutencao, .status-dot.stopped { background-color: var(--dc-muted); }

/* Reforca visualmente que um equipamento "online" esta de fato ativo agora,
   em vez de ser so uma bolinha estatica igual as demais cores de status. */
.status-dot.online, .status-dot.up, .status-dot.running, .status-dot.normal {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    animation: status-dot-pulse 2s infinite;
}

@keyframes status-dot-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.table-datacenter {
    color: var(--dc-text);
}

.table-datacenter thead {
    color: var(--dc-muted);
    border-bottom: 1px solid var(--dc-border);
}

.table-datacenter td, .table-datacenter th {
    border-color: var(--dc-border) !important;
}

.form-control, .form-select {
    background-color: var(--dc-panel-2);
    border-color: var(--dc-border);
    color: var(--dc-text);
}

.form-control:focus, .form-select:focus {
    background-color: var(--dc-panel-2);
    color: var(--dc-text);
    border-color: var(--dc-accent);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

.form-control::placeholder {
    color: var(--dc-muted);
}

a { text-decoration: none; }