/* ============================================
   LIST PAGES ENHANCEMENTS - CYBER DESIGN
   Services, Domains, Invoices, Tickets Lists
   ============================================ */

/* ============================================
   PAGE HEADER & TITLE
   ============================================ */

.page-header,
.content-header {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(255, 0, 85, 0.1)) !important;
    border-bottom: 2px solid rgba(0, 255, 136, 0.3) !important;
    padding: var(--space-2xl, 32px) var(--space-xl, 24px) !important;
    margin-bottom: var(--space-2xl, 32px) !important;
    border-radius: 16px 16px 0 0 !important;
}

.page-header h1,
.content-header h1 {
    color: #FFFFFF !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.3) !important;
}

/* Breadcrumbs */
.breadcrumb {
    background: transparent !important;
    padding: var(--space-sm, 8px) 0 !important;
}

.breadcrumb-item {
    color: #a8a8b8 !important;
}

.breadcrumb-item.active {
    color: #FF0055 !important;
}

.breadcrumb-item a {
    color: #00FF88 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.breadcrumb-item a:hover {
    color: #FF0055 !important;
}

/* ============================================
   SIDEBAR FILTERS - GLASSMORPHIC
   ============================================ */

.sidebar,
.filter-sidebar,
.sidebar-menu {
    background: rgba(10, 10, 15, 0.8) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 16px !important;
    padding: var(--space-xl, 24px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Filter headers */
.sidebar h4,
.filter-heading {
    color: #FFFFFF !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    margin-bottom: var(--space-lg, 16px) !important;
    padding-bottom: var(--space-sm, 8px) !important;
    border-bottom: 2px solid rgba(0, 255, 136, 0.3) !important;
}

/* Filter options */
.sidebar .list-group-item,
.filter-option {
    background: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    color: #a8a8b8 !important;
    padding: var(--space-sm, 10px) var(--space-md, 14px) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.sidebar .list-group-item:hover,
.filter-option:hover {
    background: rgba(0, 255, 136, 0.05) !important;
    border-left-color: #00FF88 !important;
    color: #00FF88 !important;
    padding-left: calc(var(--space-md, 14px) + 5px) !important;
}

.sidebar .list-group-item.active,
.filter-option.active {
    background: rgba(0, 255, 136, 0.1) !important;
    border-left-color: #00FF88 !important;
    color: #00FF88 !important;
    font-weight: 600 !important;
}

/* Filter badges (counts) */
.sidebar .badge,
.filter-count {
    background: rgba(255, 0, 85, 0.2) !important;
    color: #FF0055 !important;
    border: 1px solid #FF0055 !important;
    border-radius: 50px !important;
    padding: 2px 8px !important;
    font-size: 0.75rem !important;
    margin-left: auto !important;
}

/* ============================================
   ACTION BUTTONS BAR
   ============================================ */

.action-buttons,
.btn-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--space-md, 12px) !important;
    margin-bottom: var(--space-xl, 24px) !important;
    padding: var(--space-lg, 16px) !important;
    background: rgba(26, 26, 36, 0.6) !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 12px !important;
}

/* ============================================
   DATA TABLE - ENHANCED
   ============================================ */

.table-container,
.dataTables_wrapper {
    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;
    padding: var(--space-lg, 20px) !important;
    overflow: hidden !important;
}

/* Table itself */
.table,
.dataTable {
    background: transparent !important;
    color: #FFFFFF !important;
    margin-bottom: 0 !important;
}

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

.table thead th,
.dataTable thead th {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.05em !important;
    padding: var(--space-md, 14px) !important;
    border: none !important;
    white-space: nowrap !important;
}

/* Sortable columns */
.table thead th.sorting,
.table thead th.sorting_asc,
.table thead th.sorting_desc {
    cursor: pointer !important;
    position: relative !important;
}

.table thead th.sorting:after,
.table thead th.sorting_asc:after,
.table thead th.sorting_desc:after {
    opacity: 0.5 !important;
    color: #00FF88 !important;
}

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

/* Table body */
.table tbody tr,
.dataTable tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
}

.table tbody tr:hover,
.dataTable tbody tr:hover {
    background: rgba(0, 255, 136, 0.05) !important;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.1) !important;
}

.table tbody td,
.dataTable tbody td {
    color: #a8a8b8 !important;
    padding: var(--space-md, 14px) !important;
    border: none !important;
    vertical-align: middle !important;
}

/* Checkbox column */
.table tbody td input[type="checkbox"],
.dataTable tbody td input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    accent-color: #00FF88 !important;
}

/* ============================================
   STATUS BADGES IN TABLES
   ============================================ */

