/*
 * Security Reviewer Brand Override for MantisBT
 * Applied via $g_css_include_file = 'images/sr-brand.css'
 * Selectors use .skin-3 prefix to match/beat ace-skins.css specificity.
 */

/* ── Font ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --sr-dark:  #0b1120;
  --sr-dark2: #0f2040;
  --sr-green: #77C409;
  --sr-green-dark: #5fa007;
}

body {
  font-family: 'Inter', 'Open Sans', sans-serif !important;
}

/* ═══════════════════════════════════════════
   TOP NAVBAR
═══════════════════════════════════════════ */
.skin-3 .navbar {
  background: var(--sr-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.navbar .navbar-brand {
  background: var(--sr-dark) !important;
  border-right: 1px solid rgba(255,255,255,.1) !important;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  background: var(--sr-dark2) !important;
}
.ace-nav > li > a {
  color: rgba(255,255,255,.8) !important;
}
.ace-nav > li > a .ace-icon {
  color: rgba(255,255,255,.8) !important;
}
.ace-nav > li > a:hover {
  color: #fff !important;
  background: rgba(255,255,255,.1) !important;
}
.navbar .navbar-toggle { border-color: rgba(255,255,255,.35) !important; }
.navbar .navbar-toggle .icon-bar { background: rgba(255,255,255,.75) !important; }

/* ═══════════════════════════════════════════
   SIDEBAR — background
═══════════════════════════════════════════ */
.skin-3 .sidebar {
  background-color: var(--sr-dark2) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* ═══════════════════════════════════════════
   SIDEBAR — nav items (use .skin-3 prefix to
   match ace-skins specificity)
═══════════════════════════════════════════ */
.skin-3 .nav-list > li {
  border-color: rgba(255,255,255,.06) !important;
}
.skin-3 .nav-list > li > a {
  background-color: transparent !important;
  color: rgba(255,255,255,.88) !important;
}
.skin-3 .nav-list > li > a:focus {
  background-color: transparent !important;
  color: rgba(255,255,255,.88) !important;
}
.skin-3 .nav-list > li:hover {
  border-color: rgba(255,255,255,.15) !important;
}
.skin-3 .nav-list > li:hover > a {
  background-color: rgba(255,255,255,.1) !important;
  color: #fff !important;
}
.skin-3 .nav-list > li.open > a,
.skin-3 .nav-list > li.open:hover > a {
  background-color: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
.skin-3 .nav-list > li.active > a,
.skin-3 .nav-list > li.active.highlight > a {
  background-color: var(--sr-green) !important;
  color: #fff !important;
}

/* Sub-menus */
.skin-3 .nav-list > li > .submenu {
  background-color: rgba(0,0,0,.2) !important;
  border-color: rgba(255,255,255,.06) !important;
}
.skin-3 .nav-list > li > .submenu li > a {
  color: rgba(255,255,255,.75) !important;
}
.skin-3 .nav-list > li > .submenu li > a:hover {
  color: #fff !important;
  background-color: rgba(255,255,255,.08) !important;
}

/* ═══════════════════════════════════════════
   SIDEBAR ICONS — all states
   Must beat .skin-3 .nav-list > li > a (0,2,0)
   by adding the .ace-icon selector (0,2,1)
═══════════════════════════════════════════ */
.skin-3 .nav-list li > a .ace-icon,
.skin-3 .nav-list li > a > .ace-icon {
  color: rgba(255,255,255,.9) !important;
}
.skin-3 .nav-list > li:hover > a .ace-icon,
.skin-3 .nav-list > li.open > a .ace-icon {
  color: #fff !important;
}
.skin-3 .nav-list > li.active > a .ace-icon {
  color: #fff !important;
}
/* Arrow / caret in nav items */
.skin-3 .nav-list > li > a .arrow {
  color: rgba(255,255,255,.5) !important;
}
.skin-3 .nav-list > li:hover > a .arrow,
.skin-3 .nav-list > li.open > a .arrow {
  color: rgba(255,255,255,.8) !important;
}

/* ═══════════════════════════════════════════
   SIDEBAR — minimized / menu-min state
═══════════════════════════════════════════ */
.skin-3 .sidebar.menu-min .nav-list > li > a > .menu-text {
  background-color: var(--sr-dark2) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.9) !important;
}
.skin-3 .sidebar.menu-min .nav-list > li.active > a > .menu-text {
  background-color: var(--sr-dark) !important;
}
.skin-3 .sidebar.menu-min .nav-list > li > .submenu {
  border-color: rgba(255,255,255,.1) !important;
}

/* ═══════════════════════════════════════════
   SIDEBAR SHORTCUTS (top buttons)
═══════════════════════════════════════════ */
.sidebar .sidebar-shortcuts,
.skin-3 .sidebar .sidebar-shortcuts {
  background-color: var(--sr-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.sidebar .sidebar-shortcuts-large > .btn {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.2) !important;
  color: #fff !important;
}
.sidebar .sidebar-shortcuts-large > .btn:hover {
  background: rgba(255,255,255,.22) !important;
}
.sidebar .sidebar-shortcuts-large > .btn > .ace-icon {
  color: #fff !important;
}
/* Mini (collapsed) shortcut buttons */
.sidebar .sidebar-shortcuts-mini > .btn {
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.15) !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════
   SIDEBAR TOGGLE (expand/collapse arrow)
═══════════════════════════════════════════ */
.sidebar .sidebar-toggle {
  background-color: var(--sr-dark) !important;
  border-color: rgba(255,255,255,.1) !important;
}
.sidebar .sidebar-toggle > .ace-icon {
  color: rgba(255,255,255,.75) !important;
  border-color: rgba(255,255,255,.25) !important;
}
.sidebar .sidebar-toggle:hover > .ace-icon {
  color: #fff !important;
}

/* ═══════════════════════════════════════════
   ACTIVE indicator stripe
═══════════════════════════════════════════ */
.skin-3 .nav-list > li.active:before {
  background-color: var(--sr-green) !important;
}
.skin-3 .nav-list > li:hover:before,
.skin-3 .nav-list > li.open:before {
  background-color: rgba(119,196,9,.6) !important;
}

/* ═══════════════════════════════════════════
   LINKS (content area only)
═══════════════════════════════════════════ */
.main-content a,
.main-content a:visited {
  color: #186000;
}
.main-content a:hover {
  color: var(--sr-green-dark);
}

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn-primary, .btn-primary:focus {
  background: var(--sr-green) !important;
  border-color: var(--sr-green-dark) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:active {
  background: var(--sr-green-dark) !important;
  border-color: var(--sr-green-dark) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════
   PAGE HEADER & WIDGET HEADERS
═══════════════════════════════════════════ */
.page-header h1 {
  color: var(--sr-dark) !important;
  border-bottom-color: var(--sr-green) !important;
}
.widget-header {
  background: var(--sr-dark) !important;
}
.widget-header .widget-title,
.widget-header .widget-title * {
  color: #fff !important;
}
.widget-header .ace-icon {
  color: rgba(255,255,255,.75) !important;
}

/* ═══════════════════════════════════════════
   LABELS / BADGES
═══════════════════════════════════════════ */
.label-primary, .badge-primary {
  background: var(--sr-green) !important;
}

/* ═══════════════════════════════════════════
   LOGIN PAGE
═══════════════════════════════════════════ */
#login-page {
  background: linear-gradient(135deg, var(--sr-dark) 0%, var(--sr-dark2) 100%) !important;
}
#login-page .widget-box {
  border-top: 3px solid var(--sr-green) !important;
}
#login-page .btn-primary {
  background: var(--sr-green) !important;
  border-color: var(--sr-green-dark) !important;
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.footer, #footer { font-size: .8rem; color: #6b7a99 !important; }

/* Logo in footer / header — preserve native aspect ratio.
   Mantis hardcodes width="102" height="35" on the footer img; we must
   override both attributes or the logo stays squished vertically. */
.footer img,
#powered-by-mantisbt-logo img,
.navbar .navbar-brand img {
  width: auto !important;
  height: auto !important;
  max-height: 36px !important;
  max-width: 100% !important;
  object-fit: contain;
}