/* ============================================================================
   alarms-panel.css — Painel de Alarmes Industrial (página completa + sidebar)

   Temas (REQ-FE-009): variáveis com fallback para o tema claro (SB Admin 2)
   e sobrescrita via [data-theme="dark"] (paleta Andon do protótipo).
   A troca de tema é 100% CSS — nenhuma lógica JS.
   ========================================================================== */

.alarms-panel,
#right-sidebar {
    /* superfícies — tema claro (SB Admin 2) */
    --alarm-bg: #f8f9fc;
    --alarm-panel: #ffffff;
    --alarm-card: #ffffff;
    --alarm-card-2: #f8f9fc;
    --alarm-line: #e3e6f0;
    --alarm-text: #3a3b45;
    --alarm-text-2: #858796;
    --alarm-text-3: #b7b9cc;
    /* prioridades ISA-18.2 (cor + ícone + texto, nunca cor sozinha) */
    --alarm-p1: #FF4D4F; --alarm-p1-ink: #ffffff;
    --alarm-p2: #FF8C00; --alarm-p2-ink: #1a1205;
    --alarm-p3: #F5D90A; --alarm-p3-ink: #1a1705;
    --alarm-rtn: #9aa0a6;
    --alarm-ok: #22C55E;
    --alarm-flash: #eef1f8;
}

[data-theme="dark"] .alarms-panel,
[data-theme="dark"] #right-sidebar {
    /* superfícies — tema escuro (Andon) */
    --alarm-bg: #15191E;
    --alarm-panel: #1B2128;
    --alarm-card: #1E242C;
    --alarm-card-2: #222A33;
    --alarm-line: #2A323C;
    --alarm-text: #E8EAED;
    --alarm-text-2: #9AA0A6;
    --alarm-text-3: #6B7280;
    --alarm-rtn: #5A6470;
    --alarm-flash: #222A33;
}

/* ============================================================================
   Página completa (REQ-FE-003) — ocupa o #main-content
   ========================================================================== */

.alarms-panel {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px); /* topbar + margens do layout SB Admin 2 */
    min-height: 480px;
    background: var(--alarm-bg);
    color: var(--alarm-text);
    border: 1px solid var(--alarm-line);
    border-radius: 8px;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.alarms-panel:fullscreen {
    height: 100vh;
    border: none;
    border-radius: 0;
}

/* ---------- Cabeçalho ---------- */
.alarm-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 22px;
    background: var(--alarm-panel);
    border-bottom: 1px solid var(--alarm-line);
}

.alarm-header .brand { font-size: 20px; font-weight: 800; letter-spacing: .5px; }
.alarm-header .brand .k2 { color: var(--alarm-text); }
.alarm-header .brand .sep { color: var(--alarm-text-3); margin: 0 8px; }
.alarm-header .brand .sub { color: var(--alarm-text-2); font-weight: 600; }
.alarm-header .site { font-size: 14px; color: var(--alarm-text-2); font-weight: 600; }
.alarm-header .spacer { flex: 1; }

.alarm-header .machines { font-size: 14px; color: var(--alarm-text-2); font-weight: 600; }
.alarm-header .machines b { color: var(--alarm-text); }
.alarm-header .machines .off { color: var(--alarm-p2); }

.alarm-header .link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--alarm-text-2);
    font-weight: 600;
}

.alarm-header .dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--alarm-ok);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
    animation: alarm-pulse 2s infinite;
}

.alarm-header .link.down .dot { background: var(--alarm-p1); animation: none; }

@keyframes alarm-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
    70% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.alarm-header .clock {
    font-variant-numeric: tabular-nums;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
}

.alarm-header .alarm-btn {
    background: var(--alarm-card-2);
    border: 1px solid var(--alarm-line);
    color: var(--alarm-text-2);
    border-radius: 9px;
    padding: 7px 12px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 600;
}

.alarm-header .alarm-btn:hover,
.alarm-header .alarm-btn.active { color: var(--alarm-text); border-color: var(--alarm-text-3); }

