/* 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);
}

/* 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);
}

/* ---------- 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;
}

/* 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). */
.mud-icon-button:disabled,
.mud-icon-button.mud-disabled {
    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 + accent active label ---------- */
.mud-tabs .mud-tab-slider {
    background: var(--mud-palette-primary);
}

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

/* 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;
}

.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, .45);
        background: var(--mud-palette-primary-hover);
        transform: translateY(-2px);
    }

.tip-toolcard-ic {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(249, 115, 22, .24);
    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 semantic-colored MudIcon. The icon keeps its
   MudBlazor Color (Primary/Success/Info/Error/Warning); the chip tints the same hue.
   Reused on the Inbox Monitor and SNOUT dashboards so stat cards read the same everywhere. */
.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-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) ---------- */
.tip-dropzone {
    border: 1.5px dashed rgba(249, 115, 22, .45);
    background: rgba(249, 115, 22, .04);
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: background .14s, border-color .14s;
}

    .tip-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, .45);
    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-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;
}

/* ---------- 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: #0b0f1a;
    --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-primary); }
.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(--mud-palette-primary); text-decoration: none; white-space: nowrap; }
.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; }