/* ============================================================================
   COMPONENTS.CSS — Sekmeler arası paylaşılan, yeniden kullanılabilir öğeler:
   butonlar, rozetler, filtre çubuğu/form alanları, onay kutusu satırları.
   ============================================================================ */
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:8px;border:1px solid transparent;
  font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s;white-space:nowrap;
  /* cursor:pointer <label class="btn"> gibi buton olmayan öğelerde de gerekli
     (ör. Arşiv'deki "Dosya Yükle" etiketi) — <button> zaten varsayılan olarak alır. */
}
/* color:var(--bg) kasıtlı — koyu temada arka plan koyu olduğu için buton
   üstünde koyu metin, açık temada arka plan açık olduğu için buton üstünde
   açık metin çıkar; iki temada da otomatik doğru kontrastı verir. */
.btn-primary{background:var(--gold);color:var(--bg);}
.btn-primary:hover{background:var(--gold-dark);color:var(--bg);}
.btn-ghost{background:var(--panel-light);color:var(--ink-dim);border-color:var(--border);}
.btn-ghost:hover{border-color:var(--gold-line);color:var(--ink);}

.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap;}
.badge.active{background:var(--green-soft);color:var(--green);}
.badge.closed{background:rgba(142,151,173,0.15);color:var(--ink-muted);}
.badge.paid{background:var(--green-soft);color:var(--green);}
.badge.pending{background:var(--red-soft);color:var(--red);}
.badge.derdest{background:var(--blue-soft);color:var(--blue);}
.badge.kapandi{background:rgba(142,151,173,0.15);color:var(--ink-muted);}
.badge.no{background:var(--panel-lighter);color:var(--ink-dim);font-family:'IBM Plex Mono',monospace;}

.stamp{
  display:inline-flex;align-items:center;justify-content:center;border:1.5px dashed var(--green);color:var(--green);
  border-radius:50%;width:52px;height:52px;font-family:'Fraunces',serif;font-size:9.5px;font-weight:700;
  letter-spacing:0.5px;text-transform:uppercase;text-align:center;line-height:1.15;transform:rotate(-9deg);opacity:.9;
}

.panel-title{font-family:'Fraunces',serif;font-size:16px;font-weight:600;margin:0 0 14px 2px;display:flex;align-items:center;gap:8px;}
.panel-title-note{margin:0 0 0 4px;}

/* ---------- Filtre çubuğu / form alanları ---------- */
.filter-bar{display:flex;gap:10px;margin-bottom:16px;align-items:center;flex-wrap:wrap;}
.filter-bar-tight{margin-bottom:10px;}
.search-input{
  flex:1;min-width:200px;background:var(--panel);border:1px solid var(--border);border-radius:8px;
  padding:9px 14px;color:var(--ink);font-size:13px;font-family:inherit;
}
.search-input:focus{outline:none;border-color:var(--gold-line);}
select.filter-select{
  background:var(--panel);border:1px solid var(--border);border-radius:8px;color:var(--ink-dim);
  padding:9px 12px;font-size:13px;font-family:inherit;cursor:pointer;
}

.icon-btn{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;
  background:transparent;border:1px solid transparent;cursor:pointer;color:var(--ink-muted);
}
.icon-btn:hover{background:var(--panel-light);color:var(--ink);border-color:var(--border);}

.field label{display:block;font-size:11.5px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%;background:var(--panel-light);border:1px solid var(--border);border-radius:8px;
  padding:10px 12px;color:var(--ink);font-size:13.5px;font-family:inherit;
}
.field textarea{resize:vertical;min-height:60px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold-line);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.field-row.three{grid-template-columns:100px 1fr;}

/* Bir satırda birden fazla onay kutusu + etiket (ör. Karar Defteri kaynak
   seçimi). Genel amaçlı — herhangi bir sekmede aynı desen gerekirse kullanılır. */
.checkbox-row{display:flex;flex-wrap:wrap;gap:6px 16px;}
.checkbox-label{display:inline-flex;align-items:center;gap:5px;margin:0;}
.checkbox-label input{width:auto;}
/* .field içindeki üst etiket stili (büyük harf, aralıklı) iç içe onay kutusu
   etiketlerine taşmasın. */
