/**
 * app-tabler.css — Tabler/Bootstrap 5 geçişi için köprü katmanı.
 * Tema CSS'lerinden SONRA yüklenir, bu yüzden son sözü bu dosya söyler.
 *
 * İçerik:
 *  1. FontAwesome'dan kalan davranışların Tabler Icons karşılıkları
 *  2. BS4'ten BS5'e ad değiştiren seçicilere bağlı tema kurallarının portu
 *  3. Tom Select'in tema/form ile uyumu
 */

/* ------------------------------------------------ 1. ikon davranışları */

/* fa-spin / fa-pulse yerine */
.ti-spin {
    display: inline-block;
    animation: ti-spin 1.6s linear infinite;
}

@keyframes ti-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ti-spin { animation: none; }
}

/* Tabler glifleri metin gibi render edilir; ikonu satır içinde hizalı tut */
.ti {
    line-height: 1;
    vertical-align: -0.125em;
}

/* fa-lg / fa-2x karşılıkları.
   Tabler'ın .fs-* ölçeği Bootstrap'in tersi (.fs-5 = .75rem), bu yüzden ikon
   büyütmek için kullanılamıyor — kendi ölçeğimiz. */
.ti-lg { font-size: 1.35em; }
.ti-2x { font-size: 2em; }

/* Sidebar ikonları eskiden .fa ile sabit genişlikteydi (main.css .app-menu__icon) */
.app-menu__icon.ti {
    font-size: 1.35rem;
    width: 1.6rem;
    text-align: center;
}

.treeview-indicator.ti {
    font-size: 1rem;
}

