/*
 * Dark theme overrides.
 * Scoped entirely under html.dark-theme so it has no effect until the
 * theme-toggle button (see js/theme-toggle.js) turns it on. Loaded after
 * every other stylesheet so it can win the cascade without needing to
 * match each framework rule's specificity.
 */

html.dark-theme {
	/* Warm-neutral scale (modelled on a terminal/IDE dark theme -- true
	   near-black greys, not the blue-tinted "midnight" look most admin
	   templates default to) rather than a saturated accent-driven palette. */
	--dt-bg: #1a1a1a;
	--dt-bg-alt: #161616;
	--dt-surface: #212121;
	--dt-surface-rgb: 33, 33, 33; /* same color as --dt-surface, as r,g,b for use inside rgba() */
	--dt-surface-alt: #292929;
	--dt-hover-bg: #333333;
	--dt-border: #3a3a3a;
	--dt-text: #d6d6d4;
	--dt-text-strong: #f4f4f2;
	--dt-text-muted: #8f8f8d;
	--dt-link: #9cbde0;
	--dt-link-hover: #c3dcf2;
	--dt-input-bg: #1f1f1f;
	--dt-input-border: #3d3d3d;
	--dt-input-focus: #6b6b69;
	--dt-navbar-bg: #161616;
	--dt-sidebar-bg: #161616;
	--dt-code-bg: #2a2a2a;
	--dt-mono-font: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	--dt-shadow: rgba(0, 0, 0, 0.5);
}

