/* Budgets page */

.budgets-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
}

.budgets-page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.budgets-page__header-mid {
  flex: 1 1 14rem;
  display: flex;
  justify-content: center;
  min-width: 0;
  order: 2;
}

.budgets-page__title {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: -0.02em;
  order: 1;
}

.budgets-page__header .transactions-add-btn {
  order: 3;
}

@media (max-width: 52rem) {
  .budgets-page__header-mid {
    flex: 1 1 100%;
    order: 4;
  }

  .budgets-page__header .transactions-add-btn {
    margin-inline-start: auto;
  }
}

.budgets-month-nav {
  display: flex;
  align-items: stretch;
  gap: 0.625rem;
  width: fit-content;
  max-width: min(100%, 28rem);
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  background-color: var(--color-card);
  border: 1px solid var(--color-divider);
  box-shadow: 0 2px 12px rgb(32 31 36 / 0.06);
  overflow: visible;
}

[data-theme="dark"] .budgets-month-nav {
  box-shadow: 0 4px 24px rgb(0 0 0 / 0.5);
}

.budgets-month-nav__year-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 0.25rem;
  flex-shrink: 0;
}

.budgets-month-nav__year-rule {
  width: 1px;
  flex: 1;
  min-height: 0.5rem;
  max-height: 1.25rem;
  background-color: var(--color-divider);
}

.budgets-month-nav__year {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-orientation: mixed;
}

/* Themed year picker (replaces native select) */
.budgets-year-picker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.budgets-month-nav__year-btn {
  margin: 0;
  padding: 0.2rem 0.2rem;
  max-width: 2.5rem;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  background-color: transparent;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-orientation: mixed;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.budgets-month-nav__year-btn:hover {
  color: var(--color-heading);
  background-color: rgb(255 255 255 / 0.06);
  border-color: var(--color-divider);
}

[data-theme="light"] .budgets-month-nav__year-btn:hover {
  background-color: rgb(32 31 36 / 0.05);
}

.budgets-month-nav__year-btn:focus {
  outline: none;
}

.budgets-month-nav__year-btn:focus-visible {
  outline: 2px solid var(--color-accent-green);
  outline-offset: 2px;
}

.budgets-month-nav__year-btn[aria-expanded="true"] {
  color: var(--color-heading);
  background-color: rgb(255 255 255 / 0.08);
  border-color: var(--color-divider);
}

[data-theme="light"] .budgets-month-nav__year-btn[aria-expanded="true"] {
  background-color: rgb(32 31 36 / 0.06);
}

.budgets-year-picker__dropdown {
  position: absolute;
  top: 50%;
  left: calc(100% + 0.45rem);
  transform: translateY(-50%);
  z-index: 30;
  min-width: 5.25rem;
  max-height: min(12rem, 42vh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.35rem;
  margin: 0;
  border-radius: 0.5rem;
  background-color: var(--color-card);
  border: 1px solid var(--color-divider);
  box-shadow:
    0 4px 16px rgb(0 0 0 / 0.25),
    0 0 0 1px rgb(255 255 255 / 0.04) inset;
  scrollbar-width: thin;
}

[data-theme="light"] .budgets-year-picker__dropdown {
  box-shadow:
    0 6px 24px rgb(32 31 36 / 0.12),
    0 0 0 1px rgb(32 31 36 / 0.06) inset;
}

.budgets-year-picker__dropdown::-webkit-scrollbar {
  width: 6px;
}

.budgets-year-picker__dropdown::-webkit-scrollbar-thumb {
  background-color: var(--color-divider);
  border-radius: 999px;
}

.budgets-year-picker__option {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.65rem;
  border: none;
  border-radius: 0.35rem;
  background-color: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-heading);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.budgets-year-picker__option:hover {
  background-color: rgb(255 255 255 / 0.07);
}

[data-theme="light"] .budgets-year-picker__option:hover {
  background-color: rgb(32 31 36 / 0.06);
}

.budgets-year-picker__option--selected {
  background-color: rgb(39 124 120 / 0.22);
  color: var(--color-accent-green);
}

[data-theme="light"] .budgets-year-picker__option--selected {
  background-color: rgb(39 124 120 / 0.14);
}

@media (max-width: 52rem) {
  .budgets-year-picker__dropdown {
    left: auto;
    right: calc(100% + 0.45rem);
    transform: translateY(-50%);
  }
}

.budgets-month-nav__main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  flex: 0 1 auto;
  min-width: 0;
}

.budgets-month-nav__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  padding: 0 0.125rem 0.05rem;
}

.budgets-month-nav__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.budgets-month-nav__legend-swatch {
  width: 0.45rem;
  height: 0.85rem;
  border-radius: 0.1rem 0.1rem 0 0;
  flex-shrink: 0;
}

.budgets-month-nav__legend-swatch--solid {
  background-color: var(--color-accent-green);
}