/* main.css hamburger'ı FontAwesome glifiyle basıyordu (\f0c9 / "Font Awesome 5 Pro") */
.app-sidebar__toggle:before {
    content: "\ec42";               /* ti-menu-2 */
    font-family: "tabler-icons";
    font-size: 22px;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------- 2. BS4 -> BS5 seçici portları */

/* custom.css: .alert > .close  |  dark.css: .close */
.alert > .btn-close {
    color: #071e39;
}

/* Kapatma butonu artık BS5'in kendi ikonunu kullanıyor; eski × metni
   kalan yerlerde çift görünmesin */
.btn-close > span,
.btn-close > i {
    display: none;
}

/* modern_overrides.css .badge-primary vb. yerine BS5 .text-bg-* */
.badge.text-bg-primary { color: #fff; }

/* Özel checkbox/radio'lar da FontAwesome gliflerine bağlıydı
   (custom.css .checkbox / .checkbox-<renk>, main.css .animated-radio-button / .toggle).
   Kaynak kurallar `font-family` ve `content`'i AYNI bloklarda veriyor; burada da
   ikisini birlikte ve `!important` ile yazmak gerekiyor, aksi halde tema dosyasının
   font-family'si ayakta kalıp glif kutucuğa (□) dönüşüyor. */
.checkbox input[type="checkbox"] + .label-text::before,
.checkbox input[type="checkbox"]:checked + .label-text::before,
.checkbox input[type="radio"] + .label-text::before,
.checkbox input[type="radio"]:checked + .label-text::before,
[class^="checkbox-"] input[type="checkbox"] + .label-text::before,
[class^="checkbox-"] input[type="checkbox"]:checked + .label-text::before,
[class^="checkbox-"] input[type="radio"] + .label-text::before,
[class^="checkbox-"] input[type="radio"]:checked + .label-text::before,
.animated-radio-button input[type="radio"] + .label-text::before,
.animated-radio-button input[type="radio"]:checked + .label-text::before,
.toggle input[type="checkbox"] + .button-indecator::before,
.toggle input[type="checkbox"]:checked + .button-indecator::before,
input[type="checkbox"].styled:checked + label::after,
input[type="radio"].styled:checked + label::after {
    font-family: "tabler-icons" !important;
    font-weight: normal !important;
    -webkit-font-smoothing: antialiased;
}

/* ti-square */
.checkbox input[type="checkbox"] + .label-text::before,
[class^="checkbox-"] input[type="checkbox"] + .label-text::before {
    content: "\eb2c" !important;
}

/* ti-square-check */
.checkbox input[type="checkbox"]:checked + .label-text::before,
[class^="checkbox-"] input[type="checkbox"]:checked + .label-text::before {
    content: "\eb28" !important;
}

/* ti-circle */
.checkbox input[type="radio"] + .label-text::before,
[class^="checkbox-"] input[type="radio"] + .label-text::before,
.animated-radio-button input[type="radio"] + .label-text::before,
.toggle input[type="checkbox"] + .button-indecator::before {
    content: "\ea6b" !important;
}

/* ti-circle-check */
.checkbox input[type="radio"]:checked + .label-text::before,
[class^="checkbox-"] input[type="radio"]:checked + .label-text::before,
.animated-radio-button input[type="radio"]:checked + .label-text::before,
.toggle input[type="checkbox"]:checked + .button-indecator::before {
    content: "\ea67" !important;
}

/* ti-check */
input[type="checkbox"].styled:checked + label::after,
input[type="radio"].styled:checked + label::after {
    content: "\ea5e" !important;
}

/* Devre dışı checkbox custom.css'te boş içerikle çiziliyordu */
.checkbox input[type="checkbox"]:disabled + .label-text::before {
    content: "\eb2c" !important;
    opacity: .5;
}

/* Sayfa başlığındaki eylem butonları .breadcrumb-item içinde duruyor; Tabler'ın
   `.breadcrumb-item a { color: link }` kuralı butonun kendi metin rengini eziyordu
   (mor zeminde mavi yazı). */
.app-breadcrumb .btn,
.app-breadcrumb .btn:hover,
.app-breadcrumb .btn:focus {
    color: inherit;
}

.app-breadcrumb .btn-main,
.app-breadcrumb .btn-primary,
.app-breadcrumb .btn-success,
.app-breadcrumb .btn-danger,
.app-breadcrumb .btn-info,
.app-breadcrumb .btn-dark {
    color: #fff;
}

/* Raporlar sayfasındaki "Eklenme/Güncellenme" seçici position:absolute ama
   konumlanmış bir atası yoktu; sekme çubuğu yerine sayfa başına kaçıyordu. */
.col-md-12:has(> .tarihRapor) {
    position: relative;
}

/* SweetAlert2 toast'ları sabit üst çubuğun altından başlasın */
.swal2-container.swal2-top-end,
.swal2-container.swal2-top-start {
    padding-top: 70px;
    padding-inline: 16px;
}

/* toastr'ın renkli zemini geri: tip rengi arka plana, metin/ikon beyaza.
   Sınıflar app-ui.js içindeki customClass ile basılıyor. */
.swal2-popup.swal2-toast.app-toast {
    color: #fff;
    border: 0;
    box-shadow: 0 6px 24px rgba(15, 23, 42, .25);
}

.swal2-popup.swal2-toast.app-toast .swal2-title,
.swal2-popup.swal2-toast.app-toast .swal2-html-container {
    color: #fff;
}

.swal2-popup.swal2-toast.app-toast .swal2-timer-progress-bar {
    background: rgba(255, 255, 255, .45);
}

/* Renkli zeminde SweetAlert2'nin kendi ikon çizimi okunmuyor; beyaza çeviriyoruz.
   Yalnızca çizgiler beyaz olmalı — halka/dolgu parçaları saydam kalmazsa ikon
   içi dolu beyaz bir daireye dönüşüyor. */
.swal2-popup.swal2-toast.app-toast .swal2-icon {
    border-color: rgba(255, 255, 255, .75);
    color: #fff;
}

.swal2-popup.swal2-toast.app-toast .swal2-icon .swal2-icon-content {
    color: #fff;
}

.swal2-popup.swal2-toast.app-toast .swal2-success-line-tip,
.swal2-popup.swal2-toast.app-toast .swal2-success-line-long,
.swal2-popup.swal2-toast.app-toast .swal2-x-mark-line-left,
.swal2-popup.swal2-toast.app-toast .swal2-x-mark-line-right {
    background-color: #fff;
}

.swal2-popup.swal2-toast.app-toast .swal2-success-ring {
    border-color: rgba(255, 255, 255, .45);
}

.swal2-popup.swal2-toast.app-toast .swal2-success-circular-line-left,
.swal2-popup.swal2-toast.app-toast .swal2-success-circular-line-right,
.swal2-popup.swal2-toast.app-toast .swal2-success-fix {
    background-color: transparent;
}

.swal2-popup.swal2-toast.app-toast-success { background: #2fb344; }
.swal2-popup.swal2-toast.app-toast-info { background: #4299e1; }
.swal2-popup.swal2-toast.app-toast-warning { background: #f76707; }
.swal2-popup.swal2-toast.app-toast-error { background: #d63939; }

/* ------------------------------------------------- açılış geçiş kilidi */

/* top.php body'ye .preload basar, app-ui.js window.load'da kaldırır.
   Böylece sidebar margin'i ve treeview max-height'ı sayfa açılırken
   görünür şekilde animasyon yapmıyor. */
body.preload,
body.preload * {
    transition: none !important;
    animation: none !important;
}

/* --------------------------------------------------------- üst çubuk */

/* Tema 50px'lik bir başlık çubuğuna göre kurulu (.app-content { margin-top: 50px }).
   Logo görselinin doğal yüksekliği 62px olduğu için çubuk boyunu o belirliyordu. */
.app-header {
    height: 50px;
    min-height: 50px;
}

/* Tema dikey hizayı sabit üst dolgularla taklit ediyordu: hamburger
   `padding:14px 14px 0`, başlık `padding:17px 0 0`, logo alanı ise
   `line-height:50px` + taban çizgisi hizası — üç öge, üç farklı yöntem,
   üç farklı yükseklik. Üçünü de gerçek dikey ortalamaya çeviriyoruz. */
.app-header__logo,
.app-sidebar__toggle,
.app-header-title {
    align-items: center;
    height: 50px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
    margin: 0;
}

.app-header__logo,
.app-sidebar__toggle {
    display: flex;
}

/* Başlık 767px altında media.css tarafından gizleniyor. `display` değerini
   koşulsuz vermek o gizlemeyi eziyor (aynı özgüllük, bu dosya daha sonra
   yükleniyor) — bu yüzden yalnızca görünür olduğu genişlikte flex yapıyoruz. */
@media (min-width: 768px) {
    .app-header-title {
        display: flex;
        white-space: nowrap;
    }
}

.app-header__logo {
    justify-content: center;
    padding-inline-start: 0;
    padding-inline-end: 0;
}

.app-sidebar__toggle {
    justify-content: center;
    padding-inline-start: 14px;
    padding-inline-end: 14px;
}

/* İkonlar satır kutusunun ortasına otursun; eskiden .fa'nın kendi
   line-height'ı bu işi görüyordu. */
.app-nav__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 12px;
    line-height: 1;
}

/* Rozet ikonun üst yarısını kapatıyordu: ikon dikeyde ortalıyken 11.4-38.6
   aralığındaydı, rozet ise 6-23. İkonu 4px aşağı alıp rozeti yukarı çekince
   ikisi artık üst üste binmiyor (ikon 15.4-42.6, rozet 1-15).
   Kaydırma `margin-top` ile değil `top` ile: flex ortalamada margin dış kutuya
   dahil edilip kaymayı yarıya düşürüyor. */
/* Tabler ikon WEBFONT'u 24px ızgarada sabit 2px konturla çizilmiş; kontur
   kalınlığı yalnızca SVG sürümünde ayarlanır, webfont'ta ayarlanamaz. Tek
   kaldıraç boyut: 1.7rem = 27.2px ⇒ kontur ~2.27px ("çok kalın").
   1.4rem = 22.4px ⇒ ~1.87px. Tıklama alanı ikondan değil .app-nav__item'in
   50px yüksekliği + 12px yan dolgusundan geliyor, yani küçülme erişimi
   etkilemiyor. */
.app-nav__item > .ti {
    font-size: 1.4rem;
    position: relative;
    top: 3px;
}

/* Rozet ikonun sağ üst köşesine yapışsın.
   10px/16px'te iki haneli sayı okunmuyordu. Ölçüldü: 12px yazı + 2px/5px dolgu
   ⇒ 18px yükseklik; ikonun üst kenarı 16.8px, yani rozet ikonun köşesine 1.2px
   biniyor. İkon glifinin o köşesi zaten boş, sayı okunur kalıyor. Daha fazla
   büyütmek 50px'lik çubuğu taşırır. */
.app-nav__item .badge {
    top: 2px;
    inset-inline-end: 0;
    min-width: 19px;
    font-size: 12px;
    padding: 2px 5px;
    line-height: 1;
    border-radius: 999px;
}

/* ------------------------------------------------------- DataTables */

/* dtjs.php özel `dom` düzeni kullandığı için BS5 entegrasyonunun kendi
   hizalaması devreye girmiyor; sayfalama sağa yaslansın. */
.dt-paging .pagination,
.dataTables_paginate .pagination {
    justify-content: flex-end;
    margin-bottom: 0;
}

.dt-layout-row .dt-paging {
    margin-inline-start: auto;
}

/* Tabler her .btn'e min-height: 2.375rem (38px) veriyor; temanın .btn-xs/.btn-sm
   sınıfları bunu ezmediği için tablo satırları 51px'e çıkıyordu. */
.btn-xs {
    --tblr-btn-padding-y: .15rem;
    --tblr-btn-padding-x: .4rem;
    --tblr-btn-font-size: .8125rem;
    min-height: 0;
    line-height: 1.4;
}

.btn-sm {
    min-height: 0;
}

/* Satır dolgusu: modern_overrides.css `!important` ile yazdığı için
   burada da aynı ağırlık gerekiyor. */
table.dataTable > tbody > tr > td,
table.dataTable > thead > tr > th,
.tile .table > tbody > tr > td,
.tile .table > thead > tr > th {
    padding-top: .3rem !important;
    padding-bottom: .3rem !important;
    vertical-align: middle;
}

table.dataTable > tbody > tr > td .badge {
    padding: .25em .5em;
}

/* Hücre içindeki blok öğeler ve checkbox sarmalayıcısı satırı yükseltmesin */
table.dataTable > tbody > tr > td p,
table.dataTable > tbody > tr > td > div:not(.checkbox) {
    margin-bottom: 0;
}

table.dataTable > tbody > tr > td .checkbox {
    margin: 0;
    min-height: 0;
}

table.dataTable > tbody > tr > td .checkbox label {
    margin-bottom: 0;
}

/* --------------------------------------------------------- sekmeler */

/* Pasif sekmeler renksiz düz yazı gibi duruyordu — tıklanabilir olduğu
   anlaşılmıyordu. Hafif zemin + kenarlık ver. */
.nav-pills .nav-link:not(.active) {
    background-color: var(--app-surface-2);
    border: 1px solid var(--app-border);
    color: var(--app-text-muted);
}

.nav-pills .nav-link:not(.active):hover {
    background-color: var(--app-surface-3);
    color: var(--app-text);
}

.nav-pills .nav-item + .nav-item {
    margin-inline-start: .35rem;
}

/* --------------------------------------------------------- kartlar */

/* Kartlar zeminden ayrılsın; gölge yoğunluğu tema token'ından geliyor. */
.tile,
.card {
    box-shadow: 0 1px 2px var(--app-shadow-soft), 0 4px 16px var(--app-shadow-soft);
}

/* ------------------------------------------------------- kaydırma çubuğu */

/* Varsayılan Windows çubukları (15-17px) tema için fazla kalın. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--app-border-strong) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--app-border-strong);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--app-text-muted);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Sidebar iki temada da koyu; tutamağı kabuk token'ından alıyor. Sabit beyaz
   rgba(255,255,255,.25) koyu temada zeminden fazla ayrışıp sırıtıyordu. */
.app-sidebar,
.treeview-menu {
    scrollbar-color: var(--app-shell-scroll) transparent;
}

.app-sidebar::-webkit-scrollbar-thumb,
.treeview-menu::-webkit-scrollbar-thumb {
    background-color: var(--app-shell-scroll);
}

.app-sidebar::-webkit-scrollbar-track,
.treeview-menu::-webkit-scrollbar-track {
    background: transparent;
}

/* ----------------------------------------------------- sidebar kullanıcı */

/* Avatar bloğunun dikey dolgusu gereğinden fazlaydı */
.app-sidebar__user {
    padding: 6px 12px;
}

/* modern_overrides.css mini modda 15px'i !important ile dayatıyor */
.sidenav-toggled .app-sidebar__user {
    padding: 6px 0 !important;
}

.app-sidebar__user-name,
.app-sidebar__user-designation {
    margin-bottom: 0;
    line-height: 1.3;
}

.app-sidebar__user-designation {
    margin-top: 3px;
}

/* --------------------------------------------------------- DataTables 2 */

/* DT 2 sayısal kolonları otomatik `dt-type-numeric` ile sağa yaslıyor
   (DT 1.x'te yoktu). ID kolonları bu yüzden satırın ortasında asılı kalıyordu. */
/* Sütun genişliği: sayfalar #ID ve işlem sütununa `style="max-width:40px"`
   veriyordu ama otomatik yerleşimli bir tabloda th'ye verilen max-width'in
   hiçbir etkisi yok — DataTables üç kısa sütunu eşit dağıtıp #ID'ye 380px
   ayırıyordu. `width:1%` otomatik yerleşimde "içerik kadar" demek.
   !important gerekiyor: autoWidth açıkken DataTables th'ye satır içi width
   yazıyor. */
/* DataTables sıralama okunu başlığın sağına mutlak konumlandırır (right:12px,
   genişlik 12px) ve yerini `padding-right:30px` ile ayırır. modern_overrides.css
   `.table th { padding: .35rem .5rem !important }` diyerek o payı siliyordu —
   ok başlık yazısının üstüne biniyordu, sıralanabilir her sütunda. Payı geri
   veriyoruz; !important şart, karşı taraf da !important. */
table.dataTable thead > tr > th.dt-orderable-asc,
table.dataTable thead > tr > th.dt-orderable-desc,
table.dataTable thead > tr > th.dt-ordering-asc,
table.dataTable thead > tr > th.dt-ordering-desc {
    padding-inline-end: 1.75rem !important;
}

table.dataTable th.dt-shrink,
table.dataTable td.dt-shrink {
    width: 1% !important;
    white-space: nowrap;
}

/* Tablo hücrelerinin sarmama kuralı dosyanın sonundaki tutarlılık bloğunda. */

table.dataTable td.dt-type-numeric,
table.dataTable th.dt-type-numeric,
table.dataTable td.dt-type-date,
table.dataTable th.dt-type-date {
    text-align: inherit;
}

/* ------------------------------------------------------- sayfa başlık şeridi */

/* Tema başlığı `.app-title h1 { font-size: 24px }` olarak yazmış ama sayfaların
   tamamı `<h4>` kullanıyor — kural hiç tutmuyor, başlık Tabler'ın h4'ünden
   gelen 14px'te kalıyordu. 68px'lik şeridin içinde 14px yazı + 30/10 asimetrik
   dolgu duruyordu; ikisini de burada düzeltiyoruz. */
.app-title {
    padding-top: 18px;
    padding-bottom: 18px;
}

.app-title h1,
.app-title h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Başlıktaki durum rozeti yazıyla orantılı kalsın. !important şart: custom.css'in
   `span.badge:not(...):not(...)` seçicisi iki :not() sayesinde üç sınıf ağırlığında
   ve 11px'i buradaki her makul seçiciden daha güçlü dayatıyor. */
.app-title h4 .badge {
    font-size: .8125rem !important;
    padding: .25rem .5rem !important;
}

.app-title .app-breadcrumb {
    font-size: .875rem;
    /* Eylem butonları her genişlikte sağ kenara yaslansın. main.css'teki
       `justify-content: space-between`e güvenilemiyordu: `.app-title` iki değil
       ÜÇ flex öğesi taşıyor (başlık | `<form id="multiproc">` | breadcrumb),
       dar ekranda ise aşağıdaki blok `flex-start`a çeviriyordu. Otomatik marj
       öğe sayısından ve `justify-content`ten bağımsız çalışır; mantıksal
       özellik olduğu için RTL'de kendiliğinden sola yaslar. */
    margin-inline-start: auto;
}

/* Sayfaların çoğunda `<form id="multiproc">` boş basılıyor (yalnızca toplu
   işlem yetkisi olan kullanıcıda dolu). Boş da olsa bir flex ÖĞESİ olduğu için
   `.app-title`ın `gap` değeri kadar görünmez bir boşluk açıyor ve başlık ile
   butonun arasını asimetrik gösteriyordu. */
.app-title > form:empty {
    display: none;
}

@media (max-width: 767.98px) {
    .app-title h1,
    .app-title h4 {
        font-size: 1.0625rem;
    }
}

/* ----------------------------------------------- sayfa gövdesi arka planı */

/* Tabler body zeminini beyaza çekiyor; tema gövdesi (main) gri olduğu için
   sayfa main'den uzunsa altta beyaz bir şerit kalıyordu. Sabit #e5e5e5 yazılıydı,
   koyu temada sayfanın altında açık gri şerit bırakıyordu — token'dan okuyor. */
body {
    background-color: var(--app-bg);
}

/* Tabler ≥992px'te `:root { margin-left: calc(-100% + 100vw) }` uyguluyor —
   scrollbar gelip gidince sayfa kaymasın diye. Bu temanın sidebar'ı
   position:fixed/left:0 olduğu için sonuç, sidebar ile içerik arasında
   scrollbar genişliği kadar (15px) anlamsız bir yarık oluyordu. */
@media (min-width: 992px) {
    :host,
    :root {
        margin-inline-start: 0;
        margin-inline-end: 0;
    }
}

/* Sidebar fixed; viewport'u dikey olarak tam kaplasın */
.app-sidebar {
    top: 0;
    bottom: 0;
    height: auto;
}

/* ------------------------------------------------- 3. Tom Select uyumu */

/* Form kontrolleriyle aynı yükseklik/kenarlık */
.ts-wrapper.form-select,
.ts-wrapper.form-control {
    padding: 0;
    height: auto;
}

.ts-wrapper .ts-control {
    border-radius: var(--tblr-border-radius, .25rem);
}

/* Tarih satırı: "Eklenme" seçimi içeriği kadar dar kalır, kalan genişliği tarih
   kutusu alır. Önceden ikisi eşit paylaşıp seçimi gereğinden uzun yapıyordu. */
.input-group > select[name="dtype"] + .ts-wrapper {
    flex: 0 0 9.5rem;
    width: 9.5rem;
}

/* input-group içinde köşe yuvarlaklığı taşmasın */
.input-group > .ts-wrapper:not(:last-child) .ts-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .ts-wrapper:not(:first-child) .ts-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* tom-select.bootstrap5 teması `--bs-*` değişkenlerini bekliyor; Tabler ise
   `--tblr-*` tanımlıyor. Sonuç: açılır listenin zemini saydam kalıp altındaki
   kart metinleri listenin içinden okunuyordu. */
.ts-control,
.ts-wrapper.single .ts-control,
.ts-dropdown {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}

.ts-control input,
.ts-control .item {
    color: var(--app-text);
}

/* Çoklu seçim çipleri. Vendor teması bunları sabit veriyor
   (background:#efefef; color:#343a40; .active:#0d6efd; .disabled:#fff) — koyu
   temada kutunun içinde parlak beyaz etiketler kalıyordu, aktif olan da marka
   indigosu yerine Bootstrap mavisine düşüyordu. Çip artık "seçilmiş değer"
   olarak okunsun diye marka tonunda; iki temada da zeminden ayrışıyor. */
.ts-wrapper.multi .ts-control > div {
    background: rgba(var(--app-brand-rgb), .13);
    border: 1px solid rgba(var(--app-brand-rgb), .3);
    color: var(--app-text);
    padding: 1px 6px;
}

.ts-wrapper.multi .ts-control > div.active {
    background: var(--app-brand);
    border-color: var(--app-brand);
    color: var(--app-brand-contrast);
}

.ts-wrapper.multi.disabled .ts-control > div,
.ts-wrapper.multi.disabled .ts-control > div.active {
    background: var(--app-surface-2);
    border-color: var(--app-border);
    color: var(--app-text-muted);
}

/* Çip yerine rozet gösteren etiket alanları (kayıt içi alan, liste filtresi):
   marka tonlu çip zemini kalkar, yalnızca etiketin kendi rengi görünür. */
.tag-field .ts-wrapper.multi .ts-control > div,
.ts-wrapper.tag-filter.multi .ts-control > div {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
}

.tag-field .ts-wrapper.multi .ts-control > div.active,
.ts-wrapper.tag-filter.multi .ts-control > div.active {
    background: none;
    outline: 2px solid var(--app-brand);
    outline-offset: 1px;
    border-radius: 4px;
}

.tag-field .ts-wrapper.multi .ts-control > div,
.ts-wrapper.tag-filter.multi .ts-control > div {
    position: relative;
}

.tag-field .ts-wrapper.multi .ts-control .tag-item .tag-badge,
.ts-wrapper.tag-filter.multi .ts-control .tag-item .tag-badge {
    padding-inline-end: 28px;
}

/* "×" rozetin içinde, sağ ucunda yuvarlak bir düğme; üzerine gelince kırmızıya döner. */
.tag-field .ts-wrapper.plugin-remove_button .ts-control .item .remove,
.ts-wrapper.tag-filter.plugin-remove_button .ts-control .item .remove {
    position: absolute;
    inset-inline-end: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: .85rem;
    line-height: 1;
    color: inherit;
    opacity: .65;
}

.tag-field .ts-wrapper.plugin-remove_button .ts-control .item .remove:hover,
.ts-wrapper.tag-filter.plugin-remove_button .ts-control .item .remove:hover {
    background: var(--tblr-danger, #d63939);
    color: #fff;
    opacity: 1;
}

/* Çipin "×" düğmesi: ayraç çizgisi sabit #dee2e6 idi (koyu çipte görünmüyor),
   hover zemini de rgba(0,0,0,.05) — koyu temada hiçbir geri bildirim yoktu. */
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
    border-inline-start-color: rgba(var(--app-brand-rgb), .3);
}

.ts-wrapper.plugin-remove_button.rtl .item .remove {
    border-inline-end-color: rgba(var(--app-brand-rgb), .3);
}

.ts-wrapper.plugin-remove_button .item .remove {
    color: var(--app-text-muted);
}

.ts-wrapper.plugin-remove_button .item .remove:hover {
    background: var(--tblr-danger, #d63939);
    color: #fff;
}

.ts-wrapper.plugin-remove_button.disabled .item .remove,
.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
    border-inline-start-color: var(--app-border);
}

/* Boşken görünen "Statü Seçiniz" metni gerçek bir input; placeholder rengi
   tarayıcı varsayılanında kalırsa koyu temada okunmuyor. */
.ts-control .items-placeholder,
.ts-control input::placeholder {
    color: var(--app-text-muted);
    opacity: 1;
}

.ts-dropdown {
    border: 1px solid var(--app-border);
    border-radius: var(--tblr-border-radius, .375rem);
    box-shadow: 0 8px 24px var(--app-shadow-color);
}

.ts-dropdown .option {
    color: var(--app-text);
}

.ts-dropdown .active {
    background-color: rgba(var(--app-brand-rgb), .16);
    color: var(--app-text);
}

.ts-wrapper.disabled .ts-control,
.ts-control.disabled {
    background-color: var(--app-surface-2);
    color: var(--app-text-muted);
}

/* dropdown_input eklentisinin arama kutusu (bootstrap-select'teki gibi
   listenin üstünde ayrı bir alan) */
.ts-dropdown .dropdown-input-wrap {
    padding: .5rem;
    border-bottom: 1px solid var(--app-border);
}

.ts-dropdown .dropdown-input {
    display: block;
    width: 100%;
    padding: .35rem .6rem;
    border: 1px solid var(--app-border);
    border-radius: var(--tblr-border-radius, .375rem);
    background: var(--app-surface-2);
    color: var(--app-text);
    box-shadow: none;
    outline: none;
}

.ts-dropdown .dropdown-input:focus {
    border-color: rgba(var(--app-brand-rgb), .6);
}

/* Liste bir seferde ~5 satır göstersin, gerisi kaydırılsın (satır ≈ 2.25rem).
   Arama kutusu yalnızca 5'ten fazla seçenekte açılıyor — bkz. app-ui.js SEARCH_MIN. */
.ts-dropdown .ts-dropdown-content {
    max-height: 11.5rem;
}

/* DataTables'ın "Sayfada [25] kayıt göster" etiketi tek satır olmalı. Tom Select
   sarmalayıcısı blok seviyesinde (flex) olduğu için üç satıra bölünüyordu. */
/* DataTables 2'de <label> artık <select>'in KARDEŞİ; 1.x'te select'i sarıyordu.
   Boşluk kuralı label'a veriliyordu, yani hiç uygulanmıyordu — kutu ile
   "kayıt göster" yazısı birbirine yapışıktı. Flex artık kapsayıcıda. */
.dt-length {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}

.dt-length label {
    margin: 0;
}

.dt-length .ts-wrapper {
    display: inline-flex;
    width: auto;
    min-width: 5.5rem;
    margin: 0;
}

/* Uzunluk seçicisi 29px, hemen yanındaki arama kutusu 38px yüksekliğindeydi
   (modern_overrides `.form-control { min-height: 38px }` veriyor, DataTables ise
   uzunluk select'ine `form-select-sm` ekliyor). Aynı şeritte iki farklı
   yükseklik olmasın. */
.dt-length .ts-control {
    min-height: 38px;
}

/* Vendor: `.ts-wrapper.form-select-sm.has-items .ts-control { padding-bottom: 0 }`
   ÇOKLU seçim için yazılmış — çipler kendi `margin-bottom: 3px`ini taşıdığı için
   alt dolgu sıfırlanıyor. TEKLİ seçimde çip yok; kutu 6px üst / 0 alt dolguda
   kalıp yazıyı yukarı itiyordu. Ölçüm: padding 6px 36px 0px 12px.
   align-items ayrıca dolgudan bağımsız olarak dikey ortalamayı garantiliyor. */
.ts-wrapper.single .ts-control {
    align-items: center;
}

.ts-wrapper.form-select-sm.single.has-items .ts-control,
.ts-wrapper.form-control-sm.single.has-items .ts-control {
    padding-top: .375rem;
    padding-bottom: .375rem;
}

/* Açılır liste, kendinden sonra gelen kartların (.tile position:relative)
   altında kalıyordu; hem listeyi hem açık olan sarmalayıcıyı yukarı al. */
.ts-dropdown {
    z-index: 1056;
}

.ts-wrapper.dropdown-active {
    position: relative;
    z-index: 1056;
}

/* Modal içindeki açılır listeler kırpılmasın */
.modal .ts-dropdown {
    z-index: 1065;
}

/* --------------------------------------------------- flatpickr tema uyumu

   flatpickr'ın kendi CSS'i tek renk şemasıyla (açık) geliyor; koyu temada takvim
   beyaz bir kutu olarak açılıyor, ay seçici <select> ise koyu üstüne koyu kalıyordu.
   Renkleri token'a bağlıyoruz — iki temada da tek kural yeterli. */
.flatpickr-calendar {
    background: var(--app-surface);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    box-shadow: 0 8px 24px var(--app-shadow-color);
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after { border-bottom-color: var(--app-surface); }
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after { border-top-color: var(--app-surface); }

.flatpickr-months,
.flatpickr-month,
.flatpickr-current-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
    background: transparent;
    color: var(--app-text);
    fill: var(--app-text);
}

.flatpickr-monthDropdown-months,
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month,
.numInputWrapper input.cur-year {
    background: var(--app-surface);
    color: var(--app-text);
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: var(--app-text); }

.flatpickr-day {
    color: var(--app-text);
    border-color: transparent;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--app-surface-3);
    border-color: var(--app-surface-3);
}

.flatpickr-day.today {
    border-color: var(--app-brand);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--app-brand);
    border-color: var(--app-brand);
    color: #fff;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled {
    color: var(--app-text-muted);
    opacity: .55;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
    background: var(--app-surface);
    color: var(--app-text);
}

.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover {
    background: var(--app-surface-3);
}

/* ------------------------------------------------------------------ formlar */

/* custom.css'teki zorunlu-alan yıldızı yalnızca eski .control-label'ı tanıyor;
   Tabler'ın .form-label'ı için de aynı işareti üret. */
div.required > .form-label:before {
    content: "* ";
    color: #d63939;
    font-weight: bold;
}

/* --------------------------------------------------------------- kartlar */

/* custom.css:446 `.card { height: 500px }` veriyor. O kural temanın kendi sabit
   yükseklikli pano parçacığı için yazılmış; Bootstrap/Tabler'ın `.card`'ı forma
   girince bütün kartları 500px'e kilitledi (yetki matrisinde 2462px'lik tablo
   445px'lik kutuya sığdırılmaya çalışılıyordu).
   Önce yalnızca `.shadow` olmayanlar muaf tutulmuştu, ama sabit yükseklik
   `.shadow card` kullanan ekranlarda da yanlış: setstatus'ta kart 500px'de
   kalırken içindeki kenarlıklı liste kartın dışına taşıyordu. Yüksekliği kartın
   değil, içindeki kaydırılan listenin (`.card-inline`, custom.css'te 396px)
   belirlemesi gerekiyor — kart içeriğine göre büyüsün. */
.card {
    height: auto;
}

/* ------------------------------------------------- yetki matrisi (#Group) */

/* color.css ve dark.css'teki #Group bloğu 2016'daki gri sayfa zeminine göre
   yazılmış: hücreler arasında BEYAZ çizgiler, sütunlarda BS4 pastelleri
   (#b8daff / #c3e6cb / #ffeeba) ve #ccc hover. Üstelik sütun seçicileri
   gövdede nth-child(3..5), başlıkta nth-child(2..4) — aralarında bir kayma
   var, o yüzden başlık rengiyle gövde rengi hiçbir zaman hizalanmıyor.
   Tek tek ezmek yerine bloğun tamamı burada sıfırlanıp yeniden tanımlanıyor.
   Yerine izin türü başına bir renk şeridi: aynı nth-of-type sırası hem
   başlıkta hem gövdede geçerli, o yüzden sütun rengi hiç kaymıyor. Renk
   değişkenleri forma gömülü (tema koyu/açık ayrımı $theme ile). */
#Group {
    margin-bottom: 0;
    border-color: var(--pm-border);
}

#Group thead th,
#Group tbody td {
    border-color: var(--pm-border) !important;
    vertical-align: middle;
}

#Group thead th {
    background: var(--pm-head) !important;
    font-weight: 600;
    white-space: nowrap;
}

