: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}

.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} }