/* ═══════════════════════════════════════════════
   LifeSync – responsive.css
   Mobile-first breakpoints & layout adjustments
   ═══════════════════════════════════════════════ */

/* ─── Tablet (≤ 1024px) ─── */
@media (max-width: 1024px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .dashboard-sidebar-right {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .progress-ring-card,
  .upcoming-card {
    flex: 1;
    min-width: 240px;
  }

  .weekly-grid {
    grid-template-columns: repeat(7, minmax(100px, 1fr));
    overflow-x: auto;
    padding-bottom: var(--space-sm);
  }
}

/* ─── Mobile (≤ 768px) ─── */
@media (max-width: 768px) {

  /* Hide desktop sidebar */
  .sidebar {
    transform: translateX(-100%);
    box-shadow: none;
    padding-top: max(env(safe-area-inset-top, 0px), var(--space-lg));
    padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--space-lg));
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  .sidebar-overlay { display: block; }
  .sidebar-overlay.hidden { display: none !important; }

  /* Show mobile menu button */
  .topbar-menu-btn { display: flex; }

  /* Main content — full width with safe area bottom */
  .main-content {
    margin-left: 0;
    padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px) + 24px);
  }

  /* Topbar adjustments for iPhone Notch (iPhone 11, X, 12, 13, 14, 15) */
  .topbar {
    height: auto;
    min-height: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
    padding-top: max(env(safe-area-inset-top, 0px), 14px);
    padding-bottom: 12px;
    padding-left: max(var(--space-md), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-md), env(safe-area-inset-right, 0px));
  }

  .topbar .quick-add-btn span { display: none; }
  .topbar .quick-add-btn { padding: 10px; border-radius: var(--radius-md); }

  .notif-dropdown {
    position: fixed;
    top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px) + 4px);
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
  }

  /* View padding */
  .view-container {
    padding: var(--space-md);
  }

  /* Show bottom nav */
  .mobile-bottom-nav { display: flex; }

  /* Stats: 2 columns on mobile */
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .stat-card { padding: var(--space-md); }
  .stat-value { font-size: 24px; }

  /* Dashboard */
  .dashboard-main { grid-template-columns: 1fr; }

  .dashboard-sidebar-right {
    flex-direction: column;
  }

  .progress-ring-card, .upcoming-card { width: 100%; }

  /* Weekly: horizontal scroll */
  .weekly-grid {
    grid-template-columns: repeat(7, 160px);
    overflow-x: auto;
    padding-bottom: var(--space-md);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .week-day-col {
    scroll-snap-align: start;
    min-height: 300px;
  }

  .calendar-period { font-size: 15px; }

  /* Monthly: smaller cells */
  .monthly-day { min-height: 60px; padding: 4px; }

  .monthly-day-num { font-size: 12px; width: 22px; height: 22px; }

  .monthly-task-dot { display: none; }

  /* Show only a count dot on mobile */
  .monthly-day-count {
    display: inline-block;
    font-size: 10px;
    color: var(--indigo-light);
    background: rgba(99,102,241,0.15);
    border-radius: var(--radius-full);
    padding: 1px 5px;
    margin-top: 2px;
  }

  /* Day panel: full screen on mobile */
  .day-panel {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border);
    top: auto; bottom: 0;
    height: 85vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* Forms */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Settings */
  .data-actions {
    flex-direction: column;
  }

  .data-actions button { width: 100%; justify-content: center; }

  /* Modal full width on mobile */
  .modal-overlay { padding: 0; align-items: flex-end; }

  .modal {
    max-width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: 90vh;
  }

  /* All tasks filter: horizontal scroll */
  .filter-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .filter-select { flex-shrink: 0; }

  /* Toast: bottom center on mobile */
  .toast-container {
    bottom: calc(var(--mobile-nav-h) + var(--space-md));
    right: var(--space-md);
    left: var(--space-md);
    align-items: center;
  }

  .toast { width: 100%; }
}

/* ─── Small Mobile (≤ 375px) ─── */
@media (max-width: 375px) {
  .stats-row {
    grid-template-columns: 1fr 1fr;
  }

  .stat-value { font-size: 20px; }
  .stat-label { font-size: 11px; }

  .topbar-title { font-size: 16px; }

  .monthly-weekday { font-size: 9px; }

  .mobile-nav-item span { font-size: 9px; }
}

/* ─── Large Screen (≥ 1440px) ─── */
@media (min-width: 1440px) {
  .view-container {
    padding: var(--space-xl) var(--space-2xl);
  }

  .stats-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ─── Touch Targets (accessibility) ─── */
@media (hover: none) and (pointer: coarse) {
  .task-checkbox {
    width: 24px; height: 24px;
  }

  .task-action-btn {
    width: 36px; height: 36px;
    opacity: 1;
  }

  .task-card:hover .task-actions { opacity: 1; }

  .mini-cal-day { padding: 7px 2px; }
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Print ─── */
@media print {
  .sidebar, .topbar, .mobile-bottom-nav,
  .toast-container, #confettiCanvas,
  .modal-overlay { display: none !important; }

  .main-content { margin-left: 0; }
  body { background: white; color: black; }
}