/*
|--------------------------------------------------------------------------
| Viartas Admin Theme - DataTables Modern Styles
|--------------------------------------------------------------------------
*/

:root {
    --vt-primary: #6366f1;
    --vt-primary-light: rgba(99, 102, 241, 0.1);
    --vt-success: #10b981;
    --vt-success-light: rgba(16, 185, 129, 0.1);
    --vt-danger: #ef4444;
    --vt-danger-light: rgba(239, 68, 68, 0.1);
    --vt-warning: #f59e0b;
    --vt-dark-50: #f8fafc;
    --vt-dark-100: #f1f5f9;
    --vt-dark-200: #e2e8f0;
    --vt-dark-300: #cbd5e1;
    --vt-dark-400: #94a3b8;
    --vt-dark-500: #64748b;
    --vt-dark-600: #475569;
    --vt-dark-700: #334155;
    --vt-dark-800: #1e293b;
    --vt-radius: 10px;
    --vt-radius-sm: 6px;
    --vt-radius-lg: 16px;
    --vt-card-bg: #ffffff;
}

/* ========================================================================
   Card & Wrapper
   ======================================================================== */
.card-body {
    padding: 0 !important;
}

.dataTables_wrapper {
    width: 100% !important;
}

/* ========================================================================
   Card Header & Buttons
   ======================================================================== */
.card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px !important;
    background: var(--vt-card-bg) !important;
    border-bottom: 1px solid var(--vt-dark-100) !important;
}

.card-header .vt-card-title,
.card-header h3 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--vt-dark-800) !important;
}

.card-header .btn-group,
.card-header .content-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.card-header .btn,
.card-header .content-buttons .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.card-header .btn-success {
    background: var(--vt-success) !important;
    color: white !important;
}

.card-header .btn-success:hover {
    background: #059669 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
}

.card-header .btn-danger {
    background: var(--vt-danger) !important;
    color: white !important;
}

.card-header .btn-danger:hover {
    background: #dc2626 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

.card-header .btn-primary {
    background: var(--vt-primary) !important;
    color: white !important;
}

.card-header .btn-primary:hover {
    background: #4f46e5 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
}

.card-header .btn-warning {
    background: var(--vt-warning) !important;
    color: white !important;
}

.card-header .btn-warning:hover {
    background: #d97706 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4) !important;
}

.card-header .btn-info {
    background: #0ea5e9 !important;
    color: white !important;
}

.card-header .btn-info:hover {
    background: #0284c7 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4) !important;
}

.card-header .btn-secondary {
    background: var(--vt-dark-200) !important;
    color: var(--vt-dark-600) !important;
}

.card-header .btn-secondary:hover {
    background: var(--vt-dark-300) !important;
    color: var(--vt-dark-800) !important;
    transform: translateY(-2px) !important;
}

.card-header .btn i {
    font-size: 15px !important;
    margin: 0 !important;
}

/* ========================================================================
   Top Controls Row
   ======================================================================== */
.dataTables_wrapper {
    position: relative !important;
}

.dataTables_wrapper > .row:first-of-type {
    padding: 20px 18px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--vt-dark-100) !important;
    position: relative !important;
}

/* ========================================================================
   Export Buttons - Position alongside Search
   ======================================================================== */
.dataTables_wrapper > .dt-buttons {
    position: absolute !important;
    top: 20px !important;
    right: 18px !important;
    z-index: 5 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.dt-buttons,
.dt-buttons.btn-group,
.dt-buttons.btn-group.flex-wrap,
div.dt-buttons,
div.dt-buttons.btn-group,
div.dt-buttons.btn-group.flex-wrap {
    display: inline-flex !important;
    width: auto !important;
    max-width: fit-content !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    flex: 0 0 auto !important;
}

.dt-buttons .btn,
.dt-buttons button.btn,
.dt-buttons.btn-group .btn,
.dt-buttons.btn-group.flex-wrap .btn,
div.dt-buttons .btn,
div.dt-buttons button.btn,
.dt-buttons > button,
.dt-buttons > .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: 1px solid var(--vt-dark-200) !important;
    background: var(--vt-card-bg) !important;
    color: var(--vt-dark-600) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    border-radius: 0 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: auto !important;
    max-width: fit-content !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
}

