/* ===== CallMitra Admin — Design System v2 ===== */
:root{
  --brand:#0f8a5f; --brand-600:#0c7550; --brand-700:#0a5f42; --brand-50:#e9f7f0; --brand-100:#cfeedd;
  --side:#0c3b2d; --side-2:#0f4a38; --side-txt:#b9d4c8;
  --ink:#16231d; --ink-2:#3e4b45; --muted:#7a8781; --line:#e6ebe8; --bg:#f4f7f5; --card:#fff;
  --blue:#2f6fe4; --blue-50:#ebf2ff; --orange:#f08a1c; --orange-50:#fff3e5; --red:#e5484d; --red-50:#fdeced;
  --violet:#7c5cdb; --violet-50:#f1edfd; --amber:#c98a0c; --amber-50:#fdf5e1;
  --r:14px; --r-sm:10px; --shadow:0 1px 2px rgba(16,35,29,.04),0 4px 16px rgba(16,35,29,.05);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.55 "Mukta","Noto Sans Devanagari",system-ui,sans-serif}
a{color:var(--brand-600);text-decoration:none} a:hover{text-decoration:underline}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mono{font-family:ui-monospace,"JetBrains Mono",monospace;font-size:.86em}
.small{font-size:.86rem}.muted{color:var(--muted)}.nowrap{white-space:nowrap}.right{text-align:right}

