/* Bolum 5 - Klasorler: tablodaki secim kutusu ve Klasor kolonu, toplu secim cubugu, klasore
 * koy penceresi, urun ayrintisindaki "Klasor ve not" ve karar karti, Klasorler sayfasi
 * (tasarim: Klasorler, telefonda TelKlasorler). Siniflar kl- onekli. */

/* ---------------- tablo: secim ve Klasor kolonu ---------------- */
.kl-sec { cursor: pointer; vertical-align: middle; }
.kl-hucre { border: 0; background: transparent; padding: 4px; margin: -4px; border-radius: var(--pill); cursor: pointer; color: inherit; }
.kl-hucre:hover { background: var(--surface-3); }
.kl-bos { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--pill); color: var(--text-3); }
.kl-bos .ikon { width: 14px; height: 14px; }

/* ---------------- toplu secim cubugu (altta) ---------------- */
.kl-cubuk {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 24px;
  background: var(--raised); border-radius: var(--pill); box-shadow: var(--shadow); white-space: nowrap;
}
.kl-cubuk .acilir.kl-yukari { top: auto; bottom: calc(100% + 8px); }

/* ---------------- klasore koy penceresi ---------------- */
.kl-secenekler { display: flex; flex-wrap: wrap; gap: 8px; }
.kl-pencere-urun { overflow-wrap: anywhere; }

/* ---------------- urun ayrintisi: Klasor ve not, karar karti ---------------- */
.kl-bolum { display: flex; flex-direction: column; gap: 12px; }
.kl-bolumlu { align-self: flex-start; flex-wrap: wrap; height: auto; min-height: var(--kontrol); }
.kl-bolumlu button { min-height: 28px; }
.kl-not { width: 100%; }
.kl-alt { display: flex; gap: 8px; }
.kl-gecmis-liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kl-gecmis-liste li { display: flex; flex-direction: column; }
.kl-karar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.kl-karar > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ad-deger.kl-kv { grid-template-columns: 128px minmax(0, 1fr); }

/* ---------------- Klasorler sayfasi ---------------- */
.kl-duzen { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.kl-liste { padding: 8px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: calc(var(--ust-yukseklik) + 16px); }
.kl-liste .menu-oge { height: 40px; }
.kl-liste-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-ekle { color: var(--link); }
.kl-icerik { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kl-arac { gap: 8px 12px; }
.kl-ara { flex: 0 1 240px; width: 240px; margin-left: auto; }
.kl-not { font-family: var(--font); }
.kl-tablo { min-width: 820px; }
.kl-tablo td { height: 56px; }
.kl-tablo .kl-k-sec { width: 44px; }
.kl-tablo .kl-k-urun { width: 45%; max-width: 0; }
.kl-tablo .kl-k-not { width: 30%; max-width: 0; }
.kl-tablo .kl-k-hedef { font-weight: 500; }
.kl-tablo .kl-k-cikar { width: 52px; text-align: right; }
.kl-satir-cikar { color: var(--text-3); }
.kl-satir-cikar:hover { color: var(--bad); }
.kl-tablo td.sag { white-space: nowrap; }
tr.kl-satir { cursor: pointer; }
@media (hover: hover) { tr.kl-satir:hover > td { background: var(--surface-2); } }   /* dokunmatikte: stil.css */
.kl-ayrinti { display: flex; flex-direction: column; gap: 24px; }
.kl-ust { display: flex; gap: 16px; align-items: flex-start; }
.kl-ust-yazi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.kl-ust-yazi h2 { overflow-wrap: anywhere; }
.kl-baglantilar { display: flex; gap: 16px; flex-wrap: wrap; }
.kl-baglantilar a { display: inline-flex; align-items: center; gap: 4px; }
.kl-baglantilar .ikon { width: 14px; height: 14px; }

/* ---------------- telefon: klasorler yatay cip, urunler kart ---------------- */
@media (max-width: 900px) {
  .kl-duzen { grid-template-columns: minmax(0, 1fr); }
  .kl-liste { position: static; flex-direction: row; overflow-x: auto; padding: 8px; }
  .kl-liste .menu-oge { width: auto; flex: none; }
}
@media (max-width: 700px) {
  .kl-karar { grid-template-columns: minmax(0, 1fr); }
  .kl-ara { flex: 1 1 100%; width: 100%; margin-left: 0; }
  .kl-cubuk { left: 16px; right: 16px; transform: none; flex-wrap: wrap; border-radius: var(--r-card); padding: 12px; }
  .kl-tablo, .kl-tablo tbody { display: block; min-width: 0; }
  .kl-tablo thead { display: none; }
  .kl-tablo tr.kl-satir { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-bottom: 1px solid var(--border); }
  .kl-tablo tr.kl-satir > td { display: flex; justify-content: space-between; align-items: center; gap: 8px;
    height: auto; min-height: 24px; padding: 0; border: 0; width: auto; max-width: none; }
  .kl-tablo tr.kl-satir > td[data-ad]::before { content: attr(data-ad); color: var(--text-2); }
  .kl-tablo tr.kl-satir > td.kl-k-sec { display: none; }
  .kl-tablo tr.kl-satir > td.kl-k-cikar { justify-content: flex-end; width: auto; }
  .kl-tablo tr.kl-satir > td.kl-k-urun, .kl-tablo tr.kl-satir > td.kl-k-not { display: block; }
  .kl-tablo tr.kl-satir > td:empty { display: none; }
  .kl-tablo tbody tr:not(.kl-satir) > td { display: block; }
}