/* QF Hub Easy 1.9.8 */
:root{ --border:#e2e8f0; --muted:#64748b; --dark:#0b1419; }
#qf-hub{ margin:6px 0 24px; position:relative; z-index:0; }
#qf-hub .qf-hub__header{ position:relative; z-index:10; display:flex; align-items:center; justify-content:center; padding:16px 0 10px; border-bottom:1px solid var(--border); background: linear-gradient(180deg,#fff,#fafcff); }
#qf-hub .qf-hub__search input{ width:min(820px,90vw); padding:14px 16px; border:1px solid var(--border); border-radius:999px; background:#fff; }
#qf-hub .qf-hub__body{ display:grid; grid-template-columns: 280px 1fr; gap:18px; padding-top:14px; }
#qf-hub .qf-hub__content{ display:flex; flex-direction:column; gap:12px; }
#qf-hub .qf-hub__content-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; z-index:10; }
#qf-hub .qf-hub__count{ color:var(--muted); font-size:13px; }
#qf-hub .qf-hub__views .view-btn, #qf-hub .qf-hub__views .qf-reset-btn{ appearance:none; border:1px solid var(--border); background:#fff; border-radius:8px; padding:8px 12px; font-weight:800; cursor:pointer; margin-left:8px; }
#qf-hub .qf-hub__views .view-btn[aria-selected="true"]{ background:#0b1419; color:#fff; border-color:#0b1419; }
#qf-hub .qf-hub__views .qf-reset-btn:hover{ background:#0b1419; color:#fff; }

/* Chips */
#qf-hub .qf-active-row{ padding:10px 12px 0; position:relative; z-index:10 }
#qf-hub .qf-active-filters{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }
#qf-hub .qf-chip{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); background:#eff6ff; color:#0b1320; padding:6px 10px; border-radius:999px; font-size:12px; cursor:pointer }
#qf-hub .qf-chip__x{ margin-left:4px; font-weight:700 }
#qf-hub .qf-chip--clear{ background:#fff }

/* Filters */
#qf-hub .qf-hub__filters{ position:sticky; top:10px; align-self:start; border:1px solid var(--border); background:#fff; border-radius:14px; padding:12px; z-index:10; }
#qf-hub .qf-acc{ border:1px solid var(--border); border-radius:12px; background:#fff; overflow:hidden }
#qf-hub .qf-acc + .qf-acc{ margin-top:10px }
#qf-hub .qf-acc__header{ width:100%; text-align:left; border:0; cursor:pointer; background:linear-gradient(180deg,#f9fafb,#f3f4f6); font-weight:800; font-size:13px; padding:10px 12px; display:flex; align-items:center; justify-content:space-between }
#qf-hub .qf-acc__body{ display:none; padding:10px 12px }
#qf-hub .qf-acc.is-open .qf-acc__body{ display:block }
#qf-hub .qf-checklist{ display:block }
#qf-hub .qf-chk{ display:flex; flex-wrap:wrap; gap:8px }
#qf-hub .qf-chk__item{ display:inline-flex; align-items:center; gap:8px; font-size:13px; border:1px solid var(--border); border-radius:999px; padding:6px 10px; background:#fff; cursor:pointer; user-select:none }
#qf-hub .qf-chk__item input{ appearance:none; width:14px; height:14px; border:1px solid var(--border); border-radius:3px; display:inline-block; position:relative }
#qf-hub .qf-chk__item input:checked{ background:#111827; border-color:#111827 }
#qf-hub .qf-chk__item input:checked::after{ content:''; position:absolute; left:3px; top:1px; width:6px; height:10px; border:2px solid #fff; border-top:0; border-left:0; transform:rotate(45deg) }

/* Grid cards */
#qf-hub .qf-hub-grid{ position:relative; z-index:1; display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
#qf-hub .qf-card{ display:block; text-decoration:none; color:inherit; border:1px solid var(--border); border-radius:14px; background:#fff; overflow:hidden; transition:box-shadow .15s ease, transform .15s ease; }
#qf-hub .qf-card:hover{ box-shadow:0 10px 30px rgba(2,6,23,.12); transform:translateY(-2px); }
#qf-hub .qf-card__img{ aspect-ratio:4/3; background:#fff; display:flex; align-items:center; justify-content:center; }
#qf-hub .qf-card__img img{ max-width:100%; max-height:100%; object-fit:contain; }
#qf-hub .qf-card__body{ padding:12px; display:flex; flex-direction:column; gap:8px; }
#qf-hub .qf-card__type{ font-weight:800; font-size:14px }
#qf-hub .qf-card__sku{ font-weight:900; font-size:13px }
#qf-hub .qf-card__desc{ font-size:13px; min-height:2.6em; }
#qf-hub .qf-tag{ font-size:12px; background:#f1f5f9; border:1px solid var(--border); border-radius:999px; padding:2px 8px; }

#qf-hub.is-grid  #qf-hub-table{ display:none; }
#qf-hub.is-list  #qf-hub-grid{ display:none; }

/* DataTables (shared look) */
.dataTables_wrapper table.dataTable{ border-collapse:separate; border-spacing:0; }
.dataTables_wrapper table.dataTable thead th{ background:#202225; color:#fff; font-weight:800; border-bottom:0; }
.dataTables_wrapper table.dataTable tbody tr:nth-child(odd){ background:#f5f7fa; }
.dataTables_wrapper table.dataTable tbody td{ border-top:1px solid #eceff3; }

a.dt-link{ font-weight:700; border-bottom:1px dashed transparent; text-decoration:none }
a.dt-link:hover{ border-bottom-color:#94a3b8 }

/* Doc buttons: white text on red (plugin + legacy) */
.qf-doc-btn,
.dataTables_wrapper .qf-doc-btn,
.surepress-dt .qf-doc-btn,
.spec-btn,
.dataTables_wrapper .spec-btn,
.surepress-dt .spec-btn{
  --bg:#d91f34; --bg-h:#b8162a;
  display:inline-block; padding:6px 10px; margin:2px 2px; border-radius:8px;
  background:var(--bg) !important; color:#fff !important; font-size:12px; font-weight:800; line-height:1.2;
  border:1px solid var(--bg) !important; text-decoration:none; white-space:nowrap;
}
.qf-doc-btn:hover,.spec-btn:hover{ background:var(--bg-h) !important; border-color:var(--bg-h) !important; color:#fff !important; }

/* FixedHeader overlay guard */
div.dtfh-floatingparent, table.dataTable.fixedHeader-floating{ pointer-events:none !important; z-index:0 !important }

/* Legacy container */
.surepress-table-container{ width:100%; overflow-x:visible !important; }
.surepress-dt{ width:100%; min-width:0 !important; border-collapse:collapse; font-size:15px; line-height:1.45; }
table.surepress-dt, table.surepress-dt td, table.surepress-dt th{ white-space:normal !important; }

@media (max-width:980px){
  #qf-hub .qf-hub__body{ grid-template-columns:1fr }
  #qf-hub .qf-hub__filters{ position:static }
}