/* 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; } /* V1.23: trim the article's px-4 (Bootstrap = 1.5rem each side) on mobile so cards/lists use more of the viewport. Below the sidebar breakpoint (641px) the page is the only column anyway, so the extra gutter was wasted whitespace. Selector is .content.px-4 with !important because px-4 is a Bootstrap utility carrying its own !important. */ @media (max-width: 640px) { .content.px-4 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } } /* Account pages (admin Accounts / Edit / Register / ChangePassword / ResetPassword / ForgotPassword) live in VSITodo.Server and render SSR — they can't ship per-page .razor.css. Match .todos-page exactly: only padding-bottom, no max-width, no margin-auto. The article wrapper above (
) carries the side gutter, and the page content fills the column the way Todos does. */ .accounts-page, .edit-page, .account-form-page { padding-bottom: 4rem; } /* Accounts list table — fills the page column. */ .accounts-page .table { width: 100%; } /* ===== Usage panel (Phase 19) on /Account/Edit/{id} ===== Four cards on a 2-col grid at desktop width, collapsing to 1 col on mobile. Each card is a dl with the label tone-muted on the left and the figure heavier on the right. Read-only; nothing here is editable, so the muted card chrome differentiates it from the action sections (Roles, Reset password, Delete) below it. */ .usage-panel .usage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.5rem; } .usage-panel .usage-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.875rem 1rem; } .usage-panel .usage-card h3 { margin: 0 0 0.5rem 0; letter-spacing: 0.04em; } .usage-panel .usage-card dl { display: grid; grid-template-columns: minmax(8.5rem, max-content) 1fr; gap: 0.25rem 0.75rem; margin: 0; font-size: 0.9rem; } .usage-panel .usage-card dt { color: #64748b; font-weight: 500; } .usage-panel .usage-card dd { margin: 0; color: #0f172a; word-break: break-word; } @media (max-width: 720px) { .usage-panel .usage-grid { grid-template-columns: 1fr; } .usage-panel .usage-card dl { grid-template-columns: 1fr; gap: 0.1rem 0; } .usage-panel .usage-card dt { margin-top: 0.4rem; } } html[data-theme="dark"] .usage-panel .usage-card { background: #1f2937; border-color: #374151; } html[data-theme="dark"] .usage-panel .usage-card dt { color: #94a3b8; } html[data-theme="dark"] .usage-panel .usage-card dd { color: #e5e7eb; } /* Password input with the eye-toggle button. The button absolute- positions inside the form-floating wrapper at the right edge. Form-floating's label already sits at the right z-index so we only need to make space for the button on the input itself. */ .pw-field-wrap { position: relative; } .pw-field-wrap > .pw-input { padding-right: 2.75rem; /* room for the eye button */ } .pw-eye-btn { position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); width: 2rem; height: 2rem; border: 0; background: transparent; color: #475569; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; z-index: 5; } .pw-eye-btn:hover { background: rgba(15, 23, 42, 0.05); color: #0f172a; } .pw-eye-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } /* Hide the alternate icon depending on visibility state. The script below toggles `data-visible` on the wrapper. */ .pw-eye-btn .pw-eye-on { display: inline; } .pw-eye-btn .pw-eye-off { display: none; } .pw-field-wrap[data-visible="true"] .pw-eye-btn .pw-eye-on { display: none; } .pw-field-wrap[data-visible="true"] .pw-eye-btn .pw-eye-off { display: inline; } 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; }