.budgets-month-nav__legend-swatch--soft {
  background: repeating-linear-gradient(
    -45deg,
    var(--color-accent-green),
    var(--color-accent-green) 2px,
    rgb(39 124 120 / 0.28) 2px,
    rgb(39 124 120 / 0.28) 4px
  );
}

.budgets-month-nav__strip {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.5rem;
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-bottom: 0.125rem;
}

.budgets-month-nav__strip::-webkit-scrollbar {
  height: 4px;
}

.budgets-month-nav__strip::-webkit-scrollbar-thumb {
  background-color: var(--color-divider);
  border-radius: 999px;
}

/*
  Month strip always has 7 buttons in the DOM (offsets −3…+3 from the selected month).
  On smaller viewports we hide the outer slots so fewer months appear; the center month
  stays aligned with the selected budget month (still slot index 3).
*/
@media (max-width: 56rem) {
  .month-nav-strip > .budgets-month-card:first-child,
  .month-nav-strip > .budgets-month-card:last-child {
    display: none;
  }
}

@media (max-width: 42rem) {
  .month-nav-strip > .budgets-month-card:nth-child(2),
  .month-nav-strip > .budgets-month-card:nth-child(6) {
    display: none;
  }
}

.budgets-month-card {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  min-width: 2.75rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0.5rem 0.25rem 0.5rem;
  border: 1px solid var(--color-divider);
  border-radius: 0.5rem;
  background-color: var(--color-subtle-fill);
  cursor: pointer;
  font-family: inherit;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.budgets-month-card:hover {
  border-color: var(--color-text-muted);
}

[data-theme="light"] .budgets-month-card:hover {
  background-color: rgb(32 31 36 / 0.04);
}

[data-theme="dark"] .budgets-month-card:hover {
  background-color: rgb(255 255 255 / 0.06);
}

.budgets-month-card:focus-visible {
  outline: 2px solid var(--color-accent-green);
  outline-offset: 2px;
}

.budgets-month-card--active {
  border-width: 2px;
  border-color: var(--color-accent-green);
  background-color: rgb(39 124 120 / 0.12);
  box-shadow: none;
}

[data-theme="dark"] .budgets-month-card--active {
  background-color: rgb(39 124 120 / 0.18);
}

.budgets-month-card__chart {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.25rem;
  height: 2.25rem;
  width: 100%;
  margin-bottom: 0.45rem;
}

.budgets-month-card__bar {
  width: 0.45rem;
  border-radius: 0.15rem 0.15rem 0 0;
  min-height: 3px;
  transition: height 0.25s ease;
}

.budgets-month-card__bar--solid {
  background-color: var(--color-accent-green);
}

.budgets-month-card__bar--soft {
  background: repeating-linear-gradient(
    -45deg,
    var(--color-accent-green),
    var(--color-accent-green) 2px,
    rgb(39 124 120 / 0.28) 2px,
    rgb(39 124 120 / 0.28) 4px
  );
}

.budgets-month-card--empty .budgets-month-card__chart {
  align-items: center;
  justify-content: center;
}

.budgets-month-card--empty .budgets-month-card__bar--solid,
.budgets-month-card--empty .budgets-month-card__bar--soft {
  height: 3px !important;
  width: 40%;
  border-radius: 999px;
  background: var(--color-text-muted);
  opacity: 0.55;
}

.budgets-month-card--empty .budgets-month-card__bar--soft {
  display: none;
}

.budgets-month-card__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: 0.02em;
}

.budgets-layout {
  display: grid;
  grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 56rem) {
  .budgets-layout {
    grid-template-columns: 1fr;
  }
}

.budgets-summary {
  padding: 1.5rem clamp(1rem, 3vw, 1.5rem);
  background-color: var(--color-card);
  border-radius: 0.75rem;
}

.budgets-summary__heading {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-heading);
}

.budgets-summary .budgets-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  justify-items: center;
  margin-bottom: 0;
}

.budgets-summary .budgets-summary-legend-block {
  width: 100%;
  justify-self: stretch;
  margin-top: 0;
}

.budgets-cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.budget-card {
  padding: 2rem;
  background-color: var(--color-card);
  border-radius: 0.75rem;
}

.budget-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.budget-card__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.budget-card__title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-heading);
}

.budget-card__menu-wrap {
  position: relative;
  flex-shrink: 0;
  z-index: 1;
}

.budget-card__menu-wrap.is-open {
  z-index: 30;
}

.budget-card__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  margin: -0.375rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.budget-card__menu:hover {
  background-color: var(--color-subtle-fill);
}

.budget-card__menu:focus-visible {
  outline: 2px solid var(--color-accent-green);
  outline-offset: 2px;
}

[data-theme="dark"] .budget-card__menu img {
  filter: brightness(0) saturate(0) invert(0.85);
}

.budget-card__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  min-width: 10.5rem;
  padding: 0.375rem;
  margin: 0;
  border-radius: 0.5rem;
  border: 1px solid var(--color-divider);
  background-color: var(--color-sidebar-bg);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
}

