<!--
╔══════════════════════════════════════════════════════════════════════════════╗
║  DirectDrive - SDMC  ·  Revision Log                                        ║
╠═══════╦════════════╦═════════════════════╦══════════════════════════════════╣
║  ID   ║  Date      ║  Area               ║  Summary                         ║
╠═══════╬════════════╬═════════════════════╬══════════════════════════════════╣
║ R011  ║ 2026-04-22 ║ Dashboard           ║ Feature: Pulsing skeleton loading ║
║       ║            ║                     ║ placeholders on dashboard while   ║
║       ║            ║                     ║ data loads from Supabase.         ║
╠═══════╬════════════╬═════════════════════╬══════════════════════════════════╣
║ R008  ║ 2026-04-19 ║ Field Reports /     ║ Fix: Field reports duplicating    ║
║       ║            ║ Data Layer          ║ on refresh - onConflict was 'id'  ║
║       ║            ║                     ║ (should be 'id,user_id'), cache   ║
║       ║            ║                     ║ not updated after save, and       ║
║       ║            ║                     ║ dbDelete race in saveFR().        ║
╠═══════╬════════════╬═════════════════════╬══════════════════════════════════╣
║ R007  ║ 2026-04-19 ║ Field Reports       ║ Feature: Cancel button on new     ║
║       ║            ║                     ║ field report form.                ║
╠═══════╬════════════╬═════════════════════╬══════════════════════════════════╣
║ R006  ║ 2026-04-19 ║ Billing             ║ Feature: Invoice form preserved   ║
║       ║            ║                     ║ when navigating to another tab.   ║
╠═══════╬════════════╬═════════════════════╬══════════════════════════════════╣
║ R005  ║ 2026-04-19 ║ Field Reports /     ║ Fix: Save/Discard buttons not     ║
║       ║            ║ Billing             ║ visible on tablet (sticky->fixed). ║
╠═══════╬════════════╬═════════════════════╬══════════════════════════════════╣
║ R004  ║ 2026-04-19 ║ Billing             ║ Feature: Save Draft and Discard   ║
║       ║            ║                     ║ Changes on invoice form.          ║
╠═══════╬════════════╬═════════════════════╬══════════════════════════════════╣
║ R003  ║ 2026-04-19 ║ Field Reports       ║ Fix: Date selector not working    ║
║       ║            ║                     ║ - calendar CSS was absent.        ║
╠═══════╬════════════╬═════════════════════╬══════════════════════════════════╣
║ R002  ║ 2026-04-19 ║ Field Reports       ║ Fix: Discarding a field report    ║
║       ║            ║                     ║ edit created a duplicate entry.   ║
╠═══════╬════════════╬═════════════════════╬══════════════════════════════════╣
║ R001  ║ 2026-04-19 ║ Mobile UI           ║ Fix: Hamburger menu items         ║
║       ║            ║                     ║ unresponsive - topnav z-index     ║
║       ║            ║                     ║ raised 300->500.                   ║
╚═══════╩════════════╩═════════════════════╩══════════════════════════════════╝
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='35%25' r='65%25'%3E%3Cstop offset='0%25' stop-color='%2300e5ff'/%3E%3Cstop offset='100%25' stop-color='%230077aa'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpolygon points='50,6 61,35 92,35 68,57 77,88 50,70 23,88 32,57 8,35 39,35' fill='url(%23g)' stroke='%2300b8d4' stroke-width='2'/%3E%3C/svg%3E">
<link rel="apple-touch-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='35%25' r='65%25'%3E%3Cstop offset='0%25' stop-color='%2300e5ff'/%3E%3Cstop offset='100%25' stop-color='%230077aa'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpolygon points='50,6 61,35 92,35 68,57 77,88 50,70 23,88 32,57 8,35 39,35' fill='url(%23g)' stroke='%2300b8d4' stroke-width='2'/%3E%3C/svg%3E">
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DirectDrive - SDMC</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
/* ── Reset & Root ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Surfaces - near-black dark mode */
  --k:#080b0f;--k2:#0e1117;--k3:#151b24;--k4:#1a2130;--k5:#202840;
  /* Neutrals */
  --g:#2e3a4a;--g2:#445566;--g3:#6b7d90;--g4:#9aaabb;
  /* Borders */
  --ln:#1a2535;--ln2:#243044;
  /* Text */
  --w:#f0f4f8;--w2:#cdd6e0;--w3:#9aaabb;
  /* PRIMARY - neon cyan */
  --gld:#00e5ff;--gld2:#33eeff;--gld3:#80f4ff;--gldg:rgba(0,229,255,.07);--gldd:rgba(0,229,255,.14);
  /* GREEN - emerald */
  --grn:#00d97e;--grn2:#00b567;--grng:rgba(0,217,126,.07);
  /* RED - neon red */
  --red:#ff2d55;--redg:rgba(255,45,85,.08);
  /* PURPLE - electric violet */
  --pur:#bf5fff;--purg:rgba(191,95,255,.08);
  /* BLUE - electric blue */
  --blu:#2979ff;--blug:rgba(41,121,255,.08);
  /* AMBER - warm orange accent */
  --amb:#ff9f1c;
  --radius:3px;--radius2:5px;
  --shadow:0 1px 3px rgba(0,0,0,.5);
  --shadow2:0 4px 24px rgba(0,0,0,.7);
}

/* ── Light Mode ───────────────────────────────────────────────────────────── */
html.light{
  /* Surfaces - clean white */
  --k:#f4f7fa;--k2:#ffffff;--k3:#eaf0f6;--k4:#dde6f0;--k5:#cdd9e6;
  /* Neutrals */
  --g:#aabccc;--g2:#88a0b4;--g3:#5a7a90;--g4:#334d60;
  /* Borders */
  --ln:#d0dde8;--ln2:#bccedd;
  /* Text */
  --w:#0a1520;--w2:#1a2a38;--w3:#2a3d50;
  /* PRIMARY - deeper cyan for readability on white */
  --gld:#0097a7;--gld2:#00bcd4;--gld3:#00e5ff;--gldg:rgba(0,151,167,.07);--gldd:rgba(0,151,167,.14);
  /* GREEN */
  --grn:#00897b;--grn2:#00695c;--grng:rgba(0,137,123,.07);
  /* RED */
  --red:#d50032;--redg:rgba(213,0,50,.07);
  /* PURPLE */
  --pur:#7b1fa2;--purg:rgba(123,31,162,.07);
  /* BLUE */
  --blu:#1565c0;--blug:rgba(21,101,192,.07);
  /* AMBER */
  --amb:#e65100;
  --shadow:0 1px 3px rgba(0,0,0,.1);
  --shadow2:0 4px 20px rgba(0,0,0,.15);
}
html.light body{background:var(--k)}
html.light .topnav{background:#e8f4f8;border-bottom:2px solid var(--gld);box-shadow:0 2px 8px rgba(0,180,210,.1)}
html.light .brand-name{color:var(--gld)!important}
html.light .brand-sub{color:var(--gld2)!important;opacity:.8}
html.light #nav-menu-btn{color:var(--gld)!important}
html.light .nav-tab{color:var(--g2)}
html.light .nav-tab:hover{background:rgba(0,151,167,.1);color:var(--gld)}
html.light .nav-tab.active{background:rgba(0,151,167,.14);color:var(--gld);border-bottom-color:var(--gld);border-left-color:var(--gld)}
html.light #nav-date{color:var(--g3)!important}
html.light .nav-badge{background:rgba(0,151,167,.1);color:var(--gld)}
html.light #active-page-label{color:var(--w)!important}
html.light #mobile-greeting{background:#ddf0f5;color:#446;border-bottom-color:rgba(0,151,167,.2)}
/* Drawer - light in light mode */
html.light .nav-tabs{background:#e8f4f8!important;border-right-color:var(--gld)!important;border-top-color:rgba(0,151,167,.2)!important}
html.light #drawer-header{background:#cceaf4!important;border-bottom-color:rgba(0,151,167,.2)!important}
html.light #drawer-header .brand-name,html.light #drawer-header [style*="color:var(--gld)"]{color:var(--gld)!important}
html.light .drawer-action-btn{background:rgba(0,151,167,.07);border-color:rgba(0,151,167,.18);color:var(--g2)}
html.light .drawer-action-btn:hover{border-color:var(--gld);color:var(--gld)}
html.light #drawer-profile{color:var(--g3)!important}
html.light #drawer-overlay{background:rgba(0,30,50,.4)}
html.light .nav-tab{color:var(--g2)}  
/* Content area */
html.light .sidebar{background:#fff;border-right-color:var(--ln)}
html.light .sidebar-item{color:var(--g3)}
html.light .sidebar-item:hover{color:var(--w);background:var(--k3)}
html.light .sidebar-item.active{color:var(--gld);border-left-color:var(--gld);background:var(--gldg)}
html.light .content-area{background:var(--k)}
html.light input,html.light select,html.light textarea{background:#fff;color:var(--w);border-color:var(--ln2)}
html.light .data-table th{background:var(--k3);color:var(--w2)}
html.light .data-table td{border-color:var(--ln)}
html.light .modal-box{background:#fff;border-color:var(--ln)}
html.light .modal-overlay{background:rgba(0,20,40,.5)}
html.light .entity-card,html.light .fr-card,html.light .po-card{background:var(--k3);border-color:var(--ln)}
html.light .stat-card{background:#fff;border:1px solid var(--ln)}
html.light .card{background:#fff;border-color:var(--ln)}
html.light .dash-panel{background:#fff;border-color:var(--ln)}
html.light .widget{background:#fff;border-color:var(--ln)}
html.light .doc-view{background:#fff;border-color:var(--ln)}
html.light .suggest-banner{background:#e8f8fc;border-color:var(--gld)}

html,body{height:100%;overflow:hidden;font-family:'Barlow',sans-serif;font-size:13px;background:var(--k);color:var(--w);-webkit-font-smoothing:antialiased}

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--k2)}
::-webkit-scrollbar-thumb{background:var(--g);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--g2)}

/* ── App Shell ─────────────────────────────────────────────────────────────── */
#app{display:flex;flex-direction:column;height:100vh;overflow:hidden}

/* ── Top Nav ───────────────────────────────────────────────────────────────── */
.topnav{
  height:56px;background:#07070a;border-bottom:1px solid var(--ln);
  display:flex;align-items:stretch;flex-shrink:0;
  box-shadow:0 0 0 1px var(--ln),0 2px 8px rgba(0,229,255,.08);border-bottom:1px solid var(--gld);
  position:relative;z-index:100;
}
.brand{
  display:flex;align-items:center;gap:10px;padding:0 16px;
  border-right:1px solid var(--ln);flex-shrink:0;
}
.brand-logo{
  width:26px;height:26px;background:var(--gldg);border:1px solid var(--gld);
  border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.brand-logo svg{width:15px;height:15px}
.brand-name{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:900;letter-spacing:.08em;color:var(--gld);line-height:1}
.brand-sub{font-size:9px;color:var(--g3);letter-spacing:.04em;margin-top:1px}
.nav-tabs{display:flex;align-items:stretch;flex:1;overflow:hidden} /* desktop - overridden on mobile */
#drawer-header{display:none} /* shown only in mobile drawer */
#drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:399}
.drawer-footer{display:none} /* shown only in mobile drawer */
.nav-tab{
  display:flex;align-items:center;gap:5px;padding:0 11px;
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;color:var(--g3);
  border-bottom:2px solid transparent;
  transition:color .15s,background .15s,border-color .15s;
  position:relative;top:1px;white-space:nowrap;flex-shrink:0;
  user-select:none;
}
.nav-tab:hover{color:var(--w3);background:#0d0d12}
.nav-tab.active{color:var(--gld);border-bottom-color:var(--gld);background:rgba(0,229,255,.06)}
.nav-tab svg{opacity:.55;flex-shrink:0}
.nav-tab.active svg{opacity:1}
.nav-right{display:flex;align-items:center;gap:12px;padding:0 20px;border-left:1px solid var(--ln);flex-shrink:0}
.nav-badge{font-size:10px;background:var(--k3);color:var(--g3);padding:2px 7px;border-radius:10px;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.06em}

/* ── Body Layout ───────────────────────────────────────────────────────────── */
.body-layout{display:flex;flex:1;overflow:hidden}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.sidebar{
  width:210px;background:var(--k2);border-right:1px solid var(--ln);
  flex-shrink:0;display:flex;flex-direction:column;overflow-y:auto;
  padding:8px 0 20px;
}
.sidebar-section{padding:4px 0}
.sidebar-label{
  font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--g2);
  padding:10px 18px 4px;
}
.sidebar-item{
  display:flex;align-items:center;gap:9px;padding:8px 18px;
  cursor:pointer;transition:color .12s,background .12s,border-color .12s;
  border-left:2px solid transparent;
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--g3);
  user-select:none;
}
.sidebar-item:hover{color:var(--w3);background:var(--k3)}
.sidebar-item.active{color:var(--gld);border-left-color:var(--gld);background:var(--k3)}
.sidebar-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.sidebar-count{
  margin-left:auto;font-size:10px;background:var(--k5);color:var(--g3);
  padding:1px 7px;border-radius:10px;font-family:'Barlow Condensed',sans-serif;font-weight:700;
}
.sidebar-item.active .sidebar-count{background:var(--gldd);color:var(--gld)}
.sidebar-divider{height:1px;background:var(--ln);margin:6px 18px}

/* ── Content ───────────────────────────────────────────────────────────────── */
.content-area{flex:1;overflow-y:auto;padding:24px 28px;background:var(--k)}
.pane{display:none}.pane.active{display:block;min-width:0;max-width:100%}

/* ── Common Components ─────────────────────────────────────────────────────── */
.section-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.section-title{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gld)}
.section-line{flex:1;height:1px;background:var(--ln)}

.card{background:var(--k2);border:1px solid var(--ln2);border-radius:var(--radius2);padding:16px 18px;margin-bottom:14px}
.card-title{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gld);margin-bottom:12px}

.field-row{display:grid;gap:10px;margin-bottom:10px;min-width:0}
.field-row > *{min-width:0}
/* Responsive form inputs - no fixed widths blowing layout */
.field input,.field select,.field textarea{width:100%;min-width:0;box-sizing:border-box}
.col2{grid-template-columns:1fr 1fr}
.col3{grid-template-columns:1fr 1fr 1fr}
.col4{grid-template-columns:1fr 1fr 1fr 1fr}
.field label{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g3);display:block;margin-bottom:4px}
input,select,textarea{
  width:100%;background:var(--k3);border:1px solid var(--k5);color:var(--w);
  font-family:'Barlow',sans-serif;font-size:12px;border-radius:var(--radius);
  outline:none;transition:border .15s,box-shadow .15s;
}
input,select{height:34px;padding:0 10px}
textarea{padding:8px 10px;resize:vertical;min-height:60px;line-height:1.5}
input:focus,select:focus,textarea:focus{border-color:var(--gld);box-shadow:0 0 0 2px var(--gldg)}
input[readonly]{opacity:.35;cursor:default}
select option{background:var(--k3);color:var(--w)}
input[type="file"]{height:auto;padding:6px 8px;font-size:11px;cursor:pointer}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  border-radius:var(--radius);cursor:pointer;transition:all .15s;
  border:1px solid var(--ln2);background:none;color:var(--g3);
  padding:6px 14px;user-select:none;
}
.btn:hover{border-color:var(--gld);color:var(--gld);background:var(--gldg)}
.btn-primary{background:var(--gld);color:var(--k);border-color:var(--gld);font-weight:800}
.btn-primary:hover{background:var(--gld2);border-color:var(--gld2);color:var(--k)}
.btn-green{background:var(--grng);color:var(--grn);border-color:var(--grn2)}
.btn-green:hover{background:var(--grn);color:var(--k)}
.btn-blue{background:var(--blug);color:var(--blu);border-color:#1e4a8a}
.btn-blue:hover{background:var(--blu);color:var(--k)}
.btn-purple{background:var(--purg);color:var(--pur);border-color:#3730a3}
.btn-purple:hover{background:var(--pur);color:var(--k)}
.btn-danger:hover{border-color:var(--red);color:var(--red);background:var(--redg)}
.btn-icon{width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.btn-xl{height:44px;padding:0 28px;font-size:12px;letter-spacing:.18em;width:100%;justify-content:center}
.btn-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Stat Cards */
.stat-grid{display:grid;gap:10px;margin-bottom:18px}
.g4c{grid-template-columns:repeat(4,1fr)}
.g3c{grid-template-columns:repeat(3,1fr)}
.stat-card{
  background:var(--k2);border:1px solid var(--ln2);border-radius:var(--radius5);
  padding:14px 16px;position:relative;overflow:hidden;border-radius:var(--radius2);
}
.stat-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--gld);border-radius:2px 0 0 2px}
.stat-card.c-grn::before{background:var(--grn)}
.stat-card.c-pur::before{background:var(--pur)}
.stat-card.c-blu::before{background:var(--blu)}
.stat-card.c-red::before{background:var(--red)}
.stat-card.c-amb::before{background:var(--amb)}
.stat-label{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--g3);margin-bottom:6px}
.stat-val{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;color:var(--w);line-height:1}
.stat-val.c-grn{color:var(--grn)}.stat-val.c-pur{color:var(--pur)}.stat-val.c-blu{color:var(--blu)}.stat-val.c-red{color:var(--red)}.stat-val.c-gld{color:var(--gld)}
.stat-sub{font-size:10px;color:var(--g3);margin-top:4px}

/* Skeleton loading */
@keyframes dd-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skel{
  background:linear-gradient(90deg,var(--k3) 25%,var(--k4,#1e2736) 50%,var(--k3) 75%);
  background-size:200% 100%;
  animation:dd-shimmer 1.6s ease-in-out infinite;
  border-radius:4px;
}
.skel-card{
  border-radius:var(--radius2);border:1px solid var(--ln2);
  background:var(--k2);padding:14px 16px;position:relative;overflow:hidden;
}
.skel-card .skel{display:block}
.skel-panel{
  border-radius:var(--radius2);border:1px solid var(--ln2);
  background:var(--k2);padding:14px 16px;
}
.skel-panel .skel{display:block}

/* Badges */
.badge{display:inline-flex;align-items:center;font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:2px}
.badge-gld{background:rgba(201,162,39,.15);color:var(--gld);border:1px solid rgba(201,162,39,.3)}
.badge-grn{background:rgba(34,197,94,.1);color:var(--grn);border:1px solid rgba(34,197,94,.25)}
.badge-pur{background:rgba(129,140,248,.1);color:var(--pur);border:1px solid rgba(129,140,248,.25)}
.badge-blu{background:rgba(96,165,250,.1);color:var(--blu);border:1px solid rgba(96,165,250,.25)}
.badge-red{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.25)}
.badge-amb{background:rgba(251,191,36,.1);color:var(--amb);border:1px solid rgba(251,191,36,.25)}
.badge-grey{background:var(--k5);color:var(--g3);border:1px solid var(--g)}

/* Tables */
.data-table{width:100%;border-collapse:collapse}
.data-table th{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g3);text-align:left;padding:8px 10px;border-bottom:1px solid var(--ln2);background:var(--k3)}
.data-table td{padding:9px 10px;border-bottom:1px solid var(--ln);color:var(--w2);font-size:12px;vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--k3)}
.data-table td .cell-primary{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--gld)}
.data-table td .cell-sub{font-size:10px;color:var(--g3);margin-top:1px}

/* Status row items */
.record-row{
  background:var(--k2);border:1px solid var(--ln2);border-radius:var(--radius2);
  padding:12px 16px;margin-bottom:8px;
  display:flex;align-items:flex-start;gap:14px;
}
.record-row.accent-gld{border-left:3px solid var(--gld)}
.record-row.accent-grn{border-left:3px solid var(--grn)}
.record-row.accent-pur{border-left:3px solid var(--pur)}
.record-row:hover{border-color:var(--g2)}

/* Bar charts */
.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.bar-lbl{width:88px;font-size:10px;color:var(--g3);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.bar-bg{flex:1;height:7px;background:var(--k5);border-radius:2px;overflow:hidden}
.bar-fill{height:7px;background:var(--gld);border-radius:2px;transition:width .5s ease}
.bar-fill.gn{background:var(--grn)}.bar-fill.pu{background:var(--pur)}
.bar-val{width:50px;text-align:right;font-size:10px;font-weight:700;font-family:'Barlow Condensed',sans-serif;color:var(--w3);flex-shrink:0}

/* Dashboard panels */
.dash-panels{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.dash-panel{background:var(--k2);border:1px solid var(--ln2);border-radius:var(--radius2);padding:14px 16px;position:relative}
/* Draggable widget system */
.widget-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.widget-wide{grid-column:1/-1}
.widget{background:var(--k2);border:1px solid var(--ln2);border-radius:var(--radius2);position:relative;transition:box-shadow .15s,opacity .15s;min-width:0;overflow:hidden}
.widget.dragging{opacity:.45;box-shadow:0 8px 32px rgba(0,0,0,.6);z-index:1000}
.widget.drag-over{border-color:var(--gld);box-shadow:0 0 0 2px var(--gldg)}
.widget-handle{display:flex;align-items:center;justify-content:space-between;padding:8px 14px 0;cursor:grab;user-select:none}
.widget-handle:active{cursor:grabbing}
.widget-drag-icon{color:var(--g2);font-size:14px;letter-spacing:2px;transition:color .15s}
.widget:hover .widget-drag-icon{color:var(--gld)}
.widget-title{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gld)}
.widget-body{padding:10px 14px 14px}
@media(max-width:768px){.widget-grid{grid-template-columns:1fr}}
.dash-panel-title{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gld);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--ln)}
.dash-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--ln);font-size:12px}
.dash-row:last-child{border:none}
.dash-lbl{color:var(--g4)}
.dval{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px}
.dval.gn{color:var(--grn)}.dval.rd{color:var(--red)}.dval.gl{color:var(--gld)}.dval.pu{color:var(--pur)}.dval.bl{color:var(--blu)}.dval.c-amb{color:var(--amb)}
.stat-val.c-amb{color:var(--amb)}

/* Status label */
.status-msg{font-size:11px;color:var(--g3);min-height:18px;margin-top:6px}
.status-msg.ok{color:var(--gld)}.status-msg.err{color:var(--red)}.status-msg.grn{color:var(--grn)}

/* Modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.82);
  display:flex;align-items:flex-start;justify-content:center;
  padding:40px 24px;z-index:9999;backdrop-filter:blur(2px);
}
.modal-box{
  background:var(--k2);border:1px solid var(--ln2);border-top:2px solid var(--gld);
  border-radius:var(--radius2);width:100%;max-width:700px;max-height:88vh;
  display:flex;flex-direction:column;box-shadow:var(--shadow2);
  animation:modal-in .15s ease;
}
@keyframes modal-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--ln);flex-shrink:0}
.modal-title{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gld)}
.modal-tabs-bar{display:flex;border-bottom:1px solid var(--ln);flex-shrink:0}
.modal-tab{padding:10px 20px;font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;color:var(--g3);border-bottom:2px solid transparent;transition:all .15s}
.modal-tab.active{color:var(--gld);border-bottom-color:var(--gld)}
.modal-body{padding:20px;overflow-y:auto;flex:1}
.modal-footer{padding:12px 20px;border-top:1px solid var(--ln);display:flex;gap:8px;flex-shrink:0}

/* Upload zone */
.upload-zone{
  border:1.5px dashed var(--g);border-radius:var(--radius2);padding:20px;
  text-align:center;cursor:pointer;transition:all .15s;margin-bottom:10px;
}
.upload-zone:hover{border-color:var(--gld);background:var(--gldg)}
.upload-zone.has-file{border-color:var(--grn);background:var(--grng)}

/* Line items */
.li-header{display:grid;grid-template-columns:1fr 2fr 70px 90px 90px 30px;gap:6px;padding:0 2px;margin-bottom:6px}
.li-row{display:grid;grid-template-columns:1fr 2fr 70px 90px 90px 30px;gap:6px;align-items:center;margin-bottom:5px}
.li-col{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g2)}
.li-col.r{text-align:right}
.li-amt{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;text-align:right;color:var(--w)}
.total-row{display:flex;justify-content:flex-end;align-items:baseline;gap:12px;border-top:1px solid var(--ln2);margin-top:10px;padding-top:10px}
.total-label{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--g3)}
.total-val{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;color:var(--w)}

/* Invoice preview */
.inv-preview{background:var(--k);border:1px solid var(--ln2);border-left:3px solid var(--gld);border-radius:var(--radius2);padding:18px;margin-top:14px}

/* Presets */
.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:12px}
.preset-card{
  padding:12px 14px;background:var(--k2);border:1px solid var(--ln2);
  cursor:pointer;transition:all .15s;position:relative;overflow:hidden;
  border-radius:var(--radius2);
}
.preset-card:hover{border-color:var(--g3)}
.preset-card.active{border-color:var(--gld);background:var(--k3)}
.preset-card.active::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--gld)}
.preset-name{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--w);margin-bottom:3px}
.preset-rate{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:900;color:var(--w)}
.preset-tag{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:1px 6px;margin-top:5px;background:var(--k5);color:var(--g3);border-radius:2px}
.preset-card.active .preset-tag{background:var(--gldd);color:var(--gld)}

/* Suggest banner */
.suggest-banner{background:#0d1a0d;border:1px solid #1a4a1a;border-left:3px solid var(--grn);padding:12px 16px;border-radius:var(--radius2);margin-bottom:14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* Photo grid */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;margin-top:10px}
.photo-thumb{position:relative;aspect-ratio:1;border-radius:var(--radius2);overflow:hidden;border:1px solid var(--ln2);cursor:pointer;transition:border .15s}
.photo-thumb:hover{border-color:var(--gld)}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.photo-label-badge{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.75);font-size:9px;color:var(--gld);padding:3px 5px;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase}
.photo-sync-badge{position:absolute;top:4px;left:4px;background:rgba(0,0,0,.78);font-size:8px;color:#fff;padding:3px 5px;border-radius:2px;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.photo-sync-badge.ready{color:var(--amb)}
.photo-sync-badge.saving{color:var(--gld)}
.photo-sync-badge.saved{color:var(--grn)}
.photo-sync-badge.failed{color:var(--red)}
.photo-thumb.photo-pending{display:flex;align-items:center;justify-content:center;background:var(--k3);color:var(--g3);font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.photo-rm{position:absolute;top:4px;right:4px;width:20px;height:20px;background:rgba(0,0,0,.7);border:none;border-radius:2px;color:var(--red);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center}
.photo-add{aspect-ratio:1;border:1.5px dashed var(--g);border-radius:var(--radius2);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;font-size:11px;color:var(--g3);gap:5px}
.photo-add:hover{border-color:var(--gld);color:var(--gld);background:var(--gldg)}
.photo-add-icon{font-size:22px;line-height:1}

/* Client / SC cards */
.entity-card{
  background:var(--k3);border:1px solid var(--ln2);border-radius:var(--radius2);
  padding:12px 14px;margin-bottom:8px;
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  cursor:pointer;transition:border .15s;
}
.entity-card:hover{border-color:var(--g3)}
.entity-card.selected{border-color:var(--gld);border-left:3px solid var(--gld)}
.entity-icon{
  width:36px;height:36px;border-radius:var(--radius);
  background:var(--gldd);border:1px solid var(--gld);
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:900;color:var(--gld);flex-shrink:0;
}
.entity-icon.purple{background:var(--purg);border-color:var(--pur);color:var(--pur)}
.entity-name{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;color:var(--w);margin-bottom:2px}
.entity-meta{font-size:11px;color:var(--g3)}

/* PO / record cards */
.po-card{
  background:var(--k3);border:1px solid var(--ln2);border-radius:var(--radius2);
  padding:14px 16px;margin-bottom:9px;
  transition:border .15s;
}
.po-card.accent-gld{border-left:3px solid var(--gld)}
.po-card.accent-grn{border-left:3px solid var(--grn)}
.po-card:hover{border-color:var(--g3)}
.po-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.po-num{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:900;color:var(--gld)}
.po-meta{font-size:11px;color:var(--g3);margin-top:3px;line-height:1.5}
.po-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;flex-shrink:0}

/* Cat tags */
.cat-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;background:var(--k3);border:1px solid var(--ln2);border-radius:10px;font-size:11px;color:var(--w3);margin:3px}
.cat-tag-rm{cursor:pointer;color:var(--g3);font-size:12px;transition:color .15s}.cat-tag-rm:hover{color:var(--red)}

/* FR card */
.fr-card{
  background:var(--k3);border:1px solid var(--ln2);border-radius:var(--radius2);
  padding:14px 16px;margin-bottom:9px;border-left:3px solid var(--gld);
  transition:border .15s;
}
.fr-card.linked{border-left-color:var(--grn)}
.fr-card:hover{border-color:var(--g3)}

/* Doc view (modal) */
.doc-view{background:var(--k);border:1px solid var(--ln2);border-radius:var(--radius2);padding:24px}
.doc-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid var(--gld)}
.doc-brand-name{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:900;color:var(--gld);letter-spacing:.1em}
.doc-brand-sub{font-size:10px;color:var(--g3);margin-top:2px;line-height:1.5}
.doc-doc-title{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--w2);text-align:right}
.doc-doc-num{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:900;color:var(--gld);text-align:right}
.doc-meta{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:18px}
.doc-meta-lbl{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g3);margin-bottom:3px}
.doc-meta-val{font-size:12px;color:var(--w)}
.doc-total-row{text-align:right;font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:900;color:var(--gld);padding-top:12px;border-top:1px solid var(--gld)}
.doc-footer-line{margin-top:16px;padding-top:12px;border-top:1px solid var(--ln);font-size:10px;color:var(--g2);text-align:center;letter-spacing:.04em}
.no-pdf-msg{text-align:center;padding:40px;color:var(--g3);font-size:12px;line-height:2}
.no-pdf-icon{font-size:28px;margin-bottom:8px;display:block}

/* Drawer action buttons */
.drawer-action-btn{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:10px 12px;margin-bottom:6px;
  background:var(--k3);border:1px solid var(--ln);border-radius:var(--radius);
  color:var(--w2);font-family:'Barlow Condensed',sans-serif;font-size:12px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;text-align:left;transition:all .15s;
}
.drawer-action-btn:hover{border-color:var(--gld);color:var(--gld)}
.drawer-footer{display:none} /* hidden on desktop */
.drawer-profile-row{
  padding:12px 18px 8px;
  border-top:1px solid var(--ln);
  text-align:center;
}
#drawer-profile{
  display:block;
  font-size:11px;
  color:var(--g3);
  line-height:1.4;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.drawer-control-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:8px 18px calc(14px + env(safe-area-inset-bottom, 0px));
}
.drawer-icon-btn{
  width:36px;
  height:36px;
  background:var(--k3);
  border:1px solid var(--ln2);
  border-radius:var(--radius);
  color:var(--g3);
  font-size:17px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .15s;
  flex:0 0 36px;
}
.drawer-icon-btn:hover{border-color:var(--gld);color:var(--gld)}
.drawer-icon-btn.danger:hover{border-color:var(--red);color:var(--red)}

/* Folder path */
.folder-path{font-size:11px;color:var(--gld);font-family:'Barlow Condensed',sans-serif;word-break:break-all;margin-top:2px}

/* Empty state */
.empty-state{font-size:12px;color:var(--g3);text-align:center;padding:30px;border:1px dashed var(--ln2);border-radius:var(--radius2);line-height:2}


/* ── Responsive ─────────────────────────────────────────────────────────────── */

/* Hamburger icon - hidden on desktop, shown inside brand-logo on mobile */
#nav-menu-btn{display:none}
#mobile-greeting{display:block;font-size:11px;color:var(--g3);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* brand-menu-wrap is clickable on mobile only - desktop override in 1024px block */

/* Tablet: 1024px and below */
/* On desktop, brand area is not clickable */
@media(min-width:769px){
  #brand-menu-wrap{cursor:default!important;flex:none!important;max-width:none!important}
}
@media(max-width:1024px){
  .col4{grid-template-columns:1fr 1fr}
  .g4c{grid-template-columns:1fr 1fr}
  .col3{grid-template-columns:1fr 1fr}
  .g3c{grid-template-columns:1fr 1fr}
  .nav-tab{padding:0 14px;font-size:11px;letter-spacing:.1em}
  .brand-sub{display:none}
  .nav-right{padding:0 12px;gap:8px}
  .content-area{padding:18px 20px}
  .dash-panels{grid-template-columns:1fr}
}

@media(max-width:768px){
  html,body{overflow:auto;height:auto}
  #app{height:auto;min-height:100vh;overflow:visible}
  .body-layout{overflow:visible;flex-direction:column}
  .content-area{overflow-x:hidden;overflow-y:auto;padding:14px 16px}

  .topnav{height:56px;flex-wrap:nowrap;position:sticky;top:0;z-index:500}
  .brand{padding:0 14px;cursor:pointer;transition:background .15s}
  .brand:active{background:var(--k3)}
  .brand-name{font-size:15px}
  .brand-sub{display:block!important;font-size:9px;color:var(--gld);letter-spacing:.1em}
  /* Hamburger: centered within the brand button, away from both edges */
  #nav-menu-btn{display:flex!important;align-items:center;justify-content:center;margin-left:auto;margin-right:14px;font-size:20px;color:var(--g3);line-height:1;flex-shrink:0;width:32px}
  #nav-menu-btn.open{color:var(--gld)!important}
  /* Prevent iOS Safari auto-zoom on input focus (triggered when font-size < 16px) */
  input,select,textarea{font-size:16px!important}

  /* Slide-in drawer */
  .nav-tabs{
    display:none!important;
    position:fixed;top:0;left:0;bottom:0;
    width:58vw;max-width:220px;
    background:#07070a;
    border-right:1px solid var(--gld);
    flex-direction:column;
    z-index:400;
    box-shadow:4px 0 24px rgba(0,0,0,.7);
    overflow-y:auto;
    transform:translateX(-105%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
  }
  .nav-tabs.open{display:flex!important;transform:translateX(0)}
  #drawer-overlay.open{display:block!important}
  #drawer-header{display:block!important}
  .drawer-footer{display:block!important;margin-top:auto}
  .nav-tab{
    padding:14px 20px;
    border-left:3px solid transparent;
    border-bottom:none;
    font-size:13px;letter-spacing:.12em;
    top:0;flex-shrink:0;
    white-space:nowrap;
  }
  .nav-tab.active{border-left-color:var(--gld);border-bottom-color:transparent;background:rgba(0,229,255,.05)}
  #settings-btn,#theme-btn{display:none!important}
  .nav-right{padding:0 12px;gap:8px;border-left:none;margin-left:auto}
  #active-page-label{display:block!important;max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px!important}
  #nav-date{display:none}

  /* Slightly larger hamburger on smallest screens */
  #nav-menu-btn{font-size:22px;margin-right:10px}

  /* Sidebar */
  .sidebar{width:100%;border-right:none;border-bottom:1px solid var(--ln);flex-direction:row;flex-wrap:wrap;padding:4px 8px;overflow:visible}
  .sidebar-section{display:flex;flex-direction:row;gap:4px;flex-wrap:wrap;padding:4px 0}
  .sidebar-item{padding:6px 12px;border-left:none;border-bottom:2px solid transparent;font-size:10px}
  .sidebar-item.active{border-left-color:transparent;border-bottom-color:var(--gld)}
  .sidebar-label,.sidebar-divider{display:none}

  /* Grids */
  .col4,.col3,.col2{grid-template-columns:1fr}
  .g4c,.g3c{grid-template-columns:1fr 1fr}
  .dash-panels,.dpanels{grid-template-columns:1fr!important}
  .stat-grid.g4c,.stat-grid.g3c{grid-template-columns:1fr 1fr}

  /* Tables */
  .data-table{font-size:11px}
  .data-table th,.data-table td{padding:6px 8px}
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;max-width:100%;display:block}
  .data-table{min-width:520px}
  .btn-row input,.btn-row select{min-width:0;max-width:100%}

  .card{padding:12px 14px}
  .modal-box{max-height:95vh;margin:0;border-radius:5px 5px 0 0}
  .modal-overlay{padding:0;align-items:flex-end}

  /* Two-col client layout stacks */
  #pane-clients_dir [style*="grid-template-columns:1fr 1fr"]{display:flex!important;flex-direction:column!important}
  #fr-stat-cards{grid-template-columns:1fr 1fr!important}
}

@media(max-width:480px){
  .brand-name{font-size:13px}
  .stat-grid.g4c{grid-template-columns:1fr 1fr}
  .col2{grid-template-columns:1fr}
  .content-area{padding:12px}
  .btn-row{flex-wrap:wrap}
  .btn-row .btn{flex:1;min-width:0}
  .inv-doc{padding:20px}
}


/* ══════════════════════════════════════════════════════════════════════════════
   PRINT-READY DOCUMENT STYLES - invoice & field report
   All colors forced to black/white, identical on every device & in print/PDF
   ══════════════════════════════════════════════════════════════════════════════ */
.print-doc{
  background:#fff!important;color:#000!important;
  font-family:'Barlow',sans-serif;font-size:12px;line-height:1.5;
  max-width:720px;margin:0 auto;padding:32px 36px;
  border:none!important;box-shadow:none!important;
}
/* Header */
.pd-header{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:14px;border-bottom:2px solid #000;margin-bottom:20px}
.pd-co-name{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:900;letter-spacing:.05em;color:#000;line-height:1}
.pd-co-info{font-size:10px;color:#444;margin-top:4px;line-height:1.6}
.pd-title-block{text-align:right}
.pd-doc-label{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#666}
.pd-doc-num{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;color:#000;line-height:1}
/* Meta grid */
.pd-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 18px;margin-bottom:18px;padding:14px;background:#f4f4f4;border-radius:3px}
.pd-meta-lbl{font-family:'Barlow Condensed',sans-serif;font-size:8px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#666;margin-bottom:2px}
.pd-meta-val{font-size:11px;font-weight:600;color:#000}
/* Section headers */
.pd-section-lbl{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#666;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid #ddd}
/* Time bar */
.pd-time-bar{display:flex;gap:24px;padding:10px 14px;background:#f4f4f4;border-radius:3px;margin-bottom:16px;flex-wrap:wrap}
.pd-time-item{display:flex;flex-direction:column;gap:2px}
.pd-time-lbl{font-family:'Barlow Condensed',sans-serif;font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#666}
.pd-time-val{font-size:12px;font-weight:600;color:#000}
/* Line items table */
.pd-table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:11px}
.pd-table thead tr{border-bottom:2px solid #000}
.pd-table th{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#000;padding:6px 8px;text-align:left}
.pd-table th.r,.pd-table td.r{text-align:right}
.pd-table tbody tr{border-bottom:1px solid #e0e0e0}
.pd-table td{padding:7px 8px;color:#000;font-size:11px}
.pd-table td:first-child{font-weight:600}
.pd-table tfoot tr{border-top:2px solid #000}
.pd-table tfoot td{padding:10px 8px;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:900;color:#000}
/* Notes */
.pd-notes{padding:12px 14px;border:1px solid #ddd;border-radius:3px;margin-bottom:16px;font-size:11px;color:#000;white-space:pre-wrap}
.pd-notes-lbl{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#666;margin-bottom:5px}
/* Bullets (work / parts) */
.pd-bullet-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px;margin-bottom:14px}
.pd-bullet{display:flex;gap:7px;align-items:flex-start;font-size:11px;color:#000;line-height:1.6;padding:2px 0}
.pd-bullet-dot{flex-shrink:0;margin-top:2px;color:#000}
/* Time table */
.pd-time-table{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:14px}
.pd-time-table th{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#000;text-align:left;padding:5px 8px;border-bottom:2px solid #000}
.pd-time-table th.r,.pd-time-table td.r{text-align:right}
.pd-time-table td{padding:6px 8px;border-bottom:1px solid #e0e0e0;color:#000}
.pd-time-total{text-align:right;font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:#000;margin-top:4px}
/* Photos */
.pd-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-bottom:14px}
.pd-photo-wrap{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid #ccc;border-radius:2px}
.pd-photo-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.pd-photo-lbl{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.65);font-size:8px;color:#fff;padding:3px 5px;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase}
.pd-photo-attachment-page{break-before:page;page-break-before:always;margin:32px -36px 0;padding:32px 36px;min-height:1056px;border-top:12px solid #f1f1f1;background:#fff}
.pd-photo-attachment-title{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#000;line-height:1}
.pd-photo-attachment-sub{font-size:10px;color:#555;margin:4px 0 14px}
.pd-photos-attachment{grid-template-columns:repeat(2,1fr);gap:14px}
.pd-photos-attachment .pd-photo-wrap{aspect-ratio:4/3}
/* Footer */
.pd-footer{margin-top:20px;padding-top:10px;border-top:1px solid #000;font-size:9px;color:#666;text-align:center;letter-spacing:.05em}
/* Result badge */
.pd-result{display:inline-block;padding:2px 10px;border:1px solid #000;border-radius:2px;font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#000}
/* Status badge */
.pd-status{display:inline-block;padding:2px 8px;border:1px solid #000;font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#000;border-radius:2px}
/* Print media */
@media print{
  .print-doc{padding:0!important;max-width:100%!important}
}


/* ══════════════════════════════════════════════════════════════════════════════
   DOCUMENT VIEWER - full-screen zoomable paper viewer
   ══════════════════════════════════════════════════════════════════════════════ */
#doc-viewer-overlay{
  position:fixed;inset:0;z-index:10000;
  background:rgba(20,24,32,.97);
  display:none;flex-direction:column;
}
#doc-viewer-overlay.open{display:flex}
#doc-viewer-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;background:#111418;border-bottom:1px solid #2a2a3a;
  flex-shrink:0;gap:12px;
}
#doc-viewer-title{
  font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gld);flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#doc-viewer-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-shrink:0}
#doc-viewer-zoom-controls{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background:#111418;border-top:1px solid #2a2a3a;flex-shrink:0;
}
.dv-btn{
  height:32px;padding:0 12px;background:#1e2230;border:1px solid #2a2a3a;
  border-radius:3px;color:#c0c8d8;font-family:'Barlow Condensed',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.08em;cursor:pointer;
  transition:all .15s;display:flex;align-items:center;gap:5px;white-space:nowrap;
}
.dv-btn:hover{border-color:var(--gld);color:var(--gld)}
.dv-btn.primary{background:var(--gld);color:#080b0f;border-color:var(--gld)}
.dv-btn.primary:hover{background:var(--gld2)}
.dv-btn-icon{
  width:32px;
  min-width:32px;
  padding:0;
  justify-content:center;
}
#doc-viewer-zoom-lbl{
  font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;
  color:#6b7d90;min-width:44px;text-align:center;
}
#doc-viewer-scroll{
  flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;
  padding:32px 24px;-webkit-overflow-scrolling:touch;
}
#doc-viewer-paper{
  background:#fff;
  width:816px;        /* 8.5in @ 96dpi */
  min-height:1056px;  /* 11in @ 96dpi */
  box-shadow:0 4px 40px rgba(0,0,0,.6);
  flex-shrink:0;
  transform-origin:top center;
  transition:transform .15s ease;
  padding:0;
}
@media(max-width:768px){
  #doc-viewer-toolbar{
    padding:8px 10px;
    gap:8px;
  }
  #doc-viewer-title{
    min-width:0;
    font-size:12px;
    line-height:1.2;
  }
  #doc-viewer-actions{
    display:grid;
    grid-template-columns:repeat(4,minmax(42px,1fr));
    gap:6px;
    flex:0 0 min(58vw,230px);
    align-items:center;
  }
  #doc-viewer-zoom-controls{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:10001;
    display:grid;
    grid-template-columns:42px 58px 42px minmax(54px,80px);
    gap:8px;
    padding:8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -2px 18px rgba(0,0,0,.45);
  }
  .dv-btn{
    width:100%;
    height:32px;
    padding:0 6px;
    justify-content:center;
    font-size:10px;
    letter-spacing:.04em;
    min-width:0;
  }
  #doc-viewer-zoom-lbl{min-width:0;width:100%;font-size:10px}
  #doc-viewer-scroll{padding:16px 10px calc(72px + env(safe-area-inset-bottom, 0px))}
}
@media(max-width:380px){
  #doc-viewer-actions{grid-template-columns:repeat(4,minmax(36px,1fr));gap:4px;flex-basis:min(60vw,196px)}
  #doc-viewer-zoom-controls{
    grid-template-columns:38px 50px 38px minmax(48px,68px);
    gap:4px;
  }
  .dv-btn{height:30px;font-size:9px;padding:0 4px}
  .dv-btn-icon{width:30px;min-width:30px}
}

@media print {
  /* Hide everything except the dedicated print shell */
  body > *:not(#print-shell) { display: none !important; }
  #print-shell {
    display: block !important;
    position: static !important;
    width: 100% !important;
    background: #fff !important;
  }
  #print-shell [data-pdf-page-break] {
    break-before: page !important;
    page-break-before: always !important;
  }
  /* Strip decorative styles from the doc inside print shell */
  #print-shell .inv-doc,
  #print-shell .doc-view,
  #print-shell .print-doc {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  #print-shell .pd-photo-attachment-page {
    margin: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
    border-top: none !important;
  }
}
/* ── Fixed form action bar ────────────────────────────────────────────────── */
/* ── Global Action Bar ──────────────────────────────────────────────────────
   On desktop (>768px) this sits as a real flex-shrink:0 sibling below
   .body-layout inside #app. body-layout fills the remaining height so the
   bar is always visible with zero overlap - no position:fixed tricks needed.
   On mobile/tablet (<=768px) the body itself scrolls so we fall back to
   position:fixed, but the breakpoint for that is 768px where the whole
   layout already switches to a column-scroll mode.                           */
#form-action-bar-container{
  display:none; /* JS sets display:flex when a form pane is active */
  flex-shrink:0;
  background:var(--k2);
  border-top:2px solid var(--ln2);
  box-shadow:0 -2px 12px rgba(0,0,0,.35);
  z-index:250;
  flex-direction:column;
}
html.light #form-action-bar-container{background:#fff;box-shadow:0 -2px 12px rgba(0,0,0,.1)}
.form-bar-inner{
  padding:10px 28px calc(14px + env(safe-area-inset-bottom, 0px));
  display:none;gap:8px;align-items:center;flex-wrap:wrap;
}
.form-bar-inner.active{display:flex}
.form-bar-inner .btn-xl{width:auto}
.form-exit-btn{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  flex:0 0 38px!important;
  padding:0!important;
  justify-content:center;
  font-size:16px;
  line-height:1;
}
@media(max-width:1024px){.form-bar-inner{padding:10px 20px calc(14px + env(safe-area-inset-bottom, 0px))}}
@media(max-width:768px){
  /* On mobile the body scrolls, so the bar must be fixed to the viewport */
  #form-action-bar-container{position:fixed;bottom:0;left:0;right:0}
  .form-bar-inner{padding:10px 16px calc(14px + env(safe-area-inset-bottom, 0px))}
  /* Give the scrolling content enough clearance below the fixed bar */
  .content-area.has-form-pane{padding-bottom:160px}
}
@media(max-width:480px){
  .form-bar-inner{padding:8px 10px calc(12px + env(safe-area-inset-bottom, 0px))}
  .form-bar-inner.active{
    display:grid;
    grid-template-columns:38px minmax(0,1.4fr) minmax(0,1fr);
    gap:6px;
  }
  .form-bar-inner .btn{
    width:100%;
    min-width:0!important;
    height:38px;
    padding:0 8px;
    justify-content:center;
    font-size:10px;
    letter-spacing:.06em;
    white-space:nowrap;
  }
  .form-bar-inner .status-msg{grid-column:1/-1;text-align:center;min-height:0}
}

@page {
  size: letter portrait;
  margin: 0.6in 0.75in 0.75in 0.75in;
}

/* ── Calendar Popup ──────────────────────────────────────────────────────── */
.cal-popup{
  position:fixed;z-index:10500;
  background:var(--k2);border:1px solid var(--ln2);border-top:2px solid var(--gld);
  border-radius:var(--radius2);box-shadow:var(--shadow2);
  width:268px;padding:10px;user-select:none;
}
.cal-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;
}
.cal-month-lbl{
  font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.08em;color:var(--w);text-transform:uppercase;
}
.cal-nav{
  background:none;border:1px solid var(--ln2);border-radius:var(--radius);
  color:var(--g3);font-size:16px;width:28px;height:28px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .12s,color .12s;line-height:1;
}
.cal-nav:hover{border-color:var(--gld);color:var(--gld)}
.cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:2px;
}
.cal-dow{
  font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--g3);
  text-align:center;padding:4px 0;
}
.cal-day{
  text-align:center;padding:5px 2px;border-radius:var(--radius);
  font-size:12px;cursor:pointer;color:var(--w2);
  transition:background .1s,color .1s;
}
.cal-day:hover{background:var(--k4);color:var(--gld)}
.cal-other{color:var(--g2);opacity:.45}
.cal-other:hover{opacity:1}
.cal-today{color:var(--gld);font-weight:700}
.cal-sel{background:var(--gld)!important;color:var(--k)!important;font-weight:800}
</style>
<!-- DirectDrive build: 2026-05-03T20:46:12.977Z -->
</head>
<body>
<div id="print-shell" style="display:none"></div>
<div id="app">

<!-- TOP NAV -->

<!-- ── LOGIN OVERLAY ─────────────────────────────────────────────────── -->
<div id="login-overlay" style="
  position:fixed;inset:0;z-index:99999;
  background:linear-gradient(135deg,#07070a 0%,#0d0d18 60%,#12121f 100%);
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow',sans-serif;
">
  <div style="width:100%;max-width:380px;padding:0 24px">
    <div id="login-logo-tap" style="text-align:center;margin-bottom:36px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent" onclick="devModeTap()">
      <div style="font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:900;letter-spacing:.1em;color:#00e5ff;line-height:1">DirectDrive</div>
      <div style="font-size:11px;color:#52525b;letter-spacing:.12em;text-transform:uppercase;margin-top:6px">SDMC · Field Service Management</div>
    </div>
    <div style="background:#101014;border:1px solid #1f1f27;border-top:2px solid #00e5ff;border-radius:5px;padding:28px 28px 24px">
      <div id="login-msg" style="display:none;font-size:12px;padding:8px 12px;border-radius:3px;margin-bottom:14px;text-align:center"></div>
      <div id="login-form">
        <div style="margin-bottom:14px">
          <label style="font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#71717a;display:block;margin-bottom:5px">Email</label>
          <input id="login-email" type="email" autocomplete="email"
            style="width:100%;background:#18181c;border:1px solid #28282f;border-radius:3px;color:#fafafa;font-size:13px;padding:9px 12px;outline:none;box-sizing:border-box;transition:border .15s"
            onfocus="this.style.borderColor='#c9a227'" onblur="this.style.borderColor='#28282f'"
            placeholder="your@email.com" onkeydown="if(event.key==='Enter')loginSubmit()">
        </div>
        <div style="margin-bottom:20px">
          <label style="font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#71717a;display:block;margin-bottom:5px">Password</label>
          <input id="login-pw" type="password" autocomplete="current-password"
            style="width:100%;background:#18181c;border:1px solid #28282f;border-radius:3px;color:#fafafa;font-size:13px;padding:9px 12px;outline:none;box-sizing:border-box;transition:border .15s"
            onfocus="this.style.borderColor='#c9a227'" onblur="this.style.borderColor='#28282f'"
            placeholder="••••••••" onkeydown="if(event.key==='Enter')loginSubmit()">
        </div>
        <button onclick="loginSubmit()" id="login-btn"
          style="width:100%;background:#00e5ff;color:#080b0f;font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:none;border-radius:3px;padding:11px;cursor:pointer;transition:background .15s"
          onmouseover="this.style.background='#33eeff'" onmouseout="this.style.background='#00e5ff'">
          Sign In
        </button>
      </div>
      <div id="login-loading" style="display:none;text-align:center;padding:16px 0">
        <div style="font-family:'Barlow Condensed',sans-serif;font-size:12px;color:#71717a;letter-spacing:.08em">SIGNING IN…</div>
      </div>
    </div>
    <div style="text-align:center;margin-top:16px;font-size:11px;color:#3f3f46">
      DirectDrive v2 · San Diego Manufacturing Company LLC
    </div>
  </div>
</div>

<div class="topnav" style="display:none" id="app-topnav">
  <!-- Brand + Menu button share left half on mobile -->
  <div class="brand" id="brand-menu-wrap" onclick="toggleMobileNav()" style="cursor:pointer;flex:1;max-width:50%;border-right:1px solid var(--ln)">
    <div class="brand-logo">
      <svg viewBox="0 0 44 40" fill="none"><polygon points="22,2 27,15 41,15 30,24 34,38 22,30 10,38 14,24 3,15 17,15" fill="#00e5ff" stroke="#80f4ff" stroke-width="1.2"/></svg>
    </div>
    <div>
      <div class="brand-name">DirectDrive</div>
      <div class="brand-sub">Field Tool</div>
    </div>
    <!-- hamburger: pushed to right edge of the brand button with margin-left:auto -->
    <span id="nav-menu-btn">☰</span>
  </div>
  <div class="nav-tabs" id="nav-tabs-list">
    <!-- Drawer header (mobile only) -->
    <div id="drawer-header" style="background:#07070a;border-bottom:1px solid var(--ln);padding:20px 20px 16px;flex-shrink:0">
      <div style="display:flex;align-items:center;justify-content:space-between">
        <div>
          <div style="font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:900;letter-spacing:.1em;color:var(--gld);line-height:1">DirectDrive</div>
          <div style="font-size:11px;color:var(--g3);margin-top:3px;letter-spacing:.1em;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase">Field Tool</div>
        </div>
        <button onclick="closeMobileNav()" style="background:none;border:none;color:var(--g3);font-size:22px;cursor:pointer;padding:4px;line-height:1">✕</button>
      </div>
    </div>
    <div class="nav-tab active" data-main="dashboard" onclick="switchMain('dashboard')">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
      Dashboard
    </div>
    <div class="nav-tab" data-main="fieldreports" onclick="switchMain('fieldreports')">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
      Field Reports
    </div>
    <div class="nav-tab" data-main="billing" onclick="switchMain('billing')">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="7" y1="9" x2="17" y2="9"/><line x1="7" y1="13" x2="13" y2="13"/><line x1="7" y1="17" x2="11" y2="17"/></svg>
      Billing
    </div>
    <div class="nav-tab" data-main="clients" onclick="switchMain('clients')">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="7" r="4"/><path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"/><path d="M16 3.13a4 4 0 0 1 0 7.75M21 21v-2a4 4 0 0 0-3-3.85"/></svg>
      Clients
    </div>
    <div class="nav-tab" data-main="admin" onclick="switchMain('admin')">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
      Administration
    </div>
    <!-- MOBILE DRAWER FOOTER - settings, theme, signout -->
    <div class="drawer-footer">
      <div class="drawer-profile-row">
        <div id="drawer-profile">Benjamin G - SDMC</div>
      </div>
      <div class="drawer-control-row">
        <button class="drawer-icon-btn" onclick="openSettings();closeMobileNav()" title="Settings">&#9881;</button>
        <button class="drawer-icon-btn" id="theme-btn-drawer" onclick="toggleTheme()" title="Toggle theme"><span id="theme-icon-drawer">&#9790;</span></button>
        <button class="drawer-icon-btn danger" onclick="signOut()" title="Sign Out">&#x23FB;</button>
      </div>
    </div>
  </div>
  <div class="nav-right">
    <span id="active-page-label" style="font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--w2);display:none">Dashboard</span>
    <span style="font-size:11px;color:var(--g3);display:none" id="nav-date"></span>
    <button class="btn btn-icon" id="settings-btn" onclick="openSettings()" title="Settings" style="font-size:16px;width:32px;height:32px;border-radius:50%">⚙</button>
    <span id="dev-badge" style="display:none;background:#7c3aed;color:#e9d5ff;font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:800;letter-spacing:.14em;padding:3px 8px;border-radius:3px;border:1px solid #a855f7">DEV</span>
  </div>
</div>

<div style="display:flex;align-items:center;justify-content:space-between;background:#07070a;border-bottom:1px solid var(--ln2);padding:5px 24px;position:sticky;top:56px;z-index:290">
  <div id="mobile-greeting" style="font-size:11px;color:var(--g3);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1"></div>
  <span class="nav-badge" id="save-badge" style="flex-shrink:0;margin-left:12px">Auto-saved</span>
</div>


<!-- ══ DOCUMENT VIEWER ══════════════════════════════════════════════════════ -->
<div id="doc-viewer-overlay">
  <div id="doc-viewer-toolbar">
    <div id="doc-viewer-title">Document</div>
    <div id="doc-viewer-actions">
      <button class="dv-btn" onclick="dvEdit()" id="dv-edit-btn">Edit</button>
      <button class="dv-btn primary" onclick="printDoc()">Print</button>
      <button class="dv-btn" onclick="dvEmail()" id="dv-email-btn">Email</button>
      <button class="dv-btn dv-btn-icon" onclick="closeDocViewer()" title="Close">&times;</button>
    </div>
  </div>
  <div id="doc-viewer-scroll">
    <div id="doc-viewer-paper"></div>
  </div>
  <div id="doc-viewer-zoom-controls">
    <button class="dv-btn dv-btn-icon" onclick="dvZoom(-0.1)" title="Zoom out">&minus;</button>
    <span id="doc-viewer-zoom-lbl">100%</span>
    <button class="dv-btn dv-btn-icon" onclick="dvZoom(+0.1)" title="Zoom in">+</button>
    <button class="dv-btn" onclick="dvFit()">Fit</button>
  </div>
</div>

<!-- DRAWER OVERLAY -->
<div id="drawer-overlay" onclick="closeMobileNav()"></div>

<!-- BODY -->
<div class="body-layout" style="display:none" id="app-body">

  <!-- DASHBOARD SIDEBAR -->

  <!-- ADMIN SIDEBAR -->


  <!-- CLIENTS SIDEBAR -->

  <!-- CONTENT -->
  <div class="content-area" id="content-area">

    <!-- ═══════════════════════════════════════════════════════════════════════
         DASHBOARD
    ══════════════════════════════════════════════════════════════════════════ -->
    <div class="pane active" id="pane-dashboard-main">
      <div style="margin-bottom:18px">
        <div id="dash-company-lbl" style="font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;letter-spacing:.06em;color:var(--gld);line-height:1;cursor:default;user-select:none;-webkit-tap-highlight-color:transparent" onclick="dashDevTap()">SDMC</div>
      </div>
      <div class="stat-grid g4c" id="dash-stat-cards"></div>
      <div class="dash-panels" id="dash-panels-1"></div>
      <div class="dash-panels" id="dash-panels-2"></div>
    </div>

    <div class="pane" id="pane-pl">
      <div class="section-header"><span class="section-title">Profit &amp; Loss Report</span><div class="section-line"></div></div>
      <div class="stat-grid g4c" id="pl-stats"></div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
        <div class="card"><div class="card-title">P&amp;L Breakdown</div><div id="pl-breakdown"></div></div>
        <div class="card"><div class="card-title">By Category</div><div id="pl-by-cat"></div></div>
        <div class="card"><div class="card-title">Monthly Income</div><div id="pl-monthly"></div></div>
        <div class="card"><div class="card-title">PO Status Breakdown</div><div id="pl-po-status"></div></div>
      </div>
    </div>

    <div class="pane" id="pane-yearend">
      <div class="section-header"><span class="section-title">Year-End Summary</span><div class="section-line"></div></div>
      <div id="yearend-content"></div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════════════════
         ADMINISTRATION
    ══════════════════════════════════════════════════════════════════════════ -->
    <!-- ADMIN / EXPENSE DASHBOARD -->
    <!-- ADMINISTRATION - unified single pane -->
    <div class="pane" id="pane-admin_main">

      <!-- Stat cards + overview panels -->
      <div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px">
        <div id="admin-company-lbl" style="font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;letter-spacing:.06em;color:var(--gld);line-height:1">SDMC</div>
      </div>
      <div class="stat-grid g4c" id="admin-dash-stats"></div>
      <div class="dash-panels" id="admin-dash-panels-1"></div>
      <div class="dash-panels" id="admin-dash-panels-2"></div>

      <!-- Expense Log section -->
      <div class="section-header">
        <span class="section-title">Expense Log</span>
        <div class="section-line"></div>
        <button class="btn btn-primary" style="margin-left:12px" onclick="openAddExpenseModal()">+ Expense</button>
      </div>
      <div class="btn-row" style="margin-bottom:14px;flex-wrap:wrap;gap:8px">
        <input id="exp-search" placeholder="Search expenses..." style="width:100%;max-width:220px;min-width:0" oninput="buildExpenseLog()">
        <select id="exp-cat-filter" style="min-width:0;flex:1;max-width:180px" onchange="buildExpenseLog()"><option value="">All Categories</option></select>
        <select id="exp-freq-filter" style="min-width:0;flex:1;max-width:160px" onchange="buildExpenseLog()">
          <option value="">All Frequencies</option>
          <option value="One-Time">One-Time</option>
          <option value="Monthly">Monthly</option>
          <option value="Yearly">Yearly</option>
        </select>
        <span style="margin-left:auto;font-size:12px;color:var(--g3)" id="exp-total-lbl"></span>
      </div>
      <div id="exp-log-container"></div>

      <!-- Mileage Log section -->
      <div class="section-header" style="margin-top:24px">
        <span class="section-title">IRS Mileage Log</span>
        <div class="section-line"></div>
      </div>
      <div id="mileage-content"></div>

    </div>

    <div class="pane" id="pane-categories">
      <div class="section-header"><span class="section-title">Expense Categories</span><div class="section-line"></div></div>
      <div id="cat-list-container"></div>
      <div class="card" style="margin-top:14px">
        <div class="card-title">Add Category</div>
        <div class="field-row col3">
          <div class="field"><label>Name</label><input id="new-cat-name" placeholder="Category name..."></div>
          <div class="field"><label>Group</label>
            <select id="new-cat-group">
              <option value="Operations">Business Operations</option>
              <option value="Vehicle">Vehicle &amp; Travel</option>
              <option value="Tools">Tools &amp; Equipment</option>
              <option value="Services">Services &amp; Software</option>
              <option value="Other">Other</option>
            </select>
          </div>
          <div class="field" style="display:flex;align-items:flex-end">
            <button class="btn btn-primary" onclick="addCategory()" style="width:100%">+ Add Category</button>
          </div>
        </div>
      </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════════════════
         BILLING
    ══════════════════════════════════════════════════════════════════════════ -->
    <!-- BILLING DASHBOARD -->
    <div class="pane" id="pane-billing_dash">
      <div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px">
        <div id="billing-company-lbl" style="font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;letter-spacing:.06em;color:var(--gld);line-height:1">SDMC</div>
      </div>
      <div class="stat-grid g4c" id="billing-dash-stats"></div>
      <div class="dash-panels" id="billing-dash-panels-1"></div>
      <div class="dash-panels" id="billing-dash-panels-2"></div>
    </div>

    <div class="pane" id="pane-po_log">
      <div class="dd-page-company" style="font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;letter-spacing:.06em;color:var(--gld);line-height:1;margin-bottom:18px">SDMC</div>
            <div class="btn-row" style="margin-bottom:16px;flex-wrap:wrap;gap:8px">
        <input id="po-search" placeholder="Search POs..." style="width:100%;max-width:260px;min-width:0" oninput="renderPOLog()">
        <select id="po-status-filter" style="max-width:160px;min-width:0;flex:1" onchange="renderPOLog()">
          <option value="">All Statuses</option><option>Received</option><option>Invoiced</option><option>Paid</option><option>Void</option>
        </select>
        <button class="btn btn-primary" onclick="showPane('log_po','billing')" style="margin-left:auto">+ Log New PO</button>
      </div>
      <div class="stat-grid g4c" id="po-stat-cards"></div>
      <div class="section-header"><span class="section-title">Purchase Orders</span><div class="section-line"></div></div>
      <div id="po-log-container"></div>
    </div>

    <div class="pane" id="pane-log_po">
      <div class="section-header"><span class="section-title">Log New PO</span><div class="section-line"></div></div>
      <div class="card">
        <div class="card-title">Upload Original PDF (optional)</div>
        <div class="upload-zone" id="po-upload-zone" onclick="document.getElementById('po-file-input').click()">
          <div style="font-size:13px;color:var(--g3);margin-bottom:4px">Drop PO PDF here or click to browse</div>
          <div style="font-size:11px;color:var(--g2)" id="po-upload-lbl">Supports PDF, JPG, PNG - stored with this PO record</div>
        </div>
        <input type="file" id="po-file-input" accept=".pdf,image/*" style="display:none" onchange="handlePOFile(this)">
      </div>
      <div class="card">
        <div class="card-title">PO Details</div>
        <div class="field-row col4">
          <div class="field"><label>PO Number</label><input id="po-num" placeholder="9998"></div>
          <div class="field"><label>PO Date</label><input id="po-date" placeholder="MM/DD/YYYY" readonly onclick="openCal(this)" style="cursor:pointer"></div>
          <div class="field"><label>Service Date</label><input id="po-svc-date" placeholder="MM/DD/YYYY" readonly onclick="openCal(this)" style="cursor:pointer"></div>
          <div class="field"><label>Status</label>
            <select id="po-status-sel"><option>Received</option><option>Invoiced</option><option>Paid</option><option>Void</option></select>
          </div>
        </div>
        <div class="field-row col3">
          <div class="field"><label>Client</label>
            <select id="po-client-sel" onchange="onPOClientSelect()"><option value="">- Select client -</option></select>
          </div>
          <div class="field"><label>Client Name</label><input id="po-client-name" placeholder=""></div>
          <div class="field"><label>Ship-To / Site</label><input id="po-site" placeholder="Site name or address"></div>
        </div>
        <div class="field-row col2">
          <div class="field"><label>Terms</label><input id="po-terms" placeholder="Per Contract"></div>
          <div class="field"><label>Notes</label><input id="po-notes-field" placeholder="Scope of work..."></div>
        </div>
      </div>
      <div class="card">
        <div class="card-title">Line Items</div>
        <div class="li-header">
          <span class="li-col">Item</span><span class="li-col">Description</span>
          <span class="li-col r">Qty</span><span class="li-col r">Rate</span><span class="li-col r">Amount</span><span></span>
        </div>
        <div id="po-lines-container"></div>
        <div class="btn-row" style="margin-top:8px">
          <button class="btn" onclick="addPOLine()">+ Add Line</button>
        </div>
        <div class="total-row">
          <span class="total-label">PO Total</span>
          <span class="total-val" id="po-total-val">$0.00</span>
        </div>
      </div>
      <div class="btn-row" style="margin-top:4px">
        <button class="btn btn-primary" style="min-width:140px" onclick="savePO()">Save PO</button>
        <button class="btn" onclick="clearPOForm()">Clear</button>
        <button class="btn btn-danger" id="po-discard-btn" style="display:none" onclick="discardPO()">Discard Changes</button>
        <span class="status-msg" id="po-status-msg"></span>
      </div>
    </div>

    <div class="pane" id="pane-invoice_log">
      <div class="dd-page-company" style="font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;letter-spacing:.06em;color:var(--gld);line-height:1;margin-bottom:18px">SDMC</div>
            <div class="btn-row" style="margin-bottom:16px;flex-wrap:wrap;gap:8px">
        <input id="inv-search" placeholder="Search invoices..." style="width:100%;max-width:260px;min-width:0" oninput="renderInvoiceLog()">
        <select id="inv-status-filter" style="width:140px;min-width:0" onchange="renderInvoiceLog()">
          <option value="">All</option><option>Draft</option><option>Sent</option><option>Paid</option><option>Overdue</option>
        </select>
        <button class="btn btn-primary" onclick="showPane('create_invoice','billing')" style="margin-left:auto">+ Create Invoice</button>
      </div>
      <div class="stat-grid g4c" id="inv-stat-cards"></div>
      <div class="section-header"><span class="section-title">Invoices</span><div class="section-line"></div></div>
      <div id="inv-log-container"></div>
    </div>

    <div class="pane" id="pane-create_invoice">
      <div id="inv-po-banner"></div>

      <!-- CLIENT & SUB-CLIENT -->
      <div class="section-header"><span class="section-title">Client</span><div class="section-line"></div></div>
      <div class="card" style="margin-bottom:10px">
        <div class="field-row col3">
          <div class="field"><label>Parent Client</label>
            <select id="inv-client-sel" onchange="onInvClientSelect()"><option value="">- Select client -</option></select>
          </div>
          <div class="field"><label>Sub-Client (optional)</label>
            <select id="inv-subclient-sel" onchange="onInvSubClientSelect()"><option value="">- None -</option></select>
          </div>
          <div class="field" style="display:flex;align-items:flex-end;gap:8px">
            <button class="btn" onclick="clearInvClient()">Clear</button>
            <button class="btn btn-blue" onclick="openPOPicker()">From PO</button>
          </div>
        </div>
        <div id="inv-client-pill" style="margin-top:8px"></div>
      </div>

      <!-- JOB DETAILS -->
      <div class="section-header"><span class="section-title">Job Details</span><div class="section-line"></div></div>
      <div class="card">
        <div class="field-row col4">
          <div class="field"><label>Invoice #</label><input id="inv-num" placeholder="FT-001"></div>
          <div class="field"><label>Service Date</label><input id="inv-svc-date" placeholder="MM/DD/YYYY" readonly onclick="openCal(this)" style="cursor:pointer"></div>
          <div class="field"><label>PO Reference #</label><input id="inv-po-ref" placeholder="9998"></div>
          <div class="field"><label>Job Type</label>
            <select id="inv-job-type" onchange="refreshPresets()"><option value="local">Local</option><option value="oot">Out of Town</option></select>
          </div>
        </div>
        <div class="field-row col2">
          <div class="field"><label>Client Name</label><input id="inv-client-name" placeholder="Client name"></div>
          <div class="field"><label>Site / Location</label><input id="inv-site" placeholder=""></div>
        </div>
      </div>

      <!-- TIME ON SITE -->
      <div class="section-header"><span class="section-title">Time on Site</span><div class="section-line"></div></div>
      <div class="card">
        <div class="field-row col2" style="margin-bottom:10px">
          <div class="field"><label>Link Field Report (pulls hours)</label>
            <select id="inv-fr-link" onchange="onInvFRLink()"><option value="">- None -</option></select>
          </div>
        </div>
        <div class="field-row col4">
          <div class="field"><label>Arrival Time</label><input id="inv-arrival" placeholder="" oninput="calcInvHours()"></div>
          <div class="field"><label>Departure Time</label><input id="inv-departure" placeholder="" oninput="calcInvHours()"></div>
          <div class="field"><label>Date</label><input id="inv-tos-date" placeholder="MM/DD/YYYY" readonly onclick="openCal(this)" style="cursor:pointer"></div>
          <div class="field">
            <label>Calculated Hours</label>
            <div id="inv-hours-display" style="font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--g3);background:var(--k3);border:1px solid var(--k5);border-radius:3px;padding:7px 12px">- hrs</div>
          </div>
        </div>
      </div>

      <!-- MILEAGE CALCULATOR -->
      <div class="section-header"><span class="section-title">Mileage Calculator</span><div class="section-line"></div></div>
      <div class="card">
        <div class="field-row col4">
          <div class="field"><label>Miles (one way)</label><input id="inv-miles-ow" type="number" placeholder="130" oninput="calcInvMileage()"></div>
          <div class="field"><label>Round Trip Miles</label><input id="inv-miles-rt" type="number" readonly style="opacity:.4"></div>
          <div class="field"><label>IRS Rate ($/mi)</label><input id="inv-mi-rate" type="number" step="0.001" readonly style="opacity:.4"></div>
          <div class="field"><label>Mileage Total</label><input id="inv-mi-total" type="number" readonly style="opacity:.4"></div>
        </div>
        <div class="btn-row">
          <button class="btn btn-green" onclick="addMileageFromCalc()">+ Add Mileage Line to Invoice</button>
          <span style="font-size:11px;color:var(--g3)">Adds round-trip mileage as a line item at IRS rate</span>
        </div>
      </div>

      <!-- SERVICE PRESETS -->
      <div class="section-header"><span class="section-title">Service Presets</span><div class="section-line"></div></div>
      <div class="preset-grid" id="preset-grid"></div>

      <!-- LINE ITEMS -->
      <div class="section-header" style="margin-top:8px">
        <span class="section-title">Line Items</span><div class="section-line"></div>
        <span style="font-size:10px;color:var(--g3);margin-left:8px">☰ drag to reorder</span>
      </div>
      <div class="card">
        <div class="li-header" style="grid-template-columns:28px 1fr 2fr 70px 90px 90px 30px">
          <span></span>
          <span class="li-col">Item</span><span class="li-col">Description</span>
          <span class="li-col r">Qty</span><span class="li-col r">Rate</span><span class="li-col r">Amount</span>
          <span></span>
        </div>
        <div id="inv-lines-container"></div>
        <div class="btn-row" style="margin-top:8px">
          <button class="btn" onclick="addTravelFee()">+ Travel Fee</button>
          <button class="btn" onclick="addTravelTimeLine()">+ Travel Time</button>
          <button class="btn" onclick="addCustomLine()">+ Custom</button>
        </div>
        <div class="total-row">
          <span class="total-label">Invoice Total</span>
          <span class="total-val" id="inv-total-val">$0.00</span>
        </div>
      </div>

      <!-- NOTES -->
      <div class="section-header"><span class="section-title">Notes</span><div class="section-line"></div></div>
      <textarea id="inv-notes" placeholder="Work completed per PO #9998&#10;Notes are preserved exactly as typed - each line stays on its own line."></textarea>
      <div id="inv-preview-area"></div>
    </div>

    <div class="pane" id="pane-rates_presets">
      <div class="section-header"><span class="section-title">Rates</span><div class="section-line"></div></div>
      <div class="card">
        <div class="field-row col3">
          <div class="field"><label>IRS Mileage Rate ($/mi)</label><input id="cfg-mi" type="number" step="0.001"></div>
          <div class="field"><label>Travel Fee ($)</label><input id="cfg-tf" type="number" step="1"></div>
          <div class="field"><label>Travel Fee Description</label><input id="cfg-td"></div>
        </div>
      </div>
      <div class="section-header"><span class="section-title">Service Presets</span><div class="section-line"></div></div>
      <div id="preset-editor"></div>
      <div class="btn-row" style="margin-top:8px">
        <button class="btn" onclick="addPreset('local')">+ Add Local Preset</button>
        <button class="btn" onclick="addPreset('oot')">+ Add OOT Preset</button>
        <button class="btn btn-primary" onclick="saveRates()">Save Configuration</button>
        <span class="status-msg" id="cfg-status"></span>
      </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════════════════
         FIELD REPORTS
    ══════════════════════════════════════════════════════════════════════════ -->
    <!-- FR DASHBOARD -->
    <div class="pane" id="pane-fr_dash">
      <div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px">
        <div id="fr-company-lbl" style="font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;letter-spacing:.06em;color:var(--gld);line-height:1">SDMC</div>
        <div style="font-size:11px;color:var(--g2)">Field Reports Overview</div>
      </div>
      <div class="stat-grid g4c" id="fr-dash-stats"></div>
      <div class="dash-panels" id="fr-dash-panels-1"></div>
      <div class="dash-panels" id="fr-dash-panels-2"></div>
    </div>

    <div class="pane" id="pane-fr_log">
      <div class="dd-page-company" style="font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;letter-spacing:.06em;color:var(--gld);line-height:1;margin-bottom:18px">SDMC</div>
            <div class="btn-row" style="margin-bottom:16px;flex-wrap:wrap;gap:8px">
        <input id="fr-search" placeholder="Search reports..." style="width:100%;max-width:280px;min-width:0" oninput="renderFRLog()">
        <select id="fr-type-filter" style="max-width:160px;min-width:0;flex:1" onchange="renderFRLog()">
          <option value="">All Types</option><option>PM</option><option>Repair</option><option>Inspection</option><option>Calibration</option><option>Other</option>
        </select>
        <button class="btn btn-primary" onclick="showPane('fr_new','fieldreports')" style="margin-left:auto">+ New Report</button>
        <button class="btn" onclick="showPane('sc_add','clients')">+ Sub Client</button>
      </div>
      <div class="stat-grid g3c" id="fr-stat-cards"></div>
      <div class="section-header"><span class="section-title">Field Reports</span><div class="section-line"></div></div>
      <div id="fr-log-container"></div>
    </div>

    <div class="pane" id="pane-fr_new">
      <div id="fr-suggest-banner"></div>
      <div class="section-header"><span class="section-title">Report Details</span><div class="section-line"></div></div>
      <div class="card">
        <div class="field-row col4">
          <div class="field"><label>Report #</label><input id="fr-num" placeholder=""></div>
          <div class="field"><label>Date</label><input id="fr-date" placeholder="" readonly onclick="openCal(this)" style="cursor:pointer"></div>
          <div class="field"><label>Type</label>
            <select id="fr-type"><option>PM</option><option>Repair</option><option>Inspection</option><option>Calibration</option><option>Other</option></select>
          </div>
          <div class="field"><label>Technician</label><input id="fr-tech" placeholder=""></div>
        </div>
        <div class="field-row col2">
          <div class="field"><label>Result</label>
            <select id="fr-result"><option value="">- Select result -</option><option>Resolved</option><option>Return Needed</option><option>Cannot Fix</option></select>
          </div>
          <div class="field"><label>Report Status</label>
            <select id="fr-status-sel"><option>Complete</option><option>Draft</option><option>Pending Review</option></select>
          </div>
        </div>
      </div>
      <div class="section-header"><span class="section-title">Client &amp; Site</span><div class="section-line"></div></div>
      <div class="card">
        <div class="field-row col2">
          <div class="field"><label>Parent Client</label>
            <select id="fr-parent-client" onchange="onFRParentChange()"><option value="">- Select parent client -</option></select>
          </div>
          <div class="field"><label>Sub-Client / Site</label>
            <select id="fr-sub-client" onchange="onFRSubClientChange()"><option value="">- Select sub-client -</option></select>
          </div>
        </div>
        <div class="field-row col2">
          <div class="field"><label>Site Address</label><input id="fr-site-addr" placeholder=""></div>
          <div class="field"><label>Site Contact</label><input id="fr-site-contact" placeholder=""></div>
        </div>
      </div>
      <div class="section-header"><span class="section-title">Time Tracking</span><div class="section-line"></div></div>
      <div class="card">
        <div style="font-size:12px;color:var(--g3);margin-bottom:12px">Log arrival and departure for each day on site. For multi-day jobs click <b style="color:var(--gld)">+ Add Day</b>.</div>
        <div id="fr-days-container"></div>
        <div style="display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap">
          <button class="btn btn-primary" onclick="addFRDay()">+ Add Day</button>
          <div style="flex:1;background:var(--k4);border:1px solid var(--ln2);border-radius:5px;padding:10px 16px;display:flex;gap:24px">
            <div style="text-align:center"><div style="font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g3);margin-bottom:4px">Total Time</div><div style="font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:900;color:var(--grn)" id="fr-total-hhmm">0h 00m</div></div>
            <div style="text-align:center"><div style="font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g3);margin-bottom:4px">Decimal Hours</div><div style="font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:900;color:var(--grn)" id="fr-total-decimal">0.00 hrs</div></div>
            <div style="text-align:center"><div style="font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g3);margin-bottom:4px">Days on Site</div><div style="font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:900;color:var(--grn)" id="fr-days-count">0</div></div>
          </div>
        </div>
      </div>
      <div class="section-header"><span class="section-title">Machine Specifications</span><div class="section-line"></div></div>
      <div class="card">
        <div class="field-row col3">
          <div class="field"><label>Machine Model</label><input id="fr-machine" placeholder=""></div>
          <div class="field"><label>Controller Type</label><input id="fr-controller" placeholder=""></div>
          <div class="field"><label>Serial #</label><input id="fr-serial" placeholder=""></div>
        </div>
        <div class="field-row col3">
          <div class="field"><label>Number of Axes</label>
            <select id="fr-axes">
              <option value="">- Select -</option>
              <option>3-Axis</option><option>4-Axis</option><option>5-Axis</option><option>6-Axis</option><option>Other</option>
            </select>
          </div>
          <div class="field"><label>Number of Spindles</label>
            <select id="fr-spindles">
              <option value="">- Select -</option>
              <option>1 Spindle</option><option>2 Spindles</option><option>3 Spindles</option><option>4+ Spindles</option>
            </select>
          </div>
          <div class="field"><label>Table Type</label>
            <select id="fr-table-type">
              <option value="">- Select -</option>
              <option>Single Table</option><option>Twin Table</option><option>Rotary Table</option><option>Other</option>
            </select>
          </div>
          <div class="field"><label>Table Length</label><input id="fr-table-length" placeholder="" type="number" step="0.1"></div>
          <div class="field"><label>Table Width</label><input id="fr-table-width" placeholder="" type="number" step="0.1"></div>
        </div>
        <div class="field-row col3">
          <div class="field"><label>Travel Units</label>
            <select id="fr-travel-units">
              <option>Inches</option><option>Millimeters</option>
            </select>
          </div>
          <input id="fr-xyz" type="hidden">
        </div>
        <div style="margin-top:2px">
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
            <label style="font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g3)">Axis Travel</label>
            <button type="button" class="btn" style="padding:3px 10px;font-size:10px" onclick="addFRAxis()">+ Add Axis</button>
          </div>
          <div id="fr-axis-container" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px"></div>
        </div>
      </div>
      <div class="section-header"><span class="section-title">Work Performed</span><div class="section-line"></div></div>
      <div class="card">
        <div class="field" style="margin-bottom:10px"><label>Work Summary</label>
          <textarea id="fr-work" style="min-height:90px" placeholder=""></textarea>
        </div>
        <div class="field-row col2">
          <div class="field"><label>Parts Used</label><textarea id="fr-parts" placeholder=""></textarea></div>
          <div class="field"><label>Additional Notes</label><textarea id="fr-recs" placeholder=""></textarea></div>
        </div>
      </div>
      <div class="section-header"><span class="section-title">Photos</span><div class="section-line"></div></div>
      <div class="card">
        <div style="font-size:12px;color:var(--g3);margin-bottom:10px">Click <b style="color:var(--gld)">Add Photo</b> or drag &amp; drop images below. Click any photo to label it.</div>
        <div class="photo-grid" id="fr-photo-grid">
          <div class="photo-add" onclick="document.getElementById('fr-photo-input').click()">
            <span class="photo-add-icon">+</span><span>Add Photo</span>
          </div>
        </div>
        <input type="file" id="fr-photo-input" accept="image/*" multiple style="display:none" onchange="addFRPhotos(this)">
        <div id="fr-drop-zone" style="margin-top:10px;border:1.5px dashed var(--g2);border-radius:5px;padding:12px;text-align:center;font-size:11px;color:var(--g3);transition:all .15s">Or drag &amp; drop images here</div>
      </div>
      <div class="section-header"><span class="section-title">Linked Documents</span><div class="section-line"></div></div>
      <div class="card">
        <div class="field-row col2">
          <div class="field"><label>Linked PO</label><select id="fr-linked-po"><option value="">- None -</option></select></div>
          <div class="field"><label>Linked Invoice</label><select id="fr-linked-inv"><option value="">- None -</option></select></div>
        </div>
        <div style="font-size:11px;color:var(--g3)">DirectDrive auto-suggests PO links based on sub-client site and service date match.</div>
      </div>
      <div class="section-header"><span class="section-title">Internal Notes</span><div class="section-line"></div></div>
      <div class="card">
        <textarea id="fr-notes" placeholder=""></textarea>
      </div>
    </div>

    <!-- ═══════════════════════════════════════════════════ CLIENTS DIR -->
    <div class="pane" id="pane-clients_dir">
      <div class="dd-page-company" style="font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;letter-spacing:.06em;color:var(--gld);line-height:1;margin-bottom:18px">SDMC</div>
            <div class="btn-row" style="margin-bottom:16px;flex-wrap:wrap;gap:8px">
        <input id="cl-search" placeholder="Search clients..." style="width:100%;max-width:240px;min-width:0" oninput="buildClientsDir()">
        <select id="cl-status-filter" style="max-width:150px;min-width:0;flex:1" onchange="buildClientsDir()">
          <option value="">All Status</option><option>Active</option><option>Inactive</option><option>Prospect</option>
        </select>
        <div style="margin-left:auto;display:flex;gap:8px">
          <button class="btn btn-primary" onclick="showPane('client_add','clients')">+ Add Client</button>
          <button class="btn" onclick="showPane('sc_add','clients')">+ Sub-Client</button>
        </div>
      </div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:0;height:calc(100vh - 180px);min-height:400px">
        <!-- LEFT: Parent Clients -->
        <div style="overflow-y:auto;padding-right:16px;border-right:1px solid var(--ln)">
          <div style="font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--g3);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--ln)">Parent Clients</div>
          <div id="cl-list-container"></div>
        </div>
        <!-- RIGHT: Sub-Clients for selected parent -->
        <div style="overflow-y:auto;padding-left:16px">
          <div style="font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--g3);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--ln)" id="sc-col-header">Sub-Clients</div>
          <div id="sc-col-container"><div class="empty-state" style="margin-top:40px">Select a parent client<br>to view sub-clients</div></div>
        </div>
      </div>
    </div>

    <!-- ADD CLIENT -->
    <div class="pane" id="pane-client_add">
      <div class="section-header"><span class="section-title">Client Information</span><div class="section-line"></div></div>
      <div class="card">
        <div class="field-row col3">
          <div class="field"><label>Company Name</label><input id="cl-company"></div>
          <div class="field"><label>Status</label>
            <select id="cl-status"><option>Active</option><option>Inactive</option><option>Prospect</option></select>
          </div>
          <div class="field"><label>Industry</label><input id="cl-industry"></div>
        </div>
        <div class="field-row col3">
          <div class="field"><label>Contact Name</label><input id="cl-contact"></div>
          <div class="field"><label>Phone</label><input id="cl-phone"></div>
          <div class="field"><label>Email</label><input id="cl-email"></div>
        </div>
      </div>
      <div class="section-header"><span class="section-title">Address &amp; Account</span><div class="section-line"></div></div>
      <div class="card">
        <div class="field-row col2">
          <div class="field"><label>Street Address</label><input id="cl-addr"></div>
          <div class="field"><label>City, State, ZIP</label><input id="cl-city"></div>
        </div>
        <div class="field-row col3" style="margin-top:10px">
          <div class="field"><label>Terms</label>
            <select id="cl-terms"><option>Per Contract</option><option>Net 15</option><option>Net 30</option><option>Due on Receipt</option></select>
          </div>
          <div class="field"><label>Account #</label><input id="cl-acct"></div>
          <div class="field"><label>Rate Type</label>
            <select id="cl-rate-type"><option>Standard Local</option><option>Standard OOT</option><option>Custom</option></select>
          </div>
        </div>
        <div class="field" style="margin-top:10px"><label>Internal Notes</label><textarea id="cl-notes" placeholder=""></textarea></div>
      </div>
      <div class="btn-row" style="margin-top:6px">
        <button class="btn btn-primary" style="min-width:140px" onclick="saveClient()">Save Client</button>
        <button class="btn" onclick="showPane('clients_dir','clients')">Cancel</button>
        <button class="btn btn-danger" id="cl-discard-btn" style="display:none" onclick="discardClient()">Discard Changes</button>
        <span class="status-msg" id="cl-status-msg"></span>
      </div>
    </div>

    <!-- ADD SUB-CLIENT -->
    <div class="pane" id="pane-sc_add">
      <div class="section-header"><span class="section-title">Sub-Client Information</span><div class="section-line"></div></div>
      <div class="card">
        <div class="field-row col3">
          <div class="field"><label>Sub-Client Name</label><input id="sc-name" placeholder=""></div>
          <div class="field"><label>Parent Client</label><select id="sc-parent-sel"><option value="">- Select parent -</option></select></div>
          <div class="field"><label>Industry / Type</label><input id="sc-industry" placeholder=""></div>
        </div>
        <div class="field-row col3">
          <div class="field"><label>Contact</label><input id="sc-contact"></div>
          <div class="field"><label>Phone</label><input id="sc-phone"></div>
          <div class="field"><label>Email</label><input id="sc-email"></div>
        </div>
      </div>
      <div class="section-header"><span class="section-title">Location</span><div class="section-line"></div></div>
      <div class="card">
        <div class="field-row col2">
          <div class="field"><label>Street Address</label><input id="sc-addr" placeholder=""></div>
          <div class="field"><label>City, State, ZIP</label><input id="sc-city" placeholder=""></div>
        </div>
      </div>
      <div class="section-header"><span class="section-title">Machines on Site</span><div class="section-line"></div></div>
      <div class="card">
        <div id="sc-machines-container"></div>
        <button class="btn" onclick="addSCMachine()" style="margin-top:6px">+ Add Machine</button>
      </div>
      <div class="card">
        <div class="field"><label>Internal Notes</label><textarea id="sc-notes" placeholder=""></textarea></div>
      </div>
      <div class="btn-row" style="margin-top:6px">
        <button class="btn btn-primary" style="min-width:140px" onclick="saveSC()">Save Sub-Client</button>
        <button class="btn" onclick="showPane('clients_dir','clients')">Cancel</button>
        <button class="btn btn-danger" id="sc-discard-btn" style="display:none" onclick="discardSC()">Discard Changes</button>
        <span class="status-msg" id="sc-status-msg"></span>
      </div>
    </div>

    <div class="pane" id="pane-folder_structure">
      <div class="section-header"><span class="section-title">Document Root Path</span><div class="section-line"></div></div>
      <div class="card">
        <div class="field-row col2">
          <div class="field"><label>Root Directory</label><input id="root-path" placeholder="C:\Users\Ben\Documents\SDMC"></div>
          <div class="field"><label>Folder Naming</label>
            <select id="folder-naming"><option value="company">Company Name</option><option value="id">ID - Company</option></select>
          </div>
        </div>
        <button class="btn btn-primary" onclick="saveRootPath()" style="margin-top:4px">Save Path</button>
        <span class="status-msg" id="folder-status" style="margin-left:12px"></span>
      </div>
      <div class="section-header"><span class="section-title">Client Folder Structure</span><div class="section-line"></div></div>
      <div id="folder-list-container"></div>
    </div>

  </div><!-- /content-area -->
</div><!-- /body-layout -->

<!-- ── Global action bar ──────────────────────────────────────────────────────
     Sits BELOW .body-layout in the #app flex column on desktop - takes real
     layout space so no content is ever obscured. On mobile (<=768px) CSS
     switches it to position:fixed. JS in showPane() drives display.         -->
<div id="form-action-bar-container">
  <!-- Field Report bar -->
  <div id="form-bar-fr" class="form-bar-inner">
    <button class="btn btn-icon form-exit-btn" id="fr-discard-btn" onclick="discardFR()" title="Cancel">&times;</button>
    <button class="btn btn-primary" style="min-width:140px" onclick="saveFR()">Save Report</button>
    <button class="btn" onclick="clearFRForm()">Clear</button>
    <span class="status-msg" id="fr-status-msg"></span>
  </div>
  <!-- Invoice bar -->
  <div id="form-bar-inv" class="form-bar-inner" style="flex-wrap:wrap">
    <button class="btn btn-icon form-exit-btn" id="inv-discard-btn" onclick="discardInvoice()" title="Cancel">&times;</button>
    <button class="btn btn-primary btn-xl" style="flex:2;min-width:160px" onclick="previewInvoice()">Preview Invoice</button>
    <button class="btn btn-blue btn-xl" style="flex:1;min-width:130px" id="inv-draft-btn" onclick="saveDraftInvoice()">Save Draft</button>
    <span class="status-msg" id="inv-status-msg" style="width:100%;text-align:center;padding-bottom:2px"></span>
  </div>
</div>

</div><!-- /app -->

<!-- MODAL -->
<div class="modal-overlay" id="modal-overlay" style="display:none" onclick="if(event.target===this)closeModal()">
  <div class="modal-box" id="modal-box">
    <div class="modal-head">
      <span class="modal-title" id="modal-title">Title</span>
      <button class="btn btn-icon btn-danger" onclick="closeModal()">✕</button>
    </div>
    <div id="modal-tab-bar" style="display:none" class="modal-tabs-bar"></div>
    <div class="modal-body" id="modal-body"></div>
    <div class="modal-footer" id="modal-footer"></div>
  </div>
</div>

<script>
// ══════════════════════════════════════════════════════════════════════════════
// DATA LAYER - localStorage persistence
// ══════════════════════════════════════════════════════════════════════════════
// ══════════════════════════════════════════════════════════════════════════════
// SUPABASE - Auth & Database
// ══════════════════════════════════════════════════════════════════════════════
// ── DEV MODE ─────────────────────────────────────────────────────────────────
// Tap the "DirectDrive" logo on the login screen 3 times within 1.5 s to
// enter dev mode. All Supabase reads/writes are skipped - useful for testing
// UI and flows without a real account or network.
var _devMode = false;
var _devTapCount = 0, _devTapTimer = null;
function devModeTap(){
  _devTapCount++;
  clearTimeout(_devTapTimer);
  const logo   = document.getElementById('login-logo-tap');
  const divs   = logo ? logo.querySelectorAll('div') : [];
  const titleEl = divs[0], subEl = divs[1];
  // Flash + show ● dot progress so taps are clearly visible
  if(logo){ logo.style.opacity='.7'; setTimeout(()=>{ logo.style.opacity='1'; }, 120); }
  const dots = '● '.repeat(_devTapCount) + '○ '.repeat(3-_devTapCount);
  if(subEl) subEl.textContent = dots.trim();
  if(_devTapCount >= 3){ _devTapCount=0; enterDevMode(); return; }
  _devTapTimer = setTimeout(()=>{
    _devTapCount=0;
    if(subEl) subEl.textContent='SDMC · Field Service Management';
  }, 2000);
}
function enterDevMode(){
  _devMode = true;
  const logo   = document.getElementById('login-logo-tap');
  const divs   = logo ? logo.querySelectorAll('div') : [];
  if(divs[0]) divs[0].style.color = '#a855f7'; // turn "DirectDrive" purple
  if(divs[1]) divs[1].textContent = '● ● ● DEV MODE';
  setTimeout(()=>{ onLogin({id:'dev_local', email:'dev@local'}); }, 350);
}

// 5-tap on the dashboard company label - enters dev mode while already logged in
var _dashDevTapCount = 0, _dashDevTapTimer = null;
function dashDevTap(){
  if(_devMode) return;
  _dashDevTapCount++;
  clearTimeout(_dashDevTapTimer);
  if(_dashDevTapCount >= 5){
    _dashDevTapCount = 0;
    _devMode = true;
    DB = defaultDB();
    const badge = document.getElementById('dev-badge');
    if(badge) badge.style.display = '';
    const df = document.getElementById('drawer-profile');
    if(df) df.textContent = 'Dev Mode · Local Data';
    const lbl = document.getElementById('dash-company-lbl');
    if(lbl){ lbl.textContent = '● DEV MODE ●'; lbl.style.color = '#a855f7'; }
    setTimeout(()=>{
      if(lbl){ lbl.textContent = DB.config.company||'SDMC'; lbl.style.color = ''; }
      switchMain('dashboard');
      updateBadges();
    }, 800);
    return;
  }
  _dashDevTapTimer = setTimeout(()=>{ _dashDevTapCount = 0; }, 2000);
}

const SUPA_URL = 'https://oytelvnwkjhpwjfvxjyr.supabase.co';
const SUPA_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im95dGVsdm53a2pocHdqZnZ4anlyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzY0Njk2OTksImV4cCI6MjA5MjA0NTY5OX0.3KNzPTnIT3SJscQ0YEQEeX_-2U3SmIgqFP3whl-e4bY';
const supa = supabase.createClient(SUPA_URL, SUPA_KEY);
var _supaUserId = null;

// Login / auth functions
async function loginSubmit(){
  const email = document.getElementById('login-email').value.trim();
  const pw    = document.getElementById('login-pw').value;
  const msg   = document.getElementById('login-msg');
  const btn   = document.getElementById('login-btn');
  const form  = document.getElementById('login-form');
  const loading = document.getElementById('login-loading');
  if(!email||!pw){ showLoginMsg('Please enter your email and password.','#ef4444'); return; }
  form.style.display='none'; loading.style.display='';
  const { data, error } = await supa.auth.signInWithPassword({ email, password:pw });
  if(error){
    loading.style.display='none'; form.style.display='';
    showLoginMsg(error.message,'#ef4444');
    return;
  }
  await onLogin(data.user);
}

function showLoginMsg(text, color){
  const el=document.getElementById('login-msg');
  el.textContent=text; el.style.display=''; el.style.background=color==='#ef4444'?'rgba(239,68,68,.12)':'rgba(34,197,94,.12)';
  el.style.color=color; el.style.border='1px solid '+color+'44';
}

async function onLogin(user){
  _supaUserId = user.id;
  document.getElementById('login-overlay').style.display='none';
  document.getElementById('app-topnav').style.display='flex';
  document.getElementById('app-body').style.display='flex';

  // Show skeleton on dashboard immediately while data loads
  showDashboardSkeleton();

  // Show DEV badge if in dev mode
  if(_devMode){
    const badge = document.getElementById('dev-badge');
    if(badge) badge.style.display='';
    // Use defaultDB - no Supabase, no cache
    DB = defaultDB();
    const dlbl=document.getElementById('dash-company-lbl');
    if(dlbl) dlbl.textContent=DB.config.company||'SDMC';
    const df=document.getElementById('drawer-profile');
    if(df) df.textContent='Dev Mode · Local Data';
    switchMain('dashboard');
    updateBadges();
    return; // ← skip all Supabase calls
  }

  // ── Load from cache first for instant render ──────────────────────────────
  const cacheKey = 'dd_cache_' + user.id;
  try{
    const cached = localStorage.getItem(cacheKey);
    if(cached){
      const parsed = JSON.parse(cached);
      Object.assign(DB, parsed);
      const dlbl=document.getElementById('dash-company-lbl');
      if(dlbl) dlbl.textContent=DB.config.company||'SDMC';
      const df=document.getElementById('drawer-profile');
  if(df) df.textContent=formatDrawerProfile();
      switchMain('dashboard');
      updateBadges();
    }
  }catch(e){}

  // ── Then fetch fresh from Supabase in background ──────────────────────────
  await loadDBFromSupabase();
  // Save to cache for next visit
  try{ localStorage.setItem(cacheKey, JSON.stringify({
    config:DB.config, clients:DB.clients, sub_clients:DB.sub_clients,
    pos:DB.pos, invoices:DB.invoices, expenses:DB.expenses,
    field_reports:DB.field_reports, categories:DB.categories, presets:DB.presets
  })); }catch(e){}

  // Apply profile + refresh UI with fresh data
  const dlbl=document.getElementById('dash-company-lbl');
  if(dlbl) dlbl.textContent=DB.config.company||'SDMC';
  const df=document.getElementById('drawer-profile');
  if(df) df.textContent=formatDrawerProfile();
  // Update all page company labels
  document.querySelectorAll('.dd-page-company,[id$="-company-lbl"]').forEach(el=>el.textContent=DB.config.company||'SDMC');
  switchMain('dashboard');
  updateBadges();
}

async function signOut(){
  if(_devMode){ location.reload(); return; } // dev mode - just reload
  try{ localStorage.removeItem('dd_cache_' + _supaUserId); }catch(e){}
  await supa.auth.signOut();
  location.reload();
}

// ── DEV MODE via URL hash ─────────────────────────────────────────────────────
// Open the file with #dev in the URL (e.g. DirectDrive_54.html#dev) to bypass
// Supabase entirely. Works even when already logged in via a saved session.
if(location.hash === '#dev'){
  history.replaceState(null, '', location.pathname + location.search); // clean URL
  _devMode = true;
  onLogin({id:'dev_local', email:'dev@local'});
} else {
  // Check existing session on page load
  supa.auth.getSession().then(async ({ data }) => {
    if(data?.session?.user){
      await onLogin(data.session.user);
    }
  });
}

// ── SUPABASE DATA LAYER ──────────────────────────────────────────────────────
var DB = defaultDB(); // start with defaults, overwrite after load

// Deduplicate rows coming from Supabase.  Each row is {id, data}.
// If multiple rows share the same id (from past bad upserts), keep the last
// one and delete the extras from Supabase so they never come back.
async function _dedupeRows(table, rows, uid){
  if(!rows || !rows.length) return [];
  const seen = {}, dupeIds = [];
  rows.forEach(r=>{ if(seen[r.id] !== undefined) dupeIds.push(r.id); seen[r.id]=r.data; });
  if(dupeIds.length){
    console.warn('[DD] Deduplicating '+table+': '+dupeIds.length+' duplicate id(s) - cleaning up');
    try{
      // Delete every row for this user then re-insert the clean set
      await supa.from(table).delete().eq('user_id',uid);
      const clean = Object.entries(seen).map(([id,data])=>({id,user_id:uid,data}));
      if(clean.length) await supa.from(table).insert(clean);
    }catch(e){ console.warn('[DD] Dedup cleanup failed for '+table,e); }
  }
  return Object.values(seen);
}

async function loadDBFromSupabase(){
  const uid = _supaUserId;
  if(!uid) return;

  try{
    // Load all tables in parallel
    const [cfg, clients, scs, pos, invoices, expenses, frs, cats, presets] = await Promise.all([
      supa.from('dd_config').select('data').eq('user_id',uid).single(),
      supa.from('dd_clients').select('id,data').eq('user_id',uid),
      supa.from('dd_sub_clients').select('id,data').eq('user_id',uid),
      supa.from('dd_pos').select('id,data').eq('user_id',uid),
      supa.from('dd_invoices').select('id,data').eq('user_id',uid),
      supa.from('dd_expenses').select('id,data').eq('user_id',uid),
      supa.from('dd_field_reports').select('id,data').eq('user_id',uid),
      supa.from('dd_categories').select('id,data').eq('user_id',uid),
      supa.from('dd_presets').select('id,data').eq('user_id',uid),
    ]);

    const def = defaultDB();

    DB.config      = cfg.data?.data || def.config;
    // Deduplicate each table - silently fixes any rows that were double-inserted
    DB.clients     = await _dedupeRows('dd_clients',       clients.data, uid);
    DB.sub_clients = await _dedupeRows('dd_sub_clients',   scs.data,     uid);
    DB.pos         = await _dedupeRows('dd_pos',           pos.data,     uid);
    DB.invoices    = await _dedupeRows('dd_invoices',      invoices.data,uid);
    DB.expenses    = await _dedupeRows('dd_expenses',      expenses.data,uid);
    DB.field_reports = await _dedupeRows('dd_field_reports', frs.data,   uid);
    DB.categories  = (cats.data?.length    ? await _dedupeRows('dd_categories',cats.data,uid)    : null) || def.categories;
    DB.presets     = (presets.data?.length ? await _dedupeRows('dd_presets',presets.data,uid)    : null) || def.presets;

    // Seed categories/presets to Supabase if missing
    if(!cats.data?.length && DB.categories.length){
      DB.categories.forEach(r=>supa.from('dd_categories').upsert({id:r.id,user_id:uid,data:r},{onConflict:'id,user_id'}));
    }
    if(!presets.data?.length && DB.presets.length){
      DB.presets.forEach(r=>supa.from('dd_presets').upsert({id:r.id,user_id:uid,data:r},{onConflict:'id,user_id'}));
    }

    // Restore sequences
    DB.cat_id_seq    = Math.max(...DB.categories.map(c=>c.id||0), 20) + 1;
    DB.preset_id_seq = Math.max(...DB.presets.map(p=>p.id||0), 6) + 1;

    console.log('✓ DB loaded from Supabase');
  } catch(e) {
    console.warn('Supabase load error, using defaults:', e);
  }
}

// saveDB - upserts changed records to Supabase
var _saveTimer = null;
async function saveDBNow(){
  if(!_supaUserId || _devMode) return true; // skip all writes in dev mode
  try{
    const uid = _supaUserId;
    // Batch each table as a single upsert (one request per table)
    const results=await Promise.all([
      supa.from('dd_config').upsert({ user_id:uid, data:DB.config }, {onConflict:'user_id'}),
      DB.clients.length     ? supa.from('dd_clients').upsert(DB.clients.map(r=>({id:r.id,user_id:uid,data:r})),{onConflict:'id'}) : null,
      DB.sub_clients.length ? supa.from('dd_sub_clients').upsert(DB.sub_clients.map(r=>({id:r.id,user_id:uid,data:r})),{onConflict:'id'}) : null,
      DB.pos.length         ? supa.from('dd_pos').upsert(DB.pos.map(r=>({id:r.id,user_id:uid,data:r})),{onConflict:'id'}) : null,
      DB.invoices.length    ? supa.from('dd_invoices').upsert(DB.invoices.map(r=>({id:r.id,user_id:uid,data:r})),{onConflict:'id'}) : null,
      DB.expenses.length    ? supa.from('dd_expenses').upsert(DB.expenses.map(r=>({id:r.id,user_id:uid,data:r})),{onConflict:'id'}) : null,
      DB.field_reports.length ? supa.from('dd_field_reports').upsert(DB.field_reports.map(r=>({id:r.id,user_id:uid,data:r})),{onConflict:'id'}) : null,
      DB.categories.length  ? supa.from('dd_categories').upsert(DB.categories.map(r=>({id:r.id,user_id:uid,data:r})),{onConflict:'id,user_id'}) : null,
      DB.presets.length     ? supa.from('dd_presets').upsert(DB.presets.map(r=>({id:r.id,user_id:uid,data:r})),{onConflict:'id,user_id'}) : null,
    ].filter(Boolean));
    const failed=results.find(r=>r?.error);
    if(failed) throw failed.error;
    // Keep localStorage cache in sync so the next page load shows current data
    try{ localStorage.setItem('dd_cache_'+uid, JSON.stringify({
      config:DB.config, clients:DB.clients, sub_clients:DB.sub_clients,
      pos:DB.pos, invoices:DB.invoices, expenses:DB.expenses,
      field_reports:DB.field_reports, categories:DB.categories, presets:DB.presets
    })); }catch(e){}
    const badge=document.getElementById('save-badge');
    if(badge){badge.textContent='Saved ✓';badge.style.color='var(--grn)';setTimeout(()=>{badge.textContent='Auto-saved';badge.style.color='';},2000);}
    return true;
  } catch(e) {
    console.warn('Supabase save error:', e);
    const badge=document.getElementById('save-badge');
    if(badge){badge.textContent='Save failed';badge.style.color='var(--red)';}
    return false;
  }
}
function saveDB(){
  clearTimeout(_saveTimer);
  _saveTimer = setTimeout(async ()=>{
    await saveDBNow();
  }, 1200);
}

// Hard-delete helpers (for when records are removed from DB arrays)
async function dbDelete(table, id){
  if(!_supaUserId || _devMode) return; // skip in dev mode
  await supa.from(table).delete().eq('id',id).eq('user_id',_supaUserId);
}

const STORE_KEY = 'biztool_sdmc_v1'; // kept for widget order (non-sensitive UI prefs)


function defaultDB(){
  return {
    config:{
      irs_mileage:0.725, travel_fee:1000,
      travel_fee_desc:'Round trip travel fee, per visit',
      docs_root:'C:\\Users\\Ben\\Documents\\SDMC',
      inv_prefix:'FT', last_inv_num:2,
      technician:'Benjamin Garcia', role:'Machine Technician', company:'SDMC',
    },
    categories:[
      {id:1,name:'Domain & Hosting',group:'Operations'},{id:2,name:'Document Filing & Legal',group:'Operations'},
      {id:3,name:'Business Insurance',group:'Operations'},{id:4,name:'Accounting & Tax Prep',group:'Operations'},
      {id:5,name:'Office Supplies',group:'Operations'},{id:6,name:'LLC Fees & State Filings',group:'Operations'},
      {id:7,name:'Business Licenses & Permits',group:'Operations'},{id:8,name:'Fuel',group:'Vehicle'},
      {id:9,name:'Vehicle Maintenance',group:'Vehicle'},{id:10,name:'Parking & Tolls',group:'Vehicle'},
      {id:11,name:'Rental Car',group:'Vehicle'},{id:12,name:'Tools & Equipment',group:'Tools'},
      {id:13,name:'Safety Equipment',group:'Tools'},{id:14,name:'Parts & Materials',group:'Tools'},
      {id:15,name:'Software & Subscriptions',group:'Services'},{id:16,name:'Phone & Internet',group:'Services'},
      {id:17,name:'Training & Certifications',group:'Services'},{id:18,name:'Marketing & Advertising',group:'Services'},
      {id:19,name:'Meals & Entertainment',group:'Other'},{id:20,name:'Other',group:'Other'},
    ],
    presets:[
      {id:1,type:'local',name:'3-Axis PM',desc:'On-site PM / Head Alignment / Pack & Prep',rate:600,tag:'Flat Rate'},
      {id:2,type:'local',name:'5-Axis PM',desc:'On-site PM / Head Alignment / Pack & Prep',rate:750,tag:'Flat Rate'},
      {id:3,type:'local',name:'Hourly',desc:'Troubleshooting / Repairs / Inspections',rate:70,tag:'Per Hour'},
      {id:4,type:'oot',name:'3-Axis PM',desc:'On-site PM / Head Alignment / Pack & Prep',rate:650,tag:'Flat Rate'},
      {id:5,type:'oot',name:'5-Axis PM',desc:'On-site PM / Head Alignment / Pack & Prep',rate:825,tag:'Flat Rate'},
      {id:6,type:'oot',name:'Hourly',desc:'Troubleshooting / Repairs / Inspections',rate:77,tag:'Per Hour'},
    ],
    clients:[{
      id:'s1',company:'CNC Parts Department Inc.',status:'Active',industry:'CNC Manufacturing',
      contact:'Brian Tarpey',phone:'858-922-4967',email:'brian@cncpd.com',
      addr:'4930 Naples Place',city:'San Diego, CA 92110',terms:'Per Contract',acct:'',rateType:'Standard Local',
      notes:'Primary client.',created:'3/27/2026',
      sites:[{name:'Set Acronym - LA',addr:'1306 N San Fernando Rd, Los Angeles, CA 90065'}],
      machines:[{model:'MM Router',type:'3-Axis',serial:'MM-0042'}],pos:[]
    }],
    sub_clients:[{
      id:'sc1',name:'Set Acronym',parentId:'s1',industry:'Manufacturing',
      contact:'On-site Manager',phone:'',email:'',
      addr:'1306 N San Fernando Rd',city:'Los Angeles, CA 90065',
      machines:[{model:'MM Router',type:'3-Axis',serial:'MM-0042'}],
      notes:'Ship-to site for CNC Parts Dept POs.',created:'3/27/2026'
    }],
    pos:[{
      id:'p1',num:'9997',date:'3/27/2026',svcDate:'3/30/2026',status:'Invoiced',
      clientId:'s1',clientName:'CNC Parts Department Inc.',
      site:'Set Acronym - LA',terms:'Per Contract',
      lines:[
        {id:1,item:'Labor',desc:'On-site PM MM Router Service',qty:1,rate:600},
        {id:2,item:'Mileage',desc:'Per mile travel charges',qty:260,rate:0.725}
      ],
      total:788.50,notes:'',attachment:null,attachmentName:null,
      linkedInvoice:'FT-001',created:'3/27/2026'
    }],
    invoices:[{
      id:'i1',num:'FT-001',date:'3/30/2026',po:'9997',
      client:'CNC Parts Department Inc.',subClient:'Set Acronym',site:'Set Acronym - LA',
      total:788.50,miles:260,status:'Sent',
      arrival:'08:00 AM',departure:'05:00 PM',tosDate:'3/30/2026',hoursHHMM:'9h 00m',hoursDecimal:9.0,
      linkedFRId:'fr1',linkedFRNum:'FR-001',
      lines:[
        {item:'Labor',desc:'On-site PM MM Router Service',qty:1,rate:600,amt:600},
        {item:'Mileage',desc:'Round trip · 260 mi @ $0.725/mi',qty:260,rate:0.725,amt:188.50}
      ],
      notes:'Work completed per PO #9997',created:'3/30/2026'
    }],
    expenses:[],
    field_reports:[],
    cat_id_seq:21, preset_id_seq:7, po_line_id_seq:10,
  };
}

function loadDB(){
  try{
    const raw = localStorage.getItem(STORE_KEY);
    if(raw) return JSON.parse(raw);
  }catch(e){}
  return defaultDB();
}

function uid(){return 'id_'+Date.now()+'_'+Math.random().toString(36).slice(2,7)}
function todayStr(){const d=new Date();return String(d.getMonth()+1).padStart(2,'0')+'/'+String(d.getDate()).padStart(2,'0')+'/'+d.getFullYear();}
function fmtMoney(n){return '$'+parseFloat(n||0).toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2});}
function initials(str){return str.split(' ').filter(Boolean).slice(0,2).map(w=>w[0].toUpperCase()).join('');}
function formatDrawerProfile(){
  const name=(DB.config.technician||'Benjamin Garcia').trim();
  const parts=name.split(/\s+/).filter(Boolean);
  const compact=parts.length>1?parts[0]+' '+parts[parts.length-1][0]:name;
  return compact+' - '+(DB.config.company||'SDMC');
}

// ══════════════════════════════════════════════════════════════════════════════
// NAVIGATION
// ══════════════════════════════════════════════════════════════════════════════
var currentMain = 'dashboard';
var currentPane = 'dashboard-main';

function switchMain(main){
  // If user is mid-FR and navigating away, preserve the form - don't reset fr_new
  if(currentPane === 'fr_new' && main !== 'fieldreports'){
    currentMain = main;
    document.querySelectorAll('.nav-tab').forEach(t=>t.classList.toggle('active', t.dataset.main===main));
    document.querySelectorAll('.sidebar').forEach(s=>s.style.display='none');
    const sb = document.getElementById('sb-'+main);
    if(sb) sb.style.display='flex';
    const defaults={dashboard:'dashboard-main',admin:'admin_main',billing:'billing_dash',fieldreports:'fr_log',clients:'clients_dir'};
    showPane(defaults[main]||main+'-main', main);
    updateBadges();
    const pageNames={dashboard:'Dashboard',fieldreports:'Field Reports',billing:'Billing',clients:'Clients',admin:'Administration'};
    const lbl=document.getElementById('active-page-label');
    if(lbl) lbl.textContent=pageNames[main]||main;
    return;
  }
  // If user is mid-invoice and navigating away, preserve the form - don't reset create_invoice
  if(currentPane === 'create_invoice' && main !== 'billing'){
    currentMain = main;
    document.querySelectorAll('.nav-tab').forEach(t=>t.classList.toggle('active', t.dataset.main===main));
    document.querySelectorAll('.sidebar').forEach(s=>s.style.display='none');
    const sb = document.getElementById('sb-'+main);
    if(sb) sb.style.display='flex';
    const defaults={dashboard:'dashboard-main',admin:'admin_main',billing:'billing_dash',fieldreports:'fr_log',clients:'clients_dir'};
    showPane(defaults[main]||main+'-main', main);
    updateBadges();
    const pageNames={dashboard:'Dashboard',fieldreports:'Field Reports',billing:'Billing',clients:'Clients',admin:'Administration'};
    const lbl=document.getElementById('active-page-label');
    if(lbl) lbl.textContent=pageNames[main]||main;
    return;
  }
  currentMain = main;
  document.querySelectorAll('.nav-tab').forEach(t=>t.classList.toggle('active', t.dataset.main===main));
  document.querySelectorAll('.sidebar').forEach(s=>s.style.display='none');
  const sb = document.getElementById('sb-'+main);
  if(sb) sb.style.display='flex';
  const defaults={dashboard:'dashboard-main',admin:'admin_main',billing:'billing_dash',fieldreports:'fr_log',clients:'clients_dir'};
  // When returning to fieldreports while fr_new is in progress, restore it
  if(main === 'fieldreports' && (frEditingId || _frFormDirty())){
    showPane('fr_new', main, true);
    document.querySelectorAll('.nav-tab').forEach(t=>t.classList.toggle('active', t.dataset.main===main));
  // When returning to billing while invoice is in progress, restore it
  } else if(main === 'billing' && (_editInvoiceData !== null || window._currentEditId || _invFormDirty())){
    showPane('create_invoice', main, true);
    document.querySelectorAll('.nav-tab').forEach(t=>t.classList.toggle('active', t.dataset.main===main));
  } else {
    showPane(defaults[main]||main+'-main', main);
  }
  updateBadges();
  const pageNames={dashboard:'Dashboard',fieldreports:'Field Reports',billing:'Billing',clients:'Clients',admin:'Administration'};
  const lbl=document.getElementById('active-page-label');
  if(lbl) lbl.textContent=pageNames[main]||main;
}

// Check if the FR form has any user input worth preserving
function _frFormDirty(){
  if(currentPane !== 'fr_new') return false;
  const num=document.getElementById('fr-num')?.value||'';
  const machine=document.getElementById('fr-machine')?.value||'';
  const work=document.getElementById('fr-work')?.value||'';
  // Dirty if num has been changed beyond default prefix, or any key fields filled
  return (num && num !== 'FR-') || machine || work;
}

// Check if the invoice form has any user input worth preserving
function _invFormDirty(){
  if(currentPane !== 'create_invoice') return false;
  const num=document.getElementById('inv-num')?.value||'';
  const cl=document.getElementById('inv-client-name')?.value||'';
  const dt=document.getElementById('inv-svc-date')?.value||'';
  return !!(num || cl || dt || invLines.length);
}

function showPane(pane, main, skipBuild){
  currentPane = pane;
  main = main||currentMain;
  document.querySelectorAll('.pane').forEach(p=>p.classList.remove('active'));
  const el = document.getElementById('pane-'+pane);
  if(el) el.classList.add('active');
  document.querySelectorAll('.sidebar-item').forEach(i=>i.classList.remove('active'));
  const sb = document.getElementById('sb-'+main);
  if(sb){const match=sb.querySelector('[data-pane="'+pane+'"]');if(match)match.classList.add('active');}

  // ── Global action bar: show the right bar for form panes, hide otherwise ──
  const barContainer = document.getElementById('form-action-bar-container');
  const barFR  = document.getElementById('form-bar-fr');
  const barInv = document.getElementById('form-bar-inv');
  const ca     = document.getElementById('content-area');
  if(barContainer && barFR && barInv){
    if(pane === 'fr_new'){
      barContainer.style.display = 'flex';
      barFR.classList.add('active');  barInv.classList.remove('active');
      ca?.classList.add('has-form-pane');
    } else if(pane === 'create_invoice'){
      barContainer.style.display = 'flex';
      barInv.classList.add('active'); barFR.classList.remove('active');
      ca?.classList.add('has-form-pane');
    } else {
      barContainer.style.display = 'none';
      barFR.classList.remove('active'); barInv.classList.remove('active');
      ca?.classList.remove('has-form-pane');
    }
  }

  // Don't rebuild fr_new if it already has user data in it
  if(pane === 'fr_new' && !skipBuild && _frFormDirty()) return;
  // Don't rebuild create_invoice if it already has user data in it
  if(pane === 'create_invoice' && !skipBuild && _invFormDirty()) return;
  if(!skipBuild) buildPane(pane);
}

function buildPane(pane){
  const builders = {
    'dashboard-main': buildDashboard,
    'pl': buildPLReport,
    'yearend': buildYearEnd,
    'admin_main': buildAdminMain,
    'categories': buildCategories,
    'billing_dash': buildBillingDashboard,
    'po_log': buildPOLog,
    'log_po': buildLogPO,
    'invoice_log': buildInvoiceLog,
    'create_invoice': buildCreateInvoice,
    'rates_presets': buildRatesPresets,
    'fr_dash': buildFRDashboard,
    'fr_log': buildFRLog,
    'fr_new': buildFRNew,
    'clients_dir': buildClientsDir,
    'client_add': buildClientAdd,
    'sc_add': buildSCAdd,
    'folder_structure': buildFolderStructure,
  };
  if(builders[pane]) builders[pane]();
}

function updateBadges(){
  const set=(id,v)=>{const el=document.getElementById(id);if(el)el.textContent=v;};
  set('sc-exp', DB.expenses.length);
  set('sc-po', DB.pos.length);
  set('sc-inv', DB.invoices.length);
  set('sc-fr', DB.field_reports.length);
  set('sc-sc', DB.sub_clients.length);
  set('sc-cl', DB.clients.length);
}

// Date
// ── NAV DATE / GREETING ─────────────────────────────────────────────────────
function updateNavDate(){
  const now = new Date();
  const h = now.getHours();
  const greeting = h < 12 ? 'Good Morning' : h < 17 ? 'Good Afternoon' : h < 21 ? 'Good Evening' : 'Good Night';
  const day = now.toLocaleDateString('en-US',{weekday:'long'});
  const date = now.toLocaleDateString('en-US',{month:'long',day:'numeric',year:'numeric'});
  const time = now.toLocaleTimeString('en-US',{hour:'numeric',minute:'2-digit'});
  const full = `${greeting} - ${day}, ${date} · ${time}`;
  const el = document.getElementById('nav-date');
  if(el) el.textContent = full;
  // Mobile greeting bar (shown below topnav on small screens)
  const mg = document.getElementById('mobile-greeting');
  if(mg) mg.textContent = full;
}
updateNavDate();
setInterval(updateNavDate, 30000); // refresh every 30s

// ══════════════════════════════════════════════════════
// WIDGET DRAG & DROP ENGINE
// ══════════════════════════════════════════════════════
const WIDGET_STORE = 'dd_widget_order';
let _wDragSrc = null, _wDragNs = null;

function getWidgetOrder(ns){
  try{
    const s=localStorage.getItem(WIDGET_STORE);
    const all=s?JSON.parse(s):{};
    return all[ns]||null;
  }catch(e){return null;}
}
function saveWidgetOrder(ns, ids){
  try{
    const s=localStorage.getItem(WIDGET_STORE);
    const all=s?JSON.parse(s):{};
    all[ns]=ids;
    localStorage.setItem(WIDGET_STORE,JSON.stringify(all));
  }catch(e){}
}

// Render a draggable widget grid
// ns = namespace string (unique per dashboard)
// panels = [{id, title, html}]
// containerId = DOM id to render into
function renderWidgets(ns, panels, containerId){
  const container=document.getElementById(containerId);
  if(!container)return;

  // Apply saved order
  const savedOrder=getWidgetOrder(ns);
  if(savedOrder){
    const map={};panels.forEach(p=>map[p.id]=p);
    const ordered=savedOrder.map(id=>map[id]).filter(Boolean);
    // Add any new panels not in saved order
    panels.forEach(p=>{if(!savedOrder.includes(p.id))ordered.push(p);});
    panels=ordered;
  }

  container.style.display = '';   // clear any inline style override
  container.className = 'widget-grid';
  container.innerHTML=panels.map(p=>`
    <div class="widget${p.wide?' widget-wide':''}" data-wid="${p.id}" data-wns="${ns}"
      draggable="true"
      ondragstart="wDragStart(event,'${ns}','${p.id}')"
      ondragover="wDragOver(event)"
      ondragleave="wDragLeave(event)"
      ondrop="wDrop(event,'${ns}','${p.id}')"
      ondragend="wDragEnd(event)">
      <div class="widget-handle">
        <span class="widget-title">${p.title}</span>
        <span class="widget-drag-icon" title="Drag to reorder">⠿</span>
      </div>
      <div class="widget-body">${p.html}</div>
    </div>`).join('');
}

function wDragStart(e, ns, id){
  _wDragSrc=id; _wDragNs=ns;
  e.currentTarget.classList.add('dragging');
  e.dataTransfer.effectAllowed='move';
  e.dataTransfer.setData('text/plain', id);
}
function wDragOver(e){
  e.preventDefault();
  e.dataTransfer.dropEffect='move';
  const target=e.currentTarget;
  if(target.dataset.wid && target.dataset.wid!==_wDragSrc){
    target.classList.add('drag-over');
  }
}
function wDragLeave(e){
  // Only remove highlight when leaving the widget itself, not entering a child
  if(!e.currentTarget.contains(e.relatedTarget)){
    e.currentTarget.classList.remove('drag-over');
  }
}
function wDrop(e, ns, targetId){
  e.preventDefault();
  e.currentTarget.classList.remove('drag-over');
  if(!_wDragSrc || _wDragSrc===targetId || ns!==_wDragNs) return;
  const grid=e.currentTarget.closest('.widget-grid');
  if(!grid)return;
  const widgets=[...grid.querySelectorAll('.widget')];
  const ids=widgets.map(w=>w.dataset.wid);
  const fromIdx=ids.indexOf(_wDragSrc);
  const toIdx=ids.indexOf(targetId);
  if(fromIdx<0||toIdx<0)return;
  // Reorder DOM
  const fromEl=widgets[fromIdx];
  const toEl=widgets[toIdx];
  if(fromIdx<toIdx) grid.insertBefore(fromEl,toEl.nextSibling);
  else grid.insertBefore(fromEl,toEl);
  // Save new order
  const newIds=[...grid.querySelectorAll('.widget')].map(w=>w.dataset.wid);
  saveWidgetOrder(ns, newIds);
}
function wDragEnd(e){
  document.querySelectorAll('.widget').forEach(w=>{
    w.classList.remove('dragging','drag-over');
  });
  _wDragSrc=null; _wDragNs=null;
}

// ── MOBILE NAV ───────────────────────────────────────────
function toggleMobileNav(){
  const tabs=document.getElementById('nav-tabs-list');
  const overlay=document.getElementById('drawer-overlay');
  const icon=document.getElementById('nav-menu-btn');
  const isOpen=tabs.classList.toggle('open');
  if(icon) icon.textContent=isOpen?'✕':'☰';
  if(overlay) overlay.classList.toggle('open',isOpen);
}
function closeMobileNav(){
  const tabs=document.getElementById('nav-tabs-list');
  const overlay=document.getElementById('drawer-overlay');
  const icon=document.getElementById('nav-menu-btn');
  tabs.classList.remove('open');
  if(icon) icon.textContent='☰';
  if(overlay) overlay.classList.remove('open');
}
// Close mobile nav after tab is clicked (small delay so switchMain fires first)
document.getElementById('nav-tabs-list').addEventListener('click',function(e){
  if(e.target.closest('.nav-tab')) setTimeout(closeMobileNav, 50);
});
// Close on outside click - only when drawer is open
document.addEventListener('click',function(e){
  const tabs=document.getElementById('nav-tabs-list');
  if(tabs.classList.contains('open')&&!e.target.closest('#nav-tabs-list')&&!e.target.closest('#brand-menu-wrap')){
    closeMobileNav();
  }
});

function toggleTheme(){
  const isLight = document.documentElement.classList.toggle('light');
  const btn = document.getElementById('theme-btn');
  if(btn) btn.textContent = isLight ? '☀️' : '🌙';
  const drawerIcon=document.getElementById('theme-icon-drawer');
  const drawerLabel=document.getElementById('theme-label-drawer');
  if(drawerIcon) drawerIcon.textContent = isLight ? '☀️' : '🌙';
  if(drawerLabel) drawerLabel.textContent = isLight ? 'Light Mode' : 'Dark Mode';
  try{ localStorage.setItem('dd_theme', isLight ? 'light' : 'dark'); }catch(e){}
}
// Restore saved theme on load
(function(){
  try{
    const saved = localStorage.getItem('dd_theme');
    if(saved === 'light'){
      document.documentElement.classList.add('light');
      const btn = document.getElementById('theme-btn');
      if(btn) btn.textContent = '☀️';
    }
  }catch(e){}
})();
const _initDateEl = document.getElementById('dash-date-lbl')||document.getElementById('dash-company-lbl');
if(_initDateEl) _initDateEl.textContent = (DB.config?.company||'SDMC');

// ══════════════════════════════════════════════════════════════════════════════
// MODAL
// ══════════════════════════════════════════════════════════════════════════════
function openModal(title, bodyHTML, footerHTML, tabs){
  document.getElementById('modal-title').textContent=title;
  document.getElementById('modal-body').innerHTML=bodyHTML;
  document.getElementById('modal-footer').innerHTML=footerHTML||'<button class="btn" onclick="closeModal()">Close</button>';
  const tb=document.getElementById('modal-tab-bar');
  if(tabs){
    tb.style.display='flex';
    tb.innerHTML=tabs.map((t,i)=>`<div class="modal-tab ${i===0?'active':''}" id="mtab-${t.id}" onclick="switchModalTab('${t.id}')">${t.label}</div>`).join('');
  }else{tb.style.display='none';}
  document.getElementById('modal-overlay').style.display='flex';
}
function closeModal(){document.getElementById('modal-overlay').style.display='none';}
function switchModalTab(id){
  document.querySelectorAll('.modal-tab').forEach(t=>t.classList.remove('active'));
  document.getElementById('mtab-'+id)?.classList.add('active');
  document.querySelectorAll('.modal-tab-panel').forEach(p=>p.style.display='none');
  document.getElementById('mtp-'+id)?.style.setProperty('display','block');
}

// ══════════════════════════════════════════════════════════════════════════════
// DASHBOARD
// ══════════════════════════════════════════════════════════════════════════════
function showDashboardSkeleton(){
  const cards = document.getElementById('dash-stat-cards');
  const panels = document.getElementById('dash-panels-1');
  if(!cards || !panels) return;

  // 4 stat-card skeletons
  cards.innerHTML = Array(4).fill(0).map(()=>`
    <div class="skel-card">
      <span class="skel" style="width:55%;height:9px;margin-bottom:10px"></span>
      <span class="skel" style="width:72%;height:26px;margin-bottom:6px"></span>
      <span class="skel" style="width:45%;height:8px"></span>
    </div>`).join('');

  // 3 panel skeletons - direct grid children of dash-panels-1 (2-col widget grid)
  // renderWidgets() will replace this with real panels; className swap is fine
  panels.className = 'widget-grid';
  panels.innerHTML = `
    <div class="skel-panel widget">
      <span class="skel" style="width:52%;height:9px;margin-bottom:14px"></span>
      ${Array(4).fill(0).map((_,i)=>`
        <div style="display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--ln)">
          <span class="skel" style="width:${38+i*4}%;height:10px"></span>
          <span class="skel" style="width:22%;height:10px"></span>
        </div>`).join('')}
      <div style="display:flex;gap:8px;margin-top:10px">
        <span class="skel" style="flex:1;height:30px;border-radius:4px"></span>
        <span class="skel" style="flex:1;height:30px;border-radius:4px"></span>
      </div>
    </div>
    <div class="skel-panel widget">
      <span class="skel" style="width:48%;height:9px;margin-bottom:14px"></span>
      ${Array(5).fill(0).map((_,i)=>`
        <div style="display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--ln)">
          <span class="skel" style="width:${55-i*3}%;height:10px"></span>
          <span class="skel" style="width:18%;height:10px"></span>
        </div>`).join('')}
    </div>
    <div class="skel-panel widget widget-wide">
      <span class="skel" style="width:42%;height:9px;margin-bottom:14px"></span>
      ${Array(4).fill(0).map((_,i)=>`
        <div style="display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--ln)">
          <span class="skel" style="width:${44+i*2}%;height:10px"></span>
          <span class="skel" style="width:16%;height:10px"></span>
        </div>`).join('')}
    </div>`;
}

function buildDashboard(){
  const inv=DB.invoices, pos=DB.pos, exps=DB.expenses, frs=DB.field_reports;
  const mi=parseFloat(DB.config.irs_mileage||0.725);
  const ti=inv.reduce((s,i)=>s+parseFloat(i.total||0),0);
  const te=exps.reduce((s,e)=>s+parseFloat(e.amount||0),0);
  const tm=inv.reduce((s,i)=>s+parseFloat(i.miles||0),0);
  const profit=ti-te-(tm*mi);
  const pending=inv.filter(i=>i.status==='Sent').reduce((s,i)=>s+parseFloat(i.total||0),0);
  const activePOs=pos.filter(p=>p.status==='Received').length;

  document.getElementById('dash-stat-cards').innerHTML=[
    ['Total Revenue',fmtMoney(ti),`${inv.length} invoice${inv.length!==1?'s':''}`, 'c-grn', 'c-grn'],
    ['Net Profit',fmtMoney(profit),'After expenses & mileage', profit>=0?'c-grn':'c-red', profit>=0?'c-grn':'c-red'],
    ['Pending Payment',fmtMoney(pending),`${inv.filter(i=>i.status==='Sent').length} invoices sent`,'c-pur','c-pur'],
    ['Active POs',String(activePOs),'Awaiting invoice','c-blu','c-blu'],
  ].map(([lbl,val,sub,cc,vc])=>`
    <div class="stat-card ${cc}">
      <div class="stat-label">${lbl}</div>
      <div class="stat-val ${vc}">${val}</div>
      <div class="stat-sub">${sub}</div>
    </div>`).join('');

  const poGroups={Received:0,Invoiced:0,Paid:0,Void:0};
  pos.forEach(p=>{if(poGroups[p.status]!==undefined)poGroups[p.status]++;});
  const maxPO=Math.max(...Object.values(poGroups),1);

  const invGroups={Sent:0,Paid:0,Overdue:0};
  inv.forEach(i=>{if(invGroups[i.status]!==undefined)invGroups[i.status]++;});
  const maxInv=Math.max(inv.length,1);

  const recent=[...inv].reverse().slice(0,5);
  renderWidgets('main-dash',[
    {id:'inv-status', title:'Invoice Status', html:`
      ${Object.entries(invGroups).map(([l,v])=>`<div class="bar-row"><span class="bar-lbl">${l}</span><div class="bar-bg"><div class="bar-fill ${l==='Paid'?'gn':''}" style="width:${(v/maxInv*100).toFixed(0)}%"></div></div><span class="bar-val">${v}</span></div>`).join('')}
      <div class="dash-row" style="margin-top:8px;padding-top:8px;border-top:1px solid var(--ln)"><span class="dash-lbl">Outstanding</span><span class="dval pu">${fmtMoney(pending)}</span></div>
      <div class="dash-row"><span class="dash-lbl">Total billed</span><span class="dval gn">${fmtMoney(ti)}</span></div>`},
    {id:'recent-inv', title:'Recent Invoices', html:`
      ${recent.map(i=>`<div class="dash-row"><div><div style="font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--gld)">${i.num}</div><div style="font-size:10px;color:var(--g3)">${i.client} · ${i.date}</div></div><div style="text-align:right"><div class="dval gn">${fmtMoney(i.total)}</div><span class="badge badge-${i.status==='Paid'?'grn':i.status==='Sent'?'pur':i.status==='Draft'?'amb':'grey'}" style="font-size:8px">${i.status}</span></div></div>`).join('')}
      ${!recent.length?'<div style="font-size:12px;color:var(--g3);padding:8px 0">No invoices yet.</div>':''}
      <div style="display:flex;gap:8px;margin-top:10px">
        <button class="btn" style="flex:1" onclick="switchMain('billing');showPane('invoice_log','billing')">View All Invoices</button>
        <button class="btn btn-primary" style="flex:1" onclick="switchMain('billing');showPane('create_invoice','billing')">+ New Invoice</button>
      </div>`, wide:true},
    {id:'insights', title:'Reports & Insights', html:`
      <div class="dash-row"><span class="dash-lbl">P&amp;L Report</span><button class="btn btn-green" onclick="showPane('pl','dashboard')" style="padding:4px 12px">Open -></button></div>
      <div class="dash-row"><span class="dash-lbl">Year-End Summary</span><button class="btn" onclick="showPane('yearend','dashboard')" style="padding:4px 12px">Open -></button></div>
      <div class="dash-row"><span class="dash-lbl">Mileage deduction YTD</span><span class="dval gl">${fmtMoney(tm*mi)}</span></div>
      <div class="dash-row"><span class="dash-lbl">Field Reports logged</span><span class="dval">${frs.length}</span></div>
      <div class="dash-row"><span class="dash-lbl">Sub-clients</span><span class="dval">${DB.sub_clients.length}</span></div>
      <button class="btn btn-green" style="width:100%;margin-top:10px" onclick="switchMain('fieldreports');showPane('fr_new','fieldreports')">+ Field Report</button>`},
  ], 'dash-panels-1');
  // Clear panels-2 (now merged into single grid)
  const dp2=document.getElementById('dash-panels-2');if(dp2)dp2.innerHTML='';
}

function buildPLReport(){
  const inv=DB.invoices, exps=DB.expenses, pos=DB.pos;
  const mi=parseFloat(DB.config.irs_mileage);
  const ti=inv.reduce((s,i)=>s+parseFloat(i.total||0),0);
  const te=exps.reduce((s,e)=>s+parseFloat(e.amount||0),0);
  const tm=inv.reduce((s,i)=>s+parseFloat(i.miles||0),0);
  const pl=ti-te, net=pl-(tm*mi);

  document.getElementById('pl-stats').innerHTML=[
    ['Income',fmtMoney(ti),'c-grn','c-grn'],
    ['Expenses',fmtMoney(te),'c-red','c-red'],
    ['Net P&L',fmtMoney(net),net>=0?'c-grn':'c-red',net>=0?'c-grn':'c-red'],
    ['Miles',String(parseInt(tm)),'','c-gld'],
  ].map(([l,v,cc,vc])=>`<div class="stat-card ${cc}"><div class="stat-label">${l}</div><div class="stat-val ${vc}">${v}</div></div>`).join('');

  document.getElementById('pl-breakdown').innerHTML=[
    ['Gross Income',fmtMoney(ti),'gn'],
    ['Business Expenses','-'+fmtMoney(te),'rd'],
    ['Mileage Deduction ('+parseInt(tm)+'mi)','-'+fmtMoney(tm*mi),'rd'],
    ['Net Profit',fmtMoney(net),net>=0?'gn':'rd'],
  ].map(([l,v,c])=>`<div class="dash-row"><span class="dash-lbl">${l}</span><span class="dval ${c}">${v}</span></div>`).join('');

  const ct={};exps.forEach(e=>{ct[e.category]=(ct[e.category]||0)+parseFloat(e.amount||0);});
  const maxC=Math.max(...Object.values(ct),1);
  document.getElementById('pl-by-cat').innerHTML=Object.keys(ct).length?
    Object.entries(ct).sort((a,b)=>b[1]-a[1]).slice(0,8).map(([k,v])=>`<div class="bar-row"><span class="bar-lbl">${k}</span><div class="bar-bg"><div class="bar-fill" style="width:${(v/maxC*100).toFixed(0)}%"></div></div><span class="bar-val">${fmtMoney(v)}</span></div>`).join(''):
    '<div style="font-size:12px;color:var(--g3)">No expenses logged yet.</div>';

  const months=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  const mI=Array(12).fill(0);
  inv.forEach(i=>{const m=parseInt((i.date||'').split('/')[0])-1;if(m>=0&&m<12)mI[m]+=parseFloat(i.total||0);});
  const maxM=Math.max(...mI,1);
  document.getElementById('pl-monthly').innerHTML=months.map((m,i)=>`<div class="bar-row"><span class="bar-lbl">${m}</span><div class="bar-bg"><div class="bar-fill gn" style="width:${(mI[i]/maxM*100).toFixed(0)}%"></div></div><span class="bar-val">${fmtMoney(mI[i])}</span></div>`).join('');

  const sg={Received:0,Invoiced:0,Paid:0,Void:0};
  pos.forEach(p=>{if(sg[p.status]!==undefined)sg[p.status]++;});
  const maxPS=Math.max(...Object.values(sg),1);
  document.getElementById('pl-po-status').innerHTML=Object.entries(sg).map(([k,v])=>`<div class="bar-row"><span class="bar-lbl">${k}</span><div class="bar-bg"><div class="bar-fill ${k==='Paid'?'gn':k==='Invoiced'?'pu':''}" style="width:${(v/maxPS*100).toFixed(0)}%"></div></div><span class="bar-val">${v}</span></div>`).join('');
}

function buildYearEnd(){
  const inv=DB.invoices, exps=DB.expenses;
  const mi=parseFloat(DB.config.irs_mileage);
  const ti=inv.reduce((s,i)=>s+parseFloat(i.total||0),0);
  const te=exps.reduce((s,e)=>s+parseFloat(e.amount||0),0);
  const tm=inv.reduce((s,i)=>s+parseFloat(i.miles||0),0);
  const mDed=tm*mi, net=ti-te-mDed, yr=new Date().getFullYear();
  const ct={};exps.forEach(e=>{ct[e.category]=(ct[e.category]||0)+parseFloat(e.amount||0);});

  document.getElementById('yearend-content').innerHTML=`
    <div class="card">
      <div style="font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gld);margin-bottom:14px">Tax Year ${yr} - SDMC LLC · Benjamin Garcia</div>
      <div class="dash-row"><span class="dash-lbl">Gross Revenue (Schedule C, Line 1)</span><span class="dval gn" style="font-size:15px">${fmtMoney(ti)}</span></div>
      <div style="font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--g3);margin:12px 0 6px 16px">Business Deductions</div>
      ${Object.entries(ct).map(([k,v])=>`<div class="dash-row" style="padding-left:16px"><span class="dash-lbl">${k}</span><span class="dval rd">-${fmtMoney(v)}</span></div>`).join('')}
      <div class="dash-row" style="padding-left:16px"><span class="dash-lbl">Vehicle Mileage (${parseInt(tm)} mi × $${mi} IRS rate)</span><span class="dval rd">-${fmtMoney(mDed)}</span></div>
      <div style="height:1px;background:var(--gld);margin:12px 0 8px"></div>
      <div class="dash-row">
        <span style="font-weight:700;font-size:14px;color:var(--w)">Net Profit (Schedule C)</span>
        <span style="font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:900;color:${net>=0?'var(--grn)':'var(--red)'}">${fmtMoney(net)}</span>
      </div>
      <div style="font-size:10px;color:var(--g2);margin-top:12px;padding-top:10px;border-top:1px solid var(--ln)">For reference only. Provide to your accountant for final filing.</div>
    </div>`;
}

// ══════════════════════════════════════════════════════════════════════════════
// ADMINISTRATION
// ══════════════════════════════════════════════════════════════════════════════
// ── REVISION LOG ─────────────────────────────────────────────────────────────
const REVISION_LOG = [
  {
    id:'R010', date:'2026-04-22', area:'Field Reports / Data Layer', type:'fix',
    title:'Field reports duplicating and not saving - data layer root causes fixed',
    desc:'Three root causes fixed. (1) R008 regression: changing onConflict to "id,user_id" for data tables (clients, sub_clients, pos, invoices, expenses, field_reports) broke all saves because those tables only have a PK on "id" alone - no composite unique constraint. Supabase rejected every upsert. Reverted to onConflict:"id" for those tables. categories/presets correctly keep "id,user_id". (2) Seed data injection: defaultDB().field_reports contained a hardcoded demo record (fr1). If Supabase returned null/error the fallback || def.field_reports injected fr1 into the live DB, which then got saved to Supabase creating a phantom duplicate on every failure. Removed fr1; field_reports now starts as an empty array. (3) No dedup safety net: added _dedupeRows() which runs at login for every table - detects duplicate ids left over from earlier bad saves, keeps the last version, deletes all rows for that user and re-inserts the clean set so duplicates are permanently removed from Supabase.'
  },
  {
    id:'R009', date:'2026-04-19', area:'Field Reports / Billing', type:'fix',
    title:'Form bottom cut off behind action bar (structural fix)',
    desc:'Replaced the position:fixed action bar approach with a proper layout solution. The Save/Preview/Discard buttons are now in a global #form-action-bar-container div that lives as a flex-shrink:0 sibling below .body-layout inside #app. On desktop (>768px) this takes real layout space - body-layout fills the remaining height and the bar is always fully visible with zero content overlap. On mobile/tablet (<=768px) where the body itself scrolls, CSS switches the container to position:fixed with sufficient padding-bottom on the content area. The action bar divs have been removed from inside pane-fr_new and pane-create_invoice. showPane() manages bar visibility and which inner bar (FR vs invoice) is displayed.'
  },
  {
    id:'R008', date:'2026-04-19', area:'Field Reports / Data Layer', type:'fix',
    title:'Field reports duplicating on page refresh',
    desc:'Three root causes fixed. (1) saveDB() was using {onConflict:\'id\'} for all tables - because Supabase tables use a composite (id, user_id) unique key, the conflict was never detected and every save performed an INSERT rather than an UPDATE, producing duplicate rows. Fixed by using {onConflict:\'id,user_id\'} consistently across all tables. (2) saveDB() never updated localStorage, so the stale cache from the previous login would show the duplicates on the next page load before Supabase data arrived. Fixed by writing the current DB to localStorage after each successful save. (3) saveFR() called dbDelete() without await before saveDB() - the debounced upsert could complete before the delete, then the delete would remove the freshly-saved record. Since edited reports reuse the same id, the upsert (onConflict:\'id,user_id\') correctly UPDATEs the existing row; the separate delete is no longer needed.'
  },
  {
    id:'R001', date:'2026-04-19', area:'Mobile UI', type:'fix',
    title:'Hamburger menu items unresponsive',
    desc:'Raised mobile topnav z-index from 300 to 500. The drawer overlay (z-index 399) was painting above the topnav stacking context (z-index 300), intercepting every tap on drawer nav items before they could fire.'
  },
  {
    id:'R002', date:'2026-04-19', area:'Field Reports', type:'fix',
    title:'Discarding a field report edit created a duplicate entry',
    desc:'Removed erroneous DB.field_reports.push(orig) from discardFR(). The original record was never removed from the DB on edit start, so re-pushing the backup on discard produced a second copy of the report.'
  },
  {
    id:'R003', date:'2026-04-19', area:'Field Reports', type:'fix',
    title:'Date selector not working on field report form',
    desc:'Calendar popup CSS was completely absent from the stylesheet. Without .cal-popup, .cal-day, .cal-grid and related rules, the popup opened invisibly (no background, no z-index, no layout). Added full calendar CSS including fixed positioning at z-index 10500, grid layout, day/today/selected states, and nav button styles.'
  },
  {
    id:'R007', date:'2026-04-19', area:'Field Reports', type:'feature',
    title:'Cancel button on new field report form',
    desc:'The Discard Changes button was hidden for new reports and only shown when editing. Made it always visible - defaults to "Cancel" (neutral style) when creating a new report, switches to "Discard Changes" (red/danger style) when editing an existing one. discardFR() already handled both cases correctly; only the button visibility and label logic needed updating in editFR() and clearFRForm().'
  },
  {
    id:'R006', date:'2026-04-19', area:'Billing', type:'feature',
    title:'Invoice form preserved when navigating to another tab',
    desc:'Applied the same mid-form navigation guard that exists for field reports to the invoice form. switchMain() now detects when the user is on create_invoice and navigating away - it switches the tab visually but leaves the pane untouched. On returning to Billing, the form is restored instead of reset. Added _invFormDirty() to detect unsaved content (inv #, client, date, or any line items). showPane() guard prevents buildCreateInvoice() from wiping the form on re-entry.'
  },
  {
    id:'R005', date:'2026-04-19', area:'Field Reports / Billing', type:'fix',
    title:'Save/Discard buttons not visible on tablet',
    desc:'position:sticky;bottom:0 only activates while scrolling past the element - cannot pin a bar already below the viewport. Replaced with position:fixed;bottom:0;left:0;right:0;z-index:250. Original padding-bottom:80px was too small (bar is ~72px + iOS safe-area). Increased to 100px desktop / 150px tablet / 160px mobile to clear single and wrapped-button layouts. Added env(safe-area-inset-bottom) to bar padding for iOS home-indicator clearance.'
  },
  {
    id:'R004', date:'2026-04-19', area:'Billing', type:'feature',
    title:'Save Draft and Discard Changes on invoice form',
    desc:'Added persistent Save Draft and Discard Changes buttons to the invoice form. Save Draft stores the invoice with status "Draft" (amber badge) without requiring a full preview step. Discard Changes is now visible from the moment an edit starts. Also fixed the same duplicate-record bug as R002 in discardInvoice() - the original was never removed from DB on edit start so the restore push was creating duplicates. Draft added to the invoice status filter dropdown.'
  },
];

function buildRevisionLog(){
  const el=document.getElementById('revision-log-container');if(!el)return;
  const badge=document.getElementById('revision-count-badge');
  if(badge) badge.textContent=REVISION_LOG.length+' revision'+(REVISION_LOG.length!==1?'s':'');
  const typeColor={fix:'c-grn',feature:'c-blu',improvement:'c-pur',change:'c-amb'};
  const typeLabel={fix:'BUG FIX',feature:'FEATURE',improvement:'IMPROVEMENT',change:'CHANGE'};
  el.innerHTML=[...REVISION_LOG].reverse().map(r=>`
    <div class="record-row accent-gld" style="flex-direction:column;gap:6px">
      <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
        <span style="font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:900;color:var(--gld)">${r.id}</span>
        <span class="badge badge-${typeColor[r.type]||'grey'}">${typeLabel[r.type]||r.type.toUpperCase()}</span>
        <span style="font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;color:var(--g3);letter-spacing:.08em">${r.area}</span>
        <span style="margin-left:auto;font-size:11px;color:var(--g3)">${r.date}</span>
      </div>
      <div style="font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;color:var(--w2)">${r.title}</div>
      <div style="font-size:12px;color:var(--g3);line-height:1.5">${r.desc}</div>
    </div>`).join('');
}

function buildAdminMain(){
  buildAdminDashboard();
  buildExpenseLog();
  buildMileageLog();
}

function openAddExpenseModal(){
  // Build category options
  const groups={};DB.categories.forEach(c=>{groups[c.group]=groups[c.group]||[];groups[c.group].push(c);});
  let catOpts='';
  Object.entries(groups).forEach(([g,cs])=>{
    catOpts+=`<optgroup label="${g}">${cs.map(c=>`<option value="${c.name}">${c.name}</option>`).join('')}</optgroup>`;
  });
  const body=`<div class="card" style="margin:0">
    <div class="field-row col4">
      <div class="field"><label>Date</label><input id="exp-date" type="text" placeholder="MM/DD/YYYY" readonly onclick="openCal(this)" style="cursor:pointer" value="${todayStr()}"></div>
      <div class="field"><label>Category</label><select id="exp-cat">${catOpts}</select></div>
      <div class="field"><label>Amount ($)</label><input id="exp-amt" type="number" step="0.01" placeholder="0.00"></div>
      <div class="field"><label>Frequency</label>
        <select id="exp-freq">
          <option value="One-Time">One-Time Purchase</option>
          <option value="Monthly">Monthly Recurring</option>
          <option value="Yearly">Yearly Recurring</option>
        </select>
      </div>
    </div>
    <div class="field-row col2">
      <div class="field"><label>Description</label><input id="exp-desc" placeholder=""></div>
      <div class="field"><label>Notes</label><input id="exp-notes" placeholder=""></div>
    </div>
    <div class="field"><label>Receipt (optional)</label><input type="file" id="exp-receipt" accept="image/*,.pdf"></div>
    <span class="status-msg" id="exp-status" style="display:block;margin-top:6px"></span>
  </div>`;
  openModal('+ Log Expense', body,
    `<button class="btn btn-primary" onclick="logExpenseFromModal()">Save Expense</button><button class="btn" onclick="closeModal()">Cancel</button>`
  );
}

function logExpenseFromModal(){
  const d=document.getElementById('exp-date').value.trim();
  const cat=document.getElementById('exp-cat').value;
  const amt=parseFloat(document.getElementById('exp-amt').value);
  const desc=document.getElementById('exp-desc').value.trim();
  const st=document.getElementById('exp-status');
  if(!d||!amt||!desc){st.textContent='Date, amount, and description are required.';st.className='status-msg err';return;}
  DB.expenses.push({id:uid(),date:d,category:cat,amount:amt,frequency:document.getElementById('exp-freq').value,desc,notes:document.getElementById('exp-notes').value.trim(),created:new Date().toISOString()});
  saveDB();updateBadges();closeModal();
  buildAdminMain();
}

function buildAdminDashboard(){
  const exps = DB.expenses;
  const mi   = parseFloat(DB.config.irs_mileage || 0.725);
  const inv  = DB.invoices;

  // Date label
  const dl = document.getElementById('admin-company-lbl');
  if(dl) dl.textContent = DB.config.company||'SDMC';

  // Totals
  const total    = exps.reduce((s,e) => s + parseFloat(e.amount||0), 0);
  const monthly  = exps.filter(e => e.frequency==='Monthly').reduce((s,e) => s + parseFloat(e.amount||0), 0);
  const yearly   = exps.filter(e => e.frequency==='Yearly').reduce((s,e)  => s + parseFloat(e.amount||0), 0);
  const oneTime  = exps.filter(e => (e.frequency||'One-Time')==='One-Time').reduce((s,e) => s + parseFloat(e.amount||0), 0);
  const totalMi  = inv.reduce((s,i) => s + parseFloat(i.miles||0), 0);
  const miDeduct = totalMi * mi;

  document.getElementById('admin-dash-stats').innerHTML = [
    ['Total Expenses',    fmtMoney(total),    `${exps.length} entr${exps.length!==1?'ies':'y'}`,   'c-red', 'c-red'],
    ['Monthly Recurring',      fmtMoney(monthly),  `${exps.filter(e=>e.frequency==='Monthly').length} recurring expenses`, 'c-pur', 'c-pur'],
    ['Yearly Recurring',       fmtMoney(yearly),   `${exps.filter(e=>e.frequency==='Yearly').length} recurring expenses`,  'c-blu', 'c-blu'],
    ['Mileage Deduction', fmtMoney(miDeduct), `${parseInt(totalMi)} mi @ $${mi}/mi`,               'c-grn', 'c-grn'],
  ].map(([lbl,val,sub,cc,vc]) => `
    <div class="stat-card ${cc}">
      <div class="stat-label">${lbl}</div>
      <div class="stat-val ${vc}">${val}</div>
      <div class="stat-sub">${sub}</div>
    </div>`).join('');

  // By category
  const byCat = {};
  exps.forEach(e => { byCat[e.category] = (byCat[e.category]||0) + parseFloat(e.amount||0); });
  const topCats = Object.entries(byCat).sort((a,b) => b[1]-a[1]).slice(0,8);
  const maxCat  = Math.max(...topCats.map(x=>x[1]), 1);

  // By frequency
  const byFreq = {'One-Time': oneTime, 'Monthly': monthly, 'Yearly': yearly};
  const maxFreq = Math.max(...Object.values(byFreq), 1);

  // Monthly spend trend
  const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  const mTrend = Array(12).fill(0);
  exps.forEach(e => {
    const m = parseInt((e.date||'').split('/')[0]) - 1;
    if(m >= 0 && m < 12) mTrend[m] += parseFloat(e.amount||0);
  });
  const maxTrend = Math.max(...mTrend, 1);

  // Recent expenses
  const recent = [...exps].reverse().slice(0,6);
  const freqBadge = {Monthly:'badge-pur', Yearly:'badge-blu', 'One-Time':'badge-grey'};

  renderWidgets('admin-dash',[
    {id:'by-cat', title:'By Category', html:`
      ${topCats.length
        ? topCats.map(([k,v]) => `<div class="bar-row"><span class="bar-lbl">${k}</span><div class="bar-bg"><div class="bar-fill rd" style="width:${(v/maxCat*100).toFixed(0)}%"></div></div><span class="bar-val">${fmtMoney(v)}</span></div>`).join('')
        : '<div style="font-size:12px;color:var(--g3)">No expenses yet.</div>'}`},
    {id:'by-freq', title:'By Frequency', html:`
      ${Object.entries(byFreq).map(([k,v]) => {
        const col = k==='Monthly'?'pu':k==='Yearly'?'bl':'';
        return `<div class="bar-row"><span class="bar-lbl">${k}</span><div class="bar-bg"><div class="bar-fill ${col}" style="width:${(v/maxFreq*100).toFixed(0)}%"></div></div><span class="bar-val">${fmtMoney(v)}</span></div>`;
      }).join('')}
      <div class="dash-row" style="margin-top:10px;padding-top:8px;border-top:1px solid var(--ln)">
        <span class="dash-lbl">Recurring monthly total</span>
        <span class="dval pu">${fmtMoney(monthly + yearly/12)}</span>
      </div>`},
    {id:'spend-trend', title:'Monthly Spend Trend', html:`
      ${months.map((m,i) => `<div class="bar-row"><span class="bar-lbl">${m}</span><div class="bar-bg"><div class="bar-fill rd" style="width:${(mTrend[i]/maxTrend*100).toFixed(0)}%"></div></div><span class="bar-val">${fmtMoney(mTrend[i])}</span></div>`).join('')}`},
    {id:'recent-exp', title:'Recent Expenses', html:`
      ${recent.map(e => `<div class="dash-row"><div><div style="font-size:12px;font-weight:600;color:var(--w2)">${e.desc}</div><div style="font-size:10px;color:var(--g3)">${e.category} · ${e.date}</div></div><div style="text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px"><div class="dval rd">${fmtMoney(e.amount)}</div><span class="badge ${freqBadge[e.frequency||'One-Time']||'badge-grey'}" style="font-size:8px">${e.frequency||'One-Time'}</span></div></div>`).join('')}
      ${!recent.length ? '<div style="font-size:12px;color:var(--g3);padding:8px 0">No expenses yet.</div>' : ''}
      <div style="display:flex;gap:8px;margin-top:10px">
        <button class="btn" style="flex:1" onclick="showPane('admin_main','admin');buildAdminMain()">Expense Log -></button>
        <button class="btn btn-primary" onclick="openAddExpenseModal()">+ Log Expense</button>
      </div>`},
  ], 'admin-dash-panels-1');
  const adp2=document.getElementById('admin-dash-panels-2');if(adp2)adp2.innerHTML='';}

function buildLogExpense(){
  document.getElementById('exp-date').value=todayStr();
  // Populate category dropdown
  const cats=DB.categories;
  const sel=document.getElementById('exp-cat');
  if(!sel)return;
  const groups={};cats.forEach(c=>{groups[c.group]=groups[c.group]||[];groups[c.group].push(c);});
  sel.innerHTML='';
  Object.entries(groups).forEach(([g,cs])=>{
    const og=document.createElement('optgroup');og.label=g;
    cs.forEach(c=>{const o=document.createElement('option');o.value=c.name;o.textContent=c.name;og.appendChild(o);});
    sel.appendChild(og);
  });
}

function logExpense(){
  const d=document.getElementById('exp-date').value.trim();
  const cat=document.getElementById('exp-cat').value;
  const amt=parseFloat(document.getElementById('exp-amt').value);
  const desc=document.getElementById('exp-desc').value.trim();
  const st=document.getElementById('exp-status');
  if(!d||!amt||!desc){st.textContent='Date, amount, and description are required.';st.className='status-msg err';return;}
  DB.expenses.push({id:uid(),date:d,category:cat,amount:amt,frequency:document.getElementById('exp-freq').value,desc,notes:document.getElementById('exp-notes').value.trim(),created:new Date().toISOString()});
  saveDB();updateBadges();
  document.getElementById('exp-amt').value='';document.getElementById('exp-desc').value='';document.getElementById('exp-notes').value='';
  st.textContent=`✓ Logged: ${cat} - ${fmtMoney(amt)}`;st.className='status-msg ok';
}

function buildExpenseLog(){
  const search=(document.getElementById('exp-search')||{}).value?.toLowerCase()||'';
  const catF=(document.getElementById('exp-cat-filter')||{}).value||'';
  const freqF=(document.getElementById('exp-freq-filter')||{}).value||'';
  const filtered=DB.expenses.filter(e=>
    (!search||(e.desc+e.category).toLowerCase().includes(search)) &&
    (!catF||e.category===catF) &&
    (!freqF||(e.frequency||'One-Time')===freqF)
  );
  const total=filtered.reduce((s,e)=>s+parseFloat(e.amount||0),0);
  const lbl=document.getElementById('exp-total-lbl');if(lbl)lbl.textContent=`${filtered.length} entries · Total: ${fmtMoney(total)}`;
  // Populate cat filter
  const catFilter=document.getElementById('exp-cat-filter');
  if(catFilter&&catFilter.options.length<=1){DB.categories.forEach(c=>{const o=document.createElement('option');o.value=c.name;o.textContent=c.name;catFilter.appendChild(o);});}
  const el=document.getElementById('exp-log-container');
  if(!el)return;
  if(!filtered.length){el.innerHTML='<div class="empty-state">'+(DB.expenses.length?'No matching expenses.':'No expenses logged yet.')+'</div>';return;}
  el.innerHTML=`<div class="table-scroll"><table class="data-table"><thead><tr><th>Date</th><th>Description</th><th>Category</th><th>Frequency</th><th style="text-align:right">Amount</th><th></th></tr></thead><tbody>`+
    [...filtered].reverse().map(e=>{
      const freqBadge={
        'Monthly': 'badge-pur',
        'Yearly':  'badge-blu',
        'One-Time':'badge-grey'
      }[e.frequency||'One-Time']||'badge-grey';
      return`<tr>
      <td><div class="cell-primary">${e.date}</div></td>
      <td>${e.desc}${e.notes?`<div class="cell-sub">${e.notes}</div>`:''}</td>
      <td><span class="badge badge-grey">${e.category}</span></td>
      <td><span class="badge ${freqBadge}">${e.frequency||'One-Time'}</span></td>
      <td style="text-align:right;font-family:'Barlow Condensed',sans-serif;font-weight:700;color:var(--red)">${fmtMoney(e.amount)}</td>
      <td style="display:flex;gap:5px">
        <button class="btn btn-icon" onclick="editExpense('${e.id}')" title="Edit">✏</button>
        <button class="btn btn-icon btn-danger" onclick="deleteExpense('${e.id}')">×</button>
      </td>
    </tr>`;}).join('')+'</tbody></table>';
}

function deleteExpense(id){
  if(!confirm('Delete this expense?'))return;
  dbDelete('dd_expenses',id);DB.expenses=DB.expenses.filter(e=>e.id!==id);saveDB();updateBadges();buildAdminMain();
}

function editExpense(id){
  const e=DB.expenses.find(x=>x.id===id);if(!e)return;
  // Build category options
  const groups={};DB.categories.forEach(c=>{groups[c.group]=groups[c.group]||[];groups[c.group].push(c);});
  let catOpts='';
  Object.entries(groups).forEach(([g,cs])=>{
    catOpts+=`<optgroup label="${g}">${cs.map(c=>`<option value="${c.name}"${c.name===e.category?' selected':''}>${c.name}</option>`).join('')}</optgroup>`;
  });
  const body=`<div class="card" style="margin:0">
    <div class="field-row col2">
      <div class="field"><label>Date</label><input id="ee-date" type="text" value="${e.date}" readonly onclick="openCal(this)" style="cursor:pointer"></div>
      <div class="field"><label>Amount ($)</label><input id="ee-amt" type="number" step="0.01" value="${e.amount}"></div>
    </div>
    <div class="field-row col2">
      <div class="field"><label>Category</label><select id="ee-cat">${catOpts}</select></div>
      <div class="field"><label>Frequency</label>
        <select id="ee-freq">
          <option value="One-Time"${(e.frequency||'One-Time')==='One-Time'?' selected':''}>One-Time Purchase</option>
          <option value="Monthly"${e.frequency==='Monthly'?' selected':''}>Monthly Recurring</option>
          <option value="Yearly"${e.frequency==='Yearly'?' selected':''}>Yearly Recurring</option>
        </select>
      </div>
    </div>
    <div class="field-row col2">
      <div class="field"><label>Description</label><input id="ee-desc" value="${e.desc.replace(/"/g,'&quot;')}"></div>
      <div class="field"><label>Notes</label><input id="ee-notes" value="${(e.notes||'').replace(/"/g,'&quot;')}"></div>
    </div>
    <span class="status-msg" id="ee-status"></span>
  </div>`;
  openModal(
    'Edit Expense',
    body,
    `<button class="btn btn-primary" onclick="saveEditedExpense('${id}')">Save Changes</button><button class="btn" onclick="closeModal()">Cancel</button>`
  );
}

function saveEditedExpense(id){
  const e=DB.expenses.find(x=>x.id===id);if(!e)return;
  const d=document.getElementById('ee-date').value.trim();
  const amt=parseFloat(document.getElementById('ee-amt').value);
  const desc=document.getElementById('ee-desc').value.trim();
  const st=document.getElementById('ee-status');
  if(!d||!amt||!desc){st.textContent='Date, amount, and description are required.';st.className='status-msg err';return;}
  e.date=d;
  e.amount=amt;
  e.category=document.getElementById('ee-cat').value;
  e.frequency=document.getElementById('ee-freq').value;
  e.desc=desc;
  e.notes=document.getElementById('ee-notes').value.trim();
  saveDB();closeModal();buildAdminMain();
}

function buildMileageLog(){
  const inv=DB.invoices.filter(i=>parseFloat(i.miles||0)>0);
  const total=inv.reduce((s,i)=>s+parseFloat(i.miles||0),0);
  const mi=parseFloat(DB.config.irs_mileage);
  const el=document.getElementById('mileage-content');
  el.innerHTML=`
    <div class="stat-grid g3c" style="margin-bottom:18px">
      <div class="stat-card"><div class="stat-label">Total Miles</div><div class="stat-val c-gld">${parseInt(total)}</div></div>
      <div class="stat-card"><div class="stat-label">IRS Rate</div><div class="stat-val">$${mi}/mi</div></div>
      <div class="stat-card c-grn"><div class="stat-label">Total Deduction</div><div class="stat-val c-grn">${fmtMoney(total*mi)}</div></div>
    </div>
    ${inv.length?`<div class="table-scroll"><table class="data-table"><thead><tr><th>Invoice #</th><th>Client</th><th>Date</th><th style="text-align:right">Miles</th><th style="text-align:right">Deduction</th></tr></thead><tbody>`+
    inv.map(i=>`<tr><td><span class="cell-primary">${i.num}</span></td><td>${i.client}</td><td>${i.date}</td><td style="text-align:right;font-family:'Barlow Condensed',sans-serif;font-weight:700;color:var(--gld)">${parseInt(i.miles||0)}</td><td style="text-align:right;color:var(--grn)">${fmtMoney((i.miles||0)*mi)}</td></tr>`).join('')+'</tbody></table></div>':
    '<div class="empty-state">No mileage logged yet. Add mileage line items to invoices.</div>'}`;
}

function buildCategories(){
  const groups={};DB.categories.forEach(c=>{groups[c.group]=groups[c.group]||[];groups[c.group].push(c);});
  document.getElementById('cat-list-container').innerHTML=Object.entries(groups).map(([g,cs])=>`
    <div class="card" style="margin-bottom:10px">
      <div class="card-title">${g}</div>
      <div>${cs.map(c=>`<span class="cat-tag">${c.name}<span class="cat-tag-rm" onclick="deleteCategory(${c.id})">×</span></span>`).join('')}</div>
    </div>`).join('');
}

function addCategory(){
  const n=document.getElementById('new-cat-name').value.trim();
  const g=document.getElementById('new-cat-group').value;
  if(!n)return;
  if(!DB.categories.find(c=>c.name===n)){DB.categories.push({id:DB.cat_id_seq++,name:n,group:g});saveDB();}
  document.getElementById('new-cat-name').value='';
  buildCategories();
}

function deleteCategory(id){
  if(!confirm('Remove this category?'))return;
  dbDelete('dd_categories',id);DB.categories=DB.categories.filter(c=>c.id!==id);saveDB();buildCategories();renderSettingsCats();
}

// ══════════════════════════════════════════════════════════════════════════════
// BILLING - PO LOG
// ══════════════════════════════════════════════════════════════════════════════
function buildBillingDashboard(){
  const inv=DB.invoices, pos=DB.pos;
  const mi=parseFloat(DB.config.irs_mileage||0.725);

  // Date label
  const dl=document.getElementById('billing-company-lbl');
  if(dl) dl.textContent=DB.config.company||'SDMC';

  // Invoice metrics
  const totalBilled=inv.reduce((s,i)=>s+parseFloat(i.total||0),0);
  const pending=inv.filter(i=>i.status==='Sent').reduce((s,i)=>s+parseFloat(i.total||0),0);
  const paid=inv.filter(i=>i.status==='Paid').reduce((s,i)=>s+parseFloat(i.total||0),0);
  const totalMiles=inv.reduce((s,i)=>s+parseFloat(i.miles||0),0);

  // PO metrics
  const poTotal=pos.reduce((s,p)=>s+parseFloat(p.total||0),0);
  const poOpen=pos.filter(p=>p.status==='Received').length;
  const poInvoiced=pos.filter(p=>p.status==='Invoiced').length;
  const poPaid=pos.filter(p=>p.status==='Paid').reduce((s,p)=>s+parseFloat(p.total||0),0);

  document.getElementById('billing-dash-stats').innerHTML=[
    ['Total Billed',   fmtMoney(totalBilled), `${inv.length} invoice${inv.length!==1?'s':''}`,       'c-grn','c-grn'],
    ['Pending',        fmtMoney(pending),      `${inv.filter(i=>i.status==='Sent').length} sent`,     'c-pur','c-pur'],
    ['Collected',      fmtMoney(paid),         `${inv.filter(i=>i.status==='Paid').length} paid`,     '',     'c-gld'],
    ['Open POs',       String(poOpen),         `${pos.length} total · ${fmtMoney(poTotal)}`,          'c-blu','c-blu'],
  ].map(([lbl,val,sub,cc,vc])=>`
    <div class="stat-card ${cc}">
      <div class="stat-label">${lbl}</div>
      <div class="stat-val ${vc}">${val}</div>
      <div class="stat-sub">${sub}</div>
    </div>`).join('');

  // Invoice status breakdown
  const invGroups={Sent:0,Paid:0,Overdue:0};
  inv.forEach(i=>{ if(invGroups[i.status]!==undefined) invGroups[i.status]++; });
  const maxInv=Math.max(inv.length,1);

  // PO status breakdown
  const poGroups={Received:0,Invoiced:0,Paid:0,Void:0};
  pos.forEach(p=>{ if(poGroups[p.status]!==undefined) poGroups[p.status]++; });
  const maxPO=Math.max(...Object.values(poGroups),1);

  const recentInv=[...inv].reverse().slice(0,5);
  const recentPO=[...pos].reverse().slice(0,5);

  renderWidgets('billing-dash',[
    {id:'inv-status', title:'Invoice Status', html:`
      ${Object.entries(invGroups).map(([l,v])=>`<div class="bar-row"><span class="bar-lbl">${l}</span><div class="bar-bg"><div class="bar-fill ${l==='Paid'?'gn':l==='Sent'?'pu':''}" style="width:${(v/maxInv*100).toFixed(0)}%"></div></div><span class="bar-val">${v}</span></div>`).join('')}
      <div class="dash-row" style="margin-top:8px;padding-top:8px;border-top:1px solid var(--ln)">
        <span class="dash-lbl">Outstanding</span><span class="dval pu">${fmtMoney(pending)}</span>
      </div>
      <div class="dash-row"><span class="dash-lbl">Collected</span><span class="dval gn">${fmtMoney(paid)}</span></div>`},
    {id:'po-status', title:'PO Status', html:`
      ${Object.entries(poGroups).map(([l,v])=>`<div class="bar-row"><span class="bar-lbl">${l}</span><div class="bar-bg"><div class="bar-fill ${l==='Paid'?'gn':l==='Invoiced'?'pu':''}" style="width:${(v/maxPO*100).toFixed(0)}%"></div></div><span class="bar-val">${v}</span></div>`).join('')}
      <div class="dash-row" style="margin-top:8px;padding-top:8px;border-top:1px solid var(--ln)">
        <span class="dash-lbl">Total PO value</span><span class="dval gl">${fmtMoney(poTotal)}</span>
      </div>
      <div class="dash-row"><span class="dash-lbl">Awaiting invoice</span><span class="dval bl">${poOpen}</span></div>`},
    {id:'recent-inv', title:'Recent Invoices', html:`
      ${recentInv.map(i=>`<div class="dash-row"><div><div style="font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--gld)">${i.num}</div><div style="font-size:10px;color:var(--g3)">${i.client} · ${i.date}</div></div><div style="text-align:right"><div class="dval gn">${fmtMoney(i.total)}</div><span class="badge badge-${i.status==='Paid'?'grn':i.status==='Sent'?'pur':i.status==='Draft'?'amb':'grey'}" style="font-size:8px">${i.status}</span></div></div>`).join('')}
      ${!recentInv.length?'<div style="font-size:12px;color:var(--g3);padding:8px 0">No invoices yet.</div>':''}
      <div style="display:flex;gap:8px;margin-top:10px">
        <button class="btn" style="flex:1" onclick="showPane('invoice_log','billing')">Invoice Log -></button>
        <button class="btn btn-primary" onclick="showPane('create_invoice','billing')">+ Create</button>
      </div>`},
    {id:'recent-po', title:'Recent Purchase Orders', html:`
      ${recentPO.map(p=>`<div class="dash-row"><div><div style="font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--gld)">PO #${p.num}</div><div style="font-size:10px;color:var(--g3)">${p.clientName||'-'} · ${p.date}</div></div><div style="text-align:right"><div class="dval gl">${fmtMoney(p.total)}</div><span class="badge badge-${p.status==='Paid'?'grn':p.status==='Invoiced'?'pur':p.status==='Void'?'grey':'gld'}" style="font-size:8px">${p.status}</span></div></div>`).join('')}
      ${!recentPO.length?'<div style="font-size:12px;color:var(--g3);padding:8px 0">No POs yet.</div>':''}
      <div style="display:flex;gap:8px;margin-top:10px">
        <button class="btn" style="flex:1" onclick="showPane('po_log','billing')">PO Log -></button>
        <button class="btn btn-primary" onclick="showPane('log_po','billing')">+ Log PO</button>
      </div>`},
  ], 'billing-dash-panels-1');
  const bdp2=document.getElementById('billing-dash-panels-2');if(bdp2)bdp2.innerHTML='';
}

function buildPOLog(){
  const pos=DB.pos;
  const s=(document.getElementById('po-search')||{}).value?.toLowerCase()||'';
  const f=(document.getElementById('po-status-filter')||{}).value||'';
  const filtered=pos.filter(p=>(!s||(p.num+p.clientName).toLowerCase().includes(s))&&(!f||p.status===f));
  const totalVal=pos.reduce((s,p)=>s+parseFloat(p.total||0),0);
  const invoiced=pos.filter(p=>['Invoiced','Paid'].includes(p.status)).length;
  const paidVal=pos.filter(p=>p.status==='Paid').reduce((s,p)=>s+parseFloat(p.total||0),0);
  document.getElementById('po-stat-cards').innerHTML=[
    ['Total POs',pos.length,'','c-gld'],
    ['PO Value',fmtMoney(totalVal),'',''],
    ['Invoiced',invoiced,'','c-pur'],
    ['Paid',fmtMoney(paidVal),'','c-grn'],
  ].map(([l,v,cc,vc])=>`<div class="stat-card ${cc}"><div class="stat-label">${l}</div><div class="stat-val ${vc}">${v}</div></div>`).join('');

  const el=document.getElementById('po-log-container');
  if(!el)return;
  if(!filtered.length){el.innerHTML='<div class="empty-state">'+(pos.length?'No matching POs.':'No POs logged yet.')+'</div>';return;}
  el.innerHTML=filtered.map(p=>`
    <div class="po-card ${p.linkedInvoice?'accent-grn':'accent-gld'}">
      <div class="po-head">
        <div style="flex:1;min-width:0">
          <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px">
            <span class="po-num">PO #${p.num}</span>
            <span class="badge badge-${p.status==='Paid'?'grn':p.status==='Invoiced'?'pur':p.status==='Void'?'grey':'gld'}">${p.status}</span>
            ${p.linkedInvoice?`<span class="badge badge-pur">-> ${p.linkedInvoice}</span>`:''}
            ${p.attachment?'<span class="badge badge-grey">📎 PDF</span>':''}
          </div>
          <div style="font-size:13px;font-weight:600;color:var(--w)">${p.clientName}</div>
          <div class="po-meta">${p.date}${p.svcDate?' · Service: '+p.svcDate:''} · ${fmtMoney(p.total)}${p.site?' · '+p.site:''}</div>
          ${p.lines.length?`<div class="po-meta">${p.lines[0].desc}${p.lines.length>1?' + '+(p.lines.length-1)+' more':''}</div>`:''}
        </div>
        <div class="po-actions">
          <button class="btn btn-green" onclick="viewPOModal('${p.id}')">View</button>
          ${!p.linkedInvoice?`<button class="btn btn-blue" onclick="invoiceFromPO('${p.id}')">Create Invoice</button>`:''}
          <select onchange="updatePOStatus('${p.id}',this.value)" style="width:120px;height:32px;font-size:11px">
            ${['Received','Invoiced','Paid','Void'].map(s=>`<option ${p.status===s?'selected':''}>${s}</option>`).join('')}
          </select>
          <button class="btn btn-icon" onclick="editPO('${p.id}')">✏</button>
          <button class="btn btn-icon btn-danger" onclick="deletePO('${p.id}')">×</button>
        </div>
      </div>
    </div>`).join('');
}
function renderPOLog(){buildPOLog();}

function updatePOStatus(id,status){const p=DB.pos.find(x=>x.id===id);if(p){p.status=status;saveDB();buildPOLog();}}
function deletePO(id){const p=DB.pos.find(x=>x.id===id);if(!p||!confirm('Delete PO #'+p.num+'?'))return;dbDelete('dd_pos',id);DB.pos=DB.pos.filter(x=>x.id!==id);saveDB();updateBadges();buildPOLog();}

function viewPOModal(id){
  const p=DB.pos.find(x=>x.id===id);if(!p)return;
  const rows=p.lines.map(l=>`<tr><td>${l.item}</td><td>${l.desc}</td><td style="text-align:right">${l.qty}</td><td style="text-align:right">${fmtMoney(l.rate)}</td><td style="text-align:right;font-weight:700">${fmtMoney(l.qty*l.rate)}</td></tr>`).join('');
  const docHTML=`
    <div class="doc-view">
      <div class="doc-header">
        <div><div class="doc-brand-name">${p.clientName}</div><div class="doc-brand-sub">${p.site||''}</div></div>
        <div><div class="doc-doc-title">Purchase Order</div><div class="doc-doc-num">#${p.num}</div></div>
      </div>
      <div class="doc-meta">
        <div><div class="doc-meta-lbl">Issued To</div><div class="doc-meta-val">SDMC · Benjamin Garcia</div></div>
        <div><div class="doc-meta-lbl">PO Date</div><div class="doc-meta-val">${p.date}</div></div>
        <div><div class="doc-meta-lbl">Service Date</div><div class="doc-meta-val">${p.svcDate||'-'}</div></div>
        <div><div class="doc-meta-lbl">Status</div><div class="doc-meta-val"><span class="badge badge-${p.status==='Paid'?'grn':p.status==='Invoiced'?'pur':'gld'}">${p.status}</span></div></div>
        <div><div class="doc-meta-lbl">Terms</div><div class="doc-meta-val">${p.terms||'-'}</div></div>
        ${p.linkedInvoice?`<div><div class="doc-meta-lbl">Linked Invoice</div><div class="doc-meta-val" style="color:var(--pur)">${p.linkedInvoice}</div></div>`:''}
      </div>
      <table class="data-table"><thead><tr><th>Item</th><th>Description</th><th style="text-align:right">Qty</th><th style="text-align:right">Rate</th><th style="text-align:right">Amount</th></tr></thead><tbody>${rows}</tbody></table>
      <div class="doc-total-row">PO Total: ${fmtMoney(p.total)}</div>
      ${p.notes?`<div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--ln);font-size:12px;color:var(--g3)">${p.notes}</div>`:''}
      <div class="doc-footer-line">PO #${p.num} · ${p.clientName} · DirectDrive · SDMC</div>
    </div>`;
  const origHTML=p.attachment?
    `<div style="text-align:center"><img src="${p.attachment}" style="max-width:100%;border-radius:4px;border:1px solid var(--ln2)"></div>`:
    `<div class="no-pdf-msg"><span class="no-pdf-icon">📎</span>No original PDF was attached when this PO was logged.<br><small>Edit this PO and re-save to attach the original.</small></div>`;

  const body=`
    <div class="modal-tab-panel" id="mtp-doc" style="display:block">${docHTML}</div>
    <div class="modal-tab-panel" id="mtp-orig" style="display:none">${origHTML}</div>`;
  openDocViewer(`PO #${p.num} - ${p.clientName}`, body);
  document.getElementById('doc-viewer-toolbar').dataset.editId = p.id;
  document.getElementById('doc-viewer-toolbar').dataset.editType = 'po';
}

// LOG NEW PO
let poLinesData=[], poFileData=null, poFileName=null, poLineSeq=0;
function buildLogPO(){
  if(!_editPOData){const b=document.getElementById('po-discard-btn');if(b)b.style.display='none';_discardPOBackup=null;}
  // Always rebuild client dropdown
  const sel=document.getElementById('po-client-sel');
  sel.innerHTML='<option value="">- Select client -</option>'+DB.clients.map(c=>`<option value="${c.id}">${c.company}</option>`).join('');

  if(_editPOData){
    const p=_editPOData; _editPOData=null;
    document.getElementById('po-num').value=p.num;
    document.getElementById('po-date').value=p.date||'';
    document.getElementById('po-svc-date').value=p.svcDate||'';
    document.getElementById('po-status-sel').value=p.status||'Received';
    sel.value=p.clientId||'';
    document.getElementById('po-client-name').value=p.clientName||'';
    document.getElementById('po-site').value=p.site||'';
    document.getElementById('po-terms').value=p.terms||'';
    document.getElementById('po-notes-field').value=p.notes||'';
    poLinesData=JSON.parse(JSON.stringify(p.lines||[]));
    poLineSeq=poLinesData.length?Math.max(...poLinesData.map(l=>l.id),0):0;
    poFileData=p.attachment||null; poFileName=p.attachmentName||null;
    if(poFileData){document.getElementById('po-upload-zone').classList.add('has-file');document.getElementById('po-upload-lbl').textContent='✓ '+poFileName;}
    else{document.getElementById('po-upload-zone').classList.remove('has-file');document.getElementById('po-upload-lbl').textContent='Supports PDF, JPG, PNG - stored with this PO record';}
    renderPOLines();
    const st=document.getElementById('po-status-msg');if(st){st.textContent='Editing PO #'+p.num;st.className='status-msg ok';}
    // Remove old record so save creates fresh
    DB.pos=DB.pos.filter(x=>x.id!==p.id);
    return;
  }

  // Fresh new PO
  document.getElementById('po-date').value=todayStr();
  document.getElementById('po-status-sel').value='Received';
  poLinesData=[]; poFileData=null; poFileName=null;
  document.getElementById('po-upload-zone').classList.remove('has-file');
  document.getElementById('po-upload-lbl').textContent='Supports PDF, JPG, PNG - stored with this PO record';
  renderPOLines();
}

function handlePOFile(input){
  const file=input.files[0];if(!file)return;
  const zone=document.getElementById('po-upload-zone');zone.classList.add('has-file');
  document.getElementById('po-upload-lbl').textContent='✓ '+file.name;
  poFileName=file.name;
  const reader=new FileReader();reader.onload=e=>{poFileData=e.target.result;};reader.readAsDataURL(file);
}
function onPOClientSelect(){
  const id=document.getElementById('po-client-sel').value;if(!id)return;
  const c=DB.clients.find(x=>x.id===id);if(!c)return;
  document.getElementById('po-client-name').value=c.company;
  if(c.sites?.length)document.getElementById('po-site').value=c.sites[0].name+(c.sites[0].addr?' - '+c.sites[0].addr:'');
  if(c.terms)document.getElementById('po-terms').value=c.terms;
}
function addPOLine(item='',desc='',qty='1',rate='0'){
  poLineSeq++;poLinesData.push({id:poLineSeq,item,desc,qty,rate});renderPOLines();
}
function removePOLine(id){poLinesData=poLinesData.filter(l=>l.id!==id);renderPOLines();}
function renderPOLines(){
  const c=document.getElementById('po-lines-container');if(!c)return;
  if(!poLinesData.length){c.innerHTML='<div style="font-size:12px;color:var(--g3);padding:6px 0">No line items. Click + Add Line.</div>';updatePOTotal();return;}
  c.innerHTML=poLinesData.map(l=>`
    <div class="li-row" id="plr-${l.id}">
      <input value="${l.item}" placeholder="Item" oninput="updatePOLine(${l.id},'item',this.value)" style="height:30px;font-size:11px">
      <input value="${l.desc}" placeholder="Description" oninput="updatePOLine(${l.id},'desc',this.value)" style="height:30px;font-size:11px">
      <input type="number" value="${l.qty}" oninput="updatePOLine(${l.id},'qty',this.value)" style="height:30px;font-size:11px;text-align:right">
      <input type="number" value="${l.rate}" step="0.01" oninput="updatePOLine(${l.id},'rate',this.value)" style="height:30px;font-size:11px;text-align:right">
      <span class="li-amt" id="pla-${l.id}">${fmtMoney(parseFloat(l.qty||0)*parseFloat(l.rate||0))}</span>
      <button class="btn btn-icon btn-danger" onclick="removePOLine(${l.id})">×</button>
    </div>`).join('');
  updatePOTotal();
}
function updatePOLine(id,field,val){
  const l=poLinesData.find(x=>x.id===id);if(!l)return;l[field]=val;
  const el=document.getElementById('pla-'+id);if(el)el.textContent=fmtMoney(parseFloat(l.qty||0)*parseFloat(l.rate||0));
  updatePOTotal();
}
function updatePOTotal(){
  const t=poLinesData.reduce((s,l)=>s+parseFloat(l.qty||0)*parseFloat(l.rate||0),0);
  const el=document.getElementById('po-total-val');if(el)el.textContent=fmtMoney(t);
}
function savePO(){
  const num=(document.getElementById('po-num').value||'').trim();
  const cname=(document.getElementById('po-client-name').value||'').trim();
  const st=document.getElementById('po-status-msg');
  if(!num||!cname){if(st){st.textContent='PO number and client name are required.';st.className='status-msg err';}return;}
  const lines=poLinesData.map(l=>({id:l.id,item:l.item,desc:l.desc,qty:parseFloat(l.qty||0),rate:parseFloat(l.rate||0)}));
  const total=lines.reduce((s,l)=>s+l.qty*l.rate,0);
  const po={
    id:uid(),num,date:document.getElementById('po-date').value,
    svcDate:document.getElementById('po-svc-date').value,
    status:document.getElementById('po-status-sel').value,
    clientId:document.getElementById('po-client-sel').value||null,
    clientName:cname,site:document.getElementById('po-site').value.trim(),
    terms:document.getElementById('po-terms').value.trim(),
    lines,total,notes:document.getElementById('po-notes-field').value.trim(),
    attachment:poFileData,attachmentName:poFileName,
    linkedInvoice:null,created:new Date().toISOString()
  };
  // Update client PO history
  const c=DB.clients.find(x=>x.id===po.clientId);
  if(c){c.pos=c.pos||[];c.pos.push({num:po.num,date:po.date,amount:total,desc:lines[0]?.desc||''});}
  DB.pos.push(po);saveDB();updateBadges();
  if(st){st.textContent=`✓ PO #${num} saved.`;st.className='status-msg ok';}
  showPane('po_log','billing');buildPOLog();
}
function discardPO(){
  if(_discardPOBackup){ DB.pos=DB.pos.filter(x=>x.id!==_discardPOBackup.id); DB.pos.push(_discardPOBackup); _discardPOBackup=null; }
  _editPOData=null;
  const b=document.getElementById('po-discard-btn');if(b)b.style.display='none';
  showPane('po_log','billing');
}
function clearPOForm(){
  ['po-num','po-svc-date','po-client-name','po-site','po-terms','po-notes-field'].forEach(id=>{const el=document.getElementById(id);if(el)el.value='';});
  document.getElementById('po-date').value=todayStr();
  document.getElementById('po-client-sel').value='';
  poLinesData=[];poFileData=null;poFileName=null;
  document.getElementById('po-upload-zone').classList.remove('has-file');
  document.getElementById('po-upload-lbl').textContent='Supports PDF, JPG, PNG - stored with this PO record';
  renderPOLines();
  const st=document.getElementById('po-status-msg');if(st){st.textContent='';st.className='status-msg';}
}
function editPO(id){
  const p=DB.pos.find(x=>x.id===id);if(!p)return;
  _discardPOBackup=JSON.parse(JSON.stringify(p));
  _editPOData={...p, lines:JSON.parse(JSON.stringify(p.lines||[]))};
  showPane('log_po','billing');
  setTimeout(()=>{const b=document.getElementById('po-discard-btn');if(b)b.style.display='';},80);
}

// ══════════════════════════════════════════════════════════════════════════════
// BILLING - INVOICE LOG
// ══════════════════════════════════════════════════════════════════════════════
function buildInvoiceLog(){
  const inv=DB.invoices;
  const s=(document.getElementById('inv-search')||{}).value?.toLowerCase()||'';
  const f=(document.getElementById('inv-status-filter')||{}).value||'';
  const filtered=inv.filter(i=>(!s||(i.num+i.client+(i.po||'')).toLowerCase().includes(s))&&(!f||i.status===f));
  const ti=inv.reduce((s,i)=>s+parseFloat(i.total||0),0);
  const pending=inv.filter(i=>i.status==='Sent').reduce((s,i)=>s+parseFloat(i.total||0),0);
  document.getElementById('inv-stat-cards').innerHTML=[
    ['Total Invoices',inv.length,'','c-gld'],
    ['Total Billed',fmtMoney(ti),'','c-grn'],
    ['Pending',fmtMoney(pending),'','c-pur'],
    ['Paid',inv.filter(i=>i.status==='Paid').length,'','c-grn'],
  ].map(([l,v,cc,vc])=>`<div class="stat-card ${cc}"><div class="stat-label">${l}</div><div class="stat-val ${vc}">${v}</div></div>`).join('');

  const el=document.getElementById('inv-log-container');
  if(!el)return;
  if(!filtered.length){el.innerHTML='<div class="empty-state">'+(inv.length?'No matches.':'No invoices saved yet.')+'</div>';return;}
  el.innerHTML=`<div class="table-scroll"><table class="data-table"><thead><tr><th>Invoice #</th><th>Client</th><th>Date</th><th>PO Ref</th><th style="text-align:right">Total</th><th>Status</th><th></th></tr></thead><tbody>`+
    [...filtered].reverse().map(i=>`<tr>
      <td><span class="cell-primary">${i.num}</span>${i.linkedFRNum?`<div class="cell-sub" style="color:var(--pur)">FR: ${i.linkedFRNum}</div>`:''}</td>
      <td>${i.client}${i.subClient?`<div class="cell-sub">${i.subClient}</div>`:i.site?`<div class="cell-sub">${i.site}</div>`:''}</td>
      <td>${i.date}</td>
      <td>${i.po||'-'}</td>
      <td style="text-align:right;font-family:'Barlow Condensed',sans-serif;font-weight:700;color:var(--grn)">${fmtMoney(i.total)}</td>
      <td><span class="badge badge-${i.status==='Paid'?'grn':i.status==='Sent'?'pur':i.status==='Draft'?'amb':'grey'}">${i.status}</span></td>
      <td style="display:flex;gap:5px"><button class="btn btn-green" onclick="viewInvoiceModal('${i.id}')">View</button><button class="btn btn-icon" onclick="editInvoice('${i.id}')" title="Edit">✏</button><button class="btn btn-icon btn-danger" onclick="delInvoice('${i.id}')">×</button></td>
    </tr>`).join('')+'</tbody></table></div>';
}
function renderInvoiceLog(){buildInvoiceLog();}

function delInvoice(id){if(!confirm("Delete this invoice?"))return;dbDelete('dd_invoices',id);DB.invoices=DB.invoices.filter(i=>i.id!==id);saveDB();updateBadges();buildInvoiceLog();}

function viewInvoiceModal(id){
  const inv=DB.invoices.find(x=>x.id===id);if(!inv)return;
  const rows=(inv.lines||[]).map(l=>`<tr><td>${l.item}</td><td>${l.desc}</td><td class="r">${l.qty}</td><td class="r">$${parseFloat(l.rate||0).toFixed(2)}</td><td class="r">$${parseFloat(l.amt||0).toFixed(2)}</td></tr>`).join('');
  const timeBar=(inv.arrival||inv.departure)?`<div class="pd-time-bar" style="margin-bottom:16px">
    ${inv.arrival?`<div class="pd-time-item"><div class="pd-time-lbl">Arrival</div><div class="pd-time-val">${inv.arrival}</div></div>`:''}
    ${inv.departure?`<div class="pd-time-item"><div class="pd-time-lbl">Departure</div><div class="pd-time-val">${inv.departure}</div></div>`:''}
    ${inv.hoursHHMM?`<div class="pd-time-item"><div class="pd-time-lbl">Time on Site</div><div class="pd-time-val">${inv.hoursHHMM} (${parseFloat(inv.hoursDecimal||0).toFixed(2)} hrs)</div></div>`:''}
  </div>`:'';
  const body=`<div class="print-doc">
    <div class="pd-header">
      <div>
        <div class="pd-co-name">${DB.config.company||'SDMC'}</div>
        <div class="pd-co-info">${DB.config.technician||'Benjamin Garcia'} · ${DB.config.role||'Machine Technician'}<br>619-847-4485 · ben.gee224@gmail.com</div>
      </div>
      <div class="pd-title-block">
        <div class="pd-doc-label">Invoice</div>
        <div class="pd-doc-num">${inv.num}</div>
      </div>
    </div>
    <div class="pd-meta">
      <div><div class="pd-meta-lbl">Bill To</div><div class="pd-meta-val">${inv.client}</div></div>
      <div><div class="pd-meta-lbl">Service Date</div><div class="pd-meta-val">${inv.date}</div></div>
      <div><div class="pd-meta-lbl">PO Reference</div><div class="pd-meta-val">${inv.po||'-'}</div></div>
      ${inv.subClient?`<div><div class="pd-meta-lbl">Sub-Client</div><div class="pd-meta-val">${inv.subClient}</div></div>`:''}
      ${inv.site?`<div><div class="pd-meta-lbl">Site</div><div class="pd-meta-val">${inv.site}</div></div>`:''}
      ${inv.linkedFRNum?`<div><div class="pd-meta-lbl">Field Report</div><div class="pd-meta-val">${inv.linkedFRNum}</div></div>`:''}
    </div>
    ${timeBar}
    <div class="pd-section-lbl">Services</div>
    <table class="pd-table">
      <thead><tr><th>Item</th><th>Description</th><th class="r">Qty</th><th class="r">Rate</th><th class="r">Amount</th></tr></thead>
      <tbody>${rows}</tbody>
      <tfoot><tr><td colspan="4" class="r">Total Due</td><td class="r">${fmtMoney(inv.total)}</td></tr></tfoot>
    </table>
    ${inv.notes?`<div class="pd-notes-lbl">Notes</div><div class="pd-notes">${inv.notes}</div>`:''}
    <div class="pd-footer">${DB.config.company||'SDMC'} &nbsp;·&nbsp; ${inv.num} &nbsp;·&nbsp; Thank you for your business</div>
  </div>`;
  openDocViewer(`Invoice ${inv.num}`, body);
  // Store edit target for toolbar
  document.getElementById('doc-viewer-toolbar').dataset.editId = id;
  document.getElementById('doc-viewer-toolbar').dataset.editType = 'invoice';
}

function editInvoice(id){
  const inv=DB.invoices.find(x=>x.id===id);if(!inv)return;
  _discardInvoiceBackup=JSON.parse(JSON.stringify(inv));
  _editInvoiceData={...inv};
  window._currentEditId=id;
  closeModal();
  // skipBuild=true so the invoice form-preservation guard doesn't block us,
  // then call buildCreateInvoice() directly to force-populate with this invoice's data.
  showPane('create_invoice','billing',true);
  buildCreateInvoice();
  const b=document.getElementById('inv-discard-btn');
  if(b){b.innerHTML='&times;';b.title='Discard Changes';b.className='btn btn-icon btn-danger form-exit-btn';}
}

// ══════════════════════════════════════════════════════════════════════════════
// CREATE INVOICE
// ══════════════════════════════════════════════════════════════════════════════
var invLines=[], invLineSeq=0, activePresetId=null, _prefillPO=null, _editInvoiceData=null, _editPOData=null, _dragSrcIdx=null;
var _discardInvoiceBackup=null, _discardPOBackup=null, _discardClientBackup=null, _discardSCBackup=null;

function buildCreateInvoice(){
  if(!_editInvoiceData){const b=document.getElementById('inv-discard-btn');if(b){b.innerHTML='&times;';b.title='Cancel';b.className='btn btn-icon form-exit-btn';}  _discardInvoiceBackup=null;}
  const prefix=DB.config.inv_prefix||'FT';
  const num=DB.config.last_inv_num||2;
  // Client selectors
  const cSel=document.getElementById('inv-client-sel');
  cSel.innerHTML='<option value="">- Select client -</option>'+DB.clients.map(c=>`<option value="${c.id}">${c.company}</option>`).join('');
  document.getElementById('inv-subclient-sel').innerHTML='<option value="">- None -</option>';
  // FR link selector
  const frSel=document.getElementById('inv-fr-link');
  frSel.innerHTML='<option value="">- None -</option>'+DB.field_reports.map(r=>`<option value="${r.id}">${r.num} - ${r.subClientName||r.parentClientName} (${r.date}) · ${r.totalHoursDecimal||'?'} hrs</option>`).join('');
  // Mileage rate
  document.getElementById('inv-mi-rate').value=DB.config.irs_mileage||0.725;

  // Handle EDIT prefill
  if(_editInvoiceData){
    const inv=_editInvoiceData; _editInvoiceData=null;
    // Core fields
    document.getElementById('inv-num').value=inv.num;
    document.getElementById('inv-svc-date').value=inv.date;
    document.getElementById('inv-po-ref').value=inv.po||'';
    document.getElementById('inv-client-name').value=inv.client;
    document.getElementById('inv-site').value=inv.site||'';
    document.getElementById('inv-arrival').value=inv.arrival||'';
    document.getElementById('inv-departure').value=inv.departure||'';
    document.getElementById('inv-tos-date').value=inv.tosDate||'';
    document.getElementById('inv-notes').value=inv.notes||'';
    // Job type
    if(inv.jobType) document.getElementById('inv-job-type').value=inv.jobType;
    // Try to match and restore client selector
    const matchClient=DB.clients.find(c=>c.company===inv.client);
    if(matchClient){
      cSel.value=matchClient.id;
      onInvClientSelect();
      // Restore sub-client after selector re-populates
      if(inv.subClient){
        const matchSC=DB.sub_clients.find(s=>s.name===inv.subClient&&s.parentId===matchClient.id);
        if(matchSC) setTimeout(()=>{ document.getElementById('inv-subclient-sel').value=matchSC.id; },60);
      }
    }
    // Restore FR link if present
    if(inv.linkedFRId){
      const frSel=document.getElementById('inv-fr-link');
      if(frSel) frSel.value=inv.linkedFRId;
    }
    // Restore hours display
    calcInvHours();
    // Restore line items preserving order
    invLines=(inv.lines||[]).map(l=>({...l, id:++invLineSeq}));
    // Banner
    document.getElementById('inv-po-banner').innerHTML=`<div class="suggest-banner" style="margin-bottom:14px;border-left-color:var(--pur)"><div><div style="font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;color:var(--pur)">✏ Editing Invoice ${inv.num}</div><div style="font-size:11px;color:var(--g3)">Make your changes then click Confirm &amp; Save to update.</div></div></div>`;
    renderInvLines(); refreshPresets(); return;
  }

  // Handle FROM-PO prefill
  if(_prefillPO){
    const p=_prefillPO;_prefillPO=null;
    document.getElementById('inv-num').value=`${prefix}-${String(num).padStart(3,'0')}`;
    document.getElementById('inv-svc-date').value=p.svcDate||todayStr();
    document.getElementById('inv-po-ref').value=p.num;
    document.getElementById('inv-client-name').value=p.clientName;
    if(p.site)document.getElementById('inv-site').value=p.site;
    if(p.clientId){cSel.value=p.clientId;onInvClientSelect();}
    invLines=[];p.lines.forEach(l=>invLines.push({id:++invLineSeq,item:l.item,desc:l.desc,qty:l.qty,rate:l.rate,amt:l.qty*l.rate,_m:l.item.toLowerCase().includes('mile')}));
    document.getElementById('inv-notes').value='Work completed per PO #'+p.num;
    document.getElementById('inv-po-banner').innerHTML=`<div class="suggest-banner" style="margin-bottom:14px"><div><div style="font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;color:var(--grn)">Pre-filled from PO #${p.num}</div><div style="font-size:12px;color:var(--w2)">${p.clientName} · ${fmtMoney(p.total)}</div></div><button class="btn btn-icon btn-danger" onclick="document.getElementById('inv-po-banner').innerHTML=''">×</button></div>`;
  }else{
    document.getElementById('inv-num').value='';
    document.getElementById('inv-svc-date').value='';
    ['inv-po-ref','inv-client-name','inv-site','inv-arrival','inv-departure','inv-tos-date','inv-notes','inv-miles-ow','inv-miles-rt','inv-mi-total'].forEach(id=>{const e=document.getElementById(id);if(e)e.value='';});
    document.getElementById('inv-po-banner').innerHTML='';
    window._currentEditId=null;
    document.getElementById('inv-hours-display').textContent='- hrs';
    document.getElementById('inv-hours-display').style.color='var(--g3)';
    invLines=[];
  }
  document.getElementById('inv-client-pill').innerHTML='';
  calcInvHours();renderInvLines();refreshPresets();
  document.getElementById('inv-preview-area').innerHTML='';
}

function onInvClientSelect(){
  const id=document.getElementById('inv-client-sel').value;
  if(!id){clearInvClient();return;}
  const c=DB.clients.find(x=>x.id===id);if(!c)return;
  document.getElementById('inv-client-name').value=c.company;
  if(c.sites?.length)document.getElementById('inv-site').value=c.sites[0].name+(c.sites[0].addr?' - '+c.sites[0].addr:'');
  // Populate sub-clients for this parent
  const scSel=document.getElementById('inv-subclient-sel');
  scSel.innerHTML='<option value="">- None -</option>'+DB.sub_clients.filter(s=>s.parentId===id).map(s=>`<option value="${s.id}">${s.name}</option>`).join('');
  document.getElementById('inv-client-pill').innerHTML=`
    <div style="display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--k3);border:1px solid var(--gld);border-radius:var(--radius2)">
      <div class="entity-icon" style="width:30px;height:30px;font-size:11px">${initials(c.company)}</div>
      <div><div style="font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--gld)">${c.company}</div>
      <div style="font-size:11px;color:var(--g3)">${c.contact||''}${c.phone?' · '+c.phone:''} · ${c.terms||''}</div></div>
    </div>`;
}
function onInvSubClientSelect(){
  const id=document.getElementById('inv-subclient-sel').value;if(!id)return;
  const sc=DB.sub_clients.find(x=>x.id===id);if(!sc)return;
  if(sc.addr)document.getElementById('inv-site').value=sc.name+' - '+sc.addr+(sc.city?' '+sc.city:'');
}
function clearInvClient(){
  document.getElementById('inv-client-sel').value='';
  document.getElementById('inv-subclient-sel').innerHTML='<option value="">- None -</option>';
  document.getElementById('inv-client-name').value='';
  document.getElementById('inv-site').value='';
  document.getElementById('inv-client-pill').innerHTML='';
}

function onInvFRLink(){
  const id=document.getElementById('inv-fr-link').value;if(!id)return;
  const r=DB.field_reports.find(x=>x.id===id);if(!r)return;
  // Pull time from FR
  if(r.days?.length){
    document.getElementById('inv-arrival').value=r.days[0].arr||'';
    document.getElementById('inv-departure').value=r.days[0].dep||'';
    document.getElementById('inv-tos-date').value=r.days[0].date||r.date;
  }
  calcInvHours();
  // Pre-fill hours into any Per Hour labor line
  const hrs=parseFloat(document.getElementById('inv-hours-display').dataset.decimal||0);
  if(hrs>0){
    const laborLine=invLines.find(l=>l._preset&&l.item==='Labor');
    const hourlyPreset=DB.presets.find(p=>p.tag==='Per Hour'&&p.type===(document.getElementById('inv-job-type').value||'local'));
    if(laborLine&&hourlyPreset){laborLine.qty=hrs;laborLine.amt=hrs*laborLine.rate;renderInvLines();}
  }
  // Auto-fill client/PO if blank
  if(!document.getElementById('inv-client-name').value&&r.parentClientName)document.getElementById('inv-client-name').value=r.parentClientName;
  if(!document.getElementById('inv-po-ref').value&&r.linkedPO)document.getElementById('inv-po-ref').value=r.linkedPO;
  if(!document.getElementById('inv-site').value&&r.subClientName)document.getElementById('inv-site').value=r.subClientName;
}

function calcInvHours(){
  const arr=document.getElementById('inv-arrival').value;
  const dep=document.getElementById('inv-departure').value;
  const d=document.getElementById('inv-hours-display');
  if(!d)return;
  if(arr&&dep){
    const a=parseTm(arr),dp=parseTm(dep);
    if(a!==null&&dp!==null){
      let mins=dp-a;if(mins<0)mins+=1440;
      const hhmm=minsToHHMM(mins),dec=minsToDec(mins);
      d.textContent=hhmm+' ('+dec+' hrs)';
      d.style.color='var(--grn)';
      d.dataset.decimal=dec;
      return;
    }
  }
  d.textContent='- hrs';d.style.color='var(--g3)';d.dataset.decimal='0';
}

function calcInvMileage(){
  const ow=parseFloat(document.getElementById('inv-miles-ow').value)||0;
  const mi=parseFloat(DB.config.irs_mileage||0.725);
  const rt=ow*2,total=rt*mi;
  document.getElementById('inv-miles-rt').value=rt;
  document.getElementById('inv-mi-total').value=total.toFixed(2);
}

function addMileageFromCalc(){
  const rt=parseFloat(document.getElementById('inv-miles-rt').value)||0;
  const mi=parseFloat(DB.config.irs_mileage||0.725);
  if(!rt){alert('Enter one-way miles first.');return;}
  invLines.push({id:++invLineSeq,item:'Mileage',desc:`Round trip · ${rt} mi @ $${mi}/mi`,qty:rt,rate:mi,amt:rt*mi,_m:true});
  renderInvLines();
}

function addTravelFee(){invLines.push({id:++invLineSeq,item:'Travel Fee',desc:DB.config.travel_fee_desc||'Round trip travel fee',qty:1,rate:parseFloat(DB.config.travel_fee||1000),amt:parseFloat(DB.config.travel_fee||1000),_travel:true});renderInvLines();}
function addTravelTimeLine(){
  const hr=document.getElementById('inv-hours-display').dataset.decimal||'2';
  const rate=DB.presets.find(p=>p.tag==='Per Hour')?.rate||70;
  const qty=parseFloat(hr)||2;
  invLines.push({id:++invLineSeq,item:'Travel Time',desc:'Portal-to-portal travel time',qty,rate,amt:qty*rate});
  renderInvLines();
}
function addCustomLine(){invLines.push({id:++invLineSeq,item:'',desc:'',qty:1,rate:0,amt:0});renderInvLines();}
function removeInvLine(id){invLines=invLines.filter(l=>l.id!==id);renderInvLines();}

function renderInvLines(){
  const c=document.getElementById('inv-lines-container');if(!c)return;
  if(!invLines.length){c.innerHTML='<div style="font-size:12px;color:var(--g3);padding:6px 0">Select a preset or add lines manually.</div>';updateInvTotal();return;}
  c.innerHTML=invLines.map((l,idx)=>`
    <div class="li-row-drag" data-idx="${idx}" draggable="true"
      ondragstart="liDragStart(event,${idx})" ondragover="liDragOver(event,${idx})" ondragend="liDragEnd(event)"
      style="grid-template-columns:28px 1fr 2fr 70px 90px 90px 30px">
      <span class="drag-handle" title="Drag to reorder">☰</span>
      <input value="${l.item.replace(/"/g,'&quot;')}" placeholder="Item" oninput="updInvLine(${l.id},'item',this.value)" style="height:30px;font-size:11px">
      <input value="${l.desc.replace(/"/g,'&quot;')}" placeholder="Description" oninput="updInvLine(${l.id},'desc',this.value)" style="height:30px;font-size:11px">
      <input type="number" value="${l.qty}" oninput="updInvLine(${l.id},'qty',parseFloat(this.value)||0)" style="height:30px;font-size:11px;text-align:right">
      <input type="number" value="${l.rate}" step="0.001" oninput="updInvLine(${l.id},'rate',parseFloat(this.value)||0)" ${l._m?'readonly':''} style="height:30px;font-size:11px;text-align:right${l._m?';opacity:.35':''}">
      <span class="li-amt" id="ila-${l.id}">${fmtMoney((l.qty||0)*(l.rate||0))}</span>
      <button class="btn btn-icon btn-danger" onclick="removeInvLine(${l.id})">×</button>
    </div>`).join('');
  updateInvTotal();
}
function liDragStart(e,idx){_dragSrcIdx=idx;e.currentTarget.classList.add('dragging');}
function liDragOver(e,idx){
  e.preventDefault();
  if(idx===_dragSrcIdx)return;
  document.querySelectorAll('.li-row-drag').forEach(r=>r.classList.remove('drag-over'));
  e.currentTarget.classList.add('drag-over');
}
function liDragEnd(e){
  const rows=document.querySelectorAll('.li-row-drag');
  rows.forEach(r=>r.classList.remove('dragging','drag-over'));
  const overRow=[...rows].find(r=>r.classList.contains('drag-over'));
  if(overRow&&_dragSrcIdx!==null){
    const toIdx=parseInt(overRow.dataset.idx);
    if(toIdx!==_dragSrcIdx){
      const moved=invLines.splice(_dragSrcIdx,1)[0];
      invLines.splice(toIdx,0,moved);
    }
  }
  _dragSrcIdx=null;renderInvLines();
}
function updInvLine(id,f,v){const l=invLines.find(x=>x.id===id);if(!l)return;l[f]=v;l.amt=(l.qty||0)*(l.rate||0);const el=document.getElementById('ila-'+id);if(el)el.textContent=fmtMoney(l.amt);updateInvTotal();}
function updateInvTotal(){const t=invLines.reduce((s,l)=>s+(l.qty||0)*(l.rate||0),0);const el=document.getElementById('inv-total-val');if(el)el.textContent=fmtMoney(t);}

function openPOPicker(){
  const available=DB.pos.filter(p=>!p.linkedInvoice);
  if(!available.length){alert('No unlinked POs available.');return;}
  const body='<div>'+available.map(p=>`
    <div class="po-card accent-gld" style="cursor:pointer" onclick="linkPOToInvoice('${p.id}');closeModal()">
      <div class="po-num">PO #${p.num}</div>
      <div style="font-size:12px;color:var(--w2)">${p.clientName} · ${p.date} · ${fmtMoney(p.total)}</div>
      <div style="font-size:11px;color:var(--g3)">${p.lines[0]?.desc||'-'}</div>
    </div>`).join('')+'</div>';
  openModal('Select PO to Link', body, '<button class="btn" onclick="closeModal()">Cancel</button>');
}
function linkPOToInvoice(id){
  const p=DB.pos.find(x=>x.id===id);if(!p)return;
  document.getElementById('inv-po-ref').value=p.num;
  document.getElementById('inv-client-name').value=p.clientName;
  if(p.site)document.getElementById('inv-site').value=p.site;
  if(p.clientId){document.getElementById('inv-client-sel').value=p.clientId;onInvClientSelect();}
  if(p.svcDate)document.getElementById('inv-svc-date').value=p.svcDate;
  invLines=[];p.lines.forEach(l=>invLines.push({id:++invLineSeq,item:l.item,desc:l.desc,qty:l.qty,rate:l.rate,amt:l.qty*l.rate,_m:l.item.toLowerCase().includes('mile')}));
  renderInvLines();
  document.getElementById('inv-notes').value='Work completed per PO #'+p.num;
  document.getElementById('inv-po-banner').innerHTML=`<div class="suggest-banner"><div style="font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;color:var(--grn)">Linked to PO #${p.num}</div></div>`;
}
function invoiceFromPO(id){_prefillPO=DB.pos.find(x=>x.id===id)||null;showPane('create_invoice','billing');}

function refreshPresets(){
  const type=document.getElementById('inv-job-type')?.value||'local';
  const pg=document.getElementById('preset-grid');if(!pg)return;
  pg.innerHTML=DB.presets.filter(p=>p.type===type).map(p=>`
    <div class="preset-card ${activePresetId===p.id?'active':''}" onclick="applyPreset(${p.id})">
      <div class="preset-name">${p.name}</div>
      <div class="preset-rate">$${p.rate.toLocaleString()}<span style="font-size:12px;color:var(--g3)">${p.tag==='Per Hour'?'/hr':''}</span></div>
      <span class="preset-tag">${p.tag}</span>
    </div>`).join('');
}
function applyPreset(id){
  const p=DB.presets.find(x=>x.id===id);if(!p)return;
  activePresetId=id;
  invLines=invLines.filter(l=>!l._preset);
  // If per-hour preset, use hours from time tracker
  const decHrs=parseFloat(document.getElementById('inv-hours-display')?.dataset.decimal||0);
  const qty=p.tag==='Per Hour'?(decHrs>0?decHrs:8):1;
  invLines.unshift({id:++invLineSeq,item:'Labor',desc:p.desc,qty,rate:p.rate,amt:qty*p.rate,_preset:true});
  const type=document.getElementById('inv-job-type').value;
  if(type==='oot'&&!invLines.find(l=>l._travel))invLines.push({id:++invLineSeq,item:'Travel Fee',desc:DB.config.travel_fee_desc||'Round trip travel fee',qty:1,rate:parseFloat(DB.config.travel_fee||1000),amt:parseFloat(DB.config.travel_fee||1000),_travel:true});
  if(type==='local')invLines=invLines.filter(l=>!l._travel);
  refreshPresets();renderInvLines();
  const st=document.getElementById('inv-status-msg');if(st){st.textContent='Preset: '+p.name+(qty>1&&p.tag==='Per Hour'?' ('+qty+' hrs from time tracker)':'');st.className='status-msg ok';}
}

function addMileageLine(){invLines.push({id:++invLineSeq,item:'Mileage',desc:'Per mile travel charges',qty:0,rate:parseFloat(DB.config.irs_mileage||0.725),amt:0,_m:true});renderInvLines();}

function previewInvoice(){
  const num=(document.getElementById('inv-num').value||'').trim();
  const dt=document.getElementById('inv-svc-date').value.trim();
  const cl=document.getElementById('inv-client-name').value.trim();
  const st=document.getElementById('inv-status-msg');
  if(!num||!dt||!cl){if(st){st.textContent='Fill in Invoice #, Service Date, and Client Name.';st.className='status-msg err';}return;}
  if(!invLines.length){if(st){st.textContent='Add at least one line item.';st.className='status-msg err';}return;}
  const po=document.getElementById('inv-po-ref').value.trim();
  const site=document.getElementById('inv-site').value.trim();
  const notes=document.getElementById('inv-notes').value;
  const arrival=document.getElementById('inv-arrival').value.trim();
  const departure=document.getElementById('inv-departure').value.trim();
  const tosDate=document.getElementById('inv-tos-date').value.trim();
  const hoursDisp=document.getElementById('inv-hours-display');
  const hoursHHMM=hoursDisp?.textContent==='- hrs'?'':hoursDisp?.textContent||'';
  const hoursDecimal=parseFloat(hoursDisp?.dataset.decimal||0);
  const scId=document.getElementById('inv-subclient-sel').value;
  const scName=scId?(DB.sub_clients.find(x=>x.id===scId)||{}).name||'':'';
  const total=invLines.reduce((s,l)=>s+(l.qty||0)*(l.rate||0),0);
  const rows=invLines.map(l=>`<tr><td style="font-weight:600">${l.item}</td><td>${l.desc}</td><td style="text-align:right">${l._m?l.qty+' mi':l.qty}</td><td style="text-align:right">$${parseFloat(l.rate||0).toFixed(l._m?3:2)}</td><td style="text-align:right;font-weight:700">$${((l.qty||0)*(l.rate||0)).toFixed(2)}</td></tr>`).join('');
  const timeBar=(arrival||departure)?`<div class="inv-time-bar">
    ${arrival?`<div class="inv-time-item"><span class="inv-time-lbl">Arrival</span><span class="inv-time-val">${arrival}</span></div>`:''}
    ${departure?`<div class="inv-time-item"><span class="inv-time-lbl">Departure</span><span class="inv-time-val">${departure}</span></div>`:''}
    ${hoursHHMM?`<div class="inv-time-item"><span class="inv-time-lbl">Time on Site</span><span class="inv-time-val">${hoursHHMM}</span></div>`:''}
    ${tosDate?`<div class="inv-time-item"><span class="inv-time-lbl">Date</span><span class="inv-time-val">${tosDate}</span></div>`:''}
  </div>`:'';
  const area=document.getElementById('inv-preview-area');
  area.innerHTML=`<div class="inv-doc" style="border:1px solid var(--ln2);border-radius:var(--radius2);margin-top:16px">
    <div class="inv-doc-head">
      <div><div class="inv-co-name">San Diego Manufacturing Company LLC</div><div class="inv-co-info">Benjamin Garcia<br>619-847-4485 · ben.gee224@gmail.com</div></div>
      <div class="inv-title-block"><div class="inv-doc-label">Invoice</div><div class="inv-doc-num">${num}</div></div>
    </div>
    <div class="inv-meta-grid">
      <div><div class="inv-meta-lbl">Bill To</div><div class="inv-meta-val">${cl}</div></div>
      <div><div class="inv-meta-lbl">Service Date</div><div class="inv-meta-val">${dt}</div></div>
      <div><div class="inv-meta-lbl">PO Reference</div><div class="inv-meta-val">${po||'-'}</div></div>
      ${scName?`<div><div class="inv-meta-lbl">Sub-Client</div><div class="inv-meta-val">${scName}</div></div>`:''}
      ${site?`<div><div class="inv-meta-lbl">Site</div><div class="inv-meta-val">${site}</div></div>`:''}
    </div>
    ${timeBar}
    <table class="inv-table">
      <thead><tr><th>Item</th><th>Description</th><th style="text-align:right">Qty</th><th style="text-align:right">Rate</th><th style="text-align:right">Amount</th></tr></thead>
      <tbody>${rows}</tbody>
    </table>
    <div class="inv-total-section"><div class="inv-grand-total">Total Due: ${fmtMoney(total)}</div></div>
    ${notes?`<div class="inv-notes-section"><div class="inv-notes-lbl">Notes</div><div class="inv-notes-body">${notes}</div></div>`:''}
    <div class="inv-footer">San Diego Manufacturing Company LLC · ${num} · Thank you for your business</div>
  </div>
  <div class="btn-row" style="margin-top:12px">
    <button class="btn btn-primary btn-xl" style="flex:1" onclick="confirmInvoice()">Confirm &amp; Save Invoice</button>
  </div>`;
  if(st){st.textContent='Review above - confirm to save.';st.className='status-msg ok';}
  const jobType=document.getElementById('inv-job-type').value||'local';
  // Store pending data including editId if we're editing
  window._pendingInv={num,dt,po,cl,site,scName,jobType,total,arrival,departure,tosDate,hoursHHMM,hoursDecimal,notes,_editId:window._currentEditId||null};
  window._currentEditId=null;
}

function confirmInvoice(){
  const d=window._pendingInv;if(!d)return;
  const lines=invLines.map(l=>({item:l.item,desc:l.desc,qty:l.qty||0,rate:l.rate||0,amt:(l.qty||0)*(l.rate||0)}));
  const miles=invLines.filter(l=>l._m).reduce((s,l)=>s+parseFloat(l.qty||0),0);
  const isEdit=!!d._editId;
  // Preserve status and created date when editing; default to Sent on new
  const existing=isEdit?DB.invoices.find(x=>x.id===d._editId):null;
  const inv={
    id:isEdit?d._editId:uid(),
    num:d.num,date:d.dt,po:d.po,
    client:d.cl,subClient:d.scName,site:d.site,
    jobType:d.jobType,
    total:d.total,miles,
    status:existing?.status||'Sent',
    arrival:d.arrival,departure:d.departure,tosDate:d.tosDate,
    hoursHHMM:d.hoursHHMM,hoursDecimal:d.hoursDecimal,
    lines,notes:d.notes,
    created:existing?.created||new Date().toISOString(),
    updated:new Date().toISOString()
  };
  if(isEdit){
    // Replace in place, preserving array position
    const idx=DB.invoices.findIndex(x=>x.id===d._editId);
    if(idx>=0) DB.invoices[idx]=inv;
    else DB.invoices.push(inv);
  }else{
    DB.invoices.push(inv);
    // Only link PO and advance counter on new invoices
    const linkedPO=DB.pos.find(p=>p.num===d.po&&!p.linkedInvoice);
    if(linkedPO){linkedPO.linkedInvoice=d.num;linkedPO.status='Invoiced';}
    DB.config.last_inv_num=(parseInt(DB.config.last_inv_num)||1)+1;
  }
  // TWO-WAY: write invoice num back to linked FR
  const linkedFRId=document.getElementById('inv-fr-link')?.value;
  if(linkedFRId){
    const linkedFR=DB.field_reports.find(r=>r.id===linkedFRId);
    if(linkedFR){
      linkedFR.linkedInv=inv.num;
      inv.linkedFRId=linkedFRId;
      inv.linkedFRNum=linkedFR.num;
    }
  }
  saveDB();updateBadges();
  const label=isEdit?'Invoice updated':'Invoice saved';
  document.getElementById('inv-preview-area').innerHTML=`
    <div style="background:#0d2a0d;border:1px solid #1a4a1a;border-radius:var(--radius2);padding:16px 20px;margin-top:14px;display:flex;align-items:center;gap:14px">
      <div style="font-size:28px;color:var(--grn)">✓</div>
      <div>
        <div style="font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;color:var(--grn)">${label}: ${d.num}</div>
        <div style="display:flex;gap:10px;margin-top:8px">
          <button class="btn btn-green" onclick="showPane('invoice_log','billing')">View Invoice Log -></button>
        </div>
      </div>
    </div>`;
  const st=document.getElementById('inv-status-msg');if(st){st.textContent='';st.className='status-msg';}
  window._pendingInv=null;
}
// ══════════════════════════════════════════════════════════════════════════════
// RATES & PRESETS
// ══════════════════════════════════════════════════════════════════════════════
function buildRatesPresets(){
  document.getElementById('cfg-mi').value=DB.config.irs_mileage||0.725;
  document.getElementById('cfg-tf').value=DB.config.travel_fee||1000;
  document.getElementById('cfg-td').value=DB.config.travel_fee_desc||'';
  renderPresetEditor();
}
function renderPresetEditor(){
  const el=document.getElementById('preset-editor');if(!el)return;
  ['local','oot'].forEach(type=>{
    const label=type==='local'?'<span class="badge badge-grn">Local</span>':'<span class="badge badge-gld">Out of Town</span>';
    const rows=DB.presets.filter(p=>p.type===type).map(p=>`
      <div style="display:grid;grid-template-columns:1fr 2fr 90px 25px;gap:8px;align-items:center;margin-bottom:6px">
        <input value="${p.name}" style="height:30px;font-size:11px" oninput="updatePreset(${p.id},'name',this.value)">
        <input value="${p.desc}" style="height:30px;font-size:11px" oninput="updatePreset(${p.id},'desc',this.value)">
        <input type="number" value="${p.rate}" style="height:30px;font-size:11px;text-align:right" oninput="updatePreset(${p.id},'rate',parseFloat(this.value)||0)">
        <button class="btn btn-icon btn-danger" onclick="deletePreset(${p.id})">×</button>
      </div>`).join('');
    el.innerHTML=(el.innerHTML||'')+`<div class="card" style="margin-bottom:10px"><div style="margin-bottom:10px">${label}</div><div style="display:grid;grid-template-columns:1fr 2fr 90px 25px;gap:8px;margin-bottom:6px;padding:0 2px"><span class="li-col">Name</span><span class="li-col">Description</span><span class="li-col r">Rate</span><span></span></div>${rows}</div>`;
  });
}
function updatePreset(id,field,val){const p=DB.presets.find(x=>x.id===id);if(p)p[field]=val;}
function deletePreset(id){if(!confirm('Delete this preset?'))return;dbDelete('dd_presets',id);DB.presets=DB.presets.filter(p=>p.id!==id);saveDB();buildRatesPresets();}
function addPreset(type){DB.presets.push({id:DB.preset_id_seq++,type,name:'New Service',desc:'',rate:0,tag:'Flat Rate'});saveDB();buildRatesPresets();}
function saveRates(){
  DB.config.irs_mileage=parseFloat(document.getElementById('cfg-mi').value)||0.725;
  DB.config.travel_fee=parseFloat(document.getElementById('cfg-tf').value)||1000;
  DB.config.travel_fee_desc=document.getElementById('cfg-td').value;
  saveDB();
  const st=document.getElementById('cfg-status');if(st){st.textContent='✓ Saved';st.className='status-msg ok';}
}

// ══════════════════════════════════════════════════════════════════════════════
// FIELD REPORTS
// ══════════════════════════════════════════════════════════════════════════════
function buildFRDashboard(){
  const frs=DB.field_reports;
  const inv=DB.invoices;

  // Date label
  const dl=document.getElementById('fr-company-lbl');
  if(dl) dl.textContent=DB.config.company||'SDMC';

  // Stat counts
  const total=frs.length;
  const resolved=frs.filter(r=>r.result==='Resolved').length;
  const returnNeeded=frs.filter(r=>r.result==='Return Needed').length;
  const cannotFix=frs.filter(r=>r.result==='Cannot Fix').length;
  const linkedInv=frs.filter(r=>r.linkedInv).length;
  const linkedPO=frs.filter(r=>r.linkedPO).length;
  const totalHrs=frs.reduce((s,r)=>s+parseFloat(r.totalHoursDecimal||0),0);

  document.getElementById('fr-dash-stats').innerHTML=[
    ['Total Reports',   String(total),    `${DB.sub_clients.length} sub-clients`,                     '',      'c-gld'],
    ['Resolved',        String(resolved), `${total?Math.round(resolved/total*100):0}% of reports`,    'c-grn', 'c-grn'],
    ['Return Needed',   String(returnNeeded), 'Requires follow-up',                                   'c-amb', 'c-amb'],
    ['Hours on Site',   totalHrs.toFixed(1), `${(totalHrs/8).toFixed(1)} avg days`,                   '',      'c-gld'],
  ].map(([lbl,val,sub,cc,vc])=>`
    <div class="stat-card ${cc}">
      <div class="stat-label">${lbl}</div>
      <div class="stat-val ${vc}">${val}</div>
      <div class="stat-sub">${sub}</div>
    </div>`).join('');

  // Type breakdown
  const typeMap={};
  frs.forEach(r=>{ typeMap[r.type]=(typeMap[r.type]||0)+1; });
  const maxType=Math.max(...Object.values(typeMap),1);

  // Result breakdown
  const resultMap={Resolved:resolved,'Return Needed':returnNeeded,'Cannot Fix':cannotFix};
  const maxResult=Math.max(...Object.values(resultMap),1);

  renderWidgets('fr-dash',[
    {id:'by-type', title:'By Type', html:`
      ${Object.entries(typeMap).length
        ? Object.entries(typeMap).sort((a,b)=>b[1]-a[1]).map(([l,v])=>`<div class="bar-row"><span class="bar-lbl">${l}</span><div class="bar-bg"><div class="bar-fill" style="width:${(v/maxType*100).toFixed(0)}%"></div></div><span class="bar-val">${v}</span></div>`).join('')
        : '<div style="font-size:12px;color:var(--g3)">No reports yet.</div>'}`},
    {id:'by-result', title:'By Result', html:`
      ${Object.entries(resultMap).map(([l,v])=>`<div class="bar-row"><span class="bar-lbl">${l}</span><div class="bar-bg"><div class="bar-fill ${l==='Resolved'?'gn':l==='Cannot Fix'?'rd':''}" style="width:${(v/maxResult*100).toFixed(0)}%"></div></div><span class="bar-val">${v}</span></div>`).join('')}
      <div class="dash-row" style="margin-top:8px;padding-top:8px;border-top:1px solid var(--ln)">
        <span class="dash-lbl">Linked to Invoice</span><span class="dval pu">${linkedInv}</span>
      </div>
      <div class="dash-row"><span class="dash-lbl">Linked to PO</span><span class="dval gl">${linkedPO}</span></div>`},
    {id:'recent-reports', title:'Recent Reports', html:`
      ${recent.map(r=>'<div class="dash-row"><div><div style="font-family:\'Barlow Condensed\',sans-serif;font-size:13px;font-weight:700;color:var(--gld)">'+r.num+'</div><div style="font-size:10px;color:var(--g3)">'+(r.subClientName||r.parentClientName||'-')+' · '+r.date+'</div></div><div style="text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px"><span class="badge badge-grey" style="font-size:8px">'+r.type+'</span>'+(r.result?'<span class="badge '+(rcColor[r.result]||'badge-grey')+'" style="font-size:8px">'+r.result+'</span>':'')+'</div></div>').join('')}
      ${!recent.length?'<div style="font-size:12px;color:var(--g3);padding:8px 0">No reports yet.</div>':''}
      <button class="btn" style="width:100%;margin-top:10px" onclick="showPane('fr_log','fieldreports')">View All Reports -></button>`},
    {id:'top-machines', title:'Top Machines Serviced', html:`
      ${topMachs.length
        ? topMachs.map(([m,v])=>`<div class="bar-row"><span class="bar-lbl">${m}</span><div class="bar-bg"><div class="bar-fill pu" style="width:${(v/maxMach*100).toFixed(0)}%"></div></div><span class="bar-val">${v}</span></div>`).join('')
        : '<div style="font-size:12px;color:var(--g3)">No machine data yet.</div>'}
      <div style="margin-top:12px;padding-top:10px;border-top:1px solid var(--ln)">
        <div class="dash-row"><span class="dash-lbl">Total hours on site</span><span class="dval gn">${totalHrs.toFixed(1)} hrs</span></div>
        <div class="dash-row"><span class="dash-lbl">Sub-clients</span><span class="dval">${DB.sub_clients.length}</span></div>
        <div class="dash-row"><span class="dash-lbl">Cannot Fix rate</span><span class="dval ${cannotFix>0?'rd':''}">${total?Math.round(cannotFix/total*100):0}%</span></div>
      </div>
      <button class="btn btn-primary" style="width:100%;margin-top:10px" onclick="showPane('fr_new','fieldreports')">+ New Report</button>`},
  ], 'fr-dash-panels-1');
  const frdp2=document.getElementById('fr-dash-panels-2');if(frdp2)frdp2.innerHTML='';
}

function buildFRLog(){
  const frs=DB.field_reports;
  const s=(document.getElementById('fr-search')||{}).value?.toLowerCase()||'';
  const f=(document.getElementById('fr-type-filter')||{}).value||'';
  const filtered=frs.filter(r=>(!s||(r.num+(r.subClientName||'')+(r.parentClientName||'')+(r.machine||'')).toLowerCase().includes(s))&&(!f||r.type===f));
  const linked=frs.filter(r=>r.linkedPO).length;
  const linkedInvCount=frs.filter(r=>r.linkedInv).length;
  document.getElementById('fr-stat-cards').innerHTML=[
    ['Total Reports',frs.length,'','c-gld'],
    ['Linked to PO',linked,'','c-grn'],
    ['Linked to Invoice',linkedInvCount,'','c-pur'],
  ].map(([l,v,cc,vc])=>`<div class="stat-card ${cc}"><div class="stat-label">${l}</div><div class="stat-val ${vc}">${v}</div></div>`).join('');

  const el=document.getElementById('fr-log-container');if(!el)return;
  if(!filtered.length){el.innerHTML='<div class="empty-state">'+(frs.length?'No matches.':'No field reports yet.')+'</div>';return;}
  el.innerHTML=filtered.map(r=>{
    const resultBadge={Resolved:'badge-grn','Return Needed':'badge-amb','Cannot Fix':'badge-red'};
    return`
    <div class="fr-card ${r.linkedPO?'linked':''}">
      <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap">
        <div style="flex:1;min-width:0;min-width:0">
          <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px">
            <span style="font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:900;color:var(--gld)">${r.num}</span>
            <span class="badge badge-grey">${r.type}</span>
            ${r.result?`<span class="badge ${resultBadge[r.result]||'badge-grey'}">${r.result}</span>`:''}
            ${r.linkedPO?`<span class="badge badge-grn">PO #${r.linkedPO}</span>`:''}
            ${r.linkedInv?`<span class="badge badge-pur">INV ${r.linkedInv}</span>`:''}
            ${r.photos?.length?`<span class="badge badge-grey">📷 ${r.photos.length}</span>`:''}
          </div>
          <div style="font-size:13px;font-weight:600;color:var(--w)">${r.subClientName||r.parentClientName}${r.subClientName&&r.parentClientName?` <span style="color:var(--g3);font-weight:400">via ${r.parentClientName}</span>`:''}</div>
          <div style="font-size:11px;color:var(--g3);margin-top:3px">${r.date} · ${r.machine||'-'} ${r.serial?'#'+r.serial:''} · ${r.tech}${r.totalHoursHHMM?' · <b style="color:var(--grn)">'+r.totalHoursHHMM+'</b> ('+r.totalHoursDecimal+' hrs)':''}</div>
          ${r.work?`<div style="font-size:12px;color:var(--g4);margin-top:4px;overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap">${r.work.slice(0,100)}${r.work.length>100?'...':''}</div>`:''}
        </div>
        <div style="display:flex;gap:8px;align-items:center;flex-shrink:0;flex-wrap:wrap">
          <button class="btn btn-purple" onclick="viewFRModal('${r.id}')">View</button>
          <button class="btn btn-icon" onclick="editFR('${r.id}')" title="Edit">✏</button>
          <button class="btn btn-icon btn-danger" onclick="deleteFR('${r.id}')">×</button>
        </div>
      </div>
    </div>`;
  }).join('');
}
function renderFRLog(){buildFRLog();}

function deleteFR(id){if(!confirm('Delete this report?'))return;dbDelete('dd_field_reports',id);DB.field_reports=DB.field_reports.filter(r=>r.id!==id);saveDB();updateBadges();buildFRLog();}

function viewFRModal(id){
  const r=DB.field_reports.find(x=>x.id===id);if(!r)return;
  const rc={Resolved:'var(--grn)','Return Needed':'var(--amb)','Cannot Fix':'var(--red)'};
  const photos=r.photos||[];
  const reportPhotos=photos.slice(0,5);
  const attachmentPhotos=photos.slice(5);
  const photoCard=p=>`<div class="pd-photo-wrap"><img src="${p.data}">${p.label?`<div class="pd-photo-lbl">${p.label}</div>`:''}</div>`;
  const photoSection=reportPhotos.length?`<div style="margin-bottom:16px">
    <div class="pd-section-lbl">Photos (${reportPhotos.length}${attachmentPhotos.length?` of ${photos.length}`:''})</div>
    <div class="pd-photos" style="margin-top:6px">${reportPhotos.map(photoCard).join('')}</div>
  </div>`:'';
  const photoAttachmentPage=attachmentPhotos.length?`<div class="pd-photo-attachment-page" data-pdf-page-break="true">
    <div class="pd-photo-attachment-title">Photo Attachments</div>
    <div class="pd-photo-attachment-sub">${r.num} - photos 6-${photos.length} of ${photos.length}</div>
    <div class="pd-photos pd-photos-attachment">${attachmentPhotos.map(photoCard).join('')}</div>
    <div class="pd-footer">${DB.config.company||'SDMC'} &nbsp;·&nbsp; ${DB.config.technician||'Benjamin Garcia'} &nbsp;·&nbsp; Photo Attachments</div>
  </div>`:'';
  const timeRows=r.days?.length?r.days.map(d=>`<tr>
    <td style="padding:5px 8px;border-bottom:1px solid var(--ln);color:var(--w2)">${d.date||r.date}</td>
    <td>${d.arr||'-'}</td>
    <td>${d.dep||'-'}</td>
    <td class="r">${d.hrsHHMM||'-'} (${d.hrsDecimal||0} hrs)</td>
  </tr>`).join(''):'';
  const timeSection=timeRows?`<div style="margin-bottom:16px">
    <div class="pd-section-lbl">Time on Site</div>
    <table class="pd-time-table" style="margin-top:6px">
      <thead><tr>
        <th>Date</th><th>Arrived</th><th>Left</th><th class="r">Hours</th>
      </tr></thead>
      <tbody>${timeRows}</tbody>
    </table>
    <div class="pd-time-total">Total: ${r.totalHoursHHMM||'-'} (${r.totalHoursDecimal||0} hrs)</div>
  </div>`:'';
  const body=`<div class="print-doc">
    <div class="pd-header">
      <div style="flex:1">
        <div class="pd-co-name" style="font-size:26px">${r.subClientName||r.parentClientName||'Field Service Report'}</div>
        <div style="font-size:11px;color:#555;margin-top:4px">${r.type} &nbsp;·&nbsp; ${r.date}</div>
        <div style="font-size:11px;color:#555;margin-top:2px">Technician - ${DB.config.technician||'Benjamin Garcia'}</div>
      </div>
      <div style="text-align:right;flex-shrink:0;min-width:160px">
        ${r.siteAddr?`<div style="font-size:11px;color:#000;line-height:1.5">${r.siteAddr}</div>`:''}
        ${r.siteContact?`<div style="font-size:10px;color:#555;margin-top:3px">${r.siteContact}</div>`:''}
        ${r.result?`<div style="margin-top:8px"><span class="pd-result">${r.result}</span></div>`:''}
      </div>
    </div>
    <div class="pd-meta">
      <div><div class="pd-meta-lbl">Machine</div><div class="pd-meta-val">${r.machine||'-'}</div></div>
      <div><div class="pd-meta-lbl">Controller</div><div class="pd-meta-val">${r.controller||'-'}</div></div>
      <div><div class="pd-meta-lbl">Serial #</div><div class="pd-meta-val">${r.serial||'-'}</div></div>
      <div><div class="pd-meta-lbl">Axes</div><div class="pd-meta-val">${r.axes||'-'}</div></div>
      <div><div class="pd-meta-lbl">Spindles</div><div class="pd-meta-val">${r.spindles||'-'}</div></div>
      <div><div class="pd-meta-lbl">Table</div><div class="pd-meta-val">${r.tableType||'-'}${(r.tableLength&&r.tableWidth)?' · '+r.tableLength+' x '+r.tableWidth+(r.travelUnits?' '+r.travelUnits:''):r.tableSize?' · '+r.tableSize:''}</div></div>
      <div><div class="pd-meta-lbl">Axis Travel</div><div class="pd-meta-val">${r.axisTravel?.length?r.axisTravel.map(a=>`${a.name}: ${a.value}`).join(' · ')+(r.travelUnits?' '+r.travelUnits:''):r.xyz||'-'}</div></div>
    </div>
    ${r.work?`<div style="margin-bottom:16px"><div class="pd-section-lbl">Work Performed</div><div class="pd-bullet-grid">${r.work.split('\n').map(l=>l.trim()).filter(l=>l).map(l=>`<div class="pd-bullet"><span class="pd-bullet-dot">•</span><span>${l.replace(/^[-•*]\s*/,'')}</span></div>`).join('')}</div></div>`:''}
    ${r.parts?`<div style="margin-bottom:16px"><div class="pd-section-lbl">Parts Used</div><div class="pd-bullet-grid">${r.parts.split('\n').map(l=>l.trim()).filter(l=>l).map(l=>`<div class="pd-bullet"><span class="pd-bullet-dot">•</span><span>${l.replace(/^[-•*]\s*/,'')}</span></div>`).join('')}</div></div>`:''}
    ${r.recs?`<div style="margin-bottom:16px"><div class="pd-section-lbl">Additional Notes</div><div class="pd-notes" style="margin-top:6px">${r.recs}</div></div>`:''}
    ${photoSection}
    ${timeSection}
    <div class="pd-footer">${DB.config.company||'SDMC'} &nbsp;·&nbsp; ${DB.config.technician||'Benjamin Garcia'} &nbsp;·&nbsp; 619-847-4485</div>
    ${photoAttachmentPage}
  </div>`;
  openDocViewer(`${r.num} - ${r.subClientName||r.parentClientName}`, body);
  document.getElementById('doc-viewer-toolbar').dataset.editId = id;
  document.getElementById('doc-viewer-toolbar').dataset.editType = 'fr';
}

// NEW FIELD REPORT
var frPhotosData=[], frPhotoSeq=0, frEditingId=null, frDaySeq=0, _editFRData=null, _discardFRBackup=null, _frPhotoReadPromises=[];

// ── AXIS TRAVEL MANAGEMENT ───────────────────────────────
function initFRAxes(axes){
  // axes = [{name:'X', value:'120'}, ...] or null for defaults
  const container=document.getElementById('fr-axis-container');
  if(!container)return;
  container.innerHTML='';
  const defaults=axes||[{name:'X',value:''},{name:'Y',value:''},{name:'Z',value:''}];
  defaults.forEach(a=>addFRAxis(a.name,a.value));
}
function addFRAxis(name='',value=''){
  const container=document.getElementById('fr-axis-container');
  if(!container)return;
  const id='ax'+Date.now()+Math.random().toString(36).slice(2,5);
  const div=document.createElement('div');
  div.id=id;
  div.style.cssText='display:grid;grid-template-columns:70px 1fr 28px;gap:5px;align-items:center';
  div.innerHTML=`<input value="${name}" placeholder="Axis" style="height:30px;font-size:11px;font-weight:700;text-transform:uppercase" title="Axis name">
    <input value="${value}" placeholder="0.0" type="number" step="0.01" style="height:30px;font-size:11px" title="Travel distance">
    <button type="button" class="btn btn-icon btn-danger" style="height:28px;width:28px;flex-shrink:0" onclick="document.getElementById('${id}').remove()">×</button>`;
  container.appendChild(div);
}
function getFRAxes(){
  const rows=[...document.querySelectorAll('#fr-axis-container > div')];
  return rows.map(row=>{
    const inputs=row.querySelectorAll('input');
    return {name:(inputs[0]?.value||'').trim(), value:(inputs[1]?.value||'').trim()};
  }).filter(a=>a.name);
}
function setFRAxes(axes){
  initFRAxes(axes&&axes.length?axes:null);
}
function getFRAxesString(){
  const axes=getFRAxes();
  const units=document.getElementById('fr-travel-units')?.value||'';
  return axes.map(a=>`${a.name}: ${a.value}`).join(', ')+(axes.length&&units?' '+units:'');
}


function parseTm(t){
  if(!t)return null; t=t.trim();
  const m12=t.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
  if(m12){let h=parseInt(m12[1]),mn=parseInt(m12[2]),ap=m12[3].toUpperCase();if(ap==='PM'&&h!==12)h+=12;if(ap==='AM'&&h===12)h=0;return h*60+mn;}
  const m24=t.match(/^(\d{1,2}):(\d{2})$/);
  if(m24)return parseInt(m24[1])*60+parseInt(m24[2]);
  return null;
}
function minsToHHMM(m){return Math.floor(m/60)+'h '+String(m%60).padStart(2,'0')+'m';}
function minsToDec(m){return(m/60).toFixed(2);}

function buildFRNew(){
  // Always rebuild dropdowns
  const pc=document.getElementById('fr-parent-client');
  pc.innerHTML='<option value="">- Select parent client -</option>'+DB.clients.map(c=>`<option value="${c.id}">${c.company}</option>`).join('');
  document.getElementById('fr-linked-po').innerHTML='<option value="">- None -</option>'+DB.pos.map(p=>`<option value="${p.num}">PO #${p.num} - ${p.clientName}</option>`).join('');
  document.getElementById('fr-linked-inv').innerHTML='<option value="">- None -</option>'+DB.invoices.map(i=>`<option value="${i.num}">${i.num} - ${i.client}</option>`).join('');
  document.getElementById('fr-suggest-banner').innerHTML='';
  setupFRDropZone();

  if(_editFRData){
    const r=_editFRData; _editFRData=null;
    document.getElementById('fr-num').value=r.num||'';
    document.getElementById('fr-date').value=r.date||'';
    document.getElementById('fr-type').value=r.type||'';
    document.getElementById('fr-tech').value=r.tech||'';
    document.getElementById('fr-result').value=r.result||'';
    document.getElementById('fr-status-sel').value=r.status||'Complete';
    document.getElementById('fr-parent-client').value=r.parentClientId||'';
    onFRParentChange();
    setTimeout(()=>{document.getElementById('fr-sub-client').value=r.subClientId||'';},60);
    document.getElementById('fr-site-addr').value=r.siteAddr||'';
    document.getElementById('fr-site-contact').value=r.siteContact||'';
    document.getElementById('fr-machine').value=r.machine||'';
    document.getElementById('fr-controller').value=r.controller||'';
    document.getElementById('fr-axes').value=r.axes||'';
    document.getElementById('fr-spindles').value=r.spindles||'';
    document.getElementById('fr-table-type').value=r.tableType||'';
    document.getElementById('fr-table-length').value=r.tableLength||'';
    document.getElementById('fr-table-width').value=r.tableWidth||'';
    document.getElementById('fr-travel-units').value=r.travelUnits||'Inches';
    setFRAxes(r.axisTravel||null);
    document.getElementById('fr-xyz').value=r.xyz||'';
    document.getElementById('fr-serial').value=r.serial||'';
    document.getElementById('fr-work').value=r.work||'';
    document.getElementById('fr-parts').value=r.parts||'';
    document.getElementById('fr-recs').value=r.recs||'';
    document.getElementById('fr-notes').value=r.notes||'';
    document.getElementById('fr-linked-po').value=r.linkedPO||'';
    document.getElementById('fr-linked-inv').value=r.linkedInv||'';
    document.getElementById('fr-days-container').innerHTML='';
    frDaySeq=0;
    if(r.days?.length){r.days.forEach(d=>addFRDay(d.date,d.arr,d.dep));}
    else{addFRDay(r.date,'','');}
  frPhotosData=JSON.parse(JSON.stringify(r.photos||[])).map(p=>({...p,uploadStatus:'saved'}));renderFRPhotoGrid();
    const st=document.getElementById('fr-status-msg');if(st){st.textContent='Editing: '+r.num;st.className='status-msg ok';}
    return;
  }

  // Fresh new report
  frPhotosData=[]; frEditingId=null; frDaySeq=0; initFRAxes(null);
  document.getElementById('fr-num').value='FR-';
  document.getElementById('fr-date').value=todayStr();
  document.getElementById('fr-result').value='';
  document.getElementById('fr-status-sel').value='Complete';
  const techEl=document.getElementById('fr-tech');if(techEl)techEl.value=DB.config.technician||'Benjamin Garcia';
  document.getElementById('fr-days-container').innerHTML='';
  addFRDay();
  renderFRPhotoGrid();
}

function addFRDay(date='',arr='',dep=''){
  frDaySeq++;
  const dayId=frDaySeq;
  const cnt=document.getElementById('fr-days-container').querySelectorAll('.fr-day-entry').length+1;
  const div=document.createElement('div');
  div.className='fr-day-entry';
  div.dataset.dayId=dayId;
  div.style.cssText='background:var(--k4);border:1px solid var(--ln2);border-radius:5px;padding:12px 14px;margin-bottom:8px';

  // Parse existing time strings into components for pre-fill
  function parseTmParts(t){
    if(!t)return{h:'',m:'00',ap:'AM'};
    const m12=t.trim().match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
    if(m12)return{h:m12[1],m:m12[2],ap:m12[3].toUpperCase()};
    const m24=t.trim().match(/^(\d{1,2}):(\d{2})$/);
    if(m24){let h=parseInt(m24[1]);const mn=m24[2];const ap=h>=12?'PM':'AM';if(h>12)h-=12;if(h===0)h=12;return{h:String(h),m:mn,ap};}
    return{h:'',m:'00',ap:'AM'};
  }
  const arrP=parseTmParts(arr), depP=parseTmParts(dep);

  const hrOpts=[...Array(12)].map((_,i)=>{const v=String(i+1);return `<option value="${v}">${v}</option>`;}).join('');
  const minOpts=['00','05','10','15','20','25','30','35','40','45','50','55'].map(v=>`<option value="${v}">${v}</option>`).join('');

  function timeSel(cls, p){
    return `<div style="display:flex;gap:4px;align-items:center">
      <select class="${cls}-h" data-did="${dayId}" onchange="calcFRTotalHours()" style="width:56px;height:32px;font-size:12px;padding:0 4px">
        <option value="">--</option>${hrOpts}
      </select>
      <span style="color:var(--g3);font-weight:700">:</span>
      <select class="${cls}-m" data-did="${dayId}" onchange="calcFRTotalHours()" style="width:54px;height:32px;font-size:12px;padding:0 4px">
        ${minOpts}
      </select>
      <select class="${cls}-ap" data-did="${dayId}" onchange="calcFRTotalHours()" style="width:58px;height:32px;font-size:12px;padding:0 4px">
        <option value="AM">AM</option><option value="PM">PM</option>
      </select>
    </div>`;
  }

  div.innerHTML=`<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">
    <span style="font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gld)">Day ${cnt}</span>
    ${cnt>1?`<button class="btn btn-icon btn-danger" onclick="removeFRDay(${dayId})">×</button>`:''}
  </div>
  <div class="field-row col4">
    <div class="field"><label>Date</label><input class="day-date-inp" data-did="${dayId}" placeholder="" readonly onclick="openCal(this)" style="cursor:pointer" value="${date||document.getElementById('fr-date').value||''}"></div>
    <div class="field"><label>Time Arrived</label>${timeSel('day-arr-inp', arrP)}</div>
    <div class="field"><label>Time Left</label>${timeSel('day-dep-inp', depP)}</div>
    <div class="field"><label>Hours</label><div id="day-hrs-${dayId}" style="font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--g3);background:var(--k3);border:1px solid var(--k5);border-radius:3px;padding:7px 12px">-</div></div>
  </div>`;

  // Pre-fill selectors after DOM insert
  setTimeout(()=>{
    const row=document.getElementById('fr-days-container').querySelector(`[data-day-id="${dayId}"]`)||div;
    if(arrP.h){
      const sh=div.querySelector('.day-arr-inp-h');const sm=div.querySelector('.day-arr-inp-m');const sap=div.querySelector('.day-arr-inp-ap');
      if(sh)sh.value=arrP.h;if(sm)sm.value=arrP.m;if(sap)sap.value=arrP.ap;
    }
    if(depP.h){
      const sh=div.querySelector('.day-dep-inp-h');const sm=div.querySelector('.day-dep-inp-m');const sap=div.querySelector('.day-dep-inp-ap');
      if(sh)sh.value=depP.h;if(sm)sm.value=depP.m;if(sap)sap.value=depP.ap;
    }
    calcFRTotalHours();
  },0);
  document.getElementById('fr-days-container').appendChild(div);
  calcFRTotalHours();
}

function getDayTime(dayEl, cls){
  // Read time from the three-part selector (h, m, ap)
  const h=dayEl.querySelector('.'+cls+'-h')?.value||'';
  const m=dayEl.querySelector('.'+cls+'-m')?.value||'00';
  const ap=dayEl.querySelector('.'+cls+'-ap')?.value||'AM';
  if(!h)return '';
  return `${h}:${m} ${ap}`;
}
function removeFRDay(id){
  document.querySelectorAll('.fr-day-entry').forEach(e=>{if(e.dataset.dayId==id)e.remove();});
  calcFRTotalHours();
  document.querySelectorAll('.fr-day-entry').forEach((e,i)=>{const l=e.querySelector('span');if(l)l.textContent='Day '+(i+1);});
}

function calcFRTotalHours(){
  let totMins=0,validDays=0;
  document.querySelectorAll('.fr-day-entry').forEach(dayEl=>{
    const did=dayEl.dataset.dayId;
    const arr=getDayTime(dayEl,'day-arr-inp');
    const dep=getDayTime(dayEl,'day-dep-inp');
    const a=parseTm(arr),d=parseTm(dep);
    const disp=document.getElementById('day-hrs-'+did);
    if(a!==null&&d!==null){
      let diff=d-a;if(diff<0)diff+=1440;
      if(disp){disp.textContent=minsToHHMM(diff)+' ('+minsToDec(diff)+')';disp.style.color='var(--grn)';}
      totMins+=diff;validDays++;
    }else if(disp){disp.textContent='-';disp.style.color='var(--g3)';}
  });
  const th=document.getElementById('fr-total-hhmm');
  const td=document.getElementById('fr-total-decimal');
  const tc=document.getElementById('fr-days-count');
  if(th)th.textContent=validDays?minsToHHMM(totMins):'0h 00m';
  if(td)td.textContent=validDays?minsToDec(totMins)+' hrs':'0.00 hrs';
  if(tc)tc.textContent=validDays;
}

function readFileAsDataURL(file){
  return new Promise((resolve,reject)=>{
    const reader=new FileReader();
    reader.onload=e=>resolve(e.target.result);
    reader.onerror=reject;
    reader.readAsDataURL(file);
  });
}
function loadImageFromDataURL(dataUrl){
  return new Promise((resolve,reject)=>{
    const img=new Image();
    img.onload=()=>resolve(img);
    img.onerror=reject;
    img.src=dataUrl;
  });
}
async function prepareFRPhoto(file){
  const raw=await readFileAsDataURL(file);
  const img=await loadImageFromDataURL(raw);
  const maxSide=1600;
  const scale=Math.min(1,maxSide/Math.max(img.width,img.height));
  const w=Math.max(1,Math.round(img.width*scale));
  const h=Math.max(1,Math.round(img.height*scale));
  const canvas=document.createElement('canvas');
  canvas.width=w;canvas.height=h;
  const ctx=canvas.getContext('2d');
  ctx.fillStyle='#fff';ctx.fillRect(0,0,w,h);
  ctx.drawImage(img,0,0,w,h);
  return canvas.toDataURL('image/jpeg',0.78);
}
function queueFRPhotoFiles(files){
  files.filter(f=>f.type.startsWith('image/')).forEach(file=>{
    const photo={id:++frPhotoSeq,data:'',label:'',fileName:file.name,uploadStatus:'processing'};
    frPhotosData.push(photo);
    renderFRPhotoGrid();
    const job=prepareFRPhoto(file).then(data=>{
      photo.data=data;
      photo.uploadStatus='ready';
    }).catch(err=>{
      console.warn('Photo processing failed:',err);
      photo.uploadStatus='failed';
    }).finally(()=>renderFRPhotoGrid());
    _frPhotoReadPromises.push(job);
  });
}
async function waitForFRPhotos(){
  const pending=_frPhotoReadPromises;
  _frPhotoReadPromises=[];
  if(pending.length) await Promise.allSettled(pending);
  if(frPhotosData.some(p=>p.uploadStatus==='processing')){
    await new Promise(resolve=>setTimeout(resolve,100));
    return waitForFRPhotos();
  }
}

function setupFRDropZone(){
  const dz=document.getElementById('fr-drop-zone');if(!dz)return;
  dz.addEventListener('dragover',e=>{e.preventDefault();dz.style.borderColor='var(--gld)';dz.style.background='var(--gldg)';});
  dz.addEventListener('dragleave',()=>{dz.style.borderColor='';dz.style.background='';});
  dz.addEventListener('drop',e=>{
    e.preventDefault();dz.style.borderColor='';dz.style.background='';
    const files=Array.from(e.dataTransfer.files).filter(f=>f.type.startsWith('image/'));
    if(!files.length){alert('Please drop image files only.');return;}
    queueFRPhotoFiles(files);
  });
}

function editFR(id){
  const r=DB.field_reports.find(x=>x.id===id);if(!r)return;
  frEditingId=id;
  _discardFRBackup=JSON.parse(JSON.stringify(r));
  _editFRData=JSON.parse(JSON.stringify(r));
  // skipBuild=true so the form-preservation dirty-check doesn't block us,
  // then call buildFRNew() directly to force-populate with this report's data.
  showPane('fr_new','fieldreports',true);
  buildFRNew();
  const db=document.getElementById('fr-discard-btn');
  if(db){db.innerHTML='&times;';db.title='Discard Changes';db.className='btn btn-icon btn-danger form-exit-btn';}
}
function onFRParentChange(){
  const pid=document.getElementById('fr-parent-client').value;
  const sel=document.getElementById('fr-sub-client');
  sel.innerHTML='<option value="">- Select sub-client -</option>'+DB.sub_clients.filter(s=>s.parentId===pid).map(s=>`<option value="${s.id}">${s.name}</option>`).join('');
}
function onFRSubClientChange(){
  const sid=document.getElementById('fr-sub-client').value;
  const sc=DB.sub_clients.find(x=>x.id===sid);if(!sc)return;
  document.getElementById('fr-site-addr').value=(sc.addr||'')+(sc.city?' '+sc.city:'');
  document.getElementById('fr-site-contact').value=sc.contact||'';
  if(sc.machines?.length){
    document.getElementById('fr-machine').value=sc.machines[0].model||'';
    document.getElementById('fr-axes').value=sc.machines[0].type||'';
    document.getElementById('fr-serial').value=sc.machines[0].serial||'';
  }
  // Auto-suggest PO
  const pid=document.getElementById('fr-parent-client').value;
  const parentName=(DB.clients.find(x=>x.id===pid)||{}).company||'';
  const fdate=document.getElementById('fr-date').value;
  const matches=DB.pos.filter(p=>{
    const siteMatch=p.site&&p.site.toLowerCase().includes(sc.name.toLowerCase());
    const clientMatch=p.clientId===pid;
    const dateMatch=!fdate||!p.svcDate||Math.abs(new Date(p.svcDate)-new Date(fdate))<8*86400000;
    return(siteMatch||clientMatch)&&dateMatch&&!p.linkedInvoice;
  });
  const bannerEl=document.getElementById('fr-suggest-banner');
  if(!matches.length){bannerEl.innerHTML='';return;}
  bannerEl.innerHTML=`<div class="suggest-banner">
    <div>
      <div style="font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grn);margin-bottom:4px">Auto-Suggest - PO Match Found</div>
      ${matches.map(p=>`<div style="font-size:12px;color:var(--w2)">PO #${p.num} · ${p.clientName} · ${p.svcDate||p.date} · ${fmtMoney(p.total)}</div>`).join('')}
    </div>
    <div style="display:flex;flex-direction:column;gap:6px">
      ${matches.map(p=>`<button class="btn btn-green" onclick="acceptFRSuggest('${p.num}')">Link PO #${p.num}</button>`).join('')}
      <button class="btn btn-icon" onclick="document.getElementById('fr-suggest-banner').innerHTML=''">Dismiss</button>
    </div>
  </div>`;
}
function acceptFRSuggest(poNum){
  document.getElementById('fr-linked-po').value=poNum;
  const inv=DB.invoices.find(i=>i.po===poNum);
  if(inv)document.getElementById('fr-linked-inv').value=inv.num;
  document.getElementById('fr-suggest-banner').innerHTML=`<div style="background:#0d2a0d;border:1px solid #1a4a1a;border-left:3px solid var(--grn);padding:10px 16px;border-radius:var(--radius2);margin-bottom:14px;font-size:12px;color:var(--grn)">✓ Linked to PO #${poNum}${inv?' and Invoice '+inv.num:''}</div>`;
}
function addFRPhotos(input){
  queueFRPhotoFiles(Array.from(input.files));
  input.value='';
}
function renderFRPhotoGrid(){
  const g=document.getElementById('fr-photo-grid');if(!g)return;
  g.innerHTML=frPhotosData.map(p=>`
    <div style="display:flex;flex-direction:column;gap:5px">
      <div class="photo-thumb ${!p.data?'photo-pending':''}" onclick="previewFRPhoto(${p.id})" style="cursor:zoom-in">
        ${p.data?`<img src="${p.data}" alt="${p.label||'photo'}">`:'PROCESSING'}
        ${p.label?`<div class="photo-label-badge">${p.label}</div>`:''}
        <div class="photo-sync-badge ${p.uploadStatus||'ready'}">${p.uploadStatus==='saved'?'Saved online':p.uploadStatus==='saving'?'Saving':p.uploadStatus==='failed'?'Failed':'Ready'}</div>
        <button class="photo-rm" onclick="event.stopPropagation();frPhotosData=frPhotosData.filter(x=>x.id!==${p.id});renderFRPhotoGrid()">×</button>
      </div>
      <input value="${(p.label||'').replace(/"/g,'&quot;')}" placeholder="Label…" style="height:26px;font-size:10px;padding:0 6px;border-radius:var(--radius);background:var(--k3);border:1px solid var(--ln2);color:var(--w2);width:100%" oninput="frPhotosData.find(x=>x.id===${p.id}).label=this.value">
    </div>`).join('')+
    `<div class="photo-add" onclick="document.getElementById('fr-photo-input').click()"><span class="photo-add-icon">+</span><span>Add Photo</span></div>`;
}
function previewFRPhoto(id){
  const p=frPhotosData.find(x=>x.id===id);if(!p)return;
  if(!p.data){alert('Photo is still processing.');return;}
  const ov=document.createElement('div');
  ov.style.cssText='position:fixed;inset:0;z-index:99998;background:rgba(0,0,0,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:zoom-out';
  ov.onclick=()=>ov.remove();
  ov.innerHTML=`<img src="${p.data}" style="max-width:92vw;max-height:80vh;object-fit:contain;border-radius:4px;box-shadow:0 4px 40px rgba(0,0,0,.8)">${p.label?`<div style="margin-top:12px;font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gld)">${p.label}</div>`:''}`;
  document.body.appendChild(ov);
}
async function saveFR(){
  const num=document.getElementById('fr-num').value.trim();
  const date=document.getElementById('fr-date').value.trim();
  const st=document.getElementById('fr-status-msg');
  if(!num||!date){if(st){st.textContent='Report # and date are required.';st.className='status-msg err';}return;}
  if(frPhotosData.some(p=>p.uploadStatus==='processing')){
    if(st){st.textContent='Processing photos. Please wait...';st.className='status-msg';}
    await waitForFRPhotos();
  }
  if(frPhotosData.some(p=>p.uploadStatus==='failed'||!p.data)){
    if(st){st.textContent='One or more photos failed to process. Remove failed photos and try again.';st.className='status-msg err';}
    return;
  }
  frPhotosData.forEach(p=>{p.uploadStatus='saving';});
  renderFRPhotoGrid();
  if(st){st.textContent='Saving report and photos online...';st.className='status-msg';}
  const pid=document.getElementById('fr-parent-client').value;
  const sid=document.getElementById('fr-sub-client').value;
  const pc=DB.clients.find(x=>x.id===pid)||{};
  const sc=DB.sub_clients.find(x=>x.id===sid)||{};
  const originalEditingId=frEditingId;
  // Collect days & calculate total hours
  const days=[];let totMins=0;
  document.querySelectorAll('.fr-day-entry').forEach(dayEl=>{
    const arr=getDayTime(dayEl,'day-arr-inp');
    const dep=getDayTime(dayEl,'day-dep-inp');
    const dd=(dayEl.querySelector('.day-date-inp')||{}).value||date;
    const a=parseTm(arr),d=parseTm(dep);
    let diff=null;
    if(a!==null&&d!==null){diff=d-a;if(diff<0)diff+=1440;totMins+=diff;}
    days.push({date:dd,arr,dep,hrsDecimal:diff?parseFloat(minsToDec(diff)):0,hrsHHMM:diff?minsToHHMM(diff):'-'});
  });
  const fr={
    id:frEditingId||uid(),num,date,
    type:document.getElementById('fr-type').value,
    result:document.getElementById('fr-result').value,
    status:document.getElementById('fr-status-sel').value,
    tech:document.getElementById('fr-tech').value,
    parentClientId:pid,parentClientName:pc.company||'',
    subClientId:sid,subClientName:sc.name||'',
    siteAddr:document.getElementById('fr-site-addr').value,
    siteContact:document.getElementById('fr-site-contact').value,
    machine:document.getElementById('fr-machine').value,
    controller:document.getElementById('fr-controller').value,
    axes:document.getElementById('fr-axes').value,
    spindles:document.getElementById('fr-spindles').value,
    tableType:document.getElementById('fr-table-type').value,
    tableLength:document.getElementById('fr-table-length')?.value||'',
    tableWidth:document.getElementById('fr-table-width')?.value||'',
    tableSize:(document.getElementById('fr-table-length')?.value&&document.getElementById('fr-table-width')?.value?document.getElementById('fr-table-length').value+' x '+document.getElementById('fr-table-width').value:''),
    travelUnits:document.getElementById('fr-travel-units').value,
    axisTravel:getFRAxes(),
    xyz:getFRAxesString(),
    serial:document.getElementById('fr-serial').value,
    days,totalHoursDecimal:parseFloat(minsToDec(totMins)),totalHoursHHMM:minsToHHMM(totMins),
    work:document.getElementById('fr-work').value,
    parts:document.getElementById('fr-parts').value,
    recs:document.getElementById('fr-recs').value,
    photos:JSON.parse(JSON.stringify(frPhotosData.map(({uploadStatus,fileName,...p})=>p))),
    linkedPO:document.getElementById('fr-linked-po').value,
    linkedInv:document.getElementById('fr-linked-inv').value,
    notes:document.getElementById('fr-notes').value,
    created:new Date().toISOString()
  };
  // When editing, frEditingId === fr.id so the upsert (onConflict:'id,user_id') will
  // UPDATE the existing row - no separate delete needed (avoids a race condition).
  DB.field_reports=DB.field_reports.filter(r=>r.id!==fr.id);
  DB.field_reports.push(fr);
  // TWO-WAY: write FR num back to the linked invoice
  if(fr.linkedInv){
    const linkedInvoice=DB.invoices.find(i=>i.num===fr.linkedInv);
    if(linkedInvoice){
      linkedInvoice.linkedFRId=fr.id;
      linkedInvoice.linkedFRNum=fr.num;
    }
  }
  const saved=await saveDBNow();
  if(!saved){
    if(!originalEditingId) DB.field_reports=DB.field_reports.filter(r=>r.id!==fr.id);
    frPhotosData.forEach(p=>{p.uploadStatus='ready';});
    renderFRPhotoGrid();
    if(st){st.textContent='Save failed. Photos are still on this form; check connection and save again.';st.className='status-msg err';}
    return;
  }
  frPhotosData.forEach(p=>{p.uploadStatus='saved';});
  updateBadges();frEditingId=null;
  if(st){st.textContent='✓ Report '+fr.num+' saved online with '+fr.photos.length+' photo(s).';st.className='status-msg ok';}
  showPane('fr_log','fieldreports');
}
function discardFR(){
  // The original record was never removed from DB on edit start, so nothing to restore.
  // Just clear state and go back - the original remains intact.
  frEditingId=null;
  _discardFRBackup=null;
  clearFRForm();
  showPane('fr_log','fieldreports');
}

function clearFRForm(){
  frEditingId=null; _discardFRBackup=null;
  const db=document.getElementById('fr-discard-btn');
  if(db){db.innerHTML='&times;';db.title='Cancel';db.className='btn btn-icon form-exit-btn';}

  ['fr-num','fr-site-addr','fr-site-contact','fr-machine','fr-controller','fr-serial','fr-table-length','fr-table-width','fr-xyz','fr-work','fr-parts','fr-recs','fr-notes'].forEach(id=>{const el=document.getElementById(id);if(el)el.value='';});
  initFRAxes(null);;
  document.getElementById('fr-num').value='FR-';
  document.getElementById('fr-date').value=todayStr();
  document.getElementById('fr-tech').value='Benjamin Garcia';
  document.getElementById('fr-result').value='';
  document.getElementById('fr-status-sel').value='Complete';
  document.getElementById('fr-parent-client').value='';
  document.getElementById('fr-sub-client').innerHTML='<option value="">- Select sub-client -</option>';
  document.getElementById('fr-suggest-banner').innerHTML='';
  document.getElementById('fr-days-container').innerHTML='';
  frDaySeq=0; addFRDay();
  frPhotosData=[];renderFRPhotoGrid();
  const st=document.getElementById('fr-status-msg');if(st){st.textContent='';st.className='status-msg';}
}

// ══════════════════════════════════════════════════════════════════════════════
// CLIENTS - unified two-column directory
// ══════════════════════════════════════════════════════════════════════════════
var selectedClientId = null;

function buildClientsDir(){
  const cls=DB.clients;
  const s=(document.getElementById('cl-search')||{}).value?.toLowerCase()||'';
  const f=(document.getElementById('cl-status-filter')||{}).value||'';
  const filtered=cls.filter(c=>(!s||(c.company+c.contact+(c.city||'')).toLowerCase().includes(s))&&(!f||c.status===f));
  const el=document.getElementById('cl-list-container');if(!el)return;

  // Update sidebar count
  const scClEl=document.getElementById('sc-cl'); if(scClEl) scClEl.textContent=cls.length;

  if(!filtered.length){
    el.innerHTML='<div class="empty-state">'+(cls.length?'No matches.':'No clients yet.<br><small>Click + Add Client to get started.</small>')+'</div>';
    return;
  }
  el.innerHTML=filtered.map(c=>{
    const subCount=DB.sub_clients.filter(s=>s.parentId===c.id).length;
    const isSel=selectedClientId===c.id;
    return`<div class="entity-card ${isSel?'selected':''}" onclick="selectClientDir('${c.id}')" style="${isSel?'border-left:3px solid var(--gld);':''}">
      <div class="entity-icon">${initials(c.company)}</div>
      <div style="flex:1;min-width:0">
        <div class="entity-name">${c.company} <span class="badge badge-${c.status==='Active'?'grn':c.status==='Prospect'?'pur':'grey'}" style="font-size:8px">${c.status}</span></div>
        <div class="entity-meta">${c.contact||'-'} · ${c.city||'-'} · ${subCount} sub-client${subCount!==1?'s':''}</div>
      </div>
      <div style="display:flex;flex-direction:column;gap:4px;flex-shrink:0">
        <button class="btn" style="padding:3px 10px;font-size:10px" onclick="event.stopPropagation();editClient('${c.id}')">Edit</button>
        <button class="btn btn-icon btn-danger" onclick="event.stopPropagation();deleteClient('${c.id}')">×</button>
      </div>
    </div>`;
  }).join('');

  // If something was selected, refresh sub-client column too
  if(selectedClientId) setTimeout(()=>renderSCColumn(selectedClientId), 0);
}

function selectClientDir(id){
  selectedClientId=id;
  buildClientsDir();
  // Render sub-clients immediately (buildClientsDir does it too but defer ensures DOM is ready)
  setTimeout(()=>renderSCColumn(id), 10);
}

function renderSCColumn(clientId){
  const c=DB.clients.find(x=>x.id===clientId);if(!c)return;
  const scs=DB.sub_clients.filter(s=>s.parentId===clientId);
  const hdr=document.getElementById('sc-col-header');
  const col=document.getElementById('sc-col-container');
  if(!hdr||!col)return;

  hdr.innerHTML=`<div style="display:flex;align-items:center;justify-content:space-between">
    <span style="font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--g3)">Sub-Clients - ${c.company}</span>
    <button class="btn btn-primary" style="padding:3px 10px;font-size:10px" onclick="newSCForClient('${clientId}')">+ Add Sub-Client</button>
  </div>`;

  if(!scs.length){
    col.innerHTML=`<div class="empty-state" style="margin-top:30px">No sub-clients for ${c.company} yet.<br><button class="btn btn-primary" style="margin-top:12px" onclick="newSCForClient('${clientId}')">+ Add First Sub-Client</button></div>`;
    return;
  }

  col.innerHTML=scs.map(sc=>{
    const reports=DB.field_reports.filter(r=>r.subClientId===sc.id);
    const invs=DB.invoices.filter(i=>i.subClient===sc.name||i.site?.includes(sc.name));
    return`<div class="entity-card" style="border-left:3px solid var(--pur)">
      <div class="entity-icon purple">${sc.name.slice(0,2).toUpperCase()}</div>
      <div style="flex:1;min-width:0">
        <div class="entity-name">${sc.name}</div>
        <div class="entity-meta">${sc.addr||''} ${sc.city||''}</div>
        <div style="display:flex;gap:8px;margin-top:5px;flex-wrap:wrap">
          ${sc.machines?.length?`<span class="badge badge-grey" style="font-size:8px">🔧 ${sc.machines.length} machine${sc.machines.length!==1?'s':''}</span>`:''}
          ${reports.length?`<span class="badge badge-gld" style="font-size:8px">📋 ${reports.length} report${reports.length!==1?'s':''}</span>`:''}
          ${invs.length?`<span class="badge badge-pur" style="font-size:8px">🧾 ${invs.length} invoice${invs.length!==1?'s':''}</span>`:''}
        </div>
      </div>
      <div style="display:flex;flex-direction:column;gap:4px;flex-shrink:0">
        <button class="btn btn-purple" style="padding:3px 10px;font-size:10px" onclick="newReportForSC('${sc.id}')">Report</button>
        <button class="btn" style="padding:3px 10px;font-size:10px" onclick="editSC('${sc.id}')">Edit</button>
        <button class="btn btn-icon btn-danger" onclick="deleteSC('${sc.id}')">×</button>
      </div>
    </div>`;
  }).join('');
}

function newSCForClient(clientId){
  showPane('sc_add','clients');
  setTimeout(()=>{
    const sel=document.getElementById('sc-parent-sel');
    if(sel) sel.value=clientId;
  },80);
}

function newReportForSC(scId){
  const sc=DB.sub_clients.find(x=>x.id===scId);if(!sc)return;
  showPane('fr_new','fieldreports');
  setTimeout(()=>{
    document.getElementById('fr-parent-client').value=sc.parentId;
    onFRParentChange();
    setTimeout(()=>{document.getElementById('fr-sub-client').value=scId;onFRSubClientChange();},60);
  },80);
}

function deleteSC(id){
  const sc=DB.sub_clients.find(x=>x.id===id);
  if(!sc||!confirm('Delete sub-client '+sc.name+'?'))return;
  dbDelete('dd_sub_clients',id);
  DB.sub_clients=DB.sub_clients.filter(x=>x.id!==id);
  saveDB();updateBadges();
  if(selectedClientId) renderSCColumn(selectedClientId);
  buildClientsDir();
}

function editSC(id){
  const sc=DB.sub_clients.find(x=>x.id===id);if(!sc)return;
  _discardSCBackup=JSON.parse(JSON.stringify(sc));
  showPane('sc_add','clients');
  setTimeout(()=>{
    document.getElementById('sc-name').value=sc.name;
    document.getElementById('sc-name').dataset.editId=id;
    document.getElementById('sc-parent-sel').value=sc.parentId||'';
    document.getElementById('sc-industry').value=sc.industry||'';
    document.getElementById('sc-contact').value=sc.contact||'';
    document.getElementById('sc-phone').value=sc.phone||'';
    document.getElementById('sc-email').value=sc.email||'';
    document.getElementById('sc-addr').value=sc.addr||'';
    document.getElementById('sc-city').value=sc.city||'';
    document.getElementById('sc-notes').value=sc.notes||'';
    document.getElementById('sc-machines-container').innerHTML='';
    (sc.machines||[]).forEach(m=>addSCMachine(m.model,m.type,m.serial));
    const st=document.getElementById('sc-status-msg');if(st){st.textContent='Editing: '+sc.name;st.className='status-msg ok';}
    const db=document.getElementById('sc-discard-btn');if(db)db.style.display='';
  },80);
}

function discardInvoice(){
  // Original invoice was never removed from DB on edit start - nothing to restore.
  // Just clear state and go back; the original record remains intact.
  _discardInvoiceBackup=null; _editInvoiceData=null; window._currentEditId=null;
  const b=document.getElementById('inv-discard-btn');if(b){b.innerHTML='&times;';b.title='Cancel';b.className='btn btn-icon form-exit-btn';}
  document.getElementById('inv-preview-area').innerHTML='';
  showPane('invoice_log','billing');
}
function saveDraftInvoice(){
  const num=(document.getElementById('inv-num').value||'').trim();
  const st=document.getElementById('inv-status-msg');
  if(!num){if(st){st.textContent='Invoice # is required to save a draft.';st.className='status-msg err';}return;}
  const dt=document.getElementById('inv-svc-date').value.trim();
  const cl=document.getElementById('inv-client-name').value.trim();
  const po=document.getElementById('inv-po-ref').value.trim();
  const site=document.getElementById('inv-site').value.trim();
  const notes=document.getElementById('inv-notes').value;
  const arrival=document.getElementById('inv-arrival').value.trim();
  const departure=document.getElementById('inv-departure').value.trim();
  const tosDate=document.getElementById('inv-tos-date').value.trim();
  const hoursDisp=document.getElementById('inv-hours-display');
  const hoursHHMM=hoursDisp?.textContent==='- hrs'?'':hoursDisp?.textContent||'';
  const hoursDecimal=parseFloat(hoursDisp?.dataset.decimal||0);
  const scId=document.getElementById('inv-subclient-sel').value;
  const scName=scId?(DB.sub_clients.find(x=>x.id===scId)||{}).name||'':'';
  const jobType=document.getElementById('inv-job-type').value||'local';
  const lines=invLines.map(l=>({item:l.item,desc:l.desc,qty:l.qty||0,rate:l.rate||0,amt:(l.qty||0)*(l.rate||0)}));
  const total=invLines.reduce((s,l)=>s+(l.qty||0)*(l.rate||0),0);
  const miles=invLines.filter(l=>l._m).reduce((s,l)=>s+parseFloat(l.qty||0),0);
  const isEdit=!!window._currentEditId;
  const existing=isEdit?DB.invoices.find(x=>x.id===window._currentEditId):null;
  const inv={
    id:isEdit?window._currentEditId:uid(),
    num,date:dt,po,
    client:cl,subClient:scName,site,
    jobType,total,miles,
    status:'Draft',
    arrival,departure,tosDate,
    hoursHHMM,hoursDecimal,
    lines,notes,
    created:existing?.created||new Date().toISOString(),
    updated:new Date().toISOString()
  };
  if(isEdit){
    const idx=DB.invoices.findIndex(x=>x.id===window._currentEditId);
    if(idx>=0) DB.invoices[idx]=inv; else DB.invoices.push(inv);
  }else{
    DB.invoices.push(inv);
  }
  const linkedFRId=document.getElementById('inv-fr-link')?.value;
  if(linkedFRId){
    const linkedFR=DB.field_reports.find(r=>r.id===linkedFRId);
    if(linkedFR){linkedFR.linkedInv=inv.num;inv.linkedFRId=linkedFRId;inv.linkedFRNum=linkedFR.num;}
  }
  saveDB();updateBadges();
  _discardInvoiceBackup=null;_editInvoiceData=null;window._currentEditId=null;
  const b=document.getElementById('inv-discard-btn');if(b){b.innerHTML='&times;';b.title='Cancel';b.className='btn btn-icon form-exit-btn';}
  document.getElementById('inv-preview-area').innerHTML='';
  if(st){st.textContent='✓ Draft saved - '+num;st.className='status-msg ok';}
  showPane('invoice_log','billing');
}

function discardClient(){
  _discardClientBackup=null;
  const b=document.getElementById('cl-discard-btn');if(b)b.style.display='none';
  showPane('clients_dir','clients');
}
function discardSC(){
  _discardSCBackup=null;
  const b=document.getElementById('sc-discard-btn');if(b)b.style.display='none';
  showPane('clients_dir','clients');
}
function buildSCAdd(){
  const b=document.getElementById('sc-discard-btn');if(b)b.style.display='none';_discardSCBackup=null;
  document.getElementById('sc-parent-sel').innerHTML='<option value="">- Select parent -</option>'+DB.clients.map(c=>`<option value="${c.id}">${c.company}</option>`).join('');
  // Clear edit state
  const ni=document.getElementById('sc-name');if(ni) delete ni.dataset.editId;
  ['sc-name','sc-industry','sc-contact','sc-phone','sc-email','sc-addr','sc-city','sc-notes'].forEach(id=>{const el=document.getElementById(id);if(el)el.value='';});
  document.getElementById('sc-machines-container').innerHTML='';
}

let scMachineRows=[];
function addSCMachine(model='',type='',serial=''){
  const d=document.createElement('div');
  d.style.cssText='display:grid;grid-template-columns:1fr 1fr 100px 30px;gap:8px;margin-bottom:6px;align-items:center';
  d.innerHTML=`<input placeholder="" value="${model}" style="height:30px;font-size:11px"><input placeholder="" value="${type}" style="height:30px;font-size:11px"><input placeholder="" value="${serial}" style="height:30px;font-size:11px"><button class="btn btn-icon btn-danger" onclick="this.parentElement.remove()">×</button>`;
  document.getElementById('sc-machines-container').appendChild(d);
}

function saveSC(){
  const nameEl=document.getElementById('sc-name');
  const name=(nameEl.value||'').trim();
  const pid=document.getElementById('sc-parent-sel').value;
  const st=document.getElementById('sc-status-msg');
  if(!name||!pid){if(st){st.textContent='Name and parent client required.';st.className='status-msg err';}return;}
  const machines=[];
  document.querySelectorAll('#sc-machines-container > div').forEach(row=>{
    const ins=row.querySelectorAll('input');
    if(ins[0]?.value.trim())machines.push({model:ins[0].value.trim(),type:ins[1]?.value.trim()||'',serial:ins[2]?.value.trim()||''});
  });
  const editId=nameEl.dataset.editId;
  const data={
    name,parentId:pid,
    industry:document.getElementById('sc-industry').value,
    contact:document.getElementById('sc-contact').value,
    phone:document.getElementById('sc-phone').value,
    email:document.getElementById('sc-email').value,
    addr:document.getElementById('sc-addr').value,
    city:document.getElementById('sc-city').value,
    machines,notes:document.getElementById('sc-notes').value,
  };
  if(editId){
    const idx=DB.sub_clients.findIndex(x=>x.id===editId);
    if(idx>=0) DB.sub_clients[idx]={...DB.sub_clients[idx],...data};
    delete nameEl.dataset.editId;
  } else {
    DB.sub_clients.push({id:uid(),...data,created:new Date().toISOString()});
  }
  saveDB();updateBadges();
  selectedClientId=pid;
  if(st){st.textContent='✓ Sub-client saved.';st.className='status-msg ok';}
  showPane('clients_dir','clients');
}

function clearSCForm(){
  ['sc-name','sc-industry','sc-contact','sc-phone','sc-email','sc-addr','sc-city','sc-notes'].forEach(id=>{const el=document.getElementById(id);if(el)el.value='';});
  document.getElementById('sc-machines-container').innerHTML='';
  const st=document.getElementById('sc-status-msg');if(st){st.textContent='';st.className='status-msg';}
}

// CLIENT CRUD
function buildClientAdd(){
  const b=document.getElementById('cl-discard-btn');if(b)b.style.display='none';_discardClientBackup=null;
  // Clear edit state on fresh open
  const el=document.getElementById('cl-company');if(el) delete el.dataset.editId;
  ['cl-company','cl-industry','cl-contact','cl-phone','cl-email','cl-addr','cl-city','cl-acct','cl-notes'].forEach(id=>{const e=document.getElementById(id);if(e)e.value='';});
  document.getElementById('cl-status').value='Active';
  document.getElementById('cl-terms').value='Per Contract';
  document.getElementById('cl-rate-type').value='Standard Local';
}

function saveClient(){
  const compEl=document.getElementById('cl-company');
  const company=(compEl.value||'').trim();
  const st=document.getElementById('cl-status-msg');
  if(!company){if(st){st.textContent='Company name required.';st.className='status-msg err';}return;}
  const editId=compEl.dataset.editId;
  const data={
    company,
    status:document.getElementById('cl-status').value,
    industry:document.getElementById('cl-industry').value,
    contact:document.getElementById('cl-contact').value,
    phone:document.getElementById('cl-phone').value,
    email:document.getElementById('cl-email').value,
    addr:document.getElementById('cl-addr').value,
    city:document.getElementById('cl-city').value,
    terms:document.getElementById('cl-terms').value,
    acct:document.getElementById('cl-acct').value,
    rateType:document.getElementById('cl-rate-type').value,
    notes:document.getElementById('cl-notes').value,
  };
  if(editId){
    const idx=DB.clients.findIndex(x=>x.id===editId);
    if(idx>=0) DB.clients[idx]={...DB.clients[idx],...data};
    delete compEl.dataset.editId;
    selectedClientId=editId;
  } else {
    const nc={id:uid(),...data,created:new Date().toISOString()};
    DB.clients.push(nc);
    selectedClientId=nc.id;
  }
  saveDB();updateBadges();
  if(st){st.textContent='✓ Client saved.';st.className='status-msg ok';}
  showPane('clients_dir','clients');
}

function editClient(id){
  const c=DB.clients.find(x=>x.id===id);if(!c)return;
  _discardClientBackup=JSON.parse(JSON.stringify(c));
  showPane('client_add','clients');
  setTimeout(()=>{
    document.getElementById('cl-company').value=c.company;
    document.getElementById('cl-company').dataset.editId=id;
    document.getElementById('cl-status').value=c.status||'Active';
    document.getElementById('cl-industry').value=c.industry||'';
    document.getElementById('cl-contact').value=c.contact||'';
    document.getElementById('cl-phone').value=c.phone||'';
    document.getElementById('cl-email').value=c.email||'';
    document.getElementById('cl-addr').value=c.addr||'';
    document.getElementById('cl-city').value=c.city||'';
    document.getElementById('cl-terms').value=c.terms||'Per Contract';
    document.getElementById('cl-acct').value=c.acct||'';
    document.getElementById('cl-rate-type').value=c.rateType||'Standard Local';
    document.getElementById('cl-notes').value=c.notes||'';
    const st=document.getElementById('cl-status-msg');if(st){st.textContent='Editing: '+c.company;st.className='status-msg ok';}
    const db=document.getElementById('cl-discard-btn');if(db)db.style.display='';
  },80);
}

function deleteClient(id){
  const c=DB.clients.find(x=>x.id===id);
  if(!c||!confirm('Delete '+c.company+'? This will not delete their sub-clients.'))return;
  dbDelete('dd_clients',id);DB.clients=DB.clients.filter(x=>x.id!==id);
  if(selectedClientId===id) selectedClientId=null;
  saveDB();updateBadges();buildClientsDir();
}

function invoiceForClient(id){switchMain('billing');showPane('create_invoice','billing');setTimeout(()=>{document.getElementById('inv-client-sel').value=id;onInvClientSelect();},100);}

// Legacy stubs (referenced from FR page "New Report for sub-client" button)
function buildSCList(){ buildClientsDir(); }
function renderSCList(){ buildClientsDir(); }
function buildClientList(){ buildClientsDir(); }
function renderClientList(){ buildClientsDir(); }
function selectClient(id){ selectClientDir(id); }


// ══════════════════════════════════════════════════════════════════════════════
// FOLDER STRUCTURE
// ══════════════════════════════════════════════════════════════════════════════
function buildFolderStructure(){
  document.getElementById('root-path').value=DB.config.docs_root||'C:\\Users\\Ben\\Documents\\SDMC';
  document.getElementById('folder-naming').value=DB.config.folder_naming||'company';
  renderFolderList();
}
function renderFolderList(){
  const root=document.getElementById('root-path')?.value||DB.config.docs_root||'C:\\Users\\Ben\\Documents\\SDMC';
  const el=document.getElementById('folder-list-container');if(!el)return;
  if(!DB.clients.length){el.innerHTML='<div class="empty-state">No clients yet.</div>';return;}
  el.innerHTML=DB.clients.map(c=>{
    const displayName=DB.config.folder_naming==='id'?c.id+' - '+c.company:c.company;
    const safe=displayName.replace(/[\\/:*?"<>|]/g,'').trim();
    const path=root+'\\Clients\\'+safe;
    return `<div class="record-row accent-gld">
      <div class="entity-icon" style="width:30px;height:30px;font-size:11px;flex-shrink:0">${initials(c.company)}</div>
      <div style="flex:1;min-width:0"><div style="font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--w)">${c.company}</div>
      <div class="folder-path">${path}</div>
      <div style="font-size:10px;color:var(--g2);margin-top:2px">Invoices  ·  Purchase Orders  ·  Field Reports  ·  Contracts &amp; Agreements  ·  Machine Records  ·  Correspondence</div></div>
    </div>`;
  }).join('');
}
function saveRootPath(){
  DB.config.docs_root=document.getElementById('root-path').value;
  DB.config.folder_naming=document.getElementById('folder-naming').value;
  saveDB();renderFolderList();
  const st=document.getElementById('folder-status');if(st){st.textContent='✓ Saved';st.className='status-msg ok';}
}

// ══════════════════════════════════════════════════════════════════════════════
// INIT
// ══════════════════════════════════════════════════════════════════════════════
// Init handled by onLogin() after Supabase auth

// Keyboard shortcut: Ctrl+S to save
document.addEventListener('keydown',e=>{if((e.ctrlKey||e.metaKey)&&e.key==='s'){e.preventDefault();saveDB();}});
</script>
<!-- SETTINGS MODAL -->
<div id="settings-overlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:9999;display:none;align-items:flex-start;justify-content:center;padding:40px 24px;backdrop-filter:blur(2px)" onclick="if(event.target===this)closeSettings()">
  <div style="background:var(--k2);border:1px solid var(--ln2);border-top:2px solid var(--gld);border-radius:5px;width:100%;max-width:820px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 4px 20px rgba(0,0,0,.5)">
    <div style="display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--ln);flex-shrink:0">
      <span style="font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gld)">⚙ Settings</span>
      <div style="display:flex;gap:8px;align-items:center">
        <button onclick="signOut()" style="display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--k3);border:1px solid var(--ln2);border-radius:var(--radius);color:var(--g3);font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .15s" onmouseover="this.style.borderColor='var(--red)';this.style.color='var(--red)'" onmouseout="this.style.borderColor='var(--ln2)';this.style.color='var(--g3)'">⏻ Sign Out</button>
        <button class="btn btn-icon btn-danger" onclick="closeSettings()">✕</button>
      </div>
    </div>
    <!-- Tab bar -->
    <div style="display:flex;border-bottom:1px solid var(--ln);flex-shrink:0">
      <div class="settings-tab active" data-stab="rates" onclick="switchSettingsTab('rates')" style="padding:10px 22px;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;color:var(--gld);border-bottom:2px solid var(--gld);transition:all .15s">Rates &amp; Presets</div>
      <div class="settings-tab" data-stab="cats" onclick="switchSettingsTab('cats')" style="padding:10px 22px;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;color:var(--g3);border-bottom:2px solid transparent;transition:all .15s">Expense Categories</div>
      <div class="settings-tab" data-stab="folders" onclick="switchSettingsTab('folders')" style="padding:10px 22px;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;color:var(--g3);border-bottom:2px solid transparent;transition:all .15s">Folder Structure</div>
      <div class="settings-tab" data-stab="revisions" onclick="switchSettingsTab('revisions')" style="padding:10px 22px;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;color:var(--g3);border-bottom:2px solid transparent;transition:all .15s">Revision History</div>
    </div>
    <!-- Tab panels -->
    <div style="overflow-y:auto;flex:1;padding:20px">
      <div id="stab-rates"></div>
      <div id="stab-cats" style="display:none"></div>
      <div id="stab-folders" style="display:none"></div>
      <div id="stab-revisions" style="display:none"></div>
    </div>
  </div>
</div>

<!-- CALENDAR POPUP -->
<div id="cal-popup" class="cal-popup" style="display:none">
  <div class="cal-hdr">
    <button class="cal-nav" onclick="calNav(-1)">‹</button>
    <span class="cal-month-lbl" id="cal-month-lbl"></span>
    <button class="cal-nav" onclick="calNav(1)">›</button>
  </div>
  <div class="cal-grid" id="cal-grid"></div>
</div>

<script>
// ── DOCUMENT VIEWER ──────────────────────────────────────────────────────────
var _dvScale=1.0,_dvPinchStart=null,_dvPinchStartScale=1.0;
function openDocViewer(title,html){
  const paper=document.getElementById('doc-viewer-paper');
  const overlay=document.getElementById('doc-viewer-overlay');
  paper.innerHTML=html;
  document.getElementById('doc-viewer-title').textContent=title;
  overlay.style.display='flex';
  overlay.classList.add('open');
  setTimeout(dvFit,50);
  const scroll=document.getElementById('doc-viewer-scroll');
  scroll.addEventListener('touchstart',dvTouchStart,{passive:true});
  scroll.addEventListener('touchmove',dvTouchMove,{passive:false});
  scroll.addEventListener('touchend',dvTouchEnd,{passive:true});
}
function closeDocViewer(){
  const overlay=document.getElementById('doc-viewer-overlay');
  overlay.classList.remove('open');
  overlay.style.display='none';
  document.getElementById('doc-viewer-paper').innerHTML='';
  _dvScale=1.0;
  const scroll=document.getElementById('doc-viewer-scroll');
  scroll.removeEventListener('touchstart',dvTouchStart);
  scroll.removeEventListener('touchmove',dvTouchMove);
  scroll.removeEventListener('touchend',dvTouchEnd);
}
function dvApplyScale(){
  const paper=document.getElementById('doc-viewer-paper');
  paper.style.transform=`scale(${_dvScale})`;
  paper.style.marginBottom=`${(_dvScale-1)*1056}px`;
  document.getElementById('doc-viewer-zoom-lbl').textContent=Math.round(_dvScale*100)+'%';
}
function dvZoom(delta){_dvScale=Math.min(3,Math.max(0.25,_dvScale+delta));dvApplyScale();}
function dvFit(){
  const scroll=document.getElementById('doc-viewer-scroll');
  _dvScale=Math.min(1,(scroll.clientWidth-48)/816);
  dvApplyScale();
}
function dvEdit(){
  const toolbar=document.getElementById('doc-viewer-toolbar');
  const id=toolbar.dataset.editId;
  const type=toolbar.dataset.editType;
  closeDocViewer();
  if(type==='invoice') editInvoice(id);
  else if(type==='fr') editFR(id);
  else if(type==='po') editPO(id);
}
function getCurrentDocSource(){
  const overlay=document.getElementById('doc-viewer-overlay');
  if(overlay?.classList.contains('open')){
    const paper=document.getElementById('doc-viewer-paper');
    return paper?.querySelector('.print-doc, .inv-doc, .doc-view, .frdoc, .docview') || paper?.firstElementChild || null;
  }
  const modalBody=document.getElementById('modal-body');
  return modalBody?.querySelector('.print-doc, .inv-doc, .doc-view, .frdoc, .docview') || null;
}
function docExportName(ext){
  const title=(document.getElementById('doc-viewer-title')?.textContent||'DirectDrive document').trim();
  const safe=title.replace(/[\\/:*?"<>|]/g,'').replace(/\s+/g,'_').slice(0,80)||'DirectDrive_Document';
  return `${safe}.${ext}`;
}
function downloadBlob(blob,name){
  const url=URL.createObjectURL(blob);
  const a=document.createElement('a');
  a.href=url;a.download=name;
  document.body.appendChild(a);
  a.click();
  a.remove();
  setTimeout(()=>URL.revokeObjectURL(url),1200);
}
function concatBytes(parts){
  const enc=new TextEncoder();
  const chunks=parts.map(p=>typeof p==='string'?enc.encode(p):p);
  const total=chunks.reduce((s,c)=>s+c.length,0);
  const out=new Uint8Array(total);
  let off=0;chunks.forEach(c=>{out.set(c,off);off+=c.length;});
  return out;
}
async function docToCanvas(){
  const source=getCurrentDocSource();
  if(!source) throw new Error('No document is open.');
  const clone=source.cloneNode(true);
  clone.style.margin='0';
  clone.style.transform='none';
  const styles=[...document.querySelectorAll('style')].map(s=>s.textContent).join('\n');
  const width=Math.ceil(source.scrollWidth||source.getBoundingClientRect().width||816);
  const height=Math.ceil(source.scrollHeight||source.getBoundingClientRect().height||1056);
  const serialized=new XMLSerializer().serializeToString(clone);
  const svg=`<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
    <foreignObject width="100%" height="100%">
      <div xmlns="http://www.w3.org/1999/xhtml">
        <style>${styles}</style>${serialized}
      </div>
    </foreignObject>
  </svg>`;
  const svgBlob=new Blob([svg],{type:'image/svg+xml;charset=utf-8'});
  const url=URL.createObjectURL(svgBlob);
  try{
    const img=new Image();
    await new Promise((resolve,reject)=>{img.onload=resolve;img.onerror=reject;img.src=url;});
    const canvas=document.createElement('canvas');
    canvas.width=width;canvas.height=height;
    const ctx=canvas.getContext('2d');
    ctx.fillStyle='#fff';ctx.fillRect(0,0,width,height);
    ctx.drawImage(img,0,0);
    return canvas;
  } finally {
    URL.revokeObjectURL(url);
  }
}
async function docToPngFile(){
  const canvas=await docToCanvas();
  const pngBlob=await new Promise(resolve=>canvas.toBlob(resolve,'image/png',0.92));
  if(!pngBlob) throw new Error('Could not create PNG.');
  return new File([pngBlob],docExportName('png'),{type:'image/png'});
}
async function docToPdfFile(){
  const source=getCurrentDocSource();
  const sourceRect=source?.getBoundingClientRect();
  const sourceScale=source&&sourceRect?.width?(sourceRect.width/(source.scrollWidth||sourceRect.width)):1;
  const pageBreakYs=source&&sourceRect?[...source.querySelectorAll('[data-pdf-page-break]')]
    .map(el=>Math.round((el.getBoundingClientRect().top-sourceRect.top)/sourceScale))
    .filter(y=>y>0)
    .sort((a,b)=>a-b):[];
  const sourceCanvas=await docToCanvas();
  const pageW=612,pageH=792,margin=18;
  const drawW=pageW-(margin*2),drawH=pageH-(margin*2);
  const sliceH=Math.floor(sourceCanvas.width*(drawH/drawW));
  const pages=[];
  let breakIndex=0;
  for(let y=0;y<sourceCanvas.height;){
    let h=Math.min(sliceH,sourceCanvas.height-y);
    const nextBreak=pageBreakYs[breakIndex];
    if(nextBreak&&nextBreak>y+8&&nextBreak<y+h) h=nextBreak-y;
    while(pageBreakYs[breakIndex]&&pageBreakYs[breakIndex]<=y+8) breakIndex++;
    const c=document.createElement('canvas');
    c.width=sourceCanvas.width;c.height=h;
    const ctx=c.getContext('2d');
    ctx.fillStyle='#fff';ctx.fillRect(0,0,c.width,c.height);
    ctx.drawImage(sourceCanvas,0,y,sourceCanvas.width,h,0,0,c.width,h);
    const dataUrl=c.toDataURL('image/jpeg',0.88);
    const b64=dataUrl.split(',')[1];
    const bytes=Uint8Array.from(atob(b64),ch=>ch.charCodeAt(0));
    const imgH=drawW*(h/sourceCanvas.width);
    pages.push({bytes,w:c.width,h:c.height,imgW:drawW,imgH});
    y+=h;
  }
  const objects=[];
  objects.push('<< /Type /Catalog /Pages 2 0 R >>');
  const kids=pages.map((_,i)=>`${3+i*3} 0 R`).join(' ');
  objects.push(`<< /Type /Pages /Kids [${kids}] /Count ${pages.length} >>`);
  pages.forEach((p,i)=>{
    const pageObj=3+i*3, contentObj=pageObj+1, imageObj=pageObj+2, im=`Im${i+1}`;
    objects.push(`<< /Type /Page /Parent 2 0 R /MediaBox [0 0 ${pageW} ${pageH}] /Resources << /XObject << /${im} ${imageObj} 0 R >> >> /Contents ${contentObj} 0 R >>`);
    const y=pageH-margin-p.imgH;
    const content=`q ${p.imgW.toFixed(2)} 0 0 ${p.imgH.toFixed(2)} ${margin} ${y.toFixed(2)} cm /${im} Do Q`;
    objects.push(`<< /Length ${content.length} >>\nstream\n${content}\nendstream`);
    objects.push(concatBytes([`<< /Type /XObject /Subtype /Image /Width ${p.w} /Height ${p.h} /ColorSpace /DeviceRGB /BitsPerComponent 8 /Filter /DCTDecode /Length ${p.bytes.length} >>\nstream\n`,p.bytes,'\nendstream']));
  });
  const parts=['%PDF-1.4\n'];
  const offsets=[0];
  objects.forEach((obj,i)=>{
    offsets.push(concatBytes(parts).length);
    parts.push(`${i+1} 0 obj\n`);
    parts.push(obj);
    parts.push('\nendobj\n');
  });
  const xrefAt=concatBytes(parts).length;
  parts.push(`xref\n0 ${objects.length+1}\n0000000000 65535 f \n`);
  for(let i=1;i<offsets.length;i++)parts.push(String(offsets[i]).padStart(10,'0')+' 00000 n \n');
  parts.push(`trailer\n<< /Size ${objects.length+1} /Root 1 0 R >>\nstartxref\n${xrefAt}\n%%EOF`);
  const pdfBlob=new Blob([concatBytes(parts)],{type:'application/pdf'});
  return new File([pdfBlob],docExportName('pdf'),{type:'application/pdf'});
}
async function dvEmail(){
  const title=document.getElementById('doc-viewer-title')?.textContent||'DirectDrive document';
  const subject=encodeURIComponent(title);
  const body=encodeURIComponent('DirectDrive document exported from the app. Attach the downloaded PDF and photo package if they are not already attached.');
  try{
    const toolbar=document.getElementById('doc-viewer-toolbar');
    const files=[await docToPdfFile()];
    if(toolbar?.dataset.editType==='fr'&&toolbar.dataset.editId){
      const pkg=await buildFRZipBlob(toolbar.dataset.editId);
      files.push(new File([pkg.blob],pkg.name,{type:'application/zip'}));
    }
    files.forEach(file=>downloadBlob(file,file.name));
    if(navigator.canShare?.({files})){
      await navigator.share({title,text:'DirectDrive document',files});
      return;
    }
  }catch(e){
    console.warn('Document export failed:',e);
  }
  window.location.href=`mailto:?subject=${subject}&body=${body}`;
}
function dvTouchStart(e){if(e.touches.length===2){_dvPinchStart=Math.hypot(e.touches[0].clientX-e.touches[1].clientX,e.touches[0].clientY-e.touches[1].clientY);_dvPinchStartScale=_dvScale;}}
function dvTouchMove(e){if(e.touches.length===2&&_dvPinchStart){e.preventDefault();const dist=Math.hypot(e.touches[0].clientX-e.touches[1].clientX,e.touches[0].clientY-e.touches[1].clientY);_dvScale=Math.min(3,Math.max(0.25,_dvPinchStartScale*(dist/_dvPinchStart)));dvApplyScale();}}
function dvTouchEnd(){_dvPinchStart=null;}

function buildPrintPageHTML(title,content){
  const styles=[...document.querySelectorAll('style')].map(s=>s.textContent).join('\n');
  return `<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${title}</title><style>${styles}
    body{background:#fff!important;margin:0!important;padding:0!important}
    body>*:not(#print-shell){display:none!important}
    #print-shell{display:block!important;background:#fff!important;width:100%!important}
    #print-shell [data-pdf-page-break]{break-before:page!important;page-break-before:always!important}
  </style></head><body><div id="print-shell">${content}</div></body></html>`;
}
function printDoc(){
  const source = getCurrentDocSource();
  if(!source){ window.print(); return; }

  // Clone into the dedicated top-level print shell
  const shell = document.getElementById('print-shell');
  const clone = source.cloneNode(true);
  clone.style.transform='none';
  clone.style.margin='';
  const isMobilePrint=window.matchMedia?.('(max-width: 768px)').matches || /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
  if(isMobilePrint){
    const title=(document.getElementById('doc-viewer-title')?.textContent||'DirectDrive document').trim();
    const printWin=window.open('','_blank');
    if(printWin){
      printWin.document.open();
      printWin.document.write(buildPrintPageHTML(title,clone.outerHTML));
      printWin.document.close();
      printWin.focus();
      setTimeout(()=>printWin.print(),350);
      return;
    }
  }
  shell.innerHTML = '';
  shell.appendChild(clone);
  shell.style.display = 'block';

  void shell.offsetHeight;
  window.onafterprint=()=>{
    shell.style.display = 'none';
    shell.innerHTML = '';
    window.onafterprint=null;
  };
  window.print();

  // Fallback cleanup for browsers that do not fire afterprint reliably.
  setTimeout(() => {
    shell.style.display = 'none';
    shell.innerHTML = '';
    window.onafterprint=null;
  }, 5000);
}

// ══════════════════════════════════════════════════════
// SETTINGS MODAL
// ══════════════════════════════════════════════════════
function openSettings(){
  const el=document.getElementById('settings-overlay');
  el.style.display='flex';
  switchSettingsTab('rates');
}
function closeSettings(){
  document.getElementById('settings-overlay').style.display='none';
}
function switchSettingsTab(tab){
  document.querySelectorAll('.settings-tab').forEach(t=>{
    const on=t.dataset.stab===tab;
    t.style.color=on?'var(--gld)':'var(--g3)';
    t.style.borderBottomColor=on?'var(--gld)':'transparent';
  });
  ['rates','cats','folders','revisions'].forEach(id=>{
    document.getElementById('stab-'+id).style.display=id===tab?'':'none';
  });
  if(tab==='rates') renderSettingsRates();
  if(tab==='cats') renderSettingsCats();
  if(tab==='folders') renderSettingsFolders();
  if(tab==='revisions') renderSettingsRevisions();
}
function renderSettingsRates(){
  const el=document.getElementById('stab-rates');if(!el)return;
  const isLight = document.documentElement.classList.contains('light');
  el.innerHTML=`<div class="card" style="margin-bottom:10px">
    <div style="display:flex;align-items:center;justify-content:space-between">
      <div>
        <div class="card-title" style="margin-bottom:2px">Appearance</div>
        <div style="font-size:11px;color:var(--g3)">Switch between dark and light mode</div>
      </div>
      <button onclick="toggleTheme();renderSettingsRates()" style="display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--k3);border:1px solid var(--ln2);border-radius:var(--radius);color:var(--w2);font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .15s" onmouseover="this.style.borderColor='var(--gld)'" onmouseout="this.style.borderColor='var(--ln2)'">
        <span style="font-size:16px">${isLight?'🌙':'☀️'}</span> ${isLight?'Dark Mode':'Light Mode'}
      </button>
    </div>
  </div>
  <div class="card">
    <div class="card-title">Profile</div>
    <div class="field-row col3">
      <div class="field"><label>Technician Name</label><input id="scfg-tech" value="${DB.config.technician||'Benjamin Garcia'}" placeholder="Your name"></div>
      <div class="field"><label>Role</label><input id="scfg-role" value="${DB.config.role||'Machine Technician'}" placeholder="Your role"></div>
      <div class="field"><label>Company Name</label><input id="scfg-company" value="${DB.config.company||'SDMC'}" placeholder="Company name"></div>
    </div>
    <button class="btn btn-primary" onclick="saveSettingsProfile()">Save Profile</button>
    <span class="status-msg" id="scfg-profile-status" style="margin-left:10px"></span>
  </div>
  <div class="card">
    <div class="card-title">Invoice &amp; Mileage</div>
    <div class="field-row col3">
      <div class="field"><label>Invoice Prefix</label><input id="scfg-prefix" value="${DB.config.inv_prefix||'FT'}" placeholder="FT"></div>
      <div class="field"><label>IRS Mileage ($/mi)</label><input id="scfg-mi" type="number" step="0.001" value="${DB.config.irs_mileage||0.725}"></div>
      <div class="field"><label>Travel Fee ($)</label><input id="scfg-tf" type="number" value="${DB.config.travel_fee||1000}"></div>
    </div>
    <div class="field-row col2">
      <div class="field"><label>Travel Fee Description</label><input id="scfg-td" value="${DB.config.travel_fee_desc||''}"></div>
    </div>
    <button class="btn btn-primary" onclick="saveSettingsRates()">Save</button>
    <span class="status-msg" id="scfg-status" style="margin-left:10px"></span>
  </div>
  <div class="section-header" style="margin-top:6px"><span class="section-title">Service Presets</span><div class="section-line"></div></div>
  <div id="scfg-presets"></div>
  <div class="btn-row" style="margin-top:8px">
    <button class="btn" onclick="addPreset('local');renderSettingsRates()">+ Add Local</button>
    <button class="btn" onclick="addPreset('oot');renderSettingsRates()">+ Add OOT</button>
  </div>`;
  const pg=document.getElementById('scfg-presets');
  ['local','oot'].forEach(type=>{
    const lbl=type==='local'?'<span class="badge badge-grn">Local</span>':'<span class="badge badge-gld">Out of Town</span>';
    const rows=DB.presets.filter(p=>p.type===type).map(p=>`
      <div style="display:grid;grid-template-columns:1fr 2fr 90px 25px;gap:8px;align-items:center;margin-bottom:6px">
        <input value="${p.name.replace(/"/g,'&quot;')}" style="height:30px;font-size:11px" oninput="updatePreset(${p.id},'name',this.value)">
        <input value="${p.desc.replace(/"/g,'&quot;')}" style="height:30px;font-size:11px" oninput="updatePreset(${p.id},'desc',this.value)">
        <input type="number" value="${p.rate}" style="height:30px;font-size:11px;text-align:right" oninput="updatePreset(${p.id},'rate',parseFloat(this.value)||0)">
        <button class="btn btn-icon btn-danger" onclick="deletePreset(${p.id});renderSettingsRates()">×</button>
      </div>`).join('');
    pg.innerHTML+=`<div class="card" style="margin-bottom:10px"><div style="margin-bottom:10px">${lbl}</div>${rows||'<div style="font-size:12px;color:var(--g3)">No presets.</div>'}</div>`;
  });
}
function saveSettingsProfile(){
  DB.config.technician=document.getElementById('scfg-tech').value.trim()||'Benjamin Garcia';
  DB.config.role=document.getElementById('scfg-role')?.value.trim()||'Machine Technician';
  DB.config.company=document.getElementById('scfg-company').value.trim()||'SDMC';
  saveDB();
  // Update drawer footer live
  const df=document.getElementById('drawer-profile');
  if(df) df.textContent=formatDrawerProfile();
  document.querySelectorAll('.dd-page-company,[id$="-company-lbl"]').forEach(el=>el.textContent=DB.config.company||'SDMC');
  const st=document.getElementById('scfg-profile-status');
  if(st){st.textContent='✓ Saved';st.className='status-msg ok';setTimeout(()=>{st.textContent='';},2000);}
}
function saveSettingsRates(){
  DB.config.inv_prefix=document.getElementById('scfg-prefix').value.trim()||'FT';
  DB.config.irs_mileage=parseFloat(document.getElementById('scfg-mi').value)||0.725;
  DB.config.travel_fee=parseFloat(document.getElementById('scfg-tf').value)||1000;
  DB.config.travel_fee_desc=document.getElementById('scfg-td').value;
  saveDB();
  const st=document.getElementById('scfg-status');
  st.textContent='✓ Saved';st.className='status-msg ok';
  setTimeout(()=>{st.textContent='';},2000);
}
function renderSettingsCats(){
  const el=document.getElementById('stab-cats');if(!el)return;
  const groups={};DB.categories.forEach(c=>{groups[c.group]=groups[c.group]||[];groups[c.group].push(c);});
  el.innerHTML=Object.entries(groups).map(([g,cs])=>`
    <div class="card" style="margin-bottom:10px">
      <div class="card-title">${g}</div>
      <div>${cs.map(c=>`<span class="cat-tag">${c.name}<span class="cat-remove" onclick="deleteCategory(${c.id});renderSettingsCats()">×</span></span>`).join('')}</div>
    </div>`).join('')+`
  <div class="card">
    <div class="card-title">Add Category</div>
    <div class="field-row col3">
      <div class="field"><label>Name</label><input id="scat-name" placeholder=""></div>
      <div class="field"><label>Group</label>
        <select id="scat-group">
          <option value="Operations">Business Operations</option>
          <option value="Vehicle">Vehicle &amp; Travel</option>
          <option value="Tools">Tools &amp; Equipment</option>
          <option value="Services">Services &amp; Software</option>
          <option value="Other">Other</option>
        </select>
      </div>
      <div class="field" style="display:flex;align-items:flex-end">
        <button class="btn btn-primary" style="width:100%" onclick="addCategoryFromSettings()">+ Add</button>
      </div>
    </div>
  </div>`;
}
function addCategoryFromSettings(){
  const n=(document.getElementById('scat-name').value||'').trim();
  const g=document.getElementById('scat-group').value;
  if(!n)return;
  if(!DB.categories.find(c=>c.name===n)){DB.categories.push({id:DB.cat_id_seq++,name:n,group:g});saveDB();}
  document.getElementById('scat-name').value='';
  renderSettingsCats();
}
function renderSettingsFolders(){
  const el=document.getElementById('stab-folders');if(!el)return;
  const root=DB.config.docs_root||'';
  el.innerHTML=`<div class="card">
    <div class="card-title">Document Root Path</div>
    <div class="field-row col2">
      <div class="field"><label>Root Directory</label><input id="sfld-root" value="${root.replace(/"/g,'&quot;')}" placeholder="C:\Users\Ben\Documents\SDMC"></div>
      <div class="field"><label>Naming Convention</label>
        <select id="sfld-nm">
          <option value="company" ${(DB.config.folder_naming||'company')==='company'?'selected':''}>Company Name</option>
          <option value="id" ${DB.config.folder_naming==='id'?'selected':''}>ID - Company</option>
        </select>
      </div>
    </div>
    <button class="btn btn-primary" onclick="saveSettingsFolders()">Save Path</button>
    <span class="status-msg" id="sfld-status" style="margin-left:10px"></span>
  </div>
  <div class="section-header" style="margin-top:6px"><span class="section-title">Client Folders</span><div class="section-line"></div></div>
  <div>${DB.clients.map(c=>{
    const nm=DB.config.folder_naming==='id'?c.id+' - '+c.company:c.company;
    const scs=DB.sub_clients.filter(s=>s.parentId===c.id);
    return`<div class="card" style="margin-bottom:8px">
      <div style="font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--gld)">${nm}</div>
      <div style="font-size:11px;color:var(--g3);margin-top:2px">${root}\\${nm}</div>
      ${scs.length?`<div style="margin-top:8px;padding-top:8px;border-top:1px solid var(--ln)">${scs.map(s=>`<div style="font-size:11px;color:var(--g3);padding:2px 0 2px 14px">└ ${s.name}</div>`).join('')}</div>`:''}
    </div>`;
  }).join('')||'<div class="empty-state">No clients yet.</div>'}</div>`;
}
function saveSettingsFolders(){
  DB.config.docs_root=document.getElementById('sfld-root').value;
  DB.config.folder_naming=document.getElementById('sfld-nm').value;
  saveDB();
  const st=document.getElementById('sfld-status');
  st.textContent='✓ Saved';st.className='status-msg ok';
  setTimeout(()=>{st.textContent='';renderSettingsFolders();},1500);
}

function renderSettingsRevisions(){
  const el=document.getElementById('stab-revisions');if(!el)return;
  const typeColor={fix:'grn',feature:'blu',improvement:'pur',change:'amb'};
  const typeLabel={fix:'Bug Fix',feature:'Feature',improvement:'Improvement',change:'Change'};
  const typeDot={fix:'var(--grn)',feature:'var(--blu)',improvement:'var(--pur)',change:'var(--amb)'};
  el.innerHTML=`
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:18px">
      <div>
        <div style="font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:900;color:var(--w);letter-spacing:.06em">Revision History</div>
        <div style="font-size:11px;color:var(--g3);margin-top:3px">${REVISION_LOG.length} revision${REVISION_LOG.length!==1?'s':''} recorded</div>
      </div>
      <span style="font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--g3)">DirectDrive - SDMC</span>
    </div>
    <div style="border:1px solid var(--ln2);border-radius:var(--radius2);overflow:hidden">
      <div style="display:grid;grid-template-columns:56px 1fr 110px 100px;background:var(--k3);padding:8px 14px;border-bottom:1px solid var(--ln2)">
        <span style="font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--g3)">ID</span>
        <span style="font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--g3)">Change</span>
        <span style="font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--g3)">Area</span>
        <span style="font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--g3);text-align:right">Date</span>
      </div>
      ${[...REVISION_LOG].reverse().map((r,i,arr)=>`
        <div style="display:grid;grid-template-columns:56px 1fr 110px 100px;padding:12px 14px;border-bottom:${i<arr.length-1?'1px solid var(--ln)':'none'};align-items:start;gap:4px">
          <div style="font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:900;color:var(--gld);line-height:1.2">${r.id}</div>
          <div>
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px">
              <span style="display:inline-flex;align-items:center;gap:4px;font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:2px;background:var(--${typeColor[r.type]||'g'}g,var(--k5));color:${typeDot[r.type]||'var(--g3)'}">
                <span style="width:5px;height:5px;border-radius:50%;background:${typeDot[r.type]||'var(--g3)'};flex-shrink:0;display:inline-block"></span>
                ${typeLabel[r.type]||r.type}
              </span>
            </div>
            <div style="font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--w2);margin-bottom:4px">${r.title}</div>
            <div style="font-size:11px;color:var(--g3);line-height:1.55">${r.desc}</div>
          </div>
          <div style="font-size:11px;color:var(--g3);padding-top:2px">${r.area}</div>
          <div style="font-size:11px;color:var(--g3);text-align:right;padding-top:2px">${r.date}</div>
        </div>`).join('')}
    </div>`;
}


(function(){
  let _input=null, _cy=0, _cm=0;
  const MONTHS=['January','February','March','April','May','June','July','August','September','October','November','December'];
  const DAYS=['Su','Mo','Tu','We','Th','Fr','Sa'];

  function openCal(inp){
    _input=inp;
    const now=new Date();
    const parts=(inp.value||'').split('/');
    _cy=parts.length===3?parseInt(parts[2]):now.getFullYear();
    _cm=parts.length===3?parseInt(parts[0])-1:now.getMonth();
    if(isNaN(_cy)||_cy<2000||_cy>2100){_cy=now.getFullYear();_cm=now.getMonth();}
    renderCal();
    // Position below input
    const pop=document.getElementById('cal-popup');
    pop.style.display='block';
    const rect=inp.getBoundingClientRect();
    let left=rect.left, top=rect.bottom+4;
    // Keep on screen
    const pw=268, ph=260;
    if(left+pw>window.innerWidth) left=window.innerWidth-pw-8;
    if(top+ph>window.innerHeight) top=rect.top-ph-4;
    pop.style.left=left+'px'; pop.style.top=top+'px';
    // Click-outside handler
    setTimeout(()=>document.addEventListener('click',outsideClick),10);
  }
  function outsideClick(e){
    const pop=document.getElementById('cal-popup');
    if(!pop.contains(e.target)&&e.target!==_input){closeCal();}
  }
  function closeCal(){
    document.getElementById('cal-popup').style.display='none';
    document.removeEventListener('click',outsideClick);
    _input=null;
  }
  function calNav(dir){
    _cm+=dir;
    if(_cm>11){_cm=0;_cy++;}
    if(_cm<0){_cm=11;_cy--;}
    renderCal();
  }
  function renderCal(){
    document.getElementById('cal-month-lbl').textContent=MONTHS[_cm]+' '+_cy;
    const g=document.getElementById('cal-grid');
    const now=new Date(), selVal=_input?_input.value:'';
    let h=DAYS.map(d=>`<div class="cal-dow">${d}</div>`).join('');
    const first=new Date(_cy,_cm,1).getDay();
    const dim=new Date(_cy,_cm+1,0).getDate();
    const prev=new Date(_cy,_cm,0).getDate();
    for(let i=0;i<first;i++){
      const dy=prev-first+1+i;
      h+=`<div class="cal-day cal-other" onclick="calPick(${_cy},${_cm-1},${dy})">${dy}</div>`;
    }
    for(let d=1;d<=dim;d++){
      const isToday=now.getFullYear()===_cy&&now.getMonth()===_cm&&now.getDate()===d;
      const ds=String(_cm+1).padStart(2,'0')+'/'+String(d).padStart(2,'0')+'/'+_cy;
      const isSel=selVal===ds;
      h+=`<div class="cal-day ${isToday?'cal-today':''} ${isSel?'cal-sel':''}" onclick="calPick(${_cy},${_cm},${d})">${d}</div>`;
    }
    const rem=42-(first+dim);
    for(let i=1;i<=rem;i++)
      h+=`<div class="cal-day cal-other" onclick="calPick(${_cy},${_cm+1},${i})">${i}</div>`;
    g.innerHTML=h;
  }
  function calPick(y,m,d){
    if(m<0){m=11;y--;} if(m>11){m=0;y++;}
    const s=String(m+1).padStart(2,'0')+'/'+String(d).padStart(2,'0')+'/'+y;
    if(_input){_input.value=s;_input.dispatchEvent(new Event('input'));}
    closeCal();
  }
  // Expose globals
  window.openCal=openCal; window.closeCal=closeCal;
  window.calNav=calNav; window.calPick=calPick;
})();

// Attach calendar to all date inputs on pane open
function attachCalendars(){
  document.querySelectorAll('input[data-datepicker]').forEach(inp=>{
    inp.addEventListener('click',function(e){e.stopPropagation();openCal(this);});
    inp.setAttribute('readonly','true');
    inp.style.cursor='pointer';
  });
}

// ══════════════════════════════════════════════════
// ZIP DOWNLOAD - Field Report + Photos
// ══════════════════════════════════════════════════
async function buildFRZipBlob(id){
  const r=DB.field_reports.find(x=>x.id===id);
  if(!r) throw new Error('Report not found.');

  if(!window.JSZip){
    await new Promise((res,rej)=>{
      const s=document.createElement('script');
      s.src='https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js';
      s.onload=res;s.onerror=rej;
      document.head.appendChild(s);
    });
  }

  const zip=new JSZip();
  const folderName=`FR-${r.num}_${(r.subClientName||r.parentClientName||'Report').replace(/[^\w\s-]/g,'').trim().replace(/\s+/g,'_')}`;
  const folder=zip.folder(folderName);

  // Build text report
  const days=r.days?.length?r.days.map((d,i)=>`  Day ${i+1}: ${d.date||r.date}  |  Arrived: ${d.arr||'-'}  |  Left: ${d.dep||'-'}  |  Hours: ${d.hrsHHMM||'-'} (${d.hrsDecimal||0} hrs)`).join('\n'):'  No time data recorded.';
  const report=`FIELD SERVICE REPORT - ${r.num}
${'='.repeat(55)}
San Diego Manufacturing Company LLC
Benjamin Garcia · 619-847-4485

REPORT INFO
-----------
Report #:      ${r.num}
Date:          ${r.date}
Type:          ${r.type}
Result:        ${r.result||'-'}
Status:        ${r.status||'-'}
Technician:    ${r.tech}

CLIENT & SITE
-------------
Parent Client: ${r.parentClientName||'-'}
Sub-Client:    ${r.subClientName||'-'}
Site Address:  ${r.siteAddr||'-'}
Site Contact:  ${r.siteContact||'-'}

TIME ON SITE
------------
${days}

Total Time:    ${r.totalHoursHHMM||'-'} (${r.totalHoursDecimal||0} decimal hrs)

MACHINE SPECIFICATIONS
----------------------
Model:         ${r.machine||'-'}
Controller:    ${r.controller||'-'}
Serial #:      ${r.serial||'-'}
Axes:          ${r.axes||'-'}
Spindles:      ${r.spindles||'-'}
Table:         ${r.tableType||'-'}${r.tableSize?' · '+r.tableSize:''}
XYZ Travel:    ${r.xyz||'-'} ${r.travelUnits||''}

WORK PERFORMED
--------------
${r.work||'-'}

PARTS USED
----------
${r.parts||'-'}

RECOMMENDED WORK
----------------
${r.recs||'-'}

LINKED DOCUMENTS
----------------
Linked PO:      ${r.linkedPO||'-'}
Linked Invoice: ${r.linkedInv||'-'}

INTERNAL NOTES
--------------
${r.notes||'-'}

${'='.repeat(55)}
DirectDrive · SDMC
`;
  folder.file(`${r.num}_Report.txt`, report);

  // Add photos
  if(r.photos?.length){
    const photosFolder=folder.folder('Photos');
    r.photos.forEach((p,i)=>{
      const ext=p.data.split(';')[0].split('/')[1]||'jpg';
      const b64=p.data.split(',')[1];
      const name=`Photo_${String(i+1).padStart(2,'0')}${p.label?'_'+p.label.replace(/[^\w]/g,'_'):''}.${ext}`;
      photosFolder.file(name, b64, {base64:true});
    });
  }

  const blob=await zip.generateAsync({type:'blob',compression:'DEFLATE',compressionOptions:{level:6}});
  return {blob,name:folderName+'.zip'};
}

async function downloadFRZip(id,sourceBtn){
  const btn=sourceBtn || window.event?.target || null;
  if(btn){btn.textContent='⏳ Building...';btn.disabled=true;}

  try{
    const file=await buildFRZipBlob(id);
    downloadBlob(file.blob,file.name);
    if(btn){
      btn.textContent='✓ Downloaded'; btn.style.color='var(--grn)';
      setTimeout(()=>{btn.textContent='⬇ Download ZIP';btn.disabled=false;btn.style.color='';},3000);
    }
  }catch(err){
    console.error('ZIP error:',err);
    alert('Download failed. Check your internet connection (needs CDN for JSZip).');
    if(btn){btn.textContent='⬇ Download ZIP'; btn.disabled=false;}
  }
}
</script>
<!-- Cloudflare Pages Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "aafedc3447e74ffeaf357ab64ec8e158"}'></script><!-- Cloudflare Pages Analytics --></body>
</html>