/* Dashboard — the Alerts card (per-vessel alert cards, urgency chips). */

/* Alerts-Card-V1 (Figma node 179:6751). rgba(36,36,36,0.26) matches the button-border-normal token
   already used elsewhere in this file (var(--tb-kendo-color-button-border-normal)), so it's referenced
   directly rather than repeated as a literal. */
.lh-alerts-card.k-card {
    border: 1px solid var(--tb-kendo-color-button-border-normal);
    border-radius: var(--kendo-border-radius-xxxl);
}

/* Same equal-share squash as everywhere else in this file: without this, the title and count chip
   shared the title-group's width equally instead of sizing to their own content. */
.lh-alerts-title-group>* {
    flex: 0 0 auto;
}

/* Count chip next to the title ("17" in Figma) — a plain styled box rather than TelerikChip, same
   reasoning as the grid's status badges: full control over the exact subtle-bg/on-surface-text pairing
   without fighting Chip's own padding/sizing defaults. --kendo-color-primary-subtle is an exact match
   for Figma's own chip bg here. */
.lh-alerts-count-chip {
    display: inline-flex;
    padding: var(--kendo-spacing-1-5) 9px;
    border-radius: var(--kendo-border-radius-md);
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-lg);
    font-weight: var(--lh-weight-bold);
    background-color: var(--kendo-color-primary-subtle);
    color: var(--kendo-color-primary-on-surface);
}

.lh-alerts-card-body.k-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--kendo-spacing-4);
    padding: var(--kendo-spacing-6);
}

/* Wrapping grid of fixed-width vessel cards (Figma: 340px each, 16px gap). */
.lh-alert-card-grid {
    flex-wrap: wrap;
    gap: var(--kendo-spacing-4);
}

.lh-alert-card-grid>* {
    flex: 0 0 auto;
}

.lh-alert-card {
    display: flex;
    align-items: stretch;
    gap: var(--kendo-spacing-2);
    width: 340px;
    padding: var(--kendo-spacing-4);
    background-color: var(--kendo-color-surface);
    border: 1px solid var(--lh-border);
    border-radius: var(--kendo-border-radius-xxxl);
    font-family: var(--lh-font-body);
    text-align: left;
    cursor: pointer;
}

.lh-alert-card:hover {
    background-color: var(--kendo-color-base-subtle);
}

.lh-alert-card-main {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--kendo-spacing-2);
    min-width: 0;
}

.lh-alert-card-vessel {
    align-self: flex-start;
    padding: var(--kendo-spacing-1) 7px;
    border-radius: var(--kendo-border-radius-md);
    font-size: var(--lh-text-sm);
    font-weight: var(--lh-weight-bold);
    background-color: var(--kendo-color-primary-subtle);
    color: var(--kendo-color-primary-on-surface);
}

.lh-alert-card-text {
    font-size: var(--lh-text-md);
    color: var(--kendo-color-base-on-surface);
}

.lh-alert-card .lh-alert-chevron {
    align-self: flex-end;
}

/* Per-urgency chip colors. --kendo-color-*-subtle backgrounds are exact matches for Figma's own hex
   here; the text colors use each color's -on-surface token rather than Chip's own default -on-subtle
   pairing, since on-surface is what actually matches Figma's chosen text color for these specific chips
   (on-subtle is close but not exact for error/info — confirmed by resolving both against the theme). */
.lh-alert-urgency-chip {
    display: inline-flex;
    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);
    white-space: nowrap;
}

.lh-alert-urgency-error {
    background-color: var(--kendo-color-error-subtle);
    color: var(--kendo-color-error-on-surface);
}

.lh-alert-urgency-warning {
    background-color: var(--kendo-color-warning-subtle);
    color: var(--kendo-color-warning-on-surface);
}

.lh-alert-urgency-info {
    background-color: var(--kendo-color-info-subtle);
    color: var(--kendo-color-info-on-surface);
}

/* Added for TasksCard's Due By chip (green tier of the client's placeholder red/yellow/green rule) —
   same subtle/-on-surface recipe as the three above, just the success token instead of error/warning/info. */
.lh-alert-urgency-success {
    background-color: var(--kendo-color-success-subtle);
    color: var(--kendo-color-success-on-surface);
}

/* No-due-date fallback — outside the client's 3-color rule, so it's deliberately not one of the
   semantic urgency colors above; same base-subtle/subtle-text pairing the grid header cells use
   elsewhere in this file. */
.lh-alert-urgency-neutral {
    background-color: var(--kendo-color-base-subtle);
    color: var(--kendo-color-subtle);
}

/* Same two-layer sizing as every other bare TelerikSvgIcon in this file (.lh-nav-icon-sm etc.) — the
   outer span's width/height alone doesn't shrink the inner <svg>, which has its own explicit pixel
   dimensions. */
.lh-alert-chevron.k-svg-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

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