/** * BUZZRFP Government Theme * * This stylesheet implements the BUZZRFP design system with: * - Government-friendly color palette (Navy, Blue, Red, Gold) * - SaaS-optimized admin panel colors (softened for daily use) * - Modern typography with Inter font family * - Status badges and semantic colors * * Design Strategy: * - Sidebar uses darker navy (#1E3A5F) for brand connection * - Main content uses softer tones for comfortable daily use * - Semantic status colors for quick visual understanding */ /* ============================================ CSS CUSTOM PROPERTIES - BUZZRFP Design System ============================================ */ :root { /* Government Theme - Primary Colors (mapped from design-tokens.css). Backlog #11 (2026-08-26): --gov-blue and --gov-gold now chain to the tenant identity variables (base.html emits them from core.tenant_branding), with the government values as fallbacks — so a tenant's secondary/accent colors (and the admin's ocean/forest/slate/ purple presets, which save exactly those columns) drive every downstream consumer of these vars. Default tenants render byte-identically. --gov-navy stays structural (dark chrome). */ --gov-navy: #112E51; --gov-blue: var(--secondary-color, #205493); --gov-blue-light: #4A9BC4; --gov-red: #B51D09; --gov-red-light: #CD2026; --gov-gold: var(--accent-color, #FBBF24); --gov-gray: #525252; --gov-gray-light: #a3a3a3; --gov-cream: #f5f5f5; /* Primary - Brand Blue (Softened for Daily Use) */ --primary-50: #F0F8FC; --primary-100: #E1F1F9; --primary-200: #BCE0F1; --primary-300: #93CAE4; --primary-400: #6BB3D4; --primary-500: #4A9BC4; --primary-600: #3B82A0; --primary-700: #2D5F8A; --primary-800: #234B6E; --primary-900: #1E3A5F; --primary-950: #152A45; /* Accent - Warm Gold/Amber for CTAs & Highlights */ --accent-50: #FFFBEB; --accent-100: #FEF3C7; --accent-200: #FDE68A; --accent-300: #FCD34D; --accent-400: #FBBF24; --accent-500: #F59E0B; --accent-600: #D97706; --accent-700: #B45309; --accent-800: #92400E; --accent-900: #78350F; /* Semantic - Success (Wins, Completed, Approved) */ --success-50: #F0FDF4; --success-100: #DCFCE7; --success-200: #BBF7D0; --success-300: #86EFAC; --success-400: #4ADE80; --success-500: #22C55E; --success-600: #16A34A; --success-700: #15803D; --success-800: #166534; --success-900: #14532D; /* Semantic - Warning (Deadlines, Attention) */ --warning-50: #FFFBEB; --warning-100: #FEF3C7; --warning-200: #FDE68A; --warning-300: #FCD34D; --warning-400: #FBBF24; --warning-500: #F59E0B; --warning-600: #D97706; --warning-700: #B45309; --warning-800: #92400E; --warning-900: #78350F; /* Semantic - Danger (Errors, Urgent, Rejected) */ --danger-50: #FEF2F2; --danger-100: #FEE2E2; --danger-200: #FECACA; --danger-300: #FCA5A5; --danger-400: #F87171; --danger-500: #EF4444; --danger-600: #DC2626; --danger-700: #B91C1C; --danger-800: #991B1B; --danger-900: #7F1D1D; /* Semantic - Info (Information, Tips) */ --info-50: #EFF6FF; --info-100: #DBEAFE; --info-200: #BFDBFE; --info-300: #93C5FD; --info-400: #60A5FA; --info-500: #3B82F6; --info-600: #2563EB; --info-700: #1D4ED8; --info-800: #1E40AF; --info-900: #1E3A8A; /* ============================================ ACCENT & SEMANTIC SYSTEM (API-1266) One primary accent (brand blue/teal) + status semantics. Do NOT introduce off-palette hues (e.g. purple) for UI accents — use these tokens so the palette stays coherent and single-temperature. ============================================ */ --color-accent: var(--primary-600); /* single primary UI accent (brand blue). NB: the --accent-* ramp above is the separate gold highlight scale. */ --color-accent-hover: var(--primary-700); --color-accent-subtle: var(--primary-100); --color-success: var(--success-600); --color-warning: var(--warning-600); --color-danger: var(--danger-600); --color-info: var(--info-600); /* Neutral - Warm Gray Scale (from design-tokens.css) */ --neutral-50: #fafafa; --neutral-100: #f5f5f5; --neutral-200: #e5e5e5; --neutral-300: #d4d4d4; --neutral-400: #a3a3a3; /* Was #737373 (Tailwind neutral-500). Never contrast-tested — it is simply the midpoint of the ramp this palette was copied from, and it reached the screen as TEXT: every one of its 42 uses across this app is a `color:` declaration, none a border or a background. #737373 measures 4.35:1 on --neutral-100 (#f5f5f5), the body background. That is below the 4.5:1 AA floor for normal text, and this token carries 11-13px labels in the TCR screens. #666666 is the darkest value that does NOT collapse the ramp: it stays lighter than --neutral-600 (#525252) so 500 and 600 remain distinct, and clears AA at 5.27:1 on #f5f5f5 and 5.74:1 on white. Safe to change in place precisely because nothing borders or fills with it. */ --neutral-500: #666666; --neutral-600: #525252; --neutral-700: #404040; --neutral-800: #262626; --neutral-900: #171717; /* Proposal/RFP Status Colors */ --status-draft: #64748B; --status-draft-bg: #F1F5F9; --status-pending: #F59E0B; --status-pending-bg: #FEF3C7; --status-submitted: #3B82F6; --status-submitted-bg: #DBEAFE; --status-evaluation: #475569; /* API-1266: retired off-brand purple → slate */ --status-evaluation-bg: #E2E8F0; --status-awarded: #22C55E; --status-awarded-bg: #DCFCE7; --status-rejected: #EF4444; --status-rejected-bg: #FEE2E2; --status-expired: #6B7280; --status-expired-bg: #F3F4F6; --status-renewal: #06B6D4; --status-renewal-bg: #CFFAFE; /* Theme Properties — mapped from design-tokens.css */ --transition-speed: 200ms; --transition-easing: cubic-bezier(0.4, 0, 0.2, 1); --border-radius-sm: 4px; --border-radius-md: 6px; --border-radius-lg: 8px; --border-radius-xl: 12px; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.12); --shadow-sidebar: 2px 0 8px rgba(0, 0, 0, 0.1); } /* ============================================ TYPOGRAPHY API-1267: Inter is the committed system typeface (deliberate, not a generic default). Body + headings share the Inter-first stack below; per-tenant branding may override via --font-body / --font-display in base.html. ============================================ */ body { font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--neutral-900); background-color: var(--neutral-100); font-size: 1rem; /* API-1263: explicit 16px primary body text */ line-height: 1.5; } h1, h2, h3, h4, h5, h6 { font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 600; color: var(--neutral-900); } /* The page-header hero (.page-header-gradient) is always a dark gradient, so its headings must be white — overriding the default dark h1-h6 colour above. Scoped to the hero, so light-background headings elsewhere stay dark. Applies across every console page that uses the hero (Maester, admin reports, etc.). */ .page-header-gradient h1, .page-header-gradient h2, .page-header-gradient h3, .page-header-gradient h4, .page-header-gradient h5, .page-header-gradient h6 { color: #ffffff !important; } /* Same problem, same fix, other dark panels. * * The h1-h6 rule above sets an explicit dark colour, and an explicit colour on * the heading BEATS the `color: white` its dark parent sets -- inheritance only * applies when the child declares nothing. So any heading dropped onto a dark * panel renders near-black on dark blue. * * Measured on the Award Details page: "Contract Timeline" and "Deliverables" * came out rgb(23,23,23) at 1.31:1 against the panel. WCAG AA wants 4.5:1, so * the text was effectively invisible -- which is what QA reported. * * `.page-header-gradient` had already hit this and fixed it for the hero only. * These are the other two dark surfaces in the product. * * NOTE for anyone adding another dark panel: set the text colour on the panel * AND add its selector here, or the heading will silently go dark again. The * failure is invisible in the markup -- the panel says `color: white` and looks * correct in review. */ .timeline-container h1, .timeline-container h2, .timeline-container h3, .timeline-container h4, .timeline-container h5, .timeline-container h6, .dark-panel h1, .dark-panel h2, .dark-panel h3, .dark-panel h4, .dark-panel h5, .dark-panel h6 { color: #ffffff !important; } /* ============================================ RESPONSIVE TYPOGRAPHY (API-1265) Real ~1.25 modular scale with distinct H1>H2>H3 steps. (Was a flat 1.08–1.18x scale — H2/H3 nearly indistinguishable.) H1 also carries extra weight (700) for clearer prominence. ============================================ */ /* Default (mobile-first: < 768px) */ h1 { font-size: 1.5rem; line-height: 2rem; } /* 24px */ h2 { font-size: 1.25rem; line-height: 1.75rem; } /* 20px */ h3 { font-size: 1.0625rem; line-height: 1.5rem; } /* 17px */ h4 { font-size: 1rem; line-height: 1.4rem; } /* 16px */ /* Tablet (≥ 768px) */ @media (min-width: 768px) { h1 { font-size: 1.75rem; line-height: 2.25rem; } /* 28px */ h2 { font-size: 1.375rem; line-height: 1.875rem; } /* 22px */ h3 { font-size: 1.125rem; line-height: 1.625rem; } /* 18px */ } /* Laptop (≥ 1024px) — compact, but keeps the modular steps; scoped to content */ @media (min-width: 1024px) { #content-wrapper h1 { font-size: 1.625rem !important; line-height: 2.125rem !important; font-weight: 700 !important; } /* 26px */ #content-wrapper h2 { font-size: 1.25rem !important; line-height: 1.75rem !important; font-weight: 600 !important; } /* 20px */ #content-wrapper h3 { font-size: 1.0625rem !important; line-height: 1.5rem !important; font-weight: 600 !important; } /* 17px */ #content-wrapper h4 { font-size: 0.9375rem !important; line-height: 1.35rem !important; font-weight: 600 !important; } /* 15px */ } /* Large screen / external monitor (≥ 1440px) — full real scale */ @media (min-width: 1440px) { #content-wrapper h1 { font-size: 1.9375rem !important; line-height: 2.375rem !important; font-weight: 700 !important; } /* 31px — 1.25 scale */ #content-wrapper h2 { font-size: 1.5625rem !important; line-height: 2.125rem !important; font-weight: 600 !important; } /* 25px — 1.25 scale */ #content-wrapper h3 { font-size: 1.25rem !important; line-height: 1.75rem !important; font-weight: 600 !important; } /* 20px — 1.25 scale (body 16 -> 20/25/31) */ #content-wrapper h4 { font-size: 1.0625rem !important; line-height: 1.5rem !important; font-weight: 600 !important; } /* 17px */ } /* ============================================ READABILITY FLOOR (API-1263, floor made real WG-83/F3) Lift the pervasive smallest utility off 12px. theme-buzzrfp.css loads AFTER tailwind.compiled.css, so this overrides Tailwind's .text-xs (0.75rem/12px). Keeps a caption-sized step above 12px without collapsing into .text-sm (14px). WHY max() AND NOT A BARE rem. This console has THREE root font sizes, and 0.875rem is only 14px at one of them: desktop >=1440px, density off root 16px -> 14px laptop 1024-1439px, density off root 14px -> 12.25px density on, any width root 13px -> 11.375px The third case INVERTED the rule: a floor written to hold text at or above 12px was pushing it below 12px exactly when compact mode was on, and density-compact.css never re-pins it. The comments here claimed "14px" at all three roots for two audits, which is how it survived them. max(0.875rem, 12px) keeps the rem scaling (so density still compacts) and enforces the minimum the rule exists for. Desktop and laptop are unchanged; density mode lands on 12px instead of 11.375px. THE px HALF OF THAT max() IS A DELIBERATE EXCEPTION TO THE DENSITY DOCTRINE, and is the only one in this file. WG-92 requires that changing --density-base moves every type size proportionally, and calls anything pinned to an absolute px the F-04 defect. These five declarations are pinned ON PURPOSE: a readability floor that scales is not a floor. The two rules genuinely cannot both hold here, and accessibility wins over proportionality -- 12px is the number this team set, in this file, in API-1263. So a density proof run over the app must ALLOWLIST these five rules rather than file them: .text-xs, the .text-\[Npx\] block, .btn-sm, .badge-buzzrfp and .status-badge. Everything else in this sheet still scales. ============================================ */ .text-xs { font-size: max(0.875rem, 12px); line-height: 1.25rem; } /* >=12px floor; 14px at a 16px root */ /* Same floor for hard-coded tiny Tailwind sizes in templates. These arbitrary utilities (text-[10px] etc.) don't map to .text-xs, so they bypass the rule above; pin them to the same floor. Loaded after tailwind.compiled.css, so !important is only to beat any inline leading. */ .text-\[6px\], .text-\[8px\], .text-\[9px\], .text-\[10px\], .text-\[11px\] { font-size: max(0.875rem, 12px) !important; /* >=12px floor; 14px at a 16px root */ } /* ============================================ NAVIGATION BAR - Government Theme ============================================ */ .buzzrfp-nav { background: linear-gradient(135deg, var(--primary-800) 0%, var(--primary-900) 100%); border-bottom: 1px solid var(--primary-700); box-shadow: var(--shadow-md); } .buzzrfp-nav-light { background: white; border-bottom: 1px solid var(--neutral-200); box-shadow: var(--shadow-sm); } /* ============================================ SIDEBAR - Dark Government Navy ============================================ */ .buzzrfp-sidebar { background: var(--primary-900); color: white; box-shadow: var(--shadow-sidebar); } .buzzrfp-sidebar .sidebar-logo { padding: 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .buzzrfp-sidebar .nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; border-radius: var(--border-radius-lg); cursor: pointer; transition: all var(--transition-speed) var(--transition-easing); margin: 0.125rem 0.75rem; } .buzzrfp-sidebar .nav-item:hover { background: rgba(255, 255, 255, 0.1); color: white; } .buzzrfp-sidebar .nav-item.active { background: var(--primary-600); color: white; } .buzzrfp-sidebar .nav-item .icon { width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; } .buzzrfp-sidebar .nav-section-title { font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.05em; padding: 1rem 1rem 0.5rem 1.5rem; } /* ============================================ BUTTON COMPONENTS ============================================ */ .btn-buzzrfp { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.25rem; border-radius: var(--border-radius-lg); font-size: 0.875rem; font-weight: 600; transition: all var(--transition-speed) var(--transition-easing); cursor: pointer; gap: 0.5rem; border: none; } .btn-buzzrfp:focus { outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 160, 0.3); } .btn-buzzrfp-primary { background: var(--primary-600); color: white; } .btn-buzzrfp-primary:hover { background: var(--primary-700); } .btn-buzzrfp-secondary { background: var(--neutral-200); color: var(--neutral-700); } .btn-buzzrfp-secondary:hover { background: var(--neutral-300); } .btn-buzzrfp-accent { background: var(--accent-400); color: var(--neutral-900); } .btn-buzzrfp-accent:hover { background: var(--accent-500); } .btn-buzzrfp-success { background: var(--success-600); color: white; } .btn-buzzrfp-success:hover { background: var(--success-700); } .btn-buzzrfp-danger { background: var(--danger-600); color: white; } .btn-buzzrfp-danger:hover { background: var(--danger-700); } .btn-buzzrfp-outline { background: transparent; color: var(--primary-600); border: 2px solid var(--primary-600); } .btn-buzzrfp-outline:hover { background: var(--primary-50); } .btn-buzzrfp-ghost { background: transparent; color: var(--neutral-600); } .btn-buzzrfp-ghost:hover { background: var(--neutral-100); } .btn-buzzrfp-gov { background: var(--gov-red); color: white; } .btn-buzzrfp-gov:hover { background: var(--gov-red-light); } .btn-sm { padding: 0.375rem 0.75rem; font-size: max(0.875rem, 12px); /* API-1263 label floor: >=12px; 14px at a 16px root */ } .btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; } /* ============================================ STATUS BADGES ============================================ */ .badge-buzzrfp { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: max(0.875rem, 12px); /* API-1263 label floor: >=12px; 14px at a 16px root */ font-weight: 600; gap: 0.375rem; } .badge-draft { background: var(--status-draft-bg); color: var(--status-draft); } .badge-pending { background: var(--status-pending-bg); color: var(--warning-700); } .badge-submitted { background: var(--status-submitted-bg); color: var(--info-700); } .badge-evaluation { background: var(--status-evaluation-bg); color: #334155; /* API-1266: slate (was purple #7C3AED) */ } .badge-awarded { background: var(--status-awarded-bg); color: var(--success-700); } .badge-rejected { background: var(--status-rejected-bg); color: var(--danger-700); } .badge-expired { background: var(--status-expired-bg); color: var(--status-expired); } .badge-renewal { background: var(--status-renewal-bg); color: #0891B2; } /* ============================================ CARD COMPONENTS ============================================ */ .card-buzzrfp { background: white; border-radius: var(--border-radius-lg); border: 1px solid var(--neutral-200); overflow: hidden; transition: all var(--transition-speed) var(--transition-easing); } .card-buzzrfp:hover { box-shadow: var(--shadow-card-hover); } .card-buzzrfp-header { padding: 1rem; border-bottom: 1px solid var(--neutral-200); display: flex; justify-content: space-between; align-items: center; } .card-buzzrfp-body { padding: 1rem; } .card-buzzrfp-footer { padding: 0.75rem 1rem; background: var(--neutral-50); border-top: 1px solid var(--neutral-200); } /* ============================================ STAT CARDS ============================================ */ .stat-card-buzzrfp { background: white; border-radius: var(--border-radius-lg); padding: 1.25rem; border: 1px solid var(--neutral-200); } .stat-card-buzzrfp .stat-label { font-size: 0.75rem; color: var(--neutral-500); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; } .stat-card-buzzrfp .stat-value { font-size: 1.385rem; font-weight: 700; color: var(--neutral-900); } .stat-card-buzzrfp .stat-change-positive { font-size: 0.75rem; color: var(--success-600); } .stat-card-buzzrfp .stat-change-negative { font-size: 0.75rem; color: var(--danger-600); } /* ============================================ ALERT COMPONENTS ============================================ */ .alert-buzzrfp { padding: 0.875rem 1rem; border-radius: var(--border-radius-lg); display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; } .alert-buzzrfp-success { background: var(--success-50); border: 1px solid var(--success-500); color: var(--success-700); } .alert-buzzrfp-warning { background: var(--warning-50); border: 1px solid var(--warning-500); color: var(--warning-700); } .alert-buzzrfp-danger { background: var(--danger-50); border: 1px solid var(--danger-500); color: var(--danger-700); } .alert-buzzrfp-info { background: var(--info-50); border: 1px solid var(--info-500); color: var(--info-700); } /* ============================================ FORM COMPONENTS ============================================ */ .form-input-buzzrfp { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--neutral-300); border-radius: var(--border-radius-lg); font-size: 0.875rem; transition: all var(--transition-speed) var(--transition-easing); } .form-input-buzzrfp::placeholder { color: var(--neutral-500); } .form-input-buzzrfp:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(59, 130, 160, 0.3); } .form-label-buzzrfp { display: block; font-size: 0.875rem; font-weight: 500; color: var(--neutral-700); margin-bottom: 0.375rem; } /* ============================================ TABLE STYLES ============================================ */ .table-buzzrfp { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-buzzrfp th { text-align: left; padding: 0.75rem 1rem; background: var(--neutral-50); font-weight: 600; color: var(--neutral-600); border-bottom: 1px solid var(--neutral-200); } .table-buzzrfp td { padding: 0.875rem 1rem; border-bottom: 1px solid var(--neutral-100); color: var(--neutral-700); } .table-buzzrfp tr:hover td { background: var(--neutral-50); } /* ============================================ DASHBOARD HEADER ============================================ */ .dashboard-header-buzzrfp { background: linear-gradient(135deg, var(--primary-800) 0%, var(--primary-900) 100%); color: white; padding: 2rem; border-radius: var(--border-radius-lg); margin-bottom: 1.5rem; } .dashboard-header-buzzrfp h1 { color: white; font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; } .dashboard-header-buzzrfp p { color: rgba(255, 255, 255, 0.8); } /* ============================================ PRIORITY INDICATORS ============================================ */ .priority-p1 { background: linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%); color: white; } .priority-p2 { background: linear-gradient(135deg, var(--warning-500) 0%, var(--warning-600) 100%); color: white; } .priority-p3 { background: linear-gradient(135deg, var(--info-500) 0%, var(--info-600) 100%); color: white; } /* ============================================ COUNTDOWN CIRCLES ============================================ */ .countdown-circle { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.125rem; } .countdown-urgent { background: linear-gradient(135deg, var(--danger-500) 0%, var(--danger-600) 100%); color: white; } .countdown-warning { background: linear-gradient(135deg, var(--warning-500) 0%, var(--warning-600) 100%); color: white; } .countdown-normal { background: linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%); color: white; } /* ============================================ PROGRESS BARS ============================================ */ .progress-bar-buzzrfp { height: 8px; background-color: var(--neutral-200); border-radius: 9999px; overflow: hidden; } .progress-fill-buzzrfp { height: 100%; background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-600) 100%); transition: width 0.3s ease; } .progress-fill-success { background: linear-gradient(90deg, var(--success-500) 0%, var(--success-600) 100%); } .progress-fill-warning { background: linear-gradient(90deg, var(--warning-500) 0%, var(--warning-600) 100%); } .progress-fill-danger { background: linear-gradient(90deg, var(--danger-500) 0%, var(--danger-600) 100%); } /* ============================================ TAB NAVIGATION - Pill Style ============================================ */ .tab-navigation-rfp { background: white; border-radius: 8px; padding: 6px; display: flex; flex-wrap: nowrap; gap: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .tab-navigation-rfp::-webkit-scrollbar { height: 4px; } .tab-navigation-rfp::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } .tab-navigation-rfp::-webkit-scrollbar-track { background: transparent; } .tab-btn-rfp { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: none; background: transparent; color: var(--neutral-500); font-size: 0.875rem; font-weight: 500; border-radius: 6px; cursor: pointer; transition: all var(--transition-speed) var(--transition-easing); white-space: nowrap; flex-shrink: 0; } .tab-btn-rfp:hover { background: var(--neutral-100); color: var(--neutral-900); } .tab-btn-rfp.active { background: var(--primary-600); color: white; box-shadow: 0 2px 8px rgba(59, 130, 160, 0.3); } /* ============================================ DEADLINE CARDS ============================================ */ .deadline-card-urgent { border-left: 4px solid var(--danger-500); background: var(--danger-50); } .deadline-card-warning { border-left: 4px solid var(--warning-500); background: var(--warning-50); } .deadline-card-normal { border-left: 4px solid var(--info-500); background: var(--neutral-50); } /* ============================================ GOVERNMENT THEME ACCENTS ============================================ */ .section-header-gov { background: var(--gov-navy); color: white; padding: 0.75rem 1.25rem; margin: 2rem 0 1rem 0; border-left: 4px solid var(--gov-red); border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0; } .section-header-gov h2 { color: white; font-size: 1rem; font-weight: 600; margin: 0; } .gov-accent-gold { color: var(--gov-gold); } .gov-accent-red { color: var(--gov-red); } .bg-gov-navy { background-color: var(--gov-navy); } .bg-gov-blue { background-color: var(--gov-blue); } .text-gov-navy { color: var(--gov-navy); } /* ============================================ UTILITY CLASSES ============================================ */ .text-primary-600 { color: var(--primary-600); } .text-primary-700 { color: var(--primary-700); } .text-primary-900 { color: var(--primary-900); } .text-success-600 { color: var(--success-600); } .text-warning-600 { color: var(--warning-600); } .text-danger-600 { color: var(--danger-600); } /* .text-neutral-400/500/600/700/900 used to be defined here. All four had ZERO uses in any template — dead utilities that looked like a supported way to colour text and were not. Removed rather than left as a trap; the Tailwind .text-gray-* family below is what templates actually use. */ /* ============================================ GREY TEXT LEGIBILITY OVERRIDE ============================================ tailwind.compiled.css is a frozen, purged v4 build with no toolchain to regenerate it, and it defines .text-gray-400/500 as color:var(--color-gray-400/500) inside @layer utilities. These two rules are UNLAYERED and this sheet loads after it (base.html:82 vs :47), so unlayered wins outright — no !important, no specificity games. Overriding the CLASS and not the --color-gray-* variable is deliberate. The variable also feeds bg-gray-400 (82 uses), border-gray-400 (15), placeholder-gray-400 (10) and the gradient stops; redefining it would repaint all of those too. Only the text utilities are wrong. Measured on the #f5f5f5 body: .text-gray-400 oklch(70.7%) ~= #99a1af 2.5:1 FAILS AA — 2,314 uses across 392 files .text-gray-500 oklch(55.1%) ~= #6a7282 ~4.6:1 marginal — 5,175 uses across 480 files The replacements keep the two steps distinct and both clear AA: 400 -> #666666 5.27:1 500 -> #525252 7.17:1 The variant forms need no handling: hover:text-gray-500, dark:text-gray-400 and dark:text-gray-500 appear on 40 elements between them but emit ZERO rules in the purged bundle, so they are already dead no-ops and nothing here can conflict with them. Verified by grepping the compiled file, not assumed. If the bundle is ever rebuilt with those variants present, these two rules must move inside @layer utilities so variant specificity keeps winning. */ .text-gray-400 { color: #666666; } .text-gray-500 { color: #525252; } .bg-primary-50 { background-color: var(--primary-50); } .bg-primary-100 { background-color: var(--primary-100); } .bg-primary-600 { background-color: var(--primary-600); } .bg-primary-900 { background-color: var(--primary-900); } .bg-neutral-50 { background-color: var(--neutral-50); } .bg-neutral-100 { background-color: var(--neutral-100); } .border-primary-200 { border-color: var(--primary-200); } .border-neutral-200 { border-color: var(--neutral-200); } /* Hover effects */ .hover-lift { transition: transform var(--transition-speed) var(--transition-easing); } .hover-lift:hover { transform: translateY(-2px); } /* ============================================ RESPONSIVE LAYOUT ============================================ */ /* Laptop root scaling — scales ALL rem-based values globally. API-1263: raised 13px -> 14px so laptop text clears the readability floor (13px root pushed small utilities to ~10px). Still denser than desktop. Density flag (2026-08): when design-tokens.css is loaded it owns the root via --density-base, so this rule defers to it; with the flag off the variable is undefined and the 14px fallback keeps behavior unchanged. */ @media (min-width: 1024px) and (max-width: 1439px) { html { font-size: var(--density-base, 14px); } } /* Content wrapper responsive max-width */ #content-wrapper { width: 100%; transition: max-width 0.2s ease; } /* Tablet: full width */ @media (min-width: 768px) and (max-width: 1023px) { #content-wrapper { max-width: 100% !important; } } /* Laptop (1024-1439px): fill available space after sidebar */ @media (min-width: 1024px) and (max-width: 1439px) { #content-wrapper { max-width: 100% !important; } } /* Large screen (≥ 1440px): full 90rem */ @media (min-width: 1440px) { #content-wrapper { max-width: 90rem !important; } } /* Navbar matches content-wrapper widths */ .buzzrfp-nav > div:first-child { transition: max-width 0.2s ease; } @media (min-width: 1440px) { .buzzrfp-nav > div:first-child { max-width: 90rem; } } @media (min-width: 1024px) and (max-width: 1439px) { .buzzrfp-nav > div:first-child { max-width: 100%; } } /* Mobile: tighter spacing */ @media (max-width: 767px) { #content-wrapper { padding-left: 1rem; padding-right: 1rem; } .page-header-accent { padding: 1rem; margin-bottom: 1rem; } .tab-btn-rfp { padding: 6px 10px; font-size: 0.75rem; gap: 4px; } .btn-rfp-primary, .btn-rfp-secondary, .btn-rfp-navy { padding: 0.375rem 0.75rem; font-size: 0.75rem; } } /* Laptop: layout fixes — root font-size handles most scaling */ @media (min-width: 1024px) and (max-width: 1439px) { #content-wrapper { max-width: 100% !important; } /* Page header: stack title + buttons vertically on laptop */ .page-header-accent .flex.lg\:flex-row { flex-direction: column !important; align-items: flex-start !important; } /* Action buttons: allow wrapping */ .page-header-accent .flex-nowrap { flex-wrap: wrap !important; } /* Buttons: compact at laptop */ .btn-rfp-primary, .btn-rfp-secondary, .btn-rfp-navy { padding: 0.25rem 0.5rem; font-size: 0.6875rem; } /* Icon badge: smaller */ .icon-badge { width: 2rem; height: 2rem; } .icon-badge i { font-size: 0.875rem !important; } /* Countdown circles */ .countdown-circle { width: 36px; height: 36px; } } /* Tablet: medium spacing */ @media (min-width: 768px) and (max-width: 1023px) { .page-header-accent { padding: 1.25rem; } } /* ============================================ ANIMATIONS ============================================ */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .animate-fade-in { animation: fadeIn 0.2s ease-out; } .animate-slide-up { animation: slideUp 0.3s ease-out; } /* ============================================ RFP PAGE COMPONENTS - DMMS-Style Patterns ============================================ */ /* RFP Primary Button - Navy-to-Blue gradient */ .btn-rfp-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; background: linear-gradient(to right, var(--gov-blue), var(--primary-600)); color: white; border-radius: var(--border-radius-lg); font-size: 0.875rem; font-weight: 600; transition: all var(--transition-speed) var(--transition-easing); box-shadow: 0 1px 3px rgba(32, 84, 147, 0.25); border: none; cursor: pointer; } .btn-rfp-primary:hover { background: linear-gradient(to right, var(--gov-navy), var(--gov-blue)); box-shadow: 0 4px 12px rgba(32, 84, 147, 0.3); } /* RFP Secondary Button - White with gray border */ .btn-rfp-secondary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; background: white; color: var(--neutral-700); border: 1px solid var(--neutral-300); border-radius: var(--border-radius-lg); font-size: 0.875rem; font-weight: 500; transition: all var(--transition-speed) var(--transition-easing); cursor: pointer; } .btn-rfp-secondary:hover { background: var(--neutral-50); border-color: var(--neutral-400); } /* RFP Navy Button - Deep navy gradient (awards/contracts) */ .btn-rfp-navy { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; background: linear-gradient(to right, var(--gov-navy), var(--primary-900)); color: white; border-radius: var(--border-radius-lg); font-size: 0.875rem; font-weight: 600; transition: all var(--transition-speed) var(--transition-easing); box-shadow: 0 1px 3px rgba(17, 46, 81, 0.25); border: none; cursor: pointer; } .btn-rfp-navy:hover { background: linear-gradient(to right, #0A1F3A, var(--gov-navy)); box-shadow: 0 4px 12px rgba(17, 46, 81, 0.3); } /* RFP Card - rounded-xl with border and hover shadow */ .card-rfp { background: white; border-radius: var(--border-radius-xl); border: 1px solid var(--neutral-200); transition: box-shadow var(--transition-speed) var(--transition-easing); } .card-rfp:hover { box-shadow: var(--shadow-card-hover); } /* RFP Opportunity/Award Card - with lift effect */ .card-rfp-item { background: white; border-radius: var(--border-radius-xl); border: 1px solid var(--neutral-200); padding: 1.25rem; transition: all var(--transition-speed) var(--transition-easing); } .card-rfp-item:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } /* RFP Status Badges - shared across all list pages. The base class carries a neutral pill background so any status that hasn't been explicitly themed below still renders as a visible pill (matches the surrounding "Assigned:" / "Due:" pills in shape and height) instead of plain text. Specific .status-* rules below override the bg/color. */ .status-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: max(0.875rem, 12px); /* API-1263 label floor: >=12px; 14px at a 16px root */ font-weight: 600; background-color: #f3f4f6; color: #4b5563; } .status-review { background-color: #f3f4f6; color: #4b5563; } .status-qualification { background-color: #fef3c7; color: #92400e; } .status-tech-build { background-color: #dbeafe; color: #1e40af; } .status-admin-build { background-color: #fef3c7; color: #92400e; } .status-sent-print { background-color: #e0e7ff; color: #3730a3; } .status-submitted { background-color: #d1fae5; color: #065f46; } .status-won { background-color: #10b981; color: white; } .status-lost { background-color: #ef4444; color: white; } .status-cancelled { background-color: #6b7280; color: white; } .status-new { background-color: #dbeafe; color: #1e40af; } .status-active { background-color: #d1fae5; color: #065f46; } .status-inactive { background-color: #f3f4f6; color: var(--neutral-600); } .status-expired { background-color: #f3f4f6; color: var(--neutral-600); } /* Granular workflow-state badges (My Assignments). Each maps to the slugified label produced by `{{ workflow_state_label|lower|slugify }}`. Colors follow a "where in the pipeline" semantics: amber for waiting, blue for active work, slate for review, orange for revisions, green for done. Keep in sync with workflow_models.py::WorkflowState. (API-1266: review states moved off purple → slate for palette coherence.) */ .status-draft, .status-new-opportunity { background-color: #dbeafe; color: #1e40af; } .status-pending-taq-approval { background-color: #fef3c7; color: #92400e; } .status-taq-rejected { background-color: #fee2e2; color: #991b1b; } .status-approved-pending-assignment { background-color: #cffafe; color: #155e75; } .status-in-progress-writing { background-color: #dbeafe; color: #1e40af; } .status-pending-tech-review, .status-pending-l2-review { background-color: #e2e8f0; color: #334155; } .status-tech-review-revisions-needed, .status-l2-review-revisions-needed { background-color: #ffedd5; color: #9a3412; } .status-ready-for-submission { background-color: #d1fae5; color: #065f46; } .status-pending-win-loss { background-color: #fef3c7; color: #92400e; } .status-no-bid { background-color: #f3f4f6; color: var(--neutral-600); } .status-winning-bid-captured, .status-process-complete { background-color: #10b981; color: white; } /* RFP KPI Cards - with accent top bar */ .kpi-card { position: relative; overflow: hidden; } .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; } .kpi-card-navy::before { background: linear-gradient(to right, var(--gov-navy), var(--gov-blue)); } .kpi-card-gold::before { background: linear-gradient(to right, #F59E0B, #FBBF24); } .kpi-card-green::before { background: linear-gradient(to right, #16A34A, #22C55E); } .kpi-card-blue::before { background: linear-gradient(to right, var(--primary-600), var(--primary-500)); } .kpi-card-red::before { background: linear-gradient(to right, #DC2626, #EF4444); } /* API-1266: retired purple; slate accent bar (class name kept for template compatibility) */ .kpi-card-purple::before { background: linear-gradient(to right, #475569, #64748b); } /* RFP Table - navy gradient header */ .table-rfp { width: 100%; border-collapse: collapse; font-size: 0.9375rem; /* API-1263: 14px -> 15px table data */ } .table-rfp thead th { padding: 0.75rem 1rem; background: linear-gradient(to right, var(--gov-navy), var(--gov-blue)); color: white; font-weight: 600; font-size: 0.875rem; /* API-1263: 12px -> 14px header labels */ text-transform: uppercase; letter-spacing: 0.05em; text-align: left; } .table-rfp tbody td { padding: 0.875rem 1rem; border-bottom: 1px solid var(--neutral-100); color: var(--neutral-700); } .table-rfp tbody tr:hover td { background: var(--neutral-50); } /* ============================================ PAGE LOAD ANIMATIONS ============================================ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .fade-in-up { animation: fadeInUp 0.6s ease-out forwards; opacity: 0; } .slide-in { animation: slideIn 0.5s ease-out forwards; opacity: 0; } /* Stagger delays for sequential card appearance */ .stagger-1 { animation-delay: 0s; } .stagger-2 { animation-delay: 0.1s; } .stagger-3 { animation-delay: 0.15s; } .stagger-4 { animation-delay: 0.2s; } .stagger-5 { animation-delay: 0.25s; } .stagger-6 { animation-delay: 0.3s; } /* ============================================ ICON BADGES - Gradient Circle Icons ============================================ */ .icon-badge { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--badge-color, #3b82f6) 0%, var(--badge-color-dark, #2563eb) 100%); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); transition: all 0.3s ease; flex-shrink: 0; } .icon-badge-sm { width: 36px; height: 36px; border-radius: 10px; } .icon-badge-lg { width: 56px; height: 56px; border-radius: 14px; } .hover-icon-badge:hover .icon-badge { transform: scale(1.1) rotate(5deg); box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4); } /* ============================================ METRIC CARDS - Professional KPI Cards ============================================ */ .metric-card { position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid #e2e8f0; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); border-radius: 12px; } /* Override Tailwind p-6 inside metric cards for consistent padding */ .metric-card.p-6 { padding: 1.5rem; } .metric-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--card-color, #3b82f6) 0%, var(--card-color-light, #60a5fa) 100%); opacity: 0; transition: opacity 0.3s ease; } .metric-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 6px 12px rgba(0, 0, 0, 0.04); border-color: var(--card-color, #3b82f6); } .metric-card:hover::before { opacity: 1; } .metric-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--neutral-600); margin-bottom: 8px; } .metric-value { font-size: 2rem; font-weight: 700; line-height: 1.2; color: #0f172a; margin-bottom: 8px; } /* Scale KPI stat values and icons inside metric cards */ .metric-card .text-3xl { font-size: 1.875rem; } .metric-card .w-12 { width: 3rem; height: 3rem; } /* ============================================ PAGE HEADER - White bg + accent border ============================================ */ .page-header-accent { background: white; border-left: 4px solid var(--header-accent, #3b82f6); border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); padding: 1.5rem; margin-bottom: 1.5rem; } /* ============================================ TREND INDICATORS - Pill badges with arrows ============================================ */ .trend-indicator { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; } .trend-up { background: #d1fae5; color: #065f46; } .trend-down { background: #fee2e2; color: #991b1b; } .trend-neutral { background: #e0e7ff; color: #3730a3; } /* ============================================ LOADING SHIMMER ============================================ */ .loading-shimmer { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } /* ============================================ CARD PRO - Section container with header ============================================ */ .card-pro { background: white; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); transition: all 0.3s ease; } .card-pro:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .card-header-pro { padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0; background: #fafbfc; border-radius: 12px 12px 0 0; } .card-body-pro { padding: 1.25rem; } /* ============================================ FORM THEME - Reusable form page styles ============================================ */ /* Form card wrapper */ .form-card-themed { background: white; border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); border: 1px solid #e2e8f0; padding: 1.5rem; } /* Form section divider */ .form-section-themed { border-bottom: 1px solid #e5e7eb; padding-bottom: 1rem; margin-bottom: 1rem; } .form-section-themed:last-child { border-bottom: none; margin-bottom: 0; } /* Form section header */ .form-section-title-themed { font-size: 0.875rem; font-weight: 600; color: #111827; margin-bottom: 0.75rem; display: flex; align-items: center; } .form-section-title-themed i { color: var(--neutral-500); margin-right: 0.5rem; font-size: 0.75rem; } /* Form labels */ .form-label-themed { display: block; font-size: 0.8125rem; font-weight: 500; color: #374151; margin-bottom: 0.25rem; } /* Form inputs (explicit class - used by client_form.html) */ .form-input-themed { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.875rem; line-height: 1.5; color: #111827; background-color: #f9fafb; transition: all 0.15s ease; } .form-input-themed:hover { border-color: #9ca3af; } .form-input-themed:focus { outline: none; border-color: var(--primary-600, #3B82A0); background-color: #ffffff; box-shadow: 0 0 0 3px rgba(59, 130, 160, 0.15); } .form-input-themed:disabled { background-color: #f3f4f6; color: var(--neutral-500); cursor: not-allowed; } .form-input-themed::placeholder { color: var(--neutral-500); font-size: 0.8125rem; } /* ---- Global input styling within form cards ---- */ /* Overrides inline Tailwind via higher specificity (.form-card-themed + element = 0,1,1 > .px-2 = 0,1,0) */ .form-card-themed input[type="text"], .form-card-themed input[type="email"], .form-card-themed input[type="url"], .form-card-themed input[type="tel"], .form-card-themed input[type="date"], .form-card-themed input[type="number"], .form-card-themed input[type="password"], .form-card-themed input[type="search"], .form-card-themed select, .form-card-themed textarea { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.875rem; line-height: 1.5; color: #111827; background-color: #f9fafb; transition: all 0.15s ease; } .form-card-themed input[type="text"]:hover, .form-card-themed input[type="email"]:hover, .form-card-themed input[type="url"]:hover, .form-card-themed input[type="tel"]:hover, .form-card-themed input[type="date"]:hover, .form-card-themed input[type="number"]:hover, .form-card-themed input[type="password"]:hover, .form-card-themed input[type="search"]:hover, .form-card-themed select:hover, .form-card-themed textarea:hover { border-color: #9ca3af; } .form-card-themed input[type="text"]:focus, .form-card-themed input[type="email"]:focus, .form-card-themed input[type="url"]:focus, .form-card-themed input[type="tel"]:focus, .form-card-themed input[type="date"]:focus, .form-card-themed input[type="number"]:focus, .form-card-themed input[type="password"]:focus, .form-card-themed input[type="search"]:focus, .form-card-themed select:focus, .form-card-themed textarea:focus { outline: none; border-color: var(--primary-600, #3B82A0); background-color: #ffffff; box-shadow: 0 0 0 3px rgba(59, 130, 160, 0.15); } /* Custom select arrow */ .form-card-themed select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.22 4.47a.75.75 0 0 1 1.06 0L6 7.19l2.72-2.72a.75.75 0 0 1 1.06 1.06L6.53 8.78a.75.75 0 0 1-1.06 0L2.22 5.53a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 0.75rem; padding-right: 2.25rem; } /* Disabled state */ .form-card-themed input:disabled, .form-card-themed select:disabled, .form-card-themed textarea:disabled { background-color: #f3f4f6; color: var(--neutral-500); cursor: not-allowed; } /* Placeholder styling */ .form-card-themed input::placeholder, .form-card-themed textarea::placeholder { color: var(--neutral-500); font-size: 0.8125rem; } /* Form labels within form cards */ .form-card-themed label { display: block; font-size: 0.8125rem; font-weight: 500; color: #374151; margin-bottom: 0.25rem; } /* Form action bar */ .form-actions-themed { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; } /* ============================================ ACCESSIBILITY ============================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .fade-in-up, .slide-in { opacity: 1 !important; animation: none !important; } } /* High contrast mode */ @media (prefers-contrast: high) { .btn-buzzrfp, .card-buzzrfp, .form-input-buzzrfp { border-width: 2px; } } /* ============================================ INTERACTIVE HIT AREA (API-1264, WCAG 2.5.5) Minimum ~44px tap target for STANDALONE controls (form fields, buttons, icon-only row/card actions). Inline text links inside a sentence/data cell keep their natural size (WCAG 2.5.8 inline exception) so dense grids don't balloon. Scoped to #content-wrapper so nav/sidebar chrome is unaffected. ============================================ */ /* Form controls */ #content-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), #content-wrapper select, #content-wrapper textarea { min-height: 44px; } /* Checkboxes / radios: larger, easier to tap (row spacing gives the rest) */ #content-wrapper input[type="checkbox"], #content-wrapper input[type="radio"] { min-width: 18px; min-height: 18px; } /* Standalone buttons. .btn-sm stays a deliberate compact/density exception; .ms-summary is the multi-select dropdown label (sized separately). */ #content-wrapper button:not(.btn-sm):not(.ms-summary), #content-wrapper .btn-rfp-primary, #content-wrapper .btn-rfp-secondary, #content-wrapper .btn-rfp-navy, #content-wrapper .btn-buzzrfp { min-height: 44px; } /* Icon-only action controls in tables / cards -> square 44px target. Shared .action-icon utility is available for any standalone icon control; the :has() rules auto-cover the common inline icon-link pattern with no template change (older browsers without :has() simply keep today's size). */ .action-icon, #content-wrapper td a:has(> i:only-child), #content-wrapper td button:has(> i:only-child), #content-wrapper .card-buzzrfp a:has(> i:only-child), #content-wrapper .card-buzzrfp button:has(> i:only-child) { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } /* Primary cell link — the single link in a table cell (e.g. row title/detail link) gets a >=44px vertical tap area (API-1264). Scoped to `> a:only-child` so links embedded mid-sentence or alongside other cell content are left at their natural inline size (WCAG 2.5.8 inline exception) and dense multi-link cells don't balloon. */ #content-wrapper td > a:only-child { display: flex; align-items: center; min-height: 44px; } /* ========================================================================== Date/time picker (flatpickr) — brand theming. flatpickr ships its own blue (#569ff7) for the selected day, the hovered day and the confirm button. Nothing overrode it, so every picker in the app rendered in a colour that appears nowhere else in the product; QA reported it as the wrong background colour on the opportunity Due Date field. Themed here rather than on that one page because flatpickr is used on TEN templates (opportunity edit/detail/list, my assignments, four reports, the manual capture form and the add-date modal). A page-local fix would have left nine pickers on the old colour and put the app right back where it started, in a way nobody would notice until QA looked at a different screen. Colours come from the theme's own tokens, so a tenant that rebrands gets a matching picker for free instead of a hardcoded blue. `.flatpickr-calendar` is appended to , OUTSIDE #content-wrapper, so these selectors are deliberately unscoped — a #content-wrapper prefix would match nothing. They are namespaced by flatpickr's own class names, which nothing else in this app uses. ========================================================================== */ /* Selected day, and the range endpoints. */ .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover { background: var(--gov-blue, #205493); border-color: var(--gov-blue, #205493); color: #fff; } /* The little arrow on a selected range edge inherits the fill via border. */ .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { box-shadow: -10px 0 0 var(--gov-blue, #205493); } /* Hover/focus on an unselected day — light tint, not the solid brand colour, so the actual selection stays unambiguous. */ .flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.nextMonthDay:hover, .flatpickr-day.prevMonthDay:hover { background: var(--primary-100, #E1F1F9); border-color: var(--primary-100, #E1F1F9); color: var(--gov-navy, #112E51); } /* Today gets an outline rather than a fill, so it never reads as selected. */ .flatpickr-day.today:not(.selected) { border-color: var(--gov-blue, #205493); } .flatpickr-day.today:not(.selected):hover { background: var(--primary-100, #E1F1F9); color: var(--gov-navy, #112E51); } /* Range middle. */ .flatpickr-day.inRange { background: var(--primary-50, #F0F8FC); border-color: var(--primary-50, #F0F8FC); box-shadow: -5px 0 0 var(--primary-50, #F0F8FC), 5px 0 0 var(--primary-50, #F0F8FC); color: var(--gov-navy, #112E51); } /* Month/year header + its arrows. */ .flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--gov-navy, #112E51); } .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--gov-blue, #205493); } /* Time column: keep the numbers on-brand and the AM/PM toggle legible. */ .flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus { background: var(--primary-50, #F0F8FC); } /* The confirmDate plugin's "Done" button — the control the ticket is about. Styled as a real primary button instead of plain text, so it reads as the thing that closes the picker. */ .flatpickr-calendar .flatpickr-confirm { background: var(--gov-blue, #205493); color: #fff; fill: #fff; font-weight: 600; border-radius: 0 0 5px 5px; /* A 44px tap target, matching the app's other primary actions. */ min-height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .15s ease; } .flatpickr-calendar .flatpickr-confirm:hover, .flatpickr-calendar .flatpickr-confirm:focus { background: var(--primary-700, #2F6B85); color: #fff; fill: #fff; } .flatpickr-calendar .flatpickr-confirm svg path { fill: #fff; } /* Keyboard focus must stay visible on a coloured button. */ .flatpickr-calendar .flatpickr-confirm:focus-visible { outline: 2px solid var(--gov-gold, #FBBF24); outline-offset: -3px; } /* ========================================================================== Pointer cursor on interactive controls. QA reported the Edit/Delete buttons on an award note showing the text caret instead of a hand. That is not a one-page defect: a scan of the templates found 1,594 of 1,605 interactive