/* =======================================================
   FoodMigos - Responsive Breakpoints & Mobile Optimization
   ======================================================= */

/* Medium Desktops & Tablets Landscape (<= 1120px) */
@media (max-width: 1120px) {
  :root {
    --sidebar-width: 230px;
  }

  .top-navbar {
    padding: 0 1.25rem;
  }

  .content-body {
    padding: 1.5rem 1.25rem;
  }

  .feed-container {
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 1.5rem;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tracker-items {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablets Portrait & Mobile (<= 880px) */
@media (max-width: 880px) {
  .sidebar {
    display: none !important;
  }

  .main-wrapper {
    margin-left: 0 !important;
    padding-bottom: calc(85px + env(safe-area-inset-bottom, 0px)) !important;
    width: 100%;
  }

  .mobile-bottom-nav {
    display: flex !important;
  }

  .navbar-brand-logo {
    display: flex !important;
  }

  .top-navbar {
    padding: 0 1rem;
    height: 60px;
  }

  .navbar-add-btn {
    display: none !important;
  }

  /* Hide old search bar class (if used elsewhere), show new brand without text */
  .navbar-left .search-bar { display: none; }
  .page-title { font-size: 1.1rem; }

  .content-body {
    padding: 1rem 0.85rem;
  }

  .feed-container {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .feed-sidebar {
    position: static;
  }

  .dashboard-banner {
    padding: 1.4rem 1.25rem;
    border-radius: var(--radius-lg);
  }

  .dashboard-greeting {
    margin-bottom: 1.25rem;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .metric-box {
    padding: 0.85rem;
  }

  .tracker-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

  .tracker-item {
    padding: 0.65rem;
  }

  .podium-container {
    gap: 0.5rem;
  }

  .podium-step {
    max-width: 110px;
  }

  .podium-block {
    padding: 0.75rem 0.25rem;
  }

  .meal-type-selector {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Navbar brand + search responsive */
  .navbar-brand-text { display: none; }
  .navbar-add-btn span { display: none; }
  .navbar-add-btn { padding: 0.52rem 0.7rem; }
  .navbar-streak-pill .streak-label { display: none; }
  .navbar-search-wrap { max-width: 200px; }
}

/* Compact Mobile (<= 480px) */
@media (max-width: 480px) {
  html {
    font-size: 14px;
  }

  .top-navbar {
    padding: 0 0.85rem;
    height: 58px;
  }

  /* On small screens: hide text only in search wrap */
  .navbar-search-wrap { max-width: 160px; }
  .navbar-brand-text { display: none; }
  .navbar-add-btn { display: none; }
  .navbar-streak-pill .streak-label { display: none; }

  .content-body {
    padding: 0.85rem 0.65rem;
  }

  .card {
    padding: 1.15rem 1rem;
    border-radius: var(--radius-md);
  }

  .dashboard-banner {
    padding: 1.25rem 1rem;
    border-radius: var(--radius-md);
  }

  .dashboard-greeting h2 {
    font-size: 1.25rem;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .profile-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem;
  }

  .metric-box {
    padding: 0.65rem;
    gap: 0.6rem;
  }

  .metric-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .metric-info .metric-value {
    font-size: 1.1rem;
  }

  .tracker-items {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem;
  }

  .quick-access-bar {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .meal-card {
    border-radius: var(--radius-md);
  }

  .meal-image-container {
    aspect-ratio: 16 / 10;
    max-height: 240px;
  }

  .meal-card-header, .meal-card-body {
    padding: 0.75rem 0.9rem;
  }

  .meal-type-selector {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .toast-container {
    left: 1rem;
    right: 1rem;
    top: 1rem;
  }

  .toast-message {
    min-width: unset;
    width: 100%;
  }

  .modal-box {
    padding: 1.35rem 1.15rem;
    border-radius: var(--radius-lg);
  }

  /* Notification Dropdown Mobile Responsive Alignment */
  .notif-dropdown {
    position: fixed !important;
    top: 65px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    margin-top: 0 !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22) !important;
    z-index: 99999 !important;
  }

  /* Prevent iOS Safari / Mobile Browser auto-zoom on input focus */
  input, 
  select, 
  textarea, 
  .form-control, 
  .comment-input, 
  .navbar-search-input,
  .auth-input-wrap input {
    font-size: 16px !important;
    touch-action: manipulation;
  }
}