/* ============================================================
   Component: data-table
   ============================================================ */
.table-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.data-table thead th {
  text-align: left; padding: 12px var(--space-4);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--text-muted); background: var(--surface-alt);
  border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0;
}
.data-table tbody td {
  padding: 11px var(--space-4); border-bottom: 1px solid var(--border);
  color: var(--text); vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr.is-clickable { cursor: pointer; }
.data-table tbody tr.is-clickable:hover { background: var(--row-hover); }
/* Modal içindeki tablolarda her satır hover'da açık turuncu */
.modal-backdrop .data-table tbody tr:hover { background: var(--row-hover); }

.table-empty, .table-loading {
  text-align: center; color: var(--text-muted); padding: var(--space-10) var(--space-4) !important;
}

/* Sayısal sütunlar: hizalı rakam ama içerik+başlık SOLA (diğer sütunlarla tutarlı) */
.col-num { font-variant-numeric: tabular-nums; }
.col-center { text-align: center; }
/* Başlık, sütun sınıfının hizasını izlesin (specificity için thead th'i ez) */
.data-table thead th.col-center { text-align: center; }
.col-nowrap { white-space: nowrap; }

/* Tıkla-sırala başlıkları (opt-in: sortKey'li sütunlar). Yön oku ▲/▼. */
.data-table thead th.th-sort { cursor: pointer; user-select: none; }
.data-table thead th.th-sort:hover { color: var(--text); }
.th-sort-ind { display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: middle;
  border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: .25; }
.data-table thead th.th-sort .th-sort-ind { border-top: 5px solid currentColor; }
.data-table thead th.is-sorted-asc .th-sort-ind { border-top: none; border-bottom: 5px solid var(--brand); opacity: 1; }
.data-table thead th.is-sorted-desc .th-sort-ind { border-top: 5px solid var(--brand); border-bottom: none; opacity: 1; }
.data-table thead th.is-sorted-asc, .data-table thead th.is-sorted-desc { color: var(--brand); }

/* ── Dar ekran: kart-listesi modu ───────────────────────────────────────────
   Aynı <table> markup'ı telefonda yatay taşmasın diye satır-bazlı karta dönüşür.
   Her hücre "etiket : değer" satırı olur (etiket = data-label, CSS ::before).
   thead gizlenir (sıralama masaüstü davranışı). Tüm data-table'lar kazanır;
   sayfa-özel CSS gerekmez. Masaüstünü etkilemez (yalnız bu breakpoint'te). */
@media (max-width: 768px) {
  .table-wrap {
    overflow-x: visible; border: 0; background: transparent; box-shadow: none;
    border-radius: 0;
  }
  .data-table { display: block; font-size: var(--fs-sm); }
  .data-table thead { display: none; }
  .data-table tbody { display: block; }
  .data-table tbody tr {
    display: block; position: relative;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-3); padding: var(--space-1) var(--space-4);
  }
  .data-table tbody tr:last-child td { border-bottom: 0; }   /* desktop kuralını geçersiz kıl */
  .data-table tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: 9px 0; border-bottom: 1px dashed var(--border);
    text-align: right; white-space: normal; min-height: 38px;
  }
  .data-table tbody td:last-child { border-bottom: 0; }
  /* Sütun adı etiketi (sol). data-label yoksa boş kalır → değer tam genişlik. */
  .data-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto; margin-right: var(--space-4);
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--text-muted); text-align: left; white-space: nowrap;
  }
  /* col-num/col-center/col-nowrap hizalaması kart modunda devre dışı (flex yönetir). */
  .data-table tbody td.col-center, .data-table tbody td.col-num, .data-table tbody td.col-nowrap {
    text-align: right;
  }
  /* İşlemler satırı: ikonlar sağa yaslı, gerekirse sarsın. */
  .data-table tbody td .row-actions { justify-content: flex-end; flex-wrap: wrap; }
  /* Boş/yükleniyor: tek bloklu ortalı (etiketsiz). */
  .data-table tbody td.table-empty, .data-table tbody td.table-loading {
    display: block; text-align: center; border-bottom: 0;
  }
  .data-table tbody td.table-empty::before, .data-table tbody td.table-loading::before { content: none; }
  /* Boş-durum tablosu: tek satır → kart moduna GİRMEZ; başlıklar dar ekranda da görünür. */
  .table-wrap--empty { overflow-x: auto; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
  .data-table--empty { display: table; width: 100%; }
  .data-table--empty thead { display: table-header-group; }
  .data-table--empty tbody { display: table-row-group; }
  .data-table--empty tbody tr { display: table-row; background: none; border: 0; box-shadow: none; margin: 0; padding: 0; }
  .data-table--empty tbody td.table-empty { display: table-cell; }
}

