:root {
  --brand: #6c63ff;
  --brand-dark: #534fd1;
  --dark: #222;
  --bg: #f4f4f9;
  --card: #fff;
  --text: #2d2d2d;
  --muted: #666;
  --line: #d7d7e4;
  --good: #197a39;
  --warn: #a66b00;
  --bad: #a72222;
  --soft-good: #e8f8ee;
  --soft-warn: #fff5d6;
  --soft-bad: #ffe8e8;
}
* { box-sizing: border-box; }
body { margin:0; font-family: Arial, sans-serif; background:var(--bg); color:var(--text); }
.topbar { background:var(--dark); color:#fff; border-bottom:4px solid var(--brand); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; position:sticky; top:0; z-index:20; }
.brand { display:flex; align-items:center; gap:10px; min-width:230px; }
.brand img { width:42px; height:42px; border-radius:9px; }
.brand h1 { margin:0; font-size:22px; line-height:1; }
.brand p { margin:3px 0 0; font-size:13px; color:#ddd; }
nav { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
nav button, .nav-toggle { background:#3a3a3a; color:#fff; border:1px solid #555; border-radius:8px; padding:8px 10px; cursor:pointer; }
nav button.active { background:var(--brand); border-color:var(--brand); }
.nav-toggle { display:none; font-size:20px; }
main { max-width:1180px; margin:18px auto; padding:0 12px 48px; }
.screen { display:none; }
.screen.active { display:block; }
h2, h3 { margin-top:0; }
.toolbar-row { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px; }
.toolbar-actions, .button-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
button { padding:9px 13px; border:0; border-radius:7px; background:var(--brand); color:#fff; font:inherit; cursor:pointer; }
button:hover { background:var(--brand-dark); }
button.secondary { background:#555; }
button.secondary:hover { background:#333; }
button.danger { background:#a72222; }
button.danger:hover { background:#781717; }
button:disabled { opacity:.6; cursor:not-allowed; }
label { display:block; font-weight:bold; margin-top:10px; }
.inline-label { display:inline-flex; align-items:center; gap:7px; margin:0; }
input, select, textarea { width:100%; padding:8px; margin-top:4px; border:1px solid #bbb; border-radius:7px; font:inherit; background:#fff; color:var(--text); }
textarea { min-height:90px; resize:vertical; }
input[type="checkbox"] { width:auto; margin:0 6px 0 0; }
.full { width:100%; margin:0 0 12px; }
.row, .row3, .row4, .settings-grid { display:grid; gap:12px; }
.row { grid-template-columns:repeat(2,minmax(0,1fr)); }
.row3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.row4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.checkrow { display:flex; flex-wrap:wrap; gap:18px; margin:10px 0; }
.checkrow label { display:inline-flex; align-items:center; gap:4px; margin:0; }
.panel, .card { background:var(--card); border-radius:11px; padding:14px; box-shadow:0 0 10px rgba(0,0,0,.06); border:1px solid #eee; }
.card-list { display:grid; gap:11px; }
.card { display:grid; gap:8px; }
.card-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.card-title { font-weight:bold; font-size:18px; }
.card-sub { color:var(--muted); font-size:14px; }
.card-actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.meta-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.meta { background:#f7f7fb; padding:8px; border-radius:8px; border:1px solid #ededf5; }
.meta small { color:var(--muted); display:block; font-size:12px; }
.status-pill { display:inline-block; border-radius:999px; padding:4px 9px; font-size:12px; font-weight:bold; }
.status-UNPAID { background:var(--soft-bad); color:var(--bad); }
.status-PARTIAL { background:var(--soft-warn); color:var(--warn); }
.status-PAID { background:var(--soft-good); color:var(--good); }
.status-CREDIT { background:#e8efff; color:#2440a0; }
.overdue { border-left:5px solid var(--bad); }
.locked { opacity:.94; }
.muted { color:var(--muted); }
.totals { font-weight:bold; margin-top:4px; }
.selected-bar { display:flex; align-items:center; justify-content:flex-end; gap:8px; background:#fff5d6; border:1px solid #edd99b; padding:10px; border-radius:9px; margin:10px 0; }
.hidden { display:none !important; }
.wide-dialog { width:min(980px,96vw); }
dialog { border:0; border-radius:12px; padding:0; box-shadow:0 14px 60px rgba(0,0,0,.35); }
dialog::backdrop { background:rgba(0,0,0,.45); }
dialog header { padding:14px 16px; color:#fff; background:var(--dark); border-bottom:4px solid var(--brand); border-radius:12px 12px 0 0; }
dialog header h2 { margin:0; }
.dialog-body { padding:14px 16px; max-height:72vh; overflow:auto; }
.dialog-actions { display:flex; align-items:center; gap:8px; padding:12px 16px; border-top:1px solid var(--line); background:#fafafa; border-radius:0 0 12px 12px; }
.spacer { flex:1; }
.tax-box, .totals-box { background:#f7f7fb; border:1px solid #e1e1ee; border-radius:10px; padding:12px; margin-top:12px; }
.items-head { display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.item-row { display:grid; grid-template-columns:1.5fr .7fr .9fr .9fr auto; gap:8px; align-items:end; background:#fafafa; padding:8px; border-radius:8px; border:1px solid #eee; margin:8px 0; }
.summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.summary-card { background:#fff; border-radius:10px; padding:14px; border:1px solid #eee; box-shadow:0 0 10px rgba(0,0,0,.04); }
.summary-card strong { display:block; font-size:20px; margin-top:5px; }
.table-wrap { overflow:auto; background:#fff; border-radius:10px; border:1px solid #eee; }
table { border-collapse:collapse; width:100%; min-width:760px; }
th, td { padding:9px; border-bottom:1px solid #eee; text-align:left; vertical-align:top; }
th { background:#f1f1f8; position:sticky; top:0; }
.check-list { max-height:360px; overflow:auto; border:1px solid #ddd; background:#fafafa; border-radius:8px; padding:8px; margin:10px 0; }
.check-list label { display:flex; align-items:flex-start; gap:8px; font-weight:normal; padding:7px; border-bottom:1px solid #eee; margin:0; }
.invoice-preview { background:#fff; border-radius:10px; padding:20px; margin-top:15px; border:1px solid #ddd; min-height:140px; }
.invoice-preview h2 { margin-bottom:2px; }
.invoice-company { display:flex; justify-content:space-between; gap:20px; border-bottom:2px solid #222; padding-bottom:12px; margin-bottom:14px; }
.invoice-total { text-align:right; font-size:18px; font-weight:bold; }
.status-pre { white-space:pre-wrap; background:#111; color:#f4f4f4; padding:12px; border-radius:9px; overflow:auto; max-height:300px; }
.import-label { display:inline-block; background:#555; color:#fff; border-radius:7px; padding:9px 13px; cursor:pointer; margin:0; }
.import-label input { display:none; }
.help-frame { width:100%; min-height:72vh; border:1px solid #ddd; border-radius:10px; background:#fff; }

.credit-apply-box {
  display: grid;
  gap: 6px;
  align-content: end;
}
.credit-status {
  width: 100%;
  min-height: 38px;
  padding: 8px;
  margin-top: 4px;
  border: 1px solid #bbb;
  border-radius: 7px;
  background: #f7f7fb;
  color: var(--text);
  font-weight: normal;
}
.credit-status.has-credit {
  background: var(--soft-good);
  color: var(--good);
  border-color: #bde5c9;
}
.credit-status.applied-credit {
  background: #e8efff;
  color: #2440a0;
  border-color: #c9d6ff;
}
.credit-apply-box button {
  width: 100%;
  margin-top: 0;
}

@media (max-width: 820px) {
  .topbar { align-items:flex-start; flex-wrap:wrap; }
  .nav-toggle { display:block; margin-left:auto; }
  nav { display:none; width:100%; justify-content:stretch; }
  nav.open { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  nav button { width:100%; }
  .toolbar-row { flex-direction:column; }
  .toolbar-actions { width:100%; }
  .row, .row3, .row4, .settings-grid, .meta-grid, .summary-grid { grid-template-columns:1fr; }
  .item-row { grid-template-columns:1fr 1fr; }
  .item-row button { grid-column:1 / -1; }
  .dialog-body { max-height:70vh; }
}
@media print {
  body { background:#fff; }
  .topbar, main > .screen:not(#screen-invoices), #screen-invoices > h2, #screen-invoices > p, #screen-invoices > .panel, .toolbar-row { display:none !important; }
  main { max-width:none; padding:0; margin:0; }
  #screen-invoices { display:block !important; }
  .invoice-preview { border:0; padding:0; margin:0; }
}