/* ============================================================
   Page: satislar (zengin)
   ============================================================ */
/* Adaptif (§8): görünür kart sayısına göre kendini kurar; sabit kolona kilitlenmez.
   Satışlar 6, Alışlar 4 kart taşır — ikisi de bu ızgarayı paylaşır. */
.sum-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.sum-card {
  display: flex; align-items: stretch; gap: var(--space-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(70, 62, 124, .14); padding: var(--space-3) var(--space-4);   /* eski stil, gölge hafif daha belirgin */
}
.sum-card.is-clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .05s; }
.sum-card.is-clickable:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.sum-card.is-clickable:active { transform: translateY(1px); }
.sum-card-ico { width: 36px; height: 36px; flex-shrink: 0; align-self: center; display: grid; place-items: center; border-radius: var(--radius-sm); }
.sum-card-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sum-card-ico--brand { background: rgba(200, 82, 30, .12); color: var(--brand); }
.sum-card-ico--ok { background: var(--green-soft); color: var(--green); }
.sum-card-ico--warn { background: var(--yellow-soft); color: var(--yellow); }
.sum-card-ico--info { background: var(--blue-soft); color: var(--blue); }
.sum-card-body { flex: 1; min-width: 0; }
.sum-card-title { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.sum-card-val { font-size: var(--fs-lg); font-weight: 700; color: var(--text-muted); padding-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sum-card-sub { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); padding-top: 2px; }
/* Trend rozeti (özet kart alt satırı): ▲ artış / ▼ azalış / — sabit */
.sum-trend { font-weight: 800; }
.sum-trend--up { color: var(--green); }
.sum-trend--down { color: var(--red); }
.sum-trend--flat { color: var(--text-muted); }

/* Satışlar action-bar: araçlar solda, birincil butonlar sağda */
.sales-page .action-bar-tools { flex: 1; justify-content: space-between; }

/* Filtrelenen toplam çubuğu — action-bar ile tablo arasında ince özet şerit. */
.sales-total-bar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2);
  background: var(--surface-alt, var(--bg)); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.sales-total-bar:empty { display: none; }
.sales-total-bar .stb-count { color: var(--text-muted); font-weight: 600; }
.sales-total-bar .stb-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: var(--radius-full);
  background: var(--brand-glow, rgba(200,90,30,.12)); color: var(--brand); font-size: var(--fs-xs); font-weight: 700; }
.sales-total-bar .stb-net { margin-left: auto; color: var(--text); }
.sales-total-bar .stb-net .money { color: var(--navy); font-size: var(--fs-md); }
.sales-total-bar .stb-sub { color: var(--text-muted); font-weight: 500; }

.cust-cell { display: inline-flex; align-items: center; gap: var(--space-2); }
.avatar-sm { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0; }

.prod-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-sm); background: var(--bg); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; }

.row-actions { display: inline-flex; gap: 4px; }
/* Satır aksiyon butonları: VARSAYILAN silik/soluk (zeminsiz, soluk ikon) → işlemler
   sütunu sade durur. Hover'da yumuşak marka vurgusu (zemin + brand renk). */
.row-act {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: var(--radius-sm); color: var(--text-faint);
  background: transparent; border: 1px solid transparent; opacity: .8;
  transition: background var(--transition), color var(--transition), opacity var(--transition);
}
.row-act:hover { opacity: 1; background: var(--brand-tint); color: var(--brand); }
.row-act--danger:hover { background: var(--red-soft); color: var(--red); }
.row-act--ok:hover { background: var(--green-soft); color: var(--green); }
.row-act svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Satışlar/Alışlar listesi: işlem ikonları beyaz zeminli gri çerçeveli kutu (müşteriler/ürünler ile aynı),
   hover'da turuncu; ok=yeşil, danger=kırmızı hover korunur. */
#salesTable .row-act, #purList .row-act { background: var(--surface); border-color: var(--border); color: var(--text-muted); opacity: 1; }
#salesTable .row-act:hover, #purList .row-act:hover { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); }
#salesTable .row-act--ok:hover, #purList .row-act--ok:hover { background: var(--green-soft); border-color: var(--green); color: var(--green); }
#salesTable .row-act--danger:hover, #purList .row-act--danger:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); }
/* Kâr ikonu aktifken (kâr satırı açık) yeşil vurgulu kalsın. */
#salesTable .row-act--profit:hover, #salesTable .row-act--profit.is-active { background: var(--green-soft); border-color: var(--green); color: var(--green); }

