/* ============================================
   MONEY VIEW - RESPONSIVE LAYOUT
   ============================================ */

/* Mobile Layout (default) - Vertical Stack */
#money-view .money-main-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

#money-view .money-left-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  order: 1;
  /* Financial summary first */
}

#money-view #cash-flow-section {
  order: 2;
  /* Cash flow second (after financial summary) */
  width: 100%;
}

#money-view #expense-breakdowns {
  order: 3;
  /* Expense breakdowns third (after cash flow) */
  width: 100%;
}

#money-view #accounts-section {
  order: 4;
  /* Accounts last in mobile */
}

/* Financial summary - use default Quick Stats styling, no overrides */
#money-view .money-left-column {
  width: 100%;
}

#money-view #financial-summary {
  width: 100%;
}

#money-view .quick-stats-section {
  width: 100%;
}

#money-view .quick-stats-grid {
  width: 100%;
}

/* Desktop Layout (768px+) - Side by Side */
@media (min-width: 768px) {
  #money-view .view-content {
    max-width: 900px;
    padding: 24px;
    margin: 0 auto;
  }

  #money-view .money-main-content {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto auto;
    gap: 24px;
    align-items: start;
    justify-content: center;
    max-width: 840px;
    margin: 0 auto;
  }

  /* Row 1, col 1: financial summary */
  #money-view .money-left-column {
    max-width: 400px;
    width: 100%;
    grid-column: 1;
    grid-row: 1;
  }

  /* Ensure financial summary section fills the container */
  #money-view .quick-stats-section {
    width: 100%;
  }

  /* Row 1, col 2: accounts */
  #money-view #accounts-section {
    width: auto;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    overflow: hidden;
  }

  /* Make accounts section look like Overview card - Fixed height matching financial summary */
  #money-view #accounts-section .money-section {
    width: 240px;
    height: 336px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Keep header fixed at top */
  #money-view #accounts-section .collapsible-header {
    flex-shrink: 0;
  }

  /* Make accounts content scrollable when needed */
  #money-view #accounts-section .collapsible-content.expanded {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    padding-right: 4px;
    margin-top: 12px;
  }

  /* Custom scrollbar for accounts */
  #money-view #accounts-section .collapsible-content.expanded::-webkit-scrollbar {
    width: 6px;
  }

  #money-view #accounts-section .collapsible-content.expanded::-webkit-scrollbar-track {
    background: transparent;
  }

  #money-view #accounts-section .collapsible-content.expanded::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }

  #money-view #accounts-section .collapsible-content.expanded::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
  }

  /* Row 2: Cash Flow - explicit grid placement instead of order */
  #money-view #cash-flow-section {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: 100%;
  }

  /* Row 3: Expense Breakdowns - explicit grid placement instead of order */
  #money-view #expense-breakdowns {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: 100%;
  }
}

/* Larger screen sizes */
@media (min-width: 1024px) and (max-width: 1439px) {
  #money-view .view-content {
    max-width: 1000px;
  }

  #money-view .money-left-column {
    max-width: 450px;
  }

  #money-view #accounts-section .money-section {
    width: 260px;
    height: 364px;
  }
}

@media (min-width: 1440px) and (max-width: 1919px) {
  #money-view .view-content {
    max-width: 1100px;
  }

  #money-view .money-left-column {
    max-width: 500px;
  }

  #money-view #accounts-section .money-section {
    width: 280px;
    height: 392px;
  }
}

@media (min-width: 1920px) {
  #money-view .view-content {
    max-width: 1200px;
  }

  #money-view .money-left-column {
    max-width: 550px;
  }

  #money-view #accounts-section .money-section {
    width: 300px;
    height: 420px;
    /* Fixed height */
  }

  /* Cash Flow Section - Maintain full width span */
  #money-view #cash-flow-section {
    grid-column: 1 / -1;
    order: 3;
  }

  /* Expense Breakdowns - Maintain full width span */
  #money-view #expense-breakdowns {
    grid-column: 1 / -1;
    order: 4;
  }
}