/* SA — white and light blue */
:root {
  --ink: #1b2b3f; --muted: #5f7186; --paper: #f2f7fc; --panel: #ffffff; --line: #d6e4f2; --line-2: #e8f0f8;
  --brand: #2a86d6; --brand-2: #1f6fb8; --brand-soft: #e3f1fc; --brass: #6cc0f0; --brass-soft: #e6f5fd; --sky-ink: #174a7a; --side: #ffffff; --side-2: #eaf4fd;
  --bad: #b42318; --bad-soft: #fbe9e7; --ok: #2b7a4b; --ok-soft: #e4f2e9; --warn: #9a5b06; --warn-soft: #fbf0dc;
  --num: "Bahnschrift", "DIN Alternate", "Segoe UI", system-ui, sans-serif;
  --ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --r: 6px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--paper); color: var(--ink); font: 14px/1.45 var(--ui); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: var(--brand-2); }
h1, h2, h3, h4 { font-family: var(--num); font-weight: 600; margin: 0; letter-spacing: .1px; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
kbd { font: 11px var(--ui); background: rgba(255,255,255,.18); border-radius: 3px; padding: 1px 4px; margin-left: 4px; }
.muted { color: var(--muted); } .small { font-size: 12px; } .ok { color: var(--ok); } .bad { color: var(--bad); } .warn { color: var(--warn); }
.logo { width: 40px; height: 40px; border-radius: 50%; flex: none; display: block; background: #fff; }
.logo.lg { width: 64px; height: 64px; } .logo.xl { width: 88px; height: 88px; }
.mark { width: 38px; height: 38px; border-radius: 8px; background: var(--brand); color: var(--brass); display: grid; place-items: center; font: 700 22px var(--num); flex: none; }

/* boot & login */
.boot { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--muted); }
.login { min-height: 100%; display: grid; place-items: center; padding: 16px; background: linear-gradient(180deg, var(--brand) 0 42%, var(--paper) 42%); }
.login-card { width: min(380px, 100%); background: var(--panel); border-radius: 10px; padding: 28px; box-shadow: 0 18px 40px -18px rgba(15, 20, 60, .45); display: grid; gap: 12px; }
.login-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; } .login-brand h1 { font-size: 20px; } .login-brand p { margin: 0; color: var(--muted); font-size: 13px; }
.err { color: var(--bad); min-height: 1em; margin: 0; font-size: 13px; }

