/* ================================================================
   United Human Resources Services (PVT) Ltd — UHRS Portal
   Brand palette logo gradient se: orange → pink → purple → indigo
   Corporate treatment: deep ink base, gradient sirf accent ke taur par.
   ================================================================ */

:root {
    /* Core brand hues (logo se) */
    --brand-orange: #f0812b;
    --brand-pink:   #e42a7b;
    --brand-purple: #8b44c4;
    --brand-indigo: #5b5bd6;

    /* Behta hua gradient — logo aur UHRS wordmark dono isi se rangte hain.
       Beech mein safed band "chamak" ka kaam karta hai aur gehre gradient
       panel par contrast bhi barqarar rakhta hai. */
    --flow-gradient: linear-gradient(
        100deg,
        #ffd9a3 0%,
        var(--brand-orange) 18%,
        var(--brand-pink) 38%,
        #ffffff 50%,
        var(--brand-purple) 62%,
        var(--brand-indigo) 82%,
        #cdd4ff 100%
    );

    /* Signature brand gradient — brand panel aur buttons dono par. */
    --brand-gradient: linear-gradient(
        100deg,
        var(--brand-orange) 0%,
        var(--brand-pink) 38%,
        var(--brand-purple) 72%,
        var(--brand-indigo) 100%
    );

    --ink:        #14121f;
    --ink-body:   #45415a;
    --ink-muted:  #6a6580;
    --ink-faint:  #9a95ad;
    --line:       #e4e1ec;
    --line-soft:  #efedf4;
    --surface:    #ffffff;
    --canvas:     #f7f6fa;

    /* Bright gradient par text — contrast ke liye opacity oonchi rakhein. */
    --on-deep:        #ffffff;
    --on-deep-muted:  rgba(255, 255, 255, .88);
    --on-deep-faint:  rgba(255, 255, 255, .72);
    --on-deep-line:   rgba(255, 255, 255, .28);

    --danger:     #b42318;
    --danger-bg:  #fef3f2;
    --success:    #067647;
    --success-bg: #ecfdf3;

    --radius:     12px;
    --shadow-sm:  0 1px 2px rgba(20, 18, 31, .06);
    --shadow-lg:  0 24px 60px -20px rgba(20, 18, 31, .28);
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

/* Page khud kabhi scroll nahi karta — har screen aik hi viewport mein.
   Jahan content zyada ho, wahan sirf .app__body andar se scroll hota hai. */
body { overflow: hidden; }

body {
    margin: 0;
    font-family: "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--brand-purple); }

/* ================================================================
   App shell — topbar + navbar fixed, content area scrollable
   ================================================================ */

.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

/* Topbar aur navbar simat-te nahi. */
.app > .topbar,
.app > .nav { flex: none; }

/* min-height: 0 zaroori hai — warna flex child apne content se
   chhota nahi hota aur scroll body par chala jata hai. */
/* Content area par halka sa brand wash — bilkul safed nahi lagta,
   phir bhi text ka contrast poora rehta hai. Background box par paint hota
   hai (scroll nahi karta), is liye upar hi rehta hai. */
.app__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
        radial-gradient(90% 44% at 0% 0%,   rgba(240, 129, 43, .13) 0%, transparent 62%),
        radial-gradient(90% 46% at 100% 0%, rgba(91, 91, 214, .15) 0%, transparent 64%),
        radial-gradient(70% 34% at 50% 0%,  rgba(228, 42, 123, .07) 0%, transparent 60%),
        var(--canvas);
}

/* Chhota uppercase eyebrow — corporate hierarchy ka pehla step. */
.eyebrow {
    margin: 0 0 14px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* ================================================================
   Auth layout
   ================================================================ */

/* Login hamesha aik screen mein — page khud kabhi scroll na ho.
   Agar kisi chhoti screen par content phir bhi zyada ho to sirf woh
   panel andar se scroll karta hai, poora page nahi. */
/* Barabar do halves — taake banner theek darmiyan mein aa kar aadha
   gradient par aur aadha white par baithe. */
.auth {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.auth__brand,
.auth__panel {
    max-height: 100%;
    overflow-y: auto;
}

/* ------------------------------------------- Left: brand panel */

.auth__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 5vh, 52px) 60px clamp(18px, 3.4vh, 34px);
    color: var(--on-deep);
    background: var(--brand-gradient);
    overflow: hidden;
}

/* Neeche daayein halka sa orb — gradient ko depth deta hai. */
.auth__brand::after {
    content: "";
    position: absolute;
    right: -160px;
    bottom: -200px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
}

.auth__brand > * { position: relative; z-index: 1; }

.auth__brand-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 4.5vh, 46px);
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

/* ---- Logo lockup ---- */

.auth__brand-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Logo ki transparent PNG ko mask banate hain aur peeche brand gradient
   chalate hain — is tarah rang logo ke andar behte hue lagte hain.
   Fallback neeche @supports block mein hai. */
.auth__brand-logo {
    display: block;
    width: clamp(200px, 34vh, 380px);
    max-width: 78%;
    aspect-ratio: 564 / 316;          /* logo.png ka asal size */
    margin-bottom: clamp(12px, 2.6vh, 26px);

    background-image: var(--flow-gradient);
    background-size: 300% 100%;
    background-position: 0% 50%;

    -webkit-mask-image: url("../../logo.png");
    mask-image: url("../../logo.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;

    filter: drop-shadow(0 6px 18px rgba(23, 12, 45, .38));
    animation: logo-flow 7s ease-in-out infinite alternate;
}

@keyframes logo-flow {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}

/* Jin logon ne motion kam karne ko kaha ho, unke liye sirf sakit gradient. */
@media (prefers-reduced-motion: reduce) {
    .auth__brand-logo,
    .auth__brand-name { animation: none; background-position: 50% 50%; }
}

/* Mask support na ho to seedha logo dikhayein. */
@supports not ((-webkit-mask-image: url("../../logo.png")) or (mask-image: url("../../logo.png"))) {
    .auth__brand-logo {
        background-image: url("../../logo.png");
        background-size: contain;
        background-position: center;
        animation: none;
    }
}

.auth__brand-name {
    font-size: clamp(2.7rem, 7.4vh, 5.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .22em;
    /* Letter-spacing aakhri letter ke baad bhi lagti hai — centering theek
       rakhne ke liye utna hi text-indent wapas dete hain. */
    text-indent: .22em;
    color: #fff;                    /* fallback: neeche wala block na chale to */
}

/* Wahi behta hua gradient jo logo par hai — dono aik hi rhythm par.
   @supports ke andar is liye ke text-fill-color transparent un browsers par
   huroof ghaeb kar deta jahan background-clip:text nahi chalti. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .auth__brand-name {
        background-image: var(--flow-gradient);
        background-size: 300% 100%;
        background-position: 0% 50%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        /* Gradient panel par alag rakhne ke liye — logo wali hi shadow. */
        filter: drop-shadow(0 4px 12px rgba(23, 12, 45, .45));
        animation: logo-flow 7s ease-in-out infinite alternate;
    }
}

.auth__brand-tag {
    margin-top: clamp(10px, 2.2vh, 18px);
    max-width: 22ch;
    font-size: clamp(1.05rem, 3vh, 1.75rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--on-deep);
}

/* ---- Panel footer ---- */

.auth__brand-foot {
    margin: clamp(18px, 3.5vh, 40px) 0 0;
    padding-top: clamp(12px, 2.2vh, 22px);
    border-top: 1px solid var(--on-deep-line);
    font-size: .76rem;
    letter-spacing: .02em;
    text-align: center;
    color: var(--on-deep-faint);
}

/* ------------------------------------------- Right: form panel */

.auth__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 5vh, 48px) 24px;
    background: var(--surface);
}

/* Card ki chaurai system ke naam se bandhi hui hai — woh aik line mein rehta hai. */
.auth__card {
    width: 100%;
    max-width: 490px;
}

/* Asal logo left (brand) panel par hai. Yeh sirf mobile ke liye,
   jahan brand panel chhup jata hai. */
.auth__card-logo {
    display: none;
    width: 150px;
    max-width: 62%;
    height: auto;
    margin: 0 0 clamp(10px, 2vh, 18px);
}

/* Company name sirf mobile par, jahan brand panel chhup jata hai. */
.auth__card-company {
    display: none;
    margin: -12px 0 30px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .15em;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.auth__card .eyebrow { color: var(--brand-purple); }

.auth__title {
    margin: 0 0 7px;
    text-align: center;
    font-size: clamp(1.3rem, 2.9vh, 1.62rem);
    font-weight: 600;
    letter-spacing: -.02em;
}

/* Login card ki apni spacing — form pages se alag, height ke sath simat-ti hai. */
/* System ka naam — form ke oper, brand gradient se bhare huay huroof.
   Koi box nahi. text-fill-color transparent hi asal chaal hai; upar wala
   solid colour un browsers ka fallback hai jahan background-clip:text nahi. */
.auth__system {
    margin: 0 0 clamp(6px, 1.2vh, 12px);
    text-align: center;
    /* Hamesha aik line — size card ki chaurai ke mutabiq rakha gaya hai. */
    white-space: nowrap;
    font-size: clamp(1.15rem, 2.9vh, 1.72rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--brand-purple);
    background-image: var(--brand-gradient);
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.auth__title          { margin-bottom: clamp(16px, 3vh, 30px); }
.auth__card .field    { margin-bottom: clamp(12px, 2.2vh, 20px); }
.auth__card .form__row{ margin-bottom: clamp(14px, 2.6vh, 24px); }

/* Encryption note — form ke neeche ka trust signal. */
.auth__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: clamp(12px, 2.2vh, 22px) 0 0;
    font-size: .78rem;
    color: var(--ink-faint);
}

.auth__note svg { flex: none; width: 13px; height: 13px; }

/* ================================================================
   Form
   ================================================================ */

/* Reference sheet jaisa 5-column grid. Har field ek cell.
   Yahan controls jaan boojh kar chhote hain taake saari 18 fields aur
   Save button aik hi screen mein aa jayen — login form par asar nahi. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px 16px;
}

.form-grid .field { margin-bottom: 0; }

.form-grid .field__label {
    margin-bottom: 4px;
    font-size: .77rem;
}

.form-grid .field__control {
    padding: 8px 11px;
    font-size: .87rem;
    border-radius: 7px;
}

.form-grid select.field__control {
    padding-right: 28px;
    background-position: right 9px center;
    background-size: 11px;
}

.form-grid .field__hint,
.form-grid .field__error {
    margin-top: 3px;
    font-size: .71rem;
}

.field--span-2 { grid-column: span 2; }
.field--span-3 { grid-column: span 3; }

/* Field chunne wala grid — bulk update template ke liye. */
.checkgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px 18px;
    margin-bottom: 12px;
}