/* Ad sütunu kalan yeri alır, izin sütunları eşit ve sabit — aksi hâlde üç dar
   sütun 1900px'lik ekranın en sağına yapışıp satırdan kopuyordu. */
#Group th:first-child,
#Group td:first-child {
    width: auto;
}

#Group th:not(:first-child),
#Group td:not(:first-child) {
    width: 16%;
    text-align: center;
}

/* .perm-matrix öneki bilerek: color.css'teki `#Group tbody tr:hover td{#ccc}`
   ile aynı ağırlıkta kalırsak hover satırın tüm renk şeridini griye çeviriyor.
   Bir sınıf ekleyip sütun renklerini kesinleştiriyoruz, hover geri bildirimi de
   arka planı ezmeyen inset gölge ile veriliyor. */
.perm-matrix #Group thead th:nth-of-type(2) { background: var(--pm-show-head) !important; }
.perm-matrix #Group thead th:nth-of-type(3) { background: var(--pm-add-head)  !important; }
.perm-matrix #Group thead th:nth-of-type(4) { background: var(--pm-edit-head) !important; }

.perm-matrix #Group tbody td:first-child     { background: transparent; }
.perm-matrix #Group tbody td:nth-of-type(2)  { background: var(--pm-show); }
.perm-matrix #Group tbody td:nth-of-type(3)  { background: var(--pm-add); }
.perm-matrix #Group tbody td:nth-of-type(4)  { background: var(--pm-edit); }

