/* ==========================================================================
   Bootstrap Theme Override
   Applies theme variables to Bootstrap components for dark mode support
   ========================================================================== */

/* ==========================================================================
   Modals
   ========================================================================== */

.modal-content {
  background-color: var(--color-bg-primary) !important;
  border-color: var(--color-border-medium) !important;
  color: var(--color-text-primary) !important;
}

.modal-header {
  border-color: var(--color-border-light) !important;
}

.modal-footer {
  border-color: var(--color-border-light) !important;
}

.modal-title {
  color: var(--color-text-primary) !important;
}

.modal-backdrop {
  background-color: #000 !important;
}

.modal-backdrop.in {
  opacity: 0.5 !important;
}

html.dark-theme .modal-backdrop.in {
  opacity: 0.7 !important;
}

/* Close button */
.modal-header .close {
  color: var(--color-text-muted) !important;
  opacity: 0.8;
}

.modal-header .close:hover {
  color: var(--color-text-primary) !important;
  opacity: 1;
}

/* ==========================================================================
   Tooltips
   ========================================================================== */

.tooltip-inner {
  background-color: var(--color-tooltip-bg) !important;
  color: var(--color-tooltip-text) !important;
  border: 1px solid var(--color-tooltip-border) !important;
}

.tooltip.top .tooltip-arrow {
  border-top-color: var(--color-tooltip-bg) !important;
}

.tooltip.right .tooltip-arrow {
  border-right-color: var(--color-tooltip-bg) !important;
}

.tooltip.bottom .tooltip-arrow {
  border-bottom-color: var(--color-tooltip-bg) !important;
}

.tooltip.left .tooltip-arrow {
  border-left-color: var(--color-tooltip-bg) !important;
}

/* ==========================================================================
   Popovers
   ========================================================================== */

.popover {
  background-color: var(--color-bg-primary) !important;
  border-color: var(--color-border-medium) !important;
}

.popover-title {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-light) !important;
}

.popover-content {
  color: var(--color-text-secondary) !important;
}

.popover.top > .arrow {
  border-top-color: var(--color-border-medium) !important;
}

.popover.top > .arrow::after {
  border-top-color: var(--color-bg-primary) !important;
}

.popover.right > .arrow {
  border-right-color: var(--color-border-medium) !important;
}

.popover.right > .arrow::after {
  border-right-color: var(--color-bg-primary) !important;
}

.popover.bottom > .arrow {
  border-bottom-color: var(--color-border-medium) !important;
}

.popover.bottom > .arrow::after {
  border-bottom-color: var(--color-bg-primary) !important;
}

.popover.left > .arrow {
  border-left-color: var(--color-border-medium) !important;
}

.popover.left > .arrow::after {
  border-left-color: var(--color-bg-primary) !important;
}

/* ==========================================================================
   Dropdowns
   ========================================================================== */

.dropdown-menu {
  background-color: var(--color-bg-primary) !important;
  border-color: var(--color-border-medium) !important;
  box-shadow: 0 4px 12px var(--color-shadow-medium) !important;
}

.dropdown-menu > li > a {
  color: var(--color-text-primary) !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: var(--color-bg-hover) !important;
  color: var(--color-text-primary) !important;
}

.dropdown-menu .divider {
  background-color: var(--color-border-light) !important;
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert-success {
  background-color: var(--color-pill-green-bg) !important;
  border-color: var(--color-success) !important;
  color: var(--color-success) !important;
}

.alert-info {
  background-color: var(--color-pill-blue-bg) !important;
  border-color: var(--color-info) !important;
  color: var(--color-info) !important;
}

.alert-warning {
  background-color: var(--color-pill-amber-bg) !important;
  border-color: var(--color-warning) !important;
  color: var(--color-pill-amber-text) !important;
}

.alert-danger {
  background-color: var(--color-pill-red-bg) !important;
  border-color: var(--color-danger) !important;
  color: var(--color-danger) !important;
}

/* ==========================================================================
   Form Controls
   ========================================================================== */

.form-control {
  background-color: var(--color-bg-input) !important;
  border-color: var(--color-border-medium) !important;
  color: var(--color-text-primary) !important;
}

.form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-focus) !important;
}

.form-control::placeholder {
  color: var(--color-text-muted) !important;
}

/* ==========================================================================
   Panels
   ========================================================================== */

.panel {
  background-color: var(--color-bg-primary) !important;
  border-color: var(--color-border-medium) !important;
}

.panel-heading {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border-light) !important;
  color: var(--color-text-primary) !important;
}

.panel-body {
  color: var(--color-text-primary) !important;
}

.panel-footer {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border-light) !important;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table > thead > tr > th {
  border-color: var(--color-border-medium) !important;
  color: var(--color-text-primary) !important;
}

.table > tbody > tr > td {
  border-color: var(--color-border-light) !important;
  color: var(--color-text-primary) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--color-bg-secondary) !important;
}

.table-hover > tbody > tr:hover {
  background-color: var(--color-bg-hover) !important;
}

/* ==========================================================================
   Wells
   ========================================================================== */

.well {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border-light) !important;
}

/* ==========================================================================
   List Groups
   ========================================================================== */

.list-group-item {
  background-color: var(--color-bg-primary) !important;
  border-color: var(--color-border-light) !important;
  color: var(--color-text-primary) !important;
}

.list-group-item:hover,
.list-group-item:focus {
  background-color: var(--color-bg-hover) !important;
}

a.list-group-item {
  color: var(--color-text-primary) !important;
}

a.list-group-item:hover,
a.list-group-item:focus {
  color: var(--color-text-primary) !important;
}