.field .checkbox-label{text-transform:none;letter-spacing:0;font-size:12.5px;display:inline-flex;margin-bottom:0;}

/* Satır düzeninde (masaüstü) bir form alanına tercih edilen genişliği
   verir. .filter-bar mobilde sütuna döndüğünde (bkz. medya sorgusu aşağıda)
   bu değerler otomatik olarak sıfırlanır — aksi halde flex-basis, sütun
   yönünde YÜKSEKLİK olarak yorumlanıp alanı anlamsız derecede uzatırdı. */
.field-grow-full{flex:1 1 100%;}
.field-grow-lg{flex:1 1 200px;}
.field-grow-sm{flex:1 1 140px;}

/* Bordürlü, dikey istiflenen bir form bloğu (ör. Büro Yönetimi'nde kullanıcı
   ekleme formu). */
.form-block{padding:20px 22px;display:flex;flex-direction:column;gap:14px;margin-bottom:26px;}
.form-block .cell-sub{margin-top:0;}
.form-block .btn{align-self:flex-start;}

.upload-progress{margin-bottom:10px;}

@media (max-width:880px){
  .field-row,.field-row.three{grid-template-columns:1fr;}
  .filter-bar{flex-direction:column;align-items:stretch;}
  /* align-items:stretch zaten tam genişlik veriyor; burada asıl kritik olan
     flex-basis'i "auto"ya sıfırlamak — aksi halde .field-grow-lg/sm gibi
     masaüstü için yazılmış piksel değerleri sütun yönünde YÜKSEKLİK olarak
     yorumlanıp alanı anlamsız derecede uzatırdı (bkz. yukarıdaki not). */
  .filter-bar > *{flex:1 1 auto;}
  .search-input{min-width:0;}
  .icon-btn{width:34px;height:34px;}
}

/* ---------- KVKK metnindeki yapay zekâ tablosu ---------- */
.kvkk-tablo{width:100%;border-collapse:collapse;margin:8px 0 12px;font-size:12.5px;}
.kvkk-tablo th,.kvkk-tablo td{border:1px solid var(--border);padding:7px 9px;text-align:left;vertical-align:top;line-height:1.45;}
.kvkk-tablo th{background:var(--bg);font-weight:600;}
@media (max-width:620px){.kvkk-tablo,.kvkk-tablo tbody,.kvkk-tablo tr,.kvkk-tablo td{display:block;width:100%;}.kvkk-tablo thead{display:none;}.kvkk-tablo tr{margin-bottom:8px;border:1px solid var(--border);border-radius:8px;overflow:hidden;}.kvkk-tablo td{border:0;border-bottom:1px solid var(--border);}.kvkk-tablo td:last-child{border-bottom:0;}}

/* ---------- Arşiv: belge içinde arama ---------- */
.belge-ara{margin-top:-4px;}
.belge-ara .search-input{flex:1 1 260px;}
.cell-sub.belge-ara-durum{max-width:none;margin:0 0 10px;}
.belge-ara-sonuc{display:grid;gap:8px;margin:0 0 16px;}
.belge-ara-sonuc:empty{display:none;}
.belge-ara-kart{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--panel);}
.belge-ara-kart .cell-sub{max-width:none;}
.belge-ara-kart p{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--ink-dim);overflow-wrap:anywhere;}
.belge-ara-kart mark{background:var(--gold-soft);color:var(--ink);border-radius:3px;padding:0 2px;font-weight:600;}

