:root,
[data-aio-theme] {
  --aio-banner-bg: #24272C;
  --aio-banner-text: #FFFFFF;
  --aio-page-bg: #F3F4F6;
  --aio-surface-bg: #FFFFFF;
  --aio-surface-alt-bg: #F9FAFB;
  --aio-border-color: #D9DEE7;
  --aio-text-color: #1F2937;
  --aio-muted-text-color: #6B7280;
  --aio-accent: #F97316;
  --aio-accent-hover: #CB5C0D;
  --aio-accent-soft: #F7F1EE;
  --aio-link-color: #A84A0A;
  --aio-focus-ring: rgba(249, 115, 22, 0.35);
  --aio-font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --aio-font-heading: system-ui, -apple-system, "Segoe UI", sans-serif;
  --aio-font-nav: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.aio-navbar {
  background-color: var(--aio-banner-bg) !important;
  color: var(--aio-banner-text);
  font-family: var(--aio-font-nav);
  padding-top: 0;
  padding-bottom: 0;
}

.aio-navbar .navbar-brand,
.aio-navbar .nav-link,
.aio-navbar .navbar-toggler,
.aio-navbar .burger-btn {
  color: var(--aio-banner-text) !important;
}

.aio-navbar .nav-link:hover,
.aio-navbar .nav-link:focus,
.aio-navbar .navbar-brand:hover,
.aio-navbar .navbar-brand:focus {
  color: var(--aio-banner-text) !important;
  opacity: 0.85;
}

.aio-navbar .navbar-nav {
  align-items: center;
}

.aio-navbar .navbar-nav .nav-link {
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}

/* Navbar utility dropdown widths */
.aio-navbar .dropdown-menu {
  min-width: 16rem;
}

.aio-navbar .nav-item.dropdown {
  position: relative;
}

.aio-navbar .navbar-nav .nav-item.dropdown {
  min-height: 56px;
}

.aio-navbar .navbar-nav .dropdown-menu {
  margin-top: 0.5rem;
  top: 100% !important;
}

.aio-navbar .navbar-nav .nav-item.dropdown > .dropdown-menu {
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  inset: 100% 0 auto auto !important;
}

/* Nested/flyout sub-menu — wider to accommodate content */
.aio-navbar .dropdown-menu .dropdown-menu {
  min-width: 12rem;
}

/* Nested dropdown flyout — position to the left of the parent item */
.aio-navbar .dropdown-menu .dropdown-submenu {
  position: relative;
}

.aio-navbar .dropdown-menu .dropdown-submenu > .dropdown-menu {
  display: none;
  position: absolute;
  top: 0 !important;
  left: auto !important;
  right: 100% !important;
  bottom: auto !important;
  inset: 0 100% auto auto !important;
  margin-left: 0;
  margin-right: -1px;
  margin-top: -1px;
  border-radius: 0.375rem;
}

.aio-navbar .dropdown-menu .dropdown-submenu:hover > .dropdown-menu,
.aio-navbar .dropdown-menu .dropdown-submenu:focus-within > .dropdown-menu {
  display: block;
}

.aio-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.35);
}

.aio-navbar .navbar-toggler-icon {
  background-image: none;
  position: relative;
}

.aio-navbar .navbar-toggler-icon::before {
  content: "\f0c9";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: var(--aio-banner-text);
}

body {
  background-color: var(--aio-page-bg);
  color: var(--aio-text-color);
  font-family: var(--aio-font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--aio-font-heading);
}

.left-sidebar {
  background-color: var(--aio-surface-alt-bg);
  border-right-color: var(--aio-border-color);
}

.card,
.dropdown-menu {
  background-color: var(--aio-surface-bg);
  border-color: var(--aio-border-color);
}

.btn-primary {
  background-color: var(--aio-accent) !important;
  border-color: var(--aio-accent) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--aio-accent-hover) !important;
  border-color: var(--aio-accent-hover) !important;
}

.btn-outline-primary {
  color: var(--aio-accent) !important;
  border-color: var(--aio-accent) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--aio-accent) !important;
  color: #fff !important;
}

