/* Shared left-rail navigation (Components/Shared/RailLayout.razor, RailNav.razor, RailNavItem.razor) —
   extracted from task-lists.css when Commodities became the second two-pane "rail picks the scope, grid
   manages it" page. Task Lists (flat list of functions) and Commodities (classes with their groups nested
   underneath) both render through these classes now; page-specific rules stay in each page's own file.
   Telerik components take these through their Class parameter, so this has to be a global stylesheet
   (see the css-scoping rule), not a scoped .razor.css. */

/* Fixed-width nav rail beside the main column. Width is a layout dimension, not one of the properties
   StylesheetConventionTests checks (padding/margin/gap/border-radius/font-size), so it stays a plain px
   value, same as GridCard's own TableWidth convention. */
.lh-rail-side-col {
    width: 206px;
    flex: 0 0 206px;
}

/* Without this, the side column — stretched tall by its sibling .lh-rail-main-col (the Horizontal stack's
   own default cross-axis stretch) — passes that height on to its cards, the same equal-share/stretch
   squash this app's own CSS repeatedly has to fix (.lh-rail-list>* below, .lh-card-header-row>*, ...).
   Client ask, 2026-10-07: a rail card should only be as tall as its own items need. */
.lh-rail-side-col>* {
    flex: 0 0 auto;
}

/* The main column grows to fill whatever width the fixed rail doesn't use. No Telerik component accepts a
   Style parameter (confirmed empirically elsewhere in this app, e.g. GridCard.razor's own header
   comment), so this is a class instead of an inline flex style on the TelerikStackLayout. */
.lh-rail-main-col {
    flex: 1 1 auto;
    min-width: 0;
}

/* A plain <TelerikCard> silently falls back to Kendo's own smaller --kendo-border-radius-md — a mismatch
   next to every other card in the app (.lh-grid-card, .lh-side-card, .lh-info-card), all of which use this
   same xxxl/16px radius (client ask, 2026-10-07: "consistent border rounding"). */
.lh-rail-card.k-card {
    border-radius: var(--kendo-border-radius-xxxl);
}

/* The eyebrow label above a rail card's list ("OPERATIONAL FUNCTIONS" / "CLASSES") — replaces Telerik's
   own bordered CardHeader/CardTitle with a plain caption sitting directly over the list. */
.lh-rail-label {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-xs);
    font-weight: var(--lh-weight-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kendo-color-subtle);
}

.lh-rail-add-btn {
    flex: 0 0 auto;
}

/* Stack of rows inside a card body — same equal-share-squash fix as every other GridCard toolbar/row-
   actions group in this app (.lh-card-toolbar>*, .lh-alert-row-actions>*, ...): without this a
   StackLayout's default stretch alignment would split the card's height evenly across rows instead of
   sizing each to its own content. */
.lh-rail-list>* {
    flex: 0 0 auto;
}

/* One rail row: the clickable item, taking the full row width. Same squash fix as above for the row's own
   Horizontal stack. */
.lh-rail-row>* {
    flex: 0 0 auto;
}

.lh-rail-row>.lh-rail-item.k-button {
    flex: 1 1 auto;
    min-width: 0;
}

/* Second-level rows (e.g. a class's groups) sit indented under their parent row. */
.lh-rail-row-nested {
    padding-left: var(--kendo-spacing-4);
}

/* A clickable item — plain TelerikButton FillMode="Flat" styled to read as a nav-list row (full width,
   left-aligned, no button chrome) rather than a button, same intent as the sidebar's own .nav-item in
   sidebar-nav.css. border-radius matches .lh-rail-card's own -xxxl (client ask, 2026-10-07: "pill should
   have the same radius as the cards" — -md still read as mismatched next to the card's corners). */
.lh-rail-item.k-button {
    padding: var(--kendo-spacing-2) var(--kendo-spacing-3);
    border-radius: var(--kendo-border-radius-xxl);
    font-family: var(--lh-font-body);
    font-weight: var(--lh-weight-normal);
    color: var(--kendo-color-base-on-surface);
    text-align: left;
}

.lh-rail-item.k-button:hover {
    background-color: var(--kendo-color-base-subtle);
}

/* justify-content: space-between on .k-button itself never reaches the name/count spans — Kendo wraps a
   button's own content in its own inner .k-button-text span, so the button's flex container only ever
   sees ONE child (that wrapper) to justify; confirmed live via the rendered DOM. The fix has to target
   that inner wrapper directly (client ask, 2026-10-07: "chips aligned to the right side"). */
.lh-rail-item.k-button .k-button-text {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

/* Name (plus an optional expand chevron) on the left of a row. */
.lh-rail-item-label {
    display: inline-flex;
    align-items: center;
    gap: var(--kendo-spacing-2);
    min-width: 0;
}

/* Right side of a row: the selected row's edit action (a span acting as a button — see RailNavItem.razor)
   just left of the count bubble, both inside the pill. */
.lh-rail-item-end {
    display: inline-flex;
    align-items: center;
    gap: var(--kendo-spacing-2);
    flex: 0 0 auto;
}

.lh-rail-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--kendo-spacing-1);
    border-radius: var(--kendo-border-radius-md);
    cursor: pointer;
}

.lh-rail-edit:hover,
.lh-rail-edit:focus-visible {
    background-color: rgba(255, 255, 255, .22);
}

.lh-rail-edit-disabled {
    opacity: .5;
    cursor: default;
    pointer-events: none;
}

/* Selected item — a solid navy pill with white text, matching the client's reference screenshot
   (2026-10-07). !important is load-bearing, not decorative: capes-theme.css's own
   .k-button.k-button-flat rule sets `background: none !important` (confirmed live via the CSSOM), which
   silently swallows this rule's background-color even though its own 2-class selector ties that rule's
   specificity and loads later in the cascade; only !important beats another !important at equal
   specificity. */
.lh-rail-item-active.k-button {
    background-color: var(--kendo-color-secondary) !important;
    color: white;
    font-weight: var(--lh-weight-bold);
}

.lh-rail-item-active.k-button:hover {
    background-color: var(--kendo-color-secondary) !important;
}

/* Count bubble at the right of a row — a small rounded pill rather than plain text. Goes white-on-
   translucent when its row is the selected navy pill, where the default gray-on-gray wouldn't have
   enough contrast. */
.lh-rail-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: var(--kendo-spacing-0-5) var(--kendo-spacing-2);
    border-radius: var(--kendo-border-radius-full);
    background-color: var(--kendo-color-base-subtle);
    color: var(--kendo-color-subtle);
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-xs);
    font-weight: var(--lh-weight-bold);
}

.lh-rail-item-active .lh-rail-count {
    background-color: rgba(255, 255, 255, .22);
    color: white;
}

/* "No functions yet." empty-state text — the plain muted-caption half of what the count chip is not. */
.lh-rail-empty-hint {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-sm);
    color: var(--kendo-color-subtle);
}