/* Shared DataTables structure for admin, accounting, sales and representative panels. */
.dataTables_wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.dataTables_wrapper .dataTables_scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e3e9f0;
    border-radius: 0.75rem;
    background: #fff;
}

.dataTables_wrapper .dataTables_scrollHead {
    width: 100% !important;
    max-width: 100%;
    overflow: hidden !important;
    border-bottom: 1px solid #dbe3ec !important;
}

.dataTables_wrapper .dataTables_scrollBody {
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto !important;
    border: 0 !important;
    scrollbar-width: thin;
    scrollbar-color: #aebbd0 #eef2f6;
}

.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-track {
    background: #eef2f6;
}

.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb {
    border: 2px solid #eef2f6;
    border-radius: 999px;
    background: #aebbd0;
}

.dataTables_wrapper .dataTables_scrollHeadInner {
    min-width: 100%;
}

.dataTables_wrapper .dataTables_scrollHeadInner > table.dataTable,
.dataTables_wrapper .dataTables_scrollBody > table.dataTable {
    min-width: 100% !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
}

table.dataTable {
    max-width: none;
}

table.dataTable th,
table.dataTable td {
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

table.dataTable thead > tr > th,
table.dataTable thead > tr > td {
    min-width: 6rem;
    max-width: 18rem;
    padding-block: 0.75rem !important;
    color: #334155;
    background: #f8fafc;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
    text-align: start;
}

table.dataTable tbody > tr > td,
table.dataTable tbody > tr > th {
    min-width: 6rem;
    max-width: 18rem;
    padding-block: 0.68rem !important;
    color: #334155;
    line-height: 1.45;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: start;
}

.dt-column-label {
    display: block;
    width: 100%;
    min-width: 0;
    line-height: 1.35;
    text-align: inherit;
    unicode-bidi: plaintext;
}

table.dataTable tbody > tr:nth-child(even) > * {
    background-color: #fbfcfe;
}

table.dataTable tbody > tr:hover > * {
    background-color: #f2f7fb;
}

table.dataTable thead tr.filters > th,
table.dataTable thead tr.filters > td {
    min-width: 0;
    max-width: none;
    padding: 0.42rem !important;
    background: #f1f5f9;
}

table.dataTable thead tr.filters .dt-col-select,
table.dataTable thead tr.filters .select2-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

table.dataTable .btn,
table.dataTable .badge,
table.dataTable .dropdown-toggle {
    white-space: nowrap;
}

.table-value-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    width: min(100%, 19rem);
    max-width: 19rem;
}

.table-value-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.2rem 0.48rem;
    border: 1px solid #d9e2ec;
    border-radius: 999px;
    color: #334155;
    background: #f8fafc;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
}

html[dir="rtl"] table.dataTable thead > tr > th,
html[dir="rtl"] table.dataTable thead > tr > td,
html[dir="rtl"] table.dataTable tbody > tr > th,
html[dir="rtl"] table.dataTable tbody > tr > td {
    direction: rtl;
    text-align: right;
}

html[dir="ltr"] table.dataTable thead > tr > th,
html[dir="ltr"] table.dataTable thead > tr > td,
html[dir="ltr"] table.dataTable tbody > tr > th,
html[dir="ltr"] table.dataTable tbody > tr > td {
    direction: ltr;
    text-align: left;
}

@media (max-width: 767.98px) {
    table.dataTable thead > tr > th,
    table.dataTable thead > tr > td {
        min-width: 5.5rem;
        font-size: 0.78rem;
    }

    table.dataTable tbody > tr > td,
    table.dataTable tbody > tr > th {
        max-width: 17rem;
        font-size: 0.82rem;
    }
}