/*
 * Dark mode for the whole MantisBT site.
 *
 * Active only when <html data-theme="dark"> (set by js/theme.js, which follows
 * the visitor's choice, else the system setting). Loaded after every other
 * stylesheet, so these rules simply override the Ace "skin-3" light colours.
 *
 * Palette:  page #14171b  |  surface #20252b  |  raised #2a3038  |  border #3a414b
 *           text #d7dbe0  |  muted #9aa4b0     |  link #ff8a80
 *
 * Rows/cells coloured by ticket status keep their pastel background (set
 * elsewhere), so their text is forced back to a dark colour below.
 */

html[data-theme="dark"] {
	color-scheme: dark;
}

/* ---------- Page surfaces ---------- */
html[data-theme="dark"] body,
html[data-theme="dark"] body.skin-3 {
	background-color: #14171b;
	color: #d7dbe0;
}
html[data-theme="dark"] body.skin-3 .main-container:before,
html[data-theme="dark"] .main-container:before {
	background: #1b1e23 !important;
	box-shadow: none !important;
}
html[data-theme="dark"] .main-container,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .page-content,
html[data-theme="dark"] body.skin-3 .page-content {
	background-color: transparent;
	color: #d7dbe0;
}
html[data-theme="dark"] .page-header {
	border-bottom-color: #3a414b;
}
html[data-theme="dark"] .page-header h1,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .lighter {
	color: #e3e6ea;
}
html[data-theme="dark"] .widget-header .widget-title,
html[data-theme="dark"] .widget-header h4 {
	color: #fff;
}
html[data-theme="dark"] hr {
	border-top-color: #3a414b;
}
html[data-theme="dark"] .grey,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small {
	color: #9aa4b0;
}
html[data-theme="dark"] .breadcrumbs {
	background-color: #20242a;
	border-bottom-color: #343a43;
	color: #c4cad2;
}
html[data-theme="dark"] .footer .footer-inner .footer-content,
html[data-theme="dark"] .footer {
	background-color: transparent;
	color: #9aa4b0;
}

/* ---------- Links (content area only; buttons/labels keep their own colours) ---------- */
html[data-theme="dark"] .main-content a:not(.btn):not(.white):not(.label):not(.badge):not(.dropdown-toggle):not([class*="status-"]) {
	color: #ff8a80;
}
html[data-theme="dark"] .main-content a:not(.btn):not(.white):not(.label):not(.badge):not(.dropdown-toggle):not([class*="status-"]):hover {
	color: #ffb3ad;
}

/* ---------- Sidebar ---------- */
html[data-theme="dark"] body.skin-3 .sidebar {
	background-color: #20242a;
	border-color: #343a43;
}
html[data-theme="dark"] body.skin-3 .nav-list > li {
	border-color: #2c323a;
}
html[data-theme="dark"] body.skin-3 .nav-list > li > a {
	background-color: #262b32;
	color: #c4cad2;
}
html[data-theme="dark"] body.skin-3 .nav-list > li:hover > a,
html[data-theme="dark"] body.skin-3 .nav-list > li.open > a {
	background-color: #2f353d;
	color: #fff;
}
html[data-theme="dark"] body.skin-3 .nav-list > li .submenu,
html[data-theme="dark"] body.skin-3 .nav-list > li .submenu > li > a {
	background-color: #1e2227;
	color: #b8c0ca;
}
html[data-theme="dark"] body.skin-3 .nav-list > li .submenu > li > a:hover {
	background-color: #2a3038;
	color: #fff;
}
html[data-theme="dark"] .sidebar .sidebar-toggle,
html[data-theme="dark"] .sidebar-collapse {
	background-color: #262b32;
	border-color: #343a43;
}

/* ---------- Widgets (Ace boxes) ---------- */
html[data-theme="dark"] .widget-box {
	background-color: #20252b;
}
html[data-theme="dark"] .widget-body {
	background-color: #20252b;
}
html[data-theme="dark"] .widget-main {
	background-color: #20252b;
	color: #d7dbe0;
}
html[data-theme="dark"] .widget-toolbox {
	background-color: #2a3038;
	border-color: #3a414b;
	color: #c4cad2;
}
html[data-theme="dark"] .well {
	background-color: #20252b;
	border-color: #3a414b;
	color: #d7dbe0;
}
html[data-theme="dark"] .panel,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .list-group-item {
	background-color: #20252b;
	border-color: #3a414b;
	color: #d7dbe0;
}
html[data-theme="dark"] .popover-title {
	background-color: #2a3038;
	border-color: #3a414b;
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
	background-color: #2a3038;
	border-color: #3a414b;
}

