:root{color-scheme:dark;--bg:#101418;--panel:#181e24;--panel2:#222b34;--line:#35414c;--text:#eef3f7;--muted:#9babb9;--accent:#30c58d;--danger:#c54444;--shadow:0 12px 40px rgba(0,0,0,.3)}
:root[data-theme="light"]{color-scheme:light;--bg:#f4f6f8;--panel:#fff;--panel2:#edf1f4;--line:#d3dbe3;--text:#1b232b;--muted:#607181;--accent:#168b62;--danger:#bd3030;--shadow:0 12px 40px rgba(0,0,0,.14)}
@media(prefers-color-scheme:light){:root[data-theme="system"]{color-scheme:light;--bg:#f4f6f8;--panel:#fff;--panel2:#edf1f4;--line:#d3dbe3;--text:#1b232b;--muted:#607181;--accent:#168b62;--danger:#bd3030;--shadow:0 12px 40px rgba(0,0,0,.14)}}

/* ─── Reset & base ─── */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 "Segoe UI",Arial,sans-serif}
.hidden{display:none!important}
button,input,select,textarea{font:inherit}
button{height:36px;padding:0 13px;border:1px solid var(--line);border-radius:7px;background:var(--panel2);color:var(--text);cursor:pointer}
button:hover{filter:brightness(1.1)}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.danger{background:var(--danger);border-color:var(--danger);color:#fff}

/* ─── Theme toggle ─── */
.themeToggle{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.themeToggle button{width:32px;height:32px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:17px}
.themeToggle button:hover{background:var(--panel2);color:var(--text)}
.themeToggle button.active{background:var(--accent);color:#fff}
.loginTheme{display:flex;justify-content:flex-end;margin-bottom:8px}

/* ─── Login ─── */
.login{width:min(380px,calc(100% - 28px));margin:11vh auto;padding:28px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.login h1{margin:0}.login p{color:var(--muted)}
label{display:block;color:var(--muted);font-size:12px}
input,select,textarea{width:100%;margin:4px 0 12px;padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--text)}
textarea{min-height:92px;resize:vertical}
.error{color:#ff7676!important;min-height:20px}

/* ─── Header / nav ─── */
.header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:18px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.header>div:first-child{white-space:nowrap;font-size:17px}
.header small{display:block;color:var(--accent);font-size:10px}
.header nav{display:flex;gap:4px;flex:1;overflow-x:auto}
.header nav button{border:0;background:transparent;white-space:nowrap}
.header nav button.active{background:var(--panel2);color:var(--accent);font-weight:700}
.headerActions{display:flex;align-items:center;gap:8px;white-space:nowrap}
.headerActions span{color:var(--muted);font-size:12px}

/* ─── Main layout ─── */
main{padding:14px}
.onlineNotice{margin-bottom:12px;padding:8px 11px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--muted)}
.moduleTop{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px}
.moduleTop h1{margin:0}
.moduleTop span{color:var(--muted)}
.moduleActions{display:flex;gap:7px;align-items:center}
.moduleActions input#search{width:280px;margin:0;padding:7px 12px;border-radius:7px;border:1px solid var(--line);background:var(--bg);color:var(--text);font-size:13px;transition:border-color .15s,box-shadow .15s}
.moduleActions input#search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.moduleActions input#search:not(:placeholder-shown){border-color:var(--accent)}

/* ─── Table wrap ─── */
.tableWrap{overflow-y:auto;overflow-x:hidden;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
table{width:100%;border-collapse:collapse;min-width:850px}
th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{position:sticky;top:0;background:var(--panel2);color:var(--muted);cursor:pointer;white-space:nowrap;font-size:12px;font-weight:600}
tbody tr:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
td button{height:28px;padding:0 9px;font-size:12px}

/* ─── Jobs table ─── */
.jobsTable{table-layout:fixed;width:100%;min-width:0}
.jobsTable th{cursor:default;font-size:11px}
.jobsTable th,.jobsTable td{padding:5px 5px;vertical-align:middle;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jobsTable th:nth-child(1),.jobsTable td:nth-child(1){width:7.5%}
.jobsTable th:nth-child(2),.jobsTable td:nth-child(2){width:13%;white-space:normal;word-break:break-word;line-height:1.25}
.jobsTable th:nth-child(3),.jobsTable td:nth-child(3){width:7%}
.jobsTable th:nth-child(4),.jobsTable td:nth-child(4){width:6%}
.jobsTable th:nth-child(5),.jobsTable td:nth-child(5){width:8%}
.jobsTable th:nth-child(6),.jobsTable td:nth-child(6){width:9%}
.jobsTable th:nth-child(7),.jobsTable td:nth-child(7){width:7%}
.jobsTable th:nth-child(8),.jobsTable td:nth-child(8){width:9%}
.jobsTable th:nth-child(9),.jobsTable td:nth-child(9){width:8%}
.jobsTable th:nth-child(10),.jobsTable td:nth-child(10){width:12.5%}
.jobsTable th:nth-child(11),.jobsTable td:nth-child(11){width:7%}
.jobsTable th:nth-child(12),.jobsTable td:nth-child(12){width:6%}
.jobsTable th:nth-child(13),.jobsTable td:nth-child(13){width:5%;text-align:center}


/* ─── Job row colour bands ─── */
.jobRow.returned td{background:#64748b15}
.jobRow.waitingparts td{background:#f59e0b15}
.jobRow.repairing td{background:#2563eb15}
.jobRow.readyreturn td{background:#16a34a15}
.jobRow.denied td{background:#dc262615}
.jobRow.pending td{background:#8b5cf615}
.jobRow.booked td{background:#0891b215}

/* ─── Static pill badges ─── */
.pill{display:inline-flex;align-items:center;padding:3px 10px;border:1px solid var(--line);border-radius:999px;font-size:11px;font-weight:600;line-height:1;white-space:nowrap;vertical-align:middle}
.pill.fixed{background:#16a34a22;border-color:#16a34a;color:#4ade80}
.pill.nofix{background:#dc262622;border-color:#dc2626;color:#f87171}

/* ─── Select pill dropdowns — base ─── */
/* Use native appearance but override colors via filter trick doesn't work.
   Instead: appearance none + single-color solid bg + NO background-image on small sizes */
select.pill{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  display:inline-block;
  height:27px;
  padding:0 24px 0 9px;
  font-size:11px;
  font-weight:600;
  line-height:27px;
  border-radius:14px;
  border:1px solid var(--line);
  cursor:pointer;
  vertical-align:middle;
  margin:1px 0;
  /* Arrow — ONE occurrence, no-repeat, positioned right */
  background-color:var(--panel2);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%239babb9' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 7px center;
  background-size:9px 5px;
  color:var(--muted);
  /* Width: enough for longest option */
  min-width:74px;
  max-width:180px;
  width:auto;
  box-sizing:border-box;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* ─── Select pill — per-status colors ─── */
select.pill.approved,select.pill.readyreturn,select.pill.paid,select.pill.fixed,select.pill.finished{
  background-color:#166534;border-color:#15803d;color:#bbf7d0;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23bbf7d0' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:9px 5px;
}
select.pill.waitingparts{
  background-color:#78350f;border-color:#b45309;color:#fde68a;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23fde68a' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:9px 5px;
}
select.pill.repairing{
  background-color:#1e3a8a;border-color:#2563eb;color:#bfdbfe;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23bfdbfe' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:9px 5px;
}
select.pill.returned{
  background-color:#1e293b;border-color:#475569;color:#cbd5e1;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23cbd5e1' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:9px 5px;
}
select.pill.denied,select.pill.void,select.pill.nofix{
  background-color:#7f1d1d;border-color:#dc2626;color:#fecaca;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23fecaca' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:9px 5px;
}
select.pill.bookedin,select.pill.unpaid{
  background-color:#0c1a2e;border-color:#0284c7;color:#7dd3fc;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%237dd3fc' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:9px 5px;
}
select.pill.pending,select.pill.pendingapproval{
  background-color:#2e1065;border-color:#7c3aed;color:#ddd6fe;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23ddd6fe' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:9px 5px;
}
select.pill.partpaid{
  background-color:#2e1065;border-color:#7c3aed;color:#ddd6fe;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23ddd6fe' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:9px 5px;
}
select.pill.recheck{
  background-color:#292524;border-color:#78716c;color:#e7e5e4;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23e7e5e4' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:9px 5px;
}

/* ─── Doc link button (Job Card = Blue, Quote = Orange, Invoice = Red) ─── */
.doclink{display:inline-block;height:24px;line-height:24px;padding:0 9px;border-radius:999px;font-size:10.5px;font-weight:700;white-space:nowrap;cursor:pointer;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;transition:all .15s ease}
.doclink.jobcard{background:#1e3a8a22;border:1px solid #2563eb;color:#60a5fa}
.doclink.jobcard:hover{background:#2563eb;color:#fff;border-color:#2563eb}
.doclink.quote{background:#78350f22;border:1px solid #f59e0b;color:#fbbf24}
.doclink.quote:hover{background:#f59e0b;color:#fff;border-color:#f59e0b}
.doclink.invoice{background:#7f1d1d22;border:1px solid #dc2626;color:#f87171}
.doclink.invoice:hover{background:#dc2626;color:#fff;border-color:#dc2626}

/* ─── Modal (edit screen) ─── */
.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.65)}
.modalBox{width:min(920px,100%);max-height:92vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow)}
.modalTop{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--panel);border-bottom:1px solid var(--line)}
.modalTop h2{margin:0;font-size:17px}
.modalTop button{font-size:22px;width:38px;height:38px;padding:0;border:none;background:transparent;color:var(--muted);cursor:pointer}
.modalTop button:hover{color:var(--danger)}
.formGrid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:10px 16px;padding:18px}
.formGrid>label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);margin:0}
.formGrid>label input,.formGrid>label select,.formGrid>label textarea{margin:0;font-size:13px;width:100%}
.formGrid label.wide{grid-column:1/-1}
.modalActions{position:sticky;bottom:0;display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;padding:12px 18px;background:var(--panel);border-top:1px solid var(--line)}

/* ─── Dashboard cards ─── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.card{padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.card b{display:block;font-size:24px}
.card span{color:var(--muted)}
.summaryMoney{margin-top:14px}

/* ─── Checklist editor ─── */
.ckEditSection{grid-column:1/-1;margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.ckEditItems{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px}
.ckEditItem{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.ckEditItem span{font-size:12px;color:var(--text);flex:1;word-break:break-word}
.ckEditItem select{height:30px;min-width:90px;flex-shrink:0;margin:0;padding:2px 6px;font-size:12px;font-weight:700;border-radius:6px;width:auto}
.ckIssueRow{display:flex;gap:6px;margin:4px 0}
.ckIssueRow input{flex:1;margin:0;height:32px;padding:4px 8px}
.ckIssueHeader{display:flex;gap:6px;margin:0 0 4px;font-size:11px;color:var(--muted);font-weight:700}
.ckIssueHeader span{flex:1}
.ckIssueHeader span:last-child{flex:0 0 34px}

/* ─── Line items table in editor ─── */
.itemWrap{grid-column:1/-1;margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.itemWrap h3{margin:0 0 10px;color:var(--accent)}
.itemTable{width:100%;border-collapse:collapse;margin-bottom:10px}
.itemTable th,.itemTable td{padding:6px 8px;border-bottom:1px solid var(--line)}
.itemTable th{font-size:11px;color:var(--muted);text-transform:uppercase;background:none}
.itemTable textarea.li_desc{min-height:36px;margin:0;padding:6px 8px;font-size:12px;resize:vertical}
.itemTable input.li_qty,.itemTable input.li_rate,.itemTable input.li_discount{margin:0;height:32px;padding:4px 6px;font-size:12px}
.itemTable td.li_amount{font-weight:700;white-space:nowrap;vertical-align:middle}
.itemTable td.li_del{vertical-align:middle;text-align:center}
.itemTable button.rmRow{width:28px;height:28px;padding:0;font-size:14px;border-radius:6px;background:var(--danger);border-color:var(--danger);color:#fff}
.addRow{margin-top:6px;height:32px;padding:0 12px;font-size:12px;font-weight:700;background:var(--accent);border-color:var(--accent);color:#fff;border-radius:6px}

/* ─── Responsive ─── */
@media(max-width:760px){
  .header{align-items:flex-start;flex-wrap:wrap}
  .header nav{order:3;width:100%}
  .headerActions{margin-left:auto}
  main{padding:9px}
  .moduleTop{align-items:stretch;flex-direction:column}
  .moduleActions{flex-wrap:wrap}
  .moduleActions input{width:100%;order:3}
  .formGrid{grid-template-columns:1fr}
  .formGrid label.wide{grid-column:auto}
  .modal{padding:6px}
  .modalBox{max-height:98vh}
}

/* ─── Print ─── */
@media print{
  body>*{display:none!important}
  .docPrint{display:block!important;color:#111;background:#fff;padding:18mm}
  .docPrint table{min-width:0}
  .docPrint th{position:static}
  .docPrint button{display:none}
}

/* ─── Customer picker (live search + create) ─── */
.custPickerWrap{position:relative;width:100%}
.custPickerWrap .customerSearch{width:100%;margin:0;padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--text);font:inherit;font-size:13px}
.custPickerWrap .customerSearch:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent)}
.custDrop{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:100;background:var(--panel2);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);max-height:220px;overflow-y:auto}
.custDropItem{padding:9px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--line);color:var(--text);transition:background .12s}
.custDropItem:last-child{border-bottom:none}
.custDropItem:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.custDropCreate{color:var(--accent);font-weight:600;border-top:1px solid var(--line)}
.custDropCreate:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}

/* ═══ Document Modal ═══ */
.docModalOverlay{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.7);display:flex;align-items:stretch;padding:12px}
#emailModal{z-index:50}
.docModalBox{display:flex;flex-direction:column;flex:1;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;max-height:calc(100vh - 24px)}

/* Header */
.docModalHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--panel2);border-bottom:1px solid var(--line);flex-shrink:0}
.docModalTabs{display:flex;gap:4px}
.docTab{height:34px;padding:0 14px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.docTab:hover{background:var(--panel);color:var(--text)}
.docTab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.docTab.jobcard.active{background:#2563eb!important;border-color:#2563eb!important;color:#fff!important}
.docTab.quote.active{background:#d97706!important;border-color:#d97706!important;color:#fff!important}
.docTab.invoice.active{background:#dc2626!important;border-color:#dc2626!important;color:#fff!important}

/* Action toolbar */
.docModalActions{display:flex;align-items:center;gap:6px}
.docActionBtn{display:inline-flex;flex-direction:column;align-items:center;gap:2px;height:auto;padding:5px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--muted);font-size:10px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.docActionBtn svg{width:17px;height:17px}
.docActionBtn:hover{background:var(--panel2);color:var(--accent);border-color:var(--accent)}
.docActionEmail{color:var(--accent);border-color:var(--accent)}
.docActionEmail:hover{background:var(--accent);color:#fff}
.docActionSave{background:var(--accent);border-color:var(--accent);color:#fff}
.docActionSave:hover{background:var(--accent);color:#fff;filter:brightness(1.1)}
.docActionClose{width:34px;height:34px;padding:0;font-size:20px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;line-height:1}
.docActionClose:hover{background:var(--danger);border-color:var(--danger);color:#fff}
#docConvertBtn{display:none}

/* Split body */
.docModalBody{display:flex;flex:1;overflow:hidden}

/* Preview pane — now the only pane; the preview itself is the editor */
.docModalPreview{flex:1;min-width:220px;display:flex;flex-direction:column;overflow:hidden;background:#e8edf2}
.docModalPreviewFull{max-width:900px;margin:0 auto;width:100%}
.docPreviewLabel{padding:6px 12px;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;background:var(--panel2);border-bottom:1px solid var(--line)}
#docPreviewFrame{flex:1;width:100%;border:none;background:#fff}

/* ═══ Email Modal ═══ */
.emailModalBody{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.emailFieldWrap{display:flex;align-items:flex-start;gap:10px}
.emailLabel{width:58px;flex-shrink:0;padding-top:10px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.emailToBox{flex:1;min-height:42px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--bg);display:flex;flex-wrap:wrap;gap:5px;align-items:center;cursor:text}
.emailToBox:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent)}
.emailChipsWrap{display:contents}
.emailChip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 10px;background:color-mix(in srgb,var(--accent) 18%,transparent);border:1px solid var(--accent);border-radius:999px;font-size:12px;color:var(--accent);font-weight:600}
.emailChip button{background:none;border:none;color:var(--accent);cursor:pointer;font-size:14px;padding:0;line-height:1;height:auto;min-width:0}
.emailChip button:hover{color:var(--danger)}
.emailToInput{border:none;background:transparent;color:var(--text);font:inherit;font-size:13px;min-width:180px;flex:1;outline:none;height:28px;padding:2px 4px}
.emailAddBtn{flex-shrink:0;height:36px;padding:0 12px;font-size:12px;font-weight:700;background:var(--accent);border-color:var(--accent);color:#fff;border-radius:7px;cursor:pointer}
.emailInput{flex:1;margin:0;padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--text);font:inherit;font-size:13px}
.emailTextarea{flex:1;margin:0;padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--text);font:inherit;font-size:13px;resize:vertical;min-height:110px}
.emailAttachNote{padding:10px 12px;background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:7px;font-size:12px;color:var(--muted);line-height:1.5}
.emailChip.off{background:transparent;border-color:var(--line);color:var(--muted)}
.emailChip.off button{color:var(--muted)}
.emailChipsEmpty{color:var(--muted);font-size:12px;padding:4px 2px}
.emailCcNote{font-size:13px;color:var(--muted);padding-top:10px}
#emailSendBtn.sent{background:#16a34a!important;border-color:#16a34a!important;color:#fff!important}
.docEmailSentLabel{color:#16a34a;font-size:9px;font-weight:700;margin-top:1px;white-space:nowrap}

/* Responsive doc modal */
@media(max-width:800px){
  .docModalBody{flex-direction:column}
  .docActionBtn span{display:none}
  .docActionBtn{padding:6px 8px}
}

/* Override jobs table for no-scroll fixed layout */
.jobsTable{table-layout:fixed!important;width:100%!important;min-width:0!important}
.jobsTable th,.jobsTable td{padding:6px 7px;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.jobsTable td:nth-child(2){white-space:normal;word-break:break-word;line-height:1.25}

.jobsTable{table-layout:fixed!important;width:100%!important;min-width:0!important}

/* Extras chip picker */
.extrasWrap{width:100%}
.extChips{display:flex;flex-wrap:wrap;gap:6px;min-height:24px;margin-bottom:8px}
.extChip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:color-mix(in srgb,var(--accent) 15%,transparent);border:1px solid var(--accent);border-radius:999px;font-size:12px;color:var(--accent);font-weight:600;white-space:nowrap}
.extChip button{background:none;border:none;color:var(--accent);cursor:pointer;font-size:15px;padding:0;line-height:1;height:auto;min-width:0}
.extChip button:hover{color:var(--danger)}
.extAddRow{display:flex;gap:8px;align-items:center;width:100%;flex-wrap:nowrap}
.extAddRow select{flex:1;min-width:160px;margin:0!important;height:36px!important;padding:4px 10px!important;font-size:12.5px!important;border-radius:7px!important;background:var(--bg)!important;color:var(--text)!important;border:1px solid var(--line)!important}
.extAddRow input{flex:1.5;min-width:180px;margin:0!important;height:36px!important;padding:4px 10px!important;font-size:12.5px!important;border-radius:7px!important;background:var(--bg)!important;color:var(--text)!important;border:1px solid var(--line)!important}
.extAddRow button{flex-shrink:0;height:36px!important;padding:0 16px!important;font-size:12px!important;font-weight:700!important;background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;border-radius:7px!important;cursor:pointer}
@media(max-width:600px){
  .extAddRow{flex-wrap:wrap}
  .extAddRow select,.extAddRow input{width:100%;min-width:0}
}
/* Create-doc tab buttons */
.docTabCreate{background:color-mix(in srgb,var(--accent) 15%,transparent)!important;border-color:var(--accent)!important;color:var(--accent)!important}
.docTabCreate:hover{background:var(--accent)!important;color:#fff!important}

/* Line Items Editor in Doc Modal */
.docLineItemsEditWrap{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px;margin-top:4px}
.docLineItemsHeader{display:flex;gap:4px;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;margin-bottom:6px;padding:0 4px}
.docLineItemsHeader span:first-child{flex:1}
.docLineItemRow{display:flex;gap:4px;align-items:center;margin-bottom:5px}
.docLineItemRow input{margin:0!important;height:28px!important;padding:2px 6px!important;font-size:12px!important}
.docLineItemRow .de_li_desc{flex:1}
.docLiDelBtn{width:24px;height:28px;padding:0;font-size:14px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);color:var(--danger);cursor:pointer;line-height:1}
.docLiDelBtn:hover{background:var(--danger);color:#fff}
.docLiAddBtn{width:100%;height:28px;margin-top:4px;padding:0 8px;font-size:11px;font-weight:700;background:color-mix(in srgb,var(--accent) 15%,transparent);border:1px dashed var(--accent);color:var(--accent);border-radius:6px;cursor:pointer}
.docLiAddBtn:hover{background:var(--accent);color:#fff}

/* Live Print / PDF Preview in Edit Modal */
.modalBox{max-width:920px;width:95%;max-height:92vh;display:flex;flex-direction:column}
#editorForm{display:flex;flex-direction:column;overflow-y:auto;max-height:80vh;padding-right:4px}
.editorPreviewWrap{margin-top:14px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);padding:12px;display:flex;flex-direction:column;gap:8px}
.editorPreviewHeader{display:flex;align-items:center;justify-content:space-between;gap:8px}
.editorPreviewTitle{font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.4px}
.editorPreviewRefreshBtn{height:28px;padding:0 10px;font-size:11px;font-weight:600;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--text);cursor:pointer}
.editorPreviewRefreshBtn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.editorLivePreviewFrame{width:100%;height:420px;border:1px solid var(--line);border-radius:8px;background:#ffffff;margin-top:4px}