/** * Reusable column funnel filters: popup, checklist, thead funnel + sort icon colors. * Also: shared table toolbar (filter bar, summary stat cards, paging) — .table-filter-bar, .table-summary-stats, … * Include after shared.css. * * Theme: override on .column-filter-popup or .table-column-filters, e.g.: * .table-column-filters { --cf-funnel-active-color: #0d6efd; } * .column-filter-popup { --cf-popup-title-color: #1e293b; } */ /* ---------- Popup surface (CSS variables) ---------- */ /* position: fixed + left/top set in JS (viewport coords). Node may be moved to in init to avoid a transformed ancestor becoming the fixed containing block (would misalign the popup). */ .column-filter-popup { --cf-popup-radius: 12px; --cf-popup-min-width: 280px; --cf-popup-max-width: min(400px, calc(100vw - 16px)); --cf-popup-border: #e2e8f0; --cf-popup-shadow: 0 4px 16px rgba(15, 23, 42, 0.12); --cf-popup-bg: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); --cf-popup-body-padding: 0.55rem 0.85rem; --cf-popup-title-color: #314f6f; --cf-popup-title-size: 0.8rem; --cf-popup-title-weight: 700; --cf-popup-contains-margin-bottom: 0.5rem; --cf-popup-contains-font-size: 0.8rem; --cf-checklist-max-height: 220px; --cf-checklist-border: #e2e8f0; --cf-checklist-radius: 8px; --cf-checklist-bg: #fff; --cf-checklist-inset-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04); --cf-checklist-padding: 0.35rem 0.4rem; --cf-checklist-margin-bottom: 0.5rem; --cf-check-row-hover: rgba(49, 79, 111, 0.06); --cf-check-input-border: #cbd5e1; --cf-check-accent: #314f6f; --cf-check-label-color: #334155; --cf-check-label-size: 0.8rem; --cf-btn-outline-border: #cbd5e1; --cf-btn-outline-color: #475569; --cf-btn-outline-hover-bg: #f1f5f9; --cf-btn-outline-hover-border: #94a3b8; --cf-btn-outline-hover-color: #334155; --cf-z-index: 1050; position: fixed; z-index: var(--cf-z-index); min-width: var(--cf-popup-min-width); max-width: var(--cf-popup-max-width); border-radius: var(--cf-popup-radius); border: 1px solid var(--cf-popup-border); box-shadow: var(--cf-popup-shadow); background: var(--cf-popup-bg); overflow: hidden; } .column-filter-popup .card-body.column-filter-popup__body { padding: var(--cf-popup-body-padding); } .column-filter-popup__title { font-size: var(--cf-popup-title-size); font-weight: var(--cf-popup-title-weight); color: var(--cf-popup-title-color); margin-bottom: 0.5rem; letter-spacing: 0.02em; } .column-filter-popup.modal-form .column-filter-popup__contains { margin-bottom: var(--cf-popup-contains-margin-bottom); font-size: var(--cf-popup-contains-font-size); } .column-filter-checklist { max-height: var(--cf-checklist-max-height); overflow-y: auto; overflow-x: hidden; margin-bottom: var(--cf-checklist-margin-bottom); padding: var(--cf-checklist-padding); border: 1px solid var(--cf-checklist-border); border-radius: var(--cf-checklist-radius); background: var(--cf-checklist-bg); box-shadow: var(--cf-checklist-inset-shadow); } .column-filter-check-item { display: flex; align-items: flex-start; gap: 0.45rem; padding: 0.2rem 0.15rem; margin: 0; border-radius: 4px; } .column-filter-check-item:hover { background: var(--cf-check-row-hover); } .column-filter-check-item__input { flex-shrink: 0; width: 0.95rem; height: 0.95rem; margin: 0.15rem 0 0 0; cursor: pointer; border-color: var(--cf-check-input-border); accent-color: var(--cf-check-accent); } .column-filter-check-item__label { flex: 1; min-width: 0; margin: 0; padding: 0; font-size: var(--cf-check-label-size); font-weight: 500; line-height: 1.35; color: var(--cf-check-label-color); text-align: left; word-break: break-word; cursor: pointer; } .column-filter-popup__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; } .column-filter-popup.modal-form .column-filter-popup__actions .btn-primary { min-width: 4.5rem; } .column-filter-popup.modal-form .column-filter-popup__actions .btn-outline-secondary { border-color: var(--cf-btn-outline-border); color: var(--cf-btn-outline-color); font-weight: 600; } .column-filter-popup.modal-form .column-filter-popup__actions .btn-outline-secondary:hover { background: var(--cf-btn-outline-hover-bg); border-color: var(--cf-btn-outline-hover-border); color: var(--cf-btn-outline-hover-color); } /* ---------- Table header: funnel + sort (add .table-column-filters via createTableColumnFilters.init) ---------- */ .table-column-filters { --cf-funnel-color: #ffffff; --cf-funnel-hover-opacity: 0.92; --cf-funnel-active-color: #ec4545; --cf-sort-neutral-color: #ffffff; --cf-sort-active-color: #ec4545; } .table-column-filters thead .column-filter-funnel { font-size: 0.65rem; line-height: 1; min-width: 1rem; text-decoration: none !important; } /* Wider hit area than Bootstrap .p-0 on header funnel buttons */ .table-column-filters thead .column-filter-funnel.p-0 { padding: 0.3rem 0.5rem !important; } .table-column-filters thead .column-filter-funnel.btn-link, .table-column-filters thead .column-filter-funnel.btn-link i { color: var(--cf-funnel-color) !important; } .table-column-filters thead .column-filter-funnel.btn-link:hover, .table-column-filters thead .column-filter-funnel.btn-link:focus-visible, .table-column-filters thead .column-filter-funnel.btn-link:hover i, .table-column-filters thead .column-filter-funnel.btn-link:focus-visible i { color: var(--cf-funnel-color) !important; opacity: var(--cf-funnel-hover-opacity); } .table-column-filters thead .column-filter-funnel.btn-link.column-filter-active, .table-column-filters thead .column-filter-funnel.btn-link.column-filter-active i, .table-column-filters thead .column-filter-funnel.btn-link.column-filter-active:hover, .table-column-filters thead .column-filter-funnel.btn-link.column-filter-active:focus-visible, .table-column-filters thead .column-filter-funnel.btn-link.column-filter-active:hover i, .table-column-filters thead .column-filter-funnel.btn-link.column-filter-active:focus-visible i { color: var(--cf-funnel-active-color) !important; opacity: 1; } .table-column-filters thead th.sortable i.fa-sort { color: var(--cf-sort-neutral-color) !important; } .table-column-filters thead th.sortable i.fa-sort-up, .table-column-filters thead th.sortable i.fa-sort-down { color: var(--cf-sort-active-color) !important; } .table-column-filters thead th.sortable:hover i.fa-sort, .table-column-filters thead th.sortable:focus-within i.fa-sort { color: var(--cf-sort-neutral-color) !important; } .table-column-filters thead th.sortable:hover i.fa-sort-up, .table-column-filters thead th.sortable:hover i.fa-sort-down, .table-column-filters thead th.sortable:focus-within i.fa-sort-up, .table-column-filters thead th.sortable:focus-within i.fa-sort-down { color: var(--cf-sort-active-color) !important; } /* ---------- Table toolbar: filter row, summary stat cards, paging (warehouse, inbounds, …) ---------- */ .table-filter-bar { padding: 0.5rem 1rem; } .table-filter-row { min-height: 2.2rem; } .table-filter-input { font-size: 0.75rem; padding: 0.1rem 0.25rem; height: 1.5rem; width: 120px; } .table-filter-input--buyer { width: 140px; } .table-filter-bar .table-filter-reset-btn { font-size: 0.65rem; height: 1.5rem; min-height: 1.5rem; padding: 0.7rem 0.35rem; min-width: 72px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } .table-summary-stats { display: inline-flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; } .table-stat { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.75rem; min-width: 9rem; padding: 0.1rem 0.75rem; border-radius: 10px; border: 1px solid #e2e8f0; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); box-shadow: 0 2px 8px rgba(49, 79, 111, 0.12); } .table-stat--packs { border-left: 3px solid #314f6f; } .table-stat--cbm { border-left: 3px solid #416892; } .table-stat--status { border-left: 3px solid #314f6f; } .table-stat__label { flex: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; } .table-stat__value { flex-shrink: 0; text-align: right; font-size: 1.2rem; font-weight: 700; line-height: 1.15; color: #314f6f; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .table-paging-controls { gap: 0.35rem; } .table-page-indicator { font-size: 0.75rem; white-space: nowrap; min-width: 3.25rem; text-align: center; } .table-paging-gap { display: inline-block; width: 20px; flex-shrink: 0; } .table-page-size-select { font-size: 0.75rem; padding: 0.1rem 1.5rem 0.1rem 0.35rem; height: 1.75rem; min-width: 4.25rem; }