/*
 * Dark mode. Style only, applies only when <html data-theme="dark"> is set (toggle in the top header).
 * Light mode is untouched. To remove dark mode, delete this file, its <link> and the toggle script in components/layout.blade.php.
 */

html[data-theme="dark"] {
  color-scheme: dark;
  --d-bg: #20242c;
  --d-surface: #2a2f39;
  --d-raised: #333946;
  --d-border: #404756;
  --d-text: #eceef2;
  --d-soft: #c3c9d4;
  --d-muted: #98a1b0;

  --m-bg: var(--d-bg);
  --m-surface: var(--d-surface);
  --m-border: var(--d-border);
  --m-border-strong: #4d5565;
  --m-text: var(--d-text);
  --m-text-soft: var(--d-soft);
  --m-text-muted: var(--d-muted);
  --m-hover: var(--d-raised);
}

/* ------------------- Page, header, sidebar ------------------- */
html[data-theme="dark"] body,
html[data-theme="dark"] .wrapper,
html[data-theme="dark"] .content-wrapper {
  background: var(--d-bg) !important;
  color: var(--d-text);
}

html[data-theme="dark"] .main-header,
html[data-theme="dark"] .main-sidebar,
html[data-theme="dark"] .main-footer {
  background: var(--d-surface) !important;
  border-color: var(--d-border) !important;
  color: var(--d-text);
}

html[data-theme="dark"] .main-sidebar .nav-sidebar > .nav-item > .nav-link:hover,
html[data-theme="dark"] .main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link {
  background: var(--d-raised) !important;
}

html[data-theme="dark"] .main-sidebar .nav-treeview > .nav-item > .nav-link:hover {
  background: var(--d-raised) !important;
}

html[data-theme="dark"] .main-sidebar img.brand-image,
html[data-theme="dark"] .main-sidebar .brand-link img {
  filter: brightness(0) invert(1);
}

/* ------------------- White / light utilities ------------------- */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .navbar-white,
html[data-theme="dark"] .navbar-light {
  background-color: var(--d-surface) !important;
  color: var(--d-text);
  border-color: var(--d-border) !important;
}

html[data-theme="dark"] .bg-gray-light,
html[data-theme="dark"] .bg-secondary-subtle,
html[data-theme="dark"] .bg-body-secondary {
  background-color: var(--d-raised) !important;
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-body-emphasis {
  color: var(--d-text) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-body-secondary {
  color: var(--d-muted) !important;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end,
html[data-theme="dark"] .border-left,
html[data-theme="dark"] .border-right,
html[data-theme="dark"] hr {
  border-color: var(--d-border) !important;
}

html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.badge) {
  color: #8ab4ff;
}

html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] label,
html[data-theme="dark"] .modal-title {
  color: var(--d-text);
}

html[data-theme="dark"] .text-uppercase.text-muted {
  color: var(--d-muted) !important;
}

/* ------------------- Tables ------------------- */
html[data-theme="dark"] .table,
html[data-theme="dark"] table.dataTable {
  color: var(--d-text);
  --bs-table-bg: transparent;
  --bs-table-color: var(--d-text);
  --bs-table-border-color: var(--d-border);
}

html[data-theme="dark"] .table > :not(caption) > * > *,
html[data-theme="dark"] table.dataTable > tbody > tr > td,
html[data-theme="dark"] table.dataTable > tbody > tr > th {
  background-color: transparent;
  color: var(--d-text);
  border-color: var(--d-border) !important;
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table-gray th,
html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] table.dataTable thead td {
  background-color: var(--d-raised) !important;
  color: var(--d-soft) !important;
  border-color: var(--d-border) !important;
}

html[data-theme="dark"] .table-gray td,
html[data-theme="dark"] .table-gray th {
  border-color: var(--d-border) !important;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-theme="dark"] table.dataTable.stripe > tbody > tr.odd > * {
  background-color: rgba(255, 255, 255, .03) !important;
  color: var(--d-text);
}

html[data-theme="dark"] .table-hover > tbody > tr:hover > *,
html[data-theme="dark"] table.dataTable.hover > tbody > tr:hover > * {
  background-color: #2e333d !important;
  color: var(--d-text);
}

html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light > th,
html[data-theme="dark"] .table-light > td {
  background-color: var(--d-raised) !important;
  color: var(--d-text);
}

html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .dataTables_info,
html[data-theme="dark"] .dataTables_length,
html[data-theme="dark"] .dataTables_filter,
html[data-theme="dark"] .dt-container {
  color: var(--d-soft);
}

html[data-theme="dark"] .dataTables_empty {
  color: var(--d-muted);
}

/* ------------------- Forms ------------------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="date"] {
  background-color: var(--d-raised);
  color: var(--d-text);
  border-color: var(--d-border);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
  background-color: var(--d-raised);
  color: var(--d-text);
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-select:disabled,
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] textarea:disabled {
  background-color: var(--d-raised);
  color: var(--d-muted);
  opacity: 1;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--d-muted);
}

html[data-theme="dark"] .input-group-text {
  color: var(--d-soft);
}

/* select2 */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-container--bootstrap4 .select2-selection,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
  background-color: var(--d-raised);
  border-color: var(--d-border);
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  color: var(--d-text);
}

html[data-theme="dark"] .select2-dropdown {
  background-color: var(--d-surface);
  border-color: var(--d-border);
  color: var(--d-text);
}

html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--d-raised);
  color: var(--d-text);
  border-color: var(--d-border);
}

