/* Theme 2.0 (#520) component skin.
   Skins MudBlazor components to the mockup (docs/ui/tip-app-theme-2.0.html), driven by the
   MudBlazor palette variables so one IsDarkMode switch serves both modes. Self-hosted Inter
   is declared here. Loaded after app.css in App.razor so it wins the cascade. */

/* ---------- Inter (self-hosted, SIL OFL; wwwroot/fonts) ---------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/inter-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/inter-latin-700-normal.woff2') format('woff2');
}

/* ---------- Body background: mockup radial (dark) / gradient (light) ----------
   The theme-dark / theme-light class is first set on <body> before paint by the inline
   anti-flash script in each portal's App.razor, then kept in sync by
   themeInterop.setBodyTheme (MainLayoutBase, on first render and on every toggle). */
/* The --tip-* shell tokens carry the mode-specific values MudBlazor's palette has no slot for.
   Values come from docs/ui/theme-2.1-mockup.html. */
body.theme-dark {
    background: radial-gradient(circle at 30% -10%, #1d1d20 0%, #141416 45%, #0b0b0c 100%) fixed;
    --tip-rail-edge: rgba(255, 255, 255, 0.06);
    --tip-rail-line: rgba(255, 255, 255, 0.07);
    --tip-rail-strong: #ffffff;
    --tip-rail-tagline: rgba(255, 255, 255, 0.55);
    --tip-rail-label: rgba(255, 255, 255, 0.60);
    --tip-rail-disabled: rgba(255, 255, 255, 0.40);
    --tip-rail-chip-bg: rgba(255, 255, 255, 0.05);
    --tip-rail-chip-edge: rgba(255, 255, 255, 0.10);
    --tip-rail-badge-bg: rgba(255, 255, 255, 0.08);
    --tip-rail-badge-text: rgba(255, 255, 255, 0.62);
    --tip-rail-scroll: rgba(255, 255, 255, 0.22);
    --tip-nav-hover: rgba(249, 115, 22, 0.12);
    --tip-nav-active: rgba(249, 115, 22, 0.16);
    --tip-nav-indicator: var(--mud-palette-primary);
    --tip-topbar-edge: rgba(255, 255, 255, 0.08);
    --tip-row-stripe: rgba(255, 255, 255, 0.02);
    --tip-row-hover: rgba(249, 115, 22, 0.10);
    --tip-btn-primary-end: var(--mud-palette-primary-darken);
    --tip-btn-disabled-bg: var(--mud-palette-action-disabled-background);
    /* Color roles: links, the neutral stat chip and the Waiting status. */
    --tip-link: #60a5fa;
    --tip-neutral-tile: rgba(255, 255, 255, 0.08);
    --tip-status-wait-fg: #a78bfa;
    --tip-status-wait-bg: rgba(167, 139, 250, 0.16);
    --tip-status-wait-border: rgba(167, 139, 250, 0.45);
    /* Neutral progress fill (.tip-progress-neutral): bar 4.07:1 on its track, 6.91:1 on Surface. */
    --tip-progress-fill: #a1a1aa;
    --tip-progress-track: #3f3f46;
}

/* Light rail indicator is #c2410c: the accent #ea580c is 2.81:1 on #e4e4e7, under the 3:1 non-text minimum. */
body.theme-light {
    background: linear-gradient(180deg, #f4f4f5 0%, #ececee 100%) fixed;
    --tip-rail-edge: rgba(24, 24, 27, 0.10);
    --tip-rail-line: rgba(24, 24, 27, 0.08);
    --tip-rail-strong: #18181b;
    --tip-rail-tagline: #52525b;
    --tip-rail-label: #52525b;
    --tip-rail-disabled: #71717a; /* "soon" stubs; #a1a1aa read 2.02:1 on the light rail (#1657 review smoke) */
    --tip-rail-chip-bg: rgba(24, 24, 27, 0.04);
    --tip-rail-chip-edge: rgba(24, 24, 27, 0.10);
    --tip-rail-badge-bg: rgba(24, 24, 27, 0.06);
    --tip-rail-badge-text: #52525b;
    --tip-rail-scroll: rgba(24, 24, 27, 0.22);
    --tip-nav-hover: rgba(249, 115, 22, 0.10);
    --tip-nav-active: rgba(249, 115, 22, 0.14);
    --tip-nav-indicator: #c2410c;
    --tip-topbar-edge: rgba(24, 24, 27, 0.08);
    --tip-row-stripe: rgba(24, 24, 27, 0.025);
    --tip-row-hover: rgba(249, 115, 22, 0.08);
    /* Flat fill: the darkened gradient end is only 3.77:1 under the dark label. */
    --tip-btn-primary-end: var(--mud-palette-primary);
    /* Light ActionDisabledBackground is MudBlazor's 12% black, so the flat disabled gray is BackgroundGray. */
    --tip-btn-disabled-bg: var(--mud-palette-background-gray);
    /* Color roles. On white, colored text uses the darker shade: link #2563eb, Waiting #6d28d9. */
    --tip-link: #2563eb;
    --tip-neutral-tile: rgba(24, 24, 27, 0.06);
    --tip-status-wait-fg: #6d28d9;
    --tip-status-wait-bg: rgba(167, 139, 250, 0.18);
    --tip-status-wait-border: rgba(124, 58, 237, 0.40);
    /* Neutral progress fill (.tip-progress-neutral): bar 3.81:1 on its track, 4.83:1 on Surface. */
    --tip-progress-fill: #71717a;
    --tip-progress-track: #e4e4e7;
}

/* ---------- Neutral progress fill ---------- */
/* Completion, job and share bars (Color.Default plus class tip-progress-neutral). MudBlazor's default
   fill (ActionDefault on ActionDisabled) is 2.45:1 bar to track in light mode; these tokens hold 3:1
   bar to track and bar to surface in both modes (WCAG 2.2 SC 1.4.11) without touching the palette's
   action colors, which also paint icons and disabled controls. Scoped to the default color, so a
   conditional Color.Primary (a selected topic) keeps the accent. */
.mud-progress-linear.mud-progress-linear-color-default.tip-progress-neutral:not(.mud-progress-linear-buffer)::before {
    background-color: var(--tip-progress-track);
    opacity: 1;
}

.mud-progress-linear.mud-progress-linear-color-default.tip-progress-neutral:not(.mud-progress-linear-buffer) .mud-progress-linear-bar {
    background-color: var(--tip-progress-fill);
}

/* ---------- Cards / Paper ---------- */
.mud-paper {
    border: 1px solid var(--mud-palette-lines-default);
}

/* ---------- Buttons: filled primary reads as the accent gradient with dark text ---------- */
.mud-button-filled.mud-button-filled-primary {
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--tip-btn-primary-end, var(--mud-palette-primary-darken)));
    color: var(--mud-palette-primary-text);
}

    .mud-button-filled.mud-button-filled-primary:hover {
        filter: brightness(1.07);
    }

