/* Dark mode theme - variables */
[data-theme="dark"] {
  --cowocogreen: #375951;
  --cowocogray: #344352;
  --mdwblue: #0e64bf;
  --white: #f8f9fa;
  --black: #121212;
  --text-dark: #e9ecef;
  --text-light: #adb5bd;

  /* Dark mode specific variables */
  --dark-bg: #121212;
  --dark-bg-secondary: #1e1e1e;
  --dark-bg-tertiary: #2d2d2d;
  --dark-border: #444444;

  /* Accessible color combinations for contrast */
  --header-bg: var(--cowocogreen);
  --header-text: var(--white);
  --navbar-bg: var(--cowocogray);
  --navbar-text: var(--white);
  --footer-bg: var(--cowocogray);
  --footer-text: var(--white);
  --link-color: #61dafb;
  --link-hover: #a9e4fb;
  --badge-bg: var(--mdwblue);
  --badge-text: var(--white);
  --btn-primary-bg: var(--mdwblue);
  --btn-primary-text: var(--white);
}

/* Dark mode body */
[data-theme="dark"] body {
  background-color: var(--dark-bg);
  color: var(--text-dark);
}

/* Dark mode links */
[data-theme="dark"] a,
[data-theme="dark"] a:link {
  color: var(--link-color);
}

[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus {
  color: var(--link-hover);
}

/* Dark mode headings */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--white);
}

/* Dark mode header */
[data-theme="dark"] header {
  background-color: var(--header-bg);
  color: var(--header-text);
}

[data-theme="dark"] .header-flexBox a {
  color: var(--header-text);
}

/* Dark mode navbar */
[data-theme="dark"] .navbar {
  background-color: var(--navbar-bg);
  color: var(--navbar-text);
}

[data-theme="dark"] .nav-link {
  color: var(--white) !important;
}

[data-theme="dark"] .nav-item a:hover::after,
[data-theme="dark"] .nav-item a:focus::after {
  background-color: var(--link-hover);
}

/* Dark mode footer */
[data-theme="dark"] footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
}

[data-theme="dark"] footer a,
[data-theme="dark"] footer a:link,
[data-theme="dark"] footer a:visited {
  color: var(--white);
}

/* Dark mode cards */
[data-theme="dark"] .card {
  background-color: var(--dark-bg-secondary);
  border-color: var(--dark-border);
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border);
}

/* Dark mode list groups */
[data-theme="dark"] .list-group-item {
  background-color: var(--dark-bg-secondary);
  border-color: var(--dark-border);
  color: var(--text-dark);
}

[data-theme="dark"] .list-group-flush .list-group-item {
  border-color: var(--dark-border);
}

/* Dark mode tables */
[data-theme="dark"] .table {
  color: var(--text-dark);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
  border-top-color: var(--dark-border);
}

/* Dark mode form controls */
[data-theme="dark"] .form-control {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border);
  color: var(--text-dark);
}

[data-theme="dark"] .form-control:focus {
  background-color: var(--dark-bg-tertiary);
  color: var(--white);
}

[data-theme="dark"] .form-select {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border);
  color: var(--text-dark);
}

/* Dark mode buttons */
[data-theme="dark"] .btn-light {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border);
  color: var(--text-dark);
}

[data-theme="dark"] .btn-light:hover {
  background-color: var(--dark-bg);
  color: var(--white);
}

[data-theme="dark"] .btn-outline-secondary {
  color: var(--link-color);
  border-color: var(--link-color);
}

[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--link-color);
  color: var(--dark-bg);
}

/* Dark mode