html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--tm-focus-ring-inner), 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* Note and template bodies are plain text from Manage; preserve their line breaks. */
.tm-plain-text {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Unscoped: Bootstrap paints td via inset box-shadow. Scoped Board.razor.css
   often misses dynamically added rows until a full refresh. */
#ticket-grid.table > tbody > tr.selected > td {
    --bs-table-bg: var(--tm-row-selected-bg);
    --bs-table-accent-bg: var(--tm-row-selected-bg);
    --bs-table-bg-state: var(--tm-row-selected-bg);
    background-color: var(--tm-row-selected-bg) !important;
    box-shadow: inset 0 0 0 9999px var(--tm-row-selected-bg);
}

#ticket-grid.table > tbody > tr.sla-breached > td {
    --bs-table-bg: var(--tm-sla-breach-bg);
    --bs-table-accent-bg: var(--tm-sla-breach-bg);
    --bs-table-hover-bg: color-mix(in srgb, var(--tm-sla-breach-bg) 88%, #000);
    --bs-table-bg-state: var(--tm-sla-breach-bg);
    background-color: var(--tm-sla-breach-bg) !important;
    box-shadow: inset 0 0 0 9999px var(--tm-sla-breach-bg);
}

#ticket-grid.table > tbody > tr.sla-breached.selected > td {
    --bs-table-bg: color-mix(in srgb, var(--tm-sla-breach-bg) 70%, var(--tm-row-selected-bg));
    --bs-table-accent-bg: color-mix(in srgb, var(--tm-sla-breach-bg) 70%, var(--tm-row-selected-bg));
    --bs-table-bg-state: color-mix(in srgb, var(--tm-sla-breach-bg) 70%, var(--tm-row-selected-bg));
    background-color: color-mix(in srgb, var(--tm-sla-breach-bg) 70%, var(--tm-row-selected-bg)) !important;
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--tm-sla-breach-bg) 70%, var(--tm-row-selected-bg));
}

#ticket-grid.table > tbody > tr.orphaned > td {
    --bs-table-bg: var(--tm-orphan-bg);
    --bs-table-accent-bg: var(--tm-orphan-bg);
    --bs-table-hover-bg: color-mix(in srgb, var(--tm-orphan-bg) 88%, #000);
    --bs-table-bg-state: var(--tm-orphan-bg);
    background-color: var(--tm-orphan-bg) !important;
    box-shadow: inset 0 0 0 9999px var(--tm-orphan-bg);
}

#ticket-grid.table > tbody > tr.orphaned.selected > td {
    --bs-table-bg: color-mix(in srgb, var(--tm-orphan-bg) 70%, var(--tm-row-selected-bg));
    --bs-table-accent-bg: color-mix(in srgb, var(--tm-orphan-bg) 70%, var(--tm-row-selected-bg));
    --bs-table-bg-state: color-mix(in srgb, var(--tm-orphan-bg) 70%, var(--tm-row-selected-bg));
    background-color: color-mix(in srgb, var(--tm-orphan-bg) 70%, var(--tm-row-selected-bg)) !important;
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--tm-orphan-bg) 70%, var(--tm-row-selected-bg));
}

#ticket-grid.table > tbody > tr.orphaned.sla-breached > td {
    --bs-table-bg: color-mix(in srgb, var(--tm-orphan-bg) 65%, var(--tm-sla-breach-bg));
    --bs-table-accent-bg: color-mix(in srgb, var(--tm-orphan-bg) 65%, var(--tm-sla-breach-bg));
    --bs-table-hover-bg: color-mix(in srgb, var(--tm-orphan-bg) 55%, var(--tm-sla-breach-bg));
    --bs-table-bg-state: color-mix(in srgb, var(--tm-orphan-bg) 65%, var(--tm-sla-breach-bg));
    background-color: color-mix(in srgb, var(--tm-orphan-bg) 65%, var(--tm-sla-breach-bg)) !important;
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--tm-orphan-bg) 65%, var(--tm-sla-breach-bg));
}

#ticket-grid.table > tbody > tr.orphaned.sla-breached.selected > td {
    --bs-table-bg: color-mix(in srgb, var(--tm-orphan-bg) 55%, var(--tm-row-selected-bg));
    --bs-table-accent-bg: color-mix(in srgb, var(--tm-orphan-bg) 55%, var(--tm-row-selected-bg));
    --bs-table-bg-state: color-mix(in srgb, var(--tm-orphan-bg) 55%, var(--tm-row-selected-bg));
    background-color: color-mix(in srgb, var(--tm-orphan-bg) 55%, var(--tm-row-selected-bg)) !important;
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--tm-orphan-bg) 55%, var(--tm-row-selected-bg));
}