/* =====================================================================
   TRADING & INVESTMENT MANAGEMENT  --  stylesheet
   ---------------------------------------------------------------------
   Ye roz istemal hone wala hisaab ka system hai, koi numaishi safha
   nahi. Is liye tarteeb ye rakhi gayi hai:

     1. Adad saaf parhe jayen      (tabular numerals, seedhe column)
     2. Ek screen par zyada maloomat  (kam jagah zaya)
     3. Rang sirf matlab ke liye   (surkh = dena hai, sabz = lena hai)
     4. Sajawat aakhir mein        (halki gehrai, narm kinare)

   Har class ka naam waise ka waisa hai jo views istemal karti hain --
   sirf shakal behtar ki gayi hai.
   ===================================================================== */

/* ---- Rang ---------------------------------------------------------- */
:root {
    --bg:          #f2f4f7;
    --bg-accent:   #e9edf3;
    --surface:     #ffffff;
    --surface-2:   #f7f9fb;
    --surface-3:   #eef2f7;
    --border:      #dde3ea;
    --border-soft: #eaeef3;

    --text:        #161d26;
    --text-soft:   #58636f;
    --text-faint:  #8793a1;

    --brand:       #1f6feb;
    --brand-dark:  #1656c4;
    --brand-soft:  #e8f1ff;
    --brand-line:  #bcd6ff;

    --green:       #12794a;
    --green-soft:  #e4f6ec;
    --red:         #c3283a;
    --red-soft:    #fdecee;
    --amber:       #8a5a00;
    --amber-soft:  #fdf3dd;

    --radius:      10px;
    --radius-sm:   7px;

    --shadow:      0 1px 2px rgba(16,24,40,.05),
                   0 1px 3px rgba(16,24,40,.04);
    --shadow-md:   0 2px 4px rgba(16,24,40,.05),
                   0 6px 16px rgba(16,24,40,.07);
    --ring:        0 0 0 3px rgba(31,111,235,.16);

    --sidebar-w:   238px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:          #0d1016;
        --bg-accent:   #11151d;
        --surface:     #161a22;
        --surface-2:   #1b2029;
        --surface-3:   #212734;
        --border:      #2a3140;
        --border-soft: #222836;

        --text:        #e8ecf3;
        --text-soft:   #9ba5b4;
        --text-faint:  #6c7688;

        --brand:       #5b9bff;
        --brand-dark:  #7cb0ff;
        --brand-soft:  #16233a;
        --brand-line:  #24406b;

        --green:       #46c96c;
        --green-soft:  #10251a;
        --red:         #ff6b63;
        --red-soft:    #2c1416;
        --amber:       #e0a92e;
        --amber-soft:  #2a2113;

        --shadow:      0 1px 2px rgba(0,0,0,.35);
        --shadow-md:   0 2px 6px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.3);
        --ring:        0 0 0 3px rgba(91,155,255,.22);
    }
}

/* ---- Bunyad -------------------------------------------------------- */
* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.015em; }
h1 { font-size: 21px; }
h2 { font-size: 15px; }
h3 { font-size: 14px; }

/* Paise aur adaad hamesha ek jaisi chaurai ke -- column seedha lagta hai */
.num, td.num, th.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    text-align: right;
    white-space: nowrap;
}
.nowrap { white-space: nowrap; }
.right  { text-align: right; }
.muted  { color: var(--text-faint); }
.soft   { color: var(--text-soft); }

@media (prefers-reduced-motion: no-preference) {
    .btn, .nav a, .card, .stat, table.data tbody tr,
    input, select, textarea { transition: all .13s ease; }
}

/* ---- Dhancha ------------------------------------------------------- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-brand {
    padding: 17px 18px 15px;
    border-bottom: 1px solid var(--border-soft);
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.sidebar-brand .name {
    font-weight: 700; font-size: 15.5px; letter-spacing: -.02em;
    display: block; color: var(--text);
}
.sidebar-brand .sub {
    font-size: 11px; color: var(--text-faint);
    letter-spacing: .02em; margin-top: 1px; display: block;
}

.nav { padding: 8px 10px 14px; flex: 1; }
.nav-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .09em; color: var(--text-faint);
    padding: 14px 10px 6px;
}

/* Active hisse par baayen taraf ek patli lakeer -- nazar foran jati hai */
.nav a {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 11px; margin-bottom: 2px;
    border-radius: var(--radius-sm); color: var(--text-soft);
    font-size: 13.5px; text-decoration: none;
}
.nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav a.active {
    background: var(--brand-soft); color: var(--brand); font-weight: 600;
}
.nav a.active::before {
    content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--brand);
}
.nav a .ico { width: 16px; text-align: center; opacity: .8; font-size: 13px; }
.nav a.active .ico { opacity: 1; }

