/* ============================================================================
   AJSoftsERP ki PURANI stylesheet — ab .erp-legacy ke andar band.

   Template ki do CSS files (882 classes) aur is file (99) mein 23 naam takrate
   hain, aur koi mamooli naam nahi: panel, card, sidebar, topbar, toolbar, tree,
   chip, muted, form-grid, brand, primary, danger, active, selected, small,
   right, tag, check, warn. Bila scope dono saath rakhte hi purani 13 screens
   ki shakal bigar jati — jo file baad mein load ho wo doosri ko daba deti.

   Class rename 100+ jagah haath lagana tha. Us ki jagah har selector ke aage
   .erp-legacy laga hai, aur MainLayout @Body ko usi class mein lapetta hai.
   Yani ye qawaid sirf purani screens par chalte hain; naye Aj* controls
   in se mehfooz hain.

   :root, html, body aur * bahar rakhe gaye — variables aur box-sizing poore
   document par chahiye.

   Screens jaise jaise Aj* par jayen, is file se hisse hatte jayen. Aakhri
   screen ke baad poori file ja sakti hai.
   ============================================================================ */

/* AJSoftsERP portal shell — one stylesheet, no framework.
   A factory floor terminal and an accountant's laptop both have to read this,
   so: high contrast, generous hit targets, no animation that costs a repaint. */

:root {
    --ink: #16202a;
    --ink-soft: #5b6b7a;
    --line: #dde4ea;
    --bg: #f4f6f8;
    --panel: #ffffff;
    --brand: #0b5d3b;      /* AJSoft green */
    --brand-dark: #084229;
    --accent: #b8860b;
    --warn-bg: #fdf6e3;
    --warn-line: #e0c060;
    --err-bg: #fdeceb;
    --err-line: #e4b3ae;
    --ok-bg: #eaf5ee;
    --ok-line: #a8d3b8;
    --sidebar: 300px;
    --topbar: 56px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--ink);
    font: 14px/1.5 "Segoe UI", "Noto Nastaliq Urdu", system-ui, sans-serif;
}

