:root {
  --bg: #f1f4f9;
  --surface: #ffffff;
  --ink: #16213a;
  --muted: #5b6b85;
  --line: #e1e6f0;
  --accent: #1d5fd6;
  --accent-strong: #123f95;
  --accent-soft: #e3ebfc;
  --gold: #d6a85c;
  --danger: #c0392b;
  --whatsapp: #25d366;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px rgba(15, 35, 70, 0.08);
  --app-bar-h: 64px;
  --action-bar-h: 78px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1420;
    --surface: #141d2e;
    --ink: #eef2f9;
    --muted: #94a3bb;
    --line: #24304a;
    --accent: #5b9bff;
    --accent-strong: #8ab4ff;
    --accent-soft: #16233d;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  }
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Author rules below set explicit `display` on .page/.action-bar/.icon-btn,
   which otherwise wins over the browser's default [hidden] { display: none }
   (same specificity, but author origin beats user-agent origin). Force it. */
[hidden] {
  display: none !important;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  overscroll-behavior-y: none;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}

/* ---------- App bar ---------- */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(14px + var(--safe-top)) 18px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.app-bar-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  box-shadow: var(--shadow);
}

.app-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.app-bar h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
}

.app-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--accent-soft);
  color: var(--accent-strong);
  cursor: pointer;
  flex-shrink: 0;
}

.icon-btn:active {
  transform: scale(0.94);
}

.icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* ---------- Body / layout ---------- */
.app-body {
  flex: 1;
  padding: 16px 16px calc(var(--safe-bottom) + 24px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.app[data-page="generate"] .app-body,
.app[data-page="statement"] .app-body {
  padding-bottom: calc(var(--action-bar-h) + var(--safe-bottom) + 24px);
}

.page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- Stat row ---------- */
.stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* The Statement tab shows 5 tiles — auto-fit instead of a fixed 2-column
   grid so they reflow evenly instead of leaving one tile stranded alone
   on its own row. */
#statement-stat-row {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}

#statement-stat-row .stat-value {
  font-size: clamp(14px, 4vw, 18px);
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-value {
  font-size: clamp(16px, 5vw, 22px);
  font-weight: 800;
  color: var(--accent-strong);
  line-height: 1.2;
  word-break: break-word;
}

/* ---------- Defaults card ---------- */
.defaults-card {
  overflow: hidden;
}

.card-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}

.card-toggle .chevron {
  color: var(--muted);
  transition: transform 0.2s ease;
}

.card-toggle[aria-expanded="true"] .chevron {
  transform: rotate(90deg);
}

.defaults-body {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 16px 16px;
}

.defaults-body.open {
  display: grid;
}

/* ---------- Forms ---------- */
label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

label span {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

input,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  font: inherit;
  font-size: 16px;
  background: var(--bg);
  color: var(--ink);
  min-height: 44px;
  box-sizing: border-box;
}

input:focus,
select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

input[readonly] {
  opacity: 0.7;
}

/* iOS renders date/month pickers with their own internal chrome, which can
   make them taller/wider than sibling inputs in the same grid row and
   throw off alignment. Pin an explicit height and let it size like every
   other field instead of following its native intrinsic size. */
input[type="date"],
input[type="month"] {
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 0 12px;
  line-height: 44px;
  -webkit-appearance: none;
  appearance: none;
}

button {
  font: inherit;
  cursor: pointer;
}

/* ---------- Units section ---------- */
.section-head {
  padding: 0 2px;
}

.section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.section-head-row h2 {
  margin: 0;
}

.statement-meta-grid {
  padding: 16px;
}

.statement-meta-grid .full-width {
  grid-column: 1 / -1;
}

.expense-row-body {
  align-items: end;
}

.expense-remove {
  color: var(--danger);
  background: transparent;
  border-color: var(--line);
}

/* ---------- Accordion sections (Statement tab) ---------- */
.accordion-body {
  display: none;
  padding: 0 16px 16px;
}

.accordion-body.open {
  display: block;
}

.accordion-subhead {
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 12px;
}

.accordion-subhead .action-btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  flex-direction: row;
  gap: 6px;
}

.accordion-hint {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  flex: 1;
  min-width: 160px;
}

.receipt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
}

.draft-status {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  min-height: 14px;
}

.draft-status.offline {
  color: var(--danger);
}

/* ---------- Bulk-fill Received row ---------- */
.fill-received-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}

.inline-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 140px;
}

.fill-received-row .action-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  flex-direction: row;
  gap: 6px;
}