/* Jo hissa abhi bana nahi -- dikhta hai magar click nahi hota */
.nav-soon {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 11px; margin-bottom: 2px;
    border-radius: var(--radius-sm); font-size: 13.5px;
    color: var(--text-faint); cursor: default; user-select: none;
}
.nav-soon .ico { width: 16px; text-align: center; font-size: 13px; opacity: .45; }
.nav-soon em {
    margin-left: auto; font-style: normal; font-size: 9.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    background: var(--surface-3); color: var(--text-faint);
    border-radius: 20px; padding: 2px 7px;
}

.sidebar-foot {
    border-top: 1px solid var(--border-soft);
    padding: 12px 15px; font-size: 12px; color: var(--text-faint);
    background: var(--surface-2);
}
.sidebar-foot .who { color: var(--text); font-weight: 600; font-size: 12.5px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 14px 26px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
}
.content { padding: 24px 26px 64px; flex: 1; max-width: 1500px; width: 100%; }

/* ---- Page header --------------------------------------------------- */
.page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.page-head .sub {
    color: var(--text-soft); font-size: 13px; margin-top: 4px; max-width: 76ch;
}

.crumb { font-size: 12.5px; color: var(--text-faint); margin-bottom: 10px; }
.crumb a { color: var(--text-soft); }
.crumb a:hover { color: var(--brand); }

/* ---- Card ---------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 18px;
    overflow: hidden;
}
.card-head {
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-2);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap;
}
.card-head h2 { font-size: 14px; letter-spacing: -.01em; }
.card-body { padding: 18px; }
.card-body.tight { padding: 0; }

/* ---- Stat tiles ---------------------------------------------------- */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 13px; margin-bottom: 20px;
}
.stat {
    position: relative; overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 15px 17px;
    box-shadow: var(--shadow);
}
/* ooper ek patli rangeen lakeer -- halat ek nazar mein */
.stat::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--border);
}
.stat.good::before { background: var(--green); }
.stat.bad::before  { background: var(--red); }

.stat .label {
    font-size: 11px; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
}
.stat .value {
    font-size: 23px; font-weight: 700; margin-top: 6px;
    font-variant-numeric: tabular-nums; letter-spacing: -.03em;
    line-height: 1.15;
}
.stat .hint { font-size: 12px; color: var(--text-soft); margin-top: 4px; }
.stat.good .value { color: var(--green); }
.stat.bad  .value { color: var(--red); }

/* ---- Table --------------------------------------------------------- */
.table-wrap { overflow-x: auto; }

table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
    text-align: left; font-weight: 700; font-size: 10.5px;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-faint);
    padding: 10px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
table.data td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tfoot td {
    padding: 12px 16px; font-weight: 700;
    border-top: 2px solid var(--border);
    background: var(--surface-3);
}
.empty {
    padding: 48px 20px; text-align: center;
    color: var(--text-faint); font-size: 13.5px; line-height: 1.7;
}

.debit  { color: var(--red); }
.credit { color: var(--green); }

/* ---------------------------------------------------------------------
   PAISE KE CHAR RANG  --  poore system mein EK HI MATLAB

     HARA    aa chuka        wasooli ho gayi, paisa haath mein hai
     LAAL    ja chuka        adaigi ho gayi, paisa nikal gaya
     NEELA   dena hai        abhi baqi hai -- humein DENA hai
     NARANGI lena hai        abhi baqi hai -- humein MILNA hai

   Do rang "ho chuka" ke hain aur do "hona baqi hai" ke. Isi liye
   hara/laal gehre hain aur neela/narangi halke -- ek nazar mein pata
   chal jata hai ke kaam mukammal hai ya abhi baqi.

   Ye rang kahin aur se udhaar nahi liye: wahi --green/--red/--brand/
   --amber hain jo poori theme mein pehle se hain, is liye light aur
   dark dono mein theek rehte hain.
   --------------------------------------------------------------------- */