html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"],
html[data-theme="dark"] .select2-container--default .select2-results__option--selected {
  background-color: var(--d-raised);
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted {
  background-color: var(--bs-primary);
  color: #fff;
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #404756;
  border-color: #4d5565;
  color: var(--d-text);
}

/* ------------------- Modals, dropdowns, popovers ------------------- */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .offcanvas {
  background-color: var(--d-surface);
  color: var(--d-text);
  border-color: var(--d-border);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .popover-header {
  background-color: var(--d-surface);
  border-color: var(--d-border);
}

html[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

html[data-theme="dark"] .dropdown-item {
  color: var(--d-text);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--d-raised);
  color: var(--d-text);
}

html[data-theme="dark"] .dropdown-divider {
  border-color: var(--d-border);
}

/* ------------------- Pagination, tabs, buttons ------------------- */
html[data-theme="dark"] .page-link,
html[data-theme="dark"] .paginate_button {
  background-color: var(--d-surface) !important;
  border-color: var(--d-border) !important;
  color: var(--d-text) !important;
}

html[data-theme="dark"] .page-item.active .page-link,
html[data-theme="dark"] .paginate_button.current {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

html[data-theme="dark"] .page-item.disabled .page-link,
html[data-theme="dark"] .paginate_button.disabled {
  color: var(--d-muted) !important;
}

html[data-theme="dark"] .nav-tabs {
  border-color: var(--d-border);
}

html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
  background-color: var(--d-surface);
  color: var(--d-text);
  border-color: var(--d-border) var(--d-border) var(--d-surface);
}

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-white,
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-dark {
  background-color: var(--d-raised);
  border-color: var(--d-border);
  color: var(--d-text);
}

html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-dark:hover {
  background-color: #404756;
  color: var(--d-text);
}

/* ------------------- Misc ------------------- */
html[data-theme="dark"] .alert-light,
html[data-theme="dark"] .badge.bg-light {
  background-color: var(--d-raised) !important;
  color: var(--d-text) !important;
  border-color: var(--d-border) !important;
}

html[data-theme="dark"] .progress {
  background-color: var(--d-raised);
}

html[data-theme="dark"] .bg-slate-100,
html[data-theme="dark"] .bg-gray-100 {
  background-color: var(--d-raised) !important;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--d-bg);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #4d5565;
  border-radius: 8px;
}

html[data-theme="dark"] .daterangepicker,
html[data-theme="dark"] .flatpickr-calendar,
html[data-theme="dark"] .datepicker-dropdown {
  background-color: var(--d-surface);
  border-color: var(--d-border);
  color: var(--d-text);
}

html[data-theme="dark"] .daterangepicker td.off,
html[data-theme="dark"] .daterangepicker td.available:hover {
  background-color: var(--d-raised);
  color: var(--d-text);
}

html[data-theme="dark"] .daterangepicker .calendar-table {
  background-color: var(--d-surface);
  border-color: var(--d-border);
}

html[data-theme="dark"] .toast {
  background-color: var(--d-surface);
  color: var(--d-text);
}

html[data-theme="dark"] .theme-toggle {
  background-color: var(--d-surface) !important;
  border-color: var(--d-border) !important;
}

html[data-theme="dark"] .theme-toggle i {
  color: #f2c36b !important;
}

/* header icons and plain white buttons */
html[data-theme="dark"] .main-header .nav-link,
html[data-theme="dark"] .main-header .nav-link i,
html[data-theme="dark"] .main-header .text-dark {
  color: var(--d-soft) !important;
}

html[data-theme="dark"] .btn:not([class*="btn-"]):not([class*="bg-"]) {
  background-color: var(--d-raised);
  border-color: var(--d-border);
  color: var(--d-text);
}

html[data-theme="dark"] .btn:not([class*="btn-"]):not([class*="bg-"]):hover {
  background-color: #404756;
}

/* header and sidebar edges use the same line */
html[data-theme="dark"] .main-header.navbar,
html[data-theme="dark"] nav.main-header {
  border: 0 !important;
  border-bottom: 1px solid var(--d-border) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .main-sidebar {
  border-right: 1px solid var(--d-border) !important;
}

html[data-theme="dark"] body {
  border-top-color: var(--d-bg) !important;
}

/* coloured tags keep dark text, the text-dark / text-muted dark-mode rules must not light it up */
html[data-theme="dark"] .badge.text-dark,
html[data-theme="dark"] .badge[class*="bg-alt-"].text-dark,
html[data-theme="dark"] .badge.bg-warning,
html[data-theme="dark"] .badge.bg-info,
html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge[class*="bg-alt-warning"],
html[data-theme="dark"] .badge[class*="bg-alt-light"] {
  color: #1f2937 !important;
}

html[data-theme="dark"] .badge.text-white,
html[data-theme="dark"] .badge[class*="bg-alt-"].text-white {
  color: #fff !important;
}

/* plain white legend pills (quoted, valid, expired ...) */
html[data-theme="dark"] .badge:not([class*="bg-"]):not([class*="badge-"]):not(.text-white),
html[data-theme="dark"] .badge.badge-sm:not([class*="bg-"]) {
  background-color: var(--d-raised) !important;
  border: 1px solid var(--d-border);
}

/* table body one shade apart from the card behind it */
html[data-theme="dark"] .table > tbody > tr > *,
html[data-theme="dark"] table.dataTable > tbody > tr > * {
  background-color: #262a33 !important;
}

html[data-theme="dark"] .table-hover > tbody > tr:hover > *,
html[data-theme="dark"] table.dataTable > tbody > tr:hover > * {
  background-color: #2e333d !important;
}

/* coloured buttons keep dark text when the page asks for text-dark */
html[data-theme="dark"] .btn-warning.text-dark,
html[data-theme="dark"] .btn-info.text-dark,
html[data-theme="dark"] .btn-success.text-dark,
html[data-theme="dark"] .btn[class*="btn-alt-warning"].text-dark,
html[data-theme="dark"] .alert-warning .text-dark {
  color: #1f2937 !important;
}

/* every button and coloured box marked text-dark keeps dark text, except the ones dark mode turned dark */
html[data-theme="dark"] .btn.text-dark,
html[data-theme="dark"] [class*="bg-alt-"].text-dark,
html[data-theme="dark"] .bg-warning.text-dark,
html[data-theme="dark"] .bg-info.text-dark,
html[data-theme="dark"] .bg-success.text-dark {
  color: #1f2937 !important;
}

html[data-theme="dark"] .btn-light.text-dark,
html[data-theme="dark"] .btn-default.text-dark,
html[data-theme="dark"] .btn-white.text-dark,
html[data-theme="dark"] .btn-outline-secondary.text-dark,
html[data-theme="dark"] .btn-outline-dark.text-dark,
html[data-theme="dark"] .btn:not([class*="btn-"]).text-dark {
  color: var(--d-text) !important;
}

/* buttons that use bg-light / bg-white (e.g. MANAGE QUOTES) */
html[data-theme="dark"] .btn.bg-light,
html[data-theme="dark"] .btn.bg-white,
html[data-theme="dark"] .breadcrumb .btn {
  background-color: var(--d-raised) !important;
  color: var(--d-text) !important;
}

html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-item.active,
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--d-muted);
}

/* boxes inside a card (info boxes, light panels) one shade lighter than the card so they stand out */
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .card .bg-light,
html[data-theme="dark"] .card-body .bg-light {
  background-color: var(--d-raised) !important;
  border: 1px solid var(--d-border);
  box-shadow: none;
  color: var(--d-text);
}

/* light tags (e.g. "= Similar Tools") use the raised shade with light text */
html[data-theme="dark"] .badge.bg-light {
  background-color: var(--d-raised) !important;
  color: var(--d-text) !important;
  border: 1px solid var(--d-border);
}

/* ------------------- Softened Bootstrap colours (lighter, less saturated fills with dark text) ------------------- */

html[data-theme="dark"] .btn.btn-primary,
html[data-theme="dark"] .btn.btn-primary.text-white,
html[data-theme="dark"] .btn.btn-primary.text-dark,
html[data-theme="dark"] .badge.bg-primary,
html[data-theme="dark"] .alert.bg-primary,
html[data-theme="dark"] .badge.bg-primary.text-white,
html[data-theme="dark"] .alert.bg-primary.text-white,
html[data-theme="dark"] .badge.bg-primary.text-dark,
html[data-theme="dark"] .alert.bg-primary.text-dark,
html[data-theme="dark"] .badge.bg-alt-primary,
html[data-theme="dark"] .alert.bg-alt-primary,
html[data-theme="dark"] .badge.bg-alt-primary.text-white,
html[data-theme="dark"] .alert.bg-alt-primary.text-white,
html[data-theme="dark"] .badge.bg-alt-primary.text-dark,
html[data-theme="dark"] .alert.bg-alt-primary.text-dark,
html[data-theme="dark"] .alert-primary {
  background-color: #5b9bf5 !important;
  border-color: #5b9bf5 !important;
  color: #0b1b33 !important;
}
html[data-theme="dark"] .btn.btn-primary:hover,
html[data-theme="dark"] .btn.btn-primary:focus,
html[data-theme="dark"] .btn.btn-primary:active {
  background-color: #7eb2f8 !important;
  border-color: #7eb2f8 !important;
  color: #0b1b33 !important;
}
html[data-theme="dark"] .alert-primary .alert-link, html[data-theme="dark"] .alert-primary .close, html[data-theme="dark"] .alert-primary h1, html[data-theme="dark"] .alert-primary h2, html[data-theme="dark"] .alert-primary h3, html[data-theme="dark"] .alert-primary h4, html[data-theme="dark"] .alert-primary h5, html[data-theme="dark"] .alert-primary h6 {
  color: #0b1b33 !important;
}
html[data-theme="dark"] .btn-outline-primary {
  color: #5b9bf5 !important;
  border-color: #5b9bf5 !important;
  background-color: transparent;
}
html[data-theme="dark"] .btn-outline-primary:hover {
  background-color: #5b9bf5 !important;
  color: #0b1b33 !important;
}
html[data-theme="dark"] .text-primary {
  color: #5b9bf5 !important;
}

html[data-theme="dark"] .btn.btn-success,
html[data-theme="dark"] .btn.btn-success.text-white,
html[data-theme="dark"] .btn.btn-success.text-dark,
html[data-theme="dark"] .badge.bg-success,
html[data-theme="dark"] .alert.bg-success,
html[data-theme="dark"] .badge.bg-success.text-white,
html[data-theme="dark"] .alert.bg-success.text-white,
html[data-theme="dark"] .badge.bg-success.text-dark,
html[data-theme="dark"] .alert.bg-success.text-dark,
html[data-theme="dark"] .badge.bg-alt-success,
html[data-theme="dark"] .alert.bg-alt-success,
html[data-theme="dark"] .badge.bg-alt-success.text-white,
html[data-theme="dark"] .alert.bg-alt-success.text-white,
html[data-theme="dark"] .badge.bg-alt-success.text-dark,
html[data-theme="dark"] .alert.bg-alt-success.text-dark,
html[data-theme="dark"] .alert-success {
  background-color: #4cc38a !important;
  border-color: #4cc38a !important;
  color: #06281a !important;
}
html[data-theme="dark"] .btn.btn-success:hover,
html[data-theme="dark"] .btn.btn-success:focus,
html[data-theme="dark"] .btn.btn-success:active {
  background-color: #6fd3a1 !important;
  border-color: #6fd3a1 !important;
  color: #06281a !important;
}
html[data-theme="dark"] .alert-success .alert-link, html[data-theme="dark"] .alert-success .close, html[data-theme="dark"] .alert-success h1, html[data-theme="dark"] .alert-success h2, html[data-theme="dark"] .alert-success h3, html[data-theme="dark"] .alert-success h4, html[data-theme="dark"] .alert-success h5, html[data-theme="dark"] .alert-success h6 {
  color: #06281a !important;
}
html[data-theme="dark"] .btn-outline-success {
  color: #4cc38a !important;
  border-color: #4cc38a !important;
  background-color: transparent;
}
html[data-theme="dark"] .btn-outline-success:hover {
  background-color: #4cc38a !important;
  color: #06281a !important;
}
html[data-theme="dark"] .text-success {
  color: #4cc38a !important;
}

