/* public/css/styles.css */
:root {
    --primary-color: #4a90e2;
    --secondary-color: #2d3e50;
    --background-color: #f7f9fc;
    --sidebar-width: 250px;
    --font-family: 'Roboto', sans-serif;
  }
  
  body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--secondary-color);
    margin: 0;
    padding: 0;
  }
  
  /* Sidebar styling */
  #sidebar-wrapper {
    width: var(--sidebar-width);
    min-height: 100vh;
    background-color: var(--secondary-color);
    color: #fff;
    transition: all 0.3s ease;
  }
  
  #sidebar-wrapper .sidebar-heading {
    padding: 1.5rem;
    font-size: 1.25rem;
    background-color: var(--primary-color);
    text-align: center;
  }
  
  #sidebar-wrapper .list-group-item {
    background-color: var(--secondary-color);
    border: none;
    color: #fff;
    padding: 1rem;
  }
  
  #sidebar-wrapper .list-group-item:hover {
    background-color: var(--primary-color);
  }
  
  /* Page content */
  #page-content-wrapper {
    flex: 1;
    padding: 2rem;
  }
  
  /* Navbar/Header styling */
  .navbar {
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  
  .navbar .btn-primary, .navbar .btn-secondary {
    box-shadow: none;
  }
  
  .container-fluid {
    padding: 2rem;
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    #sidebar-wrapper {
      position: fixed;
      left: -var(--sidebar-width);
      top: 0;
      height: 100%;
      z-index: 1000;
    }
    #sidebar-wrapper.active {
      left: 0;
    }
  }
  
/* Dark mode styles - Improved for better eye comfort */
.dark {
    color-scheme: dark !important;
}

.dark body {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Main containers */
.dark .bg-white {
    background-color: #1e293b !important;
}

.dark .bg-gray-50 {
    background-color: #0f172a !important;
}

.dark .bg-gray-100 {
    background-color: #1e293b !important;
}

.dark .bg-gray-200 {
    background-color: #334155 !important;
}

/* Status backgrounds */
.dark .bg-blue-50 {
    background-color: #1e3a8a;
}

.dark .bg-green-50 {
    background-color: #064e3b;
}

.dark .bg-red-50 {
    background-color: #7f1d1d;
}

.dark .bg-yellow-50 {
    background-color: #78350f;
}

.dark .bg-orange-50 {
    background-color: #7c2d12;
}

/* Borders */
.dark .border-gray-200 {
    border-color: #475569;
}

.dark .border-gray-300 {
    border-color: #64748b;
}

.dark .border-blue-200 {
    border-color: #3b82f6;
}

.dark .border-green-200 {
    border-color: #10b981;
}

.dark .border-red-200 {
    border-color: #ef4444;
}

.dark .border-yellow-200 {
    border-color: #f59e0b;
}

.dark .border-orange-200 {
    border-color: #f97316;
}

/* Text colors */
.dark .text-gray-700 {
    color: #cbd5e1;
}

.dark .text-gray-600 {
    color: #94a3b8;
}

.dark .text-gray-500 {
    color: #64748b;
}

.dark .text-gray-400 {
    color: #94a3b8;
}

.dark .text-gray-300 {
    color: #cbd5e1;
}

.dark .text-gray-200 {
    color: #e2e8f0;
}

.dark .text-gray-100 {
    color: #f1f5f9;
}

.dark .text-gray-900 {
    color: #f8fafc;
}

.dark .text-gray-800 {
    color: #f1f5f9;
}

/* Accent colors */
.dark .text-blue-600 {
    color: #60a5fa;
}

.dark .text-green-600 {
    color: #34d399;
}

.dark .text-red-600 {
    color: #f87171;
}

.dark .text-yellow-600 {
    color: #fbbf24;
}

.dark .text-orange-600 {
    color: #fb923c;
}

/* Button backgrounds */
.dark .bg-blue-600 {
    background-color: #2563eb;
}

.dark .bg-green-600 {
    background-color: #059669;
}

.dark .bg-red-600 {
    background-color: #dc2626;
}

.dark .bg-yellow-600 {
    background-color: #d97706;
}

.dark .bg-orange-600 {
    background-color: #ea580c;
}

.dark .bg-gray-600 {
    background-color: #475569;
}

.dark .bg-gray-700 {
    background-color: #334155;
}

.dark .bg-gray-800 {
    background-color: #1e293b;
}

.dark .bg-gray-900 {
    background-color: #0f172a;
}

/* Hover states */
.dark .hover\:bg-blue-700:hover {
    background-color: #1d4ed8;
}

.dark .hover\:bg-green-700:hover {
    background-color: #047857;
}

.dark .hover\:bg-red-700:hover {
    background-color: #b91c1c;
}

.dark .hover\:bg-yellow-700:hover {
    background-color: #b45309;
}

.dark .hover\:bg-orange-700:hover {
    background-color: #c2410c;
}

.dark .hover\:bg-gray-700:hover {
    background-color: #475569;
}

.dark .hover\:bg-gray-600:hover {
    background-color: #64748b;
}

/* Form elements - Much better contrast */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="tel"],
.dark input[type="url"],
.dark input[type="search"],
.dark textarea,
.dark select {
    background-color: #1e293b;
    border-color: #475569;
    color: #e2e8f0;
}

