/* ============================================================
   Mobile Responsive Stylesheet
   Covers all tabs at ≤ 520px (all phones) and ≤ 380px (small phones)
   ============================================================ */

/* ── Login Screen ─────────────────────────────────────────── */
@media (max-width: 520px) {
  .login-logo {
    font-size: 48px;
    letter-spacing: -1px;
  }

  .login-btn {
    min-width: 0;
    width: 100%;
    max-width: 320px;
    padding: 14px 24px;
  }

  .login-subtitle {
    font-size: 14px;
    max-width: 200px;
  }

  .login-error {
    max-width: 90vw;
  }
}

@media (max-width: 380px) {
  .login-logo {
    font-size: 40px;
  }

  .login-btn {
    padding: 13px 20px;
    font-size: 14px;
  }
}

/* ── Shell & Navigation ───────────────────────────────────── */
@media (max-width: 520px) {
  /* Tighter content padding */
  .app-content {
    padding: calc(var(--spacing) * 1.5);
  }

  /* Tighter header padding */
  .app-header {
    padding: 0 calc(var(--spacing) * 1.5);
  }

  /* Tab bar stays at top — reduce side padding and font */
  .tab-list {
    padding: 0 calc(var(--spacing) * 0.5);
  }

  .tab-btn {
    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 1.25);
    font-size: 0.82rem;
  }

  /* Section headings slightly smaller */
  .section-heading {
    font-size: 1.05rem;
  }
}

/* ── Cards & Modal ────────────────────────────────────────── */
@media (max-width: 520px) {
  /* Slightly tighter card padding on mobile */
  .card {
    padding: calc(var(--spacing) * 2);
  }

  /* Modal: use almost full screen width */
  .modal-overlay {
    padding: calc(var(--spacing) * 0.75);
    align-items: flex-end; /* sheet slides from bottom */
  }

  .modal {
    max-width: 100%;
    border-radius: 16px 16px 0 0;  /* bottom-sheet style */
    max-height: 92vh;
  }

  /* Slightly larger tap target for modal close button */
  .modal-close {
    padding: 8px 12px;
  }
}

/* ── Buttons ──────────────────────────────────────────────── */
@media (max-width: 520px) {
  /* Minimum 44px tap target height */
  .btn {
    padding: calc(var(--spacing) * 1.25) calc(var(--spacing) * 2);
  }

  .btn-sm {
    padding: 6px 12px;
  }
}

/* ── Obligations Tab ──────────────────────────────────────── */
@media (max-width: 520px) {
  /* Header: stack "إضافة" button below title on very small screens */
  .obligations-header {
    flex-wrap: wrap;
    gap: var(--spacing);
  }

  /* Filter chips: horizontal scroll instead of wrapping to multiple rows */
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 6px;
  }
  .filter-bar::-webkit-scrollbar { display: none; }

  /* Obligation card amounts: tighter on mobile */
  .obligation-amount-item {
    min-width: 80px;
  }

  /* Action buttons: wrap if needed */
  .obligation-card-actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Kind selector in add modal: single column */
  .kind-selector {
    grid-template-columns: 1fr;
  }

  /* Segmented control: allow scroll on mobile */
  .segmented-control {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .segmented-control::-webkit-scrollbar { display: none; }
  .seg-btn {
    min-width: 56px;
    flex-shrink: 0;
  }
}

/* ── History Tab ──────────────────────────────────────────── */
@media (max-width: 520px) {
  /* Stack selects and status chips vertically */
  .history-filters {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing);
  }

  .history-filters-selects {
    flex-direction: column;
    gap: var(--spacing);
    width: 100%;
  }

  /* Full-width selects */
  .select-sm {
    width: 100%;
    min-width: unset;
  }

  /* Status chips in history: scrollable row */
  .history-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .history-filter-bar::-webkit-scrollbar { display: none; }

  /* Hide some table columns on tiny screens — keep key columns */
  .history-table {
    font-size: 0.8rem;
  }

  .history-table th,
  .history-table td {
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 1.25);
  }

  /* Record count footer */
  .table-count {
    font-size: 0.75rem;
    padding: var(--spacing) calc(var(--spacing) * 1.25);
  }
}

