/**
 * Dark Mode theme overrides for Vtiger CRM (v7 layout).
 *
 * Scope: everything is nested under `html.dark-mode` so the file is a pure
 * additive overlay - it never touches the default (light) theme.
 *
 * The per-app skins (layouts/v7/skins/<app>/style.less) are compiled in
 * the browser at runtime (see less.min.js in JSResources.tpl) and can be
 * injected into <head> *after* this stylesheet, so several rules below use
 * !important to guarantee they still win regardless of load order.
 *
 * See layouts/v7/resources/DarkMode.js for the toggle logic that adds/removes
 * the `dark-mode` class on <html> and persists the choice in localStorage.
 */

html.dark-mode {
	--dm-bg: #181a1b;
	--dm-bg-alt: #202224;
	--dm-bg-raised: #26282b;
	--dm-bg-hover: #2f3236;
	--dm-border: #3a3d41;
	--dm-text: #e8e6e3;
	--dm-text-muted: #a8adb3;
	--dm-link: #6fb3f2;
	--dm-input-bg: #24262a;
	--dm-shadow: rgba(0, 0, 0, 0.6);
	/* Hints the browser to render native form controls (select dropdown
	 * option lists, checkboxes, radios, date pickers, scrollbars) with a
	 * dark UA theme instead of the OS-default light one. */
	color-scheme: dark;
}

/* The base skin paints a light-grey linear-gradient *background-image* on
 * top of buttons, toggle switches, etc. (a Bootstrap 2/3 "glossy button"
 * effect). Setting background-color alone doesn't remove it - the gradient
 * still renders on top, making every button look washed-out grey regardless
 * of the dark background-color underneath. Stripped globally here. */
html.dark-mode .btn,
html.dark-mode .bootstrap-switch,
html.dark-mode .bootstrap-switch-handle-on,
html.dark-mode .bootstrap-switch-handle-off,
html.dark-mode .bootstrap-switch-label,
html.dark-mode .select2-choice,
html.dark-mode .select2-choices,
html.dark-mode .select2-container .select2-choice,
html.dark-mode .select2-container-multi .select2-choices,
html.dark-mode .select2-drop,
html.dark-mode .select2-dropdown-open .select2-choice,
html.dark-mode .chzn-container .chzn-single,
html.dark-mode .chzn-container .chzn-drop,
html.dark-mode .chzn-container-active .chzn-single {
	background-image: none !important;
}

/* -----------------------------------------------------------------------
 * Base
 * --------------------------------------------------------------------- */
html.dark-mode,
html.dark-mode body {
	background-color: var(--dm-bg) !important;
	color: var(--dm-text) !important;
}

html.dark-mode #page,
html.dark-mode .app-body {
	background-color: var(--dm-bg) !important;
}

/* .container-fluid and .row-fluid are generic Bootstrap grid classes used
 * *everywhere*, including nested inside panels/modals that are meant to be
 * a lighter shade (--dm-bg-raised/--dm-bg-alt) than the page background.
 * Forcing them to a single fixed dark color (as this rule used to) paints
 * a visible "seam"/darker rectangle wherever one of these divs sits inside
 * a lighter container - e.g. related-list search inputs, the Add Event/Task
 * form. Left transparent so they show whatever their actual ancestor
 * background is; the page-wide dark background from `body` above still
 * shows through by default wherever nothing else has painted over it. */
html.dark-mode .container-fluid,
html.dark-mode .row-fluid {
	background-color: transparent !important;
}

html.dark-mode a {
	color: var(--dm-link);
}

/* The base skin embosses text with a white 1px drop-shadow (a light-theme
 * "engraved" effect on buttons, tab labels, etc.) - on a dark background
 * with light text that turns into a blurry halo, so it's stripped globally. */
html.dark-mode * {
	text-shadow: none !important;
}

html.dark-mode hr {
	border-color: var(--dm-border) !important;
}

html.dark-mode ::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
html.dark-mode ::-webkit-scrollbar-track {
	background: var(--dm-bg-alt);
}
html.dark-mode ::-webkit-scrollbar-thumb {
	background: #4a4d51;
	border-radius: 5px;
}