.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="number"]:focus,
.dark input[type="tel"]:focus,
.dark input[type="url"]:focus,
.dark input[type="search"]:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background-color: #1e293b;
}

.dark input[type="text"]::placeholder,
.dark input[type="email"]::placeholder,
.dark input[type="password"]::placeholder,
.dark input[type="number"]::placeholder,
.dark input[type="tel"]::placeholder,
.dark input[type="url"]::placeholder,
.dark input[type="search"]::placeholder,
.dark textarea::placeholder {
    color: #64748b;
}

/* Table styling - Much better */
.dark table {
    background-color: #1e293b;
}

.dark th {
    background-color: #334155;
    color: #e2e8f0;
    border-color: #475569;
}

.dark td {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
}

.dark tr:nth-child(even) td {
    background-color: #334155;
}

.dark tr:hover td {
    background-color: #475569;
}

/* Button styling */
.dark .btn-primary {
    background-color: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.dark .btn-primary:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
}

.dark .btn-secondary {
    background-color: #475569;
    color: #ffffff;
    border-color: #475569;
}

.dark .btn-secondary:hover {
    background-color: #64748b;
    border-color: #64748b;
}

.dark .btn-success {
    background-color: #059669;
    color: #ffffff;
    border-color: #059669;
}

.dark .btn-success:hover {
    background-color: #047857;
    border-color: #047857;
}

.dark .btn-danger {
    background-color: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}

.dark .btn-danger:hover {
    background-color: #b91c1c;
    border-color: #b91c1c;
}

.dark .btn-warning {
    background-color: #d97706;
    color: #ffffff;
    border-color: #d97706;
}

.dark .btn-warning:hover {
    background-color: #b45309;
    border-color: #b45309;
}

/* Card styling */
.dark .card {
    background-color: #1e293b;
    border-color: #475569;
}

.dark .card-header {
    background-color: #334155;
    border-color: #64748b;
}

.dark .card-body {
    background-color: #1e293b;
}

.dark .card-footer {
    background-color: #334155;
    border-color: #64748b;
}

/* Modal styling */
.dark .modal-content {
    background-color: #1e293b;
    border-color: #475569;
}

.dark .modal-header {
    background-color: #334155;
    border-color: #64748b;
}

.dark .modal-body {
    background-color: #1e293b;
}

.dark .modal-footer {
    background-color: #334155;
    border-color: #64748b;
}

/* Alert styling */
.dark .alert-info {
    background-color: #1e3a8a;
    border-color: #3b82f6;
    color: #dbeafe;
}

.dark .alert-success {
    background-color: #064e3b;
    border-color: #10b981;
    color: #d1fae5;
}

.dark .alert-warning {
    background-color: #78350f;
    border-color: #f59e0b;
    color: #fef3c7;
}

.dark .alert-danger {
    background-color: #7f1d1d;
    border-color: #ef4444;
    color: #fee2e2;
}

/* Badge styling */
.dark .badge-primary {
    background-color: #2563eb;
    color: #ffffff;
}

.dark .badge-secondary {
    background-color: #475569;
    color: #ffffff;
}

.dark .badge-success {
    background-color: #059669;
    color: #ffffff;
}

.dark .badge-danger {
    background-color: #dc2626;
    color: #ffffff;
}

