/* ========================================================================== Freshdesk-style compact design — global CSS overrides ========================================================================== */ /* Base styles. Body bg flips dark when the anti-flash JS in App.razor has set data-theme="dark" on from the hd_theme cookie. This paints the page dark BEFORE Blazor + MudBlazor have booted, so no white flash on refresh. */ html, body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.4; background-color: #f5f7f9; color: #1e293b; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Theme-aware surface colors. Used in inline styles (Style="border:1px solid var(--card-border)") so they flip with dark mode without per-page conditionals. */ html { --card-border: #e2e8f0; --card-bg: #f8fafc; /* Dashboard-specific. Used by .dash-* classes AND in inline Razor styles via var(...) so dark mode flips both without per-page conditionals. */ --dash-track-bg: #f1f5f9; --dash-text-muted: #475569; --dash-text-primary: #1e293b; --dash-text-faded: #94a3b8; --dash-kpi-label: #6b7280; } html[data-theme="dark"], html[data-theme="dark"] body { background-color: #0f172a; color: #f1f5f9; } html[data-theme="dark"] { --card-border: #334155; --card-bg: #1e293b; --dash-track-bg: #334155; --dash-text-muted: #cbd5e1; --dash-text-primary: #f1f5f9; --dash-text-faded: #64748b; --dash-kpi-label: #94a3b8; } /* Anti-flash for TinyMCE editor body. In dark mode, hide the editor iframe until JS adds the .mce-ready class (set in setup/init in tinymce-interop.js after addStyle has injected the dark CSS). */ html[data-theme="dark"] .tox-edit-area__iframe { background-color: #1e293b !important; } html[data-theme="dark"] .tox-edit-area__iframe:not(.mce-ready) { visibility: hidden; } h1:focus { outline: none; } /* ========================================================================== MudBlazor Table — compact 36px rows ========================================================================== */ .mud-table-row { cursor: pointer; height: 36px !important; } .mud-table-row td { padding: 4px 12px !important; font-size: 13px !important; line-height: 1.3 !important; } .mud-table-head th { padding: 6px 12px !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: #64748b !important; background-color: #f8fafc !important; border-bottom: 1px solid #e5e8eb !important; } .mud-table-cell { border-bottom: 1px solid #f0f2f5 !important; } .mud-table-row:hover { background-color: #f5f7f9 !important; } .mud-table-container { border: 1px solid #e5e8eb !important; border-radius: 4px !important; box-shadow: none !important; } /* Pagination compact */ .mud-table-pagination { font-size: 12px !important; padding: 4px 8px !important; min-height: 36px !important; border-top: 1px solid #e5e8eb !important; } .mud-table-pagination .mud-select { font-size: 12px !important; } /* ========================================================================== MudBlazor Chip — compact sizing ========================================================================== */ .mud-chip { height: 20px !important; font-size: 11px !important; font-weight: 500 !important; padding: 0 8px !important; border-radius: 10px !important; } .mud-chip .mud-chip-content { padding: 0 !important; } .mud-chip .mud-icon-root { font-size: 14px !important; } /* ========================================================================== MudBlazor Input controls — compact but with proper label spacing ========================================================================== */ .mud-input { font-size: 13px !important; } .mud-input-label { font-size: 12px !important; } .mud-input-helper-text { font-size: 11px !important; } .mud-select-input { font-size: 13px !important; } /* ========================================================================== MudBlazor Buttons — compact ========================================================================== */ .mud-button-root { font-size: 13px !important; text-transform: none !important; font-weight: 500 !important; letter-spacing: 0 !important; } .mud-button-root.mud-button-size-small { font-size: 12px !important; padding: 2px 10px !important; } .mud-icon-button-size-small { padding: 4px !important; } /* ========================================================================== MudBlazor Cards — subtle borders, no heavy shadows ========================================================================== */ .mud-card { box-shadow: none !important; border: 1px solid #e5e8eb !important; border-radius: 4px !important; } .mud-card-header { padding: 12px 16px !important; } .mud-card-content { padding: 12px 16px !important; } .mud-card-actions { padding: 8px 16px !important; } /* ========================================================================== MudBlazor Dialog — compact ========================================================================== */ .mud-dialog .mud-dialog-title { font-size: 14px !important; font-weight: 600 !important; padding: 12px 16px !important; } .mud-dialog .mud-dialog-content { padding: 8px 16px !important; font-size: 13px !important; } .mud-dialog .mud-dialog-actions { padding: 8px 16px !important; } /* ========================================================================== MudBlazor Toolbar / AppBar — dense ========================================================================== */ .mud-toolbar { min-height: 40px !important; padding: 0 12px !important; } /* ========================================================================== MudBlazor Tabs — compact ========================================================================== */ .mud-tab { font-size: 13px !important; text-transform: none !important; min-width: auto !important; padding: 6px 14px !important; font-weight: 500 !important; } /* ========================================================================== MudBlazor Breadcrumbs — small ========================================================================== */ .mud-breadcrumbs li { font-size: 12px !important; } /* ========================================================================== MudBlazor Menu — compact items ========================================================================== */ .mud-menu-item { font-size: 13px !important; min-height: 32px !important; padding: 4px 14px !important; } /* ========================================================================== MudBlazor List — dense ========================================================================== */ .mud-list-item { padding: 4px 12px !important; min-height: 32px !important; font-size: 13px !important; } .mud-list-item-icon { min-width: 32px !important; } /* ========================================================================== MudBlazor Avatar — Freshdesk-style initial circles ========================================================================== */ .mud-avatar-small { width: 28px !important; height: 28px !important; font-size: 11px !important; } /* ========================================================================== MudBlazor Paper — no heavy elevation ========================================================================== */ .mud-paper.mud-elevation-1 { box-shadow: none !important; border: 1px solid #e5e8eb !important; } .mud-paper.mud-elevation-2 { box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; border: 1px solid #e5e8eb !important; } /* ========================================================================== MudBlazor Snackbar — compact ========================================================================== */ .mud-snackbar { font-size: 13px !important; padding: 8px 14px !important; } /* ========================================================================== Scrollbar styling — thin, subtle ========================================================================== */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #c1c7cd; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #a0a7ae; } /* ========================================================================== Content styling (message body, articles) ========================================================================== */ .message-body { line-height: 1.5; font-size: 13px; word-wrap: break-word; overflow-wrap: break-word; } .message-body img { max-width: 100%; height: auto; cursor: pointer; } /* Numbered/bulleted lists rendered inside ticket replies need explicit padding-left — without it, browser default padding is overridden somewhere higher up the cascade and the markers (1. 2. 3.) end up flush against the left edge of the message bubble. Mirrors the .article-body rule. */ .message-body ol, .message-body ul { padding-left: 1.5em; margin-bottom: 1em; } .message-body li { margin-bottom: 0.25em; } /* Lightbox overlay for full-size images */ .image-lightbox { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 9999; justify-content: center; align-items: center; cursor: pointer; } .image-lightbox.active { display: flex; } .image-lightbox img { max-width: 95vw; max-height: 95vh; width: auto; height: auto; border-radius: 4px; box-shadow: 0 4px 30px rgba(0,0,0,0.5); } .article-body { line-height: 1.6; font-size: 13px; } .article-body h1, .article-body h2, .article-body h3 { margin-top: 1.2em; margin-bottom: 0.4em; } .article-body p { margin-bottom: 0.8em; } .article-body code { background: #f0f2f5; padding: 1px 5px; border-radius: 3px; font-size: 12px; } /* ========================================================================== Utility classes ========================================================================== */ .cursor-pointer { cursor: pointer; } .cursor-pointer:hover { transform: translateY(-1px); transition: transform 0.12s ease; } /* ========================================================================== Blazor error UI ========================================================================== */ #blazor-error-ui { background: #b32121; color: white; bottom: 0; box-shadow: 0 -4px 8px rgba(0,0,0,0.15); display: none; left: 0; padding: 10px 20px; position: fixed; width: 100%; z-index: 9999; font-size: 13px; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 16px; top: 8px; } .blazor-error-boundary { background: #b32121; padding: 0.8rem; color: white; border-radius: 4px; font-size: 13px; } .blazor-error-boundary::after { content: "An error has occurred."; } /* ========================================================================== Form validation ========================================================================== */ .valid.modified:not([type=checkbox]) { outline: none; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; font-size: 11px; } /* Code blocks in message body and article views */ .message-body pre, .message-body .ql-syntax, .message-body .ql-code-block-container, .article-body pre, .article-body .ql-syntax, .article-body .ql-code-block-container { position: relative; background-color: #1e293b; color: #e2e8f0; padding: 12px 16px; border-radius: 6px; font-family: 'Fira Code', 'Cascadia Code', 'Consolas', 'Monaco', monospace; font-size: 12px; line-height: 1.5; overflow-x: auto; white-space: pre; margin: 8px 0; } .message-body .ql-code-block, .article-body .ql-code-block { font-family: 'Fira Code', 'Cascadia Code', 'Consolas', 'Monaco', monospace; font-size: 12px; color: #e2e8f0; } /* Article body typography */ .article-body img { max-width: 100% !important; height: auto !important; border: 1px solid #e2e8f0; border-radius: 8px; margin: 12px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .article-body h1, .article-body h2, .article-body h3 { color: #1e293b; margin-top: 1.5em; margin-bottom: 0.5em; } .article-body p { margin-bottom: 0.8em; } .article-body ol, .article-body ul { padding-left: 1.5em; margin-bottom: 1em; } .article-body li { margin-bottom: 0.4em; } .article-body a { color: #2563eb; text-decoration: underline; } .code-copy-btn { position: absolute; top: 6px; right: 6px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); color: #e2e8f0; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-family: 'Inter', sans-serif; cursor: pointer; transition: background 0.15s; z-index: 1; } .code-copy-btn:hover { background: rgba(255,255,255,0.25); } .code-copy-btn.copied { background: #16a34a; border-color: #16a34a; color: #fff; } .message-body code { background-color: #f1f5f9; color: #dc2626; padding: 2px 6px; border-radius: 3px; font-family: 'Fira Code', 'Consolas', monospace; font-size: 12px; } /* Backup card pulse — applied while a job is currently running so the admin dashboard shows live activity. Pulses the box-shadow blue. */ .backup-card-running { animation: backup-pulse 1.6s ease-in-out infinite; } @keyframes backup-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.45); } 50% { box-shadow: 0 0 0 8px rgba(25, 118, 210, 0.00); } } .backup-card-running .mud-icon-root { animation: backup-spin 1.6s linear infinite; } @keyframes backup-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================================== Agent dashboard widgets — KPI tiles, bar rows, flow chart day columns ========================================================================== */ .dash-kpi { border: 1px solid var(--card-border); padding: 1.25rem 1.5rem; cursor: pointer; transition: box-shadow 0.15s, transform 0.05s; } .dash-kpi:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .dash-kpi-label { text-transform: uppercase; color: var(--dash-kpi-label); letter-spacing: 0.05em; } .dash-bar-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; } .dash-bar-label { flex: 0 0 35%; color: var(--dash-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-bar-track { flex: 1; height: 14px; background: var(--dash-track-bg); border-radius: 4px; overflow: hidden; } .dash-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease-out; } .dash-bar-count { flex: 0 0 32px; text-align: right; font-weight: 600; color: var(--dash-text-primary); } .dash-flow-day { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dash-pri-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }