/* Vessel File Detail — the left-column card group: GeneralInfoCard/VesselInfoCard's shared info-card/label-value-grid chrome plus ItineraryCard (terminal cards, cargo table, cargo edit row). These two are intentionally one file: several selectors (.lh-info-label/.lh-itin-cell-label etc.) are shared between them, not just adjacent. */

/* GeneralInfoCard / VesselInfoCard / ItineraryCard (Figma nodes 684:13356, 684:13391, 888:3871) — the
   Vessel File Detail page's left card group. All three share this card shell, header row, and
   label/value grid, so the rules below are shared rather than duplicated per component. */
.lh-info-card.k-card {
    border: 1px solid var(--lh-border-subtle);
    border-radius: var(--kendo-border-radius-xxxl);
}

.lh-info-card-body.k-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--kendo-spacing-4);
    padding: var(--kendo-spacing-6);
}

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

.lh-info-card-header>* {
    flex: 0 0 auto;
}

/* Terminal card header: the name+badge group on the left, "Edit Terminal" pushed to the far right
   (same shape as .lh-info-card-header now, since each berth got its own inline editor). The name and
   badge inside the group still need the anti-squash so the badge doesn't stretch. */
.lh-itin-terminal-header {
    justify-content: space-between;
}

.lh-itin-terminal-header>*,
.lh-itin-terminal-name-group>* {
    flex: 0 0 auto;
}

/* Per-berth edit action row: "Delete Terminal" hard left, Cancel/Save grouped hard right (Figma
   node 905:17095). */
.lh-itin-berth-edit-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.lh-itin-berth-edit-actions-right {
    display: flex;
    gap: var(--kendo-spacing-3);
}

/* "Delete Terminal" — Kendo's own default button font-weight is --kendo-font-weight-semibold (600);
   client feedback wanted it thinner, matching the plain/regular weight already used for other small
   text-labeled action buttons in this file (e.g. .lh-info-card-edit-btn). Two-class selector beats
   Kendo's own .k-button rule (same specificity fight as this file's other button overrides). */
.k-button.lh-itin-delete-terminal-btn {
    font-weight: var(--lh-weight-normal);
}

.lh-info-card-title {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-3xl);
    font-weight: var(--lh-weight-semibold);
    color: var(--kendo-color-secondary);
}

/* Small bordered icon+label button ("Edit", "Change Vessel", ...) — a distinct, smaller variant of
   the Outline button used everywhere else in this file, so it's its own class rather than reusing
   .lh-vfh-action-btn's sizing. Two-class specificity: a caller that also sets ThemeColor to something
   other than Primary still recolors correctly, since Kendo's own .k-button.k-button-outline.k-button-*
   rules are three classes and win over this (same reasoning TasksCard's buttons rely on — see
   .lh-tasks-complete-btn/.lh-tasks-delete-btn below, which now use their own dedicated classes instead
   of this one, but the same specificity fact is why their ThemeColor swaps work). Component Size=Small
   per the designer's latest pass (paired with Size="ThemeConstants.Button.Size.Small" on the caller's
   own TelerikButton) — padding here is the 8px/3px (horizontal/vertical) that size calls for. */
.k-button.lh-info-card-edit-btn {
    border-color: var(--kendo-color-primary-on-surface);
    color: var(--kendo-color-primary-on-surface);
    padding: 3px var(--kendo-spacing-2);
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-sm);
    font-weight: var(--lh-weight-normal);
}

.lh-info-card-edit-btn .k-icon {
    width: 16px;
    height: 16px;
}

/* Manual icon+label row for buttons using CustomIcon.razor instead of TelerikButton's own Icon param
   (that param only accepts Telerik's built-in SvgIcon set) — same anti-squash need as everywhere else
   in this file: without it, Kendo's default flex:1 0 0% on this row's two children (the <svg>, the
   label) would stretch/squash them instead of sizing each to its own content. */
.lh-btn-icon-label>* {
    flex: 0 0 auto;
}

/* Each row's columns split the row evenly — this is Kendo's own default flex:1 0 0% on StackLayout
   children, which for once is exactly the layout Figma wants (equal-width Col cells), so unlike most
   rows in this file .lh-info-row needs no anti-squash override. min-width:0 keeps a long value from
   forcing its column wider than its equal share (the usual flex-item min-width:auto floor). */
.lh-info-col {
    min-width: 0;
}

