@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --black: #000;
    --sand: #F0F0EB;
    --sand-dark: #E2E2DA;
    --white: #fff;
    --off: #F7F7F4;
    --border: #DDDDD8;
    --text: #737373;
    --green: #1A7A4F;
    --red: #C41230;
}

body {
    font-family: 'Manrope', sans-serif;
    color: var(--text);
    background: var(--off);
    min-height: 100vh;
}

.topbar {
    background: var(--black);
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
}

.brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
}

.brand img {
    height: 32px;
    width: auto;
    display: block;
}

@media (max-width: 560px) {
    .brand img {
        height: 26px;
    }
}

.top-phone {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--sand);
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
}

.hero {
    background: #f1f1f1;
    padding: 52px 40px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
}

.hero-tag {
    display: inline-block;
    background: var(--black);
    color: #fff;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 20px;
    margin-bottom: 14px;
    position: relative;
}

.hero h1 {
    font-size: 34px;
    font-weight: 800;
    color: var(--black);
    margin: 0 0 12px;
    line-height: 1.2;
    position: relative;
}

.hero p {
    font-size: 15px;
    color: var(--text);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.65;
    position: relative;
}

.main {
    max-width: 860px;
    margin: 0 auto;
    padding: 52px 40px 80px;
}

.card {
    background: var(--white);
    border-radius: 16px;
    border: 1px solid var(--border);
    padding: 36px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}

.card h2 {
    font-size: 21px;
    font-weight: 800;
    color: var(--black);
    margin: 0 0 7px;
}

.card .sub {
    font-size: 13px;
    color: var(--text);
    margin: 0 0 26px;
    line-height: 1.6;
}

.form-row {
    margin-bottom: 14px;
}

.phone-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.phone-input-wrap {
    flex: 1;
}

.flag-box {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--white);
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
    white-space: nowrap;
    height: 50px;
    flex-shrink: 0;
}

input[type=text],
input[type=email],
input[type=tel],
select {
    width: 100%;
    padding: 13px 16px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    font-size: 14px;
    color: var(--black);
    outline: none;
    font-family: 'Manrope', sans-serif;
    transition: border-color .2s, box-shadow .2s;
    background: var(--white);
}

input:focus,
select:focus {
    border-color: var(--black);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .07);
}

.err-msg {
    font-size: 11px;
    color: var(--red);
    margin-top: 4px;
    display: block;
}

.err-msg.hidden {
    display: none;
}

.agree-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 20px 0;
}

.cbox {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 2px solid var(--border);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 1px;
    transition: all .2s;
}

.cbox.chk {
    background: var(--black);
    border-color: var(--black);
}

.agree-text {
    font-size: 12px;
    color: var(--text);
    line-height: 1.7;
}

.agree-text a {
    color: var(--black);
    font-weight: 600;
    text-decoration: underline;
}

.primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--black);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 15px 38px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    transition: all .2s;
}

.primary-btn:hover {
    background: #333;
    transform: translateY(-1px);
}

/* "Show Cost" while the estimate is being generated. */
.primary-btn.is-loading {
    background: var(--black);
    cursor: progress;
    transform: none;
    opacity: .9;
}

.btn-spinner {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    animation: btnSpin .7s linear infinite;
}

@keyframes btnSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .btn-spinner {
        animation-duration: 2s;
    }
}

.sbtn {
    padding: 13px 28px;
    border-radius: 9px;
    border: none;
    background: var(--black);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    margin-top: 18px;
    transition: all .2s;
}

.sbtn:hover {
    background: #333;
    transform: translateY(-1px);
}

.sbtn:disabled {
    opacity: .32;
    cursor: default;
    transform: none;
}

.skipbtn {
    padding: 13px 20px;
    border-radius: 9px;
    border: 1.5px solid var(--border);
    background: var(--sand);
    color: var(--black);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    margin-top: 18px;
    margin-left: 10px;
    transition: all .2s;
}

.skipbtn:hover {
    background: var(--sand-dark);
}

.acc {
    background: var(--white);
    border-radius: 14px;
    border: 1px solid var(--border);
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
    transition: all .25s;
}

.acc.open {
    border-color: rgba(0, 0, 0, .3);
    box-shadow: 0 5px 20px rgba(0, 0, 0, .09);
}

.acc.locked {
    opacity: .4;
    pointer-events: none;
}

.acc-hdr {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    user-select: none;
    transition: background .2s;
}

.acc-hdr-text {
    flex: 1;
}

.acc.open .acc-hdr {
    background: rgba(0, 0, 0, .018);
    border-bottom-color: var(--border);
}

.sbadge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
    background: var(--sand);
    color: var(--text);
    transition: all .25s;
    border: 2px solid transparent;
}

.acc.open:not(.done) .sbadge {
    color: var(--black);
    border-color: var(--black);
}

.acc.done .sbadge {
    background: var(--black);
    color: #fff;
    border-color: var(--black);
}

.acc-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.acc.open .acc-title,
.acc.done .acc-title {
    color: var(--black);
}

.acc-sub {
    font-size: 11px;
    color: var(--text);
    margin-top: 2px;
}

.chev {
    color: var(--text);
    transition: transform .3s;
    margin-left: auto;
    flex-shrink: 0;
}

.acc.open .chev {
    transform: rotate(180deg);
    color: var(--black);
}

.acc-body {
    padding: 24px;
    display: none;
}

.acc.open .acc-body {
    display: block;
}

.og3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.og2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.og1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 18px;
}

.ocard {
    padding: 20px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--white);
    cursor: pointer;
    transition: all .2s;
    text-align: left;
    position: relative;
    user-select: none;
}

.ocard:hover {
    border-color: rgba(0, 0, 0, .3);
    background: var(--sand);
}

.ocard.sel {
    border: 2px solid var(--black);
    background: var(--sand);
}

.oicon {
    font-size: 28px;
    display: block;
    margin-bottom: 10px;
}

.oicon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}

.otitle {
    font-size: 14px;
    font-weight: 700;
    color: var(--black);
}

.osub {
    font-size: 10px;
    font-weight: 600;
    color: var(--text);
    margin: 3px 0 6px;
}

/* ---- Step 2: Emirate picker ----------------------------------------------
   Text only, no logos. All seven emirates are listed; the ones with nothing
   set up yet are shown dashed and are not selectable.                       */
.stgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    /* Keeps every row the same height when a long name such as
       "Umm Al Quwain" wraps onto a second line. */
    grid-auto-rows: 1fr;
    gap: 10px;
    margin-bottom: 18px;
}

.stcard {
    position: relative;
    min-height: 60px;
    padding: 13px 42px 13px 15px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: border-color .2s, background .2s;
}

.stcard:hover {
    border-color: rgba(0, 0, 0, .3);
    background: var(--sand);
}

.stcard.sel {
    border-width: 2px;
    border-color: var(--black);
    background: var(--sand);
    padding: 12.5px 41.5px 12.5px 14.5px;
}

.stname {
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
    line-height: 1.25;
}

.stmeta {
    font-size: 10px;
    font-weight: 600;
    color: var(--text);
    margin-top: 3px;
}

.stchk {
    position: absolute;
    top: 50%;
    right: 13px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stcard.empty {
    border-style: dashed;
    background: var(--off);
    cursor: not-allowed;
}

.stcard.empty:hover {
    border-color: var(--border);
    background: var(--off);
}

.stcard.empty .stname {
    color: var(--text);
}

@media (max-width: 560px) {
    .stgrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

.ocard.sel .osub {
    color: var(--black);
}

.odesc {
    font-size: 11px;
    color: var(--text);
    line-height: 1.5;
    margin: 0;
}

.pts {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}

.pts li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--text);
    padding: 3px 0;
}

