/* round 7 module (alarms), built by B8: existing variables only (var(--ink) … var(--on-accent)), no hex colours. Mockup design/features/F11. */

/* ── strip under the top bar (every page; js/alarms.js inserts it after header.top) ── */
.alm-strip{position:sticky;top:0;z-index:19;display:flex;align-items:center;gap:10px;min-height:36px;padding:4px 26px;background:var(--topbar);color:var(--topbar-ink);border-bottom:1px solid var(--tb-btn-bd,var(--rule));white-space:nowrap;font:500 12.5px/1.2 var(--mono);overflow:hidden}
.alm-strip[hidden]{display:none}
.alm-strip .alm-k{font:800 12px/1 var(--font);letter-spacing:.12em}
.alm-strip .alm-c{font:700 11px/1 var(--mono);padding:4px 7px;border-radius:3px;flex:none}
.alm-strip .alm-c1{background:var(--red);color:var(--red-ink,var(--on-accent))}
.alm-strip .alm-c2{background:var(--amber);color:var(--amber-ink,var(--ink))}
.alm-strip .alm-cu{border:1px solid var(--red);color:var(--topbar-ink)}
.alm-strip .alm-ce{background:var(--topbar-ink);color:var(--topbar)}
.alm-strip .alm-last{display:flex;gap:8px;align-items:center;min-width:0;overflow:hidden;margin-left:8px}
.alm-strip .alm-last span:last-child{overflow:hidden;text-overflow:ellipsis;color:var(--tb-sub,var(--topbar-ink))}
.alm-strip .alm-last b{font-family:var(--font)}
.alm-strip .alm-sp{flex:1}
.alm-strip .alm-sb{flex:none;font:700 11.5px/1 var(--font);letter-spacing:.06em;background:transparent;color:var(--topbar-ink);border:1px solid var(--tb-btn-bd,var(--rule));padding:6px 10px;border-radius:4px;cursor:pointer;text-decoration:none}
.alm-strip .alm-sb:hover{background:var(--tb-btn-hover,transparent)}
.alm-strip .alm-sb-red{background:var(--red);border-color:var(--red);color:var(--red-ink,var(--on-accent))}
.alm-strip .alm-sb-red:hover{background:var(--red);filter:brightness(1.08)}
.alm-blink{flex:none;width:9px;height:9px;border-radius:50%;background:var(--red);animation:alm-bl 1s steps(2) infinite}
@keyframes alm-bl{50%{opacity:.2}}
body.tv .alm-strip{display:none}
@media print{.alm-strip{display:none!important}}
@media (prefers-reduced-motion:reduce){.alm-blink,.alm-st-un{animation:none}}