/* Ana modül satırı: hem ad hücresi hem izin hücreleri bir ton koyu */
.perm-matrix #Group tbody tr.js-group > td                { background: var(--pm-main); }
.perm-matrix #Group tbody tr.js-group > td:nth-of-type(2) { background: var(--pm-show-head); }
.perm-matrix #Group tbody tr.js-group > td:nth-of-type(3) { background: var(--pm-add-head); }
.perm-matrix #Group tbody tr.js-group > td:nth-of-type(4) { background: var(--pm-edit-head); }

.perm-matrix #Group tbody tr:hover > td {
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .045);
}

/* "Modüle git" ile atlanan satır: uzun matriste nereye gidildiği görünsün.
   Arka planı ezmeden, sol kenardan marka rengiyle işaretliyoruz. */
.perm-matrix #Group tbody tr.is-jump-target > td {
    box-shadow: inset 0 0 0 999px rgba(var(--app-brand-rgb), .16);
}

.perm-matrix #Group tbody tr.is-jump-target > td:first-child {
    box-shadow: inset 4px 0 0 var(--app-brand), inset 0 0 0 999px rgba(var(--app-brand-rgb), .16);
}

#Group .form-check {
    display: grid;
    place-items: center;
    min-height: 1.75rem;
    margin: 0;
    padding: 0;
}

#Group .form-check-input {
    margin: 0;
    float: none;
    cursor: pointer;
}

/* "Bu modülde böyle bir işlem yok" — boş hücre yerine okunur bir işaret */
#Group .perm-empty {
    color: var(--pm-empty);
    opacity: .5;
}

/* Modüle git ile kaydırınca satır sabit başlığın altında kalmasın */
#Group tr.js-group {
    scroll-margin-top: 6rem;
}


/* Kutulu izin seçicileri tek satıra sığdır; ad uzunsa kırpılır (title'da tam hâli) */
.form-selectgroup-boxes .form-selectgroup-label {
    text-align: start;
    min-height: 2.5rem;
}

/* -------------------------------------------------------------------- logo */

/* Satır içi SVG marka: işaret + kelime. Kelime sayfa fontunu ve currentColor'ı
   devralır, bu yüzden koyu üst çubukta beyaz, login kartında koyu görünür. */
.app-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    line-height: 1;
}

/* 50px'lik çubukta iki durumda da AYNI ölçü: mini moda geçince işaret
   büyüyüp küçülmüyor, yalnızca kelime düşüyor. */
/* 50px'lik çubukta üst sınır: 42px'lik kutuda mürekkep 33.6px yüksek,
   üstte ve altta 8.2px nefes payı kalıyor. */
.app-logo__mark {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
}

/* viewBox harf kutusuna eşit olduğu için bu değer doğrudan görünen harf
   yüksekliği. 28px, 50px'lik çubukta 11px boşluk bırakıyor. */
