*
* Rules:
* - `position: sticky` and `top: 0` pin the header to the top
* - `z-index: 1020` ensures it overlays any scrolling content
* - `color: yellow` is just a visual choice for text color (can be themed)
*
* Example:
*
*/
th.sticky-header {
position: sticky;
top: 0;
color: yellow; /* Text color */
z-index: 1020; /* Ensure it stays on top of other content */
}
/**
* =============================================================================
* STICKY HEADER & COLUMN STYLES FOR TABLES
* =============================================================================
* Purpose:
* - Enables "freeze panes"-like functionality for large tabular data.
* - Keeps column headers and the first column visible while scrolling.
* - Improves usability when navigating wide and tall datasets.
*
* Key Features:
* -----------------------------------------------------------------------------
* 1. Sticky Table Header (`.table-vertical thead th`, `th.sticky-header`):
* - Freezes the top row of table headers when scrolling vertically.
* - Uses `position: sticky` with `top: 0` to anchor headers.
* - Applies a dark background (`#343a40`) for visibility and contrast.
* - High `z-index` (1020) ensures it stays above table content during scroll.
*
* 2. Sticky First Column (`.table-horizontal tbody td:first-child`, `thead th:first-child`):
* - Freezes the first column during horizontal scrolling.
* - Anchored using `left: 0` + `position: sticky`.
* - Lower `z-index` (1) than header to allow overlap control.
* - Background color and text color can be customized (currently commented).
*
* 3. Sticky Corner Cell (`.table-wrapper thead th:first-child`):
* - Ensures the top-left cell (intersection of sticky row and sticky column)
* appears correctly above all other cells.
* - Uses a higher `z-index` (3) to stay above both header and column.
*
* 4. Base Table Cell Styling:
* - Applies padding and borders to all `| ` and ` | ` for consistent spacing.
* - Border used: `1px solid #ddd` for subtle grid visibility.
*
* 5. Notes:
* - Commented legacy/styled options are preserved for reference/testing.
* - Ensure that sticky headers and columns are not used during print
* (override them using `@media print` with `position: static`)
* - Sticky positioning works only if the parent has overflow scroll/auto
* and the `th/td` is not inside a `display: table-cell` container.
* Usage:
* - Apply `table-vertical` for vertical scrolling (header fixed).
* - Apply `table-horizontal` for horizontal scrolling (first column fixed).
* - Wrap table in `.table-wrapper` to manage z-index context.
*/
/* Sticky header and column styles */
th.sticky-header,
.table-vertical thead th {
position: sticky;
top: 0;
z-index: 1020;
background-color: #343a40;
color: white;
}
/* Sticky First Column for Horizontal Layout */
.table-horizontal tbody td:first-child,
.table-horizontal thead th:first-child {
position: sticky;
left: 0;
z-index: 1;
}
/* Intersection of Sticky Row and Sticky Column */
.table-wrapper thead th:first-child {
z-index: 3; /* Highest z-index for the top-left corner cell */
}
th, td {
padding: 5px;
border: 1px solid #ddd;
}
/**
* -----------------------------------------------------------------------------
* .table-scroll-wrapper
* -----------------------------------------------------------------------------
* This utility class is used to wrap long tables in a scrollable container.
* It limits the table's vertical height to ensure UI consistency and prevent
* pages from becoming too tall due to large datasets.
*
* ✅ FEATURES:
* - Enables vertical scrolling if the table exceeds the defined max-height.
* - Ensures sticky headers work within the scrollable container.
* - Automatically expands for larger screens using responsive media queries.
* - Fully disables scrolling when printing or capturing screenshots, allowing
* full table visibility (no cropping by scroll).
*
* ✅ DEFAULT USAGE:
* - Wrap your with this div only when vertical scroll is needed.
* - Avoid this wrapper in print mode using Blade logic (e.g. `is_print`).
*
* ✅ CUSTOMIZATION:
* - You can override the max-height using inline style or dynamic value:
* |