/* Beta 4.0 — Diyet Programı sayfası.
 *
 * YATAY TAŞMA HATASI: sayfa 14" bir ekrana sığdığı hâlde sağa kaydırılabiliyordu.
 * Sebebi `.diet-meal-grid{grid-template-columns:repeat(2,1fr)}` idi. CSS'te `1fr`
 * aslında `minmax(auto,1fr)` demektir; yani sütun, içindeki en geniş öğeden daha
 * dar OLAMAZ. Öğün kartındaki besin listesinde 86 karakterlik bir ürün adı
 * bulununca sütun ekranı aşıyor ve bütün sayfa kayıyordu.
 *
 * Çözüm iki parçalı: her ızgara `minmax(0,…)` kullanır (sütun daralabilir) ve
 * ızgara/esnek kutu çocuklarına `min-width:0` verilir (içerik taşmasına izin
 * verilmez, uzun ad satır kırar). Testlerde 390–1920 px arası ölçülür.
 */

/* --- Sayfa başlığı --- */
.pagehead-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* --- Program seçici --- */
.diet-program-picker{display:grid;gap:16px;margin-bottom:16px}
.diet-program-picker-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.diet-program-picker-head>div{display:grid;gap:4px;min-width:0}
.diet-program-picker-head strong{font-size:22px}
.diet-program-create{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.diet-program-create input{min-width:0;flex:1 1 220px}
.diet-program-tabs{display:flex;flex-wrap:wrap;gap:8px}
.diet-program-tabs a{flex:0 1 auto;display:grid;gap:3px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted);min-width:0;max-width:100%}
.diet-program-tabs a strong{color:var(--text);overflow-wrap:anywhere;line-height:1.35}
.diet-program-tabs a small{font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.diet-program-tabs a.active{border-color:var(--accent);background:#20252c;box-shadow:inset 2px 0 var(--accent)}

/* --- Hazır beslenme listesi kurulum paneli (Beta 4.4) --- */
.diet-plan-install{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;border-left:3px solid var(--accent)}
.diet-plan-install>div{display:grid;gap:5px;min-width:0;flex:1 1 320px}
.diet-plan-install strong{font-size:19px}
.diet-plan-install small{color:var(--muted);font-size:12px;line-height:1.7}
.diet-plan-install.is-complete{border-left-color:var(--ok)}
.diet-plan-install.is-complete strong{color:var(--ok)}
.diet-plan-install form{flex:0 0 auto}

/* --- Araç çubuğu --- */
.diet-program-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.diet-program-rename{display:flex;gap:8px;flex:1 1 280px;min-width:0}
.diet-program-rename input{min-width:0;flex:1;font-weight:700}
.diet-program-actions{display:flex;gap:8px;flex-wrap:wrap}
.diet-program-actions form{display:contents}

/* --- Öğün kartları --- */
.diet-meal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px;margin:16px 0}
.diet-meal-card{display:flex;flex-direction:column;gap:14px;min-width:0}
.diet-meal-head{display:flex;align-items:center;gap:8px;min-width:0}
.diet-meal-name{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.diet-meal-name input{min-width:0;flex:1;font-size:17px;font-weight:700}
.diet-meal-name .btn{flex:0 0 auto;padding:12px 14px}
.diet-items{display:grid;min-width:0}
.diet-items article{display:grid;grid-template-columns:minmax(0,1fr) auto 36px;gap:10px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.diet-items article:first-child{border-top:0}
.diet-items article>div{display:grid;gap:2px;min-width:0}
.diet-items article strong{font-weight:600;overflow-wrap:anywhere;line-height:1.35}
.diet-items article span{white-space:nowrap;color:var(--muted);font-size:12px}
.diet-items small{color:var(--muted);font-size:11px}
.diet-items-empty{margin:0;padding:14px 0;color:var(--muted);font-size:13px}
.diet-meal-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.diet-meal-foot>strong{font-size:19px}
.diet-add-btn{flex:0 0 auto}
.diet-meal-card.is-empty{justify-content:center}

/* --- Öğün ekleme + yedek besin formu --- */
.add-diet-meal{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.add-diet-meal input{min-width:0;flex:1 1 240px}
.diet-add-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 120px auto;gap:10px;align-items:end;margin-top:16px}
.diet-add-item>.diet-add-item-note{grid-column:1/-1;display:grid;gap:4px}
.diet-add-item-note small{color:var(--muted);line-height:1.6}
.diet-add-item label{display:grid;gap:6px;min-width:0;color:var(--muted);font-size:11px}
.diet-add-item select,.diet-add-item input{min-width:0;max-width:100%}
/* JS calisiyorsa yedek form gereksizdir; secici zaten aciliyor. */
.diet-add-item.b35-enhanced{display:none}

/* --- Diyet sayfasındaki uygulama paneli --- */
.diet-apply{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:16px}
.diet-apply-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.diet-apply-head>div{display:grid;gap:4px;min-width:0}
.diet-apply-head h2{margin:0;font-size:24px}
.diet-apply-head p{margin:0;color:var(--muted);font-size:13px}
.diet-apply-form{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;gap:10px;align-items:end}
.diet-apply-form label{display:grid;gap:6px;min-width:0;color:var(--muted);font-size:11px}
.diet-apply-form select{min-width:0;max-width:100%}
.diet-apply-form .btn{white-space:nowrap}
.diet-apply-note{margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.diet-apply-suggest{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid var(--accent);border-radius:999px;font-size:11px;line-height:1.6;letter-spacing:.06em;color:var(--accent);max-width:100%;justify-self:start}
.diet-apply-empty{margin:0;color:var(--muted);font-size:13px}

@media(max-width:900px){
  .diet-add-item{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .diet-add-item>label:nth-of-type(2){grid-column:1/-1}
  .diet-add-item>button{grid-column:1/-1}
  .diet-apply-form{grid-template-columns:1fr}
  .diet-apply-form .btn{width:100%}
  .diet-program-picker-head{align-items:stretch}
}

@media(max-width:560px){
  .diet-meal-grid{grid-template-columns:1fr}
  .diet-add-item{grid-template-columns:1fr}
  .diet-add-item>label,.diet-add-item>button{grid-column:auto}
  .diet-program-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .diet-program-actions .btn{width:100%}
  .add-diet-meal .btn{width:100%}
  .pagehead-actions{width:100%}
  .pagehead-actions .btn{flex:1 1 auto}
}