html[data-theme="dark"] .btn.btn-danger,
html[data-theme="dark"] .btn.btn-danger.text-white,
html[data-theme="dark"] .btn.btn-danger.text-dark,
html[data-theme="dark"] .badge.bg-danger,
html[data-theme="dark"] .alert.bg-danger,
html[data-theme="dark"] .badge.bg-danger.text-white,
html[data-theme="dark"] .alert.bg-danger.text-white,
html[data-theme="dark"] .badge.bg-danger.text-dark,
html[data-theme="dark"] .alert.bg-danger.text-dark,
html[data-theme="dark"] .badge.bg-alt-danger,
html[data-theme="dark"] .alert.bg-alt-danger,
html[data-theme="dark"] .badge.bg-alt-danger.text-white,
html[data-theme="dark"] .alert.bg-alt-danger.text-white,
html[data-theme="dark"] .badge.bg-alt-danger.text-dark,
html[data-theme="dark"] .alert.bg-alt-danger.text-dark,
html[data-theme="dark"] .alert-danger {
  background-color: #f2766f !important;
  border-color: #f2766f !important;
  color: #3a0a08 !important;
}
html[data-theme="dark"] .btn.btn-danger:hover,
html[data-theme="dark"] .btn.btn-danger:focus,
html[data-theme="dark"] .btn.btn-danger:active {
  background-color: #f5948e !important;
  border-color: #f5948e !important;
  color: #3a0a08 !important;
}
html[data-theme="dark"] .alert-danger .alert-link, html[data-theme="dark"] .alert-danger .close, html[data-theme="dark"] .alert-danger h1, html[data-theme="dark"] .alert-danger h2, html[data-theme="dark"] .alert-danger h3, html[data-theme="dark"] .alert-danger h4, html[data-theme="dark"] .alert-danger h5, html[data-theme="dark"] .alert-danger h6 {
  color: #3a0a08 !important;
}
html[data-theme="dark"] .btn-outline-danger {
  color: #f2766f !important;
  border-color: #f2766f !important;
  background-color: transparent;
}
html[data-theme="dark"] .btn-outline-danger:hover {
  background-color: #f2766f !important;
  color: #3a0a08 !important;
}
html[data-theme="dark"] .text-danger {
  color: #f2766f !important;
}

html[data-theme="dark"] .btn.btn-warning,
html[data-theme="dark"] .btn.btn-warning.text-white,
html[data-theme="dark"] .btn.btn-warning.text-dark,
html[data-theme="dark"] .badge.bg-warning,
html[data-theme="dark"] .alert.bg-warning,
html[data-theme="dark"] .badge.bg-warning.text-white,
html[data-theme="dark"] .alert.bg-warning.text-white,
html[data-theme="dark"] .badge.bg-warning.text-dark,
html[data-theme="dark"] .alert.bg-warning.text-dark,
html[data-theme="dark"] .badge.bg-alt-warning,
html[data-theme="dark"] .alert.bg-alt-warning,
html[data-theme="dark"] .badge.bg-alt-warning.text-white,
html[data-theme="dark"] .alert.bg-alt-warning.text-white,
html[data-theme="dark"] .badge.bg-alt-warning.text-dark,
html[data-theme="dark"] .alert.bg-alt-warning.text-dark,
html[data-theme="dark"] .alert-warning {
  background-color: #f4c75a !important;
  border-color: #f4c75a !important;
  color: #2e2203 !important;
}
html[data-theme="dark"] .btn.btn-warning:hover,
html[data-theme="dark"] .btn.btn-warning:focus,
html[data-theme="dark"] .btn.btn-warning:active {
  background-color: #f7d47d !important;
  border-color: #f7d47d !important;
  color: #2e2203 !important;
}
html[data-theme="dark"] .alert-warning .alert-link, html[data-theme="dark"] .alert-warning .close, html[data-theme="dark"] .alert-warning h1, html[data-theme="dark"] .alert-warning h2, html[data-theme="dark"] .alert-warning h3, html[data-theme="dark"] .alert-warning h4, html[data-theme="dark"] .alert-warning h5, html[data-theme="dark"] .alert-warning h6 {
  color: #2e2203 !important;
}
html[data-theme="dark"] .btn-outline-warning {
  color: #f4c75a !important;
  border-color: #f4c75a !important;
  background-color: transparent;
}
html[data-theme="dark"] .btn-outline-warning:hover {
  background-color: #f4c75a !important;
  color: #2e2203 !important;
}
html[data-theme="dark"] .text-warning {
  color: #f4c75a !important;
}

html[data-theme="dark"] .btn.btn-info,
html[data-theme="dark"] .btn.btn-info.text-white,
html[data-theme="dark"] .btn.btn-info.text-dark,
html[data-theme="dark"] .badge.bg-info,
html[data-theme="dark"] .alert.bg-info,
html[data-theme="dark"] .badge.bg-info.text-white,
html[data-theme="dark"] .alert.bg-info.text-white,
html[data-theme="dark"] .badge.bg-info.text-dark,
html[data-theme="dark"] .alert.bg-info.text-dark,
html[data-theme="dark"] .alert-info {
  background-color: #5ccfe6 !important;
  border-color: #5ccfe6 !important;
  color: #04262e !important;
}
html[data-theme="dark"] .btn.btn-info:hover,
html[data-theme="dark"] .btn.btn-info:focus,
html[data-theme="dark"] .btn.btn-info:active {
  background-color: #80dcee !important;
  border-color: #80dcee !important;
  color: #04262e !important;
}
html[data-theme="dark"] .alert-info .alert-link, html[data-theme="dark"] .alert-info .close, html[data-theme="dark"] .alert-info h1, html[data-theme="dark"] .alert-info h2, html[data-theme="dark"] .alert-info h3, html[data-theme="dark"] .alert-info h4, html[data-theme="dark"] .alert-info h5, html[data-theme="dark"] .alert-info h6 {
  color: #04262e !important;
}
html[data-theme="dark"] .btn-outline-info {
  color: #5ccfe6 !important;
  border-color: #5ccfe6 !important;
  background-color: transparent;
}
html[data-theme="dark"] .btn-outline-info:hover {
  background-color: #5ccfe6 !important;
  color: #04262e !important;
}
html[data-theme="dark"] .text-info {
  color: #5ccfe6 !important;
}

html[data-theme="dark"] .btn.btn-secondary,
html[data-theme="dark"] .btn.btn-secondary.text-white,
html[data-theme="dark"] .btn.btn-secondary.text-dark,
html[data-theme="dark"] .badge.bg-secondary,
html[data-theme="dark"] .alert.bg-secondary,
html[data-theme="dark"] .badge.bg-secondary.text-white,
html[data-theme="dark"] .alert.bg-secondary.text-white,
html[data-theme="dark"] .badge.bg-secondary.text-dark,
html[data-theme="dark"] .alert.bg-secondary.text-dark,
html[data-theme="dark"] .alert-secondary {
  background-color: #8b94a3 !important;
  border-color: #8b94a3 !important;
  color: #14181f !important;
}
html[data-theme="dark"] .btn.btn-secondary:hover,
html[data-theme="dark"] .btn.btn-secondary:focus,
html[data-theme="dark"] .btn.btn-secondary:active {
  background-color: #a4acb9 !important;
  border-color: #a4acb9 !important;
  color: #14181f !important;
}
html[data-theme="dark"] .alert-secondary .alert-link, html[data-theme="dark"] .alert-secondary .close, html[data-theme="dark"] .alert-secondary h1, html[data-theme="dark"] .alert-secondary h2, html[data-theme="dark"] .alert-secondary h3, html[data-theme="dark"] .alert-secondary h4, html[data-theme="dark"] .alert-secondary h5, html[data-theme="dark"] .alert-secondary h6 {
  color: #14181f !important;
}
html[data-theme="dark"] .btn-outline-secondary {
  color: #8b94a3 !important;
  border-color: #8b94a3 !important;
  background-color: transparent;
}
html[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: #8b94a3 !important;
  color: #14181f !important;
}
html[data-theme="dark"] .text-secondary {
  color: #8b94a3 !important;
}