/* Satış kârı satırı — Toplam hücresinin altında; İşlemler'deki kâr ikonuyla toggle (varsayılan gizli). */
.sale-profit-line { margin-top: 3px; align-items: baseline; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.sale-profit-line:not([hidden]) { display: inline-flex; }
.sale-profit-line .spl-label { color: var(--text-faint); font-weight: 500; }
.sale-profit-line .spl-pct { opacity: .78; font-weight: 500; }
.sale-profit-line.is-pos { color: var(--green); }
.sale-profit-line.is-neg { color: var(--red); }

/* Ödeme sütununda kart ödemesinin POS'u — yöntemin altında 2. satır (soluk/küçük). */
.odeme-pos { margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }

@media (min-width: 900px) {
  .sum-cards { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}

/* 4-kartlı KPI ızgaraları (ürünler/müşteriler/tedarikçiler/alışlar): paylaşılan
   auto-fit minmax orta genişlikte (laptop · MacBook · tarayıcı zoom) 3+1 ÇİRKİN sarıyordu
   (4. kart altta tek). Net 4→2→1 reflow (ASLA 3+1). ID seçici → page-class kurallarını
   geçersiz kılar. Satışlar 6 kart (#sumCards) bu kurala DAHİL DEĞİL. */
#prodStats, #custCards, #supCards, #purSumCards { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1180px) {
  #prodStats, #custCards, #supCards, #purSumCards { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 460px) {
  #prodStats, #custCards, #supCards, #purSumCards { grid-template-columns: 1fr; }
}

/* ============================================================
   Satış Detayı modalı — fatura görünümü (sd- ad alanı; .detail-* ile
   çakışmasın diye kasıtlı ayrı prefix). Modal genişliği değişmedi (560px).
   ============================================================ */
.sd { display: flex; flex-direction: column; gap: var(--space-4); }

/* Üst şerit: Belge No solda; durum/ödeme rozetleri + tarih sağda */
.sd-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
  padding-bottom: var(--space-3); border-bottom: 1px dashed var(--border);
}
.sd-h-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.sd-h-id { font-size: var(--fs-lg); font-weight: 800; color: var(--navy); margin-top: 2px; }
.sd-h-right { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.sd-h-date { font-size: var(--fs-xs); color: var(--text-muted); width: 100%; text-align: right; }

/* Ödeme şekli rozeti */
.sd-paybadge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; background: var(--bg); color: var(--text-muted); }
.sd-paybadge--nakit { background: var(--green-soft); color: var(--green); }
.sd-paybadge--kart { background: var(--blue-soft); color: var(--blue); }
.sd-paybadge--havale { background: rgba(155, 89, 182, .12); color: #8E44AD; }
.sd-paybadge--acik_hesap { background: var(--red-soft); color: var(--red); }
.sd-paybadge--coklu { background: rgba(43, 58, 85, .12); color: var(--navy); }

/* Bilgi kartları: Müşteri + Belge Bilgisi */
.sd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.sd-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); }
.sd-card-title { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.sd-card-title svg { width: 14px; height: 14px; flex-shrink: 0; }
.sd-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 3px 0; }
.sd-key { font-size: var(--fs-xs); color: var(--text-muted); flex-shrink: 0; }
.sd-val { font-size: var(--fs-sm); font-weight: 600; color: var(--text); text-align: right; min-width: 0; }
.sd-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-link { display: inline-flex; align-items: center; gap: 4px; color: var(--brand); }
.sd-link svg { width: 13px; height: 13px; }
.sd-link:hover { text-decoration: underline; }

/* ── Belge İÇ NOTU (yalnız ERP; yazdırılan/paylaşılan belgeye BASILMAZ) ──────
   "Listede vardı ama gelmedi / 2 adet eksik geldi" gibi kayıtlar. Amber şerit:
   tutar/ödeme bilgisinden görsel olarak ayrılsın, hesaplaşmada gözden kaçmasın. */
.sd-icnot { display: flex; align-items: flex-start; gap: var(--space-2); background: var(--yellow-soft); border: 1px solid var(--yellow); border-left-width: 3px; border-radius: var(--radius-sm); padding: var(--space-3); }
.sd-icnot > svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--yellow); margin-top: 1px; }
.sd-icnot-t { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.sd-icnot-t span { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-faint); }
.sd-icnot-b { font-size: var(--fs-sm); color: var(--text); white-space: pre-wrap; word-break: break-word; }
/* Liste satırındaki "iç not var" işareti */
.ic-not-rozet { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-left: 6px; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--yellow-soft); color: var(--yellow); flex: 0 0 auto; }
.ic-not-rozet svg { width: 13px; height: 13px; }

