/*
  Purpose:      The components DESIGN_SYSTEM.md promises: status badge, safe-harvest
                banner, per-market compliance list, sync indicator, empty state.
  Reason:       §30 builds screens from components rather than one-off markup, and
                §15 forbids conveying meaning by colour alone — every status here
                carries colour AND icon AND words. The fourth status ("unknown") is
                a first-class citizen: an unknown withholding period must never be
                dressed as compliant.
  Dependencies: tokens.css.
  Input:        None.
  Output:       Styles.
  Risks:        Adding a fifth status without adding its icon and text would make
                colour the only signal, which fails both colour-blind users and
                anyone reading the screen in direct sunlight.

  Amaç:         DESIGN_SYSTEM.md'nin söz verdiği bileşenler: durum rozeti, güvenli
                hasat afişi, pazar başına uyum listesi, senkron göstergesi, boş durum.
  Gerekçe:      §30 ekranları tek kullanımlık işaretleme yerine bileşenlerden kurar;
                §15 anlamın yalnızca renkle iletilmesini yasaklar — buradaki her
                durum renk VE ikon VE kelime taşır. Dördüncü durum ("bilinmiyor")
                birinci sınıf vatandaştır: bilinmeyen bekleme süresi asla uyumlu
                kılığına sokulmaz.
  Bağımlılıklar: tokens.css.
  Girdi:        Yok.
  Çıktı:        Stiller.
  Riskler:      Beşinci bir durumu ikonu ve metni olmadan eklemek, rengi tek sinyal
                hâline getirir; bu hem renk körü kullanıcıda hem de güneş altında
                ekrana bakan herkeste başarısız olur.
*/

/* --- Durum rozeti: renk + ikon + metin (§15) --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.4;
}

.badge-icon { width: 18px; height: 18px; flex: none; }

.badge--compliant     { background: var(--color-compliant-bg);     color: var(--color-compliant); }
.badge--warning       { background: var(--color-warning-bg);       color: var(--color-warning); }
.badge--non-compliant { background: var(--color-non-compliant-bg); color: var(--color-non-compliant); }
.badge--unknown       { background: var(--color-unknown-bg);       color: var(--color-unknown); }

/* --- Güvenli hasat afişi: ekranın kahramanı --- */
.harvest-banner {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
  background: var(--color-surface-raised);
  text-align: center;
}

.harvest-banner--compliant { border-color: var(--color-compliant); background: var(--color-compliant-bg); }
.harvest-banner--unknown   { border-color: var(--color-unknown);   background: var(--color-unknown-bg); }
.harvest-banner--non-compliant { border-color: var(--color-non-compliant); background: var(--color-non-compliant-bg); }

.harvest-banner .label {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.harvest-banner .date {
  margin: 0;
  font-family: var(--font-family-numeric);
  font-size: var(--font-size-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--color-text);
}

/* Sayı tek başına bırakılmaz; anlamı ve önerilen eylem eşlik eder (§15.1) */
.harvest-banner .meaning {
  margin: var(--space-3) 0 0;
  color: var(--color-text);
  font-size: var(--font-size-base);
  text-wrap: pretty;
}

.harvest-banner .date--unknown {
  font-size: var(--font-size-xl);
  color: var(--color-unknown);
}

/* --- Pazar başına uyum listesi (D-010'un görünen yüzü) --- */
.market-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.market-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--touch-target-min);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}

.market-row .who { display: grid; gap: 2px; }
.market-row .name { font-weight: 700; }
.market-row .role { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Satırın sağındaki değer BÖLÜNMEZ. "16.049,50 TL" iki satıra düştüğünde
   binlik ayırıcıyla ondalık ayırıcı ayrı satırlara düşüyor ve rakam bir anda
   okunamaz hâle geliyor — emülatörde görüldü. Sola esneyen `.who` yeri
   yeterince veriyor; sayı sabit kalır. */
.market-row > strong {
  flex: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- Senkron göstergesi (§10 zorunlu) --- */
.sync {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  background: var(--color-unknown-bg);
  color: var(--color-text-muted);
}
.sync--pending { background: var(--color-warning-bg); color: var(--color-warning); }
.sync--sent    { background: var(--color-compliant-bg); color: var(--color-compliant); }
.sync--error   { background: var(--color-non-compliant-bg); color: var(--color-non-compliant); }

.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* --- Kart --- */
.card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}

.card h2 { margin: 0 0 var(--space-3); font-size: var(--font-size-lg); }

/* --- Boş durum: ne yapılacağını söyler (§15.1) --- */
.empty-state {
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--color-text-muted);
}