/* ── Calendar Tab ─────────────────────────────────────────── */
@media (max-width: 520px) {
  /* Tighter gap between cells */
  .cal-grid {
    gap: 2px;
  }

  /* Smaller day numbers */
  .cal-day-number {
    font-size: 0.7rem;
  }

  /* Smaller header letters (س ح ن …) */
  .cal-header-cell {
    font-size: 0.65rem;
    padding: 4px 0;
  }

  /* Dot indicator */
  .cal-dot {
    width: 4px;
    height: 4px;
    bottom: 3px;
  }

  /* Today ring */
  .cal-cell-today .cal-day-number {
    width: 24px;
    height: 24px;
  }

  /* Navigation buttons */
  .cal-nav-btn {
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
  }

  .cal-month-title {
    font-size: 0.9rem;
  }

  /* Legend: smaller */
  .cal-legend {
    gap: calc(var(--spacing) * 2);
    font-size: 0.8rem;
  }

  /* Detail panel items */
  .cal-detail-item {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* ── Statistics Tab ───────────────────────────────────────── */
@media (max-width: 520px) {
  /* Stats summary: 2 columns instead of 3 */
  .stats-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Stats comparison: already handled at 500px */

  /* Timeline: narrower label so track has room */
  .timeline-label {
    width: 100px;
    font-size: 0.775rem;
  }

  /* Timeline row */
  .timeline-row {
    gap: var(--spacing);
  }

  /* Chart canvas: full width naturally */
  .stats-canvas {
    height: 160px;
  }

  /* Donut chart smaller */
  .dash-donut-wrap {
    width: 130px;
  }

  /* Heaviest obligation header: stack */
  .stats-heaviest-header {
    flex-direction: column;
    gap: var(--spacing);
  }

  .stats-heaviest-amount {
    font-size: 0.95rem;
  }

  /* Print export button: smaller */
  .obligations-header .btn-secondary {
    font-size: 0.82rem;
    padding: 5px 12px;
  }
}

/* ── Dashboard Tab ────────────────────────────────────────── */
@media (max-width: 520px) {
  /* Greeting banner: stack icon below text */
  .dash-greeting {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing);
    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
  }

  .dash-greeting-icon { display: none; } /* clean on mobile */

  /* Summary cards: 2 columns */
  /* (already: 4→2 at 800px, 2→1 at 480px — both handled) */

  /* Two-column rows: already stack at 640px */

  /* Timeline rows: smaller text and tighter */
  .dash-timeline-row {
    font-size: 0.8rem;
    gap: var(--spacing);
  }

  .dash-tl-date { display: none; } /* remove date col, keep name+amount+badge */

  /* Donut + recent: already stack at 640px */

  /* Year summary */
  .dash-year-summary {
    font-size: 0.8rem;
  }

  /* Salafah items */
  .dash-salafah-header {
    gap: var(--spacing);
  }

  /* Nearest end card: stack header */
  .dash-nearest-card .section-subheading { display: none; }
}

/* ── Advisor Tab ──────────────────────────────────────────── */
@media (max-width: 520px) {
  /* Indicators: already stack at 600px */

  /* Profile stats: tighter spacing */
  .advisor-profile-stats {
    gap: var(--spacing);
  }

  .advisor-stat-value {
    font-size: 0.8rem;
  }

  /* Tool badge: smaller */
  .advisor-tool-badge {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
    flex-shrink: 0;
  }

  /* Eval preview rows: stack */
  .eval-preview-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
  }
  .eval-preview-row:last-child { border-bottom: none; }

  /* Simulator table rows: smaller */
  .sim-row {
    font-size: 0.8rem;
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 1.25);
  }

  .sim-label { flex: 1; min-width: 0; }

  /* Ask chat: full height */
  .ask-chat {
    max-height: 260px;
  }

  /* Chat bubbles: wider on mobile */
  .chat-bubble {
    max-width: 95%;
  }

  /* Radio group: wrap */
  .advisor-radio-group {
    gap: calc(var(--spacing) * 1.5);
    flex-wrap: wrap;
  }

  /* Daily tip card */
  .advisor-tip-header {
    flex-wrap: wrap;
  }

  /* Breakeven rows */
  .breakeven-row-meta {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Forecast/timeline items */
  .forecast-item {
    padding: calc(var(--spacing) * 1.5);
  }
}

/* ── Advisor: Onboarding ──────────────────────────────────── */
@media (max-width: 520px) {
  .advisor-onboarding {
    flex-direction: column;
    align-items: flex-start;
  }

  .advisor-onboarding .btn {
    width: 100%;
  }
}

/* ── Very Small Phones (≤ 380px) ─────────────────────────── */
@media (max-width: 380px) {
  .app-content {
    padding: var(--spacing);
  }

  /* Stats summary: 1 column */
  .stats-summary-grid {
    grid-template-columns: 1fr;
  }

  /* Obligation actions: each button full row */
  .obligation-card-actions .btn {
    flex: 1;
    justify-content: center;
  }

  /* Form rows collapse */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Split buttons in calculator: tighter */
  .split-btn {
    padding: 3px 8px;
    font-size: 0.8rem;
  }

  /* Badges: smaller */
  .badge {
    padding: 2px 7px;
    font-size: 0.72rem;
  }
}