/*
 * Staff portal: dark mode. On when <html data-sp-theme="dark"> (set before the page draws
 * by views/app.php, from the switcher in the top bar: Light, Dark or the device's setting).
 *
 * The portal is drawn almost entirely with the colour tokens and its own --sp-* colours, so
 * most of the work is giving those dark values here: the greys flip (light backgrounds
 * become dark, dark text becomes light) and the golds used as text get lighter. Then the
 * WordPress and ACF controls, which bring their own light colours, are darkened to match.
 * The live previews of banners and messages keep the website's own colours.
 */

html[data-sp-theme="dark"] {
    color-scheme: dark;
}

html[data-sp-theme="dark"] body.staff-app {
    --sp-bg: #141415;
    --sp-surface: #1E1F20;
    --sp-raised: #26272A;
    --sp-border: #3A3530;
    --sp-text: #EDEDED;
    --sp-muted: #B5B6B8;
    --sp-accent: #CFA894;          /* blush 300: links and controls, 7:1 on the surface */
    --sp-accent-ink: #DFC9BA;      /* blush 200: the current page in the menu */
    --sp-accent-soft: #3A2E28;
    --sp-fill: #654033;            /* blush 700: filled chips, counts, selected options (white text 9:1), as the site's buttons on dark */

    /* The greys, turned around */
    --neutral-50: #18191A;
    --neutral-100: #1E1F20;
    --neutral-200: #2E2F31;
    --neutral-300: #3D3E41;
    --neutral-400: #5C5D60;
    --neutral-500: #7E7F82;
    --neutral-600: #9D9EA1;
    --neutral-700: #B5B6B8;
    --neutral-800: #D6D7D8;
    --neutral-900: #EDEDED;
    --black: #EDEDED;              /* in the portal, black is only ever text */

    /* Golds and blushes used for text or tints */
    --tertiary-50: #2A2620;
    --tertiary-100: #3A3326;
    --tertiary-600: #B99D6C;
    --primary-100: #3A2E28;
    --primary-200: #4A3B33;
    --primary-700: #DFC9BA;
    --primary-900: #F1E9E2;

    --text: var(--sp-text);
    --heading: var(--sp-text);
    --text-strong: var(--sp-text);
    --link: var(--sp-accent);
    --link-hover: #DFC9BA;
}

/* The live previews (Announcements) and the job posting pop-up show the website's real colours */
html[data-sp-theme="dark"] body.staff-app :is(.helios-preview, .job-openings__dialog) {
    --neutral-50: #FAFAFA;
    --neutral-100: #F6F6F6;
    --neutral-200: #E6E6E6;
    --neutral-300: #D5D5D5;
    --neutral-400: #B1B1B1;
    --neutral-500: #767676;
    --neutral-600: #707070;
    --neutral-700: #505152;
    --neutral-800: #373838;
    --neutral-900: #212121;
    --black: #000000;
    --tertiary-50: #FAF5EA;
    --tertiary-100: #F3EAD6;
    --tertiary-600: #88602A;
    --primary-100: #F1E9E2;
    --primary-200: #DFC9BA;
    --primary-700: #654033;
    --primary-900: #321C17;
    --text: var(--neutral-800);
    --heading: var(--neutral-900);
}

html[data-sp-theme="dark"] body.staff-app .helios-preview {
    border-color: var(--sp-border);
    background: #26272A;
}

html[data-sp-theme="dark"] body.staff-app .job-openings__dialog {
    color: var(--neutral-800);
}

html[data-sp-theme="dark"] .helios-preview__label {
    color: var(--sp-muted);
}

/* ---------- Portal surfaces that were plain white ---------- */

/* Notes in a card (e.g. "Top bar currently shows"): a step lighter than the card, as the
   light grey is a step darker than the white card in light mode */
html[data-sp-theme="dark"] .staff-app .staff-card .staff-preview {
    background: var(--neutral-200);
}

