:root {
  color-scheme: dark;
  --h4os-bg: #212121;
  --h4os-bg-soft: #262626;
  --h4os-surface: #393939;
  --h4os-surface-2: #4b4c4b;
  --h4os-surface-3: #303130;
  --h4os-sidebar: #1a1a1a;
  --h4os-text: #ffffff;
  --h4os-text-muted: #c9ced4;
  --h4os-link: #6da7fe;
  --h4os-border: rgba(255, 255, 255, 0.13);
  --h4os-shadow: rgba(0, 0, 0, 0.28);
  --h4os-input-bg: #ffffff;
  --h4os-input-text: #212529;
  --h4os-input-border: #ced4da;
  --h4os-soft-bg: #f8f9fa;
  --h4os-soft-text: #212529;
  --h4os-code-bg: rgba(255,255,255,0.08);
  --h4os-code-text: #ff7eb6;
}

:root[data-theme="light"] {
  color-scheme: light;
  --h4os-bg: #f4f6f9;
  --h4os-bg-soft: #eef1f5;
  --h4os-surface: #ffffff;
  --h4os-surface-2: #f7f9fc;
  --h4os-surface-3: #eef2f7;
  --h4os-sidebar: #ffffff;
  --h4os-text: #1f2937;
  --h4os-text-muted: #5f6b7a;
  --h4os-link: #0b5ed7;
  --h4os-border: rgba(31, 41, 55, 0.16);
  --h4os-shadow: rgba(15, 23, 42, 0.10);
  --h4os-input-bg: #ffffff;
  --h4os-input-text: #212529;
  --h4os-input-border: #bcc5d0;
  --h4os-soft-bg: #f8f9fa;
  --h4os-soft-text: #212529;
  --h4os-code-bg: rgba(13,110,253,0.08);
  --h4os-code-text: #a12555;
}

html,
body {
  min-height: 100%;
  background-color: var(--h4os-bg);
}

body {
  background: url('') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: var(--h4os-bg) !important;
  color: var(--h4os-text) !important;
  font-size: 18px;
  transition: background-color .18s ease, color .18s ease;
}

main,
.container,
.container-fluid {
  color: var(--h4os-text);
}

footer {
  background-color: var(--h4os-bg);
  color: var(--h4os-text) !important;
}

footer a,
footer a:hover {
  color: var(--h4os-link) !important;
}

a,
a:hover {
  font-weight: bold;
  color: var(--h4os-link);
  text-decoration: none;
  background-color: transparent;
}

.text-muted,
.text-secondary {
  color: var(--h4os-text-muted) !important;
}

hr {
  border-color: var(--h4os-border);
  opacity: 1;
}

/* Main navigation remains the familiar H4OS blue in both themes. */
.navbar .nav-link,
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .navbar-brand {
  color: #fff !important;
}

.h4os-theme-toggle {
  min-width: 92px;
  white-space: nowrap;
  font-weight: 700;
}

.nav-pills .nav-link {
  background-color: var(--h4os-surface-3);
  color: var(--h4os-text);
}

.nav-pills .nav-link:hover {
  background-color: var(--h4os-surface-2);
}

.nav-tabs {
  border-bottom-color: var(--h4os-border);
}

.nav-tabs .nav-link:not(.active) {
  color: var(--h4os-link);
}

.nav-tabs .nav-link.active {
  background-color: var(--h4os-surface);
  color: var(--h4os-text);
  border-color: var(--h4os-border) var(--h4os-border) var(--h4os-surface);
}

.dropdown-menu {
  background-color: var(--h4os-surface);
  color: var(--h4os-text);
  border-color: var(--h4os-border);
  box-shadow: 0 .5rem 1rem var(--h4os-shadow);
}

.dropdown-item {
  color: var(--h4os-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--h4os-surface-2);
  color: var(--h4os-text);
}

.dropdown-divider {
  border-top-color: var(--h4os-border);
}

.shadow {
  box-shadow: 0 2px 2px 0 var(--h4os-shadow), 0 3px 1px -2px var(--h4os-shadow), 0 1px 5px 0 var(--h4os-shadow) !important;
}

