/* Alarmas page: status cards (icon + label, never colour alone) and the history table.
   Status colours are the reserved critical/good pair; text keeps text tokens. */
#alarms{--good:#0ca30c}
.al-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:20px}
.al-card{background:var(--chart-surface);border:var(--nb-border);border-radius:10px;box-shadow:var(--nb-shadow-lg);padding:14px 16px}
.al-card h3{margin:0;font:700 17px/1.1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.al-src{margin:5px 0 12px;font:500 12px/1.3 var(--mono);color:var(--tick)}
.al-state{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:var(--nb-border);border-radius:8px;
  font:700 14px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.al-card.ok .al-state{background:rgba(12,163,12,.16);color:var(--text-hi)}
.al-card.ok .al-icon{color:var(--good)}
.al-card.on{background:#2a1214}
.al-card.on .al-state{background:var(--critical);color:#fff}
.al-since{margin:10px 0 0;font:500 12px/1.3 var(--mono);color:var(--ink-2)}
.al-icon{font-size:15px;line-height:1}

.al-history{margin-top:22px}
.al-wrap{overflow-x:auto;margin-top:10px}
.al-table{width:100%;border-collapse:collapse;font:500 13px/1.3 var(--body);font-variant-numeric:tabular-nums}
.al-table th{text-align:left;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tick);
  padding:8px 10px;border-bottom:2px solid var(--axis)}
.al-table td{padding:10px;border-bottom:1px solid var(--grid);white-space:nowrap}
.al-table .al-name{font-weight:700}
.al-table tr.active td{background:rgba(208,59,59,.14)}
.al-table tr.active td:nth-child(3){color:#ff8a8a;font-weight:700}

/* Active-alarm counter on the Alarmas tab. */
.tb-count{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:7px;padding:0 5px;border-radius:9px;
  background:var(--critical,#d03b3b);color:#fff;border:2px solid var(--nb-line);font:700 11px/1 var(--mono)}

@media (max-width:720px){
  .al-grid{grid-template-columns:1fr 1fr;gap:12px}
  .al-card{padding:12px}
  .al-card h3{font-size:15px}
  .al-table td,.al-table th{padding:8px 6px}
}