/* Mobil Uyumluluk CSS */

/* Genel box-sizing - tüm ekran boyutları için */
*, *::before, *::after {
    box-sizing: border-box !important;
}

/* Maaş Avansı Raporları - Mobil Filtre ve Tablo Düzeltmesi */
@media (max-width: 768px) {
    /* Filtre bölümünü daralt */
    .bg-gray-100.p-1.mb-2.rounded-t-lg,
    .bg-gray-100.p-2.mb-2.rounded-t-lg {
        padding: 0.25rem !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    .bg-gray-100.p-1.mb-2.rounded-t-lg .grid,
    .bg-gray-100.p-2.mb-2.rounded-t-lg .grid {
        max-width: 100% !important;
        gap: 0.25rem !important;
        box-sizing: border-box !important;
    }
    
    .bg-gray-100.p-1.mb-2.rounded-t-lg input,
    .bg-gray-100.p-1.mb-2.rounded-t-lg select,
    .bg-gray-100.p-2.mb-2.rounded-t-lg input,
    .bg-gray-100.p-2.mb-2.rounded-t-lg select {
        font-size: 0.625rem !important;
        padding: 0.25rem 0.375rem !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Maaş Avansı Raporları tablosu mobil görünümde yatay scroll */
    #maasAvansRaporlariTable {
        min-width: 800px !important;
        width: auto !important;
        table-layout: auto !important;
        display: table !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #maasAvansRaporlariTable thead,
    #maasAvansRaporlariTable tbody,
    #maasAvansRaporlariTable tr,
    #maasAvansRaporlariTable td,
    #maasAvansRaporlariTable th {
        display: table !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #maasAvansRaporlariTable thead {
        display: table-header-group !important;
    }
    
    #maasAvansRaporlariTable tbody {
        display: table-row-group !important;
    }
    
    #maasAvansRaporlariTable tr {
        display: table-row !important;
    }
    
    #maasAvansRaporlariTable td,
    #maasAvansRaporlariTable th {
        display: table-cell !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    /* Tablo container'ı mobil görünümde görünür olmalı */
    .overflow-x-auto.scrollable-container {
        display: block !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        visibility: visible !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* DataTables wrapper mobil görünümde görünür olmalı */
    #maasAvansRaporlariTable_wrapper {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
    }
    
    #maasAvansRaporlariTable_wrapper .dataTables_scroll {
        display: block !important;
        visibility: visible !important;
    }
    
    #maasAvansRaporlariTable_wrapper .dataTables_scrollHead,
    #maasAvansRaporlariTable_wrapper .dataTables_scrollBody {
        display: block !important;
        visibility: visible !important;
    }
    
    /* DataTables'ın eklediği tüm üst wrapper'ları gizle */
    #maasAvansRaporlariTable_wrapper > .dataTables_length,
    #maasAvansRaporlariTable_wrapper > .dataTables_filter,
    #maasAvansRaporlariTable_wrapper > .dataTables_info,
    #maasAvansRaporlariTable_wrapper > .dataTables_paginate {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Mobil görünümde taşma önleme - SADECE MOBİL İÇİN */