/* Bölüm etiketi (Satış Kalemleri / Ödeme Detayı) */
.sd-seclabel { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.sd-seclabel svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Kalemler tablosu */
.sd-items { width: 100%; border-collapse: collapse; }
.sd-items thead th { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; text-align: left; padding: 6px var(--space-2); background: var(--bg); border-bottom: 1px solid var(--border); }
.sd-items tbody td { padding: 8px var(--space-2); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); vertical-align: top; }
.sd-items tbody tr:last-child td { border-bottom: none; }
.sd-c { text-align: center; }
.sd-r { text-align: right; }
.sd-b { font-variant-numeric: tabular-nums; }
.sd-items .sd-r.money { font-weight: 700; color: var(--navy); white-space: nowrap; }
.sd-it-name { font-weight: 600; color: var(--text); }
.sd-prodlink { color: var(--brand); text-decoration: none; cursor: pointer; }
.sd-prodlink:hover { text-decoration: underline; }
.sd-it-code { font-size: var(--fs-xs); color: var(--text-faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-top: 1px; }
.sd-it-note { display: flex; align-items: flex-start; gap: 4px; margin-top: 3px; font-size: var(--fs-xs); color: var(--brand); }
.sd-it-note svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px; }
.sd-it-note span { white-space: pre-wrap; word-break: break-word; }
.sd-disc { color: var(--green); font-weight: 600; }

/* ── Sipariş sayım kutucuğu (onay bekleyen alışta "bu kalem geldi") ───────────
   Mal kabul ederken sayarken yeri kaybetmemek için. İşaretli satır açık sarı.
   ⛔ Kalıcı DEĞİL: hiçbir yere kaydedilmez, modal kapanınca sıfırlanır. */
.sd-sayim-progress { margin-left: auto; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.sd-sayim-progress b { color: var(--brand); font-weight: 800; }
.sd-sayim-cell { width: 1%; white-space: nowrap; cursor: pointer; }
.sd-sayim-cb { width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; vertical-align: middle; }
.sd-items tbody tr.sd-row--sayildi td { background: var(--yellow-soft); }
.sd-vade-late { color: var(--red); font-weight: 700; }
.sd-kampanya { display: inline-block; background: var(--brand); color: #fff; font-weight: 800; font-size: 9px; padding: 1px 5px; border-radius: var(--radius-full); vertical-align: middle; letter-spacing: .02em; }
/* Vade sütunu: yalnız "Açık Hesap" ödeme filtresi seçiliyken (#page.tbl-show-vade) görünür */
.col-vade { display: none; }
.tbl-show-vade .col-vade { display: table-cell; }
/* Belge No sütunu: yalnız filtre panelindeki "Belge No Göster" işaretliyken görünür (kalıcı: A.prefs) */
.col-belgeno { display: none; }
.tbl-show-belgeno .col-belgeno { display: table-cell; }

/* Toplam kutusu — sağa yaslı */
.sd-total { max-width: 320px; margin-left: auto; width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); }
.sd-trow { display: flex; justify-content: space-between; gap: var(--space-3); padding: 3px 0; font-size: var(--fs-sm); color: var(--text-muted); }
.sd-trow .money { color: var(--text); font-weight: 600; }
.sd-disc-row, .sd-disc-row .money { color: var(--green); }
.sd-grand { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 2px solid var(--border); }
.sd-grand > span:first-child { font-size: var(--fs-sm); font-weight: 800; color: var(--navy); text-transform: uppercase; letter-spacing: .03em; }
.sd-grand .money { font-size: var(--fs-lg); font-weight: 800; color: var(--brand); }

/* Ödeme detay listesi */
.sd-pay { display: flex; flex-direction: column; gap: 4px; }
.sd-prow { display: flex; justify-content: space-between; gap: var(--space-3); padding: 8px var(--space-3); background: var(--bg); border-radius: var(--radius-sm); }
.sd-pname { font-size: var(--fs-sm); color: var(--text-muted); }
.sd-pval { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }

/* Bağlı iadeler / iade kaynağı — tıklanabilir mini satırlar */
#sdReturns { margin-top: var(--space-4); }
.sd-returns { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.sd-return-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-3);
  width: 100%; text-align: left; padding: 8px var(--space-3); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
  font: inherit; color: var(--text); transition: border-color .15s, background .15s;
}
.sd-return-row:hover { border-color: var(--brand); background: var(--row-hover); }
.sd-return-no { font-weight: 700; font-size: var(--fs-sm); }
.sd-return-date { font-size: var(--fs-xs); color: var(--text-muted); }
.sd-return-amt { font-size: var(--fs-sm); font-weight: 700; }
.sd-return-amt.is-neg { color: var(--red); }