/* the open modal gets a clearly visible border so it separates from the dimmed page behind it */
html[data-theme="dark"] .modal-content {
  border: 1px solid #66708a !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .55) !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  border-color: #4d5565 !important;
}

/* buttons that get their colour from a bg-* class (btn bg-secondary text-white) use the same softened colours */

html[data-theme="dark"] .btn.bg-primary,
html[data-theme="dark"] a.btn.bg-primary,
html[data-theme="dark"] .btn.bg-primary.text-white,
html[data-theme="dark"] a.btn.bg-primary.text-white,
html[data-theme="dark"] .btn.bg-primary.text-dark,
html[data-theme="dark"] a.btn.bg-primary.text-dark {
  background-color: #5b9bf5 !important;
  border-color: #5b9bf5 !important;
  color: #0b1b33 !important;
}

html[data-theme="dark"] .btn.bg-success,
html[data-theme="dark"] a.btn.bg-success,
html[data-theme="dark"] .btn.bg-success.text-white,
html[data-theme="dark"] a.btn.bg-success.text-white,
html[data-theme="dark"] .btn.bg-success.text-dark,
html[data-theme="dark"] a.btn.bg-success.text-dark {
  background-color: #4cc38a !important;
  border-color: #4cc38a !important;
  color: #06281a !important;
}

html[data-theme="dark"] .btn.bg-danger,
html[data-theme="dark"] a.btn.bg-danger,
html[data-theme="dark"] .btn.bg-danger.text-white,
html[data-theme="dark"] a.btn.bg-danger.text-white,
html[data-theme="dark"] .btn.bg-danger.text-dark,
html[data-theme="dark"] a.btn.bg-danger.text-dark {
  background-color: #f2766f !important;
  border-color: #f2766f !important;
  color: #3a0a08 !important;
}

html[data-theme="dark"] .btn.bg-warning,
html[data-theme="dark"] a.btn.bg-warning,
html[data-theme="dark"] .btn.bg-warning.text-white,
html[data-theme="dark"] a.btn.bg-warning.text-white,
html[data-theme="dark"] .btn.bg-warning.text-dark,
html[data-theme="dark"] a.btn.bg-warning.text-dark {
  background-color: #f4c75a !important;
  border-color: #f4c75a !important;
  color: #2e2203 !important;
}

html[data-theme="dark"] .btn.bg-info,
html[data-theme="dark"] a.btn.bg-info,
html[data-theme="dark"] .btn.bg-info.text-white,
html[data-theme="dark"] a.btn.bg-info.text-white,
html[data-theme="dark"] .btn.bg-info.text-dark,
html[data-theme="dark"] a.btn.bg-info.text-dark {
  background-color: #5ccfe6 !important;
  border-color: #5ccfe6 !important;
  color: #04262e !important;
}

html[data-theme="dark"] .btn.bg-secondary,
html[data-theme="dark"] a.btn.bg-secondary,
html[data-theme="dark"] .btn.bg-secondary.text-white,
html[data-theme="dark"] a.btn.bg-secondary.text-white,
html[data-theme="dark"] .btn.bg-secondary.text-dark,
html[data-theme="dark"] a.btn.bg-secondary.text-dark {
  background-color: #8b94a3 !important;
  border-color: #8b94a3 !important;
  color: #14181f !important;
}

/* tabs: readable text and a dark hover border (the light theme hover border is almost white) */
html[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--d-soft);
  border-color: transparent;
  background-color: transparent;
}

html[data-theme="dark"] .nav-tabs .nav-link:hover,
html[data-theme="dark"] .nav-tabs .nav-link:focus {
  color: #fff;
  background-color: var(--d-raised);
  border-color: var(--d-border) var(--d-border) transparent;
  isolation: isolate;
}

html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-link.active:hover {
  color: #7eb2f8;
  background-color: var(--d-surface);
  border-color: var(--d-border) var(--d-border) var(--d-surface);
}

html[data-theme="dark"] .nav-pills .nav-link:not(.active):not(.btn-primary) {
  color: var(--d-soft);
}

html[data-theme="dark"] .nav-pills .nav-link:not(.active):not(.btn-primary):hover {
  color: #fff;
  background-color: var(--d-raised);
}

/* BACK buttons keep their own look, the softened btn-primary colour must not override .backbtn, the same colour as in light mode (the dark blue-black with white text) */
html[data-theme="dark"] .btn.btn-primary.backbtn,
html[data-theme="dark"] .btn.backbtn,
html[data-theme="dark"] a.btn.backbtn {
  background-color: #313647 !important;
  border-color: #313647 !important;
  color: #fff !important;
}

html[data-theme="dark"] .btn.btn-primary.backbtn:hover,
html[data-theme="dark"] .btn.backbtn:hover,
html[data-theme="dark"] .btn.backbtn:focus {
  background-color: rgba(49, 54, 71, 0.8) !important;
  border-color: rgba(49, 54, 71, 0.8) !important;
  color: #fff !important;
}

/* dark mode switch: knob slides to the right and shows the moon */
html[data-theme="dark"] .theme-switch {
  background: #1b1f27;
  border-color: #4d5565;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
}

html[data-theme="dark"] .theme-switch .theme-knob {
  transform: translateX(28px);
  background: #333946;
}

html[data-theme="dark"] .theme-switch .sun {
  display: none;
}

html[data-theme="dark"] .theme-switch .moon {
  display: block;
}

/* login page */
html[data-theme="dark"] .login-page,
html[data-theme="dark"] .login-wrap {
  background-color: var(--d-bg) !important;
  color: var(--d-text);
}

html[data-theme="dark"] .login-wrap .login-form-box {
  border-color: var(--d-border) !important;
  background-color: var(--d-surface);
}

html[data-theme="dark"] .login-wrap .input-group-text {
  background-color: var(--d-raised) !important;
  border-color: var(--d-border);
  color: var(--d-soft);
}

html[data-theme="dark"] .login-wrap .form-control {
  background-color: var(--d-raised);
  color: var(--d-text);
  border-color: var(--d-border);
}

/* icons and spans inside the softened coloured buttons, tags and alerts follow the button text colour (they carry text-white / text-dark of their own) */