/* No glow on any button: MudBlazor gives filled buttons and FABs an elevation shadow
   at rest, on hover, on focus and when pressed. Buttons sit flat; focus stays visible through the
   focus-visible outline, not a shadow. */
.mud-button-filled,
.mud-button-filled:hover,
.mud-button-filled:focus-visible,
.mud-button-filled:active,
.mud-fab,
.mud-fab:hover,
.mud-fab:focus-visible,
.mud-fab:active,
.mud-button-group-filled,
.mud-button-group-filled .mud-button-root:hover,
.mud-button-group-filled .mud-button-root:focus-visible,
.mud-button-group-filled .mud-button-root:active {
    box-shadow: none;
}

/* The elevation shadow was MudBlazor's keyboard-focus cue, so replace it with an outline (SC 2.4.7).
   Same ring as the rail (--tip-nav-indicator). */
.mud-button-filled:focus-visible,
.mud-fab:focus-visible {
    outline: 2px solid var(--tip-nav-indicator, var(--mud-palette-primary));
    outline-offset: 2px;
}

/* The top-bar light/dark toggle (ThemeToggle) gets the same keyboard ring. */
.tip-theme-toggle:focus-visible {
    outline: 2px solid var(--tip-nav-indicator, var(--mud-palette-primary));
    outline-offset: 2px;
}

/* Disabled ICON buttons should dim, not paint a solid gray circle. The global
   .mud-button-root:disabled rule forces a solid background (right for filled buttons,
   wrong for icon buttons, where it hides the icon inside a gray dot). Filled icon buttons keep the fill. */
.mud-icon-button:not(.mud-button-filled):disabled,
.mud-icon-button.mud-disabled:not(.mud-button-filled) {
    background-color: transparent !important;
}

/* ---------- Tables: uppercase header on a tinted bar, zebra rows, accent-soft hover ---------- */
.mud-table-head .mud-table-cell {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
}

/* Zebra rows: very subtle tint, matching the mockup (heavier default looked off in dark).
   Covers MudTable (.mud-table-body rows) AND MudDataGrid (.mud-data-grid tbody rows), which
   uses a different DOM and otherwise gets no zebra. */
.mud-table-body .mud-table-row:nth-of-type(even),
.mud-data-grid tbody tr:nth-of-type(even) {
    background: var(--tip-row-stripe, transparent);
}

/* Row hover: orange accent-soft in both modes. !important to beat the MudTable default. */
.mud-table-body .mud-table-row:hover {
    background: var(--tip-row-hover) !important;
}

