/*====================================================== FROST TABLE - Global Reusable Table System ✓ Fixed headers (sort + filter rows) ✓ Frozen columns support ✓ Horizontal & vertical scrolling ✓ Action bar with bulk actions ✓ Custom pagination ✓ Export/Print functionality ✓ Column visibility toggle ======================================================*/ /* ==================== CSS VARIABLES ==================== */ :root { /* Column widths - customize per table via inline CSS variables */ --frost-col1-width: 40px; --frost-col2-width: 100px; --frost-col3-width: 180px; /* Heights */ --frost-header-height: 48px; --frost-filter-height: 46px; --frost-row-height: 48px; /* Colors */ --frost-header-bg: #F5F5F5; --frost-filter-bg: rgb(205, 206, 208); --frost-border: #e2e8f0; --frost-row-bg: #ffffff; --frost-row-alt: #f8fafc; --frost-row-hover: #e0f2fe; --frost-primary: #1e293b; --frost-accent: #38bdf8; --frost-text: #334155; --frost-text-muted: #667085; } /* Table-specific CSS variables */ .frost-table { --frost-col1-width: 40px; --frost-col2-width: 100px; --frost-col3-width: 180px; } /* ==================== CONTAINER ==================== */ .frost-frame { display: flex; flex-direction: column; min-height: 0; } /* Static height fallback — applies ONLY when frost-table.js is absent. The script adds `frost-js` to (see initFrostFrameViewportFitOnce in frost-table.js) and from then on JS owns the frame height: it MEASURES the frame's distance from the top of the viewport and pins the frame so the pagination footer sits a fixed gap above the bottom of the screen, or leaves the frame content-sized when the rows do not fill it. Why this rule can no longer be unconditional: it defeated the very JS that was meant to supersede it. `sizeAllFrames()` cleared the inline height to probe the frame's NATURAL content height, but with this declaration live "no inline height" means "clamped to 100vh - offset", not "auto" — so the probe read the clamp back, the `content > target` test was false, and the frame was NEVER pinned to the viewport. The footer then sat at `frameTop + clamp`, i.e. a gap of `--frost-frame-offset - frameTop` below the screen, which does not track the viewport height at all and varies per page with whatever chrome sits above the table. Declaring it under `html:not(.frost-js)` also removes the specificity fight: when JS is present this stylesheet declares no height at all, so a page that legitimately owns its frame's height (embedded card, wizard preview) keeps it at any specificity. `:not(.is-simple):not(.is-embedded)` is load-bearing, not decoration: this selector is one step more specific than the plain `.frost-frame.is-simple { height: auto }` below, so without the exclusions it would win and start clamping simple/embedded tables that are content-sized on purpose. */ html:not(.frost-js) .frost-frame:not(.is-simple):not(.is-embedded) { /* Fill viewport to show as many rows as possible */ height: clamp(320px, calc(100vh - var(--frost-frame-offset, 280px)), 1400px); } .frost-frame.is-simple { height: auto; } .frost-container { padding: 0px !important; overflow: visible; border: 1px solid var(--frost-border); border-radius: 0; background: #fff; display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; } /* ==================== TOOLBAR (Optional global search) ==================== */ .frost-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: #f8fafc; border-bottom: 1px solid var(--frost-border); flex-wrap: wrap; gap: 12px; } .frost-toolbar-left, .frost-toolbar-right { display: flex; align-items: center; gap: 12px; } .frost-entries-select { padding: 8px 12px; border: 1px solid var(--frost-border); border-radius: 6px; background: #fff; font-size: 14px; } .frost-global-search { padding: 10px 16px; border: 1px solid var(--frost-border); border-radius: 8px; background: #fff; font-size: 14px; min-width: 280px; } .frost-global-search:focus { outline: none; border-color: var(--frost-accent); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1); } /* ==================== SCROLL WRAPPER ==================== */ .frost-scroll-wrapper { position: relative; /* Responsive max-height based on viewport with a safe min/max */ max-height: clamp(260px, calc(100vh - var(--frost-scroll-offset, 320px)), 900px); overflow: auto; scrollbar-width: thin; } /* When inside a frame, let the table body use all remaining space */ .frost-frame .frost-scroll-wrapper { flex: 1 1 auto; min-height: 0; max-height: none; } /* The Blade component emits a per-table `#{tableId}-scrollWrapper { max-height: clamp(260px, calc(100vh - 320px), 900px); min-height: clamp(260px, 45vh, 400px) }` block (see resources/views/components/frost-table.blade.php). An ID selector outranks the class rule above, so those caps won inside the frame and produced dead white space that looked like the frame was mis-sized: - the 900px max-height left a band between the last row and the pagination footer on tall screens (measured: 151px at a 1440px viewport); - the 400px min-height held the wrapper open under a short table (measured: 273px of empty space under the last row of a 3-row table). Inside a JS-sized frame the wrapper must simply be `flex: 1` and take exactly the space the frame gives it, so re-assert that here. `!important` is required to outrank the ID selectors. Scoped to `.frost-frame--js-fit`, which is added ONLY to frames some script actually sizes. Releasing the caps on a frame nobody sizes would leave nothing constraining the wrapper at all — a frame inside a modal grew to its full 9756px content height in exactly that case. TWO independent engines add this class, and BOTH gate it on the same predicate: - frost-table.js (Blade tables) adds it in sizeFrame(), and strips it again from simple/embedded frames, frames inside `.modal/.offcanvas/dialog/[role=dialog]/.p-dialog/.p-drawer/.p-sidebar`, and frames opted out with `data-frost-viewport-fit="off"`. - resources/js/components/Common/FrostTable.vue (Vue tables) binds it to its own `viewportFitEnabled` computed, which applies the same overlay/opt-out/embedded/simple test. So a page that loads this stylesheet WITHOUT frost-table.js does NOT automatically escape the rule: a Vue on such a page still emits the class from its template (and still sizes itself). Only the height rule at the top of this file is gated on `html:not(.frost-js)`; this cap-release rule is deliberately ungated, because the class itself is the gate. */ .frost-frame.frost-frame--js-fit .frost-scroll-wrapper { max-height: none !important; min-height: 0 !important; } /* A one-cell server error row must not let the table/frame collapse to its message's intrinsic width. Keep the same full-width geometry as loaded rows. */ .frost-frame.frost-has-load-error, .frost-container.frost-has-load-error, .frost-scroll-wrapper.frost-has-load-error, .frost-table.frost-has-load-error { width: 100% !important; min-width: 100% !important; align-self: stretch; box-sizing: border-box; } .frost-load-error-row > td { width: 100%; padding: 2rem !important; color: #dc2626; text-align: center !important; white-space: normal !important; } /* Footer sits below the scroll area inside the flex column (do not sticky to viewport — breaks at zoom / short heights). */ .frost-frame .frost-footer { flex-shrink: 0; position: relative; z-index: 200; background: #ffffff; box-shadow: 0 -6px 12px rgba(15, 23, 42, 0.08); } /* ==================== TABLE BASE ==================== */ .frost-table { width: 100%; min-width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed !important; } .frost-table thead th, .frost-table tbody td { box-sizing: border-box !important; } .frost-table th, .frost-table td { padding: 5px 17px; text-align: left; border-bottom: 1px solid var(--frost-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; } /* Don't apply text-overflow on cells containing badges */ .frost-table td:has(.custom-badge), .frost-table td:has(.custom-badge-id), .frost-table td:has(.status-badge), .frost-table td:has(.name-badge) { overflow: visible; text-overflow: unset; } /* Allow action cell to overflow for popup */ .frost-table td.action-cell { overflow: visible !important; } /* Checkbox/action columns should show only their control, never a text ellipsis. */ .frost-table th:has(input[type="checkbox"]), .frost-table td:has(input[type="checkbox"]), .frost-table td.action-cell { overflow: visible !important; text-overflow: clip !important; } /* The select (checkbox) control column hugs its checkbox with the same 10px horizontal gutter as every other body cell. The action column gets its 10px gutter from the `tbody td` rule below (no forced centering, so action menus keep their alignment). */ .frost-table th:has(input[type="checkbox"]), .frost-table td:has(input[type="checkbox"]) { padding-left: 10px !important; padding-right: 10px !important; text-align: center !important; } /* ==================== BODY CELL HORIZONTAL GUTTER ==================== Every BODY cell carries a 10px gutter on the left and right (UI spec). Header cells (th) keep their own padding / sort-caret reserve. `.frost-table tbody td` outranks the base `.frost-table td { padding: 5px 17px }` (more element selectors + later in the file), so this wins without !important; the checkbox / action carve-out above still wins via !important where it applies. Combined with `white-space:nowrap; overflow:hidden; text-overflow:ellipsis` on the base cell, body text truncates to the column width with an ellipsis. The fit reserve (FIT_PAD / PAD = 10 in FrostTable.vue and frost-table.js) is kept in sync with this value so auto-fit columns hug to the same gutter. */ .frost-table tbody td { padding-left: 10px; padding-right: 10px; } /* ==================== RESIZE-AWARE CELL TEXT TRUNCATION ==================== Wrap any cell text that should shrink with the column in `.frost-cell-text`. It truncates to the CURRENT column width (max-width:100%, never a fixed px), so dragging a column wider/narrower shows more/fewer characters, with the overflow rendered as an ellipsis. This is the standard for variable-width truncation — prefer it over hardcoded `max-width: NNpx` on inner spans. Works for plain cells AND for text sitting next to an icon inside a flex badge such as `.name-badge` (the icon stays fixed; the text fills the rest and ellipsises). Opt-in via `:has()` so existing tables are unaffected. */ .frost-table .frost-cell-text { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A flex badge that contains truncating text must be allowed to shrink to the cell width; the icon keeps its size, the text takes the remaining space. */ .frost-table .name-badge:has(.frost-cell-text) { min-width: 0; max-width: 100%; } .frost-table .name-badge:has(.frost-cell-text) > .icon, .frost-table .name-badge:has(.frost-cell-text) > img { flex: 0 0 auto; } .frost-table .name-badge > .frost-cell-text { flex: 1 1 auto; } /* ── GENERAL text truncation for ANY frost table ─────────────────────────── The base `.frost-table td` rule only ellipsises text that is a DIRECT child of the cell. A value wrapped in a plain (unclassed, unstyled) text element — the very common `

Title

` / `Text` cell pattern — would wrap or hard-clip instead. Make those wrappers truncate to the CURRENT column width with an ellipsis too (resize-aware). Badge / flex / control wrappers always carry a class or inline style, so `:not([class]):not([style])` leaves them untouched. For explicit control, add `.frost-cell-text` to the element. */ .frost-table tbody td > div:not([class]):not([style]), .frost-table tbody td > p:not([class]):not([style]), .frost-table tbody td > a:not([class]):not([style]) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Wrapping chip/badge stacks (e.g. grouped source-id badges under a title) ── Cap the stack at ~2 rows and scroll vertically past that, so a group with many sources never grows the row unbounded. Reusable across every frost table. */ .frost-table .frost-badge-stack { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; max-height: 42px; /* ~2 rows of chips */ overflow-y: auto; } /* ==================== DYNAMIC HEADER-FIT COLUMN WIDTHS ==================== When a table opts into header-fit (table.frost-fit-headers, added by frost-table.js when the table has no author-pinned widths / saved widths), each column is sized to hug its HEADER content with exactly 10px of padding on the left and 10px on the right (the JS measures the header text + sort-icon space and sets the column width). The horizontal cell padding is therefore set to 10px so the column truly hugs its header instead of carrying the default 17px gutters. Truncation is unchanged: body cells keep `white-space:nowrap; overflow:hidden; text-overflow:ellipsis` and the JS hover tooltip, so cell text truncates to the CURRENT (resizable) column width — never to a fixed character/px cap. Resize, frozen columns, action/checkbox/badge overflow cells, and horizontal scroll all keep their existing rules: the carve-outs below preserve the sort-icon reserve and the action/checkbox gutters. */ .frost-table.frost-fit-headers th, .frost-table.frost-fit-headers td { padding-left: 10px; padding-right: 10px; } /* Keep room for the sort caret on sortable headers even in fit mode. */ .frost-table.frost-fit-headers thead tr.frost-sort-row th[data-sort] { padding-right: 24px; } /* ISSUE B — Center the HEADER LABEL text on header-fit tables only. Scoped to `.frost-fit-headers` so no other Frost table is affected. `text-align: center` is direction-agnostic, so this mirrors correctly in RTL (AR) without a [dir="rtl"] override. The sort caret stays absolutely positioned at the inline-end (`.table-sort-icon` right:8px), so it remains visible/usable; for sortable headers we mirror the 24px caret reserve on the leading edge so the label centers within the available text area instead of being shoved off-center by the one-sided caret gutter. The per-column filter row below is left untouched (filter controls keep their existing alignment). Only the label text is centered. */ .frost-table.frost-fit-headers thead tr.frost-sort-row th { text-align: center; } .frost-table.frost-fit-headers thead tr.frost-sort-row th[data-sort] { padding-left: 24px; } /* The action column header (index 0) keeps its own centered/empty control gutter; checkbox control headers stay centered too — both already align, so no extra rule is needed. */ /* Action / checkbox cells use the same 10px control gutter as every other body cell. */ .frost-table.frost-fit-headers th:has(input[type="checkbox"]), .frost-table.frost-fit-headers td:has(input[type="checkbox"]), .frost-table.frost-fit-headers td.action-cell { padding-left: 10px !important; padding-right: 10px !important; } /* ==================== SORT ICON ==================== */ .table-sort-icon { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background-image: url('../images/sort-icon.svg'); background-size: contain; background-repeat: no-repeat; cursor: pointer; pointer-events: none; } /* ==================== HEADER ROW 1 (SORT) ==================== */ .frost-table thead tr.frost-sort-row th { position: sticky; top: 0; z-index: 100; /* `height` on a table cell is a MINIMUM: it keeps the default header height for single-line labels but still lets the cell grow so a long title (e.g. "Date de livraison") wraps onto a second line instead of being cut off with an ellipsis. (Do not switch this to `height:auto` + `min-height` — min-height is unreliable on table cells, which collapses the header and the resize grip.) */ height: var(--frost-header-height); background: var(--frost-header-bg); color: var(--frost-text-muted); font-weight: 400; font-size: 14px; line-height: 1.25; letter-spacing: 0.5px; border-color: rgb(102, 112, 133, 0.45) !important; border-right: 1px solid rgb(102, 112, 133, 0.45) !important; cursor: pointer; user-select: none; overflow: visible; /* Override the nowrap/ellipsis inherited from `.frost-table th` so a MULTI-WORD label wraps BETWEEN words onto a second line — but a SINGLE word must NEVER split mid-word. `overflow-wrap: normal` + `word-break: normal` forbid intra-word breaks (no more "Contac"+"t" / "Pipelin"+"e" / "Stag"+"e"); the header-fit pass sizes the column wide enough for the widest word, so words stay whole. (Was overflow-wrap:anywhere / word-break:break-word, which let a word split when the column was a hair too narrow.) */ white-space: normal; overflow-wrap: normal; word-break: normal; word-wrap: normal; -webkit-hyphens: none; hyphens: none; vertical-align: middle; } .frost-table thead tr.frost-sort-row th[data-sort] { position: sticky; padding-right: 28px; } .frost-table thead tr.frost-sort-row th[data-sort] .table-sort-icon { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); } /* Sort icons state */ .sort-icon { display: inline-flex; flex-direction: column; margin-left: 6px; vertical-align: middle; font-size: 8px; line-height: 1; opacity: 0.4; } .frost-sort-row th:hover .sort-icon { opacity: 0.7; } .frost-sort-row th.sort-asc .sort-icon, .frost-sort-row th.sort-desc .sort-icon { opacity: 1; } .frost-sort-row th.sort-asc .arrow-up { color: var(--frost-accent); } .frost-sort-row th.sort-desc .arrow-down { color: var(--frost-accent); } /* ==================== HEADER ROW 2 (FILTER) ==================== */ .frost-table thead tr.frost-filter-row th { position: sticky; /* Stick right below the sort row. --frost-sort-row-height is published by JS (frostSyncHeaderHeight) and grows when a header label wraps; falls back to the fixed default height before/if JS hasn't run. */ top: var(--frost-sort-row-height, var(--frost-header-height)); z-index: 90; height: var(--frost-filter-height); /* Match sort-row horizontal padding (see .frost-table th) so filters align under labels */ padding: 6px 14px; vertical-align: middle; border-color: rgb(102, 112, 133, 0.45) !important; border-right: 1px solid rgb(102, 112, 133, 0.45) !important; background: white; min-width: 0; overflow: visible; } .frost-table thead tr.frost-filter-row th.frost-filter-dropdown-open { z-index: 49 !important; } .frost-table thead tr.frost-filter-row th .frost-ms.is-open { z-index: 49; } /* Frozen header/filter cells must always sit above horizontally scrolling header cells. */ .frost-table thead tr.frost-sort-row th.frost-frozen-col { z-index: 130 !important; } .frost-table thead tr.frost-filter-row th.frost-frozen-col { z-index: 125 !important; } .frost-table thead tr.frost-sort-row th.frost-frozen-right-col { z-index: 131 !important; } .frost-table thead tr.frost-filter-row th.frost-frozen-right-col { z-index: 126 !important; } .frost-table thead tr.frost-filter-row th.frost-frozen-col.frost-filter-dropdown-open, .frost-table thead tr.frost-filter-row th.frost-frozen-right-col.frost-filter-dropdown-open { z-index: 10080 !important; } .frost-table thead tr.frost-filter-row th.frost-frozen-col .frost-ms.is-open, .frost-table thead tr.frost-filter-row th.frost-frozen-right-col .frost-ms.is-open { z-index: 10070; } .frost-table thead tr.frost-filter-row th:not(.frost-frozen-col):not(.frost-frozen-right-col) .frost-ms-dropdown { z-index: 49; } /* Same extra right inset as sort headers with the sort icon */ .frost-table thead tr.frost-filter-row th.frost-filter-for-sortable-col { padding-right: 28px; } /* ==================== SEARCH INPUT ==================== */ .search-input-dataTable-frost { border: 1px solid #e2e8f0; width: 100%; max-width: 100%; min-width: 0; padding: 5px 5px 5px 24px; height: 28px; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 4px; background-color: #FFF !important; background-image: url('../images/loop_icon.svg'); background-position: left 6px center; background-repeat: no-repeat; background-size: 14px 14px; outline: none; font-size: 12px; } .search-input-dataTable-frost:focus { border-color: var(--frost-accent); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.15); } /* RFP/RFQ column: native dropdown (no search icon) */ select.rfp-rfq-filter-select { border: 1px solid #e2e8f0; width: 100%; max-width: 100%; min-width: 0; padding: 4px 8px; height: 28px; box-sizing: border-box; border-radius: 4px; background-color: #fff !important; font-size: 12px; outline: none; cursor: pointer; } select.rfp-rfq-filter-select:focus { border-color: var(--frost-accent); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.15); } /* ==================== DATE RANGE PICKER ==================== */ .date-range-input { background-image: url('data:image/svg+xml,') !important; cursor: pointer; padding-right: 24px !important; } .date-range-input.active { border-color: var(--frost-accent); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.15); } .date-range-wrapper { position: relative; width: 100%; max-width: 100%; min-width: 0; } .frost-table thead tr.frost-filter-row th .date-range-wrapper { box-sizing: border-box; } .date-range-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; cursor: pointer; opacity: 0.5; display: none; background: none; border: none; padding: 0; font-size: 14px; line-height: 1; color: #64748b; color: white; background: red; border-radius: 50%; padding-top: 1px; } .date-range-clear:hover { opacity: 1; color: white; background: red; } .date-range-wrapper.has-value .date-range-clear { display: block; } .date-range-wrapper .search-input-dataTable-frost{ background-color: #d3f0ff !important; } /* ==================== NUMERIC RANGE FILTER ==================== */ .frost-range-filter { display: flex; align-items: center; gap: 3px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .frost-range-filter .frost-range-input { flex: 1 1 0; min-width: 0; padding: 5px 4px !important; background-image: none !important; text-align: left; -moz-appearance: textfield; } .frost-range-filter .frost-range-input::-webkit-inner-spin-button, .frost-range-filter .frost-range-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .frost-range-separator { flex: 0 0 auto; color: #98a2b3; font-size: 11px; line-height: 1; } /* ==================== BODY ROWS ==================== */ .frost-table tbody tr { height: var(--frost-row-height); background: var(--frost-row-bg); } .frost-table tbody td { font-size: 14px; color: var(--frost-text); } /* ==================== FROZEN COLUMNS ==================== */ /* * Frozen columns are now dynamically generated by the frost-table.blade.php component. * The component generates inline styles for headers and a