.label,
.badge,
.status-badge {
    display: inline-block !important;
    padding: 4px 12px !important;
    border-radius: 50px !important;
    font-size: 0.813rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Active/Success */
.label-success,
.badge-success,
.status-active {
    background: rgba(0, 255, 136, 0.2) !important;
    color: #00FF88 !important;
    border: 1px solid #00FF88 !important;
}

/* Pending/Warning */
.label-warning,
.badge-warning,
.status-pending {
    background: rgba(255, 136, 0, 0.2) !important;
    color: #FF8800 !important;
    border: 1px solid #FF8800 !important;
}

/* Suspended/Error */
.label-danger,
.badge-danger,
.status-suspended,
.status-cancelled {
    background: rgba(255, 0, 85, 0.2) !important;
    color: #FF0055 !important;
    border: 1px solid #FF0055 !important;
}

/* Expired */
.label-default,
.status-expired {
    background: rgba(128, 128, 128, 0.2) !important;
    color: #888 !important;
    border: 1px solid #888 !important;
}

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

.pagination,
.dataTables_paginate {
    display: flex !important;
    justify-content: center !important;
    gap: var(--space-xs, 6px) !important;
    margin-top: var(--space-xl, 24px) !important;
}

.pagination .page-item,
.paginate_button {
    list-style: none !important;
}

.pagination .page-link,
.paginate_button a {
    background: rgba(26, 26, 36, 0.6) !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    color: #a8a8b8 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: block !important;
}

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

.pagination .page-item.active .page-link,
.paginate_button.current a {
    background: linear-gradient(135deg, #00FF88, #00CC66) !important;
    border-color: #00FF88 !important;
    color: #000000 !important;
    font-weight: 700 !important;
}

.pagination .page-item.disabled .page-link,
.paginate_button.disabled a {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ============================================
   SEARCH & FILTER CONTROLS
   ============================================ */

.dataTables_filter,
.search-box {
    margin-bottom: var(--space-lg, 16px) !important;
}

.dataTables_filter input,
.search-box input {
    background: rgba(10, 10, 15, 0.6) !important;
    border: 2px solid rgba(0, 255, 136, 0.3) !important;
    color: #FFFFFF !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    width: 300px !important;
    transition: all 0.3s ease !important;
}

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

/* Length selector */
.dataTables_length select {
    background: rgba(10, 10, 15, 0.6) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
}

/* Info text */
.dataTables_info {
    color: #a8a8b8 !important;
    padding: var(--space-md, 12px) 0 !important;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.no-records,
.dataTables_empty {
    text-align: center !important;
    padding: var(--space-3xl, 48px) !important;
    color: #a8a8b8 !important;
}

.no-records i,
.dataTables_empty i {
    font-size: 4rem !important;
    color: #FF0055 !important;
    opacity: 0.3 !important;
    display: block !important;
    margin-bottom: var(--space-lg, 16px) !important;
}

/* ============================================
   BULK ACTIONS BAR
   ============================================ */

.bulk-actions {
    background: rgba(255, 0, 85, 0.1) !important;
    border: 1px solid rgba(255, 0, 85, 0.3) !important;
    border-radius: 12px !important;
    padding: var(--space-lg, 16px) !important;
    margin-bottom: var(--space-lg, 16px) !important;
    display: none !important;
}

.bulk-actions.show {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-md, 12px) !important;
}

.bulk-actions-text {
    color: #FF0055 !important;
    font-weight: 600 !important;
}

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

@media (max-width: 992px) {
    .sidebar {
        margin-bottom: var(--space-xl, 24px) !important;
    }
    
    .action-buttons {
        flex-direction: column !important;
    }
    
    .action-buttons .btn {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    /* Make table scrollable */
    .table-container {
        overflow-x: auto !important;
    }
    
    .table {
        min-width: 600px !important;
    }
    
    /* Stack filters */
    .dataTables_filter input {
        width: 100% !important;
    }
    
    /* Smaller pagination */
    .pagination .page-link {
        padding: 6px 12px !important;
        font-size: 0.875rem !important;
    }
    
    .page-header h1 {
        font-size: 1.75rem !important;
    }
}

@media (max-width: 576px) {
    .table-container {
        padding: var(--space-md, 12px) !important;
    }
    
    .table thead th {
        font-size: 0.75rem !important;
        padding: var(--space-sm, 8px) !important;
    }
    
    .table tbody td {
        font-size: 0.875rem !important;
        padding: var(--space-sm, 10px) !important;
    }
    
    .pagination {
        gap: var(--space-xs, 4px) !important;
    }
    
    .pagination .page-link {
        padding: 4px 8px !important;
    }
}

/* ============================================
   LOADING STATES
   ============================================ */

.dataTables_processing {
    background: rgba(0, 255, 136, 0.1) !important;
    border: 2px solid rgba(0, 255, 136, 0.3) !important;
    color: #00FF88 !important;
    border-radius: 12px !important;
    padding: var(--space-lg, 16px) !important;
}

.loading-spinner {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    border: 3px solid rgba(0, 255, 136, 0.3) !important;
    border-top-color: #00FF88 !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
}

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