/* ============================================================
   CRM v194 — CONSOLIDATED PATCH STYLESHEET
   ============================================================
   Combines every crm-v1xx-*.css patch that was previously loaded
   as a separate <link> tag into one file, in the EXACT SAME ORDER
   they were loaded before (order matters for CSS - later rules can
   override earlier ones). No rule content was changed; only the
   packaging. Each original file's content is kept intact below,
   marked with its original filename so it's easy to find later.
   ============================================================ */


/* ---------------- from crm-depth.css ---------------- */
/* ============================================================================================
   CRM depth layer — "Extruded" (v113)
   ============================================================================================

   Ye sirf ek stylesheet hai. Bundle ka ek byte nahi badla, koi React component nahi chhua.
   Isliye:
     - kuch bhi tootne ka khatra nahi (logic isse chhuti hi nahi)
     - pasand na aaye to index.html se ek line hatate hi sab purana jaisa

   Kaam kaise karta hai: bundle me pehle se do stable hook hain -
     .crm-stat            har dashboard/leaderboard tile par
     aside.fixed...       sidebar ka container
   Inhi par depth di gayi hai. Tailwind ki classes ko haath nahi lagaya - sirf unke upar likha
   hai, isliye jo pehle se kaam kar raha tha wo waise ka waisa chalta rehta hai.

   Extruded ka matlab yahan: upar ek chamakta kinara (jaise roshni upar se aa rahi ho), neeche
   gehra kinara, aur neeche ki taraf failti chhaya. Rang nahi badle - sirf gehrai.

   Dono mode ke liye alag values hain, kyunki dark me roshni safed se banti hai aur light me
   chhaya kaali se. Ek hi value dono jagah nahi chalti.
   ============================================================================================ */

/* --------------------------------------------------------------------------------------------
   1. LIGHT MODE — dashboard aur leaderboard ke tile
   -------------------------------------------------------------------------------------------- */
.crm-stat {
  position: relative;
  background-image: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
  border-color: #e3e9f1;
  border-top-color: #ffffff;
  border-bottom-color: #d3dbe6;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -1px 0 rgba(15, 23, 42, 0.05) inset,
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 8px 16px -8px rgba(15, 23, 42, 0.18);
  transition: transform 0.16s ease-out, box-shadow 0.16s ease-out;
}

/* Icon ka chauras bhi utna hi uthta hua dikhe, warna tile 3D aur icon chipka hua lagta hai. */
.crm-stat > div:first-child {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 -1px 0 rgba(15, 23, 42, 0.07) inset,
    0 2px 5px rgba(15, 23, 42, 0.13);
}

/* Hover par tile thoda upar uthta hai aur chhaya lambi hoti hai - jaise ungli se utha rahe hon. */
.crm-stat:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 -1px 0 rgba(15, 23, 42, 0.05) inset,
    0 2px 4px rgba(15, 23, 42, 0.07),
    0 16px 26px -10px rgba(15, 23, 42, 0.24);
}

/* Jo tile link hain unko dabane par neeche baithna chahiye - warna click ka ehsaas nahi hota. */
a:active .crm-stat,
.crm-stat:active {
  transform: translateY(0);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.10) inset,
    0 1px 2px rgba(15, 23, 42, 0.06);
}

/* --------------------------------------------------------------------------------------------
   2. DARK MODE — wahi tile
   -------------------------------------------------------------------------------------------- */
html.dark .crm-stat {
  background-image: linear-gradient(180deg, #1b2740 0%, #111a2b 100%);
  border-color: rgba(255, 255, 255, 0.07);
  border-top-color: rgba(255, 255, 255, 0.16);
  border-bottom-color: rgba(0, 0, 0, 0.5);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.09) inset,
    0 -2px 0 rgba(0, 0, 0, 0.4) inset,
    0 10px 20px -6px rgba(0, 0, 0, 0.6);
}

html.dark .crm-stat > div:first-child {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.14));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 3px 7px rgba(0, 0, 0, 0.45);
}

html.dark .crm-stat:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.13) inset,
    0 -2px 0 rgba(0, 0, 0, 0.4) inset,
    0 18px 30px -8px rgba(0, 0, 0, 0.7);
}

html.dark a:active .crm-stat,
html.dark .crm-stat:active {
  transform: translateY(0);
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.55) inset,
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

/* --------------------------------------------------------------------------------------------
   3. SIDEBAR
   Sidebar dono mode me gehra rehta hai, isliye iske liye ek hi set kaafi hai.
   Selector class ke naam se nahi, uske aakar se pakadta hai (fixed + poori height + left par),
   taaki Tailwind ki class-list badalne par bhi ye tootne ke bajaye bas lagna band ho jaye.
   -------------------------------------------------------------------------------------------- */
aside.fixed.left-0.top-0.h-screen {
  box-shadow:
    -1px 0 0 rgba(255, 255, 255, 0.05) inset,
    2px 0 34px rgba(0, 0, 0, 0.5);
}

/* Nav ke item: aam haalat me chapte, hover/active par ubhre hue. Sab par ek saath depth de dein
   to sidebar bhari lagta hai aur nazar ye batana band kar deti hai ki abhi khula kaun sa hai. */
aside.fixed.left-0.top-0.h-screen a,
aside.fixed.left-0.top-0.h-screen button {
  transition: transform 0.14s ease-out, box-shadow 0.14s ease-out, background-color 0.14s ease-out;
}

aside.fixed.left-0.top-0.h-screen a:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 4px 10px -3px rgba(0, 0, 0, 0.55);
}

/* Jo item abhi khula hai - bundle uspar emerald ka halka background lagata hai. Usi ko pakad kar
   sabse zyada ubhara diya, taaki ek nazar me pata chale ki aap kahan ho. */
aside.fixed.left-0.top-0.h-screen a[class*="bg-emerald"] {
  background-image: linear-gradient(180deg, rgba(52, 211, 153, 0.22), rgba(52, 211, 153, 0.07));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 -1px 0 rgba(0, 0, 0, 0.30) inset,
    0 5px 12px -4px rgba(0, 0, 0, 0.6);
}

/* Icon-only (band) sidebar me har icon ka apna chauras ubhra hua dikhe. */
aside.fixed.left-0.top-0.h-screen.md\:w-16 a:hover {
  transform: translateX(1px);
}

/* --------------------------------------------------------------------------------------------
   4. Chhoti cheezein jo tile ke saath mel khayein
   -------------------------------------------------------------------------------------------- */

