/* Override Pico's [hidden] — needed because author display: flex/grid beats UA stylesheet */
[hidden] { display: none !important; }

/* Reset Pico padding on semantic block elements used for layout */
section, aside, header, nav { padding: 0; margin: 0; }

/* Colours come in light/dark pairs. With no data-theme the OS preference decides,
   which is what light-dark() reads off color-scheme; the attribute pins it. */
:root {
  color-scheme: light dark;
  --sidebar-bg: light-dark(#24292f, #1c2128);
  --sidebar-text: light-dark(#c9d1d9, #adbac7);
  --sidebar-text-active: #ffffff;
  --sidebar-hover-bg: rgba(255,255,255,0.06);
  --sidebar-active-bg: rgba(255,255,255,0.1);
  --sidebar-active-border: #fd8c73;
  --sidebar-width: 240px;
  --header-height: 3rem;
  --content-bg: light-dark(#eff2f5, #22272e);
  --card-bg: light-dark(#ffffff, #2d333b);
  --balance-positive: light-dark(#1a7f37, #57ab5a);
  --balance-negative: light-dark(#d1242f, #e5534b);
  --balance-warning: light-dark(#9a6700, #d29922);
  --section-label: light-dark(#656d76, #768390);
  --text: light-dark(#1f2328, #cdd9e5);
  --text-muted: light-dark(#59636e, #909dab);
  --border: light-dark(#d1d9e0, #444c56);
  --border-subtle: light-dark(#e4e8ed, #373e47);
  --input-bg: light-dark(#ffffff, #22272e);
  --input-border: light-dark(#d1d9e0, #444c56);
  --row-hover: light-dark(#f6f8fa, #323942);
  --table-head-bg: light-dark(#f6f8fa, #343b43);
  --accent: light-dark(#0969da, #539bf5);
  --btn-bg: light-dark(#1f883d, #347d39);
  --btn-hover-bg: light-dark(#1a7f37, #46954a);
  --btn-border: light-dark(rgba(31,35,40,0.15), rgba(205,217,229,0.1));
  --btn-plain-bg: light-dark(#f6f8fa, #373e47);
  --btn-plain-hover-bg: light-dark(#eff2f5, #444c56);
  --radius: 6px;
}

[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--content-bg);
  color: var(--text);
}

/* ---- Forms ---- */
label { display: block; margin-bottom: 1rem; font-size: 0.9rem; font-weight: 500; color: var(--text-muted); }
input, select, textarea {
  display: block; width: 100%; margin-top: 0.3rem;
  padding: 0.5rem 0.75rem; font-size: 0.95rem; font-family: inherit;
  border: 1px solid var(--input-border); border-radius: var(--radius); background: var(--input-bg); color: inherit;
  outline: none; transition: border-color 0.15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px light-dark(rgba(9,105,218,0.25), rgba(83,155,245,0.25));
}
button {
  display: inline-block; padding: 0.5rem 1rem;
  font-size: 0.875rem; font-family: inherit; font-weight: 500; line-height: 1.4;
  border: 1px solid var(--btn-border); border-radius: var(--radius); cursor: pointer;
  background: var(--btn-bg); color: #fff; transition: background 0.1s;
}
button:hover { background: var(--btn-hover-bg); }
button.secondary { background: var(--btn-plain-bg); border-color: var(--border); color: var(--text); }
button.secondary:hover { background: var(--btn-plain-hover-bg); border-color: var(--section-label); }
button[type="submit"] { width: 100%; margin-top: 0.5rem; }
/* Opens the category dialog, so it is a button that has to read as the field it replaced. */
.category-field {
  display: block; width: 100%; margin-top: 0.3rem;
  padding: 0.5rem 0.75rem; font-size: 0.95rem; font-weight: 400; text-align: left;
  border: 1px solid var(--input-border); border-radius: var(--radius);
  background: var(--input-bg); color: var(--text);
}
.category-field:hover { background: var(--input-bg); border-color: var(--section-label); }

/* ---- App shell ---- */
#app-shell {
  height: 100vh;
}

/* ---- Sidebar (drawer overlay) ---- */
#app-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 200;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
}

#app-shell.sidebar-open #app-sidebar {
  transform: translateX(0);
}

#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0,0,0,0.35);
}

#app-shell.sidebar-open #sidebar-backdrop {
  display: block;
}

.sidebar-brand {
  padding: 1.25rem 1.25rem 0.75rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.sidebar-section-label {
  padding: 1rem 1.25rem 0.3rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--section-label);
}

.sidebar-nav {
  flex: 1;
}

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.25rem;
  font-size: 0.9rem;
  color: var(--sidebar-text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.1s;
}
.sidebar-link:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text-active);
  text-decoration: none;
}
.sidebar-link.active {
  background: var(--sidebar-active-bg);
  border-left-color: var(--sidebar-active-border);
  color: var(--sidebar-text-active);
}

.sidebar-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sidebar-footer button {
  width: 100%;
  font-size: 0.85rem;
  padding: 0.4rem 0.75rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--sidebar-text);
}
.sidebar-footer button:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text-active);
}

/* ---- App header ---- */
#app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding: 0 1rem;
  background: var(--content-bg);
  border-bottom: 1px solid var(--border);
}

#btn-menu {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem 0.4rem;
}

/* ---- Content area ---- */
#app-content {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Sticky under the header: the message has to survive the scroll to whichever
   section the failing action sits in. */
#error-banner {
  position: sticky;
  top: var(--header-height);
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--balance-negative);
  color: white;
  padding: 0.65rem 1.5rem;
  font-size: 0.9rem;
}

#btn-error-dismiss {
  flex: none;
  padding: 0 0.25rem;
  border: none;
  background: none;
  color: inherit;
  font-size: 1.15rem;
  line-height: 1;
}

#btn-error-dismiss:hover {
  background: none;
  opacity: 0.8;
}

.dialog-error {
  margin: 0 0 1rem;
  color: var(--balance-negative);
  font-size: 0.9rem;
}

.dialog-subject {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.dialog-hint {
  margin: -0.5rem 0 1rem;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* ---- Category picker ---- */
#dialog-category-picker article {
  max-width: 26rem;
}
#dialog-budget-category article,
#dialog-category-target article {
  max-width: 22rem;
}
.budget-category-numbers {
  margin: 1rem 0;
}
.budget-category-numbers > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border-subtle);
}
.budget-category-numbers > div:last-child { border-bottom: none; }
.budget-category-numbers dt {
  color: var(--text-muted);
  font-size: 0.85rem;
}
.budget-category-numbers dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
#budget-move-panel {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}

#category-picker-list {
  max-height: 50vh;
  overflow-y: auto;
  margin-top: 1rem;
}
.category-picker-group {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--section-label);
  padding: 0.75rem 0.5rem 0.3rem;
}
.category-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.5rem;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 400;
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--text);
}
.category-option:hover {
  background: var(--row-hover);
}
.category-option-current {
  color: var(--accent);
  font-weight: 600;
}

