/* =========================================================
   NAVBAR
   ========================================================= */

/* Main top navbar */
.navbar {
    background: #181818 !important;
    border: none !important;
    border-bottom: 1px solid var(--mantis-border) !important;
    box-shadow: none !important;
}

/* Navbar container */
.navbar-container {
    background: #181818 !important;
}

/* Brand / Mantis logo area */
.navbar .navbar-brand {
    background: transparent !important;
    color: var(--mantis-text-bright) !important;
}

/* Main navbar links */
.navbar .navbar-nav > li > a,
.navbar-nav > li > a {
    background: transparent !important;
    color: #d1d5db !important;
    border: none !important;
}

/* Hover */
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus,
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
    background: var(--mantis-surface-alt) !important;
    color: #ffffff !important;
}

/* Active navbar item */
.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus {
    background: var(--mantis-primary) !important;
    color: #ffffff !important;
}

/* Navbar icons */
.navbar .ace-icon,
.navbar .fa,
.navbar .glyphicon {
    color: #d1d5db !important;
}

/* ---------------------------------------------------------
   USER / ACCOUNT MENU
   --------------------------------------------------------- */

.navbar .user-menu,
.navbar-user {
    background: transparent !important;
}

/* User menu trigger */
.navbar .user-info,
.navbar .user-name {
    color: #e5e7eb !important;
}

