/* 5CX Settings Pro — Dialing / DTMF configuration + Live Dialer Monitor
   Loaded globally; activates only on the /settings control page. */

.cx5p-wrap {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cx5p-card {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, .22);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(212, 175, 55, .07), transparent 55%),
    linear-gradient(160deg, rgba(17, 24, 39, .92), rgba(5, 7, 11, .96));
  box-shadow: 0 18px 45px rgba(0, 0, 0, .45);
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.cx5p-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .75), transparent);
}
.cx5p-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}
.cx5p-title {
  display: flex; align-items: center; gap: .6rem;
  margin: 0; color: #f8fafc; font-size: .95rem; font-weight: 750; letter-spacing: -.01em;
}
.cx5p-title svg { width: 17px; height: 17px; color: #d4af37; }
.cx5p-sub { margin: .15rem 0 0; color: #64748b; font-size: .7rem; }
.cx5p-body { padding: 1.1rem 1.25rem 1.25rem; }

.cx5p-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .85rem 1rem; }
.cx5p-field { display: flex; flex-direction: column; gap: .35rem; }
.cx5p-label {
  color: #94a3b8; font-size: .64rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
}
.cx5p-hint { color: #475569; font-size: .66rem; line-height: 1.35; }
.cx5p-input, .cx5p-select {
  width: 100%; box-sizing: border-box; min-height: 2.5rem;
  padding: .5rem .7rem;
  color: #f1f5f9; font: inherit; font-size: .82rem;
  background: rgba(5, 7, 11, .82);
  border: 1px solid #26303f; border-radius: 10px;
}
.cx5p-input:focus, .cx5p-select:focus {
  outline: none; border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .16);
}
.cx5p-select option { background: #0b111a; color: #e2e8f0; }

.cx5p-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.15rem; }
.cx5p-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.45rem; padding: .55rem 1rem;
  border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; font: inherit; font-size: .78rem; font-weight: 750;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
}
.cx5p-btn:hover { transform: translateY(-1px); }
.cx5p-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.cx5p-btn-gold {
  color: #0b0d10;
  background: linear-gradient(140deg, #f0d585, #d4af37 62%, #b8912b);
  box-shadow: 0 10px 26px rgba(212, 175, 55, .28);
}
.cx5p-btn-ghost {
  color: #cbd5e1; background: rgba(30, 41, 59, .55); border-color: #334155;
}
.cx5p-btn-start { color: #06210f; background: linear-gradient(140deg, #7ef0a1, #34c25f); box-shadow: 0 10px 24px rgba(52, 194, 95, .25); }
.cx5p-btn-pause { color: #f7dfa6; background: rgba(120, 86, 20, .28); border-color: rgba(212, 175, 55, .45); }
.cx5p-btn-resume { color: #b7f5cd; background: rgba(24, 90, 55, .28); border-color: rgba(52, 194, 95, .45); }
.cx5p-btn-stop { color: #fca5a5; background: rgba(120, 30, 30, .28); border-color: rgba(239, 68, 68, .45); }

.cx5p-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: 999px;
  font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid transparent;
}
.cx5p-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cx5p-pill.idle { color: #94a3b8; background: rgba(148, 163, 184, .1); border-color: rgba(148, 163, 184, .28); }
.cx5p-pill.running { color: #4ade80; background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .35); }
.cx5p-pill.paused { color: #d4af37; background: rgba(212, 175, 55, .12); border-color: rgba(212, 175, 55, .35); }
.cx5p-pill.error { color: #f87171; background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .35); }
.cx5p-pill.running::before { animation: cx5p-blink 1.2s ease-in-out infinite; }
@keyframes cx5p-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.cx5p-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.cx5p-stat {
  padding: .7rem .85rem; border-radius: 11px;
  background: rgba(5, 7, 11, .65);
  border: 1px solid #1e293b; border-left-width: 3px;
}
.cx5p-stat.dialing { border-left-color: #f59e0b; }
.cx5p-stat.connected { border-left-color: #22c55e; }
.cx5p-stat.pressed1 { border-left-color: #d4af37; }
.cx5p-stat.failed { border-left-color: #ef4444; }
.cx5p-stat.pending { border-left-color: #64748b; }
.cx5p-stat-num { color: #f8fafc; font-size: 1.45rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cx5p-stat-cap { margin-top: .3rem; color: #64748b; font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.cx5p-progress { height: 6px; border-radius: 999px; background: rgba(30, 41, 59, .8); overflow: hidden; margin-bottom: 1rem; }
.cx5p-progress > span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #d4af37, #f0d585); transition: width .5s ease; }

.cx5p-livebar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.cx5p-livebar .cx5p-label { margin: 0; }
.cx5p-phones { display: flex; flex-wrap: wrap; gap: .55rem; min-height: 2.6rem; align-items: center; }
.cx5p-phone {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .7rem; border-radius: 10px;
  background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .35);
  color: #fcd34d; font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cx5p-phone svg { width: 14px; height: 14px; animation: cx5p-ring 1.1s ease-in-out infinite; }
@keyframes cx5p-ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.cx5p-phone.idle-pulse { opacity: .5; }

.cx5p-list { display: flex; flex-direction: column; gap: .3rem; max-height: 320px; overflow-y: auto; margin-top: .4rem; }
.cx5p-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .6rem;
  padding: .5rem .7rem; border-radius: 9px;
  background: rgba(5, 7, 11, .55); border: 1px solid #16202e;
  font-size: .76rem;
}
.cx5p-row-num { color: #e2e8f0; font-weight: 700; font-variant-numeric: tabular-nums; }
.cx5p-row-time { color: #475569; font-size: .66rem; font-variant-numeric: tabular-nums; }
.cx5p-badge {
  padding: .16rem .5rem; border-radius: 999px;
  font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.cx5p-badge.pending { color: #94a3b8; background: rgba(148, 163, 184, .14); }
.cx5p-badge.dialing { color: #fbbf24; background: rgba(245, 158, 11, .16); }
.cx5p-badge.connected { color: #4ade80; background: rgba(34, 197, 94, .16); }
.cx5p-badge.pressed1 { color: #f0d585; background: rgba(212, 175, 55, .18); }
.cx5p-badge.completed { color: #7dd3a0; background: rgba(34, 197, 94, .1); }
.cx5p-badge.failed { color: #f87171; background: rgba(239, 68, 68, .16); }
.cx5p-empty { color: #475569; font-size: .74rem; padding: .6rem .1rem; }

.cx5p-note { margin: 1rem 0 0; color: #64748b; font-size: .7rem; line-height: 1.5; }
.cx5p-note code { color: #cbd5e1; background: rgba(30, 41, 59, .6); padding: .05rem .3rem; border-radius: 5px; }