/* Adjust search filter to leave space for buttons */
.dataTables_wrapper > .row:first-of-type .dataTables_filter {
    margin-right: 320px !important;
}

/* Length dropdown alignment */
.dataTables_wrapper > .row:first-of-type > div:first-child {
    padding-left: 0 !important;
}

.dt-buttons .btn:first-child {
    border-radius: 8px 0 0 8px !important;
}

.dt-buttons .btn:last-child {
    border-radius: 0 8px 8px 0 !important;
}

.dt-buttons .btn:not(:last-child) {
    border-right: none !important;
}

.dt-buttons .btn:hover {
    background: var(--vt-dark-50) !important;
    color: var(--vt-dark-800) !important;
}

/* Colored buttons */
.dt-buttons .buttons-copy {
    background: #10b981 !important;
    color: white !important;
    border-color: #10b981 !important;
}
.dt-buttons .buttons-copy:hover {
    background: #059669 !important;
}

.dt-buttons .buttons-excel {
    background: #22c55e !important;
    color: white !important;
    border-color: #22c55e !important;
}
.dt-buttons .buttons-excel:hover {
    background: #16a34a !important;
}

.dt-buttons .buttons-csv {
    background: #3b82f6 !important;
    color: white !important;
    border-color: #3b82f6 !important;
}
.dt-buttons .buttons-csv:hover {
    background: #2563eb !important;
}

.dt-buttons .buttons-pdf {
    background: #ef4444 !important;
    color: white !important;
    border-color: #ef4444 !important;
}
.dt-buttons .buttons-pdf:hover {
    background: #dc2626 !important;
}

/* ========================================================================
   Length Select
   ======================================================================== */
.dataTables_length label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    color: var(--vt-dark-600) !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

