/* ============================================================
   Paybana — Tema Katmanı
   ------------------------------------------------------------
   YÖNTEM: AdminLTE'nin kendi seçicileriyle EŞİT özgüllükte yaz,
   sonraki kaynak sırası kazansın. `!important` yalnızca Bootstrap/
   AdminLTE'nin kendisi `!important` kullandığı yerlerde (bg-*,
   text-* yardımcı sınıfları) ve tek bir inline style için var.

   Bu dosya hiçbir mevcut dosyayı değiştirmez, hiçbir şey silmez.
   En kötü ihtimalle "görüntü yanlış" olur; "çalışmıyor" olamaz.
   ============================================================ */

/* ---------- 1. Temel ---------- */

body,
body.hold-transition {
  font-family: var(--pb-font);
  font-size: var(--pb-fs-base);
  color: var(--pb-text);
  -webkit-font-smoothing: antialiased;
}

.content-wrapper {
  background-color: var(--pb-bg);
}

/* Rakamlar her yerde eşit genişlikte — para ürününde şart */
.small-box .inner h3,
.small-box .inner h4,
table.table td,
table.table th,
.pb-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a { color: var(--pb-primary); }
a:hover { color: var(--pb-primary-600); }

/* ---------- 2. Navbar ----------
   .navbar-paybana vendor CSS'e ELLE yamanmış (adminlte.css:209 ve
   13766). Burada dokunmuyoruz, sadece üzerine yazıyoruz.
   Marka teali beyaz metinle 2.34:1 — AA geçmiyor. Derinleştirildi. */

.main-header.navbar {
  border-bottom: 1px solid var(--pb-brand-700);
  box-shadow: var(--pb-shadow-1);
  min-height: 56px;
  padding: 0 var(--pb-space-3);
}

.main-header.navbar-paybana {
  background-color: var(--pb-brand-600) !important;
}

