/* ============================================
   DARK THEME WITH GLASSMORPHISM & MONTSERRAT
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-card: rgba(20, 20, 20, 0.7);
    --bg-glass: rgba(30, 30, 30, 0.4);
    --text-primary: #ffffff; /* Branco puro - máximo contraste */
    --text-secondary: #f5f5f5; /* Cinza muito claro - quase branco */
    --accent-1: #6366f1;
    --accent-2: #8b5cf6;
    --accent-3: #ec4899;
    --accent-4: #06b6d4;
    --accent-5: #10b981;
    --border-glass: rgba(255, 255, 255, 0.2); /* Borda mais visível */
    --shadow-glass: rgba(0, 0, 0, 0.3);
}

/* Dark Background - Almost Black - Force Black Everywhere */
body, html {
    background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #111111 100%) !important;
    background-attachment: fixed !important;
    background-color: #000000 !important;
    color: var(--text-primary) !important;
    font-family: 'Montserrat', sans-serif !important;
    min-height: 100vh;
}

/* Force black background on all containers */
.container-fluid,
.container,
.page-content,
.main-content,
#layout-wrapper {
    background: transparent !important;
    background-color: transparent !important;
}

/* Prevent any white backgrounds - but allow cards to have their glass effect */
div:not(.card):not(.card-body):not(.card-header):not(.card-footer):not(.card-title),
section:not(.card),
article:not(.card),
aside:not(.card),
main:not(.card),
header:not(.card),
nav:not(.card) {
    background-color: transparent !important;
}

/* Force black on any element that might have white background */
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color: #ffffff"],
[style*="background: white"],
[style*="background: #fff"],
[style*="background: #ffffff"] {
    background-color: #000000 !important;
    background: #000000 !important;
}

/* Force black on Bootstrap elements that might have white */
.bg-white,
.bg-light,
.bg-body,
.bg-body-tertiary {
    background-color: #000000 !important;
    background: #000000 !important;
}

/* Force black on form elements that might default to white */
input:not([type="submit"]):not([type="button"]):not(.btn),
select:not(.btn),
textarea {
    background-color: var(--bg-glass) !important;
    background: var(--bg-glass) !important;
    color: #ffffff !important;
}

select:not(.btn),
select:not(.btn) option {
    color: #ffffff !important;
}

/* Force black on all table-related elements */
table, thead, tbody, tr, th, td {
    background-color: #000000 !important;
    background: #000000 !important;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Montserrat', sans-serif !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

/* Glassmorphic Cards - Uniform Size and Spacing */
.card {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 8px !important;
    box-shadow: 
        0 8px 32px 0 var(--shadow-glass),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease;
    height: 100% !important; /* Garante mesma altura */
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 1.5rem !important; /* Espaçamento uniforme */
}

.card:hover {
    background: rgba(35, 35, 35, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 
        0 12px 40px 0 rgba(0, 0, 0, 0.5),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px);
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border-glass) !important;
    padding: 1.25rem 1.5rem !important; /* Padding uniforme */
    flex-shrink: 0 !important;
}

.card-title {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    font-size: 1rem !important; /* Tamanho uniforme */
    margin-bottom: 0 !important;
}

.card-body {
    color: var(--text-primary) !important;
    padding: 1.5rem !important; /* Padding uniforme */
    flex-grow: 1 !important; /* Preenche espaço disponível */
    display: flex !important;
    flex-direction: column !important;
}

/* Uniform row spacing - Consistent throughout */
.row {
    margin-left: -0.75rem !important;
    margin-right: -0.75rem !important;
    margin-bottom: 1.5rem !important; /* Espaçamento uniforme entre linhas */
}

.row:last-child {
    margin-bottom: 0 !important;
}

.row > [class*="col-"] {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    margin-bottom: 0 !important; /* Removido margin-bottom das colunas - o card já tem */
}

/* Ensure all cards in same row have same height */
.row > [class*="col-"] > .card {
    height: 100% !important;
    margin-bottom: 0 !important; /* Cards não precisam de margin-bottom separado */
}

/* Stats cards - mesma altura garantida */
.col-xl-3 .card,
.col-md-6 .card {
    min-height: 120px !important; /* Altura mínima para stats cards */
}

/* Chart cards - altura consistente */
.col-xl-6 .card,
.col-xl-8 .card,
.col-xl-4 .card,
.col-12 .card {
    min-height: auto !important;
}

/* Charts dentro dos cards - altura uniforme */
.card .apex-charts {
    min-height: 350px !important; /* Altura mínima para gráficos */
    height: 350px !important; /* Altura fixa */
}