/* Auth screens — centered full page */
#app-shell.auth-mode #app-content {
  justify-content: center;
  align-items: center;
  background: var(--sidebar-bg);
}
#app-shell.auth-mode .auth-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 2rem 2.5rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}
#app-shell.auth-mode .auth-card h2 {
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
}

/* App screens */
.screen-content {
  padding: 2rem 2.5rem;
  max-width: 860px;
}

.screen-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 1.5rem;
  color: var(--text);
}

/* ---- Account list ---- */
.accounts-group {
  margin-bottom: 1.75rem;
}
.accounts-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--section-label);
  padding: 0 0 0.4rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.25rem;
}
.account-row {
  display: flex;
  align-items: center;
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.1s;
}
.account-row:hover {
  background: var(--row-hover);
}
.account-row:last-child {
  border-bottom: none;
}
.account-name {
  flex: 1;
  font-size: 0.95rem;
  color: var(--text);
}
.account-currency {
  font-size: 0.8rem;
  color: var(--section-label);
  margin-right: 1rem;
}
.account-balance {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--balance-positive);
  min-width: 5rem;
  text-align: right;
}
.account-balance.negative {
  color: var(--balance-negative);
}
.account-synced {
  font-size: 0.8rem;
  color: var(--section-label);
  text-align: right;
}

/* ---- People rows (household members, invites) ---- */
.people-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border-subtle);
}
.people-row:last-child {
  border-bottom: none;
}
.people-main {
  flex: 1;
  min-width: 0;
}
.people-name {
  font-size: 0.95rem;
  color: var(--text);
}
/* A long address has to wrap inside the column instead of pushing the button
   past the edge of the card. */
.people-sub {
  font-size: 0.8rem;
  color: var(--section-label);
  overflow-wrap: anywhere;
}
.people-row button {
  flex: none;
}

.accounts-add-btn {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
}

/* ---- Account detail panel ---- */
#account-detail {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
  border: 1px solid var(--border);
  max-width: 420px;
}
/* Sitting between two account rows rather than below the whole list. */
.accounts-group #account-detail {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}
#account-detail h3, #form-transaction h3 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
.detail-label {
  color: var(--section-label);
}
.detail-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.detail-actions button {
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
}

