/* ═══════════════════════════════════════════════════════════════
   İşlemler sütunu (.fixel) — month.php, users.php, products.php vb.
   Masaüstü: leads gibi en sağda, sağa yaslı (table-cell + text-align)
   ═══════════════════════════════════════════════════════════════ */
.fixel,
#datatable.dataTable tbody td.fixel,
table.dataTable tbody td.fixel,
table.table-centered.dataTable tbody td.fixel,
table.table-centered tbody td.fixel {
    display: table-cell !important;
    white-space: nowrap !important;
    width: 1% !important;
    vertical-align: middle !important;
    text-align: right !important;
}

#datatable.dataTable thead th:last-child,
#datatable.dataTable thead th.fixel,
table.dataTable thead th:last-child,
table.dataTable thead th.fixel,
table.table-centered.dataTable thead th:last-child {
    text-align: right !important;
    width: 1% !important;
    white-space: nowrap !important;
}

/* Buton grubu — hücre içinde sağa yaslı inline flex */
#datatable.dataTable tbody td.fixel .leads-actions-cell,
#datatable.dataTable tbody td.fixel .crm-actions-cell,
table.dataTable tbody td.fixel .leads-actions-cell,
table.dataTable tbody td.fixel .crm-actions-cell,
table.table-centered tbody td.fixel .crm-actions-cell {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    width: auto !important;
    max-width: 100% !important;
    vertical-align: middle !important;
    text-align: right !important;
}

#datatable.dataTable tbody td.fixel > a,
#datatable.dataTable tbody td.fixel > form,
#datatable.dataTable tbody td.fixel > .dropdown,
#datatable.dataTable tbody td.fixel .leads-actions-cell > *,
#datatable.dataTable tbody td.fixel .crm-actions-cell > *,
table.dataTable tbody td.fixel > a,
table.dataTable tbody td.fixel > form,
table.dataTable tbody td.fixel > .dropdown,
#datatable.dataTable tbody td.fixel .dropdown,
#datatable.dataTable tbody td.fixel form,
table.dataTable tbody td.fixel .dropdown,
table.dataTable tbody td.fixel form {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    vertical-align: middle !important;
}

#datatable.dataTable tbody td.fixel .btn,
#datatable.dataTable tbody td.fixel a.btn,
#datatable.dataTable tbody td.fixel button.btn,
table.dataTable tbody td.fixel .btn,
table.dataTable tbody td.fixel a.btn,
table.dataTable tbody td.fixel button.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 42px !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

#datatable.dataTable tbody td.fixel .dropdown .btn,
table.dataTable tbody td.fixel .dropdown .btn {
    width: auto !important;
}

/* Masaüstü: responsive detay satırında da sağa yasla */
@media (min-width: 768px) {
    ul.dtr-details li .dtr-data:has(.btn),
    ul.dtr-details li .dtr-data:has(form) {
        text-align: right !important;
    }

    ul.dtr-details li .dtr-data:has(.btn) .crm-actions-cell,
    ul.dtr-details li .dtr-data:has(.btn) .leads-actions-cell {
        display: inline-flex !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        width: auto !important;
    }
}

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

.conversation-list .odd .chat-avatar {
    margin-left: 12px;
    margin-right: 0;
}

.conversation-list .conversation-text {
    max-width: calc(100% - 64px);
}

@media (max-width: 575.98px) {
    .conversation-list .chat-avatar {
        margin-right: 8px;
        width: 36px;
    }

    .conversation-list .odd .chat-avatar {
        margin-left: 8px;
        margin-right: 0;
    }

    .conversation-list .conversation-text {
        margin-left: 8px;
        margin-right: 8px;
        width: calc(100% - 52px);
        max-width: calc(100% - 52px);
    }

    .conversation-list .odd .conversation-text {
        margin-left: 8px;
        margin-right: 8px;
        width: calc(100% - 52px);
        max-width: calc(100% - 52px);
    }
}

