/* Company Profile — a page of stacked form cards (Letterhead, Payment Instructions) under a grey note box,
   with the Save button in a footer bar that stays pinned to the bottom of the viewport. Card shell, title
   and field labels reuse the vessel-file cards' .lh-info-card/.lh-info-card-title/.lh-info-edit-label
   (Figma PDA tab, node 1299:11119); only what those don't cover lives here. */

/* Grey info box at the top of the page (the PDA mock's grey "Post-DA Total Days" box shape: subtle
   background, hairline border, large radius). */
.lh-form-note {
    background-color: var(--kendo-color-base-subtle);
    border: 1px solid var(--lh-border-subtle);
    border-radius: var(--kendo-border-radius-xl);
    padding: var(--kendo-spacing-4);
    box-sizing: border-box;
    width: 100%;
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-md);
    color: var(--kendo-color-base-on-surface);
}

/* The note's text takes the remaining width and the button keeps its own size — without this, Kendo's stack
   stretch (the same equal-share squash as the other rows here) would split the box evenly between them. */
.lh-form-note>* {
    flex: 0 0 auto;
}

.lh-form-note>.lh-form-note-text {
    flex: 1 1 auto;
}

/* Fields in a row share the row's width equally (Kendo's stack stretch, which is what's wanted here); a
   field's label sits above its input. min-width:0 lets an input shrink instead of overflowing its share. */
.lh-form-field {
    min-width: 0;
}

/* Same equal-share squash fix as the other stacks: without it a vertical stack's children (label, input,
   validation message) split its height evenly, leaving a gap between a tall text area's label and the box. */
.lh-form-field>* {
    flex: 0 0 auto;
}

/* Makes the page at least one viewport tall (less .lh-app-main's block padding), so the footer's
   margin-block-start:auto below can push it to the bottom of the screen on a page too short to scroll. */
.lh-form-page {
    min-height: calc(100vh - 2 * var(--kendo-spacing-8));
}

/* Pinned save bar — the page-level counterpart of the modal footer band (modals.css .lh-modal-footer: same
   subtle-gray fill, top hairline, padding), full-bleed across the content area rather than a card.
   .lh-app-main (layout.css) pads the page by spacing-8 block / spacing-10 inline; negative margins of exactly
   that pull the bar to the screen's left, right and bottom edges. position:sticky keeps it at the bottom
   edge of that scrolling container while the cards scroll beneath (sticky insets are measured from the
   container's content box, inside its padding, hence the bottom offset of minus that padding), and the
   negative bottom margin lets it rest flush against the bottom once the page is scrolled to the end. Its opaque fill is what separates it
   from the cards passing underneath. */
.lh-form-footer {
    position: sticky;
    bottom: calc(-1 * var(--kendo-spacing-8));
    z-index: 10;
    box-sizing: border-box;
    width: auto;
    margin-inline: calc(-1 * var(--kendo-spacing-10));
    margin-block-start: auto;
    margin-block-end: calc(-1 * var(--kendo-spacing-8));
    padding: var(--kendo-spacing-5) var(--kendo-spacing-10);
    background-color: var(--kendo-color-base-subtle);
    border-top: 1px solid var(--lh-border-subtle);
}

/* Same equal-share squash fix as the other action rows: without it the button would stretch to fill. */
.lh-form-footer>* {
    flex: 0 0 auto;
}