.erp-legacy a { color: var(--brand); text-decoration: none; }
.erp-legacy a:hover { text-decoration: underline; }
.erp-legacy code { background: #eef2f5; padding: 1px 5px; border-radius: 3px; font-size: 12px; }

.erp-legacy h1 { font-size: 22px; margin: 0 0 16px; }
.erp-legacy h2 { font-size: 17px; margin: 28px 0 10px; }
.erp-legacy h3 { font-size: 13px; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }

.erp-legacy .muted { color: var(--ink-soft); }
.erp-legacy .small { font-size: 12px; }
.erp-legacy .pad { padding: 16px; }
.erp-legacy .pad-sm { padding: 8px 12px; }

/* ------------------------------------------------------------------ shell */

.erp-legacy .shell { display: flex; flex-direction: column; min-height: 100vh; }

.erp-legacy .topbar {
    height: var(--topbar);
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.erp-legacy .brand { display: flex; align-items: center; gap: 10px; color: #fff; }
.erp-legacy .brand:hover { text-decoration: none; }
.erp-legacy .brand-mark {
    background: #fff; color: var(--brand);
    font-weight: 700; letter-spacing: -.02em;
    width: 30px; height: 30px; border-radius: 6px;
    display: grid; place-items: center;
}
.erp-legacy .brand-mark.big { width: 46px; height: 46px; font-size: 20px; margin: 0 auto 10px; background: var(--brand); color: #fff; }
.erp-legacy .brand-text { font-weight: 600; letter-spacing: .02em; }

.erp-legacy .topbar-context { display: flex; align-items: center; gap: 10px; }
.erp-legacy .company { font-weight: 600; }
.erp-legacy .chip {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
}
.erp-legacy .chip-warn { background: var(--accent); border-color: var(--accent); }

.erp-legacy .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.erp-legacy .who { font-size: 13px; opacity: .9; }
.erp-legacy .inline { display: inline; }
.erp-legacy .linkbutton {
    background: none; border: none; color: #fff;
    text-decoration: underline; cursor: pointer;
    font: inherit; padding: 0;
}

.erp-legacy .body { display: flex; flex: 1; align-items: stretch; }

.erp-legacy .sidebar {
    width: var(--sidebar);
    flex: 0 0 var(--sidebar);
    background: var(--panel);
    border-right: 1px solid var(--line);
    overflow-y: auto;
    max-height: calc(100vh - var(--topbar));
    position: sticky;
    top: var(--topbar);
}

.erp-legacy .content { flex: 1; padding: 24px 28px; min-width: 0; }

/* ------------------------------------------------------------------- menu */

.erp-legacy .nav-root, .erp-legacy .nav-list { list-style: none; margin: 0; padding: 0; }
.erp-legacy .nav-root { padding: 8px 0 24px; }

.erp-legacy .nav-branch > summary {
    cursor: pointer;
    padding: 7px 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
.erp-legacy .nav-branch > summary:hover { background: #f0f4f7; }
.erp-legacy .nav-branch.level-2 > summary { font-weight: 500; padding-left: 26px; font-size: 13px; }
.erp-legacy .nav-branch.level-3 > summary { font-weight: 400; padding-left: 38px; font-size: 13px; }
.erp-legacy .nav-branch > summary .count {
    margin-left: auto;
    font-size: 11px;
    color: var(--ink-soft);
    background: #eef2f5;
    border-radius: 999px;
    padding: 0 7px;
}

.erp-legacy .nav-leaf {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 40px;
    color: var(--ink);
    font-size: 13px;
    border-left: 3px solid transparent;
}
.erp-legacy .nav-leaf:hover { background: #f0f4f7; text-decoration: none; }
.erp-legacy .nav-leaf.active { background: #e8f1ec; border-left-color: var(--brand); font-weight: 600; }
.erp-legacy .nav-branch.level-2 .nav-leaf { padding-left: 52px; }
.erp-legacy .nav-branch.level-3 .nav-leaf { padding-left: 64px; }

.erp-legacy .dot-sensitive {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); margin-left: auto;
}

/* ----------------------------------------------------------------- search */

.erp-legacy .search { position: relative; }
.erp-legacy .search input {
    width: 260px;
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.12);
    color: #fff;
    border-radius: 5px;
    font: inherit;
}
.erp-legacy .search input::placeholder { color: rgba(255,255,255,.75); }
.erp-legacy .search input:focus { outline: 2px solid #fff; background: #fff; color: var(--ink); }

.erp-legacy .search-results {
    position: absolute;
    top: 110%; left: 0;
    width: 380px;
    max-height: 420px;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    list-style: none;
    margin: 0; padding: 4px 0;
    z-index: 40;
}
.erp-legacy .search-results a { display: block; padding: 7px 12px; color: var(--ink); }
.erp-legacy .search-results a:hover { background: #f0f4f7; text-decoration: none; }
.erp-legacy .r-name { display: block; }
.erp-legacy .r-meta { display: block; font-size: 11px; color: var(--ink-soft); }

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

.erp-legacy .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.erp-legacy .card, .erp-legacy .panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
}
.erp-legacy .panel { max-width: 640px; }
.erp-legacy .big { font-size: 20px; font-weight: 600; margin: 0 0 4px; }

/* ------------------------------------------------------------------ login */

.erp-legacy .login-page { min-height: 70vh; display: grid; place-items: center; padding: 40px 16px; }
.erp-legacy .login-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 10px 32px rgba(16,32,42,.08);
    padding: 28px;
    width: 100%;
    max-width: 400px;
}
.erp-legacy .login-head { text-align: center; margin-bottom: 20px; }
.erp-legacy .login-head h1 { margin: 0 0 2px; font-size: 20px; }

.erp-legacy .stack { display: flex; flex-direction: column; gap: 6px; }
.erp-legacy .stack label { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-top: 8px; }
.erp-legacy .stack input {
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 5px;
    font: inherit;
}
.erp-legacy .stack input:focus { outline: 2px solid var(--brand); border-color: var(--brand); }

.erp-legacy .button {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--panel);
    font: inherit;
    cursor: pointer;
}
.erp-legacy .button.primary { background: var(--brand); border-color: var(--brand-dark); color: #fff; margin-top: 16px; }
.erp-legacy .button.primary:hover { background: var(--brand-dark); }

.erp-legacy .alert { border-radius: 6px; padding: 10px 12px; margin: 0 0 14px; border: 1px solid; font-size: 13px; }
.erp-legacy .alert-error { background: var(--err-bg); border-color: var(--err-line); }
.erp-legacy .alert-warn { background: var(--warn-bg); border-color: var(--warn-line); }
.erp-legacy .alert-ok { background: var(--ok-bg);  border-color: var(--ok-line); }

.erp-legacy .rules { margin: 16px 0 0; padding-left: 18px; font-size: 12px; color: var(--ink-soft); }
.erp-legacy .footnote { margin-top: 18px; }

/* ---------------------------------------------------------------- blazor */

.erp-legacy #blazor-error-ui {
    background: var(--warn-bg);
    border-top: 1px solid var(--warn-line);
    bottom: 0; display: none; left: 0;
    padding: 10px 16px; position: fixed;
    width: 100%; z-index: 1000;
}
.erp-legacy #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 14px; top: 8px; }

@media (max-width: 900px) {
    .erp-legacy .sidebar { position: static; width: 240px; flex-basis: 240px; }
    .erp-legacy .search input { width: 170px; }
    .erp-legacy .topbar-context .company { display: none; }
}

/* ------------------------------------------------------- master screens */
/* Added by the Branch screen. Every other master reuses these, so the next
   1,329 screens need no CSS of their own. */

.erp-legacy .screen-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.erp-legacy .screen-head h1 { margin: 0 0 2px; }
.erp-legacy .screen-head > :last-child { margin-left: auto; }

.erp-legacy .toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.erp-legacy .toolbar input[type="search"] {
    padding: 7px 11px; border: 1px solid var(--line); border-radius: 5px;
    font: inherit; min-width: 260px; background: var(--panel);
}
.erp-legacy .toolbar input[type="search"]:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
.erp-legacy .grow { flex: 1; }
.erp-legacy .check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.erp-legacy .right { text-align: right; }
.erp-legacy .mt { margin-top: 10px; }

.erp-legacy table.grid {
    width: 100%; border-collapse: collapse; background: var(--panel);
    border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.erp-legacy table.grid th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-soft); background: #f7f9fa; padding: 9px 12px;
    border-bottom: 1px solid var(--line); font-weight: 600;
}
.erp-legacy table.grid td { padding: 9px 12px; border-bottom: 1px solid #eef2f5; }
.erp-legacy table.grid tbody tr:last-child td { border-bottom: none; }
.erp-legacy table.grid tbody tr:hover { background: #f7fafb; }
/* Inactive rows are dimmed, not hidden — they still exist and still matter. */
.erp-legacy .row-inactive td { opacity: .55; }
.erp-legacy table.grid td a + button { margin-left: 12px; }

.erp-legacy .pager { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.erp-legacy .button.danger { color: #a4271d; border-color: #e4b3ae; }
.erp-legacy .button.danger:hover { background: var(--err-bg); }
.erp-legacy .linkbutton.danger { color: #a4271d; }
.erp-legacy .linkbutton { background: none; border: none; padding: 0; font: inherit; cursor: pointer;
              color: var(--brand); text-decoration: underline; }

/* -------------------------------------------------------------- the form */

.erp-legacy .form .row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.erp-legacy .form .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; flex: 1 1 100%; }
.erp-legacy .form .w-third { flex: 1 1 calc(33% - 16px); }
.erp-legacy .form .w-two-third { flex: 1 1 calc(66% - 16px); }
.erp-legacy .form label { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.erp-legacy .form input, .erp-legacy .form select, .erp-legacy .form textarea {
    padding: 8px 11px; border: 1px solid var(--line); border-radius: 5px; font: inherit;
}
.erp-legacy .form input:focus, .erp-legacy .form select:focus, .erp-legacy .form textarea:focus {
    outline: 2px solid var(--brand); border-color: var(--brand);
}
.erp-legacy .form input:disabled, .erp-legacy .form select:disabled, .erp-legacy .form textarea:disabled {
    background: #f3f6f8; color: var(--ink-soft);
}
.erp-legacy .form .hint { font-size: 11px; color: var(--ink-soft); }
.erp-legacy .req { color: #a4271d; }
.erp-legacy .form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px;
                border-top: 1px solid var(--line); padding-top: 16px; }

/* --------------------------------------------------------------- confirm */

.erp-legacy .modal-backdrop {
    position: fixed; inset: 0; background: rgba(16,32,42,.45);
    display: grid; place-items: center; z-index: 100;
}
.erp-legacy .modal {
    background: var(--panel); border-radius: 10px; padding: 22px;
    width: 100%; max-width: 420px; box-shadow: 0 16px 48px rgba(0,0,0,.24);
}
.erp-legacy .modal h3 { text-transform: none; font-size: 16px; color: var(--ink); margin-bottom: 8px; }
.erp-legacy .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* ==========================================================================
   ERP template — ErpListView, ErpEditView, ErpField, ErpTree, ErpMatrix

   Ye hissa un components ke liye hai jo har screen istemal karti hai. Rang
   aur naap upar wale variables se aate hain, yahan dobara nahi likhe — warna
   ek din header ka sabz aur button ka sabz alag ho jate hain.
   ========================================================================== */

.erp-legacy .head-actions { display: flex; gap: 10px; align-items: center; }

/* ------------------------------------------------------------ paighaam */

.erp-legacy .alert-ok { background: #e8f6ee; border: 1px solid #9fd4b6; color: #124c2e; }
.erp-legacy .alert-info { background: #eef4f8; border: 1px solid #b9cede; color: #1d3b4f; }
.erp-legacy .alert-warn { background: #fdf6e3; border: 1px solid #e0c060; color: #5b4a10; }
.erp-legacy .alert .linkbutton { margin-left: 10px; }

/* -------------------------------------------------------------- ErpField

   form-grid do khanon ka hai. w-full poori chaurai leta hai, w-third teesra
   hissa. Chhoti screen par sab neeche upar ho jate hain.                    */

.erp-legacy .form-panel { padding: 22px; }
.erp-legacy .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.erp-legacy .form-grid .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.erp-legacy .form-grid .w-full { grid-column: 1 / -1; }
.erp-legacy .form-grid .w-half { grid-column: auto; }
.erp-legacy .form-grid .w-third { grid-column: auto; }
.erp-legacy .form-grid label { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.erp-legacy .form-grid input, .erp-legacy .form-grid select, .erp-legacy .form-grid textarea {
    padding: 8px 11px; border: 1px solid var(--line); border-radius: 5px;
    font: inherit; width: 100%; box-sizing: border-box; background: #fff;
}
.erp-legacy .form-grid input:focus, .erp-legacy .form-grid select:focus, .erp-legacy .form-grid textarea:focus {
    outline: 2px solid var(--brand); border-color: var(--brand);
}
.erp-legacy .form-grid fieldset { border: none; padding: 0; margin: 0; }
.erp-legacy .form-grid input[type=checkbox] { width: auto; }
.erp-legacy .field-hint { font-size: 11px; color: var(--ink-soft); }
.erp-legacy .field-error { font-size: 11px; color: #a4271d; }
.erp-legacy .field-bad input, .erp-legacy .field-bad select, .erp-legacy .field-bad textarea { border-color: #d38a84; }

@media (max-width: 820px) {
    .erp-legacy .form-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- ErpTree */

.erp-legacy .tree, .erp-legacy .tree ul { list-style: none; margin: 0; padding: 0; }
.erp-legacy .tree ul { margin-left: 18px; border-left: 1px dotted var(--line); padding-left: 10px; }
.erp-legacy .tree-node > details > summary { cursor: pointer; padding: 3px 0; }
.erp-legacy .tree-node > details > summary::marker { color: var(--ink-soft); }
.erp-legacy .tree-label, .erp-legacy .tree-leaf {
    display: inline-block; padding: 3px 8px; border-radius: 5px; cursor: pointer;
}
.erp-legacy .tree-leaf { margin-left: 16px; }
.erp-legacy .tree-label:hover, .erp-legacy .tree-leaf:hover { background: #eef3f0; }
.erp-legacy .tree-label.selected, .erp-legacy .tree-leaf.selected { background: var(--brand); color: #fff; }
.erp-legacy .tree code { font-size: 11px; color: var(--ink-soft); margin-right: 6px; }
.erp-legacy .tree .selected code { color: #cfe6da; }

/* ------------------------------------------------------------- ErpMatrix

   Matrix chaurai mein bara hota hai (17 actions), is liye us ka apna scroll
   hai. Pehla column jama rehta hai warna scroll karte hi pata nahi chalta ke
   kaun si screen ki row hai.                                                */

.erp-legacy .matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.erp-legacy .matrix { min-width: 100%; border-collapse: separate; border-spacing: 0; }
.erp-legacy .matrix th, .erp-legacy .matrix td { border-bottom: 1px solid var(--line); }
.erp-legacy .matrix-corner, .erp-legacy .matrix-row {
    position: sticky; left: 0; background: var(--panel); z-index: 2;
    text-align: left; font-weight: 500; min-width: 22rem;
    border-right: 1px solid var(--line);
}
.erp-legacy .matrix-col { text-align: center; padding: 6px 4px; width: 3.6rem; vertical-align: bottom; }
.erp-legacy .matrix-col-label { display: block; font-size: 10px; letter-spacing: .04em; }
.erp-legacy .matrix-cell { text-align: center; padding: 4px; }
.erp-legacy .matrix-na { background: #f6f8f7; }
.erp-legacy .linkbutton.tiny { font-size: 10px; margin-left: 6px; text-transform: lowercase; }

/* --------------------------------------------------- do hisson wali screen

   Menu Master jaisi screen: bayin taraf darakht, dayin taraf form. Chhoti
   screen par upar neeche ho jate hain — tree ko apni oonchai aur apna scroll
   milta hai, warna 1,330 rows poora safha kha jati hain.                     */

.erp-legacy .split { display: grid; grid-template-columns: minmax(320px, 34%) 1fr; gap: 18px; align-items: start; }
.erp-legacy .split-left { max-height: 74vh; overflow: auto; }
.erp-legacy .split-left input[type=search] {
    width: 100%; box-sizing: border-box; margin-bottom: 12px;
    padding: 8px 11px; border: 1px solid var(--line); border-radius: 5px; font: inherit;
}

@media (max-width: 980px) {
    .erp-legacy .split { grid-template-columns: 1fr; }
    .erp-legacy .split-left { max-height: 40vh; }
}

/* ------------------------------------------------------------------- tag

   Chhota nishan: "system", "locked", "default", "sensitive". Ye wo baatein
   hain jo row ke andar se batani hoti hain — alag column banate to chhe aur
   column bante jo aksar khali rehte.                                        */

.erp-legacy .tag {
    display: inline-block; margin-left: 6px; padding: 1px 7px;
    border-radius: 10px; font-size: 10px; letter-spacing: .04em;
    text-transform: uppercase; background: #e6edea; color: #35594a;
    vertical-align: middle;
}
.erp-legacy .tag.danger { background: #fdecec; color: #8c2b23; }
.erp-legacy .tag.warn { background: #fdf6e3; color: #6d5813; }

/* Wo row jo tawajjo maangti hai — nakaam login, block kiya hua device,
   zinda SoD takraw. Laal nahi, kyunke ye ghalti nahi hai; dekhne ki cheez hai. */
.erp-legacy .row-warn td { background: #fffaf0; }