/* CSR Contact Hub — partner portal. Koi CDN nahi, sab kuch self-contained. */

:root{
  --bg:#f4f6fb;
  --panel:#fff;
  --ink:#0d1526;
  --ink-2:#334155;
  --muted:#6b7a90;
  --line:#e5eaf3;
  --line-2:#eef1f7;
  --brand:#1d4ed8;
  --brand-2:#2563eb;
  --brand-soft:#eef3ff;
  --ok:#059669; --ok-soft:#e7f7f1;
  --warn:#c2740a; --warn-soft:#fdf3e3;
  --bad:#dc2626; --bad-soft:#fdecec;
  --wa:#15803d; --wa-soft:#e8f7ec;
  --shadow:0 1px 2px rgba(13,21,38,.05), 0 12px 28px -18px rgba(13,21,38,.28);
  --r:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,"Inter","Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0; font-weight:650; letter-spacing:-.01em}
p{margin:0}
.muted{color:var(--muted)}
.tiny{font-size:12px}
.block{display:block}
.strong{font-weight:600; color:var(--ink)}
.dot-sep{padding:0 6px; color:var(--muted)}
.ico{width:16px;height:16px;flex:none}

/* ---------------------------------------------------------------- shell --- */
.shell{display:flex; min-height:100vh}
.side{
  width:246px; flex:none; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#0b1220 0%,#111c33 100%);
  color:#c7d2e5; position:sticky; top:0; height:100vh;
}
.brand{display:flex; align-items:center; gap:11px; padding:20px 18px; color:#fff}
.brand:hover{text-decoration:none}
.mark{
  display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  background:linear-gradient(140deg,#3b82f6,#1d4ed8);
  font-weight:800; font-size:12.5px; letter-spacing:.04em; color:#fff;
  box-shadow:0 6px 16px -6px rgba(59,130,246,.9);
}
.mark.big{width:60px;height:60px;border-radius:17px;font-size:19px}
.brand-txt b{display:block; font-size:14.5px; line-height:1.2}
.brand-txt i{display:block; font-style:normal; font-size:11.5px; color:#8296b5; letter-spacing:.03em}

.nav{display:flex; flex-direction:column; gap:3px; padding:6px 12px; flex:1}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  color:#b9c6db; font-size:13.5px; font-weight:500; transition:.14s;
}
.nav-item svg{width:18px;height:18px;opacity:.85}
.nav-item:hover{background:rgba(255,255,255,.07); color:#fff; text-decoration:none}
.nav-item.on{background:rgba(59,130,246,.18); color:#fff; box-shadow:inset 0 0 0 1px rgba(96,165,250,.3)}
.nav-item.on svg{opacity:1; color:#93c5fd}

.side-foot{padding:14px 12px 18px; border-top:1px solid rgba(255,255,255,.08)}
.me{display:flex; align-items:center; gap:10px; padding:9px; border-radius:10px; color:#fff}
.me:hover{background:rgba(255,255,255,.07); text-decoration:none}
.avatar{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,#334155,#1e293b); color:#dbe6f7; font-weight:700; font-size:14px;
}
.me-txt b{display:block;font-size:13px;line-height:1.25}
.me-txt i{display:block;font-style:normal;font-size:11px;color:#8296b5}
.logout{
  display:flex;align-items:center;gap:8px;padding:9px 12px;margin-top:4px;
  border-radius:10px;color:#98a8c4;font-size:13px;
}
.logout svg{width:16px;height:16px}
.logout:hover{background:rgba(248,113,113,.14);color:#fca5a5;text-decoration:none}

.main{flex:1; min-width:0; padding:24px 28px 40px; max-width:1500px}
.top{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px}
.head-txt h1{font-size:23px}
.head-txt .sub{color:var(--muted); font-size:13px; margin-top:3px}
.head-right{display:flex; gap:8px; align-items:center}
.chip-live{
  display:inline-flex;align-items:center;gap:7px;background:var(--ok-soft);color:#046c4e;
  border:1px solid #c7ecdd;border-radius:100px;padding:6px 12px;font-size:12px;font-weight:600;
}
.chip-live i{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.2)}
.verline{margin-top:26px;color:#93a1b8;font-size:11.5px;text-align:center}

/* -------------------------------------------------------------- layout ---- */
.stack{display:flex; flex-direction:column; gap:16px}
.stack.narrow{max-width:760px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:1080px){.grid-2{grid-template-columns:1fr}}

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:18px;
}
.card.pad0{padding:0; overflow:hidden}
.card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px}
.card-head h3{font-size:15px}
.head-actions{display:flex; gap:8px; align-items:center}

.banner{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:linear-gradient(100deg,#eef4ff,#f6f9ff); border:1px solid #dbe6ff;
  border-radius:var(--r); padding:13px 16px; font-size:13px;
}

/* ----------------------------------------------------------------- kpi ---- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:14px}
.kpis.tight{grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:18px}
.kpi{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 16px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line)}
.kpi.primary::after{background:linear-gradient(180deg,#60a5fa,#1d4ed8)}
.kpi.ok::after{background:#10b981}
.kpi.bad::after{background:#ef4444}
.kpi.wa::after{background:#22c55e}
.kpi-label{display:block;font-size:11px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.kpi-value{display:block;font-size:29px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:5px 0 2px}
.kpis.tight .kpi-value{font-size:19px;margin:3px 0 0}
.kpi-sub{display:block;font-size:12px;color:var(--muted)}

/* ---------------------------------------------------------------- bars ---- */
.bars{display:flex;flex-direction:column;gap:13px}
.bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.bar-label{font-size:13px;color:var(--ink-2)}
.bar-val{font-size:12.5px;font-variant-numeric:tabular-nums;font-weight:600}
.bar-val i{font-style:normal;color:var(--muted);font-weight:500;margin-left:5px}
.bar-track{height:8px;border-radius:100px;background:var(--line-2);overflow:hidden}
.bar-fill{display:block;height:100%;border-radius:100px;background:var(--muted);transition:width .4s ease}
.bar-fill.primary{background:linear-gradient(90deg,#60a5fa,#1d4ed8)}
.bar-fill.ok{background:linear-gradient(90deg,#34d399,#059669)}
.bar-fill.warn{background:linear-gradient(90deg,#fbbf24,#d97706)}
.bar-fill.bad{background:linear-gradient(90deg,#f87171,#dc2626)}
.bar-fill.muted{background:#c3cddd}

/* --------------------------------------------------------------- table ---- */
.table-wrap{overflow:auto; border-radius:12px}
.table-wrap.short{max-height:340px}
.tbl{width:100%; border-collapse:separate; border-spacing:0; font-size:13px}
.tbl thead th{
  position:sticky; top:0; z-index:1; background:#f8fafd; text-align:left;
  font-size:11px; font-weight:650; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl td{padding:11px 14px; border-bottom:1px solid var(--line-2); vertical-align:top}
.tbl tbody tr:hover td{background:#fafcff}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.tbl.contacts td{font-size:13px}
.card.pad0 .tbl thead th:first-child{padding-left:18px}
.card.pad0 .tbl td:first-child{padding-left:18px}
.empty{padding:26px 16px; text-align:center; color:var(--muted); font-size:13px}

.badge{
  display:inline-block; padding:2px 8px; border-radius:100px; font-size:11px; font-weight:600;
  background:#eef1f7; color:var(--ink-2); margin-left:6px; white-space:nowrap;
}
.badge.ok{background:var(--ok-soft);color:#046c4e}
.badge.warn{background:var(--warn-soft);color:#92590a}
.badge.bad{background:var(--bad-soft);color:#b91c1c}
.badge.wa{background:var(--wa-soft);color:#15803d}
.badge.primary{background:var(--brand-soft);color:#1e40af}
.pill{
  display:inline-block;margin-left:8px;padding:2px 9px;border-radius:100px;
  background:var(--brand-soft);color:#1e40af;font-size:11.5px;font-weight:600;
}

/* -------------------------------------------------------------- filters --- */
.filters .filter-row{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
.filters .filter-row + .filter-row{margin-top:12px; padding-top:12px; border-top:1px solid var(--line-2)}
.filter-row.wrap{align-items:center}
.spacer{flex:1}
.field{display:flex; flex-direction:column; gap:5px; min-width:150px}
.field.grow{flex:1; min-width:240px}
.field > span{font-size:11px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
input[type=text],input[type=password],input:not([type]),select{
  height:39px; padding:0 11px; border:1px solid #dfe5ef; border-radius:10px;
  background:#fff; font-size:13.5px; color:var(--ink); font-family:inherit; outline:none;
}
input:focus,select:focus{border-color:#93b4f8; box-shadow:0 0 0 3px rgba(37,99,235,.14)}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a90' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:15px; padding-right:30px}
.check{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--brand)}

.result-bar{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13.5px}
.head-actions{display:flex;gap:8px;flex-wrap:wrap}

/* -------------------------------------------------------------- buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:39px; padding:0 16px; border-radius:10px; border:1px solid transparent;
  font-size:13.5px; font-weight:600; font-family:inherit; cursor:pointer; white-space:nowrap;
}
.btn:hover{text-decoration:none}
.btn.primary{background:linear-gradient(140deg,var(--brand-2),var(--brand)); color:#fff;
  box-shadow:0 6px 16px -8px rgba(29,78,216,.8)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{background:#fff; border-color:#dfe5ef; color:var(--ink-2)}
.btn.ghost:hover{background:#f7f9fd; border-color:#c8d3e5}
.btn.sm{height:34px; padding:0 13px; font-size:12.5px}
.btn.wide{width:100%}
.btn.off{opacity:.45; pointer-events:none}

.pager{display:flex;align-items:center;justify-content:center;gap:16px;padding:4px 0}
.breadcrumb{font-size:13px}

/* --------------------------------------------------------------- report --- */
.report h2{font-size:19px}
.sec{margin:22px 0 10px; font-size:14px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.06em}
.deflist{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0 22px; margin:0}
.def{display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-2)}
.def dt{flex:none; width:130px; color:var(--muted); font-size:12.5px}
.def dd{margin:0; font-size:13px; word-break:break-word}
.note{margin-top:16px; padding:12px 14px; background:#f8fafd; border:1px dashed #d8e0ee;
  border-radius:11px; font-size:12.5px; color:var(--ink-2)}
.error-card{text-align:center; padding:40px 24px}
.err-code{display:block;font-size:46px;font-weight:800;color:#c8d3e5;letter-spacing:-.03em}

/* --------------------------------------------------------------- flashes -- */
.flashes{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.flash{padding:11px 14px;border-radius:11px;font-size:13.5px;border:1px solid transparent}
.flash.ok{background:var(--ok-soft);border-color:#c7ecdd;color:#046c4e}
.flash.bad{background:var(--bad-soft);border-color:#f7d4d4;color:#b91c1c}
.flash.warn{background:var(--warn-soft);border-color:#f6e0bb;color:#92590a}

/* ----------------------------------------------------------------- auth --- */
body.auth{background:#0b1220}
.auth-wrap{display:grid; grid-template-columns:1.05fr .95fr; min-height:100vh}
.auth-art{
  position:relative; overflow:hidden; display:flex; align-items:center; padding:60px;
  background:linear-gradient(150deg,#0b1220 0%,#152449 55%,#1d3a7a 100%); color:#fff;
}
.art-inner{position:relative; z-index:2; max-width:430px}
.art-inner h1{font-size:37px; margin:22px 0 6px; letter-spacing:-.02em}
.art-inner .tag{color:#9fb4dc; font-size:14.5px; margin-bottom:26px}
.art-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.art-list li{position:relative; padding-left:26px; color:#c8d6ef; font-size:13.5px}
.art-list li::before{
  content:""; position:absolute; left:0; top:6px; width:14px; height:8px;
  border-left:2px solid #60a5fa; border-bottom:2px solid #60a5fa; transform:rotate(-45deg);
}
.art-glow{
  position:absolute; width:520px; height:520px; right:-160px; bottom:-200px; border-radius:50%;
  background:radial-gradient(circle,rgba(59,130,246,.45),transparent 68%); filter:blur(10px);
}
.auth-form{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--bg)}
.login-card{width:100%; max-width:392px; background:#fff; border:1px solid var(--line);
  border-radius:18px; box-shadow:0 24px 60px -30px rgba(13,21,38,.45); padding:30px}
.login-card h2{font-size:21px; margin-bottom:5px}
.login-card .muted{margin-bottom:20px; font-size:13px}
.login-card .field{margin-bottom:14px}
.login-card .btn{margin-top:8px}
.login-card .tiny{margin-top:14px; text-align:center}
@media(max-width:900px){
  .auth-wrap{grid-template-columns:1fr}
  .auth-art{padding:34px}
  .art-list{display:none}
  .auth-art h1{font-size:27px}
}

/* ------------------------------------------------------------- responsive - */
@media(max-width:860px){
  .shell{flex-direction:column}
  .side{width:auto;height:auto;position:static;flex-direction:row;align-items:center;
    padding:8px 10px; gap:8px; overflow-x:auto}
  .brand{padding:6px 8px}
  .brand-txt{display:none}
  .nav{flex-direction:row;padding:0;gap:2px;flex:1}
  .nav-item span{display:none}
  .nav-item{padding:9px 11px}
  .side-foot{border:none;padding:0;display:flex;align-items:center;gap:4px}
  .me-txt{display:none}
  .logout{font-size:0; padding:9px}
  .main{padding:18px 14px 30px}
}

/* ---------------------------------------------------------------- print --- */
@media print{
  .side,.top,.verline,.flashes,.no-print,.pager{display:none !important}
  body{background:#fff}
  .main{padding:0;max-width:none}
  .card{box-shadow:none;border-color:#ddd;break-inside:avoid}
  .tbl thead th{background:#f2f2f2}
}