/* =====================================================================
   Raporlar bolumu (js/bolumler/raporlar.js)
   Yalnizca temel.css degiskenleri: koyu / acik tasarimlarda ayni gorunur.
   ===================================================================== */

/* ----------------------------------------------------------------- sekmeler */
.rapor-sekmeler {
  display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; margin-bottom: 14px;
  border-bottom: 1px solid var(--kenar); scrollbar-width: none;
}
.rapor-sekme {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 10px 14px; border: 0; background: none; cursor: pointer; white-space: nowrap;
  color: var(--yazi2); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.rapor-sekme:hover { color: var(--yazi); }
.rapor-sekme[aria-selected="true"] { color: var(--yazi); border-bottom-color: var(--vurgu); }
.rapor-sekme:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; }
@media (max-width: 700px) {
  .rapor-sekme { padding: 8px 10px; font-size: 14px; }
  .rapor-sekme .ikon { display: none; }
}

/* ----------------------------------------------------------------- arac cubugu */
.rapor-arac { align-items: flex-end; }
.rapor-aralik { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rapor-aralik .aralik-secici { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rapor-aralik .aralik-tarihler { display: flex; align-items: center; gap: 6px; }
.rapor-aralik .aralik-tarihler input { width: auto; min-width: 140px; }
.rapor-ara {
  display: flex; align-items: center; gap: 6px; flex: 1 1 200px; max-width: 320px;
  padding: 0 0 0 12px; border: 1px solid var(--kenar); border-radius: var(--kose); background: var(--yuzey); color: var(--yazi2);
}
.rapor-ara:focus-within { outline: 2px solid var(--vurgu); outline-offset: -1px; }
.rapor-ara input[type=search] { border: 0; background: none; padding-left: 4px; min-height: 40px; }
.rapor-ara input[type=search]:focus { outline: 0; }
.rapor-arac .onay { font-size: 14px; min-height: 40px; }
.rapor-csv { flex: none; }
@media (max-width: 700px) {
  .rapor-ara { max-width: none; flex-basis: 100%; }
  .rapor-aralik .aralik-tarihler input { min-width: 0; flex: 1; }
}

/* ince yukleniyor cizgisi (veri varken yenileme) */
.rapor-ilerleme { position: relative; height: 3px; margin: -6px 0 9px; overflow: hidden; border-radius: 2px; background: var(--kenar); }
.rapor-ilerleme::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: var(--vurgu); animation: rapor-kay 1.1s ease-in-out infinite;
}
@keyframes rapor-kay { to { left: 100%; } }

/* ----------------------------------------------------------------- genel */
.raporlar .durum-kutusu p { white-space: pre-line; }
.rapor-hata { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rapor-alt { display: flex; justify-content: center; margin: 14px 0 4px; color: var(--yazi2); font-size: 13px; text-align: center; }
.rapor-not { color: var(--yazi2); font-size: 13px; margin: 0 0 12px; }
.rapor-red-not .ikon { color: var(--kirmizi); }
.rapor-soluk { color: var(--yazi2); }
.rapor-uzun { display: inline-block; min-width: 220px; white-space: normal; }
.rapor-buyuk-deger { font-size: 24px; font-weight: 700; line-height: 1.2; }
.rapor-etiketler { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.rapor-dugmeler { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.rapor-kart-baslik { display: flex; align-items: center; gap: 10px; }
.rapor-kart-baslik .orta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rapor-renk-yesil { color: var(--yesil); }
.rapor-renk-kirmizi { color: var(--kirmizi); }
.rapor-renk-turuncu { color: var(--turuncu); }
.rapor-renk-mavi { color: var(--mavi); }
.rapor-renk-sari { color: var(--sari); }

/* temel.css'te olmayan renkler */
.ozet-kutu.mavi .deger { color: var(--mavi); }
.ozet-kutu.sari .deger { color: var(--sari); }
.ozet-kutu .ad .ikon { width: 1.1em; height: 1.1em; }
.rozet.mavi { background: color-mix(in srgb, var(--mavi) 20%, transparent); color: var(--mavi); }
.rozet.sari { background: color-mix(in srgb, var(--sari) 22%, transparent); color: var(--sari); }
.rapor-yon { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.rapor-yon .ikon { width: 1em; height: 1em; vertical-align: 0; }

.donen.kucuk { width: 18px; height: 18px; border-width: 2px; }

/* ----------------------------------------------------------------- tablolar */
.rapor-tablo { margin-bottom: 4px; }
.rapor-tablo td { white-space: nowrap; }
.rapor-tablo td .plaka { font-size: 13px; }
.rapor-tablo tr[data-vurgu] td:first-child { box-shadow: inset 3px 0 0 var(--kenar); }
.rapor-tablo tr[data-vurgu="yesil"] td:first-child { box-shadow: inset 3px 0 0 var(--yesil); }
.rapor-tablo tr[data-vurgu="kirmizi"] td:first-child { box-shadow: inset 3px 0 0 var(--kirmizi); }
.rapor-tablo tr[data-vurgu="turuncu"] td:first-child { box-shadow: inset 3px 0 0 var(--turuncu); }
.rapor-tablo tr[data-vurgu="mavi"] td:first-child { box-shadow: inset 3px 0 0 var(--mavi); }
.rapor-tablo tr[data-vurgu="sari"] td:first-child { box-shadow: inset 3px 0 0 var(--sari); }
.rapor-tablo tr.tik:focus-visible td { background: var(--yuzey2); outline: 0; }
.rapor-tablo tr.tik:focus-visible td:first-child { box-shadow: inset 3px 0 0 var(--vurgu); }
.rapor-kullanici { display: inline-flex; align-items: center; gap: 6px; }
.rapor-kullanici .ikon { color: var(--yazi2); }
.rapor-kullanici.mobil .ikon { color: var(--mavi); }

/* ----------------------------------------------------------------- tahsilat / dagilim */
.rapor-tahsilat { margin-bottom: 12px; }
.rapor-tahsilat .rapor-buyuk-deger { font-size: 26px; margin: 2px 0; }
.rapor-dagilim { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--kenar); }
.rapor-dagilim-baslik { color: var(--yazi2); font-size: 12px; margin-bottom: 4px; }
.rapor-dagilim-satir { display: flex; align-items: baseline; gap: 12px; padding: 3px 0; }
.rapor-dagilim-satir .ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rapor-dagilim-satir .adet { color: var(--yazi2); font-size: 12px; white-space: nowrap; }
.rapor-dagilim-satir .tutar { font-weight: 600; white-space: nowrap; min-width: 90px; text-align: right; }

/* ----------------------------------------------------------------- kasa kartlari */
.rapor-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.rapor-kartlar .kart + .kart { margin-top: 0; }
.rapor-kasiyer {
  display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; cursor: pointer; color: var(--yazi);
}
.rapor-kasiyer:hover { border-color: var(--vurgu); }
.rapor-kasiyer:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.rapor-kasiyer .rapor-kart-baslik { font-size: 16px; }
.rapor-kasiyer .rapor-kart-baslik > .ikon { color: var(--yazi2); }
.rapor-kasiyer .ust-bilgi { display: block; }
.rapor-kasiyer .rapor-etiketler { margin-top: 4px; }

/* ----------------------------------------------------------------- borclular */
.rapor-borclular { display: flex; flex-direction: column; gap: 10px; }
.rapor-borclular .kart + .kart { margin-top: 0; }
.rapor-borclu { padding: 0; overflow: hidden; border-left: 4px solid var(--turuncu); }
.rapor-borclu[data-vurgu="kirmizi"] { border-left-color: var(--kirmizi); }
.rapor-borclu-baslik {
  display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 14px; border: 0; background: none;
  color: var(--yazi); text-align: left; cursor: pointer;
}
.rapor-borclu-baslik:hover { background: var(--yuzey2); }
.rapor-borclu-baslik:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; }
.rapor-borclu-baslik .rapor-kart-baslik { font-size: 16px; }
.rapor-borclu-baslik .ust-bilgi { display: block; }
.rapor-ac-ok { display: inline-flex; color: var(--yazi2); transform: rotate(90deg); transition: transform .15s; }
.rapor-ac-ok.acik { transform: rotate(-90deg); }
.rapor-borc-ayrinti { padding: 0 14px 12px; border-top: 1px solid var(--kenar); }
.rapor-borc-satir { display: flex; align-items: flex-start; gap: 10px; padding-top: 10px; }
.rapor-borc-satir > .ikon { color: var(--yazi2); margin-top: 2px; }
.rapor-borc-satir .orta { flex: 1; min-width: 0; }
.rapor-borc-satir > strong { white-space: nowrap; }

/* ----------------------------------------------------------------- ayrinti pencereleri */
.rapor-detay { display: flex; flex-direction: column; gap: 12px; }
.rapor-detay h3 { margin: 0; font-size: 16px; }
.rapor-detay .arac-cubugu { margin-bottom: 0; }
.rapor-detay .rapor-not { margin: 0; }
.rapor-detay .rapor-dugmeler { margin-top: 0; justify-content: flex-start; }
.rapor-detay-kart { box-shadow: none; }
.rapor-detay-ust { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rapor-detay-ust .orta { flex: 1; min-width: 0; }
.rapor-detay-ust .bosluk { flex: 1; }
.rapor-detay-kart .rapor-detay-ust { padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--kenar); }
.rapor-bilgi { display: grid; grid-template-columns: minmax(90px, max-content) 1fr; gap: 6px 16px; margin: 0; }
.rapor-bilgi dt { color: var(--yazi2); }
.rapor-bilgi dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.rapor-kanitlar ul { margin: 6px 0 0; padding-left: 20px; }
.rapor-kanitlar li { margin: 3px 0; }

/* plaka resmi / kanit karesi: resim zemini her tasarimda siyah */
.rapor-resim {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 240px; max-height: 60vh; border-radius: var(--kose); overflow: hidden; background: #000;
}
.rapor-resim img { display: block; max-width: 100%; max-height: 60vh; object-fit: contain; }
.rapor-resim-dugme { display: flex; padding: 0; border: 0; background: none; cursor: zoom-in; max-width: 100%; }
.rapor-resim-dugme:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; }
.rapor-resim-durum { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; color: #b8c0cc; text-align: center; font-size: 14px; }
.rapor-resim-durum .ikon { color: #8a94a3; }
.rapor-resim-tam { display: flex; justify-content: center; background: #000; border-radius: var(--kose); overflow: auto; }
.rapor-resim-tam img { display: block; max-width: none; }
@media (max-width: 1000px) { .rapor-resim-tam img { max-width: 100%; } }

.rapor-kareler { display: flex; flex-direction: column; gap: 6px; }
.rapor-kare-ust { display: flex; align-items: center; gap: 4px; }
.rapor-kare-ust .bosluk { flex: 1; }
.rapor-kare { aspect-ratio: 16 / 9; min-height: 0; }
.rapor-kare:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

/* plaka duzelt / borca at */
.rapor-duzelt { display: flex; flex-direction: column; gap: 10px; }
.rapor-duzelt p { margin: 0; }
.rapor-plaka-girdi { font-family: var(--mono); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 18px; }