/* ==========================================================================
   SANWARIA SOLAR SOLUTION — admin/admin.css
   Admin portal — "Ujjwal" theme: safed, halka, dhoop me bhi saaf.

   Poora rang sirf neeche 01 TOKENS wale hisse se aata hai. Baaki poori
   file me kahin bhi rang seedha nahi likha — sab rgba(var(--…)) se
   chalta hai. Is liye kabhi doosri theme chahiye ho to sirf wo ek
   hissa badalna padta hai, baaki 1100 line ko haath nahi lagana padta.

   01  Tokens
   02  Reset & base
   03  Glass
   04  Buttons & badges
   05  Auth pages (login / install)
   06  App shell (sidebar + topbar)
   07  Page header & sections
   08  Stat tiles & chart
   09  Tables
   10  Forms
   11  Timeline (project stages)
   12  Quotation builder
   13  Alerts, empty states, pagination
   14  Print (quotation)
   15  Responsive
   16  Reduced motion
   ========================================================================== */


/* ==========================================================================
   01  TOKENS
   ========================================================================== */
:root{
  /* ------------------------------------------------------------------
     UJJWAL — safed admin theme

     Poora rang yahin se aata hai. Neeche kisi bhi jagah rang seedha
     nahi likha, sab in tokens se chalta hai — is liye baad me poora
     look badalna ho to sirf yeh hissa badalna padta hai.
     ------------------------------------------------------------------ */

  /* Zameen — halka hara-safed, taaki safed card ubhar kar dikhein */
  --bg-900:#F7F1E5;
  --bg-800:#F2EADB;
  --bg-navy:#EFE6D4;
  --panel-solid:#FFFCF6;
  --field-bg:#FFFDF9;

  /* Overlay ka rang — light theme me kaali syahi, dark me safed.
     Poori file me rgba(var(--on),…) isi se chalta hai. */
  --on:42,32,18;
  --sh:42,32,18;

  /* Hara — yahi ab mukhya rang hai */
  --green-700:#123E28;
  --green-600:#17593A;
  --emerald-500:#1B6E46;
  --emerald-400:#17593A;

  /* Sunehra — ab sirf highlight ke liye, button ke liye nahi */
  --gold-600:#9A4A14;
  --gold-500:#8A4111;
  --gold-400:#7F3D10;

  --danger:#B3261E;
  --danger-bg:rgba(var(--bad),.10);
  --warn:#8A4111;

  /* Syahi */
  /* Safed par halka rang jaldi gum ho jaata hai — is liye yahan
     alpha dark theme se zyada rakha hai, taaki chhota akshar bhi
     saaf padha ja sake. */
  --text-100:#241C10;
  --text-70:rgba(36,28,16,.80);
  --text-45:rgba(36,28,16,.68);
  --text-25:rgba(36,28,16,.65);

  /* "Glass" ab kaanch nahi, safed card hai — halki hairline ke saath */
  --g1-bg:rgba(255,252,246,.76);
  --g1-brd:rgba(60,44,24,.16);
  --g2-bg-a:#FFFCF6;
  --g2-bg-b:#FFFCF6;
  --g2-brd:rgba(60,44,24,.17);
  --g3-bg-a:#FFFDF9;
  --g3-bg-b:#FFFBF3;
  --g3-brd:rgba(60,44,24,.20);

  /* Chhaya halki — kagaz par rakhi cheez jaisi, na ki gehri raat wali */
  --sh-1:0 1px 2px rgba(110,80,40,.05);
  --sh-2:0 2px 6px rgba(110,80,40,.07);
  --sh-3:0 4px 14px rgba(110,80,40,.10);
  --rim:none;

  /* Mukhya button par jo akshar aate hain */
  --on-acc:#FFF7EC;

  /* Matlab wale rang — poori file me rgba(var(--…),alpha) se chalte hain.
     Yahan badal denge to har badge, chip aur chart ek saath badal jayega. */
  /* Sidebar aur topbar — inka apna rang, kyunki yeh card nahi hain */
  --shell-bg:#FFFCF6;
  --shell-brd:rgba(60,44,24,.16);
  --scrim:rgba(36,28,16,.45);   /* modal ke peeche ka parda */

  --acc:27,110,70;        /* hara  — sab theek hai, ho gaya */
  --gold:154,74,20;       /* taamba — intezaar, dhyan dijiye */
  --bad:179,38,30;        /* laal  — dikkat hai */
  --info:26,85,150;       /* neela — jaankari */
  --plum:106,61,168;      /* baingani — alag tarah ki cheez */
  --dark:36,28,16;        /* syahi */

  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:10px; --r-pill:999px;

  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:.2s var(--ease);
  --t-base:.35s var(--ease);

  /* Mukhya kaam ka button ab hara hai — safed par gold padha nahi jaata */
  --grad-gold:linear-gradient(135deg,#17593A 0%,#1B6E46 100%);
  --grad-em:linear-gradient(135deg,#17593A 0%,#1B6E46 100%);
  --grad-wa:linear-gradient(135deg,#17593A 0%,#1F9D53 100%);

  --sidebar-w:250px;
  --topbar-h:64px;
}


/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

/* hidden ka matlab hidden hi rahe — .field jaisi class isse na haraye */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:15px;line-height:1.65;color:var(--text-70);
  background:var(--bg-900);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  /* Bahut halki rangat — safed card in par ubhar kar dikhte hain */
  background-image:
    radial-gradient(1100px 700px at 84% -4%,rgba(var(--acc),.055),transparent 60%),
    radial-gradient(900px 620px at 2% 30%,rgba(var(--acc),.035),transparent 64%);
  background-attachment:fixed;
}

h1,h2,h3,h4{font-family:'Sora','Inter',system-ui,sans-serif;color:var(--text-100);font-weight:600;line-height:1.2;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:rgba(var(--on),.07);padding:2px 7px;border-radius:6px;color:var(--gold-400);overflow-wrap:anywhere;word-break:break-word}
strong{color:var(--text-100);font-weight:600}
small{font-size:.82em}

:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px;border-radius:4px}

::selection{background:rgba(var(--acc),.3);color:#fff}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(var(--acc),.24);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--acc),.42)}

.ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.muted{color:var(--text-45)}
.nowrap{white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
.right{text-align:right}
.center{text-align:center}


/* ==========================================================================
   03  GLASS
   ========================================================================== */
.glass{position:relative;border-radius:var(--r-lg);isolation:isolate}
.glass::before{
  content:'';position:absolute;top:0;left:12%;right:12%;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(var(--on),.07),transparent);
  pointer-events:none;
}
.glass--1{
  background:var(--g1-bg);border:1px solid var(--g1-brd);
  box-shadow:var(--sh-1),var(--rim);
}
.glass--2{
  background:linear-gradient(145deg,var(--g2-bg-a),var(--g2-bg-b));
  border:1px solid var(--g2-brd);
  box-shadow:var(--sh-2),var(--rim);
}
.glass--3{
  background:linear-gradient(145deg,var(--g3-bg-a),var(--g3-bg-b));
  border:1px solid var(--g3-brd);
  box-shadow:var(--sh-3),var(--rim);
}


/* ==========================================================================
   04  BUTTONS & BADGES
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Sora',sans-serif;font-size:.875rem;font-weight:600;
  padding:11px 20px;border-radius:var(--r-sm);border:1px solid transparent;
  white-space:nowrap;cursor:pointer;
  transition:transform var(--t-base),box-shadow var(--t-base),background var(--t-base),border-color var(--t-base),color var(--t-base);
}
.btn .ico{width:1.05em;height:1.05em}
.btn--sm{padding:8px 14px;font-size:.8rem}
.btn--lg{padding:14px 26px;font-size:.95rem}
.btn--block{width:100%}
.btn--gold{background:var(--grad-gold);color:var(--on-acc);box-shadow:0 2px 4px rgba(var(--acc),.16),0 8px 20px -8px rgba(var(--acc),.42)}
.btn--glass{background:rgba(var(--on),.06);color:var(--text-100);border-color:rgba(var(--on),.15)}
.btn--wa{background:var(--grad-wa);color:#fff}
.btn--em{background:var(--grad-em);color:#fff}
.btn--danger{background:var(--danger-bg);color:var(--danger);border-color:rgba(var(--bad),.28)}
.btn--icon{padding:9px;width:36px;height:36px;border-radius:4px}
.btn--icon .ico{width:18px;height:18px}

@media (hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .btn--gold:hover{box-shadow:0 14px 30px -8px rgba(var(--gold),.7),inset 0 1px 0 rgba(var(--on),.5)}
  .btn--glass:hover{background:rgba(var(--on),.11);border-color:rgba(var(--acc),.4)}
  .btn--danger:hover{background:rgba(var(--bad),.22)}
}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:var(--r-pill);
  font-size:.735rem;font-weight:600;letter-spacing:.03em;white-space:nowrap;
  border:1px solid transparent;
}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--new      {background:rgba(var(--acc),.13);color:var(--green-600);border-color:rgba(var(--acc),.3)}
.badge--contacted{background:rgba(var(--info),.13);color:#12508F;border-color:rgba(var(--info),.3)}
.badge--survey   {background:rgba(var(--plum),.13);color:#5B33A0;border-color:rgba(var(--plum),.3)}
.badge--quoted   {background:rgba(var(--gold),.14);color:var(--gold-400);border-color:rgba(var(--gold),.32)}
.badge--won      {background:rgba(var(--acc),.18);color:var(--green-600);border-color:rgba(var(--acc),.4)}
.badge--lost     {background:rgba(var(--bad),.13);color:var(--danger);border-color:rgba(var(--bad),.3)}
.badge--active   {background:rgba(var(--acc),.13);color:var(--green-600);border-color:rgba(var(--acc),.3)}
.badge--completed{background:rgba(var(--acc),.18);color:var(--green-600);border-color:rgba(var(--acc),.4)}
.badge--on_hold  {background:rgba(var(--gold),.13);color:var(--warn);border-color:rgba(var(--gold),.3)}
.badge--cancelled{background:rgba(var(--bad),.13);color:var(--danger);border-color:rgba(var(--bad),.3)}
.badge--plain    {background:rgba(var(--on),.06);color:var(--text-70);border-color:rgba(var(--on),.12)}
.badge--plain::before{display:none}


/* ==========================================================================
   05  AUTH PAGES
   ========================================================================== */
.auth-body{display:grid;place-items:center;min-height:100vh;padding:24px;position:relative;overflow:hidden}
.auth-orbs{position:fixed;inset:0;z-index:0;pointer-events:none}
.auth-orb{position:absolute;border-radius:50%;filter:blur(90px)}
.auth-orb--a{width:620px;height:620px;top:-18%;left:-12%;background:radial-gradient(circle,rgba(var(--acc),.22),transparent 66%)}
.auth-orb--b{width:560px;height:560px;bottom:-20%;right:-10%;background:radial-gradient(circle,rgba(var(--gold),.16),transparent 66%)}

.auth-wrap{position:relative;z-index:1;width:100%;max-width:440px}
.auth-card{padding:36px 32px;border-radius:var(--r-xl)}

.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.auth-mark{
  width:46px;height:46px;flex:none;border-radius:6px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(var(--acc),.22),rgba(var(--gold),.12));
  border:1px solid rgba(var(--on),.16);
  box-shadow:inset 0 1px 0 rgba(var(--on),.24);
}
.auth-mark svg{width:28px;height:28px}
.auth-brand strong{display:block;font-family:'Sora',sans-serif;font-size:1rem;color:var(--text-100)}
.auth-brand em{display:block;font-style:normal;font-size:.72rem;color:var(--text-45);letter-spacing:.04em}

.auth-title{font-size:1.5rem;margin-bottom:6px}
.auth-intro{font-size:.9rem;color:var(--text-45);margin-bottom:20px}
.auth-form{margin-top:20px;display:flex;flex-direction:column;gap:16px}
.auth-form .btn{margin-top:6px}
.auth-note{font-size:.78rem;color:var(--text-45);margin-top:20px;line-height:1.65}
.auth-note a{color:var(--gold-500)}
.auth-back{display:block;text-align:center;margin-top:18px;font-size:.82rem;color:var(--text-45);transition:color var(--t-fast)}
.auth-back:hover{color:var(--emerald-400)}

.field-pass{position:relative}
.field-pass input{padding-right:66px}
.pass-toggle{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:.74rem;font-weight:600;color:var(--emerald-400);
  padding:6px 10px;border-radius:8px;transition:background var(--t-fast);
}
.pass-toggle:hover{background:rgba(var(--acc),.12)}


/* ==========================================================================
   06  APP SHELL
   ========================================================================== */
.app{display:flex;min-height:100vh}

.sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);z-index:40;
  display:flex;flex-direction:column;
  padding:18px 14px;
  background:var(--shell-bg);
  border-right:1px solid var(--shell-brd);
  transition:transform .35s var(--ease);
}
.sidebar__brand{display:flex;align-items:center;gap:11px;padding:6px 8px 20px;border-bottom:1px solid rgba(var(--on),.07);margin-bottom:14px}
.sidebar__mark{
  width:40px;height:40px;flex:none;border-radius:4px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(var(--acc),.22),rgba(var(--gold),.12));
  border:1px solid rgba(var(--on),.16);
}
.sidebar__mark svg{width:25px;height:25px}
.sidebar__brand strong{display:block;font-family:'Sora',sans-serif;font-size:.92rem;color:var(--text-100);line-height:1.2}
.sidebar__brand em{display:block;font-style:normal;font-size:.66rem;color:var(--text-45);letter-spacing:.04em;margin-top:2px}

