/* ---------- Large desktop / wide screens ---------- */
@media (min-width: 1440px) {
  .app-shell {
    width: min(1320px, calc(100% - 48px));
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .app-shell {
    width: min(100% - 28px, 900px);
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .chart-card {
    min-height: 300px;
  }
}

@media (max-width: 800px) {
  .app-shell {
    width: min(100% - 20px, 680px);
    padding-top: 14px;
  }

  .dashboard-panel,
  .upload-panel {
    padding: 18px;
  }

  .summary-card strong {
    font-size: 1.7rem;
  }

  .chart-card {
    min-height: 280px;
  }

  .filter-bar {
    grid-template-columns: 1fr 1fr;
  }

  .filter-field-search {
    grid-column: 1 / -1;
  }
}

/* ---------- Small tablet / large phone: topbar starts to feel tight ---------- */
@media (max-width: 640px) {
  .topbar {
    flex-wrap: wrap;
    gap: 12px;
  }

  .user-menu {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ---------- Phone ---------- */
@media (max-width: 480px) {
  .app-shell {
    padding-top: 12px;
    padding-bottom: 32px;
  }

  .topbar {
    margin-bottom: 16px;
  }

  .brand {
    font-size: 1.1rem;
  }

  .brand-logo {
    height: 28px;
  }

  .section-heading h1,
  .section-heading h2 {
    font-size: 1.25rem;
  }

  .dashboard-panel,
  .upload-panel {
    padding: 16px;
    border-radius: var(--radius-md);
  }

  .upload-zone {
    padding: 32px 14px;
  }

  .chart-card {
    min-height: 240px;
  }

  .result-actions {
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .expense-row-view {
    flex-wrap: wrap;
  }

  .expense-row-edit {
    grid-template-columns: 1fr;
  }

  .filter-bar {
    grid-template-columns: 1fr;
  }

  .filter-field-search {
    grid-column: auto;
  }

  .filter-actions .button {
    width: auto;
    flex: 1 1 auto;
  }

  .auth-card {
    padding: 26px 20px;
  }
}

/* ---------- Very small phones ---------- */
@media (max-width: 360px) {
  .app-shell {
    width: calc(100% - 16px);
  }

  .summary-card strong {
    font-size: 1.5rem;
  }

  .section-icon {
    display: none;
  }
}

/* ---------- Touch devices: bigger tap targets ---------- */
@media (pointer: coarse) {
  .button {
    min-height: 44px;
  }

  .expense-row-actions .button {
    min-width: 44px;
    min-height: 44px;
  }

  .field input,
  .field select {
    min-height: 44px;
  }
}

/* ---------- Support devices with notches / home indicators ---------- */
@media (max-width: 480px) {
  .app-shell {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }
}