/* -----------------------------------------------------------------------
 * Top navigation / app switcher / search bar
 * --------------------------------------------------------------------- */
html.dark-mode .app-fixed-navbar,
html.dark-mode .navbar-inverse,
html.dark-mode .global-nav,
html.dark-mode .commonActionsContainer {
	background-color: #101112 !important;
	border-color: var(--dm-border) !important;
}

html.dark-mode .search-link,
html.dark-mode .keyword-input,
html.dark-mode #basicSearchModulesList {
	background-color: var(--dm-input-bg) !important;
	color: var(--dm-text) !important;
	border-color: var(--dm-border) !important;
}

html.dark-mode .keyword-input::placeholder {
	color: var(--dm-text-muted);
}

html.dark-mode .global-actions .fa,
html.dark-mode .global-actions a,
html.dark-mode .userName {
	color: var(--dm-text) !important;
}

/* -----------------------------------------------------------------------
 * Sidebar / app menu / module navigator
 * --------------------------------------------------------------------- */
html.dark-mode #sidebar,
html.dark-mode #modnavigator,
html.dark-mode .mod-switcher-container,
html.dark-mode .app-menu,
html.dark-mode .app-nav,
html.dark-mode .module-nav {
	background-color: var(--dm-bg-alt) !important;
	border-color: var(--dm-border) !important;
}

html.dark-mode #sidebar a,
html.dark-mode #sidebar .active-app-title,
html.dark-mode .moduleList .module-name,
html.dark-mode .app-menu .app-name {
	color: var(--dm-text) !important;
}

html.dark-mode .mod-switcher-container li a:hover,
html.dark-mode .mod-switcher-container li.active a,
html.dark-mode .app-list a.menu-item:hover {
	background-color: var(--dm-bg-hover) !important;
}

/* .menu-item is reused for two unrelated widgets: (1) the colored home-
 * screen tiles in Sidebar.tpl (pastel inline background, needs dark text
 * for contrast - what this rule was written for), and (2) the hamburger
 * mega-menu's app rows (.app-item, e.g. "Dashboard"/"MARKETING"/...). Since
 * this rule's #1b1b1b !important color was winning on both, the app-menu's
 * icons/chevrons (which inherit color from their .app-item parent) were
 * rendering near-black on a dark navy background - effectively invisible.
 * Excluding .app-item here and coloring it explicitly below fixes that
 * without touching the pastel-tile case. */
html.dark-mode .menu-item:not(.app-item) {
	filter: brightness(0.75) saturate(1.1);
	color: #1b1b1b !important;
}

/* Hamburger mega-menu (#app-menu): app rows + their icons/chevrons, and the
 * expanded submenu (Tickets/FAQ/...). The native hover/active fill
 * (@menuBackGround, #596875) is a much lighter blue-gray than the rest of
 * our neutral dark palette, which reads as a jarring, misaligned highlight
 * against everything else in the menu - swap it for --dm-bg-hover so hover
 * states look consistent across the whole app, not just this menu. */
html.dark-mode .app-item {
	background-color: var(--dm-bg-alt) !important;
	color: var(--dm-text) !important;
}
html.dark-mode .app-item .fa {
	color: var(--dm-text) !important;
}
html.dark-mode .app-item:hover,
html.dark-mode .active-app-item,
html.dark-mode .app-modules-dropdown li:hover {
	background-color: var(--dm-bg-hover) !important;
	color: var(--dm-text) !important;
}

/* #modules-menu: the horizontal app-tab strip inside the module navigator
 * (Menubar.tpl). It has its own explicit @moduleNav background distinct
 * from the .module-nav wrapper already covered above, so it was still
 * showing the native navy underneath. */
html.dark-mode #modules-menu {
	background-color: var(--dm-bg-alt) !important;
}
html.dark-mode .modules-menu ul li:hover {
	background-color: var(--dm-bg-hover) !important;
}
html.dark-mode .modules-menu ul li.active {
	background-color: var(--dm-bg-raised) !important;
}

