/* ===== Inkvoice — Material-3 look matching the Android app ===== */
:root{
  --bg:#f4f3fa;                 /* light lavender page background */
  --card:#e7e4f0;              /* grey-lavender rounded cards */
  --card-2:#e9e6f3;
  --ink:#1c1b1f;              /* near-black text */
  --muted:#49454f;           /* label / secondary */
  --muted-2:#8a8791;         /* outline / hint */
  --outline:#8a8791;         /* field outline */
  --primary:#2e3d6b;         /* buttons (dark navy indigo) */
  --primary-press:#26335c;
  --radio:#2f4fd0;           /* selected radio / links */
  --pdf:#5aa4e6;
  --create:#2e3d6b;          /* nav active */
  --green:#2e7d32;           /* advance / due */
  --red:#c0392b;
  --link:#2e3d6b;
  --nav-h:76px;
  --radius:20px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:-apple-system,"Roboto",BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior-y:none;
}
button,input,select,textarea{font-family:inherit;font-size:16px;color:var(--ink)}
.hidden{display:none!important}

/* ---------- Screen shell ---------- */
.screen{
  min-height:100vh;
  padding:calc(env(safe-area-inset-top) + 10px) 16px calc(var(--nav-h) + env(safe-area-inset-bottom) + 20px);
  max-width:640px;margin:0 auto;
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0 10px;min-height:44px}
.topbar h1{font-size:24px;font-weight:800;margin:0;letter-spacing:-.01em}
.back{display:inline-flex;align-items:center;gap:4px;color:var(--muted);background:none;border:0;padding:8px 4px 8px 0;cursor:pointer;font-weight:600}
.back svg{width:22px;height:22px}

/* ---------- Bottom nav: Profile · Create · Invoices · Biz Card ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:#e7e4f1;border-top:1px solid #d9d5e8;
  display:flex;align-items:center;justify-content:space-around;
}
.tabbar button{
  border:0;background:none;cursor:pointer;color:#6a6675;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  font-size:13px;font-weight:600;flex:1;height:100%;
}
.tabbar button svg{width:27px;height:27px}
.tabbar button.active{color:var(--ink)}
.tabbar button.active svg{color:var(--ink)}
/* locked until the profile is filled (Create / Invoices / Biz Card) */
.tabbar button.disabled{opacity:.38;cursor:not-allowed}