/* ---- shell ---- */
.app{display:flex;min-height:100vh}
.side{width:248px;flex:none;background:linear-gradient(180deg,var(--side),#0a3226);color:var(--side-txt);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:18px 14px;z-index:20}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:1.35rem;padding:4px 8px 18px}
.brand:hover{text-decoration:none}
.brand .logo{width:34px;height:34px;border-radius:10px;background:var(--brand);display:grid;place-items:center}
.brand .logo svg{stroke:#fff;width:20px;height:20px}
.side nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow:auto}
.side nav a{display:flex;align-items:center;gap:12px;color:var(--side-txt);padding:10px 12px;border-radius:10px;font-weight:500}
.side nav a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.side nav a.on{background:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(15,138,95,.35)}
.side .sep{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#6f9384;padding:14px 12px 4px}
.side .plan-card{background:var(--side-2);border-radius:12px;padding:12px 14px;font-size:.85rem;margin-top:10px}
.side .plan-card b{color:#fff;display:block;font-size:.95rem}
.side .plan-card .bar{height:6px;background:rgba(255,255,255,.12);border-radius:4px;margin-top:8px;overflow:hidden}
.side .plan-card .bar i{display:block;height:100%;background:#4fd1a5}
.mainwrap{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 24px;position:sticky;top:0;z-index:10}
.burger{display:none;background:none;border:0;color:var(--ink);padding:6px;cursor:pointer}
.tsearch{flex:1;max-width:520px;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:0 12px;color:var(--muted)}
.tsearch input{border:0;background:transparent;padding:10px 0;margin:0;outline:none}
.tsearch input:focus{outline:none;box-shadow:none}
.tuser{margin-left:auto;display:flex;align-items:center;gap:12px}
.dot-on{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px #dcfce7}
.tuser .who{line-height:1.2}.tuser .who b{display:block;font-size:.95rem}.tuser .who span{font-size:.78rem;color:var(--muted)}
main{padding:24px 28px 56px;max-width:1440px;width:100%}
main.bare{max-width:none;padding:0}

/* ---- page header ---- */
.ph{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.ph h1{font-size:1.75rem;line-height:1.2;margin:0}
.ph p{margin:4px 0 0;color:var(--muted)}
.ph .acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.crumb{font-size:.85rem;color:var(--muted);margin-bottom:6px}
h1{font-size:1.75rem;margin:0 0 16px} h2{font-size:1.1rem;margin:0 0 14px} h3{font-size:1rem;margin:0 0 10px}
.lead{color:var(--muted);max-width:75ch;margin-top:-6px}

/* ---- cards & grid ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:20px;box-shadow:var(--shadow)}
.card h2{display:flex;justify-content:space-between;align-items:center;gap:10px}
.card h2 a{font-size:.85rem;font-weight:500}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:20px;margin-bottom:20px}
.grid2>.card{margin-bottom:0}
.g-2-1{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:20px}
.g-1-1{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.g-2-1>.card,.g-1-1>.card{margin-bottom:0}

/* KPI */
.kpis,.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px}
.kpi{border-radius:var(--r);padding:18px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.kpi .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center}
.kpi .ic svg{width:22px;height:22px}
.kpi .v{font-size:2rem;font-weight:700;line-height:1}
.kpi .l{color:var(--ink-2);font-weight:500}
.kpi .d{font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:4px}
.kpi .d.up{color:var(--brand)}.kpi .d.down{color:var(--red)}.kpi .d span{color:var(--muted);font-weight:400}
.k-green{background:linear-gradient(135deg,#f1fbf6,#fff 60%)}.k-green .ic{background:var(--brand-100);color:var(--brand-700)}
.k-blue{background:linear-gradient(135deg,#f2f6ff,#fff 60%)}.k-blue .ic{background:#d9e6ff;color:var(--blue)}
.k-orange{background:linear-gradient(135deg,#fff6ec,#fff 60%)}.k-orange .ic{background:#ffe3c2;color:var(--orange)}
.k-red{background:linear-gradient(135deg,#fff2f2,#fff 60%)}.k-red .ic{background:#fdd5d6;color:var(--red)}
.k-violet{background:linear-gradient(135deg,#f6f2ff,#fff 60%)}.k-violet .ic{background:#e6dcff;color:var(--violet)}
/* जुने .stats (app_users/messages) */
.stats>div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);border-left:4px solid var(--brand)}
.stats>div.warn{border-left-color:var(--orange)}.stats>div.alert{border-left-color:var(--red)}
.stats b{display:block;font-size:1.7rem;line-height:1.1}.stats span{color:var(--muted);font-size:.9rem}

/* ---- tables ---- */
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-weight:600;color:var(--muted);font-size:.82rem;padding:10px 12px;border-bottom:1px solid var(--line);background:#fafcfb;white-space:nowrap}
td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:hover td,table tr:hover td{background:#fbfdfc}
tr.late td{background:var(--red-50)} tr.off td{opacity:.55}
.person{display:flex;align-items:center;gap:10px}
.person b{display:block;font-weight:600;line-height:1.25}
.person .sub{font-size:.82rem;color:var(--muted)}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.9rem;flex:none;color:#fff}
.av.lg{width:72px;height:72px;font-size:1.6rem}
.cicon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.cicon svg{width:17px;height:17px}
.c-incoming{background:var(--brand-50);color:var(--brand)}.c-outgoing{background:var(--blue-50);color:var(--blue)}.c-missed{background:var(--red-50);color:var(--red)}
.c-sms{background:var(--blue-50);color:var(--blue)}.c-whatsapp{background:var(--brand-50);color:var(--brand)}

/* ---- pills ---- */
.pill,.tag,.st,.b{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;font-size:.8rem;font-weight:600;white-space:nowrap;line-height:1.6}
.t-new,.p-blue{background:var(--blue-50);color:var(--blue)}
.t-warm,.p-orange{background:var(--orange-50);color:#c76a07}
.t-hot,.p-red{background:var(--red-50);color:var(--red)}
.t-cold{background:#eef1f4;color:#5b6773}
.t-converted,.p-green{background:var(--brand-50);color:var(--brand-700)}
.t-lost,.p-gray{background:#f1f2f3;color:#6b7075}
.p-violet{background:var(--violet-50);color:var(--violet)}
.b-missed,.st-failed,.st-no_credits,.st-plan_expired,.au-exp,.au-off{background:var(--red-50);color:var(--red)}
.b-incoming,.st-sent,.au-on{background:var(--brand-50);color:var(--brand-700)}
.b-outgoing{background:var(--blue-50);color:var(--blue)} .au-trial{background:var(--amber-50);color:var(--amber)}

/* ---- tabs / chips ---- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs a{padding:10px 16px;color:var(--ink-2);font-weight:600;border-bottom:3px solid transparent;white-space:nowrap}
.tabs a:hover{text-decoration:none;color:var(--brand)}
.tabs a.on{color:var(--brand);border-bottom-color:var(--brand)}
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px;margin-bottom:18px}
.seg a{padding:7px 18px;border-radius:9px;color:var(--ink-2);font-weight:600}
.seg a.on{background:var(--brand);color:#fff}.seg a:hover{text-decoration:none}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chips a{padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink-2);font-weight:600;font-size:.9rem}
.chips a:hover{text-decoration:none;border-color:var(--brand)}
.chips a.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---- forms ---- */
label{display:block;margin-bottom:14px;font-weight:600;font-size:.9rem;color:var(--ink-2)}
input,select,textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;font:inherit;font-weight:400;color:var(--ink);
  border:1px solid #d9e1dd;border-radius:10px;background:#fff;transition:border .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)}
input[type=checkbox],input[type=radio]{width:auto;display:inline-block;margin:0;accent-color:var(--brand)}
label.check{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--ink)}
label.check.big{font-size:1.05rem;font-weight:700}
.radio{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;font-weight:500;cursor:pointer}
.radio:has(input:checked){border-color:var(--brand);background:var(--brand-50)}
.radio .cnt{margin-left:auto;color:var(--muted);font-size:.85rem}
.row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}.row>label{flex:1;min-width:150px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 18px}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;background:var(--brand);color:#fff;
  border:1px solid var(--brand);border-radius:10px;padding:9px 18px;cursor:pointer;text-decoration:none;white-space:nowrap}
button:hover,.btn:hover{background:var(--brand-600);text-decoration:none}
button.ghost,.btn.ghost{background:#fff;color:var(--brand-700);border-color:#cfe0d8}
button.ghost:hover,.btn.ghost:hover{background:var(--brand-50)}
button.danger,.btn.danger{color:var(--red);border-color:#f3c6c8}
button.small,.btn.small{padding:4px 10px;font-size:.84rem;border-radius:8px}
button.block,.btn.block{width:100%;padding:12px}
button.save{position:sticky;bottom:16px;width:100%;padding:13px;box-shadow:0 8px 24px rgba(15,138,95,.3)}
.inline{display:inline-flex;gap:6px;align-items:center;margin:0 4px 4px 0}
.small-in{width:140px;display:inline-block;margin:0;padding:5px 9px}
.tiny{width:72px;display:inline-block;margin:0;padding:5px 8px}
.filters{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.filters label{margin:0;min-width:160px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar .sp{flex:1}
.vars{display:flex;gap:8px;flex-wrap:wrap;margin:-6px 0 12px}
.vars button{background:#fff;color:var(--brand-700);border:1px dashed #b9d9c9;padding:3px 12px;font-size:.85rem}
.counter{font-size:.82rem;color:var(--muted);text-align:right;margin:-8px 0 12px}

/* ---- misc ---- */
.flash{background:var(--brand-50);border:1px solid var(--brand-100);color:var(--brand-700);padding:11px 16px;border-radius:12px;margin-bottom:18px;font-weight:500}
.flash.err{background:var(--red-50);border-color:#f6cdce;color:var(--red)}
.empty{text-align:center;color:var(--muted);padding:28px 10px}
.plan{background:var(--brand-50);color:var(--brand-700);padding:5px 14px;border-radius:999px;font-size:.88rem;font-weight:600}
.plan.bad{background:var(--red-50);color:var(--red)}
.head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px}
.info{display:grid;grid-template-columns:130px 1fr;gap:8px 12px;font-size:.95rem}
.info dt{color:var(--muted)}.info dd{margin:0;font-weight:500}
.timeline{position:relative;padding-left:4px}
.tl{display:flex;gap:12px;padding-bottom:16px;position:relative}
.tl:not(:last-child)::before{content:"";position:absolute;left:16px;top:36px;bottom:0;width:2px;background:var(--line)}
.tl b{display:block;font-weight:600}.tl .t{font-size:.82rem;color:var(--muted)}.tl p{margin:2px 0 0;font-size:.9rem;color:var(--ink-2)}
.leadhead{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.leadhead .meta{flex:1;min-width:220px}
.leadhead h1{font-size:1.5rem;margin:0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.progress{height:8px;background:var(--bg);border-radius:6px;overflow:hidden;min-width:110px}
.progress i{display:block;height:100%;background:var(--brand)}
.legend{display:flex;flex-direction:column;gap:8px;font-size:.9rem}
.legend div{display:flex;align-items:center;gap:8px}.legend i{width:10px;height:10px;border-radius:50%}.legend span{margin-left:auto;font-weight:600}
.bulk{display:none;align-items:center;gap:10px;background:var(--brand-50);border:1px solid var(--brand-100);border-radius:12px;padding:8px 12px;margin-bottom:12px}
.bulk.on{display:flex}
.pager{display:flex;gap:6px;justify-content:flex-end;align-items:center;margin-top:14px;flex-wrap:wrap}
.pager a,.pager span{min-width:34px;height:34px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink-2);padding:0 8px}
.pager .on{background:var(--brand);color:#fff;border-color:var(--brand)}
.pager .txt{border:0;background:none;color:var(--muted);margin-right:auto}
dialog{border:0;border-radius:18px;padding:0;width:min(560px,94vw);box-shadow:0 30px 80px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(10,30,22,.45)}
dialog .dh{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
dialog .dh h2{margin:0}dialog form{padding:20px 22px}
dialog .x{background:none;border:0;color:var(--muted);font-size:1.4rem;padding:0 6px}

/* ---- auth ---- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(1200px 600px at 10% 0%,#e3f5ec,transparent),var(--bg)}
.auth{display:grid;grid-template-columns:1.05fr 1fr;width:min(1040px,100%);background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 30px 80px rgba(12,59,45,.15)}
.auth .art{background:linear-gradient(160deg,#e8f7ef,#d2efe1);padding:36px;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.auth .art .lg{display:flex;align-items:center;gap:12px;font-size:1.8rem;font-weight:800;color:var(--side)}
.auth .art .lg small{display:block;font-size:.8rem;font-weight:500;color:var(--ink-2)}
.auth .art .tag-line{font-size:1.5rem;font-weight:800;color:var(--side);line-height:1.3}
.auth .art .tag-line span{color:var(--brand)}
.auth .form{padding:44px 44px 36px}
.auth .form h1{font-size:1.6rem;margin:0 0 6px}
.auth .form p.s{color:var(--muted);margin:0 0 24px}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);margin:18px 0;font-size:.9rem}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.pw{position:relative}.pw button{position:absolute;right:6px;bottom:6px;background:none;border:0;color:var(--muted);padding:6px}

@media (max-width:1100px){.g-2-1{grid-template-columns:1fr}}
@media (max-width:900px){
  .side{position:fixed;left:-260px;transition:left .2s}.side.open{left:0;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
  .burger{display:block} main{padding:18px 14px 48px} .topbar{padding:0 12px} .tuser .who{display:none}
  .auth{grid-template-columns:1fr}.auth .art{display:none}.auth .form{padding:30px 22px}
  .g-1-1{grid-template-columns:1fr}
}
.auth .logo{width:46px;height:46px;border-radius:13px;background:var(--brand);display:grid;place-items:center;flex:none}
.auth .logo svg{stroke:#fff;width:24px;height:24px}
.ph .acts form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0}
.ph .acts select,.ph .acts input{width:auto}
.toolbar input,.toolbar select{width:auto;flex:1 1 160px}