:root{
  --bg:#f5f3ef;--card:#fff;--border:#e2ddd6;--border2:#ccc8c0;
  --text:#1a1814;--muted:#7a7570;--accent:#c8410a;--accent-light:#fff0ea;
  --accent2:#2a5c3f;--warn:#b45309;--warn-light:#fef3e2;
  --red:#c0392b;--red-light:#fdf0ef;
  --shadow:none;--radius:8px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;}

/* HEADER */
.header{background:var(--text);color:#fff;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;gap:10px;}
.logo{font-size:15px;font-weight:600;letter-spacing:-.3px;white-space:nowrap;}.logo span{color:var(--accent);}
.sync-info{font-size:10px;color:#aaa;white-space:nowrap;display:flex;align-items:center;gap:5px;}
.sync-dot{width:7px;height:7px;border-radius:50%;background:#6fcf97;display:none;flex-shrink:0;}
.sync-dot.on{display:inline-block;}
.header-btns{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;}
.hbtn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;padding:6px 11px;border-radius:6px;font-size:12px;cursor:pointer;font-family:inherit;transition:background .2s;white-space:nowrap;}
.hbtn:hover{background:rgba(255,255,255,.2);}.hbtn.active{background:var(--accent);border-color:var(--accent);}

/* TABS */
.tabs{display:flex;border-bottom:2px solid var(--border);background:var(--card);padding:0 16px;overflow-x:auto;}
.tab{padding:11px 14px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;white-space:nowrap;}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.tab.tp.active{color:var(--warn);border-bottom-color:var(--warn);}
.tab:hover:not(.active){color:var(--text);}
.bcnt{background:var(--warn);color:#fff;border-radius:10px;font-size:10px;font-weight:700;padding:1px 6px;margin-left:4px;display:none;}
.bcnt.on{display:inline-block;}

/* LAYOUT */
.view{display:none;padding:16px;max-width:740px;margin:0 auto;}.view.active{display:block;}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px;}
.ct{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.ct::before{content:'';width:3px;height:11px;background:var(--accent);border-radius:2px;}

/* FORM */
.row{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.f{flex:1;min-width:130px;}.f.full{flex:100%;min-width:100%;}
label{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-bottom:4px;}
input,select,textarea{width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:7px;font-size:13.5px;font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);transition:border .2s,box-shadow .2s;outline:none;}
input:focus,select:focus,textarea:focus{border-color:var(--accent);}
textarea{resize:vertical;min-height:65px;}select{cursor:pointer;}

/* Required field indicator */
label .req{color:var(--accent);font-size:11px;margin-left:1px;}
input.invalid,select.invalid,textarea.invalid{border-color:#e05555;}
input.invalid:focus,select.invalid:focus{border-color:#e05555;}

/* CHALLAN */
.ch-wrap{display:flex;gap:7px;}
.ch-wrap input{flex:1;}
.ch-btn{background:none;border:1.5px solid var(--border2);border-radius:7px;padding:8px 10px;font-size:13px;cursor:pointer;color:var(--muted);font-family:inherit;white-space:nowrap;transition:all .2s;}
.ch-btn:hover{border-color:var(--accent);color:var(--accent);}

/* AUTOCOMPLETE */
.acw{position:relative;}
.acl{position:absolute;top:100%;left:0;right:0;background:var(--card);border:1.5px solid var(--accent);border-top:none;border-radius:0 0 7px 7px;max-height:190px;overflow-y:auto;z-index:60;display:none;}
.acl.open{display:block;}
.aci{padding:8px 11px;font-size:13px;cursor:pointer;transition:background .12s;}
.aci:hover,.aci.sel{background:var(--accent-light);color:var(--accent);}

/* OTHER/MANUAL INPUT */
.other-inp{display:none;margin-top:6px;}.other-inp.on{display:block;}

/* PORTER FIELDS */
.porter-manual{display:none;margin-top:6px;}.porter-manual.on{display:block;}

/* ITEMS */
.ih{display:grid;grid-template-columns:1fr 72px 90px 28px;gap:7px;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;padding:0 2px;}
.ir{display:grid;grid-template-columns:1fr 72px 90px 28px;gap:7px;margin-bottom:7px;align-items:start;}
.idwrap{position:relative;}
.idesc{font-size:13px;padding:8px 10px;min-height:66px;resize:vertical;border:1.5px solid var(--border);border-radius:7px;background:var(--bg);font-family:'DM Sans',sans-serif;line-height:1.5;width:100%;color:var(--text);outline:none;transition:border .2s,box-shadow .2s;}
.idesc:focus{border-color:var(--accent);}
.iqty{font-size:13px;padding:8px;}
/* unit: combo (select + free text) */
.unit-wrap{display:flex;flex-direction:column;gap:4px;}
.unit-sel{font-size:12px;padding:8px 4px;}
.unit-inp{font-size:12px;padding:6px 8px;display:none;}
.unit-inp.on{display:block;}
.iac{position:absolute;top:100%;left:0;right:0;background:var(--card);border:1.5px solid var(--accent);border-top:none;border-radius:0 0 7px 7px;max-height:150px;overflow-y:auto;z-index:55;display:none;}
.iac.open{display:block;}
.delbtn{width:28px;height:28px;background:none;border:1.5px solid var(--border);border-radius:6px;cursor:pointer;color:var(--muted);font-size:15px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;margin-top:2px;}
.delbtn:hover{border-color:#e05555;color:#e05555;background:#fff5f5;}
.add-item-btn{display:flex;align-items:center;gap:6px;background:none;border:1.5px dashed var(--border2);border-radius:7px;padding:8px 14px;font-size:13px;color:var(--muted);cursor:pointer;font-family:inherit;width:100%;transition:all .2s;margin-top:2px;}
.add-item-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);}

/* TOGGLE */
.trow{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.tog{width:38px;height:21px;background:var(--border2);border-radius:11px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0;}
.tog.on{background:var(--accent2);}
.tog::after{content:'';width:17px;height:17px;background:white;border-radius:50%;position:absolute;top:2px;left:2px;transition:left .2s;}
.tog.on::after{left:19px;}
.tlbl{font-size:13px;font-weight:500;}
.pf{display:none;}.pf.on{display:block;}

/* BUTTONS */
.btnrow{display:flex;gap:9px;flex-wrap:wrap;margin-top:8px;}
.btn{padding:10px 20px;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;border:none;transition:background .2s;display:flex;align-items:center;gap:6px;}
.btn-p{background:var(--accent);color:#fff;}.btn-p:hover{background:#b33808;}
.btn-s{background:var(--accent2);color:#fff;}.btn-s:hover{background:#1e4530;}
.btn-w{background:var(--warn);color:#fff;}.btn-w:hover{background:#9a4507;}
.btn-r{background:var(--red);color:#fff;}.btn-r:hover{background:#a93226;}
.btn-g{background:var(--card);border:1.5px solid var(--border2);color:var(--text);}.btn-g:hover{border-color:var(--text);background:#f0ede8;}
.btn-sm{padding:6px 13px;font-size:12px;}

/* COPY BOX */
.cbox{background:#1a1814;color:#e8e4de;border-radius:8px;padding:14px;font-family:'DM Mono',monospace;font-size:13px;line-height:1.7;white-space:pre-wrap;display:none;margin-top:14px;}
.cbox.on{display:block;}
.cbh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-family:'DM Sans',sans-serif;}
.cbt-lbl{font-size:11px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.8px;}
.copybtn{background:var(--accent);color:#fff;border:none;padding:4px 11px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;}
.copybtn.done{background:var(--accent2);}

/* TOAST */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(60px);background:#1a1814;color:#fff;padding:11px 18px;border-radius:8px;font-size:13px;font-weight:500;z-index:999;transition:transform .3s;pointer-events:none;max-width:90vw;text-align:center;}
.toast.on{transform:translateX(-50%) translateY(0);}
.toast.ok::before{content:'✓  ';color:#6fcf97;}.toast.err::before{content:'✗  ';color:#ff7676;}

/* RECORDS */
.rfil{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap;margin-bottom:10px;}
.rfil select,.rfil input{width:auto;min-width:130px;}
.sbtns{display:flex;gap:5px;flex-wrap:wrap;}
.sbtn{padding:5px 11px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;border:1.5px solid var(--border2);background:none;color:var(--muted);transition:all .2s;white-space:nowrap;}
.sbtn.on{background:var(--text);color:#fff;border-color:var(--text);}

/* BULK BAR */
.bulk-bar{background:var(--accent-light);border:1.5px solid var(--accent);border-radius:8px;padding:10px 14px;margin-bottom:10px;display:none;align-items:center;gap:10px;flex-wrap:wrap;}
.bulk-bar.on{display:flex;}
.bulk-info{font-size:13px;font-weight:600;color:var(--accent);}

.rtbl{width:100%;border-collapse:collapse;font-size:13px;}
.rtbl th{background:var(--text);color:#fff;padding:8px 10px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;cursor:pointer;user-select:none;}
.rtbl th:hover{background:#2d2a26;}
.rtbl th.chk-th{width:32px;cursor:default;}
.rtbl td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top;}
.rtbl tr:hover td{background:var(--bg);}
.rtbl tr.selected td{background:#fff8f5;}
.icell{font-size:12px;color:var(--muted);line-height:1.6;}.icell span{display:block;}
.badge{display:inline-block;padding:2px 7px;border-radius:4px;font-size:11px;font-weight:600;}
.bp{background:var(--warn-light);color:var(--warn);}.bn{background:var(--border);color:var(--muted);}
/* ACTION LINKS in table — see COLUMN WIDTHS section below */
.elink,.dlink,.plink{display:inline-flex;align-items:center;gap:3px;padding:4px 8px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;min-height:28px;white-space:nowrap;}
.elink{color:var(--accent);background:var(--accent-light);}
.elink:hover{background:#fde5d9;}
.dlink{color:var(--red);background:var(--red-light);margin-left:0;}
.dlink:hover{background:#fbe0de;}
.plink{color:var(--accent2);background:#eaf3ed;margin-left:0;}
.plink:hover{background:#d5ead9;}
/* BILLING BADGES */
.bs{display:inline-block;padding:4px 8px;border-radius:4px;font-size:11px;font-weight:600;margin-top:2px;line-height:1.6;}
.bs-inv{background:#e8f4fd;color:#1a6fa8;}
.bs-cash{background:#eaf3ed;color:#2a5c3f;}
.bs-nobill{background:#f5f3ef;color:#7a7570;border:1px solid #e2ddd6;}
.bs-none{background:#f5f3ef;color:#bbb;border:1px dashed #ccc;cursor:pointer;}
.bs-none:hover{border-color:var(--accent);color:var(--accent);}
/* Billing month badge */
.bm-badge{display:block;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:500;background:#f0eafb;color:#7c3aed;border:1px solid #ddd6fe;margin-top:3px;white-space:nowrap;}
/* No Dispatch badge — neutral grey, for service-type deliveries (design, layout, artwork) */
.nd-badge{display:inline-block;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600;background:#eef0f2;color:#555;border:1px solid #d5d9de;margin-top:3px;letter-spacing:.3px;}
/* unpaid invoice badge - distinct color */
.bs-inv-pending{background:#fef3c7;color:#92400e;border:1px solid #fcd34d;}

.empty{text-align:center;padding:40px 20px;color:var(--muted);}
.empty .ic{font-size:32px;margin-bottom:8px;}

/* SUMMARY */
.sumrow{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.sumbox{flex:1;min-width:100px;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px;text-align:center;}
.sumbox-warn{background:#fff8f0;border-color:#fcd5a0;}
.sumbox-porter{background:#fef9f0;border-color:#fde68a;}
.sumbox-click{cursor:pointer;}
.sumbox-click:hover{background:#f5f3ef;}
.sv{font-size:20px;font-weight:700;color:var(--accent);font-family:'DM Mono',monospace;}
.sl{font-size:11px;color:var(--muted);margin-top:2px;}

/* PENDING */
.add-pend-btn{display:flex;align-items:center;justify-content:center;gap:7px;background:none;border:2px dashed var(--border2);border-radius:var(--radius);padding:12px;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer;width:100%;font-family:inherit;transition:all .2s;margin-bottom:14px;}
.add-pend-btn:hover{border-color:var(--warn);color:var(--warn);background:var(--warn-light);}
.pcard{background:var(--card);border:1.5px solid var(--warn-light);border-radius:var(--radius);padding:14px;margin-bottom:10px;}
.pcard:hover{border-color:var(--warn);}
.ph{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:7px;}
.pc{font-size:15px;font-weight:600;}.ploc{font-size:12px;color:var(--muted);margin-top:1px;}
.pctct{font-size:12px;color:var(--accent2);margin-top:1px;font-weight:500;}
.pdate{font-size:11px;color:var(--muted);background:var(--bg);border:1px solid var(--border);padding:2px 7px;border-radius:5px;white-space:nowrap;}
.pitems{font-size:13px;margin-bottom:7px;line-height:1.7;}.pitems span{display:block;padding-left:3px;}
.pnotes{font-size:12px;color:var(--muted);background:var(--bg);border-radius:6px;padding:7px 10px;margin-bottom:8px;font-style:italic;}
.pacts{display:flex;gap:7px;flex-wrap:wrap;align-items:center;}
.delbtn2{background:var(--accent2);color:#fff;border:none;padding:7px 14px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .2s;}
.delbtn2:hover{background:#1e4530;}
.ebtn2{background:none;border:1.5px solid var(--border2);color:var(--text);padding:6px 11px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;}
.ebtn2:hover{border-color:var(--accent);color:var(--accent);}
.xbtn{background:none;border:1.5px solid var(--border);color:var(--muted);padding:6px 9px;border-radius:7px;font-size:12px;cursor:pointer;font-family:inherit;transition:all .2s;}
.xbtn:hover{border-color:#e05555;color:#e05555;background:#fff5f5;}
.no-pend{text-align:center;padding:36px 20px;color:var(--muted);}

/* SETTINGS */
.cli-list{margin-top:7px;max-height:220px;overflow-y:auto;}
.cli-item{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;border:1px solid var(--border);border-radius:7px;margin-bottom:5px;background:var(--bg);font-size:13px;}
.cli-item .rem{color:#e05555;font-size:12px;cursor:pointer;font-weight:500;}.cli-item .rem:hover{text-decoration:underline;}
.add-cli{display:flex;gap:7px;margin-top:7px;}.add-cli input{flex:1;}
.add-cli-btn{background:var(--accent);color:#fff;border:none;padding:8px 14px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;}

/* MODALS */
.mov{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:500;display:none;align-items:flex-start;justify-content:center;padding:14px;overflow-y:auto;}
.mov.open{display:flex;}
.mod{background:var(--card);border-radius:12px;padding:20px;width:100%;max-width:600px;border:1px solid var(--border);margin:auto;}
.mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.mh h2{font-size:16px;}
.mclose{width:28px;height:28px;background:var(--bg);border:1.5px solid var(--border);border-radius:6px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;color:var(--muted);}
.mclose:hover{background:#fff5f5;color:#e05555;border-color:#e05555;}
.ms{margin-bottom:14px;}
.mbtns{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap;}

/* CONFIRM MODAL */
.cov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:600;display:none;align-items:center;justify-content:center;padding:14px;}
.cov.open{display:flex;}
.cob{background:var(--card);border-radius:12px;padding:22px;width:100%;max-width:440px;border:1px solid var(--border);}
.cob h3{font-size:16px;margin-bottom:6px;}.cob p{font-size:13px;color:var(--muted);margin-bottom:12px;line-height:1.6;}

/* URL WARN */
.uwarn{background:var(--accent-light);border:1.5px solid var(--accent);border-radius:8px;padding:11px 14px;font-size:13px;color:var(--accent);margin-bottom:14px;display:none;}
.uwarn.on{display:block;}

/* COLUMN WIDTHS & SPACING */
.rtbl{table-layout:fixed;width:100%;}
.rtbl th:nth-child(1),.rtbl td:nth-child(1){width:32px;}
.rtbl th:nth-child(2),.rtbl td:nth-child(2){width:26%;padding-right:6px;}
.rtbl th:nth-child(3),.rtbl td:nth-child(3){width:13%;padding-left:16px;white-space:normal;}
.rtbl th:nth-child(4),.rtbl td:nth-child(4){width:33%;}
.rtbl th:nth-child(5),.rtbl td:nth-child(5){width:10%;}
.rtbl th:nth-child(6),.rtbl td:nth-child(6){display:none;}
.rtbl th:nth-child(7),.rtbl td:nth-child(7){width:12%;}

/* HIDE COPY BUTTON */
.act-links span[onclick*="duplicateRecord"]{display:none !important;}

/* ACT-LINKS: 2 buttons per row grid */
.act-links{display:grid !important;grid-template-columns:1fr 1fr;gap:4px;max-width:160px;margin-top:5px;}
.elink,.dlink,.plink{justify-content:center;}

/* BILLING MONTH BADGE — stays below date, no overflow */
.rtbl td:nth-child(3) .bm-badge{display:block;margin-top:3px;white-space:nowrap;}

/* UNPAID ROW HIGHLIGHT */
.rtbl tr.unpaid td{background:#fffaf5;}
.rtbl tr.unpaid td:first-child{border-left:3px solid #e8843a;}
.rtbl tr.unpaid:hover td{background:#fff4ea;}
.rtbl tr.unpaid.selected td{background:#fff4ea;}

/* PRINT */
@media print{
  body *{visibility:hidden;}
  #printArea,#printArea *{visibility:visible;}
  #printArea{position:absolute;top:0;left:0;width:100%;height:auto;}
  thead{display:table-header-group;}
  tr{page-break-inside:avoid;}
  @page{margin:1cm;}
}

@media(max-width:500px){
  .ih,.ir{grid-template-columns:1fr 62px 80px 28px;}
  .header-btns .hbtn{padding:5px 7px;font-size:11px;}
}

/* ============================================================
   MOBILE RECORDS — card layout instead of table
   ============================================================ */
@media(max-width:640px){
  /* Modal full screen on mobile — override flex layout */
  .mov.open{
    display:block;
    padding:0;
    overflow-y:auto;
  }
  .mod{
    border-radius:0;
    min-height:100vh;
    width:100%;
    max-width:100%;
    margin:0;
    padding:16px;
    box-shadow:none;
  }
  .cov{ padding:8px; }
  .cob{ width:100%; }

  /* Reset fixed table layout on mobile */
  .rtbl{ table-layout:auto; }
  .rtbl th:nth-child(2),.rtbl td:nth-child(2){ width:auto; min-width:unset; padding-right:4px; }
  .rtbl th:nth-child(3),.rtbl td:nth-child(3){ width:auto; white-space:nowrap; }
  .rtbl th:nth-child(5),.rtbl td:nth-child(5){ width:auto; }
  .rtbl th:nth-child(7),.rtbl td:nth-child(7){ width:auto; }

  /* Hide heavy table columns on mobile */
  .rtbl th:nth-child(4),  /* Items header */
  .rtbl td:nth-child(4),  /* Items col */
  .rtbl th:nth-child(5),  /* Porter header */
  .rtbl th:nth-child(6),  /* By header */
  .rtbl td:nth-child(6)   /* By col */
  { display:none; }

  /* Make porter badge smaller */
  .rtbl td:nth-child(5){ padding:6px 6px; }
  .badge{ font-size:10px; padding:2px 5px; }

  /* Action buttons — wrap cleanly in a row */
  .act-links{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
  .elink,.dlink,.plink{
    padding:6px 8px;
    font-size:12px;
    min-height:34px;
    border-radius:6px;
  }
  /* Show only icon emoji, hide text on mobile */
  .elink .btn-txt,.dlink .btn-txt,.plink .btn-txt{ display:none; }

  /* Tighter table cells — prevent mid-token breaks */
  .rtbl td{ padding:8px 6px; font-size:13px; word-break:keep-all; }
  .rtbl th{ padding:6px 6px; font-size:10px; }

  /* Client column — only break on spaces, not inside tokens like CH/26-27/016 */
  .rtbl td:nth-child(2){ max-width:150px; word-break:keep-all; overflow-wrap:anywhere; }

  /* Billing badge — keep readable, no wrap */
  .bs{ font-size:12px; white-space:nowrap; }

  /* Summary boxes — 2 per row */
  .sumbox{ min-width:calc(50% - 8px); }
  .sv{ font-size:18px; }

  /* Filter bar — stack vertically */
  .rfil{ flex-direction:column; align-items:stretch; }
  .rfil select,.rfil input{ width:100%; min-width:unset; }
  .rfil .btn{ margin-top:4px !important; }
}