:root{
  --bg:#1A1614; --surface:#241F1C; --surface2:#2C2622; --line:#3A322D;
  --text:#EDE8E2; --muted:#A89B90; --clay:#C56B4A; --clay-soft:#D98A6C;
  --ok:#7BA05B; --danger:#C4554D; --radius:10px;
  color-scheme:dark;
}
/* Light "warm paper" theme — same clay identity on the invoice-paper palette */
[data-theme="light"]{
  --bg:#F2EDE7; --surface:#FCFAF7; --surface2:#F1EAE2; --line:#DFD5CA;
  --text:#2B241E; --muted:#877A6E; --clay:#B85C3C; --clay-soft:#A04E31;
  --ok:#5F8A3F; --danger:#B04A42;
  color-scheme:light;
}
[data-theme="light"] .pill.ok{color:#4F7A33}
[data-theme="light"] .pill.warn{color:#8F6410}
[data-theme="light"] .btn.danger{color:#B04A42}
[data-theme="light"] .stat .v.neg{color:#8F6410}
[data-theme="light"] .toast{box-shadow:0 4px 18px rgba(43,36,30,.18)}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Bricolage Grotesque",sans-serif; margin:0; line-height:1.1}
a{color:var(--clay-soft)}
button{font-family:inherit}

/* Layout: left sidebar + content */
#app{display:flex; min-height:100vh; align-items:stretch}
.brand{display:flex; align-items:baseline; gap:10px}
.brand h1{font-size:22px; font-weight:800; letter-spacing:-0.02em}
.brand .dot{color:var(--clay)}
.brand span.sub{color:var(--muted); font-size:11px; letter-spacing:0.14em; text-transform:uppercase}

.sidebar{
  width:216px; flex:none; background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:22px; padding:22px 14px 18px;
  position:sticky; top:0; height:100vh; z-index:30;
}
.side-brand{padding:0 8px; flex-direction:column; gap:2px; align-items:flex-start}
#main-nav{display:flex; flex-direction:column; gap:3px}
#main-nav button{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:none; border:none; color:var(--muted); padding:10px 12px; border-radius:8px;
  cursor:pointer; font-size:14px; font-weight:600; font-family:inherit;
}
#main-nav button svg{width:18px; height:18px; flex:none}
#main-nav button:hover{background:var(--surface2); color:var(--text)}
#main-nav button.active{background:var(--clay); color:#fff}
.side-foot{margin-top:auto; padding:0 8px}
.side-presence{display:flex; flex-direction:column; gap:5px; margin-bottom:10px; padding:0 4px;
  font-size:11.5px; color:var(--muted)}
.presence-item{display:flex; align-items:center; gap:7px}
.presence-dot{width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none}
.presence-dot.away{background:#D9A125}
[data-theme="light"] .presence-dot.away{background:#B27E0E}
.side-user{display:flex; align-items:center; gap:8px; padding:9px 10px; background:var(--bg);
  border:1px solid var(--line); border-radius:10px; margin-bottom:10px}
.side-user-info{min-width:0; flex:1}
.side-user-email{font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.side-user-role{font-size:10.5px; color:var(--muted)}
.icon-btn{background:none; border:none; color:var(--muted); cursor:pointer; padding:6px;
  border-radius:6px; display:flex; flex:none}
.icon-btn:hover{background:var(--surface2); color:var(--danger)}
.icon-btn svg{width:16px; height:16px}
.side-foot-row{display:flex; align-items:center; justify-content:space-between; gap:8px}
.build-tag{color:var(--muted); font-size:10.5px; letter-spacing:.02em}

.mobile-topbar{
  display:none; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:30;
}

main{flex:1; min-width:0; max-width:1100px; margin:0 auto; padding:26px 26px 80px}
.view{display:none}
.view.active{display:block}

.row{display:flex; gap:16px; flex-wrap:wrap}
.col{flex:1; min-width:220px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:18px}
.card h2{font-size:16px; font-weight:700; margin-bottom:4px}
.card .hint,.hint{color:var(--muted); font-size:13px; margin-bottom:16px}
.section-title{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; gap:12px; flex-wrap:wrap}
.section-title h2{font-size:19px}
.btn-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.btn-row span{display:flex; gap:8px}

label{display:block; font-size:12px; color:var(--muted); font-weight:600; margin-bottom:5px; letter-spacing:0.02em}
input,select,textarea{
  width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text);
  padding:9px 11px; border-radius:8px; font-family:inherit; font-size:14px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--clay); outline-offset:-1px; border-color:var(--clay)}
input:disabled,select:disabled,textarea:disabled{opacity:.55; cursor:not-allowed}
textarea{resize:vertical; min-height:64px}
.field{margin-bottom:14px}
input[type="file"]{padding:7px}

.btn{
  background:var(--clay); color:#fff; border:none; padding:10px 18px; border-radius:8px;
  font-weight:700; font-size:14px; cursor:pointer;
}
.btn:hover{background:var(--clay-soft)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--text)}
.btn.ghost:hover{border-color:var(--clay); color:var(--clay-soft)}
.btn.sm{padding:6px 12px; font-size:13px}
.btn.danger{background:transparent; border:1px solid var(--danger); color:#e08b85}
.btn.danger:hover{background:var(--danger); color:#fff}

table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:left; font-weight:600; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:0.03em; padding:8px 10px; border-bottom:1px solid var(--line)}
td{padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
td.num,th.num{text-align:right}
.items-table input,.items-table select{padding:7px 8px; font-size:13px}
#purchases-list input{padding:6px 8px; font-size:13px}
#purchases-list{overflow-x:auto}

.totals{margin-left:auto; max-width:340px; margin-top:16px}
.totals .line{display:flex; justify-content:space-between; padding:6px 0; font-size:14px}
.totals .line.grand{border-top:2px solid var(--line); margin-top:6px; padding-top:12px; font-size:18px; font-weight:700}
.totals .muted{color:var(--muted)}
.pill{display:inline-block; background:var(--surface2); border:1px solid var(--line); color:var(--clay-soft); padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600}
.pill.ok{color:#a6c48a}
.pill.warn{color:#e0b25f}
.pill.draft{color:var(--muted)}

.empty{text-align:center; color:var(--muted); padding:40px 20px}
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--ok); color:#fff; padding:12px 22px; border-radius:10px; font-weight:600; opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; z-index:60; max-width:90vw}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px)}
.toast.err{background:var(--danger)}

.banner{background:var(--surface2); border:1px solid var(--clay); color:var(--clay-soft); border-radius:var(--radius); padding:12px 16px; margin-bottom:16px; font-size:14px}
.banner a{color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px}

.filter-row{display:flex; gap:8px; flex-wrap:wrap}
.chip{background:var(--bg); border:1px solid var(--line); color:var(--muted); padding:6px 14px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer}
.chip.active{background:var(--clay); border-color:var(--clay); color:#fff}

/* Editor: meta strip, extras chips, add-row, catalogue menu, bottom actions */
.meta-grid{display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr; gap:14px}
.meta-grid input{font-weight:600}
.extras{display:flex; gap:9px; flex-wrap:wrap; margin:0 0 14px}
.extra{border:1.5px dashed var(--line); border-radius:999px; padding:7px 15px; font-size:12.5px;
  font-weight:600; color:var(--muted); background:transparent; cursor:pointer; font-family:inherit}
.extra:hover{border-color:var(--clay); color:var(--clay-soft)}
.extra.open{border-style:solid; color:var(--clay-soft); border-color:var(--clay)}
.extra:disabled{opacity:.5; cursor:not-allowed}
.addrow{display:flex; gap:10px; padding-top:12px}
.addbtn{border:1.5px dashed var(--line); border-radius:8px; padding:10px; text-align:center;
  font-weight:700; font-size:13px; color:var(--clay-soft); background:transparent; cursor:pointer; font-family:inherit}
.addbtn:hover{border-color:var(--clay); background:var(--surface2)}
.addbtn.primary{border-color:var(--clay)}
.cat-menu{position:absolute; left:0; top:calc(100% + 6px); min-width:240px; max-height:280px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:6px;
  box-shadow:0 10px 30px rgba(20,15,10,.35); z-index:30}
.cat-item{display:flex; justify-content:space-between; gap:14px; padding:7px 11px; border-radius:6px;
  font-size:13px; cursor:pointer}
.cat-item:hover{background:var(--surface2)}
.cat-item span{color:var(--muted); font-size:12px}
.editor-actions{display:flex; gap:9px; justify-content:flex-end; margin-top:14px}
@media (max-width:760px){ .meta-grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .meta-grid{grid-template-columns:1fr} .addrow{flex-direction:column} }

/* Auth */
.auth-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px}
.auth-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:34px 30px; width:100%; max-width:400px}

/* Modal */
.modal-bg{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:flex-start; justify-content:center; z-index:50; padding:30px 16px; overflow:auto}
.modal-bg.show{display:flex}
.modal{background:var(--surface); border:1px solid var(--line); border-radius:12px; max-width:640px; width:100%}
.modal-head{display:flex; gap:10px; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line)}

/* Report */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:18px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.stat .k{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px}
.stat .v{font-family:"Bricolage Grotesque"; font-size:22px; font-weight:700}
.stat .v.neg{color:#e0b25f}
.stat .sub{color:var(--muted); font-size:12px; margin-top:4px}
.disclaimer{border:1px dashed var(--line); border-radius:8px; padding:12px 16px; color:var(--muted); font-size:12.5px; margin-top:6px}

@media (max-width:760px){
  /* sidebar becomes a bottom tab bar; slim brand bar on top */
  #app{flex-direction:column}
  .mobile-topbar{display:flex}
  .sidebar{
    position:fixed; top:auto; bottom:0; left:0; right:0; width:auto; height:auto;
    flex-direction:row; align-items:center; gap:0;
    padding:4px 6px calc(4px + env(safe-area-inset-bottom));
    border-right:none; border-top:1px solid var(--line);
  }
  .side-brand,.side-foot{display:none}
  #main-nav{flex-direction:row; flex:1; gap:0}
  #main-nav button{flex:1 1 0; flex-direction:column; gap:3px; padding:7px 2px; font-size:10px}
  #main-nav button svg{width:20px; height:20px}
  main{padding:16px 14px 100px}
}
@media (max-width:640px){
  .items-table{display:block; overflow-x:auto}
  .items-table table{min-width:680px}
  /* every data table scrolls inside its own container instead of the page */
  #doc-list,#purchases-list,#customers-list,#products-list,#payments-list,#report-body .card{overflow-x:auto}
  #doc-list table,#purchases-list table,#customers-list table,#report-body table{min-width:640px}
  #customers-list table{min-width:760px}
}

@media print{
  body{background:#fff; color:#000}
  .sidebar,.mobile-topbar,.section-title .btn-row,.filter-row,.card:has(#r-fy),.toast{display:none !important}
  .card,.stat{border-color:#ccc; background:#fff; color:#000}
  .stat .v{color:#000}
  th{color:#333}
  td{border-color:#ddd}
  .hint{color:#555}
  main{max-width:100%; padding:0}
}

/* ---------- v-next: clickable row numbers + dashboard ---------- */
.muted{color:var(--muted)}
.rowlink{text-decoration:none}
.rowlink:hover{text-decoration:underline}
.dash-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px}
@media (max-width:1000px){ .dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .dash-grid{grid-template-columns:1fr} }
.dash-grid .card{margin:0; padding:16px 18px}
.dash-label{color:var(--muted); font-size:12.5px; letter-spacing:.3px; text-transform:uppercase}
.dash-num{font-size:22px; font-weight:700; margin-top:4px}
.dash-sub{color:var(--muted); font-size:12px; margin-top:2px}
@media (max-width:640px){ #dash-overdue,#dash-recent{overflow-x:auto} #dash-overdue table,#dash-recent table{min-width:560px} }

/* activity log page + link under the version tag */
.side-activity{display:block; font-size:12px; color:var(--muted); margin-top:4px; text-decoration:none}
.side-activity:hover{color:var(--clay-soft)}
.daterow td{background:var(--surface2); color:var(--muted); font-size:11.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:8px 10px}
@media (max-width:640px){ #activity-list{overflow-x:auto} #activity-list table{min-width:520px} }

.dash-span2{grid-column:span 2}
@media (max-width:480px){ .dash-span2{grid-column:auto} }

/* ---- "update ready" banner -------------------------------------------- */
/* The app is a single page: js/*.js are fetched once per page load and then
   live in memory, so an open tab keeps running the build it started with
   however many deploys land. app.js polls the build stamp and raises this. */
.update-banner{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(200%);
  display:flex; align-items:center; gap:10px; z-index:70;
  background:var(--surface2); border:1px solid var(--line); color:var(--text);
  padding:10px 12px 10px 14px; border-radius:12px; font-size:13px;
  box-shadow:0 10px 30px rgba(0,0,0,.30);
  max-width:calc(100vw - 28px); transition:transform .28s ease;
}
.update-banner.show{transform:translateX(-50%) translateY(0)}
.update-banner b{font-weight:700; margin-left:4px}
.update-banner .btn{flex:0 0 auto}
.update-dot{
  width:8px; height:8px; border-radius:50%; background:var(--clay); flex:0 0 auto;
  box-shadow:0 0 0 0 var(--clay); animation:update-pulse 2.4s ease-out infinite;
}
@keyframes update-pulse{
  0%{box-shadow:0 0 0 0 rgba(197,107,74,.55)}
  70%{box-shadow:0 0 0 7px rgba(197,107,74,0)}
  100%{box-shadow:0 0 0 0 rgba(197,107,74,0)}
}
[data-theme="light"] .update-banner{box-shadow:0 6px 22px rgba(43,36,30,.18)}
/* clear the bottom tab bar on phones, and stack so it never runs off-screen */
@media (max-width:760px){
  .update-banner{bottom:calc(84px + env(safe-area-inset-bottom)); flex-wrap:wrap; gap:8px; padding:12px 14px}
  /* the message wraps to several lines here, and a vertically-centred dot
     beside a paragraph just looks stranded — it is decorative, so drop it */
  .update-dot{display:none}
  .update-banner span:nth-of-type(2){flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .update-banner{transition:none}
  .update-dot{animation:none}
}
@media print{ .update-banner{display:none !important} }

/* ---- boot splash ------------------------------------------------------- */
/* An inline script in <head> sets data-booting when localStorage already
   holds a Supabase session, so a returning user never sees the sign-in form
   flash up while the token is refreshed and the profile fetched. */
.boot-splash{display:none; flex-direction:column; align-items:center; gap:18px}
html[data-booting] #signin-card{display:none !important}
html[data-booting] #boot-splash{display:flex}
.boot-bar{width:150px; height:3px; border-radius:3px; background:var(--line); overflow:hidden}
.boot-bar span{display:block; width:40%; height:100%; border-radius:3px; background:var(--clay);
  animation:boot-slide 1.1s ease-in-out infinite}
@keyframes boot-slide{
  0%{transform:translateX(-110%)} 100%{transform:translateX(320%)}
}
@media (prefers-reduced-motion:reduce){ .boot-bar span{animation:none; width:100%} }

/* ---- line descriptions and notes that grow (autoGrow in util.js) ------- */
.items-table textarea{padding:7px 8px; font-size:13px; line-height:1.45; min-height:0}
/* a locked document is read far more than edited: don't fade its descriptions */
.items-table textarea.it-desc:disabled{opacity:.85}

/* ---- private notes: dashed, so it never reads as part of the document --- */
.card.private-notes{border-style:dashed; padding:14px 16px}
.pn-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; flex-wrap:wrap}
.pn-label{display:flex; align-items:center; gap:6px; margin:0; font-size:12px; font-weight:700; color:var(--text)}
.pn-state{font-size:12px; color:var(--muted)}

/* ---- PDF preview overlay -------------------------------------------------- */
.pv-bg{position:fixed; inset:0; z-index:80; display:none; background:rgba(0,0,0,.7); padding:20px}
.pv-bg.show{display:flex}
.pv-box{margin:0 auto; width:100%; max-width:980px; height:100%; display:flex; flex-direction:column;
  overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:12px}
.pv-head{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; border-bottom:1px solid var(--line)}
.pv-head .btn-row{margin:0}
#pv-frame{flex:1; width:100%; border:0; background:#fff}
@media (max-width:760px){ .pv-bg{padding:8px} }