/* ---------- Tables ---------- */
html[data-theme="dark"] .table,
html[data-theme="dark"] table.table {
	background-color: transparent;
	color: #d7dbe0;
}
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > thead > tr > td {
	background-color: #2a3038;
	color: #c4cad2;
	border-color: #3a414b;
}
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] .table > tfoot > tr > td,
html[data-theme="dark"] .table > tfoot > tr > th,
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > tbody > tr > td,
html[data-theme="dark"] .table-bordered > thead > tr > th {
	border-color: #3a414b;
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
	background-color: #20252b;
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) {
	background-color: #262c33;
}
html[data-theme="dark"] .table-hover > tbody > tr:hover {
	background-color: #303741;
}
/* Field-name cells on the issue view / forms */
html[data-theme="dark"] td.category,
html[data-theme="dark"] th.category,
html[data-theme="dark"] table.filters td.category {
	background-color: #2a3038 !important;
	color: #c4cad2 !important;
}
html[data-theme="dark"] tr.spacer {
	background-color: transparent !important;
}
/* Cells tinted by priority (bug list + issue view): urgent = yellow, immediate =
   red. The light-theme pastels vanish on a dark page, so use saturated tints
   plus a bright left accent. */
html[data-theme="dark"] td.bug-summary-urgent {
	background-color: #6b5710 !important;
	border-left: 4px solid #ffc107;
}
html[data-theme="dark"] td.bug-summary-immediate {
	background-color: #7f2523 !important;
	border-left: 4px solid #ff5252;
}

/* Anything painted with a status colour keeps its own background; give it back
   the text colours of the light theme (body text #393939, links #337ab7), since
   the dark theme would otherwise inherit light text there. */
html[data-theme="dark"] [class*="status-"][class*="-bg"],
html[data-theme="dark"] [class*="status-"][class*="-bg"] * {
	color: #393939;
}
html[data-theme="dark"] [class*="status-"][class*="-bg"] a {
	color: #8b1a1a !important;
}
/* Statuses with a dark background colour (closed, testing): white text. */
html[data-theme="dark"] .status-90-bg,
html[data-theme="dark"] .status-90-bg *,
html[data-theme="dark"] .status-45-bg,
html[data-theme="dark"] .status-45-bg * {
	color: #fff;
}
html[data-theme="dark"] .status-90-bg a,
html[data-theme="dark"] .status-45-bg a {
	color: #ffd0cb !important;
}

/* ---------- Overrides of site-wide !important light rules ---------- */
/* ace-mantis.css forces "table { background-color: #fff !important }". */
html[data-theme="dark"] table {
	background-color: transparent !important;
}
/* ace.min.css gives table header rows a light grey background. */
html[data-theme="dark"] .table > thead > tr,
html[data-theme="dark"] .widget-body .table thead:first-child tr,
html[data-theme="dark"] [class*="widget-color-"] > .widget-body .table thead:first-child tr {
	background-color: #2a3038 !important;
}
/* "Updated today" date box of the issue list. */
html[data-theme="dark"] .bolder {
	background-color: #3a414b;
	border-color: #6b7580;
	color: #fff;
}
/* ace.min.css: disabled inputs forced to #eee. */
html[data-theme="dark"] input[disabled],
html[data-theme="dark"] select[disabled],
html[data-theme="dark"] textarea[disabled] {
	background-color: #1b1f24 !important;
	color: #7c8794 !important;
}
/* ace.min.css: .btn / .btn-primary forced to light backgrounds. */
html[data-theme="dark"] .btn:not(.btn-white):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info):not(.btn-purple):not(.btn-pink):not(.btn-yellow):not(.btn-inverse):not(.btn-grey),
html[data-theme="dark"] .btn-primary:not(.btn-white),
html[data-theme="dark"] .btn-default {
	background-color: #2d333b !important;
	border-color: #7a828e !important;
	color: #e3e6ea !important;
}
/* Pagination: active page keeps white text (the link rule above must not win). */
html[data-theme="dark"] .pagination > .active > a,
html[data-theme="dark"] .pagination > .active > a:hover {
	color: #fff !important;
}
/* BBCode+ editor (markItUp) */
html[data-theme="dark"] .markItUp,
html[data-theme="dark"] .markItUpContainer,
html[data-theme="dark"] .markItUpHeader {
	background-color: #20252b !important;
	border-color: #3a414b !important;
}
html[data-theme="dark"] .markItUp textarea,
html[data-theme="dark"] .markItUpEditor {
	background-color: #14171b !important;
	color: #d7dbe0 !important;
}

