@media (max-width: 640px) {
  /* Keep expanded mobile form fields aligned to the same full width. */
  .mobile-details-fields {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .mobile-details-fields .variable-expense-form-field,
  .mobile-details-fields .date-field,
  .mobile-details-fields .subcategory-field,
  .mobile-row-editing-ready .variable-card tbody tr.is-mobile-row-open .description-cell,
  .mobile-row-editing-ready .variable-card tbody tr.is-mobile-row-open .amount-cell,
  .mobile-row-editing-ready .variable-card tbody tr.is-mobile-row-open .budget-cell,
  .mobile-row-editing-ready .variable-card tbody tr.is-mobile-row-open .liquidity-cell {
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
  }

  .mobile-details-fields .variable-expense-form-input,
  .mobile-row-editing-ready .variable-card tbody tr.is-mobile-row-open .cell-input,
  .mobile-row-editing-ready .variable-card tbody tr.is-mobile-row-open .amount-editor {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Prevent native mobile date controls from exceeding their grid column. */
  .variable-expense-form-grid .date-field {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .variable-expense-form-grid input[type="date"] {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .tracker-column {
    display: contents !important;
  }

  /* Keep collapsed totals close to the accordion arrow without overlapping it. */
  .tracker-grid .finance-card:not(.is-mobile-open) > .card-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 18px;
    padding-inline-start: 6px;
    padding-inline-end: 56px;
  }

  .tracker-grid .finance-card:not(.is-mobile-open) > .card-heading > div {
    min-width: 0;
  }

  .tracker-grid .finance-card > .card-heading .total-badge {
    margin-inline-start: 0;
    white-space: nowrap;
    font-size: 1.28rem;
    font-weight: 800;
  }

  /* Match the monthly-summary amount to the visual weight of the other totals. */
  .tracker-grid .summary-card .status-amount {
    font-size: 1.28rem;
    font-weight: 800;
  }

  /* Closed table rows should also feel less cramped before the user opens them. */
  .tracker-grid tbody tr[data-id]:not(.is-mobile-row-open) {
    column-gap: 18px !important;
  }

  .tracker-grid tbody tr[data-id]:not(.is-mobile-row-open) > td {
    padding-inline: 12px !important;
  }
}

/* No allocations means there is no budget activity to inspect. */
#budgetActivityButton[aria-label="פירוט פעולות תקציב"] {
  display: none !important;
}

.budget-actions-links:has(#budgetActivityButton[aria-label="פירוט פעולות תקציב"]) {
  grid-template-columns: 1fr !important;
}

/*
 * Desktop layout: restore the stable grid model used before tracker-column
 * wrappers were introduced. display:contents makes the existing wrappers
 * transparent to the grid, so every finance card is positioned directly by
 * the dashboard grid again.
 */
@media (min-width: 641px) {
  .dashboard {
    overflow-x: auto;
  }

  .tracker-grid {
    display: grid !important;
    min-width: 1080px !important;
    grid-template-columns: minmax(610px, 1.14fr) minmax(438px, 0.86fr) !important;
    grid-template-areas:
      "fixed income"
      "variable savings"
      "variable credit"
      "variable checking"
      "variable summary" !important;
    align-items: stretch !important;
    gap: 26px 32px !important;
  }

  .tracker-column {
    display: contents !important;
  }

  .fixed-card {
    grid-area: fixed !important;
  }

  .variable-card {
    grid-area: variable !important;
  }

  .income-card {
    grid-area: income !important;
  }

  :is(.savings-card, .investments-card) {
    grid-area: savings !important;
  }

  .credit-card {
    grid-area: credit !important;
  }

  .checking-card {
    grid-area: checking !important;
  }

  .summary-card {
    grid-area: summary !important;
  }

  .tracker-grid .finance-card {
    position: relative !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    align-self: stretch !important;
    transform: none !important;
  }
}

/* Credit used amount is money that will leave the account, so display it as an expense. */
#creditBadge,
#creditAmountInput,
label[for="creditAmountInput"] .credit-balance-input-wrap > span {
  color: var(--red) !important;
}