@media (max-width: 560px) {
  .sd-grid { grid-template-columns: 1fr; }
  .sd-total { max-width: none; }
}

/* ── Fiş (yazdırma) — satış (printSale) + alış (printAlis) ortak; global. ── */
.fis { font-size: var(--fs-sm); }
.fis-head { text-align: center; padding-bottom: var(--space-3); border-bottom: 1px dashed var(--border); margin-bottom: var(--space-3); }
.fis-head strong { font-size: var(--fs-lg); }
.fis-line { display: flex; justify-content: space-between; padding: 3px 0; }
.fis-tot { display: flex; justify-content: space-between; padding: 3px 0; color: var(--text-muted); }
.fis-tot.fis-grand { font-weight: 800; color: var(--text); border-top: 1px dashed var(--border); margin-top: var(--space-2); padding-top: var(--space-2); font-size: var(--fs-md); }
.fis-pay { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--border); text-align: center; color: var(--text-muted); }

/* ── İptal modalı (satış + alış ortak; doCancel) — uyarı + İptal Nedeni ── */
.cancel-warn { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); background: var(--red-soft); border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
.cancel-warn svg { flex: none; width: 26px; height: 26px; color: var(--red); }
.cancel-msg { font-weight: 700; color: var(--text); margin-bottom: 4px; }
.cancel-note { line-height: 1.45; }
.cancel-lbl { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin-bottom: 6px; }
.cancel-form textarea.input { width: 100%; resize: vertical; }

/* ── Onayda stok uyarısı (confirmApprove) — eksik kalem listesi ── */
.sa-warn { display: flex; flex-direction: column; gap: var(--space-3); }
.sa-warn-head { font-weight: 700; color: var(--text); }
.sa-warn-list { display: flex; flex-direction: column; gap: 6px; }
.sa-warn-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding: 8px var(--space-3); background: var(--red-soft); border-radius: var(--radius-sm); }
.sa-warn-name { font-weight: 600; color: var(--text); }
.sa-warn-stock { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }
.sa-warn-stock strong { color: var(--red); }
.sa-warn-note { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.45; }

/* ── İade modalı (openReturn) — uyarı turuncu, kalem tablosu + adet inputları ── */
.ret-warn { background: var(--brand-glow, rgba(200,90,30,.08)); }
.ret-warn svg { color: var(--brand); }
.ret-items .ret-qty { width: 72px; padding: 4px 6px; text-align: center; }
/* İade Kalemleri başlığında sağa yaslı toplu butonlar (Tümünü İade Al / Temizle). */
.ret-seclabel .ret-bulk { margin-left: auto; display: flex; gap: 6px; text-transform: none; letter-spacing: 0; }
.ret-row--off { opacity: .5; }
.ret-grid { margin-top: var(--space-4); }
/* Geri Ödeme kartı: etiket sol · select kalan genişliği doldurur (dar görünme sorunu). */
.ret-grid .sd-card .sd-row { gap: var(--space-2); }
.ret-grid .sd-card .sd-row .sd-val { flex: 1 1 auto; min-width: 0; text-align: left; }
.ret-grid .sd-card .sd-row .sd-val .select { width: 100%; max-width: none; min-width: 0; text-align: left; }
.ret-acik-note { line-height: 1.4; }

/* ── Detay modal footer + Paylaş kutucukları (satış + alış ortak) ── */
.sd-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); width: 100%; }
.share-row { display: flex; gap: var(--space-3); flex: 1 1 auto; }
.share-box { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
  color: var(--text); font-size: var(--fs-sm); font-weight: 600; transition: border-color var(--transition), color var(--transition), background var(--transition); }
