/* ============================================================ VA Claims Tracker – Stylesheet ============================================================ */ :root { /* -------- VA brand palette (unchanged, same in both themes) -------- */ --va-blue: #112e51; --va-blue-light: #205493; --va-blue-lighter: #4a90d9; /* 2026-04-30: per VA.gov 2026 design principles — reserve crisis-red (#e31c3d) for true crisis CTAs (Veterans Crisis Line) and use a warm warning-amber for everyday warning/error states. The brand --va-red token now points at the warning amber so existing uses (alerts header, HLR badge, overdue rails, needs-attention) soften application-wide without touching every rule. The --va-crisis-red token is reserved for any future Crisis Line CTA. */ --va-red: #cf5500; --va-crisis-red: #e31c3d; --va-gold: #fdb81e; --va-green: #2e8540; --va-gray-dark: #323a45; --va-gray: #5b616b; --va-gray-light: #aeb0b5; --va-gray-lighter: #d6d7d9; --va-gray-lightest: #f1f1f1; --va-white: #ffffff; --shadow: 0 2px 8px rgba(0,0,0,0.1); --shadow-lg: 0 4px 16px rgba(0,0,0,0.12); --radius: 8px; --radius-sm: 4px; /* -------- Semantic theme tokens (FLIP between light/dark) -------- Everything added in Phase 4d onwards (sync widget, claim health banner, per-item timeline, preview banner, markdown rendering) should use these rather than hardcoded hex so the dark-mode toggle works without per-rule overrides. */ /* 2026-04-30: lifted light-mode page bg from #f1f1f1 → #f8f9fa per VA.gov 2026 design principles (reduced contrast / eye strain for long sessions and TBI-affected users). Cards stay #ffffff so the elevation read still pops, but the chrome is gentler. */ --bg: #f8f9fa; /* page background */ --surface: #ffffff; /* cards, panels */ --surface-2: #f1f3f5; /* nested surfaces, code inline bg */ --surface-3: #eef2f7; /* chips, tag rows, timeline pills */ --text: #323a45; /* primary body text */ --text-strong: #112e51; /* headings — striking VA blue on light */ --text-dim: #5b616b; /* secondary text */ --text-muted: #8a8f97; /* captions, timestamps */ --border: #d6d7d9; /* standard borders */ --border-strong: #aeb0b5; /* emphasized borders */ --accent: #205493; /* link / primary accent */ --accent-bg: #e8f0fa; /* accent tint for active states */ --code-bg: #f6f8fa; /* inline code background */ --shadow-theme: 0 2px 8px rgba(0,0,0,0.08); /* Semantic status colors for health badges. Backgrounds are light tints, text is the saturated version — works on both themes. */ --ok-bg: #e3f3e6; --ok-text: #1f5a2c; --info-bg: #e1ecfa; --info-text: #0e3d7a; --warn-bg: #fff4d6; --warn-text: #6b4e00; --danger-bg: #fde3e3; --danger-text: #8a1616; --stuck-bg: #efe4fb; --stuck-text: #4a1d7a; --stale-bg: #f3efd1; --stale-text: #5a4a0f; --closed-bg: #ededed; --closed-text: #4a4a4a; } /* -------- Dark theme override -------- Applied when . Only overrides the semantic tokens — the VA brand palette stays the same so the navbar still looks like VA blue. */ [data-theme="dark"] { --bg: #0d1117; --surface: #161b22; --surface-2: #1a2332; --surface-3: #22303c; --text: #c9d1d9; --text-strong: #e6edf3; --text-dim: #8b949e; --text-muted: #6e7681; --border: #30363d; --border-strong: #484f58; --accent: #4a90d9; --accent-bg: #1a2a4a; --code-bg: #0e1620; --shadow-theme: 0 2px 12px rgba(0,0,0,0.6); /* Status badges: darker tinted backgrounds with lighter text */ --ok-bg: #1e4d2b; --ok-text: #afe9ba; --info-bg: #1b3a5a; --info-text: #bad9ff; --warn-bg: #5a3b14; --warn-text: #ffd9a3; --danger-bg: #5a1f1f; --danger-text: #ffcfcf; --stuck-bg: #3a1a4a; --stuck-text: #dfc0ff; --stale-bg: #3b3b1e; --stale-text: #e9e4a6; --closed-bg: #2a2a2a; --closed-text: #9aa0a6; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; transition: background 0.15s ease, color 0.15s ease; } a { color: var(--va-blue-light); text-decoration: none; } a:hover { text-decoration: underline; } /* ---- Navbar ---- */ .navbar { background: var(--va-blue); color: var(--va-white); padding: 0 1.5rem; box-shadow: var(--shadow); position: sticky; top: 0; z-index: 100; } .nav-content { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; height: 60px; } .nav-brand { color: var(--va-white); font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; } .nav-brand:hover { text-decoration: none; opacity: 0.9; } .nav-icon { font-size: 1.5rem; color: var(--va-gold); } .nav-links { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .nav-links > a { color: var(--va-gray-lighter); font-size: 0.95rem; } .nav-links > a:hover { color: var(--va-white); text-decoration: none; } /* Thin vertical divider between logical link groups in the top nav. Visual-only — aria-hidden in markup so screen readers don't read pipes. Uses a faint white tint so the dividers fade against the VA-blue navbar but still group the eye. */ .nav-sep { display: inline-block; width: 1px; height: 18px; background: rgba(255, 255, 255, 0.18); margin: 0 0.25rem; } /* Flex spacer that pushes everything after it to the right edge of the navbar — used to separate "navigation" links on the left from "action" buttons + user controls on the right. */ .nav-spacer { flex: 1 1 0; min-width: 0; } /* 2026-05-01: stand-alone toolbar action buttons (➕ New Claim and 🔄 Refresh from VA.gov). Visually distinct from the text links so they read as "do something" rather than "navigate somewhere". #} The .nav-btn-label span is hidden on narrow viewports — only the emoji icon remains so the buttons stay reachable on mobile without wrapping the toolbar. */ .nav-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border-radius: var(--radius-sm); font-size: 0.92rem; font-weight: 600; border: 1px solid transparent; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .nav-btn:hover { text-decoration: none; } .nav-btn-primary { background: var(--va-gold); color: #1a1a1a !important; border-color: var(--va-gold); } .nav-btn-primary:hover { background: #ffcb47; border-color: #ffcb47; } .nav-btn-secondary { background: transparent; color: var(--va-white) !important; border-color: rgba(255, 255, 255, 0.4); } .nav-btn-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.7); } @media (max-width: 900px) { .nav-btn-label { display: none; } .nav-btn { padding: 0.4rem 0.6rem; } } /* ---- Container ---- */ .container { max-width: 1400px; margin: 0 auto; padding: 2rem 1.5rem; flex: 1; } /* ---- Buttons ---- */ .btn { display: inline-block; padding: 0.5rem 1.25rem; border: 2px solid transparent; border-radius: var(--radius-sm); font-size: 0.95rem; font-weight: 600; cursor: pointer; text-align: center; transition: all 0.2s ease; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--va-blue-light); color: var(--va-white); } .btn-primary:hover { background: var(--va-blue); } .btn-secondary { background: var(--va-gray-lightest); color: var(--va-blue-light); border-color: var(--va-blue-light); } .btn-secondary:hover { background: var(--va-blue-light); color: var(--va-white); } .btn-outline { background: transparent; color: var(--va-white); border-color: var(--va-gray-light); } .btn-outline:hover { background: rgba(255,255,255,0.1); } .btn-sm { padding: 0.3rem 0.75rem; font-size: 0.85rem; } .btn-lg { padding: 0.75rem 2rem; font-size: 1.1rem; } .btn-block { display: block; width: 100%; } /* ---- Badges ---- */ .badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .badge-lg { font-size: 0.85rem; padding: 0.3rem 0.9rem; } .badge-original { background: var(--va-blue-light); color: var(--va-white); } .badge-secondary { background: #8e44ad; color: var(--va-white); } .badge-increase { background: #e67e22; color: var(--va-white); } .badge-hlr { background: var(--va-red); color: var(--va-white); } .badge-supplemental { background: var(--va-green); color: var(--va-white); } .badge-appeal { background: #2c3e50; color: var(--va-white); } .badge-demo { background: var(--va-gold); color: var(--va-blue); } .badge-needed { background: #e74c3c; color: white; } .badge-scheduled { background: #3498db; color: white; } .badge-submitted { background: #f39c12; color: white; } .badge-completed { background: var(--va-green); color: white; } .badge-attention { background: #e74c3c; color: white; } .badge-dependency { background: #7f8c8d; color: white; } .badge-foia\/pa, .badge-foia-pa { background: #95a5a6; color: white; } /* ---- Alerts ---- */ .alert { padding: 0.75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; border-left: 4px solid; } .alert-info { background: #e8f4fd; border-color: var(--va-blue-lighter); color: var(--va-blue); } .alert-warning { background: #fef3cd; border-color: var(--va-gold); color: #856404; } .alert-danger { background: #f8d7da; border-color: var(--va-red); color: #721c24; } /* ---- Login Page ---- */ .login-container { display: flex; justify-content: center; align-items: center; min-height: 60vh; } .login-card { background: var(--va-white); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-width: 480px; width: 100%; overflow: hidden; } .login-header { background: var(--va-blue); color: var(--va-white); padding: 2rem; text-align: center; } .login-icon { font-size: 3rem; color: var(--va-gold); display: block; margin-bottom: 0.5rem; } .login-header h1 { font-size: 1.5rem; margin-bottom: 0.5rem; } .login-header p { opacity: 0.85; font-size: 0.95rem; } .login-body { padding: 2rem; } .login-body h2 { font-size: 1.2rem; margin-bottom: 0.75rem; } .login-body > p { color: var(--va-gray); margin-bottom: 1.5rem; font-size: 0.95rem; } .login-divider { text-align: center; margin: 1.5rem 0; position: relative; } .login-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid var(--va-gray-lighter); } .login-divider span { background: var(--va-white); padding: 0 1rem; color: var(--va-gray-light); position: relative; } /* Login form elements */ .login-form { margin-bottom: 1rem; } .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.95rem; } .form-group .optional { font-weight: 400; color: var(--va-gray-light); font-size: 0.85rem; } .form-input { width: 100%; padding: 0.6rem 0.75rem; border: 2px solid var(--va-gray-lighter); border-radius: var(--radius-sm); font-size: 1rem; transition: border-color 0.2s; } .form-input:focus { outline: none; border-color: var(--va-blue-lighter); box-shadow: 0 0 0 3px rgba(74,144,217,0.15); } .form-help { display: block; font-size: 0.8rem; color: var(--va-gray); margin-top: 0.25rem; } /* Phase 7ap — client-side password strength meter. Purely a UX aid; server-side enforcement lives in _validate_new_password. The fill color is set inline from JS so we don't have to keep a color-per-tier class list in sync. */ .pw-meter { margin-top: 0.55rem; } .pw-meter-bar { width: 100%; height: 6px; background: var(--surface-2, #1a2332); border: 1px solid var(--border, #30363d); border-radius: 3px; overflow: hidden; } .pw-meter-fill { height: 100%; width: 0%; background: var(--text-dim, #8b949e); transition: width 0.2s ease, background 0.2s ease; } .pw-meter-label { display: block; font-size: 0.78rem; margin-top: 0.3rem; color: var(--text-dim, #8b949e); } /* Provider badges */ .login-providers { text-align: center; margin-top: 1.25rem; } .providers-label { font-size: 0.85rem; color: var(--va-gray); margin-bottom: 0.5rem; } .provider-badges { display: flex; justify-content: center; gap: 0.75rem; } .provider-badge { padding: 0.35rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: 700; } .provider-idme { background: #2a7a3b; color: white; } .provider-logingov { background: #1a4480; color: white; } /* Nav user name */ .nav-user { color: var(--va-gold); font-weight: 600; font-size: 0.9rem; } .login-footer { padding: 1rem 2rem; background: var(--va-gray-lightest); font-size: 0.8rem; color: var(--va-gray); } /* ---- Connect Page ---- */ .connect-page { max-width: 800px; margin: 0 auto; } .connect-page > h1 { font-size: 1.75rem; color: var(--va-blue); } .connect-page .subtitle { color: var(--va-gray); margin-bottom: 2rem; } .step-card { background: var(--va-white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; margin-bottom: 1.5rem; display: flex; gap: 1.5rem; align-items: flex-start; } .step-alt { background: #f0f5fa; border: 1px dashed var(--va-blue-lighter); } .step-number { flex-shrink: 0; width: 48px; height: 48px; background: var(--va-blue); color: var(--va-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; } .step-content { flex: 1; } .step-content h2 { font-size: 1.15rem; color: var(--va-blue); margin-bottom: 0.5rem; } .step-content p { margin-bottom: 0.75rem; } .step-tip { font-size: 0.85rem; color: var(--va-gray); } .step-tip code { background: var(--va-gray-lightest); padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.8rem; } .bookmarklet-area { padding: 1.25rem; background: var(--va-gray-lightest); border: 2px dashed var(--va-gray-lighter); border-radius: var(--radius); text-align: center; margin: 1rem 0; } .bookmarklet-link { display: inline-block; padding: 0.75rem 2rem; background: var(--va-blue-light); color: var(--va-white) !important; font-weight: 700; font-size: 1.1rem; border-radius: var(--radius); text-decoration: none !important; cursor: grab; box-shadow: var(--shadow); transition: transform 0.2s; } .bookmarklet-link:hover { transform: scale(1.03); } .bookmarklet-link:active { cursor: grabbing; } .import-result { margin-top: 1.5rem; } .header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } /* ---- Ratings Section ---- */ .ratings-section { background: var(--va-white); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 1.5rem; border-top: 4px solid var(--va-blue); } .ratings-section h2 { font-size: 1.2rem; color: var(--va-blue); margin-bottom: 1rem; } .combined-rating { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: 0.75rem 1rem; background: var(--va-blue); border-radius: var(--radius); display: inline-flex; } .combined-pct { font-size: 2rem; font-weight: 700; color: var(--va-gold); } .combined-label { color: var(--va-gray-lighter); font-size: 0.95rem; } /* Rating changed flash */ .rating-flash { animation: ratingPulse 1.5s ease-in-out infinite; text-shadow: 0 0 20px rgba(253,184,30,0.8); } @keyframes ratingPulse { 0%, 100% { color: var(--va-gold); transform: scale(1); } 50% { color: #fff; transform: scale(1.15); text-shadow: 0 0 30px rgba(253,184,30,1), 0 0 60px rgba(253,184,30,0.5); } } .rating-change-tag { background: var(--va-gold); color: var(--va-blue); font-size: 0.85rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 12px; margin-top: 0.5rem; display: inline-block; animation: fadeSlideIn 0.5s ease-out; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .ratings-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .benefit-summary { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--va-gray-lighter); font-size: 0.9rem; color: var(--va-gray); } /* Ratings Overview */ .ratings-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .overview-card { background: var(--va-white); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); text-align: center; } .overview-combined { border-top: 4px solid var(--va-gold); } .overview-big { font-size: 2rem; font-weight: 700; color: var(--va-blue); } .overview-label { font-size: 0.85rem; color: var(--va-gray); margin-top: 0.25rem; } .overview-sub { font-size: 0.75rem; color: var(--va-gray-light); margin-top: 0.25rem; } /* Rating percentage badge in table */ .rating-pct-badge { display: inline-block; background: var(--va-blue); color: var(--va-white); padding: 0.3rem 0.6rem; border-radius: var(--radius-sm); font-weight: 700; font-size: 1rem; min-width: 50px; text-align: center; } /* NSC Advisor */ .ai-advisor-section { border-top: 4px solid var(--va-red); } .nsc-list { display: flex; flex-direction: column; gap: 0.75rem; } .nsc-item-wrapper { border-radius: var(--radius); overflow: hidden; } .nsc-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; background: #fef5f5; border-left: 4px solid var(--va-red); flex-wrap: wrap; } .nsc-info { flex: 1; } .nsc-info strong { font-size: 0.95rem; display: block; } /* Letter upload */ .nsc-letter-upload { padding: 1rem; background: #fffbea; border: 1px solid #fdb81e; border-radius: var(--radius-sm); margin-bottom: 1rem; } .letter-prompt { margin-bottom: 0.75rem; font-size: 0.95rem; } .letter-upload-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; } .nsc-letter-file { font-size: 0.9rem; } .letter-upload-status { font-style: italic; } .letter-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } .nsc-advice-inline { padding: 1.25rem; background: #f8f9fa; border-left: 4px solid var(--va-blue-lighter); border-top: 1px solid var(--va-gray-lighter); } /* Calculator */ .calculator-section { border-top: 4px solid var(--va-gold); } .calc-table { width: 100%; border-collapse: collapse; margin: 1rem 0; } .calc-table th { background: var(--va-gray-lightest); padding: 0.5rem 0.75rem; text-align: left; font-size: 0.8rem; text-transform: uppercase; color: var(--va-gray); } .calc-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--va-gray-lightest); font-size: 0.9rem; } .calc-result-row { display: flex; gap: 2rem; padding: 1rem; background: #f0f5fa; border-radius: var(--radius); margin-top: 0.5rem; } .calc-exact { font-size: 1rem; color: var(--va-gray); } .calc-rounded { font-size: 1rem; } .calc-final { font-size: 1.5rem; color: var(--va-blue); } /* What-if */ .calc-whatif { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--va-gray-lighter); } .calc-whatif h3 { font-size: 1.1rem; color: var(--va-blue); margin-bottom: 0.5rem; } .whatif-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; flex-wrap: wrap; } .whatif-row select { padding: 0.4rem 0.75rem; border: 2px solid var(--va-gray-lighter); border-radius: var(--radius-sm); font-size: 1rem; } .whatif-result { margin-top: 1rem; } .whatif-compare { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .whatif-box { padding: 1rem 1.5rem; border-radius: var(--radius); background: var(--va-gray-lightest); text-align: center; } .whatif-new { background: #e8f5e9; border: 2px solid var(--va-green); } .whatif-label { font-size: 0.8rem; color: var(--va-gray); margin-bottom: 0.25rem; } .whatif-pct { font-size: 2rem; font-weight: 700; color: var(--va-blue); } .whatif-exact { font-size: 0.8rem; color: var(--va-gray); } .whatif-arrow { font-size: 2rem; color: var(--va-gray-light); } /* Bilateral badge */ .badge-bilateral { background: #2980b9; color: white; } /* NSC row muted */ .rating-nsc-row { opacity: 0.6; } .rating-pct-zero { background: var(--va-gray-light); } /* Pending claims what-if */ .pending-claims-whatif { margin-bottom: 1.5rem; } .pending-claims-whatif h4 { font-size: 1rem; color: var(--va-blue); margin-bottom: 0.5rem; } .whatif-pending-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--va-gray-lightest); flex-wrap: wrap; } .whatif-claim-label { flex: 1; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; } .whatif-claim-select { padding: 0.35rem 0.5rem; border: 2px solid var(--va-gray-lighter); border-radius: var(--radius-sm); font-size: 0.9rem; min-width: 140px; } /* Claim groups in what-if */ .whatif-claim-group { background: var(--va-gray-lightest); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; } .whatif-claim-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--va-gray-lighter); } .whatif-issue-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; flex-wrap: wrap; } .whatif-issue-label { flex: 1; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .issue-desc { font-size: 0.9rem; } .whatif-issue-select { padding: 0.35rem 0.5rem; border: 2px solid var(--va-gray-lighter); border-radius: var(--radius-sm); font-size: 0.9rem; min-width: 140px; } .whatif-manual { margin-top: 1.5rem; } .whatif-manual h4 { font-size: 1rem; color: var(--va-blue); margin-bottom: 0.5rem; } /* Extra rating tags */ .whatif-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; } .whatif-tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.6rem; background: var(--va-blue-lighter); color: white; border-radius: 12px; font-size: 0.85rem; font-weight: 600; } .whatif-tag-remove { color: white; text-decoration: none; font-size: 1.1rem; } .whatif-tag-remove:hover { opacity: 0.7; } .ratings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; } .rating-card { padding: 0.75rem 1rem; border-radius: var(--radius-sm); border-left: 4px solid var(--va-green); background: #f0f9f2; display: flex; align-items: center; gap: 0.75rem; } .rating-nsc { border-left-color: var(--va-gray-light); background: var(--va-gray-lightest); } .rating-pct { font-size: 1.5rem; font-weight: 700; color: var(--va-blue); min-width: 50px; } .rating-name { font-size: 0.85rem; font-weight: 600; color: var(--va-gray-dark); flex: 1; } .rating-meta { font-size: 0.75rem; color: var(--va-gray); display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-end; } /* Decision Details */ .decision-list { display: flex; flex-direction: column; gap: 0.75rem; } .decision-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; border-radius: var(--radius-sm); background: var(--va-gray-lightest); border-left: 4px solid var(--va-gray-light); } .decision-item.decision-granted, .decision-item.decision-allowed { border-left-color: var(--va-green); background: #f0f9f2; } .decision-item.decision-denied { border-left-color: var(--va-red); background: #fef5f5; } .decision-disposition { min-width: 80px; } .decision-info { flex: 1; } .decision-info strong { font-size: 0.9rem; display: block; margin-bottom: 0.25rem; } .next-options { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* ---- Dashboard ---- */ .page-header { margin-bottom: 1.5rem; } .page-header h1 { font-size: 1.75rem; color: var(--va-blue); } .page-header p { color: var(--va-gray); margin-top: 0.25rem; } /* Summary Cards */ .summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .summary-card { background: var(--va-white); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); text-align: center; border-top: 4px solid var(--va-blue-light); } .summary-card.card-active { border-top-color: var(--va-green); } .summary-card.card-hlr { border-top-color: var(--va-red); } .summary-card.card-supp { border-top-color: #2c3e50; } .summary-number { font-size: 2rem; font-weight: 700; color: var(--va-blue); } .summary-label { font-size: 0.85rem; color: var(--va-gray); margin-top: 0.25rem; } /* Filter Bar */ .filter-bar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; } .filter-bar label { font-weight: 600; color: var(--va-gray); margin-right: 0.5rem; } .filter-btn { padding: 0.35rem 0.9rem; border: 1px solid var(--va-gray-lighter); border-radius: 20px; background: var(--va-white); cursor: pointer; font-size: 0.85rem; color: var(--va-gray); transition: all 0.2s; } .filter-btn:hover { border-color: var(--va-blue-light); color: var(--va-blue-light); } .filter-divider { color: var(--va-gray-lighter); font-size: 1.2rem; margin: 0 0.25rem; } .filter-btn.active { background: var(--va-blue-light); color: var(--va-white); border-color: var(--va-blue-light); } /* Claims Table */ .table-responsive { overflow-x: auto; } .claims-table { width: 100%; background: var(--va-white); border-radius: var(--radius); box-shadow: var(--shadow); border-collapse: collapse; overflow: hidden; } .claims-table thead { background: var(--va-blue); color: var(--va-white); } .claims-table th { padding: 0.75rem 1rem; text-align: left; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } .claims-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--va-gray-lightest); font-size: 0.9rem; } .claims-table tbody tr:hover { background: #f0f5fa; } .claim-id { font-weight: 700; color: var(--va-blue-light); } .contentions-cell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .status-indicator { display: inline-block; padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); background: #eef2f7; font-size: 0.85rem; font-weight: 600; color: var(--va-blue); } /* Empty State */ .empty-state { text-align: center; padding: 3rem; background: var(--va-white); border-radius: var(--radius); box-shadow: var(--shadow); } .empty-state h3 { color: var(--va-gray); } /* ---- Detail Page ---- */ .back-link { display: inline-block; margin-bottom: 1rem; color: var(--va-blue-light); font-weight: 600; } .detail-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; } .detail-title { display: flex; align-items: center; gap: 1rem; } .detail-title h1 { font-size: 1.75rem; color: var(--va-blue); } .status-lg { font-size: 1rem; padding: 0.4rem 1rem; } /* Info Grid */ .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .info-card { background: var(--va-white); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); } .info-card h3 { font-size: 0.8rem; text-transform: uppercase; color: var(--va-gray); letter-spacing: 0.5px; margin-bottom: 0.5rem; } .info-card p { font-size: 1.1rem; font-weight: 600; color: var(--va-blue); } .info-sub { font-size: 0.85rem; color: var(--va-gray); } /* Phase Progress */ .phase-section { background: var(--va-white); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 2rem; } .phase-section h2 { font-size: 1.2rem; color: var(--va-blue); margin-bottom: 1.5rem; } .phase-bar { display: flex; justify-content: space-between; position: relative; } .phase-bar::before { content: ''; position: absolute; top: 15px; left: 30px; right: 30px; height: 3px; background: var(--va-gray-lighter); } .phase-step { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; position: relative; flex: 1; } .phase-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--va-gray-lighter); border: 3px solid var(--va-white); box-shadow: 0 0 0 2px var(--va-gray-lighter); z-index: 1; transition: all 0.3s; } .phase-step span { font-size: 0.75rem; text-align: center; color: var(--va-gray); max-width: 100px; } .phase-complete .phase-dot { background: var(--va-green); box-shadow: 0 0 0 2px var(--va-green); } .phase-complete span { color: var(--va-green); font-weight: 600; } .phase-active .phase-dot { background: var(--va-blue-lighter); box-shadow: 0 0 0 2px var(--va-blue-lighter), 0 0 0 6px rgba(74,144,217,0.2); animation: pulse 2s infinite; } .phase-active span { color: var(--va-blue-lighter); font-weight: 700; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--va-blue-lighter), 0 0 0 6px rgba(74,144,217,0.2); } 50% { box-shadow: 0 0 0 2px var(--va-blue-lighter), 0 0 0 10px rgba(74,144,217,0.1); } } /* Tracked Items */ .tracked-section { background: var(--va-white); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 2rem; } .tracked-section h2 { font-size: 1.2rem; color: var(--va-blue); margin-bottom: 1rem; } .tracked-list { display: flex; flex-direction: column; gap: 0.75rem; } .tracked-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: var(--radius-sm); background: var(--va-gray-lightest); border-left: 4px solid var(--va-gray-light); } .tracked-needed { border-left-color: #e74c3c; background: #fef5f5; } .tracked-scheduled { border-left-color: #3498db; background: #f0f7fd; } .tracked-submitted { border-left-color: #f39c12; background: #fef9ee; } .tracked-completed { border-left-color: var(--va-green); background: #f0f9f2; } .tracked-icon { font-size: 1.25rem; min-width: 30px; text-align: center; } .tracked-info { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .tracked-date { font-size: 0.85rem; color: var(--va-gray); } .doc-filename { font-size: 0.8rem; color: var(--va-gray); font-style: italic; display: block; } /* Timeline */ .timeline-list { display: flex; flex-direction: column; gap: 0; } .timeline-item { display: flex; gap: 1rem; padding: 0.75rem 1rem; border-left: 3px solid var(--va-blue-lighter); position: relative; } .timeline-item::before { content: ''; position: absolute; left: -7px; top: 1rem; width: 11px; height: 11px; background: var(--va-blue-lighter); border-radius: 50%; border: 2px solid var(--va-white); } .timeline-date { flex-shrink: 0; width: 90px; font-size: 0.8rem; color: var(--va-gray); font-weight: 600; } .timeline-content { flex: 1; } .timeline-content strong { font-size: 0.9rem; color: var(--va-blue); } .timeline-details { font-size: 0.85rem; color: var(--va-gray); margin-top: 0.25rem; } .tracked-received { border-left-color: var(--va-green); background: #f0f9f2; } .badge-received { background: var(--va-green); color: white; } .badge-needed-from-you { background: #e74c3c; color: white; } .badge-needed-from-others { background: #e67e22; color: white; } /* AI Section */ .ai-section { background: var(--surface); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-theme); border-top: 4px solid var(--va-blue-lighter); } .ai-section h2 { font-size: 1.2rem; color: var(--text-strong); margin-bottom: 0.25rem; } .ai-subtitle { color: var(--text-dim); margin-bottom: 1rem; font-size: 0.95rem; } .explanation-box { margin-top: 1rem; padding: 1.25rem; background: var(--surface-2); border-radius: var(--radius); border: 1px solid var(--border); } .explanation-content { font-size: 0.95rem; line-height: 1.8; color: var(--text); } .explanation-content ul, .explanation-content ol { margin-left: 1.5rem; margin-top: 0.5rem; } .explanation-content li { margin-bottom: 0.3rem; } /* Loading Spinner */ .loading { display: flex; align-items: center; gap: 1rem; color: var(--va-gray); } .spinner { width: 24px; height: 24px; border: 3px solid var(--va-gray-lighter); border-top: 3px solid var(--va-blue-lighter); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Alerts */ .nav-alerts-link { position: relative; } .nav-alert-badge { position: absolute; top: -8px; right: -10px; background: var(--va-red); color: white; font-size: 0.7rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .alerts-banner { background: var(--va-white); border-radius: var(--radius); box-shadow: var(--shadow); border-left: 4px solid var(--va-red); padding: 1rem; margin-bottom: 1.5rem; } /* =================================================================== */ /* Phase 7z — AI Usage Widget */ /* =================================================================== */ .ai-usage-widget { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 0.85rem 1.1rem; margin-bottom: 1.5rem; color: var(--text); box-shadow: var(--shadow-theme); } .ai-usage-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; flex-wrap: wrap; } .ai-usage-icon { font-size: 1.2rem; line-height: 1; } .ai-usage-header h3 { font-size: 0.9rem; color: var(--text-strong); margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; flex: 1; } .ai-usage-status { font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; } .ai-usage-status.ai-usage-ok { background: var(--ok-bg); color: var(--ok-text); } .ai-usage-status.ai-usage-disabled { background: var(--closed-bg); color: var(--closed-text); } .ai-usage-status.ai-usage-exhausted { background: var(--danger-bg); color: var(--danger-text); } .ai-usage-bars { display: flex; flex-direction: column; gap: 0.45rem; } .ai-usage-bar-row { display: grid; grid-template-columns: 90px 1fr 140px; align-items: center; gap: 0.75rem; font-size: 0.82rem; } .ai-usage-label { color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem; } .ai-usage-bar { height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; position: relative; } .ai-usage-bar-fill { height: 100%; background: var(--va-green); border-radius: 999px; transition: width 0.4s ease, background 0.2s ease; } /* Color-code the fill bar based on % used. The data-* attributes on the widget are read by the inline JS to apply these classes. */ .ai-usage-widget[data-daily-pct] .ai-usage-bar-fill { background: var(--va-green); } .ai-usage-widget.usage-warn .ai-usage-bar-fill, .ai-usage-bar-fill.usage-warn { background: var(--va-gold); } .ai-usage-widget.usage-danger .ai-usage-bar-fill, .ai-usage-bar-fill.usage-danger { background: var(--va-red); } .ai-usage-numbers { color: var(--text); font-variant-numeric: tabular-nums; font-size: 0.78rem; text-align: right; white-space: nowrap; } @media (max-width: 600px) { .ai-usage-bar-row { grid-template-columns: 1fr; gap: 0.2rem; } .ai-usage-numbers { text-align: left; } } .alerts-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; } .alerts-header h3 { font-size: 1rem; color: var(--va-red); margin: 0; } .alerts-list { display: flex; flex-direction: column; gap: 0.5rem; } .alert-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--radius-sm); background: var(--va-gray-lightest); border-left: 4px solid var(--va-gray-light); } .alert-item.alert-unread { background: #fff8e1; border-left-color: var(--va-gold); } .alert-item.alert-decision_made, .alert-item.alert-decision_detail { border-left-color: var(--va-red); background: #fef5f5; } .alert-item.alert-status_change { border-left-color: var(--va-blue-lighter); } .alert-item.alert-new_document { border-left-color: var(--va-green); } .alert-item.alert-read { opacity: 0.6; } .alert-icon { font-size: 1.2rem; min-width: 28px; text-align: center; } .alert-content { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; } .alert-content strong { font-size: 0.9rem; color: var(--va-blue); } .alert-detail { font-size: 0.85rem; color: var(--va-gray); } .alert-time { font-size: 0.75rem; color: var(--va-gray-light); } /* Exam Prep */ .text-green { color: #2e8540; } .text-red { color: #e31c3d; } .quiz-controls { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1.5rem; } .quiz-row { display: flex; align-items: center; gap: 0.5rem; } .quiz-row select { padding: 0.4rem 0.75rem; border: 2px solid var(--va-gray-lighter); border-radius: var(--radius-sm); font-size: 0.95rem; } .question-card { background: var(--va-white); border: 2px solid var(--va-gray-lighter); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1rem; } .question-text { font-size: 1.1rem; font-weight: 600; color: var(--va-blue); margin-bottom: 1.25rem; line-height: 1.5; } .choices-area { display: flex; flex-direction: column; gap: 0.5rem; } .choice-btn { display: block; width: 100%; text-align: left; padding: 0.75rem 1rem; border: 2px solid var(--va-gray-lighter); border-radius: var(--radius-sm); background: var(--va-white); font-size: 0.95rem; cursor: pointer; transition: all 0.2s; } .choice-btn:hover:not(:disabled) { border-color: var(--va-blue-lighter); background: #f0f5fa; } .choice-btn:disabled { cursor: default; opacity: 0.8; } .choice-correct { border-color: #2e8540 !important; background: #e8f5e9 !important; } /* 2026-04-30: warning-amber for "wrong" answers — softer than the previous #e31c3d crisis-red. Reduces emotional weight of being wrong on practice questions per VA.gov 2026 design principles. */ .choice-wrong { border-color: #cf5500 !important; background: #fff4e5 !important; } .result-area { margin-top: 1rem; } .result-correct { padding: 0.75rem 1rem; background: #e8f5e9; border-left: 4px solid #2e8540; border-radius: var(--radius-sm); font-weight: 700; color: #2e8540; margin-bottom: 0.75rem; } .result-wrong { padding: 0.75rem 1rem; background: #fff4e5; border-left: 4px solid #cf5500; border-radius: var(--radius-sm); font-weight: 700; color: #cf5500; margin-bottom: 0.75rem; } .quiz-progress { margin-top: 1rem; } .quiz-progress-bar { width: 100%; height: 8px; background: var(--va-gray-lighter); border-radius: 4px; margin-top: 0.5rem; overflow: hidden; } .quiz-progress-fill { height: 100%; background: var(--va-blue-lighter); border-radius: 4px; transition: width 0.3s; } .resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } .resource-card { background: var(--va-gray-lightest); border-radius: var(--radius); padding: 1rem 1.25rem; } .resource-card h3 { font-size: 1rem; color: var(--va-blue); margin-bottom: 0.5rem; } .resource-card ul { margin-left: 1.25rem; font-size: 0.9rem; } .resource-card li { margin-bottom: 0.35rem; } /* Accreditation page */ .accred-form-row { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; } .accred-form-row .form-group { flex: 1; min-width: 180px; } .accred-results { margin-top: 1rem; } /* ---- Footer ---- */ .footer { text-align: center; padding: 1.5rem; background: var(--va-blue); color: var(--va-gray-light); font-size: 0.85rem; margin-top: 2rem; } .footer a { color: var(--va-gold); } .footer-sub { font-size: 0.75rem; margin-top: 0.25rem; opacity: 0.7; } /* ---- Responsive ---- */ @media (max-width: 768px) { .container { padding: 1rem; } .summary-cards { grid-template-columns: repeat(2, 1fr); } .info-grid { grid-template-columns: 1fr; } .phase-bar { flex-direction: column; gap: 1rem; } .phase-bar::before { display: none; } .phase-step { flex-direction: row; } .detail-header { flex-direction: column; } .claims-table th, .claims-table td { padding: 0.5rem; font-size: 0.8rem; } } /* =================================================================== */ /* Theme toggle button in navbar */ /* =================================================================== */ .theme-toggle { background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); color: var(--va-white); width: 34px; height: 34px; border-radius: 50%; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background 0.15s, border-color 0.15s; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); } .theme-toggle:focus { outline: 2px solid var(--va-gold); outline-offset: 2px; } /* =================================================================== */ /* Phase 7o — Navbar dropdowns */ /* =================================================================== */ /* Click-to-open dropdown panels for grouping related nav items (VCA, username menu). Semantics-first — the