/* Mobil Görünüm (Modern Dikey Akış - Kart Görünümü) — leads + admin CRUD */
@media (max-width: 767px) {
    /* 1. Tabloyu kart moduna al */
    .leads-page #datatable.dataTable,
    .crm-datatable-page #datatable.dataTable {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border: none !important;
        margin: 0 !important;
        table-layout: fixed !important;
        word-wrap: break-word !important;
    }

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

    .leads-page #datatable.dataTable thead,
    .crm-datatable-page #datatable.dataTable thead {
        display: none !important;
    }

    /* 2. Kart yapısı */
    .leads-page #datatable.dataTable tbody,
    .crm-datatable-page #datatable.dataTable tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 0.25rem 0 1rem !important;
    }

    .leads-page #datatable.dataTable tbody tr,
    .crm-datatable-page #datatable.dataTable tbody tr {
        margin-bottom: 0 !important;
        padding: 15px !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
        overflow: hidden !important;
        flex: 0 0 auto;
    }

    .leads-page .form-label,
    .crm-datatable-page .form-label {
        margin-top: 0.5rem;
    }

    /* 3. İçerik hücreleri */
    .leads-page #datatable.dataTable tbody td:not(.fixel),
    .crm-datatable-page #datatable.dataTable tbody td:not(.fixel) {
        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;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    /* 4. Başlıklar (data-label) */
    .leads-page #datatable.dataTable tbody td:before,
    .crm-datatable-page #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;
        background: transparent !important;
    }

    .leads-page .card-body > h4.header-title::before,
    .leads-page .card-body > .row.align-items-center p::before,
    .leads-page .card-body > h4.header-title::after,
    .leads-page .card-body > .row.align-items-center p::after,
    .crm-datatable-page .card-body > h4.header-title::before,
    .crm-datatable-page .card-body > p.text-muted::before,
    .crm-datatable-page .card-body > .d-flex p::before,
    .crm-datatable-page .card-body > h4.header-title::after,
    .crm-datatable-page .card-body > p.text-muted::after,
    .crm-datatable-page .card-body > .d-flex p::after {
        content: none !important;
        display: none !important;
    }

    /* 5. Veri alanı — inline renk (Renk sütunu vb.) korunur */
    .leads-page #datatable.dataTable tbody td:not(.fixel) .dtr-data,
    .leads-page #datatable.dataTable tbody td:not(.fixel) div:not(.leads-actions-cell):not(.crm-actions-cell):not(.dropdown),
    .crm-datatable-page #datatable.dataTable tbody td:not(.fixel) .dtr-data,
    .crm-datatable-page #datatable.dataTable tbody td:not(.fixel) div:not(.leads-actions-cell):not(.crm-actions-cell):not(.dropdown) {
        display: block !important;
        width: 100% !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
    }

    .leads-page #datatable.dataTable tbody td:not(.fixel) span:not(.btn):not([style*="color:"]),
    .crm-datatable-page #datatable.dataTable tbody td:not(.fixel) span:not(.btn):not([style*="color:"]) {
        display: inline-block !important;
        width: auto !important;
        max-width: 100% !important;
        color: #cfd4d9 !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
    }

    .leads-page #datatable.dataTable tbody td:not(.fixel) span[style*="color:"],
    .crm-datatable-page #datatable.dataTable tbody td:not(.fixel) span[style*="color:"] {
        display: inline-block !important;
        width: auto !important;
        max-width: 100% !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
        /* color: inline style’dan gelir — !important ile ezilmez */
    }

    /* 6. İşlemler — mobil: etiket + 2 sütun buton grid */
    .leads-page #datatable.dataTable tbody td.fixel,
    .leads-page #datatable.leads-datatable.dataTable tbody td.fixel,
    .crm-datatable-page #datatable.dataTable tbody td.fixel {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        border-bottom: none !important;
        padding: 12px 0 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-align: left !important;
    }

    .leads-page #datatable.dataTable tbody td.fixel:before,
    .leads-page #datatable.leads-datatable.dataTable tbody td.fixel:before,
    .crm-datatable-page #datatable.dataTable tbody td.fixel:before {
        display: block !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    .leads-page #datatable.dataTable tbody td.fixel .leads-actions-cell,
    .leads-page #datatable.leads-datatable.dataTable tbody td.fixel .leads-actions-cell,
    .crm-datatable-page #datatable.dataTable tbody td.fixel .crm-actions-cell,
    .crm-datatable-page #datatable.dataTable tbody td.fixel .leads-actions-cell {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        padding-bottom: 0;
    }

    .leads-page #datatable.dataTable tbody td.fixel .leads-actions-cell > *,
    .leads-page #datatable.leads-datatable.dataTable tbody td.fixel .leads-actions-cell > *,
    .crm-datatable-page #datatable.dataTable tbody td.fixel .crm-actions-cell > *,
    .crm-datatable-page #datatable.dataTable tbody td.fixel .leads-actions-cell > * {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }

    .leads-page #datatable.dataTable tbody td.fixel .leads-actions-cell .dropdown,
    .leads-page #datatable.dataTable tbody td.fixel .leads-actions-cell form,
    .leads-page #datatable.leads-datatable.dataTable tbody td.fixel .leads-actions-cell .dropdown,
    .leads-page #datatable.leads-datatable.dataTable tbody td.fixel .leads-actions-cell form,
    .crm-datatable-page #datatable.dataTable tbody td.fixel .crm-actions-cell .dropdown,
    .crm-datatable-page #datatable.dataTable tbody td.fixel .crm-actions-cell form,
    .crm-datatable-page #datatable.dataTable tbody td.fixel .leads-actions-cell .dropdown,
    .crm-datatable-page #datatable.dataTable tbody td.fixel .leads-actions-cell form {
        display: flex !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .leads-page #datatable.dataTable tbody td.fixel .leads-actions-cell .btn,
    .leads-page #datatable.dataTable tbody td.fixel .leads-actions-cell a.btn,
    .leads-page #datatable.dataTable tbody td.fixel .leads-actions-cell button.btn,
    .leads-page #datatable.leads-datatable.dataTable tbody td.fixel .leads-actions-cell .btn,
    .leads-page #datatable.leads-datatable.dataTable tbody td.fixel .leads-actions-cell a.btn,
    .leads-page #datatable.leads-datatable.dataTable tbody td.fixel .leads-actions-cell button.btn,
    .crm-datatable-page #datatable.dataTable tbody td.fixel .crm-actions-cell .btn,
    .crm-datatable-page #datatable.dataTable tbody td.fixel .crm-actions-cell a.btn,
    .crm-datatable-page #datatable.dataTable tbody td.fixel .crm-actions-cell button.btn,
    .crm-datatable-page #datatable.dataTable tbody td.fixel .leads-actions-cell .btn,
    .crm-datatable-page #datatable.dataTable tbody td.fixel .leads-actions-cell a.btn,
    .crm-datatable-page #datatable.dataTable tbody td.fixel .leads-actions-cell button.btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 8px !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        border-radius: 5px !important;
        white-space: nowrap !important;
    }

    .leads-page #datatable.dataTable tbody td.fixel .leads-actions-cell .dropdown .btn,
    .crm-datatable-page #datatable.dataTable tbody td.fixel .crm-actions-cell .dropdown .btn {
        width: 100% !important;
    }

    .leads-page #datatable.dataTable tbody td.fixel .leads-actions-cell form,
    .crm-datatable-page #datatable.dataTable tbody td.fixel .crm-actions-cell form {
        width: 100% !important;
    }

    /* Responsive child satırlarını gizle (kart modu) */
    .leads-page #datatable.dataTable tbody tr.child,
    .leads-page #datatable.dataTable tbody tr.dtr-expanded,
    .crm-datatable-page #datatable.dataTable tbody tr.child,
    .crm-datatable-page #datatable.dataTable tbody tr.dtr-expanded {
        display: none !important;
    }

    .leads-page #datatable.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
    .leads-page #datatable.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
    .crm-datatable-page #datatable.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
    .crm-datatable-page #datatable.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
        display: none !important;
    }

    ul.dtr-details li .leads-actions-cell,
    ul.dtr-details li .crm-actions-cell {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }

    ul.dtr-details li .leads-actions-cell > *,
    ul.dtr-details li .crm-actions-cell > * {
        width: 100% !important;
    }

    ul.dtr-details li .leads-actions-cell .btn,
    ul.dtr-details li .leads-actions-cell a.btn,
    ul.dtr-details li .leads-actions-cell button.btn,
    ul.dtr-details li .leads-actions-cell .dropdown,
    ul.dtr-details li .leads-actions-cell form,
    ul.dtr-details li .crm-actions-cell .btn,
    ul.dtr-details li .crm-actions-cell a.btn,
    ul.dtr-details li .crm-actions-cell button.btn,
    ul.dtr-details li .crm-actions-cell .dropdown,
    ul.dtr-details li .crm-actions-cell form {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .leads-page .leads-table-wrap,
    .leads-page .leads-list-card-body,
    .leads-table-wrap,
    .crm-datatable-page .crm-table-wrap,
    .crm-datatable-page .card-body {
        overflow: visible !important;
        max-height: none !important;
    }

    .leads-page .leads-filters-panel {
        position: static !important;
    }

    /* Admin CRUD — leads ile aynı DataTables üst/alt çubuğu */
    .crm-datatable-page .dataTables_wrapper .row:first-child {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .crm-datatable-page .dataTables_wrapper .row:first-child > div {
        width: auto !important;
        flex: 0 0 auto;
        padding: 0;
    }

    .crm-datatable-page div.dataTables_wrapper div.dataTables_length {
        text-align: left !important;
        margin-top: 0 !important;
    }

    .crm-datatable-page div.dataTables_wrapper div.dataTables_filter {
        text-align: right !important;
        margin-top: 0 !important;
    }

    .crm-datatable-page div.dataTables_wrapper div.dataTables_length label,
    .crm-datatable-page div.dataTables_wrapper div.dataTables_filter label {
        font-size: 0 !important;
    }

    .crm-datatable-page div.dataTables_wrapper div.dataTables_length select {
        font-size: 14px !important;
        margin: 0 !important;
        padding: 0.25rem 2rem 0.25rem 0.5rem;
        display: inline-block;
    }

    .crm-datatable-page div.dataTables_wrapper div.dataTables_filter input {
        font-size: 14px !important;
        margin: 0 !important;
        width: 140px !important;
        display: inline-block;
    }

    .crm-datatable-page div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        justify-content: center !important;
        flex-wrap: wrap;
        margin-top: 15px;
    }

    .crm-datatable-page div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-link {
        padding: 0.25rem 0.6rem !important;
        font-size: 13px !important;
        border-radius: 4px !important;
    }

    .crm-datatable-page div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item {
        margin: 0 4px !important;
    }

    .crm-datatable-page .dataTables_wrapper {
        overflow: visible !important;
        margin-top: 0.5rem;
    }

    .crm-datatable-page .dataTables_wrapper .dataTables_scroll,
    .crm-datatable-page .dataTables_wrapper .dataTables_scrollHead,
    .crm-datatable-page .dataTables_wrapper .dataTables_scrollBody {
        overflow: visible !important;
        overflow-x: visible !important;
        max-height: none !important;
    }

    .crm-datatable-page #datatable.table-responsive,
    .crm-datatable-page .table-responsive {
        overflow-x: visible !important;
        overflow-y: visible !important;
        max-height: none !important;
    }

    .crm-datatable-page .card,
    .crm-datatable-page .card-body,
    .crm-datatable-page .row,
    .crm-datatable-page [class*="col-"] {
        position: static !important;
        overflow: visible !important;
        max-height: 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 — filter-buttons detayı analytics-pages.css */
@media (max-width: 768px) {
    .filter-buttons .badge {
        display: block !important;
        width: 100% !important;
        text-align: center;
        padding: 10px !important;
        font-size: 13px;
        white-space: normal;
    }
}

/* Live chat and inbox mobile layout fixes */
.row.mobile-chat-active,
.row.mobile-chat-inactive {
    align-items: stretch !important;
}

.row.mobile-chat-active > .contact-list-column,
.row.mobile-chat-active > .chat-view-column,
.row.mobile-chat-inactive > .contact-list-column,
.row.mobile-chat-inactive > .chat-view-column {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

.row.mobile-chat-active .chat-list-card,
.row.mobile-chat-active .conversation-list-card,
.row.mobile-chat-inactive .chat-list-card,
.row.mobile-chat-inactive .conversation-list-card {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.row.mobile-chat-active .chat-list-card > .card-body,
.row.mobile-chat-active .conversation-list-card > .card-body,
.row.mobile-chat-inactive .chat-list-card > .card-body,
.row.mobile-chat-inactive .conversation-list-card > .card-body {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.row.mobile-chat-active .chat-list,
.row.mobile-chat-active .conversation-list,
.row.mobile-chat-inactive .chat-list,
.row.mobile-chat-inactive .conversation-list {
    flex: 1 1 auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

.row.mobile-chat-active .conversation-list-card > .border-top,
.row.mobile-chat-inactive .conversation-list-card > .border-top {
    flex-shrink: 0 !important;
}

@media (min-width: 992px) {
    .row.mobile-chat-active,
    .row.mobile-chat-inactive {
        min-height: calc(100vh - 170px) !important;
    }

    .row.mobile-chat-active .chat-list-card,
    .row.mobile-chat-active .conversation-list-card,
    .row.mobile-chat-inactive .chat-list-card,
    .row.mobile-chat-inactive .conversation-list-card {
        height: calc(100vh - 170px) !important;
    }
}

@media (max-width: 991.98px) {
    html,
    body,
    .content-page,
    .content,
    .container-fluid {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .row.mobile-chat-active,
    .row.mobile-chat-inactive {
        --bs-gutter-x: 0 !important;
        --ct-gutter-x: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        min-height: calc(100dvh - 150px) !important;
    }

    .row.mobile-chat-active > .contact-list-column,
    .row.mobile-chat-active > .chat-view-column,
    .row.mobile-chat-inactive > .contact-list-column,
    .row.mobile-chat-inactive > .chat-view-column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .row.mobile-chat-active .contact-list-column {
        display: none !important;
    }

    .row.mobile-chat-inactive .chat-view-column {
        display: none !important;
    }

    .row.mobile-chat-active .chat-list-card,
    .row.mobile-chat-active .conversation-list-card,
    .row.mobile-chat-inactive .chat-list-card,
    .row.mobile-chat-inactive .conversation-list-card {
        height: calc(100dvh - 150px) !important;
        max-height: calc(100dvh - 150px) !important;
        width: 100% !important;
    }

    .row.mobile-chat-active .conversation-list-card > .border-top,
    .row.mobile-chat-inactive .conversation-list-card > .border-top {
        padding: .75rem !important;
    }

    .row.mobile-chat-active .chat-list-card > .card-body,
    .row.mobile-chat-inactive .chat-list-card > .card-body,
    .row.mobile-chat-active .conversation-list-card > .card-body,
    .row.mobile-chat-inactive .conversation-list-card > .card-body {
        padding: 1rem !important;
    }

    .row.mobile-chat-active .chat-list-card .card-body > .d-flex:first-child,
    .row.mobile-chat-inactive .chat-list-card .card-body > .d-flex:first-child,
    .row.mobile-chat-active .conversation-list-card .card-body > .d-flex:first-child,
    .row.mobile-chat-inactive .conversation-list-card .card-body > .d-flex:first-child,
    .row.mobile-chat-active .chat-search-box,
    .row.mobile-chat-inactive .chat-search-box,
    .row.mobile-chat-active .card-body > hr,
    .row.mobile-chat-inactive .card-body > hr {
        flex: 0 0 auto !important;
        min-height: 0 !important;
    }

    .row.mobile-chat-active .chat-list-card .card-body > .d-flex:first-child,
    .row.mobile-chat-inactive .chat-list-card .card-body > .d-flex:first-child {
        gap: .5rem !important;
        min-width: 0 !important;
    }

    .row.mobile-chat-active .chat-list-card .card-body > .d-flex:first-child h5,
    .row.mobile-chat-inactive .chat-list-card .card-body > .d-flex:first-child h5 {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .row.mobile-chat-active .chat-list-card .card-body > .d-flex:first-child .btn,
    .row.mobile-chat-inactive .chat-list-card .card-body > .d-flex:first-child .btn {
        flex: 0 1 auto !important;
        max-width: 52% !important;
        overflow: hidden !important;
        padding-left: .65rem !important;
        padding-right: .65rem !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .row.mobile-chat-active .conversation-text,
    .row.mobile-chat-inactive .conversation-text {
        max-width: calc(100vw - 96px) !important;
        min-width: 0 !important;
    }

    .row.mobile-chat-active .ctext-wrap,
    .row.mobile-chat-inactive .ctext-wrap {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .row.mobile-chat-active textarea,
    .row.mobile-chat-inactive textarea {
        min-height: 44px !important;
    }
}

@media (max-width: 991.98px) {
    html,
    body,
    .content-page,
    .content,
    .container-fluid {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    #main-layout-row.mobile-email-active,
    #main-layout-row.mobile-email-inactive {
        --bs-gutter-x: 0 !important;
        --ct-gutter-x: 0 !important;
        align-items: stretch !important;
        flex-wrap: wrap !important;
        height: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        min-height: calc(100dvh - 150px) !important;
    }

    #main-layout-row.mobile-email-active > [class*="col-"],
    #main-layout-row.mobile-email-inactive > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    #main-layout-row.mobile-email-active .email-list-column {
        display: none !important;
    }

    #main-layout-row.mobile-email-inactive .email-view-column {
        display: none !important;
    }

    #main-layout-row .email-list-column .card {
        height: auto !important;
        margin-bottom: 1rem !important;
        min-height: 0 !important;
    }

    #main-layout-row .email-view-column .card {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100dvh - 150px) !important;
        max-height: calc(100dvh - 150px) !important;
        min-height: 360px !important;
        overflow: hidden !important;
    }

    #main-layout-row .email-view-column .card > .card-body {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #main-layout-row .email-view-column .table-responsive {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }

    #main-layout-row .email-view-column .card-body > .d-flex:first-child {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: .5rem !important;
    }

    #main-layout-row .email-view-column .card-body > .d-flex:first-child > .w-50 {
        width: 100% !important;
    }

    #main-layout-row .table-mail-list td {
        white-space: normal !important;
    }

    .mail-read-offcanvas {
        width: 100% !important;
    }
}

@supports not (height: 100dvh) {
    @media (max-width: 991.98px) {
        .row.mobile-chat-active,
        .row.mobile-chat-inactive,
        #main-layout-row.mobile-email-active,
        #main-layout-row.mobile-email-inactive {
            min-height: calc(100vh - 150px) !important;
        }

        .row.mobile-chat-active .chat-list-card,
        .row.mobile-chat-active .conversation-list-card,
        .row.mobile-chat-inactive .chat-list-card,
        .row.mobile-chat-inactive .conversation-list-card,
        #main-layout-row .email-view-column .card {
            height: calc(100vh - 150px) !important;
            max-height: calc(100vh - 150px) !important;
        }
    }
}