/* ============================================================
   MOBILE & RESPONSIVE OVERRIDES
   ============================================================ */

/* Small phones (360px) */
@media (max-width: 374px) {
  .stat-grid { gap: 8px; }
  .stat-card { padding: 12px 10px; }
  .stat-value { font-size: 19px; }
  .quick-actions { gap: 8px; }
  .quick-action { padding: 12px 6px; font-size: 11px; }
  .quick-action .qa-icon { width: 40px; height: 40px; }
  .section { padding: 12px; }
  .btn { padding: 12px 18px; font-size: 14px; }
}

/* Standard phones (375-412px) - primary design target */
@media (min-width: 375px) and (max-width: 428px) {
  /* Default styles apply */
}

/* Large phones / small tablets */
@media (min-width: 429px) and (max-width: 767px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .quick-actions { grid-template-columns: repeat(5, 1fr); }
}

/* Tablets */
@media (min-width: 768px) {
  .app-container { 
    max-width: 680px;
    border-left: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
  }
  .modal-box { 
    border-radius: var(--radius-xl);
    max-width: 480px;
    margin: auto;
  }
  .modal-overlay { align-items: center; }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .quick-actions { grid-template-columns: repeat(5, 1fr); }
  .form-row { gap: 16px; }
  .sticky-actions { max-width: 680px; }
}

/* Desktop */
@media (min-width: 1024px) {
  body { background: #eef1f5; }
  .app-container {
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 0 40px rgba(0,0,0,0.08);
    border-radius: 0;
    height: 100vh;
  }
  .splash { border-radius: 0; }
}

/* Landscape phone */
@media (max-height: 500px) and (orientation: landscape) {
  .app-header { height: 48px; }
  .bottom-nav { padding-bottom: 0; }
  .nav-item { padding: 6px 4px 4px; }
  .nav-item span { font-size: 10px; }
  :root { --header-height: 48px; --nav-height: 52px; }
}

/* Dark mode support - optional */
@media (prefers-color-scheme: dark) {
  /* Only apply if user hasn't set a preference */
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
  .main-content {
    -webkit-overflow-scrolling: touch;
  }
  input[type="date"] {
    -webkit-appearance: none;
    min-height: 48px;
  }
}