/* ════════════════════════════════════════════════════════════════
   Nudge — Responsive / Mobile-First Styles
   Base styles in styles.css are for mobile.
   These media queries enhance layout on larger screens.
   ════════════════════════════════════════════════════════════════ */

/* ── Mobile base tweaks (< 480px) ──────────────────────────────── */
@media (max-width: 480px) {
  /* Stack form rows on very small screens */
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Full-width action buttons on mobile */
  .detail-actions .btn {
    width: 100%;
  }

  .form-actions {
    flex-direction: column-reverse;
  }

  .form-actions .btn {
    width: 100%;
  }

  /* Compact stats on small screens */
  .analytics-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Smaller invoice card amounts */
  .invoice-amount {
    font-size: 16px;
  }

  /* Full-width buttons on onboarding */
  .onboarding-container .btn-large {
    width: 100%;
  }

  /* Modal padding adjustments */
  .modal {
    margin: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: none;
  }

  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  /* Steps wrap nicely on mobile */
  .steps {
    flex-direction: column;
    gap: 12px;
  }

  .step-arrow {
    transform: rotate(90deg);
    font-size: 14px;
  }

  /* Tab labels shorter on very small screens */
  .tab {
    padding: 10px 10px;
    font-size: 14px;
  }
}

/* ── Tablet (480px – 768px) ─────────────────────────────────────── */
@media (min-width: 480px) {
  .onboarding-container {
    padding: 48px 32px;
  }

  .auth-container {
    padding: 40px 32px;
  }

  /* Horizontal detail actions on tablet+ */
  .detail-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .detail-actions .btn {
    flex: 1;
    min-width: 120px;
  }

  /* Show steps horizontally */
  .steps {
    flex-direction: row;
  }

  .step-arrow {
    transform: none;
  }
}

/* ── Desktop (768px+) ───────────────────────────────────────────── */
@media (min-width: 768px) {
  /* Center the auth screen vertically */
  #screen-auth {
    justify-content: center;
    min-height: 100vh;
    background: var(--color-surface);
  }

  .auth-container {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    max-width: 440px;
    padding: 40px;
  }

  /* Center onboarding */
  #screen-onboarding {
    justify-content: center;
    background: var(--color-surface);
  }

  .onboarding-container {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 48px 40px;
  }

  /* Wider page containers on desktop */
  .page-container {
    padding: 24px;
  }

  /* Analytics always shows as 4 columns on desktop */
  .analytics-bar {
    grid-template-columns: repeat(4, 1fr);
    padding: 24px 24px 0;
  }

  /* Tab bar padding */
  .tab-bar {
    padding: 12px 24px 0;
  }

  /* Invoice list padding */
  .invoice-list {
    padding: 16px 24px;
  }

  /* Add invoice bar */
  .add-invoice-bar {
    padding: 0 24px 32px;
  }

  .add-invoice-bar .btn {
    min-width: 220px;
  }

  /* Invoice card actions on one line */
  .invoice-card-actions {
    flex-wrap: nowrap;
  }

  /* Side-by-side reminder type and date */
  .reminder-item {
    padding: 14px 16px;
  }

  /* Topbar spacing */
  .topbar {
    padding: 12px 24px;
  }

  /* Show username and full button labels on tablet+ where there's room */
  .topbar-user {
    display: inline-block;
  }

  .label-short { display: none; }
  .label-long  { display: inline; }

  /* Page header spacing */
  .page-header {
    padding: 14px 24px;
  }

  /* Toast at bottom center, not too wide */
  .toast {
    min-width: 280px;
  }

  /* Form sections more spacious */
  .form-section {
    padding: 20px;
  }

  /* Settings section spacing */
  .settings-section {
    padding: 20px;
  }

  /* Detail card spacing */
  .detail-card .detail-row {
    padding: 14px 20px;
  }

  .next-reminder-box {
    padding: 14px 18px;
  }
}

/* ── Large desktop (1024px+) ────────────────────────────────────── */
@media (min-width: 1024px) {
  /* The max-width containers already handle this via page-container max-width */

  /* Onboarding hero larger */
  .onboarding-headline {
    font-size: 36px;
  }
}

/* ── Print styles ───────────────────────────────────────────────── */
@media print {
  .topbar,
  .tab-bar,
  .add-invoice-bar,
  .detail-actions,
  .btn-back,
  #toast,
  #modal-overlay {
    display: none !important;
  }
}

/* ── Dark mode (respects system preference) ─────────────────────── */
@media (prefers-color-scheme: dark) {
  /* Optional future enhancement — not implemented in MVP */
  /* Uncomment to enable basic dark mode support */
  /*
  :root {
    --color-bg:         #1c1c1e;
    --color-surface:    #2c2c2e;
    --color-border:     #3a3a3c;
    --color-text:       #f2f2f7;
    --color-text-muted: #aeaeb2;
    --color-text-light: #636366;
  }
  */
}