/* ==========================================================================
   GRID THEME — pGrid visual refinements

   CSS-only skinning for the Telerik/Kendo pGrid, layered on top of the
   framework's own grid rules in wStandard.Component.Engine/common.css.
   Every rule here reads color from the app's existing --ep-*, --gridBG
   and --textStrong tokens, so it automatically follows theme, dark mode,
   theme style, density and font size — nothing below is hard-coded.

   Loaded after Site.css (see App.razor) so it wins any specificity ties
   with the framework defaults it refines.
   ========================================================================== */


/*    Header typography — a touch of letter-spacing and a smaller size than
      the framework default, no uppercase. */
.ep-grid .k-grid-header th,
.ep-grid .k-grid-header .k-table-th {
    letter-spacing: .03em;
    font-size: .78em;
    font-weight: 600;
}


/*    Sorted-column accent — a 2px primary bar under the actively sorted
      header.  */
.k-grid-header th[aria-sort="ascending"],
.k-grid-header th[aria-sort="descending"] {
    position: relative;
}

    .k-grid-header th[aria-sort="ascending"]::after,
    .k-grid-header th[aria-sort="descending"]::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 2px;
        background: var(--ep-primary);
    }


/*    Footer / aggregate weight — a solid primary top edge plus bold
      tabular numerals on the sum row, so totals visually anchor the grid
      instead of blending into ordinary rows. */
.k-grid-footer {
    border-top: 1px solid var(--ep-primary);
}

    .k-grid-footer .wh-footerSum-template,
    .k-grid-footer .k-table-td:has(.wh-footerSum-template) {
        font-weight: 700;
        color: var(--textStrong);
        font-variant-numeric: tabular-nums;
    }

    /* The cell itself (.k-table-td) already has overflow/ellipsis from the
   framework, but its only child is this div, which had overflow:
   visible — the actual text lives here, so this is what needs to
   truncate for the "…" to show, matching header and cell behavior.
   Same reasoning for padding: a normal cell's content div gets
   padding-inline/-block from --ep-cell-padding-inline/-block
   (common.css), but wh-footerSum-template had none, so its text sat
   flush against the cell edge instead of aligning with the column's
   header/body text above it. */
    .k-grid-footer .wh-footerSum-template {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-inline: var(--ep-cell-padding-inline);
        padding-block: var(--ep-cell-padding-block);
    }


/*    Column-group tier — the group-title row (Multi-Column Headers: two
      header rows, group titles above, column headers below) gets a
      primary tint and a defined bottom edge, so it reads as its own tier
      instead of blending into the column headers underneath it. Text
      stays the framework's normal header color (inherited --textStrong)
      rather than primary — a colored background plus colored text on a
      three-word label read as too much at once. Selector is structural
      (first header row, cells with colspan) rather than a specific
      class, since the framework doesn't expose one for the group row
      specifically — worth a quick visual check against a live grouped
      grid (e.g. SimpleSalesPricelistDates). Kendo renders colspan="1"
      on plain, ungrouped header cells too, so colspan="1" is explicitly excluded — a bare
      [colspan] presence check matched every header, not just real
      spans. */
.k-grid-header thead tr:first-child th[colspan]:not([colspan="1"]) {
    background: hsl(var(--ep-primaryH) var(--ep-primaryS) var(--ep-primaryL) / 9%);
    border-bottom: 1px solid hsl(var(--ep-primaryH) var(--ep-primaryS) var(--ep-primaryL) / 35%);
    font-size: .75em;
    letter-spacing: .02em;
    font-weight: 700;
    padding-block: 5px;
}


/*    Selected-row accent bar — a solid left edge in the primary color.
      The framework's own selected-row background (hsl(--ep-primaryH
      --ep-primaryS 95%/20%)) is subtle on its own, especially in dark
      mode; this gives selection a second, stronger cue. */
.k-grid tbody .k-table-row > .k-table-td:first-child,
.k-grid tbody .k-table-row > td:first-child {
    border-left: 3px solid transparent;
}

.k-grid tbody .k-table-row.k-selected > .k-table-td:first-child,
.k-grid tbody .k-table-row.k-selected > td:first-child,
.k-grid tbody .k-table-row:has(td:focus-within) > .k-table-td:first-child,
.k-grid tbody .k-table-row:has(td:focus-within) > td:first-child {
    border-left-color: var(--ep-primary);
}


/*    Smooth hover transition — row hover background eases in instead of
      snapping. */
.k-grid tbody .k-table-row,
.k-grid tbody .k-table-td {
    transition: background-color .15s ease;
}


/*    Corner radius follows style — .k-grid { border-radius:
      var(--ep-border-radius); } already ships in common.css, driven by
      the app-wide Border Radius setting (None/Medium/High). */
.k-grid {
    border-radius: var(--border-radius-md, .75rem);
    overflow: hidden;
}


    /*    Row borders: header only — body cells lose their borders entirely;
      the header keeps its own (rules above, untouched). Row separation
      then relies on the existing zebra striping plus the hover/selected
      states already in place. */
    .k-grid tbody .k-table-td {
        border-bottom: none;
        border-left: none;
    }

.k-grid-footer .k-table-td {
    border-left: 1px solid var(--ep-border-color);
}