/* #appnavigator: the topbar hamburger button that opens #app-menu. Its
 * visible background actually comes from the .app-navigator div nested
 * inside it (which paints over the whole button), so both need the
 * override; its native :hover fill is the same too-bright @menuBackGround
 * blue-gray used elsewhere in the app menu, so align that to
 * --dm-bg-hover too, matching the fix already applied to #app-menu. */
html.dark-mode #appnavigator,
html.dark-mode #appnavigator .app-navigator {
	background-color: var(--dm-bg-alt) !important;
}
html.dark-mode #appnavigator .app-navigator:hover {
	background-color: var(--dm-bg-hover) !important;
}
html.dark-mode #appnavigator .app-icon {
	color: var(--dm-text) !important;
}

/* -----------------------------------------------------------------------
 * Page chrome around list / detail / settings views
 * (v7 renders a second "module action bar" row inside the fixed navbar,
 * plus several white content wrapper divs - all opaque by default)
 * --------------------------------------------------------------------- */
html.dark-mode .module-action-bar,
html.dark-mode .module-action-content,
html.dark-mode .module-breadcrumb,
html.dark-mode .coloredBorderTop,
html.dark-mode .content-area,
html.dark-mode .main-container,
html.dark-mode .listViewPageDiv,
html.dark-mode .detailViewPageDiv,
html.dark-mode .listview-actions-container,
html.dark-mode .listViewTopHeader,
html.dark-mode .settingsContainer,
html.dark-mode .quickCreateContainer,
html.dark-mode .list-menu-content,
html.dark-mode .sidebar-container,
html.dark-mode .sidebar-essentials,
html.dark-mode .sidebar-menu,
html.dark-mode .list-group,
html.dark-mode .lists-menu {
	background-color: var(--dm-bg) !important;
	border-color: var(--dm-border) !important;
	color: var(--dm-text) !important;
}

html.dark-mode .current-filter-name,
html.dark-mode .filterName,
html.dark-mode .module-breadcrumb a,
html.dark-mode .module-breadcrumb span {
	color: var(--dm-text) !important;
}

/* -----------------------------------------------------------------------
 * Panels / widgets / cards used across list & detail views
 * --------------------------------------------------------------------- */
html.dark-mode .panel,
html.dark-mode .panel-default,
html.dark-mode .widget,
html.dark-mode .detailViewContainer,
html.dark-mode .listViewContainer,
html.dark-mode .dashboardWidget,
html.dark-mode .contentsDiv,
html.dark-mode .summaryContainer,
html.dark-mode .relatedContainer,
html.dark-mode .detailview-header-block,
html.dark-mode .summaryWidgetContainer,
html.dark-mode .summaryView,
html.dark-mode .widget_header,
html.dark-mode .related-tab-content,
html.dark-mode .commentContainer,
html.dark-mode .well,
html.dark-mode .moduleBlock,
html.dark-mode .contentsBackground,
html.dark-mode .fieldBlockContainer,
html.dark-mode .modal-overlay-footer,
html.dark-mode .editViewBody,
html.dark-mode .editViewContents,
html.dark-mode .related-tabs,
html.dark-mode .relatedHeader,
html.dark-mode .modal-body,
html.dark-mode .overlayDetailHeader,
html.dark-mode .detailViewContainer .block,
html.dark-mode .recentActivitiesContainer,
html.dark-mode .essentials-toggle,
html.dark-mode .commentTitle {
	background-color: var(--dm-bg-raised) !important;
	border-color: var(--dm-border) !important;
	color: var(--dm-text) !important;
}

/* Saved-filter list item highlighted as "active", and the quick-preview
 * panel's "Updates" / "Recent Comments" section headers. */
html.dark-mode .listViewFilter.active,
html.dark-mode .quick-preview-modal .title,
html.dark-mode .quickPreviewComments .title,
html.dark-mode .engagementsContainer .title {
	background-color: var(--dm-bg-alt) !important;
	color: var(--dm-text) !important;
}