html[data-theme="dark"] .btn.btn-primary i,
html[data-theme="dark"] .btn.btn-primary svg,
html[data-theme="dark"] .btn.btn-primary span.text-white,
html[data-theme="dark"] .btn.btn-primary span.text-dark,
html[data-theme="dark"] .btn.btn-primary i.text-white,
html[data-theme="dark"] .btn.btn-primary i.text-dark,
html[data-theme="dark"] .btn.btn-primary .fa,
html[data-theme="dark"] .btn.btn-primary .fas,
html[data-theme="dark"] .btn.btn-primary .far,
html[data-theme="dark"] .btn.bg-primary i,
html[data-theme="dark"] .btn.bg-primary svg,
html[data-theme="dark"] .btn.bg-primary span.text-white,
html[data-theme="dark"] .btn.bg-primary span.text-dark,
html[data-theme="dark"] .btn.bg-primary i.text-white,
html[data-theme="dark"] .btn.bg-primary i.text-dark,
html[data-theme="dark"] .btn.bg-primary .fa,
html[data-theme="dark"] .btn.bg-primary .fas,
html[data-theme="dark"] .btn.bg-primary .far,
html[data-theme="dark"] .badge.bg-primary i,
html[data-theme="dark"] .badge.bg-primary svg,
html[data-theme="dark"] .badge.bg-primary span.text-white,
html[data-theme="dark"] .badge.bg-primary span.text-dark,
html[data-theme="dark"] .badge.bg-primary i.text-white,
html[data-theme="dark"] .badge.bg-primary i.text-dark,
html[data-theme="dark"] .badge.bg-primary .fa,
html[data-theme="dark"] .badge.bg-primary .fas,
html[data-theme="dark"] .badge.bg-primary .far,
html[data-theme="dark"] .alert-primary i,
html[data-theme="dark"] .alert-primary svg,
html[data-theme="dark"] .alert-primary span.text-white,
html[data-theme="dark"] .alert-primary span.text-dark,
html[data-theme="dark"] .alert-primary i.text-white,
html[data-theme="dark"] .alert-primary i.text-dark,
html[data-theme="dark"] .alert-primary .fa,
html[data-theme="dark"] .alert-primary .fas,
html[data-theme="dark"] .alert-primary .far,
html[data-theme="dark"] .btn.btn-success i,
html[data-theme="dark"] .btn.btn-success svg,
html[data-theme="dark"] .btn.btn-success span.text-white,
html[data-theme="dark"] .btn.btn-success span.text-dark,
html[data-theme="dark"] .btn.btn-success i.text-white,
html[data-theme="dark"] .btn.btn-success i.text-dark,
html[data-theme="dark"] .btn.btn-success .fa,
html[data-theme="dark"] .btn.btn-success .fas,
html[data-theme="dark"] .btn.btn-success .far,
html[data-theme="dark"] .btn.bg-success i,
html[data-theme="dark"] .btn.bg-success svg,
html[data-theme="dark"] .btn.bg-success span.text-white,
html[data-theme="dark"] .btn.bg-success span.text-dark,
html[data-theme="dark"] .btn.bg-success i.text-white,
html[data-theme="dark"] .btn.bg-success i.text-dark,
html[data-theme="dark"] .btn.bg-success .fa,
html[data-theme="dark"] .btn.bg-success .fas,
html[data-theme="dark"] .btn.bg-success .far,
html[data-theme="dark"] .badge.bg-success i,
html[data-theme="dark"] .badge.bg-success svg,
html[data-theme="dark"] .badge.bg-success span.text-white,
html[data-theme="dark"] .badge.bg-success span.text-dark,
html[data-theme="dark"] .badge.bg-success i.text-white,
html[data-theme="dark"] .badge.bg-success i.text-dark,
html[data-theme="dark"] .badge.bg-success .fa,
html[data-theme="dark"] .badge.bg-success .fas,
html[data-theme="dark"] .badge.bg-success .far,
html[data-theme="dark"] .alert-success i,
html[data-theme="dark"] .alert-success svg,
html[data-theme="dark"] .alert-success span.text-white,
html[data-theme="dark"] .alert-success span.text-dark,
html[data-theme="dark"] .alert-success i.text-white,
html[data-theme="dark"] .alert-success i.text-dark,
html[data-theme="dark"] .alert-success .fa,
html[data-theme="dark"] .alert-success .fas,
html[data-theme="dark"] .alert-success .far,
html[data-theme="dark"] .btn.btn-danger i,
html[data-theme="dark"] .btn.btn-danger svg,
html[data-theme="dark"] .btn.btn-danger span.text-white,
html[data-theme="dark"] .btn.btn-danger span.text-dark,
html[data-theme="dark"] .btn.btn-danger i.text-white,
html[data-theme="dark"] .btn.btn-danger i.text-dark,
html[data-theme="dark"] .btn.btn-danger .fa,
html[data-theme="dark"] .btn.btn-danger .fas,
html[data-theme="dark"] .btn.btn-danger .far,
html[data-theme="dark"] .btn.bg-danger i,
html[data-theme="dark"] .btn.bg-danger svg,
html[data-theme="dark"] .btn.bg-danger span.text-white,
html[data-theme="dark"] .btn.bg-danger span.text-dark,
html[data-theme="dark"] .btn.bg-danger i.text-white,
html[data-theme="dark"] .btn.bg-danger i.text-dark,
html[data-theme="dark"] .btn.bg-danger .fa,
html[data-theme="dark"] .btn.bg-danger .fas,
html[data-theme="dark"] .btn.bg-danger .far,
html[data-theme="dark"] .badge.bg-danger i,
html[data-theme="dark"] .badge.bg-danger svg,
html[data-theme="dark"] .badge.bg-danger span.text-white,
html[data-theme="dark"] .badge.bg-danger span.text-dark,
html[data-theme="dark"] .badge.bg-danger i.text-white,
html[data-theme="dark"] .badge.bg-danger i.text-dark,
html[data-theme="dark"] .badge.bg-danger .fa,
html[data-theme="dark"] .badge.bg-danger .fas,
html[data-theme="dark"] .badge.bg-danger .far,
html[data-theme="dark"] .alert-danger i,
html[data-theme="dark"] .alert-danger svg,
html[data-theme="dark"] .alert-danger span.text-white,
html[data-theme="dark"] .alert-danger span.text-dark,
html[data-theme="dark"] .alert-danger i.text-white,
html[data-theme="dark"] .alert-danger i.text-dark,
html[data-theme="dark"] .alert-danger .fa,
html[data-theme="dark"] .alert-danger .fas,
html[data-theme="dark"] .alert-danger .far,
html[data-theme="dark"] .btn.btn-warning i,
html[data-theme="dark"] .btn.btn-warning svg,
html[data-theme="dark"] .btn.btn-warning span.text-white,
html[data-theme="dark"] .btn.btn-warning span.text-dark,
html[data-theme="dark"] .btn.btn-warning i.text-white,
html[data-theme="dark"] .btn.btn-warning i.text-dark,
html[data-theme="dark"] .btn.btn-warning .fa,
html[data-theme="dark"] .btn.btn-warning .fas,
html[data-theme="dark"] .btn.btn-warning .far,
html[data-theme="dark"] .btn.bg-warning i,
html[data-theme="dark"] .btn.bg-warning svg,
html[data-theme="dark"] .btn.bg-warning span.text-white,
html[data-theme="dark"] .btn.bg-warning span.text-dark,
html[data-theme="dark"] .btn.bg-warning i.text-white,
html[data-theme="dark"] .btn.bg-warning i.text-dark,
html[data-theme="dark"] .btn.bg-warning .fa,
html[data-theme="dark"] .btn.bg-warning .fas,
html[data-theme="dark"] .btn.bg-warning .far,
html[data-theme="dark"] .badge.bg-warning i,
html[data-theme="dark"] .badge.bg-warning svg,
html[data-theme="dark"] .badge.bg-warning span.text-white,
html[data-theme="dark"] .badge.bg-warning span.text-dark,
html[data-theme="dark"] .badge.bg-warning i.text-white,
html[data-theme="dark"] .badge.bg-warning i.text-dark,
html[data-theme="dark"] .badge.bg-warning .fa,
html[data-theme="dark"] .badge.bg-warning .fas,
html[data-theme="dark"] .badge.bg-warning .far,
html[data-theme="dark"] .alert-warning i,
html[data-theme="dark"] .alert-warning svg,
html[data-theme="dark"] .alert-warning span.text-white,
html[data-theme="dark"] .alert-warning span.text-dark,
html[data-theme="dark"] .alert-warning i.text-white,
html[data-theme="dark"] .alert-warning i.text-dark,
html[data-theme="dark"] .alert-warning .fa,
html[data-theme="dark"] .alert-warning .fas,
html[data-theme="dark"] .alert-warning .far,
html[data-theme="dark"] .btn.btn-info i,
html[data-theme="dark"] .btn.btn-info svg,
html[data-theme="dark"] .btn.btn-info span.text-white,
html[data-theme="dark"] .btn.btn-info span.text-dark,
html[data-theme="dark"] .btn.btn-info i.text-white,
html[data-theme="dark"] .btn.btn-info i.text-dark,
html[data-theme="dark"] .btn.btn-info .fa,
html[data-theme="dark"] .btn.btn-info .fas,
html[data-theme="dark"] .btn.btn-info .far,
html[data-theme="dark"] .btn.bg-info i,
html[data-theme="dark"] .btn.bg-info svg,
html[data-theme="dark"] .btn.bg-info span.text-white,
html[data-theme="dark"] .btn.bg-info span.text-dark,
html[data-theme="dark"] .btn.bg-info i.text-white,
html[data-theme="dark"] .btn.bg-info i.text-dark,
html[data-theme="dark"] .btn.bg-info .fa,
html[data-theme="dark"] .btn.bg-info .fas,
html[data-theme="dark"] .btn.bg-info .far,
html[data-theme="dark"] .badge.bg-info i,
html[data-theme="dark"] .badge.bg-info svg,
html[data-theme="dark"] .badge.bg-info span.text-white,
html[data-theme="dark"] .badge.bg-info span.text-dark,
html[data-theme="dark"] .badge.bg-info i.text-white,
html[data-theme="dark"] .badge.bg-info i.text-dark,
html[data-theme="dark"] .badge.bg-info .fa,
html[data-theme="dark"] .badge.bg-info .fas,
html[data-theme="dark"] .badge.bg-info .far,
html[data-theme="dark"] .alert-info i,
html[data-theme="dark"] .alert-info svg,
html[data-theme="dark"] .alert-info span.text-white,
html[data-theme="dark"] .alert-info span.text-dark,
html[data-theme="dark"] .alert-info i.text-white,
html[data-theme="dark"] .alert-info i.text-dark,
html[data-theme="dark"] .alert-info .fa,
html[data-theme="dark"] .alert-info .fas,
html[data-theme="dark"] .alert-info .far,
html[data-theme="dark"] .btn.btn-secondary i,
html[data-theme="dark"] .btn.btn-secondary svg,
html[data-theme="dark"] .btn.btn-secondary span.text-white,
html[data-theme="dark"] .btn.btn-secondary span.text-dark,
html[data-theme="dark"] .btn.btn-secondary i.text-white,
html[data-theme="dark"] .btn.btn-secondary i.text-dark,
html[data-theme="dark"] .btn.btn-secondary .fa,
html[data-theme="dark"] .btn.btn-secondary .fas,
html[data-theme="dark"] .btn.btn-secondary .far,
html[data-theme="dark"] .btn.bg-secondary i,
html[data-theme="dark"] .btn.bg-secondary svg,
html[data-theme="dark"] .btn.bg-secondary span.text-white,
html[data-theme="dark"] .btn.bg-secondary span.text-dark,
html[data-theme="dark"] .btn.bg-secondary i.text-white,
html[data-theme="dark"] .btn.bg-secondary i.text-dark,
html[data-theme="dark"] .btn.bg-secondary .fa,
html[data-theme="dark"] .btn.bg-secondary .fas,
html[data-theme="dark"] .btn.bg-secondary .far,
html[data-theme="dark"] .badge.bg-secondary i,
html[data-theme="dark"] .badge.bg-secondary svg,
html[data-theme="dark"] .badge.bg-secondary span.text-white,
html[data-theme="dark"] .badge.bg-secondary span.text-dark,
html[data-theme="dark"] .badge.bg-secondary i.text-white,
html[data-theme="dark"] .badge.bg-secondary i.text-dark,
html[data-theme="dark"] .badge.bg-secondary .fa,
html[data-theme="dark"] .badge.bg-secondary .fas,
html[data-theme="dark"] .badge.bg-secondary .far,
html[data-theme="dark"] .alert-secondary i,
html[data-theme="dark"] .alert-secondary svg,
html[data-theme="dark"] .alert-secondary span.text-white,
html[data-theme="dark"] .alert-secondary span.text-dark,
html[data-theme="dark"] .alert-secondary i.text-white,
html[data-theme="dark"] .alert-secondary i.text-dark,
html[data-theme="dark"] .alert-secondary .fa,
html[data-theme="dark"] .alert-secondary .fas,
html[data-theme="dark"] .alert-secondary .far {
  color: inherit !important;
}

