/* ═══════════════════════════════════════════════════════
   AGS CRM v3 — Design System
   Fonts: Poppins (display) + Inter (body)
   ═══════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Night Theme (default) ───────────────────────────────── */
:root{
  --bg0:#08090f;--bg1:#0d0f1c;--bg2:#111320;--bg3:#161828;--bg4:#1c1f35;
  --border:#20233a;--borderl:#2a2e50;
  --t1:#e8eaff;--t2:#8e97c0;--t3:#4d5470;
  --accent:#f5a623;--adim:rgba(245,166,35,.12);--aglow:rgba(245,166,35,.3);
  --green:#22c55e;--gdim:rgba(34,197,94,.11);
  --red:#ef4444;--rdim:rgba(239,68,68,.11);
  --blue:#3b82f6;--bdim:rgba(59,130,246,.11);
  --purple:#a855f7;--pdim:rgba(168,85,247,.11);
  --teal:#14b8a6;--tdim:rgba(20,184,166,.11);
  --sw:242px;--th:58px;
  --r:9px;--rl:13px;
  --shadow:0 4px 28px rgba(0,0,0,.55);
  --tr:.17s cubic-bezier(.4,0,.2,1);
  --fd:'Poppins',sans-serif;
  --fb:'Inter',sans-serif;
}

/* ── Day Theme ───────────────────────────────────────────── */
[data-theme="day"]{
  --bg0:#f0f2f9;--bg1:#ffffff;--bg2:#f7f8fc;--bg3:#eceef6;--bg4:#e2e5f0;
  --border:#d6d9ea;--borderl:#c5c9de;
  --t1:#111327;--t2:#424769;--t3:#8890b0;
  --accent:#d4860d;--adim:rgba(212,134,13,.09);--aglow:rgba(212,134,13,.22);
  --green:#16a34a;--gdim:rgba(22,163,74,.09);
  --red:#dc2626;--rdim:rgba(220,38,38,.09);
  --blue:#2563eb;--bdim:rgba(37,99,235,.09);
  --purple:#7c3aed;--pdim:rgba(124,58,237,.09);
  --teal:#0d9488;--tdim:rgba(13,148,136,.09);
  --shadow:0 4px 24px rgba(0,0,0,.1);
}

