/**
 * Shared contrast safety for light / dark modes.
 * Does not redefine base :root tokens — each theme stylesheet owns those.
 */

/* ---------- Dark mode contrast safety ---------- */
body.dark-theme .text-dark,
body.dark-theme .text-black,
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-black {
  color: rgb(var(--heading-color)) !important;
}

body.dark-theme .text-muted,
[data-theme="dark"] .text-muted {
  color: var(--body-color) !important;
}

body.dark-theme .bg-white,
body.dark-theme .bg-light,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light {
  background-color: var(--bg-color2) !important;
  color: rgb(var(--heading-color));
}

body.dark-theme .bg-dark,
[data-theme="dark"] .bg-dark {
  background-color: var(--bg-color1) !important;
  color: rgb(var(--heading-color));
}

body.dark-theme .form-control,
body.dark-theme .form-select,
body.dark-theme .form-control:focus,
body.dark-theme .form-select:focus,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--input-color) !important;
  color: rgb(var(--heading-color)) !important;
  border-color: var(--border-color1);
}

body.dark-theme .form-control::placeholder,
body.dark-theme .form-select::placeholder,
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-select::placeholder {
  color: var(--body-color);
  opacity: 0.85;
}

body.dark-theme .form-label,
[data-theme="dark"] .form-label {
  color: rgb(var(--heading-color));
}

body.dark-theme option,
[data-theme="dark"] option {
  background-color: var(--bg-color2);
  color: rgb(var(--heading-color));
}

body.dark-theme .dropdown-menu,
[data-theme="dark"] .dropdown-menu {
  background-color: var(--bg-color2) !important;
  border-color: var(--border-color1);
  color: rgb(var(--heading-color));
}

body.dark-theme .dropdown-item,
[data-theme="dark"] .dropdown-item {
  color: rgb(var(--heading-color));
}

body.dark-theme .dropdown-item:hover,
body.dark-theme .dropdown-item:focus,
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--bg-color3);
  color: rgb(var(--heading-color));
}

body.dark-theme .modal-content,
[data-theme="dark"] .modal-content {
  background-color: var(--bg-color2);
  color: rgb(var(--heading-color));
  border-color: var(--border-color1);
}

body.dark-theme .modal-header,
body.dark-theme .modal-footer,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: var(--border-color1);
}

body.dark-theme .table,
[data-theme="dark"] .table {
  --bs-table-bg: var(--bg-color1);
  --bs-table-color: var(--body-color);
  --bs-table-border-color: var(--border-color1);
  --bs-table-striped-bg: var(--bg-color2);
  --bs-table-hover-bg: var(--bg-color3);
  color: var(--body-color);
}

body.dark-theme .card,
[data-theme="dark"] .card {
  background-color: var(--bg-color2);
  color: rgb(var(--heading-color));
  border-color: var(--border-color1);
}

body.dark-theme .list-group-item,
[data-theme="dark"] .list-group-item {
  background-color: var(--bg-color2);
  color: rgb(var(--heading-color));
  border-color: var(--border-color1);
}

body.dark-theme .pagination .page-link,
[data-theme="dark"] .pagination .page-link {
  background-color: var(--bg-color2);
  color: rgb(var(--heading-color));
  border-color: var(--border-color1);
}

body.dark-theme .pagination .page-item.active .page-link,
[data-theme="dark"] .pagination .page-item.active .page-link {
  background-color: rgb(var(--primary-color));
  border-color: rgb(var(--primary-color));
  color: #0c0f15;
}

body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6,
[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: rgb(var(--heading-color));
}

/* Light mode forms stay dark text on light surfaces */
body:not(.dark-theme):not(.light-theme) .form-control,
body:not(.dark-theme):not(.light-theme) .form-select,
body.light-theme .form-control,
body.light-theme .form-select {
  color: rgb(var(--heading-color));
}

body.light-theme .form-control:focus,
body.light-theme .form-select:focus,
body:not(.dark-theme) .form-control:focus,
body:not(.dark-theme) .form-select:focus {
  color: rgb(var(--heading-color));
  background-color: var(--input-color);
}

/* Interactive polish */
.cmn-btn,
.cmn-btn2,
.cmn-btn3,
.cmn-btn4,
.kew-btn,
.btn,
.toggle-btn,
#toggle-btn,
.nav-theme-toggle {
  transition: transform 0.2s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.cmn-btn:hover,
.btn-primary:hover,
.kew-btn:hover {
  transform: translateY(-1px);
}

.cmn-btn:active,
.btn:active,
.kew-btn:active,
#toggle-btn:active,
.nav-theme-toggle:active {
  transform: scale(0.98);
}

.cmn-btn:focus-visible,
.btn:focus-visible,
#toggle-btn:focus-visible,
.nav-theme-toggle:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid rgb(var(--primary-color));
  outline-offset: 2px;
}

#toggle-btn #sun,
.theme-toggle-btn #sun,
.nav-theme-toggle #sun {
  display: none;
}

body.dark-theme #toggle-btn #moon,
body.dark-theme .theme-toggle-btn #moon {
  display: none;
}

body.dark-theme #toggle-btn #sun,
body.dark-theme .theme-toggle-btn #sun {
  display: block;
}

body.light-theme .nav-theme-toggle #moon {
  display: none;
}

body.light-theme .nav-theme-toggle #sun {
  display: inline-block;
}