*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f4f7fb;color:#152033}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;background:#0b3a66;color:white;position:sticky;top:0;z-index:10}.topbar h1{margin:0;font-size:24px}.topbar p{margin:4px 0 0;font-size:13px;opacity:.9}nav{display:flex;gap:8px;flex-wrap:wrap}.tab,button{border:0;border-radius:10px;padding:10px 14px;background:#e7edf5;color:#10253f;font-weight:700;cursor:pointer}.tab.active,.primary{background:#1e88e5;color:white}.danger{background:#e53935;color:#fff}main{padding:18px}.panel{display:none}.panel.active{display:block}.grid.two{display:grid;grid-template-columns:1fr 640px;gap:18px}.card{background:white;border-radius:16px;padding:18px;box-shadow:0 8px 28px rgba(16,37,63,.09)}h2{margin:0 0 14px}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}label{display:flex;flex-direction:column;font-size:13px;font-weight:700;gap:5px}input,select,textarea{width:100%;padding:10px;border:1px solid #cdd7e3;border-radius:9px;font-size:16px;background:white}textarea{min-height:80px}.tableWrap{overflow:auto}table{width:100%;border-collapse:collapse;margin-bottom:10px}th,td{border-bottom:1px solid #e4eaf2;padding:7px;text-align:left}td input{padding:8px}.notes{margin-top:12px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.previewCard{overflow:auto}.sheet{position:relative;width:612px;height:792px;background:white;margin:auto;border:1px solid #d8e0ea;overflow:hidden}.templateBg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.fallbackForm{position:absolute;inset:18px;border:2px solid #111;display:none}.templateBg[style*="display: none"]+.fallbackForm{display:block}.ov{position:absolute;font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#111;white-space:nowrap;line-height:1.1}.requestDate{left:424px;top:92px}.neededBy{left:424px;top:116px}.contactPerson{left:130px;top:116px}.phone{left:130px;top:139px}.jobName{left:130px;top:188px;max-width:310px;overflow:hidden}.jobAddress{left:130px;top:212px;max-width:360px;overflow:hidden}.cityStateZip{left:130px;top:236px;max-width:360px;overflow:hidden}.deliveryType{left:424px;top:139px}.vendor{left:130px;top:163px}.poNumber{left:424px;top:163px}.items{left:44px;top:304px;width:520px}.itemRow{position:relative;height:22px;font-size:10.5px}.itemQty{position:absolute;left:0;width:48px;text-align:center}.itemUnit{position:absolute;left:62px;width:58px}.itemDesc{position:absolute;left:132px;width:260px;overflow:hidden;white-space:nowrap}.itemPrice{position:absolute;left:415px;width:70px;text-align:right}.notesPreview{left:54px;top:654px;width:500px;font-size:10px;white-space:pre-wrap}.list{display:grid;gap:10px;margin-top:14px}.rowCard{border:1px solid #dce4ee;border-radius:12px;padding:12px;background:#fbfdff}.rowCard .rowActions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}.hidden{display:none!important}@media(max-width:1000px){.grid.two{grid-template-columns:1fr}.topbar{display:block}.topbar nav{margin-top:12px}.sheet{transform-origin:top left;max-width:100%;}.formgrid{grid-template-columns:1fr}}@media(max-width:680px){main{padding:10px}.sheet{width:612px;height:792px;transform:scale(.53);margin-bottom:-365px}.previewCard{min-height:455px}.card{padding:12px}.topbar{padding:14px}}

/* Corrected PDF-coordinate preview */
.previewFrame {
  width: 100%;
  height: 820px;
  border: 1px solid #d8e0ea;
  border-radius: 10px;
  background: white;
}
.hiddenPreview {
  position: absolute !important;
  left: -99999px !important;
  top: -99999px !important;
  width: 612px !important;
  height: 792px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
@media(max-width:680px){
  .previewFrame { height: 520px; }
  .previewCard { min-height: auto; }
}