.pdot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--black);
    flex-shrink: 0;
}

.ochk {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Qeemat aakhir mein khulti hai — dekhein `.adprice` ke paas ka note. */
.oprice {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    font-size: 0;
    font-weight: 700;
    color: var(--text);
    user-select: none;
    pointer-events: none;
}

.oprice::after {
    content: "Price with your details";
    padding: 3px 10px 3px 22px;
    border: 1px solid var(--sand-dark);
    border-radius: 999px;
    background: var(--sand) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7a72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10.5' width='16' height='10.5' rx='2'/><path d='M8 10.5V7.4a4 4 0 0 1 8 0v3.1'/></svg>") no-repeat 7px center / 9px 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--text);
    white-space: nowrap;
}

.ocard.sel .oprice::after {
    background-color: var(--white);
    border-color: var(--border);
}

/* Muft activity par chhupane ko kuch hai hi nahi. */
.oprice.free {
    font-size: 12px;
    color: var(--green);
}

.oprice.free::after { content: none; }

.prices-revealed .oprice { font-size: 12px; }

.prices-revealed .oprice::after { content: none; }

.sel-counter {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sel-counter span {
    background: var(--sand);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3px 12px;
    font-weight: 700;
    color: var(--black);
}

.vgrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 6px;
}

.vopt {
    padding: 12px 6px;
    border-radius: 10px;
    text-align: center;
    border: 1.5px solid var(--border);
    background: var(--white);
    cursor: pointer;
    transition: all .2s;
    user-select: none;
    position: relative;
}

.vopt:hover {
    border-color: rgba(0, 0, 0, .3);
    background: var(--sand);
}

.vopt.sel {
    border: 2px solid var(--black);
    background: var(--sand);
}

.vlabel {
    font-size: 11px;
    font-weight: 700;
    color: var(--black);
}

.vprice {
    display: inline-flex;
    align-items: center;
    margin-top: 5px;
    font-size: 0;
    color: var(--text);
    user-select: none;
    pointer-events: none;
}

.vprice::after {
    content: "Price with your details";
    padding: 3px 9px 3px 21px;
    border: 1px solid var(--sand-dark);
    border-radius: 999px;
    background: var(--sand) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7a72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10.5' width='16' height='10.5' rx='2'/><path d='M8 10.5V7.4a4 4 0 0 1 8 0v3.1'/></svg>") no-repeat 7px center / 9px 9px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--text);
    white-space: nowrap;
}

.vopt.sel .vprice::after {
    background-color: var(--white);
    border-color: var(--border);
}

.prices-revealed .vprice { font-size: 10px; }

.prices-revealed .vprice::after { content: none; }

.adcard {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--white);
    cursor: pointer;
    transition: all .2s;
    margin-bottom: 10px;
    user-select: none;
}

.adcard:hover {
    border-color: rgba(0, 0, 0, .28);
    background: rgba(240, 240, 235, .5);
}

.adcard.sel {
    border: 2px solid var(--black);
    background: var(--sand);
}

.adcard-body {
    flex: 1;
}

.adico {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--sand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.adcard.sel .adico {
    background: var(--sand-dark);
}

.adico img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.adtitle {
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
    margin: 0 0 3px;
}

.addesc {
    font-size: 11px;
    color: var(--text);
    line-height: 1.45;
}

/* Qeemat aakhir mein khulti hai. Pehle uske upar safed dabba aur
   "*************" chhapte the — wo toota hua matn lagta tha aur upar wali
   satar par bhi chadh jata tha. Ab asli matn font-size: 0 se chhupa rehta
   hai (JS usay waise hi likhta rehta hai) aur uski jagah ek saaf taala
   nazar aata hai, jo batata hai ke qeemat kab khulegi. */
.adprice {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    font-size: 0;
    font-weight: 700;
    color: var(--text);
    user-select: none;
    pointer-events: none;
}

.adprice::after {
    content: "Price with your details";
    padding: 3px 10px 3px 23px;
    border: 1px solid var(--sand-dark);
    border-radius: 999px;
    background: var(--sand) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7a72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10.5' width='16' height='10.5' rx='2'/><path d='M8 10.5V7.4a4 4 0 0 1 8 0v3.1'/></svg>") no-repeat 8px center / 10px 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--text);
    white-space: nowrap;
}

.adcard.sel .adprice::after {
    background-color: var(--white);
    border-color: var(--border);
}

/* Qeemat khulne par asli matn nazar aata hai aur taala hat jata hai. */
.prices-revealed .adprice {
    font-size: 11px;
}

.prices-revealed .adprice::after {
    content: none;
}

/* Jo services alag se quote hoti hain unki koi qeemat chhupani hi nahi — un
   ka note seedha nazar aata hai. */
.adprice.note {
    font-size: 11px;
    font-weight: 600;
    font-style: italic;
    color: var(--text);
}

.adprice.note::after {
    content: none;
}

/* Visa option chhup jata hai jab chuni hui jurisdiction ki visa cost 0 ho. */
.adcard.hidden {
    display: none;
}

/* Visa ki ginti (0-6). Checkbox ki jagah lagti hai. */
.adqty {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-top: 2px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    overflow: hidden;
    user-select: none;
}

.adcard.sel .adqty {
    border-color: var(--black);
}

.adqty-btn {
    width: 28px;
    height: 30px;
    border: 0;
    background: transparent;
    color: var(--black);
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s;
}

.adqty-btn:hover:not(:disabled) {
    background: var(--sand);
}

.adqty-btn:disabled {
    color: var(--border);
    cursor: default;
}

.adqty-btn:focus-visible {
    outline: 2px solid var(--black);
    outline-offset: -2px;
}

.adqty-val {
    min-width: 26px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--black);
    font-variant-numeric: tabular-nums;
}

.adqty[data-qty="0"] .adqty-val {
    color: var(--text);
}

.achk {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all .2s;
    background: var(--white);
}

.adcard.sel .achk {
    background: var(--black);
    border-color: var(--black);
}

.flabel {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 8px;
}

.fmgroup {
    margin-bottom: 20px;
}

.slval {
    font-weight: 800;
    font-size: 24px;
    color: var(--black);
    text-align: center;
    margin: 8px 0 4px;
}

input[type=range] {
    width: 100%;
    accent-color: var(--black);
    cursor: pointer;
}

.sllabels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text);
    margin-top: 6px;
}

.toast {
    display: none;
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--black);
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
    white-space: nowrap;
}

.toast.show {
    display: block;
    animation: fio 2.6s forwards;
}

@keyframes fio {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(8px);
    }
    12% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    82% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.confirmed-bar {
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 14px 20px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 13px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.cb-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.confirmed-pill {
    font-size: 10px;
    color: var(--black);
    font-weight: 700;
    background: var(--sand);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
    white-space: nowrap;
}

.final-card {
    background: var(--white);
    border-radius: 16px;
    border: 1px solid var(--border);
    padding: 36px;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .07);
}

.final-card.hidden {
    display: none;
}

.fsummary-head {
    text-align: center;
    margin-bottom: 28px;
}

.fsummary-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--black);
    margin: 0 0 8px;
}

.fsummary-subtitle {
    font-size: 14px;
    color: var(--text);
    margin: 0;
}

/* Estimate ke total ke neeche — professional fees alag hone ka saaf notice. */
.feenote {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--sand-dark);
    border-left: 3px solid var(--black);
    border-radius: 8px;
    background: var(--sand);
    font-size: 12px;
    line-height: 1.65;
    color: var(--text);
}

.feenote-title {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 3px;
}

.fsummary-footnote {
    font-size: 11px;
    color: var(--text);
    text-align: center;
    margin-top: 18px;
    line-height: 1.6;
}