[data-theme="light"] .budget-card__dropdown {
  background-color: var(--color-card);
  box-shadow: 0 12px 32px rgb(32 31 36 / 0.12);
}

.budget-card__dropdown-item {
  display: block;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  text-align: left;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-heading);
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.budget-card__dropdown-item:hover {
  background-color: var(--color-subtle-fill);
}

.budget-card__dropdown-item:focus-visible {
  outline: 2px solid var(--color-accent-green);
  outline-offset: 0;
}

.budget-card__dropdown-item--danger {
  color: #e08e79;
}

[data-theme="light"] .budget-card__dropdown-item--danger {
  color: #b91c1c;
}

.budget-card__dropdown-sep {
  height: 1px;
  margin: 0.25rem 0;
  background-color: var(--color-divider);
  border: none;
}

.budget-delete-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.budget-delete-btn {
  width: 100%;
  padding: 1rem 1.25rem;
  border: none;
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.budget-delete-btn--danger {
  background-color: #c94736;
  color: #fff;
}

.budget-delete-btn--danger:hover {
  background-color: #b03d2e;
}

.budget-delete-btn--danger:focus-visible {
  outline: 2px solid var(--color-accent-green);
  outline-offset: 3px;
}

.budget-delete-btn--ghost {
  background-color: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-divider);
}

.budget-delete-btn--ghost:hover {
  background-color: var(--color-subtle-fill);
  color: var(--color-heading);
}

.budget-delete-btn--ghost:focus-visible {
  outline: 2px solid var(--color-accent-green);
  outline-offset: 3px;
}

.budget-card__max {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.budget-card__progress {
  position: relative;
  height: 0.5rem;
  margin-bottom: 1.25rem;
  border-radius: 999px;
  background-color: var(--color-body-bg);
  overflow: hidden;
}

.budget-card__progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  max-width: 100%;
  transition: width 0.2s ease;
}

.budget-card__stats {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.budget-card__stats-divider {
  width: 1px;
  background-color: var(--color-divider);
  align-self: stretch;
}

.budget-card__stat {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  min-width: 0;
}

.budget-card__stat-accent {
  width: 0.25rem;
  border-radius: 0.125rem;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 2.75rem;
}

.budget-card__stat--remaining .budget-card__stat-accent {
  background-color: var(--color-divider);
}

.budget-card__stat-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  min-width: 0;
}

.budget-card__stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.2;
}

.budget-card__stat-label {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.budget-card__latest {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: var(--color-body-bg);
}

.budget-card__latest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.budget-card__latest-header--link-only {
  justify-content: flex-end;
}

.budget-card__latest-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: 0.375rem;
  transition: color 0.15s ease;
}

.budget-card__latest-link:hover {
  color: var(--color-link-hover-text);
}

.budget-card__latest-link:focus-visible {
  outline: 2px solid var(--color-accent-green);
  outline-offset: 2px;
}

.budget-card__latest-link-icon {
  width: 0.5rem;
  height: 0.625rem;
  flex-shrink: 0;
}

[data-theme="dark"] .budget-card__latest-link-icon {
  filter: brightness(0) saturate(0) invert(0.72);
}

.budget-card__tx-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.budget-card__tx-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-divider);
}

.budget-card__tx-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.budget-card__tx-item:first-child {
  padding-top: 0;
}

.budget-card__tx-avatar-slot {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.budget-card__tx-avatar-slot > * {
  grid-area: 1 / 1;
}

.budget-card__tx-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
}

.budget-card__tx-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--color-tx-avatar-fallback-bg);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-heading);
}

.budget-card__tx-name {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.budget-card__tx-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
  flex-shrink: 0;
  text-align: right;
}

.budget-card__tx-amount {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-heading);
}

.budget-card__tx-date {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.budgets-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.budgets-error {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: var(--color-error-bg);
  color: var(--color-heading);
  font-size: 0.875rem;
}

/* Add budget modal — amount + theme */
.budget-max-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-divider);
  border-radius: 0.5rem;
  background-color: var(--color-body-bg);
}

.budget-max-input:focus-within {
  outline: 2px solid var(--color-accent-green);
  outline-offset: 2px;
}

.budget-max-input__prefix {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-heading);
}

.budget-max-input__control {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-heading);
}

.budget-max-input__control:focus {
  outline: none;
}

.budget-max-input__control::-webkit-outer-spin-button,
.budget-max-input__control::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.budget-max-input__control[type="number"] {
  appearance: textfield;
}

.budget-theme-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.budget-theme-swatch {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15);
}

[data-theme="light"] .budget-theme-swatch {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}

.budget-theme-row .transactions-select.tx-modal__select-full {
  flex: 1;
}

.modal-banner {
  padding: 0.75rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  background-color: var(--color-subtle-fill);
  color: var(--color-text-muted);
}

.modal-banner[hidden] {
  display: none !important;
}

select.transactions-select:disabled {
  opacity: 0.92;
  cursor: not-allowed;
  color: var(--color-heading);
}