/* Alert Definitions (Components/Alerts/AlertDefinitions.razor) — the status-filter chip group shared by
   both grids' toolbars, the page-header pill toggle that replaced the tab strip, and the Task Alerts
   grid's own GridCommandColumn (true in-row Telerik editing, EditMode="Inline", rather than a
   DetailTemplate expand). */

/* Task Alerts / Value Alerts switcher (client ask, 2026-10-05: a pill toggle instead of a tab strip) —
   same ButtonGroup recipe as .lh-vfh-pill-toggle (vessel-file-header.css, the Vessel File/Port
   Disbursement Account switcher): Kendo's own ButtonGroup selected/unselected styling doesn't match this
   app's navy-pill-container look, so every color here is an explicit override. Not shared with that class
   directly — each page's CSS file owns its own copy of a class it uses, same convention as everywhere
   else in this app. */
.lh-alert-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-alert-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-alert-pill-toggle.k-button-group .k-selected {
    background-color: white;
    color: var(--kendo-color-secondary);
    font-weight: var(--lh-weight-bold);
}

/* The Fires column's EditorTemplate (text box + radio group + checkbox, stacked two rows deep for Unit)
   is taller than every other cell in the row, and Kendo's own edit-row cells default to top-aligned
   content — confirmed live (client ask, 2026-10-05: keep everything vertically centered in edit mode).
   Scoped to the edit row specifically (k-grid-edit-row), not every row, so normal read-mode rows — already
   centered by Kendo's own default — are untouched. */
.lh-alert-grid .k-grid-edit-row .k-table-td {
    vertical-align: middle;
}

/* Same equal-share squash as .lh-port-row-actions/.lh-terminal-row-actions (see those rules' own
   comments for the full confirmed-live story): without this, the StackLayout's default stretch alignment
   splits the Actions column's width evenly between its buttons instead of sizing each to its own content.
   Shared by both grids' row-actions column (client ask, 2026-10-06: match the rest of the app's grids). */
.lh-alert-row-actions>* {
    flex: 0 0 auto;
}

/* Activate/Deactivate's Play/Pause glyphs read a touch heavy at this button's normal icon size (client
   feedback, 2026-10-06) — Telerik ships smaller Play/Pause variants (PlaySm/PauseSm) for exactly this, but
   they're marked Obsolete in this package version (slated for removal in v5), so a CSS shrink on the plain
   Play/Pause icons avoids depending on an API already on its way out. Button itself stays Size="Small" —
   only the svg glyph shrinks. Scoped to both grids' Activate/Deactivate button via this shared class. */
.lh-alert-activate-btn .k-button-icon svg {
    flex: 0 0 auto;
    width: 12px !important;
    height: 12px !important;
}

/* The Message line of Value Alerts' merged Name/Message cell (client ask, 2026-10-06: "putting the
   Message under the Name") needs to wrap, not truncate — dashboard-grid.css's own .lh-grid-line-primary
   rule forces white-space:nowrap/ellipsis everywhere else in the app, where every one of its callers is a
   true single-line cell; this is the first stacked-two-lines use of that class, and without this override
   a message any longer than the column's width got cut off mid-word with no ellipsis even shown (confirmed
   live — text-overflow:ellipsis never gets the chance to run on a flex child with overflow:hidden sized by
   a fixed-height row, it just clips). Kept as an additional class alongside .lh-grid-line-primary rather
   than replacing it, so the Message line keeps that class's own color/font-size. */
.lh-alert-message-line {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}