/* ============================================================
   e-BELGE (e-Fatura / e-Arşiv) — fatura penceresi bölümü, liste rozeti, Ayarlar sayfası (1.403.0)
   Görsel dil panelin dilidir (.peron-input · .peron-select · .peron-btn · .peron-modal); burada yeni bir dil icat edilmez.
   🔴 Renk YALNIZ token (gece modu token ezmesiyle çalışır); durum rozetleri --st-* üçlüleridir.
   🔴 MOBİL-ÖNCE: taban dar ekrandır, `min-width` yalnız BÜYÜTÜR. Sabit genişlik yok; tablo kendi kabında kayar.
   🔴 Form denetimleri dar ekranda 16px (iOS odaklanınca sayfayı büyütür; tek istisna).
   🔴 `[hidden]` bu dosyanın SONUNDA açıkça beyan edilir: yazar stilindeki display, UA'nın [hidden] kuralını ezer.
   ============================================================ */

.eb { container-type: inline-size; container-name: eb; display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: 100%; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-primary); }
.eb *, .eb *::before, .eb *::after { box-sizing: border-box; }

.eb-yuk { font-size: 11px; color: var(--text-muted); }
.eb-mesaj:empty { display: none; }

/* ── Bilgi şeritleri ── */
.eb-not {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 10px;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--content-bg); color: var(--text-secondary);
    font-size: 11px; line-height: 1.5; overflow-wrap: anywhere;
}
.eb-not ul { margin: 4px 0 0 16px; padding: 0; flex-basis: 100%; }
.eb-not b { font-weight: 700; }
.eb-not--bilgi { background: var(--st-ship-bg); color: var(--st-ship-fg); border-color: var(--st-ship-bd); }
.eb-not--uyari { background: var(--peach-surface); color: var(--amber-ink); border-color: var(--amber-border); }
.eb-not--kotu  { background: var(--st-canc-bg); color: var(--st-canc-fg); border-color: var(--st-canc-bd); }
.eb-not--iyi   { background: var(--st-done-bg); color: var(--st-done-fg); border-color: var(--st-done-bd); }
.eb-not .peron-btn { min-height: 28px; height: auto; padding: 0 10px; }

/* ── Durum rozeti ── */
.eb-rozet {
    box-sizing: border-box; display: inline-flex; align-items: center; max-width: 100%; min-height: 20px; margin: 0; padding: 1px 8px;
    border: 1px solid transparent; border-radius: var(--r-full); font-family: var(--font); font-size: 10.5px; font-weight: 600;
    line-height: 1.25; text-align: left; white-space: normal; overflow-wrap: anywhere;
}
.eb-rozet--bekle { background: var(--st-wait-bg); color: var(--st-wait-fg); border-color: var(--st-wait-bd); }
.eb-rozet--yolda { background: var(--st-ship-bg); color: var(--st-ship-fg); border-color: var(--st-ship-bd); }
.eb-rozet--iyi   { background: var(--st-done-bg); color: var(--st-done-fg); border-color: var(--st-done-bd); }
.eb-rozet--kotu  { background: var(--st-canc-bg); color: var(--st-canc-fg); border-color: var(--st-canc-bd); }
.eb-rozet--pasif { background: var(--st-uph-bg); color: var(--st-uph-fg); border-color: var(--st-uph-bd); }
.eb-rozet--uyari { background: var(--st-pack-bg); color: var(--st-pack-fg); border-color: var(--st-pack-bd); }

/* Liste hücresinde: durum rozetinin altında, tıklanabilir (pencereyi açar). */
button.eb-rozet--liste { display: flex; width: fit-content; margin-top: 3px; appearance: none; cursor: pointer; }
button.eb-rozet--liste:hover { filter: brightness(.96); }
button.eb-rozet--liste:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; }

