/*
 * Sayfa zemini: Metronic varsayılanı #FCFCFC, kartlar #FFFFFF → fark ~%1,
 * kart/sekme içerikleri zeminden ayrışmıyor ("beyaz üstüne beyaz").
 * Zemin bir ton koyulaştırıldı; kartlar beyaz kalır. Yalnızca açık tema.
 */
:root,
[data-bs-theme=light] {
    --bs-app-bg-color: #EEF1F5;
}

.required:after {
    content: "" !important;
    position: relative;
    font-size: inherit;
    color: var(--bs-danger);
    padding-left: .25rem;
    font-weight: 600;
}

span.required {
    position: relative;
    font-size: inherit;
    color: var(--bs-danger);
    padding-left: .25rem;
    font-weight: 600;
}

.form-label {
    margin-bottom: .5rem;
    font-size: 1.05rem;
    font-weight: 1000;
    color: var(--bs-gray-800);
}


.select2-container {
    width: 100% !important;
    /* Konteyner asla kabından geniş olmasın. `width:100%` tek başına yetmez:
       Select2 3.x'in iç elemanları (uzun seçenek metni, arama kutusu) kutuyu
       dışarı itebiliyor ve dar ekranda hücreyi/kartı taşırıyor. */
    max-width: 100%;
    box-sizing: border-box;
}

.select2-container .select2-choice {
    /*height: 33px !important;*/
    line-height: 33px !important;
}

/*
 * Select2 3.x — UZUN SEÇENEK METNİ KUTUYU TAŞIRMASIN.
 *
 * Seçili değer `.select2-chosen` içinde duruyor ve varsayılan olarak sarmıyor;
 * uzun bir muayene formu / rapor kodu seçilince kutu genişliyor, dar ekranda
 * tablo hücresini ve kartı dışarı itiyordu. Çözüm: metni tek satırda tutup
 * sığmayanı `…` ile kırpmak — kutu SABİT genişlikte kalır.
 *
 * Tam metin `title` attribute'unda durduğu için üstüne gelince/dokununca
 * görülebiliyor; dropdown açıldığında seçenekler zaten tam görünüyor.
 *
 * NOT: View'lardan `min-width` VERMEYİN (ör. `'style' => 'min-width:300px'`).
 * `width:100%`'ü ezer ve bu kuralları etkisiz bırakır — dar ekranda taşma
 * doğrudan geri gelir.
 */
.select2-container .select2-choice {
    /* Ok ve temizle butonuna yer bırakırken metin alanı taşmasın */
    max-width: 100%;
    box-sizing: border-box;
}

.select2-container .select2-choice > .select2-chosen {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Sağdaki ok/temizle ikonlarının altına girmesin */
    margin-right: 28px;
}

/* Çoklu seçim (multiple) — etiketler alt alta sarsın, yana taşmasın */
.select2-container-multi .select2-choices {
    max-width: 100%;
    box-sizing: border-box;
}

.select2-container-multi .select2-choices li {
    max-width: 100%;
}