/* login button is white in dark mode */
html[data-theme="dark"] .login-wrap .btn-login,
html[data-theme="dark"] .login-wrap .btn-login:disabled {
  background-color: #fff !important;
  border-color: #fff !important;
  color: #1f2937 !important;
}

html[data-theme="dark"] .login-wrap .btn-login:hover,
html[data-theme="dark"] .login-wrap .btn-login:focus,
html[data-theme="dark"] .login-wrap .btn-login:active,
html[data-theme="dark"] .login-wrap .btn-login:disabled:hover,
html[data-theme="dark"] .login-wrap .btn-login:disabled:focus {
  background-color: #e5e7eb !important;
  border-color: #e5e7eb !important;
  color: #1f2937 !important;
}

/* Choices.js (the "filter items" multi select) */
html[data-theme="dark"] .choices {
  color: var(--d-text);
}

html[data-theme="dark"] .choices__inner,
html[data-theme="dark"] .is-focused .choices__inner,
html[data-theme="dark"] .is-open .choices__inner {
  background-color: var(--d-raised) !important;
  border-color: var(--d-border) !important;
  color: var(--d-text);
}

html[data-theme="dark"] .choices__input,
html[data-theme="dark"] .choices__input--cloned {
  background-color: transparent !important;
  color: var(--d-text) !important;
}

html[data-theme="dark"] .choices__input::placeholder {
  color: var(--d-muted);
}

html[data-theme="dark"] .choices__list--dropdown,
html[data-theme="dark"] .choices__list[aria-expanded] {
  background-color: var(--d-surface) !important;
  border-color: #66708a !important;
  color: var(--d-text) !important;
}

html[data-theme="dark"] .choices__list--dropdown .choices__item,
html[data-theme="dark"] .choices__list[aria-expanded] .choices__item {
  background-color: transparent;
  color: var(--d-text) !important;
}

html[data-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted,
html[data-theme="dark"] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: var(--d-raised) !important;
  color: #fff !important;
}

html[data-theme="dark"] .choices__list--dropdown .choices__item--disabled,
html[data-theme="dark"] .choices__placeholder {
  color: var(--d-muted) !important;
  opacity: 1;
}

html[data-theme="dark"] .choices[data-type*="select-one"] .choices__input {
  background-color: var(--d-surface) !important;
  border-bottom-color: var(--d-border);
}

html[data-theme="dark"] .choices__list--dropdown::-webkit-scrollbar-track {
  background: var(--d-surface);
}

/* drawers (offcanvas) get the same visible edge as modals */
html[data-theme="dark"] .offcanvas {
  box-shadow: 0 0 48px rgba(0, 0, 0, .55);
}

html[data-theme="dark"] .offcanvas-bottom {
  border-top: 1px solid #66708a !important;
}

html[data-theme="dark"] .offcanvas-top {
  border-bottom: 1px solid #66708a !important;
}

html[data-theme="dark"] .offcanvas-start {
  border-right: 1px solid #66708a !important;
}

html[data-theme="dark"] .offcanvas-end {
  border-left: 1px solid #66708a !important;
}

html[data-theme="dark"] .offcanvas-header {
  border-bottom: 1px solid #4d5565;
}

/* ------------------- Text that was dark on dark ------------------- */

/* plain tags / pills (e.g. "Per item: 497.00", the part number and alt pills) */
html[data-theme="dark"] .badge:not([class*="bg-"]):not([class*="badge-primary"]):not([class*="badge-success"]):not([class*="badge-danger"]):not([class*="badge-warning"]):not([class*="badge-info"]):not([class*="badge-secondary"]):not([class*="badge-dark"]):not(.text-white) {
  background-color: var(--d-raised) !important;
  border: 1px solid var(--d-border);
  color: var(--d-text) !important;
}

/* the same pills when they sit in a link */
html[data-theme="dark"] a.badge:not([class*="bg-"]) {
  color: var(--d-text) !important;
}

/* info boxes: the small labels (QTY REQ ...) and the numbers */
html[data-theme="dark"] .info-box-text:not([class*="text-alt"]):not([class*="text-success"]):not([class*="text-danger"]):not([class*="text-warning"]),
html[data-theme="dark"] .info-box-number:not([class*="text-alt"]):not([class*="text-success"]):not([class*="text-danger"]):not([class*="text-warning"]),
html[data-theme="dark"] .info-box .progress-description {
  color: var(--d-text);
}

/* grey / black utility colours the app uses for sub text under titles */
html[data-theme="dark"] .text-gray,
html[data-theme="dark"] .text-gray-dark,
html[data-theme="dark"] .text-black-50,
html[data-theme="dark"] .text-dark-50,
html[data-theme="dark"] .text-navy,
html[data-theme="dark"] .card-subtitle,
html[data-theme="dark"] .card-header small,
html[data-theme="dark"] .card-header p,
html[data-theme="dark"] .card-header .small {
  color: var(--d-soft) !important;
}

/* inside tables all plain text is white (coloured text, links, tags and buttons keep their colour) */
html[data-theme="dark"] table td,
html[data-theme="dark"] table th {
  color: var(--d-text);
}

html[data-theme="dark"] table td :is(span, div, p, small, b, strong, i, em, label):not([class*="text-"]):not([class*="badge"]):not([class*="btn"]):not([class*="bg-"]):not([class*="fa"]) {
  color: inherit;
}

/* labels inside table cells (TOTAL QUOTE, TOTAL COST ...) are white too, not muted grey */
html[data-theme="dark"] table td.text-muted,
html[data-theme="dark"] table td .text-muted,
html[data-theme="dark"] table td.text-secondary,
html[data-theme="dark"] table td .text-secondary,
html[data-theme="dark"] table td.text-body-secondary,
html[data-theme="dark"] table td .text-body-secondary {
  color: var(--d-text) !important;
}

/* links inside tags (the quote ref in the past quotes table) follow the tag text colour */
html[data-theme="dark"] .badge a,
html[data-theme="dark"] .badge a:hover,
html[data-theme="dark"] .badge.bg-light a {
  color: inherit !important;
}

/* labels of small stat cards (IN STOCK, IN DELIVERY ...) are white, not muted grey */
html[data-theme="dark"] .border.rounded > .text-muted,
html[data-theme="dark"] .border.rounded > div > .text-muted,
html[data-theme="dark"] .info-box .text-muted {
  color: var(--d-text) !important;
}

