/* Design tokens — locked in by /plan-design-review (plan §13). Every new component MUST reference these; no hardcoded hex values outside this block. If you find yourself picking a new color, add it here first. */ :root { --bg: #f3f4f6; --surface: #ffffff; --border: #e5e7eb; --border-soft: #f3f4f6; --border-hover: #d1d5db; --ink: #1f2937; --ink-strong: #111827; --ink-muted: #6b7280; --ink-faint: #9ca3af; --ink-subtle: #4b5563; --ink-dim: #374151; --accent: #2563eb; --accent-dark: #1d4ed8; --accent-soft: #eff6ff; --work-bg: #dbeafe; --work-ink: #1e40af; --private-bg: #dcfce7; --private-ink: #166534; --pri-now-bg: #fee2e2; --pri-now-ink: #991b1b; --pri-high-bg: #ffedd5; --pri-high-ink: #9a3412; --pri-med-bg: #e5e7eb; --pri-med-ink: #374151; --pri-low-bg: #f3f4f6; --pri-low-ink: #6b7280; /* Waiting-on badge escalation. fresh <3d, warn 3-7d, stale >7d. */ --wait-fresh-bg: #dcfce7; --wait-fresh-ink: #166534; --wait-warn-bg: #fef3c7; --wait-warn-ink: #92400e; --wait-stale-bg: #fee2e2; --wait-stale-ink: #b91c1c; --wait-gray: #6b7280; /* Billable-hours accent (Phase 5.8). Same amber family as the wait-warn because both communicate "attention". */ --billable-bg: #fef3c7; --billable-border: #fde68a; --billable-ink: #92400e; --billable-ink-strong: #78350f; /* Overdue/urgent chip — reuses the danger family. */ --overdue-bg: #fee2e2; --overdue-ink: #b91c1c; /* Today chip — same as wait-warn, softer "upcoming" signal. */ --today-bg: #fef3c7; --today-ink: #92400e; /* State dots on todo groups. */ --state-open: #3b82f6; --state-progress: #8b5cf6; --state-waiting: #f59e0b; --state-done: #10b981; --state-cancel: #9ca3af; --radius: 0.75rem; --radius-sm: 0.5rem; --radius-pill: 999px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.2); --shadow-fab: 0 4px 12px rgba(37,99,235,0.4); --focus-ring: 0 0 0 3px rgba(37,99,235,0.35); --font-head: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* ─────────────────────────────────────────────────────────────────────── Dark mode tokens (Phase 8). Applied when the element has data-theme="dark" set. Theme bootstrap script in picks the value from localStorage so the first paint is correct — no flash of wrong theme on load. Every component MUST use the var(--*) names above and skip hardcoded hex. ───────────────────────────────────────────────────────────────────────*/ [data-theme="dark"] { --bg: #0f172a; --surface: #1f2937; --border: #374151; --border-soft: #1e293b; --border-hover: #4b5563; --ink: #e5e7eb; --ink-strong: #f9fafb; --ink-muted: #9ca3af; --ink-faint: #6b7280; --ink-subtle: #d1d5db; --ink-dim: #9ca3af; --accent: #60a5fa; --accent-dark: #3b82f6; --accent-soft: #1e3a8a; --work-bg: #1e3a8a; --work-ink: #bfdbfe; --private-bg: #14532d; --private-ink: #bbf7d0; --pri-now-bg: #7f1d1d; --pri-now-ink: #fecaca; --pri-high-bg: #7c2d12; --pri-high-ink: #fed7aa; --pri-med-bg: #374151; --pri-med-ink: #e5e7eb; --pri-low-bg: #1f2937; --pri-low-ink: #9ca3af; --wait-fresh-bg: #14532d; --wait-fresh-ink: #86efac; --wait-warn-bg: #78350f; --wait-warn-ink: #fde68a; --wait-stale-bg: #7f1d1d; --wait-stale-ink: #fecaca; --billable-bg: #78350f; --billable-border: #b45309; --billable-ink: #fde68a; --billable-ink-strong: #fef3c7; --overdue-bg: #7f1d1d; --overdue-ink: #fecaca; --today-bg: #78350f; --today-ink: #fde68a; --state-open: #60a5fa; --state-progress: #a78bfa; --state-waiting: #fbbf24; --state-done: #34d399; --state-cancel: #9ca3af; --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.5); --shadow-fab: 0 4px 12px rgba(96,165,250,0.4); --focus-ring: 0 0 0 3px rgba(96,165,250,0.45); } /* Body-level theme coupling. Keeps body bg + text in sync with tokens so the page doesn't have a bright-white border when the rest is dark. */ html { background: var(--bg); color-scheme: light dark; } [data-theme="dark"] { color-scheme: dark; } body { background: var(--bg); color: var(--ink); } /* Phase 8 a11y: make keyboard focus universally visible. :focus-visible only lights up on keyboard navigation, so pointer users don't see halos everywhere. Overrides Bootstrap's default outlines with our token-driven ring. */ :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: inherit; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible { outline: none; box-shadow: var(--focus-ring); } html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } a, .btn-link { color: #006bb7; } .btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } .content { padding-top: 1.1rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* WebAssembly boot indicator. Shown on every fresh HTML response until a WASM-rendered component signals ready via window.vsiTodo.markWasmReady(). The 400ms fade-in delay means users with warm caches never see it. */ .app-boot-pill { position: fixed; right: 1rem; bottom: 1rem; z-index: 2000; background: var(--ink-strong, #111827); color: #fff; padding: 0.5rem 0.875rem; border-radius: 999px; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; opacity: 0; pointer-events: none; animation: app-boot-fade-in 220ms ease-out 400ms forwards; transition: opacity 220ms ease-out; box-shadow: 0 6px 20px rgba(0,0,0,0.18); } html.wasm-ready .app-boot-pill { opacity: 0 !important; animation: none; visibility: hidden; } .app-boot-pill-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.25); border-top-color: #fff; border-radius: 50%; animation: app-boot-spin 800ms linear infinite; } @keyframes app-boot-fade-in { to { opacity: 0.95; } } @keyframes app-boot-spin { to { transform: rotate(360deg); } } /* Inline per-row action buttons (Done / Tomorrow / Next week). Shared by /todos cards, /clients/{id} todo rows, and /week rows. Lives outside scoped CSS so the same look applies everywhere. */ .todo-actions-inline { display: flex; gap: 0.35rem; padding-top: 0.5rem; border-top: 1px dashed #e5e7eb; flex-wrap: nowrap; } .action-inline { flex: 1 1 auto; min-height: 34px; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid #d1d5db; background: #fff; color: #374151; font-weight: 600; font-size: 0.8125rem; cursor: pointer; transition: background-color 120ms, border-color 120ms, color 120ms; } .action-inline:hover { border-color: #9ca3af; background: #f9fafb; } .action-inline.action-done { background: #2563eb; color: #fff; border-color: #2563eb; } .action-inline.action-done:hover { background: #1d4ed8; border-color: #1d4ed8; } .action-inline.action-restore { background: #eff6ff; color: #2563eb; border-color: #2563eb; } .action-inline.action-restore:hover { background: #dbeafe; } /* /week's row-item is a CSS grid; the action row needs to span the full row instead of squeezing into the last column. */ .row-item .todo-actions-inline.row-actions { grid-column: 1 / -1; margin-top: 0.35rem; }