:root{
  --pine:#3A4033;
  --pine-deep:#2E332A;
  --bone:#C9B598;
  --cream:#F2EEE4;
  --ink:#23271F;
  --green:#2F6B4F;
  --navy:#17324D;
  --sage:#DCE7E1;
  --white:#fff;
  --line:#D8D7CF;
  --muted:#73776F;
  --danger:#9D3A36;
  --success:#2F6B4F;
  --shadow:0 18px 50px rgba(25,32,24,.12);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;color:var(--ink);background:#F7F5EF}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
body{min-height:100vh}
#appShell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.sidebar{
  position:sticky;top:0;height:100vh;padding:26px 20px;background:var(--pine-deep);color:#fff;
  display:flex;flex-direction:column;gap:28px;border-right:1px solid rgba(255,255,255,.06)
}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer}
.brand-mark{color:var(--bone);font-size:26px}
.brand strong{display:block;letter-spacing:.12em;font-size:17px}
.brand span{display:block;color:var(--bone);font-size:10px;letter-spacing:.25em;margin-top:2px}
.nav{display:grid;gap:7px}
.nav button{
  border:0;background:transparent;color:#DAD6CB;text-align:left;padding:11px 13px;border-radius:7px;
  font-weight:600
}
.nav button:hover,.nav button.active{background:rgba(201,181,152,.16);color:#fff}
.side-actions{display:grid;gap:8px}
.sync-pill{
  margin-top:auto;display:flex;align-items:center;gap:8px;color:#C7C3B7;font-size:12px;
  border-top:1px solid rgba(255,255,255,.12);padding-top:18px
}
.dot{width:8px;height:8px;border-radius:50%;background:#C9B598}
.dot.online{background:#65B989}
.dot.error{background:#D56A62}

.main{min-width:0}
.topbar{
  min-height:108px;padding:24px 34px;border-bottom:1px solid var(--line);background:rgba(247,245,239,.94);
  backdrop-filter:blur(12px);position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px
}
.eyebrow{margin:0;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
h1,h2,h3,p{margin-top:0}
.topbar h1{margin:4px 0 0;font-size:31px;letter-spacing:-.03em}
.top-actions{display:flex;gap:9px;align-items:center}
.btn,.icon-btn{
  border:1px solid transparent;border-radius:7px;min-height:42px;padding:9px 15px;font-weight:700
}
.btn.primary{background:var(--bone);color:var(--pine-deep)}
.btn.subtle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#fff}
.btn.outline{background:#fff;border-color:#CFCFC8;color:var(--pine-deep)}
.btn.danger{background:#fff;border-color:#E2B5B0;color:var(--danger)}
.btn.success{background:var(--green);color:#fff}
.icon-btn{width:42px;padding:0;background:#fff;border-color:#D7D6CF;color:var(--pine-deep);font-size:20px}
#page{padding:32px 34px 60px;max-width:1500px;margin:0 auto}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:21px}
.stat .label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:800}
.stat strong{display:block;font-size:28px;margin-top:9px;letter-spacing:-.03em}
.stat small{display:block;margin-top:4px;color:var(--muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.panel{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.panel-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.panel-head h3{margin:0;font-size:16px}
.panel-body{padding:18px 20px}
.empty{padding:34px 12px;text-align:center;color:var(--muted)}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:13px 14px;border-bottom:1px solid #ECEBE5;text-align:left;vertical-align:middle;white-space:nowrap}
th{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
td{font-size:14px}
tr:last-child td{border-bottom:0}
.money{text-align:right}
.status{display:inline-block;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.status.draft{background:#EEECE3;color:#69685F}
.status.sent{background:#E3EEF8;color:#2B5C82}
.status.accepted,.status.paid{background:#E1F0E7;color:#286145}
.status.declined,.status.overdue{background:#F7E5E2;color:#9D3A36}
.row-actions{display:flex;gap:6px}
.mini{border:1px solid #D7D6CF;background:#fff;border-radius:6px;padding:6px 9px;font-size:12px;font-weight:700}
.mini:hover{background:#F1F0E9}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.toolbar-left,.toolbar-right{display:flex;gap:9px;align-items:center}
.search{min-width:260px;border:1px solid #D1D0C8;background:#fff;border-radius:7px;padding:10px 12px}
.filter{border:1px solid #D1D0C8;background:#fff;border-radius:7px;padding:10px 12px}

.modal{position:fixed;inset:0;z-index:100;display:none}
.modal.open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(16,20,17,.58)}
.modal-panel{
  position:absolute;right:0;top:0;height:100%;width:min(900px,96vw);background:#F8F7F2;box-shadow:-20px 0 70px rgba(0,0,0,.24);
  overflow:auto
}
.modal-head{
  position:sticky;top:0;z-index:3;background:rgba(248,247,242,.96);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:22px 26px;display:flex;align-items:center;justify-content:space-between
}
.modal-head h2{margin:4px 0 0}
.close-btn{border:0;background:transparent;font-size:30px;color:#54574F}
.form-wrap{padding:24px 26px 70px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:6px}
.field.full{grid-column:1/-1}
label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:#62665D}
input,select,textarea{
  width:100%;border:1px solid #D2D2CB;background:#fff;border-radius:7px;padding:11px 12px;outline:none
}
input:focus,select:focus,textarea:focus{border-color:var(--bone);box-shadow:0 0 0 3px rgba(201,181,152,.18)}
textarea{min-height:90px;resize:vertical}
.form-section{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.form-section h3{font-size:15px;margin-bottom:13px}
.items{display:grid;gap:9px}
.item-row{
  display:grid;grid-template-columns:minmax(180px,1fr) 85px 130px 50px;gap:8px;align-items:center
}
.item-row .remove{height:42px;border:1px solid #E1C6C3;background:#fff;color:var(--danger);border-radius:6px;font-size:20px}
.summary-box{margin-left:auto;margin-top:18px;width:min(390px,100%);background:#fff;border:1px solid var(--line);border-radius:8px;padding:15px}
.summary-line{display:flex;justify-content:space-between;gap:18px;padding:5px 0}
.summary-line.total{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-weight:900;font-size:19px}
.editor-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:24px}

.client-card{background:#fff;border:1px solid var(--line);border-radius:9px;padding:18px}
.client-card strong{display:block;margin-bottom:4px}
.client-card small{display:block;color:var(--muted);margin-top:3px}
.client-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}

.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.settings-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:21px}
.settings-card h3{font-size:16px;margin-bottom:14px}
.help{font-size:12px;line-height:1.5;color:var(--muted);margin-top:8px}
.setting-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
hr.soft{border:0;border-top:1px solid var(--line);margin:18px 0}

.toast{
  position:fixed;right:22px;bottom:22px;z-index:200;background:#23271F;color:#fff;padding:12px 16px;border-radius:8px;
  box-shadow:var(--shadow);max-width:380px;font-size:13px;opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s ease
}
.toast.show{opacity:1;transform:none}

.install-banner{
  background:linear-gradient(135deg,var(--pine-deep),var(--pine));color:#fff;border-radius:12px;padding:22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px
}
.install-banner p{margin:5px 0 0;color:#DED9CC;font-size:14px}
.install-banner .btn{white-space:nowrap}

@media(max-width:980px){
  #appShell{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;display:block;padding:16px}
  .brand{margin-bottom:13px}
  .nav{display:flex;overflow:auto;gap:5px}
  .nav button{white-space:nowrap}
  .side-actions{display:none}
  .sync-pill{display:none}
  .topbar{top:0;padding:18px 18px;min-height:88px}
  #page{padding:22px 18px 50px}
  .stats{grid-template-columns:1fr 1fr}
  .grid2,.settings-grid{grid-template-columns:1fr}
  .client-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
  .top-actions .outline,.top-actions .primary{display:none}
  .stats{grid-template-columns:1fr}
  .client-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .field.full{grid-column:auto}
  .item-row{grid-template-columns:1fr 70px 105px 42px}
  .toolbar{align-items:stretch;flex-direction:column}
  .toolbar-left,.toolbar-right{width:100%}
  .search{min-width:0;width:100%}
  .install-banner{align-items:flex-start;flex-direction:column}
}
@media print{
  .sidebar,.topbar,.toast{display:none!important}
  #appShell{display:block}
  #page{padding:0}
}


/* PROJECTS / EXPENSES / ACCOUNTING */
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.project-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px}
.project-card h3{font-size:17px;margin-bottom:6px}
.project-card .meta{font-size:12px;color:var(--muted);margin-bottom:12px}
.project-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
.project-metric{background:#F4F3ED;border-radius:7px;padding:11px}
.project-metric span{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.project-metric strong{display:block;margin-top:4px;font-size:16px}
.project-profit.positive{color:var(--success)}
.project-profit.negative{color:var(--danger)}

.report-controls{display:flex;gap:9px;flex-wrap:wrap;align-items:end;margin-bottom:18px}
.report-controls .field{min-width:180px}
.report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.report-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px}
.report-card .k{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:800}
.report-card .v{font-size:26px;font-weight:800;margin-top:7px}
.report-card .s{font-size:12px;color:var(--muted);margin-top:4px}
.report-section{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.report-section .title{padding:16px 18px;border-bottom:1px solid var(--line);font-weight:800}
.report-note{font-size:12px;color:var(--muted);line-height:1.55;margin-top:14px}
.category-bar{display:grid;grid-template-columns:180px 1fr 110px;gap:12px;align-items:center;padding:10px 18px;border-bottom:1px solid #ECEBE5}
.category-bar:last-child{border-bottom:0}
.bar-track{height:9px;border-radius:999px;background:#ECEAE1;overflow:hidden}
.bar-fill{height:100%;background:var(--pine);border-radius:999px}

.receipt-box{border:1px dashed #BBBBAF;border-radius:8px;background:#fff;padding:13px}
.receipt-preview{margin-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.receipt-thumb{width:74px;height:74px;object-fit:cover;border-radius:7px;border:1px solid var(--line)}
.file-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 9px;border-radius:999px;background:#EEECE3;font-size:11px;font-weight:700}
.accounting-badge{display:inline-block;padding:4px 7px;border-radius:999px;background:#EEECE3;color:#5D5E57;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.accounting-badge.operating-expense,.accounting-badge.project-expense{background:#E2EEE6;color:#2C6449}
.accounting-badge.asset-purchase{background:#E2E9F2;color:#315B7E}
.accounting-badge.director-shareholder-loan-or-drawings{background:#EEE4F1;color:#704878}
.accounting-badge.dividend{background:#F1E6EA;color:#7E4258}
.accounting-badge.tax-vat-paye{background:#F4E9D8;color:#7C5A25}
.accounting-badge.transfer{background:#E7E7E7;color:#585858}

@media(max-width:980px){
  .project-grid,.report-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
  .project-grid,.report-grid{grid-template-columns:1fr}
  .category-bar{grid-template-columns:1fr}
}


/* ---------------- PHONE / TABLET OPTIMISATION ---------------- */
.mobile-menu-btn{display:none}
.mobile-nav-backdrop{display:none}

@media(max-width:980px){
  html,body{overflow-x:hidden}
  #appShell{display:block;min-height:100vh}

  .sidebar{
    position:fixed;
    top:0;left:0;bottom:0;
    width:min(310px,86vw);
    height:100dvh;
    z-index:120;
    display:flex;
    padding:22px 18px;
    transform:translateX(-102%);
    transition:transform .22s ease;
    box-shadow:16px 0 50px rgba(0,0,0,.25);
    overflow-y:auto
  }
  body.mobile-nav-open .sidebar{transform:translateX(0)}
  .mobile-nav-backdrop{
    position:fixed;inset:0;
    z-index:110;
    background:rgba(14,18,15,.48);
    backdrop-filter:blur(2px);
  }
  body.mobile-nav-open .mobile-nav-backdrop{display:block}

  .sidebar .brand{margin-bottom:8px}
  .nav{display:grid;gap:6px;overflow:visible}
  .nav button{font-size:15px;padding:13px 14px;white-space:normal}
  .side-actions{display:grid;margin-top:8px}
  .sync-pill{display:flex}

  .topbar{
    min-height:72px;
    padding:12px 14px;
    top:0;
    gap:10px;
    justify-content:flex-start
  }
  .mobile-menu-btn{
    display:inline-grid;
    place-items:center;
    flex:0 0 42px;
    width:42px;height:42px;
    border:1px solid #D7D6CF;
    border-radius:8px;
    background:#fff;
    color:var(--pine-deep);
    font-size:22px;
    font-weight:800
  }
  .topbar-title{min-width:0;flex:1}
  .topbar h1{font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .eyebrow{font-size:9px}
  .top-actions{margin-left:auto}
  .top-actions .btn{display:none!important}
  .icon-btn{width:40px;height:40px;min-height:40px}

  #page{
    padding:16px 14px 40px;
    width:100%;
    overflow:hidden
  }

  .install-banner{padding:17px;border-radius:10px}
  .install-banner strong{font-size:16px}
  .install-banner p{font-size:13px}

  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .stat{padding:16px;border-radius:9px}
  .stat strong{font-size:22px}
  .grid2,.settings-grid{grid-template-columns:1fr;gap:12px;margin-top:12px}

  .toolbar{
    align-items:stretch;
    flex-direction:column;
    gap:10px
  }
  .toolbar-left,.toolbar-right{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:8px
  }
  .search,.filter{width:100%;min-width:0;min-height:44px}
  .toolbar .btn{width:100%;min-height:44px}

  .panel{border-radius:9px}
  .panel-head{padding:15px 16px}
  .panel-body{padding:15px 16px}
  .table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch
  }
  table{min-width:720px}
  th,td{padding:12px 10px}

  .client-grid,.project-grid,.report-grid{grid-template-columns:1fr;gap:10px}
  .client-card,.project-card,.report-card{padding:15px}
  .project-metrics{grid-template-columns:1fr 1fr}

  .report-controls{
    display:grid;
    grid-template-columns:1fr;
    align-items:stretch
  }
  .report-controls .field{min-width:0}
  .report-controls .btn{width:100%}
  .category-bar{grid-template-columns:1fr;gap:7px;padding:12px 14px}

  .modal-panel{
    width:100vw;
    max-width:none;
    height:100dvh;
    border-radius:0
  }
  .modal-head{
    padding:15px 16px;
    min-height:68px
  }
  .modal-head h2{font-size:21px}
  .close-btn{font-size:28px}
  .form-wrap{padding:16px 14px 92px}
  .form-grid{grid-template-columns:1fr;gap:12px}
  .field.full{grid-column:auto}
  input,select,textarea{font-size:16px;min-height:44px}
  textarea{min-height:88px}

  .item-row{
    grid-template-columns:1fr 1fr 44px;
    grid-template-areas:
      "desc desc desc"
      "qty price remove";
    gap:7px;
    padding:10px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:8px
  }
  .item-row .it-desc{grid-area:desc}
  .item-row .it-qty{grid-area:qty}
  .item-row .it-price{grid-area:price}
  .item-row .remove{grid-area:remove;height:44px}
  .summary-box{width:100%;margin-top:14px}

  .editor-actions{
    position:sticky;
    bottom:0;
    z-index:4;
    margin:22px -14px -92px;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom));
    background:rgba(248,247,242,.96);
    backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    justify-content:stretch
  }
  .editor-actions .btn{
    flex:1 1 calc(50% - 8px);
    min-height:45px
  }

  .row-actions{flex-wrap:wrap}
  .mini{min-height:38px;padding:8px 10px}
  .receipt-thumb{width:86px;height:86px}
  .settings-card{padding:16px}
}

@media(max-width:560px){
  .stats{grid-template-columns:1fr}
  .project-metrics{grid-template-columns:1fr 1fr}
  .topbar{padding-left:10px;padding-right:10px}
  .topbar h1{font-size:20px}
  #page{padding-left:10px;padding-right:10px}
  .stat{padding:15px}
  .panel,.client-card,.project-card,.settings-card,.report-card{border-radius:8px}
  .editor-actions .btn{flex-basis:100%}
  .summary-line.total{font-size:17px}
}

@media(hover:none) and (pointer:coarse){
  button,.btn,.mini,.nav button{touch-action:manipulation}
}


/* ---------------- v4 MOBILE APP SHELL ---------------- */
.build-version{
  display:inline-block;
  margin-top:5px;
  color:#AFA793;
  font-size:9px;
  letter-spacing:.14em
}
.mobile-bottom-nav{display:none}

@media(max-width:980px){
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  #page{padding-bottom:90px}

  .mobile-bottom-nav{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:105;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    min-height:calc(64px + env(safe-area-inset-bottom));
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);
    border-top:1px solid #D8D7CF;
    box-shadow:0 -10px 30px rgba(25,32,24,.09);
    backdrop-filter:blur(16px)
  }
  .mobile-bottom-nav button{
    border:0;
    background:transparent;
    color:#73776F;
    border-radius:10px;
    min-width:0;
    padding:5px 3px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:2px;
    font-weight:700
  }
  .mobile-bottom-nav button span{font-size:20px;line-height:1}
  .mobile-bottom-nav button small{font-size:9px;line-height:1.1;white-space:nowrap}
  .mobile-bottom-nav button.active{
    color:var(--pine-deep);
    background:rgba(201,181,152,.20)
  }

  .topbar{
    background:rgba(247,245,239,.97);
    box-shadow:0 4px 20px rgba(25,32,24,.05)
  }

  .stats{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:4px;
    scrollbar-width:none
  }
  .stats::-webkit-scrollbar{display:none}
  .stat{
    flex:0 0 min(78vw,280px);
    scroll-snap-align:start
  }

  .project-card,.client-card,.report-card,.settings-card,.panel{
    box-shadow:0 5px 18px rgba(25,32,24,.04)
  }
}

@media(max-width:560px){
  .topbar .eyebrow{display:none}
  .topbar h1{margin:0;font-size:19px}
  .topbar{min-height:62px}
  .mobile-menu-btn,.icon-btn{width:38px;height:38px;min-height:38px}
  .stat{flex-basis:82vw;min-height:115px}
}


/* ---------------- v5 QUOTE / INVOICE COSTING ---------------- */
.item-headings{
  display:grid;
  grid-template-columns:minmax(180px,1fr) 76px 112px 92px 120px 50px;
  gap:8px;
  padding:0 2px 7px;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase
}
.item-row{
  grid-template-columns:minmax(180px,1fr) 76px 112px 92px 120px 50px
}
.internal-costing-note{
  margin:12px 0 0;
  padding:11px 12px;
  border-radius:7px;
  background:#EEF2EA;
  color:#42513F;
  font-size:12px;
  line-height:1.45
}
.internal-summary{
  margin-top:12px;
  border-top:1px dashed #C8C8BE;
  padding-top:10px
}
.internal-summary .summary-line{color:#4E554A}
.internal-summary .summary-line.profit strong{color:var(--success)}
.internal-summary .summary-line.loss strong{color:var(--danger)}
.doc-link-note{
  padding:10px 12px;
  border-radius:7px;
  background:#F2EEE4;
  font-size:12px;
  margin-bottom:14px
}
.project-expense-list{margin-top:12px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.project-expense-row{display:grid;grid-template-columns:95px 1fr 120px 80px;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid #ECEBE5;font-size:12px}
.project-expense-row:last-child{border-bottom:0}
.project-receipt-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.revision-pill{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;background:#EEECE3;color:#616159;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}

@media(max-width:980px){
  .item-headings{display:none}
  .item-row{
    grid-template-columns:1fr 1fr 1fr 44px;
    grid-template-areas:
      "desc desc desc desc"
      "qty cost markup remove"
      "sell sell sell sell"
  }
  .item-row .it-desc{grid-area:desc}
  .item-row .it-qty{grid-area:qty}
  .item-row .it-cost{grid-area:cost}
  .item-row .it-markup{grid-area:markup}
  .item-row .it-price{grid-area:sell}
  .item-row .remove{grid-area:remove}
  .item-row input::placeholder{font-size:12px}
  .project-expense-row{grid-template-columns:1fr 100px;gap:5px 10px}
  .project-expense-row .project-expense-desc{grid-column:1/-1}
}


/* ---------------- v6 SYNC STATUS ---------------- */
.sync-diagnostics{
  margin-top:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#F7F5EF;
  font-size:12px;
  line-height:1.55
}
.sync-diagnostics strong{color:var(--pine-deep)}
.sync-diagnostics .sync-ok{color:var(--success);font-weight:800}
.sync-diagnostics .sync-pending{color:#8A641F;font-weight:800}
.sync-diagnostics .sync-error{color:var(--danger);font-weight:800}


/* ---------------- v7 PROFIT / DELIVERY / ARCHIVE ---------------- */
.item-cost-cell{
  display:grid;
  gap:5px;
  min-width:0
}
.item-cost-cell .it-cost{width:100%}
.zero-cost-toggle{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:9px;
  line-height:1.15;
  color:#566052;
  font-weight:800;
  cursor:pointer;
  user-select:none
}
.zero-cost-toggle input{
  width:15px!important;
  height:15px!important;
  min-height:15px!important;
  margin:0;
  padding:0
}
.item-row.zero-cost-profit .item-cost-cell{
  padding:5px;
  border-radius:7px;
  background:#EEF2EA
}
.item-row.zero-cost-profit .it-markup{
  background:#F2F1EC;
  color:#777;
  opacity:.72
}
.profit-help{
  margin-top:8px;
  font-size:11px;
  line-height:1.45;
  color:var(--muted)
}
.send-centre{
  margin-top:16px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#FBFAF6
}
.send-centre-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:10px
}
.send-centre-head strong{font-size:13px;color:var(--pine-deep)}
.send-centre-head small{display:block;margin-top:3px;color:var(--muted);line-height:1.4}
.send-centre-actions{display:flex;gap:8px;flex-wrap:wrap}
.sent-history{
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:#fff
}
.sent-history-row{
  display:grid;
  grid-template-columns:150px 130px 1fr 110px;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-bottom:1px solid #ECEBE5;
  font-size:11px
}
.sent-history-row:last-child{border-bottom:0}
.archive-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px
}
.archive-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:9px;
  padding:14px
}
.archive-card span{
  display:block;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:9px;
  font-weight:800
}
.archive-card strong{
  display:block;
  margin-top:7px;
  font-size:20px;
  color:var(--pine-deep)
}
.internal-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 7px;
  border-radius:999px;
  background:#EEF2EA;
  color:#42513F;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em
}
.channel-badge{
  display:inline-flex;
  margin:2px 3px 2px 0;
  padding:3px 6px;
  border-radius:999px;
  background:#EEECE3;
  color:#5B5C54;
  font-size:9px;
  font-weight:800
}
.dashboard-profit.positive{color:var(--success)}
.dashboard-profit.negative{color:var(--danger)}

@media(max-width:980px){
  .item-row .item-cost-cell{grid-area:cost}
  .archive-summary{grid-template-columns:1fr 1fr}
  .sent-history-row{grid-template-columns:1fr 1fr}
  .sent-history-row > :nth-child(3){grid-column:1/-1}
  .send-centre-actions .btn{flex:1 1 calc(50% - 8px)}
}
@media(max-width:560px){
  .archive-summary{grid-template-columns:1fr}
  .send-centre-actions .btn{flex-basis:100%}
}


/* ---------------- v7.1 SYNC RELIABILITY ---------------- */
.sync-diagnostics{
  overflow-wrap:anywhere
}
.sync-diagnostics > div{
  padding:3px 0
}


/* ---------------- v7.2 MOBILE EDITOR SAVE FIX ---------------- */
/*
  The fixed phone bottom navigation previously had z-index 105 while the editor
  modal had z-index 100. It therefore sat on top of Save/Cancel actions.
  When an editor is open, the bottom nav is now removed and the editor owns the
  full phone viewport.
*/
.modal.open{z-index:300}

@media(max-width:980px){
  body.editor-open{
    padding-bottom:0!important;
    overflow:hidden
  }

  body.editor-open .mobile-bottom-nav{
    display:none!important
  }

  body.editor-open .modal{
    z-index:300
  }

  body.editor-open .modal-panel{
    height:100dvh;
    min-height:100dvh;
    max-height:100dvh;
    bottom:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch
  }

  body.editor-open .form-wrap{
    padding-bottom:calc(26px + env(safe-area-inset-bottom))!important
  }

  body.editor-open .editor-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:40!important;
    margin:22px -14px 0!important;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom))!important;
    background:rgba(248,247,242,.985)!important;
    border-top:1px solid var(--line);
    box-shadow:0 -10px 24px rgba(25,32,24,.10);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px)
  }

  body.editor-open .editor-actions .btn{
    position:relative;
    z-index:41;
    min-height:48px
  }

  /* Toasts must also stay above the editor footer on phones. */
  body.editor-open .toast{
    bottom:calc(82px + env(safe-area-inset-bottom));
    z-index:400
  }
}

@media(max-width:560px){
  body.editor-open .editor-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important
  }
  body.editor-open .editor-actions .btn{
    width:100%!important;
    flex:none!important
  }
}


/* ---------------- v7.3 PROJECT / QUOTE LINKING ---------------- */
.project-metric small,.report-card .s{display:block;margin-top:4px;color:var(--muted);font-size:10px;line-height:1.35}
.project-financial-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.project-tabs{display:flex;gap:7px;overflow-x:auto;padding-bottom:8px;border-bottom:1px solid var(--line);scrollbar-width:none}
.project-tabs::-webkit-scrollbar{display:none}
.project-tab{border:1px solid var(--line);background:#fff;color:#5A5F56;border-radius:999px;padding:9px 13px;font-weight:800;white-space:nowrap;cursor:pointer}
.project-tab span{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:5px;padding:0 5px;border-radius:999px;background:#EEECE3;font-size:9px}
.project-tab.active{background:var(--pine-deep);color:#fff;border-color:var(--pine-deep)}
.project-tab.active span{background:rgba(255,255,255,.16);color:#fff}
.project-tab-panel{display:none;padding-top:14px}
.project-tab-panel.active{display:block}
.project-tab-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:11px}
.project-tab-heading strong{display:block;color:var(--pine-deep)}
.project-tab-heading small{display:block;margin-top:3px;color:var(--muted);line-height:1.4}
.project-doc-list{display:grid;gap:8px}
.project-doc-row{display:grid;grid-template-columns:minmax(140px,1.25fr) repeat(3,minmax(110px,.8fr)) auto;gap:10px;align-items:center;padding:12px;background:#fff;border:1px solid var(--line);border-radius:8px}
.project-doc-row > div > span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.project-doc-row small{display:block;margin-top:3px;color:var(--muted);font-size:10px}
.project-link-btn{border:0;background:transparent;color:var(--pine-deep);padding:0;text-align:left;font:inherit;font-weight:800;text-decoration:underline;text-decoration-color:#C9B598;text-underline-offset:3px;cursor:pointer}
.positive{color:var(--success)}
.negative{color:var(--danger)}
@media(max-width:1100px){.project-financial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-doc-row{grid-template-columns:1fr 1fr}.project-doc-row .row-actions{grid-column:1/-1}}
@media(max-width:560px){.project-financial-grid{grid-template-columns:1fr}.project-tab-heading{flex-direction:column}.project-tab-heading .mini{width:100%}.project-doc-row{grid-template-columns:1fr;gap:7px}.project-doc-row .row-actions{grid-column:auto}}


/* ---------------- v7.4 MOBILE COST ENTRY ---------------- */
.item-field{min-width:0}
.mobile-item-label{display:none}
.item-field input{width:100%}

@media(max-width:980px){
  .item-row{
    grid-template-columns:1fr 1fr 48px!important;
    grid-template-areas:
      "desc desc desc"
      "qty markup remove"
      "cost cost cost"
      "sell sell sell"!important;
    gap:10px!important
  }
  .item-row .item-desc-field{grid-area:desc}
  .item-row .item-qty-field{grid-area:qty}
  .item-row .item-cost-cell{grid-area:cost}
  .item-row .item-markup-field{grid-area:markup}
  .item-row .item-price-field{grid-area:sell}
  .item-row .remove{grid-area:remove}
  .mobile-item-label{
    display:block;
    margin:0 0 5px;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:#686C64
  }
  .item-row .it-cost{
    min-height:54px;
    padding:14px 14px;
    font-size:18px;
    font-weight:800;
    border-width:2px;
    border-color:#BDB6A7;
    background:#FFFDF8
  }
  .item-row .it-price{
    min-height:50px;
    font-size:17px;
    font-weight:700
  }
  .item-row input[type="number"]{font-size:16px}
  .item-cost-cell{
    padding:10px!important;
    border:1px solid #D7D0C0;
    border-radius:9px;
    background:#F7F3E9
  }
  .item-row.zero-cost-profit .item-cost-cell{background:#EEF2EA}
}

@media(max-width:650px){
  .item-row{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "desc"
      "qty"
      "cost"
      "markup"
      "sell"
      "remove"!important;
    padding:12px!important
  }
  .item-row .remove{
    width:100%;
    height:44px!important;
    font-size:18px
  }
  .item-row .it-cost{
    min-height:58px;
    font-size:20px
  }
}

/* ---------------- v7.4 SLA RECURRING BILLING ---------------- */
.sla-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.sla-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:17px;box-shadow:0 5px 18px rgba(25,32,24,.04)}
.sla-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.sla-card-head h3{margin:7px 0 3px;color:var(--pine-deep)}
.sla-card-head small{color:var(--muted)}
.sla-date{text-align:right}
.sla-date span,.sla-metrics span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.07em;font-weight:800}
.sla-date strong{display:block;margin-top:4px}
.sla-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0}
.sla-metrics>div{padding:10px;background:#F8F7F2;border-radius:8px}
.sla-metrics strong{display:block;margin-top:5px;font-size:13px}
.sla-metrics small{display:block;margin-top:3px;color:var(--muted);font-size:9px;line-height:1.3}
.primary-mini{background:var(--pine-deep)!important;color:#fff!important;border-color:var(--pine-deep)!important}
.primary-mini:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:1100px){.sla-grid{grid-template-columns:1fr}.sla-metrics{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sla-card-head{flex-direction:column}.sla-date{text-align:left}.sla-metrics{grid-template-columns:1fr}.sla-card .row-actions .mini{flex:1 1 100%}}

/* ---------------- v7.5 QUOTE/PDF WORKFLOW ---------------- */
.status.issuing{background:#F4EBDD;color:#7B5A24}
.item-markup-field select.it-pricing-mode{
  width:100%;
  min-height:34px;
  margin-bottom:6px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  color:var(--text);
  font:inherit
}
.item-row.sell-driven .it-price{border-color:#AFA48E;background:#FFFDF8}
.item-row.sell-driven .it-markup{background:#F0EFEA;color:#68685F}
.saved-pdf-panel{margin-top:16px}
.saved-pdf-panel + .saved-pdf-panel{margin-top:16px}
#undoDocBtn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:650px){
  .item-markup-field select.it-pricing-mode{min-height:46px;font-size:16px}
}

/* ---------------- v7.6 ITEM TITLES & OPTIONAL DESCRIPTIONS ---------------- */
.item-desc-field{display:grid;gap:6px}
.item-desc-field .it-desc{font-weight:800}
.item-desc-field .it-details{
  width:100%;
  min-height:48px;
  padding:9px 11px;
  resize:vertical;
  color:#5F625B;
  font-size:12px;
  font-family:inherit;
  line-height:1.4;
  background:#FBFAF6
}
.item-desc-field .it-details::placeholder{color:#96978F}
@media(max-width:980px){
  .item-desc-field .it-details{min-height:62px;font-size:16px}
}


/* ---------------- v8.0 NUMBERED PDF / DIRECT MAIL APP ---------------- */
.item-markup-field .pricing-link-hint{display:block;margin-top:5px;color:var(--muted);font-size:9px;line-height:1.3}
.item-row.sell-driven .it-price,.item-row.markup-driven .it-markup{border-color:#AFA48E;background:#FFFDF8}
.item-row.sell-driven .it-markup{background:#fff;color:var(--text)}
.project-profit-card .v.positive,.project-profit-summary-row.positive strong{color:var(--success)}
.project-profit-card .v.negative,.project-profit-summary-row.negative strong{color:var(--danger)}
.project-profit-section{border:1px solid #D8D5C9;border-radius:10px;padding:16px;background:#FCFBF7}
.project-profit-summary{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.project-profit-summary-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 14px;border-bottom:1px solid #ECEBE5}
.project-profit-summary-row:last-child{border-bottom:0}
.project-profit-summary-row span{font-weight:800;color:var(--pine-deep)}
.project-profit-expenses{border-bottom:1px solid #ECEBE5;background:#FAF9F5}
.project-profit-expense-row{display:grid;grid-template-columns:minmax(0,1fr) 130px auto;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid #ECEBE5}
.project-profit-expense-row:last-child{border-bottom:0}
.project-profit-expense-row span{min-width:0}
.project-profit-expense-row span strong,.project-profit-expense-row span small{display:block}
.project-profit-expense-row span small{margin-top:3px;color:var(--muted)}
.project-profit-summary-row.expense-total{background:#F7F4ED}
.project-profit-summary-row.profit-total{font-size:16px;background:#F0EFE8}
@media(max-width:650px){
  .item-markup-field .pricing-link-hint{font-size:11px}
  .project-profit-section{padding:12px}
  .project-profit-expense-row{grid-template-columns:1fr auto}
  .project-profit-expense-row .mini{grid-column:1/-1;width:100%}
}

/* v8.1 Finance + Receipt Inbox */
.finance-intro{display:flex;gap:24px;align-items:center;justify-content:space-between;margin-bottom:16px;padding:22px}.finance-intro h3{margin:3px 0 8px;font-size:20px}.finance-intro p{margin:0;max-width:760px}.finance-scan-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.finance-stats{margin-bottom:14px}.expense-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}.expense-tab{border:1px solid var(--border,#dcd9cf);background:#fff;border-radius:999px;padding:9px 13px;font-weight:700;color:inherit;cursor:pointer}.expense-tab.active{background:#2E332A;color:#fff;border-color:#2E332A}.scope-badge,.ai-badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800;white-space:nowrap}.scope-badge.general{background:#f0f1ec;color:#30352c}.scope-badge.project{background:#eef2f5;color:#2c3f4a}.scope-badge.shared{background:#f7f1df;color:#65531d}.ai-badge{background:#edf5ed;color:#28502b}.expense-status-strip{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.shared-allocation-box{border:1px solid #ddd9ca;border-radius:12px;padding:14px;background:#faf9f5}.shared-project-list{display:grid;gap:7px;margin-top:12px}.shared-project-row{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #ebe8dd;padding-top:8px}.shared-project-row:first-child{border-top:0}.shared-project-row small{opacity:.65;margin-left:5px}.shared-percent{display:flex;align-items:center;gap:5px;white-space:nowrap}.shared-percent input{width:88px}.shared-percent.muted{opacity:.45}.allocation-preview{margin-top:12px;border-radius:9px;padding:10px;background:#f0f1ec;font-size:12px;font-weight:700}.ai-receipt-status{margin-top:10px;padding:10px 12px;border-radius:9px;background:#f4f3ed;font-size:12px;line-height:1.45}.ai-receipt-status.working{background:#eef2f5}.ai-receipt-status.success{background:#edf5ed}.ai-receipt-status.warning{background:#fff3e7}.duplicate-warning{margin-top:8px;padding:10px 12px;border-radius:9px;background:#fff0ee;font-size:12px;font-weight:700}.status.draft{background:#f7f1df;color:#65531d}.status.needs-review{background:#fff0ee;color:#7d2e25}.expense-project-field{display:none}
@media(max-width:900px){.finance-intro{align-items:flex-start;flex-direction:column}.finance-scan-actions{justify-content:flex-start;width:100%}.finance-scan-actions .btn{flex:1 1 210px}.shared-project-row{align-items:flex-start;flex-direction:column}.shared-percent{width:100%;justify-content:flex-end}}