/* ---------- Issue notes ---------- */
html[data-theme="dark"] tr.bugnote .bugnote-note {
	background-color: #33292b;
	color: #e2dcdc;
}
html[data-theme="dark"] .bugnote-private {
	background-color: #2f3338 !important;
}
html[data-theme="dark"] .bugnote-cyberesa {
	background-color: #272c32 !important;
}
html[data-theme="dark"] .bugnote .bugnote-note a {
	color: #ff9d94;
}
html[data-theme="dark"] .bug-attachment-preview-text,
html[data-theme="dark"] pre,
html[data-theme="dark"] code {
	background-color: #14171b;
	color: #d7dbe0;
	border-color: #3a414b;
}
html[data-theme="dark"] blockquote,
html[data-theme="dark"] .bbcodeplus.blockquote {
	border-left-color: #4a525c;
	color: #c4cad2;
}

/* ---------- Forms ---------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="file"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
	background-color: #14171b;
	color: #d7dbe0;
	border-color: #3d444d;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
	background-color: #14171b;
	border-color: #ff8a80;
	color: #fff;
}
html[data-theme="dark"] .form-control[disabled],
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] input[disabled],
html[data-theme="dark"] select[disabled],
html[data-theme="dark"] textarea[disabled] {
	background-color: #1b1f24;
	color: #7c8794;
}
html[data-theme="dark"] ::placeholder {
	color: #7c8794;
}
html[data-theme="dark"] select option {
	background-color: #14171b;
	color: #d7dbe0;
}
html[data-theme="dark"] .input-group-addon {
	background-color: #2a3038;
	border-color: #3d444d;
	color: #c4cad2;
}
/* Ace custom checkboxes / radios: the real input is hidden, the box is drawn by ".lbl::before".
   Ace's own selectors are more specific than ".ace + .lbl", so these match them (and win with
   !important): dark box when unchecked, salmon box with a dark tick when checked. */
html[data-theme="dark"] input.ace[type="checkbox"] + .lbl::before,
html[data-theme="dark"] input.ace[type="radio"] + .lbl::before,
html[data-theme="dark"] input.ace[type="checkbox"] ~ .lbl::before,
html[data-theme="dark"] input.ace[type="radio"] ~ .lbl::before,
html[data-theme="dark"] .ace + .lbl::before {
	background-color: #14171b !important;
	border-color: #6b7580 !important;
	color: #14171b !important;
}
html[data-theme="dark"] input.ace[type="checkbox"]:hover + .lbl::before,
html[data-theme="dark"] input.ace[type="radio"]:hover + .lbl::before,
html[data-theme="dark"] .lbl:hover::before {
	border-color: #ff8a80 !important;
}
html[data-theme="dark"] input.ace[type="checkbox"]:checked + .lbl::before,
html[data-theme="dark"] input.ace[type="radio"]:checked + .lbl::before,
html[data-theme="dark"] input.ace[type="checkbox"]:checked ~ .lbl::before,
html[data-theme="dark"] input.ace[type="radio"]:checked ~ .lbl::before,
html[data-theme="dark"] input.ace:checked + .lbl::before {
	background-color: #ff8a80 !important;
	border-color: #ff8a80 !important;
	color: #14171b !important;
}
html[data-theme="dark"] .dropzone {
	background-color: #1b1f24;
	border-color: #4a525c;
	color: #c4cad2;
}

