/* Dashboard — page title row, GridCard/PageHeader typography, and the status filter bar (incl. the shared --lh-status-color definitions used by the grid's status badges too). */

.lh-dashboard {
    /* Outer page padding now comes from .lh-app-main (see above) instead of being repeated here. */
    position: relative;
}

/* Kendo's stack-layout "stretch" distribution gives every direct child an equal flex-basis:0% share
   of the available height by default, squashing each section (title row, filter bar, vessel files
   card, bottom split) to the same fraction regardless of its actual content — and TelerikCard clips
   overflow, so a card with more rows than its allotted slice just gets cut off. Size every top-level
   section to its own content instead; .lh-app-main (the scroll container) handles anything taller
   than the viewport. */
.lh-dashboard>* {
    flex: 0 0 auto;
}

.lh-page-title-row,
.lh-card-header-row {
    justify-content: space-between;
    width: 100%;
}

/* GridCard's title-row-to-grid gap (Figma node 179:6550: exactly 16px, same as the grid-to-pager gap
   below it) — CardBody has no gap of its own between its children, so this makes it explicit rather
   than leaving it to whatever margin happens to be left over from .lh-card-title's own reset. */
.lh-card-header-row {
    margin-bottom: var(--kendo-spacing-4);
}

/* Same equal-share squash as .lh-page-title-row (see below): without this, the title/subtitle group and
   the toolbar group each get Kendo's default flex:1 0 0% instead of sizing to their own content. */
.lh-card-header-row>* {
    flex: 0 0 auto;
}

/* Same equal-share squash, one level further in: without this, the search box's explicit 324px Width
   is overridden by Kendo's default flex-basis:0% on its own StackLayout children (each toolbar item —
   search box, Add New, See All — was shrinking to share the row equally instead of sizing to its own
   content/explicit width). */
.lh-card-toolbar>* {
    flex: 0 0 auto;
}

/* GridCard's header row (title | toolbar items | Add button) sets every child flex:0 0 auto
   (.lh-card-header-row>*, .lh-card-toolbar>* above), so nothing gives when the card narrows — e.g. with the
   sidebar open beside a rail page, or a long title — and the toolbar's last button gets pushed off the card's
   right edge, with the title butting against the first toolbar item. Opt in per page by putting
   Class="lh-grid-search" on the toolbar's search box (Commodities, Units of Measure); :has() keys the rules
   off that class so no other grid's header changes:
   - the row wraps, so the toolbar drops under the title when they don't fit on one line. The row's own
     justify-content:space-between keeps it right-aligned on one line, and a lone item on a wrapped line
     falls back to the start — so it lines up left with the title when wrapped. There's a real gap
     between title and toolbar on one line and between the two lines when wrapped. !important on gap:
     Telerik's StackLayout can write its own gap onto the element, which a class rule alone doesn't beat.
   - as a last resort for a card too narrow even for the toolbar on its own line, the search box is the one
     item that may shrink (240px down to 140px), which needs the toolbar group itself shrinkable too. */
.lh-card-header-row:has(.lh-grid-search) {
    flex-wrap: wrap;
    gap: var(--kendo-spacing-3) var(--kendo-spacing-6) !important;
}

.lh-card-toolbar:has(> .lh-grid-search) {
    flex: 0 1 auto;
    min-width: 0;
}

.lh-card-toolbar>.lh-grid-search {
    flex: 0 1 auto;
    min-width: 140px;
}

/* StatusFilterToggle's ButtonGroup buttons render in the browser's default button font rather than the
   app's body font (Kendo's button font-family doesn't inherit the page's), which made the toggle read as
   a different typeface from the neighboring search box and Add New button. Font only — the rest of the
   ButtonGroup look is Kendo's own, matching the Figma node. */
.lh-status-filter-toggle .k-button {
    font-family: var(--lh-font-body);
    font-weight: var(--kendo-font-weight-semibold);
    font-size: var(--lh-text-md);
}

/* Compact variant (StatusFilterToggle Small="true", e.g. the Services rail): smaller type, and the three
   segments share the available width evenly instead of sizing to their labels. */
.lh-status-filter-toggle-sm {
    width: 100%;
}

.lh-status-filter-toggle-sm .k-button {
    flex: 1 1 0;
    padding: var(--kendo-spacing-1) var(--kendo-spacing-2);
    font-size: var(--lh-text-sm);
}