/* .lh-info-col's own children (label, input, and — for Payer/Nominator — the "Add New" link row) are a
   *different* flex context than the row-level squash above: this is the column's vertical main axis,
   and Kendo's k-justify-content-stretch (no VerticalAlign set) was giving them flex:1 0 0% too. Row
   pairs where one side's column is naturally taller than the other's (e.g. Payer Principal's "Add New
   Payer" link makes it taller than Voyage Number, which has no such link) get stretched to equal
   height by .lh-info-row's own align-items:stretch — fine, that's a real cross-axis effect — but
   without this rule the shorter column's *input itself* was what absorbed the leftover height, growing
   taller and pushing it out of vertical alignment with its actual same-height counterpart. Root-caused
   via computed-style/rendered-class inspection (client feedback: Voyage Number's TextBox and Port's
   ComboBox both looked too tall and out of line with their row partners). */
.lh-info-col>* {
    flex: 0 0 auto;
}

/* Same "equal-share squash" bug as .lh-info-col above, one level up: NewVesselFileModal's own field
   wrappers (label+input, sometimes +an "Add New X" link row) sit directly in .lh-modal-body/.lh-modal-
   panel — both Vertical-oriented TelerikStackLayouts with no VerticalAlign set, so Kendo's own
   k-justify-content-stretch gives every field wrapper flex:1 0 0% along that vertical main axis. Fields
   already inside a .lh-info-row/.lh-info-col pair (Previous/Next Port, ETA/ETD) were already protected
   by the rule above; every other field on this modal (Office, Port, Voyage Number, Payer, Nominating
   Principal, Assigned Agent, Vessel IMO Number, and the whole New Vessel particulars panel) wasn't,
   so its label and input split the wrapper's inflated leftover height between them — taller input,
   bigger-looking label-to-input gap — even though the actual CSS gap was a correct 4px throughout.
   Root-caused via computed-style inspection against Previous Port's already-correct measurements
   (client feedback: Assigned Agent's ComboBox was shorter, with a tighter title-field gap, than
   Previous Port's TextBox — backwards from what was actually happening: Previous Port was the correct
   one, everything else was inflated). lh-modal-field marks every such wrapper, wherever it's nested. */
.lh-modal-field>* {
    flex: 0 0 auto;
}

.lh-info-label,
.lh-itin-cell-label {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-xs);
    font-weight: var(--lh-weight-semibold);
    line-height: var(--lh-leading-tight);
    text-transform: uppercase;
    color: var(--kendo-color-subtle);
}

.lh-info-value,
.lh-itin-cell-value {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-lg);
    line-height: var(--lh-leading-tight);
    color: var(--kendo-color-base-on-surface);
}

/* Edit-mode field labels (GeneralInfoCard) are a different recipe than read-mode's — not uppercase,
   darker, matching Figma's edit-form screenshot exactly. */
.lh-info-edit-label {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-sm);
    font-weight: var(--lh-weight-semibold);
    color: var(--kendo-color-base-on-surface);
}

/* NewVesselFileModal's "Vessel IMO Number" label while its ComboBox is Enabled="false" (new-IMO mode) —
   Kendo's own disabled styling only reaches the ComboBox itself, not this sibling label, so the field
   read as "half disabled" (grey box, still-black title) until the title got this too. Matches Figma
   node 898:7758's own disabled-text color (rgba(36,36,36,0.3) — same family of hardcoded rgba already
   used for .lh-modal-panel's border a few rules down, no matching semantic token exists for this one). */
.lh-info-edit-label-disabled {
    color: var(--lh-text-disabled);
}

/* Kendo dims a disabled input/picker's own typed-value text (color-mix against --kendo-color-on-app-
   surface at 14%, landing close to the rgba(36,36,36,0.3) disabled-text color used above), but its
   ::placeholder rule (color: --kendo-color-subtle, #556376) is unconditional — it never checks disabled
   state, so a disabled field's placeholder actually reads darker/more legible than its own real value
   would. Not specific to Vessel IMO's ComboBox (surfaced there, via NewVesselFileModal's new-IMO mode)
   — every disabled TextBox/ComboBox/DropDownList/DateTimePicker in the app has this same gap, so it's
   fixed at the Kendo base-class level rather than one component's own override. */
.k-input.k-disabled input::placeholder,
.k-picker.k-disabled input::placeholder {
    color: var(--lh-text-disabled);
    opacity: 1;
}