.your-details-intro {
    font-size: 13px;
    color: var(--text);
    margin-bottom: 22px;
    line-height: 1.6;
}

.cta-row-inline {
    display: flex;
    align-items: center;
}

.succ-circle {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--sand);
    border: 3px solid var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 auto 20px;
}

.fchips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 20px 0;
}

.fchip {
    background: #fff;
    border-radius: 10px;
    padding: 16px 12px;
    text-align: center;
    border: 1px solid var(--border);
}

.fchip-lbl {
    font-size: 9px;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: 5px;
}

.fchip-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
}

.bdbox {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 22px;
    border: 1px solid #000000;
}

.bdtitle {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 14px;
}

.bdline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--sand-dark);
}

.bdlbl {
    font-size: 13px;
    color: var(--text);
    flex: 1;
    min-width: 0;
}

.bdval {
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
    flex-shrink: 0;
    white-space: nowrap;
}

.bdval.free {
    color: var(--green);
}

/* Visa ki description, cost breakdown mein naam ke neeche. */
.bddesc {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--text);
    line-height: 1.5;
    margin-top: 3px;
    max-width: 42ch;
}

.bdval.note {
    font-size: 12px;
    font-weight: 600;
    font-style: italic;
    color: var(--text);
}

.totalrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 0;
}

.totallbl {
    font-size: 16px;
    font-weight: 700;
    color: var(--black);
}

.totalval {
    font-size: 28px;
    font-weight: 800;
    color: var(--black);
}

.ctarow {
    display: flex;
    gap: 10px;
}

/* Final estimate ka asli maqsad PDF download nahi, baat shuru karwana hai —
   is liye ye jori baqi buttons se upar aur numaya hai. */
.contactrow {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.contactrow.hidden { display: none; }

.cbtn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0;
    padding: 17px 14px;
    border-radius: 10px;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, border-color .2s, color .2s, transform .12s;
}

.cbtn:active { transform: translateY(1px); }

.cbtn-icon {
    width: 20px;
    height: 20px;
    flex: none;
}

.cbtn-wa {
    border: 1.5px solid var(--green);
    background: var(--green);
    color: #fff;
}

.cbtn-wa:hover {
    background: #15653F;
    border-color: #15653F;
}

.cbtn-call {
    border: 1.5px solid var(--black);
    background: var(--white);
    color: var(--black);
}

.cbtn-call:hover {
    background: var(--black);
    color: var(--white);
}

@media (max-width: 520px) {
    .contactrow { flex-direction: column; }
}

.propbtn {
    flex: 1;
    padding: 15px;
    border-radius: 10px;
    border: none;
    background: var(--black);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all .2s;
    /* ab ye <a> hai, isliye button jaisa dikhna zaroori hai */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    text-align: center;
}

.propbtn.hidden {
    display: none;
}

.propbtn:hover {
    background: #333;
}

.restbtn {
    padding: 15px 20px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--sand);
    color: var(--black);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    transition: all .2s;
}

.restbtn:hover {
    background: var(--sand-dark);
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    animation: modalFade .18s ease-out;
}

.modal-backdrop.hidden {
    display: none;
}

.modal {
    position: relative;
    background: var(--white);
    border-radius: 16px;
    border: 1px solid var(--border);
    padding: 36px 32px 30px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    font-family: 'Manrope', sans-serif;
    animation: modalPop .22s ease-out;
}

.modal .succ-circle {
    margin: 0 auto 18px;
}

.modal-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--black);
    margin: 0 0 10px;
}

.modal-message {
    font-size: 14px;
    color: var(--text);
    line-height: 1.6;
    margin: 0 0 24px;
}

.modal-ok {
    min-width: 140px;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--sand);
    color: var(--black);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    transition: all .2s;
}

.modal-close:hover {
    background: var(--sand-dark);
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 4px;
    flex-wrap: wrap;
}

.warn-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(196, 18, 48, .1);
    border: 3px solid var(--red);
    color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 800;
    margin: 0 auto 18px;
}

.adm-btn-danger {
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 11px 22px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.adm-btn-danger:hover {
    background: #a30e26;
    transform: translateY(-1px);
}

@keyframes modalFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalPop {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 680px) {
    .topbar {
        padding: 0 20px;
    }
    .hero {
        padding: 36px 20px 44px;
    }
    .hero h1 {
        font-size: 26px;
    }
    .main {
        padding: 28px 16px 60px;
    }
    .og3 {
        grid-template-columns: 1fr 1fr;
    }
    .og2 {
        grid-template-columns: 1fr 1fr;
    }
    .vgrid {
        grid-template-columns: repeat(3, 1fr);
    }
    .fchips {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 420px) {
    .og3,
    .og2 {
        grid-template-columns: 1fr;
    }
    .fchips {
        grid-template-columns: 1fr;
    }
}

.adm-body {
    background: var(--off);
    color: var(--text);
    font-family: 'Manrope', sans-serif;
    min-height: 100vh;
}

.adm-login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.adm-login-shell {
    width: 100%;
    max-width: 420px;
}

.adm-login-card {
    background: var(--white);
    border-radius: 16px;
    border: 1px solid var(--border);
    padding: 40px 36px 32px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .08);
}

.adm-login-brand {
    text-align: center;
    margin-bottom: 26px;
}

.adm-login-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--black);
    margin: 0 0 6px;
    text-align: center;
}

.adm-login-sub {
    font-size: 13px;
    color: var(--text);
    text-align: center;
    margin: 0 0 22px;
    line-height: 1.55;
}

.adm-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}

.adm-sidebar {
    background: var(--black);
    color: #fff;
    padding: 20px 0 18px;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /* Kaale par default scrollbar bhadda lagta hai. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

.adm-sidebar::-webkit-scrollbar { width: 8px; }
.adm-sidebar::-webkit-scrollbar-track { background: transparent; }
.adm-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.adm-brand {
    padding: 0 20px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    margin-bottom: 12px;
}

.adm-brand .adm-logo {
    font-weight: 800;
    font-size: 20px;
    color: #fff;
    letter-spacing: -.5px;
}

.adm-brand .adm-logo-sub {
    font-size: 9px;
    color: rgba(255, 255, 255, .5);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 2px;
}

.adm-side-logo {
    height: 26px;
    width: auto;
    display: block;
    margin-bottom: 3px;
}

.adm-login-brand .adm-logo {
    font-weight: 800;
    font-size: 22px;
    color: var(--black);
    letter-spacing: -.5px;
}

.adm-login-logo {
    height: 34px;
    width: auto;
    display: block;
    margin: 0 auto 2px;
}

.adm-login-brand .adm-logo-sub {
    font-size: 9px;
    color: var(--text);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 2px;
}

.adm-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 10px;
}

.adm-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 8px;
    color: rgba(255, 255, 255, .66);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.005em;
    transition: background .15s, color .15s;
}

.adm-nav-link:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.adm-nav-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .5);
    outline-offset: 1px;
}

.adm-nav-link.active {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

/* Chuni hui cheez par ek chhoti si lakeer — sirf rang se farq kam parhta hai. */
.adm-nav-link.active::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 17px;
    border-radius: 0 3px 3px 0;
    background: #fff;
}

.adm-nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: .75;
    transition: opacity .15s;
}

.adm-nav-link:hover .adm-nav-icon,
.adm-nav-link.active .adm-nav-icon {
    opacity: 1;
}

.adm-nav-group {
    padding: 16px 12px 6px;
    font-size: 9px;
    color: rgba(255, 255, 255, .32);
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 700;
}

/* Neeche wala link — baaki nav se alag, halka. */
.adm-nav-external {
    margin-top: auto;
    color: rgba(255, 255, 255, .45);
    font-weight: 600;
}

