:root {
  --bg: #f3f6fb;
  --card: #ffffff;
  --ink: #14213a;
  --muted: #5f6b80;
  --line: #dfe6f0;
  --brand: #1f5fbf;
  --brand-ink: #ffffff;
  --brand-soft: #e6eefb;
  --pos: #157347;
  --pos-soft: #e5f3eb;
  --neg: #c62f2f;
  --neg-soft: #fdecec;
  --warn: #b26a00;
  --warn-soft: #fdf1dc;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(20, 40, 80, .06), 0 4px 14px rgba(20, 40, 80, .06);
  --tabbar: 64px;
  color-scheme: light;
}
:root[data-theme="dark"] {
    --bg: #0e1522; --card: #172133; --ink: #eaf0fa; --muted: #93a1b8; --line: #263349;
    --brand: #5b9bff; --brand-ink: #0b1220; --brand-soft: #1b2c4a; --pos: #4cc489; --pos-soft: #14302a;
    --neg: #ff7b7b; --neg-soft: #3a1f25; --warn: #f0b04a; --warn-soft: #3a2e17;
    --shadow: 0 1px 2px rgba(0,0,0,.4);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #0e1522; --card: #172133; --ink: #eaf0fa; --muted: #93a1b8; --line: #263349;
    --brand: #5b9bff; --brand-ink: #0b1220; --brand-soft: #1b2c4a; --pos: #4cc489; --pos-soft: #14302a;
    --neg: #ff7b7b; --neg-soft: #3a1f25; --warn: #f0b04a; --warn-soft: #3a2e17;
    --shadow: 0 1px 2px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Gujarati", "Noto Sans Devanagari", sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 16px);
}
a { color: var(--brand); text-decoration: none; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.warn { color: var(--warn); font-weight: 600; }
.ic { width: 20px; height: 20px; flex: none; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--brand); color: var(--brand-ink);
}
.top-title { flex: 1; min-width: 0; }
.top-title small { display: block; opacity: .8; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-title h1 { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-back { color: inherit; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -10px; border-radius: 50%; }
.top-back .ic { width: 24px; height: 24px; }
.install-btn { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; }

.wrap { max-width: 640px; margin: 0 auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }

/* Tab bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--card); border-top: 1px solid var(--line);
}
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: 11.5px; font-weight: 500; }
.tabbar a.on { color: var(--brand); }
.tabbar .ic { width: 22px; height: 22px; }
.tabbar .tab-main .ic { width: 26px; height: 26px; background: var(--brand); color: var(--brand-ink); border-radius: 50%; padding: 8px; box-sizing: content-box; margin-top: -22px; box-shadow: 0 4px 12px rgba(31,95,191,.35); }
.tabbar .tab-main { color: var(--brand); }

/* Cards / lists */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; }
.card h3 { font-size: 16px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.sec { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: 6px; }
.empty { text-align: center; color: var(--muted); padding: 24px 0; margin: 0; }
.hint { margin: 0; color: var(--muted); }

.list { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.list li + li { border-top: 1px solid var(--line); }
.list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; color: inherit; min-height: 60px; }
.list a:active { background: var(--brand-soft); }
.list b { display: block; font-weight: 600; }
.list small { display: block; font-size: 13px; }
.list .amt { font-weight: 700; white-space: nowrap; }

/* Forms */
label { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
input, select {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 12px; width: 100%; min-height: 46px;
}
input:focus, select:focus { outline: none; border-color: var(--brand); background: var(--card); }
.big-input { font-size: 22px; font-weight: 700; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
details > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; color: var(--brand); }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary { margin-bottom: 12px; }
details form + form { margin-top: 10px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 600; font-size: 15px; border: 0; border-radius: 12px;
  padding: 12px 16px; min-height: 48px; cursor: pointer; text-align: center;
  -webkit-tap-highlight-color: transparent; transition: transform .08s ease;
}
.btn:active { transform: scale(.97); }
.btn-block { width: 100%; }
.btn-lg { min-height: 56px; font-size: 17px; }
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-ghost { background: var(--brand-soft); color: var(--brand); }
.btn-jama { background: var(--pos); color: var(--card); }
.btn-udhaar { background: var(--neg); color: var(--card); }
.btn-wa { background: #1fa855; color: #fff; }
.btn-danger-ghost { background: transparent; color: var(--neg); border: 1.5px solid var(--neg-soft); }
.btn-icon { width: 46px; min-height: 46px; padding: 0; }
.btn small { font-weight: 500; opacity: .85; font-size: 12px; }

.flash { padding: 12px 14px; border-radius: 12px; font-weight: 600; font-size: 14.5px; }
.flash-ok { background: var(--pos-soft); color: var(--pos); }
.flash-err { background: var(--neg-soft); color: var(--neg); }

/* Dashboard */
.hero { background: linear-gradient(135deg, #2f74d6, #1a4fa3); color: #fff; border-radius: 18px; padding: 18px; box-shadow: var(--shadow); }
.hero-main span, .hero-grid span { font-size: 13px; opacity: .85; display: block; }
.hero-main strong { font-size: 36px; display: block; line-height: 1.1; margin: 2px 0; }
.hero-main small { opacity: .85; }
.hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); }
.hero-grid b { font-size: 15px; }
.hero .pos { color: #b9f1d0; } .hero .neg { color: #ffd0c8; }
.due-card { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--neg-soft); color: var(--ink); border-radius: var(--radius); padding: 14px; }
.due-card span { font-size: 14px; font-weight: 600; }
.due-card strong { font-size: 22px; white-space: nowrap; }
.quick { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.quick .btn { padding: 12px 8px; }

/* Search / segmented */
.searchbar { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 12px; padding: 0 12px; box-shadow: var(--shadow); color: var(--muted); }
.searchbar input { border: 0; background: transparent; padding-left: 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--line); border-radius: 12px; padding: 3px; }
.seg a { text-align: center; padding: 9px; border-radius: 10px; color: var(--muted); font-weight: 600; font-size: 14px; }
.seg a.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.total-line { margin: 0; font-size: 15px; }

.daynav { display: grid; grid-template-columns: 46px 1fr 46px; gap: 8px; align-items: center; }
.daynav input { text-align: center; font-weight: 600; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-row div { background: var(--card); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow); }
.stat-row span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.stat-row b { font-size: 16px; }

.due-line { background: var(--neg-soft); color: var(--neg); padding: 10px 12px; border-radius: 10px; font-weight: 600; }

/* Customer ledger */
.bal-card { border-radius: 18px; padding: 18px; color: #fff; box-shadow: var(--shadow); }
.bal-card.is-due { background: linear-gradient(135deg, #d03b3b, #a32a3a); }
.bal-card.is-clear { background: linear-gradient(135deg, #1a8350, #146b5c); }
.bal-card span { font-size: 14px; opacity: .9; display: block; }
.bal-card strong { font-size: 38px; display: block; line-height: 1.1; margin: 2px 0 4px; }
.bal-card small { opacity: .85; font-size: 13px; }
.bal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.18); color: #fff; padding: 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; min-height: 40px; }
.chip .ic { width: 18px; height: 18px; }
.entry-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.entry-tabs .btn { flex-direction: column; gap: 0; min-height: 60px; font-size: 16px; }
.entry-form[data-type="jama"] { border-top: 4px solid var(--pos); }
.entry-form[data-type="udhaar"] { border-top: 4px solid var(--neg); }
.preview { margin: 0; font-size: 14px; }

.ledger { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.ledger li { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; border-left: 4px solid transparent; }
.ledger li + li { border-top: 1px solid var(--line); }
.ledger li.jama { border-left-color: var(--pos); }
.ledger li.udhaar { border-left-color: var(--neg); }
.ledger li.jama b .num { color: var(--pos); }
.ledger li.udhaar b .num { color: var(--neg); }
.l-main { min-width: 0; }
.l-main b { display: block; }
.l-main small { display: block; font-size: 13px; }
.l-bill { font-size: 13px; font-weight: 600; }
.l-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.l-side small { font-size: 11px; color: var(--muted); }
.l-side span { font-weight: 700; font-size: 14px; }
.l-del { background: none; border: 0; color: var(--muted); padding: 6px; margin: 2px -6px -6px 0; cursor: pointer; }
.l-del .ic { width: 18px; height: 18px; }

/* Invoice */
.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.actions form { display: contents; }

/* Auth */
.auth { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.auth-card { width: 100%; max-width: 380px; background: var(--card); border-radius: 20px; box-shadow: var(--shadow); padding: 26px 22px; display: flex; flex-direction: column; gap: 14px; text-align: center; }
.auth-card form { text-align: left; }
.auth-card p { margin: 0; }
.auth-logo img { border-radius: 16px; }

[hidden] { display: none !important; }

@media (max-width: 360px) {
  .hero-main strong { font-size: 30px; }
}
@media (min-width: 700px) {
  .tabbar { max-width: 640px; margin: 0 auto; border: 1px solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0; }
}
@media print {
  body { background: #fff; color: #000; padding: 0; }
  .top, .tabbar, .no-print, .actions, .flash { display: none !important; }
  .wrap { padding: 0; max-width: none; }
  .card { box-shadow: none; padding: 0; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* Payment status */
.paystat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.paystat label { flex-direction: row; margin: 0; }
.paystat input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.paystat span { flex: 1; text-align: center; padding: 11px 4px; border-radius: 10px; border: 1.5px solid var(--line); color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer; background: var(--bg); }
.paystat .ps-full input:checked + span { background: var(--pos); border-color: var(--pos); color: var(--card); }
.paystat .ps-partial input:checked + span { background: var(--warn); border-color: var(--warn); color: var(--card); }
.paystat .ps-none input:checked + span { background: var(--neg); border-color: var(--neg); color: var(--card); }
.paystat input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: 1px; }
.badge-full { background: var(--pos-soft); color: var(--pos); }
.badge-partial { background: var(--warn-soft); color: var(--warn); }
.badge-none { background: var(--neg-soft); color: var(--neg); }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.chips a { white-space: nowrap; padding: 7px 12px; border-radius: 999px; background: var(--card); color: var(--muted); font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow); }
.chips a.on { background: var(--brand); color: var(--brand-ink); }

/* Split payment + sticky save bar */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay-sum { margin: 0; font-size: 14px; color: var(--muted); }
.pay-sum b { color: var(--ink); }
body:has(.savebar) { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 92px); }
.savebar {
  position: fixed; left: 0; right: 0; z-index: 15;
  bottom: calc(var(--tabbar) + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(20, 40, 80, .08);
}
.savebar small { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.savebar small.sb-full { color: var(--pos); }
.savebar small.sb-partial { color: var(--warn); }
.savebar small.sb-none { color: var(--neg); }
.savebar b { font-size: 24px; font-weight: 800; line-height: 1.1; }
.savebar .btn { min-width: 150px; }
@media (min-width: 700px) { .savebar { max-width: 640px; margin: 0 auto; border-radius: 14px 14px 0 0; } }

/* Bill screen */
.bill-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 16px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); border-top: 5px solid var(--pos); }
.bill-top.st-partial { border-top-color: var(--warn); }
.bill-top.st-none { border-top-color: var(--neg); }
.bill-top strong { display: block; font-size: 34px; line-height: 1.1; margin: 6px 0 2px; }
.bill-top small { color: var(--muted); font-size: 13.5px; }
.bill-due { text-align: right; }
.bill-due small { display: block; font-weight: 600; }
.bill-due b { font-size: 22px; color: var(--neg); }
.pill { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.pill-full { background: var(--pos-soft); color: var(--pos); }
.pill-partial { background: var(--warn-soft); color: var(--warn); }
.pill-none { background: var(--neg-soft); color: var(--neg); }
.share-box { display: flex; flex-direction: column; gap: 8px; }
.share-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.share-hint { margin: 0; font-size: 13.5px; color: var(--muted); background: var(--brand-soft); padding: 10px 12px; border-radius: 10px; }
.btn:disabled { opacity: .65; }
.danger-sum { color: var(--neg) !important; }

/* The receipt itself looks like paper in both themes (it is also what goes into the PDF) */
.paper { background: #ffffff; color: #14213a; border-radius: 14px; box-shadow: var(--shadow); padding: 20px 18px; font-size: 15px; }
.p-head { text-align: center; padding-bottom: 12px; border-bottom: 1.5px dashed #cfd8e6; }
.p-head h2 { font-size: 21px; color: #1f5fbf; }
.p-head p { margin: 3px 0 0; font-size: 13px; color: #5f6b80; }
.p-meta { display: grid; grid-template-columns: auto auto 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid #e3e9f2; font-size: 14px; }
.p-meta span, .p-meta small { display: block; color: #5f6b80; font-size: 12px; }
.p-meta .r { text-align: right; min-width: 0; }
.p-items { list-style: none; margin: 0; padding: 0; }
.p-items li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eef2f7; }
.p-items b { display: block; font-weight: 600; }
.p-items small { color: #5f6b80; font-size: 13px; }
.p-items .num { font-weight: 700; white-space: nowrap; }
.p-tot { padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.p-tot div { display: flex; justify-content: space-between; gap: 12px; }
.p-grand { font-size: 20px; font-weight: 800; padding: 8px 0; border-top: 2px solid #14213a; margin-top: 4px; }
.p-due { background: #fdecec; color: #c62f2f; font-weight: 800; font-size: 17px; padding: 8px 10px; border-radius: 8px; margin-top: 4px; }
.p-paid { background: #e3f4ea; color: #157347; font-weight: 700; padding: 8px 10px; border-radius: 8px; margin-top: 4px; }
.p-note, .p-khata { margin: 12px 0 0; font-size: 13.5px; color: #5f6b80; }
.p-khata b { color: #c62f2f; }
.p-foot { text-align: center; margin: 14px 0 0; padding-top: 12px; border-top: 1.5px dashed #cfd8e6; font-size: 13px; color: #5f6b80; }
@media print {
  .bill-top, .share-box, details { display: none !important; }
  .paper { box-shadow: none; padding: 0; }
}

/* ===== New bill screen ===== */
.bill-form { display: flex; flex-direction: column; gap: 12px; }
.bsec { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.bsec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bsec-head h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.bsec-head .muted { font-size: 13px; font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.date-chip input { min-height: 34px; padding: 4px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--brand); background: var(--brand-soft); border-color: transparent; width: auto; }
.cust-sel { font-weight: 600; font-size: 17px; min-height: 52px; }

#items { display: flex; flex-direction: column; gap: 10px; counter-reset: item; }
.item-row { counter-increment: item; border: 1.5px solid var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.item-row:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.ir-top { display: flex; align-items: center; gap: 8px; }
.ir-no { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.ir-no::before { content: counter(item); }
.ir-top input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 6px 2px; min-height: 40px; font-size: 17px; font-weight: 600; }
.ir-top input:focus { background: transparent; }
.row-del { flex: none; border: 0; background: none; color: var(--muted); width: 40px; height: 40px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; }
.row-del:active { background: var(--neg-soft); color: var(--neg); }
.row-del .ic { width: 19px; height: 19px; }
.ir-bot { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.stepper { display: flex; align-items: center; background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.stepper input { width: 42px; min-height: 42px; border: 0; border-radius: 0; padding: 0; text-align: center; font-weight: 700; background: transparent; }
.q-btn { width: 36px; height: 42px; border: 0; background: none; color: var(--brand); font-size: 22px; font-weight: 600; cursor: pointer; }
.q-btn:active { background: var(--brand-soft); }
.ir-x { color: var(--muted); font-weight: 600; }
.money { display: flex; flex-direction: row; gap: 0; align-items: center; background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding-left: 10px; min-width: 0; }
.money:focus-within { border-color: var(--brand); background: var(--card); }
.money > span { color: var(--muted); font-weight: 600; font-size: 16px; }
.money input { border: 0; background: transparent; padding: 10px 10px 10px 4px; min-height: 42px; text-align: right; font-weight: 600; }
.money input:focus { background: transparent; }
.item-row output { min-width: 72px; text-align: right; font-weight: 800; font-size: 17px; }
.add-price { align-self: flex-start; border: 0; background: var(--brand-soft); color: var(--brand); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.add-item { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 50px; border: 2px dashed var(--line); border-radius: 14px; background: none; color: var(--brand); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.add-item:active { background: var(--brand-soft); }
.quick-items small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.quick-items div { display: flex; flex-wrap: wrap; gap: 6px; }
.qi { flex: none; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.qi:active { border-color: var(--brand); color: var(--brand); }
.due-line { background: var(--neg-soft); color: var(--neg); padding: 10px 12px; border-radius: 10px; font-weight: 600; }
.sum-lines { display: flex; flex-direction: column; gap: 8px; }
.sum-lines > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; }
.small-money { width: 130px; }
.sum-lines .sum-total { border-top: 1.5px dashed var(--line); padding-top: 10px; font-size: 22px; font-weight: 800; }
.split label { gap: 6px; }


/* ===== Product dropdown (new bill) ===== */
.item-row { position: relative; }
.combo { flex: 1; min-width: 0; display: flex; align-items: center; position: relative; }
.combo .item-in { flex: 1; min-width: 0; }
.combo-open { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--brand-soft); color: var(--brand); cursor: pointer; padding: 0; }
.combo-open .ic { width: 18px; height: 18px; transition: transform .15s; }
.item-row.dd-open .combo-open .ic { transform: rotate(180deg); }
.dd { position: absolute; left: 8px; right: 8px; top: 54px; z-index: 30; margin: 0; padding: 6px; list-style: none;
      background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(20, 40, 80, .18);
      max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.dd li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 10px; border-radius: 9px; cursor: pointer; min-height: 46px; }
.dd li + li { margin-top: 2px; }
.dd li.on, .dd li:hover { background: var(--brand-soft); }
.dd .dd-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink); }
.dd .dd-name mark { background: none; color: var(--brand); font-weight: 800; }
.dd .dd-tag { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.dd .dd-rate { flex: none; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.dd .dd-head { display: block; min-height: 0; padding: 6px 10px 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); cursor: default; }
.dd .dd-head:hover { background: none; }
.dd .dd-new { color: var(--brand); font-weight: 700; }
.add-line { display: flex; flex-direction: column; gap: 6px; }
.manage-link { align-self: flex-end; font-size: 13.5px; font-weight: 600; }

/* ===== Settings: theme + products ===== */
.theme-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme-pick label { flex-direction: column; align-items: center; gap: 8px; padding: 10px 6px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; color: var(--ink); text-align: center; font-size: 13px; }
.theme-pick input { position: absolute; opacity: 0; pointer-events: none; }
.theme-pick label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.theme-pick label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.tp-sw { width: 100%; height: 38px; border-radius: 8px; border: 1px solid rgba(0,0,0,.12); }
.tp-light .tp-sw { background: linear-gradient(135deg, #ffffff 50%, #f3f6fb 50%); }
.tp-dark .tp-sw { background: linear-gradient(135deg, #172133 50%, #0e1522 50%); }
.tp-auto .tp-sw { background: linear-gradient(135deg, #ffffff 50%, #172133 50%); }
.prod-list details { padding: 0; }
.prod-list summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px; color: var(--ink); font-weight: 500; }
.prod-list summary b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-list details form { padding: 0 14px 14px; }
.prod-list details[open] summary { color: var(--brand); }

/* ===== Logo ===== */
.top-logo { flex: none; width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.35); }
.top-back + .top-logo { margin-left: -4px; }
.auth-logo img { width: 64px; height: 64px; }

.flash-warn { background: var(--warn-soft); color: var(--warn); font-weight: 600; }

/* ===== Mobile pass ===== */
/* Compact header: more room for content */
.top { padding: calc(7px + env(safe-area-inset-top)) 12px 7px; gap: 10px; min-height: 52px; }
.top-title h1 { font-size: 18px; }
.top-title small { font-size: 11.5px; }
.top-logo { width: 30px; height: 30px; border-radius: 8px; }
.top-back { width: 36px; height: 36px; margin-left: -6px; margin-right: -6px; }

/* Task screens (new/edit bill, add jama/udhaar): no tab bar, bottom bar sits at the edge */
body.task { padding-bottom: calc(env(safe-area-inset-bottom) + 20px); }
body.task:has(.savebar) { padding-bottom: calc(env(safe-area-inset-bottom) + 96px); }
body.task .savebar { bottom: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

/* New bill in two steps */
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--card); border-radius: 14px; box-shadow: var(--shadow); position: sticky; top: calc(52px + env(safe-area-inset-top)); z-index: 9; }
.step { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 6px 8px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.step b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: var(--muted); font-size: 12px; flex: none; }
.step span { font-weight: 600; font-size: 12.5px; }
.step.on { background: var(--brand-soft); color: var(--brand); }
.step.on b { background: var(--brand); color: var(--brand-ink); }
.bill-form:not(.js) .steps, .bill-form:not(.js) #nextBtn { display: none; }
.bill-form.js[data-step="1"] .st2, .bill-form.js[data-step="2"] .st1 { display: none; }
.savebar .btn .ic { width: 20px; height: 20px; }
.savebar .btn[hidden] { display: none; }
@media (max-width: 380px) {
  .step { font-size: 13px; gap: 4px; }
  .step span { display: none; }
  .savebar .btn { min-width: 128px; }
  .savebar b { font-size: 21px; }
}

/* No sideways scrolling anywhere */
html, body { overflow-x: clip; }
.theme-pick label { min-width: 0; }
.theme-pick label span:last-child { overflow-wrap: anywhere; }
.actions .btn { white-space: nowrap; padding-left: 8px; padding-right: 8px; }

/* "More" as a menu of small screens */
.menu { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.menu li + li { border-top: 1px solid var(--line); }
.menu a, .menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; color: var(--ink); background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.menu .m-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.menu .m-txt { flex: 1; min-width: 0; }
.menu .m-txt b { display: block; font-weight: 600; }
.menu .m-txt small { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu .chev { color: var(--muted); }
.menu .m-out, .menu .m-out .m-ic { color: var(--neg); }
.menu .m-out .m-ic { background: var(--neg-soft); }
.menu-shop { display: flex; align-items: center; gap: 12px; }
.menu-shop img { width: 48px; height: 48px; border-radius: 13px; }
.menu-shop b { display: block; font-size: 17px; }
.theme-pick label { position: relative; }
.theme-pick input { left: 0; top: 0; width: 1px; height: 1px; }

/* ===== Comfortable tap sizes (40px+) and item row that fits small phones ===== */
.item-row { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "top top" "qty rate" "add amt"; gap: 8px; align-items: center; }
.ir-top { grid-area: top; }
.ir-bot { display: contents; }
.ir-x { display: none; }
.item-row .stepper { grid-area: qty; }
.item-row .money { grid-area: rate; }
.item-row .money input { width: 100%; min-height: 46px; font-size: 17px; }
.item-row output { grid-area: amt; justify-self: end; min-width: 0; }
.add-price { grid-area: add; justify-self: start; min-height: 40px; padding: 8px 12px; }
.q-btn { width: 42px; height: 46px; }
.stepper input { width: 44px; min-height: 46px; }
.manage-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px; }
.qi { min-height: 40px; padding: 8px 14px; }
.chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; }
details > summary { min-height: 44px; }
.l-del { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; margin: 0 -10px -10px 0; border-radius: 10px; }
.l-del:active { background: var(--neg-soft); color: var(--neg); }
.top-back { width: 40px; height: 40px; margin-left: -8px; margin-right: -6px; }
.combo-open { width: 40px; height: 40px; }
.qi { min-width: 44px; }
.seg a { display: flex; align-items: center; justify-content: center; min-height: 40px; }
.item-row { grid-template-columns: 131px minmax(0, 1fr); }          /* qty column = stepper width, rate gets the rest */
.add-price { white-space: nowrap; }
.qi { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Payments / settling bills ===== */
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode-pick label { position: relative; flex-direction: row; justify-content: center; align-items: center; min-height: 46px; border: 2px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font-size: 15px; font-weight: 700; cursor: pointer; }
.mode-pick input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; }
.mode-pick label:has(input:checked) { border-color: var(--pos); background: var(--pos-soft); color: var(--pos); }
.mode-pick label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.mode-pick[hidden], .settle-preview[hidden] { display: none; }
.small-note { margin: 0; font-size: 13px; }
.receipt-card { border-left: 4px solid var(--pos); display: flex; flex-direction: column; gap: 10px; }
.receipt-card p { margin: 0; }
.pay-card { border: 1.5px solid var(--pos); }
.pay-card > summary.pay-sum { color: var(--pos); font-size: 16px; }
.pay-card[open] > summary { margin-bottom: 12px; }
.settle-preview { list-style: none; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--bg); display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.settle-preview::before { content: "This jama will pay:"; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.settle-preview .ok { color: var(--pos); }
.settle-preview .part { color: var(--warn); }
.settle-preview .adv { color: var(--brand); }
.l-tag { display: inline-block; align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--neg-soft); color: var(--neg); }
.l-tag.ok { background: var(--pos-soft); color: var(--pos); }
.l-tag.part { background: var(--warn-soft); color: var(--warn); }
.l-main { display: flex; flex-direction: column; }
.l-bill { display: inline-flex; align-items: center; min-height: 40px; align-self: flex-start; }
.sec-note { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px; margin-left: 6px; }
.p-txn span:first-child { display: flex; flex-direction: column; }
.p-txn small { font-size: 11.5px; color: #5f6b80; }
.p-txn .num { color: #157347; }
.cust-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink); min-height: 60px; }
.cust-link b, .cust-link small { display: block; }
.cust-link .ic { color: var(--muted); }
.share-row .btn .ic { width: 18px; height: 18px; }
.share-hint { display: flex; flex-direction: column; gap: 8px; }
.share-hint[hidden] { display: none; }

/* Bill / PDF: shop mobile, title and thank-you stand out (no logo on the paper) */
.p-head p.p-mob { font-size: 14.5px; font-weight: 700; color: #14213a; }
.p-title { margin: 10px 0 0; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .2em; color: #5f6b80; }
.p-foot { font-size: 15px; font-weight: 700; color: #14213a; }
.p-social { margin: 6px 0 0; text-align: center; font-size: 12.5px; color: #5f6b80; line-height: 1.6; }
.p-social b { color: #14213a; font-weight: 600; }
.form-sub { margin: 6px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.p-meta > div { min-width: 0; } .p-meta b, .p-meta small, .p-items b { overflow-wrap: anywhere; }
.p-social span { white-space: nowrap; }
.p-meta small { white-space: nowrap; overflow-wrap: normal; }

/* ===== WhatsApp buttons ===== */
:root { --wa: #1fa855; --wa-ink: #12773b; --wa-soft: #e3f5ea; }
:root[data-theme="dark"] { --wa: #25b862; --wa-ink: #6fdc9b; --wa-soft: #133324; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --wa: #25b862; --wa-ink: #6fdc9b; --wa-soft: #133324; } }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa-soft { background: var(--wa-soft); color: var(--wa-ink); }
.btn .ic-wa, .chip .ic-wa { width: 20px; height: 20px; }
.btn-lg .ic-wa { width: 22px; height: 22px; }
.btn .ic, .chip .ic { flex: none; }
/* Customer card: Call · Remind · New bill on one even row */
.bal-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.bal-actions .chip { justify-content: center; white-space: nowrap; padding: 8px 6px; }

/* ===== Confirmation sheet (slides up from the bottom, thumb-friendly) ===== */
dialog.sheet { margin: auto auto 0; width: 100%; max-width: 520px; max-height: 85vh; padding: 0; border: 0; border-radius: 20px 20px 0 0;
  background: var(--card); color: var(--ink); box-shadow: 0 -10px 40px rgba(0,0,0,.25); }
dialog.sheet::backdrop { background: rgba(10, 20, 40, .55); }
dialog.sheet[open] { animation: sheetUp .18s ease-out; }
@keyframes sheetUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
dialog.sheet form { padding: 20px 18px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
dialog.sheet h3 { font-size: 19px; }
.sheet-lines { list-style: none; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.35; overflow-y: auto; }
.sheet-lines:empty { display: none; }
.sheet-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.sheet-btns .btn { min-height: 50px; }
@media (min-width: 700px) { dialog.sheet { margin: auto; border-radius: 20px; } }
@media (prefers-reduced-motion: reduce) { dialog.sheet[open] { animation: none; } }

/* Delete bill: what will happen + keep/delete later payments */
.del-facts { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
.del-choice { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.del-choice legend { font-weight: 700; font-size: 14.5px; margin-bottom: 8px; padding: 0; }
.del-choice label { flex-direction: row; align-items: flex-start; gap: 10px; padding: 12px; border: 2px solid var(--line); border-radius: 12px; color: var(--ink); font-weight: 500; cursor: pointer; }
.del-choice label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.del-choice input { width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; flex: none; accent-color: var(--brand); }
.del-choice span { display: flex; flex-direction: column; gap: 2px; }
.del-choice small { color: var(--muted); font-weight: 500; font-size: 13px; }