.share-box svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.share-box:hover { border-color: var(--brand); color: var(--brand); background: var(--surface); }
.share-box--wa:hover { border-color: #25d366; color: #1da851; }

/* ── Dar ekran: filtre satırı + aksiyonlar alt alta (satış + alış ortak) ──────
   Burada araç çubuğunu dikey diz, filtreleri/butonları tam genişlik yap. */
@media (max-width: 768px) {
  .sales-page .action-bar-tools { flex-direction: column; align-items: stretch; }
  .sales-page .ab-actions { width: 100%; }
  .sales-page .ab-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Satış detay total kutusu: Genel Toplam altında peşin ödemeler (yeşil, "ödendi") + Bakiye. */
.sd-total .sd-paysep { height: 1px; background: var(--border); margin: 8px 0 6px; }
.sd-total .sd-paid-row span:last-child { color: var(--green); font-weight: 600; }
.sd-total .sd-bakiye-row { font-weight: 700; }
.sd-total .sd-bakiye-row span:last-child { color: var(--brand); }

/* Satış detayında eksik (kısmi) teslimat uyarı şeridi */
.sd-eksik {
  display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-3);
  padding: 9px 12px; border-radius: var(--radius);
  background: var(--yellow-soft, #fdf6e3); border: 1px solid var(--yellow, #e0a800);
  color: var(--text); font-size: var(--fs-sm);
}
.sd-eksik svg { width: 18px; height: 18px; flex: none; color: var(--yellow, #e0a800); }
.sd-eksik a { color: var(--brand); font-weight: 600; text-decoration: none; }
.sd-eksik a:hover { text-decoration: underline; }

/* Paylaş butonu → yukarı açılır dropdown (E-posta / WhatsApp). Satış+alış detayında ortak. */
.sd-share-wrap { position: relative; display: inline-flex; }
.sd-share-menu {
  position: absolute; bottom: calc(100% + 6px); right: 0; min-width: 230px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px;
  display: flex; flex-direction: column; gap: 2px; z-index: 60;
}
.sd-share-menu[hidden] { display: none; }
.sd-share-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; background: transparent; border: 0;
  border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-sm);
  color: var(--text); cursor: pointer; text-align: left;
}
.sd-share-item:hover { background: var(--surface-alt); color: var(--brand); }
.sd-share-item svg { width: 18px; height: 18px; flex: none; }

/* ============================================================
   Satış Faturaları — yeniden tasarım (sf- ad alanı)
   ⛔ SABİT HEX YOK: tasarımdaki ara tonlar (#FAF9FD, #FDFCFF, #EFECF6,
      #FDF6F2, #F0C9C9) token'lardan color-mix ile üretilir → koyu tema
      (core/themes.css) token'ları çevirince bu yüzeyler de birlikte döner.
   ============================================================ */
.sf-page {
  /* Şerit yüzeyleri: liste satır ayracı, grup başlığı, hızlı bakış, seçili satır. */
  --sf-rowline:  color-mix(in srgb, var(--border) 65%, var(--surface));
  --sf-groupbg:  color-mix(in srgb, var(--surface-alt) 55%, var(--surface));
  --sf-peekbg:   color-mix(in srgb, var(--surface-alt) 25%, var(--surface));
  --sf-selbg:    color-mix(in srgb, var(--brand-tint) 45%, var(--surface));
  --sf-redline:  color-mix(in srgb, var(--red) 30%, var(--surface));
  --sf-reddeep:  color-mix(in srgb, var(--red) 78%, var(--navy-deep));
  display: flex; flex-direction: column; gap: 0;
}

/* ── Kayıtlı görünüm sekmeleri ─────────────────────────────────────────── */
.sf-tabs {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0;
  padding: 0 var(--space-4);
}
.sf-tabs-list { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; }
.sf-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 13px 14px; border: 0; border-bottom: 2px solid transparent;
  background: none; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text-muted); cursor: pointer; white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.sf-tab:hover { color: var(--text); }
.sf-tab.is-on { color: var(--brand); font-weight: 800; border-bottom-color: var(--brand); }
.sf-tab-n {
  display: inline-flex; align-items: center; padding: 1px 7px;
  border-radius: var(--radius-full); font-size: 11px; font-weight: 800;
  background: var(--bg); color: var(--text-muted);
}
.sf-tab-n--brand  { background: var(--brand-tint); color: var(--brand); }
.sf-tab-n--yellow { background: var(--yellow-soft); color: var(--yellow); }
.sf-tab-n--red    { background: var(--red-soft); color: var(--red); }
.sf-tab-x { margin-left: 2px; font-size: 11px; color: var(--text-faint); padding: 0 2px; }
.sf-tab-x:hover { color: var(--red); }
.sf-tabs-tools { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.sf-tabs-tool {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; font: inherit; font-size: var(--fs-xs); font-weight: 600;
  color: var(--text-faint); cursor: pointer; white-space: nowrap;
}
.sf-tabs-tool:hover { color: var(--brand); background: var(--brand-tint); }
.sf-tabs-tool[aria-pressed="true"] { color: var(--brand); border-color: var(--border); background: var(--brand-tint); }
.sf-tabs-tool svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── KPI şeridi (4 büyük kart yerine tek satır) ────────────────────────── */
.sf-kpi {
  display: flex; align-items: stretch; gap: var(--space-3); flex-wrap: wrap;
  padding: 10px var(--space-6) 10px var(--space-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  margin-bottom: var(--space-4);
}
.sf-kpi-cells { display: flex; align-items: stretch; flex-wrap: wrap; min-width: 0; }
.sf-kpi-cell {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 0 22px 0 0; margin-right: 22px;
  border: 0; border-right: 1px solid var(--border); background: none;
  font: inherit; min-width: 150px; cursor: pointer;
}
.sf-kpi-cell:hover .sf-kpi-val { color: var(--brand); }
.sf-kpi-lbl { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
.sf-kpi-val { font-size: 17px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-kpi-val.is-red { color: var(--red); }
.sf-kpi-val.is-yellow { color: var(--yellow); }
.sf-kpi-sub { font-size: 11.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.sf-kpi-total { display: flex; flex-direction: column; justify-content: center; gap: 2px; margin-left: auto; text-align: right; }
.sf-kpi-total:empty { display: none; }
.sf-kpi-total-val { font-size: var(--fs-sm); font-weight: 700; color: var(--navy); white-space: nowrap; }
.sf-kpi-total-val .money { color: var(--navy); }
.sf-kpi-total-sub { font-weight: 500; color: var(--text-muted); font-size: var(--fs-xs); }

/* ── Liste + sağ panel kabuğu ──────────────────────────────────────────── */
.sf-shell { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-4); }
.sf-main { min-width: 0; }
.sf-panel { display: none; }
@media (min-width: 1280px) {
  .sf-shell.has-panel { grid-template-columns: minmax(0, 1fr) 428px; }
  .sf-shell.has-panel .sf-panel {
    display: flex; flex-direction: column;
    position: sticky; top: calc(var(--topbar-height) + var(--space-3));
    max-height: calc(100vh - var(--topbar-height) - var(--space-6));
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
  }
}
.sf-panel[hidden] { display: none !important; }
.sf-panel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-5); }
.sf-panel-foot {
  flex: 0 0 auto; padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border); background: var(--surface);
}

/* ── Arama kutusu + "Müşteriye Satış" split butonu ─────────────────────── */
/* Tasarımdaki 340px arama; dar ekranda araç çubuğuyla birlikte tam genişliğe düşer. */
#salesTable .tbl-search { width: 340px; max-width: 100%; }
.sf-split { display: inline-flex; align-items: stretch; }
.sf-split > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sf-split-more {
  display: grid; place-items: center; width: 34px; flex: none;
  border: 0; border-left: 1px solid color-mix(in srgb, var(--brand-dark) 60%, var(--brand));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--brand-dark); color: #fff; cursor: pointer;
}
.sf-split-more:hover { background: color-mix(in srgb, var(--brand-dark) 82%, var(--navy-deep)); }
.sf-split-more svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Klavye ipuçları (alt bar) */
.sf-keys { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4);
  margin-top: var(--space-2); font-size: 11.5px; font-weight: 600; color: var(--text-faint); }
