/* DCM Invoicing — Royal theme.
   Extracted verbatim from DCM_Complete_System_V3.html (unchanged).
   v4 additions are at the bottom of this file.
*/

:root{--ink:#150F1A;--gold:#C9A84C;--gold-light:#E8D5A3;--gold-deep:#D4AF37;--parchment:#F5F0E8;--smoke:#666;--ash:#444;--border:rgba(201,168,76,0.25);--border-strong:rgba(201,168,76,0.55)}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--parchment);font-family:'Josefin Sans',sans-serif;color:var(--ash);min-height:100vh}

/* NAV */
.nav{background:var(--ink);padding:10px 20px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;position:sticky;top:0;z-index:100;border-bottom:2px solid var(--gold)}
#nav-tabs{display:flex;align-items:center;gap:8px;overflow-x:auto;flex-wrap:nowrap;flex-shrink:0;max-width:60vw}
#nav-tabs::-webkit-scrollbar{display:none}
.nav-brand{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:700;color:var(--gold-light);letter-spacing:.06em;margin-right:16px}
.nav-btn{background:transparent;border:1px solid var(--border-strong);color:var(--gold-light);font-family:'Josefin Sans',sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:8px 16px;cursor:pointer;transition:all .2s;white-space:nowrap;border-radius:3px}
.nav-btn:hover,.nav-btn.active{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.nav-btn.active{font-weight:600}
.nav-sep{width:1px;height:26px;background:rgba(201,168,76,0.3);margin:0 6px}
.nav-actions{margin-left:auto;display:flex;gap:6px;align-items:center}
.nav-group{display:flex;gap:4px;align-items:center}
.nav-btn.add{background:rgba(201,168,76,0.15);font-size:16px;padding:6px 14px;line-height:1;border-radius:3px}
.nav-btn.undo{background:rgba(201,168,76,0.08)}
.nav-btn.file{background:rgba(201,168,76,0.06)}
.nav-btn.export{background:var(--gold-deep);color:var(--ink);border-color:var(--gold-deep);font-weight:600}
.nav-btn.spell{background:rgba(201,168,76,0.08)}
.nav-btn.tab-del{background:transparent;border:1px solid rgba(200,60,60,0.3);color:rgba(200,60,60,0.6);font-size:12px;padding:4px 8px;line-height:1;border-radius:3px}
.nav-btn.tab-del:hover{background:rgba(200,60,60,0.9);color:#fff;border-color:rgba(200,60,60,0.9)}

/* EMPTY STATE */
.empty-state{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 60px);padding:40px 20px}
.empty-state-inner{text-align:center;max-width:420px}
.empty-brand{font-family:'Cormorant Garamond',serif;font-size:72px;font-weight:700;color:var(--ink);letter-spacing:.06em;line-height:1}
.empty-sub{font-family:'Josefin Sans',sans-serif;font-size:12px;font-weight:300;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-top:6px}
.empty-rule{width:60px;height:2px;background:var(--gold);margin:24px auto}
.empty-msg{font-family:'Josefin Sans',sans-serif;font-size:13px;color:var(--smoke);letter-spacing:.08em;margin-bottom:28px}
.empty-btn{display:block;width:100%;background:var(--ink);color:var(--gold-light);font-family:'Josefin Sans',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:14px 24px;border:2px solid var(--gold);cursor:pointer;transition:all .2s;margin-bottom:10px;border-radius:3px}
.empty-btn:hover{background:var(--gold);color:var(--ink)}
.empty-btn.secondary{background:transparent;color:var(--ash);border-color:var(--border-strong)}
.empty-btn.secondary:hover{background:rgba(201,168,76,0.1);color:var(--ink);border-color:var(--gold)}

/* SHEETS */
.pages-wrap{display:flex;justify-content:center;padding:30px 20px 60px}
.sheet{display:none}
.sheet.active{display:block}

/* EDITABLE SPANS */
[contenteditable]{outline:none;cursor:text;min-width:20px;display:inline-block}
[contenteditable]:hover{background:rgba(201,168,76,0.06);border-radius:2px}
[contenteditable]:focus{background:rgba(201,168,76,0.1);border-radius:2px}
[contenteditable]:empty::before{content:attr(data-ph);color:#bbb;font-style:italic}

/* CORNER */
.corner{position:absolute;width:18px;height:18px;z-index:20}
.corner svg{width:100%;height:100%}
.c-tl{top:20px;left:20px}.c-tr{top:20px;right:20px;transform:scaleX(-1)}.c-bl{bottom:20px;left:20px;transform:scaleY(-1)}.c-br{bottom:20px;right:20px;transform:scale(-1)}

/* ========== INVOICE ========== */
.inv-page{background:#fff;width:820px;min-height:1060px;position:relative;box-shadow:0 30px 80px rgba(21,15,26,.18),0 4px 16px rgba(21,15,26,.1);overflow:hidden;padding-bottom:30px}
.inv-page::before{content:'';position:absolute;inset:10px;border:1px solid var(--border);pointer-events:none;z-index:10}
.inv-page::after{content:'';position:absolute;inset:14px;border:1px solid rgba(201,168,76,.12);pointer-events:none;z-index:10}

.hb{background:var(--ink);padding:36px 52px 28px;position:relative;overflow:hidden}
.hb::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),var(--gold-light),var(--gold),transparent)}
.hb::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-deep),transparent)}
.orb{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(201,168,76,.08) 0%,transparent 70%);pointer-events:none}
.orb-1{width:300px;height:300px;top:-100px;right:-60px}.orb-2{width:180px;height:180px;bottom:-90px;left:60px}
.ht{display:flex;justify-content:space-between;align-items:flex-start}

.bn{font-family:'Cormorant Garamond',serif;font-size:38px;font-weight:700;color:var(--gold-light);letter-spacing:.06em;line-height:1}
.bs{font-size:9px;font-weight:300;letter-spacing:.35em;color:var(--gold);margin-top:6px;text-transform:uppercase}
.bd{width:40px;height:1px;background:var(--gold);margin:10px 0;opacity:.6}
.bc span{display:block;font-size:9.5px;font-weight:300;letter-spacing:.08em;color:rgba(232,213,163,.65)}
.bc a{color:var(--gold);text-decoration:none;font-size:9.5px;letter-spacing:.08em;display:block}

.itb{text-align:right}
.iw{font-family:'Cormorant Garamond',serif;font-size:54px;font-weight:300;letter-spacing:.18em;color:var(--gold);line-height:1}
.im{margin-top:14px;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.mr{display:flex;align-items:center;gap:12px}
.ml{font-size:8.5px;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;font-weight:600}
.mi{background:transparent;border:none;border-bottom:1px solid rgba(201,168,76,.3);color:var(--gold-light);font-family:'Josefin Sans',sans-serif;font-size:10px;letter-spacing:.08em;outline:none;width:150px;padding:2px 0}

.cs{padding:22px 52px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);background:rgba(21,15,26,.02)}
.cl{font-size:7.5px;letter-spacing:.35em;color:var(--gold);text-transform:uppercase;font-weight:600;margin-bottom:6px}
.cf{width:280px;border:none;border-bottom:1px solid var(--border-strong);background:transparent;font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--ink);letter-spacing:.05em;padding:3px 0;outline:none}
.cf::placeholder{color:#ccc;font-style:italic}

.tw{padding:0 52px;margin-top:28px}
.thead{display:grid;grid-template-columns:1fr 140px;background:var(--ink);padding:12px 18px}
.th{font-size:8.5px;letter-spacing:.35em;color:var(--gold-light);font-weight:600;text-transform:uppercase}
.th.r{text-align:right}
.tbody{border:1px solid var(--border);border-top:none}
.trow{display:grid;grid-template-columns:1fr 140px;border-bottom:1px solid rgba(201,168,76,.08);min-height:34px}
.trow:last-child{border-bottom:none}
.trow:nth-child(even){background:rgba(201,168,76,.025)}
.td{padding:6px 18px;font-size:11px;display:flex;align-items:center}
.td.r{justify-content:flex-end}
.td input{width:100%;border:none;background:transparent;font-family:'Josefin Sans',sans-serif;font-size:11px;color:var(--ash);letter-spacing:.03em;outline:none}
.td input::placeholder{color:#ccc}
.td input.amt{text-align:right;width:100px;font-family:'Cormorant Garamond',serif;font-size:13px}
.td textarea{width:100%;border:none;background:transparent;font-family:'Josefin Sans',sans-serif;font-size:11px;color:var(--ash);letter-spacing:.03em;outline:none;resize:none;overflow:hidden;line-height:1.5;min-height:20px;padding:0;margin:0}
.td textarea::placeholder{color:#ccc}

.ts{padding:0 52px;display:flex;justify-content:flex-end}
.tb{width:340px;margin-top:4px}
.tr_{display:flex;justify-content:space-between;align-items:center;padding:8px 18px;border-bottom:1px solid var(--border)}
.tl{font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:600;white-space:nowrap}
.tv{font-family:'Cormorant Garamond',serif;font-size:12px;color:var(--ash);min-width:80px;text-align:right}
.tv input{width:140px;text-align:right;border:none;background:transparent;font-family:'Cormorant Garamond',serif;font-size:12px;color:var(--ash);outline:none}
.tt{background:var(--ink);padding:12px 18px;display:flex;justify-content:space-between;align-items:center}
.tt .tl{color:var(--gold-light);font-size:9px;letter-spacing:.3em}
.tt .tv{color:var(--gold-deep);font-size:18px;font-weight:600}

.ft{padding:28px 52px 40px;display:flex;justify-content:space-between;align-items:flex-end;margin-top:20px}
.fn p{font-size:9.5px;color:var(--smoke);line-height:1.7;letter-spacing:.04em}
.fty{font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--gold);letter-spacing:.22em;font-style:italic}

/* ========== EWF ========== */
.ewf-page{background:#fff;width:980px;position:relative;box-shadow:0 30px 80px rgba(21,15,26,.18),0 4px 16px rgba(21,15,26,.1);overflow:hidden;padding-bottom:30px}
.ewf-page::before{content:'';position:absolute;inset:10px;border:1px solid rgba(201,168,76,.22);pointer-events:none;z-index:10}
.ewf-page::after{content:'';position:absolute;inset:14px;border:1px solid rgba(201,168,76,.1);pointer-events:none;z-index:10}

.eh{background:var(--ink);padding:30px 52px 26px;position:relative;overflow:hidden}
.eh::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),var(--gold-light),var(--gold),transparent)}
.eh::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-deep),transparent)}
.ebn{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:700;color:var(--gold-light);letter-spacing:.06em;line-height:1}
.etr{text-align:right}
.ew{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;letter-spacing:.48em;color:var(--gold);text-transform:uppercase;margin-top:2px}
.bdr{width:40px;height:1px;background:var(--gold);margin:12px 0 12px auto;opacity:.6}
.ewm{font-family:'Cormorant Garamond',serif;font-size:48px;font-weight:300;letter-spacing:.18em;color:var(--gold-light);line-height:1.05}
.elic{font-size:12px;font-style:italic;letter-spacing:.22em;color:rgba(201,168,76,.65);margin-top:10px}