/* Without the child rule below, Kendo's own k-justify-content-stretch (added because this
   TelerikStackLayout sets no HorizontalAlign) gives Cancel/Save flex: 1 0 0% each, so they split the
   row's full width evenly — the container's justify-content: flex-end never gets a chance to matter
   since there's no leftover space left to push around. Same "equal-share squash" pattern as
   .lh-vfh-actions, .lh-vfh-right, and .lh-side-card-row-content's own child rules elsewhere in this
   file. Root-caused via rendered-class/computed-style inspection (client feedback, Figma node
   906:18444: Save/Cancel should be compact and right-aligned, not full width). Shared by every
   inline-edit Save/Cancel pair on the Vessel File page (GeneralInfoCard, VesselInfoCard,
   ItineraryCard's top-section edit — ScheduleCard's own Save/Cancel moved into a dedicated footer band
   instead, see .lh-schedule-footer).

   margin-top: 8px tops up the parent TelerikStackLayout's own 16px Spacing (gap, not margin — confirmed
   via computed style) to the client's requested 24px gap between a form's last field row and its button
   row, without touching the 16px rhythm between the field rows themselves (that's the same parent's gap,
   shared by every child pair uniformly — this is the one pair that needed to be different). */
.lh-info-edit-actions {
    justify-content: flex-end;
    width: 100%;
    margin-top: var(--kendo-spacing-2);
}

.lh-info-edit-actions>* {
    flex: 0 0 auto;
}

.lh-info-divider {
    height: 1px;
    width: 100%;
    background-color: var(--lh-border-subtle);
    flex-shrink: 0;
}

.lh-info-section-label {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-sm);
    font-weight: var(--lh-weight-bold);
    text-transform: uppercase;
    color: var(--kendo-color-subtle);
}

/* ItineraryCard-specific pieces the shared rules above don't cover — also reused as-is by
   ChangeVesselModal/NewVesselFileModal's own "these details will create..." info notes (same icon +
   text-note shape). Without the anti-squash rule below, Kendo's own default flex:1 0 0% on the row's
   two children (icon, note) wins over the icon's explicit width:16px — flex-basis:0% means the
   specified width never applies, so both children instead just grow to evenly split the row's width.
   That's what actually caused the reported bug (a huge icon, and the note squeezed into too narrow a
   box to fit its sentence on one line) — same "equal-share squash" pattern as everywhere else in this
   file, not something specific to .lh-itin-note being a TelerikStackLayout vs. a <span>; the note is a
   <span> now too (a plain text leaf with no layout role of its own — see telerik-ui-patterns.md), but
   that's a separate, unrelated cleanup from the actual fix here. */
.lh-itin-note-row>* {
    flex: 0 0 auto;
}

.lh-itin-note-icon.k-svg-icon {
    width: 16px;
    height: 16px;
    color: var(--kendo-color-subtle);
}

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

.lh-itin-note {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-2xs);
    font-style: italic;
    color: var(--kendo-color-subtle);
    white-space: nowrap;
}

.lh-itin-portflow>* {
    flex: 1 1 0%;
    min-width: 0;
}

.lh-itin-section-title {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-xl);
    font-weight: var(--lh-weight-semibold);
    color: var(--kendo-color-secondary);
    text-transform: uppercase;
}

/* "Add Terminal" and "Add Cargo" are navy (--kendo-color-secondary), not the teal every
   .lh-info-card-edit-btn "Edit"-style button uses — a distinct color Figma gives its "Add" buttons, so
   it's its own class layered on the same Small-size sizing rather than a variant of that shared class.
   Component Size=Small per the designer's latest pass, same 8px/3px padding as .lh-info-card-edit-btn. */
.k-button.lh-itin-add-terminal-btn {
    border-color: var(--kendo-color-secondary);
    color: var(--kendo-color-secondary);
    padding: 3px var(--kendo-spacing-2);
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-sm);
    font-weight: var(--lh-weight-normal);
}

.lh-itin-add-terminal-btn .k-icon {
    width: 16px;
    height: 16px;
}

.lh-itin-empty {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-md);
    font-style: italic;
    color: var(--kendo-color-subtle);
}

.lh-itin-terminal-card {
    background-color: var(--kendo-color-app-surface);
    border: 1px solid var(--lh-border-subtle);
    border-radius: var(--kendo-border-radius-xxl);
    padding: var(--kendo-spacing-4);
    width: 100%;
    box-sizing: border-box;
}

.lh-itin-terminal-name {
    font-family: var(--lh-font-body);
    font-size: 15px;
    font-weight: var(--lh-weight-bold);
    color: var(--kendo-color-base-on-surface);
}

