/* MantisBT Modern Theme - Untitled UI Style */

/* ========== Import default.css base ========== */
@import url("default.css");

/* ========== Local Inter Font ========== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-Bold.woff2") format("woff2");
}

/* ========== Font application - exclude icon fonts ========== */
body,
h1, h2, h3, h4, h5, h6,
p, span, div, a, li, td, th,
label, input, select, textarea, button,
.btn, .nav, .navbar, .widget-title,
.form-control, .alert, .badge, .label,
.breadcrumb, .pagination, .dropdown-menu {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ========== Preserve icon fonts ========== */
.fa, .fas, .far, .fab, .fal,
.ace-icon,
.glyphicon,
[class^="icon-"],
[class*=" icon-"],
.menu-icon,
.home-icon,
.bigger-110[class*="icon-"],
.bigger-120[class*="icon-"],
.bigger-130[class*="icon-"],
.bigger-150[class*="icon-"],
.bigger-200[class*="icon-"],
.bigger-300[class*="icon-"] {
  font-family: FontAwesome !important;
}

.glyphicon {
  font-family: "Glyphicons Halflings" !important;
}

/* ========== Root Variables ========== */
:root {
  --primary-50:  #F5F3FF;
  --primary-100: #EDE9FE;
  --primary-200: #DDD6FE;
  --primary-300: #C4B5FD;
  --primary-400: #A78BFA;
  --primary-500: #7C3AED;
  --primary-600: #6D28D9;
  --primary-700: #5B21B6;
  --primary-800: #4C1D95;
  --gray-25:  #FCFCFD;
  --gray-50:  #F9FAFB;
  --gray-100: #F2F4F7;
  --gray-200: #EAECF0;
  --gray-300: #D0D5DD;
  --gray-400: #98A2B3;
  --gray-500: #667085;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #1D2939;
  --gray-900: #101828;
  --success-50:  #ECFDF3;
  --success-500: #12B76A;
  --success-700: #027A48;
  --warning-50:  #FFFAEB;
  --warning-500: #F79009;
  --error-50:  #FEF3F2;
  --error-500: #F04438;
  --error-700: #B42318;
  --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

/* ========== Global ========== */
body {
  background-color: var(--gray-50) !important;
  color: var(--gray-700) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--primary-600) !important; }
a:hover { color: var(--primary-700) !important; text-decoration: none !important; }

h1, h2, h3, h4, h5, h6,
.page-header {
  color: var(--gray-900) !important;
  font-weight: 600 !important;
}

/* ========== Navbar ========== */
.navbar,
.navbar-default,
.navbar-collapse,
#navbar-container {
  background: var(--gray-900) !important;
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
  min-height: 56px !important;
}

.navbar-default .navbar-nav > li > a,
.navbar .navbar-nav > li > a,
.ace-nav > li > a {
  color: var(--gray-300) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 16px 14px !important;
  transition: color 0.15s ease, background 0.15s ease !important;
  border-radius: 0 !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:hover,
.ace-nav > li > a:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.08) !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open > a {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}

.navbar-brand, .navbar-header .navbar-brand {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

/* Navbar icon colors */
.navbar .ace-icon,
.navbar [class^="icon-"],
.navbar [class*=" icon-"],
.ace-nav .ace-icon,
.ace-nav [class^="icon-"],
.ace-nav [class*=" icon-"] {
  color: inherit !important;
}

.dropdown-menu {
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 4px !important;
  margin-top: 4px !important;
  background: #fff !important;
}

.dropdown-menu > li > a {
  padding: 8px 14px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  color: var(--gray-700) !important;
}

.dropdown-menu > li > a:hover {
  background: var(--gray-50) !important;
  color: var(--gray-900) !important;
}

/* ========== Sidebar ========== */
.sidebar, .nav-list,
#sidebar {
  background: #fff !important;
  border-right: 1px solid var(--gray-200) !important;
  box-shadow: none !important;
}