.app-logo__word {
    height: 28px;
    width: auto;
    font-family: inherit;
    /* Arapça'da logo yazısı GÖRÜNMÜYORDU. SVG <text>, <html dir="rtl">'den
       `direction: rtl` miras alıyor; `text-anchor: start` RTL'de "x'in SAĞI"
       anlamına geldiği için harfler x=0'dan sola doğru çiziliyor ve
       viewBox'ın (`0 0 78 14`) dışında kalıyordu.
       Ölçüldü — metin bbox: LTR'de x=0…78.3 (içeride), RTL'de x=-78…0.3 (dışarıda).
       Kutu her iki durumda da 156px genişlik raporluyor, o yüzden yalnızca
       genişliğe bakan bir kontrol bunu yakalamaz.
       DATAPA Latin bir marka adı; sayfa yönü ne olursa olsun LTR yazılır. */
    direction: ltr;
}

.app-logo--lg {
    justify-content: center;
    color: var(--app-brand);
}

.app-logo--lg .app-logo__mark { width: 58px; height: 58px; }
.app-logo--lg .app-logo__word { height: 32px; }

/* Sidebar mini moda geçtiğinde logo alanı da 50px'e insin; .app-header__logo
   masaüstünde 259px sabit genişlikte kalıyor ve mini sidebar'la hizası kaçıyordu.

   Eşik 768 değil 992 — ve kelimeyi gizleyen kural da AYNI sorguya alındı.
   Eskiden kelime kuralı media sorgusu dışındaydı, genişlik kuralı da 768'den
   başlıyordu. Oysa `sidenav-toggled` sınıfının anlamı 992'nin altında TERSİNE
   dönüyor: orada "mini" değil "kenar çubuğunu aç" demek. Sonuç olarak 768–991.98
   bandında mobil menüyü açan kullanıcıda logo 50px'e düşüyor ve DATAPA yazısı
   kayboluyordu — menüyü kapatana kadar geri gelmiyordu. */
@media (min-width: 992px) {
    .sidebar-mini.sidenav-toggled .app-header__logo {
        width: 50px;
        padding: 0;
    }

    .sidebar-mini.sidenav-toggled .app-header__logo .app-logo__word {
        display: none;
    }
}

/* Dar ekranda üst çubukta yalnızca işaret görünür */
@media (max-width: 767.98px) {
    .app-header__logo {
        width: 50px;
        padding: 0;
    }

    /* media.css 767px'te gizliyor; 767-767.98 arası kesirli genişliklerde
       açıkta kalmasın diye burada da kapatıyoruz. */
    .app-header-title {
        display: none;
    }

    /* Dar ekranda işaret bir tık küçülsün */
    .app-logo__mark {
        width: 34px;
        height: 34px;
    }

    .app-header__logo .app-logo__word {
        display: none;
    }
}

/* ============================================================ tema tutarlılığı
   Aşağıdaki blok, iki temada da aynı kuralın geçerli olduğu son düzeltmeler.
   Hepsi token'dan besleniyor; hiçbirinde tema dallanması yok. */

/* --- onay kutusu / radyo ------------------------------------------------ */

/* İşaretsiz hâli koyu temada marka mavisiyle çerçeveleniyordu; işaretli olanla
   karışıyordu. İşaretsiz = yüzey + nötr kenarlık, işaretli = marka. */
.form-check-input,
.form-selectgroup-input + .form-selectgroup-label .form-selectgroup-check {
    background-color: var(--app-surface-2);
    border-color: var(--app-border-strong);
}

.form-check-input:checked {
    background-color: var(--app-brand);
    border-color: var(--app-brand);
}

.form-check-input:indeterminate {
    background-color: var(--app-brand);
    border-color: var(--app-brand);
}

.form-check-input:focus {
    border-color: var(--app-brand);
    box-shadow: 0 0 0 .2rem rgba(var(--app-brand-rgb), .2);
}

/* --- rozetler ----------------------------------------------------------- */

/* .bg-blue-lt Tabler'ın sabit mavisi; sayfada marka indigosunun yanında ikinci
   bir mavi olarak duruyordu. Marka tonuna bağlıyoruz — iki temada da tutarlı. */
.bg-blue-lt {
    background-color: rgba(var(--app-brand-rgb), .14) !important;
    color: var(--app-brand) !important;
}

/* --- ikincil (secondary) okunabilirliği --------------------------------- */

/* Tabler'ın secondary'si #6b7280 gri. Koyu zeminde hem buton kenarlığı hem metin
   kayboluyordu ("okunmuyor bile"). İkincil ton artık yüzey/metin token'larından. */
.btn-secondary,
.btn-outline-secondary {
    --tblr-btn-color: var(--app-text);
    --tblr-btn-border-color: var(--app-border-strong);
    --tblr-btn-hover-color: var(--app-text);
    --tblr-btn-hover-bg: var(--app-surface-3);
    --tblr-btn-hover-border-color: var(--app-border-strong);
    --tblr-btn-active-color: var(--app-text);
    --tblr-btn-active-bg: var(--app-surface-3);
    --tblr-btn-active-border-color: var(--app-border-strong);
    --tblr-btn-disabled-color: var(--app-text-muted);
    /* --app-border koyu kartın üstünde ~1.6:1 — kenarlık pratikte yok. */
    --tblr-btn-disabled-border-color: var(--app-border-strong);
}

.btn-secondary {
    --tblr-btn-bg: var(--app-surface-2);
    --tblr-btn-disabled-bg: var(--app-surface-2);
}

/* Devre dışı hâlde zemin SAYDAM kalmamalı: saydam zemin + sönük kenarlık +
   opaklık üst üste binince buton tamamen kayboluyordu (WAHA hesap tablosundaki
   "Oturum Aktif" QR düğmesi). Devre dışı bir denetim seçilemez olduğunu
   göstermeli, görünmez olmamalı. */
.btn-outline-secondary {
    --tblr-btn-bg: transparent;
    --tblr-btn-disabled-bg: var(--app-surface-2);
}

/* .65 opaklık, zaten soluk olan devre dışı rengini bir kez daha zemine
   karıştırıyordu (~3.6:1). .75'te ikon ~4.6:1'e çıkıyor. */
.btn:disabled,
.btn.disabled {
    opacity: .75;
}

/* Rozet: yalnız dolgu yetmiyor, iki temada da kart zeminine yakın kalıyor —
   kenarlık ona kesin bir sınır veriyor. */
.badge.bg-secondary,
.badge.text-bg-secondary {
    background-color: var(--app-surface-3) !important;
    color: var(--app-text) !important;
    border: 1px solid var(--app-border-strong);
}

.text-secondary,
.text-muted {
    color: var(--app-text-muted) !important;
}

/* --- tablo: satır içeriği sarmasın -------------------------------------- */

/* OTOMATİK nowrap yalnızca dar ekranlarda. Önce ≤767px'ti (dar ama mobil
   sayılmayan genişliklerde hücreler alt alta kayıyordu), sonra her genişliğe
   açıldı — ama geniş ekranda yer varken uzun metni tek satıra zorlamak gereksiz
   yatay kaydırma üretiyor. Eşik tek yerde: aşağıdaki 1200px.
   Her genişlikte tek satır isteyen tablolar `<table class="… nowrap">` ile
   kendi kararını verir (DataTables'ın kendi sınıfı). Taşan tablo
   `.table-responsive` / `.autoflow` sayesinde yatay kayar. */
@media (max-width: 1199.98px) {
    .table > :not(caption) > * > *,
    table.dataTable > tbody > tr > td,
    table.dataTable > thead > tr > th {
        white-space: nowrap;
    }
}

/* Uzun serbest metin sütunları istisna (log açıklaması, not gibi) */
.table .wrap,
.table td.wrap {
    white-space: normal;
}

/* --- tablo: boş durum ---------------------------------------------------- */

/* "Kayıt yok" hücresi kenarlığa yapışık duruyordu. */
/* Seçici bilerek uzun: yukarıdaki `.tile .table > tbody > tr > td` satır dolgusu
   (0,2,3) daha özgül; bunu geçmek için (0,2,4) gerekiyor. */
/* `.table-empty`: DataTables'ın kendi boş hücresiyle AYNI görünüm, elle yazılan
   tablolar için. Sayfalarda `colspan` + `text-center text-muted py-4` üçlüsü
   tek tek tekrarlanıyordu ve her yerde tutmuyordu. */
table.dataTable > tbody > tr > td.dt-empty,
table.dataTable > tbody > tr > td.dataTables_empty,
.table > tbody > tr > td.table-empty {
    padding: 2.5rem 1rem !important;
    text-align: center;
    vertical-align: middle;
    color: var(--app-text-muted);
}

/* --- DataTables üst şeridi ---------------------------------------------- */

/* "Sayfada [25] kayıt göster" açılır listesi tablonun kaydırma kutusuna
   düşüp orada gereksiz bir scrollbar açıyordu: üst şerit kırpılmamalı. */
.dt-container > .dt-layout-row:first-child,
.dt-container .dt-layout-row:has(.dt-length) {
    overflow: visible;
}

.dt-length .ts-dropdown {
    min-width: 100%;
    width: max-content;
}

/* --- sayfalama: pasif sekme görünümü ------------------------------------ */

/* Sayfalama bağlantıları düz yazı gibi duruyordu. `.nav-pills` pasif sekmeleriyle
   aynı dili konuşsunlar: yüzey + kenarlık + yumuşak köşe, aktif olan marka rengi. */
.pagination {
    gap: .35rem;
}

.pagination .page-item .page-link {
    background-color: var(--app-surface-2);
    border: 1px solid var(--app-border);
    border-radius: 6px;
    color: var(--app-text-muted);
    padding: .35rem .7rem;
    transition: background-color .15s ease, color .15s ease;
}

.pagination .page-item .page-link:hover {
    background-color: var(--app-surface-3);
    border-color: var(--app-border-strong);
    color: var(--app-text);
}