.adm-nav-external .adm-nav-icon { opacity: .55; }

.adm-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.adm-topbar {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
    padding: 13px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Sidebar ka group yahan upar dohraya jata hai — safha apni jagah bata deta
   hai, sirf apna naam nahi. */
.adm-topbar-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #A4A49C;
    margin-bottom: 3px;
}

.adm-page-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--black);
    letter-spacing: -.2px;
    line-height: 1.2;
}

.adm-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.adm-topbar-sep {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 2px;
}

/* Chhote buttons: calculator kholna aur alerts. */
.adm-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--white);
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.adm-icon-action:hover {
    border-color: var(--black);
    color: var(--black);
}

.adm-icon-action .adm-action-icon,
.adm-icon-action .adm-nav-icon { width: 16px; height: 16px; }

/* ---- data-health alerts: navbar ki ghanti ----
   Ye teen maslay pehle dashboard par teen bare cards ghere hue the. Masla ye
   tha ke wo hamesha nazar aate the chahe koi masla ho ya na ho, aur sirf
   dashboard par nazar aate the. Ab ghanti har safhe par hai aur sirf tab
   bolti hai jab waqai kuch toota hua ho. */

.adm-alert-btn {
    position: relative;
    font-family: 'Manrope', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--white);
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.adm-alert-btn:hover,
.adm-alert-btn[aria-expanded="true"] {
    border-color: var(--black);
    color: var(--black);
}

.adm-alert-btn .adm-action-icon { width: 17px; height: 17px; }

.adm-alert-count {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    border: 2px solid var(--white);
    background: var(--red);
    color: var(--white);
    font-size: 10px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.adm-pop-alerts {
    width: 400px;
    padding: 0;
}

.adm-alerts-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--sand-dark);
    background: #FCFCFA;
    border-radius: 12px 12px 0 0;
}

.adm-alerts-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--black);
}

.adm-alerts-meta {
    font-size: 11.5px;
    color: var(--text);
    font-weight: 600;
}

.adm-alert-item {
    display: flex;
    gap: 11px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--sand-dark);
    text-decoration: none;
}

.adm-alert-item:last-child { border-bottom: 0; }

.adm-alert-item:hover { background: var(--sand); }

.adm-alert-dot {
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.adm-alert-dot.level-critical { background: var(--red); }
.adm-alert-dot.level-warning { background: #B5761F; }

.adm-alert-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
}

.adm-alert-detail {
    display: block;
    font-size: 12px;
    color: var(--text);
    line-height: 1.5;
    margin-top: 2px;
}

.adm-alert-action {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--black);
    margin-top: 6px;
}

.adm-alert-item:hover .adm-alert-action { text-decoration: underline; }

.adm-alerts-ok {
    display: flex;
    gap: 11px;
    padding: 18px 16px;
}

.adm-alerts-ok .adm-action-icon {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: var(--green);
    flex-shrink: 0;
}

@media (max-width: 520px) {
    .adm-pop-alerts { width: calc(100vw - 32px); }
}

.adm-userchip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 11px 0 5px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    transition: border-color .15s ease;
}

.adm-userchip:hover,
.adm-userchip[aria-expanded="true"] { border-color: var(--black); }

.adm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--black);
    color: var(--white);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .3px;
    flex-shrink: 0;
}

.adm-userchip-text { text-align: left; line-height: 1.25; }

.adm-userchip-name {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--black);
    white-space: nowrap;
}

.adm-userchip-role {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.adm-userchip-caret {
    font-size: 9px;
    color: var(--text);
    line-height: 1;
}

.adm-pop-menu {
    width: 250px;
    padding: 0;
}

.adm-menu-head {
    padding: 13px 16px;
    border-bottom: 1px solid var(--sand-dark);
    background: #FCFCFA;
    border-radius: 12px 12px 0 0;
}

.adm-menu-head .n {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--black);
}

.adm-menu-head .e {
    display: block;
    font-size: 11.5px;
    color: var(--text);
    margin-top: 1px;
    overflow-wrap: anywhere;
}

.adm-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    border: 0;
    background: none;
    color: var(--black);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.adm-menu-item:hover { background: var(--sand); }

.adm-menu-item .adm-action-icon,
.adm-menu-item .adm-nav-icon { width: 15px; height: 15px; color: var(--text); }

.adm-menu-item-danger { color: var(--red); }
.adm-menu-item-danger .adm-action-icon { color: var(--red); }

.adm-menu-sep { height: 1px; background: var(--sand-dark); }

@media (max-width: 640px) {
    .adm-topbar { padding: 12px 16px; }
    .adm-userchip-text { display: none; }
    .adm-userchip { padding: 0 6px; }
}

.adm-main {
    padding: 28px 32px 48px;
    flex: 1;
}

.adm-section {
    margin-top: 28px;
}

.adm-section:first-child {
    margin-top: 0;
}

.adm-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.adm-section-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--black);
    margin: 0;
}

.adm-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.adm-stat-card {
    background: var(--white);
    border-radius: 14px;
    border: 1px solid var(--border);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
}

.adm-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--sand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.adm-stat-body {
    min-width: 0;
}

.adm-stat-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.adm-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--black);
}

.adm-mini-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.adm-mini-card {
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 18px;
    text-decoration: none;
    color: inherit;
    transition: all .2s;
    display: block;
}

.adm-mini-card:hover {
    border-color: rgba(0, 0, 0, .25);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
}

.adm-mini-icon {
    font-size: 22px;
    margin-bottom: 8px;
}

.adm-mini-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.adm-mini-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--black);
}

.adm-card {
    background: var(--white);
    border-radius: 14px;
    border: 1px solid var(--border);
    padding: 28px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
}

.adm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 12px;
    flex-wrap: wrap;
}

.adm-toolbar-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-filters-card {
    background: var(--white);
    border-radius: 14px;
    border: 1px solid var(--border);
    padding: 22px 22px 18px;
    margin-bottom: 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
}

/* Fixed grid ki jagah flex — page par 2 fields hon ya 4, buttons hamesha
   dayein kinare par rehte hain aur inputs baqi jagah le lete hain. */
.adm-filters-top {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 16px;
    align-items: flex-end;
}

.adm-filters-top > .adm-field {
    flex: 1 1 150px;
    min-width: 0;
}

/* Search sab se zyada jagah leta hai. */
.adm-filters-top > .adm-field:first-child {
    flex: 2.4 1 230px;
}

.adm-filters-top-actions {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-shrink: 0;
}

.adm-filters-top-actions .adm-btn-primary,
.adm-filters-top-actions .adm-btn-secondary {
    height: 42px;
}

.adm-filters-top-actions .js-toggle-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Panel band rehta hai; lagay hue filters uske bahar chips ki soorat mein
   nazar aate hain, taake dekhne ke liye panel kholna na pare. */
.adm-filters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--black);
    color: var(--white);
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.adm-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: -4px 0 14px;
}

.adm-chips-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text);
}

.adm-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 6px 0 11px;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    color: var(--black);
    white-space: nowrap;
}

.adm-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--sand);
    color: var(--text);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.adm-chip-x:hover {
    background: var(--black);
    color: var(--white);
}

.adm-chips-clear {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.adm-chips-clear:hover {
    color: var(--black);
}

.js-toggle-more-icon {
    font-size: 10px;
    line-height: 1;
}

.adm-filters-more {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--sand-dark);
    animation: filtersFade .18s ease-out;
}

.adm-filters-more.is-hidden {
    display: none;
}

@keyframes filtersFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.adm-filters-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.adm-filters-grid .field-span-2 {
    grid-column: span 2;
}

.adm-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--sand-dark);
    flex-wrap: wrap;
}

.adm-filter-actions .adm-results-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--text);
    font-weight: 600;
}