.empty-state p { margin: 0 0 var(--space-4); }

/* --- Kaynak satırı: her mevzuat değeri kaynağını taşır (§13, D-006) --- */
.source-note {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* --- Pazar seçimi (üretim partisi ekranı) ---------------------------------
   Onay kutuları tarlada, eldivenle, güneş altında kullanılır. §15.1 dokunma
   hedefini 56px'e çıkarır ve kutunun kendisini değil SATIRIN TAMAMINI hedef
   yapar — küçük bir kareyi ıskalamak, yanlış pazar seçmekten daha sık olur. */
.market-picker {
  margin: var(--space-5) 0 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.market-picker legend {
  padding: 0 var(--space-2);
  font-weight: 700;
  font-size: var(--font-size-base);
}

.market-options { display: grid; gap: var(--space-2); margin-top: var(--space-3); }

.check-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  font-weight: 600;
  cursor: pointer;
}

.check-row:focus-within { outline: 3px solid var(--color-primary); outline-offset: 2px; }

.check-row input[type="checkbox"] {
  width: 26px;
  height: 26px;
  flex: none;
  accent-color: var(--color-primary);
}

/* --- Koşullu form bölümü ---------------------------------------------------
   `.email-form` bir grid; içine bir <div> koymak o div'i TEK bir hücre yapar
   ve içindeki alanlar ızgaradan düşer — etiketler yan yana sıkışır.
   `display: contents` sarmalayıcıyı düzen açısından yok sayar: çocuklar
   doğrudan grid'e katılır, ama JS yine tek yerden gizleyip gösterebilir.
   Gizlendiğinde `[hidden] { display: none !important }` kuralı öne geçer. */
.email-form > div[id$="Fields"] { display: contents; }

/* --- Yardım kartı ----------------------------------------------------------
   Yardım, ihtiyaç duyulan ekranın içinde durur. Kapalıyken tek satır yer
   kaplar; açıkken en fazla altı adım. Üçüncü kez açılan bir yardım kartı,
   kapatılan bir yardım kartıdır — bu yüzden görüldüyse kapalı başlar. */
.help {
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.help-toggle {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.help-toggle:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
}

.help-body { padding: 0 var(--space-4) var(--space-4); }

.help-intro {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.help-steps {
  margin: 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-2);
}

.help-steps li {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.help-note {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.help-more {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-sm);
}
/* Bağlantı rengi açıkça verilir: verilmezse tarayıcının mavisi gelir ve
   sayfadaki tek mavi o olur. Emülatörde görüldü. */
.help-more a { color: var(--color-primary); }

/* Rehber sayfasındaki konu: aynı kart, daha sıkı. Sayfada on beş tane yan
   yana duruyor ve ekran kartındaki nefes payı burada listeyi kaydırılamaz
   hâle getirirdi. Vurgu şeridi de yok: on beş şerit vurgu olmaz, desen olur. */
.help--guide {
  margin-bottom: var(--space-2);
  border-left-width: 1px;
  border-left-color: var(--color-border);
}
.help--guide .help-toggle { color: var(--color-text); }

/* --- Sezon seçici -----------------------------------------------------------
   Form DIŞINDA duruyor, dolayısıyla `.email-form select` kuralı buraya
   uygulanmıyordu: tarayıcının varsayılan, minik select'i çıkıyordu ve
   dokunma hedefi §15.1'in istediği 48px'in çok altındaydı. Emülatörde
   görüldü. Bir bileşenin stilini kabın seçicisine bağlamak, o bileşeni
   başka bir kaba koyduğun gün sessizce çıplak bırakır. */
.season-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.season-row select {
  flex: 1;
  min-width: 0;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font: inherit;
  font-size: 16px;   /* 16px'in altı iOS'ta sayfayı yakınlaştırır */
  font-weight: 600;
}

.season-row select:first-child { flex: 0 0 7rem; }

/* Rehberdeki arama kutusu. Ekranın en üstünde ve tek işi var: yazınca süzmek. */
#helpSearch {
  width: 100%;
  min-height: var(--touch-target-min);
  margin-bottom: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font: inherit;
  font-size: 16px;   /* 16px'in altı iOS'ta sayfayı yakınlaştırır */
}