/* ---------- Tabs: orange active indicator (position), neutral bold active label ---------- */
.mud-tabs .mud-tab-slider {
    background: var(--mud-palette-primary);
}

.mud-tabs .mud-tab.mud-tab-active {
    color: var(--mud-palette-text-primary);
    font-weight: 700;
}

/* Tabs container reads as one card. The panel area can default to transparent, so fill the
   container with the surface; the now-crisper global card border (LinesDefault) carries the
   edge against the dark radial page bg. */
.mud-tabs.mud-paper {
    background-color: var(--mud-palette-surface);
}

/* ---------- App-bar Section / Page breadcrumb ---------- */
.tip-crumb {
    margin-left: 10px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tip-crumb-section {
    color: var(--mud-palette-text-secondary);
}

.tip-crumb-sep {
    color: var(--mud-palette-text-disabled);
}

.tip-crumb-page {
    color: var(--mud-palette-text-primary);
    font-weight: 700;
}

/* ---------- Quick Links tool cards (Home) ---------- */
.tip-ql-section {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--mud-palette-text-secondary);
    margin: 20px 0 10px;
}

/* Labeled divider between page sections (#1841, signed-out NS Home). Used with .tip-ql-section, which
   sets the label type; this adds the rule running to the right, the page-level twin of the rail's
   .tip-rail-label. */
.tip-ql-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 32px 0 12px;
}

.tip-ql-rule {
    flex: 1;
    height: 1px;
    background: var(--mud-palette-lines-default);
}