.dark .badge-warning {
    background-color: #d97706;
    color: #ffffff;
}

/* Progress bar */
.dark .progress {
    background-color: #475569;
}

.dark .progress-bar {
    background-color: #3b82f6;
}

/* Tooltip */
.dark .tooltip {
    background-color: #0f172a;
    color: #e2e8f0;
    border-color: #475569;
}

/* Dropdown */
.dark .dropdown-menu {
    background-color: #1e293b;
    border-color: #475569;
}

.dark .dropdown-item {
    color: #e2e8f0;
}

.dark .dropdown-item:hover {
    background-color: #334155;
}

/* Navbar */
.dark .navbar {
    background-color: #0f172a;
    border-color: #1e293b;
}

.dark .navbar-brand {
    color: #f8fafc;
}

.dark .navbar-nav .nav-link {
    color: #cbd5e1;
}

.dark .navbar-nav .nav-link:hover {
    color: #f8fafc;
}

.dark .navbar-nav .nav-link.active {
    color: #60a5fa;
}

/* Sidebar */
.dark .sidebar {
    background-color: #0f172a;
    border-color: #1e293b;
}

.dark .sidebar .nav-link {
    color: #cbd5e1;
}

.dark .sidebar .nav-link:hover {
    background-color: #1e293b;
    color: #f8fafc;
}

.dark .sidebar .nav-link.active {
    background-color: #3b82f6;
    color: #ffffff;
}

/* Footer */
.dark .footer {
    background-color: #0f172a;
    border-color: #1e293b;
    color: #cbd5e1;
}

/* Code blocks */
.dark pre {
    background-color: #0f172a;
    color: #e2e8f0;
    border-color: #475569;
}

.dark code {
    background-color: #1e293b;
    color: #e2e8f0;
}

/* Links */
.dark a {
    color: #60a5fa;
}

.dark a:hover {
    color: #93c5fd;
}

/* Scrollbar */
.dark ::-webkit-scrollbar {
    width: 8px;
}

.dark ::-webkit-scrollbar-track {
    background: #1e293b;
}

.dark ::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Focus states */
.dark *:focus {
    outline-color: #3b82f6;
}

/* Selection */
.dark ::selection {
    background-color: #3b82f6;
    color: #ffffff;
}

.dark ::-moz-selection {
    background-color: #3b82f6;
    color: #ffffff;
}



/* Fix for pagination controls */
.dark .pagination .page-link {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
}

.dark .pagination .page-link:hover {
    background-color: #334155;
    color: #f8fafc;
}

