/* os-31 · Reference-based mobile theme (Phase 1)
   MiR ke DigiKhata / PostEx references ki design language:
   near-black background, dark raised cards, white text, hairline
   separators, money IN = green / OUT = red, brand accent = KarobarOS
   orange. Sirf mobile (≤899px) aur sirf dark theme par apply hota
   hai — light theme aur desktop (Shopify-style) bilkul untouched.
   Ye sheet index.html mein SAB se aakhir load hoti hai. */

@media (max-width:899px){
body[data-theme=dark]{
  --dk-bg:#0e0e10; --dk-card:#1b1b1f; --dk-card2:#222228; --dk-line:#26262c;
  --dk-mut:#9c9ca5; --dk-in:#2fbf5f; --dk-out:#f2493f; --dk-blue:#5ea0f7;
  background:var(--dk-bg); color:#f4f4f5;
}

/* ── Chrome: header, surfaces, inputs ─────────────────────────── */
body[data-theme=dark] main{background:transparent}
body[data-theme=dark] main>header{
  background:#101013 !important; color:#fff;
  border-bottom:1px solid #232328; box-shadow:none !important;
}
body[data-theme=dark] main>header .page-options>summary{color:#fff}
body[data-theme=dark] #cloudButton{border-color:#3a3a41 !important}
body[data-theme=dark] .panel,
body[data-theme=dark] .card{
  background:var(--dk-card); border-color:var(--dk-line);
  color:#f4f4f5; box-shadow:none;
}
body[data-theme=dark] .panel{border-radius:16px}
body[data-theme=dark] input,
body[data-theme=dark] select,
body[data-theme=dark] textarea{
  background:var(--dk-card2); border-color:#33333a; color:#f4f4f5;
}
body[data-theme=dark] button{background:var(--dk-card2); border-color:#33333a; color:#f4f4f5}
body[data-theme=dark] button.primary,
body[data-theme=dark] .btn.primary{background:#ed612d; border-color:#ed612d; color:#fff}
body[data-theme=dark] button.link{background:none; border:0; color:#ff8a50}
body[data-theme=dark] .toolbar{border-color:var(--dk-line)}
body[data-theme=dark] th{background:#1e1e22; color:var(--dk-mut)}
body[data-theme=dark] td{border-color:#222228}
body[data-theme=dark] #records td{background:transparent}
body[data-theme=dark] .heading h1{color:#fff}
body[data-theme=dark] .heading p{color:var(--dk-mut)}
body[data-theme=dark] .stat strong{color:#fff}
body[data-theme=dark] .stat small{color:var(--dk-mut)}
body[data-theme=dark] .shell-business{color:#f4f4f5}
body[data-theme=dark] .shell-business small{color:var(--dk-mut)}
body[data-theme=dark] .top-tools-panel{background:#141417 !important; border-color:var(--dk-line) !important; box-shadow:none !important}
body[data-theme=dark] .tools-panel-heading{color:#f4f4f5 !important}
body[data-theme=dark] #toggleTopTools{background:#222228 !important; color:#fff !important; border-color:#33333a !important}
body[data-theme=dark] #topToolsGrid a{background:#1d1d21 !important; border-color:#2b2b31 !important; color:#f0f0f2 !important}
body[data-theme=dark] #topToolsGrid a .tool-symbol{background:#2c1c11 !important; color:#ff9a66 !important}
body[data-theme=dark] #topToolsGrid a.active{background:#33200f !important; border-color:#8a4b1f !important; color:#ffc9a3 !important}
body[data-theme=dark] dialog#modal{background:#17171a; color:#f4f4f5}
body[data-theme=dark] #calcShortcut{background:#1d1d21; color:#ff9a66; border-color:#33333a}
body[data-theme=dark] .notice{background:#221a12; border-color:#4a3418; color:#eecfa8}

/* ── Sidebar (tablet 651–899px par aside dikhta hai): os-36 ─────
   Dark aside (#222521, style.css) par base nav rang #65736b sirf
   ~3.1:1 tha — parhne ke 4.5:1 floor se neeche. Sirf rang gehre-
   roshan kiye hain, layout wohi. Saare rang #222521 par ≥4.5:1
   (report mein recomputed). */
body[data-theme=dark] aside{background:#222521; border-right-color:#383a37; color:#e8e8ea}
body[data-theme=dark] aside nav a{color:#c3c8c3}
body[data-theme=dark] aside nav a.active{color:#fff}
body[data-theme=dark] aside nav label{color:#a9aea9}
body[data-theme=dark] aside .business{background:#2d302b; color:#f1f0ea}
body[data-theme=dark] aside .business small{color:#bcbebc}
body[data-theme=dark] aside .foot{color:#bcbebc; border-top-color:#383a37}
body[data-theme=dark] aside .brand-name i{color:#bcbebc}

/* ── Bottom nav: near-black bar, orange active pill ───────────── */
body[data-theme=dark] .mobile-app-nav{
  background:#121214; border-top:1px solid var(--dk-line); box-shadow:none;
}
body[data-theme=dark] .mobile-app-nav a,
body[data-theme=dark] .mobile-app-nav button{color:#8e8e96}
body[data-theme=dark] .mobile-app-nav .active{color:#fb542b; background:transparent}

/* ── Tabs: orange underline (DigiKhata style) ─────────────────── */
body[data-theme=dark] .tabs{
  gap:2px; border-bottom:1px solid var(--dk-line); margin:10px 0 14px;
}
body[data-theme=dark] .tabs button{
  background:transparent !important; border:0 !important; border-radius:0;
  color:#a5a5ad; font-weight:600; box-shadow:none;
}
body[data-theme=dark] .tabs button.selected{
  background:transparent !important; color:#fb542b;
  box-shadow:inset 0 -2.5px 0 #fb542b;
}

/* ── Money colors (records / ledgers) ─────────────────────────── */
body[data-theme=dark] #records .debit-cell,
body[data-theme=dark] .own-ledger .debit-cell{color:var(--dk-out); background:rgba(242,73,63,.06)}
body[data-theme=dark] #records .credit-cell,
body[data-theme=dark] .own-ledger .credit-cell{color:var(--dk-in); background:rgba(47,191,95,.06)}
body[data-theme=dark] .negative{color:var(--dk-out)}
body[data-theme=dark] .positive{color:var(--dk-in)}

/* ── Home: section heads + tile grids ─────────────────────────── */
body[data-theme=dark] .simple-home h1{color:#fff}
body[data-theme=dark] .home-dashboard-link{color:#fb542b}
.dk-section-head{
  font-size:12px; letter-spacing:1.6px; font-weight:700;
  color:var(--dk-mut); margin:22px 0 10px;
}
.dk-khata, .dk-more{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.dk-khata a, .dk-more a, .dk-more button{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; padding:15px 4px 12px; min-height:92px;
  background:var(--dk-card); border:1px solid var(--dk-line); border-radius:16px;
  color:#f4f4f5; font-size:13.5px; font-weight:600; text-decoration:none; text-align:center;
}
.dk-more a, .dk-more button{min-height:84px; font-size:12.5px}
.dk-tile-ico{
  width:46px; height:46px; border-radius:50%; flex:none;
  background:#2c1c11; color:#fb542b; display:grid; place-items:center;
}
.dk-tile-ico svg{width:24px; height:24px}
.dk-pay{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.dk-pay a{
  display:flex; align-items:center; gap:12px; min-height:66px;
  background:var(--dk-card); border:1px solid var(--dk-line); border-radius:16px;
  padding:12px 14px; color:#fff; font-size:15.5px; font-weight:700; text-decoration:none;
}
.dk-pay .dk-tile-ico{width:42px; height:42px}
.dk-pay .dk-tile-ico svg{width:22px; height:22px}
.dk-arrow{margin-left:auto; color:var(--dk-mut); font-size:20px; font-weight:400}

/* ── Cash: summary card + day-grouped entries ─────────────────── */
body[data-theme=dark] .stats.dk-stats-off{display:block; margin:14px 0}
.dk-cashsum{
  display:grid; grid-template-columns:1fr 1fr auto; align-items:stretch; gap:0;
  background:var(--dk-card); border:1px solid var(--dk-line); border-radius:16px;
  padding:16px 6px 14px 16px;
}
.dk-cashsum>div{display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0}
.dk-cashsum strong{font-size:19px; font-weight:700; color:#fff; white-space:nowrap}
.dk-cashsum .dk-cs-in strong{color:var(--dk-in)}
.dk-cashsum small{color:var(--dk-mut); font-size:12px}
.dk-cashsum .dk-cs-mid{border-left:1px solid var(--dk-line); padding-left:14px}
.dk-cs-hist{
  background:transparent !important; border:0 !important; color:#f4f4f5 !important;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:2px 12px; font-size:12px;
}
.dk-cs-hist svg{width:21px; height:21px}
.dk-cs-hist small{color:#f4f4f5; font-size:12px}

.dk-day{margin:2px 0 16px}
.dk-day-head{
  display:grid; grid-template-columns:minmax(0,1fr) 88px 96px; gap:8px; align-items:end;
  padding:10px 2px 9px; border-bottom:1px solid var(--dk-line);
}
.dk-day-head h3{font-size:14.5px; font-weight:700; color:#fff; margin:0; letter-spacing:.2px}
.dk-day-head small{color:var(--dk-mut); font-size:12px; display:block; margin-top:3px}
.dk-col-label{font-size:12px; font-weight:700; color:#e8e8ea; text-align:right}
.dk-day-tot{font-size:13.5px; font-weight:700; text-align:right; white-space:nowrap}
.dk-day-tot.out, .dk-amt.out{color:var(--dk-out)}
.dk-day-tot.in, .dk-amt.in{color:var(--dk-in)}
.dk-crow{
  display:grid; grid-template-columns:minmax(0,1fr) 88px 96px; gap:8px; align-items:start;
  width:100%; text-align:left; padding:11px 2px;
  background:transparent !important; border:0 !important; border-bottom:1px solid #1e1e22 !important;
  border-radius:0; color:inherit;
}
.dk-ctime{display:block; font-size:12px; color:#c9c9cf; margin-bottom:6px}
.dk-chip{
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid #c74719; color:#ff8a50; border-radius:999px;
  padding:3px 9px; font-size:12px; font-weight:600; max-width:100%;
}
.dk-chip svg{width:13px; height:13px; flex:none}
.dk-chip span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dk-cnote{display:block; color:#d8d8dc; font-size:13px; margin-top:5px; overflow-wrap:anywhere}
.dk-amt{font-size:14.5px; font-weight:600; text-align:right; padding-top:1px; white-space:nowrap}

/* Cash dock: CASH OUT (red) / CASH IN (green) pill pair — reference */
body[data-theme=dark][data-page="cash"] #pageAddDock button.red{
  background:linear-gradient(180deg,#e0342b,#c1272d) !important;
  border-color:transparent !important; color:#fff !important;
  min-height:54px; border-radius:999px; font-size:15px; font-weight:700;
}
body[data-theme=dark][data-page="cash"] #pageAddDock button.green{
  background:linear-gradient(180deg,#2ea44f,#1f8a3e) !important;
  border-color:transparent !important; color:#fff !important;
  min-height:54px; border-radius:999px; font-size:15px; font-weight:700;
}

/* ── Party: totals strip, avatar rows, ADD FAB ────────────────── */
body[data-theme=dark] .account-totals{
  background:var(--dk-card); border:1px solid var(--dk-line);
  border-radius:16px; padding:14px 16px; margin-bottom:12px;
}
body[data-theme=dark] .account-total-values{gap:22px}
body[data-theme=dark] .account-total-values strong{font-size:21px}
body[data-theme=dark] .account-totals .credit strong{color:var(--dk-in)}
body[data-theme=dark] .account-totals .debit strong{color:var(--dk-out)}
body[data-theme=dark] .account-totals small{color:var(--dk-mut)}
body[data-page="party"][data-theme=dark] #records thead{display:none}
body[data-page="party"][data-theme=dark] #records td{
  padding:13px 6px; border-top:0; border-bottom:1px solid #222228;
}
body[data-page="party"][data-theme=dark] .party-list-title{flex-wrap:nowrap}
body[data-page="party"][data-theme=dark] .party-list-title>div{min-width:0}
body[data-page="party"][data-theme=dark] .party-list-title b{font-size:15px; color:#fff; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body[data-page="party"][data-theme=dark] .party-list-title small{color:var(--dk-mut); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body[data-page="party"][data-theme=dark] .party-avatar{
  background:#26262c; color:#fb542b; border-radius:50%; font-weight:700;
}
body[data-page="party"][data-theme=dark] .balance-amount{text-align:right}
body[data-page="party"][data-theme=dark] .balance-amount strong{font-size:16px; color:#e8e8ea}
body[data-page="party"][data-theme=dark] .balance-amount.credit strong{color:var(--dk-in)}
body[data-page="party"][data-theme=dark] .balance-amount.debit strong{color:var(--dk-out)}
body[data-page="party"][data-theme=dark] .balance-amount small{color:var(--dk-mut)}
body[data-page="party"][data-theme=dark] #pageAddDock{
  left:12px; right:auto; max-width:calc(100vw - 150px);
  bottom:calc(86px + env(safe-area-inset-bottom));
}
body[data-page="party"][data-theme=dark] #pageAddDock button{
  min-height:50px; border-radius:999px; padding:12px 22px;
  font-size:14px; font-weight:700; letter-spacing:.3px; white-space:nowrap;
}

/* ── Parcels: order cards (PostEx Order Logs style) ───────────── */
.dk-parcels{display:flex; flex-direction:column; gap:10px; padding:4px 0}
.dk-parcel{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:var(--dk-card); border:1px solid var(--dk-line); border-radius:14px;
  padding:13px 14px; color:#f4f4f5;
}
.dk-p-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.dk-p-top strong{font-size:15.5px; font-weight:700; color:#fff; overflow-wrap:anywhere}
.dk-p-cod{font-size:15px; font-weight:700; color:#fff; white-space:nowrap}
.dk-p-phone{display:block; font-size:13.5px; color:#d5d5da; margin-top:3px; text-decoration:none}
.dk-p-addr{font-size:12.5px; color:var(--dk-mut); line-height:1.45; margin-top:2px; overflow-wrap:anywhere}
.dk-p-meta{display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:10px}
.dk-p-track{
  background:none !important; border:0 !important; padding:0;
  color:var(--dk-blue) !important; font-size:13.5px; font-weight:600;
}
.dk-p-courier{font-size:12px; color:var(--dk-mut); font-weight:600}
.dk-p-date{font-size:12px; color:var(--dk-mut); margin-left:auto; white-space:nowrap}
.dk-parcel.dk-cancelled{border-color:#2b2b30;background:#232327}
.dk-cancelled .dk-p-top strong{color:#a7a7ae}
.dk-cancelled .dk-p-addr, .dk-cancelled .dk-p-courier{color:#83838c}
.dk-cancelled .dk-p-cod{color:#a7a7ae}
body[data-theme=dark] .compact-parcel{background:var(--dk-card); border-color:var(--dk-line); color:#f4f4f5}
}

/* ══ MiR feedback (os-31 extension) — Parcels, HAR width/theme ══
   1) Koi alag WhatsApp button nahi: number khud wa.me link hai.
   2) CN / tracking blue link (ref-3 jaisa); click → detail sheet
      ke andar timeline.
   3) Table: text LEFT, numeric RIGHT, header cell ke saath.
   4) Date + time ek hi line (nowrap). */

/* 1 — purana green pill "button" khatam: number saade link jaisa */
.parcel-whatsapp{
  display:inline !important; background:none !important; border:0 !important;
  padding:0 !important; border-radius:0 !important; box-shadow:none !important;
  color:#1f7aec; font-weight:600; font-size:inherit; text-decoration:none;
}
.parcel-whatsapp:hover{background:none !important; text-decoration:underline}
body[data-theme=dark] .parcel-whatsapp{color:#5ea0f7}

/* 2/3/4 — parcels table alignment, CN link, date nowrap */
#parcelData table th, #parcelData table td{text-align:left}
#parcelData table th.dk-num, #parcelData table td.dk-num{text-align:right}
#parcelData table td.dk-cn .link, #parcelData table th.dk-cn{color:#1f7aec}
#parcelData table td.dk-cn .link{font-weight:600}
body[data-theme=dark] #parcelData table td.dk-cn .link,
body[data-theme=dark] #parcelData table th.dk-cn{color:#5ea0f7}
#parcelData .record-stamp{white-space:nowrap}
#parcelData table td.dk-nowrap{white-space:nowrap}
.compact-parcel .record-stamp{white-space:nowrap}
.compact-parcel .tracking-number{color:#1f7aec; font-weight:600}
body[data-theme=dark] .compact-parcel .tracking-number{color:#5ea0f7}

/* Timeline (parcel detail sheet ke andar) */
.dk-timeline{margin:18px 0 6px; border-top:1px solid var(--line); padding-top:14px; text-align:left}
.dk-timeline h3{font-size:14px; margin:0 0 12px}
.dk-timeline ol{list-style:none; margin:0; padding:0}
.dk-timeline li{position:relative; padding:0 0 14px 20px; border-left:2px solid var(--line); margin-left:5px}
.dk-timeline li:last-child{border-left-color:transparent; padding-bottom:2px}
.dk-tl-dot{position:absolute; left:-6px; top:3px; width:10px; height:10px; border-radius:50%; background:#ed612d}
.dk-timeline li b{font-size:13.5px}
.dk-tl-cn{color:#1f7aec; font-weight:600; margin-left:8px; white-space:nowrap}
body[data-theme=dark] .dk-tl-cn{color:#5ea0f7}
.dk-tl-when{display:block; font-size:12px; color:var(--muted); margin-top:2px; white-space:nowrap}
.dk-tl-src{display:block; font-size:11px; color:var(--muted); margin-top:1px}

/* ══ MiR feedback round 2 — Cancelled grey + reports strip + profit ══
   Cancelled row (desktop table): poora record muted grey.
   os-36 (Round 2, item 6): pehle sirf TEXT grey tha, background
   transparent rehta tha — ab row ka background bhi wazeh grey
   hai (light par halka grey, dark par gehra grey). Baqi status
   rows bilkul untouched. */
#parcelData table tr.dk-row-cancelled td{color:#83838c;background:#f0f0f2}
#parcelData table tr.dk-row-cancelled .dk-cn .link{color:#83838c}
body[data-theme=dark] #parcelData table tr.dk-row-cancelled td{color:#a3a3ad;background:#26262b}

/* Reports strip (Parcels page ke upar, active filter ke counts) —
   os-32: BUTTON jaisi pill chips KHATAM. Professional stats card:
   flat surface, bari ginati upar, chhota label neeche, darmiyan
   hairline dividers. Status rang sirf number par; koi pill,
   koi button affordance nahi (ye sirf maloomat hai). */
.dk-report-strip{margin:0 0 12px}
.dk-rs-title{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 7px 2px}
.dk-rs-grid{display:grid; grid-template-columns:1fr 1fr 1fr 1.4fr 1fr; background:#fff; border:1px solid var(--line); border-radius:14px; padding:13px 4px 11px}
.dk-rs-stat{text-align:center; min-width:0; padding:0 2px}
.dk-rs-stat + .dk-rs-stat{border-left:1px solid var(--line)}
.dk-rs-n{display:block; font:800 21px Manrope,sans-serif; line-height:1.15; letter-spacing:-.3px}
.dk-rs-stat small{display:block; margin-top:3px; font-size:10px; font-weight:600; letter-spacing:.02em; color:var(--muted); white-space:nowrap}
.dk-rs-n.Delivered{color:#16a34a}
.dk-rs-n.Returned{color:#dc2626}
.dk-rs-n.Transit{color:#a57620}
.dk-rs-n.Draft{color:#2563eb}
.dk-rs-n.Cancelled{color:#6d6d75}
body[data-theme=dark] .dk-rs-grid{background:#1b1b1f; border-color:#26262c}
body[data-theme=dark] .dk-rs-stat + .dk-rs-stat{border-left-color:#26262c}
body[data-theme=dark] .dk-rs-n.Transit{color:#facc15}
body[data-theme=dark] .dk-rs-n.Draft{color:#5ea0f7}
body[data-theme=dark] .dk-rs-n.Cancelled{color:#a3a3ad}

/* ===== os-38 · DK layout shapes ab LIGHT mobile par bhi (G4/G8) =====
   Boss ka light-unify faisla: Cash day-groups + 3-part summary card +
   pill dock buttons aur Party pill FAB — jo shapes pehle sirf dark
   mobile par milti theen — ab light mobile par bhi, LEKIN sirf hamare
   apne rangon mein (orange/white + app ke functional IN-green/OUT-red).
   Har rule body[data-theme=light] scoped hai: saved-dark render bilkul
   untouched. Sirf Cash + Party screens; Home/Parcels dark-gated hi. */
@media (max-width:899px){
body[data-theme=light]{
  --dk-card:#fff; --dk-card2:#f6f7f9; --dk-line:var(--line,#e9ecef);
  --dk-mut:var(--muted,#747d87); --dk-in:#15835c; --dk-out:#d24444;
  --dk-blue:#1f7aec;
}
/* Summary card + day list: dark ke hard-coded safed rang light par ink/muted */
body[data-theme=light] .stats.dk-stats-off{display:block; margin:14px 0}
body[data-theme=light] .dk-cashsum strong{color:var(--ink,#20272e)}
body[data-theme=light] .dk-cashsum .dk-cs-in strong{color:var(--dk-in)}
body[data-theme=light] .dk-cs-hist{color:var(--ink,#20272e) !important}
body[data-theme=light] .dk-cs-hist small{color:var(--ink,#20272e)}
body[data-theme=light] .dk-day-head h3{color:var(--ink,#20272e)}
body[data-theme=light] .dk-col-label{color:var(--ink,#20272e)}
body[data-theme=light] .dk-crow{border-bottom-color:var(--dk-line) !important}
body[data-theme=light] .dk-ctime{color:var(--dk-mut)}
body[data-theme=light] .dk-chip{color:#c2410c}
body[data-theme=light] .dk-cnote{color:var(--ink,#20272e)}
/* Cash dock: pill SHAPE sirf — rang base sheets ke hi rehte hain */
body[data-theme=light][data-page="cash"] #pageAddDock button.red,
body[data-theme=light][data-page="cash"] #pageAddDock button.green{
  min-height:54px; border-radius:999px; font-size:15px; font-weight:700;
}
/* Party: dock position + pill FAB — dark wali rule ka light mirror */
body[data-page="party"][data-theme=light] #pageAddDock{
  left:12px; right:auto; max-width:calc(100vw - 150px);
  bottom:calc(86px + env(safe-area-inset-bottom));
}
body[data-page="party"][data-theme=light] #pageAddDock button{
  min-height:50px; border-radius:999px; padding:12px 22px;
  font-size:14px; font-weight:700; letter-spacing:.3px; white-space:nowrap;
}
}