/**
 * Theme Name: USAC Dark
 * Color Scheme: dark
 * Description: Dark control panel. Neo’s canvases follow the same ramp as the rest of the CP. Other plugins should follow the same ramp.
 */

/*
 * Neo hard-codes a light palette. Block bodies use var(--white), which Cast leaves
 * alone (it is ink on a fill more often than a surface), and tabs, nested Matrix,
 * and even-level bars use literals like #fff and #ebf2fa. The dark base never
 * reaches those, so a block stays a white card on a dark entry screen.
 *
 * Selectors carry the theme attribute so they beat Neo’s own rules.
 */

html[data-cast-theme="usac"] .ni_block {
    background-color: var(--pane-bg);
    border-color: hsl(var(--gray-200-hsl));
    color: var(--text-color);
}

html[data-cast-theme="usac"] .ni_block.is-level-even,
html[data-cast-theme="usac"] .ni_block.is-empty.is-level-odd {
    background-color: hsl(var(--gray-050-hsl));
}

html[data-cast-theme="usac"] .ni_block.is-empty.is-level-even {
    background-color: hsl(var(--gray-150-hsl));
}

html[data-cast-theme="usac"] .ni_block.is-level-even > .ni_block_topbar {
    background-color: hsl(var(--gray-150-hsl));
}

html[data-cast-theme="usac"] body.ltr .ni_block.is-level-even > .ni_block_topbar > .ni_block_topbar_left::before {
    background-image: linear-gradient(-90deg, hsl(var(--gray-150-hsl)) 0, transparent 40px);
}

html[data-cast-theme="usac"] body.rtl .ni_block.is-level-even > .ni_block_topbar > .ni_block_topbar_left::before {
    background-image: linear-gradient(90deg, hsl(var(--gray-150-hsl)) 0, transparent 40px);
}

/* Tabs. The selected one is painted to match the block body so it still reads as attached. */
html[data-cast-theme="usac"] .ni_block_topbar_item.tabs .tab {
    border-bottom-color: transparent;
    color: var(--light-text-color);
}

html[data-cast-theme="usac"] .ni_block_topbar_item.tabs .tab:hover {
    color: var(--link-color);
}

html[data-cast-theme="usac"] .ni_block_topbar_item.tabs .tab.is-selected {
    background-color: var(--pane-bg);
    border-left-color: hsl(var(--gray-200-hsl));
    border-right-color: hsl(var(--gray-200-hsl));
    border-bottom-color: var(--pane-bg);
    color: var(--text-color);
}

html[data-cast-theme="usac"] .ni_block_topbar_item.tabs .tab.is-selected.is-blank {
    background-color: transparent;
    border-bottom-color: transparent;
}

html[data-cast-theme="usac"] .ni_block.is-level-even > .ni_block_topbar > .ni_block_topbar_right > .ni_block_topbar_item.tabs .tab.is-selected {
    background-color: hsl(var(--gray-050-hsl));
    border-bottom-color: hsl(var(--gray-050-hsl));
    color: var(--text-color);
}

html[data-cast-theme="usac"] .ni_block.is-level-even > .ni_block_topbar > .ni_block_topbar_right > .ni_block_topbar_item.tabs .tab.is-blank {
    border-bottom-color: transparent;
}

html[data-cast-theme="usac"] .ni_block_topbar_item.tabs .tabs_btn {
    background-color: var(--pane-bg);
    border-color: hsl(var(--gray-200-hsl));
    border-bottom-color: var(--pane-bg);
    color: var(--text-color);
}

html[data-cast-theme="usac"] .ni_block_topbar_item.preview-container .preview {
    color: var(--light-text-color);
}

html[data-cast-theme="usac"] body.ltr .ni_block_topbar_item.preview-container .preview_section {
    border-left-color: var(--border-hairline);
}

html[data-cast-theme="usac"] body.rtl .ni_block_topbar_item.preview-container .preview_section {
    border-right-color: var(--border-hairline);
}

html[data-cast-theme="usac"] .ni_block_topbar_item > a {
    color: var(--light-text-color);
}

html[data-cast-theme="usac"] .ni_block_topbar_item > a:hover {
    color: var(--link-color);
}

html[data-cast-theme="usac"] .ni_block_body > .ni_block_children:not(:first-child),
html[data-cast-theme="usac"] .ni_block_collapsed-children_child {
    border-top-color: var(--border-hairline);
}