.sidebar__label{
  font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-45);padding:16px 12px 8px;
}
.sidebar__nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
.sidebar__link{
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;border-radius:4px;
  font-size:.9rem;font-weight:500;color:var(--text-70);
  border:1px solid transparent;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.sidebar__link .ico{width:18px;height:18px;color:var(--text-45);transition:color var(--t-fast)}
.sidebar__link:hover{background:rgba(var(--on),.055);color:var(--text-100)}
.sidebar__link:hover .ico{color:var(--green-600)}
.sidebar__link.is-active{
  background:rgba(var(--acc),.09);
  border-color:rgba(var(--acc),.22);color:var(--green-700);font-weight:600;
}
.sidebar__link.is-active .ico{color:var(--green-600)}
.sidebar__count{
  margin-left:auto;font-size:.7rem;font-weight:700;
  min-width:22px;height:22px;padding:0 7px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:rgba(var(--bad),.12);color:#8E2A12;
}

.sidebar__foot{padding-top:14px;border-top:1px solid rgba(var(--on),.07);margin-top:10px}
.sidebar__user{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:4px;background:rgba(var(--on),.04)}
.sidebar__avatar{
  width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:'Sora',sans-serif;font-size:.85rem;font-weight:600;color:var(--on-acc);
  background:var(--grad-gold);
}
.sidebar__user strong{display:block;font-size:.83rem;line-height:1.25}
.sidebar__user small{display:block;font-size:.7rem;color:var(--text-45)}
.sidebar__logout{margin-left:auto;color:var(--text-45);padding:6px;border-radius:8px;transition:color var(--t-fast),background var(--t-fast)}
.sidebar__logout:hover{color:var(--danger);background:rgba(var(--bad),.1)}
.sidebar__logout .ico{width:18px;height:18px}

.main{flex:1;min-width:0;margin-left:var(--sidebar-w);display:flex;flex-direction:column}

.topbar{
  position:sticky;top:0;z-index:30;
  height:var(--topbar-h);display:flex;align-items:center;gap:14px;
  padding:0 24px;
  background:var(--shell-bg);
  border-bottom:1px solid var(--shell-brd);
}
.topbar__title{font-size:1.05rem;font-weight:600}
.topbar__spacer{flex:1}
.topbar__actions{display:flex;align-items:center;gap:9px}
.menu-btn{display:none;width:40px;height:40px;border-radius:4px;place-items:center;background:rgba(var(--on),.07);border:1px solid rgba(var(--on),.13)}
.menu-btn .ico{width:21px;height:21px}

.content{padding:26px 24px 60px;flex:1}
.sidebar-backdrop{
  position:fixed;inset:0;z-index:35;background:var(--scrim);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
body.nav-open .sidebar-backdrop{opacity:1;visibility:visible}


/* ==========================================================================
   07  PAGE HEADER & SECTIONS
   ========================================================================== */
.page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-head h1{font-size:1.5rem}
.page-head p{font-size:.87rem;color:var(--text-45);margin-top:4px}
.page-head__actions{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}

.card{padding:22px;border-radius:var(--r-lg)}
.card__head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.card__head h2{font-size:1.02rem}
.card__head .btn{margin-left:auto}
.card + .card{margin-top:18px}

.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.split-2{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:start}

/* Grid ke andar wali tables khud scroll karein — poora page nahi */
.grid > *,.split-2 > *,.tiles > *{min-width:0}
.table-wrap,.chart__wrap{max-width:100%}


/* ==========================================================================
   08  STAT TILES & CHART
   ========================================================================== */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin-bottom:22px}
/* 5 chhote tile ek hi line me — PM Surya Ghar import jaisi jagah ke liye */
.tiles--5{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.tile{padding:20px;border-radius:var(--r-md);display:flex;gap:14px;align-items:flex-start;transition:transform var(--t-base),border-color var(--t-base)}
.tile:hover{transform:translateY(-3px);border-color:rgba(var(--acc),.34)}
.tile__icon{
  width:44px;height:44px;flex:none;border-radius:4px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(var(--acc),.55),rgba(var(--acc),.2));
  border:1px solid rgba(var(--on),.14);color:var(--gold-400);
}
.tile__icon .ico{width:21px;height:21px}
.tile--gold .tile__icon{background:linear-gradient(145deg,rgba(var(--gold),.5),rgba(var(--gold),.22));color:var(--gold-500)}
.tile__value{display:block;font-family:'Sora',sans-serif;font-size:1.7rem;font-weight:700;color:var(--text-100);line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tile__label{display:block;font-size:.79rem;color:var(--text-45);margin-top:3px}
.tile__sub{display:block;font-size:.72rem;color:var(--emerald-400);margin-top:5px}

.chart{display:flex;align-items:flex-end;gap:10px;height:206px;padding-top:28px}
.chart__col{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0}
.chart__bar{
  width:100%;max-width:52px;border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg,var(--emerald-400),rgba(var(--acc),.5));
  min-height:4px;position:relative;
  transition:filter var(--t-fast);
}
.chart__col:hover .chart__bar{filter:brightness(1.25)}
.chart__bar span{
  position:absolute;top:-21px;left:50%;transform:translateX(-50%);
  font-size:.74rem;font-weight:600;color:var(--text-100);font-variant-numeric:tabular-nums;
}
.chart__label{font-size:.72rem;color:var(--text-45);white-space:nowrap}
.chart__wrap{overflow-x:auto}


/* ==========================================================================
   09  TABLES
   ========================================================================== */
.table-wrap{overflow-x:auto;border-radius:var(--r-md)}
table.data{width:100%;border-collapse:collapse;min-width:760px}
table.data th{
  text-align:left;font-family:'Sora',sans-serif;font-size:.71rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--text-45);
  padding:12px 14px;border-bottom:1px solid rgba(var(--on),.1);white-space:nowrap;
}
table.data td{padding:13px 14px;border-bottom:1px solid rgba(var(--on),.055);font-size:.885rem;vertical-align:middle}
table.data tbody tr{transition:background var(--t-fast)}
table.data tbody tr:hover{background:rgba(var(--on),.035)}
table.data tbody tr:last-child td{border-bottom:0}
table.data .t-name{font-weight:600;color:var(--text-100)}
table.data .t-sub{display:block;font-size:.76rem;color:var(--text-45);margin-top:2px}
.row-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:nowrap}
@media (max-width:640px){.row-actions{flex-wrap:wrap}}
/* Text wale button ko apni chaudai milni chahiye, warna shabd ek dusre
   par chadh jaate hain. Sirf icon wale button chaukor rehte hain. */