/* Bootstrap 4 utility class overrides — must use !important to beat Bootstrap */
.bg-primary,
.badge-primary,
.badge.bg-primary,
.text-bg-primary {
  background-color: var(--aio-accent) !important;
  border-color: var(--aio-accent) !important;
  color: #fff !important;
}

.text-primary {
  color: var(--aio-accent) !important;
}

.border-primary {
  border-color: var(--aio-accent) !important;
}

.page-link {
  color: var(--aio-link-color);
  background-color: var(--aio-surface-bg);
  border-color: var(--aio-border-color);
}

.page-link:hover,
.page-link:focus {
  color: var(--aio-accent-hover);
  background-color: var(--aio-accent-soft);
  border-color: var(--aio-accent);
  box-shadow: 0 0 0 0.2rem var(--aio-focus-ring);
}

.page-item.active .page-link {
  background-color: var(--aio-accent);
  border-color: var(--aio-accent);
  color: #fff;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--aio-accent) !important;
  border-color: var(--aio-accent) !important;
  color: #fff !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--aio-accent) !important;
  border-color: var(--aio-accent) !important;
}

.progress-bar {
  background-color: var(--aio-accent) !important;
}

.admin-sidebar .admin-nav-item.is-active,
.list-group-item.active,
.list-group-item-action.active,
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--aio-accent-soft) !important;
  border-color: var(--aio-accent) !important;
  color: var(--aio-accent) !important;
}

#subNav a:not(.btn):not(.page-link):not(.dropdown-item),
#subNav .nav-link,
#subNav .list-group-item-action,
#mainContent a:not(.btn):not(.page-link):not(.dropdown-item),
#mainContent .btn-link,
#mainContent .nav-link,
#mainContent .list-group-item-action,
.admin-content a:not(.btn):not(.page-link):not(.dropdown-item),
.admin-content .btn-link,
.admin-content .nav-link,
.admin-content .list-group-item-action,
#mainContent .aio-software-table a {
  color: var(--aio-link-color) !important;
}

#subNav a:not(.btn):not(.page-link):not(.dropdown-item):hover,
#subNav a:not(.btn):not(.page-link):not(.dropdown-item):focus,
#subNav .nav-link:hover,
#subNav .nav-link:focus,
#subNav .list-group-item-action:hover,
#subNav .list-group-item-action:focus,
#mainContent a:not(.btn):not(.page-link):not(.dropdown-item):hover,
#mainContent a:not(.btn):not(.page-link):not(.dropdown-item):focus,
#mainContent .btn-link:hover,
#mainContent .btn-link:focus,
#mainContent .nav-link:hover,
#mainContent .nav-link:focus,
#mainContent .list-group-item-action:hover,
#mainContent .list-group-item-action:focus,
.admin-content a:not(.btn):not(.page-link):not(.dropdown-item):hover,
.admin-content a:not(.btn):not(.page-link):not(.dropdown-item):focus,
.admin-content .btn-link:hover,
.admin-content .btn-link:focus,
.admin-content .nav-link:hover,
.admin-content .nav-link:focus,
.admin-content .list-group-item-action:hover,
.admin-content .list-group-item-action:focus,
#mainContent .aio-software-table a:hover,
#mainContent .aio-software-table a:focus {
  color: var(--aio-accent-hover) !important;
}

.form-check-input:checked {
  background-color: var(--aio-accent) !important;
  border-color: var(--aio-accent) !important;
}

.form-check-input[type="radio"]:checked {
  background-color: var(--aio-accent) !important;
  border-color: var(--aio-accent) !important;
}

.form-check-input[type="checkbox"]:checked {
  background-color: var(--aio-accent) !important;
  border-color: var(--aio-accent) !important;
}

.form-check-input:focus {
  border-color: var(--aio-accent) !important;
  box-shadow: 0 0 0 0.25rem var(--aio-focus-ring) !important;
}

:focus,
:focus-visible {
  outline-color: var(--aio-focus-ring);
}

.text-accent {
  color: var(--aio-accent);
}