/* S4M brand colour overrides. Loaded after vdp.css so these win over its green
   defaults. Brand-neutral layout (date-period ranges, close/input spacing, the spin
   keyframe) is not repeated here -- it lives in vdp.css. */
.table-filters .table-filters__save-filters-state-container {
    background: #fd0;
    border-color: #fd0;
    color: #1d1d1b;
    /* align with the .15rem radius of the regular S4M .btn (style_s4m.css gives this container 4px) */
    border-radius: 0.15rem;
}

/* Selectors must mirror style_s4m.css's full ".table-filters ..." forms: shorter ones
   lose the specificity contest against its white-on-black styling (white text/icon). */
.table-filters .table-filters__save-filters-state-container svg * {
    fill: #1d1d1b;
}

.table-filters .table-filters__save-filters-state-container .btn,
.table-filters .table-filters__save-filters-state-container .recalculate {
    color: #1d1d1b !important;
}

.table-filters .table-filters__save-filters-state-container .table-filters__save-filters-state-save-confirmation-container a {
    color: #1d1d1b;
}

.table-filters .table-filters__save-filters-state-name {
    border-bottom-color: #1d1d1b;
    color: #1d1d1b;
}

.table-filters__save-filters-state-name::placeholder {
    color: rgba(29, 29, 27, 0.5);
}

.table-filters-select2-primary {
    background-color: #fd0;
    border-color: #fd0;
}

.table-filters-select2-primary .select2-selection__rendered {
    color: #1d1d1b;
}

.table-filters-select2-primary .select2-selection__placeholder {
    color: rgba(29, 29, 27, 0.5);
}

.table-filters-select2-primary .select2-selection__arrow b {
    border-color: #1d1d1b;
}

.table-filters-select2-primary .select2-results__option[aria-selected=true] {
    background-color: rgba(255, 221, 0, 0.3);
}

.table-filters-select2-primary .select2-results__option--highlighted[aria-selected] {
    background-color: #d4b200;
    color: #1d1d1b;
}

.table-filters-select2-primary .select2-results__option--highlighted[aria-selected] svg {
    fill: #1d1d1b;
}

.table-filters-select2-primary.select2-dropdown {
    background-color: #fd0;
    border-color: #fd0;
    color: #1d1d1b;
}

.table-filters-select2-primary.select2-dropdown svg * {
    fill: #1d1d1b;
}

.table-filters-select2-spinner {
    border-color: rgba(255, 221, 0, 0.3);
    border-top-color: #fd0;
}

/* Magnifier icons. style_s4m.css is generated and must not be edited, so everything
   is re-pointed here: two of its rules still used the green VDP icon (select2 search,
   tree filter), and the S4M assets were renamed icon_zoom_green* -> icon_zoom_black*
   to match their actual color, so its other references need re-pointing too. */
.searchIcon {
    background-image: url(../img/s4m/icon_zoom_black.png);
}
.select2-search--dropdown .select2-search__field,
.tree__filter,
.block-filter .product-search-term,
.block-addresses table td.field-view a,
.block-comparison-table table td.field-view a,
.block-inbox table td.field-view a,
.block-product.block-product-numbers table td.field-view a,
.block-shopping-cart table td.field-view a,
.item-order-full .field-products table td.field-view a,
table.dataTable td.field-view a {
    background-image: url(../img/s4m/icon_zoom_black.png);
}
.block-addresses table td.field-view a:hover,
.block-comparison-table table td.field-view a:hover,
.block-inbox table td.field-view a:hover,
.block-product.block-product-numbers table td.field-view a:hover,
.block-shopping-cart table td.field-view a:hover,
.item-order-full .field-products table td.field-view a:hover,
table.dataTable td.field-view a:hover {
    background-image: url(../img/s4m/icon_zoom_black_hover.png);
}

/* QuickForm submit button (.form-item.button, green in vdp.css), e.g. "Save" on the
   property-values page: S4M button colors (radius already matches the S4M .btn). */
