/* Dashboard — GridCard's custom pager, the vessel-files grid itself, and shared per-column cell styling.
   (DisbursementAccount's own Port Expenses/Advance-Credit grid rules, which used to be interleaved here,
   now live in DisbursementAccount.razor.css and css/disbursement-account.css.) */

/* GridCard's custom pager (GridPagerTemplate) — page-size dropdown on the left, info text + nav
   buttons grouped on the right, per the Figma pagination layout. Still a DOM descendant of <TelerikGrid>
   (Pageable has to stay true there for real paging — see that component's own comment), but reads as
   sitting outside the grid's own bordered box because the border/radius/overflow below live on
   .k-grid-aria-root (header+body only) rather than .k-grid itself, which .k-grid-pager falls outside of
   as a sibling. margin-top reproduces Figma's 16px grid-to-pager gap (node 179:6550) now that this isn't
   inside a themed pager surface with its own padding (Kendo's own .k-grid-pager/.k-pager rules already
   zero out padding/border/background here, confirmed in the theme CSS). */
.lh-pager {
    justify-content: space-between;
    width: 100%;
    margin-top: var(--kendo-spacing-4);
}

/* Same equal-share squash as everywhere else in this file, just nested three levels deep here: without
   these, every group (and every element inside each group) shares the pager's width equally instead of
   sizing to its own content — "Rows per page:" and the dropdown were each stretching to roughly half the
   pager's total width (the dropdown ignoring its own Width="70px" entirely), and the two nav buttons
   were stretching to ~126px square instead of a compact ~26px. */
.lh-pager>* {
    flex: 0 0 auto;
}

.lh-pager-size-group>*,
.lh-pager-nav-group>*,
.lh-pager-nav-buttons>* {
    flex: 0 0 auto;
}

.lh-pager-text {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-md);
    color: var(--kendo-color-subtle);
    white-space: nowrap;
}

/* Figma's pager nav-arrow border (rgba(36,36,36,0.14)) is lighter than the button-border-normal token
   (0.26) used elsewhere — a distinct, lighter divider weight with no matching semantic token, same
   situation as the table border below, so it's literal here too. This button has no ThemeColor set, so
   its real rendered class list is k-button/k-button-outline/k-icon-button — no k-button-base (that only
   appears when a ThemeColor is set, same gotcha hit earlier on the sidebar collapse-toggle button).
   Kendo's base outline-button border rule is the single-class `.k-button-outline` (0,1,0); three classes
   here comfortably beats it regardless of load order. */
.k-button.lh-pager-nav-btn.k-button-outline {
    border-color: var(--lh-border);
    padding: var(--kendo-spacing-1-5);
}

/* Three layers deep to actually shrink this icon: (1) the real min-width/min-height floor comes from
   `.k-icon-button .k-button-icon` (0,2,0) — tied with a plain `.lh-pager-nav-btn .k-button-icon`
   override, and the tie broke the wrong way (load order isn't reliably in app.css's favor, confirmed
   elsewhere this session), so the button's own already-present k-icon-button class is folded into the
   ancestor side of the selector to reach (0,3,0) and win outright; (2) width/height need the same
   override since min-width/min-height are separate properties that don't compete with a smaller width
   via cascade — they just win as a floor; (3) the inner <svg> has its own explicit pixel dimensions and
   won't shrink to fit the span without also being told to, same as every other bare TelerikSvgIcon in
   this file (.lh-nav-icon-sm etc.). */
.lh-pager-nav-btn.k-icon-button .k-button-icon {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
}

.lh-pager-nav-btn.k-icon-button .k-button-icon svg {
    width: 100%;
    height: 100%;
}

/* GridCard's outer card (Figma node 179:6550) — same 16px radius as .lh-info-card and every other card
   in the app; previously unset here, silently falling back to Kendo's own (much smaller)
   --kendo-border-radius-md default, which read as a mismatched corner radius next to other cards. */