.main-header .nav-link { color: #fff; }
.main-header .nav-link:hover { color: #fff; opacity: .85; }

/* Arama kutusu.
   Orijinalinde `w-75` ile neredeyse tüm navbar'ı kaplıyordu. Önce 380px'e
   çekilmişti, kullanıcı talebiyle yeniden genişletildi: geniş ama navbar'ı
   yutmayan bir ölçü. Sonuçlar uzun metinli olduğu için genişlik işe yarıyor. */
.main-header form.form-inline.w-75 {
  width: 860px !important;
  max-width: 52vw;
}

/* Yükseklik/hizalama — SADECE grubun yüksekliği ölçülür, çocuklar GERİLİR.
   Önceki denemede her öğeye ayrı `height:38px` verilmişti; Bootstrap'ın
   `.input-group-sm` dolgusu ve line-height'ı devreye girince buton yine
   inputtan taşıyordu. Flex'te doğrusu: grubu sabitle, çocukları stretch et. */
.main-header .input-group {
  height: 38px;
  align-items: stretch;
  flex-wrap: nowrap;
}
.main-header .input-group > .form-control-navbar,
.main-header .input-group > .input-group-append,
.main-header .input-group > .input-group-append > .btn-navbar {
  height: auto;
  min-height: 0;
  align-self: stretch;
  margin: 0;
  line-height: 1;
  box-sizing: border-box;
}

.main-header .form-control-navbar {
  width: 100% !important;
  background-color: rgb(255 255 255 / .14);
  border: 1px solid rgb(255 255 255 / .22);
  border-right: 0;
  color: #fff;
  border-radius: var(--pb-radius-sm) 0 0 var(--pb-radius-sm);
  padding: 0 var(--pb-space-3);
  font-size: var(--pb-fs-base);
}
.main-header .form-control-navbar::placeholder { color: rgb(255 255 255 / .72); }
.main-header .form-control-navbar:focus {
  background-color: rgb(255 255 255 / .24);
  border-color: rgb(255 255 255 / .45);
  box-shadow: none;
  color: #fff;
}

/* AdminLTE'nin `navbar-light` varyantı butona KOYU metin rengi veriyor —
   büyütecin siyah görünmesinin sebebi buydu. */
.main-header .btn-navbar,
.main-header .navbar-light .btn-navbar {
  background-color: rgb(255 255 255 / .14);
  border: 1px solid rgb(255 255 255 / .22);
  border-left: 0;
  color: #fff;
  border-radius: 0 var(--pb-radius-sm) var(--pb-radius-sm) 0;
  padding: 0 var(--pb-space-4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-header .btn-navbar > i,
.main-header.navbar-light .form-control-navbar + .input-group-append > .btn-navbar {
  color: #fff;
}
.main-header .btn-navbar > i { font-size: 14px; }

.main-header .btn-navbar:hover {
  background-color: rgb(255 255 255 / .26);
  color: #fff;
  box-shadow: none;
}

/* ---- ODAK DURUMU ----
   adminlte.css:11733-11738 şunu yapıyor:
     .navbar-light .form-control-navbar:focus,
     .navbar-light .form-control-navbar:focus + .input-group-append .btn-navbar
       { background-color:#e9ecef; border:0 !important; color:#343a40; }

   Yani inputa tıklayınca butonun zemini açık griye dönüyor ve kenarlık
   `!important` ile siliniyor. Buton inputtan kopuk/taşmış görünmesinin
   sebebi buydu. Seçici (0,5,0) olduğu için daha yüksek özgüllük + !important
   gerekiyor; `.main-header.navbar-light` ile (0,6,0)'a çıkıyoruz. */

.main-header.navbar-light .form-control-navbar:focus,
.main-header.navbar-light .form-control-navbar:focus + .input-group-append .btn-navbar,
.main-header.navbar-light .form-control-navbar:focus + .input-group-append > .btn-navbar {
  background-color: rgb(255 255 255 / .24) !important;
  color: #fff !important;
  border: 1px solid rgb(255 255 255 / .45) !important;
  box-shadow: none !important;
}

/* Ortadaki çift kenarlık kalkar, ikisi tek kutu gibi dursun */
.main-header.navbar-light .form-control-navbar:focus {
  border-right: 0 !important;
}
.main-header.navbar-light .form-control-navbar:focus + .input-group-append .btn-navbar {
  border-left: 0 !important;
}

/* Odaktaki inputun içindeki büyüteç de beyaz kalsın */
.main-header.navbar-light .form-control-navbar:focus + .input-group-append .btn-navbar > i {
  color: #fff !important;
}

/* type="search" alanının tarayıcı yerleşik temizleme (×) simgesi koyu
   geliyordu; teal zeminde okunmuyordu. Maskeyle beyazlatılıyor. */
.main-header .form-control-navbar::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  margin-left: 6px;
  cursor: pointer;
  background-color: rgb(255 255 255 / .75);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.main-header .form-control-navbar::-webkit-search-cancel-button:hover {
  background-color: #fff;
}

/* ---------- 3. Sidebar ---------- */

.main-sidebar {
  box-shadow: none;
  border-right: 1px solid rgb(255 255 255 / .06);
}

.main-sidebar.sidebar-dark-primary { background-color: var(--pb-sidebar-bg); }

.main-sidebar .user-panel { border-bottom-color: rgb(255 255 255 / .08); }
.main-sidebar .user-panel .info a {
  color: var(--pb-sidebar-text);
  font-weight: 600;
  font-size: var(--pb-fs-sm);
}

.nav-sidebar .nav-link {
  color: var(--pb-sidebar-text);
  border-radius: var(--pb-radius-sm);
  margin: 2px var(--pb-space-2);
  padding: 9px var(--pb-space-3);
  font-size: var(--pb-fs-base);
  transition: background-color .12s ease, color .12s ease;
}

.nav-sidebar .nav-link:hover {
  background-color: rgb(255 255 255 / .06);
  color: #fff;
}

.nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--pb-brand-600);
  color: var(--pb-sidebar-active);
  box-shadow: none;
  font-weight: 600;
}

/* DİKKAT: `width` BİLEREK override edilmiyor.
   AdminLTE `.nav-icon`'a 1.6rem genişlik verir ve daraltılmış sidebar'da
   ikonu tam da bu genişlikle ortalar. Burada daraltınca ikonların küçük
   ve sola kaymış görünmesinin sebebi bu genişliğin ezilmesiydi. */
.nav-sidebar .nav-icon {
  color: var(--pb-sidebar-text-dim);
  font-size: 1.05rem;
}
.nav-sidebar .nav-link:hover .nav-icon,
.nav-sidebar .nav-link.active .nav-icon { color: inherit; }

/* Daraltılmış sidebar — yalnızca fare ÜZERİNDE DEĞİLKEN.
   AdminLTE menüyü `:hover` ve `.sidebar-focused` ile geçici olarak açıyor
   (adminlte.css:12646-12657). O iki durum dışlanmazsa menü açıldığında da
   ikonlar ortalanmış ve metin kaymış kalırdı. */
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar > .nav-item > .nav-link {
  margin-left: 8px;
  margin-right: 8px;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar > .nav-item > .nav-link > .nav-icon {
  width: 100%;
  margin: 0;
  font-size: 1.15rem;
}

/* Bölüm başlığı ("MUHASEBE AYARLARI") */
.nav-sidebar .nav-header {
  color: var(--pb-sidebar-text-dim);
  font-size: var(--pb-fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: var(--pb-space-5) var(--pb-space-4) var(--pb-space-2);
}

/* ---------- Sidebar logosu ----------
   Geniş halde yazılı logo (logo-white.png, 1366x274), daraltılmış halde
   küçük marka (logo_kucuk.png, 330x274). Geniş logo dar rayda eziliyordu.

   `:not(:hover):not(.sidebar-focused)` şart: AdminLTE menüyü fare üzerine
   gelince geçici olarak açıyor (adminlte.css:12646-12657); o anda yine
   geniş logo görünmeli. */
.pb-logo-dar { display: none; }

.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .pb-logo-genis {
  display: none;
}
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .pb-logo-dar {
  display: block;
  width: 34px;
  height: auto;
  margin: 0 auto;
}

/* ---------- 4. Sayfa başlığı ---------- */

.content-header { padding: var(--pb-space-5) var(--pb-space-4) var(--pb-space-3); }

.content-header h1 {
  font-size: var(--pb-fs-2xl);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--pb-text);
}

.content-header .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: var(--pb-fs-sm);
}
.content-header .breadcrumb-item + .breadcrumb-item::before { color: var(--pb-text-faint); }
.content-header .breadcrumb-item.active { color: var(--pb-text-muted); }

/* ---------- 5. Kartlar ---------- */

.card {
  background-color: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  box-shadow: var(--pb-shadow-1);
  margin-bottom: var(--pb-space-5);
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--pb-border);
  padding: var(--pb-space-4) var(--pb-space-5);
  min-height: auto;
}
.card-header.border-0 { border-bottom: 1px solid var(--pb-border); }

.card-title {
  font-size: var(--pb-fs-lg);
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--pb-text);
  margin: 0;
  float: none;
}