.checkgrid .checkbox { align-items: flex-start; }

.checkbar {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}

/* Bulk preview — purani value halki, nayi value numaya. */
.table td.was { color: var(--ink-faint); text-decoration: line-through; }
.table td.now { color: var(--success); }

.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}

/* .btn ki width:100% neeche define hoti hai, is liye wahan modifier class
   ko maat de deti hai. Yeh scoped rule (0,2,0) us se zyada specific hai —
   action row ke buttons apne content jitne hi chaure rehte hain. */
.form-actions .btn,
.page__actions .btn,
.actionbar .btn {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

.field { margin-bottom: 20px; }

.field__label {
    display: block;
    margin-bottom: 8px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--ink);
}

.field__control {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: .94rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s, box-shadow .15s;
}

.field__control::placeholder { color: var(--ink-faint); }

.field__control:hover { border-color: #d3cfe0; }

.field__control:focus {
    outline: none;
    border-color: var(--brand-purple);
    box-shadow: 0 0 0 3px rgba(139, 68, 196, .14);
}

.field__control.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .1);
}

/* Read-only (system generated) fields — dekhne mein hi ghair-qabil-e-tabdeel. */
.field__control[readonly] {
    color: var(--ink-muted);
    background: var(--canvas);
    border-style: dashed;
    box-shadow: none;
    cursor: default;
}

.field__control[readonly]:hover { border-color: var(--line); }
.field__control[readonly]:focus { border-color: var(--line); box-shadow: none; }

.field--password { position: relative; }

.field--password .field__control { padding-right: 72px; }

.field__toggle {
    position: absolute;
    top: 34px;
    right: 7px;
    padding: 6px 10px;
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-muted);
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: color .15s, background .15s;
}

.field__toggle:hover {
    color: var(--brand-purple);
    background: rgba(139, 68, 196, .08);
}

.field__error {
    display: block;
    margin-top: 7px;
    font-size: .8rem;
    color: var(--danger);
}

.field__hint {
    display: block;
    margin-top: 6px;
    font-size: .76rem;
    color: var(--ink-faint);
}

/* Required marker — laal ke bajaye brand pink. */
.field__req {
    margin-left: 3px;
    font-weight: 700;
    color: var(--brand-pink);
}

/* Select ko native arrow ke bajaye apna caret. */
select.field__control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%236a6580' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    cursor: pointer;
}

/* Placeholder option abhi select hai to text halka rakhein. */
select.field__control:invalid { color: var(--ink-faint); }

.form__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .86rem;
    color: var(--ink-body);
    cursor: pointer;
}

.checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-purple);
}

.link-muted {
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
}

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

/* ================================================================
   Buttons
   ================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 18px;
    font: inherit;
    font-size: .94rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: #fff;
    /* Kuch buttons <a> hain — warna browser ka default underline aa jata hai. */
    text-decoration: none;
    background: var(--brand-gradient);
    background-size: 165% 100%;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: background-position .35s ease, transform .08s, box-shadow .2s;
    box-shadow: 0 10px 24px -12px rgba(139, 68, 196, .8);
}

.btn:hover {
    background-position: 100% 0;
    box-shadow: 0 14px 28px -12px rgba(139, 68, 196, .85);
}

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

.btn:focus-visible {
    outline: 3px solid rgba(139, 68, 196, .35);
    outline-offset: 2px;
}

.btn:disabled { opacity: .6; cursor: not-allowed; }

.btn--ghost {
    width: auto;
    font-size: .88rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

.btn--ghost:hover { background: var(--canvas); box-shadow: var(--shadow-sm); }

/* Form pages par button content jitna chaura ho, poora nahi.
   .btn ke BAAD rakha gaya hai warna width:100% isay overwrite kar deti hai. */
.btn--inline { width: auto; padding-left: 30px; padding-right: 30px; }

/* ================================================================
   Alerts
   ================================================================ */

/* display:flex browser ki [hidden]{display:none} ko maat de deti hai,
   is liye hidden alert khali laal dabbe ki soorat mein nazar aata tha. */
.alert[hidden] { display: none; }

.alert {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
    padding: 12px 14px;
    font-size: .87rem;
    line-height: 1.5;
    border-radius: 9px;
    border: 1px solid transparent;
}

.alert--error {
    color: var(--danger);
    background: var(--danger-bg);
    border-color: #fecdca;
}

.alert--success {
    color: var(--success);
    background: var(--success-bg);
    border-color: #abefc6;
}

.alert__icon { flex: none; font-weight: 700; }

/* ================================================================
   Demo credentials (development only)
   ================================================================ */

/* ================================================================
   Dashboard
   ================================================================ */

/* Brand gradient app bar — login screen wala rang andar bhi chalta hai. */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 28px;
    color: #fff;
    background: var(--brand-gradient);
    border-bottom: 0;
    box-shadow: 0 6px 20px -12px rgba(20, 18, 31, .6);
}

/* Logo coloured line-art hai — gradient par ghul jata, is liye safed chip. */
.topbar__brand img {
    padding: 5px 8px;
    background: #fff;
    border-radius: 9px;
}

