/*
 * Romeo dark monochrome theme (ROM-1514).
 *
 * The inverse of myartbroker.com's palette. Loaded after custom.css in
 * base.html and account/base.html, so it overrides Bootstrap, Limitless
 * and ag-Grid without touching templates. Only success (green) and danger
 * (red) carry hue; every other semantic and Limitless colour is a grey.
 */

:root {
    --mab-bg: #0a0a0a;
    --mab-surface: #161616;
    --mab-stripe: #111111;
    --mab-raised: #222222;
    --mab-selected: #2a2a2a;
    --mab-border: #333333;
    --mab-strong: #666666;
    --mab-muted: #999999;
    --mab-secondary: #dddddd;
    --mab-text: #ffffff;
    --mab-success: #33cf73;
    --mab-success-tint: rgba(51, 207, 115, .14);
    --mab-danger: #ff5247;
    --mab-danger-fill: #b53737;
    --mab-danger-tint: rgba(181, 55, 55, .18);
    /* Chart series (ROM-1519). chart-1 draws every single-series chart;
       2 and 3 only when a chart separates categories, and anything past
       three folds into chart-other. Validated as a set for colour-blind
       separation on --mab-surface. Green and red stay reserved for status. */
    --mab-chart-1: #3987e5;
    --mab-chart-2: #c98500;
    --mab-chart-3: #d55181;
    --mab-chart-other: #666666;
    color-scheme: dark;
}


/* ---------------------------------------------------------------- base */

html,
body {
    background-color: var(--mab-bg);
    color: var(--mab-secondary);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.font-weight-semibold,
.font-weight-bold,
strong, b {
    color: inherit;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--mab-text);
}

a {
    color: var(--mab-text);
}

a:hover,
a:focus {
    color: var(--mab-secondary) !important;
}

hr {
    border-top-color: var(--mab-border);
}

pre,
code,
kbd {
    background-color: var(--mab-surface);
    border-color: var(--mab-border);
    color: var(--mab-secondary);
}

::selection {
    background: var(--mab-strong);
    color: var(--mab-text);
}

.page-content,
.content-wrapper,
.content {
    background-color: var(--mab-bg);
}

.footer,
.navbar-footer {
    background-color: var(--mab-surface);
    border-color: var(--mab-border);
    color: var(--mab-muted);
}


/* ---------------------------------------------------------- navbar */

.navbar,
.navbar-dark,
.navbar-light,
.navbar.bg-black {
    background-color: var(--mab-surface) !important;
    border-color: var(--mab-border) !important;
    color: var(--mab-secondary);
}

.navbar-dark .navbar-nav-link,
.navbar-light .navbar-nav-link,
.navbar-dark .navbar-text,
.navbar-light .navbar-text,
.navbar .navbar-nav-link.text-black {
    color: var(--mab-secondary) !important;
}

.navbar-dark .navbar-nav-link:hover,
.navbar-light .navbar-nav-link:hover,
.navbar-dark .navbar-nav-link:focus,
.navbar-light .navbar-nav-link:focus,
.navbar-dark .navbar-nav-link.active,
.navbar-light .navbar-nav-link.active,
.navbar-dark .show > .navbar-nav-link,
.navbar-light .show > .navbar-nav-link {
    background-color: var(--mab-raised);
    color: var(--mab-text) !important;
}

.navbar-nav-highlight .navbar-nav-link.active:before,
.navbar-light .navbar-nav-highlight .navbar-nav-link.active:before,
.nav-tabs-bottom .nav-link.active:before {
    background-color: var(--mab-text) !important;
}

.navbar-light .navbar-text a,
.navbar-dark .navbar-text a {
    color: var(--mab-text);
}

.breadcrumb-line,
.breadcrumb-line-light {
    background-color: var(--mab-surface) !important;
    border-color: var(--mab-border) !important;
}


/* --------------------------------------------------------- sidebar */

.sidebar,
.sidebar-dark,
.sidebar-light,
.sidebar-main,
.sidebar-secondary,
.sidebar-right,
.sidebar-component {
    background-color: var(--mab-surface) !important;
    border-color: var(--mab-border) !important;
    color: var(--mab-secondary);
    box-shadow: none;
}

.sidebar .card,
.sidebar .card-header,
.sidebar .card-body,
.sidebar .sidebar-user,
.sidebar-mobile-toggler {
    background-color: transparent !important;
    border-color: var(--mab-border) !important;
    color: var(--mab-secondary);
}