html[data-cast-theme="usac"] .ni_block_collapsed-children_child {
    background-color: hsl(var(--gray-150-hsl));
}

html[data-cast-theme="usac"] .ni_newblockgrid ul:not(:last-child),
html[data-cast-theme="usac"] .ni_newblocklist ul:not(:last-child) {
    border-bottom-color: var(--border-hairline);
}

/* Fallback block-type icon is a black stroke, which disappears on a dark menu. */
html[data-cast-theme="usac"] .ni_newblockgrid_icon.defaulticon,
html[data-cast-theme="usac"] .ni_newblocklist_icon.defaulticon {
    filter: invert(1);
    opacity: 0.8;
}

html[data-cast-theme="usac"] .ni_block .matrixblock,
html[data-cast-theme="usac"] .neo-matrixblock {
    background-color: hsl(var(--gray-150-hsl));
    border-color: hsl(var(--gray-200-hsl));
    box-shadow: none;
    color: var(--text-color);
}

html[data-cast-theme="usac"] .ni_block .matrixblock > .titlebar,
html[data-cast-theme="usac"] .neo-matrixblock > .titlebar {
    background-color: hsl(var(--gray-200-hsl));
    border-bottom-color: var(--border-hairline);
    color: var(--text-color);
}

/* Block-type editor. The selected tab is #fff; the pane behind it is not. */
html[data-cast-theme="usac"] .nc_main_tabs_tab:hover {
    color: var(--link-color);
}

html[data-cast-theme="usac"] .nc_main_tabs_tab.is-selected {
    background-color: var(--pane-bg);
    border-color: var(--border-hairline);
    color: var(--text-color);
}

/*
 * SEOmatic's entry field is a light card: #ebedef chrome, #fff tab body, and
 * vue-treeselect controls filled #fbfcfe with #333 text. Social previews are
 * left as they are — they are pictures of Google, Facebook, and X.
 */

html[data-cast-theme="usac"] div.seomatic-field {
    background-color: hsl(var(--gray-050-hsl));
    border-color: hsl(var(--gray-200-hsl));
    color: var(--text-color);
}

html[data-cast-theme="usac"] div.seomatic-tab-content {
    background: var(--pane-bg);
    color: var(--text-color);
}

html[data-cast-theme="usac"] nav.seomatic-tabs {
    box-shadow: inset 0 -1px hsl(var(--gray-200-hsl));
}

html[data-cast-theme="usac"] nav.seomatic-tabs ul li {
    border-right-color: var(--border-hairline);
}

html[data-cast-theme="usac"] nav.seomatic-tabs ul li a {
    color: var(--light-text-color);
}

html[data-cast-theme="usac"] nav.seomatic-tabs ul li a:not(.sel):hover {
    color: var(--link-color);
}

html[data-cast-theme="usac"] nav.seomatic-tabs ul li a.sel {
    background: var(--pane-bg);
    color: var(--text-color);
}

html[data-cast-theme="usac"] nav.seomatic-tabs ul li a:after {
    background: linear-gradient(90deg, transparent, hsl(var(--gray-050-hsl)) 17px);
}

html[data-cast-theme="usac"] nav.seomatic-tabs ul li a.sel:after {
    background: linear-gradient(90deg, transparent, var(--pane-bg) 17px);
}

html[data-cast-theme="usac"] .seomatic-field .instructions {
    color: var(--text-color);
}

/* Inherited rows are faded to 0.25, which disappears on a dark pane. */
html[data-cast-theme="usac"] .inherited.value-wrapper .instructions p,
html[data-cast-theme="usac"] .inherited.value-wrapper .heading > label,
html[data-cast-theme="usac"] .inherited.value-wrapper div.vue-treeselect__control {
    opacity: 0.55;
}

html[data-cast-theme="usac"] div.vue-treeselect > div.vue-treeselect__control,
html[data-cast-theme="usac"] .vue-treeselect--disabled .vue-treeselect__control {
    background-color: var(--input-bg);
    border-color: var(--input-border-color);
    box-shadow: none;
    color: var(--text-color);
}

html[data-cast-theme="usac"] .vue-treeselect:not(.vue-treeselect--disabled):not(.vue-treeselect--focused) .vue-treeselect__control:hover,
html[data-cast-theme="usac"] .vue-treeselect--open .vue-treeselect__control {
    border-color: hsl(var(--gray-400-hsl));
}