html[data-sp-theme="dark"] .staff-app :is(.staff-card, .staff-table-wrap, .staff-list, .sp-panel, .sp-stat, .sp-guide-toc, .staff-profile-form) {
    background: var(--sp-surface);
}

html[data-sp-theme="dark"] .staff-app .staff-subtabs a.is-active {
    background: var(--sp-raised);
}

html[data-sp-theme="dark"] .staff-app .staff-subtabs a:hover {
    background: color-mix(in srgb, var(--white) 6%, transparent);
}

html[data-sp-theme="dark"] .staff-app :is(.sp-user, .sp-logout, .sp-icon-button):hover {
    background: color-mix(in srgb, var(--white) 8%, transparent);
}

html[data-sp-theme="dark"] .staff-app .sp-sidebar {
    box-shadow: 0 0 40px rgba(0, 0, 0, .5);
}

/* Buttons: as the site's on dark backgrounds (buttons.css). The blush scale is partly
   turned around above (for text), so the real values are given here. Solid: blush 700,
   deepening on hover (800) and when pressed (900). Outline: a blush 700 border, light text
   (100); on hover the border lightens (600) and a soft tint fills it. */
html[data-sp-theme="dark"] .staff-app .btn--primary.btn--solid {
    --btn-bg: #654033;
    --btn-bg-hover: #4A2D24;
    --btn-bg-active: #321C17;
}

