/* ============================================
   RESPONSIVE LAYOUT - Progressive Scaling
   Breakpoints: Mobile (<768px), Tablet (768-1023px), Desktop (1024-1439px), Large (≥1440px)
   ============================================ */

/* Base Variables */
:root {
  --container-max-width: 100%;
  --content-padding: 16px;
  --card-columns: 1;
}

/* ============================================
   MOBILE (< 768px) - iPhone-like
   ============================================ */
@media (max-width: 767px) {
  :root {
    --container-max-width: 100%;
    --content-padding: 16px;
    --card-columns: 1;
  }
  
  /* Actions layout handled by actions-responsive.css */
  
  /* Constrain to iPhone width when detected as mobile */
  html[data-device="mobile"] body {
    max-width: var(--max-mobile-width, 100%);
    margin: 0 auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }
  
  /* Full-width sheets on mobile */
  .slide-up-sheet .sheet-content {
    border-radius: 16px 16px 0 0;
    max-height: 95vh;
  }
}

/* ============================================
   TABLET (768px - 1023px) - Expanded cards
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --container-max-width: 720px;
    --content-padding: 24px;
    --card-columns: 2;
  }
  
  /* Just constrain width on tablet, keep mobile layout */
  .view-content {
    max-width: var(--container-max-width);
    margin: 0 auto;
  }
  
  /* Actions layout handled by actions-responsive.css */
}

/* ============================================
   DESKTOP (1024px - 1439px) - Multi-column layout
   ============================================ */
@media (min-width: 1024px) and (max-width: 1439px) {
  :root {
    --container-max-width: 960px;
    --content-padding: 32px;
    --card-columns: 3;
  }
  
  /* Overview View - Keep mobile layout, just constrain width */
  #overview-view .view-content {
    max-width: var(--container-max-width);
    margin: 0 auto;
  }
  
  /* Make quick stats 2-column on desktop */
  #overview-view .quick-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  /* Actions layout handled by actions-responsive.css */
  
  /* Money View - Keep mobile layout, just constrain width */
  #money-view .view-content {
    max-width: var(--container-max-width);
    margin: 0 auto;
  }
  
  /* Tenders View */
  #tenders-view .view-content {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding);
  }
}

/* ============================================
   LARGE DESKTOP (≥ 1440px) - Dashboard layout
   ============================================ */
@media (min-width: 1440px) {
  :root {
    --container-max-width: 1280px;
    --content-padding: 40px;
    --card-columns: 4;
  }
  
  /* Overview View - Keep mobile layout, just constrain width */
  #overview-view .view-content {
    max-width: var(--container-max-width);
    margin: 0 auto;
  }
  
  /* Make quick stats 2-column on large desktop */
  #overview-view .quick-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  /* Actions layout handled by actions-responsive.css */
  
  /* Money View - Keep mobile layout, just constrain width */
  #money-view .view-content {
    max-width: var(--container-max-width);
    margin: 0 auto;
  }
  
  /* Tenders View */
  #tenders-view .view-content {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding);
  }
}

/* ============================================
   COMMON RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Cards scale appropriately */
@media (min-width: 768px) {
  .stat-card, .account-card, .category-row {
    transition: all 0.2s;
  }
  
  .stat-card:hover, .account-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  }
}

/* Tab navigation adjustments */
@media (min-width: 1024px) {
  .tab-nav {
    max-width: var(--container-max-width);
    margin: 0 auto;
  }
}

/* Header responsive */
@media (min-width: 768px) {
  .view-header {
    padding: 0 var(--content-padding);
  }
}

/* Sheet widths on larger screens */
@media (min-width: 768px) {
  .slide-up-sheet .sheet-content {
    max-width: 600px;
    margin: 0 auto;
    border-radius: 16px;
  }
  
  .proposed-actions-sheet {
    max-width: 500px;
  }
  
  .financial-drawer .sheet-content {
    max-width: 700px;
  }
}

/* Print styles */
@media print {
  .tab-nav,
  .header-actions,
  .discover-button,
  .profile-button {
    display: none !important;
  }
  
  .view-content {
    max-width: 100% !important;
    padding: 0 !important;
  }
}