/* ---------- Home wordmark ---------- */
.wordmark-wrap{min-height:calc(100vh - var(--nav-h) - 60px);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:28px}
.wordmark{font-family:"Courier New",ui-monospace,monospace;font-weight:800;font-size:64px;letter-spacing:-1px;color:var(--ink)}
.home-logo{width:220px;height:220px;border-radius:50%;overflow:hidden;box-shadow:0 6px 22px #0002;background:#fff;display:flex;align-items:center;justify-content:center}
.home-logo img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Grey rounded cards ---------- */
.mcard{background:var(--card);border-radius:var(--radius);padding:18px 18px;margin-bottom:16px}
.mcard.tight{padding:16px}

/* ---------- Material outlined fields (floating label) ---------- */
.mfield{position:relative;margin:20px 0 4px}
.mfield .ctrl{
  width:100%;border:1px solid var(--outline);border-radius:8px;background:transparent;
  padding:23px 14px 8px;font-size:17px;outline:none;color:var(--ink);
}
.mfield textarea.ctrl{min-height:120px;resize:vertical;line-height:1.35;padding-top:26px}
.mfield>label{
  position:absolute;left:12px;top:19px;background:var(--bg);padding:0 5px;
  font-size:17px;color:var(--muted);pointer-events:none;transition:top .12s,font-size .12s,color .12s;
}
.mfield.on-card>label{background:var(--card)}
/* float up when focused or filled */
.mfield .ctrl:focus + label,
.mfield .ctrl:not(:placeholder-shown) + label,
.mfield select.ctrl + label{ top:-9px;font-size:13px; }
.mfield .ctrl:focus + label{ color:var(--radio); }
.mfield .ctrl:focus{border-color:var(--radio);border-width:2px;padding:22px 13px 7px}
.mfield .req{color:var(--red)}
.mfield .icon-r{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.mfield .prefix{position:absolute;left:14px;bottom:10px;color:var(--muted)}
.mfield.has-prefix .ctrl{padding-left:34px}
.mfield.has-prefix>label{left:30px}
.counter{font-size:13px;color:var(--muted-2);margin:2px 2px 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.two>*{min-width:0}
.mfield .ctrl{min-width:0}
/* keep date fields inside their column and drop the double calendar glyph */
.mfield input[type="date"]{min-width:0;font-size:16px}
.mfield input[type="date"]::-webkit-calendar-picker-indicator{opacity:0;position:absolute;right:0;top:0;width:46px;height:100%;margin:0;cursor:pointer}
/* prefilled 0 shown greyed until the field is focused/edited */
.mfield .ctrl[data-zero="1"]{color:var(--muted-2)}

/* selects look like outlined fields */
select.ctrl{appearance:none;-webkit-appearance:none;background-image:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 22px;border-radius:28px;border:0;font-weight:700;font-size:16px;cursor:pointer;
  background:var(--primary);color:#fff;transition:background .12s,transform .05s}
.btn:active{transform:scale(.985);background:var(--primary-press)}
.btn.block{width:100%}
.btn.ghost{background:transparent;color:var(--primary);border:1px solid var(--outline)}
.btn.danger{background:var(--red)}
.btn svg{width:20px;height:20px}
.iconbtn{background:none;border:0;color:var(--ink);padding:8px;border-radius:50%;cursor:pointer;display:inline-flex}
.iconbtn:active{background:#0000000d}
.iconbtn.danger{color:#333}

/* ---------- Radio row (Invoice / Quotation) ---------- */
.radios{display:flex;align-items:center;justify-content:center;gap:36px;padding:14px 0}
.radio{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:19px;color:var(--muted)}
.radio .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--muted-2);display:inline-flex;align-items:center;justify-content:center}
.radio.on{color:var(--ink);font-weight:700}
.radio.on .dot{border-color:var(--radio)}
.radio.on .dot::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--radio)}

/* ---------- Create: summary card ---------- */
.summary{background:var(--card);border-radius:var(--radius);padding:18px;display:flex;align-items:center;gap:12px;margin-bottom:8px}
.summary .no{font-size:30px;font-weight:800;flex:1;white-space:nowrap}
.summary .no small{font-weight:800}
.summary .pdfbtn{width:74px;height:74px;border-radius:50%;background:var(--pdf);color:#fff;border:0;
  font-weight:800;font-size:18px;cursor:pointer;flex-shrink:0}
.summary .tot{font-size:14px;text-align:right;line-height:1.5;min-width:120px}
.summary .tot .g{font-weight:800}
.summary .tot .green{color:var(--green);font-weight:800}

/* ---------- Items ---------- */
.section-h{font-size:22px;font-weight:800;margin:18px 2px 4px}
.section-sub{color:var(--muted);font-size:14px;margin:0 2px 10px}
.itemrow{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px 2px;border-bottom:1px solid #d9d5e8}
.itemrow .t{font-size:19px;font-weight:700}
.itemrow .d{color:var(--muted);font-size:15px;margin-top:2px}
.itemrow .acts{display:flex;gap:6px;flex-shrink:0}
.itemrow .acts svg{width:22px;height:22px}

/* item editor inputs (inline) */
.item-edit{display:grid;grid-template-columns:1fr 64px 84px 34px;gap:8px;align-items:center;margin:6px 0}
.item-edit .ctrl{border:1px solid var(--outline);border-radius:8px;padding:12px 10px;background:transparent;width:100%}

/* ---------- List ---------- */
.totalcard{background:var(--card);border-radius:var(--radius);padding:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px}
.totalcard .big{font-size:26px;font-weight:800}
.totalcard .sub{color:var(--muted);font-size:15px;margin-top:2px}
.filter{position:relative}
.filter select{appearance:none;-webkit-appearance:none;border:1px solid var(--outline);border-radius:8px;
  padding:12px 34px 12px 14px;background:transparent;font-size:16px}
.filter .chev{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted)}

.doccard{background:var(--card);border-radius:var(--radius);padding:18px;margin-bottom:14px;display:flex;justify-content:space-between;gap:12px}
.doccard .no{font-size:26px;font-weight:800}
.doccard .client{font-size:19px;font-weight:700;margin-top:4px}
.doccard .meta{color:var(--muted);font-size:15px;line-height:1.5;margin-top:2px}
.doccard .due{color:var(--green);font-weight:800;font-size:15px}
.doccard .right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.doccard .trash svg{width:26px;height:26px;color:#333}

/* paid/unpaid toggle */
.toggle{width:58px;height:32px;border-radius:16px;border:1px solid #b04b52;background:#e57373;position:relative;cursor:pointer;flex-shrink:0}
.toggle .knob{position:absolute;top:2px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:left .15s}
.toggle.paid{background:#66bb6a;border-color:#3f7a43}
.toggle.paid .knob{left:27px}

/* ---------- Home (logo) ---------- */
.home-wrap{min-height:calc(100vh - var(--nav-h) - 40px);display:flex;align-items:center;justify-content:center}
.logo-circle{width:300px;height:300px;border-radius:50%;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center}
.logo-circle span{font-size:64px;letter-spacing:2px;color:var(--ink)}
.logo-circle img{width:80%;height:80%;object-fit:contain;border-radius:50%}

/* ---------- Profile logo w/ pencil ---------- */
.profile-logo{display:flex;justify-content:center;margin:6px 0 22px;position:relative}
.profile-logo .circle{width:150px;height:150px;border-radius:50%;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 2px 8px #0002}
.profile-logo .circle span{font-size:34px}
.profile-logo #logo-inner{width:100%;height:100%;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.profile-logo .circle img{width:100%;height:100%;object-fit:cover;display:block}
.profile-logo .pencil{position:absolute;right:-6px;bottom:-2px;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #0003}
.profile-logo .pencil svg{width:20px;height:20px;color:#333}

/* tax number rows */
.taxrow{display:flex;gap:8px;align-items:center;margin:10px 0}
.taxrow .sw{width:14px;height:44px;border-radius:4px;flex-shrink:0}

/* profile misc */
.hint-b2g{color:var(--red);font-size:13px;font-weight:400}
.startno{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 2px}
.startno>div{font-size:18px}
.startno-warn{color:var(--red);font-size:13px;margin-top:2px}
.startno-input{width:130px;padding:16px 14px;border:1px solid var(--outline);border-radius:8px;background:transparent;font-size:17px}
.links{display:flex;justify-content:center;gap:28px;margin:22px 0 8px}
.linkbtn{background:none;border:0;color:var(--link);font-weight:700;font-size:16px;cursor:pointer}
.profile-logo .circle span{display:none}

/* ---------- Clean PDF viewer (mirrors Android PdfViewerActivity) ---------- */
.pdf-screen{position:fixed;inset:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;background:#3a3a40;z-index:5}
.pdf-topbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;background:var(--primary)}
.pdf-topbar .iconbtn{color:#fff}
.pdf-topbar .iconbtn:active{background:#ffffff22}
.btn-share{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--primary);
  border:0;border-radius:999px;padding:9px 18px;font-size:15px;font-weight:700;cursor:pointer}
.btn-share svg{width:18px;height:18px}
.pdf-stage{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.pdf-doc{width:100%;height:100%;border:0;background:#3a3a40;display:block}

/* ---------- back-to-home chevron (top-left, for iPhone) ---------- */
/* Floats on top of everything, always in the corner, semi-transparent so it never
   steals layout space or annoys the user. No reserved padding — it overlays content. */
.backhome{position:fixed;top:calc(env(safe-area-inset-top) + 6px);left:8px;z-index:60;
  width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.45);color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.68;
  -webkit-backdrop-filter:blur(8px) saturate(1.3);backdrop-filter:blur(8px) saturate(1.3);
  transition:opacity .15s ease}
.backhome:hover,.backhome:active{opacity:1;background:rgba(255,255,255,.72)}
.backhome svg{width:20px;height:20px}

/* ---------- ad slot (Invoices / Quotations tabs) ---------- */
.ad-slot{margin:16px 2px 4px;border:1px solid var(--outline);border-radius:12px;
  background:#faf9fe;overflow:hidden;padding:6px 8px 8px;text-align:center}
.ad-slot .ad-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-2);padding:0 0 5px}
.ad-slot .ad-frame{display:block;margin:0 auto;border:0;width:320px;height:50px;max-width:100%}

/* ---------- badges / empty / toast ---------- */
.badge{display:inline-flex;align-items:center;padding:3px 12px;border-radius:999px;font-size:13px;font-weight:700}
.badge.Paid{background:#cdeccf;color:#2e7d32}
.badge.Pending{background:#fbe6c2;color:#a8690a}
.badge.Overdue{background:#f6cdcd;color:#c0392b}
.badge.Cancelled{background:#ddd8ea;color:#5a5566}
.empty{text-align:center;color:var(--muted);padding:60px 16px}
.empty svg{width:48px;height:48px;color:#c9c3de;margin-bottom:10px}
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 18px);
  transform:translateX(-50%);background:#1c1b1f;color:#fff;padding:13px 20px;border-radius:14px;
  font-size:15px;font-weight:600;z-index:100;box-shadow:0 8px 24px #0004;opacity:0;transition:opacity .2s;white-space:nowrap}
.toast.show{opacity:1}
.fade{animation:fade .22s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- Business card (logo left, info right — matches Android canvas) ---------- */
.bizcard{aspect-ratio:1000/650;background:#fff;border:1.5px solid #cfccd8;border-radius:16px;
  display:flex;align-items:center;gap:22px;padding:26px}
.bizcard .bc-logo{width:30%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.bizcard .bc-logo img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.bizcard .bc-logo .c{width:100%;height:100%;border-radius:50%;border:1.5px solid currentColor;opacity:.5}
.bizcard .bc-info{flex:1;min-width:0}
.bizcard .bc-name{font-size:22px;font-weight:800;line-height:1.15}
.bizcard .bc-line{font-size:14px;color:#333;margin-top:5px;overflow:hidden;text-overflow:ellipsis}

/* business-card background-color slider */
.card-color{margin-top:18px;text-align:center}
.card-color .cc-label{font-size:12px;color:var(--muted);margin-bottom:8px;letter-spacing:.02em}
.cc-slider{-webkit-appearance:none;appearance:none;width:100%;max-width:340px;height:20px;
  border-radius:10px;border:1px solid #9aa0a6;outline:none;cursor:pointer}
.cc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:#fff;border:2px solid #555;box-shadow:0 1px 3px #0005;cursor:pointer}
.cc-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid #555;cursor:pointer}

/* ---------- Create: client-info row, B2G, PDF style dialog ---------- */
.rowhead{display:flex;align-items:center;justify-content:space-between;margin:18px 2px 2px}
.b2g-check{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;cursor:pointer}
.b2g-check input{width:22px;height:22px}
.b2g-check .help{display:inline-flex;color:#6a6675}
.b2g-check .help svg{width:22px;height:22px}
.btn:disabled{background:#9a97a5;cursor:not-allowed}
.btn:disabled:active{transform:none}

.style-card{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;background:#fff;border:1px solid var(--line,#e2e0ec);margin-bottom:8px;cursor:pointer}
.style-card.on{background:#dcd9f0;border-color:var(--radio)}
.style-card img{width:80px;height:100px;object-fit:contain;border:1px solid #eee;border-radius:4px;background:#fff}
.style-card .rad{width:22px;height:22px;border-radius:50%;border:2px solid var(--muted-2);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.style-card.on .rad{border-color:var(--radio)}
.style-card.on .rad::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--radio)}
.style-card .nm{font-size:18px;font-weight:600}
.style-card.on .nm{font-weight:800}
#style-list{max-height:60vh;overflow-y:auto}

/* ---------- Item modal ---------- */
.modal-overlay{position:fixed;inset:0;z-index:200;background:#0006;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--bg);border-radius:24px;padding:22px;width:100%;max-width:440px}
.modal h3{font-size:22px;font-weight:800}