/* ---------- Per-field toggle (e.g. Car Wash) ---------- */
.field-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 2px;
}

.field-toggle > span {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.field-toggle em {
  font-style: normal;
  font-weight: 600;
  color: var(--muted);
  opacity: 0.8;
}

.carry-forward-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.history-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.history-row .action-btn {
  flex: 0 0 auto;
  align-self: center;
  min-height: 38px;
  padding: 0 14px;
  flex-direction: row;
  gap: 6px;
  font-size: 12.5px;
}

.history-row .icon-btn {
  width: 34px;
  height: 34px;
}

.carry-forward-note {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 8px 10px;
  border-radius: 10px;
  margin: 0;
  line-height: 1.4;
}

.carry-forward-note.empty {
  color: var(--muted);
  background: var(--bg);
}

.section-head h2 {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 800;
}

.section-head p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.units-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.unit-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.unit-card.is-off {
  opacity: 0.5;
}

.unit-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.unit-card-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.house-input {
  border: 0;
  background: transparent;
  padding: 0;
  min-height: auto;
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
}

.resident-input {
  border: 0;
  background: transparent;
  padding: 0;
  min-height: auto;
  font-size: 13px;
  color: var(--muted);
}

.house-input:focus,
.resident-input:focus {
  outline: none;
}

.receipt-chip {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 5px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid transparent;
  padding: 6px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

.chip:active {
  transform: scale(0.96);
}

.unit-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px 14px;
}

.unit-card-body .full-width {
  grid-column: 1 / -1;
}

.unit-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 14px;
}

.unit-card-footer .action-btn {
  flex: 1 1 120px;
  min-height: 40px;
  padding: 0 12px;
  flex-direction: row;
  gap: 6px;
  font-size: 12.5px;
}

.unit-card-footer .unit-whatsapp-btn {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: #fff;
}

/* ---------- Toggle switch ---------- */
.switch {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 44px;
  height: 26px;
  margin: 0;
  cursor: pointer;
}

.switch-track {
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--line);
  display: inline-flex;
  align-items: center;
  padding: 3px;
  transition: background 0.2s ease;
}

.switch-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

.switch input:checked + .switch-track {
  background: var(--accent);
}

.switch input:checked + .switch-track .switch-thumb {
  transform: translateX(18px);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 12px);
  transform: translate(-50%, 12px);
  max-width: calc(100% - 32px);
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 40;
  text-align: center;
}

.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast.error {
  background: var(--danger);
  color: #fff;
}

.app[data-page="generate"] .toast,
.app[data-page="statement"] .toast {
  bottom: calc(var(--action-bar-h) + var(--safe-bottom) + 12px);
}

/* ---------- Bottom action bar (contextual, Generate/Statement only) ---------- */
.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + var(--safe-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
}

/* ---------- Side navigation drawer ---------- */
.nav-toggle {
  margin-right: 2px;
}

.nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(10, 16, 28, 0.55);
}

.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 70;
  width: min(280px, 82vw);
  background: var(--surface);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

.nav-drawer.open {
  transform: translateX(0);
}

.nav-drawer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--line);
}

.nav-drawer-head > div {
  flex: 1;
  min-width: 0;
}

.nav-drawer-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
}

.nav-drawer-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
}

.nav-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}

.nav-drawer-item svg {
  color: var(--muted);
  flex-shrink: 0;
}

.nav-drawer-item.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.nav-drawer-item.active svg {
  color: var(--accent-strong);
}

.nav-drawer-item:active {
  transform: scale(0.98);
}

.action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.action-btn:active {
  transform: scale(0.97);
}

.action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.action-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.action-btn.whatsapp {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: #fff;
}

/* ---------- Small screens fine-tune ---------- */
@media (max-width: 380px) {
  .unit-card-body {
    grid-template-columns: 1fr;
  }

  .defaults-body {
    grid-template-columns: 1fr;
  }
}

/* ---------- Records ---------- */
.records-empty {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 24px 0;
}

.year-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.year-chip {
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 999px;
}

.year-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.record-month-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}

.record-month-card .chevron {
  color: var(--muted);
  flex-shrink: 0;
}

.record-months-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.download-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-strong);
  text-decoration: none;
  background: var(--accent-soft);
  padding: 8px 12px;
  border-radius: 999px;
  flex-shrink: 0;
}

.sheet-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}

.sheet-tab {
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
}

