/* Vessel File Detail — the two-column page body split and the right sidebar's SideCard family (TasksCard, ScheduleCard, chips, empty state). */

/* VesselFileOps.razor two-column body (Figma nodes 684:13355 LeftCardsCol / 684:13477 RightSidebarCol).
   Left grows to fill whatever width remains; right stays Figma's fixed 320px regardless of viewport —
   same fixed-column-beside-flexible-column split as .lh-app-main/.lh-sidebar at the page-shell level. */
/* Gap above the card row — VesselFileDetailHeader and this row are plain siblings with no wrapping
   layout between them (unlike the 24px TelerikStackLayout Spacing used between cards within each
   column), so without an explicit margin the General Information card's top border sits flush against
   the chip/IMO subtitle row. Matches the same 24px rhythm used everywhere else on this page. */
.lh-vfo-columns {
    width: 100%;
    margin-top: var(--kendo-spacing-6);
}

.lh-vfo-left-cards {
    flex: 1 1 0%;
    min-width: 0;
}

.lh-vfo-right-sidebar {
    flex: 0 0 320px;
    width: 320px;
}

/* TasksCard / AlertsCard (Figma nodes 871:2771 "Tasks-Card-V1", 871:2858 "Alerts-Card-V1") — the
   RightSidebarCol cards. Narrower and denser than the .lh-info-card family to their left (12px/20px row
   padding vs. that family's 24px card padding, a 0.26-alpha border instead of 0.1), so this is its own
   small class set rather than reusing those. */
.lh-side-card.k-card {
    border: 1px solid var(--tb-kendo-color-button-border-normal);
    border-radius: var(--kendo-border-radius-xxxl);
}

/* display:flex is load-bearing, not decorative — Telerik's own .k-card-header is plain display:block
   (confirmed via computed-style inspection while diagnosing ScheduleCard's header, which is what
   surfaced this), so without it every property below (justify-content, align-items, and the anti-squash
   >* rule) was inert: title and count-chip/Edit-button were quietly stacking vertically instead of
   sitting on one row, on every .lh-side-card user (TasksCard, AlertsCard), not just ScheduleCard. */
.lh-side-card-header.k-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--kendo-spacing-3) var(--kendo-spacing-5);
    border-bottom: 1px solid var(--tb-kendo-color-button-border-normal);
}

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

.lh-side-card-title.k-card-title {
    font-family: var(--lh-font-display);
    font-size: var(--lh-text-2xl);
    font-weight: var(--lh-weight-bold);
    color: var(--kendo-color-secondary);
    margin: 0;
}

.lh-side-card-count-chip {
    display: inline-flex;
    padding: var(--kendo-spacing-1-5) 9px;
    border-radius: var(--kendo-border-radius-md);
    background-color: var(--kendo-color-primary-subtle);
    color: var(--kendo-color-primary-on-surface);
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-lg);
    font-weight: var(--lh-weight-bold);
}

.lh-side-card-body.k-card-body {
    padding: 0;
    max-height: 360px;
    overflow-y: auto;
}

/* Neither Tasks nor Alerts rows are buttons — both use explicit action buttons/links instead of a
   whole-row click target (TasksCard reworked to this shape; AlertsCard never had one — see its own
   comment) — so this is just the plain TelerikStackLayout row styling, no Kendo button-chrome override
   needed. */
.lh-side-card-row {
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    padding: var(--kendo-spacing-3) var(--kendo-spacing-5);
    border-bottom: 1px solid var(--tb-kendo-color-button-border-normal);
}

.lh-side-card-row-content {
    width: 100%;
    justify-content: space-between;
    /* space-between alone has no floor — on a long task name it can push the Complete/Delete group
       right up against the text with no breathing room. gap works alongside space-between as a lower
       bound: space-between still pushes the two groups apart normally, but never lets them get closer
       than this. */
    gap: var(--kendo-spacing-3);
}

/* Without this, the title and the due-chip+chevron group each get Kendo's default flex:1 0 0% and
   split the row's width down the middle instead of sizing to their own content — same "equal-share
   squash" pattern as everywhere else in this file (.lh-card-header-row>*, .lh-itin-terminal-header>*,
   ...). With it, justify-content:space-between on the parent actually pushes the title to the row's
   left edge and the due chip to its right edge, so a short task name doesn't read as crowded against
   the date next to it. */
.lh-side-card-row-content>* {
    flex: 0 0 auto;
}

.lh-side-card-row-title {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-md);
    font-weight: var(--lh-weight-semibold);
    color: var(--kendo-color-on-app-surface);
    text-align: left;
}

/* TasksCard's due date, now below the task name instead of beside it (Figma node 1297:10144's reworked
   row) — always this same neutral gray now (client call from a live feedback meeting: no more urgency
   coloring here, the Alerts system is the sole "due date approaching" signal — see this file's own
   header comment). */
.lh-tasks-row-due {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-sm);
    font-weight: var(--lh-weight-normal);
    color: var(--kendo-color-subtle);
    text-align: left;
}