.topbar .btn--ghost {
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .38);
    box-shadow: none;
}

.topbar .btn--ghost:hover { background: rgba(255, 255, 255, .28); }

/* Topbar par pill halki safed — warna green/grey gradient par ajeeb lagta hai. */
.topbar .pill {
    color: #fff;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .34);
}

.topbar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.topbar__brand img { width: 56px; height: auto; }

.topbar__brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.topbar__brand-text strong {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: #fff;
}

.topbar__brand-text small {
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar__user {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: .88rem;
    color: rgba(255, 255, 255, .92);
}

/* ------------------------------------------------- Main navigation */

.nav {
    position: relative;
    z-index: 20;
    padding: 0 28px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

.nav__list {
    display: flex;
    align-items: stretch;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav__item { position: relative; }

.nav__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 13px 14px;
    font: inherit;
    font-size: .89rem;
    font-weight: 600;
    color: var(--ink-body);
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color .15s, background-color .15s;
}

/* background-color (shorthand nahi) — warna active item ka gradient
   underline hover par mit jata hai. */
.nav__link:hover { color: var(--brand-purple); background-color: rgba(139, 68, 196, .08); }

.nav__link:focus-visible {
    outline: 2px solid var(--brand-purple);
    outline-offset: -2px;
}

/* Khula hua ya current section — brand gradient underline. */
.nav__link[aria-expanded="true"],
.nav__link.is-active {
    color: var(--ink);
    background-image: var(--brand-gradient);
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: 0 100%;
}

.nav__caret {
    width: 11px;
    height: 11px;
    transition: transform .18s ease;
}

.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* ---- Dropdown ---- */

.nav__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    min-width: 208px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
}

.nav__menu[hidden] { display: none; }

.nav__menu-link {
    display: block;
    padding: 9px 12px;
    font-size: .87rem;
    font-weight: 500;
    color: var(--ink-body);
    text-decoration: none;
    border-radius: 7px;
    transition: color .12s, background .12s;
}

.nav__menu-link:hover,
.nav__menu-link:focus-visible {
    color: var(--ink);
    background: var(--canvas);
}

.nav__menu-link.is-active {
    color: var(--brand-purple);
    background: rgba(139, 68, 196, .08);
}

.page { max-width: 1080px; margin: 0 auto; padding: clamp(14px, 2.8vh, 30px) 28px; }

/* 5-column form pages ko poori chaurai chahiye. */
.page--wide { max-width: 1520px; }

.page__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: clamp(10px, 1.9vh, 20px);
}

.page__head .eyebrow { margin-bottom: 6px; color: var(--brand-purple); }
.page__head .page__title { margin-bottom: 4px; }
.page__head .page__lede  { margin-bottom: 0; }

.pagefoot {
    padding: clamp(14px, 2.4vh, 22px) 28px clamp(16px, 3vh, 30px);
    font-size: .78rem;
    text-align: center;
    color: var(--ink-faint);
}

.page__title { margin: 0 0 6px; font-size: 1.55rem; font-weight: 600; letter-spacing: -.02em; }
.page__lede  { margin: 0 0 26px; color: var(--ink-muted); }

.card {
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

/* Aik ke neeche aik cards/panels ke darmiyan hamesha jagah.
   .split aur .dashgrid apna gap khud rakhte hain, is liye sirf seedhe
   children ko margin di gayi hai. */
.page > .card,
.page > .panel,
.page > form.card {
    margin-bottom: 16px;
}

.page > .card:last-child,
.page > .panel:last-child,
.page > form.card:last-child {
    margin-bottom: 0;
}

.card h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-size: 1rem;
    font-weight: 600;
}

/* Har card heading ke aage chhoti gradient patti — safed pages mein jaan. */
.card > h2::before,
.card > form > h2::before,
.panel__bar h2::before {
    content: "";
    flex: none;
    width: 4px;
    height: 16px;
    margin-right: 2px;
    background: var(--brand-gradient);
    border-radius: 3px;
}

.panel__bar h2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.count {
    padding: 2px 9px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--brand-purple);
    background: rgba(139, 68, 196, .1);
    border-radius: 20px;
}

/* Import page ki column list — do/teen columns mein. */
.collist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px 22px;
    margin: 0 0 16px;
    padding-left: 18px;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--ink-body);
}

.collist em { color: var(--ink-faint); font-style: normal; }

input[type="file"].field__control {
    padding: 8px 11px;
    font-size: .86rem;
    cursor: pointer;
}

.empty {
    margin: 0;
    padding: 26px 0;
    font-size: .9rem;
    text-align: center;
    color: var(--ink-faint);
}

/* Form card + list card side by side. */
.split {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    align-items: start;
    gap: 22px;
}

/* ------------------------------------------------------- Filter bar */

/* Reference screen jaisa 5-per-row filter grid. */
.filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

/* Filter controls compact — 3 rows chhoti jagah mein. */
.filters .field__control {
    padding: 7px 10px;
    font-size: .84rem;
    border-radius: 7px;
}

.filters select.field__control {
    padding-right: 26px;
    background-position: right 8px center;
    background-size: 10px;
}

.filters .btn {
    padding: 8px 14px;
    font-size: .84rem;
    border-radius: 7px;
}

/* Filters ka mobile toggle — desktop par chhupa rehta hai (neeche media query
   mein khulta hai). Panel band hone par grid poora ghayab ho jata hai. */