/* ---------- Banner-resumo ISA-101 (REQ-FE-008) ---------- */
.alarm-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 1.3fr;
    gap: 12px;
    padding: 12px 22px;
    background: var(--alarm-panel);
    border-bottom: 1px solid var(--alarm-line);
}

.alarm-summary .kpi {
    background: var(--alarm-card);
    border: 1px solid var(--alarm-line);
    border-left: 6px solid var(--alarm-line);
    border-radius: 10px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.alarm-summary .kpi .lbl {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .6px;
    color: var(--alarm-text-2);
}

.alarm-summary .kpi .num {
    font-size: 34px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.alarm-summary .kpi.p1 { border-left-color: var(--alarm-p1); }
.alarm-summary .kpi.p1 .num { color: var(--alarm-p1); }
.alarm-summary .kpi.p2 { border-left-color: var(--alarm-p2); }
.alarm-summary .kpi.p2 .num { color: var(--alarm-p2); }
.alarm-summary .kpi.p3 { border-left-color: var(--alarm-p3); }
.alarm-summary .kpi.p3 .num { color: var(--alarm-p3); }
.alarm-summary .kpi.eq { border-left-color: var(--alarm-ok); }
.alarm-summary .kpi.eq .num { color: var(--alarm-ok); }
.alarm-summary .kpi.eq .num small { font-size: 16px; font-weight: 700; color: var(--alarm-text-3); }

.alarm-summary .kpi.p1.has { animation: alarm-kpiflash 1.1s steps(2) infinite; }

@keyframes alarm-kpiflash { 50% { background: rgba(255, 77, 79, .18); } }

.alarm-summary .kpi.rate {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-left-color: var(--alarm-text-3);
}

.alarm-summary .kpi.rate .num { font-size: 24px; color: var(--alarm-text); }
.alarm-summary .kpi.rate .lbl { margin-bottom: 2px; }
.alarm-summary .kpi.rate small { color: var(--alarm-text-3); font-size: 11px; font-weight: 600; }
.alarm-summary .kpi.rate small.over { color: var(--alarm-p2); }

/* ---------- Lista de alarmes (REQ-FE-004/005/006) ---------- */
.alarm-list-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 10px 22px 22px;
    background: var(--alarm-bg);
}

.alarm-list-wrap::-webkit-scrollbar { width: 10px; }
.alarm-list-wrap::-webkit-scrollbar-thumb { background: var(--alarm-line); border-radius: 6px; }

.alarm-list { display: flex; flex-direction: column; gap: 8px; position: relative; }

.alarm-row {
    display: grid;
    grid-template-columns: 152px 132px 1fr 150px 96px;
    align-items: center;
    gap: 14px;
    background: var(--alarm-card);
    border: 1px solid var(--alarm-line);
    border-left: 7px solid var(--alarm-rtn);
    border-radius: 11px;
    padding: 11px 16px;
    will-change: transform;
}

.alarm-row .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .4px;
    padding: 6px 11px;
    border-radius: 8px;
    white-space: nowrap;
}

.alarm-row .chip .ic { font-size: 16px; line-height: 1; }
.alarm-row .src { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 19px; font-weight: 800; letter-spacing: .5px; }

/* ---------- Badge de status da máquina (online/offline) ---------- */
/* Informativo — offline é status operacional normal, NÃO alarme. Online pulsa
   em verde; offline fica em tom neutro/discreto (nunca vermelho de alarme). */
