/* ───────────────────────────────────────────────────────────────────────────── * Copilot Analytics Dashboard — supplemental styles. * * Tailwind covers most of what we need; this file holds: * 1. Vue cloak + base font * 2. Animations (page fade, KPI hover, modal entry) * 3. Component primitives that are reused enough to deserve a class * (.card, .kpi-card, .kpi-hero, .kpi-mini, .info-btn, modal, funnel) * 4. A custom thin scrollbar. * * Dark mode follows Tailwind's "class" strategy — see . * ────────────────────────────────────────────────────────────────────────── */ [v-cloak] { display: none; } body { font-family: 'Inter', sans-serif; } /* ─── Animations ──────────────────────────────────────────────────────────── */ .fade-in { animation: fadeIn 0.25s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .user-menu { transform-origin: top right; animation: menuIn 0.12s ease-out; } @keyframes menuIn { from { opacity: 0; transform: scale(0.95) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ─── Scrollbar ───────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } .dark ::-webkit-scrollbar-thumb { background: #475569; } /* ─── Cards & shared primitives ───────────────────────────────────────────── */ .chart-wrap { position: relative; } .tab-btn { transition: color 0.15s, border-color 0.15s; } .card { border-radius: 0.75rem; background-color: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); cursor: default; } .dark .card { background-color: #0f172a; border-color: #1e293b; } .chart-title { font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.025em; margin-bottom: 0.75rem; } .dark .chart-title { color: #cbd5e1; } /* Standard chart-card header: title + info-icon button on the right. */ .chart-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; } .chart-header h3 { font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.025em; margin: 0; } .dark .chart-header h3 { color: #cbd5e1; } /* Mode header: left-aligned tabs, info-btn pinned right, no section title. */ .chart-header.mode-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .mode-tabs { display: inline-flex; align-items: center; gap: 0.125rem; background: #f1f5f9; border-radius: 0.5rem; padding: 0.125rem; } .dark .mode-tabs { background: #1e293b; } .mode-tab { font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; padding: 0.3125rem 0.75rem; border-radius: 0.375rem; color: #64748b; background: transparent; cursor: pointer; transition: color 0.15s, background 0.15s, box-shadow 0.15s; white-space: nowrap; } .mode-tab:hover { color: #1e293b; } .dark .mode-tab { color: #94a3b8; } .dark .mode-tab:hover { color: #f1f5f9; } .mode-tab-active, .mode-tab-active:hover { color: #2563eb; background: #ffffff; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.06); } .dark .mode-tab-active, .dark .mode-tab-active:hover { color: #60a5fa; background: #0f172a; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.4); } /* HTML legend strip — sits between mode tabs and the info button so the row doubles as both the chart's tab bar and its legend. Built by htmlLegendPlugin in app.js. */ .mode-legend { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.25rem 0.625rem; } .legend-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0; background: transparent; border: 0; cursor: pointer; color: #475569; font-size: 0.6875rem; line-height: 1; font-weight: 500; transition: color 0.15s, opacity 0.15s; } .legend-chip:hover { color: #0f172a; } .dark .legend-chip { color: #cbd5e1; } .dark .legend-chip:hover { color: #f8fafc; } .legend-chip-dot { width: 8px; height: 8px; border-radius: 9999px; border: 1px solid transparent; flex-shrink: 0; } .legend-chip-label { white-space: nowrap; } .legend-chip-hidden { opacity: 0.4; } .legend-chip-hidden .legend-chip-label { text-decoration: line-through; } /* Icon button that flips a daily widget between line and bar mode. Sits just left of the info button in the chart header; matches the table-toolbar-btn vocabulary so it reads as a sibling control rather than a distinct affordance. */ .chart-type-toggle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; background: transparent; border: 0; border-radius: 0.375rem; color: #64748b; cursor: pointer; transition: color 0.12s, background-color 0.12s; flex-shrink: 0; } .chart-type-toggle:hover { color: #1e293b; background: #e2e8f0; } .dark .chart-type-toggle { color: #94a3b8; } .dark .chart-type-toggle:hover { color: #e2e8f0; background: #1e293b; } /* ─── Standard KPI card (small, in a strip) ───────────────────────────────── */ .kpi-card { position: relative; z-index: 1; border-radius: 0.75rem; background-color: #ffffff; border: 1px solid #e2e8f0; padding: 0.75rem; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.06); transition: transform 0.15s, box-shadow 0.15s; cursor: default; user-select: none; } .dark .kpi-card { background-color: #0f172a; border-color: #1e293b; } .kpi-card:hover { transform: translateY(-1px); } /* Tighter KPI used inside chart-cards (e.g. PR impact panel). */ .kpi-mini { background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 0.625rem 0.75rem; } .dark .kpi-mini { background-color: #1e293b; border-color: #334155; } .kpi-mini-label { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: #64748b; margin-bottom: 0.25rem; } .dark .kpi-mini-label { color: #94a3b8; } .kpi-mini-value { font-size: 1.25rem; font-weight: 700; color: #0f172a; line-height: 1.2; } .dark .kpi-mini-value { color: #f1f5f9; } .kpi-mini-sub { font-size: 0.625rem; color: #64748b; margin-top: 0.125rem; } .dark .kpi-mini-sub { color: #94a3b8; } /* Clickable variant — for drill-down KPI cards (e.g. Cloud Agent). */ .kpi-mini.clickable { display: block; cursor: pointer; width: 100%; font: inherit; color: inherit; transition: background-color 0.12s, border-color 0.12s, transform 0.12s; } .kpi-mini.clickable:hover { background-color: #f1f5f9; border-color: #cbd5e1; transform: translateY(-1px); } .dark .kpi-mini.clickable:hover { background-color: #1e293b; border-color: #475569; transform: translateY(-1px); } .kpi-mini.clickable:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; } /* ─── Hero KPI: the four manager-facing tiles at the top of Overview ─────── */ .kpi-hero { border-radius: 1rem; padding: 1rem 1.25rem; position: relative; border: 1px solid #e2e8f0; background: #ffffff; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.06); cursor: default; user-select: none; } .dark .kpi-hero { background: #0f172a; border-color: #1e293b; } .kpi-hero:hover { transform: translateY(-2px); } .kpi-hero::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tone, #3b82f6); border-radius: 1rem 0 0 1rem; } .kpi-hero.tone-good { --tone: #10b981; } .kpi-hero.tone-warn { --tone: #f59e0b; } .kpi-hero.tone-bad { --tone: #ef4444; } .kpi-hero.tone-info { --tone: #3b82f6; } /* Clickable variant — for drill-down hero tiles. Mirrors .kpi-mini.clickable. */ .kpi-hero.clickable { cursor: pointer; } .kpi-hero.clickable:hover { border-color: #cbd5e1; box-shadow: 0 6px 14px -6px rgb(15 23 42 / 0.18); } .dark .kpi-hero.clickable:hover { border-color: #475569; } .kpi-hero.clickable:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; } .kpi-hero-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; } .dark .kpi-hero-label { color: #94a3b8; } .kpi-hero-value { font-size: 2rem; font-weight: 800; line-height: 1.1; color: #0f172a; margin-top: 0.25rem; } .dark .kpi-hero-value { color: #f1f5f9; } .kpi-hero-sub { font-size: 0.6875rem; color: #64748b; margin-top: 0.375rem; } .dark .kpi-hero-sub { color: #94a3b8; } /* ─── Info icon button (next to chart titles) ─────────────────────────────── */ /* Hidden by default; revealed when the hosting card/KPI tile is hovered or the button itself receives keyboard focus. */ .info-btn, .info-btn-sm { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 18px; height: 18px; border-radius: 9999px; font-size: 0.6875rem; font-weight: 700; font-style: italic; font-family: 'Inter', serif; background: transparent; color: #94a3b8; border: 1px solid #cbd5e1; cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s; flex-shrink: 0; } .info-btn::after, .info-btn-sm::after { content: 'Click for details'; position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: #1e293b; color: #f1f5f9; font-size: 0.625rem; font-weight: 500; font-style: normal; padding: 3px 7px; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 50; } .info-btn::before, .info-btn-sm::before { content: ''; position: absolute; bottom: calc(100% + 1px); left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: #1e293b; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 50; } .info-btn:hover::after, .info-btn-sm:hover::after, .info-btn:hover::before, .info-btn-sm:hover::before { opacity: 1; } .info-btn-sm { width: 14px; height: 14px; font-size: 0.5625rem; } .card:hover .info-btn, .card:hover .info-btn-sm, .kpi-card:hover .info-btn-sm, .kpi-hero:hover .info-btn, .info-btn:focus-visible, .info-btn-sm:focus-visible { opacity: 1; } .dark .info-btn, .dark .info-btn-sm { color: #64748b; border-color: #475569; } .info-btn:hover, .info-btn-sm:hover { color: #2563eb; border-color: #2563eb; background: #eff6ff; } .dark .info-btn:hover, .dark .info-btn-sm:hover { color: #60a5fa; border-color: #60a5fa; background: rgba(96, 165, 250, 0.1); } /* ─── Info modal ──────────────────────────────────────────────────────────── */ .info-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.25); backdrop-filter: blur(2px); z-index: 200; animation: fadeIn 0.15s ease-out; } .info-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(540px, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); overflow-y: auto; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid #e2e8f0; border-radius: 0.75rem; box-shadow: 0 20px 50px -10px rgb(0 0 0 / 0.3); z-index: 201; animation: modalIn 0.18s cubic-bezier(0.4, 0, 0.2, 1); } .dark .info-modal { background: rgba(15, 23, 42, 0.80); border-color: #334155; } @keyframes modalIn { from { opacity: 0; transform: translate(-50%, -48%) scale(0.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .info-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0; } .dark .info-modal-header { border-color: #1e293b; } .info-modal-title { font-size: 0.9375rem; font-weight: 700; color: #0f172a; margin: 0; } .dark .info-modal-title { color: #f1f5f9; } .info-modal-close { background: none; border: none; font-size: 1.5rem; line-height: 1; color: #94a3b8; cursor: pointer; padding: 0 0.25rem; transition: color 0.15s; } .info-modal-close:hover { color: #475569; } .dark .info-modal-close:hover { color: #cbd5e1; } .info-modal-body { padding: 1.25rem; } .info-modal-body p { font-size: 0.8125rem; line-height: 1.55; color: #334155; margin: 0 0 1rem 0; } .dark .info-modal-body p { color: #cbd5e1; } .info-modal-body p:last-child { margin-bottom: 0; } .info-modal-section-label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #2563eb; margin-bottom: 0.5rem; } .dark .info-modal-section-label { color: #60a5fa; } /* Spacing between What/How (and any future) sections inside the chart info modal. The base `.info-modal-body p:last-child { margin-bottom: 0 }` zeros the gap because each

is the last child of its own section

, so we re-introduce separation between consecutive section blocks here — scoped to .info-content-modal so the user-list / column-chooser / trend modals are untouched. */ .info-content-modal .info-modal-body > div + div { margin-top: 1.5rem; } /* ─── Native form controls in dark mode ────────────────────────────────────── * `color-scheme: dark` switches the browser's built-in widgets (e.g. directly. */ .dark { color-scheme: dark; } /* ─── Flatpickr theming ────────────────────────────────────────────────────── * The default flatpickr theme is generic light/dark; this section repaints it * with the dashboard's slate palette so the picker looks native to the site * in both modes. Variables follow Tailwind's slate-* and blue-* values. */ /* Calendar shell */ .flatpickr-calendar { font-family: 'Inter', sans-serif; font-size: 0.75rem; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } .dark .flatpickr-calendar { background: #0f172a; border-color: #334155; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5); color: #e2e8f0; } .flatpickr-calendar.arrowTop:before { border-bottom-color: #e2e8f0; } .flatpickr-calendar.arrowTop:after { border-bottom-color: #ffffff; } .dark .flatpickr-calendar.arrowTop:before { border-bottom-color: #334155; } .dark .flatpickr-calendar.arrowTop:after { border-bottom-color: #0f172a; } .flatpickr-calendar.arrowBottom:before { border-top-color: #e2e8f0; } .flatpickr-calendar.arrowBottom:after { border-top-color: #ffffff; } .dark .flatpickr-calendar.arrowBottom:before { border-top-color: #334155; } .dark .flatpickr-calendar.arrowBottom:after { border-top-color: #0f172a; } /* Header (month nav + month/year label) */ .flatpickr-months .flatpickr-month { background: transparent; color: #1e293b; height: 2.5rem; } .dark .flatpickr-months .flatpickr-month { color: #e2e8f0; } /* The header is a (month) + (year) — different elements * with different user-agent and flatpickr defaults. Setting the font on the parent * and forcing `font: inherit` on both children is the only way to guarantee they * render at exactly the same size/weight/family — individual property overrides * leave gaps that the input fills in from the user-agent stylesheet. */ .flatpickr-current-month { font-family: 'Inter', sans-serif !important; font-size: 0.8125rem !important; font-weight: 600 !important; line-height: 1.4 !important; padding-top: 0.5rem; } .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year { font: inherit !important; color: #1e293b !important; background: transparent !important; border: 0 !important; outline: 0 !important; padding: 0 !important; margin: 0 !important; height: auto !important; text-align: center !important; vertical-align: baseline !important; cursor: default !important; pointer-events: none !important; } .dark .flatpickr-current-month .flatpickr-monthDropdown-months, .dark .flatpickr-current-month input.cur-year { color: #e2e8f0 !important; } .flatpickr-current-month .numInputWrapper { width: auto; cursor: default; } .flatpickr-current-month .numInputWrapper:hover, .flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: transparent !important; } /* Hide the year spinner arrows (both flatpickr's custom ones and native ones). */ .flatpickr-current-month .numInputWrapper span.arrowUp, .flatpickr-current-month .numInputWrapper span.arrowDown { display: none !important; } .flatpickr-current-month input.cur-year { -moz-appearance: textfield; appearance: textfield; } .flatpickr-current-month input.cur-year::-webkit-inner-spin-button, .flatpickr-current-month input.cur-year::-webkit-outer-spin-button { display: none; -webkit-appearance: none; margin: 0; } /* Prev/next month chevrons */ .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { fill: #64748b; color: #64748b; padding: 0.5rem; } .dark .flatpickr-months .flatpickr-prev-month, .dark .flatpickr-months .flatpickr-next-month { fill: #94a3b8; color: #94a3b8; } .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: #2563eb; } .dark .flatpickr-months .flatpickr-prev-month:hover svg, .dark .flatpickr-months .flatpickr-next-month:hover svg { fill: #60a5fa; } /* Year spinner arrows */ .numInputWrapper span.arrowUp:after { border-bottom-color: #64748b; } .numInputWrapper span.arrowDown:after { border-top-color: #64748b; } .dark .numInputWrapper span.arrowUp:after { border-bottom-color: #94a3b8; } .dark .numInputWrapper span.arrowDown:after { border-top-color: #94a3b8; } /* Weekday labels */ .flatpickr-weekdays { background: transparent; } span.flatpickr-weekday { background: transparent; color: #64748b; font-weight: 600; font-size: 0.6875rem; } .dark span.flatpickr-weekday { color: #94a3b8; } /* Day cells. Width left at the flatpickr default (39px) so 8 cells can't squeeze * into a 307.875px row — capping max-width below 307.875/8 ≈ 38.5px causes flexbox * to wrap at 8 columns, leaving day numbers misaligned under the 7-column header. */ .flatpickr-day { color: #334155; border-radius: 0.375rem; height: 32px; line-height: 32px; border: 1px solid transparent; } .dark .flatpickr-day { color: #cbd5e1; } .flatpickr-day:hover, .flatpickr-day:focus { background: #f1f5f9; border-color: transparent; color: #1e293b; } .dark .flatpickr-day:hover, .dark .flatpickr-day:focus { background: #1e293b; color: #f1f5f9; } .flatpickr-day.today { border-color: #3b82f6; color: #2563eb; font-weight: 600; } .dark .flatpickr-day.today { border-color: #60a5fa; color: #93c5fd; } .flatpickr-day.today:hover { background: #dbeafe; color: #1d4ed8; } .dark .flatpickr-day.today:hover { background: #1e3a8a; color: #dbeafe; } .flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange { background: #2563eb; border-color: #2563eb; color: #ffffff; font-weight: 600; } .dark .flatpickr-day.selected, .dark .flatpickr-day.selected:hover, .dark .flatpickr-day.startRange, .dark .flatpickr-day.endRange { background: #3b82f6; border-color: #3b82f6; color: #ffffff; } .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: #cbd5e1; background: transparent; cursor: not-allowed; } .dark .flatpickr-day.flatpickr-disabled, .dark .flatpickr-day.flatpickr-disabled:hover { color: #475569; } .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #94a3b8; } .dark .flatpickr-day.prevMonthDay, .dark .flatpickr-day.nextMonthDay { color: #475569; } /* ─── Non-interactive text: keep arrow cursor, block text selection ───────── */ .chart-title, .chart-header h3, .kpi-hero-label, .kpi-hero-value, .kpi-hero-sub, .kpi-mini-label, .kpi-mini-value, .kpi-mini-sub { cursor: default; user-select: none; } /* …but when the hosting tile is clickable, the parent's `cursor: pointer` should win over the rule above so the hand cursor doesn't flicker back to the arrow as the mouse moves across the label/value/sub text. */ .kpi-hero.clickable .kpi-hero-label, .kpi-hero.clickable .kpi-hero-value, .kpi-hero.clickable .kpi-hero-sub, .kpi-mini.clickable .kpi-mini-label, .kpi-mini.clickable .kpi-mini-value, .kpi-mini.clickable .kpi-mini-sub { cursor: inherit; } /* ─── Misc ────────────────────────────────────────────────────────────────── */ tr { transition: background 0.1s; } /* ── Column chooser dialog ──────────────────────────────────────── */ /* Override the default info-modal scrolling so the list scrolls, not the dialog, and cap the dialog height tighter so it doesn't dominate the viewport. */ .info-modal.col-chooser-modal { max-height: min(520px, calc(100vh - 4rem)); overflow: hidden; display: flex; flex-direction: column; } .info-modal.col-chooser-modal .info-modal-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; padding-bottom: 0.75rem; } .col-chooser-list { list-style: none; margin: 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; overflow-y: auto; } .col-chooser-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 6px; background: #ffffff; cursor: grab; transition: background-color 0.12s, border-color 0.12s, opacity 0.12s; user-select: none; } .dark .col-chooser-row { background: #0f172a; border-color: #1e293b; } .col-chooser-row:hover { background: #f8fafc; } .dark .col-chooser-row:hover { background: #1e293b; } .col-chooser-row.dragging { opacity: 0.4; cursor: grabbing; } .col-chooser-row.drop-target { border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6 inset; } .col-chooser-handle { flex-shrink: 0; color: #94a3b8; display: inline-flex; align-items: center; justify-content: center; } .dark .col-chooser-handle { color: #64748b; } .col-chooser-label { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: #1e293b; cursor: pointer; } .dark .col-chooser-label { color: #e2e8f0; } .col-chooser-label input[type="checkbox"] { width: 14px; height: 14px; accent-color: #3b82f6; cursor: pointer; } .col-chooser-label input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.6; } /* ─── User list modal (drill-down from Overview widgets) ─────────────── */ .info-modal.user-list-modal { max-height: 78vh; display: flex; flex-direction: column; } .info-modal.user-list-modal .info-modal-body { overflow-y: auto; padding: 0.75rem 1rem 1rem; overscroll-behavior: contain; /* don't chain wheel scroll to the page when the list hits an edge */ } /* Lock the page scrollbar while the user-list modal is open, so the wheel only * scrolls the list (and never the page underneath, even when hovering the backdrop). */ body.user-list-modal-open { overflow: hidden; } /* Draggable header — the whole header acts as a grab handle, except the close * button (which stops propagation in the markup). Once dragged, suppress the * open-animation keyframes since the inline transform replaces them. */ .info-modal.user-list-modal .user-list-drag-handle { cursor: grab; touch-action: none; /* let pointer events drive the drag on touch devices */ user-select: none; } .info-modal.user-list-modal .user-list-drag-handle .info-modal-close { cursor: pointer; } body.user-list-dragging { cursor: grabbing; user-select: none; } body.user-list-dragging .info-modal.user-list-modal .user-list-drag-handle { cursor: grabbing; } .info-modal.user-list-modal.is-dragged { animation: none; } /* ─── Info content modal drag (per-widget "i" dialog) ───────────────── * Same pattern as the user-list modal above: header is the grab handle, * close button is excluded, animation suppresses once translated. */ .info-modal.info-content-modal .info-content-drag-handle { cursor: grab; touch-action: none; user-select: none; } .info-modal.info-content-modal .info-content-drag-handle .info-modal-close { cursor: pointer; } body.info-modal-dragging { cursor: grabbing; user-select: none; } body.info-modal-dragging .info-modal.info-content-modal .info-content-drag-handle { cursor: grabbing; } .info-modal.info-content-modal.is-dragged { animation: none; } .user-list { list-style: none; padding: 0; margin: 0; } .user-list li + li { margin-top: 0.25rem; } .user-list-row { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.625rem; border-radius: 0.5rem; background: transparent; border: 1px solid transparent; text-align: left; cursor: pointer; transition: background-color 0.12s, border-color 0.12s; } .user-list-row:hover { background: #f1f5f9; border-color: #e2e8f0; } .dark .user-list-row:hover { background: #1e293b; border-color: #334155; } .user-list-row:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; } .user-list-avatar { width: 28px; height: 28px; border-radius: 9999px; object-fit: cover; flex-shrink: 0; } .user-list-meta { min-width: 0; flex: 1; } .user-list-name { font-size: 0.8125rem; font-weight: 600; color: #0f172a; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dark .user-list-name { color: #f1f5f9; } .user-list-login { display: inline-block; font-size: 0.6875rem; color: #64748b; line-height: 1.25; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-list-login:hover, .user-list-login:focus-visible { color: #2563eb; text-decoration: underline; } .dark .user-list-login { color: #94a3b8; } .dark .user-list-login:hover, .dark .user-list-login:focus-visible { color: #60a5fa; } .user-list-metric { font-size: 0.6875rem; font-weight: 600; color: #475569; white-space: nowrap; flex-shrink: 0; } .dark .user-list-metric { color: #cbd5e1; } /* ── User-summary table toolbar buttons ─────────────────────────── */ .table-toolbar-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; color: #64748b; background: transparent; border: none; cursor: pointer; transition: color 0.12s, background-color 0.12s; } .table-toolbar-btn:hover { color: #1e293b; background: #e2e8f0; } .dark .table-toolbar-btn { color: #94a3b8; } .dark .table-toolbar-btn:hover { color: #e2e8f0; background: #1e293b; } /* Info button inside the user-summary toolbar is always visible (matches the three .table-toolbar-btn siblings — the dashboard-wide hover-to-fade-in pattern would otherwise leave it invisible at rest next to them). */ .users-table-toolbar .info-btn { opacity: 1; } /* This info-button already has a native `title="About this table"` tooltip, so suppress the CSS "Click for details" tooltip to avoid showing two tooltips on hover. (Also sidesteps the clipping issue from the surrounding `.card.overflow-hidden`.) */ .users-table-toolbar .info-btn::after, .users-table-toolbar .info-btn::before { display: none; } /* ── CSV-copy toast ─────────────────────────────────────────────── */ .csv-toast { position: fixed; bottom: 1.25rem; right: 1.25rem; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; background: #0f172a; color: #f1f5f9; font-size: 0.75rem; font-weight: 600; box-shadow: 0 8px 24px -8px rgba(0,0,0,0.35); z-index: 300; animation: csvToastIn 0.18s ease-out; } .dark .csv-toast { background: #1e293b; } @keyframes csvToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── Chart legend hover tooltip ───────────────────────────────────── Singleton element shown when the cursor hovers a chart-legend item that has a description registered. Used by the Daily Activity widget to explain abbreviations like DAU / WAU / MAU. */ .legend-tip { position: fixed; z-index: 9999; pointer-events: none; display: none; max-width: 260px; padding: 6px 9px; border-radius: 6px; background: rgba(15, 23, 42, 0.94); color: #f1f5f9; font-size: 11px; line-height: 1.35; box-shadow: 0 6px 18px -4px rgba(0,0,0,0.35); } .dark .legend-tip { background: rgba(30, 41, 59, 0.96); } /* ─── Hero KPI v2: dot+label header · value+micro-viz row · always-visible pill sidekicks ── */ .kpi-hero.v2 { transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; } .kpi-hero.v2:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--tone, #3b82f6) 40%, #e2e8f0); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--tone, #3b82f6) 25%, rgba(0,0,0,0.15)); } .dark .kpi-hero.v2:hover { border-color: color-mix(in srgb, var(--tone, #3b82f6) 50%, #1e293b); } /* Option E doesn't use the left accent strip — the dot in the header carries the accent. */ .kpi-hero.v2::before { display: none; } .kpi-hero.v2.accent-amber { --tone: #f59e0b; } .kpi-hero.v2.accent-green { --tone: #22c55e; } .kpi-hero.v2.accent-blue { --tone: #3b82f6; } .kpi-hero.v2.accent-violet { --tone: #a78bfa; } /* Header row: accent dot, label, hover arrow, info button. */ .kpi-hero-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } .kpi-hero-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tone, #3b82f6); flex-shrink: 0; } .kpi-hero-head .kpi-hero-label { flex: 0 0 auto; font-size: 0.65625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; margin-top: 0; } .dark .kpi-hero-head .kpi-hero-label { color: #94a3b8; } .kpi-hero-arrow { color: #94a3b8; flex: 1; } .dark .kpi-hero-arrow { color: #64748b; } /* Main row: headline number on the left, micro-viz on the right. */ .kpi-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.25rem; } .kpi-hero-main { min-width: 0; flex: 1; } .kpi-hero-detail { font-size: 0.6875rem; color: #64748b; margin-top: 0.375rem; line-height: 1.3; } .dark .kpi-hero-detail { color: #94a3b8; } /* Ring (percentage KPIs). r=24 → circumference = 2π·24 ≈ 150.8; the template binds stroke-dashoffset to (1 - pct/100) * circumference. */ .kpi-hero-ring { width: 52px; height: 52px; flex-shrink: 0; transform: rotate(-90deg); } .kpi-hero-ring-bg { fill: none; stroke: #e2e8f0; stroke-width: 6; } .dark .kpi-hero-ring-bg { stroke: #1e293b; } .kpi-hero-ring-fg { fill: none; stroke: var(--tone, #3b82f6); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; } /* Sparkline (count KPIs). Bars are sized in JS as a % of the column. The 28-day default window puts 28 bars in here, so the gap and min-width are tuned so they all fit. overflow: hidden is a belt-and-braces guard for series longer than 28 (range mode can run up to 180 days). */ .kpi-hero-bars { display: flex; align-items: flex-end; gap: 2px; height: 36px; width: 110px; flex-shrink: 0; padding-top: 4px; overflow: hidden; } .kpi-hero-bar { flex: 1 1 0; min-width: 0; background: var(--tone, #3b82f6); border-radius: 1.5px; opacity: 0.85; } /* Pill sidekicks — always visible, sit on a row below the main viz. */ .kpi-hero-pills { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.875rem; } .kpi-hero-pill { display: inline-flex; align-items: baseline; gap: 0.3125rem; padding: 0.25rem 0.5625rem; border-radius: 9999px; background: color-mix(in srgb, var(--tone, #3b82f6) 8%, #ffffff); border: 1px solid color-mix(in srgb, var(--tone, #3b82f6) 18%, #e2e8f0); font-size: 0.6875rem; line-height: 1; color: #1e293b; transition: background-color 0.12s, border-color 0.12s; white-space: nowrap; } .dark .kpi-hero-pill { background: color-mix(in srgb, var(--tone, #3b82f6) 14%, #0f172a); border-color: color-mix(in srgb, var(--tone, #3b82f6) 28%, #1e293b); color: #f1f5f9; } .kpi-hero-pill.link { cursor: pointer; } .kpi-hero-pill.link:hover { background: color-mix(in srgb, var(--tone, #3b82f6) 16%, #ffffff); border-color: color-mix(in srgb, var(--tone, #3b82f6) 35%, #e2e8f0); } .dark .kpi-hero-pill.link:hover { background: color-mix(in srgb, var(--tone, #3b82f6) 24%, #0f172a); border-color: color-mix(in srgb, var(--tone, #3b82f6) 45%, #1e293b); } /* Alert variant — Activation tile's Inactive / Never Used pills override the accent palette with red so they read as a call to action even on the amber tile. */ .kpi-hero-pill.red { background: color-mix(in srgb, #ef4444 8%, #ffffff); border-color: color-mix(in srgb, #ef4444 22%, #e2e8f0); } .dark .kpi-hero-pill.red { background: color-mix(in srgb, #ef4444 14%, #0f172a); border-color: color-mix(in srgb, #ef4444 32%, #1e293b); } .kpi-hero-pill.red.link:hover { background: color-mix(in srgb, #ef4444 16%, #ffffff); border-color: color-mix(in srgb, #ef4444 40%, #e2e8f0); } .dark .kpi-hero-pill.red.link:hover { background: color-mix(in srgb, #ef4444 24%, #0f172a); border-color: color-mix(in srgb, #ef4444 50%, #1e293b); } .kpi-hero-pill-num { font-size: 0.8125rem; font-weight: 700; color: inherit; } .kpi-hero-pill-num.red { color: #ef4444; } .kpi-hero-pill-key { font-size: 0.5625rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; } .dark .kpi-hero-pill-key { color: #94a3b8; } /* Clickable half of a secondary-row KPI card. The hover wash tracks the inner number's text color so blue values get a blue wash, green a green wash, red a red wash — and the divider between halves stays clear. */ .kpi-card-stat-link { cursor: pointer; border-radius: 0.375rem; transition: background-color 0.15s; } .kpi-card-stat-link:has(.text-slate-800):hover { background: rgba(100, 116, 139, 0.10); } .kpi-card-stat-link:has(.text-blue-400):hover { background: rgba(59, 130, 246, 0.12); } .kpi-card-stat-link:has(.text-emerald-400):hover { background: rgba(16, 185, 129, 0.07); } .kpi-card-stat-link:has(.text-red-400):hover { background: rgba(239, 68, 68, 0.06); } .dark .kpi-card-stat-link:has(.text-slate-100):hover { background: rgba(148, 163, 184, 0.12); } .dark .kpi-card-stat-link:has(.text-blue-400):hover { background: rgba(96, 165, 250, 0.14); } .dark .kpi-card-stat-link:has(.text-emerald-400):hover { background: rgba(52, 211, 153, 0.09); } .dark .kpi-card-stat-link:has(.text-red-400):hover { background: rgba(248, 113, 113, 0.08); } /* The v2 tile drops the old left accent strip — the dot in .kpi-hero-head carries the accent now. The ::before rule above (display: none) hides it. */ .kpi-hero.v2 .kpi-hero-value { font-size: 2.125rem; letter-spacing: -0.02em; } /* ───────────────────────────── Individual User combobox ───────────────────────────── * 4-column CSS grid. Top row: chevron+name+login | num-days | divider | num-eng. * Bottom row: activity text | label-days | (empty) | label-eng. * Labels share a baseline row with the activity text per the visual brief. * --------------------------------------------------------------------------------- */ .user-combobox, .user-combobox-locked { width: 100%; } .user-combo-trigger { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-auto-rows: auto; column-gap: 0.875rem; row-gap: 0.25rem; align-items: end; width: 100%; max-width: 100%; padding: 0.375rem 1.25rem 0.375rem 0.75rem; text-align: left; background-color: transparent; border: 1px solid transparent; border-radius: 0.5rem; transition: background-color 140ms, border-color 140ms; cursor: pointer; } .user-combo-trigger:hover, .user-combo-trigger:focus-visible, .user-combo-trigger.is-open { background-color: #ffffff; border-color: rgb(203 213 225); } .user-combo-trigger:focus-visible { outline: none; box-shadow: 0 0 0 1px rgb(59 130 246); } .dark .user-combo-trigger:hover, .dark .user-combo-trigger:focus-visible, .dark .user-combo-trigger.is-open { background-color: rgb(15 23 42); border-color: rgb(51 65 85); } /* Viewer-locked variant: keep the static grid, but strip every interactive affordance so it reads as a label, not a button. */ .user-combo-trigger--static, .user-combo-trigger--static:hover, .user-combo-trigger--static:focus-visible, .user-combo-trigger--static.is-open { cursor: default; background-color: transparent; border-color: transparent; box-shadow: none; outline: none; } .dark .user-combo-trigger--static, .dark .user-combo-trigger--static:hover, .dark .user-combo-trigger--static:focus-visible, .dark .user-combo-trigger--static.is-open { background-color: transparent; border-color: transparent; } /* Placeholder trigger ("— choose a user —") overrides the grid back to flex. */ .user-combo-trigger--placeholder { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; padding: 0.375rem 0.75rem; } /* Row 1, col 1 — chevron + name + login */ .user-combo-name-row { grid-row: 1; grid-column: 1; display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .user-combo-name { font-size: 1.125rem; font-weight: 700; color: rgb(30 41 59); line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dark .user-combo-name { color: rgb(241 245 249); } .user-combo-login { font-size: 0.75rem; color: rgb(148 163 184); flex-shrink: 0; } .dark .user-combo-login { color: rgb(100 116 139); } .user-combo-placeholder { color: rgb(148 163 184); } .dark .user-combo-placeholder { color: rgb(100 116 139); } .user-combo-chevron { color: rgb(148 163 184); } /* Row 1, cols 2-4 — stat numbers + divider */ .user-stat-num { font-size: 1.375rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; grid-row: 1; justify-self: end; align-self: end; } :where(.user-stat-num) { color: rgb(15 23 42); } :where(.dark .user-stat-num) { color: #ffffff; } .user-stat-num--days { grid-column: 2; } .user-stat-num--engagement { grid-column: 4; } .user-stat-num-frac { font-size: 0.875rem; font-weight: 500; color: rgb(148 163 184); margin-left: 1px; } .dark .user-stat-num-frac { color: rgb(100 116 139); } .user-stat-divider { grid-row: 1; grid-column: 3; justify-self: center; align-self: end; color: rgb(203 213 225); font-weight: 300; font-size: 1.25rem; line-height: 1; } .dark .user-stat-divider { color: rgb(71 85 105); } /* Row 2 — activity (col 1, full-width-ish) + labels (cols 2 and 4) */ .user-combo-activity { grid-row: 2; grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: rgb(100 116 139); padding-left: 1.75rem; } .dark .user-combo-activity { color: rgb(148 163 184); } .user-combo-trigger--static .user-combo-activity { padding-left: 0; } .user-combo-activity-date { font-weight: 600; color: rgb(51 65 85); } .dark .user-combo-activity-date { color: rgb(226 232 240); } .user-combo-activity-sep, .user-combo-activity-empty { color: rgb(148 163 184); } .dark .user-combo-activity-empty { color: rgb(100 116 139); } .user-stat-label { grid-row: 2; justify-self: end; align-self: center; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(100 116 139); line-height: 1; } .dark .user-stat-label { color: rgb(148 163 184); } .user-stat-label--days { grid-column: 2; } .user-stat-label--engagement { grid-column: 4; } /* ─── Capability Adoption rings (Individual User tab) ───────────────────── * Six SVG donut rings, one per Copilot surface. Used surfaces draw an * emerald arc filled in proportion to days/window; unused surfaces show a * dashed ghost ring with an "explore →" coaching nudge. * ────────────────────────────────────────────────────────────────────────── */ .cap-rings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } @media (min-width: 640px) { .cap-rings-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .cap-rings-grid { grid-template-columns: repeat(6, 1fr); } } .cap-ring-cell { display: flex; align-items: center; gap: 10px; text-align: left; padding: 1px 8px; border-radius: 10px; transition: background-color 0.15s ease; } .cap-ring-cell:hover { background-color: #f8fafc; } .dark .cap-ring-cell:hover { background-color: rgba(30, 41, 59, 0.5); } .cap-ring-svg-wrap { width: 70px; flex-shrink: 0; } .cap-ring-svg { display: block; width: 100%; height: auto; } .cap-ring-text { display: flex; flex-direction: column; min-width: 0; } .cap-ring-track { stroke: #f1f5f9; } .dark .cap-ring-track { stroke: #334155; } .cap-ring-track-unused { stroke: #e2e8f0; stroke-dasharray: 3 3; } .dark .cap-ring-track-unused { stroke: #475569; } .cap-ring-fill { stroke: #059669; transition: stroke-dasharray 0.5s ease; } .dark .cap-ring-fill { stroke: #34d399; } .cap-ring-num { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 22px; fill: #0f172a; text-anchor: middle; letter-spacing: -0.02em; } .dark .cap-ring-num { fill: #f1f5f9; } .cap-ring-num-muted { fill: #cbd5e1; } .dark .cap-ring-num-muted { fill: #475569; } .cap-ring-num-sub { font-family: 'Inter', sans-serif; font-size: 9px; fill: #94a3b8; text-anchor: middle; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .dark .cap-ring-num-sub { fill: #64748b; } .cap-ring-num-sub-muted { fill: #cbd5e1; } .dark .cap-ring-num-sub-muted { fill: #475569; } .cap-ring-label { font-size: 11px; font-weight: 600; color: #0f172a; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.25; } .dark .cap-ring-label { color: #f1f5f9; } .cap-ring-label-muted { color: #94a3b8; font-weight: 500; } .dark .cap-ring-label-muted { color: #64748b; } .cap-ring-sub { font-size: 10.5px; color: #94a3b8; margin-top: 2px; font-weight: 500; line-height: 1.2; } .dark .cap-ring-sub { color: #64748b; } .cap-ring-sub-muted { color: #cbd5e1; } .dark .cap-ring-sub-muted { color: #475569; } /* ─── Trend icon button (next to .info-btn on widget heads) ──────────────────── * Mirrors the .info-btn / .info-btn-sm visual rules — hidden until the hosting * card/KPI tile is hovered, focused, or the button itself receives keyboard * focus. The glyph is an inline SVG line-chart drawn by ::before. */ .trend-btn, .trend-btn-sm { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 18px; height: 18px; border-radius: 9999px; background: transparent; color: #94a3b8; border: 1px solid #cbd5e1; cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s; flex-shrink: 0; padding: 0; } .trend-btn-sm { width: 14px; height: 14px; } .trend-btn svg, .trend-btn-sm svg { width: 10px; height: 10px; } .trend-btn-sm svg { width: 8px; height: 8px; } /* Chart-headers use `justify-content: space-between`; when both a trend-btn and * an info-btn appear, `margin-left: auto` pushes the trend-btn (and the info-btn * after it) flush to the right edge so they sit as a pair next to each other, * instead of the trend-btn drifting into the middle. */ .chart-header > .trend-btn { margin-left: auto; } .chart-header > .trend-btn + .info-btn { margin-left: 0.375rem; } .trend-btn::after, .trend-btn-sm::after { content: 'View monthly trend'; position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: #1e293b; color: #f1f5f9; font-size: 0.625rem; font-weight: 500; padding: 3px 7px; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 50; } .trend-btn::before, .trend-btn-sm::before { content: ''; position: absolute; bottom: calc(100% + 1px); left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: #1e293b; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 50; } .trend-btn:hover::after, .trend-btn-sm:hover::after, .trend-btn:hover::before, .trend-btn-sm:hover::before { opacity: 1; } .card:hover .trend-btn, .card:hover .trend-btn-sm, .kpi-card:hover .trend-btn-sm, .kpi-hero:hover .trend-btn, .trend-btn:focus-visible, .trend-btn-sm:focus-visible { opacity: 1; } .dark .trend-btn, .dark .trend-btn-sm { color: #64748b; border-color: #475569; } .trend-btn:hover, .trend-btn-sm:hover { color: #2563eb; border-color: #2563eb; background: #eff6ff; } .dark .trend-btn:hover, .dark .trend-btn-sm:hover { color: #60a5fa; border-color: #60a5fa; background: rgba(96, 165, 250, 0.1); } /* ─── Monthly-trend dialog ───────────────────────────────────────────────────── * Sits on top of .info-modal with a wider footprint, a chart area, and a * loading overlay scoped to the dialog body (matches customRangeLoading dots). */ .info-modal.trend-modal { width: min(840px, calc(100vw - 2rem)); max-height: 90vh; display: flex; flex-direction: column; } .info-modal.trend-modal .info-modal-body { padding: 1rem 1.25rem 1.25rem; overflow-y: auto; flex: 1 1 auto; position: relative; } .trend-modal-controls { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.5rem 1.25rem 0.75rem; border-bottom: 1px solid #e2e8f0; } .dark .trend-modal-controls { border-color: #1e293b; } .trend-modal-controls label { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 600; color: #475569; } .dark .trend-modal-controls label { color: #cbd5e1; } .trend-modal-controls select { font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 0.375rem; border: 1px solid #cbd5e1; background: #ffffff; color: #0f172a; cursor: pointer; } .dark .trend-modal-controls select { border-color: #475569; background: #1e293b; color: #f1f5f9; } .trend-modal-chart-wrap { position: relative; height: 360px; margin-bottom: 0.75rem; } .trend-modal-footnote { font-size: 0.6875rem; font-style: italic; color: #64748b; line-height: 1.45; margin-top: 0.25rem; } .dark .trend-modal-footnote { color: #94a3b8; } .trend-modal-empty { font-size: 0.8125rem; color: #64748b; text-align: center; padding: 4rem 0; } .dark .trend-modal-empty { color: #94a3b8; } .trend-modal-error { font-size: 0.75rem; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; padding: 0.5rem 0.75rem; border-radius: 0.5rem; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; } .dark .trend-modal-error { color: #fecaca; background: rgba(127, 29, 29, 0.2); border-color: rgba(248, 113, 113, 0.3); } .trend-modal-error button { margin-left: auto; font-size: 0.6875rem; font-weight: 600; padding: 0.25rem 0.5rem; border-radius: 0.25rem; background: #b91c1c; color: #ffffff; cursor: pointer; } .trend-modal-error button:hover { background: #991b1b; } .trend-modal-loading { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(2px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; z-index: 5; border-radius: 0.5rem; } .dark .trend-modal-loading { background: rgba(15, 23, 42, 0.7); } .trend-modal-loading-text { font-size: 0.75rem; font-weight: 500; color: #475569; } .dark .trend-modal-loading-text { color: #cbd5e1; } .trend-modal-loading-dots { display: inline-flex; gap: 0.25rem; } .trend-modal-loading-dots span { width: 8px; height: 8px; border-radius: 9999px; background: #2563eb; animation: trendDotBounce 1s infinite ease-in-out; } .trend-modal-loading-dots span:nth-child(2) { animation-delay: 0.15s; } .trend-modal-loading-dots span:nth-child(3) { animation-delay: 0.3s; } @keyframes trendDotBounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }