/* ==========================================================================
   DARK MODE - Lawesome Application
   ==========================================================================
   All rules are scoped under body.dark-mode so they only activate when
   the user has toggled dark mode on. This file is loaded as a standard
   CSS override, following the same pattern as ace-skins.css.

   Color Palette:
   - Background (page):    #1a1d21
   - Surface (content):    #23272b
   - Surface elevated:     #2a2e33
   - Sidebar:              #1e2226
   - Navbar:               #1a2332
   - Page header:          #2d4a37
   - Text primary:         #e0e0e0
   - Text secondary:       #9da5ae
   - Borders:              #3a3f44
   - Input bg:             #2a2e33
   - Input border:         #4a4f55
   - Link color:           #6ea8d9
   - Accent blue:          #3a7cc0
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL — Body, text, links
   -------------------------------------------------------------------------- */
body.dark-mode {
  background-color: #1a1d21 !important;
  color: #e0e0e0 !important;
}

body.dark-mode a {
  color: #6ea8d9;
}

body.dark-mode a:hover,
body.dark-mode a:focus {
  color: #8ec2ee;
}

body.dark-mode .main-container:before {
  background-color: #23272b;
}

body.dark-mode hr,
body.dark-mode .hr {
  border-top-color: #3a3f44;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #e0e0e0;
}

body.dark-mode .dark {
  color: #e0e0e0 !important;
}

body.dark-mode .grey {
  color: #9da5ae !important;
}

body.dark-mode .light-grey {
  color: #7a8290 !important;
}

/* --------------------------------------------------------------------------
   2. NAVBAR — Top navigation bar
   -------------------------------------------------------------------------- */
body.dark-mode .navbar {
  background: #1a2332 !important;
}

body.dark-mode .ace-nav>li {
  border-left-color: #2a3a4e;
}

body.dark-mode .ace-nav>li>a {
  background-color: #1e2d40 !important;
}

body.dark-mode .ace-nav>li>a:hover,
body.dark-mode .ace-nav>li>a:focus {
  background-color: #253a52 !important;
}

body.dark-mode .ace-nav>li.light-blue>a {
  background-color: #1e2d40 !important;
}

body.dark-mode .ace-nav>li.red>a {
  background-color: #6b2a2a !important;
}

body.dark-mode .navbar .navbar-brand {
  color: #e0e0e0;
}

body.dark-mode .navbar-container {
  background: #1a2332;
}

body.dark-mode #user-search .nav-search-input {
  background-color: #2a3a4e !important;
  color: #e0e0e0 !important;
  border-color: #3a4f66 !important;
}

/* User dropdown */
body.dark-mode .user-menu.dropdown-menu {
  background-color: #2a2e33;
  border-color: #3a3f44;
}

body.dark-mode .user-menu.dropdown-menu>li>a {
  color: #e0e0e0;
}

body.dark-mode .user-menu.dropdown-menu>li>a:hover {
  background-color: #353a40;
  color: #ffffff;
}

body.dark-mode .user-menu .divider {
  background-color: #3a3f44;
}

body.dark-mode .user-info {
  color: #e0e0e0 !important;
}

body.dark-mode .user-info small {
  color: #9da5ae !important;
}

/* Office selector dropdown */
body.dark-mode .ace-nav>li.office-select {
  border-color: #2a3a4e !important;
}

body.dark-mode .ace-nav>li.office-select.open {
  border-color: #3a3f44 !important;
}

body.dark-mode .branch-select.dropdown-navbar.dropdown-menu {
  background-color: #2a2e33 !important;
  border-color: #3a3f44 !important;
}

body.dark-mode .branch-select.dropdown-navbar .branch-selector select.form-control {
  border-color: #4a4f55 !important;
}

/* Calendar icon in navbar */
body.dark-mode .ace-nav>li>a>.fa-calendar {
  color: #e0e0e0 !important;
}

/* --------------------------------------------------------------------------
   3. SIDEBAR — Left navigation
   -------------------------------------------------------------------------- */
body.dark-mode .sidebar {
  background-color: #1e2226 !important;
  border-right-color: #2a2e33 !important;
}

body.dark-mode .nav-list>li {
  border-color: #2e3338;
}

body.dark-mode .nav-list>li>a {
  background-color: #1e2226 !important;
  color: #b8c0c8 !important;
}

body.dark-mode .nav-list>li>a>.menu-icon {
  color: #8a9aaa;
}

body.dark-mode .nav-list>li:hover>a {
  background-color: #2c3e50 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .nav-list>li:hover>a>.menu-icon {
  color: #e0e0e0;
}

body.dark-mode .nav-list>li.open>a {
  background-color: #243342 !important;
  color: #6ea8d9 !important;
}

body.dark-mode .nav-list>li.active>a,
body.dark-mode .nav-list>li.active:hover>a {
  background-color: #162535 !important;
  color: #6ea8d9 !important;
}

body.dark-mode .nav-list>li.active:before {
  background-color: #3a7cc0;
}

body.dark-mode .nav-list>li:hover:before {
  background-color: #4a8cd0;
}

body.dark-mode .nav-list li.active>a:after {
  border-right-color: #23272b;
}

/* Submenu */
body.dark-mode .nav-list>li>.submenu {
  background-color: #252a2f !important;
}

body.dark-mode .nav-list>li.active>.submenu {
  background-color: #1a2029 !important;
}

body.dark-mode .nav-list>li .submenu>li>a {
  border-top-color: #2e3338;
  color: #b8c0c8 !important;
  background-color: transparent !important;
}

body.dark-mode .nav-list>li .submenu>li>a:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #e0e0e0 !important;
}

body.dark-mode .nav-list>li .submenu>li.active>a {
  color: #6ea8d9 !important;
  font-weight: bold;
}

body.dark-mode .nav-list>li>.submenu:before,
body.dark-mode .nav-list>li>.submenu>li:before {
  border-color: #3a3f44;
}

/* Nested (3rd-level) submenus — e.g. Reports > Admin Reports */
body.dark-mode .nav-list>li>.submenu li>.submenu {
  background-color: #1f2328 !important;
}

body.dark-mode .nav-list>li>.submenu li>.submenu>li>a {
  border-top-color: #2e3338;
  color: #b8c0c8 !important;
  background-color: transparent !important;
}

body.dark-mode .nav-list>li>.submenu li>.submenu>li>a:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #e0e0e0 !important;
}

body.dark-mode .nav-list>li>.submenu li>.submenu>li.active>a {
  color: #6ea8d9 !important;
}

body.dark-mode .nav-list>li>.submenu li>.submenu:before,
body.dark-mode .nav-list>li>.submenu li>.submenu>li:before {
  border-color: #3a3f44;
}

/* Sidebar shortcuts */
body.dark-mode .sidebar-shortcuts {
  background-color: #1e2226 !important;
  border-color: #2e3338 !important;
}

body.dark-mode .sidebar-shortcuts-mini {
  background-color: #1e2226 !important;
}

/* Sidebar toggle/collapse */
body.dark-mode .sidebar-toggle {
  background-color: #171a1e !important;
  border-color: #2e3338 !important;
}

body.dark-mode .sidebar-toggle>.ace-icon {
  background-color: #1e2226 !important;
  color: #9da5ae !important;
  border-color: #4a4f55 !important;
}

/* Nav header */
body.dark-mode .nav-header {
  background-color: #1e2226 !important;
  border-bottom-color: #2e3338 !important;
  color: #9da5ae !important;
}

/* --------------------------------------------------------------------------
   4. BREADCRUMBS
   -------------------------------------------------------------------------- */
body.dark-mode .breadcrumbs {
  background-color: #23272b !important;
  border-bottom-color: #3a3f44 !important;
}

body.dark-mode .breadcrumb>li+li:before {
  color: #9da5ae;
}

body.dark-mode .breadcrumb a,
body.dark-mode .breadcrumb li {
  color: #9da5ae;
}

body.dark-mode #nav-search .nav-search-input,
body.dark-mode #nav-quick-nav .nav-search-input {
  background-color: #2a2e33 !important;
  color: #e0e0e0 !important;
  border-color: #4a4f55 !important;
}

body.dark-mode .nav-search-icon {
  color: #9da5ae !important;
}

/* --------------------------------------------------------------------------
   5. PAGE CONTENT — Headers, main content area
   -------------------------------------------------------------------------- */
body.dark-mode .page-content {
  background-color: #23272b !important;
}

body.dark-mode .page-header {
  border-bottom-color: #3a3f44;
}

body.dark-mode .page-header h1 {
  color: #e0e0e0;
}

body.dark-mode .page-header h1 small {
  color: #9da5ae;
}

/* Content wrapper (Orkestra layout) */
body.dark-mode .content-wrapper .content-inner {
  border-color: #2d4a37;
}

body.dark-mode .content-wrapper .page-header {
  background-color: #2d4a37;
  border-bottom-color: #234232;
}

body.dark-mode .content-wrapper .main-content {
  background-color: #23272b !important;
}

body.dark-mode .content-wrapper .main-content.main-content-grey-gradient {
  background-color: #23272b !important;
}

body.dark-mode .content-wrapper .main-content .main-content-inner {
  background: #2a2e33 !important;
  border-color: #3a3f44;
}

/* Section titles */
body.dark-mode .section-title,
body.dark-mode .section-sub-title {
  border-bottom-color: #3a3f44;
  color: #e0e0e0;
}

body.dark-mode .form-title {
  border-bottom-color: #3a3f44;
  color: #e0e0e0;
}

body.dark-mode .form-title i {
  color: #9da5ae;
}

/* --------------------------------------------------------------------------
   6. TABLES & DATATABLES
   -------------------------------------------------------------------------- */
body.dark-mode .table {
  color: #e0e0e0;
  background-color: #23272b !important;
}

body.dark-mode .table>thead>tr>th,
body.dark-mode .table>thead>tr>td {
  background-color: #2a2e33 !important;
  border-bottom-color: #3a3f44 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .table>tbody>tr>td,
body.dark-mode .table>tbody>tr>th {
  border-top-color: #3a3f44;
  background-color: inherit;
}

body.dark-mode .table>tbody>tr {
  background-color: #23272b !important;
}

body.dark-mode .table>tfoot>tr>td {
  border-top-color: #3a3f44;
}

body.dark-mode .table-bordered {
  border-color: #3a3f44;
}

body.dark-mode .table-bordered>thead>tr>th,
body.dark-mode .table-bordered>thead>tr>td,
body.dark-mode .table-bordered>tbody>tr>th,
body.dark-mode .table-bordered>tbody>tr>td {
  border-color: #3a3f44;
}

body.dark-mode .table-striped>tbody>tr:nth-of-type(odd) {
  background-color: #252930 !important;
}

body.dark-mode .table-striped>tbody>tr:nth-of-type(even) {
  background-color: #23272b !important;
}

body.dark-mode .table-hover>tbody>tr:hover {
  background-color: #2f3540 !important;
}

body.dark-mode .table>tbody>tr.clickable {
  background-color: #2f3540;
}

/* ---- DataTables sorting headers ----
   CRITICAL: datatables.bootstrap.css uses: background: #fff url(sort_*.png)
   which sets BOTH background-color and background-image in one shorthand.
   We must override both and use !important. */
body.dark-mode .dataTable th.sorting,
body.dark-mode table.table thead .sorting {
  background: #2a2e33 !important;
  background-image: none !important;
  color: #e0e0e0 !important;
}

body.dark-mode .dataTable th.sorting_desc,
body.dark-mode .dataTable th.sorting_asc,
body.dark-mode table.table thead .sorting_asc,
body.dark-mode table.table thead .sorting_desc {
  background: #323840 !important;
  background-image: none !important;
  filter: none !important;
  color: #6ea8d9 !important;
}

body.dark-mode table.table thead .sorting_asc_disabled,
body.dark-mode table.table thead .sorting_desc_disabled {
  background: #2a2e33 !important;
  background-image: none !important;
}

body.dark-mode .dataTable th[class*=sort]:after {
  color: #9da5ae !important;
}

body.dark-mode .dataTable>thead>tr>th.sorting_desc:after,
body.dark-mode .dataTable>thead>tr>th.sorting_asc:after {
  color: #6ea8d9 !important;
}

body.dark-mode .dataTable>thead>tr>th[class*=sort]:hover {
  color: #6ea8d9 !important;
}

body.dark-mode .dataTable>thead>tr>th[class*=sorting_] {
  color: #6ea8d9 !important;
}

/* ---- DataTables control rows (Show X / Search, Showing X / Pagination) ----
   ace.css uses background-color: #EFF3F8 on .row:first-child and .row:last-child */
body.dark-mode .dataTables_wrapper .row:first-child {
  background-color: #252930 !important;
  border-top-color: #3a3f44 !important;
  border-left-color: #3a3f44 !important;
  border-right-color: #3a3f44 !important;
}

body.dark-mode .dataTables_wrapper .row:last-child {
  background-color: #252930 !important;
  border-bottom-color: #3a3f44 !important;
  border-left-color: #3a3f44 !important;
  border-right-color: #3a3f44 !important;
}

body.dark-mode .dataTables_wrapper .row:first-child+.dataTable {
  border-top-color: #3a3f44 !important;
  border-bottom-color: #3a3f44 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_scroll+.row {
  border-top-color: #3a3f44 !important;
}

/* ---- DataTables controls text and inputs ---- */
body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_info {
  color: #9da5ae !important;
}

body.dark-mode .dataTables_wrapper label {
  color: #9da5ae !important;
}

body.dark-mode .dataTables_wrapper .dataTables_length select,
body.dark-mode .dataTables_wrapper .dataTables_filter input,
body.dark-mode .dataTables_wrapper input[type=text],
body.dark-mode .dataTables_wrapper input[type=search],
body.dark-mode .dataTables_wrapper select {
  background-color: #2a2e33 !important;
  color: #e0e0e0 !important;
  border-color: #4a4f55 !important;
}

/* ---- DataTables pagination ---- */
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #9da5ae !important;
  background-color: #2a2e33 !important;
  border-color: #3a3f44 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: #353a40 !important;
  color: #e0e0e0 !important;
  border-color: #4a4f55 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background-color: #3a7cc0 !important;
  color: #ffffff !important;
  border-color: #3a7cc0 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: #555 !important;
  background-color: #1e2226 !important;
  border-color: #3a3f44 !important;
}

body.dark-mode td.row-details {
  background-color: #252930 !important;
  border-color: #3a3f44 !important;
}

/* ---- DataTables scroll wrappers ---- */
body.dark-mode .dataTables_borderWrap .dataTables_scrollBody,
body.dark-mode .dataTables_borderWrap .dataTables_scrollHead {
  border-color: #3a3f44 !important;
}

body.dark-mode div.dataTables_scrollHead table {
  border-bottom-color: #3a3f44 !important;
}

/* ---- The table itself (dataTable class) ---- */
body.dark-mode table.dataTable {
  background-color: #23272b !important;
}

body.dark-mode table.dataTable tbody tr {
  background-color: #23272b !important;
}

body.dark-mode table.dataTable.table-striped tbody tr:nth-of-type(odd),
body.dark-mode table.dataTable.stripe tbody tr.odd {
  background-color: #252930 !important;
}

body.dark-mode table.dataTable.table-striped tbody tr:nth-of-type(even),
body.dark-mode table.dataTable.stripe tbody tr.even {
  background-color: #23272b !important;
}

body.dark-mode table.dataTable.table-hover tbody tr:hover,
body.dark-mode table.dataTable.hover tbody tr:hover {
  background-color: #2f3540 !important;
}

/* Pagination (Bootstrap) */
body.dark-mode .pagination>li>a {
  background-color: #2a2e33;
  border-color: #3a3f44;
  color: #6ea8d9;
}

body.dark-mode .pagination>li>a:hover {
  background-color: #353a40;
  border-color: #4a4f55;
  color: #8ec2ee;
}

body.dark-mode .pagination>li.active>a,
body.dark-mode .pagination>li.active>a:hover {
  background-color: #3a7cc0;
  border-color: #3a7cc0;
  color: #ffffff;
}

body.dark-mode .pagination>li.disabled>a,
body.dark-mode .pagination>li.disabled>a:hover {
  background-color: #1e2226;
  border-color: #3a3f44;
  color: #555;
}

/* --------------------------------------------------------------------------
   7. FORMS — Inputs, selects, textareas
   -------------------------------------------------------------------------- */
body.dark-mode .form-control {
  background-color: #2a2e33;
  border-color: #4a4f55;
  color: #e0e0e0;
}

body.dark-mode .form-control:focus {
  border-color: #3a7cc0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3), 0 0 6px rgba(58, 124, 192, .3);
}

body.dark-mode .form-control[disabled],
body.dark-mode .form-control[readonly],
body.dark-mode fieldset[disabled] .form-control {
  background-color: #22262a !important;
  color: #777 !important;
}

body.dark-mode .input-group-addon {
  background-color: #353a40;
  border-color: #4a4f55;
  color: #9da5ae;
}

body.dark-mode label,
body.dark-mode .control-label {
  color: #c8cdd2;
}

body.dark-mode .help-block {
  color: #9da5ae;
}

body.dark-mode .form-group.error label {
  color: #e07070;
}

body.dark-mode .form-group.error .form-control {
  border-color: #c04e3e;
  color: #e07070;
}

/* Checkbox and radio */
body.dark-mode .checkbox label,
body.dark-mode .radio label {
  color: #c8cdd2;
}

/* Form actions bar (ace.css sets #F5F5F5) */
body.dark-mode .form-actions {
  background-color: #2a2e33 !important;
  border-top-color: #3a3f44 !important;
}

/* Catch-all for text inputs that don't have .form-control class */
body.dark-mode input[type="text"],
body.dark-mode input[type="search"],
body.dark-mode input[type="email"],
body.dark-mode input[type="url"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="number"],
body.dark-mode input[type="password"],
body.dark-mode textarea {
  background-color: #2a2e33;
  border-color: #4a4f55;
  color: #e0e0e0;
}

/* --------------------------------------------------------------------------
   8. MODALS
   -------------------------------------------------------------------------- */
/* The .modal wrapper itself can have a white bg that bleeds through gaps */
body.dark-mode .modal {
  background-color: transparent !important;
}

body.dark-mode .modal-dialog {
  background-color: transparent !important;
}

body.dark-mode .modal-content {
  background-color: #2a2e33 !important;
  border-color: #3a3f44 !important;
}

body.dark-mode .modal .modal-header {
  background-color: #2d4a37;
  border-bottom-color: #234232;
}

body.dark-mode .modal .modal-body {
  background-color: #2a2e33;
  border-bottom-color: #3a3f44;
  color: #e0e0e0;
}

body.dark-mode .modal .modal-footer {
  background-color: #2a2e33;
  border-top-color: transparent;
  margin-top: 0 !important;
}

body.dark-mode .modal .close {
  color: #e0e0e0;
  text-shadow: none;
  opacity: 0.6;
}