/* ---------- Görevler: otomatik görev kuralları penceresi ---------- */
.cell-sub.kural-giris{max-width:none;margin:0 0 12px;line-height:1.5;}
.kural-kart{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin:0 0 10px;}
.kural-kart .cell-sub{max-width:none;margin:4px 0 0;line-height:1.5;}
.kural-ac{font-size:13.5px;color:var(--ink);}
.kural-gun{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:var(--ink-dim);}
.kural-gun input{width:80px;}
.hesap-kutular{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:6px 0 10px;}
.hesap-kutu{border:1px solid var(--border);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;}
.hesap-kutu b{font-size:15px;}
.hesap-kutu .cell-sub{max-width:none;margin:0;font-size:11.5px;}
.hesap-oneri{margin:6px 0;}
.hesap-alt{margin-top:14px;padding-top:10px;border-top:1px dashed var(--border);}
.hesap-alt-baslik{margin-top:4px;}
.hesap-alt > b,.hesap-alt-baslik b{font-size:13.5px;font-weight:650;}
.hesap-oneri-dugmeler{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.hesap-tablo{width:100%;border-collapse:collapse;font-size:12.5px;margin:6px 0;}
.hesap-tablo td{padding:5px 8px;border-top:1px solid var(--border);vertical-align:top;}
.hesap-tablo td.cell-mono{text-align:right;white-space:nowrap;}
.hesap-diyalog{border:1px solid var(--border);border-radius:14px;padding:0;max-width:min(720px,calc(100vw - 32px));width:100%;background:var(--panel, #fff);color:inherit;}
.hesap-diyalog::backdrop{background:rgba(15,17,32,.45);}
.hesap-diyalog .modal-body{padding:14px 18px;max-height:65vh;overflow:auto;}
.hesap-diyalog .modal-head,.hesap-diyalog .modal-foot{padding:12px 18px;}
.kural-ozel{display:grid;grid-template-columns:auto minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1fr) auto;grid-template-areas:"ac tetik tur kat sil" ". baslik baslik gun onc";align-items:center;gap:6px 8px;padding:10px 0;border-top:1px dashed var(--border);font-size:12.5px;}
.kural-ozel > label{grid-area:ac;}
.kural-ozel [data-ozel-tetik]{grid-area:tetik;}
.kural-ozel [data-ozel-tur-kutu]{grid-area:tur;}
.kural-ozel [data-ozel-kategori]{grid-area:kat;}
.kural-ozel [data-ozel-sil]{grid-area:sil;}
.kural-ozel [data-ozel-baslik]{grid-area:baslik;}
.kural-ozel .kural-ozel-gun{grid-area:gun;display:flex;align-items:center;gap:6px;white-space:nowrap;}
.kural-ozel [data-ozel-oncelik]{grid-area:onc;}
.kural-ozel-ok{display:none;}
.modal.modal-genis{max-width:760px;}
.kural-ozel select,.kural-ozel input[type=text],.kural-ozel [data-ozel-tur]{width:100%;min-width:0;}
.kural-ozel input[data-ozel-gun]{width:64px;}
@media (max-width:640px){
  .kural-ozel{grid-template-columns:28px 1fr auto auto;grid-template-areas:"ac tetik tetik tetik" "tur tur tur tur" "kat kat kat kat" "baslik baslik baslik baslik" "gun gun onc sil";}
  .kural-ozel > label{width:auto;}
  /* Dosya hesabı, iade listesi, masraf bağlama: telefonda kutular iki sütun, tablo satırları sarılır */
  .hesap-kutular{grid-template-columns:1fr 1fr;}
  .hesap-tablo,.hesap-tablo tbody{display:block;width:100%;min-width:0 !important;}
  .hesap-tablo tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:8px 0;border-top:1px solid var(--border);}
  .hesap-tablo td{border:0;padding:0;min-width:0;}
  .hesap-tablo td:first-child:has(.link-btn),.hesap-tablo td:has(select){flex-basis:100%;}
  .hesap-tablo td.cell-mono{margin-left:auto;}
  .hesap-tablo .link-btn{white-space:normal;text-align:left;}
  .hesap-tablo select{width:100%;max-width:100%;min-width:0;box-sizing:border-box;}
  .hesap-diyalog .modal-body{overflow-x:hidden;}
}
.kural-ozel-ok,.kural-ozel-gun{color:var(--ink-dim);}
#kuralOzelListe{margin:8px 0;}
.kural-liste{margin:8px 0 0;}
.kural-liste textarea{font-size:13px;}