.dark .pagination .page-item.active .page-link {
    background-color: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

/* Billing Status Page Specific Fixes - More Subtle Approach */
.dark .bg-blue-600 {
    background-color: #1e3a8a;
}

.dark .bg-green-600 {
    background-color: #064e3b;
}

.dark .bg-green-500 {
    background-color: #047857;
}

.dark .bg-green-400 {
    background-color: #059669;
}

.dark .bg-green-300 {
    background-color: #10b981;
}

.dark .bg-green-200 {
    background-color: #34d399;
}

.dark .bg-green-100 {
    background-color: #6ee7b7;
}

.dark .bg-green-50 {
    background-color: #ecfdf5;
}

/* Text colors for green sections - More readable */
.dark .text-green-600 {
    color: #10b981;
}

.dark .text-green-500 {
    color: #34d399;
}

.dark .text-green-400 {
    color: #6ee7b7;
}

.dark .text-green-300 {
    color: #a7f3d0;
}

.dark .text-green-200 {
    color: #d1fae5;
}

.dark .text-green-100 {
    color: #ecfdf5;
}

/* Fix for status badges - Better contrast */
.dark .badge.bg-success {
    background-color: #059669;
    color: #ffffff;
}

.dark .badge.bg-primary {
    background-color: #2563eb;
    color: #ffffff;
}

.dark .badge.bg-secondary {
    background-color: #475569;
    color: #ffffff;
}

.dark .badge.bg-info {
    background-color: #0891b2;
    color: #ffffff;
}

.dark .badge.bg-warning {
    background-color: #d97706;
    color: #ffffff;
}

.dark .badge.bg-danger {
    background-color: #dc2626;
    color: #ffffff;
}

/* Fix for billing page cards - Better backgrounds */
.dark .card.bg-primary {
    background-color: #1e3a8a;
    color: #e2e8f0;
}

.dark .card.bg-success {
    background-color: #064e3b;
    color: #e2e8f0;
}

.dark .card.bg-info {
    background-color: #0c4a6e;
    color: #e2e8f0;
}

.dark .card.bg-warning {
    background-color: #451a03;
    color: #e2e8f0;
}

.dark .card.bg-danger {
    background-color: #450a0a;
    color: #e2e8f0;
}

/* Fix for billing page buttons - Better contrast */
.dark .btn.btn-success {
    background-color: #059669;
    color: #ffffff;
    border-color: #059669;
}

.dark .btn.btn-success:hover {
    background-color: #047857;
    color: #ffffff;
    border-color: #047857;
}

.dark .btn.btn-primary {
    background-color: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.dark .btn.btn-primary:hover {
    background-color: #1d4ed8;
    color: #ffffff;
    border-color: #1d4ed8;
}

.dark .btn.btn-info {
    background-color: #0891b2;
    color: #ffffff;
    border-color: #0891b2;
}

.dark .btn.btn-info:hover {
    background-color: #0e7490;
    color: #ffffff;
    border-color: #0e7490;
}

.dark .btn.btn-warning {
    background-color: #d97706;
    color: #ffffff;
    border-color: #d97706;
}

.dark .btn.btn-warning:hover {
    background-color: #b45309;
    color: #ffffff;
    border-color: #b45309;
}

.dark .btn.btn-danger {
    background-color: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}

.dark .btn.btn-danger:hover {
    background-color: #b91c1c;
    color: #ffffff;
    border-color: #b91c1c;
}

/* Fix for billing page text - Better readability */
.dark .text-primary {
    color: #60a5fa;
}

.dark .text-success {
    color: #34d399;
}

.dark .text-info {
    color: #22d3ee;
}

.dark .text-warning {
    color: #fbbf24;
}

.dark .text-danger {
    color: #f87171;
}

.dark .text-muted {
    color: #94a3b8;
}

/* Fix for billing page borders */
.dark .border-primary {
    border-color: #3b82f6;
}

.dark .border-success {
    border-color: #10b981;
}

.dark .border-info {
    border-color: #06b6d4;
}

.dark .border-warning {
    border-color: #f59e0b;
}

.dark .border-danger {
    border-color: #ef4444;
}

/* Fix for billing page backgrounds */
.dark .bg-primary {
    background-color: #1e3a8a;
}

.dark .bg-success {
    background-color: #064e3b;
}

.dark .bg-info {
    background-color: #0c4a6e;
}

.dark .bg-warning {
    background-color: #451a03;
}

.dark .bg-danger {
    background-color: #450a0a;
}

/* Fix for billing page alerts */
.dark .alert-primary {
    background-color: #1e3a8a;
    color: #dbeafe;
    border-color: #3b82f6;
}

.dark .alert-success {
    background-color: #064e3b;
    color: #d1fae5;
    border-color: #10b981;
}

.dark .alert-info {
    background-color: #0c4a6e;
    color: #cffafe;
    border-color: #06b6d4;
}

.dark .alert-warning {
    background-color: #451a03;
    color: #fef3c7;
    border-color: #f59e0b;
}

.dark .alert-danger {
    background-color: #450a0a;
    color: #fee2e2;
    border-color: #ef4444;
}

/* Fix for billing page form elements */
.dark .form-control {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
}

.dark .form-control:focus {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

.dark .form-select {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
}

.dark .form-select:focus {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

/* Fix for billing page labels */
.dark .form-label {
    color: #e2e8f0;
}

.dark label {
    color: #e2e8f0;
}

/* Fix for billing page text */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: #f8fafc;
}

.dark p {
    color: #e2e8f0;
}

.dark small {
    color: #94a3b8;
}

/* Fix for billing page links */
.dark a {
    color: #60a5fa;
}

.dark a:hover {
    color: #93c5fd;
}

/* Fix for billing page tables */
.dark .table {
    color: #e2e8f0;
}

.dark .table th {
    background-color: #334155;
    color: #e2e8f0;
    border-color: #475569;
}

.dark .table td {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
}

.dark .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: #334155;
}

.dark .table-hover > tbody > tr:hover > td {
    background-color: #475569;
}

/* Fix for billing page modals */
.dark .modal-content {
    background-color: #1e293b;
    border-color: #475569;
}

.dark .modal-header {
    background-color: #334155;
    border-color: #64748b;
}

.dark .modal-body {
    background-color: #1e293b;
}

.dark .modal-footer {
    background-color: #334155;
    border-color: #64748b;
}

/* Fix for billing page dropdowns */
.dark .dropdown-menu {
    background-color: #1e293b;
    border-color: #475569;
}

.dark .dropdown-item {
    color: #e2e8f0;
}

.dark .dropdown-item:hover {
    background-color: #334155;
    color: #f8fafc;
}

/* Fix for billing page tooltips */
.dark .tooltip-inner {
    background-color: #0f172a;
    color: #e2e8f0;
}

.dark .tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #0f172a;
}

.dark .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #0f172a;
}

