/* Blazor's WASM loading spinner — two concentric SVG circles. The second circle's stroke-dasharray is driven by --blazor-load-percentage which the runtime updates as the bundle downloads. Without these rules the raw SVG renders as a solid black dot. */ .loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem auto; } .loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: #1b6ec2; stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } .loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } /* Blazor's runtime error UI — hidden by default, flipped to block by Blazor when an unhandled error occurs. Must be declared early so the div in index.html doesn't flash on first paint before the rest of app.css applies. */ #blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); color: black; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* ───────────────────────────────────────────────────────────── THEME TOKENS :root = LIGHT defaults (always applied) [data-theme="dark"] = DARK overrides The pre-hydration script in App.razor sets data-theme on before first paint, so there is no flash. ───────────────────────────────────────────────────────────── */ :root { /* Core palette — light */ --color-sidebar: #f0f4f8; --color-bg: #ffffff; --color-surface: #f6f8fa; --color-border: #d0d7de; --color-text: #1f2328; --color-muted: #57606a; --color-accent: #0969da; --color-warning: #9a6700; --color-success: #1a7f37; --color-danger: #d1242f; /* Chat turn backgrounds — light */ --color-chat-user: #f0f4ff; --color-chat-user-border: #6ea8fe; --color-chat-assistant: #f0fff4; --color-chat-assistant-border: #75b798; --color-chat-system: #fffbe6; --color-chat-system-border: #ffc107; /* Purple badge token */ --color-badge-purple: #6f42c1; /* Agent status colors — light */ --color-alive: #1a7f37; --color-alive-bg: rgba(26,127,55,0.1); --color-alive-border: rgba(26,127,55,0.3); --color-stale: #d1242f; --color-stale-bg: rgba(209,36,47,0.1); --color-stale-border: rgba(209,36,47,0.3); --color-idle: #57606a; --color-idle-bg: rgba(87,96,106,0.1); --color-idle-border: rgba(87,96,106,0.2); --color-inprogress: #6366f1; --color-handed-off: #0ea5e9; --color-muted-dim: #8c959f; /* Misc */ --radius: 8px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04); } [data-theme="dark"] { /* Core palette — dark */ --color-sidebar: #1a1f36; --color-bg: #0d1117; --color-surface: #161b22; --color-border: #21262d; --color-text: #e6edf3; --color-muted: #8b949e; --color-accent: #58a6ff; --color-warning: #f59e0b; --color-success: #3fb950; --color-danger: #f85149; /* Chat turn backgrounds — dark */ --color-chat-user: #1a2744; --color-chat-user-border: #4d7bc4; --color-chat-assistant: #142c1a; --color-chat-assistant-border: #4a7c59; --color-chat-system: #2a2000; --color-chat-system-border: #b08c00; /* Purple badge token */ --color-badge-purple: #9d6fe8; /* Agent status colors — dark */ --color-alive: #22c55e; --color-alive-bg: rgba(34,197,94,0.15); --color-alive-border: rgba(34,197,94,0.4); --color-stale: #ef4444; --color-stale-bg: rgba(239,68,68,0.15); --color-stale-border: rgba(239,68,68,0.4); --color-idle: #94a3b8; --color-idle-bg: rgba(148,163,184,0.12); --color-idle-border: rgba(148,163,184,0.3); --color-inprogress: #6366f1; --color-handed-off: #38bdf8; --color-muted-dim: #484f58; /* Misc */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2); --shadow-md: 0 4px 6px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15); } /* ───────────────────────────────────────────────────────────── BASE STYLES ───────────────────────────────────────────────────────────── */ html, body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 14px; color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--color-text); } /* Cards */ .card { border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-sm) !important; background: var(--color-surface) !important; } .card-header { background: var(--color-surface) !important; border-bottom: 1px solid var(--color-border) !important; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted) !important; padding: 0.75rem 1.25rem !important; } /* Badges */ .badge { font-weight: 500; font-size: 0.72rem; letter-spacing: 0.02em; padding: 0.3em 0.65em; } /* Purple badge utility — replaces inline style="background:#6f42c1" */ .badge-purple { background-color: var(--color-badge-purple) !important; color: #fff !important; } /* Paused badge -- amber token (plan 257 / item 1170) */ .badge-paused { background-color: #d97706 !important; color: #fff !important; } [data-theme="dark"] .badge-paused { background-color: #f59e0b !important; color: #000 !important; } /* Paused item card -- amber left border */ .item-card-paused { border-left: 3px solid #d97706 !important; } [data-theme="dark"] .item-card-paused { border-left: 3px solid #f59e0b !important; } /* Hold badge -- slate-gray token (plan 262 / item 1189). Distinct from amber paused badge (decision #160: hold != paused semantics). Light mode: slate gray background, white text. Dark mode: slightly lighter slate. */ .badge-hold { background-color: #64748b !important; color: #fff !important; } [data-theme="dark"] .badge-hold { background-color: #94a3b8 !important; color: #000 !important; } /* Stale plan badge -- red token for plans with open PR older than 3 days (plan 263 / item 1195). */ .badge-stale { background-color: var(--color-stale-bg) !important; color: var(--color-stale) !important; border: 1px solid var(--color-stale-border) !important; } /* Nudge clock badge -- muted info indicator for pending hold nudges. */ .badge-nudge-clock { background-color: var(--color-surface) !important; color: var(--color-muted) !important; border: 1px solid var(--color-border) !important; cursor: default; } /* Subtle badge — theme-aware replacement for Bootstrap's bg-light text-dark pair. Light mode: light surface with muted text. Dark mode: surface-level background with text. */ .badge-subtle { background-color: var(--color-surface) !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; } /* Warning-on-dark badge/button text helper — replaces Bootstrap text-dark. Light mode: dark text on yellow (high contrast). Dark mode: dark text on yellow still works, but we use the same #000 so it stays readable. */ .badge-on-warning { color: #000 !important; } /* Info-on-dark badge text helper — replaces Bootstrap text-dark on bg-info. Light mode: dark text on cyan. Dark mode: dark text on Bootstrap's info blue is still readable. */ .badge-on-info { color: #000 !important; } /* Warning button text helper — replaces text-dark on btn-warning. */ .btn-on-warning { color: #000 !important; } /* Global dark-mode fix: Bootstrap's .text-dark utility forces #212529 everywhere, making badges/buttons invisible when their background is a dark surface. In dark mode, allow text-dark on coloured backgrounds (warning/info/etc.) to remain as-is — the background is still bright enough. But on body-coloured surfaces the colour must flip to the theme text token. The simplest broad fix: in dark mode override .text-dark to the theme text. */ [data-theme="dark"] .text-dark { color: var(--color-text) !important; } /* Exception: bg-warning and bg-info elements need dark text for contrast — re-apply. */ [data-theme="dark"] .bg-warning.text-dark, [data-theme="dark"] .bg-info.text-dark, [data-theme="dark"] .btn-warning.text-dark { color: #000 !important; } /* Surface card — theme-aware replacement for Bootstrap's bg-light on cards. Renders as a subtle inset panel in both light and dark themes. */ .card-surface { background-color: var(--color-surface) !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; } /* Chat body text — explicit color for message text in /chat cards. Bootstrap resets card body color to near-black (#212529), which is invisible in dark mode. Force to the theme text color. */ .chat-body-text { color: var(--color-text) !important; } /* Buttons */ .btn { font-weight: 500; font-size: 0.82rem; border-radius: 6px; } .btn-primary { background-color: var(--color-accent); border-color: var(--color-accent); } .btn-primary:hover { filter: brightness(1.12); background-color: var(--color-accent); border-color: var(--color-accent); } .btn-success { background-color: var(--color-success); border-color: var(--color-success); } /* Progress bars */ .progress { background-color: var(--color-border); border-radius: 4px; } .progress-bar { border-radius: 4px; } /* Forms */ .form-control, .form-select { border-color: var(--color-border); border-radius: 6px; font-size: 0.875rem; background-color: var(--color-surface); color: var(--color-text); } .form-control:focus, .form-select:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15); background-color: var(--color-surface); color: var(--color-text); } .form-label { font-size: 0.8rem; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.4rem; } /* Links */ a { color: var(--color-accent); } a:hover { color: var(--color-accent); filter: brightness(1.15); } /* Spinners */ .spinner-border { color: var(--color-accent); } /* Stat number in cards */ .stat-number { font-size: 2rem; font-weight: 700; line-height: 1; } /* Utility */ .text-muted { color: var(--color-muted) !important; } /* Bootstrap's .text-body uses --bs-body-color which is hardcoded to #212529 in light mode and is NOT updated by the app's custom data-theme attribute (the app uses data-theme="dark", not data-bs-theme=dark). Override to the app's themed foreground token so item descriptions and other .text-body nodes are readable in night mode. (Plans page item description, item 7194.) */ .text-body { color: var(--color-text) !important; } .fw-medium { font-weight: 500; } .blazor-error-boundary { background: rgba(248,81,73,0.1); border: 1px solid rgba(248,81,73,0.3); color: var(--color-danger); padding: 1rem 1.5rem; border-radius: var(--radius); margin: 1rem; } .blazor-error-boundary::after { content: "An error has occurred." } /* ───────────────────────────────────────────────────────────── List group — dark theme overrides Bootstrap's list-group-item uses hard white (#fff) background and dark text (#212529). Override under our custom data-theme. ───────────────────────────────────────────────────────────── */ [data-theme="dark"] .list-group-item { background-color: var(--color-surface) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .list-group-item-action:hover, [data-theme="dark"] .list-group-item-action:focus { background-color: var(--color-sidebar) !important; color: var(--color-text) !important; } /* Card body text — Bootstrap defaults near-black (#212529) which is invisible in dark mode. Inherit the theme text token. */ [data-theme="dark"] .card-body { color: var(--color-text); } /* ───────────────────────────────────────────────────────────── Chat turn backgrounds (used by IdeaDetail + InboxRefine) ───────────────────────────────────────────────────────────── */ .chat-turn { padding: 0.5rem 0.75rem; border-radius: 4px; margin-bottom: 0.5rem; font-size: 0.875rem; color: var(--color-text); } .chat-turn.turn-user, .chat-turn.turn-human { background: var(--color-chat-user); border-left: 3px solid var(--color-chat-user-border); } .chat-turn.turn-assistant, .chat-turn.turn-pm_agent { background: var(--color-chat-assistant); border-left: 3px solid var(--color-chat-assistant-border); } .chat-turn.turn-system { background: var(--color-chat-system); border-left: 3px solid var(--color-chat-system-border); } /* item 1183 -- NavMenu inline badge (awaiting_human count red dot) */ .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; border-radius: 9999px; font-size: 0.68rem; font-weight: 700; line-height: 1; vertical-align: middle; } .nav-badge-red { background-color: #dc3545; color: #fff; } /* Age-tier opacity tokens -- applied to dashboard tiles and item rows to signal how recently a plan/item was approved or completed. The four tiers map to thresholds defined in Tracker.Wasm.Shared.AgeHelper.GetAgeTier(). .age-tier-aging carries a short transition so the fade-in on first render is not jarring; the other tiers are instant because they are either fully opaque (hot/recent) or already well below the fold (archive). */ .age-tier-hot { opacity: 1.0; } .age-tier-recent { opacity: 0.75; } .age-tier-aging { opacity: 0.45; transition: opacity 0.2s; } .age-tier-archive { opacity: 0.2; }