.row-actions .btn{padding:7px 11px;min-height:32px;border-radius:4px;white-space:nowrap}
.row-actions .act-call,.row-actions .act-wa,.row-actions .act-open,
.row-actions .act-zoho,.row-actions .q-remove,.row-actions .btn--icon{
  padding:7px;width:32px;height:32px;justify-content:center
}
.row-actions .btn .ico{width:16px;height:16px}
.act-call{background:rgba(var(--info),.10);color:#12508F;border:1px solid rgba(var(--info),.24)}
.act-wa{background:rgba(var(--acc),.12);color:var(--green-700);border:1px solid rgba(var(--acc),.26)}
.act-open{background:rgba(var(--on),.07);color:var(--text-70);border:1px solid rgba(var(--on),.13)}
.act-zoho{background:rgba(var(--gold),.11);color:var(--gold-400);border:1px solid rgba(var(--gold),.28)}
.act-zoho.is-done{background:rgba(var(--acc),.13);color:var(--green-600);border-color:rgba(var(--acc),.30)}

.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:16px;align-items:center}
.filters input[type=search],.filters input[type=text],.filters input[type=date],
.filters input[type=url],.filters select{
  min-width:150px;width:auto;flex:0 1 200px;padding:9px 13px;font-size:.86rem;
}
.filters input[type=search]{flex:1 1 260px;max-width:380px}
.filters input[type=date]{flex:0 0 auto;min-width:auto}
.filters .btn{padding:9px 16px}
.chipbar{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.chipbar a{
  padding:7px 15px;border-radius:var(--r-pill);font-size:.8rem;font-weight:500;
  background:rgba(var(--on),.05);border:1px solid rgba(var(--on),.1);color:var(--text-70);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.chipbar a:hover{background:rgba(var(--on),.09);color:var(--text-100)}
.chipbar a.is-active{background:linear-gradient(135deg,rgba(var(--acc),.2),rgba(var(--gold),.1));border-color:rgba(var(--acc),.4);color:var(--text-100)}
.chipbar a b{font-weight:700;margin-left:5px;color:var(--gold-400)}


/* ==========================================================================
   10  FORMS
   ========================================================================== */
.field{display:flex;flex-direction:column}
.field > label,.field__legend{font-size:.8rem;font-weight:500;color:var(--text-70);margin-bottom:7px}
.field .hint{font-size:.75rem;color:var(--text-45);margin-top:6px}
.req{color:var(--gold-500)}

input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],
input[type=date],input[type=search],input[type=url],input[type=time],input[type=datetime-local],
select,textarea{
  width:100%;padding:11px 14px;font-size:15px;
  border-radius:4px;color:var(--text-100);
  background:rgba(var(--on),.045);
  border:1px solid rgba(var(--on),.11);
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
  -webkit-appearance:none;appearance:none;
}
textarea{resize:vertical;min-height:92px;line-height:1.6}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232DD48D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;
  padding-right:40px;cursor:pointer;
}
select option{background:var(--panel-solid);color:var(--text-100)}
input::placeholder,textarea::placeholder{color:var(--text-25)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:rgba(var(--acc),.55);background:rgba(var(--on),.07);
  box-shadow:0 0 0 3px rgba(var(--acc),.12);
}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}
input[readonly]{background:rgba(var(--on),.025);color:var(--text-45)}

.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.form-grid .full{grid-column:1 / -1}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid rgba(var(--on),.08)}


/* ==========================================================================
   11  TIMELINE (project stages)
   ========================================================================== */
.progress{height:7px;border-radius:7px;background:rgba(var(--on),.09);overflow:hidden}
.progress__bar{height:100%;border-radius:7px;background:linear-gradient(90deg,var(--emerald-400),var(--gold-500));transition:width .5s var(--ease)}
.progress-row{display:flex;align-items:center;gap:12px}
.progress-row .progress{flex:1}
.progress-row b{font-size:.8rem;color:var(--text-100);font-variant-numeric:tabular-nums;min-width:38px;text-align:right}

.stages{position:relative;padding-left:34px;margin-top:6px}
.stages::before{content:'';position:absolute;left:11px;top:14px;bottom:14px;width:2px;background:rgba(var(--on),.09);border-radius:2px}
.stage{position:relative;padding:16px 0}
.stage + .stage{border-top:1px solid rgba(var(--on),.055)}
.stage__dot{
  position:absolute;left:-34px;top:20px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--field-bg);border:2px solid rgba(var(--on),.16);color:transparent;
  font-size:.7rem;font-weight:700;z-index:1;
}
.stage__dot .ico{width:13px;height:13px;stroke-width:3.2}
.stage.is-done .stage__dot{background:var(--grad-em);border-color:rgba(var(--acc),.6);color:#fff;box-shadow:0 0 16px rgba(var(--acc),.5)}
.stage.is-progress .stage__dot{background:rgba(var(--gold),.2);border-color:var(--gold-500);color:var(--gold-400)}
.stage__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stage__name{font-family:'Sora',sans-serif;font-size:.95rem;font-weight:600;color:var(--text-100)}
.stage.is-done .stage__name{color:var(--emerald-400)}
.stage__meta{font-size:.78rem;color:var(--text-45);margin-top:4px}
.stage__form{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px;align-items:center}
.stage__form select,.stage__form input{padding:8px 12px;font-size:.83rem;width:auto;min-width:135px}
.stage__form input[type=text]{flex:1;min-width:180px}


/* ==========================================================================
   12  QUOTATION BUILDER
   ========================================================================== */
.qitems{width:100%;border-collapse:collapse;min-width:720px}
.qitems th{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-45);text-align:left;padding:9px 8px;border-bottom:1px solid rgba(var(--on),.1)}
.qitems td{padding:7px 8px;border-bottom:1px solid rgba(var(--on),.05);vertical-align:middle}
.qitems input{padding:9px 11px;font-size:.86rem}
.qitems .col-amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--text-100);white-space:nowrap}
.qitems .col-del{width:44px}
.q-remove{width:32px;height:32px;border-radius:4px;display:grid;place-items:center;color:var(--danger);background:rgba(var(--bad),.1);border:1px solid rgba(var(--bad),.25)}
.q-remove .ico{width:15px;height:15px}

.totals{margin-left:auto;max-width:380px;margin-top:18px}
.totals__row{display:flex;justify-content:space-between;gap:20px;padding:9px 0;font-size:.88rem;border-bottom:1px solid rgba(var(--on),.06)}
.totals__row span{color:var(--text-45)}
.totals__row b{color:var(--text-100);font-variant-numeric:tabular-nums}
.totals__row--grand{border-bottom:0;padding-top:14px;margin-top:6px;border-top:1px solid rgba(var(--on),.14)}
.totals__row--grand span{color:var(--text-100);font-weight:600}
.totals__row--grand b{font-family:'Sora',sans-serif;font-size:1.3rem;color:var(--gold-400)}
.totals__row--net b{color:var(--emerald-400);font-size:1.05rem}


/* ==========================================================================
   13  ALERTS, EMPTY STATES, PAGINATION
   ========================================================================== */
.alert{padding:15px 18px;border-radius:6px;margin-bottom:18px;font-size:.88rem;line-height:1.65}
.alert h2{font-size:1.05rem;margin-bottom:7px}
.alert p + p{margin-top:8px}
.alert ul{list-style:disc;padding-left:20px;display:flex;flex-direction:column;gap:5px}
.alert--ok{background:rgba(var(--acc),.1);border:1px solid rgba(var(--acc),.3);color:var(--green-600)}
.alert--ok h2{color:var(--emerald-400)}
.alert--err{background:var(--danger-bg);border:1px solid rgba(var(--bad),.32);color:var(--danger)}
.alert--err h2{color:var(--danger)}
.alert--warn{background:rgba(var(--gold),.1);border:1px solid rgba(var(--gold),.3);color:var(--gold-500)}
.alert--warn h2{color:var(--gold-400)}
.alert--info{background:rgba(var(--on),.05);border:1px solid rgba(var(--on),.11);color:var(--text-70)}

/* upgrade.php ki "yeh banega" list */
.ticklist{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:.9rem}
.ticklist li{display:flex;align-items:center;gap:10px;color:var(--text-70)}
.ticklist .ico{width:17px;height:17px;flex:none;color:var(--emerald-400)}
.ticklist code{
  font-size:.85rem;padding:2px 8px;border-radius:7px;
  background:rgba(var(--on),.06);color:var(--text-100);
}

/* Sandesh upar, beech me.

   Pehle ye neeche-daayen kone me aata tha — theek wahan jahan aankh kabhi
   nahi jaati, kyunki kaam hamesha upar chal raha hota hai. Button dabane
   ke baad aadmi upar hi dekhta reh jata tha aur sandesh bina padhe hi
   gayab ho jata tha. Ab wo wahin aata hai jahan nazar pehle se hai.

   z-index modal se neeche (200) aur baaki sab se upar — sandesh ko modal
   dhak sakta hai, par topbar ya sidebar nahi. */
.flash{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);
  z-index:190;width:max-content;max-width:min(560px,calc(100vw - 32px));
  padding:14px 22px;border-radius:6px;font-size:.88rem;text-align:center;
  box-shadow:var(--sh-2);
  animation:flashIn .35s var(--ease);
}
@keyframes flashIn{
  from{opacity:0;transform:translate(-50%,-16px)}
  to  {opacity:1;transform:translate(-50%,0)}
}

.empty{text-align:center;padding:52px 20px}
.empty__icon{
  width:62px;height:62px;margin:0 auto 16px;border-radius:6px;display:grid;place-items:center;
  background:rgba(var(--on),.05);border:1px solid rgba(var(--on),.1);color:var(--text-25);
}
.empty__icon .ico{width:28px;height:28px}
.empty h3{font-size:1.05rem;margin-bottom:7px}
.empty p{font-size:.87rem;color:var(--text-45);max-width:420px;margin:0 auto 18px}

.pager{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:22px;flex-wrap:wrap}
.pager a,.pager span{
  min-width:36px;height:36px;padding:0 11px;border-radius:4px;
  display:grid;place-items:center;font-size:.84rem;
  background:rgba(var(--on),.05);border:1px solid rgba(var(--on),.1);color:var(--text-70);
  transition:background var(--t-fast),color var(--t-fast);
}
.pager a:hover{background:rgba(var(--on),.1);color:var(--text-100)}
.pager .is-current{background:var(--grad-gold);color:var(--on-acc);font-weight:700;border-color:transparent}
.pager .is-dots{background:none;border:0}

.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:.88rem}
.kv dt{color:var(--text-45);white-space:nowrap}
.kv dd{color:var(--text-100)}