.tip-ql-grid {
    display: grid;
    /* auto-fill (not auto-fit) keeps the column width consistent across sections,
       so a 3-card section and a 7-card section have the same card size. The 300px min
       yields wider cards (about 3 per row in the md=8 area). */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.tip-toolcard {
    display: block;
    text-decoration: none;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 14px;
    height: 100%;
    min-height: 116px;
    box-sizing: border-box;
    transition: background .14s, border-color .14s, transform .14s;
}

    .tip-toolcard:hover {
        border-color: rgba(249, 115, 22, .55);
        background: var(--mud-palette-primary-hover);
        transform: translateY(-2px);
    }

/* Launcher icon chip is neutral; only the card hover carries the accent. */
.tip-toolcard-ic {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--tip-neutral-tile);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.tip-toolcard-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.tip-toolcard-desc {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

/* ---------- AI feature banner (Inbox rule suggestions, briefs) ----------
   The motif's AI call-to-action: a soft accent glow on the card surface with an orange
   icon chip, replacing the old MudBlazor purple. Theme-aware (surface var under an
   orange-tint gradient). Qualified with .mud-paper so it beats the base card border.
   Reusable on any AI surface; pair with a .tip-stat-ic.tip-stat-ic-accent icon chip. */
.tip-ai-banner.mud-paper {
    border: 1px solid rgba(249, 115, 22, .40);
    background: linear-gradient(135deg, rgba(249, 115, 22, .16) 0%, rgba(249, 115, 22, .02) 60%), var(--mud-palette-surface);
}

body.theme-light .tip-ai-banner.mud-paper {
    background: linear-gradient(135deg, rgba(249, 115, 22, .12) 0%, rgba(249, 115, 22, .02) 60%), var(--mud-palette-surface);
}

/* ---------- Stat-card icon chips (Inbox + SNOUT dashboards) ----------
   Square-rounded soft chip behind a MudIcon. A tile that carries no status uses the neutral chip
   with a Color.Secondary (TextSecondary) icon; a status tile tints the chip to its status hue.
   The accent chip is kept for a listed accent override only. */
.tip-stat-ic {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.tip-stat-ic-neutral {
    background: var(--tip-neutral-tile);
}

.tip-stat-ic-accent {
    background: rgba(249, 115, 22, .22);
}

.tip-stat-ic-success {
    background: rgba(16, 185, 129, .20);
}

.tip-stat-ic-info {
    background: rgba(96, 165, 250, .20);
}

.tip-stat-ic-error {
    background: rgba(239, 68, 68, .20);
}

.tip-stat-ic-warning {
    background: rgba(245, 158, 11, .20);
}

/* The stat value is the loud element: large, bold, theme primary text by default.
   Only the alert stat (errors) carries a status color, set per-card via MudText Color. */
.tip-stat-value {
    font-weight: 700;
    line-height: 1.1;
}

/* Clickable stat cards (SNOUT dashboard): hover lift + accent edge to signal they navigate. */
.tip-statcard-click {
    transition: transform .14s, border-color .14s;
}

    .tip-statcard-click:hover {
        transform: translateY(-2px);
        border-color: rgba(249, 115, 22, .55);
    }

/* ---------- File-upload dropzone (admin CSV imports) ----------
   Neutral dashed edge and text at rest; the accent border and tint appear only on hover,
   keyboard focus inside the zone, or drag-over (.tip-dropzone-over). */
.tip-dropzone {
    border: 1.5px dashed var(--mud-palette-lines-inputs);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: background .14s, border-color .14s;
}

    .tip-dropzone:hover,
    .tip-dropzone:focus-within,
    .tip-dropzone.tip-dropzone-over {
        background: rgba(249, 115, 22, .08);
        border-color: rgba(249, 115, 22, .70);
    }

/* Neutral icon inside the dropzone. */
.tip-dropzone .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}

/* The public LOA Submission page is not on the color roles yet (public layout), so its dropzone keeps the
   accent look until that page moves onto them. */
.tip-dropzone.loa-dropzone {
    border-color: rgba(249, 115, 22, .45);
    background: rgba(249, 115, 22, .04);
    color: inherit;
}

    .tip-dropzone.loa-dropzone:hover {
        background: rgba(249, 115, 22, .08);
        border-color: rgba(249, 115, 22, .70);
    }

/* ---------- International Rates public: center the search block on the page ---------- */
.ir-search-wrap {
    max-width: 1040px;
    margin: 24px auto 0;
}

/* ---------- Meeting cards (Calendar Brief): subtle hover lift ---------- */
.tip-meeting-card {
    transition: transform .14s, border-color .14s;
}

    .tip-meeting-card:hover {
        transform: translateY(-2px);
    }

/* ---------- Alerts: readable in dark mode ----------
   The default text-variant alert paints the severity color as the body text (e.g. blue on
   dark for Info), which is low-contrast. In dark mode use a soft severity tint with light,
   readable message text; the leading icon keeps the severity color. */
body.theme-dark .mud-alert-text-info {
    background-color: rgba(96, 165, 250, .12);
}

body.theme-dark .mud-alert-text-success {
    background-color: rgba(16, 185, 129, .12);
}

body.theme-dark .mud-alert-text-warning {
    background-color: rgba(245, 158, 11, .12);
}

body.theme-dark .mud-alert-text-error {
    background-color: rgba(239, 68, 68, .12);
}

body.theme-dark .mud-alert-text-info .mud-alert-message,
body.theme-dark .mud-alert-text-success .mud-alert-message,
body.theme-dark .mud-alert-text-warning .mud-alert-message,
body.theme-dark .mud-alert-text-error .mud-alert-message {
    color: var(--mud-palette-text-primary);
}

/* ---------- Ticket cards (Home: My Open Tickets) ---------- */
.tip-ticket {
    display: block;
    text-decoration: none;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    transition: background .14s, border-color .14s, transform .14s;
}

a.tip-ticket:hover {
    border-color: rgba(249, 115, 22, .55);
    background: var(--mud-palette-primary-hover);
    transform: translateY(-1px);
}

.tip-ticket-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tip-ticket-num {
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    font-size: 13px;
}

.tip-ticket-subj {
    color: var(--mud-palette-text-primary);
    font-size: 13px;
    margin-top: 5px;
    line-height: 1.4;
}

.tip-ticket-status {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    padding: 1px 9px;
    border: 1px solid;
    white-space: nowrap;
}

.tip-st-open {
    color: #fcd34d;
    background: rgba(245, 158, 11, .16);
    border-color: rgba(245, 158, 11, .35);
}

.tip-st-other {
    color: #93c5fd;
    background: rgba(96, 165, 250, .16);
    border-color: rgba(96, 165, 250, .35);
}

/* Light mode: darker text + richer fill so the chips stay readable on white */
body.theme-light .tip-st-open {
    color: #92400e;
    background: rgba(245, 158, 11, .20);
    border-color: rgba(245, 158, 11, .45);
}

body.theme-light .tip-st-other {
    color: #1e40af;
    background: rgba(96, 165, 250, .18);
    border-color: rgba(96, 165, 250, .45);
}

/* ---------- Nav "soon" badge for disabled stub links ---------- */
.nav-soon {
    margin-left: auto;
    background: var(--tip-rail-badge-bg);
    color: var(--tip-rail-badge-text);
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 7px;
    letter-spacing: 0.3px;
}

/* ---------- Route-change nav overlay (navOverlay.js) ----------
   Palette-driven skin for the JS-injected overlay (#548). Behavior (show/hide, the 5s
   safety timeout) lives in navOverlay.js; visibility is toggled there via style.display,
   which overrides the display:none default below. Colors come from the MudBlazor palette
   variables so the overlay follows the active light/dark mode. */
@keyframes tip-spin {
    to {
        transform: rotate(360deg);
    }
}

.tip-nav-overlay {
    position: fixed;
    inset: 0;
    background: var(--mud-palette-overlay-dark);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
}

.tip-nav-overlay-spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 4px solid var(--mud-palette-lines-default);
    border-top-color: var(--mud-palette-primary);
    animation: tip-spin 0.6s linear infinite;
}

/* ---------- Live status tokens (epic #1629 Wave 3, True Context call chip) ----------
   Foreground, fill and border for a live "warn" (ringing) and "ok" (on call) status, from the True
   Context mockup (.ns-callchip). Dark values are the default; body.theme-light overrides the text, the
   same convention as .tip-st-open above. Components reference these instead of hardcoding hex. */
body {
    --tip-status-warn-fg: #fbbf24;
    --tip-status-warn-bg: rgba(245, 158, 11, .16);
    --tip-status-warn-border: rgba(245, 158, 11, .45);
    --tip-status-ok-fg: #34d399;
    --tip-status-ok-bg: rgba(16, 185, 129, .14);
    --tip-status-ok-border: rgba(16, 185, 129, .35);
}

body.theme-light {
    --tip-status-warn-fg: #92400e;
    --tip-status-ok-fg: #047857;
}

/* ---------- Color roles ----------
   Link fallback for a page whose body has no theme class yet (light is the default mode); the
   body.theme-* blocks above set the real value per mode. */
body {
    --tip-link: #2563eb;
}

/* Light-mode status text: the base status fills are under 4.5:1 on white, so colored status text and
   icons use the darker shades (Success #047857, Warning #92400e, Error #b91c1c). Dark mode keeps the
   base colors, which clear 4.5:1 on the dark surfaces. */
body.theme-light .mud-success-text {
    color: var(--tip-status-ok-fg) !important;
}

body.theme-light .mud-warning-text {
    color: var(--tip-status-warn-fg) !important;
}

body.theme-light .mud-error-text {
    color: var(--tip-status-fail-fg) !important;
}

/* Waiting status (violet): waiting on someone outside TIPS, such as a customer or carrier. Always
   paired with an icon or a word. .tip-chip-wait goes on a MudChip with Color.Default; .tip-status-wait-text
   colors a label or icon. */
.mud-chip.tip-chip-wait {
    background-color: var(--tip-status-wait-bg) !important;
    color: var(--tip-status-wait-fg) !important;
    border: 1px solid var(--tip-status-wait-border);
}

.mud-chip.tip-chip-wait .mud-icon-root {
    color: var(--tip-status-wait-fg);
}

.tip-status-wait-text {
    color: var(--tip-status-wait-fg) !important;
}

/* Accent override: the one greppable class for a listed, reviewed accent use on text or an icon
   (docs/ui/ui-branding-standard.md, Accent usage rule). Never use it without the PR listing. */
.tip-accent-override {
    color: var(--mud-palette-primary) !important;
}

/* Text that reads as a link inside a larger clickable element (a card that navigates). */
.tip-link-text {
    color: var(--tip-link) !important;
}

/* ---------- True Context Live Call (epic #1629 Wave 4, issue #1670) ----------
   Source chip fills by connection category, from the True Context mockup (:root --crm, --desk, --books,
   --ns). The chip text is the connection's display name; the color says the category. Fail tokens join the
   Wave 3 warn and ok status tokens. Components reference these classes and tokens, never hex. */
body {
    --tip-src-crm: #7c3aed;
    --tip-src-helpdesk: #059669;
    --tip-src-accounting: #d97706;
    --tip-src-telephony: #475569;
    --tip-src-fg: #ffffff;
    --tip-on-primary: #1b1206; /* same ink as PrimaryContrastText, so dark ink on orange is one value */
    --tip-accent-soft: rgba(249, 115, 22, .18);
    --tip-status-fail-fg: #f87171;
    --tip-status-fail-bg: rgba(239, 68, 68, .12);
    --tip-status-fail-border: rgba(239, 68, 68, .40);
}

body.theme-light {
    --tip-status-fail-fg: #b91c1c;
}

/* Pill text on status tints (issue #1737). Dark mode puts white text on every tinted tone and black on the solid
   accent fill, so each pill clears 7:1 (measured over #18181b and the .tip-ai-banner fill). Light mode keeps the
   tone colors: these tokens are unset there and the rules below fall back to the per-tone values. The
   --tip-status-*-fg tokens themselves do not change; borders keep the tone color, and icon plus word stays the cue. */
body {
    --tip-pill-on-tint: #ffffff;
    --tip-pill-on-fill: #000000;
}

body.theme-light {
    --tip-pill-on-tint: initial;
    --tip-pill-on-fill: initial;
}

.tc-src {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--tip-src-fg);
    letter-spacing: .02em;
    white-space: nowrap;
}