/* ── Base ────────────────────────────────────────────────── */
html{font-size:14px;scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--bg0);color:var(--t1);line-height:1.6;overflow-x:hidden;transition:background .25s,color .25s}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--borderl);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--t3)}
h1,h2,h3,h4{font-family:var(--fd);font-weight:700;line-height:1.25;color:var(--t1)}
p{color:var(--t2)}
small,.sm{font-size:.75rem;color:var(--t3)}
.muted{color:var(--t3)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
strong{font-weight:600;color:var(--t1)}
.tr{color:var(--red)!important}
.tg{color:var(--green)!important}
.ta{color:var(--accent)!important}
.tb{color:var(--blue)!important}

/* ── Layout ──────────────────────────────────────────────── */
.app{display:flex;height:100vh;overflow:hidden}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.content{flex:1;overflow-y:auto;padding:22px 24px;background:var(--bg0)}

/* ── Login Page ──────────────────────────────────────────── */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg0);position:relative;overflow:hidden}
.login-grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:46px 46px;opacity:.35}
.login-orb{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none}
.login-orb-1{width:480px;height:480px;background:var(--accent);top:-160px;left:-160px;opacity:.10;animation:pulse 7s ease-in-out infinite}
.login-orb-2{width:380px;height:380px;background:var(--blue);bottom:-100px;right:-100px;opacity:.08;animation:pulse 7s ease-in-out infinite 3.5s}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.login-card{position:relative;z-index:1;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:38px;width:100%;max-width:420px;box-shadow:var(--shadow);animation:slideUp .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes slideUp{from{opacity:0;transform:translateY(22px) scale(.97)}}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.login-brand strong{font-family:var(--fd);font-size:.95rem;display:block}
.login-brand small{display:block;color:var(--t3);font-size:.72rem}
.login-title{font-size:1.85rem;margin-bottom:4px}
.login-sub{color:var(--t3);margin-bottom:28px;font-size:.85rem}
.login-form{display:flex;flex-direction:column;gap:14px}
.login-err{background:var(--rdim);border:1px solid var(--red);color:var(--red);padding:10px 13px;border-radius:7px;font-size:.8rem;display:none}
.login-footer{margin-top:20px;text-align:center;font-size:.74rem;color:var(--t3)}

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar{width:var(--sw);background:var(--bg1);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;z-index:100;transition:transform var(--tr),background .25s,border-color .25s}
.sbrand{display:flex;align-items:center;gap:10px;padding:17px 16px 14px;border-bottom:1px solid var(--border)}
.sbrand strong{font-family:var(--fd);font-size:.92rem;display:block;line-height:1.3}
.sbrand small{color:var(--t3);font-size:.68rem}
.bmark{background:var(--accent);color:#000;font-family:var(--fd);font-weight:800;font-size:.8rem;padding:5px 8px;border-radius:6px;flex-shrink:0;letter-spacing:.03em}
.snav{flex:1;padding:8px 0}
.slabel{font-size:.6rem;font-weight:700;letter-spacing:.12em;color:var(--t3);padding:10px 16px 2px;text-transform:uppercase}
.ni{display:flex;align-items:center;gap:9px;padding:8px 16px;cursor:pointer;color:var(--t2);font-size:.81rem;font-weight:500;transition:var(--tr);position:relative;text-decoration:none;border-radius:0;border:none;background:none;width:100%;text-align:left}
.ni svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ni:hover,.ni:focus{color:var(--t1);background:var(--bg3);text-decoration:none}
.ni.active{color:var(--accent);background:var(--adim)}
.ni.active::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--accent);border-radius:0 3px 3px 0}
.nbadge{margin-left:auto;background:var(--accent);color:#000;font-size:.6rem;font-weight:700;padding:1px 6px;border-radius:10px;font-family:var(--fd)}
.suser{padding:12px 16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:9px}
.suser strong{display:block;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suser small{color:var(--t3);font-size:.68rem}

/* ── Topbar ──────────────────────────────────────────────── */
.topbar{height:var(--th);background:var(--bg1);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 22px;flex-shrink:0;gap:14px;transition:background .25s,border-color .25s}
.tbl{display:flex;align-items:center;gap:13px}
.tbr{display:flex;align-items:center;gap:9px}
.stoggle,.ibtn{background:none;border:1px solid var(--border);border-radius:7px;padding:7px;cursor:pointer;color:var(--t2);transition:var(--tr);display:inline-flex;align-items:center;justify-content:center}
.stoggle:hover,.ibtn:hover{border-color:var(--borderl);color:var(--t1);background:var(--bg3)}
.stoggle svg,.ibtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tkicker{font-size:.64rem;color:var(--t3);text-transform:uppercase;letter-spacing:.12em;font-weight:600;font-family:var(--fd)}
.ttitle{font-size:1.05rem;font-family:var(--fd);font-weight:700}
.tuser{display:flex;align-items:center;gap:9px}
.tuser strong{font-size:.8rem}
.swrap{display:flex;align-items:center;gap:7px;background:var(--bg3);border:1px solid var(--border);border-radius:7px;padding:0 10px;transition:border-color var(--tr)}
.swrap:focus-within{border-color:var(--accent)}
.swrap svg{width:13px;height:13px;stroke:var(--t3);fill:none;stroke-width:2;flex-shrink:0}
.swrap input{background:none;border:none;outline:none;color:var(--t1);font-family:var(--fb);font-size:.8rem;width:185px;padding:7px 0}
.swrap input::placeholder{color:var(--t3)}

/* ── Buttons ──────────────────────────────────────────────── */
.bp{background:var(--accent);color:#000;border:none;border-radius:7px;padding:8px 16px;font-family:var(--fd);font-weight:700;font-size:.8rem;cursor:pointer;transition:var(--tr);display:inline-flex;align-items:center;gap:6px;letter-spacing:.02em;white-space:nowrap}
.bp:hover{background:#fbb83a;transform:translateY(-1px);box-shadow:0 4px 18px var(--aglow)}
.bp:active{transform:translateY(0)}
.bp.full{width:100%;justify-content:center}
.bg{background:none;border:1px solid var(--borderl);color:var(--t2);border-radius:7px;padding:7px 14px;font-family:var(--fb);font-size:.8rem;cursor:pointer;transition:var(--tr);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.bg:hover{border-color:var(--t2);color:var(--t1)}
.bd{background:var(--rdim);border:1px solid var(--red);color:var(--red);border-radius:7px;padding:7px 14px;font-size:.8rem;cursor:pointer;font-family:var(--fb);display:inline-flex;align-items:center;gap:6px;transition:var(--tr);white-space:nowrap}
.bd:hover{background:rgba(239,68,68,.22)}
.bsm{padding:5px 11px;font-size:.74rem;border-radius:6px}
button svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Forms ──────────────────────────────────────────────── */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fgrid .s2{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:5px;font-size:.78rem;color:var(--t2);font-weight:500}
input,select,textarea{background:var(--bg3);border:1px solid var(--border);border-radius:7px;padding:9px 12px;color:var(--t1);font-family:var(--fb);font-size:.82rem;outline:none;transition:border-color var(--tr),box-shadow var(--tr);width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--adim)}
select option{background:var(--bg3);color:var(--t1)}
textarea{resize:vertical;min-height:78px}
input::placeholder,textarea::placeholder{color:var(--t3)}
.factions{display:flex;justify-content:flex-end;gap:9px;padding-top:10px;border-top:1px solid var(--border);margin-top:6px}

/* ── Panels / Cards ───────────────────────────────────────── */
.panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;transition:border-color var(--tr)}
.panel:hover{border-color:var(--borderl)}
.ph{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 18px 13px;border-bottom:1px solid var(--border);gap:10px}
.ph h2{font-size:.92rem;font-family:var(--fd)}
.ph p{color:var(--t3);font-size:.74rem;margin-top:2px}
.pb{padding:18px}

/* ── Metric cards ──────────────────────────────────────────── */
.mrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.mc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:16px 18px;position:relative;overflow:hidden;animation:fadeIn .4s ease both}
.mc::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)}
.mc.grn::after{background:var(--green)}
.mc.red::after{background:var(--red)}
.mc.blu::after{background:var(--blue)}
.mc.pur::after{background:var(--purple)}
.mlabel{font-size:.65rem;color:var(--t3);text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:8px;font-family:var(--fd)}
.mval{font-family:var(--fd);font-size:1.7rem;font-weight:800;line-height:1;color:var(--t1)}
.msub{font-size:.72rem;color:var(--t3);margin-top:5px}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}}