.form-item.button {
    background: #fd0;
    color: #1d1d1b;
}

/* Favorite star + sidebar favorites (green in vdp.css): black on S4M. */
.favorite-star:hover {
    border-color: #1d1d1b;
}
.favorite-star__icon {
    stroke: #1d1d1b;
}
.favorite-star.is-active .favorite-star__icon {
    fill: #1d1d1b;
    stroke: #1d1d1b;
}
.admin-menu__favorites-move:hover,
.admin-menu__favorites-edit:hover {
    color: #1d1d1b;
}
.favorite-edit-input {
    border-color: #1d1d1b;
}

/* Property-values page (Machine eigenschap waarden). Its CSS (propvals.css,
   vdp.propvals.css, vdp.fancytree.css) is added per page AFTER this file, so these
   need the body.s4m2024 specificity bump and matching !important where the originals
   use it. Green -> black, active green -> yellow, pale green -> pale yellow. */
body.s4m2024 .page-propvals .form .form-item[class*=tree] {
    border-color: #1d1d1b;
}
body.s4m2024 .page-propvals .tree-values > #path {
    border-color: #1d1d1b;
    color: #1d1d1b;
    background: #fff7cc;
}
body.s4m2024 .page-propvals table tbody td {
    border-color: #1d1d1b;
}
body.s4m2024 table.fancytree-ext-table tbody tr.fancytree-selected {
    background-color: #fff7cc !important;
}
body.s4m2024 table.fancytree-ext-table tbody tr.fancytree-focused,
body.s4m2024 table.fancytree-ext-table tbody tr.fancytree-active {
    background-color: #fd0 !important;
}
body.s4m2024 .fancytree-selected span.fancytree-title {
    color: #1d1d1b;
}
body.s4m2024 .fancytree-active span.fancytree-title {
    background-color: #fd0 !important;
    color: #1d1d1b !important;
}
body.s4m2024 span.fancytree-focused span.fancytree-title,
body.s4m2024 span.fancytree-title:hover {
    background-color: #fff7cc;
}
body.s4m2024 .tree-paste-filter-btn:hover,
body.s4m2024 .select2-paste-btn:hover {
    background-color: #fff7cc;
    border-color: #1d1d1b;
    color: #1d1d1b;
}
body.s4m2024 .tree-values .warning_msg b {
    color: #1d1d1b;
}
body.s4m2024 .tree-values .thisLevel {
    background-color: #1d1d1b;
}
body.s4m2024 .page-propvals .popup-content {
    outline-color: #1d1d1b;
}

/* Vending property editor (administration.vending.properties.unified, v5 and the matrix layouts it builds on).
   Its CSS (vdp.propvals.matrix/v4/v5.css) is added per page AFTER this file, hence the body.s4m2024 bump.
   Same mapping as above: green -> black, active green -> yellow with black text, pale green -> pale yellow. */
