/* 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:#070e1c;border:2px solid #22d3ee;border-radius:12px;display:flex;flex-direction:column;max-height:88vh;max-width:96vw;overflow:hidden;
  box-shadow:0 0 58px rgba(34,211,238,.38),0 0 140px rgba(34,211,238,.13),0 24px 74px rgba(0,0,0,.92);
  font-family:"Share Tech Mono","Courier New",monospace;color:#e2e8f0;text-align:left}
.pu-box.pu-alert{width:560px}
.pu-box.pu-mon{width:600px}
.pu-head{display:flex;align-items:center;gap:16px;padding:18px 22px 14px;flex:0 0 auto}
.pu-head-ico{font-size:30px;line-height:1;color:#22d3ee;text-shadow:0 0 18px rgba(34,211,238,.9);flex:0 0 auto}
.pu-head-ico.pu-amber{color:#ffab40;text-shadow:0 0 18px rgba(255,145,0,.85)}
.pu-head-txt{flex:1;min-width:0}
.pu-h1{font-size:24px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#f1f5f9;line-height:1.15;text-shadow:0 0 18px rgba(34,211,238,.4)}
.pu-h2{font-size:12px;color:#7dd3fc;margin-top:5px;letter-spacing:.02em}
.pu-body{flex:1 1 auto;min-height:0;overflow-y:auto;margin:0 16px;padding:14px 16px;border:1px solid rgba(34,211,238,.55);border-radius:10px;background:#0b1426;
  display:flex;flex-direction:column;gap:9px}
.pu-body::-webkit-scrollbar{width:9px}.pu-body::-webkit-scrollbar-thumb{background:#1e8fb5;border-radius:5px}
.pu-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 16px 16px;flex:0 0 auto}
.pu-sec{font-size:11px;font-weight:700;color:#22d3ee;letter-spacing:.16em;text-transform:uppercase;margin:6px 0 1px;padding-bottom:6px;border-bottom:1px solid rgba(34,211,238,.25)}
.pu-sec:first-child{margin-top:0}
.pu-note{font-size:11.5px;color:#64748b;letter-spacing:.02em}
.pu-saved{font-size:11px;color:#38bdf8;letter-spacing:.03em;text-align:right}
.pu-saved.pu-warn{color:#ffb300}
.pu-btn{font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:11px 24px;border-radius:8px;cursor:pointer;
  border:1.5px solid #3b82f6;background:#0d1a30;color:#e2e8f0}
.pu-btn:hover{border-color:#60a5fa;color:#fff;background:#14243f}

/* ALERT: tone tiles = the pager button family, amber code badge */
.pu-tones{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pu-tone{display:flex;align-items:center;gap:12px;min-height:62px;padding:10px 12px;border:2px solid #29b6f6;border-radius:8px;cursor:pointer;color:#fff;text-align:left;
  font-family:inherit;background:linear-gradient(180deg,#0c3477 0%,#1565c0 40%,#1e88e5 50%,#1565c0 60%,#0c3477 100%);
  box-shadow:0 0 18px rgba(21,101,192,.45),inset 0 1px 0 rgba(255,255,255,.08);transition:all .1s}
.pu-tone:hover{border-color:#4fc3f7;box-shadow:0 0 26px rgba(21,101,192,.7),inset 0 1px 0 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:5px 8px;border:1.5px solid #ffab40;border-radius:5px;background:rgba(255,145,0,.14);
  color:#ffcc80;font-size:18px;font-weight:900;letter-spacing:.05em;line-height:1}
.pu-tone-name{font-size:13px;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:12px!important;width:100%!important;
  box-sizing:border-box;text-align:left!important;margin:0!important;padding:11px 13px!important;font-family:inherit!important;font-size:13px!important;
  font-weight:700!important;letter-spacing:.04em;color:#f1f5f9!important;background:#0e2a44!important;border:1.5px solid #22d3ee!important;border-radius:8px!important;
  box-shadow:0 0 12px rgba(34,211,238,.25),inset 0 0 12px rgba(34,211,238,.06);opacity:1!important;cursor:pointer;line-height:1.35}
#xmon-box .alert-tone-btn:hover{background:#123556!important;border-color:#67e8f9!important}
#xmon-box .alert-tone-btn small{display:block;font-weight:400!important;font-size:11.5px;color:#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:11px;font-weight:700;letter-spacing:.12em;padding:6px 11px;border-radius:6px;
  background:#22c55e;border:1.5px solid #22c55e;color:#04210e;box-shadow:0 0 12px rgba(34,197,94,.5)}
#xmon-box .alert-tone-btn.pu-off,#xmon-box .alert-tone-btn[style*="opacity:.6"]{background:#0a1830!important;border-color:rgba(125,211,252,.3)!important;box-shadow:none;color:#cbd5e1!important}
#xmon-box .alert-tone-btn.pu-off:hover,#xmon-box .alert-tone-btn[style*="opacity:.6"]:hover{border-color:#22d3ee!important;background:#0d1f3a!important}
#xmon-box .alert-tone-btn.pu-off small,#xmon-box .alert-tone-btn[style*="opacity:.6"] small{color:#64748b!important}
#xmon-box .alert-tone-btn.pu-off>span:last-child,#xmon-box .alert-tone-btn[style*="opacity:.6"]>span:last-child{background:#0d1a30;border-color:rgba(125,211,252,.35);color:#94a3b8;box-shadow:none}
#xmon-box .alert-tone-btn:disabled{cursor:default}
#xmon-box .alert-tone-btn:disabled>span:last-child{background:#0e2a44;border-color:#22d3ee;color:#e0f2fe;box-shadow:none}
#xmon-box [id$="-xmon"]{display:flex;flex-direction:column;gap:9px}
#xmon-box [id$="-xmon"]>div:first-child{font-size:11px!important;font-weight:700;color:#22d3ee!important;letter-spacing:.16em!important;text-transform:uppercase;
  margin:6px 0 1px!important;padding-bottom:6px;border-bottom:1px solid rgba(34,211,238,.25)}
#xmon-box [id$="-xmon"]>div:not(:first-child){font-size:11.5px!important;color:#64748b!important}
#xmon-box .pu-close{position:sticky;bottom:-14px;margin:4px -16px -14px;width:calc(100% + 32px);border-radius:0 0 9px 9px;padding:13px 24px;
  border:none;border-top:1.5px solid #3b82f6;background:#0d1a30;flex:0 0 auto}
#xmon-box .pu-close:hover{background:#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:14px 14px 10px;gap:12px}
  .pu-h1{font-size:19px;letter-spacing:.1em}
  .pu-body{margin:0 10px;padding:12px}
  .pu-foot{padding:12px 10px 14px}
  .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}
}