:root {
    --m-received:  var(--green);
    --m-paid:      var(--red);
    --m-topay:     var(--brand);
    --m-toreceive: var(--amber);

    --m-received-soft:  var(--green-soft);
    --m-paid-soft:      var(--red-soft);
    --m-topay-soft:     var(--brand-soft);
    --m-toreceive-soft: var(--amber-soft);
}

.m-received   { color: var(--m-received);  }
.m-paid       { color: var(--m-paid);      }
.m-topay      { color: var(--m-topay);     }
.m-toreceive  { color: var(--m-toreceive); }

/* Raqam ke liye -- thora mota, taake fehrist mein alag nazar aaye */
.num.m-received, .num.m-paid, .num.m-topay, .num.m-toreceive { font-weight: 650; }

/* Chhoti goli (badge) ki shakl */
.m-pill {
    display: inline-block; padding: 2.5px 9px; border-radius: 20px;
    font-size: 11px; font-weight: 650; line-height: 1.55; white-space: nowrap;
}
.m-pill.m-received  { background: var(--m-received-soft);  color: var(--m-received);  }
.m-pill.m-paid      { background: var(--m-paid-soft);      color: var(--m-paid);      }
.m-pill.m-topay     { background: var(--m-topay-soft);     color: var(--m-topay);     }
.m-pill.m-toreceive { background: var(--m-toreceive-soft); color: var(--m-toreceive); }

/* ---- Rangon ki wazahat (legend) ------------------------------------- */
.m-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
    padding: 9px 14px; margin: 0 0 16px;
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius); font-size: 12.5px;
}
.m-legend .m-legend-title {
    font-weight: 700; color: var(--text-soft); margin-right: 2px;
}
.m-legend .m-key { display: inline-flex; align-items: center; gap: 7px; }
.m-legend .m-dot {
    width: 11px; height: 11px; border-radius: 50%; flex: none;
    border: 1px solid rgba(0, 0, 0, .12);
}
.m-legend .m-dot.m-received  { background: var(--m-received);  }
.m-legend .m-dot.m-paid      { background: var(--m-paid);      }
.m-legend .m-dot.m-topay     { background: var(--m-topay);     }
.m-legend .m-dot.m-toreceive { background: var(--m-toreceive); }
.m-legend .m-what { font-weight: 650; color: var(--text); }
.m-legend .m-why  { color: var(--text-faint); }

@media print { .m-legend { display: none; } }

/* ---- Badge --------------------------------------------------------- */
.badge {
    display: inline-block; padding: 2.5px 9px; border-radius: 20px;
    font-size: 11px; font-weight: 650; line-height: 1.55;
    background: var(--surface-3); color: var(--text-soft);
    border: 1px solid transparent;
    white-space: nowrap;
}
.badge.blue  { background: var(--brand-soft); color: var(--brand); }
.badge.green { background: var(--green-soft); color: var(--green); }
.badge.red   { background: var(--red-soft);   color: var(--red); }
.badge.amber { background: var(--amber-soft); color: var(--amber); }