/* ── Grids ───────────────────────────────────────────────── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* ── Table ───────────────────────────────────────────────── */
.twrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{text-align:left;padding:9px 14px;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);border-bottom:1px solid var(--border);white-space:nowrap;font-family:var(--fd)}
tbody tr{border-bottom:1px solid var(--border);transition:background var(--tr)}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--bg3)}
tbody td{padding:10px 14px;font-size:.8rem;vertical-align:middle}
tbody td strong{color:var(--t1)}
tbody td p,tbody td small{color:var(--t3);font-size:.72rem;margin-top:1px}
.tempty{text-align:center;padding:42px;color:var(--t3);font-size:.85rem}
.tempty svg{width:36px;height:36px;stroke:var(--t3);fill:none;stroke-width:1.5;margin:0 auto 12px;display:block}

/* ── Badges ────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:.67rem;font-weight:600;white-space:nowrap;font-family:var(--fd)}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.bNew{background:var(--bdim);color:var(--blue)}
.bQualified{background:var(--pdim);color:var(--purple)}
.bProposal{background:var(--adim);color:var(--accent)}
.bNegotiation{background:var(--tdim);color:var(--teal)}
.bWon{background:var(--gdim);color:var(--green)}
.bLost{background:rgba(90,97,127,.15);color:var(--t3)}
.bOpen{background:var(--bdim);color:var(--blue)}
.bContacted{background:var(--pdim);color:var(--purple)}
.bFollowup{background:var(--adim);color:var(--accent)}
.bClosed{background:var(--gdim);color:var(--green)}
.bJunk{background:rgba(90,97,127,.15);color:var(--t3)}
.bActive{background:var(--gdim);color:var(--green)}
.bInactive{background:rgba(90,97,127,.15);color:var(--t3)}
.bHigh{background:var(--rdim);color:var(--red)}
.bMedium{background:var(--adim);color:var(--accent)}
.bLow{background:var(--gdim);color:var(--green)}

/* role badges */
.role-badge{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.05em;padding:2px 7px;border-radius:5px;text-transform:uppercase;font-family:var(--fd)}
.radmin{background:var(--adim);color:var(--accent);border:1px solid var(--aglow)}
.rmanager{background:var(--pdim);color:var(--purple);border:1px solid rgba(168,85,247,.25)}
.rteamleader{background:var(--bdim);color:var(--blue);border:1px solid rgba(59,130,246,.25)}
.rtelecaller{background:var(--gdim);color:var(--green);border:1px solid rgba(34,197,94,.25)}
.ragent{background:var(--tdim);color:var(--teal);border:1px solid rgba(20,184,166,.25)}

