/* Navbar-based color restoration with existing layout fixes */
:root {
  --mis-primary: #27367f;
  --mis-primary-dark: #1b2658;
  --mis-primary-soft: #eef1fb;
  --mis-page-bg: #f6f7fb;
  --mis-navbar-bg: #ffffff;
  --mis-sidebar-bg: #3a3f51;
  --mis-sidebar-bg-soft: #323746;
  --mis-sidebar-text: rgba(255,255,255,0.92);
  --mis-border: #e8ebf4;
}

html, body {
  background: var(--mis-page-bg) !important;
}

.page-body-wrapper,
.main-panel,
.content-wrapper {
  background: var(--mis-page-bg) !important;
}

.navbar.default-layout-navbar,
.navbar.default-layout-navbar .navbar-menu-wrapper,
.navbar.default-layout-navbar .navbar-brand-wrapper {
  background: var(--mis-navbar-bg) !important;
  background-image: none !important;
}

.navbar.default-layout-navbar {
  border-bottom: 1px solid var(--mis-border) !important;
  box-shadow: 0 1px 10px rgba(39, 54, 127, 0.04) !important;
}

.navbar.default-layout-navbar .navbar-brand-wrapper {
  border-right: 1px solid var(--mis-border) !important;
}

html[dir="rtl"] .navbar.default-layout-navbar .navbar-brand-wrapper {
  border-right: 0 !important;
  border-left: 1px solid var(--mis-border) !important;
}

.navbar.default-layout-navbar .navbar-brand-wrapper .navbar-brand,
.navbar.default-layout-navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link,
.navbar.default-layout-navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link .nav-profile-text,
.navbar.default-layout-navbar .navbar-menu-wrapper .navbar-toggler {
  color: var(--mis-primary) !important;
}

.sidebar,
.sidebar-icon-only .sidebar,
html[dir="rtl"] .sidebar,
html[dir="rtl"] .sidebar-icon-only .sidebar {
  background: var(--mis-sidebar-bg) !important;
  background-image: none !important;
}

.sidebar .nav.sub-menu {
  background: var(--mis-sidebar-bg-soft) !important;
}

.sidebar .nav .nav-item .nav-link,
.sidebar .nav .nav-item .nav-link .menu-title,
.sidebar .nav .nav-item .nav-link i,
.sidebar .nav.sub-menu .nav-link,
.sidebar .nav .nav-item.nav-profile .profile-name .name,
.sidebar .nav .nav-item.nav-profile .profile-name .designation {
  color: var(--mis-sidebar-text) !important;
}

.sidebar .nav .nav-item.active > .nav-link,
.sidebar .nav .nav-item .nav-link:hover,
.sidebar .nav .nav-item .nav-link[aria-expanded="true"] {
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
}

.sidebar .nav .nav-item.active > .nav-link .menu-title,
.sidebar .nav .nav-item.active > .nav-link i,
.sidebar .nav .nav-item .nav-link:hover .menu-title,
.sidebar .nav .nav-item .nav-link:hover i {
  color: #fff !important;
}

.btn-primary,
.badge-primary,
.bg-primary,
.nav-pills .nav-link.active,
.pagination .page-item.active .page-link,
.list-group-item.active,
.page-item.active .page-link,
.nav-tabs .nav-link.active {
  background-color: var(--mis-primary) !important;
  border-color: var(--mis-primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--mis-primary-dark) !important;
  border-color: var(--mis-primary-dark) !important;
}

.text-primary,
a,
.page-title,
.breadcrumb-item a,
.dropdown-item:active,
.dropdown-item.active {
  color: var(--mis-primary) !important;
}

a:hover,
a:focus {
  color: var(--mis-primary-dark) !important;
}

.form-control:focus,
.custom-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--mis-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(39, 54, 127, 0.12) !important;
}

.card,
.table,
.modal-content,
.dropdown-menu {
  border-color: var(--mis-border) !important;
}

.progress-bar,
.badge-outline-primary,
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
  background: var(--mis-primary) !important;
}

.todo-list .form-check label .input-helper:before,
.todo-list-input:focus {
  border-color: var(--mis-primary) !important;
}

.todo-list .form-check label .input-helper:after {
  color: var(--mis-primary) !important;
}