/* ── Kart: e-belge durumu ── */
.eb-kart, .eb-onizleme { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card-bg); overflow: hidden; min-width: 0; }
.eb-kart-bas {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px;
    border-bottom: 1px solid var(--border); background: var(--content-bg);
}
.eb-kart-no { font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.eb-kart-no b { color: var(--text-primary); }

.eb-kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px 12px; margin: 0; padding: 8px 10px; }
.eb-kv dt { font-size: 10.5px; color: var(--text-muted); }
.eb-kv dd { margin: 0 0 5px; font-size: 12px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.eb-ettn { font-size: 11px; font-variant-numeric: tabular-nums; }
.eb-kart > .eb-not { margin: 0 10px 8px; }
.eb-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.eb-eylem--kart { padding: 8px 10px; border-top: 1px solid var(--border); background: var(--content-bg); }
.eb .eb-eylem .peron-btn { min-height: 32px; height: auto; padding: 0 12px; font-size: 11.5px; }
.eb .eb-eylem .peron-btn.primary { min-height: 36px; }
.eb .eb-eylem .peron-btn svg { width: 14px; height: 14px; }

/* ── Form ── */
.eb-form { display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card-bg); min-width: 0; }
.eb-baslik, .eb-sec-t { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.eb-mukellef { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 11px; line-height: 1.5; color: var(--text-secondary); }
.eb-mukellef-t { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.eb-mukellef-t b { color: var(--text-primary); }
.eb .eb-mukellef .peron-btn { min-height: 28px; height: auto; padding: 0 10px; font-size: 11px; }

.eb-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 10px; min-width: 0; }
.eb-alan { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 100%; }
.eb-etiket { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.eb-etiket i { font-style: normal; color: var(--rose-ink); }
.eb-ipucu { font-size: 10.5px; line-height: 1.4; color: var(--text-muted); }
.eb-hata { font-size: 11px; line-height: 1.4; color: var(--rose-ink); }
.eb-hata:empty { display: none; }
.eb-eksik { margin-left: 6px; padding: 0 6px; border-radius: var(--r-full); background: var(--st-pack-bg); color: var(--st-pack-fg); font-size: 9.5px; font-weight: 700; }

/* Girdiler: kompakt; dar ekranda 16px (aşağıdaki medya). */
.eb .eb-in { height: 32px; min-height: 32px; padding: 0 9px; border-width: 1px; border-radius: var(--r-sm); font-size: 12px; font-family: var(--font); }
.eb select.eb-in { padding-right: 30px; background-position: right 8px center; background-size: 16px; }
.eb .eb-in[aria-invalid="true"] { border-color: var(--rose); }
.eb .eb-in:disabled { opacity: .6; }

.eb-cek { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: 12px; color: var(--text-primary); cursor: pointer; }
.eb-cek input { width: 16px; height: 16px; margin: 0; flex: none; }
.eb-cek input:disabled { cursor: not-allowed; }

/* ── Önizleme ── */
.eb-onizleme-t { font-size: 11.5px; font-weight: 700; color: var(--text-primary); }
.eb-onizleme-s { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.eb-onizleme-g { display: flex; flex-direction: column; gap: 10px; padding: 10px; min-width: 0; }
.eb-onizleme-ettn { font-size: 10.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.eb-taraflar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.eb-taraf { padding: 7px 9px; border: 1px solid var(--border-light); border-radius: var(--r-sm); background: var(--content-bg); min-width: 0; }
.eb-taraf-t { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.eb-taraf-ad { font-size: 12px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.eb-taraf-s { font-size: 10.5px; color: var(--text-secondary); overflow-wrap: anywhere; }

.eb-tbl-kap { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-sm); }
.eb-tbl { width: 100%; min-width: 460px; border-collapse: collapse; font-size: var(--tbl-fs); }
.eb-tbl th { padding: 5px 8px; border-bottom: 1px solid var(--border); background: var(--content-bg); color: var(--text-muted); font-size: var(--tbl-head-fs); font-weight: 700; text-align: center; white-space: nowrap; }
.eb-tbl td { padding: 4px 8px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); vertical-align: top; }
.eb-tbl tr:last-child td { border-bottom: 0; }
.eb-tbl .eb-ad { overflow-wrap: anywhere; }
.eb-tbl .eb-sayi, .eb-tp span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.eb-tbl th.eb-sayi { text-align: center; }

.eb-toplam { display: flex; flex-direction: column; gap: 2px; align-self: flex-end; width: 100%; max-width: 280px; }
.eb-tp { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; color: var(--text-secondary); }
.eb-tp--alt { font-size: 10.5px; color: var(--text-muted); }
.eb-tp--genel { margin-top: 3px; padding-top: 4px; border-top: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--text-primary); }
.eb-notlar { font-size: 10.5px; color: var(--text-muted); line-height: 1.5; overflow-wrap: anywhere; }

/* ── Satır içi onay ── */
.eb-onay { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--amber-border); border-radius: var(--r-md); background: var(--peach-surface); }
.eb-onay--tehlike { border-color: var(--rose-surface-border); background: var(--rose-surface); }
.eb-onay-t { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.eb-onay-m { font-size: 11px; line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; }

/* ── Kapalı yollar ── */
.eb-kapali { font-size: 11px; color: var(--text-secondary); }
.eb-kapali summary { display: flex; align-items: center; min-height: 28px; cursor: pointer; font-weight: 600; color: var(--text-secondary); }
.eb-kapali ul { margin: 2px 0 0 16px; padding: 0; line-height: 1.5; color: var(--text-muted); }
.eb-kapali li { margin-bottom: 3px; overflow-wrap: anywhere; }

/* ── Ayarlar sayfası ── */
.eb-ayar { gap: 14px; }
.eb-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.eb-sec + .eb-sec { padding-top: 12px; border-top: 1px solid var(--border-light); }
.eb-eylem--ayar { padding-top: 4px; }

/* Ayarlar penceresinde 5. sekme: dar ekranda 4 kolonlu ızgaranın ikinci satırında tam genişlik. */
@media (max-width: 560px) {
    .pset-rail .pset-tab--ebelge { grid-column: 1 / -1; }
}

/* Dar ekranda form denetimleri 16px (iOS odaklanınca sayfayı büyütür). */
@media (max-width: 768px) {
    .eb .eb-in { height: 38px; min-height: 38px; font-size: 16px; }
    .eb-eylem .peron-btn { flex: 1 1 130px; }
}

/* Kolon kararı KABIN genişliğine göre (ayar penceresinin paneli ile fatura penceresi aynı ekran genişliğinde farklı kap verir). */
@container eb (min-width: 440px) {
    .eb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .eb-alan--tam { grid-column: 1 / -1; }
    .eb-kv { grid-template-columns: 120px minmax(0, 1fr); }
    .eb-kv dd { margin-bottom: 3px; }
    .eb-taraflar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container eb (min-width: 520px) {
    .eb-form, .eb-onizleme-g { padding: 12px; }
    .eb-kart-bas { padding: 9px 12px; }
    .eb-kv { padding: 9px 12px; }
}

@media print {
    .eb-eylem, .eb-onay { display: none; }
}

/* 🔴 SONDA: yazar stilindeki display kuralları UA'nın [hidden] kuralını ezer; açıkça beyan edilir. */
.eb [hidden] { display: none; }

/* Ayarlar penceresi düğmelerine kendi kimlikli kuralıyla yükseklik verir (ölçüldü: Kaydet 33,8 px); birincil eylem eşiği 36 px. */
#pset-ebelge .eb-eylem .peron-btn.primary { min-height: 36px; height: auto; }