body.s4m2024 .vdp-props-matrix .vpm-domain.active,
body.s4m2024 .vdp-props-matrix .vpm-segmented button.active {
    background: #fd0;
    color: #1d1d1b;
}
body.s4m2024 .vdp-props-matrix .vpm-option input {
    accent-color: #fd0;
}
body.s4m2024 .vdp-props-matrix .vpm-tree-toggle,
body.s4m2024 .vdp-props-matrix .vpm-pending,
body.s4m2024 .vdp-props-matrix .vpm-link,
body.s4m2024 .vdp-props-matrix .vpm-savebar-text,
body.s4m2024 .vdp-props-matrix .vpm-col-head.selectable:hover,
body.s4m2024 .vdp-props-matrix .vpm-tree-text.selectable:hover,
body.s4m2024 .vdp-props-matrix .v5-diff-added,
body.s4m2024 .vdp-props-matrix .v5-map-axis.corner {
    color: #1d1d1b;
}
body.s4m2024 .vdp-props-matrix .vpm-value-filter button.active {
    border-bottom-color: #1d1d1b;
}
body.s4m2024 .vdp-props-matrix .vpm-scope-option.active {
    border-color: #1d1d1b;
    background: #fff7cc;
    box-shadow: inset 0 0 0 1px #1d1d1b;
}
body.s4m2024 .vdp-props-matrix .vpm-savebar {
    border-color: #1d1d1b;
}
body.s4m2024 .vdp-props-matrix .vpm-chip:hover:not(:disabled),
body.s4m2024 .vdp-props-matrix .v5-icon-button:hover,
body.s4m2024 .vdp-props-matrix .v5-cell:hover,
body.s4m2024 .vdp-props-matrix .v5-mapcell:hover:not(:disabled) {
    border-color: #1d1d1b;
}
body.s4m2024 .vdp-props-matrix .v5-copies {
    border-color: #1d1d1b;
    color: #1d1d1b;
}
body.s4m2024 .vdp-props-matrix .vpm-input:hover,
body.s4m2024 .vdp-props-matrix .vpm-input:focus,
body.s4m2024 .vdp-props-matrix .vpm-dropdown-trigger:hover {
    border-color: #fd0;
}
body.s4m2024 .vdp-props-matrix .v5-cell.pending,
body.s4m2024 .vdp-props-matrix .v5-mapcell.pending {
    outline-color: #1d1d1b;
}
body.s4m2024 .vdp-props-matrix .v5-cell.found,
body.s4m2024 .vdp-props-matrix .v5-mapcell.found {
    box-shadow: 0 0 0 3px #fd0;
}
body.s4m2024 .vdp-props-matrix .v5-fill-handle {
    background: #1d1d1b;
}
body.s4m2024 .vdp-props-matrix .v5-cell.fill-source {
    border-color: #1d1d1b;
}
body.s4m2024 .vdp-props-matrix .v5-cell.fill-target {
    outline-color: #1d1d1b;
    background: #fff7cc;
}
body.s4m2024 .vdp-props-matrix .vpm-tree-cell.v5-focus {
    box-shadow: inset 3px 0 0 #1d1d1b;
    background: #fff7cc;
}
body.s4m2024 .vdp-props-matrix .v5-toggle input {
    accent-color: #1d1d1b;
}
body.s4m2024 .vdp-props-matrix .btn:disabled:hover {
    background-color: #fd0;
}
body.s4m2024 .vdp-props-matrix .block.block-messages.ok {
    background-color: #1d1d1b;
}
/* State icons (drawn in vdp.propvals.core.js): "own" is a yellow disc with a black ring and check, so it stays
   distinct from the solid charcoal "blocked" disc; a partly own ring is black */
body.s4m2024 .vdp-props-matrix circle[fill="#769918"] {
    fill: #fd0;
    stroke: #1d1d1b;
    stroke-width: 1.5;
}
body.s4m2024 .vdp-props-matrix circle[fill="#769918"] + path {
    stroke: #1d1d1b;
}
body.s4m2024 .vdp-props-matrix circle[stroke="#769918"] {
    stroke: #1d1d1b;
}

/* Property simulation (administration.vending.properties.unified?view=simulation): its palette is CSS variables, so S4M
   swaps the variables. Black accents, yellow actions; "fits" is yellow instead of green, and the picked bin gets a white
   outline because yellow now means "fits". Red and orange verdicts stay as they are. */
body.s4m2024 .vdp-propsim {
    --ps-ink: #1d1d1b;
    --ps-input-line: #999999;
    --ps-accent: #1d1d1b;
    --ps-accent-wash: rgba(255, 221, 0, 0.3);
    --ps-heading: #1d1d1b;
    --ps-action: #fd0;
    --ps-action-ink: #1d1d1b;
    --ps-fit: #fd0;
    --ps-fit-ink: #1d1d1b;
    --ps-pick: #ffffff;
}