.sidebar-dark .nav-sidebar .nav-link,
.sidebar-light .nav-sidebar .nav-link,
.nav-sidebar .nav-link,
.nav-sidebar .nav-group-sub .nav-link {
    color: var(--mab-secondary);
}

.nav-sidebar .nav-link:not(.disabled):hover,
.nav-sidebar .nav-item-open > .nav-link:not(.disabled),
.nav-sidebar .nav-group-sub .nav-link:hover {
    background-color: var(--mab-raised) !important;
    color: var(--mab-text) !important;
}

.nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar .nav-group-sub .nav-link.active,
.sidebar-dark .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--mab-raised) !important;
    color: var(--mab-text) !important;
    box-shadow: inset 2px 0 0 var(--mab-text);
}

.nav-sidebar .nav-item-header,
.nav-sidebar .nav-item-header > i {
    color: var(--mab-muted) !important;
}

.nav-sidebar .nav-item-divider,
.sidebar .sidebar-mobile-toggler {
    border-color: var(--mab-border);
    background-color: var(--mab-border);
}

.nav-group-sub {
    background-color: transparent !important;
}


/* ------------------------------------------------------ page header */

.page-header,
.page-header-light,
.page-header-dark,
.page-header-content {
    background-color: var(--mab-bg) !important;
    border-color: var(--mab-border) !important;
    color: var(--mab-text);
}

.page-title,
.page-title h4,
.page-title h5 {
    color: var(--mab-text);
}

.breadcrumb,
.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-elements-item {
    color: var(--mab-muted);
}

.breadcrumb-item.active,
.breadcrumb-item a:hover {
    color: var(--mab-secondary);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--mab-strong);
}


/* ----------------------------------------------- cards and panels */

.card,
.card-group > .card {
    background-color: var(--mab-surface);
    border-color: var(--mab-border);
    color: var(--mab-secondary);
    box-shadow: none;
}

.card-header,
.card-footer,
.card-header:not([class*=bg-]):not([class*=alpha-]) {
    background-color: transparent;
    border-color: var(--mab-border) !important;
    color: var(--mab-text);
}

.card-title,
.card-header .card-title {
    color: var(--mab-text);
}

.card-body {
    color: var(--mab-secondary);
}

.card-overlay {
    background-color: rgba(10, 10, 10, .6) !important;
}

.list-group-item {
    background-color: var(--mab-surface);
    border-color: var(--mab-border);
    color: var(--mab-secondary);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--mab-raised);
    color: var(--mab-text);
}

.list-group-item.active {
    background-color: var(--mab-raised);
    border-color: var(--mab-border);
    color: var(--mab-text);
}

.media-title,
.media-body {
    color: inherit;
}


/* ------------------------------------------ dropdowns and overlays */

.dropdown-menu,
.select2-dropdown,
.popover,
.ui-autocomplete {
    background-color: var(--mab-surface);
    border-color: var(--mab-border);
    color: var(--mab-secondary);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .6);
}

/* Limitless draws menus with a zero-width border and lets the shadow
   separate them, which vanishes on the dark theme; a menu opened over a
   modal blends into it (ROM-1523). */
.dropdown-menu {
    border: 1px solid var(--mab-strong);
}

.dropdown-item,
.dropdown-menu > li > a {
    color: var(--mab-secondary);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active,
.dropdown-menu > .dropdown-submenu.show > .dropdown-item {
    background-color: var(--mab-raised) !important;
    color: var(--mab-text) !important;
}

.dropdown-divider {
    border-top-color: var(--mab-border);
}

.dropdown-header {
    color: var(--mab-muted);
}

.popover-header {
    background-color: var(--mab-raised);
    border-color: var(--mab-border);
    color: var(--mab-text);
}

.popover-body {
    color: var(--mab-secondary);
}

.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^="top"] .arrow::after {
    border-top-color: var(--mab-surface);
}

.bs-popover-bottom .arrow::after,
.bs-popover-auto[x-placement^="bottom"] .arrow::after {
    border-bottom-color: var(--mab-surface);
}

.bs-popover-left .arrow::after,
.bs-popover-auto[x-placement^="left"] .arrow::after {
    border-left-color: var(--mab-surface);
}

.bs-popover-right .arrow::after,
.bs-popover-auto[x-placement^="right"] .arrow::after {
    border-right-color: var(--mab-surface);
}