.tc-src-crm { background: var(--tip-src-crm); }
.tc-src-helpdesk { background: var(--tip-src-helpdesk); }
.tc-src-accounting { background: var(--tip-src-accounting); }
.tc-src-telephony { background: var(--tip-src-telephony); }

.tc-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--tip-pill-on-tint, var(--mud-palette-text-secondary));
    background: var(--mud-palette-background-gray);
}

.tc-pill .mud-icon-root { font-size: 14px; }
.tc-pill-ok { background: var(--tip-status-ok-bg); color: var(--tip-pill-on-tint, var(--tip-status-ok-fg)); border-color: var(--tip-status-ok-border); }
.tc-pill-warn { background: var(--tip-status-warn-bg); color: var(--tip-pill-on-tint, var(--tip-status-warn-fg)); border-color: var(--tip-status-warn-border); }
.tc-pill-fail { background: var(--tip-status-fail-bg); color: var(--tip-pill-on-tint, var(--tip-status-fail-fg)); border-color: var(--tip-status-fail-border); }
.tc-pill-acc { background: transparent; color: var(--tip-pill-on-tint, var(--mud-palette-primary)); border-color: var(--mud-palette-primary); }
.tc-pill-accf { background: var(--mud-palette-primary); color: var(--tip-pill-on-fill, var(--tip-on-primary)); border-color: var(--mud-palette-primary); }

