/* core/dtmf-all.css -- [dtmfall-80 2026-10-09] DTMF PAD in the console pop-up theme (core/console-popups.css, item 77:
 * .pu-box / .pu-head / .pu-body / .pu-sec / .pu-btn; channel rows = the MONITOR row look; keys = the ALERT tone tiles).
 * Buttons only (no select / range). Needs console-popups.css loaded first (pu-* base classes). */
.pu-box.pu-dtmf{width:820px}
.pu-dtmf-cols{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;min-height:0}
.pu-dtmf-chans{display:flex;flex-direction:column;gap:8px;min-width:0;max-height:62vh;overflow-y:auto;padding-right:4px}
.pu-dtmf-chans::-webkit-scrollbar{width:8px}.pu-dtmf-chans::-webkit-scrollbar-thumb{background:#1e8fb5;border-radius:5px}
.pu-dch{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;box-sizing:border-box;text-align:left;margin:0;padding:10px 12px;
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.04em;color:#cbd5e1;background:#0a1830;border:1.5px solid rgba(125,211,252,.3);border-radius:8px;
  cursor:pointer;line-height:1.35}
.pu-dch:hover{border-color:#22d3ee;background:#0d1f3a;color:#f1f5f9}
.pu-dch.on{background:#0e2a44;border-color:#22d3ee;color:#f1f5f9;box-shadow:0 0 12px rgba(34,211,238,.25),inset 0 0 12px rgba(34,211,238,.06)}
.pu-dch.blocked{opacity:.62}
.pu-dch.blocked.on{opacity:1;border-color:#ffab40;box-shadow:0 0 12px rgba(255,145,0,.25)}
.pu-dch-name{min-width:0;overflow-wrap:anywhere}
.pu-dch-name small{display:block;font-weight:400;font-size:11px;color:#ffb300;letter-spacing:.02em;margin-top:3px}
.pu-dch-how{flex:0 0 auto;white-space:nowrap;font-size:10.5px;font-weight:700;letter-spacing:.1em;padding:5px 9px;border-radius:6px;
  background:#0d1a30;border:1.5px solid rgba(125,211,252,.35);color:#94a3b8}
.pu-dch.on .pu-dch-how.inband,.pu-dch.on .pu-dch-how.protocol{background:#22c55e;border-color:#22c55e;color:#04210e;box-shadow:0 0 12px rgba(34,197,94,.5)}
.pu-dch-how.blocked{border-color:rgba(255,145,0,.5);color:#ffab40}
.pu-dch-how.handoff{border-color:#3b82f6;color:#93c5fd}
.pu-dtmf-pad{display:flex;flex-direction:column;gap:10px;min-width:0}
.pu-dtmf-pad .dtmf-display{background:#04060f;border:1.5px solid rgba(34,211,238,.55);border-radius:8px;padding:12px 14px;font-family:inherit;font-size:28px;font-weight:700;
  color:#4fc3f7;text-align:center;letter-spacing:.2em;min-height:58px;margin:0;display:flex;align-items:center;justify-content:center;overflow-wrap:anywhere;box-sizing:border-box}
.pu-dtmf-pad .dtmf-now{color:#ff5252;font-weight:900}
.pu-dtmf-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pu-key{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:54px;padding:6px 4px;border:2px solid #29b6f6;border-radius:8px;
  cursor:pointer;color:#fff;font-family:inherit;user-select:none;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg,#0c3477 0%,#1565c0 40%,#1e88e5 50%,#1565c0 60%,#0c3477 100%);
  box-shadow:0 0 14px rgba(21,101,192,.4),inset 0 1px 0 rgba(255,255,255,.08);transition:all .1s}
.pu-key:hover{border-color:#4fc3f7;filter:brightness(1.1)}
.pu-key:active,.pu-key.hit{filter:brightness(1.35);border-color:#ffcc80}
.pu-key .dtmf-digit{font-size:21px;font-weight:900;line-height:1}
.pu-key .dtmf-sub{font-size:8.5px;color:#bbdefb;letter-spacing:.08em;line-height:1}
.pu-key.pu-abcd{background:linear-gradient(180deg,#0b2447 0%,#123a73 50%,#0b2447 100%);border-color:#ffab40}
.pu-key.pu-abcd .dtmf-digit{color:#ffcc80}
.pu-dtmf-fn{display:flex;gap:8px}
.pu-dtmf-fn .pu-btn{flex:1;padding:10px 8px}
.pu-foot .dtmf-status{flex:1;align-self:center;font-size:12px;color:#7dd3fc;letter-spacing:.02em;min-width:0}
.pu-foot .dtmf-status.pu-warn{color:#ffb300}
.pu-btn.pu-go{border-color:#22c55e;color:#bbf7d0;background:#0b2a1a}
.pu-btn.pu-go:hover{background:#0f3a24;color:#fff}
.pu-btn:disabled{opacity:.4;cursor:not-allowed}
.pu-btn.pu-stop{border-color:#ef4444;color:#fecaca;background:#2a0b0b}
@media (max-width:768px){
  .pu-box.pu-dtmf{width:100%;max-width:100%;max-height:100vh;height:100vh;border-radius:0}
  .pu-dtmf-cols{grid-template-columns:1fr}
  .pu-dtmf-chans{max-height:30vh}
  .pu-foot{flex-wrap:wrap}
  .pu-foot .dtmf-status{flex:1 1 100%}
}