/* 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 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). */ body.theme-dark { background: radial-gradient(circle at 30% -10%, #16203a 0%, #0b1224 45%, #030712 100%) fixed; } body.theme-light { background: linear-gradient(180deg, #eef1f6 0%, #e6eaf2 100%) fixed; } /* ---------- 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(--mud-palette-primary-darken)); color: #0b0f1a; } .mud-button-filled.mud-button-filled-primary:hover { filter: brightness(1.07); } /* 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-grey); } /* 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. */ body.theme-dark .mud-table-body .mud-table-row:nth-of-type(even), body.theme-dark .mud-data-grid tbody tr:nth-of-type(even) { background: rgba(255, 255, 255, 0.025); } body.theme-light .mud-table-body .mud-table-row:nth-of-type(even), body.theme-light .mud-data-grid tbody tr:nth-of-type(even) { background: rgba(15, 23, 42, 0.025); } /* Row hover: light orange accent-soft in both modes (mockup). !important to beat the MudTable default. */ .mud-table-body .mud-table-row:hover { background: rgba(249, 115, 22, 0.14) !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, .45); } /* ---------- 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: rgba(255, 255, 255, 0.10); color: var(--mud-palette-drawer-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; }