/* ============================================================================
   responsive.css — single owner of the touch-shell breakpoints + (T3) reflow.
   Loaded LAST (eager) so it can override lazily-injected per-view CSS.

   T2 (this file, shell tiers): the touch-shell rules that used to live in the
   @media (max-width:768px) blocks of base.css, components/sidebar.css, and
   components/tabs.css are migrated here VERBATIM (byte-identical property values;
   only the media-query key changes) and split into two explicit tiers per owner
   decision D1:
     • phone   ≤600
     • tablet  601–900
   Declaration order within each tier is base → sidebar → tabs, matching the old
   file load order, so conflicting selectors (.nav-item, #main-content,
   .nav-item span:last-child) still resolve to the same winner.

   ponytail: shell geometry is duplicated across the two tier blocks per owner D1;
   if the phone and tablet shells ever need to diverge only in content (not shell),
   that's fine — but if they must stay identical forever, extract the shared shell
   into a single @media (max-width:900px) block above these two tiers.
   ============================================================================ */

/* ── Phone tier (≤600) ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* from base.css */
  .logo-text, .nav-item span:last-child, .sidebar-plans { display: none; }
  .sidebar-logo-img { width: 32px; padding: 4px; border-radius: 6px; }
  .sidebar-logo { padding: 14px 10px; }
  .nav-item { justify-content: center; padding: 12px; }
  #main-content { padding: 24px 20px; }
  .meal-slot { min-width: min(180px, 80vw); }
  .meal-slot:last-child { border-bottom: none; }
  .planner-header { flex-direction: column; }
  .form-row { grid-template-columns: 1fr; }

  /* from components/sidebar.css — mobile-logout */
  .mobile-logout { display: flex !important; }

  /* from components/sidebar.css — Mobile Bottom Nav */
  /* Layout'u grid'den block yapıya geçiriyoruz */
  #app {
    display: block;
  }

  /* Ana içerik alanına alt menü yüksekliği kadar boşluk veriyoruz ki yazılar altında kalmasın.
     env(safe-area-inset-*) ile çentik (üst) ve home-indicator (alt) alanlarını da hesaba katıyoruz. */
  #main-content {
    padding:
      calc(24px + env(safe-area-inset-top)) 16px
      calc(85px + env(safe-area-inset-bottom)) 16px;
    min-height: 100dvh; /* 100vh mobil tarayıcı çubuğunu saymaz → dvh dinamik yüksekliği kullanır */
  }

  /* Sidebar'ı ekranın altına sabitliyoruz (Twitter Bottom Nav) */
  #sidebar {
    position: fixed;
    bottom: 0;
    top: auto; /* BU SATIR EKSİKTİ - Üstten yapışmayı iptal eder */
    inset-inline-start: 0;
    width: 100%;
    /* 65px'lik bar + home-indicator boşluğu; background inset alanını doldurur, ikonlar üstte kalır */
    height: calc(65px + env(safe-area-inset-bottom));
    padding: 0 0 env(safe-area-inset-bottom) 0;
    flex-direction: row;
    justify-content: center;
    z-index: 1000;
    background: var(--secondary);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-inline-end: none;
  }

  /* Alt barda gereksiz olan logo, plan listesi ve footer'ı gizliyoruz */
  .sidebar-logo, .sidebar-plans, .sidebar-footer {
    display: none !important;
  }

  /* Menü linklerini yatayda eşit dağıtıyoruz */
  .sidebar-nav {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    padding: 0;
    gap: 0;
  }

  /* Her bir menü butonunu dikey hizalayıp ikon ve yazı şeklinde ayarlıyoruz */
  .nav-item {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 10px 0;
    border-radius: 0;
    background: transparent !important;
  }

  /* Seçili menünün sadece ikon rengini parlatıyoruz, arka planı değil */
  .nav-item.active { color: var(--accent); }

  /* İkonların altındaki yazıyı mobilde minik gösteriyoruz */
  .nav-item span:last-child {
    display: block !important;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.03em;
  }

  /* Varsa bildirim rozetlerini ikonun sağ üstüne alıyoruz */
  .nav-badge {
    position: absolute;
    top: 4px;
    inset-inline-end: calc(50% - 20px);
    margin: 0;
    padding: 2px 5px;
    font-size: 9px;
    min-width: 16px;
    border: 2px solid var(--secondary);
  }

  /* from components/tabs.css — Mobile tab styling */
  .tabs-header {
    gap: 2px;
  }
  .tab-btn {
    padding: 10px 12px;
    font-size: 13px;
  }
  .tab-btn span {
    font-size: 13px;
  }

  /* ── Reflow ruleset (D2): 1-column card grids on phone ─────────────────────
     !important: per-view sheets lazy-inject into <head> at view mount
     (js/view_css.js), so at equal specificity a per-view grid rule wins on DOM
     order over this eager, earlier <link>. !important lets the central sheet own
     the column cap. Per-view files must NOT !important their own grid-template-columns.

     Census finalized against the contact sheet: only .fav-grid / .pool-grid /
     .tmpl-grid are rendered card grids. Two entries from the design D2 table are
     PHANTOM and intentionally excluded (nothing to cap): .inv-list — inventory
     renders `#inv-list` (an *id*) as a flex column, the `.inv-list` class is never
     emitted; .today-meals-grid — defined in today.css but the today view renders a
     vertical `.tl-item` timeline. Both are 1-col by construction. */
  .fav-grid, .pool-grid, .tmpl-grid {
    grid-template-columns: 1fr !important;
  }

  /* AC5 touch-target floor: tab-strip buttons ≥44px tall on the touch shell. */
  .tab-btn { min-height: 44px; }

  /* ── Named bug (a): me action-row wraps so the two Turkish buttons + PRO badge
     stay inside the card, and the search wrapper gets its own full-width line —
     which also cures the squished-search "empty white box" artifact. */
  .fav-header-row { flex-wrap: wrap; }
  .fav-header-actions { flex-wrap: wrap; margin-left: 0; width: 100%; }

  /* ── Named bug (d): the settings card header (an inline-styled flex row of
     <h3> + the "Modelleri Güncelle" sync button) is nowrap, so the button label
     wraps awkwardly when cramped. flex-wrap is unset inline → this applies without
     !important; the button drops to its own line and the label fits. */
  .settings-section-header > div { flex-wrap: wrap; gap: 8px; }

  /* input + button primitive row (e.g. settings → Hesap "Yeni Şifre"): the input
     gets its own full-width line so it isn't squished next to the button. .input-row
     is a global primitive (primitives.css, eager) — responsive.css loads later, so
     no !important needed. */
  .input-row { flex-wrap: wrap; }
  .input-row .form-input { flex-basis: 100%; }
}

