/* Task Lists (Components/TaskLists/MasterTaskLists.razor) — the Manage/Task Catalog pill toggle that
   replaced the single always-visible stack of cards, and the Tasks-in-list + Task Catalog grids' own
   row-action/edit-row treatment. The left-rail nav styling lives in css/rail-nav.css. */

/* Same ButtonGroup pill recipe as Alert Definitions' own .lh-alert-pill-toggle (vessel-file-header.css's
   .lh-vfh-pill-toggle before that) — each page's CSS file owns its own copy of a class it uses rather than
   sharing one across pages, same convention as everywhere else in this app. */
.lh-tl-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: auto;
}

.lh-tl-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-tl-pill-toggle.k-button-group .k-selected {
    background-color: white;
    color: var(--kendo-color-secondary);
    font-weight: var(--lh-weight-bold);
}

/* The Manage tab's left rail and main column are the shared RailLayout/RailNav (css/rail-nav.css).
   Only the page-specific rules below stay here. */

/* Same equal-share squash as .lh-alert-row-actions (see that rule's own comment, alerts.css, for the full
   confirmed-live story): without this, row-action buttons split the Actions column's width evenly instead
   of sizing to their own content. Shared by the Tasks-in-list grid's command column. */
.lh-tl-row-actions>* {
    flex: 0 0 auto;
}

/* The Due Rule column's EditorTemplate (anchor dropdown + offset number side by side) is taller than a
   plain read-mode cell, and Kendo's own edit-row cells default to top-aligned content — same fix as
   alerts.css's own .lh-alert-grid rule for the identical reason. Scoped to the edit row specifically so
   normal read-mode rows (already centered by Kendo's own default) are untouched. */
.lh-tl-grid .k-grid-edit-row .k-table-td {
    vertical-align: middle;
}

/* Same equal-share-stretch squash as .lh-rail-list>* / .lh-tl-row-actions>* above, just not previously
   caught here: without this, TelerikStackLayout's own default k-justify-content-stretch spaces the anchor
   dropdown and offset box apart to fill this row's full (often wider-than-content) width instead of
   sitting snug next to each other — confirmed via the client's own screenshot (2026-10-07: "so much white
   space in the grid"). Scoped to the inner anchor+offset row specifically — the outer .lh-tl-due-rule-edit
   (Vertical, stacking that row above the before/after radio per the client's follow-up ask the same day)
   doesn't have this problem: a Vertical stack's own stretch only affects width (harmless/expected here),
   not the gaps-between-main-axis-items bug a Horizontal stack has. Shared by both the sentinel add-row and
   the existing-row edit — same markup shape, just different bound fields. */
.lh-tl-due-rule-edit-row>* {
    flex: 0 0 auto;
}

/* The Task Catalog grid's Description line needs to wrap, not truncate — same fix (and reasoning) as
   Alert Definitions' .lh-alert-message-line (alerts.css): dashboard-grid.css's own .lh-grid-line-primary
   rule forces white-space:nowrap/ellipsis, which is right for every other (true single-line) caller of
   that class but clips a longer description with no visual indication there's more. Kept as an
   additional class alongside .lh-grid-line-primary rather than replacing it, so Description keeps that
   class's own color/font-size. */
.lh-tl-description-line {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* Same wrap-not-truncate override, for the Tasks-in-list grid's own Task Name column — narrowing that
   column (client ask, 2026-10-07: "trim between Task column and both the # and Due Rule columns") left
   .lh-grid-vessel-name's own white-space:nowrap/ellipsis silently clipping longer task names (e.g.
   "Arrival Report - VECS") with no visual indication there was more, same risk .lh-tl-description-line
   already fixed for Task Catalog's Description (client ask, same day: "make sure the Tasks columns' text
   isn't being cutoff... try running word wrap"). Kept as an additional class alongside .lh-grid-vessel-name
   rather than replacing it, so Task Name keeps that class's own font-weight/color. */