.tc-grid { display: grid; gap: 16px; align-items: start; }
.tc-grid-3 { grid-template-columns: minmax(260px, 3fr) minmax(0, 5fr) minmax(280px, 3.4fr); }
.tc-grid-2 { grid-template-columns: minmax(260px, 3fr) minmax(0, 8.4fr); }
.tc-grid > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1200px) { .tc-grid-3, .tc-grid-2 { grid-template-columns: 1fr; } }

.tc-card { padding: 16px; }
.tc-card-flush { padding: 0; }
.tc-ct { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.tc-card-flush .tc-ct { padding: 14px 16px 0; }
.tc-ct .mud-icon-root { color: var(--mud-palette-text-secondary); }
.tc-ct-title { font-size: 15px; font-weight: 700; color: var(--mud-palette-text-primary); }
.tc-ct-right { margin-left: auto; display: flex; gap: 6px; align-items: center; }

.tc-who { display: flex; gap: 12px; align-items: center; }
.tc-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--tip-accent-soft); color: var(--mud-palette-primary);
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px;
}
.tc-who-name { font-size: 17px; font-weight: 700; }
.tc-who-sub { color: var(--mud-palette-text-secondary); font-size: 12.5px; }
.tc-kv { display: grid; grid-template-columns: 96px 1fr; gap: 6px 10px; margin-top: 12px; font-size: 13px; }
.tc-kv > div:nth-child(odd) { color: var(--mud-palette-text-secondary); }

.tc-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--mud-palette-lines-default); font-size: 13px; }
.tc-row:first-child { border-top: 0; }
.tc-row-text { flex: 1; min-width: 0; }
.tc-row-text small { display: block; color: var(--mud-palette-text-secondary); font-size: 12px; margin-top: 1px; }
.tc-open { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; color: var(--tip-link); text-decoration: none; white-space: nowrap; }
.tc-open:hover { text-decoration: underline; }
.tc-open:focus-visible { outline: 2px solid var(--tip-link); outline-offset: 2px; }
.tc-open .mud-icon-root { font-size: 14px; }
.tc-muted { color: var(--mud-palette-text-secondary); font-size: 12px; }

/* True Context AI brief card (issue #1725, Step A spec items 3 to 6; mockup .ns-ai). */
.tc-brief p { margin: 0 0 8px; line-height: 1.55; font-size: 13.5px; }
.tc-brief ul { margin: 4px 0 0; padding-left: 18px; line-height: 1.6; font-size: 13.5px; }
.tc-brief-flags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.tc-brief-age { font-size: 11px; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.tc-brief .tc-ct { min-height: 32px; }
.tc-brief-refresh-wrap { display: inline-flex; align-items: center; }

.tc-fchips { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.tc-fchip {
    height: 26px; padding: 0 11px; border-radius: 13px; font-size: 12px; font-weight: 600;
    border: 1px solid var(--mud-palette-lines-default); display: inline-flex; align-items: center; cursor: pointer;
    color: var(--mud-palette-text-secondary); background: var(--mud-palette-surface);
}
.tc-fchip-on { background: var(--mud-palette-primary); color: var(--tip-on-primary); border-color: var(--mud-palette-primary); }

.tc-tl { position: relative; padding-left: 20px; }
.tc-tl::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--mud-palette-lines-default); }
.tc-ev { position: relative; padding: 6px 0 10px; font-size: 13px; }
.tc-ev::before {
    content: ""; position: absolute; left: -19px; top: 10px; width: 10px; height: 10px; border-radius: 50%;
    background: var(--mud-palette-surface); border: 2px solid var(--mud-palette-primary);
}
.tc-ev-date { color: var(--mud-palette-text-secondary); font-size: 11.5px; margin-top: 2px; }