/* ---- Button -------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 15px; border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface); color: var(--text);
    font: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    box-shadow: 0 1px 1px rgba(16,24,40,.03);
}
.btn:hover {
    background: var(--surface-2); text-decoration: none;
    border-color: var(--text-faint);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

.btn.primary {
    background: var(--brand); border-color: var(--brand); color: #fff;
    box-shadow: 0 1px 2px rgba(31,111,235,.3);
}
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

.btn.danger { color: var(--red); border-color: var(--border); }
.btn.danger:hover { background: var(--red-soft); border-color: var(--red); }

.btn.sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form { display: inline; }

/* ---- Form ---------------------------------------------------------- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 15px 18px;
}
.field { display: flex; flex-direction: column; min-width: 0; }
.field.wide { grid-column: 1 / -1; }

.lbl {
    font-size: 12.5px; font-weight: 600; color: var(--text-soft);
    margin-bottom: 5px;
}
.req { color: var(--red); }

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=search], input[type=file], select, textarea {
    font: inherit; font-size: 13.5px;
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    width: 100%;
    min-width: 0;
}
select { min-width: 140px; cursor: pointer; }
textarea { resize: vertical; line-height: 1.5; }

input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--brand); box-shadow: var(--ring);
}
input:disabled, select:disabled, textarea:disabled {
    background: var(--surface-2); color: var(--text-faint); cursor: not-allowed;
}
input.err, select.err, textarea.err { border-color: var(--red); }
input.err:focus, select.err:focus, textarea.err:focus {
    box-shadow: 0 0 0 3px rgba(195,40,58,.15);
}

.hint    { font-size: 12px; color: var(--text-faint); margin-top: 5px; line-height: 1.5; }
.err-msg { font-size: 12px; color: var(--red); margin-top: 5px; font-weight: 500; }

.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--surface);
    font-size: 13px; cursor: pointer; user-select: none;
}
.check:hover { border-color: var(--text-faint); background: var(--surface-2); }
.check input { margin: 0; cursor: pointer; accent-color: var(--brand); }
.check:has(input:checked) {
    border-color: var(--brand); background: var(--brand-soft); color: var(--brand);
    font-weight: 600;
}

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

/* Naam aur qeemat ki jori -- "My account" jaise safhon par */
dl.kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; }
dl.kv dt { color: var(--text-faint); font-size: 12.5px; }
dl.kv dd { margin: 0; font-weight: 550; font-size: 13.5px; }

/* ---- Shipment ka safar (dashboard) ----------------------------------
   Paanch khane ek qatar mein: draft -> in process -> received ->
   selling -> closed. Beech mein ek lakeer khinch di hai jahan se maal
   stock mein aana shuru hota hai -- us ke baayen wale khane khaali
   rang ke, dayen wale bhare hue.                                     */
.ship-track {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 1px; background: var(--border-soft);
}
.ship-step {
    display: flex; flex-direction: column; gap: 2px;
    padding: 14px 12px; background: var(--surface);
    text-decoration: none; color: inherit;
}
.ship-step:hover { background: var(--surface-2); text-decoration: none; }
.ship-step .n {
    font-size: 22px; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.ship-step .l {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-faint);
}
.ship-step .v { font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; }

.ship-step.none .n { color: var(--text-faint); }

/* Abhi pohancha nahi -- maal stock mein nahi */
.ship-step.waiting .n { color: var(--amber); }
.ship-step.waiting     { border-top: 3px solid var(--amber); }

/* Pohanch chuka -- stock mein hai */
.ship-step.in-stock .n { color: var(--green); }
.ship-step.in-stock    { border-top: 3px solid var(--green); }

.ship-step.none        { border-top: 3px solid var(--border); }