@media (max-width: 880px) {
    /* Tang screen par buttons apni poori qatar le lete hain. */
    .adm-filters-top-actions {
        width: 100%;
    }
    .adm-filters-top-actions > * {
        flex: 1 1 0;
        justify-content: center;
    }
    .adm-filters-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .adm-filters-grid .field-span-2 {
        grid-column: span 2;
    }
}

@media (max-width: 520px) {
    .adm-filters-grid {
        grid-template-columns: 1fr;
    }
    .adm-filters-grid .field-span-2 {
        grid-column: span 1;
    }
}

.adm-search {
    display: flex;
    gap: 8px;
    flex: 1;
    max-width: 360px;
}

.adm-search input {
    flex: 1;
    min-width: 0;
}

.adm-search-lg {
    max-width: 640px;
}

.adm-search select.adm-input {
    flex: 0 1 240px;
    min-width: 160px;
}

.adm-search > input,
.adm-search > .ss-wrap,
.adm-search > .adm-btn-secondary,
.adm-search > .adm-btn-ghost {
    height: 44px;
}

.adm-search > .adm-btn-secondary,
.adm-search > .adm-btn-ghost {
    display: inline-flex;
    align-items: center;
}

.adm-search .ss-trigger {
    height: 100%;
}

select.ss-native {
    display: none;
}

.ss-wrap {
    position: relative;
}

.adm-search .ss-wrap {
    flex: 0 1 240px;
    min-width: 160px;
}

.ss-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    background: var(--white);
}

.ss-trigger .ss-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss-arrow {
    flex-shrink: 0;
    font-size: 10px;
    color: var(--text);
}

.ss-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 6px;
    max-height: 280px;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
}

.ss-panel[hidden] {
    display: none;
}

.ss-search {
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 6px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-family: 'Manrope', sans-serif;
    outline: none;
}

.ss-search:focus {
    border-color: var(--black);
}

.ss-options {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
}

.ss-option {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-option:hover {
    background: var(--sand);
}

.ss-option.selected {
    font-weight: 600;
}

.ss-empty {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text);
}

.ss-empty[hidden] {
    display: none;
}

.adm-table-wrap {
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: auto;
    max-height: calc(100vh - 190px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
}

/* Spreadsheet jaisi table: har cell ek hi line, charon taraf gridlines,
   aur chaurai ziada ho to poori table side mein scroll hoti hai. */
.adm-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.adm-table thead th {
    background: var(--sand);
    color: var(--black);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    height: 38px;
    padding: 0 11px;
    text-align: left;
    white-space: nowrap;
    border-right: 1px solid var(--sand-dark);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 2;
}

.adm-table thead th:last-child { border-right: 0; }

.adm-table tbody td {
    height: 44px;
    padding: 0 11px;
    border-right: 1px solid var(--sand-dark);
    border-bottom: 1px solid var(--sand-dark);
    font-size: 13px;
    color: var(--text);
    vertical-align: middle;
    /* Koi entry doosri line par nahi jaati. */
    white-space: nowrap;
}

.adm-table tbody td:last-child { border-right: 0; }

.adm-table tbody tr:last-child td {
    border-bottom: none;
}

.adm-table tbody tr:hover {
    background: rgba(240, 240, 235, .5);
}

/* Cell ke andar ka koi bhi block bhi ek hi line par rahe. */
.adm-table td > div,
.adm-table td > span,
.adm-table td > p {
    display: inline;
    white-space: nowrap;
}

/* Actions cell ko flex banane se <td> table-cell nahi rehta aur row ki
   alignment toot jati hai — is liye cell normal rehta hai, andar ke elements
   inline-flex hote hain. */
.adm-table .col-actions {
    white-space: nowrap;
}

.adm-table .col-actions > * {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.adm-table .col-actions > * + * {
    margin-left: 6px;
}

/* Icon-only actions: lafz screen reader ke liye rehte hain, nazar icon par. */
.adm-iconbtn {
    font-family: 'Manrope', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.adm-iconbtn:hover {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
}

.adm-iconbtn:focus-visible {
    outline: 2px solid var(--black);
    outline-offset: 2px;
}

.adm-iconbtn-danger:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
}

.adm-action-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Sirf screen reader ke liye. */
.adm-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.adm-link {
    color: var(--black);
    font-weight: 700;
    text-decoration: none;
    font-size: 13px;
    /* <button class="adm-link"> bhi link jaisa hi dikhe */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.adm-link:hover {
    text-decoration: underline;
}

.adm-link-danger {
    color: var(--red);
    font-weight: 700;
    text-decoration: none;
    font-size: 13px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.adm-link-danger:hover {
    text-decoration: underline;
}

.adm-btn-primary {
    background: var(--black);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 11px 22px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    transition: all .2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.adm-btn-primary:hover {
    background: #333;
    transform: translateY(-1px);
}

.adm-btn-secondary {
    background: var(--sand);
    color: var(--black);
    border: 1.5px solid var(--border);
    border-radius: 9px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .2s;
}

.adm-btn-secondary:hover {
    background: var(--sand-dark);
}

.adm-btn-ghost {
    background: transparent;
    color: var(--text);
    border: none;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    text-decoration: none;
    border-radius: 8px;
    transition: all .2s;
}

.adm-btn-ghost:hover {
    background: var(--sand);
    color: var(--black);
}

.adm-btn-full {
    width: 100%;
    justify-content: center;
    padding: 13px;
}

.adm-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.adm-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.adm-form-grid .adm-field-full {
    grid-column: 1 / -1;
}

.adm-field {
    display: flex;
    flex-direction: column;
}

.adm-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.adm-req {
    color: var(--red);
}

.adm-input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1px solid var(--border);
    font-size: 13px;
    color: var(--black);
    outline: none;
    font-family: 'Manrope', sans-serif;
    transition: border-color .15s ease, box-shadow .15s ease;
    background: var(--white);
}

.adm-input:focus {
    border-color: var(--black);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}

.adm-input.is-invalid {
    border-color: var(--red);
}

.adm-input[readonly] {
    background: var(--sand);
    color: var(--text);
    cursor: not-allowed;
}

.adm-textarea {
    height: auto;
    padding: 9px 12px;
    line-height: 1.55;
    resize: vertical;
    min-height: 76px;
    font-family: 'Manrope', sans-serif;
}

.adm-help {
    font-size: 11px;
    color: var(--text);
    margin-top: 6px;
}

.form-error {
    font-size: 11px;
    color: var(--red);
    margin-top: 6px;
}

.adm-form-grid .adm-file-field {
    grid-column: 1 / -1;
}

.adm-file-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1.5px dashed var(--border);
    border-radius: 12px;
    background: var(--sand);
}

.adm-file-media {
    position: relative;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--white);
    overflow: hidden;
}

.adm-file-current,
.adm-file-preview {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.adm-file-preview:empty {
    display: none;
}

.adm-file-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.adm-file-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    line-height: 1.3;
    padding: 0 6px;
}

.adm-file-placeholder svg {
    width: 22px;
    height: 22px;
    color: #B5B5AD;
}

.adm-file-control {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.adm-file-input {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    line-height: 34px;
    border-radius: 9px;
    border: 1px solid var(--border);
    font-size: 13px;
    color: var(--black);
    background: var(--white);
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
}

.adm-file-input::file-selector-button {
    margin-right: 10px;
    padding: 5px 11px;
    border: none;
    border-radius: 8px;
    background: var(--black);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
}

.adm-file-input.is-invalid {
    border-color: var(--red);
}

.adm-file-control .adm-help,
.adm-file-control .form-error {
    margin-top: 0;
}

/* Har row ki oonchai ek jaisi rakhne ke liye teenon soortein ek hi naap ka
   dabba hain. `.adm-table td > span { display: inline }` ko haraane ke liye
   selector zyada makhsoos hai. */
.adm-thumb,
.adm-table td > .adm-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

.adm-thumb-img {
    object-fit: contain;
    border: 1px solid var(--border);
    background: var(--white);
}

.adm-thumb-emoji {
    font-size: 17px;
    line-height: 1;
}

.adm-thumb-blank {
    border: 1px dashed var(--border);
    background: var(--sand);
    color: #A9A9A1;
}

.adm-thumb-blank svg {
    width: 15px;
    height: 15px;
}

.adm-emoji {
    font-size: 20px;
}

.adm-muted {
    color: var(--text);
}

.adm-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.adm-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--black);
    cursor: pointer;
}

.adm-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

/* ==========================================================================
   Form pages — do sutoon: asli maloomat bayein, sanad (logo/visibility)
   dayein rail mein. Ek lambi 2-column list mein sab cheezein barabar ahmiyat
   ki lagti thin.
   ========================================================================== */

/* Do alag sutoon rakhne se chhota sutoon neeche khaali reh jata tha. Ab ek
   hi grid hai: ek qatar ke dono panel barabar oonchai tak phail jate hain,
   is liye kahin safed khala nazar nahi aata. */
.adm-form-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.adm-form-layout > .span-2 {
    grid-column: 1 / -1;
}

.adm-panel-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
}

