/* ==========================================================================
   Responsive - all @media rules, loaded last so they always win
   ========================================================================== */

@media (max-width: 600px) {
  .dash-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .review-card { flex-direction: column; }
  .review-photos { flex: none; flex-direction: row; gap: 0.5rem; }
  .review-photos .review-photo { flex: 1; }
  .review-photo-ean { flex: 0 0 auto !important; }
  .review-photo-ean img { max-height: 80px; }
}

@media (max-width: 600px) {
  /* ── Bottom nav ── */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--c-surface);
    border-top: 1px solid var(--c-border-soft);
    box-shadow: var(--c-shadow-up);
    z-index: 100;
    justify-content: space-around;
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  .bottom-nav a,
  .bottom-nav-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 0.6rem 0.25rem;
    min-height: 50px;
    font-size: var(--t-sm);
    font-weight: var(--fw-medium);
    color: var(--c-border-focus);
    text-decoration: none;
  }

  .bottom-nav-more-btn {
    background: none;
    border: none;
    font-size: var(--t-lg);
    cursor: pointer;
    width: 100%;
  }

  .bottom-nav a.active,
  .bottom-nav-more-btn.active {
    color: var(--c-text);
    font-weight: var(--fw-bold);
  }

  /* ── Overflow menu ── */
  .bottom-nav-more {
    flex: 1;
    position: relative;
  }

  .bottom-nav-overflow {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-border-soft);
    border-radius: 8px;
    box-shadow: var(--c-shadow-up-lg);
    min-width: 160px;
    padding: 0.4rem 0;
    margin-bottom: 0.25rem;
    z-index: 101;
  }

  .bottom-nav-more.open .bottom-nav-overflow {
    display: block;
  }

  .bottom-nav-overflow a {
    display: block;
    padding: 0.75rem 1rem;
    min-height: 44px;
    font-size: var(--t-md);
    color: var(--c-text-dark);
    text-decoration: none;
    font-weight: var(--fw-medium);
  }

  .bottom-nav-overflow a:active {
    background: var(--c-surface-mute);
  }

  /* ── Backdrop to close overflow ── */
  .bottom-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99;
  }

  /* ── Top nav: hide page links, show only user info ── */
  nav:not(.bottom-nav) {
    gap: 0;
    padding: 0.25rem 0 0.75rem;
    border-bottom: none;
    margin-bottom: 0.75rem;
  }

  nav:not(.bottom-nav) > a { display: none; }

  .nav-user {
    margin-left: 0;
    width: 100%;
    text-align: right;
    font-size: var(--t-sm);
  }

  /* ── Body: space for bottom nav ── */
  body { padding-bottom: 4rem; }

  /* ── Hide macro columns on mobile ── */
  .col-macro,
  .col-hide-mobile { display: none !important; }

  /* ── Tap targets: minimum 44px ── */
  button,
  .btn,
  .btn-comp,
  .comp-more {
    min-height: 44px;
  }

  input[type="text"],
  input[type="number"],
  input[type="date"],
  select {
    min-height: 44px;
    font-size: 16px; /* prevents iOS auto-zoom on focus */
  }

  /* ── Date navigation ── */
  .date-nav a {
    font-size: var(--t-display);
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .date-nav h2 { font-size: var(--t-lg); }

  /* ── Log add-entry form: stack food picker, row for qty+unit+btn ── */
  .meal-add { padding: 0.6rem; }

  .add-entry-form {
    gap: 0.4rem;
  }

  .food-picker { width: 100%; }

  .food-text {
    width: 100% !important;
    min-width: unset !important;
  }

  .food-dropdown {
    width: 100%;
    min-width: unset;
    max-height: 50vh;
  }

  .food-dropdown li {
    padding: 0.6rem 0.75rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .add-entry-form .qty-input {
    flex: 1;
    min-width: 60px;
  }

  .add-entry-form button[type="submit"] {
    padding: 0 1rem;
  }

  /* ── Size pills ── */
  .btn-size-pill {
    min-height: 44px;
    flex: 1;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Composition buttons on log ── */
  .comp-buttons { margin-top: 0.5rem; }

  .btn-comp {
    flex: 1 1 auto;
    text-align: center;
    padding: 0.5rem 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Delete buttons ── */
  button.btn-delete {
    font-size: var(--t-xl);
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Inline qty form in table ── */
  .inline-qty-form input { width: 58px; min-height: 36px; }
  .inline-qty-form select { min-height: 36px; }

  /* ── Meal header: allow wrap ── */
  .meal-header { flex-wrap: wrap; }
  .meal-summary { width: 100%; font-size: var(--t-xs); }

  /* ── Foods page ── */
  .add-food-form { max-width: 100%; }
  .slv-search { max-width: 100%; }

  .form-row.macros input { width: 100%; }
  .form-row.macros label { flex: 1; min-width: 0; }

  input[name="name"] { min-width: unset !important; width: 100%; }

  /* ── Composition detail: ingredient rows ── */
  .ingredient-row { gap: 0.4rem; }
  .ingredient-row input[type="number"],
  .ingredient-row select { min-width: 0; flex: 1; }

  .suggestion-row { gap: 0.4rem; }
  .sug-inputs { gap: 0.3rem; }
  .sug-inputs input,
  .sug-inputs select { flex: 1; min-width: 0; }

  /* ── Profile form ── */
  .profile-form { max-width: 100%; }
  .macro-inputs label { width: 100%; }
  .macro-inputs input { width: 100% !important; }

  /* ── Calorie calculator ── */
  .calc-inputs label { width: 100%; }
  .calc-inputs input,
  .calc-inputs select { width: 100% !important; min-width: 0; }
  .calc-table { font-size: var(--t-sm); }
  .calc-table th:nth-child(4),
  .calc-table td:nth-child(4) { display: none; }

  /* ── Weight form ── */
  .weight-form {
    flex-direction: column;
    align-items: stretch;
  }
  .weight-form input[type="number"] { width: 100%; }

  /* ── Dashboard grid already goes 1-col ── */

  /* ── Auth box ── */
  .auth-box { margin: 1rem auto; }
  .auth-box input { font-size: 16px; } /* 16px, not a token: iOS auto-zoom threshold */

  /* ── SLV result list ── */
  .slv-result-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
  .slv-result-list li button { width: 100%; min-height: 44px; }

  /* ── Composition list ── */
  .comp-list li { min-height: 44px; }
  .comp-list a { padding: 0.4rem 0; }

  /* ── Log composition page ── */
  .ingredient-row,
  .suggestion-row { flex-wrap: wrap; }

  /* ── Table cells: tighter padding + smaller font on mobile ── */
  th, td { padding: 0.35rem 0.3rem; font-size: var(--t-sm); }
  .meal-section table th,
  .meal-section table td { padding: 0.3rem 0.35rem; font-size: var(--t-sm); }

  /* ── Log food search: compact input ── */
  .food-text { font-size: 16px !important; min-height: 40px !important; } /* must stay >= 16px, see above */

  /* ── Active calories card ── */
  .active-cal-hint { margin-left: 0; width: 100%; }

  /* ── Quick add form ── */
  .quick-add-form { flex-direction: column; align-items: stretch; }
  .quick-add-form input[name="food_name"] { width: 100%; min-width: unset; }
  .quick-add-macros { width: 100%; }
  .quick-add-macros label { flex: 1; min-width: 0; }
  .quick-add-macros input { width: 100%; }
  .quick-add-form button[type="submit"] { width: 100%; }

  /* ── Nav user: name left, settings right ── */
  .nav-user {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}