.tooltip-inner {
    background-color: var(--mab-text);
    color: var(--mab-bg);
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: var(--mab-text);
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: var(--mab-text);
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: var(--mab-text);
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: var(--mab-text);
}

.modal-content {
    background-color: var(--mab-surface);
    border-color: var(--mab-border);
    color: var(--mab-secondary);
    box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .7);
}

.modal-header,
.modal-footer {
    border-color: var(--mab-border);
}

.modal-title {
    color: var(--mab-text);
}

.modal-backdrop.show {
    opacity: .75;
}

.close,
.close:hover {
    color: var(--mab-text);
    text-shadow: none;
}


/* --------------------------------------------------------- tables */

.table,
.table th,
.table td {
    color: var(--mab-secondary);
    border-color: var(--mab-border) !important;
}

.table thead th,
.table .thead-light th,
.thead-light th {
    background-color: var(--mab-surface);
    border-color: var(--mab-border);
    color: var(--mab-muted);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--mab-stripe);
}

.table-hover tbody tr:hover,
table.datatable-ajax tbody tr:hover {
    background-color: var(--mab-raised);
    color: var(--mab-text);
}

.table-bordered,
.table-bordered th,
.table-bordered td {
    border-color: var(--mab-border);
}

table.datatable-ajax td.focus {
    outline-color: var(--mab-text);
}

.table-active,
.table-active > td,
.table-active > th {
    background-color: var(--mab-raised);
}

.dataTables_info,
.dataTables_length,
.dataTables_filter {
    color: var(--mab-muted);
}

.highcharts-data-table table {
    background: var(--mab-surface);
}

.highcharts-data-table tr:nth-child(even),
.highcharts-data-table thead tr {
    background: var(--mab-stripe);
}

.highcharts-data-table tr:hover {
    background: var(--mab-raised);
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    border-color: var(--mab-border);
}


/* ---------------------------------------------------------- forms */

.form-control,
.custom-form-control,
.custom-select,
.form-control-plaintext,
.input-group-text,
.select2-selection,
.select2-selection--single,
.select2-selection--multiple,
.select2-search__field,
.select2-search--dropdown .select2-search__field {
    background-color: var(--mab-bg) !important;
    border-color: var(--mab-border) !important;
    color: var(--mab-text) !important;
}

.form-control::placeholder,
.select2-selection__placeholder,
.select2-search__field::placeholder {
    color: var(--mab-muted) !important;
}

.form-control:focus,
.custom-form-control:focus,
.custom-select:focus,
.select2-container--open .select2-selection,
.select2-container--focus .select2-selection {
    border-color: var(--mab-muted) !important;
    box-shadow: 0 1px 0 var(--mab-text) !important;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--mab-surface) !important;
    color: var(--mab-muted) !important;
}

.form-control-plaintext,
.form-group-feedback .form-control-feedback {
    color: var(--mab-secondary) !important;
}

label,
.col-form-label,
.form-text {
    color: var(--mab-secondary);
}

.form-text.text-muted {
    color: var(--mab-muted) !important;
}

.select2-selection__rendered,
.select2-selection--single .select2-selection__rendered {
    color: var(--mab-text) !important;
}

.select2-selection--multiple .select2-selection__choice {
    background-color: var(--mab-raised) !important;
    border-color: var(--mab-border) !important;
    color: var(--mab-text) !important;
}

.select2-results__option {
    color: var(--mab-secondary);
}

.select2-results__option[aria-selected=true] {
    background-color: var(--mab-raised);
    color: var(--mab-text);
}

.select2-results__option--highlighted,
.select2-results__option.select2-results__option--highlighted {
    background-color: var(--mab-selected) !important;
    color: var(--mab-text) !important;
}

.select2-results__group,
.select2-results__message {
    color: var(--mab-muted);
}

.custom-control-label::before,
.form-check-input-styled + span,
.uniform-checker span,
.uniform-choice span {
    background-color: var(--mab-bg);
    border-color: var(--mab-muted) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--mab-text);
    border-color: var(--mab-text) !important;
}

.uniform-checker span.checked,
.uniform-choice span.checked {
    color: var(--mab-text);
    border-color: var(--mab-text) !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: var(--mab-bg);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--mab-text);
}

.asteriskField {
    color: var(--mab-danger);
}


/* ------------------------------------------------- tabs and pills */

.nav-tabs {
    border-bottom-color: var(--mab-border);
}