/* Same saved-filter list item on plain hover (not just .active) - the base
 * skin's `.lists-menu > li:hover { background: #F7F7F7 }` isn't covered by
 * the .active rule above since a non-active item's hover doesn't carry the
 * .active class. */
html.dark-mode .lists-menu > li:hover,
html.dark-mode .listViewFilter:hover {
	background-color: var(--dm-bg-hover) !important;
	color: var(--dm-text) !important;
}

html.dark-mode .panel-heading,
html.dark-mode .widget-header,
html.dark-mode .detailViewTitle,
html.dark-mode .listViewTitle {
	background-color: var(--dm-bg-alt) !important;
	border-color: var(--dm-border) !important;
	color: var(--dm-text) !important;
}

html.dark-mode .panel-footer {
	background-color: var(--dm-bg-alt) !important;
	border-color: var(--dm-border) !important;
}

/* -----------------------------------------------------------------------
 * Tables / list views
 * --------------------------------------------------------------------- */
html.dark-mode table,
html.dark-mode .table,
html.dark-mode .listViewEntries {
	background-color: var(--dm-bg-raised) !important;
	color: var(--dm-text) !important;
}

html.dark-mode .table > thead > tr > th,
html.dark-mode .table > tbody > tr > td,
html.dark-mode .table > tbody > tr > th,
html.dark-mode .listViewEntries th,
html.dark-mode .listViewEntries td {
	border-color: var(--dm-border) !important;
	background-color: transparent !important;
	color: var(--dm-text) !important;
}

/* .table-bordered hardcodes a light grey (#ddd) border on every cell,
 * independent of the .table rules above - stands out sharply against a
 * dark table/panel background, so it needs its own override. */
html.dark-mode .table-bordered > tbody > tr > td,
html.dark-mode .table-bordered > tbody > tr > th,
html.dark-mode .table-bordered > tfoot > tr > td,
html.dark-mode .table-bordered > tfoot > tr > th,
html.dark-mode .table-bordered > thead > tr > td,
html.dark-mode .table-bordered > thead > tr > th,
html.dark-mode .table-bordered {
	border-color: var(--dm-border) !important;
}

/* Wraps every list-view / related-list grid (the "@lightColorBorder" #ddd
 * variable, used throughout the base skin's LESS source, compiles to this
 * everywhere it's referenced - so it shows up as a bright outline around
 * list/related-list tables specifically here). */
html.dark-mode .table-container {
	border-color: var(--dm-border) !important;
}

html.dark-mode .table-striped > tbody > tr:nth-of-type(odd),
html.dark-mode .listViewEntries tr:nth-of-type(odd) {
	background-color: var(--dm-bg-alt) !important;
}

html.dark-mode .table-hover > tbody > tr:hover,
html.dark-mode .listViewEntries tr:hover {
	background-color: var(--dm-bg-hover) !important;
}

/* Field values (list view rows, detail view "Key Fields" summary, etc.) are
 * hard-coded to a dark grey (#222) by the default (light-only) skin, so they
 * need an explicit override here. */
html.dark-mode .value,
html.dark-mode .fieldValue,
html.dark-mode td.listViewEntryValue,
html.dark-mode .quick-create-module,
html.dark-mode .lists-header {
	color: var(--dm-text) !important;
}

/* Reference-field links (".value a", e.g. Assigned To/Member Of) and
 * comment/document author names (.creatorName) are hard-coded to classic
 * link blues (#15c / pure #00f) meant for a white page - low contrast on a
 * dark background, so they're remapped to the same light blue used
 * everywhere else in dark mode. */
html.dark-mode .fieldValue a,
html.dark-mode .value a,
html.dark-mode .creatorName,
html.dark-mode .creatorName a,
html.dark-mode .comment a,
html.dark-mode .commentActionsContainer a,
html.dark-mode .commentAttachmentName a,
html.dark-mode .filePreview a {
	color: var(--dm-link) !important;
}

/* Not every <a> should become "link blue" (var(--dm-link)) just because
 * they inherited that as the generic dark-mode default below - some are
 * UI labels that only happen to be clickable (sortable column headers,
 * tab labels, footer links, tag badges) and were plain neutral text in the
 * light theme (#222/#333), not styled as hyperlinks. Restoring that intent
 * here instead of leaving them link-blue. */