.lh-tl-task-name-line {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* Underline-style inputs for the Tasks-in-list grid's own edit states (sentinel Add-row and real
   GridEditMode="Inline" row) — matches ItineraryCard's Cargo edit row (client ask, 2026-10-07: "style the
   edit rows to match what we currently have for Cargo... inputs, buttons, and text color"). Scoped to
   .lh-tl-tasks-grid specifically, not the shared .lh-tl-grid both this grid and Task Catalog carry — Task
   Catalog's own edit row (Name/Description) wasn't part of this ask and keeps its normal boxed inputs.
   Also requires a .k-table-td ancestor — without it this caught the pager's own "Rows per page" dropdown
   too (that dropdown lives in GridPagerTemplate, a sibling of the table body, not a cell), which was never
   part of this ask and the client explicitly said to leave alone (2026-10-07: "the dropdown in the paging
   footer didn't need to change, that one can stay as it was"). .k-input is Kendo's shared base wrapper on
   TelerikNumericTextBox (confirmed live), but TelerikDropDownList wraps itself in .k-picker instead (also
   confirmed live — ItineraryCard's own Cargo row never needed this half of the fix because its Group/Name
   fields are TelerikComboBox, which also renders .k-picker, not .k-input; the two input types just
   happened not to be mixed there the way they are here). Both need the same override for a uniform look. */
.lh-tl-tasks-grid .k-table-td .k-input,
.lh-tl-tasks-grid .k-table-td .k-picker {
    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-tl-tasks-grid .k-table-td .k-input-inner {
    font-size: var(--lh-text-sm);
}

/* Kendo's own theme sets a navy color on every grid row via
   .k-grid .k-grid-container .k-grid-content .k-grid-table.k-table .k-table-tbody .k-table-row
   (confirmed live via the CSSOM — that's the rule actually winning, not this app's own CSS), which every
   plain-text element inside it inherits (the radio labels, the dropdown's selected-value text, ...) unless
   overridden. !important is load-bearing: that selector is 6 compound parts deep — far more specific than
   this rule could reach without it, the same specificity gap .lh-rail-item-active's own !important fix
   (above) had to cross. Cargo's own edit row never hits this because it isn't a real TelerikGrid row at
   all (ItineraryCard builds it from plain TelerikStackLayouts), so there was nothing to match there — this
   is this grid's own fix to get back to normal body text color instead of navy (client ask, 2026-10-07:
   "before/after still nav[y] instead of black"). */
.lh-tl-tasks-grid .k-grid-edit-row {
    color: var(--kendo-color-base-on-surface) !important;
}

/* Green-check/red-X Save/Cancel icon buttons, same recipe (and the same reason for the 3-class selector:
   beating Kendo's own .k-button-flat.k-button-success/-error rules) as ItineraryCard's own
   .lh-itin-cargo-save-btn/-cancel-btn. --lh-color-save/--lh-color-cancel are the same global tokens that
   recipe already uses (tokens.css), not new ones. */
.k-button.k-button-flat.lh-tl-save-btn {
    color: var(--lh-color-save);
}

.k-button.k-button-flat.lh-tl-save-btn:hover,
.k-button.k-button-flat.lh-tl-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-tl-cancel-btn {
    color: var(--lh-color-cancel);
}

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

/* The grid header's office dropdown can land on an office with no override of its own (effectively
   showing Default instead) — this banner says so and offers to create one, above the Tasks grid (client
   ask, 2026-10-07; same note+create-override idea as the original mockup, now anchored to the dropdown
   instead of a left-rail Offices card). Dashed border is deliberate (vs. the grid/cards' own solid
   borders) to read as advisory, not another content box. */
.lh-tl-inherit-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kendo-spacing-3);
    padding: var(--kendo-spacing-3) var(--kendo-spacing-4);
    border: 1px dashed var(--lh-border);
    border-radius: var(--kendo-border-radius-md);
    background-color: var(--kendo-color-base-subtle);
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-sm);
    color: var(--kendo-color-subtle);
}

.lh-tl-inherit-banner-link.k-button {
    flex: 0 0 auto;
    color: var(--kendo-color-primary-on-surface);
    font-weight: var(--lh-weight-bold);
    white-space: nowrap;
}