/* Base */
html.dark-theme,
html.dark-theme body {
	background-color: var(--dt-bg);
	color: var(--dt-text);
}
html.dark-theme a { color: var(--dt-link); }
html.dark-theme a:hover,
html.dark-theme a:focus { color: var(--dt-link-hover); }
html.dark-theme h1, html.dark-theme h2, html.dark-theme h3,
html.dark-theme h4, html.dark-theme h5, html.dark-theme h6 { color: var(--dt-text-strong); }
html.dark-theme hr { border-color: var(--dt-border); }
html.dark-theme code {
	background-color: var(--dt-code-bg);
	color: var(--dt-text-strong);
	font-family: var(--dt-mono-font);
	padding: 1px 5px;
	border-radius: 4px;
}
html.dark-theme pre { background-color: var(--dt-code-bg); color: var(--dt-text); border-color: var(--dt-border); }
html.dark-theme blockquote { border-color: var(--dt-border); color: var(--dt-text-muted); }
html.dark-theme .text-muted,
html.dark-theme .smaller-75 { color: var(--dt-text-muted); }
html.dark-theme ::selection { background: #4a4a48; color: #fff; }

/* Layout containers */
html.dark-theme .main-container:before,
html.dark-theme .page-content,
html.dark-theme .main-content {
	background: var(--dt-bg-alt) !important;
	background-image: none !important;
	box-shadow: none !important;
}
html.dark-theme .breadcrumbs {
	background-color: var(--dt-bg-alt) !important;
	border-color: var(--dt-border) !important;
}
html.dark-theme .breadcrumb { background-color: transparent; }
html.dark-theme .breadcrumb > li + li:before { color: var(--dt-text-muted); }

/* Navbar */
html.dark-theme #navbar,
html.dark-theme .navbar.navbar-default {
	background: var(--dt-navbar-bg) !important;
	border-color: var(--dt-border) !important;
}
html.dark-theme .navbar .navbar-brand,
html.dark-theme .navbar .ace-nav > li > a,
html.dark-theme .navbar .ace-nav > li > a:hover,
html.dark-theme .navbar .ace-nav > li > a:focus { color: #fff !important; }
html.dark-theme .navbar .ace-nav > li:hover > a,
html.dark-theme .navbar .ace-nav > li > a:hover,
html.dark-theme .navbar .ace-nav > li > a:focus,
html.dark-theme .navbar .ace-nav > li.open > a { background-color: var(--dt-hover-bg) !important; }
/* Was var(--dt-text-muted) -- a muted grey that, sitting inside an <a> we
   just forced to solid white, made the "jatins" username read as dim/faded
   against the two crisp white labels ("All Projects", the gear icon)
   next to it. Match them instead of standing out as the dull one. */
html.dark-theme .navbar .ace-nav > li > a .user-info { color: #fff !important; }
html.dark-theme .nav-search .nav-search-input {
	background-color: var(--dt-input-bg);
	border-color: var(--dt-border);
	color: var(--dt-text);
}
html.dark-theme .nav-search .nav-search-input:focus {
	border-color: var(--dt-input-focus) !important;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16) !important;
}

/* Sidebar.
   The body carries class "skin-3", and ace-skins.min.css paints each menu
   link (the <a>, not the <li>) light grey via ".skin-3 .nav-list>li>a" --
   so the background must be overridden on the <a> itself, with !important
   where the skin rule also uses it. */
html.dark-theme .sidebar,
html.dark-theme .sidebar .nav-list {
	background-color: var(--dt-sidebar-bg) !important;
	border-color: var(--dt-border) !important;
}
html.dark-theme .nav-list > li {
	background-color: var(--dt-sidebar-bg) !important;
	border-color: var(--dt-border) !important;
}
html.dark-theme .nav-list > li:hover,
html.dark-theme .nav-list > li:hover + li,
html.dark-theme .nav-list > li.active + li,
html.dark-theme .nav-list > li.active + li:last-child,
html.dark-theme .nav-list > li.active + li:last-child:hover {
	border-color: var(--dt-border) !important;
}
html.dark-theme .nav-list > li > a,
html.dark-theme .nav-list > li > a:focus {
	background-color: var(--dt-sidebar-bg) !important;
	color: var(--dt-text) !important;
}
html.dark-theme .nav-list > li:hover > a,
html.dark-theme .nav-list > li.open > a {
	background-color: var(--dt-hover-bg) !important;
	color: var(--dt-text-strong) !important;
}
/* Selected item: a soft rounded highlight plus a left accent bar, so it
   reads as "current page" even when the icon/text alone wouldn't stand out. */
html.dark-theme .nav-list > li.active > a {
	background-color: var(--dt-surface-alt) !important;
	color: var(--dt-link) !important;
	box-shadow: inset 3px 0 0 var(--dt-link);
}
/* Selected item + mouse over: brighten a step further and lift the accent
   bar/text to their "hover" tones, instead of falling back to the plain
   (non-selected) hover look and losing the "this is the current page" cue. */
html.dark-theme .nav-list > li.active:hover > a {
	background-color: var(--dt-hover-bg) !important;
	color: var(--dt-link-hover) !important;
	box-shadow: inset 3px 0 0 var(--dt-link-hover);
}
/* skin-3 draws a white wedge next to the active item pointing into the
   content area; recolor it to match the dark content background */
html.dark-theme .nav-list li.active > a:after { border-right-color: var(--dt-bg-alt) !important; }
html.dark-theme .nav-list li.active > a:before { border-right-color: var(--dt-border) !important; }
html.dark-theme .nav-list > li > .submenu {
	background-color: var(--dt-bg-alt) !important;
	border-color: var(--dt-border) !important;
}
html.dark-theme .nav-list > li > .submenu > li > a {
	background-color: var(--dt-bg-alt) !important;
	color: var(--dt-text-muted) !important;
}
html.dark-theme .nav-list > li > .submenu > li:hover > a,
html.dark-theme .nav-list > li > .submenu > li.active > a {
	background-color: var(--dt-hover-bg) !important;
	color: var(--dt-text-strong) !important;
}
/* collapsed-sidebar flyout labels */
html.dark-theme .sidebar.menu-min .nav-list > li > a > .menu-text,
html.dark-theme .sidebar.menu-min .nav-list > li.active > a > .menu-text {
	background-color: var(--dt-surface) !important;
	border-color: var(--dt-border) !important;
}
html.dark-theme .sidebar-toggle {
	background-color: var(--dt-surface-alt) !important;
	border-color: var(--dt-border) !important;
}
html.dark-theme .sidebar-toggle:hover { background-color: var(--dt-hover-bg) !important; }
html.dark-theme .sidebar-toggle > .ace-icon {
	background-color: var(--dt-surface) !important;
	border-color: var(--dt-text-muted) !important;
	color: var(--dt-text-muted) !important;
}

/* Widget boxes. Colored variants (widget-color-blue2 etc) keep their colored
   header and border for identity, but their body must still go dark -- Ace
   paints every .widget-body white, which showed through wherever the content
   inside was transparent (striped table rows, the Timeline feed). */
html.dark-theme .widget-box {
	background-color: var(--dt-surface);
}
html.dark-theme .widget-box:not([class*="widget-color-"]) {
	border-color: var(--dt-border) !important;
}
html.dark-theme .widget-box:not([class*="widget-color-"]) > .widget-header {
	background: var(--dt-surface-alt) !important;
	background-image: none !important;
	border-color: var(--dt-border) !important;
}
html.dark-theme .widget-body,
html.dark-theme .widget-main {
	background-color: var(--dt-surface) !important;
	color: var(--dt-text);
}
html.dark-theme .widget-toolbox {
	background-color: var(--dt-surface-alt) !important;
	border-color: var(--dt-border) !important;
	color: var(--dt-text);
}
/* Timeline feed entries (dotted separators are light grey/white in Ace) */
html.dark-theme .profile-activity { border-color: var(--dt-border) !important; }
html.dark-theme .profile-activity:hover,
html.dark-theme .profile-activity:first-child:hover {
	background-color: var(--dt-hover-bg) !important;
	border-color: var(--dt-border) !important;
}
html.dark-theme .profile-activity .time { color: var(--dt-text-muted); }
html.dark-theme .profile-activity a.user { color: var(--dt-link); }
html.dark-theme .widget-header .widget-title,
html.dark-theme .widget-header h1, html.dark-theme .widget-header h2,
html.dark-theme .widget-header h3, html.dark-theme .widget-header h4,
html.dark-theme .widget-header h5 { color: var(--dt-text-strong); }
html.dark-theme .widget-toolbar > .widget-menu > a { color: var(--dt-text-muted); }
html.dark-theme .widget-toolbar > .widget-menu > a:hover { color: var(--dt-text-strong); }

/* Panels / wells */
html.dark-theme .panel { background-color: var(--dt-surface); border-color: var(--dt-border); }
html.dark-theme .panel-default > .panel-heading {
	background-color: var(--dt-surface-alt);
	border-color: var(--dt-border);
	color: var(--dt-text-strong);
}
html.dark-theme .panel-footer { background-color: var(--dt-surface-alt); border-color: var(--dt-border); }
html.dark-theme .well { background-color: var(--dt-surface-alt); border-color: var(--dt-border); color: var(--dt-text); }

/* Tables.
   ace-mantis.css forces "table { background-color: #ffffff !important }" on
   every table element; this counter-rule (higher specificity, also
   !important) makes tables transparent in dark mode so the dark surface
   behind them shows through. Specific backgrounds (thead, striped rows,
   .small-box cells...) re-apply below. */
html.dark-theme table { background-color: transparent !important; }
html.dark-theme .table { color: var(--dt-text); background-color: transparent !important; }
html.dark-theme .table > thead > tr > th,
html.dark-theme .table > tbody > tr > th,
html.dark-theme .table > tfoot > tr > th,
html.dark-theme .table > thead > tr > td,
html.dark-theme .table > tbody > tr > td,
html.dark-theme .table > tfoot > tr > td,
html.dark-theme .table-bordered,
html.dark-theme .table-bordered > thead > tr > th,
html.dark-theme .table-bordered > tbody > tr > th,
html.dark-theme .table-bordered > thead > tr > td,
html.dark-theme .table-bordered > tbody > tr > td {
	border-color: var(--dt-border) !important;
}
html.dark-theme .table > thead > tr > th {
	background-color: var(--dt-surface-alt);
	color: var(--dt-text-strong);
}
html.dark-theme .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--dt-bg-alt); }
html.dark-theme .table-hover > tbody > tr:hover,
html.dark-theme .table-hover > tbody > tr:hover > td,
html.dark-theme .table-hover > tbody > tr:hover > th { background-color: var(--dt-hover-bg) !important; }
/* Bootstrap contextual rows/cells paint light pastels at td level, which
   would sit on top of the dark row colors (e.g. a row marked "active"/
   selected). Recolor them onto the dark palette; hover variants slightly
   lighter, matching Bootstrap's behaviour. */