.sf-keys kbd { font: inherit; padding: 1px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); }

/* ── Liste hücreleri ───────────────────────────────────────────────────── */
#salesTable .data-table tbody td { padding-top: 10px; padding-bottom: 10px; border-bottom-color: var(--sf-rowline); }
#salesTable .data-table tbody tr.is-selected { background: var(--sf-selbg); }
#salesTable .data-table tbody tr.is-active,
#salesTable .data-table tbody tr.is-active:hover { background: var(--brand-tint); }
#salesTable .data-table tbody tr.is-focus > td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
#salesTable .sf-c-belge { width: 108px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
#salesTable .sf-c-tarih { width: 96px; }
#salesTable .sf-c-cust { min-width: 180px; }
#salesTable .sf-c-urun { width: 132px; color: var(--text-muted); }
#salesTable .sf-c-tutar { width: 160px; text-align: right; }
#salesTable .data-table thead th.sf-c-tutar { text-align: right; }
#salesTable .sf-c-odeme { width: 128px; }
#salesTable .sf-c-durum { width: 140px; }
#salesTable .sf-c-islem { width: 84px; text-align: right; }
#salesTable .data-table thead th.sf-c-islem { text-align: right; }
#salesTable .sf-c-islem .row-actions { justify-content: flex-end; }
/* Gruplama açıkken tarih grup başlığında → ayrı sütun gereksiz. */
.sf-shell.is-grouped .sf-c-tarih { display: none; }
/*
  Panel AÇIKKEN liste ~430px daralır. Sütunlar aynı ölçüde kalırsa Ödeme/Durum/İşlem
  yatay kaydırmaya düşer. Burada nefes payı kısılır — sütunlar KAYBOLMAZ, sadece
  sıkışır; kalanı yine `.table-wrap { overflow-x:auto }` taşır.
*/
@media (min-width: 1280px) {
  .sf-shell.has-panel #salesTable .data-table thead th,
  .sf-shell.has-panel #salesTable .data-table tbody td { padding-left: var(--space-2); padding-right: var(--space-2); }
  .sf-shell.has-panel #salesTable .sf-c-belge { width: 96px; }
  .sf-shell.has-panel #salesTable .sf-c-cust  { min-width: 150px; }
  .sf-shell.has-panel #salesTable .sf-c-urun  { width: 112px; }
  .sf-shell.has-panel #salesTable .sf-c-tutar { width: 146px; }
  .sf-shell.has-panel #salesTable .sf-c-odeme { width: 104px; }
  .sf-shell.has-panel #salesTable .sf-c-durum { width: 116px; }
  .sf-shell.has-panel #salesTable .sf-c-islem { width: 74px; }
  .sf-shell.has-panel #salesTable .col-select { width: 32px; }
}