/* ---------- Buttons ---------- */
/* Outline lighter than the surface (#7a828e on #20252b) + a faint top highlight
   and soft shadow: buttons read clearly without being loud. */
html[data-theme="dark"] .btn-white {
	background-color: #2d333b !important;
	border-color: #7a828e !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .btn-white:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-warning):not(.btn-danger):not(.btn-purple):not(.btn-pink):not(.btn-yellow) {
	color: #d7dbe0 !important;
}
html[data-theme="dark"] .btn-white.btn-primary {
	color: #ff8a80 !important;
}
html[data-theme="dark"] .btn-white.btn-primary:hover,
html[data-theme="dark"] .btn-white.btn-primary:focus {
	color: #ffb3ad !important;
}
html[data-theme="dark"] .btn-white:hover,
html[data-theme="dark"] .btn-white:focus {
	background-color: #39414c !important;
	border-color: #ff8a80 !important;
}
html[data-theme="dark"] .btn-default {
	background-color: #2d333b;
	border-color: #7a828e;
	color: #d7dbe0;
}

/* ---------- Default (light grey) labels and badges ---------- */
/* e.g. the "administrator" role label and the "1 - 50 / 31700" counter: white
   text on light grey is hard to read, so use black text on them. Coloured
   variants (label-success, badge-danger...) are left alone. */
html[data-theme="dark"] .label-default,
html[data-theme="dark"] .label-grey,
html[data-theme="dark"] .label-light,
html[data-theme="dark"] .label:not([class*="label-"]),
html[data-theme="dark"] .badge:not([class*="badge-"]) {
	color: #111 !important;
}

/* ---------- Projects dropdown (navbar) ---------- */
/* Project names are #333 by default: unreadable on the dark menu. The hovered
   item and the active (yellow) one keep dark text. */
html[data-theme="dark"] .dropdown-menu .project-link {
	color: #d7dbe0;
}
html[data-theme="dark"] .dropdown-menu .project-link:hover,
html[data-theme="dark"] .dropdown-menu .project-link:focus,
html[data-theme="dark"] .dropdown-menu li.active .project-link,
html[data-theme="dark"] .dropdown-menu li.active > a {
	color: #333;
}

/* ---------- Timeline entries tinted with an inline colour (My View) ---------- */
/* Actions are tinted with a ticket status colour, the time lines with a note
   colour: both are light, so they get dark text and dark blue links. */
html[data-theme="dark"] .profile-activity [style*="background"],
html[data-theme="dark"] .profile-activity [style*="background"] * {
	color: #393939;
}
html[data-theme="dark"] .profile-activity [style*="background"] a {
	color: #8b1a1a !important;
}

/* ---------- KPI rows painted with a status colour: links keep the row's text colour ---------- */
html[data-theme="dark"] .kpi-table tr[style*="background"] a,
html[data-theme="dark"] .kpi-note a,
html[data-theme="dark"] .kpi-note-meta {
	color: inherit !important;
}

/* ---------- Menus, tabs, pagination ---------- */
html[data-theme="dark"] .dropdown-menu {
	background-color: #2a3038;
	border-color: #3d444d;
}
html[data-theme="dark"] .dropdown-menu > li > a {
	color: #d7dbe0;
}
html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus {
	background-color: #39414c;
	color: #fff;
}
html[data-theme="dark"] .dropdown-menu .divider {
	background-color: #3d444d;
}
html[data-theme="dark"] .nav-tabs {
	border-bottom-color: #3a414b;
}
html[data-theme="dark"] .nav-tabs > li > a {
	background-color: #262b32;
	border-color: #3a414b;
	color: #c4cad2;
}
html[data-theme="dark"] .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs > li.active > a:hover {
	background-color: #20252b;
	border-color: #3a414b;
	color: #fff;
}
html[data-theme="dark"] .tab-content {
	background-color: #20252b;
	border-color: #3a414b;
}
html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span {
	background-color: #262b32;
	border-color: #3a414b;
	color: #c4cad2;
}
html[data-theme="dark"] .pagination > .active > a {
	background-color: #b5473f;
	border-color: #b5473f;
	color: #fff;
}