.nav-list > li > a {
  color: var(--gray-600) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  border-radius: var(--radius-sm) !important;
  margin: 2px 8px !important;
  transition: all 0.15s ease !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.nav-list > li > a > .menu-text {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.nav-list > li > a:hover {
  background: var(--gray-50) !important;
  color: var(--gray-900) !important;
}

.nav-list > li.active > a {
  background: var(--primary-50) !important;
  color: var(--primary-700) !important;
  font-weight: 600 !important;
}

/* ========== Main Content ========== */
.main-content, .page-content,
#main-container {
  background: var(--gray-50) !important;
}

.page-header {
  border-bottom: 1px solid var(--gray-200) !important;
  padding-bottom: 12px !important;
  margin-bottom: 20px !important;
}

/* ========== Cards / Widgets ========== */
.widget-box {
  background: #fff !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
}

.widget-header {
  background: #fff !important;
  border-bottom: 1px solid var(--gray-200) !important;
  padding: 16px 20px !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.widget-header .widget-title {
  color: var(--gray-900) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

.widget-body {
  padding: 0 !important;
}

.widget-main, .widget-body .widget-main {
  padding: 20px !important;
}

.widget-toolbox {
  background: var(--gray-50) !important;
  border-top: 1px solid var(--gray-200) !important;
  padding: 12px 20px !important;
}

/* ========== Tables ========== */
table.table,
.table-bordered,
#buglist {
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-lg) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}

.table > thead > tr > th,
.table-header {
  background: var(--gray-50) !important;
  color: var(--gray-600) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--gray-200) !important;
  border-top: none !important;
}

.table > tbody > tr > td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--gray-100) !important;
  border-top: none !important;
  color: var(--gray-700) !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}

.table > tbody > tr:last-child > td {
  border-bottom: none !important;
}

.table > tbody > tr:hover > td {
  background: var(--gray-25) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: transparent !important;
}

.table-striped > tbody > tr:nth-of-type(odd):hover > td {
  background: var(--gray-25) !important;
}