@media (max-width: 768px) {
    html {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        position: relative !important;
        box-sizing: border-box !important;
    }
    
    /* 100vw kullanımını 100% yap */
    * {
        max-width: 100% !important;
    }
    
    [style*="100vw"],
    [style*="width: 100vw"],
    [style*="width:100vw"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Sadece ana container'ları sınırla - direkt child'lar */
    body > div {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Ana wrapper içindeki direkt child'lar */
    body > div > div {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Main content için özel kural */
    main,
    #main-content {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: auto !important; /* İçerik scroll için */
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Sicil kartı sayfası için özel düzeltmeler */
    body > div.flex.flex-col {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    body > div.flex.flex-col.min-h-full {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    body > div.flex.flex-col > div.flex.flex-1 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }
    
    /* Sicil kartı main content */
    body > div.flex.flex-col > div.flex.flex-1 > main#main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 1rem !important;
        flex: 1 1 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Sicil kartı içerik div'i */
    main#main-content > div.bg-white {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 1rem !important;
        box-sizing: border-box !important;
    }
    
    /* Body ve HTML için ek düzeltmeler */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* Genel Mobil İyileştirmeler */
@media (max-width: 768px) {
    /* Body ve container'lar */
    body {
        font-size: 14px;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* HTML elementi de sıfırla */
    html {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Ana wrapper'ı ortala - sadece direkt child */
    body > div {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Padding ve margin optimizasyonları */
    .container, main, .content-wrapper {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Mobil görünümde tüm margin-left ve margin-right değerlerini sıfırla */
    main[class*="mx-"],
    main[class*="ml-"],
    main[class*="mr-"],
    #main-content[class*="mx-"],
    #main-content[class*="ml-"],
    #main-content[class*="mr-"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Başlıklar */
    h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 1.1rem !important;
    }
    
    /* Butonlar */
    button, .btn, input[type="submit"], input[type="button"] {
        min-height: 44px !important; /* Touch target için */
        padding: 0.75rem 1rem !important;
        font-size: 16px !important; /* iOS zoom önleme */
    }
    
    /* Form elemanları */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    textarea,
    select {
        font-size: 16px !important; /* iOS zoom önleme */
        padding: 0.75rem !important;
        min-height: 44px !important;
    }
    
    /* Tablolar - Mobilde card view */
    .table-responsive,
    .overflow-x-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Tablo içeriğini mobilde daha iyi göstermek için */
    table {
        font-size: 0.875rem !important;
    }
    
    table th,
    table td {
        padding: 0.5rem 0.25rem !important;
        white-space: nowrap;
    }
    
    /* Card'lar */
    .card, .bg-white.rounded {
        margin-bottom: 1rem !important;
        padding: 1rem !important;
    }
    
    /* Grid'ler */
    .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Flex container'lar */
    .flex {
        flex-wrap: wrap;
    }
    
    /* Navbar iyileştirmeleri */
    nav {
        padding: 0.5rem 1rem !important;
    }
    
    /* Sidebar zaten mobil uyumlu, ek iyileştirmeler */
    #logo-sidebar {
        width: 16rem !important;
    }
    
    /* Main content */
    main,
    #main-content,
    main#main-content {
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 1rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Main content container'ları için ek düzeltmeler */
    main.container,
    #main-content.container,
    main .container {
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Footer */
    footer {
        font-size: 0.75rem !important;
        padding: 0.5rem !important;
        text-align: center !important;
    }
    
    /* Modal'lar */
    .modal, [role="dialog"] {
        width: 95% !important;
        max-width: 95% !important;
        margin: 1rem auto !important;
        padding: 1rem !important;
    }
    
    /* Alert ve mesaj kutuları */
    .alert, .message {
        padding: 0.75rem !important;
        font-size: 0.875rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Mesaj bildirimleri - daha büyük ve okunabilir */
    #message-container {
        width: 90vw !important;
        max-width: 28rem !important;
        right: 1rem !important;
        top: 5rem !important;
    }
    
    #message-container > div {
        padding: 1.25rem !important;
        font-size: 1rem !important;
        min-height: 4rem !important;
    }
    
    #message-container .text-base,
    #message-container .text-lg {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
    
    #message-container svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
    
    /* Badge'ler */
    .badge, .tag {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    /* İkonlar */
    svg {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    
    /* Spacing optimizasyonları */
    .mb-8, .mt-8 {
        margin-bottom: 1.5rem !important;
        margin-top: 1.5rem !important;
    }
    
    .p-8 {
        padding: 1rem !important;
    }
    
    .px-8, .py-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    /* Dashboard kartları */
    .dashboard-card {
        margin-bottom: 1rem !important;
    }
    
    /* Hızlı erişim kartları */
    .grid a.flex.flex-col {
        padding: 0.75rem !important;
    }
    
    .grid a.flex.flex-col .w-12 {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    .grid a.flex.flex-col svg {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    
    .grid a.flex.flex-col span {
        font-size: 0.75rem !important;
        margin-top: 0.5rem !important;
    }
    
    /* Scrollable container'lar */
    .scrollable-container {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    /* Form grid'leri */
    .grid.grid-cols-1.md\\:grid-cols-2,
    .grid.sm\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* Sticky header'lar */
    .sticky {
        position: relative !important;
    }
    
    /* Modal ve popup'lar */
    [role="dialog"],
    .modal-content {
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
}

/* Çok küçük ekranlar (telefon) */
@media (max-width: 480px) {
    body {
        font-size: 13px;
    }
    
    h1 {
        font-size: 1.25rem !important;
    }
    
    h2 {
        font-size: 1.1rem !important;
    }
    
    button, .btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    .flex-row:not(.mobile-single-row) {
        flex-direction: column !important;
    }
    
    /* Sicil kartı mobil görünümü için özel kural - tek satır kalacak */
    .mobile-single-row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
    
    .gap-8, .gap-4 {
        gap: 0.5rem !important;
    }
    
    table {
        font-size: 0.75rem !important;
    }
    
    table th,
    table td {
        padding: 0.375rem 0.125rem !important;
    }
}

/* Tablet görünümü */
@media (min-width: 481px) and (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Tablo için mobil card view utility class */
@media (max-width: 768px) {
    .table-mobile-card {
        display: none;
    }
    
    .table-mobile-card-view {
        display: block;
    }
    
    .table-mobile-card-view .mobile-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        padding: 1rem;
        margin-bottom: 1rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .table-mobile-card-view .mobile-card-header {
        font-weight: 600;
        color: #161451;
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .table-mobile-card-view .mobile-card-row {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f3f4f6;
    }
    
    .table-mobile-card-view .mobile-card-row:last-child {
        border-bottom: none;
    }
    
    .table-mobile-card-view .mobile-card-label {
        font-weight: 500;
        color: #6b7280;
        font-size: 0.875rem;
    }
    
    .table-mobile-card-view .mobile-card-value {
        color: #1f2937;
        font-size: 0.875rem;
        text-align: right;
        flex: 1;
        margin-left: 1rem;
    }
}

/* Desktop'ta normal tablo görünümü */
@media (min-width: 769px) {
    .table-mobile-card-view {
        display: none;
    }
    
    .table-mobile-card {
        display: table;
    }
}

/* Touch target iyileştirmeleri */
@media (max-width: 768px) {
    a, button, input, select, textarea, label {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Link'ler için padding ekle */
    a:not(.btn):not(button) {
        padding: 0.5rem 0;
        display: inline-block;
    }
}

/* Landscape mod için */
@media (max-width: 768px) and (orientation: landscape) {
    nav {
        padding: 0.25rem 1rem !important;
    }
    
    #logo-sidebar {
        max-height: 100vh;
        overflow-y: auto;
    }
}

/* Mobil görünümde sidebar gizliyken main content'i tam genişlik yap */
@media (max-width: 768px) {
    /* Ana wrapper - en üst seviye */
    body > div {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Ana wrapper içindeki flex-col container - max-w-screen ve mx-auto'yu override et */
    body > div > div.flex.flex-col,
    div.flex.flex-col {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* max-w-screen class'ını mobilde kaldır */
    .max-w-screen {
        max-width: 100% !important;
    }
    
    /* mx-auto class'ını mobilde kaldır */
    .mx-auto {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Ana flex container - mobilde ROW ama sidebar wrapper görünmez */
    body > div > div.flex.flex-1,
    div.flex.flex-1,
    .flex.flex-1 {
        display: flex !important;
        flex-direction: row !important; /* ROW kalacak */
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Sidebar wrapper div'ini mobilde TAMAMEN KALDIR - EN ÖNEMLİ */
    #sidebar-wrapper,
    div.flex.flex-1 > div:first-child,
    div.flex.flex-1 > div.sm\\:flex,
    .sm\\:flex.sm\\:flex-row {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        flex-basis: 0 !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important; /* Ekran dışına taşı */
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        order: 999 !important; /* En sona taşı */
        height: 0 !important;
        max-height: 0 !important;
    }
    
    /* Sidebar açıkken wrapper'ı göster - ama fixed position'da */
    body.sidebar-open #sidebar-wrapper,
    body.sidebar-open div.flex.flex-1 > div:first-child,
    body.sidebar-open .sm\\:flex.sm\\:flex-row {
        display: block !important;
        position: fixed !important;
        left: 0 !important;
        width: auto !important;
        flex-basis: auto !important;
        min-width: 16rem !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 50 !important;
        order: 0 !important;
    }
    
    /* Sidebar'ı mobilde FIXED position - Desktop sticky'i override et */
    #logo-sidebar {
        position: fixed !important; /* Desktop sticky'i override et */
        left: -100% !important;
        top: 0 !important;
        height: 100vh !important;
        z-index: 50 !important;
        width: 16rem !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        flex-basis: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        /* Desktop sticky'i override et */
        position: fixed !important;
        top: 0 !important;
        align-self: auto !important;
        max-height: 100vh !important;
    }
    
    /* Sidebar açıkken */
    body.sidebar-open #logo-sidebar {
        transform: translateX(0) !important;
        left: 0 !important;
        width: 16rem !important;
        max-width: 16rem !important;
        flex-basis: 16rem !important;
    }
    
    /* Sidebar kapalıyken flex container'da genişlik almasın */
    body:not(.sidebar-open) #logo-sidebar {
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        flex-basis: 0 !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Main content her zaman tam genişlikte - sidebar wrapper gizli olduğu için */
    main,
    #main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        flex: 1 1 100% !important;
        flex-basis: 100% !important;
        flex-grow: 1 !important;
        flex-shrink: 0 !important; /* Küçülmesin */
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        order: -1 !important; /* En öne al - sidebar wrapper'dan önce */
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Flex container'ın direkt child'larını kontrol et */
    div.flex.flex-1 > main,
    div.flex.flex-1 > #main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex: 1 1 100% !important;
    }
    
    /* Sidebar gizliyken main content tam genişlikte olsun */
    body:not(.sidebar-open) main,
    body:not(.sidebar-open) #main-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
    
    /* Sidebar açıkken main content scroll'u engelle - sidebar fixed olduğu için main content tam genişlikte kalacak */
    body.sidebar-open main,
    body.sidebar-open #main-content {
        overflow: hidden !important;
        height: 100vh !important;
        max-height: 100vh !important;
        width: 100% !important; /* Sidebar fixed olduğu için main content tam genişlikte */
        max-width: 100% !important;
    }
    
    /* Hamburger menü butonunu mobilde göster */
    #mobile-menu-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 100 !important;
        position: relative !important;
    }
    
    /* Sidebar açıkken body scroll'u engelle */
    body.sidebar-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100vh !important;
    }
    
    /* Inline style'larda 100vw varsa 100% yap */
    [style*="width: 100vw"],
    [style*="width:100vw"] {
        width: 100% !important;
    }
    
    /* Hamburger menü butonunu mobilde göster - sm:hidden class'ını override et */
    #mobile-menu-toggle,
    nav #mobile-menu-toggle,
    button#mobile-menu-toggle,
    button[id="mobile-menu-toggle"] {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 100 !important;
        position: relative !important;
    }
    
    /* Tüm container'ları tam genişlik yap */
    .container,
    .container-fluid,
    .content-wrapper,
    .wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
    }
    
    /* Card ve panel'ler */
    .card,
    .panel,
    .bg-white {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Tüm rounded container'lar */
    .rounded-3xl,
    .rounded-xl,
    .rounded-lg {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Main content içindeki tüm container'ları tam genişlik yap */
    main .container,
    main .bg-white,
    main .rounded-3xl,
    main .rounded-xl,
    #main-content .container,
    #main-content .bg-white,
    #main-content .rounded-3xl,
    #main-content .rounded-xl {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Personel tablosu - mobilde sadece ad-soyad, email ve butonlar görünsün */
    /* Arama satırındaki input'ları da gizle */
    #activePersonnelTable thead tr:nth-child(2) th:nth-child(2),
    #activePersonnelTable thead tr:nth-child(2) th:nth-child(4),
    #activePersonnelTable thead tr:nth-child(2) th:nth-child(5),
    #activePersonnelTable thead tr:nth-child(2) th:nth-child(6),
    #activePersonnelTable thead tr:nth-child(2) th:nth-child(7),
    #activePersonnelTable thead tr:nth-child(2) th:nth-child(8),
    #activePersonnelTable thead tr:nth-child(2) th:nth-child(9),
    #activePersonnelTable thead tr:first-child th:nth-child(2),
    #activePersonnelTable thead tr:first-child th:nth-child(4),
    #activePersonnelTable thead tr:first-child th:nth-child(5),
    #activePersonnelTable thead tr:first-child th:nth-child(6),
    #activePersonnelTable thead tr:first-child th:nth-child(7),
    #activePersonnelTable thead tr:first-child th:nth-child(8),
    #activePersonnelTable thead tr:first-child th:nth-child(9),
    #activePersonnelTable tbody td:nth-child(2),
    #activePersonnelTable tbody td:nth-child(4),
    #activePersonnelTable tbody td:nth-child(5),
    #activePersonnelTable tbody td:nth-child(6),
    #activePersonnelTable tbody td:nth-child(7),
    #activePersonnelTable tbody td:nth-child(8),
    #activePersonnelTable tbody td:nth-child(9) {
        display: none !important;
    }
    
    /* Pasif personel tablosu için de aynı */
    #inactivePersonnelTable thead tr:nth-child(2) th:nth-child(2),
    #inactivePersonnelTable thead tr:nth-child(2) th:nth-child(4),
    #inactivePersonnelTable thead tr:nth-child(2) th:nth-child(5),
    #inactivePersonnelTable thead tr:nth-child(2) th:nth-child(6),
    #inactivePersonnelTable thead tr:nth-child(2) th:nth-child(7),
    #inactivePersonnelTable thead tr:nth-child(2) th:nth-child(8),
    #inactivePersonnelTable thead tr:nth-child(2) th:nth-child(9),
    #inactivePersonnelTable thead tr:first-child th:nth-child(2),
    #inactivePersonnelTable thead tr:first-child th:nth-child(4),
    #inactivePersonnelTable thead tr:first-child th:nth-child(5),
    #inactivePersonnelTable thead tr:first-child th:nth-child(6),
    #inactivePersonnelTable thead tr:first-child th:nth-child(7),
    #inactivePersonnelTable thead tr:first-child th:nth-child(8),
    #inactivePersonnelTable thead tr:first-child th:nth-child(9),
    #inactivePersonnelTable tbody td:nth-child(2),
    #inactivePersonnelTable tbody td:nth-child(4),
    #inactivePersonnelTable tbody td:nth-child(5),
    #inactivePersonnelTable tbody td:nth-child(6),
    #inactivePersonnelTable tbody td:nth-child(7),
    #inactivePersonnelTable tbody td:nth-child(8),
    #inactivePersonnelTable tbody td:nth-child(9) {
        display: none !important;
    }
    
    /* İzinde olan personel tablosu için de aynı */
    #onleavePersonnelTable thead tr:nth-child(2) th:nth-child(2),
    #onleavePersonnelTable thead tr:nth-child(2) th:nth-child(4),
    #onleavePersonnelTable thead tr:nth-child(2) th:nth-child(5),
    #onleavePersonnelTable thead tr:nth-child(2) th:nth-child(6),
    #onleavePersonnelTable thead tr:nth-child(2) th:nth-child(7),
    #onleavePersonnelTable thead tr:nth-child(2) th:nth-child(8),
    #onleavePersonnelTable thead tr:nth-child(2) th:nth-child(9),
    #onleavePersonnelTable thead tr:first-child th:nth-child(2),
    #onleavePersonnelTable thead tr:first-child th:nth-child(4),
    #onleavePersonnelTable thead tr:first-child th:nth-child(5),
    #onleavePersonnelTable thead tr:first-child th:nth-child(6),
    #onleavePersonnelTable thead tr:first-child th:nth-child(7),
    #onleavePersonnelTable thead tr:first-child th:nth-child(8),
    #onleavePersonnelTable thead tr:first-child th:nth-child(9),
    #onleavePersonnelTable tbody td:nth-child(2),
    #onleavePersonnelTable tbody td:nth-child(4),
    #onleavePersonnelTable tbody td:nth-child(5),
    #onleavePersonnelTable tbody td:nth-child(6),
    #onleavePersonnelTable tbody td:nth-child(7),
    #onleavePersonnelTable tbody td:nth-child(8),
    #onleavePersonnelTable tbody td:nth-child(9) {
        display: none !important;
    }
    
    /* Tablo genişliğini ayarla ve görünür yap */
    #activePersonnelTable,
    #inactivePersonnelTable,
    #onleavePersonnelTable {
        width: 100% !important;
        table-layout: auto !important;
        display: table !important;
    }
    
    /* Tablo container'ını görünür yap */
    .scrollable-container:has(#activePersonnelTable),
    .scrollable-container:has(#inactivePersonnelTable),
    .scrollable-container:has(#onleavePersonnelTable),
    div:has(#activePersonnelTable),
    div:has(#inactivePersonnelTable),
    div:has(#onleavePersonnelTable) {
        display: block !important;
        overflow-x: auto !important;
        width: 100% !important;
    }
    
    /* Tablo wrapper'ını görünür yap */
    .bg-white.rounded-xl:has(#activePersonnelTable),
    .bg-white.rounded-xl:has(#inactivePersonnelTable),
    .bg-white.rounded-xl:has(#onleavePersonnelTable) {
        display: block !important;
        width: 100% !important;
    }
    
    /* Tablo hücrelerini daha kompakt yap */
    #activePersonnelTable th,
    #activePersonnelTable td,
    #inactivePersonnelTable th,
    #inactivePersonnelTable td,
    #onleavePersonnelTable th,
    #onleavePersonnelTable td {
        padding: 0.25rem 0.125rem !important;
        font-size: 0.7rem !important;
    }
    
    /* Personel ad-soyad fontunu küçült */
    #activePersonnelTable tbody td:nth-child(1) .font-semibold,
    #inactivePersonnelTable tbody td:nth-child(1) .font-semibold,
    #onleavePersonnelTable tbody td:nth-child(1) .font-semibold {
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
    }
    
    /* E-posta fontunu küçült */
    #activePersonnelTable tbody td:nth-child(3),
    #inactivePersonnelTable tbody td:nth-child(3),
    #onleavePersonnelTable tbody td:nth-child(3) {
        font-size: 0.65rem !important;
        word-break: break-all !important;
    }
    
    /* Avatar'ı mobilde kaldır */
    #activePersonnelTable tbody td:nth-child(1) img,
    #inactivePersonnelTable tbody td:nth-child(1) img,
    #onleavePersonnelTable tbody td:nth-child(1) img {
        display: none !important;
    }
    
    /* Personel bilgisi container'ını düzenle */
    #activePersonnelTable tbody td:nth-child(1) .flex.items-center,
    #inactivePersonnelTable tbody td:nth-child(1) .flex.items-center,
    #onleavePersonnelTable tbody td:nth-child(1) .flex.items-center {
        gap: 0.25rem !important;
    }
    
    /* TC kimlik numarasını gizle mobilde */
    #activePersonnelTable tbody td:nth-child(1) .text-xs,
    #inactivePersonnelTable tbody td:nth-child(1) .text-xs,
    #onleavePersonnelTable tbody td:nth-child(1) .text-xs {
        display: none !important;
    }
    
    /* Görünür olması gereken sütunlar (Personel, E-posta, İşlemler) */
    #activePersonnelTable tbody td:nth-child(1),
    #activePersonnelTable tbody td:nth-child(3),
    #activePersonnelTable tbody td:nth-child(10),
    #inactivePersonnelTable tbody td:nth-child(1),
    #inactivePersonnelTable tbody td:nth-child(3),
    #inactivePersonnelTable tbody td:nth-child(10),
    #onleavePersonnelTable tbody td:nth-child(1),
    #onleavePersonnelTable tbody td:nth-child(3),
    #onleavePersonnelTable tbody td:nth-child(10) {
        display: table-cell !important;
    }
    
    /* Görünür olması gereken başlıklar */
    #activePersonnelTable thead tr:first-child th:nth-child(1),
    #activePersonnelTable thead tr:first-child th:nth-child(3),
    #activePersonnelTable thead tr:first-child th:nth-child(10),
    #inactivePersonnelTable thead tr:first-child th:nth-child(1),
    #inactivePersonnelTable thead tr:first-child th:nth-child(3),
    #inactivePersonnelTable thead tr:first-child th:nth-child(10),
    #onleavePersonnelTable thead tr:first-child th:nth-child(1),
    #onleavePersonnelTable thead tr:first-child th:nth-child(3),
    #onleavePersonnelTable thead tr:first-child th:nth-child(10) {
        display: table-cell !important;
    }
    
    /* İşlem butonlarını mobilde sadece ikon olarak göster */
    /* Buton metinlerini gizle, sadece ikonları göster */
    #activePersonnelTable .flex.gap-2 button,
    #inactivePersonnelTable .flex.gap-2 button,
    #onleavePersonnelTable .flex.gap-2 button {
        padding: 0.2rem !important;
        min-width: 1.75rem !important;
        width: 1.75rem !important;
        height: 1.75rem !important;
        font-size: 0 !important;
        position: relative !important;
    }
    
    /* Buton içindeki SVG'leri görünür yap ve ortala */
    #activePersonnelTable .flex.gap-2 button svg,
    #inactivePersonnelTable .flex.gap-2 button svg,
    #onleavePersonnelTable .flex.gap-2 button svg {
        width: 0.9rem !important;
        height: 0.9rem !important;
        margin: 0 !important;
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    
    /* Buton container'ını daha kompakt yap */
    #activePersonnelTable .flex.gap-2,
    #inactivePersonnelTable .flex.gap-2,
    #onleavePersonnelTable .flex.gap-2,
    #activePersonnelTable .mobile-button-container,
    #inactivePersonnelTable .mobile-button-container,
    #onleavePersonnelTable .mobile-button-container {
        gap: 0.2rem !important;
    }
    
    /* Desktop'ta butonları tek satırda göster */
    @media (min-width: 769px) {
        #activePersonnelTable .mobile-button-container,
        #inactivePersonnelTable .mobile-button-container,
        #onleavePersonnelTable .mobile-button-container {
            flex-direction: row !important;
            flex-wrap: wrap !important;
        }
        
        #activePersonnelTable .mobile-button-container > div,
        #inactivePersonnelTable .mobile-button-container > div,
        #onleavePersonnelTable .mobile-button-container > div {
            flex-direction: row !important;
        }
    }
    
    /* Buton içindeki metin span'lerini gizle */
    #activePersonnelTable .flex.gap-2 button .mobile-button-text,
    #inactivePersonnelTable .flex.gap-2 button .mobile-button-text,
    #onleavePersonnelTable .flex.gap-2 button .mobile-button-text {
        display: none !important;
    }
    
    /* Sicil kartı tab içerikleri mobil görünümde görünür olmalı */
    .tab-content1:not(.hidden) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Tab içeriklerinin scrollable container'ı mobilde düzgün çalışsın */
    .tab-content1.scrollable-container {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Tab butonları mobilde tıklanabilir olmalı */
    .tab-btn1 {
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
        min-height: 44px !important; /* Touch target için */
    }
    
    /* Tab içeriklerindeki tablolar mobilde düzgün görünsün */
    .tab-content1 table {
        width: 100% !important;
        min-width: 600px !important; /* Yatay scroll için minimum genişlik */
    }
    
    
    /* Tab içeriklerindeki butonlar mobilde görünür olmalı */
    .tab-content1 button,
    .tab-content1 a {
        min-height: 44px !important; /* Touch target için */
        padding: 0.5rem 1rem !important;
    }
    
    /* Sağlık raporu tab'ında "Rapor Dosyası" sütununu mobilde gizle */
    #content-8 thead th:nth-child(7),
    #content-8 tbody td:nth-child(7) {
        display: none !important;
    }
    
    /* Sağlık raporu tab'ındaki tablo başlıklarını mobilde iki satıra böl */
    #content-8 thead th {
        white-space: normal !important;
        line-height: 1.2 !important;
        padding: 0.5rem 0.25rem !important;
        font-size: 0.7rem !important;
        height: auto !important;
        min-height: 2.5rem !important;
        text-align: center !important;
    }
    
    /* Sağlık raporu tab'ındaki işlem butonlarını yan yana yap */
    #content-8 tbody td:last-child .flex {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        justify-content: center !important;
    }
    
    /* Butonları daha küçük yap */
    #content-8 tbody td:last-child button,
    #content-8 tbody td:last-child a {
        padding: 0.375rem 0.75rem !important;
        min-height: 36px !important;
        font-size: 0.75rem !important;
    }
    
    /* Buton içindeki SVG'leri küçült */
    #content-8 tbody td:last-child svg {
        width: 0.875rem !important;
        height: 0.875rem !important;
    }
    
    /* Tablo hücrelerini daha kompakt yap */
    #content-8 tbody td {
        padding: 0.5rem 0.25rem !important;
        font-size: 0.75rem !important;
    }
    
    /* Buton tooltip için title attribute kullanılacak - CSS ile tooltip ekle */
    #activePersonnelTable .flex.gap-2 button[title]:hover::after,
    #inactivePersonnelTable .flex.gap-2 button[title]:hover::after,
    #onleavePersonnelTable .flex.gap-2 button[title]:hover::after {
        content: attr(title);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 0.3rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.65rem;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 0.3rem;
        pointer-events: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    /* Tooltip için ok işareti */
    #activePersonnelTable .flex.gap-2 button[title]:hover::before,
    #inactivePersonnelTable .flex.gap-2 button[title]:hover::before,
    #onleavePersonnelTable .flex.gap-2 button[title]:hover::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 4px solid transparent;
        border-top-color: rgba(0, 0, 0, 0.85);
        margin-bottom: -4px;
        z-index: 1000;
        pointer-events: none;
    }
    
    /* Empty state colspan'ı mobilde 3 yap (Personel, E-posta, İşlemler) - JavaScript ile yapılacak */
    /* Colspan CSS ile override edilemez, JavaScript kullanacağız */
    
    /* Padding'leri mobilde azalt */
    .p-8 {
        padding: 1rem !important;
    }
    
    .px-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .py-8 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    .mb-8 {
        margin-bottom: 1rem !important;
    }
    
    /* Grid'leri mobilde tek sütun yap */
    .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Flex container'ları mobilde column yap */
    .flex-row {
        flex-direction: column !important;
    }
    
    /* Tüm max-width değerlerini kaldır */
    [class*="max-w"] {
        max-width: 100% !important;
    }
    
    /* Tecrübe Bilgileri sekmesindeki tablolar için mobil görünürlük */
    .tab-content2 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .tab-content2.hidden {
        display: none !important;
    }
    
    .tab-content2:not(.hidden) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Tecrübe Bilgileri sekmesindeki tabloların görünürlüğü */
    #exp-content-14 table,
    #content-15 table,
    #content-16 table,
    #content-17 table,
    #content-18 table,
    #content-19 table,
    #content-20 table {
        display: table !important;
        width: 100% !important;
        table-layout: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #exp-content-14 thead,
    #content-15 thead,
    #content-16 thead,
    #content-17 thead,
    #content-18 thead,
    #content-19 thead,
    #content-20 thead {
        display: table-header-group !important;
        visibility: visible !important;
    }
    
    #exp-content-14 tbody,
    #content-15 tbody,
    #content-16 tbody,
    #content-17 tbody,
    #content-18 tbody,
    #content-19 tbody,
    #content-20 tbody {
        display: table-row-group !important;
        visibility: visible !important;
    }
    
    #exp-content-14 tr,
    #content-15 tr,
    #content-16 tr,
    #content-17 tr,
    #content-18 tr,
    #content-19 tr,
    #content-20 tr {
        display: table-row !important;
        visibility: visible !important;
    }
    
    #exp-content-14 td,
    #exp-content-14 th,
    #content-15 td,
    #content-15 th,
    #content-16 td,
    #content-16 th,
    #content-17 td,
    #content-17 th,
    #content-18 td,
    #content-18 th,
    #content-19 td,
    #content-19 th,
    #content-20 td,
    #content-20 th {
        display: table-cell !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Tablo içeriğinin görünürlüğü */
    #exp-content-14 .overflow-x-auto,
    #content-15 .overflow-x-auto,
    #content-16 .overflow-x-auto,
    #content-17 .overflow-x-auto,
    #content-18 .overflow-x-auto,
    #content-19 .overflow-x-auto,
    #content-20 .overflow-x-auto {
        display: block !important;
        overflow-x: auto !important;
        width: 100% !important;
        visibility: visible !important;
    }
    
    /* Masraf Talep Takibi ve Avans Talep Takibi tab içeriklerinin görünürlüğü */
    #content-19,
    #content-20 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #content-19.hidden,
    #content-20.hidden {
        display: none !important;
    }
    
    #content-19:not(.hidden),
    #content-20:not(.hidden) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* İş Avansı Raporları tablosu mobil görünümde görünür olmalı */
    #avansRaporlariTable,
    #avansRaporlariTable thead,
    #avansRaporlariTable tbody,
    #avansRaporlariTable tr,
    #avansRaporlariTable td,
    #avansRaporlariTable th {
        display: table !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #avansRaporlariTable thead {
        display: table-header-group !important;
    }
    
    #avansRaporlariTable tbody {
        display: table-row-group !important;
    }
    
    #avansRaporlariTable tr {
        display: table-row !important;
    }
    
    #avansRaporlariTable td,
    #avansRaporlariTable th {
        display: table-cell !important;
    }
    
    /* Filtreleme alanları mobil görünümde görünür olmalı */
    #filter-personel,
    #filter-departman,
    #filter-avans,
    #filter-masraf,
    #filter-sonuc {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }
    
    /* Filtre container'ı mobil görünümde görünür olmalı */
    .bg-gray-100.p-2.mb-2.rounded-t-lg {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Tablo container'ı mobil görünümde görünür olmalı */
    .overflow-x-auto {
        display: block !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        visibility: visible !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* İş Avansı Raporları tablosu için özel yatay scroll ayarları */
    #avansRaporlariTable {
        min-width: 900px !important;
        width: auto !important;
        table-layout: auto !important;
        display: table !important;
        visibility: visible !important;
    }
    
    /* Filtre satırı mobil görünümde yatay scroll yapabilmeli */
    .bg-gray-100.p-2.mb-2.rounded-t-lg {
        min-width: 900px !important;
        width: auto !important;
    }
    
    .bg-gray-100.p-2.mb-2.rounded-t-lg .grid {
        min-width: 900px !important;
        width: auto !important;
    }
    
    /* Personel Avans-Masraf Detayları tablosu için scroll container */
    .scrollable-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Avans Süreç Takibi tablosu mobil görünümde yatay scroll */
    #avansTable {
        min-width: 1200px !important;
        width: auto !important;
        table-layout: auto !important;
        display: table !important;
        visibility: visible !important;
    }
    
    #avansTable_wrapper,
    .scrollable-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Filtreleme formu ile tablo arasındaki tüm elementleri gizle */
    form[method="get"] + div:not(.scrollable-container),
    form[method="get"] + *:not(table):not(.scrollable-container):not(#avansTable_wrapper) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* DataTables wrapper'ın üstündeki tüm elementleri gizle */
    #avansTable_wrapper::before,
    #avansTable_wrapper > div:first-child:not(.dataTables_scroll):not(table):not(.overflow-x-auto) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Scrollable container'ın üstündeki tüm elementleri gizle */
    .scrollable-container::before,
    .scrollable-container > div:first-child:not(table) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* DataTables'ın eklediği tüm üst wrapper'ları gizle */
    #avansTable_wrapper > .dataTables_length,
    #avansTable_wrapper > .dataTables_filter,
    #avansTable_wrapper > .dataTables_info {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Avans Raporları sayfası - Filtreleme formunun üstündeki tüm bölümleri gizle */
    /* Başlık bölümü */
    div.bg-white.sm\\:p-8.p-4.rounded-l-xxl.rounded-r-2xl.mb-6:has(h2.text-2xl),
    div.hidden.md\\:block.bg-white,
    div:has(> div > h2.text-2xl.font-semibold.text-darkblue) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    /* Özet İstatistikler */
    div.hidden.md\\:grid.grid-cols-1.md\\:grid-cols-4,
    div.grid.grid-cols-1.md\\:grid-cols-4.gap-4.mb-6:has(.text-2xl.font-bold.text-blue-600),
    div.grid.grid-cols-1.md\\:grid-cols-4.gap-4.mb-6:has(.text-2xl.font-bold.text-green-600) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    /* Durum Özeti */
    div.hidden.md\\:grid.grid-cols-1.md\\:grid-cols-3,
    div.grid.grid-cols-1.md\\:grid-cols-3.gap-4.mb-6:has(.text-xl.font-bold.text-red-600),
    div.grid.grid-cols-1.md\\:grid-cols-3.gap-4.mb-6:has(.text-xl.font-bold.text-green-600) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    /* hidden class'ını override et - mobilde kesinlikle gizle */
    .hidden.md\\:block,
    .hidden.md\\:grid,
    .hidden.md\\:flex {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    /* Avans Raporları sayfasındaki başlık ve özet bölümlerini mobilde gizle */
    div.bg-white.sm\\:p-8.p-4.rounded-l-xxl.rounded-r-2xl.mb-6:not(:has(table)):not(:has(.scrollable-container)),
    div.grid.gap-4.mb-6:not(:has(table)):not(:has(.scrollable-container)) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    /* Personel Avans-Masraf Detayları başlığı ve tarih filtreleme formunu mobilde gizle */
    div.flex.flex-col.md\\:flex-row.md\\:items-center.md\\:justify-between.mb-4.gap-4,
    div:has(h3.text-xl.font-semibold.text-darkblue:contains("Personel Avans-Masraf Detayları")) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    /* Avans Raporları sayfası - Tablo container'ını kesinlikle görünür yap */
    /* Tablo container'ının parent'ını görünür yap - daha spesifik selector ve taşmayı önle */
    div.bg-white.sm\\:p-8.p-4.rounded-l-xxl.rounded-r-2xl.shadow-sm {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 200px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    
    /* Scrollable container görünür olmalı ve taşmayı önlemeli */
    .scrollable-container {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 200px !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
    
    /* DataTables wrapper görünür olmalı */
    #avansRaporlariTable_wrapper {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        opacity: 1 !important;
        width: 100% !important;
    }
    
    /* Tablo görünür olmalı */
    table#avansRaporlariTable {
        display: table !important;
        visibility: visible !important;
        height: auto !important;
        opacity: 1 !important;
        width: 100% !important;
        min-width: 900px !important;
    }
    
    /* Filtreleme formu görünür olmalı ve tablo ile aynı genişlikte */
    .bg-gray-100.p-2.mb-2.rounded-t-lg {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        opacity: 1 !important;
        width: 100% !important;
        min-width: 900px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Filtre formu içindeki grid */
    .bg-gray-100.p-2.mb-2.rounded-t-lg .grid {
        min-width: 900px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Filtre input'ları */
    #filter-personel,
    #filter-departman,
    #filter-avans,
    #filter-masraf,
    #filter-sonuc {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* "Personel Avans-Masraf Detayları" başlığı ve tarih filtreleme formunu mobilde gizle */
    /* hidden md:flex class'ı zaten Tailwind tarafından mobilde gizliyor, ama ekstra güvenlik için */
    div.bg-white.sm\\:p-8.p-4.rounded-l-xxl.rounded-r-2xl.shadow-sm > div.hidden.md\\:flex {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }
    
    /* Filtreleme formu (bg-gray-100) ile tablo arasındaki tüm elementleri gizle (Avans Raporları sayfası için) */
    .bg-gray-100.p-2.mb-2.rounded-t-lg + *:not(table):not(.scrollable-container),
    .bg-gray-100.p-2.mb-2.rounded-t-lg ~ *:not(table):not(.scrollable-container):not(#avansRaporlariTable_wrapper) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }
    
    /* Scrollable container içindeki fazladan div'leri gizle (filtre formu ve tablo hariç) */
    .scrollable-container > *:not(.bg-gray-100):not(table):not(#avansRaporlariTable_wrapper):not(.dataTables_scroll) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }
    
    /* DataTables'ın eklediği fazladan wrapper'ları gizle (Avans Raporları sayfası için) */
    #avansRaporlariTable_wrapper > *:first-child:not(.dataTables_scroll):not(.bg-gray-100):not(table),
    #avansRaporlariTable_wrapper > *:not(.dataTables_scroll):not(.bg-gray-100):not(.dataTables_scrollHead):not(.dataTables_scrollBody):not(table) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    #avansTable thead,
    #avansTable tbody,
    #avansTable tr,
    #avansTable td,
    #avansTable th {
        display: table !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #avansTable thead {
        display: table-header-group !important;
    }
    
    #avansTable tbody {
        display: table-row-group !important;
    }
    
    #avansTable tr {
        display: table-row !important;
    }
    
    #avansTable td,
    #avansTable th {
        display: table-cell !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    /* DataTables wrapper mobil görünümde görünür olmalı */
    .dataTables_wrapper {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
    }
    
    .dataTables_wrapper .dataTables_scroll {
        display: block !important;
        visibility: visible !important;
    }
    
    .dataTables_wrapper .dataTables_scrollHead,
    .dataTables_wrapper .dataTables_scrollBody {
        display: block !important;
        visibility: visible !important;
    }
    
    .dataTables_wrapper table {
        display: table !important;
        visibility: visible !important;
        width: 100% !important;
    }
    
    .dataTables_wrapper table thead {
        display: table-header-group !important;
        visibility: visible !important;
    }
    
    .dataTables_wrapper table tbody {
        display: table-row-group !important;
        visibility: visible !important;
    }
    
    .dataTables_wrapper table tbody tr {
        display: table-row !important;
        visibility: visible !important;
    }
    
    .dataTables_wrapper table tbody tr td {
        display: table-cell !important;
        visibility: visible !important;
    }
    
    /* DataTables bilgi bloklarını mobilde tamamen gizle (Avans Takip sayfası için) */
    #avansTable_wrapper .dataTables_length,
    #avansTable_wrapper .dataTables_info,
    #avansTable_wrapper .dataTables_filter,
    #avansTable_wrapper .dataTables_paginate,
    #avansTable_wrapper > .dataTables_length,
    #avansTable_wrapper > .dataTables_info,
    #avansTable_wrapper > .dataTables_filter,
    #avansTable_wrapper > .dataTables_paginate,
    .dataTables_length,
    .dataTables_info,
    .dataTables_filter,
    .dataTables_paginate {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    /* DataTables wrapper'ın üst ve alt boşluklarını kaldır */
    #avansTable_wrapper {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    #avansTable_wrapper .dataTables_wrapper {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* DataTables wrapper'ın içindeki tüm üst elementleri gizle */
    #avansTable_wrapper > *:first-child:not(table):not(.dataTables_scroll) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}
    
    /* DataTables wrapper mobil görünümde görünür olmalı */
    .dataTables_wrapper {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
    }
    
    .dataTables_wrapper .dataTables_scroll {
        display: block !important;
        visibility: visible !important;
    }
    
    .dataTables_wrapper .dataTables_scrollHead,
    .dataTables_wrapper .dataTables_scrollBody {
        display: block !important;
        visibility: visible !important;
    }
    
    /* DataTables tablo içeriği mobil görünümde görünür olmalı */
    .dataTables_wrapper table {
        display: table !important;
        visibility: visible !important;
        width: 100% !important;
    }
    
    .dataTables_wrapper table thead {
        display: table-header-group !important;
        visibility: visible !important;
    }
    
    .dataTables_wrapper table tbody {
        display: table-row-group !important;
        visibility: visible !important;
    }
    
    .dataTables_wrapper table tbody tr {
        display: table-row !important;
        visibility: visible !important;
    }
    
    .dataTables_wrapper table tbody tr td {
        display: table-cell !important;
        visibility: visible !important;
    }
}