.dark .tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: #0f172a;
}

.dark .tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: #0f172a;
}

/* Fix for billing page popovers */
.dark .popover {
    background-color: #1e293b;
    border-color: #475569;
}

.dark .popover-header {
    background-color: #334155;
    border-color: #64748b;
    color: #e2e8f0;
}

.dark .popover-body {
    background-color: #1e293b;
    color: #e2e8f0;
}

/* Fix for billing page progress bars */
.dark .progress {
    background-color: #475569;
}

.dark .progress-bar {
    background-color: #3b82f6;
}

.dark .progress-bar.bg-success {
    background-color: #10b981;
}

.dark .progress-bar.bg-info {
    background-color: #06b6d4;
}

.dark .progress-bar.bg-warning {
    background-color: #f59e0b;
}

.dark .progress-bar.bg-danger {
    background-color: #ef4444;
}

/* Fix for billing page list groups */
.dark .list-group-item {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
}

.dark .list-group-item:hover {
    background-color: #334155;
}

.dark .list-group-item.active {
    background-color: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

/* Fix for billing page breadcrumbs */
.dark .breadcrumb {
    background-color: #1e293b;
}

.dark .breadcrumb-item {
    color: #e2e8f0;
}

.dark .breadcrumb-item.active {
    color: #94a3b8;
}

.dark .breadcrumb-item + .breadcrumb-item::before {
    color: #64748b;
}

/* Fix for billing page pagination */
.dark .page-link {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
}

.dark .page-link:hover {
    background-color: #334155;
    color: #f8fafc;
}

.dark .page-item.active .page-link {
    background-color: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

.dark .page-item.disabled .page-link {
    background-color: #1e293b;
    color: #64748b;
    border-color: #475569;
}

/* Comprehensive Dark Mode Fixes - Eliminate All White Backgrounds */

/* Fix for main content areas */
.dark .container-fluid {
    background-color: #0f172a;
}

.dark .main-content {
    background-color: #0f172a;
}

.dark .content-wrapper {
    background-color: #0f172a;
}

/* Fix for all cards and containers */
.dark .card {
    background-color: #1e293b;
    border-color: #475569;
}

.dark .card-header {
    background-color: #334155;
    border-color: #64748b;
}

.dark .card-body {
    background-color: #1e293b;
}

.dark .card-footer {
    background-color: #334155;
    border-color: #64748b;
}

/* Fix for dashboard overview cards */
.dark .overview-card {
    background-color: #1e293b;
    border-color: #475569;
}

.dark .stats-card {
    background-color: #1e293b;
    border-color: #475569;
}

.dark .metric-card {
    background-color: #1e293b;
    border-color: #475569;
}

/* Fix for search bars and inputs */
.dark input[type="text"],
.dark input[type="search"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark textarea,
.dark select {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
}

.dark input[type="text"]:focus,
.dark input[type="search"]:focus,
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="number"]:focus,
.dark textarea:focus,
.dark select:focus {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #64748b;
}

/* Fix for dropdown menus */
.dark .dropdown-menu {
    background-color: #1e293b;
    border-color: #475569;
}

.dark .dropdown-item {
    color: #e2e8f0;
}

.dark .dropdown-item:hover {
    background-color: #334155;
    color: #f8fafc;
}

/* Fix for charts and graphs */
.dark .chart-container {
    background-color: #1e293b;
}

.dark .chart {
    background-color: #1e293b;
}

.dark .graph {
    background-color: #1e293b;
}

.dark canvas {
    background-color: #1e293b;
}

/* Fix for timeline elements */
.dark .timeline {
    background-color: #1e293b;
}

.dark .timeline-item {
    background-color: #1e293b;
    border-color: #475569;
}

.dark .timeline-card {
    background-color: #1e293b;
    border-color: #475569;
}

/* Fix for report cards */
.dark .report-card {
    background-color: #1e293b;
    border-color: #475569;
}

.dark .global-report {
    background-color: #1e293b;
    border-color: #475569;
}

.dark .distribution-card {
    background-color: #1e293b;
    border-color: #475569;
}

/* Fix for status cards */
.dark .status-card {
    background-color: #1e293b;
    border-color: #475569;
}

.dark .email-status-card {
    background-color: #1e293b;
    border-color: #475569;
}

/* Fix for billing page specific elements */
.dark .billing-container {
    background-color: #0f172a;
}

.dark .subscription-details {
    background-color: #1e293b;
    border-color: #475569;
}

.dark .subscription-active {
    background-color: #064e3b;
    border-color: #10b981;
}

.dark .update-section {
    background-color: #1e293b;
    border-color: #475569;
}

/* Fix for all white backgrounds */
.dark .bg-white {
    background-color: #1e293b;
}

.dark .bg-light {
    background-color: #1e293b;
}

.dark .bg-default {
    background-color: #1e293b;
}

/* Fix for text colors on dark backgrounds */
.dark .text-dark {
    color: #e2e8f0;
}

.dark .text-muted {
    color: #94a3b8;
}

.dark .text-secondary {
    color: #cbd5e1;
}

/* Fix for borders */
.dark .border {
    border-color: #475569;
}

.dark .border-light {
    border-color: #475569;
}

.dark .border-default {
    border-color: #475569;
}

/* Fix for tables */
.dark .table {
    background-color: #1e293b;
    color: #e2e8f0;
}

.dark .table th {
    background-color: #334155;
    color: #e2e8f0;
    border-color: #475569;
}

.dark .table td {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
}

.dark .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: #334155;
}

.dark .table-hover > tbody > tr:hover > td {
    background-color: #475569;
}

/* Fix for buttons */
.dark .btn-light {
    background-color: #475569;
    color: #e2e8f0;
    border-color: #64748b;
}

.dark .btn-light:hover {
    background-color: #64748b;
    color: #f8fafc;
}

.dark .btn-outline-light {
    background-color: transparent;
    color: #e2e8f0;
    border-color: #e2e8f0;
}

.dark .btn-outline-light:hover {
    background-color: #e2e8f0;
    color: #0f172a;
}

/* Fix for alerts */
.dark .alert-light {
    background-color: #334155;
    color: #e2e8f0;
    border-color: #475569;
}

/* Fix for badges */
.dark .badge-light {
    background-color: #475569;
    color: #e2e8f0;
}

/* Fix for modals */
.dark .modal-content {
    background-color: #1e293b;
    border-color: #475569;
}

.dark .modal-header {
    background-color: #334155;
    border-color: #64748b;
}

.dark .modal-body {
    background-color: #1e293b;
}

.dark .modal-footer {
    background-color: #334155;
    border-color: #64748b;
}

/* Fix for tooltips */
.dark .tooltip-inner {
    background-color: #0f172a;
    color: #e2e8f0;
}

.dark .tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #0f172a;
}