.card,
.modal-content,
.offcanvas,
.toast {
  background-color: var(--h4os-surface);
  color: var(--h4os-text) !important;
  border-color: var(--h4os-border);
  box-shadow: 0 2px 2px 0 var(--h4os-shadow), 0 3px 1px -2px var(--h4os-shadow), 0 1px 5px 0 var(--h4os-shadow);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.offcanvas-header {
  background-color: var(--h4os-surface-3);
  color: var(--h4os-text) !important;
  border-color: var(--h4os-border);
}

.card-body,
.modal-body,
.offcanvas-body {
  color: var(--h4os-text);
}

.table {
  --bs-table-color: var(--h4os-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--h4os-border);
  --bs-table-striped-color: var(--h4os-text);
  --bs-table-striped-bg: var(--h4os-surface-2);
  --bs-table-active-color: var(--h4os-text);
  --bs-table-active-bg: var(--h4os-surface-2);
  --bs-table-hover-color: var(--h4os-text);
  --bs-table-hover-bg: var(--h4os-surface-2);
  color: var(--h4os-text) !important;
}

.table > :not(caption) > * > * {
  color: inherit;
  border-bottom-color: var(--h4os-border);
}

.list-group,
.list-group-item {
  background-color: var(--h4os-surface-2);
  color: var(--h4os-text);
  border-color: var(--h4os-border);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--h4os-surface-3);
  color: var(--h4os-text);
}

.form-label,
.form-check-label,
.form-text {
  color: var(--h4os-text-muted) !important;
}

.form-control,
.form-select,
.input-group-text {
  background-color: var(--h4os-input-bg);
  color: var(--h4os-input-text);
  border-color: var(--h4os-input-border);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--h4os-input-bg);
  color: var(--h4os-input-text);
}

.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--h4os-surface-3);
  color: var(--h4os-text-muted);
}

.form-check-input:not(:checked) {
  background-color: var(--h4os-input-bg);
  border-color: var(--h4os-input-border);
}

.accordion-item,
.accordion-body {
  background-color: var(--h4os-surface);
  color: var(--h4os-text);
  border-color: var(--h4os-border);
}

.accordion-button,
.accordion-button:not(.collapsed) {
  background-color: var(--h4os-surface-3);
  color: var(--h4os-text);
  box-shadow: none;
}

:root[data-theme="dark"] .accordion-button::after {
  filter: invert(1) grayscale(1) brightness(2);
}

.pagination .page-link {
  background-color: var(--h4os-surface);
  color: var(--h4os-link);
  border-color: var(--h4os-border);
}

.pagination .page-link:hover {
  background-color: var(--h4os-surface-2);
}

.pagination .page-item.disabled .page-link {
  background-color: var(--h4os-surface-3);
  color: var(--h4os-text-muted);
}

.breadcrumb-item,
.breadcrumb-item.active {
  color: var(--h4os-text-muted);
}

pre,
code,
kbd,
samp {
  color: var(--h4os-code-text);
}

code {
  background: var(--h4os-code-bg);
  border-radius: .25rem;
  padding: .08rem .25rem;
}

:root[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.homepanel {
  background-color: var(--h4os-sidebar);
  box-shadow: inset 1px 0 0 var(--h4os-border);
}

.img-thumbnail {
  background-color: transparent;
  border-color: var(--h4os-border);
}

/* Sidebar */
.sidebar {
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 0;
  box-shadow: inset 1px 0 0 var(--h4os-border);
  background-color: var(--h4os-sidebar);
}

@media (max-width: 767.98px) {
  .sidebar {
    top: 5rem;
  }
}

.sidebar-sticky {
  height: calc(100vh - 48px);
  overflow-x: hidden;
  overflow-y: auto;
}

.sidebar .nav-link {
  font-weight: 500;
  color: var(--h4os-text-muted);
  font-size: 24px;
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: var(--h4os-text);
  font-size: 24px;
}

.sidebar .nav-link.active {
  color: var(--h4os-text);
  font-size: 28px;
}

.sidebar .nav-link:hover,
.sidebar .nav-link:focus {
  color: var(--h4os-link);
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar-heading {
  font-size: .75rem;
}

/* Keep semantic Bootstrap light/dark utility blocks readable in either site theme. */
:root[data-theme="light"] .bg-dark,
:root[data-theme="light"] .text-bg-dark {
  color: #fff !important;
}

:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .text-bg-light {
  color: #212529 !important;
}