/* ============================================================
   Document Generator — mobile-first styles
   Two parts: (1) the app UI  (2) the printable document (.paper)
   ============================================================ */

:root{
  --ink:#0d1b2a;
  --ink-soft:#41556b;
  --paper-bg:#f7f8fa;
  --card:#ffffff;
  --line:#e4e8ee;
  --brand:#1668e3;
  --brand-press:#0f4fb0;
  --accent:#12b886;
  --danger:#e03131;
  --amber:#fff4e3;
  --amber-line:#ffd9a0;
  --shadow:0 6px 20px rgba(13,27,42,.08);
  --tabbar-h:58px;
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html,body{height:100%;}
html{
  overflow-x:hidden;
  /* iOS Safari inflates text inside blocks wider than the viewport ("font
     boosting"). That silently enlarged the PDF summary lines on phones but not
     on desktop. 100% keeps text at its declared size without blocking zoom. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  font-family:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  background:var(--paper-bg);
  color:var(--ink);
  overscroll-behavior-y:none;
  overflow-x:hidden;
  width:100%;
  max-width:100%;
  position:relative;
}

/* ---------- screens ---------- */
.screen{
  position:fixed;inset:0;bottom:calc(var(--tabbar-h) + var(--safe-b));
  display:flex;flex-direction:column;
}
.screen[hidden]{display:none;}

.appbar{flex:0 0 auto;padding:16px 18px 10px;}
.appbar h1{margin:0;font-size:21px;letter-spacing:-.3px;line-height:1.2;}
.appbar .sub{margin:3px 0 0;font-size:12.5px;color:var(--ink-soft);}

/* Discard sits in the action bar next to Generate. Outlined rather than solid
   red so the blue Generate button stays the obvious primary action, and the
   confirmation sheet guards against a mis-tap. */
.btn.discard{
  flex:0 0 22%;background:#fff;border:1.5px solid #f0c2c2;color:var(--danger);
  font-size:14px;padding:15px 4px;white-space:nowrap;
}
.btn.discard:active{background:#fdeeee;border-color:#e79b9b;}
.btn.discard[hidden]{display:none;}

.scroll{
  flex:1 1 auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:2px 16px 24px;
  max-width:100%;
}
#screen-new .scroll{padding-bottom:96px;}

/* ---------- form fields ---------- */
/* ------------------------------------------------------------
   iOS Safari zooms the whole page whenever a focused form control
   has a font-size below 16px — and it never zooms back out. Keeping
   every control at 16px prevents it without disabling pinch-zoom.
   ------------------------------------------------------------ */
input,select,textarea{font-size:16px;}

.field{margin-bottom:13px;}
.field label{
  display:block;font-size:12px;font-weight:600;color:var(--ink-soft);
  margin-bottom:5px;letter-spacing:.2px;
}
.field label .opt{font-weight:400;color:#9aa7b4;text-transform:none;}

input[type=text],input[type=date],input[type=number],input[type=search],
input[type=password],input[type=tel],input[type=email],
select,textarea{
  width:100%;max-width:100%;min-width:0;
  background:var(--card);border:1.5px solid var(--line);
  border-radius:12px;padding:12px 13px;font-size:16px;color:var(--ink);
  font-family:inherit;appearance:none;-webkit-appearance:none;
}
/* iOS Safari gives date inputs an intrinsic width that can overflow a flex column */
input[type=date]{min-height:47px;}
input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0;}
textarea{resize:vertical;line-height:1.45;}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(22,104,227,.14);
}
input[readonly]{background:#f0f3f7;color:#7d8b99;}
select{background-image:linear-gradient(45deg,transparent 50%,#9aa7b4 50%),
                       linear-gradient(135deg,#9aa7b4 50%,transparent 50%);
  background-position:calc(100% - 19px) 51%,calc(100% - 14px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px;}

.row2{display:flex;gap:11px;}
.row2 .field{flex:1;min-width:0;}

/* segmented control */
.seg{display:flex;background:#e9edf3;border-radius:12px;padding:4px;gap:4px;}
.seg button{
  flex:1;border:0;background:transparent;padding:10px 0;border-radius:9px;
  font-size:13.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;font-family:inherit;
}
.seg button.on{background:var(--card);color:var(--brand);box-shadow:0 1px 4px rgba(13,27,42,.12);}

.seclabel{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  color:#8a99a8;margin:20px 2px 10px;
}

/* toggle */
.toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--card);border:1.5px solid var(--line);border-radius:12px;
  padding:11px 13px;margin-bottom:12px;
}
.toggle-row span{font-size:14.5px;font-weight:600;}
.sw{
  width:46px;height:27px;background:#cdd6df;border:0;border-radius:20px;
  position:relative;transition:background .2s;flex:0 0 auto;cursor:pointer;padding:0;
}
.sw::after{
  content:"";position:absolute;width:21px;height:21px;background:#fff;
  border-radius:50%;top:3px;left:3px;transition:left .2s;
}
.sw[aria-pressed=true]{background:var(--brand);}
.sw[aria-pressed=true]::after{left:22px;}

/* ---------- item rows in the builder ---------- */
.item{
  background:var(--card);border:1.5px solid var(--line);border-radius:13px;
  padding:11px 12px;margin-bottom:9px;display:flex;align-items:flex-start;gap:10px;
}
.item .body{flex:1;min-width:0;cursor:pointer;}
.item .nm{font-weight:600;font-size:14.5px;overflow-wrap:anywhere;}
.item .ds{font-size:12.5px;color:var(--ink-soft);margin-top:2px;line-height:1.35;overflow-wrap:anywhere;}
.item .meta{font-size:12px;color:var(--ink-soft);margin-top:3px;}
.item .amt{font-weight:700;font-size:14px;white-space:nowrap;}
.item .x{
  border:0;background:transparent;color:#c2ccd6;font-size:15px;
  padding:0 0 0 4px;cursor:pointer;line-height:1;
}
.additem{
  width:100%;border:1.6px dashed var(--brand);background:#eef4ff;color:var(--brand);
  padding:13px;border-radius:13px;font-size:14.5px;font-weight:600;cursor:pointer;
  font-family:inherit;
}
.empty-hint{
  text-align:center;color:#9aa7b4;font-size:13px;padding:14px 8px 4px;margin:0;
}

/* ---------- totals ---------- */
.totals{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:14px 15px;}
.totals .r{display:flex;justify-content:space-between;font-size:13.5px;margin:6px 0;color:var(--ink-soft);}
.totals .r b{color:var(--ink);font-weight:600;}
.totals .grand{
  background:var(--brand);color:#fff;margin:12px -15px -14px;padding:13px 15px;
  border-radius:0 0 13px 13px;display:flex;justify-content:space-between;
  font-size:16px;font-weight:700;
}

/* ---------- bottom action bar ---------- */
.actionbar{
  position:absolute;left:0;right:0;bottom:0;padding:11px 16px 14px;
  background:linear-gradient(to top,var(--paper-bg) 74%,rgba(247,248,250,0));
  display:flex;gap:10px;
}
.btn{
  flex:1;border:0;border-radius:13px;padding:15px;font-size:15px;font-weight:700;
  cursor:pointer;font-family:inherit;
}
.btn.primary{background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(22,104,227,.32);}
.btn.primary:active{background:var(--brand-press);}
.btn.primary:disabled{opacity:.55;box-shadow:none;}
.btn.danger{background:var(--danger);color:#fff;}
.btn.ghost{
  flex:0 0 auto;width:56px;background:var(--card);border:1.5px solid var(--line);
  color:var(--ink);font-size:19px;
}
.btn.ghost.wide{flex:1;width:auto;font-size:15px;}

/* ---------- tab bar ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;height:calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  background:var(--card);border-top:1px solid var(--line);display:flex;z-index:40;
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;font-size:10.5px;color:#9aa7b4;font-weight:600;background:none;border:0;
  cursor:pointer;font-family:inherit;
}
.tab .ic{font-size:19px;line-height:1;}
.tab.on{color:var(--brand);}

/* ---------- home / saved ---------- */
.create-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:var(--brand);color:#fff;border:0;border-radius:16px;padding:19px;
  margin-top:6px;font-size:17px;font-weight:700;cursor:pointer;font-family:inherit;
  box-shadow:0 8px 22px rgba(22,104,227,.32);
}
.create-btn:active{background:var(--brand-press);}
.create-btn .plus{font-size:22px;}

.searchbar{
  display:flex;align-items:center;gap:9px;background:var(--card);
  border:1.5px solid var(--line);border-radius:12px;padding:0 13px;margin-top:14px;
}
.searchbar .ico{font-size:14px;opacity:.6;}
/* 16px minimum: anything smaller makes iOS Safari zoom the page on focus. */
.searchbar input{border:0;padding:12px 0;background:transparent;font-size:16px;}
.searchbar input:focus{outline:none;box-shadow:none;}

.doclist{padding-bottom:8px;}
.doccard{
  background:var(--card);border:1.5px solid var(--line);border-radius:15px;
  padding:12px 13px;margin-bottom:11px;box-shadow:var(--shadow);
}
.doccard .top{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
.badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;letter-spacing:.4px;}
.badge.INVOICE{background:#e7f0ff;color:var(--brand);}
.badge.QUOTATION{background:#eafaf3;color:#0d9b6c;}
.badge.BILL{background:#fdeede;color:#c47d18;}
.doccard .id{margin-left:auto;font-size:11px;color:#93a1af;font-weight:600;overflow-wrap:anywhere;}
.doccard .cust{font-size:15px;font-weight:700;overflow-wrap:anywhere;}
.doccard .sub{font-size:12px;color:var(--ink-soft);margin-top:1px;overflow-wrap:anywhere;}
.doccard .when{
  font-size:11.5px;color:#7d8b99;margin-top:3px;
  display:flex;align-items:center;gap:5px;
}
.doccard .when::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:#c2ccd6;flex:0 0 auto;
}
.doccard .foot{
  display:flex;align-items:center;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--line);
}
.doccard .total{font-size:14.5px;font-weight:700;}
.doccard .acts{margin-left:auto;display:flex;gap:7px;}
.miniact{
  width:38px;height:38px;border-radius:11px;border:1.5px solid var(--line);
  background:#fbfcfd;display:flex;align-items:center;justify-content:center;
  font-size:15px;cursor:pointer;padding:0;
}
.miniact.share{background:var(--brand);border-color:var(--brand);color:#fff;}
.miniact.del{color:var(--danger);}

.empty-state{text-align:center;padding:40px 20px;color:#9aa7b4;}
.empty-state .big{font-size:34px;display:block;margin-bottom:10px;opacity:.5;}
.empty-state p{margin:0;font-size:14px;line-height:1.5;}

/* ---------- bottom sheet ---------- */
.scrim{
  position:fixed;inset:0;background:rgba(13,27,42,.45);z-index:60;
  display:flex;align-items:flex-end;
}
.scrim[hidden]{display:none;}
.scrim.full{align-items:stretch;}
.sheet{
  width:100%;max-width:100%;background:var(--paper-bg);border-radius:22px 22px 0 0;
  padding:8px 18px calc(20px + var(--safe-b));
  max-height:92vh;overflow-y:auto;overflow-x:hidden;animation:up .24s ease;
}
.sheet.compact{padding-bottom:calc(20px + var(--safe-b));}
@keyframes up{from{transform:translateY(50px);opacity:.5;}to{transform:translateY(0);opacity:1;}}
.grab{width:40px;height:5px;background:#d3dae1;border-radius:5px;margin:6px auto 14px;}
.sheet h3{margin:0 0 14px;font-size:17px;}
.sheet-actions{display:flex;gap:10px;margin-top:16px;}
.sheet-err{
  color:var(--danger);font-size:13px;margin:6px 2px 0;font-weight:600;
}
.confirm-text{font-size:14px;color:var(--ink-soft);margin:0 0 4px;line-height:1.5;}

/* autocomplete */
.ac{position:relative;}
.ac-list{
  background:var(--card);border:1.5px solid var(--amber-line);border-top:0;
  border-radius:0 0 12px 12px;overflow:hidden;margin-top:-2px;
}
.ac-list .opt{
  padding:12px 13px;font-size:15px;border-top:1px solid var(--amber);
  display:flex;align-items:center;gap:8px;cursor:pointer;background:none;
  width:100%;border-left:0;border-right:0;border-bottom:0;text-align:left;font-family:inherit;
}
.ac-list .opt:first-child{border-top:0;}
.ac-list .opt .tag{
  margin-left:auto;font-size:10.5px;color:#b98a3a;background:var(--amber);
  padding:2px 7px;border-radius:10px;white-space:nowrap;
}
/* Applies to both the item-name and customer-name fields. */
.ac-open > input[type=text]{
  border-color:var(--amber-line);background:var(--amber);border-radius:12px 12px 0 0;
}

/* Customer suggestions show the address on a second line, because two
   customers can share a name and the address is what distinguishes them. */
.ac-list .opt.two{display:block;}
.ac-list .opt .cname{display:block;font-weight:600;overflow-wrap:anywhere;}
.ac-list .opt .caddr{
  display:block;font-size:12.5px;color:var(--ink-soft);
  margin-top:2px;line-height:1.35;overflow-wrap:anywhere;
}
.newpill{font-size:11.5px;color:var(--accent);font-weight:700;margin:7px 2px 0;}

/* ---------- preview overlay ---------- */
.preview-wrap{
  width:100%;display:flex;flex-direction:column;background:#5a6673;
}
.preview-bar{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:#0d1b2a;color:#fff;font-size:15px;font-weight:600;
}
.preview-bar .pbtn{
  background:rgba(255,255,255,.14);border:0;color:#fff;width:34px;height:34px;
  border-radius:10px;font-size:15px;cursor:pointer;
}
.preview-bar .spacer{flex:1;}
.preview-scroll{
  flex:1 1 auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:14px;
}
/* the A4 page keeps a 794px layout box even when visually scaled, so clip it */
#paperHost{overflow:hidden;max-width:100%;}
.preview-actions{
  flex:0 0 auto;display:flex;gap:10px;padding:12px 14px calc(14px + var(--safe-b));
  background:#0d1b2a;
}

/* preview shrinks the A4 page to fit the phone */
.preview-scroll .paper{
  transform-origin:top left;
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--tabbar-h) + var(--safe-b) + 16px);
  background:#0d1b2a;color:#fff;padding:12px 18px;border-radius:12px;
  font-size:14px;font-weight:600;z-index:90;max-width:88%;text-align:center;
  box-shadow:0 8px 24px rgba(13,27,42,.3);
}
.toast[hidden]{display:none;}
.toast.err{background:var(--danger);}

/* ============================================================
   THE PRINTABLE DOCUMENT — matches the approved PDF design.
   Rendered at 794px (A4 @ 96dpi) then captured by html2canvas.
   ============================================================ */
/* Off-screen staging for PDF capture. position:fixed keeps it out of flow so it
   never creates scrollbars, while staying fully rendered for html2canvas. */
#paperStage{
  position:fixed;left:-10000px;top:0;
  pointer-events:none;
}

.paper{
  width:794px;min-height:1123px;background:#fff;padding:48px 44px;
  font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:20px;color:#000;
  box-sizing:border-box;
  /* html2canvas clones this node, so pin the sizing here too — without it iOS
     boosts the text and the phone-generated PDF differs from the desktop one. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
.paper *{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
.paper .co-name{font-size:24px;font-weight:bold;margin:0 0 10px;}
.paper .co-meta{font-size:14px;}
.paper .rule{border:0;border-top:1px solid #999;margin:14px 0 22px;}
.paper .doctype{
  text-align:center;font-size:22px;font-weight:bold;margin:0 0 22px;
}
.paper .parties{width:100%;border-collapse:collapse;margin-bottom:14px;}
.paper .parties td{border:0;padding:0;vertical-align:top;font-size:14px;}
.paper .parties .right{text-align:right;}
.paper .parties .num{font-weight:bold;}

.paper .lines{width:100%;border-collapse:collapse;}
.paper .lines th{
  background:#007bff;color:#fff;padding:8px;border:1px solid #007bff;
  font-size:14px;text-align:center;
}
.paper .lines td{border:1px solid #ddd;padding:8px;font-size:14px;text-align:center;}
.paper .lines td.prod{text-align:center;}
.paper .lines .pname{display:block;}
.paper .lines .pdesc{
  display:block;font-size:12px;color:#555;line-height:16px;margin-top:2px;
}

.paper .summary{margin-top:22px;text-align:right;font-size:13px;}
.paper .summary p{margin:5px 0;}
.paper .summary .grand{
  background:#007bff;color:#fff;padding:6px 10px;display:inline-block;
  font-size:16px;margin-top:3px;
}
.paper .note{margin-top:18px;font-size:14px;}
.paper .note .body{white-space:pre-wrap;}
.paper .sign{margin-top:110px;text-align:right;}
.paper .sign img{height:50px;width:auto;display:inline-block;}
.paper .sign .cap{display:block;padding-right:25px;margin-top:2px;}

/* ---------- larger phones / desktop preview ---------- */
@media (min-width:620px){
  .screen{max-width:560px;margin:0 auto;}
  .tabbar{max-width:560px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line);}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}
/* ============================================================
   Login screen + the Boss-only credential tool
   ============================================================ */
.login-body{
  min-height:100%;background:var(--paper-bg);
  display:flex;align-items:flex-start;justify-content:center;
  padding:0 16px calc(28px + var(--safe-b));
}
.login-wrap{
  width:100%;max-width:380px;padding-top:12vh;
}
.login-wrap.wide{max-width:460px;padding-top:6vh;}
.login-logo{
  width:62px;height:62px;border-radius:15px;display:block;margin:0 0 18px;
}
.login-wrap h1{margin:0;font-size:23px;letter-spacing:-.3px;}
.login-wrap h2.sqlhead{margin:22px 0 8px;font-size:14px;color:var(--ink-soft);}
.login-sub{margin:5px 0 22px;font-size:13.5px;color:var(--ink-soft);line-height:1.5;}
.login-btn{width:100%;margin-top:6px;}
.login-err{
  color:var(--danger);font-size:13.5px;font-weight:600;
  margin:2px 2px 10px;line-height:1.45;
}
.login-err[hidden]{display:none;}
.login-note{
  margin:16px 2px 0;font-size:12.5px;color:#7d8b99;line-height:1.5;text-align:center;
}
.login-note a{color:var(--brand);text-decoration:none;font-weight:600;}
.sqlout{
  width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;
  line-height:1.5;background:var(--card);border:1.5px solid var(--line);
  border-radius:12px;padding:12px;color:var(--ink);resize:vertical;
}

/* ---------- Home greeting + log out ---------- */
.bar-row{display:flex;align-items:flex-start;gap:12px;}
.bar-titles{flex:1;min-width:0;}
/* Date line above the greeting: quiet, uppercase, purely orienting. */
.datestamp{
  margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;color:#93a1af;
}

/* The greeting is the heading now — the company name that used to sit here
   was hardcoded and could contradict the documents listed below it. */
.greeting{
  margin:0;font-size:22px;line-height:1.2;letter-spacing:-.4px;font-weight:700;
  display:flex;align-items:center;gap:9px;
}
.greet-ic{display:flex;align-items:center;flex:0 0 auto;}
/* Belt and braces — the SVG also carries its own width/height attributes so a
   stale stylesheet can't leave it at the 300x150 SVG default. */
.greet-ic svg{width:22px;height:22px;max-width:22px;max-height:22px;display:block;}

/* Colour tracks the time of day, so the icon carries information rather
   than just decorating the line. */
.greet-ic[data-part=morning]  {color:#f0a020;}
.greet-ic[data-part=afternoon]{color:#f08c00;}
.greet-ic[data-part=evening]  {color:#e8590c;}
.greet-ic[data-part=night]    {color:#5c7cfa;}
.logout-btn{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;
  border:1.5px solid var(--line);background:var(--card);
  font-size:16px;cursor:pointer;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;padding:0;
}
.logout-btn:active{background:#f0f3f7;}

/* ============================================================
   Inline SVG icons
   Replaces the symbol/emoji glyphs the app used to draw icons with.
   Several of those (U+23FB power, U+2302 house) simply do not exist in
   Android's system font, so they rendered as blank boxes there while
   looking fine on iOS. SVG renders identically everywhere and inherits
   the surrounding text colour.
   ============================================================ */
.ic{display:block;flex:0 0 auto}

/* buttons that pair an icon with a label */
.create-btn,.additem,.btn.primary,.btn.ghost,.newpill{
  display:flex;align-items:center;justify-content:center;gap:9px;
}
.additem{gap:7px}
.newpill{justify-content:flex-start;gap:5px}
.searchbar .ico{display:flex;align-items:center;color:#9aa7b4;opacity:1}
.tab .ic{margin-bottom:1px}
.miniact .ic,.logout-btn .ic,.pbtn .ic{margin:0}
.item .x{display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;margin-left:2px}
.empty-state .big{display:flex;justify-content:center;color:#c2ccd6;margin-bottom:12px}
.empty-state .big .ic{display:block}