:root{
  --bg:#EEF1EE; --surface:#FFFFFF; --surface-2:#F5F6F3;
  --ink:#20262B; --ink-muted:#5B6570;
  --walnut:#5C3A22; --walnut-dark:#3A2415; --brass:#B98B45; --brass-light:#E3C793;
  --steel:#41525E; --border:#D8DCD6;
  --excellent:#1F6D52; --excellent-bg:#DFF0E8;
  --great:#3E9B6C; --great-bg:#E6F5EC;
  --ok:#B4901F; --ok-bg:#FBF1DA;
  --low:#C1652E; --low-bg:#FCE9DF;
  --bad:#B5442E; --bad-bg:#FBE4DE;
  --tax:#6B4FA0; --tax-bg:#EEE8F7;
  --expense:#C1652E; --expense-bg:#FCE9DF;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg); color:var(--ink); font-family:"Segoe UI","Tahoma","Dubai",Arial,sans-serif; font-size:13px; line-height:1.5; padding-bottom:70px;}
.num{ font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:plaintext; text-align:center;}
button{font-family:inherit; cursor:pointer;} input,select,textarea{font-family:inherit;}
:focus-visible{outline:2px solid var(--brass); outline-offset:1px;}

.topbar{background:linear-gradient(180deg,var(--walnut),var(--walnut-dark)); color:#F3EEE6; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; border-bottom:3px solid var(--brass);}
.topbar h1{font-size:18px; margin:0; font-weight:800;}
.topbar .sub{font-size:11.5px; color:var(--brass-light); margin-top:2px;}
.topbar .actions{display:flex; gap:8px; flex-wrap:wrap;}
.btn{border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; padding:8px 14px; border-radius:6px; font-size:12.5px; font-weight:600;}
.btn:hover{background:rgba(255,255,255,.18);}
.btn.brass{background:var(--brass); border-color:var(--brass); color:#2A1B0C;}
.btn.brass:hover{background:#c99a54;}
.btn.ghost{background:transparent;}

.quotes-bar{background:var(--surface-2); border-bottom:1px solid var(--border); padding:8px 20px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12px;}
.quotes-bar input[type=text]{padding:6px 8px; border:1px solid var(--border); border-radius:5px; font-size:12px; min-width:160px;}
.quotes-bar select{padding:6px 8px; border:1px solid var(--border); border-radius:5px; font-size:12px; min-width:180px;}
.btn2{background:var(--surface); border:1px solid var(--steel); color:var(--steel); padding:6px 12px; border-radius:5px; font-weight:700; font-size:12px;}
.btn2:hover{background:var(--steel); color:#fff;}
.btn2.warn{border-color:var(--bad); color:var(--bad);} .btn2.warn:hover{background:var(--bad); color:#fff;}
.btn2.go{border-color:var(--excellent); color:var(--excellent);} .btn2.go:hover{background:var(--excellent); color:#fff;}
.hint-inline{color:var(--ink-muted); font-size:11px;}

.panel-details{margin:12px 20px 0; background:var(--surface-2); border:1px dashed var(--border); border-radius:8px; padding:8px 14px;}
.panel-details summary{cursor:pointer; font-weight:700; color:var(--steel); font-size:12.5px; padding:4px 0;}

.dashboard{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; padding:14px 20px;}
.card{background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px 12px; position:relative; overflow:hidden;}
.card::before{content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--steel);}
.card.accent::before{background:var(--brass);}
.card .lbl{font-size:11px; color:var(--ink-muted); font-weight:600; margin-bottom:4px;}
.card .val{font-size:16px; font-weight:800; font-variant-numeric:tabular-nums;}
.card.pos .val{color:var(--great);} .card.neg .val{color:var(--bad);}

.grid-form{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; align-items:end;}
.grid-form label{display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--ink-muted); font-weight:700;}
.grid-form label.span2{grid-column:span 2;}
.grid-form label.chk{flex-direction:row; align-items:center; gap:6px;}
.grid-form input, .grid-form select, .grid-form textarea{padding:7px 8px; border:1px solid var(--border); border-radius:6px; font-size:12.5px; font-weight:700; color:var(--ink); font-family:inherit;}

.table-toolbar{display:flex; justify-content:space-between; align-items:center; margin:10px 20px 6px;}
.table-toolbar .hint{font-size:11.5px; color:var(--ink-muted);}

.table-wrap{margin:0 20px; background:var(--surface); border:1px solid var(--border); border-radius:8px; overflow:auto; max-height:58vh;}
table{border-collapse:collapse; width:100%; min-width:2100px;}
thead th{position:sticky; top:0; background:var(--steel); color:#fff; z-index:3; font-size:11px; font-weight:700; padding:7px 6px; border-inline-start:1px solid rgba(255,255,255,.15); white-space:nowrap;}
thead tr.group th{background:var(--walnut); top:0; z-index:4;}
thead tr.fields th{top:30px;}
tbody td{padding:5px 6px; border-bottom:1px solid var(--border); border-inline-start:1px solid var(--border); white-space:nowrap; background:var(--surface);}
tbody tr:hover td{background:#FAF8F3;}
tbody tr.z-excellent{box-shadow:inset 4px 0 0 var(--excellent);}
tbody tr.z-great{box-shadow:inset 4px 0 0 var(--great);}
tbody tr.z-ok{box-shadow:inset 4px 0 0 var(--ok);}
tbody tr.z-low{box-shadow:inset 4px 0 0 var(--low);}
tbody tr.z-bad{box-shadow:inset 4px 0 0 var(--bad);}
td.sticky-1,th.sticky-1{position:sticky; inset-inline-start:0; z-index:2; min-width:34px; text-align:center; color:var(--ink-muted); font-weight:700;}
td.sticky-2,th.sticky-2{position:sticky; inset-inline-start:34px; z-index:2; min-width:150px;}
thead th.sticky-1, thead th.sticky-2{z-index:5;}
.cell-in{width:80px; padding:5px 6px; border:1px solid var(--border); border-radius:4px; font-size:12.5px; font-weight:600; text-align:center;}
.cell-in.name{width:150px; text-align:start; font-weight:700;}
select.cell-in{width:112px;}
.unit-hint{font-size:10px; color:var(--ink-muted); display:block;}
.computed{font-weight:700;} .computed.muted{color:var(--ink-muted); font-weight:600;}
.pct-badge{display:inline-block; padding:2px 7px; border-radius:10px; font-weight:800; font-size:11.5px;}
.status-badge{display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:12px; font-weight:800; font-size:11.5px; white-space:nowrap;}
.del-btn{background:var(--bad-bg); color:var(--bad); border:1px solid var(--bad); border-radius:5px; padding:5px 9px; font-weight:800;}
.del-btn:hover{background:var(--bad); color:#fff;}

.z-excellent-txt{color:var(--excellent); background:var(--excellent-bg);}
.z-great-txt{color:var(--great); background:var(--great-bg);}
.z-ok-txt{color:var(--ok); background:var(--ok-bg);}
.z-low-txt{color:var(--low); background:var(--low-bg);}
.z-bad-txt{color:var(--bad); background:var(--bad-bg);}

.panel{margin:16px 20px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px 20px;}
.panel h2{font-size:14px; margin:0 0 12px; color:var(--walnut);}
.divider-dashed{border-top:2px dashed var(--border); margin:14px 0;}

.expense-table{display:flex; flex-direction:column; gap:8px;}
.expense-row{display:grid; grid-template-columns:140px 1fr 1fr 1fr 130px; gap:10px; align-items:end; padding:8px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2);}
.expense-row label{display:flex; flex-direction:column; gap:4px; font-size:10.5px; color:var(--ink-muted); font-weight:700;}
.expense-row input, .expense-row select{padding:6px 8px; border:1px solid var(--border); border-radius:5px; font-size:12.5px; font-weight:700;}
.expense-row .exp-name{font-weight:800; color:var(--walnut); font-size:12.5px; align-self:center;}
.expense-row .exp-amount{font-weight:800; align-self:center; text-align:center;}

.ticket-rows{display:grid; grid-template-columns:1fr auto; row-gap:0; font-size:13px; max-width:640px;}
.ticket-rows .row{display:contents;}
.ticket-rows .k, .ticket-rows .v{padding:7px 4px; border-bottom:1px solid var(--border);}
.ticket-rows .v{font-weight:800; font-variant-numeric:tabular-nums; text-align:left; direction:ltr;}
.ticket-rows .cat-cost .k, .ticket-rows .cat-cost .v{color:var(--steel);}
.ticket-rows .cat-expense .k, .ticket-rows .cat-expense .v{color:var(--expense); background:var(--expense-bg);}
.ticket-rows .cat-revenue .k, .ticket-rows .cat-revenue .v{color:var(--walnut);}
.ticket-rows .cat-tax .k, .ticket-rows .cat-tax .v{color:var(--tax); background:var(--tax-bg);}
.ticket-rows .cat-payable .k, .ticket-rows .cat-payable .v{color:var(--excellent); background:var(--excellent-bg); font-size:15px;}
.ticket-rows .cat-profit .k, .ticket-rows .cat-profit .v{font-size:15px;}
.ticket-rows .cat-profit.pos .k, .ticket-rows .cat-profit.pos .v{color:var(--great);}
.ticket-rows .cat-profit.neg .k, .ticket-rows .cat-profit.neg .v{color:var(--bad);}

.future-box{margin:16px 20px 90px; background:var(--surface-2); border:1px dashed var(--border); border-radius:8px; padding:10px 16px; font-size:11.5px; color:var(--ink-muted);}

.decision-bar{position:fixed; bottom:0; inset-inline:0; z-index:50; background:var(--walnut-dark); color:#fff; border-top:3px solid var(--brass); display:flex; align-items:center; justify-content:space-between; padding:8px 22px; gap:14px; flex-wrap:wrap; box-shadow:0 -4px 14px rgba(0,0,0,.2);}
.decision-bar .pill{display:flex; align-items:center; gap:8px; padding:6px 16px; border-radius:20px; font-weight:800; font-size:14px;}
.decision-bar .metrics{display:flex; gap:18px; flex-wrap:wrap;}
.decision-bar .metrics div{text-align:center;}
.decision-bar .metrics .k{font-size:10px; color:var(--brass-light); font-weight:700;}
.decision-bar .metrics .v{font-size:14px; font-weight:800; font-variant-numeric:tabular-nums;}
.decision-bar .verdict{font-size:12px; color:#EFE6D8; max-width:240px;}

/* settings overlay */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:100; display:none; align-items:flex-start; justify-content:center; padding:30px 16px; overflow:auto;}
.overlay.open{display:flex;}
.overlay-card{background:var(--surface); border-radius:12px; max-width:820px; width:100%; padding:0; box-shadow:0 12px 40px rgba(0,0,0,.3);}
.overlay-head{display:flex; justify-content:space-between; align-items:center; padding:16px 22px; border-bottom:2px solid var(--brass); background:var(--walnut); color:#fff; border-radius:12px 12px 0 0;}
.overlay-head h2{margin:0; font-size:15px;}
.overlay-body{padding:18px 22px; display:flex; flex-direction:column; gap:16px; max-height:75vh; overflow:auto;}
.overlay-body h3{margin:0; font-size:12.5px; color:var(--steel); border-bottom:1px dashed var(--border); padding-bottom:4px;}
.col-toggles{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:6px;}
.col-toggles label{display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--ink);}

/* customer print doc (hidden on screen) */
.customer-print-only{display:none;}
.quote-doc{font-family:"Segoe UI",Tahoma,Arial,sans-serif; color:#20262B; padding:20px;}
.q-header{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #5C3A22; padding-bottom:12px; margin-bottom:12px;}
.q-brand{display:flex; gap:10px; align-items:center;}
.q-logo{max-height:56px; max-width:120px;}
.q-company{font-size:17px; font-weight:800; color:#5C3A22;}
.q-companymeta{font-size:11px; color:#5B6570;}
.q-meta{font-size:12px; text-align:left;}
.q-customer{display:grid; grid-template-columns:1fr 1fr; gap:4px; font-size:12px; margin-bottom:14px;}
.q-table{width:100%; border-collapse:collapse; margin-bottom:14px;}
.q-table th{background:#41525E; color:#fff; padding:7px; font-size:11.5px;}
.q-table td{padding:6px 7px; border-bottom:1px solid #D8DCD6; font-size:12px; text-align:center;}
.q-table td.q-name{text-align:start; font-weight:700;}
.q-totals{max-width:340px; margin-inline-start:auto; font-size:12.5px;}
.q-totals > div{display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid #eee;}
.q-grand{font-weight:800; font-size:15px; color:#5C3A22; border-top:2px solid #5C3A22 !important;}
.q-notes{font-size:11.5px; margin-top:14px; color:#5B6570;}
.q-terms{font-size:10.5px; color:#5B6570; margin-top:16px; border-top:1px dashed #D8DCD6; padding-top:8px;}
.q-sign{display:flex; justify-content:space-between; margin-top:30px; font-size:12px;}

@media print{
  body.printing-customer > *:not(#customerPrintArea){display:none !important;}
  body.printing-customer #customerPrintArea{display:block !important;}
  body:not(.printing-customer) .topbar .actions, body:not(.printing-customer) .quotes-bar,
  body:not(.printing-customer) .panel-details, body:not(.printing-customer) .decision-bar,
  body:not(.printing-customer) .future-box, body:not(.printing-customer) .del-btn,
  body:not(.printing-customer) thead .no-print, body:not(.printing-customer) .overlay{display:none !important;}
  body{padding-bottom:0; background:#fff;}
  .table-wrap{max-height:none; overflow:visible; border:none;}
}