.pagination .page-item.active .page-link {
    background-color: var(--app-brand);
    border-color: var(--app-brand);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    background-color: transparent;
    border-color: var(--app-border);
    color: var(--app-text-muted);
    opacity: .5;
}

/* --- imleç -------------------------------------------------------------- */

/* Onay kutusu ve etiketi tıklanabilir; imleç de öyle görünsün. */
.form-check-input:not(:disabled),
.form-check-label,
.form-selectgroup-item,
.form-selectgroup-label,
.checkbox label,
.checkbox input[type="checkbox"]:not(:disabled),
.checkbox input[type="radio"]:not(:disabled),
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled) {
    cursor: pointer;
}

.form-check-input:disabled,
.form-check-input:disabled ~ .form-check-label {
    cursor: not-allowed;
}

/* ============================================ mobil / tablet düzeni
   Bu ekranlar masaüstü için yazılmış Bootstrap kolonlarıyla geliyor; dar
   ekranda kontroller birbirine giriyor, tarih alanı kırpılıyor, DataTables
   üst şeridi ortalanıp okunmaz hâle geliyordu. Aşağısı markup'a dokunmadan
   aynı yapıyı dar ekranda kullanılabilir hâle getiriyor. */

/* --- filtre çubuğu (Statü / Yetkili / Ürün / Tarih) ---------------------- */

