/* Import a bolder Arabic font: Cairo */
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&display=swap");

/* Apply to all Arabic UI */
html[lang="ar"] :not(.ri) *,
html[dir="rtl"] :not(.ri) *,
body[dir="rtl"] :not(.ri) *{
    font-family: "Cairo", sans-serif ;
    /* font-weight: 700 !important;  */
}
.navbar-menu .navbar-nav .nav-sm .nav-link{
     font-family: "Cairo", sans-serif ;
}

/* Extra bold for headers */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    font-weight: 700 !important; /* SUPER bold headings */
}
/* ===============================
   DataTables Table Styling (Theme-based)
   =============================== */

table.dataTable {
    width: 100% !important;
    border-collapse: collapse;
    font-size: var(--vz-body-font-size);
    color: var(--vz-body-color);
    background-color: var(--vz-secondary-bg) !important;
}

table.dataTable thead th {
    background-color: var(--vz-primary ) !important;
    color: var(--vz-white);
    font-weight: 600;
    /* text-align: center; */
    padding: 10px;
    border-bottom: 2px solid var(--vz-primary-border-subtle);
}

table.dataTable tbody tr {
    background-color: var(--vz-light-bg-subtle);
    transition: background-color 0.2s ease-in-out;
}

table.dataTable tbody tr:hover {
    background-color: var(--vz-primary-bg-subtle);
}

table.dataTable td {
    padding: 10px;
    text-align: center;
}

/* Stripe rows for extra contrast */
table.dataTable.stripe tbody tr.odd {
    background-color: var(--vz-light-bg-subtle);
}

/* Responsive scroll */
.dataTables_wrapper .dataTables_scroll {
    overflow: auto;
}

/* ===============================
   DataTables Buttons Styling (Theme-based)
   =============================== */

div.dt-buttons {
    margin-bottom: 15px;
    text-align: right;
}

div.dt-buttons button.btn {
    background-color: var(--vz-secondary);
    color: var(--vz-white);
    border: none;
    border-radius: var(--vz-border-radius) !important;
    padding: 6px 12px;
    margin-left: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: var(--vz-box-shadow-sm);
}

div.dt-buttons button.btn:hover {
    background-color: var(--vz-secondary-border-subtle);
    color: var(--vz-primary-text-emphasis);
}

div.dt-buttons button.btn.processing {
    color: rgba(var(--vz-white-rgb), 0.7);
}

div.dt-buttons button.btn.processing:after {
    border-color: var(--vz-white);
    border-left-color: transparent;
    border-right-color: transparent;
}

div.dt-buttons button.btn:disabled {
    background-color: var(--vz-gray-300);
    cursor: not-allowed;
}

/* Small screen responsive */
@media screen and (max-width: 767px) {
    div.dt-buttons {
        text-align: center;
        margin-bottom: 10px;
    }

    div.dt-buttons button.btn {
        /* margin: 5px 3px; */
        /* width: 100%; */
        padding:8px;
    }
}
/* Make DataTables buttons small and fit-content */
div.dt-buttons {
    display: inline-flex !important;
    gap: 6px;
}

div.dt-buttons .btn {
    width: auto !important;
    min-width: fit-content !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    white-space: nowrap;
}

div.dt-buttons .btn-group {
    width: auto !important;
}
/* ===============================
   DataTables Search Bar Styling
   =============================== */

/* Move to left */
.dataTables_filter {
    text-align: left !important;
}

/* Flex nicely */
.dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Search input theme styling */
.dataTables_filter input {
    direction: rtl;
    border: 1px solid var(--vz-border-color);
    background-color: var(--vz-secondary-bg);
    color: var(--vz-body-color);
    padding: 6px 10px;
    border-radius: var(--vz-border-radius);
    outline: none;
    transition: 0.2s ease;
    height: 32px;
    font-size: 14px;
}

/* Focused input */
.dataTables_filter input:focus {
    border-color: var(--vz-primary);
    box-shadow: 0 0 0 3px rgba(var(--vz-primary-rgb), 0.25);
}
/* Move sorting arrows to the start (left) of the header */ 
table.dataTable th.sorting:after,
table.dataTable th.sorting_asc:after,
table.dataTable th.sorting_desc:after {
    left: 8px !important;  /* move to the start */
    top: 11px !important;  /* move to the start */
    right: auto !important;            /* remove right positioning */
}

table.dataTable th.sorting:before,
table.dataTable th.sorting_asc:before,
table.dataTable th.sorting_desc:before {
    left: 5px !important;  /* move to the start */
    right: auto !important;            /* remove right positioning */
    top: 4px !important;            /* remove right positioning */
}


/* 
table.dataTable th.sorting:after,
table.dataTable th.sorting_asc:after,
table.dataTable th.sorting_desc:after {
    display: none !important;
}
table.dataTable th.sorting:before,
table.dataTable th.sorting_asc:before,
table.dataTable th.sorting_desc:before {
    display: none !important;
} */


/* Align expanded row/cell content to the right */
table.dataTable tbody td.details-control {
    text-align: right;
}

table.dataTable tbody tr.child td {
    justify-content: flex-end; /* if using flex inside */
    text-align: right; /* fallback */
}
.dataTables_wrapper .row:first-child {
    display: flex;
    flex-direction: row-reverse;
}
.dataTables_wrapper.dt-bootstrap4.no-footer > .row:first-of-type > div {
    display: flex;
    justify-content: end;
}