/* ============================================
   CLIENT AREA PAGES - CYBER THEME ENHANCEMENTS
   Service Details, Domain Details, Invoices, etc.
   CSS-Only improvements - Structure unchanged
   ============================================ */

/* ============================================
   GENERAL PAGE STYLING
   ============================================ */

/* Main content areas */
.main-content,
.content-wrapper,
#main-body {
    background: radial-gradient(ellipse at top, #1a1a2e 0%, #0a0a0f 100%) !important;
    min-height: 100vh;
    padding: var(--space-xl, 24px);
}

/* All panels/cards - glassmorphic */
.panel,
.well,
.card,
.info-box {
    background: rgba(26, 26, 36, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: var(--space-lg, 20px) !important;
}

/* Panel headers */
.panel-heading,
.card-header,
.box-header {
    background: rgba(0, 255, 136, 0.05) !important;
    border-bottom: 1px solid rgba(0, 255, 136, 0.2) !important;
    color: #FFFFFF !important;
    padding: var(--space-lg, 16px) !important;
    border-radius: 16px 16px 0 0 !important;
}

.panel-title,
.card-title,
.box-title {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* Panel body */
.panel-body,
.card-body,
.box-body {
    padding: var(--space-xl, 24px) !important;
    color: #a8a8b8 !important;
}

/* ============================================
   SERVICE DETAILS PAGE
   ============================================ */

/* Service status badges */
.label-success,
.badge-success,
.status-active {
    background: rgba(0, 255, 136, 0.2) !important;
    color: #00FF88 !important;
    border: 1px solid #00FF88 !important;
    padding: 4px 12px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
}

.label-warning,
.badge-warning,
.status-pending {
    background: rgba(255, 136, 0, 0.2) !important;
    color: #FF8800 !important;
    border: 1px solid #FF8800 !important;
    padding: 4px 12px !important;
    border-radius: 50px !important;
}

.label-danger,
.badge-danger,
.status-suspended,
.status-cancelled {
    background: rgba(255, 0, 85, 0.2) !important;
    color: #FF0055 !important;
    border: 1px solid #FF0055 !important;
    padding: 4px 12px !important;
    border-radius: 50px !important;
}

/* Product details table */
.product-details-table,
.table-striped,
.service-table {
    background: transparent !important;
}

.product-details-table th,
.table-striped th {
    background: rgba(0, 255, 136, 0.1) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.875rem !important;
    padding: 12px !important;
    border: none !important;
}

.product-details-table td,
.table-striped td {
    color: #a8a8b8 !important;
    padding: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.product-details-table tr:hover,
.table-striped tbody tr:hover {
    background: rgba(0, 255, 136, 0.05) !important;
}

/* ============================================
   DOMAIN DETAILS PAGE
   ============================================ */

/* Domain status indicators */
.domain-status-active {
    color: #00FF88 !important;
    font-weight: 600 !important;
}

.domain-status-expired,
.domain-status-grace {
    color: #FF8800 !important;
    font-weight: 600 !important;
}

/* Domain management buttons */
.domain-management .btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

/* Nameserver inputs */
.nameserver-input,
input[name*="nameserver"] {
    background: rgba(10, 10, 15, 0.6) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.nameserver-input:focus,
input[name*="nameserver"]:focus {
    border-color: #00FF88 !important;
    box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1) !important;
}

/* ============================================
   INVOICE PAGE
   ============================================ */

/* Invoice header */
.invoice-header {
    background: rgba(255, 0, 85, 0.05) !important;
    border-left: 4px solid #FF0055 !important;
    padding: var(--space-xl, 24px) !important;
    border-radius: 12px !important;
    margin-bottom: var(--space-xl, 24px) !important;
}

.invoice-number {
    color: #00FF88 !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}

.invoice-date,
.invoice-due-date {
    color: #a8a8b8 !important;
}

/* Invoice status */
.invoice-status-paid {
    background: rgba(0, 255, 136, 0.2) !important;
    color: #00FF88 !important;
    border: 2px solid #00FF88 !important;
    padding: 8px 20px !important;
    border-radius: 50px !important;
    display: inline-block !important;
    font-weight: 700 !important;
}

.invoice-status-unpaid {
    background: rgba(255, 0, 85, 0.2) !important;
    color: #FF0055 !important;
    border: 2px solid #FF0055 !important;
    padding: 8px 20px !important;
    border-radius: 50px !important;
    display: inline-block !important;
    font-weight: 700 !important;
    animation: pulse-red 2s infinite !important;
}

/* Invoice totals */
.invoice-totals {
    background: rgba(0, 255, 136, 0.05) !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 12px !important;
    padding: var(--space-xl, 24px) !important;
}

.invoice-total-amount {
    color: #00FF88 !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.5) !important;
}

/* ============================================
   BUTTONS - CYBER STYLED
   ============================================ */

.btn-primary,
.btn-success {
    background: linear-gradient(135deg, #00FF88, #00CC66) !important;
    border: 2px solid #00FF88 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    padding: 10px 24px !important;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover,
.btn-success:hover {
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.5) !important;
    transform: translateY(-2px) !important;
}

.btn-danger {
    background: linear-gradient(135deg, #FF0055, #FF5555) !important;
    border: 2px solid #FF0055 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    padding: 10px 24px !important;
    box-shadow: 0 0 20px rgba(255, 0, 85, 0.3) !important;
}

.btn-default,
.btn-secondary {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    color: #a8a8b8 !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: 10px 24px !important;
    transition: all 0.3s ease !important;
}

.btn-default:hover,
.btn-secondary:hover {
    border-color: #00FF88 !important;
    color: #00FF88 !important;
    background: rgba(0, 255, 136, 0.05) !important;
}

/* ============================================
   FORM INPUTS
   ============================================ */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    background: rgba(10, 10, 15, 0.6) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: #00FF88 !important;
    box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1) !important;
    background: rgba(10, 10, 15, 0.8) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: #a8a8b8 !important;
}

/* Form labels */
label {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

/* ============================================
   ALERTS & MESSAGES
   ============================================ */

.alert-success {
    background: rgba(0, 255, 136, 0.1) !important;
    border-left: 4px solid #00FF88 !important;
    color: #00FF88 !important;
    border-radius: 8px !important;
}

.alert-danger {
    background: rgba(255, 0, 85, 0.1) !important;
    border-left: 4px solid #FF0055 !important;
    color: #FF0055 !important;
    border-radius: 8px !important;
}

.alert-warning {
    background: rgba(255, 136, 0, 0.1) !important;
    border-left: 4px solid #FF8800 !important;
    color: #FF8800 !important;
    border-radius: 8px !important;
}

.alert-info {
    background: rgba(0, 136, 255, 0.1) !important;
    border-left: 4px solid #0088FF !important;
    color: #0088FF !important;
    border-radius: 8px !important;
}

/* ============================================
   TABS
   ============================================ */

.nav-tabs {
    border-bottom: 2px solid rgba(0, 255, 136, 0.2) !important;
}

.nav-tabs .nav-link {
    background: transparent !important;
    border: none !important;
    color: #a8a8b8 !important;
    padding: 12px 24px !important;
    transition: all 0.3s ease !important;
}

.nav-tabs .nav-link:hover {
    color: #00FF88 !important;
}

.nav-tabs .nav-link.active {
    background: rgba(0, 255, 136, 0.1) !important;
    color: #00FF88 !important;
    border-bottom: 2px solid #00FF88 !important;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    .main-content {
        padding: var(--space-md, 16px) !important;
    }
    
    .panel-body,
    .card-body {
        padding: var(--space-lg, 16px) !important;
    }
    
    .table {
        font-size: 0.875rem !important;
    }
    
    .btn {
        width: 100% !important;
        margin-bottom: 8px !important;
    }
    
    .invoice-total-amount {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 576px) {
    .panel-heading,
    .card-header {
        padding: var(--space-md, 12px) !important;
    }
    
    .panel-title,
    .card-title {
        font-size: 1rem !important;
    }
    
    /* Stack buttons vertically on mobile */
    .btn-group {
        flex-direction: column !important;
    }
    
    .btn-group .btn {
        width: 100% !important;
        border-radius: 10px !important;
    }
}

/* ============================================
   PRINT STYLES FOR INVOICES
   ============================================ */

@media print {
    body {
        background: white !important;
    }
    
    .panel,
    .card {
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    
    .btn {
        display: none !important;
    }
}

/* ============================================
   FIX WHITE AREAS IN LIST PAGES
   Strong overrides for Services, Domains, Invoices, Tickets
   ============================================ */

/* Force ALL backgrounds to dark */
.dataTables_wrapper,
.table-responsive,
.table-container,
div[class*="table"],
div[style*="background: white"],
div[style*="background:#fff"],
div[style*="background: #fff"] {
    background: rgba(10, 10, 15, 0.8) !important;
    color: #FFFFFF !important;
}

/* DataTables - Force dark theme */
.dataTable,
table.dataTable,
.dataTables_wrapper .dataTable {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Table headers - Dark with green accent */
.dataTable thead,
table.dataTable thead,
.table thead {
    background: rgba(0, 255, 136, 0.1) !important;
    border-bottom: 2px solid rgba(0, 255, 136, 0.3) !important;
}

.dataTable thead th,
table.dataTable thead th,
.table thead th {
    background: transparent !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.875rem !important;
    padding: 16px !important;
    border: none !important;
}

/* Table body rows */
.dataTable tbody,
table.dataTable tbody,
.table tbody {
    background: transparent !important;
}

.dataTable tbody tr,
table.dataTable tbody tr,
.table tbody tr {
    background: rgba(10, 10, 15, 0.4) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
}

.dataTable tbody tr:hover,
table.dataTable tbody tr:hover,
.table tbody tr:hover {
    background: rgba(0, 255, 136, 0.08) !important;
}

.dataTable tbody td,
table.dataTable tbody td,
.table tbody td {
    color: #a8a8b8 !important;
    padding: 16px !important;
    border: none !important;
}

/* Alternating row colors - subtle */
.dataTable tbody tr:nth-child(even),
.table-striped tbody tr:nth-child(even) {
    background: rgba(10, 10, 15, 0.6) !important;
}

/* ============================================
   PAGINATION - CYBER STYLED
   ============================================ */

.dataTables_paginate,
.pagination,
.paging {
    background: transparent !important;
    padding: 16px 0 !important;
}

.paginate_button,
.pagination .page-link,
.pagination li a {
    background: rgba(26, 26, 36, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #a8a8b8 !important;
    padding: 8px 16px !important;
    margin: 0 4px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.paginate_button:hover,
.pagination .page-link:hover,
.pagination li a:hover {
    background: rgba(0, 255, 136, 0.1) !important;
    border-color: #00FF88 !important;
    color: #00FF88 !important;
}

.paginate_button.current,
.paginate_button.active,
.pagination .page-item.active .page-link {
    background: rgba(0, 255, 136, 0.2) !important;
    border-color: #00FF88 !important;
    color: #00FF88 !important;
    font-weight: 700 !important;
}

.paginate_button.disabled,
.pagination .page-item.disabled .page-link {
    background: rgba(26, 26, 36, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.2) !important;
    cursor: not-allowed !important;
}

/* ============================================
   SEARCH AND FILTER BOXES
   ============================================ */

.dataTables_filter,
.dataTables_length {
    background: transparent !important;
}

.dataTables_filter label,
.dataTables_length label {
    color: #a8a8b8 !important;
}

.dataTables_filter input,
.dataTables_length select {
    background: rgba(10, 10, 15, 0.6) !important;
    border: 2px solid rgba(0, 255, 136, 0.3) !important;
    color: #FFFFFF !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    margin-left: 8px !important;
}

.dataTables_filter input:focus {
    border-color: #00FF88 !important;
    box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1) !important;
}

/* ============================================
   TABLE INFO AND CONTROLS
   ============================================ */

.dataTables_info {
    color: #a8a8b8 !important;
    padding: 16px 0 !important;
}

.dataTables_processing {
    background: rgba(26, 26, 36, 0.9) !important;
    color: #00FF88 !important;
    border: 1px solid #00FF88 !important;
    border-radius: 8px !important;
}

/* ============================================
   SORTABLE COLUMNS
   ============================================ */

.dataTable thead th.sorting,
.dataTable thead th.sorting_asc,
.dataTable thead th.sorting_desc {
    cursor: pointer !important;
    position: relative !important;
}

.dataTable thead th.sorting:hover,
.dataTable thead th.sorting_asc:hover,
.dataTable thead th.sorting_desc:hover {
    color: #00FF88 !important;
}

.dataTable thead th.sorting_asc::after,
.dataTable thead th.sorting_desc::after {
    color: #00FF88 !important;
}

/* ============================================
   LIST VIEW SIDEBAR FILTERS
   ============================================ */

.list-group,
.sidebar-filter {
    background: rgba(10, 10, 15, 0.8) !important;
}

.list-group-item {
    background: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    color: #a8a8b8 !important;
    padding: 12px 16px !important;
    transition: all 0.3s ease !important;
}

.list-group-item:hover,
.list-group-item.active {
    background: rgba(0, 255, 136, 0.05) !important;
    border-left-color: #00FF88 !important;
    color: #00FF88 !important;
}

.list-group-item .badge {
    background: rgba(255, 0, 85, 0.2) !important;
    color: #FF0055 !important;
    border: 1px solid #FF0055 !important;
    border-radius: 50px !important;
}

/* ============================================
   EMPTY STATES
   ============================================ */

.dataTables_empty,
.no-records,
.empty-state {
    background: rgba(255, 0, 85, 0.05) !important;
    border: 1px dashed rgba(255, 0, 85, 0.3) !important;
    color: #a8a8b8 !important;
    padding: 40px !important;
    text-align: center !important;
}

/* ============================================
   CHECKBOXES AND ACTIONS
   ============================================ */

.select-checkbox,
input[type="checkbox"] {
    accent-color: #00FF88 !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
}

.bulk-actions,
.selected-actions {
    background: rgba(0, 255, 136, 0.1) !important;
    border: 1px solid rgba(0, 255, 136, 0.3) !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
}

/* ============================================
   MOBILE RESPONSIVE FOR LISTS
   ============================================ */

@media (max-width: 768px) {
    .dataTable thead {
        display: none !important;
    }
    
    .dataTable tbody tr {
        display: block !important;
        margin-bottom: 16px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(0, 255, 136, 0.2) !important;
    }
    
    .dataTable tbody td {
        display: block !important;
        text-align: right !important;
        padding: 12px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    
    .dataTable tbody td::before {
        content: attr(data-label) !important;
        float: left !important;
        font-weight: 600 !important;
        color: #00FF88 !important;
    }
    
    .dataTables_filter,
    .dataTables_length {
        margin-bottom: 16px !important;
    }
}

/* ============================================
   STRONGEST OVERRIDES FOR WHITE TABLE ROWS
   ============================================ */

/* Target ALL table elements with white backgrounds */
table tr,
table tbody tr,
.table tr,
.table tbody tr,
.dataTable tr,
.dataTable tbody tr,
tr[style*="background"],
tr[style*="background: white"],
tr[style*="background:#fff"],
tr[style*="background-color: white"],
tr[class*="odd"],
tr[class*="even"] {
    background: rgba(10, 10, 15, 0.4) !important;
    background-color: rgba(10, 10, 15, 0.4) !important;
}

/* Hover state */
table tr:hover,
.table tr:hover,
.dataTable tbody tr:hover {
    background: rgba(0, 255, 136, 0.08) !important;
    background-color: rgba(0, 255, 136, 0.08) !important;
}

/* Table cells */
table td,
.table td,
.dataTable td,
td[style*="background"] {
    background: transparent !important;
    background-color: transparent !important;
    color: #a8a8b8 !important;
}

/* Force table wrapper backgrounds */
.table-responsive,
.dataTables_wrapper,
div[class*="table-"] {
    background: transparent !important;
    background-color: transparent !important;
}


/* ============================================
   SIMPLIFIED SIDEBAR - CLEANER DESIGN
   ============================================ */

/* Remove excessive styling from sidebar container */
.secondary-sidebar,
.client-sidebar,
aside.sidebar {
    background: transparent !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Simplified panel */
.panel-sidebar,
.sidebar .panel {
    background: rgba(26, 26, 36, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Clean panel heading */
.panel-sidebar .panel-heading,
.sidebar .panel-heading {
    background: rgba(0, 255, 136, 0.05) !important;
    border-left: none !important;
    border-bottom: 1px solid rgba(0, 255, 136, 0.2) !important;
    color: #FFFFFF !important;
    padding: 16px !important;
    border-radius: 0 !important;
    margin: 0 !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

/* Simple list items - NO BORDERS */
.list-group-item,
.sidebar-filter-item,
.client-sidebar .list-group-item {
    background: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    color: #a8a8b8 !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.list-group-item:hover {
    background: rgba(0, 255, 136, 0.05) !important;
    border-left-color: #00FF88 !important;
    color: #00FF88 !important;
    transform: none !important;
    box-shadow: none !important;
}

.list-group-item.active {
    background: rgba(0, 255, 136, 0.08) !important;
    border-left-color: #00FF88 !important;
    color: #00FF88 !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

/* Clean badges */
.list-group-item .badge {
    background: #FF0055 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 2px 8px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

/* Remove panel body styling */
.panel-sidebar .panel-body,
.sidebar .panel-body {
    padding: 0 !important;
    background: transparent !important;
}

/* Clean list group */
.list-group {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}/* ============================================
   MOBILE RESPONSIVE - PRODUCT LIST
   ============================================ */

@media (max-width: 991px) {
    /* Sidebar becomes full width on mobile */
    .secondary-sidebar,
    .client-sidebar {
        width: 100% !important;
        margin-bottom: 20px !important;
        border-radius: 12px !important;
    }
    
    /* Make sidebar collapsible on mobile */
    .sidebar .panel-heading {
        cursor: pointer !important;
        position: relative !important;
    }
    
    .sidebar .panel-heading::after {
        content: "?" !important;
        position: absolute !important;
        right: 16px !important;
        transition: transform 0.3s !important;
    }
}

@media (max-width: 768px) {
    /* Convert table to card layout on mobile */
    .dataTable,
    .table {
        display: block !important;
        overflow-x: visible !important;
    }
    
    .dataTable thead {
        display: none !important;
    }
    
    .dataTable tbody {
        display: block !important;
    }
    
    .dataTable tbody tr {
        display: block !important;
        margin-bottom: 16px !important;
        padding: 16px !important;
        background: rgba(26, 26, 36, 0.6) !important;
        border: 1px solid rgba(0, 255, 136, 0.2) !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }
    
    .dataTable tbody td {
        display: block !important;
        text-align: left !important;
        padding: 12px 0 !important;
        border: none !important;
        position: relative !important;
        padding-left: 50% !important;
    }
    
    .dataTable tbody td::before {
        content: attr(data-label) !important;
        position: absolute !important;
        left: 0 !important;
        width: 45% !important;
        padding-right: 10px !important;
        font-weight: 700 !important;
        color: #00FF88 !important;
        text-transform: uppercase !important;
        font-size: 0.75rem !important;
    }
    
    /* Mobile table headers */
    .dataTable tbody td:nth-child(1)::before { content: "Product" !important; }
    .dataTable tbody td:nth-child(2)::before { content: "Pricing" !important; }
    .dataTable tbody td:nth-child(3)::before { content: "Next Due" !important; }
    .dataTable tbody td:nth-child(4)::before { content: "Status" !important; }
    
    /* Status badges on mobile */
    .dataTable tbody td .badge,
    .dataTable tbody td .label {
        display: inline-block !important;
        margin-top: 4px !important;
    }
}

@media (max-width: 576px) {
    /* Extra small screens */
    .dataTables_filter,
    .dataTables_length {
        width: 100% !important;
        margin-bottom: 12px !important;
    }
    
    .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 8px !important;
    }
    
    /* Stack pagination vertically */
    .dataTables_paginate {
        text-align: center !important;
    }
    
    .paginate_button {
        margin: 4px !important;
    }
}

/* ============================================
   SEARCH BOX ENHANCEMENT
   ============================================ */

.dataTables_filter {
    position: relative !important;
}

.dataTables_filter input {
    background: rgba(10, 10, 15, 0.6) !important;
    border: 2px solid rgba(0, 255, 136, 0.3) !important;
    border-radius: 10px !important;
    padding: 12px 20px 12px 45px !important;
    color: #FFFFFF !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
}

.dataTables_filter input:focus {
    border-color: #00FF88 !important;
    box-shadow: 0 0 0 4px rgba(0, 255, 136, 0.1), 0 0 20px rgba(0, 255, 136, 0.2) !important;
}

.dataTables_filter label::before {
    content: "??" !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.25rem !important;
}

/* ============================================
   TABLE HEADER STYLING
   ============================================ */

.dataTable thead th {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 255, 136, 0.05)) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 16px !important;
    border-bottom: 2px solid #00FF88 !important;
}

.dataTable thead th:hover {
    background: rgba(0, 255, 136, 0.2) !important;
}

/* Sorting indicators */
.sorting::after,
.sorting_asc::after,
.sorting_desc::after {
    color: #00FF88 !important;
    opacity: 0.7 !important;
}