:root{
  --bg:#eef6ff;
  --bg-2:#e3f0ff;
  --surface:#ffffff;
  --surface-2:#f8fbff;
  --surface-3:#edf5ff;
  --line:rgba(88,126,177,.18);
  --text:#17325c;
  --muted:#5f7da8;
  --accent:#4a90ff;
  --accent-2:#78c7ff;
  --accent-3:#bfe6ff;
  --danger:#e86d84;
  --warning:#f0b54f;
  --success:#46bfa1;
  --shadow:0 16px 34px rgba(66, 112, 177, .10);
  --radius:24px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
  background:linear-gradient(180deg,var(--bg),var(--bg-2));
  color:var(--text);
}
a{text-decoration:none;color:inherit}
h1,h2,h3,p{margin:0}
.shell{display:grid;grid-template-columns:290px 1fr;min-height:100vh}
.sidebar{
  padding:24px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,#dff0ff,#eef7ff);
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.brand{display:flex;gap:14px;align-items:center;margin-bottom:28px}
.logo-wrap{
  padding:4px;
  border-radius:22px;
  background:linear-gradient(135deg,rgba(74,144,255,.18),rgba(120,199,255,.20));
}
.logo{
  width:50px;height:50px;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),#87b8ff);
  color:white;font-weight:900;box-shadow:var(--shadow);
}
.logo.hero{width:76px;height:76px;margin:0 auto 14px;border-radius:24px}
.brand-title{font-size:20px;font-weight:800}
.brand-subtitle{font-size:13px;color:var(--muted)}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.nav{display:grid;gap:8px}
.nav-link{
  padding:12px 14px;border-radius:14px;color:var(--text);transition:.18s ease;
}
.nav-link:hover,.nav-link.active{
  background:rgba(74,144,255,.12);
  color:#163565;
  transform:translateY(-1px);
}
.nav-group-title{margin:14px 12px 6px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.side-stats{display:grid;gap:10px}
.pill,.badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.7);font-size:13px;
}
.pill.subtle{background:rgba(255,255,255,.75)}
.badge.success{background:rgba(70,191,161,.12);color:#12795f}
.badge.danger{background:rgba(232,109,132,.12);color:#ae3651}
.badge.warning{background:rgba(240,181,79,.14);color:#9a6406}
.main{padding:28px}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px}
.topbar h1{margin-top:6px;font-size:32px}
.top-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.card{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.onboarding-hero{
  background:linear-gradient(135deg,rgba(74,144,255,.10),rgba(120,199,255,.18));
}
.stat-grid,.mini-grid,.grid{display:grid;gap:16px}
.stat-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.stat span,.muted,.label{color:var(--muted)}
.stat strong{display:block;margin-top:8px;font-size:30px}
.split-main{grid-template-columns:1.35fr 1fr}
.mini-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.mini-card{
  padding:14px;border-radius:18px;border:1px solid var(--line);
  background:var(--surface-3);
}
.mini-card strong{display:block;margin-top:6px;font-size:22px}
.section-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.section-header h2{font-size:20px}
.stack{display:grid}
.gap{gap:16px}
.gap-sm{gap:10px}
.grid-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid-form .full{grid-column:1/-1}
label{display:grid;gap:8px;font-size:14px}
input,select,textarea,button{
  font:inherit;padding:12px 14px;border-radius:14px;
  border:1px solid var(--line);background:white;color:var(--text);
}
textarea{resize:vertical}
select{
  background-color:#ffffff;
  color:var(--text);
}
select option{
  background-color:#ffffff;
  color:#17325c;
}
select option:checked{
  background-color:var(--accent);
  color:#ffffff;
}
.checkbox{display:flex;align-items:center;gap:10px}
.checkbox input{width:auto}
.btn{cursor:pointer;transition:.16s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{
  background:linear-gradient(135deg,var(--accent),#78a9ff);
  color:white;border:none;
}
.btn.secondary{
  background:rgba(74,144,255,.10);
  color:#1b4fa5;
}
.btn.ghost{
  background:white;
}
.toolbar{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.table{width:100%;border-collapse:collapse}
.table th,.table td{
  padding:12px 10px;border-bottom:1px solid rgba(88,126,177,.12);text-align:left;vertical-align:top
}
.table th{
  font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  background:rgba(191,230,255,.18);
}
.compact th,.compact td{padding:10px 8px}
.list-item,.campaign-tile,.live-call-card{
  display:block;padding:14px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.78);
}
.list-item{display:flex;justify-content:space-between;align-items:center;gap:12px}
.live-call-card{margin-bottom:12px}
.live-call-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.live-call-bottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.live-call-bottom div{
  padding:12px;border-radius:14px;background:var(--surface-3);
}
.live-call-bottom strong{display:block;margin-top:4px}
.metric-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}
.metric-strip div{
  padding:12px;border-radius:16px;background:var(--surface-3);border:1px solid var(--line)
}
.metric-strip strong{display:block;margin-top:6px}
.surface-note{
  padding:14px;border-radius:16px;background:var(--surface-3);
  border:1px solid var(--line);margin-top:12px
}
.agent-call-panel{
  margin:14px 0;padding:14px;border-radius:18px;
  border:1px solid rgba(74,144,255,.22);background:rgba(74,144,255,.08)
}
.action-strip{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
.detail-grid div{
  padding:14px;border-radius:18px;background:var(--surface-3);border:1px solid var(--line)
}
.detail-grid strong{display:block;margin-top:4px}
.timeline{display:grid;gap:12px;margin-top:14px}
.timeline-item{
  padding:14px;border-radius:16px;background:rgba(255,255,255,.82);border:1px solid var(--line)
}
.timeline-item p{margin-top:8px}
.bar-row{display:grid;grid-template-columns:170px 1fr 56px;gap:12px;align-items:center;margin-bottom:12px}
.bar{height:12px;border-radius:999px;background:rgba(74,144,255,.08);overflow:hidden}
.fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),#87b8ff)}
.fill.alt{background:linear-gradient(90deg,var(--accent-2),#b2e6ff)}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plan-featured{padding:22px}
.plan-featured.highlight{
  border-color:rgba(74,144,255,.30);
  background:linear-gradient(180deg,rgba(74,144,255,.10),var(--surface))
}
.plan-card{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.78);margin-bottom:12px
}
.plan-price{font-size:22px;font-weight:800}
.feature-list{margin:8px 0 0;padding-left:18px;color:#2b4c78}
.feature-list li{margin:10px 0}
.text-link{color:#3574df}
.empty-state{
  padding:16px;border:1px dashed rgba(88,126,177,.22);border-radius:16px;color:var(--muted);background:rgba(255,255,255,.5)
}
.empty-state.large{padding:28px;text-align:center}
.login-body{
  min-height:100vh;display:grid;place-items:center;
  background:linear-gradient(180deg,#e8f3ff,#f5faff);
}
.login-shell{width:min(460px,92vw)}
.login-card{
  padding:34px;border-radius:28px;background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);box-shadow:var(--shadow);text-align:center
}
.center{text-align:center}
.alert{padding:12px 14px;border-radius:16px}
.error{background:rgba(232,109,132,.12);color:#ae3651}
.inline-form{display:flex;gap:8px;align-items:center}
.row{display:flex;align-items:center}
.row.wrap{flex-wrap:wrap}
.mt-lg{margin-top:18px}
@media (max-width:1280px){
  .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .split-main,.plan-grid{grid-template-columns:1fr}
}
@media (max-width:920px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:static;height:auto}
  .topbar{flex-direction:column}
  .grid-form,.detail-grid,.mini-grid,.metric-strip,.stat-grid,.live-call-bottom{grid-template-columns:1fr}
  .bar-row{grid-template-columns:1fr}
}

.toast-banner{
  margin-bottom:16px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(74,144,255,.12), rgba(120,199,255,.16));
  color:var(--text);
  box-shadow:var(--shadow);
}
.demo-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
  background:linear-gradient(135deg, rgba(74,144,255,.10), rgba(191,230,255,.28));
}
.bulk-toolbar{
  margin-bottom:14px;
}
.loading-skeleton{
  height:14px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.5), rgba(191,230,255,.8), rgba(255,255,255,.5));
  background-size:200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.plan-featured:hover,
.card:hover{
  transition:transform .16s ease, box-shadow .16s ease;
}
.plan-featured:hover{
  transform:translateY(-2px);
}


.grouped-nav{gap:10px}
.nav-group{
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.55);
  overflow:hidden;
}
.nav-group summary{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  font-size:13px;
  font-weight:700;
  color:#315784;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-group summary::-webkit-details-marker{display:none}
.nav-group summary::after{
  content:"+";
  font-size:18px;
  line-height:1;
  color:var(--muted);
}
.nav-group[open] summary::after{content:"−"}
.nav-group-links{
  display:grid;
  gap:6px;
  padding:0 8px 8px;
}
.nav-group .nav-link{
  margin:0;
  background:transparent;
}
.nav-group .nav-link.active,
.nav-group .nav-link:hover{
  background:rgba(74,144,255,.12);
}


.topbar{
  position:sticky;
  top:0;
  z-index:20;
  padding-bottom:12px;
  background:linear-gradient(180deg, rgba(238,246,255,.92), rgba(238,246,255,.82), rgba(238,246,255,0));
  backdrop-filter: blur(10px);
}
.topbar-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.header-tools{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.global-search{
  min-width:280px;
  max-width:420px;
  width:100%;
}
.quick-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.header-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  color:var(--text);
  font-size:13px;
}
.hero-panel{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
  margin-bottom:16px;
}
.hero-callout{
  padding:20px;
  border-radius:24px;
  border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(74,144,255,.12), rgba(191,230,255,.22));
  box-shadow:var(--shadow);
}
.hero-callout h2{font-size:28px;margin:8px 0}
.hero-callout p{color:var(--muted)}
.command-list{
  display:grid;
  gap:10px;
}
.command-item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
}
.command-item code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
  background:rgba(74,144,255,.10);
  padding:4px 8px;
  border-radius:999px;
}
.activity-feed{
  display:grid;
  gap:10px;
}
.activity-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.75);
}
.activity-row .stamp{
  color:var(--muted);
  white-space:nowrap;
  font-size:12px;
}
.kpi-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.kpi-box{
  padding:14px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.78);
}
.kpi-box strong{
  display:block;
  margin-top:8px;
  font-size:24px;
}
.inline-empty{
  padding:14px;
  border-radius:16px;
  border:1px dashed rgba(88,126,177,.25);
  color:var(--muted);
  background:rgba(255,255,255,.5);
}
@media (max-width:1100px){
  .hero-panel{grid-template-columns:1fr}
  .kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .global-search{min-width:unset; max-width:none}
  .kpi-strip{grid-template-columns:1fr}
}