html[data-sp-theme="dark"] .staff-app .btn--primary.btn--outline {
    --btn-text: #F1E9E2;
    --btn-text-hover: #F9F5F1;
    --btn-border: #654033;
    --btn-border-hover: #805443;
    --btn-bg-hover: color-mix(in srgb, #996B57 25%, transparent);
    --btn-bg-active: color-mix(in srgb, #996B57 35%, transparent);
    --btn-focus: #DFC9BA;
}

html[data-sp-theme="dark"] .staff-app .btn--neutral.btn--solid {
    --btn-text: #141415;
    --btn-bg: var(--neutral-900);
    --btn-bg-hover: #FFFFFF;
    --btn-bg-active: var(--neutral-800);
}

/* The status chips: dark tints of their colours, with light text (7:1 or more) */
html[data-sp-theme="dark"] .staff-app :is(.staff-badge-awaiting) { background: #3A2E12; color: #F3CD73; }
html[data-sp-theme="dark"] .staff-app :is(.staff-badge-attention, .staff-badge-res-scheduled) { background: #1C2840; color: #A9C5FA; }
html[data-sp-theme="dark"] .staff-app :is(.staff-badge-deleted) { background: #3D2020; color: #F2A7A7; }
html[data-sp-theme="dark"] .staff-app :is(.staff-badge-res-live) { background: #173326; color: #8FD9B6; }

/* The Overview's "needs attention" figure: a dark amber card */
html[data-sp-theme="dark"] .staff-app .sp-stat.is-alert {
    border-color: #5A4325;
    background: #2A2218;
}

html[data-sp-theme="dark"] .sp-stat.is-alert .sp-stat-icon {
    background: #3D2E1C;
    color: #F0C48A;
}

/* The logo: the light version on dark */
.sp-logo-on-dark {
    display: none;
}

html[data-sp-theme="dark"] .sp-logo-on-light {
    display: none;
}

html[data-sp-theme="dark"] .sp-logo-on-dark {
    display: inline-block;
}

/* ---------- Form controls (the portal's own, ACF's and WordPress's) ---------- */

html[data-sp-theme="dark"] .staff-app :is(input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="date"], select, textarea) {
    border-color: var(--neutral-300);
    background-color: var(--sp-surface);
    color: var(--sp-text);
}

html[data-sp-theme="dark"] .staff-app :is(input, textarea)::placeholder {
    color: var(--neutral-500);
}

html[data-sp-theme="dark"] .staff-app .acf-field .acf-label :is(label, .description),
html[data-sp-theme="dark"] .staff-app .acf-field p.description {
    color: inherit;
}

html[data-sp-theme="dark"] .staff-app .acf-field .acf-label label {
    color: var(--sp-text);
}

html[data-sp-theme="dark"] .staff-app .acf-field .description {
    color: var(--sp-muted);
}

/* Relationship pickers (e.g. an article's related articles): ACF draws the two lists light */
html[data-sp-theme="dark"] .staff-app .acf-relationship :is(.filters, .selection, .choices, .values, .choices-list, .values-list) {
    border-color: var(--neutral-300);
    background: var(--sp-surface);
}

html[data-sp-theme="dark"] .staff-app .acf-relationship .acf-rel-item {
    color: var(--sp-text);
}

html[data-sp-theme="dark"] .staff-app .acf-relationship .acf-rel-item:hover,
html[data-sp-theme="dark"] .staff-app .acf-relationship .acf-rel-item:focus {
    background: var(--sp-raised);
    color: var(--sp-text);
}

html[data-sp-theme="dark"] .staff-app .acf-relationship .acf-rel-label {
    background: var(--sp-raised);
    color: var(--sp-muted);
}

/* Repeaters, groups and tables */
html[data-sp-theme="dark"] .staff-app :is(.acf-table, .acf-repeater .acf-table) {
    border-color: var(--neutral-300);
    background: var(--sp-surface);
}

html[data-sp-theme="dark"] .staff-app .acf-table > :is(thead, tbody) > tr > :is(th, td) {
    border-color: var(--neutral-300);
    background: transparent;
    color: var(--sp-text);
}

html[data-sp-theme="dark"] .staff-app .acf-repeater .acf-row-handle {
    border-color: var(--neutral-300) !important;
    background: var(--sp-raised) !important;
    color: var(--sp-muted);
}

html[data-sp-theme="dark"] .staff-app .acf-repeater .acf-row-handle .acf-icon {
    border-color: var(--neutral-400);
    background: var(--sp-surface);
    color: var(--sp-muted);
}

html[data-sp-theme="dark"] .staff-app :is(.acf-fields, .acf-fields > .acf-field, .acf-field-group .acf-fields) {
    border-color: var(--neutral-300);
}

html[data-sp-theme="dark"] .staff-app .acf-accordion {
    border-color: var(--neutral-300);
    background: transparent;
}

html[data-sp-theme="dark"] .staff-app .acf-accordion .acf-accordion-title {
    color: var(--sp-text);
}

html[data-sp-theme="dark"] .staff-app .acf-accordion .acf-accordion-title:hover {
    background: var(--sp-raised);
}

/* Switches and button groups */
html[data-sp-theme="dark"] .staff-app .acf-switch {
    border-color: var(--neutral-400);
    background: var(--neutral-200);
    color: var(--sp-muted);
}

html[data-sp-theme="dark"] .staff-app .acf-switch .acf-switch-slider {
    border-color: var(--neutral-400);
    background: var(--neutral-700);
}

html[data-sp-theme="dark"] .staff-app .acf-switch.-on {
    border-color: var(--sp-fill);
    background: var(--sp-fill);
    color: #FFFFFF;
}

html[data-sp-theme="dark"] .staff-app .acf-switch.-on .acf-switch-slider {
    background: #FFFFFF;
}

html[data-sp-theme="dark"] .staff-app .acf-button-group label {
    border-color: var(--neutral-300);
    background: var(--sp-surface);
    color: var(--sp-text);
}

html[data-sp-theme="dark"] .staff-app .acf-button-group label.selected {
    border-color: var(--sp-fill);
    background: var(--sp-fill);
    color: #FFFFFF;
}

/* Choice lists (select2), checkboxes, radios */
html[data-sp-theme="dark"] .staff-app .select2-container--default :is(.select2-selection--single, .select2-selection--multiple) {
    border-color: var(--neutral-300);
    background: var(--sp-surface);
}

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

html[data-sp-theme="dark"] .staff-app .select2-container--default .select2-selection--multiple .select2-selection__choice {
    border-color: var(--neutral-400);
    background: var(--sp-raised);
}

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

html[data-sp-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-sp-theme="dark"] .select2-container--default .select2-results__option--highlighted[data-selected] {
    background: #654033;
    color: #FFFFFF;
}

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

html[data-sp-theme="dark"] .staff-app :is(.acf-checkbox-list, .acf-radio-list) li label,
html[data-sp-theme="dark"] .staff-app .acf-taxonomy-field .categorychecklist-holder {
    border-color: var(--neutral-300);
    color: var(--sp-text);
}

/* Images and files */
html[data-sp-theme="dark"] .staff-app :is(.acf-image-uploader .image-wrap, .acf-file-uploader .file-wrap) {
    border-color: var(--neutral-300);
    background: var(--sp-raised);
}

html[data-sp-theme="dark"] .staff-app .acf-file-uploader .file-info {
    color: var(--sp-text);
}

/* The text editor's toolbar and tabs (its writing area: staff.js) */
html[data-sp-theme="dark"] .staff-app .wp-editor-container {
    border-color: var(--neutral-300) !important;
}

html[data-sp-theme="dark"] .staff-app :is(.mce-panel, .mce-toolbar-grp, .mce-statusbar, .quicktags-toolbar) {
    border-color: var(--neutral-300) !important;
    background: var(--sp-raised) !important;
}

html[data-sp-theme="dark"] .staff-app :is(.mce-btn, .mce-btn button, .mce-ico, .mce-caret, .mce-path, .mce-path-item, .mce-wordcount) {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--sp-text) !important;
}

html[data-sp-theme="dark"] .staff-app .mce-caret {
    border-top-color: var(--sp-text) !important;
}

html[data-sp-theme="dark"] .staff-app :is(.mce-btn:hover, .mce-btn.mce-active, .mce-btn:focus) {
    background: var(--neutral-300) !important;
}

html[data-sp-theme="dark"] .staff-app .mce-menu,
html[data-sp-theme="dark"] .mce-menu.mce-floatpanel {
    border-color: var(--neutral-300) !important;
    background: var(--sp-surface) !important;
}

html[data-sp-theme="dark"] .mce-menu .mce-menu-item :is(.mce-text, .mce-ico) {
    color: var(--sp-text) !important;
}

html[data-sp-theme="dark"] .mce-menu .mce-menu-item:hover,
html[data-sp-theme="dark"] .mce-menu .mce-menu-item.mce-active {
    background: var(--sp-raised) !important;
}

html[data-sp-theme="dark"] .staff-app .wp-switch-editor {
    border-color: var(--neutral-300);
    background: var(--sp-raised);
    color: var(--sp-muted);
}

html[data-sp-theme="dark"] .staff-app :is(.tmce-active .switch-tmce, .html-active .switch-html) {
    border-bottom-color: var(--sp-surface);
    background: var(--sp-surface);
    color: var(--sp-text);
}

html[data-sp-theme="dark"] .staff-app .quicktags-toolbar .button {
    border-color: var(--neutral-400);
    background: var(--sp-surface);
    color: var(--sp-text);
}

html[data-sp-theme="dark"] .staff-app .wp-editor-area {
    background: var(--sp-surface);
    color: var(--sp-text);
}

/* Date pickers and colour pickers pop up over the page */
html[data-sp-theme="dark"] .ui-datepicker {
    border-color: var(--neutral-300) !important;
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
}

html[data-sp-theme="dark"] .ui-datepicker .ui-datepicker-header {
    border-color: var(--neutral-300) !important;
    background: var(--sp-raised) !important;
    color: var(--sp-text) !important;
}

html[data-sp-theme="dark"] .ui-datepicker :is(.ui-state-default, .ui-widget-content .ui-state-default) {
    border-color: var(--neutral-300) !important;
    background: var(--sp-raised) !important;
    color: var(--sp-text) !important;
}

html[data-sp-theme="dark"] .ui-datepicker .ui-state-active {
    border-color: #654033 !important;
    background: #654033 !important;
    color: #FFFFFF !important;
}

/* ---------- The switcher (top bar) ---------- */

.staff-app .sp-icon-button.sp-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sp-theme-toggle .sp-theme-icon {
    display: none;
}

html[data-sp-theme-choice="auto"] .sp-theme-toggle .sp-theme-icon--auto,
html[data-sp-theme-choice="light"] .sp-theme-toggle .sp-theme-icon--light,
html[data-sp-theme-choice="dark"] .sp-theme-toggle .sp-theme-icon--dark,
html:not([data-sp-theme-choice]) .sp-theme-toggle .sp-theme-icon--auto {
    display: block;
}

/* ---------- Status colours that sit on the page (not on their own light chips) ---------- */

html[data-sp-theme="dark"] body.staff-app {
    --error: #FF8F85;              /* red text: 6:1 on the surface */
}

html[data-sp-theme="dark"] .staff-app .staff-link-danger {
    color: #FF8F85;
}

html[data-sp-theme="dark"] .staff-app .staff-blog-state.is-on {
    color: #8FD9B6;
}

html[data-sp-theme="dark"] .staff-app .staff-blog-state {
    border-color: var(--neutral-300);
}

html[data-sp-theme="dark"] .staff-app .sp-callout-warn {
    border-left-color: #F0A35E;
    background: #33261A;
    color: var(--sp-text);
}

html[data-sp-theme="dark"] .staff-app .staff-acf-form .resource-add-tag {
    background: var(--sp-fill);
    color: #FFFFFF;
}

/* WordPress's own buttons (e.g. Add Media) */
html[data-sp-theme="dark"] .staff-app .wp-core-ui .button,
html[data-sp-theme="dark"] .staff-app .button:not(.btn) {
    border-color: var(--neutral-400);
    background: var(--sp-raised);
    color: var(--sp-text);
}

html[data-sp-theme="dark"] .staff-app .wp-core-ui .button:hover,
html[data-sp-theme="dark"] .staff-app .button:not(.btn):hover {
    border-color: var(--sp-accent);
    color: var(--sp-accent);
}

/* ---------- Pop-ups ---------- */

/* The dialogs' dimmed backdrop (its light-mode colour is a grey that turns light here) */
html[data-sp-theme="dark"] .sp-dialog::backdrop {
    background: rgba(0, 0, 0, .65);
}

html[data-sp-theme="dark"] .sp-dialog {
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

/* The document viewer (attachments and resources, from the Resources block): a dark frame
   around the white pages */
html[data-sp-theme="dark"] .resources__viewer {
    background: var(--sp-bg);
}

html[data-sp-theme="dark"] .resources__viewer-bar {
    border-bottom-color: var(--sp-border);
    background: var(--sp-surface);
}

html[data-sp-theme="dark"] .resources__viewer-title {
    color: var(--sp-text);
}

html[data-sp-theme="dark"] :is(.resources__viewer-pages, .resources__viewer-error) {
    color: var(--sp-muted);
}

html[data-sp-theme="dark"] .resources__viewer-link {
    color: var(--sp-accent);
}

html[data-sp-theme="dark"] .resources__viewer .resources__viewer-close {
    background: var(--sp-raised);
    color: var(--sp-text);
}

html[data-sp-theme="dark"] .resources__viewer-page {
    background: #FFFFFF;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

/* The video pop-up: black, with its white close button */
html[data-sp-theme="dark"] :is(.resources__dialog, .resources__player :is(iframe, video)) {
    background: #000000;
}

html[data-sp-theme="dark"] .resources__dialog .resources__close {
    background: #FFFFFF;
    color: #141415;
}