.sf-cust { align-items: center; gap: 9px; min-width: 0; }
.sf-cust-body { display: flex; flex-direction: column; min-width: 0; }
.sf-cust-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-cust-sub { font-size: 11.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sf-urun { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sf-urun svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--border-strong); }

.sf-tut { display: block; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-kalan { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-faint); white-space: nowrap; }
.sf-kalan.is-red { color: var(--red); }

.sf-durum { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.sf-durum .sf-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.sf-durum.is-ok { color: var(--green); }
.sf-durum.is-warn { color: var(--yellow); }
.sf-durum.is-bad { color: var(--red); }
.sf-dot-ek { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--text-faint); }

/* Kart görünümünde tutarın altındaki kâr satırı (liste sütunundaki diziliş ile aynı). */
.sf-card-amt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ── Tarih grubu başlığı + satır-içi hızlı bakış (tam genişlik satırlar) ── */
#salesTable .tbl-row-full > td { background: transparent; padding: 0; border-bottom: 1px solid var(--sf-rowline); }
.sf-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; background: var(--sf-groupbg); }
.sf-group-t { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--navy); }
.sf-group-s { font-size: var(--fs-xs); font-weight: 600; color: var(--text-faint); }
/*
  ⚠ GENİŞLİK KAPAKLI: hızlı bakış, yatay kaydırılabilen liste kabının içinde ve
  hücresi TABLO kadar geniş. `1fr` verilirse birim fiyat/tutar sütunları tablonun
  sağ ucuna gider — panel açıkken görünür alanın dışında kalır ve kullanıcı
  "fiyatlar yok" sanır. Kapak, sütunları her zaman ilk ekranda tutar.
*/
.sf-peek { background: var(--sf-peekbg); padding: 0 14px 12px 52px; }
.sf-peek-h { display: flex; align-items: center; gap: 8px; padding: 9px 0 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
.sf-peek-h svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-peek-body { display: flex; flex-direction: column; font-size: 12.5px; width: min(760px, 100%); }
.sf-peek-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 120px 120px; align-items: baseline;
  border-top: 1px dashed var(--border); padding: 7px 0; }
