html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.rz-notification {
left: 16px !important;
right: auto !important;
}
/* ===========================================================================
Brand color themes (military branch palettes).
A theme is selected by adding `theme-` to (see
vaaTheme.applyBrand). All brand colors flow through these CSS variables,
so the nav bar, primary buttons, links, and focus rings recolor together.
Default (no class) = Marine Corps: Scarlet & Gold.
========================================================================= */
:root,
html.theme-marines {
/* USMC — Scarlet & Gold */
--brand-nav-start: #7a1420;
--brand-nav-end: #9d2235;
--brand-primary: #9d2235;
--brand-primary-border: #7a1420;
--brand-primary-hover: #7a1420;
--brand-link: #9d2235;
--brand-accent: #ffcd00;
--brand-accent-hover: #e6b800;
--brand-accent-border: #d9ab00;
--brand-on-accent: #1a1a1a;
--brand-focus: #c8324a;
}
html.theme-army {
/* Army — Black & American Gold */
--brand-nav-start: #1a1a1a;
--brand-nav-end: #4a3f0a;
--brand-primary: #8b6f00;
--brand-primary-border: #6e5800;
--brand-primary-hover: #6e5800;
--brand-link: #8b6f00;
--brand-accent: #ffcc01;
--brand-accent-hover: #e6b800;
--brand-accent-border: #d9ab00;
--brand-on-accent: #1a1a1a;
--brand-focus: #b8960c;
}
html.theme-navy {
/* Navy — Navy Blue & Gold */
--brand-nav-start: #000080;
--brand-nav-end: #002147;
--brand-primary: #002d72;
--brand-primary-border: #001f4e;
--brand-primary-hover: #001f4e;
--brand-link: #002d72;
--brand-accent: #c5b358;
--brand-accent-hover: #b09f46;
--brand-accent-border: #9c8c3c;
--brand-on-accent: #1a1a1a;
--brand-focus: #2a4d8f;
}
html.theme-airforce {
/* Air Force — Ultramarine Blue */
--brand-nav-start: #00308f;
--brand-nav-end: #001f5c;
--brand-primary: #00308f;
--brand-primary-border: #001f5c;
--brand-primary-hover: #001f5c;
--brand-link: #00308f;
--brand-accent: #b9d9eb;
--brand-accent-hover: #9fc6dd;
--brand-accent-border: #88b4ce;
--brand-on-accent: #00214d;
--brand-focus: #2a5bb5;
}
html.theme-coastguard {
/* Coast Guard — Blue, Red & White */
--brand-nav-start: #003366;
--brand-nav-end: #8b1a1a;
--brand-primary: #003366;
--brand-primary-border: #00254d;
--brand-primary-hover: #00254d;
--brand-link: #b31021;
--brand-accent: #e4002b;
--brand-accent-hover: #c20025;
--brand-accent-border: #a8001f;
--brand-on-accent: #ffffff;
--brand-focus: #2a5b94;
}
html.theme-spaceforce {
/* Space Force — Space Black / Dark Navy & Platinum */
--brand-nav-start: #0b0b1a;
--brand-nav-end: #1b1b3a;
--brand-primary: #2a2a55;
--brand-primary-border: #1b1b3a;
--brand-primary-hover: #1b1b3a;
--brand-link: #3a3a6a;
--brand-accent: #e5e4e2;
--brand-accent-hover: #d0cfcc;
--brand-accent-border: #bcbbb8;
--brand-on-accent: #1b1b3a;
--brand-focus: #4a4a85;
}
a, .btn-link {
color: var(--brand-link, #006bb7);
}
/* Service branch emblem shown in the top nav. Each theme points --brand-logo at
its emblem; the element is rendered in NavMenu (.branch-logo) and sized there.
Swapping themes (html.theme-*) swaps the logo with zero JS. Replace the files
in wwwroot/img/branches/ to use official/licensed artwork. */
:root,
html.theme-marines { --brand-logo: url('/img/branches/marines.svg'); }
html.theme-army { --brand-logo: url('/img/branches/army.svg'); }
html.theme-navy { --brand-logo: url('/img/branches/navy.svg'); }
html.theme-airforce { --brand-logo: url('/img/branches/airforce.svg'); }
html.theme-coastguard { --brand-logo: url('/img/branches/coastguard.svg'); }
html.theme-spaceforce { --brand-logo: url('/img/branches/spaceforce.svg'); }
.branch-logo {
background-image: var(--brand-logo, url('/img/branches/marines.svg'));
}
.btn-primary {
color: #fff;
background-color: var(--brand-primary, #1b6ec2);
border-color: var(--brand-primary-border, #1861ac);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
color: #fff;
background-color: var(--brand-primary-hover, #1861ac);
border-color: var(--brand-primary-border, #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 var(--brand-focus, #258cfb);
}
/* ===========================================================================
Brand accent buttons (the branch "gold"/secondary color).
Used for primary call-to-action buttons that should pop against the
themed nav bar — e.g. the Recent Prospects filter buttons (Active,
Converted/Archived, All, status filters) and the intake "Next" button.
`.btn-brand-accent` styles Bootstrap buttons; `.brand-accent-btn` (and the
active state) styles Radzen buttons so both recolor per selected branch.
========================================================================= */
.btn-brand-accent,
.brand-accent-btn.rz-button {
color: var(--brand-on-accent, #1a1a1a);
background-color: var(--brand-accent, #ffcd00);
border: 1px solid var(--brand-accent-border, #d9ab00);
}
/* Radzen applies themed background via .rz-primary with high specificity,
so force the accent color on the branded Radzen buttons. */
.brand-accent-btn.rz-button,
.brand-accent-btn.rz-button.rz-primary {
color: var(--brand-on-accent, #1a1a1a) !important;
background-color: var(--brand-accent, #ffcd00) !important;
border-color: var(--brand-accent-border, #d9ab00) !important;
}
.btn-brand-accent:hover,
.btn-brand-accent:focus,
.btn-brand-accent:active,
.brand-accent-btn.rz-button:hover,
.brand-accent-btn.rz-button:focus,
.brand-accent-btn.rz-button:not(:disabled):not(.rz-state-disabled):hover {
color: var(--brand-on-accent, #1a1a1a);
background-color: var(--brand-accent-hover, #e6b800);
border-color: var(--brand-accent-border, #d9ab00);
}
.brand-accent-btn.rz-button:hover,
.brand-accent-btn.rz-button:not(:disabled):not(.rz-state-disabled):hover {
background-color: var(--brand-accent-hover, #e6b800) !important;
}
.btn-brand-accent:disabled,
.btn-brand-accent.disabled {
color: var(--brand-on-accent, #1a1a1a);
background-color: var(--brand-accent, #ffcd00);
border-color: var(--brand-accent-border, #d9ab00);
opacity: 0.55;
}
.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;
}
.case-detail-shell {
display: block;
}
.case-detail-shell--with-sidebar {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.case-detail-main {
min-width: 0;
flex: 1 1 auto;
width: 100%;
}
.case-detail-checklist-sidebar {
position: sticky;
top: 1rem;
align-self: start;
background: var(--rz-base-background-color, #fff);
border: 1px solid var(--rz-base-300, #d6d9de);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.case-detail-checklist-sidebar.open {
width: clamp(320px, 32vw, 520px);
min-width: 320px;
max-width: min(48vw, 640px);
resize: horizontal;
}
.case-detail-checklist-sidebar.collapsed {
width: 72px;
min-width: 72px;
}
.case-detail-checklist-sidebar__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: .85rem 1rem;
border-bottom: 1px solid var(--rz-base-200, #e7e9ee);
background: var(--rz-base-50, #f8f9fb);
}
.case-detail-checklist-sidebar__eyebrow {
font-size: .75rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--rz-text-secondary-color, #6b7280);
}
.case-detail-checklist-sidebar__body {
max-height: calc(100vh - 11rem);
overflow: auto;
padding: 1rem;
}
.case-detail-checklist-sidebar__resize-hint {
margin-bottom: .75rem;
font-size: .8rem;
color: var(--rz-text-secondary-color, #6b7280);
}
.prospect-kv-row {
display: flex;
align-items: baseline;
gap: .75rem;
}
.prospect-kv-label {
flex: 0 0 136px;
min-width: 136px;
color: var(--bs-secondary-color, #6c757d);
font-size: .82rem;
line-height: 1.25;
}
.prospect-kv-value {
flex: 1 1 auto;
min-width: 0;
line-height: 1.35;
}
@media (max-width: 767px) {
.prospect-kv-row {
flex-direction: column;
gap: .2rem;
}
.prospect-kv-label {
min-width: 0;
flex-basis: auto;
}
}
.case-detail-checklist-sidebar.collapsed .case-detail-checklist-sidebar__header {
flex-direction: column;
justify-content: center;
padding: .75rem .35rem;
}
.case-detail-checklist-sidebar.collapsed .case-detail-checklist-sidebar__header > div {
writing-mode: vertical-rl;
transform: rotate(180deg);
display: flex;
align-items: center;
gap: .35rem;
}
.case-detail-checklist-sidebar.collapsed .case-detail-checklist-sidebar__eyebrow {
font-size: .65rem;
}
.case-detail-checklist-sidebar.collapsed h5 {
font-size: .95rem;
}
.progress-rail-collapsed {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 0.25rem;
height: 100%;
cursor: pointer;
}
.progress-rail-collapsed__count {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.01em;
writing-mode: horizontal-tb;
text-align: center;
}
.progress-rail-collapsed__bar {
width: 8px;
flex: 0 0 120px;
height: 120px;
border-radius: 999px;
background: var(--bs-border-color, #d9d9d9);
overflow: hidden;
display: flex;
align-items: flex-end;
}
.progress-rail-collapsed__bar span {
display: block;
width: 100%;
background: var(--brand-primary, #9d2235);
min-height: 0;
}
@media (max-width: 1199px) {
.case-detail-shell--with-sidebar {
flex-direction: column;
}
.case-detail-checklist-sidebar {
position: static;
width: 100% !important;
min-width: 0;
max-width: none;
resize: none;
}
.case-detail-checklist-sidebar.collapsed {
width: 100% !important;
}
.case-detail-checklist-sidebar.collapsed .case-detail-checklist-sidebar__header {
flex-direction: row;
justify-content: space-between;
padding: .85rem 1rem;
}
.case-detail-checklist-sidebar.collapsed .case-detail-checklist-sidebar__header > div {
writing-mode: initial;
transform: none;
display: block;
}
}
/* ===========================================================================
Compact (dense) display mode.
Toggled by adding `density-compact` to (see vaaTheme.applyDensity).
Goal: reclaim vertical/horizontal space by tightening control padding,
row heights, and spacing — WITHOUT shrinking label/body text so much that
it becomes hard to read (the downside of browser zoom). Text is only
nudged down slightly; the space savings come mostly from padding.
========================================================================= */
html.density-compact {
/* Modest base reduction — keeps text legible while tightening rem-based
paddings throughout Bootstrap and Radzen. */
font-size: 15px;
}
/* --- Bootstrap form controls & buttons --- */
html.density-compact .form-control,
html.density-compact .form-select {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
min-height: calc(1.5em + 0.5rem + 2px);
}
html.density-compact .btn {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.6rem;
padding-right: 0.6rem;
}
html.density-compact .form-label {
margin-bottom: 0.2rem;
}
html.density-compact .mb-2 {
margin-bottom: 0.35rem !important;
}
html.density-compact .mb-3 {
margin-bottom: 0.6rem !important;
}
html.density-compact .card-body {
padding: 0.75rem;
}
html.density-compact .card-header {
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
.vaa-key-section .rz-accordion-header,
.vaa-key-section > .rz-accordion-header {
font-weight: 700;
font-size: 1.05rem;
background: #e7f1ff;
border-left: 4px solid #0d6efd;
}
/* --- Radzen buttons --- */
html.density-compact .rz-button {
padding-top: 0.3rem;
padding-bottom: 0.3rem;
}
/* --- Radzen inputs / dropdowns --- */
html.density-compact .rz-textbox,
html.density-compact .rz-dropdown,
html.density-compact .rz-spinner-input,
html.density-compact .rz-inputtext {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
/* --- Radzen DataGrid: the biggest space win for the work pages --- */
html.density-compact .rz-grid-table td,
html.density-compact .rz-grid-table th {
padding-top: 0.3rem;
padding-bottom: 0.3rem;
}
html.density-compact .rz-cell-data {
padding-top: 0.15rem;
padding-bottom: 0.15rem;
}
/* --- Radzen tabs --- */
html.density-compact .rz-tabview-nav li .rz-tabview-title,
html.density-compact .rz-tabview-nav li a {
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
/* ===========================================================================
Dark mode — Radzen DataGrid harmonization.
Dark mode sets data-bs-theme="dark" (which reliably themes the --bs-* surface
variables used by the cards/body) and swaps the Radzen theme to material-dark.
Some RadzenDataGrid surfaces (header, cells, rows, pager) don't pick up dark
backgrounds on their own and stay white against the dark cards. We explicitly
align the grid with the SAME Bootstrap dark surface variables the cards use,
so grids blend in and stay readable. Fallbacks match Bootstrap 5.3 dark.
=========================================================================== */
/* Grid container + table surface */
html[data-bs-theme="dark"] .rz-datatable,
html[data-bs-theme="dark"] .rz-datatable .rz-grid-table,
html[data-bs-theme="dark"] .rz-datatable-data {
background-color: var(--bs-body-bg, #212529) !important;
color: var(--bs-body-color, #dee2e6);
border-color: var(--bs-border-color, #495057);
}
/* Header cells (including scrollable header wrapper) */
html[data-bs-theme="dark"] .rz-datatable .rz-grid-table thead th,
html[data-bs-theme="dark"] .rz-datatable thead.rz-datatable-thead th,
html[data-bs-theme="dark"] .rz-datatable .rz-datatable-scrollable-header,
html[data-bs-theme="dark"] .rz-datatable .rz-datatable-scrollable-header-box,
html[data-bs-theme="dark"] .rz-datatable .rz-column-title {
background-color: var(--bs-tertiary-bg, #2b3035) !important;
color: var(--bs-emphasis-color, #fff) !important;
border-color: var(--bs-border-color, #495057) !important;
}
/* Body cells */
html[data-bs-theme="dark"] .rz-datatable .rz-grid-table td,
html[data-bs-theme="dark"] .rz-datatable .rz-cell-data {
background-color: transparent !important;
color: var(--bs-body-color, #dee2e6);
border-color: var(--bs-border-color, #495057) !important;
}
/* Body rows + zebra striping */
html[data-bs-theme="dark"] .rz-datatable .rz-data-row,
html[data-bs-theme="dark"] .rz-datatable tbody tr {
background-color: var(--bs-body-bg, #212529);
}
html[data-bs-theme="dark"] .rz-datatable .rz-datatable-odd {
background-color: rgba(255, 255, 255, 0.035) !important;
}
/* Hover + selection */
html[data-bs-theme="dark"] .rz-datatable .rz-data-row:hover,
html[data-bs-theme="dark"] .rz-datatable tbody tr:hover {
background-color: var(--bs-secondary-bg, #343a40) !important;
}
html[data-bs-theme="dark"] .rz-datatable .rz-state-highlight,
html[data-bs-theme="dark"] .rz-datatable .rz-selected {
background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25) !important;
}
/* Pager */
html[data-bs-theme="dark"] .rz-paginator {
background-color: var(--bs-tertiary-bg, #2b3035) !important;
color: var(--bs-body-color, #dee2e6);
border-color: var(--bs-border-color, #495057) !important;
}
html[data-bs-theme="dark"] .rz-paginator .rz-paginator-element {
color: var(--bs-body-color, #dee2e6);
}
/* Filter row + empty message */
html[data-bs-theme="dark"] .rz-datatable .rz-cell-filter,
html[data-bs-theme="dark"] .rz-datatable .rz-grid-filter {
background-color: var(--bs-tertiary-bg, #2b3035) !important;
}
html[data-bs-theme="dark"] .rz-datatable .rz-datatable-emptymessage,
html[data-bs-theme="dark"] .rz-datatable .rz-emptymessage {
background-color: var(--bs-body-bg, #212529) !important;
color: var(--bs-secondary-color, #adb5bd);
}
/* ===========================================================================
Avatar / photo placeholder (the "no photo" circle shown in grids & profiles).
Theme-aware so it doesn't glow light-gray against dark surfaces.
=========================================================================== */
.avatar-placeholder {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--bs-border-color, #dee2e6);
background: var(--bs-tertiary-bg, #f8f9fa);
color: var(--bs-secondary-color, #6c757d);
overflow: hidden;
}
.avatar-placeholder--sm {
width: 40px;
height: 40px;
font-size: 0.75rem;
}
.avatar-placeholder--lg {
width: 96px;
height: 96px;
}
/* Photo thumbnails: theme-aware border so it doesn't show a light ring in dark mode. */
.avatar-thumb {
object-fit: cover;
border-radius: 50%;
border: 1px solid var(--bs-border-color, #dee2e6);
}
.avatar-thumb--sm {
width: 40px;
height: 40px;
}