/* ---- Reconcile panel ---- */
#reconcile-panel {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
#reconcile-panel label {
  margin-bottom: 0.5rem;
}
.reconcile-option {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin-bottom: 0.25rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  background: var(--btn-plain-bg);
  border: 1px solid var(--border);
  color: var(--text);
}
.reconcile-option:hover {
  background: var(--btn-plain-hover-bg);
}
.reconcile-option .reconcile-option-type {
  color: var(--section-label);
}

/* Card forms */
#form-add-account, #form-transaction {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-top: 1rem;
  border: 1px solid var(--border);
  max-width: 420px;
}

.form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.form-actions button {
  flex: 1;
  width: auto;
  margin-top: 0;
}

.list-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.list-actions button {
  margin-top: 0;
}

.empty-note {
  color: var(--section-label);
  font-size: 0.9rem;
}

/* ---- Transaction list ---- */
.tx-day {
  padding: 1rem 0.5rem 0.4rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--section-label);
}
.tx-row {
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 0.1s;
}
.tx-row:hover {
  background: var(--row-hover);
}
.tx-row.tx-unreviewed {
  background: var(--row-hover);
  box-shadow: inset 3px 0 0 var(--accent);
}
.tx-main, .tx-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tx-meta {
  margin-top: 0.35rem;
}
.tx-payee, .tx-account {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tx-payee {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 500;
}
.tx-account {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.tx-note {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.tx-amount {
  font-weight: 600;
  white-space: nowrap;
}
.tx-amount.positive {
  color: var(--balance-positive);
}
/* Pico stretches every select to the full width of its label; a chip has to sit
   inline next to the account name instead. */
.tx-chip {
  display: inline-block;
  width: auto;
  max-width: 60%;
  margin: 0;
  padding: 0.15rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.4;
  border-radius: 999px;
  border-color: var(--border);
  background: var(--btn-plain-bg);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tx-chip:hover {
  background: var(--btn-plain-hover-bg);
}
.tx-chip-todo {
  border-color: var(--accent);
  color: var(--accent);
}
.tx-check-btn {
  padding: 0.1rem 0.45rem;
  margin: 0;
  width: auto;
  line-height: 1.2;
  font-size: 0.85rem;
  background: var(--btn-plain-bg);
  border-color: var(--btn-border);
  color: var(--text);
}
.tx-check-btn:hover {
  background: var(--btn-plain-hover-bg);
}

#transaction-review-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.6rem 0.9rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: 0.9rem;
}
#transaction-review-bar label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--text-muted);
}
#transaction-review-bar input {
  margin: 0;
}

/* Mounted under the edited row, the card needs the gap the row below it does not
   provide. */
#transaction-list #form-transaction {
  margin-bottom: 0.75rem;
}

@media (max-width: 640px) {
  .screen-content { padding: 1.5rem 1rem; }
}

/* ---- Category tree ---- */
#category-tree details {
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
#category-tree summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.5rem 0.35rem 0.75rem;
  background: var(--table-head-bg);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  list-style: none;
  cursor: pointer;
}
#category-tree summary::-webkit-details-marker { display: none; }
#category-tree summary::marker { display: none; }

/* Pico draws the chevron as ::after, which in a flex row lands at the far end. It belongs next to
   the name it opens, so it is moved to the front of the row. */
#category-tree summary::after {
  order: -1;
  margin-inline: 0 0.4rem;
  background-position: center;
}

/* The grip is held down and dragged, the cross deletes on a tap: a thumb must not be able to
   confuse the two. */
#category-tree summary .row-actions { gap: 0.75rem; }

#category-tree ul {
  list-style: none;
  padding: 0;
  margin: 0.15rem 0 0.4rem 0;
}
#category-tree li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
  padding: 0.2rem 0.5rem 0.2rem 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--card-bg);
  cursor: pointer;
}
#category-tree li:last-child { border-bottom: none; }

.row-name { flex: 1; min-width: 0; font-size: 0.9rem; }
.row-actions { display: flex; align-items: center; gap: 0.2rem; flex-shrink: 0; margin-left: 0.5rem; }

/* A target is a plan, not a number in a column: the amount reads first and the rule under it says
   which one it follows and how far it runs. */