.nav-tabs .nav-link,
.nav-pills .nav-link,
.nav-link {
    color: var(--mab-muted);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus,
.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
    color: var(--mab-text);
    border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: var(--mab-surface);
    border-color: var(--mab-border) var(--mab-border) var(--mab-surface);
    color: var(--mab-text);
}

.nav-tabs-highlight .nav-link.active:before,
.nav-tabs-bottom .nav-link.active:before,
.nav-tabs-solid .nav-link.active {
    background-color: var(--mab-text);
}

.nav-tabs-solid .nav-link.active {
    color: var(--mab-bg);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--mab-text);
    color: var(--mab-bg);
}

.nav-tabs.nav-tabs-solid,
.nav-tabs.nav-tabs-highlight {
    background-color: transparent;
}


/* ----------------------------------------------------- pagination */

.page-link {
    background-color: var(--mab-surface);
    border-color: var(--mab-border);
    color: var(--mab-secondary);
}

.page-link:hover,
.page-link:focus {
    background-color: var(--mab-raised);
    border-color: var(--mab-border);
    color: var(--mab-text) !important;
}

.page-item.active .page-link {
    background-color: var(--mab-text);
    border-color: var(--mab-text);
    color: var(--mab-bg);
}

.page-item.disabled .page-link {
    background-color: var(--mab-surface);
    border-color: var(--mab-border);
    color: var(--mab-strong);
}


/* -------------------------------------------------------- buttons */

.btn-primary,
.btn-dark,
.btn-neon {
    background-color: var(--mab-text);
    border-color: var(--mab-text);
    color: var(--mab-bg) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-dark:hover,
.btn-neon:hover {
    background-color: var(--mab-secondary);
    border-color: var(--mab-secondary);
    color: var(--mab-bg) !important;
}

/* A bg-black primary button (the scraping tester pages) stays dark. */
.btn-primary.bg-black {
    background-color: var(--mab-raised) !important;
    border-color: var(--mab-border) !important;
    color: var(--mab-text) !important;
}

.btn-secondary,
.btn-info,
.btn-light,
.btn-default,
.btn-teal,
.btn-indigo,
.btn-slate,
.btn-grey,
.btn-purple,
.btn-violet,
.btn-pink,
.btn-blue,
.btn-orange,
.btn-brown {
    background-color: var(--mab-raised);
    border-color: var(--mab-border);
    color: var(--mab-text) !important;
}

.btn-secondary:hover,
.btn-info:hover,
.btn-light:hover,
.btn-default:hover,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled).active {
    background-color: var(--mab-border);
    border-color: var(--mab-strong);
    color: var(--mab-text) !important;
}

/* Limitless gives a disabled .btn-light its light-theme #f5f5f5 at higher
   specificity than the rule above, leaving white text on a pale slab. */
.btn-light.disabled,
.btn-light:disabled {
    background-color: var(--mab-raised);
    border-color: var(--mab-border);
}

.btn-warning,
.btn-outline-warning {
    background-color: transparent;
    border-color: var(--mab-muted);
    color: var(--mab-text) !important;
}

.btn-warning:hover,
.btn-outline-warning:hover {
    background-color: var(--mab-raised);
    border-color: var(--mab-secondary);
}

.btn-success,
.btn-green {
    background-color: var(--mab-success);
    border-color: var(--mab-success);
    color: var(--mab-bg) !important;
}

.btn-danger,
.btn-red {
    background-color: var(--mab-danger-fill);
    border-color: var(--mab-danger-fill);
    color: var(--mab-text) !important;
}

/* theme.css forces a:hover to --mab-secondary; anchor buttons need their
   own hover colour to keep a readable label. */
.btn-success:hover,
.btn-green:hover {
    color: var(--mab-bg) !important;
}

