:root {
  --mp-bg: #ffffff;
  --mp-text: #1f2937;
  --mp-sub: #4b5563;
  --mp-surface: #f7f7fa;
  --mp-border: #e5e7eb;
}
.theme-dark {
  --mp-bg: #0f172a;
  --mp-text: #e5e7eb;
  --mp-sub: #cbd5e1;
  --mp-surface: #0b1220;
  --mp-border: #1f2937;
}
html,
body,
.navbar,
.mp-header,
.mp-footer {
  transition: background-color 0.25s ease, color 0.25s ease,
    border-color 0.25s ease;
}
body {
  background: var(--mp-surface) !important;
  color: var(--mp-text) !important;
}
.mp-header,
.navbar,
.container,
.card,
.login-box,
.logged-out-box {
  color: var(--mp-text) !important;
}
h1,
h2,
h3,
h4 {
  color: var(--mp-text) !important;
}
label {
  color: var(--mp-sub) !important;
}
.form-group label {
  color: var(--mp-sub) !important;
}
.house-location,
.no-results,
small,
.help-text {
  color: var(--mp-sub) !important;
}
.navbar {
  background: var(--mp-bg) !important;
}
.nav-link {
  color: var(--mp-text) !important;
}
.nav-link:hover {
  background-color: #edf2f7 !important;
}
.theme-dark .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
}
.user-dropdown {
  background: var(--mp-bg) !important;
  border-color: var(--mp-border) !important;
}
.dropdown-link {
  color: var(--mp-text) !important;
}
.dropdown-link:hover {
  background-color: #edf2f7 !important;
}
.theme-dark .dropdown-link:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
}
.mp-footer {
  background: var(--mp-surface) !important;
  border-top: 1px solid var(--mp-border) !important;
}
.mp-footer-text {
  color: var(--mp-sub) !important;
}
.container {
  background: var(--mp-bg) !important;
  color: var(--mp-text) !important;
  border-color: var(--mp-border) !important;
}
.card {
  background: var(--mp-bg) !important;
  color: var(--mp-text) !important;
  border-color: var(--mp-border) !important;
}
.stat {
  color: var(--mp-text) !important;
}
.login-box,
.logged-out-box {
  background: var(--mp-bg) !important;
  color: var(--mp-text) !important;
}
.house-item {
  background: var(--mp-bg) !important;
  color: var(--mp-text) !important;
  border-color: var(--mp-border) !important;
}
input,
textarea,
select {
  background: var(--mp-bg) !important;
  color: var(--mp-text) !important;
  border-color: var(--mp-border) !important;
}
input::placeholder,
textarea::placeholder {
  color: var(--mp-sub) !important;
}
table {
  background: var(--mp-bg) !important;
  color: var(--mp-text) !important;
}
th,
td {
  border-color: var(--mp-border) !important;
}
th {
  background-color: var(--mp-surface) !important;
  color: var(--mp-text) !important;
}
hr {
  border-color: var(--mp-border) !important;
}