.lh-grid-card.k-card {
    border-radius: var(--kendo-border-radius-xxxl);
}

/* GridCard's TelerikGrid (Figma node 179:6563, Table). The boxed/rounded look goes on
   .k-grid-aria-root — the wrapper around header+body only — rather than .k-grid itself: Kendo's own DOM
   is .k-grid > (.k-grid-aria-root > .k-grid-header + .k-grid-container), .k-grid-pager, i.e. the pager
   is already a sibling of .k-grid-aria-root, not a descendant of it. Boxing .k-grid-aria-root instead of
   .k-grid leaves the pager outside that box (per the Figma design, node 179:6550) while Pageable stays
   true on <TelerikGrid> for real paging to keep working — confirmed empirically that Pageable="false"
   breaks it (every page after the first came back with no rows), so moving the pager out to a sibling
   of <TelerikGrid> instead of solving it this way isn't an option; see GridCard.razor's own comment.
   rgba(36,36,36,0.14) is a distinct, lighter divider weight than the button-border-normal token (0.26)
   used elsewhere in this file, and doesn't correspond to any semantic color/opacity token this theme
   defines, so it's literal here (same reasoning as a couple of the status colors above). */
.lh-grid.k-grid .k-grid-aria-root {
    border: 1px solid var(--lh-border);
    border-radius: var(--kendo-border-radius-xl);
    overflow: hidden;
}

/* Every GridCard grid fills its card edge to edge, and scrolls sideways instead of clipping when its columns
   are wider than the card. This is the app-wide rule for what used to be re-added, grid by grid, as a
   per-page pair (.lh-terminal-grid, .lh-user-grid, .lh-alert-grid, .lh-commodity-grid, ... — a new grid that
   forgot it showed a blank strip after the Actions column, the recurring "whitespace" bug).

   Why it's needed: AutoFitColumns (GridCard's AutoFitAllColumnsAsync) writes an explicit inline width onto
   .k-grid-header-table/.k-grid-table equal to the exact sum of the auto-fit column widths, overriding Kendo's
   own .k-table{width:100%}. When the current rows are short, that sum is narrower than the card, so the
   header's grey fill and each row's bottom border (both live on the <th>/<td> cells, not a wrapping element)
   stop where the table does and leave a bare gap. min-width:100% doesn't fight the inline width when it is
   already the larger of the two (the overflow case is untouched), but when it is smaller min-width wins, and
   table-layout:fixed's spec'd behavior (CSS2.1 17.5.2: extra width beyond a fixed table's column widths is
   distributed across those columns) stretches every column — and with it every cell's fill/border — out to
   the card's edge. overflow-x:auto covers the opposite case (the sum exceeds the card): scroll rather than
   clip. overflow-y stays hidden so the card's rounded corners still clip vertically.

   :not(.lh-grid-fixed-width) leaves grids that pin an exact pixel TableWidth alone — those deliberately
   don't stretch (see the .lh-grid-fixed-width rule below). The extra :not() also lifts this above the
   .lh-grid.k-grid .k-grid-aria-root rule just above, so it wins regardless of source order. */
.lh-grid.k-grid:not(.lh-grid-fixed-width) .k-grid-aria-root {
    overflow-x: auto;
    overflow-y: hidden;
}

.lh-grid:not(.lh-grid-fixed-width) .k-grid-header-table,
.lh-grid:not(.lh-grid-fixed-width) .k-grid-table {
    min-width: 100%;
}

/* .k-grid itself still carries Kendo's own default 1px border (confirmed live — this theme doesn't
   actually zero it out the way a first read of its cascade suggested) — previously invisible/moot since
   .lh-grid.k-grid was the only element with an explicit border in this area, so it never conflicted with
   anything. Now that the boxed look lives on .k-grid-aria-root instead (so the pager, still a child of
   .k-grid, can sit outside that box — see the rule above), Kendo's own outer border became visible again
   as an unwanted second box around the aria-root box + pager together. Scoped to .lh-grid rather than
   bare .k-grid so this doesn't affect every other TelerikGrid in the app. */
