/* Vessel File Detail — VesselFileDetailHeader.razor (breadcrumbs, status chip, tab pill-toggle, header actions). */

/* VesselFileDetailHeader.razor (Figma node 994:25339, "Frame 27"). Left group (breadcrumbs/identity)
   and right group (pill toggle/actions) must size to their own content, not split the row 50/50 —
   same squash fix as everywhere else in this file. */
/* .lh-vfh-right is a vertical (column) stack, so its own default squash axis is height, not width —
   Kendo's k-justify-content-stretch (the main-axis equivalent of k-align-items-stretch) was dividing
   the available height evenly between the pill toggle and the actions row instead of sizing each to
   its own content, inflating the 44px-tall pill toggle to ~51px. Root-caused via measurement, not
   guessed: the pill toggle's own height was confirmed correct in isolation (its .k-button-group rule,
   even forced with an inline !important via JS, never changed the rendered box), which only made sense
   once the ancestor chain showed .lh-vfh-right computing k-justify-content-stretch.

   That k-justify-content-stretch class's own "stretch" value isn't valid for a container's main-axis
   justify-content (stretch is an align-items concept), so browsers just fall back to packing the pill
   toggle and actions row together at the top — the .lh-vfh-right>* fix above stopped them from being
   individually inflated to fill the height, but left the leftover height as dead space below the
   actions row instead of between the two. Client feedback (Figma auto-layout "Gap = Auto / space
   between"): pin the toggle to the top and the actions row to the bottom of the full-height column
   (which .lh-vfh-left's own taller content already stretches this column to match), with the gap
   between them absorbing whatever height is left over. */
.lh-vfh-right {
    justify-content: space-between;
}

.lh-vfh {
    justify-content: space-between;
    width: 100%;
}

.lh-vfh>*,
.lh-vfh-right>*,
.lh-vfh-breadcrumbs>*,
.lh-vfh-actions>* {
    flex: 0 0 auto;
}

/* Breadcrumb links are plain 12px text, not button chrome — same "strip a Link button down to bare
   text" treatment as .lh-grid-view-link, compounded onto .k-button for the same specificity reason. */
.k-button.lh-vfh-breadcrumb-link {
    padding: 0;
    min-width: 0;
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-sm);
    font-weight: var(--lh-weight-normal);
    color: var(--kendo-color-subtle);
}

.lh-vfh-breadcrumb-chevron.k-svg-icon {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    color: var(--kendo-color-subtle);
}

.lh-vfh-breadcrumb-chevron.k-svg-icon svg {
    width: 100%;
    height: 100%;
}

.lh-vfh-breadcrumb-current {
    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);
    white-space: nowrap;
}

/* Subtitle row (Figma node 1292:9431) pairs the status chip with the existing IMO text — same
   equal-share squash as everywhere else in this file without the anti-squash rule. */
.lh-vfh-subtitle-row>* {
    flex: 0 0 auto;
}

/* Status chip (client revision: the small lh-status-badge next to the vessel name is gone — this is
   now the only status indicator in the header, so it has to cover every status, not just InPort). Text
   is "{Status} @ {terminal}" when in port at a berth (VesselFileOps.razor's CurrentTerminalName), else
   just "{Status}". Colored via the same --lh-status-color custom property as the dots/grid badges
   (VesselFileStatusStyles.BadgeColorClassFor) so the color-coding that used to live on the removed
   badge isn't lost — a plain styled box rather than TelerikChip, same reasoning as
   .lh-financial-chip-primary/.lh-alerts-count-chip: full control over the exact subtle-bg/on-surface
   pairing without fighting Chip's own padding/sizing defaults. Padding/radius/font-size are the
   original "In Port @ {terminal}" chip's own Figma-matched values (kendo-spacing-1+1px/kendo-spacing-2
   padding, kendo-border-radius-md, 14px) — larger/more prominent than the small badge it replaces,
   which is the point of relying on this one instead. */
.lh-vfh-status-chip {
    display: inline-flex;
    padding: var(--kendo-spacing-1-5) 9px;
    border-radius: var(--kendo-border-radius-md);
    background-color: color-mix(in srgb, var(--lh-status-color) 8%, white);
    border: 1px solid color-mix(in srgb, var(--lh-status-color) 8%, white);
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-lg);
    color: var(--lh-status-color);
    white-space: nowrap;
}

/* Vessel File / Port Disbursement Account switcher. Kendo's own ButtonGroup selected/unselected
   styling (a light-gray/primary-blue recipe) doesn't match Figma's navy-pill-container treatment at
   all, so every color here is an explicit override rather than relying on Kendo's defaults — unlike
   most buttons elsewhere in this file, which only need FillMode/ThemeColor. white is used literally
   (not a --kendo-color-* token) because Figma's own token for it ("kendo-color-light/subtle") isn't
   one this theme actually defines; same reasoning as the divider/status colors elsewhere in this file
   that fall back to a literal value. */
.lh-vfh-pill-toggle.k-button-group {
    background-color: var(--kendo-color-secondary);
    border-radius: var(--kendo-border-radius-md);
    padding: var(--kendo-spacing-1);
    gap: 0;
    /* Width sizes to the tabs' own content so the group stays intact as tabs are added (it began as a
       fixed 384px sized for exactly two tabs, which clipped the third "Documents" pill). */
    width: auto;
}

.lh-vfh-pill-toggle.k-button-group .k-button {
    flex: 0 0 auto;
    border: 0;
    border-radius: var(--kendo-border-radius-sm);
    background-color: transparent;
    color: white;
    padding: var(--kendo-spacing-2) var(--kendo-spacing-7);
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-lg);
    font-weight: var(--lh-weight-semibold);
}

.lh-vfh-pill-toggle.k-button-group .k-selected {
    background-color: white;
    color: var(--kendo-color-secondary);
    font-weight: var(--lh-weight-bold);
}

.lh-vfh-action-btn {
    white-space: nowrap;
}