.adm-panel-top {
    padding: 13px 18px;
    border-bottom: 1px solid var(--sand-dark);
    background: #FCFCFA;
    border-radius: 14px 14px 0 0;
}

.adm-panel-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--black);
}

.adm-panel-note {
    font-size: 11.5px;
    color: var(--text);
    line-height: 1.5;
    margin-top: 2px;
}

.adm-panel-in {
    display: grid;
    align-content: start;
    flex: 1;
    gap: 14px 16px;
    padding: 18px;
}

.adm-panel-in.cols-2 {
    grid-template-columns: 1fr 1fr;
}

.adm-panel-in .span-2 {
    grid-column: 1 / -1;
}

/* Checkbox ko apni patti mil jaye to wo label jaisa nahi, switch jaisa lagta hai. */
.adm-check-row {
    display: flex;
    align-items: center;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--sand);
}

.adm-check-row .adm-field { width: 100%; }

.adm-group-off {
    opacity: .45;
    transition: opacity .15s ease;
}

.adm-form-layout .adm-file-field .adm-label { display: none; }

/* Actions hamesha nazar mein — lamba form scroll karte waqat bhi. */
.adm-formbar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 11px 14px;
    background: rgba(250, 250, 247, .94);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.adm-formbar-note {
    font-size: 11.5px;
    color: var(--text);
    margin-right: auto;
}

.adm-formbar .adm-btn-primary,
.adm-formbar .adm-btn-ghost {
    height: 38px;
    display: inline-flex;
    align-items: center;
}

@media (max-width: 1080px) {
    .adm-form-layout { grid-template-columns: minmax(0, 1fr); }
    .adm-form-layout > .span-2 { grid-column: auto; }
}

@media (max-width: 620px) {
    .adm-panel-in.cols-2 { grid-template-columns: 1fr; }
}

.adm-flash {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

.adm-flash-success {
    background: rgba(26, 122, 79, .1);
    color: var(--green);
    border: 1px solid rgba(26, 122, 79, .25);
}

.adm-flash-error {
    background: rgba(196, 18, 48, .08);
    color: var(--red);
    border: 1px solid rgba(196, 18, 48, .2);
}

.adm-flash-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: currentColor;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    flex-shrink: 0;
}

.adm-flash-icon::after {
    color: #fff;
}

.adm-flash-success .adm-flash-icon {
    color: var(--green);
}

.adm-flash-error .adm-flash-icon {
    color: var(--red);
}

.adm-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    background: var(--sand);
    color: var(--black);
    border: 1px solid var(--border);
}

.adm-pill.pill-active {
    background: rgba(26, 122, 79, .12);
    color: var(--green);
    border-color: rgba(26, 122, 79, .3);
}

.adm-pill.pill-inactive {
    background: rgba(115, 115, 115, .1);
    color: var(--text);
    border-color: rgba(115, 115, 115, .25);
}

.adm-pill.pill-new {
    background: rgba(26, 122, 79, .12);
    color: var(--green);
    border-color: rgba(26, 122, 79, .3);
}

.adm-pill.pill-contacted {
    background: rgba(0, 0, 0, .06);
    color: var(--black);
}

.adm-pill.pill-qualified {
    background: rgba(26, 122, 79, .18);
    color: var(--green);
}

.adm-pill.pill-converted {
    background: var(--black);
    color: #fff;
    border-color: var(--black);
}

.adm-pill.pill-lost {
    background: rgba(196, 18, 48, .08);
    color: var(--red);
    border-color: rgba(196, 18, 48, .2);
}

.adm-pill.pill-pending {
    background: #FCF3E3;
    color: #8A5A12;
}

.adm-money {
    font-weight: 700;
    color: var(--black);
}

/* Inline explanation above an admin form (e.g. a service priced elsewhere). */
.adm-note {
    background: var(--sand);
    border: 1px solid var(--sand-dark);
    border-left: 3px solid var(--black);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
    color: var(--text);
    font-size: 12px;
    line-height: 1.6;
}

.adm-note strong {
    color: var(--black);
}

.adm-empty {
    background: var(--white);
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    color: var(--text);
    font-size: 13px;
}

.adm-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 0;
    color: var(--text);
    font-size: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.adm-pager nav {
    display: inline-flex;
}

.adm-pager .pagination {
    list-style: none;
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    align-items: center;
}

.adm-pager .pagination li {
    margin: 0;
}

.adm-pager .pagination a,
.adm-pager .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
}

.adm-pager .pagination a:hover {
    background: var(--sand);
    color: var(--black);
}

.adm-pager .pagination .active span {
    background: var(--black);
    color: #fff;
    border-color: var(--black);
}

.adm-pager .pagination .disabled span {
    opacity: .4;
}

/* ==========================================================================
   Lead detail — upar khulasa, phir aik click wala pipeline, phir tafseel.
   Pehle do alag sutoon the aur chhota sutoon neeche khaali reh jata tha;
   ab wahi grid hai jo forms mein hai, is liye har qatar barabar hoti hai.
   ========================================================================== */

.lead-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.lead-top-spacer { margin-left: auto; }

.lead-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--white);
    color: var(--black);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}

.lead-back:hover { border-color: var(--black); }

.lead-ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--text);
}

/* ---- khulasa ---- */

.lead-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    padding: 22px 24px;
    background: var(--sand);
    border: 1px solid var(--sand-dark);
    border-radius: 14px;
}

.lead-hero-main { min-width: 0; flex: 1 1 320px; }

.lead-hero-name {
    font-size: 22px;
    font-weight: 800;
    color: var(--black);
    letter-spacing: -.3px;
    margin: 0 0 10px;
    line-height: 1.2;
}

.lead-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
}

/* Sales team in par click karti hai — ye link hain, sirf matn nahi. */
.lead-contact a,
.lead-contact span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
    text-decoration: none;
}

.lead-contact a:hover { text-decoration: underline; }

.lead-contact .adm-action-icon {
    width: 14px;
    height: 14px;
    color: var(--text);
}

.lead-hero-figure { text-align: right; flex-shrink: 0; }

.lead-hero-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: var(--text);
}

