/* ========================================================================
   CRM CLASSIC — glass/gradient light theme
   Selector names are kept identical to the previous stylesheet so every
   template (base.html + 18 pages) renders correctly with zero HTML changes.
   ======================================================================== */

:root{
  /* accent gradient */
  --g1:#6d5bff; --g2:#3b82f6; --g3:#22d3ee;
  --accent:#5b6bf5; --accent2:#3b57e8;
  --ink:#1a1e2e; --muted:#6b7280; --line:rgba(30,35,60,.09);
  --danger:#e0455a; --danger-bg:#fff1f3;
  --good:#0ea472; --good-bg:#ecfdf6;
  --amber:#c07a12; --amber-bg:#fff8e8;

  /* glass surfaces */
  --glass: rgba(255,255,255,.62);
  --glass-strong: rgba(255,255,255,.8);
  --glass-border: rgba(255,255,255,.55);
  --shadow: 0 8px 30px rgba(60,70,140,.10), 0 2px 8px rgba(60,70,140,.06);
  --shadow-lg: 0 20px 60px rgba(60,70,140,.16), 0 4px 16px rgba(60,70,140,.08);
  --radius: 18px;
  --radius-sm: 12px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  font-size:14px;
  min-height:100vh;
  background:
    radial-gradient(1100px 620px at -8% -12%, #ded8ff 0%, transparent 55%),
    radial-gradient(900px 620px at 108% 0%, #c9e6ff 0%, transparent 52%),
    radial-gradient(800px 700px at 50% 118%, #d7f3ee 0%, transparent 50%),
    linear-gradient(180deg, #eeeafc 0%, #e7ecfb 100%);
  background-attachment:fixed;
}
h1,h2,h3,h4,.brand strong,.metric strong,.big-score,.big-phone{font-family:"Outfit","Inter",sans-serif;}
a{color:var(--accent2); text-decoration:none}
.material-symbols-rounded{font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 22; font-size:20px; line-height:1; vertical-align:middle}

/* ---------------- floating app frame ---------------- */
.app-frame{padding:16px}
.app-shell{
  display:flex; height:calc(100vh - 32px);
  background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.7);
  border-radius:26px; overflow:hidden;
  box-shadow:0 30px 80px rgba(60,60,140,.14), 0 4px 18px rgba(60,60,140,.06);
}
body.login-body .app-frame{padding:0}
body.login-body .app-shell{box-shadow:none;background:transparent;border:0;min-height:100vh;border-radius:0}

/* ---------------- sidebar ---------------- */
.sidebar{
  width:250px; flex:0 0 auto; z-index:10;
  padding:20px 14px; display:flex; flex-direction:column;
  background:linear-gradient(190deg, rgba(255,255,255,.55), rgba(255,255,255,.32));
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  color:var(--ink); border-right:1px solid rgba(255,255,255,.6);
  overflow-y:auto;
  transition:width .2s ease, padding .2s ease, opacity .15s ease, border-color .2s ease;
}
@media (min-width:761px){
  html.sidebar-collapsed .sidebar{width:76px; padding:20px 12px; overflow:visible}
  html.sidebar-collapsed .sidebar nav{grid-template-columns:1fr!important}
  html.sidebar-collapsed .brand{justify-content:center}
  html.sidebar-collapsed .brand>div{display:none}
  html.sidebar-collapsed .nav-label{display:none}
  html.sidebar-collapsed .sidebar nav a{justify-content:center; gap:0; position:relative}
  html.sidebar-collapsed .nav-text{display:none}
  html.sidebar-collapsed .sidebar-user{flex-direction:column; gap:10px}
  html.sidebar-collapsed .sidebar-user .grow{display:none}
  html.sidebar-collapsed .sidebar-user .logout-ic{margin-left:0}

}
.sb-tooltip{
  position:fixed; transform:translateY(-50%); background:#181c2c; color:#fff;
  font-size:12.5px; font-weight:600; font-family:"Inter",sans-serif; white-space:nowrap;
  padding:7px 12px; border-radius:9px; box-shadow:var(--shadow-lg); z-index:200;
  pointer-events:none; animation:tooltip-in .12s ease;
}
@keyframes tooltip-in{from{opacity:0; transform:translateY(-50%) translateX(-4px)} to{opacity:1; transform:translateY(-50%)}}

.topbar{display:flex; align-items:center; gap:8px; margin-bottom:18px; flex-wrap:wrap}
.icon-btn{
  width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.65); border:1px solid var(--line); color:var(--ink-soft); cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .12s ease;
}
.icon-btn:hover{background:#fff; color:var(--ink); box-shadow:var(--shadow)}
.icon-btn:active{transform:scale(.94)}
.icon-btn .material-symbols-rounded{font-size:19px}

.topbar-search{
  flex:1 1 240px; min-width:0; max-width:460px; height:36px;
  display:flex; align-items:center; gap:8px; padding:0 12px;
  background:rgba(255,255,255,.65); border:1px solid var(--line); border-radius:11px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.topbar-search:focus-within{border-color:rgba(91,107,245,.55); background:#fff; box-shadow:0 0 0 4px rgba(91,107,245,.14)}
.topbar-search .material-symbols-rounded{font-size:18px; color:var(--muted); flex:0 0 auto}
.topbar-search input{border:0; background:transparent; padding:0; height:100%; border-radius:0}
.topbar-search input:focus{outline:none; box-shadow:none}
.topbar-add{margin-left:auto}
.brand{display:flex;gap:11px;align-items:center; padding:4px 6px 0}
.brand-mark{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--g1),var(--g2) 60%,var(--g3));
  font-weight:800;color:#fff; box-shadow:0 6px 18px rgba(90,90,255,.4);
}
.brand strong,.brand small{display:block}
.brand strong{letter-spacing:.3px; font-weight:700}
.brand small{font-size:11px;color:var(--muted);margin-top:2px}

.primary-nav,.secondary-nav{display:grid;gap:3px}
.sidebar nav{margin-top:22px}
.sidebar nav a{
  display:flex; align-items:center; gap:10px;
  color:#4b5170; padding:9px 11px; border-radius:12px; font-size:13.5px; font-weight:500;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.sidebar nav a:hover{background:rgba(255,255,255,.65); color:var(--ink)}
.sidebar nav a.active{
  background:#fff; color:var(--ink); font-weight:700;
  box-shadow:0 4px 14px rgba(60,60,140,.12), inset 0 0 0 1px rgba(109,91,255,.12);
}
.nav-ic{
  width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  font-size:16px!important; flex:0 0 auto;
}
.nav-ic.sm{width:22px;height:22px;font-size:14px!important;border-radius:7px}
.ic-violet{background:rgba(109,91,255,.16);color:#6d5bff}
.ic-blue{background:rgba(59,130,246,.16);color:#2f6fe0}
.ic-amber{background:rgba(192,122,18,.14);color:#c07a12}
.ic-green{background:rgba(14,164,114,.15);color:#0ea472}
.ic-pink{background:rgba(236,72,153,.14);color:#db2f86}
.ic-teal{background:rgba(20,184,166,.15);color:#0f9c8f}
.ic-indigo{background:rgba(79,70,229,.15);color:#4f46e5}
.nav-label{font-size:10px;font-weight:700;letter-spacing:1.3px;color:#8c93b5;margin:22px 10px 6px}
.nav-label + nav{margin-top:0!important}
.secondary-nav{margin-top:0!important}
.secondary-nav a{font-size:12.5px!important;padding:7px 11px!important}

.sidebar-user{
  margin-top:auto; padding-top:14px; border-top:1px solid rgba(30,35,60,.08);
  display:flex; align-items:center; gap:10px;
}
.sidebar-user strong,.sidebar-user small{display:block}
.sidebar-user small{color:var(--muted)}
.user-chip{background:linear-gradient(135deg, rgba(109,91,255,.25), rgba(59,130,246,.22)); color:#4338ca; font-weight:700}
.logout-ic{
  margin-left:auto; width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  color:#8188a8; background:rgba(255,255,255,.5);
}
.logout-ic:hover{background:var(--danger-bg); color:var(--danger)}
.logout-ic .material-symbols-rounded{font-size:18px}

/* ---------------- content shell ---------------- */
.content{flex:1; min-width:0; padding:26px 32px 60px; max-width:none; overflow-y:auto}
.content-login{margin:0; display:grid; place-items:center; min-height:100vh; padding:20px; flex:1}
.content-inner{max-width:1360px; margin:0 auto}
.content-login .content-inner{max-width:none; margin:0}

.login-card{
  width:min(430px,92vw); padding:36px 34px;
  background:var(--glass-strong);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border:1px solid var(--glass-border); border-radius:24px;
  box-shadow:var(--shadow-lg);
}
.brand-login{margin-bottom:28px}
.login-card h1{margin-bottom:4px; font-size:26px}
.muted{color:var(--muted)}

/* ---------------- headers ---------------- */
.page-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 20px;align-items:center;margin-bottom:24px}
.page-head h1,.lead-header h1{margin:0;font-size:27px;letter-spacing:-.4px;font-weight:700}
.page-head p{margin:5px 0 0;color:var(--muted)}
.actions{display:flex;gap:9px;flex:0 0 auto}

.title-row{display:flex;align-items:center;gap:16px}
.title-ic{
  width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-size:24px!important;
}
.title-ic.ic-bg-violet{background:linear-gradient(135deg, rgba(109,91,255,.22), rgba(109,91,255,.08)); color:#6d5bff}
.title-ic.ic-bg-blue{background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(59,130,246,.08)); color:#2f6fe0}
.title-ic.ic-bg-amber{background:linear-gradient(135deg, rgba(192,122,18,.22), rgba(192,122,18,.08)); color:#c07a12}
.title-ic.ic-bg-green{background:linear-gradient(135deg, rgba(14,164,114,.22), rgba(14,164,114,.08)); color:#0ea472}
.title-ic.ic-bg-pink{background:linear-gradient(135deg, rgba(236,72,153,.22), rgba(236,72,153,.08)); color:#db2f86}
.title-ic.ic-bg-teal{background:linear-gradient(135deg, rgba(20,184,166,.22), rgba(20,184,166,.08)); color:#0f9c8f}
.title-ic.ic-bg-indigo{background:linear-gradient(135deg, rgba(79,70,229,.22), rgba(79,70,229,.08)); color:#4f46e5}
.title-ic.ic-bg-red{background:linear-gradient(135deg, rgba(224,69,90,.22), rgba(224,69,90,.08)); color:#e0455a}

/* ---------------- glass surfaces: cards / metrics ---------------- */
.metric,.card,.dial-card,.empty-state,.integration-mini,.qc-call-card,.report-card{
  background:var(--glass);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:box-shadow .2s ease, transform .2s ease;
}
.metric:hover,.qc-call-card:hover,.integration-mini:hover{box-shadow:var(--shadow-lg); transform:translateY(-2px)}

.metrics{display:grid;grid-template-columns:repeat(6,minmax(130px,1fr));gap:16px;margin-bottom:22px}
.classic-metrics{grid-template-columns:repeat(4,minmax(150px,1fr))}
.metric{padding:20px 22px; position:relative; overflow:hidden}
.metric::before{
  content:""; position:absolute; inset:auto auto -30% -20%; width:110px; height:110px; border-radius:50%;
  background:radial-gradient(circle, rgba(109,91,255,.16), transparent 70%); pointer-events:none;
}
.metric small{display:block;color:var(--muted);margin-bottom:2px; font-weight:500; font-size:12.5px}
.metric strong{font-size:27px; font-weight:700; display:block; margin:10px 0 2px}
.metric span{display:flex; align-items:center; gap:2px; color:var(--muted);font-size:11.5px;margin-top:9px; font-weight:500}
.metric span .arrow{font-size:14px!important}

.stat-tile{display:block}
.stat-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:2px}
.icon-chip{
  width:42px;height:42px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;
  font-size:22px!important;
}
.chip-violet{background:linear-gradient(135deg, rgba(109,91,255,.2), rgba(109,91,255,.08)); color:#6d5bff}
.chip-blue{background:linear-gradient(135deg, rgba(59,130,246,.2), rgba(59,130,246,.08)); color:#2f6fe0}
.chip-amber{background:linear-gradient(135deg, rgba(192,122,18,.2), rgba(192,122,18,.08)); color:#c07a12}
.chip-green{background:linear-gradient(135deg, rgba(14,164,114,.2), rgba(14,164,114,.08)); color:#0ea472}
.chip-pink{background:linear-gradient(135deg, rgba(236,72,153,.2), rgba(236,72,153,.08)); color:#db2f86}

.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:20px;align-items:start}
.grid-2-stretch{align-items:stretch}
.grid-2>*,.lead-workspace>*,.call-review-grid>*{min-width:0}
.card{padding:22px;margin-bottom:20px}
.content-inner>.card:last-child,.grid-2>.card,.metrics>.card,.call-review-grid>.card{margin-bottom:0}
.card h2{font-size:18px;margin:0 0 16px; font-weight:700; font-family:"Outfit",sans-serif}
.card h3{font-size:15px; font-weight:700}
.card-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:8px 14px;margin-bottom:18px}
.card-head>div{flex:1 1 auto;min-width:0}
.card-head p{margin:3px 0 0}
.card-head .btn{margin-top:2px}

.pipeline{display:grid;gap:10px}
.pipeline-row{
  display:flex; align-items:center; gap:16px; padding:13px 16px;
  background:rgba(255,255,255,.55); border:1px solid var(--line); border-radius:13px; color:var(--ink);
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.pipeline-row:hover{background:#fff; border-color:rgba(109,91,255,.3); transform:translateX(2px)}
.pipeline-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:7px}
.pipeline-stage{font-size:13.5px; font-weight:600; color:var(--ink)}
.pipeline-bar{height:6px; border-radius:99px; background:rgba(30,35,60,.07); overflow:hidden}
.pipeline-bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--g1),var(--g2)); transition:width .3s ease}
.pipeline-count{
  flex:0 0 auto; min-width:34px; text-align:center; font-weight:700; font-size:14px; color:#4338ca;
  background:linear-gradient(135deg, rgba(109,91,255,.16), rgba(59,130,246,.12));
  padding:6px 12px; border-radius:999px;
}

/* ---------------- tables ---------------- */
.table-wrap{overflow:auto; border-radius:var(--radius-sm)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--muted);font-weight:700;background:rgba(255,255,255,.5); text-transform:uppercase; font-size:10.5px; letter-spacing:.5px}
th,td{padding:12px 11px;border-bottom:1px solid var(--line);white-space:nowrap}
.classic-table td,.classic-table th{padding:13px 10px}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:rgba(109,91,255,.05)}

/* ---------------- badges / pills / chips ---------------- */
.badge{
  display:inline-block;padding:4px 9px;
  background:linear-gradient(135deg, rgba(109,91,255,.14), rgba(59,130,246,.14));
  color:#4338ca;border-radius:999px;font-size:11px;font-weight:700;
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.masked{letter-spacing:.4px}

.stage-pill{
  display:inline-flex;align-items:center;padding:4px 9px;
  border:1px solid rgba(30,35,60,.1); background:rgba(255,255,255,.65);
  border-radius:7px;font-size:11px;font-weight:700;color:#4b5563;
}
.stage-pill.large{padding:7px 11px;font-size:12px}

.stage-select{
  display:inline-flex; align-items:center; padding:4px 24px 4px 9px;
  border:1px solid rgba(30,35,60,.1); background:rgba(255,255,255,.65);
  border-radius:7px; font-size:11px; font-weight:700; color:#4b5563; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'><path fill='%234b5563' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat; background-position:right 6px center;
}
.stage-select:hover{border-color:rgba(91,107,245,.35)}
.stage-select:focus{outline:2px solid rgba(91,107,245,.35); outline-offset:1px}

.followup-input{
  border:1px solid rgba(30,35,60,.1); background:rgba(255,255,255,.65);
  border-radius:7px; font-size:11px; font-weight:600; color:#4b5563; padding:4px 6px;
  font-family:inherit; cursor:pointer; min-width:150px;
}
.followup-input:hover{border-color:rgba(91,107,245,.35)}
.followup-input:focus{outline:2px solid rgba(91,107,245,.35); outline-offset:1px}
.followup-input:disabled{opacity:.6; cursor:wait}

.inline-actions{display:flex; gap:6px; white-space:nowrap}
.inline-actions form{display:inline-flex}

.status-pill{display:inline-flex;align-items:center;white-space:nowrap;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:800}
.status-pill.ok{background:var(--good-bg);color:var(--good)}
.status-pill.off{background:#f1f2f8;color:#7b8194}
.status-pill.bad{background:var(--danger-bg);color:var(--danger)}

.count-badge{font-size:11px;padding:3px 8px;border-radius:99px;background:#eef0fb;color:#525c8a;font-weight:600}
.count-badge.danger{background:var(--danger-bg);color:var(--danger)}
.count-badge.warning{background:var(--amber-bg);color:var(--amber)}

.score-chip{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--good-bg);color:var(--good);border:1px solid rgba(14,164,114,.22);
  font-weight:800;border-radius:8px;padding:6px 9px;white-space:nowrap;
}
.score-chip.low{background:var(--danger-bg);color:var(--danger);border-color:rgba(224,69,90,.22)}
.score-chip.high{background:var(--good-bg);color:var(--good)}

/* ---------------- forms ---------------- */
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 14px; align-items:start}
.span-2{grid-column:span 2}
.span-3{grid-column:1/-1}
.form-grid .check{grid-column:1/-1}
.consent-row{display:flex; flex-wrap:wrap; gap:8px 24px}
.consent-row .check{grid-column:auto}
.stack{display:grid;gap:12px}
.inline{display:flex;gap:10px}
.inline>*{flex:1}
label{font-size:12px;font-weight:700;color:#3d4457;display:grid;gap:6px}

input,select,textarea{
  width:100%;border:1px solid rgba(30,35,60,.14);border-radius:11px;
  padding:10px 12px;background:rgba(255,255,255,.7);color:var(--ink);font:inherit;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:rgba(91,107,245,.55); background:#fff;
  box-shadow:0 0 0 4px rgba(91,107,245,.14);
}
textarea{resize:vertical;min-height:76px}
.check{display:flex;align-items:center;gap:8px}
.check input{width:auto}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid rgba(30,35,60,.14);background:rgba(255,255,255,.7);color:var(--ink);
  padding:9px 15px;border-radius:11px;font-weight:700;cursor:pointer;font-size:13.5px;
  white-space:nowrap;flex:0 0 auto;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{background:#fff; box-shadow:0 4px 14px rgba(30,35,60,.08); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{
  background:linear-gradient(135deg,var(--g1),var(--g2)); border-color:transparent;color:#fff;
  box-shadow:0 6px 18px rgba(91,107,245,.35);
}
.btn.primary:hover{box-shadow:0 8px 24px rgba(91,107,245,.45); filter:brightness(1.04)}
.btn.call{
  background:linear-gradient(135deg,#0ea472,#22c58e); border-color:transparent;color:#fff;
  font-size:16px;padding:13px 26px; box-shadow:0 8px 22px rgba(14,164,114,.35);
}
.btn.danger-outline{color:var(--danger);border-color:rgba(224,69,90,.35)}
.btn.small{padding:6px 10px;font-size:11px; border-radius:8px}
.btn.big{padding:12px 18px}
.btn-ic{font-size:16px!important}

.file-drop{
  display:flex; align-items:center; gap:14px; cursor:pointer;
  padding:18px 20px; border-radius:16px; border:1.5px dashed rgba(109,91,255,.35);
  background:rgba(255,255,255,.4); transition:background .15s ease, border-color .15s ease;
}
.file-drop:hover,.file-drop.drag-over{background:rgba(109,91,255,.07); border-color:rgba(109,91,255,.55)}
.file-drop.has-file{border-style:solid; border-color:rgba(14,164,114,.4); background:var(--ok-bg)}
.file-drop-icon{
  width:42px;height:42px;border-radius:13px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-size:22px!important; background:linear-gradient(135deg, rgba(109,91,255,.2), rgba(59,130,246,.1)); color:#6d5bff;
}
.file-drop.has-file .file-drop-icon{background:var(--ok-bg); color:var(--ok-fg)}
.file-drop-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.file-drop-text strong{font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.file-drop-text small{color:var(--muted); font-size:12px}
.file-drop-btn{flex:0 0 auto; pointer-events:none}

/* ---------------- filters / flash ---------------- */
.filters form{display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 12px; margin-bottom:16px}
.filters input{max-width:320px}
.filters select{max-width:200px}
/* Labels default to display:grid (stacked text-above-field) everywhere else in
   the app, which is fine in a vertical .stack/.form-grid form - but inside this
   horizontal filter bar a label with no explicit width fills the whole flex
   row (grid tracks size to the container), knocking every field after it onto
   its own line even on a wide screen. Cap it so date/text fields stay inline
   like the bare inputs/selects around them. */
.filters label{display:grid; gap:4px; max-width:170px; flex:0 0 auto}
.filters label input{max-width:170px; width:100%}

.flash-wrap{margin-bottom:16px}
.flash{padding:12px 14px;border-radius:12px;margin-bottom:8px; border:1px solid transparent; font-weight:500}
.flash.success{background:var(--good-bg);color:var(--good); border-color:rgba(14,164,114,.2)}
.flash.error{background:var(--danger-bg);color:var(--danger); border-color:rgba(224,69,90,.2)}

/* ---------------- dialer ---------------- */
.dial-card{max-width:720px;margin:20px auto;padding:34px}
.dial-card h2{font-size:30px;margin:18px 0 7px}
.dial-top{display:flex;justify-content:space-between}
.score{font-weight:800;background:linear-gradient(135deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}
.big-phone{font-size:24px;font-family:ui-monospace,monospace;margin:5px 0 14px}
.call-status{min-height:24px;margin-top:12px;color:var(--muted)}
.classic-dial{text-align:center;max-width:650px}
.classic-dial form{text-align:left}

hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.empty-state{padding:60px 40px;text-align:center}
.empty-state-icon{
  width:56px;height:56px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;
  font-size:28px!important; margin-bottom:16px;
  background:linear-gradient(135deg, rgba(109,91,255,.16), rgba(59,130,246,.12)); color:#6d5bff;
}
.empty-state h2{font-size:19px;margin:0 0 8px;font-weight:700}
.empty-state p{color:var(--muted); max-width:440px; margin:0 auto 20px; font-size:14px}
.empty-state .btn{margin:0 4px}

/* ---------------- calendar ---------------- */
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cal-nav-controls{display:flex;align-items:center;gap:8px}
.cal-month-label{font-size:17px}
.cal-empty-hint{margin:10px 0 0}
.cal-grid-wrap{overflow-x:auto; margin-top:16px}
.cal-grid{display:grid; grid-template-columns:repeat(7,minmax(84px,1fr)); gap:6px}
.cal-weekday{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);text-align:center;padding-bottom:4px}
.cal-day{
  min-height:92px;padding:8px 7px;border-radius:12px;
  background:rgba(255,255,255,.5);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:3px;
}
.cal-day.other-month{background:rgba(255,255,255,.18);opacity:.5}
.cal-day.is-today{border-color:rgba(91,107,245,.55);box-shadow:0 0 0 2px rgba(91,107,245,.14)}
.cal-day-num{font-size:12px;font-weight:700;color:var(--ink)}
.cal-day.is-today .cal-day-num{color:#5b6bf5}
.cal-event{
  display:block;font-size:10.5px;font-weight:600;padding:3px 6px;border-radius:7px;
  background:linear-gradient(135deg, rgba(109,91,255,.16), rgba(59,130,246,.12)); color:#3d4dc4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cal-event:hover{background:linear-gradient(135deg, rgba(109,91,255,.26), rgba(59,130,246,.2))}
.cal-more{font-size:10px;color:var(--muted);padding-left:6px}

.live-dot{color:#e0455a;font-weight:800}
.live-dot:before{content:'';display:inline-block;width:8px;height:8px;background:#e0455a;border-radius:50%;margin-right:7px; box-shadow:0 0 0 4px rgba(224,69,90,.18)}
.monitor-grid{display:grid;gap:10px}
.monitor-row{display:flex;justify-content:space-between;padding:15px;background:rgba(255,255,255,.55); border:1px solid var(--line); border-radius:13px}
.monitor-row strong,.monitor-row span,.monitor-row small{display:block}
.monitor-row small{color:var(--muted)}

.qa-form{display:flex;gap:6px}
.qa-form input{min-width:90px}

.timeline{border-left:2px solid rgba(109,91,255,.3);padding:0 0 13px 14px;margin-left:4px}
.timeline strong,.timeline span,.timeline small{display:block}
.timeline span{margin:4px 0}
.timeline small{color:var(--muted);font-size:11px}

.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.info-grid>div{background:rgba(255,255,255,.55); border:1px solid var(--line); padding:11px;border-radius:11px}
.info-grid small,.info-grid strong{display:block}
.simple-list{padding-left:18px}
.simple-list small{color:var(--muted)}

.org-list{display:grid; gap:8px; margin-top:14px}
.org-row{
  display:flex; align-items:center; gap:12px; padding:11px 14px;
  background:rgba(255,255,255,.55); border:1px solid var(--line); border-radius:12px;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.org-row:hover{background:#fff; border-color:rgba(109,91,255,.25); transform:translateX(2px)}
.org-ic{
  width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:17px!important; flex:0 0 auto;
}
.org-label{font-weight:600; font-size:13.5px; color:var(--ink); flex:1; min-width:0}
.org-tag{
  font-size:11px; font-weight:600; color:var(--muted); background:rgba(30,35,60,.05);
  padding:4px 10px; border-radius:999px; flex:0 0 auto;
}
.narrow{max-width:650px}

/* ---------------- DID numbers ---------------- */
.did-row{align-items:flex-start; flex-wrap:wrap}
.did-row>.grow{min-width:0}
.did-assign-form{margin-top:10px}
.did-agent-checks{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px}
.did-agent-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  background:rgba(255,255,255,.6); border:1px solid var(--line); border-radius:999px;
  padding:6px 12px; cursor:pointer;
}
.did-agent-chip input{margin:0}


/* ---------------- integrations ---------------- */
.integration-note{background:var(--amber-bg);border:1px solid rgba(192,122,18,.25);color:var(--amber);padding:14px 16px;border-radius:14px;margin-bottom:18px}
.integration-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.tab-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.tab-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:11px;border:1px solid var(--line);
  background:rgba(255,255,255,.6);color:var(--ink);font-weight:700;font-size:13px;font-family:inherit;cursor:pointer;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;white-space:nowrap;
}
.tab-btn.active .count-badge{background:rgba(255,255,255,.25);color:#fff}
.tab-btn:hover{background:#fff;box-shadow:var(--shadow)}
.tab-btn.active{
  background:linear-gradient(135deg,var(--g1),var(--g2));border-color:transparent;color:#fff;
  box-shadow:0 3px 10px rgba(91,107,245,.35);
}
.integration-mini{padding:15px;display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;cursor:pointer}
.integration-mini strong,.integration-mini small{display:block}
.integration-mini small{color:var(--muted);margin-top:3px}
.integration-card{position:relative}
.integration-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.integration-title h2{margin-bottom:4px}
.integration-title p{margin:0;color:var(--muted);font-size:13px}
.webhook-box{background:rgba(255,255,255,.5);border:1px dashed rgba(30,35,60,.2);border-radius:12px;padding:13px;margin:10px 0 16px}
.webhook-box small{display:block;color:var(--muted);font-weight:700;margin-bottom:6px}
.copy-row,.secret-row{display:flex;gap:8px}
.copy-row input,.secret-row input{flex:1}
.copy-row .btn,.secret-row .btn{flex:0 0 auto}
.integration-check{align-self:center;padding:9px 0}
.integration-card label small{font-size:11px;font-weight:500;color:var(--muted)}
.integration-test-form{margin-top:10px}
.integration-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.steps-box{background:rgba(255,255,255,.5);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:14px;font-size:13px}
.steps-box p{margin:7px 0 0;color:#4b5563}
.steps-box ol{margin:8px 0 0;padding-left:19px;color:#4b5563}
.steps-box li{margin:4px 0}
.subhead{font-weight:800;color:#374151;border-bottom:1px solid var(--line);padding:8px 0 6px;margin-top:3px}
.integration-grid>.card{height:max-content}

/* ---------------- leads / lead detail ---------------- */
.simple-leads{display:grid}
.lead-row{display:flex;align-items:center;gap:11px;padding:12px 6px;border-bottom:1px solid var(--line);color:var(--ink); border-radius:10px; transition:background .12s ease}
.lead-row:hover{background:rgba(109,91,255,.05)}
.lead-row:last-child{border-bottom:0}
.lead-row .grow span,.followup-row .grow span{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.grow{flex:1;min-width:0}

.avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg, rgba(109,91,255,.22), rgba(59,130,246,.2));
  display:grid;place-items:center;font-weight:800;color:#4338ca;flex:0 0 auto;
}
.avatar.sm{width:27px;height:27px;font-size:11px;display:inline-grid}
.avatar.lg{width:48px;height:48px;font-size:18px}
.avatar.xl{width:72px;height:72px;font-size:28px;margin:20px auto 6px; box-shadow:0 8px 24px rgba(91,107,245,.3)}

.add-lead-card summary,.upload-recording summary,.transcript-card summary,.action-details summary{cursor:pointer;font-weight:800;list-style:none}
.add-lead-card summary::-webkit-details-marker,.upload-recording summary::-webkit-details-marker,.transcript-card summary::-webkit-details-marker,.action-details summary::-webkit-details-marker{display:none}
/* ---------------- modal dialogs ---------------- */
dialog.modal{
  border:1px solid var(--glass-border); border-radius:22px; padding:0;
  background:var(--glass-strong); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  box-shadow:var(--shadow-lg); width:min(560px,92vw); max-height:88vh; overflow:hidden;
  margin:auto;
}
dialog.modal::backdrop{background:rgba(16,20,30,.42); backdrop-filter:blur(3px)}
dialog.modal[open]{animation:modal-in .16s ease}
@keyframes modal-in{from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:none}}
.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:20px 22px; border-bottom:1px solid var(--line);
}
.modal-head h2{margin:0; font-size:18px; font-weight:700}
.modal-close{
  width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-soft);
  flex:0 0 auto;
}
.modal-close:hover{background:var(--danger-bg); color:var(--danger); border-color:rgba(224,69,90,.25)}
.modal-close .material-symbols-rounded{font-size:18px}
.modal-body{padding:22px; overflow-y:auto; max-height:calc(88vh - 74px)}
.modal-trigger-note{font-size:12.5px;color:var(--muted); margin-top:-8px}
.compact-form textarea{min-height:55px}

.lead-name{display:flex;align-items:center;gap:9px;color:var(--ink)}
.lead-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.lead-identity{display:flex;align-items:center;gap:14px}
.lead-header h1{margin:1px 0 3px}
.lead-header p{margin:0;color:var(--muted)}
.eyebrow{font-size:10px;letter-spacing:1.2px;font-weight:800;color:#8188a8; text-transform:uppercase}
.lead-header-actions{display:flex;align-items:center;gap:8px}
.lead-workspace{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.7fr);gap:20px;align-items:stretch;margin-bottom:20px}
.lead-workspace > .card{margin-bottom:0}
.quick-card{min-height:430px}
.quick-label{font-size:10px;font-weight:900;letter-spacing:1px;color:#8188a8; text-transform:uppercase; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px}
.quick-hint{font-size:10.5px;font-weight:600;letter-spacing:0;text-transform:none;color:#a8adc4}
.field-hint{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-top:4px;line-height:1.4}

/* Quick Update groups its form into named sections (note, stage, follow-up,
   outcome) - tight spacing within a section, more air between sections, so
   the eye reads it as a few decisions rather than one dense block. */
.qu-section{display:grid;gap:8px}
.qu-section + .qu-section{margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
.stage-current-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

/* Self-contained quick-edit blocks in the Contact card sidebar (Assign &
   Priority, Master Notes) - .card has no default gap between children, so
   each block owns its own top margin and internal spacing rather than
   relying on ad-hoc negative margins that break once text wraps in this
   narrower column. */
.contact-quick-block{margin-top:18px; display:grid; gap:8px}
.contact-quick-block textarea{margin:0}

.stage-actions,.followup-actions{display:flex;flex-wrap:wrap;gap:6px}
.stage-btn{
  border:1px solid var(--line);background:rgba(255,255,255,.6);border-radius:9px;
  padding:7px 11px;font-weight:600;cursor:pointer; font-size:12.5px; color:var(--ink); transition:all .15s ease;
}
.stage-btn:hover{border-color:rgba(91,107,245,.4);background:#fff; transform:translateY(-1px)}
.stage-btn.success{border-color:rgba(14,164,114,.3);color:var(--good);background:var(--good-bg)}
.stage-btn.danger{border-color:rgba(224,69,90,.3);color:var(--danger);background:var(--danger-bg)}
/* .current marks whichever button matches the lead's actual stage right now -
   distinct from .success/.danger, which are permanent outcome-color hints and
   don't track current state on their own. */
.stage-btn.current{
  border-color:transparent; background:linear-gradient(135deg,var(--g1),var(--g2)); color:#fff;
  box-shadow:0 3px 10px rgba(91,107,245,.35);
}
.stage-btn.current.success{background:linear-gradient(135deg,var(--good),#12c48b); box-shadow:0 3px 10px rgba(14,164,114,.35)}
.stage-btn.current.danger{background:linear-gradient(135deg,var(--danger),#ff6b6b); box-shadow:0 3px 10px rgba(224,69,90,.35)}
.stage-btn.current:hover{transform:none}
.stage-check{font-size:14px!important; vertical-align:-3px; margin-right:1px}

.form-end{display:flex;gap:8px;align-items:end}
.contact-meta{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.contact-meta>div{background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:10px;padding:10px}
.contact-meta small,.contact-meta strong{display:block}
.contact-meta small{color:var(--muted);font-size:10px;margin-bottom:3px}
.wide{width:100%}

.action-details{border-top:1px solid var(--line);padding:8px 0}
.action-details:last-child{border-bottom:1px solid var(--line)}
.action-details summary{display:flex; align-items:center; gap:10px; padding:6px 2px}
.action-ic{
  width:28px;height:28px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  font-size:16px!important; flex:0 0 auto;
}
.action-chevron{margin-left:auto; color:var(--muted); font-size:19px!important; transition:transform .2s ease}
.action-details[open] .action-chevron{transform:rotate(180deg)}
.action-details[open] summary{margin-bottom:12px}
.one-col{grid-template-columns:1fr}
.upload-recording{background:rgba(255,255,255,.5);border:1px dashed rgba(30,35,60,.2);border-radius:12px;padding:12px;margin-bottom:14px}
.upload-recording summary{display:flex; align-items:center; gap:10px; font-size:13.5px}
.upload-recording summary::before{
  content:"upload"; font-family:"Material Symbols Rounded"; font-size:16px; font-weight:400;
  width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(109,91,255,.2), rgba(59,130,246,.15)); color:#4f5bd5; flex:0 0 auto;
}
.upload-recording summary::after{
  content:"expand_more"; font-family:"Material Symbols Rounded"; font-size:18px; margin-left:auto; color:var(--muted);
  transition:transform .2s ease;
}
.upload-recording[open] summary::after{transform:rotate(180deg)}
.upload-recording[open] summary{margin-bottom:11px}
.upload-form{align-items:end}

/* ---------------- calls / QC ---------------- */
.call-list{display:grid}
.call-row{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(260px,1.2fr) auto;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--line)}
.call-main strong,.call-main span{display:block}
.call-main span{color:var(--muted);font-size:12px;margin-top:3px}
.call-audio audio{width:100%;height:34px}
.call-qc{display:flex;gap:7px;align-items:center}

.qc-metrics{grid-template-columns:repeat(2,minmax(170px,240px));justify-content:start}
.call-library{display:grid;gap:11px}
.qc-call-card{padding:14px}
.qc-call-top,.qc-call-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}
.qc-call-top strong,.qc-call-top span{display:block}
.qc-call-top span,.qc-call-bottom span{color:var(--muted);font-size:12px;margin-top:3px}
.qc-call-card audio{width:100%;height:36px;margin:12px 0 8px}

.call-review-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:start;margin-bottom:20px}
.big-audio{width:100%;margin:18px 0}
.call-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:18px}
.call-facts>div{background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:10px;padding:10px}
.call-facts small,.call-facts strong{display:block}
.call-facts small{font-size:10px;color:var(--muted)}

.ai-title{display:flex;gap:10px;align-items:center;margin-bottom:16px}
.ai-title h2{margin-bottom:2px}
.ai-icon{
  width:40px;height:40px;border-radius:12px;color:#fff;display:grid;place-items:center;font-weight:800;
  background:linear-gradient(135deg,var(--g1),var(--g2) 60%,var(--g3)); box-shadow:0 6px 16px rgba(91,107,245,.35);
}
.big-score{font-size:54px;font-weight:800;letter-spacing:-2px;margin:18px 0 5px;color:var(--good)}
.big-score small{font-size:16px;letter-spacing:0;color:var(--muted); font-family:"Inter",sans-serif; font-weight:500}
.big-score.low{color:var(--danger)}
.big-score.high{color:var(--good)}
.ai-run{padding:13px 18px}

.processing-box,.error-box,.empty-mini{padding:13px;border-radius:12px;margin:15px 0}
.processing-box{background:rgba(91,107,245,.1);color:#3d4dc4}
.error-box{background:var(--danger-bg);color:var(--danger)}
.empty-mini{background:rgba(255,255,255,.5);color:var(--muted)}

.score-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.score-item>div:first-child{display:flex;justify-content:space-between;text-transform:capitalize;font-size:12px}
.bar{height:7px;background:rgba(30,35,60,.08);border-radius:99px;overflow:hidden;margin-top:5px}
.bar i{display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,var(--g1),var(--g2))}

.report-card{min-height:170px; padding:18px}
.report-card.good{border-left:3px solid var(--good)}
.report-card.warning{border-left:3px solid var(--amber)}
.report-card.danger{border-left:3px solid var(--danger)}
.report-list{padding-left:20px;margin:0}
.report-list li{margin:8px 0;line-height:1.5}
.coach-card{background:rgba(91,107,245,.06);border-color:rgba(91,107,245,.22)}

.transcript-card summary{font-size:16px}
.transcript-card[open] summary{margin-bottom:15px}
.transcript{
  white-space:pre-wrap;line-height:1.65;background:rgba(255,255,255,.55);
  border:1px solid var(--line); border-radius:12px;padding:17px;max-height:520px;overflow:auto;
}

.ai-training-note{display:flex;gap:10px;align-items:center;background:rgba(91,107,245,.08);border:1px solid rgba(91,107,245,.2);padding:13px 15px;border-radius:12px;margin-bottom:16px}
.ai-training-note span{color:#52627c}
.weight-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

.sticky-save{
  position:sticky;bottom:16px;color:#fff;border-radius:15px;padding:14px 18px;
  display:flex;justify-content:space-between;align-items:center;z-index:4;
  background:linear-gradient(120deg, rgba(26,22,50,.94), rgba(30,28,60,.94));
  backdrop-filter:blur(14px); box-shadow:0 12px 34px rgba(20,15,50,.28);
}
.sticky-save strong,.sticky-save span{display:block}
.sticky-save span{font-size:11px;color:#b9c2cf;margin-top:2px}

.activity-feed{max-height:550px;overflow:auto}

/* ---------------- whatsapp chat ---------------- */
.chat-thread{
  max-height:420px; overflow-y:auto; display:flex; flex-direction:column; gap:10px;
  padding:14px; margin:2px 0 14px; border-radius:14px;
  background:rgba(255,255,255,.4); border:1px solid var(--line);
}
.chat-bubble{max-width:72%; padding:10px 14px; border-radius:16px; font-size:13.5px; line-height:1.5; word-wrap:break-word}
.chat-bubble.in{align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px; color:var(--ink)}
.chat-bubble.out{align-self:flex-end; background:linear-gradient(135deg,var(--g1),var(--g2)); color:#fff; border-bottom-right-radius:4px}
.chat-body{white-space:pre-wrap}
.chat-meta{font-size:10.5px; margin-top:5px; opacity:.75}
.chat-bubble.in .chat-meta{color:var(--muted)}
.chat-bubble.out .chat-meta{color:rgba(255,255,255,.85)}
.chat-composer{display:flex; gap:10px; align-items:flex-end}
.chat-composer textarea{flex:1; resize:none; min-height:44px}
.chat-composer .btn{flex:0 0 auto}

/* ---------------- followups ---------------- */
.followup-list{display:grid}
.followup-row{display:flex;align-items:center;gap:10px;padding:11px 4px;border-top:1px solid var(--line)}
.followup-row:first-child{border-top:0}
.due-time{font-size:12px;font-weight:700;color:#586474}

/* ---------------- scrollbar polish ---------------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(30,35,60,.18);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(30,35,60,.3)}

/* ---------------- floating dialer widget ---------------- */
.dialer-fab{
  position:fixed; right:24px; bottom:24px; z-index:80; width:56px; height:56px; border-radius:50%;
  border:none; cursor:pointer; color:#fff; background:linear-gradient(135deg,var(--g1),var(--g2));
  box-shadow:0 10px 26px rgba(91,107,245,.45); display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease;
}
.dialer-fab:hover{transform:scale(1.06)}
.dialer-fab .material-symbols-rounded{font-size:26px!important}
.dialer-widget{
  position:fixed; right:24px; bottom:92px; z-index:81; width:252px;
  background:var(--glass-strong); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.dialer-widget-header{
  display:flex; align-items:center; gap:8px; padding:10px 10px 10px 8px;
  background:linear-gradient(135deg,rgba(109,91,255,.14),rgba(59,130,246,.10));
  border-bottom:1px solid var(--line);
  cursor:grab; touch-action:none; user-select:none;
}
.dialer-widget-header:active{cursor:grabbing}
.dialer-widget-header .drag-handle{color:#9298b8; font-size:17px!important}
.dialer-widget-header-icon{
  width:22px; height:22px; border-radius:7px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--g1),var(--g2)); color:#fff;
}
.dialer-widget-header-icon .material-symbols-rounded{font-size:13px!important}
.dialer-widget-header strong{font-size:12.5px; flex:1; color:var(--ink)}
.dialer-widget-close{
  border:none; background:transparent; cursor:pointer; color:var(--muted); display:flex;
  align-items:center; justify-content:center; width:24px; height:24px; border-radius:8px; flex:0 0 auto;
}
.dialer-widget-close:hover{background:rgba(30,35,60,.08); color:var(--ink)}
.dialer-widget-body{padding:14px; display:grid; gap:12px; justify-items:center}
.dialer-widget-body #dialerKeypadInput{
  width:100%; font-size:14px; font-family:ui-monospace,monospace; text-align:center; padding:9px;
  letter-spacing:.3px;
}
.dialer-widget-body .keypad-grid{display:grid; grid-template-columns:repeat(3,38px); gap:9px; justify-content:center}
.dialer-widget-body .keypad-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.75);
  box-shadow:0 1px 2px rgba(30,35,60,.05);
  font-size:13.5px; font-weight:700; color:var(--ink); cursor:pointer;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.dialer-widget-body .keypad-btn:hover{background:#fff; border-color:rgba(91,107,245,.35); box-shadow:0 3px 10px rgba(91,107,245,.16); transform:translateY(-1px)}
.dialer-widget-body .keypad-btn:active{transform:translateY(0) scale(.94); box-shadow:inset 0 1px 4px rgba(30,35,60,.12)}
.dialer-widget-body .btn.call.wide{width:100%; padding:10px; font-size:13px}
.dialer-widget-controls{
  width:100%; margin-top:2px; padding-top:12px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.dialer-widget-controls[hidden]{display:none}
.status-pill[hidden]{display:none}
.dialer-widget-controls small{display:block; color:var(--muted); font-family:ui-monospace,monospace; margin-top:2px}
.dialer-widget-controls .call-controls-actions{display:flex; gap:8px}
.dialer-widget-controls .btn.small{padding:6px 10px; font-size:11px}

/* ---------------- row action menu (leads table) ---------------- */
.row-actions{position:relative; text-align:right; white-space:nowrap}
.row-menu{position:relative; display:inline-block}
.row-menu-btn{width:30px; height:30px; padding:0; border-radius:9px; display:inline-flex; align-items:center; justify-content:center}
.row-menu-btn .material-symbols-rounded{font-size:19px!important}
.row-menu-list{
  position:fixed; z-index:120; min-width:168px;
  background:var(--glass-strong); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--glass-border); border-radius:12px; box-shadow:var(--shadow-lg);
  padding:6px; display:grid; gap:2px;
}
.row-menu-list[hidden]{display:none}
.row-menu-item{
  display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; border:none; background:transparent;
  border-radius:8px; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; text-align:left;
}
.row-menu-item .material-symbols-rounded{font-size:17px!important; color:var(--muted)}
.row-menu-item:hover{background:rgba(91,107,245,.10)}
.row-menu-item[data-action="whatsapp"] .material-symbols-rounded{color:#25D366}

/* ---------------- toast ---------------- */
.toast-wrap{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:200; display:grid; gap:8px; justify-items:center}
.toast{
  background:rgba(28,32,52,.92); color:#fff; font-size:12.5px; font-weight:600; padding:10px 18px; border-radius:999px;
  box-shadow:var(--shadow-lg); opacity:1; transition:opacity .2s ease, transform .2s ease;
}
.toast-error{background:linear-gradient(135deg,#ef4444,#dc2626)}
.toast-out{opacity:0; transform:translateY(6px)}

/* ---------------- floating call screen ---------------- */
.call-screen{
  position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:110; width:280px;
}
.call-screen[hidden]{display:none}
.call-screen-panel{
  position:relative; border-radius:26px; padding:26px 20px 22px; text-align:center; color:#fff;
  background:linear-gradient(160deg,#1b1f3a,#2b1f52 55%,#3a2166); box-shadow:0 24px 60px rgba(20,10,50,.45);
  border:1px solid rgba(255,255,255,.08);
}
.call-screen-minimize{
  position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:8px; border:none; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center;
}
.call-screen-minimize:hover{background:rgba(255,255,255,.22)}
.call-screen-minimize .material-symbols-rounded{font-size:16px!important}
.call-screen-status{font-size:12px; font-weight:600; letter-spacing:.4px; opacity:.75; text-transform:uppercase}
.call-screen-avatar{
  width:78px; height:78px; margin:16px auto 12px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:800; background:linear-gradient(135deg,var(--g1),var(--g2)); color:#fff; position:relative;
}
.call-screen.ringing .call-screen-avatar{animation:call-ring-pulse 1.4s ease-out infinite}
@keyframes call-ring-pulse{
  0%{box-shadow:0 0 0 0 rgba(122,140,255,.55)}
  100%{box-shadow:0 0 0 22px rgba(122,140,255,0)}
}
.call-screen-name{font-size:17px; font-weight:700}
.call-screen-timer{margin-top:4px; font-size:12.5px; font-family:ui-monospace,monospace; opacity:.8}
.call-screen-timer[hidden]{display:none}
.call-screen-controls{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:22px}
.call-screen-btn{
  display:flex; flex-direction:column; align-items:center; gap:5px; border:none; cursor:pointer; background:transparent; color:#fff;
}
.call-screen-btn .material-symbols-rounded{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:23px!important;
  background:rgba(255,255,255,.14); transition:background .15s ease, transform .1s ease;
}
.call-screen-btn:hover .material-symbols-rounded{background:rgba(255,255,255,.24)}
.call-screen-btn:active .material-symbols-rounded{transform:scale(.94)}
.call-screen-btn small{font-size:11px; opacity:.85; font-weight:600}
.call-screen-btn.active .material-symbols-rounded{background:#fff; color:#1b1f3a}
.call-screen-btn.end .material-symbols-rounded{background:linear-gradient(135deg,#ef4444,#dc2626)}
.call-screen-btn.end:hover .material-symbols-rounded{background:linear-gradient(135deg,#f45252,#e23c3c)}
.call-screen-bubble{
  position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:110; border:none; cursor:pointer;
  display:flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; color:#fff;
  background:linear-gradient(135deg,#1b1f3a,#3a2166); box-shadow:0 14px 34px rgba(20,10,50,.4);
}
.call-screen-bubble[hidden]{display:none}
.call-screen-bubble .material-symbols-rounded{font-size:16px!important; color:#4ade80}
.call-screen-bubble small{font-family:ui-monospace,monospace; font-size:12px}

/* ---------------- floating whatsapp widget ---------------- */
.wa-widget{
  position:fixed; left:24px; bottom:24px; z-index:81; width:300px; max-height:70vh;
  background:var(--glass-strong); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  overflow:hidden; display:flex; flex-direction:column;
}
.wa-widget[hidden]{display:none}
.wa-widget-header{
  display:flex; align-items:center; gap:8px; padding:11px 10px 11px 8px; cursor:grab; user-select:none; touch-action:none;
  background:linear-gradient(135deg,#075E54,#128C7E); color:#fff;
}
.wa-widget-header:active{cursor:grabbing}
.wa-drag-handle{color:rgba(255,255,255,.65); font-size:17px!important}
.wa-widget-header-icon{
  width:26px; height:26px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.18); color:#fff;
}
.wa-widget-header-icon .material-symbols-rounded{font-size:15px!important}
.wa-widget-header-info{flex:1; min-width:0; display:grid}
.wa-widget-header-info strong{font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wa-widget-header-info small{font-size:10.5px; opacity:.85}
.wa-widget-btn{
  border:none; background:rgba(255,255,255,.14); cursor:pointer; color:#fff; display:flex;
  align-items:center; justify-content:center; width:24px; height:24px; border-radius:8px; flex:0 0 auto;
}
.wa-widget-btn:hover{background:rgba(255,255,255,.26)}
.wa-widget-btn .material-symbols-rounded{font-size:15px!important}
.wa-widget-body{display:flex; flex-direction:column; padding:12px; gap:10px; min-height:0}
.wa-widget-body[hidden]{display:none}
.wa-thread{
  max-height:320px; margin:0; background:
    repeating-linear-gradient(135deg, rgba(37,211,102,.035) 0 40px, rgba(37,211,102,.07) 40px 80px), #ece5dd;
  border-color:var(--glass-border);
}
.wa-thread .chat-bubble.out{background:#dcf8c6; color:#111b21}
.wa-thread .chat-bubble.out .chat-meta{color:#4a5b53}
.wa-thread .chat-bubble.in{background:#fff}
.wa-composer{align-items:center; gap:8px}
.wa-composer textarea{min-height:38px; max-height:90px; border-radius:20px; padding:9px 16px; font-size:13px}
.wa-send-btn{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:none; cursor:pointer; color:#fff;
  background:#25D366; display:flex; align-items:center; justify-content:center;
}
.wa-send-btn .material-symbols-rounded{font-size:18px!important}
.wa-send-btn:hover{background:#20bd5a}

/* ---------------- responsive ---------------- */
@media(max-width:1100px){
  .metrics{grid-template-columns:repeat(3,1fr)}
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .lead-workspace,.call-review-grid{grid-template-columns:minmax(0,1fr)}
  .classic-metrics{grid-template-columns:repeat(2,1fr)}
  .call-row{grid-template-columns:1fr}
  .weight-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------------- employee analytics: kpi tiles, funnel, progress bars, day chart ---------------- */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:20px}
.kpi-tile{
  background:var(--glass-strong); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border); border-radius:var(--radius-sm); box-shadow:var(--shadow);
  padding:14px 16px; display:flex; flex-direction:column; gap:2px;
}
.kpi-label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--muted)}
.kpi-value{font-size:24px; font-weight:800; color:var(--ink); line-height:1.3}
.kpi-tile small{font-size:12px; font-weight:700; color:var(--good)}

.funnel{display:grid; gap:10px}
.funnel-row{display:grid; grid-template-columns:110px 1fr 44px; align-items:center; gap:10px}
.funnel-label{font-size:12.5px; font-weight:700; color:var(--ink)}
.funnel-track{height:22px; border-radius:8px; background:rgba(30,35,60,.06); overflow:hidden}
.funnel-fill{height:100%; border-radius:8px; background:linear-gradient(90deg,var(--g1),var(--g2)); transition:width .3s ease; min-width:2px}
.funnel-count{font-size:12.5px; font-weight:800; color:var(--ink); text-align:right}

.progress-stack{display:grid; gap:14px}
.progress-row{display:grid; grid-template-columns:110px 1fr 48px; align-items:center; gap:10px}
.progress-label{font-size:12.5px; font-weight:700; color:var(--ink)}
.progress-track{height:10px; border-radius:999px; background:rgba(30,35,60,.07); overflow:hidden}
.progress-fill{height:100%; border-radius:999px; background:linear-gradient(90deg,var(--g1),var(--g2)); min-width:2px}
.progress-fill.good{background:linear-gradient(90deg,#0ea472,#34d399)}
.progress-fill.gold{background:linear-gradient(90deg,#c07a12,#f5b342)}
.progress-fill.low{background:linear-gradient(90deg,#e0455a,#f2717f)}
.progress-pct{font-size:12px; font-weight:800; color:var(--ink); text-align:right}

.daychart{display:flex; align-items:flex-end; gap:6px; height:160px; padding-top:8px; overflow-x:auto}
.daychart-col{display:flex; flex-direction:column; align-items:center; gap:4px; flex:1 0 26px; min-width:26px; height:100%}
.daychart-bar-wrap{flex:1; display:flex; align-items:flex-end; width:100%}
.daychart-bar{width:100%; min-height:3px; border-radius:5px 5px 0 0; background:linear-gradient(180deg,var(--g2),var(--g1))}
.daychart-count{font-size:10.5px; font-weight:700; color:var(--ink)}
.daychart-date{font-size:9.5px; color:var(--muted); white-space:nowrap}

@media(max-width:760px){
  .funnel-row,.progress-row{grid-template-columns:88px 1fr 38px}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .app-frame{padding:0}
  .app-shell{flex-direction:column; border-radius:0; height:100vh; overflow:hidden}
  .sidebar{
    position:fixed; inset:0 auto 0 0; width:78vw; max-width:300px; z-index:40;
    border-right:0; border-radius:0 20px 20px 0;
    transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:0 20px 60px rgba(30,20,70,.25);
  }
  html.sidebar-open .sidebar{transform:translateX(0)}
  .sidebar-backdrop{
    position:fixed; inset:0; background:rgba(20,24,38,.22); backdrop-filter:blur(1px); z-index:35;
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  html.sidebar-open .sidebar-backdrop{opacity:1; pointer-events:auto}
  .sidebar nav{grid-template-columns:1fr; display:grid}
  .content{padding:18px; width:100%}
  .grid-2{grid-template-columns:1fr}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .classic-metrics{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .span-2{grid-column:span 1}
  .page-head,.lead-header{align-items:flex-start;flex-direction:column}
  .inline{flex-direction:column}
  .info-grid{grid-template-columns:repeat(2,1fr)}
  .integration-summary{grid-template-columns:1fr}
  .tab-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -18px 20px;padding:0 18px 4px}
  .copy-row,.secret-row{flex-direction:column}
  .integration-title{flex-direction:column}
  .integration-mini{align-items:flex-start}
  .contact-meta,.call-facts,.score-grid{grid-template-columns:1fr 1fr}
  .sticky-save{position:static;align-items:flex-start;gap:12px;flex-direction:column}
  .weight-grid{grid-template-columns:1fr}
  .qc-call-top,.qc-call-bottom,.followup-row{align-items:flex-start;flex-direction:column}
  .due-time{order:3}
  .dialer-widget{width:calc(100vw - 32px); right:16px; left:16px!important; bottom:82px}
  .dialer-fab{right:16px; bottom:16px}
  .dialer-widget-body .keypad-grid{grid-template-columns:repeat(3,52px); gap:12px}
  .dialer-widget-body .keypad-btn{width:52px; height:52px; font-size:16px}
  .wa-widget{width:calc(100vw - 32px); left:16px; right:16px; bottom:16px; max-height:75vh}
  .call-screen,.call-screen-bubble{left:16px; right:16px; transform:none; width:auto}
  .topbar-search{order:4; flex-basis:100%; max-width:none}
  .topbar-add-label{display:none}
  .topbar-add{width:36px; height:36px; padding:0; border-radius:11px}
  .topbar-add .btn-ic{font-size:19px!important}
}

/* Agency workflow upgrades */
.pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;flex-wrap:wrap}
.workspace-context{font-size:12px;color:#4b5563;margin:0 0 16px}
.permission-fields{border:0;margin:0;padding:0;min-width:0}
.permission-fields:disabled{opacity:.7}
.notice{padding:12px;border-radius:10px;background:#eef2ff;color:#343b65}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #304edd;outline-offset:3px}
.agency-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.kpi-value{font-variant-numeric:tabular-nums}
.admin-navigation summary{cursor:pointer;min-height:32px}.admin-navigation .nav-label{list-style:revert}
.advanced-filters summary,.bulk-actions summary{cursor:pointer;padding:10px;color:#384270;font-weight:600}.advanced-filters .stack{padding:10px;min-width:200px}.bulk-actions{margin:0 0 12px}
form.filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}form.filters label{min-width:160px}form.filters .btn{align-self:flex-end}
.agency-grid .form-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.agency-grid .card dl{display:grid;grid-template-columns:minmax(160px,1fr) 1fr;gap:10px}.agency-grid .card dd{margin:0;font-weight:600}
@media(max-width:640px){.agency-grid .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.agency-grid .card dl{grid-template-columns:1fr}.agency-grid .card dd{margin-bottom:10px}}
@media(max-width:640px){
  .mobile-leads,.mobile-leads tbody{display:block;width:100%;min-width:0}
  .mobile-leads thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .mobile-leads tr{display:grid;grid-template-columns:1fr;border:1px solid #dfe3f0;border-radius:14px;margin:12px 0;padding:10px}
  .mobile-leads td{display:flex;justify-content:space-between;align-items:center;gap:10px;border:0;padding:8px;white-space:normal}
  .mobile-leads td[data-label]::before{content:attr(data-label);font-weight:600;font-size:12px;color:#5b6476}
  .mobile-leads td input,.mobile-leads td select{max-width:210px;width:100%;min-width:0}
  .mobile-leads td input[type=checkbox]{width:20px;min-height:20px}
  .agency-grid{grid-template-columns:minmax(0,1fr)}
}
@media print{.sidebar,.topbar,.dialer-fab,.actions,.filters,.workspace-context{display:none!important}.content,.content-inner,.app-shell,.app-frame{margin:0!important;padding:0!important;display:block!important;width:100%!important}.card{break-inside:avoid;box-shadow:none;background:white;border:1px solid #ddd}.agency-grid{grid-template-columns:1fr 1fr}body{background:white}}
@media(max-width:760px){.btn{min-height:40px}.classic-table .stage-select,.classic-table .followup-input{min-height:40px}.pagination{align-items:flex-start}.lead-workspace{display:flex;flex-direction:column}.contact-card{order:-1}.workspace-context{font-size:12px}.table-wrap{scrollbar-width:auto}}