.lh-grid.k-grid {
    border: none;
}

/* Kendo's header and body render as two independent <table> elements. Left at Kendo's own defaults
   (table-layout:auto, width:100%) they actually agree fine — confirmed live — but every column then
   just scales proportionally to fill the available space, ignoring each GridColumn's declared Width as
   anything more than a relative weight. That's the right behavior for a grid with no pixel-exact design
   to match (see Vessels.razor, which sets no TableWidth and gets exactly Kendo's own default here).

   table-layout:fixed is what a page reaches for instead when it needs PIXEL-EXACT columns (matching a
   Figma mock, e.g. Dashboard.razor) — but fixed layout only reliably keeps header and body agreeing when
   both are also told the *same exact* overall table width; left to compute their own (plain `auto`, or
   `max-content` — both tried) a header cell's own text can still nudge that table's column a few px
   wider than the body table's, and the two disagree. GridCard.TableWidth is what a page sets to opt into
   both table-layout:fixed and an exact width together — computed once from the sum of its own
   GridColumns' Width (see Dashboard.razor's own TableWidth).

   This rule is scoped to .lh-grid-fixed-width (a class GridCard only adds when TableWidth is set)
   rather than plain .lh-grid with a `var(--x, auto)` fallback — a fallback still WINS the cascade over
   Kendo's own `.k-grid .k-table{width:100%}` rule below and replaces it with the literal keyword `auto`
   (shrink-to-fit), which is NOT the same as leaving no override at all and reproduces the exact
   disagreement above (confirmed live). Only a selector that doesn't match in the first place lets
   Kendo's own width:100% rule through untouched for a grid that didn't ask for pixel-exact columns.

   The fight for `width` itself, for a grid that *did* opt in, is against `.k-grid .k-table{width:100%}`
   — also a two-token descendant selector, exactly tied with a plain `.lh-grid-fixed-width .k-grid-table`,
   and (confirmed empirically) the tie breaks against this file despite loading later — load order is not
   a reliable tiebreaker anywhere in this file. Compounding onto the table's own second class (.k-table,
   always present alongside .k-grid-header-table/.k-grid-table) reaches three tokens and wins the
   cascade outright. */
.lh-grid-fixed-width .k-grid-header-table.k-table,
.lh-grid-fixed-width .k-grid-table.k-table {
    table-layout: fixed;
    /* TableWidth is the grid's MINIMUM width, not an exact one: with few columns showing (a user hid some) the
       tables fill the card instead of leaving a blank strip after the last column — fixed layout spreads the
       spare width across the columns in proportion to their own widths, and header and body stay identical
       because both get the same width. When the columns' sum is wider than the card the tables keep that sum
       and the aria-root scrolls horizontally. */
    width: max(var(--lh-grid-table-width), 100%);
}

.lh-grid .k-table-th {
    background-color: var(--kendo-color-base-subtle);
    border-bottom: 1px solid var(--lh-border);
    padding: var(--kendo-spacing-3) var(--kendo-spacing-4);
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-xs);
    font-weight: var(--lh-weight-bold);
    color: var(--kendo-color-subtle);
}

.lh-grid .k-table-td {
    border-bottom: 1px solid var(--lh-border);
    padding: var(--kendo-spacing-3) var(--kendo-spacing-4);
}

/* Per-column text treatments (Dashboard.razor GridColumns). Two-value columns (Vessel Name/IMO,
   Port/Terminal, Arrival/Sail) share the same primary/secondary line styling except Vessel Name itself,
   which is semibold where the others' primary line is regular — see the dedicated class below. */
.lh-grid-file-no {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-md);
    font-weight: var(--lh-weight-semibold);
    color: var(--kendo-color-secondary);
}

.lh-grid-vessel-name {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-md);
    font-weight: var(--lh-weight-semibold);
    color: var(--kendo-color-base-on-surface);
}

