:root {
  --accent-color: var(--vtc-primary, #ff4c49) !important;
  --accent-hover: var(--vtc-primary-dark, #b71c1c) !important;
}

.btn-primary {
  background-color: var(--accent-color) !important;
  color: #000 !important;
  border-color: var(--accent-color) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--accent-hover) !important;
  color: #000 !important;
  border-color: var(--accent-hover) !important;
}
.btn-outline-primary {
  color: var(--accent-color) !important;
  background-color: #fff !important;
  border-color: var(--accent-color) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--accent-color) !important;
  color: #000 !important;
  border-color: var(--accent-color) !important;
} 

@media (prefers-color-scheme: light) {
  body {
    background: #f8f9fa !important;
    color: #222 !important;
  }
  .card, .table, .form-control, .alert {
    background: #fff !important;
    color: #222 !important;
    border-color: #e0e0e0 !important;
  }
  .table th, .table td {
    background: #fff !important;
    color: #222 !important;
    border-color: #e0e0e0 !important;
  }
  .form-control {
    background: #fff !important;
    color: #222 !important;
    border-color: #ccc !important;
  }
  .btn-primary, .btn-outline-primary {
    color: #000 !important;
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
  }
  .btn-primary:hover, .btn-primary:focus, .btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--accent-hover) !important;
    color: #000 !important;
    border-color: var(--accent-hover) !important;
  }
  .table, .table-dark, .table-bordered, .table-hover, .table th, .table td {
    --bs-table-accent-bg: transparent !important;
    box-shadow: none !important;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a202c !important;
    color: #e2e8f0 !important;
  }
  
  .card, .table, .alert {
    background-color: #2d3748 !important;
    color: #e2e8f0 !important;
    border-color: #495057 !important;
  }
  
  .table th, .table td {
    background-color: #2d3748 !important;
    color: #e2e8f0 !important;
    border-color: #495057 !important;
  }
  
  .form-control, .form-select {
    background-color: #1a202c !important;
    color: #e2e8f0 !important;
    border-color: #495057 !important;
  }
  
  .form-control:focus, .form-select:focus {
    background-color: #1a202c !important;
    color: #e2e8f0 !important;
    border-color: #63b3ed !important;
    box-shadow: 0 0 0 0.2rem rgba(99, 179, 237, 0.25) !important;
  }
  
  .btn-primary {
    background-color: #63b3ed !important;
    color: #1a202c !important;
    border-color: #63b3ed !important;
  }
  
  .btn-primary:hover, .btn-primary:focus {
    background-color: #4299e1 !important;
    color: #1a202c !important;
    border-color: #4299e1 !important;
  }
  
  .btn-outline-primary {
    color: #63b3ed !important;
    background-color: transparent !important;
    border-color: #63b3ed !important;
  }
  
  .btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: #63b3ed !important;
    color: #1a202c !important;
    border-color: #63b3ed !important;
  }
  
  .btn-success {
    background-color: #48bb78 !important;
    color: #1a202c !important;
    border-color: #48bb78 !important;
  }
  
  .btn-success:hover, .btn-success:focus {
    background-color: #38a169 !important;
    color: #1a202c !important;
    border-color: #38a169 !important;
  }
  
  .btn-danger {
    background-color: #f56565 !important;
    color: #1a202c !important;
    border-color: #f56565 !important;
  }
  
  .btn-danger:hover, .btn-danger:focus {
    background-color: #e53e3e !important;
    color: #1a202c !important;
    border-color: #e53e3e !important;
  }
  
  .btn-warning {
    background-color: #ed8936 !important;
    color: #1a202c !important;
    border-color: #ed8936 !important;
  }
  
  .btn-warning:hover, .btn-warning:focus {
    background-color: #dd6b20 !important;
    color: #1a202c !important;
    border-color: #dd6b20 !important;
  }
  
  .btn-secondary {
    background-color: #718096 !important;
    color: #1a202c !important;
    border-color: #718096 !important;
  }
  
  .btn-secondary:hover, .btn-secondary:focus {
    background-color: #4a5568 !important;
    color: #1a202c !important;
    border-color: #4a5568 !important;
  }
  
  .table-dark.table-hover tbody tr:hover,
  .table.table-hover tbody tr:hover {
    background-color: #4a5568 !important;
    color: #e2e8f0 !important;
  }
  
  .table, .table-dark, .table-bordered, .table-hover, .table th, .table td {
    --bs-table-accent-bg: transparent !important;
    box-shadow: none !important;
  }
  
  .navbar {
    background-color: #2d3748 !important;
    border-bottom: 1px solid #495057 !important;
  }
  
  .navbar-brand, .navbar-nav .nav-link {
    color: #e2e8f0 !important;
  }
  
  .navbar-nav .nav-link:hover {
    color: #63b3ed !important;
  }
  
  .navbar-text {
    color: #a0aec0 !important;
  }
  
  .alert-info {
    background-color: #2d3748 !important;
    color: #63b3ed !important;
    border-color: #63b3ed !important;
  }
  
  .alert-success {
    background-color: #2d3748 !important;
    color: #48bb78 !important;
    border-color: #48bb78 !important;
  }
  
  .alert-warning {
    background-color: #2d3748 !important;
    color: #ed8936 !important;
    border-color: #ed8936 !important;
  }
  
  .alert-danger {
    background-color: #2d3748 !important;
    color: #f56565 !important;
    border-color: #f56565 !important;
  }
  
  .text-muted {
    color: #a0aec0 !important;
  }
  
  .text-primary {
    color: #63b3ed !important;
  }
  
  .text-success {
    color: #48bb78 !important;
  }
  
  .text-warning {
    color: #ed8936 !important;
  }
  
  .text-danger {
    color: #f56565 !important;
  }
}
@media (prefers-color-scheme: light) {
  .table.table-hover tbody tr:hover {
    background-color: #f5f5f5 !important;
    color: #222 !important;
  }
  .table-dark, .table-dark th, .table-dark td, .table-dark.table-hover tbody tr:hover {
    background-color: #fff !important;
    color: #222 !important;
    border-color: #e0e0e0 !important;
  }
} 

/* Modal appearance for dark and light mode */
@media (prefers-color-scheme: dark) {
  .modal-content {
    background-color: #2d3748 !important;
    color: #e2e8f0 !important;
    border-color: #495057 !important;
  }
  .modal-header, .modal-body, .modal-footer {
    background-color: #2d3748 !important;
    color: #e2e8f0 !important;
    border-color: #495057 !important;
  }
  .modal-header {
    border-bottom-color: #495057 !important;
  }
  .modal-footer {
    border-top-color: #495057 !important;
  }
  .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
  }
}
@media (prefers-color-scheme: light) {
  .modal-content {
    background-color: #fff !important;
    color: #222 !important;
    border-color: #e0e0e0 !important;
  }
  .modal-header, .modal-body, .modal-footer {
    background-color: #fff !important;
    color: #222 !important;
    border-color: #e0e0e0 !important;
  }
  .btn-close {
    filter: none;
  }
}