/* ============================================================
   Opt-in tablo özellikleri: filtre paneli, toplu işlem çubuğu,
   yoğunluk (density), satır seçim sütunu.
   ============================================================ */

/* — Filtre paneli toggle butonundaki aktif filtre sayısı rozeti — */
.tbl-filter-toggle { position: relative; }
.tbl-filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px;
  border-radius: var(--radius-full); background: #fff; color: var(--brand);
  font-size: 11px; font-weight: 700; line-height: 1;
}

/* — Filtre paneli — */
.tbl-filter-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
}
.tbl-filter-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}
.tbl-filter-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Aralık alanları (tarih / sayı) iki giriş taşır → tek select'in iki katı genişlik. */
.tbl-filter-field--wide { grid-column: span 2; }
.tbl-filter-lbl { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.tbl-filter-range { display: flex; align-items: center; gap: var(--space-2); }
.tbl-filter-range .input { min-width: 0; flex: 1; }
.tbl-filter-range input[type="date"] { min-width: 124px; }
.tbl-filter-dash { color: var(--text-muted); }
.tbl-filter-toggle-field { flex-direction: row; align-items: center; gap: 8px; cursor: pointer; align-self: end; padding-bottom: 8px; }
.tbl-filter-toggle-field input { accent-color: var(--brand); width: 16px; height: 16px; }
.tbl-filter-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.tbl-filter-foot-left { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.tbl-filter-pt { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); cursor: pointer; user-select: none; }
.tbl-filter-pt input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }

/* — Toplu işlem (bulk) çubuğu — */
.tbl-bulkbar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  background: var(--brand-tint); border: 1px solid var(--brand);
  border-radius: var(--radius); padding: var(--space-2) var(--space-4); margin-bottom: var(--space-3);
}
.tbl-bulk-count { font-weight: 700; color: var(--brand); white-space: nowrap; }
.tbl-bulk-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; flex: 1; }
.tbl-bulk-clear { margin-left: auto; }

/* — Satır seçim sütunu — */
.col-select { width: 40px; text-align: center; }
.data-table thead th.col-select, .data-table tbody td.col-select { text-align: center; }
.tbl-select-all, .tbl-row-select { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.data-table tbody tr.is-selected { background: var(--brand-tint); }
.data-table tbody tr.is-selected:hover { background: var(--brand-tint); }

/* — Yoğunluk (density) — sıkışık satırlar; kişiye-özel tercih — */
.tbl-density-btn[aria-pressed="true"] { color: var(--brand); border-color: var(--brand); }
.table-wrap.is-compact .data-table tbody td { padding-top: 5px; padding-bottom: 5px; }
.table-wrap.is-compact .data-table thead th { padding-top: 7px; padding-bottom: 7px; }
.table-wrap.is-compact .data-table { font-size: var(--fs-xs); }
.table-wrap.is-compact .prod-thumb { width: 32px; height: 32px; }

/* — Sütun seçici (göster/gizle + sırala) popover — */
.tbl-colpick { position: relative; display: inline-flex; }
.tbl-colpick-btn[aria-expanded="true"] { color: var(--brand); border-color: var(--brand); }
.tbl-colpick-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 260px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: var(--space-2);
}
.tbl-colpick-head {
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .03em; padding: 4px var(--space-2) 6px;
}
.tbl-colpick-list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.tbl-colpick-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: 5px var(--space-2); border-radius: var(--radius-sm);
}
.tbl-colpick-row:hover { background: var(--row-hover); }
.tbl-colpick-lbl { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; min-width: 0; font-size: var(--fs-sm); }
.tbl-colpick-lbl input { accent-color: var(--brand); width: 16px; height: 16px; flex-shrink: 0; }
.tbl-colpick-lbl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-colpick-move { display: inline-flex; gap: 2px; flex-shrink: 0; }
.tbl-colpick-arrow {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer;
}
.tbl-colpick-arrow:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.tbl-colpick-arrow:disabled { opacity: .35; cursor: default; }
.tbl-colpick-arrow svg { width: 14px; height: 14px; }
.tbl-colpick-foot { display: flex; justify-content: flex-end; border-top: 1px solid var(--border); margin-top: var(--space-1); padding-top: var(--space-1); }

/* — Liste ⇄ Kart (kutucuk) görünümü — */
/* `[hidden]` UA kuralı, display taşıyan sınıflarca (.btn=inline-flex, .tbl-colpick=
   inline-flex, .tbl-cardsort=flex) ezilir (eşit özgüllük + author origin). Bu yüzden
   gizlenebilen araçlar için açık kural gerekli. */
