/* ============================================================
   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: var(--shadow-sm); padding: var(--space-3) var(--space-4);
}
.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: filtreler solda, butonlar sağda (aralarında boşluk) */
.sales-page .action-bar-tools { flex: 1; justify-content: space-between; }
.sales-filters { display: flex; gap: var(--space-2); align-items: center; flex-wrap: nowrap; }
.sales-filters .select, .sales-filters input { width: auto; min-width: 0; padding-top: 7px; padding-bottom: 7px; }
/* Tarih filtresi: takvim ikonu + metin tam görünsün diye makul min genişlik. */
.sales-filters input[type="date"] { min-width: 138px; }
.sales-filters .sf-daterange { display: inline-flex; align-items: center; gap: 4px; }
.sales-filters .sf-dash { color: var(--text-muted); }
.sales-filters .sf-clear { padding: 6px; line-height: 0; flex: none; }
.sales-filters .sf-clear svg { width: 16px; height: 16px; }

/* 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; }

/* Brüt Kâr sütunu hücresi (kar.goruntule). İade → negatif kırmızı. */
.sd-profit-cell { color: var(--green); font-weight: 600; }
.sd-profit-cell.is-neg { color: var(--red); }

/* Satış aksiyon butonları — dashboard "açık tonlu" stiliyle aynı mekanizma:
   --tone ilgili sistem token'ı; zemin token'ın yüzeyle ~%10 karışımı (sakin),
   kenarlık ve yazı/ikon (stroke=currentColor) token renginde. Hover'da koyulaşır.
   Perakende → açık yeşil, Kayıtlı Müşteriye → açık turuncu (brand). */
.sale-act {
  color: var(--tone, var(--text));
  background: color-mix(in srgb, var(--tone, var(--text)) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--tone, var(--text)) 28%, var(--border));
}
.sale-act:hover {
  background: color-mix(in srgb, var(--tone, var(--text)) 17%, var(--surface));
  border-color: color-mix(in srgb, var(--tone, var(--text)) 46%, var(--border));
}
.sale-act--green  { --tone: var(--green); }
.sale-act--orange { --tone: var(--brand); }

.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; }

@media (min-width: 900px) {
  .sum-cards { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  /* Satışlar 4 kartı TEK SATIR (kullanıcı tercihi); Alışlar 4 kart auto-fit ile tek satır kalır. */
  .sales-page .sum-cards { grid-template-columns: repeat(4, 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; }

/* 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-it-code { font-size: var(--fs-xs); color: var(--text-faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-top: 1px; }
.sd-disc { color: var(--green); font-weight: 600; }
.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); }
.sd-profit, .sd-profit .money { color: var(--green); font-weight: 600; }

/* Ö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) ──────
   .sales-filters masaüstünde nowrap; mobilde sarmazsa sayfayı yatay taşırır.
   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-filters { flex-wrap: wrap; width: 100%; }
  .sales-filters .select { flex: 1 1 140px; }
  .sales-filters .sf-daterange { flex: 1 1 100%; }
  .sales-filters .sf-daterange input[type="date"] { flex: 1 1 0; min-width: 0; }
  .sales-filters .sf-clear { flex: 0 0 auto; }
  .sales-page .ab-actions { width: 100%; }
  .sales-page .ab-actions .btn { flex: 1 1 auto; justify-content: center; }
}