.notes{display:flex;flex-direction:column;gap:11px;margin-top:6px}
.note-item{padding:13px 15px;border-radius:4px;background:rgba(var(--on),.04);border:1px solid rgba(var(--on),.08)}
.note-item p{font-size:.88rem;color:var(--text-70);white-space:pre-wrap}
.note-item small{display:block;font-size:.73rem;color:var(--text-25);margin-top:7px}


/* ==========================================================================
   13b SUPPORT TICKETS — thread + badges
   ========================================================================== */
.badge--tk-open    {background:rgba(var(--gold),.14);color:var(--gold-400);border-color:rgba(var(--gold),.32)}
.badge--tk-progress{background:rgba(var(--info),.13);color:#12508F;border-color:rgba(var(--info),.3)}
.badge--tk-waiting {background:rgba(var(--plum),.13);color:#5B33A0;border-color:rgba(var(--plum),.3)}
.badge--tk-resolved{background:rgba(var(--acc),.18);color:var(--green-600);border-color:rgba(var(--acc),.4)}
.badge--tk-closed  {background:rgba(var(--on),.06);color:var(--text-70);border-color:rgba(var(--on),.12)}

/* baat-cheet ka thread */
.thread{display:flex;flex-direction:column;gap:13px}
.msg{
  padding:14px 16px;border-radius:6px;
  border:1px solid rgba(var(--on),.08);background:rgba(var(--on),.04);
  max-width:92%;
}
.msg p{font-size:.9rem;line-height:1.7;color:var(--text-70);white-space:pre-wrap;word-break:break-word}
.msg__top{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:8px;margin-bottom:8px;
}
.msg__top strong{font-size:.85rem;color:var(--text-100)}
.msg__top span{font-size:.73rem;color:var(--text-25)}
.msg__tag{font-style:normal;color:var(--gold-400);font-weight:600}

/* customer ki baat — baayin taraf */
.msg--cust{border-left:3px solid rgba(var(--on),.18)}

/* humara jawab — daayin taraf, hara */
.msg--staff{
  margin-left:auto;
  background:rgba(var(--acc),.09);
  border-color:rgba(var(--acc),.24);
  border-right:3px solid var(--emerald-400);
}

/* internal note — customer ko nahi dikhta, isliye alag look */
.msg--note{
  background:rgba(var(--gold),.07);
  border-color:rgba(var(--gold),.22);
  border-style:dashed;
}

/* checkbox + label ek line me */
.check{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.85rem;color:var(--text-70)}
.check input{width:17px;height:17px;flex:none;accent-color:var(--emerald-400);cursor:pointer}

@media (max-width:640px){
  .msg{max-width:100%}
}

/* ---- Sahayak (support ka madadgaar) ---- */
.assist{border-color:rgba(var(--gold),.24)}
.assist__spark{color:var(--gold-500);margin-right:6px}

.assist__line{
  font-size:.92rem;line-height:1.7;color:var(--text-70);
  padding:12px 15px;border-radius:4px;margin-bottom:14px;
  background:rgba(var(--on),.04);border:1px solid rgba(var(--on),.08);
}
.assist__line b{color:var(--text-45);font-weight:500;margin-right:4px}

.assist__hints{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.assist__hint{
  font-size:.85rem;line-height:1.6;padding:10px 14px;border-radius:4px;
  background:rgba(var(--info),.09);border:1px solid rgba(var(--info),.24);color:#12508F;
}
.assist__hint--warn{background:rgba(var(--gold),.09);border-color:rgba(var(--gold),.26);color:var(--gold-500)}

.assist__h3{
  font-family:'Sora',sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-25);
  margin:20px 0 11px;
}
.assist .card__head + .assist__h3{margin-top:4px}

/* Form ke andar chhota heading — do hisson ko alag dikhane ke liye */
.sub-head{
  font-family:'Sora',sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-25);
  margin:20px 0 6px;padding-top:16px;border-top:1px solid rgba(var(--on),.08);
}

.assist__steps{list-style:none;counter-reset:a;display:flex;flex-direction:column;gap:9px}
.assist__steps li{
  position:relative;padding-left:29px;counter-increment:a;
  font-size:.89rem;line-height:1.65;color:var(--text-70);
}
.assist__steps li::before{
  content:counter(a);position:absolute;left:0;top:2px;
  width:20px;height:20px;border-radius:7px;display:grid;place-items:center;
  font-family:'Sora',sans-serif;font-size:.67rem;font-weight:700;
  background:rgba(var(--acc),.14);color:var(--emerald-400);
  border:1px solid rgba(var(--acc),.28);
}

.assist__drafts{display:flex;flex-wrap:wrap;gap:8px}
.assist__draft{
  padding:9px 16px;border-radius:var(--r-pill);cursor:pointer;
  font-family:'Sora',sans-serif;font-size:.82rem;font-weight:500;
  background:rgba(var(--gold),.10);border:1px solid rgba(var(--gold),.28);color:var(--gold-400);
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast);
}
.assist__draft:hover{background:rgba(var(--gold),.18);border-color:rgba(var(--gold),.5);transform:translateY(-1px)}

.assist__foot{
  font-size:.78rem;line-height:1.65;color:var(--text-25);
  margin-top:18px;padding-top:14px;border-top:1px solid rgba(var(--on),.07);
}


/* ==========================================================================
   14  PRINT (quotation)
   ========================================================================== */
.print-only{display:none}

