/* ==========================================================================
   Support Request detail (/support-request/{id})
   Global stylesheet — Blazor scoped CSS is not linked in this app, so all
   custom styling for SupportRequest.razor lives here.
   Linked from index.template.html.

   Design intent: a triage console. Machine data (urls, ids, stack traces,
   status codes) is set in monospace and visually demoted; the human signal
   (subject, fault message, causes, fixes) carries the weight. Tints are built
   with color-mix against --mud-palette-surface so every surface tracks the
   active light/dark theme rather than relying on the light-only --status-*-bg
   tokens.
   ========================================================================== */

/* ---- Layout -------------------------------------------------------------- */
.sr-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 16px 16px 48px;
}

/* Main column carries the narrative (fault, description, analysis); the rail
   carries reference data (environment, ids). Collapses to one column early —
   the rail's key/value pairs get unreadable below ~300px. */
.sr-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 16px;
    align-items: start;
}

@media (max-width: 1100px) {
    .sr-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sr-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* ---- Cards --------------------------------------------------------------- */
.sr-card {
    border: 1px solid var(--mud-palette-table-lines);
    border-radius: 14px;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

.sr-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.sr-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.sr-card__head .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}

.sr-card__body {
    padding: 16px;
}

.sr-card__body--flush {
    padding: 0;
}

/* ---- Triage banner ------------------------------------------------------- */
/* The subject is the headline here — it used to sit as one field among eight
   in a grid, which buried the single thing a triager reads first. */
.sr-triage {
    position: relative;
    border: 1px solid var(--mud-palette-table-lines);
    border-left: 4px solid var(--sr-accent, var(--mud-palette-primary));
    border-radius: 14px;
    background-color: var(--mud-palette-surface);
    padding: 16px 20px;
    overflow: hidden;
}

/* A whisper of the priority hue bleeding in from the accent edge. */
.sr-triage::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 220px;
    pointer-events: none;
    background: linear-gradient(90deg, color-mix(in srgb, var(--sr-accent, var(--mud-palette-primary)) 9%, transparent), transparent);
}

.sr-triage > * {
    position: relative;
    z-index: 1;
}

.sr-triage__subject {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
    margin: 0 0 4px;
    overflow-wrap: anywhere;
}

/* Horizontal rail of small label/value pairs under the subject. */
.sr-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    margin-top: 12px;
}

.sr-meta__item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.sr-meta__label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.sr-meta__value {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 340px;
}

/* ---- Key / value blocks -------------------------------------------------- */
.sr-kv {
    display: flex;
    flex-direction: column;
}

.sr-kv__row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--mud-palette-table-lines);
    min-width: 0;
}

.sr-kv__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sr-kv__row:first-child {
    padding-top: 0;
}

.sr-kv__key {
    flex: 0 0 40%;
    max-width: 150px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: var(--mud-palette-text-secondary);
}

.sr-kv__value {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.sr-kv__value--muted {
    color: var(--mud-palette-text-secondary);
}

/* ---- Machine text -------------------------------------------------------- */
.sr-mono {
    font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", "JetBrains Mono", Consolas, monospace;
    font-size: 0.75rem;
    letter-spacing: -0.1px;
}

/* Copy affordance: the button holds its space so rows never reflow on hover. */
.sr-copyable {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.sr-copyable > .sr-copy-btn {
    opacity: 0;
    transition: opacity 120ms ease;
    flex: 0 0 auto;
}

.sr-copyable:hover > .sr-copy-btn,
.sr-copyable:focus-within > .sr-copy-btn {
    opacity: 1;
}

.sr-copy-btn {
    padding: 0 !important;
    height: 22px !important;
    width: 22px !important;
    min-width: 0 !important;
}

.sr-copy-btn .mud-icon-root {
    font-size: 14px !important;
}

/* ---- Fault callout ------------------------------------------------------- */
/* The captured exception was previously only visible by reading the raw
   diagnostic JSON dump. It is the highest-signal field on the record. */
.sr-fault {
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 32%, transparent);
    border-radius: 14px;
    background-color: color-mix(in srgb, var(--mud-palette-error) 7%, var(--mud-palette-surface));
    overflow: hidden;
}

.sr-fault__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-error) 22%, transparent);
}

.sr-fault__head .mud-icon-root {
    color: var(--mud-palette-error);
}

.sr-fault__title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--mud-palette-error);
}