.select2-container-multi .select2-choices .select2-search-choice {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Dropdown da konteyner genişliğinde kalsın; uzun seçenekler sarsın
   (dropdown'da kırpma DEĞİL sarma istiyoruz — kullanıcı tam metni görmeli) */
.select2-drop {
    max-width: 100vw;
    box-sizing: border-box;
}

.select2-drop .select2-results li {
    overflow-wrap: break-word;
    word-break: break-word;
}

/*
 * TABLO HÜCRESİ İÇİNDEKİ select2 — SABİT GENİŞLİK.
 *
 * `width:100%` + `max-width:100%` bir tablo hücresinde YETMEZ. `table-layout`
 * varsayılan olarak `auto`: tarayıcı önce içeriğin doğal genişliğini ölçüyor,
 * `.select2-chosen` de `white-space:nowrap` olduğu için uzun seçenek metni
 * hücreyi (ve tabloyu) devasa yapıyor. Yüzde değerleri o şişmiş hücreye göre
 * hesaplandığından hiçbir şeyi sınırlamıyor.
 *
 * Ölçüm (390px ekran, 95 karakterlik muayene formu adı): kural yokken tablo
 * 1096px, hücre 996px, select2 986px → kart ve sayfa taşıyor. Kuralla tablo
 * 376px, select2 240px, metin `…` ile kırpılıyor, tablo `.table-responsive`
 * içinde kaydırılabiliyor.
 *
 * Sabit `width` (yüzde değil) şart: hücrenin doğal genişlik hesabına katılan
 * kesin bir değer verir, böylece hücre şişmez.
 */
td > .select2-container,
td > div > .select2-container {
    width: 220px !important;
    max-width: 100%;
}

@media (min-width: 992px) {
    [data-kt-app-sidebar-fixed=true] .app-sidebar {
        position: fixed;
        z-index: 150;
        top: 0;
        bottom: 0;
        left: 0;
    }
}

.menu-sub-lg-down-accordion,
.menu-sub-lg-dropdown {
    max-height: 80vh;
    overflow-y: scroll;
}

/* jQuery UI'yi Bootstrap 5 stillerine uyarla */
.ui-datepicker {
    font-family: var(--bs-font-sans-serif);
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    padding: 1rem;
    min-width: 300px;
    z-index: 9999999 !important;
}

.ui-datepicker-header {
    background: #0d6efd;
    color: white;
    border-radius: 0.375rem 0.375rem 0 0;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    cursor: pointer;
    background: transparent;
    border: none;
    color: white;
}

.ui-datepicker-title {
    text-align: center;
    font-weight: 600;
}

.ui-datepicker-title select {
    display: inline-block;
    width: auto;
    padding: 0.15rem 0.35rem;
    font-size: 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0.25rem;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
}

.ui-datepicker-title select option {
    background-color: #fff;
    color: #212529;
}

.ui-datepicker table {
    width: 100%;
    margin: 0;
}

.ui-datepicker th {
    font-weight: 600;
    color: #6c757d;
    font-size: 0.875rem;
    padding: 0.5rem 0.25rem;
}

.ui-datepicker td {
    padding: 0.25rem;
}

.ui-datepicker td a,
.ui-datepicker td span {
    display: block;
    padding: 0.5rem;
    text-align: center;
    text-decoration: none;
    border-radius: 0.25rem;
    color: #212529;
}

.ui-datepicker td a:hover {
    background: #e9ecef;
    color: #0d6efd;
}

.ui-state-active,
.ui-datepicker td a.ui-state-active {
    background: #0d6efd !important;
    color: white !important;
}

.ui-datepicker-today a {
    background: #e7f1ff;
    font-weight: 600;
}

.ui-datepicker-other-month {
    opacity: 0.4;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #d3d3d3;
    background: none !important;
    font-weight: normal;
    color: #555;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #fcefa1;
    background: #fbf9ee url(../../../images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x !important;
    color: #363636;
}

.ui-datepicker .ui-datepicker-buttonpane {
    border-top: 1px solid #dee2e6;
    padding: 0.5rem 0 0 0;
    margin-top: 0.5rem;
    display: flex;
    justify-content: space-between;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    background: #fff !important;
    color: #212529;
    cursor: pointer;
    margin: 0 !important;
}

.ui-datepicker .ui-datepicker-buttonpane button:hover {
    background: #e9ecef !important;
}

.applicant_ex_info {
    width: 14px;
    height: 14px;
    display: inline-block;
}

.applicant_disabled {
    width: 18px;
    height: 18px;
    background: url("/images/icon/person_disabled.png") no-repeat 50% 50%;
    vertical-align: -3px;
}

.applicant_non_literate {
    width: 18px;
    height: 18px;
    background: url("/images/icon/person_non_literate.png") no-repeat 50% 50%;
    vertical-align: -3px;
}

.applicant-photo {
    float: left;
    width: 180px;
    height: 200px;
    padding: 1px;
    border-radius: 5px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    display: table;
    text-align: center;
}

.applicant-photo-small {
    width: 100px;
    height: 100px;
}

.applicant-photo-cover {
    display: table-cell;
    vertical-align: middle;
}

.applicant-photo-cover img {
    max-width: 150px;
    max-height: 200px;
}

.applicant-no-photo {
    background-image: url("/images/applicant-no-photo.png");
    background-size: 70%;
    background-color: #f2f2f2;
}

.applicant-no-photo-male {
    background-image: url("/images/applicant-no-photo-male.png");
    background-size: 70%;
    background-color: #f2f2f2;
}

.applicant-no-photo-female {
    background-image: url("/images/applicant-no-photo-female.png");
    background-size: 70%;
    background-color: #f2f2f2;
}

.applicant-view-title {
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.unverified_tc {
    color: #e65a5a;
}

.btn-icon-only i {
    display: inline !important;
    padding-right: 0 !important;
}

.block {
    display: block;
}

.center {
    text-align: center !important;
}

.exam-success-date-info {
    font-size: 9px;
    margin: 0;
}

.label {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 0.846em;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    background-color: var(--bs-secondary, #6c757d);
}

.label-default {
    background-color: var(--bs-secondary, #6c757d);
    color: #212529;
}

.label-primary {
    background-color: var(--bs-primary, #4575B5);
    color: #fff;
}

.label-success {
    background-color: var(--bs-success, #17C653);
    color: #fff;
}

.label-info {
    background-color: var(--bs-info, #49afcd);
    color: #fff;
}

.label-warning {
    background-color: var(--bs-warning, #F6C000);
    color: #212529;
}

.label-danger {
    background-color: var(--bs-danger, #F8285A);
    color: #fff;
}

.label-important {
    background-color: var(--bs-danger, #F8285A);
    color: #fff;
}

.label-inverse {
    background-color: var(--bs-dark, #1E2129);
    color: #fff;
}

/* Sınav programı aday durumu: rozet içindeki düzenle/bilgi ikonu yazının üstüne binmesin */
.label > div:has(> a.epApplicantDetail) {
    position: static !important;
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1;
}

fieldset {
    border: 1px solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
    padding: 15px;
    padding-top: 5px;
    margin-bottom: 15px;
}

fieldset > legend {
    float: none;
    width: auto;
    /*padding: 0 10px;*/
    margin-bottom: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Başlık + sağa yaslı aksiyon butonu içeren legend'ler tam genişlik ister;
   yukarıdaki width:auto tek başına butonu başlığa yapıştırırdı. */
fieldset > legend.legend-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    float: none;
}

a {
    color: var(--bs-link-color, #0d6efd);
    text-decoration: var(--bs-link-decoration, underline);
}

a:hover {
    color: var(--bs-link-hover-color, #0a58ca);
    text-decoration: var(--bs-link-hover-decoration, underline);
}

a:focus {
    outline: 0;
    color: var(--bs-link-hover-color, #0a58ca);
    text-decoration: var(--bs-link-hover-decoration, underline);
}

a:active {
    color: var(--bs-link-hover-color, #0a58ca);
}

.e-calendar-view {
    width: 100%;
}

.e-calendar-view thead {
    background-color: #c3d9ff;
}

/* Table Filter */
.table-with-filter {
    opacity: 0;
}

.table-filter {
    position: relative;
}

.table-filter .table-note {
    margin: 6px 0 0 0;
}

.table-filter .checkbox-toggle {
    text-align: left;
}

.table-filter .checkbox-columns {
    display: none;
    margin: 10px 0;
    padding: 5px 6px;
    border: 1px solid #ddd;
    background: #fff;
}

.table-filter .checkbox-column {
    display: inline-block;
    padding: 5px 10px 4px 10px;
    background: #eee;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 5px 0 0 0;
}

.table-filter .checkbox-column label {
    display: inline-block;
    margin: 0;
    font-size: 12px;
    cursor: pointer;
}

.custom-popover {
    --bs-popover-border-color: var(--bs-gray-100);
    --bs-popover-header-bg: var(--bs-gray-100);
}

/*
 * Grid'de seçili/işaretli satırlar — eski arayüzdeki renkler (css/main.css).
 * BS 5.3 hücreyi `box-shadow: inset … var(--bs-table-bg-state, --bs-table-bg-type…)`
 * ile boyar; tr'ye verilen arka plan çizgili satırlarda bu gölgenin altında
 * kalıyordu (seçim hiç görünmüyordu). Doğru yol: hücrede --bs-table-bg-state.
 *
 * - tr.selected (jquery.yiigridview satır tıklaması): turuncu
 * - işaretli checkbox'lı satır: turkuaz. Eski arayüzde js/init.js `checked`
 *   sınıfı ekliyordu (BS5'te yüklenmiyor); burada JS'siz, :has() ile — checkbox
 *   td'nin doğrudan çocuğu (CCheckBoxColumn), init.js ile aynı kapsam.
 *   Checkbox sütunu satırı da "selected" yapar; eski arayüzdeki gibi turkuaz kazanır.
 */
/*
 * Çizgili (odd) satır rengi — grid ve DetailView aynı ton. Metronic varsayılanı
 * rgba(gray-100, .75) ≈ #FBFBFB: beyaz satırdan ayırt edilmiyordu. Değişken
 * .table üzerinde tanımlı; burada aynı tabloda daha özgül seçiciyle ezilir.
 * Seçili/işaretli satırlar (aşağıda, --bs-table-bg-state) bunun önüne geçer.
 * Koyu tema etkilenmez.
 */
:root:not([data-bs-theme=dark]) .grid-view table.items,
:root:not([data-bs-theme=dark]) table.detail-view {
    --bs-table-striped-bg: #F1F3F6;
}

/*
 * btn-secondary: Metronic zemini #F1F1F4 — sayfa zemini (#EEF1F5) ve çizgili
 * satırla (#F1F3F6) aynı ton, buton kayboluyordu. Değişkenler YALNIZCA buton
 * üzerinde koyulaştırılır (global --bs-secondary rozet/metinleri de etkilerdi).
 * Metronic'te zemini İKİ kural belirliyor: `.btn.btn-secondary{background-color:
 * var(--bs-secondary)}` ve SONRA gelen `.btn.btn-secondary{background-color:
 * var(--bs-gray-200)}` (kazanan bu) → --bs-gray-200 de ezilmeli.
 * --bs-gray-300: hover/active kuralı bunu !important ile basıyor; yeni zemin de
 * gray-300 tonu olduğu için hover'da renk değişmezdi.
 */
:root:not([data-bs-theme=dark]) .btn.btn-secondary {
    --bs-secondary: #DBDFE9;
    --bs-secondary-active: #C4CADA;
    --bs-gray-200: #DBDFE9;
    --bs-gray-300: #C4CADA;
}

.grid-view table tbody tr.selected > * {
    --bs-table-bg-state: rgba(231, 167, 53, .66);
}

.grid-view table tbody tr:has(> td > input[type="checkbox"]:checked) > * {
    --bs-table-bg-state: rgba(105, 199, 199, .66);
}

@media (max-width: 767.98px) {
    .toolbar-mobile {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
        margin: 0 -0.25rem !important;
        flex-basis: calc(100% + .5rem) !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }

    .toolbar-mobile > .btn,
    .toolbar-mobile > a {
        flex: 1 1 calc(50% - 0.5rem) !important;
        width: auto !important;
        max-width: none !important;
        margin: 0.25rem !important;
        min-height: 38px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: normal !important;
        text-align: center !important;
        gap: 0.5rem !important;
    }

    .toolbar-mobile > .btn i,
    .toolbar-mobile > a i {
        flex-shrink: 0 !important;
        align-self: center !important;
        display: inline-flex !important;
        line-height: 1 !important;
    }

    .toolbar-mobile > .btn:nth-last-child(1):nth-child(odd):not(:nth-last-child(2)),
    .toolbar-mobile > a.btn:nth-last-child(1):nth-child(odd):not(:nth-last-child(2)) {
        flex: 0 0 calc(100% - 0.5rem) !important;
    }

    .toolbar-mobile > .badge ~ .btn:nth-last-child(1):nth-child(odd),
    .toolbar-mobile > .label ~ .btn:nth-last-child(1):nth-child(odd),
    .toolbar-mobile > span ~ .btn:nth-last-child(1):nth-child(odd),
    .toolbar-mobile > .badge ~ a.btn:nth-last-child(1):nth-child(odd),
    .toolbar-mobile > .label ~ a.btn:nth-last-child(1):nth-child(odd),
    .toolbar-mobile > span ~ a.btn:nth-last-child(1):nth-child(odd) {
        flex: 0 0 calc(100% - 0.5rem) !important;
    }

    .toolbar-mobile > .badge,
    .toolbar-mobile > .label,
    .toolbar-mobile > span {
        flex: 0 0 100% !important;
        width: auto !important;
        margin: 0.25rem !important;
    }
}

.app-header-secondary-menu-sub .menu > .menu-item {
    padding: 0px !important;
}

/* Sınav Programı Detay - Sınav Listeleri & Sınav İşlemleri */
.box-exam-period {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
}
#examDocumentList {
    width: 30%;
    flex-shrink: 0;
}
#examOperationsbutton {
    width: 70%;
    height: fit-content;
}
@media (max-width: 991.98px) {
    .box-exam-period {
        flex-direction: column;
    }
    #examDocumentList,
    #examOperationsbutton {
        width: 100%;
    }
}
.wb-break td {
    word-break: break-all;
}

.wb-break th {
    white-space: nowrap;
}

/*
 * Select2 dropdown, BS5 modal (z-index:1055) içinde açıldığında modalın
 * altında kalıyordu (ör. ygg/meeting doküman ekleme modalı). Dropdown body'ye
 * append edildiği için modalın önüne çıkması gerekir → z-index modal üstü.
 * Hem Select2 3.x (.select2-drop) hem 4.x (.select2-dropdown) karşılanır.
 */
.select2-drop,
.select2-drop-active,
.select2-container--open .select2-dropdown {
    z-index: 1060 !important;
}

/* ---------------------------------------------------------------
 * Global bildirim modalları HER ZAMAN en üstte olmalı.
 *
 * `display_message` / `display_confirm` / `display_error` (functions.global.bs5.js)
 * BS5 modalı kullanıyor: backdrop 1050, modal 1055. Ama uygulamada bunların
 * ÜSTÜNDE açılan, elle konumlanmış overlay'ler var — mobil iş emri ekranındaki
 * QR tarama katmanları (z-index:1080), manuel QR giriş kutusu (1080), kamera
 * (9999), fotoğraf detayı (10000) gibi.
 *
 * Sonuç: böyle bir overlay açıkken doğrulama hatası verilince mesaj 1055'te
 * açılıyor ve overlay'in ARKASINDA kalıyor — kullanıcı hiçbir uyarı görmeden
 * "buton çalışmıyor" sanıyor. (Yaşanan durum: QR modalında alanı boş bırakıp
 * Gönder'e basınca "QR kod formatı geçersiz" mesajı görünmüyordu.)
 *
 * Bu modallar bildirim katmanı olduğu için diğer her şeyin üstünde durmalılar.
 * 10000'lik fotoğraf/kamera katmanının da üstüne çıkacak bir değer veriliyor.
 * Yeni bir tam ekran overlay eklerken z-index'ini 1080 civarında tut — buradaki
 * bildirim katmanını AŞMA.
 */
#global-message,
#global-warning-message,
#global-error-message,
#global-confirm-alert,
#loading-message,
#printing-message,
#announcement-message {
    z-index: 10050;
}

/*
 * Backdrop'a DOKUNULMUYOR — bilerek.
 *
 * Bir denemede `.modal-backdrop { z-index:10040 }` yazılmıştı; bu kural
 * SEÇİCİ DEĞİL, sistemdeki HER BS5 modalını etkiledi. Normal bir modal
 * (ör. "Yeni Video URL Ekle", z-index:1055) açıldığında backdrop 10040 ile
 * modalın ÖNÜNE geçti: karartma kayboldu, `elementFromPoint` ekranın
 * ortasında `.modal-backdrop` döndürdü — yani modal tıklanamaz oldu, form
 * doldurulamıyordu. (2026-09-10, backend examPeriod/view'da yakalandı.)
 *
 * Yukarıdaki id'lere verilen z-index bildirim modalını QR/kamera
 * katmanlarının üstüne çıkarmaya ZATEN yetiyor. Karartmanın da yükselmesi
 * gerekirse bunu global `.modal-backdrop` kuralıyla değil, yalnızca ilgili
 * modal açıkken geçerli olacak bir sınıfla yapın (ör. body'ye bir işaret
 * sınıfı ekleyip `body.x .modal-backdrop` şeklinde) — aksi halde tüm
 * modallar bozulur.
 */

/*
 * GridView aksiyon butonları (BootButtonColumn: Görüntüle/Güncelle/Sil) dar
 * ekranda alt satıra sarınca birbirine yapışıyordu. Butonlara alt boşluk verip
 * hücreyi flex-wrap ile hizalıyoruz. Genel — tüm BS5 grid'ler için geçerli.
 */
.grid-view td .btn {
    margin-bottom: .35rem;
}
.grid-view td .btn:last-child {
    margin-bottom: 0;
}

/*
 * Metronic style.bundle içinde `.table:not(.table-bordered)` seçicisiyle gelen
 * agresif sıfırlama var:
 *   - td/th border-width:inherit  -> satır ayraçları kayboluyor
 *   - td:first-child padding-left:0 / td:last-child padding-right:0
 *     -> hücreler kapsayıcının kenarına yapışıyor
 * Bu, Metronic'in kendi dashboard tabloları için istenen bir davranış; ancak
 * BS3'ten taşınan "veri tablosu" görünümünü bozuyor (ör. crm/chance/admin
 * Fırsat Kaynağına/Durumuna Göre Dağılım kartları).
 *
 * .table-data: eski arayüzdeki satır ayraçlı + normal padding'li görünümü
 * geri getirir. table-bordered eklemek yerine ayrı sınıf kullanıyoruz; böylece
 * Metronic'in kendi tablolarına dokunmadan sadece ihtiyaç duyulan yerde açılır.
 */
.table.table-data > :not(caption) > * > * {
    padding: .5rem .75rem;
}
.table.table-data td,
.table.table-data th {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--bs-border-color);
}
.table.table-data td:first-child,
.table.table-data th:first-child {
    padding-left: .75rem;
}
.table.table-data td:last-child,
.table.table-data th:last-child {
    padding-right: .75rem;
}
.table.table-data tbody tr:last-child td,
.table.table-data tbody tr:last-child th {
    border-bottom-width: 0;
}

/*
 * Başlık satırı: eski arayüzdeki mavi thead görünümü. Takvimdeki
 * (.e-calendar-view thead) ile aynı renk kullanılır ki rapor tabloları ve
 * takvim tek bir görsel dille konuşsun. Metronic thead'e arka plan vermediği
 * için burada açıkça tanımlanması gerekiyor.
 */
.table.table-data > thead th {
    background-color: #F1F3F6;
}

/*
 * BS5 grid başlıkları: eski arayüzdeki (css/screen.css → `thead th`) mavi
 * başlık satırı. Yalnızca başlık satırı; filtre satırı (tr.filters, td'ler)
 * etkilenmez. Seçici BS5'in `.table > :not(caption) > * > *` arka planını ezer.
 */
.grid-view table.items > thead > tr:not(.filters) > th {
    background-color: #F1F3F6;
}

/*
 * Metronic .card-header'a `min-height:70px` ve `padding:0` dayatıyor. Kendi
 * dashboard kartlarında araç çubuğu barındırdığı için mantıklı; ancak sadece
 * başlık metni koyduğumuz küçük kartlarda başlığın altında koca bir boşluk
 * bırakıyor ve başlık gövdeden kopuk duruyor.
 *
 * .card-header-sm: BS3'teki kompakt panel-heading görünümü.
 */
.card .card-header.card-header-sm {
    min-height: 0;
    padding: .5rem .75rem;
    display: block;
    background-color: var(--bs-gray-100);
}
/*
 * BS5 BootButtonColumn butonları düz <a class="btn btn-sm"> olarak arka arkaya
 * basılır; sarmalayıcı yoktur. Dar aksiyon sütununda inline-block akışıyla alt
 * alta sarınca her buton kendi metin genişliğinde kalıyor ("Görüntüle" geniş,
 * "Sil" dar) ve kolon dağınık görünüyor.
 *
 * .grid-actions: aksiyon hücresini flex kolona çevirir, butonları eşit
 * genişlikte ve aralıklı dizer. GridView kolonunda
 * 'htmlOptions' => array('class' => 'grid-actions') ile kullanılır.
 */
td.grid-actions {
    white-space: nowrap;
}
td.grid-actions > .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: .25rem;
}
td.grid-actions > .btn:last-child {
    margin-bottom: 0;
}

/*
 * Geniş grid'lerde yatay kaydırma SAYFA seviyesinde (yalnızca CSS, JS yok).
 * Grid'in .table-responsive kutusu kaydırmayı bırakır, tablo sayfayı genişletir,
 * yatay çubuk ekranın en altında tarayıcının sayfa çubuğu olur — kullanıcı
 * kutunun dibini aramadan sağa kaydırabileceğini görür.
 *
 * #kt_app_page fit-content: header/kart arka planları tablo boyunca uzar.
 * fit-content metni yine sarar; yalnızca sıkışamayan tablo sayfayı genişletir,
 * dar sayfalarda hiçbir şey değişmez.
 *
 * BİLEREK sticky YOK: sağa kayınca breadcrumb/sekme/filtre de kayar. Önceki
 * sürümdeki sticky kuralları (VOC-32304) modal'ları sayfa akışına düşürüyor,
 * katman sırasını bozuyordu — geri eklemeyin.
 *
 * Mobil (<992px) dokunulmaz: grid kendi kutusunda parmakla kayar.
 */
@media (min-width: 992px) {
    #kt_app_page {
        width: fit-content;
        min-width: 100%;
    }
    /* Grid'in kendi kutusu + grid'i saran view kutuları (crm/project/admin vb.) */
    #kt_app_content .grid-view .table-responsive,
    #kt_app_content .table-responsive:has(.grid-view) {
        overflow-x: visible;
    }
    /* Modal içinde sayfa genişlemesin; grid modalın kendi kutusunda kayar */
    #kt_app_content .modal .grid-view .table-responsive,
    #kt_app_content .modal .table-responsive:has(.grid-view) {
        overflow-x: auto;
    }
    /* Yan yana sütunlardaki (col-md-6 vb.) grid'ler sayfaya taşarsa komşu
       sütunun üstüne biner; .vt-grid-contained verilen kutuda kendi içinde kayar. */
    #kt_app_content .vt-grid-contained .grid-view .table-responsive,
    #kt_app_content .vt-grid-contained .table-responsive:has(.grid-view) {
        overflow-x: auto;
    }

    /*
     * Sayfa çubuğu her zaman görünür ve belirgin. Özel stilli webkit çubuğu
     * macOS'ta da kalıcı çizilir (varsayılan overlay çubuk kaydırana kadar
     * gizli). Metronic html/body çubuğuna stil vermiyor; html'e scrollbar-width/
     * scrollbar-color VERMEYİN — Chrome 121+ o zaman ::-webkit-scrollbar'ı yok sayar.
     */
    html::-webkit-scrollbar {
        width: 12px;
        height: 14px;
    }
    html::-webkit-scrollbar-track,
    html::-webkit-scrollbar-corner {
        background: var(--bs-gray-200);
    }
    html::-webkit-scrollbar-thumb {
        background-color: var(--bs-gray-500);
        border: 3px solid var(--bs-gray-200);
        border-radius: 8px;
    }
    html::-webkit-scrollbar-thumb:hover {
        background-color: var(--bs-gray-600);
    }
    @supports (-moz-appearance: none) {
        html {
            scrollbar-color: var(--bs-gray-500) var(--bs-gray-200);
        }
    }
}

/* ---------------------------------------------------------------
   Detay ekranlarinda label + deger yan yana gosterimi (BS3 uyumu)
   .row > .detail-label + deger sutunu seklinde kullanilir.
   --------------------------------------------------------------- */
.detail-label {
    text-align: left;
}
.detail-label .form-label {
    margin-bottom: 0;
}
@media (max-width: 575.98px) {
    /* Mobilde alt alta dus ve sola hizala */
    .detail-label {
        text-align: left;
    }
}

.custom-page-tab.page-tabs-wrap {
    flex-wrap: wrap !important;
    white-space: normal !important;
    overflow-x: visible !important;
    row-gap: .25rem;
}
.custom-page-tab.page-tabs-wrap .nav-link {
    white-space: nowrap;
}

/*
 * Sayfa sekmeleri (layouts/bs5/_metronic_tabs.php, 3 kopya) — belirgin sekme görünümü.
 * Eskiden pasif sekmeler gri zeminde düz gri yazıydı, tıklanabilir oldukları
 * anlaşılmıyordu. Pasif: zeminden koyu kenarlıklı kutu; hover: beyaz + mavi;
 * aktif: beyaz, mavi yazı, üstte mavi vurgu çizgisi, alttaki karta bağlanır.
 * Link'teki Metronic btn-active-light/btn-color-* sınıfları arka planı
 * !important verdiği için burada da !important şart.
 */
.custom-page-tab.nav-tabs {
    border-bottom: 0;
    column-gap: .375rem;
}
.custom-page-tab.nav-tabs .nav-item .nav-link {
    margin: 0;
    padding: .65rem 1.25rem;
    font-weight: 600;
    color: var(--bs-gray-700) !important;
    background-color: #E1E6EE !important;
    border: 1px solid #D3DAE4 !important;
    border-bottom: 0 !important;
    border-radius: .625rem .625rem 0 0;
    box-shadow: none;
    transition: background-color .15s ease, color .15s ease;
}
.custom-page-tab.nav-tabs .nav-item .nav-link:hover,
.custom-page-tab.nav-tabs .nav-item .nav-link:focus-visible {
    color: var(--bs-primary) !important;
    background-color: #FFFFFF !important;
    border-color: #C3D1E6 !important;
}
.custom-page-tab.nav-tabs .nav-item .nav-link.active {
    color: var(--bs-primary) !important;
    background-color: #FFFFFF !important;
    border-color: var(--bs-root-card-border-color) !important;
    box-shadow: inset 0 3px 0 var(--bs-primary);
}
@media (max-width: 575.98px) {
    .custom-page-tab.nav-tabs .nav-item .nav-link {
        padding: .5rem .85rem;
        font-size: .95rem;
    }
}

/*
 * Dikey sekmeler — BootTabbable 'vertical' => true + 'placement' => 'left'/'right'.
 * BS3'teki tabs-left görünümü: md ve üstünde sekmeler bir sütunda alt alta,
 * sola yaslı; içerik yanında. Mobilde (md altı) normal yatay sekmeler kalır,
 * dar ekranda yan sütun içeriği ezerdi.
 */
@media (min-width: 768px) {
    .vt-tabs-vertical {
        display: flex;
        align-items: stretch;
    }
    .vt-tabs-vertical > .nav {
        flex: 0 0 220px;
        max-width: 220px;
        flex-direction: column;
        flex-wrap: nowrap;
        border-bottom: 0;
    }
    .vt-tabs-vertical-left > .nav {
        border-right: 1px solid var(--bs-border-color);
    }
    .vt-tabs-vertical-right > .nav {
        border-left: 1px solid var(--bs-border-color);
    }
    .vt-tabs-vertical > .nav > .nav-item > .nav-link {
        display: block;
        width: 100%;
        margin: 0 0 .25rem;
        text-align: left;
        white-space: normal;
    }
    /* min-width:0 → içerideki geniş tablolar flex öğesini şişirmez,
       kendi .table-responsive'lerinde kayar */
    .vt-tabs-vertical > .tab-content {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Yukarı Çık: Metronic scrolltop'u etiketli butona çevirir; sabit footer'ın üstünde durur.
   Destek widget'ı sağ altta olduğunda onunla çakışmaması için sola kaydırılır. */
.scrolltop.vt-scrolltop {
    width: auto;
    height: auto;
    right: 20px;
    bottom: 52px;
    z-index: 1001;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 0.475rem;
    background-color: var(--bs-primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.scrolltop.vt-scrolltop:hover {
    opacity: 1;
    background-color: var(--bs-primary-active);
}
.scrolltop.vt-scrolltop > i,
.scrolltop.vt-scrolltop:hover > i {
    font-size: 1rem;
    color: #fff;
}
.scrolltop.vt-scrolltop.vt-scrolltop-support {
    right: 90px;
}
@media (max-width: 767.98px) {
    .scrolltop.vt-scrolltop {
        bottom: 84px;
        right: 12px;
    }
    .scrolltop.vt-scrolltop.vt-scrolltop-support {
        right: 80px;
    }
    .scrolltop.vt-scrolltop > span {
        display: none;
    }
}

/* ---------------------------------------------------------------
   Sayfa üst paneli (flash mesajları) — layouts/bs5/metronic.php
   BS3'teki gibi sekmelerin ALTINDA, içerik alanının içinde durur.
   Sekme varsa beyaz panel sekmeye yapışır; hemen ardından gelen view
   kartıyla birleşip tek parça içerik alanı gibi görünür.
   --------------------------------------------------------------- */
.vt-page-head > .alert:last-child {
    margin-bottom: 0;
}
.vt-page-head:not(.vt-page-head-tabbed) {
    margin-bottom: 1rem;
}
.vt-page-head-tabbed {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-root-card-border-color);
    border-top: 0;
    border-radius: 0 0 .625rem .625rem;
    box-shadow: var(--bs-root-card-box-shadow);
    padding: 1.5rem 2.25rem;
    margin-bottom: 1rem;
}
/* Ardından view kartı geliyorsa ikisini birleştir */
.vt-page-head-tabbed:has(+ .card) {
    border-bottom: 0;
    border-radius: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}
.vt-page-head-tabbed + .card {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
@media (max-width: 575.98px) {
    .vt-page-head-tabbed {
        padding: 1rem 1rem;
    }
    .vt-page-head-tabbed:has(+ .card) {
        padding-bottom: 0;
    }
}


/*
 * Select2 3.x orijinal <select>'i .select2-offscreen ile `left:-1000px`'e itiyor
 * ama genişliğini kısıtlamıyor. Çok uzun seçenekli listelerde (ör. aday raporu
 * "Firmaya Göre" çoklu firma listesi) gizli select 1000px'den geniş olunca sağ
 * ucu sayfayı taşırıp yatay kaydırma çubuğu açıyordu.
 */
.select2-offscreen,
.select2-offscreen:focus {
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
}

/* BootDateTimeRangePicker — tek inputta başlangıç/bitiş tarih-saat.
   Input readonly (klavye açılmasın, sadece takvimden seçilsin) ama devre dışı gibi görünmesin. */
.vt-dtrange .vt-dtrange-display[readonly] {
    background-color: var(--bs-body-bg);
    cursor: pointer;
}
.vt-dtrange .input-group-text {
    color: var(--bs-primary);
}