@media print{
  @page{size:A4;margin:14mm}
  body{background:#fff !important;color:#111 !important;font-size:12px;background-image:none !important}
  .no-print,.sidebar,.topbar,.sidebar-backdrop,.flash{display:none !important}
  .main{margin-left:0}
  .content{padding:0}
  .print-only{display:block}
  .glass,.glass--1,.glass--2,.glass--3{
    background:#fff !important;border:1px solid #ddd !important;box-shadow:none !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  }
  .glass::before{display:none}
  h1,h2,h3,h4,strong,b,td,th,p,span,dt,dd,small{color:#111 !important}
  .muted,small{color:#555 !important}
  a{color:#111 !important;text-decoration:none}
  table.data th,.qitems th{color:#333 !important;border-bottom:1px solid #999 !important}
  table.data td,.qitems td{border-bottom:1px solid #e2e2e2 !important}
  .totals__row--grand b{color:#111 !important}
}


/* ==========================================================================
   15  RESPONSIVE
   ========================================================================== */
@media (max-width:1150px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .split-2{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:980px){
  .sidebar{transform:translateX(-100%)}
  body.nav-open .sidebar{transform:none;box-shadow:0 0 60px rgba(var(--sh),.6)}
  .main{margin-left:0}
  .menu-btn{display:grid}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:680px){
  body{font-size:14.5px}
  .content{padding:18px 15px 50px}
  .topbar{padding:0 12px;gap:9px}
  .topbar__title{display:none}          /* naam page-head me pehle se hai */
  .topbar__actions{gap:7px}
  .topbar__actions .btn{padding:8px 12px;font-size:.78rem}
  .tiles,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .page-head{align-items:flex-start}
  .page-head__actions{margin-left:0;width:100%}
  .page-head__actions .btn{flex:1}
  .card{padding:17px}
  .auth-card{padding:28px 22px}
  .filters input,.filters select{min-width:0;width:100%}
  .filters{flex-direction:column;align-items:stretch}
  .totals{max-width:none}
}


/* ==========================================================================
   16  REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  .glass--1{background:var(--panel-solid)}
  .glass--2{background:var(--panel-solid)}
  .glass--3{background:var(--panel-solid)}
  .sidebar,.topbar{background:var(--shell-bg)}
}



/* ==========================================================================
   15  ADVANCED — search, tasks, payments, documents, activity, referrals
   ========================================================================== */

/* ---- Ctrl+K search ---- */
.gsearch-btn{
  display:flex;align-items:center;gap:9px;
  margin-left:18px;padding:8px 14px;border-radius:var(--r-pill);cursor:pointer;
  font-size:.83rem;color:var(--text-45);
  background:rgba(var(--on),.05);border:1px solid rgba(var(--on),.10);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.gsearch-btn:hover{background:rgba(var(--on),.09);border-color:rgba(var(--acc),.3);color:var(--text-100)}
.gsearch-btn .ico{width:15px;height:15px}
.gsearch-btn kbd{
  font-family:inherit;font-size:.68rem;padding:2px 7px;border-radius:6px;
  background:rgba(var(--on),.06);border:1px solid rgba(var(--on),.14);color:var(--text-45);
}

.gsearch{position:fixed;inset:0;z-index:130;display:flex;justify-content:center;padding:80px 20px 20px}
.gsearch[hidden]{display:none}
.gsearch__scrim{
  position:absolute;inset:0;background:var(--scrim);
  opacity:0;transition:opacity .22s var(--ease);
}
.gsearch.is-open .gsearch__scrim{opacity:1}
.gsearch__box{
  position:relative;z-index:1;width:min(640px,100%);max-height:calc(100vh - 120px);
  display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  opacity:0;transform:translateY(-10px);
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.gsearch.is-open .gsearch__box{opacity:1;transform:none}

.gsearch__field{
  display:flex;align-items:center;gap:11px;flex:none;
  padding:16px 18px;border-bottom:1px solid rgba(var(--on),.09);
}
.gsearch__field .ico{width:19px;height:19px;color:var(--text-45);flex:none}
.gsearch__field input{
  flex:1;min-width:0;border:0;background:none;padding:0;font-size:1rem;color:var(--text-100);
}
.gsearch__field input:focus{outline:none}
.gsearch__field kbd{
  flex:none;font-family:inherit;font-size:.68rem;padding:3px 8px;border-radius:6px;
  background:rgba(var(--on),.06);border:1px solid rgba(var(--on),.14);color:var(--text-45);
}

.gsearch__out{flex:1;overflow-y:auto;padding:10px}
.gsearch__hint{font-size:.85rem;color:var(--text-45);padding:16px 10px;line-height:1.6}
.gsearch__group{font-family:'Sora',sans-serif;font-size:.68rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-25);padding:12px 12px 7px}
.gres{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:4px;
  transition:background var(--t-fast);
}
.gres:hover,.gres.is-sel{background:rgba(var(--acc),.12)}
.gres__ico{
  width:34px;height:34px;flex:none;border-radius:4px;display:grid;place-items:center;
  background:rgba(var(--on),.06);border:1px solid rgba(var(--on),.10);color:var(--text-45);
}
.gres__ico .ico{width:16px;height:16px}
.gres__txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.gres__txt strong{font-size:.9rem;color:var(--text-100);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gres__txt small{font-size:.75rem;color:var(--text-45);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Follow-up tasks ---- */
.tasks{display:flex;flex-direction:column;gap:10px}
.task{
  display:flex;align-items:flex-start;gap:13px;
  padding:14px 16px;border-radius:var(--r-md);
  background:rgba(var(--on),.04);border:1px solid rgba(var(--on),.09);
  transition:border-color var(--t-fast),background var(--t-fast),opacity var(--t-fast);
}
.task.is-today{border-color:rgba(var(--gold),.34);background:rgba(var(--gold),.06)}
.task.is-late{border-color:rgba(var(--bad),.34);background:rgba(var(--bad),.055)}
.task.is-done{opacity:.5}
.task.is-done .task__title{text-decoration:line-through}

.task__tick{flex:none}
.task__tick button{
  width:26px;height:26px;border-radius:4px;display:grid;place-items:center;cursor:pointer;
  background:rgba(var(--on),.05);border:1px solid rgba(var(--on),.16);color:transparent;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.task__tick button .ico{width:15px;height:15px;stroke-width:3}
.task__tick button:hover{border-color:var(--emerald-400);color:rgba(var(--acc),.5)}
.task.is-done .task__tick button{background:linear-gradient(145deg,#17593A,#1B6E46);border-color:transparent;color:var(--on-acc)}

.task__body{flex:1;min-width:0}
.task__title{font-size:.94rem;color:var(--text-100);line-height:1.5;margin:0}
.task__meta{font-size:.78rem;color:var(--text-45);margin:5px 0 0;line-height:1.55}
.task__meta a{color:var(--emerald-400)}
.task__type{
  display:inline-block;padding:2px 9px;border-radius:var(--r-pill);margin-right:7px;
  font-size:.68rem;font-weight:600;letter-spacing:.05em;
  background:rgba(var(--on),.07);border:1px solid rgba(var(--on),.11);color:var(--text-70);
}
.task__note{font-size:.82rem;color:var(--text-45);margin:7px 0 0;line-height:1.6;white-space:pre-wrap}
.task__acts{display:flex;align-items:center;gap:6px;flex:none}

/* ---- Payments ---- */
.paybar{margin-bottom:20px}
.paybar__row{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:11px}
.paybar__row span{display:flex;flex-direction:column;gap:3px}
.paybar__row small{font-size:.73rem;color:var(--text-45)}
.paybar__row b{font-family:'Sora',sans-serif;font-size:1.05rem;color:var(--text-100)}

/* ---- Documents ---- */
.docup{padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid rgba(var(--on),.07)}
input[type=file]{
  width:100%;padding:10px 12px;border-radius:4px;font-size:.85rem;
  background:rgba(var(--on),.05);border:1px dashed rgba(var(--on),.18);color:var(--text-70);
}
input[type=file]::file-selector-button{
  margin-right:12px;padding:7px 14px;border-radius:var(--r-pill);cursor:pointer;
  font:inherit;font-size:.8rem;font-weight:600;
  background:rgba(var(--on),.08);border:1px solid rgba(var(--on),.14);color:var(--text-100);
}

.docs{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.doc{
  display:flex;align-items:center;gap:12px;
  padding:11px 13px;border-radius:4px;
  background:rgba(var(--on),.04);border:1px solid rgba(var(--on),.08);
}
.doc__ext{
  width:42px;height:42px;flex:none;border-radius:4px;display:grid;place-items:center;
  font-family:'Sora',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.04em;
  background:rgba(var(--on),.06);border:1px solid rgba(var(--on),.11);color:var(--text-45);
}
.doc--pdf   .doc__ext{background:rgba(var(--bad),.13);border-color:rgba(var(--bad),.28);color:var(--danger)}
.doc--image .doc__ext{background:rgba(var(--acc),.13);border-color:rgba(var(--acc),.28);color:var(--emerald-400)}
.doc--sheet .doc__ext{background:rgba(var(--acc),.15);border-color:rgba(var(--acc),.3);color:var(--green-600)}
.doc__txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.4}
.doc__txt a{font-size:.9rem;color:var(--text-100);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc__txt a:hover{color:var(--emerald-400)}
.doc__txt small{font-size:.74rem;color:var(--text-45);margin-top:3px}
.doc__acts{display:flex;gap:6px;flex:none}
.hidden-form{display:none}

/* ---- Activity log ---- */
.actlog{display:flex;flex-direction:column;gap:2px}
.actlog__day{
  font-family:'Sora',sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-25);
  padding:18px 0 8px;
}
.actrow{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 12px;border-radius:4px;
  transition:background var(--t-fast);
}
.actrow:hover{background:rgba(var(--on),.035)}
.actrow__who{
  width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:'Sora',sans-serif;font-size:.76rem;font-weight:700;color:var(--on-acc);
  background:var(--grad-gold);
}
.actrow__txt{flex:1;min-width:0;font-size:.86rem;color:var(--text-70);line-height:1.6}
.actrow__txt strong{color:var(--text-100);margin-right:5px}
.actrow__txt a{color:var(--emerald-400)}
.actrow__txt small{display:block;font-size:.76rem;color:var(--text-25);margin-top:2px}
.actrow__time{flex:none;font-size:.75rem;color:var(--text-25);white-space:nowrap;padding-top:3px}

.tstatus{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:var(--r-pill);
  font-size:.735rem;font-weight:600;letter-spacing:.03em;white-space:nowrap;
  border:1px solid transparent;
}
.tstatus::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.tstatus--new      {background:rgba(var(--acc),.13);color:var(--green-600);border-color:rgba(var(--acc),.3)}
.tstatus--contacted{background:rgba(var(--info),.13);color:#12508F;border-color:rgba(var(--info),.3)}
.tstatus--visited  {background:rgba(var(--plum),.13);color:#5B33A0;border-color:rgba(var(--plum),.3)}
.tstatus--converted{background:rgba(var(--acc),.18);color:var(--green-600);border-color:rgba(var(--acc),.4)}
.tstatus--paid     {background:rgba(var(--gold),.16);color:var(--gold-400);border-color:rgba(var(--gold),.36)}
.tstatus--rejected {background:rgba(var(--bad),.13);color:var(--danger);border-color:rgba(var(--bad),.3)}

/* ---- Referral cards ---- */
.reflist--admin{display:flex;flex-direction:column;gap:13px}
.refcard{
  padding:16px 18px;border-radius:var(--r-md);
  background:rgba(var(--on),.04);border:1px solid rgba(var(--on),.09);
}
.refcard__head{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:14px}
.refcard__no{font-family:'Sora',sans-serif;font-size:.88rem;font-weight:700;color:var(--gold-400)}
.refcard__when{margin-left:auto;font-size:.76rem;color:var(--text-25)}

.refcard__pair{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.refcard__side{display:flex;flex-direction:column;gap:2px;min-width:0}
.refcard__side small{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-25)}
.refcard__side strong{font-size:.98rem;color:var(--text-100)}
.refcard__side > span{font-size:.8rem;color:var(--text-45)}
.refcard__side--target strong{color:var(--gold-400)}
.refcard__acts{display:flex;gap:6px;margin-top:7px}
.refcard__arrow{
  width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--acc),.10);border:1px solid rgba(var(--acc),.24);color:var(--emerald-400);
}
.refcard__arrow .ico{width:16px;height:16px}
.refcard__note{
  font-size:.85rem;color:var(--text-70);line-height:1.6;
  margin:14px 0 0;padding:10px 13px;border-radius:4px;
  background:rgba(var(--on),.035);
}
.refcard__foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  margin-top:14px;padding-top:14px;border-top:1px solid rgba(var(--on),.08);
}
.refcard__form{display:flex;align-items:center;gap:7px;flex-wrap:wrap;max-width:100%}
/* Phone par yeh line 390px se bahar nikal rahi thi — ab lapet kar
   neeche aa jaati hai aur kuch bhi kinare se bahar nahi jaata. */
.refcard__form > *{min-width:0}
.refcard__form select{padding:7px 28px 7px 11px;font-size:.8rem;width:auto;min-width:150px}
.refcard__form input[type=number]{padding:7px 10px;font-size:.8rem}
.refcard__paid{font-size:.8rem;color:var(--emerald-400);font-weight:600}

.sidebar__count--warn{background:#8A6205;color:#fff}

.chart--gold .chart__bar{background:var(--grad-gold)}

@media (max-width:760px){
  .refcard__pair{grid-template-columns:1fr}
  .refcard__arrow{transform:rotate(90deg);margin-inline:auto}
  .gsearch{padding-top:40px}
  .gsearch-btn span{display:none}
  .gsearch-btn kbd{display:none}
  .task{flex-wrap:wrap}
  .task__acts{width:100%;justify-content:flex-end}
}



/* ==========================================================================
   16  PERMISSIONS EDITOR
   ========================================================================== */
.permbox{
  border-radius:var(--r-md);overflow:hidden;
  background:rgba(var(--on),.035);border:1px solid rgba(var(--on),.09);
}
.permbox summary{
  display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  padding:13px 16px;font-size:.88rem;color:var(--text-70);
  transition:background var(--t-fast);
}
.permbox summary::-webkit-details-marker{display:none}
.permbox summary:hover{background:rgba(var(--on),.05)}
.permbox summary .ico{width:17px;height:17px;color:var(--gold-400)}
.permbox summary b{
  margin-left:auto;font-family:'Sora',sans-serif;font-size:.78rem;
  padding:3px 10px;border-radius:var(--r-pill);
  background:rgba(var(--acc),.13);border:1px solid rgba(var(--acc),.28);color:var(--emerald-400);
}
.permbox[open] summary{border-bottom:1px solid rgba(var(--on),.08)}
.permform{padding:18px 16px}

.permgroup{
  font-family:'Sora',sans-serif;font-size:.68rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-25);
  margin:18px 0 9px;
}
.permform .permgroup:first-of-type{margin-top:0}

.permgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px}
.permitem{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  padding:11px 13px;border-radius:4px;
  background:rgba(var(--on),.03);border:1px solid rgba(var(--on),.07);
  transition:background var(--t-fast),border-color var(--t-fast);
}
.permitem:hover{background:rgba(var(--on),.06)}
.permitem input{
  width:18px;height:18px;flex:none;margin-top:2px;
  accent-color:var(--emerald-400);cursor:pointer;
}
.permitem span{display:flex;flex-direction:column;line-height:1.4;min-width:0}
.permitem strong{font-size:.86rem;color:var(--text-100)}
.permitem small{font-size:.74rem;color:var(--text-45);margin-top:2px}
.permitem:has(input:checked){background:rgba(var(--acc),.08);border-color:rgba(var(--acc),.26)}

/* ==========================================================================
   MODAL — chhota sa box jo upar khulta hai

   Blur yahan bhi nahi lagaya: box khulte waqt hilta hai, aur hilte waqt
   blur har frame par dobara banana padta hai — sasta phone wahin
   jhilmilane lagta hai. Saaf gehra rang usse behtar kaam karta hai.
   ========================================================================== */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:18px}
.modal[hidden]{display:none!important}
.modal__bg{position:absolute;inset:0;background:var(--scrim);animation:mfade .18s ease}
.modal__in{
  position:relative;width:100%;max-width:560px;max-height:86vh;overflow-y:auto;
  padding:22px;border-radius:var(--r-lg);
  background:var(--field-bg);border:1px solid rgba(var(--on),.16);
  box-shadow:0 24px 64px rgba(var(--sh),.55);
  animation:mpop .22s cubic-bezier(.32,.72,0,1);
}
@keyframes mfade{from{opacity:0}to{opacity:1}}
@keyframes mpop{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .modal__bg,.modal__in{animation:none}
}

/* ==========================================================================
   PM Surya Ghar import — "kya badlega" ki line
   ========================================================================== */
.pm-change{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;
           font-size:.78rem;line-height:1.5;padding:2px 0}
.pm-change + .pm-change{border-top:1px solid rgba(var(--on),.05)}
.pm-change__what{min-width:112px;color:var(--text-45);font-size:.72rem;
                 text-transform:uppercase;letter-spacing:.04em}
.pm-change__old{color:var(--text-45);text-decoration:line-through;
                text-decoration-color:rgba(var(--on),.25)}
.pm-change__old--none{text-decoration:none;font-style:italic}
.pm-change__arrow{color:var(--text-25)}
.pm-change__new{color:var(--text-100);font-weight:600}
@media (max-width:640px){
  .pm-change__what{min-width:100%}
}

/* Chhoti screen par "kya badlega" table ko card jaisa seedha kar do —
   warna sabse zaroori column dayein taraf chhup jata hai. */
@media (max-width:760px){
  .pm-table thead{display:none}
  .pm-table,.pm-table tbody,.pm-table tr,.pm-table td{display:block;width:auto}
  .pm-table tr{padding:12px 0;border-bottom:1px solid rgba(var(--on),.07)}
  .pm-table tr:last-child{border-bottom:0}
  .pm-table td{border:0;padding:3px 0}
  .pm-table td:nth-child(2){margin-bottom:6px}
}

/* ==========================================================================
   "Aur bhi cheezein" — form me chhupa hua hissa
   ========================================================================== */
.more{border-top:1px solid rgba(var(--on),.07);margin:4px 0 16px;padding-top:4px}
.more summary{cursor:pointer;list-style:none;padding:11px 0;
              font-size:.83rem;font-weight:600;color:var(--text-70);
              display:flex;align-items:center;gap:9px}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"+";width:20px;height:20px;flex:none;border-radius:6px;
                      font-size:1.05rem;line-height:1;display:grid;place-items:center;
                      background:rgba(var(--on),.06);border:1px solid rgba(var(--on),.11)}
.more[open] summary::before{content:"–"}
.more summary:hover{color:var(--text-100)}

/* ==========================================================================
   SLA — jawab dene ka waqt
   ========================================================================== */
.sla{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;
     padding:3px 8px;border-radius:999px;white-space:nowrap;letter-spacing:.01em}
.sla--late{background:rgba(var(--bad),.14);color:var(--danger);border:1px solid rgba(var(--bad),.3)}
.sla--soon{background:rgba(var(--gold),.13);color:var(--warn);border:1px solid rgba(var(--gold),.28)}
.sla--ok{background:rgba(var(--on),.05);color:var(--text-45);border:1px solid rgba(var(--on),.09)}

/* ==========================================================================
   Complaint ke saath aayi photo aur machine ki jaankari
   ========================================================================== */
.factbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.factbar span{display:inline-flex;align-items:baseline;gap:6px;font-size:.78rem;
              padding:6px 11px;border-radius:4px;
              background:rgba(var(--on),.045);border:1px solid rgba(var(--on),.08)}
.factbar b{font-weight:600;color:var(--text-45);font-size:.7rem;
           text-transform:uppercase;letter-spacing:.04em}
.factbar code{font-size:.76rem}

.shots{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.shots__i{display:block;width:84px;height:84px;border-radius:4px;overflow:hidden;
          border:1px solid rgba(var(--on),.12);background:rgba(var(--on),.04)}
.shots__i img{width:100%;height:100%;object-fit:cover;display:block}
.shots__i:hover{border-color:rgba(var(--on),.28)}

/* ==========================================================================
   Form ke andar chhote section — lakeer aur uska chhota sa naam
   ========================================================================== */
.sep{border:0;border-top:1px solid rgba(var(--on),.08);margin:20px 0 16px}
.eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
         color:var(--text-45);margin-bottom:10px}

/* ==========================================================================
   Do me se ek chuniye — lead ke safar wala sawaal
   ========================================================================== */
.pick{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.pick__b{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:20px 14px;border-radius:var(--r-md);cursor:pointer;text-align:center;
  font-family:'Sora',sans-serif;font-size:.88rem;font-weight:600;line-height:1.35;
  background:rgba(var(--on),.04);border:1.5px solid rgba(var(--on),.12);
  color:var(--text-70);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.pick__b .ico{width:22px;height:22px}
.pick__b:hover{background:rgba(var(--on),.07);color:var(--text-100)}
.pick__b--yes.is-on{
  background:rgba(var(--acc),.11);border-color:rgba(var(--acc),.5);color:var(--green-700);
}
.pick__b--no.is-on{
  background:rgba(var(--bad),.10);border-color:rgba(var(--bad),.45);color:var(--danger);
}
@media (max-width:520px){ .pick{grid-template-columns:1fr} }

/* ==========================================================================
   Lead ka poora record — kisne, kab, kya kiya
   ========================================================================== */
.trail{position:relative;padding-left:22px}
.trail::before{
  content:'';position:absolute;left:5px;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:rgba(var(--on),.09);
}
.trail__i{position:relative;padding:0 0 20px}
.trail__i:last-child{padding-bottom:2px}
.trail__dot{
  position:absolute;left:-22px;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--panel-solid);border:2px solid rgba(var(--on),.22);
}
.trail__i--move   .trail__dot{background:var(--green-600);border-color:var(--green-600)}
.trail__i--lost   .trail__dot{background:var(--danger);border-color:var(--danger)}
.trail__i--reopen .trail__dot{background:var(--warn);border-color:var(--warn)}
.trail__i--assign .trail__dot{background:#1A5FB4;border-color:#1A5FB4}

.trail__head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:5px}
.trail__head strong{font-size:.86rem;font-weight:600;color:var(--text-100)}
.trail__tag{
  font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:999px;
  background:rgba(var(--acc),.11);color:var(--green-700);
  border:1px solid rgba(var(--acc),.24);
}
.trail__tag--bad {background:rgba(var(--bad),.11);color:var(--danger);border-color:rgba(var(--bad),.26)}
.trail__tag--warn{background:rgba(var(--gold),.12);color:var(--gold-500);border-color:rgba(var(--gold),.28)}
.trail__tag--info{background:rgba(var(--info),.10);color:#12508F;border-color:rgba(var(--info),.24)}

.trail__body{font-size:.88rem;line-height:1.6;color:var(--text-70);margin-bottom:5px}
.trail__when{font-size:.74rem;color:var(--text-45);font-variant-numeric:tabular-nums}

/* ==========================================================================
   Lead ke card — table ki jagah, taaki ek nazar me poora haal dikhe
   ========================================================================== */
.cards{
  display:grid;gap:16px;align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
}
.lcard{
  display:flex;flex-direction:column;
  padding:18px;border-radius:var(--r-md);
}
.lcard--lost{opacity:.86;border-color:rgba(var(--bad),.28)}
.lcard--lost .lcard__name{color:var(--text-45)}

.lcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:11px;margin-bottom:12px}
.lcard__name{
  display:block;font-family:'Sora',sans-serif;font-size:1rem;font-weight:600;
  color:var(--text-100);letter-spacing:-.01em;line-height:1.3;
  overflow-wrap:anywhere;
}
.lcard__name:hover{color:var(--green-600)}
.lcard__sub{display:block;font-size:.79rem;color:var(--text-45);margin-top:3px}

.lcard__lost{
  font-size:.82rem;line-height:1.5;color:var(--danger);margin-bottom:12px;
  padding:9px 11px;border-radius:4px;
  background:rgba(var(--bad),.08);border:1px solid rgba(var(--bad),.18);
}

.lcard__kv{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.lcard__kv > div{display:flex;align-items:baseline;gap:9px;font-size:.83rem}
.lcard__kv dt{
  flex:none;min-width:82px;font-size:.7rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-45);
}
.lcard__kv dd{margin:0;color:var(--text-70);min-width:0;overflow-wrap:anywhere}

.lcard__msg{
  font-size:.82rem;line-height:1.55;color:var(--text-45);
  padding:10px 12px;border-radius:4px;margin-bottom:12px;
  background:rgba(var(--on),.035);border:1px solid rgba(var(--on),.07);
}

.lcard__foot{
  display:flex;align-items:center;justify-content:space-between;gap:11px;
  margin-top:auto;padding-top:12px;border-top:1px solid rgba(var(--on),.07);
}
.lcard__age{font-size:.76rem;color:var(--text-45)}
.lcard__age.is-stale{color:var(--warn);font-weight:600}

@media (max-width:520px){
  .cards{grid-template-columns:1fr}
  .lcard__kv dt{min-width:74px}
}

/* ==========================================================================
   Card ya Timeline — dekhne ka tarika chuniye
   ========================================================================== */
.viewsw{display:inline-flex;gap:3px;margin-bottom:16px;padding:3px;border-radius:var(--r-pill);
        background:rgba(var(--on),.05);border:1px solid rgba(var(--on),.09)}
.viewsw a{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 15px;border-radius:var(--r-pill);
  font-size:.82rem;font-weight:600;color:var(--text-45);
  transition:background var(--t-fast),color var(--t-fast);
}
.viewsw a .ico{width:15px;height:15px}
.viewsw a:hover{color:var(--text-100)}
.viewsw a.is-on{background:var(--panel-solid);color:var(--green-700);box-shadow:var(--sh-1)}

/* ==========================================================================
   Leads ki timeline — kis din, kis waqt, kisne kya kiya
   ========================================================================== */
.tl{position:relative;padding-left:96px}
.tl::before{
  content:'';position:absolute;left:78px;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:rgba(var(--on),.10);
}
.tl__day{position:relative;margin:22px 0 12px}
.tl__day:first-child{margin-top:0}
.tl__day span{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-45);
  padding:5px 12px;border-radius:var(--r-pill);
  background:rgba(var(--on),.06);border:1px solid rgba(var(--on),.10);
}
.tl__i{position:relative;margin-bottom:12px}
.tl__time{
  position:absolute;left:-96px;top:14px;width:66px;text-align:right;
  font-size:.74rem;color:var(--text-45);font-variant-numeric:tabular-nums;
}
.tl__dot{
  position:absolute;left:-23px;top:17px;width:12px;height:12px;border-radius:50%;
  background:var(--panel-solid);border:2px solid rgba(var(--on),.24);z-index:1;
}
.tl__i--move   .tl__dot{background:var(--green-600);border-color:var(--green-600)}
.tl__i--lost   .tl__dot{background:var(--danger);border-color:var(--danger)}
.tl__i--reopen .tl__dot{background:var(--warn);border-color:var(--warn)}
.tl__i--assign .tl__dot{background:#1A5FB4;border-color:#1A5FB4}
.tl__i--aayi   .tl__dot{background:var(--gold-500);border-color:var(--gold-500)}

.tl__card{
  background:var(--panel-solid);border:1px solid var(--g2-brd);
  border-radius:var(--r-md);padding:13px 16px;box-shadow:var(--sh-1);
}
.tl__head{display:flex;align-items:center;justify-content:space-between;gap:11px;flex-wrap:wrap;margin-bottom:6px}
.tl__name{font-family:'Sora',sans-serif;font-size:.93rem;font-weight:600;color:var(--text-100)}
.tl__name:hover{color:var(--green-600)}
.tl__what{font-size:.83rem;color:var(--text-70);margin-bottom:4px}
.tl__note{
  font-size:.83rem;line-height:1.55;color:var(--text-70);margin:7px 0;
  padding:8px 11px;border-radius:8px;
  background:rgba(var(--on),.035);border:1px solid rgba(var(--on),.07);
}
.tl__by{font-size:.75rem;color:var(--text-45)}

@media (max-width:680px){
  .tl{padding-left:26px}
  .tl::before{left:5px}
  .tl__dot{left:-26px}
  .tl__time{position:static;display:block;width:auto;text-align:left;margin-bottom:5px}
}


/* ==========================================================================
   WITHDRAWAL KA FAISLA  (.wdact)
   Table ke aakhri khaane me — ek chhota sa note ka box aur teen button.
   Note isliye saath rakha hai ki mana karte waqt kaaran likhna zaroori hai,
   aur wahi kaaran customer ko uske portal me dikhta hai.
   ========================================================================== */
.wdact{display:flex;flex-direction:column;gap:7px;min-width:210px}
.wdact__why{
  width:100%;font:inherit;font-size:.82rem;color:var(--text-100);
  padding:7px 10px;border-radius:8px;
  background:var(--panel-solid);border:1px solid var(--g2-brd);
}
.wdact__why::placeholder{color:var(--text-45)}
.wdact__why:focus{outline:none;border-color:rgba(var(--acc),.55);box-shadow:0 0 0 3px rgba(var(--acc),.13)}
.wdact__btns{display:flex;gap:6px;flex-wrap:wrap}
.wdact__btns .btn{
  width:auto;height:auto;padding:6px 11px;
  font-size:.79rem;font-weight:600;white-space:nowrap;
}


/* ==========================================================================
   REFER & REWARD ke naye hisse
   - .rwd            reward kis haalat me hai (pakka / khula / radd)
   - .refcard__warn  dohra referral ka nishan
   - .refcard__link  referral ko uske project se jodne wali patti
   - .refcard__why   "nahi bana" ka kaaran — chunte hi khulta hai
   - .whoc           ek batane wale ka poora hisaab
   ========================================================================== */
.rwd{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:999px;
  font-size:.74rem;font-weight:700;letter-spacing:.01em;white-space:nowrap;
}
.rwd--confirmed{background:rgba(var(--gold),.13);color:var(--gold-600);border:1px solid rgba(var(--gold),.28)}
.rwd--unlocked,
.rwd--paid{background:rgba(var(--acc),.12);color:var(--green-600);border:1px solid rgba(var(--acc),.26)}
.rwd--cancelled{background:rgba(var(--on),.06);color:var(--text-45);border:1px solid rgba(var(--on),.12)}

.refcard--off{opacity:.72}

.refcard__warn{
  display:block;margin:0 0 13px;padding:10px 13px;border-radius:4px;
  font-size:.83rem;line-height:1.6;color:var(--text-70);
  background:rgba(var(--gold),.08);border:1px solid rgba(var(--gold),.24);
}
.refcard__warn strong{color:var(--gold-600)}

.refcard__note--bad{
  background:rgba(var(--bad),.07);border:1px solid rgba(var(--bad),.18);
}
.refcard__note--bad strong{color:rgb(var(--bad))}

.refcard__link{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:13px;padding:9px 12px;border-radius:4px;
  background:rgba(var(--on),.03);border:1px solid rgba(var(--on),.07);
}
.refcard__link label{
  font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-25);margin:0;
}
.refcard__link select{padding:7px 28px 7px 11px;font-size:.8rem;width:auto;min-width:210px;max-width:100%}

.refcard__why{
  flex:1 1 210px;min-width:170px;
  padding:7px 11px;font-size:.8rem;
}

.refcard__form input[type=text]{padding:7px 11px;font-size:.8rem}

.whoc .tiles{margin-bottom:0}

@media (max-width:620px){
  .refcard__link select{min-width:0;flex:1 1 100%}
  .refcard__foot .refcard__form{flex:1 1 100%}
  .refcard__foot .refcard__form select,
  .refcard__foot .refcard__form input{flex:1 1 auto;min-width:0;width:auto}
}

/* Referral card par: yeh referral kis project se juda hai */
.refcard__proj{
  margin:13px 0 0;padding:9px 12px;border-radius:4px;
  font-size:.83rem;line-height:1.55;color:var(--text-70);
  background:rgba(var(--acc),.06);border:1px solid rgba(var(--acc),.16);
}
.refcard__proj a{color:var(--green-600);font-weight:600}


/* ==========================================================================
   NAYI LEAD — do khaane aur ek button  (.quickadd)
   Pehle 9 khaane bharne padte the. Ab bas naam aur mobile — card turant
   ban jaata hai, baaki sab card kholkar kabhi bhi bhara ja sakta hai.
   ========================================================================== */
.quickadd{display:flex;align-items:flex-end;gap:11px;flex-wrap:wrap}
.quickadd__f{display:flex;flex-direction:column;gap:5px;flex:1 1 260px;min-width:0}
.quickadd__f--sm{flex:0 1 170px}
.quickadd__f label{
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-45);margin:0;
}
.quickadd__f input{width:100%;padding:11px 13px;font-size:.95rem}
.quickadd .btn{height:44px;padding-inline:18px}

@media (max-width:560px){
  .quickadd__f,.quickadd__f--sm{flex:1 1 100%}
  .quickadd .btn{flex:1 1 auto}
}

/* Abhi-abhi bana card — 4 second chamak kar shaant ho jaata hai */
.lcard--fresh{
  border-color:rgba(var(--acc),.55);
  box-shadow:0 0 0 3px rgba(var(--acc),.14), var(--sh-1);
  animation:freshPop .5s ease-out;
}
@keyframes freshPop{
  0%{transform:scale(.985);opacity:.6}
  100%{transform:scale(1);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .lcard--fresh{animation:none}
}


/* ==========================================================================
   SITE SURVEY  (.srv, .guess, .pickrow, .fhint, .waits)
   Yeh form chhat par phone me bharta hai, is liye khaane bade rakhe hain —
   dhoop me, dastane pehne, ek haath se bhi tik jaye.
   ========================================================================== */
.srv .card{margin-bottom:16px}
.srv input[type=number],
.srv input[type=text],
.srv input[type=tel]{padding:12px 13px;font-size:1rem}
.srv select{padding:12px 34px 12px 13px;font-size:1rem}

.fhint{display:block;margin-top:5px;font-size:.76rem;line-height:1.5;color:var(--text-45)}

/* Radio aur checkbox — ungli se dabane layak bade */
.pickrow{display:flex;gap:9px;flex-wrap:wrap}
.pickrow__o{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:11px 15px;border-radius:4px;margin:0;
  font-size:.88rem;color:var(--text-70);
  background:var(--panel-solid);border:1px solid var(--g2-brd);
}
.pickrow__o input{width:17px;height:17px;margin:0;accent-color:var(--green-600);flex:none}
.pickrow__o:hover{border-color:rgba(var(--acc),.35)}
.pickrow__o:has(input:checked){
  background:rgba(var(--acc),.09);border-color:rgba(var(--acc),.45);
  color:var(--text-100);font-weight:600;
}

/* kW ka andaza — do number, saath me saaf-saaf likha ki yeh sirf sujhav hai */
.guess{
  display:flex;gap:13px;flex-wrap:wrap;align-items:center;
  margin-bottom:18px;padding:14px 16px;border-radius:var(--r-md);
  background:rgba(var(--gold),.07);border:1px solid rgba(var(--gold),.22);
}
.guess__o{display:flex;flex-direction:column;gap:2px;min-width:130px}
.guess__n{font-family:'Sora',sans-serif;font-size:1.5rem;font-weight:700;color:var(--gold-600);line-height:1.1}
.guess__l{font-size:.76rem;color:var(--text-45)}
.guess__say{flex:1 1 260px;margin:0;font-size:.82rem;line-height:1.6;color:var(--text-70)}

/* Save ka button hamesha haath ke paas — chhat par scroll karte hue bhi.
   Poori chaudai me thos background hai, warna neeche wale khaane iske
   peeche se jhaankte the aur padhne me gadbad hoti thi. */
.srv__save{
  position:sticky;bottom:0;z-index:5;
  display:flex;gap:10px;flex-wrap:wrap;
  margin:0 -4px 18px;padding:13px 4px;
  background:var(--bg-900);
  border-top:1px solid rgba(var(--on),.10);
  box-shadow:0 -6px 18px rgba(var(--sh),.06);
}
.srv__save .btn{flex:1 1 auto;justify-content:center;height:46px}

/* Aakhri section ke neeche itni jagah ki save-bar kuch chhupaye nahi */
.srv .card:last-of-type{margin-bottom:78px}

.srv__next{display:flex;gap:11px;flex-wrap:wrap;align-items:center}

/* Jinka survey lagaya hua hai par form bhara nahi */
.waits{display:flex;flex-direction:column;gap:9px}
.waits__r{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:11px 14px;border-radius:4px;
  background:rgba(var(--on),.03);border:1px solid rgba(var(--on),.07);
}
.waits__r strong{display:block;font-size:.93rem;color:var(--text-100)}
.waits__r small{display:block;font-size:.78rem;color:var(--text-45);margin-top:2px}

.shots__add{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.shots__add input[type=file]{flex:1 1 220px;font-size:.83rem}
.shots__add input[type=text]{flex:1 1 200px;padding:9px 12px;font-size:.85rem}

.lcard__note{
  margin:10px 0 0;padding:8px 11px;border-radius:4px;
  font-size:.8rem;line-height:1.55;color:var(--text-70);
  background:rgba(var(--gold),.07);border:1px solid rgba(var(--gold),.2);
}

@media (max-width:560px){
  .srv__save{flex-direction:column}
  .srv__save .btn{width:100%}
  .guess__o{flex:1 1 45%;min-width:0}
}


/* ==========================================================================
   BOOKS  (.buyrow, .act-del)
   Khareed ki lines — ek line me maal, ginti aur bhaav. Mobile par teenon
   neeche-neeche aa jaate hain taaki ungli se bharne me dikkat na ho.
   ========================================================================== */
.buyrows{display:flex;flex-direction:column;gap:9px;margin:16px 0 12px}
.buyrow{display:flex;gap:9px;align-items:center}
.buyrow select{flex:1 1 220px;min-width:0;padding:9px 30px 9px 12px;font-size:.86rem}
.buyrow input{flex:0 1 120px;min-width:0;padding:9px 12px;font-size:.86rem}
.buyrow .q-remove{flex:none;width:36px;height:36px}

/* Delete wala button — pehle sirf .btn par tik raha tha */
.act-del{
  background:rgba(var(--bad),.09);color:rgb(var(--bad));
  border:1px solid rgba(var(--bad),.22);
}
.act-del:hover{background:rgba(var(--bad),.16)}
.row-actions .act-del{padding:7px;width:32px;height:32px;justify-content:center}

@media (max-width:620px){
  .buyrow{flex-wrap:wrap}
  .buyrow select{flex:1 1 100%}
  .buyrow input{flex:1 1 calc(50% - 24px)}
}


/* ==========================================================================
   QUOTATION — kW se poora bhar dene wali patti  (.qfast)
   Yeh sabse uper isliye hai ki nazar sabse pehle isi par jaye. Ek number
   daal kar ek button — baaki sab apne aap.
   ========================================================================== */
.qfast{
  display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;
  margin:22px 0 6px;padding:16px 18px;border-radius:var(--r-md);
  background:rgba(var(--acc),.06);border:1px solid rgba(var(--acc),.2);
}
.qfast__in{display:flex;flex-direction:column;gap:5px;flex:0 1 180px}
.qfast__in--sm{flex:0 1 140px}
.qfast__in label{
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-45);margin:0;
}
.qfast__in input{width:100%;padding:11px 13px;font-size:1.05rem;font-weight:600}
.qfast .btn{height:44px;padding-inline:18px}
.qfast__say{
  flex:1 1 100%;margin:4px 0 0;
  font-size:.82rem;line-height:1.65;color:var(--text-70);
}
.qfast__say a{color:var(--green-600);font-weight:600}

@media (max-width:620px){
  .qfast__in,.qfast__in--sm{flex:1 1 calc(50% - 6px)}
  .qfast .btn{flex:1 1 100%;justify-content:center}
}


/* ==========================================================================
   SANWARIA VERIFIED — badge
   Badge par hamesha likha rehta hai ki iska matlab kya hai aur kab laga.
   Bina matlab ka nishan bharosa nahi banata, shak paida karta hai.
   ========================================================================== */
.vbadge{
  display:flex;align-items:center;gap:13px;
  margin-bottom:16px;padding:14px 16px;border-radius:var(--r-md);
  background:rgba(var(--acc),.09);border:1px solid rgba(var(--acc),.3);
}
.vbadge__tick{
  flex:none;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--grad-gold);color:var(--on-acc);
}
.vbadge__tick .ico{width:21px;height:21px}
.vbadge strong{display:block;font-family:'Sora',sans-serif;font-size:1rem;color:var(--green-600)}
.vbadge small{display:block;font-size:.8rem;color:var(--text-70);margin-top:2px}

/* "Kya-kya baaki hai" ki list — naam le kar batana, taaki andaza na lagana pade */
.kami{margin:0 0 14px;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.kami li{font-size:.86rem;line-height:1.6;color:var(--text-70)}
.kami li::marker{color:var(--gold-600)}

/* ==========================================================================
   NAYA CUSTOMER — 3 step wala form
   Soch: ek screen par sirf kaam ki cheez. Is liye yahan koi sajawat nahi,
   sirf itna ki pata chalta rahe ki kis step par hain aur kitna baaki hai.
   ========================================================================== */

.nc-steps{
  display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px;
}
.nc-step{
  display:flex;align-items:center;gap:9px;flex:1 1 150px;
  padding:11px 14px;border-radius:4px;text-decoration:none;
  border:1px solid rgba(var(--on),.09);background:rgba(var(--on),.03);
  color:var(--text-25);font-size:.85rem;
}
.nc-step__n{
  display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;
  border-radius:50%;font-size:.75rem;font-weight:600;
  background:rgba(var(--on),.09);color:var(--text-25);
}
.nc-step__t{font-weight:500}
.nc-step--now{
  border-color:rgba(var(--gold),.42);background:rgba(var(--gold),.10);color:var(--text);
}
.nc-step--now .nc-step__n{background:var(--gold-500);color:#fff}
.nc-step--done{color:var(--text);border-color:rgba(var(--acc),.30);background:rgba(var(--acc),.07)}
.nc-step--done .nc-step__n{background:rgba(var(--acc),.85);color:#fff}
a.nc-step:hover{border-color:rgba(var(--gold),.40)}
.nc-step--next{opacity:.6;cursor:default}

/* ---- Adhoore form ki list ---- */
.nc-list{display:flex;flex-direction:column;gap:8px}
.nc-row{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 14px;border-radius:4px;text-decoration:none;color:var(--text);
  border:1px solid rgba(var(--on),.08);background:rgba(var(--on),.025);
}
.nc-row:hover{border-color:rgba(var(--gold),.38);background:rgba(var(--gold),.05)}
.nc-row__name{flex:1 1 200px;font-weight:500}
.nc-row__gap{font-size:.8rem;color:var(--gold-500)}

/* ---- Upload ki ek line ---- */
.nc-up{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.nc-up input[type=file]{flex:1 1 220px;min-width:0}
.nc-up select{flex:0 1 200px}

.nc-docs{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.nc-doc{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 12px;border-radius:4px;background:rgba(var(--on),.03);
  border:1px solid rgba(var(--on),.07);
}
.nc-doc > a{flex:1 1 180px;font-size:.88rem}

@media (max-width:560px){
  .nc-step{flex:1 1 100%}
  .nc-up{flex-direction:column;align-items:stretch}
  .nc-up select,.nc-up input[type=file]{flex:1 1 auto}
}

/* Wo hint jo chetavni deti hai — jaise "yeh number hisaab se nikala hai" */
.fhint--warn{
  color:var(--gold-500);
  background:rgba(var(--gold),.08);
  border:1px solid rgba(var(--gold),.24);
  border-radius:4px;padding:8px 10px;margin-top:6px;
}

/* ==========================================================================
   AGREEMENT KA TEMPLATE — setup wala page
   Tasveer par number, aur naam ke saath copy ka button.
   ========================================================================== */

.tpl-fig{margin:0;padding:0}
.tpl-fig img{
  display:block;width:100%;height:auto;border-radius:4px;
  border:1px solid rgba(var(--on),.12);background:#fff;
}
.tpl-fig figcaption{
  margin-top:9px;font-size:.8rem;color:var(--text-45);text-align:center;
}

/* Number ka gola — tasveer wale number se milta hua */
.tpl-no{
  display:inline-grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:var(--green-600);color:#fff;
  font-family:'Sora',sans-serif;font-size:.78rem;font-weight:600;
}

/* Copy ho jaane par button ka rang badal jaye — pata chale ki ho gaya */
.btn.is-done{
  background:rgba(var(--acc),.14);color:var(--green-600);
  border-color:rgba(var(--acc),.34);
}

/* Is page ki table chhoti hai — 760px ki majboori mat rakhiye */
.card .table-wrap table.data{min-width:420px}

/* Lamba bina space wala shabd (file ka naam, ID) page ko chauda na kare */
.brk{overflow-wrap:anywhere;word-break:break-word}

/* ---- "Kiska kaam" — page ke header me chhota sa chunav ---- */
.inline-assign{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;
}
.inline-assign label{
  font-size:.78rem;font-weight:600;color:var(--text-45);
  text-transform:uppercase;letter-spacing:.08em;
}
.inline-assign select{
  width:auto;min-width:170px;padding:7px 30px 7px 11px;font-size:.85rem;min-height:auto;
}