/* UI-057 deel 2: overzichten - lijstpagina's, tabellen, filters. */
.metric-icon{width:48px;height:48px;min-width:48px;min-height:48px;aspect-ratio:1/1;flex:0 0 48px;display:grid;place-items:center;border-radius:12px;font-size:24px}
.quality-item{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--vz-border-color)}
.quality-item:last-child{border-bottom:0}
.quality-count{margin-left:auto;font-size:18px;font-weight:700}
.product-thumb-steex{width:52px;height:52px;border-radius:8px;object-fit:contain;background:#fff;border:1px solid var(--vz-border-color)}
.variant-row{background:#f8faf9}
.variant-row[hidden]{display:none}
.variant-toggle{width:28px;height:28px;border:0;border-radius:7px;background:var(--hrw-soft);color:var(--hrw-green);font-size:20px;line-height:1}
.variant-toggle[aria-expanded="true"]{transform:rotate(90deg)}
.variant-indent{padding-left:20px}
.image-note{display:block;font-size:11px;color:var(--vz-secondary-color);white-space:normal;max-width:90px}
.search-box-local{position:relative}
.search-box-local i{position:absolute;left:13px;top:11px;color:#87938d}
.search-box-local input{padding-left:38px}
.table td{vertical-align:middle}
.product-cell{display:grid;grid-template-columns:28px 52px minmax(220px,1fr);align-items:center;gap:12px;min-width:430px}
.product-toggle-slot{width:28px;display:grid;place-items:center}
.product-copy{min-width:0}
.product-copy h6,.product-copy span{white-space:normal;overflow-wrap:anywhere}
.column-sort{display:inline-flex;align-items:center;gap:5px;width:auto;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;text-transform:inherit;letter-spacing:inherit;white-space:nowrap}
.column-sort:hover,.column-sort:focus{color:var(--hrw-green)}
.column-sort i{font-size:14px}
.supplier-preview-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.supplier-preview-item{display:flex;align-items:center;gap:9px;padding:9px;border:1px solid var(--vz-border-color);border-radius:9px;color:inherit;text-decoration:none;min-width:0}
.supplier-preview-item .metric-icon{width:36px;height:36px;min-width:36px;min-height:36px;flex-basis:36px;font-size:18px}
.supplier-preview-item span:last-child{min-width:0}
.supplier-preview-item strong,.supplier-preview-item small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.supplier-preview-item small{color:var(--vz-secondary-color);font-size:11px}
.supplier-preview-item:hover{border-color:var(--hrw-green);color:var(--hrw-green)}
@media(max-width:1199.98px){.supplier-preview-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575.98px){.supplier-preview-list{grid-template-columns:1fr}}
@media(max-width:767.98px){#productTable th:not(:first-child),#productTable td:not(:first-child){display:none}#productTable{table-layout:fixed;width:100%}#productTable th:first-child,#productTable td:first-child{width:100%;padding:14px 12px}.product-cell{grid-template-columns:28px 48px minmax(0,1fr);gap:10px;min-width:0}.product-thumb-steex{width:48px;height:48px}.product-copy h6{font-size:15px}.product-copy .fs-sm{font-size:12px!important}.variant-indent{padding-left:0}.card-body.p-0 .table-responsive{overflow-x:hidden}}
.hrw-overview-toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--tb-border-color)}
.hrw-overview-search{flex:1 1 300px;max-width:520px}
.hrw-overview-control{flex:0 0 auto}
.hrw-overview-control .form-label{display:block;margin-bottom:4px;color:var(--tb-secondary-color);font-size:12px}
/* Filter met vinkjes (overview_filter_multi): knop oogt als keuzelijst, lange tekst wordt afgekapt (F104). */
.hrw-overview-multi-toggle{width:200px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hrw-overview-multi-menu{min-width:270px;max-height:60vh;overflow-y:auto;padding:8px 0}
.hrw-overview-multi-actions{display:flex;gap:8px;margin-bottom:4px;padding:4px 16px 10px;border-bottom:1px solid var(--tb-border-color)}
.hrw-overview-multi-option{display:flex;align-items:center;gap:10px;margin:0;cursor:pointer}
.hrw-overview-multi-option .form-check-input{flex:0 0 auto;margin:0}
.hrw-overview-multi-option .hrw-overview-multi-count{margin-left:auto;padding-left:16px;color:var(--tb-secondary-color);font-size:12px}
.hrw-overview-table tbody tr[data-href]{cursor:pointer}
.hrw-overview-table tbody tr[data-href]:hover{background:var(--tb-light)}
.hrw-overview-table .hrw-record-link{color:inherit;text-decoration:none}
.hrw-overview-table .hrw-record-link:hover{text-decoration:underline}
.hrw-category-label{display:inline-block;color:var(--tb-secondary-color);font-weight:500}
.hrw-filter-card{width:100%;border:0;text-align:left;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.hrw-filter-card:hover{border-color:rgba(55,98,234,.35);box-shadow:0 5px 16px rgba(20,45,34,.09);transform:translateY(-1px)}
.hrw-filter-card:focus-visible{outline:3px solid rgba(55,98,234,.35);outline-offset:2px}
.hrw-overview-sort{display:inline-flex;align-items:center;gap:5px;width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:600;text-align:left;white-space:nowrap}
.hrw-overview-sort:hover,.hrw-overview-sort.is-active{color:var(--hrw-primary)}
.hrw-overview-sort:focus-visible{outline:3px solid rgba(55,98,234,.35);outline-offset:3px}
.hrw-overview-sort i{font-size:14px}
.hrw-row-menu-toggle{display:inline-grid;place-items:center;width:34px;height:34px;padding:0}
.hrw-row-menu-toggle:focus-visible{outline:3px solid rgba(55,98,234,.35);outline-offset:2px}
.hrw-overview-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--tb-border-color)}
.hrw-pagination-controls{display:flex;align-items:center;gap:8px}
.hrw-overview-empty{padding:48px 20px;text-align:center}
.hrw-overview-empty>i{display:block;margin-bottom:12px;color:var(--tb-secondary-color);font-size:36px}
.hrw-overview-table.table-sm td,.hrw-overview-table.table-sm th{padding-top:.45rem;padding-bottom:.45rem}
@media(max-width:767.98px){
  .hrw-overview-toolbar{align-items:stretch}.hrw-overview-search{flex-basis:100%;max-width:none}.hrw-overview-control{flex:1 1 130px}
  .hrw-overview-table th:first-child,.hrw-overview-table td:first-child{position:sticky;left:0;z-index:2;background:var(--tb-card-bg,#fff)}
  .hrw-overview-table th:last-child,.hrw-overview-table td:last-child{position:sticky;right:0;z-index:2;background:var(--tb-card-bg,#fff)}
}
/* UI-051: dunne laadbalk onder de werkbalk van een overzicht tijdens het zoeken. */
.hrw-overview-progress{height:2px;margin:0;overflow:hidden;opacity:0;transition:opacity .15s}
.hrw-overview-progress::before{content:"";display:block;width:35%;height:100%;background:var(--hrw-primary);transform:translateX(-120%)}
.hrw-overview-progress.is-loading{opacity:1}
.hrw-overview-progress.is-loading::before{animation:hrw-progress .35s linear infinite}
@keyframes hrw-progress{to{transform:translateX(320%)}}