/* Dropdown menu */
.navbar .dropdown-menu,
.navbar-nav .dropdown-menu {
    background: var(--mantis-surface-alt) !important;
    color: var(--mantis-text) !important;
    border: 1px solid var(--mantis-border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Dropdown links */
.navbar .dropdown-menu > li > a,
.navbar-nav .dropdown-menu > li > a {
    background: transparent !important;
    color: var(--mantis-text) !important;
}

/* Dropdown hover */
.navbar .dropdown-menu > li > a:hover,
.navbar .dropdown-menu > li > a:focus,
.navbar-nav .dropdown-menu > li > a:hover,
.navbar-nav .dropdown-menu > li > a:focus {
    background: var(--mantis-surface-hover) !important;
    color: #ffffff !important;
}

/* Dropdown divider */
.navbar .dropdown-menu .divider {
    background: var(--mantis-border) !important;
}

/* ---------------------------------------------------------
   NAVBAR BUTTONS / ICON SECTIONS
   --------------------------------------------------------- */

.navbar .navbar-nav > li {
    border-color: var(--mantis-border) !important;
}

.navbar .navbar-nav > li.open > a,
.navbar .navbar-nav > li.open > a:hover,
.navbar .navbar-nav > li.open > a:focus {
    background: var(--mantis-surface-alt) !important;
    color: #ffffff !important;
}

/* ---------------------------------------------------------
   PROJECT SELECTOR
   --------------------------------------------------------- */

.navbar select,
.navbar .form-control {
    background: var(--mantis-surface-alt) !important;
    color: var(--mantis-text) !important;
    border-color: var(--mantis-border-light) !important;
}

/* ---------------------------------------------------------
   SEARCH
   --------------------------------------------------------- */

.navbar input[type="text"],
.navbar input[type="search"] {
    background: var(--mantis-surface-alt) !important;
    color: var(--mantis-text) !important;
    border: 1px solid var(--mantis-border-light) !important;
}

.navbar input[type="text"]:focus,
.navbar input[type="search"]:focus {
    background: #2a2a2a !important;
    border-color: var(--mantis-primary) !important;
}

/* ---------------------------------------------------------
   MOBILE NAVBAR
   --------------------------------------------------------- */

.navbar-toggle {
    background: var(--mantis-surface-alt) !important;
    border-color: var(--mantis-border) !important;
}

.navbar-toggle .icon-bar {
    background: #ffffff !important;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
    background: #181818 !important;
    border-right: 1px solid var(--mantis-border) !important;
}

.sidebar:before {
    background: #181818 !important;
}

/* Main menu items */
.nav-list {
    background: #181818 !important;
}

.nav-list > li {
    background: #181818 !important;
    border-color: var(--mantis-border) !important;
}

.nav-list > li > a {
    background: #181818 !important;
    color: var(--mantis-text) !important;
    border-color: var(--mantis-border) !important;
}

/* Icons */
.nav-list > li > a > .menu-icon,
.nav-list > li > a .ace-icon,
.nav-list > li > a .fa {
    color: #b0b7c3 !important;
}

/* Hover */
.nav-list > li > a:hover {
    background: var(--mantis-surface-alt) !important;
    color: #ffffff !important;
}

.nav-list > li > a:hover > .menu-icon,
.nav-list > li > a:hover .ace-icon,
.nav-list > li > a:hover .fa {
    color: #ffffff !important;
}

/* Active menu item */
.nav-list > li.active {
    background: var(--mantis-surface-alt) !important;
}

.nav-list > li.active > a,
.nav-list > li.active > a:hover,
.nav-list > li.active > a:focus {
    background: var(--mantis-surface-alt) !important;
    color: var(--mantis-primary) !important;
}

/* Active icon */
.nav-list > li.active > a > .menu-icon,
.nav-list > li.active > a .ace-icon,
.nav-list > li.active > a .fa {
    color: var(--mantis-primary) !important;
}

/* Remove Mantis/Ace light active arrow background */
.nav-list > li.active:after {
    border-color: var(--mantis-primary) !important;
}

.nav-list > li.active > a:after {
    border-right-color: var(--mantis-primary) !important;
}

/* Submenus */
.nav-list > li > .submenu {
    background: #1e1e1e !important;
    border-color: var(--mantis-border) !important;
}

.nav-list > li > .submenu > li {
    background: #1e1e1e !important;
    border-color: var(--mantis-border) !important;
}

.nav-list > li > .submenu > li > a {
    background: #1e1e1e !important;
    color: var(--mantis-text) !important;
    border-color: var(--mantis-border) !important;
}

.nav-list > li > .submenu > li > a:hover {
    background: var(--mantis-surface-hover) !important;
    color: #ffffff !important;
}

/* Active submenu item */
.nav-list > li > .submenu > li.active > a {
    background: var(--mantis-surface-alt) !important;
    color: var(--mantis-primary) !important;
}

/* Sidebar collapse button */
.sidebar .sidebar-toggle,
.sidebar .sidebar-collapse {
    background: #181818 !important;
    border-color: var(--mantis-border) !important;
}

.sidebar .sidebar-toggle:before,
.sidebar .sidebar-collapse:before {
    border-color: var(--mantis-border) !important;
}

.sidebar .sidebar-toggle > .ace-icon,
.sidebar .sidebar-collapse > .ace-icon {
    background: var(--mantis-surface-alt) !important;
    color: var(--mantis-text) !important;
    border-color: var(--mantis-border) !important;
}

/* Remove any remaining white menu backgrounds */
.sidebar .nav-list > li,
.sidebar .nav-list > li > a,
.sidebar .nav-list > li > a:focus {
    background-color: #181818 !important;
}

/* Keep active item visibly different */
.sidebar .nav-list > li.active > a,
.sidebar .nav-list > li.active > a:focus {
    background-color: #252525 !important;
    color: var(--mantis-primary) !important;
}

/* =========================================================
   BREADCRUMBS / TOP UTILITY BAR
   ========================================================= */

#breadcrumbs,
.breadcrumbs {
    background: #181818 !important;
    color: var(--mantis-text) !important;
    border-bottom: 1px solid var(--mantis-border) !important;
}

/* Breadcrumb list */
#breadcrumbs .breadcrumb,
.breadcrumbs .breadcrumb {
    background: transparent !important;
    color: var(--mantis-text) !important;
}

/* User link */
#breadcrumbs .breadcrumb > li,
#breadcrumbs .breadcrumb > li > a {
    background: transparent !important;
    color: var(--mantis-text) !important;
}

#breadcrumbs .breadcrumb > li > a:hover {
    color: #ffffff !important;
}