.filters__toggle { display: none; }
.filters--collapsed { display: none; }

/* Empty date input browser mein khali dikhta hai — label placeholder se aata hai. */
.filters__date { color: var(--ink); }
.filters__date:not(:focus):invalid { color: var(--ink-faint); }

/* Export button — reference ke orange ki jagah brand orange. */
.btn--excel {
    width: auto;
    gap: 8px;
    color: #fff;
    background: linear-gradient(100deg, var(--brand-orange) 0%, #e9683c 100%);
    text-decoration: none;
    box-shadow: 0 10px 24px -12px rgba(240, 129, 43, .9);
}

.btn--excel:hover { filter: brightness(1.04); }
.btn--excel svg { width: 15px; height: 15px; }

/* ======================================================== Dashboard */

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

/* ========================================================== Charts

   Rang validator se guzre huay hain (adjacent CVD ΔE 27.7 protan,
   normal 27.8, contrast dono >= 3:1 safed surface par).
   Slot 1 aur 2 sirf identity ke liye; text kabhi series ka rang nahi pehnta.
   ============================================================== */

.viz {
    --viz-surface: var(--surface);
    --viz-grid:    #e9e6f1;
    --viz-ink:     var(--ink);
    --viz-ink-2:   var(--ink-muted);
    --viz-s1:      #8b44c4;   /* categorical slot 1 */
    --viz-s2:      #c85a12;   /* categorical slot 2 */
}

.chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Bars: aik hi hue har bar par — lambai pehle hi magnitude bata rahi hai. */
.chart__bar { fill: var(--viz-s1); transition: opacity .15s; }
.chart__bar:hover { opacity: .82; }

/* Grid aur axes recessive — hairline, solid, kabhi dashed nahi. */
.chart__grid,
.chart__axis { stroke: var(--viz-grid); stroke-width: 1; }

/* Har text ink token pehnta hai, series ka rang nahi. */
/* Font sizes thori bari hain — SVG viewBox ke saath scale hoti hain,
   aur chhoti screen par 12px se neeche parhi nahi jatin. */
.chart__cat {
    fill: var(--viz-ink);
    font-size: 13.5px;
    font-weight: 600;
    text-anchor: end;
}

.chart__val {
    fill: var(--viz-ink-2);
    font-size: 13.5px;
    font-weight: 600;
}

.chart__val--end { text-anchor: end; fill: var(--viz-ink); }

.chart__tick {
    fill: var(--viz-ink-2);
    font-size: 12.5px;
    text-anchor: end;
}

.chart__tick--x { text-anchor: middle; }

/* Area 10% wash, line 2px. */
.chart__area { fill: var(--viz-s1); opacity: .1; }

.chart__line {
    fill: none;
    stroke: var(--viz-s1);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* End marker — 2px surface ring taake line par saaf baithe. */
.chart__dot {
    fill: var(--viz-s1);
    stroke: var(--viz-surface);
    stroke-width: 2;
}

/* Hover target mark se bara, magar nazar nahi aata. */
.chart__hit { fill: transparent; }
.chart__hit:hover { fill: var(--viz-s1); fill-opacity: .12; }

/* Stacked split — segments 2px surface gap se alag, stroke se nahi. */
.chart__seg--1 { fill: var(--viz-s1); }
.chart__seg--2 { fill: var(--viz-s2); }

.chart__seg-label {
    fill: #fff;                 /* fill ke andar — luminance ke hisaab se safed */
    font-size: 12.5px;
    font-weight: 600;
}

/* Aik hi category — bar chart ki jagah seedha number. */
.figure {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 6px 0 2px;
}

.figure__value {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--ink);
}

.figure__label { font-size: .9rem; color: var(--ink-muted); }

/* Legend — do ya zyada series par hamesha. */
.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    font-size: .85rem;
    color: var(--ink-body);
}

.legend__item { display: inline-flex; align-items: center; gap: 7px; }
.legend__item strong { color: var(--ink); }

.legend__key {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex: none;
}

.legend__key--1 { background: var(--viz-s1); }
.legend__key--2 { background: var(--viz-s2); }

/* ---- KPI cards ---- */

.kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.kpi {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 12px;
    padding: 15px 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s, transform .1s, border-color .18s;
}

/* Upar patli gradient patti — cards flat safed nahi rehte. */
.kpi::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--brand-gradient);
}

.kpi:hover {
    border-color: #d8d3e6;
    box-shadow: 0 14px 30px -18px rgba(20, 18, 31, .45);
    transform: translateY(-1px);
}

.kpi__icon {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

.kpi__icon svg { width: 19px; height: 19px; }

.kpi__icon--brand { color: var(--brand-purple); background: rgba(139, 68, 196, .11); }
.kpi__icon--on    { color: var(--success);      background: var(--success-bg); }
.kpi__icon--off   { color: var(--ink-muted);    background: var(--canvas); }
.kpi__icon--warm  { color: var(--brand-orange); background: rgba(240, 129, 43, .13); }

.kpi__label {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.kpi__value {
    font-size: 1.85rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.025em;
}

.kpi__meta {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding-top: 8px;
    font-size: .76rem;
    color: var(--ink-faint);
    border-top: 1px solid var(--line-soft);
}

/* ---- Two-column dashboard body ---- */

.dashgrid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    margin-bottom: 16px;
}

.dashcol { display: grid; gap: 16px; }

/* Panel ka left-aligned header — view.php ke centred header se alag. */
.panel__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
}