html[data-cast-theme="usac"] .vue-treeselect__single-value,
html[data-cast-theme="usac"] .vue-treeselect__input {
    color: var(--text-color);
}

html[data-cast-theme="usac"] .vue-treeselect__placeholder,
html[data-cast-theme="usac"] .vue-treeselect--focused.vue-treeselect--searchable .vue-treeselect__single-value {
    color: var(--fg-subtle);
}

html[data-cast-theme="usac"] .vue-treeselect__menu {
    background: var(--cast-surface);
    border-color: hsl(var(--gray-300-hsl));
    color: var(--text-color);
}

html[data-cast-theme="usac"] .vue-treeselect__option--highlight {
    background: var(--cast-surface-hover);
}

html[data-cast-theme="usac"] .vue-treeselect--single .vue-treeselect__option--selected,
html[data-cast-theme="usac"] .vue-treeselect--single .vue-treeselect__option--selected:hover {
    background: hsl(var(--gray-300-hsl));
    color: var(--text-color);
}

html[data-cast-theme="usac"] div.vue-treeselect__multi-value-item,
html[data-cast-theme="usac"] span.vue-treeselect__value-remove {
    background-color: var(--cast-chip);
    color: var(--text-color);
}

html[data-cast-theme="usac"] h4.metadata-title-separator {
    color: var(--light-text-color);
}

html[data-cast-theme="usac"] h4.metadata-title-separator span {
    background: var(--pane-bg);
}

html[data-cast-theme="usac"] .content-seo-enabled,
html[data-cast-theme="usac"] .content-seo-disabled,
html[data-cast-theme="usac"] li.checkboxChecklist {
    color: var(--text-color);
}

html[data-cast-theme="usac"] li.checkboxChecklist.checked {
    color: var(--fg-success);
}

html[data-cast-theme="usac"] div.preview-modal {
    background-color: var(--modal-bg);
    color: var(--text-color);
}

html[data-cast-theme="usac"] div.displaypreview {
    border-color: var(--border-hairline);
}

/*
 * Hyper paints its link cards and field settings with a light blue-grey
 * (#f3f7fc, #dee7ef) and a white body. Matrix blocks rendered inside a link
 * sit on that body, so the card has to be a dark pane before they can follow
 * the rest of the control panel.
 */

html[data-cast-theme="usac"] .hyper-wrapper,
html[data-cast-theme="usac"] .hc-wrapper {
    border-color: hsl(var(--gray-200-hsl));
    color: var(--text-color);
}

html[data-cast-theme="usac"] .hyper-header {
    background-color: hsl(var(--gray-150-hsl));
    border-bottom-color: hsl(var(--gray-200-hsl));
}

html[data-cast-theme="usac"] .hyper-header-type select {
    color: var(--text-color);
    background: var(--input-bg);
    border-color: var(--input-border-color);
}

html[data-cast-theme="usac"] .hyper-header-new-window-label,
html[data-cast-theme="usac"] .hyper-header-type-icon,
html[data-cast-theme="usac"] .hyper-header-settings,
html[data-cast-theme="usac"] .hyper-header-move,
html[data-cast-theme="usac"] .hc-sidebar-item-move {
    color: var(--light-text-color);
}

html[data-cast-theme="usac"] .hyper-body-wrapper [data-hyper-portal] {
    background: var(--pane-bg);
    color: var(--text-color);
}

html[data-cast-theme="usac"] .hc-wrapper {
    background-color: var(--pane-bg);
}

html[data-cast-theme="usac"] .hc-sidebar {
    background-color: hsl(var(--gray-050-hsl));
    border-right-color: hsl(var(--gray-200-hsl));
}

html[data-cast-theme="usac"] .hc-sidebar-item {
    background-color: hsl(var(--gray-050-hsl));
    box-shadow: inset 0 -1px hsl(var(--gray-200-hsl));
    color: var(--text-color);
}

html[data-cast-theme="usac"] .hc-sidebar-item.sel {
    background: hsl(var(--gray-200-hsl));
}

html[data-cast-theme="usac"] .hc-sidebar-item.has-errors {
    background: var(--bg-error);
}

html[data-cast-theme="usac"] .hc-sidebar-item.has-errors.sel {
    background: color-mix(in srgb, var(--bg-error) 65%, var(--error-color));
}

html[data-cast-theme="usac"] .hc-pane-empty {
    color: var(--light-text-color);
    opacity: 1;
}