body.dark-mode .modal .close:hover {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   8a. CKEDITOR / WYSIWYG EDITOR
   --------------------------------------------------------------------------
   CKEditor injects its own styles. Override all light surfaces.
   The content area is an iframe — override via .cke_editable.
   -------------------------------------------------------------------------- */

/* Overall CKEditor chrome */
body.dark-mode .cke_chrome {
  border-color: #3a3f44 !important;
}

body.dark-mode .cke_inner {
  background-color: #2a2e33 !important;
}

/* Toolbar area */
body.dark-mode .cke_top {
  background-color: #2a2e33 !important;
  background-image: none !important;
  border-bottom-color: #3a3f44 !important;
}

/* Status bar */
body.dark-mode .cke_bottom {
  background-color: #252930 !important;
  background-image: none !important;
  border-top-color: #3a3f44 !important;
}

/* Content area wrapper */
body.dark-mode .cke_contents {
  background-color: #1e2126 !important;
}

/* Toolbar buttons (off state) */
body.dark-mode .cke_button_off {
  background-color: transparent !important;
  color: #c8cdd2 !important;
}

body.dark-mode .cke_button_off:hover,
body.dark-mode .cke_button_off:focus,
body.dark-mode .cke_button_off:active {
  background-color: #3a3f44 !important;
}

/* Toolbar buttons (on/active state) */
body.dark-mode .cke_button_on {
  background-color: #3a3f44 !important;
  box-shadow: none !important;
}

/* Button icons — invert for visibility */
body.dark-mode .cke_button_icon {
  filter: invert(0.85) !important;
}

/* Button labels/text */
body.dark-mode .cke_button__source_label {
  color: #c8cdd2 !important;
}

/* Combo buttons (Styles, Format, Font, Size dropdowns) */
body.dark-mode .cke_combo_button {
  background-color: #2a2e33 !important;
  background-image: none !important;
  border-color: #3a3f44 !important;
}

body.dark-mode .cke_combo_button:hover,
body.dark-mode .cke_combo_button:focus {
  background-color: #3a3f44 !important;
}

body.dark-mode .cke_combo_text {
  color: #c8cdd2 !important;
}

body.dark-mode .cke_combo_open {
  border-left-color: #3a3f44 !important;
}

body.dark-mode .cke_combo_arrow {
  border-top-color: #8a8f95 !important;
}

/* Toolbar separator */
body.dark-mode .cke_toolbar_separator {
  background-color: #3a3f44 !important;
}

/* Toolbar break */
body.dark-mode .cke_toolbar_break {
  background-color: #2a2e33 !important;
}

/* Path area in status bar */
body.dark-mode .cke_path_item {
  color: #8a8f95 !important;
}

body.dark-mode .cke_path_item:hover {
  color: #e0e0e0 !important;
  background-color: #3a3f44 !important;
}

/* Resize grip */
body.dark-mode .cke_resizer {
  border-color: transparent #6a6f75 transparent transparent !important;
}

/* Dropdown panels/menus */
body.dark-mode .cke_panel {
  background-color: #2a2e33 !important;
  border-color: #3a3f44 !important;
}

body.dark-mode .cke_panel_frame {
  background-color: #2a2e33 !important;
}

body.dark-mode .cke_panel_block {
  background-color: #2a2e33 !important;
}

body.dark-mode .cke_panel_listItem a {
  color: #e0e0e0 !important;
}

body.dark-mode .cke_panel_listItem a:hover {
  background-color: #3a3f44 !important;
}

/* Dialog windows */
body.dark-mode .cke_dialog_body {
  background-color: #2a2e33 !important;
  border-color: #3a3f44 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .cke_dialog_title {
  background-color: #2d4a37 !important;
  border-bottom-color: #234232 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .cke_dialog_footer {
  background-color: #252930 !important;
  border-top-color: #3a3f44 !important;
}

body.dark-mode .cke_dialog_tab {
  background-color: #2a2e33 !important;
  border-color: #3a3f44 !important;
  color: #c8cdd2 !important;
}

body.dark-mode .cke_dialog_tab_selected {
  background-color: #23272b !important;
  border-bottom-color: #23272b !important;
  color: #e0e0e0 !important;
}

body.dark-mode .cke_dialog_contents {
  background-color: #23272b !important;
  border-top-color: #3a3f44 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .cke_dialog input,
body.dark-mode .cke_dialog select,
body.dark-mode .cke_dialog textarea {
  background-color: #1e2126 !important;
  border-color: #3a3f44 !important;
  color: #e0e0e0 !important;
}

/* Ace Admin built-in wysiwyg-editor overrides */
body.dark-mode .wysiwyg-editor {
  background-color: #1e2126 !important;
  border-color: #3a3f44 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .wysiwyg-editor:focus {
  background-color: #23272b !important;
}

body.dark-mode .wysiwyg-toolbar {
  background-color: #2a2e33 !important;
}

body.dark-mode .wysiwyg-toolbar .btn-group>.btn {
  background-color: transparent !important;
  border-color: #3a3f44 !important;
  color: #c8cdd2 !important;
}

body.dark-mode .wysiwyg-toolbar .btn-group>.btn:hover,
body.dark-mode .wysiwyg-toolbar .btn-group>.btn.active {
  background-color: #3a3f44 !important;
  color: #e0e0e0 !important;
}

/* --------------------------------------------------------------------------
   9. WIDGETS
   -------------------------------------------------------------------------- */
body.dark-mode .widget .widget-content {
  background-color: #2a2e33;
  border-color: #3a3f44;
}

body.dark-mode .widget .widget-content.glossed {
  background-color: #2a2e33;
}

body.dark-mode .widget .widget-content-blue-wrapper {
  background-color: #1e2d3d;
  border-color: #3a5570;
}

body.dark-mode .widget .widget-content-blue-wrapper .widget-content-blue-inner {
  background-color: #23303f;
  border-color: #3a5570;
}

body.dark-mode .widget .widget-content-embossed {
  background-color: #2a2e33;
}

body.dark-mode .widget .widget-controls a {
  color: #9da5ae;
}

body.dark-mode .widget .widget-controls a:hover {
  color: #e0e0e0;
}

body.dark-mode .shadowed-bottom {
  background-color: #252930;
  border-bottom-color: #3a3f44;
}

/* --------------------------------------------------------------------------
   10. BUTTONS — Complete dark mode color scheme
   --------------------------------------------------------------------------
   All 14 Ace Admin button classes with resting, hover, and disabled states.
   Colors desaturated 15-25% and darkened to 35-55% lightness band (HSL)
   for proper contrast on dark surfaces. All text passes WCAG AA 4.5:1.
   -------------------------------------------------------------------------- */

/* ---- btn-default / .btn (neutral slate) ---- */
body.dark-mode .btn,
body.dark-mode .btn-default,
body.dark-mode .btn:focus,
body.dark-mode .btn-default:focus {
  background-color: #4a5562 !important;
  border-color: #5a6572 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .btn:hover,
body.dark-mode .btn-default:hover,
body.dark-mode .btn:active,
body.dark-mode .btn-default:active,
body.dark-mode .open .btn.dropdown-toggle,
body.dark-mode .open .btn-default.dropdown-toggle {
  background-color: #3d4852 !important;
  border-color: #5a6572 !important;
}

body.dark-mode .btn.active,
body.dark-mode .btn-default.active {
  background-color: #3d4852 !important;
  border-color: #4a5562 !important;
}

body.dark-mode .btn.disabled,
body.dark-mode .btn-default.disabled,
body.dark-mode .btn[disabled],
body.dark-mode .btn-default[disabled],
body.dark-mode fieldset[disabled] .btn,
body.dark-mode fieldset[disabled] .btn-default {
  background-color: #353a40 !important;
  border-color: #4a4f55 !important;
  color: #777 !important;
  opacity: 0.65;
}

/* ---- btn-primary (core action blue) ---- */
body.dark-mode .btn-primary,
body.dark-mode .btn-primary:focus {
  background-color: #2d6da3 !important;
  border-color: #3578b0 !important;
  color: #ffffff !important;
}

body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:active,
body.dark-mode .open .btn-primary.dropdown-toggle {
  background-color: #245a8a !important;
  border-color: #3578b0 !important;
}

body.dark-mode .btn-primary.active {
  background-color: #245a8a !important;
  border-color: #2d6da3 !important;
}

body.dark-mode .btn-primary.disabled,
body.dark-mode .btn-primary[disabled],
body.dark-mode fieldset[disabled] .btn-primary {
  background-color: #2d6da3 !important;
  border-color: #2d6da3 !important;
  opacity: 0.65;
}

/* ---- btn-info (steel blue) ---- */
body.dark-mode .btn-info,
body.dark-mode .btn-info:focus {
  background-color: #3a7cb8 !important;
  border-color: #4588c2 !important;
  color: #ffffff !important;
}

body.dark-mode .btn-info:hover,
body.dark-mode .btn-info:active,
body.dark-mode .open .btn-info.dropdown-toggle {
  background-color: #2e6a9e !important;
  border-color: #4588c2 !important;
}

body.dark-mode .btn-info.active {
  background-color: #2e6a9e !important;
  border-color: #3a7cb8 !important;
}

body.dark-mode .btn-info.disabled,
body.dark-mode .btn-info[disabled],
body.dark-mode fieldset[disabled] .btn-info {
  background-color: #3a7cb8 !important;
  border-color: #3a7cb8 !important;
  opacity: 0.65;
}

/* ---- btn-info2 (muted teal-blue) ---- */
body.dark-mode .btn-info2,
body.dark-mode .btn-info2:focus {
  background-color: #4a88ad !important;
  border-color: #5594b8 !important;
  color: #ffffff !important;
}

body.dark-mode .btn-info2:hover,
body.dark-mode .btn-info2:active,
body.dark-mode .open .btn-info2.dropdown-toggle {
  background-color: #3d7595 !important;
  border-color: #5594b8 !important;
}

body.dark-mode .btn-info2.active {
  background-color: #3d7595 !important;
  border-color: #4a88ad !important;
}

body.dark-mode .btn-info2.disabled,
body.dark-mode .btn-info2[disabled],
body.dark-mode fieldset[disabled] .btn-info2 {
  background-color: #4a88ad !important;
  border-color: #4a88ad !important;
  opacity: 0.65;
}

/* ---- btn-success (green) ---- */
body.dark-mode .btn-success,
body.dark-mode .btn-success:focus {
  background-color: #4a8a42 !important;
  border-color: #55954d !important;
  color: #ffffff !important;
}

body.dark-mode .btn-success:hover,
body.dark-mode .btn-success:active,
body.dark-mode .open .btn-success.dropdown-toggle {
  background-color: #3d7535 !important;
  border-color: #55954d !important;
}

body.dark-mode .btn-success.active {
  background-color: #3d7535 !important;
  border-color: #4a8a42 !important;
}

body.dark-mode .btn-success.disabled,
body.dark-mode .btn-success[disabled],
body.dark-mode fieldset[disabled] .btn-success {
  background-color: #4a8a42 !important;
  border-color: #4a8a42 !important;
  opacity: 0.65;
}

/* ---- btn-warning (amber) ---- */
body.dark-mode .btn-warning,
body.dark-mode .btn-warning:focus {
  background-color: #c08430 !important;
  border-color: #cc8e3a !important;
  color: #ffffff !important;
}

body.dark-mode .btn-warning:hover,
body.dark-mode .btn-warning:active,
body.dark-mode .open .btn-warning.dropdown-toggle {
  background-color: #a87228 !important;
  border-color: #cc8e3a !important;
}

body.dark-mode .btn-warning.active {
  background-color: #a87228 !important;
  border-color: #c08430 !important;
}

body.dark-mode .btn-warning.disabled,
body.dark-mode .btn-warning[disabled],
body.dark-mode fieldset[disabled] .btn-warning {
  background-color: #c08430 !important;
  border-color: #c08430 !important;
  opacity: 0.65;
}

/* ---- btn-danger (red) ---- */
body.dark-mode .btn-danger,
body.dark-mode .btn-danger:focus {
  background-color: #a8402e !important;
  border-color: #b54a38 !important;
  color: #ffffff !important;
}

body.dark-mode .btn-danger:hover,
body.dark-mode .btn-danger:active,
body.dark-mode .open .btn-danger.dropdown-toggle {
  background-color: #8f3525 !important;
  border-color: #b54a38 !important;
}

body.dark-mode .btn-danger.active {
  background-color: #8f3525 !important;
  border-color: #a8402e !important;
}

body.dark-mode .btn-danger.disabled,
body.dark-mode .btn-danger[disabled],
body.dark-mode fieldset[disabled] .btn-danger {
  background-color: #a8402e !important;
  border-color: #a8402e !important;
  opacity: 0.65;
}

/* ---- btn-inverse (dark, lighten border) ---- */
body.dark-mode .btn-inverse,
body.dark-mode .btn-inverse:focus {
  background-color: #3a3f44 !important;
  border-color: #555555 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .btn-inverse:hover,
body.dark-mode .btn-inverse:active,
body.dark-mode .open .btn-inverse.dropdown-toggle {
  background-color: #2e3338 !important;
  border-color: #555555 !important;
}

body.dark-mode .btn-inverse.active {
  background-color: #2e3338 !important;
  border-color: #3a3f44 !important;
}

body.dark-mode .btn-inverse.disabled,
body.dark-mode .btn-inverse[disabled],
body.dark-mode fieldset[disabled] .btn-inverse {
  background-color: #3a3f44 !important;
  border-color: #3a3f44 !important;
  opacity: 0.65;
}

/* ---- btn-pink (muted rose) ---- */
body.dark-mode .btn-pink,
body.dark-mode .btn-pink:focus {
  background-color: #a83562 !important;
  border-color: #b5406d !important;
  color: #ffffff !important;
}

body.dark-mode .btn-pink:hover,
body.dark-mode .btn-pink:active,
body.dark-mode .open .btn-pink.dropdown-toggle {
  background-color: #8f2d52 !important;
  border-color: #b5406d !important;
}

body.dark-mode .btn-pink.active {
  background-color: #8f2d52 !important;
  border-color: #a83562 !important;
}

body.dark-mode .btn-pink.disabled,
body.dark-mode .btn-pink[disabled],
body.dark-mode fieldset[disabled] .btn-pink {
  background-color: #a83562 !important;
  border-color: #a83562 !important;
  opacity: 0.65;
}

/* ---- btn-purple (amethyst) ---- */
body.dark-mode .btn-purple,
body.dark-mode .btn-purple:focus {
  background-color: #6b5a9e !important;
  border-color: #7865aa !important;
  color: #ffffff !important;
}

body.dark-mode .btn-purple:hover,
body.dark-mode .btn-purple:active,
body.dark-mode .open .btn-purple.dropdown-toggle {
  background-color: #5a4a88 !important;
  border-color: #7865aa !important;
}

body.dark-mode .btn-purple.active {
  background-color: #5a4a88 !important;
  border-color: #6b5a9e !important;
}

body.dark-mode .btn-purple.disabled,
body.dark-mode .btn-purple[disabled],
body.dark-mode fieldset[disabled] .btn-purple {
  background-color: #6b5a9e !important;
  border-color: #6b5a9e !important;
  opacity: 0.65;
}

/* ---- btn-grey (neutral) ---- */
body.dark-mode .btn-grey,
body.dark-mode .btn-grey:focus {
  background-color: #5a5f65 !important;
  border-color: #6a6f75 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .btn-grey:hover,
body.dark-mode .btn-grey:active,
body.dark-mode .open .btn-grey.dropdown-toggle {
  background-color: #4a4f55 !important;
  border-color: #6a6f75 !important;
}

body.dark-mode .btn-grey.active {
  background-color: #4a4f55 !important;
  border-color: #5a5f65 !important;
}

body.dark-mode .btn-grey.disabled,
body.dark-mode .btn-grey[disabled],
body.dark-mode fieldset[disabled] .btn-grey {
  background-color: #5a5f65 !important;
  border-color: #5a5f65 !important;
  opacity: 0.65;
}

/* ---- btn-yellow (golden, dark text) ---- */
body.dark-mode .btn-yellow {
  color: #1a1d21 !important;
  text-shadow: none !important;
}

body.dark-mode .btn-yellow,
body.dark-mode .btn-yellow:focus {
  background-color: #c9a030 !important;
  border-color: #d4aa3a !important;
}

body.dark-mode .btn-yellow:hover,
body.dark-mode .btn-yellow:active,
body.dark-mode .open .btn-yellow.dropdown-toggle {
  background-color: #b08a28 !important;
  border-color: #d4aa3a !important;
  color: #1a1d21 !important;
}

body.dark-mode .btn-yellow.active {
  background-color: #b08a28 !important;
  border-color: #c9a030 !important;
}

body.dark-mode .btn-yellow.disabled,
body.dark-mode .btn-yellow[disabled],
body.dark-mode fieldset[disabled] .btn-yellow {
  background-color: #c9a030 !important;
  border-color: #c9a030 !important;
  opacity: 0.65;
}

/* ---- btn-light (inverted to dark surface) ---- */
body.dark-mode .btn-light {
  color: #e0e0e0 !important;
  text-shadow: none !important;
}

body.dark-mode .btn-light,
body.dark-mode .btn-light:focus {
  background-color: #3a3f44 !important;
  border-color: #4a5055 !important;
}

body.dark-mode .btn-light:hover,
body.dark-mode .btn-light:active,
body.dark-mode .open .btn-light.dropdown-toggle {
  background-color: #4a5055 !important;
  border-color: #5a6065 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .btn-light.active {
  background-color: #4a5055 !important;
  border-color: #3a3f44 !important;
}

body.dark-mode .btn-light.disabled,
body.dark-mode .btn-light[disabled],
body.dark-mode fieldset[disabled] .btn-light {
  background-color: #3a3f44 !important;
  border-color: #3a3f44 !important;
  opacity: 0.65;
}

/* ---- btn-white (inverted to dark surface + visible border) ---- */
body.dark-mode .btn.btn-white,
body.dark-mode .btn.btn-white:focus {
  background-color: #2a2e33 !important;
  border-color: #4a4f55 !important;
  color: #e0e0e0 !important;
  text-shadow: none !important;
}

body.dark-mode .btn.btn-white:hover,
body.dark-mode .btn.btn-white:active,
body.dark-mode .open .btn.btn-white.dropdown-toggle {
  background-color: #353a40 !important;
  border-color: #555b62 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .btn.btn-white.active {
  background-color: #353a40 !important;
  border-color: #4a4f55 !important;
}

body.dark-mode .btn.btn-white.disabled,
body.dark-mode .btn.btn-white[disabled],
body.dark-mode fieldset[disabled] .btn.btn-white {
  background-color: #2a2e33 !important;
  border-color: #3a3f44 !important;
  opacity: 0.65;
}

/* btn-white color variants (e.g., btn-white.btn-default, btn-white.btn-primary) */
body.dark-mode .btn-white.btn-default {
  border-color: #4a5562 !important;
  color: #9da5ae !important;
}

body.dark-mode .btn-white.btn-primary {
  border-color: #2d6da3 !important;
  color: #5a9ed4 !important;
}

body.dark-mode .btn-white.btn-success {
  border-color: #4a8a42 !important;
  color: #6ab05e !important;
}

body.dark-mode .btn-white.btn-info {
  border-color: #3a7cb8 !important;
  color: #5a9ed4 !important;
}

body.dark-mode .btn-white.btn-warning {
  border-color: #c08430 !important;
  color: #d4a455 !important;
}

body.dark-mode .btn-white.btn-danger {
  border-color: #a8402e !important;
  color: #d46050 !important;
}

body.dark-mode .btn-white.btn-inverse {
  border-color: #3a3f44 !important;
  color: #9da5ae !important;
}

/* --------------------------------------------------------------------------
   11. PANELS, WELLS, CARDS
   -------------------------------------------------------------------------- */
body.dark-mode .panel {
  background-color: #2a2e33;
  border-color: #3a3f44;
}

body.dark-mode .panel-default>.panel-heading {
  background-color: #323840;
  border-color: #3a3f44;
  color: #e0e0e0;
}

body.dark-mode .panel-body {
  background-color: #2a2e33;
  color: #e0e0e0;
}

body.dark-mode .panel-footer {
  background-color: #252930;
  border-top-color: #3a3f44;
}

body.dark-mode .well {
  background-color: #252930;
  border-color: #3a3f44;
}

body.dark-mode .list-group-item {
  background-color: #2a2e33;
  border-color: #3a3f44;
  color: #e0e0e0;
}

body.dark-mode .list-group-item:hover {
  background-color: #353a40;
}

/* --------------------------------------------------------------------------
   12. THIRD-PARTY — Select2, X-editable, Gritter, DateTimePicker
   -------------------------------------------------------------------------- */

/* Select2 */
body.dark-mode .select2-container .select2-choice,
body.dark-mode .select2-container .select2-choices {
  background-color: #2a2e33 !important;
  background-image: none !important;
  border-color: #4a4f55 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .select2-container .select2-choice .select2-arrow {
  background-color: #353a40 !important;
  border-left-color: #4a4f55 !important;
}

body.dark-mode .select2-container .select2-choice .select2-arrow b {
  color: #e0e0e0;
}

body.dark-mode .select2-drop {
  background-color: #2a2e33 !important;
  border-color: #4a4f55 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .select2-results .select2-result-label {
  color: #e0e0e0;
}

body.dark-mode .select2-results .select2-highlighted {
  background-color: #3a7cc0 !important;
  color: #ffffff !important;
}

body.dark-mode .select2-search input {
  background-color: #23272b !important;
  color: #e0e0e0 !important;
  border-color: #4a4f55 !important;
}

body.dark-mode .select2-container-multi .select2-choices .select2-search-choice {
  background-color: #353a40 !important;
  border-color: #4a4f55 !important;
  color: #e0e0e0 !important;
}

/* X-editable */
body.dark-mode .editable-container .popover {
  background-color: #2a2e33;
  border-color: #4a4f55;
}

body.dark-mode .editable-container .popover-title {
  background-color: #323840;
  border-bottom-color: #3a3f44;
  color: #e0e0e0;
}

body.dark-mode .editable-container .popover-content {
  color: #e0e0e0;
}

body.dark-mode .editable-click,
body.dark-mode a.editable-click,
body.dark-mode a.editable-click:hover {
  color: #e0e0e0;
  border-bottom-color: #555;
}

body.dark-mode .editable-click:hover,
body.dark-mode a.editable-click:hover {
  color: #ffffff;
  border-bottom-color: #888;
}

body.dark-mode .editable-container .popover.bottom>.arrow:after {
  border-bottom-color: #323840;
}

body.dark-mode .editable-container .popover.top>.arrow:after {
  border-top-color: #2a2e33;
}

/* Gritter notifications */
body.dark-mode .gritter-item-wrapper {
  background-color: #2a2e33 !important;
  border: 1px solid #3a3f44 !important;
}

body.dark-mode .gritter-item .gritter-title {
  color: #e0e0e0 !important;
}

body.dark-mode .gritter-item p {
  color: #b8c0c8 !important;
}

/* DateTimePicker */
body.dark-mode .bootstrap-datetimepicker-widget {
  background-color: #2a2e33;
  border-color: #4a4f55;
}

body.dark-mode .bootstrap-datetimepicker-widget table td,
body.dark-mode .bootstrap-datetimepicker-widget table th {
  color: #e0e0e0;
}

body.dark-mode .bootstrap-datetimepicker-widget table td:hover {
  background-color: #353a40;
}

body.dark-mode .bootstrap-datetimepicker-widget table td.active,
body.dark-mode .bootstrap-datetimepicker-widget table td.active:hover {
  background-color: #3a7cc0;
  color: #ffffff;
}

body.dark-mode .bootstrap-datetimepicker-widget table td.today:before {
  border-bottom-color: #3a7cc0;
}

body.dark-mode .datepicker {
  background-color: #2a2e33;
  border-color: #4a4f55;
}

body.dark-mode .datepicker table tr td,
body.dark-mode .datepicker table tr th {
  color: #e0e0e0;
}

body.dark-mode .datepicker table tr td:hover {
  background-color: #353a40;
  color: #e0e0e0;
}

body.dark-mode .datepicker table tr td.active,
body.dark-mode .datepicker table tr td.active:hover {
  background-color: #3a7cc0;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   13. DARK MODE TOGGLE — Sidebar switch styling
   -------------------------------------------------------------------------- */
.sidebar-dark-mode-toggle {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  border-top: 1px solid #ddd;
  background-color: #f2f2f2;
}

body.dark-mode .sidebar-dark-mode-toggle {
  border-top-color: #2e3338;
  background-color: #1e2226;
}

.dark-mode-label {
  color: #888;
  font-size: 12px;
  margin-left: 8px;
  user-select: none;
  white-space: nowrap;
}

body.dark-mode .dark-mode-label {
  color: #9da5ae;
}

.dark-mode-label i {
  margin-right: 4px;
}

/* Toggle switch */
.dark-mode-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  margin: 0;
  flex-shrink: 0;
}

.dark-mode-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.dark-mode-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 22px;
}

.dark-mode-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.dark-mode-switch input:checked+.dark-mode-slider {
  background-color: #3a7cc0;
}

.dark-mode-switch input:checked+.dark-mode-slider:before {
  transform: translateX(18px);
}

.dark-mode-switch input:focus+.dark-mode-slider {
  box-shadow: 0 0 2px #3a7cc0;
}

/* --------------------------------------------------------------------------
   14. MISC — Badges, labels, dropdowns, alerts, tabs, tooltips, etc.
   -------------------------------------------------------------------------- */

/* Badges & Labels */
body.dark-mode .badge {
  background-color: #4a4f55;
  color: #e0e0e0;
}

body.dark-mode .label-default {
  background-color: #4a4f55;
}

body.dark-mode .label-info {
  background-color: #2b6a90;
}

/* Dropdowns */
body.dark-mode .dropdown-menu {
  background-color: #2a2e33;
  border-color: #3a3f44;
}

body.dark-mode .dropdown-menu>li>a {
  color: #e0e0e0;
}

body.dark-mode .dropdown-menu>li>a:hover,
body.dark-mode .dropdown-menu>li>a:focus {
  background-color: #353a40;
  color: #ffffff;
}

body.dark-mode .dropdown-menu .divider {
  background-color: #3a3f44;
}

/* Alerts */
body.dark-mode .alert-info {
  background-color: #1e2d3d;
  border-color: #3a5570;
  color: #8ec2ee;
}

body.dark-mode .alert-warning {
  background-color: #3d3520;
  border-color: #665830;
  color: #f0d888;
}

body.dark-mode .alert-danger {
  background-color: #3d2020;
  border-color: #663030;
  color: #e88888;
}

body.dark-mode .alert-success {
  background-color: #203d20;
  border-color: #306630;
  color: #88e088;
}

/* Tabs */
body.dark-mode .nav-tabs {
  border-bottom-color: #3a3f44;
  background-color: #2a2e33;
}

body.dark-mode .nav-tabs>li>a {
  color: #9da5ae;
}

body.dark-mode .nav-tabs>li>a:hover {
  border-color: #3a3f44;
  background-color: #353a40;
  color: #e0e0e0;
}

body.dark-mode .nav-tabs>li.active>a,
body.dark-mode .nav-tabs>li.active>a:hover,
body.dark-mode .nav-tabs>li.active>a:focus {
  background-color: #23272b;
  border-color: #3a3f44;
  border-bottom-color: #23272b;
  color: #e0e0e0;
}

body.dark-mode .tab-content {
  background-color: #23272b;
  border-color: #3a3f44;
}

/* Tooltips */
body.dark-mode .tooltip-inner {
  background-color: #353a40;
  color: #e0e0e0;
}

/* Popovers */
body.dark-mode .popover {
  background-color: #2a2e33;
  border-color: #4a4f55;
}

body.dark-mode .popover-title {
  background-color: #323840;
  border-bottom-color: #3a3f44;
  color: #e0e0e0;
}

body.dark-mode .popover-content {
  color: #e0e0e0;
}

/* Progress bars subtle background */
body.dark-mode .progress {
  background-color: #353a40;
}

/* Blockquotes */
body.dark-mode blockquote {
  border-left-color: #3a3f44;
  color: #b8c0c8;
}

/* Text muted */
body.dark-mode .text-muted {
  color: #9da5ae !important;
}

/* Ace widget / info box backgrounds */
body.dark-mode .infobox {
  border-color: #3a3f44;
}

/* Dialog / chat items */
body.dark-mode .itemdiv>.body {
  border-color: #3a3f44;
}

body.dark-mode .itemdiv.dialogdiv>.body {
  border-color: #4a4f55 !important;
}

body.dark-mode .itemdiv.dialogdiv>.body.incoming:before {
  border-color: #4a4f55;
  background-color: #2a2e33;
}

body.dark-mode .itemdiv.dialogdiv>.body.outgoing:before {
  border-color: #4a4f55;
  background-color: #2a2e33;
}

/* Gold and orange case highlights (keep visible in dark) */
body.dark-mode .gold-case {
  background: #5e5a1f !important;
  color: #e0e0e0 !important;
}

body.dark-mode .orange-case {
  background: #5e4020 !important;
  color: #e0e0e0 !important;
}

/* Mark/highlight */
body.dark-mode mark {
  background: #665800;
  color: #e0e0e0;
}

/* ace-nav notification badges */
body.dark-mode .ace-nav .badge {
  background-color: #c04e3e;
}

/* Scrollbar (Webkit) */
body.dark-mode ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body.dark-mode ::-webkit-scrollbar-track {
  background: #1a1d21;
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: #4a4f55;
  border-radius: 5px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #5a6068;
}

/* dl-horizontal terms */
body.dark-mode dt {
  color: #c8cdd2;
}

body.dark-mode dd {
  color: #e0e0e0;
}

/* Summary/details borders */
body.dark-mode .dl-horizontal.spaced-4 dt,
body.dark-mode .dl-horizontal.spaced-4 dd {
  border-color: #3a3f44;
}

/* Chosen plugin (if used) */
body.dark-mode .chosen-container .chosen-single {
  background-color: #2a2e33 !important;
  border-color: #4a4f55 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .chosen-container .chosen-drop {
  background-color: #2a2e33;
  border-color: #4a4f55;
}

body.dark-mode .chosen-container .chosen-results li {
  color: #e0e0e0;
}

body.dark-mode .chosen-container .chosen-results li.highlighted {
  background-color: #3a7cc0;
  color: #ffffff;
}

/* Typeahead dropdown (Bootstrap3 Typeahead) */
body.dark-mode .typeahead.dropdown-menu {
  background-color: #2a2e33;
  border-color: #4a4f55;
}

body.dark-mode .typeahead.dropdown-menu>li>a {
  color: #e0e0e0;
}

body.dark-mode .typeahead.dropdown-menu>.active>a {
  background-color: #3a7cc0;
  color: #ffffff;
}

/* Smooth transition for all color changes */
body.dark-mode,
body.dark-mode .navbar,
body.dark-mode .sidebar,
body.dark-mode .page-content,
body.dark-mode .breadcrumbs,
body.dark-mode .main-container:before {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Sidebar menu-min (collapsed) state */
body.dark-mode .sidebar.menu-min .nav-list>li>a>.menu-text {
  background-color: #2c3e50 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .sidebar.menu-min .nav-list>li.active>a>.menu-text {
  background-color: #162535 !important;
  color: #6ea8d9 !important;
}

body.dark-mode .sidebar.menu-min .nav-list>li>a>.menu-text,
body.dark-mode .sidebar.menu-min .nav-list>li>.submenu {
  border-color: #2e3338 !important;
}

/* --------------------------------------------------------------------------
   15. ACE ADMIN WIDGET-BOX SYSTEM (critical overrides)
   --------------------------------------------------------------------------
   Ace Admin uses background-image:linear-gradient() on .widget-header,
   background-color:#FFF on .widget-body, and specific border colors.
   All need !important + background-image:none to defeat.
   -------------------------------------------------------------------------- */

/* Widget box container */
body.dark-mode .widget-box {
  border-color: #3a3f44 !important;
}

/* Widget header — the gradient is the key culprit */
body.dark-mode .widget-header {
  background: #2a2e33 !important;
  background-image: none !important;
  border-bottom-color: #3a3f44 !important;
  color: #e0e0e0 !important;
  filter: none !important;
}

body.dark-mode .widget-header-flat {
  background: #2a2e33 !important;
  filter: none !important;
}

body.dark-mode .widget-header>.widget-title {
  color: #e0e0e0 !important;
}

body.dark-mode .widget-header>.widget-title>.ace-icon {
  color: #e0e0e0 !important;
}

/* Colored widget headers — desaturate in dark mode */
body.dark-mode .widget-box[class*="widget-color-"]>.widget-header {
  border-bottom-color: #3a3f44 !important;
}

body.dark-mode .widget-color-blue>.widget-header {
  background: #1e3a5f !important;
  background-image: none !important;
  border-bottom-color: #2a4f7a !important;
}

body.dark-mode .widget-color-blue2>.widget-header {
  background: #1a3050 !important;
  background-image: none !important;
}

body.dark-mode .widget-color-blue3>.widget-header {
  background: #1e2d40 !important;
  background-image: none !important;
}

body.dark-mode .widget-color-green>.widget-header {
  background: #2d4a37 !important;
  background-image: none !important;
}

body.dark-mode .widget-color-green2>.widget-header {
  background: #2a4430 !important;
  background-image: none !important;
}

body.dark-mode .widget-color-green3>.widget-header {
  background: #264428 !important;
  background-image: none !important;
}

body.dark-mode .widget-color-red>.widget-header {
  background: #5a2020 !important;
  background-image: none !important;
}

body.dark-mode .widget-color-orange>.widget-header {
  background: #5a3a1a !important;
  background-image: none !important;
}

body.dark-mode .widget-color-purple>.widget-header {
  background: #3a2050 !important;
  background-image: none !important;
}

body.dark-mode .widget-color-pink>.widget-header {
  background: #4a2040 !important;
  background-image: none !important;
}

body.dark-mode .widget-color-dark>.widget-header {
  background: #1a1d21 !important;
  background-image: none !important;
}

body.dark-mode .widget-color-grey>.widget-header {
  background: #323840 !important;
  background-image: none !important;
}

/* Widget body — the white background */
body.dark-mode .widget-body {
  background-color: #23272b !important;
}

/* Widget main (padded inner content) */
body.dark-mode .widget-main {
  background-color: #23272b !important;
  color: #e0e0e0 !important;
}

/* Transparent widget overrides */
body.dark-mode .widget-box.transparent>.widget-header {
  border-bottom-color: #3a3f44 !important;
  color: #6ea8d9 !important;
}

body.dark-mode .widget-box.transparent>.widget-body {
  background-color: transparent !important;
}

/* Widget toolbar */
body.dark-mode .widget-toolbar {
  border-left-color: #3a3f44 !important;
}

body.dark-mode .widget-toolbar>a {
  color: #9da5ae !important;
}

body.dark-mode .widget-toolbar>a:hover {
  color: #e0e0e0 !important;
}

body.dark-mode .widget-toolbar label {
  color: #9da5ae !important;
}

/* ---- Widget-toolbar nav-tabs (tabs inside widget headers) ----
   ace.css: .widget-toolbar > .nav-tabs > li.active > a { background-color: #FFF }
   Also: [class*="widget-color-"] and .transparent variants use #FFF for active/hover */

body.dark-mode .widget-toolbar>.nav-tabs>li>a {
  color: #9da5ae !important;
}

body.dark-mode .widget-toolbar>.nav-tabs>li:not(.active)>a {
  background-color: transparent !important;
  border-color: transparent !important;
}

body.dark-mode .widget-toolbar>.nav-tabs>li:not(.active)>a:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #e0e0e0 !important;
}

body.dark-mode .widget-toolbar>.nav-tabs>li.active>a {
  background-color: #23272b !important;
  border-bottom-color: transparent !important;
  color: #e0e0e0 !important;
}

/* Colored widget tabs ([class*="widget-color-"] > .widget-header > .widget-toolbar > .nav-tabs) */
body.dark-mode [class*="widget-color-"]>.widget-header>.widget-toolbar>.nav-tabs>li>a {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #c8cdd2 !important;
}

body.dark-mode [class*="widget-color-"]>.widget-header>.widget-toolbar>.nav-tabs>li>a:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #e0e0e0 !important;
  border-top-color: transparent !important;
}

body.dark-mode [class*="widget-color-"]>.widget-header>.widget-toolbar>.nav-tabs>li.active>a {
  background-color: #23272b !important;
  color: #e0e0e0 !important;
  border-bottom-color: transparent !important;
}

/* Transparent widget tabs */
body.dark-mode .transparent>.widget-header>.widget-toolbar>.nav-tabs>li>a {
  color: #9da5ae !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

body.dark-mode .transparent>.widget-header>.widget-toolbar>.nav-tabs>li.active>a {
  border-top-color: #4c8fbd !important;
  border-right-color: #3a3f44 !important;
  border-left-color: #3a3f44 !important;
  background-color: #23272b !important;
  color: #e0e0e0 !important;
}

/* Small/Large widget header tab sizing (keep dark colors) */
body.dark-mode .widget-header-small>.widget-toolbar>.nav-tabs>li.active>a,
body.dark-mode .widget-header-large>.widget-toolbar>.nav-tabs>li.active>a {
  background-color: #23272b !important;
  color: #e0e0e0 !important;
}

/* Widget toolbox (footer area) */
body.dark-mode .widget-toolbox {
  background-color: #252930 !important;
  border-top-color: #3a3f44 !important;
  border-bottom-color: #3a3f44 !important;
}

/* Widget body tables */
body.dark-mode .widget-body .table thead:first-child tr {
  background-color: #2a2e33 !important;
}

body.dark-mode [class*="widget-color-"]>.widget-body .table thead:first-child tr {
  background-color: #323840 !important;
}

/* --------------------------------------------------------------------------
   16. ACE ADMIN TABS (critical overrides for nav-tabs)
   --------------------------------------------------------------------------
   Ace Admin tabs use #F9F9F9 bg, #c5d0dc borders, #FFF active bg,
   and #4c8fbd top-border accent. All need !important.
   -------------------------------------------------------------------------- */
body.dark-mode .nav-tabs {
  border-bottom-color: #3a3f44 !important;
  background-color: #2a2e33 !important;
  background-image: none !important;
}

body.dark-mode .nav-tabs>li>a,
body.dark-mode .nav-tabs>li>a:focus {
  background-color: #2a2e33 !important;
  border-color: #3a3f44 !important;
  color: #9da5ae !important;
}

body.dark-mode .nav-tabs>li>a:hover {
  background-color: #353a40 !important;
  border-color: #3a3f44 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .nav-tabs>li.active>a,
body.dark-mode .nav-tabs>li.active>a:hover,
body.dark-mode .nav-tabs>li.active>a:focus {
  background-color: #23272b !important;
  border-color: #3a3f44 !important;
  border-top: 2px solid #3a7cc0 !important;
  border-bottom-color: #23272b !important;
  color: #e0e0e0 !important;
}

/* Badge inside nav-tabs — ace.css forces #FFF !important on badges inside
   tab-color-* variants and inactive tabs. Override with matching specificity. */
body.dark-mode .nav-tabs>li>a>.badge {
  background-color: #4a5562 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .nav-tabs>li>a>.badge.badge-info {
  background-color: #2d6da3 !important;
  color: #ffffff !important;
}

body.dark-mode .nav-tabs[class*="tab-color-"]>li:not(.active)>a>.badge {
  background-color: #4a5562 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .nav-tabs[class*="tab-color-"]>li:not(.active)>a>.badge.badge-info {
  background-color: #2d6da3 !important;
  color: #ffffff !important;
}

body.dark-mode .nav-tabs[class*="tab-color-"]>li.active>a {
  background-color: #23272b !important;
  color: #e0e0e0 !important;
}

/* Tabs below */
body.dark-mode .tabs-below>.nav-tabs>li>a,
body.dark-mode .tabs-below>.nav-tabs>li>a:hover,
body.dark-mode .tabs-below>.nav-tabs>li>a:focus {
  border-color: #3a3f44 !important;
}

body.dark-mode .tabs-below>.nav-tabs>li.active>a,
body.dark-mode .tabs-below>.nav-tabs>li.active>a:hover,
body.dark-mode .tabs-below>.nav-tabs>li.active>a:focus {
  border-color: #3a3f44 !important;
  border-bottom: 2px solid #3a7cc0 !important;
  border-top-color: transparent !important;
}

/* Tabs left / right */
body.dark-mode .tabs-left>.nav-tabs>li>a,
body.dark-mode .tabs-left>.nav-tabs>li>a:focus,
body.dark-mode .tabs-left>.nav-tabs>li>a:hover,
body.dark-mode .tabs-right>.nav-tabs>li>a,
body.dark-mode .tabs-right>.nav-tabs>li>a:focus,
body.dark-mode .tabs-right>.nav-tabs>li>a:hover {
  border-color: #3a3f44 !important;
}

body.dark-mode .tabs-left>.nav-tabs>li.active>a,
body.dark-mode .tabs-left>.nav-tabs>li.active>a:focus,
body.dark-mode .tabs-left>.nav-tabs>li.active>a:hover {
  border-color: #3a3f44 !important;
  border-left: 2px solid #3a7cc0 !important;
  border-right-color: transparent !important;
}

body.dark-mode .tabs-right>.nav-tabs>li.active>a,
body.dark-mode .tabs-right>.nav-tabs>li.active>a:focus,
body.dark-mode .tabs-right>.nav-tabs>li.active>a:hover {
  border-color: #3a3f44 !important;
  border-right: 2px solid #3a7cc0 !important;
  border-left-color: transparent !important;
}

/* Tab content area */
body.dark-mode .tab-content {
  background-color: #23272b !important;
  border-color: #3a3f44 !important;
  color: #e0e0e0 !important;
}

/* Tab open-on-hover dropdown */
body.dark-mode .nav-tabs>li.open .dropdown-toggle {
  background-color: #3a7cc0 !important;
  border-color: #3a7cc0 !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   17. ACE ADMIN DATATABLES WRAPPERS
   -------------------------------------------------------------------------- */
body.dark-mode .dataTables_wrapper {
  color: #e0e0e0 !important;
}

/* DataTables toolbar areas */
body.dark-mode .tableTools-container,
body.dark-mode .DTTT_container {
  background-color: #23272b !important;
}

/* DataTables row detail (expanded) */
body.dark-mode .dataTables_wrapper table.dataTable tbody tr.child {
  background-color: #252930 !important;
}

body.dark-mode .dataTables_wrapper table.dataTable tbody tr.child td {
  background-color: #252930 !important;
}

/* DataTables empty row */
body.dark-mode .dataTables_wrapper .dataTables_empty {
  color: #9da5ae !important;
}

/* DataTables processing overlay */
body.dark-mode .dataTables_processing {
  background-color: rgba(35, 39, 43, 0.9) !important;
  color: #e0e0e0 !important;
}

/* --------------------------------------------------------------------------
   18. ACE ADMIN INFOBOX
   -------------------------------------------------------------------------- */
body.dark-mode .infobox {
  background-color: #2a2e33 !important;
  border-color: #3a3f44 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .infobox .infobox-data span {
  color: #e0e0e0 !important;
}

body.dark-mode .infobox-dark {
  background-color: #1e2226 !important;
  color: #e0e0e0 !important;
}

/* --------------------------------------------------------------------------
   19. ACE ADMIN PROFILE / USER PAGE
   -------------------------------------------------------------------------- */
body.dark-mode .profile-user-info-value {
  color: #e0e0e0 !important;
}

body.dark-mode .profile-user-info-striped .profile-info-row {
  border-bottom-color: #3a3f44 !important;
}

body.dark-mode .profile-user-info-striped .profile-info-name {
  background-color: #252930 !important;
  border-right-color: #3a3f44 !important;
  color: #9da5ae !important;
}

body.dark-mode .profile-user-info-striped .profile-info-value {
  color: #e0e0e0 !important;
}

body.dark-mode .user-profile .profileinfo-name {
  color: #9da5ae !important;
}

/* --------------------------------------------------------------------------
   20. ACE ADMIN MODAL FOOTER (from ace.css #eff3f8)
   -------------------------------------------------------------------------- */
body.dark-mode .modal-footer {
  background-color: #2a2e33 !important;
  border-top-color: transparent !important;
  margin-top: 0 !important;
}

/* --------------------------------------------------------------------------
   21. MISC ACE ADMIN OVERRIDES (catch-all for remaining white blocks)
   -------------------------------------------------------------------------- */

/* Accordion/collapse panels */
body.dark-mode .accordion-style1.panel-group .panel {
  border-color: #3a3f44 !important;
}

body.dark-mode .accordion-style1.panel-group .panel-heading {
  background-color: #2a2e33 !important;
  border-color: #3a3f44 !important;
}

body.dark-mode .accordion-style1.panel-group .panel-heading a {
  color: #6ea8d9 !important;
}

body.dark-mode .accordion-style1.panel-group .panel-heading.collapsed a {
  color: #9da5ae !important;
}

/* Nav pills */
body.dark-mode .nav-pills>li>a {
  color: #9da5ae !important;
}

body.dark-mode .nav-pills>li>a:hover {
  background-color: #353a40 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .nav-pills>li.active>a,
body.dark-mode .nav-pills>li.active>a:hover,
body.dark-mode .nav-pills>li.active>a:focus {
  background-color: #3a7cc0 !important;
  color: #ffffff !important;
}

/* Tabbable bordered */
body.dark-mode .tabbable {
  border-color: #3a3f44 !important;
}

/* Search results and filters */
body.dark-mode .search-area {
  background-color: #2a2e33 !important;
  border-color: #3a3f44 !important;
}

/* Ace checkbox and radio custom controls */
body.dark-mode .ace-checkbox-2+.lbl::before,
body.dark-mode .ace-radio+.lbl::before {
  border-color: #4a4f55 !important;
  background-color: #2a2e33 !important;
}

/* Loading overlay */
body.dark-mode .widget-box-overlay {
  background-color: rgba(26, 29, 33, 0.7) !important;
}

/* Generic white backgrounds (nuclear option for persistent white blocks) */
body.dark-mode .main-content {
  background-color: #23272b !important;
}

body.dark-mode .main-container {
  background-color: #1a1d21 !important;
}

/* Any remaining white bg from ace.css body styling */
body.dark-mode .row-fluid,
body.dark-mode .container-fluid {
  color: #e0e0e0;
}

/* --------------------------------------------------------------------------
   21. REMAINING AUDIT FIXES
   --------------------------------------------------------------------------
   Catch-all overrides for issues found during comprehensive dark mode audit:
   - TR elements with #F2F2F2 across multiple pages
   - Badge colors (Bootstrap base + variants)
   - Form select/option elements
   -------------------------------------------------------------------------- */

/* ---- Table row catch-all ----
   Many TR elements inherit or get #F2F2F2 from ace.css row classes,
   Bootstrap .table-striped, or inline styles. Force all visible
   table rows dark. */
body.dark-mode tr {
  background-color: inherit;
}

body.dark-mode tbody>tr {
  background-color: #23272b !important;
}

body.dark-mode tbody>tr:nth-of-type(odd) {
  background-color: #252930 !important;
}

body.dark-mode tbody>tr:nth-of-type(even) {
  background-color: #23272b !important;
}

body.dark-mode thead>tr {
  background-color: #2a2e33 !important;
}

body.dark-mode tfoot>tr {
  background-color: #252930 !important;
}

body.dark-mode tbody>tr:hover {
  background-color: #2f3540 !important;
}

body.dark-mode tbody>tr td,
body.dark-mode tbody>tr th {
  background-color: inherit !important;
  color: #e0e0e0;
}

/* Override inline style="background-color: #f2f2f2" on TDs (Trial Metrics summary) */
body.dark-mode td[style*="background-color"],
body.dark-mode th[style*="background-color"] {
  background-color: #252930 !important;
}

body.dark-mode td[style*="background-color"]:hover,
body.dark-mode th[style*="background-color"]:hover {
  background-color: #2f3540 !important;
}

/* ---- Badges ----
   ace.css .badge uses #abbac3, but some badge variants or
   Bootstrap base may show white. Override all. */
body.dark-mode .badge,
body.dark-mode span.badge {
  background-color: #4a5562 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .badge.badge-info,
body.dark-mode .badge-info,
body.dark-mode span.badge-info {
  background-color: #2d6da3 !important;
  color: #ffffff !important;
}

body.dark-mode .badge-primary {
  background-color: #2d6da3 !important;
  color: #ffffff !important;
}

body.dark-mode .badge-success {
  background-color: #4a8a42 !important;
  color: #ffffff !important;
}

body.dark-mode .badge-danger {
  background-color: #a8402e !important;
  color: #ffffff !important;
}

body.dark-mode .badge-warning {
  background-color: #c08430 !important;
  color: #ffffff !important;
}

body.dark-mode .badge-inverse {
  background-color: #3a3f44 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .badge-grey,
body.dark-mode .badge-default {
  background-color: #5a5f65 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .badge-transparent,
body.dark-mode .badge-white {
  background-color: transparent !important;
  border: 1px solid #4a4f55 !important;
  color: #e0e0e0 !important;
}

/* ---- Labels (same pattern as badges) ---- */
body.dark-mode .label-info {
  background-color: #2d6da3 !important;
}

body.dark-mode .label-primary {
  background-color: #2d6da3 !important;
}

body.dark-mode .label-success {
  background-color: #4a8a42 !important;
}

body.dark-mode .label-danger {
  background-color: #a8402e !important;
}

body.dark-mode .label-warning {
  background-color: #c08430 !important;
}

body.dark-mode .label-default {
  background-color: #4a5562 !important;
}

body.dark-mode .label-inverse {
  background-color: #3a3f44 !important;
}

/* ---- Form select/option elements ---- */
body.dark-mode select,
body.dark-mode select option {
  background-color: #2a2e33 !important;
  color: #e0e0e0 !important;
}

body.dark-mode select option:checked {
  background-color: #3a7cc0 !important;
  color: #ffffff !important;
}

body.dark-mode select optgroup {
  background-color: #252930 !important;
  color: #c8cdd2 !important;
}

/* --------------------------------------------------------------------------
   22. TRANSITION (light to dark smooth feel)
   -------------------------------------------------------------------------- */
body {
  transition: background-color 0.3s ease;
}