.target-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 0.1rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--btn-plain-bg);
  font-size: 0.85rem;
  line-height: 1.2;
  text-align: right;
}
.target-chip small { font-size: 0.7rem; color: var(--text-muted); }
.target-chip-empty {
  border-style: dashed;
  background: none;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Sized for a thumb rather than a cursor: the arrows it replaced were the complaint. */
.row-grip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  align-self: stretch;
  min-height: 2.5rem;
  margin-left: 0.75rem;
  border-left: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.row-grip:active { cursor: grabbing; }

/* Pinned to the viewport while it is dragged, so it stays under the finger and out of the flow.
   The position comes from the inline style the drag writes. */
#category-tree .row-dragging {
  z-index: 100;
  opacity: 0.95;
  border-radius: var(--radius);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* The gap the row will drop into, which is the only thing that moves while dragging. */
#category-tree .row-placeholder {
  padding: 0;
  background: var(--row-hover);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

body.dragging { user-select: none; }
/* The group box is clipped for its rounded corners, which would cut a row off halfway to the group
   it is being dragged into. */
body.dragging #category-tree details { overflow: visible; }
.row-actions button {
  padding: 0.15rem 0.4rem;
  font-size: 0.8rem;
  line-height: 1;
  min-width: 1.6rem;
  background: var(--btn-plain-bg);
  border: 1px solid var(--border);
  color: var(--text);
}

.add-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem 0.6rem;
  background: var(--card-bg);
  align-items: center;
}
.add-row input {
  flex: 1; margin: 0; padding: 0.3rem 0.5rem; font-size: 0.85rem;
}
.add-row button {
  flex-shrink: 0; margin: 0; padding: 0.3rem 0.65rem; font-size: 0.85rem;
}

.add-group-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
}
.add-group-row input { flex: 1; margin: 0; font-size: 0.9rem; }
.add-group-row button { flex-shrink: 0; margin: 0; font-size: 0.9rem; }

/* ---- Budget screen ---- */
.budget-month-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.budget-month-nav button {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
}
#budget-month-label {
  font-size: 1rem;
  font-weight: 600;
  min-width: 11rem;
  text-align: center;
}
.budget-to-allocate-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.budget-to-allocate-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--section-label);
}
.budget-to-allocate-amount {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
}
.budget-to-allocate-amount.positive { color: var(--balance-positive); }
.budget-to-allocate-amount.negative { color: var(--balance-negative); }
#btn-fill-targets {
  margin-left: auto;
  width: auto;
}

#budget-category-list details {
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.budget-group-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  background: var(--card-bg);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  list-style: none;
  cursor: pointer;
}
.budget-group-row::-webkit-details-marker { display: none; }
.budget-group-row::marker { display: none; }
.budget-group-totals {
  display: flex;
  gap: 2rem;
  font-size: 0.85rem;
}
.budget-cat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.budget-cat-table thead tr {
  background: var(--table-head-bg);
}
.budget-cat-table th {
  padding: 0.3rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--section-label);
  text-align: right;
}
.budget-cat-table th:first-child { text-align: left; }
.budget-cat-table td {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  text-align: right;
}
.budget-cat-table td:first-child { text-align: left; }
.budget-cat-table tbody tr:last-child td { border-bottom: none; }
.budget-cat-name { cursor: pointer; }
.budget-cat-allocated { cursor: pointer; }
.budget-cat-allocated.underfunded { color: var(--balance-warning); }
.budget-target-bar {
  position: relative;
  display: block;
  height: 2px;
  margin-top: 0.2rem;
  background: var(--border-subtle);
  border-radius: 1px;
}
.budget-target-mark {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 6px;
  margin-left: -1px;
  background: var(--text-muted);
}
.budget-target-bar > span {
  display: block;
  height: 100%;
  border-radius: 1px;
  background: var(--balance-positive);
}
.budget-cat-allocated.underfunded .budget-target-bar > span { background: var(--balance-warning); }
.budget-cat-target { color: var(--text-muted); }
.budget-cat-available { cursor: pointer; }
.budget-cat-available.positive { color: var(--balance-positive); }
.budget-cat-available.negative { color: var(--balance-negative); }
.budget-alloc-input {
  width: 6rem;
  padding: 0.15rem 0.3rem;
  font-size: 0.88rem;
  text-align: right;
  display: inline-block;
}
.positive { color: var(--balance-positive); }
.negative { color: var(--balance-negative); }

/* ---- Settings ---- */
.sidebar-link-standalone {
  margin-top: 1rem;
}
.settings-section {
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.settings-section-title {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
}
.settings-section form {
  margin: 1rem 0 0;
}
.settings-section button {
  width: auto;
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
}
.settings-section-note {
  margin: 0 0 1rem;
  color: var(--section-label);
  font-size: 0.9rem;
}
.settings-section-danger .settings-section-title {
  color: var(--balance-negative);
}