/* small light chips outside cards (the alt part numbers in the item drawers) */
html[data-theme="dark"] .bg-light:not(.badge):not(.btn):not(.info-box):not(.navbar):not(.card):not(.card-header):not(.card-footer):not(.modal-content) {
  background-color: var(--d-raised) !important;
  color: var(--d-text) !important;
  border: 1px solid var(--d-border);
}

/* stat cards: a different (raised) background from the card they sit in */
html[data-theme="dark"] .card .card,
html[data-theme="dark"] .card-body .card,
html[data-theme="dark"] div.border.rounded:not(.avatar):not(.badge):not(.btn):not(.form-control) {
  background-color: var(--d-raised) !important;
  border-color: var(--d-border) !important;
}

/* stat cards inside drawers (they are top-level .card elements there, not nested in another card) */
html[data-theme="dark"] .offcanvas .card,
html[data-theme="dark"] .offcanvas-body .card,
html[data-theme="dark"] .offcanvas .info-box {
  background-color: var(--d-raised) !important;
  border-color: var(--d-border) !important;
}

html[data-theme="dark"] .info-box-text.text-muted,
html[data-theme="dark"] .info-box-number.text-muted {
  color: var(--d-text) !important;
}

/* same stat cards again, with a stronger selector in case another rule was winning */
html[data-theme="dark"][data-theme] body .half-drawer .card,
html[data-theme="dark"][data-theme] body .half-drawer .card.border,
html[data-theme="dark"][data-theme] body .half-drawer .card-body,
html[data-theme="dark"][data-theme] body .offcanvas .card.border,
html[data-theme="dark"][data-theme] body .offcanvas .card > .card-body {
  background: #3a4150 !important;
  border-color: #4d5565 !important;
}

html[data-theme="dark"][data-theme] body .half-drawer {
  background: #20242c !important;
}

/* a card inside a card: its body is see-through so it shows the card's own shade (no darker strip in the middle) */
html[data-theme="dark"] .card .card .card-body,
html[data-theme="dark"] .card-body .card .card-body,
html[data-theme="dark"] .card .card .card-header,
html[data-theme="dark"] .card .card .card-footer {
  background-color: transparent !important;
}

/* plain <small> sub text (under the RFQR title and similar) */
html[data-theme="dark"] small:not([class*="text-"]):not([class*="badge"]):not([class*="btn"]):not([class*="bg-"]),
html[data-theme="dark"] .small:not([class*="text-"]):not([class*="badge"]):not([class*="btn"]):not([class*="bg-"]) {
  color: var(--d-soft) !important;
}

/* AdminLTE .invoice panel (the issuance modal body is white by default) */
html[data-theme="dark"] .invoice,
html[data-theme="dark"] .invoice-col,
html[data-theme="dark"] .invoice-info {
  background-color: transparent !important;
  color: var(--d-text);
  border-color: var(--d-border) !important;
}

html[data-theme="dark"] .modal-body {
  background-color: var(--d-surface);
  color: var(--d-text);
}

/* buttons coloured with bg-alt-* (the orange truck button) have no white border */
html[data-theme="dark"] .btn[class*="bg-alt-"],
html[data-theme="dark"] a.btn[class*="bg-alt-"] {
  border-color: transparent !important;
}

/* collapsible headers (credentials list): the link is text-white on a header that is white in light mode */
html[data-theme="dark"] .card-header.bg-white a,
html[data-theme="dark"] .card-header.bg-white a.text-white,
html[data-theme="dark"] .card-header.bg-white .text-white,
html[data-theme="dark"] .card-header.bg-white small,
html[data-theme="dark"] .card-header.bg-white i {
  color: var(--d-text) !important;
}

/* coloured table rows (red = cancelled, yellow = return stock, grey = used) keep a tint in dark mode.
   the plain dark cell background above would otherwise hide the row colour */
html[data-theme="dark"][data-theme] body table > tbody > tr.stock-cancel > td,
html[data-theme="dark"][data-theme] body table > tbody > tr.stock-cancel > th,
html[data-theme="dark"][data-theme] body table > tbody > tr.table-danger > td,
html[data-theme="dark"][data-theme] body table > tbody > tr.table-danger > th {
  background-color: #7a3a44 !important;
}

html[data-theme="dark"][data-theme] body table > tbody > tr.stock-return-row > td,
html[data-theme="dark"][data-theme] body table > tbody > tr.stock-return-row > th,
html[data-theme="dark"][data-theme] body table > tbody > tr.table-warning > td,
html[data-theme="dark"][data-theme] body table > tbody > tr.table-warning > th {
  background-color: #6a6330 !important;
}

html[data-theme="dark"][data-theme] body table > tbody > tr.table-success > td,
html[data-theme="dark"][data-theme] body table > tbody > tr.table-success > th {
  background-color: #1f4030 !important;
}

html[data-theme="dark"][data-theme] body table > tbody > tr.table-info > td,
html[data-theme="dark"][data-theme] body table > tbody > tr.table-info > th {
  background-color: #1d3c47 !important;
}

html[data-theme="dark"][data-theme] body table > tbody > tr.used-row > td,
html[data-theme="dark"][data-theme] body table > tbody > tr.table-active > td {
  background-color: #3d4350 !important;
}

/* QTY RETURN / QTY ISSUED labels have an inline yellow background, so they keep dark text */
html[data-theme="dark"] .input-group-text[style*="F5F591"],
html[data-theme="dark"] .input-group-text[style*="f5f591"] {
  color: #1f2937 !important;
}

/* links inside the tinted rows are lighter so they stay readable on the brighter background */
html[data-theme="dark"][data-theme] body table > tbody > tr.stock-cancel a:not(.btn),
html[data-theme="dark"][data-theme] body table > tbody > tr.table-danger a:not(.btn) {
  color: #ffd0d4 !important;
}

html[data-theme="dark"][data-theme] body table > tbody > tr.stock-return-row a:not(.btn),
html[data-theme="dark"][data-theme] body table > tbody > tr.table-warning a:not(.btn) {
  color: #fff5bd !important;
}

/* logistics list: monitored rows (yellow) and draft rows (grey) are coloured with an inline style on the row */
html[data-theme="dark"][data-theme] body table > tbody > tr[style*="255, 254, 224"] > td,
html[data-theme="dark"][data-theme] body table > tbody > tr[style*="FFFEE0"] > td,
html[data-theme="dark"][data-theme] body table > tbody > tr[style*="ffffe0"] > td {
  background-color: #6a6330 !important;
}

html[data-theme="dark"][data-theme] body table > tbody > tr[style*="237, 238, 240"] > td,
html[data-theme="dark"][data-theme] body table > tbody > tr[style*="EDEEF0"] > td {
  background-color: #454c5a !important;
}

html[data-theme="dark"][data-theme] body table > tbody > tr[style*="255, 254, 224"] a:not(.btn),
html[data-theme="dark"][data-theme] body table > tbody > tr[style*="FFFEE0"] a:not(.btn) {
  color: #fff5bd !important;
}

/* the legend dots under the filters */
html[data-theme="dark"] .rounded-circle[style*="FFFEE0"] {
  background: #6a6330 !important;
  border-color: #8a8340 !important;
}

html[data-theme="dark"] .rounded-circle[style*="EDEEF0"] {
  background: #454c5a !important;
  border-color: #5d6679 !important;
}

/* other tables that colour their rows */

/* red: cancel-row (PO / invoice items), set-archieved (shipping gear sets), the issuance modal rows with no quantity */
html[data-theme="dark"][data-theme] body table > tbody > tr.cancel-row > td,
html[data-theme="dark"][data-theme] body table > tbody > tr.cancel-row > th,
html[data-theme="dark"][data-theme] body table > tbody > tr.set-archieved > td,
html[data-theme="dark"][data-theme] body table > tbody > tr.set-archieved > th,
html[data-theme="dark"][data-theme] body table > tbody > tr[style*="F7C6C5" i] > td {
  background-color: #7a3a44 !important;
}

html[data-theme="dark"][data-theme] body table > tbody > tr.cancel-row a:not(.btn),
html[data-theme="dark"][data-theme] body table > tbody > tr.set-archieved a:not(.btn),
html[data-theme="dark"][data-theme] body table > tbody > tr[style*="F7C6C5" i] a:not(.btn) {
  color: #ffd0d4 !important;
}

/* grey: expense claims with status 2 (inline #eaebed) */
html[data-theme="dark"][data-theme] body table > tbody > tr[style*="234, 235, 237"] > td,
html[data-theme="dark"][data-theme] body table > tbody > tr[style*="EAEBED" i] > td {
  background-color: #454c5a !important;
}