.final-banner{
  margin-bottom:16px;
  padding:16px 18px;
  border-radius:20px;
  border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(74,144,255,.10), rgba(191,230,255,.25));
  box-shadow:var(--shadow);
}
.final-banner h3{margin:4px 0 6px}
.final-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:16px;
}
@media (max-width:1000px){
  .final-grid{grid-template-columns:1fr}
}


.dialer-shell{display:grid;gap:16px}
.dialer-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.dialer-top-stats{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:10px;min-width:340px}
.dialer-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px}
.dialer-left,.dialer-right{display:grid;gap:16px}
.dialer-ready-banner{display:flex;justify-content:space-between;align-items:center;padding:16px;border-radius:18px;border:1px solid var(--line);margin-bottom:14px}
.dialer-ready-banner.ready{background:linear-gradient(135deg, rgba(46,204,113,.10), rgba(191,255,221,.18))}
.dialer-ready-banner.setup{background:linear-gradient(135deg, rgba(74,144,255,.10), rgba(191,230,255,.20))}
.dialer-pulse{width:44px;height:44px;border-radius:999px;background:radial-gradient(circle, rgba(46,204,113,.9) 0%, rgba(46,204,113,.15) 45%, transparent 70%)}
.dialer-active-lines{display:grid;gap:10px}
.dialer-line{display:flex;justify-content:space-between;align-items:center;padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.70)}
.dialer-line.active{border-color:rgba(46,204,113,.45);background:linear-gradient(135deg, rgba(46,204,113,.12), rgba(191,255,221,.18))}
.dialer-line-left{display:flex;gap:12px;align-items:center}
.status-dot{width:10px;height:10px;border-radius:999px;background:#2ecc71;display:inline-block}
.dialer-current-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
.dialer-current-head h3{margin:0 0 6px 0;font-size:28px}
.dialer-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}
.dialer-detail-grid div{padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.64);display:grid;gap:6px}
.dialer-queue-table{display:grid;gap:8px}
.dialer-queue-head,.dialer-queue-row{display:grid;grid-template-columns:48px 1.4fr 1fr 1fr .8fr;gap:12px;align-items:center}
.dialer-queue-head{padding:10px 12px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.dialer-queue-row{padding:14px 12px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.70);text-decoration:none;color:inherit}
.dialer-queue-row:hover{background:rgba(255,255,255,.9)}
.dialer-queue-row.dialing{border-color:rgba(46,204,113,.5);background:linear-gradient(135deg, rgba(46,204,113,.14), rgba(191,255,221,.22))}
.dialer-queue-row small{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.quick-dispo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.disposition.positive{background:rgba(46,204,113,.12);border-color:rgba(46,204,113,.32)}
.disposition.warning{background:rgba(255,184,0,.12);border-color:rgba(255,184,0,.32)}
.disposition.negative{background:rgba(231,76,60,.10);border-color:rgba(231,76,60,.26)}
.disposition.neutral{background:rgba(74,144,255,.10);border-color:rgba(74,144,255,.26)}
@media (max-width:1180px){
  .dialer-grid{grid-template-columns:1fr}
  .dialer-top-stats{min-width:unset;width:100%}
}
@media (max-width:760px){
  .dialer-hero{flex-direction:column}
  .dialer-top-stats{grid-template-columns:1fr 1fr}
  .dialer-detail-grid{grid-template-columns:1fr}
  .dialer-queue-head,.dialer-queue-row{grid-template-columns:32px 1.2fr 1fr 1fr .8fr;font-size:14px}
}

.commercial-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-bottom:16px}
.campaign-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.campaign-card{padding:16px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.75)}
.campaign-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:13px;margin-bottom:12px}
.modern-table{display:grid;gap:8px}
.modern-table-head,.modern-table-row{display:grid;grid-template-columns:1.2fr 1fr 1fr .9fr .9fr 1fr;gap:12px;align-items:center}
.modern-table-head{padding:10px 12px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.modern-table-row{padding:14px 12px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.72);text-decoration:none;color:inherit}
.modern-table-row small{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.dialer-clean-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.disposition-bar{position:sticky;top:74px;z-index:15}
.dispo-modal{position:fixed;inset:0;background:rgba(7,18,34,.35);display:flex;align-items:center;justify-content:center;padding:20px;z-index:60}
.dispo-modal.hidden{display:none}
.dispo-modal-card{width:min(760px,100%);background:white;border-radius:24px;padding:20px;border:1px solid var(--line);box-shadow:var(--shadow)}
@media (max-width:1100px){.commercial-hero{grid-template-columns:1fr}.modern-table-head,.modern-table-row{grid-template-columns:1.2fr 1fr 1fr .9fr .9fr .9fr}}
@media (max-width:760px){.modern-table-head,.modern-table-row{grid-template-columns:1fr}.disposition-bar{top:12px}}

.admin-group{margin-top:4px}
.admin-summary{list-style:none;cursor:pointer}
.admin-summary::-webkit-details-marker{display:none}
.admin-subnav{display:grid;gap:6px;padding:6px 0 0 12px}
.nav-sublink{display:block;padding:8px 12px;border-radius:12px;color:var(--muted);text-decoration:none}
.nav-sublink.active,.nav-sublink:hover{background:rgba(74,144,255,.10);color:var(--text)}
.hero-straight-stats{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px;margin-top:14px}
.mini-dispo-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mini-dispo{padding:7px 10px;border-radius:12px;border:1px solid var(--line);background:white;font-size:12px;font-weight:600;cursor:pointer}
.mini-dispo.positive{background:rgba(46,204,113,.10);border-color:rgba(46,204,113,.25)}
.mini-dispo.warning{background:rgba(255,184,0,.10);border-color:rgba(255,184,0,.25)}
.mini-dispo.negative{background:rgba(231,76,60,.10);border-color:rgba(231,76,60,.22)}
.mini-dispo.neutral{background:rgba(74,144,255,.08);border-color:rgba(74,144,255,.22)}
.queue-wide-card .dialer-queue-head.wide,.queue-wide-card .dialer-queue-row.wide{grid-template-columns:48px 1.3fr 1fr 1fr .8fr .7fr}
.dialer-grid.compact-top{grid-template-columns:1.1fr .9fr}
@media (max-width:1100px){
  .hero-straight-stats{grid-template-columns:repeat(2,minmax(120px,1fr))}
  .dialer-grid.compact-top{grid-template-columns:1fr}
}

.hero-with-current{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.hero-left{display:grid;gap:10px}
.hero-current.subtle{background:rgba(255,255,255,.62);align-self:start}
.campaigns-group{display:grid}
@media (max-width:1100px){.hero-with-current{grid-template-columns:1fr}}


/* Phase 23: Call review / coaching UI */
.call-review-layout{display:grid;grid-template-columns:280px minmax(420px,1fr) 390px;gap:16px;align-items:start}
.call-filter-panel{position:sticky;top:24px}
.call-table-card{min-height:620px}
.review-table{display:grid;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:white}
.review-table-head,.review-row{display:grid;grid-template-columns:1fr 1.15fr 1.25fr .9fr .55fr;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.review-table-head{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:var(--surface-3);font-weight:800}
.review-row{width:100%;text-align:left;border-left:0;border-right:0;border-top:0;border-radius:0;background:white;color:var(--text);cursor:pointer}
.review-row:hover{background:#eef7ff}
.review-row strong{display:block}.review-row small{display:block;color:var(--muted);margin-top:3px}
.call-detail-panel{position:sticky;top:24px;min-height:620px}
.call-review-hero{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--surface-3)}
.tab-card{border:1px solid var(--line);border-radius:18px;padding:14px;background:white}
.score-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.score-grid label{font-size:13px}.score-grid input{padding:10px}
.detail-grid.slim{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-grid.slim .mono{font-size:11px;word-break:break-all}
.recordings-table .modern-table-head,.recordings-table .modern-table-row{grid-template-columns:.8fr 1.3fr 1fr .7fr .7fr 1.2fr .6fr}
@media(max-width:1200px){.call-review-layout{grid-template-columns:1fr}.call-filter-panel,.call-detail-panel{position:static}.review-table-head,.review-row{grid-template-columns:1fr}.recordings-table .modern-table-head,.recordings-table .modern-table-row{grid-template-columns:1fr}}

/* Phase 24 AI Coach */
.ai-hero-card { border: 1px solid rgba(99,102,241,.25); }
.call-review-layout { grid-template-columns: 280px minmax(420px, 1fr) 420px; }
.tab-card ul { margin: 8px 0 0 18px; color: var(--muted); }
.tab-card li { margin-bottom: 6px; }

/* Nightly design overhaul: compact SaaS console shell */
:root{
  --bg:#f4f9ff;
  --bg-2:#eef6ff;
  --surface:#ffffff;
  --surface-2:#fbfdff;
  --surface-3:#f6faff;
  --line:#dbe8f8;
  --text:#08285c;
  --muted:#5d76a0;
  --accent:#2f73ff;
  --accent-2:#6da4ff;
  --accent-3:#e7f1ff;
  --danger:#e75f6e;
  --warning:#f2a928;
  --success:#12a875;
  --shadow:0 18px 46px rgba(32,83,151,.08);
  --shadow-soft:0 8px 22px rgba(32,83,151,.06);
  --radius:14px;
}
html{background:var(--bg)}
body{
  background:
    radial-gradient(circle at 22% 0%, rgba(47,115,255,.07), transparent 34%),
    linear-gradient(180deg,#f7fbff 0%,#eef6ff 100%);
  color:var(--text);
  font-size:14px;
  line-height:1.42;
}
.shell{
  grid-template-columns:150px minmax(0,1fr);
  max-width:1920px;
  margin:0 auto;
}
.sidebar{
  padding:14px 12px;
  background:rgba(255,255,255,.88);
  border-right:1px solid var(--line);
  box-shadow:8px 0 30px rgba(42,92,150,.04);
}
.brand{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:8px;
  align-items:center;
  margin-bottom:14px;
}
.logo-wrap{padding:0;background:transparent;border-radius:10px}
.logo{
  width:32px;
  height:32px;
  border-radius:9px;
  font-size:11px;
  background:linear-gradient(135deg,#0f64ff,#4b8dff);
  box-shadow:0 8px 18px rgba(47,115,255,.24);
}
.brand .eyebrow,.brand-subtitle{display:none}
.brand-title{font-size:12px;font-weight:900;letter-spacing:.01em}
.cm-dashboard-link,
.cm-nav-group a,
.nav-link{
  min-height:32px;
  display:flex !important;
  align-items:center;
  gap:8px;
  padding:8px 10px !important;
  margin:2px 0 !important;
  border-radius:8px !important;
  color:#24446f !important;
  font-size:12px;
  font-weight:700;
}
.cm-dashboard-link{
  margin:4px 0 8px !important;
  background:#2f73ff !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(47,115,255,.18);
}
.cm-nav-divider{margin:8px 0;background:var(--line)}
.cm-nav-group{
  margin:8px 0;
  border:0;
  background:transparent;
}
.cm-nav-group summary{
  padding:7px 8px !important;
  margin:0 !important;
  color:#7a90b4 !important;
  font-size:9px !important;
  letter-spacing:.08em !important;
}
.cm-nav-group summary::before{display:none}
.cm-nav-group summary::after{font-size:12px}
.cm-nav-group a::before,.cm-dashboard-link::before{
  content:"";
  width:13px;
  height:13px;
  flex:0 0 13px;
  border-radius:4px;
  border:1.5px solid currentColor;
  opacity:.72;
}
.cm-nav-group a:hover,
.cm-nav-group a.active,
.nav-link:hover,
.nav-link.active{
  background:#edf5ff !important;
  color:#145bd8 !important;
  transform:none !important;
}
.side-stats{
  gap:6px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.side-stats .pill{
  justify-content:space-between;
  width:100%;
  padding:7px 8px;
  font-size:10px;
  background:#f8fbff;
}
.main{
  min-width:0;
  padding:22px 24px 36px;
}
.topbar{
  position:static;
  padding:0;
  margin-bottom:18px;
  background:transparent;
  backdrop-filter:none;
}
.topbar-row{
  align-items:flex-start;
}
.topbar .eyebrow{display:none}
.topbar h1{
  margin:0;
  font-size:22px;
  line-height:1.15;
  letter-spacing:0;
}
.header-tools{gap:8px}
.global-search{display:none}
.quick-actions{display:none}
.pill,.badge{
  min-height:24px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#f8fbff;
  color:#24446f;
  font-size:11px;
  font-weight:700;
}
.pill.subtle{background:#eef8f4;color:#12825f;border-color:#c9ecdd}
.card,.hero-callout,.campaign-card,.tab-card,.call-review-hero,.list-item,.campaign-tile,.live-call-card{
  border-radius:12px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:var(--shadow-soft);
  padding:16px;
}
.card:hover{transform:none}
.section-header{
  align-items:flex-start;
  margin-bottom:12px;
}
.section-header h2{
  font-size:15px;
  line-height:1.2;
  letter-spacing:0;
}
.muted,.label,.stat span{color:var(--muted)}
.mini-card,.kpi-box,.metric-strip div,.detail-grid div,.live-call-bottom div,.surface-note{
  border-radius:10px;
  border:1px solid var(--line);
  background:#f8fbff;
  padding:12px;
}
.mini-card strong,.kpi-box strong,.metric-strip strong{
  font-size:18px;
  line-height:1.15;
}
input,select,textarea,button{
  min-height:34px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid #d5e3f5;
  background:#fff;
  color:var(--text);
  font-size:12px;
}
label{gap:5px;font-size:11px;color:var(--muted);font-weight:700}
.btn{
  min-height:34px;
  border-radius:8px;
  font-size:12px;
  font-weight:800;
}
.btn.primary{background:#2f73ff;color:#fff;box-shadow:0 8px 18px rgba(47,115,255,.17)}
.btn.secondary{background:#eef5ff;color:#145bd8;border-color:#cfe0fb}
.btn.ghost{background:#fff;color:#17325c}
.alert,.toast-banner,.inline-empty,.empty-state{
  border-radius:10px;
  padding:12px;
}
.dialer-shell,.stack,.activity-feed,.dialer-left,.dialer-right{gap:12px}
.hero-with-current{
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:12px;
}
.dialer-clean-hero{padding:16px}
.dialer-clean-hero h2{
  margin:0;
  font-size:20px;
}
.hero-straight-stats{
  grid-template-columns:repeat(5,minmax(112px,1fr));
  gap:10px;
  margin-top:12px;
}
.mini-dispo-row{gap:7px;margin-top:10px}
.mini-dispo{
  border-radius:8px;
  min-height:30px;
  padding:6px 9px;
  font-size:11px;
}
.hero-current.subtle{
  background:#fff;
  box-shadow:none;
}
.dialer-current-head h3{
  font-size:24px;
  letter-spacing:0;
}
.dialer-detail-grid{gap:10px}
.dialer-detail-grid div{border-radius:10px;background:#fff}
.dialer-queue-table,.modern-table,.review-table{gap:6px}
.dialer-queue-head,.dialer-queue-row{
  grid-template-columns:36px 1.4fr 1.1fr 1fr .85fr .85fr;
  gap:10px;
}
.dialer-queue-head,.modern-table-head,.review-table-head{
  padding:8px 10px;
  background:transparent;
  color:#627da8;
  font-size:10px;
  letter-spacing:.08em;
}
.dialer-queue-row,.modern-table-row,.review-row{
  min-height:40px;
  padding:10px;
  border-radius:10px;
  background:#fff;
  box-shadow:none;
}
.dialer-queue-row.dialing{
  border-color:#90e4c3;
  background:linear-gradient(135deg,#effdf6,#f7fffb);
}
.queue-status{
  justify-self:start;
  padding:4px 8px;
  border-radius:999px;
  background:#fff4dc;
  color:#9a6406;
  font-size:10px;
  font-weight:900;
}
.dialer-queue-row .queue-caller-id{display:none}
.call-review-layout{
  grid-template-columns:220px minmax(520px,1fr) 260px;
  gap:12px;
}
.call-filter-panel,.call-detail-panel{top:14px}
.review-table-head,.review-row{
  grid-template-columns:.9fr 1fr 1.1fr .75fr .6fr;
}
.commercial-hero,.final-grid,.split-main{gap:12px}
.modern-table-head,.modern-table-row{
  gap:10px;
  border-radius:10px;
}
.dispo-modal-card{
  border-radius:12px;
  padding:16px;
}
@media (max-width:1180px){
  .shell{grid-template-columns:1fr}
  .sidebar{
    position:static;
    height:auto;
    display:block;
  }
  .brand{grid-template-columns:34px 1fr}
  .side-stats{display:none}
  .hero-with-current,.call-review-layout{grid-template-columns:1fr}
  .hero-straight-stats{grid-template-columns:repeat(2,minmax(120px,1fr))}
}
@media (max-width:760px){
  .main{padding:16px}
  .dialer-queue-head{display:none}
  .dialer-queue-row,.modern-table-head,.modern-table-row,.review-table-head,.review-row{
    grid-template-columns:1fr;
  }
}

/* Final mockup match pass: load last and override old build styles */
html,body{
  background:#eef6ff !important;
  color:#06245a !important;
}
body{
  font-size:13px !important;
}
.shell{
  grid-template-columns:142px minmax(0,1fr) !important;
  width:100% !important;
  max-width:none !important;
}
.sidebar,
aside.sidebar,
.app-sidebar{
  background:#fff !important;
  color:#08285c !important;
  width:142px !important;
  padding:16px 12px !important;
  border-right:1px solid #dbe8f8 !important;
  box-shadow:none !important;
  overflow-x:hidden !important;
}
.brand{
  display:flex !important;
  justify-content:center !important;
  margin:0 0 14px !important;
}
.brand .logo-wrap{display:block !important}
.brand .logo{
  width:32px !important;
  height:32px !important;
  border-radius:8px !important;
  font-size:9px !important;
}
.brand > div:not(.logo-wrap),
.brand-title,
.brand-subtitle,
.brand .eyebrow{
  display:none !important;
}
.cm-dashboard-link,
.cm-nav-group a,
.nav-link{
  width:100% !important;
  min-height:32px !important;
  padding:8px 9px !important;
  margin:2px 0 !important;
  border-radius:7px !important;
  color:#24446f !important;
  background:transparent !important;
  font-size:11px !important;
  line-height:1.15 !important;
  font-weight:800 !important;
  justify-content:flex-start !important;
}
.cm-dashboard-link{
  background:#2f73ff !important;
  color:#fff !important;
  box-shadow:none !important;
}
.cm-nav-group{
  margin:12px 0 !important;
}
.cm-nav-group summary{
  padding:5px 4px !important;
  color:#7e93b6 !important;
  font-size:10px !important;
  line-height:1.15 !important;
  letter-spacing:.08em !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}
.cm-nav-group summary::after,
.cm-nav-group summary::before,
.cm-dashboard-link::before,
.cm-nav-group a::before{
  display:none !important;
}
.cm-nav-divider{margin:8px 4px !important;background:#e3edf9 !important}
.cm-nav-group a.active,
.cm-nav-group a:hover,
.nav-link.active,
.nav-link:hover{
  background:#edf4ff !important;
  color:#145bd8 !important;
}
.side-stats{display:none !important}
.main{
  padding:16px 20px 28px !important;
  max-width:none !important;
  margin:0 !important;
  width:auto !important;
}
.topbar{
  margin:0 0 14px !important;
}
.topbar-row{
  min-height:36px !important;
  align-items:center !important;
}
.topbar h1{
  font-size:22px !important;
  font-weight:900 !important;
}
.header-tools{
  gap:6px !important;
}
.header-tools .pill{
  min-height:24px !important;
  padding:5px 10px !important;
  font-size:10px !important;
}
.header-tools form .btn,
.header-tools button{
  min-height:28px !important;
  padding:6px 10px !important;
  border-radius:8px !important;
}
.card,
.hero-callout,
.campaign-card,
.tab-card,
.call-review-hero,
.list-item,
.campaign-tile,
.live-call-card{
  border-radius:8px !important;
  border:1px solid #d5e4f7 !important;
  background:#fff !important;
  box-shadow:0 12px 28px rgba(39,85,145,.05) !important;
  padding:14px !important;
}
.section-header{margin-bottom:10px !important}
.section-header h2{font-size:13px !important}
.eyebrow{
  font-size:9px !important;
  letter-spacing:.18em !important;
}
.muted,
.label{
  color:#5573a1 !important;
}
.dialer-shell{gap:10px !important}
.dialer-clean-hero.hero-with-current{
  grid-template-columns:minmax(0,1fr) !important;
  align-items:start !important;
}
.dialer-clean-hero h2{
  font-size:20px !important;
  margin-top:6px !important;
}
.dialer-clean-hero p{
  margin-top:6px !important;
  font-size:13px !important;
}
.hero-straight-stats{
  grid-template-columns:repeat(3,minmax(210px,1fr)) !important;
  gap:10px !important;
  margin-top:18px !important;
  max-width:860px !important;
}
.mini-card,
.surface-note,
.detail-grid div,
.dialer-detail-grid div{
  border-radius:8px !important;
  border:1px solid #d5e4f7 !important;
  background:#f8fbff !important;
  padding:12px !important;
}
.mini-card span{
  display:block !important;
  font-size:12px !important;
}
.mini-card strong{
  font-size:18px !important;
  margin-top:6px !important;
}
.mini-dispo-row{
  gap:6px !important;
  margin-top:14px !important;
}
.mini-dispo{
  min-height:26px !important;
  padding:5px 8px !important;
  border-radius:6px !important;
  font-size:10px !important;
}
.hero-current.subtle{
  min-height:112px !important;
  padding:14px !important;
}
.inline-empty{
  border-radius:8px !important;
  padding:10px !important;
  font-size:12px !important;
}
.row.gap{gap:8px !important}
.btn{
  min-height:34px !important;
  padding:8px 12px !important;
  border-radius:7px !important;
  font-size:12px !important;
}
input,select,textarea,button{
  min-height:34px !important;
  border-radius:7px !important;
  padding:7px 10px !important;
  font-size:12px !important;
}
label{font-size:11px !important}
.surface-note{
  margin-top:10px !important;
}
.surface-note .row label{
  min-width:0 !important;
}
#audioInputSelect,
#audioOutputSelect{
  min-width:0 !important;
  width:100% !important;
}
#dialerCampaignSelect{
  min-width:74px !important;
}
.audio-device-panel .row{
  display:grid !important;
  grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto !important;
  align-items:end !important;
}
.campaign-select-panel .row{
  display:flex !important;
  align-items:end !important;
}
.mode-panel{
  padding:10px 12px !important;
}
.parallel-console-card{
  margin-bottom:10px !important;
}
.dialer-reference-head{
  margin-bottom:14px !important;
}
.dialer-reference-head h2{
  font-size:17px !important;
  font-weight:900 !important;
}
.dialer-reference-head p{
  margin-top:6px !important;
  font-size:12px !important;
}
.quick-disposition-panel{
  margin-bottom:10px !important;
}
.quick-disposition-panel .section-header{
  margin-bottom:8px !important;
}
.quick-disposition-panel .section-header h2{
  font-size:12px !important;
}
.current-lead-card:has(#currentLeadPanel.inline-empty){
  display:none !important;
}
.current-lead-card{
  max-width:760px !important;
}
.queue-wide-card{
  margin-top:12px !important;
}
.dialer-queue-head.wide,
.dialer-queue-row.wide,
.queue-wide-card .dialer-queue-head.wide,
.queue-wide-card .dialer-queue-row.wide{
  grid-template-columns:36px 1.35fr 1fr 1fr .85fr .75fr !important;
  gap:8px !important;
}
.dialer-queue-head{
  padding:8px 10px !important;
  font-size:9px !important;
}
.dialer-queue-row{
  min-height:42px !important;
  padding:10px 12px !important;
  border-radius:8px !important;
  font-size:12px !important;
}
.queue-status,
.dialer-queue-row span:last-child{
  justify-self:start !important;
  border-radius:999px !important;
  padding:4px 8px !important;
  background:#fff1d5 !important;
  color:#9a6406 !important;
  font-size:10px !important;
  font-weight:900 !important;
}
.call-review-layout{
  grid-template-columns:240px minmax(640px,1fr) 280px !important;
  gap:10px !important;
}
.modern-table-row,
.review-row{
  min-height:34px !important;
  padding:8px 10px !important;
  border-radius:8px !important;
  font-size:11px !important;
}
.modern-table-head,
.review-table-head{
  font-size:9px !important;
  padding:8px 10px !important;
}
@media (max-width:1180px){
  .shell{grid-template-columns:1fr !important}
  .sidebar{width:auto !important}
  .dialer-clean-hero.hero-with-current{grid-template-columns:1fr !important}
  .hero-straight-stats{grid-template-columns:repeat(2,minmax(130px,1fr)) !important}
  .audio-device-panel .row{grid-template-columns:1fr !important}
}

/* If an older Agent Dialer template is still deployed, force it into the
   reference order by hiding the empty hero-side Current Lead panel. */
.hero-current:has(#currentLeadPanel.inline-empty){
  display:none !important;
}
.hero-with-current:has(.hero-current #currentLeadPanel.inline-empty){
  grid-template-columns:1fr !important;
}

/* Scale correction: make the operator console read at normal desktop size. */
body{
  font-size:16px !important;
}
.shell{
  grid-template-columns:160px minmax(0,1fr) !important;
}
.sidebar,
aside.sidebar,
.app-sidebar{
  width:160px !important;
  padding:18px 14px !important;
}
.brand .logo{
  width:40px !important;
  height:40px !important;
  border-radius:10px !important;
  font-size:12px !important;
}
.cm-dashboard-link,
.cm-nav-group a,
.nav-link{
  min-height:38px !important;
  padding:10px 12px !important;
  font-size:12px !important;
  border-radius:9px !important;
}
.cm-nav-group summary{
  padding:10px 6px 6px !important;
  font-size:11px !important;
  line-height:1.2 !important;
}
.main{
  padding:22px 26px 36px !important;
}
.topbar{
  margin-bottom:18px !important;
}
.topbar h1{
  font-size:28px !important;
}
.header-tools .pill{
  min-height:30px !important;
  padding:7px 12px !important;
  font-size:12px !important;
}
.header-tools form .btn,
.header-tools button{
  min-height:34px !important;
  padding:8px 13px !important;
  font-size:12px !important;
}
.card,
.hero-callout,
.campaign-card,
.tab-card,
.call-review-hero,
.list-item,
.campaign-tile,
.live-call-card{
  padding:20px !important;
  border-radius:10px !important;
}
.dialer-shell{
  gap:16px !important;
}
.dialer-clean-hero h2,
.dialer-reference-head h2,
.section-header h2{
  font-size:18px !important;
}
.dialer-clean-hero p,
.dialer-reference-head p,
.muted{
  font-size:14px !important;
}
.eyebrow{
  font-size:11px !important;
}
.hero-straight-stats{
  grid-template-columns:repeat(3,minmax(240px,1fr)) !important;
  gap:14px !important;
  max-width:980px !important;
}
.mini-card,
.surface-note,
.detail-grid div,
.dialer-detail-grid div{
  padding:16px !important;
  border-radius:10px !important;
}
.mini-card span{
  font-size:14px !important;
}
.mini-card strong{
  font-size:24px !important;
}
.mini-dispo-row{
  gap:10px !important;
}
.mini-dispo{
  min-height:36px !important;
  padding:8px 12px !important;
  font-size:12px !important;
  border-radius:8px !important;
}
.btn{
  min-height:40px !important;
  padding:10px 16px !important;
  font-size:14px !important;
  border-radius:9px !important;
}
input,select,textarea,button{
  min-height:40px !important;
  padding:10px 13px !important;
  font-size:14px !important;
  border-radius:9px !important;
}
label{
  font-size:13px !important;
}
.audio-device-panel .row{
  grid-template-columns:minmax(300px,1fr) minmax(300px,1fr) auto !important;
}
.surface-note{
  margin-top:14px !important;
}
.inline-empty{
  padding:16px !important;
  font-size:14px !important;
}
.dialer-queue-head.wide,
.dialer-queue-row.wide,
.queue-wide-card .dialer-queue-head.wide,
.queue-wide-card .dialer-queue-row.wide{
  grid-template-columns:44px 1.35fr 1fr 1fr .85fr .75fr !important;
  gap:12px !important;
}
.dialer-queue-head{
  font-size:12px !important;
  padding:10px 12px !important;
}
.dialer-queue-row{
  min-height:52px !important;
  padding:13px 14px !important;
  font-size:14px !important;
  border-radius:10px !important;
}
.queue-status,
.dialer-queue-row span:last-child{
  font-size:12px !important;
  padding:5px 10px !important;
}
@media (max-width:1180px){
  .shell{grid-template-columns:1fr !important}
  .sidebar{width:auto !important}
  .hero-straight-stats{grid-template-columns:1fr !important}
  .audio-device-panel .row{grid-template-columns:1fr !important}
}

/* Agent Dialer workflow layout: stats left, current call top-right, queue visible. */
.dialer-top-layout{
  display:grid !important;
  grid-template-columns:minmax(560px,1fr) 430px !important;
  gap:14px !important;
  align-items:stretch !important;
}
.dialer-top-layout .parallel-console-card,
.dialer-top-layout .current-lead-card{
  margin:0 !important;
}
.dialer-compact-top{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-bottom:10px !important;
}
.dialer-setup-row{
  display:grid !important;
  grid-template-columns:minmax(180px,220px) minmax(0,1fr) !important;
  gap:10px !important;
  align-items:end !important;
  width:100% !important;
}
.campaign-inline{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:8px !important;
  color:#5573a1 !important;
  font-size:13px !important;
}
.campaign-inline select{
  width:100% !important;
  min-height:34px !important;
  padding:7px 10px !important;
  font-size:13px !important;
}
.compact-audio-panel{
  display:grid !important;
  grid-template-columns:auto minmax(180px,1fr) minmax(180px,1fr) auto !important;
  gap:8px !important;
  align-items:end !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.compact-audio-panel > span{
  align-self:center !important;
  color:#5573a1 !important;
  font-size:13px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
}
.compact-audio-panel label{
  display:flex !important;
  flex-direction:column !important;
  gap:5px !important;
  min-width:0 !important;
  color:#5573a1 !important;
}
.compact-audio-panel select,
.compact-audio-panel button{
  min-height:34px !important;
  padding:7px 10px !important;
  font-size:12px !important;
}
.compact-audio-panel button{
  white-space:nowrap !important;
}
.dialer-top-layout .hero-straight-stats{
  max-width:none !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  margin-top:0 !important;
}
.dialer-top-layout .mini-card{
  min-height:74px !important;
}
.current-lead-card,
.current-lead-card:has(#currentLeadPanel.inline-empty){
  display:block !important;
}
.current-lead-card .inline-empty{
  min-height:74px !important;
  display:flex !important;
  align-items:center !important;
}
.quick-disposition-panel{
  padding:12px 14px !important;
}
.quick-disposition-panel .section-header{
  margin-bottom:6px !important;
}
.quick-disposition-panel .mini-dispo-row{
  margin-top:0 !important;
}
.dialer-shell > .card:not(.parallel-console-card):not(.quick-disposition-panel):not(.queue-wide-card):not(.current-lead-card){
  padding:14px !important;
}
.audio-device-panel,
.mode-panel{
  padding:10px 12px !important;
}
.compact-mode-panel{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-top:10px !important;
  padding:8px 10px !important;
  min-height:0 !important;
}
.compact-mode-panel strong{
  white-space:nowrap !important;
  font-size:12px !important;
}
.mode-panel p{
  margin:0 !important;
  font-size:12px !important;
  line-height:1.3 !important;
}
.queue-wide-card{
  margin-top:0 !important;
}
.dialer-queue-row{
  min-height:42px !important;
  padding:9px 12px !important;
}
@media (max-width:1180px){
  .dialer-top-layout{
    grid-template-columns:1fr !important;
  }
  .dialer-setup-row,
  .compact-audio-panel{
    grid-template-columns:1fr !important;
  }
}

/* Navigation redesign: readable operator sidebar matching the light console UI. */
.shell{
  grid-template-columns:232px minmax(0,1fr) !important;
}
.sidebar,
aside.sidebar,
.app-sidebar{
  width:232px !important;
  padding:18px 16px !important;
  background:#ffffff !important;
  border-right:1px solid rgba(96,132,178,.18) !important;
  box-shadow:6px 0 24px rgba(60,102,156,.06) !important;
  overflow-y:auto !important;
}
.brand{
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) !important;
  align-items:center !important;
  gap:11px !important;
  margin:0 0 18px !important;
}
.brand .logo-wrap{
  display:block !important;
  padding:0 !important;
  background:transparent !important;
}
.brand .logo{
  width:44px !important;
  height:44px !important;
  border-radius:12px !important;
  font-size:13px !important;
}
.brand > div:not(.logo-wrap),
.brand-title,
.brand-subtitle,
.brand .eyebrow{
  display:block !important;
}
.brand .eyebrow{
  font-size:8px !important;
  line-height:1.25 !important;
  letter-spacing:.12em !important;
  color:#6c83ad !important;
}
.brand-title{
  font-size:18px !important;
  line-height:1.1 !important;
  font-weight:900 !important;
  color:#08285b !important;
}
.brand-subtitle{
  margin-top:3px !important;
  font-size:11px !important;
  line-height:1.3 !important;
  color:#5d76a2 !important;
}
.grouped-nav{
  display:grid !important;
  gap:10px !important;
}
.cm-nav-divider{
  height:1px !important;
  margin:8px 0 6px !important;
  background:rgba(96,132,178,.18) !important;
}
.cm-dashboard-link,
.cm-nav-group a,
.nav-link{
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  min-height:38px !important;
  padding:9px 12px !important;
  border-radius:8px !important;
  color:#092b61 !important;
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  white-space:normal !important;
  overflow:visible !important;
  opacity:1 !important;
}
.cm-dashboard-link{
  min-height:42px !important;
  background:#2f6bff !important;
  color:#ffffff !important;
  justify-content:flex-start !important;
}
.cm-nav-group{
  margin:0 !important;
}
.cm-nav-group summary{
  list-style:none !important;
  min-height:auto !important;
  padding:10px 6px 4px !important;
  margin:0 !important;
  color:#7184aa !important;
  font-size:10px !important;
  line-height:1.2 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  font-weight:900 !important;
  white-space:normal !important;
}
.cm-nav-group summary::-webkit-details-marker{
  display:none !important;
}
.cm-nav-group summary::before,
.cm-nav-group summary::after,
.cm-dashboard-link::before,
.cm-nav-group a::before{
  display:none !important;
}
.cm-nav-group a:hover,
.cm-nav-group a.active,
.cm-dashboard-link:hover{
  background:#eef5ff !important;
  color:#0f55cf !important;
  transform:none !important;
}
.cm-dashboard-link:hover{
  background:#2f6bff !important;
  color:#ffffff !important;
}
.side-stats{
  margin-top:18px !important;
  display:grid !important;
  gap:8px !important;
}
.side-stats .pill{
  width:100% !important;
  justify-content:flex-start !important;
  min-height:34px !important;
  padding:8px 10px !important;
  font-size:12px !important;
  border-radius:8px !important;
  color:#284672 !important;
  background:#f5f9ff !important;
}
.main{
  padding:22px 28px 36px !important;
}
@media (max-width:1180px){
  .shell{
    grid-template-columns:1fr !important;
  }
  .sidebar,
  aside.sidebar,
  .app-sidebar{
    position:static !important;
    width:auto !important;
    max-height:none !important;
  }
}