/* ============================================================================================ */
/* DARK THEME: PLUGINS                                                                           */
/* Highcharts, Summernote, Redactor, FullCalendar, toastr.                                       */
/* Highcharts also gets dark defaults from app/common/theme.js for charts drawn after a switch; */
/* these rules repaint charts that were already on screen when the theme changed.               */
/* ============================================================================================ */

/* HIGHCHARTS: CSS beats SVG presentation attributes; inline style="" text needs !important --- */
html[data-theme="dark"] .highcharts-background {
    fill: var(--app-surface);
}
html[data-theme="dark"] .highcharts-plot-background {
    fill: transparent;
}
html[data-theme="dark"] .highcharts-grid-line,
html[data-theme="dark"] .highcharts-minor-grid-line {
    stroke: var(--app-border);
}
html[data-theme="dark"] .highcharts-axis-line,
html[data-theme="dark"] .highcharts-tick {
    stroke: var(--app-border-color-dark);
}
html[data-theme="dark"] .highcharts-title,
html[data-theme="dark"] .highcharts-subtitle,
html[data-theme="dark"] .highcharts-axis-title,
html[data-theme="dark"] .highcharts-axis-labels text,
html[data-theme="dark"] .highcharts-legend-item text,
html[data-theme="dark"] .highcharts-legend-title text,
html[data-theme="dark"] .highcharts-credits,
html[data-theme="dark"] .highcharts-pane-group text,
html[data-theme="dark"] .highcharts-yaxis-labels text,
html[data-theme="dark"] .highcharts-xaxis-labels text {
    fill: var(--app-text-secondary) !important;
    color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .highcharts-title {
    fill: var(--app-text-heading) !important;
}
html[data-theme="dark"] .highcharts-legend-item-hidden text {
    fill: var(--app-text-faint) !important;
}
html[data-theme="dark"] .highcharts-tooltip-box,
html[data-theme="dark"] .highcharts-tooltip > path {
    fill: var(--app-surface-2);
    stroke: var(--app-border-color-dark);
}
html[data-theme="dark"] .highcharts-tooltip text {
    fill: var(--app-text) !important;
}
html[data-theme="dark"] .highcharts-contextbutton .highcharts-button-box,
html[data-theme="dark"] .highcharts-button-box {
    fill: var(--app-surface-2);
}
html[data-theme="dark"] .highcharts-button-symbol {
    stroke: var(--app-text-secondary);
}
html[data-theme="dark"] .highcharts-menu {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    box-shadow: 0 0.25rem 0.75rem var(--app-shadow-color) !important;
}
html[data-theme="dark"] .highcharts-menu-item {
    color: var(--app-text) !important;
}
html[data-theme="dark"] .highcharts-menu-item:hover {
    background: var(--app-surface-3) !important;
}
html[data-theme="dark"] .highcharts-data-label text,
html[data-theme="dark"] .highcharts-data-labels text {
    text-shadow: none;
}
html[data-theme="dark"] .highcharts-pane {
    fill: var(--app-surface-3);
}

/* SUMMERNOTE --------------------------------------------------------------------------------- */
html[data-theme="dark"] .note-editor.note-frame,
html[data-theme="dark"] .note-editor .note-editing-area .note-editable,
html[data-theme="dark"] .note-editor .note-codable {
    background-color: var(--app-input-bg);
    border-color: var(--app-border-input);
    color: var(--app-text);
}
html[data-theme="dark"] .note-editor .note-toolbar,
html[data-theme="dark"] .note-editor .note-statusbar,
html[data-theme="dark"] .note-popover .popover-content {
    background-color: var(--app-surface-2);
    border-color: var(--app-border);
}
html[data-theme="dark"] .note-editor .note-btn,
html[data-theme="dark"] .note-toolbar .btn {
    background-color: var(--app-surface-3);
    border-color: var(--app-border);
    color: var(--app-text);
}
html[data-theme="dark"] .note-editor .note-dropdown-menu,
html[data-theme="dark"] .note-toolbar .dropdown-menu {
    background-color: var(--app-surface);
    border-color: var(--app-border);
}

/* REDACTOR ----------------------------------------------------------------------------------- */
html[data-theme="dark"] .redactor-box,
html[data-theme="dark"] .redactor-editor,
html[data-theme="dark"] .redactor-in {
    background-color: var(--app-input-bg) !important;
    border-color: var(--app-border-input) !important;
    color: var(--app-text) !important;
}
html[data-theme="dark"] .redactor-toolbar {
    background-color: var(--app-surface-2) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .redactor-toolbar li a,
html[data-theme="dark"] .redactor-toolbar a {
    color: var(--app-text) !important;
}
html[data-theme="dark"] .redactor-toolbar li a:hover,
html[data-theme="dark"] .redactor-toolbar a:hover {
    background-color: var(--app-surface-4) !important;
}
html[data-theme="dark"] .redactor-dropdown,
html[data-theme="dark"] #redactor-modal,
html[data-theme="dark"] #redactor-modal-box {
    background-color: var(--app-surface) !important;
    color: var(--app-text) !important;
}

/* FULLCALENDAR ------------------------------------------------------------------------------- */
html[data-theme="dark"] .fc-unthemed th,
html[data-theme="dark"] .fc-unthemed td,
html[data-theme="dark"] .fc-unthemed thead,
html[data-theme="dark"] .fc-unthemed tbody,
html[data-theme="dark"] .fc-unthemed .fc-divider,
html[data-theme="dark"] .fc-unthemed .fc-row,
html[data-theme="dark"] .fc-unthemed .fc-popover {
    border-color: var(--app-border);
}
html[data-theme="dark"] .fc-unthemed .fc-today {
    background: var(--app-color-primary-opaque-3);
}
html[data-theme="dark"] .fc button,
html[data-theme="dark"] .fc-button {
    background: var(--app-surface-3);
    color: var(--app-text);
}
html[data-theme="dark"] .fc-button.fc-state-active,
html[data-theme="dark"] .fc button:hover,
html[data-theme="dark"] .fc-button:hover {
    background: var(--app-surface-4);
}

/* TOASTR ------------------------------------------------------------------------------------- */
html[data-theme="dark"] #toast-container > div {
    box-shadow: 0 0.25rem 0.75rem var(--app-shadow-color);
}