/* ============================================================================
   JO TOKEN THE HI NAHI

   Poori portal.css char naamon par khari hai — --panel, --panelSoft, --ink
   aur --radius — aur template mein in mein se EK bhi define nahi hai. Har
   jagah fallback chal raha tha:

       background: var(--panel, #fff)      →  hamesha #fff
       color:      var(--ink, #16202a)     →  hamesha gehra sleti

   Roshni wale theme mein ye theek lagta hai (qeematein waise bhi wohi hain),
   is liye kisi ko nazar nahi aaya. Andhere wale theme mein har panel, har
   grid aur har patti SAFED reh jati hai — poora portal chamak uthta hai aur
   matn parhne ke qabil nahi rehta.

   Ab chaaron token template ke apne rangon par bandh diye gaye hain. Ye
   e'laan BODY par hai, :root par nahi — jaan boojh kar:

       body.dark --surface ko KHUD BODY par badalta hai. Agar --panel :root
       par likha hota to us ki substitution wahin, roshni wali qeemat ke
       saath ho jati, aur andhere mein bhi safed hi rehta. Ek hi element par
       hone se dono halaton mein sahi qeemat uthti hai.

   Kisi selector ko haath nahi lagana para — 200 se zyada jagah apne aap
   theek ho gayin.
   ============================================================================ */

body {
    --panel: var(--surface);
    --panelSoft: color-mix(in srgb, var(--surface) 96%, var(--text));
    --ink: var(--text);
}

/*  --radius yahan JAAN BOOJH KAR nahi likha. portal.css calc(var(--radius, 5)
    * 2px) likhti hai aur fallback 5 se 10px nikalta hai — wohi jo abhi lag
    raha hai. Template ka apna radius --r / --rl / --control-radius par hai
    (body[data-radius] se), aur agar kal --radius ko un se joda jaye to wo
    faisla wahan likha jaye, yahan chupke se nahi.                          */


/* ============================================================================
   AJSoftsERP — template ke oopar hamari chand cheezein.

   Template ki do CSS files ko HAATH NAHI LAGANA. Wo 405 KB hain aur unhein
   badalna matlab agla template update aane par sab dobara. Jo bhi hamara
   izafa ho wo yahan aata hai, aur ye file un ke BAAD load hoti hai — is liye
   yahan likhi cheez upar rehti hai.

   Sab kuch template ke apne CSS variables par khara hai (--panel, --line,
   --ink, --warn-*), is liye theme, dark mode aur density khud-ba-khud lagte
   hain — koi rang yahan haath se nahi likha.
   ============================================================================ */


/* ---------------------------------------------------------------- header
   Company / branch / unit / financial year ki patti.

   Ab ye chaaron ASLI selector hain — /api/workspace/context se aate hain aur
   /account/switch par form post karte hain. Purani "sirf parhne wali chip"
   sirf do jagah bachi hai, aur dono jaan boojh kar:

     1. context abhi aaya na ho (ya API tak pahunch na ho) — us soorat mein
        claims ke naam dikhaye jate hain. Khali header se behtar hai: banda
        ko phir bhi pata rehta hai ke wo kahan khara hai, sirf badal nahi
        sakta.
     2. koi financial year khula hi na ho — warn wali chip.                  */

.context-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 1px);
    background: var(--panel, #fff);
    color: var(--ink, #16202a);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.context-chip .aj-icon {
    opacity: .65;
    flex: none;
}

/* Financial year khula na ho — ye khamoshi se guzarne wali baat nahi.
   Bina khule year ke koi transaction post nahi hoti, is liye ye chip
   jaan boojh kar alag rang mein hai. */
/*  Rang ab theme ke --warning se nikalte hain, app.css ke purane --warn-*
    se nahi. Un do tokens ka koi theme nahi badalta — wo legacy screens ke
    liye ek dafa likhe gaye the — is liye ye chip har theme mein wohi peela
    rehta tha, chahe poora portal kisi aur rang ka ho.

    Ek color-mix se dono halatein bhi ban gayin: light mein 12% warning
    surface par, dark mein wohi hisab dark surface par. Alag `.dark` qaida
    ki zaroorat hi nahi rahi — do jagah ek hi baat likhne ka matlab hamesha
    yehi hota hai ke kisi din wo do jagahein alag ho jayen.                 */
.context-chip-warn {
    border-color: color-mix(in srgb, var(--warning, #d99b28) 42%, var(--line, #dde4ea));
    background: color-mix(in srgb, var(--warning, #d99b28) 12%, var(--surface, #fff));
    color: color-mix(in srgb, var(--warning, #d99b28) 78%, var(--text, #16202a));
}

/* Chhoti screen par company ka naam sab se pehle jaata hai — financial year
   zyada zaroori hai. */
@media (max-width: 900px) {
    .contexts .context-chip:first-child { display: none; }
}

.header-search-slot {
    display: flex;
    align-items: center;
    min-width: 0;
}


/* ==========================================================================
   LOGIN  —  DO RUKH, 65 / 35

   Ye safha din mein ek dafa khulta hai, magar wo EK DAFA har banda dekhta
   hai — aur aksar yehi safha bahar walon ko dikhaya jata hai.

   Chaurai 65 / 35. Wajah: baayan rukh sirf sajawat nahi — us mein AJSofts
   ka taaruf, module ka hero, aur chunne wali patti hai. Sign-in ke khane
   mein do khane aur ek button hai; usay 35 se ziyada chahiye hi nahi.
   Ziyada dene se wo khali maidan mein tairta hua chhota dabba lagta hai.

   Baayan rukh chaar hisson mein, upar se neeche:
       TOPBAR   AJSofts kaun hai
       HERO     jo khana abhi chuna hua hai — bara nishan, naam, tafseel
       SLIDER   chunne wali patti
       STRIP    Cloud ERP · server kaun deta hai · version

   Daayan rukh JAAN BOOJH KAR theme ke token par hai: wohi --surface, wohi
   aj-field khane jo poore portal mein hain. Sheeshe wala card khoobsurat
   tha magar us ke khane theme se KAT jate — andhere theme mein ek safha
   aisa reh jata jo baqi 400 se mail nahi khata.

   3D ka wazan baayen rukh par hai: farsh, slider ki gehrai, hero ke nishan
   ka ghoom kar aana — aur card ka apna halka jhukav.
   ========================================================================== */

/*  Lapetne wala khaka: template ka `.login-layout` beech mein ek chhota
    dabba rakhne ke liye bana tha (grid + place-items + 20px hashiya) aur
    `.erp-login-page` ki chaurai 440px baandh deta tha. Ab ye safha poori
    screen leta hai, is liye dono qaid yahan kholi jati hain.  */
.login-layout {
    display: block;
    padding: 0;
    background: var(--bg, #f4f6f8);
}

/*  `min-width: 0` yahan ZAROORI hai. Hero ka naam `white-space: nowrap`
    par hai, aur grid ka khana default `min-width: auto` rakhta hai — yani
    wo APNI AULAAD KI SAB SE CHAURI CHEEZ tak phail jata hai. Naap ne
    dikhaya: us ke baghair 65/35 toot gaya, naam rukh se bahar nikal gaya
    aur "AJSOFTS.COM" kat gaya. Ye bigaar nowrap ka nahi, grid ke default
    ka tha.  */
.erp-login-page {
    /*  `width: 100%` yahan ek AASAAN CHEEZ NAHI hai — ye ek qaid torhta hai.
        Template ne `.erp-login-page` par `width: min(440px, 100%)` likh
        rakha hai (ajsoft-blazor.css), kyunke wahan ye safha ek chhota dabba
        tha. Us ke bagair ye safha 1440 ki screen par 440px ka reh jata hai
        aur beech mein simat jata hai — 65/35 phir bhi "durust" nazar aata
        hai, kyunke dono rukh barabar simatte hain. `hx_login.py` isi liye
        ab poori screen se naapta hai, sirf aapas mein nahi.  */
    width: 100%;
    display: grid;
    grid-template-columns: 65fr 35fr;
    min-height: 100vh;
    background: var(--bg, #f4f6f8);
}
.erp-login-page > * { min-width: 0; }

/* ------------------------------------------------------- baayan rukh  */
.erp-login-aside {
    position: relative;
    overflow: hidden;
    color: #fff;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: 20px;
    padding: 26px 60px;
    align-items: stretch;
    align-content: stretch;
    justify-items: stretch;

    /*  Rang SIRF theme ke primary se — koi doosra rang chuna hi nahi gaya.
        Gehrai kaale se aati hai, aur kaala rang ka intikhab nahi, rang ki
        ghair-mojoodgi hai; is liye ye rukh har theme mein wohi rehta hai
        jo hona chahiye — gehra, taake safed tehreer us par parhi jaye.

        Yahan `--text` ya `--surface` istemal karna ghalat hota: andhere
        theme mein wo palat jate hain aur rukh halka ho kar apni hi safed
        tehreer kha jata.  */
    background: radial-gradient(115% 115% at 10% 6%,
        color-mix(in srgb, var(--primary, #3474d1) 80%, #000) 0%,
        color-mix(in srgb, var(--primary, #3474d1) 48%, #000) 46%,
        color-mix(in srgb, var(--primary, #3474d1) 16%, #000) 100%);
}

/*  `> *` ne pehle farsh ko bhi `position: relative` de diya tha — aur us
    se wo absolute se nikal kar GRID KA EK KHANA ban gaya. Nateeja: grid
    mein ek faltu qatar, aur `1fr` galat cheez ko mil gaya; slider safhe ke
    farsh par ja lagi. Bigaar slider ka lagta tha, tha ek selector ka.  */
.erp-login-aside > *:not(.erp-login-floor) { position: relative; z-index: 2; }

.erp-login-floor {
    position: absolute;
    inset: 0;
    opacity: .18;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.15) 0 1px, transparent 1px 38px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.15) 0 1px, transparent 1px 38px);
    transform: perspective(700px) rotateX(65deg) translateY(250px) scale(2.9);
    transform-origin: 50% 100%;
}

/* ---------------------------------------------------------- top bar  */
.erp-login-top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.18);
}
.erp-login-top .mark {
    width: 42px; height: 42px; flex: 0 0 42px;
    border-radius: 11px;
    display: grid; place-items: center;
    font-weight: 850; font-size: 15px; color: #fff;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
}
.erp-login-top .who b     { display: block; font-size: 15px; letter-spacing: -.01em; }
.erp-login-top .who small { display: block; margin-top: 3px; font-size: 11.5px;
                            opacity: .72; line-height: 1.5; }
.erp-login-top .site {
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    font-size: 10.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    opacity: .55;
}

/* -------------------------------------------------------------- hero
   NAAM EK SATAR MEIN.

   Yahan ek phanda hai: naam 6 harf ka bhi hai ("Import") aur 38 ka bhi
   ("Embellishments Services for Production"). Ek hi font-size sab par
   lagana matlab chhote naam ka bauna dikhna, ya lambe naam ka tootna.

   Is liye size portal.js NAAP kar chunta hai: 42px se shuru, aur jab tak
   satar apne khane se chaurhi hai, ek ek qadam neeche — 22px tak. Ye
   andaza nahi, `scrollWidth` ka naap hai.                                */
.erp-login-hero {
    display: flex;
    align-items: center;
    gap: 46px;
    min-height: 0;
    min-width: 0;
    padding: 6px 0;
}
.erp-login-hero-art {
    position: relative;
    flex: 0 0 224px;
    height: 224px;
    display: grid;
    place-items: center;
    perspective: 1000px;
}
.erp-login-hero-art .ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.16);
    background: radial-gradient(circle at 32% 28%,
        color-mix(in srgb, var(--accent, #37b6a4) 30%, transparent), transparent 62%);
}
.erp-login-hero-art .ring::after {
    content: '';
    position: absolute;
    inset: 26px;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,.14);
}
.erp-login-hero-art svg {
    position: relative;
    width: 114px; height: 114px;
    color: #fff;
    filter: drop-shadow(0 12px 30px rgba(0,0,0,.5));
}
.erp-login-hero-txt { min-width: 0; flex: 1; }
.erp-login-hero-txt h2 {
    margin: 0 0 8px;
    font-size: 42px;             /* portal.js isay naap kar ghata deta hai */
    line-height: 1.1;
    font-weight: 750;
    letter-spacing: -.022em;
    white-space: nowrap;
}
.erp-login-hero-txt .lead {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
    opacity: .9;
    color: color-mix(in srgb, var(--accent, #37b6a4) 55%, #fff);
}
.erp-login-hero-txt .more {
    margin: 0;
    font-size: 15px;
    line-height: 1.72;
    opacity: .78;
    max-width: 52ch;
}

/*  Nishan pehle LAKEER KI TARAH KHINCHTA hai (portal.js `stroke-dashoffset`
    par), phir matn neeche se uthta hai — teen alag waqton par, taake nazar
    ka rasta nishan se naam, naam se tafseel tak jaye.  */
@keyframes ajHeroUp   { from { opacity: 0; transform: translateY(16px); }
                        to   { opacity: 1; transform: none; } }
@keyframes ajHeroArt  { from { opacity: 0; transform: rotateY(-52deg) scale(.86); }
                        to   { opacity: 1; transform: none; } }
@keyframes ajHeroRing { from { opacity: 0; transform: scale(.82); }
                        to   { opacity: 1; transform: none; } }
.erp-login-hero.is-in .erp-login-hero-art svg  { animation: ajHeroArt  .62s cubic-bezier(.2,.75,.25,1) both; }
.erp-login-hero.is-in .erp-login-hero-art .ring{ animation: ajHeroRing .62s cubic-bezier(.2,.75,.25,1) both; }
.erp-login-hero.is-in h2    { animation: ajHeroUp .5s .10s cubic-bezier(.2,.75,.25,1) both; }
.erp-login-hero.is-in .lead { animation: ajHeroUp .5s .18s cubic-bezier(.2,.75,.25,1) both; }
.erp-login-hero.is-in .more { animation: ajHeroUp .5s .26s cubic-bezier(.2,.75,.25,1) both; }

/* ------------------------------------------------------------ slider  */
.erp-login-slider {
    position: relative;
    perspective: 1500px;
    perspective-origin: 50% 50%;
    height: 172px;
    display: flex;
    align-items: center;
    justify-content: center;

    /*  Kinare ghulte hain — warna peechhe wala card rukh ke sire par katta
        hua lagta hai, jaise safha adhura ho.  */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.erp-login-track {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}
.erp-login-slide {
    position: absolute;
    left: 50%; top: 50%;
    width: 248px;
    margin: -76px 0 0 -124px;
    height: 152px;
    padding: 16px 18px;
    border-radius: 13px;
    text-align: left;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.2);
    background: linear-gradient(155deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
    box-shadow: 0 24px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.18);
    transition: transform .55s cubic-bezier(.22,.7,.25,1), opacity .55s ease,
                background .35s ease, border-color .35s ease;
    will-change: transform, opacity;
}
.erp-login-slide .ic,
.erp-login-slide .ic svg { display: block; width: 22px; height: 22px; }
.erp-login-slide .ic     { opacity: .9; }
.erp-login-slide h4 {
    margin: 12px 0 6px;
    font-size: 13.5px;
    line-height: 1.3;
    font-weight: 700;
}
/*  Card par tafseel ki DO satrein — us se ziyada rakhna card ko parhne ki
    cheez bana deta hai, aur wo hero ka kaam hai. `line-clamp` lambi satar
    ko chhanta hai, tor kar bahar nahi girata.  */
.erp-login-slide p {
    margin: 0;
    font-size: 10.8px;
    line-height: 1.5;
    opacity: .6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/*  Samne wale card ka pas-manzar THOS hai. Shaffaf rakhne par peechhe wale
    card ka jumla us mein se jhankta hai — do jumle ek doosre par. Sheeshe
    ka husn tab tak hai jab tak parhne mein rukawat na ho.  */
.erp-login-slide.is-on {
    border-color: rgba(255,255,255,.44);
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--primary, #3474d1) 34%, #0a1626),
        color-mix(in srgb, var(--primary, #3474d1) 16%, #080f1c));
    box-shadow: 0 32px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.24);
}
.erp-login-slide.is-on p { opacity: .78; }

.erp-login-meter { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.erp-login-meter .bar {
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: rgba(255,255,255,.18);
    overflow: hidden;
}
.erp-login-meter .bar i {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: color-mix(in srgb, var(--accent, #37b6a4) 80%, #fff);
    transition: width .55s ease;
}
.erp-login-meter .num {
    font-size: 11px;
    letter-spacing: .13em;
    text-transform: uppercase;
    opacity: .6;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- strip  */
.erp-login-strip {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.16);
    font-size: 11px;
}
.erp-login-strip b     { display: block; font-size: 13px; font-weight: 700; }
.erp-login-strip small { display: block; margin-top: 3px; opacity: .62; line-height: 1.5; }
.erp-login-strip .host { text-align: right; white-space: nowrap; opacity: .62; line-height: 1.6; }
.erp-login-strip .host b { font-size: 11.5px; font-weight: 700; opacity: .9; }

/* ------------------------------------------------------- daayan rukh  */
.erp-login-side {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 30px 34px 24px;
    background: var(--bg, #f4f6f8);
}

/*  GAHAK KI SHANAKHT — beech mein, aur bari. Safhe par ye ek hi cheez hai
    jo har gahak ke liye alag hoti hai; kone mein daba kar rakhna us ka
    darja ghata deta hai. Logo aur monogram dono ek hi 56px oonchai mein
    bethte hain, is liye ek gahak se doosre par safha hilta nahi.  */
.erp-login-client {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 56px;
    padding-bottom: 4px;
}
.erp-login-client img {
    max-height: 56px;
    max-width: 270px;
    object-fit: contain;
    display: block;
}
.erp-login-client .mono {
    width: 56px; height: 56px; flex: 0 0 56px;
    border-radius: 15px;
    display: grid; place-items: center;
    font-weight: 800; font-size: 20px; letter-spacing: .01em; color: #fff;
    background: linear-gradient(140deg, var(--primary, #3474d1),
                color-mix(in srgb, var(--primary, #3474d1) 55%, #000));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--primary, #3474d1) 28%, transparent);
}
.erp-login-client .sep { width: 1px; height: 38px; background: var(--line, #e3e8ee); flex: 0 0 1px; }
.erp-login-client .who { line-height: 1.3; }
.erp-login-client .who small {
    display: block;
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--muted, #6b7a89);
}
.erp-login-client .who b {
    display: block;
    font-size: 21px;
    color: var(--text, #0f1b2a);
    letter-spacing: -.018em;
}

.erp-login-card {
    align-self: center;
    justify-self: center;
    width: min(392px, 100%);
    padding: 32px 32px 28px;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3e8ee);
    border-radius: 14px;

    /*  Jhukav + tehdaar saya = gehrai. Ye card ki apni 3D hai — is ke andar
        wohi aj-field khane hain jo poore portal mein chalte hain.  */
    transform: perspective(1500px) rotateY(-5deg) rotateX(2.5deg);
    box-shadow:
        0 2px 4px    rgba(15,27,42,.05),
        0 14px 28px  rgba(15,27,42,.08),
        0 44px 84px  rgba(15,27,42,.13),
        0 96px 150px rgba(15,27,42,.10);
}
.erp-login-card h1 {
    margin: 0 0 4px;
    font-size: 23px;
    letter-spacing: -.01em;
    color: var(--text, #0f1b2a);
}
.erp-login-card > p.sub { margin: 0 0 22px; font-size: 12.5px; color: var(--muted, #6b7a89); }

.erp-login-form { display: grid; gap: 12px; }
.erp-login-form > .btn { width: 100%; justify-content: center; margin-top: 4px; height: 40px; gap: 9px; }

/*  GHALTI KI SATAR — khane ke neeche, theme ke `--danger` par.

    Template ka apna dhancha istemal hua hai (`.aj-field.aj-error` +
    `.helper.error-helper`), is liye ye satar bilkul waisi lagti hai jaisi
    poore portal mein har khane ke neeche lagti hai. Login ka apna alag
    andaz banane ka koi faida nahi tha.

    Khali hone par jagah nahi ghairti — warna form khane bharte waqt upar
    neeche hilta rehta.  */
.erp-login-form .error-helper:empty { display: none; }
.erp-login-form .helper { margin: 4px 2px 0; font-size: 11px; line-height: 1.45; }

/*  Ghalti par unwan bhi laal ho.

    Template mein qaida maujood hai —
        `.aj-field.aj-error .aj-label { color: var(--danger) !important }`
    — magar floating haalat wala qaida us se ziyada khaas hai aur unwan
    neela hi rakhta hai. Render dekh kar pakra: chaukhta laal, satar laal,
    aur unwan neela — aadha kaam hua sa lagta hai.  */
.erp-login-form .aj-field.aj-error .aj-label,
.erp-login-form .aj-field.aj-error.floating .aj-label {
    color: var(--danger) !important;
}

/*  PASSWORD DIKHANE KA BUTTON

    Chhupa hua password mein typo pakarne ka koi aur rasta nahi — aur wohi
    typo "ghalat password" ban kar wapas aata hai. `type="button"` markup
    mein hai, warna wo form post kar deta.  */
.erp-login-eye {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-right: 2px;
    border: 0;
    background: transparent;
    color: var(--muted, #6b7a89);
    border-radius: 6px;
    cursor: pointer;
}
.erp-login-eye:hover  { background: var(--surface2, #f2f5f8); color: var(--text, #0f1b2a); }
.erp-login-eye.is-on  { color: var(--primary, #3474d1); }
.erp-login-eye .aj-icon svg,
.erp-login-eye svg { width: 15px; height: 15px; }

/*  BUTTON PAR CHAKKAR

    POST server par jata hai aur us mein waqt lagta hai. Us waqt mein banda
    button ko dobara dabata hai — aur DO DAFA POST bhej deta hai. Chakkar do
    kaam karta hai: batata hai ke baat pohanch gayi, aur button band kar
    deta hai.

    Template ka apna `.aj-spinner` `--primary` par bana hai — wo neele
    button par neela hi rehta, yani ghayab. Yahan wo safed kar diya gaya.  */
.erp-login-form .btn .aj-spinner {
    display: none;
    width: 15px; height: 15px;
    border-width: 2px;
}
.erp-login-form .btn.is-busy .aj-spinner { display: inline-block; }
.erp-login-form .btn.is-busy { pointer-events: none; opacity: .9; }

/*  Goli HAR THEME MEIN SAFED rehti hai — theme ke surface par nahi jati.
    Logo apne rangon (gehra neela + sleti) ke saath ek tasveer hai; andhere
    pas-manzar par wo doob jata hai. Brand ki goli ko apna maidan dena hi
    mehfooz hai.  */
.erp-login-power {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 9px 20px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(15,27,42,.08);
    box-shadow: 0 1px 2px rgba(15,27,42,.06), 0 10px 24px rgba(15,27,42,.10);
}
.erp-login-power span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .19em;
    text-transform: uppercase;
    color: #5b6b7a;
}
.erp-login-power img { height: 26px; display: block; }

.erp-login-foot {
    margin: 16px 0 0;
    font-size: 11px;
    line-height: 1.6;
    color: var(--muted, #6b7a89);
    text-align: center;
}

/*  Tang screen par baayan rukh chhup jata hai. Phone par sign-in ke waqt wo
    sirf raaste ki cheez hai.  */
@media (max-width: 1180px) {
    .erp-login-page  { grid-template-columns: minmax(0, 1fr); }
    .erp-login-aside { display: none; }
    .erp-login-side  { padding: 26px 20px 20px; }
    .erp-login-card  { transform: none; margin: 30px auto; }
}

/*  Jinhen harkat se takleef hoti hai — un ke liye sab thehra hua. portal.js
    khud ba khud chalna bhi band kar deta hai.  */
@media (prefers-reduced-motion: reduce) {
    .erp-login-hero.is-in * { animation: none !important; }
    .erp-login-slide        { transition: none; }
}

/* Login par paighaam card ki chaurai mein rahe, warna wo card se bahar
   nikal kar khaka torh deta hai. */
.erp-login-card .aj-message-bar {
    margin: 0 0 14px;
    width: 100%;
}


/* ------------------------------------------------------- legacy ka daera
   Purani screens .erp-legacy ke andar chalti hain. Wo lapet khud ek div hai,
   aur beech mein aaya hua har div layout ko thora sa badal deta hai — is liye
   isay poori tarah shaffaf rakha gaya hai: na apni koi jagah, na koi rang.  */

.work > .erp-legacy {
    display: block;
    min-width: 0;
    height: 100%;
}

/* Pehle yahan .erp-legacy-nav ka qaida tha — jab NavMenu apni purani markup
   deta tha aur usay sidebar mein lapetna parta tha. Ab NavMenu khud template ki
   nav-link / nav-sub-link / nav-l3-link markup banata hai, is liye us lapet ki
   zaroorat khatam. Qaida hata diya gaya taake koi ye na samjhe ke wo abhi
   bhi kahin lag raha hai. */


/* ------------------------------------------------------------------- menu
   NavMenu ab template ki apni nav markup deta hai (nav-link / nav-sub-link /
   nav-l3-link), is liye 99% shakal template ki CSS se aa rahi hai. Sirf wo
   haalatein yahan hain jo template ke demo menu mein thin hi nahi — kyunke
   wahan menu hard-coded tha aur hamesha mukammal hota tha.               */

/* Menu aane se pehle. Khali jagah chhorne par sidebar ek lamhe ke liye toota
   lagta hai; skeleton se pata chalta hai ke kuch aa raha hai. */
.nav-skeleton { pointer-events: none; opacity: .55; }

/* Menu hai hi nahi — user ko koi role nahi mila. Ye khali chhorna sab se bura
   hai: user ko lagta hai system kharab hai, jabke ye ek permission ka masla
   hai jo administrator hi theek kar sakta hai. */
.nav-empty {
    padding: 14px 16px;
    display: grid;
    gap: 4px;
}
.nav-empty b     { font-size: 12.5px; }
.nav-empty small { font-size: 11px; line-height: 1.5; opacity: .7; }

/* Menu ki aisi entry jis par koi screen nahi lagi. Isay link banana dhoka hai
   — dabane par kuch nahi hota. Dikhti hai, magar bujhi hui. */
.nav-dead {
    opacity: .45;
    cursor: default;
}

/* Jo folder maujooda screen tak jata hai — band ho tab bhi halka sa nishan,
   taake band menu mein bhi pata chale ke hum kahan khare hain. */
.nav-parent.has-current > .nav-label,
.nav-sub-parent.has-current { font-weight: 650; }


/* ---------------------------------------------------------- account panel
   Sirf parhne wali qatarein (company, unit, year). Template mein sab kuch
   button tha kyunke har cheez ek demo toast chalati thi; ye qatarein waqai
   sirf maloomat hain, is liye inhein button jaisa nahi dikhna chahiye.   */

.account-static {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    font-size: 12px;
}
.account-static > span:last-child { display: grid; line-height: 1.35; min-width: 0; }
.account-static b     { font-size: 12px; }
.account-static small { font-size: 10.5px; opacity: .65; }
.account-static b,
.account-static small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sign out ek form ke andar hai (cookie ki wajah se). Form khud ek block
   element hai aur account-item ki qatar torh deta — isay shaffaf rakha. */
.account-logout-form { display: block; margin: 0; }
.account-logout-form .account-item { width: 100%; }


/* --------------------------------------------------- change password ke qawaid
   Form ke OOPAR, neeche nahi. User ko pehle pata hona chahiye ke password kaisa
   hona chahiye — baad mein batana matlab usay do dafa likhwana.               */

.pw-rules {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 1px);
    background: var(--panelSoft, rgba(0,0,0,.02));
    font-size: 12px;
}
.pw-rules-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 650;
    margin-bottom: 7px;
}
.pw-rules-head .aj-icon { opacity: .7; }
.pw-rules ul  { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.pw-rules li  { line-height: 1.45; }
.pw-rules-foot{ margin: 8px 0 0; font-size: 11px; opacity: .7; }

.erp-login-foot a { text-decoration: none; }
.erp-login-foot a:hover { text-decoration: underline; }


/* ------------------------------------------------- menu ke lambe naam

   Do dafa ghalat kiya, ab wajah tak pahunch gaya.

   Pehle overlap tha: matn kai lines mein toot-ta tha magar template rows ko
   chhoti height deta hai, is liye ek item doosre par charh jata tha.

   Phir maine ellipsis laga diya — overlap khatam, magar naam parhne se raha:
   "Menu Rights Assignment (Role x Screen x Action)" kat kar
   "Menu Rights Assig..." reh jata hai. ERP mein menu ka naam hi wo cheez hai
   jis se user screen pehchanta hai; usay kaatna masla hal karna nahi, chhupa
   dena hai.

   ASAL WAJAH INDENT HAI. Template ka apna demo menu chhote naam rakhta tha
   ("Purchase Orders", "PR Reports"), is liye us ne khula haath se indent diya:
   level-2 par 31px, us ke andar level-3 par 19px — yani L4 tak pahunchte
   pahunchte 50px se ziyada sirf khali jagah, aur us ke baad nuqta aur gap.
   Hamare naam us se kahin lambe hain.

   Ab teen cheezein:
     1. indent kam — L2 22px, L3 12px (pehle 31 + 19)
     2. matn ko do line tak tootne ki ijazat, height auto — overlap ka
        koi imkaan nahi kyunke row khud bari ho jati hai
     3. do line se ziyada ho to wahan ellipsis, aur poora naam tooltip mein
        (NavMenu har row par title lagata hai)

   Level 1 ek hi line par rehta hai — wo collapsed sidebar mein chhupta hai
   aur wahan tootna shakal bigaar deta hai.                                  */

.sidebar .nav-children.level-2 { padding-left: 22px !important; }
.sidebar .nav-children.level-3 { padding-left: 12px !important; }

.sidebar .nav-link,
.sidebar .nav-sub-link,
.sidebar .nav-l3-link {
    height: auto !important;
    align-items: flex-start !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Level 1 — ek line, kyunke collapsed halat mein yehi chhupta hai. */
.sidebar .nav-label {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
}

/* Level 2 — matn span mein hai, do line tak khul sakta hai. */
.sidebar .nav-sub-link > span:not([class]) {
    min-width: 0;
    flex: 1 1 auto;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Level 3 (L4 screens) — matn SPAN MEIN NAHI, seedha link ke andar hai.

   Wo jaan boojh kar hai: .nav-l3-link > span ko template 5px ka grey nuqta
   bana deta hai — har seedhe span ko, sirf pehle ko nahi. Matn ko span mein
   daalne se wo doosra nuqta ban jata tha aur poori qatar grey pill jaisi
   dikhne lagti thi.

   Is liye wrap ka qaida yahan link par lagta hai, span par nahi. */
.sidebar .nav-l3-link {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
    text-align: left;
}

/* Icon aur nuqta matn ke saath oopar rahen, beech mein nahi — do line wale
   item mein beech mein aana tirha lagta hai. */
.sidebar .nav-sub-link > .nav-sub-icon,
.sidebar .nav-l3-link  > span:first-child { margin-top: 1px; }
.sidebar .nav-l3-link  > span:first-child { flex: 0 0 5px; }

/* ==========================================================================
   MENU KA QADAM  —  naapa gaya, andaza nahi

   MASLA (do dafa shikayat aayi: "ek dusre ke samne show nahi ho rahi")
   -------------------------------------------------------------------
   Maine do dafa AANDAZE se yahan CSS likhi, aur dono dafa ghalat likhi.
   Teesri dafa naap li. Naap (hx_nav.py) ye thi:

       level 1   nishan ka markaz 28.5      matn 49
       level 2   nishan ka markaz 45.5      matn 65      (qadam 17 / 16)
       level 3   nishan ka markaz 55.0      matn 72      (qadam  9 /  7)

   Yani level 3 apne walid se sirf 7px aage tha. Ye us se bhi bura hai ke
   wo bilkul barabar hota: 7px na "andar ka darja" parhne deta hai, na
   "seedhi qataar" — aankh ko sirf ek tirhapan mehsoos hota hai jis ka
   naam nahi liya jata.

   PICHLI DO KOSHISHEIN
   --------------------
   1.  `flex: 0 0 18px` seedha nuqte par. Us span ki koi aulaad nahi —
       YE KHUD nuqta hai (template us par width/height/border-radius/
       background lagata hai). 18px ne 5px ke gol nuqte ko 18x5 ki sleti
       PATTI bana diya. Screen par wo "icon gayab" jaisa lagta tha.

   2.  Phir maine dono taraf 6.5px hashiya de kar usay 18px ka khana bana
       diya — is niyat se ke "teenon level ka matn EK seedh mein" aa jaye.
       Niyat hi ghalat thi: teen level ka matn ek seedh mein aana chahiye
       hi nahi. Us se qadam 7px reh gaya — yani wohi tirhapan.

   HAL
   ---
   Nuqte ki jagah barhai gayi, magar nuqta wohi 5px gol. Ab:

       level 2 -> 3   nishan +15      matn +12

   — dono qadam itne hain ke darja saaf parha jaye. `hx_nav.py` in ka
   naap leti hai aur 10px se chhota qadam FAIL karti hai.

   (Pehle yahan `.nav-sub-icon { flex: 0 0 18px }` bhi likha tha. Wo qaida
   kabhi laga hi nahi — template `flex: 0 0 23px !important` deta hai, aur
   naap ne bataya ke icon 23px ka hi hai. Jhoota qaida hata diya gaya.)
   ========================================================================== */
.sidebar .nav-l3-link > span:first-child {
    flex: 0 0 5px;          /* nuqta khud — phailaya nahi jata */
    margin-left: 12px;
    margin-right: 6px;
}

/*  Aur teenon level ka gap ek jaisa.  */
.sidebar .nav-link,
.sidebar .nav-sub-link,
.sidebar .nav-l3-link { gap: 8px !important; }

.sidebar .nav-section {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================================
   USER MASTER

   Sab kuch template ke CSS variables par khara hai (--panel, --line, --ink,
   --primary, --radius), is liye theme, dark mode aur density khud-ba-khud
   lagte hain — koi rang yahan haath se nahi likha.
   ============================================================================ */

.erp-screen { display: grid; gap: 12px; padding: 0; }
/*  Padding 4px 2px 18px thi — chaaron taraf alag alag. Gap ab shell (.work)
    ka kaam hai: wohi 10px jo header aur pehli patti ke darmiyan nazar aata
    hai, chaaron taraf. Do jagah do number likhne se wo kabhi barabar nahi
    rehte.                                                                */

.erp-screen-head { display: flex; align-items: flex-start; gap: 16px; }
.erp-screen-head > div:first-child { flex: 1; min-width: 0; }
.erp-crumb { font-size: 11px; opacity: .6; margin-bottom: 2px; }
.erp-screen-head h1 { margin: 0; font-size: 21px; letter-spacing: -.01em; }
.erp-screen-head p  { margin: 3px 0 0; font-size: 12.5px; opacity: .7; }
.erp-screen-actions { display: flex; gap: 8px; flex: none; }

/* ------------------------------------------------------------- counters */
.stat-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.stat-tile {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 14px;
    background: var(--panel, #fff);
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 2px);
}
.stat-tile b     { display: block; font-size: 19px; line-height: 1.15; }
.stat-tile small { font-size: 11px; opacity: .65; }
.stat-ico {
    display: grid; place-items: center;
    width: 34px; height: 34px; flex: none;
    border-radius: 9px;
    background: var(--primarySoft, rgba(52,116,209,.12));
    color: var(--primary, #3474d1);
}
.stat-ico.ok   { background: color-mix(in srgb, var(--success, #1e965a) 12%, transparent);  color: var(--success, #1e965a); }
.stat-ico.warn { background: color-mix(in srgb, var(--warning, #b07d10) 14%, transparent); color: var(--warning, #b07d10); }

@media (max-width: 1200px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .stat-row { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------------------- toolbar */
.erp-toolbar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.erp-toolbar-search { flex: 1 1 320px; min-width: 240px; }
.erp-toolbar > .aj-field,
.erp-toolbar > .aj-searchable-select { flex: 0 1 220px; }

/* ----------------------------------------------------------------- grid */
.erp-grid-wrap {
    background: var(--panel, #fff);
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 2px);
    overflow: auto;
}
.erp-grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.erp-grid thead th {
    position: sticky; top: 0; z-index: 1;
    text-align: left; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .045em;
    padding: 10px 12px; white-space: nowrap;
    background: var(--panel, #fff);
    border-bottom: 1px solid var(--line, #dde4ea);
    opacity: .72;
}
.erp-grid tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line, #eef2f5); vertical-align: middle; }
.erp-grid tbody tr:last-child td { border-bottom: 0; }
.erp-grid tbody tr:hover { background: var(--primarySoft, rgba(52,116,209,.06)); }

/* Band account halka — mita hua nahi. Wo abhi bhi record hai. */
.erp-grid tr.row-off { opacity: .55; }

.col-user { min-width: 240px; }
.col-mid  { width: 1%; white-space: nowrap; }
.col-when { width: 1%; white-space: nowrap; opacity: .75; }
.col-act  { width: 44px; text-align: right; }

.cell-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-user-copy { display: grid; min-width: 0; line-height: 1.3; }
.cell-user-copy b     { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-user-copy small { font-size: 10.5px; opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cell-avatar {
    width: 32px; height: 32px; flex: none;
    border-radius: 50%; object-fit: cover;
    background: var(--line, #dde4ea);
}
.cell-avatar-empty {
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
    color: #fff;
    background: linear-gradient(135deg, var(--primary, #3474d1), var(--primary2, #2a5da8));
}

.cell-two { display: grid; line-height: 1.3; }
.cell-two small { font-size: 10.5px; opacity: .6; }
.muted-cell { opacity: .45; }

.flag-row { display: flex; gap: 4px; flex-wrap: wrap; }

.row-btn {
    display: grid; place-items: center;
    width: 28px; height: 28px; border: 0; border-radius: 7px;
    background: transparent; color: inherit; cursor: pointer; opacity: .55;
}
.row-btn:hover { background: var(--primarySoft, rgba(52,116,209,.12)); opacity: 1; }

.skeleton-row td { padding: 12px; }

.grid-empty { display: grid; justify-items: center; gap: 5px; padding: 40px 16px; text-align: center; }
.grid-empty .aj-icon { opacity: .3; transform: scale(1.6); margin-bottom: 8px; }
.grid-empty b     { font-size: 13px; }
.grid-empty small { font-size: 11.5px; opacity: .6; }

/* --------------------------------------------------------------- dialog */
.user-dialog-loading { display: flex; align-items: center; gap: 10px; padding: 40px; justify-content: center; opacity: .7; }
.user-dialog-body { padding-top: 14px; display: grid; gap: 14px; }

/* Do khane ki qatar. Chhoti screen par ek. */
.ff-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 820px) { .ff-2 { grid-template-columns: 1fr; } }


/*  ---------------------------------------------------------------------------
    FORM KI QATAR — WAPAS LE LI GAYI

    Yahan do qaide the jo taak ginti wale grid ko theek karte the: theek teen
    khaane par teen column, aur baqi taak ginti par aakhri khaana poori
    chaurai. Dono `:has()` par khare the.

    User ne build kar ke dekha aur form TOOT gaya — Identity aur Belongs to
    aapas mein saath saath aa gaye, aur beech mein khali dabbe. Main ise yahan
    dobara paida nahi kar saka: mere harness mein wohi markup theek chalta hai
    (Identity teen column, Details 2+2+1). Yani asal DOM mein koi cheez hai jo
    harness mein nahi — shayad kisi component ka koi izafi bachcha, ya kisi
    aur qaide ke saath jorh.

    Aur yehi wajah hai ke qaida wapas ja raha hai, "theek" karne ki koshish
    nahi ho rahi:

    > Jo cheez maine TORRI ho aur jis ka sabab mujhe MAALOOM na ho, us par
    > doosra andaza lagana pehle andaze se bura hai. Pehle wapas lo, phir
    > dekh kar karo.

    Yehi kaam dobara hoga, magar us tareeqe se jis ka natija pehle se maloom
    ho: jin sections mein waqai teen khaane hain, un ki class screen mein
    `ff-2` se `ff-3` kar di jaye. `ff-3` pehle se maujood hai, pehle se
    istemal mein hai, aur us mein koi `:has()` nahi.
    --------------------------------------------------------------------------- */


.user-identity { display: grid; grid-template-columns: 168px 1fr; gap: 20px; align-items: start; }
@media (max-width: 820px) { .user-identity { grid-template-columns: 1fr; justify-items: center; } }

.user-identity-fields { display: grid; gap: 12px; min-width: 0; }

.user-photo-pane { display: grid; justify-items: center; gap: 7px; }
.user-photo {
    width: 116px; height: 116px; border-radius: 50%;
    object-fit: cover; background: var(--line, #dde4ea);
}
.user-photo-empty {
    display: grid; place-items: center;
    font-size: 34px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--primary, #3474d1), var(--primary2, #2a5da8));
}
.user-photo-pick { cursor: pointer; }
.user-photo-pick input[type=file] { display: none; }
.user-photo-hint { font-size: 10.5px; opacity: .55; text-align: center; }

.linklike {
    border: 0; background: none; padding: 0; cursor: pointer;
    font-size: 11.5px; color: var(--primary, #3474d1); text-decoration: underline;
}

.field-switches { display: grid; gap: 8px; align-content: center; }
.field-switches.wrap { grid-auto-flow: column; grid-auto-columns: max-content; gap: 18px; }
@media (max-width: 820px) { .field-switches.wrap { grid-auto-flow: row; gap: 8px; } }

.tab-head { margin: 6px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; opacity: .6; }
.tab-lead { margin: 0; font-size: 12px; line-height: 1.55; opacity: .7; }

.read-pair {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 9px 12px; font-size: 12px;
    background: var(--panelSoft, rgba(0,0,0,.02));
    border-radius: calc(var(--radius, 5) * 1px);
}
.read-pair span { opacity: .65; }

.state-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 820px) { .state-grid { grid-template-columns: 1fr 1fr; } }
.state-grid > div {
    display: grid; gap: 2px; padding: 9px 11px;
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 1px);
}
.state-grid span { font-size: 10.5px; opacity: .6; }
.state-grid b    { font-size: 12.5px; }

/* Hafte ke din. Chip is liye ke saat checkbox ek qatar mein bhare lagte hain. */
.day-row { display: flex; gap: 6px; flex-wrap: wrap; }
.day-chip {
    min-width: 46px; padding: 6px 9px;
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 1px);
    background: transparent; color: inherit;
    font-size: 11.5px; font-weight: 600; cursor: pointer;
    opacity: .5;
}
.day-chip.on {
    opacity: 1;
    border-color: var(--primary, #3474d1);
    background: var(--primarySoft, rgba(52,116,209,.12));
    color: var(--primary, #3474d1);
}



/* ============================================================================
   ICON KI SIZE  —  aur ye teen screens ka asal mujrim tha

   Template ki CSS mein .aj-icon svg ka koi BUNYADI qaida hai hi nahi. Har
   rule kisi parent ke andar likha hai:

        .aj-multi-box .tag .aj-icon svg  { width:11px }
        .v36-pivot > button .aj-icon svg { width:14px }
        .aj-searchable-search-box > .aj-icon svg { width:13px !important }

   Yani template ne sirf UN jagahon par size di jahan us ka apna demo icon
   rakhta tha. Jahan wo parent na ho, SVG ke paas na width hai na height —
   aur viewBox wala SVG bina width ke apne dabbe ki POORI jagah le leta hai.

   Isi liye User Master par ek icon aadha safha kha gaya, aur us ne stat tiles,
   toolbar aur grid sab ko neeche dhakel diya. Maine pehle sirf apni nayi
   classes par size lagai thi — wo adhoora ilaj tha, kyunke masla kisi ek
   class ka nahi, poori file mein bunyadi qaida na hone ka tha.

   Ab ek bunyadi qaida. Template ke apne parent-wale rules is se ziyada khaas
   hain, is liye jahan wo lagte hain wahan wohi chalenge — ye sirf un jagahon
   ko sambhalta hai jo warna khali reh jatin.
   ============================================================================ */

.aj-icon        { display: inline-flex; align-items: center; flex: none; }
.aj-icon svg    { width: 16px; height: 16px; }

/* Jahan bara chahiye, wahan saaf likha hua. */
.stat-ico svg            { width: 18px; height: 18px; }
.grid-empty .aj-icon svg { width: 34px; height: 34px; }
.grid-empty .aj-icon     { transform: none; opacity: .3; }
.user-photo-pick svg     { width: 14px; height: 14px; }


/* ------------------------------------------- legacy ke element selectors

   app.css ke andar chand qaide element par lage hain (.erp-legacy h1, h2, h3,
   a, code). MainLayout har page ko .erp-legacy mein lapetta hai, is liye wo
   nayi screens par bhi lag jate hain — aur unwan chhota ya rang alag kar dete
   hain.

   Yahan sirf .erp-screen ke andar unhein wapas seedha kiya ja raha hai. Ye
   lapet us din khatam ho jayegi jab purani screens Aj* par muntaqil ho jayen;
   tab tak ye chand line kaafi hain.                                          */

.erp-legacy .erp-screen h1 { font-size: 21px; margin: 0; letter-spacing: -.01em; }
.erp-legacy .erp-screen h2 { font-size: 15px; margin: 0; }
.erp-legacy .erp-screen h4 { margin: 6px 0 0; }
.erp-legacy .erp-screen a  { color: inherit; text-decoration: none; }
.erp-legacy .erp-screen code {
    background: var(--panelSoft, rgba(0,0,0,.04));
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11.5px;
}


/* ============================================================================
   LABEL AUR LEADING ICON

   Template ka qaida sirf .aj-field par khara hai:

        .aj-field.has-leading .aj-label { left: 28px !important }

   Magar dropdown ka root .aj-dropdown hai, .aj-field nahi — is liye wo qaida
   wahan lagta hi nahi tha. Ab AjDropdown has-leading class lagata hai, aur
   yahan usi ke liye wohi faasla likha hai.

   28px isi liye ke .aj-leading ki chaurai theek 28px hai. Focus par 26px —
   template apni field par bhi 2px andar aata hai, taake dono ek jaise lagen. */

/*  28px GHALAT THA — aur wohi wajah thi ke label icon par charh raha tha.

    Template khud .aj-leading ko 30px par shuru karta hai aur neeche ek aur
    qaida us ko 32px kar deta hai:

        .aj-leading, .aj-trailing { width: 32px; flex: 0 0 32px }

    Maine 28px pehli (30px wali) qeemat dekh kar likha tha, aur 28 < 32 ka
    matlab hai label icon ke DABBE ke andar shuru hota hai. Glyph 15px ka hai
    aur beech mein hai, is liye takraao sirf ek do point ka rehta hai — bas
    itna ke aankh ko ganda lagta hai.

    Sahi jawab template ke apne number field ke paas tha:

        .aj-number-field.has-leading:not(.floating) .aj-label { left: 34px }

    34px — yani icon ka poora dabba (32) plus 2px saans. Wohi ab har us control
    par hai jis par leading icon hai: field, dropdown, number, sab.

    FLOATING par 26px: us waqt label dabbe ke andar nahi, oopar wali lakeer par
    baithta hai, aur wahan icon hai hi nahi. 26px is liye ke wo matn ke oopar
    aaye, icon ke oopar nahi — bilkul wahi jagah jo template input ko deta hai. */

.aj-field.has-leading:not(.floating):not(:focus-within) .aj-label,
.aj-dropdown.has-leading:not(.floating):not(.open):not(:focus-within) .aj-label,
.aj-number-field.has-leading:not(.floating):not(:focus-within) .aj-label {
    left: 34px !important;
}

/*  Yahan "floating par left: 26px" ka qaida tha. Hata diya gaya.

    Wo Phase 6 ka faisla tha, jab label icon ke oopar se hat kar lakeer par
    jata tha aur 26px matn ke oopar aata tha. Ab har control ka notch ek hi
    jagah par hai (--aj-outline-label-left), chahe icon ho ya na ho — aur do
    mukhtalif jawab rakhne ka matlab sirf ye hai ke kisi din galat wala jeet
    jaye. Template ka apna 26px wala qaida apni jagah hai; hamare screens par
    notch wala qaida us se bhaari hai.                                       */

/*  Dropdown ka label bhi WAISE HI upar uthta hai jaise input ka.

    Template mein .aj-select.floating aur .aj-select.open ke qaide maujood hain,
    magar un par !important nahi hai — aur oopar wale has-leading qaide par hai.
    Natija ye ke leading icon wale dropdown par label upar to jata tha magar
    jagah wohi purani rehti thi. Ab dono halaton ka apna qaida hai, dono par
    !important, is liye tarteeb ka jhagra khatam.                             */

.aj-dropdown.floating .aj-label,
.aj-dropdown.open .aj-label,
.aj-dropdown:focus-within .aj-label {
    top: 0;
    transform: translateY(-50%);
    background: var(--surface, #fff);
    padding: 0 4px;
    color: var(--primary, #3474d1);
    font-size: var(--control-floating, 10px);
}


/* ============================================================================
   PREMIUM POLISH

   Sab kuch template ke variables par — koi rang haath se nahi. Maqsad ye ke
   screen sanjeeda lage aur nazar wahan jaye jahan kaam hai, na ke sajawat par.
   ============================================================================ */

/* ------------------------------------------------------------ stat tiles
   Har tile ke baayen ek baareek patti. Rang se yaad rehta hai ke kaun si
   ginti kis qism ki hai — aankh number parhne se pehle hi jaan leti hai. */

.stat-tile {
    position: relative;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.stat-tile::before {
    content: "";
    position: absolute; inset: 0 auto 0 0;
    width: 3px;
    background: var(--primary, #3474d1);
    opacity: .85;
}
.stat-tile:nth-child(2)::before { background: var(--success, #1e965a); }
.stat-tile:nth-child(3)::before,
.stat-tile:nth-child(4)::before { background: var(--warning, #c8912a); }
.stat-tile:nth-child(5)::before { background: var(--muted, #6b7a89); }

.stat-tile:hover {
    border-color: color-mix(in srgb, var(--primary, #3474d1) 35%, var(--line, #dde4ea));
    box-shadow: 0 2px 10px rgba(16, 32, 48, .06);
    transform: translateY(-1px);
}

/* Ginti tabular figures mein — warna 1 aur 7 ki chaurai alag hoti hai aur
   qatar mein number hilte hue lagte hain. */
.stat-tile b { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }


/* ------------------------------------------------------------------ grid */

.erp-grid-wrap { box-shadow: 0 1px 2px rgba(16, 32, 48, .04); }

/*  backdrop-filter YAHAN SE HATA DIYA GAYA — aur wajah likh dena zaroori hai.

    Ye line saturate(1.2) thi: ek sajawat jo NAZAR HI NAHI AATI, kyunke sar ka
    background poora bhara hua hai — us ke peechhe dekhne ko kuch hai hi nahi.

    Magar backdrop-filter (transform ki tarah) apne andar ke har
    position: fixed element ke liye NAYA containing block bana deta hai. Filter
    ki qatar ka dropdown isi <th> ke andar hai, aur portal.js us ke flyout ko
    fixed par bithata hai. Natija: flyout viewport ke bajaye <th> se naapa
    jane laga aur theek 207px neeche, grid ke aakhir mein ja gira — wohi jo
    screenshot mein nazar aaya.

    Ek be-asar sajawat ne do parat neeche ek asli cheez toor di. Browser se
    ancestor chain poochh kar pakra gaya: sirf <th> par backdrop-filter tha,
    aur us ka top (207) galti ke faasle se harf ba harf mila.                */

.erp-grid thead th {
    background: color-mix(in srgb, var(--panel, #fff) 92%, var(--line, #dde4ea));
}

/* Qatar par hover — baayen ek patti, taake aankh poori qatar ko ek cheez
   samjhe. Sirf rang badalna chaudi table par kaafi nahi hota. */
.erp-grid tbody tr { position: relative; transition: background .12s ease; }
.erp-grid tbody tr td:first-child { position: relative; }
.erp-grid tbody tr:hover td:first-child::before {
    content: "";
    position: absolute; inset: 0 auto 0 0;
    width: 2px;
    background: var(--primary, #3474d1);
}

.erp-grid tbody tr:hover .row-btn { opacity: .9; }
.erp-grid .row-btn { transition: opacity .12s ease, background .12s ease; }

/* Avatar ke gird ek baareek halqa — tasveer aur safed background ke beech
   kinara saaf rehta hai. */
.cell-avatar {
    box-shadow: 0 0 0 1px rgba(16, 32, 48, .08);
}
.dark .cell-avatar { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }

.erp-grid code {
    font-size: 11.5px;
    letter-spacing: -.01em;
}

/* Tareekh aur ginti tabular — qatar mein seedhi lagti hain. */
.col-when, .erp-grid .cell-two small { font-variant-numeric: tabular-nums; }


/* ---------------------------------------------------------------- badges
   Template ke .state chhote aur naram hain. ERP mein ye halat batate hain,
   is liye inhein parhne ke qabil hona chahiye — magar chillana nahi. */

.flag-row .state {
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .02em;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
}


/* ---------------------------------------------------------------- toolbar */

.erp-toolbar {
    padding: 12px 14px;
    background: var(--panel, #fff);
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 2px);
}


/* ----------------------------------------------------------------- dialog */

.user-dialog .aj-dialog-body { padding-top: 6px; }

/* Tab ke neeche ek baareek lakeer — tab aur content alag mehsoos hon. */
.user-dialog .v39-tabs { border-bottom: 1px solid var(--line, #dde4ea); }

.user-dialog-body { padding-top: 16px; }

/* Tasveer ke gird halqa aur us par hover — ye dabne wali cheez hai, aur
   dikhna chahiye ke dabne wali hai. */
.user-photo { box-shadow: 0 0 0 1px rgba(16, 32, 48, .08), 0 2px 10px rgba(16, 32, 48, .08); }
.user-photo-pick { transition: background .15s ease; }

/* Section ke unwan ke oopar thori khuli jagah — tab ke andar ke hisse alag
   nazar aayen. */
.tab-head {
    padding-top: 10px;
    border-top: 1px solid var(--line, #eef2f5);
}
.user-dialog-body > .tab-head:first-child { border-top: 0; padding-top: 0; }

.state-grid > div { background: var(--panelSoft, rgba(0,0,0,.015)); }
.state-grid b { font-variant-numeric: tabular-nums; }


/* -------------------------------------------------------------- focus ring
   Keyboard se chalne wale ko hamesha pata hona chahiye ke wo kahan hai.
   :focus-visible sirf keyboard par lagta hai — mouse se click karne par
   halqa nahi aata, is liye ye shakal nahi bigaarta.                        */

.erp-screen :focus-visible,
.user-dialog :focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary, #3474d1) 70%, transparent);
    outline-offset: 2px;
    border-radius: 6px;
}


/* ------------------------------------------------------------- chhoti screen */

@media (max-width: 900px) {
    .erp-screen-head { flex-direction: column; }
    .erp-screen-actions { width: 100%; }
    .erp-toolbar > .aj-dropdown,
    .erp-toolbar > .aj-searchable-select { flex: 1 1 100%; }

    /* Chaudi table ko nichore ke bajaye khiskane do — nichorne se har khana
       parhne ke qabil nahi rehta. */
    .erp-grid { min-width: 900px; }
}


/* ============================================================================
   SHARED SCREENS  —  ErpListView / ErpEditView / ErpField / ErpAlert

   Saat list aur saat edit screens in teen components se banti hain. Un ka
   markup template ke dhanche par le aaya gaya hai, is liye ye CSS un chaudah
   screens par ek saath lagti hai — kisi screen ko haath lagaye baghair.
   ============================================================================ */

.erp-card {
    background: var(--panel, #fff);
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 2px);
    box-shadow: 0 1px 2px rgba(16, 32, 48, .04);
}
.erp-card-pad { padding: 18px; }

.erp-toolbar .grow { flex: 1 1 auto; }

.erp-count { font-size: 12px; opacity: .7; white-space: nowrap; }
.erp-count b { font-variant-numeric: tabular-nums; }

.row-actions { display: flex; gap: 2px; justify-content: flex-end; }
.row-btn-danger:hover { background: color-mix(in srgb, var(--danger, #c33c32) 12%, transparent); color: var(--danger, #c33c32); }
a.row-btn { text-decoration: none; }

.erp-alert { margin: 0; }
.erp-alert .linklike { margin-left: 6px; }


/* ------------------------------------------------------------- form bar
   Save ki patti neeche chipki hui. Lambi form par Save neeche hota hai aur
   user ko scroll kar ke dhoondna parta hai — aur jise dhoondna parey wo
   bhoola bhi ja sakta hai.                                                 */

.form-bar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--panel, #fff) 94%, transparent);
    backdrop-filter: blur(6px);
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 2px);
    box-shadow: 0 -2px 12px rgba(16, 32, 48, .06);
}
.form-bar-hint { flex: 1; font-size: 11.5px; opacity: .6; }

.form-skeleton { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-skeleton > div { display: grid; gap: 7px; }
@media (max-width: 820px) { .form-skeleton { grid-template-columns: 1fr; } }


/* ====================================================== purane raw inputs

   Edit screens ke andar abhi bhi saade <input>, <select> aur <textarea> hain —
   poore portal mein 148. Unhein ek ek kar ke Aj* controls par le jana bara
   kaam hai aur us mein har screen chhuni paregi.

   Filhal CSS se wohi shakal de di gayi hai jo template ke apne field ki hai:
   wohi border, wohi radius, wohi focus ka halqa, wohi height. Nateeja ye ke
   purani screens aaj hi nayi lagti hain, aur jab wo Aj* par jayen to nazar
   mein koi jhatka nahi aayega — shakal pehle se wohi hogi.

   Ye qaide SIRF .erp-screen ke andar lagte hain, taake template ke apne
   controls (jin ki apni CSS hai) is se bilkul mehfooz rahen.                */

.erp-screen .field { display: grid; gap: 5px; min-width: 0; }

.erp-screen .field > label {
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .01em;
    color: var(--muted, #667b88);
}
.erp-screen .field .req { color: var(--danger, #c33c32); margin-left: 2px; }

.erp-screen .field input:not([type=checkbox]):not([type=radio]),
.erp-screen .field select,
.erp-screen .field textarea {
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    font: inherit;
    font-size: 12.5px;
    color: var(--ink, #16202a);
    background: var(--panel, #fff);
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 1px);
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.erp-screen .field input:hover:not(:disabled),
.erp-screen .field select:hover:not(:disabled),
.erp-screen .field textarea:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--primary, #3474d1) 40%, var(--line, #dde4ea));
}

/* Focus par halqa — border ka rang badalna akela kaafi nahi, wo teekhi
   roshni mein nazar nahi aata. */
.erp-screen .field input:focus,
.erp-screen .field select:focus,
.erp-screen .field textarea:focus {
    border-color: var(--primary, #3474d1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #3474d1) 18%, transparent);
}

.erp-screen .field input:disabled,
.erp-screen .field select:disabled,
.erp-screen .field textarea:disabled {
    background: var(--panelSoft, rgba(0,0,0,.03));
    opacity: .7;
    cursor: not-allowed;
}

.erp-screen .field textarea { min-height: 76px; resize: vertical; line-height: 1.5; }

/* Ghalat khana — rang ke saath saath border bhi, taake rang na pehchanne
   wale ko bhi pata chale. */
.erp-screen .field-bad input,
.erp-screen .field-bad select,
.erp-screen .field-bad textarea { border-color: var(--danger, #c33c32); }
.erp-screen .field-bad > label { color: var(--danger, #c33c32); }

.erp-screen .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.erp-screen .form-grid .w-full { grid-column: 1 / -1; }
@media (max-width: 900px) { .erp-screen .form-grid { grid-template-columns: 1fr; } }

/* Checkbox aur radio ko chaurai nahi chahiye — wo qatar mein matn ke saath
   chalte hain. */
.erp-screen .field label.check,
.erp-screen label.check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink, #16202a);
    cursor: pointer;
}
.erp-screen input[type=checkbox],
.erp-screen input[type=radio] { width: 15px; height: 15px; accent-color: var(--primary, #3474d1); }


/* ============================================================================
   MATRIX AUR TREE  —  paanch custom screens

   MenuRights aur ActionRights ErpMatrix par khare hain, MenuMaster ErpTree
   par. Un components ka markup nahi badla (wo theek kaam kar raha hai) —
   sirf .erp-screen ke andar un ki shakal template jaisi kar di gayi hai.
   ============================================================================ */

.erp-screen .split {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 14px;
    align-items: start;
}
@media (max-width: 1100px) { .erp-screen .split { grid-template-columns: 1fr; } }

.erp-screen .split-left  { max-height: 70vh; overflow: auto; }
.erp-screen .split-right { min-width: 0; }


/* ------------------------------------------------------------------ tree */

.erp-screen .tree, .erp-screen .tree ul { list-style: none; margin: 0; padding: 0; }
.erp-screen .tree ul {
    margin-left: 9px;
    padding-left: 11px;
    border-left: 1px solid var(--line, #dde4ea);
}
.erp-screen .tree summary { cursor: pointer; list-style: none; }
.erp-screen .tree summary::-webkit-details-marker { display: none; }

/* Kholne ka nishan khud banaya — browser ka default har browser mein alag
   dikhta hai, aur teen browser mein teen shakalein achi nahi lagtin. */
.erp-screen .tree summary::before {
    content: "";
    display: inline-block;
    width: 0; height: 0;
    margin-right: 6px;
    border: 4px solid transparent;
    border-left-color: currentColor;
    opacity: .45;
    transition: transform .12s ease;
    vertical-align: middle;
}
.erp-screen .tree details[open] > summary::before { transform: rotate(90deg); }

.erp-screen .tree-label,
.erp-screen .tree-leaf {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    margin: 1px 0;
    border-radius: calc(var(--radius, 5) * 1px);
    font-size: 12.5px;
    cursor: pointer;
    transition: background .12s ease;
}
.erp-screen .tree-label:hover,
.erp-screen .tree-leaf:hover { background: var(--primarySoft, rgba(52,116,209,.08)); }

.erp-screen .tree-label.selected,
.erp-screen .tree-leaf.selected {
    background: var(--primarySoft, rgba(52,116,209,.14));
    color: var(--primary, #3474d1);
    font-weight: 650;
}

.erp-screen .tree code {
    font-size: 10.5px;
    opacity: .6;
    font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------- matrix
   Matrix chaudi hoti hai — 17 columns tak. Row ka sar aur column ka sar
   dono chipke rehte hain, warna beech mein pahunch kar pata hi nahi chalta
   ke ye khana kis role aur kis action ka hai.                            */

.erp-screen .matrix-wrap {
    overflow: auto;
    max-height: 68vh;
    background: var(--panel, #fff);
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 2px);
}

.erp-screen table.matrix { border-collapse: separate; border-spacing: 0; font-size: 12px; }

.erp-screen .matrix thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--panel, #fff);
    border-bottom: 1px solid var(--line, #dde4ea);
    padding: 8px 6px;
}
.erp-screen .matrix-corner {
    position: sticky; left: 0; z-index: 3;
    background: var(--panel, #fff);
    text-align: left;
    min-width: 220px;
}
.erp-screen .matrix-row {
    position: sticky; left: 0; z-index: 1;
    background: var(--panel, #fff);
    text-align: left;
    border-right: 1px solid var(--line, #dde4ea);
    padding: 6px 10px;
}

/* Column ka naam khada — 17 seedhe naam table ko teen guna chaura kar dete
   hain aur phir kuch bhi ek screen par nahi aata. */
.erp-screen .matrix-col-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-size: 11px;
    font-weight: 650;
    max-height: 130px;
}

.erp-screen .matrix-cell {
    text-align: center;
    padding: 5px;
    border-bottom: 1px solid var(--line, #eef2f5);
}
.erp-screen .matrix tbody tr:hover .matrix-cell,
.erp-screen .matrix tbody tr:hover .matrix-row {
    background: var(--primarySoft, rgba(52,116,209,.06));
}

/* Jo khana mumkin hi nahi — us par checkbox dikhana hi ghalat hai. Khali
   jagah se saaf pata chalta hai ke yahan kuch hai hi nahi. */
.erp-screen .matrix-cell.not-allowed { background: repeating-linear-gradient(
        45deg, transparent, transparent 4px,
        color-mix(in srgb, var(--line, #dde4ea) 45%, transparent) 4px,
        color-mix(in srgb, var(--line, #dde4ea) 45%, transparent) 8px); }

.linklike-danger { color: var(--danger, #c33c32); }
.btn.aj-button.danger { color: var(--danger, #c33c32); border-color: color-mix(in srgb, var(--danger, #c33c32) 40%, var(--line, #dde4ea)); }
.btn.aj-button.danger:hover { background: color-mix(in srgb, var(--danger, #c33c32) 10%, transparent); }


/* ============================================================================
   ============================================================================

   MASTER SETUP  —  47 screens

   Ye hissa un 47 screens ke liye hai jo 01.01.* aur 01.02.* mein hain. Un mein
   se 46 wohi ErpListView / ErpEditView istemal karti hain jo pehle se maujood
   hain, is liye neeche jo bhi likha hai wo EK SATH saari screens par lagta hai
   — kisi ek screen ki apni CSS kahin nahi hai.

   Teen hisse:
     1. jo pehle se tha aur ab tang par gaya (fixes)
     2. form ke hisse (form-section) — nayi cheez
     3. do khaas screens: organisation tree aur print format designer

   ============================================================================
   ============================================================================ */


/* ============================================================================
   1.  FIXES  —  jo pehle theek tha magar naye screens par tang par gaya
   ============================================================================ */

/* ---------------------------------------------------------- stat tiles

   Pehle yahan repeat(5, 1fr) likha tha, kyunke User Master par theek paanch
   tiles thin. Organisation Structure par AATH hain — aur paanch khanon mein
   aath tiles ka matlab hai doosri qatar mein teen tiles jo baqiyon se teen
   guna chaudi ho jati hain.

   auto-fit + minmax se ginti ki qaid khatam. Jitni tiles hon, utni chaurai
   mein bant jayengi, aur chhoti screen par khud neeche chali jayengi.       */

.stat-row {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* Paanch se ziyada tiles par patti ka rang ginti se nahi, kism se aana
   chahiye. nth-child ke purane qaide sirf paanch tak the — chhe se aage sab
   ek jaise reh jate the. */
.stat-row-6 .stat-tile:nth-child(n+6)::before { background: var(--muted, #6b7a89); }

/* --------------------------------------------------------- row actions

   .col-act 44px thi — wo ek button ke liye theek thi (User Master par sirf
   Edit hai). Master Setup ki har list par DO hain, Edit aur Delete, aur do
   28px ke button 44px mein nahi aate: doosra button neeche gir jata tha aur
   qatar ki oonchai barh jati thi.                                          */

.col-act { width: 1%; min-width: 76px; white-space: nowrap; }

/* ------------------------------------------------------------- toolbar

   .aj-field ko 220px ki jagah milti hai. AjSwitch ka root .switchline hai,
   .aj-field nahi — is liye us par koi qaida nahi tha aur wo baqi khanon ke
   sath khinch kar oopar chala jata tha.                                    */

.erp-toolbar > .switchline {
    flex: none;
    align-self: center;
    padding-bottom: 2px;
}

/* -------------------------------------------------------- grid columns

   .right app.css mein hai magar ".erp-legacy .right" ki shakal mein. Wo
   lapet us din khatam hogi jab purani screens Aj* par chali jayengi, aur us
   din har ginti ka khana baayen ja lagta. Yahan .erp-grid ke apne andar
   likha hua hai, kisi lapet ke bharose nahi.                               */

.erp-grid .right,
.erp-grid th.right,
.erp-grid td.right { text-align: right; font-variant-numeric: tabular-nums; }

/* Band record — list mein rehta hai magar chillata nahi. */
.erp-grid tbody tr.row-off td { opacity: .55; }
.erp-grid tbody tr.row-off:hover td { opacity: .8; }

/* Grid mein khali khana. Bilkul khali chhorna theek nahi lagta — nazar ko
   pata nahi chalta ke wahan kuch hai hi nahi ya load nahi hua. */
.erp-grid td:empty::after { content: "—"; opacity: .3; }


/* ============================================================================
   2.  FORM KE HISSE  —  form-section

   Master Setup ki kuch forms par 26 khane hain (Warehouse). Chhabbis khane ek
   lambi qatar mein rakh dena technically theek hai aur amalan na-qabil-e-istemal:
   banda oopar se neeche parhta jata hai aur usay kabhi pata nahi chalta ke
   kaun sa khana kis se ta'alluq rakhta hai.

   Is liye har form paanch hisson mein bant gayi hai, aur tarteeb har screen
   par WOHI hai:

       Identity     is ka naam aur code
       Belongs to   ye kis ke neeche hai
       Details      is ke kaam ki qeematein
       Options      switch — ye kaise bartaao karta hai
       Notes        lamba matn

   Ek hi tarteeb har screen par hone ka faida ye hai ke chalees screens sikhne
   ke bajaye ek sikhni parti hai.
   ============================================================================ */

.erp-screen .form-grid { gap: 18px; }

.form-section {
    display: grid;
    gap: 12px;
    padding: 16px 0 0;
    border-top: 1px solid var(--line, #eef2f5);
}
.form-section:first-child { padding-top: 0; border-top: 0; }

.form-section-head { display: flex; align-items: flex-start; gap: 10px; }

.form-section-head h3 {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ink, #16202a);
}
.form-section-head p {
    margin: 2px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    opacity: .6;
}

/* Unwan ke saath ek chhota nishan. Lambi form par scroll karte hue aankh
   nishan se hissa pehchan leti hai, matn parhne se pehle. */
.form-section-ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px; height: 26px;
    border-radius: 8px;
    background: var(--primarySoft, rgba(52,116,209,.12));
    color: var(--primary, #3474d1);
}
.form-section-ico svg { width: 14px; height: 14px; }

/* Ek khane ki qatar — lamba matn poori chaurai leta hai. */
.ff-1 { display: grid; gap: 12px; }

/* Teen khanon ki qatar — chhoti qeematein (naap, ginti) ke liye. */
.ff-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; }
@media (max-width: 1000px) { .ff-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .ff-3 { grid-template-columns: 1fr; } }

/* Chaar margin aur copies — paanch chhote khane ek qatar mein. */
.margin-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 900px) { .margin-grid { grid-template-columns: repeat(2, 1fr); } }

/* Switch ki qatar — dabba jitni chaurai leta hai utni hi, poori nahi. */
.field-switches.wrap { row-gap: 10px; }
.form-section .field-switches.wrap { padding: 2px 0; }


/* ============================================================================
   3a.  ORGANISATION STRUCTURE TREE  (01.01.01.08)
   ============================================================================ */

.org-tree { font-size: 12.5px; }
.org-tree ul { margin-left: 11px; padding-left: 13px; }

/* Poori qatar ek cheez lagni chahiye — nishan, naam aur ginti. Isi liye
   hover aur "chuna hua" dono qatar par lagte hain, sirf matn par nahi. */
.org-row {
    display: flex;
    align-items: center;
    gap: 2px;
    border-radius: calc(var(--radius, 5) * 1px);
    transition: background .12s ease;
}
.org-row:hover { background: var(--primarySoft, rgba(52,116,209,.07)); }
.org-row.selected { background: var(--primarySoft, rgba(52,116,209,.14)); }
.org-row.off { opacity: .5; }

/* Kholne ka teer. Alag button is liye ke node KHOLNA aur node CHUNNA do
   alag irade hain — ek hi jagah par dono rakhne se banda tafseel dekhne ke
   liye click karta hai aur shakh band ho jati hai. */
.org-twist {
    display: grid; place-items: center;
    flex: none;
    width: 22px; height: 26px;
    border: 0; background: none; padding: 0;
    color: inherit; opacity: .45; cursor: pointer;
    transition: transform .14s ease, opacity .12s ease;
}
.org-twist:hover { opacity: 1; }
.org-twist.open { transform: rotate(90deg); }
.org-twist svg { width: 13px; height: 13px; }
.org-twist-empty { cursor: default; }

.org-label {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    padding: 5px 8px 5px 2px;
    border: 0; background: none;
    color: inherit; text-align: left; cursor: pointer;
    font: inherit;
}

.org-text { display: grid; min-width: 0; line-height: 1.35; }
.org-text b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-text small { font-size: 10.5px; opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.org-count {
    flex: none;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--panelSoft, rgba(0,0,0,.05));
    font-size: 10px; font-weight: 650;
    font-variant-numeric: tabular-nums;
    opacity: .7;
}

/* Har darje ka apna rang. Aath darje hain aur sab ke naam chhote hain — rang
   se level pehchanna naam parhne se tez hai, khaas tor par jab darakht khula
   hua ho. */
.org-kind-ico {
    display: grid; place-items: center;
    flex: none;
    width: 24px; height: 24px;
    border-radius: 7px;
    background: var(--panelSoft, rgba(0,0,0,.05));
    color: var(--muted, #667b88);
}
.org-kind-ico svg { width: 13px; height: 13px; }

.org-kind-ico.enterprise { background: rgba(103, 80, 164, .14); color: #6750a4; }
.org-kind-ico.company    { background: rgba(52, 116, 209, .14); color: #3474d1; }
.org-kind-ico.branch     { background: rgba(20, 140, 130, .14); color: #148c82; }
.org-kind-ico.unit       { background: rgba(200, 140, 20, .16); color: #a8760f; }
.org-kind-ico.department { background: rgba(30, 150, 90, .14);  color: #1e965a; }
.org-kind-ico.section    { background: rgba(90, 120, 150, .16); color: #52708c; }
.org-kind-ico.line       { background: rgba(196, 90, 60, .14);  color: #b8532f; }
.org-kind-ico.warehouse  { background: rgba(120, 110, 100, .16); color: #7a6f64; }

/* ------------------------------------------------------- daayen ka pane */

.org-detail { display: grid; gap: 10px; }

.org-detail-head { display: flex; align-items: flex-start; gap: 12px; }
.org-detail-head .org-kind-ico { width: 40px; height: 40px; border-radius: 11px; }
.org-detail-head .org-kind-ico svg { width: 20px; height: 20px; }
.org-detail-head > div { display: grid; gap: 3px; min-width: 0; }
.org-detail-head small {
    font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .06em; opacity: .55;
}
.erp-legacy .erp-screen .org-detail-head h2 { font-size: 17px; margin: 0; letter-spacing: -.01em; }

.org-detail-actions { display: flex; gap: 8px; padding-top: 4px; }

/* Raasta lamba hota hai — aath darje tak. Toot kar agli line par jana
   theek hai; nichorna nahi. */
.org-detail .read-pair b {
    text-align: right;
    line-height: 1.5;
    word-break: break-word;
}


/* ============================================================================
   3b.  PRINT FORMAT DESIGNER  (01.02.01.17)

   Baayen likhna, daayen wohi safha jo printer se niklega. Preview iframe mein
   hai — format ka apna CSS us ke apne kamre mein rehta hai aur portal ki
   kisi table se nahi ja lagta.
   ============================================================================ */

.designer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
@media (max-width: 1200px) { .designer { grid-template-columns: 1fr; } }

.designer-editor { display: grid; gap: 10px; min-width: 0; }

/* Code likhne ka khana. Yahan monospace lazmi hai: HTML aur CSS mein
   indentation se hi dhancha nazar aata hai, aur mukhtalif chaurai ke harfon
   mein wo bilkul nazar nahi aata. */
.erp-screen .code-area,
.code-area {
    width: 100%;
    min-height: 320px;
    padding: 12px 13px;
    font-family: ui-monospace, "Cascadia Mono", "Consolas", "SF Mono", monospace;
    font-size: 12px;
    line-height: 1.6;
    tab-size: 2;
    color: var(--ink, #16202a);
    background: var(--panelSoft, rgba(0,0,0,.02));
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 1px);
    outline: none;
    resize: vertical;
    white-space: pre;
    overflow: auto;
}
.erp-screen .code-area:focus,
.code-area:focus {
    border-color: var(--primary, #3474d1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #3474d1) 18%, transparent);
    background: var(--panel, #fff);
}

/* ------------------------------------------------------------ token bar */

.token-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.token-bar-label { font-size: 11px; opacity: .55; }

.token-chip {
    padding: 3px 8px;
    border: 1px dashed var(--line, #dde4ea);
    border-radius: 999px;
    background: transparent;
    color: var(--primary, #3474d1);
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 10.5px;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.token-chip:hover {
    background: var(--primarySoft, rgba(52,116,209,.12));
    border-style: solid;
    border-color: var(--primary, #3474d1);
}

/* -------------------------------------------------------------- preview */

.designer-preview {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    background: var(--panelSoft, rgba(0,0,0,.035));
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 2px);
}

.designer-preview-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; font-size: 11.5px;
}
.designer-preview-head span { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.designer-preview-head small { opacity: .55; }

/* Kaghaz ka safha. Chaurai poori jagah leti hai aur BULANDI aspect-ratio se
   aati hai — is liye jo shakal dikh rahi hai wo asal kaghaz ki hai, chahe
   screen kitni bhi chaudi ho.

   Anupat asal naap se:  A4 210x297,  A5 148x210,  A3 297x420,
                         Letter 216x279,  Legal 216x356.                    */
.designer-paper {
    width: 100%;
    border: 0;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(16,32,48,.14), 0 6px 22px rgba(16,32,48,.10);
}

.designer-paper.paper-portrait  { aspect-ratio: 210 / 297; }
.designer-paper.paper-landscape { aspect-ratio: 297 / 210; }

.designer-paper.paper-a5.paper-portrait  { aspect-ratio: 148 / 210; }
.designer-paper.paper-a5.paper-landscape { aspect-ratio: 210 / 148; }
.designer-paper.paper-a3.paper-portrait  { aspect-ratio: 297 / 420; }
.designer-paper.paper-a3.paper-landscape { aspect-ratio: 420 / 297; }
.designer-paper.paper-letter.paper-portrait  { aspect-ratio: 216 / 279; }
.designer-paper.paper-letter.paper-landscape { aspect-ratio: 279 / 216; }
.designer-paper.paper-legal.paper-portrait   { aspect-ratio: 216 / 356; }
.designer-paper.paper-legal.paper-landscape  { aspect-ratio: 356 / 216; }

/* Continuous kaghaz ka koi tay shuda tool nahi — wohi lamba roll hai. */
.designer-paper.paper-continuous { aspect-ratio: auto; height: 460px; }


/* ============================================================================
   4.  CHHOTI SCREEN
   ============================================================================ */

@media (max-width: 900px) {
    .form-section-head p { display: none; }   /* jagah matn se ziyada khanon ki hai */
    .org-detail-head { flex-direction: column; }
    .designer-preview { padding: 8px; }
}

/* Khali khane ka em-dash sirf matn wale khanon par. Halat ka khana khali hone
   ka matlab "nahi" hai, aur action ka khana khali hone ka matlab "ijazat nahi"
   — un dono par lakeer dikhana jhoot bolna hai. */
.erp-grid td.col-act:empty::after,
.erp-grid td.col-mid:empty::after { content: none; }


/* ============================================================================
   MASTER SETUP KA POPUP  —  ErpFormDialog

   Record ab list ke OOPAR khulta hai, alag safhe par nahi. Wajah amali hai:
   ek qatar theek karne ke liye poora safha badal jana, phir wapas aa kar
   dobara search likhna aur dobara us safhe tak jana — ye har din darjanon
   dafa hota hai.

   Dialog ka apna dhancha template ki CSS mein pehle se hai (.aj-dialog,
   .aj-dialog-body, .aj-dialog-footer). Yahan sirf itna hai jo FORM ko us ke
   andar theek se bithata hai.
   ============================================================================ */

/* Dialog ke andar ke hisse — bahar wali form-grid ki tarah do khane nahi,
   ek ke neeche ek. Chaurai 980px hai aur har hissa apni ff-2 khud rakhta hai. */
.erp-form-dialog .aj-dialog-body { padding: 6px 18px 16px; }

.erp-form-dialog .dialog-form {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
    display: grid;
    gap: 0;
}

/* Pehle hisse ke oopar lakeer nahi — us ke oopar dialog ka apna sar hai. */
.erp-form-dialog .form-section:first-child { padding-top: 10px; border-top: 0; }

/* Ghalti ka paighaam sab se oopar, khanon se saaf alag. */
.erp-form-dialog .aj-message-bar { margin: 10px 0 2px; }
.erp-form-dialog .linklike { display: inline-block; margin: 4px 0 0; }

/* Neeche ki patti: madad ka matn baayen, buttons daayen. */
.erp-form-dialog .aj-dialog-footer .form-bar-hint {
    flex: 1;
    text-align: left;
    font-size: 11.5px;
    opacity: .6;
}

/* Load hote waqt ka skeleton dialog ke andar bhi do khanon mein. */
.erp-form-dialog .form-skeleton { padding: 10px 0; }

/* Dropdown dialog ke andar khulta hai aur dialog ka overflow auto hai —
   is liye menu ko upar uthana parta hai, warna wo dialog ke kinare par kat
   jata hai aur aadhi list nazar nahi aati. */
.erp-form-dialog .aj-dropdown-menu,
.erp-form-dialog .aj-searchable-menu { z-index: 1002; }

/* Qatar par double click se wohi record khulta hai. Ishara zaroori hai —
   warna kisi ko pata hi nahi chalta ke ye ho sakta hai. */
.erp-grid tbody tr { cursor: default; }
.erp-grid tbody tr:hover { cursor: pointer; }


/* ---------------------------------------------------------- chhoti screen */

/*  ---- Neeche wali patti CHHOTI SCREEN PAR BHI EK HI QATAR

    Ye faisla do dafa palat chuka hai, aur dono dafa ki wajah likhna zaroori
    hai warna teesri dafa koi phir se paltega.

    Pehle: `order: 2` — matn buttons ke NEECHE. Wo saaf ghalat tha; buttons
    daayen oopar aur un ke neeche baayen kone mein ek akela bhoora jumla.

    Phir maine ulta kiya: matn oopar, buttons neeche. Parhne ki tarteeb ke
    hisab se ye theek tha — magar user ne dekh kar kaha ke NAHI, jo bari
    screen par hai wohi chhoti par bhi chahiye.

    Baat un ki durust hai, aur wajah bhi mojood hai: patti par sirf teen
    cheezein hain aur do to buttons hain. Un ko todne se 22px bachte hain aur
    ek satar ki qeemat par patti har naap par alag alag shakal ki ho jati hai.
    Ek hi shakal har jagah — ye us se behtar hai.

    Jagah kam parte hi matn khud simat jata hai (`…`), qatar nahi tootti. Wo
    matn madad ka hai, farz ka nahi — us ka aadha nazar aana kisi kaam ko nahi
    rokta.                                                                   */
@media (max-width: 820px) {
    .erp-form-dialog .aj-dialog-body { padding: 4px 12px 12px; }
}

.erp-form-dialog .aj-dialog-footer { flex-wrap: nowrap; }

.erp-form-dialog .aj-dialog-footer .form-bar-hint {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erp-form-dialog .aj-dialog-footer .aj-button { flex: none; }


/* ============================================================================
   BROWSER KI AUTO-FILL  —  jo control ka rang kha jati hai

   Chrome/Edge jab apni yaad-dasht se koi khana bhar deta hai, wo us par apna
   peela ya neela background laga deta hai. Wo background UA stylesheet se aata
   hai, is liye saada `background: transparent` us par lagta hi nahi — aur
   screen par ek khana baqi sab se alag rang ka nazar aane lagta hai. Poori
   form ka dhancha usi ek khane se toot jata hai.

   Do cheezein isay rokti hain, aur dono lagti hain kyunke browser alag alag
   hain:

     1. background-clip: text
        Autofill ka rang sirf HARFON ke peechay lagta hai, poore khane par
        nahi — aur harfon ke peechay wo nazar hi nahi aata.

     2. transition-delay bahut lambi
        Chrome rang ko transition ke zariye lagata hai. 100000s ki der ka
        matlab hai wo lagta hi nahi. Ye purane Chrome par bhi chalta hai
        jahan pehli cheez nahi chalti.

   -webkit-text-fill-color alag se is liye ke autofill matn ka rang bhi apna
   lagata hai, jo dark theme mein kaala par kaala ban jata hai.
   ============================================================================ */

.erp-screen input:-webkit-autofill,
.erp-screen input:-webkit-autofill:hover,
.erp-screen input:-webkit-autofill:focus,
.erp-screen input:-webkit-autofill:active,
.erp-screen textarea:-webkit-autofill,
.erp-screen textarea:-webkit-autofill:hover,
.erp-screen textarea:-webkit-autofill:focus,
.erp-screen select:-webkit-autofill,
.erp-form-dialog input:-webkit-autofill,
.erp-form-dialog input:-webkit-autofill:hover,
.erp-form-dialog input:-webkit-autofill:focus,
.erp-form-dialog input:-webkit-autofill:active,
.erp-form-dialog textarea:-webkit-autofill,
.erp-form-dialog textarea:-webkit-autofill:hover,
.erp-form-dialog textarea:-webkit-autofill:focus,
.aj-field input:-webkit-autofill,
.aj-field textarea:-webkit-autofill,
.aj-dropdown input:-webkit-autofill {
    -webkit-background-clip: text !important;
            background-clip: text !important;
    -webkit-text-fill-color: var(--text, #16202a) !important;
    caret-color: var(--text, #16202a);
    transition: background-color 100000s ease-in-out 0s !important;
    box-shadow: none !important;
    background-image: none !important;
}

.dark .erp-screen input:-webkit-autofill,
.dark .erp-form-dialog input:-webkit-autofill,
.dark .aj-field input:-webkit-autofill,
.dark .aj-dropdown input:-webkit-autofill {
    -webkit-text-fill-color: var(--text, #e7eef2) !important;
}

/*  Autofill kabhi kabhi field ke DABBE par bhi asar dikhata hai (kuch browser
    wrapper ko highlight kar dete hain). Dabba hamesha apne hi rang par rahe. */
.erp-form-dialog .aj-field:has(input:-webkit-autofill) .aj-box,
.erp-screen .aj-field:has(input:-webkit-autofill) .aj-box {
    background: var(--surface, #fff);
}


/* ============================================================================
   POPUP KA SAR  —  icon, unwan, aur us ke neeche ki tafseel

   Template ka apna sar 54px ka hai aur icon halka sa dabba. Master Setup ke
   popup par unwan mein record ka naam aata hai (KHI-01 — Karachi Head Office)
   aur us ke neeche ek line us screen ka matlab batati hai. Do satrein us
   patti mein tang lagti thin.

   Icon ab bhara hua hai, template ke apne primary rang se. Halka dabba
   background ke saath ghul jata hai aur nazar aata hi nahi — aur jo nazar na
   aaye us ka wahan hona bemaani hai.
   ============================================================================ */

.erp-form-dialog .aj-dialog-head {
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    min-height: 0;
}

.erp-form-dialog .dialog-title-icon {
    width: 38px; height: 38px; flex: 0 0 38px;
    margin-top: 1px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary, #3474d1), var(--primary2, #2a5da8));
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary, #3474d1) 30%, transparent);
}
.erp-form-dialog .dialog-title-icon svg { width: 19px; height: 19px; }

.erp-form-dialog .dialog-title-copy { padding-top: 1px; }

.erp-form-dialog .dialog-title-copy h2 {
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*  Tafseel do satron tak. Us se lambi baat sar ki patti ki nahi, form ke
    andar ki hai. */
.erp-form-dialog .dialog-title-copy p {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.45;
    opacity: .75;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.erp-form-dialog .dialog-x { align-self: flex-start; margin-top: 2px; }

/*  Popup ke andar ki patti. Browser ka default scrollbar Windows par mota aur
    bhadka hua hota hai — dialog ke kinare par wo poori shakal se alag lagta
    hai. Sirf popup ke andar, taake baqi safha browser ka apna rehne de.      */
/*  Rang ab THEME se — pehle yahan `var(--line)` tha, yani bhoora, jabke poore
    portal ka scrollbar primary se banta hai. Ek hi safhe par do rang ke
    scrollbar: dialog ka bhoora, us ke andar khule panel ka neela.

    Naap wohi rehti hai jo yahan pehle se soch kar rakhi gayi thi (10px + 3px
    ka shafaf hashiya) — wo dialog ke kinare ke liye behtar hai. Sirf RANG
    badla hai, aur wo bhi wohi jo baqi har scroll par hai (68% / 70%).       */
.erp-form-dialog .aj-dialog-body {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary, #3474d1) 68%, var(--line2, #c7d7db)) transparent;
}
.erp-form-dialog .aj-dialog-body::-webkit-scrollbar        { width: 10px; }
.erp-form-dialog .aj-dialog-body::-webkit-scrollbar-track  { background: transparent; }
.erp-form-dialog .aj-dialog-body::-webkit-scrollbar-thumb  {
    background: color-mix(in srgb, var(--primary, #3474d1) 70%, var(--line2, #c7d7db));
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}
.erp-form-dialog .aj-dialog-body::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--primary, #3474d1) 40%, var(--line, #dde4ea));
    background-clip: content-box;
}

/*  Floating label dabbe ke kinare se thora bahar nikalta hai (translateY -50%).
    Body ka overflow:auto us ko kaat sakta hai, is liye pehli qatar ke oopar
    itni jagah hamesha rahe ke wo poora nazar aaye. */
.erp-form-dialog .dialog-form > .form-section:first-child { padding-top: 12px; }


/* ============================================================================
   ============================================================================

   LIST SCREEN KA NAYA DHANCHA  —  do panel, teen hisse

       ┌─ erp-page-bar ──────────────────────────────────┐
       │  icon   Title / breadcrumb          [buttons]   │
       └─────────────────────────────────────────────────┘
       ┌─ erp-panel ─────────────────────────────────────┐
       │  toolbar  ·  grid  ·  footer                    │
       └─────────────────────────────────────────────────┘

   Pehle unwan aur buttons khule safhe par tairte the, aur grid apne alag
   dabbe mein tha. Do cheezein jo saath kaam karti hain un ka alag alag
   tairna nazar ko batata nahi ke wo ek hi cheez hain.
   ============================================================================
   ============================================================================ */

.erp-page-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--panel, #fff);
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 2px);
    box-shadow: 0 1px 2px rgba(16, 32, 48, .04);
}

.erp-page-ico {
    display: grid; place-items: center;
    flex: 0 0 42px; width: 42px; height: 42px;
    border-radius: 11px;
    background: var(--primarySoft, rgba(52,116,209,.12));
    color: var(--primary, #3474d1);
}
.erp-page-ico svg { width: 20px; height: 20px; }

.erp-page-copy { flex: 1; min-width: 0; }
.erp-legacy .erp-screen .erp-page-copy h1 { font-size: 18px; line-height: 1.2; margin: 0; }
.erp-page-copy p { margin: 2px 0 0; font-size: 12px; opacity: .65; }
.erp-page-copy .erp-crumb { margin-bottom: 1px; }

/*  Buttons ki patti. flex-wrap is liye ke chhoti screen par wo neeche chali
    jaye, unwan ko nichore nahi. */
.erp-page-actions { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }

/*  Chhoti screen par ye patti pehle tootti thi (buttons neeche poori qatar
    mein). Ab buttons sirf icon ban jate hain aur patti ek hi qatar rehti hai —
    qaida "TANG SCREEN — BUTTON SIRF ICON" wale hisse mein hai.               */


/* ------------------------------------------------- toolbar + grid + footer */

.erp-panel {
    display: grid;
    background: var(--panel, #fff);
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 2px);
    box-shadow: 0 1px 2px rgba(16, 32, 48, .04);
    overflow: hidden;                  /* kinare gol rahen */
}

/*  Panel ke andar toolbar aur grid ke apne kinare nahi chahiyen — warna dabbe
    ke andar dabba nazar aata hai. */
.erp-panel .erp-toolbar {
    border: 0;
    border-bottom: 1px solid var(--line, #dde4ea);
    border-radius: 0;
    background: transparent;
}
.erp-panel .erp-grid-wrap {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: auto;                    /* chaudi grid khisak jaye */
}

.erp-grid-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-top: 1px solid var(--line, #dde4ea);
    background: var(--panelSoft, rgba(0,0,0,.015));
    font-size: 12px;
}
.erp-grid-foot .grow { flex: 1; }
.erp-range { opacity: .75; }
.erp-range b { font-variant-numeric: tabular-nums; }

.erp-pagesize { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; opacity: .8; }
.erp-pagesize select {
    height: 26px;
    padding: 0 6px;
    font: inherit;
    font-size: 11.5px;
    color: var(--ink, #16202a);
    background: var(--panel, #fff);
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 1px);
}

.erp-grid-foot .aj-pagination,
.erp-grid-foot .pagination { margin: 0; }


/* ----------------------------------------------------- sar par tarteeb */

.erp-grid thead th .erp-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    cursor: pointer;
}
/*  Teer sirf us column par jis par tarteeb lagi hai. Har sar par teer
    dikhana shor hai — nazar ko batana ye hai ke kis par lagi HUI hai. */
.erp-grid thead th .erp-sort svg { width: 12px; height: 12px; opacity: 0; transition: opacity .12s ease; }
.erp-grid thead th .erp-sort:hover svg { opacity: .35; }
.erp-grid thead th .erp-sort.sorted { color: var(--primary, #3474d1); }
.erp-grid thead th .erp-sort.sorted svg { opacity: 1; }


/* -------------------------------------------------- sar ke neeche filter */

.erp-grid thead tr.erp-filter-row th {
    padding: 5px 8px 7px;
    background: var(--panelSoft, rgba(0,0,0,.02));
    border-bottom: 1px solid var(--line, #dde4ea);
}
.erp-grid thead tr.erp-filter-row input {
    width: 100%;
    height: 28px;
    padding: 0 8px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--ink, #16202a);
    background: var(--panel, #fff);
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 1px);
    outline: none;
}
.erp-grid thead tr.erp-filter-row input:focus {
    border-color: var(--primary, #3474d1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #3474d1) 18%, transparent);
}

/*  Kitne filter lage huay hain — aur ek click mein sab hata do. Filter laga
    chhor dena aur bhool jana wo cheez hai jo "data gayab ho gaya" ban kar
    wapas aati hai. */
.erp-chip-clear {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    border: 1px solid color-mix(in srgb, var(--primary, #3474d1) 35%, var(--line, #dde4ea));
    border-radius: 999px;
    background: var(--primarySoft, rgba(52,116,209,.1));
    color: var(--primary, #3474d1);
    font-size: 11px; font-weight: 600; cursor: pointer;
}
.erp-chip-clear:hover { background: color-mix(in srgb, var(--primary, #3474d1) 18%, transparent); }
.erp-chip-clear svg { width: 11px; height: 11px; }


/* ------------------------------------------------------ column chooser */

.erp-colmenu-wrap { position: relative; display: inline-flex; }

.erp-colmenu-scrim { position: fixed; inset: 0; z-index: 40; border: 0; background: transparent; cursor: default; }

/*  ---------------------------------------------------------------------------
    COLUMNS AB EK POPOVER HAI — WOHI SHAKAL JO HEADER KE SELECTOR PAR HAI

    Pehle ye ek saadi fehrist thi: chhota uppercase sar, checkbox aur naam.
    Us mein do cheezein nahi thin, aur dono roz kaam ki hain — **search**
    (Item Master par tees se ziyada column hain) aur **teer** (ye batane wala
    kuch nahi tha ke fehrist kis button se nikli).

    Ab dhancha wohi hai jo baqi har panel ka hai:

        sar (icon + unwan + ginti + ×)  ·  search ka khana  ·  fehrist  ·  footer

    Panel ab khud scroll nahi karta — fehrist karti hai. Us ke baghair sar aur
    footer bhi maal ke saath khisak jate hain, aur search ka khana theek us
    lamhe gayab hota hai jab banda dhoondh raha hota.
    --------------------------------------------------------------------------- */
.erp-colmenu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 41;
    width: min(320px, calc(100vw - 24px));
    max-height: min(70vh, 460px);

    display: flex;
    flex-direction: column;

    /*  overflow VISIBLE — warna teer (::before) panel ke kinare par kat jata
        hai. Gol kinare phir bhi rehte hain: sar aur footer ke apne radius se,
        aur fehrist ka apna overflow us ko khud kaat leta hai.               */
    overflow: visible;

    padding: 0;
    background: var(--panel, #fff);
    color: var(--text, #16202a);
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 2px);
    box-shadow: 0 12px 32px rgba(16, 32, 48, .16);
}

/*  Teer — wohi jo selector aur match ke panel par hai. Jagah portal.js deta
    hai (--aj-arrow) kyunke wo is menu ko fixed par bitha kar clamp karta hai;
    yahan koi jama hua adad likhne par wo clamp ke baad kisi aur cheez ki
    taraf ishara karne lagta.                                                */
.erp-colmenu.popover-arrow-top::before {
    content: "";
    position: absolute;
    top: -7px;
    right: var(--aj-arrow, 16px);
    width: 12px;
    height: 12px;
    background: var(--panel, #fff);
    border-left: 1px solid var(--line, #dde4ea);
    border-top: 1px solid var(--line, #dde4ea);
    transform: rotate(45deg);
}

/*  Oopar khule to teer bhi palat jaye. */
.erp-colmenu.aj-flyout-up::before {
    top: auto;
    bottom: -7px;
    border-left: 0;
    border-top: 0;
    border-right: 1px solid var(--line, #dde4ea);
    border-bottom: 1px solid var(--line, #dde4ea);
}

.erp-colmenu-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding: 10px 10px 10px 12px;
    border-bottom: 1px solid var(--line, #dde4ea);

    /*  Sar ka apna background aur radius — panel par overflow visible hai, is
        liye gol kinara yahan banta hai. `position: relative` + z-index taake
        teer us ke NEECHE rahe aur us ki lakeer sar par na chhape.           */
    background: var(--panel, #fff);
    border-radius: calc(var(--radius, 5) * 2px) calc(var(--radius, 5) * 2px) 0 0;
    position: relative;
    z-index: 1;

    /*  Purana qaida yahan uppercase aur .7 opacity deta tha — wo us waqt tha
        jab ye sirf ek chhoti patti thi. Ab ye panel ka SAR hai, aur sar poore
        portal par saada matn hai.                                           */
    text-transform: none;
    letter-spacing: 0;
    opacity: 1;
    font-size: inherit;
}

.erp-colmenu-ico {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: calc(var(--radius, 5) * 1px);
    background: var(--primarySoft, #eaf2fd);
    color: var(--primary, #3474d1);
}

.erp-colmenu-ico svg { width: 15px; height: 15px; }

.erp-colmenu-copy { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.erp-colmenu-copy b { display: block; font-size: 13px; font-weight: 700; }
.erp-colmenu-copy small { display: block; font-size: 10.5px; color: var(--muted, #67798a); }

/*  Search ki qatar `.cmdk-box` hi hai — koi nayi shakal nahi banayi.       */
.erp-colmenu-search { flex: none; }

/*  ---------------------------------------------------------------------------
    FEHRIST KI BULANDI THEHRI HUI HAI — PANEL HILTA NAHI

    "Show all" dabane par panel apna naap badal leta tha, aur us ka nateeja
    bura hai: jo qatar aap dabane wale the wo apni jagah se khisak jati hai.

    Do cheezein tay ki gayin:

      * `max-height` — chhe se ziyada qatar par fehrist ruk jati hai aur scroll
        shuru. 6 × 32px + padding. Chhe is liye ke us se kam par khali jagah
        chhorna faltu hai, aur us se zyada par panel safhe par hawi hone lagta.

      * `scrollbar-gutter: stable` — scrollbar ki jagah HAMESHA chhori jati
        hai, chahe wo is waqt nazar na aa raha ho. Us ke baghair search se
        fehrist chhanne par scrollbar aata jata hai aur poori fehrist 7px
        idhar udhar khisakti hai — wo hilna chhota hai magar nazar aata hai.
    --------------------------------------------------------------------------- */
.erp-colmenu-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 236px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding: 6px;
}

.erp-colmenu-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: calc(var(--radius, 5) * 1px);
    font-size: 12.5px;
    cursor: pointer;
}

.erp-colmenu-row:hover { background: var(--primarySoft, #eaf2fd); }

.erp-colmenu-name { flex: 1 1 auto; min-width: 0; }

/*  ---------------------------------------------------------------------------
    CHECKBOX CHHUP GAYA — TICK HI NISHAN HAI

    Pehli koshish mein dono the: system ka checkbox AUR daayen kinare par tick.
    Dono ek hi baat keh rahe the ("ye column dikh raha hai"), aur ek hi baat do
    dafa kehna is file ka purana mana kiya hua kaam hai.

    Tick chuna gaya, checkbox nahi — kyunke poore portal par "chuni hui qatar"
    ka nishan yehi hai: selector ki fehrist par, launcher ki tiles par. Do
    alag nishan rakhne par banda har fehrist par naye sire se seekhta.

    Checkbox markup se HATA nahi — sirf nazar se. Wo ab bhi qatar ka asli
    control hai (keyboard, space, screen reader), bas us ki shakal tick hai.  */
.erp-colmenu-row input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/*  Keyboard wale ko qatar par focus nazar aana chahiye — checkbox ab dikhta
    nahi, is liye halqa qatar par hai.                                       */
.erp-colmenu-row:has(input:focus-visible) {
    background: var(--primarySoft, #eaf2fd);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #3474d1) 40%, transparent) inset;
}

/*  Yahan bhi `>` — aur yahan us ki qeemat aur bhi bari thi.

    `.erp-colmenu-row` sirf Columns ki qatar nahi hai: Export ka menu bhi isi
    class par khara hai. Descendant likhne par `opacity: 0` Export ki har
    qatar ke ICON par lag gaya (wo `.erp-exportmenu-ico` ke ANDAR ek `.aj-icon`
    hai) — aur menu mein saat khali gulabi murabbe nazar aane lage.

    Do jagah, ek hi din, ek hi shakal ki ghalti. Sabaq: **shared class ke andar
    descendant selector likhna us cheez par bhi qaida laga deta hai jo abhi
    wahan hai hi nahi.**                                                     */
.erp-colmenu-row > .aj-icon { flex: none; color: var(--primary, #3474d1); opacity: 0; }
.erp-colmenu-row > .aj-icon svg { width: 14px; height: 14px; }
.erp-colmenu-row:has(input:checked) > .aj-icon { opacity: 1; }

/*  Chhupi hui column ka naam halka — fehrist ek nazar mein bata deti hai ke
    is waqt kya bahar hai.                                                   */
.erp-colmenu-row:not(:has(input:checked)) .erp-colmenu-name { color: var(--muted, #67798a); }

/*  Export ki fehrist ko apni chhat chahiye. Columns ki 236px is liye thi ke
    wahan qatarein ek satar ki hain aur teen darjan tak ho sakti hain. Export
    mein SAAT hain, wo bhi do satar ki — un par wohi chhat lagane ka matlab ek
    mukammal, chhoti fehrist ko scroll karana hai. Poori dikhti hai.         */
.erp-exportmenu .erp-colmenu-list { max-height: min(70vh, 420px); }

/*  Khaka wali qatar — asli qatar jitni oonchi, taake panel ka naap na hile.
    Us mein checkbox aur tick nahi, is liye padding se hi bulandi banti hai. */
.erp-colmenu-ghost {
    cursor: default;
    padding-top: 10px;
    padding-bottom: 10px;
}

.erp-colmenu-ghost:hover { background: transparent; }

/*  "Sab dikh raha hai" — button ki jagah, matn. Ek bujha hua button phir bhi
    dabne ki dawat deta hai; ek jumla sirf batata hai, aur yahan batana hi
    kaafi hai.                                                               */
.erp-colmenu-allshown {
    font-size: 11px;
    color: var(--muted, #67798a);
}

.erp-colmenu-foot {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 10px;
    border-top: 1px solid var(--line, #dde4ea);
    background: var(--surface2, #f8fbfc);
    border-radius: 0 0 calc(var(--radius, 5) * 2px) calc(var(--radius, 5) * 2px);
}


/*  ---------------------------------------------------------------------------
    FILTER KI QATAR — SAADE KHAANE PAR BHI FUNNEL

    Jis column ki fehrist ban sakti hai wahan searchable dropdown hai aur us
    par funnel pehle se tha. Magar jis column mein ek hi qeemat ho (ya koi
    nahi), wahan saada khaana rehta hai — aur wahan funnel tha hi nahi. Yani
    ek hi qatar mein do bartao, aur screenshot mein wohi nazar aaya.

    Ab dono par hai, aur is khaane ka funnel SERVER tak jata hai
    (ErpListQuery.FilterMatch): "s" par `Kar%`, "x" par barabar. Pehle server
    har column par contains hi chalata tha.
    --------------------------------------------------------------------------- */
.erp-filter-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
    padding-right: 2px;
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 1px);
    background: var(--surface, #fff);
}

.erp-filter-cell:focus-within {
    border-color: var(--primary, #3474d1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #3474d1) 12%, transparent);
}

/*  Khaana apni border chhor deta hai — ab wo qatar ki hai, khaane ki nahi.
    Do border ek doosre ke andar ek moti lakeer bana dete hain.              */
.erp-filter-row .erp-filter-cell > input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0 !important;
    outline: 0;
    background: transparent;
    box-shadow: none !important;
}

.erp-filter-match { display: inline-flex; align-items: center; flex: none; }

/*  Wohi baareek lakeer jo har search ke khaane par matn aur button ke darmiyan
    hai — magar yahan chhoti, kyunke poori qatar hi 28px ki hai.             */
.erp-filter-match::before {
    content: "";
    flex: none;
    align-self: center;
    width: 1px;
    height: 12px;
    margin-right: 3px;
    background: var(--line, #dde4ea);
}

/*  Qatar tang hai — funnel bhi. */
.erp-filter-cell .aj-inline-action.aj-match-btn { width: 22px; height: 22px; }
.erp-filter-cell .aj-inline-action.aj-match-btn svg { width: 11.5px !important; height: 11.5px !important; }


/* ============================================================================
   YAHAN PEHLE "PLACEHOLDER CHHUPA DO" WALA QAIDA THA — AB HATA DIYA GAYA

   Wo qaida us waqt likha gaya tha jab label khali khane ke ANDAR baithta tha:
   "Search" (label) aur "Login name, display name or email…" (placeholder)
   dono ek hi jagah chhap rahe the, ek doosre ke oopar. Us waqt placeholder ko
   chhupana theek tha.

   Ab faisla ulta hai aur behtar hai: jis khane mein placeholder HAI, us ka
   label chhupta hai (.aj-has-ph), aur placeholder poora nazar aata hai. Click
   par placeholder hat jata hai aur label outline ke notch mein aa jata hai.

   Purana qaida rehne dena ab nuqsan tha: us ki specificity zyada thi
   (.aj-field:not(.floating):not(:focus-within) — chaar class), is liye wo
   naye qaide ko dabata raha aur khana bilkul KHALI nazar aata — na label, na
   placeholder. Ye browser mein naap kar hi pakra gaya.
   ============================================================================ */


/* ---------------------------------------------------- popup ka unwan chhota
   16px bara lag raha tha, khaas tor par jab unwan mein record ka poora naam
   aata hai. 14.5px — wohi wazan jo template ke apne dialog ka hai, magar us
   se thora saaf. */

.erp-form-dialog .dialog-title-copy h2 { font-size: 14.5px; }
.erp-form-dialog .dialog-title-copy p  { font-size: 10.5px; }
.erp-form-dialog .dialog-title-icon    { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; }
.erp-form-dialog .dialog-title-icon svg { width: 17px; height: 17px; }
.erp-form-dialog .aj-dialog-head { padding: 10px 12px; }


/* ------------------------------------------------- menu jo fixed ho gaya
   portal.js khule hue menu ko position: fixed par bitha deta hai taake wo
   kisi scroll hone wale dabbe mein kat na jaye. Fixed hone ke baad us ki
   bulandi mehdood hoti hai, is liye andar ki fehrist ko khud scroll karna
   parta hai — warna max-height sirf kaat deti, dikhati nahi. */

/*  overflow: hidden se VISIBLE.

    hidden yahan gol kinaron ke liye tha. Magar match ka popover (Starts /
    Contains / Ends / Exact) is flyout ke ANDAR position:absolute par khara
    hota hai, aur hidden usay theek wahan kaat deta tha — screenshot mein
    chaar mein se sirf teen tareeqe nazar aa rahe the, "Exact" gayab tha.

    Kinare phir bhi gol rehte hain: fehrist ka apna overflow:auto us ko khud
    kaat leta hai (neeche wala qaida).                                      */
.aj-menu-flyout.aj-flyout-fixed {
    display: flex !important;
    flex-direction: column;
    overflow: visible;
}
.aj-menu-flyout.aj-flyout-fixed .menu-head { flex: none; }
.aj-menu-flyout.aj-flyout-fixed .menu-list { flex: 1 1 auto; min-height: 0; overflow: auto; }


/* ============================================================================
   ============================================================================

   HAR MATERIAL CONTROL KA LABEL — HAMESHA OUTLINE PAR

   Pehle ye qaida sirf .aj-dropdown par tha. Us se aadha kaam hua: dropdown
   theek ho gaya, magar Search ka khana aur baqi khane apni purani aadat par
   rahe — label andar baithta, aur leading icon ke saath us ka faasla har
   control par thora alag banta. Wohi jagah hai jahan user ne teer banaya tha.

   Ab faisla ek hai aur sab par lagta hai:

       label kabhi khane ke ANDAR nahi baithta. Wo hamesha oopar wali lakeer
       par, notch mein, ek hi jagah — chahe khana khali ho ya bhara.

   Is ke teen faide:

     1. Icon se takrao ka sawal hi khatam. Label oopar hai, icon neeche —
        un ka koi mel nahi rehta, is liye 28 / 32 / 34px ka hisab bhi khatam.
     2. Placeholder ab apna asal kaam kar sakta hai. Pehle label us ki jagah
        par baitha hota tha, is liye placeholder ko chhupana parta tha; ab
        dono ki apni apni jagah hai.
     3. Har khana ek hi bulandi ka lagta hai. Label ke andar-bahar aane se
        qatar ki base line hilti thi — ab nahi hilti.

   Sirf hamari screens par (.erp-screen aur popup). Template ke apne demo
   safhe jaise the waise rahen — wo hamari zimmedari nahi.
   ============================================================================
   ============================================================================ */

/*  SPECIFICITY — yahan pehli koshish nakaam hui thi, aur wajah likh dena
    zaroori hai warna agli dafa phir wohi ghalti hogi.

    Maine pehle seedha ye likha tha:

        .erp-screen .aj-field .aj-label { top: 0 !important; ... }

    Wo chala hi nahi. Browser se poochhne par pata chala ke jeetne wala qaida
    ye hai:

        .aj-field.has-leading:not(.floating):not(:focus-within) .aj-label
            { top: 50% !important; left: 34px !important }

    Do !important aapas mein larein to specificity faisla karti hai. Us ke
    paas paanch class hain, mere paas teen thin. Ab har selector mein wohi
    haalatein saaf likhi hain jinhein hata rahe hain — wazan bhi barh jata
    hai, aur parhne wale ko nazar aa jata hai ke KIS qaide ko hataya ja raha
    hai. :is() apne andar ki sab se bhaari cheez ke barabar ginta hai (ek
    class), is liye fehrist lambi karne se wazan nahi barhta.


    QAIDA KHUD — aur ye Phase 7 wale se ULTA hai:

    pehle label HAMESHA notch mein rakha gaya tha. Us ka natija ye ke placeholder
    aur label dono ek saath nazar aate the ("Country" lakeer par, "Select country"
    andar) — do dafa wohi baat, do jagah.

    Ab:
        placeholder hai + khana khali + cursor bahar   →  sirf placeholder,
                                                          label chhupa hua
        cursor andar, ya qeemat maujood                →  placeholder gayab,
                                                          label notch mein
        placeholder hai hi nahi                        →  template ka apna
                                                          qaida: label andar,
                                                          focus par oopar

    Yani andar hamesha EK matn hota hai, aur khane ka naam kabhi do jagah
    nahi hota.                                                                */

/*  ---- 1. jab label notch mein ho: har control par bilkul ek jaisi jagah. */

.erp-screen :is(.aj-field, .aj-number-field, .aj-dropdown, .aj-searchable-select, .aj-multi):is(.floating, .open, :focus-within) .aj-label,
.erp-screen :is(.aj-field, .aj-number-field, .aj-dropdown, .aj-searchable-select, .aj-multi).has-leading:is(.floating, .open, :focus-within) .aj-label,
.erp-form-dialog :is(.aj-field, .aj-number-field, .aj-dropdown, .aj-searchable-select, .aj-multi):is(.floating, .open, :focus-within) .aj-label,
.erp-form-dialog :is(.aj-field, .aj-number-field, .aj-dropdown, .aj-searchable-select, .aj-multi).has-leading:is(.floating, .open, :focus-within) .aj-label {
    top: 0 !important;
    bottom: auto !important;
    left: var(--aj-outline-label-left, 9px) !important;
    right: auto !important;
    max-width: calc(100% - 22px) !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 var(--aj-outline-label-pad-x, 5px) !important;
    background: var(--surface, #fff) !important;
    font-size: var(--control-floating, 10px) !important;
    line-height: var(--aj-outline-label-line, 1.05) !important;
    color: var(--primary-ink, var(--primary, #3474d1)) !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 3;
}

body[data-control-style="soft"] .erp-screen :is(.aj-field, .aj-number-field, .aj-dropdown, .aj-searchable-select, .aj-multi):is(.floating, .open, :focus-within) .aj-label,
body[data-control-style="soft"] .erp-form-dialog :is(.aj-field, .aj-number-field, .aj-dropdown, .aj-searchable-select, .aj-multi):is(.floating, .open, :focus-within) .aj-label {
    background: color-mix(in srgb, var(--primarySoft, rgba(52,116,209,.12)) 18%, var(--surface2, #f6f8fa)) !important;
}

/*  ---- 2. placeholder wala khali khana: label chhupa hua.

    visibility, display nahi — display:none label ko screen reader se bhi
    chheen leta hai, aur us khane ka naam sirf placeholder mein reh jata,
    jise koi assistive tool label nahi manta.                              */

.erp-screen :is(.aj-field, .aj-number-field, .aj-dropdown, .aj-searchable-select, .aj-multi).aj-has-ph:not(.floating):not(.open):not(:focus-within) .aj-label,
.erp-form-dialog :is(.aj-field, .aj-number-field, .aj-dropdown, .aj-searchable-select, .aj-multi).aj-has-ph:not(.floating):not(.open):not(:focus-within) .aj-label {
    visibility: hidden;
}

/*  ---- 3. ghalti ka rang har haalat par bhaari. */

.erp-screen :is(.aj-field, .aj-number-field, .aj-dropdown, .aj-searchable-select, .aj-multi).aj-error.aj-error .aj-label,
.erp-form-dialog :is(.aj-field, .aj-number-field, .aj-dropdown, .aj-searchable-select, .aj-multi).aj-error.aj-error .aj-label {
    color: var(--danger, #c33c32) !important;
    visibility: visible;
}

/*  ---- 4. label bahar chala gaya, andar ka matn poori bulandi le sakta hai. */

.erp-screen .aj-input, .erp-form-dialog .aj-input,
.erp-screen .aj-textarea, .erp-form-dialog .aj-textarea,
.erp-screen .aj-display, .erp-form-dialog .aj-display,
.erp-screen .aj-searchable-display, .erp-form-dialog .aj-searchable-display { padding-top: 0 !important; }

/*  ---- 4b. …magar TEXTAREA is qaide ka istisna hai.

    Oopar wala qaida ek satar wale khane ke liye theek hai: label bahar chala
    gaya, aur matn ko `line-height` beech mein bitha deti hai — padding ki
    zaroorat hi nahi.

    Textarea mein ye baat nahi chalti. Us mein kai satrein hain, is liye
    `line-height` sirf satron ka faasla hai, beech mein bithane wali cheez
    nahi. padding-top:0 lagte hi matn dabbe ke bilkul oopar wale kinare se
    shuru ho jata hai — aur icon apne 12px padding ke sath 18px neeche baith
    jata hai. User ne yehi dekha aur likha: "textarea ma text icon ke saamne
    nahi hai".

    Ilaaj do satar ka hai, aur dono ek doosre se BANDHE hue hain:

      • textarea ka matn 10px neeche se shuru hota hai (--ta-pad)
      • icon ka dabba theek ek satar (--ta-line) ka hai aur usi 10px se shuru
        hota hai — us ke andar `place-items:center` icon ko PEHLI SATAR ke
        beech mein la kar rakh deta hai

    Yani icon ka markaz aur pehli satar ka markaz ek hi jagah hai. Do alag
    qeematein tukka laga kar milane ki bajaye ek hi variable dono ko chalata
    hai — kal koi line-height badle to jorha nahi tootega.                   */
.erp-screen .aj-dynamic-textarea,
.erp-form-dialog .aj-dynamic-textarea {
    --ta-pad: 10px;
    --ta-line: 18px;
}

.erp-screen .aj-dynamic-textarea .aj-textarea,
.erp-form-dialog .aj-dynamic-textarea .aj-textarea {
    padding-top: var(--ta-pad) !important;
    line-height: var(--ta-line) !important;
}

/*  ---- icon aur matn ke darmiyan ka faasla: wohi jo baqi khanon par hai

    Naap kar dekha to teen alag alag faasle chal rahe the:

        Website / Email / Phone (saada input)   8px
        Country / Group type (dropdown)        10px
        Head office address (textarea)         17px   ← doguna

    Sabab: saada input par template `padding-left: 0` laga deta hai jab bagal
    mein icon ho (`.aj-field.has-leading .aj-input`), magar wo qaida `.aj-input`
    par hai — aur textarea ka class `.aj-textarea` hai. Us par 9px ka apna
    padding baaqi reh jata tha, jo 28px ke icon wale khane ke OOPAR se aur
    lagta tha.

    Sirf `has-leading` par — jis textarea ke bagal mein icon nahi, us ka
    9px apni jagah theek hai, warna matn dabbe ke kinare se chipak jata.     */
.erp-screen .aj-dynamic-textarea.has-leading .aj-textarea,
.erp-form-dialog .aj-dynamic-textarea.has-leading .aj-textarea {
    padding-left: 0 !important;
}

.erp-screen .aj-dynamic-textarea.has-leading .aj-leading,
.erp-form-dialog .aj-dynamic-textarea.has-leading .aj-leading {
    align-self: flex-start !important;
    height: var(--ta-line) !important;
    min-height: var(--ta-line) !important;
    padding-top: 0 !important;
    margin-top: var(--ta-pad) !important;
}

/*  ---- 5. placeholder nazar aana chahiye — template us ko chhupa deta tha
    kyunke us ki jagah par label baithta tha. Ab label wahan hai hi nahi.  */

.erp-screen .aj-input::placeholder, .erp-screen .aj-textarea::placeholder,
.erp-form-dialog .aj-input::placeholder, .erp-form-dialog .aj-textarea::placeholder {
    color: var(--muted, #9aa8b2) !important;
    opacity: .8 !important;
}

/*  Notch dabbe ke kinare se aadha bahar nikalta hai. Jahan oopar jagah nahi
    hoti (scroll hone wale dabbe ki pehli qatar) wahan wo kat jata hai.
    Popup ki pehli qatar ka apna qaida oopar likha hai (12px). */
.erp-screen .form-grid:first-child { padding-top: 10px; }


/* ------------------------------------------- searchable dropdown ka icon

   AjSearchableDropdown ab FieldIcon leta hai (AjSelect ki jagah poore portal
   mein yehi control aa gaya hai, aur us ke 173 khanon par icon tha).

   Do cheezein template ki CSS se takrati hain:

     * .aj-searchable-trigger par width:100% !important hai. Us ke bagal mein
       icon rakh do to trigger poora dabba le leta hai aur icon bahar dhakel
       diya jata hai. Is liye yahan wo auto ho kar baqi jagah leta hai.
     * display ka baayan padding 11px hai — icon ke baad itni jagah chhorne
       se matn icon se bahut door chala jata hai.                            */

.aj-searchable-select > .aj-box > .aj-leading {
    display: grid; place-items: center;
    flex: 0 0 32px; width: 32px;
    color: var(--muted, #667b88);
    pointer-events: none;
}
.aj-searchable-select.has-leading .aj-searchable-trigger {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
}
.aj-searchable-select.has-leading .aj-searchable-display { padding-left: 2px !important; }

/*  Trigger ek <button> hai, aur button apne aap browser ka default 14px le
    leta hai. Baqi har khana --control-font (12.5px) par hai. Ek hi qatar
    mein "Karachi Head Office" 12.5px par aur "Karachi" 14px par likha hua
    tha — chhota farq hai, magar wohi farq form ko be-tarteeb dikhata hai.

    Ye AjSelect ke zamane mein chhupa hua tha (wahan trigger ka apna qaida
    tha). Poore portal par ye control aa jane ke baad har dropdown par nazar
    aata hai, is liye yahan theek kiya gaya. */
.aj-searchable-trigger {
    font-family: inherit;
    font-size: var(--control-font, 12.5px) !important;
    font-weight: inherit;
}

/*  Khali dropdown ka placeholder — chuni hui qeemat se halka, taake dono ek
    doosre se alag pehchane jayen. */
.aj-searchable-placeholder {
    color: var(--muted, #9aa8b2);
    opacity: .8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================================
   ============================================================================

   UNWAN KI PATTI — TEEN SATREIN, EK BUTTON JITNI BULANDI

   Patti mein teen baatein hain: raasta (Masters › Setup), form ka naam, aur
   ek satar jo batati hai ye screen kis kaam ki hai. Teenon chahiyen — magar
   pehle wo teenon apne apne poore size mein thin, aur teen satrein mila kar
   patti 78px le rahi thi. Us ke neeche grid ke liye jo bachta hai wo utna hi
   kam ho jata hai, aur form wahi hai jis ke liye user yahan aaya hai.

   Ab teenon ka wazan alag alag hai, us tarteeb par jis tarteeb par nazar
   unhein dekhti hai:

       raasta       9.5px, halka, upper-case   — jaanne ke liye, parhne ke liye nahi
       form ka naam 15px,  bhaari              — asli unwan
       tafseel      10.5px, halki              — ek dafa parhi jati hai

   Line-height sab par kasi hui (1.15–1.3). Teen satrein mila kar ~42px —
   yani button (34px) se thora si bari, bilkul wohi jo maanga gaya tha.
   ============================================================================
   ============================================================================ */

.erp-page-bar {
    padding: 7px 14px;
    gap: 11px;
}

.erp-page-ico {
    flex: 0 0 34px; width: 34px; height: 34px;
    border-radius: 9px;
}
.erp-page-ico svg { width: 17px; height: 17px; }

/*  Teenon satrein margin ke baghair hain aur line-height kasi hui hai. Do
    satron ke darmiyan ki khali jagah teen satron par teen dafa ginti hai —
    wohi 12px hai jo patti ko button se doguna kar deta tha. */

.erp-page-copy .erp-crumb {
    margin: 0;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted, #667b88);
    opacity: .75;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.erp-legacy .erp-screen .erp-page-copy h1,
.erp-page-copy h1 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.erp-page-copy p {
    margin: 0;
    font-size: 9.5px;
    font-weight: 400;
    line-height: 1.2;
    opacity: .6;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/*  Chhoti screen par tafseel sab se pehle qurbani deti hai — raasta aur naam
    dono us se zyada zaroori hain. */
@media (max-width: 760px) {
    .erp-page-copy p { display: none; }
}


/* ============================================================================
   ============================================================================

   GRID BROWSER KE NEECHE TAK — AUR APNE ANDAR SCROLL

   Pehle safha poora neeche tak barhta tha: 200 qatarein aayin to page-bar,
   toolbar aur grid ka sar sab oopar chale gaye, aur user ko har dafa wapas
   oopar aana parta tha ye dekhne ke liye ke kaun sa column kya hai. Neeche
   patti (1–25 of 146, pager) bhi nazar se bahar chali jati thi — yani wo
   cheez jo agla safha kholti hai, wohi dhoondni parti thi.

   Ab dhancha THEHRA hua hai:

       .work            (shell) — 10px ka gap, chaaron taraf
       └ .erp-screen-fill        poori bulandi, flex column
          ├ .erp-page-bar        apni jagah, thehri hui
          ├ (screen ka apna hissa — stat tiles wagera)
          └ .erp-panel           BAQI SAARI jagah
             ├ toolbar           thehra hua
             ├ .erp-grid-wrap    yahi scroll hota hai
             └ .erp-grid-foot    thehri hui — pager hamesha nazar mein

   Grid ka sar sticky hai, is liye qatarein us ke NEECHE se guzarti hain.

   Neeche ka gap alag se nahi likha gaya — wo .work ka apna padding hai, wohi
   jo header aur page-bar ke darmiyan nazar aata hai. Do jagah alag alag
   number likhne se wo hamesha ek jaise nahi rehte.
   ============================================================================
   ============================================================================ */

.erp-screen.erp-screen-fill {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    min-height: 0;
}

.erp-screen-fill > .erp-page-bar,
.erp-screen-fill > .erp-toolbar,
.erp-screen-fill > .stat-row,
.erp-screen-fill > .aj-message-bar { flex: none; }

.erp-screen-fill > .erp-panel {
    flex: 1 1 auto;
    min-height: 240px;          /* is se chhoti grid mein kuch dikhta hi nahi */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.erp-screen-fill > .erp-panel > .erp-toolbar { flex: none; }
.erp-screen-fill > .erp-panel > .erp-grid-foot { flex: none; }

.erp-screen-fill > .erp-panel > .erp-grid-wrap {
    flex: 1 1 auto;
    min-height: 0;              /* flex child ka default min-height:auto scroll khatam kar deta hai */
    overflow: auto;
}

/*  Chhoti screen par bulandi bandhna theek nahi — wahan safha khud scroll
    kare, warna grid ek tang khirki ban jati hai. */
@media (max-width: 760px) {
    .erp-screen-fill { height: auto; }
    .erp-screen-fill > .erp-panel { min-height: 0; }
    .erp-screen-fill > .erp-panel > .erp-grid-wrap { max-height: 70vh; }
}


/* --------------------------------------------------- sar jo thehra rehta hai

   position:sticky pehle se likha tha, magar wo tab tak bemaani hai jab tak
   scroll karne wala dabba khud mehdood na ho. Ab .erp-grid-wrap mehdood hai,
   is liye sar waqai thehrta hai.

   OPACITY HATANI PARI. Sar par opacity:.72 tha — aur opacity poore element
   ko shaffaf karti hai, us ke background samet. Sar ke neeche se guzarti
   qatarein us mein se nazar aati thin. Ab matn ka rang halka hai aur
   background poora bhara hua. */

.erp-grid thead th {
    opacity: 1;
    color: var(--muted, #667b88);
    background: var(--panel, #fff);
    z-index: 3;
}

/*  Pehli qatar ki bulandi tay kar di gayi hai — filter wali qatar ko theek
    us ke neeche bithane ke liye ek pakka number chahiye. Andaza lagane par
    ya to do sar aapas mein charh jate hain ya beech mein lakeer si khul
    jati hai jis mein se qatarein jhankti hain. */
.erp-grid thead tr:first-child th {
    top: 0;
    height: 34px;
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
}

.erp-grid thead tr.erp-filter-row th {
    top: 34px;
    z-index: 2;
    /*  panelSoft rgba par khara hai — sticky sar ke liye wo shaffaf hai aur
        qatarein us mein se nazar aati hain. Wohi rang, magar bhara hua. */
    background: color-mix(in srgb, var(--panel, #fff) 96%, var(--ink, #16202a));
}

/*  Aakhri qatar ki lakeer pehle hata di gayi thi (tbody tr:last-child).
    Scroll hone wale dabbe mein wo lakeer batati hai ke fehrist yahan khatam
    hui — bina us ke aakhri qatar footer se chipki hui lagti hai. */
.erp-screen-fill .erp-grid tbody tr:last-child td { border-bottom: 1px solid var(--line, #eef2f5); }

/*  Grid ka apna scrollbar — baaki portal jaisa, mota Windows wala nahi. */
.erp-grid-wrap { scrollbar-width: thin; scrollbar-color: var(--line, #dde4ea) transparent; }
.erp-grid-wrap::-webkit-scrollbar       { width: 10px; height: 10px; }
.erp-grid-wrap::-webkit-scrollbar-track { background: transparent; }
.erp-grid-wrap::-webkit-scrollbar-thumb {
    background: var(--line, #dde4ea);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}
.erp-grid-wrap::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--primary, #3474d1) 40%, var(--line, #dde4ea));
    background-clip: content-box;
}


/* ============================================================================
   ============================================================================

   POPUP KA SAR TOOT KYUN RAHA THA

   Screenshot mein unwan aur us ki tafseel sar ki patti se BAHAR nikal kar
   form ki pehli satar ("IDENTITY") ke oopar chhap rahe the.

   Wajah popup mein nahi thi. app.css mein ye qaida hai:

        .erp-legacy h2 { font-size: 17px; margin: 28px 0 10px }

   Poori purani stylesheet .erp-legacy ke andar band hai, aur MainLayout @Body
   ko usi class mein lapetta hai — yani har cheez us ke andar hai, popup samet.
   Popup ka unwan ek <h2> hai. Us ke sar par 28px ka margin chipak gaya, neeche
   10px, aur do satron ka block us patti se lamba ho gaya jo 54px ki bani thi.

   Ye us qism ki ghalti hai jo apne se bahut door paida hoti hai: kisi ne popup
   ko haath bhi nahi lagaya tha.

   Neeche do cheezein hain:
     1. Aj* ke andar legacy typography ka daakhla band — margin sifr.
     2. Sar ki bulandi ab bandhi hui nahi, matn ke hisab se banti hai.
   ============================================================================
   ============================================================================ */

.erp-legacy .aj-dialog h1, .erp-legacy .aj-dialog h2,
.erp-legacy .aj-dialog h3, .erp-legacy .aj-dialog h4,
.erp-legacy .aj-dialog p,  .erp-legacy .aj-dialog ul,
.erp-legacy .aj-dialog ol, .erp-legacy .aj-drawer h1,
.erp-legacy .aj-drawer h2, .erp-legacy .aj-drawer h3,
.erp-legacy .aj-drawer p,
.erp-legacy .aj-menu-flyout h1, .erp-legacy .aj-menu-flyout h2,
.erp-legacy .aj-menu-flyout h3, .erp-legacy .aj-menu-flyout p {
    margin: 0;
}

/*  Sar ki bulandi matn se — min-height sirf farsh hai, chhat nahi. */
.erp-form-dialog .aj-dialog-head {
    height: auto;
    min-height: 0;
    align-items: center;
    gap: 11px;
    padding: 7px 12px;
}

/*  ============================================================================
    SAR AUR PAER KABHI DABTE NAHI — SIRF DARMIYAN WALA HISSA
    ============================================================================

    Dialog ek flex ka sutoon hai jis par `max-height: 100dvh - 28px` lagi hai.
    Chhoti screen par jab andar ka saman us hadd se barh jata hai, flex APNE
    TEENON hisson ko dabata hai — kyunke default `flex-shrink: 1` hai.

    Paer bach jata tha, mahaz ittefaqan: template ne us par `min-height: 54px`
    likha hua hai, wo us ka farsh ban jata tha. Sar par hum ne khud `min-height:
    0` likha tha (ta ke chhote matn par sar chhota reh sake) — yani us ka koi
    farsh hi nahi tha. Nateeja 900px par naapa gaya:

        sar chahiye 48px  →  mila 35px

    13px kam. Padding dabta nahi, andar ka saman dabta hai — is liye 34px ka
    icon sar ke content-box se OOPAR aur NEECHE dono taraf nikal jata tha aur
    scroll hone wale hisse par ja chadhta tha. User ne screenshot par yehi
    ghera tha: "chhoti screen par header footer ki tarah fixed ho".

    Sahi taqseem ye hai: sar aur paer apni asli bulandi rakhte hain, aur jo
    kami beshi hai wo BEECH wala hissa uthata hai — us ke paas scroll hai, wo
    isi kaam ke liye bana hai.

    `min-height: 0` beech wale par laazmi hai, warna flex ka bachcha apne
    saman se chhota ho hi nahi sakta aur `overflow: auto` kabhi chalta hi
    nahi.

    Ye qaida HAR dialog par hai, sirf form wale par nahi — shakal teenon ki
    ek hi hai, aur kharabi bhi teenon mein ek hi thi.                        */
.aj-dialog-head,
.aj-dialog-footer { flex: 0 0 auto; }

.aj-dialog-body { flex: 1 1 auto; min-height: 0; }

/*  Icon ab wohi hai jo safhe ki patti par hai: halka dabba, primary glyph.
    Bhara hua gradient dialog ke sar par bhaari lagta hai aur nazar wahan
    kheench leta hai, jahan koi kaam nahi. */
.erp-form-dialog .dialog-title-icon {
    width: 34px; height: 34px; flex: 0 0 34px;
    margin-top: 0;
    border-radius: 9px;
    background: var(--primarySoft, rgba(52,116,209,.12));
    color: var(--primary, #3474d1);
    box-shadow: none;
}
.erp-form-dialog .dialog-title-icon svg { width: 17px; height: 17px; }

.erp-form-dialog .dialog-title-copy { padding-top: 0; min-width: 0; }

/*  Wohi do naap jo .erp-page-bar par hain — popup aur safha ek hi zaban
    bolen. Do satrein mila kar ~31px; sar 34px ke icon par thehar jata hai. */
.erp-legacy .aj-dialog .dialog-title-copy h2,
.erp-form-dialog .dialog-title-copy h2 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.erp-legacy .aj-dialog .dialog-title-copy p,
.erp-form-dialog .dialog-title-copy p {
    margin: 0;
    font-size: 9.5px;
    font-weight: 400;
    line-height: 1.25;
    opacity: .62;
    /*  Ek satar. Do satron ki tafseel sar ki nahi, form ke andar ki baat hai —
        aur sar jitna chhota rahega, form ko utni jagah milegi.              */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    -webkit-line-clamp: none;
}

.erp-form-dialog .dialog-x { align-self: center; margin-top: 0; }


/* ============================================================================
   TOOLBAR — ginti switch ke neeche, buttons daayen sire par

   Pehle ginti (146 users) toolbar ke doosre kinare par thi, search se bahut
   door. Filter lagate waqt nazar search par hoti hai aur badalta hua number
   nazar ke daere se bahar rehta tha — yani wo cheez jo batati hai ke filter
   ne kaam kiya, wohi nazar nahi aati thi.

   Aur Filters / Columns / Export unwan ki patti se yahan aa gaye. Wo grid ke
   buttons hain; unhein grid ke saath hona chahiye, us patti mein nahi jahan
   screen ka naam likha hai.
   ============================================================================ */

/*  `.erp-toolbar-stack` yahan se hat gaya.

    Wo switch aur ginti ko ek sath lapetne wala dabba tha. "Show inactive" ab
    switch nahi raha — wo baqi filtron ke saath on/off wala button ban gaya
    hai (dekho ErpListView.razor) — is liye ginti akeli bach gayi aur usay
    lapetne ki koi wajah nahi rahi.

    Dabba khali reh jane par bhi zinda rakhna sab se bura hota: agle banday ko
    lagta hai us mein kuch hai.                                             */
.erp-toolbar .erp-count { font-size: 11.5px; opacity: .65; white-space: nowrap; flex: none; }

/*  Halat ka segmented filter — Active / Inactive / Deleted.

    Yahan pehle ek switch tha. Switch ne do kaam theek kiye aur do nahi kar
    saka: TEESRI halat (mita hua) us mein aa hi nahi sakti thi, aur wo ye
    kabhi nahi bata sakta tha ke doosri taraf kuch hai bhi ya nahi. Ginti pill
    par likhi hai, is liye banda bina click kiye jaan leta hai ke 3 band pare
    hain aur 1 mita hua.

    Card ki jagah pill is liye: 46 screens hain, aur teen card har screen ke
    grid ko ~90px neeche dhakel dete. Ye 30px mein wohi kaam karta hai aur
    mobile par bhi ek hi qatar rehta hai.

    `flex: none` warna tang jagah par pill nichur kar do satron mein toot-te
    hain.                                                                     */
.erp-states {
    display: inline-flex;
    align-items: stretch;
    flex: none;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--line, #dde3e9);
    border-radius: 999px;
    background: var(--surface2, #f6f8fa);
}

.erp-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    height: 26px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted, #6b7a89);
    font: inherit;
    font-size: 11.5px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.erp-state:hover:not(.on) { background: color-mix(in srgb, var(--text, #16202a) 6%, transparent); }

/*  Chuni hui pill safed uthti hui — jaisa har segmented control mein hota hai.
    Rang us halat ka: zinda sabz, band peela, mita hua laal. Rang AKELA khabar
    nahi deta (rang na dekh sakne wale ke liye), is liye chunaav ka asal ishara
    background aur wazan hai; rang sirf us par lagta hai.                     */
.erp-state.on {
    background: var(--surface, #fff);
    color: var(--text, #16202a);
    font-weight: 600;
    box-shadow: 0 1px 2px rgb(0 0 0 / .08);
}

.erp-state.on.tone-ok { color: var(--success, #1c8b58); }
.erp-state.on.tone-warn { color: var(--warning, #d99b28); }
.erp-state.on.tone-danger { color: var(--danger, #c33c32); }

/*  Ginti ka chhota gola. `min-width` ke baghair 1 aur 12 ke gole alag naap ke
    hote hain aur teenon pill ek doosre ke saath hilti nazar aati hain.       */
.erp-state-count {
    min-width: 18px;
    padding: 0 4px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 14%, transparent);
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/*  Purana switch ka container — kuch screens abhi bhi use kar sakti hain.   */
.erp-toolbar-switch { display: flex; align-items: center; flex: none; }

/*  Mita hue record ko wapas laane wala button. Delete ke ulat kaam hai, is
    liye rang bhi ulat — laal nahi, sabz.                                     */
.row-btn-restore:hover:not(:disabled) {
    color: var(--success, #1c8b58);
    background: color-mix(in srgb, var(--success, #1c8b58) 12%, transparent);
}

.erp-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/*  Search ab chhota. 320px par wo poori patti kha jata tha aur baqi sab kinare
    par simat jata tha — halanke likha usmein aam tor par ek do lafz hi jata
    hai. 240px kaafi hai, aur zaroorat par barh jata hai.                    */
.erp-toolbar-search { flex: 0 1 260px; min-width: 180px; }

/*  ============================================================================
    TANG SCREEN — BUTTON SIRF ICON, AUR APNI QATAR MEIN HI RAHE
    ============================================================================

    Pehle yahan (aur patti par 900px pe) ye likha tha:

        .erp-toolbar-actions { width: 100% }

    Yani jagah kam parte hi buttons ko poori qatar de kar neeche utaar do.
    Us se do satrein banti thin, aur mobile par teen — screenshot mein
    unwan ki patti 95px aur toolbar 111px ki thi. Chhoti screen par jagah sab
    se kam hoti hai, aur hum us par sab se ziyada kharch kar rahe the.

    Sahi jawab jagah dena nahi, MATN hatana hai. Icon wohi rehta hai — aur
    banda topbar par ye shakal pehle se roz dekhta hai (launcher, search,
    notifications sab isi tarah ke chaukor icon buttons hain). Yani sikhna
    kuch nahi parta.

    Naam gum nahi hota, sirf nazar se hatta hai:
      • `title` par rehta hai — hover/long-press par nazar aata hai
        (AjButton ab Title na hone par Text ko title bana deta hai)
      • matn DOM mein rehta hai, sirf nazar se chhupta hai (clip-path wala
        tareeqa) — is liye screen reader ko button ka naam ab bhi milta hai.
        `display: none` likhne par wo naam bhi chala jata aur button
        andhe banday ke liye be-naam ho jata.

    Chevron (Columns/Export par) is halat mein hat jata hai: 34px ke chaukor
    mein icon aur chevron dono thoosne se dono chhote aur ganday lagte hain,
    aur menu khulna waise bhi ek click par maloom ho jata hai.               */

/*  Hadd 980px kyun, 900 kyun nahi — ye naap kar chuni gayi hai, andaze se
    nahi. Naam ke sath buttons ko itni jagah chahiye:

        search 260 + switch/ginti 215 + chaar buttons 428 + faasle 52  =  955

    Yani 955px se neeche naam ke sath ye qatar toot jati hai. 900 rakhne par
    901px se 980px ke darmiyan wohi purani do-satar wali shakal wapas aa jati
    (naap kar dekha: 901px par toolbar 111px ka ho jata tha). 980 par patti
    aur toolbar dono ek sath compact hote hain — aadha compact aadha nahi,
    aisi shakal se bura kuch nahi.                                          */
@media (max-width: 1040px) {
    .erp-page-bar { flex-wrap: nowrap; }

    .erp-page-actions,
    .erp-toolbar-actions {
        width: auto;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 6px;
    }

    /*  Matn nazar se hat gaya — DOM aur a11y tree mein maujood. */
    .erp-page-actions .aj-button > .aj-button-copy,
    .erp-toolbar-actions .aj-button > .aj-button-copy,
    .erp-page-actions > a.aj-button > span:not(.aj-icon) {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .erp-page-actions > .aj-button,
    .erp-page-actions > a.aj-button,
    .erp-toolbar-actions .aj-button {
        position: relative;
        width: 34px;
        min-width: 34px;
        padding: 0;
        gap: 0;
    }

    .erp-colmenu-wrap > .aj-button::after { display: none; }
}

/*  ---- Phone: search aur buttons ek qatar, ginti doosri

    Sab se chhoti jagah par bhi ek qatar par zid karna bemani hai: search ka
    khana 130px se chhota kar do to us mein likha hua nazar hi nahi aata.

    To sawal ye ban jata hai ke DOOSRI qatar mein kya utre. Jawab: ginti.
    Wajah — search aur buttons dono par banda HAATH lagata hai; ginti sirf
    BATATI hai ke abhi list mein kitne hain. Kaam karne wali cheezein saath,
    batane wali cheez neeche.

    `order` se ye kiya gaya, markup badle baghair — bari screen par tarteeb
    theek hai aur wahan kuch badalna nahi chahiye. Teenon par order saaf likha
    hai; sirf ginti par likhne se wo (order 0) search se PEHLE chali jati.    */
@media (max-width: 780px) {
    .erp-toolbar { flex-wrap: wrap; row-gap: 8px; }
    .erp-toolbar-search { order: 1; flex: 1 1 140px; min-width: 130px; }
    .erp-toolbar-actions { order: 2; flex: none; }
    .erp-toolbar > .grow { display: none; }
    .erp-toolbar-switch { order: 3; }
    .erp-states { order: 3; }
    .erp-toolbar .erp-count { order: 4; }
}

/*  Bohot tang screen: pill par sirf ginti aur pehla harf ka rang bachta to
    kaafi nahi hota — banda naam parhe baghair nahi jaan sakta ke kaunsi pill
    kya hai. Is liye naam rehta hai aur padding kam hoti hai.                 */
@media (max-width: 420px) {
    .erp-state { padding: 0 6px; gap: 4px; font-size: 11px; }
    .erp-state-count { min-width: 16px; height: 14px; font-size: 9.5px; }
}


/*  Filter ki qatar ka chhota naap neeche "SEARCHABLE DROPDOWN AB EK TEXTBOX
    HAI" wale hisse mein hai — wahan ek hi jagah, kyunke naap ab rail ki
    ginti par khara hai. Yahan purana (trigger wala) qaida tha; wo control ke
    badalne ke baad kisi cheez par lagta hi nahi tha.                        */


/* ------------------------------------------------------- clear ka button */

.aj-clear-btn { color: var(--muted, #667b88); }
.aj-clear-btn:hover {
    color: var(--danger, #c33c32);
    background: color-mix(in srgb, var(--danger, #c33c32) 12%, transparent);
}
.aj-clear-btn svg { width: 13px; height: 13px; }


/* ------------------------------------------------------- export ki fehrist */

.erp-exportmenu { min-width: 232px; padding: 6px; }

.erp-exportmenu-row {
    width: 100%;
    gap: 10px;
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.erp-exportmenu-ico {
    display: grid; place-items: center;
    flex: 0 0 26px; width: 26px; height: 26px;
    border-radius: 7px;
    background: var(--primarySoft, rgba(52,116,209,.12));
    color: var(--primary, #3474d1);
}
.erp-exportmenu-ico svg { width: 13px; height: 13px; }

.erp-exportmenu-copy { display: grid; line-height: 1.25; min-width: 0; }
.erp-exportmenu-copy b     { font-size: 12.5px; font-weight: 600; }
.erp-exportmenu-copy small { font-size: 10.5px; opacity: .6; }


/* ============================================================================
   MATCH KA BUTTON  —  "matn kahan mile?"

   AjMatchPicker teen jagah lagta hai: toolbar ka search, AjSearchableDropdown
   ka khana, aur AjDropdown ka combo. Teenon par shakal ek — is liye qaida bhi
   ek hi jagah.

   Panel .search-filter-popover hai, wohi jo template dropdown ke liye likh
   chuka hai. Us ka apna qaida top:52px / right:8px flyout ke sar ke hisab se
   tha; yahan anchor khud button hai, is liye jagah dobara batani parti hai.
   ============================================================================ */

.aj-match-wrap { position: relative; display: inline-flex; }

/*  ---------------------------------------------------------------------------
    FUNNEL KA BUTTON — EK SHAKAL, HAR JAGAH

    Pehle yahan sirf rang likha tha, aur baqi shakal template ke
    `.aj-inline-action` se aati thi. Magar wo qaida template mein SCOPED hai:

        .aj-dynamic-input .aj-inline-action,
        .aj-dropdown      .aj-inline-action  { width:27px; height:27px; … }

    Yani wo sirf un do dabbon ke ANDAR chalta hai. Toolbar ka search un mein
    se ek hai, is liye wahan button theek dikhta tha. Magar App Launcher,
    Global Search, ghanti aur branch/year ke selector — chaaron mein search ka
    khana HAATH SE likha hua hai, kisi `aj-dynamic-input` ke andar nahi.

    Browser se poochha to natija ye tha:

        toolbar   27×27, radius 4, background transparent
        cmdk      32×28, radius 0, background rgb(239,239,239), border 2px OUTSET
        ghanti    29×27, wohi
        selector  29×27, wohi

    `2px outset` aur `rgb(239,239,239)` kisi stylesheet mein likhe hi nahi —
    ye BROWSER ka apna default button hai. Yani teen jagah funnel ek bhoora
    ubhra hua OS button tha, aur chauthi jagah ek saada icon. Char jagah do
    shaklein, aur dono mein se koi bhi jaan boojh kar nahi chuni gayi thi.

    Ab qaida `.aj-inline-action.aj-match-btn` par hai — do class, taake wo
    template ke scoped qaide se specificity mein baraabar rahe aur baad mein
    aane ki wajah se jeet jaye. Sirf `.aj-match-btn` likhne par toolbar mein
    wo haar jata (0,1,0 banaam 0,2,0) aur wahin do shaklein reh jatin.
    --------------------------------------------------------------------------- */
.aj-inline-action.aj-match-btn {
    position: relative;
    flex: none;
    width: 26px;
    height: 26px;
    padding: 0;
    display: grid;
    place-items: center;

    /*  Border ab bhi hai, bas rang nahi. Hover par sirf rang bharta hai —
        agar border wahan PAIDA hoti to button ek pixel bara ho jata aur
        us ke bagal ki har cheez halke se hilti. Wo hilna nazar aata hai.  */
    border: 1px solid transparent;
    border-radius: calc(var(--radius, 5) * 1px);
    background: transparent;
    color: var(--muted, #67798a);
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.aj-inline-action.aj-match-btn svg { width: 13px !important; height: 13px !important; }

/*  Panel khula hua hai. */
.aj-inline-action.aj-match-btn.active {
    background: var(--primarySoft, #eaf2fd);
    border-color: color-mix(in srgb, var(--primary, #3474d1) 26%, var(--line, #dde4ea));
    color: var(--primary, #3474d1);
}

/*  ---------------------------------------------------------------------------
    AUR YE WO CHEEZ HAI JO PEHLE THI HI NAHI: BUTTON APNI HAALAT BATATA HAI

    Funnel ek SWITCH hai — us ke peechhe chaar tareeqe hain aur un mein se ek
    is waqt laga hua hota hai. Magar button har haalat mein bilkul ek jaisa
    tha: "contains" par bhi wohi, "exact" par bhi wohi.

    Nateeja ye banta tha ke banda "Exact" laga kar bhool jata, phir aadha naam
    likh kar hairan hota ke kuch milta kyun nahi — aur wajah saamne hi maujood
    hoti, bas nazar nahi aati. Us se bura koi filter nahi jo laga ho aur dikhe
    nahi.

    Ab ghair-default tareeqe par button primary rang mein rehta hai aur us ke
    kone par ek nuqta aa jata hai — wohi nishan jo har grid mein "is column par
    filter laga hai" ke liye hota hai. Nuqte ke gird surface ka halqa is liye
    ke wo hover ke rang par bhi alag nazar aaye.

    Default (contains) par koi nishan nahi: jo cheez HAR waqt roshan ho, wo
    kuch nahi batati.
    --------------------------------------------------------------------------- */
.aj-inline-action.aj-match-btn.aj-match-set { color: var(--primary, #3474d1); }

.aj-inline-action.aj-match-btn.aj-match-set::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary, #3474d1);
    box-shadow: 0 0 0 1.5px var(--surface, #fff);
}

.aj-inline-action.aj-match-btn:disabled {
    opacity: .45;
    cursor: default;
    background: transparent;
    border-color: transparent;
}

/*  ---------------------------------------------------------------------------
    MATN AUR BUTTON KE DARMIYAN EK BAAREEK LAKEER

    Bina us ke funnel khane ke andar TAIRTA hua lagta hai — jaise matn ka
    hissa ho. Lakeer ek lamha kam sochne ka faisla hai: baayen matn likha jata
    hai, daayen ek button hai.

    Yehi shakal `.aj-searchable-select .aj-searchable-actions::before` par
    pehle se maujood hai (dropdown ke rail par). Nayi cheez nahi banayi —
    wohi naap, wohi rang.
    --------------------------------------------------------------------------- */
.cmdk-match,
.ntf-match,
.context-pop-match { gap: 6px; }

.cmdk-match::before,
.ntf-match::before,
.context-pop-match::before,
.erp-toolbar-search .aj-input-actions::before {
    content: "";
    flex: none;
    align-self: center;
    width: 1px;
    height: 16px;
    background: var(--line, #dde4ea);
}

.erp-toolbar-search .aj-input-actions { gap: 6px; }

/*  Scrim: bahar kahin bhi click karo, panel band. Us ke baghair panel khula
    khara reh jata hai jab banda kisi aur khane par chala jaye.              */
.aj-match-scrim {
    position: fixed; inset: 0; z-index: 1200;
    border: 0; background: transparent; cursor: default;
}

.aj-match-wrap > .search-filter-popover {
    top: calc(100% + 8px) !important;
    right: -4px !important;
    left: auto !important;
    bottom: auto !important;
    width: 236px !important;
    z-index: 1205 !important;
}
/*  Teer ki jagah portal.js se aati hai (--aj-arrow) — panel kinare se clamp
    ho kar khisak sakta hai, aur us soorat mein 12px kisi aur cheez ki taraf
    ishara karne lagta hai. Fallback 12px wohi purani qeemat hai.            */
.aj-match-wrap > .search-filter-popover::before {
    right: var(--aj-arrow, 12px);
    display: block;
}

/*  Neeche jagah na ho to panel oopar khulta hai (portal.js aj-flyout-up laga
    deta hai) — us soorat mein teer bhi palat jata hai, warna wo hawa mein
    ishara karta rehta hai.                                                  */
.aj-match-wrap > .search-filter-popover.aj-flyout-up::before {
    top: auto;
    bottom: -6px;
    border-left: 0;
    border-top: 0;
    border-right: 1px solid color-mix(in srgb, var(--primary, #3474d1) 18%, var(--line, #dde4ea));
    border-bottom: 1px solid color-mix(in srgb, var(--primary, #3474d1) 18%, var(--line, #dde4ea));
}

/*  Toolbar ke search khane ke andar trailing slot ko saans chahiye — warna
    button khane ke kinare se chipak jata hai.                               */
.erp-toolbar-search .aj-input-actions { padding-right: 2px; }


/* ============================================================================
   SEARCHABLE DROPDOWN AB EK TEXTBOX HAI

   Andar <button> ki jagah <input> aa gaya (dekho AjSearchableDropdown.razor).
   Do cheezein CSS se aani hain:

     1. Input ki apni shakal — template ne .aj-searchable-trigger ke liye
        likha tha, input ke liye nahi.
     2. Daayen sire ka rail. Us par ab teen tak buttons baith sakte hain
        (funnel, clear, chevron) aur matn un ke NEECHE nahi jana chahiye —
        screenshot mein theek yehi hua tha: "FIN MGR | Finance Manage✕".
        Component har render par ginta hai ke kitne buttons hain aur
        aj-rail-1 / -2 / -3 laga deta hai; padding usi se aata hai.
   ============================================================================ */

/*  !important yahan MAJBOORI hai, aadat nahi.

    Template mein pehle se likha hua hai:

        .aj-searchable-select .aj-searchable-input { padding-right: 4px !important }

    Us waqt is class par koi input tha hi nahi (control button par khara tha),
    magar qaida wahan mojood hai — aur !important ke saath. Bina !important ke
    mera 84px us 4px se haar jata tha, aur matn theek waise hi buttons ke
    neeche chala jata jaise screenshot mein tha.

    Browser se poochh kar pakra gaya, andaze se nahi.                        */

.aj-searchable-select .aj-searchable-input {
    width: 100% !important;
    height: var(--control-h, 40px) !important;
    min-width: 0;
    padding: 0 8px 0 11px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text, #16202a) !important;
    font-family: inherit;
    font-size: var(--control-font, 12.5px) !important;
    outline: none !important;
    text-overflow: ellipsis;
}

.aj-searchable-select.has-leading .aj-searchable-input { padding-left: 2px !important; }

/*  RAIL KO KASNA — teen buttons, magar teen buttons jitni jagah nahi.

    Shikayat theek thi: teenon zaroori hain, magar 26px ke teen alag alag
    buttons 84px kha rahe the — chhote khane par matn ke liye aadhi jagah hi
    bachti thi.

    Do cheezein ki gayin, aur dono shakal behtar karti hain:

      * Button 26px se 22px, glyph 13px se 11.5px. Ek doosre se chipke huay,
        bina gap ke — teen alag alag cheezon ke bajaye EK cluster nazar aata
        hai. Nazar ko wo ek control lagta hai, teen nahi.
      * Rail se pehle ek baal jitni lakeer. Wo batati hai ke yahan se aage
        matn nahi, buttons hain — aur matn us se pehle rukta hua saaf lagta
        hai.

    84 → 72 → 50 → 28. Chhota khana (filter ki qatar) is se sab se ziyada
    faida uthata hai.                                                        */

.aj-searchable-select .aj-searchable-actions .aj-inline-action,
.aj-searchable-select .aj-searchable-actions .dropdown-chevron-btn,
.aj-searchable-select .aj-searchable-actions .aj-match-btn {
    width: 22px !important;
    min-width: 0 !important;
    height: 22px !important;
    padding: 0 !important;
    border-radius: 6px;
    flex: 0 0 22px !important;
}
.aj-searchable-select .aj-searchable-actions svg { width: 11.5px !important; height: 11.5px !important; }
.aj-searchable-select .aj-searchable-actions { gap: 0 !important; padding-left: 4px; }

/*  Matn aur buttons ke darmiyan ek baareek lakeer. */
.aj-searchable-select .aj-searchable-actions::before {
    content: "";
    align-self: center;
    width: 1px;
    height: 15px;
    margin-right: 4px;
    background: var(--line, #dde4ea);
}

/*  PADDING KA HISAB CHHOR DIYA GAYA — ab LAYOUT ye kaam karta hai.

    Pehle yahan rail-1/2/3 ke teen padding likhe the: 28 / 50 / 72px. Wo
    andaza tha, aur andaza galat nikla — buttons asal mein 30px ke ban rahe
    the (template ka apna qaida), yani teen ke liye 83px chahiye the aur
    padding 72px tha. Matn phir bhi 11px un ke neeche chala jata.

    Asal masla ye tha ke buttons ABSOLUTE the (template: position:absolute;
    right:4px). Absolute cheez layout mein jagah nahi ghairti, is liye matn ko
    us ki maujoodgi ka pata hi nahi chalta aur padding se jhoot bola jata hai.

    Ab wo layout ka hissa hain: .aj-box pehle se flex hai, buttons static ho
    gaye, aur input flex:1. Matn utni hi jagah leta hai jitni bachi hai —
    ek button ho ya teen, hisab khud lagta hai aur kabhi galat nahi hota.

    aj-rail-N class rehne di gayi hai (component se aati hai) — kal kisi ko
    ginti chahiye to hook maujood hai, magar naap ab us par khara nahi.      */

.aj-searchable-select .aj-searchable-shell {
    display: flex !important;
    align-items: center !important;
}

.aj-searchable-select .aj-searchable-input {
    flex: 1 1 auto !important;
    width: auto !important;
    padding-right: 4px !important;
}

/*  DAAYEN KINARE KA 38px KHALI — buttons static hone ka baqaya.

    Template mein likha hai:

        .aj-searchable-select > .aj-box { padding-right: 38px !important }

    Wo padding us waqt ka hai jab buttons ABSOLUTE the: unhein jagah chahiye
    thi aur box ko wo jagah khali chhorni parti thi. Ab buttons layout ka
    hissa hain, is liye wo 38px kisi kaam ka nahi raha — aur funnel ke baad
    ek bara sa khali khitta chhorta tha, jo screenshot mein saaf nazar aaya.

    4px: bas itna ke aakhri button kinare se chipke nahi.                    */
.aj-searchable-select.aj-select > .aj-box { padding-right: 4px !important; }

.aj-searchable-select .aj-searchable-actions {
    position: static !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
}

/*  AjDropdown ka combo: wahan trailing abhi bhi absolute hai (us ka trigger
    button poori chaurai leta hai aur usay static karna doosri screens ka
    khaka hila deta). Is liye wahan padding hi rehne diya gaya, magar teen
    buttons ke liye kushada — 100px. Tang hisab wahi masla wapas laata hai
    jo abhi theek kiya hai.                                                  */
.aj-dropdown.aj-dropdown-editable .aj-dropdown-input { padding-right: 100px !important; }



/* ---------------------------------------- filter ki qatar mein chhota naap

   Filter ki qatar mein poora 40px ka khana bahut lamba hai — teen qatarein
   (sar, filter, aur qatar khud) mila kar grid ka aadha hissa kha jata. Sirf
   wahan control 28px ka ho jata hai aur buttons bhi chhote.

   Funnel yahan bhi hai (user ne column-wise search par bhi maanga tha), is
   liye rail teen button tak ja sakta hai aur us ka apna padding neeche likha
   hai.                                                                      */

.erp-filter-row .aj-searchable-select { min-width: 0; width: 100%; }

.erp-filter-row .aj-searchable-select .aj-box,
.erp-filter-row .aj-searchable-input {
    height: 28px !important;
    min-height: 28px !important;
}
.erp-filter-row .aj-searchable-input { font-size: 11.5px !important; padding-left: 8px !important; }
.erp-filter-row .aj-searchable-actions { right: 1px !important; height: 26px !important; }
.erp-filter-row .aj-searchable-select .aj-searchable-actions .aj-inline-action,
.erp-filter-row .aj-searchable-select .aj-searchable-actions .aj-match-btn {
    width: 19px !important; height: 19px !important;
}
.erp-filter-row .aj-searchable-select .aj-searchable-actions svg { width: 10.5px !important; height: 10.5px !important; }
.erp-filter-row .aj-searchable-select .aj-searchable-actions::before { height: 12px; margin-right: 3px; }

/*  Filter ki qatar mein bhi padding ka koi hisab nahi — layout khud karta hai. */

/*  Label chhupa hua hai, dikhaya nahi ja raha — display:none use screen
    reader se bhi chhupa deta. Column ka sar hi is khane ka label hai. */
.erp-filter-row .aj-label {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0 !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/*  Jis column par filter LAGA hua hai wo alag nazar aana chahiye — warna
    "data gayab ho gaya" ka phone aata hai aur wajah koi nahi dhoondh pata. */
.erp-filter-row .aj-searchable-select.floating .aj-box {
    border-color: var(--primary-ink, var(--primary, #3474d1)) !important;
    background: var(--primarySoft, rgba(52,116,209,.08));
}


/* ============================================================================
   ============================================================================

   TASDEEQ KA DIALOG  —  chaar sawal, chaar jagah

   Purana confirm ek chhota dabba tha jis mein teen satrein ek doosre ke
   neeche pari thin. Banda unhein ek hi paragraph ki tarah dekhta aur bina
   parhe Delete daba deta — aur "galat qatar mit gayi" wala phone isi se aata
   hai.

   Ab chaar alag hisse hain, kyunke sawal bhi chaar hain:

       sar            ye kaam kya hai            "Delete user"
       surkh panel    kis cheez par              "Delete admin?"
       khanon ki grid wo cheez hai kaun si       Login · Name · Role · Branch
       neeche patti   is ke baad kya hoga        "record rehta hai, band ho jata hai"

   Teesra hissa sab se zaroori hai: jis qatar par click hua, us ki wohi
   qeematein saamne aati hain jo banda abhi grid mein dekh raha tha. Ye
   khud-ba-khud banta hai — list screen apne maujooda columns se pehle chaar
   le leti hai, kisi screen ko kuch likhna nahi parta.
   ============================================================================
   ============================================================================ */

.erp-confirm { width: min(560px, calc(100vw - 32px)); }

.erp-confirm .aj-dialog-head {
    align-items: center;
    gap: 11px;
    padding: 7px 12px;
    min-height: 0;
    height: auto;
}
.erp-confirm .dialog-title-icon {
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 9px;
    background: var(--primarySoft, rgba(52,116,209,.12));
    color: var(--primary, #3474d1);
    box-shadow: none;
}
.erp-confirm.danger .dialog-title-icon {
    background: color-mix(in srgb, var(--danger, #c33c32) 12%, transparent);
    color: var(--danger, #c33c32);
}
.erp-confirm .dialog-title-icon svg { width: 17px; height: 17px; }

.erp-confirm .dialog-title-copy h2 {
    margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.18;
}
.erp-confirm .dialog-title-copy p {
    margin: 0; font-size: 9.5px; line-height: 1.25; opacity: .62;
}

.erp-confirm .aj-dialog-body { display: grid; gap: 12px; padding: 14px; }

/* ------------------------------------------------------------ asal sawal */

.erp-confirm-lead {
    display: flex; align-items: flex-start; gap: 13px;
    padding: 14px;
    border-radius: calc(var(--radius, 5) * 2px);
    background: color-mix(in srgb, var(--danger, #c33c32) 6%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, var(--danger, #c33c32) 18%, transparent);
}
.erp-confirm.safe .erp-confirm-lead {
    background: var(--primarySoft, rgba(52,116,209,.08));
    border-color: color-mix(in srgb, var(--primary, #3474d1) 20%, transparent);
}

.erp-confirm-ico {
    display: grid; place-items: center;
    flex: 0 0 38px; width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--surface, #fff);
    color: var(--danger, #c33c32);
    border: 1px solid color-mix(in srgb, var(--danger, #c33c32) 16%, transparent);
}
.erp-confirm.safe .erp-confirm-ico {
    color: var(--primary, #3474d1);
    border-color: color-mix(in srgb, var(--primary, #3474d1) 18%, transparent);
}
.erp-confirm-ico svg { width: 18px; height: 18px; }

.erp-confirm-lead b     { display: block; font-size: 16px; line-height: 1.25; letter-spacing: -.01em; }
.erp-confirm-lead small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.45; opacity: .7; }

/* ------------------------------------------------- record ki pehchan, khanon mein */

.erp-confirm-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 520px) { .erp-confirm-facts { grid-template-columns: 1fr; } }

.erp-confirm-fact {
    padding: 9px 12px;
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 2px);
    background: var(--panelSoft, rgba(0,0,0,.015));
    min-width: 0;
}
.erp-confirm-fact small {
    display: block; font-size: 10px; opacity: .62; margin-bottom: 2px;
}
.erp-confirm-fact b {
    display: block; font-size: 12.5px; font-weight: 650;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --------------------------------------------------- is ke baad kya hoga */

.erp-confirm-note {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 11px 13px;
    border-radius: calc(var(--radius, 5) * 2px);
    background: color-mix(in srgb, var(--danger, #c33c32) 5%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, var(--danger, #c33c32) 14%, transparent);
}
.erp-confirm.safe .erp-confirm-note {
    background: var(--panelSoft, rgba(0,0,0,.015));
    border-color: var(--line, #dde4ea);
}
.erp-confirm-note-ico { flex: none; color: var(--danger, #c33c32); margin-top: 1px; }
.erp-confirm.safe .erp-confirm-note-ico { color: var(--primary, #3474d1); }
.erp-confirm-note-ico svg { width: 15px; height: 15px; }

.erp-confirm-note b    { display: block; font-size: 12px; margin-bottom: 1px; }
.erp-confirm-note span { font-size: 11.5px; line-height: 1.5; opacity: .72; }

.erp-confirm .aj-dialog-footer { gap: 8px; }


/* ============================================================================
   TOAST — kaamyabi ka paighaam, aur sirf kaamyabi ka

   Poore portal ka ek hi qaida ab ye hai:

       kaamyabi (save, delete, export)   →  TOAST, kone mein, khud chala jata hai
       ghalti ya database ka paighaam    →  MESSAGE BAR, safhe par, rehti hai
       info                              →  MESSAGE BAR

   Wajah asaan hai: kaamyabi par kuch KARNA nahi hota — banda parhta hai aur
   aage barh jata hai. Ghalti par karna parta hai, aur jo paighaam khud gayab
   ho jaye wo parhne se pehle bhi gayab ho sakta hai.
   ============================================================================ */

.toast-stack {
    position: fixed;
    top: calc(var(--header, 52px) + 12px);
    right: 14px;
    z-index: 3000;
    display: grid;
    gap: 8px;
    width: min(360px, calc(100vw - 28px));
    pointer-events: none;
}

.toast-stack .toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 11px;
    padding: 11px 12px;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #dde4ea);
    border-left: 3px solid var(--primary, #3474d1);
    border-radius: calc(var(--radius, 5) * 2px);
    box-shadow: 0 10px 28px rgba(16, 32, 48, .14);
    animation: erpToastIn .16s ease both;
}

@keyframes erpToastIn { from { opacity: 0; transform: translateX(12px) } }

.toast-stack .toast.success { border-left-color: var(--success, #1e965a); }
.toast-stack .toast.error   { border-left-color: var(--danger, #c33c32); }
.toast-stack .toast.warning { border-left-color: var(--warning, #b07d10); }

.toast-stack .toast .ti {
    display: grid; place-items: center;
    flex: 0 0 26px; width: 26px; height: 26px;
    border-radius: 8px;
    background: var(--primarySoft, rgba(52,116,209,.12));
    color: var(--primary, #3474d1);
}
.toast-stack .toast.success .ti { background: color-mix(in srgb, var(--success, #1e965a) 12%, transparent);  color: var(--success, #1e965a); }
.toast-stack .toast.error   .ti { background: color-mix(in srgb, var(--danger, #c33c32) 12%, transparent); color: var(--danger, #c33c32); }
.toast-stack .toast.warning .ti { background: color-mix(in srgb, var(--warning, #b07d10) 14%, transparent); color: var(--warning, #b07d10); }
.toast-stack .toast .ti svg { width: 14px; height: 14px; }

.toast-stack .toast-copy { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.toast-stack .toast-copy b     { font-size: 12.5px; }
.toast-stack .toast-copy small { font-size: 11.5px; opacity: .72; }

.toast-stack .toast-x {
    flex: none; width: 22px; height: 22px;
    display: grid; place-items: center;
    border: 0; border-radius: 6px;
    background: transparent; color: inherit; opacity: .45; cursor: pointer;
}
.toast-stack .toast-x:hover { opacity: 1; background: var(--panelSoft, rgba(0,0,0,.05)); }
.toast-stack .toast-x svg { width: 12px; height: 12px; }

@media (max-width: 640px) {
    .toast-stack { left: 14px; right: 14px; width: auto; }
}


/* ============================================================================
   ============================================================================

   GRID KI SAAF SUTHRI SHAKAL  —  aur wo khali jagah jo neeche reh jati thi

   User ne screenshot par surkh lakeer kheench kar kaha: grid yahan tak aani
   chahiye. Panel to pehle hi neeche tak aata tha — magar aakhri qatar ke baad
   jo hissa bachta tha wo bilkul KHALI safed reh jata, aur nazar ko wahin lagta
   ke grid khatam ho gayi. Us khali hisse ko "grid ka hissa" banana hi asal
   kaam tha.

   PEHLA HAL — AUR WO GHALAT THA. Maine baqi bulandi par wohi lakeerein
   chala di thin jo qataron ke darmiyan hain (ek repeating-linear-gradient).
   Soch ye thi ke grid "neeche tak" nazar aaye.

   User ne agli hi screenshot par us poore hisse par surkh ka nishan laga kar
   likha: ye hatao. Aur baat theek hai — jo lakeerein qatar ki shakal ki hon
   magar un mein kuch na ho, wo JHOOTI QATAREIN lagti hain. Aankh unhein
   ginti hai, "1-3 of 3" ke bawajood. Khali jagah bharna maqsad nahi tha;
   maqsad ye tha ke wo jagah IRADATAN lage.

   Ab: saaf background, koi ghost lakeer nahi. Panel phir bhi neeche tak
   aata hai (wo `.erp-screen-fill` ka kaam hai, background ka nahi), footer
   neeche chipka rehta hai, aur teen qataron ke baad jo bachta hai wo saaf
   safha hai — bilkul waise jaise achhi grid mein hota hai.

   Baqi is hisse mein grid ki aam safai hai: sar, qatarein, hover, chuni hui
   qatar, footer. Sab template ke apne rangon par — koi naya rang nahi.
   ============================================================================
   ============================================================================ */

/*  Flex column, taake khali halat ka paighaam BAQI SAARI jagah le kar apne
    beech mein baith sake. Table apni bulandi jitna rehta hai; niche wala
    khana phailta hai.                                                       */
.erp-grid-wrap {
    --erp-row-h: 38px;

    display: flex;
    flex-direction: column;
    background: var(--panel, #fff);
}

.erp-grid-wrap > .erp-grid { flex: 0 0 auto; }

/*  Qatarein apna background rakhti hain — sticky sar ke neeche se guzarte
    waqt aar paar nazar na aayen.                                            */
.erp-grid tbody td { background: var(--panel, #fff); }


/* --------------------------------------------------------------- sar */

.erp-grid thead tr:first-child th {
    font-size: 10.5px;
    letter-spacing: .06em;
    color: var(--muted, #667b88);
    border-bottom: 1px solid var(--line2, #c7d7db);
}

/*  Jis column par tarteeb lagi hai us ka poora khana halka roshan — sirf teer
    kaafi nahi hota jab bees column hon. */
.erp-grid thead th:has(.erp-sort.sorted) {
    background: var(--primarySoft, rgba(52,116,209,.08));
    color: var(--primary, #3474d1);
}


/* ------------------------------------------------------------ qatarein */

.erp-grid tbody td {
    height: var(--erp-row-h);
    padding-top: 0;
    padding-bottom: 0;
}

/*  Hover: baayen ek patti aur halka rang. Patti is liye ke chaudi table par
    sirf rang badalne se aankh qatar ka sira nahi pakarti. */
.erp-grid tbody tr:hover td { background: var(--primarySoft, rgba(52,116,209,.06)); }

/*  Chuni hui qatar — hover se ziyada pakki, aur baayen mota nishan. */
.erp-grid tbody tr.row-active td {
    background: color-mix(in srgb, var(--primary, #3474d1) 10%, var(--panel, #fff));
}
.erp-grid tbody tr.row-active td:first-child {
    box-shadow: inset 3px 0 0 var(--primary, #3474d1);
}

/*  Skeleton par hover ka rang bemaani hai — chunne ko kuch hai hi nahi. */
.erp-grid tbody tr.skeleton-row:hover td { background: var(--panel, #fff); }


/* ------------------------------------------------ khali fehrist ka khana

   Pehle ye paighaam mez ke ANDAR ek <td colspan="99"> mein tha. Us ka
   matlab ye tha ke wo sar ke bilkul neeche chipak jata aur us ke neeche
   baqi poori bulandi khali reh jati — screenshot mein yehi nazar aaya.

   Ab wo mez se BAHAR hai, dabbe ka doosra flex bachcha. `flex: 1` usay
   saari bachi hui bulandi de deta hai aur `place-items: center` usay us ke
   beech mein bitha deta hai — bilkul us jagah jahan aankh dhoondti hai.
   Mez sirf sar dikhati hai, jo theek hai: column ke naam khali halat mein
   bhi batate hain ke ye fehrist kis cheez ki hai.                          */

.erp-grid-empty {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    min-height: 160px;
    padding: 24px 16px;
}

.erp-grid-empty .grid-empty { padding: 0; }


/* ------------------------------------------------------- chaurai ka bartao

   Grid poori chaurai leti hai aur columns apne maal ke hisab se banti hain
   (table-layout: auto). Do cheezein us ko bigarne se rokti hain:

     1. Ek lamba matn (misaal 200 harf ka pata) poore column ko kheench kar
        baqi sab ko nichor deta hai. Is liye saada matn wale khane par ek
        chhat, aur us se aage teen nuqte.

     2. `:not(:has(*))` — sirf WO khane jin ke andar koi element nahi, yani
        saada matn. Jin khanon mein apna dhancha hai (do satar wala user ka
        khana, badge ki qatar, action ke buttons) unhein chhera nahi jata:
        wahan nowrap lagana un ka apna layout tor deta.                      */

.erp-grid tbody td:not(:has(*)) {
    max-width: 340px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*  Action ka column hamesha tang aur daayen — chaurai badalti rahe to aankh
    har qatar par usay dobara dhoondti hai. */
.erp-grid .col-act { width: 1%; white-space: nowrap; }

/*  File ki patti bhi panel ka seedha bachcha hai — usay simatna nahi. */
.erp-screen-fill > .erp-panel > .erp-import-bar { flex: none; }


/* ------------------------------------------------------- neeche ki patti */

.erp-grid-foot {
    padding: 8px 14px;
    background: var(--panelSoft, rgba(0,0,0,.015));
    border-top: 1px solid var(--line, #dde4ea);
}
.erp-grid-foot .erp-range b { font-weight: 650; }

.erp-pagesize select { height: 24px; }


/* --------------------------------------------------------- chhoti screen

   Chaudi table ko nichorna nahi — khiskane dena. Nichorne par har khana
   parhne ke qabil nahi rehta, aur banda phir bhi horizontal scroll karta hai,
   bas ab wo do dafa karta hai.                                              */

@media (max-width: 900px) {
    .erp-grid { min-width: 820px; }
    .erp-grid-foot { flex-wrap: wrap; gap: 8px; }
    .erp-grid-foot .grow { flex-basis: 100%; height: 0; }
}


/* ==========================================================================
   BAHAR SE AAYI HUI FILE — usi grid ke andar
   ==========================================================================

   Do cheezein: patti jo batati hai ke ye maal kahan se aaya, aur wo button
   jo file chunta hai.

   Qatarein JAAN BOOJH KAR alag nahi dikhtin. Un par koi alag rang ya lakeer
   dalne ka matlab hota "ye grid nahi, koi aur cheez hai" — aur user ne saaf
   kaha tha ke file ka maal usi shakal mein dikhe jis shakal mein aam maal
   dikhta hai. Farq batane ka kaam patti ka hai, qatar ka nahi.              */

.erp-import-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    background: color-mix(in srgb, var(--primary, #3474d1) 7%, var(--panel, #fff));
    border-bottom: 1px solid color-mix(in srgb, var(--primary, #3474d1) 22%, transparent);
}

.erp-import-ico {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: var(--radius, 8px);
    color: #fff;
    background: var(--primary, #3474d1);
}
.erp-import-ico svg { width: 13px; height: 13px; }

.erp-import-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.erp-import-copy b { font-size: 12px; font-weight: 650; line-height: 1.2; }

.erp-import-copy span {
    font-size: 11px;
    line-height: 1.2;
    color: var(--muted, #6b7a89);

    /*  Naam lambe hote hain aur "ignored: …" us se bhi lamba. Ek satar par
        rakho — patti do satron ki ho jaye to grid ko utni jagah kam milti
        hai, aur ye patti grid ki khabar hai, khud grid nahi.               */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*  File chunne wala button.

    Andar asli <input type=file> hai — browser us ka apna "Choose file"
    wala khana dikhata hai, jo har browser par alag hai aur CSS se theek
    nahi hota. Usay nazar se hata dete hain; <label> ka click khud us tak
    pahunch jata hai, aur shakal baqi buttons jaisi rehti hai.

    display:none NAHI — us se kuch keyboard par button tak nahi pahunch
    pate. Nazar se ghayab, jagah par mojood.                                */

.erp-import-btn { position: relative; cursor: pointer; overflow: hidden; }

.erp-import-btn input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.erp-import-btn input[type="file"]:disabled { cursor: progress; }

@media (max-width: 700px) {
    .erp-import-copy span { white-space: normal; }
}


/* ==========================================================================
   GINTI KE CARD AB BUTTON HAIN
   ==========================================================================

   Ginti dekh kar agla sawal hamesha ek hi hota hai: "wo do locked account
   kaun se hain?" Pehle us ka koi jawab nahi tha — banda search mein "locked"
   likhta (kuch na milta), ya safhe palat kar badge dhoondta.

   Ab card khud jawab hai. <div> se <button> ho gaya, is liye teen cheezein
   khud ba khud aa gayin: keyboard, focus ring, aur screen reader ko khabar.
   Aur teen cheezein wapas lagani parin, kyunke browser button ko apni shakal
   deta hai: text-align, font, aur cursor.                                   */

.stat-tile {
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.stat-tile:focus-visible {
    outline: 2px solid var(--primary, #3474d1);
    outline-offset: 2px;
}

/*  Jo card laga hua hai. Halka bhara hua, motay kinare, aur baayen ki patti
    poori chaurai par — taake ek nazar mein pata chale ke list kis wajah se
    chhoti hai. Ye wo sawal hai jo warna der tak nahi soojhta: "list adhoori
    kyun hai?"                                                              */
.stat-tile.picked {
    border-color: color-mix(in srgb, var(--primary, #3474d1) 55%, var(--line, #dde4ea));
    background: color-mix(in srgb, var(--primary, #3474d1) 6%, var(--panel, #fff));
    box-shadow: 0 2px 10px rgba(16, 32, 48, .07);
}
.stat-tile.picked::before { width: 5px; opacity: 1; }

/*  "Total accounts" laga hua ho to wo filter nahi, filter ka NA HONA hai —
    us par bhara hua rang shor hai. Sirf patti moti.

    Class se, :first-child se nahi: tarteeb badalne par positional qaida chup
    chaap galat tile par lagne lagta hai, aur wo ghalti nazar bhi nahi aati. */
.stat-tile.picked.stat-all {
    background: var(--panel, #fff);
    box-shadow: none;
}


/* ==========================================================================
   MATCH KA PANEL DOOSRE KHANON KE BUTTON KE NEECHE CHALA JATA THA
   ==========================================================================

   Screenshot mein panel to theek jagah khula, magar us ke oopar neeche wale
   khane ke chevron aur funnel chhap rahe the.

   Wajah z-index ka number nahi tha — STACKING CONTEXT tha. Har .aj-box apna
   context banata hai; panel us ke andar hai, is liye us ka 1205 sirf USI
   context ke andar chalta hai. Bahar wo apne .aj-box ke barabar khara hota
   hai, aur do barabar cheezon mein jo DOM mein BAAD mein aaye wo jeet jati
   hai — yani neeche wala khana.

   Hal: jis khane ka panel khula hai, us poore khane ko oopar utha do.
   :has() se ye khud ba khud lagta hai — kisi component ko class lagane ki
   zaroorat nahi, aur band hote hi khud utar bhi jata hai.                   */

.aj-field:has(> .aj-box .search-filter-popover),
.aj-dropdown:has(> .aj-box .search-filter-popover),
.aj-select:has(> .aj-box .search-filter-popover),
.aj-searchable-select:has(> .aj-box .search-filter-popover),
.erp-toolbar-search:has(.search-filter-popover) {
    position: relative;
    z-index: 1210;
}


/* ==========================================================================
   MENU WALE BUTTON PAR EK CHEVRON
   ==========================================================================

   Filters ek switch hai — dabao, filter ki qatar aa jati hai. Columns aur
   Export menu kholte hain. Dekhne mein teenon ek jaise the, is liye banda
   ko pata hi nahi chalta tha ke Export ke andar saat raaste hain; wo usay
   ek button samajh kar dabata aur menu se hairan hota.

   Chevron wo ek nishan hai jo har jagah yehi kehta hai: "yahan aur kuch
   hai". Khulne par palat jata hai.                                         */

.erp-colmenu-wrap > .aj-button::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 1px;
    flex: none;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .55;
    transition: transform .14s ease, opacity .14s ease;
}
.erp-colmenu-wrap > .aj-button:hover::after { opacity: .9; }

/*  Menu khula ho to chevron oopar. :has() se — component ko batane ki
    zaroorat nahi ke wo khula hai.                                          */
.erp-colmenu-wrap:has(> .erp-colmenu) > .aj-button::after,
.erp-colmenu-wrap:has(> .aj-menu-flyout) > .aj-button::after {
    transform: translateY(2px) rotate(-135deg);
    opacity: .9;
}


/* ==========================================================================
   DROPDOWN KI FEHRIST PAR BHI WOHI TEER
   ==========================================================================

   Match ke panel par teer hai aur wo batata hai ke ye cheez KIS khane se
   nikli. Dropdown ki fehrist par wo nahi tha, is liye chaudi screen par —
   jahan do dropdown ek doosre ke qareeb hon — fehrist dekh kar ye tay karna
   parta tha ke wo kis ki hai.

   Wohi teer, wohi naap. Jagah portal.js se aati hai (--aj-arrow), is liye
   fehrist kinare se khisak bhi jaye to teer apne khane par rehta hai.      */

/*  overflow: visible pehle se lagi hui hai (oopar, match ke popover ke liye) —
    teer usi ki wajah se bahar nikal pata hai.                               */
.aj-menu-flyout.aj-flyout-fixed::before {
    content: "";
    position: absolute;
    top: -6px;
    right: var(--aj-arrow, 16px);
    width: 10px;
    height: 10px;
    background: var(--surface, #fff);
    border-left: 1px solid color-mix(in srgb, var(--primary, #3474d1) 18%, var(--line, #dde4ea));
    border-top: 1px solid color-mix(in srgb, var(--primary, #3474d1) 18%, var(--line, #dde4ea));
    transform: rotate(45deg);
    pointer-events: none;
}

.aj-menu-flyout.aj-flyout-fixed.aj-flyout-up::before {
    top: auto;
    bottom: -6px;
    border-left: 0;
    border-top: 0;
    border-right: 1px solid color-mix(in srgb, var(--primary, #3474d1) 18%, var(--line, #dde4ea));
    border-bottom: 1px solid color-mix(in srgb, var(--primary, #3474d1) 18%, var(--line, #dde4ea));
}


/*  Policy ka bayan — Security tab par din aur waqt ke neeche.

    Teen alag khane mil kar ek qaida banate hain, aur wo qaida kisi ek khane
    mein nazar nahi aata tha. Ye satar wohi jumla dikhati hai jo server inkar
    karte waqt user ko bhejta hai — yani admin yahin parh leta hai ke aage
    kisi ke saamne kya aayega.                                                */
.policy-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 7px 10px;
    font-size: 11.5px;
    color: var(--muted, #667b88);
    background: var(--panelSoft, rgba(0,0,0,.02));
    border: 1px dashed var(--line, #dde4ea);
    border-radius: var(--radius, 5px);
}
.policy-preview .aj-icon svg { width: 13px; height: 13px; }


/*  Sidebar mein qism ka sar — Masters / Transactions / Reports.

    Menu teen level ka ho gaya, aur qism ne apna poora level chhor diya. Ab wo
    sirf ek chhoti si satar hai jo lambi fehrist ko teen saaf hisson mein baant
    deti hai.

    Ye link NAHI hai aur dikhna bhi nahi chahiye: chhota, halka, bare huroof
    ke saath. Jis din ye link jaisa lagne lage, banda us par click karega aur
    kuch nahi hoga.                                                          */
.nav-kind {
    padding: 9px 10px 3px 34px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted, #667b88);
    opacity: .65;
    pointer-events: none;
    user-select: none;
}

/*  Pehle sar ke oopar itni jagah nahi chahiye — group ka naam bilkul us ke
    oopar hai.                                                               */
.nav-children > .nav-kind:first-child { padding-top: 3px; }


/* ==========================================================================
   COMMAND PALETTE — Ctrl+K
   ==========================================================================

   2,070 screens par darakht ka koi bhi shakal maza nahi deti. Ye us ka doosra
   raasta hai: likho aur khul jaye — bina ye yaad rakhe ke wo cheez kis folder
   mein rakhi gayi thi.

   Safhe ke OOPAR tairti hai, beech mein nahi: aankh oopar wale teesre hisse
   mein hoti hai, aur bilkul beech mein rakhna usay neeche kheenchta hai.     */

/*  `.cmdk-overlay` HATA DIYA GAYA.

    Ye wo dhundhla parda tha jis par dono panel safhe ke beech mein khulte the.
    Ab dono apne button ke neeche popover hain, is liye us ka koi istemal nahi
    raha — aur mari hui CSS rakhna sirf agle parhne wale ka waqt khata hai
    ("ye kis cheez par lagta hai?"). Chhoti screen wala us ka padding bhi saath
    gaya.

    Us ki jagah `.header-scrim` hai — shafaf, sirf bahar ka click pakarne ke
    liye — wohi jo selector par pehle se lagta hai.                          */

.cmdk {
    width: 100%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    max-height: 62vh;
    background: var(--panel, #fff);
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 2px);
    box-shadow: 0 24px 60px rgba(16, 32, 48, .28);
    overflow: hidden;
}


/* ==========================================================================
   DONO PANEL AB APNE BUTTON KE NEECHE HAIN — BEECH MEIN NAHI
   ==========================================================================

   Pehle dono safhe ke beech mein, dhundhle overlay ke oopar khulte the — yani
   ek DIALOG ki tarah. Wo galat qism thi. Dialog ek sawal hota hai jise band
   kiye baghair aage nahi barha ja sakta; ye dono ek FEHRIST hain, aur fehrist
   apne button ke saath rehni chahiye.

   Us ka nateeja rozana mehsoos hota tha: button header ke bilkul baayen
   kinare par hai aur panel safhe ke beech mein — aankh ko har dafa wo safar
   dobara karna parta tha, aur ye batane wala kuch nahi tha ke ye cheez nikli
   kahan se.

   Ab dono `.launcher-pop-blazor` / `.search-pop-blazor` par hain — TEMPLATE
   KE APNE do class, jo shuru se isi maqsad ke liye likhe hue the:

       position: absolute; left: 0; top: calc(100% + 8px); z-index: 245
       teer (::before) left: 18px par
       chhoti screen par khud fixed ho kar poori chaurai le lete hain

   Yani yahan naya kuch nahi likhna para — sirf wo class lagani thi, aur us se
   pehle wo cheez hatani thi jo unhein kaam karne se rok rahi thi (topbar ki
   backdrop-filter).                                                          */

/*  Overlay ab sirf tab bharta hai jab panel WAQAI safhe ke beech mein ho.
    Launcher aur search us mein se nikal chuke hain, is liye un ka scrim
    `.header-scrim` hai — shafaf, sirf bahar ka click pakarne ke liye. Un par
    dhundhla parda dalna ab ghalat hota: parda ye kehta hai "peechhe wali har
    cheez rok do", aur ye panel kuch rokte nahi.                             */

.launcher-pop-blazor,
.search-pop-blazor {
    /*  Rang saaf likha hai. Panel ab header ke ANDAR hai aur header ka matn
        kai themes mein safed hota hai — wo rang wirse mein utar kar input aur
        tile ke unwan ko safed-par-safed kar deta. Ye Phase 20 mein naapa gaya
        tha; us waqt hal ye tha ke panel bahar bhej diya jaye, ab hal ye hai
        ke rang apna hai, wirse ka nahi.                                     */
    color: var(--text, #16202a);
    box-shadow: 0 18px 44px rgba(16, 32, 48, .18);
}

/*  Teer ka rang bhi apna — background aur border dono, warna wo header ke
    gradient par ek adhoora sa tukra lagta hai.                              */
.launcher-pop-blazor::before,
.search-pop-blazor::before {
    background: var(--panel, #fff);
    border-left-color: var(--line, #dde4ea);
    border-top-color: var(--line, #dde4ea);
    z-index: 1;
}

/*  Panel par `overflow: hidden` hai (gol kinaron ke liye) aur teer us se
    BAHAR baithta hai — is liye wo panel ka bachcha hote hue bhi kat jata.
    Us ke liye kinare panel ke bajaye us ke andar wale sar par gol kiye jate
    hain aur teer ko upar rehne diya jata hai.                               */
.launcher-pop-blazor,
.search-pop-blazor { overflow: visible; }

.launcher-pop-blazor > .cmdk-head,
.search-pop-blazor > .cmdk-head {
    border-radius: calc(var(--radius, 5) * 2px) calc(var(--radius, 5) * 2px) 0 0;
    background: var(--panel, #fff);
    position: relative;
    z-index: 2;
}

.launcher-pop-blazor > .cmdk-foot,
.search-pop-blazor > .cmdk-foot {
    border-radius: 0 0 calc(var(--radius, 5) * 2px) calc(var(--radius, 5) * 2px);
}

/*  Fehrist ab khud scroll karti hai — pehle ye kaam panel ke `overflow:
    hidden` ke saath hota tha.                                               */
.launcher-pop-blazor > .cmdk-list,
.search-pop-blazor > .cmdk-list { overflow: auto; }

/*  ---------------------------------------------------------------------------
    CHHOTI SCREEN KI HADD — 1050 SE 900 PAR

    Template in dono panel ko 1050px se neeche poori chaurai wala fixed dabba
    bana deta hai (teer bhi hata deta hai). Wo hadd bahut oonchi hai: 1024 ka
    laptop us mein aa jata hai, jabke wahan 640px ka panel aaram se anchored
    khul sakta hai — naapa gaya, 123px bach bhi jate hain.

    Magar hadd ko selector wali 780 tak le jana bhi galat nikla, aur ye bhi
    naap kar hi pata chala: 781–900 ke darmiyan sidebar (252px) khuli hoti hai
    aur panel button ke baayen kinare se shuru hota hai — search wala panel
    wahan gyarah pixel bahar nikal jata tha. Wo band ab poora sheet wale
    bartao mein hai.

    900 ittefaqan nahi chuni: yehi wo sab se chhoti chaurai hai jahan DONO
    panel poore andar aate hain (launcher 608 + 31px bacha, search 560 + 37px).

    `top` bhi ab header ki asli oonchai se aata hai (48 + 8), template ke jama
    hue 58 se nahi — us se 10px ka faasla banta tha jabke selector 8px par
    khulta hai.
    --------------------------------------------------------------------------- */
/*  ---------------------------------------------------------------------------
    `display: flex` WAPAS — AUR YE SIRF SAJAWAT NAHI, SCROLL ISI PAR KHARA HAI

    Template ki apni line hai:

        .launcher-pop-blazor, .search-pop-blazor { display: block !important; … }

    Us waqt ye panel flex nahi the, is liye wahan `block` bemaani tha. Ab hain:
    `.cmdk` ek flex column hai (sar · search · fehrist · footer) aur poora
    scroll usi par khara hai — fehrist `flex: 1 1 auto; min-height: 0` hai, yani
    "jo bache wo lo, aur zaroorat par apne maal se chhoti bhi ho jao".

    `display: block` us poore hisab ko mita deta hai: fehrist flex item rehti
    hi nahi, `flex` aur `min-height` be-asar ho jate hain, aur wo apni poori
    lambai le leti hai. Naapa gaya (248 work areas, asli ginti): panel 760px ka,
    fehrist **8,216px** — yani 7,620px panel se BAHAR, safhe par latki hui, aur
    scroll kahin nahi. Screenshot mein yehi nazar aa raha tha.

    Ye us qism ki ghalti hai jo chhote data par chhupi rehti hai: mere pehle
    harness mein nau tiles thin aur panel un se chhota hota hi nahi tha, is liye
    sab theek dikha. **Jo cheez hadd par tootti ho, usay asli ginti par naapna
    parta hai.**
    --------------------------------------------------------------------------- */
@media (min-width: 901px) {
    .launcher-pop-blazor,
    .search-pop-blazor {
        display: flex !important;
        flex-direction: column;
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        top: calc(100% + 8px) !important;
    }

    .launcher-pop-blazor { width: min(640px, calc(100vw - 20px)) !important; }
    .search-pop-blazor { width: min(560px, calc(100vw - 20px)) !important; }

    /*  Panel button ke BAAYEN kinare se shuru hota hai, safhe ke nahi — is
        liye `100vw - 20px` kaafi nahi tha. 820px ki khirki par 640px ka panel
        daayen taraf se bahar nikal jata tha (naapa gaya).

        Jo jagah waqai maujood hai wo hai: khirki se sidebar nikal do, phir
        header ki padding aur kinare ki saans. `--nav-w` wohi variable hai jo
        sidebar ki chaurai chalata hai, is liye ye hisab sidebar simatne par
        khud durust ho jata hai.

        Selector mein DO class hain, aur ye zaroori hai: `.launcher-panel` par
        pehle se `max-width: 780px` likha hua hai aur wo is file mein NEECHE
        aata hai. Barabar specificity par baad wala jeetta hai, is liye ek
        class se likhne par ye clamp lagta hi nahi tha — browser se poochh kar
        pakra gaya (computed max-width 780px aa raha tha).                   */
    .cmdk.launcher-pop-blazor,
    .cmdk.search-pop-blazor { max-width: calc(100vw - var(--nav-w, 0px) - 40px); }

    .launcher-pop-blazor::before,
    .search-pop-blazor::before { display: block; }
}

@media (max-width: 900px) {
    .launcher-pop-blazor,
    .search-pop-blazor {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none;
        top: calc(var(--header, 48px) + 8px) !important;
    }

    .launcher-pop-blazor::before,
    .search-pop-blazor::before { display: none; }
}

/* ------------------------------------------------------------- likhne ka khana */

.cmdk-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line, #dde4ea);
    flex: none;
}
/*  `>` — SEEDHA bachcha, koi bhi nahi.

    Pehle ye `.cmdk-box .aj-icon svg` tha, yani descendant. Us ke ghere mein
    aakhir par baitha FUNNEL bhi aa gaya (wo bhi `.aj-icon` hi hai), aur us par
    `opacity: .5` lag gayi — screenshot mein wo itna halka tha ke user ne kaha
    "filter icon show hi nahi ho raha".

    Ye ghalti descendant selector ki hai, rang ki nahi: ek shared class ke
    andar ka qaida us har cheez par lag jata hai jo kal koi aur wahan rakh
    de. Leading icon ek hi hai aur wo seedha bachcha hai — wohi likha jaye.  */
.cmdk-box > .aj-icon svg { width: 16px; height: 16px; opacity: .5; }

.cmdk-box input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 14.5px;
    color: inherit;
}

/* ------------------------------------------------------------------ fehrist */

.cmdk-list { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px; }

/*  YAHAN PEHLE .cmdk-head thi — "Recent" wali chhoti uppercase patti.

    Jab palette ko reference wali shakal di gayi to us ke SAR ko bhi .cmdk-head
    kaha gaya, aur ye purana qaida yahin para reh gaya. Nateeja: panel ka poora
    sar uppercase aur letter-spaced ho gaya ("APP LAUNCHER", "SEARCH AND OPEN
    ERP WORK AREAS") — jo dekhne mein "background theek se nahi aa raha" lagta
    tha.

    Patti ab .cmdk-section hai (neeche). Ek hi class ka naam do maqsad ke liye
    istemal karna is poori file ka sab se mehnga phanda hai: purana qaida
    khamoshi se nayi cheez par lag jata hai.                                 */

.cmdk-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 26px 14px;
    justify-content: center;
    font-size: 12.5px;
    color: var(--muted, #667b88);
}

.cmdk-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius, 5px);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/*  Ek hi nishan — keyboard ka teer aur mouse ka hover dono isi par aate hain.
    Do alag nishan rakhne se dono ek saath dikhte hain aur banda soch mein par
    jata hai ke Enter kis par lagega.                                         */
.cmdk-row.on { background: var(--primarySoft, rgba(52,116,209,.12)); }

.cmdk-ico {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    flex: none;
    border-radius: 7px;
    background: var(--panelSoft, rgba(0,0,0,.04));
    color: var(--muted, #667b88);
}
.cmdk-ico svg { width: 13px; height: 13px; }
.cmdk-row.on .cmdk-ico { background: var(--panel, #fff); color: var(--primary, #3474d1); }

.cmdk-copy { display: grid; min-width: 0; line-height: 1.3; }
.cmdk-copy b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-copy small { font-size: 10.5px; opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cmdk-tag {
    margin-left: auto;
    flex: none;
    padding: 2px 7px;
    font-size: 9.5px;
    font-weight: 600;
    border-radius: 20px;
    color: var(--muted, #667b88);
    background: var(--panelSoft, rgba(0,0,0,.04));
}

/* --------------------------------------------------------- neeche ki patti */

.cmdk-foot {
    display: flex;
    gap: 14px;
    padding: 7px 14px;
    flex: none;
    font-size: 10.5px;
    color: var(--muted, #667b88);
    background: var(--panelSoft, rgba(0,0,0,.02));
    border-top: 1px solid var(--line, #dde4ea);
}
.cmdk-foot span { display: flex; align-items: center; gap: 4px; }

.cmdk kbd {
    padding: 1px 5px;
    font: inherit;
    font-size: 9.5px;
    line-height: 1.5;
    border: 1px solid var(--line, #dde4ea);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--panel, #fff);
}

@media (max-width: 620px) {
    .cmdk { max-height: 78vh; }
    .cmdk-foot { display: none; }
}


/* ============================================================================
   HEADER — launcher, selector, aur search ka funnel
   ============================================================================ */

/*  ---------------------------------------------------------------------------
    TOPBAR SE BACKDROP-FILTER HATA DIYA GAYA — TEESRI DAFA WOHI CHEEZ

    Template mein likha hai:

        .topbar { background: rgba(255,255,255,.96); backdrop-filter: blur(18px) }

    Background 96% bhara hua hai — yani us ke peechhe se guzarne wale safhe ka
    sirf 4% nazar aata hai, aur usay dhundhla karne ka asar aankh ko pahunchta
    hi nahi. Aur jin themes ne background ko `!important` ke saath opaque
    gradient bana diya hai, wahan wo 4% bhi nahi bachta.

    Magar `backdrop-filter` (transform ki tarah) apne andar ke HAR
    `position: fixed` element ke liye naya containing block bana deta hai. Us
    ek line ne header ke andar teen cheezein toor rakhi thin:

      1. App Launcher aur Global Search ka overlay — `inset: 0` poori khirki
         nahi, header ki patti naapta tha (1188×124 bajaye 1440×900). Isi
         wajah se Phase 20 mein dono panel header se nikal kar MainLayout mein
         bheje gaye the.
      2. `.header-scrim` — company/branch/year ke selector ka wo scrim jo
         "bahar click karo, band ho jaye" ka kaam karta hai. Wo bhi sirf header
         jitna bara banta tha, is liye safhe par kahin bhi click karne se
         selector band NAHI hota tha. Ye bug kisi ne report nahi kiya, magar
         maujood tha.
      3. Header ka safed matn panel ke andar wirse mein utar jata tha.

    Ye bilkul wohi cheez hai jo Phase 11 mein `.erp-grid thead th` par
    `saturate(1.2)` ki shakal mein mili thi — ek be-asar sajawat jis ne do
    parat neeche asli cheez toor di.

    Doosri dafa us ka HAL sochne ke bajaye us ke gird raasta banaya gaya tha
    (panel header se bahar bhej diye). Teesri dafa wo raasta khud aara aa gaya:
    user ko panel button ke NEECHE, teer ke saath chahiye — yani wahin, header
    ke andar. Is dafa sabab hi hata diya.

    Background saath mein opaque kiya ja raha hai. Ye `!important` nahi hai, is
    liye sirf wahan lagta hai jahan template ki apni translucent base qeemat
    jeet rahi thi; jin themes ka apna opaque gradient hai, unhein chhuta bhi
    nahi. Bina is ke wo 4% ab bina blur ke nazar aata.
    --------------------------------------------------------------------------- */
.topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: var(--surface, #fff);
}

/*  ---------------------------------------------------------------------------
    SIDEBAR KE USER PAR TEER

    Menu ki har qatar jis ke andar kuch hai, us par chevron hai. User ki qatar
    bilkul waisi hi dikhti thi magar us par koi nishan nahi tha — yani ye
    batane wala kuch nahi tha ke apna naam dabane se panel khulta hai. Profile
    aur Sign out usi ke andar hain.

    Rukh DAAYEN hai, neeche nahi, kyunke panel sidebar ke daayen taraf aata
    hai (`.account-pop-blazor { left: calc(100% + 9px) }`) — teer wahin ishara
    karta hai jahan cheez waqai nikalti hai.

    Simte hue sidebar par teer chala jata hai: wahan sirf avatar bachta hai
    (`.user-copy { opacity: 0 }`) aur 58px ki patti mein teer ke liye jagah hai
    hi nahi.
    --------------------------------------------------------------------------- */
.user-chevron {
    flex: none;
    display: grid;
    place-items: center;
    margin-left: auto;
    color: var(--muted, #67798a);
    opacity: .65;
    transition: transform .14s ease, opacity .14s ease;
}

.user-chevron svg { width: 14px; height: 14px; }

.user-btn:hover .user-chevron { opacity: 1; }

/*  Panel khula ho to teer bhi khula hua lage. `aria-expanded` component se
    pehle se aata hai, is liye class lagane ki zaroorat nahi.               */
.user-btn[aria-expanded="true"] .user-chevron {
    opacity: 1;
    color: var(--primary, #3474d1);
    transform: translateX(2px);
}

body:not(.nav-open) .user-chevron { display: none; }


/* ------------------------------------------------------------- selector

   Locked selector: ek hi option, is liye ye <span> hai, <button> nahi.

   Us par class DONO lagti hain — "context context-locked" — aur yahan sirf wo
   likha hai jo ALAG hai. Naap, padding, icon ka dabba, matn ke size: sab
   .context se aata hai.

   Ye baat naap kar hi pakri gayi: pehle yahan height: 32px likh diya tha
   (template ki .context wali pehli qeemat dekh kar). Magar template usay teen
   dafa aur badalta hai aur aakhri qeemat 36px hai — nateeja ye ke locked
   selector baqi teen se 4px chhota tha aur poori qatar tirhi lagti thi.

   Sabaq wohi jo is file mein pehle bhi teen dafa likha ja chuka hai: jeetne
   wala qaida BROWSER SE POOCHHA jata hai, pehli grep se nahi.

   Aur nazar se ye batana zaroori hai ke isay dabaya nahi ja sakta — is liye
   na hover, na chevron, na pointer.                                          */

.context-locked {
    cursor: default;
    border-color: transparent;
    background: transparent;
}

.context-locked:hover { background: transparent; border-color: transparent; }

/*  Icon ka dabba locked halat mein neutral rang mein — chalne wale selector
    ka icon primary rang mein hai, aur wohi farq batata hai ke kaun sa dabaya
    ja sakta hai.                                                             */
.context-locked .ico { background: var(--surface2, #f3f6f8); color: var(--muted, #67798a); }

/*  Popover ke andar search ki qatar — funnel us ke aakhir mein, bilkul waise
    hi jaise poore portal ke har searchable khane par hai.                   */
/*  Bilkul wohi qatar jo App Launcher ke sar ke neeche hai — `.cmdk-box`.

    Pehle ye ek chhota bordered pill tha jo popover ke andar 6px margin ke
    saath tairta tha. Do shaklein banane ki koi wajah nahi thi: dono ek hi
    kaam karte hain (likho aur fehrist chhan jaye) aur dono header se hi
    khulte hain — ek hi patti par do alag search ke khane sirf ye sikhate
    hain ke "har jagah dobara dekhna parega".

    Ab shakal ek hai: poori chaurai, koi border nahi, neeche ek lakeer jo
    khane ko fehrist se juda karti hai, aur wohi 16px ka halka icon. Naya
    kuch nahi likha — naap `.cmdk-box` se hoobahu li gayi hai, taake kal wo
    badle to dono saath badlein.                                             */
.context-pop-search {
    display: flex;
    align-items: center;
    gap: 10px;

    /*  Neeche har wo cheez SAAF likhi hai jo template apne qaide mein deta
        hai — chahe us ki qeemat "kuch nahi" ho:

            .context-pop-search { height:36px; margin:7px; border:1px solid …;
                                  border-radius:5px; background:var(--surface2);
                                  gap:7px; padding:0 9px }

        Pehli koshish mein maine sirf wo cheezein likhi thin jo `.cmdk-box`
        mein likhi hain (padding, gap, border-bottom). Nateeja: padding mera
        chala, magar height, margin, border aur background template ke reh
        gaye — qatar 36px ki, 7px andar dhansi hui, chaaron taraf border, aur
        apna bhoora background. Shakal do ki do rahi.

        > Kisi doosri shakal ki NAQAL karte waqt sirf wo cheezein likhna kaafi
        > nahi jo ASAL mein likhi hain — wo bhi likhni parti hain jo yahan
        > pehle se kisi aur ne likh rakhi hain.

        Dono dafa ye browser se computed qeemat poochh kar hi pakra gaya, CSS
        parh kar nahi.                                                        */
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;

    padding: 12px 14px;
    border-bottom: 1px solid var(--line, #dde4ea);
    flex: none;
}

/*  Template focus par poore dabbe ko roshan karta hai (border + halqa). Ab
    dabba hai hi nahi — ek lakeer hai — is liye focus ka nishan bhi wohi
    hona chahiye jo `.cmdk-box` par hai: kuch nahi. Cursor khud batata hai
    ke likha kahan ja raha hai.                                              */
.context-pop-search:focus-within { border-color: var(--line, #dde4ea); box-shadow: none; }

.context-pop-search > .aj-icon { color: var(--muted, #67798a); flex: none; }
.context-pop-search > .aj-icon svg { width: 16px; height: 16px; opacity: .5; }

.context-pop-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text, #16202a);
    font: inherit;
    font-size: 14.5px;
}

.context-pop-match { display: inline-flex; align-items: center; flex: none; }

.context-empty {
    padding: 14px 10px;
    text-align: center;
    font-size: 11.5px;
    color: var(--muted, #67798a);
}

/*  Fehrist ek <form> hai aur har qatar us ka submit button. Form ko layout se
    bahar rakhna zaroori hai — warna wo ek aur block ban kar padding daal deta
    hai aur qatarein andar khisak jati hain.                                  */
.context-results > form { display: contents; }


/* -------------------------------------------------------------- launcher

   Launcher ab header ke neeche latakta hua popover NAHI hai — wo safhe ke
   oopar tairta hua panel hai, bilkul search ki tarah.

   Wajah naapi hui hai: popover ki chaurai host se bandhi hoti hai aur us mein
   340px se ziyada dena chhoti khirki par bahar nikal jata hai. Is ERP mein
   ek qism ke neeche 80 tak work areas hain — un ke liye 340px ka dabba ek
   fehrist nahi, ek naali hai.

   Dono panel ek hi bunyaad (.cmdk) par khare hain — ek hi overlay, ek hi
   sar, ek hi search ka khana. Do alag shakal rakhne ka matlab hota ke banda
   har dafa parh kar samajhta ke ye kaun sa panel hai.                       */

.launcher-panel { max-width: 780px; max-height: 76vh; }
.launcher-body { padding: 0 0 8px; }

/*  Chips — level 1 ki qism. Ek qatar mein, aur chhoti screen par khiskte
    hain, lipatte nahi: teen qatar ke chips panel ka aadha hissa kha jate. */
.launcher-chips {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--line, #dde4ea);
    flex: none;
}

.launcher-chips::-webkit-scrollbar { display: none; }

.launcher-chip {
    flex: none;
    height: 28px;
    padding: 0 13px;
    border: 1px solid var(--line, #dde4ea);
    border-radius: 20px;
    background: var(--surface, #fff);
    color: var(--text, #16202a);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.launcher-chip:hover { background: var(--surface2, #f3f6f8); }

.launcher-chip.on {
    background: var(--primarySoft, #eef4fb);
    border-color: color-mix(in srgb, var(--primary, #2f6fb2) 30%, var(--line, #dde4ea));
    color: var(--primary, #2f6fb2);
}

.launcher-section {
    padding: 12px 14px 6px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted, #67798a);
}

/*  Do column — reference wala shakal. Ek column par panel bahut lamba ho
    jata hai, teen par naam kat'ne lagte hain.

    Ginti media query se NAHI aati, auto-fill se. Wajah naapi hui hai: media
    query KHIRKI ki chaurai dekhti hai, jabke ye grid PANEL ke andar hai aur
    panel ki chaurai 780 par ruk jati hai. 700px ki khirki par khirki chhoti
    thi magar panel 668 ka tha — yani do column abhi bhi theek the, aur media
    query unhein ek kar deti.

    auto-fill wo cheez naapta hai jo waqai maani rakhti hai: is grid ke paas
    kitni jagah hai.                                                        */
.launcher-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 8px;
    padding: 0 14px;
}

.launcher-card {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 11px;
    min-height: 58px;
    padding: 9px 11px;
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 2px);
    background: var(--surface, #fff);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.launcher-card:hover {
    background: var(--primarySoft, #eef4fb);
    border-color: color-mix(in srgb, var(--primary, #2f6fb2) 26%, var(--line, #dde4ea));
}

.launcher-card .lc-ico {
    width: 34px;
    height: 34px;
    border-radius: calc(var(--radius, 5) * 2px);
    background: var(--primarySoft, #eef4fb);
    color: var(--primary, #2f6fb2);
    display: grid;
    place-items: center;
    flex: none;
}

.launcher-card .lc-ico svg { width: 16px; height: 16px; }

.launcher-card .lc-copy { min-width: 0; line-height: 1.3; }
.launcher-card .lc-copy b { display: block; font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.launcher-card .lc-copy small { display: block; font-size: 10.5px; color: var(--muted, #67798a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.launcher-card .lc-go { color: var(--muted, #67798a); opacity: .55; }
.launcher-card .lc-go svg { width: 14px; height: 14px; }

/*  Pin sirf hover par — har tile par hamesha dikhana grid ko shor bana deta
    hai, aur pin roz ka kaam nahi. Lagi hui pin hamesha nazar aati hai:
    us ka poora maqsad yehi batana hai.                                     */
.launcher-card .lc-pin {
    position: absolute;
    top: 4px;
    right: 26px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--muted, #67798a);
    opacity: 0;
    transition: opacity .12s ease;
}

.launcher-card:hover .lc-pin,
.launcher-card .lc-pin.on,
.launcher-card .lc-pin:focus-visible { opacity: 1; }

.launcher-card .lc-pin.on { color: var(--primary, #2f6fb2); transform: rotate(-32deg); }
.launcher-card .lc-pin:hover { background: var(--surface2, #f3f6f8); }
.launcher-card .lc-pin svg { width: 12px; height: 12px; }

.launcher-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 10px 14px 0;
    padding: 4px 9px 4px 5px;
    border: 1px solid var(--line, #dde4ea);
    border-radius: 20px;
    background: var(--surface, #fff);
    color: var(--muted, #67798a);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.launcher-back:hover { background: var(--surface2, #f3f6f8); color: var(--text, #16202a); }
.launcher-back svg { width: 13px; height: 13px; }

/* ------------------------------------------------------- apni tasveer */

/*  Sidebar aur account panel ka avatar — tasveer ho to tasveer, warna huroof.
    Naap wohi jo huroof wale avatar ka hai, warna tasveer lagte hi poori qatar
    hil jati.                                                                */
.user-avatar-img,
.account-avatar-img { object-fit: cover; }

.profile-photo-pane {
    position: relative;
    width: 128px;
    margin: 4px auto 0;
}

.profile-photo {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.profile-photo-empty {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--primary, #2f6fb2), color-mix(in srgb, var(--primary, #2f6fb2) 62%, var(--text, #16202a)));
    color: #fff;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: .02em;
}

/*  Camera ka gol button tasveer ke kone par — theek wahan jahan banda dabane
    ki koshish karta hai. Ye <label> hai: file ka input isi ke andar chhupa
    hua hai, is liye click seedha file chooser kholta hai aur beech mein koi
    JS nahi.                                                                 */
.profile-photo-pick {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--surface, #fff);
    background: var(--surface, #fff);
    box-shadow: var(--shadow, 0 6px 18px rgba(16, 32, 48, .16));
    color: var(--primary, #2f6fb2);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.profile-photo-pick:hover { background: var(--primarySoft, #eef4fb); }
.profile-photo-pick svg { width: 16px; height: 16px; }

.profile-photo-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 10px 0 14px;
}

.profile-photo-actions small { font-size: 10px; color: var(--muted, #67798a); }
.profile-dialog .form-section { margin-top: 0; }


/* --------------------------------------------------------- chhoti screen

   TEMPLATE 1050px SE NEECHE POORI .contexts CHHUPA DETA HAI — do jagah, aur
   ek jagah !important ke saath:

       @media(max-width:1050px){ .contexts{display:none} }
       @media(...)            { .contexts{display:none !important} }

   Us waqt ye sirf parhne wali chip thi, is liye chhupana theek tha. Ab ye
   chaar asli selector hain: 1024 ke laptop par inhein chhupane ka matlab hai
   ke banda company hi nahi badal sakta — yani poore feature ka wahid darwaza
   band.

   Is liye chhupane ke bajaye SIKORTE hain, do qadam mein:

       1050 se neeche   niche wali chhoti satar (label) chali jati hai,
                        naam 90px par kat jata hai
        820 se neeche   sirf icon bachta hai; poori baat title mein hai

   Icon ka rehna zaroori hai — wo hi wo jagah hai jise banda dabata hai.     */

.contexts { display: flex !important; }

@media (max-width: 1050px) {
    .context .context-copy small,
    .context-locked .context-copy small { display: none; }

    .context .context-copy b,
    .context-locked .context-copy b {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 820px) {
    .context .context-copy,
    .context-locked .context-copy,
    .context .context-chevron { display: none; }

}


/* -------------------------------------------------------------- pin button

   Bhara hua pin = laga hua, khali = nahi laga. Ek hi button, do shakalein.
   Do alag buttons ("Pin" / "Unpin") rakhne par banda ko pehle parhna parta ke
   is waqt haalat kya hai — aur wo ek faltu qadam hai.

   Chalti hui halat mein rang primary ka hai aur pin thora jhuka hua — wohi
   ishara jo har jagah "laga hua hai" ke liye chalta hai.                    */

.erp-pin { padding-left: 7px; padding-right: 7px; }

.erp-pin.on {
    background: var(--primarySoft, #eef4fb);
    border-color: color-mix(in srgb, var(--primary, #2f6fb2) 32%, var(--line, #dde4ea));
    color: var(--primary, #2f6fb2);
}

.erp-pin.on .aj-icon svg { transform: rotate(-32deg); }


/* ============================================================================
   PANEL KA SAR — search aur launcher dono par ek hi
   ============================================================================

   Dono panel ek hi bunyaad (.cmdk) par khare hain. Sar mein icon, unwan, ek
   satar tafseel aur band karne ka nishan — bilkul wohi tarteeb jo screen ki
   patti aur popup ke sar par hai. Teesri shakal banane ka koi faida nahi tha. */

.cmdk-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--line, #dde4ea);
    background: var(--surface2, #f7f9fb);
    flex: none;
}

.cmdk-head-ico {
    width: 36px;
    height: 36px;
    border-radius: calc(var(--radius, 5) * 2px);
    background: var(--primarySoft, #eef4fb);
    color: var(--primary, #2f6fb2);
    display: grid;
    place-items: center;
    flex: none;
}

.cmdk-head-ico svg { width: 17px; height: 17px; }

.cmdk-head-copy { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.cmdk-head-copy b { display: block; font-size: 14px; font-weight: 700; }
.cmdk-head-copy small { display: block; font-size: 10.5px; color: var(--muted, #67798a); }

.cmdk-close {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: calc(var(--radius, 5) * 2px);
    background: transparent;
    color: var(--muted, #67798a);
    display: grid;
    place-items: center;
    flex: none;
    cursor: pointer;
}

.cmdk-close svg { width: 15px; height: 15px; }

/*  Funnel search ke khane ke ANDAR. Wo layout ka hissa hai, absolute nahi —
    yehi ghalti rail par pakri ja chuki hai: absolute cheez jagah nahi ghairti,
    is liye matn us ke neeche chala jata hai aur padding se jhoot bolna parta
    hai.                                                                     */
.cmdk-match { display: inline-flex; align-items: center; flex: none; }

.cmdk-kbd {
    flex: none;
    padding: 3px 8px;
    border: 1px solid var(--line, #dde4ea);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--surface2, #f3f6f8);
    color: var(--muted, #67798a);
    font: inherit;
    font-size: 10px;
    font-weight: 600;
}

.cmdk-section {
    padding: 10px 10px 4px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted, #67798a);
}

/*  Har qatar ke aakhir mein teer — ye batata hai ke dabane par kahin jayenge,
    kuch chunenge nahi. Reference design ka wohi ishara.                     */
.cmdk-go { margin-left: auto; flex: none; color: var(--muted, #67798a); opacity: .5; }
.cmdk-go svg { width: 14px; height: 14px; }
.cmdk-row.on .cmdk-go { opacity: 1; color: var(--primary, #2f6fb2); }


/* ------------------------------------------- locked selector ki wajah

   Sirf dropdown band kar dene se banda sochta reh jata hai ke feature toota
   hai ya us ke paas ijazat nahi. Jawab wahin hai jahan sawal paida hota hai. */

.context-pop-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 9px 12px 11px;
    border-top: 1px solid var(--line, #dde4ea);
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--muted, #67798a);
}

.context-pop-note .aj-icon { flex: none; opacity: .7; }
.context-pop-note svg { width: 13px; height: 13px; }

/*  Locked halat mein qatar dabti nahi — magar bujhi hui bhi nahi lagti.
    Wo maloomat de rahi hai, aur maloomat ka bujha hua hona bemaani hai.    */
.context-result:disabled { cursor: default; opacity: 1; }


/* ============================================================================
   NOTIFICATION DRAWER
   ============================================================================

   Shakal ki bunyaad template ki apni hai — .drawer, .drawer-head aur
   .notification-list-v52 wahan pehle se likhe hue hain. Yahan sirf wo cheezein
   hain jo un mein thin hi nahi: parhi hui satar ka farq, severity ka rang,
   aur khali halat.                                                          */

.notification-drawer .drawer-head { gap: 8px; padding: 0 8px 0 10px; }

/*  ---------------------------------------------------------------------------
    SAR BHI POORI CHAURAI LE — X DAAYEN KINARE PAR

    Screenshot mein X unwan se chipka hua tha aur us ke daayen taraf do sau
    pixel khali pare the, jabke neeche fehrist ka card poore drawer jitna
    chaura tha. Yani sar aur jism ka daayan kinara ek doosre se milta hi nahi
    tha — aur aankh usi lakeer ko dhoondti hai.

    Wajah `.drawer-head` mein thi: wo flex hai, aur us mein X ko daayen
    dhakelne wali wahid cheez "Mark all read" ka `margin-left: auto` tha.
    Jis waqt koi bina-parhi RAKHI HUI satar na ho — yani aksar, aur bilkul us
    soorat mein jo screenshot mein hai — wo button aata hi nahi, aur us ke
    jane ke saath X bhi beech mein reh jata hai.

    Ek layout jo kisi IKHTIYARI cheez ke maujood hone par hi theek dikhe, wo
    layout nahi, ittefaq hai. Ab khali jagah unwan khud ghairta hai; X ka
    daayen kinare par hona kisi doosre element ke hone par nahi thehra.
    --------------------------------------------------------------------------- */
.notification-drawer .drawer-title-wrap { flex: 1 1 auto; min-width: 0; }
.notification-drawer .drawer-x { flex: none; }

/*  ---------------------------------------------------------------------------
    DRAWER HEADER KE NEECHE SE SHURU HOTA HAI, SAR SE NAHI

    Template ka apna .drawer `top: 0` hai — poori khirki ke daayen kinare par.
    Us ka matlab ye tha ke header ka daayan sira drawer ke neeche chhup jata,
    GHANTI SAMET. Banda jis button se panel khola tha wohi gayab ho jata, aur
    band karne ka raasta dhoondna parta. Saath hi kinare par ek katti hui
    header ki patti nazar aati thi jo kisi cheez se bhi seedh mein nahi thi.

    Oonchai `--header` se aati hai (48px) — aur ye qeemat DOBARA naapi gayi
    hai, kyunke pehli baar ghalat thi.

    Pehle yahan `--topbar` (56px, app.css) likha tha. Wo isi harness ki di hui
    ghalti thi: maine `<body>` par `erp-legacy` laga rakhi thi, is liye
    `.erp-legacy .topbar { height: var(--topbar) }` chal jata aur header 56px
    naapa jata. Asal app mein wo lapet SIRF `@Body` ke gird hai (dekho
    MainLayout) — topbar us se BAHAR hai, aur us ki oonchai template ke apne
    `.topbar { height: var(--header) }` se aati hai: **48px, har chaurai par.**

    Yani jo faasla maine "0px" naap kar likha tha, asal mein desktop par 8px
    tha. Screenshot mein wo itna chhota tha ke nazar nahi aaya — aur yehi is
    qism ki ghalti ka sab se bura hissa hai.

    > Jo cheez browser se poochhi jaye us ka jawab utna hi sacha hota hai
    > jitna sawal. Harness ka dhancha asal safhe se HARF BA HARF milna chahiye,
    > warna wo apne aap ko tasdeeq karta rehta hai.

    Media query ki ab zaroorat nahi — 48px chaaron chaurai par ek hi hai.
    --------------------------------------------------------------------------- */
.notification-drawer { top: var(--header, 48px); }

/*  ---------------------------------------------------------------------------
    TEEN HISSE: HEAD · SEARCH · FEHRIST — AUR KOI JAMA HUA ADAD NAHI

    Pehle body ki oonchai `calc(100% - 48px)` thi, is khayal par ke head 48px
    ka hai. Browser se poochha to head 58px nikla (template use do jagah se
    barhata hai, doosri dafa !important ke saath). Yani body drawer se DAS
    PIXEL neeche nikal jati thi aur aakhri satar ka nichla sira kat jata —
    aur us tak scroll kar ke bhi nahi pahuncha ja sakta tha, kyunke wo kati
    hui jagah scroll ke ANDAR nahi, drawer ke BAHAR thi.

    Ab yahan koi adad nahi: head aur search apni zaroorat ke mutabiq jagah
    lete hain, fehrist jo bacha wo. Kal search ki qatar ki oonchai badle, ya
    unwan do satar ka ho jaye, to yahan kuch nahi badalna.

    `min-height: 0` isi silsile ka hissa hai: flex ka bachcha default par
    apne maal se chhota ho hi nahi sakta, aur us shart ke baghair
    `overflow: auto` kabhi chalta hi nahi — dabba phail jata hai bajaye
    scroll karne ke.
    --------------------------------------------------------------------------- */
.notification-drawer { display: flex; flex-direction: column; }

.notification-drawer .drawer-head,
.notification-drawer .ntf-search { flex: none; }

.notification-drawer .drawer-body {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: auto;
}

/*  ---------------------------------------------------------------------------
    GHANTI KE ANDAR SEARCH

    Bilkul wohi qatar jo har searchable khane par hai — icon, khana, aur
    aakhir mein funnel. Shakal .context-pop-search se li gayi hai, naya kuch
    nahi: ek hi kaam ki do alag shaklein banane se banda har jagah naye sire
    se seekhta hai.

    Qatar drawer-body ke BAHAR hai, andar nahi. Andar hoti to fehrist ke
    saath scroll ho kar oopar chali jati — aur jis lamhe banda scroll kar ke
    kuch dhoondh raha hota, theek usi lamhe dhoondne ka khana gayab hota.
    --------------------------------------------------------------------------- */
/*  Wohi qatar jo App Launcher, Global Search aur chaaron selector par hai —
    `.cmdk-box`. Poori chaurai, koi dabba nahi, neeche ek lakeer.

    Ye jagah pichhli dafa reh gayi thi: maine `.context-pop-search` ko badal
    diya aur ye bhool gaya, halanke shikayat "sab jagah ek jaisa karo" ki thi.
    Char search ke khane the, teen badle. **Jab tabdeeli "har jagah" ki ho, to
    us ki fehrist pehle likhni chahiye — warna char mein se ek hamesha bach
    jata hai, aur wohi wo hai jo screenshot mein aata hai.**                 */
.ntf-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line, #dde4ea);
    flex: none;
}

.ntf-search > .aj-icon { color: var(--muted, #67798a); flex: none; }
.ntf-search > .aj-icon svg { width: 16px; height: 16px; opacity: .5; }

.ntf-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text, #16202a);
    font: inherit;
    font-size: 14.5px;
}

.ntf-match { display: inline-flex; align-items: center; flex: none; }

/*  Funnel ka popover .aj-match-wrap se bandha hua hai (position: relative) aur
    us ka `right: 8px` drawer ke andar bhi theek baithta hai — 236px chaurai
    404px ke sab se tang drawer mein bhi poori aa jati hai. Bas z-index ko
    drawer se oopar rakhna zaroori hai, warna wo fehrist ke NEECHE khulta.   */
.notification-drawer .search-filter-popover { z-index: 665; }

/*  Chhanne ne sab hata diya — ye "kuch hai hi nahi" wali khali halat se alag
    cheez hai, aur us ka icon bhi alag hona chahiye. Green tick sirf achhi
    khabar ke liye hai; "nothing matches" achhi khabar nahi, sirf ek natija
    hai.                                                                     */
.ntf-empty-search .aj-icon { color: var(--muted, #67798a); }

.ntf-readall {
    margin-left: auto;
    flex: none;
    font-size: 10.5px;
    white-space: nowrap;
}

/*  Ek satar dabne ke QABIL tabhi lagti hai jab us ka koi raasta ho. Jis khabar
    ka koi safha nahi, us par pointer dikhana jhoot hai — banda dabata hai aur
    kuch nahi hota.                                                          */
.notification-list-v52 article.has-link { cursor: pointer; }

.notification-list-v52 article.has-link:hover {
    background: var(--primarySoft, #eef4fb);
    border-color: color-mix(in srgb, var(--primary, #2f6fb2) 26%, var(--line, #dde4ea));
}

/*  Parhi hui satar GAYAB nahi hoti — sirf peechhe hat jati hai. Mita dena
    banda se us ka apna record cheen lena hai; halka kar dena farq bhi rakhta
    hai aur nayi cheez ko aage bhi laata hai.                                */
.notification-list-v52 article.read { opacity: .62; }
.notification-list-v52 article.read .ni { background: var(--surface2, #f3f6f8); color: var(--muted, #67798a); }

/*  Severity ka rang sirf BAAYEN kinare par — poori satar rangne se fehrist ek
    chetawni ka dher ban jati hai aur asal matn parhna mushkil ho jata hai.  */
.notification-list-v52 article.sev-warning { border-left: 3px solid var(--warning, #d99b28); }
.notification-list-v52 article.sev-error   { border-left: 3px solid var(--danger, #c04141); }
.notification-list-v52 article.sev-success { border-left: 3px solid var(--success, #2e9e63); }

.notification-list-v52 article.sev-error .ni {
    background: color-mix(in srgb, var(--danger, #c04141) 12%, transparent);
    color: var(--danger, #c04141);
}

.notification-list-v52 article.sev-warning .ni {
    background: color-mix(in srgb, var(--warning, #d99b28) 14%, transparent);
    color: var(--warning, #d99b28);
}

/*  Khali ghanti par "0 notifications" likhna kuch nahi batata. Ye batata hai
    ke khali hona ACHHI khabar hai — aur aage kya tawaqqa karni chahiye.    */
.ntf-empty {
    display: grid;
    place-items: center;
    gap: 4px;
    padding: 40px 24px;
    text-align: center;
}

.ntf-empty .aj-icon { color: var(--success, #2e9e63); opacity: .7; }
.ntf-empty .aj-icon svg { width: 26px; height: 26px; }
.ntf-empty b { font-size: 12.5px; }
.ntf-empty small { font-size: 10.5px; line-height: 1.45; color: var(--muted, #67798a); }

/*  Template ka .badge-dot khali nuqte ke liye bana tha; ginti daalte hi wo
    tang par jata hai.                                                       */
.icon-btn .badge-dot {
    padding: 0 3px;
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1;
}


/* ============================================================================
   THEME KE TOKENS — SCROLLBAR, ICON BUTTON, AUR BAND KARNE WALA BUTTON
   ============================================================================

   User ne ye baat usool ki shakal mein kahi, aur wo theek hai:

       "app jo bhi design rakhe wo TEMPLATE ke hisab se rakhe, kyunke is
        template mein bohat si themes hain — main chahta hoon ke control
        template ke hisab se color combination kare."

   Yani koi bhi rang haath se nahi likha jayega. Har cheez in tokens se aayegi
   (--primary, --primarySoft, --line, --line2, --surface…), taake theme badalte
   hi poora portal us ke saath badal jaye — aur wo cheezein bhi jo maine likhi
   hain, sirf wo nahi jo template ne likhi thin.

   Neeche teen cheezein hain jo is usool par poori nahi utar rahi thin.
   ========================================================================== */


/* ------------------------------------------------------------- 1. SCROLLBAR

   Template scrollbar ko theme ke rang deta hai, magar sirf apni chuni hui
   chhe jagahon par:

       .settings-content, .settings-nav, .menu-list, .results, .drawer-body, .work

   Jo dabbe MAINE scroll wale banaye — launcher/search ki fehrist, selector ki
   fehrist, grid ka khaana, colmenu — wo us fehrist mein the hi nahi, is liye
   un par browser ka apna bhoora scrollbar aa jata tha. Ek hi panel mein do
   alag scrollbar dikhna theme ke toot jane ka sab se saaf nishan hai.

   Qeematein haath se nahi likhi gayin — template ke usi qaide se HOOBAHU li
   gayi hain (68% / 70% color-mix, 7px, radius 7). Agar kal wahan badle to
   yahan bhi wohi badalna hai, aur ye comment us waqt yaad dila dega.         */

.cmdk-list,
.context-results,
.erp-grid-wrap,
.erp-colmenu,
.aj-menu-flyout .menu-list,
.launcher-body,
.notification-list-v52 {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary) 68%, var(--line2)) transparent;
}

.cmdk-list::-webkit-scrollbar,
.context-results::-webkit-scrollbar,
.erp-grid-wrap::-webkit-scrollbar,
.erp-colmenu::-webkit-scrollbar,
.aj-menu-flyout .menu-list::-webkit-scrollbar,
.launcher-body::-webkit-scrollbar,
.notification-list-v52::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.cmdk-list::-webkit-scrollbar-thumb,
.context-results::-webkit-scrollbar-thumb,
.erp-grid-wrap::-webkit-scrollbar-thumb,
.erp-colmenu::-webkit-scrollbar-thumb,
.aj-menu-flyout .menu-list::-webkit-scrollbar-thumb,
.launcher-body::-webkit-scrollbar-thumb,
.notification-list-v52::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary) 70%, var(--line2));
    border-radius: 7px;
}

/*  Track shafaf — template bhi yehi karta hai. Us par apna rang dena panel ke
    kinare par ek patti bana deta hai jo har theme mein alag ja girti hai.   */
.cmdk-list::-webkit-scrollbar-track,
.context-results::-webkit-scrollbar-track,
.erp-grid-wrap::-webkit-scrollbar-track,
.erp-colmenu::-webkit-scrollbar-track,
.aj-menu-flyout .menu-list::-webkit-scrollbar-track,
.launcher-body::-webkit-scrollbar-track,
.notification-list-v52::-webkit-scrollbar-track { background: transparent; }


/* --------------------------------------------------- 2. FUNNEL KA HOVER

   Maine hover par `--surface3` + `--text` likha tha. Wo "neutral" soch kar
   likha tha, magar template ka apna qaida kuch aur hai:

       .aj-inline-action:hover   { background: var(--primarySoft); color: var(--primary) }
       .context-pop-close:hover  { background: var(--primarySoft); color: var(--primary) }

   Yani poore template mein icon button ka hover PRIMARY family ka hai. Mera
   grey hover un ke darmiyan ek ajnabi tha — aur jin themes mein --surface3
   aur --primarySoft door hain, wahan wo saaf nazar aata tha.

   Ab wohi jodi. `border-color` bhi usi primary se nikli hui hai, kisi alag
   rang se nahi.                                                             */

.aj-inline-action.aj-match-btn:hover {
    background: var(--primarySoft, #eaf2fd);
    border-color: color-mix(in srgb, var(--primary, #3474d1) 22%, var(--line, #dde4ea));
    color: var(--primary, #3474d1);
}

/*  Keyboard se aane wale ko bhi wohi nishan — aur halqa bhi theme se.      */
.aj-inline-action.aj-match-btn:focus-visible {
    outline: 0;
    background: var(--primarySoft, #eaf2fd);
    border-color: var(--primary, #3474d1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #3474d1) 18%, transparent);
}


/* ------------------------------- 3. BAND KARNE WALA (×) — TEENON PANEL PAR

   Ghanti ke drawer ka (×) hover par bhoora ho jata tha. Wajah scope thi:
   template ne themed hover `.aj-drawer .drawer-x` par likha hai (primary
   background, safed matn), aur hamara drawer `.drawer` hai, `.aj-drawer`
   nahi — is liye us tak sirf base qaida pahuncha:

       .drawer-x:hover { background: var(--surface3) }      ← bhoora

   Yehi baat mere apne `.cmdk-close` par bhi thi (surface3 + text).

   Ab teenon (×) — launcher, global search, ghanti — aur selector ka (×) ek hi
   jodi par hain, aur wo jodi template ki apni hai: primarySoft + primary.
   `.aj-drawer` wala safed-par-primary hover jaan boojh kar naql nahi kiya:
   wo ek bhara hua chauk banata hai, aur ye teen buttons chhote panel ke sar
   par hain jahan wo bhaari lagta hai. Jodi wohi hai jo `.context-pop-close`
   par pehle se chal rahi hai — yani ek hi patti par do bartao nahi.        */

.notification-drawer .drawer-x:hover,
.cmdk-close:hover {
    background: var(--primarySoft, #eaf2fd);
    color: var(--primary, #3474d1);
}

.notification-drawer .drawer-x:focus-visible,
.cmdk-close:focus-visible,
.context-pop-close:focus-visible {
    outline: 0;
    background: var(--primarySoft, #eaf2fd);
    color: var(--primary, #3474d1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #3474d1) 18%, transparent);
}


/* ------------------------------------------------- settings ka (×) daayen kone mein

   Markup mein wo ab `.settings-shell` ka seedha bachcha hai, sidebar ka nahi —
   is liye jagah poore dialog se naapi jati hai, kisi ek column se nahi.

   `right` 18px hai, 12 nahi: content ka apna scrollbar 7px chaura hai aur
   bilkul us kinare par chalta hai. 12px par button us ke oopar aa jata aur
   scrollbar ka sab se ooper wala hissa pakre mein hi na aata — ek cheez ko
   theek karte hue doosri torna.                                              */
.settings-close-tr {
    position: absolute;
    top: 12px;
    right: 18px;
    z-index: 3;
    border: 0;
    background: transparent;
    color: var(--muted, #67798a);
    display: grid;
    place-items: center;
    border-radius: calc(var(--radius, 5) * 1px);
    cursor: pointer;
}

/*  Hover wohi jodi jo poore template par har icon button ki hai. */
.settings-close-tr:hover {
    background: var(--primarySoft, #eaf2fd);
    color: var(--primary, #3474d1);
}

.settings-close-tr:focus-visible {
    outline: 0;
    background: var(--primarySoft, #eaf2fd);
    color: var(--primary, #3474d1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #3474d1) 18%, transparent);
}

/*  (×) ke jane ke baad sidebar ka sar sirf naam rakhta hai — us qatar ka
    apna padding aur lakeer wahi rehti hai, bas ab wo bhari hui nahi lagti. */
.settings-close-row { gap: 0; }


/* ============================================================================
   "SUBTLE" BUTTON — YE VARIANT CSS MEIN THA HI NAHI
   ============================================================================

   Template ke paas paanch variant hain: primary · outline · ghost · success ·
   warning. Portal `subtle` bhi likhta hai — Cancel, Columns, Export, Import,
   Filters, aur bahut si jagah — magar us naam ka koi qaida kahin nahi hai.

   Nateeja: wo class lagti hai aur kuch karti nahi. Button base `.btn` par gir
   jata hai, yani wo theme ke saath badalta hi nahi. User ne yehi kaha:
   "cancel button ko theme ke saath connect karo."

   Ye us qism ki cheez hai jo error nahi deti — na compile par, na browser mein.
   Class likhi hui hai, button dikhta bhi hai, bas wo woh nahi hai jo likhne
   wale ne socha tha.

   `subtle` ki jagah kahan hai: `ghost` bilkul saada hai (na border na
   background) aur `outline` primary rang ka kinara rakhta hai. `subtle` un ke
   BEECH ka hai — halka sa dabba jo saath wale primary button se muqabla na
   kare, magar dabne ke qabil zaroor lage. Sab kuch token se, koi likha hua
   rang nahi.
   ============================================================================ */

.aj-button.subtle,
.btn.subtle {
    background: var(--surface, #fff);
    border-color: var(--line, #dde4ea);
    color: var(--text, #16202a);
}

.aj-button.subtle:hover,
.btn.subtle:hover {
    background: var(--primarySoft, #eaf2fd);
    border-color: color-mix(in srgb, var(--primary, #3474d1) 30%, var(--line, #dde4ea));
    color: var(--primary, #3474d1);
}

.aj-button.subtle:focus-visible,
.btn.subtle:focus-visible {
    outline: 0;
    border-color: var(--primary, #3474d1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #3474d1) 18%, transparent);
}

.aj-button.subtle:disabled,
.btn.subtle:disabled { opacity: .5; }


/*  ---------------------------------------------------------------------------
    CANCEL — hover par surkh

    `subtle` ki hover neeli hai, aur wo theek hai: Columns, Export, Import,
    Filters — ye sab `subtle` hain aur inhen "khatra" ka rang dena galat hoga.
    Cancel un se alag cheez hai. Wo kaam ko RADD karta hai, aur jo kaam radd
    karta hai us ka ishara pehle se hi surkh hota hai — Delete, Remove, Revoke,
    sab isi khandan mein hain.

    Isi liye ye rang `subtle` par nahi, ek alag class `btn-cancel` par hai jo
    screen mein saaf likhi jati hai. Yani jis din kisi aur jagah `subtle`
    button lage, us ka rang khud ba khud nahi badlega.

    Rang `--danger` se banta hai (template ka apna token), hardcoded nahi —
    is liye har theme mein wohi surkh aata hai jo us theme ka apna hai.
    Bharaav sirf 10% hai: ishara dena maqsood hai, dhamkana nahi.            */
.aj-button.btn-cancel:hover:not(:disabled),
.btn.btn-cancel:hover:not(:disabled) {
    background: color-mix(in srgb, var(--danger, #c33c32) 10%, var(--surface, #fff));
    border-color: color-mix(in srgb, var(--danger, #c33c32) 38%, var(--line, #dde4ea));
    color: var(--danger, #c33c32);
}

.aj-button.btn-cancel:focus-visible,
.btn.btn-cancel:focus-visible {
    outline: 0;
    border-color: var(--danger, #c33c32);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger, #c33c32) 18%, transparent);
}


/* ------------------------------------------- dialog ka scrollbar bhi theme se

   Yahan pehle `scrollbar-color: var(--line) …` likha tha — yani bhoora, jabke
   poore portal ka scrollbar ab primary se banta hai (dekho oopar wala
   "THEME KE TOKENS" wala hissa). Ek hi safhe par do rang ke scrollbar.

   Qeematein wahi hain jo baqi sab jagah — naya kuch nahi.                    */
.aj-dialog-body {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary, #3474d1) 68%, var(--line2, #c7d7db)) transparent;
}

.aj-dialog-body::-webkit-scrollbar { width: 7px; height: 7px; }
.aj-dialog-body::-webkit-scrollbar-track { background: transparent; }

.aj-dialog-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary, #3474d1) 70%, var(--line2, #c7d7db));
    border-radius: 7px;
}


/* ============================================================================
   FORM-PAIR — DO CHHOTE SECTION SAATH SAATH
   ============================================================================

   User ne apne haath ka khaka (Paint) bheja: IDENTITY baayen, BELONGS TO
   daayen, aur un ke andar khaane oopar neeche.

   Us mein ek asli soch hai. Dono section chhote hain (teen teen khaane) aur
   ek doosre se juday hue nahi. Neeche neeche rakhne par safha bewajah lamba
   hota hai aur banda scroll kar ke wo cheez dhoondta hai jo saath mein aa
   sakti thi.

   Ye `:has()` par NAHI khara — pichhli dafa wohi cheez form ko toor gayi thi
   aur sabab kabhi maloom nahi hua. Yahan class SCREEN mein saaf likhi hai
   (`<div class="form-pair">`), yani jo section saath aana chahiye wo wahin
   dikhta hai jahan wo likha gaya hai — CSS ko andaza nahi lagana parta.
   ============================================================================ */

.form-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
    align-items: start;
}

/* ----------------------------------------------------------------------------
   FORM COLUMNS  —  do sutoon jin mein section BEHTE hain

   `.form-pair` do section ko AAMNE SAAMNE rakhta hai: dono ki pehli qatar ek
   lakeer par, aur jo chhota hai us ke neeche khali jagah reh jati hai.

   Ye us se alag cheez hai. Yahan har sutoon apni marzi se lamba hota hai aur
   section ek ke baad ek neeche behte jate hain — baayen sutoon mein teen
   section ho sakte hain aur daayen mein do, aur beech mein koi khali jagah
   nahi bachti.

   Enterprise ka popup isi wajah se aadha khali tha: paanch section poori
   chaurai le kar ek ke neeche ek khare the, aur neeche 300px se zyada khali
   jagah reh jati thi. Ab wohi paanch section do sutoon mein aa jate hain.

   KAB `.form-pair` AUR KAB `.form-cols`
   -------------------------------------
   `.form-pair`  — do section jo AAPAS MEIN JURE hue hain aur jinhein aamne
                   saamne parhna hota hai (misaal: "Identity" aur "Belongs
                   to", jahan banda dono ki pehli qatar ek sath dekhta hai).
   `.form-cols`  — poore form ka dhancha, jahan sirf jagah bachani hai.

   Ek hi form mein dono ka istemal na karein — do alag qawaid ka mila jula
   nateeja parhne wale ko samajh nahi aata.
   -------------------------------------------------------------------------- */

.form-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
    align-items: start;
}

/*  Har sutoon apna alag amood. `min-width: 0` ke baghair lamba matn (jaise
    poora email ya address) sutoon ko chaura kar deta hai aur do sutoon barabar
    nahi rehte.                                                               */
.form-cols > .form-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/*  Sutoon ka PEHLA section — us par oopar wali lakeer aur padding nahi, bilkul
    waise hi jaise `.form-pair` mein. Wahan lakeer kisi cheez ko juda nahi kar
    rahi hoti, sirf adhoori nazar aati hai.                                   */
.form-cols > .form-col > .form-section:first-child { padding-top: 0; border-top: 0; }

/*  Aur `.erp-form-dialog .form-section:first-child { padding-top: 10px }` ka
    wohi purana jhagra — wo sirf BAAYEN sutoon ke pehle section par chipakta
    hai (wo apne maa-baap ka pehla bachcha hai), daayen par nahi, aur dono ki
    sar 10px alag ho jate hain. Us ka jawab wahi hai jo `.form-pair` par tha:
    padding sutoon par, section par nahi.                                     */
.erp-form-dialog .form-cols > .form-col > .form-section:first-child,
.erp-screen .form-cols > .form-col > .form-section:first-child { padding-top: 0; border-top: 0; }

.erp-form-dialog .dialog-form > .form-cols:first-child,
.erp-screen .form-cols:first-child { padding-top: 12px; }

.form-cols + .form-section { padding-top: 22px; border-top: 0; }

/*  Tang screen: do sutoon ka koi matlab nahi rehta — khane khud itne tang ho
    jate hain ke label poora nahi aata. Ek ke neeche ek, aur section ke beech
    wohi judai jo aam form mein hoti hai.                                     */
@media (max-width: 900px) {
    .form-cols { grid-template-columns: 1fr; gap: 0; }
    .form-cols > .form-col + .form-col > .form-section:first-child { padding-top: 22px; }
}

/*  Jorhe ke andar dono section "pehle" hain — na un par oopar wali lakeer
    honi chahiye na uska padding. Bina is ke daayen wale par ek adhoori lakeer
    aa jati hai jo kisi cheez ko juda nahi kar rahi hoti.                    */
.form-pair > .form-section { padding-top: 0; border-top: 0; }

/*  ---- BAAYEN SUTOON KA 10px — ye wo cheez thi jo user ki lakeeron mein
    nazar aayi

    Popup ke andar ek qaida pehle se mojood hai:

        .erp-form-dialog .form-section:first-child { padding-top: 10px }

    Wo `.form-pair` ke BAAYEN section par bhi chipak jata hai (wo apne maa-baap
    ka pehla bachcha hai), daayen par nahi. Nateeja: "Identity" 10px neeche,
    "Belongs to" 10px oopar — aur us ke saath Code↔Country, Name↔Base currency,
    Short name↔Reporting currency, teenon qatarein bhi 10px khisak gayin.

    Oopar wala qaida (`.form-pair > .form-section`) us se HAAR raha tha:
    do class banaam teen. Ab teen ke muqable teen, aur ye baad mein likha hai
    — is liye jeet is ki hai. `!important` ki zaroorat nahi.

    Wo 10px asal mein bemaani nahi tha: pehli qatar ke floating label ka notch
    dabbe ke kinare se aadha bahar nikalta hai aur oopar jagah na ho to kat
    jata hai. Is liye wo jagah khatam nahi ki — JORHE par chali gayi, jahan wo
    dono sutoon ko barabar milti hai.                                        */
.erp-form-dialog .form-pair > .form-section,
.erp-screen .form-pair > .form-section { padding-top: 0; border-top: 0; }

.erp-form-dialog .dialog-form > .form-pair:first-child,
.erp-screen .form-pair:first-child { padding-top: 12px; }

/*  ---- DONO SUTOONON KI QATAREIN EK HI LAKEER PAR

    Oopar wali durusti tab tak chalti hai jab tak dono section ke sar (heading
    + neeche wali chhoti satar) ek jitne oonche hon. Jis din daayen wali satar
    do lakeeron mein tootti hai (tang dialog, ya lamba jumla), us din daayen ka
    grid 17px neeche chala jata hai aur qatarein phir se bikhar jati hain.

    `subgrid` is ko jar se khatam karta hai: dono section apni qatarein khud
    nahi banate, JORHE se lete hain. Sar ki qatar utni oonchi hoti hai jitna
    lamba sar hai, aur khaane HAMESHA ek hi lakeer se shuru hote hain — chahe
    sar ek satar ka ho ya teen ka.

    `@supports` ke andar is liye hai ke jis browser ko subgrid nahi aata, wahan
    poora block nazarandaz ho jata hai aur oopar wali seedhi durusti bahaal
    rehti hai — kuch toota nahi, bas itna sa faida nahi milta.                */
@supports (grid-template-rows: subgrid) {
    @media (min-width: 901px) {
        .form-pair {
            grid-template-rows: auto auto;
            row-gap: 12px;
        }
        /*  row-gap yahan JAAN BOOJH KAR nahi likha. `.form-section` par pehle
            se 12px hai aur jorhe par bhi 12px — dono barabar hain, is liye
            browser jis ko bhi chune, faasla wohi rehta hai.                 */
        .form-pair > .form-section {
            grid-row: span 2;
            grid-template-rows: subgrid;
        }

        /*  ---- …aur khaane us barhi hui jagah ko BHAR na dein

            Ye subgrid ka apna saya hai, aur is ne ek nayi kharabi paida ki
            thi. Qatar 2 utni oonchi hoti hai jitna LAMBA sutoon — aur jis din
            baayen taraf "Code is required." jaisi ek satar aa jati hai, wo
            sutoon 34px lamba ho jata hai.

            Chhota (daayan) grid us poori oonchai mein phail jata hai: teen
            khaane 40px ke bajaye 51px ke ho jate hain (`auto` qatarein baqi
            jagah aapas mein baant leti hain). Do nuqsan ek sath:

              • daayen ke khaane baayen ke saamne se hat jate hain
              • aakhri khaana section ke pende se 11px oopar reh jata hai, aur
                us ke neeche wali lakeer (DETAILS ki border) ek AWARA lakeer
                lagti hai jo kisi cheez se nahi juri — user ne yehi ghera tha

            `align-content: start` grid ko kehta hai: apni qatarein utni hi
            rakho jitni zaroorat hai, bachi hui jagah neeche chhor do.        */
        .form-pair > .form-section > .ff-1,
        .form-pair > .form-section > .ff-2,
        .form-pair > .form-section > .ff-3,
        .form-pair > .form-section > .form-grid,
        .form-pair > .form-section > .field-switches { align-content: start; }
    }
}

/*  ---- JORHE KE BAAD LAKEER NAHI — SIRF JAGAH

    Pehle yahan wohi hairline thi jo har section ke oopar aati hai. Soch ye
    thi ke "jorha bhi ek section hai, us ke baad bhi lakeer aani chahiye."

    Wo soch ek baat bhool gayi: baqi section POORI chaurai lete hain, is liye
    un ki lakeer dono siron par kisi na kisi cheez se ja milti hai. Jorhe ke
    do sutoon kabhi barabar lambe nahi hote — baayen "Code is required."
    aa jaye to wo 34px neecha ho jata hai. Lakeer sab se lambe sutoon ke pende
    par khinchti hai, aur chhote sutoon ke neeche wo KHALI jagah se guzarti
    hai: ek hairline jo kisi cheez ko kisi cheez se juda nahi kar rahi.

    User ne screenshot par ghera laga kar yehi dikhaya.

    Judaai ab jagah se hoti hai (22px) — jo waise bhi zyada saaf hai, kyunke
    agle section ka apna sar (icon + naam) pehle se ek hadd hai. Lakeer sirf
    wahan bachi hai jahan wo dono taraf kisi cheez se milti hai.             */
.dialog-form > .form-pair + .form-section,
.form-pair + .form-section { padding-top: 22px; border-top: 0; }

/*  Tang jagah par jorha khul jata hai — do 490px ke sutoon 900px se neeche
    dabne lagte hain, aur "Reporting currency" jaisa naam apne khane mein
    poora nahi aata.                                                        */
@media (max-width: 900px) {
    .form-pair { grid-template-columns: 1fr; gap: 0; }
    .form-pair > .form-section + .form-section {
        padding-top: 16px;
        border-top: 1px solid var(--line, #eef2f5);
    }
}

/*  ---------------------------------------------------------------------------
    `w-full` — ek khaana jo poori qatar le

    `.form-grid .w-full` pehle se maujood tha, magar wo purani `.form-grid`
    wali screens ke liye tha. Dialog ke andar grid `.ff-2` / `.ff-3` hai, aur
    wahan ye class kaam hi nahi karti thi.

    Zaroorat wahan parti hai jahan aakhri khaana akela bach jaye (Details ke
    paanch khaane: do, do, aur ek). Us akele ko aadhi qatar mein chhorne se
    bagal mein khali aadh reh jata hai.

    Ye qaida SCREEN ke likhe hue par chalta hai, khud andaza nahi lagata —
    jahan `w-full` likha ho wahin lagta hai.
    --------------------------------------------------------------------------- */
.ff-2 > .w-full,
.ff-3 > .w-full { grid-column: 1 / -1; }


/* ============================================================================
   IMPORT WIZARD  —  ErpImportWizard.razor
   ============================================================================

   Har rang token se. Is popup mein "theek", "khatra" aur "intezar" teenon
   halat dikhani parti hain, aur teenon ke apne token pehle se mojood hain
   (--ok / --danger / --warn). Yahan koi naya rang nahi banaya gaya — warna
   theme badalne par ye popup akela purani theme mein reh jata.
   ============================================================================ */

.erp-import-dialog .aj-dialog-body { padding: 0; }

.imp-shell { display: flex; flex-direction: column; min-height: 0; }

/*  ---- qadam ki patti

    Ginti bhi hai aur nishan bhi: guzra hua qadam tick, maujooda qadam bhara
    hua, aane wala saada. Sirf rang se batana kaafi nahi — jo banda rang mein
    farq nahi kar pata us ke liye tick aur ginti dono baqi rehte hain.       */
.imp-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 12px 16px;
    list-style: none;
    border-bottom: 1px solid var(--line, #dde4ea);
    background: var(--surface2, #f6f8fa);
    overflow-x: auto;
    scrollbar-width: none;
}
.imp-steps::-webkit-scrollbar { display: none; }

.imp-step {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px 4px 4px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted, #667b88);
    white-space: nowrap;
    flex: none;
}

.imp-step-num {
    width: 21px; height: 21px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--surface3, #eef2f5);
    color: var(--muted, #667b88);
    font-size: 10.5px;
}
.imp-step-num svg { width: 11px; height: 11px; }

.imp-step.on { background: var(--primarySoft, rgba(52,116,209,.12)); color: var(--primary, #3474d1); }
.imp-step.on .imp-step-num { background: var(--primary, #3474d1); color: #fff; }

.imp-step.done { color: var(--success, #1c8b58); }
.imp-step.done .imp-step-num {
    background: color-mix(in srgb, var(--success, #1c8b58) 16%, transparent);
    color: var(--success, #1c8b58);
}

.imp-body { padding: 14px 16px 16px; min-height: 0; }

/*  ---- file chunne ka dabba

    Poora dabba hi button hai: `InputFile` us par phaila hua aur ghaib hai, is
    liye kahin bhi click chalta hai aur file yahan chhori bhi ja sakti hai.
    Drag & drop ke liye koi JS nahi likhi — file input ye khud karta hai.    */
.imp-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 190px;
    padding: 24px;
    text-align: center;
    border: 2px dashed var(--line2, #c7d7db);
    border-radius: calc(var(--radius, 5) * 2px);
    background: var(--surface2, #f6f8fa);
    transition: border-color .15s ease, background .15s ease;
}
.imp-drop:hover {
    border-color: var(--primary, #3474d1);
    background: color-mix(in srgb, var(--primarySoft, #eaf2fd) 45%, var(--surface, #fff));
}
.imp-drop b { font-size: 13px; }
.imp-drop small { font-size: 11px; color: var(--muted, #667b88); }

.imp-drop-ico {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    margin-bottom: 4px;
    border-radius: 12px;
    background: var(--primarySoft, rgba(52,116,209,.12));
    color: var(--primary, #3474d1);
}
.imp-drop-ico svg { width: 20px; height: 20px; }

.imp-drop-input {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
}

.imp-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 11px;
    border-radius: calc(var(--radius, 5) * 1.6px);
    background: var(--surface2, #f6f8fa);
    color: var(--muted, #667b88);
    font-size: 11px;
    line-height: 1.45;
}
.imp-note svg { width: 13px; height: 13px; flex: none; margin-top: 1px; }

.imp-note.warn {
    background: color-mix(in srgb, var(--warning, #b8860b) 10%, var(--surface, #fff));
    color: color-mix(in srgb, var(--warning, #b8860b) 78%, var(--text, #16202a));
}

/*  ---- chuni hui file ka bayan */
.imp-file {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 11px;
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 1.6px);
    background: var(--surface2, #f6f8fa);
    font-size: 12px;
}
.imp-file svg { width: 14px; height: 14px; color: var(--primary, #3474d1); }
.imp-file small { margin-left: auto; color: var(--muted, #667b88); font-size: 11px; }

/*  ---- mapping

    Do sutoon jab jagah ho, ek jab na ho. Khane ka naam aur us ka dropdown
    hamesha SAATH rehte hain — un ko alag qatarein bana dene par nazar ko har
    dafa wapas jana parta hai ke ye dropdown kis khane ka tha.               */
.imp-map {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
}

/*  Ek khana = ek control. Khane ka naam control ke apne label mein hai
    (floating), alag se baayen likha hua nahi — wohi shakal jo har form par
    hai. Do jagah naam likhna sirf jagah khata hai.                         */
.imp-map-row { min-width: 0; }

.imp-map-hint {
    display: block;
    margin: 3px 0 0 2px;
    font-size: 9.5px;
    line-height: 1.4;
    color: var(--muted, #667b88);
}

@media (max-width: 780px) {
    .imp-map { grid-template-columns: 1fr; }
}

/*  ---- filter ki pattiyan (All / New / Already there / Problem) */
.imp-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.imp-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid var(--line, #dde4ea);
    border-radius: 999px;
    background: var(--surface, #fff);
    color: var(--text, #16202a);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}
.imp-tab b { font-weight: 700; opacity: .6; }
.imp-tab:hover { border-color: var(--primary, #3474d1); color: var(--primary, #3474d1); }
.imp-tab.on {
    background: var(--primary, #3474d1);
    border-color: var(--primary, #3474d1);
    color: #fff;
}
.imp-tab.on b { opacity: .85; }

/*  Duplicate ka faisla. Ye patti ke doosre sire par hai, filtron se door —
    kyunke wo dekhne ki cheez hai aur ye KARNE ki.                          */
/*  Duplicate ka faisla. 260px is liye ke poora "Update the existing record"
    us mein aa jata hai — us se chhota karne par sab se ahem option hi kat
    jata, aur wohi wo hai jo data badal deta hai.                          */
.imp-dup { flex: 0 0 260px; max-width: 260px; }

@media (max-width: 700px) {
    .imp-dup { flex: 1 1 100%; max-width: none; }
}

/*  ---- jaanch aur natije ki grid */
.imp-grid-wrap {
    max-height: 42vh;
    overflow: auto;
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 1.6px);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary, #3474d1) 68%, var(--line2, #c7d7db)) transparent;
}
.imp-grid-wrap::-webkit-scrollbar { width: 7px; height: 7px; }
.imp-grid-wrap::-webkit-scrollbar-track { background: transparent; }
.imp-grid-wrap::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary, #3474d1) 70%, var(--line2, #c7d7db));
    border-radius: 7px;
}

.imp-grid { width: 100%; }
.imp-grid th { position: sticky; top: 0; z-index: 1; }
.imp-col-line { width: 3.5rem; text-align: right; color: var(--muted, #667b88); }
.imp-col-state { width: 9.5rem; }

.imp-s-new, .imp-s-dup, .imp-s-bad, .imp-s-ok, .imp-s-skip {
    font-size: 10.5px;
    font-weight: 700;
}
.imp-s-new  { color: var(--primary, #3474d1); }
.imp-s-ok   { color: var(--success, #1c8b58); }
.imp-s-dup  { color: var(--warning, #b8860b); }
.imp-s-skip { color: var(--muted, #667b88); }
.imp-s-bad  { color: var(--danger, #c33c32); }

/*  Qatar ka rang halka — matn parhne ke qabil rehna chahiye. 7% se oopar
    jate hi neeche likha hua dhundhla lagne lagta hai.                      */
.imp-grid tbody tr.imp-r-dup  { background: color-mix(in srgb, var(--warning, #b8860b) 7%, transparent); }
.imp-grid tbody tr.imp-r-bad  { background: color-mix(in srgb, var(--danger, #c33c32) 7%, transparent); }
.imp-grid tbody tr.imp-r-ok   { background: color-mix(in srgb, var(--success, #1c8b58) 7%, transparent); }
.imp-grid tbody tr.imp-r-skip { opacity: .6; }

.imp-why {
    width: 20px; height: 20px;
    margin-left: 4px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--muted, #667b88);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    vertical-align: middle;
}
.imp-why:hover { background: var(--surface3, #eef2f5); color: var(--danger, #c33c32); }
.imp-why svg { width: 12px; height: 12px; }

/*  Poori wajah. Grid ke khane mein wo aa hi nahi sakti, aur adhoora jumla
    kisi kaam ka nahi.                                                      */
.imp-why-box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--danger, #c33c32) 34%, var(--line, #dde4ea));
    border-radius: calc(var(--radius, 5) * 1.6px);
    background: color-mix(in srgb, var(--danger, #c33c32) 7%, var(--surface, #fff));
    color: var(--text, #16202a);
    font-size: 11.5px;
    line-height: 1.45;
}
.imp-why-box > svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--danger, #c33c32); }
.imp-why-box > span { flex: 1; }

/*  ---- aakhri natija: teen adad, bare bare */
.imp-result {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.imp-score {
    padding: 12px;
    text-align: center;
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 1.6px);
    background: var(--surface2, #f6f8fa);
}
.imp-score b { display: block; font-size: 22px; line-height: 1.1; }
.imp-score small { font-size: 10.5px; color: var(--muted, #667b88); }

.imp-score.ok {
    border-color: color-mix(in srgb, var(--success, #1c8b58) 34%, var(--line, #dde4ea));
    background: color-mix(in srgb, var(--success, #1c8b58) 8%, var(--surface, #fff));
}
.imp-score.ok b { color: var(--success, #1c8b58); }

.imp-score.warn {
    border-color: color-mix(in srgb, var(--warning, #b8860b) 34%, var(--line, #dde4ea));
    background: color-mix(in srgb, var(--warning, #b8860b) 8%, var(--surface, #fff));
}
.imp-score.warn b { color: var(--warning, #b8860b); }

.imp-score.bad {
    border-color: color-mix(in srgb, var(--danger, #c33c32) 34%, var(--line, #dde4ea));
    background: color-mix(in srgb, var(--danger, #c33c32) 8%, var(--surface, #fff));
}
.imp-score.bad b { color: var(--danger, #c33c32); }


/*  ---- template ka dabba

    File chunne wale dabbe ke NEECHE, andar nahi. Andar rakhne par do kaam ek
    hi jagah aa jate — "file do" aur "file kaisi honi chahiye" — aur banda
    aksar galat wala daba deta hai. Neeche wo jawab hai us sawal ka jo file
    chunne se PEHLE aata hai.                                                */
.imp-template {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line, #dde4ea);
    border-radius: calc(var(--radius, 5) * 1.6px);
    background: var(--surface, #fff);
}

.imp-template-copy { flex: 1; min-width: 0; }
.imp-template-copy b { display: block; font-size: 12px; }
.imp-template-copy small {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--muted, #667b88);
}

@media (max-width: 620px) {
    .imp-template { flex-direction: column; align-items: stretch; }
}

/* ============================================================================
   IMAGE FIELD  —  AjImageField.razor

   Logo, photo, item ki tasveer.

   Dhancha wohi hai jo baqi controls ka hai — `.aj-field > .aj-box` — taake
   kinara, gol kona, hover, focus aur outline ki notch sab khud ba khud theme
   se aayen aur is khane ko alag se kuch na sikhana pare. Yahan sirf teen
   baatein badalti hain:

     1.  Height. `.aj-box` har control ke liye `--control-h` par tay hai. Yahan
         andar tasveer ka murabba hai, is liye height khud content se banti
         hai (min-height ke sath, taake khali aur bhari halat mein khana idhar
         udhar na khiske).
     2.  Content ka rukh. Aam khane mein ek hi cheez hoti hai; yahan teen —
         tasveer, us ki tafseel, aur us par kaam. Is liye flex.
     3.  Ooper ki jagah. Label notch mein baithta hai, to content ko us ke
         neeche se shuru hona chahiye — warna wo label ko chhoo leta hai.

   Har rang token se: --line, --surface2, --muted, --danger.
   ========================================================================== */

.aj-image-field .aj-box {
    /*  !important is liye ke reference stylesheet mein `.aj-box` ki height
        theen dafa (aur ek dafa xa `!important` ke sath) tay ki gayi hai.
        Wahan jaa kar shart lagana har control ko chhoo leta; yahan rok dena
        sirf isi khane par asar karta hai.                                    */
    height: auto !important;
    min-height: 84px;
    align-items: center !important;
    gap: 12px;
    /*  Ooper thori zyada jagah — wahan label ki notch hai.                   */
    padding: 20px var(--ctrl-pad-x, 13px) 12px;
}

/*  Murabba, taake khali aur bhari dono halat mein khana utni hi jagah le aur
    tasveer lagate hi baqi form neeche na khisak jaye.                        */
.aj-image-field .imgf-thumb {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line, #dde3e9);
    border-radius: 6px;
    background: var(--surface2, #f6f8fa);
}

.aj-image-field .imgf-thumb.is-empty {
    border-style: dashed;
    color: var(--muted, #6b7a89);
}

.aj-image-field .imgf-thumb .aj-icon { width: 20px; height: 20px; opacity: .5; }

/*  contain, cover nahi: logo ka kinara kat jana usay pehchanne se rok deta
    hai. Chhoti tasveer bari nahi ki jati.                                    */
.aj-image-field .imgf-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.aj-image-field .imgf-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/*  Lamba file name khana chaura nahi karta — teen nuqte lag jate hain.       */
.aj-image-field .imgf-name {
    font-size: 12.5px;
    line-height: 1.25;
    color: var(--text, #16202a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*  Hint bhi ek hi satar mein. Ye sirf sundarta nahi: agar wo do satron par
    chala jaye to logo lagate hi khana lamba ho jata hai aur poora form neeche
    khisak jata hai — banda samajhta hai kuch aur bhi badal gaya.             */
.aj-image-field .imgf-hint {
    font-size: 11px;
    line-height: 1.3;
    color: var(--muted, #6b7a89);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aj-image-field .imgf-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/*  <label> button ki tarah dikhta hai aur asli <input type=file> us ke andar
    chhupa hai. File chunne ka dialog SIRF asli input khol sakta hai —
    JavaScript se click karwana kuch browser mein rok diya jata hai.          */
.aj-image-field .imgf-pick { position: relative; overflow: hidden; cursor: pointer; }

.aj-image-field .imgf-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/*  Ghalti ka jumla — wohi shakal jo baqi khanon ke helper ki hai.            */
.aj-image-field .helper {
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--danger, #c33c32);
}

/*  Chhoti screen: naam aur hint ko poori chaurai mil jati hai, button neeche
    apni qatar mein. Warna teen cheezein 300px mein nichori jati hain aur
    file ka naam ek harf mein simat jata hai.                                 */
@media (max-width: 520px) {
    .aj-image-field .aj-box { flex-wrap: wrap; }
    .aj-image-field .imgf-meta { flex: 1 1 100%; order: 3; }
    .aj-image-field .imgf-actions { margin-left: auto; }
}

/* ============================================================================
   FORM DIALOG KE TAB  —  ErpFormDialog + ErpFormTab

   Tab popup ke content ke SIR par baithte hain, us ke andar nahi. Wo poore
   form ka rukh badalte hain, is liye unhein pehle section se pehle aur us se
   thora alag hona chahiye — warna wo Identity ka hi hissa lagte hain.

   Chipke rehna (sticky) jaan boojh kar NAHI. Har tab ka content itna chhota
   hai ke scroll ki nazoobat hi nahi aati; aur sticky patti tab kaam ki hoti
   hai jab wo kisi cheez ke saath chal rahi ho.
   ========================================================================== */

.erp-form-dialog .dialog-tabs {
    margin: -4px 0 6px;
}

/*  Reference stylesheet mein `.v39-tabs` do jagah likhi hai; doosri wali
    (`background: var(--surface2)`) tab ko ek bhari patti bana deti hai jo
    popup ke andar bhaari lagti hai. Yahan wohi shakal chahiye jo neeche
    lakeer wali hai — chhoti aur khamosh.                                    */
.erp-form-dialog .dialog-tabs.v39-tabs {
    background: transparent;
    display: flex;
    min-width: 0;
}

.erp-form-dialog .dialog-tabs .v39-tabs-list {
    display: flex;
    gap: 4px;
    width: 100%;
    border-bottom: 1px solid var(--line, #dde3e9);
    /*  Bohot tang screen par tab ki patti apne aap khisak sakti hai — un ka
        do satron mein toot-na popup ka sar aadha kha jata hai.              */
    overflow-x: auto;
    scrollbar-width: none;
}

.erp-form-dialog .dialog-tabs .v39-tabs-list::-webkit-scrollbar { display: none; }

.erp-form-dialog .dialog-tabs .v39-tabs-list button {
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--muted, #6b7a89);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    position: relative;
    cursor: pointer;
}

.erp-form-dialog .dialog-tabs .v39-tabs-list button:hover { color: var(--text, #16202a); }

.erp-form-dialog .dialog-tabs .v39-tabs-list button.active {
    color: var(--primary, #3474d1);
    font-weight: 700;
    background: transparent;
}

/*  Chuni hui tab ke neeche lakeer — wohi jo neeche wali hadd par baithti hai,
    is liye `bottom: -1px`.                                                   */
.erp-form-dialog .dialog-tabs .v39-tabs-list button.active::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -1px;
    height: 2px;
    background: var(--primary, #3474d1);
}

/*  Tab ke foran baad wale pehle section par oopar ki lakeer aur padding nahi —
    tab ki apni lakeer pehle se wahan hai, aur do lakeerein 6px ke faasle par
    ek ghalti lagti hain.                                                     */
.erp-form-dialog .dialog-form > .form-section:first-child,
.erp-form-dialog .dialog-form > *:first-child > .form-section:first-child {
    padding-top: 12px;
    border-top: 0;
}

/* ----------------------------------------------------------------------------
   KHALI TEXTAREA KA LABEL — beech mein nahi, pehli satar par

   `.aj-label` ka default `top: 50%` hai, aur ek satar wale khane mein wo bilkul
   theek hai: label wahin hota hai jahan matn aayega.

   Textarea mein wo galat ho jata hai. Char satar ka khana 90px ka hota hai, aur
   label us ke BEECH mein ja kar baith jata hai — jahan na matn shuru hota hai
   na icon hai. User ne screenshot par yehi ghera tha: "Remarks" apne dabbe ke
   darmiyan mein latka hua.

   Yahan wo pehli satar par aa jata hai — theek wahan jahan likhna shuru hoga,
   aur bagal wale icon ke barabar. Bharne (ya focus) par wo pehle ki tarah
   outline ki notch mein chala jata hai; wo qaida chhua nahi gaya.
   -------------------------------------------------------------------------- */

/*  SPECIFICITY — pehli koshish yahan bhi nakaam hui, wohi purani wajah.
    Jeetne wala qaida ye hai (isi file mein, oopar):

        .aj-field.has-leading:not(.floating):not(:focus-within) .aj-label
            { top: 50% !important; left: 34px !important }

    Us ke paas paanch class hain aur `!important` bhi. Bina in dono ke koi
    qaida usay nahi hata sakta. Is liye neeche `.aj-dynamic-textarea` bhi
    likha hai (chhe class) aur `!important` bhi — aur `left` ko haath nahi
    lagaya, wo pehle se theek hai (icon ke baad).                            */
.aj-field.aj-dynamic-textarea.has-leading:not(.floating):not(:focus-within) .aj-label,
.aj-field.aj-dynamic-textarea:not(.has-leading):not(.floating):not(:focus-within) .aj-label {
    top: var(--ta-pad, 10px) !important;
    transform: none !important;
    /*  Line-height wohi jo textarea ki pehli satar ki hai, taake dono ke
        markaz mile — sirf `top` barabar karna kaafi nahi hota, kyunke label
        chhota font hai.                                                      */
    line-height: var(--ta-line, 18px) !important;
}

/* ----------------------------------------------------------------------------
   IMAGE FIELD KI OONCHAI CONTROL KE NAAP KE SATH

   Pehle 84px tay tha. Control size "small" hone par bagal wala khana 34px ka
   reh gaya aur logo us se ढाई guna lamba — ek hi qatar mein do khane, aur
   chhote wale ke neeche 50px khali.

   Ab oonchai `--control-h` se banti hai, is liye teenon naapon par nisbat
   waisi hi rehti hai.
   -------------------------------------------------------------------------- */

.aj-image-field .aj-box {
    min-height: calc(var(--control-h, 34px) + 28px);
    padding: 18px var(--ctrl-pad-x, 13px) 10px;
}

.aj-image-field .imgf-thumb {
    width: calc(var(--control-h, 34px) + 6px);
    height: calc(var(--control-h, 34px) + 6px);
}

/* ============================================================================
   IDENTITY PANE  —  tasveer baayen, khane daayen

   Ye shakal User Master par pehle se chal rahi hai (`.user-identity`) aur
   waqai achhi hai: record ki tasveer ek nazar mein, aur us ke bagal us ki
   pehchan wale khane. Wahan ye `.user-dialog` ke andar bandhi hui thi, is liye
   koi doosra safha use nahi kar sakta tha.

   Yahan wohi cheez bina kisi screen ke naam ke likhi hai, taake Enterprise ka
   logo, LegalCompany ka logo, employee ki photo aur item ki tasveer — sab ek
   jaisi nazar aayen.

   `.user-identity` ke qawaid chhue nahi gaye: wo apni jagah chalte rahen,
   warna ek achhi cheez theek karne ke chakkar mein doosri toot-ti hai.
   ========================================================================== */

.erp-identity {
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: 20px;
    align-items: start;
}

/*  Tang screen par tasveer oopar, khane neeche — do sutoon mein 168px kaat
    dene par baqi khane itne tang ho jate hain ke label poora nahi aata.     */
@media (max-width: 820px) {
    .erp-identity { grid-template-columns: 1fr; justify-items: center; }
    .erp-identity-fields { width: 100%; }
}

.erp-identity-fields { display: grid; gap: 12px; min-width: 0; }

.erp-photo-pane { display: grid; justify-items: center; gap: 7px; }

/*  Company ka logo GOL nahi.

    User Master par tasveer gol hai aur wo theek hai — chehra gol frame mein
    achha lagta hai. Logo alag cheez hai: wo aksar chaukor ya chaura hota hai,
    aur gol frame us ke kinare kaat deta hai. Yahan gol kona (12px) hai, gol
    daira nahi.                                                               */
.erp-photo {
    width: 116px;
    height: 116px;
    border-radius: 12px;
    object-fit: contain;
    padding: 8px;
    background: var(--surface2, #f6f8fa);
    border: 1px solid var(--line, #dde4ea);
}

.erp-photo-empty {
    display: grid;
    place-items: center;
    color: var(--muted, #6b7a89);
    border-style: dashed;
}

.erp-photo-empty .aj-icon svg { width: 30px; height: 30px; opacity: .45; }

.erp-photo-pick { cursor: pointer; }
.erp-photo-pick svg { width: 14px; height: 14px; }

/*  Yahan pehle `input[type=file] { display: none }` likha tha, aur neeche ek
    aur qaida jis ke comment mein saaf likha hai "display: none NAHI". Dono ek
    hi file mein baithe rahe: neeche wala sirf position aur opacity likhta hai,
    is liye `display: none` upar se chalta raha aur us comment ka ulta hota
    raha.

    Ek hi cheez ke do jawab rakhne ka anjaam hamesha yehi hota hai — kisi din
    galat wala jeet jata hai, aur us din wo comment parhne wale ko gumraah bhi
    karta hai. Ab jawab ek hi jagah hai (neeche).                             */

.erp-photo-hint {
    font-size: 10.5px;
    opacity: .55;
    text-align: center;
    line-height: 1.35;
}

/* ----------------------------------------------------------------------------
   TAB PAR ICON

   `AjTabBar` icon pehle se render karta hai; yahan sirf us ka naap aur matn se
   faasla tay hota hai. Icon ke baghair tab ka naam akela parhna parta hai —
   icon aankh ko wo tab dobara dhoondne mein madad deta hai jahan wo pehle
   gaya tha.
   -------------------------------------------------------------------------- */

.erp-form-dialog .dialog-tabs .v39-tabs-list button { gap: 7px; }
.erp-form-dialog .dialog-tabs .v39-tabs-list button .aj-icon svg { width: 15px; height: 15px; }

/*  Icon chuni hui tab par matn ke sath rang badalta hai — `currentColor` se
    apne aap. Yahan sirf itna ke wo matn se halka rahe jab tab chuni hui na
    ho, warna do barabar wazan ki cheezein ek dusre se larti hain.           */
.erp-form-dialog .dialog-tabs .v39-tabs-list button:not(.active) .aj-icon { opacity: .7; }

/* ----------------------------------------------------------------------------
   IMAGE FIELD KI PANE WALI SHAKAL

   Zyadatar qawaid `.erp-photo-*` par pehle se likhe hain (oopar). Yahan sirf wo
   cheezein jo control ke apne bartao se aati hain.
   -------------------------------------------------------------------------- */

.erp-photo-pick input[type=file] {
    /*  `display: none` nahi — kuch browser chhupe hue input par click ka
        dialog nahi kholte. `position: absolute` + `opacity: 0` har jagah
        chalta hai, aur label par click seedha input tak pahunchta hai.      */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.erp-photo-pick { position: relative; overflow: hidden; }

/*  Ghalti ka jumla usi satar par jahan aam halat mein hadd likhi hoti hai —
    ek hi jagah, is liye pane ki lambai kabhi nahi badalti aur bagal wale
    khane us ke sath nahi hilte.                                             */
.erp-photo-hint.is-bad { color: var(--danger, #c33c32); opacity: 1; }

/* ============================================================================
   ACTION KA COLUMN CHIPKA HUA  —  aur qatar ka menu

   MASLA
   -----
   Master Setup ki kuch liston mein bara column hai (Warehouse par das se
   zyada). Grid daayen baayen khisakta hai, aur Edit/Delete us khiskaav ke
   sath nazar se bahar chale jate hain. Banda har qatar par pehle daayen
   scroll karta hai, phir button dabata hai, phir wapas baayen aata hai.

   HAL
   ---
   Data ka har column jaisa hai waisa hi — jitna screen par aata hai wo, aur
   jo scroll par aata hai wo bhi. Sirf ACTION ka column apni jagah chipka
   rehta hai (`position: sticky; right: 0`), to button hamesha wahin hota hai
   jahan aankh use dhoondti hai.

   TEEN CHEEZEIN JIN KE BAGHAIR YE TOOT-TA HAI
   -------------------------------------------
   1  BACKGROUND. Sticky khana shafaaf ho to us ke NEECHE se data guzarta hua
      nazar aata hai. Isi liye har halat ka apna rang: aam qatar, hover, aur
      band (row-off) — teenon.
   2  KINARE KI LAKEER. Bina us ke pata hi nahi chalta ke column chipka hua
      hai; wo bas data par charha hua lagta hai. Lakeer sirf tab dikhti hai
      jab grid WAQAI khiska ho (`.is-scrolled`) — bina khiske wo ek fazool
      lakeer hai.
   3  Z-INDEX. Sar (thead) pehle se `sticky top` hai. Dono ek doosre ko kaat
      te hain: action ka SAR dono taraf chipka hai, is liye us ka z-index sab
      se ooncha hona chahiye.
   ========================================================================== */

.erp-grid td.col-act,
.erp-grid th.col-act {
    position: sticky;
    right: 0;
    /*  Sar pehle se z-index 1 par hai; body ka chipka khana us se neeche
        rehna chahiye warna wo sar par charh jata hai.                       */
    z-index: 1;
    background: var(--panel, #fff);
}

/*  Action ka SAR dono taraf chipka hai — oopar bhi aur daayen bhi — is liye
    sab se ooncha.                                                            */
.erp-grid th.col-act { z-index: 3; }

/*  Hover ka rang chipke khane par bhi. Bina is ke qatar par hover karte hi
    aakhri khana safed reh jata hai aur qatar tooti hui lagti hai.           */
.erp-grid tbody tr:hover td.col-act {
    background: color-mix(in srgb, var(--primarySoft, rgba(52,116,209,.06)) 100%, var(--panel, #fff));
}

/*  Band record halka hota hai (`.row-off { opacity: .55 }`) — wo poori qatar
    par lagta hai, is liye chipke khane par alag se kuch nahi chahiye. Magar
    us ka background wohi rehna chahiye.                                     */
.erp-grid tbody tr.row-off td.col-act { background: var(--panel, #fff); }

/*  Kinare ki lakeer — SIRF khiskne par.

    `.is-scrolled` JavaScript lagata hai (portal.js), kyunke CSS ye nahi jaan
    sakti ke andar ka content khiska hua hai ya nahi. Bina khiske lakeer ek
    aisi hadd dikhati hai jahan koi hadd hai hi nahi.                        */
.erp-grid-wrap.is-scrolled .erp-grid td.col-act,
.erp-grid-wrap.is-scrolled .erp-grid th.col-act {
    /*  Do cheezein, aur dono zaroori hain. Andar ki 1px lakeer HADD hai — wo
        saaf kehti hai ke column yahan se alag hai. Bahar ki narm chhaya
        GEHRAI hai — wo kehti hai ke us ke NEECHE kuch hai. Sirf chhaya lagayi
        thi to naap kar dekha ke wo poore paimane par mushkil se nazar aati
        hai; sirf lakeer lagti to column ek dam kata hua lagta.               */
    box-shadow: inset 1px 0 0 var(--line, #dde4ea),
                -10px 0 12px -8px rgb(16 32 48 / .28);
}

/* ---------------------------------------------------------- qatar ka menu

   Do alag icon-button ki jagah EK. Abhi do kaam hain (Edit, Delete), magar
   aage aur aayenge — Duplicate, History, Restore. Har naye kaam par qatar
   mein ek aur 28px ka button jorna column ko chaura karta jata hai, aur
   chipke hue column mein wo chaurai seedha data ki jagah khati hai.

   Shakal wohi jo Export ke menu ki hai — do menu ek hi safhe par do tarah ke
   hon to banda har dafa parh kar samajhta hai ke ye kaun sa hai.            */

/*  Wrap ki apni koi shakal nahi — jagah dene ke liye hai. `.erp-colmenu-wrap`
    pehle se `position: relative; display: inline-flex` hai, aur wohi chahiye.
    Yahan sirf itna: khana chhota rahe aur button daayen kinare par.          */
.erp-rowmenu-wrap { justify-content: flex-end; gap: 2px; }

/*  Jis qatar ka menu khula hai, us ka khana baqi sab se oopar.

    Zaroori hai: har `td.col-act` sticky hai aur z-index 1 par — barabar
    z-index par jo DOM mein BAAD mein ho wo oopar chhapta hai, yani doosri
    qatar ka khana pehli qatar ke menu par charh jata. Menu khud fixed hota
    hai (portal.js), magar wo apne khane ke stacking context ke andar hi
    rehta hai.                                                                */
.erp-grid td.col-act.is-menu { z-index: 4; }

/*  Menu qatar ke bilkul neeche khulta hai, aur DAAYEN kinare se lagta hai —
    action column daayen hai, to baayen khulne par wo screen se bahar chala
    jata.                                                                     */
.erp-rowmenu {
    right: 0;
    left: auto;
    min-width: 232px;
    text-align: left;
}

/*  Mitane wala kaam laal — magar sirf hover par, taake wo menu kholte hi
    aankh na khinche. Menu khulne ka maqsad Edit hota hai, Delete nahi.      */
.erp-exportmenu-row.is-danger:hover {
    background: color-mix(in srgb, var(--danger, #c33c32) 10%, transparent);
}
.erp-exportmenu-row.is-danger:hover .erp-exportmenu-ico,
.erp-exportmenu-row.is-danger:hover b { color: var(--danger, #c33c32); }


/* ============================================================================
   ============================================================================
   TAREEKH KA PANEL — "is record par kya kya hua"

   Ek waqiya = ek satar ki patti + us ke neeche badle hue khane. Baayen ek
   bindi aur us se neeche jati lakeer — us se chaar waqiye ek SILSILA lagte
   hain, chaar alag dabbe nahi, aur tarteeb parhni nahi parti.

   Rang sab template ke tokens se: naya (ok), badla (primary), mita (danger),
   wapas (warn). Koi naya rang yahan nahi likha gaya — dono theme mein wahi
   chalta hai jo baqi portal par chalta hai.
   ============================================================================
   ============================================================================ */

.erp-history-dialog .aj-dialog-body { padding-top: 4px; }

.erp-hist {
    list-style: none;
    margin: 0;
    padding: 2px 0 0;
    display: flex;
    flex-direction: column;
}

.erp-hist-item {
    position: relative;
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 10px;
    padding: 0 0 14px;
}

/*  Silsile ki lakeer — bindi ke beech se neeche. Aakhri waqiye par nahi,
    warna wo hawa mein khatam hoti hai.                                       */
.erp-hist-item::before {
    content: "";
    position: absolute;
    left: 12.5px;
    top: 26px;
    bottom: 0;
    width: 1px;
    background: var(--line, #dde4ea);
}

.erp-hist-item:last-child::before { display: none; }

.erp-hist-dot {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface2, #f4f7f9);
    border: 1px solid var(--line, #dde4ea);
    color: var(--muted, #667883);
    position: relative;
    z-index: 1;
}

.erp-hist-dot .aj-icon svg { width: 13px; height: 13px; }

/*  Har qism ka apna rang — halka background, wohi rang ka icon. Bhari
    (filled) bindi yahan ghalat hoti: fehrist mein aath bindiyan hoti hain aur
    aath bhare hue gol nishan poori list ko shor bana dete hain.              */
.erp-hist-item.is-new  .erp-hist-dot {
    color: var(--success, #2e8b57);
    border-color: color-mix(in srgb, var(--success, #2e8b57) 35%, var(--line, #dde4ea));
    background: color-mix(in srgb, var(--success, #2e8b57) 10%, var(--panel, #fff));
}
.erp-hist-item.is-edit .erp-hist-dot {
    color: var(--primary, #2f5fb6);
    border-color: color-mix(in srgb, var(--primary, #2f5fb6) 35%, var(--line, #dde4ea));
    background: color-mix(in srgb, var(--primary, #2f5fb6) 10%, var(--panel, #fff));
}
.erp-hist-item.is-gone .erp-hist-dot {
    color: var(--danger, #c33c32);
    border-color: color-mix(in srgb, var(--danger, #c33c32) 35%, var(--line, #dde4ea));
    background: color-mix(in srgb, var(--danger, #c33c32) 10%, var(--panel, #fff));
}
.erp-hist-item.is-back .erp-hist-dot {
    color: var(--warning, #b8791f);
    border-color: color-mix(in srgb, var(--warning, #b8791f) 35%, var(--line, #dde4ea));
    background: color-mix(in srgb, var(--warning, #b8791f) 10%, var(--panel, #fff));
}

.erp-hist-body { min-width: 0; padding-top: 3px; }

.erp-hist-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
}

.erp-hist-head b { font-weight: 600; }

.erp-hist-who {
    color: var(--muted, #667883);
    /*  Naam se pehle "by" nahi likha — patti par pehle se "Updated" hai aur
        "Updated by Saleem" satar ko lamba karta hai bina kuch kahe.          */
}
.erp-hist-who::before { content: "· "; }

.erp-hist-when {
    color: var(--muted, #667883);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: help;
}

/*  Badle hue khane — teen khanon ki grid, taake naam aapas mein mile rahen
    aur aankh neeche seedhi chale. Teer beech mein, aur wo bhi apni jagah par
    khara rehta hai.                                                          */
.erp-hist-changes {
    margin-top: 5px;
    display: grid;
    /*  Purani qeemat ka khana `auto` hai, `1fr` nahi.

        1fr par wo bachi hui aadhi jagah le leta tha aur teer purani qeemat se
        bahut door ja parta — do qeematein ek doosre se juri hui lagni chahiyen,
        aur teer unhein jorta hai. `auto` se khana apne sab se lambe matn jitna
        hota hai (ek waqiye ke andar), yani satrein aapas mein mili bhi rehti
        hain aur teer paas bhi rehta hai.                                      */
    grid-template-columns: minmax(84px, auto) minmax(0, auto) 14px minmax(0, 1fr);
    gap: 3px 10px;
    align-items: baseline;
    font-size: 12px;
}

.erp-hist-change { display: contents; }

.erp-hist-col {
    color: var(--muted, #667883);
    font-size: 11px;
    white-space: nowrap;
}

.erp-hist-old,
.erp-hist-new { overflow-wrap: anywhere; }

/*  Purani qeemat halki aur kati hui NAHI — kaat dena us ko ghalti dikhata
    hai, jab ke wo us waqt sahi thi. Sirf halka rang kaafi hai.               */
.erp-hist-old { color: var(--muted, #667883); }
.erp-hist-new { color: var(--text, #17202a); font-weight: 500; }

.erp-hist-arrow { color: var(--line, #c9d4dc); display: inline-flex; }
.erp-hist-arrow .aj-icon svg { width: 12px; height: 12px; }

.erp-hist-none {
    margin: 4px 0 0;
    font-size: 11.5px;
    color: var(--muted, #667883);
}

.erp-hist-more { margin-top: 4px; font-size: 11.5px; }

.erp-hist-trim {
    margin: 2px 0 0;
    padding-top: 8px;
    border-top: 1px dashed var(--line, #dde4ea);
    font-size: 11.5px;
    color: var(--muted, #667883);
}

.erp-hist-skel { padding: 10px 0; }

/*  Tang screen par teen khane ek qatar mein nahi samate. Wahan naam apni
    satar par, aur qeematein us ke neeche — teer hata kar, kyunke wo do
    cheezon ke DARMIYAN ka nishan hai aur neeche upar wale ka nahi.           */
@media (max-width: 620px) {
    .erp-hist-changes { grid-template-columns: 1fr; gap: 1px 0; }
    .erp-hist-change { display: block; padding: 3px 0; }
    .erp-hist-arrow { display: none; }
    .erp-hist-old::after { content: " →"; color: var(--line, #c9d4dc); }
    .erp-hist-old, .erp-hist-new { display: inline; }
}

/*  Qatar ke menu ke sar mein record ka naam — aur wo lamba hota hai.

    `.erp-colmenu-head` flex hai, magar us ka beech wala hissa apne matn se
    chhota nahi hota (flex ka default `min-width: auto`), is liye lamba naam
    band karne wale × ke neeche se guzar jata tha. Screenshot mein wohi nazar
    aaya. Ab naam apni jagah mein kat jata hai aur × apni jagah par rehta hai. */
.erp-rowmenu .erp-colmenu-copy { min-width: 0; }
.erp-rowmenu .erp-colmenu-copy b,
.erp-rowmenu .erp-colmenu-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------ S.No ka khana

   Chhota, daayen se sidha, aur halka — ye data nahi hai, sirf ginti hai. Us
   ko baqi khanon jaisa gehra rang dena aankh ko wahan rok deta hai jahan
   parhne ko kuch hai hi nahi.

   tabular-nums zaroori hai: aam fonts mein 1 baqi hindson se tang hota hai,
   aur us ke baghair 9, 10, 11 ki qatar seedhi nazar nahi aati.               */
.erp-grid th.col-sno,
.erp-grid td.col-sno {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    padding-right: 10px;
    color: var(--muted, #667883);
    font-variant-numeric: tabular-nums;
}

/*  Sar par sirf "#" hai — us ko baqi unwanon jitni jagah dene ki zaroorat
    nahi, magar itni zaroor ke chaar hindse aa jayen.                        */
.erp-grid th.col-sno { min-width: 38px; }

/*  Chuni hui qatar par ginti bhi zinda ho jati hai — warna wo nishan aadha
    laga hua lagta hai.                                                       */
.erp-grid tbody tr.row-active td.col-sno { color: var(--text, #17202a); }

/* ============================================================================
   ============================================================================
   BADGE (.state) — NAAP TEMPLATE KI DEMO SE AAYI THI, GRID SE NAHI

   User ne grid ke Status column par nishan lagaya: "Active" ka matn baqi
   qatar se bahut chhota hai. Naap kar wajah mili, aur wo hairan karne wali
   thi:

       css/ajsoft-v52-reference.css  →  .state { font-size: 5.3px; font-weight: 750 }

   5.3px koi galti nahi — wo qaida template ki apni **chhoti dashboard ki
   jhalak** (.decision-row) ke liye likha gaya hai, jahan poora panel sukar
   kar dikhaya jata hai. Template ne khud usay ek jagah bara kiya hua hai
   (`.control-body .state { font-size: 9px }`), yani us ki apni jagah bhi wo
   naakafi thi.

   Hamara `AjBadge` usi class par khara hai aur 58 jagah lagta hai — grid ka
   Status, popup ke andar, screen ke oopar. Har jagah 5.3px.

   Ab naap wahan se aati hai jahan badge WAQAI lagta hai. Scope jaan boojh kar
   in chaar dabbon tak mehdood hai: template ki apni demo wali jhalak ko chhera
   nahi ja raha — us ka 5.3px wahan durust hai.

   Grid ka matn 12.5px hai (naapa gaya). Badge 11px rakha hai: thora chhota,
   kyunke wo matn nahi, nishan hai — magar itna ke parha ja sake. Wazan 750 se
   600: 750 par chhote harf aapas mein chipak jate hain.
   ============================================================================
   ============================================================================ */

.erp-screen .state,
.erp-grid .state,
.aj-dialog .state,
.erp-panel .state {
    height: 20px;
    padding: 0 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
    gap: 4px;
    white-space: nowrap;
}

/*  Icon wala badge — AjBadge us ko qubool karta hai. Bina naap diye wo svg
    apni default 24px le leta hai aur badge ko teen guna kar deta hai.       */
.erp-screen .state .aj-icon svg,
.erp-grid .state .aj-icon svg,
.aj-dialog .state .aj-icon svg,
.erp-panel .state .aj-icon svg {
    width: 12px;
    height: 12px;
}


/* ==========================================================================
   TEEN TASVEEREIN EK QATAR MEIN  —  .erp-imagerow

   Employee par ek nahi, TEEN tasveerein hain: shakal, aur CNIC ki dono
   taraf. Factory mein ye teenon baar baar chahiye hoti hain — gate pass,
   EOBI, SESSI ki registration — is liye ye "documents" ki fehrist mein
   nahi, profile kholte hi saamne hain.

   Bagal wali shakal (.erp-identity) yahan nahi chalti: us mein 168px ka ek
   khana hai, aur teen us mein daalne par har ek itni chhoti reh jati hai ke
   CNIC ka koi harf parha hi na jaye. Is liye ye teenon ek POORI QATAR mein
   hain, khanon se ooper.

   `minmax(0, 1fr)` — sirf `1fr` likhne par grid ka khana apne andar ki
   tasveer se chhota nahi ho sakta aur poora dabba bahar nikal jata hai.
   ========================================================================== */

.erp-imagerow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

/*  TASVEER KA DABBA IS QATAR MEIN CHAURA HAI, MURABBA NAHI

    `.erp-photo` ki apni naap 116x116 hai — ek murabba. Wo User Master ke
    liye theek hai: wahan CHEHRA hai, aur chehra murabbe mein poora aa jata
    hai.

    Yahan teen mein se do CNIC ki tasveerein hain. Shanakhti card chaura
    hota hai (kareeb 1.6:1); usay 116 ke murabbe mein daalne par ya to us
    ke kinare kat jate hain ya wo itna chhota reh jata hai ke us par likha
    ek harf bhi parha nahi jata — aur ye tasveerein rakhi hi is liye jati
    hain ke parhi jayen.

    Is liye is qatar ke andar dabba apne khane ki POORI chaurai leta hai
    aur oonchai `aspect-ratio` se aati hai. Teenon ki nisbat ek rakhi gayi
    hai warna qatar ooper neeche se tirchi lagti hai.                      */
.erp-imagerow .erp-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7;
    border-radius: 10px;
}

.erp-imagerow .erp-photo-pane { justify-items: stretch; gap: 6px; }
.erp-imagerow .erp-photo-pick,
.erp-imagerow .erp-photo-hint { justify-self: center; }

/*  Naam — chhota, oopar, aur SAB CAPS mein.

    Teen khali dabbe bilkul ek jaise lagte hain; farq sirf is satar se
    maloom hota hai. Is liye ye halki nahi hai — sar hai.                  */
.erp-photo-cap {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #6b7a89);
    justify-self: start;
}

/*  Tang screen par teen ki jagah nahi banti — do, phir ek.  */
@media (max-width: 900px) {
    .erp-imagerow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .erp-imagerow { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   CHILD GRID  —  .erp-child

   Parent ke popup ke andar ki fehrist: taleem, tajurba, ghar walay,
   dastavezat. Shakal jaan boojh kar bari grid se HALKI hai — ye poori screen
   nahi, ek tab ke andar ka hissa hai. Bhaari border aur bara padding yahan
   popup ko bhaari kar dete hain.

   Khane seedhe qatar mein likhe jate hain, is liye qatar ki oonchai input ke
   hisaab se hai, matn ke hisaab se nahi.
   ========================================================================== */

.erp-child {
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    overflow: hidden;
}

.erp-child-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--surface2);
}

.erp-child-head b { font-size: 13px; }
.erp-child-count { font-size: 11px; color: var(--muted); }

/*  Tang popup mein khane bahar nikal jate hain — mez khud sarakti hai,
    poora popup nahi.  */
.erp-child .erp-grid-wrap { overflow-x: auto; }

.erp-child-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.erp-child-grid th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    padding: 7px 10px;
    border-bottom: 1px solid var(--line);
}

.erp-child-grid td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.erp-child-grid tr:last-child td { border-bottom: 0; }

/*  Qatar ke andar ke khane: na label, na apna border — mez ki qatar hi
    unka khaka hai. Do border ek doosre ke ooper qatar ko shor bana dete
    hain.  */
.erp-child-grid .aj-field { margin: 0; }
.erp-child-grid .aj-field .aj-label { display: none; }
.erp-child-grid .aj-box { min-height: 30px; }
.erp-child-grid .aj-input,
.erp-child-grid .aj-input-dynamic { font-size: 12.5px; }

.erp-child-none td {
    color: var(--muted);
    text-align: center;
    padding: 20px 12px;
}

.erp-rowdel {
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
    padding: 3px;
    border-radius: 5px;
    display: grid;
    place-content: center;
}

.erp-rowdel:hover { color: var(--danger); background: var(--surface2); }

.erp-child-add { margin: 10px 12px 12px; }


/* ==========================================================================
   POORE SAFHE WALA FORM  —  .erp-formscreen

   Employee jaisi bari screen par form popup mein nahi khulta; grid chhup
   jata hai aur form wohi jagah le leta hai. Patti ki shakal list wali patti
   se MILTI JULTI rakhi gayi hai — wohi oonchai, wohi icon, wohi jagah — taake
   safha badalne par nazar na uchhle. Farq sirf teen cheezein hain: wapasi ka
   teer, record ka naam, aur daayen Save.
   ========================================================================== */

.erp-page-bar-form { gap: 4px; }

/*  Wapasi ka teer. Cancel se alag dikhta hai kyunke banda usay "wapas" samajhta
    hai — aur wapas jane ka raasta hamesha ooper baayen hota hai.  */
.erp-back {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: grid;
    place-content: center;
    cursor: pointer;
    margin-right: 6px;
    flex: none;
}

.erp-back:hover:not(:disabled) { background: var(--surface2); }
.erp-back:disabled { opacity: .5; cursor: default; }

.erp-page-bar-form .form-bar-hint { margin-right: 10px; }

/*  Panel do hisson mein bant-ta hai: tab ki patti (apni oonchai), aur us ke
    neeche khane (baqi sab). `min-height:0` ke baghair grid ka bachcha apne
    andar ke maal se chhota nahi ho sakta aur scroll SAFHE ka ban jata hai,
    panel ka nahi — us soorat mein tab ki patti bhi ooper chali jati hai.  */
/*  Yahan apna `display` nahi diya gaya — `.erp-screen-fill > .erp-panel`
    pehle se flex column deta hai aur wo rule zyada mazboot hai. Do alag
    dhanche likhne se sirf ye uljhan banti hai ke chal kaunsa raha hai.  */
.erp-formpanel { min-height: 0; }

/*  PATTI PANEL KE KINARE PAR — CHAARON TARAF KA GAP KHATAM

    Patti ab `.erp-formbody` ke bahar hai (ErpFormDialog.razor), is liye us
    dabbe ka 16/18/20 wala padding us par lagta hi nahi. Wo panel ke ek
    kinare se doosre tak jati hai.

    LAKEER KI JAGAH RANG
    --------------------
    Yahan pehle patti ke neeche 1px ki lakeer thi, aur khanon ke gird
    `<fieldset>` ka apna chaukhta — dabbe ke andar dabba. Dono hata diye.

    Un ki jagah rang: patti `--surface2` par, aur chuna hua tab panel ke
    apne safed par. Khane jab patti ke neeche se guzarte hain to kinara
    khud nazar aa jata hai — lakeer kheenche baghair.                      */
.erp-formpanel > .dialog-tabs {
    flex: none;
    border-bottom: 0;
    background: var(--surface2, #f8fbfc);
}
.erp-formpanel > .dialog-tabs .v39-tabs-list {
    border-bottom: 0;
    padding: 5px 8px 0;
    gap: 2px;
}

/*  Sarakti hui patti par kinaron ki jagah teeron ke liye chhori jati hai —
    wohi jagah yahan bhi chahiye, warna pehla aur aakhri tab teer ke neeche
    chhup jata hai.                                                         */
.erp-formpanel > .dialog-tabs.has-overflow .v39-tabs-list {
    padding-left: 34px;
    padding-right: 34px;
}

.erp-formpanel > .dialog-tabs .v39-tabs-list button {
    min-height: 34px;
    border-radius: 7px 7px 0 0;
}
.erp-formpanel > .dialog-tabs .v39-tabs-list button.active {
    background: var(--panel, #fff);
}

/*  FIELDSET KA APNA BORDER

    Ye CSS ka likha hua nahi tha — browser ka default hai: har `<fieldset>`
    par 2px ka groove. Popup wali shakal mein wo `.erp-form-dialog
    .dialog-form` par reset ho raha tha, poore safhe wale form par kahin
    nahi. Nateeja khanon ke gird ek poora chaukhta.

    Tasveer dekh kar main ise "kisi class ka border" keh raha tha. Naap ne
    jawab diya: `bd=2px/2px/2px/2px` — fieldset ka default. Rang aur kinare
    ke sawal andaze se nahi, naap se hi tay hote hain.                     */
.erp-formpanel .dialog-form {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.erp-formbody { padding: 16px 18px 20px; overflow: auto; min-height: 0; }

/*  Popup ke andar wohi dabba bina padding ke rehta hai — wahan padding
    AjDialog ka apna hai, aur do dafa lag kar form ko andar dhakel deti hai. */
.aj-dialog .erp-formbody { padding: 0; overflow: visible; }

/* ==========================================================================
   GRID MEIN TASVEER  —  .erp-avatar

   Tasveer list ke JSON mein NAHI aati. Har qatar ka VARBINARY list ke saath
   bhejna ek safhe par pachees tasveerein JSON mein daal deta hai — aur base64
   asli se ek tihai bara hota hai. `<img>` se browser wo khud laata hai, cache
   karta hai, aur sirf un ka jo nazar aa rahe hain.

   Jis ki tasveer na ho, us ke naam ke do harf. Khali gol dabba us se bura
   hai: qatar wahan tooti hui lagti hai.
   ========================================================================== */

.erp-grid td.col-photo, .erp-grid th.col-photo { width: 46px; padding-right: 0; }

.erp-avatar {
    display: grid;
    place-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface2);
    border: 1px solid var(--line);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--muted);
    flex: none;
}

.erp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ==========================================================================
   GINTI KE KHANE  —  .erp-stats

   Teen chhote khane jo safhe ka jawab ek nazar mein dete hain. Menu Rights
   par ye is liye lage ke purani shakal mein banda poora naqsha khol kar bhi
   ye nahi keh sakta tha ke "is role ko kul kitna diya hua hai".
   ========================================================================== */

.erp-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 12px;
}

@media (max-width: 900px) {
    .erp-stats { grid-template-columns: minmax(0, 1fr); }
}

.erp-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    padding: 12px 14px;
}

.erp-stat-copy { display: grid; gap: 1px; min-width: 0; }

.erp-stat-label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}

.erp-stat-value { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.erp-stat-hint { font-size: 11px; color: var(--muted); }

.erp-stat-ico {
    margin-left: auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-content: center;
    background: var(--surface2);
    color: var(--muted);
    flex: none;
}

.erp-stat.ok .erp-stat-ico {
    background: color-mix(in srgb, var(--success) 14%, transparent);
    color: var(--success);
}

/* ==========================================================================
   RIGHTS  —  baayen area, daayen usi area ka naqsha

   Poora naqsha 1,133 screens × 17 action = lagbhag unnees hazaar khane hai.
   Wo na browser mein khulta hai na koi banda usay parh kar samajh sakta hai.

   Pehle yahan "area chuno" ka ek khali safha aata tha. Ab area ka CHUNNA hi
   baayen sutoon mein hai — wo qadam ghayab nahi hua, kaam ka hissa ban gaya,
   aur saath mein ginti bhi de raha hai.
   ========================================================================== */

.erp-rights-split {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    min-height: 0;
}

/*  Tang screen par sutoon ke bajaye ek ke neeche doosra. 264px kaat dene par
    naqshe ke khane itne tang reh jate hain ke unwan parha hi nahi jata.  */
@media (max-width: 1000px) {
    .erp-rights-split { grid-template-columns: minmax(0, 1fr); }
    .erp-arealist { border-right: 0; border-bottom: 1px solid var(--line); max-height: 220px; }
}

.erp-arealist {
    border-right: 1px solid var(--line);
    background: var(--surface2);
    overflow: auto;
    min-height: 0;
}

.erp-area-head {
    display: flex;
    justify-content: space-between;
    padding: 9px 12px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: var(--surface2);
}

.erp-arearow {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
    padding: 9px 12px 10px;
    cursor: pointer;
}

.erp-arearow:hover { background: var(--surface); }

.erp-arearow.on {
    background: var(--surface);
    box-shadow: inset 3px 0 0 var(--primary);
}

.erp-area-name { font-size: 12.5px; color: var(--text); }

.erp-area-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/*  Rang teen halaton ka: kuch nahi, kuch diya hua, poora diya hua. Sirf
    hindse se ye farq nazar aane mein waqt lagta hai.  */
.erp-area-count.is-some { color: var(--primary); }
.erp-area-count.is-full { color: var(--success); }

.erp-area-bar {
    grid-column: 1 / -1;
    height: 3px;
    border-radius: 2px;
    background: var(--line);
    overflow: hidden;
}

.erp-area-bar i { display: block; height: 100%; background: var(--primary); }

.erp-rights-main { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; }

.erp-rights-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
}

.erp-rights-head b { font-size: 13px; }

.erp-rights-note {
    margin: 0;
    padding: 9px 14px;
    font-size: 11.5px;
    color: var(--muted);
    border-top: 1px solid var(--line);
}

/*  Screen ka naam aur us ka code EK satar mein. Bina is ke lamba naam code
    ke NEECHE chala jata hai aur chhe qataron ka naqsha barah satar ka lagne
    lagta hai.  */
.matrix .matrix-row { white-space: nowrap; }
.matrix .matrix-row code {
    font-size: 11px;
    color: var(--muted);
    margin-right: 8px;
    font-variant-numeric: tabular-nums;
}

.erp-pick { display: flex; align-items: center; gap: 8px; min-width: 320px; }

.erp-pick-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
    flex: none;
}

.erp-pick .aj-field { margin: 0; flex: 1; }


/* ==========================================================================
   FORM KI PATTI PAR RECORD KA CODE  —  .erp-page-code

   Naam ke saath ek chhoti chip mein code. Lambi form par banda tab badalta
   rehta hai aur ye us ka wahid nishan hai ke wo abhi bhi USI record par hai.

   Poora raasta (`.erp-page-copy h1 .erp-page-code`) jaan boojh kar likha
   hai: `.erp-page-copy h1` do class ka rule hai aur akele `.erp-page-code`
   se ziyada mazboot — us soorat mein chip ka border aur size lagta hi
   nahi, aur code naam jaisa hi nazar aata hai.
   ========================================================================== */

.erp-page-copy h1 .erp-page-code {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 1px 6px;
    margin-left: 8px;
    vertical-align: 2px;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}

/*  Tab ka naam beech se nahi toot-ta. "Contact & Address" do satron mein
    bat kar patti ki oonchai badha deta hai aur icon naam se alag ho jata
    hai — poori patti bikhri hui lagti hai.  */
.dialog-tabs .v39-tabs-list button { white-space: nowrap; }


/* ==========================================================================
   FORM KE NAYE KHANE  —  radio, jore hue khane, segmented filter, reveal

   Sab ki shakal `aj-field` ke barabar rakhi gayi hai: wohi kam se kam
   oonchai (46px), wohi border, wohi label ka andaz. Warna ek qatar mein
   aadhe khane dabbe wale aur aadhe khule hue lagte hain, aur poora form
   bikhra hua nazar aata hai.
   ========================================================================== */

/* ---------------------------------------------------------------- radio */

.aj-radiogroup {
    display: grid;
    gap: 4px;
    align-content: start;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 5px 10px 7px;
    background: var(--surface);
    min-height: 46px;
    min-width: 0;
}

.aj-radiogroup-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--primary);
}

.aj-radiogroup-label:empty { display: none; }
.aj-radiogroup-items { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.aj-radiogroup.is-disabled { opacity: .55; }

.aj-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    cursor: pointer;
}

.aj-radio input { accent-color: var(--primary); width: 15px; height: 15px; }
.aj-radiogroup.is-disabled .aj-radio { cursor: default; }

/* --------------------------------------------------------------- switch

   Switch ko bhi khane wala dabba, warna wo qatar mein tairta hua lagta hai
   aur us ke aas paas ke khane us se ooncha nazar aate hain.                */

.ff-2 > .switchline,
.ff-3 > .switchline,
.aj-splitfield > .switchline {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
    padding: 0 10px;
    min-height: 46px;
    font-size: 12.5px;
    min-width: 0;
}

/* ------------------------------------------------- do khane, ek ki jagah

   Guardian: dropdown aur naam DONO ek khane ki chaurai mein. Un ka jorr
   matn se banta hai, dabbe se nahi — teenon (Guardian, naam, mother name)
   ek hi qatar par hain aur kinare ooper wali qatar par girte hain.

   `minmax(0, …)` laazmi hai: bina us ke grid ka khana apne andar ke input
   se chhota nahi ho sakta aur qatar bahar nikal jati hai.                  */

.aj-splitfield {
    display: grid;
    grid-template-columns: 122px minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
}

.aj-splitfield .aj-field { margin: 0; }

/* ------------------------------------------------------ segmented filter

   Ye khana ek FILTER hai: is par jo chuna jaye wo agle khane ki fehrist
   chhoti kar deta hai. Filter do shartein maangta hai — saare raaste ek
   saath nazar aayen, aur chunna ek click ho. Dropdown pehli shart tor deta
   hai, radio paanch option par bikhra lagta hai.

   Patti wohi hai jo grid ke Active/Inactive/Deleted par chal rahi hai, is
   liye banda us ka matlab pehle se jaanta hai.                             */

.aj-seg { display: grid; gap: 5px; min-width: 0; }

.aj-seg-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
}

.aj-seg-hint { font-size: 11px; color: var(--muted); }
.aj-seg .erp-states { align-self: start; }

/* ------------------------------------------------- shart par khulne wale

   Jo khane sirf ek soorat mein maani rakhte hain wo usi soorat mein khulte
   hain — "Replacement" par kis ki jagah, "Left" par tareekh aur wajah.

   Ye chhupana nahi, batana hai ke ab kya darkar hai. Aur khali khana sirf
   shor nahi: kabhi koi usay bhar bhi deta hai, aur database mein aisa banda
   mil jata hai jo naukri par bhi ho aur jis ki separation date bhi likhi
   ho.

   Khulne par apne dabbe mein — baayen ek lakeer ke saath — taake nazar aaye
   ke ye us EK faisle se bandhe hue hain.                                   */

.aj-reveal {
    border-left: 3px solid var(--primary);
    background: var(--surface2);
    border-radius: 0 8px 8px 0;
    padding: 12px 14px;
    margin-top: 2px;
    min-width: 0;
}

.aj-reveal-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--surface2);
}

.aj-reveal-hint b { color: var(--text); }

/* --------------------------------------------------- qatarein aur khaane */

.ff-rows { display: grid; gap: 12px; min-width: 0; }
.ff-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.span-2 { grid-column: span 2; min-width: 0; }
.span-3 { grid-column: 1 / -1; min-width: 0; }

/*  Poori qatar — chahe grid do khanon ki ho ya teen ki.  */
.span-all { grid-column: 1 / -1; min-width: 0; }

/*  Tang screen par teen ki qatar do ki, phir ek ki.  */
@media (max-width: 1100px) {
    .ff-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .span-2, .span-3 { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .ff-3 { grid-template-columns: minmax(0, 1fr); }
    .aj-splitfield { grid-template-columns: 110px minmax(0, 1fr); }
}


/* ==========================================================================
   TAB KI SARAKTI HUI PATTI  —  .erp-tabstrip

   Employee ke das tab ek qatar mein lagbhag 1400px maangte hain. Chhoti
   screen par teen raaste the:

     1. DO SATRON MEIN LAPETNA — patti ki oonchai dugni ho jati hai, aur
        wohi jagah form se kat-ti hai. Phone par sab se mehnga sauda.

     2. "More" ka dropdown — jo tab us mein chale jayen wo NAZAR SE GHAYAB
        ho jate hain. Banda jaan hi nahi pata ke Documents naam ka tab bhi
        hai. Chhupana masla hal nahi karta, taal deta hai.

     3. SARAKTI HUI PATTI — sab tab maujood, ek satar, har ek ek click par.

   Teesra chuna. Magar sirf sarakna kaafi nahi: banda ko NAZAR AANA chahiye
   ke aur bhi kuch hai. Is liye kinare par dhundlapan aur do teer — aur wo
   dono SIRF us waqt jab patti waqai sarakti ho (`has-overflow`, jo portal.js
   lagata hai). Poori chaurai par patti bilkul waisi hi rehti hai.
   ========================================================================== */

.erp-tabstrip { position: relative; }

.erp-tabstrip .v39-tabs-list {
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;              /* patti par apni scrollbar nahi */
}

.erp-tabstrip .v39-tabs-list::-webkit-scrollbar { display: none; }

/*  Teer ke liye jagah — sirf jab wo maujood hon.  */
.erp-tabstrip.has-overflow .v39-tabs-list { padding: 0 34px; }

.erp-tabstrip.has-overflow::before,
.erp-tabstrip.has-overflow::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 1px;
    width: 46px;
    pointer-events: none;
    z-index: 2;
    transition: opacity .15s;
}

.erp-tabstrip.has-overflow::before {
    left: 0;
    background: linear-gradient(90deg, var(--surface) 30%, transparent);
}

.erp-tabstrip.has-overflow::after {
    right: 0;
    background: linear-gradient(270deg, var(--surface) 30%, transparent);
}

/*  Kinare par pahunch kar us taraf ka dhundlapan aur teer chale jate hain —
    warna wo jhoot bolte hain ke aur bhi kuch hai.  */
.erp-tabstrip.at-start::before,
.erp-tabstrip.at-end::after { opacity: 0; }

.erp-tabstrip.at-start > .erp-tabstrip-arrow.is-prev,
.erp-tabstrip.at-end > .erp-tabstrip-arrow.is-next { opacity: 0; pointer-events: none; }

/*  POORA RAASTA jaan boojh kar. Reference CSS mein `.v39-tabs button` par
    `position: relative` likha hai — do hisson ka rule, aur wo akele
    `.erp-tabstrip-arrow` se ziyada mazboot hai. Us ke baghair teer
    `position: absolute` lete hi nahi aur dono patti ke aakhir mein ek doosre
    par charh kar bethte hain.                                              */
.erp-tabstrip > .erp-tabstrip-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 26px;
    height: 26px;
    min-height: 26px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    display: grid;
    place-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgb(16 32 48 / .12);
    transition: opacity .15s;
}

.erp-tabstrip > .erp-tabstrip-arrow.is-prev { left: 4px; }
.erp-tabstrip > .erp-tabstrip-arrow.is-next { right: 4px; }
.erp-tabstrip > .erp-tabstrip-arrow:hover { background: var(--surface2); }

/*  Teer sirf overflow par nazar aate hain.  */
.erp-tabstrip:not(.has-overflow) > .erp-tabstrip-arrow { display: none; }


/* ==========================================================================
   FORM KA SCROLL — TAB KE ANDAR, SAFHE KA NAHI

   List par ye silsila pehle se hai: page-bar aur toolbar apni jagah thehre
   rehte hain aur sirf grid sarakta hai. Form ko wohi chahiye — patti aur
   unwan thehre, sirf khanon wala hissa scroll ho.
   ========================================================================== */

/*  Ye qaida yahan barson se tha aur KABHI nahi chala: patti us waqt
    `.erp-formbody` ke andar thi, panel ki seedhi aulaad nahi. Ab dhancha
    us se mel khata hai. Sabaq: qaida likha hona us baat ka saboot nahi ke
    wo lag bhi raha hai.                                                    */
.erp-screen-fill > .erp-panel > .dialog-tabs { flex: none; }

.erp-screen-fill > .erp-panel > .erp-formbody {
    flex: 1 1 auto;
    min-height: 0;         /* flex child ka default min-height:auto scroll khatam kar deta hai */
    overflow: auto;
}

/*  CHHOTI SCREEN PAR BHI ANDAR HI SCROLL

    portal.css mein 760px se neeche poora dhancha `height: auto` ho jata hai,
    yani safha khud scroll karta hai. Wo faisla GRID ke liye liya gaya tha
    (warna grid ek tang khirki ban jati hai) aur wahan durust hai.

    Form par ulta chahiye: tab ki patti aur unwan nazar mein rahen, aur
    khane un ke neeche se guzrein. Is liye form wali screen us chhoot se
    bahar hai.

    Ek hifazat ke saath: khanon wale hisse ki kam se kam oonchai. Bahut
    chhote phone par landscape mein wo warna itni patli patti ban jata ke ek
    khana bhi poora na dikhe — sirf US soorat mein safha scroll karta hai.  */
@media (max-width: 760px) {
    .erp-screen-fill.erp-formscreen { height: 100%; }
    .erp-screen-fill.erp-formscreen > .erp-panel { min-height: 0; }
    .erp-screen-fill.erp-formscreen > .erp-panel > .erp-formbody { min-height: 320px; }
}


/* ==========================================================================
   TRANSACTION KI SHAKAL  —  .erp-doc*

   Master aur transaction mein farq shakal ka nahi, MALIK ka hai. Master par
   har khana bande ka hai. Transaction par khane teen malikon mein bant jate
   hain:

     1. banda likhta hai   — kis ki chhutti, kab se kab tak, kyun
     2. system ginta hai   — kitne din, kitne paid, pehle kitna balance
     3. amal likhta hai    — kis ne manzoor kiya, kab, ya kyun radd

   Teenon ko ek jaisa textbox bana dena — jo aam CRUD karta hai — record ko
   bemaani kar deta hai: clerk "Approved by" mein apna naam likh sakta hai
   aur "Total days" mein jo ji chahe. Us ke baad koi nahi keh sakta ke
   chhutti waqai kis ne manzoor ki.

   Is liye teenon ki shakal alag hai.
   ========================================================================== */

/*  1. DOCUMENT KI SATAR — number aur halat, unwan ke neeche  */
.erp-docline { display: flex; align-items: center; gap: 8px; }

.erp-docno {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--text, #16202a);
}

/*  Number abhi mila hi nahi — is liye number jaisa nazar bhi nahi aana
    chahiye. Monospace hata kar italic: aankh ko foran maloom ho jata hai
    ke ye qeemat nahi, bayan hai.                                          */
.erp-docno.is-auto {
    font-family: inherit;
    font-weight: 500;
    font-style: italic;
    color: var(--muted, #6b7a89);
}

/*  2. AMAL KE BUTTON — Save se alag, aur us se pehle  */
.erp-docactions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-right: 10px;
    margin-right: 4px;
    border-right: 1px solid var(--line, #dde4ea);
}

/*  3. AMAL KA NISHAN — kis ne kiya aur kab  */
.erp-docstamp {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--successSoft, #e7f5ee);
    color: var(--success, #1c8b58);
    font-size: 11.5px;
}
.erp-docstamp b { font-weight: 700; }
.erp-docstamp.is-bad {
    background: var(--dangerSoft, #fdecea);
    color: var(--danger, #c33c32);
}
.erp-docstamp .aj-icon svg { width: 14px; height: 14px; }

/*  4. GINE HUE KHANE — parhne ke liye, likhne ke liye nahi

    Border jaan boojh kar NAHI. Border ka matlab "yahan likho" hai; ye khane
    likhne ke liye hain hi nahi. Halka background aur chhota unwan wo farq
    bina kisi tehreer ke bata dete hain — aur `readonly` textbox se behtar,
    kyunke readonly textbox phir bhi textbox lagta hai aur banda us par
    click karta reh jata hai.                                              */
.erp-doccalc-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 900px) {
    .erp-doccalc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .erp-doccalc-row { grid-template-columns: minmax(0, 1fr); }
}

.erp-doccalc {
    display: grid;
    gap: 2px;
    padding: 9px 11px;
    border-radius: 8px;
    background: var(--surface2, #f8fbfc);
    min-width: 0;
}
.erp-doccalc-lab {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--muted, #6b7a89);
}
.erp-doccalc b {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;   /* number qatar mein hilte nahi */
}
.erp-doccalc small { font-size: 10px; color: var(--muted, #6b7a89); opacity: .8; }

/* ==========================================================================
   ANDHERE MEIN BHARA HUA BUTTON

   Template ka andhera qaida har `.btn` ko ek chapti gehri satah de deta hai:

       body.dark[data-surface="fluent"] .btn { background:#182329 !important }

   Wo qaida toolbar ke saade button ke liye likha gaya tha. Magar hamare
   asli kaam wale button do naam ek saath rakhte hain — `btn aj-button
   primary` — aur `.aj-button.primary` ki bharai (`!important` ke bawajood)
   kam khaas hai, is liye andhere mein wo HAR JAGAH khali ho jate hai:
   list ka "New", MenuMaster ka "Save", login ka "Sign in".

   Yani andhere mein safhe ka sab se ahem button sab se kam nazar aata tha.

   Yahan wohi rang wapas lagaya jata hai, us se ziyada khaas nishani ke
   saath. `subtle` ko haath nahi lagaya — us ka chapta rehna theek hai.
   ========================================================================== */
body.dark[data-surface="fluent"] .btn.aj-button.primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    /*  Yahan pehle `#fff` likha tha — aur wohi is qaide ko sab se khaas
        (0,4,3) hone ki wajah se har us jaanch se bacha le jata tha jo
        neeche `--on-primary` par lagi hai. Andhere mein primary halka
        hota hai, is liye safed matn 2.46:1 par reh jata tha.  */
    color: var(--on-primary, #fff) !important;
}

body.dark[data-surface="fluent"] .btn.aj-button.danger {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    color: var(--on-danger, #fff) !important;
}

/* ==========================================================================
   MATN KA RANG PAS-MANZAR SE — NAAM SE NAHI

   Template har jagah `color: #fff` likhti hai jahan pas-manzar `--primary`
   ho. Wo tab tak theek hai jab tak primary GEHRA ho.

   Magar kuch theme ka primary halka hai — PowerBI ka sunehra (#e0b300),
   Amber, Rose — aur ANDHERE mein to CSS har theme ka primary JAAN BOOJH
   KAR halka karti hai, warna wo gehre pas-manzar par doob jata:

       body.dark[data-theme="amber"] { --primary: #e0a33c }

   Dono soorton mein safed matn halke rang par reh jata hai. Naapa gaya to
   2.24:1 se 2.52:1 nikla — parhne ki hadd (3:1) se neeche. Yehi wo "theme
   badlo to template theek nahi chalta" ka sab se bara hissa tha.

   Rang ka faisla CSS nahi kar sakti — us ke paas roshni naapne ka koi
   tareeqa nahi. Is liye `theme-tone.js` primary ki asli roshni naapta hai
   aur `--on-primary` par safed ya gehra rakh deta hai. CSS sirf usay
   parhti hai — ek hi jagah, har button ke liye.

   `body` selector mein is liye ke template ke apne qaide `!important` par
   hain; un se jeetne ke liye ek darja ziyada khaas hona zaroori tha.
   ========================================================================== */
/*  `body[data-surface]` chahiye, sirf `body` nahi. Template ka sab se
    khaas qaida ye hai —

        body[data-surface="fluent"] .btn.primary { color: #fff !important }

    — 0,3,1 ka darja. `body .btn.primary` (0,2,1) us se haar jata hai. Ye
    naap se pakra: theme powerbi par button ka rang phir bhi safed nikla,
    jabke `--on-primary` theek `#10202e` par tha. Attribute selector se
    darja barabar hota hai, aur baad mein aane ki wajah se ye jeet jata
    hai.  */
body[data-surface] .aj-button.primary,
body[data-surface] .btn.primary,
body[data-surface] .aj-button.primary .aj-button-label,
body[data-surface] .btn.primary .aj-button-label,
body:not([data-surface]) .aj-button.primary,
body:not([data-surface]) .btn.primary { color: var(--on-primary, #fff) !important; }

body[data-surface] .aj-button.danger,
body[data-surface] .btn.danger,
body[data-surface] .aj-button.danger .aj-button-label,
body[data-surface] .btn.danger .aj-button-label,
body:not([data-surface]) .aj-button.danger,
body:not([data-surface]) .btn.danger { color: var(--on-danger, #fff) !important; }

body[data-surface] .aj-button.accent,
body[data-surface] .btn.accent,
body:not([data-surface]) .aj-button.accent,
body:not([data-surface]) .btn.accent { color: var(--on-accent, #fff) !important; }

/*  Login ka chakkar bhi wohi rang le — warna halke button par safed
    chakkar ghayab ho jata hai, bilkul jaise safed matn.  */
.erp-login-form .btn .aj-spinner {
    border-color: color-mix(in srgb, var(--on-primary, #fff) 35%, transparent);
    border-top-color: var(--on-primary, #fff);
}

/*  UNWAN PAS-MANZAR PAR NAHI, SURFACE PAR BETHTA HAI

    `.aj-label` aur us jaisi tehreer `--primary` par likhi jati hai — aur
    wo safed (ya andhere mein gehre) surface par hoti hai, kisi bhare hue
    button par nahi. Gehre primary par ye theek hai; magar PowerBI ka
    sunehra #e0b300 safed par 1.98:1 deta hai — parhne ki hadd se aadha.

    `--primary-ink` wohi rang hai, magar itna gehra (ya andhere mein itna
    halka) ke wo 4.5:1 par pohanche. Hisaab theme-tone.js mein hai.

    Note: ye SIRF matn ke liye hai. Border, bharai aur nishan `--primary`
    par hi rehte hain — un ka masla parhna nahi, dikhna hai.  */
body[data-surface] .aj-field.floating .aj-label,
body[data-surface] .aj-field:focus-within .aj-label,
body:not([data-surface]) .aj-field.floating .aj-label {
    /*  `!important` khushi se nahi — template ke apne qaide bhi `!important`
        par hain (`.aj-field.floating .aj-label { color: var(--primary)
        !important }`). Un se baat karne ka aur koi tareeqa nahi tha.  */
    color: var(--primary-ink, var(--primary)) !important;
}

/*  Ghalti wala unwan phir bhi laal — wo apni jagah theek hai.  */
body[data-surface] .aj-field.aj-error .aj-label { color: var(--danger) !important; }


/*  MENU MASTER KE CHHE SWITCH

    Chhe soortein ek doosre se chipki hui nahi rehni chahiyen — har ek apna
    faisla hai ("sidebar mein dikhe?", "rights lag sakte hain?"). Ek qatar
    mein do, taake fehrist lambi na ho aur har satar apni jagah rakhe.  */
.erp-menu-flags {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px 28px;
    padding-top: 4px;
}

/*  Urdu ka naam daayen se baayen. Sirf is khane par — poora form palatna
    ghalat hota, baqi sab English hai.  */
.aj-rtl .aj-input { direction: rtl; text-align: right; }


/* ==========================================================================
   KHALI HAAL, HISSE KA CARD, AUR SECURITY SCREENS KI PATTI
   ========================================================================== */

/*  KHALI HAAL — `ErpEmpty`

    Ye "kuch nahi mila" ka jawab hai. Bara nishan, saaf jumla, aur agli baat
    ke liye ek satar. Rang `--muted` par: khali hona bura nahi hai, sirf
    khali hai — usay laal ya bhaari banane ki koi wajah nahi.  */
.erp-empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    /*  Naapa gaya: 38/42 ke hashiye se ye dabba 199px ka ho jata tha —
        "kuch nahi hai" kehne ke liye ye bahut jagah hai, aur us se neeche
        wala hissa safhe se bahar chala jata hai. 26/28 par ye ~150px ka
        rehta hai: nazar aata hai, magar safha nahi kha jata.  */
    padding: 26px 24px 28px;
    text-align: center;
    color: var(--muted, #6b7a89);
}
.erp-empty-ico {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 2px;
    border-radius: 11px;
    background: var(--surface2, #f2f5f8);
    color: var(--muted, #6b7a89);
    opacity: .85;
}
.erp-empty-ico .aj-icon svg,
.erp-empty-ico svg { width: 20px; height: 20px; }
.erp-empty-title { font-size: 13.5px; font-weight: 650; color: var(--text, #0f1b2a); }
.erp-empty-hint  { font-size: 12px; line-height: 1.6; max-width: 46ch; }

/*  HISSE KA CARD

    Pehle in screens par `<h3>` seedha safhe par tairta tha aur us ke neeche
    table apne alag dabbe mein hoti thi — do alag cheezein, jabke wo ek hi
    hissa hain. Ab unwan aur maal ek hi card ke andar hain, wohi `panel-head`
    jo poore portal mein hai.  */
.erp-sec-card { margin: 0 0 18px; overflow: hidden; }
.erp-sec-card > .panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line, #e3e8ee);
    background: var(--surface2, #f8fbfc);
}
.erp-sec-card > .panel-head b { font-size: 13px; letter-spacing: -.01em; }
.panel-head-note {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--muted, #6b7a89);
    font-variant-numeric: tabular-nums;
}
.erp-sec-card > .erp-grid-wrap { border: 0; border-radius: 0; }

/*  Patti — window ka dropdown aur "failures only" ka switch.
    Dropdown ko apni chaurai chahiye; switch us ke saath satar mein.  */
.erp-sec-toolbar {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line, #e3e8ee);
}
.erp-sec-window { width: 200px; }
.erp-sec-search { width: 320px; max-width: 100%; }

/*  Ginti ka khana bura haal mein — laal nahi, sirf khabardar. Laal galti
    ke liye hai; band account ya nakaam koshish galti nahi, tawajjah ki
    cheez hai.  */
.erp-stat.bad .erp-stat-ico {
    background: color-mix(in srgb, var(--warning, #d98324) 16%, transparent);
    color: var(--warning, #d98324);
}
.erp-stat.bad .erp-stat-value { color: var(--warning, #d98324); }