/* read notifications (inline #f1f3f5) are dimmer than the unread ones */
html[data-theme="dark"][data-theme] body table > tbody > tr[style*="241, 243, 245"] > td,
html[data-theme="dark"][data-theme] body table > tbody > tr[style*="F1F3F5" i] > td {
  background-color: #1f232a !important;
  color: var(--d-muted) !important;
}

/* header-like rows inside a table body (bg-secondary text-white) */
html[data-theme="dark"][data-theme] body table > tbody > tr.bg-secondary > td,
html[data-theme="dark"][data-theme] body table > tbody > tr.bg-secondary > th {
  background-color: #3b4352 !important;
  color: #fff !important;
}

/* toastr messages are fully opaque in dark mode (the default is 80%) and have no glow, nothing else changes */
html[data-theme="dark"] #toast-container > div,
html[data-theme="dark"] #toast-container > div:hover {
  opacity: 1 !important;
  box-shadow: none !important;
}

/* toastr colours in dark mode: deep jewel fills with light text */
html[data-theme="dark"] #toast-container > .toast-success {
  background-color: #1f7a55 !important;
  color: #e6fff3 !important;
}

html[data-theme="dark"] #toast-container > .toast-error {
  background-color: #a83a3a !important;
  color: #fff0f0 !important;
}

html[data-theme="dark"] #toast-container > .toast-warning {
  background-color: #a8741a !important;
  color: #fff6e0 !important;
}

html[data-theme="dark"] #toast-container > .toast-info {
  background-color: #1f6c8a !important;
  color: #e6f7ff !important;
}

html[data-theme="dark"] #toast-container > div .toast-message,
html[data-theme="dark"] #toast-container > div .toast-title,
html[data-theme="dark"] #toast-container > div .toast-close-button {
  color: inherit !important;
}

/* text inside a grey tag follows the tag's dark text (e.g. permission subcategory pills) */
html[data-theme="dark"] .badge.bg-secondary small,
html[data-theme="dark"] .badge.bg-secondary small.text-white {
  color: #1f2937 !important;
}

/* thicker, brighter text so small grey tags stay readable */
html[data-theme="dark"] .badge.bg-secondary small {
  font-weight: 700 !important;
}
html[data-theme="dark"] .badge.bg-light {
  font-weight: 700 !important;
  color: #ffffff !important;
}

/* active tab text is white in dark mode */
html[data-theme="dark"][data-theme] .nav-tabs .nav-link.active,
html[data-theme="dark"][data-theme] .nav-tabs .nav-link.active:hover,
html[data-theme="dark"][data-theme] .nav-tabs .nav-item.show .nav-link {
  color: #ffffff !important;
}

/* grey section bar (e.g. BIODATA on edit profile) keeps its light background, with dark bold text */
html[data-theme="dark"][data-theme] h6.text-uppercase.text-muted[style*="e5e7eb" i] {
  color: #000000 !important;
  font-weight: 700 !important;
}

/* header avatar: the box behind the picture is dark, so there is no white flash while the image loads on each page */
html[data-theme="dark"] .main-header .avatar {
  background: var(--d-raised) !important;
}

/* section headings (blockquote) and the helicopter timeline cards on the company page */
html[data-theme="dark"][data-theme] blockquote {
  background-color: var(--d-raised) !important;
  color: var(--d-text) !important;
  border-color: var(--d-border);
  border-left-color: var(--bs-primary);
}

html[data-theme="dark"][data-theme] blockquote h2,
html[data-theme="dark"][data-theme] blockquote h5 {
  color: var(--d-text) !important;
}

html[data-theme="dark"][data-theme] .timeline::before {
  background-color: var(--d-border);
}

html[data-theme="dark"][data-theme] .timeline > div > .timeline-item {
  background-color: var(--d-raised) !important;
  color: var(--d-text) !important;
  border: 1px solid var(--d-border);
  box-shadow: none;
}

html[data-theme="dark"][data-theme] .timeline > div > .timeline-item > .timeline-header {
  color: var(--d-text);
  border-bottom-color: var(--d-border);
}

html[data-theme="dark"][data-theme] .timeline > div > .timeline-item > .timeline-footer {
  background: transparent;
}

/* inputs inside a raised box (bordered section, nested card, drawer card) are one shade darker, so they do not blend into the box */
html[data-theme="dark"][data-theme] div.border.rounded:not(.avatar):not(.badge):not(.btn):not(.form-control) .form-control:not(:disabled):not([readonly]),
html[data-theme="dark"][data-theme] div.border.rounded:not(.avatar):not(.badge):not(.btn):not(.form-control) .form-select,
html[data-theme="dark"][data-theme] div.border.rounded:not(.avatar):not(.badge):not(.btn):not(.form-control) textarea,
html[data-theme="dark"][data-theme] div.border.rounded:not(.avatar):not(.badge):not(.btn):not(.form-control) .select2-container--default .select2-selection--single,
html[data-theme="dark"][data-theme] div.border.rounded:not(.avatar):not(.badge):not(.btn):not(.form-control) .select2-container--default .select2-selection--multiple,
html[data-theme="dark"][data-theme] .card .card .form-control:not(:disabled):not([readonly]),
html[data-theme="dark"][data-theme] .card .card .form-select,
html[data-theme="dark"][data-theme] .card .card textarea,
html[data-theme="dark"][data-theme] .offcanvas .card .form-control:not(:disabled):not([readonly]),
html[data-theme="dark"][data-theme] .offcanvas .card .form-select,
html[data-theme="dark"][data-theme] .offcanvas .card textarea {
  background-color: var(--d-surface) !important;
}

/* bordered tables show the line between rows too, not only between columns */
html[data-theme="dark"][data-theme] .table-bordered > :not(caption) > * {
  border-color: var(--d-border) !important;
}

html[data-theme="dark"][data-theme] .table-bordered > :not(caption) > * > * {
  border-bottom: 1px solid var(--d-border) !important;
}

/* the date on today's attendance is white on dark mode */
html[data-theme="dark"][data-theme] h3.attendance-today-date {
  color: #fff !important;
}

/* the remark under the name on today's attendance is muted grey, the table cell text rule would make it as bright as the name */
html[data-theme="dark"][data-theme] table td .attendance-remark {
  color: var(--d-muted) !important;
}

/* the error pages use the darker page background, not the lighter card colour */
html[data-theme="dark"][data-theme] .hh-error-page {
  background-color: var(--d-bg) !important;
}

/* ------------------- Autofill ------------------- */
/* the browser paints its own background and text colour on a field it filled in (a saved username or password), so the text could end up the same colour as the background and look empty, the colours are set here so they cannot clash */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] input:-webkit-autofill:active,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill {
  -webkit-text-fill-color: var(--d-text) !important;
  caret-color: var(--d-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--d-raised) inset !important;
  box-shadow: 0 0 0 1000px var(--d-raised) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

html[data-theme="dark"] input:autofill,
html[data-theme="dark"] textarea:autofill,
html[data-theme="dark"] select:autofill {
  -webkit-text-fill-color: var(--d-text) !important;
  caret-color: var(--d-text) !important;
  box-shadow: 0 0 0 1000px var(--d-raised) inset !important;
}

/* ------------------- Selected text ------------------- */
/* the browser's own selection colour is a dim blue that nearly matches the dark background, so it is the blue of the app with white text */
html[data-theme="dark"] ::selection {
  background-color: rgba(59, 130, 246, 0.75);
  color: #ffffff;
  text-shadow: none;
}

html[data-theme="dark"] ::-moz-selection {
  background-color: rgba(59, 130, 246, 0.75);
  color: #ffffff;
  text-shadow: none;
}

html[data-theme="dark"] .table tfoot th {
  background-color: var(--d-raised) !important;
  color: var(--d-soft) !important;
  border-color: var(--d-border) !important;
}

/* login page on a phone: there is no border and no padding around the form, so the lighter box looks like a plain rectangle, the form sits on the page instead */
@media (max-width: 767.98px) {
  html[data-theme="dark"] .login-wrap .login-form-box {
    background-color: transparent;
  }
}

/* the logo above the form is the blue one, it is turned white so it can be seen on the dark page */
html[data-theme="dark"] .login-wrap .login-form-box img {
  filter: brightness(0) invert(1);
}

/* section banners on the user edit pages: dark box with white text */
html[data-theme="dark"][data-theme] h6.section-banner.text-muted.text-uppercase {
  background: #20242c !important;
  color: #fff !important;
}

/* the line under the role name (and other lines inside a card) was almost the colour of the card, so it is a bit lighter */
html[data-theme="dark"] .card-body > hr {
  height: 0;
  opacity: 1;
  background: transparent;
  border: 0 !important;
  border-top: 1px solid #5b6477 !important;
}