.dt-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    width: 100%;
}

.dt-toolbar .dt-search {
    flex: 1;
    min-width: 180px;
}

.dt-toolbar .search-bar {
    margin-bottom: 0;
    flex: 1;
    max-width: 520px;
    /* أوسع من 360px */
    min-width: 200px;
}

.dt-scroll {
    overflow-x: auto;
}

/* ── Pagination container ── */
.dt-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    direction: rtl;
}

.dt-pg-left,
.dt-pg-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Buttons ── */
.dt-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-1);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s;
}

.dt-btn:hover:not(:disabled) {
    background: var(--primary-t);
    border-color: var(--primary);
}

.dt-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.dt-page-active {
    background: var(--primary);
    color: #0F1117;
    border-color: var(--primary);
    font-weight: 600;
}

.dt-page-active:hover:not(:disabled) {
    background: var(--primary-h);
}

.dt-ellipsis {
    padding: 0 4px;
    color: var(--text-3);
    font-size: 14px;
    line-height: 34px;
}

/* ── Per-page selector ── */
.dt-per-page-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-3);
    white-space: nowrap;
}

.dt-per-page {
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-1);
    font-size: 13px;
    cursor: pointer;
}

/* ── Result count ── */
.dt-count {
    font-size: 13px;
    color: var(--text-3);
    white-space: nowrap;
}

.dt-page-info {
    font-size: 13px;
    color: var(--text-3);
    padding: 0 4px;
}

/* ── Empty state ── */
.dt-empty {
    text-align: center;
    padding: 32px;
    color: var(--text-3);
}

/* ── Skeleton loading ── */
.dt-skeleton-row td {
    padding: 10px 12px;
}

.dt-skeleton {
    display: block;
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg,
            var(--border) 25%,
            var(--surface-2, #2a2a2a) 50%,
            var(--border) 75%);
    background-size: 200% 100%;
    animation: dt-shimmer 1.4s infinite;
    width: 80%;
}

.dt-skeleton-row:nth-child(odd) .dt-skeleton {
    width: 65%;
}

.dt-skeleton-row:nth-child(even) .dt-skeleton {
    width: 85%;
}

.dt-skeleton-row td:first-child .dt-skeleton {
    width: 40%;
}

.dt-skeleton-row td:last-child .dt-skeleton {
    width: 50%;
}

@keyframes dt-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ══════════════════════════════════════════
   MOBILE — DataTable Card Layout
   ══════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Toolbar: stack search full-width */
    .dt-toolbar {
        flex-wrap: wrap;
    }

    .dt-toolbar .search-bar {
        max-width: 100%;
        width: 100%;
    }

    /* Pagination: stack vertically */
    .dt-pagination {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .dt-pg-left,
    .dt-pg-right {
        width: 100%;
        justify-content: space-between;
    }

    .dt-pg-right {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* Card layout for DataTable rows */
    .dt-scroll table.data-table {
        display: block;
    }

    .dt-scroll table.data-table thead {
        display: none;
    }

    .dt-scroll table.data-table tbody {
        display: block;
    }

    .dt-scroll table.data-table tbody tr {
        display: block;
        border: 1px solid var(--border-s);
        border-radius: var(--radius);
        margin-bottom: 10px;
        padding: 10px 12px;
        background: var(--surface);
        box-shadow: none;
    }

    .dt-scroll table.data-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border-bottom: 1px solid var(--border-s);
        font-size: var(--fs-sm);
        min-height: 32px;
        gap: 8px;
    }

    .dt-scroll table.data-table tbody td:last-child {
        border-bottom: none;
    }

    /* Label from data-label attribute */
    .dt-scroll table.data-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: var(--fs-xs, 11px);
        color: var(--text-2, #555);
        flex-shrink: 0;
        min-width: 80px;
        margin-left: 8px;
    }

    /* Actions column: no label, right-aligned */
    .dt-scroll table.data-table tbody td.col-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 4px;
    }

    .dt-scroll table.data-table tbody td.col-actions::before {
        display: none;
    }

    /* Empty state */
    .dt-scroll table.data-table tbody td[colspan]::before {
        display: none;
    }

    .dt-scroll table.data-table tbody td[colspan] {
        justify-content: center;
    }
}