html[data-cast-theme="usac"] .hyper-workspace {
    background-color: hsl(var(--gray-050-hsl));
    background-image:
        linear-gradient(to right, hsl(var(--gray-200-hsl)) 1px, transparent 0),
        linear-gradient(to bottom, hsl(var(--gray-200-hsl)) 1px, transparent 1px);
    box-shadow: inset 0 1px 3px -1px rgb(0 0 0 / 45%);
}

html[data-cast-theme="usac"] .hyper-menu ul li .menu-item {
    color: var(--text-color);
}

html[data-cast-theme="usac"] .hyper-menu ul li .menu-item:hover {
    background-color: var(--cast-surface-hover);
    color: var(--text-color);
}

/* Hyper's type menu is a Tippy "light-border" popover, appended to the body. */
html[data-cast-theme="usac"] .tippy-box[data-theme~="light-border"] {
    background-color: var(--cast-surface);
    border-color: hsl(var(--gray-300-hsl));
    color: var(--text-color);
    box-shadow: var(--cast-popover-shadow);
}

html[data-cast-theme="usac"] .tippy-box[data-theme~="light-border"] > .tippy-backdrop,
html[data-cast-theme="usac"] .tippy-box[data-theme~="light-border"] > .tippy-svg-arrow {
    background-color: var(--cast-surface);
    fill: var(--cast-surface);
}

html[data-cast-theme="usac"] .tippy-box[data-theme~="light-border"][data-placement^="top"] > .tippy-arrow:before {
    border-top-color: var(--cast-surface);
}

html[data-cast-theme="usac"] .tippy-box[data-theme~="light-border"][data-placement^="bottom"] > .tippy-arrow:before {
    border-bottom-color: var(--cast-surface);
}

html[data-cast-theme="usac"] .tippy-box[data-theme~="light-border"][data-placement^="left"] > .tippy-arrow:before {
    border-left-color: var(--cast-surface);
}

html[data-cast-theme="usac"] .tippy-box[data-theme~="light-border"][data-placement^="right"] > .tippy-arrow:before {
    border-right-color: var(--cast-surface);
}

/*
 * Verbb Navigation mounts the menu builder in open shadow roots. Tailwind’s
 * colours sit on those hosts inside @layer theme, so an unlayered rule here
 * wins and the node tree, row states, and Plugin Kit surfaces follow the ramp.
 * A few literals (accordion bars, dialog chrome, type chips) are inside the
 * shadow, where this file cannot reach; modules/cp/usac-navigation.js covers those.
 */

html[data-cast-theme="usac"] :is(
    #navigation-builder-app,
    #navigation-builder-header-root,
    #navigation-builder-instructions-root,
    #navigation-builder-actions-root,
    #navigation-builder-sidebar-root
) {
    color-scheme: dark;

    --color-white: var(--pane-bg);
    --color-black: var(--text-color);
    --color-gray-50: hsl(var(--gray-150-hsl));
    --color-gray-100: hsl(var(--gray-200-hsl));
    --color-gray-200: hsl(var(--gray-300-hsl));
    --color-gray-400: hsl(var(--gray-500-hsl));
    --color-gray-500: hsl(var(--gray-550-hsl));
    --color-gray-600: hsl(var(--gray-600-hsl));
    --color-gray-700: hsl(var(--gray-700-hsl));
    --color-gray-800: hsl(var(--gray-800-hsl));
    --color-gray-900: hsl(var(--gray-900-hsl));
    --color-sky-50: color-mix(in srgb, var(--link-color) 16%, var(--pane-bg));
    --color-sky-500: var(--link-color);
    --color-sky-600: var(--link-color);
    --color-orange-50: var(--bg-warning);
    --color-amber-50: var(--bg-warning);
    --color-amber-300: var(--fg-warning);
    --color-amber-700: var(--fg-warning);
    --color-amber-950: var(--fg-warning);
    --color-red-50: var(--bg-error);
    --color-slate-100: var(--border-hairline);
    --color-slate-200: var(--border-hairline-medium);
    --color-emerald-600: var(--fg-success);
    --color-green-700: var(--fg-success);

    --pk-color-white: var(--pane-bg);
    --pk-color-black: var(--text-color);
    --pk-color-link: var(--link-color);
    --pk-color-gray-50: hsl(var(--gray-150-hsl));
    --pk-color-gray-100: hsl(var(--gray-200-hsl));
    --pk-color-gray-150: hsl(var(--gray-200-hsl));
    --pk-color-gray-200: hsl(var(--gray-300-hsl));
    --pk-color-gray-250: hsl(var(--gray-300-hsl));
    --pk-color-gray-300: hsl(var(--gray-400-hsl));
    --pk-color-gray-350: hsl(var(--gray-400-hsl));
    --pk-color-gray-400: hsl(var(--gray-500-hsl));
    --pk-color-gray-500: hsl(var(--gray-550-hsl));
    --pk-color-gray-550: hsl(var(--gray-600-hsl));
    --pk-color-gray-600: hsl(var(--gray-600-hsl));
    --pk-color-gray-700: var(--text-color);
    --pk-color-gray-800: var(--text-color);
    --pk-color-gray-900: var(--text-color);
    --pk-input-bg: var(--input-bg);
    --pk-input-border-color: var(--input-border-color);
    --pk-input-placeholder-color: var(--fg-subtle);
    --pk-action-on: var(--text-color);
    --pk-action-fill: hsl(var(--gray-200-hsl));
    --pk-action-fill-hover: hsl(var(--gray-300-hsl));
    --pk-action-fill-active: hsl(var(--gray-350-hsl));
    --pk-action-primary-on: #fff;
    --pk-lightswitch-track-off: hsl(var(--gray-300-hsl));
    --pk-lightswitch-border-color: var(--border-hairline-dark);
}

