/* Telerik UI for Blazor (Kendo) — theme overrides to match MARVIN corporate look.
   Scoped to Kendo's --kendo-* tokens and .k-* classes only; Metronic never defines
   these, so there is no collision with app.css / assets/css/styles.css. */

:root {
    /* Brand primary — matches Metronic's --primary (Tailwind blue-500, #3b82f6). */
    --kendo-color-primary: #3b82f6;

    /* Typography — align with the app's Plus Jakarta Sans (see App.razor font link). */
    --kendo-font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    --kendo-font-size: 0.8125rem;
}

/* Compact density to match the app's table density (see CLAUDE.md §6.2). */
.k-grid,
.k-toolbar,
.k-input,
.k-button,
.k-dropdownlist,
.k-datepicker {
    font-size: 0.8125rem;
}

.k-grid td,
.k-grid th {
    padding-block: 0.375rem;
    padding-inline: 0.5rem;
}

/* Responsive horizontal scroll (CLAUDE.md §6.17 / CONVENTIONS.md §19).
   Telerik Blazor Grid 14.1.0 has no TableLayout parameter. Kendo's own theme
   forces the inner <table class="k-table"> to width:100%, which clamps the
   table to the container and squeezes/clips explicit column widths (long
   values like "SafetyEquipmentInspection" truncate instead of scrolling).

   Fix: size each inner table to `max-content` — exactly the SUM of the
   columns' declared pixel Widths. When that sum exceeds the container,
   Kendo's built-in overflow-x:auto on .k-grid-content scrolls the grid
   (header and body scroll in sync). Because BOTH the header and body tables
   are max-content with identical fixed column widths, their columns line up
   pixel-perfect. (min-width:100% would stretch them to fill, but the header
   and body stretch by different sub-pixel amounts → columns drift "miring".)

   REQUIREMENT: every <GridColumn> in an HsseGrid MUST declare an explicit
   Width — a width-less (auto) column sizes to its content differently in the
   header vs body table and reintroduces the drift. */
.hsse-grid,
.hsse-grid.k-grid {
    width: 100%;
    max-width: 100%;
}

.hsse-grid .k-grid-header .k-table,
.hsse-grid .k-grid-content .k-table {
    width: max-content;
    min-width: 0;
}