.card-body { padding: var(--pb-space-5); }
.card-body.p-0 { padding: 0; }

.card-tools .btn-tool {
  color: var(--pb-text-faint);
  border-radius: var(--pb-radius-sm);
}
.card-tools .btn-tool:hover {
  color: var(--pb-text);
  background-color: var(--pb-surface-3);
}

/* ---------- 6. İstatistik tile'ları (small-box) ----------
   EN BÜYÜK GÖRSEL DEĞİŞİKLİK BURASI.
   Önce: doymuş renk blokları (AdminLTE 2 görünümü).
   Sonra: beyaz kart + renkli ikon çipi + iri tabular sayı.
   bg-* sınıfları Bootstrap'ta !important olduğu için burada da şart. */

.small-box {
  background-color: var(--pb-surface) !important;
  color: var(--pb-text) !important;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  box-shadow: var(--pb-shadow-1);
  margin-bottom: var(--pb-space-5);
  overflow: hidden;
  transition: box-shadow .15s ease;
  /* Bir satırdaki tile'lar eşit yükseklikte olsun: alt şeritler hizalanır */
  display: flex;
  flex-direction: column;
  height: calc(100% - var(--pb-space-5));
}
.small-box:hover { box-shadow: var(--pb-shadow-2); }

.small-box > .inner {
  padding: var(--pb-space-5) var(--pb-space-5) var(--pb-space-4);
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
}

/* Sayı */
.small-box .inner h3,
.small-box .inner h4 {
  font-size: var(--pb-fs-2xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--pb-text) !important;
  margin: 0 0 var(--pb-space-2);
}

/* Etiket — artık sayıyla aynı ağırlıkta değil */
.small-box .inner p {
  font-size: var(--pb-fs-sm);
  font-weight: 500;
  color: var(--pb-text-muted) !important;
  margin: 0;
  letter-spacing: .01em;
}

/* İkon: dev yarı saydam filigran → küçük renkli çip
   DİKKAT: adminlte.css:19051-19066'da `.small-box .icon` konumlandırılmamış
   (sadece color+z-index); `position:absolute` olan İÇİNDEKİ `<i>`.
   Bu yüzden çipi biz absolute yapıp `<i>`yi static'e çekiyoruz. */
.small-box > .icon {
  position: absolute;
  top: var(--pb-space-4);
  right: var(--pb-space-4);
  left: auto;
  bottom: auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pb-radius-sm);
  color: inherit;
  opacity: 1;
  transition: none;
  z-index: 2;
}
.small-box:hover > .icon { transform: none; }

.small-box > .icon > i,
.small-box > .icon > i.ion,
.small-box > .icon > i.fa,
.small-box > .icon > i.fas,
.small-box > .icon > i.far,
.small-box > .icon > i.fab,
.small-box > .icon > i.glyphicon {
  position: static;
  font-size: 19px !important;
  line-height: 1;
  top: auto;
  right: auto;
  margin: 0;
  transition: none;
  color: inherit;
}

/* AdminLTE dar ekranda ikonu gizliyor (19085) — çip küçük, kalabilir */
@media (max-width: 767.98px) {
  .small-box > .icon { display: flex; }
}

/* Tile renk varyantları — sadece ikon çipini boyar */
.small-box.bg-info > .icon    { background: var(--pb-info-bg);    color: var(--pb-info); }
.small-box.bg-success > .icon { background: var(--pb-success-bg); color: var(--pb-success); }
.small-box.bg-danger > .icon  { background: var(--pb-danger-bg);  color: var(--pb-danger); }
.small-box.bg-warning > .icon { background: var(--pb-warning-bg); color: var(--pb-warning); }
.small-box.bg-primary > .icon { background: var(--pb-brand-100);  color: var(--pb-brand-700); }

/* Alt şerit — içinde select veya ok linki var */
.small-box .small-box-footer {
  background-color: var(--pb-surface-2) !important;
  color: var(--pb-text-muted) !important;
  border-top: 1px solid var(--pb-border);
  padding: var(--pb-space-3) var(--pb-space-5);
  font-size: var(--pb-fs-sm);
  text-align: left;
  display: block;
}
.small-box .small-box-footer:hover {
  background-color: var(--pb-surface-3) !important;
  color: var(--pb-text) !important;
}

