/* =============================================================================
   MrAuthTool — Gentelella ke upar apne overrides
   Ye file main-v4.css ke BAAD load hoti hai, isliye ye jeet-ti hai.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   SIDEBAR — HAMESHA DARK (dono themes mein)
   -----------------------------------------------------------------------------
   Gentelella ka default yahi hai: uske --sidebar-* variables :root pe dark
   set hain aur [data-theme=dark] block unhe chhoota hi nahi. Yaani theme
   toggle karne pe page badalta hai, sidebar dark hi rehta hai.

   Pehle maine light theme ke liye light sidebar banaya tha — wo hata diya.
   Ab theme ka default hi chal raha hai.

   NOTE: yahan sirf --sidebar-label add kiya hai (section headings ke liye),
   kyunki theme mein us naam ka variable hai hi nahi. Baaki rang theme ke
   apne hain — isliye theme update hone par ye apne aap match rahega.
----------------------------------------------------------------------------- */
:root {
    --sidebar-label: #5f7086;   /* GENERAL / SERVICES / RESELLER heading */
}

/* -----------------------------------------------------------------------------
   SIDEBAR — text aur icon ka size
   -----------------------------------------------------------------------------
   Default thoda bada lag raha tha. Font aur icon dono chhote kiye, aur item ki
   height kam ki — taaki bina scroll ke zyada items dikhein.
----------------------------------------------------------------------------- */
.sidebar-nav .nav-link {
    font-size: .875rem;
    padding: .5rem .75rem;
    gap: .625rem;
}

.sidebar-nav .nav-link .icon,
.sidebar-nav .nav-link svg.icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    opacity: .85;
}

.sidebar-nav .nav-link.active .icon { opacity: 1; }

.sidebar-nav .nav-text { font-weight: 500; letter-spacing: .01em; }

/* Section headings — chhote, halke, uppercase */
.sidebar-nav .nav-label {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sidebar-label);
    padding: 1rem .75rem .375rem;
}

/* Sub-items (Xiaomi > FDL waghera) — icon + text, thode andar aur chhote */
.sidebar-nav .nav-sublink {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    padding: .375rem .75rem .375rem 2.25rem;
}

.sidebar-nav .nav-sublink .icon {
    width: 15px; height: 15px;
    flex: 0 0 15px;
    opacity: .7;
}
.sidebar-nav .nav-sublink:hover .icon,
.sidebar-nav .nav-sublink.active .icon { opacity: 1; }

/* Active item ko baayin taraf ek patti — sirf rang se zyada saaf dikhta hai */
.sidebar-nav .nav-link.active,
.sidebar-nav .nav-sublink.active {
    position: relative;
    font-weight: 600;
}
.sidebar-nav .nav-link.active::before,
.sidebar-nav .nav-sublink.active::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 60%;
    border-radius: 0 3px 3px 0;
    background: #1abb9c;
}

/* -----------------------------------------------------------------------------
   BRAND — "M  Mr Auth Tool" do alag cheezein lag rahi thi
----------------------------------------------------------------------------- */
.sidebar-brand .brand-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    text-decoration: none;
    padding: 0 .75rem;
    width: 100%;
}

/* Asli logo. object-fit:contain isliye ki logo square na ho tab bhi
   khinche nahi — bas fit ho jaye. */
.sidebar-brand .brand-logo {
    width: 32px; height: 32px;
    flex: 0 0 32px;
    object-fit: contain;
    border-radius: 6px;
}

/* Purana letter-mark fallback — ab use nahi ho raha par auth page pe hai */
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    flex: 0 0 30px;
    border-radius: 7px;
    background: #1abb9c;
    color: #fff;
    font-weight: 700;
    font-size: .9375rem;
}

.sidebar-brand .brand-text {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--sidebar-text-hover);
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   SIDEBAR FOOTER (user chip)
----------------------------------------------------------------------------- */
.sidebar-footer {
    border-top: 1px solid var(--sidebar-border);
    padding: .75rem;
}

.sidebar-user { display: flex; align-items: center; gap: .625rem; }

.sidebar-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: #1abb9c;
    color: #fff;
    font-weight: 700;
    font-size: .8125rem;
}

