/* dark-theme.css */

/* 
  Use CSS variables to unify the dark color palette and make it easier 
  to adjust site-wide. You can change these once to update the entire theme.
*/

:root {
  /* Core background and text colors */
  --bs-body-bg: #121212;
  --bs-body-color: #e0e0e0;
  
  /* Navbar, card, and general surface colors */
  --bs-dark-surface-1: #1e1e1e;
  --bs-dark-surface-2: #222222;
  --bs-dark-surface-3: #2a2a2a;
  
  /* Borders, lines, and outlines */
  --bs-dark-border: #333333;
  --bs-dark-border-light: #444444;
  
  /* Link and primary brand colors */
  --bs-link-color: #82b1ff;
  --bs-link-hover-color: #b2c9ff;
  --bs-primary: #2196f3; /* Adjust as desired for your brand */

  /* Success and danger background colors for alerts, etc. */
  --bs-success-bg: #1f3c1f;
  --bs-success-text: #c2f0c2;
  --bs-danger-bg: #3c1f1f;
  --bs-danger-text: #f0c2c2;
}

/* --- GLOBAL RESET --- */
body {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  
}

/* Make sure our anchors/links are also adjusted for the dark scheme */
a,
.nav-link,
.navbar-brand {
  color: var(--bs-link-color) !important;
}
a:hover,
.nav-link:hover,
.navbar-brand:hover {
  color: var(--bs-link-hover-color) !important;
  text-decoration: none;
}

/* --- NAVBAR --- */
/* Using .navbar-dark plus these overrides for a uniform dark look */
.navbar,
.navbar-dark {
  background-color: var(--bs-dark-surface-2) !important;
  color: #fff !important;
}
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-brand {
  color: #fff !important;
}
.navbar-toggler {
  border-color: #666 !important;
}

/* --- CARD --- */
.card,
.card-body {
  background-color: var(--bs-dark-surface-1) !important;
  color: #f8f9fa !important;
  border: 1px solid var(--bs-dark-border) !important;
}
.card-header {
  background-color: var(--bs-dark-surface-1) !important;
  border-bottom: 1px solid var(--bs-dark-border) !important;
}

/* List groups inside cards */
.list-group-item {
  background-color: var(--bs-dark-surface-1) !important;
  color: #f8f9fa !important;
  border-color: var(--bs-dark-border-light) !important;
}

/* --- FORMS --- */
.form-control,
.input-group-text,
.form-select {
  background-color: var(--bs-dark-surface-1) !important;
  color: #f0f0f0 !important;
  border: 1px solid var(--bs-dark-border-light) !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(33,150,243,0.25) !important;
}
.form-check-input {
  background-color: var(--bs-dark-surface-1) !important;
  border: 1px solid var(--bs-dark-border) !important;
}

/* --- BUTTONS --- */
.btn {
  border-radius: 0.25rem; /* adjust as you like */
  border: none;
}

/* Primary button in dark theme */
.btn.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus {
  background-color: #1b82c8 !important; /* a slightly darker shade */
  border-color: #1b82c8 !important;
}

/* Secondary or "dark" button variant, if needed */
.btn.btn-secondary {
  background-color: #444 !important;
  color: #eee !important;
  border: 1px solid #555 !important;
}
.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
  background-color: #555 !important;
}

/* --- FOOTER & OTHER BG UTILITIES --- */
.bg-dark {
  background-color: var(--bs-dark-surface-2) !important;
  color: #eee !important;
}
.bg-secondary {
  background-color: var(--bs-dark-surface-3) !important;
  color: #fff !important;
}
footer {
  background-color: var(--bs-dark-surface-2) !important;
  color: #eee !important;
}

/* --- TABLES --- */
.table {
  background-color: var(--bs-dark-surface-2) !important;
  color: #fff !important;
  border-color: var(--bs-dark-border) !important;
}
.table thead {
  background-color: var(--bs-dark-surface-3) !important;
  color: #fff !important;
  border-bottom: 1px solid var(--bs-dark-border-light);
}
.table tbody tr {
  border-top: 1px solid var(--bs-dark-border-light);
}
.table tbody tr:nth-child(even) {
  background-color: var(--bs-dark-surface-1);
}
.table-hover tbody tr:hover {
  background-color: #2e2e2e;
}

/* --- ALERTS --- */
.alert {
  background-color: var(--bs-dark-surface-1) !important;
  border-color: var(--bs-dark-border) !important;
  color: #f0f0f0 !important;
}
.alert-success {
  background-color: var(--bs-success-bg) !important;
  color: var(--bs-success-text) !important;
  border-color: #2f542f !important;
}
.alert-danger {
  background-color: var(--bs-danger-bg) !important;
  color: var(--bs-danger-text) !important;
  border-color: #542f2f !important;
}
.alert-warning {
  background-color: #4a3f1f !important;
  color: #ffecb3 !important; /* sample goldish text */
  border-color: #665333 !important;
}
.alert-info {
  background-color: #1f3c43 !important;
  color: #c2dfe8 !important;
  border-color: #2f535a !important;
}

/* --- MODALS (if you use Bootstrap modals) --- */
.modal-content {
  background-color: var(--bs-dark-surface-1) !important;
  color: #f0f0f0 !important;
  border: none;
}
.modal-header,
.modal-footer {
  background-color: var(--bs-dark-surface-2) !important;
  border: none;
}
.modal-header .btn-close {
  filter: invert(1) hue-rotate(180deg); /* make close button visible on dark */
}
.modal-backdrop.show {
  background-color: #000000cc; /* semi-transparent black backdrop */
}

/* --- DROPDOWNS --- */
.dropdown-menu {
  background-color: var(--bs-dark-surface-1) !important;
  border: 1px solid var(--bs-dark-border-light) !important;
}
.dropdown-item {
  color: #f0f0f0 !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--bs-dark-surface-2) !important;
  color: #fff !important;
}

/* --- CUSTOM SCROLLBARS (optional) --- */
/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #2a2a2a;
}
::-webkit-scrollbar-thumb {
  background-color: #444;
  border-radius: 5px;
  border: 2px solid #2a2a2a;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

/* That’s it! Modify or expand to suit your brand’s needs. */