:root {
    color-scheme: light;
}

html, body {
    font-size: .9rem;
}

body, .app-wrapper, .sidebar {
    background: #fff !important;
    color: #1C1C1A !important;
}

.table td, .table th {
    padding-top: .35rem;
    padding-bottom: .35rem;
    vertical-align: middle;
}

.login-box {
    width: 380px;
}

.small-box .inner h3 {
    font-size: 1.75rem;
    font-weight: 700;
}

.progress {
    height: .6rem;
}

/* Bootstrap 5'te hazır bir text-bg-purple yok — loglar ekranındaki
   "KişiEklendi" işlem rozeti için ekleniyor. */
.text-bg-purple {
    color: #fff !important;
    background-color: #6f42c1 !important;
}

/* ===== Layout modu: "Üst menü" (topnav) =====
   Tercih localStorage['layout_mode'] === 'topnav' ise auth.js body'ye
   .layout-topnav ekliyor. Varsayılan (sidebar) modda bu blokların hiçbiri
   uygulanmaz — mevcut yapı aynen korunur. */
body.layout-topnav .app-sidebar {
    display: none !important;
}

/* AdminLTE 4 .app-wrapper bir CSS grid (header / sidebar / main / footer alanları).
   Sidebar gizlenince kolonu da kaldırıp tek kolona indiriyoruz ki main/footer
   sola kaymasın. */
body.layout-topnav .app-wrapper {
    grid-template-columns: 1fr !important;
    grid-template-areas:
        "lte-app-header"
        "lte-app-main"
        "lte-app-footer" !important;
}

body.layout-topnav .app-main {
    margin-left: 0 !important;
}

body.layout-topnav #topnav-menu {
    display: flex !important;
}

body.layout-topnav #navbar-brand {
    display: inline-flex !important;
}

/* Topnav modunda sidebar hamburger'ı işlevsiz — gizle. */
body.layout-topnav #navbar-sidebar-toggle {
    display: none !important;
}

#topnav-menu .nav-link.active {
    font-weight: 600;
}

/* ===== Responsive (2026-09-11 denetimi) =====
   Not: AdminLTE 4 sidebar modunda mobilde zaten kendiliğinden overlay'e dönüyor,
   ve Bootstrap'ın .row (flex-wrap:wrap varsayılanı) + col-md-* sınıfları toolbar
   filtrelerini zaten alt alta diziyor — canlı testle doğrulandı, bunlar için ayrı
   CSS eklemedik. Aşağıdakiler sadece gerçekten kırık bulunan 3 nokta içindir. */

/* 1) Topnav modu + mobil: #topnav-menu (7 link) sarmıyordu, sayfa 793px'e taşıyordu.
   Bootstrap'ın navbar-toggler/.collapse deseniyle hamburger'a çeviriyoruz — JS
   gerekmiyor, bootstrap.bundle.min.js zaten her sayfada yüklü (data-bs-toggle="collapse"). */
@media (min-width: 768px) {
    /* Masaüstünde collapse mekanizması devre dışı — menü her zaman yatay (eski davranış). */
    body.layout-topnav #topnav-collapse.collapse:not(.show) {
        display: block !important;
    }

    body.layout-topnav #topnav-toggler {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    body.layout-topnav #topnav-toggler {
        display: inline-block !important;
    }

    body.layout-topnav #topnav-collapse {
        flex-basis: 100%;
    }

    body.layout-topnav #topnav-menu {
        display: flex !important;
        flex-direction: column;
        width: 100%;
    }

    /* Kullanıcı adı + rol rozeti dar ekranda navbar'ı taşırıyordu — sadece ikon/Çıkış kalsın. */
    body.layout-topnav #navbar-user-name,
    body.layout-topnav #navbar-user-role {
        display: none !important;
    }
}

/* 2) personeller.html'in TanStack Virtual tablosu — sabit piksel genişlikli
   kolonlar mobilde başlıkları kırpıyordu (overflow-y vardı, overflow-x yoktu). */
#tableContainer {
    overflow-x: auto;
}

/* 3) login.html — .login-box sabit 380px, 375px'lik telefonlarda taşıyordu. */
@media (max-width: 575.98px) {
    .login-box {
        width: 100%;
        padding: 0 .5rem;
    }

    .login-card-body {
        padding: 1.25rem;
    }
}

/* Mobilde ikincil/az kritik tablo sütunlarını gizle — hem <th> hem ilgili <td>'ye
   eklenen ortak sınıf (persons/personeller/person-detail/trainings/assignments/logs). */
@media (max-width: 767.98px) {
    .col-hide-mobile {
        display: none !important;
    }
}