/* IMPAL phone app (mobile.impal.net). Own screens; the same API as the desktop. */
:root{
  --brand:#1d4ed8;--brand-2:#2563eb;--brand-soft:#e8efff;--on-brand:#fff;
  --hero-1:#1d4ed8;--hero-2:#3b6ef5;
  --bg:#f2f4f8;--surface:#fff;--surface-2:#f7f8fb;--line:#e4e8f0;
  --text:#111827;--muted:#64748b;--faint:#94a3b8;
  --good:#15803d;--good-soft:#e7f6ec;--warn:#b45309;--warn-soft:#fdf2e2;--bad:#dc2626;--bad-soft:#fdeceb;
  --radius:16px;--radius-sm:11px;
  --shadow:0 1px 2px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.05);
  --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);
  --tabbar-h:64px;
  color-scheme:light;
}
/* Dark: the phone's setting (Auto), or picked in More → Appearance (html[data-theme]). */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --brand:#5b8cff;--brand-2:#7aa2ff;--brand-soft:#1a2747;--on-brand:#fff;
  --hero-1:#1e3a8a;--hero-2:#2747b8;
  --bg:#0b1020;--surface:#141a2c;--surface-2:#1a2135;--line:#252e45;
  --text:#e8ecf5;--muted:#9aa6bf;--faint:#6b7790;
  --good:#4ade80;--good-soft:#11291c;--warn:#f5b860;--warn-soft:#2d2213;--bad:#ff7b72;--bad-soft:#2d1618;
  --shadow:0 1px 2px rgba(0,0,0,.4);color-scheme:dark;
}}
:root[data-theme="dark"]{
  --brand:#5b8cff;--brand-2:#7aa2ff;--brand-soft:#1a2747;--on-brand:#fff;
  --hero-1:#1e3a8a;--hero-2:#2747b8;
  --bg:#0b1020;--surface:#141a2c;--surface-2:#1a2135;--line:#252e45;
  --text:#e8ecf5;--muted:#9aa6bf;--faint:#6b7790;
  --good:#4ade80;--good-soft:#11291c;--warn:#f5b860;--warn-soft:#2d2213;--bad:#ff7b72;--bad-soft:#2d1618;
  --shadow:0 1px 2px rgba(0,0,0,.4);color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font:15px/1.45 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand);text-decoration:none}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}

/* Sign in */
.signin{min-height:100%;display:flex;flex-direction:column;padding:calc(var(--safe-top) + 40px) 20px calc(var(--safe-bottom) + 20px);
  background:linear-gradient(180deg,var(--hero-1) 0,var(--hero-1) 260px,var(--bg) 260px)}
.signin-top{color:var(--on-brand);text-align:center;margin-bottom:22px}
.signin-mark{width:64px;height:64px;border-radius:18px;background:#fff;padding:6px}
.signin-top h1{margin:10px 0 2px;font-size:26px;letter-spacing:.02em}
.signin-top p{margin:0;opacity:.85}
.signin-card{background:var(--surface);border-radius:20px;padding:20px;box-shadow:0 10px 30px rgba(15,23,42,.12);display:grid;gap:14px}
.signin-foot{margin-top:auto;text-align:center;color:var(--faint);font-size:12px;padding-top:24px}
.field{display:grid;gap:6px}
.field>span{font-size:13px;color:var(--muted);font-weight:600}
.field input,.field select,.field textarea,.input{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);outline:none}
.field input:focus,.field select:focus,.input:focus{border-color:var(--brand);background:var(--surface)}
.pw{position:relative;display:block}.pw input{padding-right:70px}
.pw .link{position:absolute;right:6px;top:50%;transform:translateY(-50%)}
.link{background:none;border:0;color:var(--brand);font-weight:600;padding:8px 10px;cursor:pointer}
.form-err{margin:0;color:var(--bad);font-size:14px}
.env-note{margin:0;color:var(--muted);font-size:12px;text-align:center}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:3px}
.seg button{border:0;background:none;padding:9px;border-radius:9px;font-weight:600;color:var(--muted);cursor:pointer}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.seg button:disabled{opacity:.4}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-weight:650;cursor:pointer}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn.block{width:100%}
.btn:disabled{opacity:.55}
.btn.sm{min-height:36px;padding:0 12px;font-size:14px;border-radius:10px}

