:root{color-scheme:dark;font-family:Inter,system-ui,Arial,sans-serif;background:#06130d;color:#f4f7f5}*{box-sizing:border-box}body{margin:0;background:#06130d}.wrap{max-width:1500px;margin:auto;padding:28px}.top{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:22px}.top h1{margin:3px 0;font-size:34px}.top p,.muted{color:#8da096;margin:0}.eyebrow{font-size:11px;letter-spacing:.16em;color:#42e98a;font-weight:800}.top-actions{display:flex;gap:18px;color:#8da096}.top a,.back{color:#64e69a;text-decoration:none}.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}.stat,.panel,.device{border:1px solid #20352a;background:#0d1d15;border-radius:16px}.stat{padding:17px;text-decoration:none;color:inherit}.stat span{display:block;color:#9baba2;font-size:13px}.stat strong{display:inline-block;font-size:30px;margin-top:5px}.stat strong.small{font-size:20px}.stat small{margin-left:5px;color:#82958a}.stat.online{border-color:#205d39}.stat.incomplete{border-color:#245083}.stat.offline{border-color:#663333}.stat.partial{border-color:#596064}.panel{padding:18px}.filters{display:flex;gap:10px;margin-bottom:14px}.filters input{flex:1;background:#07140e;border:1px solid #294234;color:#fff;padding:13px 15px;border-radius:10px}.filters button,.login-box button{background:#1ca85a;border:0;color:white;padding:12px 20px;border-radius:10px;font-weight:700}.filters a{padding:12px;color:#9db0a5;text-decoration:none}.summary-line,.section-title{display:flex;justify-content:space-between;color:#8da096;font-size:13px;margin:8px 2px 16px}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;min-width:900px}th{text-align:left;color:#809389;font-size:12px;padding:12px;border-bottom:1px solid #26392f}td{padding:13px 12px;border-bottom:1px solid #1d3026}tbody tr{cursor:pointer}tbody tr:hover{background:#12271b}td small{display:block;color:#71847a;margin-top:4px}.badge{display:inline-block;padding:6px 9px;border-radius:999px;font-size:12px}.badge.normal{background:#143c25;color:#71efa5}.badge.no_device{background:#132d49;color:#75b7ff}.badge.all_offline{background:#3b2020;color:#ff8585}.badge.partial_offline{background:#303437;color:#cbd0d3}.detail-stats{grid-template-columns:repeat(5,1fr)}.device-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}.device{padding:14px}.device span,.device small{display:block;color:#8fa198;margin-top:6px}.panel h2{margin-top:0}.login-body{min-height:100vh;display:grid;place-items:center}.login-box{width:min(420px,90vw);padding:30px;border:1px solid #20352a;background:#0d1d15;border-radius:18px}.login-box h1{margin-bottom:5px}.login-box p{color:#8da096}.login-box label{display:block;margin:18px 0;color:#9cad9f}.login-box input{width:100%;margin-top:7px;padding:13px;background:#07140e;border:1px solid #294234;border-radius:9px;color:white}.login-box button{width:100%}.error{background:#472222;padding:10px;border-radius:8px;color:#ffb1b1}@media(max-width:900px){.stats,.detail-stats{grid-template-columns:repeat(2,1fr)}.top{align-items:flex-start;flex-direction:column}.wrap{padding:16px}}
.filters select {
    min-width: 190px;
    background: #07140e;
    border: 1px solid #294234;
    color: #fff;
    padding: 13px 15px;
    border-radius: 10px;
}
.sort-link {
    color: #809389;
    text-decoration: none;
    white-space: nowrap;
}
.sort-link:hover,
.sort-link.active {
    color: #dce9e1;
}
.sort-arrow {
    display: inline-block;
    margin-left: 5px;
    color: #42e98a;
}
.muted-arrow {
    color: #53675c;
}
.empty {
    padding: 28px;
    text-align: center;
    color: #8da096;
}
@media(max-width:900px) {
    .filters {
        flex-wrap: wrap;
    }
    .filters input,
    .filters select {
        min-width: 100%;
    }
}

.manufacturer-link {
    color: #59a9ff;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 800;
    letter-spacing: .03em;
}
.manufacturer-link:hover {
    color: #8bc4ff;
}

/* Offline / telemetria stale */
.offline-row {
    background: rgba(255, 72, 72, 0.035);
}

.offline-row:hover {
    background: rgba(255, 72, 72, 0.075);
}

.badge.all_offline {
    background: rgba(255, 72, 72, 0.16);
    border: 1px solid rgba(255, 92, 92, 0.55);
    color: #ff7777;
    font-weight: 800;
    box-shadow: 0 0 0 1px rgba(255, 72, 72, 0.05);
}

.stale-value {
    color: #68766e;
}

.offline-last-seen {
    color: #e4aaa7;
}

.offline-age {
    display: block;
    margin-top: 4px;
    color: #ff7777;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Planta com alerta ativo */
.badge.alert {
    position: relative;
    padding-left: 28px;
    background: rgba(255, 76, 76, 0.16);
    border: 1px solid rgba(255, 90, 90, 0.55);
    color: #ff7777;
    font-weight: 800;
}

.badge.alert::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff4d4d;
    transform: translateY(-50%);
    animation: alert-pulse 1.4s ease-in-out infinite;
}

@keyframes alert-pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.55);
    }

    50% {
        opacity: 0.65;
        box-shadow: 0 0 0 7px rgba(255, 77, 77, 0);
    }
}

/* Histórico e detalhes de alertas */
.active-alert-row {
    background: rgba(255, 72, 72, 0.035);
}

.alert-state {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}

.alert-state.active {
    color: #ff7777;
    background: rgba(255, 72, 72, 0.14);
    border: 1px solid rgba(255, 90, 90, 0.38);
}

.alert-state.resolved {
    color: #70d99b;
    background: rgba(65, 210, 125, 0.10);
    border: 1px solid rgba(65, 210, 125, 0.28);
}

.alert-detail-row td {
    padding-top: 0;
    border-top: 0;
}

.alert-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 18px;
    padding: 18px 20px;
    margin: 0 0 12px;
    border: 1px solid rgba(255, 120, 120, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.018);
}

.alert-detail-block {
    min-width: 0;
}

.alert-detail-title {
    display: block;
    margin-bottom: 9px;
    color: #ff9a92;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.alert-detail-text {
    color: #c7d4cd;
    line-height: 1.6;
    white-space: pre-line;
}

@media (max-width: 850px) {
    .alert-details {
        grid-template-columns: 1fr;
    }
}

/* Estado de comunicação dos equipamentos */
.device-communication {
    display: block;
    margin-top: 6px;
    font-weight: 700;
}

.device-communication.online {
    color: #55d98b;
}

.device-communication.offline {
    color: #ff7777;
}

.alert-state.acknowledged {
    color: #e8c66f;
    background: rgba(232, 198, 111, 0.10);
    border: 1px solid rgba(232, 198, 111, 0.28);
}

.alert-state.processing {
    color: #83bfff;
    background: rgba(131, 191, 255, 0.10);
    border: 1px solid rgba(131, 191, 255, 0.28);
}

/* Breadcrumb do detalhe da planta */
.plant-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    color: #4de89a;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.plant-breadcrumb .back {
    margin: 0;
}

.breadcrumb-separator {
    opacity: 0.45;
    font-weight: 400;
}