.eq-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
    line-height: 1;
    text-transform: uppercase;
    border: 1px solid transparent;
}
.eq-status .eq-status-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.eq-status.on {
    color: #15803d;
    background: rgba(34, 197, 94, .13);
    border-color: rgba(34, 197, 94, .34);
}
.eq-status.on .eq-status-dot {
    background: var(--alarm-ok);
    animation: eq-status-pulse 1.8s ease-out infinite;
}
.eq-status.off {
    color: var(--alarm-text-2);
    background: rgba(100, 116, 139, .13);
    border-color: rgba(100, 116, 139, .30);
}
.eq-status.off .eq-status-dot { background: #94a3b8; }
/* desconhecido: máquina não resolvível — ponto vazado (anel) para distinguir do offline */
.eq-status.unknown {
    color: var(--alarm-text-3);
    background: transparent;
    border-color: var(--alarm-line);
}
.eq-status.unknown .eq-status-dot {
    background: transparent;
    border: 1.5px solid var(--alarm-text-3);
    box-sizing: border-box;
}
[data-theme="dark"] .eq-status.on { color: #4ade80; }

@keyframes eq-status-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); }
    70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.alarm-row .msg { font-size: 18px; font-weight: 600; }
.alarm-row .msg .det { color: var(--alarm-text-2); font-weight: 500; font-size: 15px; }
.alarm-row .val {
    font-size: 17px;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--alarm-text);
}
.alarm-row .age {
    font-size: 15px;
    color: var(--alarm-text-2);
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.alarm-row .state-tag {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    color: var(--alarm-text-3);
    text-align: right;
    margin-top: 3px;
}

/* cores por prioridade (REQ-FE-005) */
.alarm-row.p1 { border-left-color: var(--alarm-p1); }
.alarm-row.p1 .chip { background: var(--alarm-p1); color: var(--alarm-p1-ink); }
.alarm-row.p2 { border-left-color: var(--alarm-p2); }
.alarm-row.p2 .chip { background: var(--alarm-p2); color: var(--alarm-p2-ink); }
.alarm-row.p3 { border-left-color: var(--alarm-p3); }
.alarm-row.p3 .chip { background: var(--alarm-p3); color: var(--alarm-p3-ink); }

/* fallback para chip sem class de prioridade */
.alarm-row .chip { background: var(--alarm-card-2); color: var(--alarm-text-2); }

/* estados ISA-18.2 (REQ-FE-006) */
.alarm-row.unack { animation: alarm-rowflash 1.05s steps(2, jump-none) infinite; }
.alarm-row.p1.unack {
    box-shadow: 0 0 0 1px var(--alarm-p1), 0 6px 22px -8px rgba(255, 77, 79, .5);
}

@keyframes alarm-rowflash { 50% { background: var(--alarm-flash); } }

.alarm-row.ack .chip::after { content: "✓"; margin-left: 2px; opacity: .85; }

.alarm-row.rtn {
    border-left-color: var(--alarm-rtn);
    opacity: .45;
    filter: saturate(.4);
}
.alarm-row.rtn .chip { background: var(--alarm-card-2) !important; color: var(--alarm-text-2) !important; }
.alarm-row.rtn .src, .alarm-row.rtn .msg { color: var(--alarm-text-2); }
.alarm-row.rtn .state-tag { color: var(--alarm-ok); }

/* entrada/saída */
.alarm-row.enter { animation: alarm-enter .35s ease-out; }

@keyframes alarm-enter {
    from { opacity: 0; transform: translateY(-10px) scale(.985); }
    to { opacity: 1; transform: none; }
}

.alarm-row.leaving {
    opacity: 0 !important;
    transform: translateX(40px);
    transition: opacity .5s, transform .5s;
}

.alarm-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--alarm-text-3);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin: 6px 2px 2px;
}

.alarm-divider::before,
.alarm-divider::after { content: ""; flex: 1; height: 1px; background: var(--alarm-line); }

.alarm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--alarm-text-3);
    gap: 10px;
}

.alarm-empty .big { font-size: 46px; }
.alarm-empty .t { font-size: 20px; font-weight: 700; color: var(--alarm-text-2); }

.alarm-audio-hint {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--alarm-card-2);
    border: 1px solid var(--alarm-line);
    color: var(--alarm-text-2);
    padding: 9px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    z-index: 1060;
}

/* ============================================================================
   Sidebar compacto (REQ-FE-013/014) — 400 px à direita, sobreposto
   ========================================================================== */