.tc-banner .mud-alert-message { flex: 1; min-width: 0; }
.tc-banner-num { font-weight: 700; font-size: 15px; }
.tc-banner-right { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* True Context write actions (issue #1739, Wave 6 Step A spec; mockup .ns-dry, .ns-quick, .ns-slot, .ns-diff, .ns-rdrawer). */
.tc-dry {
    display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .4px; white-space: nowrap;
    background: var(--tip-status-warn-bg); color: var(--tip-status-warn-fg); border: 1px solid var(--tip-status-warn-border);
}
.tc-sectl { margin: 14px 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.tc-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tc-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tc-quick .mud-button-root { justify-content: flex-start; }
.tc-write-results { margin-top: 10px; }
.tc-slot {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 8px 0;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; font-size: 13px;
}
.tc-slot-sel { border-color: var(--mud-palette-primary); background: var(--tip-accent-soft); }
.tc-slot-select { max-width: 170px; }
.tc-diff {
    font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; line-height: 1.6; margin-top: 10px; padding: 10px;
    background: var(--mud-palette-background-gray); border: 1px solid var(--mud-palette-lines-default); border-radius: 6px;
}
.tc-diff-add { color: var(--tip-status-ok-fg); }
.tc-diff-old { color: var(--mud-palette-text-secondary); }
/* The drawer renders inside the page content, so as a plain temporary drawer it is absolute and as tall as the page.
   Fixed to the viewport, the header and the Save footer stay on screen and only the body scrolls (issue #1759 W2).
   It uses the surface color like the other cards, not the nav drawer gray (W1). */
.tc-wrapup.mud-drawer { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; height: 100vh; height: 100dvh; max-height: 100dvh; background-color: var(--mud-palette-surface); z-index: calc(var(--mud-zindex-appbar) + 2); }
.tc-wrapup .mud-drawer-content { display: flex; flex-direction: column; height: 100%; }
.tc-wrapup-hd { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.tc-wrapup-title { flex: 1; font-size: 17px; font-weight: 700; }
.tc-wrapup-bd { flex: 1; overflow: auto; padding: 12px 20px; }
.tc-wrapup-ft { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--mud-palette-lines-default); }
.tc-log-tabs .mud-tab { min-width: 0; padding: 9px 11px; font-size: 11.5px; letter-spacing: .3px; }

/* True Context search, call card and codes (issue #1747, Wave 7 Step A spec; mockup .ns-result, .ns-hit, .ns-snack, .ns-steps, .ns-tbl). */
.tc-result { margin-top: 12px; }
.tc-result-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 6px; }
.tc-result-name { font-weight: 700; font-size: 15px; }
.tc-hit { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--mud-palette-lines-default); font-size: 13px; }
.tc-hit .tc-row-text { flex: 1; min-width: 0; }
.tc-call-card { margin-top: 12px; margin-left: auto; max-width: 420px; }
.tc-steps { list-style: none; margin: 12px 0 0; padding: 0; font-size: 13px; }
.tc-steps li { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--mud-palette-text-secondary); }
.tc-steps li.done { color: var(--tip-status-ok-fg); }
.tc-steps li.now { color: var(--mud-palette-text-primary); font-weight: 600; }
.tc-codes td, .tc-codes th { font-size: 13px; vertical-align: middle; }
.tc-codes .tc-code { font-weight: 700; white-space: nowrap; }

/* True Context Connector Map (issue #1754, Wave 8a Step A spec; mockup .ns-mapper, .palette, .canvas, .node, .edge, .inspector). */
.tc-map { display: grid; grid-template-columns: 220px minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 1199px) { .tc-map { grid-template-columns: 200px minmax(0, 1fr); } .tc-map-side { grid-column: 1 / -1; } }
.tc-map-conn { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--mud-palette-lines-default); font-size: 13px; }
.tc-map-conn .tc-row-text { flex: 1; min-width: 0; }
.tc-map-conn.off { color: var(--mud-palette-text-secondary); }
.tc-map-canvas { position: relative; min-height: 640px; overflow: auto; border-radius: 8px;
    background-color: var(--mud-palette-background-gray);
    background-image: radial-gradient(var(--mud-palette-lines-default) 1px, transparent 1px); background-size: 20px 20px; }