/* App shell */
.app{min-height:100%;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:calc(var(--safe-top) + 8px) 12px 8px 16px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px)}
.topbar-title{flex:1;min-width:0}
.topbar h1{margin:0;font-size:22px;font-weight:750;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-title span{display:block;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-title span:empty{display:none}
.icon-btn{width:40px;height:40px;border-radius:12px;border:0;background:none;display:grid;place-items:center;margin-left:-8px;cursor:pointer}
.avatar{width:38px;height:38px;border-radius:50%;border:0;background:var(--brand-soft);color:var(--brand);font-weight:800;cursor:pointer}
.env-pill{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--warn);background:var(--warn-soft);padding:4px 8px;border-radius:999px}
.banner{margin:0 16px 8px;padding:10px 12px;border-radius:12px;background:var(--warn-soft);color:var(--warn);font-size:14px}
.view{flex:1;padding:4px 16px calc(var(--tabbar-h) + var(--safe-bottom) + 24px);outline:none}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--tabbar-h) + var(--safe-bottom));padding-bottom:var(--safe-bottom);
  background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(1.4) blur(14px);border-top:1px solid var(--line)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--faint);font-size:11px;font-weight:600}
.tabbar a.on{color:var(--brand)}
.tabbar .fab{width:48px;height:48px;margin-top:-18px;border-radius:16px;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 40%,transparent)}
.tabbar .fab svg{width:26px;height:26px;stroke-width:2.2}
.tabbar a.off{visibility:hidden}