/* Tablette üçe bölünmüş filtreler 250px'e sıkışıyordu; ikişerli daha okunur.
   Satırı `#dd_form` ile tanıyoruz, böylece diğer .row'lara dokunmuyoruz. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .row:has(> #dd_form) > [class*="col-md-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 767.98px) {
    /* Ön ek butonları eşit genişlikte olsun ki alanlar hizalansın */
    .row:has(> #dd_form) .input-group > div:first-child > .btn {
        min-width: 6rem;
        justify-content: center;
    }

    /* Tarih satırı tek satıra sığmıyor: [takvim][tarih] / [tip][filtrele] */
    .row:has(> #dd_form) .input-group {
        flex-wrap: wrap;
        row-gap: .4rem;
    }

    .row:has(> #dd_form) .input-group > .form-control,
    .row:has(> #dd_form) .input-group > .ts-wrapper {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none !important;
    }

    /* Sarınca köşeler açıkta kalmasın */
    .row:has(> #dd_form) .input-group > .ts-wrapper .ts-control,
    .row:has(> #dd_form) .input-group > .form-control {
        border-radius: var(--tblr-border-radius, .375rem) !important;
    }

}

/* Tarih grubu 4 kontrol taşıyor. Tablette de (filtreler ikişerli olduğu için)
   yarım genişliğe düşüyor ve tarih aralığı kırpılıyordu; iki satıra bölüyoruz:
   [takvim][tarih aralığı] / [tarih tipi][Filtrele] */
@media (max-width: 1199.98px) {
    .row:has(> #dd_form) .input-group:has(#daterangepicker) {
        flex-wrap: wrap;
        row-gap: .4rem;
    }

    .row:has(> #dd_form) .input-group:has(#daterangepicker) > #daterangepicker {
        flex: 1 1 calc(100% - 6.5rem);
        min-width: 0;
        border-radius: var(--tblr-border-radius, .375rem) !important;
    }

    .row:has(> #dd_form) .input-group:has(#daterangepicker) > .ts-wrapper {
        flex: 1 1 55%;
        min-width: 0;
        max-width: none !important;
    }

    .row:has(> #dd_form) .input-group:has(#daterangepicker) > .ts-wrapper .ts-control {
        border-radius: var(--tblr-border-radius, .375rem) !important;
    }

    .row:has(> #dd_form) .input-group:has(#daterangepicker) > div:last-child {
        flex: 1 1 40%;
    }

    .row:has(> #dd_form) .input-group:has(#daterangepicker) > div:last-child > .btn {
        width: 100%;
    }
}

/* --- DataTables üst / alt şeridi ---------------------------------------- */

/* "Ara:" etiketi ve kutusu KARDEŞ elemanlar (label, input) — flex'i kapsayıcıya
   vermek gerekiyor; label'a verilince input alt satıra düşüyordu. */
.dt-search {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.dt-search label {
    margin: 0;
    white-space: nowrap;
}

.dt-search input {
    min-width: 0;
}

@media (max-width: 991.98px) {
    /* İki farklı DataTables düzeni var: sayfa başına `col-sm-3/3/6` ya da
       dtjs.php'nin `col-md-auto` şeridi. İkisini de tam genişliğe alıyoruz. */
    .dt-container .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .dt-container .row > [class*="col-"] + [class*="col-"] {
        margin-top: .5rem;
    }

    /* Ortalanmış görünüm yerine sola hizalı, öngörülebilir bir sıra */
    /* dataTables.bootstrap5 767px altında bunları ortalıyor (div.dt-container
       div.dt-length ...); aynı ağırlıkta seçici gerekiyor. */
    div.dt-container div.dt-length,
    div.dt-container div.dt-search,
    div.dt-container div.dt-info {
        text-align: start;
    }

    .dt-paging .pagination {
        justify-content: flex-start;
        flex-wrap: wrap;
        row-gap: .35rem;
    }

    /* Dar ekranda arama kutusu satırın kalanını doldursun */
    .dt-search input {
        flex: 1 1 auto;
    }

    /* Boş tablo mesajı, tablo viewport'tan geniş olduğunda sağda kalıp
       görünmüyordu; sola alınca kaydırmadan okunuyor. */
    table.dataTable > tbody > tr > td.dt-empty {
        text-align: start;
        padding: 1.75rem 1rem !important;
    }
}

/* Telefon: "sayfada N kayıt" ile "Ara:" ayrı ayrı tam satır kaplıyordu
   (ölçüldü: 360px'te ikisi 100px, tablo ancak 522px'te başlıyor — 740px'lik
   ekranın %70'i veriye gelmeden tükeniyor). İkisini tek satıra alıyoruz:
   uzunluk seçici içeriği kadar, arama kutusu kalanı doldurur.

   Seçiciler `div.dt-container div.…` biçiminde, çünkü yukarıdaki ≤991.98
   bloğu ve dataTables.bootstrap5 aynı ağırlıkta yazıyor. */
@media (max-width: 767.98px) {
    /* Kontrol şeridinin YERLEŞİMİ (hangi kutu ne kadar yer kaplar) tek yerde:
       responsive.css'teki `.dt-container .row > *:has(> .dt-…)` bloğu. Orada
       `!important` gerekiyor çünkü aynı dosyadaki genel "telefonda her şey tek
       sütun" kuralı da öyle yazılmış. Burada yalnızca şeridin İÇ görünümü var —
       ikisini karıştırma, boyut değişikliği responsive.css'e yazılmalı. */
    .dt-container .row {
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem;
    }

    /* dtjs.php'nin şeridinde sarmalayıcılar Bootstrap'in `me-auto` / `ms-auto`
       utility'sini taşıyor. Masaüstünde ikisini satırın iki ucuna itmek için
       doğru, ama dar satırda otomatik marj tüm boşluğu yutup arama kutusunu
       ekranın DIŞINA çıkarıyordu (ölçüldü: sol kenar 346px / viewport 360px).
       Utility `!important` ile yazıldığı için burada da gerekiyor. */
    .dt-container .row > .me-auto {
        margin-inline-end: 0 !important;
    }

    .dt-container .row > .ms-auto {
        margin-inline-start: 0 !important;
    }

    /* ≤991.98 bloğundaki "ikinci sütun alta inerse üstten boşluk" kuralı artık
       yan yana durdukları için gereksiz. */
    .dt-container .row > [class*="col-"] + [class*="col-"] {
        margin-top: 0;
    }

    .dt-search {
        min-width: 0;
    }

    /* "Sayfada [50] kayıt göster" tek başına 203px yiyordu; 332px'lik satırda
       arama kutusuna kullanılabilir yer kalmıyordu (denendi: kutu 28px'e
       düştü). Telefonda etiket metnini gizleyip yalnızca seçiciyi bırakıyoruz —
       tablonun üstünde tek başına duran bir "50" açılırı zaten anlaşılır.

       `font-size: 0` bilinçli tercih: metin DOM'da kalır, ekran okuyucular
       "Sayfada 50 kayıt göster" demeye devam eder. `display:none` ya da metni
       markup'tan silmek bu bilgiyi tamamen yok ederdi. */
    .dt-length label {
        font-size: 0;
    }

    .dt-length label .ts-wrapper,
    .dt-length label select,
    .dt-length label .ts-control {
        font-size: .8125rem;
    }

    .dt-search label {
        font-size: .75rem;
    }

    /* Alt şerit (kayıt sayısı + sayfalama) aynı `.row` yapısını kullanıyor,
       yukarıdaki kurallar onu da kapsıyor; yalnızca yazı boyu küçülsün. */
    .dt-info {
        font-size: .75rem;
    }

    /* Dört düğme (İlk/Önceki/Sonraki/Son) kalan ~234px'e sığmayıp "Son" tek
       başına alt satıra düşüyordu. Dolgu ve yazı küçülünce dördü tek satırda. */
    .dt-paging .page-link {
        padding: .25rem .45rem;
        font-size: .75rem;
    }
}

/* Filtre çubuğundaki ön ek etiketleri ("Statü", "Yetkili", "Ürün", takvim
   ikonu) metin genişliğinde duruyordu: 141 / 148 / 137 / 111px — alanlar
   tırtıklı bir sol kenarla başlıyordu (allDatas'ta ölçüldü).

   Seçici `:has(> .ts-wrapper)` ile YALNIZCA "etiket + Tom Select" biçimindeki
   filtre gruplarını yakalıyor; `btn-main` kod tabanında normal buton olarak da
   kullanıldığı için ona göre seçmek çok geniş olurdu. */
@media (max-width: 991.98px) {
    .input-group:has(> .ts-wrapper) > .btn:first-child,
    .input-group:has(> .ts-wrapper) > .input-group-text:first-child {
        flex: 0 0 6.5rem;
        justify-content: center;
    }
}

/* --- sayfa başlığı ------------------------------------------------------- */

@media (max-width: 767.98px) {
    .app-title {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        /* `flex-start` idi: başlık sarmadığında buton başlığa yapışık kalıyordu.
           `space-between` sarma durumunda da doğru davranır (tek öğe kalan satır
           başa yaslanır), yukarıdaki `margin-inline-start: auto` ile birlikte
           buton her iki durumda da sağ kenarda. */
        justify-content: space-between;
        gap: .5rem .75rem;
    }

    .app-title .app-breadcrumb {
        margin: 0;
        padding: 0;
        flex-wrap: wrap;
        row-gap: .35rem;
    }
}

/* --- pill sekmeler ------------------------------------------------------- */

/* Başlık + 5 sekme dar ekranda tek satıra sığmıyor: başlık kendi satırına,
   sekmeler altına sarsın. */
@media (max-width: 767.98px) {
    .custom-pills {
        flex-wrap: wrap;
        row-gap: .35rem;
    }

    .custom-pills > li:first-child {
        width: 100%;
    }

    .custom-pills .nav-item.ms-auto {
        margin-inline-start: 0 !important;
    }

    .custom-pills .nav-link,
    .custom-pills > li > a {
        padding: 6px 10px;
        font-size: .8125rem;
    }
}

/* Telefon: sekmeler ayrı ayrı yüzen haplar yerine satırı eşit bölen bir
   "segment kontrolü". Ölçüm (360px): beş hap 66+79+62+85+59 = 351px, üstüne
   soft_pills.css'in hap başına 5px sol marjı = 371px; kullanılabilir alan
   308px olduğu için sonuncusu ("Bu Yıl") tek başına alt satıra düşüyor ve
   başlıkla birlikte blok 124px yer kaplıyordu.

   `flex: 1 1 auto` hapları satırı dolduracak şekilde büyütür/daraltır, yani
   fark 4px de olsa 40px de olsa sığar. `auto` (0 değil) bilinçli: uzun çeviriler
   ("Last Month", "الشهر الماضي") kırpılmak yerine kendi genişliğini korur,
   gerekirse blok iki satıra sarar — kırpma yok. */
@media (max-width: 575.98px) {
    .custom-pills {
        gap: .3rem;
    }

    /* `flex-basis: auto` — yani hap kendi metni kadar yer tutar, sonra kalan
       boşluğu paylaşarak büyür.

       Bir ara `basis: 0` denendi (hepsi eşit genişlikte). Türkçe'de düzgün
       duruyordu ama Arapça'da iki etiket ("هذا الأسبوع", "الشهر الماضي")
       51px'lik kutuya sığmayıp komşu hapın üstüne taşıyordu — çünkü `basis: 0`
       metnin ne kadar yer istediğini hiç hesaba katmıyor.

       `auto` ile ölçüm (360px, aşağıdaki küçültülmüş yazı/dolgu ile):
         Türkçe  50+60+46+65+45 = 266 / 308 → tek satır, taşma yok
         Arapça  31+61+53+73+49 = 267 / 308 → tek satır, taşma yok
       Sığmayan bir dil çıkarsa satır düzgünce sarar; taşma olmaz. */
    .custom-pills > li.nav-item {
        flex: 1 1 auto;
    }

    /* soft_pills.css'teki `margin-left: 5px` yerine `gap` — marj ilk hapta da
       uygulanıp bloğu sağa kaydırıyordu. */
    .custom-pills .nav-link,
    .custom-pills > li > a {
        margin-inline-start: 0;
        padding: 7px 2px;
        font-size: .6875rem;
        text-align: center;
        white-space: nowrap;
        background: var(--app-surface-2);
        border: 1px solid var(--app-border);
    }

    /* soft_pills.css seçili hapa `0 4px 6px rgba(brand,.4)` gölge veriyor.
       Masaüstünde hafif duruyor ama telefonda hapların boyu küçüldüğü için
       gölge yazıdan baskın çıkıyor ("parlayan buton" görüntüsü). Burada seçimi
       dolgu + marka kenarlığı taşısın. */
    .custom-pills .nav-link.active,
    .custom-pills > li.active > a {
        border-color: var(--app-brand);
        box-shadow: none;
    }
}

/* Tablette üst çubuk arama kutusu ile şirket başlığı üst üste biniyordu;
   media.css yalnızca 767px altında gizliyor. */
@media (max-width: 991.98px) {
    .app-header-title {
        display: none;
    }
}

/* --------------------------------------------------- renk seçici alanı */

/* `.jscolor` alanları (grup rengi, statü rengi). Bu renkler rozet ZEMİNİ olarak
   kullanılıp üstlerine beyaz yazı basıldığı için alan üç şey gösterir: seçilen
   renk, beyaz yazının o zemindeki hâli (önizleme çipi) ve kontrast yetersizse
   uyarı. Hazır tonlar hem seçimi hızlandırır hem okunmaz renk seçilmesini
   engeller. Ek kütüphane yok — renk kutusu tarayıcının kendi seçicisi. */
.app-color-field .input-group {
    flex-wrap: nowrap;
}

.app-color-swatch.form-control-color {
    width: 3rem;
    flex: 0 0 3rem;
    padding: .25rem;
    cursor: pointer;
}

.app-color-hash {
    padding-inline: .5rem;
    color: var(--app-text-muted);
}

.app-color-field .app-color-hex {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
    min-width: 6rem;
}

/* Önizleme: seçilen zemin üstünde beyaz yazı — alanın asıl kullanım biçimi */
.app-color-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.75rem;
    border: 1px solid var(--app-border);
    border-inline-start: 0;
    border-radius: 0 var(--tblr-border-radius, .375rem) var(--tblr-border-radius, .375rem) 0;
    color: #fff;
    font-weight: 600;
    font-size: .8rem;
}

.app-color-presets {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .45rem;
}

.app-color-preset {
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 1px solid var(--app-border-strong);
    border-radius: .3rem;
    cursor: pointer;
    transition: transform .1s ease-in-out;
}

.app-color-preset:hover {
    transform: scale(1.15);
}

.app-color-preset.is-active {
    box-shadow: 0 0 0 2px var(--app-surface), 0 0 0 4px var(--app-brand);
}

.app-color-warn {
    display: none;
    align-items: center;
    gap: .4rem;
    margin-top: .4rem;
    font-size: .8rem;
    color: var(--app-warning);
}

/* Görünürlük SINIFLA: `[style*="display"]` seçicisi jQuery'nin .hide() ile
   yazdığı `display:none`'ı da yakalayıp !important ile flex'e çeviriyordu —
   uyarı, kontrastı yeterli alanlarda da görünüyordu. */
.app-color-warn.is-shown {
    display: flex;
}

.app-color-fix {
    --tblr-btn-padding-y: .1rem;
    --tblr-btn-padding-x: .45rem;
    --tblr-btn-font-size: .75rem;
    margin-inline-start: auto;
    white-space: nowrap;
}

/* --------------------------------------------------- alt telif satırı */

/* Bu şerit iki farklı zeminde görünüyor: uygulama içinde tema yüzeyi,
   giriş sayfasında koyu bir fotoğraf. Rengi yoktu, gövdenin metin rengini
   miras alıyordu — giriş sayfasında koyu üstüne koyu düşüp okunmuyordu.
   Giriş sayfasının <body>'sinde `.app` sınıfı yok (header.php $Notop dalı),
   ayrımı buradan yapıyoruz. */
.app-copyright {
    font-size: .8125rem;
    color: var(--app-text-muted);
}

.app-copyright a {
    color: var(--app-link);
}

body:not(.app) .app-copyright {
    color: rgba(255, 255, 255, .72);
}

body:not(.app) .app-copyright a {
    color: #fff;
    text-decoration: underline;
}

/* --------------------------------------------- semantik YAZI renkleri */

/* Bootstrap/Tabler `.text-success` vb. için zemin rengini aynen yazı rengi
   yapıyor. O renkler ZEMİN olarak (üstünde beyaz yazıyla) tasarlandı; yazı
   olarak beyaz kartta AA'nın altında kalıyorlar. Ölçülen: yeşil 2.74,
   turuncu 3.04, mavi 3.05, koyu temada kırmızı 3.84 (asgari 4.5).
   Rozetlerin/düğmelerin ZEMİN renkleri değişmiyor — yalnızca yazı. */
.text-success { color: var(--app-success-text) !important; }
.text-warning { color: var(--app-warning-text) !important; }
.text-info    { color: var(--app-info-text)    !important; }
.text-danger  { color: var(--app-danger-text)  !important; }

/* Renkli zeminin ÜSTÜNDEki yazı bu kuraldan etkilenmemeli */
.badge .text-success, .badge .text-warning, .badge .text-info, .badge .text-danger,
.btn .text-success,   .btn .text-warning,   .btn .text-info,   .btn .text-danger,
[class*="bg-"]:not([class*="bg-body"]):not([class*="-lt"]) > .text-success,
[class*="bg-"]:not([class*="bg-body"]):not([class*="-lt"]) > .text-warning,
[class*="bg-"]:not([class*="bg-body"]):not([class*="-lt"]) > .text-info,
[class*="bg-"]:not([class*="bg-body"]):not([class*="-lt"]) > .text-danger {
    color: inherit !important;
}

/* Tabler koyu temada `.input-group-text` yazısını #6b7280'e çekiyor; kendi
   koyu input zemininde (#1c2230) 3.29:1 kalıyor. Bu ön ekler dekoratif değil,
   içerik taşıyor (çalışma saatleri ekranında gün adları). Yüzey paletinin
   sönük yazı tonuna bağlanıyor. */
.input-group-text {
    color: var(--app-text-muted);
}

/* ------------------------------------------------ alt bilgi dil seçici */

/* Bağlantılar footer.php'de `&nbsp;&nbsp;` ile ayrılmış satır içi öğelerdi;
   dört dil 360px'e sığmayınca satır içi akış bayrak ile adı ayrı satırlara
   bölüyor ve öğeler üst üste biniyordu. Esnek satır düzgün sarar. */
.lang-switch {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .4rem 1rem;
}

.lang-switch a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    /* Bayrak ile dil adı asla ayrı satıra düşmesin. */
    white-space: nowrap;
}