.lh-grid-line-primary {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-md);
    color: var(--kendo-color-base-on-surface);
}

.lh-grid-line-secondary {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-xs);
    color: var(--kendo-color-subtle);
}

.lh-grid-nominator {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-md);
    color: var(--kendo-color-subtle);
}

/* Figma marks these same four narrow-column values overflow-hidden/text-ellipsis rather than letting
   them wrap (confirmed in the exported node code for Vessel Name, Port/Terminal, and Nominator). A flex
   item's default min-width:auto lets it overflow past its own box instead of truncating regardless of
   these properties, so min-width:0 is required too — the same flex gotcha as everywhere else in this
   file, just blocking text-overflow instead of sizing. */
.lh-grid-vessel-name,
.lh-grid-line-primary,
.lh-grid-line-secondary,
.lh-grid-nominator {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
}

/* Headers are vertically centred, so single-line titles stay centred in the row when a neighbouring title
   wraps and the header grows (Kendo's default is bottom-aligned). */
.lh-grid .k-grid-header .k-table-th {
    vertical-align: middle;
}

/* A centred column (View): its header text follows the cells instead of sitting at the start. */
.lh-grid .k-grid-header .lh-grid-header-center {
    text-align: center;
}

.lh-grid .k-grid-header .lh-grid-header-center .k-cell-inner,
.lh-grid .k-grid-header .lh-grid-header-center .k-link {
    justify-content: center;
}

/* Reorderable grids (GridCard Reorderable): headers read as draggable — a grab hand, a hover tint, and a
   grabbing hand while pressed — so users can tell the columns can be moved. */
.lh-grid-reorderable .k-grid-header .k-table-th,
.lh-grid-reorderable .k-grid-header .k-table-th * {
    cursor: grab !important;
}

/* The title area (.k-cell-inner / .k-link / .k-column-title) sits over the middle of each header and sets its
   own cursor (the theme's .k-link sets one, and the grid sorts on it), so the hand has to be forced onto it
   too, not just the cell's padding around it. */
.lh-grid-reorderable .k-grid-header .k-table-th:active,
.lh-grid-reorderable .k-grid-header .k-table-th:active * {
    cursor: grabbing !important;
}

/* The theme paints the header cells with a nine-class selector (.k-grid .k-grid-header .k-grid-header-wrap
   .k-grid-header-table.k-table .k-table-thead .k-table-row .k-header.k-table-th), so the hover tint spells out
   the same path to out-rank it. */
.lh-grid.lh-grid-reorderable .k-grid-header .k-grid-header-wrap .k-grid-header-table.k-table .k-table-thead .k-table-row .k-header.k-table-th:hover {
    background-color: var(--kendo-color-base-subtle-hover);
}

.lh-grid-reorderable .k-grid-header .k-table-th:active {
    cursor: grabbing;
}

/* Column titles wrap instead of truncating (Figma wraps "PDA Amount/Advanced Received" onto two lines), so a
   long title doesn't force a wide column. */
.lh-grid .k-grid-header .k-column-title {
    white-space: normal;
}

/* Bold lead-in label on the stacked "Label: value" cells (Tasks/Alerts, Prev/Next, ETA/ETB/ETD, ...). */
.lh-grid-label {
    font-weight: var(--lh-weight-semibold);
}

/* Advanced Received against the PDA: green once it covers the PDA, red while it falls short. */
.lh-grid-advance-covered {
    color: var(--kendo-color-success-on-surface);
}

.lh-grid-advance-short {
    color: var(--kendo-color-error-on-surface);
}

.lh-grid-escrow {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-md);
    color: var(--kendo-color-base-on-surface);
}

.lh-grid-balance-positive,
.lh-grid-balance-negative {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-md);
    font-weight: var(--lh-weight-semibold);
}

.lh-grid-balance-positive {
    color: var(--kendo-color-subtle);
}