.tbl-density-btn[hidden], .tbl-colpick[hidden], .tbl-view-btn[hidden],
.tbl-cardsort[hidden], .tbl-cardgrid[hidden] { display: none !important; }
/* Görünüm (Kart/Liste) toggle'ı ghost'tan daha belirgin: net yüzey + çerçeve. */
.btn.tbl-view-btn { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn.tbl-view-btn:hover:not(:disabled) { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); }
.tbl-view-btn[aria-pressed="true"] { color: var(--brand); border-color: var(--brand); background: var(--brand-tint); }
.tbl-cardsort {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.tbl-cardsort-lbl { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
/* Sıralama ölçütleri tek satırda yan yana radio'lar (dropdown yerine). */
.tbl-cardsort-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); }
.tbl-cardsort-radio { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; font-size: var(--fs-sm); color: var(--text-muted); }
.tbl-cardsort-radio input { accent-color: var(--brand); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.tbl-cardsort-radio.is-active { color: var(--text); font-weight: 600; }
.tbl-cardgrid {
  display: grid; gap: var(--space-3);
  /* --card-min: cfg.cardMinWidth ile sayfa başına ayarlanır (metin kartları daha geniş). */
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 150px), 1fr));
}
@media (max-width: 360px) { .tbl-cardgrid { grid-template-columns: 1fr; } }
.tbl-cardempty { grid-column: 1 / -1; padding: var(--space-6); text-align: center; color: var(--text-muted); }
.tbl-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition);
}
.tbl-card.is-clickable { cursor: pointer; }
.tbl-card.is-clickable:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.tbl-card.is-selected { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.tbl-card-check {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  display: grid; place-items: center; width: 26px; height: 26px;
  background: rgba(255,255,255,.9); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
}
.tbl-card-check input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
/* Ürün kartı iç düzeni (cardRender ile gelir) */
.pc-media { aspect-ratio: 1 / 1; background: var(--bg); display: block; }
.pc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-media--empty { display: grid; place-items: center; }
.pc-media--empty svg { width: 38px; height: 38px; fill: none; stroke: var(--border-strong); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pc-body { display: flex; flex-direction: column; gap: 3px; padding: var(--space-3); }
.pc-name { font-weight: 700; font-size: var(--fs-sm); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-code { font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.pc-meta { font-size: var(--fs-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: 4px; flex-wrap: wrap; }
.pc-price-wrap { display: flex; flex-direction: column; gap: 1px; }
.pc-price { font-weight: 800; color: var(--text); white-space: nowrap; }
/* Perakende altında maskeli alış fiyatı (yalnız kar.goruntule). Varsayılan (****),
   üzerine gelince/odaklanınca gerçek fiyat. */
.pc-cost-mask { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); cursor: help; white-space: nowrap; outline: none; }
.pc-cost-real { display: none; color: var(--navy); }
.pc-cost-mask:hover .pc-cost-stars, .pc-cost-mask:focus .pc-cost-stars { display: none; }
.pc-cost-mask:hover .pc-cost-real, .pc-cost-mask:focus .pc-cost-real { display: inline; }

/* Metin kartı iç düzeni — cari rehberi + işlem makbuzu kartlarında paylaşılır
   (cardRender ile gelir). Görselli ürün kartından (pc-*) farklı: medya yok,
   anahtar/değer satırları var, daha geniş (sayfa cardMinWidth ile ayarlar). */
/* flex:1 → kart, eşit-yükseklikli grid hücresini doldurur (.tbl-card stretch). */
.tcard { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); flex: 1 1 auto; }
.tcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.tcard-title { font-weight: 700; font-size: var(--fs-sm); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; }
.tcard-rows { display: flex; flex-direction: column; gap: 3px; }
.tcard-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-xs); }
.tcard-k { color: var(--text-muted); flex-shrink: 0; }
.tcard-v { color: var(--text); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tcard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  /* margin-top:auto → satır sayısı değişse de tutar+ikonlar HEP dipte sabit kalır. */
  margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--border); flex-wrap: wrap;
}
.tcard-amount { font-weight: 800; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
  /* Filtre alanları tek sütun; çubuklar sarsın. */
  .tbl-filter-fields { grid-template-columns: 1fr; }
  .tbl-filter-field--wide { grid-column: auto; }   /* span-2 mobilde tek sütuna düşer */
  .tbl-colpick-pop { width: min(280px, calc(100vw - 32px)); }
  /* Kart modunda seçim hücresi: etiketli satır yerine sağ üstte kompakt kalsın. */
  .data-table tbody td.col-select { justify-content: flex-end; }
  .data-table tbody td.col-select::before { content: "Seç"; }
  .tbl-bulkbar { position: sticky; bottom: 0; z-index: 20; }
}