/* ─── YF Responsive Styles ────────────────────────────────────────────────── */
/* Mobile-first responsive overrides for the Youth Finance SPA.              */
/* Uses !important to override React inline styles where necessary.          */

/* ─── Mobile: < 768px ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Grid overrides — force single column on mobile */
  .yf-grid-2,
  .yf-grid-3,
  .yf-grid-4 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Container padding reduction */
  .yf-container {
    padding: 12px !important;
  }

  /* Table horizontal scroll */
  .yf-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .yf-table-wrap table {
    min-width: 600px;
  }

  /* Controls — stack vertically */
  .yf-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .yf-controls > * {
    width: 100%;
  }

  /* Header — stack title and controls */
  .yf-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Modal — full width on mobile */
  .yf-modal {
    max-width: calc(100vw - 24px) !important;
    margin: 12px !important;
    border-radius: 12px !important;
  }

  /* Tab bar — scrollable on mobile */
  .yf-tab-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }

  .yf-tab-bar button {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  /* Report controls card — stack items */
  .yf-report-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .yf-report-controls > div {
    width: 100%;
  }

  .yf-report-controls select,
  .yf-report-controls input {
    width: 100% !important;
  }

  /* Pill/filter button groups — wrap */
  .yf-pill-group {
    flex-wrap: wrap !important;
  }

  /* Action buttons — full width */
  .yf-actions {
    flex-direction: column !important;
    width: 100%;
  }

  .yf-actions button {
    width: 100%;
    justify-content: center;
  }

  /* Source/event card grids — single column */
  .yf-card-grid {
    grid-template-columns: 1fr !important;
  }

  /* Source detail info grid — single column */
  .yf-info-grid {
    grid-template-columns: 1fr !important;
  }

  /* Settings form grid — single column */
  .yf-form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Filter panel grid — stack on mobile */
  .yf-filter-grid {
    grid-template-columns: 1fr !important;
  }

  /* Top bar export buttons — stack */
  .yf-top-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  /* Year selector — keep inline but compact */
  .yf-year-selector {
    justify-content: center;
  }

  /* Toggle group — don't shrink */
  .yf-toggle-group {
    align-self: stretch;
    display: flex !important;
  }

  .yf-toggle-group button {
    flex: 1;
    text-align: center;
  }

  /* Pagination — stack on very small screens */
  .yf-pagination {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
  }

  /* Detail header — stack on mobile */
  .yf-detail-header {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Summary cards text — slightly smaller on mobile */
  .yf-kpi-value {
    font-size: 22px !important;
  }

  /* Chart legend — wrap */
  .yf-chart-legend {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Hamburger is managed by React — these are just safety fallbacks */
  .yf-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
  }

  /* Form row with two fields — stack */
  .yf-form-row {
    flex-direction: column !important;
    gap: 0 !important;
  }

  .yf-form-row > div {
    flex: none !important;
    width: 100% !important;
  }

  /* Budget chart view — reduce padding */
  .yf-chart-row .yf-chart-values {
    font-size: 11px !important;
  }
}

/* ─── Tablet: 769px - 1024px ──────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .yf-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .yf-grid-2 {
    grid-template-columns: 1fr !important;
  }

  .yf-container {
    padding: 20px !important;
  }
}

/* ─── Desktop: > 1024px — no overrides needed, default styles apply ──────── */