/* core/console-popups.css -- [consolepopups-77 2026-10-09] ALERT + MONITOR pop-ups in the console pop-up theme.
 * Reference theme (operator-approved): Radio Patch pop-up (radio-patch.js injectStyles, [patch-skin2] layer :392-458:
 * #rp-modal frame, .rp-head/.rp-h1/.rp-h2, .rp-col panels, .rp-btn, .rp-sw/.rp-opt-l.on green) and the Paging pop-up
 * (index.html .page-box :217, .page-header :218, .page-sidebar-hdr :235, .pager-btn :236, .page-footer :262, .page-close-btn :268).
 * Look only: every button keeps its id / onclick / data-* exactly. Buttons only (no select / range).
 * Used by: index.html #alert-overlay markup, core/xconsole.js MONITOR panel (#xmon-box), and the sections other scripts add
 * to that panel (vaudio-console.js #va-xmon, phonemon-console.js #pm-xmon: their inline row styles are overridden here). */
.pu-box{background:var(--n0-c-070e1c, #070e1c);border:2px solid var(--n0-c-22d3ee, #22d3ee);border-radius:calc(12px * var(--n0-radius, 1));display:flex;flex-direction:column;max-height:88vh;max-width:96vw;overflow:hidden;
  box-shadow:0 0 58px var(--n0-c-22d3ee-a380, rgba(34,211,238,.38)),0 0 140px var(--n0-c-22d3ee-a130, rgba(34,211,238,.13)),0 24px 74px var(--n0-c-000000-a920, rgba(0,0,0,.92));
  font-family:var(--n0-font-share-tech-mono, "Share Tech Mono","Courier New",monospace);color:var(--n0-c-e2e8f0, #e2e8f0);text-align:left}
.pu-box.pu-alert{width:560px}
.pu-box.pu-mon{width:600px}
.pu-head{display:flex;align-items:center;gap:calc(16px * var(--n0-space, 1));padding:calc(18px * var(--n0-space, 1)) calc(22px * var(--n0-space, 1)) calc(14px * var(--n0-space, 1));flex:0 0 auto}
.pu-head-ico{font-size:calc(30px * var(--n0-text, 1));line-height:1;color:var(--n0-c-22d3ee, #22d3ee);text-shadow:0 0 18px var(--n0-c-22d3ee-a900, rgba(34,211,238,.9));flex:0 0 auto}
.pu-head-ico.pu-amber{color:var(--n0-c-ffab40, #ffab40);text-shadow:0 0 18px var(--n0-c-ff9100-a850, rgba(255,145,0,.85))}
.pu-head-txt{flex:1;min-width:0}
.pu-h1{font-size:calc(24px * var(--n0-text, 1));font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--n0-c-f1f5f9, #f1f5f9);line-height:1.15;text-shadow:0 0 18px var(--n0-c-22d3ee-a400, rgba(34,211,238,.4))}
.pu-h2{font-size:calc(12px * var(--n0-text, 1));color:var(--n0-c-7dd3fc, #7dd3fc);margin-top:5px;letter-spacing:.02em}
.pu-body{flex:1 1 auto;min-height:0;overflow-y:auto;margin:0 16px;padding:calc(14px * var(--n0-space, 1)) calc(16px * var(--n0-space, 1));border:1px solid var(--n0-c-22d3ee-a550, rgba(34,211,238,.55));border-radius:calc(10px * var(--n0-radius, 1));background:var(--n0-c-0b1426, #0b1426);
  display:flex;flex-direction:column;gap:calc(9px * var(--n0-space, 1))}
.pu-body::-webkit-scrollbar{width:9px}.pu-body::-webkit-scrollbar-thumb{background:var(--n0-c-1e8fb5, #1e8fb5);border-radius:calc(5px * var(--n0-radius, 1))}
.pu-foot{display:flex;justify-content:flex-end;gap:calc(10px * var(--n0-space, 1));padding:calc(14px * var(--n0-space, 1)) calc(16px * var(--n0-space, 1)) calc(16px * var(--n0-space, 1));flex:0 0 auto}
.pu-sec{font-size:calc(11px * var(--n0-text, 1));font-weight:700;color:var(--n0-c-22d3ee, #22d3ee);letter-spacing:.16em;text-transform:uppercase;margin:6px 0 1px;padding-bottom:calc(6px * var(--n0-space, 1));border-bottom:1px solid var(--n0-c-22d3ee-a250, rgba(34,211,238,.25))}
.pu-sec:first-child{margin-top:0}
.pu-note{font-size:calc(11.5px * var(--n0-text, 1));color:var(--n0-c-64748b, #64748b);letter-spacing:.02em}
.pu-saved{font-size:calc(11px * var(--n0-text, 1));color:var(--n0-c-38bdf8, #38bdf8);letter-spacing:.03em;text-align:right}
.pu-saved.pu-warn{color:var(--n0-c-ffb300, #ffb300)}
.pu-btn{font-family:inherit;font-size:calc(12.5px * var(--n0-text, 1));font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:calc(11px * var(--n0-space, 1)) calc(24px * var(--n0-space, 1));border-radius:calc(8px * var(--n0-radius, 1));cursor:pointer;
  border:1.5px solid var(--n0-c-3b82f6, #3b82f6);background:var(--n0-c-0d1a30, #0d1a30);color:var(--n0-c-e2e8f0, #e2e8f0)}
.pu-btn:hover{border-color:var(--n0-c-60a5fa, #60a5fa);color:var(--n0-c-ffffff, #fff);background:var(--n0-c-14243f, #14243f)}

/* ALERT: tone tiles = the pager button family, amber code badge */
.pu-tones{display:grid;grid-template-columns:1fr 1fr;gap:calc(10px * var(--n0-space, 1))}
.pu-tone{display:flex;align-items:center;gap:calc(12px * var(--n0-space, 1));min-height:62px;padding:calc(10px * var(--n0-space, 1)) calc(12px * var(--n0-space, 1));border:2px solid var(--n0-c-29b6f6, #29b6f6);border-radius:calc(8px * var(--n0-radius, 1));cursor:pointer;color:var(--n0-c-ffffff, #fff);text-align:left;
  font-family:inherit;background:linear-gradient(180deg,var(--n0-c-0c3477, #0c3477) 0%,var(--n0-c-1565c0, #1565c0) 40%,var(--n0-c-1e88e5, #1e88e5) 50%,var(--n0-c-1565c0, #1565c0) 60%,var(--n0-c-0c3477, #0c3477) 100%);
  box-shadow:0 0 18px var(--n0-c-1565c0-a450, rgba(21,101,192,.45)),inset 0 1px 0 var(--n0-c-ffffff-a80, rgba(255,255,255,.08));transition:all .1s}
.pu-tone:hover{border-color:var(--n0-c-4fc3f7, #4fc3f7);box-shadow:0 0 26px var(--n0-c-1565c0-a700, rgba(21,101,192,.7)),inset 0 1px 0 var(--n0-c-ffffff-a120, rgba(255,255,255,.12));filter:brightness(1.1)}
.pu-tone:active{filter:brightness(.95)}
.pu-tone-code{flex:0 0 auto;min-width:44px;text-align:center;padding:calc(5px * var(--n0-space, 1)) calc(8px * var(--n0-space, 1));border:1.5px solid var(--n0-c-ffab40, #ffab40);border-radius:calc(5px * var(--n0-radius, 1));background:var(--n0-c-ff9100-a140, rgba(255,145,0,.14));
  color:var(--n0-c-ffcc80, #ffcc80);font-size:calc(18px * var(--n0-text, 1));font-weight:900;letter-spacing:.05em;line-height:1}
.pu-tone-name{font-size:calc(13px * var(--n0-text, 1));font-weight:900;letter-spacing:.1em;text-transform:uppercase;min-width:0}

/* MONITOR: every row (xconsole rows + the VA / PHONE CALLS sections) = a Radio Patch option row with a state pill */
#xmon-box .alert-tone-btn{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:calc(12px * var(--n0-space, 1))!important;width:100%!important;
  box-sizing:border-box;text-align:left!important;margin:0!important;padding:calc(11px * var(--n0-space, 1)) calc(13px * var(--n0-space, 1))!important;font-family:inherit!important;font-size:calc(13px * var(--n0-text, 1))!important;
  font-weight:700!important;letter-spacing:.04em;color:var(--n0-c-f1f5f9, #f1f5f9)!important;background:var(--n0-c-0e2a44, #0e2a44)!important;border:1.5px solid var(--n0-c-22d3ee, #22d3ee)!important;border-radius:calc(8px * var(--n0-radius, 1))!important;
  box-shadow:0 0 12px var(--n0-c-22d3ee-a250, rgba(34,211,238,.25)),inset 0 0 12px var(--n0-c-22d3ee-a60, rgba(34,211,238,.06));opacity:1!important;cursor:pointer;line-height:1.35}
#xmon-box .alert-tone-btn:hover{background:var(--n0-c-123556, #123556)!important;border-color:var(--n0-c-67e8f9, #67e8f9)!important}
#xmon-box .alert-tone-btn small{display:block;font-weight:400!important;font-size:calc(11.5px * var(--n0-text, 1));color:var(--n0-c-7dd3fc, #7dd3fc)!important;letter-spacing:.02em;margin-top:3px}
#xmon-box .alert-tone-btn br{display:none}
#xmon-box .alert-tone-btn>span:first-child{min-width:0;overflow-wrap:anywhere}
#xmon-box .alert-tone-btn>span:last-child{flex:0 0 auto;white-space:nowrap;font-size:calc(11px * var(--n0-text, 1));font-weight:700;letter-spacing:.12em;padding:calc(6px * var(--n0-space, 1)) calc(11px * var(--n0-space, 1));border-radius:calc(6px * var(--n0-radius, 1));
  background:var(--n0-c-22c55e, #22c55e);border:1.5px solid var(--n0-c-22c55e, #22c55e);color:var(--n0-c-04210e, #04210e);box-shadow:0 0 12px var(--n0-c-22c55e-a500, rgba(34,197,94,.5))}
#xmon-box .alert-tone-btn.pu-off,#xmon-box .alert-tone-btn[style*="opacity:.6"]{background:var(--n0-c-0a1830, #0a1830)!important;border-color:var(--n0-c-7dd3fc-a300, rgba(125,211,252,.3))!important;box-shadow:none;color:var(--n0-c-cbd5e1, #cbd5e1)!important}
#xmon-box .alert-tone-btn.pu-off:hover,#xmon-box .alert-tone-btn[style*="opacity:.6"]:hover{border-color:var(--n0-c-22d3ee, #22d3ee)!important;background:var(--n0-c-0d1f3a, #0d1f3a)!important}
#xmon-box .alert-tone-btn.pu-off small,#xmon-box .alert-tone-btn[style*="opacity:.6"] small{color:var(--n0-c-64748b, #64748b)!important}
#xmon-box .alert-tone-btn.pu-off>span:last-child,#xmon-box .alert-tone-btn[style*="opacity:.6"]>span:last-child{background:var(--n0-c-0d1a30, #0d1a30);border-color:var(--n0-c-7dd3fc-a350, rgba(125,211,252,.35));color:var(--n0-c-94a3b8, #94a3b8);box-shadow:none}
#xmon-box .alert-tone-btn:disabled{cursor:default}
#xmon-box .alert-tone-btn:disabled>span:last-child{background:var(--n0-c-0e2a44, #0e2a44);border-color:var(--n0-c-22d3ee, #22d3ee);color:var(--n0-c-e0f2fe, #e0f2fe);box-shadow:none}
#xmon-box [id$="-xmon"]{display:flex;flex-direction:column;gap:calc(9px * var(--n0-space, 1))}
#xmon-box [id$="-xmon"]>div:first-child{font-size:calc(11px * var(--n0-text, 1))!important;font-weight:700;color:var(--n0-c-22d3ee, #22d3ee)!important;letter-spacing:.16em!important;text-transform:uppercase;
  margin:6px 0 1px!important;padding-bottom:calc(6px * var(--n0-space, 1));border-bottom:1px solid var(--n0-c-22d3ee-a250, rgba(34,211,238,.25))}
#xmon-box [id$="-xmon"]>div:not(:first-child){font-size:calc(11.5px * var(--n0-text, 1))!important;color:var(--n0-c-64748b, #64748b)!important}
#xmon-box .pu-close{position:sticky;bottom:-14px;margin:4px -16px -14px;width:calc(100% + 32px);border-radius:0 0 calc(9px * var(--n0-radius, 1)) calc(9px * var(--n0-radius, 1));padding:calc(13px * var(--n0-space, 1)) calc(24px * var(--n0-space, 1));
  border:none;border-top:1.5px solid var(--n0-c-3b82f6, #3b82f6);background:var(--n0-c-0d1a30, #0d1a30);flex:0 0 auto}
#xmon-box .pu-close:hover{background:var(--n0-c-14243f, #14243f)}

@media (max-width:768px){
  .pu-box.pu-alert,.pu-box.pu-mon{width:100%;max-width:100%;max-height:100vh;height:100vh;border-radius:0}
  .pu-head{padding:calc(14px * var(--n0-space, 1)) calc(14px * var(--n0-space, 1)) calc(10px * var(--n0-space, 1));gap:calc(12px * var(--n0-space, 1))}
  .pu-h1{font-size:calc(19px * var(--n0-text, 1));letter-spacing:.1em}
  .pu-body{margin:0 10px;padding:calc(12px * var(--n0-space, 1))}
  .pu-foot{padding:calc(12px * var(--n0-space, 1)) calc(10px * var(--n0-space, 1)) calc(14px * var(--n0-space, 1))}
  .pu-foot .pu-btn{flex:1}
  .pu-tones{grid-template-columns:1fr}
  .pu-tone{min-height:58px}
  #xmon-box .pu-close{margin:4px -12px -12px;width:calc(100% + 24px);bottom:-12px}
}