:root{
  --ink:#3e494f;
  --muted:#748087;
  --line:#dfe4e6;
  --sage:#e6efe7;
  --blue:#e8f1f6;
  --lav:#f0ebf5;
  --peach:#f8eee7;
  --cream:#fbf7ed;
  --gray:#f4f5f5;
  --accent:#607a68;
  --accent-dark:#4f6657;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fbfcfc}
a{color:var(--accent-dark)}
.topbar{
  position:sticky;top:0;z-index:50;display:flex;gap:18px;align-items:center;
  padding:12px 20px;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 1px 7px rgba(40,55,48,.04)
}
.brand{min-width:210px}.brand-title{font-weight:700;color:var(--accent-dark);font-size:16px}
.brand-subtitle{font-size:11px;color:var(--muted);margin-top:2px}
.mainnav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.mainnav a{text-decoration:none;color:var(--ink);padding:8px 10px;border-radius:9px;font-size:13px}
.mainnav a:hover{background:var(--sage)}.mainnav a.active{background:var(--blue);font-weight:700}
.userbox{text-align:right;font-size:12px;min-width:130px}.userbox .small{color:var(--muted);margin:2px 0 4px}
.page{max-width:1550px;margin:0 auto;padding:22px}.page-heading h1{font-size:24px;margin:0 0 18px}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:16px}
.panel.soft{background:var(--cream)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px}
.card.sage{background:var(--sage)}.card.blue{background:var(--blue)}.card.lav{background:var(--lav)}.card.peach{background:var(--peach)}
.label{font-size:12px;color:var(--muted)}.kpi{font-size:25px;font-weight:700;margin-top:5px}
.formbox{max-width:620px}
label{display:block;font-size:12px;font-weight:700;margin-bottom:5px}
input,select,textarea{
  width:100%;padding:9px;border:1px solid #ccd4d7;border-radius:8px;background:#fff;color:var(--ink)
}
button,.button{
  display:inline-block;border:0;border-radius:8px;padding:9px 14px;background:var(--accent);
  color:#fff;text-decoration:none;cursor:pointer;font-weight:700
}
button:hover,.button:hover{background:var(--accent-dark)}
.small-button{padding:7px 10px;font-size:12px}.small-input{max-width:90px}
.check{width:auto;transform:scale(1.1)}
.notice{margin-bottom:16px;padding:11px 13px;border:1px solid #eadfc7;background:var(--cream);border-radius:9px}
.notice.success{border-color:#d7e6da;background:var(--sage)}.notice.error{border-color:#ecd4d4;background:#f8eaea}
.help{font-size:12px;color:var(--muted);line-height:1.5}.footer{text-align:center;color:#8b959a;font-size:11px;padding:25px}
.login-wrap{max-width:470px;margin:40px auto}.login-logo{text-align:center;margin-bottom:20px}
.login-logo h1{margin:0;color:var(--accent-dark);font-size:26px}.login-logo p{margin:6px 0;color:var(--muted)}
.setup-nav{
  position:sticky;top:67px;z-index:20;display:flex;gap:6px;flex-wrap:wrap;
  padding:10px;background:#fbfcfc;border-bottom:1px solid var(--line);margin-bottom:18px
}
.setup-nav a{background:#fff;border:1px solid var(--line);padding:7px 10px;border-radius:9px;text-decoration:none;font-size:12px}
.setup-nav a:hover{background:var(--blue)}
.setup-section{scroll-margin-top:120px;margin-bottom:34px}
.setup-section h2{font-size:18px;color:var(--accent-dark);margin:0 0 12px}
.inline-form{
  display:grid;grid-template-columns:1fr 2fr 110px 130px;gap:12px;align-items:end
}
.inline-form.six{grid-template-columns:1fr 2fr 1.2fr 1.4fr 90px 140px}
.inline-form .wide{grid-column:span 2}.form-action{align-self:end}.checkbox-line{align-self:end;padding-bottom:8px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
table{width:100%;border-collapse:collapse;font-size:12px;min-width:760px}
th,td{padding:8px;border-bottom:1px solid #e8ebec;text-align:left;vertical-align:middle}
th{background:var(--gray);font-size:11px;color:#5e6b72;position:static}
td input,td select{padding:7px;font-size:12px}
tr:hover td{background:#fcfdfd}
@media(max-width:1050px){
  .inline-form,.inline-form.six{grid-template-columns:1fr 1fr}
  .inline-form .wide{grid-column:auto}
}
@media(max-width:900px){
  .topbar{align-items:flex-start;flex-direction:column}
  .userbox{text-align:left}.setup-nav{top:142px}
}
@media(max-width:650px){
  .inline-form,.inline-form.six{grid-template-columns:1fr}
}


/* Purchases module additions - app.css version 0.04 */
.purchase-form{
  display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:12px;
  align-items:end;
}
.purchase-form .wide{grid-column:span 2}
.purchase-form .full{grid-column:1/-1}
.calculated{
  background:#f1f2f2 !important;
  color:#556168;
  font-weight:700;
}
.number{text-align:right}
.empty-row{
  text-align:center;
  color:var(--muted);
  padding:24px;
}
@media(max-width:1050px){
  .purchase-form{grid-template-columns:repeat(2,minmax(150px,1fr))}
}
@media(max-width:650px){
  .purchase-form{grid-template-columns:1fr}
  .purchase-form .wide,.purchase-form .full{grid-column:auto}
}


/* Sales module additions - app.css version 0.05 */
.sales-form{
  display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:12px;
  align-items:end;
}
.sales-form .wide{grid-column:span 2}
.sales-form .full{grid-column:1/-1}
@media(max-width:1050px){
  .sales-form{grid-template-columns:repeat(2,minmax(150px,1fr))}
}
@media(max-width:650px){
  .sales-form{grid-template-columns:1fr}
  .sales-form .wide,.sales-form .full{grid-column:auto}
}


/* Approval workflow + users - app.css version 0.06 */
.status{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700}
.status-draft{background:#f2f3f3;color:#5e686d}
.status-submitted{background:#e8f1f6;color:#496574}
.status-approved{background:#e6efe7;color:#48624f}
.status-rejected{background:#f8eaea;color:#8a4343}
.status-voided{background:#eeeaf0;color:#685a6e}
.secondary{background:#87969d}.secondary:hover{background:#728188}
.password-reset-form{display:flex;gap:6px;min-width:260px}
.password-reset-form input{min-width:150px}


/* Multi-line invoice entry - app.css version 0.07 */
.invoice-header-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;align-items:end}
.invoice-header-grid .span2{grid-column:span 2}
.entry-lines input,.entry-lines select{min-width:90px}
.entry-lines td:nth-child(2) select{min-width:180px}
.entry-lines td:nth-child(5) input{min-width:160px}
.invoice-total-box{margin:18px 0 8px auto;max-width:420px;background:var(--gray);border:1px solid var(--line);border-radius:12px;padding:12px 15px}
.invoice-total-box>div{display:flex;justify-content:space-between;padding:5px 0}
.invoice-total-box .grand{font-size:18px;border-top:1px solid var(--line);margin-top:5px;padding-top:10px}
.calculated-text{background:#f1f2f2;font-weight:700}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
@media(max-width:1000px){.invoice-header-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}}
@media(max-width:650px){.invoice-header-grid{grid-template-columns:1fr}.invoice-header-grid .span2{grid-column:auto}.form-actions{justify-content:flex-start;flex-wrap:wrap}}

/* Automatic sales tax calculation - app.css version 0.08 */
.auto-hst[readonly]{background:#f1f2f2;font-weight:700;cursor:not-allowed}

/* Tax-rate override visibility - app.css version 0.09 */
.taxrate{background:#f1f2f2;font-weight:700}
.taxrate.overridden-rate{background:#fbf3df;border-color:#d9bd76}

/* Simplified Sales tax entry - app.css version 0.10 */
.hidden-tax-treatment{display:none!important}
.taxrate{min-width:82px;text-align:right}

/* Review queue line-level invoice display - app.css version 0.11 */
.invoice-first-row td{border-top:2px solid #cfd8d2}

/* Rejected invoice correction workflow - app.css version 0.12 */
.rejected-notice{
  background:#fbf1e5;
  border-color:#e5cfae;
}
.rejection-reason{
  margin-top:5px;
  max-width:260px;
}

/* Expenses module - app.css version 0.14 */
.entry-lines td:nth-child(2) select{min-width:180px}
.entry-lines .settlement{min-width:130px}

/* Inventory + COGS - app.css version 0.16 */
.reconciliation-row td{background:#fbf7ed}

/* Reports module - app.css version 0.17 */
.report-filter{display:flex;gap:14px;align-items:end;flex-wrap:wrap}
.report-filter>div{min-width:170px}
.report-total-row td{background:#eef4ef;border-top:2px solid #aebfb2}

/* Expanded reports module - app.css version 0.18 */
.report-filter select{min-width:220px}

/* Payroll module - app.css version 0.19 */
#payrollTable input,#payrollTable select{min-width:95px}
#payrollTable .emp{min-width:170px}

/* Employee payroll settings + automatic deductions - app.css version 0.20 */
.employee-add-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;align-items:end}
.employee-switches{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.employee-switches label{font-weight:400;margin:0}
.employee-settings-table input,.employee-settings-table select{min-width:85px}
#payrollTable{min-width:2200px}
@media(max-width:1000px){.employee-add-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}}
@media(max-width:650px){.employee-add-grid{grid-template-columns:1fr}}

/* Payroll TD1 + pay stub - app.css version 0.21 */
.auto-tax{background:#f1f2f2}
.paystub{max-width:850px;margin:20px auto;border:1px solid var(--line);padding:24px;background:#fff}
.paystub-head,.paystub-meta{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.paystub-meta{margin:18px 0}
.paystub-status{font-weight:700}
.paystub-actions{display:flex;gap:10px;justify-content:flex-end}
@media print{
  .topbar,.footer,.page-heading,.no-print{display:none!important}
  .page{padding:0!important}
  .paystub{border:0;margin:0;max-width:none}
}