:root {
    --primary-100: #d4eaf7 !important;
    --primary-200: #b6ccd8 !important;
    --primary-300: #3b3c3d !important;
    --accent-100: #71c4ef !important;
    --accent-200: #00668c !important;
    --text-100: #1d1c1c !important;
    --text-200: #313d44 !important;
    --bg-100: #fffefb !important;
    --bg-200: #f5f4f1 !important;
    --bg-300: #cccbc8 !important;
  }
  
  body {
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(135deg, var(--primary-100), var(--accent-100)) !important;
    color: var(--text-100) !important;
    font-family: 'Segoe UI', sans-serif;
  }
  
  a {
    color: var(--accent-200) !important;
  }
  
  a:hover {
    color: var(--accent-100) !important;
  }
  
  .btn-primary {
    background-color: var(--accent-200) !important;
    border-color: var(--accent-200) !important;
    color: #fff !important;
  }
  
  .btn-primary:hover {
    background-color: var(--accent-100) !important;
    border-color: var(--accent-100) !important;
  }
  
  .form-control {
    background-color: var(--bg-200) !important;
    color: var(--text-100) !important;
    border: 1px solid var(--primary-200) !important;
  }
  
  .form-control:focus {
    border-color: var(--accent-200) !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 102, 140, 0.25) !important;
  }
  
  h1, h3, label {
    color: var(--text-200) !important;
  }
  
  .bg-glass {
    background-color: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
  }
  
  body {
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(135deg, var(--primary-100), var(--accent-100)) !important;
    font-family: 'Segoe UI', sans-serif;
    color: var(--text-100) !important;
  }
  
  /* Pagination active state - white text */
  .active > .page-link, 
  .page-link.active,
  .page-item.active .page-link {
    z-index: 3;
    color: #fff !important;
    background-color: var(--bs-pagination-active-bg) !important;
    border-color: var(--bs-pagination-active-border-color) !important;
  }
  
  /* Ensure active pagination text is always white */
  .page-item.active .page-link,
  .page-item.active > .page-link {
    color: #fff !important;
  }
  
  /* Badge styling - Bootstrap 5 uses bg-* classes */
  .badge {
    font-weight: 500 !important;
    padding: 0.35em 0.65em !important;
    display: inline-block !important;
  }
  
  /* Success badge - white text on green background */
  .badge.bg-success,
  span.badge.bg-success,
  td .badge.bg-success,
  .table .badge.bg-success {
    background-color: #198754 !important;
    color: #fff !important;
  }
  
  /* Danger badge - white text on red background */
  .badge.bg-danger,
  span.badge.bg-danger,
  td .badge.bg-danger,
  .table .badge.bg-danger {
    background-color: #dc3545 !important;
    color: #fff !important;
  }
  
  /* Secondary badge - white text on gray background */
  .badge.bg-secondary,
  span.badge.bg-secondary,
  td .badge.bg-secondary,
  .table .badge.bg-secondary {
    background-color: #6c757d !important;
    color: #fff !important;
  }
  
  /* Warning badge - dark text on yellow background */
  .badge.bg-warning,
  span.badge.bg-warning,
  td .badge.bg-warning,
  .table .badge.bg-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
  }
  
  /* Info badge - white text on blue background */
  .badge.bg-info,
  span.badge.bg-info,
  td .badge.bg-info,
  .table .badge.bg-info {
    background-color: #0dcaf0 !important;
    color: #000 !important;
  }
  
  /* Ensure text-white class works on badges */
  .badge.text-white {
    color: #fff !important;
  }
  
  /* Make status icons white in badges - use CSS to force white color */
  .badge.text-white {
    color: #fff !important;
  }
  
  /* Ensure all text and symbols in white badges are white */
  .badge.bg-success.text-white,
  .badge.bg-danger.text-white,
  .badge.bg-info.text-white {
    color: #fff !important;
  }
  
  .badge.bg-success.text-white *,
  .badge.bg-danger.text-white *,
  .badge.bg-info.text-white * {
    color: #fff !important;
  }
  
  /* Yellow/Warning card should have black text */
  .card.bg-warning {
    color: #000 !important;
  }
  
  .card.bg-warning .text-dark,
  .card.bg-warning h3,
  .card.bg-warning small {
    color: #000 !important;
  }
  
  /* Blue, Green and Red cards should have white text and white icons */
  .card.bg-primary.text-white,
  .card.bg-success.text-white,
  .card.bg-danger.text-white {
    color: #fff !important;
  }
  
  .card.bg-primary.text-white h3,
  .card.bg-primary.text-white small,
  .card.bg-primary.text-white .text-white,
  .card.bg-success.text-white h3,
  .card.bg-success.text-white small,
  .card.bg-success.text-white .text-white,
  .card.bg-danger.text-white h3,
  .card.bg-danger.text-white small,
  .card.bg-danger.text-white .text-white {
    color: #fff !important;
  }
  
  /* Ensure emoji icons are white in colored cards */
  .card.bg-primary.text-white small,
  .card.bg-success.text-white small,
  .card.bg-danger.text-white small {
    color: #fff !important;
    filter: none !important;
  }
  