.sr-fault__message {
    padding: 14px 16px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.sr-fault__inner {
    padding: 0 16px 14px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

/* ---- Prose / description ------------------------------------------------- */
.sr-prose {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.sr-prose--empty {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

/* ---- Analysis ------------------------------------------------------------ */
.sr-confidence {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sr-confidence__track {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 999px;
    background-color: var(--mud-palette-action-default-hover);
    overflow: hidden;
}

.sr-confidence__fill {
    height: 100%;
    border-radius: 999px;
    background-color: var(--sr-accent, var(--mud-palette-primary));
    transition: width 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sr-confidence__value {
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}

/* Numbered / bulleted findings. Counter rather than list-style so the marker
   can be tinted and sized independently of the text. */
.sr-findings {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: sr-finding;
}

.sr-findings > li {
    counter-increment: sr-finding;
    position: relative;
    padding: 6px 0 6px 30px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.sr-findings > li::before {
    content: counter(sr-finding);
    position: absolute;
    left: 0;
    top: 6px;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--sr-marker, var(--mud-palette-text-secondary));
    background-color: color-mix(in srgb, var(--sr-marker, var(--mud-palette-text-secondary)) 14%, transparent);
}

.sr-subhead {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
}

/* ---- API call table ------------------------------------------------------ */
.sr-calls {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.sr-calls th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--mud-palette-surface);
    text-align: left;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-table-lines);
    white-space: nowrap;
}

.sr-calls td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--mud-palette-table-lines);
    vertical-align: middle;
}

.sr-calls tbody tr:last-child td {
    border-bottom: none;
}

.sr-calls tbody tr:hover td {
    background-color: var(--mud-palette-action-default-hover);
}

.sr-calls__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sr-calls__url {
    max-width: 1px; /* lets the ellipsis engage inside a table cell */
    width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

/* Failed / stuck calls get a left edge rather than a full-row wash, so the
   monospace columns stay legible. */
.sr-calls tr.sr-call--bad td:first-child {
    box-shadow: inset 3px 0 0 var(--mud-palette-error);
}

.sr-calls tr.sr-call--pending td:first-child {
    box-shadow: inset 3px 0 0 var(--mud-palette-warning);
}

/* HTTP verb / status tokens. */
.sr-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--sr-tag, var(--mud-palette-text-secondary));
    background-color: color-mix(in srgb, var(--sr-tag, var(--mud-palette-text-secondary)) 13%, transparent);
}

/* HTTP verb chip: neutral and high-contrast — the info blue reads too faint on white. */
.sr-tag--verb {
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-action-default-hover);
}

.sr-tag--ok { --sr-tag: var(--mud-palette-success); }
.sr-tag--warn { --sr-tag: var(--mud-palette-warning); }
.sr-tag--bad { --sr-tag: var(--mud-palette-error); }
.sr-tag--info { --sr-tag: var(--mud-palette-info); }

/* Latency bar sits behind the number, scaled against the slowest call. */
.sr-lat {
    position: relative;
    display: inline-block;
    min-width: 64px;
    padding: 1px 6px;
    border-radius: 5px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
}

.sr-lat__bar {
    position: absolute;
    inset: 0 auto 0 0;
    background-color: color-mix(in srgb, var(--sr-tag, var(--mud-palette-info)) 18%, transparent);
    border-radius: 5px;
}

.sr-lat__text {
    position: relative;
}

/* ---- Stat strip ---------------------------------------------------------- */
.sr-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.sr-stat {
    flex: 1 1 120px;
    min-width: 110px;
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-table-lines);
    border-radius: 10px;
}

.sr-stat__label {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.sr-stat__value {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    color: var(--sr-stat, var(--mud-palette-text-primary));
}

/* ---- Action timeline ----------------------------------------------------- */
/* The breadcrumb of what the user did before the fault reads as a sequence,
   not a data set — a timeline beats the striped table it replaced. */
.sr-timeline {
    position: relative;
    margin: 0;
    padding: 4px 0 4px 4px;
    list-style: none;
}

.sr-timeline::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 11px;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--mud-palette-table-lines) 12%, var(--mud-palette-table-lines) 88%, transparent);
}

.sr-timeline__item {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0 7px 32px;
}

.sr-timeline__item::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 12px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background-color: var(--mud-palette-surface);
    border: 2px solid var(--mud-palette-text-secondary);
    opacity: 0.5;
}

/* The last captured action is the one immediately before the report. */
.sr-timeline__item--last::before {
    border-color: var(--mud-palette-error);
    background-color: var(--mud-palette-error);
    opacity: 1;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-error) 18%, transparent);
}

.sr-timeline__body {
    flex: 1 1 auto;
    min-width: 0;
}

.sr-timeline__name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.sr-timeline__data {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.sr-timeline__time {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* ---- Screenshot ---------------------------------------------------------- */
.sr-shot {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--mud-palette-table-lines);
    border-radius: 12px;
    background: repeating-conic-gradient(var(--mud-palette-action-default-hover) 0% 25%, transparent 0% 50%) 50% / 18px 18px;
    cursor: zoom-in;
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.sr-shot:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}

.sr-shot img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- Raw JSON ------------------------------------------------------------ */
.sr-raw {
    margin: 0;
    padding: 14px 16px;
    max-height: 60vh;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", "JetBrains Mono", Consolas, monospace;
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface));
}

/* Stack traces are wide and repetitive — scroll them rather than wrap, so the
   frame names stay column-aligned and scannable. */
.sr-trace {
    margin: 0;
    padding: 12px 16px;
    max-height: 40vh;
    overflow: auto;
    white-space: pre;
    font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", "JetBrains Mono", Consolas, monospace;
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}