html.dark-mode .listViewContentHeaderValues,
html.dark-mode .nav-tabs > li > a,
html.dark-mode a.badge {
	color: var(--dm-text) !important;
}
html.dark-mode .app-footer a {
	color: var(--dm-text-muted) !important;
}

/* Field labels: the "muted" style is applied to plain <span> elements on
 * some views (e.g. detail view "Details" tab), not just <label> - a bare
 * ".muted" class comes from Bootstrap (#767676-ish) and is too dim against
 * a dark panel background. */
html.dark-mode .fieldLabel,
html.dark-mode .fieldLabel .muted,
html.dark-mode .muted {
	color: var(--dm-text-muted) !important;
}

/* Checkboxes/radios use a custom (appearance:none) box with a border that
 * matches the ordinary panel border color - on a dark panel that reads as
 * "no visible box at all". Lighten the border so the control is findable. */
html.dark-mode input[type="checkbox"],
html.dark-mode input[type="radio"] {
	border-color: var(--dm-text-muted) !important;
	background-color: var(--dm-input-bg) !important;
	position: relative;
}
html.dark-mode input[type="checkbox"]:checked,
html.dark-mode input[type="radio"]:checked {
	background-color: var(--dm-link) !important;
	border-color: var(--dm-link) !important;
	accent-color: var(--dm-link);
}
/* The base skin's checked-state checkmark renders in a dark/black color
 * (fine on a white box, invisible/near-invisible on our now-blue checked
 * box) - appearance:none means the browser draws no native glyph at all,
 * so a checkmark is hand-drawn here to guarantee it's always white,
 * regardless of how (or whether) the base skin renders one. */
html.dark-mode input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
html.dark-mode input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 6px;
	height: 6px;
	background: #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

/* Reference-field "clear selection" (x) button keeps a light grey border
 * on 3 sides from the base skin - swap for the dark-mode border color. */
html.dark-mode .clearReferenceSelection {
	border-color: var(--dm-border) !important;
}

/* -----------------------------------------------------------------------
 * Forms / inputs
 * --------------------------------------------------------------------- */
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .form-control,
html.dark-mode .uneditable-input,
html.dark-mode .select2-container .select2-choice,
html.dark-mode .select2-drop,
html.dark-mode .select2-choices,
html.dark-mode .select2-container-multi .select2-choices,
html.dark-mode .select2-search-choice,
html.dark-mode .chzn-container .chzn-single,
html.dark-mode .chzn-container .chzn-drop,
html.dark-mode .input-group-addon,
html.dark-mode .add-on,
html.dark-mode .inputElement {
	background-color: var(--dm-input-bg) !important;
	color: var(--dm-text) !important;
	border-color: var(--dm-border) !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
	color: var(--dm-text-muted);
}

/* The base skin has an explicit light hover/focus background for form
 * controls (a Bootstrap 2/3 "focus glow" meant for a white page) - it wins
 * over the plain background-color above unless restated here. */
html.dark-mode input:hover,
html.dark-mode input:focus,
html.dark-mode select:hover,
html.dark-mode select:focus,
html.dark-mode textarea:hover,
html.dark-mode textarea:focus,
html.dark-mode .form-control:hover,
html.dark-mode .form-control:focus {
	background-color: var(--dm-input-bg) !important;
	background-image: none !important;
	color: var(--dm-text) !important;
}

html.dark-mode input:disabled,
html.dark-mode select:disabled,
html.dark-mode textarea:disabled,
html.dark-mode .form-control[disabled] {
	background-color: var(--dm-bg-alt) !important;
	color: var(--dm-text-muted) !important;
}

html.dark-mode label,
html.dark-mode .control-label {
	color: var(--dm-text) !important;
}

/* -----------------------------------------------------------------------
 * Buttons
 * --------------------------------------------------------------------- */
html.dark-mode .btn-default,
html.dark-mode .btn-white,
html.dark-mode .btn-link {
	background-color: var(--dm-bg-raised) !important;
	color: var(--dm-text) !important;
	border-color: var(--dm-border) !important;
}