/* ---------- KPI dashboard ---------- */
html[data-theme="dark"] .kpi-dashboard,
html[data-theme="dark"] .kpi-section {
	color: #d7dbe0;
	--kpi-ink: #eef1f4;
	--kpi-muted: #9aa4b0;
	--kpi-line: #3a414b;
	--kpi-accent: #ff8a80;
	--kpi-shadow: 0 2px 10px rgba(0, 0, 0, .35);
	--kpi-shadow-hover: 0 6px 20px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .kpi-panel,
html[data-theme="dark"] .kpi-tile,
html[data-theme="dark"] .kpi-hl-card {
	background: #20252b;
	border-color: #3a414b;
}
html[data-theme="dark"] .kpi-tile .kpi-tile-value,
html[data-theme="dark"] .kpi-card .kpi-card-value,
html[data-theme="dark"] .kpi-hl-value,
html[data-theme="dark"] .kpi-hl-compare b,
html[data-theme="dark"] .kpi-score {
	color: #eef1f4;
}
html[data-theme="dark"] .kpi-hl-label,
html[data-theme="dark"] .kpi-hl-compare,
html[data-theme="dark"] .kpi-tile .kpi-tile-label {
	color: #9aa4b0;
}
html[data-theme="dark"] .kpi-section-title {
	color: #eef1f4;
}
html[data-theme="dark"] .kpi-section-title .fa {
	color: #ff8a80;
}
html[data-theme="dark"] .kpi-table th {
	color: #9aa4b0;
	border-bottom-color: #3a414b;
}
html[data-theme="dark"] .kpi-table td {
	border-bottom-color: #2c323a;
}
html[data-theme="dark"] .kpi-cn-table .kpi-cn-row {
	border-bottom-color: #2c323a;
}
html[data-theme="dark"] .kpi-table tr.kpi-team-row td,
html[data-theme="dark"] .kpi-table tr.kpi-team-row:hover td {
	background: #2a3038;
	color: #b4bcc7;
}
html[data-theme="dark"] .kpi-table tr:hover td {
	background: rgba(255, 255, 255, .05);
}
html[data-theme="dark"] .kpi-toggle {
	background: #2a3038;
}
html[data-theme="dark"] .kpi-toggle button,
html[data-theme="dark"] .kpi-toggle a {
	color: #9aa4b0;
}
html[data-theme="dark"] .kpi-toggle button.active,
html[data-theme="dark"] .kpi-toggle a.active {
	background: #3a414b;
	color: #fff;
}

/* KPI: menu of blocks */
html[data-theme="dark"] .kpi-nav a {
	background: #2a3038;
	border-color: #3a414b;
	color: #c3cbd5;
	box-shadow: none;
}
html[data-theme="dark"] .kpi-nav a .fa {
	color: #8794a6;
}
html[data-theme="dark"] .kpi-nav a:hover {
	background: #3a414b;
	border-color: #6b7580;
	color: #fff;
}
html[data-theme="dark"] .kpi-nav a:hover .fa {
	color: #fff;
}

/* Issue list: handler photo ring */
html[data-theme="dark"] .handler-photo {
	box-shadow: 0 0 0 2px #3a414b, 0 1px 4px rgba(0,0,0,.5);
}

/* Navbar AI circle: idle circle softer in dark mode */
html[data-theme="dark"] .ai-circle.ai-idle {
	background: #e6e9ed;
	color: #1f2429;
}

/* KPI headline panel: status circles stand out on the dark card (ring + glow), clearer labels */
html[data-theme="dark"] .kpi-hl-panel {
	background: #20252b;
	border-color: #3a414b;
	box-shadow: none;
}
html[data-theme="dark"] .kpi-hl-title {
	color: #b4bcc7;
}
html[data-theme="dark"] .kpi-hl-name {
	color: #e3e6ea;
}
html[data-theme="dark"] .kpi-hl-cmp {
	color: #b4bcc7;
}
html[data-theme="dark"] .kpi-hl-cmp b {
	color: #ffffff;
}
html[data-theme="dark"] .kpi-hl-circle {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .22), 0 6px 18px rgba(0, 0, 0, .6);
}
/* number inside the circles: always black in dark mode (overrides the inline contrast colour) */
html[data-theme="dark"] .kpi-hl-circle,
html[data-theme="dark"] .kpi-hl-circle a {
	color: #000000 !important;
}