/* shell */
.app { display: grid; grid-template-columns: 232px 1fr; height: 100vh; }
.side-nav { background: var(--brand); color: #d6dbf3; display: flex; flex-direction: column; min-height: 0; }
.brand { display: flex; gap: 10px; align-items: center; padding: 16px 16px 12px; } .brand .logo { box-shadow: 0 0 0 2px rgba(255,255,255,.15); }
.brand b { display: block; color: #fff; font: 600 15px var(--num); } .brand span { font-size: 11.5px; color: #9aa5d6; }
#nav { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
.nav-group { margin-top: 10px; } .nav-h { font-size: 11.5px; color: #8f9ad0; padding: 4px 10px; }
#nav a { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 5px; color: #e1e5f7; text-decoration: none; font-size: 13.5px; }
#nav a i { font-style: normal; width: 16px; text-align: center; color: #8e99d3; }
#nav a:hover { background: rgba(255,255,255,.07); }
#nav a.on { background: #fff; color: var(--brand); font-weight: 600; } #nav a.on i { color: var(--brass); }
.side-foot { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; }
.who b { display: block; color: #fff; } .who span { color: #9aa5d6; }
.side-foot .link { color: #b6c0e8; padding: 0; margin-top: 6px; }
.work { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.top { display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
.menu { display: none; }
.search { position: relative; flex: 1; max-width: 560px; }
.search input { width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); font: inherit; }
.gres { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 12px 28px -12px rgba(0,0,0,.25); z-index: 30; max-height: 60vh; overflow: auto; }
.gres a { display: block; padding: 8px 12px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line-2); } .gres a:hover { background: var(--brand-soft); }
.gres a span { display: block; font-size: 12px; color: var(--muted); } .pad { padding: 10px 12px; }
.top-r { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--muted); white-space: nowrap; }
.save-state::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 6px; vertical-align: 1px; }
.save-state[data-state=saving]::before { background: var(--brass); } .save-state[data-state=error]::before { background: var(--bad); }
.file-badge .ok { color: var(--ok); }
.main { flex: 1; overflow-y: auto; padding: 20px 24px 40px; }

/* screen head */
.sh { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.sh h2 { font-size: 22px; } .sh p { margin: 2px 0 0; color: var(--muted); }
.sh-act { display: flex; gap: 8px; flex-wrap: wrap; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 500 13.5px var(--ui); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: #b9bfd4; background: #f7f8fc; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; } .btn.primary:hover { background: var(--brand-2); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger-o { color: var(--bad); border-color: #e7b7b2; }
.btn.sm { padding: 4px 10px; font-size: 12.5px; } .btn.block { width: 100%; padding: 10px; }
.btn:disabled { opacity: .45; cursor: default; }
.link { background: none; border: 0; color: var(--brand-2); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.link.danger { color: var(--bad); } .link.warn { color: var(--warn); }
.icon-btn { background: none; border: 0; font-size: 16px; cursor: pointer; color: var(--muted); padding: 4px 8px; border-radius: 4px; } .icon-btn:hover { background: var(--paper); }

/* panels & layout */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.panel h3 { font-size: 15px; margin-bottom: 10px; } .panel h3.mt { margin-top: 16px; }
.ph-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; } .ph-row h3 { margin: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .grid2 > .panel { margin-bottom: 16px; }
.pos { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
.recv { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.stack { display: grid; gap: 12px; } .box { border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px; background: #fafbfd; } .box p { margin: 4px 0 8px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.kpi span { display: block; font-size: 12.5px; color: var(--muted); }
.kpi b { display: block; font: 600 24px/1.2 var(--num); margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.kpi small { font-size: 12px; color: var(--muted); }
.kpi.money b { color: var(--brand); } .kpi.money { border-top: 3px solid var(--brass); } .kpi.bad b { color: var(--bad); }
.kpis.small .kpi b { font-size: 19px; }
.split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .split div { background: var(--paper); border-radius: var(--r); padding: 8px 10px; }
.split span { font-size: 12px; color: var(--muted); display: block; } .split b { font: 600 18px var(--num); }
.chart { width: 100%; height: auto; display: block; } .chart .grid { stroke: var(--line-2); } .chart .lbl { font: 10px var(--ui); fill: var(--muted); } .chart .val { font: 600 9.5px var(--num); fill: var(--ink); }

/* forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; } .form-grid.g3 { grid-template-columns: repeat(3, 1fr); } .form-grid.g4 { grid-template-columns: repeat(4, 1fr); }
.span2 { grid-column: span 2; } .span3 { grid-column: span 3; } .grow { flex: 1; }
.fld { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .fld > span { font-size: 12.5px; color: var(--muted); }
.fld input, .fld select, .fld textarea, .cell { font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); width: 100%; min-width: 0; }
.fld input:focus, .fld select:focus, .fld textarea:focus, .cell:focus { border-color: var(--brand-2); outline: 2px solid var(--brand-soft); }
.fld input[readonly] { background: var(--paper); }
input[type=number] { font-variant-numeric: tabular-nums; }
.cell { width: 96px; text-align: right; padding: 4px 6px; }
.actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; flex-wrap: wrap; }
.form-grid h4 { font-size: 13px; color: var(--muted); margin-top: 8px; }
.totals { display: flex; gap: 10px; } .totals div { flex: 1; background: var(--brass-soft); border-radius: var(--r); padding: 8px 10px; }
.totals span { display: block; font-size: 12px; color: var(--warn); } .totals b { font: 600 20px var(--num); font-variant-numeric: tabular-nums; }
.hint { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.gblock { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 10px; } .gblock:first-child { border: 0; margin: 0; padding: 0; }
.gnum { grid-column: 1 / -1; font: 600 13px var(--num); color: var(--brand-2); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; } .filters .fld { min-width: 150px; }
.sumbar { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 10px; color: var(--muted); font-size: 13px; } .sumbar b { color: var(--ink); font: 600 15px var(--num); margin-left: 4px; } .sumbar b.bad { color: var(--bad); } .sumbar b.ok { color: var(--ok); }
.sumbar .chart { max-width: 760px; }
.alert { padding: 8px 12px; border-radius: var(--r); margin: 6px 0; font-size: 13.5px; } .alert.bad { background: var(--bad-soft); color: var(--bad); } .alert.warn { background: var(--warn-soft); color: var(--warn); } .alert.ok { background: var(--ok-soft); color: var(--ok); }

/* tables */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; background: #f5f6fb; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; }
.tbl td { padding: 7px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.tbl td.wrap { white-space: normal; min-width: 180px; }
.tbl .n { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr.click { cursor: pointer; } .tbl tr.click:hover td { background: var(--brand-soft); }
.tbl tr.late td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.tbl tfoot td { font-weight: 600; background: #f5f6fb; border-top: 1px solid var(--line); }
.tbl .empty { text-align: center; color: var(--muted); padding: 24px; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: flex-end; padding: 8px 2px; font-size: 12.5px; color: var(--muted); }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11.5px; background: var(--line-2); color: var(--muted); font-weight: 500; }
.badge.open { background: var(--ok-soft); color: var(--ok); } .badge.close { background: #e9eef5; color: #3b5675; } .badge.warn { background: var(--warn-soft); color: var(--warn); }

/* account: the qist card */
.acc-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.qist { background: var(--brand); color: #e9ecf8; border-radius: 10px; padding: 18px; position: relative; overflow: hidden; }
.qist::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border: 22px solid rgba(214, 164, 60, .12); border-radius: 50%; }
.qist-head { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; position: relative; z-index: 1; }
.qist-head span { font-size: 12px; color: #a9b3e0; display: block; } .qist-head b { font: 600 22px var(--num); color: #fff; font-variant-numeric: tabular-nums; } .qist-head b.bad { color: #ffb4a8; }
.qist-grid { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; position: relative; z-index: 1; }
.q { border-radius: 5px; padding: 6px 4px; text-align: center; border: 1px solid rgba(255,255,255,.2); min-height: 44px; }
.q span { display: block; font: 600 15px var(--num); } .q small { font-size: 10.5px; opacity: .85; }
.q.paid { background: var(--brass); border-color: var(--brass); color: #1d1404; }
.q.part { background: repeating-linear-gradient(135deg, rgba(184,134,43,.85) 0 6px, rgba(184,134,43,.35) 6px 12px); border-color: var(--brass); }
.q.late { background: rgba(200, 60, 45, .28); border-color: #e2725f; color: #ffd3cb; }
.q.due { background: rgba(255,255,255,.04); color: #bcc5ea; }
.qist-legend { display: flex; gap: 6px 10px; align-items: center; font-size: 11.5px; margin-top: 12px; color: #a9b3e0; flex-wrap: wrap; position: relative; z-index: 1; }
.qist-legend .q { display: inline-block; min-height: 0; width: 12px; height: 12px; padding: 0; border-radius: 3px; margin-left: 6px; }
.qist-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12.5px; color: #c5cdee; position: relative; z-index: 1; }
.cust-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0 0 10px; font-size: 13px; } .cust-card dt { color: var(--muted); } .cust-card dd { margin: 0; overflow-wrap: anywhere; }
.glist { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .glist > div { border-left: 3px solid var(--brass); padding-left: 10px; font-size: 13px; } .glist.one { grid-template-columns: 1fr; }

/* receive */
.search-big input { width: 100%; font: 500 17px var(--ui); padding: 12px 14px; border: 2px solid var(--brand); border-radius: 8px; }
.rres { display: grid; gap: 4px; margin: 8px 0; } .rres button { text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px; cursor: pointer; font: inherit; }
.rres button:hover, .rres button:focus { border-color: var(--brand-2); background: var(--brand-soft); } .rres span { display: block; font-size: 12px; color: var(--muted); } .rres em { color: var(--bad); font-style: normal; }
.mini { display: grid; gap: 10px; background: var(--brand-soft); border-radius: 8px; padding: 12px; margin: 10px 0 14px; } .mini > div:first-child span { display: block; font-size: 12.5px; color: var(--muted); }
.mini-n { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .mini-n span { font-size: 12px; color: var(--muted); display: block; } .mini-n b { font: 600 18px var(--num); } .mini-n b.sm { font-size: 13px; }

/* reports list */
.rep-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 16px; }
.rep-list a { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px; text-decoration: none; color: var(--ink); border-left: 4px solid var(--brand); }
.rep-list a:hover { border-left-color: var(--brass); } .rep-list b { display: block; font: 600 15px var(--num); margin-bottom: 4px; } .rep-list span { font-size: 13px; color: var(--muted); }

/* modal & toast */
.modal-wrap { position: fixed; inset: 0; background: rgba(12, 30, 28, .45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: var(--panel); border-radius: 10px; width: min(560px, 100%); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px -20px rgba(0,0,0,.45); }
.modal.wide { width: min(860px, 100%); }
.modal header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); } .modal h3 { font-size: 16px; }
.modal-body { padding: 16px 18px; overflow-y: auto; } .modal-body p:first-child { margin-top: 0; }
.toasts { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 60; }
.toast { background: var(--brand); color: #fff; padding: 10px 16px; border-radius: var(--r); box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); font-size: 13.5px; transition: opacity .4s, transform .4s; max-width: 380px; }
.toast.warn { background: #7a4705; } .toast.out { opacity: 0; transform: translateY(8px); }

/* print */
#printArea { display: none; }
@media print {
  body.printing > *:not(#printArea) { display: none !important; }
  body.printing #printArea { display: block; color: #000; font: 11pt/1.35 var(--ui); }
  .print-thermal { width: 72mm; font-size: 9pt !important; }
  .ph { display: flex; justify-content: space-between; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 10px; gap: 10px; }
  .print-thermal .ph { flex-direction: column; text-align: center; }
  .ph h1 { font-size: 16pt; } .ph h2 { font-size: 12pt; } .pt { text-align: right; } .print-thermal .pt { text-align: center; }
  .pbrand { display: flex; gap: 10px; align-items: center; } .pbrand img { width: 52px; height: 52px; } .print-thermal .pbrand { flex-direction: column; }
  .pgrid { display: flex; justify-content: space-between; margin-bottom: 10px; gap: 12px; } .pgrid .r { text-align: right; }
  .ptbl { width: 100%; border-collapse: collapse; font-size: 9.5pt; } .ptbl th, .ptbl td { border: 1px solid #999; padding: 3px 5px; text-align: left; } .ptbl .n { text-align: right; } .ptbl thead { display: table-header-group; } .ptbl tfoot td { font-weight: 700; }
  .psum { margin: 10px 0 0 auto; border-collapse: collapse; min-width: 50%; } .psum.wide { width: 100%; } .psum td { padding: 3px 6px; border-bottom: 1px dotted #999; } .psum .n { text-align: right; }
  .big { font-size: 13pt; font-weight: 700; text-align: center; border: 2px solid #000; padding: 6px; margin: 12px 0; }
  .sign { display: flex; justify-content: space-between; margin-top: 42px; gap: 20px; } .sign span { border-top: 1px solid #000; padding-top: 3px; min-width: 120px; text-align: center; font-size: 9pt; }
  .pfoot { margin-top: 14px; font-size: 8.5pt; text-align: center; color: #333; }
  .frc { border: 1.5px solid #000; padding: 8px 12px; font: 10pt/1.35 Arial, Helvetica, sans-serif; color: #000; }
  .frc-h { text-align: center; } .frc-h h1 { font-size: 17pt; margin: 0; letter-spacing: .5px; } .frc-h div { font-size: 8.5pt; }
  .frc-t { text-align: center; font-weight: 700; font-size: 13pt; border-top: 1.5px solid #000; border-bottom: 1.5px solid #000; margin: 6px 0 4px; padding: 2px 0; }
  .frc-m { display: flex; justify-content: space-between; gap: 10px; font-size: 9pt; flex-wrap: wrap; }
  .frc-u { border: 1.5px solid #000; border-radius: 10px; margin: 6px 0; padding: 5px 10px; text-align: center; font: 11pt/1.9 "Jameel Noori Nastaleeq", "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Urdu Typesetting", serif; }
  .frc-u b { display: inline-block; background: #000; color: #fff; padding: 0 6px; margin: 0 3px; font-family: Arial, sans-serif; line-height: 1.4; }
  .frc-b { display: grid; grid-template-columns: 1.25fr 1fr .8fr; gap: 10px; border-top: 1.5px solid #000; padding-top: 5px; }
  .frc-l td, .frc-r td { padding: 1px 3px; vertical-align: top; } .frc-l .k, .frc-r .k { font-weight: 700; white-space: nowrap; }
  .frc-r { border-left: 1px solid #000; padding-left: 6px; }
  .frc-x { display: flex; flex-direction: column; gap: 6px; } .frc-rb { border: 1px solid #000; text-align: center; } .frc-rb div { background: #ddd; font-weight: 700; border-bottom: 1px solid #000; padding: 1px; } .frc-rb b { display: block; padding: 4px 2px; font-size: 9pt; }
  .frc-amt { text-align: right; font-weight: 700; font-size: 12pt; }
  .frc-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1.5px solid #000; margin-top: 6px; padding-top: 5px; font-weight: 700; }
  .frc .box { display: inline-block; border: 1.5px solid #000; padding: 0 8px; margin-left: 4px; } .frc .bc { font: 15pt "Libre Barcode 39", "Courier New", monospace; letter-spacing: 1px; }
  .print-thermal .frc-b { grid-template-columns: 1fr; } .print-thermal .frc-r { border-left: 0; padding-left: 0; } .print-thermal .frc-f { flex-direction: column; }
  .finv { font: 9.5pt/1.35 Arial, Helvetica, sans-serif; color: #000; }
  .finv-t { text-align: center; font-weight: 700; font-size: 13pt; letter-spacing: 5px; text-decoration: underline; border-top: 1.5px solid #000; margin-top: 4px; padding-top: 4px; }
  .finv-top { display: flex; gap: 10px; align-items: center; margin-top: 4px; } .finv-box { flex: 1; border: 1px solid #000; padding: 3px 6px; } .finv-box td { padding: 2px 4px; } .finv .k { font-weight: 700; white-space: nowrap; }
  .finv-bc { font: 16pt "Courier New", monospace; min-width: 110px; text-align: center; }
  .finv-bar { display: flex; justify-content: space-between; gap: 8px; background: #ccc; border: 1px solid #000; padding: 2px 6px; margin-top: 4px; }
  .finv-items { width: 100%; border-collapse: collapse; margin-top: 4px; } .finv-items th { border: 1.5px solid #000; padding: 3px 4px; white-space: nowrap; } .finv-items td { border-left: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; padding: 3px 4px; } .finv-items .c { text-align: center; } .finv-items .n { text-align: right; }
  .finv-sum, .finv-bal { border: 1px solid #000; border-top: 0; display: flex; justify-content: flex-end; padding: 2px 4px; } .finv-sum td, .finv-bal td { padding: 1px 4px; } .finv-sum .n, .finv-bal .n { text-align: right; min-width: 90px; font-weight: 700; } .finv-bal { border-top: 1.5px solid #000; }
  .finv-sign { display: flex; justify-content: space-between; margin-top: 30px; } .finv-sign span { border-top: 2px solid #000; min-width: 160px; text-align: center; font-weight: 700; padding-top: 2px; }
  .fled { font: 7.6pt/1.3 Arial, Helvetica, sans-serif; color: #000; }
  .fled-top { display: flex; justify-content: space-between; gap: 10px; } .fled-h h1 { font-size: 13pt; margin: 0; } .fled-h > div { font-size: 7.5pt; }
  .fled-u { font: 10pt/1.6 "Jameel Noori Nastaleeq", "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif; text-align: center; margin: 4px 0; }
  .fled-m { margin-top: 2px; } .fled-pics { display: flex; gap: 4px; } .fled-pics div { width: 26mm; height: 26mm; border: 1px solid #000; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #999; } .fled-pics img { width: 100%; height: 100%; object-fit: cover; }
  .fled-2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; align-items: start; } .fled-2.prod { grid-template-columns: 1fr 1fr; }
  .fled-sec { background: #ccc; border: 1px solid #000; font-weight: 700; padding: 1px 4px; margin-top: 4px; }
  .fled-t { width: 100%; border-collapse: collapse; } .fled-t td { padding: 1px 3px; } .fled-t .k { white-space: nowrap; } .fled-t .b, .fled-g .b { font-weight: 700; } .fled .n { text-align: right; } .fled .c { text-align: center; }
  .fled-g { width: 100%; border-collapse: collapse; margin-top: 2px; } .fled-g th, .fled-g td { border: 1px solid #000; padding: 1px 3px; vertical-align: top; } .fled-g th { background: #ddd; font-weight: 700; text-align: left; white-space: nowrap; }
  .fled-g.staff th, .fled-g.staff td, .fled-g.gt th, .fled-g.rc th { text-align: center; } .fled-g.gt th, .fled-g.rc th { white-space: normal; font-size: 7pt; } .fled-g.chq { margin-top: 4px; }
  @page { margin: 10mm; }
  .psign { display: flex; justify-content: space-between; gap: 30px; margin-top: 46px; } .psign span { flex: 1; border-top: 1px solid #000; padding-top: 4px; text-align: center; font-size: 10pt; }
  .print-a4top .frc-u { font-size: 10pt; letter-spacing: -.1px; } .print-a4top .frc { padding: 8px 10px; }
}

/* small screens */
@media (max-width: 1100px) { .pos, .recv, .acc-top, .grid2 { grid-template-columns: 1fr; } .form-grid.g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; } .side-nav { position: fixed; inset: 0 auto 0 0; width: 250px; z-index: 40; transform: translateX(-100%); transition: transform .2s; }
  body.nav-open .side-nav { transform: none; } .menu { display: block; } .main { padding: 16px; } .top { padding: 10px 16px; } .top-r { display: none; }
  .form-grid, .form-grid.g3, .form-grid.g4 { grid-template-columns: 1fr; } .span2, .span3 { grid-column: auto; }
  .qist-head, .mini-n { grid-template-columns: repeat(2, 1fr); } .qist-grid { grid-template-columns: repeat(6, 1fr); } .split { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

#nav a .nk { margin-left: auto; font: 10.5px var(--ui); color: #8f9ad0; background: none; padding: 0; }
#nav a.on .nk { color: var(--muted); }
kbd.key { display: inline-block; min-width: 64px; text-align: center; font: 600 12px var(--num); background: var(--brand-soft); color: var(--brand); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; margin: 0; }

/* new features */
.cphoto { width: 96px; height: 120px; object-fit: cover; border-radius: 6px; float: right; margin: 0 0 8px 12px; border: 1px solid var(--line); }
.menu-list { display: grid; gap: 8px; } .menu-list .btn { justify-content: flex-start; }
#nav a .nb { background: var(--bad); color: #fff; border-radius: 9px; font: 600 11px var(--ui); padding: 0 6px; margin-left: 6px; }
.brpick select { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.brtag { background: var(--brand-soft); color: var(--brand); font-weight: 600; padding: 3px 10px; border-radius: 10px; }
.cam video { width: 100%; max-height: 360px; background: #000; border-radius: 6px; }
.dl2 { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 10px; font-size: 13.5px; } .dl2 dt { color: var(--muted); } .dl2 dd { margin: 0; }
.proc::after { content: ""; display: block; clear: both; }
.chk { display: inline-flex; gap: 6px; align-items: center; } .mt { margin-top: 12px; }
/* FQMS menu bar & rights */
.menubar { display: flex; gap: 2px; align-items: center; background: #f6f7fb; border-bottom: 1px solid var(--line); padding: 2px 16px; flex-wrap: wrap; }
.mb-top { background: none; border: 0; font: 500 13.5px var(--ui); color: var(--ink); padding: 6px 12px; border-radius: 4px; cursor: pointer; }
.mb-top:hover, .mb-top.on { background: var(--brand); color: #fff; }
.mb-side { margin-left: auto; color: var(--muted); font-size: 12.5px; }
.mb-dd { position: fixed; z-index: 45; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.3); padding: 4px; min-width: 250px; }
.mb-sub { position: relative; } .mb-sub > .mb-dd { display: none; position: absolute; top: 0; left: 100%; }
.mb-sub:hover > .mb-dd, .mb-sub:focus-within > .mb-dd { display: block; }
.mb-i { display: flex; justify-content: space-between; align-items: center; gap: 18px; width: 100%; text-align: left; background: none; border: 0; padding: 7px 12px; border-radius: 4px; font: 13.5px var(--ui); color: var(--ink); cursor: pointer; white-space: nowrap; }
.mb-i:hover, .mb-i:focus, .mb-sub:hover > .mb-g { background: var(--brand-soft); color: var(--brand); }
.mb-i kbd { background: none; color: var(--muted); font-size: 11.5px; } .mb-g span { color: var(--muted); }
.mb-dd hr { border: 0; border-top: 1px solid var(--line-2); margin: 4px 0; }
body.side-hidden .app { grid-template-columns: 1fr; } body.side-hidden .side-nav { display: none; }
.tbl .c, .tbl th.c { text-align: center; } .rights td { padding: 4px 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { background: var(--brand-soft); color: var(--brand); border-radius: 12px; padding: 3px 10px; font-size: 13px; }
.rep-sec h3 { font-size: 15px; margin: 6px 0 10px; }
body.no-a #main button.btn.primary:not(.keep), body.no-a .modal button.btn.primary:not(.keep) { display: none; }
body.no-e #aEdit, body.no-e #cEdit, body.no-e #iEdit, body.no-e #aMore, body.no-e #aSettle, body.no-e #aReopen, body.no-e [data-a=edit] { display: none; }
body.no-d [data-del], body.no-d #bDel, body.no-d #aRet, body.no-d #plDel, body.no-d [data-rm-all] { display: none; }
@media (max-width: 760px) { .menubar { padding: 2px 8px; } .mb-side { display: none; } }
@media print { .menubar { display: none; } }
.att td { padding: 2px; } .ab { width: 24px; height: 22px; border: 1px solid var(--line); border-radius: 3px; background: #fff; font: 600 11px var(--ui); cursor: pointer; padding: 0; }
.ab-P { background: var(--ok-soft); color: var(--ok); } .ab-A { background: var(--bad-soft); color: var(--bad); } .ab-L, .ab-H { background: var(--warn-soft); color: var(--warn); } .ab-V { background: #e9eef5; color: #3b5675; }
.pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .pic { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: grid; gap: 6px; justify-items: center; text-align: center; }
.pic img, .nopic { width: 110px; height: 135px; object-fit: cover; border-radius: 6px; } .nopic { background: var(--paper); display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.cell.wide { width: 100%; min-width: 120px; text-align: left; }

.bar { height: 8px; background: var(--line-2); border-radius: 4px; overflow: hidden; margin-top: 8px; } .bar i { display: block; height: 100%; background: var(--brand); }
.atttbl .ab { width: 28px; height: 26px; } .ab-O { background: #eceae4; color: #6b6450; }
.tio { display: flex; gap: 4px; align-items: center; } .tio .cell { width: 96px; }
img.cphoto { cursor: zoom-in; } .photo-big { text-align: center; } .photo-big img { max-width: 100%; max-height: 75vh; border-radius: 6px; }
.pmedia { display: flex; gap: 10px; flex-wrap: wrap; } img.cphoto.finger { background: #fff; border: 1px solid var(--line); }
.btn.wa { background: #1f8f4e; border-color: #1f8f4e; color: #fff; } .btn.wa:hover { background: #187a41; } .btn.wa[disabled] { opacity: .5; } a.btn.wa { text-decoration: none; display: inline-flex; align-items: center; }
.link.wa { color: #1f8f4e; } button.link.wa[disabled] { color: var(--muted); }
.wa-prev { white-space: pre-wrap; background: #e7f6ec; color: #123; border-radius: 8px; padding: 10px 12px; font: 13px/1.45 system-ui, sans-serif; max-height: 260px; overflow: auto; }

/* desktop: slightly smaller type so more fits on screen */
@media (min-width: 900px) {
  body { font-size: 13px; }
  .app { grid-template-columns: 214px 1fr; }
  #nav a { font-size: 12.5px; padding: 5px 10px; } .nav-h { font-size: 11px; } .brand b { font-size: 14px; }
  .btn { font-size: 12.5px; padding: 6px 12px; } .btn.sm { font-size: 12px; padding: 3px 9px; }
  .tbl { font-size: 12.5px; } .tbl th { font-size: 11.5px; padding: 7px 9px; } .tbl td { padding: 5px 9px; }
  .sh h2 { font-size: 19px; } .panel h3 { font-size: 14px; } .small { font-size: 11.5px; } .kpi b { font-size: 21px; }
  .fld input, .fld select, .fld textarea, .cell { padding: 6px 8px; } .search input { padding: 7px 11px; }
}

/* light side menu */
.side-nav { background: var(--side); color: var(--ink); border-right: 1px solid var(--line); }
.brand b { color: var(--sky-ink); } .brand span { color: var(--muted); } .brand .logo { box-shadow: 0 0 0 2px var(--brand-soft); }
.nav-h { color: #7d93ab; }
#nav a { color: #2c4157; } #nav a i { color: #6aa3d6; }
#nav a:hover { background: var(--side-2); }
#nav a.on { background: var(--brand); color: #fff; } #nav a.on i { color: #fff; }
#nav a kbd, #nav a .k { color: #8aa0b6; } #nav a.on kbd, #nav a.on .k { color: #e3f1fc; }
.side-foot { border-top: 1px solid var(--line); color: var(--muted); } .side-foot .link, .side-foot a { color: var(--brand-2); } .side-foot .who b { color: var(--ink); }
.login { background: linear-gradient(180deg, #cfe8fb 0 42%, var(--paper) 42%); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; } .btn.primary:hover { background: var(--brand-2); }
.btn.primary kbd { background: rgba(255,255,255,.25); }
.kpi.money { border-top-color: var(--brass); }
.q.paid { background: #9ed6f6; border-color: #9ed6f6; color: #0d3a5c; }
.chart .leg { font-size: 11px; fill: var(--muted); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: -4px 0 6px; } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
/* desktop: smaller tiles */
@media (min-width: 900px) {
  .kpis { gap: 10px; } .kpi { padding: 9px 12px; } .kpi span { font-size: 11.5px; } .kpi b { font-size: 18px; margin: 2px 0 1px; } .kpi small { font-size: 11px; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .panel { padding: 12px 14px; } .grid2 { gap: 12px; } .split div { padding: 7px 10px; } .split b { font-size: 15px; }
}
.qist { background: linear-gradient(135deg, #1d6cb3, #2f8fdc); } .qist-head span { color: #d4e9fb; } .qist-foot { color: #e3f1fc; }
img.cphoto.sm { width: 64px; height: 64px; object-fit: cover; } .gmedia { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .gmedia span:empty { display: none; }
.gpics { float: right; display: flex; gap: 4px; margin-left: 8px; } .gbtns { margin-top: 4px; font-size: 12px; } .glist > div::after { content: ""; display: block; clear: both; }
.span4 { grid-column: 1 / -1; } .gnum { grid-column: 1 / -1; }
/* dashboard charts: four small panels in one row on a desktop screen */
.dcharts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.dcharts > .panel { margin: 0; padding: 10px 12px; min-width: 0; } .dcharts h3 { font-size: 12.5px; margin-bottom: 6px; } .dcharts h3.mt { margin-top: 8px; }
.dcharts .chart { height: 120px; } .dcharts .legend { font-size: 11px; gap: 9px; margin: 0 0 4px; } .dcharts .split { gap: 6px; } .dcharts .split div { padding: 5px 8px; } .dcharts .split b { font-size: 13px; } .dcharts .split span { font-size: 11px; }
@media (max-width: 1400px) { .dcharts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dcharts .chart { height: 130px; } }
@media (max-width: 700px) { .dcharts { grid-template-columns: 1fr; } }
/* login: centred card on blue showroom-style background */
.login { display: block; padding: 0; background: #0b3d91; }
.lx { width: 100%; max-width: none; margin: 0; position: relative; min-height: 100vh; overflow: hidden; display: grid; place-items: center; padding: 28px 16px; background: radial-gradient(ellipse at 50% 30%, #eaf3ff 0%, #b9d6fb 32%, #4d8fe6 62%, #0f4fc0 85%, #0a3a91 100%); }
.lx::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 2px, transparent 2px 120px), radial-gradient(circle at 15% 20%, rgba(255,255,255,.55) 0 6px, transparent 7px), radial-gradient(circle at 85% 18%, rgba(255,255,255,.55) 0 6px, transparent 7px), radial-gradient(circle at 30% 10%, rgba(255,255,255,.45) 0 5px, transparent 6px), radial-gradient(circle at 70% 9%, rgba(255,255,255,.45) 0 5px, transparent 6px); pointer-events: none; }
.lx-swoosh { position: absolute; border-radius: 50%; pointer-events: none; }
.lx-swoosh.s1 { width: 140vmax; height: 140vmax; left: -95vmax; top: -100vmax; border: 5vmax solid rgba(13,71,200,.85); box-shadow: 0 0 40px rgba(80,170,255,.6); }
.lx-swoosh.s2 { width: 120vmax; height: 120vmax; right: -80vmax; bottom: -95vmax; border: 4vmax solid rgba(13,71,200,.85); box-shadow: 0 0 40px rgba(80,170,255,.6), inset 0 0 0 1.2vmax rgba(120,190,255,.5); }
.lx-glow { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(0deg, rgba(255,255,255,.35), transparent); pointer-events: none; }
.lx-card { position: relative; z-index: 1; width: min(460px, 100%); background: linear-gradient(180deg, #ffffff 0%, #f4f8fe 100%); border-radius: 26px; padding: 26px 34px 22px; box-shadow: 0 30px 70px -20px rgba(5,30,90,.6), 0 0 0 1px rgba(255,255,255,.8), inset 0 1px 0 #fff; text-align: center; }
.lx-head { display: grid; justify-items: center; }
.lx-logo { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(10,40,120,.25)); }
.lx-co { margin-top: 4px; font: italic 800 30px/1.05 var(--ui); letter-spacing: -.02em; } .lx-co span { color: #0b1f4d; } .lx-co b { color: #1a4fd6; font-weight: 800; }
.lx-slogan { font: italic 500 15px var(--ui); color: #111; margin-top: 2px; }
.lx-hr { border: 0; height: 1px; background: #8fa2c4; margin: 14px 26px 10px; }
.lx-app { font: 900 44px/1 var(--ui); letter-spacing: -.01em; } .lx-app span { color: #0b1f4d; } .lx-app b { color: #1a5ff0; font-style: italic; font-weight: 900; }
.lx-sub { font: 500 17px var(--ui); letter-spacing: .14em; color: #111; margin-top: 4px; }
.lx-mods { display: grid; grid-template-columns: repeat(5, 1fr); margin: 18px -10px 14px; }
.lx-mods > div { display: grid; justify-items: center; gap: 4px; padding: 2px 4px; font-size: 12.5px; color: #0b1f4d; font-weight: 500; }
.lx-mods > div + div { border-left: 1px solid #cdd6e4; }
.lx-mods .ic { width: 30px; height: 30px; color: #1a4fd6; stroke-width: 1.6; }
.lx-form { display: grid; gap: 6px; text-align: left; }
.lx-lbl { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #0b1f4d; margin-top: 6px; } .lx-lbl .ic { color: #0b1f4d; }
.lx-in { width: 100%; height: 44px; border: 1px solid #a9b6c9; border-radius: 9px; padding: 0 14px; font-size: 15px; background: #fff; box-shadow: inset 0 1px 2px rgba(0,0,0,.05); }
.lx-in:focus { outline: 0; border-color: #1a5ff0; box-shadow: 0 0 0 3px rgba(26,95,240,.18); }
.lx-pw { position: relative; display: flex; } .lx-pw .lx-in { padding-right: 52px; }
.lx-pw .lg-eye { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 46px; display: grid; place-items: center; background: #eef2f7; border-radius: 0 8px 8px 0; color: #222; cursor: pointer; }
.lx-pw .lg-eye.on { color: #1a5ff0; } .lx-pw .lg-eye:focus-visible { outline: 2px solid #1a5ff0; }
.lx-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 14px; }
.lx-chk { display: flex; align-items: center; gap: 8px; color: #111; cursor: pointer; } .lx-chk input { width: 18px; height: 18px; accent-color: #1a5ff0; }
.lx-forgot { color: #1a4fd6; text-decoration: none; } .lx-forgot:hover { text-decoration: underline; }
.lx-form .err { margin: 2px 0 0; min-height: 0; font-size: 13px; }
.lx-btn { position: relative; overflow: hidden; margin-top: 6px; height: 50px; border: 0; border-radius: 12px; color: #fff; font: 700 18px var(--ui); letter-spacing: .04em; display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; background: linear-gradient(180deg, #3d7dff 0%, #1450d8 50%, #0b3bb0 100%); box-shadow: 0 10px 22px -8px rgba(13,60,190,.75), inset 0 1px 0 rgba(255,255,255,.4); }
.lx-btn:hover { filter: brightness(1.08); } .lx-btn:disabled { opacity: .75; cursor: wait; }
.lx-btn .ic { width: 24px; height: 24px; }
.lx-btn::after { content: ""; position: absolute; top: 0; left: -80%; width: 45%; height: 100%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: lxShine 4.5s ease-in-out infinite; }
@keyframes lxShine { 0%, 20% { left: -80%; } 70%, 100% { left: 140%; } }
.lx-foot { margin-top: 18px; display: grid; justify-items: center; gap: 4px; }
.lx-fline { display: flex; align-items: center; gap: 12px; width: 100%; } .lx-fline span { flex: 1; height: 1px; background: #33476b; }
.lx-shop { width: 36px; height: 36px; color: #0b1f4d; stroke-width: 1.6; }
.lx-fname { font: 800 24px var(--ui); color: #0b2a7a; letter-spacing: -.01em; }
.lx-ho { display: inline-flex; align-items: center; gap: 6px; padding: 3px 16px; border-radius: 999px; background: #0b2a7a; color: #fff; font-weight: 600; font-size: 15px; }
.lx-addr { font-weight: 700; font-size: 15px; color: #111; }
.lx-card .lg-card { display: grid; gap: 10px; margin-top: 16px; } .lx-card .lg-card .lg-mini, .lx-card .lg-card h2 { display: none; }
.ic { width: 20px; height: 20px; flex: none; } .ic.sm { width: 16px; height: 16px; }
@media (max-width: 520px) {
  .lx { padding: 18px 12px; } .lx-card { padding: 22px 18px 18px; border-radius: 20px; }
  .lx-logo { width: 68px; height: 68px; } .lx-co { font-size: 25px; } .lx-app { font-size: 36px; } .lx-sub { font-size: 14px; }
  .lx-mods { margin: 14px -4px 10px; } .lx-mods > div { font-size: 10.5px; padding: 2px 1px; } .lx-mods .ic { width: 24px; height: 24px; }
  .lx-fname { font-size: 20px; } .lx-addr { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .lx-btn::after { display: none; } }
/* desktop theme matching the login: royal blue + navy */
:root { --brand: #1a5ff0; --brand-2: #1450d8; --brand-soft: #e4edff; --brass: #4d8fe6; --brass-soft: #e8f1ff; --sky-ink: #0b1f4d; --paper: #eef4ff; --line: #d3def2; --line-2: #e6edf9; --ink: #0f2147; }
body { background: linear-gradient(180deg, #e6efff 0%, #f3f7ff 40%, #eef4ff 100%) fixed; }
h1, h2, h3 { color: #0b1f4d; }
.side-nav { background: linear-gradient(180deg, #0b2a7a 0%, #0f3da8 55%, #1450d8 100%); color: #dfe8ff; border-right: 0; box-shadow: 2px 0 14px rgba(11,42,122,.25); }
.brand b { color: #fff; } .brand span { color: #a9c3f5; } .brand .logo { box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 0 16px rgba(120,180,255,.5); }
.nav-h { color: #8fb0ef; }
#nav a { color: #e4ecff; } #nav a i { color: #9fc0ff; }
#nav a:hover { background: rgba(255,255,255,.10); }
#nav a.on { background: #fff; color: #1450d8; box-shadow: 0 4px 12px rgba(0,0,0,.18); } #nav a.on i { color: #1a5ff0; }
#nav a kbd, #nav a .k, #nav a .nk { color: #9fb8ea; } #nav a.on kbd, #nav a.on .k, #nav a.on .nk { color: #5f7bb5; }
.side-foot, .side-foot .who { color: #dfe8ff; } .side-foot .link, .side-foot a { color: #cfe0ff; } .side-foot b { color: #fff; }
.top { background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px rgba(11,42,122,.06); }
.menubar { background: #f3f7ff; border-bottom-color: var(--line); }
.btn.primary { background: linear-gradient(180deg, #3d7dff 0%, #1450d8 55%, #0b3bb0 100%); border-color: #1450d8; color: #fff; box-shadow: 0 4px 10px -4px rgba(13,60,190,.6), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.primary:hover { background: linear-gradient(180deg, #4a87ff 0%, #1a5ff0 55%, #0f44c4 100%); }
.kpi { border-color: var(--line); box-shadow: 0 2px 8px rgba(11,42,122,.05); } .kpi.money { border-top: 3px solid #1a5ff0; } .kpi.money b { color: #1450d8; }
.panel, .card { box-shadow: 0 2px 10px rgba(11,42,122,.05); }
.side-foot { border-top: 1px solid rgba(255,255,255,.15); color: #c9d9ff; } .side-foot .who b { color: #fff; } .side-foot .link { color: #cfe0ff; }
/* receive installment — FQMS "Leasing installments" layout */
.lv { background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 18px rgba(11,42,122,.08); overflow: hidden; }
.lv-title { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; color: #fff; font: 600 15px var(--num); background: linear-gradient(90deg, #0b2a7a, #1a5ff0); } .lv-title span { font-size: 12px; opacity: .85; }
.lv-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 12px; background: #f3f7ff; border-bottom: 1px solid var(--line); }
.lv-bar .btn { min-width: 64px; } .lv-chk { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 13px; color: #0b1f4d; cursor: pointer; } .lv-chk input { width: 16px; height: 16px; accent-color: #1a5ff0; }
.lv-body { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 520px; }
.lv-list { border-right: 1px solid var(--line); padding: 10px; display: flex; flex-direction: column; gap: 6px; background: #fafcff; }
.lv-list input { width: 100%; height: 30px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; font-size: 13px; }
.lv-rows { flex: 1; overflow: auto; max-height: 560px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.lv-rows table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .lv-rows th { position: sticky; top: 0; background: #e8efff; text-align: left; padding: 4px 6px; font-weight: 600; color: #0b1f4d; }
.lv-rows td { padding: 3px 6px; border-top: 1px solid var(--line-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } .lv-rows tr[data-r] { cursor: pointer; } .lv-rows tr[data-r]:hover { background: #f0f5ff; } .lv-rows tr.on td { background: #1a5ff0; color: #fff; }
.lv-tot { font-size: 12.5px; color: var(--muted); } .lv-tot b { color: #0b1f4d; }
.lv-main { padding: 12px 14px; min-width: 0; }
.lv-form { display: grid; grid-template-columns: minmax(250px, 1fr) 190px minmax(300px, 1.5fr); gap: 14px; align-items: start; }
.lv-c1, .lv-c3 { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 8px; align-items: center; }
.lv-form label { font-size: 13px; color: #33476b; } .lv-form .req { color: #d92d20; }
.lv-form input, .lv-form select { width: 100%; height: 30px; border: 1px solid #b9c7dd; border-radius: 5px; padding: 0 8px; font-size: 13.5px; background: #fff; min-width: 0; }
.lv-form input[readonly], .lv-form input:disabled, .lv-form select:disabled { background: #f1f4f9; color: #0f2147; }
.lv-form input:focus, .lv-form select:focus { outline: 0; border-color: #1a5ff0; box-shadow: 0 0 0 2px rgba(26,95,240,.18); }
.lv-form .lv-big { font: 700 17px var(--num); color: #1450d8; }
.lv-acc { position: relative; } .lv-acc .rres { position: absolute; left: 0; right: -120px; top: 32px; z-index: 30; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 10px 24px rgba(11,42,122,.18); }
.lv-acc .rres:empty { display: none; }
.lv-c2 { display: grid; gap: 6px; } .lv-pic { height: 170px; border: 1px solid #b9c7dd; border-radius: 6px; background: #f1f4f9; display: grid; place-items: center; overflow: hidden; color: #9aa9c0; font-size: 12px; }
.lv-pic.finger { height: 160px; } .lv-pic .lvimg, .lv-pic img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; margin: 0; }
.lv-pic.finger img { object-fit: contain; background: #fff; }
.lv-two { display: flex; gap: 6px; align-items: center; min-width: 0; } .lv-two .w1 { flex: 0 0 90px; } .lv-two .lv-ro { flex: 1; }
.lv-cell { font: 700 17px var(--num) !important; color: #1450d8 !important; letter-spacing: .03em; }
.lv-cnt { white-space: nowrap; font: 700 15px var(--num); color: #0b1f4d; }
.lv-boxes { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.lv-ret { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; margin: 0; display: grid; gap: 4px; font-size: 13px; } .lv-ret legend { padding: 0 4px; color: #0b1f4d; font-weight: 600; }
.lv-ret div { display: flex; justify-content: space-between; } .lv-ret span { color: #33476b; } .lv-ct { color: #1450d8; font-size: 16px; }
.lv-score { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; display: grid; gap: 5px; font-size: 13px; }
.lv-score div { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 6px; } .lv-score span { color: #33476b; }
.lv-score i { display: block; height: 18px; background: #eef2f8; border-radius: 3px; overflow: hidden; } .lv-score em { display: block; height: 100%; width: 0; background: #22c55e; color: #053; font: 600 11px/18px var(--ui); padding-left: 4px; font-style: normal; transition: width .3s; }
.lv-score em.l { background: #f59e0b; color: #4a2a00; } .lv-score em.p { background: #ef4444; color: #fff; }
.lv-rem { grid-column: 1 / -1; display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: center; }
.lv-hist { margin-top: 12px; }
@media (max-width: 1200px) { .lv-form { grid-template-columns: minmax(0, 1fr) 170px; } .lv-c3 { grid-column: 1 / -1; } }
@media (max-width: 760px) { .lv-body { grid-template-columns: 1fr; } .lv-list { border-right: 0; border-bottom: 1px solid var(--line); } .lv-rows { max-height: 180px; }
  .lv-form { grid-template-columns: 1fr; } .lv-c2 { grid-template-columns: 1fr 1fr 1fr 1fr; } .lv-c2 input { grid-column: span 2; } .lv-pic, .lv-pic.finger { grid-column: span 2; height: 140px; }
  .lv-boxes { grid-template-columns: 1fr; } .lv-c1, .lv-c3 { grid-template-columns: 100px minmax(0, 1fr); } .lv-acc .rres { right: 0; } .lv-chk { margin-left: 0; } }
/* stock receive — FQMS layout */
.sr-big { margin-left: auto; font: 700 20px var(--num); color: #0b1f4d; }
.sr-head { display: grid; grid-template-columns: 130px minmax(0, 1fr) 130px minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sr-head label, .sr-eh span { font-size: 13px; color: #33476b; }
.sr-head input, .sr-er input { width: 100%; height: 30px; border: 1px solid #b9c7dd; border-radius: 5px; padding: 0 8px; font-size: 13.5px; background: #fff; min-width: 0; }
.sr-head input[readonly], .sr-er input[readonly] { background: #f1f4f9; }
.sr-head input:focus, .sr-er input:focus { outline: 0; border-color: #1a5ff0; box-shadow: 0 0 0 2px rgba(26,95,240,.18); }
.sr-head .sr-wide { grid-column: span 3; }
.sr-chk { display: flex; gap: 6px; align-items: center; font-weight: 600; color: #0b1f4d !important; cursor: pointer; grid-column: 2; } .sr-chk input { width: 16px !important; height: 16px !important; accent-color: #1a5ff0; }
#srAutoBtn { grid-column: 4; justify-self: end; min-width: 160px; }
.sr-entry { padding: 10px 16px 4px; }
.sr-eh, .sr-er { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr 70px 100px 1.6fr 90px; gap: 6px; align-items: center; }
.sr-eh { background: #0b1f4d; color: #fff; border-radius: 6px 6px 0 0; padding: 5px 6px; } .sr-eh span { color: #fff; font-weight: 600; }
.sr-er { padding: 6px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 6px 6px; background: #f7faff; }
.sr-sn { display: flex; gap: 4px; } .sr-sn input { flex: 1; } .sr-sn .btn { white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; }
.sr-entry .hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.sr-grid { padding: 6px 16px; min-height: 160px; }
.sr-foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); background: #f3f7ff; }
.sr-foot span { color: #33476b; font-weight: 600; } .sr-foot b { min-width: 120px; padding: 4px 10px; border: 1px solid #b9c7dd; border-radius: 5px; background: #fff; text-align: right; font: 700 15px var(--num); color: #1450d8; }
.lv.sr + .panel { margin-top: 16px; }
@media (max-width: 900px) { .sr-head { grid-template-columns: 110px minmax(0, 1fr); } .sr-head .sr-wide { grid-column: auto; } .sr-chk { grid-column: 1 / -1; } #srAutoBtn { grid-column: 1 / -1; justify-self: stretch; }
  .sr-eh { display: none; } .sr-er { grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-radius: 6px; } .sr-er .sr-sn, .sr-er #plAdd { grid-column: 1 / -1; } .sr-big { display: none; } }
.cam video { width: 100%; max-height: 60vh; border-radius: 8px; background: #000; transform: scaleX(-1); }
.cam-dev { height: 34px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; max-width: 220px; }
.sr-eh.sa-g, .sr-er.sa-g { grid-template-columns: 120px 1fr 1.3fr 1.6fr 110px 120px 90px; }
.sr-eh.ex-g, .sr-er.ex-g { grid-template-columns: 1.1fr 1.3fr 2fr 120px 90px; }
.sr-er select { width: 100%; height: 30px; border: 1px solid #b9c7dd; border-radius: 5px; padding: 0 6px; background: #fff; }
.sr-head select { width: 100%; height: 30px; border: 1px solid #b9c7dd; border-radius: 5px; padding: 0 6px; background: #fff; }
@media (max-width: 900px) { .sr-er.sa-g, .sr-er.ex-g { grid-template-columns: 1fr 1fr; } .sr-er.sa-g #saAdd, .sr-er.ex-g #exAdd { grid-column: 1 / -1; } }