.lh-grid-balance-negative {
    color: var(--kendo-color-error-on-surface);
}

/* Figma's "Add New" button text is regular weight — Kendo's base .k-button rule sets
   font-weight: var(--kendo-font-weight-semibold) for every button by default, which is correct for
   most buttons in this app (unflagged elsewhere) but not this one, so it's overridden narrowly here
   rather than touching .k-button globally. */
.k-button.lh-add-new-btn {
    font-weight: var(--lh-weight-normal);
}

/* Figma's "View" is plain centered text with no button chrome (Dashboard.razor) — Kendo's own button
   padding is wide enough to clip inside the 50px column, so it's trimmed to fit instead. */
.k-button.lh-grid-view-link {
    padding: 0;
    min-width: 0;
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-md);
    font-weight: var(--lh-weight-semibold);
}

/* A bare TelerikSvgIcon outside a component-owned slot (button icon, input prefix, ...) isn't
   constrained by the theme's own sizing rules, so it renders at the SVG's native (huge) size. */
.lh-icon-fixed.k-svg-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.lh-icon-fixed.k-svg-icon svg {
    width: 100%;
    height: 100%;
}

/* Swaps Kendo's own plus/minus hierarchy-column icon for a chevron (designer feedback: match the chevron
   used elsewhere in the app, e.g. the Towage/Dockage accordion) on ANY GridCard grid using DetailTemplate
   — originally lived in css/vessels.css scoped to .lh-vessel-grid when Vessels was the only such grid in
   the app; generalized here to plain .lh-grid (the class GridCard always applies, GridCard.razor's own
   Class attribute) once Ports adopted the same row-expand-to-edit pattern, so a future DetailTemplate grid
   gets this for free instead of needing its own copy. An earlier version hid this whole cell and added a
   separate replacement GridColumn next to it — Telerik's own KB for this
   (docs.telerik.com/blazor-ui/knowledge-base/grid-customize-hierarchy-expand-column-blazor-grid)
   recommends exactly that, but a second column pushed the row's real content one column further right
   than Kendo's own cell did, losing the indented/hierarchical look (client feedback, on Vessels
   originally). Drawing the chevron INSIDE this same cell instead keeps it at the exact position Kendo's
   own icon sat — same width/padding/centering (.k-hierarchy-cell{text-align:center} in Kendo's own theme
   CSS), just a different icon.

   currentColor won't work here — Kendo sets the ORIGINAL icon's color via a `.k-hierarchy-cell .k-icon`
   descendant rule, not on the cell itself, so this pseudo-element (a direct child of the cell, not of
   that icon) would just inherit the table's own default text color instead. Pointing mask-image's
   background-color at the same --kendo-color-on-app-surface token Kendo's rule ultimately resolves to
   keeps the match without needing to chain its full var() fallback list.

   [aria-expanded] (attribute presence, not a specific value) scopes every rule here to just the master
   rows' own hierarchy cells — confirmed live, Kendo also stamps the k-hierarchy-cell CLASS onto the
   header's <th> and an empty alignment placeholder <td> in each detail row, neither of which carries
   aria-expanded at all, and both were picking up a stray chevron (one hanging over the header, one
   floating inside every expanded panel) before this was added. */
.lh-grid .k-hierarchy-cell[aria-expanded] .k-svg-icon {
    display: none !important;
}

.lh-grid .k-hierarchy-cell[aria-expanded]::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: var(--kendo-color-on-app-surface);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='m158.059 129.941 126.06 126.06-126.06 126.061L192 416l160-159.999L192 96z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='m158.059 129.941 126.06 126.06-126.06 126.061L192 416l160-159.999L192 96z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/* Chevron-right rotated 90° reads as chevron-down — one glyph instead of swapping icons, same trick a
   plain CSS transform gets used for elsewhere in this app's icon-driven affordances. */
.lh-grid .k-hierarchy-cell[aria-expanded="true"]::after {
    transform: rotate(90deg);
}