/* ── Avatar ──────────────────────────────────────────────── */
.av{display:flex;align-items:center;justify-content:center;background:var(--bg4);color:var(--accent);font-family:var(--fd);font-weight:700;border-radius:8px;flex-shrink:0}

/* ── Chip / Tag ───────────────────────────────────────────── */
.chip{background:var(--bg4);color:var(--t3);padding:2px 8px;border-radius:4px;font-size:.67rem;font-weight:500;border:1px solid var(--border)}

/* ── Toolbar ─────────────────────────────────────────────── */
.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.tbl2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tbr2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fsel{background:var(--bg2);border:1px solid var(--border);color:var(--t2);border-radius:7px;padding:7px 11px;font-size:.78rem;font-family:var(--fb);cursor:pointer;transition:border-color var(--tr)}
.fsel:focus{outline:none;border-color:var(--accent)}

/* ── Pipeline Kanban ──────────────────────────────────────── */
.kanban{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:12px;margin-bottom:18px}
.kcol{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;min-height:180px;transition:border-color var(--tr)}
.kcol.dover{border-color:var(--accent);background:var(--adim)}
.khead{padding:11px 13px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.khead h3{font-size:.8rem;font-family:var(--fd)}
.kcount{font-size:.68rem;background:var(--bg4);padding:2px 8px;border-radius:10px;color:var(--t3);font-family:var(--fd)}
.kcards{padding:8px;display:flex;flex-direction:column;gap:7px;min-height:70px}
.kcard{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:11px;cursor:grab;transition:var(--tr)}
.kcard:hover{border-color:var(--borderl);transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.35)}
.kcard.dragging{opacity:.4}
.ksbar{height:2px;border-radius:1px;margin-bottom:8px}
.sNew .ksbar{background:var(--blue)}
.sQualified .ksbar{background:var(--purple)}
.sProposal .ksbar{background:var(--accent)}
.sNegotiation .ksbar{background:var(--teal)}
.sWon .ksbar{background:var(--green)}
.sLost .ksbar{background:var(--t3)}
.kco{font-weight:600;font-size:.8rem;color:var(--t1)}
.kct{font-size:.71rem;color:var(--t3)}
.kval{font-family:var(--fd);font-weight:700;font-size:.84rem;color:var(--accent);margin-top:6px}
.kag{font-size:.67rem;color:var(--t3);margin-top:3px}

/* ── Funnel ───────────────────────────────────────────────── */
.funnel{display:flex;flex-direction:column;gap:6px;padding:14px 18px}
.fstage{display:flex;align-items:center;gap:10px}
.fbw{flex:1;background:var(--bg4);border-radius:3px;overflow:hidden;height:26px}
.fb{height:100%;display:flex;align-items:center;padding:0 9px;font-size:.7rem;font-weight:600;border-radius:3px;transition:width .6s ease;white-space:nowrap;min-width:30px;font-family:var(--fd)}
.flabel{font-size:.76rem;min-width:90px;color:var(--t2);font-weight:500}
.fcount{font-size:.7rem;color:var(--t3);min-width:38px;text-align:right;font-family:var(--fd)}

/* ── Activity feed ──────────────────────────────────────── */
.afeed{display:flex;flex-direction:column}
.aitem{display:flex;gap:10px;padding:11px 18px;border-bottom:1px solid var(--border);align-items:flex-start}
.aitem:last-child{border-bottom:none}
.adot{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:5px;flex-shrink:0}
.atext{font-size:.8rem;line-height:1.5;flex:1;color:var(--t2)}
.atext strong{color:var(--t1)}
.atime{font-size:.7rem;color:var(--t3);white-space:nowrap}