.sheet-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.record-table-wrap {
  overflow: auto;
  flex: 1;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

/* A real grid (like the source spreadsheet). Every column keeps its natural
   width and never wraps mid-word, so labels and numbers stay on one line;
   the wrapper scrolls horizontally for whatever doesn't fit. The first
   column (the unit/line label) is pinned so it stays visible while you
   scroll sideways through the rest — like a frozen column in Excel. */
.record-table {
  border-collapse: collapse;
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
}

.record-table td {
  padding: 5px 7px;
  border: 1px solid var(--line);
  vertical-align: top;
}

.record-table tr:nth-child(even) td {
  background: var(--bg);
}

.record-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.record-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 90px;
  max-width: 130px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  background: var(--surface);
  font-weight: 700;
}

.record-table tr:nth-child(even) td:first-child {
  background: var(--bg);
}

/* ---------- Record detail modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(10, 16, 28, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

@media (min-width: 641px) {
  .modal-backdrop {
    align-items: center;
    padding: 20px;
  }
}

.modal-sheet {
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  max-height: 88dvh;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 641px) {
  .modal-sheet {
    border-radius: var(--radius);
    max-height: 85vh;
    max-height: 85dvh;
  }
}

.modal-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.modal-sheet-head h2 {
  margin: 0;
  font-size: 16px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-sheet-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.modal-sheet .sheet-tabs {
  padding: 12px 16px 0;
  flex-shrink: 0;
}

.modal-sheet .record-table-wrap {
  padding: 12px 16px 16px;
}

/* ---------- Inline sign-in prompt (Generate/Statement tabs) ---------- */
#generate-content,
#statement-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-card {
  padding: 28px 24px;
  text-align: center;
}

.login-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  margin: 0 auto 14px;
  box-shadow: var(--shadow);
}

.login-card h2 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
}

.login-copy {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--muted);
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.login-submit {
  min-height: 48px;
  margin-top: 4px;
}

.modal-error {
  margin: -4px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--danger);
}

/* ---------- Wider screens: keep the mobile app look, just centered ---------- */
@media (min-width: 641px) {
  body {
    background: linear-gradient(180deg, var(--bg), var(--bg));
  }

  .app {
    box-shadow: 0 0 0 1px var(--line), 0 30px 60px rgba(0, 0, 0, 0.1);
    background: var(--bg);
  }
}

/* ---------- Desktop: permanent sidebar instead of an overlay drawer ----------
   Below this width the drawer is a full-screen overlay pinned to the true
   viewport edge, which looks disconnected once .app is a centered card with
   space on both sides. At desktop widths, dock the nav as a static sidebar
   on the left (fixed 280px, matching .nav-drawer's own width cap) and let
   .app fill the rest of the screen on the right, with its own content
   re-centered inside that space — so anything still position:fixed to the
   viewport (the action bar, the toast) can align under it too.

   Centering note: a position:fixed element with both `left` and `right`
   set but no explicit `width` does NOT reliably auto-center via
   `margin: 0 auto` — per the CSS2.1 abs-position sizing algorithm, an
   'auto' width collapses those margins to 0 instead of splitting the
   leftover space. Giving it an explicit (calc'd) width first is what
   makes the auto margins actually take effect. */
@media (min-width: 900px) {
  body {
    display: flex;
  }

  .app {
    order: 2;
    flex: 1 1 auto;
    max-width: none;
    margin: 0;
    box-shadow: none;
    min-height: 100vh;
  }

  .nav-drawer {
    order: 1;
    position: sticky;
    top: 0;
    left: auto;
    transform: none;
    height: 100vh;
    box-shadow: none;
    border-right: 1px solid var(--line);
    border-left: 0;
    flex-shrink: 0;
  }

  .nav-drawer-backdrop {
    display: none !important;
  }

  .nav-toggle,
  #nav-drawer-close {
    display: none;
  }

  .app-bar {
    padding-left: 28px;
    padding-right: 28px;
  }

  .app-body {
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
  }

  .action-bar {
    left: 280px;
    right: 0;
    width: calc(100vw - 280px);
    max-width: 960px;
    margin: 0 auto;
  }

  .toast {
    left: calc(280px + (100vw - 280px) / 2);
  }

  /* Form rows that stack to 1-2 columns on mobile have enough room to sit
     on one line at desktop widths — cards read faster when the amounts
     line up side by side instead of scrolling down through a mobile-style
     stack. */
  .unit-card-body {
    grid-template-columns: repeat(5, 1fr);
  }

  .unit-card-body .full-width {
    grid-column: auto;
  }

  .expense-row-body {
    grid-template-columns: 1fr 160px 44px;
  }

  .expense-row-body .full-width {
    grid-column: auto;
  }

  .defaults-body {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}