html.dark-mode .btn-default:hover,
html.dark-mode .btn-white:hover {
	background-color: var(--dm-bg-hover) !important;
}

/* -----------------------------------------------------------------------
 * Dropdowns / menus / popovers / tooltips
 * --------------------------------------------------------------------- */
html.dark-mode .dropdown-menu,
html.dark-mode .select2-results,
html.dark-mode .chzn-results,
html.dark-mode .popover,
html.dark-mode .qtip-bootstrap {
	background-color: var(--dm-bg-raised) !important;
	border-color: var(--dm-border) !important;
	color: var(--dm-text) !important;
	box-shadow: 0 2px 10px var(--dm-shadow) !important;
}

/* Plain descendant selector - NOT "li > a". Verified via direct CSS-rule
 * matching (el.matches(...)) that in real dropdowns here the <a> is often
 * NOT a direct child of <li>: Quick Create nests it inside
 * .quickCreateItem > .row > .col-lg-12 grid divs, and the related-tabs
 * "More" list nests it inside an mCustomScrollbar wrapper. A "li > a"
 * selector silently fails to match either, so it must never be used here -
 * every dropdown-menu rule below matches on ".dropdown-menu a" alone. */
html.dark-mode .dropdown-menu a,
html.dark-mode .dropdown-menu .more-tab,
html.dark-mode .select2-results .select2-result-label {
	color: var(--dm-text) !important;
}

html.dark-mode .dropdown-menu a:hover,
html.dark-mode .dropdown-menu a:focus,
html.dark-mode .select2-results .select2-highlighted {
	background-color: var(--dm-bg-hover) !important;
	background-image: none !important;
	color: var(--dm-text) !important;
}

html.dark-mode .dropdown-menu .divider {
	background-color: var(--dm-border) !important;
}

/* Some dropdown menus (e.g. the related-tabs "More" overflow list) wrap
 * their items in an mCustomScrollbar container - make sure every wrapper
 * layer along the way stays transparent instead of opaque. */
html.dark-mode .dropdown-menu .mCustomScrollBox,
html.dark-mode .dropdown-menu .mCSB_container,
html.dark-mode .dropdown-menu .mCSB_scrollTools {
	background-color: transparent !important;
	background-image: none !important;
}

/* -----------------------------------------------------------------------
 * Modals
 * --------------------------------------------------------------------- */