/* TasksCard's Complete (Solid/Primary — see TasksCard.razor) and Delete (Outline/Secondary) buttons —
   both Size="ExtraSmall" per the designer's node 871:2771 pass. Kendo's own k-button-xs sizing/padding
   already matches Figma closely enough that
   neither needs padding/font-size overridden here; .lh-tasks-delete-btn just fixes Delete's icon-only
   button to a perfect square (Kendo's own xs padding alone left it slightly wider than tall). */
.k-button.lh-tasks-delete-btn {
    padding: var(--kendo-spacing-1);
    width: 24px;
    justify-content: center;
}

/* Complete Task modal's "Mark as Complete" button (Figma node 1292:8888) — a lighter teal fill than
   the app's real --kendo-color-primary currently resolves to (#00a9a6, synced from Figma via
   ThemeBuilder — see TasksCard.razor's own comment on this modal for why that token isn't hand-edited
   directly). Scoped to just this button for now rather than every modal's confirm button. Three
   classes to beat Kendo's own .k-button.k-button-solid.k-button-primary rule (same specificity fight
   as .lh-tasks-complete-btn's urgency colors above). */
.k-button.k-button-solid.lh-task-complete-confirm-btn {
    background-color: #b3eceb;
    border-color: #80e0de;
    color: #111722;
}

.k-button.k-button-solid.lh-task-complete-confirm-btn:hover,
.k-button.k-button-solid.lh-task-complete-confirm-btn.k-hover {
    background-color: #80e0de;
    border-color: #80e0de;
    color: #111722;
}

/* Gap between the Tasks card and its "Restore Deleted Tasks" button below it (Figma node 1297:10144's
   Frame 33 — the link sits just outside the card, right-aligned). */
.lh-tasks-restore-link-row {
    padding-top: var(--kendo-spacing-2);
}

/* "Restore Deleted Tasks" (Flat fill — no border, matching Figma's plain text-link look) — just small,
   secondary-colored (navy) regular-weight text+icon sizing, since Kendo's default Flat button is
   full-size semibold text. Icon is CustomIcon Name="undo" (thin 1px stroke, matching Figma node
   1297:10135) instead of Telerik's own bold/filled SvgIcon.ArrowRotateCcw — sized via CustomIcon's own
   fixed 16x16 svg attributes, no separate .k-icon rule needed here. */
.k-button.lh-tasks-restore-link-btn {
    padding: var(--kendo-spacing-1) var(--kendo-spacing-1-5);
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-sm);
    font-weight: var(--lh-weight-normal);
}

/* ScheduleCard's edit-mode form — .lh-side-card-body itself is padding:0 (read-mode rows supply their
   own 12px/20px via .lh-side-card-row), so the date pickers need their own padding here instead. */
.lh-schedule-edit-panel {
    padding: var(--kendo-spacing-4) var(--kendo-spacing-5) var(--kendo-spacing-5);
}

/* ScheduleCard's header needs its own layout, unlike TasksCard/AlertsCard's single-line title:
   align-items:flex-start (not the base rule's center, now that display:flex actually applies — see
   that rule's own comment) pins Edit to the top instead of centering it against the two-line title+note
   block, and the title block needs flex:1 1 0% so it fills the remaining row width instead of sizing to
   the note's max-content length (which, combined with the note text inheriting .lh-itin-note's
   white-space:nowrap from ItineraryCard's usage, was forcing the note — and the whole header — wide
   enough to push Edit onto its own line). The 3-class selector below intentionally outweighs the base
   rule's >* specificity. */
.lh-side-card-header.lh-schedule-header {
    align-items: flex-start;
}

.lh-side-card-header.lh-schedule-header>.lh-schedule-header-title {
    flex: 1 1 0%;
    min-width: 0;
}

/* Kendo's own .k-card-header sets font-weight: semibold as a base style for its title (meant for
   CardTitle, but it's an inherited property on the header element itself, so every plain-text
   descendant picks it up too) — ScheduleCard uses a real <CardHeader>, so this note inherits that
   semibold weight unless overridden. ItineraryCard's equivalent note never has this problem since its
   title/note row isn't inside a real CardHeader (just a plain TelerikStackLayout), so its note stays at
   .lh-itin-note's own unset (regular) weight — this override just matches that. */
.lh-schedule-note {
    white-space: normal;
    font-weight: var(--lh-weight-normal);
}

.lh-side-card-chip-primary,
.lh-side-card-chip-info {
    display: inline-flex;
    flex-shrink: 0;
    padding: var(--kendo-spacing-0-5) 7px;
    border-radius: var(--kendo-border-radius-md);
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-sm);
    font-weight: var(--lh-weight-semibold);
}

.lh-side-card-chip-primary {
    background-color: var(--kendo-color-primary-subtle);
    color: var(--kendo-color-primary-on-surface);
}

.lh-side-card-chip-info {
    background-color: var(--kendo-color-info-subtle);
    color: var(--kendo-color-info-on-surface);
}

.lh-side-card-empty {
    padding: var(--kendo-spacing-5);
}