/* 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 {
    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;
}