/* ── Progress bars ──────────────────────────────────────── */
.pbar{height:5px;background:var(--bg4);border-radius:3px;overflow:hidden}
.pfill{height:100%;border-radius:3px;background:var(--accent);transition:width .5s ease}
.pfill.grn{background:var(--green)}
.pfill.blu{background:var(--blue)}
.pfill.red{background:var(--red)}

/* ── Bar chart ──────────────────────────────────────────── */
.barchart{display:flex;flex-direction:column;gap:9px;padding:14px 18px}
.barrow{display:flex;align-items:center;gap:10px}
.barlabel{font-size:.74rem;min-width:130px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bartrack{flex:1;background:var(--bg4);border-radius:2px;height:7px;overflow:hidden}
.barfill{height:100%;border-radius:2px;background:var(--accent);transition:width .6s ease}
.barval{font-size:.71rem;font-weight:600;min-width:56px;text-align:right;color:var(--t1);font-family:var(--fd)}

/* ── Agent bars ─────────────────────────────────────────── */
.agrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.agrow:last-child{border-bottom:none}
.agname{min-width:120px;font-size:.8rem;font-weight:500}
.agbw{flex:1}
.agbar{height:5px;background:var(--bg4);border-radius:3px;overflow:hidden}
.agfill{height:100%;border-radius:3px;background:var(--accent);transition:width .6s ease}
.agpct{font-size:.7rem;font-weight:600;min-width:52px;text-align:right;color:var(--t2);font-family:var(--fd)}

/* ── Modal ──────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeOverlay .2s ease}
@keyframes fadeOverlay{from{opacity:0}}
.modal-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);width:100%;max-width:580px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.7);animation:slideModal .25s cubic-bezier(.34,1.56,.64,1) both}
@keyframes slideModal{from{opacity:0;transform:scale(.96) translateY(12px)}}
.modal-box.lg{max-width:760px}
.mhead{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.mhead-left .msubtitle{font-size:.76rem;color:var(--t3);margin-top:2px}
.mhead h2{font-size:1rem}
.mclose{background:none;border:none;cursor:pointer;color:var(--t3);padding:4px;border-radius:5px;transition:var(--tr);display:flex}
.mclose:hover{color:var(--t1);background:var(--bg3)}
.mclose svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.mbody{padding:20px;overflow-y:auto;flex:1}

/* ── Telecaller card ────────────────────────────────────── */
.tc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;transition:var(--tr)}
.tc:hover{border-color:var(--borderl)}
.tcpbar{height:2px}
.tcpH{background:var(--red)}
.tcpM{background:var(--accent)}
.tcpL{background:var(--green)}
.tchead{padding:13px 15px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border)}
.tctags{display:flex;gap:4px;flex-wrap:wrap;padding:8px 15px}
.tcbody{padding:10px 15px}
.tcactions{display:flex;gap:6px;padding:10px 15px;border-top:1px solid var(--border);flex-wrap:wrap}