.sidebar-user-info { min-width: 0; line-height: 1.3; }
.sidebar-user-info strong {
    display: block;
    font-size: .8125rem;
    color: var(--sidebar-text-hover);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-user-info small { font-size: .75rem; color: var(--sidebar-label); }

/* Rail mode (sidebar collapsed) mein text chhupa do, sirf avatar rahe */
body.sidebar-rail .sidebar-user-info,
body.sidebar-rail .brand-text { display: none; }

/* -----------------------------------------------------------------------------
   LAYOUT — footer hamesha neeche
   -----------------------------------------------------------------------------
   Content chhota ho (jaise FDL page) to page ke neeche khaali safed jagah bach
   jaati thi. main ko column flex banake page-wrapper ko badhne diya, taaki
   footer hamesha screen ke neeche chipka rahe aur wahan ek saaf border-top
   dikhe — chahe content kitna bhi chhota ho.
----------------------------------------------------------------------------- */
.main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.main > .page-wrapper { flex: 1 0 auto; }

/* Footer — theme ka default 12px/muted tha, thoda halka lag raha tha.
   Copyright line ko left align rakha gaya hai. */
.main > .footer {
    flex-shrink: 0;
    justify-content: flex-start;
    font-size: .8125rem;
    font-weight: 500;
    padding: 1.125rem 1.5rem;
}
.main > .footer strong {
    font-weight: 700;
    color: var(--text, #1f2933);
}

/* -----------------------------------------------------------------------------
   .d-none — Bootstrap ki utility class
   -----------------------------------------------------------------------------
   Gentelella Bootstrap pe nahi bana, isliye usme ye class hai hi nahi. Par
   purane panel se jo device-session JS uthaya hai (UBL) wo isi se button ka
   label/spinner toggle karta hai:

       ublBtnLbl.classList.toggle('d-none', busy);

   Bina is rule ke toggle chalta to hai par kuch chhupta nahi — label aur
   "Working…" dono ek saath dikhte hain. Isliye yahan define kar rahe hain.
   !important isliye ki button ke andar span pe display:inline-flex jaisa
   koi rule na jeet jaye.
----------------------------------------------------------------------------- */
.d-none { display: none !important; }

/* -----------------------------------------------------------------------------
   DEVICE SESSION LOG — FDL / FRP / UBL teeno ek jaise
   -----------------------------------------------------------------------------
   Pehle box ka style teeno pages ke <pre> pe INLINE likha tha — teen copies.
   Ek jagah rang badlo to baaki do purani reh jaati thi. Ab sab yahan hai,
   isliye teeno hamesha ek jaise dikhte hain.

   Line ka rang uski CLASS se aata hai. Teeno pages ka JS wahi classes lagata
   hai (info / ok / warn / err / muted), isliye teeno ka look apne aap match
   karta hai — chahe unka JS alag-alag likha ho.

   `#log` se scope kiya hai: bina scope ke `.info` Gentelella ki apni `.info`
   class se takra jaati hai aur log ka rang bigad jaata hai.
----------------------------------------------------------------------------- */
#log {
    margin: 0;
    padding: 1rem 1.125rem;
    min-height: 300px;
    max-height: 460px;
    overflow: auto;
    border-radius: 10px;

    /* Gehra navy — screen pe kaali screen se aankh ko aaram deta hai */
    background: #0b1020;
    color: #cbd5e1;

    font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
    font-size: .8125rem;
    line-height: 1.75;
    letter-spacing: .01em;

    white-space: pre-wrap;
    word-break: break-word;
}

/* Har line thodi si saans le sake */
#log > div { padding: 1px 0; }

/*
   Rang jaan-boojh ke chune hain — gehre background pe teeno ek saath dikhein
   aur ek doosre se alag lagein:

     info   halka neela   — kya ho raha hai
     ok     hara          — ho gaya
     warn   amber         — dhyan do
     err    laal          — ruk gaya
     muted  slate         — device ka data (label : value waali lines)

   `muted` pehle #64748b tha — is gehre background pe wo itna dhundhla tha ki
   device ki poori info padhne mein zor lagta tha. Ab saaf padhi jaati hai.
*/
#log .info  { color: #7dd3fc; }
#log .ok    { color: #4ade80; font-weight: 600; }
#log .warn  { color: #fbbf24; font-weight: 600; }
#log .err   { color: #f87171; font-weight: 600; }
#log .muted { color: #a5b4c8; }

/* Scrollbar bhi box ke saath mel khaye — default halka safed patch dikhta tha */
#log::-webkit-scrollbar        { width: 10px; height: 10px; }
#log::-webkit-scrollbar-track  { background: transparent; }
#log::-webkit-scrollbar-thumb  { background: #1e293b; border-radius: 6px; }
#log::-webkit-scrollbar-thumb:hover { background: #334155; }

/* -----------------------------------------------------------------------------
   BADGE TONES — theme mein sirf red / teal / blue hain
   -----------------------------------------------------------------------------
   Maine green / gray / yellow / amber bhi use kiye the, jo Gentelella mein hain
   hi nahi — isliye wo badges bilkul plain text dikh rahe the (na background,
   na padding). Yahan wahi missing tones add kar rahe hain, theme ke apne badge
   look ke hisaab se (soft background + gehra text, solid fill nahi).
----------------------------------------------------------------------------- */
.badge-green  { background: #dcfce7; color: #15803d; }
.badge-yellow { background: #fef3c7; color: #b45309; }
.badge-amber  { background: #fef3c7; color: #b45309; }
.badge-gray   { background: #eef1f5; color: #64748b; }

[data-theme="dark"] .badge-green  { background: #14532d33; color: #4ade80; }
[data-theme="dark"] .badge-yellow,
[data-theme="dark"] .badge-amber  { background: #78350f33; color: #fbbf24; }
[data-theme="dark"] .badge-gray   { background: #ffffff14; color: #94a3b8; }

/* -----------------------------------------------------------------------------
   STATUS PILL — bhara hua box (pagination ke active button jaisa)
   -----------------------------------------------------------------------------
   Table ke status column ke liye. Soft badge ek nazar mein dikhta nahi tha —
   ye solid fill + white text hai, isliye scan karte waqt turant pakad mein
   aata hai.

   Alag class isliye ki baaki badges (jaise dashboard ke "+50 credits") halke
   hi rahein — sab kuch solid kar dene se page bhaari lagta hai.
----------------------------------------------------------------------------- */
.pill-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: .3125rem .625rem;
    border-radius: 8px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    color: #fff;
}
.pill-box.is-ok      { background: #1abb9c; }   /* Unused  — abhi kaam ka hai  */
.pill-box.is-used    { background: #ef4444; }   /* Used    — kharch ho chuka   */
.pill-box.is-expired { background: #f59e0b; }   /* Expired — waqt nikal gaya   */
.pill-box.is-warn    { background: #f59e0b; }
.pill-box.is-muted   { background: #94a3b8; }

/* NOTE: Used = red aur Expired = amber jaan-boojh ke alag rakhe hain. Dono
   ka matlab "ab kaam ka nahi" hai, par wajah alag hai — Used yaani kharch ho
   gaya, Expired yaani waqt nikal gaya. Ek hi rang de dete to table scan karte
   waqt dono ek jaise lagte. */

/* -----------------------------------------------------------------------------
   MONO CLIP — lambe token / HWID
   -----------------------------------------------------------------------------
   Realme token aur HWID 40+ characters ke hote hain. Poora chhaap do to table
   ki baaki columns dab jaati hain. PHP side se beech se kaat ke aata hai
   (shuru + aakhir dono dikhte hain, taaki pehchana ja sake) aur `title` mein
   poori value rehti hai — hover pe dikh jaati hai.
----------------------------------------------------------------------------- */
/*
   `hidden` sach mein chhupaye.

   Theme ka `.alert` `display:flex` hai, aur wo `hidden` attribute ke default
   `display:none` ko HARA deta hai — class rule attribute se zyada strong hota
   hai. Nateeja: `<div class="alert" hidden></div>` screen pe ek KHALI rangeen
   box ban ke baith jaata tha (FDL/UBL pages pe buttons ke upar wahi dikh raha
   tha).

   Aankh se pakadna mushkil hai kyunki markup bilkul sahi lagta hai.
*/
.alert[hidden] { display: none !important; }

.mono-clip {
    display: inline-block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    padding: .25rem .5rem;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: .8125rem;
    color: #334155;
    cursor: help;
}

/* -----------------------------------------------------------------------------
   TABS
   -----------------------------------------------------------------------------
   Apni CSS jaan-boojh ke. Gentelella ke tab classes ka andaza lagane ki koshish
   pehle do baar ulti padi hai (stat-card, page — dono maujood hi nahi the aur
   page chup-chaap toota rehta hai). Ye chaar rules poori tarah hamare hain.
----------------------------------------------------------------------------- */
.tabs-bar {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color, #e6e9ee);
    margin-bottom: 16px;
}
.tabs-bar .tab-btn {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: .625rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--muted, #64748b);
    cursor: pointer;
    white-space: nowrap;
}
.tabs-bar .tab-btn:hover   { color: #1abb9c; }
.tabs-bar .tab-btn.is-active {
    color: #1abb9c;
    border-bottom-color: #1abb9c;
}
.tab-panel[hidden] { display: none; }

/* Bulk action bar — khatarnak buttons, isliye alag dikhte hain */
.bulk-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-left: auto;
}

/* Hex / token wale inputs — monospace mein galti pakadna aasan hota hai. */
.mono-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .875rem;
    letter-spacing: .01em;
}

/* Raw API response — AMT ka jawab jaisa aaya waisa dikhane ke liye. */
.raw-box {
    margin: 0;
    padding: .75rem;
    max-height: 320px;
    overflow: auto;
    border-radius: 8px;
    background: #0f172a;
    color: #e2e8f0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.5;
    white-space: pre-wrap;   /* lambi line wrap ho, horizontal scroll na aaye */
    word-break: break-word;
}

[data-theme="dark"] .mono-clip {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

/* -----------------------------------------------------------------------------
   ALERTS — flash messages
   -----------------------------------------------------------------------------
   Theme ka default kaafi halka tha. OTP code / balance jaisi cheezein isi mein
   aati hain, isliye padhne layak weight aur size chahiye.
----------------------------------------------------------------------------- */
.alert {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.6;
}
.alert strong,
.alert code { font-weight: 700; }

/* -----------------------------------------------------------------------------
   PAGINATION BAR
   -----------------------------------------------------------------------------
   Theme ki apni .pagination + .page-btn classes use ho rahi hain, sirf active/
   disabled states aur bar ka layout yahan add kiya hai (theme mein wo nahi the).
----------------------------------------------------------------------------- */
.pg-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

.pg-info {
    font-size: .8125rem;
    color: var(--text-muted, #8a93a3);
}
.pg-info strong { color: var(--text, #1f2933); font-weight: 600; }

/* -----------------------------------------------------------------------------
   REVOKE BUTTON — soft filled action, red jitna harsh nahi
----------------------------------------------------------------------------- */
.btn-soft-revoke {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    font-weight: 600;
}

.btn-soft-revoke:hover,
.btn-soft-revoke:focus {
    background: #fecaca;
    border-color: #f87171;
    color: #991b1b;
}

.btn-soft-revoke:disabled {
    opacity: .7;
    cursor: not-allowed;
}

[data-theme="dark"] .btn-soft-revoke {
    background: #4c1d1d;
    border-color: #7f1d1d;
    color: #fecaca;
}

[data-theme="dark"] .btn-soft-revoke:hover,
[data-theme="dark"] .btn-soft-revoke:focus {
    background: #5f2323;
    border-color: #991b1b;
    color: #fee2e2;
}

.btn-soft-blue {
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
    color: #0369a1;
    font-weight: 600;
}

.btn-soft-blue:hover,
.btn-soft-blue:focus {
    background: #bae6fd;
    border-color: #38bdf8;
    color: #075985;
}

[data-theme="dark"] .btn-soft-blue {
    background: #123348;
    border-color: #1d4e69;
    color: #bae6fd;
}

[data-theme="dark"] .btn-soft-blue:hover,
[data-theme="dark"] .btn-soft-blue:focus {
    background: #16435e;
    border-color: #256b92;
    color: #e0f2fe;
}

/* -----------------------------------------------------------------------------
   INSTANT API PAGE
----------------------------------------------------------------------------- */
.api-shell .card-header {
    align-items: center;
}

.api-lead {
    margin: 0 0 1rem;
    color: var(--text-secondary, #5b6875);
    line-height: 1.6;
}

.api-meta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .875rem;
    margin-bottom: 1rem;
}

.api-meta-box {
    border: 1px solid var(--border-color, #e6e9ee);
    border-radius: 12px;
    padding: .875rem 1rem;
    background: linear-gradient(180deg, rgba(26,187,156,.06), rgba(26,187,156,.02));
}

.api-meta-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted, #8a93a3);
    margin-bottom: .375rem;
}

.api-code-line,
.api-key-mask {
    display: inline-flex;
    align-items: center;
    font-family: Consolas, 'Courier New', monospace;
    font-size: .875rem;
    line-height: 1.4;
    word-break: break-all;
}

.api-key-mask {
    padding: .375rem .625rem;
    border-radius: 8px;
    background: var(--bg-surface-secondary, #f2f5f8);
    color: var(--text, #1f2933);
}

.api-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.api-chip {
    display: inline-flex;
    align-items: center;
    padding: .375rem .625rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
}

.api-chip-live {
    background: #dcfce7;
    color: #166534;
}

.api-chip-soft {
    background: #eef2ff;
    color: #4338ca;
}

.api-chip-open {
    background: #fff7ed;
    color: #c2410c;
}

.api-inline-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
}

.api-helper {
    margin-top: .5rem;
    font-size: .8125rem;
    color: var(--text-muted, #8a93a3);
}

.api-option-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--border-color, #e6e9ee);
    border-radius: 12px;
    background: var(--bg-surface-secondary, #f8fafc);
}

.api-option-card + .api-option-card {
    margin-top: .875rem;
}

.api-option-card input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.api-option-title {
    font-weight: 700;
    color: var(--text, #1f2933);
}

.api-option-text,
.api-note-item {
    font-size: .875rem;
    color: var(--text-secondary, #5b6875);
    line-height: 1.6;
}

.api-note-list {
    display: grid;
    gap: .75rem;
}

.api-note-item strong {
    color: var(--text, #1f2933);
}

.api-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

[data-theme="dark"] .api-meta-box {
    background: linear-gradient(180deg, rgba(26,187,156,.12), rgba(26,187,156,.04));
}

[data-theme="dark"] .api-chip-live {
    background: #14532d66;
    color: #86efac;
}

[data-theme="dark"] .api-chip-soft {
    background: #312e8166;
    color: #c7d2fe;
}

[data-theme="dark"] .api-chip-open {
    background: #7c2d1266;
    color: #fdba74;
}

@media (max-width: 768px) {
    .api-inline-form {
        grid-template-columns: 1fr;
    }

    .api-option-card {
        align-items: flex-start;
    }
}

.pagination .page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .5rem;
    text-decoration: none;
    color: var(--text-secondary, #5b6875);
}
.pagination .page-btn:hover { background: var(--bg-surface-secondary, #f2f5f8); }

.pagination .page-btn.is-active {
    background: #1abb9c;
    border-color: #1abb9c;
    color: #fff;
    font-weight: 600;
}

.pagination .page-btn.is-disabled {
    opacity: .4;
    cursor: default;
    pointer-events: none;
}

.pagination .pg-gap {
    padding: 0 .25rem;
    color: var(--text-muted, #8a93a3);
    font-size: .8125rem;
}

@media (max-width: 576px) {
    .pg-bar { flex-direction: column; align-items: stretch; }
    .pg-bar .pagination { justify-content: center; }
}

/* -----------------------------------------------------------------------------
   AUTH PAGES (login / register)
----------------------------------------------------------------------------- */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--bg-surface-secondary, #f5f7fa);
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-color, #e6e9ee);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
}

.auth-brand {
    display: flex; align-items: center; gap: .625rem;
    justify-content: center; margin-bottom: 1.5rem;
}
.auth-brand .brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    background: #1abb9c; color: #fff; font-weight: 700;
}
.auth-brand .brand-text { font-size: 1.0625rem; font-weight: 600; }

.auth-title {
    font-size: 1.375rem;
    margin: 0 0 .25rem;
    text-align: center;
}
.auth-sub   { color: var(--text-muted, #8a93a3); font-size: .875rem; margin: 0 0 1.25rem; text-align: center; }
.auth-note  { font-size: .8125rem; color: var(--text-muted, #8a93a3); margin-top: .75rem; text-align: center; }

.auth-links {
    margin-top: 1.25rem; padding-top: 1.25rem;
    border-top: 1px solid var(--border-color, #e6e9ee);
    display: flex; flex-direction: column; gap: .5rem;
    text-align: center; font-size: .875rem;
}

.auth-card .btn.btn-block {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* -----------------------------------------------------------------------------
   FILTER BAR — search + select + button ek line mein, ek hi height
   -----------------------------------------------------------------------------
   Asli wajah: theme mein in teeno ki height ALAG hai —

       .form-control   36px
       .btn            32px
       .btn-sm         28px

   Ek hi line mein rakho to teeno alag lambe dikhte hain. Upar se select pe
   inline `height:32px` bhi laga tha, jo .form-control ke 36px se ladta tha.

   Yahan teeno ko ek height (--fb-h) pe la diya. Badalna ho to ek jagah badlo.

   (Note: `.btn-sm` ki chaudai ka koi masla nahi hai — theme ka
   `.btn-icon.btn-sm { width:28px }` sirf ICON buttons pe lagta hai, jab dono
   classes saath hon. Text button pe `.btn-sm` bilkul theek hai.)
----------------------------------------------------------------------------- */
.filter-bar {
    --fb-h: 36px;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0;
}

/*
 * `.filter-search` — pehle iska naam `.search-box` tha. Badalna PADA:
 *
 * gentelella/src/v4/command-palette.js:236 —
 *
 *     const search = document.querySelector('.search-box input');
 *     if (search) {
 *       search.addEventListener('focus', opener);   <- palette khol deta hai
 *       search.setAttribute('readonly', '');        <- input DEAD ho jaata hai
 *     }
 *
 * Theme ke hisaab se `.search-box` topbar ka palette-trigger hai, asli search
 * field nahi. Par querySelector page ka PEHLA match uthata hai, aur hamare
 * topbar mein koi search-box hai hi nahi — to wo hamare filter wale input ko
 * pakad leta tha. Nateeja: 7 admin pages pe search box mein type hi nahi hota
 * tha, click karte hi command palette khul jaata tha.
 *
 * Class ka naam alag rakhne se theme ko kuch milta hi nahi (`if (search)`
 * false) — aur Ctrl+K se palette abhi bhi khulta hai, jaisa hona chahiye.
 */
.filter-bar .filter-search,
.filter-bar .form-control,
.filter-bar .btn {
    height: var(--fb-h);
    min-height: var(--fb-h);
}

.filter-bar .filter-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .75rem;
    background: var(--bg-surface-secondary, #f5f7fa);
    border: 1px solid var(--border-color, #e6e9ee);
    border-radius: var(--radius-sm, 8px);
}
.filter-bar .filter-search .s-icon {
    width: 16px; height: 16px;
    flex: 0 0 16px;
    color: var(--text-muted, #8a93a3);
}
.filter-bar .filter-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: none;
    outline: none;
    font: inherit;
    color: var(--text, #1f2933);
}

/* Text button ki chaudai content se aaye — .btn-sm ki 28px se nahi */
.filter-bar .btn {
    width: auto;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   AVATAR (tables mein)
----------------------------------------------------------------------------- */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 50%;
    background: var(--bg-surface-secondary, #eef1f5);
    color: var(--text-secondary, #5b6875);
    font-weight: 700; font-size: .8125rem;
}
.avatar-sm { width: 30px; height: 30px; flex: 0 0 30px; font-size: .75rem; }

/* -----------------------------------------------------------------------------
   TOPBAR DROPDOWN — active/select highlight hatao
----------------------------------------------------------------------------- */
.topbar-right .dropdown-menu .dropdown-item.active,
.topbar-right .dropdown-menu .dropdown-item:active,
.topbar-right .dropdown-menu .dropdown-item:focus,
.topbar-right [role="menu"] [role="menuitem"].active,
.topbar-right [role="menu"] [role="menuitem"]:active,
.topbar-right [role="menu"] [role="menuitem"]:focus {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
    color: inherit !important;
}

.topbar-right .dropdown-menu .dropdown-item,
.topbar-right [role="menu"] [role="menuitem"] {
    border: 1px solid transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.topbar-right .dropdown-menu .dropdown-item:hover,
.topbar-right .dropdown-menu .dropdown-item:focus-visible,
.topbar-right .dropdown-menu .dropdown-item.is-active,
.topbar-right .dropdown-menu .dropdown-item.is-focused,
.topbar-right .dropdown-menu .dropdown-item[aria-current="true"],
.topbar-right [role="menu"] [role="menuitem"]:hover,
.topbar-right [role="menu"] [role="menuitem"]:focus-visible,
.topbar-right [role="menu"] [role="menuitem"].is-active,
.topbar-right [role="menu"] [role="menuitem"].is-focused,
.topbar-right [role="menu"] [role="menuitem"][aria-current="true"] {
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}


/* -----------------------------------------------------------------------------
   MODAL — sirf ek rule, baaki sab theme ka
   -----------------------------------------------------------------------------
   Theme ka .modal-backdrop `display:flex; position:fixed; inset:0` hai aur
   sirf opacity se dikhta/chhupta hai. Theme use JS se banata-mitata hai,
   isliye wahan ye kaafi hai.

   Hamare modals markup mein pehle se likhe hain. Bina is rule ke wo band
   haalat mein bhi poori screen dhak lete — invisible, par saare clicks kha
   jaate aur page bilkul dead lagta.
----------------------------------------------------------------------------- */
.modal-backdrop[hidden] { display: none !important; }