html[data-cast-theme="usac"] .pk-dialog__header {
    background: hsl(var(--gray-150-hsl));
    color: var(--text-color);
    border-color: hsl(var(--gray-300-hsl));
}

html[data-cast-theme="usac"] .pk-dialog__title {
    color: var(--text-color);
}

html[data-cast-theme="usac"] .pk-dialog__footer {
    background: hsl(var(--gray-200-hsl));
    color: var(--text-color);
    border-color: hsl(var(--gray-300-hsl));
}

/*
 * Image and table captions. The words are pinned to #333 on a #f7f7f7 bar.
 * Focusing the caption — which is what happens while someone is typing —
 * repaints that bar with the input background and leaves the #333 in place,
 * so the caption disappears into the field.
 */

html[data-cast-theme="usac"] {
    --ck-content-color-image-caption-text: var(--text-color);
    --ck-content-color-image-caption-background: var(--input-bg);
    --ck-content-color-table-caption-text: var(--text-color);
    --ck-content-color-table-caption-background: var(--input-bg);
}

html[data-cast-theme="usac"] .ck.ck-content .image > figcaption.ck-placeholder::before,
html[data-cast-theme="usac"] .ck.ck-content .table > figcaption.ck-placeholder::before,
html[data-cast-theme="usac"] .ck.ck-content figure.table > table > caption.ck-placeholder::before {
    color: var(--light-text-color);
}

/*
 * Editor headings. The field stylesheet paints them #011E41, the site blue.
 * On the dark canvas that blue sits in the same range as the pane, so
 * "Elite Women's Endurance" drops out while the paragraph under it stays lit.
 */

html[data-cast-theme="usac"] .ck.ck-content :is(h1, h2, h3, h4, h5, h6) {
    color: #fff;
}

/*
 * Sherlock paints its headings black and its subheadings a light-theme gray.
 * On a dark pane the title and the pass/fail line vanish.
 */

html[data-cast-theme="usac"] .sherlock h1 {
    color: var(--text-color);
}

html[data-cast-theme="usac"] .sherlock h2 {
    color: var(--light-text-color);
}

/*
 * Toolbar labels and the hover tip. The tip takes its words from the editor
 * background, which Craft pins to the input colour. On this theme that colour
 * is darker than the tip, so "Bulleted List" sinks into it. A selected row in
 * a menu does the same with its label. The style grid keeps a light bar under
 * its names, and Save / Cancel keep their own colours.
 */

html[data-cast-theme="usac"] {
    --ck-color-tooltip-text: var(--text-color);
    --ck-color-list-button-on-text: var(--text-color);
}

html[data-cast-theme="usac"] .ck.ck-tooltip .ck-tooltip__text {
    color: var(--text-color);
}

html[data-cast-theme="usac"] .ck.ck-button:not(
    .ck-style-grid__button,
    .ck-button-save,
    .ck-button-cancel,
    .ck-button-action
) .ck-button__label {
    color: var(--text-color);
}