/* ── Call log item ──────────────────────────────────────── */
.clitem{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.clitem:last-child{border-bottom:none}
.clicon{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.clicon svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.divider{height:1px;background:var(--border);margin:14px 0}

/* ── Upload zone ────────────────────────────────────────── */
.uzone{border:2px dashed var(--borderl);border-radius:var(--rl);padding:38px;text-align:center;cursor:pointer;transition:var(--tr);background:var(--bg3)}
.uzone:hover,.uzone.dover{border-color:var(--accent);background:var(--adim)}
.uzone svg{width:38px;height:38px;stroke:var(--t3);fill:none;stroke-width:1.5;stroke-linecap:round;margin-bottom:10px}
.errbox{max-height:180px;overflow-y:auto;margin-top:10px;background:var(--rdim);border:1px solid var(--red);border-radius:7px;padding:10px}
.erow{font-size:.72rem;padding:3px 0;border-bottom:1px solid rgba(239,68,68,.18);color:var(--red)}

/* ── Queue row ──────────────────────────────────────────── */
.qrow{display:flex;align-items:center;justify-content:space-between;padding:11px 18px;border-bottom:1px solid var(--border);gap:9px}
.qrow:last-child{border-bottom:none}
.qi{flex:1}
.qi strong{font-size:.82rem;display:block}
.qi small{color:var(--t3);font-size:.72rem}
.qa{display:flex;align-items:center;gap:7px}
.asel{background:var(--bg3);border:1px solid var(--border);color:var(--t1);border-radius:6px;padding:5px 9px;font-size:.76rem;font-family:var(--fb)}

/* ── Toast ──────────────────────────────────────────────── */
.tcontainer{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:8px;z-index:9999;pointer-events:none}
.toast{display:flex;align-items:center;gap:9px;background:var(--bg3);border:1px solid var(--border);border-radius:9px;padding:10px 14px;font-size:.8rem;color:var(--t1);pointer-events:all;animation:tin .3s cubic-bezier(.34,1.56,.64,1) both;box-shadow:var(--shadow);max-width:300px}
@keyframes tin{from{opacity:0;transform:translateX(20px) scale(.95)}}
.toast.suc{border-color:var(--green);background:var(--gdim)}
.toast.err{border-color:var(--red);background:var(--rdim)}
.toast.inf{border-color:var(--blue);background:var(--bdim)}
.ticon{font-size:.9rem;flex-shrink:0}

/* ── Pagination ─────────────────────────────────────────── */
.pagination{display:flex;align-items:center;gap:6px;justify-content:center;margin-top:18px}
.ppage{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:5px 10px;font-size:.78rem;cursor:pointer;color:var(--t2);transition:var(--tr);font-family:var(--fd)}
.ppage:hover{border-color:var(--borderl);color:var(--t1)}
.ppage.active{background:var(--accent);color:#000;border-color:var(--accent)}
.ppage:disabled{opacity:.4;cursor:default}

/* ── Empty state ────────────────────────────────────────── */
.empty{text-align:center;padding:48px 24px;color:var(--t3)}
.empty svg{width:40px;height:40px;stroke:var(--t3);fill:none;stroke-width:1.5;stroke-linecap:round;margin:0 auto 14px;display:block}
.empty h3{font-size:.95rem;font-family:var(--fd);color:var(--t2);margin-bottom:6px}
.empty p{font-size:.82rem}

/* ── Responsive ─────────────────────────────────────────── */
/* ── Call Modal Layout ─────────────────────────────────── */
.call-modal-wrap{display:flex;gap:16px;align-items:flex-start;min-width:0}
.call-script-panel{width:220px;flex-shrink:0;max-height:380px;overflow-y:auto;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:12px}
.call-form-panel{flex:1;min-width:0}
.script-text{font-family:var(--fb);font-size:.72rem;line-height:1.75;color:var(--t2);white-space:pre-wrap;word-break:break-word}

@media(max-width:900px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);z-index:200}
  .sidebar.open{transform:translateX(0)}
  .stoggle{display:flex!important}
  .g2,.g3{grid-template-columns:1fr}
  .kanban{grid-template-columns:1fr}
  .swrap{display:none}
  .fgrid{grid-template-columns:1fr}
  .fgrid .s2{grid-column:1}
  /* Table → card layout on mobile */
  .twrap table thead{display:none}
  .twrap table,
  .twrap tbody,
  .twrap tr,
  .twrap td{display:block;width:100%}
  .twrap tr{border:1px solid var(--border);border-radius:var(--r);margin-bottom:10px;padding:12px;background:var(--bg2)}
  .twrap tr:hover{background:var(--bg3)}
  .twrap td{padding:2px 0;border:none;font-size:.8rem}
  .twrap td:first-child{font-size:.9rem;margin-bottom:4px}
  .twrap td:before{content:attr(data-label);font-size:.65rem;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:2px}
  /* Call modal stacks at 900px too */
  .call-modal-wrap{flex-direction:column}
  .call-script-panel{width:100%;max-height:180px}
  /* Lead detail header actions wrap */
  .lead-actions{flex-wrap:wrap;gap:6px!important}
  .lead-actions .bg,.lead-actions .bp{font-size:.75rem;padding:5px 10px}
}
@media(max-width:600px){
  .mrow{grid-template-columns:1fr 1fr}
  .content{padding:10px}
  .topbar{padding:0 12px}
  .modal-box{margin:0;border-radius:var(--r) var(--r) 0 0;max-height:92vh;align-self:flex-end}
  .modal-overlay{align-items:flex-end;padding:0}
}