html.dark-mode .modal-content {
	background-color: var(--dm-bg-raised) !important;
	color: var(--dm-text) !important;
	border-color: var(--dm-border) !important;
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer {
	background-color: var(--dm-bg-alt) !important;
	border-color: var(--dm-border) !important;
}

html.dark-mode .modal-backdrop {
	background-color: #000;
}

/* -----------------------------------------------------------------------
 * Tabs (Summary/Details/Updates tab bar, related-list tabs, dashboard tabs)
 * --------------------------------------------------------------------- */
/* Generic Bootstrap rule - `.nav > li > a:hover/:focus { background: white }`
 * - applies to every tab everywhere (it's how ".tab-item" hover gets a
 * bright background). Combined with our tab text already being light
 * (var(--dm-text), see the anchor-color section above), that's a
 * light-on-light combo that's nearly unreadable. */
html.dark-mode .nav > li > a:hover,
html.dark-mode .nav > li > a:focus,
html.dark-mode .nav .open > a,
html.dark-mode .nav .open > a:hover,
html.dark-mode .nav .open > a:focus {
	background-color: var(--dm-bg-hover) !important;
	color: var(--dm-text) !important;
}

/* Active tab keeps an explicit `background-color: #fff` from the base
 * skin regardless of the rule above (higher specificity). */
html.dark-mode .nav-tabs > li.active > a,
html.dark-mode .nav-tabs > li.active > a:hover,
html.dark-mode .nav-tabs > li.active > a:focus {
	background-color: var(--dm-bg-hover) !important;
	color: var(--dm-text) !important;
}

/* The active/hovered related-list tab's underline (@relatedtabsborderbottomcolor,
 * #555 in the base skin) is a little too dim against our dark panel -
 * brightened slightly so the active tab is clearly identifiable. */
html.dark-mode .related-tabs .nav-tabs > li.active,
html.dark-mode .related-tabs .nav-tabs > li:hover,
html.dark-mode .related-tabs .nav-tabs > li.active:focus,
html.dark-mode .dashBoardContainer .nav-tabs > li.active,
html.dark-mode .dashBoardContainer .nav-tabs > li:hover {
	border-bottom-color: var(--dm-link) !important;
}

/* -----------------------------------------------------------------------
 * Misc "@white" / "@lightColorBorder" patches found across the base skin
 * (those LESS variables compile to literal #fff / #ddd wherever used, so
 * grep for the hex values alone misses all of these).
 * --------------------------------------------------------------------- */
html.dark-mode .editViewContainer .block,
html.dark-mode .detailViewContainer .commentContainer .showcomments,
html.dark-mode .moduleResults-container .moduleSearchResults .table-container,
html.dark-mode .relatedTabModulesList .addButton,
html.dark-mode .extensionWidgetContainer,
html.dark-mode .whiteContainer,
html.dark-mode #reportDetails .table-bordered,
html.dark-mode .selectedReport,
html.dark-mode .pickListValue,
html.dark-mode .bgColor {
	background-color: var(--dm-bg-raised) !important;
	border-color: var(--dm-border) !important;
	color: var(--dm-text) !important;
}

/* Picklist Field Values editor: the "<Field> Values" table header row
 * (.listViewHeaders.bgColor) - near-invisible ghost text on its own
 * #ddd background before this fix. */
html.dark-mode .listViewHeaders {
	background-color: var(--dm-bg-alt) !important;
	color: var(--dm-text) !important;
}

/* Global search suggestion / autocomplete dropdown (typing in the top
 * search bar, or a reference-field lookup). */
html.dark-mode .search-list {
	background-color: var(--dm-bg-raised) !important;
	border-color: var(--dm-border) !important;
}

html.dark-mode .fc-overlay-modal,
html.dark-mode .dahBoardTabContainer {
	border-color: var(--dm-border) !important;
}

/* -----------------------------------------------------------------------
 * jQuery UI widgets (time picker, reference-field "type to search"
 * autocomplete) - these use their own ui-* class namespace, entirely
 * separate from the Bootstrap/select2/chosen widgets already covered
 * above, and default to a plain white jQuery UI theme.
 * --------------------------------------------------------------------- */
html.dark-mode .ui-timepicker-wrapper,
html.dark-mode .ui-widget-content,
html.dark-mode .ui-autocomplete {
	background-color: var(--dm-bg-raised) !important;
	border-color: var(--dm-border) !important;
	color: var(--dm-text) !important;
}
html.dark-mode .ui-timepicker-list li,
html.dark-mode .ui-menu-item,
html.dark-mode .ui-menu-item-wrapper {
	color: var(--dm-text) !important;
}
html.dark-mode .ui-timepicker-list li:hover,
html.dark-mode .ui-menu-item-wrapper.ui-state-active,
html.dark-mode .ui-menu-item-wrapper:hover {
	background-color: var(--dm-bg-hover) !important;
	color: var(--dm-text) !important;
	border-color: transparent !important;
}

/* Detail-view "Updates" timeline: the changed-field from/to values render
 * in plain black text with no class to hook, unlike the rest of the
 * timeline row which already inherits the (correct) light text color. */
html.dark-mode .updates_timeline .update-from,
html.dark-mode .updates_timeline .update-to {
	color: var(--dm-text) !important;
}

/* Settings > Configuration > Taxes: table header row hardcodes a light
 * grey background (#F5F5F5), independent of the .table-bordered fix. */
html.dark-mode #TaxCalculationsContainer .table tr:first-child,
html.dark-mode .taxModalContainer #editTax .table tr:first-child {
	background-color: var(--dm-bg-alt) !important;
	border-color: var(--dm-border) !important;
}