/* Stats cards - mesma altura */
.col-xl-3 .card,
.col-md-6 .card,
.col-lg-4 .card,
.col-lg-6 .card,
.col-lg-8 .card,
.col-lg-12 .card {
    min-height: auto !important;
}

/* Charts cards - altura consistente */
.card .apex-charts {
    min-height: 350px !important; /* Altura mínima para gráficos */
}

/* Glassmorphic Buttons */
.btn {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-glass) !important;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: white !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
    box-shadow: 
        0 4px 16px 0 rgba(99, 102, 241, 0.3),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
    box-shadow: 
        0 6px 20px 0 rgba(99, 102, 241, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-1px);
}

.btn-outline-secondary {
    background: var(--bg-glass) !important;
    border: 1px solid var(--border-glass) !important;
    color: #ffffff !important;
}

.btn-outline-secondary:hover {
    background: rgba(60, 60, 60, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.btn-outline-secondary *,
.btn-outline-secondary span,
.btn-outline-secondary i {
    color: #ffffff !important;
}

/* Glassmorphic Form Controls */
.form-control {
    background: var(--bg-glass) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 8px !important;
    color: #ffffff !important; /* Texto branco */
    font-family: 'Montserrat', sans-serif !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 
        inset 0 2px 4px 0 rgba(0, 0, 0, 0.2),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.05) !important;
}

.form-control:focus {
    background: rgba(50, 50, 50, 0.7) !important;
    border-color: var(--accent-1) !important;
    color: #ffffff !important;
    box-shadow: 
        inset 0 2px 4px 0 rgba(0, 0, 0, 0.2),
        0 0 0 0.2rem rgba(99, 102, 241, 0.25) !important;
}

.form-label {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
}

/* Glassmorphic Stats Cards */
.card .avatar-sm {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.card .avatar-title {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid var(--border-glass) !important;
    box-shadow: 
        0 4px 16px 0 var(--shadow-glass),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.05) !important;
}

/* Icon Gradients in Avatar Cards */
.avatar-title.bg-primary-subtle i {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.avatar-title.bg-success-subtle i {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.avatar-title.bg-warning-subtle i {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.avatar-title.bg-info-subtle i {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Badges */
.badge {
    border-radius: 6px !important;
    padding: 0.5rem 0.8rem !important;
    font-weight: 600 !important;
    font-family: 'Montserrat', sans-serif !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid var(--border-glass) !important;
    color: white !important;
}

.badge.bg-primary {
    background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

.badge.bg-success {
    background: linear-gradient(135deg, var(--accent-5) 0%, #059669 100%) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

.badge.bg-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.badge.bg-info {
    background: linear-gradient(135deg, var(--accent-4) 0%, #0891b2 100%) !important;
    border-color: rgba(6, 182, 212, 0.3) !important;
}

.badge.bg-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: white !important;
}

.badge.bg-warning.text-dark,
.badge.bg-warning.text-black {
    color: white !important;
}

/* Page Title */
.page-title-box h4 {
    color: var(--text-primary) !important;
}

.page-title-box .text-primary {
    background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-title-box p {
    color: var(--text-secondary) !important;
}

.page-title-box h4,
.page-title-box .fs-16 {
    text-transform: uppercase !important;
}

.breadcrumb {
    background: transparent !important;
}

.breadcrumb-item a {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

.breadcrumb-item.active {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

/* Glassmorphic Table Styling - Force Black */
.table,
.table * {
    background-color: #000000 !important;
    background: #000000 !important;
}

.table {
    color: var(--text-primary) !important;
    font-family: 'Montserrat', sans-serif !important;
    background: #000000 !important; /* Fundo preto sólido */
    background-color: #000000 !important;
}

.table thead {
    background: #000000 !important;
    background-color: #000000 !important;
}

.table thead th {
    background: rgba(0, 0, 0, 0.9) !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: white !important; /* Cabeçalho branco */
    border-bottom: 2px solid var(--border-glass) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.table tbody {
    background: #000000 !important; /* Fundo preto sólido */
    background-color: #000000 !important;
}

.table tbody tr {
    background: #000000 !important; /* Fundo preto sólido */
    background-color: #000000 !important;
    border-bottom: 1px solid var(--border-glass) !important;
}

.table tbody tr:hover {
    background: rgba(20, 20, 20, 0.95) !important;
    background-color: rgba(20, 20, 20, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.table tbody td {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important; /* Branco puro para melhor visibilidade */
    vertical-align: middle !important;
}

.table-bordered {
    border: 1px solid var(--border-glass) !important;
    background: #000000 !important;
    background-color: #000000 !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(10, 10, 10, 0.8) !important; /* Preto mais escuro para linhas alternadas */
    background-color: rgba(10, 10, 10, 0.8) !important;
}

.table-striped tbody tr:nth-of-type(even) {
    background: #000000 !important; /* Preto sólido */
    background-color: #000000 !important;
}

/* Force black on table wrapper divs */
.table-responsive,
.table-wrapper {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Force white text on all DataTables footer elements */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_paginate *,
.dataTables_wrapper .dataTables_length *,
.dataTables_wrapper .dataTables_filter *,
.dataTables_wrapper .dataTables_info * {
    color: #ffffff !important;
}

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

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    color: #ffffff !important;
}

/* Extra specific rules for dataTables_info text - Force white */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_info span,
.dataTables_wrapper .dataTables_info div,
.dataTables_wrapper .dataTables_info p,
.dataTables_wrapper .dataTables_info::before,
.dataTables_wrapper .dataTables_info::after,
.dataTables_wrapper .dataTables_info *::before,
.dataTables_wrapper .dataTables_info *::after {
    color: #ffffff !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Footer */
.footer {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    color: var(--text-secondary) !important;
    border-top: 1px solid var(--border-glass) !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* Icon Gradients */
.btn i,
.badge i {
    background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-primary i {
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-outline-secondary i {
    background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ApexCharts */
.apexcharts-canvas {
    filter: brightness(0.98);
    background: transparent !important;
    font-family: 'Montserrat', sans-serif !important;
}

.apexcharts-inner, .apexcharts-svg, .apex-charts {
    background: transparent !important;
}

#category_chart, #eligibility_chart, #points_chart, #payment_chart, 
#category_performance_chart, #points_payments_chart, #performance_radar_chart {
    background: transparent !important;
}

.apexcharts-text {
    fill: var(--text-primary) !important;
    font-family: 'Montserrat', sans-serif !important;
}

.apexcharts-legend-text {
    color: var(--text-primary) !important;
    font-family: 'Montserrat', sans-serif !important;
}

.apexcharts-tooltip {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid var(--border-glass) !important;
    box-shadow: 
        0 8px 32px 0 var(--shadow-glass),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
}

.apexcharts-tooltip-title {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    font-family: 'Montserrat', sans-serif !important;
}

.apexcharts-gridline, .apexcharts-xaxis-tick, .apexcharts-yaxis-tick {
    stroke: rgba(255, 255, 255, 0.1) !important;
}

/* Progress Bars */
.progress {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-glass) !important;
    box-shadow: 
        inset 0 2px 4px 0 rgba(0, 0, 0, 0.3) !important;
}

.progress-bar {
    border-radius: 10px !important;
    box-shadow: 
        0 2px 8px 0 rgba(0, 0, 0, 0.3) !important;
}

/* Container & Utils */
.container-fluid { background: transparent !important; }

/* Force all text to be highly visible */
p, span, div, label, small, li, td, th {
    color: #ffffff !important;
}

/* Text muted - quase branco para visibilidade */
.text-muted, p.text-muted, small.text-muted, .text-muted small {
    color: #f5f5f5 !important; /* Quase branco */
}

/* Page title subtitle */
.page-title-box p.text-muted {
    color: #f0f0f0 !important;
}

/* Stats cards text */
.card-body p.text-truncate,
.card-body p.text-muted {
    color: #ffffff !important;
}

.card-body small {
    color: #e8e8e8 !important;
}

/* Form labels */
label, .form-label {
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* Breadcrumb */
.breadcrumb-item {
    color: #ffffff !important;
}

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

.breadcrumb-item.active {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* DataTables info text */
.dataTables_info {
    color: #ffffff !important;
}

/* Footer */
.footer {
    color: #e0e0e0 !important;
}

/* All headings */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #ffffff !important;
}

/* DataTables */
.dataTables_wrapper {
    color: var(--text-primary) !important;
    font-family: 'Montserrat', sans-serif !important;
}

.dataTables_filter input, .dataTables_length select {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid var(--border-glass) !important;
    color: white !important;
    border-radius: 8px !important;
}

/* Form Select and Labels - Force White */
.form-select,
.form-select option,
select.form-select,
select.form-select option {
    color: #ffffff !important;
    background-color: var(--bg-glass) !important;
    background: var(--bg-glass) !important;
}

.form-select:focus,
select.form-select:focus {
    color: #ffffff !important;
    background-color: var(--bg-glass) !important;
}

.form-label,
label.form-label,
label {
    color: #ffffff !important;
}

.form-label *,
label * {
    color: #ffffff !important;
}

.dataTables_info { 
    color: #ffffff !important;
}

.dataTables_info *,
.dataTables_info span,
.dataTables_info div,
.dataTables_info::before,
.dataTables_info::after {
    color: #ffffff !important;
}

/* Force white on all text inside dataTables_info */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_info *,
div.dataTables_info,
div.dataTables_info *,
span.dataTables_info,
span.dataTables_info * {
    color: #ffffff !important;
    text-shadow: none !important;
}

.paginate_button,
.paginate_button *,
li.paginate_button,
li.paginate_button *,
.page-item.paginate_button,
.page-item.paginate_button * {
    background: #000000 !important;
    background-color: #000000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
}

.paginate_button:hover:not(.disabled) {
    background: rgba(20, 20, 20, 0.95) !important;
    background-color: rgba(20, 20, 20, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-1px) !important;
}

.paginate_button:active:not(.disabled) {
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.6),
        inset 0 1px 2px rgba(0, 0, 0, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(0) !important;
}

.paginate_button.disabled,
.paginate_button.disabled:hover,
.paginate_button.disabled *,
li.paginate_button.disabled,
li.paginate_button.disabled *,
.page-item.disabled .paginate_button,
.page-item.disabled .paginate_button * {
    background: #000000 !important;
    background-color: #000000 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    cursor: not-allowed !important;
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transform: none !important;
}

/* Force all text inside paginate buttons to be white */
.paginate_button,
.paginate_button a,
.paginate_button span,
.paginate_button div,
li.paginate_button,
li.paginate_button a,
li.paginate_button span,
li.paginate_button div,
.page-item.paginate_button,
.page-item.paginate_button a,
.page-item.paginate_button span,
.page-item.paginate_button div {
    color: #ffffff !important;
    background: #000000 !important;
    background-color: #000000 !important;
}

.paginate_button.disabled,
.paginate_button.disabled a,
.paginate_button.disabled span,
.paginate_button.disabled div,
li.paginate_button.disabled,
li.paginate_button.disabled a,
li.paginate_button.disabled span,
li.paginate_button.disabled div,
.page-item.disabled.paginate_button,
.page-item.disabled.paginate_button a,
.page-item.disabled.paginate_button span,
.page-item.disabled.paginate_button div {
    color: rgba(255, 255, 255, 0.5) !important;
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Extra rules for links inside pagination */
.pagination a,
.pagination a.paginate_button,
.pagination li a,
.pagination .page-item a {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.pagination a.disabled,
.pagination a.paginate_button.disabled,
.pagination li.disabled a,
.pagination .page-item.disabled a {
    background: #000000 !important;
    background-color: #000000 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.paginate_button.current {
    background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%) !important;
    background-color: var(--accent-1) !important;
    color: #ffffff !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
    box-shadow: 
        0 4px 12px rgba(99, 102, 241, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Pagination list items - Force black background and white text */
.pagination {
    background: transparent !important;
    background-color: transparent !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
}

.pagination *,
.pagination li,
.pagination .page-item,
.pagination .page-item *,
.pagination li * {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
}

.pagination .page-item .paginate_button,
.pagination li .paginate_button,
.pagination .page-item a,
.pagination li a {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.pagination .page-item.disabled .paginate_button,
.pagination li.disabled .paginate_button,
.pagination .page-item.disabled a,
.pagination li.disabled a {
    background: #000000 !important;
    background-color: #000000 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Specific rules for previous/next buttons - Maximum specificity */
.pagination .page-item.previous .paginate_button,
.pagination .page-item.next .paginate_button,
.pagination li.previous .paginate_button,
.pagination li.next .paginate_button,
li#ambassadors_table_previous,
li#ambassadors_table_next,
li#ambassadors_table_previous.paginate_button,
li#ambassadors_table_next.paginate_button,
li#ambassadors_table_previous.page-item,
li#ambassadors_table_next.page-item,
li#ambassadors_table_previous.paginate_button.page-item,
li#ambassadors_table_next.paginate_button.page-item,
li#ambassadors_table_previous *,
li#ambassadors_table_next *,
li#ambassadors_table_previous.paginate_button *,
li#ambassadors_table_next.paginate_button * {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.pagination .page-item.previous.disabled .paginate_button,
.pagination .page-item.next.disabled .paginate_button,
.pagination li.previous.disabled .paginate_button,
.pagination li.next.disabled .paginate_button,
li#ambassadors_table_previous.disabled,
li#ambassadors_table_next.disabled,
li#ambassadors_table_previous.paginate_button.disabled,
li#ambassadors_table_next.paginate_button.disabled,
li#ambassadors_table_previous.disabled *,
li#ambassadors_table_next.disabled *,
li#ambassadors_table_previous.paginate_button.disabled *,
li#ambassadors_table_next.paginate_button.disabled * {
    background: #000000 !important;
    background-color: #000000 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: 10px; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%);
    border-radius: 10px;
    border: 2px solid var(--bg-secondary);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent-3) 100%);
}