.js{padding:18px 52px;background:rgba(21,15,26,.03);border-bottom:none}
.jr{display:flex;gap:28px;align-items:flex-end;margin-bottom:12px}.jr:last-child{margin-bottom:0}
.fg{display:flex;flex-direction:column;gap:4px}.fg.g{flex:1}.fg.s{width:120px}.fg.m{width:200px}
.fl{font-size:7.5px;letter-spacing:.32em;color:var(--gold);text-transform:uppercase;font-weight:600}
.fi{border:none;border-bottom:1px solid var(--border-strong);background:transparent;font-family:'Josefin Sans',sans-serif;font-size:11px;color:var(--ash);letter-spacing:.04em;padding:3px 0;outline:none;width:100%}

/* Material + Scope aligned grid */
.bg{padding:0 52px;margin-top:24px}
.st{font-size:8px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.st::after{content:'\25BC';flex:none;font-size:7px;opacity:0.5}
.badge{font-size:7px;letter-spacing:.2em;color:rgba(136,136,136,.7);background:rgba(201,168,76,.06);border:1px solid var(--border);padding:2px 7px;border-radius:2px;margin-left:auto}

/* Combined material+scope table */
.combo-table{width:100%;border-collapse:collapse}
.combo-table thead tr{background:var(--ink)}
.combo-table thead th{font-size:7.5px;letter-spacing:.25em;color:var(--gold-light);text-transform:uppercase;font-weight:600;padding:9px 8px;text-align:left;font-family:'Josefin Sans',sans-serif}
.combo-table thead th.r{text-align:right}
.combo-table thead th.scope-th{border-left:2px solid var(--gold-deep)}
.combo-table tbody tr{border-bottom:1px solid rgba(201,168,76,.07)}
.combo-table tbody tr:nth-child(even){background:rgba(201,168,76,.02)}
.combo-table tbody td{padding:5px 8px;font-size:10px;vertical-align:top}
.combo-table tbody td.r{text-align:right}
.combo-table tbody td.scope-td{border-left:2px solid rgba(201,168,76,.15);padding-left:12px}
.combo-table tbody td input{width:100%;border:none;background:transparent;font-family:'Josefin Sans',sans-serif;font-size:10px;color:var(--ash);outline:none}
.combo-table tbody td input::placeholder{color:#ddd}
.combo-table tbody td input.r{text-align:right}
.combo-table tbody td textarea{width:100%;border:none;background:transparent;font-family:'Josefin Sans',sans-serif;font-size:10px;color:var(--ash);outline:none;resize:none;overflow:hidden;line-height:1.5;min-height:20px}
.combo-table tbody td textarea::placeholder{color:#ddd}

.mtr{display:flex;justify-content:space-between;align-items:center;padding:8px;border-top:1px solid var(--border);margin-top:2px}
.mtl{font-size:7.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:600}
.mtv{font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--gold-deep);font-weight:600}
.mtv input{width:160px;text-align:right;border:none;background:transparent;font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--gold-deep);font-weight:600;outline:none}

/* Lower grid: equip + labor */
.lg{display:grid;grid-template-columns:1fr 1fr;padding:0 52px;margin-top:24px}
.se{padding-right:20px;border-right:1px solid var(--border)}
.sl{padding-left:20px}

.mtable{width:100%;border-collapse:collapse}
.mtable thead tr{background:var(--ink)}
.mtable thead th{font-size:7.5px;letter-spacing:.25em;color:var(--gold-light);text-transform:uppercase;font-weight:600;padding:9px 8px;text-align:left;font-family:'Josefin Sans',sans-serif}
.mtable thead th.r{text-align:right}
.mtable tbody tr{border-bottom:1px solid rgba(201,168,76,.07)}
.mtable tbody tr:nth-child(even){background:rgba(201,168,76,.02)}
.mtable tbody td{padding:6px 8px;font-size:10px}
.mtable tbody td input{width:100%;border:none;background:transparent;font-family:'Josefin Sans',sans-serif;font-size:10px;color:var(--ash);outline:none}
.mtable tbody td input::placeholder{color:#ddd}
.mtable tbody td input.r{text-align:right}

/* Summary */
.ss{padding:20px 52px 40px;display:flex;justify-content:flex-end;margin-top:24px}
.sb{width:340px}
.stitle{font-size:8px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.stitle::before{content:'';flex:none}
.sr{display:flex;justify-content:space-between;align-items:center;padding:9px 16px;border-bottom:1px solid rgba(201,168,76,.08)}
.srl{font-size:9px;letter-spacing:.06em;color:var(--ash)}
.srv{font-family:'Cormorant Garamond',serif;font-size:13px;color:var(--gold-deep)}
.srv input{width:140px;text-align:right;border:none;background:transparent;font-family:'Cormorant Garamond',serif;font-size:13px;color:var(--gold-deep);outline:none}
.sr.sub{background:rgba(21,15,26,.04);border-bottom:1px solid var(--border)}
.sr.sub .srl{color:var(--gold);font-weight:600;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase}
.sr.oh .srl{color:var(--smoke);font-size:8.5px}
.sr.oh input.oh-pct{width:40px;text-align:right;border:none;border-bottom:1px solid var(--border);background:transparent;font-family:'Josefin Sans',sans-serif;font-size:8.5px;color:var(--smoke);outline:none}
.stot{background:var(--ink);padding:14px 16px;display:flex;justify-content:space-between;align-items:center}
.stot-l{font-size:8.5px;letter-spacing:.35em;text-transform:uppercase;color:var(--gold-light);font-weight:600}
.stot-v{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--gold-deep);font-weight:600}
.stot-v input{width:200px;text-align:right;border:none;background:transparent;font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--gold-deep);font-weight:600;outline:none}

/* v7 layout: Labor + Cost Summary grid (replaces the old Equipment +
   Labor grid + full-width Cost Summary). Cost Summary is now nested
   inside the right grid column via .sl.ss-inline > .sb. */
.lg.lg-labor-cost { grid-template-columns: 1fr 1fr; }
.lg.lg-labor-cost .se { padding-right: 18px; }
.lg.lg-labor-cost .sl.ss-inline { padding-left: 18px; }
.lg.lg-labor-cost .sl.ss-inline .sb { width: 100%; }
.lg.lg-labor-cost .sl.ss-inline .stitle { margin-bottom: 8px; }

/* Sheet nav */
.shn{display:flex;justify-content:center;gap:12px;margin-top:20px;padding-bottom:20px}
.shn button{background:var(--ink);color:var(--gold-light);border:1px solid var(--gold);font-family:'Josefin Sans',sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:10px 24px;cursor:pointer;transition:all .2s}
.shn button:hover{background:var(--gold);color:var(--ink)}
.shn button:disabled{opacity:.3;cursor:default}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--gold-light);padding:14px 32px;font-size:12px;letter-spacing:.1em;border:1px solid var(--gold);border-left:3px solid var(--gold);border-radius:4px;z-index:999;opacity:0;transition:opacity .3s;pointer-events:none}
.toast.show{opacity:1}
.toast.success{background:#1a4d2e;color:var(--gold-light);border-color:#2d7a4a;border-left:3px solid #2d7a4a}
.toast.error{background:#4d1a1a;color:var(--gold-light);border-color:#7a2d2d;border-left:3px solid #7a2d2d}

/* ============================================================
   PDF / PRINT MODE — applied two ways:
   (1) @media print         — triggered automatically by Ctrl+P
                              and by Electron's printToPDF
   (2) body.pdf-mode class  — toggled from electron/pdf.js so we
                              can MEASURE the printed layout
                              before calling printToPDF, and so
                              the scale calculation is accurate.

   Both paths deliver the same look: bigger fonts for older readers,
   darker colors so black-&-white prints stay legible, and the
   screen-only chrome (nav bar, toast, modals) hidden.
   ============================================================ */
@media print {
  .nav, .shn, .toast, .empty-state,
  #open-jobs-modal, #open-jobs-overlay,
  #spell-modal, #spell-overlay { display: none !important; }
  html, body { background: #fff !important; padding: 0 !important; margin: 0 !important; }
  /* Keep flex centering so the sheet is horizontally centered on the
     printed page, not left-aligned. Also force the sheet itself to
     have auto margins so it centers inside its parent. */
  .pages-wrap { padding: 0 !important; display: flex !important; justify-content: center !important; }
  .sheet { display: none !important; }
  .sheet.active { display: block !important; }
  .inv-page, .ewf-page { box-shadow: none !important; margin: 0 auto !important; }
  input::placeholder, textarea::placeholder { color: transparent !important; }
  [contenteditable]:empty::before { content: '' !important; }
}

/* Matching layout rules for the class-based path used by pdf.js. */
body.pdf-mode .nav,
body.pdf-mode .shn,
body.pdf-mode .toast,
body.pdf-mode .empty-state,
body.pdf-mode #open-jobs-modal,
body.pdf-mode #open-jobs-overlay,
body.pdf-mode #spell-modal,
body.pdf-mode #spell-overlay { display: none !important; }
body.pdf-mode, body.pdf-mode html {
  background: #fff !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.pdf-mode .pages-wrap {
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
}
body.pdf-mode .sheet { display: none !important; }
body.pdf-mode .sheet.active { display: block !important; }
body.pdf-mode .inv-page,
body.pdf-mode .ewf-page { box-shadow: none !important; margin: 0 auto !important; }
body.pdf-mode input::placeholder,
body.pdf-mode textarea::placeholder { color: transparent !important; }
body.pdf-mode [contenteditable]:empty::before { content: '' !important; }

/* =============================================================
   Readability boost: both @media print AND body.pdf-mode apply
   the same enlarged / darkened styles. Duplicated intentionally
   so the layout measured by pdf.js matches what printToPDF prints.
   ============================================================= */
@media print {
  .inv-page .td { padding: 9px 20px !important; font-size: 14px !important; }
  .inv-page .td input, .inv-page .td textarea { font-size: 14px !important; font-weight: 600 !important; color: #111 !important; }
  .inv-page .td textarea { overflow: visible !important; white-space: normal !important; }
  .inv-page .td input.amt { font-size: 15px !important; font-weight: 700 !important; color: #111 !important; }
  .inv-page .trow { min-height: 38px !important; }
  .inv-page .th { font-size: 11px !important; letter-spacing: .22em !important; }
  .inv-page .cl { font-size: 10px !important; color: #222 !important; font-weight: 800 !important; }
  .inv-page .cf { font-size: 20px !important; font-weight: 600 !important; color: #000 !important; }
  .inv-page .ml { font-size: 11px !important; color: #e8d5a3 !important; font-weight: 700 !important; }
  .inv-page .mi { font-size: 13px !important; font-weight: 600 !important; color: #fff !important; }
  .inv-page .tl { font-size: 11px !important; color: #222 !important; font-weight: 700 !important; }
  .inv-page .tv, .inv-page .tv input { font-size: 15px !important; font-weight: 700 !important; color: #000 !important; }
  .inv-page .tt .tl { font-size: 12px !important; color: #f5e6b8 !important; }
  .inv-page .tt .tv { font-size: 24px !important; font-weight: 800 !important; color: #f5e6b8 !important; }
  .inv-page .fn p { font-size: 12px !important; color: #333 !important; font-weight: 500 !important; line-height: 1.65 !important; }
  .inv-page .fty { font-size: 16px !important; color: #444 !important; font-weight: 600 !important; }
  .ewf-page .fl { font-size: 12px !important; color: #222 !important; font-weight: 800 !important; }
  .ewf-page .fi { font-size: 18px !important; font-weight: 600 !important; color: #000 !important; padding: 6px 0 !important; }
  .ewf-page .st { font-size: 14px !important; color: #222 !important; font-weight: 800 !important; }
  .ewf-page .badge { font-size: 11px !important; color: #555 !important; }
  .ewf-page .combo-table thead th { font-size: 12px !important; letter-spacing: .18em !important; padding: 14px 10px !important; }
  .ewf-page .combo-table tbody td { padding: 11px 10px !important; font-size: 16px !important; }
  .ewf-page .combo-table tbody td input { font-size: 16px !important; font-weight: 600 !important; color: #000 !important; }
  .ewf-page .combo-table tbody td input.r { font-weight: 700 !important; }
  .ewf-page .combo-table tbody td textarea { font-size: 16px !important; font-weight: 600 !important; color: #000 !important; line-height: 1.55 !important; min-height: 32px !important; }
  .ewf-page .mtl { font-size: 13px !important; color: #222 !important; font-weight: 800 !important; }
  .ewf-page .mtv, .ewf-page .mtv input { font-size: 22px !important; font-weight: 800 !important; color: #000 !important; }
  .ewf-page .mtable thead th { font-size: 12px !important; letter-spacing: .18em !important; padding: 14px 10px !important; }
  .ewf-page .mtable tbody td { padding: 11px 10px !important; font-size: 16px !important; }
  .ewf-page .mtable tbody td input { font-size: 16px !important; font-weight: 600 !important; color: #000 !important; }
  .ewf-page .mtable tbody td input.r { font-weight: 700 !important; }
  .ewf-page .stitle { font-size: 14px !important; color: #222 !important; font-weight: 800 !important; }
  .ewf-page .sr { padding: 14px 18px !important; }
  .ewf-page .srl { font-size: 16px !important; color: #222 !important; font-weight: 600 !important; }
  .ewf-page .srv, .ewf-page .srv input { font-size: 20px !important; font-weight: 700 !important; color: #000 !important; }
  .ewf-page .sr.sub .srl { font-size: 14px !important; color: #222 !important; font-weight: 800 !important; }
  .ewf-page .sr.oh .srl { font-size: 14px !important; color: #333 !important; }
  .ewf-page .sr.oh input.oh-pct { font-size: 15px !important; font-weight: 700 !important; color: #222 !important; }
  .ewf-page .stot { padding: 20px 22px !important; }
  .ewf-page .stot-l { font-size: 15px !important; color: #f5e6b8 !important; font-weight: 800 !important; }
  .ewf-page .stot-v, .ewf-page .stot-v input { font-size: 38px !important; font-weight: 800 !important; color: #f5e6b8 !important; }
  .inv-page .bs, .ewf-page .bs, .inv-page .iw, .ewf-page .ew, .ewf-page .ewm { color: #f5e6b8 !important; }
  .inv-page .bc span, .ewf-page .bc span, .inv-page .bc a, .ewf-page .bc a { color: #e8d5a3 !important; font-size: 13px !important; }
}

/* Same readability boost under the class-based selector. */
body.pdf-mode .inv-page .td { padding: 9px 20px !important; font-size: 14px !important; }
body.pdf-mode .inv-page .td input, body.pdf-mode .inv-page .td textarea { font-size: 14px !important; font-weight: 600 !important; color: #111 !important; }
body.pdf-mode .inv-page .td textarea { overflow: visible !important; white-space: normal !important; }
body.pdf-mode .inv-page .td input.amt { font-size: 15px !important; font-weight: 700 !important; color: #111 !important; }
body.pdf-mode .inv-page .trow { min-height: 38px !important; }
body.pdf-mode .inv-page .th { font-size: 11px !important; letter-spacing: .22em !important; }
body.pdf-mode .inv-page .cl { font-size: 10px !important; color: #222 !important; font-weight: 800 !important; }
body.pdf-mode .inv-page .cf { font-size: 20px !important; font-weight: 600 !important; color: #000 !important; }
body.pdf-mode .inv-page .ml { font-size: 11px !important; color: #e8d5a3 !important; font-weight: 700 !important; }
body.pdf-mode .inv-page .mi { font-size: 13px !important; font-weight: 600 !important; color: #fff !important; }
body.pdf-mode .inv-page .tl { font-size: 11px !important; color: #222 !important; font-weight: 700 !important; }
body.pdf-mode .inv-page .tv,
body.pdf-mode .inv-page .tv input { font-size: 15px !important; font-weight: 700 !important; color: #000 !important; }
body.pdf-mode .inv-page .tt .tl { font-size: 12px !important; color: #f5e6b8 !important; }
body.pdf-mode .inv-page .tt .tv { font-size: 24px !important; font-weight: 800 !important; color: #f5e6b8 !important; }
body.pdf-mode .inv-page .fn p { font-size: 12px !important; color: #333 !important; font-weight: 500 !important; line-height: 1.65 !important; }
body.pdf-mode .inv-page .fty { font-size: 16px !important; color: #444 !important; font-weight: 600 !important; }
body.pdf-mode .ewf-page .fl { font-size: 12px !important; color: #222 !important; font-weight: 800 !important; }
body.pdf-mode .ewf-page .fi { font-size: 18px !important; font-weight: 600 !important; color: #000 !important; padding: 6px 0 !important; }
body.pdf-mode .ewf-page .st { font-size: 14px !important; color: #222 !important; font-weight: 800 !important; }
body.pdf-mode .ewf-page .badge { font-size: 11px !important; color: #555 !important; }
/* EWF PDF MODE (v7) — now that Equipment/Subs/Fees is gone and Cost
   Summary sits inside the Labor grid row, we have ~230px of vertical
   headroom. Spend it on bigger, more legible text. */
body.pdf-mode .ewf-page .combo-table thead th { font-size: 12px !important; letter-spacing: .18em !important; padding: 9px 10px !important; }
body.pdf-mode .ewf-page .combo-table tbody td { padding: 6px 10px !important; font-size: 17px !important; }
body.pdf-mode .ewf-page .combo-table tbody td input { font-size: 17px !important; font-weight: 600 !important; color: #000 !important; }
body.pdf-mode .ewf-page .combo-table tbody td input.r { font-weight: 700 !important; }
body.pdf-mode .ewf-page .combo-table tbody td textarea { font-size: 17px !important; font-weight: 600 !important; color: #000 !important; line-height: 1.35 !important; min-height: 23px !important; overflow: visible !important; white-space: normal !important; }
body.pdf-mode .ewf-page .combo-table tbody tr { height: auto !important; }
body.pdf-mode .ewf-page .combo-table tbody td { vertical-align: top !important; }
body.pdf-mode .ewf-page .mtl { font-size: 12px !important; color: #222 !important; font-weight: 800 !important; }
body.pdf-mode .ewf-page .mtv,
body.pdf-mode .ewf-page .mtv input { font-size: 21px !important; font-weight: 800 !important; color: #000 !important; }
body.pdf-mode .ewf-page .mtable thead th { font-size: 12px !important; letter-spacing: .18em !important; padding: 9px 10px !important; }
body.pdf-mode .ewf-page .mtable tbody td { padding: 6px 10px !important; font-size: 17px !important; }
body.pdf-mode .ewf-page .mtable tbody td input { font-size: 17px !important; font-weight: 600 !important; color: #000 !important; }
body.pdf-mode .ewf-page .mtable tbody td input.r { font-weight: 700 !important; }
body.pdf-mode .ewf-page .stitle { font-size: 13px !important; color: #222 !important; font-weight: 800 !important; margin-bottom: 8px !important; }
body.pdf-mode .ewf-page .sr { padding: 7px 18px !important; }
body.pdf-mode .ewf-page .srl { font-size: 16px !important; color: #222 !important; font-weight: 600 !important; }
body.pdf-mode .ewf-page .srv,
body.pdf-mode .ewf-page .srv input { font-size: 20px !important; font-weight: 700 !important; color: #000 !important; }
body.pdf-mode .ewf-page .sr.sub .srl { font-size: 15px !important; color: #222 !important; font-weight: 800 !important; }
body.pdf-mode .ewf-page .sr.sub .srv,
body.pdf-mode .ewf-page .sr.sub .srv input { font-size: 20px !important; }
body.pdf-mode .ewf-page .sr.oh .srl { font-size: 14px !important; color: #333 !important; }
body.pdf-mode .ewf-page .sr.oh input.oh-pct { font-size: 15px !important; font-weight: 700 !important; color: #222 !important; }
body.pdf-mode .ewf-page .stot { padding: 12px 22px !important; }
body.pdf-mode .ewf-page .stot-l { font-size: 15px !important; color: #f5e6b8 !important; font-weight: 800 !important; }
body.pdf-mode .ewf-page .stot-v,
body.pdf-mode .ewf-page .stot-v input { font-size: 38px !important; font-weight: 800 !important; color: #f5e6b8 !important; width: 280px !important; }
/* Widen all dollar-amount inputs in pdf-mode so the enlarged fonts
   (17–21 px vs on-screen 12–16 px) don't clip values like
   "$9,280.25". Originals are 80–100 px set for small on-screen fonts. */
body.pdf-mode .ewf-page .mtv input { width: 180px !important; }
body.pdf-mode .ewf-page .srv input { width: 170px !important; }
body.pdf-mode .inv-page .tv input  { width: 170px !important; }
/* Additional aggressive layout compression so the above font bumps
   still leave room for the whole EWF on a single Letter page. */
body.pdf-mode .ewf-page .eh { padding: 16px 52px 12px !important; }
body.pdf-mode .ewf-page .js { padding: 6px 52px !important; }
body.pdf-mode .ewf-page .jr { margin-bottom: 6px !important; }
body.pdf-mode .ewf-page .bg { margin-top: 6px !important; }
body.pdf-mode .ewf-page .lg { margin-top: 6px !important; }
body.pdf-mode .ewf-page .ss { padding: 6px 52px 10px !important; margin-top: 6px !important; }
body.pdf-mode .ewf-page .mtr { padding: 3px 6px !important; }
body.pdf-mode .ewf-page .ebn { font-size: 32px !important; }
body.pdf-mode .ewf-page .ewm { font-size: 46px !important; line-height: 1.05 !important; }
body.pdf-mode .ewf-page .ew { font-size: 17px !important; letter-spacing: .48em !important; }
body.pdf-mode .ewf-page .elic { font-size: 12px !important; font-style: italic !important; letter-spacing: .22em !important; margin-top: 10px !important; }
body.pdf-mode .ewf-page .bdr { width: 40px !important; height: 1px !important; background: var(--gold) !important; margin: 12px 0 12px auto !important; opacity: .7 !important; }
body.pdf-mode .ewf-page .bs { font-size: 9px !important; }
body.pdf-mode .inv-page .bs,
body.pdf-mode .ewf-page .bs,
body.pdf-mode .inv-page .iw,
body.pdf-mode .ewf-page .ew,
body.pdf-mode .ewf-page .ewm { color: #f5e6b8 !important; }
body.pdf-mode .inv-page .bc span,
body.pdf-mode .ewf-page .bc span,
body.pdf-mode .inv-page .bc a,
body.pdf-mode .ewf-page .bc a { color: #e8d5a3 !important; font-size: 13px !important; }

/* Hide empty data rows in pdf-mode so the printed sheet is as compact
   as it needs to be (set by pdf.js before calling printToPDF). */
@media print {
  .pdf-empty { display: none !important; }
  /* Tighten section margins so the EWF fits one Tabloid page even
     with the enlarged fonts. */
  .ewf-page .bg { margin-top: 14px !important; }
  .ewf-page .lg { margin-top: 14px !important; }
  .ewf-page .ss { padding: 12px 52px 20px !important; margin-top: 14px !important; }
  .ewf-page .js { padding: 14px 52px !important; }
  .ewf-page .mtr { padding: 6px !important; }
}
body.pdf-mode .pdf-empty { display: none !important; }
body.pdf-mode .ewf-page .bg { margin-top: 10px !important; }
body.pdf-mode .ewf-page .lg { margin-top: 10px !important; }
body.pdf-mode .ewf-page .ss { padding: 8px 52px 14px !important; margin-top: 10px !important; }
body.pdf-mode .ewf-page .js { padding: 10px 52px !important; }
body.pdf-mode .ewf-page .mtr { padding: 4px 8px !important; }
body.pdf-mode .ewf-page .eh { padding: 22px 52px 18px !important; }
body.pdf-mode .ewf-page .combo-table tbody td { padding: 6px 10px !important; }
body.pdf-mode .ewf-page .mtable tbody td { padding: 6px 10px !important; }
body.pdf-mode .ewf-page .sr { padding: 8px 18px !important; }
body.pdf-mode .ewf-page .stot { padding: 10px 22px !important; }
body.pdf-mode .ewf-page .combo-table thead th,
body.pdf-mode .ewf-page .mtable thead th { padding: 8px 10px !important; }

/* Matching @media print rules so browser Ctrl+P sees the same compact layout */
@media print {
  .ewf-page .bg { margin-top: 6px !important; }
  .ewf-page .lg { margin-top: 6px !important; }
  .ewf-page .ss { padding: 6px 52px 10px !important; margin-top: 6px !important; }
  .ewf-page .js { padding: 6px 52px !important; }
  .ewf-page .jr { margin-bottom: 6px !important; }
  .ewf-page .mtr { padding: 3px 6px !important; }
  .ewf-page .eh { padding: 16px 52px 12px !important; }
  .ewf-page .combo-table tbody td { padding: 3px 8px !important; font-size: 14px !important; }
  .ewf-page .combo-table tbody td input { font-size: 14px !important; }
  .ewf-page .combo-table tbody td textarea { font-size: 14px !important; line-height: 1.3 !important; min-height: 18px !important; }
  .ewf-page .mtable tbody td { padding: 3px 8px !important; font-size: 14px !important; }
  .ewf-page .mtable tbody td input { font-size: 14px !important; }
  .ewf-page .sr { padding: 4px 16px !important; }
  .ewf-page .srl { font-size: 14px !important; }
  .ewf-page .srv, .ewf-page .srv input { font-size: 17px !important; }
  .ewf-page .stot { padding: 6px 18px !important; }
  .ewf-page .stot-v, .ewf-page .stot-v input { font-size: 32px !important; }
  .ewf-page .mtv, .ewf-page .mtv input { font-size: 18px !important; }
  .ewf-page .combo-table thead th,
  .ewf-page .mtable thead th { padding: 6px 8px !important; }
  .ewf-page .ebn { font-size: 32px !important; }
  .ewf-page .ewm { font-size: 46px !important; line-height: 1.05 !important; }
  .ewf-page .ew { font-size: 17px !important; letter-spacing: .48em !important; }
  .ewf-page .elic { font-size: 12px !important; font-style: italic !important; margin-top: 10px !important; }
  .ewf-page .bdr { width: 40px !important; height: 1px !important; background: var(--gold) !important; margin: 12px 0 12px auto !important; opacity: .7 !important; }
}

/* Invoice compression so one filled-out invoice fits on a single
   Letter page at width-fit scale. Measured target: trim ~150px of
   vertical space from the pdf-mode layout. */
@media print {
  .inv-page .trow { min-height: 40px !important; }
  .inv-page .td { padding: 9px 20px !important; }
  .inv-page .hb { padding: 28px 52px 22px !important; }
  .inv-page .cs { padding: 16px 52px !important; }
  .inv-page .tw { margin-top: 20px !important; }
  .inv-page .tr_ { padding: 6px 18px !important; }
  .inv-page .tt { padding: 12px 18px !important; }
  .inv-page .ft { padding: 20px 52px 28px !important; margin-top: 14px !important; }
}
body.pdf-mode .inv-page .trow { min-height: 40px !important; }
body.pdf-mode .inv-page .td { padding: 9px 20px !important; }
body.pdf-mode .inv-page .hb { padding: 28px 52px 22px !important; }
body.pdf-mode .inv-page .cs { padding: 16px 52px !important; }
body.pdf-mode .inv-page .tw { margin-top: 20px !important; }
body.pdf-mode .inv-page .tr_ { padding: 6px 18px !important; }
body.pdf-mode .inv-page .tt { padding: 12px 18px !important; }
body.pdf-mode .inv-page .ft { padding: 20px 52px 28px !important; margin-top: 14px !important; }

/* When the printed content spans more than one page, make sure no
   individual row, header, or total block gets split across the page
   boundary — that was the 'half cut off' effect the user was seeing. */
@media print {
  .trow, .combo-table tbody tr, .mtable tbody tr, .sr,
  .hb, .eh, .stot, .tt, .mtr { page-break-inside: avoid !important; break-inside: avoid !important; }
  .inv-page, .ewf-page { page-break-inside: auto !important; break-inside: auto !important; }
}
body.pdf-mode .trow,
body.pdf-mode .combo-table tbody tr,
body.pdf-mode .mtable tbody tr,
body.pdf-mode .sr,
body.pdf-mode .hb,
body.pdf-mode .eh,
body.pdf-mode .stot,
body.pdf-mode .tt,
body.pdf-mode .mtr { page-break-inside: avoid !important; break-inside: avoid !important; }
body.pdf-mode .inv-page,
body.pdf-mode .ewf-page { page-break-inside: auto !important; break-inside: auto !important; }

/* ---- v4 additions ---- */

/* Printing mode (applied before Electron printToPDF so chrome is hidden) */
body.printing .nav,
body.printing .shn,
body.printing .toast,
body.printing #open-jobs-modal,
body.printing #spell-modal,
body.printing #spell-overlay { display:none !important; }
body.printing { background:#fff !important; padding:0 !important; }
body.printing .sheet { display:block !important; }
body.printing .sheet:not(.active) { display:none !important; }
body.printing .pages-wrap { padding:0 !important; }
body.printing .inv-page, body.printing .ewf-page { box-shadow:none !important; }

/* Open-jobs modal */
#open-jobs-modal {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  background:#fff; border:2px solid var(--gold); box-shadow:0 20px 60px rgba(0,0,0,.3);
  padding:28px; z-index:9999; min-width:480px; max-width:620px; max-height:70vh;
  overflow-y:auto; font-family:'Josefin Sans',sans-serif; border-radius:6px;
  display:none;
}
#open-jobs-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:9998; display:none;
}
#open-jobs-modal h2 {
  font-family:'Cormorant Garamond',serif; font-size:24px; color:var(--ink);
  margin-bottom:16px; letter-spacing:.05em; padding-bottom:10px;
  border-bottom:2px solid var(--gold);
}
#open-jobs-modal .job-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border-bottom:1px solid var(--border); cursor:pointer;
  border-radius:6px; margin-bottom:4px; transition:background .15s;
}
#open-jobs-modal .job-row:hover { background:rgba(201,168,76,.1); }
#open-jobs-modal .job-name { font-size:14px; color:var(--ink); font-weight:700; }
#open-jobs-modal .job-date { font-size:11px; color:rgba(102,102,102,.7); margin-top:2px; }
#open-jobs-modal .job-del {
  border:1px solid rgba(200,60,60,0.25); background:transparent; color:#c44; font-size:13px; cursor:pointer;
  padding:5px 10px; border-radius:4px; transition:all .15s;
}
#open-jobs-modal .job-del:hover { background:rgba(200,60,60,0.9); color:#fff; border-color:rgba(200,60,60,0.9); }
#open-jobs-modal .empty { color:var(--smoke); font-size:14px; font-style:italic; padding:28px; text-align:center; }
#open-jobs-modal .modal-close {
  position:absolute; top:10px; right:12px; background:none; border:1px solid var(--border);
  font-size:18px; cursor:pointer; color:var(--smoke); width:30px; height:30px;
  display:flex; align-items:center; justify-content:center; border-radius:4px; transition:all .15s;
}
#open-jobs-modal .modal-close:hover { background:var(--ink); color:var(--gold-light); border-color:var(--ink); }

/* =====================================================================
   FOCUS-VISIBLE — visible focus rings for keyboard/Voice Access users.
   Replaces the outline:none on all inputs with a subtle gold ring that
   only appears on keyboard focus (not mouse click). Does NOT affect
   layout, spacing, or any sheet structure.
   ===================================================================== */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[contenteditable]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-radius: 2px;
}
.nav-btn:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}
.empty-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
#open-jobs-modal .job-row:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

/* AutoCorrect flash indicator */
.ac-flash { animation: ac-flash-anim 800ms ease-out; }
@keyframes ac-flash-anim {
  0% { background:rgba(201,168,76,.3); }
  100% { background:transparent; }
}

/* ============================================================
   READABILITY BOOST (v5)
   Research-backed font sizing for older readers:
     - Minimum 13px for content (Health Literacy Online: 14pt/19px)
     - Medium-to-semibold weight (500-600) beats thin or ultra-bold
     - Darker color (--ink) on white for content (gold is decorative)
     - Looser line-height (1.5-1.7) reduces eye fatigue
   All overrides are scoped with higher specificity so they win
   over the original "royal theme" block above without touching it.
   ============================================================ */

/* ---- Invoice: header meta (Date / Invoice #) ---- */
.inv-page .ml { font-size: 10px; font-weight: 700; }
.inv-page .mi { font-size: 12px; font-weight: 500; color: var(--gold-light); }

/* ---- Invoice: Bill To / Description labels + fields ---- */
.inv-page .cl { font-size: 9px; letter-spacing: .3em; }
.inv-page .cf { font-size: 20px; font-weight: 500; color: var(--ink); }

/* ---- Invoice: line item table ---- */
.inv-page .thead { padding: 14px 18px; }
.inv-page .th { font-size: 10px; letter-spacing: .3em; }
.inv-page .trow { min-height: 38px; }
.inv-page .td { padding: 9px 18px; font-size: 13px; }
.inv-page .td input,
.inv-page .td textarea {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .01em;
}
.inv-page .td input.amt {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  font-family: 'Josefin Sans', sans-serif;
}

/* ---- Invoice: totals strip ---- */
.inv-page .tl { font-size: 10px; font-weight: 700; }
.inv-page .tv,
.inv-page .tv input {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.inv-page .tt { padding: 16px 18px; }
.inv-page .tt .tl { font-size: 11px; font-weight: 700; letter-spacing: .28em; }
.inv-page .tt .tv { font-family: 'Josefin Sans', sans-serif; font-size: 22px; font-weight: 700; }

/* ---- Invoice: footer (make all checks payable / thank you) ---- */
.inv-page .fn p {
  font-size: 11px;
  font-weight: 400;
  color: var(--ash);
  line-height: 1.7;
  letter-spacing: .03em;
}
.inv-page .fty { font-size: 16px; font-weight: 500; }

/* ---- EWF: job strip labels + inputs ---- */
.ewf-page .fl { font-size: 9px; letter-spacing: .28em; }
.ewf-page .fi {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  padding: 5px 0;
}

/* ---- EWF: section titles ("Material", "Labor", etc.) ---- */
.ewf-page .st { font-size: 10px; font-weight: 700; letter-spacing: .32em; }

/* ---- EWF: combo table (material + scope of work) ---- */
.ewf-page .combo-table thead th {
  font-size: 9px;
  letter-spacing: .22em;
  padding: 11px 8px;
}
.ewf-page .combo-table tbody td { padding: 8px 8px; font-size: 12px; }
.ewf-page .combo-table tbody td input {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.ewf-page .combo-table tbody td input.r {
  font-weight: 600;
}
.ewf-page .combo-table tbody td textarea {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.6;
  min-height: 22px;
}

/* ---- EWF: material totals row ---- */
.ewf-page .mtl { font-size: 9px; font-weight: 700; letter-spacing: .24em; }
.ewf-page .mtv,
.ewf-page .mtv input { font-family: 'Josefin Sans', sans-serif; font-size: 14px; font-weight: 600; }

/* ---- EWF: equipment + labor tables ---- */
.ewf-page .mtable thead th {
  font-size: 9px;
  letter-spacing: .22em;
  padding: 11px 8px;
}
.ewf-page .mtable tbody td { padding: 8px 8px; font-size: 12px; }
.ewf-page .mtable tbody td input {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.ewf-page .mtable tbody td input.r { font-weight: 600; }

/* ---- EWF: cost summary panel ---- */
.ewf-page .stitle { font-size: 10px; font-weight: 700; letter-spacing: .36em; }
.ewf-page .sr { padding: 11px 16px; }
.ewf-page .srl { font-size: 11px; font-weight: 500; color: var(--ash); }
.ewf-page .srv,
.ewf-page .srv input { font-family: 'Josefin Sans', sans-serif; font-size: 14px; font-weight: 600; }
.ewf-page .sr.sub .srl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
}
.ewf-page .sr.oh .srl { font-size: 10px; }
.ewf-page .sr.oh input.oh-pct { font-family: 'Josefin Sans', sans-serif; font-size: 11px; font-weight: 600; }
.ewf-page .sr.oh .srv { font-family: 'Josefin Sans', sans-serif; font-size: 14px; font-weight: 600; }

/* ---- EWF: Amount Due (the biggest number on the page) ---- */
.ewf-page .stot { padding: 16px 18px; }
.ewf-page .stot-l { font-size: 11px; font-weight: 700; letter-spacing: .32em; }
.ewf-page .stot-v,
.ewf-page .stot-v input { font-family: 'Josefin Sans', sans-serif; font-size: 22px; font-weight: 700; }

/* ---- "Office Only" badges — keep these small (decorative) ---- */
.ewf-page .badge { font-size: 8px; letter-spacing: .18em; }

/* =====================================================================
   TEMPLATE SKINS — Structural redesigns (T1–T5)
   Each template is a genuinely different layout, not a color swap.
   The royal color palette (ink + gold) stays consistent so clients
   instantly recognize it as a DCM document. Every template includes
   the same data fields with the same IDs/data attributes so the
   underlying save/load/calc/PDF pipeline works unchanged.
   ===================================================================== */

/* ---- Nav bar: template dropdown styling ---- */
.nav-tmpl-label { color: var(--gold-light); font-family:'Josefin Sans',sans-serif; font-size:9px; letter-spacing:.18em; text-transform:uppercase; margin-right:4px; }
.nav-tmpl { background: transparent; border: 1px solid var(--border-strong); color: var(--gold-light); font-family:'Josefin Sans',sans-serif; font-size: 10px; letter-spacing:.08em; padding: 6px 8px; cursor: pointer; outline: none; }
.nav-tmpl:hover { background: rgba(201,168,76,0.15); }
.nav-tmpl option { background: var(--ink); color: var(--gold-light); }

/* =====================================================================
   STRONGER BORDERS — MAIN TEMPLATE (print-ready)
   Makes table row dividers clearly visible when printed, both on
   screen and in PDF/print mode. Replaces the faint rgba lines.
   ===================================================================== */

/* Invoice: row dividers — all 2px to match the column divider */
.inv-page .trow { border-bottom: 2px solid rgba(21,15,26,0.18); }
.inv-page .trow:last-child { border-bottom: none; }
.inv-page .tbody { border: 2px solid rgba(21,15,26,0.2); border-top: none; }
/* Invoice: vertical line between Description and Amount */
.inv-page .th.r { border-left: 2px solid rgba(201,168,76,0.35); }
.inv-page .td.r { border-left: 2px solid rgba(21,15,26,0.18); }

/* EWF: material+scope combo table row dividers — all 2px */
.ewf-page .combo-table tbody tr { border-bottom: 2px solid rgba(21,15,26,0.15); }
.ewf-page .combo-table tbody tr:last-child { border-bottom: none; }
.ewf-page .combo-table { border: 2px solid rgba(21,15,26,0.15); }

/* EWF: labor table row dividers — all 2px */
.ewf-page .mtable tbody tr { border-bottom: 2px solid rgba(21,15,26,0.15); }
.ewf-page .mtable tbody tr:last-child { border-bottom: none; }
.ewf-page .mtable { border: 2px solid rgba(21,15,26,0.15); }

/* Invoice totals strip borders */
.inv-page .tr_ { border-bottom: 2px solid rgba(21,15,26,0.15); }

/* Even stronger borders in print / pdf-mode so B&W printers show them */
@media print {
  .inv-page .trow { border-bottom: 2px solid #999 !important; }
  .inv-page .tbody { border: 2px solid #888 !important; }
  .inv-page .th.r { border-left: 2px solid #888 !important; }
  .inv-page .td.r { border-left: 2px solid #999 !important; }
  .inv-page .tr_ { border-bottom: 2px solid #999 !important; }
  .ewf-page .combo-table tbody tr { border-bottom: 2px solid #999 !important; }
  .ewf-page .combo-table { border: 2px solid #888 !important; }
  .ewf-page .combo-table tbody td.scope-td { border-left: 2px solid #888 !important; }
  .ewf-page .mtable tbody tr { border-bottom: 2px solid #999 !important; }
  .ewf-page .mtable { border: 2px solid #888 !important; }
}
body.pdf-mode .inv-page .trow { border-bottom: 2px solid #999 !important; }
body.pdf-mode .inv-page .tbody { border: 2px solid #888 !important; }
body.pdf-mode .inv-page .th.r { border-left: 2px solid #888 !important; }
body.pdf-mode .inv-page .td.r { border-left: 2px solid #999 !important; }
body.pdf-mode .inv-page .tr_ { border-bottom: 2px solid #999 !important; }
body.pdf-mode .ewf-page .combo-table tbody tr { border-bottom: 2px solid #999 !important; }
body.pdf-mode .ewf-page .combo-table { border: 2px solid #888 !important; }
body.pdf-mode .ewf-page .combo-table tbody td.scope-td { border-left: 2px solid #888 !important; }
body.pdf-mode .ewf-page .mtable tbody tr { border-bottom: 2px solid #999 !important; }
body.pdf-mode .ewf-page .mtable { border: 2px solid #888 !important; }

/* =====================================================================
   TEMPLATE BW — "BLACK & WHITE"
   Same layout as Main, optimized for black-and-white printing.
   All gold/decorative color → pure black, dark gray, or white.
   Borders are solid black for maximum contrast on any printer.
   Dark header/total boxes stay dark with white text.
   ===================================================================== */

/* ---- Header block: pure white text on black ---- */
[data-template="bw"] .hb,
[data-template="bw"] .eh { background: #111; }
[data-template="bw"] .hb::before,
[data-template="bw"] .eh::before { background: linear-gradient(90deg, transparent, #999, #bbb, #999, transparent); }
[data-template="bw"] .hb::after,
[data-template="bw"] .eh::after { background: linear-gradient(90deg, transparent, #777, transparent); }
[data-template="bw"] .orb { display: none; }
[data-template="bw"] .bn,
[data-template="bw"] .ebn { color: #fff; }
[data-template="bw"] .bs { color: #fff; }
[data-template="bw"] .bd,
[data-template="bw"] .bdr { background: #fff; }
[data-template="bw"] .bc span,
[data-template="bw"] .bc a { color: #fff !important; }
[data-template="bw"] .iw { color: #fff; }
[data-template="bw"] .ew { color: #fff; }
[data-template="bw"] .ewm { color: #fff; }
[data-template="bw"] .elic { color: #fff; }
[data-template="bw"] .ml { color: #fff; }
[data-template="bw"] .mi { color: #fff; border-bottom-color: rgba(255,255,255,0.4); }

/* ---- Client strip / job info ---- */
[data-template="bw"] .cs { border-bottom-color: #666; }
[data-template="bw"] .cl,
[data-template="bw"] .fl { color: #000; }
[data-template="bw"] .cf,
[data-template="bw"] .fi { color: #000; border-bottom-color: #666; }
[data-template="bw"] .js { border-bottom-color: #666; background: #fff; }

/* ---- Table headers ---- */
[data-template="bw"] .thead,
[data-template="bw"] .combo-table thead tr,
[data-template="bw"] .mtable thead tr { background: #111; }
[data-template="bw"] .th,
[data-template="bw"] .combo-table thead th,
[data-template="bw"] .mtable thead th { color: #fff; }

/* ---- Invoice row borders (dark, crisp, all 2px) ---- */
[data-template="bw"] .trow { border-bottom: 2px solid #666; }
[data-template="bw"] .trow:last-child { border-bottom: none; }
[data-template="bw"] .tbody { border: 2px solid #555; border-top: none; }
[data-template="bw"] .trow:nth-child(even) { background: #fff; }
[data-template="bw"] .td input, [data-template="bw"] .td textarea { color: #000; }
[data-template="bw"] .td input.amt { color: #000; }
[data-template="bw"] .th.r { border-left: 2px solid #555; }
[data-template="bw"] .td.r { border-left: 2px solid #666; }

/* ---- EWF combo table borders (dark, crisp, all 2px) ---- */
[data-template="bw"] .combo-table { border: 2px solid #555; }
[data-template="bw"] .combo-table tbody tr { border-bottom: 2px solid #666; }
[data-template="bw"] .combo-table tbody tr:last-child { border-bottom: none; }
[data-template="bw"] .combo-table tbody tr:nth-child(even) { background: #fff; }
[data-template="bw"] .combo-table thead th.scope-th { border-left: 2px solid #555; }
[data-template="bw"] .combo-table tbody td.scope-td { border-left: 2px solid #555; }
[data-template="bw"] .combo-table tbody td input { color: #000; }
[data-template="bw"] .combo-table tbody td textarea { color: #000; }

/* ---- EWF labor table borders (dark, crisp, all 2px) ---- */
[data-template="bw"] .mtable { border: 2px solid #555; }
[data-template="bw"] .mtable tbody tr { border-bottom: 2px solid #666; }
[data-template="bw"] .mtable tbody tr:last-child { border-bottom: none; }
[data-template="bw"] .mtable tbody tr:nth-child(even) { background: #fff; }
[data-template="bw"] .mtable tbody td input { color: #000; }

/* ---- Section titles ---- */
[data-template="bw"] .st { color: #000; }
[data-template="bw"] .st::after { color: #000; opacity: 0.4; }
[data-template="bw"] .badge { color: #555; border-color: #666; background: #fff; }

/* ---- Material totals ---- */
[data-template="bw"] .mtr { border-top-color: #666; }
[data-template="bw"] .mtl { color: #000; }
[data-template="bw"] .mtv,
[data-template="bw"] .mtv input { color: #000; }

/* ---- Invoice totals strip ---- */
[data-template="bw"] .tr_ { border-bottom: 2px solid #666; }
[data-template="bw"] .tl { color: #000; }
[data-template="bw"] .tv,
[data-template="bw"] .tv input { color: #000; }
[data-template="bw"] .tt { background: #111; padding: 16px 18px; }
[data-template="bw"] .tt .tl { color: #fff; }
[data-template="bw"] .tt .tv { color: #fff; min-width: 120px; }

/* ---- EWF cost summary ---- */
[data-template="bw"] .stitle { color: #000; }
[data-template="bw"] .stitle::before { content: ''; }
[data-template="bw"] .sr { border-bottom: 2px solid #666; }
[data-template="bw"] .srl { color: #000; }
[data-template="bw"] .srv,
[data-template="bw"] .srv input { color: #000; }
[data-template="bw"] .sr.sub { background: #fff !important; border-bottom: 2px solid #555; }
[data-template="bw"] .sr.sub .srl { color: #000; }
[data-template="bw"] .sr.sub .srv,
[data-template="bw"] .sr.sub .srv input { color: #000 !important; }
[data-template="bw"] .sr.oh .srl { color: #000; }
[data-template="bw"] .sr.oh input.oh-pct { color: #000; border-bottom-color: #666; }
[data-template="bw"] .stot { background: #111; padding: 16px 18px; }
[data-template="bw"] .stot-l { color: #fff; }
[data-template="bw"] .stot-v,
[data-template="bw"] .stot-v input { color: #fff; width: 220px; }

/* ---- Footer ---- */
[data-template="bw"] .fn p { color: #000; }
[data-template="bw"] .fty { color: #333; }

/* ---- Corners: dark gray ---- */
[data-template="bw"] .corner svg path { stroke: #666; }
[data-template="bw"] .corner svg rect { fill: #666; }

/* ---- Page borders ---- */
[data-template="bw"] .inv-page::before,
[data-template="bw"] .ewf-page::before { border-color: rgba(0,0,0,0.2); }
[data-template="bw"] .inv-page::after,
[data-template="bw"] .ewf-page::after { border-color: rgba(0,0,0,0.1); }

/* ---- EWF: total material highlight bar (inline styles need !important) ---- */
[data-template="bw"] .bg .mtr:last-child { background: #111 !important; border-top: 1px solid #111 !important; }
[data-template="bw"] .bg .mtr:last-child .mtl { color: #fff !important; }
[data-template="bw"] .bg .mtr:last-child .mtv { color: #fff !important; font-size: 16px; }

/* ---- EWF: material tax rate / sales tax rows ---- */
[data-template="bw"] .mtr .mtv input { color: #000; }

/* ---- EWF: total labor bar ---- */
[data-template="bw"] .se .mtr .mtl { color: #000; }
[data-template="bw"] .se .mtr .mtv,
[data-template="bw"] .se .mtr .mtv input { color: #000; }

/* ---- BW print / pdf-mode: max contrast ---- */
@media print {
  [data-template="bw"] .trow { border-bottom: 2px solid #555 !important; }
  [data-template="bw"] .tbody { border: 2px solid #444 !important; }
  [data-template="bw"] .th.r { border-left: 2px solid #444 !important; }
  [data-template="bw"] .td.r { border-left: 2px solid #555 !important; }
  [data-template="bw"] .tr_ { border-bottom: 2px solid #555 !important; }
  [data-template="bw"] .combo-table tbody tr { border-bottom: 2px solid #555 !important; }
  [data-template="bw"] .combo-table { border: 2px solid #444 !important; }
  [data-template="bw"] .combo-table thead th.scope-th { border-left: 2px solid #444 !important; }
  [data-template="bw"] .combo-table tbody td.scope-td { border-left: 2px solid #444 !important; }
  [data-template="bw"] .mtable tbody tr { border-bottom: 2px solid #555 !important; }
  [data-template="bw"] .mtable { border: 2px solid #444 !important; }
  [data-template="bw"] .td input, [data-template="bw"] .td textarea { color: #000 !important; }
  [data-template="bw"] .td textarea { overflow: visible !important; white-space: normal !important; }
  [data-template="bw"] .td input.amt { color: #000 !important; font-weight: 700 !important; }
  [data-template="bw"] .combo-table tbody td input { color: #000 !important; }
  [data-template="bw"] .combo-table tbody td textarea { color: #000 !important; }
  [data-template="bw"] .mtable tbody td input { color: #000 !important; }
  [data-template="bw"] .tt { background: #111 !important; }
  [data-template="bw"] .tt .tl,
  [data-template="bw"] .tt .tv { color: #fff !important; }
  [data-template="bw"] .stot { background: #111 !important; }
  [data-template="bw"] .stot-l,
  [data-template="bw"] .stot-v,
  [data-template="bw"] .stot-v input { color: #fff !important; }
  [data-template="bw"] .sr.sub .srv,
  [data-template="bw"] .sr.sub .srv input { color: #000 !important; }
  [data-template="bw"] .hb,
  [data-template="bw"] .eh { background: #111 !important; }
  [data-template="bw"] .bn,
  [data-template="bw"] .ebn { color: #fff !important; }
  [data-template="bw"] .bs { color: #fff !important; }
  [data-template="bw"] .iw,
  [data-template="bw"] .ew,
  [data-template="bw"] .ewm { color: #fff !important; }
  [data-template="bw"] .ml { color: #fff !important; }
  [data-template="bw"] .mi { color: #fff !important; }
  [data-template="bw"] .bc span,
  [data-template="bw"] .bc a { color: #fff !important; }
  [data-template="bw"] .elic { color: #fff !important; }
  [data-template="bw"] .thead { background: #111 !important; }
  [data-template="bw"] .th { color: #fff !important; }
  [data-template="bw"] .combo-table thead tr { background: #111 !important; }
  [data-template="bw"] .combo-table thead th { color: #fff !important; }
  [data-template="bw"] .mtable thead tr { background: #111 !important; }
  [data-template="bw"] .mtable thead th { color: #fff !important; }
  [data-template="bw"] .bg .mtr:last-child { background: #111 !important; }
  [data-template="bw"] .bg .mtr:last-child .mtl { color: #fff !important; }
  [data-template="bw"] .bg .mtr:last-child .mtv { color: #fff !important; }
}

body.pdf-mode [data-template="bw"] .trow { border-bottom: 2px solid #555 !important; }
body.pdf-mode [data-template="bw"] .tbody { border: 2px solid #444 !important; }
body.pdf-mode [data-template="bw"] .th.r { border-left: 2px solid #444 !important; }
body.pdf-mode [data-template="bw"] .td.r { border-left: 2px solid #555 !important; }
body.pdf-mode [data-template="bw"] .tr_ { border-bottom: 2px solid #555 !important; }
body.pdf-mode [data-template="bw"] .combo-table tbody tr { border-bottom: 2px solid #555 !important; }
body.pdf-mode [data-template="bw"] .combo-table { border: 2px solid #444 !important; }
body.pdf-mode [data-template="bw"] .combo-table thead th.scope-th { border-left: 2px solid #444 !important; }
body.pdf-mode [data-template="bw"] .combo-table tbody td.scope-td { border-left: 2px solid #444 !important; }
body.pdf-mode [data-template="bw"] .mtable tbody tr { border-bottom: 2px solid #555 !important; }
body.pdf-mode [data-template="bw"] .mtable { border: 2px solid #444 !important; }
body.pdf-mode [data-template="bw"] .td input, body.pdf-mode [data-template="bw"] .td textarea { color: #000 !important; }
body.pdf-mode [data-template="bw"] .td textarea { overflow: visible !important; white-space: normal !important; }
body.pdf-mode [data-template="bw"] .td input.amt { color: #000 !important; font-weight: 700 !important; }
body.pdf-mode [data-template="bw"] .combo-table tbody td input { color: #000 !important; }
body.pdf-mode [data-template="bw"] .combo-table tbody td textarea { color: #000 !important; }
body.pdf-mode [data-template="bw"] .mtable tbody td input { color: #000 !important; }
body.pdf-mode [data-template="bw"] .tt { background: #111 !important; }
body.pdf-mode [data-template="bw"] .tt .tl,
body.pdf-mode [data-template="bw"] .tt .tv { color: #fff !important; }
body.pdf-mode [data-template="bw"] .stot { background: #111 !important; }
body.pdf-mode [data-template="bw"] .stot-l,
body.pdf-mode [data-template="bw"] .stot-v,
body.pdf-mode [data-template="bw"] .stot-v input { color: #fff !important; }
body.pdf-mode [data-template="bw"] .sr.sub .srv,
body.pdf-mode [data-template="bw"] .sr.sub .srv input { color: #000 !important; }
body.pdf-mode [data-template="bw"] .hb,
body.pdf-mode [data-template="bw"] .eh { background: #111 !important; }
body.pdf-mode [data-template="bw"] .bn,
body.pdf-mode [data-template="bw"] .ebn { color: #fff !important; }
body.pdf-mode [data-template="bw"] .bs { color: #fff !important; }
body.pdf-mode [data-template="bw"] .iw,
body.pdf-mode [data-template="bw"] .ew,
body.pdf-mode [data-template="bw"] .ewm { color: #fff !important; }
body.pdf-mode [data-template="bw"] .ml { color: #fff !important; }
body.pdf-mode [data-template="bw"] .mi { color: #fff !important; }
body.pdf-mode [data-template="bw"] .bc span,
body.pdf-mode [data-template="bw"] .bc a { color: #fff !important; }
body.pdf-mode [data-template="bw"] .elic { color: #fff !important; }
body.pdf-mode [data-template="bw"] .thead { background: #111 !important; }
body.pdf-mode [data-template="bw"] .th { color: #fff !important; }
body.pdf-mode [data-template="bw"] .combo-table thead tr { background: #111 !important; }
body.pdf-mode [data-template="bw"] .combo-table thead th { color: #fff !important; }
body.pdf-mode [data-template="bw"] .mtable thead tr { background: #111 !important; }
body.pdf-mode [data-template="bw"] .mtable thead th { color: #fff !important; }
body.pdf-mode [data-template="bw"] .bg .mtr:last-child { background: #111 !important; }
body.pdf-mode [data-template="bw"] .bg .mtr:last-child .mtl { color: #fff !important; }
body.pdf-mode [data-template="bw"] .bg .mtr:last-child .mtv { color: #fff !important; }

/* =====================================================================
   CLIENT ADDRESS BOOK AUTOCOMPLETE DROPDOWN
   ===================================================================== */
.client-dropdown {
  position: absolute;
  z-index: 500;
  background: #fff;
  border: 1px solid var(--gold);
  box-shadow: 0 8px 24px rgba(21,15,26,.15);
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 12px;
  min-width: 240px;
}
.client-dropdown .client-item {
  padding: 8px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(201,168,76,.12);
  color: var(--ink);
  transition: background .12s;
}
.client-dropdown .client-item:last-child { border-bottom: none; }
.client-dropdown .client-item:hover,
.client-dropdown .client-item.active { background: rgba(201,168,76,.12); }
.client-dropdown .client-item .client-item-name { font-weight: 600; }
.client-dropdown .client-item .client-item-addr { font-size: 10px; color: var(--smoke); margin-top: 2px; }
.client-dropdown .client-item.save-new {
  background: rgba(201,168,76,.06);
  color: var(--gold-deep);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .06em;
}
.client-dropdown .client-item.save-new:hover { background: rgba(201,168,76,.18); }
.client-save-btn {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--gold);
  font-size: 14px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 3px;
  font-family: 'Josefin Sans', sans-serif;
  transition: all .15s;
}
.client-save-btn:hover { background: var(--gold); color: var(--ink); }

/* =====================================================================
   JOB STATUS — Nav bar indicator + Open Jobs badges
   ===================================================================== */
.nav-status { display:flex; align-items:center; margin-left:8px; margin-right:4px; }
.nav-status-select { background:transparent; border:1px solid var(--border-strong); color:var(--gold-light); font-family:'Josefin Sans',sans-serif; font-size:9px; letter-spacing:.14em; text-transform:uppercase; padding:6px 10px; cursor:pointer; outline:none; border-radius:3px; }
.nav-status-select option { background:var(--ink); color:var(--gold-light); }
.nav-status-select.status-draft { border-color:rgba(201,168,76,0.4); color:var(--gold); }
.nav-status-select.status-sent { border-color:rgba(59,130,246,0.6); color:#60a5fa; }
.nav-status-select.status-paid { border-color:rgba(34,197,94,0.6); color:#4ade80; }

#open-jobs-modal .job-status { font-size:9px; letter-spacing:.12em; text-transform:uppercase; padding:3px 8px; border-radius:3px; font-weight:600; margin-left:8px; display:inline-block; }
#open-jobs-modal .job-status.draft { background:rgba(201,168,76,0.15); color:var(--gold); }
#open-jobs-modal .job-status.sent { background:rgba(59,130,246,0.15); color:#3b82f6; }
#open-jobs-modal .job-status.paid { background:rgba(34,197,94,0.15); color:#22c55e; }

/* =====================================================================
   SEARCH JOBS INPUT (inside Open Jobs modal)
   ===================================================================== */
#open-jobs-search { width:100%; padding:10px 14px; border:1px solid var(--border-strong); background:transparent; font-family:'Josefin Sans',sans-serif; font-size:12px; color:var(--ink); outline:none; margin-bottom:14px; border-radius:3px; }
#open-jobs-search:focus { border-color:var(--gold); }
#open-jobs-search::placeholder { color:#bbb; }

/* =====================================================================
   FEATURE 1: COMMON ITEMS LIBRARY — Modal + Buttons
   ===================================================================== */
.items-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:9998;
}
#items-modal {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  background:#fff; border:2px solid var(--gold); box-shadow:0 20px 60px rgba(0,0,0,.3);
  padding:28px; z-index:9999; min-width:520px; max-width:680px; max-height:75vh;
  overflow-y:auto; font-family:'Josefin Sans',sans-serif; border-radius:6px;
}
#items-modal h2 {
  font-family:'Cormorant Garamond',serif; font-size:24px; color:var(--ink);
  margin-bottom:16px; letter-spacing:.05em; padding-bottom:10px;
  border-bottom:2px solid var(--gold);
}
#items-modal .modal-close {
  position:absolute; top:10px; right:12px; background:none; border:1px solid var(--border);
  font-size:18px; cursor:pointer; color:var(--smoke); width:30px; height:30px;
  display:flex; align-items:center; justify-content:center; border-radius:4px; transition:all .15s;
}
#items-modal .modal-close:hover { background:var(--ink); color:var(--gold-light); border-color:var(--ink); }
.item-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; border-bottom:1px solid var(--border); transition:background .12s;
}
.item-row:hover { background:rgba(201,168,76,.06); }
.item-info { flex:1; min-width:0; }
.item-desc { font-size:13px; color:var(--ink); font-weight:500; display:block; }
.item-price { font-family:'Cormorant Garamond',serif; font-size:14px; color:var(--gold-deep); font-weight:600; margin-top:2px; display:block; }
.item-actions { display:flex; gap:6px; flex-shrink:0; margin-left:12px; }
.item-use-btn {
  background:rgba(201,168,76,0.15); border:1px solid var(--gold); color:var(--gold-deep);
  font-family:'Josefin Sans',sans-serif; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 14px; cursor:pointer; border-radius:3px; transition:all .15s; font-weight:600;
}
.item-use-btn:hover { background:var(--gold); color:var(--ink); }
.item-del-btn {
  background:transparent; border:1px solid rgba(200,60,60,0.25); color:#c44;
  font-family:'Josefin Sans',sans-serif; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 10px; cursor:pointer; border-radius:3px; transition:all .15s;
}
.item-del-btn:hover { background:rgba(200,60,60,0.9); color:#fff; border-color:rgba(200,60,60,0.9); }
.item-add-row {
  display:flex; gap:8px; align-items:center; padding:10px 0; margin-bottom:10px;
  border-bottom:1px solid var(--border);
}
.item-add-input {
  flex:1; padding:8px 10px; border:1px solid var(--border-strong); background:transparent;
  font-family:'Josefin Sans',sans-serif; font-size:12px; color:var(--ink); outline:none; border-radius:3px;
}
.item-add-input.item-add-price { max-width:100px; }
.item-add-input:focus { border-color:var(--gold); }
.item-save-btn {
  background:var(--gold-deep); color:var(--ink); border:none; padding:8px 16px;
  font-family:'Josefin Sans',sans-serif; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:700; cursor:pointer; border-radius:3px; transition:all .15s;
}
.item-save-btn:hover { background:var(--gold); }
.item-cancel-btn {
  background:transparent; border:1px solid var(--border-strong); color:var(--ash); padding:8px 14px;
  font-family:'Josefin Sans',sans-serif; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; cursor:pointer; border-radius:3px; transition:all .15s;
}
.item-cancel-btn:hover { background:rgba(201,168,76,0.1); }
.item-add-toggle {
  background:rgba(201,168,76,0.1); border:1px solid var(--gold); color:var(--gold-deep);
  font-family:'Josefin Sans',sans-serif; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; padding:8px 18px; cursor:pointer; border-radius:3px;
  margin-bottom:12px; transition:all .15s; font-weight:600;
}
.item-add-toggle:hover { background:var(--gold); color:var(--ink); }
.items-empty { color:var(--smoke); font-size:14px; font-style:italic; padding:28px; text-align:center; }
.nav-btn.items-lib-btn { background:rgba(201,168,76,0.12); }

/* Hide items modal in print / pdf mode */
@media print {
  #items-modal, .items-overlay { display:none !important; }
}
body.pdf-mode #items-modal,
body.pdf-mode .items-overlay { display:none !important; }

/* =====================================================================
   FEATURE 2: DUPLICATE GROUP — Tab button
   ===================================================================== */
.nav-btn.tab-dup {
  background:transparent; border:1px solid rgba(100,160,220,0.35); color:rgba(100,160,220,0.7);
  font-size:13px; padding:4px 8px; line-height:1; border-radius:3px;
}
.nav-btn.tab-dup:hover { background:rgba(100,160,220,0.85); color:#fff; border-color:rgba(100,160,220,0.85); }

/* =====================================================================
   FEATURE 4: ADD / REMOVE ROWS — Button styling
   ===================================================================== */
.add-row-btn {
  display:block; width:100%; background:rgba(201,168,76,0.06); border:1px dashed var(--border-strong);
  color:var(--gold); font-family:'Josefin Sans',sans-serif; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; padding:8px; cursor:pointer; transition:all .15s; text-align:center;
  margin-top:2px; border-radius:0 0 3px 3px;
}
.add-row-btn:hover { background:rgba(201,168,76,0.15); color:var(--gold-deep); border-color:var(--gold); }

/* Hide add-row buttons in print / pdf mode */
@media print {
  .add-row-btn { display:none !important; }
}
body.pdf-mode .add-row-btn { display:none !important; }

/* =====================================================================
   FEATURE 5: DRAG TO REORDER ROWS
   ===================================================================== */
.trow.dragging, tr.dragging { opacity:0.4; }
.trow.drag-over, tr.drag-over { border-top:3px solid var(--gold) !important; }
.trow[draggable="true"], tr[draggable="true"] { cursor:grab; }
.trow[draggable="true"]:active, tr[draggable="true"]:active { cursor:grabbing; }

/* =====================================================================
   PASSWORD GATE
   ===================================================================== */
.auth-gate { position:fixed; inset:0; background:var(--parchment); z-index:10000; display:flex; justify-content:center; align-items:center; }
.auth-inner { text-align:center; max-width:360px; width:100%; padding:40px 30px; }
.auth-brand { font-family:'Cormorant Garamond',serif; font-size:72px; font-weight:700; color:var(--ink); letter-spacing:.06em; line-height:1; }
.auth-sub { font-family:'Josefin Sans',sans-serif; font-size:11px; font-weight:300; letter-spacing:.4em; text-transform:uppercase; color:var(--gold); margin-top:6px; }
.auth-rule { width:60px; height:2px; background:var(--gold); margin:24px auto; }
.auth-msg { font-family:'Josefin Sans',sans-serif; font-size:12px; color:var(--smoke); letter-spacing:.08em; margin-bottom:20px; }
.auth-input { width:100%; padding:14px 18px; border:2px solid var(--border-strong); background:#fff; font-family:'Josefin Sans',sans-serif; font-size:14px; color:var(--ink); outline:none; text-align:center; letter-spacing:.1em; border-radius:3px; }
.auth-input:focus { border-color:var(--gold); }
.auth-error { font-family:'Josefin Sans',sans-serif; font-size:11px; color:#c44; margin-top:8px; min-height:18px; }
.auth-btn { display:block; width:100%; margin-top:16px; background:var(--ink); color:var(--gold-light); font-family:'Josefin Sans',sans-serif; font-size:12px; letter-spacing:.2em; text-transform:uppercase; padding:14px; border:2px solid var(--gold); cursor:pointer; transition:all .2s; border-radius:3px; }
.auth-btn:hover { background:var(--gold); color:var(--ink); }
.auth-gate.hidden { display:none; }

/* Hide auth gate in print / pdf mode */
@media print { .auth-gate { display:none !important; } }
body.pdf-mode .auth-gate { display:none !important; }