/* ---------- 7. Hızlı Rapor kutusu ----------
   Markup'ta inline style var: background-color:#30b9d1; color:white
   Inline style'ı yenmek için !important şart. Tek istisna. */

.content .small-box:not(.bg-info):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-primary) {
  background-color: var(--pb-surface) !important;
  color: var(--pb-text) !important;
  text-align: left !important;
}

.content .small-box:not([class*="bg-"]) .inner h3 {
  font-size: var(--pb-fs-3xl);
  font-weight: 750;
  color: var(--pb-text) !important;
}
.content .small-box:not([class*="bg-"]) .inner h3 sup {
  font-size: var(--pb-fs-lg) !important;
  color: var(--pb-text-muted);
  font-weight: 600;
  top: -.4em;
}

.content .small-box:not([class*="bg-"]) > .icon {
  background: var(--pb-brand-100);
  color: var(--pb-brand-700);
}

/* Rapor kontrolleri: dağınık inline elemanlar → düzenli araç çubuğu */
.small-box .small-box-footer > select,
.small-box .small-box-footer > input[type="text"] {
  display: inline-block;
  height: 34px;
  padding: 0 var(--pb-space-3);
  margin-right: var(--pb-space-2);
  border: 1px solid var(--pb-border-strong);
  border-radius: var(--pb-radius-sm);
  background-color: var(--pb-surface);
  color: var(--pb-text);
  font-size: var(--pb-fs-sm);
  vertical-align: middle;
}
.small-box .small-box-footer > input[type="text"] { min-width: 210px; }

/* ---------- 8. Butonlar ---------- */

.btn {
  border-radius: var(--pb-radius-sm);
  font-weight: 550;
  font-size: var(--pb-fs-base);
  padding: 7px 14px;
  transition: background-color .12s ease, border-color .12s ease;
}

.btn-primary,
button.btn-primary {
  background-color: var(--pb-primary);
  border-color: var(--pb-primary);
  color: #fff;
}
.btn-primary:hover,
button.btn-primary:hover {
  background-color: var(--pb-primary-600);
  border-color: var(--pb-primary-600);
}
.btn-primary:focus,
.btn:focus { box-shadow: var(--pb-ring); }

/* #btnRunReport'ta `btn` sınıfı YOK, sadece `btn-primary`.
   Bu yüzden tek başına da düzgün görünmesi gerekiyor. */
button.btn-primary:not(.btn) {
  display: inline-block;
  height: 34px;
  padding: 0 16px;
  border: 1px solid var(--pb-primary);
  border-radius: var(--pb-radius-sm);
  font-size: var(--pb-fs-sm);
  font-weight: 600;
  vertical-align: middle;
  cursor: pointer;
}

.btn-secondary { background-color: var(--pb-text-2); border-color: var(--pb-text-2); }
.btn-success   { background-color: var(--pb-success); border-color: var(--pb-success); }
.btn-danger    { background-color: var(--pb-danger);  border-color: var(--pb-danger); }

/* ---------- 9. Form kontrolleri ---------- */

.form-control,
select.form-control,
.custom-select {
  height: 38px;
  border: 1px solid var(--pb-border-strong);
  border-radius: var(--pb-radius-sm);
  font-size: var(--pb-fs-base);
  color: var(--pb-text);
  background-color: var(--pb-surface);
  padding: 0 var(--pb-space-3);
  box-shadow: none;
}
textarea.form-control { height: auto; padding: var(--pb-space-3); }

.form-control:focus,
.custom-select:focus {
  border-color: var(--pb-primary);
  box-shadow: var(--pb-ring);
}

label {
  font-size: var(--pb-fs-sm);
  font-weight: 600;
  color: var(--pb-text-2);
  margin-bottom: var(--pb-space-2);
}

.input-group-text {
  background-color: var(--pb-surface-2);
  border: 1px solid var(--pb-border-strong);
  border-radius: var(--pb-radius-sm) 0 0 var(--pb-radius-sm);
  color: var(--pb-text-muted);
}

/* ---------- 10. Tablolar ----------
   _Layout.cshtml:94-97 GLOBAL olarak bütün kenarlıkları siliyor ve
   başlığı 15px/#656565 yapıyor. Tablonun "gri duvar" gibi görünmesinin
   sebebi bu. Dosyayı düzenlemeden override ediyoruz. */

.table { color: var(--pb-text); margin-bottom: 0; }

.table thead tr th {
  font-size: var(--pb-fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pb-text-muted);
  background-color: var(--pb-surface-2);
  border-bottom: 1px solid var(--pb-border);
  border-top: 0;
  padding: var(--pb-space-3) var(--pb-space-4);
  white-space: nowrap;
  vertical-align: middle;
}

.table td,
.table th { border: none; }

