/* /Components/ApiCheckBadge.razor.rz.scp.css */
.api-check-badge[b-s5mufdbslr] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 100px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.4;
}

.api-check-badge-icon[b-s5mufdbslr] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.api-check-badge--healthy[b-s5mufdbslr]  { background: #dcfce7; color: #166534; }
.api-check-badge--warning[b-s5mufdbslr]  { background: #fef3c7; color: #92400e; }
.api-check-badge--critical[b-s5mufdbslr] { background: #fee2e2; color: #991b1b; }
.api-check-badge--unknown[b-s5mufdbslr]  { background: #f1f5f9; color: #475569; }
/* /Components/BookmarkCard.razor.rz.scp.css */
/* ─── Card shell ─────────────────────────────────────────────── */

.bookmark-card[b-uvgk0v9vvc] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem 1.125rem 0.875rem;
    color: inherit;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.15s, border-color 0.15s;
    min-height: 160px;
}

.bookmark-card:hover[b-uvgk0v9vvc] {
    border-color: var(--color-brand-teal);
    box-shadow: 0 4px 12px rgba(7, 70, 132, 0.1);
}

.bookmark-card:focus-visible[b-uvgk0v9vvc] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

/* ─── Header: favicon + name + launch ────────────────────────── */

.bookmark-card-header[b-uvgk0v9vvc] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.bookmark-card-logo-wrap[b-uvgk0v9vvc] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-top: 0.0625rem;
}

.bookmark-card-favicon[b-uvgk0v9vvc] {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    object-fit: contain;
    display: block;
}

.bookmark-card-favicon-fallback[b-uvgk0v9vvc] {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: var(--color-brand);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    font-family: var(--font-title);
    align-items: center;
    justify-content: center;
    letter-spacing: 0.03em;
    user-select: none;
}

.bookmark-card-name[b-uvgk0v9vvc] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    font-family: var(--font-title);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-width: 0;
    flex: 1;
}

.bookmark-card-launch[b-uvgk0v9vvc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.1s, background 0.1s;
    flex-shrink: 0;
    margin-top: 0.0625rem;
}

.bookmark-card-launch:hover[b-uvgk0v9vvc] {
    color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

/* ─── Meta row: category badge + group ───────────────────────── */

.bookmark-card-meta[b-uvgk0v9vvc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.4rem;
    min-width: 0;
}

.bookmark-card-category[b-uvgk0v9vvc] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-brand-teal);
    background: rgba(14, 165, 198, 0.08);
    border: 1px solid rgba(14, 165, 198, 0.3);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}

.bookmark-card-group[b-uvgk0v9vvc] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ─── Description ────────────────────────────────────────────── */

.bookmark-card-desc[b-uvgk0v9vvc] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 0.375rem;
    line-height: 1.4;
}

/* ─── Tags row ───────────────────────────────────────────────── */

.bookmark-card-tags[b-uvgk0v9vvc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.375rem;
}

/* ─── Notes indicator ────────────────────────────────────────── */

.bookmark-card-notes-indicator[b-uvgk0v9vvc] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    margin-top: auto;
    padding-top: 0.375rem;
    opacity: 0.8;
}
/* /Components/ClientGroup.razor.rz.scp.css */
.client-group[b-7f83j2cba3] {
    margin-bottom: 2.5rem;
}

.client-group-heading[b-7f83j2cba3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
    margin: 0 0 1rem;
    min-height: 56px;
}

.client-group-sep[b-7f83j2cba3] {
    color: var(--color-border);
}

.client-group-logo[b-7f83j2cba3] {
    height: 56px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    opacity: 0.9;
    border-radius: 2px;
    flex-shrink: 0;
}

.site-grid[b-7f83j2cba3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
/* /Components/Helpdesk/HelpdeskAgentActions.razor.rz.scp.css */
/* P2-1 agent action composer. Brand tokens only (CLAUDE.md §12) — no hardcoded hex/fonts. */

.haa[b-h9sa0wh1y4] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.haa-block[b-h9sa0wh1y4] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.haa-label[b-h9sa0wh1y4] {
    font-family: var(--font-subtitle);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.haa-input[b-h9sa0wh1y4] {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.haa-input:focus[b-h9sa0wh1y4] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.18);
}

.haa-input:disabled[b-h9sa0wh1y4] {
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
}

.haa-textarea[b-h9sa0wh1y4] {
    resize: vertical;
    min-height: 3.5rem;
}

.haa-canned[b-h9sa0wh1y4] {
    max-width: 18rem;
}

.haa-actions[b-h9sa0wh1y4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.haa-row[b-h9sa0wh1y4] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.haa-block--inline[b-h9sa0wh1y4] {
    flex: 1 1 16rem;
}

.haa-result[b-h9sa0wh1y4] {
    font-family: var(--font-body);
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.haa-result--ok[b-h9sa0wh1y4] {
    color: var(--color-healthy-text);
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.30);
}

.haa-result--err[b-h9sa0wh1y4] {
    color: var(--color-down-text);
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.30);
}
/* /Components/HelperChat.razor.rz.scp.css */
/* ─── Toggle button (fixed in header area) ───────────────────── */

.helper-toggle-btn[b-9cw4c10006] {
    position: fixed;
    top: 0.625rem;
    right: 1.5rem;
    z-index: 101; /* above header (100) */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.helper-toggle-btn:hover[b-9cw4c10006] {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.helper-toggle-btn svg[b-9cw4c10006] {
    width: 18px;
    height: 18px;
}

/* ─── Backdrop ────────────────────────────────────────────────── */

.helper-backdrop[b-9cw4c10006] {
    position: fixed;
    inset: 0;
    z-index: 149;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.helper-backdrop--open[b-9cw4c10006] {
    opacity: 1;
    pointer-events: auto;
}

/* ─── Panel ──────────────────────────────────────────────────── */

.helper-panel[b-9cw4c10006] {
    position: fixed;
    top: 3.5rem; /* below header */
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    z-index: 150;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.helper-panel--open[b-9cw4c10006] {
    transform: translateX(0);
}

/* ─── Header ─────────────────────────────────────────────────── */

.helper-header[b-9cw4c10006] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    background: var(--color-brand);
    color: #fff;
    flex-shrink: 0;
}

.helper-header-left[b-9cw4c10006] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.helper-header-icon[b-9cw4c10006] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.helper-header-title[b-9cw4c10006] {
    font-family: var(--font-subtitle);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.helper-header-actions[b-9cw4c10006] {
    display: flex;
    gap: 0.25rem;
}

.helper-header-btn[b-9cw4c10006] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.helper-header-btn:hover[b-9cw4c10006] {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.helper-header-btn svg[b-9cw4c10006] {
    width: 14px;
    height: 14px;
}

/* ─── Messages ───────────────────────────────────────────────── */

.helper-messages[b-9cw4c10006] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ─── Welcome ────────────────────────────────────────────────── */

.helper-welcome[b-9cw4c10006] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1rem;
    flex: 1;
}

.helper-welcome-title[b-9cw4c10006] {
    font-family: var(--font-subtitle);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-brand);
    margin: 0 0 0.25rem;
}

.helper-welcome-sub[b-9cw4c10006] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.helper-welcome-prompts[b-9cw4c10006] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
}

.helper-prompt-btn[b-9cw4c10006] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-brand);
    background: rgba(7, 70, 132, 0.04);
    border: 1px solid rgba(7, 70, 132, 0.12);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.helper-prompt-btn:hover[b-9cw4c10006] {
    background: rgba(7, 70, 132, 0.08);
    border-color: rgba(7, 70, 132, 0.25);
}

/* ─── Bubbles ────────────────────────────────────────────────── */

.helper-bubble[b-9cw4c10006] {
    max-width: 92%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.55;
    word-break: break-word;
}

.helper-bubble--user[b-9cw4c10006] {
    align-self: flex-end;
    background: var(--color-brand);
    color: #fff;
    border-bottom-right-radius: 0.25rem;
}

.helper-bubble--assistant[b-9cw4c10006] {
    align-self: flex-start;
    background: #f1f5f9;
    color: #1e293b;
    border-bottom-left-radius: 0.25rem;
}

.helper-bubble--error[b-9cw4c10006] {
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 0.5rem;
}

.helper-error-icon[b-9cw4c10006] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #dc2626;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.helper-bubble--streaming[b-9cw4c10006] {
    min-height: 2rem;
}

/* ─── Typing indicator ───────────────────────────────────────── */

.helper-typing[b-9cw4c10006] {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    height: 1.2rem;
}

.helper-typing span[b-9cw4c10006] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94a3b8;
    animation: helper-bounce-b-9cw4c10006 1.4s infinite ease-in-out both;
}

.helper-typing span:nth-child(1)[b-9cw4c10006] { animation-delay: 0s; }
.helper-typing span:nth-child(2)[b-9cw4c10006] { animation-delay: 0.16s; }
.helper-typing span:nth-child(3)[b-9cw4c10006] { animation-delay: 0.32s; }

@keyframes helper-bounce-b-9cw4c10006 {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ─── Usage footer ───────────────────────────────────────────── */

.helper-usage-footer[b-9cw4c10006] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.helper-usage-badge[b-9cw4c10006] {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.helper-usage-badge--in[b-9cw4c10006] {
    background: rgba(7, 70, 132, 0.06);
    color: var(--color-brand);
}

.helper-usage-badge--out[b-9cw4c10006] {
    background: rgba(14, 165, 198, 0.08);
    color: #0e7490;
}

.helper-usage-badge--cost[b-9cw4c10006] {
    background: rgba(245, 158, 11, 0.08);
    color: #92400e;
}

/* ─── Soft-limit warning ─────────────────────────────────────── */

.helper-soft-limit[b-9cw4c10006] {
    padding: 0.625rem 0.75rem;
    background: #fffbeb;
    border-top: 1px solid #fde68a;
    flex-shrink: 0;
}

.helper-soft-limit p[b-9cw4c10006] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: #92400e;
    margin: 0 0 0.5rem;
}

.helper-soft-limit-actions[b-9cw4c10006] {
    display: flex;
    gap: 0.5rem;
}

/* ─── Input area ─────────────────────────────────────────────── */

.helper-input-area[b-9cw4c10006] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-top: 1px solid #e2e8f0;
    background: #fff;
    flex-shrink: 0;
}

.helper-input[b-9cw4c10006] {
    flex: 1;
    min-height: 2.25rem;
    max-height: 6rem;
    padding: 0.375rem 0.625rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    resize: none;
    outline: none;
    transition: border-color 0.15s;
    line-height: 1.5;
}

.helper-input:focus[b-9cw4c10006] {
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 2px rgba(14, 165, 198, 0.15);
}

.helper-input:disabled[b-9cw4c10006] {
    background: #f8fafc;
    color: #94a3b8;
}

.helper-send-btn[b-9cw4c10006] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 0.5rem;
    background: var(--color-brand);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, opacity 0.15s;
}

.helper-send-btn:hover:not(:disabled)[b-9cw4c10006] {
    background: #053566;
}

.helper-send-btn:disabled[b-9cw4c10006] {
    opacity: 0.4;
    cursor: not-allowed;
}

.helper-send-btn svg[b-9cw4c10006] {
    width: 15px;
    height: 15px;
}

/* ─── Markdown inside bubbles ────────────────────────────────── */

[b-9cw4c10006] .helper-bubble--assistant p {
    margin: 0.25rem 0;
}

[b-9cw4c10006] .helper-bubble--assistant p:first-child {
    margin-top: 0;
}

[b-9cw4c10006] .helper-bubble--assistant p:last-child {
    margin-bottom: 0;
}

[b-9cw4c10006] .helper-bubble--assistant table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5rem 0;
    font-size: 0.75rem;
}

[b-9cw4c10006] .helper-bubble--assistant th,
[b-9cw4c10006] .helper-bubble--assistant td {
    padding: 0.25rem 0.5rem;
    border: 1px solid #cbd5e1;
    text-align: left;
}

[b-9cw4c10006] .helper-bubble--assistant th {
    background: #e2e8f0;
    font-weight: 600;
}

[b-9cw4c10006] .helper-bubble--assistant code {
    background: rgba(0, 0, 0, 0.06);
    padding: 0.1em 0.3em;
    border-radius: 0.25rem;
    font-size: 0.85em;
}

[b-9cw4c10006] .helper-bubble--assistant ul,
[b-9cw4c10006] .helper-bubble--assistant ol {
    margin: 0.25rem 0;
    padding-left: 1.25rem;
}

[b-9cw4c10006] .helper-bubble--assistant li {
    margin: 0.125rem 0;
}
/* /Components/HistoryBar.razor.rz.scp.css */
.hbar[b-yr01clpno1] {
    display: flex;
    gap: 2px;
    align-items: stretch;
    height: 18px;
    background: #e4eaf0;
    border-radius: 3px;
    padding: 2px;
    width: fit-content;
}

.hbar-tile[b-yr01clpno1] {
    width: 7px;
    border-radius: 1.5px;
    opacity: 0.9;
    transition: opacity 0.1s;
}

tr:hover .hbar-tile[b-yr01clpno1] { opacity: 1; }

.hbar-tile--healthy[b-yr01clpno1]  { background: var(--color-healthy); }
.hbar-tile--degraded[b-yr01clpno1] { background: var(--color-degraded); }
.hbar-tile--down[b-yr01clpno1]     { background: var(--color-down); }
.hbar-tile--unknown[b-yr01clpno1]  { background: #b8c8d8; }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-94ldww244j] {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - 56px);
}

.app-main[b-94ldww244j] {
    flex: 1;
    min-width: 0;
}

.app-content[b-94ldww244j] {
    max-width: 1800px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

#blazor-error-ui[b-94ldww244j] {
    background: #fef3c7;
    border-top: 1px solid #fbbf24;
    bottom: 0;
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 0.875rem;
    color: #92400e;
}

#blazor-error-ui .reload[b-94ldww244j] {
    margin-left: 0.5rem;
    font-weight: 600;
    color: #92400e;
}

#blazor-error-ui .dismiss[b-94ldww244j] {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.top-bar[b-6c153dyqy5] {
    background-color: var(--color-brand);
    color: white;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(7, 70, 132, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.brand[b-6c153dyqy5] {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 0.25rem 0.75rem;
    transition: background 0.15s, border-color 0.15s;
}

.brand:hover[b-6c153dyqy5] {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.18);
    text-decoration: none;
}

.brand-icon[b-6c153dyqy5] {
    display: block;
    height: 28px;
    width: auto;
    flex-shrink: 0;
}

.top-bar-spacer[b-6c153dyqy5] {
    flex: 1;
}

.nav-actions[b-6c153dyqy5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.auth-pill[b-6c153dyqy5] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius);
    padding: 0.3rem 0.45rem 0.3rem 0.625rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: white;
}

.auth-pill--link[b-6c153dyqy5] {
    text-decoration: none;
    padding: 0.35rem 0.75rem;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
}

.auth-pill--link:hover[b-6c153dyqy5] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    color: white;
    text-decoration: none;
}

.auth-name[b-6c153dyqy5] {
    font-weight: 600;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.signout-btn[b-6c153dyqy5] {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    border-radius: calc(var(--radius) - 1px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.signout-btn:hover[b-6c153dyqy5] {
    background: rgba(255, 255, 255, 0.18);
    color: white;
    border-color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
}

/* ─── Site connection badge (rendered inside NavMenu) ───────── */

[b-6c153dyqy5] .site-conn-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.625rem 0.3rem 0.75rem;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 999px;
    flex-shrink: 0;
}

[b-6c153dyqy5] .site-conn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
    animation: conn-pulse-b-6c153dyqy5 2.5s infinite;
}

@keyframes conn-pulse-b-6c153dyqy5 {
    0%, 100% { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25); }
    50%       { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);  }
}

[b-6c153dyqy5] .site-conn-name {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-6c153dyqy5] .site-conn-disconnect {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.65rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

[b-6c153dyqy5] .site-conn-disconnect:hover {
    background: rgba(239, 68, 68, 0.4);
    border-color: rgba(239, 68, 68, 0.6);
    color: #fff;
}
/* /Components/Layout/SideNav.razor.rz.scp.css */
.side-nav[b-o7t36cxomb] {
    position: sticky;
    top: 56px;
    align-self: flex-start;
    height: calc(100vh - 56px);
    width: 232px;
    flex-shrink: 0;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease;
}

.side-nav.is-collapsed[b-o7t36cxomb] { width: 64px; }

.side-nav-inner[b-o7t36cxomb] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.side-nav.is-collapsed .side-nav-inner[b-o7t36cxomb] {
    padding: 1.25rem 0.5rem 0.5rem;
}

.nav-section[b-o7t36cxomb] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.nav-section-label[b-o7t36cxomb] {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    padding: 0 0.75rem 0.375rem;
}

.side-nav.is-collapsed .nav-section-label[b-o7t36cxomb] {
    opacity: 0;
    height: 0;
    padding: 0;
    pointer-events: none;
    overflow: hidden;
}

.side-nav.is-collapsed .nav-section + .nav-section[b-o7t36cxomb] {
    border-top: 1px solid var(--color-border);
    padding-top: 0.5rem;
    margin-top: 0.25rem;
}

[b-o7t36cxomb] .nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    transition: background 0.12s, color 0.12s;
    position: relative;
    white-space: nowrap;
}

[b-o7t36cxomb] .nav-item:hover {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

[b-o7t36cxomb] .nav-item.active {
    background: rgba(7, 70, 132, 0.08);
    color: var(--color-brand);
}

[b-o7t36cxomb] .nav-item.active::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 3px;
    background: var(--color-brand-teal);
    border-radius: 0 3px 3px 0;
}

.side-nav.is-collapsed[b-o7t36cxomb]  .nav-item.active::before {
    left: -0.5rem;
}

[b-o7t36cxomb] .nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

[b-o7t36cxomb] .nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-nav.is-collapsed[b-o7t36cxomb]  .nav-item {
    justify-content: center;
    padding: 0.5rem;
}

.side-nav.is-collapsed[b-o7t36cxomb]  .nav-label {
    display: none;
}

.collapse-toggle[b-o7t36cxomb] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    height: 40px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.collapse-toggle:hover[b-o7t36cxomb] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.collapse-toggle .chevron[b-o7t36cxomb] {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.side-nav.is-collapsed .collapse-toggle .chevron[b-o7t36cxomb] {
    transform: rotate(180deg);
}
/* /Components/MarkdownViewer.razor.rz.scp.css */
.markdown-viewer[b-4oszbfu53c] {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text);
    line-height: 1.65;
}

.markdown-viewer h1[b-4oszbfu53c],
.markdown-viewer h2[b-4oszbfu53c],
.markdown-viewer h3[b-4oszbfu53c],
.markdown-viewer h4[b-4oszbfu53c],
.markdown-viewer h5[b-4oszbfu53c],
.markdown-viewer h6[b-4oszbfu53c] {
    font-family: var(--font-title);
    color: var(--color-text-strong);
    margin: 1rem 0 0.4rem;
    line-height: 1.3;
}

.markdown-viewer h1[b-4oszbfu53c] { font-size: 1.25rem; }
.markdown-viewer h2[b-4oszbfu53c] { font-size: 1.1rem; }
.markdown-viewer h3[b-4oszbfu53c] { font-size: 1rem; }

.markdown-viewer p[b-4oszbfu53c] {
    margin: 0 0 0.75rem;
}

.markdown-viewer ul[b-4oszbfu53c],
.markdown-viewer ol[b-4oszbfu53c] {
    margin: 0 0 0.75rem 1.25rem;
    padding: 0;
}

.markdown-viewer li[b-4oszbfu53c] {
    margin-bottom: 0.25rem;
}

.markdown-viewer code[b-4oszbfu53c] {
    font-family: monospace;
    font-size: 0.85em;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 0.2rem;
    padding: 0.1em 0.35em;
    color: var(--color-brand);
}

.markdown-viewer pre[b-4oszbfu53c] {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    margin: 0 0 0.75rem;
}

.markdown-viewer pre code[b-4oszbfu53c] {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.85rem;
    color: var(--color-text);
}

.markdown-viewer blockquote[b-4oszbfu53c] {
    border-left: 3px solid var(--color-brand-teal);
    margin: 0 0 0.75rem 0;
    padding: 0.25rem 0.75rem;
    color: var(--color-text-muted);
    background: var(--color-surface-raised);
    border-radius: 0 0.25rem 0.25rem 0;
}

.markdown-viewer a[b-4oszbfu53c] {
    color: var(--color-brand-teal);
    text-decoration: underline;
}

.markdown-viewer a:hover[b-4oszbfu53c] {
    color: var(--color-brand);
}

.markdown-viewer hr[b-4oszbfu53c] {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1rem 0;
}

.markdown-viewer table[b-4oszbfu53c] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.markdown-viewer th[b-4oszbfu53c],
.markdown-viewer td[b-4oszbfu53c] {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border);
    text-align: left;
}

.markdown-viewer th[b-4oszbfu53c] {
    background: var(--color-surface-raised);
    font-weight: 600;
    color: var(--color-text-strong);
}
/* /Components/Pages/AiSettings.razor.rz.scp.css */
/* ─── Hero stat tiles ─────────────────────────────────────── */
.ai-stat-grid[b-1o98rwtss0] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.875rem;
    margin: 1rem 0 1.5rem;
}

@media (max-width: 1100px) {
    .ai-stat-grid[b-1o98rwtss0] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .ai-stat-grid[b-1o98rwtss0] { grid-template-columns: 1fr; }
}

.ai-stat-tile[b-1o98rwtss0] {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    min-height: 5.5rem;
}

.ai-stat-icon[b-1o98rwtss0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
    color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 8%, white);
}

.ai-stat-icon svg[b-1o98rwtss0] { width: 1.15rem; height: 1.15rem; }

.ai-stat-icon--teal[b-1o98rwtss0] {
    color: var(--color-brand-teal);
    background: color-mix(in srgb, var(--color-brand-teal) 10%, white);
}

.ai-stat-body[b-1o98rwtss0] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.ai-stat-label[b-1o98rwtss0] {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.ai-stat-value[b-1o98rwtss0] {
    font-family: var(--font-title);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-stat-unit[b-1o98rwtss0] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-left: 0.15rem;
}

.ai-stat-meta[b-1o98rwtss0] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.ai-stat-meta-unit[b-1o98rwtss0] {
    color: var(--color-text-secondary);
    opacity: 0.8;
}

.ai-stat-pill-row[b-1o98rwtss0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.1rem 0 0.05rem;
}

.ai-pill[b-1o98rwtss0] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: var(--font-body);
    letter-spacing: 0.01em;
    line-height: 1.4;
    white-space: nowrap;
}

.ai-pill--on[b-1o98rwtss0] {
    background: color-mix(in srgb, var(--color-brand-teal) 12%, white);
    color: var(--color-brand);
    border: 1px solid color-mix(in srgb, var(--color-brand-teal) 40%, white);
}

.ai-pill--off[b-1o98rwtss0] {
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

/* ─── Tab strip ───────────────────────────────────────────── */
.ai-tabs[b-1o98rwtss0] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin: 0 0 1.25rem;
    overflow-x: auto;
}

.ai-tab[b-1o98rwtss0] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.1rem;
    font-family: var(--font-subtitle);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.ai-tab:hover[b-1o98rwtss0] { color: var(--color-text-primary); }

.ai-tab--active[b-1o98rwtss0] {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand);
    font-weight: 600;
}

/* ─── Card layout ─────────────────────────────────────────── */
.ai-card-grid[b-1o98rwtss0] {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ai-card-grid--two[b-1o98rwtss0]   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ai-card-grid--three[b-1o98rwtss0] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .ai-card-grid--two[b-1o98rwtss0],
    .ai-card-grid--three[b-1o98rwtss0] { grid-template-columns: 1fr; }
}

.ai-card[b-1o98rwtss0] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 1rem;
}

.ai-card-grid .ai-card[b-1o98rwtss0] { margin-bottom: 0; }

.ai-card-header[b-1o98rwtss0] {
    padding: 0.875rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(180deg, var(--color-surface-raised), var(--color-surface));
}

.ai-card-header--plain[b-1o98rwtss0] {
    background: var(--color-surface);
}

.ai-card-eyebrow[b-1o98rwtss0] {
    display: inline-block;
    font-family: var(--font-subtitle);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--color-brand);
    margin-bottom: 0.25rem;
}

.ai-card-eyebrow--teal[b-1o98rwtss0] { color: var(--color-brand-teal); }

.ai-card-title[b-1o98rwtss0] {
    font-family: var(--font-title);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.3;
}

.ai-card-subtitle[b-1o98rwtss0] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin: 0.2rem 0 0;
    line-height: 1.4;
}

.ai-card-rows[b-1o98rwtss0] {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
}

.ai-card-rows--two[b-1o98rwtss0] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 700px) {
    .ai-card-rows--two[b-1o98rwtss0] { grid-template-columns: 1fr; }
}

.ai-card-row[b-1o98rwtss0] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    min-width: 0;
}

.ai-card-row:last-child[b-1o98rwtss0],
.ai-card-rows--two .ai-card-row:nth-last-child(-n+2):nth-child(odd)[b-1o98rwtss0],
.ai-card-rows--two .ai-card-row:last-child[b-1o98rwtss0] {
    border-bottom: none;
}

.ai-card-rows--two .ai-card-row:nth-child(odd)[b-1o98rwtss0] {
    border-right: 1px solid var(--color-border);
}

@media (max-width: 700px) {
    .ai-card-rows--two .ai-card-row:nth-child(odd)[b-1o98rwtss0] { border-right: none; }
    .ai-card-rows--two .ai-card-row[b-1o98rwtss0] { border-bottom: 1px solid var(--color-border); }
    .ai-card-rows--two .ai-card-row:last-child[b-1o98rwtss0] { border-bottom: none; }
}

.ai-card-row dt[b-1o98rwtss0] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin: 0;
    flex-shrink: 0;
}

.ai-card-row dd[b-1o98rwtss0] {
    font-size: 0.875rem;
    color: var(--color-text-primary);
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-code[b-1o98rwtss0] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    padding: 0.1rem 0.4rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    color: var(--color-text-primary);
}

/* ─── Metric grid (limits) ────────────────────────────────── */
.ai-metric-grid[b-1o98rwtss0] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

@media (max-width: 700px) {
    .ai-metric-grid[b-1o98rwtss0] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ai-metric[b-1o98rwtss0] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem 1.25rem;
    border-right: 1px solid var(--color-border);
}

.ai-metric:last-child[b-1o98rwtss0] { border-right: none; }

@media (max-width: 700px) {
    .ai-metric:nth-child(even)[b-1o98rwtss0] { border-right: none; }
    .ai-metric:nth-child(-n+2)[b-1o98rwtss0] { border-bottom: 1px solid var(--color-border); }
}

.ai-metric--accent[b-1o98rwtss0] {
    background: color-mix(in srgb, var(--color-brand) 3%, var(--color-surface));
}

.ai-metric-label[b-1o98rwtss0] {
    font-family: var(--font-subtitle);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

.ai-metric-value[b-1o98rwtss0] {
    font-family: var(--font-title);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* ─── Prompt preview ──────────────────────────────────────── */
.ai-prompt-source[b-1o98rwtss0] {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.ai-prompt-preview[b-1o98rwtss0] {
    margin: 1rem 1.25rem 1.25rem;
    padding: 0.875rem 1rem;
    white-space: pre-wrap;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    max-height: 22rem;
    overflow-y: auto;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
}

/* ─── Footer note ─────────────────────────────────────────── */
.ai-tab-note[b-1o98rwtss0] {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-brand-teal);
    border-radius: 0.375rem;
}

.ai-footer-note[b-1o98rwtss0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.ai-footer-note svg[b-1o98rwtss0] { color: var(--color-brand-teal); flex-shrink: 0; }

.settings-link[b-1o98rwtss0] {
    color: var(--color-brand-teal);
    text-decoration: none;
    font-weight: 500;
}

.settings-link:hover[b-1o98rwtss0] { text-decoration: underline; }
/* /Components/Pages/AiSettingsEdit.razor.rz.scp.css */
/* ─── Section note banner (mirrors AwsSettingsEdit — needed due to CSS isolation) ── */

.aws-section-note[b-cywg9fe6yo] {
    padding: 0.875rem 1.25rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.aws-section-note--warn[b-cywg9fe6yo] {
    background: #fffbeb;
    color: #78350f;
    border-color: #fde68a;
}

/* ─── Local overrides ─────────────────────────────────────────────────── */

.form-input--custom-model[b-cywg9fe6yo] {
    margin-top: 0.375rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
}

.ai-prompt-textarea[b-cywg9fe6yo] {
    min-height: 10rem;
    resize: vertical;
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.6;
}
/* /Components/Pages/AiUsage.razor.rz.scp.css */
/* ── Summary cards ──────────────────────────────────────────────────────── */
.ai-usage-summary-row[b-mzwy9eptqc] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.ai-usage-card[b-mzwy9eptqc] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.5rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    min-width: 10rem;
    flex: 1;
}

.ai-usage-card--cost[b-mzwy9eptqc] {
    border-left: 3px solid var(--color-brand-teal);
}

.ai-usage-card-value[b-mzwy9eptqc] {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
}

.ai-usage-card-label[b-mzwy9eptqc] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.ai-usage-range[b-mzwy9eptqc] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-bottom: 1.25rem;
}

/* ── View tabs (Breakdown / Detail) ────────────────────────────────────── */
.ai-usage-tabs[b-mzwy9eptqc] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1rem;
}

.ai-usage-tab[b-mzwy9eptqc] {
    padding: 0.5rem 1.25rem;
    background: transparent;
    border: none;
    font-family: var(--font-subtitle);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.ai-usage-tab:hover[b-mzwy9eptqc] { color: var(--color-text); }

.ai-usage-tab--active[b-mzwy9eptqc] {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand);
}

/* ── Period sub-tabs (Daily / Weekly / Monthly) ────────────────────────── */
.ai-usage-period-tabs[b-mzwy9eptqc] {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.ai-usage-period-tab[b-mzwy9eptqc] {
    padding: 0.3rem 0.875rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.ai-usage-period-tab:hover[b-mzwy9eptqc] {
    border-color: var(--color-brand-teal);
    color: var(--color-text);
}

.ai-usage-period-tab--active[b-mzwy9eptqc] {
    background: color-mix(in srgb, var(--color-brand-teal) 12%, transparent);
    border-color: var(--color-brand-teal);
    color: var(--color-brand);
}

/* ── Data grid (shared by breakdown + detail) ──────────────────────────── */
.ai-usage-grid-section[b-mzwy9eptqc] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 8px);
    overflow-x: auto;
}

.ai-usage-grid[b-mzwy9eptqc] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 0.84rem;
}

.ai-usage-gh[b-mzwy9eptqc] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    padding: 0.625rem 1rem;
    text-align: left;
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
    background: var(--color-surface-raised);
    position: sticky;
    top: 0;
}

.ai-usage-gh--num[b-mzwy9eptqc] { text-align: right; }

.ai-usage-grow[b-mzwy9eptqc] {
    border-bottom: 1px solid var(--color-border);
}

.ai-usage-grow:last-child[b-mzwy9eptqc] { border-bottom: none; }

.ai-usage-grow:hover[b-mzwy9eptqc] {
    background: color-mix(in srgb, var(--color-brand) 3%, transparent);
}

.ai-usage-grow--total[b-mzwy9eptqc] {
    background: var(--color-surface-raised);
    border-top: 2px solid var(--color-border);
}

.ai-usage-grow--total:hover[b-mzwy9eptqc] { background: var(--color-surface-raised); }

.ai-usage-gd[b-mzwy9eptqc] {
    padding: 0.625rem 1rem;
    color: var(--color-text);
    vertical-align: middle;
}

.ai-usage-gd--num[b-mzwy9eptqc] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ai-usage-gd--period[b-mzwy9eptqc] {
    font-weight: 600;
    white-space: nowrap;
}

.ai-usage-gd--total[b-mzwy9eptqc] { font-weight: 600; }

.ai-usage-gd--cost[b-mzwy9eptqc] {
    color: var(--color-brand-teal);
    font-weight: 600;
}

.ai-usage-gd--time[b-mzwy9eptqc] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.ai-usage-gd--session[b-mzwy9eptqc] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    letter-spacing: 0.03em;
}

.ai-usage-gd--model[b-mzwy9eptqc] {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.ai-usage-gd--desc[b-mzwy9eptqc] {
    color: var(--color-text-muted);
}

/* ── Pager ──────────────────────────────────────────────────────────────── */
.ai-usage-pager[b-mzwy9eptqc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.75rem 0;
    margin-top: 0.5rem;
}

.ai-usage-pager-btn[b-mzwy9eptqc] {
    padding: 0.35rem 0.875rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.15s;
}

.ai-usage-pager-btn:hover:not(:disabled)[b-mzwy9eptqc] {
    border-color: var(--color-brand-teal);
}

.ai-usage-pager-btn:disabled[b-mzwy9eptqc] {
    opacity: 0.4;
    cursor: default;
}

.ai-usage-pager-info[b-mzwy9eptqc] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
/* /Components/Pages/Audit.razor.rz.scp.css */
/* ─── Empty state ─────────────────────────────────────────────── */

.audit-empty[b-jpu1uf3e1c] {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    margin-top: 1.5rem;
}

/* ─── Section / table ────────────────────────────────────────── */

.audit-section[b-jpu1uf3e1c] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-top: 1rem;
}

.audit-table[b-jpu1uf3e1c] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.audit-th[b-jpu1uf3e1c] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    padding: 0.625rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    white-space: nowrap;
}

.audit-row:not(:last-child)[b-jpu1uf3e1c] {
    border-bottom: 1px solid var(--color-border);
}

.audit-td[b-jpu1uf3e1c] {
    padding: 0.75rem 1rem;
    color: var(--color-text-primary);
    vertical-align: top;
}

.audit-td--time[b-jpu1uf3e1c] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.audit-td--actor[b-jpu1uf3e1c] {
    white-space: nowrap;
    font-weight: 500;
}

.audit-td--target[b-jpu1uf3e1c] {
    font-weight: 500;
    white-space: nowrap;
}

.audit-td--summary[b-jpu1uf3e1c] {
    color: var(--color-text-secondary);
}

/* ─── Action badges ──────────────────────────────────────────── */

.audit-badge[b-jpu1uf3e1c] {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.audit-badge--created[b-jpu1uf3e1c] {
    background: #d1fae5;
    color: #065f46;
}

.audit-badge--updated[b-jpu1uf3e1c] {
    background: #dbeafe;
    color: #1e40af;
}

.audit-badge--removed[b-jpu1uf3e1c] {
    background: #fee2e2;
    color: #991b1b;
}

.audit-badge--settings[b-jpu1uf3e1c] {
    background: #ede9fe;
    color: #5b21b6;
}

.audit-badge--restored[b-jpu1uf3e1c] {
    background: #fff7ed;
    color: #9a3412;
}
/* /Components/Pages/AuditTickets.razor.rz.scp.css */
/* ── Paste box ─────────────────────────────────────────────────────────── */
.ta-input-block[b-ue6syq0q96] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.ta-input[b-ue6syq0q96] {
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-surface);
    resize: vertical;
}

.ta-input:focus[b-ue6syq0q96] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-teal) 20%, transparent);
}

.ta-input-actions[b-ue6syq0q96] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ta-parsed-count[b-ue6syq0q96] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* ── Progress ──────────────────────────────────────────────────────────── */
.ta-progress[b-ue6syq0q96] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 32rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.ta-progress-step[b-ue6syq0q96] {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.84rem;
    color: var(--color-text);
}

.ta-progress-bar[b-ue6syq0q96] {
    height: 0.4rem;
    background: var(--color-border);
    border-radius: 999px;
    overflow: hidden;
}

.ta-progress-fill[b-ue6syq0q96] {
    height: 100%;
    background: var(--color-brand-teal);
    transition: width 0.2s;
}

/* ── Summary cards ─────────────────────────────────────────────────────── */
.ta-cards[b-ue6syq0q96] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.ta-card[b-ue6syq0q96] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.9rem 1.25rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    min-width: 8rem;
    flex: 1;
}

.ta-card--alert[b-ue6syq0q96] {
    border-left: 3px solid var(--color-down);
}

.ta-card-value[b-ue6syq0q96] {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
}

.ta-card-sub[b-ue6syq0q96] {
    font-size: 1rem;
    color: var(--color-text-muted);
    font-weight: 400;
}

.ta-card-label[b-ue6syq0q96] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.ta-cluster-note[b-ue6syq0q96] {
    font-family: var(--font-body);
    font-size: 0.84rem;
    color: var(--color-degraded);
    margin: 0 0 1.25rem 0;
}

/* ── Sections ──────────────────────────────────────────────────────────── */
.ta-section[b-ue6syq0q96] {
    margin-bottom: 1.75rem;
}

.ta-section-title[b-ue6syq0q96] {
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.75rem 0;
}

.ta-table-head[b-ue6syq0q96] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.ta-table-head .ta-section-title[b-ue6syq0q96] { margin: 0; }

/* ── Exceptions list ───────────────────────────────────────────────────── */
.ta-flag-list[b-ue6syq0q96] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ta-flag-item[b-ue6syq0q96] {
    display: grid;
    grid-template-columns: 9rem 1fr auto;
    grid-template-areas: "id subject badges" "detail detail detail";
    gap: 0.25rem 0.75rem;
    align-items: center;
    padding: 0.6rem 0.85rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-down);
    border-radius: 8px;
}

.ta-flag-id[b-ue6syq0q96] { grid-area: id; font-variant-numeric: tabular-nums; font-size: 0.8125rem; }
.ta-flag-subject[b-ue6syq0q96] {
    grid-area: subject;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ta-flag-reasons[b-ue6syq0q96] { grid-area: badges; display: flex; gap: 0.3rem; flex-wrap: wrap; }
.ta-flag-detail[b-ue6syq0q96] {
    grid-area: detail;
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* ── Flag badges ───────────────────────────────────────────────────────── */
.ta-flag-badge[b-ue6syq0q96] {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
    margin-right: 0.2rem;
}

.ta-flag-badge--missing[b-ue6syq0q96]  { background: var(--color-unknown); }
.ta-flag-badge--mismatch[b-ue6syq0q96] { background: var(--color-down); }
.ta-flag-badge--nowork[b-ue6syq0q96]   { background: var(--color-degraded); }
.ta-flag-badge--other[b-ue6syq0q96]    { background: var(--color-brand); }
.ta-flag-badge--timing[b-ue6syq0q96]   { background: var(--color-brand-teal); }

/* ── Charts ────────────────────────────────────────────────────────────── */
.ta-charts[b-ue6syq0q96] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.25rem;
}

.ta-chart[b-ue6syq0q96] {
    padding: 0.85rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.ta-chart--wide[b-ue6syq0q96] { grid-column: 1 / -1; }

.ta-chart-title[b-ue6syq0q96] {
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.6rem 0;
}

.ta-bar-row[b-ue6syq0q96] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.ta-bar-label[b-ue6syq0q96] {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--color-text);
    width: 6.5rem;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ta-bar-label--narrow[b-ue6syq0q96] { width: 1.25rem; text-align: center; }

.ta-bar-track[b-ue6syq0q96] {
    flex: 1;
    height: 0.7rem;
    background: var(--color-border);
    border-radius: 999px;
    overflow: hidden;
}

.ta-bar-fill[b-ue6syq0q96] {
    height: 100%;
    background: var(--color-brand-teal);
    border-radius: 999px;
}

.ta-bar-count[b-ue6syq0q96] {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    width: 1.75rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Day analysis ──────────────────────────────────────────────────────── */
.ta-day-stats[b-ue6syq0q96] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.ta-day-stat[b-ue6syq0q96] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.ta-day-val[b-ue6syq0q96] {
    font-family: var(--font-title);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.ta-day-lbl[b-ue6syq0q96] {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.ta-day-sub[b-ue6syq0q96] {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: -0.5rem 0 1rem 0;
}

/* ── Work sessions ─────────────────────────────────────────────────────── */
.ta-session[b-ue6syq0q96] {
    margin-bottom: 1rem;
}

.ta-session-head[b-ue6syq0q96] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.ta-session-time[b-ue6syq0q96] {
    font-family: var(--font-subtitle);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.ta-session-dur[b-ue6syq0q96] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.ta-session-count[b-ue6syq0q96] {
    margin-left: auto;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-brand);
}

.ta-heat[b-ue6syq0q96] {
    display: flex;
    gap: 2px;
    height: 2rem;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
}

.ta-heat-cell[b-ue6syq0q96] {
    flex: 1 1 0;
    min-width: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-brand);
    cursor: default;
}

.ta-heat-cell--has[b-ue6syq0q96] {
    color: var(--color-brand);
}

.ta-heat-axis[b-ue6syq0q96] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-top: 0.3rem;
    font-variant-numeric: tabular-nums;
    gap: 1rem;
}

.ta-heat-axis span:nth-child(2)[b-ue6syq0q96] { font-variant-numeric: normal; }

/* ── Hour heatmap ──────────────────────────────────────────────────────── */
.ta-heatmap-row[b-ue6syq0q96] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 3px;
}

.ta-heatmap-label[b-ue6syq0q96] {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--color-text-muted);
    width: 3.25rem;
    text-align: right;
    flex-shrink: 0;
}

.ta-heatmap[b-ue6syq0q96] {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 2px;
    flex: 1;
}

.ta-heatmap-cell[b-ue6syq0q96] {
    height: 0.9rem;
    border-radius: 2px;
    cursor: default;
}

.ta-heatmap-cell--opened[b-ue6syq0q96] { background: var(--color-brand); }
.ta-heatmap-cell--closed[b-ue6syq0q96] { background: var(--color-healthy); }

.ta-heatmap-legend[b-ue6syq0q96] {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body);
    font-size: 0.65rem;
    color: var(--color-text-muted);
    padding-left: 3.625rem;
    padding-top: 2px;
}

/* ── Table ─────────────────────────────────────────────────────────────── */
.ta-table-wrap[b-ue6syq0q96] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow-x: auto;
}

.ta-table[b-ue6syq0q96] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 0.82rem;
}

.ta-th[b-ue6syq0q96] {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    padding: 0.55rem 0.75rem;
    text-align: left;
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
    background: var(--color-surface-raised);
}

.ta-th--num[b-ue6syq0q96] { text-align: right; }

.ta-tr[b-ue6syq0q96] { border-bottom: 1px solid var(--color-border); }
.ta-tr:last-child[b-ue6syq0q96] { border-bottom: none; }
.ta-tr:hover[b-ue6syq0q96] { background: color-mix(in srgb, var(--color-brand) 3%, transparent); }
.ta-tr--flagged[b-ue6syq0q96] { background: color-mix(in srgb, var(--color-down) 5%, transparent); }
.ta-tr--flagged:hover[b-ue6syq0q96] { background: color-mix(in srgb, var(--color-down) 9%, transparent); }

.ta-td[b-ue6syq0q96] {
    padding: 0.5rem 0.75rem;
    color: var(--color-text);
    vertical-align: middle;
    white-space: nowrap;
}

.ta-td--num[b-ue6syq0q96] { text-align: right; font-variant-numeric: tabular-nums; }
.ta-td--id[b-ue6syq0q96] { font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--color-text-muted); }
.ta-td--time[b-ue6syq0q96] { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.ta-td--subject[b-ue6syq0q96] {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ta-td--agents[b-ue6syq0q96] {
    white-space: normal;
    max-width: 11rem;
    font-weight: 600;
    color: var(--color-brand);
}

/* ── Status badges ─────────────────────────────────────────────────────── */
.ta-status[b-ue6syq0q96] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.ta-status--closed[b-ue6syq0q96]  { background: color-mix(in srgb, var(--color-healthy) 18%, transparent); color: var(--color-healthy); }
.ta-status--open[b-ue6syq0q96]    { background: color-mix(in srgb, var(--color-degraded) 18%, transparent); color: var(--color-degraded); }
.ta-status--missing[b-ue6syq0q96] { background: color-mix(in srgb, var(--color-unknown) 20%, transparent); color: var(--color-text-muted); }

/* ── Links & empty ─────────────────────────────────────────────────────── */
.ta-link[b-ue6syq0q96] { color: var(--color-brand-teal); text-decoration: none; }
.ta-link:hover[b-ue6syq0q96] { color: var(--color-brand); text-decoration: underline; }

.ta-empty[b-ue6syq0q96] {
    font-family: var(--font-body);
    font-size: 0.84rem;
    color: var(--color-text-muted);
    padding: 0.5rem 0;
    margin: 0;
}

.ta-empty--good[b-ue6syq0q96] { color: var(--color-healthy); }
/* /Components/Pages/AutoReplySettings.razor.rz.scp.css */
.canned-editor[b-clsryi9rkv] {
    background: #ffffff;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-card);
}

.canned-editor-actions[b-clsryi9rkv] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.form-field--inline[b-clsryi9rkv] {
    margin-bottom: 1.25rem;
}

.form-toggle[b-clsryi9rkv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
}

.form-toggle input[type="checkbox"][b-clsryi9rkv] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-brand-teal);
    cursor: pointer;
}
/* /Components/Pages/AwsSettingsEdit.razor.rz.scp.css */
/* Global form styles (form-section, form-grid, form-field, form-input, etc.)
   are defined in wwwroot/app.css — no duplication needed here. */

/* ─── Section note banner ─────────────────────────────────────── */

.aws-section-note[b-hsy8oj4t1j] {
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.aws-section-note code[b-hsy8oj4t1j] {
    font-size: 0.75rem;
    background: var(--color-surface);
    padding: 0.1rem 0.3rem;
    border-radius: 0.2rem;
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

.aws-section-note--warn[b-hsy8oj4t1j] {
    background: #fffbeb;
    color: #78350f;
    border-color: #fde68a;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.aws-note-icon[b-hsy8oj4t1j] {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #b45309;
}

/* ─── Storage mode toggle ─────────────────────────────────────── */

.aws-storage-toggle[b-hsy8oj4t1j] {
    border: none;
    padding: 0;
    margin: 0;
}

.aws-storage-options[b-hsy8oj4t1j] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.aws-storage-option[b-hsy8oj4t1j] {
    flex: 1 1 16rem;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
    background: var(--color-surface);
}

.aws-storage-option:hover[b-hsy8oj4t1j] {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

.aws-storage-option--selected[b-hsy8oj4t1j] {
    border-color: var(--color-brand);
    background: #f0f6ff;
}

.aws-storage-radio[b-hsy8oj4t1j] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.aws-storage-option-icon[b-hsy8oj4t1j] {
    color: var(--color-text-secondary);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.aws-storage-option--selected .aws-storage-option-icon[b-hsy8oj4t1j] {
    color: var(--color-brand);
}

.aws-storage-option-body[b-hsy8oj4t1j] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.aws-storage-option-title[b-hsy8oj4t1j] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.aws-storage-option--selected .aws-storage-option-title[b-hsy8oj4t1j] {
    color: var(--color-brand);
}

.aws-storage-option-desc[b-hsy8oj4t1j] {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.aws-storage-option-desc code[b-hsy8oj4t1j] {
    font-size: 0.75rem;
    background: var(--color-surface-raised);
    padding: 0.05rem 0.25rem;
    border-radius: 0.2rem;
    border: 1px solid var(--color-border);
}

/* ─── Connection test controls ────────────────────────────────── */

.aws-test-row[b-hsy8oj4t1j] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.aws-test-btn[b-hsy8oj4t1j] {
    white-space: nowrap;
    flex-shrink: 0;
}

.aws-test-email-input[b-hsy8oj4t1j] {
    flex: 1 1 14rem;
    min-width: 0;
}

.aws-test-result[b-hsy8oj4t1j] {
    font-size: 0.8125rem;
    line-height: 1.4;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius);
    flex: 1 1 auto;
}

.aws-test-result--ok[b-hsy8oj4t1j] {
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.aws-test-result--fail[b-hsy8oj4t1j] {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.aws-ses-test-area[b-hsy8oj4t1j] {
    padding: 0 1.25rem 1rem;
    border-top: 1px solid var(--color-border);
    margin-top: 0.25rem;
    padding-top: 1rem;
}

.aws-ses-test-field[b-hsy8oj4t1j] {
    max-width: 36rem;
}
/* /Components/Pages/BookmarkEdit.razor.rz.scp.css */
/* Form styles (form-section, form-grid, form-field, form-input, etc.)
   are defined globally in wwwroot/app.css so all form pages share them. */

/* ─── Tag picker ──────────────────────────────────────────────── */

.tag-picker-content[b-bcfcc8b1nn] {
    padding: 1rem 1.25rem;
}

.tag-picker-group[b-bcfcc8b1nn] {
    margin-bottom: 0.875rem;
}

.tag-picker-group:last-child[b-bcfcc8b1nn] {
    margin-bottom: 0;
}

.tag-picker-type-label[b-bcfcc8b1nn] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.375rem;
}

.tag-picker-chips[b-bcfcc8b1nn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.tag-chip[b-bcfcc8b1nn] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    cursor: pointer;
    transition: opacity 0.1s, transform 0.1s;
    font-family: var(--font-body);
}

.tag-chip:hover[b-bcfcc8b1nn] {
    opacity: 0.8;
}

.tag-chip--selected[b-bcfcc8b1nn] {
    color: inherit;
    font-weight: 600;
}

/* ─── Favicon preview ─────────────────────────────────────────── */

.bm-favicon-preview-wrap[b-bcfcc8b1nn] {
    justify-content: flex-start;
}

.bm-favicon-preview[b-bcfcc8b1nn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    min-height: 52px;
}

.bm-favicon-preview-img[b-bcfcc8b1nn] {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

.bm-favicon-preview-fallback[b-bcfcc8b1nn] {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: var(--color-brand);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: var(--font-title);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
    letter-spacing: 0.03em;
}

.bm-favicon-preview-label[b-bcfcc8b1nn] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}
/* /Components/Pages/Bookmarks.razor.rz.scp.css */
/* ─── Filter bar ─────────────────────────────────────────────── */

.bookmarks-filter-bar[b-lusub3debd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.bookmarks-filter-search[b-lusub3debd] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-primary);
    width: 220px;
    transition: border-color 0.15s;
}

.bookmarks-filter-search:focus[b-lusub3debd] {
    outline: none;
    border-color: var(--color-brand-teal);
}

.bookmarks-filter-select[b-lusub3debd] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    padding: 0.4rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: border-color 0.15s;
}

.bookmarks-filter-select:focus[b-lusub3debd] {
    outline: none;
    border-color: var(--color-brand-teal);
}

.bookmarks-filter-clear[b-lusub3debd] {
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
}

.bookmarks-filter-count[b-lusub3debd] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin-left: auto;
}

/* ─── Category section ───────────────────────────────────────── */

.bookmarks-category-section[b-lusub3debd] {
    margin-bottom: 2.5rem;
}

.bookmarks-category-title[b-lusub3debd] {
    font-family: var(--font-title);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.875rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-brand);
}

.bookmarks-group-title[b-lusub3debd] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin: 1rem 0 0.5rem;
}

/* ─── Card grid ──────────────────────────────────────────────── */

.bookmarks-card-grid[b-lusub3debd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
/* /Components/Pages/BookmarksManage.razor.rz.scp.css */
/* ─── Manage table ───────────────────────────────────────────── */

.bm-manage-table[b-3t79llll1c] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.bm-manage-table th[b-3t79llll1c] {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}

.bm-manage-table td[b-3t79llll1c] {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.bm-manage-table tbody tr:hover td[b-3t79llll1c] {
    background: var(--color-surface-raised);
}

.bm-row--disabled td[b-3t79llll1c] {
    opacity: 0.55;
}

/* ─── Column widths ──────────────────────────────────────────── */

.bm-col-icon[b-3t79llll1c] { width: 36px; }
.bm-col-title[b-3t79llll1c] { min-width: 200px; }
.bm-col-category[b-3t79llll1c] { width: 160px; white-space: nowrap; }
.bm-col-group[b-3t79llll1c] { width: 140px; color: var(--color-text-secondary); }
.bm-col-tags[b-3t79llll1c] { width: 80px; }
.bm-col-enabled[b-3t79llll1c] { width: 72px; }
.bm-col-actions[b-3t79llll1c] { width: 120px; white-space: nowrap; display: flex; gap: 0.375rem; align-items: center; }

/* ─── Cell content ───────────────────────────────────────────── */

.bm-table-favicon[b-3t79llll1c] {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    object-fit: contain;
    display: block;
}

.bm-table-favicon-fallback[b-3t79llll1c] {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background: var(--color-brand);
    color: #fff;
    font-size: 0.5rem;
    font-weight: 700;
    font-family: var(--font-title);
    align-items: center;
    justify-content: center;
    user-select: none;
}

.bm-table-title[b-3t79llll1c] {
    display: block;
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
    font-family: var(--font-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

.bm-table-title:hover[b-3t79llll1c] {
    text-decoration: underline;
    color: var(--color-brand);
}

.bm-table-desc[b-3t79llll1c] {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
    margin-top: 0.125rem;
}

.bm-table-tag-count[b-3t79llll1c] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.bm-enabled-yes[b-3t79llll1c] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-healthy);
}

.bm-enabled-no[b-3t79llll1c] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* ─── Action buttons ─────────────────────────────────────────── */

.btn-table-edit[b-3t79llll1c] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    text-decoration: none;
    text-align: center;
    transition: color 0.1s, border-color 0.1s, background 0.1s;
    cursor: pointer;
    background: none;
    font-family: var(--font-body);
}

.btn-table-edit:hover[b-3t79llll1c] {
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    text-decoration: none;
}

.btn-table-remove[b-3t79llll1c] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #dc2626;
    border: 1px solid #fca5a5;
    border-radius: 0.25rem;
    background: none;
    cursor: pointer;
    font-family: var(--font-body);
    text-align: center;
    transition: background 0.1s, color 0.1s;
}

.btn-table-remove:hover:not(:disabled)[b-3t79llll1c] {
    background: #fff5f5;
}

.btn-table-remove:disabled[b-3t79llll1c] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─── Remove confirmation overlay ────────────────────────────── */

.remove-confirm-overlay[b-3t79llll1c] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
}

.remove-confirm-dialog[b-3t79llll1c] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    max-width: 26rem;
    width: calc(100% - 2rem);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.remove-confirm-title[b-3t79llll1c] {
    display: block;
    font-size: 1rem;
    font-family: var(--font-title);
    margin-bottom: 0.625rem;
    color: var(--color-text-primary);
}

.remove-confirm-text[b-3t79llll1c] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.remove-confirm-actions[b-3t79llll1c] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
/* /Components/Pages/CannedReplies.razor.rz.scp.css */
.canned-editor[b-ypdjtkaqte] {
    background: #ffffff;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-card);
}

.canned-editor-title[b-ypdjtkaqte] {
    font-family: var(--font-title);
    font-size: 1.125rem;
    margin: 0 0 0.75rem;
    color: var(--color-text-primary);
}

.canned-editor-actions[b-ypdjtkaqte] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.canned-table[b-ypdjtkaqte] {
    width: 100%;
    margin-top: 0.5rem;
}

.canned-actions-col[b-ypdjtkaqte] {
    white-space: nowrap;
    text-align: right;
    width: 1%;
}

.canned-actions-col .btn-sm[b-ypdjtkaqte] {
    margin-left: 0.25rem;
}
/* /Components/Pages/ClientDashboard.razor.rz.scp.css */
/* ─── Client hero ────────────────────────────────────────────── */
.client-hero[b-jim2a2vuta] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-card);
}

.client-hero-logo-wrap[b-jim2a2vuta] {
    flex-shrink: 0;
}

.client-hero-logo[b-jim2a2vuta] {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: contain;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    padding: 0.25rem;
}

.client-hero-initials[b-jim2a2vuta] {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    font-family: var(--font-title);
    letter-spacing: 0.03em;
}

.client-hero-info[b-jim2a2vuta] {
    flex: 1 1 auto;
    min-width: 0;
}

.client-hero-name-row[b-jim2a2vuta] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin-bottom: 0.375rem;
}

.client-hero-name[b-jim2a2vuta] {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.client-hero-website[b-jim2a2vuta] {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-secondary);
    transition: color 0.1s;
    text-decoration: none;
}

.client-hero-website:hover[b-jim2a2vuta] {
    color: var(--color-brand-teal);
}

.client-hero-edit[b-jim2a2vuta] {
    font-size: 0.8125rem;
    padding: 0.25rem 0.75rem;
}

.client-hero-desc[b-jim2a2vuta] {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0 0 0.875rem;
    line-height: 1.5;
}

.client-hero-summary[b-jim2a2vuta] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.summary-pill[b-jim2a2vuta] {
    display: inline-block;
    padding: 0.2rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}

.summary-pill--total[b-jim2a2vuta] {
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.summary-pill--healthy[b-jim2a2vuta] {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #86efac;
}

.summary-pill--degraded[b-jim2a2vuta] {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.summary-pill--down[b-jim2a2vuta] {
    background: #fff5f5;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.client-hero-overall[b-jim2a2vuta] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* ─── Group sections ─────────────────────────────────────────── */
.group-section[b-jim2a2vuta] {
    margin-bottom: 1.5rem;
}

.group-title[b-jim2a2vuta] {
    font-family: var(--font-title);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-secondary);
    margin: 0 0 0.5rem;
}

.group-sites[b-jim2a2vuta] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* ─── Site rows ──────────────────────────────────────────────── */
.site-row[b-jim2a2vuta] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    transition: background 0.1s;
}

.site-row:last-child[b-jim2a2vuta] {
    border-bottom: none;
}

.site-row:hover[b-jim2a2vuta] {
    background: var(--color-surface-raised);
}

.site-row-name[b-jim2a2vuta] {
    flex: 1 1 auto;
    min-width: 0;
}

.site-row-link[b-jim2a2vuta] {
    display: block;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-row-link:hover[b-jim2a2vuta] {
    text-decoration: underline;
}

.site-row-desc[b-jim2a2vuta] {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin-top: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-row-meta[b-jim2a2vuta] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}

.site-row-ms[b-jim2a2vuta] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.site-row-checked[b-jim2a2vuta] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    min-width: 5rem;
    text-align: right;
}

.site-row-status[b-jim2a2vuta] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.region-code[b-jim2a2vuta] {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ─── Launch button ──────────────────────────────────────────── */
.launch-btn[b-jim2a2vuta] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 0.25rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.1s, background 0.1s;
}

.launch-btn:hover[b-jim2a2vuta] {
    color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

/* ─── Empty state ────────────────────────────────────────────── */
.empty-state[b-jim2a2vuta] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2.5rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* /Components/Pages/ClientEdit.razor.rz.scp.css */
/* ─── Logo upload area ───────────────────────────────────────── */
.logo-upload-row[b-xgl4064k7j] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
}

/* Hidden native file input — triggered via label */
.logo-file-hidden[b-xgl4064k7j] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    pointer-events: none;
}

/* Drop/click target shown when no logo yet */
.logo-drop-area[b-xgl4064k7j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 10rem;
    height: 7rem;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    text-align: center;
    padding: 1rem;
}

.logo-drop-area:hover[b-xgl4064k7j] {
    border-color: var(--color-brand-teal);
    background: #f0fbff;
    color: var(--color-brand-teal);
}

.logo-drop-text[b-xgl4064k7j] {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
}

.logo-drop-hint[b-xgl4064k7j] {
    font-size: 0.6875rem;
    opacity: 0.75;
    line-height: 1.3;
}

/* Current logo preview */
.logo-preview[b-xgl4064k7j] {
    width: 6rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    padding: 0.5rem;
    flex-shrink: 0;
}

.logo-preview img[b-xgl4064k7j] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.logo-upload-actions[b-xgl4064k7j] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* "Replace image" styled as secondary button but is a <label> */
.logo-upload-btn[b-xgl4064k7j] {
    cursor: pointer;
    text-align: center;
}

.btn-table-remove[b-xgl4064k7j] {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #dc2626;
    border: 1px solid #fca5a5;
    border-radius: var(--radius);
    background: none;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background 0.1s;
    white-space: nowrap;
}

.btn-table-remove:hover[b-xgl4064k7j] {
    background: #fff5f5;
}

/* ─── Email domains section ───────────────────────────────── */

.domain-list[b-xgl4064k7j] {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.domain-list-item[b-xgl4064k7j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-body);
    font-size: 0.875rem;
}

.domain-list-item:first-child[b-xgl4064k7j] {
    border-top: 1px solid var(--color-border);
}

/* ─── Associated sites section ─────────────────────────────── */

.form-section-hint[b-xgl4064k7j] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin: -0.25rem 0 0.75rem;
}

.sites-empty[b-xgl4064k7j] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0 0 1rem;
}

.sites-table[b-xgl4064k7j] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.sites-table th[b-xgl4064k7j] {
    text-align: left;
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-secondary);
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--color-border);
}

.sites-table td[b-xgl4064k7j] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.sites-table a[b-xgl4064k7j] {
    color: var(--color-brand);
    text-decoration: none;
    font-weight: 500;
}

.sites-table a:hover[b-xgl4064k7j] {
    text-decoration: underline;
}

.sites-table-action[b-xgl4064k7j] {
    text-align: right;
    white-space: nowrap;
}

.sites-add-row[b-xgl4064k7j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 28rem;
}

.sites-add-select[b-xgl4064k7j] {
    flex: 1;
    min-width: 0;
}
/* /Components/Pages/Clients.razor.rz.scp.css */
.clients-grid[b-96kc80j0ut] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: 1rem;
}

/* ─── Client card ────────────────────────────────────────────── */
.client-card[b-96kc80j0ut] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow-card);
}

.client-card-logo-wrap[b-96kc80j0ut] {
    flex-shrink: 0;
}

.client-card-logo[b-96kc80j0ut] {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    border-radius: 0.375rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.client-card-initials[b-96kc80j0ut] {
    width: 3rem;
    height: 3rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
    font-family: var(--font-title);
}

.client-card-body[b-96kc80j0ut] {
    flex: 1 1 auto;
    min-width: 0;
}

.client-card-name[b-96kc80j0ut] {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    text-decoration: none;
    font-family: var(--font-title);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-card-name:hover[b-96kc80j0ut] {
    text-decoration: underline;
}

.client-card-desc[b-96kc80j0ut] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin: 0 0 0.375rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.client-card-sites[b-96kc80j0ut] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.client-card-actions[b-96kc80j0ut] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex-shrink: 0;
}

.btn-table-edit[b-96kc80j0ut] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    text-decoration: none;
    text-align: center;
    transition: color 0.1s, border-color 0.1s, background 0.1s;
    cursor: pointer;
    background: none;
    font-family: var(--font-body);
}

.btn-table-edit:hover[b-96kc80j0ut] {
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    text-decoration: none;
}

.btn-table-remove[b-96kc80j0ut] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #dc2626;
    border: 1px solid #fca5a5;
    border-radius: 0.25rem;
    background: none;
    cursor: pointer;
    font-family: var(--font-body);
    text-align: center;
    transition: background 0.1s, color 0.1s;
}

.btn-table-remove:hover:not(:disabled)[b-96kc80j0ut] {
    background: #fff5f5;
}

.btn-table-remove:disabled[b-96kc80j0ut] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─── Remove confirmation overlay ────────────────────────────── */
.remove-confirm-overlay[b-96kc80j0ut] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
}

.remove-confirm-dialog[b-96kc80j0ut] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    max-width: 26rem;
    width: calc(100% - 2rem);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.remove-confirm-title[b-96kc80j0ut] {
    display: block;
    font-size: 1rem;
    font-family: var(--font-title);
    margin-bottom: 0.625rem;
    color: var(--color-text-primary);
}

.remove-confirm-text[b-96kc80j0ut] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.remove-confirm-actions[b-96kc80j0ut] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.empty-state[b-96kc80j0ut] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2.5rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
}
/* /Components/Pages/ConfigRestore.razor.rz.scp.css */
/* ─── Restore success banner ─────────────────────────────────── */
.restore-success[b-havs9ayfwj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: var(--radius);
    color: #166534;
    font-size: 0.9375rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
}

/* ─── Restore confirmation panel ─────────────────────────────── */
.restore-confirm[b-havs9ayfwj] {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.restore-confirm-body[b-havs9ayfwj] {
    flex: 1 1 auto;
}

.restore-confirm-title[b-havs9ayfwj] {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #78350f;
    margin-bottom: 0.4rem;
}

.restore-confirm-text[b-havs9ayfwj] {
    font-size: 0.875rem;
    color: #92400e;
    margin: 0;
    max-width: 560px;
}

.restore-confirm-actions[b-havs9ayfwj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ─── Loading / empty states ─────────────────────────────────── */
.restore-loading[b-havs9ayfwj],
.restore-empty[b-havs9ayfwj] {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 2rem 0;
}

/* ─── Backup table ───────────────────────────────────────────── */
.restore-section[b-havs9ayfwj] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-top: 1.5rem;
}

.restore-table[b-havs9ayfwj] {
    width: 100%;
    border-collapse: collapse;
}

.restore-th[b-havs9ayfwj] {
    padding: 0.625rem 1.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    white-space: nowrap;
}

.restore-th--action[b-havs9ayfwj] {
    width: 7rem;
}

.restore-row[b-havs9ayfwj] {
    border-bottom: 1px solid var(--color-border);
}

.restore-row:last-child[b-havs9ayfwj] {
    border-bottom: none;
}

.restore-row--selected[b-havs9ayfwj] {
    background: #fffbeb;
}

.restore-td[b-havs9ayfwj] {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    vertical-align: middle;
}

.restore-td--time[b-havs9ayfwj] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.restore-td--age[b-havs9ayfwj] {
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.restore-td--size[b-havs9ayfwj] {
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.restore-td--action[b-havs9ayfwj] {
    text-align: right;
}

.restore-btn[b-havs9ayfwj] {
    font-size: 0.8125rem;
    padding: 0.3rem 0.75rem;
}
/* /Components/Pages/Configuration.razor.rz.scp.css */
.config-grid[b-96ndt8ouoc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.config-card[b-96ndt8ouoc] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.config-card:hover[b-96ndt8ouoc] {
    border-color: var(--color-brand-teal);
    box-shadow: 0 4px 12px rgba(7, 70, 132, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
    text-decoration: none;
    color: inherit;
}

.config-card-icon[b-96ndt8ouoc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-brand-teal) 10%, var(--color-surface));
    color: var(--color-brand-teal);
    flex-shrink: 0;
}

.config-card-body[b-96ndt8ouoc] {
    min-width: 0;
}

.config-card-title[b-96ndt8ouoc] {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.25rem;
    letter-spacing: -0.01em;
}

.config-card-desc[b-96ndt8ouoc] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
    margin: 0;
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* ─── KPI strip ──────────────────────────────────────────────── */

.dash-kpi-grid[b-ogq266r8ne] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1100px) {
    .dash-kpi-grid[b-ogq266r8ne] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .dash-kpi-grid[b-ogq266r8ne] { grid-template-columns: 1fr; }
}

.dash-kpi[b-ogq266r8ne] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.125rem 1.25rem 1rem;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.15s, transform 0.15s;
}

.dash-kpi:hover[b-ogq266r8ne] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.dash-kpi[b-ogq266r8ne]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-border);
}

.dash-kpi--tickets[b-ogq266r8ne]::before     { background: var(--color-brand); }
.dash-kpi--priority[b-ogq266r8ne]::before    { background: var(--color-degraded); }
.dash-kpi--status[b-ogq266r8ne]::before      { background: var(--color-healthy); }
.dash-kpi--status-degraded[b-ogq266r8ne]::before { background: var(--color-degraded); }
.dash-kpi--status-down[b-ogq266r8ne]::before     { background: var(--color-down); }
.dash-kpi--status-unknown[b-ogq266r8ne]::before  { background: var(--color-unknown); }
.dash-kpi--incidents[b-ogq266r8ne]::before   { background: var(--color-brand-teal); }

.dash-kpi-header[b-ogq266r8ne] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dash-kpi-icon[b-ogq266r8ne] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

.dash-kpi--tickets   .dash-kpi-icon[b-ogq266r8ne] { color: var(--color-brand); }
.dash-kpi--priority  .dash-kpi-icon[b-ogq266r8ne] { color: var(--color-degraded); }
.dash-kpi--status    .dash-kpi-icon[b-ogq266r8ne] { color: var(--color-healthy); }
.dash-kpi--status-degraded .dash-kpi-icon[b-ogq266r8ne] { color: var(--color-degraded); }
.dash-kpi--status-down     .dash-kpi-icon[b-ogq266r8ne] { color: var(--color-down); }
.dash-kpi--status-unknown  .dash-kpi-icon[b-ogq266r8ne] { color: var(--color-unknown); }
.dash-kpi--incidents .dash-kpi-icon[b-ogq266r8ne] { color: var(--color-brand-teal); }

.dash-kpi-label[b-ogq266r8ne] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: var(--font-subtitle);
}

.dash-kpi-value[b-ogq266r8ne] {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-title);
    letter-spacing: -0.03em;
}

.dash-kpi-value--loading[b-ogq266r8ne] {
    color: var(--color-text-secondary);
}

.dash-kpi-value-suffix[b-ogq266r8ne] {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-left: 0.125rem;
}

.dash-kpi-sub[b-ogq266r8ne] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
}

/* ─── Two-column grid ────────────────────────────────────────── */

.dash-grid[b-ogq266r8ne] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .dash-grid[b-ogq266r8ne] { grid-template-columns: 1fr; }
}

.dash-aside[b-ogq266r8ne] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ─── Panel base ─────────────────────────────────────────────── */

.dash-panel[b-ogq266r8ne] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 1rem 1.125rem 0.875rem;
}

.dash-panel-header[b-ogq266r8ne] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.dash-panel-title[b-ogq266r8ne] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin: 0;
    font-family: var(--font-subtitle);
}

.dash-panel-viewall[b-ogq266r8ne] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-brand-teal);
    text-decoration: none;
    white-space: nowrap;
    font-family: var(--font-body);
}

.dash-panel-viewall:hover[b-ogq266r8ne] {
    text-decoration: underline;
}

.dash-panel-error[b-ogq266r8ne] {
    font-size: 0.8125rem;
    color: var(--color-down);
    padding: 0.5rem 0;
}

.dash-empty[b-ogq266r8ne] {
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
}

.dash-empty--inline[b-ogq266r8ne] {
    padding: 0.75rem 0;
    text-align: left;
}

/* ─── Ticket list (primary panel) ────────────────────────────── */

.dash-ticket-list[b-ogq266r8ne] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.dash-ticket-row[b-ogq266r8ne] {
    border-bottom: 1px solid var(--color-border);
}

.dash-ticket-row:last-child[b-ogq266r8ne] {
    border-bottom: none;
}

.dash-ticket-link[b-ogq266r8ne] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.625rem 0;
    text-decoration: none;
    color: inherit;
}

.dash-ticket-link:hover .dash-ticket-subject[b-ogq266r8ne] {
    color: var(--color-brand);
}

.dash-ticket-main[b-ogq266r8ne] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1 1 auto;
    min-width: 0;
}

.dash-ticket-subject[b-ogq266r8ne] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.1s;
    font-family: var(--font-body);
}

.dash-ticket-meta[b-ogq266r8ne] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.dash-ticket-customer[b-ogq266r8ne] {
    font-weight: 500;
}

.dash-ticket-sep[b-ogq266r8ne] {
    color: var(--color-border);
}

.dash-ticket-status[b-ogq266r8ne] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.05rem 0.4rem;
    border-radius: 0.25rem;
}

.dash-ticket-status--active[b-ogq266r8ne]   { background: rgba(14, 165, 198, 0.15); color: var(--color-brand-teal); }
.dash-ticket-status--waiting[b-ogq266r8ne]  { background: rgba(245, 158, 11, 0.15); color: #92400e; }
.dash-ticket-status--resolved[b-ogq266r8ne] { background: rgba(34, 197, 94, 0.15); color: #166534; }
.dash-ticket-status--closed[b-ogq266r8ne]   { background: var(--color-surface-raised); color: var(--color-text-secondary); }
.dash-ticket-status--default[b-ogq266r8ne]  { background: var(--color-surface-raised); color: var(--color-text-secondary); }

.dash-ticket-assignee[b-ogq266r8ne] {
    font-style: italic;
}

.dash-ticket-time[b-ogq266r8ne] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ─── Status panel ───────────────────────────────────────────── */

.dash-status-row[b-ogq266r8ne] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.dash-status-dot[b-ogq266r8ne] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--color-unknown);
}

.dash-status-dot--healthy[b-ogq266r8ne]  { background: var(--color-healthy); }
.dash-status-dot--degraded[b-ogq266r8ne] { background: var(--color-degraded); }
.dash-status-dot--down[b-ogq266r8ne]     { background: var(--color-down); }
.dash-status-dot--unknown[b-ogq266r8ne]  { background: var(--color-unknown); }

.dash-status-label[b-ogq266r8ne] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    font-family: var(--font-body);
}

.dash-status-label--healthy[b-ogq266r8ne]  { color: #166534; }
.dash-status-label--degraded[b-ogq266r8ne] { color: #92400e; }
.dash-status-label--down[b-ogq266r8ne]     { color: #991b1b; }
.dash-status-label--unknown[b-ogq266r8ne]  { color: var(--color-text-secondary); }

.dash-status-counts[b-ogq266r8ne] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.375rem;
    margin-bottom: 0.875rem;
}

.dash-status-count[b-ogq266r8ne] {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.4rem 0.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.dash-status-count-value[b-ogq266r8ne] {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-title);
}

.dash-status-count-label[b-ogq266r8ne] {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.dash-status-count--healthy  .dash-status-count-value[b-ogq266r8ne] { color: #166534; }
.dash-status-count--degraded .dash-status-count-value[b-ogq266r8ne] { color: #92400e; }
.dash-status-count--down     .dash-status-count-value[b-ogq266r8ne] { color: #991b1b; }
.dash-status-count--unknown  .dash-status-count-value[b-ogq266r8ne] { color: var(--color-text-secondary); }

/* ─── Attention list (status panel) ──────────────────────────── */

.dash-attention-list[b-ogq266r8ne] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
}

.dash-attention-row[b-ogq266r8ne] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-border);
    border-left: 2px solid transparent;
    padding-left: 0.5rem;
    margin-left: -0.5rem;
}

.dash-attention-row:last-child[b-ogq266r8ne] {
    border-bottom: none;
}

.dash-attention-row--down[b-ogq266r8ne]     { border-left-color: var(--color-down); }
.dash-attention-row--degraded[b-ogq266r8ne] { border-left-color: var(--color-degraded); }

.dash-attention-name[b-ogq266r8ne] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
}

.dash-attention-name:hover[b-ogq266r8ne] {
    color: var(--color-brand);
    text-decoration: underline;
}

.dash-attention-meta[b-ogq266r8ne] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* ─── Incident list (compact) ────────────────────────────────── */

.dash-incident-list[b-ogq266r8ne] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.dash-incident-row[b-ogq266r8ne] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-border);
    border-left: 2px solid transparent;
    padding-left: 0.5rem;
    margin-left: -0.5rem;
}

.dash-incident-row:last-child[b-ogq266r8ne] {
    border-bottom: none;
}

.dash-incident-row--down[b-ogq266r8ne]     { border-left-color: var(--color-down); }
.dash-incident-row--degraded[b-ogq266r8ne] { border-left-color: var(--color-degraded); }

.dash-incident-time[b-ogq266r8ne] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 5.5rem;
}

.dash-incident-site[b-ogq266r8ne] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-incident-site:hover[b-ogq266r8ne] {
    color: var(--color-brand);
    text-decoration: underline;
}

/* ─── Quick links strip ──────────────────────────────────────── */

.dash-quick[b-ogq266r8ne] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.625rem;
}

@media (max-width: 900px) {
    .dash-quick[b-ogq266r8ne] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .dash-quick[b-ogq266r8ne] { grid-template-columns: repeat(2, 1fr); }
}

.dash-quick-link[b-ogq266r8ne] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.625rem 0.875rem;
    text-decoration: none;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    transition: border-color 0.1s, color 0.1s, background 0.1s;
}

.dash-quick-link:hover[b-ogq266r8ne] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand);
    background: var(--color-surface-raised);
}

.dash-quick-icon[b-ogq266r8ne] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--color-brand-teal);
    flex-shrink: 0;
}

.dash-quick-icon svg[b-ogq266r8ne] {
    width: 100%;
    height: 100%;
}
/* /Components/Pages/Diagnostics.razor.rz.scp.css */
.diag-grid[b-fae4u3nnse] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.diag-card[b-fae4u3nnse] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.diag-card:hover[b-fae4u3nnse] {
    border-color: var(--color-brand-teal);
    box-shadow: 0 4px 12px rgba(7, 70, 132, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
    text-decoration: none;
    color: inherit;
}

.diag-card-icon[b-fae4u3nnse] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-brand-teal) 10%, var(--color-surface));
    color: var(--color-brand-teal);
    flex-shrink: 0;
}

.diag-card-body[b-fae4u3nnse] {
    min-width: 0;
}

.diag-card-title[b-fae4u3nnse] {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.25rem;
    letter-spacing: -0.01em;
}

.diag-card-desc[b-fae4u3nnse] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
    margin: 0;
}
/* /Components/Pages/Helpdesk.razor.rz.scp.css */
/* ── Workspace layout ────────────────────────────────────────────────────── */

/* Compact the page header — workspace itself is the focus */
.page-header-row[b-dy7uarmwra] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.hd-workspace[b-dy7uarmwra] {
    display: grid;
    grid-template-columns: 13rem 1fr 6px clamp(24rem, 30%, 36rem);
    height: calc(100svh - 9.5rem);
    min-height: 500px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
}

/* ── Tree panel ──────────────────────────────────────────────────────────── */

.hd-tree[b-dy7uarmwra] {
    background: var(--color-surface-raised);
    border-right: 1px solid var(--color-border);
    padding: 0.5rem 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.hd-tree-node[b-dy7uarmwra] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.45rem 0.9rem;
    border: none;
    border-left: 3px solid transparent;
    background: none;
    cursor: pointer;
    text-align: left;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text);
    transition: background 0.1s;
}

.hd-tree-node:hover[b-dy7uarmwra] {
    background: var(--color-surface);
}

.hd-tree-node--active[b-dy7uarmwra] {
    border-left-color: var(--color-brand-teal);
    background: var(--color-surface);
    font-weight: 600;
    color: var(--color-brand-teal);
}

.hd-tree-node-label[b-dy7uarmwra] {
    flex: 1;
}

.hd-tree-count[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    min-width: 1.6rem;
    text-align: center;
    line-height: 1.4;
}

.hd-tree-node--active .hd-tree-count[b-dy7uarmwra] {
    background: color-mix(in srgb, var(--color-brand-teal) 12%, transparent);
    border-color: var(--color-brand-teal);
    color: var(--color-brand-teal);
}

.hd-tree-count--loading[b-dy7uarmwra] {
    opacity: 0.5;
}

.hd-tree-section[b-dy7uarmwra] {
    padding: 0.6rem 0.9rem 0.2rem;
    font-family: var(--font-subtitle);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-border);
    margin-top: 0.3rem;
}

.hd-tree-goto[b-dy7uarmwra] {
    display: flex;
    gap: 0.3rem;
    padding: 0.3rem 0.9rem;
}

.hd-tree-goto-input[b-dy7uarmwra] {
    flex: 1;
    min-width: 0;
    font-family: var(--font-body);
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-text);
}

.hd-tree-goto-input:focus[b-dy7uarmwra] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-teal) 20%, transparent);
}

.hd-tree-goto-btn[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-brand);
    border-radius: 4px;
    background: var(--color-brand);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}

.hd-tree-goto-btn:hover:not(:disabled)[b-dy7uarmwra] {
    opacity: 0.9;
}

.hd-tree-goto-btn:disabled[b-dy7uarmwra] {
    opacity: 0.5;
    cursor: default;
}

.hd-tree-goto-error[b-dy7uarmwra] {
    padding: 0.2rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-down);
}

/* ── Grid panel ──────────────────────────────────────────────────────────── */

.hd-grid-panel[b-dy7uarmwra] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-surface);
}

.hd-grid-search[b-dy7uarmwra] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.hd-input[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-surface);
    color: var(--color-text);
    outline: none;
}

.hd-input:focus[b-dy7uarmwra] {
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-teal) 20%, transparent);
}

.hd-input--keywords[b-dy7uarmwra] {
    flex: 2;
    min-width: 10rem;
}

.hd-input--email[b-dy7uarmwra] {
    flex: 1;
    min-width: 9rem;
}

.hd-grid-error[b-dy7uarmwra] {
    margin: 0.5rem 0.75rem;
}

.hd-prompt[b-dy7uarmwra],
.hd-result-count[b-dy7uarmwra] {
    padding: 0 0.75rem;
    margin: 0.75rem 0;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.hd-grid-table-wrap[b-dy7uarmwra] {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
}

/* ── Table ───────────────────────────────────────────────────────────────── */

.hd-table[b-dy7uarmwra] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 0.875rem;
}

.hd-table th[b-dy7uarmwra] {
    text-align: left;
    padding: 0.45rem 0.75rem;
    border-bottom: 2px solid var(--color-border);
    color: var(--color-text-muted);
    font-weight: 600;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--color-surface);
    z-index: 1;
}

.hd-table td[b-dy7uarmwra] {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    vertical-align: middle;
}

.hd-row[b-dy7uarmwra] {
    cursor: pointer;
    transition: background 0.1s;
}

.hd-row:hover td[b-dy7uarmwra] {
    background: var(--color-surface-raised);
}

.hd-row--selected td[b-dy7uarmwra] {
    background: color-mix(in srgb, var(--color-brand-teal) 8%, transparent);
}

.hd-row--selected:hover td[b-dy7uarmwra] {
    background: color-mix(in srgb, var(--color-brand-teal) 12%, transparent);
}

.hd-table tbody tr:last-child td[b-dy7uarmwra] {
    border-bottom: none;
}

/* ── Sortable column headers ─────────────────────────────────────────────── */

.hd-col-sortable[b-dy7uarmwra] {
    cursor: pointer;
    user-select: none;
}

.hd-col-sortable:hover[b-dy7uarmwra] {
    color: var(--color-text);
}

.hd-col-sorted[b-dy7uarmwra] {
    color: var(--color-brand-teal);
}

/* ── Pagination bar ──────────────────────────────────────────────────────── */

.hd-pagination[b-dy7uarmwra] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.45rem 0.75rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    flex-shrink: 0;
}

.hd-page-btn[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface-raised);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.1s, color 0.1s;
}

.hd-page-btn:hover:not(:disabled)[b-dy7uarmwra] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand-teal);
}

.hd-page-btn:disabled[b-dy7uarmwra] {
    opacity: 0.4;
    cursor: default;
}

.hd-page-info[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ── Selection column ────────────────────────────────────────────────────── */

.hd-col-sel[b-dy7uarmwra] {
    width: 2rem;
    text-align: center;
    padding-left: 0.5rem;
    padding-right: 0;
}

.hd-radio[b-dy7uarmwra] {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    border: 2px solid #999;
    cursor: pointer;
    box-sizing: border-box;
}

.hd-radio--checked[b-dy7uarmwra] {
    border-color: var(--color-brand-teal);
    background: radial-gradient(circle, var(--color-brand-teal) 40%, transparent 45%);
}

/* ── Cell types ──────────────────────────────────────────────────────────── */

.hd-id[b-dy7uarmwra] {
    font-size: 0.8125rem;
    color: var(--color-brand-teal);
    white-space: nowrap;
    font-weight: 600;
}

.hd-provider-badge[b-dy7uarmwra] {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    margin-right: 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--color-brand);
    color: #ffffff;
    vertical-align: 1px;
}

.hd-provider-filter[b-dy7uarmwra] {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    margin: 0.5rem 0 0.25rem;
    flex-wrap: wrap;
}

.hd-provider-chip[b-dy7uarmwra] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 999px;
    background: #ffffff;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.hd-provider-chip:hover:not(:disabled)[b-dy7uarmwra] {
    border-color: var(--color-brand-teal);
}

.hd-provider-chip--active[b-dy7uarmwra] {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: #ffffff;
}

.hd-provider-chip:disabled[b-dy7uarmwra] {
    opacity: 0.45;
    cursor: not-allowed;
}

.hd-provider-chip-count[b-dy7uarmwra] {
    font-size: 0.6875rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.08);
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    min-width: 1.5rem;
    text-align: center;
}

.hd-provider-chip--active .hd-provider-chip-count[b-dy7uarmwra] {
    background: rgba(255, 255, 255, 0.22);
}

.hd-subject[b-dy7uarmwra] {
    max-width: 18rem;
}

.hd-date[b-dy7uarmwra] {
    white-space: nowrap;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.hd-idle[b-dy7uarmwra] {
    white-space: nowrap;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    text-align: right;
}

.hd-customer[b-dy7uarmwra] {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.hd-assignee[b-dy7uarmwra] {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.hd-client[b-dy7uarmwra] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-brand);
    white-space: nowrap;
}

/* ── Priority badge ───────────────────────────────────────────────────────── */

.hd-badge--priority-urgent[b-dy7uarmwra] {
    background: color-mix(in srgb, var(--color-down) 12%, transparent);
    border-color: var(--color-down);
    color: var(--color-down);
}

.hd-badge--priority-high[b-dy7uarmwra] {
    background: color-mix(in srgb, var(--color-degraded) 12%, transparent);
    border-color: var(--color-degraded);
    color: var(--color-degraded);
}

.hd-badge--priority-normal[b-dy7uarmwra] {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.hd-badge--priority-low[b-dy7uarmwra] {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
    color: var(--color-text-muted);
    opacity: 0.7;
}

/* ── Status badge ────────────────────────────────────────────────────────── */

.hd-badge[b-dy7uarmwra] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.hd-badge--status-open[b-dy7uarmwra],
.hd-badge--status-active[b-dy7uarmwra] {
    background: color-mix(in srgb, var(--color-healthy) 12%, transparent);
    border-color: var(--color-healthy);
    color: var(--color-healthy);
}

.hd-badge--status-closed[b-dy7uarmwra] {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.hd-badge--status-waiting[b-dy7uarmwra] {
    background: color-mix(in srgb, var(--color-degraded) 12%, transparent);
    border-color: var(--color-degraded);
    color: var(--color-degraded);
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */

.hd-spinner[b-dy7uarmwra] {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-brand-teal);
    border-radius: 50%;
    animation: hd-spin-b-dy7uarmwra 0.7s linear infinite;
    vertical-align: middle;
}

.hd-spinner--light[b-dy7uarmwra] {
    border-color: rgba(255,255,255,0.4);
    border-top-color: #fff;
}

@keyframes hd-spin-b-dy7uarmwra {
    to { transform: rotate(360deg); }
}

/* ── Error ───────────────────────────────────────────────────────────────── */

.hd-error[b-dy7uarmwra] {
    padding: 0.5rem 0.75rem;
    background: color-mix(in srgb, var(--color-down) 10%, transparent);
    border: 1px solid var(--color-down);
    border-radius: 5px;
    color: var(--color-down);
    font-family: var(--font-body);
    font-size: 0.875rem;
}

/* ── Splitter ────────────────────────────────────────────────────────────── */

.hd-splitter[b-dy7uarmwra] {
    position: relative;
    background: var(--color-border);
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    z-index: 2;
}

.hd-splitter:hover[b-dy7uarmwra],
.hd-splitter--active[b-dy7uarmwra] {
    background: var(--color-brand-teal);
}

.hd-splitter-toggle[b-dy7uarmwra] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 48px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface-raised);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    z-index: 3;
}

.hd-splitter:hover .hd-splitter-toggle[b-dy7uarmwra],
.hd-splitter-toggle:focus-visible[b-dy7uarmwra] {
    opacity: 1;
}

.hd-splitter-toggle:hover[b-dy7uarmwra] {
    background: var(--color-surface);
    border-color: var(--color-brand-teal);
}

.hd-splitter-chevron[b-dy7uarmwra] {
    font-size: 1rem;
    line-height: 1;
    color: var(--color-text-muted);
    transition: transform 0.2s;
    display: inline-block;
}

.hd-splitter-chevron--collapsed[b-dy7uarmwra] {
    transform: rotate(180deg);
}

/* ── Preview panel ───────────────────────────────────────────────────────── */

.hd-preview[b-dy7uarmwra] {
    background: var(--color-surface);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    transition: opacity 0.15s;
}

.hd-preview--collapsed[b-dy7uarmwra] {
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.hd-preview--empty[b-dy7uarmwra] {
    align-items: center;
    justify-content: center;
}

.hd-preview-empty-msg[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
    padding: 1.5rem 1rem;
}

.hd-preview-loading[b-dy7uarmwra] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    padding: 1.5rem 1rem;
}

.hd-preview-inner[b-dy7uarmwra] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hd-preview-top[b-dy7uarmwra] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hd-preview-open-link[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-brand-teal);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}

.hd-preview-open-link:hover[b-dy7uarmwra] {
    text-decoration: underline;
}

.hd-preview-subject[b-dy7uarmwra] {
    font-family: var(--font-title);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    line-height: 1.35;
}

.hd-preview-props[b-dy7uarmwra] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    border-top: 1px solid var(--color-border);
    padding-top: 0.65rem;
}

.hd-preview-prop[b-dy7uarmwra] {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.25rem;
}

.hd-preview-prop dt[b-dy7uarmwra] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    padding-top: 0.1rem;
}

.hd-preview-prop dd[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text);
    margin: 0;
}

/* ── Preview attachment strip ────────────────────────────────────────────── */

.hd-preview-attach-strip[b-dy7uarmwra] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.hd-preview-attach-label[b-dy7uarmwra] {
    font-family: var(--font-subtitle);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-right: 0.1rem;
    flex-shrink: 0;
}

.hd-preview-attach-chip[b-dy7uarmwra] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.45rem;
    border-radius: 20px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text);
}

.hd-preview-attach-link[b-dy7uarmwra] {
    color: var(--color-brand-teal);
    text-decoration: none;
}

.hd-preview-attach-link:hover[b-dy7uarmwra] {
    text-decoration: underline;
}

.hd-preview-attach-portal-link[b-dy7uarmwra] {
    margin-left: auto;
    font-size: 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.hd-preview-attach-thumb-btn[b-dy7uarmwra] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.hd-preview-attach-thumb[b-dy7uarmwra] {
    height: 1.75rem;
    width: auto;
    max-width: 3.5rem;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid var(--color-border);
    vertical-align: middle;
}

/* ── Image lightbox ──────────────────────────────────────────────────────── */

.hd-lightbox-overlay[b-dy7uarmwra] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hd-lightbox-content[b-dy7uarmwra] {
    background: var(--color-surface);
    border-radius: 6px;
    padding: 1rem;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.hd-lightbox-img[b-dy7uarmwra] {
    max-width: 100%;
    max-height: calc(90vh - 4rem);
    object-fit: contain;
    border-radius: 3px;
    display: block;
}

.hd-lightbox-footer[b-dy7uarmwra] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--color-border);
}

.hd-lightbox-close[b-dy7uarmwra] {
    font-size: 0.8125rem;
}

.hd-preview-section-label[b-dy7uarmwra] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.35rem;
}

.hd-preview-convo[b-dy7uarmwra] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hd-preview-convo-item[b-dy7uarmwra] {
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-surface);
    padding: 0.5rem 0.65rem;
}

.hd-preview-convo-item--internal[b-dy7uarmwra] {
    background: color-mix(in srgb, var(--color-brand) 4%, transparent);
    border-color: color-mix(in srgb, var(--color-brand) 20%, transparent);
}

.hd-preview-convo-item--initial[b-dy7uarmwra] {
    background: color-mix(in srgb, var(--color-brand-teal) 8%, transparent);
    border-color: var(--color-brand-teal);
    border-left-width: 3px;
}

.hd-preview-convo-initial-label[b-dy7uarmwra] {
    font-family: var(--font-subtitle);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-brand-teal);
    margin-left: auto;
    margin-right: 0.5rem;
}

.hd-preview-convo-meta[b-dy7uarmwra] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.hd-preview-convo-author[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
}

.hd-preview-convo-date[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.hd-preview-convo-body[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text);
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.hd-preview-expand-btn[b-dy7uarmwra] {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-brand-teal);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.hd-preview-expand-btn:hover[b-dy7uarmwra] {
    text-decoration: underline;
}

.hd-preview-more[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    margin: 0;
    font-style: italic;
}

/* ── Action dropdown (AI queue) ──────────────────────────────────────────── */

.hd-action-bar[b-dy7uarmwra] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.hd-action-dropdown[b-dy7uarmwra] {
    position: relative;
}

.hd-action-btn[b-dy7uarmwra] {
    font-size: 0.8125rem;
    padding: 0.2rem 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.hd-action-menu[b-dy7uarmwra] {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.25rem;
    z-index: 20;
    min-width: 14rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    padding: 0.3rem 0;
}

.hd-action-menu-item[b-dy7uarmwra] {
    display: block;
    width: 100%;
    padding: 0.4rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.hd-action-menu-item:hover[b-dy7uarmwra] {
    background: var(--color-surface);
}

.hd-action-confirm[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-healthy);
    white-space: nowrap;
}

/* ── Muted ───────────────────────────────────────────────────────────────── */

.hd-muted[b-dy7uarmwra] {
    color: var(--color-text-muted);
}

/* ── Preview tabs ────────────────────────────────────────────────────────── */

.hd-preview-tabs[b-dy7uarmwra] {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 0;
}

.hd-preview-tab[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.4rem 0.85rem;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.1s, border-color 0.1s;
}

.hd-preview-tab:hover[b-dy7uarmwra] {
    color: var(--color-text);
}

.hd-preview-tab--active[b-dy7uarmwra] {
    color: var(--color-brand-teal);
    border-bottom-color: var(--color-brand-teal);
    font-weight: 600;
}

.hd-preview-tab-dot[b-dy7uarmwra] {
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--color-brand-teal);
    flex-shrink: 0;
}

/* ── Classification result panel ─────────────────────────────────────────── */

.hd-classify-difficulty[b-dy7uarmwra] {
    display: inline-flex;
    gap: 0.2rem;
    align-items: center;
}

.hd-classify-pip[b-dy7uarmwra] {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 2px;
    background: var(--color-border);
}

.hd-classify-pip--filled[b-dy7uarmwra] {
    background: var(--color-brand-teal);
}

.hd-classify-keyword-list[b-dy7uarmwra] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hd-classify-keyword[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
}

.hd-classify-notes[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-style: italic;
    line-height: 1.45;
    margin: 0;
}

.hd-classify-permission-yes[b-dy7uarmwra] {
    color: var(--color-healthy);
    font-weight: 600;
}

.hd-classify-permission-no[b-dy7uarmwra] {
    color: var(--color-down);
    font-weight: 600;
}

.hd-classify-site-row dd[b-dy7uarmwra] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hd-classify-site-footer[b-dy7uarmwra] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.hd-classify-push-btn[b-dy7uarmwra] {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.hd-classify-push-result[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.75rem;
}

.hd-classify-push-ok[b-dy7uarmwra]  { color: var(--color-healthy); }
.hd-classify-push-err[b-dy7uarmwra] { color: var(--color-down); }

.hd-classify-site-select[b-dy7uarmwra] {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.8125rem;
}

.hd-classify-site-method[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.hd-col-classify-hdr[b-dy7uarmwra] {
    white-space: nowrap;
}

.hd-col-classify[b-dy7uarmwra] {
    min-width: 9rem;
    max-width: 16rem;
}

.hd-classify-grid-busy[b-dy7uarmwra] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-brand-teal);
    font-weight: 600;
    white-space: nowrap;
}

.hd-classify-grid-error[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-down);
    font-weight: 600;
    white-space: nowrap;
    cursor: help;
}

.hd-classify-grid-site[b-dy7uarmwra] {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
}

.hd-classify-grid-badge[b-dy7uarmwra] {
    margin-right: 0.2rem;
    font-size: 0.7rem;
    padding: 0.1rem 0.35rem;
}

/* ── Enrichment labels (Skills / Notes headers) ──────────────────────────── */

.hd-classify-enrich-label[b-dy7uarmwra] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 1rem 0 0.4rem;
}

/* ── Skill chips ─────────────────────────────────────────────────────────── */

.hd-classify-skills[b-dy7uarmwra] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: flex-start;
}

.hd-skill-chip[b-dy7uarmwra] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--color-surface-raised, #f0f4f8);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.2rem 0.45rem 0.2rem 0.5rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text);
    line-height: 1.4;
}

.hd-skill-chip--ai[b-dy7uarmwra] {
    background: color-mix(in srgb, var(--color-brand-teal) 10%, white);
    border-color: color-mix(in srgb, var(--color-brand-teal) 35%, white);
}

.hd-skill-chip-badge[b-dy7uarmwra] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-brand-teal);
    letter-spacing: 0.03em;
}

.hd-skill-remove[b-dy7uarmwra] {
    background: none;
    border: none;
    padding: 0 0.1rem;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1;
    display: flex;
    align-items: center;
}

.hd-skill-remove:hover[b-dy7uarmwra] {
    color: var(--color-down, #c0392b);
}

/* ── Add skill picker ────────────────────────────────────────────────────── */

.hd-skill-add-wrap[b-dy7uarmwra] {
    position: relative;
}

.hd-skill-add-btn[b-dy7uarmwra] {
    background: none;
    border: 1px dashed var(--color-border);
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-brand);
    cursor: pointer;
    white-space: nowrap;
}

.hd-skill-add-btn:hover[b-dy7uarmwra] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand-teal);
}

.hd-skill-picker[b-dy7uarmwra] {
    position: absolute;
    top: calc(100% + 0.3rem);
    left: 0;
    z-index: 50;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.14);
    width: 22rem;
    display: flex;
    flex-direction: column;
    max-height: 22rem;
}

.hd-skill-picker-search[b-dy7uarmwra] {
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.hd-skill-picker-input[b-dy7uarmwra] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-text);
    background: var(--color-surface);
    outline: none;
}

.hd-skill-picker-input:focus[b-dy7uarmwra] {
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-teal) 20%, transparent);
}

.hd-skill-picker-list[b-dy7uarmwra] {
    overflow-y: auto;
    flex: 1;
    padding: 0.25rem 0;
}

.hd-skill-picker-empty[b-dy7uarmwra] {
    padding: 0.6rem 0.75rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.hd-skill-picker-item[b-dy7uarmwra] {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    gap: 0.1rem;
}

.hd-skill-picker-item:hover[b-dy7uarmwra] {
    background: var(--color-surface-hover, #f5f7fa);
}

.hd-skill-picker-name[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text);
}

.hd-skill-picker-desc[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.73rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hd-skill-picker-tags[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.68rem;
    color: var(--color-brand-teal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Operator notes textarea ─────────────────────────────────────────────── */

.hd-classify-operator-notes[b-dy7uarmwra] {
    width: 100%;
    resize: vertical;
    min-height: 4.5rem;
    box-sizing: border-box;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-text);
}

/* ── Attachments tab ───────────────────────────────────────────────────── */

.hd-attach-tab[b-dy7uarmwra] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 0;
}

.hd-attach-header[b-dy7uarmwra] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.hd-attach-count[b-dy7uarmwra] {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.hd-attach-analyse-btn[b-dy7uarmwra] {
    font-size: 0.8125rem;
    padding: 0.3rem 0.75rem;
}

.hd-attach-grid[b-dy7uarmwra] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.hd-attach-card[b-dy7uarmwra] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow 0.15s;
}

.hd-attach-card:hover[b-dy7uarmwra] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.hd-attach-card--signature[b-dy7uarmwra] {
    opacity: 0.6;
}

.hd-attach-thumb-wrap[b-dy7uarmwra] {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--color-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hd-attach-thumb[b-dy7uarmwra] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hd-attach-icon[b-dy7uarmwra] {
    width: 100%;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background: var(--color-bg);
}

.hd-attach-meta[b-dy7uarmwra] {
    padding: 0.4rem 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
}

.hd-attach-name[b-dy7uarmwra] {
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.hd-attach-size[b-dy7uarmwra] {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.hd-attach-actions[b-dy7uarmwra] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.5rem;
    gap: 0.5rem;
}

.hd-attach-role-badge[b-dy7uarmwra] {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    background: var(--color-bg);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.hd-attach-role--evidence[b-dy7uarmwra] {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #a5d6a7;
}

.hd-attach-role--document[b-dy7uarmwra] {
    background: #e3f2fd;
    color: #1565c0;
    border-color: #90caf9;
}

.hd-attach-role--signature[b-dy7uarmwra] {
    background: var(--color-bg);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

.hd-attach-role-select[b-dy7uarmwra] {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.15rem 0.3rem;
    border-radius: 3px;
    background: var(--color-bg);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    cursor: pointer;
    appearance: auto;
    line-height: 1.3;
}

select.hd-attach-role--evidence[b-dy7uarmwra] {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #a5d6a7;
}

select.hd-attach-role--document[b-dy7uarmwra] {
    background: #e3f2fd;
    color: #1565c0;
    border-color: #90caf9;
}

select.hd-attach-role--signature[b-dy7uarmwra] {
    background: var(--color-bg);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

select.hd-attach-role--unknown[b-dy7uarmwra] {
    background: var(--color-bg);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

.hd-attach-role--referenced[b-dy7uarmwra] {
    background: #fff3e0;
    color: #e65100;
    border-color: #ffcc80;
}

.hd-attach-download[b-dy7uarmwra] {
    font-size: 0.875rem;
    color: var(--color-brand-teal);
    text-decoration: none;
    padding: 0.15rem 0.3rem;
    border-radius: 3px;
    margin-left: auto;
}

.hd-attach-download:hover[b-dy7uarmwra] {
    background: color-mix(in srgb, var(--color-brand-teal) 10%, transparent);
}

/* ── Classified attachment rows (classification tab) ─────────────────────── */

.hd-cattach-list[b-dy7uarmwra] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.hd-cattach-compact[b-dy7uarmwra] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    border-radius: 5px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    flex-wrap: wrap;
}

.hd-cattach--evidence[b-dy7uarmwra]  { border-left: 3px solid var(--color-healthy); }
.hd-cattach--document[b-dy7uarmwra]  { border-left: 3px solid var(--color-brand); }
.hd-cattach--signature[b-dy7uarmwra] { border-left: 3px solid var(--color-border); opacity: 0.7; }
.hd-cattach--unknown[b-dy7uarmwra]   { border-left: 3px solid var(--color-degraded); }

.hd-cattach-badge[b-dy7uarmwra] {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    font-family: var(--font-subtitle);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.hd-cattach-badge--evidence[b-dy7uarmwra]  { background: color-mix(in srgb, var(--color-healthy) 15%, transparent); color: var(--color-healthy); }
.hd-cattach-badge--document[b-dy7uarmwra]  { background: color-mix(in srgb, var(--color-brand) 12%, transparent); color: var(--color-brand); }
.hd-cattach-badge--signature[b-dy7uarmwra] { background: var(--color-surface-raised); color: var(--color-text-muted); }
.hd-cattach-badge--unknown[b-dy7uarmwra]   { background: color-mix(in srgb, var(--color-degraded) 15%, transparent); color: var(--color-degraded); }

.hd-cattach-name[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-brand-teal);
    text-decoration: none;
}

a.hd-cattach-name:hover[b-dy7uarmwra] { text-decoration: underline; }

.hd-cattach-name-plain[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
}

.hd-cattach-size[b-dy7uarmwra] {
    font-family: var(--font-body);
    font-size: 0.68rem;
    color: var(--color-text-muted);
}

.hd-cattach-ref[b-dy7uarmwra] {
    display: inline-block;
    padding: 0.02rem 0.25rem;
    border-radius: 3px;
    font-family: var(--font-subtitle);
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: color-mix(in srgb, var(--color-brand-teal) 12%, transparent);
    color: var(--color-brand-teal);
}

/* ── Auto-classification live feed ──────────────────────────────────────── */

.hd-ac[b-dy7uarmwra] {
    position: relative;
    margin-left: auto;
}

.hd-ac-pill[b-dy7uarmwra] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--color-brand-teal) 25%, transparent);
    background: color-mix(in srgb, var(--color-brand-teal) 6%, transparent);
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-brand-teal);
    cursor: pointer;
    white-space: nowrap;
    max-width: 360px;
    transition: background 0.15s, border-color 0.15s;
}

.hd-ac-pill:hover[b-dy7uarmwra] {
    background: color-mix(in srgb, var(--color-brand-teal) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-brand-teal) 40%, transparent);
}

.hd-ac-pill--active[b-dy7uarmwra] {
    border-color: var(--color-brand-teal);
    background: color-mix(in srgb, var(--color-brand-teal) 10%, transparent);
}

.hd-ac-pill-text[b-dy7uarmwra] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hd-ac-dot[b-dy7uarmwra] {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--color-brand-teal);
    animation: hd-ac-pulse-b-dy7uarmwra 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes hd-ac-pulse-b-dy7uarmwra {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

.hd-spinner--small[b-dy7uarmwra] {
    width: 0.7rem;
    height: 0.7rem;
    border-width: 1.5px;
    flex-shrink: 0;
}

/* ── Activity panel dropdown ── */

.hd-ac-panel[b-dy7uarmwra] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 100;
    width: 420px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    font-family: var(--font-body);
    font-size: 0.78rem;
}

.hd-ac-panel-header[b-dy7uarmwra] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid var(--color-border);
}

.hd-ac-panel-title[b-dy7uarmwra] {
    font-family: var(--font-subtitle);
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--color-text);
}

.hd-ac-panel-meta[b-dy7uarmwra] {
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.hd-ac-empty[b-dy7uarmwra] {
    padding: 1rem;
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0;
}

.hd-ac-log[b-dy7uarmwra] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hd-ac-entry[b-dy7uarmwra] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
}

.hd-ac-entry:last-child[b-dy7uarmwra] {
    border-bottom: none;
}

.hd-ac-time[b-dy7uarmwra] {
    flex-shrink: 0;
    width: 3.5rem;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

.hd-ac-icon[b-dy7uarmwra] {
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
    font-weight: 700;
}

.hd-ac-entry--classified .hd-ac-icon[b-dy7uarmwra] { color: var(--color-healthy); }
.hd-ac-entry--skipped .hd-ac-icon[b-dy7uarmwra]    { color: var(--color-text-muted); }
.hd-ac-entry--failed .hd-ac-icon[b-dy7uarmwra]     { color: var(--color-down); }
.hd-ac-entry--error .hd-ac-icon[b-dy7uarmwra]      { color: var(--color-degraded); }
.hd-ac-entry--cyclestart .hd-ac-icon[b-dy7uarmwra] { color: var(--color-brand-teal); }
.hd-ac-entry--cycleend .hd-ac-icon[b-dy7uarmwra]   { color: var(--color-brand-teal); }

.hd-ac-body[b-dy7uarmwra] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-width: 0;
}

.hd-ac-ticket-id[b-dy7uarmwra] {
    font-weight: 600;
    color: var(--color-brand);
    font-size: 0.72rem;
}

.hd-ac-subject[b-dy7uarmwra] {
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.hd-ac-detail[b-dy7uarmwra] {
    color: var(--color-text-muted);
    font-size: 0.72rem;
}

.hd-ac-entry--classified .hd-ac-detail[b-dy7uarmwra] {
    color: var(--color-healthy);
}
/* /Components/Pages/HelpdeskDashboard.razor.rz.scp.css */
/* ── Filter tabs ───────────────────────────────────────────────────────── */
.hdd-filters[b-ife37sxi97] {
    margin-bottom: 1rem;
}

.hdd-filter-tabs[b-ife37sxi97] {
    display: flex;
    gap: 0.25rem;
}

.hdd-filter-tab[b-ife37sxi97] {
    padding: 0.3rem 0.875rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.hdd-filter-tab:hover[b-ife37sxi97] {
    border-color: var(--color-brand-teal);
    color: var(--color-text);
}

.hdd-filter-tab--active[b-ife37sxi97] {
    background: color-mix(in srgb, var(--color-brand-teal) 12%, transparent);
    border-color: var(--color-brand-teal);
    color: var(--color-brand);
}

/* ── Summary cards ──────────────────────────────────────────────────────── */
.hdd-cards[b-ife37sxi97] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.hdd-card[b-ife37sxi97] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.625rem 1rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    min-width: 6rem;
    flex: 1;
}

.hdd-card--critical[b-ife37sxi97] {
    border-left: 3px solid var(--color-down);
}

.hdd-card-value[b-ife37sxi97] {
    font-family: var(--font-title);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
}

.hdd-card-label[b-ife37sxi97] {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Charts grid ───────────────────────────────────────────────────────── */
.hdd-charts-grid[b-ife37sxi97] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.hdd-chart-panel[b-ife37sxi97] {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.75rem;
}

.hdd-chart-title[b-ife37sxi97] {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.5rem;
}

.hdd-chart-wrap[b-ife37sxi97] {
    position: relative;
    height: 180px;
    max-height: 180px;
    overflow: hidden;
}

.hdd-chart-wrap canvas[b-ife37sxi97] {
    max-height: 180px !important;
}

/* ── Section titles ────────────────────────────────────────────────────── */
.hdd-section-title[b-ife37sxi97] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 1rem 0 0.5rem;
}

/* ── Tables ────────────────────────────────────────────────────────────── */
.hdd-table-section[b-ife37sxi97] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.hdd-table-section .hdd-section-title[b-ife37sxi97] {
    padding: 0.75rem 0.75rem 0;
    margin: 0 0 0.25rem;
}

.hdd-table[b-ife37sxi97] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 0.78rem;
}

.hdd-th[b-ife37sxi97] {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    padding: 0.4rem 0.75rem;
    text-align: left;
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
    background: var(--color-surface-raised);
    position: sticky;
    top: 0;
}

.hdd-th--num[b-ife37sxi97] { text-align: right; }

.hdd-tr[b-ife37sxi97] {
    border-bottom: 1px solid var(--color-border);
}

.hdd-tr:last-child[b-ife37sxi97] { border-bottom: none; }

.hdd-tr:hover[b-ife37sxi97] {
    background: color-mix(in srgb, var(--color-brand) 3%, transparent);
}

.hdd-td[b-ife37sxi97] {
    padding: 0.4rem 0.75rem;
    color: var(--color-text);
    vertical-align: middle;
}

.hdd-td--num[b-ife37sxi97] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.hdd-td--name[b-ife37sxi97] {
    font-weight: 600;
    white-space: nowrap;
}

/* ── Error state ───────────────────────────────────────────────────────── */
.hdd-error[b-ife37sxi97] {
    padding: 0.5rem 0.75rem;
    background: color-mix(in srgb, var(--color-down) 10%, transparent);
    border: 1px solid var(--color-down);
    border-radius: 6px;
    color: var(--color-down);
    font-family: var(--font-body);
    font-size: 0.78rem;
    margin-bottom: 0.75rem;
}

/* ── Empty / loading states ────────────────────────────────────────────── */
.hdd-empty[b-ife37sxi97], .hdd-loading[b-ife37sxi97] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    padding: 1.5rem 0;
}
/* /Components/Pages/HelpdeskDiagnostics.razor.rz.scp.css */
/* ── Status badges ────────────────────────────────────────────────────────── */

.hd-badge[b-4cw4m5ofni] {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text);
}

.hd-badge--readonly[b-4cw4m5ofni] {
    background: color-mix(in srgb, var(--color-degraded) 12%, transparent);
    border-color: var(--color-degraded);
    color: var(--color-degraded);
}

.hd-badge--writable[b-4cw4m5ofni] {
    background: color-mix(in srgb, var(--color-healthy) 12%, transparent);
    border-color: var(--color-healthy);
    color: var(--color-healthy);
}

.hd-status[b-4cw4m5ofni] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
}

.hd-status--healthy[b-4cw4m5ofni] {
    background: color-mix(in srgb, var(--color-healthy) 12%, transparent);
    color: var(--color-healthy);
}

.hd-status--unhealthy[b-4cw4m5ofni] {
    background: color-mix(in srgb, var(--color-down) 12%, transparent);
    color: var(--color-down);
}

/* ── Health result grid ───────────────────────────────────────────────────── */

.hd-health-grid[b-4cw4m5ofni] {
    margin-top: 1rem;
}

/* ── Error ───────────────────────────────────────────────────────────────── */

.hd-error[b-4cw4m5ofni] {
    padding: 0.6rem 0.9rem;
    background: color-mix(in srgb, var(--color-down) 10%, transparent);
    border: 1px solid var(--color-down);
    border-radius: 6px;
    color: var(--color-down);
    font-family: var(--font-body);
    font-size: 0.875rem;
    margin-top: 0.75rem;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */

.hd-spinner[b-4cw4m5ofni] {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-brand-teal);
    border-radius: 50%;
    animation: hd-spin-b-4cw4m5ofni 0.7s linear infinite;
    margin-right: 0.35rem;
    vertical-align: middle;
}

.hd-spinner--light[b-4cw4m5ofni] {
    border-color: rgba(255,255,255,0.4);
    border-top-color: #fff;
}

@keyframes hd-spin-b-4cw4m5ofni {
    to { transform: rotate(360deg); }
}

/* ── Search form ─────────────────────────────────────────────────────────── */

.hd-search-form[b-4cw4m5ofni] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
    max-width: 38rem;
}

.hd-search-row[b-4cw4m5ofni] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hd-search-row .settings-label[b-4cw4m5ofni] {
    width: 9rem;
    flex-shrink: 0;
}

.hd-input[b-4cw4m5ofni] {
    flex: 1;
    font-family: var(--font-body);
    font-size: 0.875rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-surface);
    color: var(--color-text);
    outline: none;
}

.hd-input:focus[b-4cw4m5ofni] {
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-teal) 20%, transparent);
}

.hd-search-btn[b-4cw4m5ofni] {
    align-self: flex-start;
    margin-top: 0.25rem;
}

/* ── Results ─────────────────────────────────────────────────────────────── */

.hd-result-count[b-4cw4m5ofni] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0.75rem 0 0.5rem;
}

.hd-empty[b-4cw4m5ofni] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.hd-table-wrap[b-4cw4m5ofni] {
    overflow-x: auto;
    margin-top: 0.5rem;
}

.hd-table[b-4cw4m5ofni] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 0.875rem;
}

.hd-table th[b-4cw4m5ofni] {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--color-border);
    color: var(--color-text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.hd-table td[b-4cw4m5ofni] {
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    vertical-align: top;
}

.hd-table tbody tr:last-child td[b-4cw4m5ofni] {
    border-bottom: none;
}

.hd-id[b-4cw4m5ofni] {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.hd-hint[b-4cw4m5ofni] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin: 0.5rem 0 0;
}

.hd-textarea[b-4cw4m5ofni] {
    resize: vertical;
    min-height: 5rem;
    align-self: stretch;
}

/* ── Auto-classification ──────────────────────────────────────────────────── */

.hd-toggle[b-4cw4m5ofni] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.8125rem;
}

.hd-toggle input[type="checkbox"][b-4cw4m5ofni] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-brand-teal);
}

.hd-input--narrow[b-4cw4m5ofni] {
    width: 6rem;
}

.hd-muted[b-4cw4m5ofni] {
    color: var(--color-text-muted);
    font-style: italic;
}

.hd-save-confirm[b-4cw4m5ofni] {
    margin: 0.5rem 0 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-healthy);
    font-weight: 600;
}

/* ── Report generation progress ──────────────────────────────────────────── */

.hd-progress[b-4cw4m5ofni] {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.hd-progress-step[b-4cw4m5ofni] {
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.25rem;
}

.hd-progress-detail[b-4cw4m5ofni] {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: 0 0 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hd-progress-bar-track[b-4cw4m5ofni] {
    height: 6px;
    background: var(--color-border);
    border-radius: 3px;
    overflow: hidden;
}

.hd-progress-bar-fill[b-4cw4m5ofni] {
    height: 100%;
    background: var(--color-brand-teal);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.hd-progress-count[b-4cw4m5ofni] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 0.25rem 0 0;
    text-align: right;
}
/* /Components/Pages/HelpdeskReports.razor.rz.scp.css */
/* ── Date selector ─────────────────────────────────────────────────────── */
.hdr-date-row[b-23s9058wrl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.hdr-date-label[b-23s9058wrl] {
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.hdr-date-input[b-23s9058wrl] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.84rem;
    color: var(--color-text);
    background: var(--color-surface);
}

.hdr-date-input:focus[b-23s9058wrl] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-teal) 20%, transparent);
}

.hdr-today-btn[b-23s9058wrl] {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    font-family: var(--font-body);
    font-size: 0.84rem;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.hdr-today-btn:hover:not(:disabled)[b-23s9058wrl] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand);
}

.hdr-today-btn:disabled[b-23s9058wrl] {
    opacity: 0.5;
    cursor: default;
}

/* ── Available-dates chip strip ────────────────────────────────────────── */
.hdr-available[b-23s9058wrl] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: -0.5rem 0 1.25rem 0;
    flex-wrap: wrap;
}

.hdr-available-label[b-23s9058wrl] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    padding-top: 0.35rem;
    flex-shrink: 0;
}

.hdr-available-chips[b-23s9058wrl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.hdr-chip[b-23s9058wrl] {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.hdr-chip:hover[b-23s9058wrl] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand);
}

.hdr-chip--active[b-23s9058wrl] {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: #fff;
}

.hdr-chip--active:hover[b-23s9058wrl] {
    color: #fff;
}

.hdr-chip--more[b-23s9058wrl] {
    font-style: italic;
    color: var(--color-text-muted);
}

/* ── Empty state with on-demand generation ─────────────────────────────── */
.hdr-empty-block[b-23s9058wrl] {
    padding: 1.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.hdr-empty-block .hdr-empty[b-23s9058wrl] {
    padding: 0;
}

.hdr-progress[b-23s9058wrl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 32rem;
    padding: 0.85rem 1rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.hdr-progress-step[b-23s9058wrl] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text);
    margin: 0;
}

.hdr-progress-bar[b-23s9058wrl] {
    height: 0.4rem;
    background: var(--color-border);
    border-radius: 999px;
    overflow: hidden;
}

.hdr-progress-fill[b-23s9058wrl] {
    height: 100%;
    background: var(--color-brand-teal);
    transition: width 0.2s;
}

.hdr-progress-count[b-23s9058wrl] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 0;
}

.hdr-error[b-23s9058wrl] {
    font-family: var(--font-body);
    font-size: 0.84rem;
    color: var(--color-down, #b91c1c);
    margin: 0;
}

/* ── Clickable agent rows + drill-down header ──────────────────────────── */
.hdr-tr--clickable[b-23s9058wrl] {
    cursor: pointer;
}

.hdr-tr--clickable:hover .hdr-agent-name[b-23s9058wrl] {
    color: var(--color-brand);
    text-decoration: underline;
}

.hdr-agent-diff-sub[b-23s9058wrl] {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    font-weight: normal;
    margin-left: 0.15rem;
}

.hdr-drilldown-header[b-23s9058wrl] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.25rem;
    margin: 0.25rem 0 1rem 0;
}

.hdr-back-btn[b-23s9058wrl] {
    background: transparent;
    border: none;
    padding: 0.25rem 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-brand-teal);
    cursor: pointer;
}

.hdr-back-btn:hover[b-23s9058wrl] {
    color: var(--color-brand);
    text-decoration: underline;
}

.hdr-drilldown-title[b-23s9058wrl] {
    font-family: var(--font-title);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.hdr-drilldown-stats[b-23s9058wrl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.hdr-drilldown-stats strong[b-23s9058wrl] {
    color: var(--color-text);
    font-weight: 600;
}

/* ── Summary cards ─────────────────────────────────────────────────────── */
.hdr-cards[b-23s9058wrl] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.hdr-card[b-23s9058wrl] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.5rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    min-width: 8rem;
    flex: 1;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.hdr-card:hover[b-23s9058wrl] {
    border-color: var(--color-brand-teal);
}

.hdr-card--active[b-23s9058wrl] {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 15%, transparent);
}

.hdr-card--closed[b-23s9058wrl] {
    border-left: 3px solid var(--color-healthy);
}

.hdr-card-value[b-23s9058wrl] {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
}

.hdr-card-label[b-23s9058wrl] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* ── Resolution metrics ────────────────────────────────────────────────── */
.hdr-metrics[b-23s9058wrl] {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding: 0.75rem 0;
}

.hdr-metric[b-23s9058wrl] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.hdr-metric-value[b-23s9058wrl] {
    font-family: var(--font-title);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
}

.hdr-metric-label[b-23s9058wrl] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* ── View tabs ─────────────────────────────────────────────────────────── */
.hdr-tabs[b-23s9058wrl] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1rem;
}

.hdr-tab[b-23s9058wrl] {
    padding: 0.5rem 1.25rem;
    background: transparent;
    border: none;
    font-family: var(--font-subtitle);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.hdr-tab:hover[b-23s9058wrl] { color: var(--color-text); }

.hdr-tab--active[b-23s9058wrl] {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand);
}

/* ── Tables ────────────────────────────────────────────────────────────── */
.hdr-table-section[b-23s9058wrl] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 8px);
    overflow-x: auto;
}

.hdr-table[b-23s9058wrl] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 0.84rem;
}

.hdr-th[b-23s9058wrl] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    padding: 0.625rem 1rem;
    text-align: left;
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
    background: var(--color-surface-raised);
    position: sticky;
    top: 0;
}

.hdr-th--num[b-23s9058wrl] { text-align: right; }
.hdr-th--wide[b-23s9058wrl] { min-width: 14rem; }

.hdr-tr[b-23s9058wrl] {
    border-bottom: 1px solid var(--color-border);
}

.hdr-tr:last-child[b-23s9058wrl] { border-bottom: none; }

.hdr-tr:hover[b-23s9058wrl] {
    background: color-mix(in srgb, var(--color-brand) 3%, transparent);
}

.hdr-td[b-23s9058wrl] {
    padding: 0.625rem 1rem;
    color: var(--color-text);
    vertical-align: middle;
}

.hdr-td--num[b-23s9058wrl] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.hdr-td--agent[b-23s9058wrl] {
    font-weight: 600;
    white-space: nowrap;
}

.hdr-td--id[b-23s9058wrl] {
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.hdr-td--subject[b-23s9058wrl] {
    max-width: 24rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hdr-td--time[b-23s9058wrl] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

/* ── Heatmap (agent activity by hour) ──────────────────────────────────── */
.hdr-heatmap-row[b-23s9058wrl] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 2px;
}

.hdr-heatmap-label[b-23s9058wrl] {
    font-family: var(--font-body);
    font-size: 0.625rem;
    color: var(--color-text-muted);
    width: 2.75rem;
    text-align: right;
    flex-shrink: 0;
}

.hdr-heatmap[b-23s9058wrl] {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 2px;
    min-width: 12rem;
    flex: 1;
}

.hdr-heatmap-cell[b-23s9058wrl] {
    height: 0.875rem;
    border-radius: 2px;
    background: var(--color-brand-teal);
    transition: opacity 0.15s;
    cursor: default;
}

.hdr-heatmap-cell--replies[b-23s9058wrl] {
    background: var(--color-brand-teal);
}

.hdr-heatmap-cell--notes[b-23s9058wrl] {
    background: var(--color-brand);
}

.hdr-heatmap-cell--closed[b-23s9058wrl] {
    background: var(--color-healthy);
}

.hdr-heatmap-legend[b-23s9058wrl] {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body);
    font-size: 0.625rem;
    color: var(--color-text-muted);
    padding-top: 2px;
    padding-left: 3.125rem;
}

/* ── Ticket links ──────────────────────────────────────────────────────── */
.hdr-link[b-23s9058wrl] {
    color: var(--color-brand-teal);
    text-decoration: none;
}

.hdr-link:hover[b-23s9058wrl] {
    color: var(--color-brand);
    text-decoration: underline;
}

/* ── Empty / loading states ────────────────────────────────────────────── */
.hdr-empty[b-23s9058wrl] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    padding: 2rem 0;
}

.hdr-loading[b-23s9058wrl] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    padding: 2rem 0;
}
/* /Components/Pages/HelpdeskTicketDetail.razor.rz.scp.css */
/* ── Detail page action area ─────────────────────────────────────────────── */

.hd-detail-actions[b-533btoi0xn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-self: flex-start;
    margin-top: 0.25rem;
}

.hd-action-dropdown[b-533btoi0xn] {
    position: relative;
}

.hd-action-btn[b-533btoi0xn] {
    font-size: 0.8125rem;
    padding: 0.2rem 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.hd-action-menu[b-533btoi0xn] {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.25rem;
    z-index: 20;
    min-width: 14rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    padding: 0.3rem 0;
}

.hd-action-menu-item[b-533btoi0xn] {
    display: block;
    width: 100%;
    padding: 0.4rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.hd-action-menu-item:hover[b-533btoi0xn] {
    background: var(--color-surface);
}

.hd-action-confirm[b-533btoi0xn] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-healthy);
    white-space: nowrap;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */

.hd-breadcrumb[b-533btoi0xn] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-bottom: 0.4rem;
}

.hd-breadcrumb-link[b-533btoi0xn] {
    color: var(--color-brand-teal);
    text-decoration: none;
}

.hd-breadcrumb-link:hover[b-533btoi0xn] {
    text-decoration: underline;
}

.hd-breadcrumb-sep[b-533btoi0xn] {
    color: var(--color-border);
}

.hd-back-btn[b-533btoi0xn] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-brand-teal);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.hd-back-btn:hover[b-533btoi0xn] {
    text-decoration: underline;
}

/* ── Loading / not-found ─────────────────────────────────────────────────── */

.hd-loading[b-533btoi0xn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 2rem 0;
}

.hd-not-found[b-533btoi0xn] {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 2rem 0;
}

.hd-not-found a[b-533btoi0xn] {
    color: var(--color-brand-teal);
    margin-left: 0.75rem;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */

.hd-spinner[b-533btoi0xn] {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-brand-teal);
    border-radius: 50%;
    animation: hd-spin-b-533btoi0xn 0.7s linear infinite;
}

@keyframes hd-spin-b-533btoi0xn {
    to { transform: rotate(360deg); }
}

/* ── Section ─────────────────────────────────────────────────────────────── */

.hd-section[b-533btoi0xn] {
    margin-top: 1.75rem;
}

.hd-section-title[b-533btoi0xn] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.4rem;
    margin-bottom: 1rem;
}

/* ── Properties grid ─────────────────────────────────────────────────────── */

.hd-props-grid[b-533btoi0xn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.75rem 2rem;
}

.hd-prop dt[b-533btoi0xn] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: 0.2rem;
}

.hd-prop dd[b-533btoi0xn] {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text);
    margin: 0;
}

/* ── Status badge (shared with search page) ──────────────────────────────── */

.hd-badge[b-533btoi0xn] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.hd-badge--status-open[b-533btoi0xn],
.hd-badge--status-active[b-533btoi0xn] {
    background: color-mix(in srgb, var(--color-healthy) 12%, transparent);
    border-color: var(--color-healthy);
    color: var(--color-healthy);
}

.hd-badge--status-closed[b-533btoi0xn] {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.hd-badge--status-waiting[b-533btoi0xn] {
    background: color-mix(in srgb, var(--color-degraded) 12%, transparent);
    border-color: var(--color-degraded);
    color: var(--color-degraded);
}

/* ── Conversation ────────────────────────────────────────────────────────── */

.hd-empty[b-533btoi0xn] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.hd-convo[b-533btoi0xn] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hd-convo-item[b-533btoi0xn] {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    padding: 0.75rem 1rem;
}

.hd-convo-item--internal[b-533btoi0xn] {
    background: color-mix(in srgb, var(--color-brand) 4%, transparent);
    border-color: color-mix(in srgb, var(--color-brand) 20%, transparent);
}

.hd-convo-item--initial[b-533btoi0xn] {
    background: color-mix(in srgb, var(--color-brand-teal) 8%, transparent);
    border-color: var(--color-brand-teal);
    border-left-width: 3px;
}

.hd-convo-initial-label[b-533btoi0xn] {
    font-family: var(--font-subtitle);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-brand-teal);
    margin-left: auto;
    margin-right: 0.5rem;
}

.hd-convo-header[b-533btoi0xn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.hd-convo-author[b-533btoi0xn] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}

.hd-convo-date[b-533btoi0xn] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-left: auto;
}

.hd-convo-body[b-533btoi0xn] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text);
    white-space: pre-wrap;
    line-height: 1.55;
}

/* ── Attachment strip (inline below properties) ──────────────────────────── */

.hd-attach-strip[b-533btoi0xn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.9rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--color-border);
}

.hd-attach-strip-label[b-533btoi0xn] {
    font-family: var(--font-subtitle);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-right: 0.25rem;
}

.hd-attach-chip[b-533btoi0xn] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text);
}

.hd-attach-chip-link[b-533btoi0xn] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--color-brand-teal);
    text-decoration: none;
}

.hd-attach-chip-link:hover[b-533btoi0xn] {
    text-decoration: underline;
}

.hd-attach-chip-icon[b-533btoi0xn] {
    font-size: 0.75rem;
}

.hd-attach-chip-size[b-533btoi0xn] {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-left: 0.15rem;
}

/* ── Attachments (legacy list, kept for reference) ───────────────────────── */

.hd-attach-list[b-533btoi0xn] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.hd-attach-item[b-533btoi0xn] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hd-attach-link[b-533btoi0xn] {
    color: var(--color-brand-teal);
    text-decoration: none;
}

.hd-attach-link:hover[b-533btoi0xn] {
    text-decoration: underline;
}

.hd-attach-size[b-533btoi0xn] {
    font-size: 0.8125rem;
}

/* ── Muted text ──────────────────────────────────────────────────────────── */

.hd-muted[b-533btoi0xn] {
    color: var(--color-text-muted);
}

/* ── Error ───────────────────────────────────────────────────────────────── */

.hd-error[b-533btoi0xn] {
    padding: 0.5rem 0.75rem;
    background: color-mix(in srgb, var(--color-down) 10%, transparent);
    border: 1px solid var(--color-down);
    border-radius: 5px;
    color: var(--color-down);
    font-family: var(--font-body);
    font-size: 0.875rem;
}

/* ── Spinner variant ─────────────────────────────────────────────────────── */

.hd-spinner--light[b-533btoi0xn] {
    border-color: rgba(255,255,255,0.4);
    border-top-color: #fff;
}

/* ── Priority badges ─────────────────────────────────────────────────────── */

.hd-badge--priority-urgent[b-533btoi0xn] {
    background: color-mix(in srgb, var(--color-down) 12%, transparent);
    border-color: var(--color-down);
    color: var(--color-down);
}

.hd-badge--priority-high[b-533btoi0xn] {
    background: color-mix(in srgb, var(--color-degraded) 12%, transparent);
    border-color: var(--color-degraded);
    color: var(--color-degraded);
}

/* ── Classification layout ──────────────────────────────────────────────── */

.hd-prop--wide[b-533btoi0xn] {
    grid-column: 1 / -1;
}

/* ── Classified attachments ──────────────────────────────────────────────── */

.hd-cattach-section-header[b-533btoi0xn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.hd-cattach-actions[b-533btoi0xn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.hd-cattach-process-btn[b-533btoi0xn] {
    font-size: 0.8125rem;
    padding: 0.2rem 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
}

.hd-cattach-list[b-533btoi0xn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hd-cattach[b-533btoi0xn] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.hd-cattach--evidence[b-533btoi0xn] {
    border-left: 3px solid var(--color-healthy);
}

.hd-cattach--document[b-533btoi0xn] {
    border-left: 3px solid var(--color-brand);
}

.hd-cattach--signature[b-533btoi0xn] {
    border-left: 3px solid var(--color-border);
    opacity: 0.7;
}

.hd-cattach--unknown[b-533btoi0xn] {
    border-left: 3px solid var(--color-degraded);
}

.hd-cattach-header[b-533btoi0xn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.hd-cattach-badge[b-533btoi0xn] {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-family: var(--font-subtitle);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.hd-cattach-badge--evidence[b-533btoi0xn] {
    background: color-mix(in srgb, var(--color-healthy) 15%, transparent);
    color: var(--color-healthy);
}

.hd-cattach-badge--document[b-533btoi0xn] {
    background: color-mix(in srgb, var(--color-brand) 12%, transparent);
    color: var(--color-brand);
}

.hd-cattach-badge--signature[b-533btoi0xn] {
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
}

.hd-cattach-badge--unknown[b-533btoi0xn] {
    background: color-mix(in srgb, var(--color-degraded) 15%, transparent);
    color: var(--color-degraded);
}

.hd-cattach-name[b-533btoi0xn] {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-brand-teal);
    text-decoration: none;
}

a.hd-cattach-name:hover[b-533btoi0xn] {
    text-decoration: underline;
}

span.hd-cattach-name[b-533btoi0xn] {
    color: var(--color-text);
}

.hd-cattach-size[b-533btoi0xn] {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.hd-cattach-ref[b-533btoi0xn] {
    display: inline-block;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-family: var(--font-subtitle);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: color-mix(in srgb, var(--color-brand-teal) 12%, transparent);
    color: var(--color-brand-teal);
}

.hd-cattach-meta[b-533btoi0xn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.hd-cattach-reason[b-533btoi0xn] {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.hd-cattach-override[b-533btoi0xn] {
    font-family: var(--font-body);
    font-size: 0.78rem;
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--color-degraded);
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}

.hd-cattach-override:focus[b-533btoi0xn] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 1px;
}

/* ── Attachment thumbnails ───────────────────────────────────────────────── */

.hd-cattach-thumb-wrap[b-533btoi0xn] {
    width: 80px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.hd-cattach-thumb[b-533btoi0xn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hd-cattach-body[b-533btoi0xn] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
    min-width: 0;
}

.hd-cattach-action[b-533btoi0xn] {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: var(--color-brand-teal);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    margin-left: auto;
    white-space: nowrap;
}

.hd-cattach-action:hover[b-533btoi0xn] {
    text-decoration: underline;
}

.hd-cattach-name-plain[b-533btoi0xn] {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Lightbox ────────────────────────────────────────────────────────────── */

.hd-lightbox-overlay[b-533btoi0xn] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.hd-lightbox-content[b-533btoi0xn] {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--color-surface);
    border-radius: 8px;
    padding: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.hd-lightbox-img[b-533btoi0xn] {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 4px;
}

.hd-lightbox-footer[b-533btoi0xn] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* ── Domain association prompt ──────────────────────────────────────────── */

.hd-domain-prompt[b-533btoi0xn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface, #f8f9fa);
    border: 1px solid var(--color-brand-teal, #0ea5c6);
    border-radius: 6px;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

.hd-domain-prompt-btn[b-533btoi0xn] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.hd-domain-prompt-btn--yes[b-533btoi0xn] {
    background: var(--color-brand, #074684);
    color: #fff;
    border-color: var(--color-brand, #074684);
}

.hd-domain-prompt-btn--yes:hover[b-533btoi0xn] {
    background: #05376a;
}

.hd-domain-prompt-btn--yes:disabled[b-533btoi0xn] {
    opacity: 0.55;
    cursor: not-allowed;
}

.hd-domain-prompt-btn--no[b-533btoi0xn] {
    background: var(--color-surface, #f8f9fa);
    color: var(--color-brand, #074684);
    border-color: var(--color-border, #dee2e6);
}

.hd-domain-prompt-btn--no:hover[b-533btoi0xn] {
    border-color: var(--color-brand-teal, #0ea5c6);
}
/* /Components/Pages/Incidents.razor.rz.scp.css */
/* ─── Loading state ──────────────────────────────────────────── */

.incidents-loading[b-bo5lo332if] {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    margin-top: 1.5rem;
}

/* ─── Filter bar ─────────────────────────────────────────────── */

.incidents-filter-bar[b-bo5lo332if] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.875rem 1rem;
    box-shadow: var(--shadow-card);
    margin-bottom: 1rem;
}

.incidents-filter-group[b-bo5lo332if] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 8rem;
}

.incidents-filter-group--search[b-bo5lo332if] {
    flex: 1 1 12rem;
}

.incidents-filter-label[b-bo5lo332if] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    font-family: var(--font-subtitle);
}

.incidents-filter-input[b-bo5lo332if] {
    font-size: 0.875rem;
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 0.25rem);
    padding: 0.35rem 0.6rem;
    outline: none;
    transition: border-color 0.15s;
}

.incidents-filter-input:focus[b-bo5lo332if] {
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-teal) 20%, transparent);
}

.incidents-filter-clear[b-bo5lo332if] {
    align-self: flex-end;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 0.25rem);
    cursor: pointer;
    transition: color 0.1s, border-color 0.1s, background 0.1s;
    white-space: nowrap;
}

.incidents-filter-clear:hover[b-bo5lo332if] {
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
    background: var(--color-surface-raised);
}

.incidents-filter-clear--hidden[b-bo5lo332if] {
    visibility: hidden;
    pointer-events: none;
}

/* ─── Result summary bar ─────────────────────────────────────── */

.incidents-result-bar[b-bo5lo332if] {
    display: flex;
    align-items: center;
    margin-bottom: 0.625rem;
}

.incidents-result-count[b-bo5lo332if] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.incidents-result-total[b-bo5lo332if] {
    font-weight: 400;
}

/* ─── Table ──────────────────────────────────────────────────── */

.incidents-section[b-bo5lo332if] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.incidents-table[b-bo5lo332if] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.incidents-th[b-bo5lo332if] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    padding: 0.625rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    white-space: nowrap;
}

.incidents-row:not(:last-child)[b-bo5lo332if] {
    border-bottom: 1px solid var(--color-border);
}

.incidents-row--acked[b-bo5lo332if] {
    opacity: 0.5;
}

.incidents-td[b-bo5lo332if] {
    padding: 0.625rem 1rem;
    color: var(--color-text-primary);
    vertical-align: middle;
}

.incidents-td--time[b-bo5lo332if] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    min-width: 10rem;
}

.incidents-td--site[b-bo5lo332if] {
    white-space: nowrap;
}

.incidents-site-link[b-bo5lo332if] {
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
}

.incidents-site-link:hover[b-bo5lo332if] {
    text-decoration: underline;
}

.incidents-td--meta[b-bo5lo332if] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.incidents-client[b-bo5lo332if] {
    font-weight: 500;
}

.incidents-group[b-bo5lo332if] {
    font-weight: 400;
}

.incidents-td--detail[b-bo5lo332if] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.incidents-acked-badge[b-bo5lo332if] {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.incidents-error[b-bo5lo332if] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Cap note ───────────────────────────────────────────────── */

.incidents-cap-note[b-bo5lo332if] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    margin: 0;
}
/* /Components/Pages/InfrastructureDiagnostics.razor.rz.scp.css */
.infra-actions[b-bado9bdk4b] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.infra-error[b-bado9bdk4b] {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--color-down);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-down) 8%, var(--color-surface));
    color: var(--color-down-text);
}

.infra-loading[b-bado9bdk4b] {
    color: var(--color-text-secondary);
}

/* ── Summary ─────────────────────────────────────────────────── */
.infra-summary[b-bado9bdk4b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-unknown);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.infra-summary--ok[b-bado9bdk4b]      { border-left-color: var(--color-healthy); }
.infra-summary--warning[b-bado9bdk4b] { border-left-color: var(--color-degraded); }
.infra-summary--failed[b-bado9bdk4b]  { border-left-color: var(--color-down); }

.infra-summary-text[b-bado9bdk4b] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.infra-summary-meta[b-bado9bdk4b] {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ── Badges + dots (health colours are semantic, not brand) ──── */
.infra-badge[b-bado9bdk4b] {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    background: color-mix(in srgb, var(--color-unknown) 15%, var(--color-surface));
    color: var(--color-text-secondary);
}

.infra-badge--ok[b-bado9bdk4b]      { background: color-mix(in srgb, var(--color-healthy) 15%, var(--color-surface));  color: var(--color-healthy-text); }
.infra-badge--warning[b-bado9bdk4b] { background: color-mix(in srgb, var(--color-degraded) 18%, var(--color-surface)); color: var(--color-degraded-text); }
.infra-badge--failed[b-bado9bdk4b]  { background: color-mix(in srgb, var(--color-down) 15%, var(--color-surface));     color: var(--color-down-text); }

.infra-dot[b-bado9bdk4b] {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    margin-top: 0.4rem;
    flex-shrink: 0;
    background: var(--color-unknown);
}

.infra-dot--ok[b-bado9bdk4b]      { background: var(--color-healthy); }
.infra-dot--warning[b-bado9bdk4b] { background: var(--color-degraded); }
.infra-dot--failed[b-bado9bdk4b]  { background: var(--color-down); }

/* ── Cards ───────────────────────────────────────────────────── */
.infra-grid[b-bado9bdk4b] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
}

.infra-card[b-bado9bdk4b] {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.infra-card-head[b-bado9bdk4b] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.infra-kind[b-bado9bdk4b] {
    font-family: var(--font-subtitle);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-brand-teal);
}

.infra-card-title[b-bado9bdk4b] {
    margin: 0.1rem 0 0;
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.infra-resource[b-bado9bdk4b] {
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.infra-checks[b-bado9bdk4b] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.infra-check[b-bado9bdk4b] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.infra-check-name[b-bado9bdk4b] {
    flex: 0 0 9.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.infra-check-detail[b-bado9bdk4b] {
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.infra-facts[b-bado9bdk4b] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem 1rem;
    margin: 1rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.infra-fact dt[b-bado9bdk4b] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.infra-fact dd[b-bado9bdk4b] {
    margin: 0.1rem 0 0;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.infra-fact--wide[b-bado9bdk4b] {
    grid-column: 1 / -1;
}

.infra-fact .infra-chips[b-bado9bdk4b] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.infra-chip[b-bado9bdk4b] {
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-size: 0.75rem;
    color: var(--color-text-primary);
}

.infra-card-foot[b-bado9bdk4b] {
    margin-top: auto;
    padding-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-align: right;
}
/* /Components/Pages/Integrations.razor.rz.scp.css */
.integration-badge[b-n3oi81d7gw] {
    display: inline-block;
    padding: 0.2rem 0.625rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
}

.integration-badge--connected[b-n3oi81d7gw] {
    background: color-mix(in srgb, var(--color-healthy) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-healthy) 35%, transparent);
    color: var(--color-healthy);
}

.integration-badge--notset[b-n3oi81d7gw] {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.settings-value--empty[b-n3oi81d7gw] {
    color: var(--color-text-muted);
    font-style: italic;
}

.integration-token-mask[b-n3oi81d7gw] {
    font-family: var(--font-body);
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}
/* /Components/Pages/IntegrationsEdit.razor.rz.scp.css */
.int-section-header[b-or8757s3g9] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.375rem;
}

.int-section-header .form-section-title[b-or8757s3g9] {
    margin-bottom: 0;
}

.int-section-label[b-or8757s3g9] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.int-section-desc[b-or8757s3g9] {
    margin-bottom: 1rem;
}

.int-help-link[b-or8757s3g9] {
    color: var(--color-brand-teal);
    text-decoration: none;
}

.int-help-link:hover[b-or8757s3g9] {
    text-decoration: underline;
}

.int-test-row[b-or8757s3g9] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.int-test-ok[b-or8757s3g9] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-healthy);
    font-weight: 600;
}

.int-test-fail[b-or8757s3g9] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-down);
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Login / splash styles are in wwwroot/app.css (global) to avoid CSS bundle caching issues. */
/* /Components/Pages/McpPlayground.razor.rz.scp.css */
/* ─── Error card (preflight states) ──────────────────────────── */

.pg-error-card[b-sp64qrofzc] {
    max-width: 32rem;
    margin: 4rem auto;
    padding: 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-align: center;
}

.pg-error-title[b-sp64qrofzc] {
    font-family: var(--font-title);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.pg-error-text[b-sp64qrofzc] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0 0 1.5rem;
}

.pg-error-actions[b-sp64qrofzc] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

/* ─── Page header ────────────────────────────────────────────── */

.pg-header[b-sp64qrofzc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.pg-header-left[b-sp64qrofzc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pg-header-right[b-sp64qrofzc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pg-back[b-sp64qrofzc] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    text-decoration: none;
}

.pg-back:hover[b-sp64qrofzc] {
    color: var(--color-brand);
}

.pg-title[b-sp64qrofzc] {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-text-primary);
}

.pg-site-name[b-sp64qrofzc] {
    font-family: var(--font-subtitle);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.pg-server-badge[b-sp64qrofzc] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-brand) 25%, transparent);
    border-radius: 999px;
    white-space: nowrap;
}

.pg-server-version[b-sp64qrofzc] {
    font-weight: 400;
    color: var(--color-text-secondary);
}

.pg-token-wrapper[b-sp64qrofzc] {
    position: relative;
}

.pg-token-badge[b-sp64qrofzc] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--color-healthy, #16a34a);
    background: color-mix(in srgb, var(--color-healthy, #16a34a) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-healthy, #16a34a) 35%, transparent);
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s;
}

.pg-token-badge:hover[b-sp64qrofzc] {
    background: color-mix(in srgb, var(--color-healthy, #16a34a) 20%, transparent);
}

.pg-token-badge--expired[b-sp64qrofzc] {
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border-color: var(--color-border);
}

.pg-token-popover[b-sp64qrofzc] {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    z-index: 100;
    width: 28rem;
    max-height: 24rem;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    font-size: 0.75rem;
}

.pg-token-popover-header[b-sp64qrofzc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    border-radius: var(--radius) var(--radius) 0 0;
}

.pg-token-popover-title[b-sp64qrofzc] {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--color-text-primary);
}

.pg-token-popover-close[b-sp64qrofzc] {
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.pg-token-popover-close:hover[b-sp64qrofzc] {
    color: var(--color-text-primary);
}

.pg-token-claim[b-sp64qrofzc] {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem 0.625rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
}

.pg-token-claim:last-child[b-sp64qrofzc] {
    border-bottom: none;
}

.pg-token-claim-key[b-sp64qrofzc] {
    flex-shrink: 0;
    min-width: 8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-size: 0.6875rem;
}

.pg-token-claim-value[b-sp64qrofzc] {
    flex: 1;
    word-break: break-all;
    color: var(--color-text-primary);
}

.pg-refresh-btn[b-sp64qrofzc] {
    font-size: 0.8125rem;
    padding: 0.3rem 0.625rem;
}

.pg-load-error[b-sp64qrofzc] {
    padding: 0.625rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: var(--color-down, #dc2626);
    background: color-mix(in srgb, var(--color-down, #dc2626) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-down, #dc2626) 20%, transparent);
    border-radius: var(--radius);
}

/* ─── Main two-column layout ─────────────────────────────────── */

.pg-layout[b-sp64qrofzc] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1rem;
    min-height: 500px;
}

@media (max-width: 768px) {
    .pg-layout[b-sp64qrofzc] {
        grid-template-columns: 1fr;
    }
}

/* ─── Tool catalog (left) ────────────────────────────────────── */

.pg-catalog[b-sp64qrofzc] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

.pg-catalog-header[b-sp64qrofzc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.75rem 0;
}

.pg-catalog-title[b-sp64qrofzc] {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.pg-catalog-count[b-sp64qrofzc] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    padding: 0.05rem 0.375rem;
    border-radius: 999px;
}

.pg-catalog-search[b-sp64qrofzc] {
    margin: 0.5rem 0.5rem 0.25rem;
    width: calc(100% - 1rem);
    font-size: 0.8125rem;
    padding: 0.375rem 0.5rem;
}

.pg-catalog-loading[b-sp64qrofzc],
.pg-catalog-empty[b-sp64qrofzc] {
    padding: 1rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ─── Tool groups ────────────────────────────────────────────── */

.pg-tool-group[b-sp64qrofzc] {
    border-top: 1px solid var(--color-border);
}

.pg-tool-group:first-of-type[b-sp64qrofzc] {
    border-top: none;
    margin-top: 0.25rem;
}

.pg-tool-group-header[b-sp64qrofzc] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--font-subtitle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border: none;
    cursor: pointer;
    transition: background 0.1s;
}

.pg-tool-group-header:hover[b-sp64qrofzc] {
    background: var(--color-border);
}

.pg-tool-group-arrow[b-sp64qrofzc] {
    font-size: 0.625rem;
    width: 0.75rem;
    text-align: center;
}

.pg-tool-group-name[b-sp64qrofzc] {
    flex: 1;
    text-align: left;
}

.pg-tool-group-count[b-sp64qrofzc] {
    font-size: 0.625rem;
    font-weight: 600;
    background: var(--color-surface);
    padding: 0.05rem 0.3rem;
    border-radius: 999px;
}

/* ─── Tool items ─────────────────────────────────────────────── */

.pg-tool-item[b-sp64qrofzc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.375rem 0.75rem 0.375rem 1.5rem;
    font-size: 0.8125rem;
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    color: var(--color-text-primary);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
}

.pg-tool-item:hover[b-sp64qrofzc] {
    background: var(--color-surface-raised);
}

.pg-tool-item--selected[b-sp64qrofzc] {
    background: color-mix(in srgb, var(--color-brand-teal) 10%, transparent);
    border-left: 2px solid var(--color-brand-teal);
    padding-left: calc(1.5rem - 2px);
}

.pg-tool-name[b-sp64qrofzc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* ─── Read/write badges ──────────────────────────────────────── */

.pg-tool-badge[b-sp64qrofzc] {
    display: inline-block;
    padding: 0.05rem 0.3rem;
    font-size: 0.5625rem;
    font-weight: 700;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 0.375rem;
}

.pg-tool-badge--read[b-sp64qrofzc] {
    color: var(--color-healthy, #16a34a);
    background: color-mix(in srgb, var(--color-healthy, #16a34a) 12%, transparent);
}

.pg-tool-badge--write[b-sp64qrofzc] {
    color: var(--color-degraded, #d97706);
    background: color-mix(in srgb, var(--color-degraded, #d97706) 12%, transparent);
}

/* ─── Workspace (right) ──────────────────────────────────────── */

.pg-workspace[b-sp64qrofzc] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

.pg-workspace-empty[b-sp64qrofzc] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.pg-ws-header[b-sp64qrofzc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.pg-ws-tool-name[b-sp64qrofzc] {
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-primary);
}

.pg-ws-description[b-sp64qrofzc] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin: 0 0 1.25rem;
}

/* ─── Workspace sections ─────────────────────────────────────── */

.pg-ws-section[b-sp64qrofzc] {
    margin-top: 1.25rem;
}

.pg-ws-section-header[b-sp64qrofzc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.625rem;
}

.pg-ws-section-title[b-sp64qrofzc] {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin: 0;
}

.pg-mode-toggle[b-sp64qrofzc] {
    font-size: 0.75rem;
    font-family: var(--font-body);
    color: var(--color-brand-teal);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.pg-mode-toggle:hover[b-sp64qrofzc] {
    text-decoration: underline;
}

.pg-ws-no-args[b-sp64qrofzc] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ─── Form fields ────────────────────────────────────────────── */

.pg-form-fields[b-sp64qrofzc] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pg-form-field[b-sp64qrofzc] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pg-form-label[b-sp64qrofzc] {
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    color: var(--color-text-primary);
}

.pg-form-label--required[b-sp64qrofzc] {
    font-weight: 600;
}

.pg-required-star[b-sp64qrofzc] {
    color: var(--color-down, #dc2626);
    margin-left: 0.125rem;
}

.pg-form-hint[b-sp64qrofzc] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.3;
}

.pg-form-textarea[b-sp64qrofzc] {
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-size: 0.8125rem;
    resize: vertical;
}

.pg-form-check[b-sp64qrofzc] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    cursor: pointer;
}

.pg-form-select[b-sp64qrofzc] {
    font-size: 0.8125rem;
}

/* ─── JSON editor ────────────────────────────────────────────── */

.pg-json-editor[b-sp64qrofzc] {
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 8rem;
}

/* ─── Execute actions ────────────────────────────────────────── */

.pg-ws-actions[b-sp64qrofzc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.pg-execute-btn[b-sp64qrofzc] {
    padding: 0.4375rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.pg-execute-btn--write[b-sp64qrofzc] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: #92400e;
    background: color-mix(in srgb, var(--color-degraded, #f59e0b) 15%, var(--color-surface));
    border: 1px solid var(--color-degraded, #f59e0b);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s;
}

.pg-execute-btn--write:hover:not(:disabled)[b-sp64qrofzc] {
    background: color-mix(in srgb, var(--color-degraded, #f59e0b) 25%, var(--color-surface));
}

.pg-execute-btn--write:disabled[b-sp64qrofzc] {
    opacity: 0.6;
    cursor: not-allowed;
}

.pg-execute-error[b-sp64qrofzc] {
    font-size: 0.8125rem;
    color: var(--color-down, #dc2626);
}

/* ─── Response panel ─────────────────────────────────────────── */

.pg-response-time[b-sp64qrofzc] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
}

.pg-response[b-sp64qrofzc] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.pg-response--success[b-sp64qrofzc] {
    border-color: color-mix(in srgb, var(--color-healthy, #16a34a) 40%, transparent);
}

.pg-response--error[b-sp64qrofzc] {
    border-color: color-mix(in srgb, var(--color-down, #dc2626) 40%, transparent);
}

.pg-response-status[b-sp64qrofzc] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.pg-response--success .pg-response-status[b-sp64qrofzc] {
    background: color-mix(in srgb, var(--color-healthy, #16a34a) 8%, transparent);
    color: var(--color-healthy, #16a34a);
}

.pg-response--error .pg-response-status[b-sp64qrofzc] {
    background: color-mix(in srgb, var(--color-down, #dc2626) 8%, transparent);
    color: var(--color-down, #dc2626);
}

.pg-response-icon[b-sp64qrofzc] {
    font-size: 0.875rem;
}

.pg-response-error-msg[b-sp64qrofzc] {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-down, #dc2626);
    background: color-mix(in srgb, var(--color-down, #dc2626) 4%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--color-down, #dc2626) 15%, transparent);
}

.pg-response-body[b-sp64qrofzc] {
    margin: 0;
    padding: 0.75rem;
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    background: var(--color-surface-raised);
    border-top: 1px solid var(--color-border);
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ─── History bar ────────────────────────────────────────────── */

.pg-history[b-sp64qrofzc] {
    margin-top: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.pg-history-toggle[b-sp64qrofzc] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--font-subtitle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.pg-history-toggle:hover[b-sp64qrofzc] {
    color: var(--color-text-primary);
}

.pg-history-list[b-sp64qrofzc] {
    display: flex;
    gap: 0.375rem;
    padding: 0 0.75rem 0.625rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.pg-history-entry[b-sp64qrofzc] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.1s;
    flex-shrink: 0;
}

.pg-history-entry:hover[b-sp64qrofzc] {
    border-color: var(--color-brand-teal);
}

.pg-history-entry--error[b-sp64qrofzc] {
    border-color: color-mix(in srgb, var(--color-down, #dc2626) 30%, transparent);
}

.pg-history-icon[b-sp64qrofzc] {
    font-size: 0.6875rem;
}

.pg-history-entry:not(.pg-history-entry--error) .pg-history-icon[b-sp64qrofzc] {
    color: var(--color-healthy, #16a34a);
}

.pg-history-entry--error .pg-history-icon[b-sp64qrofzc] {
    color: var(--color-down, #dc2626);
}

.pg-history-name[b-sp64qrofzc] {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-history-time[b-sp64qrofzc] {
    font-size: 0.625rem;
    color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════ */
/* ─── Tab bar ────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════ */

.pg-tab-bar[b-sp64qrofzc] {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0;
}

.pg-tab[b-sp64qrofzc] {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font-subtitle);
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}

.pg-tab:hover[b-sp64qrofzc] {
    color: var(--color-text-primary);
}

.pg-tab--active[b-sp64qrofzc] {
    color: var(--color-brand-teal);
    border-bottom-color: var(--color-brand-teal);
}

/* ═══════════════════════════════════════════════════════════════ */
/* ─── AI Chat ────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════ */

.pg-chat[b-sp64qrofzc] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    height: calc(100vh - 240px);
    min-height: 400px;
}

.pg-chat-toolbar[b-sp64qrofzc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    border-radius: var(--radius) var(--radius) 0 0;
}

.pg-chat-mode-select[b-sp64qrofzc] {
    max-width: 220px;
    font-size: 0.8125rem;
    padding: 0.3rem 0.5rem;
}

.pg-chat-model-select[b-sp64qrofzc] {
    flex: 1;
    max-width: 260px;
    font-size: 0.8125rem;
    padding: 0.3rem 0.5rem;
}

.pg-chat-category-select[b-sp64qrofzc] {
    flex: 1;
    max-width: 260px;
    font-size: 0.8125rem;
    padding: 0.3rem 0.5rem;
}

.pg-chat-category-info[b-sp64qrofzc] {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
}

.pg-view-mode[b-sp64qrofzc] {
    display: inline-flex;
    margin-left: auto;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
}

.pg-view-mode-btn[b-sp64qrofzc] {
    padding: 0.2rem 0.625rem;
    font-size: 0.6875rem;
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: none;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
}

.pg-view-mode-btn + .pg-view-mode-btn[b-sp64qrofzc] {
    border-left: 1px solid var(--color-border);
}

.pg-view-mode-btn:hover[b-sp64qrofzc] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.pg-view-mode-btn--active[b-sp64qrofzc] {
    background: var(--color-brand);
    color: #fff;
}

.pg-view-mode-btn--active:hover[b-sp64qrofzc] {
    background: var(--color-brand);
    color: #fff;
}

/* ─── Tool selection debug panel ─────────────────────────────── */

.pg-tool-selection[b-sp64qrofzc] {
    margin: 0.25rem 1rem;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.pg-tool-selection-header[b-sp64qrofzc] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.3rem 0.5rem;
    border: none;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    text-align: left;
}

.pg-tool-selection-header:hover[b-sp64qrofzc] {
    color: var(--color-text);
}

.pg-tool-selection-icon[b-sp64qrofzc] {
    font-size: 0.8125rem;
}

.pg-tool-selection-text[b-sp64qrofzc] {
    flex: 1;
}

.pg-tool-selection-toggle[b-sp64qrofzc] {
    font-size: 0.625rem;
}

.pg-tool-selection-body[b-sp64qrofzc] {
    padding: 0.375rem 0.5rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.pg-tool-selection-chip[b-sp64qrofzc] {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    font-family: var(--font-body);
}

/* ─── Chat messages ──────────────────────────────────────────── */

.pg-chat-messages[b-sp64qrofzc] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pg-chat-bubble[b-sp64qrofzc] {
    max-width: 85%;
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.6;
    word-break: break-word;
    flex-shrink: 0;
}

.pg-chat-bubble--user[b-sp64qrofzc] {
    align-self: flex-end;
    background: var(--color-brand);
    color: #fff;
}

.pg-chat-bubble--assistant[b-sp64qrofzc] {
    align-self: flex-start;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

.pg-chat-bubble--streaming[b-sp64qrofzc] {
    opacity: 0.85;
}

.pg-chat-bubble--error[b-sp64qrofzc] {
    align-self: flex-start;
    background: color-mix(in srgb, var(--color-down, #dc2626) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-down, #dc2626) 25%, transparent);
    color: var(--color-down, #dc2626);
    font-size: 0.8125rem;
}

.pg-chat-files[b-sp64qrofzc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.375rem;
}

.pg-chat-file-chip[b-sp64qrofzc] {
    font-size: 0.6875rem;
    padding: 0.1rem 0.375rem;
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
}

/* ─── Chat status / typing indicator ─────────────────────────── */

.pg-chat-status[b-sp64qrofzc] {
    align-self: flex-start;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    padding: 0.375rem 0;
}

.pg-typing-indicator[b-sp64qrofzc] {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.pg-typing-indicator span[b-sp64qrofzc] {
    width: 6px;
    height: 6px;
    background: var(--color-text-secondary);
    border-radius: 50%;
    animation: pg-typing-bounce-b-sp64qrofzc 1.2s infinite ease-in-out;
}

.pg-typing-indicator span:nth-child(2)[b-sp64qrofzc] { animation-delay: 0.15s; }
.pg-typing-indicator span:nth-child(3)[b-sp64qrofzc] { animation-delay: 0.3s; }

@keyframes pg-typing-bounce-b-sp64qrofzc {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-4px); opacity: 1; }
}

/* ─── Usage badges ───────────────────────────────────────────── */

.pg-chat-usage[b-sp64qrofzc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--color-border);
}

.pg-chat-usage-badge[b-sp64qrofzc] {
    display: inline-flex;
    padding: 0.1rem 0.375rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 500;
}

.pg-chat-usage-badge--in[b-sp64qrofzc] {
    color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 8%, transparent);
}

.pg-chat-usage-badge--out[b-sp64qrofzc] {
    color: var(--color-brand-teal);
    background: color-mix(in srgb, var(--color-brand-teal) 10%, transparent);
}

.pg-chat-usage-badge--cost[b-sp64qrofzc] {
    color: var(--color-healthy, #16a34a);
    background: color-mix(in srgb, var(--color-healthy, #16a34a) 10%, transparent);
}

/* ─── Tool call cards ────────────────────────────────────────── */

.pg-tool-call[b-sp64qrofzc] {
    align-self: stretch;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    font-size: 0.8125rem;
}

.pg-tool-call--success[b-sp64qrofzc] {
    border-left: 3px solid var(--color-healthy, #16a34a);
}

.pg-tool-call--error[b-sp64qrofzc] {
    border-left: 3px solid var(--color-down, #dc2626);
}

.pg-tool-call-header[b-sp64qrofzc] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.4rem 0.625rem;
    min-height: 2rem;
    font-size: 0.8125rem;
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}

.pg-tool-call-header:hover[b-sp64qrofzc] {
    background: var(--color-border);
}

.pg-tool-call-icon[b-sp64qrofzc] {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.pg-tool-call--success .pg-tool-call-icon[b-sp64qrofzc] {
    color: var(--color-healthy, #16a34a);
}

.pg-tool-call--error .pg-tool-call-icon[b-sp64qrofzc] {
    color: var(--color-down, #dc2626);
}

.pg-tool-call-name[b-sp64qrofzc] {
    flex: 1;
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-weight: 600;
}

.pg-tool-call-duration[b-sp64qrofzc] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
}

.pg-tool-call-toggle[b-sp64qrofzc] {
    font-size: 0.625rem;
    color: var(--color-text-secondary);
}

.pg-tool-call-body[b-sp64qrofzc] {
    border-top: 1px solid var(--color-border);
}

.pg-tool-call-section[b-sp64qrofzc] {
    padding: 0.5rem 0.625rem;
}

.pg-tool-call-section + .pg-tool-call-section[b-sp64qrofzc] {
    border-top: 1px solid var(--color-border);
}

.pg-tool-call-label[b-sp64qrofzc] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: var(--font-subtitle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
}

.pg-tool-call-label--error[b-sp64qrofzc] {
    color: var(--color-down, #dc2626);
}

.pg-tool-call-pre[b-sp64qrofzc] {
    margin: 0;
    padding: 0.5rem;
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    background: var(--color-surface);
    border-radius: 4px;
    overflow: auto;
    max-height: 300px;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.pg-tool-call-size[b-sp64qrofzc] {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    margin-left: auto;
}

.pg-tool-call-label--sent[b-sp64qrofzc] {
    color: var(--color-brand-teal);
}

.pg-tool-call-expand-btn[b-sp64qrofzc] {
    display: inline-block;
    padding: 0.25rem 0;
    border: none;
    background: none;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    font-family: var(--font-body);
}

.pg-tool-call-expand-btn:hover[b-sp64qrofzc] {
    color: var(--color-text);
}

.pg-tool-call-pre--error[b-sp64qrofzc] {
    color: var(--color-down, #dc2626);
    background: color-mix(in srgb, var(--color-down, #dc2626) 4%, var(--color-surface));
}

/* ─── Chat input area ────────────────────────────────────────── */

.pg-chat-totals[b-sp64qrofzc] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.75rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    font-size: 0.75rem;
}

.pg-chat-totals-label[b-sp64qrofzc] {
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pg-chat-input-area[b-sp64qrofzc] {
    border-top: 1px solid var(--color-border);
    padding: 0.625rem 0.75rem;
    background: var(--color-surface-raised);
    border-radius: 0 0 var(--radius) var(--radius);
}

.pg-file-chips[b-sp64qrofzc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.pg-file-chip[b-sp64qrofzc] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    background: color-mix(in srgb, var(--color-brand-teal) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-brand-teal) 30%, transparent);
    border-radius: 999px;
    color: var(--color-text-primary);
}

.pg-file-chip-remove[b-sp64qrofzc] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    padding: 0;
    line-height: 1;
}

.pg-file-chip-remove:hover[b-sp64qrofzc] {
    color: var(--color-down, #dc2626);
}

.pg-chat-input-row[b-sp64qrofzc] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.pg-file-upload-btn[b-sp64qrofzc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.pg-file-upload-btn:hover[b-sp64qrofzc] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand-teal);
}

.pg-chat-input[b-sp64qrofzc] {
    flex: 1;
    resize: none;
    font-size: 0.875rem;
    line-height: 1.5;
    min-height: 2rem;
}

.pg-chat-send-btn[b-sp64qrofzc] {
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* ─── Model badge in usage row ──────────────────────────────── */

.pg-chat-usage-badge--model[b-sp64qrofzc] {
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-size: 0.625rem;
    cursor: help;
}

/* ─── Request debug disclosure ──────────────────────────────── */

.pg-request-debug[b-sp64qrofzc] {
    align-self: stretch;
    flex-shrink: 0;
    margin: 0.125rem 1rem;
    border-radius: 6px;
    border: 1px dashed color-mix(in srgb, var(--color-brand-teal) 40%, transparent);
    overflow: hidden;
    font-size: 0.75rem;
}

.pg-request-debug-header[b-sp64qrofzc] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.3rem 0.5rem;
    border: none;
    background: color-mix(in srgb, var(--color-brand-teal) 4%, transparent);
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    font-family: var(--font-body);
    text-align: left;
    transition: background 0.1s;
}

.pg-request-debug-header:hover[b-sp64qrofzc] {
    background: color-mix(in srgb, var(--color-brand-teal) 8%, transparent);
    color: var(--color-text);
}

.pg-request-debug-icon[b-sp64qrofzc] {
    font-size: 0.8125rem;
    color: var(--color-brand-teal);
}

.pg-request-debug-label[b-sp64qrofzc] {
    font-weight: 600;
    color: var(--color-text-secondary);
}

.pg-request-debug-model[b-sp64qrofzc] {
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-size: 0.6875rem;
    color: var(--color-brand-teal);
}

.pg-request-debug-meta[b-sp64qrofzc] {
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.pg-request-debug-tokens[b-sp64qrofzc] {
    margin-left: auto;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.pg-request-debug-body[b-sp64qrofzc] {
    padding: 0.5rem 0.625rem;
    border-top: 1px dashed color-mix(in srgb, var(--color-brand-teal) 30%, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pg-debug-message[b-sp64qrofzc] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-bottom: 0.25rem;
}

.pg-debug-message-role[b-sp64qrofzc] {
    display: inline-block;
    padding: 0.05rem 0.375rem;
    border-radius: 3px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    width: fit-content;
}

.pg-debug-message-role--user[b-sp64qrofzc] {
    background: color-mix(in srgb, var(--color-brand) 12%, transparent);
    color: var(--color-brand);
}

.pg-debug-message-role--assistant[b-sp64qrofzc] {
    background: color-mix(in srgb, var(--color-brand-teal) 12%, transparent);
    color: var(--color-brand-teal);
}

.pg-debug-section[b-sp64qrofzc] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pg-debug-section-label[b-sp64qrofzc] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    padding-bottom: 0.125rem;
    border-bottom: 1px solid var(--color-border);
}

.pg-debug-message-header[b-sp64qrofzc] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.pg-debug-message-size[b-sp64qrofzc] {
    font-size: 0.625rem;
    color: var(--color-text-muted);
}

.pg-debug-message-expand[b-sp64qrofzc] {
    font-size: 0.625rem;
    color: var(--color-brand-teal);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: var(--font-body);
}

.pg-debug-message-expand:hover[b-sp64qrofzc] {
    text-decoration: underline;
}

.pg-debug-tool-chips[b-sp64qrofzc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.375rem;
}

/* ═══════════════════════════════════════════════════════════════ */
/* ─── Action discovery picker (gateway tools) ───────────────── */
/* ═══════════════════════════════════════════════════════════════ */

.pg-action-discovery-status[b-sp64qrofzc] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    padding: 0.5rem 0;
}

.pg-action-filter[b-sp64qrofzc] {
    font-size: 0.8125rem;
    padding: 0.375rem 0.5rem;
    margin-bottom: 0.375rem;
}

.pg-action-list[b-sp64qrofzc] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.25rem;
}

.pg-action-item[b-sp64qrofzc] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s, border-color 0.1s;
}

.pg-action-item:hover[b-sp64qrofzc] {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
}

.pg-action-item--selected[b-sp64qrofzc] {
    background: color-mix(in srgb, var(--color-brand-teal) 10%, transparent);
    border-color: var(--color-brand-teal);
}

.pg-action-name[b-sp64qrofzc] {
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.pg-action-desc[b-sp64qrofzc] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.pg-action-has-params[b-sp64qrofzc] {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-brand-teal);
    background: color-mix(in srgb, var(--color-brand-teal) 10%, transparent);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.pg-action-selected-badge[b-sp64qrofzc] {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.pg-action-selected-badge strong[b-sp64qrofzc] {
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    color: var(--color-brand-teal);
}

.pg-action-error[b-sp64qrofzc] {
    color: var(--color-down, #dc2626);
}

/* ─── Action parameter form fields ──────────────────────────── */

.pg-action-params[b-sp64qrofzc] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
}

.pg-action-param-field[b-sp64qrofzc] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.pg-action-param-type[b-sp64qrofzc] {
    font-size: 0.625rem;
    font-weight: 400;
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    color: var(--color-brand-teal);
    margin-left: 0.375rem;
}
/* /Components/Pages/MyTickets.razor.rz.scp.css */
/* P2-4 My Tickets inbox. Brand tokens only (CLAUDE.md §12). */

.mt-controls[b-5x3vkpw29y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.mt-chips[b-5x3vkpw29y] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.mt-chip[b-5x3vkpw29y] {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-brand);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.mt-chip:hover[b-5x3vkpw29y] {
    border-color: var(--color-brand-teal);
}

.mt-chip--active[b-5x3vkpw29y] {
    color: var(--color-surface);
    background: var(--color-brand);
    border-color: var(--color-brand);
}

.mt-status[b-5x3vkpw29y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mt-status-label[b-5x3vkpw29y] {
    font-family: var(--font-subtitle);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.mt-select[b-5x3vkpw29y] {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
}

.mt-select:focus[b-5x3vkpw29y] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.18);
}

.mt-count[b-5x3vkpw29y] {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}

.mt-table[b-5x3vkpw29y] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 0.86rem;
}

.mt-table th[b-5x3vkpw29y] {
    text-align: left;
    font-family: var(--font-subtitle);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
    padding: 0.5rem 0.6rem;
}

.mt-table td[b-5x3vkpw29y] {
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    padding: 0.55rem 0.6rem;
    vertical-align: top;
}

.mt-row[b-5x3vkpw29y] {
    cursor: pointer;
    transition: background 0.12s ease;
}

.mt-row:hover[b-5x3vkpw29y],
.mt-row:focus-visible[b-5x3vkpw29y] {
    background: var(--color-surface-raised);
    outline: none;
}

.mt-id[b-5x3vkpw29y],
.mt-date[b-5x3vkpw29y] {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.mt-badge[b-5x3vkpw29y] {
    display: inline-block;
    font-size: 0.74rem;
    color: var(--color-brand);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

.mt-error[b-5x3vkpw29y] {
    font-family: var(--font-body);
    color: var(--color-down-text);
}
/* /Components/Pages/NewTicket.razor.rz.scp.css */
/* New Ticket page. Brand tokens only (CLAUDE.md §12) — no hardcoded hex/fonts. */

.nt-grid[b-s7y0pqw78q] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 60rem) {
    .nt-grid[b-s7y0pqw78q] { grid-template-columns: minmax(0, 1fr); }
}

.nt-main[b-s7y0pqw78q], .nt-side[b-s7y0pqw78q] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

/* ── Fields ─────────────────────────────────────────────────────────────── */
.nt-field[b-s7y0pqw78q] { display: flex; flex-direction: column; gap: 0.35rem; }
.nt-field + .nt-field[b-s7y0pqw78q] { margin-top: 0.85rem; }

.nt-field-row[b-s7y0pqw78q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 40rem) { .nt-field-row[b-s7y0pqw78q] { grid-template-columns: 1fr; } }

.nt-label[b-s7y0pqw78q] {
    font-family: var(--font-subtitle);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.nt-req[b-s7y0pqw78q] { color: var(--color-down); }

.nt-input[b-s7y0pqw78q] {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nt-input:focus[b-s7y0pqw78q] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.18);
}
.nt-input:disabled[b-s7y0pqw78q] { background: var(--color-surface-raised); color: var(--color-text-secondary); }
.nt-textarea[b-s7y0pqw78q] { resize: vertical; min-height: 8rem; }

/* ── Rich-text editor (Quill) ───────────────────────────────────────────── */
.nt-editor[b-s7y0pqw78q]  .ql-toolbar {
    border: 1px solid var(--color-border);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: var(--color-surface-raised);
}
.nt-editor[b-s7y0pqw78q]  .ql-container {
    border: 1px solid var(--color-border);
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-primary);
}
.nt-editor[b-s7y0pqw78q]  .ql-editor { min-height: 9rem; }
.nt-editor[b-s7y0pqw78q]  .ql-editor img { max-width: 100%; border-radius: 6px; }
.nt-editor-hint[b-s7y0pqw78q] {
    display: block;
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    margin-top: 0.35rem;
}

/* ── On-behalf-of + customer history ────────────────────────────────────── */
.nt-onbehalf[b-s7y0pqw78q] {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    margin: 0.75rem 0 0;
}
.nt-history[b-s7y0pqw78q] { margin-top: 0.85rem; display: flex; flex-direction: column; gap: 0.3rem; }
.nt-history-title[b-s7y0pqw78q] {
    font-family: var(--font-subtitle);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}
.nt-history-item[b-s7y0pqw78q] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-decoration: none;
    background: var(--color-surface);
    transition: border-color 0.12s ease;
}
.nt-history-item:hover[b-s7y0pqw78q] { border-color: var(--color-brand-teal); }
.nt-history-subject[b-s7y0pqw78q] {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nt-history-badge[b-s7y0pqw78q] {
    font-size: 0.7rem;
    color: var(--color-brand);
    background: var(--color-surface-raised);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
}
.nt-history-date[b-s7y0pqw78q] { font-size: 0.72rem; color: var(--color-text-secondary); white-space: nowrap; }

/* ── Suggested runbooks ─────────────────────────────────────────────────── */
.nt-skill[b-s7y0pqw78q] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
}
.nt-skill + .nt-skill[b-s7y0pqw78q] { margin-top: 0.4rem; }
.nt-skill--ai[b-s7y0pqw78q] { border-color: var(--color-brand-teal); background: rgba(14, 165, 198, 0.06); }
.nt-skill-name[b-s7y0pqw78q] { font-family: var(--font-body); font-size: 0.84rem; color: var(--color-text-primary); }
.nt-skill-when[b-s7y0pqw78q] {
    font-family: var(--font-body);
    font-size: 0.74rem;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── Drop zone ──────────────────────────────────────────────────────────── */
.nt-drop[b-s7y0pqw78q] {
    position: relative;
    border: 1.5px dashed var(--color-border);
    border-radius: 10px;
    background: var(--color-surface-raised);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.nt-drop:hover[b-s7y0pqw78q], .nt-drop--over[b-s7y0pqw78q] { border-color: var(--color-brand-teal); }

.nt-drop-input[b-s7y0pqw78q] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.nt-drop-inner[b-s7y0pqw78q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1.5rem 1rem;
    text-align: center;
    pointer-events: none;
    font-family: var(--font-body);
}
.nt-drop-icon[b-s7y0pqw78q] { font-size: 1.4rem; color: var(--color-brand-teal); }
.nt-drop-text[b-s7y0pqw78q] { font-size: 0.9rem; color: var(--color-text-primary); }
.nt-drop-hint[b-s7y0pqw78q] { font-size: 0.74rem; color: var(--color-text-secondary); }

/* ── Attachment previews ────────────────────────────────────────────────── */
.nt-previews[b-s7y0pqw78q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.75rem;
    margin-top: 0.85rem;
}
.nt-preview[b-s7y0pqw78q] {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-surface);
}
.nt-thumb[b-s7y0pqw78q] {
    display: block;
    width: 100%;
    height: 6rem;
    object-fit: cover;
    background: var(--color-surface-raised);
}
.nt-fileicon[b-s7y0pqw78q] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6rem;
    font-family: var(--font-subtitle);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: var(--color-brand);
    background: var(--color-surface-raised);
}
.nt-preview-meta[b-s7y0pqw78q] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0.5rem;
}
.nt-preview-name[b-s7y0pqw78q] {
    font-family: var(--font-body);
    font-size: 0.76rem;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nt-preview-size[b-s7y0pqw78q] { font-size: 0.7rem; color: var(--color-text-secondary); }
.nt-preview-remove[b-s7y0pqw78q] {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    width: 1.4rem;
    height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.65);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.nt-preview-remove:hover[b-s7y0pqw78q] { background: var(--color-down); }
.nt-total[b-s7y0pqw78q] { font-family: var(--font-body); font-size: 0.76rem; color: var(--color-text-secondary); margin-top: 0.6rem; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.nt-side-head[b-s7y0pqw78q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.nt-classify-btn[b-s7y0pqw78q] { white-space: nowrap; }
.nt-hint[b-s7y0pqw78q] { font-size: 0.78rem; margin: 0.25rem 0 0; }

.nt-chips[b-s7y0pqw78q] { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.nt-chip[b-s7y0pqw78q] {
    font-family: var(--font-body);
    font-size: 0.74rem;
    color: var(--color-brand);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.12rem 0.6rem;
}
.nt-chip--warn[b-s7y0pqw78q] {
    color: var(--color-down-text);
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.4);
}
.nt-chip--crit[b-s7y0pqw78q] {
    color: #fff;
    background: var(--color-down);
    border-color: var(--color-down);
}
.nt-summary[b-s7y0pqw78q] {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-text-primary);
    margin: 0.6rem 0 0;
}
.nt-keywords[b-s7y0pqw78q] { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.nt-kw[b-s7y0pqw78q] {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border-radius: 4px;
    padding: 0.08rem 0.4rem;
}

/* ── Routing ────────────────────────────────────────────────────────────── */
.nt-routing[b-s7y0pqw78q] { display: flex; flex-direction: column; gap: 0.5rem; }
.nt-radio[b-s7y0pqw78q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.86rem;
    color: var(--color-text-primary);
    cursor: pointer;
}
.nt-routing-sub[b-s7y0pqw78q] { margin-left: 1.5rem; width: calc(100% - 1.5rem); }

/* ── Submit ─────────────────────────────────────────────────────────────── */
.nt-submit-bar[b-s7y0pqw78q] { position: sticky; bottom: 1rem; }
.nt-submit[b-s7y0pqw78q] { width: 100%; }
.nt-error[b-s7y0pqw78q] {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-down-text);
    margin: 0 0 0.6rem;
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.settings-section[b-eaqs8o449x] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-top: 1rem;
}

.settings-section-title[b-eaqs8o449x] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin: 0;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.settings-grid[b-eaqs8o449x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
}

.settings-field[b-eaqs8o449x] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.settings-field:last-child[b-eaqs8o449x],
.settings-field:nth-last-child(2):nth-child(odd)[b-eaqs8o449x] {
    border-bottom: none;
}

.settings-label[b-eaqs8o449x] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin: 0 0 0.3rem;
}

.settings-value[b-eaqs8o449x] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* ─── AWS restart banner ──────────────────────────────────────── */

.settings-aws-restart-banner[b-eaqs8o449x] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    color: #78350f;
    margin-bottom: 0.25rem;
}

.settings-aws-restart-banner .form-save-success-dismiss[b-eaqs8o449x] {
    color: #78350f;
}

.btn-restart[b-eaqs8o449x] {
    margin-left: auto;
    padding: 0.3rem 0.75rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--radius);
    border: 1px solid #b45309;
    background: #b45309;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-restart:hover:not(:disabled)[b-eaqs8o449x] {
    background: #92400e;
    border-color: #92400e;
}

.btn-restart:disabled[b-eaqs8o449x] {
    opacity: 0.65;
    cursor: default;
}

/* ─── Settings section header with inline edit button ─────────── */

.settings-section-header[b-eaqs8o449x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.settings-section-title--inline[b-eaqs8o449x] {
    border-bottom: none;
    padding-left: 0;
    padding-right: 0;
}

.settings-section-edit[b-eaqs8o449x] {
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
}

/* ─── AWS configuration section ──────────────────────────────── */

.settings-aws-badge[b-eaqs8o449x] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: var(--font-body);
}

.settings-aws-badge--active[b-eaqs8o449x] {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.settings-aws-badge--inactive[b-eaqs8o449x] {
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.settings-aws-badge--auto[b-eaqs8o449x] {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.settings-aws-badge--profile[b-eaqs8o449x] {
    background: #fefce8;
    color: #713f12;
    border: 1px solid #fde68a;
}

.settings-aws-region-note[b-eaqs8o449x] {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.settings-aws-note[b-eaqs8o449x] {
    padding: 0.75rem 1.25rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    border-top: 1px solid var(--color-border);
}

.settings-aws-note code[b-eaqs8o449x] {
    font-size: 0.75rem;
    background: var(--color-surface-raised);
    padding: 0.1rem 0.3rem;
    border-radius: 0.2rem;
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

/* ─── Danger zone section ─────────────────────────────────────── */

.danger-zone[b-eaqs8o449x] {
    border-color: #fca5a5;
    margin-top: 2rem;
}

.danger-zone-title[b-eaqs8o449x] {
    color: #991b1b;
    border-bottom-color: #fca5a5;
    background: #fff5f5;
}

/* Done confirmation banner */
.danger-done-banner[b-eaqs8o449x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
    background: #f0fdf4;
    border-bottom: 1px solid #86efac;
    font-size: 0.8125rem;
    color: #166534;
}

.danger-done-dismiss[b-eaqs8o449x] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    color: #166534;
    opacity: 0.6;
}

.danger-done-dismiss:hover[b-eaqs8o449x] { opacity: 1; }

/* Action row */
.danger-action[b-eaqs8o449x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #fee2e2;
    flex-wrap: wrap;
}

.danger-action--last[b-eaqs8o449x] {
    border-bottom: none;
}

.danger-action-info[b-eaqs8o449x] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 18rem;
}

.danger-action-name[b-eaqs8o449x] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.danger-action-desc[b-eaqs8o449x] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.danger-action-controls[b-eaqs8o449x] {
    flex-shrink: 0;
}

/* Trigger button */
.btn-danger[b-eaqs8o449x] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #991b1b;
    background: transparent;
    border: 1px solid #fca5a5;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
    font-family: var(--font-body);
    white-space: nowrap;
}

.btn-danger:hover[b-eaqs8o449x] {
    background: #fff5f5;
    border-color: #f87171;
}

/* Inline confirmation panel */
.danger-confirm-panel[b-eaqs8o449x] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.danger-confirm-warn[b-eaqs8o449x] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #92400e;
}

.btn-danger-confirm[b-eaqs8o449x] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    background: #dc2626;
    border: 1px solid #b91c1c;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.1s;
    font-family: var(--font-body);
    white-space: nowrap;
}

.btn-danger-confirm:hover:not(:disabled)[b-eaqs8o449x] { background: #b91c1c; }
.btn-danger-confirm:disabled[b-eaqs8o449x] { opacity: 0.6; cursor: not-allowed; }

.btn-danger-cancel[b-eaqs8o449x] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    font-family: var(--font-body);
    white-space: nowrap;
}

.btn-danger-cancel:hover:not(:disabled)[b-eaqs8o449x] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.btn-danger-cancel:disabled[b-eaqs8o449x] { opacity: 0.6; cursor: not-allowed; }
/* /Components/Pages/SettingsEdit.razor.rz.scp.css */
/* ─── Form sections ──────────────────────────────────────────── */

.form-section[b-yehha207ep] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.form-section-title[b-yehha207ep] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin: 0;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

/* ─── Form grid ──────────────────────────────────────────────── */

.form-grid[b-yehha207ep] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 1.25rem;
}

.form-field[b-yehha207ep] {
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--color-border);
    padding-right: 1.5rem;
}

.form-field:nth-child(even)[b-yehha207ep] {
    padding-right: 0;
    padding-left: 1.5rem;
    border-left: 1px solid var(--color-border);
}

.form-field:last-child[b-yehha207ep],
.form-field:nth-last-child(2):nth-child(odd)[b-yehha207ep] {
    border-bottom: none;
}

/* ─── Labels and hints ───────────────────────────────────────── */

.form-label[b-yehha207ep] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin-bottom: 0.375rem;
}

.form-required[b-yehha207ep] {
    color: #dc2626;
    font-size: 0.75rem;
}

.form-hint[b-yehha207ep] {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

/* ─── Inputs ─────────────────────────────────────────────────── */

.form-input[b-yehha207ep] {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    padding: 0.5rem 0.75rem;
    outline: none;
    transition: border-color 0.1s, box-shadow 0.1s;
}

.form-input:focus[b-yehha207ep] {
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.form-input--error[b-yehha207ep] {
    border-color: #dc2626;
}

.form-input--error:focus[b-yehha207ep] {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* ─── Validation error ───────────────────────────────────────── */

.form-error[b-yehha207ep] {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: #dc2626;
    margin-top: 0.3rem;
}

/* ─── Save error banner ──────────────────────────────────────── */

.form-save-error[b-yehha207ep] {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: var(--radius);
    color: #991b1b;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

/* ─── Unsaved changes leave warning ──────────────────────────── */

.form-leave-warning[b-yehha207ep] {
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: var(--radius);
    color: #1e3a5f;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.875rem 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.form-leave-actions[b-yehha207ep] {
    display: flex;
    gap: 0.625rem;
    flex-shrink: 0;
}

/* ─── Form actions bar ───────────────────────────────────────── */

.form-actions[b-yehha207ep] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 2rem;
}
/* /Components/Pages/SiteDetail.razor.rz.scp.css */
/* ─── Token badge ────────────────────────────────────────────── */

.token-badge[b-4qa80ggenq] {
    display: inline-block;
    padding: 0.125rem 0.4rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
}

.token-badge--active[b-4qa80ggenq] {
    color: var(--color-healthy, #16a34a);
    background: color-mix(in srgb, var(--color-healthy, #16a34a) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-healthy, #16a34a) 35%, transparent);
}

.token-badge--expired[b-4qa80ggenq] {
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
}

/* ─── Actions dropdown ───────────────────────────────────────── */

.actions-menu[b-4qa80ggenq] {
    position: relative;
    display: inline-block;
}

.actions-menu-btn[b-4qa80ggenq] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4375rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    cursor: pointer;
    transition: color 0.1s, border-color 0.1s, background 0.1s;
    white-space: nowrap;
}

.actions-menu-btn:hover[b-4qa80ggenq] {
    color: var(--color-text-primary);
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

.actions-menu-dropdown[b-4qa80ggenq] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 100;
    min-width: 11rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 0.25rem 0;
}

.actions-menu-item[b-4qa80ggenq] {
    display: block;
    width: 100%;
    padding: 0.4375rem 0.875rem;
    font-size: 0.875rem;
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
}

.actions-menu-item:hover[b-4qa80ggenq] {
    background: var(--color-surface-raised);
}

.actions-menu-item--danger[b-4qa80ggenq] {
    color: var(--color-down, #dc2626);
}

.actions-menu-item--danger:hover[b-4qa80ggenq] {
    background: color-mix(in srgb, var(--color-down, #dc2626) 8%, transparent);
}

/* ─── Detail header (name + status badge + token badge) ─────── */

.detail-header[b-4qa80ggenq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

/* ─── Top bar: back link + action ───────────────────────────── */
.detail-top-bar[b-4qa80ggenq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

/* ─── Action button group (Edit + Remove) ────────────────────── */
.detail-actions[b-4qa80ggenq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ─── Ping button ────────────────────────────────────────────── */
.btn-ping[b-4qa80ggenq] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
    white-space: nowrap;
}

.btn-ping:hover:not(:disabled)[b-4qa80ggenq] {
    background: var(--color-surface-raised);
    border-color: var(--color-text-secondary);
}

.btn-ping:disabled[b-4qa80ggenq] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── Ping result banner ─────────────────────────────────────── */
.ping-result[b-4qa80ggenq] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    border-radius: var(--radius);
    border: 1px solid;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.ping-result--healthy[b-4qa80ggenq] {
    background: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}

.ping-result--degraded[b-4qa80ggenq] {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #92400e;
}

.ping-result--down[b-4qa80ggenq] {
    background: #fff5f5;
    border-color: #fca5a5;
    color: #991b1b;
}

.ping-result-icon[b-4qa80ggenq] {
    font-size: 1rem;
    flex-shrink: 0;
}

.ping-result-text[b-4qa80ggenq] {
    flex: 1 1 auto;
    font-weight: 500;
}

.ping-result-dismiss[b-4qa80ggenq] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    opacity: 0.5;
    color: inherit;
}

.ping-result-dismiss:hover[b-4qa80ggenq] {
    opacity: 1;
}

/* ─── Remove confirmation panel ──────────────────────────────── */
.detail-remove-confirm[b-4qa80ggenq] {
    background: #fff5f5;
    border: 1px solid #fca5a5;
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.detail-remove-confirm-body[b-4qa80ggenq] {
    flex: 1 1 auto;
}

.detail-remove-confirm-title[b-4qa80ggenq] {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #7f1d1d;
    margin-bottom: 0.4rem;
}

.detail-remove-confirm-text[b-4qa80ggenq] {
    font-size: 0.875rem;
    color: #991b1b;
    margin: 0;
    max-width: 540px;
}

.detail-remove-confirm-actions[b-4qa80ggenq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ─── Back link ──────────────────────────────────────────────── */
.detail-back[b-4qa80ggenq] {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
}

.detail-back:hover[b-4qa80ggenq] {
    color: var(--color-text-primary);
}

/* ─── Header: name + badge ───────────────────────────────────── */
.detail-header[b-4qa80ggenq] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 0.625rem;
}

.detail-name[b-4qa80ggenq] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

/* ─── Description ────────────────────────────────────────────── */
.detail-description[b-4qa80ggenq] {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0 0 0.75rem;
    max-width: 640px;
}

/* ─── Tags ───────────────────────────────────────────────────── */
.detail-tags[b-4qa80ggenq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

/* Expandable tag card */
.tag-card[b-4qa80ggenq] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.tag-card--expanded[b-4qa80ggenq] {
    border-color: var(--color-brand-teal);
}

.tag-card-header[b-4qa80ggenq] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem 0.3rem 0.4rem;
}

.tag-card-toggle[b-4qa80ggenq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.55rem;
    color: var(--color-text-muted);
    padding: 0;
    border-radius: 0.2rem;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.tag-card-toggle:hover[b-4qa80ggenq] {
    color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

.tag-card-body[b-4qa80ggenq] {
    padding: 0.625rem 0.875rem 0.75rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    min-width: 220px;
    max-width: 480px;
}

.tag-card-desc[b-4qa80ggenq] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text);
    margin: 0 0 0.5rem;
}

.tag-card-meta[b-4qa80ggenq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.tag-card-meta-item[b-4qa80ggenq] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.tag-card-meta-label[b-4qa80ggenq] {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.tag-card-meta-value[b-4qa80ggenq] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text);
}

.tag-card-flag[b-4qa80ggenq] {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-body);
}

.tag-card-flag--good[b-4qa80ggenq]   { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.tag-card-flag--review[b-4qa80ggenq] { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.tag-card-flag--bad[b-4qa80ggenq]    { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

.tag-card-links[b-4qa80ggenq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.tag-card-link[b-4qa80ggenq] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tag-card-link:hover[b-4qa80ggenq] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand-teal);
    background: var(--color-surface-raised);
    text-decoration: none;
}

.tag-card-tv[b-4qa80ggenq] {
    margin-top: 0.5rem;
}

.tag-card-notes[b-4qa80ggenq] {
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--color-border);
}

/* ─── Tab bar ────────────────────────────────────────────────── */
.site-tabs[b-4qa80ggenq] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-top: 1.5rem;
}

.site-tab[b-4qa80ggenq] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    font-family: var(--font-subtitle);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.site-tab:hover[b-4qa80ggenq] {
    color: var(--color-text-primary);
}

.site-tab--active[b-4qa80ggenq] {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand);
    font-weight: 600;
}

.site-tab-count[b-4qa80ggenq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    font-family: var(--font-body);
    line-height: 1;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

.site-tab--active .site-tab-count[b-4qa80ggenq] {
    color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 8%, transparent);
    border-color: color-mix(in srgb, var(--color-brand) 25%, transparent);
}

/* ─── Configuration section ──────────────────────────────────── */
.detail-section[b-4qa80ggenq] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-top: 2rem;
}

.detail-grid[b-4qa80ggenq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
}

.detail-field[b-4qa80ggenq] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

/* Remove bottom border on the last row (handles both odd and even field counts) */
.detail-field:last-child[b-4qa80ggenq],
.detail-field:nth-last-child(2):nth-child(odd)[b-4qa80ggenq] {
    border-bottom: none;
}

.detail-label[b-4qa80ggenq] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin: 0 0 0.3rem;
}

.detail-value[b-4qa80ggenq] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0;
}

.detail-value--alert[b-4qa80ggenq] {
    color: #991b1b;
    font-variant-numeric: tabular-nums;
}

.detail-inherited[b-4qa80ggenq] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-secondary);
    margin-left: 0.375rem;
}

.detail-link[b-4qa80ggenq] {
    color: var(--color-text-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    word-break: break-all;
}

.detail-link:hover[b-4qa80ggenq] {
    text-decoration-color: var(--color-text-secondary);
}

.detail-region-code[b-4qa80ggenq] {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ─── Recent checks section ──────────────────────────────────── */
.history-header[b-4qa80ggenq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.history-controls[b-4qa80ggenq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Scale pill buttons — matches Dashboard segmented control */
.history-scale-pills[b-4qa80ggenq] {
    display: inline-flex;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 2px;
    gap: 1px;
}

.history-scale-pill[b-4qa80ggenq] {
    padding: 0.175rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.1s, background 0.15s, box-shadow 0.15s;
    font-family: var(--font-body);
    white-space: nowrap;
    line-height: 1.5;
}

.history-scale-pill:hover:not(.history-scale-pill--active)[b-4qa80ggenq] {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.65);
}

.history-scale-pill--active[b-4qa80ggenq] {
    color: var(--color-brand);
    background: var(--color-surface);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(7, 70, 132, 0.13), 0 0 0 0.5px rgba(7, 70, 132, 0.08);
}

.history-title[b-4qa80ggenq] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin: 0;
}

/* When the title sits directly inside a section (no .history-header wrapper),
   give it the same padding the header bar would have provided. */
.detail-section > .history-title[b-4qa80ggenq] {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

/* Section header bar used by API Checks and similar sections without controls */
.siteinfo-section-header[b-4qa80ggenq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.history-meta[b-4qa80ggenq] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.history-meta strong[b-4qa80ggenq] {
    font-weight: 500;
    color: var(--color-text-primary);
}

.history-timeline[b-4qa80ggenq] {
    display: flex;
    align-items: flex-start;
    gap: 3px;
    padding: 1rem 1.25rem 0.75rem;
    overflow-x: auto;
}

.history-cell[b-4qa80ggenq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.history-bar[b-4qa80ggenq] {
    width: 10px;
    height: 28px;
    border-radius: 3px;
    cursor: default;
    display: block;
}

.history-bar--healthy[b-4qa80ggenq]  { background: var(--color-healthy); }
.history-bar--degraded[b-4qa80ggenq] { background: var(--color-degraded); }
.history-bar--down[b-4qa80ggenq]     { background: var(--color-down); }
.history-bar--unknown[b-4qa80ggenq]  { background: var(--color-unknown); }

.history-cell-label[b-4qa80ggenq] {
    font-size: 0.5625rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    margin-top: 0.25rem;
    line-height: 1;
    min-height: 0.75rem;
}

.history-empty[b-4qa80ggenq] {
    padding: 1.25rem;
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* ─── Alert history section ──────────────────────────────────── */

.alert-history-list[b-4qa80ggenq] {
    display: flex;
    flex-direction: column;
}

.alert-history-row[b-4qa80ggenq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.alert-history-row:last-child[b-4qa80ggenq] {
    border-bottom: none;
}

.alert-history-time[b-4qa80ggenq] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 11rem;
}

.alert-history-kind[b-4qa80ggenq] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    white-space: nowrap;
}

.alert-history-kind--alert[b-4qa80ggenq] {
    background: #fee2e2;
    color: #991b1b;
}

.alert-history-kind--recovery[b-4qa80ggenq] {
    background: #dcfce7;
    color: #166534;
}

.alert-history-recipient[b-4qa80ggenq] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alert-history-delivery[b-4qa80ggenq] {
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-text-secondary);
}

.alert-history-delivery--sent[b-4qa80ggenq]   { color: #166534; }
.alert-history-delivery--failed[b-4qa80ggenq] { color: #991b1b; }

.alert-history-error[b-4qa80ggenq] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #991b1b;
    border: 1px solid #fca5a5;
    border-radius: 0.25rem;
    padding: 0.0625rem 0.375rem;
    cursor: default;
}

/* ─── MCP probe result panel ─────────────────────────────────── */

.mcp-probe-panel[b-4qa80ggenq] {
    border-radius: var(--radius);
    border: 1px solid;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    overflow: hidden;
}

.mcp-probe-panel--connected[b-4qa80ggenq] {
    background: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}

.mcp-probe-panel--failed[b-4qa80ggenq] {
    background: #fff5f5;
    border-color: #fca5a5;
    color: #991b1b;
}

.mcp-probe-header[b-4qa80ggenq] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
}

.mcp-probe-status-icon[b-4qa80ggenq] {
    font-size: 1rem;
    flex-shrink: 0;
}

.mcp-probe-status-text[b-4qa80ggenq] {
    flex: 1 1 auto;
    font-weight: 500;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.mcp-probe-server[b-4qa80ggenq] {
    font-weight: 400;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
}

.mcp-probe-server-version[b-4qa80ggenq] {
    font-size: 0.75rem;
    opacity: 0.8;
}

.mcp-probe-dismiss[b-4qa80ggenq] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    opacity: 0.5;
    color: inherit;
    flex-shrink: 0;
}

.mcp-probe-dismiss:hover[b-4qa80ggenq] { opacity: 1; }

.mcp-probe-error[b-4qa80ggenq] {
    margin: 0;
    padding: 0 1rem 0.625rem;
    font-size: 0.8125rem;
    opacity: 0.85;
}

.mcp-probe-no-tools[b-4qa80ggenq] {
    margin: 0;
    padding: 0 1rem 0.625rem;
    font-size: 0.8125rem;
    opacity: 0.75;
    font-style: italic;
}

.mcp-probe-tools[b-4qa80ggenq] {
    border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    padding: 0.75rem 1rem;
}

.mcp-probe-tools-label[b-4qa80ggenq] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.75;
    margin-bottom: 0.5rem;
}

.mcp-probe-tool-list[b-4qa80ggenq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.mcp-probe-tool[b-4qa80ggenq] {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.mcp-probe-tool-name[b-4qa80ggenq] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.mcp-probe-tool-desc[b-4qa80ggenq] {
    font-size: 0.8125rem;
    opacity: 0.8;
    font-weight: 400;
}

/* ─── Not-found state ────────────────────────────────────────── */
.not-found[b-4qa80ggenq] {
    padding: 4rem 2rem;
    text-align: center;
    max-width: 420px;
    margin: 0 auto;
}

.not-found-heading[b-4qa80ggenq] {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.75rem;
}

.not-found-text[b-4qa80ggenq] {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0 0 1.5rem;
}

.not-found-link[b-4qa80ggenq] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-border);
}

.not-found-link:hover[b-4qa80ggenq] {
    text-decoration-color: var(--color-text-secondary);
}

/* ── Paged data grids ───────────────────────────────────────────────────── */

.grid-section[b-4qa80ggenq] {
    padding: 0;
}

.grid-header[b-4qa80ggenq] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem 0.5rem;
    flex-wrap: wrap;
}

.grid-title[b-4qa80ggenq] {
    font-family: var(--font-subtitle, 'Hind', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-brand, #074684);
    margin: 0;
}

.grid-meta[b-4qa80ggenq] {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #64748b);
}

.grid-toolbar[b-4qa80ggenq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.25rem 0.625rem;
    flex-wrap: wrap;
}

.grid-search[b-4qa80ggenq] {
    width: 240px;
    font-size: 0.8125rem;
    padding: 0.35rem 0.625rem;
}

.grid-filter-select[b-4qa80ggenq] {
    width: 160px;
    font-size: 0.8125rem;
    padding: 0.35rem 0.625rem;
}

.grid-showing[b-4qa80ggenq] {
    margin-left: auto;
    font-size: 0.6875rem;
    color: var(--color-text-secondary, #64748b);
    white-space: nowrap;
}

.grid-table[b-4qa80ggenq] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body, 'Open Sans', sans-serif);
    font-size: 0.8125rem;
    table-layout: fixed;
}

.grid-th[b-4qa80ggenq] {
    text-align: left;
    padding: 0.5rem 1.25rem;
    font-family: var(--font-subtitle, 'Hind', sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary, #64748b);
    background: #f8fafc;
    border-bottom: 2px solid var(--color-border, #e2e8f0);
    white-space: nowrap;
    user-select: none;
}

.grid-th--sort[b-4qa80ggenq] {
    cursor: pointer;
}

.grid-th--sort:hover[b-4qa80ggenq] {
    color: var(--color-brand-teal, #0ea5c6);
}

.grid-th--id[b-4qa80ggenq] {
    width: 80px;
}

.grid-th--narrow[b-4qa80ggenq] {
    width: 100px;
}

.grid-sort-arrow[b-4qa80ggenq] {
    font-size: 0.625rem;
    opacity: 0.6;
}

.grid-td[b-4qa80ggenq] {
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    color: var(--color-text-primary, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid-td--name[b-4qa80ggenq] {
    font-weight: 500;
}

.grid-td--id[b-4qa80ggenq] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary, #64748b);
    font-variant-numeric: tabular-nums;
}

.grid-td--center[b-4qa80ggenq] {
    text-align: center;
}

.grid-row[b-4qa80ggenq] {
    transition: background 0.1s;
}

.grid-row:hover[b-4qa80ggenq] {
    background: #f8fafc;
}

.grid-row:last-child .grid-td[b-4qa80ggenq] {
    border-bottom: none;
}

.grid-row--disabled[b-4qa80ggenq] {
    opacity: 0.55;
}

.grid-td-sub[b-4qa80ggenq] {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-secondary, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.grid-badge[b-4qa80ggenq] {
    display: inline-flex;
    padding: 0.1rem 0.45rem;
    border-radius: 100px;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.grid-badge--entity[b-4qa80ggenq] {
    background: #dbeafe;
    color: #1e40af;
}

.grid-badge--group[b-4qa80ggenq] {
    background: #f3e8ff;
    color: #7c3aed;
}

.grid-empty-state[b-4qa80ggenq] {
    padding: 1.5rem 1.25rem;
    color: var(--color-text-secondary, #64748b);
    font-size: 0.8125rem;
    margin: 0;
}

.grid-empty-row[b-4qa80ggenq] {
    text-align: center;
    padding: 2rem 1.25rem;
    color: var(--color-text-secondary, #64748b);
    font-size: 0.8125rem;
}

.grid-pager[b-4qa80ggenq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
    border-top: 1px solid #f1f5f9;
}

.grid-pager-btn[b-4qa80ggenq] {
    background: none;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 6px);
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    cursor: pointer;
    color: var(--color-text-primary, #1e293b);
    transition: background 0.1s, border-color 0.1s;
}

.grid-pager-btn:hover:not(:disabled)[b-4qa80ggenq] {
    background: #f8fafc;
    border-color: var(--color-brand-teal, #0ea5c6);
}

.grid-pager-btn:disabled[b-4qa80ggenq] {
    opacity: 0.35;
    cursor: default;
}

.grid-pager-info[b-4qa80ggenq] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary, #64748b);
}

/* ── Upload client cards ────────────────────────────────────────────────── */

.upload-client-card[b-4qa80ggenq] {
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 6px);
    margin: 0 1.25rem 1rem;
    overflow: hidden;
}

.upload-client-card--warn[b-4qa80ggenq] {
    border-color: #fbbf24;
}

.upload-client-header[b-4qa80ggenq] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.upload-client-name[b-4qa80ggenq] {
    font-family: var(--font-subtitle, 'Hind', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text-primary, #1e293b);
}

.upload-client-key[b-4qa80ggenq] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary, #64748b);
    padding: 0.1rem 0.4rem;
    background: #e2e8f0;
    border-radius: 4px;
}

.grid-badge--warn[b-4qa80ggenq] {
    background: #fef3c7;
    color: #92400e;
}

.upload-client-meta[b-4qa80ggenq] {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.upload-client-stats[b-4qa80ggenq] {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin: 0;
}

.upload-stat[b-4qa80ggenq] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.upload-stat dt[b-4qa80ggenq] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary, #64748b);
}

.upload-stat dd[b-4qa80ggenq] {
    font-size: 0.8125rem;
    color: var(--color-text-primary, #1e293b);
    margin: 0;
}

.upload-profile-table[b-4qa80ggenq] {
    margin: 0;
}

.upload-profile--stale[b-4qa80ggenq] {
    background: #fffbeb;
}

.upload-profile--stale:hover[b-4qa80ggenq] {
    background: #fef3c7;
}

.upload-profile--ignored[b-4qa80ggenq] {
    background: #f8fafc;
    opacity: 0.55;
}

.upload-profile--ignored:hover[b-4qa80ggenq] {
    opacity: 0.8;
}

.upload-profile-action[b-4qa80ggenq] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.6875rem;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    line-height: 1;
}

.upload-profile-action--unignore[b-4qa80ggenq] {
    color: var(--color-text-secondary, #64748b);
}

.upload-profile-action--unignore:hover[b-4qa80ggenq] {
    background: #fee2e2;
    color: #991b1b;
}

.upload-profile-ignore-select[b-4qa80ggenq] {
    font-size: 0.5625rem;
    padding: 0.1rem 0.25rem;
    width: auto;
    min-width: 65px;
    color: var(--color-text-secondary, #64748b);
    border-color: transparent;
    background: transparent;
}

.upload-profile-ignore-select:hover[b-4qa80ggenq] {
    border-color: var(--color-border, #e2e8f0);
    background: #fff;
}

/* Upload ignore controls */

.upload-ignore-actions[b-4qa80ggenq] {
    margin-left: auto;
}

.upload-ignore-select[b-4qa80ggenq] {
    font-size: 0.6875rem;
    padding: 0.2rem 0.4rem;
    width: auto;
    min-width: 90px;
    color: var(--color-text-secondary, #64748b);
}

.upload-client-card--ignored[b-4qa80ggenq] {
    opacity: 0.65;
    border-color: var(--color-border, #e2e8f0);
}

.upload-client-name--muted[b-4qa80ggenq] {
    color: var(--color-text-secondary, #64748b);
}

.upload-badge--ignored[b-4qa80ggenq] {
    background: #f1f5f9;
    color: #475569;
}

.upload-unignore-btn[b-4qa80ggenq] {
    margin-left: auto;
}

.upload-ignored-section[b-4qa80ggenq] {
    padding: 0 1.25rem 1rem;
}

.upload-ignored-toggle[b-4qa80ggenq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-subtitle, 'Hind', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary, #64748b);
    padding: 0.5rem 0;
}

.upload-ignored-toggle:hover[b-4qa80ggenq] {
    color: var(--color-text-primary, #1e293b);
}

.upload-ignored-arrow[b-4qa80ggenq] {
    font-size: 0.625rem;
    width: 0.75rem;
    text-align: center;
}

/* ── API check summary ──────────────────────────────────────────────────── */

.siteinfo-table-wrap[b-4qa80ggenq] {
    overflow-x: auto;
    margin-top: 0.5rem;
}

.siteinfo-table[b-4qa80ggenq] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.siteinfo-table th[b-4qa80ggenq] {
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    padding: 0.625rem 1rem;
    border-bottom: 2px solid var(--color-border);
    background: var(--color-surface-raised, #f8fafc);
}

.siteinfo-table td[b-4qa80ggenq] {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    vertical-align: middle;
}

.siteinfo-table tbody tr:last-child td[b-4qa80ggenq] {
    border-bottom: none;
}

.siteinfo-table tbody tr:hover[b-4qa80ggenq] {
    background: var(--color-surface-raised, #f8fafc);
}

/* Column sizing: Check and State are compact, Message gets the remaining space */
.siteinfo-table th:nth-child(1)[b-4qa80ggenq],
.siteinfo-table td:nth-child(1)[b-4qa80ggenq] { width: 10%; white-space: nowrap; }
.siteinfo-table th:nth-child(2)[b-4qa80ggenq],
.siteinfo-table td:nth-child(2)[b-4qa80ggenq] { width: 10%; white-space: nowrap; }
.siteinfo-table th:nth-child(3)[b-4qa80ggenq],
.siteinfo-table td:nth-child(3)[b-4qa80ggenq] { width: auto; }
.siteinfo-table th:nth-child(4)[b-4qa80ggenq],
.siteinfo-table td:nth-child(4)[b-4qa80ggenq] { width: 12%; white-space: nowrap; text-align: right; }

.apicheck-run-log[b-4qa80ggenq] {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius, 6px);
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #334155;
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
}

.apilog-error[b-4qa80ggenq] {
    padding: 0.75rem 1rem;
    border-radius: var(--radius, 6px);
    background: #fee2e2;
    color: #991b1b;
    font-size: 0.8125rem;
    margin-bottom: 0.75rem;
}

.apilog-overall[b-4qa80ggenq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.apilog-overall-label[b-4qa80ggenq] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.apilog-overall-badge[b-4qa80ggenq] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.apilog-overall-badge--healthy[b-4qa80ggenq]  { background: #dcfce7; color: #166534; }
.apilog-overall-badge--warning[b-4qa80ggenq]  { background: #fef3c7; color: #92400e; }
.apilog-overall-badge--critical[b-4qa80ggenq] { background: #fee2e2; color: #991b1b; }
.apilog-overall-badge--unknown[b-4qa80ggenq]  { background: #f1f5f9; color: #475569; }

.apilog-check-type[b-4qa80ggenq] {
    font-weight: 600;
}

.apilog-state[b-4qa80ggenq] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 100px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.apilog-state--healthy[b-4qa80ggenq]  { background: #dcfce7; color: #166534; }
.apilog-state--warning[b-4qa80ggenq]  { background: #fef3c7; color: #92400e; }
.apilog-state--critical[b-4qa80ggenq] { background: #fee2e2; color: #991b1b; }
.apilog-state--unknown[b-4qa80ggenq]  { background: #f1f5f9; color: #475569; }
.apilog-state--healthy[b-4qa80ggenq]  { background: #dcfce7; color: #166534; }
.apilog-state--degraded[b-4qa80ggenq] { background: #fef3c7; color: #92400e; }
.apilog-state--down[b-4qa80ggenq]     { background: #fee2e2; color: #991b1b; }

.apilog-filter-pills[b-4qa80ggenq] {
    display: flex;
    gap: 0.25rem;
}

.apilog-row--down[b-4qa80ggenq]     { background: #fff1f2; }
.apilog-row--degraded[b-4qa80ggenq] { background: #fffbeb; }

.apilog-error-cell[b-4qa80ggenq] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── CloudWatch Logs query ──────────────────────────────────────────────── */

.cw-query-form[b-4qa80ggenq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 6px);
}

.cw-query-row[b-4qa80ggenq] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cw-label[b-4qa80ggenq] {
    min-width: 100px;
    padding-top: 0.4rem;
    font-family: var(--font-subtitle, 'Hind', sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
    flex-shrink: 0;
}

.cw-input[b-4qa80ggenq] {
    flex: 1;
    max-width: 400px;
}

.cw-time-controls[b-4qa80ggenq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cw-presets[b-4qa80ggenq] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.cw-custom-range[b-4qa80ggenq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cw-datetime[b-4qa80ggenq] {
    width: 210px;
    font-size: 0.8125rem;
}

.cw-range-sep[b-4qa80ggenq] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #64748b);
}

.cw-filters[b-4qa80ggenq] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cw-filter-input[b-4qa80ggenq] {
    width: 160px;
    font-size: 0.8125rem;
}

/* ── CloudWatch results ────────────────────────────────────────────────── */

.cw-result-error[b-4qa80ggenq] {
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius, 6px);
    background: #fee2e2;
    color: #991b1b;
    font-size: 0.8125rem;
}

.cw-result-block[b-4qa80ggenq] {
    margin-top: 1.25rem;
}

.cw-result-count[b-4qa80ggenq] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #64748b);
    margin: 0 0 0.5rem;
}

.cw-log-table[b-4qa80ggenq] {
    font-size: 0.8125rem;
}

.cw-col-time[b-4qa80ggenq]  { width: 120px; }
.cw-col-user[b-4qa80ggenq]  { width: 110px; }
.cw-col-audit[b-4qa80ggenq] { width: 90px; }

.cw-cell-user[b-4qa80ggenq],
.cw-cell-audit[b-4qa80ggenq] {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--color-text-secondary, #64748b);
}

.cw-log-message[b-4qa80ggenq] {
    margin: 0;
    font-family: var(--font-body, 'Open Sans', sans-serif);
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
    max-height: 5rem;
    overflow-y: auto;
}

/* ── Row selection & drill-down ────────────────────────────────────────── */

.cw-row[b-4qa80ggenq] {
    cursor: pointer;
    transition: background 0.1s;
}

.cw-row:hover[b-4qa80ggenq] {
    background: var(--color-surface-hover, #f8fafc);
}

.cw-row--selected[b-4qa80ggenq] {
    background: #eff6ff;
    border-left: 3px solid var(--color-brand-teal, #0ea5c6);
}

.cw-row--selected:hover[b-4qa80ggenq] {
    background: #eff6ff;
}

.cw-drilldown-row td[b-4qa80ggenq] {
    padding: 0;
    background: #f8fafc;
}

.cw-drilldown[b-4qa80ggenq] {
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 6px);
    margin: 0.5rem 0.75rem;
    background: #fff;
    overflow: hidden;
}

.cw-drilldown-header[b-4qa80ggenq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    background: #f1f5f9;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    flex-wrap: wrap;
}

.cw-drilldown-time[b-4qa80ggenq] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-primary, #1e293b);
}

.cw-drilldown-user[b-4qa80ggenq] {
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 100px;
    background: var(--color-brand-teal, #0ea5c6);
    color: #fff;
    font-weight: 600;
}

.cw-drilldown-actions[b-4qa80ggenq] {
    display: flex;
    gap: 0.375rem;
    margin-left: auto;
}

.cw-drill-group[b-4qa80ggenq] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cw-drill-group-label[b-4qa80ggenq] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
    margin-right: 0.125rem;
}

.cw-drill-btn[b-4qa80ggenq] {
    font-size: 0.6875rem;
    padding: 0.25rem 0.625rem;
}

.cw-drill-btn--active[b-4qa80ggenq] {
    background: var(--color-brand-teal, #0ea5c6);
    color: #fff;
    border-color: var(--color-brand-teal, #0ea5c6);
}

.cw-drill-close[b-4qa80ggenq] {
    background: none;
    border: none;
    font-size: 0.875rem;
    cursor: pointer;
    color: var(--color-text-secondary, #64748b);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    line-height: 1;
}

.cw-drill-close:hover[b-4qa80ggenq] {
    background: var(--color-border, #e2e8f0);
    color: var(--color-text-primary, #1e293b);
}

.cw-drill-loading[b-4qa80ggenq] {
    padding: 1rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #64748b);
    margin: 0;
}

.cw-drill-results[b-4qa80ggenq] {
    padding: 0.75rem 1rem;
    max-height: 400px;
    overflow-y: auto;
}

.cw-drill-count[b-4qa80ggenq] {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #64748b);
    margin: 0 0 0.5rem;
}

.cw-drill-table[b-4qa80ggenq] {
    font-size: 0.75rem;
}

.cw-drill-highlight[b-4qa80ggenq] {
    background: #fef9c3;
}
/* /Components/Pages/SiteEdit.razor.rz.scp.css */
/* Form styles (form-section, form-grid, form-field, form-input, etc.)
   are defined globally in wwwroot/app.css so all form pages share them. */

/* ─── Diagnostics tab ─────────────────────────────────────────── */

.diag-enabled-row[b-dc3tmumnqg] {
    padding: 0 1.25rem 0.25rem;
}

.diag-region-row[b-dc3tmumnqg] {
    padding: 0 1.25rem;
    max-width: 32rem;
}

.diag-log-groups[b-dc3tmumnqg] {
    margin-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

.diag-log-groups-header[b-dc3tmumnqg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.diag-log-groups-title[b-dc3tmumnqg] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--color-text-primary);
}

.diag-add-btn[b-dc3tmumnqg] {
    font-size: 0.8125rem;
    padding: 0.3rem 0.75rem;
}

.diag-empty[b-dc3tmumnqg] {
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    font-style: italic;
}

.diag-log-group-card[b-dc3tmumnqg] {
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem 1.25rem 1rem;
}

.diag-log-group-card:last-child[b-dc3tmumnqg] {
    border-bottom: none;
}

.diag-log-group-card--default[b-dc3tmumnqg] {
    background: rgba(14, 165, 198, 0.04);
    border-left: 3px solid var(--color-brand-teal);
    padding-left: calc(1.25rem - 3px);
}

.diag-log-group-card-header[b-dc3tmumnqg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.diag-log-group-label[b-dc3tmumnqg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    font-family: var(--font-body);
}

.diag-default-badge[b-dc3tmumnqg] {
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(14, 165, 198, 0.12);
    border: 1px solid rgba(14, 165, 198, 0.35);
    color: var(--color-brand-teal);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.diag-log-group-actions[b-dc3tmumnqg] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.diag-action-link[b-dc3tmumnqg] {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8125rem;
    font-family: var(--font-body);
    color: var(--color-brand-teal);
    cursor: pointer;
    text-decoration: underline;
}

.diag-action-link:hover[b-dc3tmumnqg] {
    color: var(--color-brand);
}

.diag-action-link--danger[b-dc3tmumnqg] {
    color: var(--color-text-secondary);
}

.diag-action-link--danger:hover[b-dc3tmumnqg] {
    color: #dc2626;
}

.diag-log-group-fields[b-dc3tmumnqg] {
    margin-top: 0;
}

.diag-mono-input[b-dc3tmumnqg] {
    font-family: monospace;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
}

/* ─── Diagnostics — test button row ──────────────────────────── */

.diag-test-row[b-dc3tmumnqg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.diag-test-btn[b-dc3tmumnqg] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    padding: 0.3rem 0.875rem;
}

.diag-test-spinner[b-dc3tmumnqg] {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid rgba(7, 70, 132, 0.2);
    border-top-color: var(--color-brand);
    border-radius: 50%;
    animation: diag-spin-b-dc3tmumnqg 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes diag-spin-b-dc3tmumnqg {
    to { transform: rotate(360deg); }
}

.diag-test-hint[b-dc3tmumnqg] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ─── Diagnostics — result banner ────────────────────────────── */

.diag-result[b-dc3tmumnqg] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0.875rem;
    border-radius: calc(var(--radius) * 0.75);
    border: 1px solid;
    overflow: hidden;
    font-size: 0.875rem;
}

.diag-result--error[b-dc3tmumnqg] {
    background: rgba(220, 38, 38, 0.05);
    border-color: rgba(220, 38, 38, 0.3);
    color: #991b1b;
    padding: 0.6rem 0.875rem;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem;
}

.diag-result--warn[b-dc3tmumnqg] {
    background: rgba(217, 119, 6, 0.06);
    border-color: rgba(217, 119, 6, 0.25);
    color: #92400e;
    padding: 0.6rem 0.875rem;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem;
}

.diag-result--ok[b-dc3tmumnqg] {
    border-color: rgba(22, 163, 74, 0.3);
    background: transparent;
}

.diag-result-icon[b-dc3tmumnqg] {
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 700;
}

.diag-result-summary[b-dc3tmumnqg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.875rem;
    background: rgba(22, 163, 74, 0.06);
    color: #166534;
}

.diag-result-toggle[b-dc3tmumnqg] {
    margin-left: auto;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8125rem;
    font-family: var(--font-body);
    color: var(--color-brand-teal);
    cursor: pointer;
    text-decoration: underline;
}

.diag-result-toggle:hover[b-dc3tmumnqg] {
    color: var(--color-brand);
}

/* ─── Diagnostics — events table ─────────────────────────────── */

.diag-events-panel[b-dc3tmumnqg] {
    max-height: 22rem;
    overflow-y: auto;
    border-top: 1px solid rgba(22, 163, 74, 0.2);
}

.diag-events-table[b-dc3tmumnqg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.diag-events-table th[b-dc3tmumnqg] {
    position: sticky;
    top: 0;
    padding: 0.4rem 0.75rem;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.diag-events-table td[b-dc3tmumnqg] {
    padding: 0.3rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.diag-events-table tr:last-child td[b-dc3tmumnqg] {
    border-bottom: none;
}

.diag-ev-ts[b-dc3tmumnqg] {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.diag-ev-stream[b-dc3tmumnqg] {
    font-family: monospace;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.diag-ev-msg[b-dc3tmumnqg] {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--color-text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ─── Auth section description ──────────────────────────────── */

.form-section-hint[b-dc3tmumnqg] {
    margin: -0.25rem 1.25rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.form-section-subtitle[b-dc3tmumnqg] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    padding: 0.75rem 1.25rem 0.25rem;
    margin: 0;
}

/* ─── Tag picker ──────────────────────────────────────────────── */

.tag-picker-content[b-dc3tmumnqg] {
    padding: 1rem 1.25rem;
}

.tag-picker-group[b-dc3tmumnqg] {
    margin-bottom: 0.875rem;
}

.tag-picker-group:last-child[b-dc3tmumnqg] {
    margin-bottom: 0;
}

.tag-picker-type-label[b-dc3tmumnqg] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.375rem;
}

.tag-picker-chips[b-dc3tmumnqg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.tag-chip[b-dc3tmumnqg] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    cursor: pointer;
    transition: opacity 0.1s, transform 0.1s;
    font-family: var(--font-body);
}

.tag-chip:hover[b-dc3tmumnqg] {
    opacity: 0.8;
}

.tag-chip--selected[b-dc3tmumnqg] {
    color: inherit;
    font-weight: 600;
}

/* ─── Form tabs ───────────────────────────────────────────────── */

.form-tabs[b-dc3tmumnqg] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.form-tab[b-dc3tmumnqg] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.625rem 1.125rem;
    cursor: pointer;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color 0.12s, border-color 0.12s;
}

.form-tab:hover[b-dc3tmumnqg] {
    color: var(--color-text-primary);
}

.form-tab--active[b-dc3tmumnqg] {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand);
    font-weight: 600;
}

/* ─── Helpdesk tab — shared ───────────────────────────────────── */

.hd-section-body[b-dc3tmumnqg] {
    padding: 0.75rem 1.25rem 1rem;
}

.hd-no-mcp-notice[b-dc3tmumnqg] {
    margin: 0.75rem 1.25rem 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.hd-tab-link[b-dc3tmumnqg] {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-brand-teal);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
}

/* ─── Helpdesk tab — email domains ────────────────────────────── */

.hd-domain-chips[b-dc3tmumnqg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.hd-domain-chip[b-dc3tmumnqg] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
    background: rgba(7, 70, 132, 0.08);
    border: 1px solid rgba(7, 70, 132, 0.2);
    border-radius: 999px;
    font-size: 0.8125rem;
    color: var(--color-brand);
    font-family: var(--font-body);
}

.hd-domain-chip-remove[b-dc3tmumnqg] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
}

.hd-domain-chip-remove:hover[b-dc3tmumnqg] { color: #dc2626; }

.hd-domain-add[b-dc3tmumnqg] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.hd-domain-input[b-dc3tmumnqg] { max-width: 22rem; }

/* ─── Helpdesk tab — entity cache ─────────────────────────────── */

.hd-refresh-status[b-dc3tmumnqg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--color-border);
}

.hd-refresh-status--busy[b-dc3tmumnqg] {
    color: var(--color-brand-teal);
    background: rgba(14, 165, 198, 0.06);
}

.hd-refresh-status--done[b-dc3tmumnqg] {
    color: var(--color-text-secondary);
}

.hd-refresh-spinner[b-dc3tmumnqg] {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid rgba(14, 165, 198, 0.25);
    border-top-color: var(--color-brand-teal);
    border-radius: 50%;
    animation: hd-spin-b-dc3tmumnqg 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes hd-spin-b-dc3tmumnqg {
    to { transform: rotate(360deg); }
}

.hd-cache-header[b-dc3tmumnqg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.hd-cache-refreshed[b-dc3tmumnqg] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.hd-cache-empty[b-dc3tmumnqg] {
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.hd-cache-table[b-dc3tmumnqg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.hd-cache-table th[b-dc3tmumnqg] {
    padding: 0.5rem 1.25rem;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
}

.hd-cache-table td[b-dc3tmumnqg] {
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

.hd-cache-table tr:last-child td[b-dc3tmumnqg] { border-bottom: none; }

.hd-id-cell[b-dc3tmumnqg] {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.hd-raw-response[b-dc3tmumnqg] {
    border-top: 1px solid var(--color-border);
}

.hd-raw-toggle[b-dc3tmumnqg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 1.25rem;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.hd-raw-toggle:hover[b-dc3tmumnqg] { color: var(--color-text-primary); }

.hd-raw-badge[b-dc3tmumnqg] {
    font-size: 0.6875rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
}

.hd-raw-pre[b-dc3tmumnqg] {
    margin: 0;
    padding: 0.75rem 1.25rem;
    font-size: 0.75rem;
    font-family: monospace;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    max-height: 20rem;
    overflow-y: auto;
    border-top: 1px solid var(--color-border);
}

.hd-cache-subtitle[b-dc3tmumnqg] {
    margin: 0;
    padding: 0.75rem 1.25rem 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--color-text-primary);
    border-top: 1px solid var(--color-border);
}

.hd-desc-cell[b-dc3tmumnqg] {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

/* ─── Helpdesk tab — support issue rules ──────────────────────── */

.hd-rules-scope[b-dc3tmumnqg] {
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 1.25rem;
}

.hd-rules-scope:last-of-type[b-dc3tmumnqg] { border-bottom: none; }

.hd-rules-scope--override[b-dc3tmumnqg] {
    background: var(--color-surface-raised);
}

.hd-rules-scope-header[b-dc3tmumnqg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.hd-rules-scope-title[b-dc3tmumnqg] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.25rem;
    font-family: var(--font-body);
}

.hd-rules-scope-header .hd-rules-scope-title[b-dc3tmumnqg] { margin-bottom: 0; }

.hd-remove-override[b-dc3tmumnqg] {
    font-size: 0.75rem;
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.2rem 0.5rem;
    cursor: pointer;
}

.hd-remove-override:hover[b-dc3tmumnqg] { color: #dc2626; border-color: #dc2626; }

.hd-rules-table[b-dc3tmumnqg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.hd-rules-table th[b-dc3tmumnqg] {
    padding: 0.4rem 0.75rem;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}

.hd-rules-table td[b-dc3tmumnqg] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.hd-rules-table tr:last-child td[b-dc3tmumnqg] { border-bottom: none; }

.hd-rule-issue[b-dc3tmumnqg] { font-weight: 500; }

.hd-rule-select[b-dc3tmumnqg] {
    width: auto;
    min-width: 10rem;
}

.hd-role-checks[b-dc3tmumnqg] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hd-role-check[b-dc3tmumnqg] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-family: var(--font-body);
    cursor: pointer;
}

.hd-roles-empty-hint[b-dc3tmumnqg] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    font-style: italic;
}

/* ─── Helpdesk tab — add overrides ───────────────────────────── */

.hd-add-overrides[b-dc3tmumnqg] {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hd-add-override-row[b-dc3tmumnqg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.hd-add-label[b-dc3tmumnqg] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.hd-add-select[b-dc3tmumnqg] {
    min-width: 14rem;
    width: auto;
}

/* ─── Role picker ─────────────────────────────────────────── */

.hd-role-picker[b-dc3tmumnqg] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.hd-role-picker-controls[b-dc3tmumnqg] {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}

.hd-picker-type-select[b-dc3tmumnqg] {
    width: auto;
    min-width: 8rem;
}

.hd-picker-search[b-dc3tmumnqg] {
    flex: 1;
    min-width: 8rem;
}

.hd-role-picker-list[b-dc3tmumnqg] {
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    max-height: 17rem;
    overflow-y: auto;
    background: var(--color-surface);
}

.hd-role-picker-item[b-dc3tmumnqg] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.3rem 0.625rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.8125rem;
    font-family: var(--font-body);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.08s, color 0.08s;
}

.hd-role-picker-item:last-child[b-dc3tmumnqg] { border-bottom: none; }

.hd-role-picker-item:hover[b-dc3tmumnqg] {
    background: var(--color-surface-raised);
    color: var(--color-brand);
}

.hd-selected-roles[b-dc3tmumnqg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding-top: 0.125rem;
}

.hd-selected-role-chip[b-dc3tmumnqg] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.375rem 0.2rem 0.625rem;
    background: rgba(7, 70, 132, 0.08);
    border: 1px solid rgba(7, 70, 132, 0.2);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--color-brand);
    font-family: var(--font-body);
}

.hd-selected-role-chip button[b-dc3tmumnqg] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
}

.hd-selected-role-chip button:hover[b-dc3tmumnqg] { color: #dc2626; }

/* ── Auto-processing ───────────────────────────────────────────────── */
.auto-section-note[b-dc3tmumnqg] {
    padding: 0.75rem 1.25rem;
    font-size: 0.8125rem;
    font-family: var(--font-body, 'Open Sans', sans-serif);
    color: var(--color-text-secondary, #475569);
    line-height: 1.6;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-surface-raised, #f8fafc);
}
.auto-checkbox-row[b-dc3tmumnqg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-family: var(--font-body, 'Open Sans', sans-serif);
    color: var(--color-text-secondary, #475569);
    cursor: pointer;
    margin-top: 0.25rem;
}
.auto-tags-section[b-dc3tmumnqg] { margin-top: 1rem; }
.auto-tags-hint[b-dc3tmumnqg] { display: block; margin-bottom: 0.5rem; }

.auto-tag-grid[b-dc3tmumnqg] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0.25rem;
}
.auto-tag-row[b-dc3tmumnqg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}
.auto-tag-row:hover[b-dc3tmumnqg] { background: #f8fafc; }
.auto-tag-label[b-dc3tmumnqg] {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8125rem;
    font-family: var(--font-body, 'Open Sans', sans-serif);
    font-weight: 500;
    white-space: nowrap;
}
.auto-tag-exclude[b-dc3tmumnqg] {
    display: inline-flex !important;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.75rem;
    font-family: var(--font-body, 'Open Sans', sans-serif);
    color: #94a3b8;
    white-space: nowrap;
}
/* /Components/Pages/Sites.razor.rz.scp.css */
/* ─── Tabs ───────────────────────────────────────────────────── */

.sites-tabs[b-ttjirs6ik0] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1.25rem;
}

.sites-tab[b-ttjirs6ik0] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    font-family: var(--font-subtitle);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.sites-tab:hover[b-ttjirs6ik0] {
    color: var(--color-text-primary);
}

.sites-tab--active[b-ttjirs6ik0] {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand);
    font-weight: 600;
}

.sites-tab-count[b-ttjirs6ik0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    font-family: var(--font-body);
    line-height: 1;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

.sites-tab--active .sites-tab-count[b-ttjirs6ik0] {
    color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 8%, transparent);
    border-color: color-mix(in srgb, var(--color-brand) 25%, transparent);
}

/* ─── Activity log table ─────────────────────────────────────── */

.activity-table[b-ttjirs6ik0] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    font-family: var(--font-body);
}

.activity-th[b-ttjirs6ik0] {
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}

.activity-th--duration[b-ttjirs6ik0] {
    text-align: right;
}

.activity-td[b-ttjirs6ik0] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    vertical-align: top;
}

.activity-td--time[b-ttjirs6ik0] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.activity-td--message[b-ttjirs6ik0] {
    max-width: 32rem;
    word-break: break-word;
}

.activity-td--duration[b-ttjirs6ik0] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.activity-row--error .activity-td[b-ttjirs6ik0] {
    background: color-mix(in srgb, #dc2626 5%, transparent);
}

.activity-op-badge[b-ttjirs6ik0] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 4px;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    white-space: nowrap;
}

.activity-status[b-ttjirs6ik0] {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 3px;
}

.activity-status--ok[b-ttjirs6ik0] {
    color: #166534;
    background: #dcfce7;
}

.activity-status--fail[b-ttjirs6ik0] {
    color: #991b1b;
    background: #fee2e2;
}

/* ─── Filter bar ─────────────────────────────────────────────── */

.sites-filter-bar[b-ttjirs6ik0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
    flex-wrap: wrap;
}

.sites-filter-input[b-ttjirs6ik0] {
    flex: 1;
    min-width: 14rem;
    max-width: 24rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background: var(--color-surface);
    transition: border-color 0.1s;
}

.sites-filter-input:focus[b-ttjirs6ik0] {
    outline: none;
    border-color: var(--color-brand-teal);
}

.sites-filter-select[b-ttjirs6ik0] {
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color 0.1s;
}

.sites-filter-select:focus[b-ttjirs6ik0] {
    outline: none;
    border-color: var(--color-brand-teal);
}

.sites-filter-clear[b-ttjirs6ik0] {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    background: transparent;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

.sites-filter-clear:hover[b-ttjirs6ik0] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.sites-filter-count[b-ttjirs6ik0] {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* ─── Table ──────────────────────────────────────────────────── */

.sites-table[b-ttjirs6ik0] {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    font-size: 0.875rem;
}

.sites-table th[b-ttjirs6ik0] {
    padding: 0 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    white-space: nowrap;
}

.sites-table td[b-ttjirs6ik0] {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    vertical-align: top;
}

.sites-table tbody tr:last-child td[b-ttjirs6ik0] {
    border-bottom: none;
}

/* ─── Sort buttons ───────────────────────────────────────────── */

.sort-btn[b-ttjirs6ik0] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    font-family: var(--font-title);
    white-space: nowrap;
    text-align: left;
    transition: color 0.1s;
}

.sort-btn:hover[b-ttjirs6ik0] {
    color: var(--color-text-primary);
}

.sort-btn--active[b-ttjirs6ik0] {
    color: var(--color-brand);
}

/* Non-sortable column headers */
.site-col-history[b-ttjirs6ik0] {
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.site-history-cell[b-ttjirs6ik0] {
    vertical-align: middle;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.site-col-tags[b-ttjirs6ik0] {
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

/* ─── Cell types ─────────────────────────────────────────────── */

.site-name-link[b-ttjirs6ik0] {
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
}

.site-name-link:hover[b-ttjirs6ik0] {
    text-decoration: underline;
}

.site-last-checked[b-ttjirs6ik0] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.site-status-cell[b-ttjirs6ik0] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.site-response-cell[b-ttjirs6ik0] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.site-tags-cell[b-ttjirs6ik0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-width: 220px;
}

.sites-no-results[b-ttjirs6ik0] {
    text-align: center;
    color: var(--color-text-secondary);
    font-style: italic;
    padding: 2rem 1rem;
}

/* ─── Launch icon ────────────────────────────────────────────── */

.launch-btn[b-ttjirs6ik0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.1s, background 0.1s;
    flex-shrink: 0;
}

.launch-btn:hover[b-ttjirs6ik0] {
    color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

/* ─── Page header actions (Actions dropdown + New site) ─────── */

.page-header-actions[b-ttjirs6ik0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ─── Selection indicator column ────────────────────────────── */

.site-col-select[b-ttjirs6ik0] {
    width: 2.75rem;
    min-width: 2.75rem;
}

.site-select-cell[b-ttjirs6ik0] {
    text-align: center;
    vertical-align: middle;
}

.site-select-indicator[b-ttjirs6ik0] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    vertical-align: middle;
}

.site-select-indicator--checked[b-ttjirs6ik0] {
    border-color: var(--color-brand);
    background: var(--color-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 20%, transparent);
}

/* ─── Selectable rows ────────────────────────────────────────── */

.sites-table tbody tr:not(.sites-group-header)[b-ttjirs6ik0] {
    cursor: pointer;
}

.sites-table tbody tr:not(.sites-group-header):hover td[b-ttjirs6ik0] {
    background: var(--color-surface-raised);
}

.sites-row--selected td[b-ttjirs6ik0] {
    background: color-mix(in srgb, var(--color-brand) 9%, transparent) !important;
}

.sites-row--selected td:first-child[b-ttjirs6ik0] {
    border-left: 3px solid var(--color-brand);
}

/* ─── Selected site label next to Actions button ─────────────── */

.selected-site-label[b-ttjirs6ik0] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    padding: 0 0.25rem;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Token badge ────────────────────────────────────────────── */

.token-badge[b-ttjirs6ik0] {
    display: inline-block;
    padding: 0.125rem 0.4rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.token-badge--active[b-ttjirs6ik0] {
    color: var(--color-healthy, #16a34a);
    background: color-mix(in srgb, var(--color-healthy, #16a34a) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-healthy, #16a34a) 35%, transparent);
}

.token-badge--expired[b-ttjirs6ik0] {
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
}

/* ─── Actions dropdown ───────────────────────────────────────── */

.actions-menu[b-ttjirs6ik0] {
    position: relative;
    display: inline-block;
}

/* actions-menu-btn visual styles come from btn-secondary in app.css */
.actions-menu-btn[b-ttjirs6ik0] {
    white-space: nowrap;
}

.actions-menu-dropdown[b-ttjirs6ik0] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 100;
    min-width: 10rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 0.25rem 0;
}

.actions-menu-item[b-ttjirs6ik0] {
    display: block;
    width: 100%;
    padding: 0.4375rem 0.875rem;
    font-size: 0.875rem;
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
}

.actions-menu-item:hover[b-ttjirs6ik0] {
    background: var(--color-surface-raised);
}

.actions-menu-item--danger[b-ttjirs6ik0] {
    color: var(--color-down, #dc2626);
}

.actions-menu-item--danger:hover[b-ttjirs6ik0] {
    background: color-mix(in srgb, var(--color-down, #dc2626) 8%, transparent);
}

.actions-menu-divider[b-ttjirs6ik0] {
    height: 1px;
    background: var(--color-border);
    margin: 0.25rem 0;
}

/* ─── Misc ───────────────────────────────────────────────────── */

.sr-only[b-ttjirs6ik0] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.region-code[b-ttjirs6ik0] {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ─── Group headers ─────────────────────────────────────────── */

.sites-group-header td[b-ttjirs6ik0] {
    padding: 0.5rem 1rem;
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.sites-group-header--collapsible[b-ttjirs6ik0] {
    cursor: pointer;
}

.sites-group-header--collapsible:hover td[b-ttjirs6ik0] {
    background: color-mix(in srgb, var(--color-surface-raised) 80%, var(--color-brand-teal) 20%);
}

.sites-group-label[b-ttjirs6ik0] {
    vertical-align: middle;
}

.sites-group-count[b-ttjirs6ik0] {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.0625rem 0.4rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    vertical-align: middle;
}

.sites-group-chevron[b-ttjirs6ik0] {
    display: inline-block;
    margin-right: 0.25rem;
    font-size: 0.75rem;
    transition: transform 0.15s ease;
    vertical-align: middle;
}

.sites-group-chevron--open[b-ttjirs6ik0] {
    transform: rotate(90deg);
}

/* ─── Disabled site row ─────────────────────────────────────── */
.sites-row--disabled[b-ttjirs6ik0] {
    opacity: 0.5;
}

.disabled-badge[b-ttjirs6ik0] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}
/* /Components/Pages/SkillEdit.razor.rz.scp.css */
.skill-sync-btn[b-1evi2618ou] {
    font-size: 0.8125rem;
}

.skill-sync-preview[b-1evi2618ou] {
    margin-top: 0.75rem;
    padding: 1rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.skill-sync-actions[b-1evi2618ou] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.skill-tool-guidance-textarea[b-1evi2618ou] {
    min-height: 8rem;
    flex: 1;
    resize: vertical;
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.6;
}

.skill-content-layout[b-1evi2618ou] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: stretch;
}

@media (max-width: 900px) {
    .skill-content-layout[b-1evi2618ou] {
        grid-template-columns: 1fr;
    }
}

.skill-editor-panel[b-1evi2618ou],
.skill-preview-panel[b-1evi2618ou] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.skill-content-textarea[b-1evi2618ou] {
    min-height: 20rem;
    flex: 1;
    resize: vertical;
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.6;
}

.skill-preview-box[b-1evi2618ou] {
    min-height: 20rem;
    flex: 1;
    padding: 0.875rem 1rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow-y: auto;
}

.skill-preview-empty[b-1evi2618ou] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.skill-draft-field[b-1evi2618ou] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.skill-draft-label[b-1evi2618ou] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.skill-draft-checkbox[b-1evi2618ou] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-brand);
}

/* ── Routing mode selector ───────────────────────────────────────────────── */
.skill-routing-options[b-1evi2618ou] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.skill-routing-option[b-1evi2618ou] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    background: var(--color-surface);
    transition: border-color 0.15s;
}

.skill-routing-option:hover[b-1evi2618ou] {
    border-color: var(--color-brand-teal);
}

.skill-routing-option--selected[b-1evi2618ou] {
    border-color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 5%, transparent);
}

.skill-routing-radio[b-1evi2618ou] {
    margin-top: 0.2rem;
    flex-shrink: 0;
    accent-color: var(--color-brand);
}

.skill-routing-label[b-1evi2618ou] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text);
    white-space: nowrap;
    min-width: 9rem;
}

.skill-routing-desc[b-1evi2618ou] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
}

/* ── Content section header ──────────────────────────────────────────────── */
.skill-content-header[b-1evi2618ou] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.skill-content-header .form-section-title[b-1evi2618ou] {
    margin-bottom: 0;
}

.skill-optimize-btn[b-1evi2618ou] {
    font-size: 0.8125rem;
    padding: 0.375rem 0.875rem;
    white-space: nowrap;
}

/* ── AI suggestions panel ────────────────────────────────────────────────── */
.skill-optimize-panel[b-1evi2618ou] {
    margin-top: 1.25rem;
    padding: 1.125rem 1.25rem;
    background: color-mix(in srgb, var(--color-brand-teal) 5%, var(--color-surface-raised));
    border: 1.5px solid color-mix(in srgb, var(--color-brand-teal) 30%, transparent);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.skill-optimize-panel-header[b-1evi2618ou] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skill-optimize-panel-title-row[b-1evi2618ou] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.skill-optimize-panel-title[b-1evi2618ou] {
    font-family: var(--font-subtitle);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-brand-teal);
}

.skill-optimize-saving-badge[b-1evi2618ou] {
    padding: 0.15rem 0.625rem;
    background: color-mix(in srgb, var(--color-healthy) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-healthy) 35%, transparent);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-healthy);
}

.skill-optimize-rationale[b-1evi2618ou] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

.skill-optimize-panel-actions[b-1evi2618ou] {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
}

/* Field suggestion rows */
.skill-optimize-row[b-1evi2618ou] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.skill-optimize-field[b-1evi2618ou] {
    font-family: var(--font-subtitle);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    width: 6rem;
    flex-shrink: 0;
    padding-top: 0.125rem;
}

.skill-optimize-values[b-1evi2618ou] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex: 1;
    flex-wrap: wrap;
    min-width: 0;
}

.skill-optimize-before[b-1evi2618ou] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-decoration: line-through;
    word-break: break-word;
}

.skill-optimize-arrow[b-1evi2618ou] {
    color: var(--color-brand-teal);
    flex-shrink: 0;
    font-size: 0.875rem;
    padding-top: 0.0625rem;
}

.skill-optimize-after[b-1evi2618ou] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text);
    font-weight: 500;
    word-break: break-word;
}

.skill-optimize-use[b-1evi2618ou] {
    font-size: 0.8125rem;
    padding: 0.25rem 0.75rem;
    flex-shrink: 0;
}

/* Content row */
.skill-optimize-content-row[b-1evi2618ou] {
    border-top: 1px solid var(--color-border);
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.skill-optimize-content-header[b-1evi2618ou] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.skill-optimize-token-detail[b-1evi2618ou] {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.skill-optimize-content-preview[b-1evi2618ou] {
    min-height: 6rem;
    max-height: 24rem;
    overflow-y: auto;
}

/* ── Restore notice ───────────────────────────────────────────────────────── */
.skill-restore-notice[b-1evi2618ou] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.125rem;
    background: color-mix(in srgb, var(--color-brand) 8%, var(--color-surface-raised));
    border: 1px solid color-mix(in srgb, var(--color-brand) 25%, transparent);
    border-radius: 6px;
    margin-bottom: 1rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text);
}

.skill-restore-notice-dismiss[b-1evi2618ou] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 1rem;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

.skill-restore-notice-dismiss:hover[b-1evi2618ou] {
    color: var(--color-text);
}

/* ── Version history ──────────────────────────────────────────────────────── */
.skill-version-section[b-1evi2618ou] {
    margin-top: 1.5rem;
}

.skill-version-toggle-btn[b-1evi2618ou] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-align: left;
    gap: 1rem;
}

.skill-version-toggle-btn .form-section-title[b-1evi2618ou] {
    margin-bottom: 0;
}

.skill-version-chevron[b-1evi2618ou] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.skill-version-table[b-1evi2618ou] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
}

.skill-version-table th[b-1evi2618ou] {
    text-align: left;
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    padding: 0.25rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.skill-version-table td[b-1evi2618ou] {
    padding: 0.625rem 0.75rem 0.625rem 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    vertical-align: middle;
}

.skill-version-num[b-1evi2618ou] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.skill-version-actions[b-1evi2618ou] {
    text-align: right;
    white-space: nowrap;
}

.skill-version-confirm[b-1evi2618ou] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* ── External source rows ─────────────────────────────────────────────────── */
.skill-source-row[b-1evi2618ou] {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    margin-top: 0.35rem;
}

.skill-source-url[b-1evi2618ou] {
    flex: 1;
    min-width: 0;
}

.skill-source-mode[b-1evi2618ou] {
    width: 7.5rem;
    flex-shrink: 0;
    font-size: 0.875rem;
}

.skill-source-remove[b-1evi2618ou] {
    font-size: 0.8125rem;
    padding: 0.375rem 0.6rem;
    flex-shrink: 0;
}

.skill-source-title-row[b-1evi2618ou] {
    margin-top: 0.25rem;
    padding-left: 0;
}

.skill-source-title[b-1evi2618ou] {
    font-size: 0.875rem;
}

.skill-import-btn[b-1evi2618ou] {
    font-size: 0.8125rem;
    padding: 0.375rem 0.875rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.skill-source-add-row[b-1evi2618ou] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.4rem;
}

.skill-source-add-btn[b-1evi2618ou] {
    font-size: 0.8125rem;
    padding: 0.3rem 0.75rem;
}

.skill-import-success[b-1evi2618ou] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--color-healthy, #2e7d32);
}

/* ── Source preview ─────────────────────────────────────────────────────── */

.skill-source-preview-row[b-1evi2618ou] {
    margin-top: 0.25rem;
}

.skill-source-preview-btn[b-1evi2618ou] {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
}

.skill-source-preview-panel[b-1evi2618ou] {
    margin-top: 0.4rem;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 6px;
    overflow: hidden;
}

.skill-source-preview-title[b-1evi2618ou] {
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    background: var(--color-surface-raised, #f8f9fa);
    border-bottom: 1px solid var(--color-border, #ddd);
    color: var(--color-text-primary);
}

.skill-source-preview-panel .skill-preview-box[b-1evi2618ou] {
    max-height: 20rem;
    overflow-y: auto;
    font-size: 0.8125rem;
}

.skill-int-link[b-1evi2618ou] {
    color: var(--color-brand-teal);
    text-decoration: none;
}

.skill-int-link:hover[b-1evi2618ou] {
    text-decoration: underline;
}

/* ─── Skill group inline create ──────────────────────────────────────── */

.skill-group-picker[b-1evi2618ou] {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}

.skill-group-picker select[b-1evi2618ou] {
    flex: 1;
}

.skill-group-add-btn[b-1evi2618ou] {
    padding: 0.35rem 0.65rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}

.skill-group-new-form[b-1evi2618ou] {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    margin-top: 0.375rem;
}

.skill-group-new-form input[b-1evi2618ou] {
    flex: 1;
}

.skill-group-new-form button[b-1evi2618ou] {
    flex-shrink: 0;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
}

/* ─── Tag picker (mirrors SiteEdit tag picker) ──────────────────────── */

.tag-picker-group[b-1evi2618ou] {
    margin-bottom: 0.875rem;
}

.tag-picker-group:last-child[b-1evi2618ou] {
    margin-bottom: 0;
}

.tag-picker-type-label[b-1evi2618ou] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.375rem;
}

.tag-picker-chips[b-1evi2618ou] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.tag-chip[b-1evi2618ou] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    cursor: pointer;
    transition: opacity 0.1s, transform 0.1s;
    font-family: var(--font-body);
}

.tag-chip:hover[b-1evi2618ou] {
    opacity: 0.8;
}

.tag-chip--selected[b-1evi2618ou] {
    color: inherit;
    font-weight: 600;
}

/* ─── Scope picker chips ─────────────────────────────────────────────── */

.scope-picker-group[b-1evi2618ou] {
    margin-bottom: 0.75rem;
}

.scope-picker-group:last-child[b-1evi2618ou] {
    margin-bottom: 0;
}

.scope-picker-group-label[b-1evi2618ou] {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
}

.scope-picker-chips[b-1evi2618ou] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.scope-chip[b-1evi2618ou] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    font-family: var(--font-body);
}

.scope-chip:hover[b-1evi2618ou] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand-teal);
}

.scope-chip--selected[b-1evi2618ou] {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: #fff;
    font-weight: 600;
}

.scope-chip--selected:hover[b-1evi2618ou] {
    opacity: 0.85;
    color: #fff;
}
/* /Components/Pages/SkillImport.razor.rz.scp.css */
/* ── Discover step ──────────────────────────────────────────────────────── */
.import-url-row[b-r14nvjd709] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.import-url-input[b-r14nvjd709] {
    flex: 1;
}

/* ── Tree panel ────────────────────────────────────────────────────────── */
.import-tree-panel[b-r14nvjd709] {
    margin-top: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

.import-tree-header[b-r14nvjd709] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-body);
    font-size: 0.875rem;
}

.import-tree-count[b-r14nvjd709] {
    flex: 1;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.import-tree-select-btn[b-r14nvjd709] {
    font-size: 0.8125rem;
    padding: 0.25rem 0.625rem;
}

.import-tree-content[b-r14nvjd709] {
    max-height: 24rem;
    overflow-y: auto;
    padding: 0.5rem 0;
}

/* ── Tree node ─────────────────────────────────────────────────────────── */
[b-r14nvjd709] .tree-node {
    padding: 0.25rem 0.75rem;
}

[b-r14nvjd709] .tree-node-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.875rem;
}

[b-r14nvjd709] .tree-node-checkbox {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-brand);
}

[b-r14nvjd709] .tree-node-title {
    color: var(--color-text);
}

/* ── Step actions ──────────────────────────────────────────────────────── */
.import-step-actions[b-r14nvjd709] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* ── Progress ──────────────────────────────────────────────────────────── */
.import-progress-bar-track[b-r14nvjd709] {
    width: 100%;
    height: 0.5rem;
    background: var(--color-border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.import-progress-bar-fill[b-r14nvjd709] {
    height: 100%;
    background: var(--color-brand-teal);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.import-progress-summary[b-r14nvjd709] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.import-batch-status[b-r14nvjd709] {
    font-weight: 500;
}

.import-batch-status--done[b-r14nvjd709] {
    color: var(--color-healthy);
}

.import-table[b-r14nvjd709] {
    margin-top: 0.5rem;
}

/* ── Quality badges ────────────────────────────────────────────────────── */
.import-quality-badge[b-r14nvjd709] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
}

.import-quality--ready[b-r14nvjd709] {
    background: color-mix(in srgb, var(--color-healthy) 12%, transparent);
    color: var(--color-healthy);
    border: 1px solid color-mix(in srgb, var(--color-healthy) 30%, transparent);
}

.import-quality--review[b-r14nvjd709] {
    background: color-mix(in srgb, var(--color-degraded) 12%, transparent);
    color: var(--color-degraded);
    border: 1px solid color-mix(in srgb, var(--color-degraded) 30%, transparent);
}

.import-quality--insufficient[b-r14nvjd709] {
    background: color-mix(in srgb, var(--color-down) 12%, transparent);
    color: var(--color-down);
    border: 1px solid color-mix(in srgb, var(--color-down) 30%, transparent);
}
/* /Components/Pages/Skills.razor.rz.scp.css */
.skills-empty[b-t3ryvcj0xm] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 2rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-muted);
    font-family: var(--font-body);
}

.skills-table .skills-td--name[b-t3ryvcj0xm] {
    min-width: 12rem;
    font-weight: 500;
}

.skills-link[b-t3ryvcj0xm] {
    color: var(--color-brand-teal);
    text-decoration: none;
}

.skills-link:hover[b-t3ryvcj0xm] {
    text-decoration: underline;
}

.skills-td--tags[b-t3ryvcj0xm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.skill-tag[b-t3ryvcj0xm] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.skill-status-badge[b-t3ryvcj0xm] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
}

.skill-status-badge--draft[b-t3ryvcj0xm] {
    background: color-mix(in srgb, var(--color-degraded) 12%, transparent);
    color: var(--color-degraded);
    border: 1px solid color-mix(in srgb, var(--color-degraded) 30%, transparent);
}

.skill-status-badge--published[b-t3ryvcj0xm] {
    background: color-mix(in srgb, var(--color-healthy) 12%, transparent);
    color: var(--color-healthy);
    border: 1px solid color-mix(in srgb, var(--color-healthy) 30%, transparent);
}

.skill-routing-badge--always[b-t3ryvcj0xm] {
    background: color-mix(in srgb, var(--color-brand) 12%, transparent);
    color: var(--color-brand);
    border: 1px solid color-mix(in srgb, var(--color-brand) 25%, transparent);
}

.skill-routing-badge--describe[b-t3ryvcj0xm] {
    background: color-mix(in srgb, var(--color-brand-teal) 12%, transparent);
    color: var(--color-brand-teal);
    border: 1px solid color-mix(in srgb, var(--color-brand-teal) 25%, transparent);
    cursor: help;
}

.skill-routing-badge--search[b-t3ryvcj0xm] {
    background: color-mix(in srgb, var(--color-text-muted) 10%, transparent);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    cursor: help;
}

.audit-td--muted[b-t3ryvcj0xm] {
    color: var(--color-text-secondary);
}

.skills-td--actions[b-t3ryvcj0xm] {
    text-align: right;
    white-space: nowrap;
}

.skills-btn-edit[b-t3ryvcj0xm],
.skills-btn-delete[b-t3ryvcj0xm] {
    font-size: 0.8125rem;
    padding: 0.25rem 0.625rem;
}

.skills-btn-edit[b-t3ryvcj0xm] {
    margin-right: 0.5rem;
}

.skills-delete-confirm[b-t3ryvcj0xm] {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
}

.skills-btn-confirm[b-t3ryvcj0xm] {
    font-size: 0.8125rem;
    padding: 0.25rem 0.625rem;
}

/* ── Filter bar ────────────────────────────────────────────────────────── */
.skills-filter-bar[b-t3ryvcj0xm] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.skills-search-input[b-t3ryvcj0xm] {
    flex: 1;
    min-width: 14rem;
}

.skills-filter-select[b-t3ryvcj0xm] {
    width: auto;
    min-width: 9rem;
}

.skills-filter-count[b-t3ryvcj0xm] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.page-header-actions[b-t3ryvcj0xm] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ── Quality badges ────────────────────────────────────────────────────── */
.import-quality-badge[b-t3ryvcj0xm] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
}

.import-quality--ready[b-t3ryvcj0xm] {
    background: color-mix(in srgb, var(--color-healthy) 12%, transparent);
    color: var(--color-healthy);
    border: 1px solid color-mix(in srgb, var(--color-healthy) 30%, transparent);
}

.import-quality--review[b-t3ryvcj0xm] {
    background: color-mix(in srgb, var(--color-degraded) 12%, transparent);
    color: var(--color-degraded);
    border: 1px solid color-mix(in srgb, var(--color-degraded) 30%, transparent);
    cursor: help;
}

.import-quality--insufficient[b-t3ryvcj0xm] {
    background: color-mix(in srgb, var(--color-down) 12%, transparent);
    color: var(--color-down);
    border: 1px solid color-mix(in srgb, var(--color-down) 30%, transparent);
    cursor: help;
}
/* /Components/Pages/SmartCaptureDashboard.razor.rz.scp.css */
/* ── Toolbar ──────────────────────────────────────────────────────── */

.sc-toolbar[b-garjsu00ef] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

/* ── Date range filter ────────────────────────────────────────────── */

.sc-range-filter[b-garjsu00ef] {
    display: flex;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.sc-range-btn[b-garjsu00ef] {
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: none;
    border-right: 1px solid var(--color-border);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}

.sc-range-btn:last-child[b-garjsu00ef] {
    border-right: none;
}

.sc-range-btn:hover:not(:disabled):not(.sc-range-btn--active)[b-garjsu00ef] {
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
}

.sc-range-btn--active[b-garjsu00ef] {
    color: #fff;
    background: var(--color-brand);
    font-weight: 600;
}

.sc-range-btn:disabled[b-garjsu00ef] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Refresh bar ──────────────────────────────────────────────────── */

.sc-refresh-bar[b-garjsu00ef] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.sc-refresh-time[b-garjsu00ef] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.sc-refresh-btn[b-garjsu00ef] {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--font-body);
    transition: color 0.1s, border-color 0.1s, background 0.1s;
}

.sc-refresh-btn:hover:not(:disabled)[b-garjsu00ef] {
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
    background: var(--color-surface-raised);
}

.sc-refresh-btn:disabled[b-garjsu00ef] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Error banner ────────────────────────────────────────────────── */

.sc-error-banner[b-garjsu00ef] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: color-mix(in srgb, var(--color-down) 8%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, transparent);
    border-radius: var(--radius);
    color: var(--color-down-text);
    font-size: 0.8125rem;
}

.sc-error-banner-text[b-garjsu00ef] {
    flex: 1 1 auto;
}

.sc-error-banner-dismiss[b-garjsu00ef] {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--color-down-text);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.125rem 0.25rem;
    border-radius: 2px;
    line-height: 1;
}

.sc-error-banner-dismiss:hover[b-garjsu00ef] {
    background: color-mix(in srgb, var(--color-down) 15%, transparent);
}

/* ── Summary cards ───────────────────────────────────────────────── */

.sc-cards[b-garjsu00ef] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1100px) {
    .sc-cards[b-garjsu00ef] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .sc-cards[b-garjsu00ef] { grid-template-columns: repeat(2, 1fr); }
}

.sc-card[b-garjsu00ef] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.125rem 1.25rem 1rem;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.15s, transform 0.15s;
    cursor: pointer;
    user-select: none;
}

.sc-card:hover[b-garjsu00ef] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.sc-card:focus-visible[b-garjsu00ef] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.sc-card--active[b-garjsu00ef] {
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--color-brand), var(--shadow-card);
    transform: translateY(-1px);
}

/* Coloured top accent stripe */
.sc-card[b-garjsu00ef]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-border);
    border-radius: var(--radius) var(--radius) 0 0;
}

.sc-card--total[b-garjsu00ef]::before      { background: var(--color-brand); }
.sc-card--processed[b-garjsu00ef]::before  { background: var(--color-healthy); }
.sc-card--processing[b-garjsu00ef]::before { background: var(--color-brand-teal); }
.sc-card--stale[b-garjsu00ef]::before      { background: var(--color-degraded); }
.sc-card--exceptions[b-garjsu00ef]::before { background: var(--color-down); }

.sc-card--total.sc-card--active[b-garjsu00ef]      { box-shadow: 0 0 0 2px var(--color-brand), var(--shadow-card); }
.sc-card--processed.sc-card--active[b-garjsu00ef]  { box-shadow: 0 0 0 2px var(--color-healthy), var(--shadow-card); }
.sc-card--processing.sc-card--active[b-garjsu00ef] { box-shadow: 0 0 0 2px var(--color-brand-teal), var(--shadow-card); }
.sc-card--stale.sc-card--active[b-garjsu00ef]      { box-shadow: 0 0 0 2px var(--color-degraded), var(--shadow-card); }
.sc-card--exceptions.sc-card--active[b-garjsu00ef] { box-shadow: 0 0 0 2px var(--color-down), var(--shadow-card); }

/* Card header */
.sc-card-header[b-garjsu00ef] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.625rem;
}

.sc-card-icon[b-garjsu00ef] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

.sc-card--total      .sc-card-icon[b-garjsu00ef] { color: var(--color-brand); }
.sc-card--processed  .sc-card-icon[b-garjsu00ef] { color: var(--color-healthy); }
.sc-card--processing .sc-card-icon[b-garjsu00ef] { color: var(--color-brand-teal); }
.sc-card--stale      .sc-card-icon[b-garjsu00ef] { color: var(--color-degraded); }
.sc-card--exceptions .sc-card-icon[b-garjsu00ef] { color: var(--color-down); }

.sc-card-label[b-garjsu00ef] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex: 1 1 auto;
}

.sc-card-pct[b-garjsu00ef] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 0.875rem;
    padding: 0.1rem 0.4rem;
    line-height: 1.4;
}

/* Big count */
.sc-card-value[b-garjsu00ef] {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-title);
    letter-spacing: -0.03em;
    margin-bottom: 0.625rem;
}

.sc-card--total      .sc-card-value[b-garjsu00ef] { color: var(--color-brand); }
.sc-card--processed  .sc-card-value[b-garjsu00ef] { color: var(--color-healthy-text); }
.sc-card--processing .sc-card-value[b-garjsu00ef] { color: var(--color-processing-text); }
.sc-card--stale      .sc-card-value[b-garjsu00ef] { color: var(--color-degraded-text); }
.sc-card--exceptions .sc-card-value[b-garjsu00ef] { color: var(--color-down-text); }

/* Footer */
.sc-card-footer[b-garjsu00ef] { margin-top: auto; }

.sc-card-sub[b-garjsu00ef] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    letter-spacing: 0.01em;
}

/* Progress bar */
.sc-card-bar[b-garjsu00ef] {
    margin-top: auto;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    overflow: hidden;
}

.sc-card-bar-fill[b-garjsu00ef] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
    background: var(--color-border);
}

.sc-card--processed  .sc-card-bar-fill[b-garjsu00ef] { background: var(--color-healthy); }
.sc-card--processing .sc-card-bar-fill[b-garjsu00ef] { background: var(--color-brand-teal); }
.sc-card--stale      .sc-card-bar-fill[b-garjsu00ef] { background: var(--color-degraded); }
.sc-card--exceptions .sc-card-bar-fill[b-garjsu00ef] { background: var(--color-down); }

/* ── Donut chart ─────────────────────────────────────────────────── */

.sc-overview-row[b-garjsu00ef] {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

@media (max-width: 600px) {
    .sc-overview-row[b-garjsu00ef] {
        flex-direction: column;
        gap: 1rem;
    }
}

.sc-donut-wrap[b-garjsu00ef] {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.sc-donut[b-garjsu00ef] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(
        var(--color-healthy) 0deg var(--sc-deg-processed, 0deg),
        var(--color-brand-teal) var(--sc-deg-processed, 0deg) var(--sc-deg-processing, 0deg),
        var(--color-degraded) var(--sc-deg-processing, 0deg) var(--sc-deg-stale, 0deg),
        var(--color-down) var(--sc-deg-stale, 0deg) 360deg
    );
    mask: radial-gradient(circle, transparent 38px, black 39px);
    -webkit-mask: radial-gradient(circle, transparent 38px, black 39px);
}

.sc-donut-center[b-garjsu00ef] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sc-donut-total[b-garjsu00ef] {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-title);
    color: var(--color-text-primary);
    line-height: 1;
}

.sc-donut-label[b-garjsu00ef] {
    font-size: 0.625rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.125rem;
}

/* Legend */
.sc-donut-legend[b-garjsu00ef] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sc-legend-item[b-garjsu00ef] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sc-legend-dot[b-garjsu00ef] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.sc-legend-dot--processed[b-garjsu00ef]  { background: var(--color-healthy); }
.sc-legend-dot--processing[b-garjsu00ef] { background: var(--color-brand-teal); }
.sc-legend-dot--stale[b-garjsu00ef]      { background: var(--color-degraded); }
.sc-legend-dot--exceptions[b-garjsu00ef] { background: var(--color-down); }

.sc-legend-label[b-garjsu00ef] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    min-width: 7rem;
}

.sc-legend-value[b-garjsu00ef] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* ── Section title ───────────────────────────────────────────────── */

.sc-section[b-garjsu00ef] {
    margin-bottom: 2rem;
}

.sc-section-title[b-garjsu00ef] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin: 0 0 0.75rem;
}

.sc-loading[b-garjsu00ef] {
    color: var(--color-text-secondary);
    padding: 2rem 0;
    text-align: center;
}

/* ── Site card grid ──────────────────────────────────────────────── */

.sc-site-grid[b-garjsu00ef] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.sc-site-card[b-garjsu00ef] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
    min-height: 140px;
}

.sc-site-card:hover[b-garjsu00ef] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
    border-color: var(--color-brand-teal);
}

.sc-site-header[b-garjsu00ef] {
    margin-bottom: 0.75rem;
}

.sc-site-name[b-garjsu00ef] {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: var(--font-title);
    color: var(--color-text-primary);
    line-height: 1.3;
}

.sc-site-meta[b-garjsu00ef] {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: 0.125rem;
}

.sc-site-error[b-garjsu00ef] {
    font-size: 0.8125rem;
    color: var(--color-down-text);
    background: color-mix(in srgb, var(--color-down) 8%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, transparent);
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    margin-top: auto;
}

/* Counts grid */
.sc-site-counts[b-garjsu00ef] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.375rem;
    margin-bottom: 0.625rem;
}

.sc-site-count[b-garjsu00ef] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.sc-site-count-value[b-garjsu00ef] {
    font-size: 1.125rem;
    font-weight: 700;
    font-family: var(--font-title);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.sc-site-count--processed  .sc-site-count-value[b-garjsu00ef] { color: var(--color-healthy-text); }
.sc-site-count--processing .sc-site-count-value[b-garjsu00ef] { color: var(--color-processing-text); }
.sc-site-count--stale      .sc-site-count-value[b-garjsu00ef] { color: var(--color-degraded-text); }
.sc-site-count--exceptions .sc-site-count-value[b-garjsu00ef] { color: var(--color-down-text); }

.sc-site-count-label[b-garjsu00ef] {
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* Stacked bar */
.sc-bar[b-garjsu00ef] {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    gap: 1px;
    background: var(--color-border);
    margin-bottom: 0.5rem;
}

.sc-bar-segment[b-garjsu00ef] {
    min-width: 3px;
    border-radius: 1px;
}

.sc-bar-segment--processed[b-garjsu00ef]  { background: var(--color-healthy); }
.sc-bar-segment--processing[b-garjsu00ef] { background: var(--color-brand-teal); }
.sc-bar-segment--stale[b-garjsu00ef]      { background: var(--color-degraded); }
.sc-bar-segment--exceptions[b-garjsu00ef] { background: var(--color-down); }

/* Footer */
.sc-site-footer[b-garjsu00ef] {
    margin-top: auto;
}

.sc-site-updated[b-garjsu00ef] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/SmartCaptureDocuments.razor.rz.scp.css */
/* ── Back link ────────────────────────────────────────────────────── */

.scd-back-link[b-bwg2o4tjr2] {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-brand-teal);
    text-decoration: none;
    margin-bottom: 0.75rem;
}

.scd-back-link:hover[b-bwg2o4tjr2] {
    text-decoration: underline;
}

/* ── Toolbar / date range ────────────────────────────────────────── */

.scd-toolbar[b-bwg2o4tjr2] {
    margin-bottom: 1.25rem;
}

.scd-range-filter[b-bwg2o4tjr2] {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.scd-range-btn[b-bwg2o4tjr2] {
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: none;
    border-right: 1px solid var(--color-border);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}

.scd-range-btn:last-child[b-bwg2o4tjr2] {
    border-right: none;
}

.scd-range-btn:hover:not(:disabled):not(.scd-range-btn--active)[b-bwg2o4tjr2] {
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
}

.scd-range-btn--active[b-bwg2o4tjr2] {
    color: #fff;
    background: var(--color-brand);
    font-weight: 600;
}

.scd-range-btn:disabled[b-bwg2o4tjr2] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Action bar ──────────────────────────────────────────────────── */

.scd-action-bar[b-bwg2o4tjr2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    margin-bottom: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-brand);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(7, 70, 132, 0.08);
}

.scd-action-count[b-bwg2o4tjr2] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-brand);
    margin-right: 0.5rem;
    white-space: nowrap;
}

.scd-action-btn[b-bwg2o4tjr2] {
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.scd-action-btn:hover:not(:disabled)[b-bwg2o4tjr2] {
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

.scd-action-btn:disabled[b-bwg2o4tjr2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.scd-action-btn--primary[b-bwg2o4tjr2] {
    color: #fff;
    background: var(--color-brand);
    border-color: var(--color-brand);
}

.scd-action-btn--primary:hover:not(:disabled)[b-bwg2o4tjr2] {
    background: #063a6e;
    color: #fff;
}

.scd-action-btn--clear[b-bwg2o4tjr2] {
    border: none;
    background: none;
    color: var(--color-text-secondary);
    text-decoration: underline;
    padding: 0.3rem 0.375rem;
}

.scd-action-btn--clear:hover:not(:disabled)[b-bwg2o4tjr2] {
    color: var(--color-text-primary);
}

.scd-action-group[b-bwg2o4tjr2] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.scd-select--sm[b-bwg2o4tjr2] {
    padding: 0.25rem 1.75rem 0.25rem 0.5rem;
    font-size: 0.75rem;
    min-width: 120px;
}

.scd-input--sm[b-bwg2o4tjr2] {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    min-width: 140px;
}

.scd-input--sm:focus[b-bwg2o4tjr2] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 1px;
}

.scd-move-result[b-bwg2o4tjr2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: var(--radius);
    font-size: 0.8125rem;
}

.scd-move-result--success[b-bwg2o4tjr2] {
    background: color-mix(in srgb, var(--color-healthy) 10%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-healthy) 30%, transparent);
    color: var(--color-healthy-text);
}

.scd-move-result--error[b-bwg2o4tjr2] {
    background: color-mix(in srgb, var(--color-down) 8%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-down) 30%, transparent);
    color: var(--color-down-text);
}

.scd-move-result-dismiss[b-bwg2o4tjr2] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    color: inherit;
    opacity: 0.6;
    padding: 0 0.25rem;
}

.scd-move-result-dismiss:hover[b-bwg2o4tjr2] {
    opacity: 1;
}

/* ── Filters ─────────────────────────────────────────────────────── */

.scd-filters[b-bwg2o4tjr2] {
    margin-bottom: 1rem;
}

.scd-filter-row[b-bwg2o4tjr2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.scd-select[b-bwg2o4tjr2] {
    padding: 0.4rem 2rem 0.4rem 0.75rem;
    font-size: 0.8125rem;
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23475569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    min-width: 140px;
}

.scd-select:focus[b-bwg2o4tjr2] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 1px;
}

.scd-result-count[b-bwg2o4tjr2] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ── Content layout (table area) ─────────────────────────────────── */

.scd-content[b-bwg2o4tjr2] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.scd-content > .scd-table-wrap[b-bwg2o4tjr2],
.scd-content > .empty-state[b-bwg2o4tjr2],
.scd-content > .scd-loading[b-bwg2o4tjr2] {
    flex: 1;
    min-width: 0;
}

/* When the fixed panel is open, shrink the content to make room */
.scd-content--with-panel[b-bwg2o4tjr2] {
    margin-right: var(--scd-panel-width, 520px);
}

/* ── Table ────────────────────────────────────────────────────────── */

.scd-table-wrap[b-bwg2o4tjr2] {
    overflow-x: auto;
}

.scd-table[b-bwg2o4tjr2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.scd-table th[b-bwg2o4tjr2] {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--color-border);
    font-weight: 600;
    color: #475569;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.scd-th-check[b-bwg2o4tjr2] {
    width: 2rem;
    text-align: center;
}

.scd-th-sortable[b-bwg2o4tjr2] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.1s;
}

.scd-th-sortable:hover[b-bwg2o4tjr2] {
    color: var(--color-brand);
}

.scd-th-num[b-bwg2o4tjr2] {
    text-align: right;
}

.scd-sort-icon[b-bwg2o4tjr2] {
    font-size: 0.625rem;
    margin-left: 0.2rem;
    color: var(--color-brand);
}

.scd-sort-icon--inactive[b-bwg2o4tjr2] {
    color: var(--color-border);
}

.scd-table td[b-bwg2o4tjr2] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.scd-table tbody tr[b-bwg2o4tjr2] {
    cursor: pointer;
    transition: background 0.1s;
}

.scd-table tbody tr:hover td[b-bwg2o4tjr2] {
    background: var(--color-surface-raised);
}

.scd-td-check[b-bwg2o4tjr2] {
    text-align: center;
    width: 2rem;
}

.scd-td-filename[b-bwg2o4tjr2] {
    max-width: 320px;
}

.scd-filename[b-bwg2o4tjr2] {
    font-weight: 500;
}

.scd-extension[b-bwg2o4tjr2] {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    margin-left: 0.125rem;
}

.scd-td-stage[b-bwg2o4tjr2] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.scd-th-center[b-bwg2o4tjr2] {
    text-align: center;
}

.scd-td-active[b-bwg2o4tjr2] {
    text-align: center;
}

.scd-icon[b-bwg2o4tjr2] {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.scd-icon--active[b-bwg2o4tjr2] {
    color: var(--color-brand-teal);
}

.scd-icon--idle[b-bwg2o4tjr2] {
    color: var(--color-border);
}

.scd-td-profile[b-bwg2o4tjr2] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scd-td-classification[b-bwg2o4tjr2] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scd-td-source[b-bwg2o4tjr2] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
}

.scd-td-date[b-bwg2o4tjr2] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

/* Status badge */
.scd-status[b-bwg2o4tjr2] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.scd-status--exported[b-bwg2o4tjr2] {
    background: #dcfce7;
    color: #166534;
}

.scd-status--tweaked[b-bwg2o4tjr2] {
    background: #e0f2fe;
    color: #0e7490;
}

.scd-status--actioning[b-bwg2o4tjr2] {
    background: #fef3c7;
    color: #92400e;
}

.scd-status--exception[b-bwg2o4tjr2] {
    background: #fef2f2;
    color: #991b1b;
}

.scd-status--processing[b-bwg2o4tjr2] {
    background: #e0f2fe;
    color: #0e7490;
}

.scd-status--default[b-bwg2o4tjr2] {
    background: #f1f5f9;
    color: #475569;
}

/* Row states */
.scd-row--selected td[b-bwg2o4tjr2] {
    background: #eff6ff;
}

.scd-row--selected:hover td[b-bwg2o4tjr2] {
    background: #dbeafe;
}

.scd-row--active td[b-bwg2o4tjr2] {
    background: #eff6ff;
}

.scd-row--active td:first-child[b-bwg2o4tjr2] {
    box-shadow: inset 3px 0 0 var(--color-brand);
}

/* ── Detail panel (fixed right edge, below nav) ─────────────────── */

.scd-panel[b-bwg2o4tjr2] {
    position: fixed;
    top: 3.5rem;        /* below app-header */
    right: 0;
    bottom: 0;
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    z-index: 90;        /* below app-header z-index of 100 */
}

/* Drag handle on left edge */
.scd-panel-drag[b-bwg2o4tjr2] {
    position: absolute;
    top: 0;
    left: -4px;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    z-index: 91;
    background: transparent;
    transition: background 0.15s;
}

.scd-panel-drag[b-bwg2o4tjr2]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 40px;
    border-radius: 1px;
    background: var(--color-border);
    transition: background 0.15s, height 0.15s;
}

.scd-panel-drag:hover[b-bwg2o4tjr2]::after,
.scd-panel-drag:active[b-bwg2o4tjr2]::after {
    background: var(--color-brand-teal);
    height: 60px;
}

.scd-panel-header[b-bwg2o4tjr2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem 1.125rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.scd-panel-title[b-bwg2o4tjr2] {
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-title);
    color: var(--color-text-primary);
    margin: 0;
    word-break: break-all;
    line-height: 1.3;
}

.scd-panel-close[b-bwg2o4tjr2] {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

.scd-panel-close:hover[b-bwg2o4tjr2] {
    color: var(--color-text-primary);
}

/* ── Tabs ─────────────────────────────────────────────────────────── */

.scd-tabs[b-bwg2o4tjr2] {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE / legacy Edge */
}

.scd-tabs[b-bwg2o4tjr2]::-webkit-scrollbar {
    display: none;                  /* Chrome / Safari / Edge */
}

.scd-tab[b-bwg2o4tjr2] {
    padding: 0.5rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.scd-tab:hover[b-bwg2o4tjr2] {
    color: var(--color-text-primary);
}

.scd-tab--active[b-bwg2o4tjr2] {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand);
}

/* ── Panel body ───────────────────────────────────────────────────── */

.scd-panel-body[b-bwg2o4tjr2] {
    padding: 1rem 1.125rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Detail list */
.scd-detail-list[b-bwg2o4tjr2] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.375rem 0.75rem;
    margin: 0 0 1.25rem;
}

.scd-detail-list dt[b-bwg2o4tjr2] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 0.125rem;
}

.scd-detail-list dd[b-bwg2o4tjr2] {
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    margin: 0;
    word-break: break-all;
}

.scd-detail-muted[b-bwg2o4tjr2] {
    color: var(--color-text-secondary);
}

.scd-detail-mono[b-bwg2o4tjr2] {
    font-size: 0.6875rem;
    font-family: monospace;
    color: var(--color-text-secondary);
    word-break: break-all;
}

/* Panel actions */
.scd-panel-actions[b-bwg2o4tjr2] {
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}

.scd-panel-action-btns[b-bwg2o4tjr2] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.scd-panel-action-btns .scd-action-btn[b-bwg2o4tjr2] {
    width: 100%;
    text-align: center;
}

/* ── Tab content states ──────────────────────────────────────────── */

[b-bwg2o4tjr2] .scd-tab-loading {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    text-align: center;
    padding: 2rem 0;
}

[b-bwg2o4tjr2] .scd-tab-error {
    font-size: 0.8125rem;
    color: var(--color-down-text);
    background: color-mix(in srgb, var(--color-down) 8%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, transparent);
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
}

[b-bwg2o4tjr2] .scd-tab-empty {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    text-align: center;
    padding: 2rem 0;
}

/* ── Data grids (::deep needed for elements inside panel body
      that don't receive the Blazor CSS isolation attribute) ─────── */

[b-bwg2o4tjr2] .scd-grid-scroll {
    overflow: auto;
    flex: 1;
    min-height: 0;
}

[b-bwg2o4tjr2] .scd-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

[b-bwg2o4tjr2] .scd-grid th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface);
    border-bottom: 2px solid var(--color-border);
    font-weight: 600;
    color: #475569;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

[b-bwg2o4tjr2] .scd-grid td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: var(--color-text-primary);
    line-height: 1.4;
}

[b-bwg2o4tjr2] .scd-grid tbody tr {
    transition: background 0.1s;
}

[b-bwg2o4tjr2] .scd-grid tbody tr:hover td {
    background: var(--color-surface-raised, #f8fafc);
}

/* Compact variant for dense data (OCR) */
[b-bwg2o4tjr2] .scd-grid--compact td {
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

[b-bwg2o4tjr2] .scd-grid--compact th {
    padding: 0.375rem 0.5rem;
}

[b-bwg2o4tjr2] .scd-grid-label {
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

[b-bwg2o4tjr2] .scd-grid-mono {
    font-family: monospace;
    font-size: 0.75rem;
}

/* Key-value grid variant (Results, Attributes) */
[b-bwg2o4tjr2] .scd-grid--kv td:first-child {
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
    width: 1%;
}

[b-bwg2o4tjr2] .scd-grid--kv td:last-child {
    word-break: break-word;
}

/* Section header rows in attribute grids */
[b-bwg2o4tjr2] .scd-grid-section td {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 5%, var(--color-surface));
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--color-border);
}

/* ── File toolbar ────────────────────────────────────────────────── */

[b-bwg2o4tjr2] .scd-file-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    flex-shrink: 0;
}

[b-bwg2o4tjr2] .scd-file-toolbar-hint {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

[b-bwg2o4tjr2] .scd-toggle {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    user-select: none;
}

[b-bwg2o4tjr2] .scd-toggle input {
    accent-color: var(--color-brand-teal);
}

[b-bwg2o4tjr2] .scd-toggle-label {
    font-weight: 500;
}

[b-bwg2o4tjr2] .scd-zoom-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

[b-bwg2o4tjr2] .scd-zoom-btn {
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: color 0.1s, border-color 0.1s;
}

[b-bwg2o4tjr2] .scd-zoom-btn:hover {
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

[b-bwg2o4tjr2] .scd-zoom-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    min-width: 2.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ── File preview ────────────────────────────────────────────────── */

[b-bwg2o4tjr2] .scd-file-preview {
    flex: 1;
    min-height: 0;
    margin: 0 -1.125rem -1rem;   /* bleed sides + bottom to panel edges */
    overflow: auto;               /* scroll the PDF canvas */
    background: #525659;          /* match PDF viewer background */
    position: relative;
}

/* PDF.js wrapper — holds the canvas and overlay in sync */
[b-bwg2o4tjr2] .scd-pdfjs-wrapper {
    position: relative;
    display: inline-block;
}

[b-bwg2o4tjr2] .scd-pdfjs-canvas {
    display: block;
}

/* OCR overlay — exact same size as the canvas, positioned on top */
[b-bwg2o4tjr2] .scd-pdfjs-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

[b-bwg2o4tjr2] .scd-ocr-word {
    position: absolute;
    background: rgba(14, 165, 198, 0.18);
    border: 1px solid rgba(14, 165, 198, 0.4);
    border-radius: 1px;
    pointer-events: auto;
    cursor: default;
}

[b-bwg2o4tjr2] .scd-ocr-word:hover {
    background: rgba(14, 165, 198, 0.35);
    border-color: var(--color-brand-teal);
    z-index: 10;
}

/* ── OCR tooltip ─────────────────────────────────────────────────── */

[b-bwg2o4tjr2] .scd-ocr-tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    max-width: 320px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 0.625rem 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06);
    pointer-events: none;
    z-index: 200;
    font-size: 0.75rem;
    line-height: 1.4;
}

/* Arrow */
[b-bwg2o4tjr2] .scd-ocr-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #0f172a;
}

[b-bwg2o4tjr2] .scd-ocr-word:hover .scd-ocr-tip {
    display: block;
}

/* If tooltip would go off the left edge, anchor to left */
[b-bwg2o4tjr2] .scd-ocr-word:hover .scd-ocr-tip {
    display: block;
}

[b-bwg2o4tjr2] .scd-ocr-tip-text {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    font-family: var(--font-title);
    color: #ffffff;
    margin-bottom: 0.5rem;
    word-break: break-word;
    letter-spacing: 0.01em;
}

[b-bwg2o4tjr2] .scd-ocr-tip-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.625rem;
    font-size: 0.6875rem;
}

[b-bwg2o4tjr2] .scd-ocr-tip-label {
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.5625rem;
    padding-top: 0.1rem;
}

[b-bwg2o4tjr2] .scd-ocr-tip-conf {
    display: inline-block;
    padding: 0.05rem 0.375rem;
    border-radius: 0.625rem;
    font-weight: 700;
    font-size: 0.625rem;
    letter-spacing: 0.02em;
}

[b-bwg2o4tjr2] .scd-ocr-tip-conf--high {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

[b-bwg2o4tjr2] .scd-ocr-tip-conf--mid {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

[b-bwg2o4tjr2] .scd-ocr-tip-conf--low {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* ── Workflow diagram modal ───────────────────────────────────────── */

.wf-backdrop[b-bwg2o4tjr2] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 500;
    backdrop-filter: blur(2px);
}

.wf-modal[b-bwg2o4tjr2] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(90vw, 960px);
    max-height: 85vh;
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
    z-index: 501;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wf-modal-header[b-bwg2o4tjr2] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.wf-modal-title[b-bwg2o4tjr2] {
    font-size: 1.125rem;
    font-weight: 700;
    font-family: var(--font-title);
    color: var(--color-text-primary);
    margin: 0;
}

.wf-modal-subtitle[b-bwg2o4tjr2] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin: 0.125rem 0 0;
}

.wf-doc-badge[b-bwg2o4tjr2] {
    margin-left: auto;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 8%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-brand) 20%, transparent);
    padding: 0.25rem 0.625rem;
    border-radius: 1rem;
    white-space: nowrap;
    align-self: center;
}

.wf-modal-close[b-bwg2o4tjr2] {
    background: none;
    border: none;
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.wf-modal-close:hover[b-bwg2o4tjr2] {
    color: var(--color-text-primary);
}

.wf-modal-body[b-bwg2o4tjr2] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

/* ── Timeline flow ────────────────────────────────────────────────── */

.wf-flow[b-bwg2o4tjr2] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 0 0;
}

.wf-step[b-bwg2o4tjr2] {
    display: flex;
    gap: 1rem;
    min-height: 0;
}

/* ── Timeline (left column: dots + lines) ────────────────────────── */

.wf-timeline[b-bwg2o4tjr2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 28px;
    flex-shrink: 0;
}

.wf-dot[b-bwg2o4tjr2] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.wf-dot--sm[b-bwg2o4tjr2] { width: 18px; height: 18px; }

.wf-dot--done[b-bwg2o4tjr2] { background: var(--color-healthy); }
.wf-dot--current[b-bwg2o4tjr2] { background: var(--color-brand); }
.wf-dot--failed[b-bwg2o4tjr2] { background: var(--color-down); }
.wf-dot--pending[b-bwg2o4tjr2] { background: var(--color-border); }

.wf-dot-num[b-bwg2o4tjr2] {
    font-size: 0.625rem;
    font-weight: 700;
    color: #fff;
}

.wf-dot-pulse[b-bwg2o4tjr2] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: wfPulse-b-bwg2o4tjr2 1.5s ease-in-out infinite;
}

@keyframes wfPulse-b-bwg2o4tjr2 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.7); }
}

.wf-line[b-bwg2o4tjr2] {
    width: 2px;
    flex: 1;
    min-height: 12px;
    background: var(--color-border);
}

.wf-line--done[b-bwg2o4tjr2] {
    background: var(--color-healthy);
}

/* ── Card (right column: stage info) ─────────────────────────────── */

.wf-card[b-bwg2o4tjr2] {
    flex: 1;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    margin-bottom: 0.5rem;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.wf-card--done[b-bwg2o4tjr2] { border-color: color-mix(in srgb, var(--color-healthy) 50%, var(--color-border)); }
.wf-card--current[b-bwg2o4tjr2] {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 10%, transparent);
}
.wf-card--failed[b-bwg2o4tjr2] { border-color: color-mix(in srgb, var(--color-down) 50%, var(--color-border)); }
.wf-card--pending[b-bwg2o4tjr2] { opacity: 0.4; }
.wf-card--finish[b-bwg2o4tjr2] { border-style: dashed; }

.wf-card-top[b-bwg2o4tjr2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.wf-card-name[b-bwg2o4tjr2] {
    font-size: 0.8125rem;
    font-weight: 700;
    font-family: var(--font-title);
    color: var(--color-text-primary);
}

.wf-card--current .wf-card-name[b-bwg2o4tjr2] { color: var(--color-brand); }

.wf-badge[b-bwg2o4tjr2] {
    margin-left: auto;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.4rem;
    border-radius: 0.75rem;
    white-space: nowrap;
}

.wf-badge--done[b-bwg2o4tjr2] { background: color-mix(in srgb, var(--color-healthy) 12%, transparent); color: var(--color-healthy-text); }
.wf-badge--current[b-bwg2o4tjr2] { background: color-mix(in srgb, var(--color-brand) 12%, transparent); color: var(--color-brand); }
.wf-badge--failed[b-bwg2o4tjr2] { background: color-mix(in srgb, var(--color-down) 12%, transparent); color: var(--color-down-text); }

/* Journey details (timestamps + duration) */
.wf-card-journey[b-bwg2o4tjr2] {
    padding: 0 0.75rem 0.5rem;
}

.wf-card-times[b-bwg2o4tjr2] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
}

.wf-time-label[b-bwg2o4tjr2] {
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wf-time-value[b-bwg2o4tjr2] {
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
}

.wf-time-dur[b-bwg2o4tjr2] {
    font-weight: 700;
    color: var(--color-brand-teal);
    font-size: 0.6875rem;
}

/* Fail branch indicator */
.wf-card-branch[b-bwg2o4tjr2] {
    padding: 0.3rem 0.75rem;
    font-size: 0.625rem;
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised, #f8fafc);
}

.wf-card-branch--active[b-bwg2o4tjr2] {
    background: color-mix(in srgb, var(--color-down) 6%, var(--color-surface));
    color: var(--color-down-text);
    font-weight: 600;
}

.wf-branch-arrow[b-bwg2o4tjr2] {
    display: inline-block;
    color: var(--color-down);
    font-weight: 700;
}

/* Move-to-stage action in workflow card */
.wf-card-action[b-bwg2o4tjr2] {
    padding: 0.3rem 0.75rem;
    border-top: 1px solid var(--color-border);
}

.wf-move-btn[b-bwg2o4tjr2] {
    width: 100%;
    padding: 0.3rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 6%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-brand) 20%, transparent);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.wf-move-btn:hover:not(:disabled)[b-bwg2o4tjr2] {
    background: var(--color-brand);
    color: #fff;
}

.wf-move-btn:disabled[b-bwg2o4tjr2] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Legend ───────────────────────────────────────────────────────── */

.wf-legend[b-bwg2o4tjr2] {
    display: flex;
    gap: 1.25rem;
    padding-top: 1.25rem;
    margin-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.wf-legend-item[b-bwg2o4tjr2] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

.wf-legend-dot[b-bwg2o4tjr2] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid;
}

.wf-legend-dot--current[b-bwg2o4tjr2] { border-color: var(--color-brand); background: color-mix(in srgb, var(--color-brand) 20%, transparent); }
.wf-legend-dot--visited[b-bwg2o4tjr2] { border-color: var(--color-healthy); background: color-mix(in srgb, var(--color-healthy) 20%, transparent); }
.wf-legend-dot--failed[b-bwg2o4tjr2] { border-color: var(--color-down); background: color-mix(in srgb, var(--color-down) 20%, transparent); }
.wf-legend-dot--pending[b-bwg2o4tjr2] { border-color: var(--color-border); background: transparent; }

.page-header-actions[b-bwg2o4tjr2] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ── Misc ────────────────────────────────────────────────────────── */

.scd-loading[b-bwg2o4tjr2] {
    color: var(--color-text-secondary);
    padding: 2rem 0;
    text-align: center;
}
/* /Components/Pages/SmartCaptureSite.razor.rz.scp.css */
/* ── Back link ────────────────────────────────────────────────────── */

.sc-back-link[b-239kwq6bnt] {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-brand-teal);
    text-decoration: none;
    margin-bottom: 0.75rem;
}

.sc-back-link:hover[b-239kwq6bnt] {
    text-decoration: underline;
}

/* ── Summary cards ───────────────────────────────────────────────── */

.scs-cards[b-239kwq6bnt] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .scs-cards[b-239kwq6bnt] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 500px) {
    .scs-cards[b-239kwq6bnt] { grid-template-columns: repeat(2, 1fr); }
}

.scs-card[b-239kwq6bnt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}

.scs-card[b-239kwq6bnt]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-border);
    border-radius: var(--radius) var(--radius) 0 0;
}

.scs-card--total[b-239kwq6bnt]::before      { background: var(--color-brand); }
.scs-card--processed[b-239kwq6bnt]::before  { background: var(--color-healthy); }
.scs-card--processing[b-239kwq6bnt]::before { background: var(--color-brand-teal); }
.scs-card--stale[b-239kwq6bnt]::before      { background: var(--color-degraded); }
.scs-card--exceptions[b-239kwq6bnt]::before { background: var(--color-down); }

.scs-card-value[b-239kwq6bnt] {
    font-size: 1.75rem;
    font-weight: 700;
    font-family: var(--font-title);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.scs-card--total      .scs-card-value[b-239kwq6bnt] { color: var(--color-brand); }
.scs-card--processed  .scs-card-value[b-239kwq6bnt] { color: #166534; }
.scs-card--processing .scs-card-value[b-239kwq6bnt] { color: #0e7490; }
.scs-card--stale      .scs-card-value[b-239kwq6bnt] { color: #92400e; }
.scs-card--exceptions .scs-card-value[b-239kwq6bnt] { color: #991b1b; }

.scs-card-label[b-239kwq6bnt] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

/* ── Toolbar / date range ────────────────────────────────────────── */

.scs-toolbar[b-239kwq6bnt] {
    margin-bottom: 1.25rem;
}

.scs-range-filter[b-239kwq6bnt] {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.scs-range-btn[b-239kwq6bnt] {
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: none;
    border-right: 1px solid var(--color-border);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}

.scs-range-btn:last-child[b-239kwq6bnt] {
    border-right: none;
}

.scs-range-btn:hover:not(:disabled):not(.scs-range-btn--active)[b-239kwq6bnt] {
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
}

.scs-range-btn--active[b-239kwq6bnt] {
    color: #fff;
    background: var(--color-brand);
    font-weight: 600;
}

.scs-range-btn:disabled[b-239kwq6bnt] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Profile filter ─────────────────────────────────────────────── */

.scs-filters[b-239kwq6bnt] {
    margin-bottom: 1.5rem;
}

.scs-filter-row[b-239kwq6bnt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.scs-profile-select[b-239kwq6bnt] {
    padding: 0.4rem 2rem 0.4rem 0.75rem;
    font-size: 0.8125rem;
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23475569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    min-width: 200px;
    max-width: 360px;
}

.scs-profile-select:focus[b-239kwq6bnt] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 1px;
}

.scs-filter-clear[b-239kwq6bnt] {
    padding: 0.35rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: color 0.1s, border-color 0.1s;
}

.scs-filter-clear:hover[b-239kwq6bnt] {
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

/* ── Profile table ───────────────────────────────────────────────── */

.scs-table-wrap[b-239kwq6bnt] {
    overflow-x: auto;
}

.scs-table[b-239kwq6bnt] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.scs-table th[b-239kwq6bnt] {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--color-border);
    font-weight: 600;
    color: #475569;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.scs-th-sortable[b-239kwq6bnt] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.1s;
}

.scs-th-sortable:hover[b-239kwq6bnt] {
    color: var(--color-brand);
}

.scs-sort-icon[b-239kwq6bnt] {
    font-size: 0.6875rem;
    margin-left: 0.2rem;
    color: var(--color-brand);
}

.scs-sort-icon--inactive[b-239kwq6bnt] {
    color: var(--color-border);
}

.scs-th-num[b-239kwq6bnt] {
    text-align: right;
}

.scs-table td[b-239kwq6bnt] {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.scs-row-link[b-239kwq6bnt] {
    cursor: pointer;
}

.scs-table tbody tr:hover td[b-239kwq6bnt] {
    background: var(--color-surface-raised);
}

.scs-row-link:hover td[b-239kwq6bnt] {
    background: #eff6ff;
}

.scs-profile-name[b-239kwq6bnt] {
    font-weight: 500;
}

.scs-td-num[b-239kwq6bnt] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.scs-td-num--processed[b-239kwq6bnt]  { color: #166534; }
.scs-td-num--processing[b-239kwq6bnt] { color: #0e7490; }
.scs-td-num--stale[b-239kwq6bnt]      { color: #92400e; }
.scs-td-num--exceptions[b-239kwq6bnt] { color: #991b1b; }

/* Stacked bar inside table */
.scs-bar[b-239kwq6bnt] {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    gap: 1px;
    background: var(--color-border);
    min-width: 80px;
}

.scs-bar-segment[b-239kwq6bnt] {
    min-width: 3px;
    border-radius: 1px;
}

.scs-bar-segment--processed[b-239kwq6bnt]  { background: var(--color-healthy); }
.scs-bar-segment--processing[b-239kwq6bnt] { background: var(--color-brand-teal); }
.scs-bar-segment--stale[b-239kwq6bnt]      { background: var(--color-degraded); }
.scs-bar-segment--exceptions[b-239kwq6bnt] { background: var(--color-down); }

/* ── View toggle bar ──────────────────────────────────────────────── */

.scs-view-bar[b-239kwq6bnt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.scs-view-toggle[b-239kwq6bnt] {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.scs-view-btn[b-239kwq6bnt] {
    padding: 0.35rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: none;
    border-right: 1px solid var(--color-border);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}

.scs-view-btn:last-child[b-239kwq6bnt] {
    border-right: none;
}

.scs-view-btn:hover:not(.scs-view-btn--active)[b-239kwq6bnt] {
    color: var(--color-text-primary);
    background: var(--color-surface-raised, #f8fafc);
}

.scs-view-btn--active[b-239kwq6bnt] {
    color: #fff;
    background: var(--color-brand);
    font-weight: 600;
}

/* ── Misc ────────────────────────────────────────────────────────── */

.scs-loading[b-239kwq6bnt] {
    color: var(--color-text-secondary);
    padding: 2rem 0;
    text-align: center;
}
/* /Components/Pages/StatusOverview.razor.rz.scp.css */
/* ─── History scale selector ─────────────────────────────────── */

.history-scale-bar[b-4mnc3jbqmo] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.history-scale-label[b-4mnc3jbqmo] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

/* Unified segmented control */
.history-scale-group[b-4mnc3jbqmo] {
    display: inline-flex;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 2px;
    gap: 1px;
}

.history-scale-btn[b-4mnc3jbqmo] {
    padding: 0.2rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.1s, background 0.15s, box-shadow 0.15s;
    font-family: var(--font-body);
    white-space: nowrap;
    line-height: 1.5;
}

.history-scale-btn:hover:not(.history-scale-btn--active)[b-4mnc3jbqmo] {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.65);
}

.history-scale-btn--active[b-4mnc3jbqmo] {
    color: var(--color-brand);
    background: var(--color-surface);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(7, 70, 132, 0.13), 0 0 0 0.5px rgba(7, 70, 132, 0.08);
}

/* ─── Status summary grid ────────────────────────────────────── */

.status-summary[b-4mnc3jbqmo] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 1100px) {
    .status-summary[b-4mnc3jbqmo] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .status-summary[b-4mnc3jbqmo] { grid-template-columns: repeat(2, 1fr); }
}

.status-summary-item[b-4mnc3jbqmo] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.125rem 1.25rem 1rem;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.15s, transform 0.15s;
    cursor: pointer;
    user-select: none;
}

.status-summary-item:hover[b-4mnc3jbqmo] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.status-summary-item:focus-visible[b-4mnc3jbqmo] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

/* Selected / active tile */
.status-summary-item--active[b-4mnc3jbqmo] {
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--color-brand), var(--shadow-card);
    transform: translateY(-1px);
}

.status-summary-item--healthy.status-summary-item--active[b-4mnc3jbqmo]   { box-shadow: 0 0 0 2px var(--color-healthy), var(--shadow-card); }
.status-summary-item--degraded.status-summary-item--active[b-4mnc3jbqmo]  { box-shadow: 0 0 0 2px var(--color-degraded), var(--shadow-card); }
.status-summary-item--down.status-summary-item--active[b-4mnc3jbqmo]      { box-shadow: 0 0 0 2px var(--color-down), var(--shadow-card); }
.status-summary-item--unknown.status-summary-item--active[b-4mnc3jbqmo]   { box-shadow: 0 0 0 2px var(--color-unknown), var(--shadow-card); }

/* Coloured top accent stripe */
.status-summary-item[b-4mnc3jbqmo]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-border);
    border-radius: var(--radius) var(--radius) 0 0;
}
.status-summary-item--healthy[b-4mnc3jbqmo]::before   { background: var(--color-healthy); }
.status-summary-item--degraded[b-4mnc3jbqmo]::before  { background: var(--color-degraded); }
.status-summary-item--down[b-4mnc3jbqmo]::before      { background: var(--color-down); }
.status-summary-item--unknown[b-4mnc3jbqmo]::before   { background: var(--color-unknown); }
.status-summary-item--incidents[b-4mnc3jbqmo]::before { background: var(--color-brand-teal); }

/* Header row: icon + label + optional % */
.status-summary-header[b-4mnc3jbqmo] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.625rem;
}

.status-summary-icon[b-4mnc3jbqmo] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

.status-summary-item--healthy   .status-summary-icon[b-4mnc3jbqmo] { color: var(--color-healthy); }
.status-summary-item--degraded  .status-summary-icon[b-4mnc3jbqmo] { color: var(--color-degraded); }
.status-summary-item--down      .status-summary-icon[b-4mnc3jbqmo] { color: var(--color-down); }
.status-summary-item--unknown   .status-summary-icon[b-4mnc3jbqmo] { color: var(--color-unknown); }
.status-summary-item--incidents .status-summary-icon[b-4mnc3jbqmo] { color: var(--color-brand-teal); }

.status-summary-label[b-4mnc3jbqmo] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex: 1 1 auto;
}

.status-summary-pct[b-4mnc3jbqmo] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 0.875rem;
    padding: 0.1rem 0.4rem;
    line-height: 1.4;
}

/* The big number */
.status-summary-count[b-4mnc3jbqmo] {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-title);
    letter-spacing: -0.03em;
    margin-bottom: 0.625rem;
}

.status-summary-item--healthy   .status-summary-count[b-4mnc3jbqmo] { color: #166534; }
.status-summary-item--degraded  .status-summary-count[b-4mnc3jbqmo] { color: #92400e; }
.status-summary-item--down      .status-summary-count[b-4mnc3jbqmo] { color: #991b1b; }
.status-summary-item--unknown   .status-summary-count[b-4mnc3jbqmo] { color: var(--color-text-secondary); }
.status-summary-item--incidents .status-summary-count[b-4mnc3jbqmo] { color: var(--color-brand); }

/* Footer text (for Total and Incidents tiles) */
.status-summary-footer[b-4mnc3jbqmo] {
    margin-top: auto;
}

.status-summary-sub[b-4mnc3jbqmo] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    letter-spacing: 0.01em;
}

/* Progress bar (health state tiles) */
.status-summary-bar[b-4mnc3jbqmo] {
    margin-top: auto;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    overflow: hidden;
}

.status-summary-bar-fill[b-4mnc3jbqmo] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
    background: var(--color-border);
}

.status-summary-item--healthy   .status-summary-bar-fill[b-4mnc3jbqmo] { background: var(--color-healthy); }
.status-summary-item--degraded  .status-summary-bar-fill[b-4mnc3jbqmo] { background: var(--color-degraded); }
.status-summary-item--down      .status-summary-bar-fill[b-4mnc3jbqmo] { background: var(--color-down); }
.status-summary-item--unknown   .status-summary-bar-fill[b-4mnc3jbqmo] { background: var(--color-unknown); }

/* ─── System health bar ──────────────────────────────────────── */

.system-health-bar[b-4mnc3jbqmo] {
    margin-bottom: 2rem;
}

.system-health-bar-header[b-4mnc3jbqmo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.system-health-bar-dot[b-4mnc3jbqmo] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--color-unknown);
}

.system-health-bar-dot--healthy[b-4mnc3jbqmo]  { background: var(--color-healthy); }
.system-health-bar-dot--degraded[b-4mnc3jbqmo] { background: var(--color-degraded); }
.system-health-bar-dot--down[b-4mnc3jbqmo]     { background: var(--color-down); }
.system-health-bar-dot--unknown[b-4mnc3jbqmo]  { background: var(--color-unknown); }

.system-health-bar-status[b-4mnc3jbqmo] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.system-health-bar-status--healthy[b-4mnc3jbqmo]  { color: #166534; }
.system-health-bar-status--degraded[b-4mnc3jbqmo] { color: #92400e; }
.system-health-bar-status--down[b-4mnc3jbqmo]     { color: #991b1b; }
.system-health-bar-status--unknown[b-4mnc3jbqmo]  { color: var(--color-text-secondary); }

.system-health-bar-count[b-4mnc3jbqmo] {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.system-health-bar-track[b-4mnc3jbqmo] {
    display: flex;
    flex-direction: row;
    gap: 2px;
    width: 100%;
    height: 20px;
    box-sizing: border-box;
    padding: 2px;
    background: #cdd5dd;
    border-radius: 3px;
}

.system-health-bar-tile[b-4mnc3jbqmo] {
    display: block;
    flex: 1 1 0%;
    min-width: 5px;
    height: 16px;
    border-radius: 1.5px;
    background: #b8c8d8;
    transition: opacity 0.1s;
}

.system-health-bar-tile:hover[b-4mnc3jbqmo] { opacity: 0.8; cursor: default; }

.system-health-bar-tile--healthy[b-4mnc3jbqmo]  { background: var(--color-healthy); }
.system-health-bar-tile--degraded[b-4mnc3jbqmo] { background: var(--color-degraded); }
.system-health-bar-tile--down[b-4mnc3jbqmo]     { background: var(--color-down); }
.system-health-bar-tile--unknown[b-4mnc3jbqmo]  { background: #b8c8d8; }

.system-health-bar-scale[b-4mnc3jbqmo] {
    text-align: right;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

/* ─── Dashboard sections (attention needed, recent incidents) ── */

.dashboard-section[b-4mnc3jbqmo] {
    margin-bottom: 2rem;
}

.dashboard-section-title[b-4mnc3jbqmo] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin: 0 0 0.75rem;
}

/* ─── Attention needed ───────────────────────────────────────── */

.attention-list[b-4mnc3jbqmo] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.attention-row[b-4mnc3jbqmo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    border-left: 3px solid transparent;
}

.attention-row:last-child[b-4mnc3jbqmo] {
    border-bottom: none;
}

.attention-row--down[b-4mnc3jbqmo]     { border-left-color: var(--color-down); }
.attention-row--degraded[b-4mnc3jbqmo] { border-left-color: var(--color-degraded); }

.attention-name[b-4mnc3jbqmo] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    text-decoration: none;
    min-width: 8rem;
}

.attention-name:hover[b-4mnc3jbqmo] {
    text-decoration: underline;
}

.attention-meta[b-4mnc3jbqmo] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    flex: 1 1 auto;
}

.attention-checked[b-4mnc3jbqmo] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ─── Section header row (title + view-all link) ────────────── */

.dashboard-section-header[b-4mnc3jbqmo] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.dashboard-section-header .dashboard-section-title[b-4mnc3jbqmo] {
    margin-bottom: 0;
}

.dashboard-section-viewall[b-4mnc3jbqmo] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-brand-teal);
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-section-viewall:hover[b-4mnc3jbqmo] {
    text-decoration: underline;
}

/* ─── Section header action group (Ack all + View all) ──────── */

.dashboard-section-header-actions[b-4mnc3jbqmo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.incident-ack-all-btn[b-4mnc3jbqmo] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 0.25rem);
    cursor: pointer;
    transition: color 0.1s, border-color 0.1s, background 0.1s;
    font-family: var(--font-body);
    line-height: 1;
}

.incident-ack-all-btn:hover[b-4mnc3jbqmo] {
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
    background: var(--color-surface-raised);
}

/* ─── Recent incidents ───────────────────────────────────────── */

.incident-list[b-4mnc3jbqmo] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    font-size: 0.875rem;
}

.incident-row[b-4mnc3jbqmo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.incident-row:last-child[b-4mnc3jbqmo] {
    border-bottom: none;
}

.incident-time[b-4mnc3jbqmo] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 9rem;
}

.incident-site[b-4mnc3jbqmo] {
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
    min-width: 7rem;
}

.incident-site:hover[b-4mnc3jbqmo] {
    text-decoration: underline;
}

.incident-error[b-4mnc3jbqmo] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Incident acknowledge button ───────────────────────────── */

.incident-ack-btn[b-4mnc3jbqmo] {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 0.25rem);
    cursor: pointer;
    transition: color 0.1s, border-color 0.1s, background 0.1s;
    font-family: var(--font-body);
    line-height: 1;
}

.incident-ack-btn:hover[b-4mnc3jbqmo] {
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
    background: var(--color-surface-raised);
}

/* ─── Recent alerts (alert audit trail) ─────────────────────── */

.alert-event-list[b-4mnc3jbqmo] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    font-size: 0.875rem;
}

.alert-event-row[b-4mnc3jbqmo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.alert-event-row:last-child[b-4mnc3jbqmo] {
    border-bottom: none;
}

.alert-event-time[b-4mnc3jbqmo] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 9rem;
}

.alert-event-site[b-4mnc3jbqmo] {
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
    min-width: 7rem;
}

.alert-event-site:hover[b-4mnc3jbqmo] {
    text-decoration: underline;
}

.alert-event-kind[b-4mnc3jbqmo] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    white-space: nowrap;
}

.alert-event-kind--alert[b-4mnc3jbqmo] {
    background: #fee2e2;
    color: #991b1b;
}

.alert-event-kind--recovery[b-4mnc3jbqmo] {
    background: #dcfce7;
    color: #166534;
}

.alert-event-recipient[b-4mnc3jbqmo] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alert-event-delivery[b-4mnc3jbqmo] {
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-text-secondary);
}

.alert-event-delivery--sent[b-4mnc3jbqmo]   { color: #166534; }
.alert-event-delivery--failed[b-4mnc3jbqmo] { color: #991b1b; }
/* /Components/Pages/Support.razor.rz.scp.css */
/* ── Top bar ────────────────────────────────────────────────────────────── */
.support-top-bar[b-8jd99khez9] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.support-back[b-8jd99khez9] {
    color: var(--color-brand-teal);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.875rem;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.support-back:hover[b-8jd99khez9] {
    text-decoration: underline;
}

.support-top-badges[b-8jd99khez9] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.support-site-badge[b-8jd99khez9] {
    padding: 0.2rem 0.625rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text);
}

.support-token-badge[b-8jd99khez9] {
    padding: 0.2rem 0.625rem;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
}

.support-token-badge--ok[b-8jd99khez9] {
    background: color-mix(in srgb, var(--color-healthy) 12%, transparent);
    color: var(--color-healthy);
    border: 1px solid color-mix(in srgb, var(--color-healthy) 30%, transparent);
}

.support-token-badge--warn[b-8jd99khez9] {
    background: color-mix(in srgb, var(--color-degraded) 12%, transparent);
    color: var(--color-degraded);
    border: 1px solid color-mix(in srgb, var(--color-degraded) 30%, transparent);
}

.support-token-counter[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Main layout ────────────────────────────────────────────────────────── */
.support-layout[b-8jd99khez9] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.25rem;
    height: calc(100vh - 220px);
    min-height: 500px;
}

@media (max-width: 900px) {
    .support-layout[b-8jd99khez9] {
        grid-template-columns: 1fr;
        height: auto;
    }
}

/* ── Chat panel ─────────────────────────────────────────────────────────── */
.support-chat[b-8jd99khez9] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-surface);
}

.chat-messages[b-8jd99khez9] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.chat-bubble[b-8jd99khez9] {
    max-width: 85%;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.6;
    word-break: break-word;
}

.chat-bubble--user[b-8jd99khez9] {
    align-self: flex-end;
    background: var(--color-brand);
    color: #fff;
}

.chat-bubble--assistant[b-8jd99khez9] {
    align-self: flex-start;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.chat-bubble--streaming[b-8jd99khez9] {
    opacity: 0.9;
}

.chat-typing-indicator[b-8jd99khez9] {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 0.25rem 0;
}

.chat-typing-indicator span[b-8jd99khez9] {
    width: 7px;
    height: 7px;
    background: var(--color-text-muted);
    border-radius: 50%;
    animation: typing-bounce-b-8jd99khez9 1.2s infinite ease-in-out;
}

.chat-typing-indicator span:nth-child(2)[b-8jd99khez9] { animation-delay: 0.2s; }
.chat-typing-indicator span:nth-child(3)[b-8jd99khez9] { animation-delay: 0.4s; }

@keyframes typing-bounce-b-8jd99khez9 {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40%            { transform: translateY(-5px); opacity: 1; }
}

.chat-ticket-ready[b-8jd99khez9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: color-mix(in srgb, var(--color-brand-teal) 8%, var(--color-surface-raised));
    border-top: 1px solid color-mix(in srgb, var(--color-brand-teal) 25%, transparent);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.chat-ticket-ready svg[b-8jd99khez9] {
    flex-shrink: 0;
    color: var(--color-brand-teal);
}

.chat-input-area[b-8jd99khez9] {
    display: flex;
    gap: 0.625rem;
    padding: 0.75rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.chat-input-area--primed .chat-send-btn[b-8jd99khez9] {
    animation: send-pulse-b-8jd99khez9 1.8s ease-in-out 0.3s 2;
}

@keyframes send-pulse-b-8jd99khez9 {
    0%, 100% { box-shadow: none; }
    50%       { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-teal) 40%, transparent); }
}

.chat-input[b-8jd99khez9] {
    flex: 1;
    resize: none;
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    outline: none;
}

.chat-input:focus[b-8jd99khez9] {
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-teal) 20%, transparent);
}

.chat-send-btn[b-8jd99khez9] {
    align-self: flex-end;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* ── Activity panel ─────────────────────────────────────────────────────── */
.support-activity[b-8jd99khez9] {
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.support-activity-title[b-8jd99khez9] {
    font-family: var(--font-title);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    padding: 1rem 1.25rem 0;
}

/* ── Right panel tabs ────────────────────────────────────────────────────── */
.activity-tabs[b-8jd99khez9] {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.activity-tab[b-8jd99khez9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.activity-tab:hover[b-8jd99khez9] {
    color: var(--color-text-primary);
}

.activity-tab--active[b-8jd99khez9] {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand);
    font-weight: 600;
}

.activity-tab-badge[b-8jd99khez9] {
    padding: 0.1rem 0.45rem;
    background: color-mix(in srgb, var(--color-brand-teal) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-brand-teal) 25%, transparent);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-brand-teal);
}

/* Activity tab inner content padding (was on the panel, now scoped here) */
.agent-status-row[b-8jd99khez9] {
    margin: 1rem 1.25rem 0;
}

.plan-panel[b-8jd99khez9],
.execution-panel[b-8jd99khez9] {
    margin: 0.75rem 1.25rem 0;
}

.activity-log[b-8jd99khez9] {
    margin: 0.75rem 1.25rem;
    flex: 1;
    min-height: 0;
}

/* ── Ticket details panel ───────────────────────────────────────────────── */
.ticket-panel[b-8jd99khez9] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.875rem 1.25rem;
    overflow-y: auto;
    flex: 1;
}

.ticket-panel-header[b-8jd99khez9] {
    margin-bottom: 0.875rem;
}

.ticket-panel-subject[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
    line-height: 1.4;
}

.ticket-panel-badges[b-8jd99khez9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.ticket-badge[b-8jd99khez9] {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.ticket-badge--priority[b-8jd99khez9] { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.ticket-badge--critical[b-8jd99khez9]  { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.ticket-badge--prio[b-8jd99khez9]      { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.ticket-badge--level[b-8jd99khez9]     { background: color-mix(in srgb, var(--color-brand) 10%, transparent); border-color: color-mix(in srgb, var(--color-brand) 25%, transparent); color: var(--color-brand); }
.ticket-badge--category[b-8jd99khez9]  { background: color-mix(in srgb, var(--color-brand-teal) 10%, transparent); border-color: color-mix(in srgb, var(--color-brand-teal) 25%, transparent); color: var(--color-brand-teal); }

.ticket-panel-section[b-8jd99khez9] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.ticket-panel-section:last-of-type[b-8jd99khez9] {
    border-bottom: none;
}

.ticket-panel-label[b-8jd99khez9] {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.ticket-panel-value[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-primary);
    font-weight: 500;
}

.ticket-panel-value--notes[b-8jd99khez9] {
    font-weight: 400;
    font-style: italic;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.ticket-panel-sub[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.ticket-panel-divider[b-8jd99khez9] {
    height: 1px;
    background: var(--color-border);
    margin: 0.75rem 0 0.625rem;
}

.ticket-panel-section-title[b-8jd99khez9] {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
    margin: 0 0 0.5rem;
}

.ticket-panel-classification-row[b-8jd99khez9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.ticket-panel-description[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-primary);
    line-height: 1.5;
    margin: 0 0 0.625rem;
}

/* Difficulty pip bar */
.ticket-difficulty-bar[b-8jd99khez9] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 0.25rem;
}

.ticket-difficulty-pip[b-8jd99khez9] {
    width: 18px;
    height: 6px;
    border-radius: 3px;
    background: var(--color-border);
    transition: background 0.15s;
}

.ticket-difficulty-pip--filled[b-8jd99khez9] {
    background: var(--color-brand);
}

.ticket-difficulty-label[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-left: 4px;
}

.ticket-keywords[b-8jd99khez9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.ticket-panel-meta-footer[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    margin-top: 0.25rem;
}

/* Message thread */
.ticket-thread[b-8jd99khez9] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.ticket-thread-msg[b-8jd99khez9] {
    padding: 0.625rem 0.75rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.ticket-thread-msg--internal[b-8jd99khez9] {
    background: color-mix(in srgb, var(--color-degraded) 5%, var(--color-surface-raised));
    border-color: color-mix(in srgb, var(--color-degraded) 20%, var(--color-border));
}

.ticket-thread-msg-header[b-8jd99khez9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
}

.ticket-thread-author[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ticket-thread-internal-tag[b-8jd99khez9] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #92400e;
    background: #fef3c7;
    border-radius: 3px;
    padding: 0.05rem 0.35rem;
}

.ticket-thread-time[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-left: auto;
}

.ticket-thread-body[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Attachments */
.ticket-attachments[b-8jd99khez9] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.ticket-attachment[b-8jd99khez9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text-secondary);
}

.ticket-attachment-name[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

a.ticket-attachment-name:hover[b-8jd99khez9] {
    color: var(--color-brand-teal);
    text-decoration: underline;
}

.ticket-attachment-size[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.agent-status-row[b-8jd99khez9] {
    display: flex;
    align-items: center;
}

.agent-status-badge[b-8jd99khez9] {
    display: inline-block;
    padding: 0.2rem 0.625rem;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.agent-status--idle[b-8jd99khez9] {
    color: var(--color-text-muted);
    background: var(--color-surface-raised);
    border-color: var(--color-border);
}

.agent-status--analysing[b-8jd99khez9],
.agent-status--executing[b-8jd99khez9] {
    color: var(--color-brand-teal);
    background: color-mix(in srgb, var(--color-brand-teal) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-brand-teal) 30%, transparent);
}

.agent-status--awaiting[b-8jd99khez9] {
    color: var(--color-degraded);
    background: color-mix(in srgb, var(--color-degraded) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-degraded) 30%, transparent);
}

.agent-status--complete[b-8jd99khez9] {
    color: var(--color-healthy);
    background: color-mix(in srgb, var(--color-healthy) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-healthy) 30%, transparent);
}

.agent-status--error[b-8jd99khez9] {
    color: var(--color-down);
    background: color-mix(in srgb, var(--color-down) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-down) 30%, transparent);
}

/* ── Error chat bubble ──────────────────────────────────────────────────── */
.chat-bubble--error[b-8jd99khez9] {
    align-self: flex-start;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 90%;
    background: color-mix(in srgb, var(--color-down) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-down) 30%, transparent);
    border-left: 3px solid var(--color-down);
    color: var(--color-text);
}

.chat-error-icon[b-8jd99khez9] {
    flex-shrink: 0;
    color: var(--color-down);
}

/* ── Welcome card ────────────────────────────────────────────────────────── */
.chat-welcome[b-8jd99khez9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.875rem;
    padding: 2.5rem 1.5rem;
    margin: auto;
    max-width: 480px;
}

.chat-welcome-icon[b-8jd99khez9] {
    font-size: 2rem;
    color: var(--color-brand-teal);
    line-height: 1;
}

.chat-welcome-title[b-8jd99khez9] {
    font-family: var(--font-title);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.chat-welcome-subtitle[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

.chat-welcome-prompts[b-8jd99khez9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.25rem;
}

.chat-welcome-prompt[b-8jd99khez9] {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.625rem 1rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}

.chat-welcome-prompt:hover[b-8jd99khez9] {
    border-color: var(--color-brand-teal);
    background: color-mix(in srgb, var(--color-brand-teal) 6%, var(--color-surface-raised));
}

/* ── Ticket-loaded focused state (replaces welcome card) ────────────────── */
.chat-ticket-focus[b-8jd99khez9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 2rem 1.5rem 1.75rem;
    margin: auto;
    max-width: 400px;
}

.chat-ticket-focus-icon[b-8jd99khez9] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-brand-teal) 12%, var(--color-surface-raised));
    border: 1px solid color-mix(in srgb, var(--color-brand-teal) 25%, transparent);
    color: var(--color-brand-teal);
    margin-bottom: 0.25rem;
}

.chat-ticket-focus-title[b-8jd99khez9] {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.chat-ticket-focus-id[b-8jd99khez9] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-brand-teal);
    margin: 0;
}

.chat-ticket-focus-subject[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.4;
}

.chat-ticket-focus-hint[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0.25rem 0 0;
}

.chat-ticket-focus-mode[b-8jd99khez9] {
    display: inline-block;
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    margin-top: 0.25rem;
}

.chat-ticket-focus-mode--solve[b-8jd99khez9] {
    background: color-mix(in srgb, var(--color-brand-teal) 15%, transparent);
    color: var(--color-brand-teal);
}

.chat-ticket-focus-mode--advise[b-8jd99khez9] {
    background: color-mix(in srgb, #e89d0e 15%, transparent);
    color: #b47c08;
}

/* ── Plan panel ─────────────────────────────────────────────────────────── */
.plan-panel[b-8jd99khez9],
.execution-panel[b-8jd99khez9] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.plan-panel-title[b-8jd99khez9] {
    font-family: var(--font-subtitle);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.plan-mcp-target[b-8jd99khez9] {
    padding: 0.375rem 0.625rem;
    margin: 0.5rem 0;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #0c4a6e;
}
.plan-mcp-target strong[b-8jd99khez9] { color: var(--color-brand, #074684); }
.plan-mcp-target span[b-8jd99khez9] { color: #64748b; font-size: 0.75rem; }

.plan-steps[b-8jd99khez9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plan-step[b-8jd99khez9] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.plan-step--write[b-8jd99khez9] {
    border-color: color-mix(in srgb, var(--color-degraded) 30%, transparent);
}

.plan-step-icon[b-8jd99khez9] {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.plan-step--write .plan-step-icon[b-8jd99khez9] {
    color: var(--color-degraded);
}

.plan-step--done .plan-step-icon[b-8jd99khez9] {
    color: var(--color-healthy);
}

.plan-step-desc[b-8jd99khez9] {
    flex: 1;
    color: var(--color-text);
}

.plan-step-tool[b-8jd99khez9] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-family: monospace;
}

.plan-step-warn[b-8jd99khez9] {
    font-size: 0.75rem;
    color: var(--color-degraded);
    font-weight: 500;
}

.plan-warn-box[b-8jd99khez9] {
    padding: 0.625rem 0.875rem;
    background: color-mix(in srgb, var(--color-degraded) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-degraded) 30%, transparent);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-degraded);
}

.plan-actions[b-8jd99khez9] {
    display: flex;
    gap: 0.5rem;
}

.plan-btn-approve[b-8jd99khez9] {
    font-size: 0.875rem;
}

/* ── Error inline ───────────────────────────────────────────────────────── */
.support-error-inline[b-8jd99khez9] {
    padding: 0.625rem 0.875rem;
    background: color-mix(in srgb, var(--color-down) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-down) 30%, transparent);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-down);
}

/* ── Pre-flight states ──────────────────────────────────────────────────── */
.support-loading[b-8jd99khez9] {
    font-family: var(--font-body);
    color: var(--color-text-muted);
    padding: 2rem;
}

.support-preflight-error[b-8jd99khez9],
.support-error-card[b-8jd99khez9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.support-error-card[b-8jd99khez9] {
    padding: 1.5rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    max-width: 640px;
}

.support-error-actions[b-8jd99khez9] {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
    align-items: center;
}

.support-error-msg[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text);
    margin: 0;
}

/* ── Activity log ────────────────────────────────────────────────────────── */
.activity-log[b-8jd99khez9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
}

.activity-log-feed[b-8jd99khez9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.activity-entry[b-8jd99khez9] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    border-left: 2px solid var(--color-brand-teal);
    background: color-mix(in srgb, var(--color-brand-teal) 4%, transparent);
    font-family: var(--font-body);
    font-size: 0.8rem;
    line-height: 1.4;
}

.activity-entry--done[b-8jd99khez9] {
    border-left-color: var(--color-healthy);
    background: color-mix(in srgb, var(--color-healthy) 5%, transparent);
}

.activity-entry--error[b-8jd99khez9] {
    border-left-color: var(--color-down);
    background: color-mix(in srgb, var(--color-down) 5%, transparent);
}

.activity-entry-time[b-8jd99khez9] {
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
}

.activity-entry-icon[b-8jd99khez9] {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--color-healthy);
}

.activity-entry--error .activity-entry-icon[b-8jd99khez9] {
    color: var(--color-down);
}

.activity-entry-text[b-8jd99khez9] {
    flex: 1;
    color: var(--color-text);
    word-break: break-word;
}

/* ── Quick-reply chips ──────────────────────────────────────────────────── */
/* Appear above the text input whenever the agent asks a multiple-choice question */
.chat-quick-replies[b-8jd99khez9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem 0.5rem;
    background: var(--color-surface-raised);
    border-top: 1px solid var(--color-border);
}

.chat-quick-reply[b-8jd99khez9] {
    padding: 0.375rem 1.125rem;
    background: transparent;
    border: 1.5px solid var(--color-brand-teal);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-brand-teal);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.4;
}

.chat-quick-reply:hover[b-8jd99khez9] {
    background: var(--color-brand-teal);
    color: #fff;
}

.chat-quick-reply:active[b-8jd99khez9] {
    opacity: 0.85;
}

/* ── Plan step done / pending ────────────────────────────────────────────── */
.plan-step--pending[b-8jd99khez9] {
    opacity: 0.6;
}

/* ── Session list ────────────────────────────────────────────────────────── */
.session-list-toolbar[b-8jd99khez9] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.session-search-input[b-8jd99khez9] {
    flex: 1;
    min-width: 200px;
    max-width: 400px;
}

.session-list[b-8jd99khez9] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 760px;
}

.session-card[b-8jd99khez9] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1rem 1.25rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    width: 100%;
    transition: border-color 0.15s;
    font: inherit;
    user-select: none;
}

.session-card:hover[b-8jd99khez9] {
    border-color: var(--color-brand-teal);
}

.session-card-name[b-8jd99khez9] {
    font-family: var(--font-title);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}

.session-card-desc[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.session-card-meta[b-8jd99khez9] {
    display: flex;
    gap: 1rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    margin-top: 0.125rem;
}

.session-card-keywords[b-8jd99khez9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.session-keyword[b-8jd99khez9] {
    padding: 0.125rem 0.5rem;
    background: color-mix(in srgb, var(--color-brand-teal) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-brand-teal) 25%, transparent);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-brand-teal);
}

/* focus ring for keyboard navigation (was implicit on button, must be explicit on div) */
.session-card:focus-visible[b-8jd99khez9] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

/* Card header row: name left, badge + ticket right */
.session-card-header[b-8jd99khez9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.session-card-header-right[b-8jd99khez9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* Linked ticket chip */
.session-ticket-chip[b-8jd99khez9] {
    padding: 0.1rem 0.45rem;
    background: color-mix(in srgb, var(--color-brand) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-brand) 20%, transparent);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: var(--color-brand);
    letter-spacing: 0.01em;
}

.session-mode-chip[b-8jd99khez9] {
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-family: var(--font-subtitle);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.session-mode-chip--solve[b-8jd99khez9] {
    background: color-mix(in srgb, var(--color-brand-teal) 15%, transparent);
    color: var(--color-brand-teal);
    border: 1px solid color-mix(in srgb, var(--color-brand-teal) 30%, transparent);
}

.session-mode-chip--advise[b-8jd99khez9] {
    background: color-mix(in srgb, #e89d0e 15%, transparent);
    color: #b47c08;
    border: 1px solid color-mix(in srgb, #e89d0e 30%, transparent);
}

/* ── State badges ──────────────────────────────────────────────────────────── */
.session-state-badge[b-8jd99khez9] {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.session-state-badge--open[b-8jd99khez9] {
    background: color-mix(in srgb, var(--color-brand-teal) 12%, transparent);
    color: var(--color-brand-teal);
    border: 1px solid color-mix(in srgb, var(--color-brand-teal) 30%, transparent);
}

.session-state-badge--inprogress[b-8jd99khez9] {
    background: color-mix(in srgb, #f59e0b 12%, transparent);
    color: #b45309;
    border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
}

.session-state-badge--closed[b-8jd99khez9] {
    background: color-mix(in srgb, var(--color-healthy) 12%, transparent);
    color: var(--color-healthy);
    border: 1px solid color-mix(in srgb, var(--color-healthy) 30%, transparent);
}

.session-state-badge--archived[b-8jd99khez9] {
    background: color-mix(in srgb, var(--color-text-muted) 10%, transparent);
    color: var(--color-text-muted);
    border: 1px solid color-mix(in srgb, var(--color-text-muted) 20%, transparent);
}

/* ── State filter tabs ─────────────────────────────────────────────────────── */
.session-state-tabs[b-8jd99khez9] {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.session-state-tab[b-8jd99khez9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
}

.session-state-tab:hover[b-8jd99khez9] {
    border-color: var(--color-brand-teal);
    color: var(--color-text);
}

.session-state-tab--active[b-8jd99khez9] {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: #fff;
}

.session-state-tab--active:hover[b-8jd99khez9] {
    border-color: var(--color-brand);
    color: #fff;
}

.session-state-tab-count[b-8jd99khez9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0 0.3rem;
    height: 1.25rem;
    background: color-mix(in srgb, currentColor 15%, transparent);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
}

/* ── Session card actions ──────────────────────────────────────────────────── */
.session-card-actions[b-8jd99khez9] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.session-action-btn[b-8jd99khez9] {
    padding: 0.2rem 0.625rem;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-family: var(--font-body);
    font-size: 0.775rem;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.session-action-btn:hover[b-8jd99khez9] {
    border-color: var(--color-brand-teal);
    color: var(--color-text);
}

.session-action-btn--inprogress:hover[b-8jd99khez9] {
    border-color: #f59e0b;
    color: #b45309;
}

.session-action-btn--closed:hover[b-8jd99khez9] {
    border-color: var(--color-healthy);
    color: var(--color-healthy);
}

.session-action-btn--archive:hover[b-8jd99khez9] {
    border-color: var(--color-text-muted);
    color: var(--color-text-muted);
}

.session-action-btn--reset[b-8jd99khez9] {
    border-color: color-mix(in srgb, var(--color-down) 40%, transparent);
    color: var(--color-text-muted);
}

.session-action-btn--reset:hover[b-8jd99khez9] {
    border-color: var(--color-down);
    color: var(--color-down);
}

/* ── Decision panel ─────────────────────────────────────────────────────── */
.chat-decision-panel[b-8jd99khez9] {
    margin-bottom: 0.75rem;
    padding: 1rem 1.25rem;
    background: color-mix(in srgb, var(--color-brand-teal) 6%, var(--color-surface-raised));
    border: 1.5px solid color-mix(in srgb, var(--color-brand-teal) 35%, transparent);
    border-radius: 10px;
}

.decision-header[b-8jd99khez9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}

.decision-icon[b-8jd99khez9] {
    font-size: 1rem;
    color: var(--color-brand-teal);
    line-height: 1;
}

.decision-label[b-8jd99khez9] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-brand-teal);
}

.decision-question[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text);
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.decision-actions[b-8jd99khez9] {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.decision-btn[b-8jd99khez9] {
    min-width: 80px;
}

/* ── Per-message usage badges ───────────────────────────────────────────── */
.chat-msg-usage[b-8jd99khez9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.chat-msg-usage-badge[b-8jd99khez9] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    border: 1px solid transparent;
}

.chat-msg-usage-badge--in[b-8jd99khez9] {
    background: color-mix(in srgb, var(--color-brand) 10%, transparent);
    color: var(--color-brand);
    border-color: color-mix(in srgb, var(--color-brand) 25%, transparent);
}

.chat-msg-usage-badge--out[b-8jd99khez9] {
    background: color-mix(in srgb, var(--color-brand-teal) 10%, transparent);
    color: var(--color-brand-teal);
    border-color: color-mix(in srgb, var(--color-brand-teal) 25%, transparent);
}

.chat-msg-usage-badge--cost[b-8jd99khez9] {
    background: color-mix(in srgb, var(--color-healthy) 10%, transparent);
    color: var(--color-healthy);
    border-color: color-mix(in srgb, var(--color-healthy) 25%, transparent);
}

/* ── Session usage footer ────────────────────────────────────────────────── */
.chat-usage-footer[b-8jd99khez9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.chat-usage-footer-label[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-right: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Soft-limit warning panel ────────────────────────────────────────────── */
.chat-soft-limit-panel[b-8jd99khez9] {
    margin: 0 0.75rem 0.75rem;
    padding: 1rem 1.25rem;
    background: color-mix(in srgb, var(--color-degraded) 6%, var(--color-surface-raised));
    border: 1.5px solid color-mix(in srgb, var(--color-degraded) 35%, transparent);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.soft-limit-header[b-8jd99khez9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.soft-limit-icon[b-8jd99khez9] {
    font-size: 1rem;
    color: var(--color-degraded);
    line-height: 1;
    flex-shrink: 0;
}

.soft-limit-label[b-8jd99khez9] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-degraded);
}

.soft-limit-message[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text);
    margin: 0;
    line-height: 1.5;
}

.soft-limit-actions[b-8jd99khez9] {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
}

/* ── Site picker grid ───────────────────────────────────────────────────── */
.sp-grid[b-8jd99khez9] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.875rem;
}

@media (max-width: 1100px) { .sp-grid[b-8jd99khez9] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .sp-grid[b-8jd99khez9] { grid-template-columns: 1fr; } }

.sp-tile[b-8jd99khez9] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.125rem 1.25rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}

.sp-tile:hover[b-8jd99khez9] {
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    transform: translateY(-1px);
    border-color: var(--color-brand-teal);
    text-decoration: none;
}

/* Coloured top accent stripe */
.sp-tile[b-8jd99khez9]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-border);
    border-radius: var(--radius) var(--radius) 0 0;
}

.sp-tile--healthy[b-8jd99khez9]::before  { background: var(--color-healthy); }
.sp-tile--degraded[b-8jd99khez9]::before { background: var(--color-degraded); }
.sp-tile--down[b-8jd99khez9]::before     { background: var(--color-down); }
.sp-tile--unknown[b-8jd99khez9]::before  { background: var(--color-unknown); }

/* Header row: dot + label + state badge */
.sp-tile-header[b-8jd99khez9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sp-state-dot[b-8jd99khez9] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--color-unknown);
}

.sp-state-dot--healthy[b-8jd99khez9]  { background: var(--color-healthy); }
.sp-state-dot--degraded[b-8jd99khez9] { background: var(--color-degraded); }
.sp-state-dot--down[b-8jd99khez9]     { background: var(--color-down); }

.sp-tile-label[b-8jd99khez9] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex: 1;
    font-family: var(--font-subtitle);
}

.sp-badge[b-8jd99khez9] {
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    border: 1px solid;
    white-space: nowrap;
}

.sp-badge--healthy[b-8jd99khez9]  { color: #166534; background: #dcfce7; border-color: #bbf7d0; }
.sp-badge--degraded[b-8jd99khez9] { color: #92400e; background: #fef3c7; border-color: #fde68a; }
.sp-badge--down[b-8jd99khez9]     { color: #991b1b; background: #fee2e2; border-color: #fecaca; }
.sp-badge--unknown[b-8jd99khez9]  { color: var(--color-text-secondary); background: var(--color-surface-raised); border-color: var(--color-border); }

/* Site name */
.sp-tile-name[b-8jd99khez9] {
    font-family: var(--font-title);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    line-height: 1.25;
}

/* Meta chips (client · group · region) */
.sp-tile-meta[b-8jd99khez9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 1.5rem;
}

.sp-meta-chip[b-8jd99khez9] {
    padding: 0.1rem 0.5rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.sp-meta-chip--region[b-8jd99khez9] {
    font-weight: 600;
    background: color-mix(in srgb, var(--color-brand) 8%, var(--color-surface-raised));
    border-color: color-mix(in srgb, var(--color-brand) 20%, var(--color-border));
    color: var(--color-brand);
}

/* MCP endpoint row */
.sp-tile-mcp[b-8jd99khez9] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-mcp-icon[b-8jd99khez9] {
    flex-shrink: 0;
    color: var(--color-brand-teal);
    opacity: 0.75;
}

/* Footer: queue badge + last-checked + arrow */
.sp-tile-footer[b-8jd99khez9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 0.625rem;
    border-top: 1px solid var(--color-border);
}

.sp-queue-badge[b-8jd99khez9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    background: color-mix(in srgb, var(--color-brand-teal) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-brand-teal) 30%, transparent);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-brand-teal);
    white-space: nowrap;
}

.sp-last-checked[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    flex: 1;
}

.sp-tile-arrow[b-8jd99khez9] {
    margin-left: auto;
    color: var(--color-brand-teal);
    font-size: 1rem;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s, transform 0.15s;
    flex-shrink: 0;
}

.sp-tile:hover .sp-tile-arrow[b-8jd99khez9] {
    opacity: 1;
    transform: translateX(0);
}

/* ── Helpdesk inbox panel ─────────────────────────────────────────────────── */

.support-hd-inbox[b-8jd99khez9] {
    margin-bottom: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface-raised);
    overflow: hidden;
}

.support-hd-inbox-header[b-8jd99khez9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.support-hd-inbox-title[b-8jd99khez9] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.support-hd-inbox-count[b-8jd99khez9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 10px;
    background: var(--color-brand-teal);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.support-hd-inbox-toggle[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-brand-teal);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.support-hd-inbox-toggle:hover[b-8jd99khez9] {
    text-decoration: underline;
}

.support-hd-inbox-list[b-8jd99khez9] {
    display: flex;
    flex-direction: column;
}

.support-hd-inbox-item[b-8jd99khez9] {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.support-hd-inbox-item:last-child[b-8jd99khez9] {
    border-bottom: none;
}

.support-hd-inbox-item-subject[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text);
    font-weight: 500;
}

.support-hd-inbox-item-id[b-8jd99khez9] {
    font-family: var(--font-subtitle);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-right: 0.4rem;
}

.support-hd-inbox-meta[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.support-hd-inbox-sep[b-8jd99khez9] {
    color: var(--color-border);
}

.support-hd-inbox-actions[b-8jd99khez9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.15rem;
}

.support-hd-inbox-load-btn[b-8jd99khez9] {
    font-size: 0.8125rem;
    padding: 0.25rem 0.7rem;
    min-width: 6.5rem;
    text-align: center;
    justify-content: center;
}

/* ── Helpdesk reply bar (inside active session) ───────────────────────────── */

.support-hd-reply-bar[b-8jd99khez9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--color-brand-teal);
    background: color-mix(in srgb, var(--color-brand-teal) 6%, transparent);
}

.support-hd-reply-label[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text);
    flex: 1;
    min-width: 10rem;
}

.support-hd-reply-actions[b-8jd99khez9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.support-hd-reply-error[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-down);
    width: 100%;
}

.support-hd-reply-sent[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-healthy);
    width: 100%;
}

.support-hd-reply-mode[b-8jd99khez9] {
    display: inline-block;
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.support-hd-reply-mode--solve[b-8jd99khez9] {
    background: color-mix(in srgb, var(--color-brand-teal) 15%, transparent);
    color: var(--color-brand-teal);
}

.support-hd-reply-mode--advise[b-8jd99khez9] {
    background: color-mix(in srgb, #e89d0e 15%, transparent);
    color: #b47c08;
}

/* ── Classified attachments (shared with helpdesk detail page) ───────────── */

.hd-cattach-list[b-8jd99khez9] { display: flex; flex-direction: column; gap: 0.5rem; }

.hd-cattach[b-8jd99khez9] {
    display: flex; flex-direction: row; align-items: flex-start;
    gap: 0.6rem; padding: 0.5rem 0.75rem; border-radius: 6px;
    border: 1px solid var(--color-border); background: var(--color-surface);
}

.hd-cattach--evidence[b-8jd99khez9]  { border-left: 3px solid var(--color-healthy); }
.hd-cattach--document[b-8jd99khez9]  { border-left: 3px solid var(--color-brand); }
.hd-cattach--signature[b-8jd99khez9] { border-left: 3px solid var(--color-border); opacity: 0.7; }
.hd-cattach--unknown[b-8jd99khez9]   { border-left: 3px solid var(--color-degraded); }

.hd-cattach-thumb-wrap[b-8jd99khez9] {
    width: 80px; height: 60px; flex-shrink: 0; border-radius: 4px;
    overflow: hidden; cursor: pointer; border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.hd-cattach-thumb[b-8jd99khez9] { width: 100%; height: 100%; object-fit: cover; }

.hd-cattach-body[b-8jd99khez9] { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 0; }

.hd-cattach-header[b-8jd99khez9] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.hd-cattach-badge[b-8jd99khez9] {
    display: inline-block; padding: 0.1rem 0.4rem; border-radius: 3px;
    font-family: var(--font-subtitle); font-size: 0.62rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}

.hd-cattach-badge--evidence[b-8jd99khez9]  { background: color-mix(in srgb, var(--color-healthy) 15%, transparent); color: var(--color-healthy); }
.hd-cattach-badge--document[b-8jd99khez9]  { background: color-mix(in srgb, var(--color-brand) 12%, transparent); color: var(--color-brand); }
.hd-cattach-badge--signature[b-8jd99khez9] { background: var(--color-surface-raised); color: var(--color-text-muted); }
.hd-cattach-badge--unknown[b-8jd99khez9]   { background: color-mix(in srgb, var(--color-degraded) 15%, transparent); color: var(--color-degraded); }

.hd-cattach-name-plain[b-8jd99khez9] {
    font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
    color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.hd-cattach-size[b-8jd99khez9] { font-family: var(--font-body); font-size: 0.68rem; color: var(--color-text-muted); }

.hd-cattach-ref[b-8jd99khez9] {
    display: inline-block; padding: 0.02rem 0.25rem; border-radius: 3px;
    font-family: var(--font-subtitle); font-size: 0.58rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    background: color-mix(in srgb, var(--color-brand-teal) 12%, transparent);
    color: var(--color-brand-teal);
}

.hd-cattach-reason[b-8jd99khez9] { font-family: var(--font-body); font-size: 0.78rem; color: var(--color-text-muted); font-style: italic; }

.hd-cattach-action[b-8jd99khez9] {
    font-family: var(--font-body); font-size: 0.72rem; color: var(--color-brand-teal);
    text-decoration: none; background: none; border: none; padding: 0;
    cursor: pointer; margin-left: auto; white-space: nowrap;
}

.hd-cattach-action:hover[b-8jd99khez9] { text-decoration: underline; }

/* ── Lightbox ────────────────────────────────────────────────────────────── */

.hd-lightbox-overlay[b-8jd99khez9] {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0, 0, 0, 0.75);
    display: flex; align-items: center; justify-content: center; padding: 2rem;
}

.hd-lightbox-content[b-8jd99khez9] {
    max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; gap: 0.75rem;
    background: var(--color-surface); border-radius: 8px; padding: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.hd-lightbox-img[b-8jd99khez9] { max-width: 100%; max-height: 75vh; object-fit: contain; border-radius: 4px; }

.hd-lightbox-footer[b-8jd99khez9] { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }

.hd-empty[b-8jd99khez9] { font-family: var(--font-body); font-size: 0.875rem; color: var(--color-text-muted); font-style: italic; }

/* ── Attachment review panel ──────────────────────────────────────────────── */
.chat-attachment-review[b-8jd99khez9] {
    margin-bottom: 0.75rem;
    padding: 1rem 1.25rem;
    background: color-mix(in srgb, var(--color-brand-teal) 6%, var(--color-surface-raised));
    border: 1.5px solid color-mix(in srgb, var(--color-brand-teal) 35%, transparent);
    border-radius: 10px;
}

.attach-review-list[b-8jd99khez9] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.75rem 0;
    max-height: 300px;
    overflow-y: auto;
}

.attach-review-row[b-8jd99khez9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    opacity: 0.6;
    transition: opacity 0.15s;
}

.attach-review-row--selected[b-8jd99khez9] { opacity: 1; }

.attach-review-row input[type="checkbox"][b-8jd99khez9] {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-brand-teal);
}

.attach-review-info[b-8jd99khez9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.attach-role-select[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.72rem;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}

.attach-role-select:focus[b-8jd99khez9] { outline: 2px solid var(--color-brand-teal); outline-offset: 1px; }

.attach-review-footer[b-8jd99khez9] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.attach-review-size-hint[b-8jd99khez9] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-right: auto;
}

/* /Components/Pages/TagEdit.razor.rz.scp.css */
/* ── Link list editor ─────────────────────────────────────────── */
.link-editor[b-4l5twxi05v] {
    padding: 0 1.25rem 1.25rem;
}

.link-list[b-4l5twxi05v] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.link-list-header[b-4l5twxi05v] {
    display: grid;
    grid-template-columns: 1fr 2fr 2rem;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
}

.link-col-label[b-4l5twxi05v] {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.link-list-row[b-4l5twxi05v] {
    display: grid;
    grid-template-columns: 1fr 2fr 2rem;
    gap: 0.5rem;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.link-list-row:last-child[b-4l5twxi05v] {
    border-bottom: none;
}

.link-input-name[b-4l5twxi05v],
.link-input-url[b-4l5twxi05v] {
    font-size: 0.875rem;
    padding: 0.3rem 0.5rem;
}

.link-remove-btn[b-4l5twxi05v] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 0.25rem;
    padding: 0;
    transition: color 0.15s ease, background 0.15s ease;
}

.link-remove-btn:hover[b-4l5twxi05v] {
    color: #dc2626;
    background: #fef2f2;
}

.link-add-btn[b-4l5twxi05v] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.link-add-btn:hover[b-4l5twxi05v] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

.tag-edit-preview[b-4l5twxi05v] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.form-section-desc[b-4l5twxi05v] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0 0 1rem;
    padding: 0.75rem 1.25rem 0;
}

/* ── Flag selector ────────────────────────────────────────────── */
.flag-selector[b-4l5twxi05v] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.flag-btn[b-4l5twxi05v] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.flag-btn:hover[b-4l5twxi05v] {
    border-color: var(--color-brand-teal);
    color: var(--color-text);
}

.flag-btn-dot[b-4l5twxi05v] {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-border);
    flex-shrink: 0;
}

/* Dot colours per flag */
.flag-btn--none    .flag-btn-dot[b-4l5twxi05v] { background: var(--color-border); }
.flag-btn--good    .flag-btn-dot[b-4l5twxi05v] { background: #16a34a; }
.flag-btn--review  .flag-btn-dot[b-4l5twxi05v] { background: #d97706; }
.flag-btn--bad     .flag-btn-dot[b-4l5twxi05v] { background: #dc2626; }

/* Active states */
.flag-btn--active[b-4l5twxi05v] {
    font-weight: 600;
    color: var(--color-text-strong);
}

.flag-btn--none.flag-btn--active[b-4l5twxi05v]   { border-color: var(--color-text-muted); background: var(--color-surface-raised); }
.flag-btn--good.flag-btn--active[b-4l5twxi05v]   { border-color: #16a34a; background: #f0fdf4; color: #15803d; }
.flag-btn--review.flag-btn--active[b-4l5twxi05v] { border-color: #d97706; background: #fffbeb; color: #b45309; }
.flag-btn--bad.flag-btn--active[b-4l5twxi05v]    { border-color: #dc2626; background: #fef2f2; color: #b91c1c; }

/* ── AWS collapsible section ──────────────────────────────────── */
.form-section-toggle[b-4l5twxi05v] {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.75rem 1.25rem 0;
    user-select: none;
}

.form-section-toggle:hover .form-section-title[b-4l5twxi05v] {
    color: var(--color-brand-teal);
}

.toggle-chevron[b-4l5twxi05v] {
    display: inline-block;
    font-size: 0.625rem;
    margin-right: 0.5rem;
    transition: transform 0.2s ease;
}

.toggle-chevron--open[b-4l5twxi05v] {
    transform: rotate(90deg);
}

.form-success[b-4l5twxi05v] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: #16a34a;
    display: block;
    margin-top: 0.25rem;
}

/* ── Markdown editor ──────────────────────────────────────────── */
.md-editor-tabs[b-4l5twxi05v] {
    display: flex;
    gap: 0;
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}

.md-tab[b-4l5twxi05v] {
    padding: 0.4rem 1rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius) var(--radius) 0 0;
    margin-right: 0.25rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.md-tab:hover[b-4l5twxi05v] {
    color: var(--color-text);
    background: var(--color-surface);
}

.md-tab--active[b-4l5twxi05v] {
    background: var(--color-surface);
    color: var(--color-text-strong);
    border-bottom-color: var(--color-surface);
    font-weight: 600;
}

.md-editor-textarea[b-4l5twxi05v] {
    border-radius: 0 var(--radius) var(--radius) var(--radius);
    font-family: monospace;
    font-size: 0.875rem;
    resize: vertical;
    min-height: 14rem;
}

.md-preview-panel[b-4l5twxi05v] {
    border: 1px solid var(--color-border);
    border-radius: 0 var(--radius) var(--radius) var(--radius);
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    min-height: 8rem;
}

.md-preview-empty[b-4l5twxi05v] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0;
}
/* /Components/Pages/TagImport.razor.rz.scp.css */
/* ── Wizard step indicator ───────────────────────────────────────── */

.wizard-steps[b-uncdrrolw2] {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.wizard-step[b-uncdrrolw2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.wizard-step-circle[b-uncdrrolw2] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.wizard-step--active .wizard-step-circle[b-uncdrrolw2] {
    border-color: var(--color-brand);
    background: var(--color-brand);
    color: #fff;
}

.wizard-step--done .wizard-step-circle[b-uncdrrolw2] {
    border-color: var(--color-brand-teal);
    background: var(--color-brand-teal);
    color: #fff;
}

.wizard-step-label[b-uncdrrolw2] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.wizard-step--active .wizard-step-label[b-uncdrrolw2] {
    color: var(--color-text-primary);
    font-weight: 600;
}

.wizard-step-connector[b-uncdrrolw2] {
    flex: 1;
    height: 2px;
    background: var(--color-border);
    margin: 0 0.5rem;
    min-width: 1.5rem;
    transition: background 0.15s;
}

.wizard-step-connector--done[b-uncdrrolw2] {
    background: var(--color-brand-teal);
}

/* ── Drop zone ───────────────────────────────────────────────────── */

.import-drop-zone[b-uncdrrolw2] {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    margin-bottom: 1.25rem;
}

.import-drop-zone--active[b-uncdrrolw2] {
    border-color: var(--color-brand-teal);
    background: color-mix(in srgb, var(--color-brand-teal) 6%, var(--color-surface));
}

.import-drop-inner[b-uncdrrolw2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.import-drop-icon[b-uncdrrolw2] {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--color-text-secondary);
}

.import-drop-label[b-uncdrrolw2] {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.import-drop-hint[b-uncdrrolw2] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin: 0;
    opacity: 0.75;
}

.import-browse-label[b-uncdrrolw2] {
    cursor: pointer;
}

/* ── Shared table scroll wrapper ─────────────────────────────────── */

.import-table-scroll[b-uncdrrolw2] {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

/* ── Preview table ───────────────────────────────────────────────── */

.import-preview-wrap[b-uncdrrolw2] {
    margin-top: 0.5rem;
}

.import-preview-meta[b-uncdrrolw2] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0 0 0.75rem;
}

.import-preview-table[b-uncdrrolw2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.import-preview-th[b-uncdrrolw2] {
    padding: 0.5rem 0.875rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    white-space: nowrap;
}

.import-preview-td[b-uncdrrolw2] {
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.import-preview-table tbody tr:last-child td[b-uncdrrolw2] {
    border-bottom: none;
}

/* ── Mapping table ───────────────────────────────────────────────── */

.import-map-table[b-uncdrrolw2] {
    width: 100%;
    border-collapse: collapse;
}

.import-map-th[b-uncdrrolw2] {
    padding: 0.5rem 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.import-map-row[b-uncdrrolw2] {
    border-bottom: 1px solid var(--color-border);
}

.import-map-row:last-child[b-uncdrrolw2] {
    border-bottom: none;
}

.import-map-td[b-uncdrrolw2] {
    padding: 0.625rem 1rem;
    vertical-align: middle;
    font-size: 0.875rem;
    background: var(--color-surface);
}

.import-map-td--col[b-uncdrrolw2] {
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.import-map-td--sample[b-uncdrrolw2] {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.import-map-select[b-uncdrrolw2] {
    min-width: 160px;
}

/* ── Processing spinner ──────────────────────────────────────────── */

.import-processing[b-uncdrrolw2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

.import-processing-spinner[b-uncdrrolw2] {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-brand-teal);
    border-radius: 50%;
    animation: import-spin-b-uncdrrolw2 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes import-spin-b-uncdrrolw2 {
    to { transform: rotate(360deg); }
}

/* ── Summary cards ───────────────────────────────────────────────── */

.import-summary[b-uncdrrolw2] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.import-summary-item[b-uncdrrolw2] {
    flex: 1;
    min-width: 7rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    text-align: center;
}

.import-summary-count[b-uncdrrolw2] {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--font-title);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.import-summary-label[b-uncdrrolw2] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.import-summary-item--created .import-summary-count[b-uncdrrolw2] { color: #15803d; }
.import-summary-item--failed  .import-summary-count[b-uncdrrolw2] { color: #b91c1c; }
.import-summary-item--skipped .import-summary-count[b-uncdrrolw2] { color: var(--color-text-secondary); }

/* ── Results table ───────────────────────────────────────────────── */

.import-result-table[b-uncdrrolw2] {
    width: 100%;
    border-collapse: collapse;
}

.import-result-th[b-uncdrrolw2] {
    padding: 0.5rem 1.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    white-space: nowrap;
}

.import-result-row[b-uncdrrolw2] {
    border-bottom: 1px solid var(--color-border);
}

.import-result-row:last-child[b-uncdrrolw2] {
    border-bottom: none;
}

.import-result-td[b-uncdrrolw2] {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    vertical-align: middle;
    background: var(--color-surface);
}

.import-result-td--row[b-uncdrrolw2] {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    width: 4rem;
}

.import-result-td--detail[b-uncdrrolw2] {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.import-status-badge[b-uncdrrolw2] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.import-status-badge--created[b-uncdrrolw2] {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.import-status-badge--skipped[b-uncdrrolw2] {
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.import-status-badge--failed[b-uncdrrolw2] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
/* /Components/Pages/TagsAdmin.razor.rz.scp.css */
/* ─── Table action buttons ────────────────────────────────────── */

.btn-table-edit[b-w6p0um5rt6] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 0.25rem);
    background: transparent;
    cursor: pointer;
    font-family: var(--font-body);
    text-decoration: none;
    transition: color 0.1s, border-color 0.1s, background 0.1s;
}

.btn-table-edit:hover[b-w6p0um5rt6] {
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    text-decoration: none;
}

.btn-table-remove[b-w6p0um5rt6] {
    color: #dc2626;
    border-color: #fca5a5;
    background: transparent;
    cursor: pointer;
}

.btn-table-remove:hover:not(:disabled)[b-w6p0um5rt6] {
    background: #fff5f5;
}

.btn-table-remove:disabled[b-w6p0um5rt6] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─── Page header ─────────────────────────────────────────────── */

.tags-header-right[b-w6p0um5rt6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.tags-toggle-all[b-w6p0um5rt6] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.btn-sm[b-w6p0um5rt6] {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.tags-header-actions[b-w6p0um5rt6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ─── Tag type groups ─────────────────────────────────────────── */

.tags-group[b-w6p0um5rt6] {
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.tags-group-header[b-w6p0um5rt6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
}

.tags-group-toggle[b-w6p0um5rt6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm, 0.25rem);
}

.tags-group-toggle:hover[b-w6p0um5rt6] {
    background: var(--color-border);
    color: var(--color-text-primary);
}

.tags-group-chevron[b-w6p0um5rt6] {
    display: inline-block;
    font-size: 0.875rem;
    line-height: 1;
    transition: transform 0.15s ease;
    transform: rotate(0deg);
}

.tags-group-chevron--open[b-w6p0um5rt6] {
    transform: rotate(90deg);
}

.tags-group-count[b-w6p0um5rt6] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-border);
    padding: 0.0625rem 0.4rem;
    border-radius: 0.625rem;
    line-height: 1.4;
    flex-shrink: 0;
}

.tags-group-title[b-w6p0um5rt6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.tags-group-icon[b-w6p0um5rt6] {
    font-size: 1.125rem;
    line-height: 1;
    flex-shrink: 0;
}

.tags-group-name[b-w6p0um5rt6] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.tags-group-swatch[b-w6p0um5rt6] {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.1);
}

.tags-group-desc[b-w6p0um5rt6] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tags-group-actions[b-w6p0um5rt6] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.tags-remove-hint[b-w6p0um5rt6] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* ─── Empty type message ──────────────────────────────────────── */

.tags-empty-type[b-w6p0um5rt6] {
    padding: 0.75rem 1rem;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    font-style: italic;
}

/* ─── Tags list ───────────────────────────────────────────────── */

.tags-list[b-w6p0um5rt6] {
    padding: 0.375rem 0;
}

.tags-row[b-w6p0um5rt6] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4375rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.tags-row:last-child[b-w6p0um5rt6] {
    border-bottom: none;
}

.tags-row-name[b-w6p0um5rt6] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.tags-row-desc[b-w6p0um5rt6] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Flag pill */
.tags-row-flag[b-w6p0um5rt6] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: var(--font-body);
}

.tags-row-flag--good[b-w6p0um5rt6]   { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.tags-row-flag--review[b-w6p0um5rt6] { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.tags-row-flag--bad[b-w6p0um5rt6]    { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* Meta cluster (owner, links, TV) */
.tags-row-meta[b-w6p0um5rt6] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.tags-row-owner[b-w6p0um5rt6] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.tags-row-link[b-w6p0um5rt6] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: #0052CC;
    text-decoration: none;
    white-space: nowrap;
}

.tags-row-link:hover[b-w6p0um5rt6] { text-decoration: underline; }

.tags-row-tv[b-w6p0um5rt6] {
    font-size: 0.75rem;
    color: #0175c2;
    white-space: nowrap;
}

.tags-row-aws[b-w6p0um5rt6] {
    font-size: 0.75rem;
    color: #d97706;
    white-space: nowrap;
}

.tags-row-usage[b-w6p0um5rt6] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    margin-left: auto;
}

.tags-row-actions[b-w6p0um5rt6] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}
/* /Components/Pages/TagTypeEdit.razor.rz.scp.css */
/* Allow the emoji picker panel to overflow the form section card */
.form-section[b-o2xxm4d4nr] {
    overflow: visible;
}

/* Re-apply top border-radius to the title since overflow:visible exposes it */
.form-section-title[b-o2xxm4d4nr] {
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

/* ─── Emoji picker ───────────────────────────────────────────── */

.emoji-picker-wrap[b-o2xxm4d4nr] {
    position: relative;
    display: inline-block;
}

.emoji-trigger-row[b-o2xxm4d4nr] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.emoji-trigger[b-o2xxm4d4nr] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.1s, background 0.1s;
    min-width: 9rem;
}

.emoji-trigger:hover[b-o2xxm4d4nr],
.emoji-trigger--active[b-o2xxm4d4nr] {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

.emoji-trigger-current[b-o2xxm4d4nr] {
    font-size: 1.25rem;
    line-height: 1;
}

.emoji-trigger-label[b-o2xxm4d4nr] {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.emoji-trigger-placeholder[b-o2xxm4d4nr] {
    color: var(--color-text-secondary);
}

.emoji-trigger-chevron[b-o2xxm4d4nr] {
    margin-left: auto;
    color: var(--color-text-secondary);
    flex-shrink: 0;
    transition: transform 0.15s;
}

.emoji-trigger-chevron--open[b-o2xxm4d4nr] {
    transform: rotate(180deg);
}

.emoji-clear[b-o2xxm4d4nr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: background 0.1s, color 0.1s;
}

.emoji-clear:hover[b-o2xxm4d4nr] {
    background: var(--color-danger-subtle, #fee2e2);
    color: var(--color-down, #dc2626);
    border-color: var(--color-down, #dc2626);
}

.emoji-picker-panel[b-o2xxm4d4nr] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 0.5rem;
    display: grid;
    grid-template-columns: repeat(8, 2rem);
    gap: 0.125rem;
}

.emoji-option[b-o2xxm4d4nr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 1.125rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    background: transparent;
    cursor: pointer;
    transition: background 0.1s;
    padding: 0;
    line-height: 1;
}

.emoji-option:hover[b-o2xxm4d4nr] {
    background: var(--color-surface-raised);
}

.emoji-option--selected[b-o2xxm4d4nr] {
    background: var(--color-surface-raised);
    border-color: var(--color-brand-teal);
}

/* ─── Colour palette ─────────────────────────────────────────── */

.color-palette[b-o2xxm4d4nr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.color-swatch[b-o2xxm4d4nr] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    padding: 0;
    outline: none;
}

.color-swatch:hover[b-o2xxm4d4nr] {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;
}

.color-swatch--selected[b-o2xxm4d4nr] {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-brand);
    transform: scale(1.1);
}

/* ─── Live badge preview ─────────────────────────────────────── */

.color-preview[b-o2xxm4d4nr] {
    margin-top: 0.25rem;
}

.color-preview-badge[b-o2xxm4d4nr] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.25rem;
    border: 1px solid;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font-body);
}
/* /Components/Pages/TicketsDashboard.razor.rz.scp.css */
/* ─── Metric tiles ───────────────────────────────────────────── */

.td-tiles[b-3qsqdmu3ea] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.td-tile[b-3qsqdmu3ea] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.125rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.td-tile:hover[b-3qsqdmu3ea] {
    border-color: var(--color-brand-teal);
    box-shadow: 0 4px 12px rgba(7, 70, 132, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
    text-decoration: none;
    color: inherit;
}

.td-tile-icon[b-3qsqdmu3ea] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-brand-teal) 10%, var(--color-surface));
    color: var(--color-brand-teal);
    flex-shrink: 0;
}

.td-tile-icon svg[b-3qsqdmu3ea] {
    width: 22px;
    height: 22px;
}

.td-tile-body[b-3qsqdmu3ea] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.td-tile-metric[b-3qsqdmu3ea] {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
}

.td-tile-label[b-3qsqdmu3ea] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-top: 0.125rem;
}

.td-tile-sub[b-3qsqdmu3ea] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.35;
    margin-top: 0.125rem;
}

/* ─── Error banner ──────────────────────────────────────────── */

.td-error[b-3qsqdmu3ea] {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

/* ─── Lanes layout ──────────────────────────────────────────── */

.td-lanes[b-3qsqdmu3ea] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.td-lane[b-3qsqdmu3ea] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.td-lane-header[b-3qsqdmu3ea] {
    padding: 1rem 1.125rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.td-lane-title-row[b-3qsqdmu3ea] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.td-lane-icon[b-3qsqdmu3ea] {
    width: 18px;
    height: 18px;
    color: var(--color-brand-teal);
    flex-shrink: 0;
}

.td-lane-title[b-3qsqdmu3ea] {
    font-family: var(--font-title);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    flex: 1;
}

.td-lane-count[b-3qsqdmu3ea] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.0625rem 0.5rem;
    min-width: 1.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.td-lane-sub[b-3qsqdmu3ea] {
    margin: 0.375rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.td-lane-loading[b-3qsqdmu3ea],
.td-lane-empty[b-3qsqdmu3ea] {
    margin: 0;
    padding: 1.5rem 1.125rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    font-style: italic;
}

/* ─── List + cards ──────────────────────────────────────────── */

.td-list[b-3qsqdmu3ea] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.td-list li[b-3qsqdmu3ea] {
    border-bottom: 1px solid var(--color-border);
}

.td-list li:last-child[b-3qsqdmu3ea] {
    border-bottom: none;
}

.td-card[b-3qsqdmu3ea] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1.125rem;
    text-decoration: none;
    color: var(--color-text-primary);
    transition: background 0.1s;
}

.td-card:hover[b-3qsqdmu3ea] {
    background: var(--color-surface-raised);
    text-decoration: none;
    color: var(--color-text-primary);
}

.td-card-row[b-3qsqdmu3ea] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.td-card-id[b-3qsqdmu3ea] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-brand);
    font-variant-numeric: tabular-nums;
}

.td-card-id--unlinked[b-3qsqdmu3ea] {
    color: var(--color-text-secondary);
    font-style: italic;
    font-weight: 500;
}

.td-card-age[b-3qsqdmu3ea] {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

.td-card-subject[b-3qsqdmu3ea] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.35;
}

.td-card-meta[b-3qsqdmu3ea] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

.td-card-status[b-3qsqdmu3ea] {
    text-transform: capitalize;
    font-weight: 500;
}

.td-card-status--active[b-3qsqdmu3ea]  { color: #166534; }
.td-card-status--waiting[b-3qsqdmu3ea] { color: #92400e; }
.td-card-status--default[b-3qsqdmu3ea] { color: var(--color-text-secondary); }

/* ─── Badges ────────────────────────────────────────────────── */

.td-badge[b-3qsqdmu3ea] {
    display: inline-block;
    padding: 0.0625rem 0.4rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.5;
    white-space: nowrap;
}

.td-badge--priority[b-3qsqdmu3ea] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.td-badge--session[b-3qsqdmu3ea] {
    background: color-mix(in srgb, var(--color-brand-teal) 12%, var(--color-surface));
    color: var(--color-brand-teal);
    border: 1px solid color-mix(in srgb, var(--color-brand-teal) 35%, var(--color-surface));
}

.td-badge--stage[b-3qsqdmu3ea] {
    border: 1px solid transparent;
}

.td-badge--stage-attention[b-3qsqdmu3ea] {
    background: #fffbeb;
    color: #92400e;
    border-color: #fcd34d;
}

.td-badge--stage-processing[b-3qsqdmu3ea] {
    background: color-mix(in srgb, var(--color-brand) 8%, var(--color-surface));
    color: var(--color-brand);
    border-color: color-mix(in srgb, var(--color-brand) 25%, var(--color-surface));
}

.td-badge--stage-error[b-3qsqdmu3ea] {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fca5a5;
}

/* ─── Lane footer ───────────────────────────────────────────── */

.td-lane-footer[b-3qsqdmu3ea] {
    display: block;
    padding: 0.625rem 1.125rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-brand-teal);
    text-decoration: none;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    transition: background 0.1s, color 0.1s;
}

.td-lane-footer:hover[b-3qsqdmu3ea] {
    background: color-mix(in srgb, var(--color-brand-teal) 6%, var(--color-surface-raised));
    color: var(--color-brand);
    text-decoration: none;
}
/* /Components/Pages/Users.razor.rz.scp.css */
.users-loading[b-nuz9wtpcai] {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    padding: 2rem 0;
}

.users-empty[b-nuz9wtpcai] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2.5rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
}

.users-empty p[b-nuz9wtpcai] {
    margin: 0 0 0.5rem;
}

.users-empty p:last-child[b-nuz9wtpcai] {
    margin-bottom: 0;
}

/* ─── Table ──────────────────────────────────────────────────── */
.users-table-wrap[b-nuz9wtpcai] {
    overflow-x: auto;
}

.users-table[b-nuz9wtpcai] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    font-family: var(--font-body);
}

.users-table th[b-nuz9wtpcai] {
    text-align: left;
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    padding: 0.625rem 0.75rem;
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}

.users-table td[b-nuz9wtpcai] {
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    vertical-align: middle;
}

.users-table tbody tr:hover[b-nuz9wtpcai] {
    background: var(--color-surface-raised);
}

.users-td-name[b-nuz9wtpcai] {
    font-weight: 600;
    font-family: var(--font-title);
    white-space: nowrap;
}

.users-td-email[b-nuz9wtpcai] {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.users-td-date[b-nuz9wtpcai] {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.users-th-actions[b-nuz9wtpcai],
.users-td-actions[b-nuz9wtpcai] {
    text-align: right;
    white-space: nowrap;
}

.users-td-actions[b-nuz9wtpcai] {
    display: flex;
    gap: 0.375rem;
    justify-content: flex-end;
}

/* Provider badge */
.users-provider-badge[b-nuz9wtpcai] {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--color-brand-teal) 12%, transparent);
    color: var(--color-brand-teal);
    border: 1px solid color-mix(in srgb, var(--color-brand-teal) 25%, transparent);
}

/* Unmapped helpdesk username */
.users-unmapped[b-nuz9wtpcai] {
    color: var(--color-text-secondary);
    font-style: italic;
    font-size: 0.8125rem;
}

/* Inline edit */
.users-inline-edit[b-nuz9wtpcai] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.users-inline-input[b-nuz9wtpcai] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-brand-teal);
    border-radius: 0.25rem;
    outline: none;
    width: 10rem;
    background: var(--color-surface);
    color: var(--color-text-primary);
}

.users-inline-input:focus[b-nuz9wtpcai] {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-teal) 20%, transparent);
}

.users-role-select[b-nuz9wtpcai] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    background: var(--color-surface);
    color: var(--color-text-primary);
}

.users-role-select:focus[b-nuz9wtpcai] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-teal) 20%, transparent);
}

/* ─── Reuse Clients.razor.css remove confirm styles ──────────── */
.remove-confirm-overlay[b-nuz9wtpcai] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
}

.remove-confirm-dialog[b-nuz9wtpcai] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    max-width: 26rem;
    width: calc(100% - 2rem);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.remove-confirm-title[b-nuz9wtpcai] {
    display: block;
    font-size: 1rem;
    font-family: var(--font-title);
    margin-bottom: 0.625rem;
    color: var(--color-text-primary);
}

.remove-confirm-text[b-nuz9wtpcai] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.remove-confirm-actions[b-nuz9wtpcai] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
/* /Components/Pages/WorkflowDashboard.razor.rz.scp.css */
/* ── Summary cards ──────────────────────────────────────────────────── */
.wfd-cards[b-5kn448gobn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.wfd-card[b-5kn448gobn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: box-shadow 0.15s;
}
.wfd-card:hover[b-5kn448gobn] { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.wfd-card-value[b-5kn448gobn] { font-size: 1.75rem; font-weight: 700; }
.wfd-card-value--attention[b-5kn448gobn] { color: #92400e; }
.wfd-card-value--processing[b-5kn448gobn] { color: #1e40af; }
.wfd-card-value--success[b-5kn448gobn] { color: #166534; }
.wfd-card-value--failed[b-5kn448gobn] { color: #991b1b; }
.wfd-card-label[b-5kn448gobn] { font-size: 0.75rem; color: #64748b; margin-top: 0.25rem; }

/* ── Processing status bar ─────────────────────────────────────────── */
.wfd-status-bar[b-5kn448gobn] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
    font-size: 0.8125rem;
}
.wfd-status-row[b-5kn448gobn] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
}
.wfd-status-row:last-child[b-5kn448gobn] { border-bottom: none; }
.wfd-status-label[b-5kn448gobn] {
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    min-width: 4.5rem;
}
.wfd-status-label--sep[b-5kn448gobn] {
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 1px solid #e2e8f0;
}
.wfd-status-value[b-5kn448gobn] { color: #334155; }
.wfd-status-value--off[b-5kn448gobn] { color: #94a3b8; font-weight: 600; }
.wfd-status-value--idle[b-5kn448gobn] { color: #64748b; }
.wfd-status-value--active[b-5kn448gobn] { color: #1e40af; font-weight: 600; }
.wfd-status-value--muted[b-5kn448gobn] { color: #94a3b8; }
.wfd-status-hint[b-5kn448gobn] { color: #94a3b8; font-size: 0.75rem; }
.wfd-status-hint a[b-5kn448gobn] { color: var(--color-brand-teal, #0ea5c6); }
.wfd-status-detail[b-5kn448gobn] { color: #64748b; }
.wfd-status-indicator[b-5kn448gobn] {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #3b82f6;
    animation: wfd-pulse-b-5kn448gobn 1.5s infinite;
}
@keyframes wfd-pulse-b-5kn448gobn {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── Filter tabs ───────────────────────────────────────────────────── */
.wfd-filters[b-5kn448gobn] { margin-bottom: 1.5rem; }
.wfd-filter-tabs[b-5kn448gobn] { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.wfd-filter-tab[b-5kn448gobn] {
    padding: 0.375rem 0.75rem;
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #475569;
    cursor: pointer;
}
.wfd-filter-tab:hover[b-5kn448gobn] { background: #f8fafc; }
.wfd-filter-tab--active[b-5kn448gobn] {
    background: var(--color-brand, #074684);
    color: #fff;
    border-color: var(--color-brand, #074684);
}

/* ── Table ──────────────────────────────────────────────────────────── */
.wfd-table-wrap[b-5kn448gobn] { overflow-x: auto; }
.wfd-table[b-5kn448gobn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.wfd-table th[b-5kn448gobn] {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 600;
    color: #475569;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.wfd-table td[b-5kn448gobn] {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}
.wfd-row[b-5kn448gobn] { cursor: pointer; }
.wfd-row:hover td[b-5kn448gobn] { background: #f8fafc; }
.wfd-ticket-subject[b-5kn448gobn] { font-weight: 500; }
.wfd-ticket-customer[b-5kn448gobn] { font-size: 0.75rem; color: #64748b; }
.wfd-site-name[b-5kn448gobn] { font-size: 0.75rem; color: #64748b; }

/* ── Row actions ───────────────────────────────────────────────────── */
.wfd-th-actions[b-5kn448gobn],
.wfd-td-actions[b-5kn448gobn] {
    text-align: right;
    white-space: nowrap;
}
.wfd-td-actions-inner[b-5kn448gobn] {
    display: inline-flex;
    gap: 0.375rem;
}

/* ── Remove confirm dialog ────────────────────────────────────────── */
.remove-confirm-overlay[b-5kn448gobn] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
}
.remove-confirm-dialog[b-5kn448gobn] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 0.5rem);
    padding: 1.5rem;
    max-width: 26rem;
    width: calc(100% - 2rem);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.remove-confirm-title[b-5kn448gobn] {
    display: block;
    font-size: 1rem;
    font-family: var(--font-title);
    margin-bottom: 0.625rem;
    color: var(--color-text-primary, #1e293b);
}
.remove-confirm-text[b-5kn448gobn] {
    font-size: 0.875rem;
    color: var(--color-text-secondary, #64748b);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}
.remove-confirm-actions[b-5kn448gobn] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* ── Misc ──────────────────────────────────────────────────────────── */
.wfd-loading[b-5kn448gobn], .wfd-empty[b-5kn448gobn] { color: #64748b; padding: 2rem 0; text-align: center; }

/* ── Activity log ──────────────────────────────────────────────────── */
.wfd-activity[b-5kn448gobn] {
    margin-top: 2rem;
    border-top: 1px solid #e2e8f0;
    padding-top: 1rem;
}
.wfd-activity summary[b-5kn448gobn] {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
}
.wfd-activity-list[b-5kn448gobn] { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.wfd-activity-list li[b-5kn448gobn] {
    padding: 0.25rem 0;
    font-size: 0.8125rem;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}
.wfd-activity-time[b-5kn448gobn] { color: #94a3b8; font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.wfd-activity-kind[b-5kn448gobn] { font-weight: 600; }
.wfd-activity-subject[b-5kn448gobn] { color: #334155; }
.wfd-activity-detail[b-5kn448gobn] { color: #64748b; }
/* /Components/Pages/WorkflowDetail.razor.rz.scp.css */
/* ── Back link ─────────────────────────────────────────────────────── */
.wfx-back-link[b-aq0v3wigbv] {
    display: inline-block;
    font-size: 0.8125rem;
    color: var(--color-brand-teal, #0ea5c6);
    text-decoration: none;
    margin-bottom: 0.75rem;
}
.wfx-back-link:hover[b-aq0v3wigbv] { text-decoration: underline; }

/* ── Stage progress ─────────────────────────────────────────────────── */
.wfx-progress[b-aq0v3wigbv] {
    display: flex;
    gap: 0;
    margin: 1.5rem 0;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-radius: 0.5rem;
}
.wfx-step[b-aq0v3wigbv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    position: relative;
}
.wfx-step[b-aq0v3wigbv]::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: #e2e8f0;
}
.wfx-step:last-child[b-aq0v3wigbv]::after { display: none; }
.wfx-step--done[b-aq0v3wigbv]::after { background: var(--color-brand, #074684); }
.wfx-step--current[b-aq0v3wigbv]::after { background: #e2e8f0; }

.wfx-step-dot[b-aq0v3wigbv] {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    background: #fff;
    z-index: 1;
}
.wfx-step--done .wfx-step-dot[b-aq0v3wigbv] { background: var(--color-brand, #074684); border-color: var(--color-brand, #074684); }
.wfx-step--current .wfx-step-dot[b-aq0v3wigbv] { background: #fff; border-color: var(--color-brand-teal, #0ea5c6); box-shadow: 0 0 0 3px rgba(14,165,198,0.2); }

.wfx-step-label[b-aq0v3wigbv] {
    font-size: 0.6875rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.wfx-step--done .wfx-step-label[b-aq0v3wigbv] { color: #475569; }
.wfx-step--current .wfx-step-label[b-aq0v3wigbv] { color: var(--color-brand-teal, #0ea5c6); }

/* ── Two-column layout ─────────────────────────────────────────────── */
.wfx-layout[b-aq0v3wigbv] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 960px) {
    .wfx-layout[b-aq0v3wigbv] { grid-template-columns: 1fr; }
}

/* ── Panels ────────────────────────────────────────────────────────── */
.wfx-panels[b-aq0v3wigbv] { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.wfx-panel[b-aq0v3wigbv] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.25rem;
}
.wfx-panel--attention[b-aq0v3wigbv] { border-color: #fbbf24; background: #fffbeb; }
.wfx-panel--error[b-aq0v3wigbv] { border-color: #f87171; background: #fef2f2; }
.wfx-panel--summary[b-aq0v3wigbv] { background: #f8fafc; }
.wfx-panel-title[b-aq0v3wigbv] {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #334155;
    margin: 0 0 0.75rem;
}

/* ── Analysis ──────────────────────────────────────────────────────── */
.wfx-analysis p[b-aq0v3wigbv] { margin: 0.5rem 0; }
.wfx-meta[b-aq0v3wigbv] { font-size: 0.75rem; color: #94a3b8; margin-top: 0.75rem; }

/* ── Actions list ──────────────────────────────────────────────────── */
.wfx-approval-rule[b-aq0v3wigbv] {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #713f12;
}
.wfx-approval-rule strong[b-aq0v3wigbv] { color: #92400e; }
.wfx-approval-rule-source[b-aq0v3wigbv] { color: #a16207; font-size: 0.75rem; }
.wfx-approval-blocked[b-aq0v3wigbv] {
    padding: 0.5rem 0.75rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #991b1b;
    font-weight: 600;
}
.wfx-mcp-target[b-aq0v3wigbv] {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #0c4a6e;
}
.wfx-mcp-target strong[b-aq0v3wigbv] { color: var(--color-brand, #074684); }
.wfx-actions[b-aq0v3wigbv] { display: flex; flex-direction: column; gap: 0.5rem; }
.wfx-action[b-aq0v3wigbv] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 0.375rem;
    background: #f8fafc;
}
.wfx-action--write[b-aq0v3wigbv] { background: #fef3c7; }
.wfx-action-order[b-aq0v3wigbv] {
    width: 24px; height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e2e8f0;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.wfx-action-desc[b-aq0v3wigbv] { font-weight: 500; }
.wfx-action-tool[b-aq0v3wigbv] { font-size: 0.75rem; color: #64748b; font-family: monospace; }

/* ── Approval bar ──────────────────────────────────────────────────── */
.wfx-approval-bar[b-aq0v3wigbv] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    align-items: center;
}
.wfx-notes-input[b-aq0v3wigbv] {
    flex: 1;
    padding: 0.375rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-family: var(--font-body, 'Open Sans', sans-serif);
}
.wfx-notes-input:focus[b-aq0v3wigbv] { outline: none; border-color: var(--color-brand-teal, #0ea5c6); }

/* ── Info input ────────────────────────────────────────────────────── */
.wfx-info-bar[b-aq0v3wigbv] { margin-top: 0.75rem; }
.wfx-info-input[b-aq0v3wigbv] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-family: var(--font-body, 'Open Sans', sans-serif);
    resize: vertical;
    margin-bottom: 0.5rem;
}

/* ── Execution results ─────────────────────────────────────────────── */
.wfx-exec-step[b-aq0v3wigbv] {
    margin-bottom: 0.75rem;
    padding: 0.625rem;
    border-radius: 0.375rem;
}
.wfx-exec--ok[b-aq0v3wigbv] { background: #f0fdf4; }
.wfx-exec--fail[b-aq0v3wigbv] { background: #fef2f2; }
.wfx-exec-header[b-aq0v3wigbv] { display: flex; gap: 0.5rem; align-items: center; }
.wfx-exec-badge[b-aq0v3wigbv] {
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
}
.wfx-exec--ok .wfx-exec-badge[b-aq0v3wigbv] { background: #dcfce7; color: #166534; }
.wfx-exec--fail .wfx-exec-badge[b-aq0v3wigbv] { background: #fee2e2; color: #991b1b; }
.wfx-exec-desc[b-aq0v3wigbv] { font-weight: 500; }
.wfx-exec-tool[b-aq0v3wigbv] { font-size: 0.75rem; color: #64748b; font-family: monospace; }
.wfx-exec-result[b-aq0v3wigbv] {
    margin: 0.5rem 0 0;
    padding: 0.5rem;
    background: rgba(0,0,0,0.03);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

/* ── Review ────────────────────────────────────────────────────────── */
.wfx-review-verdict[b-aq0v3wigbv] {
    display: inline-flex;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.wfx-review-verdict--correct[b-aq0v3wigbv]   { background: #dcfce7; color: #166534; }
.wfx-review-verdict--incorrect[b-aq0v3wigbv] { background: #fee2e2; color: #991b1b; }
.wfx-review-verdict--uncertain[b-aq0v3wigbv] { background: #fef3c7; color: #92400e; }

/* ── Cost grid ─────────────────────────────────────────────────────── */
.wfx-cost-grid[b-aq0v3wigbv] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
    font-size: 0.875rem;
}
.wfx-cost-grid span:nth-child(odd)[b-aq0v3wigbv] { color: #64748b; }
.wfx-cost-grid span:nth-child(even)[b-aq0v3wigbv] { font-weight: 600; }

/* ── Audit trail ───────────────────────────────────────────────────── */
.wfx-audit[b-aq0v3wigbv] { display: flex; flex-direction: column; gap: 0.375rem; }
.wfx-audit-entry[b-aq0v3wigbv] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.8125rem;
    flex-wrap: wrap;
}
.wfx-audit-time[b-aq0v3wigbv] { color: #94a3b8; font-variant-numeric: tabular-nums; }
.wfx-audit-actor[b-aq0v3wigbv] { font-weight: 600; }
.wfx-audit-notes[b-aq0v3wigbv] { color: #475569; }
.wfx-audit-duration[b-aq0v3wigbv] { color: #94a3b8; font-size: 0.75rem; }

/* ── Analysis steps ─────────────────────────────────────────────────── */
.wfx-steps-list[b-aq0v3wigbv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.wfx-step-item[b-aq0v3wigbv] {
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background: #f8fafc;
    border-left: 3px solid var(--color-brand-teal, #0ea5c6);
}
.wfx-step-header[b-aq0v3wigbv] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.wfx-step-phase[b-aq0v3wigbv] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-brand, #074684);
    min-width: 5rem;
}
.wfx-step-desc[b-aq0v3wigbv] {
    font-size: 0.8125rem;
    color: #334155;
    flex: 1;
}
.wfx-step-time[b-aq0v3wigbv] {
    font-size: 0.6875rem;
    color: #94a3b8;
}
.wfx-step-details[b-aq0v3wigbv] {
    margin: 0.25rem 0 0 5.5rem;
    padding-left: 1rem;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.6;
    list-style: none;
}
.wfx-step-details li[b-aq0v3wigbv]::before {
    content: "→ ";
    color: #94a3b8;
}

/* ── Analysis workings ─────────────────────────────────────────────── */
.wfx-workings-summary[b-aq0v3wigbv] {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    padding: 0.25rem 0;
}
.wfx-workings-summary:hover[b-aq0v3wigbv] { color: var(--color-brand-teal, #0ea5c6); }
.wfx-workings-list[b-aq0v3wigbv] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 0.75rem;
}
.wfx-workings-msg[b-aq0v3wigbv] {
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border-left: 3px solid #e2e8f0;
}
.wfx-workings-msg--user[b-aq0v3wigbv] { background: #f8fafc; border-left-color: var(--color-brand, #074684); }
.wfx-workings-msg--assistant[b-aq0v3wigbv] { background: #f0fdf4; border-left-color: #22c55e; }
.wfx-workings-msg--system[b-aq0v3wigbv] { background: #fefce8; border-left-color: #eab308; }
.wfx-workings-msg-header[b-aq0v3wigbv] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.375rem;
}
.wfx-workings-msg-role[b-aq0v3wigbv] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}
.wfx-workings-msg-time[b-aq0v3wigbv] { font-size: 0.6875rem; color: #94a3b8; }
.wfx-workings-msg-tokens[b-aq0v3wigbv] { font-size: 0.6875rem; color: #94a3b8; }
.wfx-workings-msg-body[b-aq0v3wigbv] {
    font-size: 0.8125rem;
    color: #334155;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
    font-family: var(--font-body, 'Open Sans', sans-serif);
}

/* ── Stage management ─────────────────────────────────────────────── */
.wfx-panel--manage[b-aq0v3wigbv] { border-color: var(--color-brand-teal, #0ea5c6); background: #f0fdfa; }
.wfx-manage-hint[b-aq0v3wigbv] { font-size: 0.875rem; color: #475569; margin: 0 0 0.75rem; }
.wfx-manage-actions[b-aq0v3wigbv] { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ── Error ─────────────────────────────────────────────────────────── */
.wfx-error[b-aq0v3wigbv] {
    padding: 0.75rem;
    margin-bottom: 1rem;
    background: #fef2f2;
    border: 1px solid #fee2e2;
    border-radius: 0.375rem;
    color: #991b1b;
    font-size: 0.875rem;
}
.wfx-loading[b-aq0v3wigbv] { color: #64748b; padding: 2rem 0; text-align: center; }

/* ── Ticket preview pane ──────────────────────────────────────────── */
.wfx-ticket-pane[b-aq0v3wigbv] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.25rem;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}
.wfx-ticket-loading[b-aq0v3wigbv] { color: #64748b; font-size: 0.875rem; }
.wfx-ticket-header[b-aq0v3wigbv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.wfx-ticket-id[b-aq0v3wigbv] {
    font-family: monospace;
    font-size: 0.75rem;
    color: #64748b;
}
.wfx-ticket-status[b-aq0v3wigbv] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--color-brand-teal, #0ea5c6) 12%, transparent);
    color: var(--color-brand-teal, #0ea5c6);
}
.wfx-ticket-subject[b-aq0v3wigbv] {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    line-height: 1.4;
}
.wfx-ticket-meta[b-aq0v3wigbv] {
    font-size: 0.8125rem;
    color: #475569;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 0.75rem;
}
.wfx-ticket-meta strong[b-aq0v3wigbv] { color: #334155; }
.wfx-ticket-meta-muted[b-aq0v3wigbv] { color: #94a3b8; font-size: 0.75rem; }

/* ── Ticket classification ────────────────────────────────────────── */
.wfx-ticket-classification[b-aq0v3wigbv] {
    padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
    margin-top: 0;
}
.wfx-ticket-section-title[b-aq0v3wigbv] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
    margin: 0 0 0.5rem;
}
.wfx-ticket-classify-summary[b-aq0v3wigbv] {
    font-size: 0.8125rem;
    color: #334155;
    margin: 0 0 0.5rem;
    line-height: 1.4;
}
.wfx-ticket-classify-grid[b-aq0v3wigbv] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: #475569;
}
.wfx-ticket-classify-grid strong[b-aq0v3wigbv] { color: #334155; }
.wfx-ticket-badge[b-aq0v3wigbv] {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--color-brand-teal, #0ea5c6) 12%, transparent);
    color: var(--color-brand-teal, #0ea5c6);
}
.wfx-ticket-keywords[b-aq0v3wigbv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.375rem;
}
.wfx-ticket-keyword[b-aq0v3wigbv] {
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
    background: #f1f5f9;
    border-radius: 0.25rem;
    color: #475569;
}

/* ── Attachments ──────────────────────────────────────────────────── */
.wfx-ticket-attachments[b-aq0v3wigbv] {
    padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
}
.wfx-ticket-attachment[b-aq0v3wigbv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.8125rem;
}
.wfx-ticket-attachment-name[b-aq0v3wigbv] { color: #334155; }
.wfx-ticket-attachment-size[b-aq0v3wigbv] { color: #94a3b8; font-size: 0.75rem; }

/* ── Conversation messages ────────────────────────────────────────── */
.wfx-ticket-conversation[b-aq0v3wigbv] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
}
.wfx-ticket-msg[b-aq0v3wigbv] {
    padding: 0.625rem;
    border-radius: 0.375rem;
    background: #f8fafc;
    border-left: 3px solid #e2e8f0;
}
.wfx-ticket-msg--internal[b-aq0v3wigbv] {
    background: #fffbeb;
    border-left-color: #fbbf24;
}
.wfx-ticket-msg-header[b-aq0v3wigbv] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.375rem;
}
.wfx-ticket-msg-author[b-aq0v3wigbv] {
    font-weight: 600;
    font-size: 0.8125rem;
}
.wfx-ticket-msg-time[b-aq0v3wigbv] {
    font-size: 0.6875rem;
    color: #94a3b8;
}
.wfx-ticket-msg-badge[b-aq0v3wigbv] {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.1rem 0.375rem;
    border-radius: 0.25rem;
    background: #fef3c7;
    color: #92400e;
}
.wfx-ticket-msg-body[b-aq0v3wigbv] {
    font-size: 0.8125rem;
    color: #334155;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}
/* /Components/SiteCard.razor.rz.scp.css */
/* ─── Card shell ─────────────────────────────────────────────── */

.site-card[b-pvywcj5mn2] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem 1.125rem 0.875rem;
    color: inherit;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.15s, border-color 0.15s;
    cursor: pointer;
    user-select: none;
    min-height: 190px;
}

.site-card:hover[b-pvywcj5mn2] {
    border-color: var(--color-brand-teal);
    box-shadow: 0 4px 12px rgba(7, 70, 132, 0.1);
}

.site-card:focus-visible[b-pvywcj5mn2] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

/* ─── Header: name + optional launch ────────────────────────── */

.site-card-header[b-pvywcj5mn2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.site-card-name[b-pvywcj5mn2] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    font-family: var(--font-title);
    text-decoration: none;
    /* Allow up to 2 lines before truncating */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-width: 0;
    flex: 1;
}

.site-card-name:hover[b-pvywcj5mn2] {
    text-decoration: underline;
}

.site-card-launch[b-pvywcj5mn2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.1s, background 0.1s;
    flex-shrink: 0;
    margin-top: 0.0625rem; /* optical alignment with first line of name */
}

.site-card-launch:hover[b-pvywcj5mn2] {
    color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

/* ─── Meta row: status badge + region + group ────────────────── */

.site-card-meta[b-pvywcj5mn2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.4rem;
    min-width: 0;
}

.site-card-region[b-pvywcj5mn2] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.site-card-group[b-pvywcj5mn2] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ─── Description ────────────────────────────────────────────── */

.site-card-desc[b-pvywcj5mn2] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    /* Allow up to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 0.375rem;
    line-height: 1.4;
}

/* ─── Tags row ───────────────────────────────────────────────── */

.site-card-tags[b-pvywcj5mn2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.375rem;
}

/* ─── 24-hour history bar ────────────────────────────────────── */

.site-card-history[b-pvywcj5mn2] {
    display: flex;
    gap: 2px;
    margin-top: auto;
    margin-bottom: 0.625rem;
    height: 22px;
    align-items: stretch;
    background: #e4eaf0;
    border-radius: 3px;
    padding: 2px;
    flex-shrink: 0;
}

.site-card-hour[b-pvywcj5mn2] {
    flex: 1 1 0;
    border-radius: 2px;
    min-width: 0;
    opacity: 0.85;
    transition: opacity 0.1s;
}

.site-card:hover .site-card-hour[b-pvywcj5mn2] {
    opacity: 1;
}

.site-card-hour--healthy[b-pvywcj5mn2]  { background: var(--color-healthy); }
.site-card-hour--degraded[b-pvywcj5mn2] { background: var(--color-degraded); }
.site-card-hour--down[b-pvywcj5mn2]     { background: var(--color-down); }
.site-card-hour--unknown[b-pvywcj5mn2]  { background: #b8c8d8; }

/* ─── History scale label ────────────────────────────────────── */

.site-card-history-scale[b-pvywcj5mn2] {
    font-size: 0.625rem;
    color: var(--color-text-secondary);
    text-align: right;
    margin-top: -0.3rem;
    margin-bottom: 0.375rem;
    letter-spacing: 0.02em;
    opacity: 0.75;
}

/* ─── Footer: last checked + response time ───────────────────── */

.site-card-footer[b-pvywcj5mn2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
}

.site-card-checked[b-pvywcj5mn2] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.site-card-footer-right[b-pvywcj5mn2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.site-card-version[b-pvywcj5mn2] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.site-card-response[b-pvywcj5mn2] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
/* /Components/StatusBadge.razor.rz.scp.css */
.status-badge[b-k48ld1b7cr] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.4;
}

.status-badge--healthy[b-k48ld1b7cr]  { background: #dcfce7; color: #166534; }
.status-badge--degraded[b-k48ld1b7cr] { background: #fef3c7; color: #92400e; }
.status-badge--down[b-k48ld1b7cr]     { background: #fee2e2; color: #991b1b; }
.status-badge--unknown[b-k48ld1b7cr]  { background: #f1f5f9; color: #475569; }
/* /Components/TagBadge.razor.rz.scp.css */
.tag-badge-wrap[b-k5g13jz9kx] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    vertical-align: middle;
}

.tag-badge[b-k5g13jz9kx] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    border: 1px solid;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    font-family: var(--font-body);
    line-height: 1.4;
    vertical-align: middle;
}

.tag-badge-icon[b-k5g13jz9kx] {
    font-size: 0.75rem;
    line-height: 1;
}

/* Flag dot — coloured indicator inside the badge */
.tag-flag-dot[b-k5g13jz9kx] {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 0.1rem;
}

.tag-flag-dot--good[b-k5g13jz9kx]   { background: #16a34a; }
.tag-flag-dot--review[b-k5g13jz9kx] { background: #d97706; }
.tag-flag-dot--bad[b-k5g13jz9kx]    { background: #dc2626; }

/* Generic link action pill */
.tag-action-link[b-k5g13jz9kx] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: middle;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
    line-height: 1.4;
}

.tag-action-link:hover[b-k5g13jz9kx] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand-teal);
    background: var(--color-surface-raised);
    text-decoration: none;
}

.tag-action-link svg[b-k5g13jz9kx] {
    flex-shrink: 0;
}

.tag-action-link-name[b-k5g13jz9kx] {
    max-width: 5rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Clickable tag badge — TeamViewer connect */
a.tag-badge--tv[b-k5g13jz9kx] {
    cursor: pointer;
    text-decoration: none;
}

a.tag-badge--tv:hover[b-k5g13jz9kx] {
    filter: brightness(0.88);
    text-decoration: none;
}

.tag-badge-tv-icon[b-k5g13jz9kx] {
    font-size: 0.75rem;
    line-height: 1;
    margin-left: 0.1rem;
}
/* /Components/TeamViewerLauncher.razor.rz.scp.css */
.tv-launcher[b-knujh2o5u2] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    background: #0175c2;
    color: #fff;
    border-radius: 0.25rem;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.tv-launcher:hover[b-knujh2o5u2] {
    background: #005fa3;
    box-shadow: 0 1px 4px rgba(1, 117, 194, 0.35);
    color: #fff;
    text-decoration: none;
}

.tv-launcher:active[b-knujh2o5u2] {
    background: #004d87;
}

.tv-icon[b-knujh2o5u2] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.tv-label[b-knujh2o5u2] {
    letter-spacing: 0.01em;
}
/* /Components/WorkflowStageBadge.razor.rz.scp.css */
.wf-badge[b-u2mtpbkgtl] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.4;
}

.wf-badge--idle[b-u2mtpbkgtl]       { background: #f1f5f9; color: #475569; }
.wf-badge--processing[b-u2mtpbkgtl] { background: #dbeafe; color: #1e40af; }
.wf-badge--attention[b-u2mtpbkgtl]  { background: #fef3c7; color: #92400e; }
.wf-badge--success[b-u2mtpbkgtl]    { background: #dcfce7; color: #166534; }
.wf-badge--rejected[b-u2mtpbkgtl]   { background: #fee2e2; color: #991b1b; }
.wf-badge--failed[b-u2mtpbkgtl]     { background: #fee2e2; color: #991b1b; }