@media (max-width: 760px) {
    .ship-track { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Login par karobar ke tabs --------------------------------------
   Do (ya zyada) karobar hon to safha khulte hi dono saamne hon. Chuna
   hua tab bharay hue rang mein, doosra khaali -- door se bhi pata chal
   jaye ke abhi kis mein sign in ho raha hai.                          */
.co-tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin: 4px 0 12px;
}

/* Har karobar ka apna alag khana -- do saaf juda huay dabbe, taake
   ek nazar mein pata chale ke ye do alag cheezein hain. */
.co-tab {
    display: flex; align-items: center; justify-content: center;
    min-height: 62px; padding: 12px 14px;
    text-align: center; line-height: 1.35;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: 14px; font-weight: 650;
    text-decoration: none;
}
.co-tab:hover {
    border-color: var(--brand-line); background: var(--surface);
    color: var(--text); text-decoration: none;
}

/* Chuna hua khana bhara hua -- door se bhi saaf */
.co-tab.is-on {
    background: var(--brand); border-color: var(--brand);
    color: #fff; box-shadow: var(--shadow-md);
}
.co-tab.is-on:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.co-note {
    margin: 0 0 18px; font-size: 12px; line-height: 1.5;
    color: var(--text-faint);
}

/* Teen se zyada karobar, ya tang screen -- neeche khisak jate hain */
@media (max-width: 460px) {
    .co-tabs { grid-template-columns: 1fr; }
}

/* ---- Kaun sa karobar khula hai --------------------------------------
   Sidebar ke sar par ek patti. Rang jaan boojh kar numaya hai: agar
   do companies chal rahi hon to ek nazar mein pata chalna chahiye ke
   is waqt kis ke khaate khule hain.                                   */
.company-strip {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; margin: 0 0 4px;
    background: var(--brand-soft); border-top: 1px solid var(--brand-line);
    border-bottom: 1px solid var(--brand-line);
}
.company-dot {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: var(--brand);
}
.company-name {
    flex: 1; font-size: 12.5px; font-weight: 650; color: var(--brand);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.company-switch { margin: 0; }
.company-switch select {
    min-width: 0; width: 26px; padding: 2px; font-size: 11px;
    border-color: var(--brand-line); background: transparent; color: var(--brand);
    cursor: pointer;
}
.company-switch select:hover { background: var(--surface); }

/* ---- Permission grid ----------------------------------------------- */
table.perm-table td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; }
table.perm-table .checks { gap: 6px; }
table.perm-table .check { padding: 5px 11px; font-size: 12.5px; }
table.perm-table tbody tr:hover { background: transparent; }

/* Jo ijazat darjay (role) se aayi ho: ticked magar chhui na ja sakay.
   Rang jaan boojh kar neela nahi -- taake ek nazar mein farq dikhe ke
   ye is shakhs ki apni ijazat nahi, us ke darjay ki hai. */
/* Selector jaan boojh kar `table.perm-table` se shuru hai: `.check`
   wala `:has(input:checked)` rule is se zyada mazboot nikal jata hai
   agar ise chhota rakhein. */
table.perm-table .check.is-inherited {
    border-style: dashed; border-color: var(--border); cursor: default;
    background: var(--surface-2); color: var(--text-soft); font-weight: 600;
}
table.perm-table .check.is-inherited:hover {
    border-color: var(--border); background: var(--surface-2);
}
table.perm-table .check.is-inherited input { cursor: default; }
table.perm-table .check.is-inherited .badge { font-size: 9.5px; padding: 1px 5px; }

/* ---- Filter bar ---------------------------------------------------- */
.filters {
    display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
}
.filters .field { min-width: 0; }
.filters .lbl { margin-bottom: 4px; font-size: 11.5px; }

/* ---- Flash --------------------------------------------------------- */
.flash { margin-bottom: 18px; display: flex; flex-direction: column; gap: 10px; }
.alert {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 15px; border-radius: var(--radius);
    font-size: 13.5px; line-height: 1.55;
    border: 1px solid transparent;
}
.alert.success { background: var(--green-soft); color: var(--green); }
.alert.error   { background: var(--red-soft);   color: var(--red); }
.alert.warning { background: var(--amber-soft); color: var(--amber); }
.alert.info    { background: var(--brand-soft); color: var(--brand); }
.alert strong  { font-weight: 700; }

/* ---- Login / setup ------------------------------------------------- */
.auth-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background:
        radial-gradient(1000px 500px at 50% -10%, var(--brand-soft), transparent 60%),
        var(--bg);
}
.auth-box {
    width: 100%; max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    padding: 32px 30px;
}
.auth-box .logo { text-align: center; margin-bottom: 24px; }
.auth-box .mark {
    width: 46px; height: 46px; margin: 0 auto 13px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, var(--brand), var(--brand-dark));
    color: #fff; font-size: 22px; font-weight: 700;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(31,111,235,.32);
}
.auth-box h1 { font-size: 18px; }
.auth-box .sub { font-size: 13px; color: var(--text-soft); margin-top: 4px; }
.auth-box .field { margin-bottom: 15px; }
.auth-box .btn { width: 100%; margin-top: 6px; padding: 10px; font-size: 14px; }

/* ---- Chhoti screen ------------------------------------------------- */
@media (max-width: 860px) {
    .layout { flex-direction: column; }
    .sidebar {
        width: 100%; flex: none; height: auto; position: static;
        border-right: 0; border-bottom: 1px solid var(--border);
    }
    .nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; }
    .nav-label { display: none; }
    .nav a, .nav-soon { margin-bottom: 0; }
    .nav a.active::before { display: none; }
    .content { padding: 18px 15px 48px; }
    .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    table.data th { position: static; }
}

/* ---- Letterhead (sirf print par) -----------------------------------
   `display` yahan JAAN BOOJH KAR nahi diya gaya. Pehle .letterhead ke
   andar `display: flex` tha aur wo baad mein aane ki wajah se
   .print-only ke `display: none` ko haraa deta tha -- natija ye ke
   letterhead har safhe par screen par bhi nazar aata tha. Ab dono
   haalatein neeche @media print mein saaf saaf likhi hain.          */