.table tbody tr td {
  border-top: 1px solid var(--pb-border);
  padding: var(--pb-space-3) var(--pb-space-4);
  font-size: var(--pb-fs-base);
  color: var(--pb-text-2);
  vertical-align: middle;
}

.table tbody tr:first-child td { border-top: 0; }

.table-hover tbody tr { transition: background-color .1s ease; }
.table-hover tbody tr:hover { background-color: var(--pb-primary-50); }

.table-striped tbody tr:nth-of-type(odd) { background-color: transparent; }
.table-striped tbody tr:nth-of-type(even) { background-color: var(--pb-surface-2); }
.table-striped tbody tr:hover { background-color: var(--pb-primary-50); }

/* Yapışkan başlık — mevcut scrollY:"450px" ile birlikte çalışır */
.dataTables_scrollHead .table thead tr th { position: sticky; top: 0; z-index: 3; }

/* Avatar */
.table .img-circle.img-size-32 {
  width: 28px;
  height: 28px;
  border: 1px solid var(--pb-border);
  background-color: var(--pb-surface-3);
}

/* Para kolonu — JS tarafında className:"pb-money" eklenecek (Faz 2) */
.table td.pb-money,
.table th.pb-money {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- 11. Durum rozetleri ----------
   Bugün ham enum metni basılıyor ("AccumulatedUpdate", "Paid").
   Faz 2'de PB.badge() ile rozete dönecek; stil şimdiden hazır. */

.pb-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--pb-radius-pill);
  font-size: var(--pb-fs-xs);
  font-weight: 650;
  letter-spacing: .01em;
  white-space: nowrap;
  line-height: 1.5;
}
.pb-badge--success { background: var(--pb-success-bg); color: var(--pb-success); }
.pb-badge--warning { background: var(--pb-warning-bg); color: var(--pb-warning); }
.pb-badge--danger  { background: var(--pb-danger-bg);  color: var(--pb-danger); }
.pb-badge--info    { background: var(--pb-info-bg);    color: var(--pb-info); }
.pb-badge--neutral { background: var(--pb-neutral-bg); color: var(--pb-neutral); }

/* ---------- 12. DataTables kabuğu ---------- */

.dataTables_wrapper { padding: 0; }

.dataTables_wrapper .dataTables_filter { margin: 0; }
.dataTables_wrapper .dataTables_filter label {
  font-size: var(--pb-fs-sm);
  color: var(--pb-text-muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--pb-space-2);
}
.dataTables_wrapper .dataTables_filter input {
  height: 36px;
  min-width: 240px;
  border: 1px solid var(--pb-border-strong);
  border-radius: var(--pb-radius-sm);
  padding: 0 var(--pb-space-3);
  margin-left: 0;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--pb-primary);
  box-shadow: var(--pb-ring);
  outline: 0;
}

.dataTables_wrapper .dataTables_length select {
  height: 32px;
  border: 1px solid var(--pb-border-strong);
  border-radius: var(--pb-radius-sm);
  padding: 0 var(--pb-space-2);
}

.dataTables_wrapper .dataTables_info {
  font-size: var(--pb-fs-sm);
  color: var(--pb-text-muted);
  padding-top: var(--pb-space-4);
}

/* ---------- Sayfalama ----------
   DİKKAT: Projede dataTables.bootstrap4 entegrasyonu yüklü, bu yüzden
   sayfalama şu yapıda gelir:
       <li class="paginate_button page-item active"><a class="page-link">
   Yani ".paginate_button" DIŞTAKİ <li>'dir, görünen kutu ise içindeki
   <a class="page-link">. Sadece <li> boyanırsa iç içe iki kutu oluşur.
   Doğrusu: <li> tamamen nötrlenir, stil .page-link üzerine yazılır. */

.dataTables_wrapper .dataTables_paginate { padding-top: var(--pb-space-3); }

.dataTables_wrapper .dataTables_paginate .pagination {
  margin: 0;
  gap: 4px;
  flex-wrap: wrap;
}

