/* Bolum 4 - Veri gorunumu: genel bakis, ozet kartlari (sekmeler), tablo (iki satirli hucreler,
 * kolon menusu), urun ayrintisinin icerigi. Siniflar tb- onekli; ortak parcalar stil.css'te. */

/* ---------------- genel bakis: tek sakin satir ---------------- */
.tb-genel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--text-2); padding: 0 4px; }
.tb-genel .tb-gb { cursor: help; white-space: nowrap; }
/* En dar telefonda (320 px) "6 / 3 / 1 100+ / 300+ / 1.000+ satan" tek satira sigmaz: kirilabilir
   (9 Ekim 2026, paylasim isiyle; ISTEKLER) */
@media (max-width: 360px) { .tb-genel .tb-gb { white-space: normal; } }
.tb-genel .tb-gb b { color: var(--text); }
.tb-genel .tb-ayrac { color: var(--text-3); }

/* ---------------- ozet kartlari: buyuk sayi, altinda kucuk etiket ---------------- */
/* Kartlar esit: 4'te, 5'te (Satıcısı yok) ya da sonradan eklenenlerle tek satir */
.tb-kovalar { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.tb-kova {
  display: flex; flex-direction: column; gap: 4px; padding: 16px; text-align: left; cursor: pointer;
  border: 0; border-radius: var(--r-card); background: var(--surface); color: var(--text);
}
.tb-kova:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.tb-kova.tb-secili { box-shadow: inset 0 0 0 2px var(--link); }
.tb-kova .tb-n { font-size: 28px; line-height: 36px; font-weight: 500; }
.tb-kova .tb-ad { color: var(--text-2); }
.tb-kova.tb-renk-iyi .tb-n { color: var(--ok); }
.tb-kova.tb-renk-kotu .tb-n { color: var(--bad); }
.tb-kova.tb-renk-notr .tb-n { color: var(--na); }
.tb-kova.tb-renk-ana .tb-n { color: var(--link); }

/* ---------------- tablo ---------------- */
.tb-kart { overflow: visible; }
.arac-cubugu { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tb-kolon-kok { margin-left: auto; }
/* arama (tasarim: Main): tablonun ust satirinda solda */
.tb-ara { position: relative; display: flex; align-items: center; width: 320px; max-width: 100%; }
.tb-ara > .ikon { position: absolute; left: 12px; color: var(--text-3); pointer-events: none; }
.tb-ara input { width: 100%; padding-left: 36px; }
.tb-ust #tabloBaslik { padding-left: 8px; }
.tb-kolon-menu { max-height: 60vh; overflow-y: auto; min-width: 320px; }
.tb-kolon-menu .menu-oge { height: 36px; }
/* hazir setler (tasarim: Bilesenler "Kolon yonetimi"): menunun ustunde bolumlu secici */
.tb-setler { width: 100%; margin-bottom: 4px; }
.tb-setler button { flex: 1; padding: 0 8px; }
/* En dar telefonda (320 px) dort set tek satira sigmaz (menu yana kayiyor, "Tumu" kesik
   kaliyordu): ikiser iki satira kirilir (9 Ekim 2026, paylasim isiyle; ISTEKLER) */
@media (max-width: 360px) {
  .tb-setler { flex-wrap: wrap; height: auto; border-radius: var(--r-card); }
  .tb-setler button { flex: 1 1 40%; height: 36px; }      /* ikiser: 2 x 2 */
}
.tb-kolon-liste { display: flex; flex-direction: column; gap: 0; }
.tb-kolon-oge { padding: 0 4px 0 16px; cursor: default; }
.tb-kolon-ad { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; height: 100%; }
.tb-tutamak { width: 28px; height: 28px; color: var(--text-3); cursor: grab; touch-action: none; }
.tb-tasiniyor { background: var(--link-bg); }
.tb-tasiniyor .tb-tutamak { cursor: grabbing; }
.tb-tablo td { height: 56px; white-space: nowrap; }
/* Urun kolonu kalan butun yeri alir, uzun ad "..." ile kesilir; digerleri icerigi kadar */
.tb-tablo { min-width: 880px; }
.tb-tablo .tb-k-urun { width: 100%; max-width: 0; }
.tb-tablo .tb-k-sec { width: 44px; }
th.tb-siralanir { cursor: pointer; }
th.tb-siralanir:hover, th.tb-sirali { color: var(--text); }
.tb-th { display: inline-flex; align-items: center; gap: 0; }
th .tb-ok { display: inline-flex; margin-left: 4px; color: var(--text); }
th .tb-ok .ikon { width: 14px; height: 14px; }
tr.tb-satir { cursor: pointer; }
tr.tb-satir:hover > td { background: var(--surface-2); }
.tb-bb { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 200px; }
.tb-bb .tb-bb-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tb-k-bb .urun-alt { max-width: 200px; }
.tb-kim { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.tb-kategori, .tb-dosya { display: inline-block; max-width: 180px; vertical-align: middle; }
.tb-alt { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.tb-alt:has(#tabloAyak:empty):has(#daha[hidden]) { display: none; }

/* ---------------- urun ayrintisi (cekirdegin cekmecesinde) ---------------- */
.tb-ayrinti { display: flex; flex-direction: column; gap: 24px; }
.tb-ust-bilgi { display: flex; gap: 16px; align-items: flex-start; }
.tb-ust-yazi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tb-ust-yazi h2 { overflow-wrap: anywhere; }
.tb-kimlik { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-kopyala { width: 28px; height: 28px; }
.tb-baglantilar { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.tb-dis { display: inline-flex; align-items: center; gap: 4px; }
.tb-dis .ikon { width: 14px; height: 14px; }
.tb-ayrinti .ad-deger { grid-template-columns: 176px minmax(0, 1fr); }
.tb-degisti { background: var(--hl); border-radius: var(--pill); padding: 0 8px; }
/* "Tum bilgiler": katlanir gruplar (tasarim: UrunDetay), kutu icinde kutu yok, ince ayrac */
.tb-tum { gap: 0; }
.tb-tum > h3 { padding-bottom: 8px; }
.tb-grup { border-bottom: 1px solid var(--border); }
.tb-grup > summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px;
  cursor: pointer; font-weight: 500;
}
.tb-grup > summary::-webkit-details-marker { display: none; }
.tb-grup-ok { display: inline-flex; color: var(--text-3); }
.tb-grup:not([open]) .tb-grup-ok .ikon { transform: rotate(-90deg); }
.tb-grup > .ad-deger { padding-bottom: 12px; }
.tb-excel-secim { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.tb-excel-secim .dugme { justify-content: flex-start; }

/* ---------------- dar ekran (telefon) ---------------- */
@media (max-width: 900px) {
  .tb-kovalar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 700px) {
  .tb-ara { width: 100%; }
  .tb-ust #tabloBaslik { padding-left: 0; }
  /* Telefonda tablo liste olur (tasarim: TelAnaliz): ustte urun ve fiyat, altta satis ve durum.
     Basliklar siralama dugmeleri olarak ustte kalir. */
  .tb-tablo, .tb-tablo thead, .tb-tablo tbody { display: block; min-width: 0; }
  .tb-tablo thead tr { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 16px; border-bottom: 1px solid var(--border); }
  .tb-tablo thead th { display: inline-flex; height: auto; padding: 0; border: 0; background: none; }
  .tb-tablo thead th.gizle-dar { display: none; }
  .tb-tablo tr.tb-satir {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    grid-template-areas: "urun fiyat" "satis durum"; column-gap: 8px; row-gap: 4px;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
  }
  .tb-tablo tr.tb-satir > td { display: block; height: auto; padding: 0; border: 0; max-width: none; width: auto; }
  .tb-tablo tr.tb-satir > td.gizle-dar { display: none; }
  .tb-tablo .tb-k-urun { grid-area: urun; min-width: 0; }
  .tb-tablo .tb-k-fiyat { grid-area: fiyat; }
  .tb-tablo .tb-k-satis { grid-area: satis; padding-left: 48px !important; text-align: left; min-width: 0; }
  .tb-tablo .tb-k-satis .urun-yazi { flex-direction: row; gap: 8px; align-items: baseline; }
  .tb-tablo .tb-k-durum { grid-area: durum; justify-self: end; }
  .tb-tablo tbody tr:not(.tb-satir) > td { display: block; }
  .tb-ayrinti .ad-deger { grid-template-columns: minmax(0, 1fr); }
  .tb-ust-bilgi .kucuk-resim.buyuk { width: 48px; height: 48px; }
  .tb-kova .tb-n { font-size: 18px; line-height: 24px; }
}