.ar-wrap{padding:0 4px}
.ar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:20px}
.ar-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:16px}
.dark .ar-card{background:#1f2937;border-color:#374151}
.ar-card .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.04em;opacity:.65}
.ar-card .val{font-size:24px;font-weight:700;margin-top:4px}
.ar-card .val.neg{color:#dc2626}.ar-card .val.pos{color:#16a34a}
.ar-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-bottom:20px}
.ar-card h3{font-weight:600;margin:0 0 10px}
.ar-table{width:100%;border-collapse:collapse;font-size:14px}
.ar-table th,.ar-table td{padding:7px 8px;border-bottom:1px solid #e5e7eb;text-align:left}
.dark .ar-table th,.dark .ar-table td{border-color:#374151}
[dir=rtl] .ar-table th,[dir=rtl] .ar-table td{text-align:right}
.ar-table .num{text-align:right;font-variant-numeric:tabular-nums}
.ar-table tfoot td,.ar-table .total td{font-weight:700}
.ar-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:18px}
.ar-filter label{display:block;font-size:12px;opacity:.7}
.ar-filter input,.ar-filter select{border:1px solid #d1d5db;border-radius:6px;padding:6px 8px;background:transparent}
.ar-btn{display:inline-block;background:#16a34a;color:#fff!important;border:0;border-radius:6px;padding:7px 14px;cursor:pointer;text-decoration:none;font-size:14px}
.ar-btn.alt{background:#4b5563}
.ar-actions{display:flex;gap:8px;margin-bottom:14px}
.ar-empty{opacity:.6;padding:12px}
[dir=rtl] body{font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif}
/* Urdu data entry: text fields right-to-left; numbers, dates, phones stay LTR */
[dir=rtl] input[type=text],[dir=rtl] textarea,[dir=rtl] select{direction:rtl;text-align:right}
[dir=rtl] input[type=number],[dir=rtl] input[type=date],[dir=rtl] input[type=tel],[dir=rtl] input[name=phone],[dir=rtl] input[name=whatsapp],[dir=rtl] input[name$=ntn],[dir=rtl] input[name=strn]{direction:ltr;text-align:left}

/* ---- Reports colour coding ---- */
:root{--c-module:#7c3aed;--c-date:#0284c7;--c-party:#d97706;--c-money:#059669;--c-view:#64748b;
--c-debit:#dc2626;--c-credit:#2563eb;--c-in:#16a34a;--c-out:#ea580c;--c-amount:#0d9488;--c-net:#4f46e5;--c-count:#64748b}
/* filter groups */
.fg{position:relative;border:1px solid;border-radius:10px;padding:18px 12px 10px;margin-bottom:12px}
.fg-title{position:absolute;top:-10px;inset-inline-start:12px;font-size:12px;font-weight:600;padding:1px 10px;border-radius:999px;color:#fff}
.fg-module{border-color:var(--c-module);background:color-mix(in srgb,var(--c-module) 7%,transparent)}.fg-module .fg-title{background:var(--c-module)}
.fg-date{border-color:var(--c-date);background:color-mix(in srgb,var(--c-date) 7%,transparent)}.fg-date .fg-title{background:var(--c-date)}
.fg-party{border-color:var(--c-party);background:color-mix(in srgb,var(--c-party) 7%,transparent)}.fg-party .fg-title{background:var(--c-party)}
.fg-money{border-color:var(--c-money);background:color-mix(in srgb,var(--c-money) 7%,transparent)}.fg-money .fg-title{background:var(--c-money)}
.fg-view{border-color:var(--c-view);background:color-mix(in srgb,var(--c-view) 7%,transparent)}.fg-view .fg-title{background:var(--c-view)}
/* KPI cards */
.kpi{border-top:4px solid var(--kc);background:color-mix(in srgb,var(--kc) 8%,#fff)}
.dark .kpi{background:color-mix(in srgb,var(--kc) 14%,#1f2937)}
.kpi .val{color:var(--kc)}
.c-count{--kc:var(--c-count)}.c-amount{--kc:var(--c-amount)}.c-debit{--kc:var(--c-debit)}.c-credit{--kc:var(--c-credit)}
.c-in{--kc:var(--c-in)}.c-out{--kc:var(--c-out)}.c-net{--kc:var(--c-net)}
.kpi .val.pos,.kpi .val.neg{color:var(--kc)}
/* section cards */
.sec{border-inline-start:5px solid var(--sc)}
.sec-module{--sc:var(--c-module)}.sec-group{--sc:var(--c-party)}.sec-detail{--sc:var(--c-date)}
.sec h3{color:var(--sc)}
.sec .ar-table thead th{background:color-mix(in srgb,var(--sc) 12%,transparent)}
/* rows */
.ar-table tbody tr:nth-child(even){background:rgba(100,116,139,.06)}
.badge{display:inline-block;padding:1px 9px;border-radius:999px;font-size:12px;color:#fff;background:var(--bc,#64748b);white-space:nowrap}
.b-lot{--bc:#7c3aed}.b-dharra{--bc:#0891b2}.b-purchase{--bc:#d97706}.b-sale{--bc:#2563eb}
.b-receipt{--bc:#16a34a}.b-payment{--bc:#ea580c}.b-expense{--bc:#dc2626}.b-adjustment{--bc:#64748b}
.m-lot{box-shadow:inset 4px 0 #7c3aed}.m-dharra{box-shadow:inset 4px 0 #0891b2}.m-purchase{box-shadow:inset 4px 0 #d97706}
.m-sale{box-shadow:inset 4px 0 #2563eb}.m-receipt{box-shadow:inset 4px 0 #16a34a}.m-payment{box-shadow:inset 4px 0 #ea580c}
.m-expense{box-shadow:inset 4px 0 #dc2626}.m-adjustment{box-shadow:inset 4px 0 #64748b}
[dir=rtl] .m-lot,[dir=rtl] .m-dharra,[dir=rtl] .m-purchase,[dir=rtl] .m-sale,[dir=rtl] .m-receipt,[dir=rtl] .m-payment,[dir=rtl] .m-expense,[dir=rtl] .m-adjustment{box-shadow:none}
[dir=rtl] .m-lot{box-shadow:inset -4px 0 #7c3aed}[dir=rtl] .m-dharra{box-shadow:inset -4px 0 #0891b2}[dir=rtl] .m-purchase{box-shadow:inset -4px 0 #d97706}
[dir=rtl] .m-sale{box-shadow:inset -4px 0 #2563eb}[dir=rtl] .m-receipt{box-shadow:inset -4px 0 #16a34a}[dir=rtl] .m-payment{box-shadow:inset -4px 0 #ea580c}
[dir=rtl] .m-expense{box-shadow:inset -4px 0 #dc2626}[dir=rtl] .m-adjustment{box-shadow:inset -4px 0 #64748b}
.t-debit{color:var(--c-debit)}.t-credit{color:var(--c-credit)}.t-in{color:var(--c-in);font-weight:600}.t-out{color:var(--c-out);font-weight:600}
.ar-table thead th.h-debit{color:var(--c-debit)}

/* ---- Dashboard colours ---- */
:root{--c-profit:#16a34a;--c-lots:#7c3aed}
.c-profit{--kc:var(--c-profit)}.c-lots{--kc:var(--c-lots)}
.c-profit .val.loss{color:#dc2626}
.c-profit:has(.val.loss){--kc:#dc2626}
.sec-chart{--sc:var(--c-amount)}.sec-cust{--sc:var(--c-credit)}.sec-prod{--sc:var(--c-party)}.sec-low{--sc:var(--c-debit)}
.kpi .val{font-size:26px}
.kpi .lbl{color:var(--kc);opacity:.9;font-weight:600}

/* ---- Quick entry ---- */
.qk{display:inline-block;padding:12px 18px;border-radius:10px;font-weight:600;color:#fff!important;text-decoration:none;background:var(--qc);opacity:.6;border:2px solid transparent}
.qk.on,.qk:hover{opacity:1;border-color:rgba(0,0,0,.25)}
.qk-receipt{--qc:#16a34a}.qk-payment{--qc:#ea580c}.qk-expense{--qc:#dc2626}.qk-dharra{--qc:#0891b2}.qk-purchase{--qc:#d97706}.qk-sale{--qc:#2563eb}
.qsec-receipt{--sc:#16a34a}.qsec-payment{--sc:#ea580c}.qsec-expense{--sc:#dc2626}.qsec-dharra{--sc:#0891b2}.qsec-purchase{--sc:#d97706}.qsec-sale{--sc:#2563eb}
#qform input,#qform select{min-width:150px;padding:9px 10px;font-size:16px}

/* with / without decimals / difference */
.bx{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.bx b{font-weight:600}.bx small{opacity:.75}
.bd{font-style:normal;font-size:11px;padding:0 6px;border-radius:999px;background:rgba(100,116,139,.15)}
.bd.up{color:#16a34a;background:rgba(22,163,74,.14)}.bd.dn{color:#dc2626;background:rgba(220,38,38,.14)}
.kpi .bx{align-items:flex-start}.kpi .bx b{font-size:24px}
#report-results{scroll-margin-top:90px}

/* collapsible filters */
.ar-fdet>summary{cursor:pointer;list-style:none;padding:2px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ar-fdet>summary::-webkit-details-marker{display:none}
.ar-fdet>summary::before{content:"\25B8";font-size:14px}
.ar-fdet[open]>summary::before{content:"\25BE"}
.ar-chips{display:inline-flex;flex-wrap:wrap;gap:6px}
.chip{background:rgba(124,58,237,.12);color:#6d28d9;border-radius:999px;padding:1px 10px;font-size:12px;font-weight:500}
.dark .chip{color:#c4b5fd}
.sec-stat{--sc:var(--c-net)}
.ar-opts>summary{cursor:pointer;font-weight:600;margin-top:6px}

/* ---- slide-in filter drawer ---- */
.ar-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.ar-count{display:inline-block;background:#fff;color:#16a34a;border-radius:999px;min-width:20px;padding:0 6px;font-size:12px;font-weight:700;text-align:center}
.ar-drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(460px,94vw);z-index:1200;display:flex;flex-direction:column;
 background:#fff;box-shadow:-6px 0 28px rgba(0,0,0,.25);transform:translateX(105%);transition:transform .25s ease;margin:0}
[dir=rtl] .ar-drawer{transform:translateX(-105%);box-shadow:6px 0 28px rgba(0,0,0,.25)}
.ar-drawer.open{transform:none}
.dark .ar-drawer{background:#111827}
.ar-drawer-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #e5e7eb;font-size:16px}
.dark .ar-drawer-head,.dark .ar-drawer-foot{border-color:#374151}
.ar-x{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;color:inherit}
.ar-drawer-body{flex:1;overflow:auto;padding:22px 18px 10px}
.ar-drawer-foot{display:flex;gap:8px;padding:12px 18px;border-top:1px solid #e5e7eb}
.ar-drawer .ar-filter{margin-bottom:16px}
.ar-drawer .ar-filter>div{flex:1 1 44%}
.ar-drawer input[type=date],.ar-drawer input[type=text],.ar-drawer input[type=number],.ar-drawer select{width:100%}
.ar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1100;opacity:0;pointer-events:none;transition:opacity .2s}
.ar-overlay.show{opacity:1;pointer-events:auto}

/* applied-filter chips on list pages */
.chip a{margin-inline-start:6px;text-decoration:none;font-weight:700;color:inherit;opacity:.7}
.chip a:hover{opacity:1}
.chip-clear{background:rgba(220,38,38,.12);color:#b91c1c;text-decoration:none}
.dark .chip-clear{color:#fca5a5}

/* pagination bar under list tables */
.ar-pagebar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:12px 4px;font-size:14px}
.ar-pageinfo{opacity:.75}
.ar-pagenav,.ar-perpage{display:inline-flex;gap:4px;align-items:center}
.ar-pagenav a,.ar-perpage a{min-width:30px;text-align:center;padding:3px 9px;border:1px solid #e5e7eb;border-radius:6px;text-decoration:none;color:inherit}
.dark .ar-pagenav a,.dark .ar-perpage a{border-color:#374151}
.ar-pagenav a:hover,.ar-perpage a:hover{border-color:#16a34a;color:#16a34a}
.ar-pagenav a.on,.ar-perpage a.on{background:#16a34a;border-color:#16a34a;color:#fff}
.ar-pagenav .gap{padding:0 4px;opacity:.6}
.ar-perpage{opacity:.95}
/* date preset buttons */
.ar-presets{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.ar-presets button{border:1px solid #d1d5db;background:transparent;color:inherit;border-radius:999px;padding:3px 11px;font-size:12px;cursor:pointer}
.ar-presets button:hover{border-color:#16a34a;color:#16a34a;background:rgba(22,163,74,.08)}
.dark .ar-presets button{border-color:#4b5563}

/* ---- splash screen after login (server-rendered; timing is pure CSS, --splash-secs = 5s) ---- */
#arhat-splash{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;
 background:linear-gradient(180deg,rgba(3,26,13,.78),rgba(6,46,22,.9)),var(--splash-bg) center bottom/cover no-repeat,#052e16;
 animation:sp-out .6s ease var(--splash-secs) forwards}
#arhat-splash .sp-inner{padding:0 24px;max-width:640px;animation:sp-in .9s ease both}
#arhat-splash .sp-logo{display:block;margin:0 auto;width:168px;height:168px;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45));animation:sp-pulse 2.4s ease-in-out infinite}
#arhat-splash .sp-name{margin:18px 0 0;font-size:44px;line-height:1.7;font-weight:700;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.4);font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif}
#arhat-splash .sp-name-en{font-size:18px;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
#arhat-splash .sp-tagline{display:inline-block;margin-top:14px;padding:6px 22px;border-radius:999px;background:linear-gradient(90deg,#d4a017,#f4c542);color:#3b2a02;font-size:19px;font-weight:700;font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif}
#arhat-splash .sp-contacts{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;font-size:14px;opacity:.92}
#arhat-splash .sp-contacts li{display:inline-flex;gap:6px;align-items:center}
#arhat-splash .sp-contacts .material-symbols-outlined{font-size:18px;color:#f4c542}
#arhat-splash .sp-loader{position:absolute;bottom:9vh;width:min(360px,70vw)}
#arhat-splash .sp-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.22);overflow:hidden}
#arhat-splash .sp-bar span{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#4ade80,#f4c542);animation:sp-fill var(--splash-secs) linear forwards}
#arhat-splash .sp-label{margin-top:10px;font-size:13px;opacity:.75}
@keyframes sp-fill{to{width:100%}}
@keyframes sp-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sp-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes sp-out{to{opacity:0;visibility:hidden;pointer-events:none}}
@media (max-width:520px){#arhat-splash .sp-name{font-size:32px}#arhat-splash .sp-logo{width:128px;height:128px}}
@media (prefers-reduced-motion:reduce){#arhat-splash .sp-logo,#arhat-splash .sp-inner{animation:none}}
#arhat-splash .sp-name-en{margin-top:10px}

/* ================= responsive ================= */
.ar-wrap{max-width:100%;min-width:0}
.ar-card{max-width:100%;overflow-x:auto;overflow-y:hidden}                 /* wide tables scroll inside their card instead of the whole page */
.ar-table{min-width:max-content}
.ar-table th,.ar-table td{white-space:nowrap}
.ar-table td:only-child{white-space:normal}
.ar-actions,.ar-toolbar{flex-wrap:wrap}
canvas{max-width:100%}
@media (max-width:900px){
  .ar-cols{grid-template-columns:1fr}
  .ar-drawer{width:min(460px,100vw)}
}
@media (max-width:640px){
  .ar-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ar-card{padding:12px}
  .kpi .val{font-size:19px}
  .kpi .bx b{font-size:19px}
  .ar-card .val{font-size:19px}
  .ar-card .lbl{font-size:11px}
  .qk{padding:9px 12px;font-size:13px}
  .ar-btn{padding:8px 12px}
  .ar-filter{gap:8px}
  .ar-filter>div{flex:1 1 100%}
  .ar-drawer .ar-filter>div{flex:1 1 100%}
  .ar-pagebar{justify-content:center;text-align:center}
  .ar-perpage{flex-wrap:wrap;justify-content:center}
  .ar-chipbar{width:100%}
  .ar-login-brand img{width:88px;height:88px}
}
@media (max-width:340px){
  .ar-grid{grid-template-columns:1fr}
}

/* ---- related-field buttons (add / change / view / delete) shown inline next to the select ---- */
.related-widget-wrapper.arh-related{align-items:center;gap:6px;flex-wrap:wrap!important;min-width:0}
.arh-related-field{flex:1 1 220px;min-width:0}
.arh-related-links{display:inline-flex;flex-wrap:wrap;gap:6px;flex-basis:100%}
.arh-rbtn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:38px;height:38px;padding:0 10px;font-size:13px;font-weight:500;white-space:nowrap;border:1px solid #e5e7eb;border-radius:8px;background:#fff;color:#6b7280;
 box-shadow:0 1px 2px rgba(0,0,0,.05);text-decoration:none;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.arh-rbtn .material-symbols-outlined{font-size:20px}
.arh-rbtn:hover{color:#16a34a;border-color:#16a34a;background:rgba(22,163,74,.06)}
.arh-rbtn-danger:hover{color:#dc2626;border-color:#dc2626;background:rgba(220,38,38,.06)}
.arh-rbtn:not([href]){opacity:.35;pointer-events:none;cursor:default}   /* change / view / delete need a selected value */
.dark .arh-rbtn{background:#111827;border-color:#374151;color:#9ca3af}
@media (max-width:520px){.arh-related-field{flex-basis:100%}.arh-rbtn{flex:1 1 100%;justify-content:flex-start}}

/* ---- workspace: every module as a tab on one screen ---- */
.ws{display:flex;flex-direction:column;gap:0;margin-top:-8px}
.ws-bar{display:flex;align-items:flex-start;gap:8px;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:30;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.dark .ws-bar{background:#111827;border-color:#374151}
.ws-tabs{display:flex;flex-wrap:wrap;gap:4px;flex:1;padding:6px 0 0}          /* several lanes, no scrolling */
.ws-tab{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:8px 13px;margin-bottom:6px;border:1px solid transparent;border-radius:8px;background:transparent;color:inherit;opacity:.8;cursor:pointer;font-size:14px;font-weight:600}
.ws-tab .material-symbols-outlined{font-size:19px}
.ws-tab:hover{background:rgba(22,163,74,.08);opacity:1}
.ws-tab.on{opacity:1;color:#fff;background:#16a34a;border-color:#16a34a;box-shadow:0 2px 6px rgba(22,163,74,.35)}
.ws-tools{display:flex;align-items:center;gap:4px;padding:6px 4px 0}
.ws-tool{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid #e5e7eb;background:transparent;color:inherit;cursor:pointer}
.ws-tool:hover{border-color:#16a34a;color:#16a34a}
.ws-panels{flex:1}
.ws-panel iframe{display:block;width:100%;height:var(--ws-frame-h,70vh);min-height:420px;border:0;background:transparent}
@media (max-width:640px){
  .ws-bar{position:static;box-shadow:none}
  .ws-tabs{gap:3px}
  .ws-tab{padding:6px 8px;font-size:12px;gap:4px;margin-bottom:3px}
  .ws-tab .material-symbols-outlined{font-size:16px}
}

/* ---- pages shown inside a workspace tab: no sidebar, no site header ---- */
.arh-embedded #page>div:not(#main){display:none!important}
.arh-embedded #arhat-splash{display:none!important}
.arh-embedded #main{width:100%}
.arh-embedded span:has(>[x-on\:click="sidebarToggle()"]),.arh-embedded span:has(>[x-on\:click="sidebarToggle()"])+span.w-px{display:none!important}
.arh-embedded #nav-sidebar{display:none!important}

/* ---- close (x) button on modal popups: sits on the popup's own top corner ---- */
.arh-modal-close{position:absolute;top:-14px;inset-inline-end:-14px;z-index:5;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
 border-radius:999px;border:0;background:#fff;color:#374151;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35);transition:background .15s,color .15s,transform .15s}
.arh-modal-close:hover{background:#dc2626;color:#fff;transform:scale(1.08)}
.arh-modal-close .material-symbols-outlined{font-size:22px}
.dark .arh-modal-close{background:#1f2937;color:#e5e7eb}
@media (max-width:640px){.arh-modal-close{top:-12px;inset-inline-end:-6px}}