.panel__bar h2 {
    margin: 0;
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.panel__bar .link-muted { font-size: .78rem; }

.panel__body--flush { padding: 0; }

/* ---- Share bars ---- */

.bar {
    display: block;
    width: 100%;
    height: 6px;
    background: var(--line-soft);
    border-radius: 4px;
    overflow: hidden;
}

.bar__fill {
    display: block;
    height: 100%;
    min-width: 3px;
    background: var(--brand-purple);
    border-radius: 4px;
}

.bar__fill--alt { background: var(--brand-pink); }

.meter { margin-bottom: 14px; }
.meter:last-child { margin-bottom: 2px; }

.meter__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    font-size: .85rem;
}

.meter__top strong { font-weight: 600; }

.table__share { width: 130px; }

/* Numeric columns right-aligned rehte hain. */
.table .num { text-align: right; width: 92px; }

.table tfoot td {
    background: var(--canvas);
    border-top: 1px solid var(--line);
    border-bottom: 0;
}

/* ------------------------------------------------------- Pagination */

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 14px;
}

.pager__btn {
    padding: 6px 14px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-body);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.pager__btn:hover { color: var(--ink); border-color: #d3cfe0; }

.pager__btn.is-disabled {
    opacity: .45;
    pointer-events: none;
}

.pager__info { font-size: .84rem; color: var(--ink-muted); }

/* -------------------------------------------- Record info panels */

.infogrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 22px;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.panel__head {
    margin: 0;
    padding: 13px 18px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-align: center;
    color: #fff;
    background: var(--brand-purple);
}

.panel__body { position: relative; padding: 8px 18px 16px; }

.info__row {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 14px;
    padding: 9px 0;
    font-size: .88rem;
    border-bottom: 1px dotted var(--line);
}

.panel__body .info__row:last-child { border-bottom: 0; }

.info__label { color: var(--ink-muted); }
.info__value { font-weight: 600; word-break: break-word; }

/* Photo ki jagah initials — upload feature abhi nahi hai. */
.avatar {
    position: absolute;
    top: 14px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: #fff;
    background: var(--brand-gradient);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

/* Avatar ke neeche wali rows uske andar na chali jayen. */
.panel__body .info__row:nth-child(-n+4) { grid-template-columns: 170px minmax(0, calc(100% - 290px)); }

/* --------------------------------------------------- Action bar */

.actionbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
}

.btn--danger {
    background: linear-gradient(100deg, #d92d20 0%, #b42318 100%);
    box-shadow: 0 10px 24px -12px rgba(180, 35, 24, .85);
}

/* ---------------------------------------------- Export progress */

.exporting {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(20, 18, 31, .5);
    backdrop-filter: blur(2px);
}

.exporting[hidden] { display: none; }

.exporting__box {
    width: 100%;
    max-width: 380px;
    padding: 22px 24px;
    text-align: center;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

.exporting__title {
    margin: 0 0 14px;
    font-size: 1rem;
    font-weight: 600;
}

.exporting__meta {
    margin: 12px 0 0;
    font-size: .82rem;
    color: var(--ink-muted);
}

.progress {
    height: 8px;
    overflow: hidden;
    background: var(--line-soft);
    border-radius: 5px;
}

.progress__bar {
    display: block;
    width: 0;
    height: 100%;
    background: var(--brand-gradient);
    border-radius: 5px;
    transition: width .18s ease;
}

/* -------------------------------------------------------- Modal */

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 20px;
}

.modal[hidden] { display: none; }

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 18, 31, .55);
    backdrop-filter: blur(2px);
}

.modal__dialog {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

.modal__title {
    margin: 0 0 20px;
    padding-bottom: 14px;
    font-size: 1.15rem;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid var(--line-soft);
}

.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

textarea.field__control { resize: vertical; min-height: 76px; }

/* ------------------------------------------------------------ Tabs */

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.tabs__item {
    padding: 7px 14px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink-muted);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    transition: color .15s, border-color .15s, background .15s;
}