html.dark-theme .table > tbody > tr.active > td,
html.dark-theme .table > tbody > tr.active > th,
html.dark-theme .table > tbody > tr > td.active,
html.dark-theme .table > tbody > tr > th.active,
html.dark-theme .table > thead > tr > th.active,
html.dark-theme .table > thead > tr.active > th { background-color: var(--dt-hover-bg) !important; }
html.dark-theme .table-hover > tbody > tr.active:hover > td,
html.dark-theme .table-hover > tbody > tr:hover > .active,
html.dark-theme .table-hover > tbody > tr.active:hover > th { background-color: #3b4350 !important; }
html.dark-theme .table > tbody > tr.success > td,
html.dark-theme .table > tbody > tr > td.success { background-color: #1d3d24 !important; }
html.dark-theme .table > tbody > tr.info > td,
html.dark-theme .table > tbody > tr > td.info { background-color: #1c3a4d !important; }
html.dark-theme .table > tbody > tr.warning > td,
html.dark-theme .table > tbody > tr > td.warning { background-color: #4a3b12 !important; }
html.dark-theme .table > tbody > tr.danger > td,
html.dark-theme .table > tbody > tr > td.danger { background-color: #4a1f1c !important; }
html.dark-theme .table-hover > tbody > tr.success:hover > td,
html.dark-theme .table-hover > tbody > tr:hover > .success { background-color: #26522f !important; }
html.dark-theme .table-hover > tbody > tr.info:hover > td,
html.dark-theme .table-hover > tbody > tr:hover > .info { background-color: #254c64 !important; }
html.dark-theme .table-hover > tbody > tr.warning:hover > td,
html.dark-theme .table-hover > tbody > tr:hover > .warning { background-color: #5f4c19 !important; }
html.dark-theme .table-hover > tbody > tr.danger:hover > td,
html.dark-theme .table-hover > tbody > tr:hover > .danger { background-color: #5e2924 !important; }

/* Status swatches (the little fa-status-box square before each bug ID on
   Roadmap/Change Log/View Issues). Their color comes from your configured
   status_colors (Manage > Configuration), not this stylesheet -- several of
   those are light/near-white by design for a white page, and turn all but
   invisible on a black background. A thin dark outline keeps every status
   color legible here (and gives the darker ones, like green, a bit more
   definition too) without needing to know or override the actual colors. */
html.dark-theme .fa-status-box {
	filter: drop-shadow(0 0 1px var(--dt-border)) drop-shadow(0 0 1px var(--dt-border));
}

/* Mantis-specific table cells (see css/default.css) */
html.dark-theme td.category, html.dark-theme th.category {
	background-color: var(--dt-surface-alt) !important;
	color: var(--dt-text) !important;
}
/* Mutes the Status field's status-colored <td> the same way default.css does
   for light mode -- see the comment there. */
html.dark-theme td[class*="status-"][class*="-color"] {
	box-shadow: inset 0 0 0 999px rgba(var(--dt-surface-rgb), 0.82) !important;
}
html.dark-theme tr.spacer { background-color: var(--dt-bg) !important; }
html.dark-theme .sticky-separator { background-color: var(--dt-border) !important; }
html.dark-theme tr.bugnote .bugnote-note { background-color: var(--dt-surface) !important; color: var(--dt-text) !important; }
html.dark-theme .bugnote-private { background-color: #4a3f1a !important; color: var(--dt-text) !important; }
html.dark-theme td.overdue { background-color: #7a2e22 !important; color: #fff !important; }
html.dark-theme .color-global { background-color: #1f3a52 !important; }
html.dark-theme .color-project { background-color: #1f4a2e !important; }

/* Forms */
html.dark-theme .form-control,
html.dark-theme select,
html.dark-theme textarea,
html.dark-theme input[type="text"],
html.dark-theme input[type="password"],
html.dark-theme input[type="email"],
html.dark-theme input[type="number"],
html.dark-theme input[type="search"],
html.dark-theme input[type="tel"],
html.dark-theme input[type="url"],
html.dark-theme input[type="date"] {
	background-color: var(--dt-input-bg) !important;
	border-color: var(--dt-input-border) !important;
	color: var(--dt-text) !important;
	border-radius: 6px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
/* Many of this app's <select>/<input> fields (status/handler dropdowns,
   filter fields...) use legacy classes like "input-sm" instead of
   "form-control", so a rule scoped to only .form-control:focus silently
   missed most of them -- e.g. the "Change Status To" dropdown showed no
   visible change at all while cycling values with the arrow keys. Every
   themed field gets the same focus treatment now, and it's a clearer
   glow (was a near-invisible 6% white) so the currently-focused field is
   unmistakable at a glance, not just on close inspection. */
html.dark-theme .form-control:focus,
html.dark-theme select:focus,
html.dark-theme textarea:focus,
html.dark-theme input[type="text"]:focus,
html.dark-theme input[type="password"]:focus,
html.dark-theme input[type="email"]:focus,
html.dark-theme input[type="number"]:focus,
html.dark-theme input[type="search"]:focus,
html.dark-theme input[type="tel"]:focus,
html.dark-theme input[type="url"]:focus,
html.dark-theme input[type="date"]:focus {
	border-color: var(--dt-input-focus) !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16) !important;
}
html.dark-theme .form-control[disabled],
html.dark-theme .form-control[readonly],
html.dark-theme fieldset[disabled] .form-control {
	background-color: var(--dt-surface-alt) !important;
	color: var(--dt-text-muted) !important;
}
html.dark-theme .input-group-addon {
	background-color: var(--dt-surface-alt) !important;
	border-color: var(--dt-input-border) !important;
	color: var(--dt-text-muted) !important;
}
html.dark-theme .form-control::-webkit-input-placeholder { color: var(--dt-text-muted); }
html.dark-theme .form-control::-moz-placeholder { color: var(--dt-text-muted); }
html.dark-theme .help-block { color: var(--dt-text-muted); }
html.dark-theme span.required,
html.dark-theme .required { color: #e0847e !important; }
html.dark-theme input:-webkit-autofill,
html.dark-theme input:-webkit-autofill:hover,
html.dark-theme input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--dt-text);
	-webkit-box-shadow: 0 0 0 1000px var(--dt-input-bg) inset;
	transition: background-color 5000s ease-in-out 0s;
}
html.dark-theme select[disabled] {
	background-color: var(--dt-bg-alt) !important;
	color: var(--dt-text-muted) !important;
}

/* Buttons */
html.dark-theme .btn-default,
html.dark-theme .btn-white {
	background-color: var(--dt-surface-alt) !important;
	background-image: none !important;
	border-color: var(--dt-border) !important;
	color: var(--dt-text) !important;
}
html.dark-theme .btn-default:hover,
html.dark-theme .btn-white:hover,
html.dark-theme .btn-default:focus,
html.dark-theme .btn-white:focus { background-color: var(--dt-hover-bg) !important; color: var(--dt-text-strong) !important; }
html.dark-theme .btn-link { color: var(--dt-link) !important; }
/* Primary action buttons (Report Issue, Team View...) were still raw
   Bootstrap blue (#337ab7) -- fine on white, a little vivid against the
   near-black chrome everywhere else. One shade down, matching the muted
   tone the rest of the palette already uses. */
html.dark-theme .btn-primary {
	background-color: #3d6f93 !important;
	border-color: #345d7b !important;
}
html.dark-theme .btn-primary:hover,
html.dark-theme .btn-primary:focus {
	background-color: #345d7b !important;
	border-color: #2b4d66 !important;
}
html.dark-theme .btn-primary:active,
html.dark-theme .btn-primary.active {
	background-color: #2b4d66 !important;
	border-color: #223d52 !important;
}

/* Keyboard-focus ring for anything not covered by a more specific rule
   above (links, plain buttons, checkboxes, radios) -- :focus-visible so it
   only shows for real keyboard navigation, not every mouse click. */
html.dark-theme a:focus-visible,
html.dark-theme button:focus-visible,
html.dark-theme .btn:focus-visible,
html.dark-theme input[type="checkbox"]:focus-visible,
html.dark-theme input[type="radio"]:focus-visible {
	outline: 2px solid var(--dt-input-focus) !important;
	outline-offset: 2px;
}

/* Dropdown menus */
html.dark-theme .dropdown-menu {
	background-color: var(--dt-surface) !important;
	border-color: var(--dt-border) !important;
	box-shadow: 0 4px 12px var(--dt-shadow);
}
html.dark-theme .dropdown-menu > li > a { color: var(--dt-text) !important; }
html.dark-theme .dropdown-menu > li > a:hover,
html.dark-theme .dropdown-menu > li > a:focus { background-color: var(--dt-hover-bg) !important; color: var(--dt-text-strong) !important; }
html.dark-theme .dropdown-menu .divider { background-color: var(--dt-border) !important; }
html.dark-theme .dropdown-menu.dropdown-caret:before { border-bottom-color: rgba(0, 0, 0, 0.4); }
html.dark-theme .dropdown-menu.dropdown-caret:after { border-bottom-color: var(--dt-surface) !important; }
/* Project selector dropdown items use ".list > li > a" (ace-mantis.css sets
   them near-black), not the generic ".dropdown-menu > li > a" */
html.dark-theme .list > li > a { color: var(--dt-text) !important; }
html.dark-theme .list > li > a:focus,
html.dark-theme .list > li > a:hover {
	color: var(--dt-text-strong) !important;
	background-color: var(--dt-hover-bg) !important;
}
/* Project search box (typeahead) inside the same dropdown */
html.dark-theme .tt-menu {
	background-color: var(--dt-surface) !important;
	border-color: var(--dt-border) !important;
}
html.dark-theme .tt-suggestion { color: var(--dt-text); }
html.dark-theme input.tt-hint,
html.dark-theme .form-group input.tt-hint {
	background-color: var(--dt-input-bg) !important;
	color: var(--dt-text-muted) !important;
}

/* Modals */
html.dark-theme .modal-content {
	background-color: var(--dt-surface) !important;
	border-color: var(--dt-border) !important;
	color: var(--dt-text);
}
html.dark-theme .modal-header,
html.dark-theme .modal-footer { border-color: var(--dt-border) !important; }
html.dark-theme .close { color: var(--dt-text); text-shadow: none; opacity: .6; }
html.dark-theme .close:hover { color: var(--dt-text-strong); opacity: 1; }

/* Alerts */
html.dark-theme .alert-info { background-color: #1c3a4d; border-color: #2a5470; color: #bfe3f5; }
html.dark-theme .alert-success { background-color: #1d3d24; border-color: #2c5c36; color: #b9e6c2; }
html.dark-theme .alert-warning { background-color: #4a3b12; border-color: #6b571c; color: #f3dd9e; }
html.dark-theme .alert-danger { background-color: #4a1f1c; border-color: #6b2e29; color: #f5b8b2; }

/* Pagination */
html.dark-theme .pagination > li > a,
html.dark-theme .pagination > li > span {
	background-color: var(--dt-surface) !important;
	border-color: var(--dt-border) !important;
	color: var(--dt-link) !important;
}
html.dark-theme .pagination > li > a:hover,
html.dark-theme .pagination > li > a:focus { background-color: var(--dt-hover-bg) !important; }
html.dark-theme .pagination > .active > a,
html.dark-theme .pagination > .active > span {
	background-color: var(--dt-link) !important;
	border-color: var(--dt-link) !important;
	color: #fff !important;
}
html.dark-theme .pagination > .disabled > a,
html.dark-theme .pagination > .disabled > span { background-color: var(--dt-bg-alt) !important; color: var(--dt-text-muted) !important; }

/* Progress bars (e.g. roadmap version completion) */
html.dark-theme .progress {
	background-color: var(--dt-surface-alt) !important;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Tabs (e.g. the Manage Projects/Tags/Profiles/Configuration bar).
   ace.min.css paints every tab a flat white/off-white with !important
   background + border colors, tuned for a light page -- none of it responds
   to the theme class, so every state needs an !important counter-rule here.
   Accented in steel grey rather than the link blue, since this is a page
   section switcher, not a "you are here" navigation cue like the sidebar. */
html.dark-theme .nav-tabs { border-color: var(--dt-border); }
html.dark-theme .nav-tabs > li > a {
	background-color: var(--dt-surface-alt) !important;
	border-width: 0 !important;
	border-bottom: 2px solid var(--dt-border) !important;
	color: var(--dt-text-muted) !important;
	border-radius: 4px 4px 0 0;
}
html.dark-theme .nav-tabs > li > a:hover,
html.dark-theme .nav-tabs > li > a:focus {
	background-color: var(--dt-hover-bg) !important;
	color: var(--dt-text-strong) !important;
}
html.dark-theme .nav-tabs > li.active > a,
html.dark-theme .nav-tabs > li.active > a:hover,
html.dark-theme .nav-tabs > li.active > a:focus {
	background-color: var(--dt-surface) !important;
	border-bottom: 2px solid #8a9199 !important;
	color: var(--dt-text-strong) !important;
	box-shadow: none !important;
}

/* Tooltips / popovers */
html.dark-theme .tooltip-inner { background-color: #000; color: #fff; }
html.dark-theme .tooltip.top .tooltip-arrow { border-top-color: #000; }
html.dark-theme .tooltip.bottom .tooltip-arrow { border-bottom-color: #000; }
html.dark-theme .popover { background-color: var(--dt-surface); border-color: var(--dt-border); color: var(--dt-text); }
html.dark-theme .popover-title { background-color: var(--dt-surface-alt); border-color: var(--dt-border); color: var(--dt-text-strong); }

/* Labels / badges.
   Bootstrap's base .label draws a solid black 1px border and Ace's color
   variants (label-light, label-grey, label-white, label-yellow...) are all
   light-background chips meant for a white page -- e.g. the category tag
   "[Standard Customization]" on Change Log/Roadmap rows, or the Timeline
   date-range chips. Recolor every variant onto the dark palette and round
   the corners so they read as pills rather than stark rectangles. */
html.dark-theme .label {
	border-color: var(--dt-border) !important;
	border-radius: 4px;
}
html.dark-theme .label-default,
html.dark-theme .label-light,
html.dark-theme .label-grey,
html.dark-theme .label-white {
	background-color: var(--dt-surface-alt) !important;
	color: var(--dt-text) !important;
}
html.dark-theme .label-yellow {
	background-color: #4a3b12 !important;
	color: #f3dd9e !important;
	border-color: #6b571c !important;
}
html.dark-theme .badge { background-color: var(--dt-text-muted); color: var(--dt-bg); }

/* Login / signup pages */
html.dark-theme body.login-layout { background-color: var(--dt-bg) !important; }
html.dark-theme .login-layout .widget-box {
	background-color: var(--dt-surface);
	border-color: var(--dt-border);
}
html.dark-theme .login-layout .toolbar {
	background-color: var(--dt-surface-alt) !important;
	border-top-color: var(--dt-border) !important;
}
/* Ace's default styling assumes this link sits on a bright branded gradient
   (pale yellow #FE9 with a drop-shadow); on our neutral dark toolbar it just
   reads as an odd, out-of-place accent, so recolor it to the standard link
   token like every other link in the theme. */
html.dark-theme .back-to-login-link,
html.dark-theme .signup-box .back-to-login-link {
	color: var(--dt-link) !important;
	text-shadow: none !important;
}
html.dark-theme .back-to-login-link:hover { color: var(--dt-link-hover) !important; }
/* The logo's dark wordmark has very little contrast against a near-black
   page; lift it rather than leaving it looking washed out. */
html.dark-theme .login-logo img { filter: brightness(1.5) contrast(1.05); }

/* Footer */
html.dark-theme .footer { background-color: var(--dt-bg-alt); }
html.dark-theme .footer .footer-inner { color: var(--dt-text-muted); border-color: var(--dt-border); }

/* Bootstrap datetimepicker widget (css/bootstrap-datetimepicker-4.17.47.min.css) */
html.dark-theme .bootstrap-datetimepicker-widget.dropdown-menu { color: var(--dt-text) !important; }
html.dark-theme .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after { border-bottom-color: var(--dt-surface) !important; }
html.dark-theme .bootstrap-datetimepicker-widget.dropdown-menu.top:after { border-top-color: var(--dt-surface) !important; }
html.dark-theme .bootstrap-datetimepicker-widget table thead tr:first-child th:hover { background: var(--dt-hover-bg) !important; }
html.dark-theme .bootstrap-datetimepicker-widget table td.cw,
html.dark-theme .bootstrap-datetimepicker-widget table td.old,
html.dark-theme .bootstrap-datetimepicker-widget table td.new,
html.dark-theme .bootstrap-datetimepicker-widget table td span.old { color: var(--dt-text-muted) !important; }
html.dark-theme .bootstrap-datetimepicker-widget table td.day:hover,
html.dark-theme .bootstrap-datetimepicker-widget table td.hour:hover,
html.dark-theme .bootstrap-datetimepicker-widget table td.minute:hover,
html.dark-theme .bootstrap-datetimepicker-widget table td.second:hover,
html.dark-theme .bootstrap-datetimepicker-widget table td span:hover { background: var(--dt-hover-bg) !important; }
html.dark-theme .bootstrap-datetimepicker-widget table th.disabled,
html.dark-theme .bootstrap-datetimepicker-widget table th.disabled:hover,
html.dark-theme .bootstrap-datetimepicker-widget table td.disabled,
html.dark-theme .bootstrap-datetimepicker-widget table td.disabled:hover,
html.dark-theme .bootstrap-datetimepicker-widget table td span.disabled,
html.dark-theme .bootstrap-datetimepicker-widget table td span.disabled:hover { color: var(--dt-text-muted) !important; }

/* Dropzone file upload widget (css/dropzone-4.3.0.css, restyled by css/ace-mantis.css) */
html.dark-theme .dropzone {
	background-color: var(--dt-surface-alt) !important;
	border-color: var(--dt-border) !important;
}
html.dark-theme .dropzone .dz-message,
html.dark-theme .dropzone .dz-message * { color: var(--dt-text); }
html.dark-theme .dropzone .dz-preview,
html.dark-theme .dropzone-previews .dz-preview {
	background: var(--dt-surface-alt) !important;
	border-color: var(--dt-border) !important;
}
html.dark-theme .dropzone .dz-preview .dz-details,
html.dark-theme .dropzone-previews .dz-preview .dz-details {
	background: var(--dt-surface) !important;
	color: var(--dt-text);
}
html.dark-theme .dropzone .dz-preview,
html.dark-theme .dropzone-previews .dz-preview {
	background-color: var(--dt-surface) !important;
	border-color: var(--dt-border) !important;
}
html.dark-theme .dropzone .dz-preview.dz-image-preview { background-color: var(--dt-surface) !important; }
html.dark-theme .dropzone .dz-preview.dz-file-preview .dz-image { background: var(--dt-surface-alt) !important; }
html.dark-theme .dropzone .dz-preview .dz-details,
html.dark-theme .dropzone-previews .dz-preview .dz-details {
	background-color: var(--dt-surface-alt) !important;
	color: var(--dt-text) !important;
}
html.dark-theme .dropzone .dz-preview .dz-details .dz-filename span,
html.dark-theme .dropzone .dz-preview .dz-details .dz-size span {
	background-color: rgba(0, 0, 0, 0.4) !important;
	color: var(--dt-text-strong) !important;
}
html.dark-theme .dropzone .dz-preview .dz-progress { background: rgba(255, 255, 255, 0.2) !important; }
html.dark-theme .dropzone .dz-preview .dz-error-message,
html.dark-theme .dropzone-previews .dz-preview .dz-error-message {
	background-color: #4a1f1c !important;
	color: #f5b8b2 !important;
}

/* Assignee picker (js/assignee-picker.js) -- the input itself is styled by
   the shared .form-control rules above; only the floating dropdown needs
   dark-mode colors here. */
html.dark-theme .rs-picker-menu {
	background: var(--dt-surface);
	border-color: var(--dt-border);
	box-shadow: 0 4px 12px var(--dt-shadow);
}
html.dark-theme .rs-picker-option { color: var(--dt-text); }
html.dark-theme .rs-picker-option.is-active { background-color: var(--dt-hover-bg); color: var(--dt-text-strong); }
html.dark-theme .rs-picker-option.is-empty-label,
html.dark-theme .rs-picker-no-results { color: var(--dt-text-muted); }

/* Theme toggle button (base styling applies in both themes) */
.theme-toggle-btn { cursor: pointer; }
html.dark-theme .theme-toggle-btn .ace-icon { color: #f5d76e; }
.theme-toggle-floating {
	position: fixed;
	top: 14px;
	right: 14px;
	z-index: 1000;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.08);
	color: #555;
}
.theme-toggle-floating:hover { background-color: rgba(0, 0, 0, 0.15); text-decoration: none; }
html.dark-theme .theme-toggle-floating { background-color: rgba(255, 255, 255, 0.08); color: var(--dt-text); }
html.dark-theme .theme-toggle-floating:hover { background-color: rgba(255, 255, 255, 0.15); }

/* My View stats table (.small-box styles live inline in my_view_page.php,
   emitted after this stylesheet -- the higher specificity here wins) */
html.dark-theme .stats-head {
	background: #2b4f74 !important;
	color: var(--dt-text-strong) !important;
}
html.dark-theme .stats-table { background-color: var(--dt-border) !important; }
html.dark-theme .small-box {
	background-color: var(--dt-surface-alt) !important;
	color: var(--dt-text-strong) !important;
	border-color: var(--dt-border) !important;
}
html.dark-theme .small-box a { color: var(--dt-link) !important; }
html.dark-theme .small-box.green { background-color: #2e7d32 !important; }
html.dark-theme .small-box.red { background-color: #a94743 !important; }
html.dark-theme .small-box.orange { background-color: #a8690f !important; }
html.dark-theme .small-box.green a,
html.dark-theme .small-box.red a,
html.dark-theme .small-box.orange a { color: #fff !important; }

/* rtvl_dashboard "Team View" org chart.
   Standalone page (its own <html>/<head>, not routed through core.php), so
   it doesn't inherit anything above -- classes are unique to this page
   except .small-box/.modal-content/.status-notacted&co, which are shared
   with my_view_page.php's stats table and bug-details modal and already
   themed by the rules for those above. */
html.dark-theme .tree li::before,
html.dark-theme .tree li::after,
html.dark-theme .tree ul ul::before { border-color: var(--dt-border) !important; }

html.dark-theme .node {
	background-color: var(--dt-surface) !important;
	border-color: #3d6b47 !important;
	color: #8fd19e !important;
	box-shadow: 0 0 5px var(--dt-shadow);
}
html.dark-theme .dept-node {
	background-color: var(--dt-surface) !important;
	border-color: #a8690f !important;
	color: #e6a95c !important;
}

html.dark-theme .status { color: #fff !important; }
html.dark-theme .status.total { background-color: #a94743 !important; }
html.dark-theme .status.today { background-color: #a8690f !important; }
html.dark-theme .status.worked { background-color: #2e7d32 !important; }
html.dark-theme .zero-count { background-color: #a94743 !important; }
/* Every status label cell doubles as .small-box (which turns its <a> the
   themed link color, see the generic .small-box rules above) -- keep these
   ones white-on-color instead, matching the light theme and the
   small-box.green/red/orange treatment used on My View. */
html.dark-theme td.status a { color: #fff !important; }

/* rtvl_dashboard's own modal-content isn't Bootstrap's .modal-content but
   uses the same class name, so it already picks up the "Modals" rules
   above (dark surface, themed text). Its .close icon is locally defined
   with color:#aaa, :hover{color:black} -- that hover would turn invisible
   against a dark modal, so it needs its own override here. */
html.dark-theme #bugModal .close { color: var(--dt-text-muted); }
html.dark-theme #bugModal .close:hover { color: var(--dt-text-strong); }

/* Scrollbars */
html.dark-theme ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark-theme ::-webkit-scrollbar-track { background: var(--dt-bg-alt); }
html.dark-theme ::-webkit-scrollbar-thumb { background: var(--dt-border); border-radius: 6px; }
html.dark-theme ::-webkit-scrollbar-thumb:hover { background: var(--dt-text-muted); }

/* Never print in dark ink-on-black */
@media print {
	html.dark-theme,
	html.dark-theme body,
	html.dark-theme .page-content,
	html.dark-theme .main-container:before {
		background: #fff !important;
		color: #000 !important;
	}
}