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

/* On desktop the FAB wrapper is transparent — its buttons flow inline in the
   toolbar exactly as before. It only becomes a fixed pair on mobile (below). */
.yf-fab-row { display: contents; }

/* ─── 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, unless the group opts into a
     single-line horizontal scroll row (.yf-filter-scroll) */
  .yf-pill-group:not(.yf-filter-scroll) {
    flex-wrap: wrap !important;
  }

  /* Scroll rows bleed to the screen edges so pills glide off at the edge of
     the phone instead of hard-clipping mid-air at the page gutter. The 24px
     = 12px .yf-container padding + 12px content padding (yf-app.js s.content)
     — keep all three in step. */
  .yf-filter-scroll {
    width: calc(100% + 48px) !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    scroll-padding-left: 24px;
  }

  /* Action buttons — filter-ish buttons become a horizontally scrollable
     chip row; the Add / Quick Add buttons float (see .yf-fab-row below). */
  .yf-actions {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .yf-actions::-webkit-scrollbar { display: none; }

  .yf-actions > button {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    border-radius: 999px !important;
    justify-content: center;
  }

  /* Floating action buttons: pulled out of the scroll row, above the bottom
     tab bar, in the thumb zone. */
  .yf-fab-row {
    display: flex !important;
    position: fixed;
    right: 16px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    gap: 10px;
    align-items: center;
    z-index: 50;
  }

  .yf-fab-row button {
    width: auto !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 20px rgba(201, 154, 46, 0.35);
  }

  .yf-fab-primary {
    padding: 14px 22px !important;
    font-weight: 700;
  }

  .yf-fab-secondary {
    padding: 12px 16px !important;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35) !important;
  }

  /* 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. Children must also drop any
     `grid-column: span 2` (the search field carries one inline), otherwise
     the span forces an implicit second column and crushes the first. */
  .yf-filter-grid {
    grid-template-columns: 1fr !important;
  }
  .yf-filter-grid > * {
    grid-column: auto !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;
  }

  /* Events calendar — tighter day cells on phones */
  .yf-cal-day {
    min-height: 56px !important;
    padding: 2px !important;
  }

  .yf-cal-day button {
    font-size: 9px !important;
    padding: 1px 3px !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 ──────── */