.dark .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #0f172a;
}

.dark .tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: #0f172a;
}

.dark .tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: #0f172a;
}

/* Fix for popovers */
.dark .popover {
    background-color: #1e293b;
    border-color: #475569;
}

.dark .popover-header {
    background-color: #334155;
    border-color: #64748b;
    color: #e2e8f0;
}

.dark .popover-body {
    background-color: #1e293b;
    color: #e2e8f0;
}

/* Fix for progress bars */
.dark .progress {
    background-color: #475569;
}

.dark .progress-bar {
    background-color: #3b82f6;
}

/* Fix for list groups */
.dark .list-group-item {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
}

.dark .list-group-item:hover {
    background-color: #334155;
}

.dark .list-group-item.active {
    background-color: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

/* Fix for breadcrumbs */
.dark .breadcrumb {
    background-color: #1e293b;
}

.dark .breadcrumb-item {
    color: #e2e8f0;
}

.dark .breadcrumb-item.active {
    color: #94a3b8;
}

.dark .breadcrumb-item + .breadcrumb-item::before {
    color: #64748b;
}

/* Fix for pagination */
.dark .page-link {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
}

.dark .page-link:hover {
    background-color: #334155;
    color: #f8fafc;
}

.dark .page-item.active .page-link {
    background-color: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

.dark .page-item.disabled .page-link {
    background-color: #1e293b;
    color: #64748b;
    border-color: #475569;
}

/* Fix for form elements */
.dark .form-control {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
}

.dark .form-control:focus {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

.dark .form-select {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
}

.dark .form-select:focus {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

.dark .form-label {
    color: #e2e8f0;
}

.dark label {
    color: #e2e8f0;
}

/* Fix for headings and text */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: #f8fafc;
}

.dark p {
    color: #e2e8f0;
}

.dark small {
    color: #94a3b8;
}

/* Fix for links */
.dark a {
    color: #60a5fa;
}

.dark a:hover {
    color: #93c5fd;
}

/* Fix for specific page elements */
.dark .dashboard-overview {
    background-color: #0f172a;
}

.dark .timeline-container {
    background-color: #0f172a;
}

.dark .send-report-container {
    background-color: #0f172a;
}

.dark .billing-status-container {
    background-color: #0f172a;
}

/* Fix for any remaining white elements */
.dark * {
    background-color: inherit;
}

.dark *[style*="background-color: white"],
.dark *[style*="background-color: #fff"],
.dark *[style*="background-color: #ffffff"] {
    background-color: #1e293b !important;
}

.dark *[style*="color: black"],
.dark *[style*="color: #000"],
.dark *[style*="color: #000000"] {
    color: #e2e8f0 !important;
}
  
/* Aggressive Dark Mode Overrides - Eliminate ALL White Backgrounds */

/* Force all white backgrounds to dark */
.dark *[class*="bg-white"] {
    background-color: #1e293b !important;
}

.dark *[class*="bg-gray-50"] {
    background-color: #0f172a !important;
}

.dark *[class*="bg-gray-100"] {
    background-color: #1e293b !important;
}

/* Fix for overview cards specifically */
.dark .overview-card,
.dark .stats-card,
.dark .metric-card,
.dark .dashboard-card {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

/* Fix for search input */
.dark input[type="text"],
.dark input[type="search"],
.dark .search-input,
.dark .form-control {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #64748b !important;
}

.dark input[type="text"]::placeholder,
.dark input[type="search"]::placeholder {
    color: #94a3b8 !important;
}

/* Fix for chart containers and legends */
.dark .chart-container,
.dark .chart-wrapper,
.dark .chart-area {
    background-color: #1e293b !important;
}

.dark .chart-legend,
.dark .legend-item {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Fix for any remaining white elements */
.dark .bg-white,
.dark .bg-light,
.dark .bg-default {
    background-color: #1e293b !important;
}

/* Fix for text colors on dark backgrounds */
.dark .text-dark,
.dark .text-black {
    color: #e2e8f0 !important;
}

/* Fix for borders on dark backgrounds */
.dark .border-light,
.dark .border-default {
    border-color: #475569 !important;
}

/* Fix for any Bootstrap or framework classes */
.dark .card-body,
.dark .card-header,
.dark .card-footer {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

.dark .container,
.dark .container-fluid {
    background-color: #0f172a !important;
}

.dark .row,
.dark .col,
.dark .col-* {
    background-color: transparent !important;
}

/* Fix for any remaining white backgrounds in specific components */
.dark .email-status-card,
.dark .status-card,
.dark .metric-card,
.dark .overview-metric {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

/* Fix for any chart labels or text elements */
.dark .chart-label,
.dark .axis-label,
.dark .tick-label {
    color: #e2e8f0 !important;
}

/* Fix for any remaining white backgrounds in the entire app */
.dark * {
    background-color: inherit;
}

.dark body {
    background-color: #0f172a !important;
}

.dark main,
.dark .main-content,
.dark .content-area {
    background-color: #0f172a !important;
}
  
/* Billing Section Specific Fixes - Fix Light Green Background Issues */

/* Fix the light green background card in billing section */
.dark .subscription-active,
.dark .update-section,
.dark .billing-card,
.dark .subscription-details-card {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

/* Fix text colors in billing section for better contrast */
.dark .subscription-active h3,
.dark .subscription-active h4,
.dark .subscription-active h5,
.dark .update-section h3,
.dark .update-section h4,
.dark .update-section h5 {
    color: #e2e8f0 !important;
}

.dark .subscription-active p,
.dark .subscription-active span,
.dark .update-section p,
.dark .update-section span {
    color: #cbd5e1 !important;
}

/* Fix the green badges to be more subtle in dark mode */
.dark .badge-success,
.dark .badge-active,
.dark .status-badge,
.dark .subscription-status {
    background-color: #064e3b !important;
    color: #10b981 !important;
    border-color: #10b981 !important;
}

/* Fix any remaining light green backgrounds */
.dark .bg-green-50,
.dark .bg-green-100,
.dark .bg-green-200 {
    background-color: #1e293b !important;
}

/* Fix text on any green backgrounds */
.dark .text-green-600,
.dark .text-green-700,
.dark .text-green-800 {
    color: #10b981 !important;
}

/* Fix any light green text */
.dark .text-green-400,
.dark .text-green-500 {
    color: #34d399 !important;
}

/* Fix any remaining light backgrounds in billing */
.dark .billing-container *,
.dark .subscription-container * {
    background-color: inherit;
}

.dark .billing-container,
.dark .subscription-container {
    background-color: #0f172a !important;
}

/* Fix any form elements in billing section */
.dark .billing-container input,
.dark .billing-container select,
.dark .billing-container textarea {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #64748b !important;
}

/* Fix any buttons in billing section */
.dark .billing-container .btn,
.dark .subscription-container .btn {
    background-color: #475569 !important;
    color: #e2e8f0 !important;
    border-color: #64748b !important;
}

.dark .billing-container .btn:hover,
.dark .subscription-container .btn:hover {
    background-color: #64748b !important;
    color: #f8fafc !important;
}

/* Fix any specific billing section classes */
.dark .subscription-info,
.dark .billing-info,
.dark .payment-info {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

.dark .subscription-info *,
.dark .billing-info *,
.dark .payment-info * {
    color: #e2e8f0 !important;
}
  
/* Agency Dashboard Number Fixes - Make All Numbers White */

/* Fix for any blue numbers in dark mode */
.dark .text-blue-500,
.dark .text-blue-600,
.dark .text-blue-700,
.dark .text-blue-800,
.dark .text-blue-900 {
    color: #e2e8f0 !important;
}

/* Fix for any colored numbers in dashboard */
.dark .dashboard-number,
.dark .metric-number,
.dark .stat-number,
.dark .count-number {
    color: #e2e8f0 !important;
}

/* Fix for any numbers in advertiser sections */
.dark .advertiser-count,
.dark .email-count,
.dark .active-count {
    color: #e2e8f0 !important;
}

/* Fix for any numbers in statistics cards */
.dark .stats-card .number,
.dark .metric-card .number,
.dark .overview-card .number {
    color: #e2e8f0 !important;
}

/* Fix for any remaining colored text that should be white */
.dark .text-primary,
.dark .text-info,
.dark .text-success,
.dark .text-warning {
    color: #e2e8f0 !important;
}

/* Fix for any numbers in lists or bullet points */
.dark li strong,
.dark li b,
.dark .list-item strong,
.dark .list-item b {
    color: #e2e8f0 !important;
}

/* Fix for any numbers in agency dashboard specifically */
.dark .agency-dashboard *,
.dark .dashboard-content * {
    color: inherit;
}

.dark .agency-dashboard .number,
.dark .dashboard-content .number {
    color: #e2e8f0 !important;
}

/* Fix for any numbers in advertiser lists */
.dark .advertiser-list .count,
.dark .advertiser-item .count,
.dark .advertiser-name + strong,
.dark .advertiser-name + b {
    color: #e2e8f0 !important;
}

/* Fix for any numbers in email statistics */
.dark .email-stats .number,
.dark .email-metrics .number,
.dark .usage-stats .number {
    color: #e2e8f0 !important;
}

/* Universal fix for any numbers that should be white */
.dark *:not(.btn):not(.badge):not(.alert) {
    color: inherit;
}

.dark .number,
.dark .count,
.dark .metric,
.dark .stat {
    color: #e2e8f0 !important;
}