.print-only { display: none !important; }

.letterhead {
    align-items: flex-start; gap: 16px;
    padding-bottom: 12px; margin-bottom: 16px;
    border-bottom: 2px solid #333;
}
.letterhead-logo { max-height: 70px; max-width: 220px; object-fit: contain; }
.letterhead-text { flex: 1; font-size: 11pt; line-height: 1.45; }
.letterhead-name { font-size: 15pt; font-weight: 700; letter-spacing: -.01em; }
.letterhead-date { font-size: 9pt; color: #555; white-space: nowrap; padding-top: 3px; }

/* ---- Print (invoice / statement) ----------------------------------- */
@media print {
    /* Kaghaz par hamesha safed background aur kaali siyahi.
       Warna jis machine ka theme dark hai, us ka print halka
       safed harf safed kaghaz par nikalta hai -- yani kuch nahi.

       Doosra selector sirf isliye likha hai ke dark wala block
       `:root:not([data-theme="light"])` hai; sada `:root` us se
       kamzor parta hai aur haar jata. Barabar ka selector likh dene
       se ye baad mein aane ki wajah se jeet jata hai. */
    :root,
    :root:not([data-theme="light"]) {
        --bg: #fff; --bg-accent: #fff; --surface: #fff;
        --surface-2: #f6f6f6; --surface-3: #ececec;
        --border: #b9c0c9; --border-soft: #d8dde3;
        --text: #000; --text-soft: #333; --text-faint: #555;
        --brand: #000; --brand-dark: #000; --brand-soft: #f2f2f2; --brand-line: #ccc;
        --green: #0a5c37; --green-soft: #f2f2f2;
        --red: #9b1c2c;   --red-soft: #f2f2f2;
        --amber: #6b4600; --amber-soft: #f2f2f2;
        --shadow: none; --shadow-md: none;
    }
    .sidebar, .topbar, .btn, .filters, .flash, .no-print { display: none !important; }
    body { background: #fff; color: #000; }
    .content { padding: 0; max-width: none; }
    .card { border: 0; box-shadow: none; margin: 0 0 10px; }
    .card-head {
        border-bottom: 1px solid #ccc; background: none;
        padding-left: 0; padding-right: 0;
    }
    .card-body { padding-left: 0; padding-right: 0; }
    .stat { border: 1px solid #ccc; box-shadow: none; }
    .stat::before { display: none; }
    table.data th {
        background: #f2f2f2 !important; position: static;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .print-only { display: block !important; }
    .letterhead { display: flex  !important; }

    /* Lambi report kai safhon par jaye to har safhe par header dobara */
    thead { display: table-header-group; }
    tr    { page-break-inside: avoid; }
}


/* =====================================================================
   PROFIT KA BANTWARA  --  shipment ke safhe par
   ---------------------------------------------------------------------
   Teen khane: kul profit, company ka hissa, investors ka hissa. Maqsad
   ye hai ke ek nazar mein dikh jaye ke paisa kis taraf ja raha hai.
   ===================================================================== */
.split-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    border-bottom: 1px solid var(--border-soft);
}
.split-part {
    padding: 14px 16px;
    border-right: 1px solid var(--border-soft);
}
.split-part:last-child { border-right: 0; }
.split-part .label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-soft);
    margin-bottom: 5px;
}
.split-part .value {
    font-size: 20px;
    font-weight: 650;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.split-part .hint { margin-top: 3px; }

/* Beech wala khana -- company ka hissa -- halka sa numaya */
.split-part:nth-child(2) { background: var(--surface-2); }

@media print {
    .split-bar { break-inside: avoid; }
}

/* WhatsApp ka button -- un ka apna sabz rang, taake ek nazar mein pehchana jaye */
.btn.wa {
    background: #25D366;
    border-color: #25D366;
    color: #06301a;
    font-weight: 650;
}
.btn.wa:hover { background: #1fbe5a; border-color: #1fbe5a; }

/* =====================================================================
   ITEMS KA SET  --  invoice ki fehrist mein
   ---------------------------------------------------------------------
   Set ka sarnama upar, us ke andar ki cheezein thori si andar dabi
   hui. Maqsad ye hai ke ek nazar mein pata chale kaunsi lineein ek
   set ki hain aur kaunsi apni alag.
   ===================================================================== */
table.data tr.set-head > td {
    background: var(--surface-2);
    border-top: 2px solid var(--border);
    border-bottom: 0;
}
table.data tr.set-part > td {
    background: color-mix(in srgb, var(--surface-2) 45%, transparent);
}
table.data tr.set-part > td:first-child { padding-left: 6px; }

@media print {
    table.data tr.set-head > td { background: #f2f2f2; }
    table.data tr.set-part > td { background: transparent; }
}

/* =====================================================================
   SHIPMENT KI CHECKLIST
   ---------------------------------------------------------------------
   Har qadam ek qatar. Rang se ek nazar mein pata chalta hai:
     hara   = ho gaya
     ambar  = adhoora (kuch hua, kuch baqi)
     saada  = abhi karna hai
     halka  = is shipment par lagta hi nahi
   ===================================================================== */
.chk-list { display: flex; flex-direction: column; }

.chk-row {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-soft);
    align-items: start;
}
.chk-row:last-child { border-bottom: 0; }

.chk-mark {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; line-height: 1;
    border: 2px solid var(--border);
    color: var(--text-soft);
    margin-top: 1px;
}
.chk-title { font-weight: 600; font-size: 13.5px; }
.chk-note  { font-size: 11.5px; color: var(--text-soft); margin-top: 2px; }
.chk-ledger {
    font-size: 11.5px; margin-top: 3px;
    color: var(--text-soft);
    border-left: 2px solid var(--border);
    padding-left: 7px;
}
.chk-figure {
    font-size: 12.5px; text-align: right; white-space: nowrap;
    font-variant-numeric: tabular-nums; padding-top: 1px;
}

/* ---- ho gaya ---- */
.chk-row.is-done .chk-mark {
    background: var(--good, #1f9d55); border-color: var(--good, #1f9d55); color: #fff;
}
.chk-row.is-done .chk-title  { color: var(--good, #1f9d55); }
.chk-row.is-done .chk-ledger { border-left-color: var(--good, #1f9d55); }

/* ---- adhoora ---- */
.chk-row.is-partial .chk-mark {
    background: var(--warn, #c47f17); border-color: var(--warn, #c47f17); color: #fff;
}
.chk-row.is-partial .chk-ledger { border-left-color: var(--warn, #c47f17); }

/* ---- abhi baqi ---- */
.chk-row.is-todo .chk-figure { color: var(--text-soft); }

/* ---- lagta hi nahi ---- */
.chk-row.is-skipped { opacity: .55; }

/* Wo qadam jo abhi rok raha hai */
.chk-row.is-blocking { background: color-mix(in srgb, var(--bad, #c0392b) 9%, transparent); }
.chk-row.is-blocking .chk-note { color: var(--bad, #c0392b); font-weight: 600; }

@media print {
    .chk-row.is-blocking { background: transparent; }
    .chk-mark { border-color: #999; }
}
/* =====================================================================
   ENTRY GRID  --  Excel jaisi qatarein
   ---------------------------------------------------------------------
   Grid ka poora maqsad RAFTAAR hai, is liye har khana bara aur saaf
   hai: chhote khanon mein ghalti se galat jagah likh jana aam hai, aur
   wo ghalti chup-chaap hoti hai.
   ===================================================================== */

.egrid-keys           { font-size: 12px; }
.egrid-keys b         { font-weight: 600; }

table.egrid-t         { table-layout: auto; }
table.egrid-t td      { padding: 4px 6px; vertical-align: top; }
table.egrid-t th.egrid-sr,
table.egrid-t td.egrid-sr { width: 34px; text-align: center; color: var(--text-faint); font-size: 12px; }
table.egrid-t th.egrid-x,
table.egrid-t td.egrid-x  { width: 42px; text-align: right; }

.egrid-box            { position: relative; }

/* Har khana poori chaurai le -- taake nigah ek seedhi lakeer mein chale */
.egrid-text, .egrid-num {
    width: 100%; font: inherit; font-size: 13.5px;
    padding: 6px 8px; border: 1px solid var(--border);
    border-radius: 5px; background: var(--surface); color: var(--text);
}
.egrid-num            { text-align: right; }
.egrid-text:focus, .egrid-num:focus {
    outline: 0; border-color: var(--brand); box-shadow: var(--ring);
}

/* Naam likha hai magar cheez chuni nahi -- ye khamoshi se nahi guzarna chahiye */
.egrid-text.bad       { border-color: var(--red); background: var(--red-soft); }

.egrid-note           { font-size: 11px; color: var(--text-faint); margin-top: 3px; min-height: 13px; }
.egrid-amt            { text-align: right; font-weight: 600; white-space: nowrap; }

/* ---------- likh kar dhoondne wali fehrist ----------

   POSITION: FIXED  --  aur ye jaan-boojh kar hai.

   Grid ki table `.table-wrap` ke andar hoti hai jis par
   `overflow-x: auto` laga hai. CSS ka qaida ye hai ke ek taraf
   overflow "auto" ho to doosri taraf ka "visible" bhi "auto" ban jata
   hai -- yani fehrist NEECHE SE KAT JATI hai.

   `absolute` rakhte to us kaat se bachne ka koi saaf raasta nahi tha.
   `fixed` kisi bhi overflow se bahir nikal jati hai; jagah JS har dafa
   khane ki asli jagah dekh kar tay karta hai (dekhein grid.js ka
   place()).

   Background ka THOS hona bhi utna hi zaroori hai -- warna neeche wali
   qatarein fehrist ke aar paar nazar aati hain aur safha toota hua
   lagta hai. */
.egrid-drop {
    position: fixed; z-index: 200;
    max-height: 260px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 26px rgba(0,0,0,.28);
}
.egrid-opt {
    padding: 6px 9px; cursor: pointer; display: flex;
    justify-content: space-between; gap: 10px; align-items: baseline;
}
.egrid-opt:hover, .egrid-opt.on { background: var(--brand); color: #fff; }
.egrid-opt-t          { font-size: 13px; }
.egrid-opt-s          { font-size: 11px; opacity: .72; white-space: nowrap; }
.egrid-none           { padding: 8px 9px; font-size: 12px; color: var(--text-faint); }

.egrid-msg            { margin: 10px 14px; }

@media (max-width: 720px) {
    .egrid-keys       { display: none; }
    table.egrid-t td  { padding: 3px 4px; }
}

@media print { .egrid, .egrid-keys { display: none !important; } }
/* =====================================================================
   REPORTS PAR COMPANY KA NAAM  --  screen par bhi
   ---------------------------------------------------------------------
   Baqi safhon par letterhead sirf kaghaz par nikalta hai. Reports par
   wo screen par bhi nazar aata hai, kyunki ek hi code do karobar
   chalata hai aur report aksar kisi ko dikhane ke liye kholi jati hai.
   Us waqt saaf hona chahiye ke ye KIS KAAROBAR ka hisaab hai.

   Screen par ye halka aur chhota hai -- safhe ka asal unwan wo nahi,
   sirf ek nishani hai. Kaghaz par purane naap wapas aa jate hain.
   ===================================================================== */
.letterhead.on-screen {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.letterhead.on-screen .letterhead-logo { max-height: 34px; max-width: 130px; }
.letterhead.on-screen .letterhead-text { font-size: 12px; color: var(--text-soft); line-height: 1.4; }
.letterhead.on-screen .letterhead-name {
    font-size: 15px; font-weight: 700; letter-spacing: 0;
    color: var(--text);
}
.letterhead.on-screen .letterhead-date { font-size: 11.5px; color: var(--text-faint); }

@media print {
    /* Kaghaz par wohi bara letterhead jo hamesha tha */
    .letterhead.on-screen { align-items: flex-start; gap: 16px;
                            padding-bottom: 12px; margin-bottom: 16px;
                            border-bottom: 2px solid #333; }
    .letterhead.on-screen .letterhead-logo { max-height: 70px; max-width: 220px; }
    .letterhead.on-screen .letterhead-text { font-size: 11pt; line-height: 1.45; color: #000; }
    .letterhead.on-screen .letterhead-name { font-size: 15pt; letter-spacing: -.01em; color: #000; }
    .letterhead.on-screen .letterhead-date { font-size: 9pt; color: #555; }
}