.lh-itin-action-badge {
    display: inline-flex;
    padding: 3px 7px;
    border-radius: var(--kendo-border-radius-md);
    background-color: var(--kendo-color-primary-subtle);
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-2xs);
    font-weight: var(--lh-weight-semibold);
    color: black;
}

.lh-itin-terminal-body {
    width: 100%;
}

.lh-itin-terminal-dates-row>* {
    flex: 1 1 0%;
    min-width: 0;
}

.lh-itin-cargo-label {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-sm);
    font-weight: var(--lh-weight-bold);
    text-transform: uppercase;
    color: var(--kendo-color-subtle);
}

.lh-itin-cargo-table {
    border: 1px solid var(--lh-border-subtle);
    border-radius: var(--kendo-border-radius-lg);
    overflow: hidden;
    width: 100%;
}

.lh-itin-cargo-head-row {
    background-color: var(--kendo-color-base-subtle);
    padding: var(--kendo-spacing-2) var(--kendo-spacing-3);
    width: 100%;
    box-sizing: border-box;
}

.lh-itin-cargo-head-row>* {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-xs);
    font-weight: var(--lh-weight-semibold);
    color: var(--kendo-color-subtle);
}

.lh-itin-cargo-head-commodity {
    flex: 1 1 0%;
    min-width: 0;
}

.lh-itin-cargo-head-action {
    flex: 0 0 90px;
    width: 90px;
}

.lh-itin-cargo-head-amount {
    flex: 0 0 100px;
    width: 100px;
}

.lh-itin-cargo-row {
    padding: var(--kendo-spacing-2) var(--kendo-spacing-3);
    border-top: 1px solid var(--lh-border-faint);
    background-color: white;
    width: 100%;
    box-sizing: border-box;
}

.lh-itin-cargo-commodity {
    flex: 1 1 0%;
    min-width: 0;
}

.lh-itin-cargo-commodity-name {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-sm);
    font-weight: var(--lh-weight-semibold);
    color: var(--kendo-color-base-on-surface);
}

/* The commodity's own group name, shown above the name (client revision — was the commodity's
   description shown below the name; the client no longer wants descriptions in this card at all,
   group-over-name reads better) — smaller/lighter than the name, same subtle-gray convention as
   .lh-financial-description elsewhere in this file. Rows for a commodity with no group just render the
   name alone (ItineraryCard.razor skips this element entirely). */
.lh-itin-cargo-commodity-desc {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-xs);
    color: var(--kendo-color-subtle);
}

.lh-itin-cargo-action {
    flex: 0 0 90px;
    width: 90px;
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-sm);
    color: var(--kendo-color-base-on-surface);
}

.lh-itin-cargo-amount {
    flex: 0 0 100px;
    width: 100px;
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-sm);
    color: var(--kendo-color-base-on-surface);
}

/* Trailing Edit/Delete icon-button column (Figma node 905:17095's per-cargo-row action pair) — narrower
   than the other columns since it holds two 24px icon buttons, not text. */
.lh-itin-cargo-head-actions {
    flex: 0 0 60px;
    width: 60px;
    text-align: right;
}

.lh-itin-cargo-row-actions {
    flex: 0 0 60px;
    width: 60px;
    justify-content: flex-end;
}

.lh-itin-cargo-row-actions>* {
    flex: 0 0 auto;
}

/* Cargo edit row's Save (check) / Cancel (X) icon buttons — client feedback comparing against the
   Figma mock: the designer used specific custom greens/reds here, not this theme's semantic success/
   error tokens (which run lighter/brighter — same category of drift as the primary teal and the In
   Port status chip elsewhere in this file, just a deliberate design choice this time rather than a
   ThemeBuilder sync side-effect). Three classes each to beat Kendo's own
   .k-button.k-button-flat.k-button-success/-error rules (same specificity fight as every other
   FillMode=Flat/ThemeColor override in this file). */
.k-button.k-button-flat.lh-itin-cargo-save-btn {
    color: var(--lh-color-save);
}

.k-button.k-button-flat.lh-itin-cargo-save-btn:hover,
.k-button.k-button-flat.lh-itin-cargo-save-btn.k-hover {
    color: var(--lh-color-save);
    background-color: color-mix(in srgb, var(--lh-color-save) 12%, transparent);
}

.k-button.k-button-flat.lh-itin-cargo-cancel-btn {
    color: var(--lh-color-cancel);
}

