/* =========================================================================
   Shared component styles (StatusChip, PriorityPill, SlaBadge, tone badges).
   Requires tokens.css. Chips derive tint and text from the inherited text colour via
   color-mix, so they read well on light and dark themes without a theme switch;
   browsers without color-mix get the solid fallback.
   ========================================================================= */

.ts-chip,
.ts-badge {
    --ts-chip-color: var(--ts-tone-neutral);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--ts-radius-pill);
    font-size: var(--ts-font-size-sm);
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--ts-chip-color);
    color: #ffffff;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
    .ts-chip,
    .ts-badge {
        background: color-mix(in srgb, var(--ts-chip-color) 14%, transparent);
        border-color: color-mix(in srgb, var(--ts-chip-color) 40%, transparent);
        color: color-mix(in srgb, var(--ts-chip-color) 55%, currentColor);
    }
}

.ts-chip__dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ts-chip-color);
}

/* Status → colour (TicketStatusInfo.CssClass). */
.ts-status--new { --ts-chip-color: var(--ts-status-new); }
.ts-status--acknowledged { --ts-chip-color: var(--ts-status-acknowledged); }
.ts-status--inprogress { --ts-chip-color: var(--ts-status-inprogress); }
.ts-status--awaitingcustomer { --ts-chip-color: var(--ts-status-awaitingcustomer); }
.ts-status--resolved { --ts-chip-color: var(--ts-status-resolved); }
.ts-status--closed { --ts-chip-color: var(--ts-status-closed); }
.ts-status--reopened { --ts-chip-color: var(--ts-status-reopened); }
.ts-status--cancelled { --ts-chip-color: var(--ts-status-cancelled); border-style: dashed; }

/* Tone → colour (UiTones.CssClass); usable on .ts-chip and .ts-badge. */
.ts-tone--info { --ts-chip-color: var(--ts-tone-info); }
.ts-tone--success { --ts-chip-color: var(--ts-tone-success); }
.ts-tone--warning { --ts-chip-color: var(--ts-tone-warning); }
.ts-tone--danger { --ts-chip-color: var(--ts-tone-danger); }
.ts-tone--neutral { --ts-chip-color: var(--ts-tone-neutral); }

/* Priority pill: background/text are set inline from PriorityStyle (validated hex + contrast text). */
.ts-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--ts-radius-pill);
    font-size: var(--ts-font-size-sm);
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
}

.ts-pill__dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}

/* SLA: due time + badge. Breached (open, past due) is solid red, the strongest signal on the page;
   missed / met (resolved late / on time) use the soft tone badges. */
.ts-sla {
    display: inline-flex;
    align-items: center;
    gap: var(--ts-space-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ts-sla--breached .ts-sla__due {
    font-weight: 600;
    color: var(--ts-tone-danger);
}

/* 60% keeps the due time above 4.5:1 on the danger row tint in dark mode too (70% was 4.2). */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .ts-sla--breached .ts-sla__due {
        color: color-mix(in srgb, var(--ts-tone-danger) 60%, currentColor);
    }
}

.ts-sla .ts-badge {
    gap: 4px;
    padding: 0 8px;
}

.ts-sla--breached .ts-badge {
    background: var(--ts-tone-danger);
    border-color: var(--ts-tone-danger);
    color: #ffffff;
}

.ts-badge__icon {
    flex: 0 0 auto;
}

/* Row tints for rows that need attention: danger = SLA breached / overdue, warning = awaiting customer /
   due soon. Put the class on the <tr> (staff lists: RowToneController); cells get the tint so grid cell
   backgrounds don't hide it. Transparent mixes work on light and dark themes. */
.ts-row--danger,
.ts-row--danger > td,
.ts-row--sla-breached,
.ts-row--sla-breached > td {
    background-color: #fee2e2;
}

.ts-row--warning,
.ts-row--warning > td {
    background-color: #fef3c7;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
    .ts-row--danger,
    .ts-row--danger > td,
    .ts-row--sla-breached,
    .ts-row--sla-breached > td {
        background-color: color-mix(in srgb, var(--ts-tone-danger) 12%, transparent);
    }

    .ts-row--warning,
    .ts-row--warning > td {
        background-color: color-mix(in srgb, var(--ts-tone-warning) 12%, transparent);
    }
}

/* The accent is 4.47:1 on the danger tint; links and record keys on tinted rows use the stronger shade. */
:is(.ts-row--danger, .ts-row--sla-breached, .ts-row--warning) a:not(.ts-chip, .ts-badge) {
    color: var(--ts-accent-text-strong);
}

/* Settled tickets (resolved / closed / cancelled; RowTones.SettledCssClass): muted italic text at >= 4.5:1.
   Chips, badges and pills keep their colours: their text mixes with the normal text colour, not the muted one. */
.ts-row--settled > td {
    color: var(--ts-text-muted);
    font-style: italic;
}

.ts-row--settled :is(.ts-chip, .ts-badge, .ts-pill) {
    font-style: normal;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
    .ts-row--settled :is(.ts-chip, .ts-badge) {
        color: color-mix(in srgb, var(--ts-chip-color) 55%, var(--ts-text));
    }
}

/* A colour rather than opacity, so muted text stays at >= 4.5:1 wherever it sits. */
.ts-muted {
    color: var(--ts-text-muted);
}

.ts-datetime {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Brand mark: inline logo glyph (currentColor) + product name. */
.ts-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--ts-space-2);
    font-weight: 600;
    white-space: nowrap;
}

.ts-brand__logo {
    flex: 0 0 auto;
}