/* GridCard.razor title/subtitle/clear-filter (Figma node 179:6550, TableHeaderActions). Clear Filter's
   color isn't set explicitly — FillMode="Link" + ThemeColor="Primary" already resolves to the exact
   --kendo-color-primary-on-surface teal Figma uses here (confirmed against the theme's own rule), so
   the button needs no color override, just the icon's size and the text/icon gap TelerikButton doesn't
   add on its own when the icon comes through ChildContent instead of the Icon convenience param. */
.lh-card-title.k-card-title {
    /* Kendo's own .k-card-title rule sets margin: 0 0 var(--kendo-card-title-margin-bottom) — a ~13px
       gap that stacked on top of the 4px Spacing the parent TelerikStackLayout already applies, reading
       as a too-big gap directly under the title (confirmed against Figma node 179:6550: title-to-subtitle
       is exactly 4px there). Zeroed so the StackLayout's own Spacing is the only thing governing it. */
    margin: 0;
    font-family: var(--lh-font-display);
    font-size: var(--lh-text-2xl);
    font-weight: var(--lh-weight-bold);
    color: var(--kendo-color-secondary);
}

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

.lh-card-clear-filter .k-button-text {
    display: flex;
    align-items: center;
    gap: var(--kendo-spacing-1);
}

.lh-card-clear-filter-icon.k-svg-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.lh-card-clear-filter-icon.k-svg-icon svg {
    width: 100%;
    height: 100%;
}

/* Same equal-share squash as everywhere else in this file: without this, the title/subtitle group and
   the right-side group each get Kendo's default flex:1 0 0% (a forced 50/50 split) instead of sizing to
   their own content — invisible while the left group's content was short, but now that title+subtitle
   sit side by side (see PageHeader.razor) that group is often wider than half the row, so it was
   overflowing into (and visually colliding with) the right-side group. */
.lh-page-title-row>* {
    flex: 0 0 auto;
}

/* PageHeader.razor typography (Figma node 179:6506, PageTitleArea) — DM Sans/Inter are loaded via
   Google Fonts in App.razor's <head> specifically for this; neither is used anywhere else in the app,
   so this is scoped to these two classes rather than changing the site-wide base font-family. Title
   color reuses --kendo-color-secondary (the same navy as the sidebar background — Figma uses it here
   as a text color instead) rather than a hardcoded hex, same as everywhere else in this stylesheet. */
.lh-page-header-title {
    font-family: var(--lh-font-display);
    font-size: var(--lh-text-5xl);
    font-weight: var(--lh-weight-extrabold);
    color: var(--kendo-color-secondary);
    white-space: nowrap;
}

.lh-page-header-subtitle {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-lg);
    color: var(--kendo-color-subtle);
    white-space: nowrap;
}

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

.lh-status-filter-bar {
    width: 100%;
}

/* StatusFilterCard.razor (Figma node 179:6516..6549). Cards grow equally and never shrink below their
   own content, matching Figma's flex:[1 0 0] on each FilterCard. */
.lh-status-filter-card.k-button {
    flex: 1 0 0;
    min-width: 0;
    padding: var(--kendo-spacing-3);
    border-radius: var(--kendo-border-radius-xxl);
}

/* Kendo's own outline-button border defaults close to Figma's border but not an exact alpha match
   (0.188 vs the design's 0.26) — pin it to the ThemeBuilder's own button-border-normal swatch value,
   which is an exact match, rather than leaving the small drift. The real rendered rule is
   `.k-button.k-button-outline.k-button-base` — three classes, (0,3,0) specificity — so a two-class
   override loses outright; matching all three of Kendo's classes plus ours gets to (0,4,0). */
.k-button.lh-status-filter-card.k-button-outline.k-button-base {
    border-color: var(--tb-kendo-color-button-border-normal);
}

/* TelerikButton wraps all ChildContent in one <span class="k-button-text">, which Kendo centers by
   default — Figma's card content is a left-aligned column spanning the card's full width instead. */
.lh-status-filter-card .k-button-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kendo-spacing-1);
    width: 100%;
}

.lh-status-filter-card-header {
    justify-content: space-between;
    width: 100%;
}

.lh-status-filter-card-label {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-sm);
    font-weight: var(--lh-weight-bold);
    color: var(--kendo-color-subtle);
    white-space: nowrap;
}

