/*  styles/cp.css — /cp (RBN99 member ka apna hisaab) ke apne rang aur dhaancha
    ===========================================================================
    ⚠️ EK BHI RANG YAHAN CHUNA NAHI GAYA. Har `var(--…)` `lease.css` ka apna
       token hai, aur wo file ise se PEHLE chadhti hai. Yahi wajah hai ki
       yeh page light aur dark dono me apne aap theek dikhta hai -- theme
       lease.css me badalti hai, yahan kuch nahi badalna padta.

       Naya rang chahiye to wo `lease.css` me token banta hai, yahan
       hardcode nahi. `styles/desk-tokens.css` ke sar par likhi hui wajah
       theek yahi hai, ulti taraf se: bina define kiye `var()` chup-chaap
       gayab ho jaata hai, aur hardcode kiya hua rang doosre theme par
       chup-chaap padh'ne laayak nahi rehta.

    ⚠️ Yeh file SIRF `/cp` par chadhti hai. `lease.css` me daalne ka matlab
       hota har page par 200 line ka wo CSS jo sirf ek page ke kaam ka hai.
    =========================================================================== */

/* ── sar ─────────────────────────────────────────────────────────────────── */
.cp-head {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.cp-head-in {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cp-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.cp-mark {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: var(--a1); color: var(--on-a1);
  font-weight: 700; font-size: 13px;
}
.cp-word { color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
.cp-word em { font-style: normal; color: var(--a1); }

/* ── dhaancha ────────────────────────────────────────────────────────────── */
.cp-wrap {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 24px 16px 64px;
  display: grid;
  /*  `minmax(0, 1fr)`, `auto` nahi (2 Oct 2026): "Edit details" par CRM ka
      form khulta hai, aur uski andar ki qataarein apni min-content chaudai
      maangti hain. `auto` column use maan leta tha aur 390px par POORI
      soochi -- har card -- 9px bahar khisak jaati thi (Chromium me naapa). */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
/*  Darwaza aur "abhi kuch nahi" wale panne sankre hain -- ek button ko
    1180px chaudi jagah dena use kho deta hai. */
.cp-wrap-narrow { max-width: 620px; }

.cp-who { padding: 8px 2px 0; }
.cp-h1 {
  margin: 0 0 6px;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.15;
  color: var(--ink);
}
.cp-sub { margin: 0; color: var(--ink-3); font-size: 14px; }
.cp-lede { margin: 0 0 16px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }

.cp-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 16px;
}
.cp-h2 {
  margin: 0 0 4px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink);
}
.cp-note { margin: 0 0 12px; color: var(--ink-3); font-size: 13px; line-height: 1.55; }
.cp-empty { margin: 8px 0 0; color: var(--ink-3); font-size: 14px; }
.cp-fine { margin: 12px 0 0; color: var(--ink-3); font-size: 13px; line-height: 1.6; }
.cp-fine a { color: var(--a1); }
.cp-foot { text-align: center; }

/* ── ank ─────────────────────────────────────────────────────────────────── */
/*  auto-fit isliye ki ginti badal sakti hai; phone par yeh apne aap do
    column par aa jaata hai aur kahin `@media` likhna nahi padta. */
.cp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.cp-stat { background: var(--surface); padding: 14px 12px; }
.cp-stat-n {
  font-family: Fraunces, Georgia, serif;
  font-size: 22px; line-height: 1.1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cp-stat-l { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.cp-stat-h { margin-top: 2px; font-size: 13px; color: var(--ink-3); }

/* ── soochi ──────────────────────────────────────────────────────────────── */
/*  `minmax(0, 1fr)` (2 Oct 2026): soochi ki row me "Manage" ka panel aur
    CRM ka form khulta hai; `auto` column uski min-content chaudai maan leta
    aur 320px par row card se bahar nikal jaati (Chromium me naapa). */
.cp-rows { display: grid; grid-template-columns: minmax(0, 1fr); }
.cp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 2px;
  border-top: 1px solid var(--line);
}
.cp-row:first-child { border-top: 0; }
.cp-row-main { flex: 1 1 auto; min-width: 0; }
.cp-row-t {
  color: var(--ink); font-size: 14px; font-weight: 500;
  overflow-wrap: anywhere;
}
.cp-row-s { margin-top: 2px; color: var(--ink-3); font-size: 13px; }
.cp-row-bad { margin-top: 4px; color: var(--due); font-size: 13px; }
.cp-row-amt {
  flex: 0 0 auto;
  color: var(--ink); font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* ── button ──────────────────────────────────────────────────────────────── */
.cp-btn {
  display: inline-block;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font: inherit; font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.cp-btn-quiet { flex: 0 0 auto; }
.cp-btn-go {
  display: block; width: 100%;
  padding: 13px 18px; text-align: center;
  background: var(--a1); border-color: var(--a1); color: var(--on-a1);
  font-size: 15px; font-weight: 600;
}

/*  Galti ka rang `--due` se -- wahi faisla jo `.l-err` par 22 Sep ko liya
    gaya tha. Hardcoded gulaabi light theme par 1.20:1 tha, yaani gayab. */
.cp-alert {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--due);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--due);
  font-size: 13.5px; line-height: 1.55;
}

/* ── listing ka card (24 Sep 2026) ───────────────────────────────────────── */
/*  Photo aur ginti. Rang yahan bhi ek nahi chuna -- sab lease.css ke token. */
.cp-row-wide { align-items: flex-start; }
.cp-thumb {
  flex: 0 0 auto;
  width: 84px; height: 64px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
/*  Photo na ho to jagah wahi rehti hai -- warna list har row par hilti hai
    aur padhna mushkil ho jaata. */
.cp-thumb-none {
  display: grid; place-items: center;
  color: var(--ink-3); font-size: 13px; text-align: center;
}
/*  Ginti ki lakeer. Wrap hoti hai, isliye phone par apne aap do line. */
.cp-facts {
  margin-top: 6px;
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  color: var(--ink-2); font-size: 13px;
}
.cp-facts span { white-space: nowrap; }
.cp-facts span + span::before {
  content: "·"; color: var(--ink-3); margin-right: 10px;
}

/* ── paid listing (Brokers99 patch 593, 26 Sep 2026) ─────────────────────── */
/*  Payment se laut kar ka sandesh galti nahi hai -- `--due` ka laal yahan
    jhooth hota. Wahi dabba, rang lease.css ke accent se. */
.cp-alert-info { border-left-color: var(--a1); color: var(--ink); }
.cp-pay {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.cp-pay .cp-note { margin: 0 0 10px; }
.cp-pay .cp-btn-go { display: block; width: 100%; text-align: center; }
.cp-pay .cp-fine { margin-top: 8px; }
.cp-pay-t { color: var(--ink); font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.cp-vis { display: grid; gap: 6px; }
/*  Naam, number, din -- phone par number apni lakeer par gir jaata hai,
    kat'ta nahi. */
.cp-vis-r {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  font-size: 13px; color: var(--ink-2);
}
.cp-vis-n { color: var(--ink); font-weight: 500; }
.cp-vis-r a { color: var(--a1); }
.cp-vis-s { color: var(--ink-3); font-size: 13px; }

/* Payment link to share (26 Sep 2026) -- CP kisi aur se bharwa sake. */
.cp-share { display: grid; gap: 6px; margin-top: 8px; }
.cp-share-url { font-size: 13px; word-break: break-all; }

/* ── apni listing badalna (Brokers99 patch 604, 2 Oct 2026) ──────────────── */
/*  "Open" aur "Manage" ek dabbe me -- phone par ek ke neeche ek, kat'te nahi. */
/*  ═══ PHONE PAR BUTTON APNI LAKEER PAR (maalik, 3 Oct 2026) ════════════
    Maalik, is panne ka screenshot bhej kar: "mobile view mein listing kaise
    dikh rahi hai kutch bhi aligned nahin hai".

    ⚠️ ★ NAAP: 375px par listing ki row 309px ki hai. Thumb 84 + gap 12 +
    "Open/Manage" ka khamba 79 + gap 12 -- beech ka khaana (`.cp-row-main`)
    sirf **118px** ka bachta tha. Usme sirlekh do lakeer me, byora chaar
    lakeer me, aur har tathya apni lakeer par chala jaata tha; paise wala
    dabba aur uska pill-button itne tang khaane me ek GOLA bankar baith
    jaata tha (maalik ki tasveer me saaf dikhta hai).

    Ab phone par dono button poori lakeer par apne aap aa jaate hain
    (`flex: 1 1 100%`), aur beech ke khaane ko 309-84-12 = **213px** mil
    jaate hain. 560px se upar wahi purana khamba daayein.

    Lakeer todne ka kaam `.cp-row-wide` ka `flex-wrap: wrap` pehle se karta
    hai -- yahan sirf itna kaha gaya hai ki yeh khaana poori lakeer le.    */
.cp-row-acts {
  flex: 1 1 100%;
  display: flex; flex-direction: row; gap: 6px; align-items: stretch;
}
.cp-row-acts .cp-btn { flex: 1 1 auto; text-align: center; }
@media (min-width: 561px) {
  .cp-row-acts { flex: 0 0 auto; flex-direction: column; }
  .cp-row-acts .cp-btn { flex: 0 0 auto; }
}

.cp-man {
  margin-top: 10px;
  /*  Base sabse tang phone ka -- 381px se upar wapas 12px (neeche). */
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  display: grid; gap: 10px;
  /*  Wahi `minmax(0, 1fr)` -- andar ka form apni chaudai se panel na kheenche. */
  grid-template-columns: minmax(0, 1fr);
}
.cp-man .cp-note { margin: 0; }
.cp-man .cp-fine { margin: 4px 0 0; }
.cp-man .cp-row-bad { margin: 0; }
.cp-man .cp-alert { margin: 0; background: var(--surface); }
.cp-man-note { display: grid; gap: 8px; justify-items: start; }
.cp-man-st { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.cp-man-st .cp-row-s { margin: 0; }
/*  Haal ka nishaan -- rang nahi, lakeer. Haal shabd me likha hai; rang akela
    kabhi khabar nahi hota. */
.cp-chip {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: 12.5px; font-weight: 600;
}
.cp-man-vis { display: grid; gap: 6px; }
.cp-man-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/*  `cp-btn-go` baaki jagah poori chaudai ka hai (paise ka button); sawaal ki
    jodi me wo apne matn jitna. */
.cp-man-btns .cp-btn-go { display: inline-block; width: auto; padding: 9px 14px; font-size: 13px; white-space: normal; }
.cp-man-ask { display: grid; gap: 10px; }
.cp-man-l { display: grid; gap: 4px; color: var(--ink-2); font-size: 13px; }
.cp-man-why {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit; font-size: 13.5px;
  resize: vertical;
}
/*  Hatane ka button doosron jaisa hi -- bas lakeer `--warn` ki, taaki
    dabane se pehle aankh ruk jaaye. Sawaal phir bhi poochha jaata hai. */
.cp-btn-off { border-color: var(--warn); }
/*  Nayi listing ke do chhote sawaal (3 Oct 2026): kya daal rahe ho, aur maalik
    ne haan kaise kahi. Naap aur rang `cp-man-why` (textarea) jaise hi -- do
    khaane ek hi dabbe me alag na dikhein. `appearance` chhua nahi jaata: teer
    browser ka apna rehta hai, aur usi se pata chalta hai ki yeh soochi hai.

    ⚠️ Yeh is panne ka pehla `select` hai, aur `cp-gate.test.js` is panne par
       PIN jaisa koi khaana nahi hone deta. Wo jaanch sahi hai: yahan jo bhi
       type hota hai wo maalik ka naam-number aur ek soochi ka chunaav hai --
       koi raaz nahi, aur PIN aaj bhi sirf RBN99 par type hota hai. */
.cp-add-sel {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit; font-size: 13.5px;
}
/*  CRM ka form apne gehre roop me chalta hai (`<html class="dark">`,
    /list-property wala hi faisla); yahan sirf uska dabba apni jagah me. */
.cp-edit { margin-top: 2px; overflow-x: auto; }
/*  Panel ki gaddi ke UPAR phail kar form ko utni hi jagah deta hai jitni
    /list-property par milti hai. Base sabse tang phone ka; bade naap neeche
    `min-width` me. ⚠️ Yeh lakeer un block se PEHLE honi chahiye -- same
    specificity par baad wala jeet-ta hai, aur wahi jaal us din teen baar
    laga tha (CLAUDE.md §23). */
.cp-man .cp-edit { margin-left: -23px; margin-right: -23px; }
/*  320px ke phone par CRM ke form ki ek-do qataar (99Lease ka "Rental
    Details": do pakki chaudai ke khaane) jagah se lambi hai -- wahi jo
    /list-property par bhi 4px nikalti hai, aur wo bani hui file ki baat hai
    (ghar Brokers99), yahan ki nahi. Isliye: panel ki gaddi us chaudai par kam,
    aur jo phir bhi na samaaye wo SIRF form ke andar khiskta hai -- poora
    panna kabhi bagal me nahi (naapa: 320 / 360 / 390, dono portal). */
/*  Phone par form panel aur card ki gaddi ke upar phail jaata hai -- card ki
    lakeer se 4px andar tak -- taaki use utni hi jagah mile jitni
    /list-property par milti hai (kiraye ke "Rental Details" ko ~306px
    chahiye; bina iske 390px par wo form ke andar kat jaata tha -- naapa).
    27 = panel ki gaddi (12) + uski lakeer (1) + row ki gaddi (2) + card ki
    gaddi (16) - 4. Card ke bahar page ki 16px gaddi rehti hai. */
/*  ⚠️ 3 Oct 2026: yeh teen seedhiyan ULTI kar di gayin -- base ab PHONE ka
    hai aur badi screen apwaad (poora faisla CLAUDE.md §23 me). Naap ek bhi
    nahi badla, sirf kram: pehle base me 0 tha aur `max-width` use ghatate
    the, ab base me sabse tang phone hai aur `min-width` use wapas laata
    hai. Us din `cp.css` chhoot gayi thi -- `mobile-first.test.js` ab
    styles/ ki HAR file dekhti hai, sirf mukhya file nahi. */
@media (min-width: 381px) {
  .cp-man { padding: 12px; }
  .cp-man .cp-edit { margin-left: -27px; margin-right: -27px; }
}
@media (min-width: 561px) {
  .cp-man .cp-edit { margin-left: 0; margin-right: 0; }
}
/*  Panel listing ki row me apni poori lakeer par. `flex-basis: 0` beech ke
    khaane par isliye ki wrap chalu hone par lamba sirlekh khud nayi lakeer
    na pakad le. */
.cp-row-wide { flex-wrap: wrap; }
.cp-row-wide > .cp-row-main { flex: 1 1 0; }
.cp-row-wide > .cp-man { flex: 1 1 100%; min-width: 0; }