/* Status ke badge bhi thoda ubhre hue, warna ubhri hui tile par chapte dikhte hain. */
.crm-status-badge {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 1px 2px rgba(15, 23, 42, 0.12);
}
html.dark .crm-status-badge {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Jinhone "kam animation" chuna hai unke liye sirf gehrai rahegi, harkat nahi. */
@media (prefers-reduced-motion: reduce) {
  .crm-stat,
  .crm-stat:hover,
  aside.fixed.left-0.top-0.h-screen a,
  aside.fixed.left-0.top-0.h-screen a:hover {
    transform: none;
    transition: none;
  }
}

/* Print par gehrai ka koi matlab nahi - label/manifest saaf chhapne chahiye. */
@media print {
  .crm-stat,
  .crm-status-badge {
    box-shadow: none;
    background-image: none;
  }
}

/* ============================================================================================
   v116 — TEXT BADA, SIDEBAR BADA + NAYA RANG
   ============================================================================================ */

/* --------------------------------------------------------------------------------------------
   1. POORE CRM KA TEXT THODA BADA
   Tailwind ki har size ek CSS variable se aati hai (--text-sm, --text-xs...). Isliye yahan ek
   jagah badalne se poora panel badal jata hai - table, form, modal, sab. Kisi ek jagah class
   badalne ki zaroorat nahi padi.
   Badhotari mapi hui hai, andaaze se nahi: har size ~1px badi. 14px -> 15px, 12px -> 13px.
   Isse naam/number/pata saaf padha jayega, par layout nahi tootega (bahut bada karne par table
   ke column aapas me chipakne lagte hain).
   -------------------------------------------------------------------------------------------- */
:root {
  --text-xs: 0.8125rem;    /* 12px -> 13px */
  --text-sm: 0.9375rem;    /* 14px -> 15px */
  --text-base: 1.0625rem;  /* 16px -> 17px */
  --text-lg: 1.1875rem;    /* 18px -> 19px */
}

/* Table me naam / number / pata - ye teen sabse zyada padhe jate hain, inhe thoda aur saaf kiya. */
tbody td {
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* Jo size seedhe px me likhi hain (Tailwind ke variable se nahi aati) unhe alag se bada karna
   padta hai - warna wo peeche reh jati aur badi text ke beech chhoti dikhti. */
.text-\[11px\] { font-size: 12px; }
.text-\[13px\] { font-size: 14px; }

/* --------------------------------------------------------------------------------------------
   2. SIDEBAR — naya rang
   Purana neela-kaala (#111d33 -> #0c1626) hata kar gehra emerald-charcoal. CRM ka apna rang
   emerald hai, isliye sidebar ab baaki panel se mel khata hai, aur alag bhi saaf dikhta hai.
   -------------------------------------------------------------------------------------------- */
aside.fixed.left-0.top-0.h-screen {
  background-image: linear-gradient(180deg, #161d26 0%, #111823 55%, #0c111a 100%) !important;
  border-right-color: rgba(148, 163, 184, 0.14);
  box-shadow:
    -1px 0 0 rgba(255, 255, 255, 0.06) inset,
    2px 0 34px rgba(0, 0, 0, 0.55);
}

/* Badge ke chaaro taraf jo ring hai wo purane neele rang ki thi (bundle me #0f1a2e likha hai).
   Sidebar ka rang badla to wo ring alag dikhne lagti - isliye use bhi naye rang par le aaye. */
aside.fixed.left-0.top-0.h-screen span[class*="ring-\["] {
  --tw-ring-color: #111823;
}

/* --------------------------------------------------------------------------------------------
   3. SIDEBAR KA TEXT — bada aur bold
   -------------------------------------------------------------------------------------------- */
aside.fixed.left-0.top-0.h-screen a,
aside.fixed.left-0.top-0.h-screen button {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
}

/* Jo page abhi khula hai wo aur saaf dikhe. */
aside.fixed.left-0.top-0.h-screen a[class*="bg-emerald"] {
  font-weight: 600;
}

/* Sabse upar company ka naam. */
aside.fixed.left-0.top-0.h-screen .font-semibold {
  font-size: 15px;
}

/* "LEADS", "OPERATIONS" jaise chhote heading - ye 10px par lagbhag padhe hi nahi jaate the. */
aside.fixed.left-0.top-0.h-screen .uppercase {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Neeche apna naam / Logout. */
aside.fixed.left-0.top-0.h-screen .text-\[11px\],
aside.fixed.left-0.top-0.h-screen .text-xs {
  font-size: 12px;
}


/* ============================================================================================
   v118 — SIDEBAR: SLATE + EMERALD, aur poore CRM ki TABLE 3D
   ============================================================================================

   SIDEBAR
   -------
   v117 me sidebar dono mode me ULTA kiya gaya tha (dark mode me panel safed). Aapne dekh kar
   kaha ki achha nahi lag raha - to ab ek hi palette hai, dono mode me same:

       panel  : gehra graphite-slate
       row    : panel se thoda upar uthi hui, halke text ke saath
       khuli row : emerald ka halka wash + baayin taraf emerald ki patli lakeer

   Ek hi palette rakhne ka ek fayda aur hai: theme badalne par sidebar hilta nahi, aur aankh ko
   har baar naya rang samajhna nahi padta.

   Wapas chahiye to: is file ke aakhir wala "v118" wala hissa hata dijiye - baaki sab chalta
   rahega.
   -------------------------------------------------------------------------------------------- */

/* --- nav ki row: halki si uthi hui ---------------------------------------------------------- */
aside.fixed.left-0.top-0.h-screen nav a {
  background-color: #1b232e;
  color: #ced7e3;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 -1px 0 rgba(0, 0, 0, 0.28) inset,
    0 2px 5px -2px rgba(0, 0, 0, 0.55);
}

aside.fixed.left-0.top-0.h-screen nav a:hover {
  background-color: #253141;
  color: #ffffff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.09) inset,
    0 -1px 0 rgba(0, 0, 0, 0.3) inset,
    0 5px 12px -4px rgba(0, 0, 0, 0.65);
}

/* Jo page abhi khula hai. Emerald ka wash + baayin taraf lakeer - ek nazar me pakad me aata hai. */
aside.fixed.left-0.top-0.h-screen nav a[class*="bg-emerald"] {
  background-color: #17352e;
  background-image: none;
  color: #a7f3d0;
  box-shadow:
    inset 3px 0 0 #10b981,
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 -1px 0 rgba(0, 0, 0, 0.35) inset,
    0 6px 14px -5px rgba(0, 0, 0, 0.7);
}

/* Row ke andar ka count badge. Row ab gehri hai, isliye badge halka. */
aside.fixed.left-0.top-0.h-screen nav a > span:last-child:not(.flex-1):not(.crm-nav-tooltip) {
  background-color: #33455a;
  color: #eef3f9;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
aside.fixed.left-0.top-0.h-screen nav a[class*="bg-emerald"] > span:last-child:not(.flex-1):not(.crm-nav-tooltip) {
  background-color: #10b981;
  color: #04291f;
}

/* "LEADS", "COURIER SHIPMENT STATUS" jaise heading. */
aside.fixed.left-0.top-0.h-screen .uppercase {
  color: #8595a8;
}

/* Band (icon-only) sidebar me chip nahi banana - waha sirf icon hota hai.
   Ye media query ke andar isliye hai ki `md:w-16` class chhoti screen par bhi likhi hoti hai
   jabki wahan sidebar poora khula hota hai. */
@media (min-width: 768px) {
  aside.fixed.left-0.top-0.h-screen.md\:w-16 nav a {
    background-color: transparent;
    box-shadow: none;
    color: #ced7e3;
  }
  aside.fixed.left-0.top-0.h-screen.md\:w-16 nav a:hover {
    background-color: #253141;
    color: #ffffff;
  }
  aside.fixed.left-0.top-0.h-screen.md\:w-16 nav a[class*="bg-emerald"] {
    background-color: #10b981;
    color: #04291f;
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.6);
  }
}

/* ==============================================================================================
   TABLE — 3D aur row par highlight
   ----------------------------------------------------------------------------------------------
   Ye poore CRM ki har table par lagta hai: Leads, Orders, har status ka board, NDR, Follow-ups,
   Remittance - kyunki selector class ka naam nahi, seedha <table>/<tr>/<td> pakadta hai. Bundle
   ki Tailwind class kabhi badle to bhi ye tootega nahi.

   Row par transform (uthana) jaan-boojh kar NAHI diya - table me ek row hilane se baaki column
   ki lakeerein tedhi dikhne lagti hain. Uski jagah wahi ehsaas inset shadow se banaya gaya hai:
   upar chamakta kinara, neeche gehra - row sach me uthi hui lagti hai, par kuch hilta nahi.
   ============================================================================================== */

/* Table ka card: upar chamak, neeche failti chhaya. */
[class~="rounded-xl"][class~="shadow-sm"][class~="border-gray-100"] {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 10px 20px -10px rgba(15, 23, 42, 0.20);
}
html.dark [class~="rounded-xl"][class~="shadow-sm"][class~="border-gray-100"] {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 -1px 0 rgba(0, 0, 0, 0.45) inset,
    0 12px 24px -12px rgba(0, 0, 0, 0.75);
}

/* Header ki patti - table ke upar baithi hui lagni chahiye. */
thead th {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 -1px 0 rgba(15, 23, 42, 0.10) inset;
}
html.dark thead th {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 -1px 0 rgba(0, 0, 0, 0.5) inset;
}

/* ROW HIGHLIGHT
   `background-color` jaan-boojh kar aadha-paardarshi hai: jin row ka apna rang hota hai
   (abhi-abhi aayi lead, locked row, chuni hui row) unka rang neeche se dikhta rahe - warna
   hover unki pehchaan mita deta. */
tbody tr:hover > td,
tbody tr:focus-within > td {
  background-color: rgba(16, 185, 129, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 -1px 0 rgba(15, 23, 42, 0.10) inset;
}
html.dark tbody tr:hover > td,
html.dark tbody tr:focus-within > td {
  background-color: rgba(16, 185, 129, 0.13);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 -1px 0 rgba(0, 0, 0, 0.45) inset;
}

/* Baayin taraf emerald ki lakeer - nazar ko pata chal jata hai ki poori row ek hi hai. */
tbody tr:hover > td:first-child,
tbody tr:focus-within > td:first-child {
  box-shadow:
    inset 3px 0 0 #10b981,
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 -1px 0 rgba(15, 23, 42, 0.10) inset;
}
html.dark tbody tr:hover > td:first-child,
html.dark tbody tr:focus-within > td:first-child {
  box-shadow:
    inset 3px 0 0 #10b981,
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 -1px 0 rgba(0, 0, 0, 0.45) inset;
}

/* Touch/phone: ungli rakhne par bhi wahi highlight (mobile par :hover bharosemand nahi hai). */
tbody tr:active > td {
  background-color: rgba(16, 185, 129, 0.14);
}

tbody tr > td {
  transition: background-color 0.12s ease-out, box-shadow 0.12s ease-out;
}

/* ==============================================================================================
   UPAR KI FILTER PATTI + BUTTON
   `.crm-toolbar` bundle ki apni class hai (FilterBar), isliye ye pakka hook hai.
   ============================================================================================== */
.crm-toolbar select,
.crm-toolbar input,
.crm-toolbar button {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 1px 2px rgba(15, 23, 42, 0.07);
}
html.dark .crm-toolbar select,
html.dark .crm-toolbar input,
html.dark .crm-toolbar button {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 2px 5px rgba(0, 0, 0, 0.45);
}

/* Bhare hue (primary) button - "Add Lead", "New Order" jaise. Dabane par neeche baithein. */
button[class*="bg-emerald-6"],
a[class*="bg-emerald-6"]:not(nav a) {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 -2px 0 rgba(0, 0, 0, 0.18) inset,
    0 4px 10px -3px rgba(5, 150, 105, 0.55);
}
button[class*="bg-emerald-6"]:active,
a[class*="bg-emerald-6"]:not(nav a):active {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.22) inset;
}

/* Jinhone "kam animation" chuna hai unke liye sirf gehrai rahegi, harkat nahi. */
@media (prefers-reduced-motion: reduce) {
  tbody tr > td { transition: none; }
}

/* Print par gehrai ka koi matlab nahi - label/manifest saaf chhapne chahiye. */
@media print {
  thead th,
  tbody tr > td,
  [class~="rounded-xl"][class~="shadow-sm"][class~="border-gray-100"] {
    box-shadow: none;
  }
}

/* v265 — removed dead .dashboard-v122 overrides; current dashboard no longer uses that class. */

/* ============================================================================================
   v136 — Aaj ke shipment card + 5 din ka delivery trend
   ============================================================================================ */

/* Chaar barabar card. Is build me Tailwind ki grid-cols-4 class nahi banti (jaise v128 me
   grid-cols-5 ke saath hua tha), isliye grid yahan haath se likhi gayi hai. */
.crm-quad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .crm-quad-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.crm-card-ofd        { border-color: #a5f3fc; background-image: linear-gradient(180deg,#f0fdff,#e0f7fb); }
.crm-card-delivered  { border-color: #a7f3d0; background-image: linear-gradient(180deg,#f0fdf7,#dcfce7); }
.crm-card-undelivered{ border-color: #fed7aa; background-image: linear-gradient(180deg,#fffbf5,#ffedd5); }
.crm-card-ndr        { border-color: #fecdd3; background-image: linear-gradient(180deg,#fff5f6,#ffe4e6); }

html.dark .crm-card-ofd        { border-color: #155e75; background-image: linear-gradient(180deg,#0e2b33,#0a2129); }
html.dark .crm-card-delivered  { border-color: #065f46; background-image: linear-gradient(180deg,#0d2c22,#09211a); }
html.dark .crm-card-undelivered{ border-color: #9a3412; background-image: linear-gradient(180deg,#33200e,#26180a); }
html.dark .crm-card-ndr        { border-color: #9f1239; background-image: linear-gradient(180deg,#331018,#260c12); }
html.dark .crm-card-ofd .text-slate-800,
html.dark .crm-card-delivered .text-slate-800,
html.dark .crm-card-undelivered .text-slate-800,
html.dark .crm-card-ndr .text-slate-800 { color: #f1f5f9; }

/* BLINK — halka, jab tak agent khol kar dekh na le.
   Jaan-boojh kar dheema (1.6s) aur halka: tez blink dhyan kheenchne ke bajaye chidhata hai, aur
   do din me log use dekhna hi band kar dete hain. Yahan sirf ek narm chamak aur halki si ring. */
@keyframes crmSoftBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244,63,94,0);   }
  50%      { box-shadow: 0 0 0 4px rgba(244,63,94,.22); }
}
.crm-blink { animation: crmSoftBlink 1.6s ease-in-out infinite; }

/* Jinhone "kam animation" chuna hai unke liye blink band - par "NAYA" ka label phir bhi dikhega,
   isliye jankari kisi ki nahi chhootti. */
@media (prefers-reduced-motion: reduce) { .crm-blink { animation: none; } }

/* ---- 5 din ka trend ---- */
.crm-trend-wrap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: end; }
.crm-trend-col  { display: flex; flex-direction: column; justify-content: flex-end; }
.crm-trend-bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 110px; }
.crm-trend-bar  { width: 12px; border-radius: 3px 3px 0 0; display: block; transition: opacity .15s; }
.crm-trend-bar:hover { opacity: .75; }

.crm-bar-ofd         { background: #22d3ee; }
.crm-bar-delivered   { background: #10b981; }
.crm-bar-undelivered { background: #f59e0b; }

.crm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; vertical-align: middle; margin-right: 3px; }


/* ============================================================
   DASHBOARD v140 FIX — layout only, no business logic changes
   ============================================================ */
.crm-shipment-six{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;width:100%;align-items:stretch}
.crm-shipment-six>*{min-width:0}
.crm-shipment-six .crm-stat{height:100%;min-width:0}
.crm-shipment-six .crm-stat *{min-width:0}

.crm-dashboard-chart-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.96fr) minmax(0,.96fr);gap:16px;align-items:stretch}
.crm-dashboard-chart-grid>div{min-width:0;height:100%;border-radius:14px;box-shadow:0 4px 18px rgba(15,23,42,.055)}
.crm-dashboard-chart-grid>div:first-child{border-color:rgba(99,102,241,.18)}
.crm-dashboard-chart-grid>div:nth-child(2){border-color:rgba(16,185,129,.18)}
.crm-dashboard-chart-grid>div:nth-child(3){border-color:rgba(14,165,233,.18)}

.crm-dashboard-lower-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.crm-dashboard-lower-grid>*{min-width:0}
.crm-dashboard-lower-grid .bg-white.rounded-xl,
.crm-dashboard-lower-grid .overflow-x-auto.bg-white{border-color:rgba(148,163,184,.28)!important;box-shadow:0 4px 18px rgba(15,23,42,.05)!important}
.crm-dashboard-lower-grid table{font-size:12px}
.crm-dashboard-lower-grid thead{position:sticky;top:0;z-index:1}
.crm-dashboard-lower-grid th{letter-spacing:.035em;font-size:10px!important}
.crm-dashboard-lower-grid td{padding-top:8px!important;padding-bottom:8px!important}
.crm-dashboard-lower-grid tbody tr{transition:background .12s ease}
.crm-dashboard-lower-grid tbody tr:hover{background:rgba(16,185,129,.045)}

html.dark .crm-dashboard-chart-grid>div,
html.dark .crm-dashboard-lower-grid .bg-white.rounded-xl,
html.dark .crm-dashboard-lower-grid .overflow-x-auto.bg-white{background:var(--surface)!important;border-color:var(--border)!important;box-shadow:0 5px 20px rgba(0,0,0,.18)!important}

@media(max-width:1180px){.crm-shipment-six{grid-template-columns:repeat(3,minmax(0,1fr))}.crm-dashboard-chart-grid,.crm-dashboard-lower-grid{grid-template-columns:1fr}}
@media(max-width:640px){.crm-shipment-six{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* v141: remarks and NDR cells must wrap inside their saved column width. */
.crm-remark-wrap,
.crm-remark-wrap * {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word;
  max-width: 100%;
}

/* ============================================================
   CRM v142 UI POLISH — visual/layout only
   Common tables, NDR workflow, modal consistency, remarks.
   ============================================================ */

/* Common table language */
#root table {
  border-collapse: separate;
  border-spacing: 0;
}
#root table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: color-mix(in srgb, var(--crm-surface, #ffffff) 94%, #eef2f7 6%);
  border-bottom: 1px solid rgba(148,163,184,.22);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}
#root table tbody td {
  vertical-align: top;
  border-bottom: 1px solid rgba(148,163,184,.12);
}
#root table tbody tr {
  transition: background-color .14s ease, box-shadow .14s ease;
}
#root table tbody tr:hover {
  background: rgba(16,185,129,.035);
}
html.dark #root table thead th {
  background: #111c31;
  border-bottom-color: rgba(148,163,184,.18);
}
html.dark #root table tbody td { border-bottom-color: rgba(148,163,184,.09); }
html.dark #root table tbody tr:hover { background: rgba(52,211,153,.045); }

/* Long content must wrap instead of stretching the table. */
#root td,
#root .crm-remark-wrap,
#root .crm-courier-remark {
  overflow-wrap: anywhere;
  word-break: break-word;
}
#root .crm-remark-wrap { min-width: 0; max-width: 100%; }
#root .crm-remark-wrap > div { max-width: 100%; }

/* NDR — clearer workflow layout */
.ndr-v142 .crm-page-header { margin-bottom: 10px; }
.ndr-v142 .ndr-toolbar {
  padding: 10px 12px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 5px 16px rgba(15,23,42,.035);
}
.ndr-v142 .ndr-table-card {
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(15,23,42,.055);
}
.ndr-v142 .ndr-table thead th { padding-top: 11px; padding-bottom: 11px; }
.ndr-v142 .ndr-row:nth-child(even) { background: rgba(248,250,252,.6); }
.ndr-v142 .ndr-row:hover { background: rgba(236,253,245,.68); }
.ndr-v142 .ndr-row td { padding-top: 14px; padding-bottom: 14px; }
.ndr-v142 .ndr-actions-cell { min-width: 230px; max-width: 320px; }
.ndr-v142 .ndr-actions {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px;
}
.ndr-v142 .ndr-actions > button {
  min-width: 0;
  width: 100%;
  justify-content: center;
  white-space: normal !important;
  line-height: 1.15;
  min-height: 31px;
}
@media (max-width: 1100px) {
  .ndr-v142 .ndr-actions { grid-template-columns: 1fr; }
  .ndr-v142 .ndr-actions-cell { min-width: 165px; max-width: 220px; }
}
html.dark .ndr-v142 .ndr-toolbar {
  background: rgba(15,26,46,.78);
  border-color: rgba(148,163,184,.14);
  box-shadow: 0 7px 20px rgba(0,0,0,.16);
}
html.dark .ndr-v142 .ndr-table-card { box-shadow: 0 12px 30px rgba(0,0,0,.18); }
html.dark .ndr-v142 .ndr-row:nth-child(even) { background: rgba(30,41,59,.24); }
html.dark .ndr-v142 .ndr-row:hover { background: rgba(16,185,129,.055); }

/* Modal consistency */
[role="dialog"] .modal-in {
  border-radius: 18px !important;
  border-color: rgba(148,163,184,.2) !important;
  box-shadow: 0 28px 90px rgba(15,23,42,.28) !important;
}
[role="dialog"] .crm-modal-body label {
  font-weight: 600;
  color: #64748b;
}
[role="dialog"] .crm-modal-body input,
[role="dialog"] .crm-modal-body textarea,
[role="dialog"] .crm-modal-body select {
  border-radius: 10px !important;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
[role="dialog"] .crm-modal-body input:focus,
[role="dialog"] .crm-modal-body textarea:focus,
[role="dialog"] .crm-modal-body select:focus {
  outline: none !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,.11) !important;
}
html.dark [role="dialog"] .modal-in { border-color: rgba(148,163,184,.14) !important; }
html.dark [role="dialog"] .crm-modal-body label { color: #94a3b8; }

/* Clickable dashboard cards — stronger affordance */
.dashboard-v140 a.block.h-full .crm-stat {
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.dashboard-v140 a.block.h-full:hover .crm-stat {
  transform: translateY(-2px);
  border-color: rgba(16,185,129,.28);
  box-shadow: 0 10px 24px rgba(15,23,42,.09);
}
.dashboard-v140 a.block.h-full:focus-visible .crm-stat {
  outline: 2px solid rgba(16,185,129,.65);
  outline-offset: 2px;
}
html.dark .dashboard-v140 a.block.h-full:hover .crm-stat {
  border-color: rgba(52,211,153,.28);
  box-shadow: 0 12px 25px rgba(0,0,0,.22);
}

/* Remarks — date/meta line above text, consistent breathing room */
.crm-remark-wrap > div { line-height: 1.35; }
.crm-remark-wrap .crm-courier-remark { margin-bottom: 5px; }

/* ---------------- end crm-depth.css ---------------- */

/* ---------------- from crm-v147-ui.css ---------------- */
/* CRM v143 — softer professional light mode + dashboard section shells. */
:root:not(.dark) body { background:#e7edf4 !important; color:#172033; }
:root:not(.dark) #root { background:linear-gradient(180deg,#e6edf5 0%,#edf2f7 48%,#e5ebf2 100%) !important; }
:root:not(.dark) main, :root:not(.dark) .main-content { background:transparent !important; }

/* Stop the "everything is white" glare without turning light mode into dark mode. */
:root:not(.dark) .bg-white { background-color:#f6f8fb !important; }
:root:not(.dark) .bg-gray-50 { background-color:#edf2f7 !important; }
:root:not(.dark) .bg-slate-50 { background-color:#eef2f6 !important; }
:root:not(.dark) .border-gray-100 { border-color:#d2dbe6 !important; }
:root:not(.dark) .border-gray-200 { border-color:#c6d1de !important; }
:root:not(.dark) .border-slate-200 { border-color:#c5d0dc !important; }
:root:not(.dark) input, :root:not(.dark) select, :root:not(.dark) textarea {
  background:#f3f6fa !important; border-color:#c7d2df !important; color:#1e293b !important;
}
:root:not(.dark) input:focus, :root:not(.dark) select:focus, :root:not(.dark) textarea:focus {
  background:#fbfcfe !important; border-color:#34b98b !important; box-shadow:0 0 0 3px rgba(16,185,129,.10) !important;
}

/* Every dashboard row again lives inside its own bordered shell. */
.dashboard-v140 .crm-dashboard-section {
  padding:12px; border:1px solid rgba(100,116,139,.22); border-radius:16px;
  background:rgba(246,248,251,.76); box-shadow:0 6px 18px rgba(30,41,59,.055);
}
.dashboard-v140 .crm-dashboard-section > h3 { margin:0 0 9px 1px; }
:root.dark .dashboard-v140 .crm-dashboard-section {
  background:rgba(15,23,42,.48); border-color:rgba(148,163,184,.14); box-shadow:0 8px 22px rgba(0,0,0,.16);
}

/* Chart and analytics cards are darker than the page in light mode, so groups remain visible. */
:root:not(.dark) .dashboard-v140 .crm-dashboard-chart-grid > div,
:root:not(.dark) .dashboard-v140 .crm-dashboard-lower-grid > div,
:root:not(.dark) .dashboard-v140 .crm-stat {
  background:#f3f6fa !important; border-color:#cbd6e2 !important;
  box-shadow:0 5px 14px rgba(30,41,59,.07) !important;
}
:root:not(.dark) .dashboard-v140 .crm-stat:hover { background:#f8fafc !important; }

/* Lead/order boards: comfortable contrast instead of white-on-white. */
:root:not(.dark) table { background:#f4f7fa; }
:root:not(.dark) thead { background:#e8eef5 !important; }
:root:not(.dark) tbody tr { border-color:#d6dee8 !important; }
:root:not(.dark) tbody tr:hover { background:#eaf4f1 !important; }
:root:not(.dark) .crm-table-shell, :root:not(.dark) .ndr-table-card {
  background:#f3f6fa !important; border-color:#cbd6e2 !important;
}

/* Cleaner dashboard filter bar and search surface. */
:root:not(.dark) #dashboard-header-actions { background:transparent; }
:root:not(.dark) header input[placeholder*="Search"] {
  background:#eef3f8 !important; border-color:#aebdcd !important; box-shadow:inset 0 0 0 1px rgba(100,116,139,.05);
}

/* Clickable status rows in dashboard charts. */
.dashboard-v140 a[href*="/orders?status"], .dashboard-v140 a[href*="/leads?status"] { text-decoration:none; }
:root.dark .dashboard-v140 a.hover\\:bg-slate-50:hover { background:rgba(51,65,85,.45) !important; }

@media (max-width:900px){
  .dashboard-v140 .crm-dashboard-section{padding:10px;border-radius:14px}
}


/* CRM v144 — universal readable table alignment + stronger lead/order headers. */
table th, table td {
  text-align:center !important;
  vertical-align:middle !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}
table th > *, table td > * { max-width:100%; }
table textarea, table input, table select { text-align:left !important; }

/* Make every data header unmistakable in both themes. */
:root:not(.dark) table thead,
:root:not(.dark) table thead tr,
:root:not(.dark) table thead th {
  background:#cbd5e1 !important;
  color:#172033 !important;
  font-weight:800 !important;
  border-color:#aebdcd !important;
}
:root.dark table thead,
:root.dark table thead tr,
:root.dark table thead th {
  background:#1e293b !important;
  color:#f8fafc !important;
  font-weight:800 !important;
  border-color:#475569 !important;
}

/* Dates/times and leading identity cells should never look washed out. In lead boards the first
   cell is Date & Time; in order boards the second cell is Date Created, so both are intentionally
   emphasized. */
:root:not(.dark) table tbody td:first-child,
:root:not(.dark) table tbody td:nth-child(2) {
  color:#111827 !important;
  font-weight:700 !important;
}
:root.dark table tbody td:first-child,
:root.dark table tbody td:nth-child(2) {
  color:#f8fafc !important;
  font-weight:700 !important;
}

/* Keep action clusters and long remarks inside their own cell instead of widening the table. */
table td .flex { flex-wrap:wrap; justify-content:center; align-items:center; }
table td button, table td a { max-width:100%; white-space:normal; }
.crm-remark-history, .crm-remark-entry, [data-remark], .crm-toast-body {
  white-space:normal !important; overflow-wrap:anywhere !important; word-break:break-word !important;
}

/* Priority Undelivered notification: unmistakable without changing normal notification logic. */
.crm-toast[data-notify="priority_undelivered"] {
  border:2px solid rgba(225,29,72,.55) !important;
  box-shadow:0 16px 45px rgba(190,18,60,.28) !important;
}

/* v145 — requested alignment polish: status dropdown text and remark content centered. */
table td select,
table td select option,
table td [role="combobox"],
table td [data-status-select],
table td .status-select {
  text-align:center !important;
  text-align-last:center !important;
}

/* Remarks remain wrapped, but the visible remark/date/history content is centered in every CRM table. */
table td .crm-remark-history,
table td .crm-remark-entry,
table td [data-remark],
table td [class*="remark" i] {
  text-align:center !important;
  margin-left:auto;
  margin-right:auto;
}


/* ============================================================
   v146 — Optional Excel View
   Toggle lives beside the light/dark button. Presentation only.
   ============================================================ */
:root.excel-mode {
  --excel-grid:#cbd5e1;
  --excel-head:#dbe5ef;
  --excel-head-text:#0f172a;
  --excel-cell:#f8fafc;
  --excel-alt:#f1f5f9;
  --excel-hover:#e2e8f0;
}
:root.dark.excel-mode {
  --excel-grid:#475569;
  --excel-head:#263445;
  --excel-head-text:#f8fafc;
  --excel-cell:#111827;
  --excel-alt:#172033;
  --excel-hover:#243247;
}
:root.excel-mode table {
  border-collapse:collapse !important;
  border-spacing:0 !important;
  width:max-content;
  min-width:100%;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:11px !important;
  line-height:1.2 !important;
}
:root.excel-mode table thead th {
  background:var(--excel-head) !important;
  color:var(--excel-head-text) !important;
  border:1px solid var(--excel-grid) !important;
  border-radius:0 !important;
  padding:5px 6px !important;
  min-height:28px !important;
  height:28px !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
  white-space:normal !important;
  vertical-align:middle !important;
}
:root.excel-mode table tbody td {
  background:var(--excel-cell) !important;
  border:1px solid var(--excel-grid) !important;
  border-radius:0 !important;
  padding:4px 6px !important;
  min-height:27px !important;
  vertical-align:middle !important;
  text-align:center !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}
:root.excel-mode table tbody tr:nth-child(even) td { background:var(--excel-alt) !important; }
:root.excel-mode table tbody tr:hover td { background:var(--excel-hover) !important; }

:root.excel-mode table td input,
:root.excel-mode table td select,
:root.excel-mode table td textarea,
:root.excel-mode table td button,
:root.excel-mode table td a {
  font-size:10.5px !important;
  line-height:1.15 !important;
}
:root.excel-mode table td input,
:root.excel-mode table td select {
  min-height:25px !important;
  height:25px !important;
  padding:2px 5px !important;
  border-radius:2px !important;
}
:root.excel-mode table td button,
:root.excel-mode table td a {
  padding-top:3px !important;
  padding-bottom:3px !important;
  border-radius:3px !important;
}
:root.excel-mode .overflow-x-auto:has(table),
:root.excel-mode .overflow-auto:has(table),
:root.excel-mode [class*="rounded"]:has(> table),
:root.excel-mode [class*="rounded"]:has(.overflow-x-auto > table) {
  border-radius:2px !important;
}
:root.excel-mode table .crm-remark-history,
:root.excel-mode table .crm-remark-entry,
:root.excel-mode table [data-remark],
:root.excel-mode table [class*="remark" i] {
  text-align:center !important;
  white-space:normal !important;
}
:root.excel-mode table thead {
  position:sticky;
  top:0;
  z-index:15;
}

/* ============================================================
   v147 — Readability pass for Normal + Excel + Light/Dark
   Excel stays dense, but typography no longer shrinks.
   ============================================================ */
:root:not(.dark) {
  --crm-readable-text:#0b1220;
  --crm-readable-muted:#1f2937;
}
:root.dark {
  --crm-readable-text:#f8fafc;
  --crm-readable-muted:#e5e7eb;
}

/* Strong readable body text in CRM surfaces. Preserve semantic badge/button colors. */
:root:not(.dark) main table tbody td,
:root:not(.dark) main table tbody td p,
:root:not(.dark) main table tbody td span:not([class*="bg-"]):not([class*="text-"]),
:root:not(.dark) main .crm-remark-history,
:root:not(.dark) main .crm-remark-entry,
:root:not(.dark) main [data-remark] {
  color:var(--crm-readable-text) !important;
}
:root.dark main table tbody td,
:root.dark main table tbody td p,
:root.dark main table tbody td span:not([class*="bg-"]):not([class*="text-"]),
:root.dark main .crm-remark-history,
:root.dark main .crm-remark-entry,
:root.dark main [data-remark] {
  color:var(--crm-readable-text) !important;
}

/* Excel mode: keep spreadsheet density without tiny text. */
:root.excel-mode table {
  font-size:13px !important;
  line-height:1.35 !important;
}
:root.excel-mode table thead th {
  min-height:36px !important;
  height:36px !important;
  padding:7px 8px !important;
  font-size:13.5px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:.015em !important;
}
:root.excel-mode table tbody td {
  min-height:32px !important;
  padding:6px 8px !important;
  font-size:13px !important;
  line-height:1.35 !important;
  font-weight:500 !important;
}
:root.excel-mode table td input,
:root.excel-mode table td select,
:root.excel-mode table td textarea,
:root.excel-mode table td button,
:root.excel-mode table td a {
  font-size:12.5px !important;
  line-height:1.25 !important;
  font-weight:600 !important;
}
:root.excel-mode table td input,
:root.excel-mode table td select {
  min-height:30px !important;
  height:30px !important;
  padding:4px 7px !important;
}

/* Explicit high-contrast spreadsheet colors. */
:root:not(.dark).excel-mode table tbody td,
:root:not(.dark).excel-mode table tbody td p,
:root:not(.dark).excel-mode table tbody td div,
:root:not(.dark).excel-mode table tbody td label,
:root:not(.dark).excel-mode table tbody td input,
:root:not(.dark).excel-mode table tbody td select,
:root:not(.dark).excel-mode table tbody td textarea {
  color:#050b16 !important;
}
:root.dark.excel-mode table tbody td,
:root.dark.excel-mode table tbody td p,
:root.dark.excel-mode table tbody td div,
:root.dark.excel-mode table tbody td label,
:root.dark.excel-mode table tbody td input,
:root.dark.excel-mode table tbody td select,
:root.dark.excel-mode table tbody td textarea {
  color:#f8fafc !important;
}
:root:not(.dark).excel-mode table thead th {
  background:#cbd8e6 !important;
  color:#07111f !important;
  border-color:#9eafc1 !important;
}
:root.dark.excel-mode table thead th {
  background:#243244 !important;
  color:#ffffff !important;
  border-color:#526176 !important;
}

/* Date/time remains especially easy to scan in either view. */
:root:not(.dark) table tbody td:first-child,
:root:not(.dark) table tbody td:nth-child(2) { color:#000 !important; font-weight:700 !important; }
:root.dark table tbody td:first-child,
:root.dark table tbody td:nth-child(2) { color:#fff !important; font-weight:700 !important; }

/* ---------------- end crm-v147-ui.css ---------------- */

/* ---------------- from crm-v148-status-excel.css ---------------- */
/* CRM v148 — status-aware Excel rows + status controls */
:root{--crm-status-row-alpha:.10}
html.excel-mode tbody tr[data-crm-status-color]{transition:background-color .12s ease,box-shadow .12s ease}
html.excel-mode tbody tr[data-crm-status-color="slate"],html.excel-mode tbody tr[data-crm-status-color="gray"]{background:#f1f5f9!important}
html.excel-mode tbody tr[data-crm-status-color="blue"]{background:#eff6ff!important}
html.excel-mode tbody tr[data-crm-status-color="indigo"]{background:#eef2ff!important}
html.excel-mode tbody tr[data-crm-status-color="cyan"]{background:#ecfeff!important}
html.excel-mode tbody tr[data-crm-status-color="emerald"]{background:#ecfdf5!important}
html.excel-mode tbody tr[data-crm-status-color="amber"]{background:#fffbeb!important}
html.excel-mode tbody tr[data-crm-status-color="yellow"]{background:#fefce8!important}
html.excel-mode tbody tr[data-crm-status-color="orange"]{background:#fff7ed!important}
html.excel-mode tbody tr[data-crm-status-color="rose"]{background:#fff1f2!important}
html.excel-mode tbody tr[data-crm-status-color="purple"]{background:#faf5ff!important}
html.excel-mode tbody tr[data-crm-status-color] td{background:transparent!important}
html.excel-mode tbody tr[data-crm-status-color]:hover{box-shadow:inset 0 0 0 999px rgba(15,23,42,.035)}
html.dark.excel-mode tbody tr[data-crm-status-color="slate"],html.dark.excel-mode tbody tr[data-crm-status-color="gray"]{background:#1e293b!important}
html.dark.excel-mode tbody tr[data-crm-status-color="blue"]{background:#172554!important}
html.dark.excel-mode tbody tr[data-crm-status-color="indigo"]{background:#1e1b4b!important}
html.dark.excel-mode tbody tr[data-crm-status-color="cyan"]{background:#083344!important}
html.dark.excel-mode tbody tr[data-crm-status-color="emerald"]{background:#052e2b!important}
html.dark.excel-mode tbody tr[data-crm-status-color="amber"],html.dark.excel-mode tbody tr[data-crm-status-color="yellow"]{background:#422006!important}
html.dark.excel-mode tbody tr[data-crm-status-color="orange"]{background:#431407!important}
html.dark.excel-mode tbody tr[data-crm-status-color="rose"]{background:#4c0519!important}
html.dark.excel-mode tbody tr[data-crm-status-color="purple"]{background:#3b0764!important}
select.crm-status-select-colored{font-weight:800!important;text-align:center!important;text-align-last:center!important;border-width:1px!important;border-style:solid!important;box-shadow:0 1px 2px rgba(15,23,42,.08)!important}
select.crm-status-select-colored[data-crm-status-color="slate"],select.crm-status-select-colored[data-crm-status-color="gray"]{background:#e2e8f0!important;color:#0f172a!important;border-color:#94a3b8!important}
select.crm-status-select-colored[data-crm-status-color="blue"]{background:#dbeafe!important;color:#1e3a8a!important;border-color:#60a5fa!important}
select.crm-status-select-colored[data-crm-status-color="indigo"]{background:#e0e7ff!important;color:#312e81!important;border-color:#818cf8!important}
select.crm-status-select-colored[data-crm-status-color="cyan"]{background:#cffafe!important;color:#164e63!important;border-color:#22d3ee!important}
select.crm-status-select-colored[data-crm-status-color="emerald"]{background:#d1fae5!important;color:#064e3b!important;border-color:#34d399!important}
select.crm-status-select-colored[data-crm-status-color="amber"]{background:#fef3c7!important;color:#78350f!important;border-color:#f59e0b!important}
select.crm-status-select-colored[data-crm-status-color="yellow"]{background:#fef9c3!important;color:#713f12!important;border-color:#eab308!important}
select.crm-status-select-colored[data-crm-status-color="orange"]{background:#ffedd5!important;color:#7c2d12!important;border-color:#fb923c!important}
select.crm-status-select-colored[data-crm-status-color="rose"]{background:#ffe4e6!important;color:#881337!important;border-color:#fb7185!important}
select.crm-status-select-colored[data-crm-status-color="purple"]{background:#f3e8ff!important;color:#581c87!important;border-color:#c084fc!important}
html.dark select.crm-status-select-colored{color:#fff!important;filter:saturate(.92) brightness(.82);border-color:rgba(255,255,255,.28)!important}
/* Resized columns are persisted as locked by the existing per-user column config. */
th[draggable="true"]{user-select:none}

/* ---------------- end crm-v148-status-excel.css ---------------- */

/* ---------------- from crm-v149-status-border.css ---------------- */
/* CRM v149 — independent status border colour + fully centred remark cells */
.crm-status-select-colored[data-crm-status-border="slate"],.crm-status-badge[data-crm-status-border="slate"]{border-color:#64748b!important}
.crm-status-select-colored[data-crm-status-border="gray"],.crm-status-badge[data-crm-status-border="gray"]{border-color:#6b7280!important}
.crm-status-select-colored[data-crm-status-border="blue"],.crm-status-badge[data-crm-status-border="blue"]{border-color:#2563eb!important}
.crm-status-select-colored[data-crm-status-border="indigo"],.crm-status-badge[data-crm-status-border="indigo"]{border-color:#4f46e5!important}
.crm-status-select-colored[data-crm-status-border="cyan"],.crm-status-badge[data-crm-status-border="cyan"]{border-color:#0891b2!important}
.crm-status-select-colored[data-crm-status-border="emerald"],.crm-status-badge[data-crm-status-border="emerald"]{border-color:#059669!important}
.crm-status-select-colored[data-crm-status-border="amber"],.crm-status-badge[data-crm-status-border="amber"]{border-color:#d97706!important}
.crm-status-select-colored[data-crm-status-border="yellow"],.crm-status-badge[data-crm-status-border="yellow"]{border-color:#ca8a04!important}
.crm-status-select-colored[data-crm-status-border="orange"],.crm-status-badge[data-crm-status-border="orange"]{border-color:#ea580c!important}
.crm-status-select-colored[data-crm-status-border="rose"],.crm-status-badge[data-crm-status-border="rose"]{border-color:#e11d48!important}
.crm-status-select-colored[data-crm-status-border="purple"],.crm-status-badge[data-crm-status-border="purple"]{border-color:#9333ea!important}
.crm-status-select-colored,.crm-status-badge[data-crm-status-border]{border-width:2px!important;border-style:solid!important}
/* Remark column: header + every nested remark/date/history line stays centred and wraps. */
th[data-col-key="remark"],td[data-col-key="remark"],th[data-column="remark"],td[data-column="remark"],td[data-label="Remark"],td[data-label="REMARK"]{text-align:center!important;vertical-align:middle!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important}
td[data-col-key="remark"] *,td[data-column="remark"] *,td[data-label="Remark"] *,td[data-label="REMARK"] *{text-align:center!important;justify-content:center!important;margin-left:auto!important;margin-right:auto!important;white-space:normal!important;overflow-wrap:anywhere!important}
html.dark select.crm-status-select-colored[data-crm-status-border]{filter:none!important}

/* ---------------- end crm-v149-status-border.css ---------------- */

/* ---------------- from crm-v150-status-custom.css ---------------- */
/* CRM v150 — unlimited custom fill/border colors + readable status controls */
.crm-status-select-colored{border-radius:.55rem!important;box-shadow:0 1px 2px rgba(15,23,42,.16)!important;min-height:32px!important;opacity:1!important;filter:none!important}
html.dark .crm-status-select-colored{opacity:1!important;filter:none!important}
html.dark select.crm-status-select-colored option{background:#0f172a!important;color:#fff!important}
.crm-custom-color-box{display:flex;align-items:center;gap:8px;flex:0 0 auto}.crm-custom-color-wrap{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#64748b;white-space:nowrap}.crm-custom-color-input{width:38px;height:30px;padding:2px;border:1px solid #cbd5e1;border-radius:7px;background:transparent;cursor:pointer}.crm-custom-color-input::-webkit-color-swatch-wrapper{padding:1px}.crm-custom-color-input::-webkit-color-swatch{border:0;border-radius:4px}html.dark .crm-custom-color-wrap{color:#cbd5e1}html.dark .crm-custom-color-input{border-color:#475569;background:#111827}
/* Remark: centre every line, including date/author/history/add-remark. */
th[data-col-key="remark"],td[data-col-key="remark"],th[data-column="remark"],td[data-column="remark"],td[data-label="Remark"],td[data-label="REMARK"]{text-align:center!important;vertical-align:middle!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important}td[data-col-key="remark"] *,td[data-column="remark"] *,td[data-label="Remark"] *,td[data-label="REMARK"] *{text-align:center!important;justify-content:center!important;white-space:normal!important;overflow-wrap:anywhere!important}

/* ---------------- end crm-v150-status-custom.css ---------------- */

/* ---------------- from crm-v151-ui.css ---------------- */
/* CRM v151 — delivery event cards + stable lead-board rows */
.crm-today-filter input[type="date"]{min-width:132px}
html.dark .crm-today-filter input[type="date"]{background:#0f172a!important;color:#f8fafc!important;border-color:#475569!important;color-scheme:dark}
/* Light mode: lead/order board rows stay clean white in both Normal and Excel view. */
html:not(.dark) .crm-table-scroll tbody tr,
html:not(.dark).excel-mode .crm-table-scroll tbody tr,
html:not(.dark).excel-mode .crm-table-scroll tbody tr[data-crm-status-color]{background:#fff!important}
html:not(.dark) .crm-table-scroll tbody tr td,
html:not(.dark).excel-mode .crm-table-scroll tbody tr[data-crm-status-color] td{background:transparent!important}
html:not(.dark) .crm-table-scroll tbody tr:hover,
html:not(.dark).excel-mode .crm-table-scroll tbody tr[data-crm-status-color]:hover{background:#f8fafc!important;box-shadow:none!important}
/* Never use the old green hover-flash on board rows. */
.crm-table-scroll tbody tr:hover{animation:none!important}
.crm-table-scroll .crm-remark-wrap,.crm-table-scroll .crm-courier-remark{text-align:center!important}
.crm-table-scroll .crm-remark-wrap *,.crm-table-scroll .crm-courier-remark *{justify-content:center!important;text-align:center!important}

/* ---------------- end crm-v151-ui.css ---------------- */

/* ---------------- from crm-v152-new-lead-white.css ---------------- */
/* v162: har niyam me ".flash-new-lead" ko chhoda gaya hai - nayi lead ka
   green flash row par chalta hai, aur koi bhi !important background use rok deta hai. */
/* CRM v152 — light mode: NEW lead rows stay pure white; hover remains intentional green */
html:not(.dark) .crm-table-scroll tbody tr[data-crm-status-color="slate"]:not(.flash-new-lead),
html:not(.dark) .crm-table-scroll tbody tr[data-crm-status-color="gray"]:not(.flash-new-lead),
html:not(.dark) .crm-table-scroll tbody tr[data-crm-status-color="new"]:not(.flash-new-lead),
html:not(.dark).excel-mode .crm-table-scroll tbody tr[data-crm-status-color="slate"]:not(.flash-new-lead),
html:not(.dark).excel-mode .crm-table-scroll tbody tr[data-crm-status-color="gray"]:not(.flash-new-lead),
html:not(.dark).excel-mode .crm-table-scroll tbody tr[data-crm-status-color="new"]:not(.flash-new-lead) {
  background:#ffffff !important;
}
html:not(.dark) .crm-table-scroll tbody tr[data-crm-status-color="slate"]:not(.flash-new-lead) > td,
html:not(.dark) .crm-table-scroll tbody tr[data-crm-status-color="gray"]:not(.flash-new-lead) > td,
html:not(.dark) .crm-table-scroll tbody tr[data-crm-status-color="new"]:not(.flash-new-lead) > td,
html:not(.dark).excel-mode .crm-table-scroll tbody tr[data-crm-status-color="slate"]:not(.flash-new-lead) > td,
html:not(.dark).excel-mode .crm-table-scroll tbody tr[data-crm-status-color="gray"]:not(.flash-new-lead) > td,
html:not(.dark).excel-mode .crm-table-scroll tbody tr[data-crm-status-color="new"]:not(.flash-new-lead) > td {
  background:#ffffff !important;
}
/* Keep the existing green hover/focus behavior requested by the user. */
html:not(.dark) .crm-table-scroll tbody tr[data-crm-status-color="slate"]:not(.flash-new-lead):hover > td,
html:not(.dark) .crm-table-scroll tbody tr[data-crm-status-color="gray"]:not(.flash-new-lead):hover > td,
html:not(.dark) .crm-table-scroll tbody tr[data-crm-status-color="new"]:not(.flash-new-lead):hover > td,
html:not(.dark) .crm-table-scroll tbody tr[data-crm-status-color="slate"]:not(.flash-new-lead):focus-within > td,
html:not(.dark) .crm-table-scroll tbody tr[data-crm-status-color="gray"]:not(.flash-new-lead):focus-within > td,
html:not(.dark) .crm-table-scroll tbody tr[data-crm-status-color="new"]:not(.flash-new-lead):focus-within > td,
html:not(.dark).excel-mode .crm-table-scroll tbody tr[data-crm-status-color="slate"]:not(.flash-new-lead):hover > td,
html:not(.dark).excel-mode .crm-table-scroll tbody tr[data-crm-status-color="gray"]:not(.flash-new-lead):hover > td,
html:not(.dark).excel-mode .crm-table-scroll tbody tr[data-crm-status-color="new"]:not(.flash-new-lead):hover > td {
  background:#eaf4f1 !important;
}

/* ---------------- end crm-v152-new-lead-white.css ---------------- */

/* ---------------- from crm-v153-white-rows.css ---------------- */
/* CRM v153 — light mode ki row safed. (v162 me theek ki gayi.)

   Pehle ye har row aur HAR CELL ko bina kisi shart ke safed kar deta tha:

       tbody tr      { background:#ffffff !important; }
       tbody tr > td { background:#ffffff !important; }

   Cell ko safed kar dene ka matlab - row apne upar jo bhi rang lagaye, cell usse dhak leta hai.
   Isi se Order Place ka halka green, nayi lead ka green flash, aur lock/duplicate row ka rang -
   teeno gayab ho gaye the. (Hover ka niyam cell par tha, isliye sirf wahi zinda bacha.)

   Ab: safed sirf un row par jinka apna koi rang hai hi nahi. Cell ka apna rang nahi. */

html:not(.dark) .crm-lead-board tbody tr:not([class*="bg-"]):not(.flash-new-lead),
html:not(.dark).excel-mode .crm-lead-board tbody tr:not([class*="bg-"]):not(.flash-new-lead) {
  background:#ffffff !important;
}

/* Cell apna rang na lagaye - warna wo row ka rang dhak dega.
   flash wali row ko chhoda hai: uska animation row par chalta hai, use koi bhi !important
   background rok deta. */
html:not(.dark) .crm-lead-board tbody tr:not(.flash-new-lead) > td,
html:not(.dark).excel-mode .crm-lead-board tbody tr:not(.flash-new-lead) > td {
  background:transparent !important;
}

/* Hover/focus ka halka green ishara - waise ka waisa. */
html:not(.dark) .crm-lead-board tbody tr:not(.flash-new-lead):hover > td,
html:not(.dark) .crm-lead-board tbody tr:not(.flash-new-lead):focus-within > td,
html:not(.dark).excel-mode .crm-lead-board tbody tr:not(.flash-new-lead):hover > td,
html:not(.dark).excel-mode .crm-lead-board tbody tr:not(.flash-new-lead):focus-within > td {
  background:#eaf4f1 !important;
}

/* ---------------- end crm-v153-white-rows.css ---------------- */

/* ---------------- from crm-v154-mode-polish.css ---------------- */
/* v162: har niyam me ".flash-new-lead" ko chhoda gaya hai - nayi lead ka
   green flash row par chalta hai, aur koi bhi !important background use rok deta hai. */
/* CRM v154 — four-mode board polish (Light, Light Excel, Dark, Dark Excel). */

/* Lead board gets an explicit surface so generic light-theme .bg-white overrides cannot wash it grey. */
html:not(.dark) .crm-lead-board {
  background:#ffffff !important;
  border-color:#cbd5e1 !important;
}
html:not(.dark) .crm-lead-board table {
  background:#ffffff !important;
}

/* Normal light + Excel light: ordinary status rows are truly white. Special lock/duplicate/
   converted rows remain controlled by their functional classes because they have no data-status-color. */
html:not(.dark) .crm-lead-board tbody tr[data-status-color]:not(.flash-new-lead),
html:not(.dark).excel-mode .crm-lead-board tbody tr[data-status-color]:not(.flash-new-lead) {
  background:#ffffff !important;
}
html:not(.dark) .crm-lead-board tbody tr[data-status-color]:not(.flash-new-lead) > td,
html:not(.dark).excel-mode .crm-lead-board tbody tr[data-status-color]:not(.flash-new-lead) > td {
  background:#ffffff !important;
}

/* Existing intentional green hover/focus cue stays exactly a hover/focus cue. */
html:not(.dark) .crm-lead-board tbody tr[data-status-color]:not(.flash-new-lead):hover > td,
html:not(.dark) .crm-lead-board tbody tr[data-status-color]:not(.flash-new-lead):focus-within > td,
html:not(.dark).excel-mode .crm-lead-board tbody tr[data-status-color]:not(.flash-new-lead):hover > td,
html:not(.dark).excel-mode .crm-lead-board tbody tr[data-status-color]:not(.flash-new-lead):focus-within > td {
  background:#eaf4f1 !important;
}

/* Light normal: comfortable, clean sheet rather than a grey data body. */
html:not(.dark):not(.excel-mode) .crm-lead-board tbody td {
  color:#172033 !important;
  border-color:#e2e8f0 !important;
}
html:not(.dark):not(.excel-mode) .crm-lead-board tbody td:first-child,
html:not(.dark):not(.excel-mode) .crm-lead-board tbody td:nth-child(2) {
  color:#334155 !important;
}

/* Light Excel: crisp spreadsheet grid but no zebra-grey fill. */
html:not(.dark).excel-mode .crm-lead-board tbody tr:nth-child(even) > td,
html:not(.dark).excel-mode .crm-lead-board tbody tr:nth-child(odd) > td {
  background:transparent !important;
}
html:not(.dark).excel-mode .crm-lead-board tbody td {
  color:#111827 !important;
  border-color:#cbd5e1 !important;
}
html:not(.dark).excel-mode .crm-lead-board thead th {
  background:#cbd8e6 !important;
  color:#0f172a !important;
  border-color:#94a3b8 !important;
}

/* Dark normal stays calm and readable. */
html.dark:not(.excel-mode) .crm-lead-board {
  background:#0f172a !important;
  border-color:#25344a !important;
}
html.dark:not(.excel-mode) .crm-lead-board tbody tr[data-status-color]:not(.flash-new-lead) > td {
  background:#111c2f !important;
  color:#e5edf7 !important;
  border-color:#243247 !important;
}
html.dark:not(.excel-mode) .crm-lead-board tbody tr[data-status-color]:not(.flash-new-lead):hover > td,
html.dark:not(.excel-mode) .crm-lead-board tbody tr[data-status-color]:not(.flash-new-lead):focus-within > td {
  background:#17342f !important;
}

/* Dark Excel: true dark spreadsheet, not a large flat grey block. Row painter provides only a subtle
   status tint; these rules provide the grid, typography and hover clarity. */
html.dark.excel-mode .crm-lead-board {
  background:#0b1220 !important;
  border-color:#334155 !important;
}
html.dark.excel-mode .crm-lead-board table {
  background:#0b1220 !important;
}
html.dark.excel-mode .crm-lead-board thead th {
  background:#223047 !important;
  color:#ffffff !important;
  border-color:#475569 !important;
  font-weight:800 !important;
}
html.dark.excel-mode .crm-lead-board tbody td {
  color:#f1f5f9 !important;
  border-color:#334155 !important;
}
html.dark.excel-mode .crm-lead-board tbody tr[data-status-color]:not(.flash-new-lead) {
  box-shadow:inset 3px 0 0 var(--crm-row-accent,#475569) !important;
}
html.dark.excel-mode .crm-lead-board tbody tr[data-status-color]:not(.flash-new-lead):hover > td,
html.dark.excel-mode .crm-lead-board tbody tr[data-status-color]:not(.flash-new-lead):focus-within > td {
  background:rgba(16,185,129,.10) !important;
}

/* Keep secondary text readable in both dark board modes without flattening semantic green actions. */
html.dark .crm-lead-board .text-slate-300 { color:#94a3b8 !important; }
html.dark .crm-lead-board .text-slate-400 { color:#a8b5c7 !important; }
html.dark .crm-lead-board .text-slate-500 { color:#cbd5e1 !important; }

/* Status controls retain the administrator's custom fill/border. Make their geometry consistent. */
.crm-lead-board select.crm-status-select-colored {
  min-height:30px !important;
  font-weight:800 !important;
  opacity:1 !important;
}

/* ---------------- end crm-v154-mode-polish.css

/* ---------------- from crm-v154-mode-polish.css (duplicated for .crm-order-board) ---------------- */
/* v162: har niyam me ".flash-new-lead" ko chhoda gaya hai - nayi lead ka
   green flash row par chalta hai, aur koi bhi !important background use rok deta hai. */
/* CRM v154 — four-mode board polish (Light, Light Excel, Dark, Dark Excel). */

/* Lead board gets an explicit surface so generic light-theme .bg-white overrides cannot wash it grey. */
html:not(.dark) .crm-order-board {
  background:#ffffff !important;
  border-color:#cbd5e1 !important;
}
html:not(.dark) .crm-order-board table {
  background:#ffffff !important;
}

/* Normal light + Excel light: ordinary status rows are truly white. Special lock/duplicate/
   converted rows remain controlled by their functional classes because they have no data-status-color. */
html:not(.dark) .crm-order-board tbody tr[data-status-color]:not(.flash-new-lead),
html:not(.dark).excel-mode .crm-order-board tbody tr[data-status-color]:not(.flash-new-lead) {
  background:#ffffff !important;
}
html:not(.dark) .crm-order-board tbody tr[data-status-color]:not(.flash-new-lead) > td,
html:not(.dark).excel-mode .crm-order-board tbody tr[data-status-color]:not(.flash-new-lead) > td {
  background:#ffffff !important;
}

/* Existing intentional green hover/focus cue stays exactly a hover/focus cue. */
html:not(.dark) .crm-order-board tbody tr[data-status-color]:not(.flash-new-lead):hover > td,
html:not(.dark) .crm-order-board tbody tr[data-status-color]:not(.flash-new-lead):focus-within > td,
html:not(.dark).excel-mode .crm-order-board tbody tr[data-status-color]:not(.flash-new-lead):hover > td,
html:not(.dark).excel-mode .crm-order-board tbody tr[data-status-color]:not(.flash-new-lead):focus-within > td {
  background:#eaf4f1 !important;
}

/* Light normal: comfortable, clean sheet rather than a grey data body. */
html:not(.dark):not(.excel-mode) .crm-order-board tbody td {
  color:#172033 !important;
  border-color:#e2e8f0 !important;
}
html:not(.dark):not(.excel-mode) .crm-order-board tbody td:first-child,
html:not(.dark):not(.excel-mode) .crm-order-board tbody td:nth-child(2) {
  color:#334155 !important;
}

/* Light Excel: crisp spreadsheet grid but no zebra-grey fill. */
html:not(.dark).excel-mode .crm-order-board tbody tr:nth-child(even) > td,
html:not(.dark).excel-mode .crm-order-board tbody tr:nth-child(odd) > td {
  background:transparent !important;
}
html:not(.dark).excel-mode .crm-order-board tbody td {
  color:#111827 !important;
  border-color:#cbd5e1 !important;
}
html:not(.dark).excel-mode .crm-order-board thead th {
  background:#cbd8e6 !important;
  color:#0f172a !important;
  border-color:#94a3b8 !important;
}

/* Dark normal stays calm and readable. */
html.dark:not(.excel-mode) .crm-order-board {
  background:#0f172a !important;
  border-color:#25344a !important;
}
html.dark:not(.excel-mode) .crm-order-board tbody tr[data-status-color]:not(.flash-new-lead) > td {
  background:#111c2f !important;
  color:#e5edf7 !important;
  border-color:#243247 !important;
}
html.dark:not(.excel-mode) .crm-order-board tbody tr[data-status-color]:not(.flash-new-lead):hover > td,
html.dark:not(.excel-mode) .crm-order-board tbody tr[data-status-color]:not(.flash-new-lead):focus-within > td {
  background:#17342f !important;
}

/* Dark Excel: true dark spreadsheet, not a large flat grey block. Row painter provides only a subtle
   status tint; these rules provide the grid, typography and hover clarity. */
html.dark.excel-mode .crm-order-board {
  background:#0b1220 !important;
  border-color:#334155 !important;
}
html.dark.excel-mode .crm-order-board table {
  background:#0b1220 !important;
}
html.dark.excel-mode .crm-order-board thead th {
  background:#223047 !important;
  color:#ffffff !important;
  border-color:#475569 !important;
  font-weight:800 !important;
}
html.dark.excel-mode .crm-order-board tbody td {
  color:#f1f5f9 !important;
  border-color:#334155 !important;
}
html.dark.excel-mode .crm-order-board tbody tr[data-status-color]:not(.flash-new-lead) {
  box-shadow:inset 3px 0 0 var(--crm-row-accent,#475569) !important;
}
html.dark.excel-mode .crm-order-board tbody tr[data-status-color]:not(.flash-new-lead):hover > td,
html.dark.excel-mode .crm-order-board tbody tr[data-status-color]:not(.flash-new-lead):focus-within > td {
  background:rgba(16,185,129,.10) !important;
}

/* Keep secondary text readable in both dark board modes without flattening semantic green actions. */
html.dark .crm-order-board .text-slate-300 { color:#94a3b8 !important; }
html.dark .crm-order-board .text-slate-400 { color:#a8b5c7 !important; }
html.dark .crm-order-board .text-slate-500 { color:#cbd5e1 !important; }

/* Status controls retain the administrator's custom fill/border. Make their geometry consistent. */
.crm-order-board select.crm-status-select-colored {
  min-height:30px !important;
  font-weight:800 !important;
  opacity:1 !important;
}

/* ---------------- end crm-v154-mode-polish.css duplicate ---------------- */

/* ---------------- from crm-v162-status.css ---------------- */
/* CRM v162 — status button ek hi naap, aur row ka rang wapas.

   Ye file sabse AAKHIR me load hoti hai, isliye iske niyam baaki sab ke upar lagte hain. */

/* ---------------------------------------------------------------------------------------
   1. STATUS BUTTON — har mode me ek hi naap, ek hi shakal

   Status kabhi badge hota hai (lock lagi row) aur kabhi dropdown (khuli row). Naam chhota ho
   ("Ringing") ya lamba ("RTO Out For Delivery") - button ka naap ab nahi badlega, isliye poori
   column seedh me rehti hai.
   --------------------------------------------------------------------------------------- */
/* v164: sirf table ke cell me. Pehle ye har jagah lagta tha, isliye Edit Lead ke form ka
   Status field bhi gol button ban gaya tha - wo aam form field hi rehna chahiye. */
td .crm-status-badge,
td select.crm-status-select-colored,
td select[data-crm-status-color] {
  box-sizing: border-box !important;
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
  text-align-last: center !important;
  vertical-align: middle !important;
}
td .crm-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
/* Dropdown ka apna teer chhipa kar dono ki shakal bilkul ek jaisi. */
td select.crm-status-select-colored,
td select[data-crm-status-color] {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: none !important;
}
/* Chhoti screen par thoda kam - par sab par barabar. */
@media (max-width: 640px) {
  td .crm-status-badge,
  td select.crm-status-select-colored,
  td select[data-crm-status-color] { width: 132px !important; min-width: 132px !important; max-width: 132px !important; }
}

/* ---------------------------------------------------------------------------------------
   2. ROW KA APNA RANG — Order Place halka green, lock amber, duplicate rose

   App ye rang row par class se lagata hai. Yahan unhe dobara likh diya gaya hai taaki koi
   purani "sab safed kar do" wali line inhe dhak na sake.
   --------------------------------------------------------------------------------------- */
html:not(.dark) .crm-lead-board tbody tr[class*="bg-emerald-50"],
html:not(.dark).excel-mode .crm-lead-board tbody tr[class*="bg-emerald-50"] { background:#ecfdf5 !important; }

html:not(.dark) .crm-lead-board tbody tr[class*="bg-rose-50"],
html:not(.dark).excel-mode .crm-lead-board tbody tr[class*="bg-rose-50"] { background:#fff1f2 !important; }

html:not(.dark) .crm-lead-board tbody tr[class*="bg-amber-50"],
html:not(.dark).excel-mode .crm-lead-board tbody tr[class*="bg-amber-50"] { background:#fffbeb !important; }

/* duplicate wali row jaan-boojh kar aur halki (app use "bg-amber-50/50" deta hai) */
html:not(.dark) .crm-lead-board tbody tr[class*="bg-amber-50/50"],
html:not(.dark).excel-mode .crm-lead-board tbody tr[class*="bg-amber-50/50"] { background:#fffdf5 !important; }

html.dark .crm-lead-board tbody tr[class*="bg-emerald-50"] { background:#0d2c22 !important; }
html.dark .crm-lead-board tbody tr[class*="bg-rose-50"]    { background:#331018 !important; }
html.dark .crm-lead-board tbody tr[class*="bg-amber-50"]   { background:#33200e !important; }

/* Rang wali row ke cell paardarshi rahein, warna wahi purani dikkat lautegi. */
html:not(.dark) .crm-lead-board tbody tr[class*="bg-"]:not(:hover):not(:focus-within) > td,
html:not(.dark).excel-mode .crm-lead-board tbody tr[class*="bg-"]:not(:hover):not(:focus-within) > td,
html.dark .crm-lead-board tbody tr[class*="bg-"]:not(:hover):not(:focus-within) > td {
  background:transparent !important;
}

/* ---------------------------------------------------------------------------------------
   3. NAYI LEAD KA GREEN FLASH

   Animation row par chalta hai. Uske cell par koi bhi !important background aa jaye to flash
   dikhta hi nahi - isi wajah se ye band ho gaya tha. Isliye yahan cell ko saaf rakha gaya hai.
   --------------------------------------------------------------------------------------- */
.crm-lead-board tbody tr.flash-new-lead > td,
html.excel-mode .crm-lead-board tbody tr.flash-new-lead > td {
  background: transparent !important;
}
.crm-lead-board tbody tr.flash-new-lead {
  animation: crmNewLeadFlash .9s ease-in-out 3 !important;
}
@keyframes crmNewLeadFlash {
  0%, 100% { background-color: #ffffff; }
  50%      { background-color: #86efac; }
}
html.dark .crm-lead-board tbody tr.flash-new-lead {
  animation: crmNewLeadFlashDark .9s ease-in-out 3 !important;
}
@keyframes crmNewLeadFlashDark {
  0%, 100% { background-color: transparent; }
  50%      { background-color: #166534; }
}
/* "Kam animation" wali setting ka khayal - flash ke bajaye sthir halka green. */
@media (prefers-reduced-motion: reduce) {
  .crm-lead-board tbody tr.flash-new-lead { animation: none !important; background:#dcfce7 !important; }
}

/* ---------------------------------------------------------------------------------------
   v163 — EXCEL MODE me bhi wahi gol shakal

   crm-v147-ui.css me ye hai:
       :root.excel-mode table td select { border-radius:2px !important; height:30px !important }
   Uski specificity upar wale niyam se zyada thi, isliye excel mode me status button chaukor
   aur alag unchai ka reh jata tha. Ye niyam usse zyada mazboot hai (html + do class + teen
   element), isliye ab chaaron mode me shakal ek jaisi.
   --------------------------------------------------------------------------------------- */
html.excel-mode table td select.crm-status-select-colored,
html.excel-mode table td select[data-crm-status-color],
html.excel-mode table td .crm-status-badge,
html.excel-mode table tbody td select.crm-status-select-colored,
html.excel-mode table tbody td .crm-status-badge {
  border-radius: 9999px !important;
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  line-height: 24px !important;
  text-align: center !important;
  text-align-last: center !important;
  border-width: 1px !important;
  border-style: solid !important;
}
html.excel-mode table td .crm-status-badge,
html.excel-mode table tbody td .crm-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
@media (max-width: 640px) {
  html.excel-mode table td select.crm-status-select-colored,
  html.excel-mode table td .crm-status-badge {
    width: 132px !important; min-width: 132px !important; max-width: 132px !important;
  }
}

/* ---------------------------------------------------------------------------------------
   v164 — FORM/MODAL ka Status field aam field jaisa

   Overlay script pehle har select par rang/border/text-align chipka deti thi (inline style ke
   saath), isliye Edit Lead ke form me Status baaki field se alag dikhta tha. Script ab sirf
   table ke andar chalti hai; ye niyam bas beema hai - agar kahin purana inline style bacha ho
   to bhi form ka field aam hi dikhe.
   --------------------------------------------------------------------------------------- */
form select.crm-status-select-colored,
.fixed select.crm-status-select-colored,
[role="dialog"] select.crm-status-select-colored {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  text-align: left !important;
  text-align-last: left !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
}

/* ---------------- end crm-v162-status.css ---------------- */

/* ---------------- from crm-v174-panels.css ---------------- */
/* ==============================================================================================
   v174 — Dashboard ke neeche wale 6 box: ek hi naap, aur andar scroll
   ==============================================================================================

   DIKKAT KYA THI
   --------------
   Neeche do line me chhe box hain:

     upar ki line  (.crm-dashboard-chart-grid)  Orders per day  |  Orders by Status  |  Lead by Status
     neeche ki line (.crm-dashboard-lower-grid) Courier-wise Rate | Daily lead flow  |  Day-wise delivery

   Upar ki teen to pehle se barabar thi (`height:100%` + `align-items:stretch`), par neeche ki
   teen par `align-items:start` tha - yaani har box jitna data utna lamba. Isi se page ubad-khabad
   dikhta tha.

   AB KYA HAI
   ----------
   Chhe ke chhe box ki unchai ek: `--crm-panel-h` (420px). Heading/footnote apni jagah tike rehte
   hain, aur beech ka data wala hissa bachi hui jagah leta hai - zyada data ho to USI HISSE me
   scroll hota hai, poora page nahi hilta.

   Table ka header scroll par upar chipka rehta hai, warna neeche jaate hi pata hi nahi chalta ki
   kaun sa column kya hai. (`position:sticky` pehle se crm-depth.css me likha tha, par uska koi
   asar nahi tha - sticky ko ek scroll wala daayra chahiye, jo ab bana hai.)

   Ye file SIRF CSS hai. Ek chhota badlav bundle me bhi hai - pehla chart ab `height:260` ki jagah
   `height:100%` par hai, taaki box bharne par uske neeche khali jagah na bache.
   ============================================================================================== */

:root {
  /* Ek hi jagah se sab badal jaye - baad me naap badalni ho to bas yahi line. */
  --crm-panel-h: 420px;
}

/* ---------------------------------------------------------------------------------------------
   1. Chhe ke chhe box ek naap ke, aur andar se "upar-neeche" wala dhaancha
   ---------------------------------------------------------------------------------------------
   `> div` jaan-boojh kar - crm-depth.css me pehle se `.crm-dashboard-chart-grid>div{height:100%}`
   likha hai. Utni hi specificity rakhi hai aur ye file baad me load hoti hai, isliye ye jeetti
   hai. `!important` ki zaroorat nahi padi. */
.crm-dashboard-chart-grid > div,
.crm-dashboard-lower-grid > div {
  height: var(--crm-panel-h);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.crm-dashboard-lower-grid { align-items: stretch; }

/* ---------------------------------------------------------------------------------------------
   2. Heading, uske bagal ka button, aur neeche ki chhoti tippani - ye apni jagah par tike rahein
   ---------------------------------------------------------------------------------------------
   Aakhri line me `:not(:only-child)` zaroori hai. "Courier-wise Delivery Rate" me heading aur
   card ke beech ek aur wrapper hai - wo *last child* bhi hai aur *bg-white* bhi nahi. Us shart
   ke bina ye niyam galti se USI par lag jata, wrapper failta hi nahi, aur uska card 420 wale
   box me phans jata. Tippani (footnote) kabhi akeli santaan nahi hoti, isliye ye shart use nahi
   rokti. */
.crm-dashboard-chart-grid > div > h3,
.crm-dashboard-lower-grid > div > h3,
.crm-dashboard-lower-grid > div > div:only-child > h3,
.crm-dashboard-lower-grid > div > .flex,
.crm-dashboard-lower-grid > div > div:last-child:not(.bg-white):not(:only-child) {
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------------------------
   3. "Courier-wise Delivery Rate" me heading aur card ke beech ek aur wrapper hai - use bhi
      poori jagah lena hoga, warna uske andar ka card faila hi nahi.
   --------------------------------------------------------------------------------------------- */
.crm-dashboard-lower-grid > div > div:only-child {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------------------------------------------------------------------------------------------
   4. Bacha hua hissa = scroll wala hissa
   ---------------------------------------------------------------------------------------------
   `min-height:0` yahan sabse zaroori line hai. Flex ka default `min-height:auto` hota hai, yaani
   item apne content se chhota ho hi nahi sakta - aur tab box 420 se bahar nikal jata, scroll
   kabhi aata hi nahi. */
.crm-dashboard-chart-grid > div > h3 ~ *,
.crm-dashboard-lower-grid > div > .bg-white,
.crm-dashboard-lower-grid > div > div:only-child > .bg-white {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
  /* Box ke andar scroll khatam ho jaye to poora page peeche na khisakne lage. */
  overscroll-behavior: contain;
}

/* ---------------------------------------------------------------------------------------------
   5. Chart apni poori jagah bhare - par kabhi gayab na ho
   ---------------------------------------------------------------------------------------------
   Chart ko khud scroll nahi chahiye (wo naap ke hisaab se khud ko banata hai), isliye uspar
   `overflow:hidden`. `min-height` ek bharosa hai: kisi wajah se unchai 0 nikli to bhi chart
   dikhta rahega, gayab nahi hoga. */
.crm-dashboard-chart-grid > div > .recharts-responsive-container {
  min-height: 220px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------------------------
   6. Table ka header scroll par upar chipka rahe
   ---------------------------------------------------------------------------------------------
   Rang wahi gray-50 jo `<thead class="bg-gray-50">` par pehle se laga hai - warna sticky header
   ke aar-paar se neeche ki lines jhalakti hain. */
.crm-dashboard-lower-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f9fafb;
}
html.dark .crm-dashboard-lower-grid thead th,
:root.dark .crm-dashboard-lower-grid thead th {
  background: var(--surface, #111827);
}

/* ---------------------------------------------------------------------------------------------
   7. Scrollbar patli aur halki - dikhe to sahi, par chubhe na
   --------------------------------------------------------------------------------------------- */
.crm-dashboard-chart-grid > div > h3 ~ *,
.crm-dashboard-lower-grid > div > .bg-white,
.crm-dashboard-lower-grid > div > div:only-child > .bg-white {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .55) transparent;
}
.crm-dashboard-chart-grid > div > h3 ~ *::-webkit-scrollbar,
.crm-dashboard-lower-grid > div > .bg-white::-webkit-scrollbar,
.crm-dashboard-lower-grid > div > div:only-child > .bg-white::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.crm-dashboard-chart-grid > div > h3 ~ *::-webkit-scrollbar-thumb,
.crm-dashboard-lower-grid > div > .bg-white::-webkit-scrollbar-thumb,
.crm-dashboard-lower-grid > div > div:only-child > .bg-white::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .55);
  border-radius: 6px;
}
.crm-dashboard-chart-grid > div > h3 ~ *::-webkit-scrollbar-track,
.crm-dashboard-lower-grid > div > .bg-white::-webkit-scrollbar-track,
.crm-dashboard-lower-grid > div > div:only-child > .bg-white::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------------------------------------------------------------------------------------------
   8. Chhoti screen par box ek ke neeche ek aate hain (ye crm-depth.css me pehle se hai).
      Wahan 420 thoda zyada lagta hai, isliye thoda chhota.
   --------------------------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --crm-panel-h: 360px; }
}

/* ---------------- end crm-v174-panels.css ---------------- */

/* ---------------- from crm-v175-orderdetail.css ---------------- */
/* ==============================================================================================
   v175 — Order Detail ke teen box: screen me fit, aur andar scroll
   ==============================================================================================

   DIKKAT KYA THI
   --------------
   Order kholne par teen box aate hain:

       Order Info   |   Tracking Timeline   |   Lead Timeline

   Teeno jitna data utne lambe ho jaate the. Tracking Timeline me 20-25 scan ho to wo box neeche
   tak khinch jata tha, aur uske chakkar me POORA PAGE scroll karna padta tha - Order Info aur
   Lead Timeline upar hi chhoot jaate the.

   AB KYA HAI
   ----------
   Teeno box screen ke naap ke hain. Zyada data ho to USI BOX ke andar scroll hota hai, page
   nahi hilta. Har box ki heading (aur uske bagal ka button - "Add update") upar chipki rehti
   hai, isliye scroll karte waqt bhi pata rehta hai ki kaunsa box hai aur button haath me rehta
   hai.

   NAAP EK HI JAGAH SE
   -------------------
   `--crm-od-h` neeche wali line me hai. Badalni ho to bas wahi ek number.
   `100vh` = poori screen ki unchai; usme se upar ka hissa (breadcrumb, "Back to orders",
   order number aur button wali line) ghata diya jata hai.
   ============================================================================================== */

:root {
  /* Screen ki unchai me se upar ka hissa hata kar jo bache. */
  --crm-od-h: calc(100vh - 165px);
  /* Chhoti screen par box itne se chhote na hon ki kuch dikhe hi na. */
  --crm-od-min-h: 360px;
}

/* ---------------------------------------------------------------------------------------------
   1. Teeno box ek naap ke, aur andar scroll
   ---------------------------------------------------------------------------------------------
   Do alag raaste isliye hain ki dhaancha alag hai:
     - "Order Info" grid ka SEEDHA bachcha hai
     - "Tracking Timeline" aur "Lead Timeline" ek wrapper ke andar hain (wo do khaane ghera hai)
   Isliye class ke bharose nahi, jagah ke hisaab se chuna gaya hai - Tailwind ki class kabhi
   badal bhi jaye to ye niyam sahi box par hi lagega. */
.crm-order-detail-grid > div.bg-white,
.crm-order-detail-grid > div > div.bg-white {
  height: var(--crm-od-h);
  min-height: var(--crm-od-min-h);
  overflow-y: auto;
  overflow-x: hidden;
  /* Box ke andar scroll khatam ho to poora page peeche na khisakne lage. */
  overscroll-behavior: contain;
  /* Upar wali padding heading ko de di gayi hai (neeche dekhein) - warna heading chipakne par
     uske upar se content jhalakta hai. */
  padding-top: 0;
}

/* ---------------------------------------------------------------------------------------------
   2. Heading (aur uske bagal ka button) upar chipka rahe
   ---------------------------------------------------------------------------------------------
   Teeno box me pehla bachcha ek hi shakl ka hai: ek line jisme heading aur uske saamne chhota
   button/tag hai. Wahi chipkaya jata hai.

   `background-color: inherit` jaan-boojh kar - box ka apna rang le leta hai. Isliye light mode
   me safed aur dark mode me dark, dono jagah sahi. Rang haath se likhte to ek mode me galat
   dikhta. */
.crm-order-detail-grid > div.bg-white > div:first-child,
.crm-order-detail-grid > div > div.bg-white > div:first-child {
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: inherit;
  padding-top: 20px;   /* wahi p-5 jo upar box se hatai gayi */
}

/* ---------------------------------------------------------------------------------------------
   3. Lead Timeline ke andar ka apna scroll hata do
   ---------------------------------------------------------------------------------------------
   Us list par pehle se `max-h-96 overflow-y-auto` laga tha - us waqt zaroori tha, kyunki box ki
   koi seema nahi thi. Ab box khud scroll karta hai; dono rehne se ek ke andar doosra scrollbar
   ban jata aur maus ka pahiya kabhi ek me kabhi doosre me atakta.

   (Order Info ke andar "Call remarks" wali chhoti list ko haath NAHI lagaya - wo jaan-boojh kar
   chhoti rakhi gayi hai aur alag jagah par hai.) */
.crm-order-detail-grid > div > div.bg-white > ul {
  max-height: none;
  overflow: visible;
}

/* ---------------------------------------------------------------------------------------------
   4. Scrollbar patli aur halki
   --------------------------------------------------------------------------------------------- */
.crm-order-detail-grid > div.bg-white,
.crm-order-detail-grid > div > div.bg-white {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .55) transparent;
}
.crm-order-detail-grid > div.bg-white::-webkit-scrollbar,
.crm-order-detail-grid > div > div.bg-white::-webkit-scrollbar {
  width: 8px;
}
.crm-order-detail-grid > div.bg-white::-webkit-scrollbar-thumb,
.crm-order-detail-grid > div > div.bg-white::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .55);
  border-radius: 6px;
}
.crm-order-detail-grid > div.bg-white::-webkit-scrollbar-track,
.crm-order-detail-grid > div > div.bg-white::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------------------------------------------------------------------------------------------
   5. Chhoti screen (laptop se chhoti) par sab pehle jaisa
   ---------------------------------------------------------------------------------------------
   Aapne "computer screen" kaha tha. Phone/tablet par ye teeno box ek ke neeche ek aate hain -
   wahan har box ko poori screen dena ulta pad jata (teen screen scroll karni padti). Isliye
   wahan bilkul purana bartav rehta hai: box jitna data utne lambe, page scroll.
   1024px = wahi seema jispar CRM khud teen khaane se ek khaana banata hai (Tailwind ka `lg`). */
@media (max-width: 1023px) {
  .crm-order-detail-grid > div.bg-white,
  .crm-order-detail-grid > div > div.bg-white {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-top: 1.25rem;
  }
  .crm-order-detail-grid > div.bg-white > div:first-child,
  .crm-order-detail-grid > div > div.bg-white > div:first-child {
    position: static;
    padding-top: 0;
  }
  .crm-order-detail-grid > div > div.bg-white > ul {
    max-height: 24rem;
    overflow-y: auto;
  }
}

/* ---------------- end crm-v175-orderdetail.css ---------------- */

/* ---------------- from crm-v176-printpickup.css ---------------- */
/* ==============================================================================================
   v176 — "Print & Create Pickup" button, uski pushti ka box, aur natije ka sandesh
   ==============================================================================================
   Sab kuch `crm-pp-` se shuru hone wali class par hai, taaki CRM ki kisi aur cheez se na takraye.
   ============================================================================================== */

/* ---- Button (Excel ke bagal me) -------------------------------------------------------------
   Naap Excel button ke barabar (h-8) rakhi gayi hai, taaki line seedhi lage. Rang emerald hai -
   ye ek "kaam karne wala" button hai, isliye jaan-boojh kar bharaa hua rang, khali border nahi. */
.crm-pp-btn {
  height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid #059669;
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(5, 150, 105, .28);
  transition: filter .12s ease, box-shadow .12s ease;
}
.crm-pp-btn:hover { filter: brightness(1.06); box-shadow: 0 2px 8px rgba(5, 150, 105, .34); }
.crm-pp-btn:disabled { opacity: .6; cursor: default; filter: none; }

/* Chhoti screen par header waise hi bhara rehta hai - wahan button ka naam chhota kar dete hain
   (poora naam title me rehta hai). */
@media (max-width: 900px) {
  .crm-pp-btn { font-size: 0; padding: 0 8px; }
  .crm-pp-btn::before { content: 'Pickup + Print'; font-size: 11px; }
}

/* ---- Natije ka sandesh (dashboard ke sabse upar) ------------------------------------------- */
.crm-pp-banner {
  position: relative;
  border-radius: 12px;
  padding: 10px 34px 10px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.5;
  border: 1px solid;
}
.crm-pp-banner-title { font-weight: 800; margin-bottom: 2px; }
.crm-pp-banner-line { opacity: .92; }
.crm-pp-banner-x {
  position: absolute; top: 6px; right: 8px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 17px; line-height: 1; color: inherit; opacity: .55;
}
.crm-pp-banner-x:hover { opacity: 1; }

.crm-pp-good { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.crm-pp-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.crm-pp-bad  { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }

html.dark .crm-pp-good, :root.dark .crm-pp-good { background: #052e23; border-color: #10563f; color: #a7f3d0; }
html.dark .crm-pp-warn, :root.dark .crm-pp-warn { background: #35260a; border-color: #7c5a12; color: #fde68a; }
html.dark .crm-pp-bad,  :root.dark .crm-pp-bad  { background: #3b0d16; border-color: #7f1d2e; color: #fecdd3; }

/* ---- Pushti wala box ----------------------------------------------------------------------- */
.crm-pp-ask-wrap {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.crm-pp-ask-card {
  width: 100%; max-width: 420px;
  background: #fff; color: #0f172a;
  border-radius: 14px; padding: 18px 18px 14px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .3);
}
html.dark .crm-pp-ask-card, :root.dark .crm-pp-ask-card {
  background: var(--surface, #111827); color: #e2e8f0;
}
.crm-pp-ask-title { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.crm-pp-ask-msg { font-size: 13px; line-height: 1.55; }
.crm-pp-ask-note { font-size: 11.5px; opacity: .7; margin-top: 8px; line-height: 1.5; }
.crm-pp-ask-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.crm-pp-btn-no, .crm-pp-btn-yes {
  border-radius: 9px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.crm-pp-btn-no { border: 1px solid #cbd5e1; background: transparent; color: inherit; }
.crm-pp-btn-no:hover { background: rgba(100, 116, 139, .12); }
.crm-pp-btn-yes { border: 1px solid #059669; background: #059669; color: #fff; }
.crm-pp-btn-yes:hover { filter: brightness(1.07); }

/* NOTE: label wala sudhaar (ORDER NO ek hi line me) YAHAN NAHI hai - jaan-boojh kar.
   Custom label ek ALAG window me khulta hai jo apni CSS khud saath le kar jaata hai; ye file
   wahan pahunchti hi nahi. Isliye wo badlav bundle ke andar wali label-CSS me kiya gaya hai
   (dekhein patch-v176.js). */

/* ---------------- end crm-v176-printpickup.css ---------------- */

/* ---------------- from crm-v192-board-dock.css ---------------- */
/* CRM v192 — Screen-fit scroll-safe docked board: exact header/pager fit with silent live refresh.
   UI-only. Scope: /leads and /orders list/status pages.

   Goals:
   - keep the full column header visible (never clipped at the viewport top)
   - keep pagination fully visible at the bottom
   - use nearly the whole workspace with a small, deliberate safe inset
   - keep chat launcher/minibar above the pager instead of underneath it
   - preserve the v182/v183 rule: wheel scroll stays inside rows once docked;
     use the outer/right-side scrollbar to bring filters/search back.
*/

html.crm-board-dock-active .crm-board-global-header {
  transition: max-height .16s ease, height .16s ease, min-height .16s ease,
              opacity .10s ease, border-width .10s ease !important;
}
html.crm-board-dock-active:not(.crm-board-is-docked) .crm-board-global-header {
  overflow: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
html.crm-board-dock-active.crm-board-is-docked .crm-board-global-header {
  overflow: hidden !important;
  max-height: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  border-width: 0 !important;
  pointer-events: none !important;
}

/* Small safe inset is intentional: it prevents Chromium from clipping the top
   pixels of sticky TH cells inside a rounded/overflow table wrapper. */
.crm-board-dock-shell {
  position: sticky !important;
  top: var(--crm-board-top-inset, 4px) !important;
  z-index: 24 !important;
  min-width: 0 !important;
  background: var(--crm-board-dock-bg, #f8fafc) !important;
}
.dark .crm-board-dock-shell { --crm-board-dock-bg: #0f172a; }

/* While docked, expand only the BOARD and PAGER into the unused side gutters.
   Filters/title remain untouched because they are already above the viewport. */
html.crm-board-is-docked .crm-board-dock-shell {
  margin-left: calc(-1 * var(--crm-board-expand-left, 0px)) !important;
  margin-right: calc(-1 * var(--crm-board-expand-right, 0px)) !important;
  width: calc(100% + var(--crm-board-expand-left, 0px) + var(--crm-board-expand-right, 0px)) !important;
  margin-top: 0 !important;
}

.crm-board-dock-viewport {
  height: var(--crm-board-dock-height, 65vh) !important;
  min-height: 300px !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
  scroll-behavior: auto !important;
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: contain !important;
  position: relative !important;
}

/* Docked board receives a crisp professional frame. Avoid oversized rounded
   corners that can visually crop the sticky header. */
html.crm-board-is-docked .crm-board-dock-viewport {
  border-radius: 9px !important;
  border-top: 1px solid rgba(148,163,184,.42) !important;
  border-bottom: 1px solid rgba(148,163,184,.34) !important;
  box-shadow: 0 4px 18px rgba(15,23,42,.07) !important;
}
.dark html.crm-board-is-docked .crm-board-dock-viewport,
html.dark.crm-board-is-docked .crm-board-dock-viewport {
  border-color: rgba(71,85,105,.70) !important;
  box-shadow: 0 5px 20px rgba(0,0,0,.22) !important;
}

/* Freeze the actual TH cells. The +1px top position and explicit height/padding
   protect the text from being clipped by the scroll container's top edge. */
.crm-board-dock-viewport table > thead > tr > th,
.crm-board-dock-viewport > table > thead > tr > th {
  position: sticky !important;
  top: 0 !important;
  z-index: 42 !important;
  min-height: 44px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  line-height: 1.2 !important;
  background-color: #cbd5e1 !important;
  background-clip: padding-box !important;
  box-shadow: inset 0 -1px 0 rgba(100,116,139,.38), 0 1px 0 rgba(255,255,255,.65) !important;
}
.dark .crm-board-dock-viewport table > thead > tr > th,
.dark .crm-board-dock-viewport > table > thead > tr > th {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  box-shadow: inset 0 -1px 0 rgba(148,163,184,.32) !important;
}
.crm-board-dock-viewport table > thead,
.crm-board-dock-viewport > table > thead {
  position: relative !important;
  z-index: 41 !important;
}

/* Pager is always fully visible and separated from the row viewport. */
.crm-board-dock-pager {
  position: relative;
  z-index: 34;
  box-sizing: border-box !important;
}
html.crm-board-is-docked .crm-board-dock-pager {
  position: sticky !important;
  bottom: var(--crm-board-bottom-inset, 3px) !important;
  /* z-index isi file me aage 46 par set hota hai - yahan likha 36 kabhi lagta hi nahi tha. */
  margin-top: 2px !important;
  margin-bottom: 0 !important;
  margin-left: calc(-1 * var(--crm-board-expand-left, 0px)) !important;
  margin-right: calc(-1 * var(--crm-board-expand-right, 0px)) !important;
  width: calc(100% + var(--crm-board-expand-left, 0px) + var(--crm-board-expand-right, 0px)) !important;
  background: #f8fafc !important;
  border: 1px solid rgba(203,213,225,.80) !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 12px rgba(15,23,42,.06) !important;
}
.dark html.crm-board-is-docked .crm-board-dock-pager,
html.dark.crm-board-is-docked .crm-board-dock-pager {
  background: #0f172a !important;
  border-color: rgba(71,85,105,.70) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.20) !important;
}

/* Pagination itself should not lose its last few pixels against the viewport. */
html.crm-board-is-docked .crm-board-dock-pager .crm-pagination {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Keep the chat launcher/minimised chat above the sticky pager. JS tags only the
   actual chat elements, so no other floating buttons are moved. */
html.crm-board-is-docked .crm-board-chat-launcher,
html.crm-board-is-docked .crm-board-chat-minibar {
  bottom: calc(var(--crm-board-pager-height, 50px) + var(--crm-board-bottom-inset, 3px) + 8px) !important;
  z-index: 50 !important;
}
html.crm-board-is-docked .crm-board-chat-launcher { right: 12px !important; }
html.crm-board-is-docked .crm-board-chat-minibar { right: 12px !important; }


/* v185: keep the board/pager pair visually tight. The pager already reserves its
   own measured height, so there is no need for a second large safety band. */
html.crm-board-is-docked .crm-board-dock-shell + .crm-board-dock-pager {
  margin-top: 2px !important;
}

/* Clear old v180-v184 sizing/classes if they remain cached after SPA navigation. */
.crm-board-dock-viewport.crm-board-live-viewport,
.crm-board-dock-viewport.crm-board-viewport {
  height: var(--crm-board-dock-height, 65vh) !important;
  min-height: 300px !important;
}

@media (max-height: 650px) {
  .crm-board-dock-viewport { min-height: 240px !important; }
  .crm-board-dock-viewport table > thead > tr > th,
  .crm-board-dock-viewport > table > thead > tr > th {
    min-height: 38px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}


/* v188: the order board uses a different wrapper from the lead board. Keep the
   sticky THEAD fully inside its own scrolling viewport in every status/drilldown. */
html.crm-board-dock-active .crm-board-dock-viewport {
  scroll-padding-top: 44px !important;
}
html.crm-board-is-docked .crm-board-dock-shell {
  overflow: visible !important;
}
.crm-board-dock-viewport > table,
.crm-board-dock-viewport table {
  margin-top: 0 !important;
}
.crm-board-dock-viewport table > thead > tr,
.crm-board-dock-viewport > table > thead > tr {
  position: relative !important;
  z-index: 43 !important;
}

/* Live refreshes are intentionally silent. Do not animate/reflow the board shell
   when React only updates data inside existing rows. User hover/status animations
   remain untouched because this targets only the shell/viewport/pager. */
.crm-board-dock-shell,
.crm-board-dock-viewport,
.crm-board-dock-pager {
  transition: none !important;
}


/* v189: keep the browser/main-page scrollbar native. Docking must never lock the
   outer page; the row viewport still contains wheel overscroll while the board
   is docked. */
html.crm-board-dock-active main.flex-1.overflow-y-auto {
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
}
html.crm-board-is-docked .crm-board-dock-viewport {
  overscroll-behavior-y: contain !important;
}

/* v190: Pagination belongs to the board chrome, not to the scrolling rows.
   When the board is docked, pin the pager to the bottom of the main workspace.
   This prevents it from drifting into the middle of the data while the outer page
   scrolls, while still keeping it fully visible. */
html.crm-board-is-docked .crm-board-dock-pager {
  position: fixed !important;
  left: var(--crm-board-pager-left, 68px) !important;
  right: var(--crm-board-pager-right, 6px) !important;
  bottom: var(--crm-board-bottom-inset, 3px) !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  z-index: 46 !important;
}

/* The row viewport already reserves the measured pager height in JS, so the fixed
   pager never covers the last row or horizontal scrollbar. */
html.crm-board-is-docked .crm-board-dock-viewport {
  margin-bottom: 0 !important;
}

/* Keep the floating chat safely above the fixed pager. */
html.crm-board-is-docked .crm-board-chat-launcher,
html.crm-board-is-docked .crm-board-chat-minibar {
  bottom: calc(var(--crm-board-pager-height, 50px) + var(--crm-board-bottom-inset, 3px) + 8px) !important;
}

/* v191 — pager availability fix.
   The class is now attached directly to the React .crm-pagination component.
   Keep it explicitly visible in every Leads/Orders status once data exists. */
html.crm-board-is-docked .crm-pagination.crm-board-dock-pager {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 46px !important;
  align-items: center !important;
}

/* On narrow screens the pagination component may wrap its own controls, but the
   bar itself must remain available rather than being clipped by the viewport. */
@media (max-width: 900px) {
  html.crm-board-is-docked .crm-pagination.crm-board-dock-pager {
    flex-wrap: wrap !important;
    height: auto !important;
  }
}


/* v192 — exact viewport-width pagination.
   The JS measures MAIN whenever its size changes (including sidebar changes), then
   supplies an explicit width. Reset wrapper constraints so the pager always fits
   the visible workspace instead of sometimes inheriting a shorter parent width. */
html.crm-board-is-docked .crm-pagination.crm-board-dock-pager {
  left: var(--crm-board-pager-left, 64px) !important;
  right: auto !important;
  width: var(--crm-board-pager-width, calc(100vw - 70px)) !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  transform: none !important;
  margin: 0 !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  overflow: visible !important;
}
html.crm-board-is-docked .crm-pagination.crm-board-dock-pager > * {
  min-width: 0 !important;
}
@media (min-width: 901px) {
  html.crm-board-is-docked .crm-pagination.crm-board-dock-pager {
    flex-wrap: nowrap !important;
  }
}

/* Dashboard silent-refresh polish: Performance cards should never visually flash
   merely because live data was checked. Actual changed numbers still update. */
.dashboard-v140 .crm-performance-section .crm-stat,
.dashboard-v140 .crm-performance-section .crm-stat * {
  animation: none !important;
  transition-duration: 0s !important;
}
.dashboard-v140 .crm-performance-section {
  contain: layout paint;
}

/* ---------------- end crm-v192-board-dock.css ---------------- */

/* ---------------- from crm-v193-smooth.css ---------------- */
/* CRM v193 — Dashboard lower-panel stability + smooth return polish.
   UI only. No courier/order/lead business logic. */

/* Courier-wise, Daily lead flow and Day-wise delivery now deliberately use the
   same single scroll container model. One owner for X/Y scroll means sticky
   headers behave identically and a live React update cannot swap scroll owners. */
.crm-dashboard-lower-grid .crm-lower-data-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-behavior: auto !important;
  contain: layout paint;
}
.crm-dashboard-lower-grid .crm-lower-data-scroll > table {
  width: 100%;
  margin: 0;
}
.crm-dashboard-lower-grid .crm-lower-data-scroll thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  background: #f9fafb !important;
  background-clip: padding-box !important;
  box-shadow: inset 0 -1px 0 rgba(148,163,184,.24);
}
html.dark .crm-dashboard-lower-grid .crm-lower-data-scroll thead th {
  background: var(--surface, #111827) !important;
  color: #f8fafc;
  box-shadow: inset 0 -1px 0 rgba(148,163,184,.20);
}
/* Data checks must not animate the panel shell. Hover/click styles inside rows
   are untouched. */
.crm-dashboard-lower-grid > div,
.crm-dashboard-lower-grid .crm-lower-data-scroll {
  transition: none !important;
}

/* Return restoration is always immediate/native, never smooth-scroll animated. */
html.crm-board-dock-active main.flex-1.overflow-y-auto,
html.crm-board-dock-active .crm-board-dock-viewport {
  scroll-behavior: auto !important;
}

/* ---------------- end crm-v193-smooth.css ---------------- */

/* ============================================================
   CRM v195 additions — dropdown clipping fix + version-badge tracking
   ============================================================ */

/* Global top-bar search suggestions dropdown was getting visually covered by the
   docked board's sticky table header (z-index 42) and fixed pager (z-index 46)
   whenever a board is docked and the dropdown happens to overlap that screen
   region - looked like the suggestions were "hiding inward". Scoped to the
   specific search-bar wrapper (not a blanket z-30 rule) so no unrelated dropdown
   elsewhere in the app is affected. */
.relative.w-full.max-w-sm.ml-auto.shrink-0 > .absolute.z-30 {
  z-index: 60 !important;
}

/* Version badge is now positioned by JS to always sit just above the chat
   launcher button (wherever it currently is - it moves up when a board is
   docked). Remove the old static bottom/right so JS fully owns placement. */
#crm-version-badge {
  bottom: auto !important;
  right: auto !important;
  transition: none !important;
}

/* ==============================================================================================
   CRM v196 — four focused board UI fixes
   Scope only: Leads/Orders list boards. No business/API/courier logic.
   ============================================================================================== */

/* 1) ALL LEADS: locked status uses a plain <span>, while unlocked status uses
      .crm-status-badge / status <select>. Give the locked span the exact same geometry. */
.crm-lead-board td > span[title^="Locked while "] {
  box-sizing: border-box !important;
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
  vertical-align: middle !important;
}
html.excel-mode .crm-lead-board td > span[title^="Locked while "] {
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  line-height: 24px !important;
}
@media (max-width:640px) {
  .crm-lead-board td > span[title^="Locked while "] {
    width:132px !important; min-width:132px !important; max-width:132px !important;
  }
}

/* 2) ALL LEADS / Order Place-converted rows: keep the green cue but make it genuinely subtle.
      Cells remain transparent so the row never turns into two separate shades. */
html:not(.dark) .crm-lead-board tbody tr[class*="bg-emerald-50"] {
  background:#f5fbf8 !important;
}
html.dark .crm-lead-board tbody tr[class*="bg-emerald-50"] {
  background:#10231f !important;
}
html:not(.dark) .crm-lead-board tbody tr[class*="bg-emerald-50"]:not(:hover):not(:focus-within) > td,
html.dark .crm-lead-board tbody tr[class*="bg-emerald-50"]:not(:hover):not(:focus-within) > td {
  background:transparent !important;
}

/* 3) Columns popover is promoted to the viewport by v196 JS. These rules guarantee that
      no rounded/overflow board wrapper can clip it inward. */
.crm-columns-popover-fixed {
  position: fixed !important;
  /* z-index file ke aakhir wale "v218" hisse me (70) - wahi lagta hai. */
  width: 256px !important;
  min-width: 256px !important;
  max-width: min(256px, calc(100vw - 16px)) !important;
  margin: 0 !important;
  overflow: visible !important;
  transform: none !important;
  isolation: isolate;
}
.crm-columns-popover-fixed > .max-h-80 {
  max-height: min(320px, calc(100vh - var(--crm-columns-top, 80px) - 16px)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* 4) ORDERS / courier status drill-downs: one row = one surface.
      v147 Excel zebra + older generic row/cell rules could combine after docking/scrolling and
      make alternate/split shades. Normalise both normal and Excel modes inside Orders only. */
html.dark:not(.excel-mode) .crm-order-board tbody tr,
html.dark:not(.excel-mode) .crm-board-dock-viewport.crm-order-board tbody tr {
  background:#101a2d !important;
}
html.dark:not(.excel-mode) .crm-order-board tbody tr > td,
html.dark:not(.excel-mode) .crm-board-dock-viewport.crm-order-board tbody tr > td {
  background:transparent !important;
  border-bottom-color:#26344a !important;
}
html.dark:not(.excel-mode) .crm-order-board tbody tr:hover,
html.dark:not(.excel-mode) .crm-order-board tbody tr:focus-within {
  background:#142a2a !important;
}
html.dark:not(.excel-mode) .crm-order-board tbody tr:hover > td,
html.dark:not(.excel-mode) .crm-order-board tbody tr:focus-within > td {
  background:transparent !important;
}

/* Excel Orders also gets a single body shade — no odd/even zebra on courier drill-down rows. */
html.excel-mode .crm-order-board tbody tr:nth-child(odd) > td,
html.excel-mode .crm-order-board tbody tr:nth-child(even) > td {
  background:var(--excel-cell) !important;
}
html.excel-mode .crm-order-board tbody tr:hover > td,
html.excel-mode .crm-order-board tbody tr:focus-within > td {
  background:var(--excel-hover) !important;
}

/* Keep dock viewport and its table on the same dark surface; prevents a second strip showing
   through between tall rows while scrolling. */
html.dark .crm-board-dock-viewport.crm-order-board,
html.dark .crm-board-dock-viewport.crm-order-board table,
html.dark .crm-board-dock-viewport.crm-order-board tbody {
  background:#101a2d !important;
}

/* ==============================================================================================
   CRM v197 — Smooth high-row boards + status-wise row tint
   ============================================================================================== */
/* Before docking, MAIN owns Y scrolling natively. Once docked, the board owns Y scrolling.
   This removes synthetic wheel forwarding / preventDefault work on every wheel tick. */
html.crm-board-dock-active:not(.crm-board-is-docked) .crm-board-dock-viewport {
  /* v199: MAIN owns vertical movement until the board reaches the top.
     JS forwards wheel delta to MAIN, restoring the old header-collapse/sticky-table UX. */
  overflow-y: hidden !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
html.crm-board-dock-active.crm-board-is-docked .crm-board-dock-viewport {
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
}

/* Heavy boards should not animate row geometry/background while scrolling. */
.crm-lead-board tbody tr,
.crm-order-board tbody tr,
.crm-board-dock-viewport tbody tr {
  transition: none !important;
}

/* Status Row picker is the final row background owner. Cells remain transparent so one row
   cannot split into two shades because of mode/zebra/cell-specific backgrounds. */
tbody tr[data-crm-row-color] > td {
  background-color: transparent !important;
}

/* Return restoration is prepared before first paint; never animate the shell while doing it. */
html.crm-return-prepaint .crm-board-dock-shell,
html.crm-return-prepaint .crm-board-dock-viewport,
html.crm-return-prepaint .crm-board-dock-pager,
html.crm-return-prepaint .crm-board-global-header {
  transition: none !important;
}

/* Decorative sidebar animation can compete with a 100-row board on lower-end clients.
   Layout/hover behaviour stays the same; only the animation is removed on list screens. */
html.crm-board-dock-active aside.fixed.left-0.top-0.h-screen,
html.crm-board-dock-active aside.fixed.left-0.top-0.h-screen a,
html.crm-board-dock-active aside.fixed.left-0.top-0.h-screen button {
  transition-duration: 0s !important;
}

/* ==============================================================================================
   CRM v198 — scroll unlock + always-visible per-status custom colours
   ============================================================================================== */
html.crm-board-dock-active .crm-board-dock-viewport {
  touch-action: pan-x pan-y !important;
  scroll-behavior: auto !important;
  scrollbar-gutter: stable !important;
}
.crm-custom-color-box {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  min-width:0 !important;
  overflow:visible !important;
}
.crm-custom-color-wrap {
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  white-space:nowrap !important;
}
.crm-custom-color-wrap[data-crm-row-picker="1"] {
  padding:3px 6px !important;
  border:1px solid rgba(148,163,184,.38) !important;
  border-radius:8px !important;
}
html.dark .crm-custom-color-wrap[data-crm-row-picker="1"] { border-color:rgba(71,85,105,.75) !important; }


/* ==============================================================================================
   CRM v199 — stable two-stage scrolling + invisible atomic return
   ============================================================================================== */
/* Docked rows are the native Y owner. Outer MAIN stays available via the right-side scrollbar
   for intentionally bringing filters/header back, but normal wheel over rows never leaks out. */
html.crm-board-dock-active.crm-board-is-docked .crm-board-dock-viewport {
  overflow-y:auto !important;
  overscroll-behavior-y:contain !important;
}
/* While returning from an order/detail screen, never show the temporary page-1/top paint.
   This is visibility only (no spinner, no overlay, no layout removal), so geometry can settle
   and the saved scrollTop can be applied before the board becomes visible. */
html.crm-v199-return-mask .crm-board-dock-shell,
html.crm-v199-return-mask .crm-pagination,
html.crm-v199-return-mask .ndr-table-card {
  visibility:hidden !important;
}
html.crm-v199-return-mask .crm-board-global-header {
  transition:none !important;
}

/* ==============================================================================================
   CRM v200 — ONE vertical scroll owner. No split MAIN/board scrolling, no auto jump.
   ============================================================================================== */
/* Legacy dock classes are deliberately neutralised if an old cached observer briefly adds them. */
html.crm-board-dock-active .crm-board-dock-viewport,
html.crm-board-dock-active:not(.crm-board-is-docked) .crm-board-dock-viewport,
html.crm-board-dock-active.crm-board-is-docked .crm-board-dock-viewport,
.crm-lead-board,
.crm-order-board {
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  overscroll-behavior-y:auto !important;
  scroll-behavior:auto !important;
  touch-action:pan-x pan-y !important;
}
/* MAIN is the only Y scrollbar. Title/filters naturally leave the screen; table header stays pinned. */
main.flex-1.overflow-y-auto {
  overflow-y:auto !important;
  scroll-behavior:auto !important;
  overscroll-behavior-y:auto !important;
  overflow-anchor:none !important;
}
.crm-lead-board thead,
.crm-order-board thead,
.crm-lead-board thead tr,
.crm-order-board thead tr {
  position:sticky !important;
  top:0 !important;
  z-index:45 !important;
}
.crm-lead-board thead th,
.crm-order-board thead th {
  position:sticky !important;
  top:0 !important;
  z-index:46 !important;
}
/* Pagination remains in normal document flow, so scrolling to it can never trigger a dock transition. */
.crm-pagination,
.crm-pagination.crm-board-dock-pager,
html.crm-board-is-docked .crm-pagination.crm-board-dock-pager {
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  width:auto !important;
  transform:none !important;
}
/* No visible top -> target walk on Back. Layout stays measurable while hidden. */
html.crm-v200-return-mask .crm-lead-board,
html.crm-v200-return-mask .crm-order-board,
html.crm-v200-return-mask .ndr-table-card,
html.crm-v200-return-mask .crm-pagination {
  visibility:hidden !important;
}

/* ==============================================================================================
   CRM v201 — stable list visibility + real sticky table header clone
   ============================================================================================== */
/* v200's generic return mask could be re-armed by ordinary React row refreshes while an old
   pending snapshot still existed. Never allow that stale class to blank live list data. */
html.crm-v200-return-mask .crm-lead-board,
html.crm-v200-return-mask .crm-order-board,
html.crm-v200-return-mask .ndr-table-card,
html.crm-v200-return-mask .crm-pagination,
html.crm-v199-return-mask .crm-board-dock-shell,
html.crm-v199-return-mask .crm-pagination,
html.crm-v199-return-mask .ndr-table-card {
  visibility: visible !important;
}

/* Native table header clone used by v201 JS. It lives outside the horizontal-scroll wrapper,
   so vertical MAIN scrolling can never break sticky behaviour. */
.crm-v201-sticky-head {
  position: fixed !important;
  z-index: 78 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: 0 1px 0 rgba(100,116,139,.28), 0 5px 14px rgba(2,6,23,.12);
}
.crm-v201-sticky-head table {
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
  min-width: 0 !important;
}
.crm-v201-sticky-head thead,
.crm-v201-sticky-head thead tr,
.crm-v201-sticky-head thead th {
  position: static !important;
  top: auto !important;
}
.crm-v201-sticky-head thead th {
  box-sizing: border-box !important;
}
html.dark .crm-v201-sticky-head thead,
html.dark .crm-v201-sticky-head thead tr,
html.dark .crm-v201-sticky-head thead th {
  background: #101a2d !important;
}


/* ==============================================================================================
   CRM v202 — search overlay, instant sidebar geometry, fast sticky header, visible version badge
   ============================================================================================== */
/* The global HEADER itself is a stacking context (React gives it z-30). Raising only the child
   suggestion box cannot beat a fixed sticky table header outside that context. Raise the header. */
header.sticky.top-0.z-30 {
  /* z-index yahan se hataya: iska asli maan file ke aakhir me "v218 DEFINITIVE Z-INDEX
     HIERARCHY" wale hisse me hai (25). Yahan likha 320 kabhi lagta hi nahi tha. */
}
header.sticky.top-0.z-30 .relative.w-full.max-w-sm.ml-auto.shrink-0 > .absolute {
  /* z-index file ke aakhir wale hisse me (70). Yahan likha 340 kabhi lagta hi nahi tha. */
  isolation: isolate;
  box-shadow: 0 18px 42px rgba(15,23,42,.20), 0 2px 8px rgba(15,23,42,.10) !important;
}

/* On Leads/Orders the sidebar and content margin change instantly. This removes the 200ms period
   where the cloned header has to chase a moving layout and also makes clicks feel immediate. */
html.crm-v202-list aside.fixed.left-0.top-0.h-screen,
html.crm-v202-list aside.fixed.left-0.top-0.h-screen ~ div.flex-1.flex.flex-col,
html.crm-v202-list aside.fixed.left-0.top-0.h-screen a,
html.crm-v202-list aside.fixed.left-0.top-0.h-screen button {
  transition-duration: 0s !important;
}

.crm-v202-sticky-head {
  position: fixed !important;
  /* z-index file ke aakhir wale "v218" hisse me (20) - wahi lagta hai. */
  overflow: hidden !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  contain: layout paint style;
  will-change: transform;
  box-shadow: 0 1px 0 rgba(100,116,139,.28), 0 4px 12px rgba(2,6,23,.10);
}
.crm-v202-sticky-head table {
  margin:0 !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  table-layout:fixed !important;
  min-width:0 !important;
  will-change:transform;
}
.crm-v202-sticky-head thead,
.crm-v202-sticky-head thead tr,
.crm-v202-sticky-head thead th { position:static !important; top:auto !important; }
.crm-v202-sticky-head thead th { box-sizing:border-box !important; }
html.dark .crm-v202-sticky-head thead,
html.dark .crm-v202-sticky-head thead tr,
html.dark .crm-v202-sticky-head thead th { background:#101a2d !important; }
/* old clone must never remain visible after v202 takes over */
.crm-v201-sticky-head { display:none !important; }

#crm-version-badge {
  z-index: 500 !important;
  visibility: hidden;
  color:#fff !important;
  background:rgba(15,23,42,.92) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  padding:5px 8px !important;
  border-radius:999px !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.03em !important;
  box-shadow:0 5px 14px rgba(15,23,42,.18) !important;
}

/* CRM v204 — extra dashboard delivery analytics + always-visible build badge */
.crm-v215-analytics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.crm-v215-analytics-card{min-width:0;border:1px solid rgba(148,163,184,.22);border-radius:14px;background:var(--crm-card-bg,#fff);padding:12px;overflow:hidden}
.dark .crm-v215-analytics-card{background:rgba(15,23,42,.72);border-color:rgba(148,163,184,.18)}
.crm-v215-analytics-title{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#64748b}
.dark .crm-v215-analytics-title{color:#94a3b8}.crm-v215-analytics-dot{width:4px;height:14px;border-radius:99px;background:#10b981;flex:0 0 auto}
.crm-v215-analytics-scroll{max-height:310px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.crm-v215-analytics-table{width:100%;border-collapse:separate;border-spacing:0;font-size:11px;color:#334155}.dark .crm-v215-analytics-table{color:#cbd5e1}
.crm-v215-analytics-table th{position:sticky;top:0;z-index:2;background:#f8fafc;color:#64748b;font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;padding:7px 6px;border-bottom:1px solid #e2e8f0;text-align:left;white-space:nowrap}.dark .crm-v215-analytics-table th{background:#111827;color:#94a3b8;border-color:#334155}
.crm-v215-analytics-table td{padding:7px 6px;border-bottom:1px solid rgba(226,232,240,.75);vertical-align:middle}.dark .crm-v215-analytics-table td{border-color:rgba(51,65,85,.65)}
.crm-v207-rate{display:flex;align-items:center;gap:6px;justify-content:flex-end;white-space:nowrap}.crm-v207-rate-track{width:48px;height:5px;border-radius:99px;background:#e2e8f0;overflow:hidden}.dark .crm-v207-rate-track{background:#334155}.crm-v207-rate-fill{height:100%;border-radius:99px;background:#10b981}.crm-v207-rate strong{font-variant-numeric:tabular-nums;font-size:11px}
.crm-v207-empty{padding:26px 8px;text-align:center;color:#94a3b8;font-size:12px}
#crm-version-badge.crm-v215-version{visibility:visible!important;right:14px!important;bottom:78px!important;top:auto!important;left:auto!important;display:block!important;opacity:1!important;z-index:2147483000!important;color:#e2e8f0!important;background:rgba(15,23,42,.92)!important;border:1px solid rgba(148,163,184,.32)!important;box-shadow:0 4px 14px rgba(15,23,42,.18)!important}
@media(max-width:1100px){.crm-v215-analytics-grid{grid-template-columns:1fr}}

/* CRM v207 — notification/toast layer must stay above sticky headers, search suggestions and list overlays. */
body > div.fixed.top-4.right-4 {
  /* z-index isi file me aage 2147483600 par set hota hai - yahan likha maan kabhi lagta hi nahi tha. */
  isolation: isolate !important;
}
body > div#crm-toast-wrap {
  z-index: 2147482600 !important;
}
.crm-toast {
  position: relative;
  z-index: 1 !important;
}

/* CRM v207 — keep React notification stack fully below the fixed global header.
   v206 only raised z-index; the stack still started at top:16px and overlapped header. */
body > div.fixed.top-4.right-4 {
  top: 72px !important;
  right: 16px !important;
  z-index: 2147483600 !important;
  isolation: isolate !important;
  max-height: calc(100dvh - 88px) !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin;
}
@media (max-width: 640px) {
  body > div.fixed.top-4.right-4 {
    top: 64px !important;
    right: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }
}

/* CRM v209 — definitive toast stack anchor. The stack is a React sibling inside the app root, not a direct body child. */
.crm-toast-stack {
  position: fixed !important;
  top: 76px !important;
  right: 16px !important;
  z-index: 2147483600 !important;
  isolation: isolate !important;
  width: 22rem !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 92px) !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  overscroll-behavior: contain !important;
  pointer-events: none !important;
  scrollbar-width: thin;
}
.crm-toast-stack > .crm-toast { pointer-events: auto !important; }
@media (max-width: 640px) {
  .crm-toast-stack {
    top: 68px !important;
    right: 8px !important;
    width: min(22rem, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 80px) !important;
  }
}

/* CRM v209 — notification portal lives directly under <body>; no ancestor can clip it. */
body > .crm-toast-stack {
  position: fixed !important;
  top: 12px !important;
  right: 14px !important;
  z-index: 2147483647 !important;
  width: 22rem !important;
  max-width: calc(100vw - 28px) !important;
  max-height: calc(100vh - 24px) !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  pointer-events: none !important;
  isolation: isolate !important;
  contain: layout style !important;
}
body > .crm-toast-stack > .crm-toast { pointer-events: auto !important; }
@media (max-width:640px){
 body > .crm-toast-stack{top:8px !important;right:8px !important;width:calc(100vw - 16px) !important;max-width:calc(100vw - 16px) !important;max-height:calc(100vh - 16px) !important;}
}

/* CRM v215 — dedicated notification top layer outside React root. */
#crm-notification-host {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  pointer-events: none !important;
  overflow: visible !important;
  isolation: isolate !important;
  contain: none !important;
}
#crm-notification-host > .crm-toast-stack {
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  width: 22rem !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - 16px) !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  z-index: 2147483647 !important;
  pointer-events: none !important;
  clip: auto !important;
  clip-path: none !important;
  contain: none !important;
}
#crm-notification-host > .crm-toast-stack > .crm-toast {
  pointer-events: auto !important;
  position: relative !important;
  transform: none;
  visibility: visible !important;
  opacity: 1;
}
@media (max-width:640px){
  #crm-notification-host > .crm-toast-stack {
    top: 8px !important;
    right: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }
}

/* CRM v215 — guaranteed 4-second light-green flash for a brand-new lead row. */
.crm-lead-board tbody tr.flash-new-lead,
html.excel-mode .crm-lead-board tbody tr.flash-new-lead {
  animation: crmNewLeadFlashV210 .8s ease-in-out 5 !important;
}
.crm-lead-board tbody tr.flash-new-lead > td,
html.excel-mode .crm-lead-board tbody tr.flash-new-lead > td {
  background: transparent !important;
}
@keyframes crmNewLeadFlashV210 {
  0%,100% { background-color: transparent; }
  50% { background-color: #bbf7d0; }
}
html.dark .crm-lead-board tbody tr.flash-new-lead {
  animation-name: crmNewLeadFlashV210Dark !important;
}
@keyframes crmNewLeadFlashV210Dark {
  0%,100% { background-color: transparent; }
  50% { background-color: #14532d; }
}


/* CRM v215 — definitive build badge. Never let older launcher-tracking code hide it. */
#crm-version-badge,
#crm-version-badge.crm-v215-version {
  position: fixed !important;
  visibility: visible !important;
  display: block !important;
  opacity: 1 !important;
  right: 14px !important;
  bottom: 78px !important;
  top: auto !important;
  left: auto !important;
  z-index: 2147483000 !important;
  color: #e2e8f0 !important;
  background: rgba(15,23,42,.92) !important;
  border: 1px solid rgba(148,163,184,.32) !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.18) !important;
  pointer-events: none !important;
}

/* CRM v215 — v209 analytics DOM uses v209 class names; style those exact classes. */
.crm-v215-analytics-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 12px !important;
  align-items: stretch !important;
}
.crm-v215-analytics-card {
  min-width: 0 !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  border-radius: 14px !important;
  background: var(--crm-card-bg,#fff) !important;
  padding: 12px !important;
  overflow: hidden !important;
}
.dark .crm-v215-analytics-card { background: rgba(15,23,42,.72) !important; border-color: rgba(148,163,184,.18) !important; }
.crm-v215-analytics-title { display:flex !important; align-items:center !important; gap:8px !important; margin:0 0 10px !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.06em !important; text-transform:uppercase !important; color:#64748b !important; }
.dark .crm-v215-analytics-title { color:#94a3b8 !important; }
.crm-v215-analytics-dot { width:4px !important; height:14px !important; border-radius:99px !important; background:#10b981 !important; flex:0 0 auto !important; }
.crm-v215-analytics-scroll { max-height:310px !important; overflow:auto !important; overscroll-behavior:contain !important; scrollbar-gutter:stable !important; }
.crm-v215-analytics-table { width:100% !important; border-collapse:separate !important; border-spacing:0 !important; font-size:11px !important; color:#334155 !important; }
.dark .crm-v215-analytics-table { color:#cbd5e1 !important; }
.crm-v215-analytics-table th { position:sticky !important; top:0 !important; z-index:2 !important; background:#f8fafc !important; color:#64748b !important; font-size:10px !important; text-transform:uppercase !important; letter-spacing:.04em !important; font-weight:700 !important; padding:7px 6px !important; border-bottom:1px solid #e2e8f0 !important; text-align:left !important; white-space:nowrap !important; }
.dark .crm-v215-analytics-table th { background:#111827 !important; color:#94a3b8 !important; border-color:#334155 !important; }
.crm-v215-analytics-table td { padding:7px 6px !important; border-bottom:1px solid rgba(226,232,240,.75) !important; vertical-align:middle !important; }
.dark .crm-v215-analytics-table td { border-color:rgba(51,65,85,.65) !important; }
/* Keep 3 across on normal desktop widths; only stack on genuinely narrow screens. */
@media (max-width: 860px) {
  .crm-v215-analytics-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   CRM v217 addition — modal must never be overridden by the sticky board
   ============================================================ */

/* Edit Lead / Edit Order / Add Agent etc. all use the same shared modal
   component. It is NOT portaled to document.body - it renders inline inside
   the same page tree that the sticky board wraps (.crm-board-dock-shell,
   position:sticky with an explicit z-index). A positioned element with a
   real z-index value creates its OWN stacking context for everything inside
   it - so the modal's z-50 was only ever being compared against other
   things *inside* that same context, never against the sticky table header
   (z-42) sitting in that same trapped context. From outside, the whole
   modal effectively behaved like it was at the shell's z-index (24), so the
   header could paint over it.
   Fix: while any modal is open, drop the shell's z-index to `auto`, which
   removes that stacking context entirely. Nothing inside it needs its own
   layering while a modal is covering the screen, and the modal's z-50 can
   then correctly out-rank the header/pager instead of being trapped below
   them. crm-v216-all.js toggles the `crm-modal-open` class on <html>. */
html.crm-modal-open .crm-board-dock-shell {
  z-index: auto !important;
}

/* ============================================================
   CRM v218 — DEFINITIVE Z-INDEX HIERARCHY
   ============================================================
   Multiple people patched this file over time, each independently bumping
   a z-index number to beat whatever ONE specific thing was covering their
   feature at that moment (columns dropdown, search suggestions, sticky
   table header, sticky-header clone...). That escalation war ended with:
     - the top app header (with the global search bar) at z-index 320
     - its search-dropdown child at 340
     - a cloned "shadow" sticky header (.crm-v202-sticky-head) at 150
     - the Columns dropdown's own portal copy at 120
   ...while the Edit Lead / New Order / etc. modal has always just been the
   React source's plain z-50, and the chat launcher/panel sits at 50 too.
   That's why opening a lead (or the chat panel, or a "good morning" banner)
   while the board is docked/scrolled showed it BEHIND the header or the
   sticky table header - those had crept far above everything else.

   One clear order from here, low to high (all !important, matching or
   exceeding the specificity of the rules being overridden, and placed at
   the end of the file so later source order wins any tie):
     ~20  sticky table header / first row while a board is docked
     ~25  the persistent app header (title bar + global search)
     ~70  dropdowns that must escape their trigger (search suggestions,
          Columns picker)
     ~80  modals (Edit Lead, New Order, Edit Order, Add Agent, ...)
     ~90  chat launcher / open chat panel
     kept as-is: toast/notification popups already sit at the highest
     possible value on purpose and must stay above literally everything,
     modals included - that's correct and untouched here.
   ============================================================ */

/* Sticky table header (and its body-cloned shadow copy) + docked pager -
   all the same "in-page sticky chrome" tier. */
.crm-board-dock-viewport > table > thead,
.crm-board-dock-viewport > table > thead > tr,
.crm-board-dock-viewport > table > thead > tr > th,
.crm-order-board thead tr,
.crm-order-board thead th,
.crm-board-dock-pager,
html.crm-board-is-docked .crm-board-dock-pager,
.crm-v202-sticky-head,
.crm-board-dock-shell {
  z-index: 20 !important;
}

/* The persistent app header - was 320/340, now correctly below dropdowns,
   modals and chat instead of above literally everything in the app. */
header.sticky.top-0.z-30 {
  z-index: 25 !important;
}
header.sticky.top-0.z-30 .relative.w-full.max-w-sm.ml-auto.shrink-0 > .absolute {
  z-index: 70 !important;
}

/* Dropdowns that need to escape their own trigger's container. */
.relative.w-full.max-w-sm.ml-auto.shrink-0 > .absolute.z-30,
.absolute.right-0.mt-2.w-64.bg-white.border.border-gray-200.rounded-lg.shadow-lg.z-20,
.crm-columns-popover-fixed {
  z-index: 70 !important;
}

/* Every modal (Edit Lead, New Order, Edit Order, Add Agent, ...) shares
   this one dialog wrapper - always above the header/sticky chrome/dropdowns,
   below chat and toasts. */
[role="dialog"][aria-modal="true"] {
  z-index: 80 !important;
}

/* Chat launcher and open chat panel - above modals, below toasts. */
.crm-board-chat-launcher,
html.crm-board-is-docked .crm-board-chat-minibar,
button[title="Open chat"][aria-label="Open chat"] {
  z-index: 90 !important;
}

/* ============================================================
   CRM v220
   ============================================================ */

/* --- Chat khula ho to shell ki apni parat hata do ------------------------------------------
   Bilkul wahi ilaaj jo v217 me modal ke liye laga tha. Wajah bhi wahi: shell ko z-index milte hi
   wo apna alag tabqa bana leta hai, aur uske andar ki har cheez (chat samet) bahar se ek hi parat
   lagti hai - to header uske upar paint ho jata hai. Chat khula ho to shell ko apni parat chahiye
   hi nahi. */
html.crm-chat-open .crm-board-dock-shell,
html.crm-overlay-open .crm-board-dock-shell {
  z-index: auto !important;
}

/* Khula chat panel (aur chhota kiya hua bar) modal ke barabar ki parat par - header, sticky
   header aur dropdown se upar, par toast se neeche (toast ko sabse upar rehna hi chahiye). */
.crm-v220-chat-panel {
  z-index: 90 !important;
}

/* --- Column drag: jami hui (cloned) header ab maus lene lagi ------------------------------
   v202 ki naqal par `pointer-events: none` tha, isliye scroll karte hi drag "kuch nahi karta"
   tha. Ab sirf uske khaano par maus lagti hai - baaki naqal pehle jaisi hi. */
.crm-v202-sticky-head { pointer-events: none !important; }
.crm-v202-sticky-head thead th {
  pointer-events: auto !important;
  cursor: move;
}
.crm-v202-sticky-head thead th.crm-v220-drop-target {
  outline: 2px solid rgba(16, 185, 129, .85);
  outline-offset: -2px;
  background: rgba(16, 185, 129, .10) !important;
}
html.crm-v220-col-dragging,
html.crm-v220-col-dragging * {
  user-select: none !important;
  cursor: move !important;
}

/* --- Orders toolbar: All Shipment + Attempt ------------------------------------------------ */
.crm-v220-filters {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.crm-v220-allship {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #334155;
  border-radius: 9px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.crm-v220-allship:hover { background: #f1f5f9; }
.crm-v220-allship.is-on {
  background: #059669;
  border-color: #059669;
  color: #fff;
}
.crm-v220-attempt {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #334155;
  border-radius: 9px;
  padding: 7px 10px;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
}
html.dark .crm-v220-allship,
html.dark .crm-v220-attempt {
  background: #111827;
  border-color: #334155;
  color: #e2e8f0;
}
html.dark .crm-v220-allship:hover { background: #1f2937; }

/* --- Shipment Report ----------------------------------------------------------------------- */
.crm-v220-report {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  padding: 14px 14px 10px;
  margin-top: 16px;
}
html.dark .crm-v220-report { background: #0f172a; border-color: #1f2937; }

.crm-v220-report-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
  flex-wrap: wrap;
}
html.dark .crm-v220-report-title { color: #e2e8f0; }
.crm-v220-report-title small { font-size: 11px; font-weight: 500; color: #94a3b8; }
.crm-v220-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #059669;
  display: inline-block;
  flex: 0 0 auto;
}

.crm-v220-report-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.crm-v220-report-bar label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #64748b;
}
.crm-v220-report-bar input,
.crm-v220-report-bar select {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 13px;
  color: #334155;
  background: #fff;
  min-width: 0;
}
.crm-v220-report-bar input[type="search"] { min-width: 210px; flex: 1 1 210px; }
html.dark .crm-v220-report-bar input,
html.dark .crm-v220-report-bar select { background: #111827; border-color: #334155; color: #e2e8f0; }
.crm-v220-report-spacer { flex: 1 1 auto; }

.crm-v220-dl {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #334155;
  border-radius: 9px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.crm-v220-dl:hover { background: #f1f5f9; }
.crm-v220-dl.is-primary { background: #059669; border-color: #059669; color: #fff; }
.crm-v220-dl.is-primary:hover { background: #047857; }
.crm-v220-dl[disabled] { opacity: .6; cursor: default; }
html.dark .crm-v220-dl { background: #111827; border-color: #334155; color: #e2e8f0; }

/* Table apne andar scroll karti hai - page ki lambai nahi badalti, aur heading tiki rehti hai. */
.crm-v220-report-scroll {
  max-height: min(62vh, 640px);
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
html.dark .crm-v220-report-scroll { border-color: #1f2937; }
.crm-v220-report-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}
.crm-v220-report-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  color: #64748b;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  padding: 8px 8px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  white-space: nowrap;
}
html.dark .crm-v220-report-table th { background: #111827; color: #94a3b8; border-color: #334155; }
.crm-v220-report-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-v220-report-table td.wide { max-width: 320px; }
html.dark .crm-v220-report-table td { color: #cbd5e1; border-color: #1f2937; }
.crm-v220-report-table tbody tr:hover td { background: #f8fafc; }
html.dark .crm-v220-report-table tbody tr:hover td { background: #111827; }

.crm-v220-report-empty {
  padding: 26px 10px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}
.crm-v220-report-empty.is-error { color: #e11d48; }

.crm-v220-report-pager {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 2px 2px;
  font-size: 12px;
  color: #64748b;
}
.crm-v220-report-pager button {
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 8px;
  padding: 5px 11px;
  font-size: 12px;
  cursor: pointer;
  color: #334155;
}
.crm-v220-report-pager button[disabled] { opacity: .45; cursor: default; }
html.dark .crm-v220-report-pager button { background: #111827; border-color: #334155; color: #e2e8f0; }

@media (max-width: 640px) {
  .crm-v220-report-bar input[type="search"] { min-width: 140px; }
  .crm-v220-report-scroll { max-height: 58vh; }
}

/* ============================================================
   CRM v221
   ============================================================ */

/* --- Column drag: ab poora maus se --------------------------------------------------------
   Ab asli header par bhi drag chalta hai, isliye dono jagah maus lagni chahiye. */
.crm-v202-sticky-head thead th,
.crm-order-board thead th,
.crm-lead-board thead th {
  cursor: move;
}
/* Uthaya hua khaana halka, aur jahan girega wahan hara nishan - taaki dikhe kya ho raha hai. */
th.crm-v221-drag-source {
  opacity: .45 !important;
}
th.crm-v221-drop-target {
  outline: 2px solid rgba(16, 185, 129, .9) !important;
  outline-offset: -2px;
  background: rgba(16, 185, 129, .12) !important;
}

/* --- Tick wala chunav (Attempt / Status / Source) ------------------------------------------ */
.crm-v221-pick {
  position: relative;
  display: inline-flex;
}
.crm-v221-pick-btn {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #334155;
  border-radius: 9px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.crm-v221-pick-btn:hover { background: #f1f5f9; }
.crm-v221-pick-btn.is-on {
  background: #059669;
  border-color: #059669;
  color: #fff;
}
html.dark .crm-v221-pick-btn { background: #111827; border-color: #334155; color: #e2e8f0; }
html.dark .crm-v221-pick-btn.is-on { background: #059669; border-color: #059669; color: #fff; }

.crm-v221-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  /* Toolbar ke andar rehte hue bhi upar dikhna chahiye - sticky header aur pager se upar,
     par modal/chat/toast se neeche. */
  z-index: 70;
  min-width: 190px;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 11px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
  padding: 6px;
}
html.dark .crm-v221-pop { background: #0f172a; border-color: #1f2937; }
.crm-v221-pop[hidden] { display: none; }

.crm-v221-pop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
}
.crm-v221-pop-row:hover { background: #f1f5f9; }
html.dark .crm-v221-pop-row { color: #e2e8f0; }
html.dark .crm-v221-pop-row:hover { background: #1f2937; }
.crm-v221-pop-row input { width: 15px; height: 15px; flex: 0 0 auto; cursor: pointer; }

.crm-v221-pop-foot {
  display: flex;
  gap: 6px;
  padding: 6px 4px 2px;
  margin-top: 4px;
  border-top: 1px solid #f1f5f9;
}
html.dark .crm-v221-pop-foot { border-color: #1f2937; }
.crm-v221-pop-clear,
.crm-v221-pop-apply {
  flex: 1 1 auto;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #334155;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.crm-v221-pop-apply { background: #059669; border-color: #059669; color: #fff; }
.crm-v221-pop-apply:hover { background: #047857; }
.crm-v221-pop-clear:hover { background: #f1f5f9; }
html.dark .crm-v221-pop-clear { background: #111827; border-color: #334155; color: #e2e8f0; }

/* --- Report ke do hisse: Courier Shipment / Lead ------------------------------------------- */
.crm-v221-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: #f1f5f9;
  border-radius: 10px;
  margin-bottom: 10px;
}
html.dark .crm-v221-tabs { background: #111827; }
.crm-v221-tab {
  border: 0;
  background: transparent;
  color: #64748b;
  border-radius: 8px;
  padding: 6px 15px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.crm-v221-tab.is-on {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .10);
}
html.dark .crm-v221-tab.is-on { background: #0f172a; color: #e2e8f0; }

/* Report ki table ke andar popup katna nahi chahiye. */
.crm-v220-report { overflow: visible; }
.crm-v220-report-bar { position: relative; z-index: 3; }

/* ============================================================
   CRM v223 — row ka rang, hover, "kaam ho raha hai", khula hua row
   ============================================================
   Parato ka kram (neeche se upar):

       status ka rang  ->  khula hua row  ->  kaam ho raha hai (golden)  ->  maus (hover)

   Maus wala sabse upar isliye ki wo "haan, main isi row par hoon" ka jawab hai - wo hamesha
   dikhna chahiye, chahe row par koi bhi rang laga ho.

   Sab kuch stylesheet me hai (row ke apne style me nahi), isliye ye kram sach me lagta hai.
   Pehle rang seedhe row ke style me `!important` ke saath likha jata tha - aur element ke apne
   style ko stylesheet ka koi niyam hara hi nahi sakta. Isi wajah se hover aur "kaam ho raha hai"
   dono dab gaye the.
   ============================================================ */

/* --- 1. Status ka rang (sabse neeche wali parat) ------------------------------------------- */
tbody tr.crm-row-tinted {
  background-color: var(--crm-row-bg) !important;
}
tbody tr.crm-row-tinted > td {
  background-color: transparent !important;
}

/* --- 2. Jo row kholi thi, wapas aane par wahi ---------------------------------------------- */
/* Rang badalne ke bajaye BAAYIN taraf ek patti - taaki status ka rang bhi dikhta rahe. */
tbody tr.crm-row-opened > td:first-child {
  box-shadow: inset 3px 0 0 0 #4f46e5 !important;
}
tbody tr.crm-row-opened {
  background-color: var(--crm-row-opened-bg, rgba(79, 70, 229, .09)) !important;
}
tbody tr.crm-row-opened.crm-row-tinted {
  /* Status ka rang laga ho to sirf patti - rang chhedte nahi. */
  background-color: var(--crm-row-bg) !important;
}
html.dark tbody tr.crm-row-opened {
  --crm-row-opened-bg: rgba(129, 140, 248, .16);
}

/* --- 3. Is lead par koi AUR agent kaam kar raha hai (golden) -------------------------------- */
tbody tr.crm-row-working,
tbody tr.crm-row-working.crm-row-tinted {
  background-color: #fde68a !important;   /* golden */
  box-shadow: inset 3px 0 0 0 #d97706;
}
tbody tr.crm-row-working > td {
  background-color: transparent !important;
  color: #4a3407;
}
html.dark tbody tr.crm-row-working,
html.dark tbody tr.crm-row-working.crm-row-tinted {
  background-color: #78350f !important;
  box-shadow: inset 3px 0 0 0 #f59e0b;
}
html.dark tbody tr.crm-row-working > td { color: #fde68a; }
/* Chhupa hua number thoda alag dikhe, taaki galti se asli na samjha jaye. */
tbody tr.crm-row-working > td[data-crm-masked="1"] {
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  cursor: help;
}

/* --- 4. Maus (hover) — sabse upar ------------------------------------------------------------ */
/* `:hover` khud specificity badha deta hai, aur ye niyam file me sabse aakhir me hain -
   isliye ye har parat ko haraate hain. */
:root:not(.dark) tbody tr.crm-row-tinted:hover,
:root:not(.dark) tbody tr.crm-row-opened:hover,
:root:not(.dark) tbody tr.crm-row-working:hover,
:root:not(.dark) .crm-lead-board tbody tr:hover,
:root:not(.dark) .crm-order-board tbody tr:hover {
  background-color: #cdebdd !important;
}
:root:not(.dark) tbody tr.crm-row-tinted:hover > td,
:root:not(.dark) tbody tr.crm-row-working:hover > td,
:root:not(.dark) .crm-lead-board tbody tr:hover > td,
:root:not(.dark) .crm-order-board tbody tr:hover > td {
  background-color: transparent !important;
  color: inherit;
}

html.dark tbody tr.crm-row-tinted:hover,
html.dark tbody tr.crm-row-opened:hover,
html.dark tbody tr.crm-row-working:hover,
html.dark .crm-lead-board tbody tr:hover,
html.dark .crm-order-board tbody tr:hover {
  background-color: #14532d !important;
}
html.dark tbody tr.crm-row-tinted:hover > td,
html.dark tbody tr.crm-row-working:hover > td,
html.dark .crm-lead-board tbody tr:hover > td,
html.dark .crm-order-board tbody tr:hover > td {
  background-color: transparent !important;
  color: inherit;
}

/* Naye lead ki chamak (flash) ke waqt hover beech me na aaye - wo apne aap 4 second me chali
   jaati hai, aur us dauran uska hilna hi asli sandesh hai. */
tbody tr.flash-new-lead:hover {
  background-color: inherit !important;
}

/* ============================================================
   CRM v224 — search ka suggestion box
   ============================================================
   Ab ye `fixed` hai, aur uski jagah/lambai JS naapta hai. Isse do faayde:
     - koi bhi maa-baap ise KAAT nahi sakta (upar ke raaste me `overflow: hidden` wala dabba hai,
       aur `absolute` cheez ko aisa maa-baap kaat deta hai)
     - jitni jagah screen par bachi hai, utna lamba - purane 384px ke kaid ki jagah
   ============================================================ */
.crm-v224-search-pop {
  position: fixed !important;
  /* Header (25), sticky header (20) aur dropdown-tier (70) - ye usi tier me hai. */
  z-index: 70 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  /* Purana `max-h-96` (384px) yahin se haraya jaata hai - asli lambai JS deta hai. */
  max-height: none;
  margin: 0 !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .20), 0 2px 8px rgba(15, 23, 42, .10) !important;
  scrollbar-width: thin;
}

/* Andar ke suggestion pooray dikhein - aadha kata hua row bura lagta hai. */
.crm-v224-search-pop > div,
.crm-v224-search-pop button {
  white-space: normal;
}

/* ==============================================================================================
   CRM v226 — keyboard, call aur khushi (dock hata diya gaya)
   ==============================================================================================
   Parato ka kram (jo pehle se chala aa raha hai, wahi nibhaya gaya):
     sticky header 20  <  app header 25  <  dropdown 70  <  modal 80  <  chat 90
   Naya:
     confetti   96   pointer-events: none - click kabhi nahi rokta
     madad      97
     toast      98
   ============================================================================================== */

/* ---------------- v225-b: keyboard ka nishan ---------------- */
/*
   Yahan `!important` jaan-boojh kar hai. v223 me row ka rang inline style se lagta hai, aur
   inline style ko sirf `!important` hi hara sakta hai - yahi baat v223 me row hover theek karte
   waqt saamne aayi thi. Nishan sirf baayein taraf ki patti aur halki chamak hai, poora rang nahi,
   isliye row ka apna rang (working/golden/opened) dabta nahi.
*/
tr.crm-kb-cursor > td:first-child,
tr.crm-kb-cursor > th:first-child {
  box-shadow: inset 3px 0 0 0 #2563eb !important;
}

tr.crm-kb-cursor > td,
tr.crm-kb-cursor > th {
  background-image: linear-gradient(rgba(37, 99, 235, .07), rgba(37, 99, 235, .07)) !important;
}

/* ---------------- v225-b: madad ka parda ---------------- */
.crm-kb-help {
  position: fixed;
  inset: 0;
  z-index: 97;
  background: rgba(15, 23, 42, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.crm-kb-card {
  background: #fff;
  border-radius: 14px;
  padding: 20px 22px;
  min-width: 280px;
  max-width: 380px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
  color: #0f172a;
  font-size: 13px;
}

.crm-kb-card h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; }

.crm-kb-card table { width: 100%; border-collapse: collapse; }

.crm-kb-card td { padding: 4px 0; vertical-align: middle; }

.crm-kb-card td:first-child { width: 96px; white-space: nowrap; }

.crm-kb-card td:last-child { color: #475569; }

.crm-kb-card kbd {
  display: inline-block;
  min-width: 18px;
  text-align: center;
  padding: 2px 5px;
  border: 1px solid #cbd5e1;
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #f8fafc;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
}

.crm-kb-card p { margin: 12px 0 14px; color: #64748b; font-size: 11.5px; line-height: 1.45; }

.crm-kb-close {
  width: 100%;
  border: 0;
  border-radius: 9px;
  background: #0f172a;
  color: #fff;
  padding: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------------- v225-c: call ka button + purana customer ka nishan ---------------- */
/*
   Dono cell ke andar jodte hain, par TEXT bilkul nahi. Call ke andar sirf SVG hai, aur ginti
   `::after` + `attr()` se aati hai. Isliye `td.textContent` waisa ka waisa rehta hai aur v223 ka
   number chhupana / v224 ka number wapas laana bina rukawat chalta rehta hai.
*/
td.crm-has-tel { white-space: nowrap; }

/* v251: call ka nishan ab table ke bahar bhi lagta hai (card, panel, follow-up list).
   Wahan `tr` hota hi nahi, isliye niche wala "row par maus aaye to gehra karo" niyam kaam nahi
   karta - un jagah nishan hamesha saaf dikhta hai. */
.crm-has-tel:not(td) a.crm-call { opacity: 1; }

a.crm-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  margin-left: 6px;
  border-radius: 6px;
  vertical-align: middle;
  color: #16a34a;
  background: #dcfce7;
  text-decoration: none;
  opacity: .55;
  transition: opacity .15s ease, background .15s ease;
}

tr:hover a.crm-call,
tr.crm-kb-cursor a.crm-call,
td.crm-has-tel:hover a.crm-call { opacity: 1; }

a.crm-call:hover { background: #bbf7d0; color: #15803d; }

span.crm-repeat {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  padding: 0 6px;
  height: 16px;
  border-radius: 999px;
  vertical-align: middle;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: help;
}

/* Ginti pseudo-element se - taaki phone ke text me na ghule. */
span.crm-repeat::after { content: "↻" attr(data-n); }

span.crm-repeat-risk { background: #fee2e2; color: #991b1b; }

/* ---------------- v225-d: confetti aur toast ---------------- */
.crm-confetti {
  position: fixed;
  inset: 0;
  z-index: 96;
  pointer-events: none;
}

.crm-v225-toast {
  position: fixed;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%);
  z-index: 98;
  max-width: min(420px, calc(100vw - 32px));
  padding: 9px 16px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .28);
  opacity: 1;
  transition: opacity .45s ease, transform .45s ease;
}

.crm-v225-toast-bad { background: #b91c1c; }

.crm-v225-toast-out { opacity: 0; transform: translateX(-50%) translateY(8px); }

/* Chhoti screen par dock ko rasta de do - poori chaudai kabhi na ghere. */
/* Jinhe animation se dikkat hoti hai. */
@media (prefers-reduced-motion: reduce) {
  .crm-v225-toast { transition: none; }
  .crm-confetti { display: none; }
}

/* ============================================================
   CRM v226 — search ka suggestion, bina JS ke bhi header se upar
   ============================================================
   Naapa hua sach: table ka sticky header thead=45 / th=46 par baithta hai. App khud is panel ko
   Tailwind ke `z-30` par rakhta hai. 30 < 46 - isliye jis pal bhi mera JS wala nishan panel par
   nahi lagta, header uske upar chadh jata hai.

   Ye niyam panel ko uske DHAANCHE se pehchanta hai (header ke andar, .relative ke andar, absolute
   dropdown) aur 70 par rakh deta hai - chahe JS chale ya na chale.

   70 hi kyun: modal 80 aur chat 90 se NEECHE. Suggestion ko un dono ko dabana nahi chahiye.
   ============================================================ */
header .relative > div[class*="absolute"][class*="z-30"] {
  z-index: 70;
}

/* ============================================================
   CRM v227 — apna dialer
   ============================================================
   Parato ka kram wahi jo pehle se hai:
     sticky header 46 < suggestion 70 < modal 80 < chat 90
   Phone jodne ka parda 80 par - app ke apne modal ke barabar, kyunki ye bhi ek modal hi hai.
   ============================================================ */

/* Phone jud chuka aur jaag raha hai - call ka button hara nishan pehen leta hai.
   Bina iske agent ko pata hi nahi chalta ki click karne par phone bajega ya nahi. */
html.crm-dial-ready a.crm-call {
  box-shadow: 0 0 0 1.5px #16a34a;
}

html.crm-dial-ready a.crm-call::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -1px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #16a34a;
  border: 1px solid #fff;
}

a.crm-call { position: relative; }

/* ---------------- phone jodne ka parda ---------------- */
.crm-dial-back {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(15, 23, 42, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.crm-dial-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px 26px;
  width: 100%;
  max-width: 360px;
  text-align: center;
  color: #0f172a;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
}

.crm-dial-card h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
}

.crm-dial-card p {
  margin: 0 0 14px;
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
}

.crm-dial-code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #0f172a;
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  padding: 14px 10px;
  margin-bottom: 14px;
  user-select: all;
}

.crm-dial-small {
  font-size: 11.5px !important;
  color: #64748b !important;
}

.crm-dial-close {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: #0f172a;
  color: #fff;
  padding: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.crm-dial-close:hover { background: #1e293b; }

/* ============================================================
   CRM v228 — dialer settings ka parda
   ============================================================
   Wahi tier jo jodne wale parde ka hai (80 = modal). Ye bhi ek modal hi hai.
   ============================================================ */
.crm-ds-back {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(15, 23, 42, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.crm-ds-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px 24px;
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  overflow-y: auto;
  color: #0f172a;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
}

.crm-ds-card h3 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
}

.crm-ds-note {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.5;
  color: #475569;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 10px 12px;
}

.crm-ds-warn {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #92400e;
  background: #fef3c7;
  border-radius: 10px;
  padding: 10px 12px;
}

.crm-ds-list { display: flex; flex-direction: column; gap: 10px; }

.crm-ds-row {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
}

.crm-ds-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
  font-size: 13px;
}

.crm-ds-dev { font-size: 11.5px; color: #64748b; }

.crm-ds-on { color: #15803d; font-weight: 600; }
.crm-ds-off { color: #94a3b8; }

.crm-ds-fields {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.crm-ds-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: #64748b;
  flex: 1 1 190px;
}

.crm-ds-fields select,
.crm-ds-fields input {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 13px;
  color: #0f172a;
  background: #fff;
  width: 100%;
}

.crm-ds-fields select:disabled,
.crm-ds-fields input:disabled { background: #f8fafc; color: #94a3b8; }

.crm-ds-save {
  margin-top: 10px;
  border: 0;
  border-radius: 9px;
  background: #16a34a;
  color: #fff;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.crm-ds-save:hover { background: #15803d; }

.crm-ds-msg {
  margin-left: 10px;
  font-size: 12px;
  color: #64748b;
}

.crm-ds-good { color: #15803d; font-weight: 600; }
.crm-ds-bad { color: #b91c1c; font-weight: 600; }

.crm-ds-close {
  width: 100%;
  margin-top: 16px;
  border: 0;
  border-radius: 10px;
  background: #0f172a;
  color: #fff;
  padding: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.crm-ds-close:hover { background: #1e293b; }

/* `?` wali madad me jo button judta hai. */
.crm-ds-open {
  width: 100%;
  margin-bottom: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #f8fafc;
  color: #0f172a;
  padding: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.crm-ds-open:hover { background: #f1f5f9; }

/* ============================================================
   CRM v229 — Dialer settings ke do naye button
   ============================================================ */
.crm-ds-newcode {
  width: 100%;
  margin-top: 14px;
  border: 1px solid #16a34a;
  border-radius: 10px;
  background: #f0fdf4;
  color: #15803d;
  padding: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.crm-ds-newcode:hover { background: #dcfce7; }

/* Har jude hue phone ke aage chhota "Hatao". Laal isliye ki galti se na daba diya jaye. */
.crm-ds-drop {
  margin-left: 8px;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fef2f2;
  color: #b91c1c;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  vertical-align: middle;
}

.crm-ds-drop:hover { background: #fee2e2; }
.crm-ds-drop:disabled { opacity: .6; cursor: default; }

/* ============================================================
   CRM v230 — "call chal rahi hai" wali patti, aur code ka button
   ============================================================ */

/* Neeche beech me ek patli patti. Chat (90) se neeche rakhi hai taaki uske raste me na aaye. */
.crm-oncall {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 75;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(520px, calc(100vw - 32px));
  padding: 9px 16px;
  border-radius: 999px;
  background: #064e3b;
  color: #d1fae5;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(6, 78, 59, .35);
  pointer-events: none;
}

.crm-oncall b { color: #fff; }

.crm-oncall-hint {
  font-weight: 400;
  color: #6ee7b7;
  font-size: 11.5px;
  border-left: 1px solid rgba(255, 255, 255, .18);
  padding-left: 8px;
  margin-left: 2px;
}

/* Chhota dhadakta hua nishan - taaki aankh ko pata chale ki abhi chal rahi hai. */
.crm-oncall-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #34d399;
  flex: 0 0 auto;
  animation: crm-oncall-pulse 1.4s ease-in-out infinite;
}

@keyframes crm-oncall-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
  .crm-oncall-dot { animation: none; }
}

/* Har agent ke aage "Code banaiye" */
.crm-ds-code {
  margin-left: 8px;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  background: #f0fdf4;
  color: #15803d;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  vertical-align: middle;
}

.crm-ds-code:hover { background: #dcfce7; }
.crm-ds-code:disabled { opacity: .6; cursor: default; }

/* ============================================================
   CRM v231 — naya Dialer settings panel
   ============================================================
   Purane .crm-ds-* wale panel ki jagah. Ek agent = ek line, ek haal, ek button.
   ============================================================ */
.crm-dp-back {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(15, 23, 42, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.crm-dp-code-back { z-index: 82; }

.crm-dp-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px 24px;
  width: 100%;
  max-width: 540px;
  max-height: 82vh;
  overflow-y: auto;
  color: #0f172a;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
}

.crm-dp-narrow { max-width: 360px; text-align: center; }

.crm-dp-card h3 { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.crm-dp-card p { margin: 0 0 12px; font-size: 13px; color: #475569; line-height: 1.5; }

.crm-dp-note {
  background: #f1f5f9;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px !important;
}

.crm-dp-warn {
  background: #fef3c7;
  color: #92400e !important;
  border-radius: 10px;
  padding: 10px 12px;
}

/* ---- ek agent ---- */
.crm-dp-row {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.crm-dp-head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 13.5px;
}

/* Haal ek chhoti patti me - rang se hi pata chal jaye */
.crm-dp-state {
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 9px;
}

.crm-dp-on { background: #dcfce7; color: #15803d; }
.crm-dp-none { background: #f1f5f9; color: #64748b; }

/* Ek waqt me EK hi button dikhta hai - dono kabhi saath nahi */
.crm-dp-btn {
  margin-left: auto;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.crm-dp-code-btn { border-color: #86efac; background: #f0fdf4; color: #15803d; }
.crm-dp-code-btn:hover { background: #dcfce7; }

.crm-dp-off-btn { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.crm-dp-off-btn:hover { background: #fee2e2; }

.crm-dp-btn:disabled { opacity: .6; cursor: default; }

.crm-dp-fields { display: flex; gap: 10px; flex-wrap: wrap; }

.crm-dp-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: #64748b;
  flex: 1 1 190px;
}

.crm-dp-fields select,
.crm-dp-fields input {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 13px;
  color: #0f172a;
  background: #fff;
  width: 100%;
}

.crm-dp-save {
  margin-top: 10px;
  border: 0;
  border-radius: 9px;
  background: #16a34a;
  color: #fff;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.crm-dp-save:hover { background: #15803d; }

.crm-dp-msg { margin-left: 10px; font-size: 12px; color: #64748b; }
.crm-dp-good { color: #15803d; font-weight: 600; }
.crm-dp-bad { color: #b91c1c; font-weight: 600; }

.crm-dp-close {
  width: 100%;
  margin-top: 14px;
  border: 0;
  border-radius: 10px;
  background: #0f172a;
  color: #fff;
  padding: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.crm-dp-close:hover { background: #1e293b; }

/* ---- code ---- */
.crm-dp-code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .12em;
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  padding: 14px 10px;
  margin-bottom: 12px;
  user-select: all;
}

.crm-dp-small { font-size: 11.5px !important; color: #64748b !important; }

/* ---- "call chal rahi hai" patti par kaatne ka button ---- */
/* Patti par pointer-events: none laga hai (wo sirf dikhane ke liye thi), isliye button par
   use wapas chaalu karna padta hai - warna click lagta hi nahi. */
.crm-oncall-end {
  pointer-events: auto;
  margin-left: 4px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  padding: 3px 11px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.crm-oncall-end:hover { background: rgba(255, 255, 255, .22); }
.crm-oncall-end:disabled { opacity: .6; cursor: default; }

/* ==============================================================================================
   v236 — jab tak ek call ka safar chal raha hai, call button dabaya na ja sake
   ==============================================================================================
   Sirf `busy` wala JS flag kaafi nahi tha: agent ko dikhta hi nahi tha ki button ab kaam nahi
   karega, aur wo dobara-dobara dabata rehta tha. Ab button khud bata deta hai.

   Ye rok JS par nahi tiki - `pointer-events: none` browser ka apna niyam hai, isliye click
   pahunchta hi nahi. JS ka flag phir bhi hai (do taale, dono alag).
   ============================================================================================ */
html.crm-dialing a.crm-call {
  pointer-events: none;
  opacity: .45;
  cursor: default;
}

/* ==============================================================================================
   v238 — search suggestion SABSE UPAR, sabko neeche dabakar
   ==============================================================================================
   v237 me maine ulta kar diya tha: header ka apna tabqa HATA diya tha (`z-index: auto`), ye soch
   kar ki phir dropdown seedha sabse bahar wale muqable me aa jayega. Wo aadhi baat sahi thi -
   par header ka tabqa hatte hi header KHUD neeche chala gaya, aur uske andar baitha dropdown bhi
   uske saath neeche chala gaya. Nateeja wahi jo aapne dekha: ulta ho gaya.

   Ab seedha upaay: dropdown khula ho to HEADER KO HI SABSE UPAR utha do. Dropdown usi header ke
   andar rehta hai, isliye wo bhi apne aap sabse upar aa jata hai - table ka jama hua header,
   status column, patti, rows, sab uske neeche.

   Ye sirf tab tak hai jab tak dropdown khula hai. Band hote hi header apni purani parat (25) par
   wapas aa jata hai, isliye baaki waqt tarteeb bilkul pehle jaisi rehti hai.
   ============================================================================================ */
html.crm-sugg-open header.sticky.top-0.z-30 {
  z-index: 999 !important;
}

/* Header ke andar ka dropdown - us parat me sabse upar. */
html.crm-sugg-open .crm-v224-search-pop {
  z-index: 999 !important;
}

/* v238: "aakhri call" wali patti hata di gayi - uska roop bhi yahan se nikal diya. */


/* v237 — login page par version. Wahi ek jagah se aata hai jahan se badge aata hai
   (`<meta name="crm-version">`), isliye dono kabhi alag nahi ho sakte. */
#crm-login-version {
  position: fixed;
  right: 14px;
  bottom: 12px;
  z-index: 2147483000;
  font: 600 10px/1.2 Inter, Arial, sans-serif;
  letter-spacing: .2px;
  color: #94a3b8;
  background: rgba(15, 23, 42, .82);
  border: 1px solid rgba(148, 163, 184, .22);
  padding: 5px 8px;
  border-radius: 7px;
  pointer-events: none;
}

/* ==============================================================================================
   v244 — "battery ki rok lagi hai" wali chetavni (dialer panel me)
   ==============================================================================================
   Lock phone par call turant lagegi ya der se - ye ek hi setting par tikta hai. Pehle wo baat
   kahin dikhti hi nahi thi; call bas "kabhi-kabhi der se" lagti thi aur wajah chhupi rehti thi.
   Ab phone khud batata hai aur wo yahan saaf dikhta hai.
   ============================================================================================ */
.crm-dp-warn {
  display: block;
  margin: 6px 0 0;
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  color: #7c2d12;
  background: #ffedd5;
  border: 1px solid #fed7aa;
}
.crm-dp-warn-soft {
  color: #475569;
  background: #f1f5f9;
  border-color: #e2e8f0;
  font-weight: 500;
}

/* ---------------- v254: WhatsApp Automation ka panna ---------------- */
[data-crm-wa-hidden] { display: none !important; }

.crm-wa { display: block; }
.crm-wa-head h2 { margin: 0 0 2px; font-size: 20px; font-weight: 700; color: #0f172a; }
.crm-wa-head p { margin: 0 0 14px; font-size: 12px; color: #64748b; }

.crm-wa-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px 16px;
  margin-bottom: 14px;
}
.crm-wa-card h3 { margin: 0 0 3px; font-size: 14px; font-weight: 700; color: #0f172a; }
.crm-wa-note { margin: 0 0 10px; font-size: 11.5px; color: #64748b; line-height: 1.6; }
.crm-wa-note code, .crm-wa-tpls code {
  background: #f1f5f9; border-radius: 4px; padding: 1px 4px; font-size: 11px; color: #334155;
}

.crm-wa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 14px; }
.crm-wa-f { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: #475569; }
.crm-wa-f input {
  border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px 9px; font-size: 13px; color: #0f172a;
}
.crm-wa-f input:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }

.crm-wa-devs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.crm-wa-dev { border: 1px solid #eef2f7; border-radius: 10px; padding: 10px; display: grid; gap: 8px; }
.crm-wa-dev h4 { margin: 0; font-size: 12px; font-weight: 700; color: #334155; }

.crm-wa-btn {
  margin-top: 12px; background: #16a34a; color: #fff; border: 0; border-radius: 8px;
  padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.crm-wa-btn:hover { background: #15803d; }
.crm-wa-sm { margin-top: 6px; padding: 5px 12px; font-size: 12px; }

.crm-wa-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.crm-wa-tbl th {
  text-align: left; font-size: 11px; font-weight: 600; color: #64748b;
  border-bottom: 1px solid #e2e8f0; padding: 6px 8px;
}
.crm-wa-tbl td { padding: 8px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.crm-wa-sub { display: block; font-size: 10.5px; color: #94a3b8; margin-top: 1px; }
.crm-wa-tbl select, .crm-wa-num {
  border: 1px solid #cbd5e1; border-radius: 7px; padding: 5px 7px; font-size: 12px; background: #fff;
}
.crm-wa-num { width: 74px; }

.crm-wa-sw { position: relative; display: inline-block; width: 36px; height: 20px; }
.crm-wa-sw input { opacity: 0; width: 0; height: 0; }
.crm-wa-sw span {
  position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; transition: background .15s;
}
.crm-wa-sw span::after {
  content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px;
  background: #fff; border-radius: 50%; transition: transform .15s;
}
.crm-wa-sw input:checked + span { background: #16a34a; }
.crm-wa-sw input:checked + span::after { transform: translateX(16px); }

.crm-wa-link {
  background: #eff6ff; color: #1d4ed8; border: 0; border-radius: 7px;
  padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.crm-wa-x {
  background: #fef2f2; color: #b91c1c; border: 0; border-radius: 7px;
  padding: 4px 10px; font-size: 12px; cursor: pointer;
}

.crm-wa-add { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.crm-wa-add select { border: 1px solid #cbd5e1; border-radius: 7px; padding: 6px 8px; font-size: 12px; }
.crm-wa-add .crm-wa-btn { margin-top: 0; }

.crm-wa-tplrow td { background: #f8fafc; }
.crm-wa-tpls { display: grid; gap: 10px; }
.crm-wa-tpl { background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; padding: 9px; }
.crm-wa-tplhead { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #64748b; margin-bottom: 5px; }
.crm-wa-tplhead span:first-child { font-weight: 700; color: #334155; }
.crm-wa-chk { display: inline-flex; align-items: center; gap: 4px; }
.crm-wa-tpl textarea {
  width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px;
  font-size: 12.5px; line-height: 1.55; font-family: inherit; resize: vertical;
}
.crm-wa-tpl textarea:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }

.crm-wa-q { font-size: 12.5px; color: #475569; margin: 0; }
.crm-wa-load { padding: 30px; text-align: center; color: #94a3b8; font-size: 13px; }

@media (max-width: 640px) {
  .crm-wa-tbl, .crm-wa-tbl tbody, .crm-wa-tbl tr, .crm-wa-tbl td { display: block; width: 100%; }
  .crm-wa-tbl thead { display: none; }
  .crm-wa-tbl tr { border-bottom: 1px solid #e2e8f0; padding: 6px 0; }
  .crm-wa-tbl td { border: 0; padding: 4px 2px; }
}

/* Copy karne wale pate (pehle Settings ke WhatsApp khaane me the) */
.crm-wa-copies { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #e2e8f0; }
.crm-wa-copy { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.crm-wa-copy-l { flex: 0 0 auto; font-size: 11px; color: #64748b; min-width: 210px; }
.crm-wa-copy-v { flex: 1 1 auto; font-size: 11px; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 6px; padding: 4px 8px; overflow-x: auto; white-space: nowrap; color: #334155; }
.crm-wa-copy-b { flex: 0 0 auto; font-size: 11px; padding: 4px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid #cbd5e1; background: #fff; color: #334155; }
.crm-wa-copy-b:hover { background: #f1f5f9; }
@media (max-width: 720px) {
  .crm-wa-copy { flex-wrap: wrap; }
  .crm-wa-copy-l { min-width: 0; flex: 1 1 100%; }
}


/* ==============================================================================================
   v255 — Courier Integration aur Website & Ecommerce Integration
   Dono panne ka roop ek hi hai, isliye CSS bhi ek hi.
   ============================================================================================== */
[data-crm-int-hidden] { display: none !important; }

.crm-int { display: block; max-width: 980px; }
.crm-int-load { padding: 28px; color: #64748b; font-size: 13px; }

.crm-int-head { margin-bottom: 14px; }
.crm-int-head h2 { font-size: 19px; font-weight: 700; color: #0f172a; margin: 0; }
.crm-int-head p { font-size: 12px; color: #64748b; margin: 4px 0 0; max-width: 620px; line-height: 1.55; }

.crm-int-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 16px 18px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.crm-int-card > header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-int-card h3 { font-size: 14px; font-weight: 700; color: #0f172a; margin: 0; flex: 1 1 auto; }
.crm-int-note { font-size: 12px; color: #64748b; margin: 6px 0 10px; line-height: 1.6; }
.crm-int-note code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 11px; }
.crm-int-empty { font-size: 12px; color: #94a3b8; margin: 8px 0 0; }

.crm-int-badge {
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em;
}
.crm-int-badge.on { background: #dcfce7; color: #166534; }
.crm-int-badge.off { background: #f1f5f9; color: #64748b; }
.crm-int-badge.pri { background: #dbeafe; color: #1e40af; }

.crm-int-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #334155; margin: 8px 0 12px; flex-wrap: wrap; }

.crm-int-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.crm-int-f { display: flex; flex-direction: column; gap: 4px; }
.crm-int-f > span { font-size: 11px; color: #64748b; }
.crm-int-req { color: #e11d48; }
.crm-int-set { font-style: normal; color: #16a34a; font-size: 10px; margin-left: 4px; }
.crm-int-f input {
  border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px 10px; font-size: 12px;
  color: #0f172a; background: #fff; width: 100%;
}
.crm-int-f input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }

/* ---- teen kadam ---- */
.crm-int-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed #e2e8f0;
}
.crm-int-step {
  border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px;
  display: flex; flex-direction: column; gap: 7px; background: #f8fafc;
}
.crm-int-step.done { border-color: #86efac; background: #f0fdf4; }
.crm-int-step > b { font-size: 11px; color: #475569; font-weight: 700; }
.crm-int-msg { font-size: 11px; margin: 0; line-height: 1.5; }
.crm-int-msg.ok { color: #166534; }
.crm-int-msg.bad { color: #b91c1c; }

.crm-int-btn {
  border: 1px solid #cbd5e1; background: #fff; color: #0f172a; border-radius: 8px;
  padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.crm-int-btn:hover:not(:disabled) { background: #f1f5f9; }
.crm-int-btn:disabled { opacity: .45; cursor: not-allowed; }
.crm-int-btn.primary { background: #059669; border-color: #059669; color: #fff; }
.crm-int-btn.primary:hover:not(:disabled) { background: #047857; }

.crm-int-code {
  border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 10px; font-size: 15px;
  letter-spacing: .3em; text-align: center; font-weight: 700; width: 100%;
}
.crm-int-code:disabled { background: #f1f5f9; }

.crm-int-link {
  background: none; border: none; color: #4f46e5; font-size: 11px; font-weight: 600;
  cursor: pointer; padding: 2px 4px;
}
.crm-int-link:hover { text-decoration: underline; }

/* ---- switch ---- */
.crm-int-sw { position: relative; display: inline-block; width: 38px; height: 21px; flex: 0 0 auto; }
.crm-int-sw input { opacity: 0; width: 0; height: 0; }
.crm-int-sw span {
  position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px;
  transition: background .15s; cursor: pointer;
}
.crm-int-sw span::before {
  content: ''; position: absolute; height: 15px; width: 15px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .15s;
}
.crm-int-sw input:checked + span { background: #059669; }
.crm-int-sw input:checked + span::before { transform: translateX(17px); }

/* ---- copy ke pate ---- */
.crm-int-copies { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.crm-int-copy { display: flex; align-items: center; gap: 8px; }
.crm-int-copy-l { flex: 0 0 auto; font-size: 11px; color: #64748b; min-width: 190px; }
.crm-int-copy code {
  flex: 1 1 auto; font-size: 11px; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 6px; padding: 5px 8px; overflow-x: auto; white-space: nowrap; color: #334155;
}
.crm-int-copy-b {
  flex: 0 0 auto; font-size: 11px; padding: 5px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid #cbd5e1; background: #fff; color: #334155;
}
.crm-int-copy-b:hover { background: #f1f5f9; }

.crm-int-map { margin: 10px 0; }
.crm-int-map summary { font-size: 12px; color: #4f46e5; cursor: pointer; font-weight: 600; }
.crm-int-map[open] summary { margin-bottom: 8px; }

.crm-int-stats {
  display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; color: #64748b;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid #f1f5f9; align-items: center;
}
.crm-int-stats b { color: #0f172a; }

.crm-int-tbl { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.crm-int-tbl th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: #94a3b8; padding: 6px 8px; border-bottom: 1px solid #e2e8f0; font-weight: 700;
}
.crm-int-tbl td { padding: 8px; border-bottom: 1px solid #f1f5f9; color: #334155; vertical-align: top; }
.crm-int-sub { display: block; font-size: 10px; color: #94a3b8; margin-top: 2px; }
.crm-int-tag {
  font-size: 9px; background: #fef3c7; color: #92400e; padding: 2px 6px;
  border-radius: 999px; font-weight: 700;
}

.crm-int-foot { font-size: 11px; color: #94a3b8; line-height: 1.6; margin: 4px 0 24px; }

@media (max-width: 860px) {
  .crm-int-grid, .crm-int-steps { grid-template-columns: 1fr; }
  .crm-int-copy { flex-wrap: wrap; }
  .crm-int-copy-l { min-width: 0; flex: 1 1 100%; }
}

/* v255 — Settings ki khoj-patti */
.crm-set-bar {
  position: sticky; top: 0; z-index: 20; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; margin-bottom: 4px;
}
.crm-set-search { display: flex; align-items: center; gap: 10px; }
.crm-set-search input {
  flex: 1 1 auto; border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px 11px;
  font-size: 12px; color: #0f172a; background: #fff;
}
.crm-set-search input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.crm-set-count { flex: 0 0 auto; font-size: 11px; color: #64748b; white-space: nowrap; }
.crm-set-count.none { color: #b91c1c; font-weight: 600; }
.crm-set-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.crm-set-chip {
  font-size: 10px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid #e2e8f0; background: #fff; color: #475569;
}
.crm-set-chip:hover { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
@media (max-width: 640px) {
  .crm-set-search { flex-wrap: wrap; }
  .crm-set-count { flex: 1 1 100%; }
}

/* v256 — Dashboard ke neeche: lead kahan se, message kis status par */
.crm-src { display: block; margin-top: 20px; }
.crm-src-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.crm-src-head h3 { font-size: 14px; font-weight: 700; color: #0f172a; margin: 0; flex: 1 1 auto; }
.crm-src-chips { display: flex; gap: 4px; }
.crm-src-chip {
  font-size: 11px; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid #e2e8f0; background: #fff; color: #475569; font-weight: 600;
}
.crm-src-chip.on { background: #0f172a; border-color: #0f172a; color: #fff; }
.crm-src-chip:hover:not(.on) { background: #f1f5f9; }
.crm-src-note { font-size: 11px; color: #94a3b8; margin: 0 0 8px; }

.crm-src-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.crm-src-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.crm-src-card > header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9;
}
.crm-src-card > header b { font-size: 12px; color: #0f172a; }
.crm-src-card > header span { font-size: 11px; color: #94a3b8; }

.crm-src-row { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.crm-src-lab {
  flex: 0 0 108px; font-size: 11px; color: #475569; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.crm-src-track { flex: 1 1 auto; height: 16px; background: #f1f5f9; border-radius: 5px; overflow: hidden; }
.crm-src-fill {
  display: block; height: 100%; background: #a5b4fc; border-radius: 5px;
  min-width: 3px; position: relative;
}
.crm-src-ord { position: absolute; inset: 0 auto 0 0; background: #4f46e5; border-radius: 5px; }
.crm-src-num { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #0f172a; text-align: right; min-width: 26px; }
.crm-src-num em { display: block; font-style: normal; font-weight: 500; font-size: 10px; color: #94a3b8; }
.crm-src-empty { font-size: 12px; color: #94a3b8; margin: 6px 0; }
.crm-src-legend { font-size: 10px; color: #94a3b8; margin: 10px 0 0; display: flex; align-items: center; gap: 5px; }
.crm-src-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.crm-src-legend i.l1 { background: #a5b4fc; }
.crm-src-legend i.l2 { background: #4f46e5; margin-left: 8px; }

@media (max-width: 860px) {
  .crm-src-cols { grid-template-columns: 1fr; }
  .crm-src-lab { flex-basis: 86px; }
}

/* v256 — ek jagah ke kai darwaze (ME1, ME2...) */
.crm-int-chans { margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.crm-int-chan { border: 1px solid #e2e8f0; border-radius: 10px; padding: 9px 11px; background: #fff; }
.crm-int-chan.off { background: #f8fafc; opacity: .72; }
.crm-int-chan-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.crm-int-chan-name {
  border: 1px solid #cbd5e1; border-radius: 7px; padding: 4px 9px; font-size: 12px;
  font-weight: 700; color: #0f172a; width: 120px;
}
.crm-int-chan-name:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.crm-int-chan-tag { font-size: 10px; color: #64748b; }
.crm-int-chan-tag b { color: #0f172a; }
.crm-int-chan-n { font-size: 10px; color: #94a3b8; margin-left: auto; }
.crm-int-x {
  background: none; border: none; color: #b91c1c; font-size: 11px; cursor: pointer; font-weight: 600;
}
.crm-int-x:hover { text-decoration: underline; }
.crm-int-chan-add { display: flex; gap: 7px; align-items: center; margin-top: 2px; }
.crm-int-chan-add input {
  flex: 1 1 auto; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 6px 10px; font-size: 12px;
}
@media (max-width: 720px) {
  .crm-int-chan-n { margin-left: 0; }
  .crm-int-chan-name { width: 100%; }
}

/* v256 — Lead list me "kahan se aayi" ka nishan */
.crm-lead-src {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: 999px; background: #eef2ff; color: #3730a3; white-space: nowrap;
}
.crm-lead-src.manual { background: #f1f5f9; color: #64748b; }
.crm-srcbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.crm-srcbar > span { font-size: 11px; color: #64748b; }
.crm-srcbar select {
  border: 1px solid #cbd5e1; border-radius: 8px; padding: 5px 9px; font-size: 12px;
  color: #0f172a; background: #fff;
}

/* v257 — panel ke andar ke courier */
.crm-int-cour { margin: 10px 0; }
.crm-int-cour-l { font-size: 11px; color: #64748b; display: block; margin-bottom: 5px; }
.crm-int-cour > div { display: flex; flex-wrap: wrap; gap: 5px; }
.crm-int-pill {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; background: #f1f5f9; color: #475569;
}
.crm-int-pill.mine { background: #eef2ff; color: #3730a3; }
.crm-int-pill-x {
  border: none; background: none; color: #6366f1; cursor: pointer; font-size: 13px;
  line-height: 1; padding: 0 0 0 2px;
}
.crm-int-pill-x:hover { color: #b91c1c; }
.crm-int-cour-add { display: flex; gap: 7px; margin-top: 8px; }
.crm-int-cour-add input {
  flex: 1 1 auto; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 6px 10px; font-size: 12px;
}

/* v257 — "kaun si jagah sach me kaam kar rahi hai" */
.crm-q {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px 16px;
  margin-top: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.crm-q-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.crm-q-head h3 { font-size: 13px; font-weight: 700; color: #0f172a; margin: 0; flex: 1 1 auto; }
.crm-q-tot { font-size: 11px; color: #94a3b8; }

.crm-q-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px;
  cursor: pointer; border-bottom: 1px solid #f1f5f9;
}
.crm-q-row:hover { background: #f8fafc; }
.crm-q-row.open { background: #eef2ff; border-bottom-color: transparent; }
.crm-q-name {
  flex: 1 1 130px; min-width: 0; font-size: 12px; font-weight: 600; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crm-q-n {
  flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #0f172a; text-align: right;
  min-width: 46px; line-height: 1.15;
}
.crm-q-n em {
  display: block; font-style: normal; font-weight: 500; font-size: 9px; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .03em;
}
.crm-q-n.good { color: #15803d; }
.crm-q-n.bad { color: #b91c1c; }
.crm-q-mix {
  flex: 0 0 92px; height: 7px; border-radius: 4px; overflow: hidden; display: flex;
  background: #f1f5f9;
}
.crm-q-mix i { display: block; height: 100%; }
.crm-q-mix i.d { background: #16a34a; }
.crm-q-mix i.p { background: #cbd5e1; }
.crm-q-mix i.r { background: #dc2626; }
.crm-q-car { flex: 0 0 14px; text-align: center; color: #94a3b8; font-size: 13px; font-weight: 700; }

.crm-q-detail {
  padding: 8px 10px 12px; background: #eef2ff; border-radius: 0 0 8px 8px; margin-bottom: 4px;
  display: flex; flex-direction: column; gap: 6px;
}
.crm-q-detail > div { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.crm-q-dl {
  font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 700; min-width: 44px;
}
.crm-q-chip {
  font-size: 11px; background: #fff; border: 1px solid #c7d2fe; border-radius: 999px;
  padding: 2px 8px; color: #3730a3; display: inline-flex; gap: 5px; align-items: center;
}
.crm-q-chip b { color: #1e1b4b; }
.crm-q-chip.rest { border-style: dashed; color: #64748b; background: transparent; }
.crm-src-legend i.q1 { background: #16a34a; }
.crm-src-legend i.q2 { background: #cbd5e1; margin-left: 8px; }
.crm-src-legend i.q3 { background: #dc2626; margin-left: 8px; }

@media (max-width: 760px) {
  .crm-q-mix { display: none; }
  .crm-q-name { flex-basis: 100%; }
  .crm-q-row { flex-wrap: wrap; }
}


/* ==============================================================================================
   v258 — teeno integration tab, ek hi roop
   ============================================================================================== */
.crm-int-head { margin-bottom: 16px; }
.crm-int-steps-top {
  display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 10px 0 0;
}
.crm-int-steps-top li {
  flex: 1 1 190px; display: flex; gap: 7px; align-items: flex-start; font-size: 11px;
  color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px;
}
.crm-int-steps-top b {
  flex: 0 0 18px; height: 18px; border-radius: 50%; background: #0f172a; color: #fff;
  font-size: 10px; display: flex; align-items: center; justify-content: center;
}
.crm-int-rule {
  font-size: 11px; color: #7c2d12; background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: 10px; padding: 8px 11px; margin: 10px 0 0; line-height: 1.6;
}

.crm-int-card-wide { background: #f8fafc; }
.crm-int-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }

/* ----------------------------------------------------------------------------------------------
   v261 — khaane ki line seedhi
   ----------------------------------------------------------------------------------------------
   Atish (tasveer ke saath): "isme fild upar nich hai isko aling karo sahi se".

   Do baatein theek ki gayi hain:

   1. Grid ki har cheez UPAR se shuru ho (`align-items: start`). Pehle cell apni poori unchai me
      khinch jata tha, isliye chhota tick beech me tair kar dikhta tha.
   2. Tick wale khaane ab apni alag patti me hain (`.crm-int-grid-ticks`) - screen me unka roop
      hi alag hai (naam bagal me, upar nahi), isliye unhe likhne wale khaanon ke saath ek hi line
      me rakhna hamesha tedha dikhta tha.
   --------------------------------------------------------------------------------------------- */
.crm-int-grid { align-items: start; }
.crm-int-grid-ticks {
  gap: 8px 14px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 10px;
}
/* Tick ki apni line: dabba upar se tika rahe, aur naam/help uske bagal me sidhe niche. */
.crm-int-f-bool {
  flex-direction: row; align-items: flex-start; gap: 8px;
  flex-wrap: wrap; min-height: 24px; padding: 3px 0;
}
.crm-int-f-bool input { width: auto; flex: 0 0 auto; margin-top: 2px; }
.crm-int-f-bool > span { font-size: var(--f-lg); color: #0f172a; flex: 1 1 0; min-width: 0; }
/* Help poori chaudai me, tick ke neeche — bagal me thus kar do lafz me nahi tootni chahiye. */
.crm-int-f-bool .crm-int-f-help { flex: 1 1 100%; margin-left: 24px; margin-top: 0; }
.crm-int-f-inline { flex-direction: row; align-items: center; gap: 8px; }
.crm-int-f-inline input { width: 90px; }

.crm-int-sw-wrap { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.crm-int-sw-wrap b { font-size: 12px; color: #334155; font-weight: 500; }

.crm-int-copy-l em { display: block; font-style: normal; font-size: 10px; color: #94a3b8; }

/* ---- lambit badlav ki patti ---- */
.crm-int-pend {
  position: sticky; bottom: 0; z-index: 30; margin-top: 18px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  background: #0f172a; color: #e2e8f0; border-radius: 14px; padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .28);
}
.crm-int-pend.coded { background: #064e3b; }
.crm-int-pend-l { flex: 1 1 260px; min-width: 0; }
.crm-int-pend-l > b { font-size: 12px; color: #fff; }
.crm-int-pend ul { list-style: none; margin: 5px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.crm-int-pend li {
  font-size: 10px; background: rgba(255, 255, 255, .12); border-radius: 999px;
  padding: 2px 4px 2px 9px; display: inline-flex; align-items: center; gap: 3px;
}
.crm-int-pend .crm-int-link { color: #fca5a5; }
.crm-int-pend .crm-int-msg.ok { color: #a7f3d0; margin-top: 6px; }
.crm-int-codebox { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crm-int-codebox > span { font-size: 11px; color: #d1fae5; }
.crm-int-codebox .crm-int-code { width: 110px; }

/* ---- kram ---- */
.crm-int-ord { display: flex; flex-direction: column; gap: 8px; }
.crm-int-ord-row { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 9px 11px; }
.crm-int-ord-head { display: flex; align-items: center; gap: 9px; }
.crm-int-ord-n {
  flex: 0 0 20px; height: 20px; border-radius: 50%; background: #4f46e5; color: #fff;
  font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.crm-int-ord-name { flex: 1 1 auto; font-size: 12px; font-weight: 600; color: #0f172a; }
.crm-int-off { font-style: normal; font-weight: 400; color: #94a3b8; font-size: 11px; }
.crm-int-ord-up {
  border: 1px solid #cbd5e1; background: #fff; border-radius: 7px; font-size: 11px;
  padding: 3px 8px; cursor: pointer; color: #334155;
}
.crm-int-ord-up:disabled { opacity: .35; cursor: not-allowed; }
.crm-int-ord-cs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; padding-left: 29px; }
.crm-int-ord-c {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; background: #f1f5f9;
  border-radius: 999px; padding: 2px 4px 2px 4px; color: #334155;
}
.crm-int-ord-c b {
  width: 16px; height: 16px; border-radius: 50%; background: #cbd5e1; color: #0f172a;
  font-size: 9px; display: inline-flex; align-items: center; justify-content: center;
}
.crm-int-ord-c .crm-int-ord-up { padding: 1px 5px; font-size: 10px; }

/* ---- logo ---- */
.crm-int-logos { display: flex; flex-direction: column; gap: 7px; }
.crm-int-logo { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #475569; }
.crm-int-logo > span { flex: 0 0 100px; font-weight: 600; color: #0f172a; }
.crm-int-logo img { height: 22px; width: auto; border: 1px solid #e2e8f0; border-radius: 4px; }
.crm-int-logo em { color: #94a3b8; font-style: normal; }
.crm-int-logo input[type="file"] { font-size: 10px; max-width: 190px; }

/* ---- device / niyam / template ---- */
.crm-int-devs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 10px 0; }
.crm-int-dev { border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.crm-int-dev h4 { font-size: 11px; margin: 0; color: #4f46e5; font-weight: 700; }
.crm-int-rules td { vertical-align: middle; }
.crm-int-num { width: 66px; border: 1px solid #cbd5e1; border-radius: 7px; padding: 4px 7px; font-size: 12px; }
.crm-int-newrule { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.crm-int-newrule select {
  border: 1px solid #cbd5e1; border-radius: 8px; padding: 5px 9px; font-size: 12px; background: #fff;
}
.crm-int-tplrow td { background: #f8fafc; }
.crm-int-tpls { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; }
.crm-int-tpl { display: flex; gap: 9px; align-items: flex-start; }
.crm-int-tpl-n {
  flex: 0 0 20px; height: 20px; border-radius: 50%; background: #e2e8f0; color: #475569;
  font-size: 10px; display: flex; align-items: center; justify-content: center; margin-top: 4px;
}
.crm-int-tpl textarea {
  flex: 1 1 auto; border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px 9px;
  font-size: 12px; font-family: inherit; line-height: 1.5; resize: vertical;
}
.crm-int-tpl > div { display: flex; flex-direction: column; gap: 4px; }
.crm-int-rules select {
  border: 1px solid #cbd5e1; border-radius: 7px; padding: 4px 7px; font-size: 11px; background: #fff;
}

@media (max-width: 860px) {
  .crm-int-pend { flex-direction: column; align-items: stretch; }
  .crm-int-ord-cs { padding-left: 0; }
  .crm-int-logo { flex-wrap: wrap; }
}

/* v258 — dashboard ke neeche ka hisaab (roop baaki chart jaisa) */
.crm-ls { display: block; margin-top: 20px; }
.crm-ls-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.crm-ls-top h3 { font-size: 14px; font-weight: 700; color: #0f172a; margin: 0; flex: 1 1 auto; }
.crm-ls-chips { display: flex; gap: 4px; }
.crm-ls-chip {
  font-size: 11px; padding: 4px 11px; border-radius: 999px; cursor: pointer; font-weight: 600;
  border: 1px solid #e2e8f0; background: #fff; color: #475569;
}
.crm-ls-chip.on { background: #0f172a; border-color: #0f172a; color: #fff; }
.crm-ls-chip:hover:not(.on) { background: #f1f5f9; }
.crm-ls-note { font-size: 11px; color: #94a3b8; margin: 0 0 8px; }

.crm-ls-card {
  background: #fff; border: 1px solid #f1f5f9; border-radius: 12px; padding: 16px 18px;
  margin-bottom: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.crm-ls-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.crm-ls-h b { font-size: 13px; color: #334155; font-weight: 600; flex: 1 1 auto; }
.crm-ls-leg { font-size: 10px; color: #94a3b8; display: inline-flex; align-items: center; gap: 4px; }
.crm-ls-leg i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-left: 6px; }
.crm-ls-leg i.d { background: #16a34a; }
.crm-ls-leg i.p { background: #fbbf24; }
.crm-ls-leg i.r { background: #dc2626; }
.crm-ls-leg i.l { background: #e2e8f0; }
.crm-ls-sel {
  border: 1px solid #cbd5e1; border-radius: 8px; padding: 4px 9px; font-size: 12px; background: #fff;
}

.crm-ls-svg { width: 100%; height: auto; display: block; }
.crm-ls-grid { stroke: #f1f5f9; stroke-width: 1; }
.crm-ls-axis { stroke: #e2e8f0; stroke-width: 1; }
.crm-ls-ax { font-size: 9px; fill: #94a3b8; }
.crm-ls-lb { font-size: 9px; fill: #475569; }
.crm-ls-sub { font-size: 8px; fill: #94a3b8; }
.crm-ls-val { font-size: 10px; fill: #0f172a; font-weight: 700; }
.crm-ls-b { transition: opacity .12s; }
.crm-ls-b:hover { opacity: .82; }
.crm-ls-b-d { fill: #16a34a; }
.crm-ls-b-p { fill: #fbbf24; }
.crm-ls-b-r { fill: #dc2626; }
.crm-ls-b-l { fill: #e2e8f0; }

.crm-ls-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.crm-ls-tbl th {
  text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
  color: #94a3b8; padding: 6px 8px; border-bottom: 1px solid #e2e8f0; font-weight: 700;
}
.crm-ls-tbl th:not(:first-child), .crm-ls-tbl td.n { text-align: right; }
.crm-ls-tbl td { padding: 7px 8px; border-bottom: 1px solid #f8fafc; color: #334155; }
.crm-ls-tbl td.b { font-weight: 700; color: #0f172a; }
.crm-ls-tbl td.good { color: #15803d; }
.crm-ls-tbl td.bad { color: #b91c1c; }
.crm-ls-empty { font-size: 12px; color: #94a3b8; text-align: center; padding: 10px; }

@media (max-width: 640px) {
  .crm-ls-tbl { font-size: 11px; }
  .crm-ls-tbl th, .crm-ls-tbl td { padding: 5px 4px; }
}


/* ==============================================================================================
   v259 — TEXT BADA, SPACING SAAF, CARD SAATH-SAATH
   ================================================

   Atish: "text size bhi chota hai... sab systematic banao."

   Pehle sab kuch 10-12px par tha - jaanch ke liye theek, roz kaam karne ke liye nahi. Ab base
   13px, label 12px, chhota se chhota 11px. Aur har jagah ek hi paimana, taaki ek tab doosre se
   alag na lage.

   Ye sabse NEECHE hai, isliye upar wali purani line ko dabata hai - purani line mitayi nahi gayi,
   taaki kabhi wapas jaana ho to ek file hata kar kaam ho jaye.
   ============================================================================================== */

/* ---- naap ka paimana: ek jagah, taaki har tab ek jaisa lage ---- */
.crm-int, .crm-hl {
  --f-sm: 11px;      /* sabse chhota - sirf ishare ke liye */
  --f-md: 12px;      /* label, note */
  --f-lg: 13px;      /* khaane ki value, table, button */
  --f-xl: 15px;      /* card ka naam */
  --gap: 14px;
  max-width: 1180px;
  font-size: var(--f-lg);
}

.crm-int-head h2 { font-size: 22px; letter-spacing: -.01em; }
.crm-int-head p { font-size: var(--f-lg); max-width: 720px; line-height: 1.65; }

.crm-int-steps-top li { font-size: var(--f-md); padding: 10px 12px; line-height: 1.5; }
.crm-int-steps-top b { width: 20px; height: 20px; font-size: var(--f-sm); }
.crm-int-rule { font-size: var(--f-md); padding: 10px 13px; }

.crm-int-card { padding: 18px 20px; margin-bottom: var(--gap); border-radius: 14px; }
.crm-int-card h3 { font-size: var(--f-xl); }
.crm-int-note { font-size: var(--f-md); line-height: 1.65; margin: 6px 0 12px; }
.crm-int-note code { font-size: var(--f-md); }
.crm-int-empty { font-size: var(--f-md); padding: 12px 0; }

/* ---- khaane ---- */
.crm-int-grid { gap: 14px 18px; }
.crm-int-f > span { font-size: var(--f-md); margin-bottom: 2px; }
.crm-int-f input, .crm-int-f select, .crm-int-f textarea {
  font-size: var(--f-lg); padding: 9px 11px; border-radius: 9px; font-family: inherit;
}
.crm-int-f textarea { min-height: 70px; resize: vertical; line-height: 1.55; }
.crm-int-f-help { font-size: var(--f-sm); color: #94a3b8; margin-top: 3px; display: block; }
.crm-int-set { font-size: var(--f-sm); }

/* ---- button ---- */
.crm-int-btn { font-size: var(--f-lg); padding: 8px 15px; border-radius: 9px; }
.crm-int-link { font-size: var(--f-md); }
.crm-int-msg { font-size: var(--f-md); }
.crm-int-badge { font-size: 10px; padding: 4px 9px; }

/* ---- table ---- */
.crm-int-tbl { font-size: var(--f-lg); }
.crm-int-tbl th { font-size: 10px; padding: 8px 10px; }
.crm-int-tbl td { padding: 10px; }
.crm-int-sub { font-size: var(--f-sm); }

/* ---- copy wale pate ---- */
.crm-int-copy-l { font-size: var(--f-md); min-width: 210px; }
.crm-int-copy code { font-size: var(--f-md); padding: 7px 10px; }
.crm-int-copy-b { font-size: var(--f-md); padding: 6px 12px; }

/* ---- payload ka dabba ---- */
.crm-int-pay {
  margin: 12px 0; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc;
  padding: 10px 13px;
}
.crm-int-pay summary {
  font-size: var(--f-md); font-weight: 700; color: #4f46e5; cursor: pointer; list-style: none;
}
.crm-int-pay summary::before { content: '▸ '; }
.crm-int-pay[open] summary::before { content: '▾ '; }
.crm-int-pay pre {
  background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 12px 14px; overflow-x: auto;
  font-size: var(--f-md); line-height: 1.6; margin: 10px 0;
}
.crm-int-pay code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---- lambit badlav ki patti ---- */
.crm-int-pend { padding: 14px 18px; border-radius: 14px; }
.crm-int-pend-l > b { font-size: var(--f-lg); }
.crm-int-pend li { font-size: var(--f-sm); padding: 3px 5px 3px 10px; }
.crm-int-code { font-size: 17px; padding: 8px 12px; }
.crm-int-codebox > span { font-size: var(--f-md); }

/* ---- kram ---- */
.crm-int-ord-row { padding: 12px 14px; }
.crm-int-ord-name { font-size: var(--f-lg); }
.crm-int-ord-n { width: 24px; height: 24px; font-size: var(--f-md); }
.crm-int-ord-up { font-size: var(--f-md); padding: 5px 10px; }
.crm-int-ord-c { font-size: var(--f-md); }
.crm-int-ord-c b { width: 18px; height: 18px; font-size: 10px; }

/* ---- pill ---- */
.crm-int-pill { font-size: var(--f-md); padding: 4px 11px; }
.crm-int-pill.warn { background: #fef2f2; color: #b91c1c; }
.crm-int-permcell { max-width: 620px; }
.crm-int-permcell .crm-int-pill { margin: 0 4px 4px 0; display: inline-flex; }

/* ---- darwaze / device / message ---- */
.crm-int-chan { padding: 12px 14px; }
.crm-int-chan-name { font-size: var(--f-lg); padding: 6px 11px; width: 140px; }
.crm-int-chan-tag, .crm-int-chan-n { font-size: var(--f-sm); }
.crm-int-dev { padding: 13px; }
.crm-int-dev h4 { font-size: var(--f-md); }
.crm-int-tpl textarea { font-size: var(--f-lg); padding: 9px 11px; }
.crm-int-num { font-size: var(--f-lg); padding: 6px 9px; width: 76px; }
.crm-int-stats { font-size: var(--f-md); gap: 18px; }
.crm-int-logo { font-size: var(--f-md); }
.crm-int-logo > span { font-size: var(--f-lg); }

/* ==============================================================================================
   "Sab theek chal raha hai?"
   ============================================================================================== */
.crm-hl-top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px;
  padding: 12px 16px; border-radius: 12px; font-size: var(--f-lg);
}
.crm-hl-top.ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.crm-hl-top.bad { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
.crm-hl-top b { flex: 1 1 auto; font-size: var(--f-xl); }

.crm-hl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }

.crm-hl-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 2px;
  border-bottom: 1px solid #f8fafc; flex-wrap: wrap;
}
.crm-hl-row:last-child { border-bottom: none; }
.crm-hl-dot { flex: 0 0 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.crm-hl-row.ok .crm-hl-dot { background: #16a34a; }
.crm-hl-row.bad .crm-hl-dot, .crm-hl-row.down .crm-hl-dot { background: #dc2626; }
.crm-hl-row.wait .crm-hl-dot { background: #f59e0b; }
.crm-hl-row.off .crm-hl-dot { background: #cbd5e1; }
.crm-hl-name { flex: 0 0 auto; font-size: var(--f-lg); font-weight: 600; color: #0f172a; }
.crm-hl-badge {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: #f1f5f9; color: #64748b; text-transform: uppercase; letter-spacing: .03em;
}
.crm-hl-row.ok .crm-hl-badge { background: #dcfce7; color: #166534; }
.crm-hl-row.bad .crm-hl-badge, .crm-hl-row.down .crm-hl-badge { background: #fee2e2; color: #b91c1c; }
.crm-hl-row.wait .crm-hl-badge { background: #fef3c7; color: #92400e; }
.crm-hl-detail { flex: 1 1 100%; font-size: var(--f-md); color: #64748b; line-height: 1.55; }

/* ==============================================================================================
   Dashboard — do-do card ek line me
   ============================================================================================== */
/* v261: `max-width: 1180px` hata diya.
   Atish: "3 box pura set hona chahiye computer screen par jo ki abhi half jagah bacha hai".
   Wajah yahi ek line thi - baaki poora dashboard screen ki poori chaudai leta hai, par ye hissa
   1180px par ruk jata tha. Badi screen par uske aage aadhi screen khali padi rehti thi aur teen
   box thuse hue dikhte the. Ab ye bhi upar wale card jitna hi chaura hai. */
.crm-ls { --gap: 14px; width: 100%; }
.crm-ls-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.crm-ls-two > .crm-ls-card { margin-bottom: var(--gap); }
.crm-ls-top h3 { font-size: 16px; }
.crm-ls-h b { font-size: 13px; }
.crm-ls-leg { display: block; margin: -4px 0 8px; }
.crm-ls-tbl { font-size: 12px; }
.crm-ls-tbl th { font-size: 10px; padding: 7px 8px; }
.crm-ls-tbl td { padding: 8px; }
.crm-ls-chip { font-size: 12px; padding: 5px 13px; }

@media (max-width: 1000px) {
  /* Chhoti screen par bagal-bagal rakhna ulta padta hai - chart nichud kar bekaar ho jata hai. */
  .crm-hl-grid, .crm-ls-two { grid-template-columns: 1fr; }
}

/* Lamba text (pata, IP list, payload) - poori chaudai */
.crm-int-f-wide { grid-column: 1 / -1; }
.crm-int-f-wide textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.6;
}

/* ==============================================================================================
   v260 — Dashboard: ek line me TEEN box, fix unchai, andar scroll
   ==============================================================================================
   Atish ne apne purane chart ki tasveer bhej kar kaha: "ek line me 2 box hain, scrollable, proper
   size — tum bhi aisa hi banao, ek line me 3 hone chahiye."
   ============================================================================================== */
.crm-ls-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start;
}
.crm-ls-box {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04); display: flex; flex-direction: column;
  /* Fix unchai — isi se panna kitna bhi data ho utna hi lamba rehta hai.
     v261: 278 se 300 — poori chaudai milne ke baad chart ko itni jagah chahiye thi. */
  height: 300px;
}
.crm-ls-box > header {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; flex: 0 0 auto;
  padding: 10px 14px; border-bottom: 1px solid #f1f5f9; background: #fafbfc;
}
.crm-ls-box > header b { font-size: 12px; color: #0f172a; font-weight: 700; }
.crm-ls-sub2 { font-size: 10px; color: #94a3b8; }
.crm-ls-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: auto; padding: 10px 14px 12px; }
/* Patli, halki scrollbar - warna teen box me teen moti patti bahut bhaddi lagti hai */
.crm-ls-scroll::-webkit-scrollbar { width: 7px; height: 7px; }
.crm-ls-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.crm-ls-scroll::-webkit-scrollbar-track { background: transparent; }

/* v261 — chart box ki poori chaudai bhare, safed jagah na chhode.
   Atish: "aapne jo chart graf jo bhi banaya hai whit ki wajah se dikh bhi nhi rha".

   `width: 100%` (upar wale niyam se) ka matlab hai chart box jitna hi chauda - na kam, na zyada.
   `min-width: 560px` sirf CHHOTI screen ke liye hai: jab box 560 se patla ho jaye to chart
   nichudne ke bajaye bagal me scroll ho - wahi bartav jo Atish ke purane chart me hai
   ("horigental and vertical dono scrool karte hai"). */
.crm-ls-box .crm-ls-svg { min-width: 560px; }
.crm-ls-box .crm-ls-tbl { font-size: 11px; }
.crm-ls-box .crm-ls-tbl th { font-size: 9px; padding: 5px 6px; position: sticky; top: -10px; background: #fff; }
.crm-ls-box .crm-ls-tbl td { padding: 6px; }
.crm-ls-box .crm-ls-sel { font-size: 11px; padding: 3px 7px; }

@media (max-width: 1240px) { .crm-ls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .crm-ls-grid { grid-template-columns: 1fr; } .crm-ls-box { height: 260px; } }

/* ==============================================================================================
   v260 — "abhi kya chal raha hai" har khaane ke neeche
   ============================================================================================== */
.crm-int-now { display: block; font-style: normal; font-size: 11px; margin-top: 4px; }
.crm-int-now.on { color: #15803d; }
.crm-int-now.on b { color: #0f172a; }
.crm-int-now.def { color: #b45309; }
.crm-int-now.def b { color: #92400e; }
.crm-int-now.def span { color: #a16207; }
.crm-int-now.off { color: #94a3b8; }
.crm-int-eye {
  border: 1px solid #cbd5e1; background: #fff; border-radius: 6px; font-size: 10px;
  padding: 2px 7px; cursor: pointer; color: #4f46e5; margin-left: 5px; font-weight: 600;
}
.crm-int-eye:hover { background: #eef2ff; }
.crm-int-secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  background: #0f172a; color: #a7f3d0; padding: 3px 8px; border-radius: 5px;
  word-break: break-all; display: inline-block;
}
.crm-int-defmark {
  font-style: normal; font-size: 9px; background: #fef3c7; color: #92400e; padding: 1px 6px;
  border-radius: 999px; margin-left: 6px; font-weight: 700;
}

/* Har hisse ke upar: kya on hai, kya off */
.crm-int-state { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 12px; }
.crm-int-st { font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 600; }
.crm-int-st.on { background: #dcfce7; color: #166534; }
.crm-int-st.off { background: #f1f5f9; color: #94a3b8; }

/* Payload ka poora kaagaz */
.crm-int-spec { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.crm-int-tips { margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: #64748b; line-height: 1.7; }
.crm-int-legacy {
  margin: 12px 0; padding: 12px 14px; border: 1px dashed #cbd5e1; border-radius: 10px;
  background: #f8fafc;
}
.crm-int-legacy > b { font-size: 12px; color: #0f172a; }
.crm-int-num-cell { text-align: right; font-weight: 700; }

/* ==============================================================================================
   v261 — Lead Share (%): agent ke naam ke saamne hi hissa
   ==============================================================================================
   Atish: "pahle leads k liye proper agent ke nam aate the, ye bhi dikhta tha agent login hai ya
   nhi — ab aapne code jaisa kar diya, isko pahle jaisa banao."
   ============================================================================================== */
.crm-int-tblwrap { max-height: 340px; overflow-y: auto; overflow-x: auto; margin-top: 8px; }
.crm-int-tblwrap::-webkit-scrollbar { width: 7px; height: 7px; }
.crm-int-tblwrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.crm-int-share th { position: sticky; top: 0; background: #f8fafc; z-index: 1; }
.crm-int-share td { vertical-align: middle; }
.crm-int-share .crm-int-sub { display: block; font-size: 10px; color: #94a3b8; margin-top: 2px; }

/* % ka khaana — chhota, seedha naam ke saamne */
.crm-int-pct { display: inline-flex; align-items: center; gap: 4px; }
.crm-int-pct input {
  width: 68px; text-align: right;
  border: 1px solid #cbd5e1; border-radius: 8px; padding: 5px 8px;
  font-size: 12px; color: #0f172a; background: #fff;
}
.crm-int-pct input:focus {
  outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}
.crm-int-pct i { font-style: normal; font-size: 11px; color: #94a3b8; }

.crm-int-sharesum { font-size: 12px; color: #64748b; margin-right: auto; }
.crm-int-sharesum b { color: #0f172a; }
/* Jod 100 se upar chala jaye to abhi hi dikh jaye — save ke baad nahi */
.crm-int-sharesum b.crm-int-over { color: #b91c1c; }

/* ==============================================================================================
   v262 — Dashboard bottom analytics: readable light + true dark mode
   ============================================================================================== */
.crm-ls { --ls-bg:#ffffff; --ls-head:#f8fafc; --ls-border:#dbe4ee; --ls-text:#0f172a; --ls-muted:#64748b; --ls-grid:#e9eef5; }
.crm-ls-top { margin-bottom:12px; }
.crm-ls-top h3 { font-size:15px; letter-spacing:-.01em; color:var(--ls-text); }
.crm-ls-note { color:var(--ls-muted); }
.crm-ls-chip { background:var(--ls-bg); border-color:var(--ls-border); color:#475569; }
.crm-ls-chip.on { background:#0f766e; border-color:#0f766e; color:#fff; box-shadow:0 3px 10px rgba(15,118,110,.18); }
.crm-ls-chip:hover:not(.on) { background:#f1f5f9; }
.crm-ls-grid { gap:16px; }
.crm-ls-box {
  position:relative; height:316px; background:var(--ls-bg); border-color:var(--ls-border);
  border-radius:14px; box-shadow:0 4px 18px rgba(15,23,42,.055);
}
.crm-ls-box::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:2; background:#94a3b8; }
.crm-ls-funnel::before { background:#3b82f6; }
.crm-ls-quality::before { background:#10b981; }
.crm-ls-table::before { background:#8b5cf6; }
.crm-ls-state::before { background:#0ea5e9; }
.crm-ls-wa::before { background:#22c55e; }
.crm-ls-summary::before { background:#f59e0b; }
.crm-ls-box > header { padding:12px 14px 10px; background:var(--ls-head); border-bottom-color:var(--ls-border); align-items:center; }
.crm-ls-box > header b { color:var(--ls-text); font-size:12.5px; }
.crm-ls-sub2 { color:var(--ls-muted); }
.crm-ls-scroll { padding:11px 14px 13px; scrollbar-gutter:stable; }
.crm-ls-scroll::-webkit-scrollbar-thumb { background:#b7c3d1; }
.crm-ls-box .crm-ls-tbl th { top:-11px; z-index:1; background:var(--ls-bg); color:var(--ls-muted); border-bottom-color:var(--ls-border); }
.crm-ls-tbl td { color:#334155; border-bottom-color:#edf2f7; }
.crm-ls-tbl tbody tr:hover td { background:rgba(59,130,246,.035); }
.crm-ls-tbl td.b { color:var(--ls-text); }
.crm-ls-tbl td.good { color:#15803d; }
.crm-ls-tbl td.bad { color:#dc2626; }
.crm-ls-tbl td.warn { color:#b45309; }
.crm-ls-sel { background:var(--ls-bg); color:var(--ls-text); border-color:var(--ls-border); }
.crm-ls-grid { stroke:var(--ls-grid); }
.crm-ls-axis { stroke:#cfd8e3; }
.crm-ls-ax,.crm-ls-sub { fill:#94a3b8; }
.crm-ls-lb { fill:#475569; font-weight:600; }
.crm-ls-val { fill:var(--ls-text); }
.crm-ls-b-l { fill:#d8e1eb; }

.crm-ls-kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; min-width:300px; }
.crm-ls-kpi { border:1px solid var(--ls-border); border-radius:11px; padding:10px 11px; background:var(--ls-head); min-height:79px; display:flex; flex-direction:column; justify-content:center; }
.crm-ls-kpi span { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.045em; color:var(--ls-muted); }
.crm-ls-kpi b { margin-top:2px; font-size:20px; line-height:1.1; color:var(--ls-text); font-variant-numeric:tabular-nums; }
.crm-ls-kpi small { margin-top:4px; font-size:9.5px; color:var(--ls-muted); }
.crm-ls-kpi.blue { border-left:3px solid #3b82f6; }
.crm-ls-kpi.violet { border-left:3px solid #8b5cf6; }
.crm-ls-kpi.green { border-left:3px solid #10b981; }
.crm-ls-kpi.amber { border-left:3px solid #f59e0b; }
.crm-ls-kpi.red { border-left:3px solid #ef4444; }

html.dark .crm-ls { --ls-bg:#0f172a; --ls-head:#111c2f; --ls-border:#263449; --ls-text:#e5edf7; --ls-muted:#94a3b8; --ls-grid:#223047; }
html.dark .crm-ls-top h3, html.dark .crm-ls-box > header b, html.dark .crm-ls-tbl td.b, html.dark .crm-ls-val { color:var(--ls-text); fill:var(--ls-text); }
html.dark .crm-ls-chip { background:#101a2b; color:#cbd5e1; border-color:#334155; }
html.dark .crm-ls-chip:hover:not(.on) { background:#18243a; }
html.dark .crm-ls-chip.on { background:#0f766e; border-color:#14b8a6; }
html.dark .crm-ls-box { background:var(--ls-bg); border-color:var(--ls-border); box-shadow:0 6px 22px rgba(0,0,0,.22); }
html.dark .crm-ls-box > header { background:var(--ls-head); border-bottom-color:var(--ls-border); }
html.dark .crm-ls-box .crm-ls-tbl th { background:var(--ls-bg); color:#9fb0c5; border-bottom-color:var(--ls-border); }
html.dark .crm-ls-tbl td { color:#cbd5e1; border-bottom-color:#1f2c40; }
html.dark .crm-ls-tbl tbody tr:hover td { background:rgba(59,130,246,.08); }
html.dark .crm-ls-tbl td.good { color:#4ade80; }
html.dark .crm-ls-tbl td.bad { color:#fb7185; }
html.dark .crm-ls-tbl td.warn { color:#fbbf24; }
html.dark .crm-ls-sel { background:#101a2b; color:#e2e8f0; border-color:#334155; }
html.dark .crm-ls-lb { fill:#cbd5e1; }
html.dark .crm-ls-ax, html.dark .crm-ls-sub { fill:#7f90a8; }
html.dark .crm-ls-axis { stroke:#34445b; }
html.dark .crm-ls-b-l { fill:#3a475b; }
html.dark .crm-ls-scroll::-webkit-scrollbar-thumb { background:#41516a; }
html.dark .crm-ls-kpi { background:#111c2f; border-color:#2b3a50; }
html.dark .crm-ls-kpi b { color:#f1f5f9; }

@media (max-width:1240px) { .crm-ls-box { height:306px; } }
@media (max-width:820px) { .crm-ls-box { height:292px; } .crm-ls-kpis { grid-template-columns:1fr 1fr; } }

/* ==============================================================================================
   v263 — Bottom dashboard simplified to 3 cards + website filter on existing State-wise Delivery
   ============================================================================================== */
.crm-v263-analytics-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.crm-v263-analytics-head .crm-v215-analytics-title{margin:0!important}
.crm-v263-site-filter{min-width:150px;max-width:230px;height:30px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#334155;padding:0 28px 0 9px;font-size:11px;font-weight:600;outline:none}
.crm-v263-site-filter:focus{border-color:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.12)}
.dark .crm-v263-site-filter,html.dark .crm-v263-site-filter{background:#101a2b;color:#e2e8f0;border-color:#334155}

.crm-ls-top{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.crm-ls-topsub{margin:3px 0 0;font-size:11px;color:var(--ls-muted)}
.crm-ls-grid.crm-ls-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.crm-ls-grid-3 .crm-ls-box{height:344px}
.crm-ls-grid-3 .crm-ls-scroll{padding-top:10px}
.crm-ls-site-name{display:block;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650;color:var(--ls-text)}

.crm-ls-mini-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:9px;min-width:360px}
.crm-ls-mini{position:relative;min-height:54px;border:1px solid var(--ls-border);border-radius:10px;background:var(--ls-head);padding:7px 8px 7px 10px;overflow:hidden}
.crm-ls-mini:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#94a3b8}
.crm-ls-mini.blue:before{background:#3b82f6}.crm-ls-mini.violet:before{background:#8b5cf6}.crm-ls-mini.green:before{background:#10b981}.crm-ls-mini.red:before{background:#ef4444}.crm-ls-mini.amber:before{background:#f59e0b}
.crm-ls-mini span{display:block;font-size:8.5px;line-height:1.1;text-transform:uppercase;letter-spacing:.045em;font-weight:750;color:var(--ls-muted)}
.crm-ls-mini b{display:inline-block;margin-top:3px;font-size:16px;line-height:1;font-weight:800;color:var(--ls-text);font-variant-numeric:tabular-nums}
.crm-ls-mini small{margin-left:5px;font-size:8.5px;color:var(--ls-muted)}
.crm-ls-wa-kpis{grid-template-columns:repeat(3,minmax(0,1fr));min-width:300px}
.crm-ls-legend{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:0 0 5px;font-size:8.5px;color:var(--ls-muted)}
.crm-ls-legend i{width:7px;height:7px;border-radius:2px;display:inline-block;margin-left:4px}.crm-ls-legend i:first-child{margin-left:0}
.crm-ls-legend .lead{background:#d8e1eb}.crm-ls-legend .order{background:#f59e0b}.crm-ls-legend .del{background:#16a34a}.crm-ls-legend .rto{background:#dc2626}
.crm-ls-performance-table th,.crm-ls-performance-table td{white-space:nowrap}

html.dark .crm-ls-mini{background:#111c2f;border-color:#2b3a50}
html.dark .crm-ls-mini b,html.dark .crm-ls-site-name{color:#f1f5f9}
html.dark .crm-ls-legend .lead{background:#475569}

@media(max-width:1380px){.crm-ls-grid.crm-ls-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.crm-ls-grid-3 .crm-ls-box{height:330px}}
@media(max-width:900px){.crm-v263-analytics-head{align-items:flex-start;flex-direction:column}.crm-v263-site-filter{width:100%;max-width:none}.crm-ls-grid.crm-ls-grid-3{grid-template-columns:1fr}.crm-ls-top{align-items:flex-start;flex-direction:column}.crm-ls-grid-3 .crm-ls-box{height:320px}}

/* ==============================================================================================
   v264 — Website Funnel as number cards + attempted-order delivery denominator
   ============================================================================================== */
.crm-ls-funnel-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:10px}
.crm-ls-funnel-kpis .crm-ls-mini{min-height:60px;padding:9px 10px 8px 12px}
.crm-ls-funnel-kpis .crm-ls-mini span{font-size:9px}
.crm-ls-funnel-kpis .crm-ls-mini b{font-size:18px;margin-top:4px}
.crm-ls-funnel-kpis .crm-ls-mini small{display:block;margin:4px 0 0;font-size:9px;line-height:1.2}
.crm-ls-formula-note{border:1px dashed var(--ls-border);border-radius:10px;background:var(--ls-head);padding:8px 10px;font-size:9.5px;line-height:1.35;color:var(--ls-muted)}
.crm-ls-formula-note b{color:var(--ls-text)}
html.dark .crm-ls-formula-note{background:#111c2f;border-color:#334155;color:#9fb0c5}
html.dark .crm-ls-formula-note b{color:#f1f5f9}
@media(max-width:1380px){.crm-ls-funnel-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ==============================================================================================
   v265 — audit cleanup: consistent dark mode for custom tabs + Excel-style website funnel
   ============================================================================================== */
.crm-ls-funnel-table th,.crm-ls-funnel-table td{white-space:nowrap}
.crm-ls-formula-compact{margin-top:9px;padding:6px 9px;font-size:9px}

/* WhatsApp Automation — full dark theme, including form controls and nested template rows. */
html.dark .crm-wa-head h2,html.dark .crm-wa-card h3,html.dark .crm-wa-dev h4,
html.dark .crm-wa-tplhead span:first-child{color:#f1f5f9}
html.dark .crm-wa-head p,html.dark .crm-wa-note,html.dark .crm-wa-f,html.dark .crm-wa-q,
html.dark .crm-wa-copy-l,html.dark .crm-wa-tplhead{color:#94a3b8}
html.dark .crm-wa-card,html.dark .crm-wa-dev,html.dark .crm-wa-tpl{
  background:#0f172a;border-color:#263449;box-shadow:none;color:#cbd5e1
}
html.dark .crm-wa-f input,html.dark .crm-wa-tbl select,html.dark .crm-wa-num,
html.dark .crm-wa-add select,html.dark .crm-wa-tpl textarea{
  background:#101a2b;color:#e2e8f0;border-color:#334155
}
html.dark .crm-wa-tbl th{color:#9fb0c5;border-bottom-color:#334155}
html.dark .crm-wa-tbl td{color:#cbd5e1;border-bottom-color:#1f2c40}
html.dark .crm-wa-tplrow td{background:#111c2f}
html.dark .crm-wa-note code,html.dark .crm-wa-tpls code,html.dark .crm-wa-copy-v{
  background:#111c2f;color:#cbd5e1;border-color:#334155
}
html.dark .crm-wa-copies{border-top-color:#334155}
html.dark .crm-wa-copy-b{background:#101a2b;color:#e2e8f0;border-color:#334155}
html.dark .crm-wa-copy-b:hover{background:#18243a}
html.dark .crm-wa-sw span::after{background:#e2e8f0}

/* Courier / Website integrations — same palette as the rest of the app in dark mode. */
html.dark .crm-int-head h2,html.dark .crm-int-card h3,html.dark .crm-int-f-bool>span,
html.dark .crm-int-ord-name,html.dark .crm-int-logo>span{color:#f1f5f9}
html.dark .crm-int-head p,html.dark .crm-int-note,html.dark .crm-int-row,
html.dark .crm-int-f>span,html.dark .crm-int-logo,html.dark .crm-int-copy-l em{color:#94a3b8}
html.dark .crm-int-card,html.dark .crm-int-ord-row,html.dark .crm-int-dev{
  background:#0f172a;border-color:#263449;box-shadow:none;color:#cbd5e1
}
html.dark .crm-int-grid-ticks,html.dark .crm-int-step,html.dark .crm-int-tplrow td{
  background:#111c2f;border-color:#263449
}
html.dark .crm-int-step.done{background:#0d2c22;border-color:#166534}
html.dark .crm-int-f input,html.dark .crm-int-num,html.dark .crm-int-newrule select,
html.dark .crm-int-rules select,html.dark .crm-int-tpl textarea,
html.dark .crm-int-ord-up,html.dark .crm-int-btn{
  background:#101a2b;color:#e2e8f0;border-color:#334155
}
html.dark .crm-int-btn:hover:not(:disabled),html.dark .crm-int-ord-up:hover:not(:disabled){background:#18243a}
html.dark .crm-int-btn.primary{background:#059669;border-color:#059669;color:#fff}
html.dark .crm-int-note code,html.dark .crm-int-ord-c{background:#111c2f;color:#cbd5e1}
html.dark .crm-int-ord-c b{background:#334155;color:#e2e8f0}
html.dark .crm-int-sw-wrap b{color:#cbd5e1}
html.dark .crm-int-logo img{border-color:#334155}
html.dark .crm-int-badge.off{background:#1e293b;color:#94a3b8}
html.dark .crm-int-badge.on{background:#0d2c22;color:#86efac}
html.dark .crm-int-badge.pri{background:#172554;color:#93c5fd}

/* Dialer settings / pairing modal — prevent white islands in dark mode. */
html.dark .crm-dp-card{background:#0f172a!important;border-color:#263449!important;color:#e2e8f0!important}
html.dark .crm-dp-card h3,html.dark .crm-dp-fields label{color:#f1f5f9!important}
html.dark .crm-dp-card p,html.dark .crm-dp-small,html.dark .crm-dp-msg{color:#94a3b8!important}
html.dark .crm-dp-fields select,html.dark .crm-dp-fields input{
  background:#101a2b!important;color:#e2e8f0!important;border-color:#334155!important
}
html.dark .crm-dp-note,html.dark .crm-dp-warn-soft{background:#111c2f!important;border-color:#334155!important;color:#cbd5e1!important}
html.dark .crm-dp-none{background:#1e293b;color:#94a3b8}
html.dark .crm-dp-on{background:#0d2c22;color:#86efac}
html.dark .crm-dp-code-btn{background:#0d2c22;border-color:#166534;color:#86efac}
html.dark .crm-dp-off-btn{background:#331018;border-color:#881337;color:#fda4af}

/* Keep native-looking controls readable when browser autofill/theme intervenes. */
html.dark .crm-wa input::placeholder,html.dark .crm-int input::placeholder,html.dark .crm-dp input::placeholder,
html.dark .crm-wa textarea::placeholder,html.dark .crm-int textarea::placeholder{color:#64748b}
html.dark .crm-wa input,html.dark .crm-int input,html.dark .crm-dp input,
html.dark .crm-wa textarea,html.dark .crm-int textarea{color-scheme:dark}

/* =========================================================================================
   CRM v275 — AAKHRI KHAANE PAR BAGAL WALI LIKHAWAT CHHAP RAHI THI
   =========================================================================================

   Atish ne screenshot me ghera lagakar bataya: jab koi agent kisi lead par kaam kar raha ho,
   to Actions wale aakhri khaane par uske bagal wale khaane ki likhawat (ExoClick Site ID ki
   value) chadh kar dikhne lagti hai - do likhawat ek doosre ke upar.

   ---- ASLI WAJAH (andaza nahi - asli browser me naapi gayi) ----

   Actions ka khaana CHIPKA HUA (sticky) khaana hai. React ki apni CSS use daayin kinare par
   pin karti hai, taaki table daayen-bayen khiskane par bhi Actions hamesha saamne rahe:

       table:has(thead.bg-gray-50 th.col-actions) tbody tr > td:last-child {
         position: sticky; right: 0; z-index: 4;
         background-color: var(--surface);      <-- YE JAAN-BOOJH KAR THOS RANG HAI
       }

   Pin kiya hua khaana apne peechhe wale khaane ke UPAR tairta hai - ye uska kaam hi hai. Isi
   liye uska rang THOS hona zaroori hai, warna neeche wali likhawat uske aar-paar se jhaankti
   hai. React ne wo thos rang diya bhi tha.

   Par hamari patch file me v153 ka ye niyam baad me aata hai:

       .crm-lead-board tbody tr:not(.flash-new-lead) > td { background: transparent !important; }

   Wo v153 me sahi wajah se aaya tha (taaki row ka apna rang - Order Place ka green, lock ka
   amber - cell ke peechhe se dikh sake). Par `!important` ke chalte usne CHIPKE HUE khaane ka
   thos rang bhi chheen liya. Naap me saaf dikha:

       aam row   : aakhri cell ka rang = rgb(255,255,255)   (thos - isliye koi dikkat nahi)
       LOCK row  : aakhri cell ka rang = rgba(0,0,0,0)      (paardarshi - YAHI KHARABI)

   Isi liye ye sirf lock/duplicate wali rangeen row par dikhta tha, aur baaki 99% rows par
   nahi - jis wajah se ye itne dinon se pakda nahi gaya.

   Naap ye bhi kehti hai ki Actions ka khaana apne bagal wale par POORE 35px chadha hua tha -
   yaani likhawat "thodi si" nahi, khoobsurti se poora overlap tha.

   ---- ILAAJ ----
   Chipke hue khaane ko wapas THOS rang do - aur wahi rang do jo us ROW ka hai (`inherit`),
   taaki lock ka amber/duplicate ka rose jyon ka tyon dikhta rahe. Ek bhi rang badla nahi
   gaya, sirf paardarshita hatai gayi hai.

   ---- IN `:last-child` KI LAMBI LADI JAAN-BOOJH KAR HAI ----
   Upar wale purane niyam `!important` ke saath aate hain aur unki specificity (0,5,4) hai.
   Unse jeetne ke liye is niyam ko unse zyada specific hona hi padega - warna ye likha to
   rahega par lagega kabhi nahi (aur ye galti chup-chaap nikal jaati). Isliye ginti poori ki
   gayi hai: (0,6,4). Bhadda dikhta hai, par kaam pakka karta hai.
   ========================================================================================= */
html .crm-lead-board  tbody tr > td:last-child:last-child:last-child:last-child:last-child,
html .crm-order-board tbody tr > td:last-child:last-child:last-child:last-child:last-child,
html .ndr-table       tbody tr > td:last-child:last-child:last-child:last-child:last-child{
  background: inherit !important;
  background-clip: padding-box !important;
}

/* Hover ka ishara aakhri khaane par bhi wahi rahe jo baaki khaanon par hai - warna hover
   karte hi ek khaana alag rang ka dikhta. */
html:not(.dark) .crm-lead-board  tbody tr:hover > td:last-child:last-child:last-child:last-child:last-child,
html:not(.dark) .crm-lead-board  tbody tr:focus-within > td:last-child:last-child:last-child:last-child:last-child,
html:not(.dark) .crm-order-board tbody tr:hover > td:last-child:last-child:last-child:last-child:last-child,
html:not(.dark) .crm-order-board tbody tr:focus-within > td:last-child:last-child:last-child:last-child:last-child{
  background: #eaf4f1 !important;
}
html.dark .crm-lead-board  tbody tr:hover > td:last-child:last-child:last-child:last-child:last-child,
html.dark .crm-order-board tbody tr:hover > td:last-child:last-child:last-child:last-child:last-child{
  background: #16261f !important;
}

/* Header ka aakhri khaana pehle se thos tha - use chheda nahi gaya. Par dark/excel me bhi
   thos rahe, iski pakki rok yahan hai. */
html .crm-lead-board  thead th:last-child:last-child:last-child:last-child:last-child,
html .crm-order-board thead th:last-child:last-child:last-child:last-child:last-child,
html .ndr-table       thead th:last-child:last-child:last-child:last-child:last-child{
  background-clip: padding-box !important;
}
html:not(.dark) .crm-lead-board  thead th:last-child:last-child:last-child:last-child:last-child,
html:not(.dark) .crm-order-board thead th:last-child:last-child:last-child:last-child:last-child{
  background-color: #cbd5e1 !important;
}
html.dark .crm-lead-board  thead th:last-child:last-child:last-child:last-child:last-child,
html.dark .crm-order-board thead th:last-child:last-child:last-child:last-child:last-child{
  background-color: #1e293b !important;
}

/* =========================================================================================
   CRM v275 — HAR KHAANE AUR DROPDOWN KI EK HI SHAKAL
   =========================================================================================

   Atish: "pure CRM me jahan-jahan bhi dropdown option ya field box hai, unko proper
   professional shape me rakho. Har jagah same shape rahega to bahut achha lagega... courier
   logo jahan upload karte hain wo field box aur design achhi nahi bani hai, aur lead status
   wala dropdown bhi achha nahi bana hai. Dropdown, field, border colour sab check karke
   professional look dena hai."

   ---- Pehle naapa, phir badla ----
   Sudhaar se pehle 45 khaane ginne par 8 alag-alag shaklein mil rahi thin: 5 alag unchai,
   3 alag gol kone, 4 alag border, 3 alag akshar-naap. Isliye har panna thoda alag dikhta tha.

   ---- Ab do hi naap, jaan-boojh kar ----
   Sab kuch ek hi naap ka kar dena galat hota: table ki row ke andar wala dropdown utna hi bada
   ho jaye jitna poori chaudai wala khaana, to row phool jaayegi. Isliye do naap rakhe hain:

       SAADHARAN  (38px)  — form, settings, filter, modal
       CHHOTA     (30px)  — table ki row ke andar

   ...par gol kone, border ka rang, akshar ka naap aur focus ka ishara DONO me bilkul ek hi
   hai. Isi se "ek jaisa" dikhta hai, chahe naap alag ho.

   ---- Kya NAHI chhua ----
   tick wale dabbe, radio, range, rang chunne wala khaana, aur on/off wale switch - ye sab
   apne aap me alag cheezein hain, inhe khaana bana dena ulta bigaad hota.
   ========================================================================================= */

:root{
  --crm-f-radius: 9px;
  --crm-f-bd: #cbd5e1;
  --crm-f-bd-hover: #94a3b8;
  --crm-f-bd-focus: #10b981;
  --crm-f-ring: rgba(16,185,129,.16);
  --crm-f-bg: #ffffff;
  --crm-f-fg: #0f172a;
  --crm-f-ph: #94a3b8;
  --crm-f-h: 38px;
  --crm-f-h-sm: 30px;
  --crm-f-fs: 13.5px;
  --crm-f-fs-sm: 12.5px;
}
html.dark{
  --crm-f-bd: #334155;
  --crm-f-bd-hover: #475569;
  --crm-f-bd-focus: #34d399;
  --crm-f-ring: rgba(52,211,153,.18);
  --crm-f-bg: #101a2b;
  --crm-f-fg: #e2e8f0;
  --crm-f-ph: #64748b;
}

/* ---- Saadharan khaana ---- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]),
select,
textarea{
  min-height: var(--crm-f-h);
  border-radius: var(--crm-f-radius) !important;
  border: 1px solid var(--crm-f-bd) !important;
  background-color: var(--crm-f-bg);
  color: var(--crm-f-fg);
  font-size: var(--crm-f-fs);
  line-height: 1.25;
  padding: 7px 11px;
  box-shadow: none;
  transition: border-color .14s ease, box-shadow .14s ease;
}
textarea{ min-height: 64px; }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"])::placeholder,
textarea::placeholder{ color: var(--crm-f-ph); }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled){ border-color: var(--crm-f-bd-hover) !important; }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus,
select:focus,
textarea:focus{
  outline: none !important;
  border-color: var(--crm-f-bd-focus) !important;
  box-shadow: 0 0 0 3px var(--crm-f-ring) !important;
}

input:disabled, select:disabled, textarea:disabled{
  background-color: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}
html.dark input:disabled, html.dark select:disabled, html.dark textarea:disabled{
  background-color: #0b1220; color: #64748b;
}

/* ---- Dropdown ka apna teer — har browser me ek jaisa ----
   Native teer har OS par alag dikhta hai; isi se "har jagah alag" wala ehsaas aata tha. */
select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 30px !important;
}
html.dark select{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select[multiple], select[size]:not([size="1"]){
  background-image: none;
  padding-right: 11px !important;
}

/* ---- Table ki row ke andar: wahi shakal, chhota naap ---- */
table td input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
table td select,
table td textarea{
  min-height: var(--crm-f-h-sm);
  font-size: var(--crm-f-fs-sm);
  padding: 4px 9px;
}
table td select{ padding-right: 26px !important; background-position: right 8px center; }

/* ---- Lead/Order ka status wala dropdown ----
   Iska rang status ke hisaab se badalta hai - wo jyon ka tyon hai, kyunki usi se ek nazar me
   pata chalta hai ki lead kis haal me hai. Yahan sirf uski SHAKAL seedhi ki gayi hai: wahi
   gol kone, wahi teer, wahi focus ka ishara jo baaki CRM me hai. */
/* Table ke andar ka status pill v164 me soch-samajh kar 160x26 ka banaya gaya tha, taaki
   "New" aur "RTO Out For Delivery" - dono par column seedh me rahe, aur lock lagi row ka badge
   aur khuli row ka dropdown bilkul ek jaise dikhein. Wo naap yahan JAAN-BOOJH KAR nahi chheda
   gaya: use badalte hi poori status column tedhi ho jaati.

   Atish ki baat ("status wala dropdown achha nahi bana") ke liye do cheezein judi hain -
   chhune par jeevit lagna, aur wahi focus ka ring jo baaki CRM me hai. Naap wahi ka wahi. */
td select.crm-status-select-colored, td select[data-crm-status-color]{ cursor: pointer; }
td select.crm-status-select-colored:hover:not(:disabled),
td select[data-crm-status-color]:hover:not(:disabled){
  filter: brightness(.98);
  box-shadow: 0 1px 3px rgba(15,23,42,.16) !important;
}
td select.crm-status-select-colored:focus,
td select[data-crm-status-color]:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px var(--crm-f-ring), 0 1px 2px rgba(15,23,42,.12) !important;
}

/* ---- File chunne wala khaana (courier ka logo) ----
   Pehle ye browser ka nanga control tha - har browser me alag, aur baaki CRM se bilkul mel
   nahi khata tha. Ab iski bhi wahi shakal hai jo baaki khaanon ki. */
input[type="file"]{
  display: block;
  width: 100%;
  min-height: var(--crm-f-h);
  border: 1px dashed var(--crm-f-bd);
  border-radius: var(--crm-f-radius);
  background: var(--crm-f-bg);
  color: var(--crm-f-fg);
  font-size: var(--crm-f-fs-sm);
  padding: 5px 9px;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
input[type="file"]:hover{ border-color: var(--crm-f-bd-focus); background: #f6fdfa; }
html.dark input[type="file"]:hover{ background: #0d2119; }
input[type="file"]:focus{
  outline: none;
  border-color: var(--crm-f-bd-focus);
  box-shadow: 0 0 0 3px var(--crm-f-ring);
}
input[type="file"]::file-selector-button{
  margin-right: 10px;
  border: 1px solid var(--crm-f-bd);
  border-radius: 7px;
  background: #f8fafc;
  color: #334155;
  font: inherit;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
input[type="file"]::file-selector-button:hover{ background: #eef2f7; border-color: var(--crm-f-bd-hover); }
html.dark input[type="file"]::file-selector-button{
  background: #1e293b; color: #e2e8f0; border-color: #475569;
}

/* Courier ke logo wali kataar — pehle teen cheezein bemel baithi thin. Ab ek saaf line. */
.crm-int-logo{
  display: grid;
  grid-template-columns: 150px 78px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid var(--crm-f-bd);
  border-radius: 11px;
  background: var(--crm-f-bg);
}
.crm-int-logo + .crm-int-logo{ margin-top: 8px; }
.crm-int-logo > span{ font-weight: 700; font-size: 12.5px; color: var(--crm-f-fg); }
.crm-int-logo > em{ font-size: 11.5px; color: var(--crm-f-ph); font-style: normal; }
.crm-int-logo > img{
  max-height: 34px; max-width: 74px; object-fit: contain;
  border: 1px solid var(--crm-f-bd); border-radius: 7px; background: #fff; padding: 3px;
}
@media (max-width: 720px){
  .crm-int-logo{ grid-template-columns: 1fr; gap: 7px; }
}

/* Khaane ke upar ka chhota label - har jagah ek jaisa. */
.crm-int label, .crm-wa label, .crm-dp-fields label{
  font-size: 11.5px; font-weight: 700; color: #475569; letter-spacing: .01em;
}
html.dark .crm-int label, html.dark .crm-wa label, html.dark .crm-dp-fields label{ color: #cbd5e1; }

/* Date/time wale khaane ka apna nishan bhi baaki se mel khaye. */
input[type="date"], input[type="time"], input[type="datetime-local"]{ padding-right: 9px; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{ opacity: .55; cursor: pointer; }
input[type="date"]:hover::-webkit-calendar-picker-indicator{ opacity: .9; }

/* -----------------------------------------------------------------------------------------
   GINTI KI LADAI — kyun ye niyam dobara, aur is baar bhaari
   -----------------------------------------------------------------------------------------
   Upar wala niyam ek hi list me teen selector rakhta hai, aur CSS me list ka HAR selector apni
   ALAG ginti rakhta hai. `input:not(...)...` bhaari tha, par akela `select` sirf (0,0,1). Uske
   muqable purana niyam

       :root:not(.dark) .border-gray-200 { border-color:#c6d1de !important }   -> (0,3,0)

   bhaari pad gaya, aur naap me 14 dropdown purane rang par hi reh gaye. Pehli koshish likhi to
   gayi thi par lagti nahi thi - ye wahi chup-chaap nikal jaane wali galti hai.

   Isliye yahan teeno ko alag-alag, aur poore wazan ke saath likha gaya hai. (Naap se saabit:
   iske baad koi khaana purane rang par nahi bachta.)
   ----------------------------------------------------------------------------------------- */
:root select:not([data-crm-status-color]):not(.crm-status-select-colored),
:root textarea:not([hidden]),
:root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]){
  border-color: var(--crm-f-bd) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: var(--crm-f-radius) !important;
  background-color: var(--crm-f-bg) !important;
  color: var(--crm-f-fg) !important;
  font-size: var(--crm-f-fs) !important;
}
:root select:not([data-crm-status-color]):not(.crm-status-select-colored):hover:not(:disabled),
:root textarea:not([hidden]):hover:not(:disabled),
:root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):hover:not(:disabled){
  border-color: var(--crm-f-bd-hover) !important;
}
:root select:not([data-crm-status-color]):not(.crm-status-select-colored):focus,
:root textarea:not([hidden]):focus,
:root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):focus{
  border-color: var(--crm-f-bd-focus) !important;
  box-shadow: 0 0 0 3px var(--crm-f-ring) !important;
  outline: none !important;
}
/* Table ki row ke andar wahi shakal, sirf naap chhota - warna row phool jaati hai. */
:root table td select:not([data-crm-status-color]):not(.crm-status-select-colored),
:root table td textarea:not([hidden]),
:root table td input:not([type="checkbox"]):not([type="radio"]):not([type="file"]){
  font-size: var(--crm-f-fs-sm) !important;
  min-height: var(--crm-f-h-sm);
}

/* Unchai bhi ek hi — 38px. (Naap se: iske bina 9 dropdown 36px par reh jate the; 2px ka farak
   chhota lagta hai par ek hi line me do dropdown rakhne par turant dikhta hai.)
   Table ki row ke andar wala chhota naap upar wale niyam se aata hai - wo alag hi rehna
   chahiye, warna har row phool jaati. */
:root select:not([data-crm-status-color]):not(.crm-status-select-colored),
:root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]){
  min-height: var(--crm-f-h) !important;
}
:root table td select:not([data-crm-status-color]):not(.crm-status-select-colored),
:root table td input:not([type="checkbox"]):not([type="radio"]):not([type="file"]){
  min-height: var(--crm-f-h-sm) !important;
}

/* CRM v276 — "sirf ek lead dikh rahi hai" wali patti (wajah crm-v276-all.js me likhi hai). */
.crm-onelead{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 9px 13px;
  border: 1px solid #fcd34d; border-left: 4px solid #f59e0b;
  border-radius: 11px; background: #fffbeb; color: #78350f;
  font-size: 12.5px; line-height: 1.35;
}
.crm-onelead-dot{
  width: 8px; height: 8px; border-radius: 999px; background: #f59e0b; flex: 0 0 auto;
}
.crm-onelead-txt{ flex: 1 1 auto; min-width: 0; }
.crm-onelead-txt b{ font-weight: 800; }
.crm-onelead-btn{
  flex: 0 0 auto; cursor: pointer;
  border: 1px solid #d97706; border-radius: 8px;
  background: #f59e0b; color: #fff;
  font: inherit; font-weight: 700; padding: 5px 13px;
  transition: background .14s ease;
}
.crm-onelead-btn:hover{ background: #d97706; }
html.dark .crm-onelead{ background: #2a1f07; border-color: #78350f; border-left-color: #f59e0b; color: #fde68a; }
html.dark .crm-onelead-btn{ background: #b45309; border-color: #92400e; }

/* =================================================================================================
   v282 — CARD KE KONE ME "AAJ" KA AANKDA
   =================================================================================================
   Atish: "har card ke corner me aaj kitni lead assign hui wo dikhana hai... filter lagane par bade
   akshar wali value badle, par corner me aaj wala fix rahe."

   Isliye ye patti card ke upar-daayen kone me baithti hai, chhoti rehti hai, aur bade aankde ke
   raaste me nahi aati (`pointer-events:none` - card khud ek link hai, ye uspar click rokta nahi).
   ================================================================================================= */
.crm-stat { position: relative; }
.crm-stat-corner{
  position:absolute; top:6px; right:8px;
  display:inline-flex; align-items:baseline; gap:4px;
  padding:2px 7px; border-radius:999px;
  background:#f1f5f9; border:1px solid #e2e8f0;
  line-height:1.1; pointer-events:none; white-space:nowrap;
  max-width:calc(100% - 16px); overflow:hidden;
}
.crm-stat-corner b{ font-size:11px; font-weight:700; color:#0f172a; font-variant-numeric:tabular-nums; }
.crm-stat-corner i{ font-size:9px; font-style:normal; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:.03em; }

/* Andhere theme me bhi wahi shakal */
html.dark .crm-stat-corner{ background:rgba(148,163,184,.14); border-color:rgba(148,163,184,.25); }
html.dark .crm-stat-corner b{ color:#e2e8f0; }
html.dark .crm-stat-corner i{ color:#94a3b8; }

/* Chart/table ke andar jo ginti ab click hoti hai - uspar wahi ishaara jo Daily flow me pehle se
   hai (dotted underline), taaki dikhe ki ye click ho sakti hai. */
.crm-num-link{ text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px; cursor:pointer; }
.crm-num-link:hover{ color:#059669; }

/* =========================================================================================
   v289 — DARK MODE ME "CHUNI HUI ROW" KA HIGHLIGHT GAYAB THA

   Atish: "jaise light mode me kisi row par click kiye rehte hain to wo highlight rehti hai ki
           kaun si lead par click kiya — par dark mode me ye kaam nahi kar raha."

   ---- ASLI WAJAH (andaza nahi — asli Chromium me naapi gayi) ----

   Highlight hover/focus par chalta hai. Light mode me uska niyam HAR row par lagta hai:

       html:not(.dark) .crm-lead-board tbody tr:not(.flash-new-lead):hover > td        -> #eaf4f1

   Par dark mode ka wahi niyam sirf un rows par lagta hai jinke paas `data-status-color` hai:

       html.dark:not(.excel-mode) .crm-lead-board tbody tr[data-status-color]:hover > td -> #17342f

   Aur `data-status-color` bundle sirf AAM row par daalta hai. Lock wali, duplicate wali,
   converted wali, abhi-abhi aayi lead — in sab par wo attribute nahi hota. Upar se in rangeen
   rows ke cell ka rang jaan-boojh kar paardarshi rakha gaya hai (taaki row ka apna rang dikhe).
   Natija naap me hubahu ye nikla:

       LIGHT  rangeen row par hover : rgb(255,255,255) -> rgb(234,244,241)   (dikhta hai)
       DARK   rangeen row par hover : rgba(0,0,0,0)    -> rgba(0,0,0,0)      (KUCH NAHI)

   Doosri chhooti hui jagah: Actions ka chipka hua (sticky) aakhri khaana. Uske dark niyam me
   sirf `:hover` likha tha, `:focus-within` nahi — yaani click karke maus hata lene par poori
   row highlight hoti par aakhri khaana alag rang ka reh jata.

   ---- ILAAJ ----
   Dark ko wahi chhoot do jo light ke paas pehle se hai: niyam HAR row par lage, sirf
   `[data-status-color]` wali par nahi. Rang EK BHI NAYA NAHI hai — jo dark hover rang pehle se
   chal rahe the (#17342f normal, emerald .10 Excel, #16261f sticky khaana) wahi istemal hue
   hain. Flash wali row har jagah chhodi gayi hai (uska green flash row par chalta hai, cell par
   koi bhi !important background use rok deta hai — v162 ka wahi niyam).
   ========================================================================================= */

/* Dark normal — lead board: hover/focus ka ishara har row par (rangeen row par bhi). */
html.dark:not(.excel-mode) .crm-lead-board tbody tr:not(.flash-new-lead):hover > td,
html.dark:not(.excel-mode) .crm-lead-board tbody tr:not(.flash-new-lead):focus-within > td {
  background:#17342f !important;
}

/* Dark Excel — lead board: wahi, Excel ka apna halka emerald. */
html.dark.excel-mode .crm-lead-board tbody tr:not(.flash-new-lead):hover > td,
html.dark.excel-mode .crm-lead-board tbody tr:not(.flash-new-lead):focus-within > td {
  background:rgba(16,185,129,.10) !important;
}

/* Dark normal — order board: wahi chhoot (yahan rangeen row kam hoti hain, par niyam ek rahe). */
html.dark:not(.excel-mode) .crm-order-board tbody tr:not(.flash-new-lead):hover > td,
html.dark:not(.excel-mode) .crm-order-board tbody tr:not(.flash-new-lead):focus-within > td {
  background:#17342f !important;
}
html.dark.excel-mode .crm-order-board tbody tr:not(.flash-new-lead):hover > td,
html.dark.excel-mode .crm-order-board tbody tr:not(.flash-new-lead):focus-within > td {
  background:rgba(16,185,129,.10) !important;
}

/* Actions ka chipka hua aakhri khaana — dark me `:focus-within` chhoot gaya tha.
   `:last-child` ki ye lambi ladi jaan-boojh kar hai (upar v222 wale hisse me wajah likhi hai):
   isse kam specificity wale niyam ko purane !important niyam kha jate hain. */
html.dark .crm-lead-board  tbody tr:focus-within > td:last-child:last-child:last-child:last-child:last-child,
html.dark .crm-order-board tbody tr:focus-within > td:last-child:last-child:last-child:last-child:last-child,
html.dark .ndr-table       tbody tr:hover > td:last-child:last-child:last-child:last-child:last-child,
html.dark .ndr-table       tbody tr:focus-within > td:last-child:last-child:last-child:last-child:last-child{
  background: #16261f !important;
}

/* =========================================================================================
   v289 — DUPLICATE KI GINTI AB NUMBER KE KONE PAR (ganit ke ghaat jaisi)

   Atish: "number ke aage just saamne duplicate value likhi hoti hai — main chahta hoon number ke
           corner par upar likho, jaise math me square aur cube ki value likhte hain. Dekhne me
           bhi achha lagega."

   Ginti ka gola pehle number ke BAGAL me, usi line me baithta tha. Ab wo number ke daayen-upar
   kone par uthaya gaya hai — bilkul ghaat (exponent) ki tarah. Sirf baithak aur naap badli hai:
   rang wahi amber/sky, click wahi, ginti wahi, aur poori row ki unchai bhi nahi badhti (iske
   liye `position:relative` ka istemal hua hai, `vertical-align` ka nahi — warna line ki unchai
   kheench jaati aur row lambi ho jaati).
   ========================================================================================= */
.crm-dup-badge {
  align-self: flex-start !important;     /* flex wali line me upar ki taraf */
  position: relative !important;
  top: -0.42em !important;               /* number ke upar wale kone par */
  margin-left: 1px !important;
  min-width: 14px !important;
  height: 14px !important;
  padding: 0 3px !important;
  font-size: 9px !important;
  line-height: 14px !important;
  letter-spacing: 0 !important;
}

/* Jahan goli aur number ek hi line me hain (lead/order board), wahan ginti number se chipki na
   lage — ek baal bhar jagah. */
.crm-dup-badge + .crm-dup-badge { margin-left: 3px !important; }

/* "Back" ka button duplicate wali amber patti me — baaki CRM ke back jaisa hi dikhe. */
html.dark .crm-dup-back {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(251,191,36,.45) !important;
  color: #fcd34d !important;
}
html.dark .crm-dup-back:hover { background: rgba(255,255,255,.14) !important; }

/* =========================================================================================
   v289 — "JO LEAD KHOLI THI" WO SACH ME DIKHE (sirf 3px ki lakeer se kaam nahi chal raha tha)

   Atish: "pehle kisi lead par click kar deta tha to wo lead highlight rehti thi, edit ke baad
           back aane par bhi highlight rehti thi — jisse pata hota tha ki kaun si lead open hui
           thi. Isko sahi karo."

   ---- ASLI WAJAH (asli Chromium me naapi gayi) ----

   Ye kaam v223 se maujood hai: click par row ki pehchan yaad rehti hai (sessionStorage) aur us row
   par `crm-row-opened` ka nishan lag jata hai. Naap me nishan lagta BHI hai, aur edit se wapas
   aane par phir se lagta BHI hai. Par DIKHTA kitna hai:

       LIGHT  click ke baad : row rgb(255,255,255) -> rgb(255,255,255)   (rang bilkul nahi badla)
                              cell rgb(255,255,255) -> rgb(255,255,255)
                              bas baayin taraf 3px ki indigo lakeer
       DARK   click ke baad : row -> rgba(129,140,248,.16) (dikhta hai)
                              cell rgb(17,28,47) (cell ne use dhak liya)

   v223 ne rang ROW par likha tha (`tr.crm-row-opened { background-color: ... }`). Par uske baad
   v153/v154 ne light mode ke liye ye niyam daale:

       html:not(.dark) .crm-lead-board tbody tr[data-status-color]...     { background:#fff !important }
       html:not(.dark) .crm-lead-board tbody tr[data-status-color]... > td { background:#fff !important }

   Inki specificity (0,4,3)/(0,4,4) hai aur v223 ke niyam ki (0,1,2) - yaani safed rang jeet jata
   tha. Isliye light mode me khuli hui lead ka rang kabhi dikha hi nahi, sirf 3px ki lakeer bachi -
   aur wo chaudi table me aankh se chhoot jaati hai. Dark me cell ne rang dhak liya tha.

   ---- ILAAJ ----
   Rang ab CELL par lagta hai, aur itni specificity ke saath ki board ke safed/dark niyam use dhak
   na sakein. Rang wahi hai jo v223 ne chuna tha, bas thos (opaque) roop me:

       light : rgba(79,70,229,.09)  safed par  ->  #ebe9fa
       dark  : rgba(129,140,248,.16) #111c2f par -> #1e2746

   Baayin taraf ki indigo lakeer jyon ki tyon hai, aur v223 ka kram bhi: MAUS (hover) sabse upar
   rehta hai - isliye khuli hui row par maus le jaane par hover ka rang hi dikhta hai (wahi rang jo
   baaki rows par dikhta hai), aur maus hatane par khuli hui lead ka nishan wapas.
   ========================================================================================= */

/* --- khuli hui lead / order: cell par thos rang (3 baar class = specificity (0,5,4)) --- */
html .crm-lead-board  tbody tr.crm-row-opened.crm-row-opened.crm-row-opened:not(.flash-new-lead) > td,
html .crm-order-board tbody tr.crm-row-opened.crm-row-opened.crm-row-opened:not(.flash-new-lead) > td {
  background: #ebe9fa !important;
}
html.dark .crm-lead-board  tbody tr.crm-row-opened.crm-row-opened.crm-row-opened:not(.flash-new-lead) > td,
html.dark .crm-order-board tbody tr.crm-row-opened.crm-row-opened.crm-row-opened:not(.flash-new-lead) > td {
  background: #1e2746 !important;
}

/* --- baayin taraf ki lakeer thodi mazboot, taaki door se bhi dikhe --- */
html .crm-lead-board  tbody tr.crm-row-opened.crm-row-opened > td:first-child,
html .crm-order-board tbody tr.crm-row-opened.crm-row-opened > td:first-child {
  box-shadow: inset 4px 0 0 0 #4f46e5 !important;
}
html.dark .crm-lead-board  tbody tr.crm-row-opened.crm-row-opened > td:first-child,
html.dark .crm-order-board tbody tr.crm-row-opened.crm-row-opened > td:first-child {
  box-shadow: inset 4px 0 0 0 #a5b4fc !important;
}

/* --- MAUS sabse upar (v223 ka kram): (0,6,4) --- */
html:not(.dark) .crm-lead-board  tbody tr.crm-row-opened.crm-row-opened.crm-row-opened:hover > td,
html:not(.dark) .crm-lead-board  tbody tr.crm-row-opened.crm-row-opened.crm-row-opened:focus-within > td,
html:not(.dark) .crm-order-board tbody tr.crm-row-opened.crm-row-opened.crm-row-opened:hover > td,
html:not(.dark) .crm-order-board tbody tr.crm-row-opened.crm-row-opened.crm-row-opened:focus-within > td {
  background: #eaf4f1 !important;
}
html.dark .crm-lead-board  tbody tr.crm-row-opened.crm-row-opened.crm-row-opened:hover > td,
html.dark .crm-lead-board  tbody tr.crm-row-opened.crm-row-opened.crm-row-opened:focus-within > td,
html.dark .crm-order-board tbody tr.crm-row-opened.crm-row-opened.crm-row-opened:hover > td,
html.dark .crm-order-board tbody tr.crm-row-opened.crm-row-opened.crm-row-opened:focus-within > td {
  background: #17342f !important;
}

/* --- Actions ka chipka hua aakhri khaana bhi wahi rang le (warna ek khaana alag dikhta hai) --- */
html .crm-lead-board  tbody tr.crm-row-opened.crm-row-opened > td:last-child:last-child:last-child:last-child:last-child,
html .crm-order-board tbody tr.crm-row-opened.crm-row-opened > td:last-child:last-child:last-child:last-child:last-child {
  background: #ebe9fa !important;
}
html.dark .crm-lead-board  tbody tr.crm-row-opened.crm-row-opened > td:last-child:last-child:last-child:last-child:last-child,
html.dark .crm-order-board tbody tr.crm-row-opened.crm-row-opened > td:last-child:last-child:last-child:last-child:last-child {
  background: #1e2746 !important;
}