.lh-status-filter-card-count {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-4xl);
    font-weight: var(--lh-weight-extrabold);
    color: var(--kendo-color-base-on-surface);
}

/* Same equal-share squash as everywhere else in this file: Kendo's StackLayout default is flex:1 0 0%,
   so a plain flex-shrink:0 alone leaves flex-grow:1 active — the dot was stretching sideways into an
   oval to fill the header row's leftover width instead of staying an 8px circle. */
.lh-status-filter-card-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    background-color: var(--lh-status-color);
}

/* Per-status accent colors, shared between the filter-bar dots above and the grid's StatusCell badges
   below (Dashboard.razor: DotColorClassFor / StatusBadgeColorClass) — defined once as a custom property
   so both consumers can never drift out of sync with each other. Verified against the Table's own
   StatusCell colors in the Figma file (the filter-bar dots' own exported SVG fills turned out to be in a
   different traversal order than their labels and were originally mismatched here — this mapping is the
   corrected, grid-verified one). Due In/In Port/Complete/Settled match existing theme tokens exactly;
   Sailed/Rendering don't correspond to any semantic color this theme defines, so those are literal hex. */
.lh-status-color-due-in {
    --lh-status-color: var(--kendo-color-secondary);
}

/* Was var(--kendo-color-primary) directly, which broke when this session's earlier task lightened
   that token itself (ThemeBuilder/Figma sync — see TasksCard.razor and app.css's own comments on the
   Complete Task modal button for the full story): --lh-status-color feeds this dot/badge/chip's TEXT
   color too (see .lh-vfh-status-chip below), and the lighter primary no longer had enough contrast
   against the chip's near-white tinted background. -on-surface is the token Figma's own "In Port" chip
   design (node 1292:9431) actually specifies for that text/border, and — unlike the raw primary — it's
   defined to stay readably dark regardless of how light the base primary swatch gets synced to. */
.lh-status-color-in-port {
    --lh-status-color: var(--kendo-color-primary-on-surface);
}

.lh-status-color-sailed {
    --lh-status-color: var(--lh-status-sailed);
}

.lh-status-color-rendering {
    --lh-status-color: var(--lh-status-rendering);
}

.lh-status-color-complete {
    --lh-status-color: var(--kendo-color-subtle);
}

.lh-status-color-settled {
    --lh-status-color: var(--kendo-color-base-on-surface);
}

/* Active/Inactive port badges (Ports.razor's Active column — client feedback: chips instead of a plain
   Yes/No, for "a pop of style") — same shared .lh-status-badge shape/mechanism as the vessel-file status
   badges above, just a boolean instead of a lookup table, so there's no PortStatusStyles helper class for
   this (would be a one-line ternary wrapped in unnecessary indirection). Reuses the existing green/red
   tokens rather than introducing new ones: --lh-status-sailed is the same green "Sailed" already uses
   (color, not the vessel-file semantics, is what's being reused here), and --kendo-color-error-on-surface
   is the same red this app's negative-balance grid cells already use. */
.lh-status-color-active {
    --lh-status-color: var(--lh-status-sailed);
}

.lh-status-color-inactive {
    --lh-status-color: var(--kendo-color-error-on-surface);
}

/* Grid StatusCell badge (Figma node 179:6586 etc.) — background is an ~8% tint of the status color,
   text is the solid color, both driven by the same --lh-status-color custom property as the dots. */
.lh-status-badge {
    display: inline-flex;
    padding: var(--kendo-spacing-1) var(--kendo-spacing-2);
    border-radius: var(--kendo-border-radius-md);
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-xs);
    font-weight: var(--lh-weight-bold);
    white-space: nowrap;
    background-color: color-mix(in srgb, var(--lh-status-color) 8%, white);
    color: var(--lh-status-color);
}

/* Selected (the "All Statuses" example in Figma): FillMode=Solid + ThemeColor=Secondary already gives
   the navy background and white button text via the theme's own tokens (see StatusFilterCard.razor) —
   this only re-points the label/count colors, which are otherwise pinned to the unselected palette
   above regardless of the button's own state. */
.lh-status-filter-card-selected .lh-status-filter-card-label,
.lh-status-filter-card-selected .lh-status-filter-card-count {
    color: var(--kendo-color-on-secondary);
}