/* Final-load account and footer corrections kept separate from legacy CSS layers. */
.accounts-grid {
  align-items: stretch;
}

.accounts-grid > .empty-state {
  grid-column: 1 / -1;
}

.accounts-grid .account-card {
  min-width: 0;
  height: 100%;
}

.account-activity-ledger {
  margin-top: 18px;
}

.account-activity-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.account-activity-header h4,
.account-activity-header p {
  margin: 0;
}

.account-activity-header > span {
  color: var(--muted);
  font-size: 0.82rem;
}

.account-activity-list {
  display: grid;
  gap: 8px;
}

.account-activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.account-activity-row.is-reversed {
  opacity: 0.65;
}

.account-activity-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.account-activity-copy strong,
.account-activity-copy span {
  overflow-wrap: anywhere;
}

.account-activity-copy span {
  color: var(--muted);
  font-size: 0.82rem;
}

.account-activity-amount {
  white-space: nowrap;
}

.account-activity-amount.positive {
  color: var(--positive);
}

.account-activity-amount.negative {
  color: var(--danger);
}

.account-activity-reverse {
  min-width: 78px;
}

@media (max-width: 760px) {
  #accountsView .section-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  #accountsView .section-heading > div,
  #accountsView .section-heading > div > p {
    width: 100%;
    margin: 0;
    text-align: left;
  }

  #accountsView .section-heading .button {
    width: 100%;
  }

  #accountsView .accounts-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  #accountsView .account-card {
    min-height: 0;
    padding: 14px;
  }

  #accountsView .finance-card-header {
    align-items: start;
    gap: 12px;
  }

  #accountsView .finance-card-header .action-group {
    justify-content: flex-start;
    width: 100%;
  }

  #accountsView .card-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #accountsView .stat-box {
    min-width: 0;
    min-height: 0;
    padding: 10px;
  }

  #accountsView .empty-state {
    min-height: 0;
    padding: 26px 18px;
  }

  .account-activity-header {
    align-items: start;
  }

  .account-activity-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .account-activity-reverse {
    grid-column: 1 / -1;
    width: 100%;
  }
}