.dataTables_length select {
    padding: 10px 40px 10px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 2px solid var(--vt-dark-200) !important;
    border-radius: 10px !important;
    background-color: var(--vt-card-bg) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    color: var(--vt-dark-700) !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.dataTables_length select:focus {
    outline: none !important;
    border-color: var(--vt-primary) !important;
    box-shadow: 0 0 0 4px var(--vt-primary-light) !important;
}

/* ========================================================================
   Search Filter
   ======================================================================== */
.dataTables_filter label {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    font-size: 0 !important;
    margin: 0 !important;
}

.dataTables_filter input {
    padding: 10px 16px 10px 44px !important;
    font-size: 14px !important;
    border: 2px solid var(--vt-dark-200) !important;
    border-radius: 10px !important;
    background-color: var(--vt-card-bg) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 20px !important;
    color: var(--vt-dark-700) !important;
    min-width: 280px !important;
}

.dataTables_filter input:focus {
    outline: none !important;
    border-color: var(--vt-primary) !important;
    box-shadow: 0 0 0 4px var(--vt-primary-light) !important;
}

/* ========================================================================
   Table Container
   ======================================================================== */
.dataTables_wrapper .table-responsive {
    margin: 0 !important;
    overflow-x: auto !important;
}

table.dataTable {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
}

/* ========================================================================
   Table Header
   ======================================================================== */
table.dataTable > thead > tr > th {
    padding: 16px 18px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: var(--vt-dark-500) !important;
    background: var(--vt-dark-50) !important;
    border: none !important;
    border-bottom: 2px solid var(--vt-dark-200) !important;
    text-align: left !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    position: relative !important;
}

/* Sorting */
table.dataTable > thead > tr > th.sorting,
table.dataTable > thead > tr > th.sorting_asc,
table.dataTable > thead > tr > th.sorting_desc {
    cursor: pointer !important;
    padding-right: 30px !important;
}

table.dataTable > thead > tr > th.sorting::before,
table.dataTable > thead > tr > th.sorting::after,
table.dataTable > thead > tr > th.sorting_asc::before,
table.dataTable > thead > tr > th.sorting_asc::after,
table.dataTable > thead > tr > th.sorting_desc::before,
table.dataTable > thead > tr > th.sorting_desc::after {
    content: '' !important;
    display: none !important;
}

table.dataTable > thead > tr > th.sorting::after {
    content: '↕' !important;
    display: block !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 12px !important;
    color: var(--vt-dark-400) !important;
    opacity: 0.5 !important;
}

table.dataTable > thead > tr > th.sorting_asc::after {
    content: '↑' !important;
    display: block !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
    color: var(--vt-primary) !important;
    opacity: 1 !important;
}

table.dataTable > thead > tr > th.sorting_desc::after {
    content: '↓' !important;
    display: block !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
    color: var(--vt-primary) !important;
    opacity: 1 !important;
}

/* ========================================================================
   Column Filters Row
   ======================================================================== */
table.dataTable > thead > tr:nth-child(2) > th {
    padding: 12px 14px !important;
    background: var(--vt-card-bg) !important;
    border-bottom: 1px solid var(--vt-dark-100) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

table.dataTable > thead > tr:nth-child(2) > th input[type="text"],
table.dataTable > thead > tr:nth-child(2) > th input[type="search"] {
    width: 100% !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    border: 2px solid var(--vt-dark-200) !important;
    border-radius: 8px !important;
    background: var(--vt-dark-50) !important;
    color: var(--vt-dark-700) !important;
}

table.dataTable > thead > tr:nth-child(2) > th input:focus {
    outline: none !important;
    border-color: var(--vt-primary) !important;
    background: var(--vt-card-bg) !important;
    box-shadow: 0 0 0 3px var(--vt-primary-light) !important;
}

table.dataTable > thead > tr:nth-child(2) > th select,
table.dataTable > thead > tr:nth-child(2) > th .form-select {
    width: 100% !important;
    padding: 10px 36px 10px 14px !important;
    font-size: 13px !important;
    border: 2px solid var(--vt-dark-200) !important;
    border-radius: 8px !important;
    background-color: var(--vt-dark-50) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px !important;
    color: var(--vt-dark-700) !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

table.dataTable > thead > tr:nth-child(2) > th select:focus {
    outline: none !important;
    border-color: var(--vt-primary) !important;
    background-color: var(--vt-card-bg) !important;
    box-shadow: 0 0 0 3px var(--vt-primary-light) !important;
}

/* ========================================================================
   Date Range Inputs - Side by Side
   ======================================================================== */
table.dataTable > thead > tr:nth-child(2) > th input.daterangepicker-input {
    width: 48% !important;
    padding: 10px 10px !important;
    font-size: 12px !important;
    display: inline-block !important;
    margin: 0 1% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

table.dataTable > thead > tr:nth-child(2) > th input.daterangepicker-input:first-of-type {
    margin-left: 0 !important;
}

table.dataTable > thead > tr:nth-child(2) > th input.daterangepicker-input:last-of-type {
    margin-right: 0 !important;
}

/* ========================================================================
   Table Body
   ======================================================================== */
table.dataTable > tbody > tr > td {
    padding: 16px 18px !important;
    font-size: 14px !important;
    color: var(--vt-dark-700) !important;
    background: var(--vt-card-bg) !important;
    border: none !important;
    border-bottom: 1px solid var(--vt-dark-100) !important;
    vertical-align: middle !important;
}

table.dataTable > tbody > tr:hover > td {
    background: var(--vt-primary-light) !important;
}

table.dataTable > tbody > tr:last-child > td {
    border-bottom: none !important;
}

table.dataTable > tbody > tr.odd > td {
    background: var(--vt-card-bg) !important;
}

table.dataTable > tbody > tr.even > td {
    background: var(--vt-dark-50) !important;
}

table.dataTable > tbody > tr:hover > td {
    background: rgba(99, 102, 241, 0.08) !important;
}

table.dataTable > tbody > tr > td:first-child {
    font-weight: 600 !important;
    color: var(--vt-dark-500) !important;
}

/* ========================================================================
   Badges
   ======================================================================== */
.badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
}

.badge-primary {
    background: var(--vt-primary-light) !important;
    color: var(--vt-primary) !important;
}

.badge-secondary {
    background: var(--vt-dark-100) !important;
    color: var(--vt-dark-600) !important;
}

/* ========================================================================
   Toggle Switch
   ======================================================================== */
.table-switch .form-check {
    margin: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
}

.table-switch .form-check-input,
.form-switch .form-check-input {
    width: 48px !important;
    height: 26px !important;
    margin: 0 !important;
    cursor: pointer !important;
    border: none !important;
    border-radius: 50px !important;
    background-color: var(--vt-dark-300) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-position: left center !important;
    background-size: contain !important;
    transition: all 0.25s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.table-switch .form-check-input:checked,
.form-switch .form-check-input:checked {
    background-color: #10b981 !important;
    background-position: right center !important;
}

/* ========================================================================
   Checkbox
   ======================================================================== */
.table-checkbox .form-check {
    margin: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
    display: flex !important;
    justify-content: center !important;
}

.table-checkbox .form-check-input {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    cursor: pointer !important;
    border: 2px solid var(--vt-dark-300) !important;
    border-radius: 6px !important;
    background-color: var(--vt-card-bg) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.table-checkbox .form-check-input:checked {
    background-color: var(--vt-primary) !important;
    border-color: var(--vt-primary) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") !important;
    background-size: 12px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* ========================================================================
   Check/Uncheck All Buttons
   ======================================================================== */
a.table-check-all,
a.table-uncheck-all,
.btn.btn-light-primary.table-check-all,
.btn.btn-light-primary.table-uncheck-all,
.btn-icon.table-check-all,
.btn-icon.table-uncheck-all {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 4px 0 0 !important;
    border-radius: 8px !important;
    background: var(--vt-primary-light) !important;
    color: var(--vt-primary) !important;
    border: none !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

a.table-check-all:hover,
a.table-uncheck-all:hover,
.btn.btn-light-primary.table-check-all:hover,
.btn.btn-light-primary.table-uncheck-all:hover,
.btn-icon.table-check-all:hover,
.btn-icon.table-uncheck-all:hover {
    background: var(--vt-primary) !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

a.table-check-all i,
a.table-uncheck-all i,
.table-check-all i,
.table-uncheck-all i {
    font-size: 14px !important;
}

/* ========================================================================
   Action Buttons
   ======================================================================== */
.table-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.table-buttons .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.table-buttons .btn-primary {
    background: var(--vt-primary-light) !important;
    color: var(--vt-primary) !important;
}

.table-buttons .btn-primary:hover {
    background: var(--vt-primary) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
}

.table-buttons .btn-danger {
    background: var(--vt-danger-light) !important;
    color: var(--vt-danger) !important;
}

.table-buttons .btn-danger:hover {
    background: var(--vt-danger) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

.table-buttons .btn-xs {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
}

/* ========================================================================
   Status Dropdown
   ======================================================================== */
.table-actions .dropdown-toggle {
    padding: 8px 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    background: #3b82f6 !important;
    border: none !important;
    color: white !important;
}

.table-actions .dropdown-toggle:hover {
    background: #2563eb !important;
}

.table-actions .dropdown-menu {
    min-width: 180px !important;
    padding: 8px !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

.table-actions .dropdown-item {
    padding: 10px 16px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
}

.table-actions .dropdown-item:hover {
    background: var(--vt-dark-50) !important;
}

/* ========================================================================
   Bottom Row
   ======================================================================== */
.dataTables_wrapper > .row:last-of-type {
    padding: 16px 18px !important;
    margin: 0 !important;
    border-top: 1px solid var(--vt-dark-100) !important;
    background: var(--vt-dark-50) !important;
}

.dataTables_info {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--vt-dark-500) !important;
}

/* Pagination */
.dataTables_paginate .pagination {
    display: flex !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.dataTables_paginate .page-item .page-link,
.dataTables_paginate .paginate_button > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--vt-dark-600) !important;
    background: var(--vt-card-bg) !important;
    border: 2px solid var(--vt-dark-200) !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.dataTables_paginate .page-item .page-link:hover,
.dataTables_paginate .paginate_button > a:hover {
    background: var(--vt-dark-50) !important;
    border-color: var(--vt-dark-300) !important;
}

.dataTables_paginate .page-item.active .page-link,
.dataTables_paginate .paginate_button.active > a {
    background: var(--vt-primary) !important;
    border-color: var(--vt-primary) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}

.dataTables_paginate .page-item.disabled .page-link,
.dataTables_paginate .paginate_button.disabled > a {
    background: var(--vt-dark-50) !important;
    border-color: var(--vt-dark-100) !important;
    color: var(--vt-dark-400) !important;
    cursor: not-allowed !important;
}

/* Prev/Next icons */
.dataTables_paginate .page-link .previous,
.dataTables_paginate .page-link .next {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border: solid currentColor !important;
    border-width: 0 2px 2px 0 !important;
}

.dataTables_paginate .page-link .previous {
    transform: rotate(135deg) !important;
}

.dataTables_paginate .page-link .next {
    transform: rotate(-45deg) !important;
}

/* ========================================================================
   Processing & Empty State
   ======================================================================== */
.dataTables_processing {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 20px 32px !important;
    background: var(--vt-card-bg) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12) !important;
    z-index: 100 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--vt-dark-600) !important;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
}

/* Show only when DataTables adds display:block */
.dataTables_processing[style*="display: block"],
.dataTables_processing[style*="display:block"] {
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
}

/* Hide ALL default DataTables loader content (spinners, text) */
.dataTables_processing > div,
.dataTables_processing > span,
.dataTables_processing > * {
    display: none !important;
}

/* Custom spinner */
.dataTables_processing::before {
    content: '' !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border: 3px solid var(--vt-dark-200) !important;
    border-top-color: var(--vt-primary) !important;
    border-radius: 50% !important;
    animation: dt-spin 0.8s linear infinite !important;
}

/* Custom text */
.dataTables_processing::after {
    content: 'Loading...' !important;
    display: block !important;
}

@keyframes dt-spin {
    to { transform: rotate(360deg); }
}

table.dataTable > tbody > tr > td.dataTables_empty {
    padding: 60px 20px !important;
    text-align: center !important;
    color: var(--vt-dark-500) !important;
    font-size: 15px !important;
}

/* ========================================================================
   Select2
   ======================================================================== */
.select2-container--default .select2-selection--single {
    height: 40px !important;
    padding: 6px 12px !important;
    border: 2px solid var(--vt-dark-200) !important;
    border-radius: 8px !important;
    background: var(--vt-dark-50) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px !important;
    font-size: 13px !important;
    color: var(--vt-dark-700) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
}

.select2-dropdown {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--vt-primary) !important;
}

/* ========================================================================
   Responsive
   ======================================================================== */
@media (max-width: 767.98px) {
    .dataTables_wrapper > .dt-buttons,
    .dataTables_wrapper > .row:first-of-type {
        padding: 12px 16px !important;
    }

    .dataTables_wrapper > .row:last-of-type {
        padding: 12px 16px !important;
    }

    table.dataTable > thead > tr > th,
    table.dataTable > tbody > tr > td {
        padding: 12px 14px !important;
        font-size: 13px !important;
    }

    .dataTables_filter input {
        min-width: 180px !important;
    }

    .dt-buttons .btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }
}

/* ========================================
   DataTables Responsive Fix
   ======================================== */

/* Wrapper turi riboti plotį ir leisti horizontal scroll */
div.dataTables_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

/* Table-responsive wrapper */
.table-responsive {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

div.dataTables_wrapper .table-responsive {
    overflow-x: auto !important;
    overflow-y: auto;
}

/* Parent elementai */
.vt-card-body {
    max-width: 100% !important;
    overflow-x: auto !important;
}

.vt-card {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Content area */
.vt-content {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Main wrapper */
.vt-main {
    max-width: 100% !important;
    overflow-x: hidden !important;
}
