/* ── HELIX Design System ─────────────────────────────────────────────── */
:root {
  --bg:#ffffff;
  --surface:#f7f8fa;
  --text:#0f1419;
  --muted:#6b7280;
  --border:#e5e7eb;
  --accent:#1e40af;
  --accent-press:#1e3a8a;
  --accent-soft:#eef2ff;
  --success:#15803d;
  --success-soft:#dcfce7;
  --danger:#b91c1c;
  --danger-soft:#fef2f2;
  --warn:#a16207;
  --warn-soft:#fef3c7;
  --v-wmt:#3a5e8a;
  --v-aub:#a16207;
  --v-dun:#15803d;
  --v-cos:#9f1239;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text)}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  font-size:17px;line-height:1.4;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top);
  padding-right:env(safe-area-inset-right);
  padding-left:env(safe-area-inset-left);
}
#app{flex:1;display:flex;flex-direction:column}

/* ── Header ── */
.hx-header{
  padding:14px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.hx-wordmark{font-weight:700;letter-spacing:.08em;font-size:15px}
.hx-wordmark .a{color:var(--accent)}
.hx-header-right{display:flex;align-items:center;gap:10px}
.hx-inv-no{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12px;color:var(--muted);letter-spacing:.04em}
.hx-menu-btn{
  width:36px;height:36px;background:none;border:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;
}
.hx-menu-btn:active{background:var(--surface)}

/* ── Stepper ── */
.hx-stepper{
  display:flex;align-items:center;gap:4px;padding:12px 16px;
  background:var(--surface);border-bottom:1px solid var(--border);
  overflow-x:auto;scrollbar-width:none;flex-shrink:0;
}
.hx-stepper::-webkit-scrollbar{display:none}
.hx-step{flex:0 0 auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap}
.hx-step .dot{
  width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;background:var(--bg);flex-shrink:0;
}
.hx-step.done .dot{background:var(--accent);border-color:var(--accent);color:#fff}
.hx-step.active .dot{background:var(--accent);border-color:var(--accent);color:#fff}
.hx-step.active{color:var(--text);font-weight:600}
.hx-step .bar{width:18px;height:1.5px;background:var(--border);flex-shrink:0}

/* ── Main content area ── */
.hx-main{flex:1;padding:24px 16px 130px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.hx-main.no-pad{padding:0 0 130px}

/* ── Typography ── */
.hx-h1{font-size:24px;font-weight:600;margin:0 0 4px;letter-spacing:-0.01em}
.hx-h1-lg{font-size:26px;font-weight:600;margin:0 0 2px;letter-spacing:-0.01em}
.hx-sub{color:var(--muted);margin:0 0 20px;font-size:15px}
.hx-date{font-size:14px;color:var(--muted)}
.hx-section-label{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}

/* ── Bottom action bar ── */
.hx-actions{
  position:fixed;left:0;right:0;bottom:0;background:var(--bg);
  border-top:1px solid var(--border);padding:12px 16px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  display:flex;gap:10px;z-index:10;
}
.hx-btn{
  flex:1;height:52px;border-radius:8px;font-size:16px;font-weight:600;
  border:1px solid var(--border);background:var(--bg);color:var(--text);
  cursor:pointer;font-family:inherit;-webkit-appearance:none;
}
.hx-btn:active{background:var(--surface)}
.hx-btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);flex:2}
.hx-btn-primary:active{background:var(--accent-press)}
.hx-btn-primary:disabled{background:#d1d5db;border-color:#d1d5db;color:#fff;cursor:not-allowed}
.hx-btn-success{background:var(--success);color:#fff;border-color:var(--success)}

/* ── Inputs ── */
.hx-input{
  width:100%;height:48px;padding:0 14px;font-size:16px;font-family:inherit;
  border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);
  -webkit-appearance:none;outline:none;
}
.hx-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hx-input-lg{height:52px;font-size:18px}
.hx-input-num{text-align:right;font-variant-numeric:tabular-nums}
.hx-input-otp{
  text-align:center;font-size:28px;letter-spacing:.6em;height:64px;
  font-family:"SF Mono",Menlo,Consolas,monospace;font-weight:600;padding-left:.6em;
}
.hx-input-readonly{background:var(--surface);color:var(--muted);border-style:dashed}
.hx-field-label{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-bottom:6px}
.hx-err{color:var(--danger);font-size:13px;margin-top:6px;min-height:18px}

/* ── Cards & lists ── */
.hx-card{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg)}
.hx-card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border);
}
.hx-list{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg)}
.hx-row{
  display:flex;align-items:center;gap:12px;padding:14px;
  border-bottom:1px solid var(--border);cursor:pointer;background:var(--bg);
}
.hx-row:last-child{border-bottom:0}
.hx-row:active{background:var(--surface)}
.hx-row.selected{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.hx-row-info{flex:1;min-width:0}
.hx-row-line1{font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:baseline;gap:6px}
.hx-row-line2{font-size:13px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.hx-row-amount{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0;text-align:right}
.hx-row-time{font-size:12px;color:var(--muted);margin-top:2px}

/* ── Vendor chips ── */
.hx-vchip{
  flex-shrink:0;width:42px;height:42px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-family:"SF Mono",Menlo,Consolas,monospace;font-size:11px;font-weight:700;
  color:#fff;letter-spacing:.05em;
}
.hx-vchip-sm{width:auto;height:auto;padding:2px 6px;border-radius:4px;font-size:10px}
.v-wmt{background:var(--v-wmt)}.v-aub{background:var(--v-aub)}.v-dun{background:var(--v-dun)}.v-cos{background:var(--v-cos)}

/* ── Status pills ── */
.hx-pill{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:10px;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.hx-pill-draft{background:#fef3c7;color:#78350f}
.hx-pill-sent{background:var(--accent-soft);color:var(--accent)}
.hx-pill-confirmed{background:var(--success-soft);color:var(--success)}
.hx-pill-failed{background:var(--danger-soft);color:var(--danger)}

/* ── Search ── */
.hx-search-wrap{position:relative;margin-bottom:10px}
.hx-search-input{width:100%;height:48px;padding:0 14px 0 42px;font-size:16px;font-family:inherit;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);-webkit-appearance:none;outline:none}
.hx-search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hx-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}

/* ── GPS button ── */
.hx-gps-btn{
  width:100%;height:44px;background:var(--bg);border:1px solid var(--border);
  border-radius:8px;font-size:14px;color:var(--accent);font-weight:500;
  font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;
  margin-bottom:18px;cursor:pointer;
}
.hx-gps-btn:active{background:var(--surface)}
.hx-gps-btn.active{background:var(--accent-soft);border-color:var(--accent)}

/* ── New invoice CTA ── */
.hx-new-cta{
  margin:16px 16px 24px;height:56px;border-radius:8px;
  background:var(--accent);color:#fff;border:none;cursor:pointer;
  font-family:inherit;font-size:17px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:8px;-webkit-appearance:none;
}
.hx-new-cta:active{background:var(--accent-press)}

/* ── Subtotal bar ── */
.hx-subtotal-bar{
  position:sticky;top:0;z-index:5;background:var(--bg);
  border-bottom:1px solid var(--border);padding:12px 16px;
  display:flex;align-items:baseline;justify-content:space-between;
}
.hx-subtotal-amount{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-0.01em}

/* ── Item delete ── */
.hx-item-delete{background:none;border:none;color:var(--muted);padding:6px;cursor:pointer;flex-shrink:0;border-radius:4px}
.hx-item-delete:active{background:var(--danger-soft);color:var(--danger)}

/* ── Add item form ── */
.hx-add-form{padding:16px;background:var(--surface);border-bottom:1px solid var(--border)}
.hx-field-row{display:flex;gap:8px;margin-bottom:10px}
.hx-field{display:flex;flex-direction:column}
.hx-field-desc{flex:1;margin-bottom:10px}
.hx-field-qty{width:80px}
.hx-field-rate{flex:1}
.hx-field-amount{flex:1}
.hx-add-btn{
  width:100%;height:46px;border:1px dashed var(--accent);background:var(--bg);
  color:var(--accent);border-radius:6px;font-weight:600;font-size:15px;
  font-family:inherit;cursor:pointer;
}
.hx-add-btn:active{background:var(--accent-soft)}
.hx-add-btn:disabled{color:#9ca3af;border-color:#d1d5db}

/* ── Photo grid ── */
.hx-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.hx-photo-tile{aspect-ratio:1/1;border:1px solid var(--border);border-radius:6px;overflow:hidden;position:relative;background:var(--surface)}
.hx-photo-tile img{width:100%;height:100%;object-fit:cover;display:block}
.hx-photo-tile .remove{
  position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;
  background:rgba(15,20,25,0.7);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;padding:0;
}
.hx-photo-add{
  aspect-ratio:1/1;border:1.5px dashed var(--accent);border-radius:6px;
  background:var(--accent-soft);color:var(--accent);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;cursor:pointer;font-size:12px;font-weight:600;
}
.hx-photo-add:active{background:#dbe5ff}
.hx-photo-add input{display:none}
.hx-photo-cta{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:36px 16px;border:1.5px dashed var(--accent);border-radius:8px;
  background:var(--accent-soft);color:var(--accent);cursor:pointer;margin-bottom:16px;
}
.hx-photo-cta:active{background:#dbe5ff}
.hx-photo-cta input{display:none}
.hx-photo-cta-label{font-size:16px;font-weight:600;margin-top:10px}
.hx-photo-cta-sub{font-size:13px;color:var(--muted);margin-top:4px}

/* ── Signature ── */
.hx-sig-card{background:var(--bg);border:1px solid var(--border);border-radius:6px;overflow:hidden}
.hx-sig-canvas-wrap{position:relative;background:#fafbfc}
.hx-sig-canvas-wrap canvas{display:block;width:100%;height:220px;touch-action:none;cursor:crosshair}
.hx-sig-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#c8cdd4;font-size:14px;pointer-events:none;font-style:italic;transition:opacity .12s}
.hx-sig-placeholder.hidden{opacity:0}
.hx-sig-meta{padding:14px 16px 6px}
.hx-sig-name{font-size:18px;font-weight:500}
.hx-sig-detail{font-size:13px;color:var(--muted);margin-top:2px}
.hx-sig-actions{display:flex;justify-content:flex-end;padding:0 16px 10px}
.hx-clear-btn{background:none;border:none;color:var(--muted);font-size:14px;padding:8px 0;text-decoration:underline;cursor:pointer;font-family:inherit}
.hx-clear-btn:disabled{color:#d1d5db;text-decoration:none;cursor:default}

/* ── Review total card ── */
.hx-total-card{background:var(--accent);color:#fff;border-radius:8px;padding:18px 18px 16px;margin-bottom:24px}
.hx-total-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.hx-total-amount{font-size:34px;font-weight:700;margin-top:2px;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.hx-total-meta{font-size:13px;opacity:.85;margin-top:6px}

/* ── Edit link ── */
.hx-edit-link{background:none;border:none;color:var(--accent);font-weight:600;font-size:13px;padding:4px 6px;cursor:pointer;font-family:inherit;border-radius:4px}
.hx-edit-link:active{background:var(--accent-soft)}

/* ── Counter strip ── */
.hx-counter{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:var(--surface);border:1px solid var(--border);
  border-radius:8px;margin-bottom:16px;
}
.hx-counter-num{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.hx-counter-label{font-size:13px;color:var(--muted)}

/* ── Help note ── */
.hx-help{margin-top:16px;padding:12px 14px;background:var(--surface);border-left:3px solid var(--accent);border-radius:0 4px 4px 0;font-size:14px;color:var(--muted);line-height:1.45}

/* ── Section ── */
.hx-section{margin:0 16px 22px}
.hx-section-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 4px 8px}
.hx-section-count{font-size:12px;color:var(--muted)}

/* ── Overlay / sheet ── */
.hx-overlay{position:fixed;inset:0;background:rgba(15,20,25,0.4);display:none;align-items:flex-end;justify-content:center;z-index:20}
.hx-overlay.show{display:flex}
.hx-sheet{background:var(--bg);width:100%;max-width:520px;border-radius:14px 14px 0 0;padding:8px 0 calc(12px + env(safe-area-inset-bottom))}
.hx-sheet-handle{width:40px;height:4px;background:#d1d5db;border-radius:2px;margin:6px auto 12px}
.hx-sheet-icon{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.hx-sheet-title{font-size:22px;font-weight:600;margin-bottom:4px;text-align:center}
.hx-sheet-sub{font-size:14px;color:var(--muted);margin-bottom:18px;text-align:center}
.hx-sheet-meta{background:var(--surface);border-radius:8px;padding:12px 14px;margin:0 20px 20px;font-size:14px}
.hx-sheet-meta-row{display:flex;justify-content:space-between;padding:4px 0}
.hx-sheet-meta-row .k{color:var(--muted)}
.hx-sheet-meta-row .v{font-family:"SF Mono",Menlo,Consolas,monospace;font-weight:600}
.hx-sheet-actions{display:flex;gap:10px;padding:0 20px}
.hx-sheet-item{display:flex;align-items:center;gap:14px;padding:14px 20px;cursor:pointer;background:var(--bg);font-size:16px}
.hx-sheet-item:active{background:var(--surface)}
.hx-sheet-item.danger{color:var(--accent);font-weight:600}
.hx-sheet-item svg{width:18px;height:18px;color:var(--muted)}
.hx-sheet-item.danger svg{color:var(--accent)}
.hx-sheet-user{padding:8px 20px 18px;border-bottom:1px solid var(--border);margin-bottom:8px}
.hx-sheet-user-name{font-size:17px;font-weight:600}
.hx-sheet-user-meta{font-size:13px;color:var(--muted);margin-top:2px}

/* ── Login brand ── */
.hx-brand{padding:48px 24px 24px;text-align:center}
.hx-brand .hx-wordmark{font-size:24px;letter-spacing:.12em}
.hx-brand .tagline{font-size:12px;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;margin-top:6px}
.hx-login-wrap{flex:1;padding:0 24px;max-width:420px;margin:0 auto;width:100%}
.hx-login-footer{text-align:center;padding:24px 16px 16px;font-size:13px;color:var(--muted)}
.hx-secondary-link{background:none;border:none;color:var(--accent);font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;padding:10px;margin:8px auto 0;display:block}
.hx-secondary-link:disabled{color:var(--muted);cursor:default}

/* ── Items subtotal ── */
.hx-items-subtotal{display:flex;justify-content:space-between;padding:12px 16px;background:var(--surface);font-size:14px;font-weight:600;border-top:1px solid var(--border);font-variant-numeric:tabular-nums}

/* ── Review photo grid (4-up) ── */
.hx-review-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.hx-review-photos .thumb{aspect-ratio:1/1;border-radius:4px;overflow:hidden;background:var(--surface);border:1px solid var(--border)}
.hx-review-photos .thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* ── Empty state ── */
.hx-empty{padding:32px 16px;text-align:center;color:var(--muted);font-size:14px}

/* ── Context bar ── */
.hx-context-bar{padding:14px 16px 8px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}

/* ── Greeting ── */
.hx-greeting{padding:24px 16px 8px}

/* ── Hidden ── */
.hidden{display:none!important}