/* Etiket bir alana bağlıysa (`for`) tıklanabilir: imleç bunu göstermeli.
   Tarayıcı varsayılanı `default`, yani etiket tıklanabilir olduğu hâlde
   düz metin gibi duruyordu. Yalnızca `for` taşıyanlar — sırf başlık amaçlı
   `<label>`ler tıklanınca bir şey yapmaz, onlara imleç vermek yanıltıcı olur. */
label[for] {
    cursor: pointer;
}

/* Bayrak + dil adı taşıyan butonlar ve menü satırları.
   `.flag` bir SPRITE (flags.png, 32×24 karo) — küçültmek karo konumlarının
   tamamını bozar, o yüzden boyut sabit. Sorun boyut değil yerleşimdi: satır içi
   akışta 32×24'lük görsel `btn-sm`in 4px dolgusunu tamamen dolduruyor, üç
   kenara yapışıyor ve metinle arasındaki tek boşluk karakteri eziliyordu
   (ölçüldü: buton 103×34, bayrak 32×24, aradaki boşluk yok).

   Boşluk `gap` ile değil `margin` ile veriliyor: `gap` ebeveyni seçmeyi, o da
   `:has()`i gerektiriyor ve desteklenmediği yerde asıl sorun geri gelirdi.
   Kenar boşluğu her tarayıcıda çalışır. */
.btn > .flag,
.dropdown-item > .flag,
.input-group-text > .flag {
    margin-inline-end: .4rem;
    /* Kenarlıksız bayrak zemine "yapıştırılmış" duruyor; ince çerçeve onu
       düğmenin parçası gibi gösteriyor. */
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}

/* Bayrağın dolgu boşluğunu doldurup butonun kenarlarına yapışmaması için.
   `:has()` desteklenmezse yalnızca bu ince ayar kaybolur, hizalama bozulmaz. */
.btn:has(> .flag) {
    padding-inline: .6rem;
    white-space: nowrap;
}

/* Sunucudan gelen uzun mesaj (MjAlert) satır kırmadan uzayınca kutunun içinde
   yatay kaydırma çubuğu beliriyordu. */
.swal2-popup.swal2-toast.app-toast .swal2-html-container {
    overflow-wrap: anywhere;
    max-height: 40vh;
}

/* SweetAlert2'nin toast ölçüleri MODAL ölçüleriyle aynı geliyor: 16px kutu
   dolgusu + 8px/16px içerik kenar boşluğu + 16px yazı. Ölçüldü: tek sözcüklük
   bir hata mesajı 330×83px kaplıyordu — bildirim değil, pano gibi duruyor.
   Toast köşede beliren geçici bir şerit; ölçüler ona göre. */
.swal2-popup.swal2-toast.app-toast {
    padding: .5rem .7rem;
    font-size: .875rem;
    /* SweetAlert2 kutuya satır içi `width: 100%` yazıyor; tek sözcüklük mesaj
       bile kabın tamamını kaplıyordu. Satır içi stili yenmek için `!important`
       şart. Uzun mesajlar max-width'e kadar büyür. */
    width: auto !important;
    max-width: 24rem;
}

/* Metin ikonla aynı hizada DEĞİLDİ. SweetAlert2 toast'ı bir grid: ikona
   `grid-row: 1 / 99` + `align-self: center` veriyor, yani ikon 99 satırlık
   yığının tamamına göre ortalanıyor. Mesaj kutusu ise `grid-row: auto` ile
   yalnızca 1. satırda (18.9px) kalıyor; altındaki ~98 satır boş dolgu.
   Sonuç: 35px'lik ikon aşağı taşarken yazı tepede duruyordu. Mesajı da aynı
   satır aralığına alıp ortalıyoruz. */
.swal2-popup.swal2-toast.app-toast .swal2-html-container {
    grid-row: 1 / 99;
    align-self: center;
    margin: 0 .5rem;
    font-size: .875rem;
    line-height: 1.35;
}

/* İkon kutusunun ÖLÇÜSÜ değiştirilmemeli. SweetAlert2'nin toast ikonu 2em'lik
   bir kutu ama içindeki çizimin parçaları (tik ucu, uzun kol, halka, çarpı
   kolları) px ile konumlanmış ve o 2em'e göre kalibre edilmiş; kutu 24px'e
   çekilince çizim kutunun dışına taşıp bozuluyordu (tik kırık görünüyordu).
   Küçültme gerekirse width/height değil transform: scale() kullanılmalı —
   çizimin tamamı birlikte ölçeklenir. Şu an stok ölçü yeterince kompakt:
   32px ikon + 8px dolgu = 48px toast. */
.swal2-popup.swal2-toast.app-toast .swal2-icon {
    margin: 0 .5rem 0 0;
}

/* SweetAlert2 şablonundaki kullanılmayan alanlar (select/input/textarea/
   validation) her toast'ta DOM'da duruyor. Kendisi display:none veriyor ama
   bir eklenti onları sararsa (bkz. app-ui.js TS_SKIP) sarmalayıcı görünür
   kalıyor ve toast'a boş beyaz bir şerit ekliyordu. İkinci savunma hattı.
   Toast'ta hiçbir zaman form alanı olmadığı için koşulsuz gizlenebilir;
   normal modal'larda (input: 'select') alan gerçekten kullanılıyor, oraya
   dokunulmuyor. */
.swal2-popup.swal2-toast .ts-wrapper {
    display: none !important;
}

/* Giriş ekranındaki demo hesap kutusu: giriş kutusuyla (.login-box min-width 350px) aynı genişlik. */
.login-content .demo-logins {
    width: 350px;
    max-width: 100%;
}

/* --- koyu temada "dark" butonu/rozeti --------------------------------------
   secondary kullanımı kaldırılınca btn-dark / btn-outline-dark / bg-dark yerine geçti.
   Tabler'ın --tblr-dark'ı (#1f2937) koyu yüzeyle aynı tonda: kenarlık, yazı ve rozet
   zemini görünmez oluyordu (anasayfa tarih düğmesi 1,35:1). Koyu temada yukarıdaki
   secondary ile aynı yüzey/metin token'larına bağlanır; açık tema Tabler'ın dark'ını korur. */
[data-bs-theme="dark"] .btn-dark,
[data-bs-theme="dark"] .btn-outline-dark {
    --tblr-btn-color: var(--app-text);
    --tblr-btn-border-color: var(--app-border-strong);
    --tblr-btn-hover-color: var(--app-text);
    --tblr-btn-hover-bg: var(--app-surface-3);
    --tblr-btn-hover-border-color: var(--app-border-strong);
    --tblr-btn-active-color: var(--app-text);
    --tblr-btn-active-bg: var(--app-surface-3);
    --tblr-btn-active-border-color: var(--app-border-strong);
    --tblr-btn-disabled-color: var(--app-text-muted);
    --tblr-btn-disabled-border-color: var(--app-border-strong);
}

[data-bs-theme="dark"] .btn-dark {
    --tblr-btn-bg: var(--app-surface-2);
    --tblr-btn-disabled-bg: var(--app-surface-2);
}

[data-bs-theme="dark"] .btn-outline-dark {
    --tblr-btn-bg: transparent;
    --tblr-btn-disabled-bg: var(--app-surface-2);
}

[data-bs-theme="dark"] .badge.bg-dark,
[data-bs-theme="dark"] .badge.text-bg-dark {
    background-color: var(--app-surface-3) !important;
    color: var(--app-text) !important;
    border: 1px solid var(--app-border-strong);
}

/* --- AA kontrast: dolu yeşil buton ve koyu temada kırmızı yazı ------------------
   Beyaz yazı Tabler'ın #2fb344 yeşili üstünde 2,74:1 (toplu işlem "Uygula" düğmesi);
   zemin koyulaştırılınca ~5:1. Koyu zeminde text-danger #dc5555 4,15:1 idi, ortak
   "on" tonuna bağlanır (bkz. theme-dark.css --tblr-red-on). */
.btn-success {
    --tblr-btn-bg: color-mix(in srgb, var(--tblr-success) 62%, black);
    --tblr-btn-border-color: color-mix(in srgb, var(--tblr-success) 62%, black);
    --tblr-btn-hover-bg: color-mix(in srgb, var(--tblr-success) 52%, black);
    --tblr-btn-hover-border-color: color-mix(in srgb, var(--tblr-success) 52%, black);
    --tblr-btn-active-bg: color-mix(in srgb, var(--tblr-success) 52%, black);
    --tblr-btn-active-border-color: color-mix(in srgb, var(--tblr-success) 52%, black);
    --tblr-btn-disabled-bg: color-mix(in srgb, var(--tblr-success) 62%, black);
    --tblr-btn-disabled-border-color: color-mix(in srgb, var(--tblr-success) 62%, black);
}

[data-bs-theme="dark"] .text-danger {
    color: var(--tblr-red-on) !important;
}

/* Arama kutusu simgesi: Tabler'ın addon'u mutlak konumlu ama flex değildi; simge sol üste yapışıyordu. */
.input-icon { position: relative; }
.input-icon .input-icon-addon {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    color: var(--app-text-muted);
    pointer-events: none;
}
.input-icon .form-control { padding-inline-start: 2.25rem; }