/* ── page ── */
/* R10: active alarms and History on the left, the rules card on the right; one column (active, rules, History) below 1600 px */
.alm-g2{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"act rules" "hist rules";gap:14px;align-items:start}
.alm-g2>*{min-width:0;margin:0}
.alm-g2>.alm-act{grid-area:act} .alm-g2>.alm-rules{grid-area:rules} .alm-g2>.alm-hist{grid-area:hist}
.alm-card{padding:0;overflow:hidden}
.alm-ch{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--rule2);flex-wrap:wrap}
.alm-ch h3{margin:0;font-size:14.5px;font-weight:800}
.alm-ch .alm-m{color:var(--ink2);font-size:12px}
.alm-ch .alm-sp{flex:1}
.alm-ch .btn{padding:5px 11px;font-size:12.5px;white-space:nowrap}
.alm-ch select{width:auto;flex:none;max-width:220px;height:30px;border:1px solid var(--rule);border-radius:7px;background:var(--field,var(--paper));color:var(--ink);font:inherit;font-size:12.5px;padding:0 8px}
.alm-ch .btn.alm-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.alm-scroll{overflow-x:auto}
.alm-page table{border-collapse:collapse;width:100%}
.alm-page th{font:700 var(--fs-11)/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);text-align:left;padding:7px 10px;border-bottom:1px solid var(--rule);background:var(--paper2)}
.alm-page td{padding:8px 10px;border-bottom:1px solid var(--rule2);vertical-align:middle;font-size:12.5px}
/* R10: soft tint only — a P1 waiting for an acknowledgement gets a red edge, escalated rows a light tint; no wall of red */
.alm-al tr.alm-r-un td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
.alm-al tr.alm-r-esc td{background:color-mix(in srgb,var(--red-l) 28%,transparent)} .alm-al tr.alm-r-esc td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.alm-al tr.alm-grp td{background:var(--paper2)} .alm-al tr.alm-grp .alm-acts{flex-direction:row;flex-wrap:wrap;justify-content:flex-end}
.alm-p{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:4px;font:800 12px/1 var(--mono)}
.alm-p1{background:var(--red);color:var(--red-ink,var(--on-accent))}
.alm-p2{background:var(--amber);color:var(--amber-ink,var(--ink))}
.alm-rules .alm-p{width:18px;height:18px;font-size:var(--fs-11)}
.alm-st{font:700 var(--fs-11)/1 var(--mono);letter-spacing:.06em;padding:4px 6px;border-radius:3px;border:1px solid var(--rule);white-space:nowrap}
.alm-st-un{background:var(--amber-l);color:var(--amber-t,var(--ink));border-color:var(--amber)}
.alm-st-esc{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.alm-st-ack{background:var(--green-l);color:var(--green-t,var(--ink));border-color:var(--green-bd,var(--green))}
.alm-ty{display:inline-block;font:700 var(--fs-11)/1 var(--font);padding:3px 7px;border-radius:10px;margin-bottom:3px;white-space:nowrap}
.alm-ty-qc{background:var(--red-l);color:var(--red-t,var(--ink))}
.alm-ty-stuck{background:var(--purple-l);color:var(--purple-t,var(--ink))}
.alm-ty-mat,.alm-ty-msl{background:var(--amber-l);color:var(--amber-t,var(--ink))}
.alm-ty-late{background:var(--blue-l);color:var(--blue-t,var(--ink))}
.alm-ty-cal,.alm-ty-other{background:var(--bg2);color:var(--ink2)}
.alm-ty-down{background:var(--grey-l);color:var(--ink)}
.alm-al td.alm-t{min-width:240px}
.alm-t b{display:block;font-size:12.5px}
.alm-job{display:block;font:500 12px var(--font);color:var(--ink2)}
.alm-det{display:block;font-size:11.5px;color:var(--ink3)}
.alm-own b{display:block}
.alm-own span{font-size:11px;color:var(--ink2)}
.alm-age{font:600 12.5px var(--mono);white-space:nowrap}
.alm-esc{width:190px;min-width:170px}
.alm-tx{font-size:11.5px;white-space:nowrap}
.alm-tx b{font-family:var(--mono)}
.alm-okt{color:var(--green-t,var(--green));white-space:normal}
.alm-redt{color:var(--red-t,var(--red))}
.alm-bar{height:7px;background:var(--bg2);border-radius:4px;overflow:hidden;margin-top:4px}
.alm-bar i{display:block;height:100%;background:var(--amber);transition:width .9s linear}
.alm-bar i.hot{background:var(--red)}
.alm-acts{display:flex;flex-direction:column;align-items:stretch;gap:5px}
.alm-acts .btn{padding:4px 10px;font-size:12px}
.alm-acts .btn{white-space:nowrap}
.alm-empty{text-align:center;color:var(--ink2);padding:18px 10px!important}
.alm-foot{padding:7px 16px;font-size:11.5px}
.alm-faint{color:var(--ink3)}
.alm-hist td{font-size:12px;padding:6px 10px}
.alm-mono{font-family:var(--mono);font-size:11.5px;white-space:nowrap}

/* ── rules card ── */
.alm-rules{margin:0;padding:12px 14px;font-size:12px;color:var(--ink2);line-height:1.5}
.alm-rules h4{font-size:13px;color:var(--ink);font-weight:800;margin:12px 0 6px}
.alm-rules h4:first-child{margin-top:2px}
.alm-rules b{color:var(--ink)}
.alm-rules .btn{margin-top:8px;padding:5px 11px;font-size:12.5px}
.alm-own2 th{padding:4px 6px!important;font-size:var(--fs-11)!important}
.alm-own2 td{padding:5px 6px!important;font-size:11.5px!important;vertical-align:top!important}
.alm-own2 tr.alm-off td{opacity:.5;text-decoration:line-through}
.alm-src{display:inline-block;font:600 var(--fs-11)/1 var(--font);padding:2px 5px;border-radius:3px;margin-left:2px;vertical-align:1px}
.alm-src.ok{background:var(--green-l);color:var(--green-t,var(--ink))}
.alm-src.off{background:var(--bg2);color:var(--ink3)}
.alm-src.wait{background:var(--amber-l);color:var(--amber-t,var(--ink))}
.alm-src.err{background:var(--red-l);color:var(--red-t,var(--ink))}

/* ── dialogs ── */
.alm-dlgb{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.alm-need{outline:2px solid var(--red);outline-offset:1px}
.alm-ed{border-collapse:collapse;width:100%;font-size:12.5px}
.alm-ed th{font:700 var(--fs-11)/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);text-align:left;padding:6px;border-bottom:1px solid var(--rule)}
.alm-ed td{padding:5px 6px;border-bottom:1px solid var(--rule2)}
.alm-ed input:not([type=checkbox]),.alm-ed select{width:100%;min-width:70px;box-sizing:border-box;border:1px solid var(--rule);border-radius:6px;background:var(--field,var(--paper));color:var(--ink);font:inherit;padding:4px 6px}
.alm-ed input[type=number]{width:70px}

@media (max-width:1100px){.alm-g2{grid-template-columns:minmax(0,1fr)}
  /* R10: 1024 — the action column stays on screen: Age and the escalation bar go, buttons sit side by side */
  .alm-al th:nth-child(4),.alm-al td.alm-age{display:none} .alm-al td.alm-t{min-width:180px} .alm-al .alm-esc{width:120px;min-width:110px} .alm-al .alm-bar{display:none}}
.alm-rules .howto{margin-top:8px} .alm-rules p{margin:6px 0 0}

/* ── v1 polish: filter chips, compact rows, buttons never clipped ── */
.alm-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 16px;border-bottom:1px solid var(--rule2)}
.alm-chips:empty{display:none}
.alm-cl{font:700 var(--fs-11)/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-right:2px}
.alm-cdiv{width:1px;height:18px;background:var(--rule);margin:0 4px}
.alm-chip{font:600 12px/1 var(--font);padding:6px 10px;border-radius:14px;border:1px solid var(--rule);background:var(--paper);color:var(--ink2);cursor:pointer;white-space:nowrap}
.alm-chip b{font-family:var(--mono);font-weight:700;margin-left:3px;color:var(--ink)}
.alm-chip:hover{border-color:var(--ink3)}
.alm-chip.hot b{color:var(--red-t,var(--red))}
.alm-chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.alm-chip.on b{color:var(--paper)}
.alm-al td.alm-ps{white-space:nowrap;width:1%}
.alm-al td.alm-ps .alm-p{margin-right:6px;vertical-align:middle}
.alm-al td.alm-t{min-width:220px}
.alm-al .alm-own{max-width:150px}
.alm-al .alm-own span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alm-al .alm-esc{width:150px;min-width:130px}
.alm-al td.alm-actc{width:1%;white-space:nowrap}
.alm-ch .btn:disabled{opacity:.55;cursor:default}
/* the rules card goes under the tables below 1600 px so the alarm table has room (buttons were clipped at 1440) */
@media (max-width:1599px){.alm-g2{grid-template-columns:minmax(0,1fr);grid-template-areas:"act" "rules" "hist"}.alm-rules{column-count:2;column-gap:28px}.alm-rules table,.alm-rules h4,.alm-rules>div,.alm-rules details{break-inside:avoid}}

@media (max-width:900px){.alm-rules{column-count:1}.alm-al th:nth-child(3),.alm-al td.alm-own,.alm-al th:nth-child(4),.alm-al td.alm-age,.alm-al td.alm-ps .alm-st{display:none}.alm-al td.alm-t{min-width:180px}}

/* R10 fix: a row shows at most 2 pills (priority + state); the alarm kind is a coloured caption above the title, not a third pill */
.alm-al td.alm-t .alm-ty{display:block;background:none;padding:0;border-radius:0;margin-bottom:2px;font-size:var(--fs-11)}
.alm-al td.alm-t .alm-ty-cal,.alm-al td.alm-t .alm-ty-other,.alm-al td.alm-t .alm-ty-down{color:var(--ink2)}
.alm-age{font-family:var(--font);font-variant-numeric:tabular-nums}
@media (max-width:1100px){.alm-ch{row-gap:6px}.alm-ch select{max-width:170px}}