.tc-map-canvas svg[data-edges] { position: absolute; left: 0; top: 0; overflow: visible; }
.tc-map-edge { fill: none; stroke: var(--mud-palette-text-secondary); stroke-width: 2; cursor: pointer; pointer-events: stroke; }
.tc-map-edge.fuzzy { stroke-dasharray: 6 5; }
.tc-map-edge.phone { stroke-dasharray: 2 4; }
.tc-map-edge.inactive { stroke-dasharray: 1 6; stroke-linecap: round; }
.tc-map-edge:focus-visible { outline: none; stroke: var(--mud-palette-primary); stroke-width: 4; }
.tc-map-edge.sel { stroke: var(--mud-palette-primary); stroke-width: 3.5; }
.tc-map-label { font-size: 11px; fill: var(--mud-palette-text-secondary); cursor: pointer; paint-order: stroke; stroke: var(--mud-palette-background-gray); stroke-width: 3px; }
.tc-map-label.sel { fill: var(--mud-palette-primary); font-weight: 700; }
.tc-map-node { position: absolute; width: 190px; border-radius: 8px; background: var(--mud-palette-surface); box-shadow: var(--mud-elevation-2);
    border: 1px solid var(--mud-palette-lines-default); user-select: none; touch-action: none; cursor: grab; outline: none; }
.tc-map-node:focus-visible { box-shadow: 0 0 0 3px var(--mud-palette-primary); }
.tc-map-node.tc-dragging { cursor: grabbing; box-shadow: var(--mud-elevation-8); }
.tc-map-node.picking { box-shadow: 0 0 0 3px var(--mud-palette-primary); }
.tc-map-node .tc-map-nh { padding: 6px 10px; border-radius: 8px 8px 0 0; color: var(--tip-src-fg); font-size: 12px; font-weight: 700; }
.tc-map-node.hub { cursor: default; }
.tc-map-node.hub .tc-map-nh { background: var(--mud-palette-primary); color: var(--tip-on-primary); }
.tc-map-node ul { list-style: none; margin: 0; padding: 6px 10px 8px; font-size: 12px; }
.tc-map-node li { display: flex; align-items: center; gap: 4px; padding: 1px 0; }
.tc-map-node li.key { font-weight: 700; }
.tc-map-legend { position: absolute; left: 12px; bottom: 10px; display: flex; gap: 14px; font-size: 11px; color: var(--mud-palette-text-secondary); }
.tc-map-legend svg line { stroke: var(--mud-palette-text-secondary); stroke-width: 2; }
.tc-map-result { margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: var(--mud-palette-background-gray); font-size: 12px; }
.tc-map-result li { padding: 2px 0; }
.tc-map-error { color: var(--mud-palette-error); font-size: 13px; }
.tc-map-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--mud-palette-lines-default); font-size: 13px; }

/* True Context transfer context (issue #1792, Step A spec in docs/feat-issue-1629/transfer-context-component-spec.md). */
.tc-xfer-sub { color: var(--mud-palette-text-secondary); font-size: 12.5px; margin: -4px 0 6px; }
.tc-xfer-desc { color: var(--mud-palette-text-secondary); font-size: 12px; margin-top: 6px; }
.tc-xfer-opt { display: flex; align-items: center; gap: 10px; width: 100%; }
.tc-xfer-opt small { display: block; color: var(--mud-palette-text-secondary); font-size: 11.5px; }
.tc-xfer-ic { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); font-size: 11.5px; font-weight: 700; }
.tc-xfer-ic .mud-icon-root { font-size: 16px; }
.tc-xfer-steps { list-style: none; margin: 6px 0 0; padding: 0; }
.tc-xfer-steps li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; color: var(--mud-palette-text-secondary); }
.tc-xfer-step-ic { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); border: 1px solid var(--mud-palette-lines-default); }
.tc-xfer-step-ic .mud-icon-root { font-size: 15px; }
.tc-xfer-steps li.done, .tc-xfer-steps li.now, .tc-xfer-steps li.fail { color: var(--mud-palette-text-primary); }
.tc-xfer-steps li.now { font-weight: 600; }
.tc-xfer-steps li.done .tc-xfer-step-ic { color: var(--tip-status-ok-fg); border-color: var(--tip-status-ok-border); background: var(--tip-status-ok-bg); }
.tc-xfer-steps li.now .tc-xfer-step-ic { color: var(--mud-palette-primary); border-color: var(--mud-palette-primary); background: var(--tip-accent-soft); }
.tc-xfer-steps li.fail .tc-xfer-step-ic { color: var(--tip-status-fail-fg); border-color: var(--tip-status-fail-border); background: var(--tip-status-fail-bg); }
.tc-xfer-hold { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13px;
    background: var(--mud-palette-background-gray); border: 1px solid var(--mud-palette-lines-default); }
.tc-xfer-hold .tc-row-text { flex: 1; }
.tc-xfer-spin { width: 14px; height: 14px; }
.tc-xfer-chip { margin: 0 0 8px 0; gap: 8px; }
.tc-xfer-chip .tc-xfer-ic { width: 22px; height: 22px; font-size: 11px; }