.k-button.k-button-flat.lh-itin-cargo-cancel-btn:hover,
.k-button.k-button-flat.lh-itin-cargo-cancel-btn.k-hover {
    color: var(--lh-color-cancel);
    background-color: color-mix(in srgb, var(--lh-color-cancel) 12%, transparent);
}

/* Inline cargo add/edit row (Figma node 935:20770, client revision — replaces the old
   AddEditCargoModal). Taller than a read-only .lh-itin-cargo-row (the Group/Name combos stack
   vertically), so it's its own class rather than reusing that row's fixed-height assumptions; border/
   background/padding otherwise match it exactly so the row doesn't visually jump when it swaps in.
   Column widths deliberately mirror .lh-itin-cargo-head-commodity/-head-action/-head-amount exactly
   (flex:1/90px/100px) rather than Figma's own wider literal pixel values — Figma's mock wasn't drawn
   against this table's actual header widths, and matching them is what keeps the edit row's fields
   lined up under their column headers and keeps the whole row inside the card instead of overflowing
   it (reported with the nav sidebar open, which narrows the card further). */
.lh-itin-cargo-edit-row {
    padding: var(--kendo-spacing-2) var(--kendo-spacing-3);
    border-top: 1px solid var(--lh-border-faint);
    background-color: white;
    width: 100%;
    box-sizing: border-box;
}

.lh-itin-cargo-edit-row>* {
    flex: 0 0 auto;
}

/* Each column reserves an 8px right-side gutter INSIDE its own flex-basis (border-box, so the gutter
   doesn't add to the column's declared width) rather than using the row's own flex `gap` — a uniform
   row-level gap would eat only into the flex-grow commodity column and push every fixed-width column
   after it further right than its header, breaking the alignment above. Padding-per-column keeps every
   column's start position exactly where it was (still aligned to its header) and just visually separates
   each column's control from the next one's. */
.lh-itin-cargo-edit-combo-col {
    flex: 1 1 0%;
    min-width: 0;
    box-sizing: border-box;
    padding-right: var(--kendo-spacing-2);
}

.lh-itin-cargo-edit-radio-col {
    flex: 0 0 90px;
    width: 90px;
    box-sizing: border-box;
    padding-right: var(--kendo-spacing-2);
}

.lh-itin-cargo-edit-amount-col {
    flex: 0 0 100px;
    width: 100px;
    box-sizing: border-box;
    padding-right: var(--kendo-spacing-2);
}

/* ComboBox/NumericTextBox styling to match Figma's own compact inline-editor look (node 935:20788/
   935:20979) — a flat bottom-border-only "underline" field instead of Kendo's default full-box border,
   and Figma's own 12px (kendo-font-size-sm) instead of the app-wide 14px default. Scoped to this row
   only: every other input in the app keeps the standard full-border look (spacious modal forms, not a
   dense inline table row), so this isn't a global input restyle. .k-input is the shared base class
   Kendo puts on both TelerikComboBox and TelerikNumericTextBox's outer wrapper alongside their own
   k-combobox/k-numerictextbox class (confirmed via rendered DOM, not guessed). Deliberately still
   applies to both controls here — this dense row is its own "specific look" (client feedback), not an
   instance of the "dropdowns shouldn't get the darker bottom border" rule that applies elsewhere. */
.lh-itin-cargo-edit-row .k-input {
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-md) var(--kendo-border-radius-md) 0 0;
}

.lh-itin-cargo-edit-row .k-input-inner {
    font-size: var(--lh-text-sm);
}

/* Actual's read-only Unit Type mirror (ItineraryCard.razor, TelerikTextBox Enabled="false") — undoes
   Kendo's own .k-input.k-disabled dimming (border-color already comes out looking right without any
   override here, since the row-level rule two up and this one carry equal specificity and app.css loads
   after the theme; only color needs it — .k-input.k-disabled's own color is a 30%-mixed fade). Three
   classes to beat that two-class Kendo rule outright rather than rely on load order for this one.
   min-height fixes a real, separate bug: a bare TextBox has no dropdown button sibling, so its box
   naturally sizes to its own input content alone (~29px) — shorter than a ComboBox's box, which stretches
   to match its own chevron button's taller rendered height (32px) in the same flex row. Root-caused via
   computed-style comparison against the enabled Estimated combo beside it (client feedback: Actual's
   Unit Type looked shorter, with a top border out of line with its row partners). */
.k-input.k-disabled.lh-itin-cargo-uom-display {
    min-height: 32px;
    color: var(--kendo-color-base-on-surface);
}