td.category, th.category,
td.category label, th.category label {
  background-color: var(--gray-50) !important;
  color: var(--gray-700) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* ========== Buttons ========== */
.btn {
  border-radius: var(--radius-md) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  border: 1px solid transparent !important;
  transition: all 0.15s ease !important;
  box-shadow: var(--shadow-xs) !important;
  line-height: 1.5 !important;
}

.btn-primary,
.btn-primary.btn-inverse,
.btn-success {
  background: var(--primary-600) !important;
  border-color: var(--primary-600) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary.btn-inverse:hover,
.btn-success:hover {
  background: var(--primary-700) !important;
  border-color: var(--primary-700) !important;
  box-shadow: var(--shadow-sm) !important;
}

.btn-default, .btn-white {
  background: #fff !important;
  border-color: var(--gray-300) !important;
  color: var(--gray-700) !important;
}

.btn-default:hover, .btn-white:hover {
  background: var(--gray-50) !important;
  border-color: var(--gray-300) !important;
  color: var(--gray-900) !important;
}

.btn-danger {
  background: var(--error-500) !important;
  border-color: var(--error-500) !important;
  color: #fff !important;
}

.btn-danger:hover {
  background: var(--error-700) !important;
  border-color: var(--error-700) !important;
}

.btn-sm {
  padding: 5px 12px !important;
  font-size: 12px !important;
}

.btn-xs {
  padding: 3px 8px !important;
  font-size: 11px !important;
  border-radius: var(--radius-sm) !important;
}

.btn-group .btn {
  box-shadow: none !important;
}

/* ========== Forms ========== */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
textarea,
select,
.form-control {
  border: 1px solid var(--gray-300) !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  color: var(--gray-900) !important;
  background: #fff !important;
  box-shadow: var(--shadow-xs) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  outline: none !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--primary-300) !important;
  box-shadow: 0 0 0 4px var(--primary-100), var(--shadow-xs) !important;
}

label {
  color: var(--gray-700) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  margin-bottom: 4px !important;
}

/* ========== Badges / Labels ========== */
.badge, .label {
  font-weight: 500 !important;
  font-size: 12px !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  letter-spacing: 0.01em !important;
}

.label-default { background: var(--gray-100) !important; color: var(--gray-700) !important; }
.label-primary { background: var(--primary-50) !important; color: var(--primary-700) !important; }
.label-success { background: var(--success-50) !important; color: var(--success-700) !important; }
.label-warning { background: var(--warning-50) !important; color: var(--warning-500) !important; }
.label-danger  { background: var(--error-50) !important; color: var(--error-700) !important; }
.label-info    { background: var(--primary-50) !important; color: var(--primary-600) !important; }

/* ========== Alerts ========== */
.alert {
  border-radius: var(--radius-md) !important;
  border: 1px solid !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
}

.alert-success { background: var(--success-50) !important; border-color: #A6F4C5 !important; color: var(--success-700) !important; }
.alert-warning { background: var(--warning-50) !important; border-color: #FEDF89 !important; color: #93370D !important; }
.alert-danger  { background: var(--error-50) !important; border-color: #FECDCA !important; color: var(--error-700) !important; }
.alert-info    { background: var(--primary-50) !important; border-color: var(--primary-200) !important; color: var(--primary-700) !important; }

/* ========== Pagination ========== */
.pagination > li > a,
.pagination > li > span {
  border: 1px solid var(--gray-300) !important;
  color: var(--gray-700) !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 0 2px !important;
  border-radius: var(--radius-md) !important;
  background: #fff !important;
}

.pagination > .active > a,
.pagination > .active > span {
  background: var(--primary-50) !important;
  border-color: var(--primary-200) !important;
  color: var(--primary-700) !important;
}

.pagination > li > a:hover {
  background: var(--gray-50) !important;
}

/* ========== Bug Status Colors ========== */
.bug-resolved, .bug-status-80 { opacity: 0.7; }

/* ========== Login Page ========== */
.login-container,
.login-box,
#login-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.login-box .widget-box {
  background: #fff !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--gray-200) !important;
  max-width: 420px !important;
  margin: 40px auto !important;
  padding: 0 !important;
}

.login-box .widget-main {
  padding: 32px !important;
}

.login-box .toolbar {
  padding: 16px 32px !important;
  background: var(--gray-50) !important;
  border-top: 1px solid var(--gray-200) !important;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
}

.login-box input[type="text"],
.login-box input[type="password"] {
  height: 44px !important;
  font-size: 14px !important;
}

.login-box .btn {
  height: 44px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body.login-page {
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%) !important;
}

/* ========== Breadcrumbs ========== */
.breadcrumb, .breadcrumbs {
  background: transparent !important;
  padding: 8px 0 !important;
  font-size: 13px !important;
  border: none !important;
}

.breadcrumb > li + li:before {
  color: var(--gray-400) !important;
}

/* ========== Issue Detail ========== */
.bugnote {
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  background: #fff !important;
}

.bugnote-head, .bugnote-note {
  padding: 12px 16px !important;
}

.bugnote-head {
  background: var(--gray-50) !important;
  border-bottom: 1px solid var(--gray-200) !important;
}

/* ========== Spacing & Layout tweaks ========== */
.space-10 { height: 10px !important; }

.main-content .page-content {
  padding: 20px 24px !important;
}

/* Cleaner look for the top breadcrumb bar */
#breadcrumbs {
  background: #fff !important;
  border-bottom: 1px solid var(--gray-200) !important;
  box-shadow: none !important;
  padding: 0 24px !important;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--gray-50); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ========== Priority/Severity colors in tables ========== */
.bug-priority-high { color: var(--error-500) !important; font-weight: 600 !important; }
.bug-severity-major { color: var(--warning-500) !important; }

/* ========== Footer ========== */
.footer, #footer {
  border-top: 1px solid var(--gray-200) !important;
  background: #fff !important;
  color: var(--gray-400) !important;
  font-size: 12px !important;
  padding: 16px 24px !important;
}

/* Override ACE framework harsh colors */
.ace-nav > li.grey { background: transparent !important; }
.ace-nav > li { border-left: none !important; }

/* Tab styling */
.nav-tabs > li > a {
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  color: var(--gray-500) !important;
  font-weight: 500 !important;
}

.nav-tabs > li.active > a {
  color: var(--primary-600) !important;
  border-bottom-color: var(--primary-600) !important;
}

/* Checkbox & radio modernization */
.ace-checkbox-2 input[type=checkbox] + .lbl::before {
  border-radius: var(--radius-sm) !important;
}

/* Smooth transitions */
a, .btn, input, select, textarea,
.nav-list > li > a, .dropdown-menu > li > a {
  transition: all 0.15s ease !important;
}