/* User icon */
#breadcrumbs .home-icon,
#breadcrumbs .fa-user {
    color: #b0b7c3 !important;
}

/* Administrator label */
#breadcrumbs .label-default {
    background: #374151 !important;
    color: #ffffff !important;
}

/* Arrow on administrator label */
#breadcrumbs .label-default.arrowed:before {
    border-right-color: #374151 !important;
}

/* Recently visited */
#breadcrumbs .nav-recent {
    background: transparent !important;
    color: var(--mantis-text-secondary) !important;
}

#breadcrumbs .nav-recent a {
    color: #5daeff !important;
}

#breadcrumbs .nav-recent a:hover {
    color: #8ec8ff !important;
}

/* ---------------------------------------------------------
   ISSUE SEARCH
   --------------------------------------------------------- */

#nav-search {
    background: transparent !important;
}

#nav-search .form-search {
    background: transparent !important;
}

#nav-search .nav-search-input {
    background: var(--mantis-surface-alt) !important;
    color: var(--mantis-text) !important;
    border: 1px solid var(--mantis-border-light) !important;
}

#nav-search .nav-search-input::placeholder {
    color: var(--mantis-text-secondary) !important;
}

#nav-search .nav-search-input:focus {
    background: #2a2a2a !important;
    border-color: var(--mantis-primary) !important;
    color: #ffffff !important;
}

/* Search icon */
#nav-search .nav-search-icon {
    color: #5daeff !important;
}

/* Remove any inherited light background */
#breadcrumbs ul,
#breadcrumbs li,
#breadcrumbs span:not(.label),
#breadcrumbs div {
    background-color: transparent;
}

/* =========================================================
   PROJECT DROPDOWN
   ========================================================= */

/* Project menu trigger */
#dropdown_projects_menu > a.dropdown-toggle {
    background: transparent !important;
    color: var(--mantis-text) !important;
}

#dropdown_projects_menu > a.dropdown-toggle:hover,
#dropdown_projects_menu.open > a.dropdown-toggle {
    background: var(--mantis-surface-alt) !important;
    color: #ffffff !important;
}

/* Dropdown container */
#projects-list {
    background: var(--mantis-surface-alt) !important;
    border: 1px solid var(--mantis-border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45) !important;
}

/* Remove old yellow dropdown styling */
#projects-list.dropdown-yellow,
#projects-list .dropdown-yellow {
    background: var(--mantis-surface-alt) !important;
    color: var(--mantis-text) !important;
}

/* Search box area */
#projects-list .projects-searchbox {
    background: var(--mantis-surface-alt) !important;
}

/* Search input */
#projects-list .projects-searchbox input {
    background: var(--mantis-surface) !important;
    color: var(--mantis-text) !important;
    border: 1px solid var(--mantis-border-light) !important;
}

#projects-list .projects-searchbox input:focus {
    background: #2a2a2a !important;
    border-color: var(--mantis-primary) !important;
    color: #ffffff !important;
}

/* Divider */
#projects-list .divider {
    background: var(--mantis-border) !important;
}

/* Scroll area */
#projects-list .scrollable-menu,
#projects-list ul.list {
    background: var(--mantis-surface-alt) !important;
}

/* Project links */
#projects-list .project-link {
    background: transparent !important;
    color: var(--mantis-text) !important;
}

/* Hover */
#projects-list .project-link:hover,
#projects-list .project-link:focus {
    background: var(--mantis-surface-hover) !important;
    color: #ffffff !important;
}

/* Active project */
#projects-list li.active > .project-link {
    background: var(--mantis-primary) !important;
    color: #ffffff !important;
}

/* Active project hover */
#projects-list li.active > .project-link:hover {
    background: var(--mantis-primary-hover) !important;
    color: #ffffff !important;
}

/* Dropdown arrow */
#dropdown_projects_menu .fa-angle-down {
    color: var(--mantis-text-secondary) !important;
}

#dropdown_projects_menu.open .fa-angle-down {
    color: #ffffff !important;
}