/* ── Tablet tier (601–900) ─────────────────────────────────────────────────── */
@media (min-width: 601px) and (max-width: 900px) {
  /* from base.css */
  .logo-text, .nav-item span:last-child, .sidebar-plans { display: none; }
  .sidebar-logo-img { width: 32px; padding: 4px; border-radius: 6px; }
  .sidebar-logo { padding: 14px 10px; }
  .nav-item { justify-content: center; padding: 12px; }
  #main-content { padding: 24px 20px; }
  .meal-slot { min-width: min(180px, 80vw); }
  .meal-slot:last-child { border-bottom: none; }
  .planner-header { flex-direction: column; }
  .form-row { grid-template-columns: 1fr; }

  /* from components/sidebar.css — mobile-logout */
  .mobile-logout { display: flex !important; }

  /* from components/sidebar.css — Mobile Bottom Nav */
  /* Layout'u grid'den block yapıya geçiriyoruz */
  #app {
    display: block;
  }

  /* Ana içerik alanına alt menü yüksekliği kadar boşluk veriyoruz ki yazılar altında kalmasın.
     env(safe-area-inset-*) ile çentik (üst) ve home-indicator (alt) alanlarını da hesaba katıyoruz. */
  #main-content {
    padding:
      calc(24px + env(safe-area-inset-top)) 16px
      calc(85px + env(safe-area-inset-bottom)) 16px;
    min-height: 100dvh; /* 100vh mobil tarayıcı çubuğunu saymaz → dvh dinamik yüksekliği kullanır */
  }

  /* Sidebar'ı ekranın altına sabitliyoruz (Twitter Bottom Nav) */
  #sidebar {
    position: fixed;
    bottom: 0;
    top: auto; /* BU SATIR EKSİKTİ - Üstten yapışmayı iptal eder */
    inset-inline-start: 0;
    width: 100%;
    /* 65px'lik bar + home-indicator boşluğu; background inset alanını doldurur, ikonlar üstte kalır */
    height: calc(65px + env(safe-area-inset-bottom));
    padding: 0 0 env(safe-area-inset-bottom) 0;
    flex-direction: row;
    justify-content: center;
    z-index: 1000;
    background: var(--secondary);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-inline-end: none;
  }

  /* Alt barda gereksiz olan logo, plan listesi ve footer'ı gizliyoruz */
  .sidebar-logo, .sidebar-plans, .sidebar-footer {
    display: none !important;
  }

  /* Menü linklerini yatayda eşit dağıtıyoruz */
  .sidebar-nav {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    padding: 0;
    gap: 0;
  }

  /* Her bir menü butonunu dikey hizalayıp ikon ve yazı şeklinde ayarlıyoruz */
  .nav-item {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 10px 0;
    border-radius: 0;
    background: transparent !important;
  }

  /* Seçili menünün sadece ikon rengini parlatıyoruz, arka planı değil */
  .nav-item.active { color: var(--accent); }

  /* İkonların altındaki yazıyı mobilde minik gösteriyoruz */
  .nav-item span:last-child {
    display: block !important;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.03em;
  }

  /* Varsa bildirim rozetlerini ikonun sağ üstüne alıyoruz */
  .nav-badge {
    position: absolute;
    top: 4px;
    inset-inline-end: calc(50% - 20px);
    margin: 0;
    padding: 2px 5px;
    font-size: 9px;
    min-width: 16px;
    border: 2px solid var(--secondary);
  }

  /* from components/tabs.css — Mobile tab styling */
  .tabs-header {
    gap: 2px;
  }
  .tab-btn {
    padding: 10px 12px;
    font-size: 13px;
  }
  .tab-btn span {
    font-size: 13px;
  }

  /* ── Reflow ruleset (D2): 2-column cap on tablet ───────────────────────────
     !important — see the phone tier note (lazy per-view injection wins on order).
     Same 3 real card grids; .inv-list / .today-meals-grid excluded (phantom). */
  .fav-grid, .pool-grid, .tmpl-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* AC5 touch-target floor (touch shell is active on tablet too). */
  .tab-btn { min-height: 44px; }
}