.tabs__item:hover { color: var(--ink); border-color: #d3cfe0; }

.tabs__item.is-active {
    color: #fff;
    background: var(--brand-gradient);
    border-color: transparent;
    box-shadow: 0 6px 16px -8px rgba(139, 68, 196, .8);
}

/* ------------------------------------------------------------ Table */

.table-wrap { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.table th,
.table td {
    padding: 11px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
}

.table th {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    background: var(--canvas);
    border-bottom-color: var(--line);
    white-space: nowrap;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: rgba(139, 68, 196, .035); }

/* Zer-e-edit row — brand accent left edge. */
.table tbody tr.is-editing td { background: rgba(139, 68, 196, .07); }
.table tbody tr.is-editing td:first-child { box-shadow: inset 3px 0 0 var(--brand-purple); }

.table__num     { width: 56px; color: var(--ink-faint); }
.table__actions { width: 140px; white-space: nowrap; }

.table__actions form { display: inline; }

.nowrap { white-space: nowrap; }

/* Pichle leave year ki entries — halki, taake maujooda saal namaya rahe. */
.table tbody tr.is-past td { color: var(--ink-faint); }

/* Chaudi listing table — header brand gradient par, jaisa reference mein. */
.card--flush { padding: 0; overflow: hidden; }

.table--data { font-size: .82rem; }

/* Header aik hi solid brand colour — gradient nahi. */
.table--data thead th {
    color: #fff;
    letter-spacing: .06em;
    background: var(--brand-purple);
    border-bottom: 0;
}

.table--data th,
.table--data td { padding: 7px 10px; }

.table--data thead th { font-size: .68rem; }

.table--data td { vertical-align: middle; }

.table--data code {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: .82rem;
    color: var(--brand-purple);
}

/* Sticky Sr No column — horizontal scroll par bhi nazar rahe.
   Background alag alag: header purple, body white — warna sticky rule
   header ka colour bhi safed kar deta hai. */
.table--data th.table__num,
.table--data td.table__num {
    position: sticky;
    left: 0;
    z-index: 1;
}

.table--data thead th.table__num { background: var(--brand-purple); }
.table--data tbody td.table__num { background: var(--surface); }

.table--data tbody tr:hover td.table__num { background: #f3eefa; }

/* Status pill */
.pill {
    display: inline-block;
    padding: 3px 10px;
    font-size: .74rem;
    font-weight: 600;
    border-radius: 20px;
}

.pill--on  { color: var(--success); background: var(--success-bg); }
.pill--off { color: var(--ink-muted); background: var(--canvas); border: 1px solid var(--line); }
.pill--bad { color: var(--danger); background: var(--danger-bg); border: 1px solid #fecdca; }

/* Text-only action buttons */
.linkbtn {
    padding: 4px 8px;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    color: var(--brand-purple);
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.linkbtn:hover { background: rgba(139, 68, 196, .1); }

.linkbtn--danger { color: var(--danger); }
.linkbtn--danger:hover { background: var(--danger-bg); }

/* Listing row ke Details / Profile links — upar neeche stacked. */
/* Row ka waahid action link — "Details Profile". */
.rowlink {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--brand-purple);
    text-decoration: none;
}

.rowlink:hover { text-decoration: underline; }

.dl { display: grid; grid-template-columns: 160px 1fr; gap: 10px 18px; margin: 0; font-size: .92rem; }
.dl dt { color: var(--ink-muted); }
.dl dd { margin: 0; font-weight: 600; }

/* Record page — do columns, taake list chhoti rahe. */
.dl--wide { grid-template-columns: 180px minmax(0, 1fr) 180px minmax(0, 1fr); gap: 14px 20px; }
.dl--wide dt, .dl--wide dd { padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }

/* ================================================================
   Responsive — bare se chhote ki taraf, tarteeb se.

     >1400   full desktop
     1400    5 -> 4 column grids
     1240    KPI 2 column
     1100    4 -> 3 column grids
     1024    TABLET: har cheez compact (padding, type, tables)
     1000    do-column layouts single column
      900    login ka brand panel chhup jata hai
      760    MOBILE: 2 column grids, charts scrollable, touch targets
      620    record page ki rows stack
      560    PHONE: single column, topbar simat jata hai
      400    sab se chhoti screens
   ================================================================ */

/* iOS text ko khud bara na kare. */
html { -webkit-text-size-adjust: 100%; }

/* -------------------------------------------------- 1400: 5 -> 4 col */
@media (max-width: 1400px) {
    .form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .filters   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* -------------------------------------------------- 1240 */
@media (max-width: 1240px) {
    .kpis             { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .auth__brand      { padding-left: 36px; padding-right: 36px; }
    .auth__brand-name { font-size: clamp(2.4rem, 6.4vh, 4.2rem); }
}

/* -------------------------------------------------- 1100: 4 -> 3 col */
@media (max-width: 1100px) {
    .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .filters   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -------------------------------------------------- 1024: TABLET compact */
@media (max-width: 1024px) {
    .page            { padding: 16px 18px; }
    .page__title     { font-size: 1.35rem; }
    .page__lede      { font-size: .88rem; }
    .card            { padding: 14px 16px; }
    .card h2         { margin-bottom: 14px; font-size: .95rem; }
    .panel__bar      { padding: 10px 14px; }
    .panel__body     { padding: 8px 14px 14px; }
    .panel__head     { padding: 11px 14px; font-size: .95rem; }

    .topbar          { padding: 8px 18px; }
    .topbar__brand img { width: 46px; }
    .nav             { padding: 0 18px; }
    .nav__link       { padding: 11px 12px; font-size: .86rem; }

    .table--data     { font-size: .8rem; }
    .table--data th,
    .table--data td  { padding: 6px 9px; }

    .kpi             { padding: 13px 15px; }
    .kpi__value      { font-size: 1.6rem; }
    .filters         { padding: 10px 12px; gap: 8px; }
    .pagefoot        { padding: 14px 18px 18px; }
}

/* -------------------------------------------------- 1000: single column */
@media (max-width: 1000px) {
    /* minmax(0, 1fr) — sirf "1fr" likhne par track apne content ke min-width se
       chhota nahi hota, aur andar ka table poore column ko bahar dhakel deta hai. */
    .split    { grid-template-columns: minmax(0, 1fr); }
    .infogrid { grid-template-columns: minmax(0, 1fr); }
    .dashgrid { grid-template-columns: minmax(0, 1fr); }
    .dl--wide { grid-template-columns: 180px minmax(0, 1fr); }
}

/* -------------------------------------------------- 900: login layout */
@media (max-width: 900px) {
    .auth { grid-template-columns: 1fr; }
    .auth__brand { display: none; }
    .auth__card-logo { display: block; }
    .auth__card-company { display: block; }
    .auth__panel { align-items: flex-start; padding-top: 48px; }
    .auth__system { font-size: 1.25rem; }
}

/* -------------------------------------------------- 760: MOBILE */
@media (max-width: 760px) {
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filters   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpis      { grid-template-columns: 1fr; }
    .table__share { display: none; }

    .page__head      { flex-direction: column; align-items: stretch; }
    .page__actions   { flex-wrap: wrap; }
    .form-actions .btn { flex: 1 1 auto; }

    /* Touch targets — ungli ke liye 40px se kam nahi. */
    .nav__link       { padding: 12px 13px; }
    .nav__menu-link  { padding: 11px 12px; }
    .linkbtn         { padding: 8px 10px; }
    .btn             { padding: 12px 16px; }

    /* iOS 16px se chhote input par khud zoom kar deta hai — layout bigar
       jata hai. Is liye mobile par controls 16px rakhte hain. */
    .field__control,
    .filters .field__control,
    .form-grid .field__control { font-size: 16px; }

    /* Navbar aik line mein scroll karta hai. */
    .nav__list {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav__list::-webkit-scrollbar { display: none; }
    .nav__link { white-space: nowrap; }

    /* Dropdown item ke bajaye poori nav se align hota hai, warna
       daayein kinare wale menu screen se bahar nikal jate hain. */
    .nav        { position: relative; }
    .nav__item  { position: static; }
    .nav__menu  { left: 12px; right: 12px; min-width: 0; }

    /* Charts: chhoti screen par text na-qabil-e-parh ho jata hai,
       is liye aik kam se kam chaurai de kar panel ko scroll karate hain. */
    .viz .panel__body { overflow-x: auto; }
    .chart            { min-width: 520px; }
    .chart--split     { min-width: 300px; }

    .modal__dialog    { max-width: none; }
    .exporting__box   { max-width: none; }

    /* Filters mobile par ek button ke peeche — warna 11 controls ki deewar
       poori screen kha jati hai aur data dekhne ke liye scroll karna parta hai. */
    .filters__toggle {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        padding: 12px 14px;
        font: inherit;
        font-size: .92rem;
        font-weight: 600;
        color: var(--ink-body);
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        cursor: pointer;
    }
    .filters__toggle svg  { width: 16px; height: 16px; color: var(--brand-purple); }
    .filters__toggle span { display: inline-flex; align-items: center; gap: 7px; }

    /* Filter lage hone ka nishan. */
    .filters__dot {
        width: 7px;
        height: 7px;
        background: var(--brand-orange);
        border-radius: 50%;
    }

    /* Toggle ke foran baad panel — dono ke beech spacing ek hi rehti hai. */
    .filters__toggle + .filters { margin-top: -4px; }
}

/* -------------------------------------------------- 620: record rows */
@media (max-width: 620px) {
    .avatar { position: static; margin: 12px 0 4px; }
    .info__row,
    .panel__body .info__row:nth-child(-n+4) { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
}

/* -------------------------------------------------- 560: PHONE */
@media (max-width: 560px) {
    .form-grid { grid-template-columns: 1fr; }
    .filters   { grid-template-columns: 1fr; }
    .field--span-2, .field--span-3 { grid-column: span 1; }

    .page, .topbar, .nav, .pagefoot { padding-left: 14px; padding-right: 14px; }
    .page        { padding-top: 14px; padding-bottom: 14px; }
    .card        { padding: 13px 14px; border-radius: 10px; }
    .page__title { font-size: 1.2rem; }

    /* Topbar simat jata hai — company ka poora naam aur access pill hat jate hain. */
    .topbar__brand img          { width: 40px; }
    .topbar__brand-text small   { display: none; }
    .topbar__brand-text strong  { font-size: .95rem; }
    .topbar .pill               { display: none; }
    .topbar__user               { gap: 10px; font-size: .82rem; }
    .btn--ghost                 { font-size: .82rem; padding: 9px 12px; }

    .dl, .dl--wide { grid-template-columns: 1fr; gap: 2px 0; }
    .dl dd { margin-bottom: 10px; }
    .dl--wide dt { border-bottom: 0; padding-bottom: 0; }

    .auth__system { font-size: 1.02rem; }
    .kpi__value   { font-size: 1.5rem; }
    .figure__value { font-size: 1.9rem; }

    .pager        { gap: 10px; }
    .pager__btn   { padding: 8px 12px; font-size: .8rem; }
    .checkgrid    { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
    .collist      { grid-template-columns: 1fr 1fr; }
    .legend       { gap: 6px 14px; font-size: .8rem; }
}

/* -------------------------------------------------- 400: smallest */
@media (max-width: 400px) {
    .page, .topbar, .nav, .pagefoot { padding-left: 10px; padding-right: 10px; }
    .topbar__user span:first-child { display: none; }   /* sirf Logout rehta hai */
    .checkgrid, .collist { grid-template-columns: 1fr; }
    .form-actions { flex-direction: column-reverse; align-items: stretch; }
    .form-actions .btn { width: 100%; }
    .actionbar .btn { width: 100%; }
}