:root {
  --ink: #393a3d;
  --ink-soft: #6b6c72;
  --nav: #2b2c30;
  --nav-hover: #3a3b40;
  --brand: #2ca01c;
  --brand-dark: #228316;
  --link: #0077c5;
  --canvas: #f4f5f8;
  --line: #dcdfe4;
  --bs-body-font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bs-body-color: var(--ink);
  --bs-link-color: var(--link);
}
body { background: var(--canvas); }
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.sidebar { background: var(--nav); color: #e8e9ec; padding: 0 0 24px; position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; }
.sidebar .brand { padding: 18px 20px; font-weight: 600; font-size: 1.1rem; border-bottom: 1px solid #3f4045; }
.sidebar .brand span { color: #6fd35f; }
.sidebar a { display: block; padding: 11px 20px; color: #d6d8dc; text-decoration: none; border-left: 4px solid transparent; }
.sidebar a:hover { background: var(--nav-hover); color: #fff; }
.sidebar a.active { background: var(--nav-hover); color: #fff; border-left-color: var(--brand); font-weight: 600; }
.sidebar .nav-heading { padding: 16px 20px 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #8d8f96; }
.main { min-width: 0; }
.topbar { background: #fff; border-bottom: 1px solid var(--line); padding: 10px 28px; display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.content { padding: 24px 28px 48px; max-width: 1180px; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.page-head h1 { font-size: 1.6rem; font-weight: 600; margin: 0; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--brand); --bs-nav-link-color: var(--ink); --bs-nav-link-hover-color: var(--brand-dark); }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.panel .table { margin: 0; }
.table th { font-weight: 600; color: var(--ink-soft); font-size: .85rem; border-bottom-color: var(--line); background: #fafbfc; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark); --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); border-radius: 20px; padding-left: 18px; padding-right: 18px; }
.btn-outline-secondary { border-radius: 20px; }
.dash-heading { font-size: .8rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; margin: 22px 0 8px; }
.stat { padding: 16px 18px; }
.stat .label { color: var(--ink-soft); font-size: .85rem; }
.stat .value { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat.warn .value { color: #c0392b; }
.status { font-size: .8rem; font-weight: 600; }
.status.Paid { color: var(--brand-dark); }
.status.Overdue { color: #c0392b; }
.status.Open { color: var(--ink-soft); }
.status.Void { color: var(--ink-soft); }
.report-row.total td { font-weight: 600; border-top: 2px solid var(--ink); }
.report-row.group td { font-weight: 600; background: #fafbfc; }
.login { max-width: 400px; margin: 10vh auto; padding: 0 16px; }
.login .panel { padding: 28px; }
:focus-visible { outline: 3px solid #7ab8e8; outline-offset: 2px; }
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; display: flex; overflow-x: auto; }
  .sidebar .brand, .sidebar .nav-heading { display: none; }
  .sidebar a { white-space: nowrap; border-left: 0; border-bottom: 4px solid transparent; }
  .sidebar a.active { border-bottom-color: var(--brand); }
  .content { padding: 16px; }
}

.print-title { display: none; }
@media print {
  .sidebar, .topbar, .no-print, .btn, .alert { display: none !important; }
  .app { display: block; }
  body { background: #fff; }
  .content { padding: 0; max-width: none; }
  .panel { border: 0; }
  .print-title { display: block; font-size: 1.2rem; font-weight: 600; margin-bottom: 12px; }
}