/* Dıştaki <li> görsel olarak yok sayılır */
.dataTables_wrapper .dataTables_paginate .paginate_button.page-item {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Asıl kutu */
.dataTables_wrapper .page-item .page-link {
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  background: var(--pb-surface);
  color: var(--pb-text-2);
  font-size: var(--pb-fs-sm);
  font-weight: 600;
  line-height: 1.5;
  padding: 6px 12px;
  margin: 0;
  min-width: 38px;
  text-align: center;
  box-shadow: none;
  transition: background-color .12s ease, border-color .12s ease;
}
.dataTables_wrapper .page-item .page-link:hover {
  background: var(--pb-surface-3);
  border-color: var(--pb-border-strong);
  color: var(--pb-text);
  z-index: auto;
}
.dataTables_wrapper .page-item .page-link:focus {
  box-shadow: var(--pb-ring);
  outline: 0;
}
.dataTables_wrapper .page-item.active .page-link,
.dataTables_wrapper .page-item.active .page-link:hover {
  background: var(--pb-primary);
  border-color: var(--pb-primary);
  color: #fff;
}
.dataTables_wrapper .page-item.disabled .page-link {
  background: var(--pb-surface);
  border-color: var(--pb-border);
  color: var(--pb-text-faint);
}

/* Bootstrap4 entegrasyonu olmayan tablolar için yedek (düz <a.paginate_button>) */
.dataTables_wrapper .dataTables_paginate a.paginate_button:not(.page-item) {
  border-radius: var(--pb-radius-sm) !important;
  border: 1px solid var(--pb-border) !important;
  background: var(--pb-surface) !important;
  color: var(--pb-text-2) !important;
  font-size: var(--pb-fs-sm);
  font-weight: 600;
  padding: 6px 12px !important;
  margin: 0 2px !important;
}
.dataTables_wrapper .dataTables_paginate a.paginate_button.current:not(.page-item) {
  background: var(--pb-primary) !important;
  border-color: var(--pb-primary) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:not(.page-item) {
  color: var(--pb-text-faint) !important;
}

/* Float tabanlı dom string'i ('<"float-left"B><"float-right"f>') KORUNUYOR.
   Float'ları kaldırmak butonlarla arama kutusunu alt alta düşürüyordu;
   orijinal yan yana yerleşim doğru olanıydı. Sadece nefes payı ekliyoruz. */
.dataTables_wrapper > .float-left,
.dataTables_wrapper > .float-right { margin-bottom: var(--pb-space-4); }
.dataTables_wrapper > .float-right { padding-top: 2px; }
.dataTables_wrapper > .float-left::after { content: ""; display: table; clear: both; }

/* ---------- 13. DataTables export butonları ----------
   Mevcut kancalar: primary-btn / success-btn / purple-btn /
   teal-btn / danger-btn / orange-btn / warning-btn
   (_Layout.cshtml:136-178'de tanımlı, Faz 1b'de oraya taşınacak)

   Ekranda 8 buton yan yana ve renkleri birbiriyle yarışıyor.
   Çözüm: veri eylemleri nötr, YIKICI/ÖNEMLİ olan renkli kalır. */

/* ÖNEMLİ: Kurallar `.dt-buttons >` ile SINIRLI.
   Sınırsız `.dt-button` yazılırsa colvis açılır listesindeki öğeler de
   yakalanır ve DataTables'ın `.active` (kolon görünür) göstergesi silinir.
   Açılır liste aşağıda ayrıca ele alınıyor. */

.dt-buttons { display: flex; flex-wrap: wrap; gap: var(--pb-space-2); }

.dt-buttons > .dt-button {
  border-radius: var(--pb-radius-sm) !important;
  font-size: var(--pb-fs-sm) !important;
  font-weight: 600 !important;
  padding: 7px 13px !important;
  margin: 0 !important;
  border: 1px solid var(--pb-border-strong) !important;
  background: var(--pb-surface) !important;
  background-image: none !important;
  color: var(--pb-text-2) !important;
  box-shadow: none !important;
  transition: background-color .12s ease;
}
.dt-buttons > .dt-button:hover {
  background: var(--pb-surface-3) !important;
  border-color: var(--pb-border-strong) !important;
  color: var(--pb-text) !important;
}

/* İkonlar — saf CSS, markup'a dokunulmuyor.
   Unicode noktaları FA4/5/6'da aynı; font adı için üçlü fallback. */
.dt-buttons > .dt-button::before {
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome;
  font-weight: 900;
  font-size: 12px;
  margin-right: 7px;
  display: inline-block;
  vertical-align: -1px;
}
.dt-buttons > .primary-btn::before     { content: "\f0db"; }  /* kolonlar   */
.dt-buttons > .success-btn::before     { content: "\f0e2"; }  /* geri al    */
.dt-buttons > .purple-btn::before      { content: "\f021"; }  /* yenile     */
.dt-buttons > .buttons-copy::before    { content: "\f0c5"; }  /* kopyala    */
.dt-buttons > .teal-btn::before        { content: "\f1c3"; color: #1d6f42; }  /* excel */
.dt-buttons > .buttons-csv::before     { content: "\f15c"; color: var(--pb-text-muted); }
.dt-buttons > .buttons-pdf::before     { content: "\f1c1"; color: #b30b00; }
.dt-buttons > .danger-btn::before      { content: "\f019"; }  /* indir      */
.dt-buttons > .cari-btn::before        { content: "\f1c9"; color: #7c2d12; }  /* cari XML */
.dt-buttons > .odeme-btn::before       { content: "\f19c"; }  /* banka — odeme dosyasi */

/* Birincil eylem — kolon göster/gizle */
.dt-buttons > .dt-button.primary-btn {
  background: var(--pb-primary) !important;
  border-color: var(--pb-primary) !important;
  color: #fff !important;
}
.dt-buttons > .dt-button.primary-btn:hover { background: var(--pb-primary-600) !important; }

/* GarantiBank çıktısı — gerçek para üreten tek buton, ayrışmalı */
.dt-buttons > .dt-button.danger-btn {
  background: var(--pb-danger) !important;
  border-color: var(--pb-danger) !important;
  color: #fff !important;
}
.dt-buttons > .dt-button.danger-btn:hover { background: #991b1b !important; }

/* Garanti toplu odeme dosyasi — gercek para cikisi ureten tek buton.
   Dolu yesil: "calistir/uret" anlami tasir ve digerlerinden ayrisir.
   Beyaz metinle kontrast 5.3:1 (AA gecer). */
.dt-buttons > .dt-button.odeme-btn {
  background: var(--pb-success) !important;
  border-color: var(--pb-success) !important;
  color: #fff !important;
  font-weight: 650 !important;
}
.dt-buttons > .dt-button.odeme-btn:hover {
  background: #166534 !important;
  border-color: #166534 !important;
  color: #fff !important;
}
.dt-buttons > .dt-button.odeme-btn::before { color: #fff; }

/* Veri eylemleri nötr zeminde kalır; ayrım İKON RENGİYLE yapılır,
   böylece 8 buton birbiriyle yarışmadan yine ayırt edilebilir olur. */
.dt-buttons > .dt-button.success-btn,
.dt-buttons > .dt-button.cari-btn,
.dt-buttons > .dt-button.purple-btn,
.dt-buttons > .dt-button.teal-btn,
.dt-buttons > .dt-button.orange-btn,
.dt-buttons > .dt-button.warning-btn {
  background: var(--pb-surface) !important;
  border-color: var(--pb-border-strong) !important;
  color: var(--pb-text-2) !important;
}
.dt-buttons > .dt-button.success-btn::before { color: var(--pb-success); }
.dt-buttons > .dt-button.purple-btn::before  { color: #7c3aed; }
.dt-buttons > .dt-button.success-btn:hover,
.dt-buttons > .dt-button.cari-btn:hover,
.dt-buttons > .dt-button.purple-btn:hover,
.dt-buttons > .dt-button.teal-btn:hover,
.dt-buttons > .dt-button.orange-btn:hover,
.dt-buttons > .dt-button.warning-btn:hover {
  background: var(--pb-surface-3) !important;
  color: var(--pb-text) !important;
}

/* ---------- 13b. Colvis açılır listesi (kolon göster/gizle) ----------
   Sorun: kolonun açık mı kapalı mı olduğu belli olmuyordu.
   Çözüm: her satıra gerçek bir onay kutusu göstergesi.
   DataTables görünür kolona `.active` sınıfı verir — gösterge ona bağlı. */

.dt-button-collection {
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  box-shadow: var(--pb-shadow-3);
  padding: 6px;
  z-index: 2002;
}

.dt-button-collection .dt-button {
  display: block;
  width: 100%;
  text-align: left;
  position: relative;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--pb-radius-sm) !important;
  padding: 7px 12px 7px 32px !important;
  margin: 1px 0 !important;
  font-size: var(--pb-fs-sm) !important;
  font-weight: 500 !important;
  color: var(--pb-text-muted) !important;
  box-shadow: none !important;
}
.dt-button-collection .dt-button:hover {
  background: var(--pb-surface-3) !important;
  color: var(--pb-text) !important;
}

/* Kutu — kapalı hâl */
.dt-button-collection .dt-button:not(.buttons-colvisRestore)::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--pb-border-strong);
  border-radius: 4px;
  background: var(--pb-surface);
  transition: background-color .1s ease, border-color .1s ease;
}

/* Kolon AÇIK: dolu kutu + tik + koyu metin */
.dt-button-collection .dt-button.active {
  color: var(--pb-text) !important;
  font-weight: 650 !important;
}
.dt-button-collection .dt-button.active:not(.buttons-colvisRestore)::before {
  background: var(--pb-primary);
  border-color: var(--pb-primary);
}
.dt-button-collection .dt-button.active:not(.buttons-colvisRestore)::after {
  content: "";
  position: absolute;
  left: 14.5px;
  top: 50%;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-62%) rotate(45deg);
}

/* "Varsayılanlara dön" — liste içindeki tek gerçek buton */
.dt-button-collection .buttons-colvisRestore {
  margin-top: 6px !important;
  padding: 8px 12px !important;
  text-align: center;
  font-weight: 650 !important;
  color: var(--pb-primary) !important;
  border-top: 1px solid var(--pb-border) !important;
  border-radius: 0 0 var(--pb-radius-sm) var(--pb-radius-sm) !important;
}
.dt-button-collection .buttons-colvisRestore:hover {
  background: var(--pb-primary-50) !important;
  color: var(--pb-primary-600) !important;
}

/* ---------- 13c. `custom-control` yanlışlıkla butonlara verilmiş ----------
   Bootstrap'ta `.custom-control` bir CHECKBOX yerleşim sınıfıdır
   (position:relative, display:block, padding-left:1.5rem). UserToTransfer'da
   "Uygula" / "Filtrele" butonlarına da eklenmiş. Sınıfı SİLMİYORUZ
   (jQuery seçicisi olabilir) — sadece buton üzerindeki etkisini nötrler. */
.btn.custom-control,
input.btn.custom-control {
  position: static;
  display: inline-block;
  width: auto;
  min-height: 0;
  padding: 7px 14px;
}

/* ---------- 14. "Filtreler" / "İşlemler" blokları ----------
   Gerçek markup: <form role="form"> içinde <div class="row"><h3 class="ml-2">…
   Markup'a dokunmadan bu başlıkları gerçek bölüm ayırıcısına çeviriyoruz. */

.card-body form[role="form"] > .row > h3 {
  width: 100%;
  font-size: var(--pb-fs-lg);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--pb-text);
  margin: var(--pb-space-5) 0 var(--pb-space-3);
  padding-bottom: var(--pb-space-2);
  border-bottom: 1px solid var(--pb-border);
}
.card-body form[role="form"] > .row:first-child > h3 { margin-top: 0; }

/* Dikey ritim: her alan grubu eşit boşluk bıraksın */
.card-body form[role="form"] .form-group { margin-bottom: var(--pb-space-4); }

/* Kontroller aynı yükseklikte hizalansın (label'lar üstte olduğu için
   butonlar <label>&nbsp;</label> boşluklarıyla hizalanıyor — o hack korunuyor) */
.card-body form[role="form"] .custom-select,
.card-body form[role="form"] .form-control,
.card-body form[role="form"] .input-group,
.card-body form[role="form"] .input-group .form-control { height: 38px; }

.card-body form[role="form"] .input-group-text {
  height: 38px;
  display: flex;
  align-items: center;
}

/* "Filt. Sıfırla" — <label> içine sarılmış kırmızı link */
.card-body form[role="form"] label > a[onclick] {
  font-weight: 600;
  text-decoration: none;
}
.card-body form[role="form"] label > a[onclick]:hover { text-decoration: underline; }

/* ---------- 14b. Hızlı arama otomatik tamamlama (jQuery UI) ----------
   _Layout.cshtml:84 CDN'den jQuery UI'ın "ui-lightness" temasını yüklüyor
   (satır 46'da ikinci bir jQuery UI CSS'i daha var). Listedeki sarı/turuncu
   vurgu, degrade zemin ve sarı kenarlık oradan geliyor.

   Markup (jQuery UI 1.12):
     <ul class="ui-menu ui-widget ui-widget-content ui-autocomplete">
       <li class="ui-menu-item"><div class="ui-menu-item-wrapper">…</div></li>
   Seçili öğe: .ui-menu-item-wrapper.ui-state-active
   JS'e dokunulmuyor; yalnızca görünüm ui-lightness'tan alınıp temaya bağlanıyor. */

.ui-autocomplete.ui-menu {
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  box-shadow: var(--pb-shadow-3);
  padding: 6px;
  font-family: var(--pb-font);
  font-size: var(--pb-fs-sm);
  color: var(--pb-text-2);
  z-index: 2100;
}

.ui-autocomplete .ui-menu-item { list-style: none; margin: 0; }
.ui-autocomplete .ui-menu-item + .ui-menu-item { border-top: 1px solid var(--pb-surface-3); }

.ui-autocomplete .ui-menu-item-wrapper {
  display: block;
  padding: 10px 12px;
  margin: 1px 0;
  border: 0;
  border-radius: var(--pb-radius-sm);
  background: transparent;
  color: var(--pb-text-2);
  line-height: 1.55;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

/* Seçili/gezinilen öğe — ui-lightness'ın sarı degradesi yerine marka tonu */
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-focus,
.ui-autocomplete .ui-menu-item-wrapper:hover {
  background: var(--pb-primary-50) !important;
  background-image: none !important;
  border: 0 !important;
  margin: 1px 0 !important;
  color: var(--pb-text) !important;
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--pb-primary);
}

/* Kaydırma çubuğu — _Layout.cshtml:183-190 max-height:400px veriyor */
.ui-autocomplete.ui-menu::-webkit-scrollbar { width: 10px; }
.ui-autocomplete.ui-menu::-webkit-scrollbar-thumb {
  background: var(--pb-border-strong);
  border-radius: var(--pb-radius-pill);
  border: 3px solid var(--pb-surface);
}

/* ---------- 15. Yükleniyor / boş durum ---------- */

.pb-skeleton {
  background: linear-gradient(90deg, var(--pb-surface-3) 25%, var(--pb-surface-2) 37%, var(--pb-surface-3) 63%);
  background-size: 400% 100%;
  animation: pb-shimmer 1.3s ease infinite;
  border-radius: var(--pb-radius-sm);
  height: 14px;
}
@keyframes pb-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.dataTables_processing {
  border: 1px solid var(--pb-border) !important;
  border-radius: var(--pb-radius) !important;
  box-shadow: var(--pb-shadow-2) !important;
  background: var(--pb-surface) !important;
  color: var(--pb-text-2) !important;
  font-size: var(--pb-fs-sm);
  font-weight: 600;
}

.pb-empty {
  text-align: center;
  padding: var(--pb-space-6) var(--pb-space-4);
  color: var(--pb-text-muted);
  font-size: var(--pb-fs-sm);
}