.sf-peek-n { font-weight: 600; min-width: 0; }
.sf-peek-n em { display: block; font-style: normal; font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
.sf-peek-q { text-align: center; color: var(--text-muted); }
.sf-peek-u { text-align: right; color: var(--text-muted); }
.sf-peek-t { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Açılır işlem menüsü (satır "Diğer işlemler" + panel "Daha") ────────── */
/* Liste kabı overflow-x:auto → menü body'ye fixed basılır, kırpılmaz.
   ⛔ z-index MODALIN ÜSTÜNDE olmalı (--z-popover): detay dar ekranda/dış çağrıda
   modalda açılıyor, menü ise body'nin çocuğu → --z-dropdown ile örtünün altında
   kalır ve "Daha"/"Paylaş" tıklanamaz görünürdü. */
.sf-menu {
  position: fixed; z-index: var(--z-popover); min-width: 214px; max-width: 280px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.sf-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; background: transparent; border: 0; border-radius: var(--radius-sm);
  font: inherit; font-size: var(--fs-sm); color: var(--text); cursor: pointer; text-align: left;
}
.sf-menu-item:hover { background: var(--surface-alt); color: var(--brand); }
.sf-menu-item.is-danger:hover { background: var(--red-soft); color: var(--red); }
.sf-menu-item.is-ok:hover { background: var(--green-soft); color: var(--green); }
.sf-menu-item svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Belge detayı (panel + modal ORTAK) ────────────────────────────────── */
.sf-d { gap: var(--space-3); }
.sf-d-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.sf-d-head-lbl { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
.sf-d-head-no { font-size: 20px; font-weight: 800; color: var(--navy); line-height: 1.2; }
.sf-d-head-sub { margin-top: 5px; font-size: 12.5px; color: var(--text-muted); }
.sf-icon-btn {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: var(--radius-sm); background: var(--surface);
  border: 1px solid var(--border); color: var(--text-muted); cursor: pointer;
}
.sf-icon-btn:hover { border-color: var(--brand); color: var(--brand); }
.sf-icon-btn svg { width: 16px; height: 16px; }
.sf-d-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sf-d-badges .badge { text-decoration: none; }
.sf-d-tabs { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.sf-d-tab {
  padding: 11px 12px; border: 0; border-bottom: 2px solid transparent; background: none;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.sf-d-tab:hover { color: var(--text); }
.sf-d-tab.is-on { color: var(--brand); font-weight: 800; border-bottom-color: var(--brand); }
.sf-d-panes { min-width: 0; }
.sf-d-pane { display: flex; flex-direction: column; gap: var(--space-3); }
.sf-d-pane[hidden] { display: none; }

.sf-d-cust { display: flex; align-items: center; gap: 11px; padding: 11px 12px;
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.sf-d-avatar { width: 34px; height: 34px; font-size: 12px; }
.sf-d-cust-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sf-d-cust-name { font-weight: 700; font-size: 13.5px; color: var(--brand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-d-cust-meta { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sf-d-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.sf-d-box { padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-alt); }
.sf-d-box-lbl { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
.sf-d-box-val { font-size: 18px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.sf-d-box-sub { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.sf-d-box--red { background: var(--red-soft); border-color: var(--sf-redline); }
.sf-d-box--red .sf-d-box-lbl, .sf-d-box--red .sf-d-box-sub { color: var(--sf-reddeep); }
.sf-d-box--red .sf-d-box-val { color: var(--red); }
.sf-d-total { max-width: none; margin-left: 0; }

/* Tahsilat ekle kutusu */
.sf-d-collect { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--sf-peekbg); }
.sf-d-collect-t { display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); }
.sf-d-collect-t svg { width: 14px; height: 14px; flex: none; color: var(--brand); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sf-d-collect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.sf-d-f { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); min-width: 0; }
.sf-d-f--wide { grid-column: 1 / -1; }
.sf-d-f .input, .sf-d-f .select { width: 100%; min-width: 0; max-width: none; }
.sf-d-collect-foot { display: flex; align-items: center; gap: var(--space-2); margin-top: 10px; }
/* Dolgu yeşil → üstündeki yazı her iki temada da BEYAZ (token değil: zemin sabit renkli). */
.sf-btn-green { flex: 1; background: var(--green); border-color: var(--green); color: #fff; }
.sf-btn-green:hover { background: color-mix(in srgb, var(--green) 85%, var(--navy-deep)); border-color: color-mix(in srgb, var(--green) 85%, var(--navy-deep)); color: #fff; }

/* Fatura önizleme (yazdırma ile aynı üretici; izole iframe) */
.sf-d-preview { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
/* Fatura KÂĞIT üzerinde basılır → önizleme zemini temadan bağımsız beyaz kalır. */
.sf-d-preview-frame { display: block; width: 100%; height: 560px; border: 0; background: #fff; }

.sf-d-foot { justify-content: flex-start; }

/* ── Dar ekran ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sf-tabs { border-radius: var(--radius); border-bottom: 1px solid var(--border); }
  .sf-kpi { border-radius: var(--radius); margin-top: var(--space-2); }
  .sf-kpi-cell { border-right: 0; margin-right: 0; padding-right: var(--space-4); min-width: 132px; }
  .sf-kpi-total { margin-left: 0; text-align: left; }
  /* Kart modunda tam-genişlik satırlar "etiket : değer" kalıbına GİRMEZ. */
  #salesTable .data-table tbody tr.tbl-row-full { padding: 0; border: 0; background: none; box-shadow: none; margin-bottom: var(--space-2); }
  #salesTable .tbl-row-full > td { display: block; padding: 0; border-bottom: 0; }
  #salesTable .tbl-row-full > td::before { content: none; }
  .sf-peek { padding-left: 14px; }
  .sf-peek-row { grid-template-columns: minmax(0, 1fr) 60px 90px; }
  .sf-peek-u { display: none; }
  .sf-d-collect-grid { grid-template-columns: 1fr; }
  #salesTable .tbl-search { width: 100%; }
}