.lead-hero-total {
    font-size: 28px;
    font-weight: 800;
    color: var(--black);
    letter-spacing: -.6px;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.lead-hero-sub {
    font-size: 12px;
    color: var(--text);
    margin-top: 2px;
}

/* ---- pipeline ---- */

.lead-stages {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px;
}

.lead-stage {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    color: var(--text);
    font-family: 'Manrope', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.lead-stage:hover {
    border-color: var(--black);
    color: var(--black);
}

.lead-stage .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #C9C9C1;
    flex-shrink: 0;
}

.lead-stage.is-current {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
    cursor: default;
}

.lead-stage.is-current .dot { background: var(--white); }

.lead-stage.is-lost:hover {
    border-color: var(--red);
    color: var(--red);
}

.lead-stage.is-current.is-lost {
    background: var(--red);
    border-color: var(--red);
}

/* ---- tafseel ---- */

.lead-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--sand-dark);
    font-size: 13px;
}

.lead-row:last-child { border-bottom: 0; }

.lead-row dt,
.lead-row .k {
    color: var(--text);
    font-weight: 600;
    flex-shrink: 0;
}

.lead-row dd,
.lead-row .v {
    margin: 0;
    color: var(--black);
    font-weight: 700;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}

.lead-note {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text);
}

.lead-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1.5px solid var(--black);
}

.lead-total .k { font-size: 14px; font-weight: 800; color: var(--black); }

.lead-total .v {
    font-size: 18px;
    font-weight: 800;
    color: var(--black);
    font-variant-numeric: tabular-nums;
}

.lead-empty {
    font-size: 13px;
    color: var(--text);
    padding: 6px 0;
}

@media (max-width: 700px) {
    .lead-hero-figure { text-align: left; }
}

.adm-detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
}

.adm-detail-card {
    background: var(--white);
    border-radius: 14px;
    border: 1px solid var(--border);
    padding: 24px;
}

.adm-detail-card + .adm-detail-card {
    margin-top: 18px;
}

.adm-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sand-dark);
}

.adm-detail-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--black);
    margin: 0;
}

.adm-kv {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 8px 16px;
    font-size: 13px;
}

.adm-kv dt {
    color: var(--text);
    font-weight: 600;
}

.adm-kv dd {
    color: var(--black);
    font-weight: 700;
    margin: 0;
}

.adm-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.adm-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--sand-dark);
    font-size: 13px;
}

.adm-list li:last-child {
    border-bottom: none;
}

.adm-list .li-label {
    color: var(--text);
}

.adm-list .li-value {
    color: var(--black);
    font-weight: 700;
}

.adm-total-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    margin-top: 6px;
    border-top: 2px solid var(--black);
    font-size: 15px;
    font-weight: 800;
    color: var(--black);
}

@media (max-width: 1024px) {
    .adm-stat-grid {
        grid-template-columns: 1fr 1fr;
    }
    .adm-mini-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .adm-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .adm-shell {
        grid-template-columns: 1fr;
    }
    .adm-sidebar {
        position: relative;
        height: auto;
    }
    .adm-stat-grid,
    .adm-mini-grid,
    .adm-form-grid {
        grid-template-columns: 1fr;
    }
    .adm-main {
        padding: 20px 16px 48px;
    }
}

/* ==========================================================================
   Select2 — site ke design ke mutabiq
   Library CDN se aati hai; ye rules uski shakl ko baaki inputs jaisa banate hain.
   ========================================================================== */

.select2-container {
    width: 100% !important;
    font-family: 'Manrope', sans-serif;
}

/* Admin ke dropdown inputs ke barabar — front-end calculator apne bade
   qad par hi rehta hai. */
.adm-body .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 30px 0 12px;
    border-width: 1px;
    border-radius: 9px;
}

.adm-body .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 13px;
    line-height: 1.2;
}

.adm-body .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 10px;
}

/* --- band dropdown (jo input jaisa dikhta hai) --- */
.select2-container--default .select2-selection--single {
    height: auto;
    padding: 13px 16px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    transition: border-color .2s, box-shadow .2s;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.35;
    font-size: 14px;
    color: var(--black);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9a9a94;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 12px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text) transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--text) transparent;
}

/* --- focus / khula hua --- */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--black);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .07);
}

/* --- khulne wala panel --- */
.select2-container--default .select2-dropdown {
    border: 1.5px solid var(--black);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
}

.select2-container--default .select2-search--dropdown {
    padding: 8px;
    border-bottom: 1px solid var(--border);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: var(--black);
    outline: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--black);
}

.select2-container--default .select2-results__option {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background: var(--sand);
    color: var(--black);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
    background: var(--black);
    color: #fff;
    font-weight: 600;
}

.select2-results__options {
    max-height: 260px;
}

/* --- admin ke chhote inputs ke saath match --- */
.adm-field .select2-container--default .select2-selection--single,
.adm-toolbar .select2-container--default .select2-selection--single {
    padding: 11px 14px;
}

/* Toolbar ek flex row hai — yahan Select2 ko poori chaurai na lene dein,
   warna search box daba kar khatam ho jata hai. */
.adm-search > .adm-input,
.adm-search > .select2-container {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
}

.adm-search > button,
.adm-search > a {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* --- error state --- */
.is-invalid + .select2-container--default .select2-selection--single {
    border-color: var(--red);
}

/* ==========================================================================
   Admin dashboard
   Scan karne ke liye banaya gaya hai, parhne ke liye nahi — pehle khulasa,
   phir tafseel. Rang sirf wahan jahan matlab rakhta ho.
   ========================================================================== */

.dash-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.dash-kpi {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px 16px;
}

.dash-kpi-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
}

.dash-kpi-value {
    font-size: 27px;
    font-weight: 800;
    color: var(--black);
    letter-spacing: -.02em;
    line-height: 1.15;
    margin-top: 7px;
    font-variant-numeric: tabular-nums;
}

.dash-kpi-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
    font-size: 11.5px;
    color: var(--text);
}

.dash-delta {
    font-weight: 700;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 99px;
    white-space: nowrap;
}

.dash-delta-up { color: var(--green); background: #E7F3EC; }
.dash-delta-down { color: var(--red); background: #FBEAED; }
.dash-delta-flat { color: var(--text); background: var(--sand); }

/* ---- data health ---- */

.dash-health {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.dash-issue {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px 14px;
}

.dash-issue-body { flex: 1; }

.dash-issue-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
}

/* Severity ab rang ke ek chhote nishan se — lakeer ki zaroorat nahi. */
.dash-issue-title::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-issue-critical .dash-issue-title::before { background: var(--red); }
.dash-issue-warning .dash-issue-title::before { background: #B0561B; }

.dash-issue-detail {
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.55;
    margin-top: 4px;
}

.dash-issue-action {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--black);
    text-decoration: none;
    margin-top: 12px;
    align-self: flex-start;
}

.dash-issue-action:hover { text-decoration: underline; }

/* ---- panels ---- */

.dash-split {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}

.dash-panel {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px 20px;
    margin-bottom: 18px;
    min-width: 0;
    /* Ek row ke panels barabar lambe hote hain — content upar se neeche tak faila
       kar khali jagah khatam ki jati hai. */
    display: flex;
    flex-direction: column;
}

.dash-split > .dash-panel { margin-bottom: 0; }

.dash-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.dash-panel-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--black);
    margin: 0;
}

.dash-panel-meta,
.dash-panel-link {
    font-size: 11.5px;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}

.dash-panel-link { font-weight: 700; color: var(--black); }
.dash-panel-link:hover { text-decoration: underline; }

.dash-blank {
    font-size: 12.5px;
    color: var(--text);
    padding: 22px 0;
    text-align: center;
}

/* ---- lead flow chart ---- */

.dash-chart {
    display: flex;
    gap: 10px;
    flex: 1;
    min-height: 132px;
}

.dash-chart-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    padding-bottom: 1px;
    flex-shrink: 0;
}