.btn-danger:hover,
.btn-red:hover,
.btn-warning:hover,
.btn-outline-warning:hover {
    color: var(--mab-text) !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark,
.btn-outline,
.btn-outline.bg-primary,
.btn-outline.border-primary {
    background-color: transparent !important;
    border-color: var(--mab-border) !important;
    color: var(--mab-secondary) !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-info:hover,
.btn-outline-light:hover,
.btn-outline-dark:hover,
.btn-outline:hover,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-secondary:not(:disabled):not(.disabled).active {
    background-color: var(--mab-raised) !important;
    border-color: var(--mab-strong) !important;
    color: var(--mab-text) !important;
}

.btn-outline-success {
    border-color: var(--mab-success);
    color: var(--mab-success) !important;
}

.btn-outline-success:hover {
    background-color: var(--mab-success);
    color: var(--mab-bg) !important;
}

.btn-outline-danger {
    border-color: var(--mab-danger-fill);
    color: var(--mab-danger) !important;
}

.btn-outline-danger:hover {
    background-color: var(--mab-danger-fill);
    color: var(--mab-text) !important;
}

.btn-link {
    color: var(--mab-secondary);
}

.btn-link:hover {
    color: var(--mab-text);
}

.btn.active,
.btn-group-toggle .active {
    background-color: var(--mab-text);
    border-color: var(--mab-text);
    color: var(--mab-bg) !important;
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 .125rem var(--mab-strong);
}


/* --------------------------------------------------------- badges */

.badge-primary {
    background-color: var(--mab-text);
    color: var(--mab-bg);
}

.badge-secondary,
.badge-info,
.badge-light,
.badge-dark,
.badge-flat {
    background-color: var(--mab-raised);
    border: 1px solid var(--mab-border);
    color: var(--mab-secondary);
}

.badge-warning {
    background-color: transparent;
    border: 1px solid var(--mab-muted);
    color: var(--mab-secondary);
}

.badge-success {
    background-color: var(--mab-success-tint);
    border: 1px solid rgba(51, 207, 115, .4);
    color: var(--mab-success);
}

.badge-danger {
    background-color: var(--mab-danger-tint);
    border: 1px solid rgba(181, 55, 55, .7);
    color: var(--mab-danger);
}

a.badge:hover,
a.badge:focus {
    filter: brightness(1.15);
}


/* --------------------------------------------------------- alerts */

.alert-primary,
.alert-secondary,
.alert-info,
.alert-light,
.alert-dark {
    background-color: var(--mab-raised);
    border-color: var(--mab-border) !important;
    color: var(--mab-secondary);
}

.alert-warning {
    background-color: transparent;
    border-color: var(--mab-muted) !important;
    color: var(--mab-secondary);
}

.alert-success {
    background-color: rgba(51, 207, 115, .1);
    border-color: rgba(51, 207, 115, .45) !important;
    color: #a9ecc4;
}

.alert-danger {
    background-color: var(--mab-danger-tint);
    border-color: var(--mab-danger-fill) !important;
    color: #ffb3ae;
}

.alert .alert-link,
.alert strong {
    color: var(--mab-text);
}

/* Noty toasts render with `alert bg-neon`; see base.html. */
.noty_bar,
.noty_body,
.alert.bg-neon {
    background-color: var(--mab-surface) !important;
    border: 1px solid var(--mab-border);
    color: var(--mab-text) !important;
}

.noty_type__success .noty_body,
.noty_type__success.noty_bar {
    border-left: 3px solid var(--mab-success);
}

.noty_type__error .noty_body,
.noty_type__error.noty_bar {
    border-left: 3px solid var(--mab-danger);
}


/* ------------------------------------------------ progress, misc */

.progress {
    background-color: var(--mab-raised);
}

.progress-bar,
.progress .indeterminate {
    background-color: var(--mab-text);
}

.progress-bar.bg-success {
    background-color: var(--mab-success) !important;
}

.progress-bar.bg-danger {
    background-color: var(--mab-danger-fill) !important;
}

.border,
.border-top,
.border-bottom,
.border-left,
.border-right,
.border-x-0,
.content-divider,
.header-elements-inline,
.sidebar-section {
    border-color: var(--mab-border) !important;
}

.border-white,
.border-black {
    border-color: var(--mab-border) !important;
}

.display-image-container,
.display-image-container-thumbnail {
    background-color: var(--mab-bg);
}

/* tooltips.js sets an inline background from params.color, and pages pass
   light greys such as #ececec. */
.custom-tooltip {
    background-color: var(--mab-surface) !important;
    border-color: var(--mab-border);
    color: var(--mab-secondary);
}

.mab-row-updating {
    background-color: var(--mab-raised) !important;
    color: var(--mab-muted) !important;
}

.missing-data-red {
    background-color: var(--mab-danger-tint);
}

.missing-data-neon,
.cell-changed {
    background-color: var(--mab-success-tint);
}


/* ------------------------------------ Bootstrap semantic utilities */

.bg-white,
.bg-light,
.bg-body {
    background-color: var(--mab-surface) !important;
}

.bg-black,
.bg-dark {
    background-color: var(--mab-bg) !important;
}

/* bg-primary panels (modal headers, stat cards) go grey, not white:
   their children carry text-white, which a white fill would hide. */
.bg-primary,
.bg-secondary,
.bg-info,
.bg-warning,
.bg-darkgrey,
.bg-lightgrey,
.bg-grey,
.bg-error {
    background-color: var(--mab-border) !important;
    color: var(--mab-text);
}

.bg-success {
    background-color: var(--mab-success) !important;
    color: var(--mab-bg);
}

.bg-success.text-white,
.bg-success .text-white {
    color: var(--mab-bg) !important;
}

.bg-danger {
    background-color: var(--mab-danger-fill) !important;
    color: var(--mab-text);
}

.bg-neon {
    background-color: var(--mab-raised) !important;
    color: var(--mab-text);
}

.bg-neon-light {
    background-color: var(--mab-raised) !important;
    color: var(--mab-text) !important;
}

.bg-transparent {
    background-color: transparent !important;
}

.text-body,
.text-default,
.text-dark,
.text-black,
.text-black[href]:hover,
.text-black[href]:focus,
.text-primary,
.text-white,
.text-neon,
.text-neon[href]:hover,
.text-neon[href]:focus {
    color: var(--mab-text) !important;
}

.text-secondary,
.text-info,
.text-warning,
.text-lightgrey,
.text-light {
    color: var(--mab-secondary) !important;
}

.text-muted,
.text-darkgrey,
.text-grey {
    color: var(--mab-muted) !important;
}

.text-success {
    color: var(--mab-success) !important;
}

.text-danger {
    color: var(--mab-danger) !important;
}

.border-primary,
.border-secondary,
.border-info,
.border-warning,
.border-light,
.border-dark,
.border-neon,
[class*="border-top-neon"],
[class*="border-bottom-neon"],
[class*="border-left-neon"],
[class*="border-right-neon"] {
    border-color: var(--mab-muted) !important;
}

.border-success,
[class*="border-left-success"],
[class*="border-top-success"] {
    border-color: var(--mab-success) !important;
}

.border-danger,
[class*="border-left-danger"],
[class*="border-top-danger"] {
    border-color: var(--mab-danger-fill) !important;
}


/* ---------------------------------------- Limitless colour families
   bg-indigo, bg-teal-400, text-violet-800, border-top-slate-300 ... all
   collapse to greys. Green and red keep their status hue. */

[class*="bg-indigo"], [class*="bg-teal"], [class*="bg-violet"],
[class*="bg-purple"], [class*="bg-pink"], [class*="bg-blue"],
[class*="bg-orange"], [class*="bg-brown"], [class*="bg-slate"],
[class*="bg-grey-"], [class*="bg-primary-"], [class*="bg-info-"],
[class*="bg-warning-"], [class*="bg-secondary-"] {
    background-color: var(--mab-border) !important;
    color: var(--mab-text);
}

[class*="bg-green"], [class*="bg-success-"] {
    background-color: var(--mab-success) !important;
    color: var(--mab-bg);
}

[class*="bg-red"], [class*="bg-danger-"] {
    background-color: var(--mab-danger-fill) !important;
    color: var(--mab-text);
}

[class*="text-indigo"], [class*="text-teal"], [class*="text-violet"],
[class*="text-purple"], [class*="text-pink"], [class*="text-blue"],
[class*="text-orange"], [class*="text-brown"], [class*="text-slate"],
[class*="text-grey-"], [class*="text-primary-"], [class*="text-info-"],
[class*="text-warning-"] {
    color: var(--mab-secondary) !important;
}

[class*="text-green"], [class*="text-success-"] {
    color: var(--mab-success) !important;
}

[class*="text-red"], [class*="text-danger-"] {
    color: var(--mab-danger) !important;
}

[class*="border-indigo"], [class*="border-teal"], [class*="border-violet"],
[class*="border-purple"], [class*="border-pink"], [class*="border-blue"],
[class*="border-orange"], [class*="border-brown"], [class*="border-slate"],
[class*="border-grey"], [class*="-indigo-"][class*="border-"],
[class*="-teal-"][class*="border-"], [class*="-slate-"][class*="border-"],
[class*="-primary-"][class*="border-"] {
    border-color: var(--mab-strong) !important;
}

[class*="alpha-"] {
    background-color: var(--mab-raised) !important;
}


/* --------------------------------------------------------- ag-Grid */

/* The ag-Grid bundle injects its theme CSS at runtime, after this file;
   the body prefix keeps these ahead of it. */
body .ag-theme-balham {
    --ag-foreground-color: var(--mab-secondary);
    --ag-data-color: var(--mab-secondary);
    --ag-secondary-foreground-color: var(--mab-muted);
    --ag-disabled-foreground-color: var(--mab-strong);
    --ag-background-color: var(--mab-bg);
    --ag-odd-row-background-color: var(--mab-stripe);
    --ag-header-background-color: var(--mab-surface);
    --ag-header-foreground-color: var(--mab-muted);
    --ag-header-cell-moving-background-color: var(--mab-raised);
    --ag-header-column-separator-color: var(--mab-border);
    --ag-control-panel-background-color: var(--mab-surface);
    --ag-subheader-background-color: var(--mab-surface);
    --ag-subheader-toolbar-background-color: var(--mab-surface);
    --ag-border-color: var(--mab-border);
    --ag-secondary-border-color: var(--mab-border);
    --ag-row-border-color: var(--mab-surface);
    --ag-row-hover-color: var(--mab-raised);
    --ag-column-hover-color: var(--mab-raised);
    --ag-selected-row-background-color: var(--mab-selected);
    --ag-balham-active-color: var(--mab-text);
    --ag-selected-tab-underline-color: var(--mab-text);
    --ag-input-focus-border-color: var(--mab-muted);
    --ag-input-border-color: var(--mab-border);
    --ag-input-disabled-border-color: var(--mab-border);
    --ag-input-disabled-background-color: var(--mab-surface);
    --ag-checkbox-background-color: var(--mab-bg);
    --ag-checkbox-checked-color: var(--mab-text);
    --ag-checkbox-unchecked-color: var(--mab-muted);
    --ag-toggle-button-on-background-color: var(--mab-text);
    --ag-toggle-button-on-border-color: var(--mab-text);
    --ag-toggle-button-off-background-color: var(--mab-strong);
    --ag-toggle-button-off-border-color: var(--mab-strong);
    --ag-toggle-button-switch-background-color: var(--mab-bg);
    --ag-toggle-button-switch-border-color: var(--mab-strong);
    --ag-range-selection-border-color: var(--mab-text);
    --ag-range-selection-background-color: rgba(255, 255, 255, .08);
    --ag-range-selection-background-color-2: rgba(255, 255, 255, .14);
    --ag-range-selection-background-color-3: rgba(255, 255, 255, .2);
    --ag-range-selection-background-color-4: rgba(255, 255, 255, .26);
    --ag-range-selection-highlight-color: var(--mab-strong);
    --ag-value-change-value-highlight-background-color: var(--mab-success-tint);
    --ag-value-change-delta-up-color: var(--mab-success);
    --ag-value-change-delta-down-color: var(--mab-danger);
    --ag-chip-background-color: var(--mab-raised);
    --ag-modal-overlay-background-color: rgba(10, 10, 10, .66);
    --ag-minichart-selected-chart-color: var(--mab-text);
    --ag-minichart-selected-page-color: var(--mab-text);
    color-scheme: dark;
}

body .ag-theme-balham .ag-cell,
body .ag-theme-balham .ag-ltr .ag-cell,
body .ag-theme-balham .ag-header-cell {
    border-color: var(--mab-border) !important;
}

body .ag-theme-balham .ag-row-selected {
    box-shadow: inset 2px 0 0 var(--mab-text);
}

body .ag-theme-balham .ag-row.ag-row-focus {
    border-color: var(--mab-strong);
}

body .ag-theme-balham .ag-popup,
body .ag-theme-balham .ag-menu,
body .ag-theme-balham .ag-filter,
body .ag-theme-balham .ag-tooltip {
    background-color: var(--mab-surface);
    color: var(--mab-secondary);
}

body .ag-theme-balham input[class^=ag-][type=text],
body .ag-theme-balham input[class^=ag-][type=number],
body .ag-theme-balham input[class^=ag-][type=date],
body .ag-theme-balham input[class^=ag-]:not([type]),
body .ag-theme-balham select[class^=ag-],
body .ag-theme-balham textarea[class^=ag-] {
    background-color: var(--mab-bg);
    border-color: var(--mab-border);
    color: var(--mab-text);
}

body .ag-theme-balham .row_artwork_highlight {
    background-color: var(--mab-selected) !important;
}

body .ag-theme-balham .main_artwork_warning {
    background-color: var(--mab-border) !important;
}

body .ag-theme-balham .grid_row_warning {
    background-color: var(--mab-danger-tint) !important;
}

body .ag-theme-balham .ag-cell-data-changed {
    background-color: var(--mab-success-tint) !important;
}


/* ------------------------------------------------------ Highcharts
   Highcharts writes fills and text colours as SVG attributes and inline
   styles; !important is the only way over them. Series colours are left
   alone: they encode data. */

.highcharts-background {
    fill: transparent !important;
}

.highcharts-plot-background {
    fill: transparent !important;
}

.highcharts-title,
.highcharts-subtitle,
.highcharts-axis-title,
.highcharts-axis-labels text,
.highcharts-legend-item text,
.highcharts-data-label text,
.highcharts-stack-labels text,
.highcharts-no-data text {
    fill: var(--mab-secondary) !important;
    color: var(--mab-secondary) !important;
}

.highcharts-axis-labels text,
.highcharts-axis-title,
.highcharts-subtitle {
    fill: var(--mab-muted) !important;
}

.highcharts-legend-item-hidden text {
    fill: var(--mab-strong) !important;
}

.highcharts-grid-line {
    stroke: var(--mab-border) !important;
}

.highcharts-axis-line,
.highcharts-tick,
.highcharts-crosshair {
    stroke: var(--mab-border) !important;
}

.highcharts-data-label-connector {
    stroke: var(--mab-strong) !important;
}

.highcharts-data-label text {
    text-shadow: none;
    stroke: none;
}

.highcharts-tooltip-box,
.highcharts-tooltip .highcharts-label-box,
.highcharts-label.highcharts-tooltip .highcharts-label-box {
    fill: var(--mab-surface) !important;
    stroke: var(--mab-border) !important;
}

.highcharts-tooltip text,
.highcharts-tooltip-container .highcharts-tooltip span {
    fill: var(--mab-secondary) !important;
    color: var(--mab-secondary) !important;
}

.highcharts-button-box {
    fill: var(--mab-raised) !important;
    stroke: var(--mab-border) !important;
}

.highcharts-button text,
.highcharts-contextbutton .highcharts-button-symbol {
    fill: var(--mab-secondary) !important;
    stroke: var(--mab-secondary) !important;
}

.highcharts-menu {
    background: var(--mab-surface) !important;
    border-color: var(--mab-border) !important;
}

.highcharts-menu-item {
    color: var(--mab-secondary) !important;
}

.highcharts-menu-item:hover {
    background: var(--mab-raised) !important;
}


/* ---------------------------------------------------- pygments */

.highlight {
    background-color: var(--mab-surface);
    color: var(--mab-secondary);
}

.highlight .hll {
    background-color: var(--mab-raised);
}

.highlight .c, .highlight .ch, .highlight .cm, .highlight .cpf,
.highlight .c1, .highlight .cs, .highlight .go, .highlight .w {
    color: var(--mab-muted);
    background-color: transparent;
}

.highlight .k, .highlight .kc, .highlight .kd, .highlight .kn,
.highlight .kp, .highlight .kr, .highlight .kt, .highlight .ow,
.highlight .nb, .highlight .bp, .highlight .ne, .highlight .cp,
.highlight .nc, .highlight .nn, .highlight .nt, .highlight .nl,
.highlight .gh, .highlight .gu, .highlight .gp {
    color: var(--mab-text);
}

.highlight .s, .highlight .sa, .highlight .sb, .highlight .sc,
.highlight .dl, .highlight .sd, .highlight .s2, .highlight .se,
.highlight .sh, .highlight .si, .highlight .sx, .highlight .sr,
.highlight .s1, .highlight .ss, .highlight .na, .highlight .m,
.highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi,
.highlight .mo, .highlight .il, .highlight .no, .highlight .nf,
.highlight .fm, .highlight .nv, .highlight .vc, .highlight .vg,
.highlight .vi, .highlight .vm, .highlight .ni, .highlight .nd,
.highlight .o, .highlight .gt {
    color: var(--mab-secondary);
}

.highlight .gi {
    color: var(--mab-success);
}

.highlight .gd, .highlight .gr, .highlight .err {
    color: var(--mab-danger);
    border-color: var(--mab-danger-fill);
}