/* Building blocks */
.section{margin:18px 0 8px;display:flex;align-items:baseline;justify-content:space-between}
.section h2{margin:0;font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.card+.card{margin-top:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi .k{font-size:13px;color:var(--muted);font-weight:600}
.kpi .v{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.kpi .s{font-size:12px;color:var(--muted);margin-top:2px}
.kpi.tap{cursor:pointer}
.hero,a.hero{background:linear-gradient(135deg,var(--hero-1),var(--hero-2));color:#fff;border-radius:20px;padding:18px;box-shadow:0 10px 24px color-mix(in srgb,var(--brand) 30%,transparent)}
.hero .k{opacity:.85;font-size:13px;font-weight:600}
.hero .v{font-size:30px;font-weight:800;letter-spacing:-.02em}
.hero .row{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:13px}
.hero .row b{display:block;font-size:16px}
.bar{height:8px;border-radius:999px;background:rgba(255,255,255,.25);overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;background:#fff;border-radius:inherit}
.bar.on-surface{background:var(--surface-2)}.bar.on-surface i{background:var(--brand)}
.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.action{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow);color:var(--text);font-size:12px;font-weight:600;text-align:center}
.action i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.list{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.item{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid var(--line);color:var(--text)}
.item:last-child{border-bottom:0}
.item .main{flex:1;min-width:0}
.item .t{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .d{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .r{text-align:right;font-size:13px;color:var(--muted);flex:none}
.item .r b{display:block;color:var(--text);font-size:15px}
.chev{color:var(--faint);flex:none}.chev svg{width:18px;height:18px}
.chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700}
.chip.good{background:var(--good-soft);color:var(--good)}.chip.warn{background:var(--warn-soft);color:var(--warn)}.chip.bad{background:var(--bad-soft);color:var(--bad)}.chip.mute{background:var(--surface-2);color:var(--muted)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.chips button{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.chips button.on{background:var(--text);border-color:var(--text);color:var(--bg)}
.search{position:sticky;top:calc(var(--safe-top) + 62px);z-index:10;padding:4px 0 10px;background:var(--bg)}
.search input{width:100%;min-height:46px;padding:0 14px 0 40px;border-radius:12px;border:1px solid var(--line);background:var(--surface) no-repeat 12px 50%/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");outline:none}
.search input:focus{border-color:var(--brand)}
.count{font-size:13px;color:var(--muted);margin:0 0 8px}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--text);margin-bottom:4px}
.err-card{background:var(--bad-soft);color:var(--bad);border-radius:12px;padding:12px 14px;font-size:14px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;font-size:14px}
.kv dt{color:var(--muted)}.kv dd{margin:0;text-align:right;font-weight:600}
.btn-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-top:12px}
.soon{opacity:.55}
.skel{border-radius:10px;background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
.aging{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.aging div{background:var(--surface-2);border-radius:10px;padding:8px 10px}
.aging span{display:block;font-size:11px;color:var(--muted);font-weight:600}
.aging b{font-size:14px}

/* Bottom sheet */
.sheet-scrim{position:fixed;inset:0;z-index:40;background:rgba(2,6,23,.45)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-height:88vh;overflow:auto;background:var(--surface);border-radius:20px 20px 0 0;padding:8px 16px calc(var(--safe-bottom) + 16px);box-shadow:0 -10px 30px rgba(0,0,0,.2)}
.sheet::before{content:'';display:block;width:40px;height:5px;border-radius:3px;background:var(--line);margin:4px auto 12px}
.sheet h3{margin:0 0 12px;font-size:18px}
.toast{position:fixed;left:16px;right:16px;bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 12px);z-index:50;background:var(--text);color:var(--bg);border-radius:12px;padding:12px 14px;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.25)}

/* Pickers, stock rows, customer history */
.input.pick{text-align:left;cursor:pointer;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.input.pick:disabled{opacity:.55}
.ph{color:var(--faint)}
.check{display:flex;gap:10px;align-items:center;font-weight:600;font-size:14px}
.check input{width:20px;height:20px;accent-color:var(--brand)}
.prices{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:12.5px;color:var(--text)}
.prices em{font-style:normal;color:var(--muted);font-size:11.5px;font-weight:600}
.score-n{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1}
.score-scale{position:relative;height:8px;border-radius:999px;margin-top:14px;background:linear-gradient(90deg,var(--bad),var(--warn),var(--good))}
.score-scale i{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--surface);border:3px solid var(--text);transform:translate(-50%,-50%)}
.score-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:4px}
.why{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.why summary{cursor:pointer;font-weight:650;color:var(--brand);list-style:none}
.why summary::-webkit-details-marker{display:none}
.factor{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.factor:last-child{border-bottom:0}
.factor .imp{flex:none;min-width:38px;text-align:center;border-radius:8px;padding:2px 0;font-weight:800;background:var(--surface-2);color:var(--muted);font-variant-numeric:tabular-nums}
.factor .imp.good{background:var(--good-soft);color:var(--good)}.factor .imp.bad{background:var(--bad-soft);color:var(--bad)}
.factor b{display:block}.factor span{color:var(--muted)}
.hist{padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.hist b{display:block}.hist span{color:var(--muted);font-size:12.5px}.hist p{margin:4px 0 0;font-size:13px}
.spark{display:flex;align-items:flex-end;gap:4px;height:64px;margin-top:14px}
.spark i{flex:1;background:var(--brand);border-radius:4px 4px 0 0;min-height:2px;opacity:.85}

/* Preview off the phone address (dev): say so, with the way back. */
.preview-bar{position:relative;z-index:60;text-align:center;font-size:12.5px;font-weight:600;padding:6px 12px;background:var(--warn-soft);color:var(--warn)}
.preview-bar a{color:inherit;text-decoration:underline}

/* On a wide screen the phone app stays phone-width, centred (someone opening it on a computer). */
@media (min-width:600px){
  body{background:color-mix(in srgb,var(--bg) 70%,#000 30%)}
  .signin,.app{max-width:480px;margin:0 auto;box-shadow:0 0 0 1px var(--line)}
  .app{background:var(--bg)}
  .tabbar{max-width:480px;margin:0 auto}
  .toast{max-width:448px;margin:0 auto}
  .sheet{max-width:480px;margin:0 auto}
}

/* Never wider than the phone. Real data has long unbroken values (GSTIN, invoice refs, reasons with
   links); without these, one of them widens its card and the whole page scrolls sideways. */
/* clip, not hidden: hidden on html/body makes the body its own scroll box (breaks iOS scrolling and the sticky bar). */
.app,.signin{max-width:100vw;overflow-x:clip}
.view>*,.card,.list,.hero,.item .main,.kv dd,.aging>div,.grid2>*,.actions>*,.hist,.factor>div{min-width:0}
.card,.hero,.list,.hist,.factor,.kv dd,.aging b,.count,.empty,.err-card,.banner,.view p{overflow-wrap:anywhere}
.kv{grid-template-columns:auto minmax(0,1fr)}
.grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.aging{grid-template-columns:repeat(3,minmax(0,1fr))}
.actions{grid-template-columns:repeat(4,minmax(0,1fr))}
.tabbar{grid-template-columns:repeat(5,minmax(0,1fr));width:100%}
/* Buttons, chips and tab labels keep their words whole. */
.btn,.chip,.tabbar a,.action,.seg button,.chips button,.section h2{overflow-wrap:normal;white-space:nowrap}
.btn-row .btn{padding:0 10px;min-width:0}
.btn svg{flex:none}

/* Installed app (Home Screen): an app screen, not a web page. iPhone zooms in on any input under
   16px and, with no browser bar, it stays zoomed and slides around; the screen also must not pan
   sideways. Vertical scroll and the sideways chip rows still work. */
input,select,textarea,.input,.search input,.field input{font-size:16px}
html{overflow-x:hidden;touch-action:pan-y;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.chips{touch-action:pan-x}
.sheet{overscroll-behavior:contain}

/* App shell: a full-height column. Top bar and tab bar sit in normal flow; only the content area
   (#view) scrolls. Nothing can widen the page (iPhone widens it to fit anything too wide, then the
   zoom lock keeps it cut off), and the tab bar always sits at the bottom of the screen. */
html,body{height:100%;overflow:hidden}
.app,.signin{position:fixed;inset:0}
.app{display:flex;flex-direction:column;overflow:hidden}
.signin{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
/* A plain bar, no frosted glass: on iPhone the blur softened the name in it. */
.topbar{position:relative;flex:none;background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
.banner{flex:none}
.view{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:28px}
.tabbar{position:relative;flex:none;left:auto;right:auto;bottom:auto;background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
.search{top:0}

/* New order */
.note{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--brand-soft);color:var(--text);font-size:14px;overflow-wrap:anywhere}
.note.warn{background:var(--warn-soft);color:var(--warn)}.note.bad{background:var(--bad-soft);color:var(--bad)}.note.ok{background:var(--good-soft);color:var(--good)}
.note b{font-weight:700}
.pick-card{display:flex;align-items:center;gap:12px;width:100%;border:0;text-align:left;cursor:pointer;color:var(--text)}
.pick-card .main{flex:1;min-width:0}.pick-card .t{font-weight:650}.pick-card .d{font-size:13px;color:var(--muted)}
.add-item{margin-top:12px;border-style:dashed;color:var(--brand)}
.add-item svg{width:20px;height:20px}
.editor{margin-top:12px;display:grid;gap:12px}
.editor-h{display:flex;align-items:center;justify-content:space-between}.editor-h .link{padding:4px 0}
.chips.wrap{flex-wrap:wrap;overflow:visible;padding-bottom:0}
.chips button:disabled{opacity:.4}
.mini{background:var(--surface-2);border-radius:10px;padding:8px 10px}
.mini span{display:block;font-size:11.5px;color:var(--muted);font-weight:600}.mini b{font-size:16px}
.stepper{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:8px}
.stepper button{min-height:48px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);font-size:22px;font-weight:600;cursor:pointer;color:var(--text)}
.stepper input{text-align:center;font-weight:700}
.item .rm{margin:-6px -8px 0 0;width:34px;height:34px;color:var(--faint)}.item .rm svg{width:18px;height:18px}
.send-bar{position:sticky;bottom:0;margin:14px -16px -28px;padding:12px 16px 16px;background:linear-gradient(180deg,transparent,var(--bg) 30%)}
.done-card{text-align:center;margin-top:24px;padding:28px 20px}
.done-card h2{margin:12px 0 4px;font-size:20px}
.done-tick{width:64px;height:64px;margin:0 auto;border-radius:50%;background:var(--good-soft);color:var(--good);display:grid;place-items:center}
.done-tick svg{width:34px;height:34px;stroke-width:2.6}
.spin{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}