/* Masaüstü Genel Ayarlar */
.fixel {
    width: 1px;
}

.conversation-list .chat-avatar {
    margin-right: 25px;
	width: 40px;
}

/* Mobil Görünüm (Modern Dikey Akış - Kart Görünümü) */
@media (max-width: 767px) {
    /* 1. Tabloyu ve hücreleri tamamen serbest bırak ve genişliği sabitle */
    #datatable.dataTable {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border: none !important;
        margin: 0 !important;
        /* Taşmayı temelden engelle */
        table-layout: fixed !important; 
        word-wrap: break-word !important;
    }

    #datatable.dataTable tbody, 
    #datatable.dataTable tr, 
    #datatable.dataTable td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #datatable.dataTable thead {
        display: none !important;
    }

    /* 2. Kart Yapısı */
    #datatable.dataTable tbody tr {
        margin-bottom: 25px !important;
        padding: 15px !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
        /* Kartın dışına hiçbir şeyin taşmasına izin verme */
        overflow: hidden !important; 
    }

.form-label
{
margin-top: .5rem;
}
    /* 3. İçerik Hücreleri ve Yazı Kaydırma Ayarları */
    #datatable.dataTable tbody td {
        display: block !important;
        text-align: left !important;
        padding: 12px 0 !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        
        /* KRİTİK: Yazıları alt satıra zorlayan ayarlar */
        white-space: normal !important;      /* Nowrap özelliğini iptal eder */
        word-break: break-word !important;   /* Kelimeyi uygun yerden böler */
        overflow-wrap: anywhere !important;  /* Çok uzun bitişik metinleri (URL vb.) böler */
    }

    /* 4. Başlıklar (data-label) */
    #datatable.dataTable tbody td:before {
        content: attr(data-label);
        display: block !important;
        width: 100% !important;
        font-weight: 600 !important;
        color: #3bafda !important;
        font-size: 0.75rem !important;
        text-transform: uppercase !important;
        margin-bottom: 5px !important;
        letter-spacing: 0.5px;
    }

    /* 5. Veri Alanı (Yazı Taşmasını Engelleme) */
    #datatable.dataTable tbody td .dtr-data,
    #datatable.dataTable tbody td span:not(.btn),
    #datatable.dataTable tbody td div {
        display: block !important;
        width: 100% !important;
        color: #cfd4d9 !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
        
        /* Taşmayı engelleyen yedek komutlar */
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
    }

    /* 6. BUTONLARI YAN YANA GETİREN GRID YAPISI */
    #datatable.dataTable tbody td.fixel {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        border-bottom: none !important;
        padding-top: 15px !important;
    }

    #datatable.dataTable tbody td.fixel:before {
        grid-column: 1 / span 2 !important;
        margin-bottom: 8px !important;
    }

    #datatable.dataTable tbody td.fixel > div,
    #datatable.dataTable tbody td.fixel > span {
        display: contents !important;
    }

    #datatable.dataTable tbody td.fixel .btn, 
    #datatable.dataTable tbody td.fixel a, 
    #datatable.dataTable tbody td.fixel button {
        width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 5px !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        border-radius: 5px !important;
        /* Buton metinleri çok uzunsa kesilmesin */
        white-space: normal !important;
        text-align: center;
    }

    /* DataTables'ın orijinal kontrol butonunu gizle */
    #datatable.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
        display: none !important;
    }
}



/* =========================================
   TÜM SİTE İÇİN GLOBAL SCROLLBAR TASARIMI
   ========================================= */

/* Firefox için tüm elementlere otomatik uygula (Açık tema renklerine eşitlendi) */
* {
    scrollbar-width: thin;
    scrollbar-color: #606876 #313844; /* Çubuk Rengi ve Arka Plan Rengi */
        border-radius: 4px;

}

/* Chrome, Safari, Edge, Opera için */
::-webkit-scrollbar {
    width: 6px;  /* Dikey kaydırma çubuğu kalınlığı */
    height: 6px; /* Yatay kaydırma çubuğu kalınlığı (Özellikle DataTables için harika) */
}

/* Scrollbar'ın arka yolu (Track) */
::-webkit-scrollbar-track {
    background: #313844; /* Uygulamanın genel açık arka planına uygun soft renk */
    border-radius: 4px;
}

/* Scrollbar'ın kendisi (Thumb) */
::-webkit-scrollbar-thumb {
    background: #313844; /* Soft mavi-gri */
    border-radius: 4px;
}

/* Scrollbar'ın üzerine gelindiğinde (Hover) */
::-webkit-scrollbar-thumb:hover {
    background: #606876; /* Daha belirgin bir gri/mavi */
    border-radius: 4px;

}

.form-label
{
margin-top: .5rem;
}


/* Mobil Düzenlemeleri */
@media (max-width: 768px) {
    /* Butonların olduğu sütunu tam genişlik yap */
    .filter-buttons {
        width: 100% !important;
        display: block !important;
        margin-top: 10px; /* Üstteki öğelerle yapışmaması için */
    }

    /* Badge'i tam genişlik yap ve metni ortala */
    .filter-buttons .badge {
        display: block !important;
        width: 100% !important;
        text-align: center;
        padding: 10px !important; /* Daha iyi dokunmatik alan için */
        font-size: 13px;
        white-space: normal; /* Uzun tarihlerde alt satıra geçebilmesi için */
    }
}