/* Layout Editor: each field block has `style="background: white;"` as an
 * inline attribute directly in the template - only !important CSS can
 * override an inline style. */
html.dark-mode .editFieldsTable {
	background-color: var(--dm-bg-raised) !important;
	border-color: var(--dm-border) !important;
}

/* Settings left sidebar accordion (.settingsgroup, e.g. USER MANAGEMENT/
 * MODULE MANAGEMENT/...): its background is @settingsAccordionPanel, an
 * alias for the same navy @moduleNav used by the app menu - untouched by
 * dark mode until now. */
html.dark-mode .settingsgroup,
html.dark-mode .settingsgroup .panel-collapse,
html.dark-mode .settingsgroup .panel-group .panel {
	background-color: var(--dm-bg-alt) !important;
}

/* Top-left hamburger mega-menu (#app-menu): app category rows expand into
 * a submenu list (Tickets/FAQ/...); the <a> inside each <li> doesn't
 * stretch to the <li>'s full width, so the hover background (applied to
 * the <a>) leaves an unstyled sliver on the right showing a different
 * color underneath - reads as "hover has padding with a different color". */
html.dark-mode .app-modules-dropdown li > a {
	display: block;
	width: 100%;
}


/* RDS West */
.dark-mode .floatThead-table .searchRow { background:unset!important;}
.dark-mode .media[style="background-color: #8bf0b4"] {background-color:#426e54!important;}
.dark-mode .media[style="background-color: #ffb700"] {background-color:#937016!important;}
.dark-mode .relatedListContainerItem {background:unset!important;}
.dark-mode .showSearchTool { color:white!important; }
.dark-mode .editViewContents .fieldBlockContainer .input-group input { border-color: var(--dm-border) !important; }
.dark-mode .editViewContents .fieldBlockContainer .input-group .input-group-addon { border-color: var(--dm-border) !important; }
.dark-mode .ticket_title.value_fieldmultireference { color: var(--dm-text) !important;}
.dark-mode .createdtime.value_fieldmultireference { color: var(--dm-text) !important;}
.dark-mode .modifiedtime.value_fieldmultireference { color: var(--dm-text) !important;}
.dark-mode  .fieldBlockHeader {     color: var(--dm-text) !important;}
.dark-mode a[style="color:blue"] {color: var(--dm-link)!important; }
.dark-mode  .lists-menu-container .toggleFilterSize {color: var(--dm-link)!important; }
.dark-mode  .col-lg-9.other-container  {color: var(--dm-link)!important; }
.dark-mode .col-lg-9.other-container,
.dark-mode .col-lg-3.essentials-container {color: var(--dm-link)!important; background:unset!important;}
.dark-mode .update_icon { background:unset!important;}
.dark-mode .updates_timeline > li .update_info > .updateInfoContainer em {color: var(--dm-text) !important;}
.dark-mode button.close[data-dismiss="modal"][title="Close"],
.dark-mode button.close[data-dismiss="modal"][aria-label="Close"] { color:white!important; }

.dark-mode #searchResults-container,
.dark-mode .main-container.clearfix .clearfix.main-content,
.dark-mode .main-container.clearfix .clearfix.main-content .left-content-module-list,
.dark-mode .module-search-result,
.dark-mode .result-header {background:unset!important;border-color: var(--dm-border) !important; }
/* -----------------------------------------------------------------------
 * Misc chrome
 * --------------------------------------------------------------------- */
html.dark-mode .app-footer {
	background-color: var(--dm-bg-alt) !important;
	color: var(--dm-text-muted) !important;
	border-color: var(--dm-border) !important;
}
html.dark-mode .app-footer p {
	background-color: transparent !important;
}


/* Dark-mode toggle button in the top bar */
html.dark-mode #darkModeToggle .fa-moon-o {
	display: none;
}
html.dark-mode #darkModeToggle .fa-sun-o {
	display: inline-block;
}
#darkModeToggle .fa-sun-o {
	display: none;
}
#darkModeToggle .fa-moon-o {
	display: inline-block;
}
#darkModeToggle {
	cursor: pointer;
	display: inline-block;
}