.dash-bars {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    border-bottom: 1px solid var(--sand-dark);
    min-width: 0;
}

.dash-bar-slot {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
    min-width: 0;
}

.dash-bar {
    width: 100%;
    background: var(--black);
    border-radius: 2px 2px 0 0;
    transition: opacity .15s;
}

.dash-bar-slot:hover .dash-bar { opacity: .65; }

.dash-bar.is-empty {
    height: 2px !important;
    background: var(--sand-dark);
    border-radius: 0;
}

.dash-chart-dates {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    color: var(--text);
    margin-top: 7px;
}

/* ---- status bars ---- */

.dash-statuses {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 13px;
}

.dash-status-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
}

.dash-status-label { font-size: 12.5px; color: var(--text); }

.dash-status-count {
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
    font-variant-numeric: tabular-nums;
}

.dash-status-track {
    height: 6px;
    background: var(--sand);
    border-radius: 99px;
    overflow: hidden;
}

.dash-status-fill {
    height: 100%;
    background: var(--black);
    border-radius: 99px;
    min-width: 0;
}

.dash-status-fill.fill-converted { background: var(--green); }
.dash-status-fill.fill-lost { background: var(--sand-dark); }

/* ---- rank tables ---- */

.dash-rank {
    width: 100%;
    border-collapse: collapse;
    flex: 1;
}

.dash-rank td {
    padding: 7px 0;
    vertical-align: middle;
    font-size: 12.5px;
}

.dash-rank-name {
    color: var(--black);
    font-weight: 600;
    white-space: nowrap;
    padding-right: 14px !important;
}

.dash-rank-bar { width: 45%; }

.dash-rank-num {
    text-align: right;
    font-weight: 700;
    color: var(--black);
    font-variant-numeric: tabular-nums;
    padding-left: 14px !important;
    white-space: nowrap;
}

.dash-rank-val {
    text-align: right;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    padding-left: 14px !important;
    white-space: nowrap;
}

.dash-lead-name { font-weight: 600; color: var(--black); }

/* ---- catalogue ---- */

.dash-catalogue {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.dash-cat {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 13px 15px;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}

.dash-cat:hover {
    border-color: rgba(0, 0, 0, .3);
    background: var(--sand);
}

.dash-cat-icon { font-size: 16px; flex-shrink: 0; }

.dash-cat-label {
    flex: 1;
    font-size: 12.5px;
    color: var(--text);
    min-width: 0;
}

.dash-cat-count {
    font-size: 14px;
    font-weight: 800;
    color: var(--black);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    .dash-split { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Listing pages — toolbar, cell treatments, empty state
   ========================================================================== */

.adm-page-sub {
    font-size: 12px;
    color: var(--text);
    margin-top: 2px;
}

/* ==========================================================================
   Command bar — search, filters aur action sab ek hi patli qatar mein.
   Pehle filter card, chips aur listbar milkar ~200px kha jate the; asli
   listing neeche dab jati thi. Ab sab kuch 36px ki ek qatar mein hai.
   ========================================================================== */

.adm-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.adm-bar-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 380px;
    min-width: 0;
}

.adm-bar-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 180px;
    min-width: 0;
}

.adm-bar-search .adm-action-icon {
    position: absolute;
    left: 11px;
    color: var(--text);
    pointer-events: none;
}

.adm-bar-search .adm-bar-input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 33px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--white);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: var(--black);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.adm-bar-search .adm-bar-input::placeholder { color: #9A9A94; }

.adm-bar-search .adm-bar-input:focus {
    border-color: var(--black);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}

.adm-bar-field {
    flex: 0 1 160px;
    min-width: 0;
}

.adm-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--white);
    color: var(--black);
    font-family: 'Manrope', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.adm-bar-btn:hover { border-color: var(--black); }

.adm-bar-btn.is-on {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
}

.adm-bar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--black);
    color: var(--white);
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.adm-bar-btn.is-on .adm-bar-badge {
    background: var(--white);
    color: var(--black);
}

.adm-bar-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.adm-bar-count {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--black);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.adm-bar-add {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border-radius: 9px;
    background: var(--black);
    color: var(--white);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.adm-bar-add:hover { background: #1F1F1F; }

/* ---- filters popover ---- */

.adm-pop-wrap { position: relative; }

.adm-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    width: 470px;
    max-width: calc(100vw - 48px);
    padding: 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .13);
}

.adm-pop.is-hidden { display: none; }

.adm-pop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
}

/* Leads par nau filters hain — unhein teen sutoon chahiye. */
.adm-pop-wide { width: 660px; }

.adm-pop-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 760px) {
    .adm-pop-grid.cols-3 { grid-template-columns: 1fr; }
}

.adm-pop-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--sand-dark);
}

.adm-pop-clear {
    margin-right: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.adm-pop-clear:hover { color: var(--black); }

.adm-pop-apply {
    height: 34px;
    padding: 0 16px;
    border: 0;
    border-radius: 9px;
    background: var(--black);
    color: var(--white);
    font-family: 'Manrope', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

/* Bar aur popover ke select2 chhote qad ke hain. */
.adm-bar .select2-container--default .select2-selection--single,
.adm-pop .select2-container--default .select2-selection--single {
    padding: 8px 12px;
    border-width: 1px;
    border-radius: 9px;
}

.adm-bar .select2-container--default .select2-selection--single .select2-selection__rendered,
.adm-pop .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 13px;
}

.adm-pop .adm-label { margin-bottom: 6px; }

@media (max-width: 760px) {
    .adm-bar-form { flex-wrap: wrap; }
    .adm-bar-field { flex: 1 1 140px; }
    .adm-bar-meta { margin-left: 0; width: 100%; }
    .adm-bar-add { margin-left: auto; }
    .adm-pop { right: auto; left: 0; }
}

/* Filter card aur table ke darmiyan ki patti: ginti + primary action. */
.adm-listbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.adm-listbar-count {
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
}

/* ---- cell treatments ---- */

/* Jis column ko sirf apne content jitni jagah chahiye. */
.adm-table th.col-narrow,
.adm-table td.col-narrow {
    width: 1%;
}

/* Naam ke aage status ka nuqta — Status column ki jagah.
   `.adm-table td > span { display: inline }` ko haraane ke liye selector
   thoda zyada makhsoos rakha gaya hai. */
.adm-table td > .adm-name {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.adm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.adm-dot-on {
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(26, 122, 79, .16);
}

.adm-dot-off {
    background: transparent;
    border: 1.5px solid #B7B7AF;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .04);
}

.adm-cell-strong {
    color: var(--black);
    font-weight: 600;
}

/* Slug ek code jaisi cheez hai — usay code ki tarah dikhna chahiye. */
.adm-slug {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--text);
    background: var(--sand);
    border-radius: 4px;
    padding: 2px 7px;
}

.adm-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--sand);
    color: var(--text);
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Aisi ginti jo khud ek masla hai — 0 live packages ka matlab hai
   jurisdiction calculator mein nazar hi nahi aata. */
.adm-flag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    background: rgba(196, 18, 48, .08);
    color: var(--red);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* Lamba text column ko phaila deta hai — is liye kaat kar "…" lagta hai,
   aur poora matn hover par title se milta hai. */
.adm-table td > .adm-truncate {
    display: block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Leads mein columns zyada hain — wahan email ko aur tang rakhna parta hai. */
.adm-table td > .adm-truncate.adm-truncate-sm {
    max-width: 175px;
}

/* ---- empty state ---- */

.adm-empty-state {
    background: var(--white);
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 46px 32px;
    text-align: center;
}

.adm-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--black);
}

.adm-empty-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.65;
    max-width: 46ch;
    margin: 6px auto 18px;
}