#right-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 0;
    z-index: 1050;
    overflow: hidden;
    background: var(--alarm-bg);
    border-left: 1px solid var(--alarm-line);
    box-shadow: -6px 0 24px rgba(0, 0, 0, .18);
    transition: width .3s ease;
    color: var(--alarm-text);
}

#right-sidebar.open { width: 400px; }

.rs-inner {
    width: 400px; /* largura fixa para o conteúdo não "quebrar" na animação */
    height: 100%;
    display: flex;
    flex-direction: column;
}

.rs-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--alarm-panel);
    border-bottom: 1px solid var(--alarm-line);
}

.rs-header .rs-brand { font-size: 16px; font-weight: 800; }
.rs-header .rs-clock {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 700;
    color: var(--alarm-text-2);
}

.rs-header .rs-close {
    background: none;
    border: none;
    color: var(--alarm-text-2);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
}

.rs-header .rs-close:hover { color: var(--alarm-text); }

.rs-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 10px 16px;
    background: var(--alarm-panel);
    border-bottom: 1px solid var(--alarm-line);
}

.rs-summary .rs-kpi {
    background: var(--alarm-card);
    border: 1px solid var(--alarm-line);
    border-left: 4px solid var(--alarm-line);
    border-radius: 8px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rs-summary .rs-kpi .lbl { font-size: 10px; font-weight: 800; letter-spacing: .5px; color: var(--alarm-text-2); }
.rs-summary .rs-kpi .num { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.rs-summary .rs-kpi.p1 { border-left-color: var(--alarm-p1); }
.rs-summary .rs-kpi.p1 .num { color: var(--alarm-p1); }
.rs-summary .rs-kpi.p2 { border-left-color: var(--alarm-p2); }
.rs-summary .rs-kpi.p2 .num { color: var(--alarm-p2); }
.rs-summary .rs-kpi.p3 { border-left-color: var(--alarm-p3); }
.rs-summary .rs-kpi.p3 .num { color: var(--alarm-p3); }
.rs-summary .rs-kpi.eq { border-left-color: var(--alarm-ok); }
.rs-summary .rs-kpi.eq .num { color: var(--alarm-ok); }

.rs-list-wrap { flex: 1; overflow-y: auto; padding: 10px 12px; }
.rs-list-wrap::-webkit-scrollbar { width: 8px; }
.rs-list-wrap::-webkit-scrollbar-thumb { background: var(--alarm-line); border-radius: 6px; }

.rs-list { display: flex; flex-direction: column; gap: 6px; }

.rs-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 10px;
    background: var(--alarm-card);
    border: 1px solid var(--alarm-line);
    border-left: 5px solid var(--alarm-rtn);
    border-radius: 9px;
    padding: 8px 10px;
}

.rs-row .rs-ic { font-size: 20px; text-align: center; }
.rs-row .rs-body { min-width: 0; }
.rs-row .rs-src { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 13px; font-weight: 800; }
.rs-row .rs-src .eq-status { font-size: 9px; padding: 1px 6px 1px 5px; gap: 4px; }
.rs-row .rs-src .eq-status .eq-status-dot { width: 6px; height: 6px; }
.rs-row .rs-msg {
    font-size: 12px;
    color: var(--alarm-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rs-row .rs-age {
    font-size: 11px;
    color: var(--alarm-text-2);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.rs-row.p1 { border-left-color: var(--alarm-p1); }
.rs-row.p2 { border-left-color: var(--alarm-p2); }
.rs-row.p3 { border-left-color: var(--alarm-p3); }
.rs-row.unack { animation: alarm-rowflash 1.05s steps(2, jump-none) infinite; }
.rs-row.rtn { opacity: .45; filter: saturate(.4); border-left-color: var(--alarm-rtn); }

.rs-empty {
    text-align: center;
    color: var(--alarm-text-3);
    font-size: 13px;
    font-weight: 600;
    padding: 24px 0;
}

/* ---------- Badge no botão da topbar (REQ-FE-015) ---------- */
.badge-alarm {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #FF4D4F;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
    pointer-events: none;
}