// Compatibility patch for environments where window.fetch has only a getter (function() { try { var originalFetch = window.fetch; var fetchValue = originalFetch; Object.defineProperty(window, 'fetch', { get: function() { return fetchValue; }, set: function(val) { fetchValue = val; }, configurable: true, enumerable: true }); } catch (e) { console.warn("Unable to patch window.fetch property:", e); } })(); /* Scope all styles under #sas-app-root to prevent WordPress theme conflicts */ #sas-app-root { box-sizing: border-box !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; color: #0f172a !important; background-color: #ffffff !important; max-width: 780px !important; margin: 10px auto !important; border: 1px solid #e2e8f0 !important; border-radius: 24px !important; overflow: hidden !important; box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.1), 0 10px 15px -5px rgba(0, 0, 0, 0.05) !important; line-height: 1.5 !important; text-align: left !important; } #sas-app-root *, #sas-app-root *::before, #sas-app-root *::after { box-sizing: border-box !important; } /* IMMUNITY: Prevent WordPress themes from stretching or overriding SVGs */ #sas-app-root svg { display: inline-block !important; vertical-align: middle !important; max-width: none !important; width: auto; height: auto; box-sizing: content-box !important; } /* Brand Header */ #sas-app-root .sas-header { background-color: #155dfc !important; color: #ffffff !important; padding: 18px 24px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } #sas-app-root .sas-header-brand { display: flex !important; align-items: center !important; gap: 14px !important; } #sas-app-root .sas-header-icon { width: 44px !important; height: 44px !important; min-width: 44px !important; max-width: 44px !important; min-height: 44px !important; max-height: 44px !important; border-radius: 14px !important; background: rgba(255, 255, 255, 0.2) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } #sas-app-root .sas-header-icon svg { width: 24px !important; height: 24px !important; min-width: 24px !important; max-width: 24px !important; color: #ffffff !important; } #sas-app-root .sas-header-text h2 { margin: 0 !important; font-size: 1.2rem !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: #ffffff !important; line-height: 1.2 !important; } #sas-app-root .sas-header-text p { margin: 3px 0 0 0 !important; font-size: 0.8rem !important; color: rgba(255, 255, 255, 0.85) !important; font-weight: 400 !important; } #sas-app-root .sas-header-close { background: transparent !important; border: none !important; color: rgba(255, 255, 255, 0.85) !important; cursor: pointer !important; padding: 8px !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background 0.15s ease !important; } #sas-app-root .sas-header-close:hover { background: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; } /* Step Progress Stepper */ #sas-app-root .sas-stepper { background-color: #f8fafc !important; border-bottom: 1px solid #f1f5f9 !important; padding: 13px 24px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; font-size: 0.82rem !important; } #sas-app-root .sas-step-node { display: flex !important; align-items: center !important; gap: 8px !important; } #sas-app-root .sas-step-num { width: 24px !important; height: 24px !important; min-width: 24px !important; max-width: 24px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0.75rem !important; font-weight: 700 !important; background-color: #e2e8f0 !important; color: #64748b !important; } #sas-app-root .sas-step-node.active .sas-step-num { background-color: #155dfc !important; color: #ffffff !important; } #sas-app-root .sas-step-node.active .sas-step-text { color: #155dfc !important; font-weight: 700 !important; } #sas-app-root .sas-step-node.completed .sas-step-num { background-color: #dbeafe !important; color: #1d4ed8 !important; } #sas-app-root .sas-step-node.completed .sas-step-text { color: #1e293b !important; font-weight: 600 !important; } #sas-app-root .sas-step-text { font-weight: 600 !important; color: #64748b !important; } #sas-app-root .sas-step-arrow { color: #cbd5e1 !important; font-weight: bold !important; margin: 0 4px !important; user-select: none !important; } /* Content Padding */ #sas-app-root .sas-body { padding: 28px 24px !important; } #sas-app-root .sas-panel { display: block !important; } #sas-app-root .sas-panel.hidden { display: none !important; } #sas-app-root .sas-step-title { font-size: 1.25rem !important; font-weight: 700 !important; margin-top: 0 !important; margin-bottom: 6px !important; color: #0f172a !important; letter-spacing: -0.02em !important; } #sas-app-root .sas-step-subtitle { font-size: 0.875rem !important; color: #475569 !important; margin-top: 0 !important; margin-bottom: 22px !important; line-height: 1.45 !important; } /* Forms & Inputs */ #sas-app-root .sas-form-group { margin-bottom: 20px !important; } #sas-app-root .sas-label { display: block !important; font-size: 0.75rem !important; font-weight: 700 !important; margin-bottom: 8px !important; color: #334155 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } #sas-app-root .sas-select-wrap { position: relative !important; width: 100% !important; } #sas-app-root .sas-select { width: 100% !important; padding: 13px 40px 13px 16px !important; border: 1px solid #cbd5e1 !important; border-radius: 14px !important; font-size: 0.95rem !important; background-color: #ffffff !important; color: #0f172a !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; cursor: pointer !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; line-height: normal !important; } #sas-app-root .sas-select:focus, #sas-app-root .sas-input:focus { outline: none !important; border-color: #155dfc !important; box-shadow: 0 0 0 3px rgba(21, 93, 252, 0.15) !important; } #sas-app-root .sas-chevron { position: absolute !important; right: 14px !important; top: 50% !important; transform: translateY(-50%) !important; pointer-events: none !important; color: #64748b !important; width: 18px !important; height: 18px !important; min-width: 18px !important; max-width: 18px !important; } #sas-app-root .sas-grid-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; } @media (max-width: 540px) { #sas-app-root .sas-grid-2 { grid-template-columns: 1fr !important; } } #sas-app-root .sas-input { width: 100% !important; padding: 13px 16px !important; border: 1px solid #cbd5e1 !important; border-radius: 14px !important; font-size: 0.95rem !important; background-color: #ffffff !important; color: #0f172a !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; line-height: normal !important; } #sas-app-root .sas-input-bold { font-weight: 700 !important; font-size: 1.05rem !important; } #sas-app-root .sas-input-helper { font-size: 0.75rem !important; color: #64748b !important; margin-top: 6px !important; margin-bottom: 0 !important; } #sas-app-root .sas-error-text { color: #dc2626 !important; font-size: 0.75rem !important; margin-top: 6px !important; font-weight: 500 !important; display: block !important; } #sas-app-root .sas-error-text.hidden { display: none !important; } #sas-app-root .sas-nav { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-top: 24px !important; padding-top: 20px !important; border-top: 1px solid #f1f5f9 !important; } #sas-app-root .sas-nav-end { justify-content: flex-end !important; } #sas-app-root .sas-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 12px 22px !important; font-size: 0.95rem !important; font-weight: 700 !important; border-radius: 14px !important; cursor: pointer !important; transition: all 0.15s ease !important; text-decoration: none !important; border: none !important; gap: 6px !important; line-height: normal !important; } #sas-app-root .sas-btn-primary { background-color: #155dfc !important; color: #ffffff !important; box-shadow: 0 1px 2px rgba(21, 93, 252, 0.2) !important; } #sas-app-root .sas-btn-primary:hover { background-color: #124ecd !important; } #sas-app-root .sas-btn-secondary { background-color: #ffffff !important; color: #334155 !important; border: 1px solid #cbd5e1 !important; } #sas-app-root .sas-btn-secondary:hover { background-color: #f8fafc !important; } #sas-app-root .sas-btn-full { width: 100% !important; } /* Visual Tile Grids (Steps 2 & 3) */ #sas-app-root .sas-tile-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; margin-bottom: 20px !important; } @media (max-width: 540px) { #sas-app-root .sas-tile-grid { grid-template-columns: 1fr !important; } } #sas-app-root .sas-tile { border: 2px solid #e2e8f0 !important; border-radius: 16px !important; padding: 16px !important; cursor: pointer !important; background-color: #ffffff !important; transition: all 0.2s ease !important; text-align: left !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; min-height: 94px !important; } #sas-app-root .sas-tile:hover { border-color: #155dfc !important; background-color: rgba(21, 93, 252, 0.03) !important; } #sas-app-root .sas-tile.selected { border-color: #155dfc !important; background-color: #eff6ff !important; box-shadow: 0 0 0 3px rgba(21, 93, 252, 0.15) !important; } #sas-app-root .sas-tile-title { font-weight: 700 !important; font-size: 0.95rem !important; color: #0f172a !important; margin-bottom: 4px !important; line-height: 1.3 !important; } #sas-app-root .sas-tile-sub { font-size: 0.775rem !important; color: #64748b !important; line-height: 1.4 !important; } #sas-app-root .sas-timing-grid { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-bottom: 20px !important; } /* Results step styling */ #sas-app-root .sas-status-banner { border-radius: 14px !important; padding: 16px !important; margin-bottom: 20px !important; display: flex !important; gap: 12px !important; align-items: flex-start !important; border: 1px solid transparent !important; } #sas-app-root .sas-banner-danger { background-color: #fef2f2 !important; border-color: #fca5a5 !important; color: #991b1b !important; } #sas-app-root .sas-banner-caution { background-color: #fef3e2 !important; border-color: #fbd38d !important; color: #92580a !important; } #sas-app-root .sas-banner-safe { background-color: #e6f4ec !important; border-color: #a7f3d0 !important; color: #0e7c3a !important; } #sas-app-root .sas-banner-title { font-weight: 700 !important; font-size: 1rem !important; margin-top: 0 !important; margin-bottom: 4px !important; } #sas-app-root .sas-banner-desc { font-size: 0.85rem !important; margin: 0 !important; line-height: 1.4 !important; } /* Metric Card Grid */ #sas-app-root .sas-metrics { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 10px !important; margin-bottom: 20px !important; } @media (max-width: 480px) { #sas-app-root .sas-metrics { grid-template-columns: 1fr !important; } } #sas-app-root .sas-metric-card { border: 1px solid #e2e8f0 !important; background-color: #f8fafc !important; padding: 12px 10px !important; border-radius: 12px !important; text-align: center !important; } #sas-app-root .sas-metric-label { font-size: 0.7rem !important; color: #64748b !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin-bottom: 4px !important; font-weight: 700 !important; } #sas-app-root .sas-metric-val { font-size: 1.25rem !important; font-weight: 800 !important; color: #0f172a !important; } #sas-app-root .text-red { color: #dc2626 !important; } #sas-app-root .text-green { color: #059669 !important; } /* Visual Gauge Chart */ #sas-app-root .sas-gauge-card { border: 1px solid #e2e8f0 !important; background-color: #ffffff !important; padding: 16px !important; border-radius: 16px !important; margin-bottom: 20px !important; text-align: center !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; } #sas-app-root .sas-gauge-label { font-size: 0.725rem !important; color: #64748b !important; text-transform: uppercase !important; font-weight: 700 !important; letter-spacing: 0.05em !important; margin-bottom: 4px !important; } #sas-app-root .sas-gauge-wrapper { position: relative !important; width: 100% !important; height: 140px !important; display: flex !important; align-items: center !important; justify-content: center !important; } #sas-app-root .sas-gauge-center { position: absolute !important; bottom: 8% !important; text-align: center !important; } #sas-app-root .sas-gauge-percent { font-size: 1.875rem !important; font-weight: 900 !important; color: #0f172a !important; line-height: 1 !important; } #sas-app-root .sas-gauge-status { font-size: 0.625rem !important; font-weight: 700 !important; color: #64748b !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin-top: 4px !important; } /* Pell Tier Bar */ #sas-app-root .sas-tier-section { margin-bottom: 24px !important; } #sas-app-root .sas-section-lbl { font-size: 0.75rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: #64748b !important; margin-bottom: 8px !important; } #sas-app-root .sas-tier-bar { display: flex !important; gap: 6px !important; margin-bottom: 8px !important; } #sas-app-root .sas-tier-node { flex: 1 !important; border: 1px solid #e2e8f0 !important; background-color: #f8fafc !important; padding: 8px 4px !important; border-radius: 10px !important; text-align: center !important; font-size: 0.725rem !important; position: relative !important; min-height: 64px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } #sas-app-root .sas-tier-node.current { border: 2px solid #155dfc !important; background-color: #eff6ff !important; } #sas-app-root .sas-tier-node.projected-lower { border: 2px solid #dc2626 !important; background-color: #fef2f2 !important; } #sas-app-root .sas-tier-node.projected-higher { border: 2px solid #059669 !important; background-color: #ecfdf5 !important; } #sas-app-root .sas-tier-badge { display: inline-block !important; font-size: 0.6rem !important; font-weight: 700 !important; padding: 1px 4px !important; border-radius: 3px !important; margin-top: 4px !important; } #sas-app-root .badge-blue { background-color: #155dfc !important; color: #ffffff !important; } #sas-app-root .badge-red { background-color: #dc2626 !important; color: #ffffff !important; } #sas-app-root .badge-green { background-color: #059669 !important; color: #ffffff !important; } /* SAP Block */ #sas-app-root .sas-sap-block { background-color: #fef3e2 !important; border: 1px solid #fbd38d !important; border-left: 4px solid #ea580c !important; padding: 14px !important; border-radius: 10px !important; margin-bottom: 20px !important; } #sas-app-root .sas-sap-title { font-size: 0.85rem !important; font-weight: 700 !important; color: #92580a !important; margin-top: 0 !important; margin-bottom: 4px !important; } #sas-app-root .sas-sap-desc { font-size: 0.775rem !important; margin: 0 !important; line-height: 1.4 !important; color: #7c2d12 !important; } /* Next steps */ #sas-app-root .sas-steps-block { margin-bottom: 24px !important; } #sas-app-root .sas-steps-list { margin: 0 !important; padding-left: 18px !important; } #sas-app-root .sas-steps-item { font-size: 0.8rem !important; color: #334155 !important; margin-bottom: 8px !important; line-height: 1.4 !important; } /* Action Buttons Stack */ #sas-app-root .sas-action-stack { display: flex !important; flex-direction: column !important; gap: 10px !important; padding-top: 20px !important; border-top: 1px solid #f1f5f9 !important; } #sas-app-root .sas-btn-print { background-color: #10b981 !important; color: #ffffff !important; } #sas-app-root .sas-btn-print:hover { background-color: #059669 !important; } #sas-app-root .sas-btn-share { background-color: #155dfc !important; color: #ffffff !important; } #sas-app-root .sas-btn-share:hover { background-color: #124ecd !important; } #sas-app-root .sas-btn-appeal { background-color: rgba(21, 93, 252, 0.08) !important; color: #155dfc !important; border: 1px solid rgba(21, 93, 252, 0.2) !important; } #sas-app-root .sas-btn-appeal:hover { background-color: rgba(21, 93, 252, 0.15) !important; } /* Footer */ #sas-app-root .sas-footer { background-color: #f8fafc !important; padding: 16px 24px !important; border-top: 1px solid #f1f5f9 !important; font-size: 0.7rem !important; color: #64748b !important; line-height: 1.4 !important; text-align: center !important; } /* Modal styles */ .sas-modal-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background-color: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(2px) !important; display: none; align-items: center !important; justify-content: center !important; padding: 16px !important; z-index: 99999 !important; } .sas-modal { background-color: #ffffff !important; border-radius: 20px !important; max-width: 440px !important; width: 100% !important; border: 1px solid #e2e8f0 !important; overflow: hidden !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; position: relative !important; } .sas-modal-header { padding: 24px 24px 12px 24px !important; position: relative !important; } .sas-modal-close { position: absolute !important; top: 16px !important; right: 16px !important; cursor: pointer !important; background: none !important; border: none !important; color: #94a3b8 !important; padding: 4px !important; } .sas-modal-close:hover { color: #334155 !important; } .sas-modal-body { padding: 0 24px 24px 24px !important; } .sas-modal-title { font-size: 1.15rem !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 0 6px 0 !important; } .sas-modal-sub { font-size: 0.775rem !important; color: #64748b !important; margin: 0 !important; } .sas-link-btn { background: none !important; border: none !important; color: #155dfc !important; font-size: 0.775rem !important; font-weight: 600 !important; text-decoration: underline !important; cursor: pointer !important; padding: 0 !important; } /* Report Modal Preview */ .sas-report-modal-content { background-color: #ffffff !important; border-radius: 20px !important; max-width: 760px !important; width: 100% !important; max-height: 90vh !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; } .sas-report-modal-body { padding: 20px !important; overflow-y: auto !important; background-color: #f8fafc !important; flex-grow: 1 !important; } /* Print Styles */ #sas-print-container { display: none; } #sas-print-frame { display: none; } @media print { #sas-print-frame { display: none !important; } html, body { background: #ffffff !important; color: #0f172a !important; height: auto !important; min-height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } body.sas-print-report-active > *:not(#sas-print-container) { display: none !important; } body.sas-print-report-active #sas-print-container { display: block !important; position: static !important; width: 100% !important; max-width: 800px !important; margin: 0 auto !important; padding: 10px 15px !important; background: #ffffff !important; } .no-print, .sas-no-print, .sas-modal-overlay, #sas-report-modal, #sas-gate-modal, header, footer, nav, aside, .site-header, .site-footer, #masthead, #colophon, #wpadminbar { display: none !important; } * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .report-wrap { width: 100%; max-width: 800px; margin: 0 auto; } .rep-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 10px; border-bottom: 2px solid #1a56db; margin-bottom: 12px; } .rep-brand { display: flex; align-items: center; gap: 10px; } .rep-logo { width: 34px; height: 34px; background: #1a56db; color: #ffffff; border-radius: 6px; display: flex; align-items: center; justify-content: center; } .rep-brand-title { font-size: 14pt; font-weight: 800; color: #0f172a; margin: 0; letter-spacing: -0.02em; line-height: 1.1; } .rep-brand-sub { font-size: 7.5pt; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; } .rep-meta { text-align: right; } .rep-badge { display: inline-block; background: #e0e7ff; color: #1e40af; font-size: 7.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 4px; margin-bottom: 3px; } .rep-date { font-size: 8pt; color: #475569; font-weight: 500; } .rep-id { font-size: 7.5pt; color: #94a3b8; font-family: monospace; } .rep-title-block { margin-bottom: 11px; } .rep-title { font-size: 12.5pt; font-weight: 800; color: #0f172a; margin: 0 0 3px 0; letter-spacing: -0.01em; } .rep-subtitle { font-size: 8pt; color: #64748b; margin: 0; } .section-box { border: 1px solid #e2e8f0; border-radius: 6px; padding: 9px 12px; margin-bottom: 10px; background: #ffffff; page-break-inside: avoid; } .section-title { font-size: 7.5pt; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: #475569; margin-bottom: 7px; display: flex; align-items: center; justify-content: space-between; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px 12px; } .param-item { font-size: 8pt; } .param-label { color: #64748b; font-size: 7pt; font-weight: 600; text-transform: uppercase; margin-bottom: 1px; } .param-val { color: #0f172a; font-weight: 700; font-size: 8.5pt; } .kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; page-break-inside: avoid; } .kpi-card { border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 6px; padding: 8px 10px; text-align: center; } .kpi-card.kpi-highlight-loss { border-color: #fca5a5; background: #fef2f2; } .kpi-card.kpi-highlight-ok { border-color: #86efac; background: #f0fdf4; } .kpi-lbl { font-size: 7pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; margin-bottom: 2px; } .kpi-val { font-size: 14pt; font-weight: 800; color: #0f172a; line-height: 1.1; } .metric-val-red { color: #dc2626 !important; } .metric-val-green { color: #16a34a !important; } .kpi-sub { font-size: 7pt; color: #64748b; margin-top: 2px; font-weight: 500; } .banner-box { border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; border-left: 4px solid; page-break-inside: avoid; } .banner-danger { background: #fef2f2; border-color: #dc2626; color: #991b1b; } .banner-caution { background: #fffbeb; border-color: #d97706; color: #92400e; } .banner-safe { background: #f0fdf4; border-color: #16a34a; color: #166534; } .banner-head { font-size: 9pt; font-weight: 800; margin-bottom: 2px; } .banner-text { font-size: 8pt; line-height: 1.35; margin: 0; } .tier-tbl { width: 100%; border-collapse: collapse; font-size: 7.5pt; margin-top: 3px; } .tier-tbl th { background: #f1f5f9; color: #334155; font-weight: 700; text-align: left; padding: 4px 8px; font-size: 7pt; text-transform: uppercase; border-bottom: 1px solid #cbd5e1; } .tier-tbl td { padding: 4px 8px; border-bottom: 1px solid #e2e8f0; color: #334155; } .tier-tbl tr.row-cur { background: #eff6ff; } .tier-tbl tr.row-proj-loss { background: #fef2f2; } .tier-tbl tr.row-proj-gain { background: #f0fdf4; } .status-badge { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 6.5pt; font-weight: 700; } .badge-blue { background: #1a56db; color: #ffffff; } .badge-red { background: #dc2626; color: #ffffff; } .badge-green { background: #16a34a; color: #ffffff; } .sap-alert-box { background: #fef3e2; border: 1px solid #fed7aa; border-left: 4px solid #ea580c; border-radius: 6px; padding: 8px 11px; margin-bottom: 10px; font-size: 7.5pt; color: #7c2d12; line-height: 1.35; page-break-inside: avoid; } .sap-alert-title { font-weight: 800; font-size: 8pt; margin-bottom: 2px; } .action-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; } .action-item { display: flex; align-items: flex-start; gap: 6px; font-size: 7.5pt; color: #334155; line-height: 1.3; } .chk-box { width: 10px; height: 10px; border: 1.5px solid #64748b; border-radius: 2px; margin-top: 1px; flex-shrink: 0; } .sign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #cbd5e1; margin-bottom: 8px; page-break-inside: avoid; } .sign-line { border-bottom: 1px solid #475569; height: 18px; margin-bottom: 3px; } .sign-lbls { display: flex; justify-content: space-between; font-size: 6.8pt; color: #64748b; font-weight: 600; text-transform: uppercase; } .rep-footer { border-top: 1px solid #e2e8f0; padding-top: 6px; font-size: 6.5pt; color: #64748b; line-height: 1.3; text-align: center; } } let currentStep = 1; let selectedChange = ''; let selectedTiming = ''; function goToStep(stepNum) { currentStep = stepNum; // Hide all panels document.querySelectorAll('#sas-app-root .sas-panel').forEach(function(panel) { panel.classList.add('hidden'); }); // Show target panel const target = document.getElementById('sas-step-' + stepNum); if (target) { target.classList.remove('hidden'); } // Update progress tracker for (let i = 1; i <= 4; i++) { const node = document.getElementById('step-node-' + i); if (node) { node.classList.remove('active', 'completed'); if (i === stepNum) { node.classList.add('active'); } else if (i < stepNum) { node.classList.add('completed'); } } } // Scroll container into view gently if needed try { const root = document.getElementById('sas-app-root'); if (root && typeof root.scrollIntoView === 'function') { root.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } } catch (e) {} } // STEP 1 VALIDATION & ADVANCEMENT function submitStep1() { let isValid = true; const aidSelect = document.getElementById('embed-aid-type'); const annualInput = document.getElementById('embed-annual-aid'); const creditsSelect = document.getElementById('embed-credits'); const gpaSelect = document.getElementById('embed-gpa'); const errAid = document.getElementById('err-aid-type'); const errAnnual = document.getElementById('err-annual-aid'); const errCredits = document.getElementById('err-credits'); const errGpa = document.getElementById('err-gpa'); // Reset errors [errAid, errAnnual, errCredits, errGpa].forEach(function(el) { if (el) { el.classList.add('hidden'); el.innerText = ''; } }); if (!aidSelect || !aidSelect.value) { if (errAid) { errAid.classList.remove('hidden'); errAid.innerText = 'Please select your primary financial aid type.'; } isValid = false; } const annualVal = parseFloat(annualInput ? annualInput.value : ''); if (!annualInput || !annualInput.value) { if (errAnnual) { errAnnual.classList.remove('hidden'); errAnnual.innerText = 'Please enter your annual award amount.'; } isValid = false; } else if (isNaN(annualVal) || annualVal 30000) { if (errAnnual) { errAnnual.classList.remove('hidden'); errAnnual.innerText = 'Award amount must be between $500 and $30,000.'; } isValid = false; } if (!creditsSelect || !creditsSelect.value) { if (errCredits) { errCredits.classList.remove('hidden'); errCredits.innerText = 'Please select your currently enrolled credits.'; } isValid = false; } if (!gpaSelect || !gpaSelect.value) { if (errGpa) { errGpa.classList.remove('hidden'); errGpa.innerText = 'Please select your cumulative GPA.'; } isValid = false; } if (isValid) { goToStep(2); } } // STEP 2 SELECTION function selectTile2(val, el) { selectedChange = val; document.querySelectorAll('#sas-step-2 .sas-tile').forEach(function(tile) { tile.classList.remove('selected'); }); if (el) el.classList.add('selected'); const err = document.getElementById('err-step-2'); if (err) err.classList.add('hidden'); } function submitStep2() { if (!selectedChange) { const err = document.getElementById('err-step-2'); if (err) { err.classList.remove('hidden'); err.innerText = 'Please select a change option to proceed.'; } return; } goToStep(3); } // STEP 3 SELECTION function selectTile3(val, el) { selectedTiming = val; document.querySelectorAll('#sas-step-3 .sas-tile').forEach(function(tile) { tile.classList.remove('selected'); }); if (el) el.classList.add('selected'); const err = document.getElementById('err-step-3'); if (err) err.classList.add('hidden'); } function submitStep3() { if (!selectedTiming) { const err = document.getElementById('err-step-3'); if (err) { err.classList.remove('hidden'); err.innerText = 'Please select the timing of your change.'; } return; } // Open email gate modal const gateModal = document.getElementById('sas-gate-modal'); if (gateModal) { gateModal.style.display = 'flex'; } else { computeResults(); goToStep(4); } } function closeGateModal(proceedToResults) { const gateModal = document.getElementById('sas-gate-modal'); if (gateModal) { gateModal.style.display = 'none'; } if (proceedToResults) { computeResults(); goToStep(4); } } // CALCULATE RESULTS (STEP 4) function computeResults() { const elAidType = document.getElementById('embed-aid-type'); const elAnnualAid = document.getElementById('embed-annual-aid'); const elCredits = document.getElementById('embed-credits'); const elGpa = document.getElementById('embed-gpa'); const aidType = elAidType ? elAidType.value : 'pell_only'; const annualVal = parseFloat(elAnnualAid ? elAnnualAid.value : '') || 7395; const semesterAid = annualVal / 2; const currentCreditsOption = elCredits ? elCredits.value : '12'; let currentCreditsNum = 12; if (currentCreditsOption === '15') currentCreditsNum = 15; else if (currentCreditsOption === '12') currentCreditsNum = 12; else if (currentCreditsOption === '9') currentCreditsNum = 9; else if (currentCreditsOption === '6') currentCreditsNum = 6; else if (currentCreditsOption === '3') currentCreditsNum = 3; let newCreditsNum = currentCreditsNum; if (selectedChange === 'drop_3') newCreditsNum = Math.max(0, currentCreditsNum - 3); else if (selectedChange === 'drop_4') newCreditsNum = Math.max(0, currentCreditsNum - 4); else if (selectedChange === 'full_withdraw') newCreditsNum = 0; else if (selectedChange === 'go_part_time') newCreditsNum = Math.min(currentCreditsNum, 5); else if (selectedChange === 'late_withdraw') newCreditsNum = currentCreditsNum; else if (selectedChange === 'add_course') newCreditsNum = currentCreditsNum + 3; function getTier(cr) { if (cr >= 12) return 1.0; if (cr >= 9) return 0.75; if (cr >= 6) return 0.50; return 0.0; } const currentTierPct = getTier(currentCreditsNum); let newTierPct = getTier(newCreditsNum); const aidBefore = semesterAid * currentTierPct; let aidAfter = aidBefore; let dollarLoss = 0; let potentialIncrease = false; if (selectedChange === 'add_course') { if (currentCreditsNum = 12) { potentialIncrease = true; aidAfter = semesterAid * 1.0; dollarLoss = 0; } else { aidAfter = semesterAid * newTierPct; dollarLoss = 0; } } else if (selectedTiming === 'before_deadline') { aidAfter = semesterAid * newTierPct; dollarLoss = aidBefore - aidAfter; } else if (selectedTiming === 'after_before_60') { aidAfter = semesterAid * newTierPct; dollarLoss = aidBefore - aidAfter; } else if (selectedTiming === 'after_60') { aidAfter = aidBefore; dollarLoss = 0; } if (dollarLoss 0 ? (dollarLoss / aidBefore) : 0; if (lossRatio > 0.40 || dollarLoss >= 1500) severity = 'danger'; else if (dollarLoss > 0) severity = 'caution'; if (selectedChange === 'late_withdraw') severity = 'danger'; const gpaVal = elGpa ? elGpa.value : '2.50_2.99'; if (gpaVal === 'below_1_5') { severity = 'danger'; } else if (gpaVal === 'between_1_5') { if (severity === 'safe') severity = 'caution'; else if (severity === 'caution') severity = 'danger'; } const isLateWithdrawal = selectedChange === 'late_withdraw' || selectedTiming === 'after_60'; const isTitleIVRisk = isLateWithdrawal && (selectedChange === 'full_withdraw' || selectedChange === 'late_withdraw' || selectedChange === 'go_part_time'); function formatMoney(n) { return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(n); } // 1. Status Banner const banner = document.getElementById('res-banner'); const bannerTitle = document.getElementById('res-banner-title'); const bannerDesc = document.getElementById('res-banner-desc'); const bannerIcon = document.getElementById('res-icon'); if (banner && bannerTitle && bannerDesc && bannerIcon) { banner.className = 'sas-status-banner'; if (severity === 'danger') { banner.classList.add('sas-banner-danger'); bannerTitle.innerText = 'High Risk Schedule Change'; bannerIcon.innerHTML = ''; if (gpaVal === 'below_1_5') { bannerDesc.innerText = 'Critical SAP Alert: Your GPA is below 1.5. You are in immediate danger of complete financial aid suspension. Dropping or withdrawing courses will exacerbate academic standing issues.'; } else if (isTitleIVRisk) { bannerDesc.innerText = 'Late Withdrawal Danger: This change triggers federal Return of Title IV rules. You may be required to repay a portion of unearned aid back to the college.'; } else { bannerDesc.innerText = 'Major Aid Loss Projected: You stand to lose ' + formatMoney(dollarLoss) + ' in funding this semester. This represents over 40% of your term disbursement.'; } } else if (severity === 'caution') { banner.classList.add('sas-banner-caution'); bannerTitle.innerText = 'Caution Recommended'; bannerIcon.innerHTML = ''; if (gpaVal === 'between_1_5') { bannerDesc.innerText = 'SAP At Risk: Your GPA is between 1.5 and 1.99. Dropping below full-time status could trigger an academic warning, impacting cumulative completion rate thresholds.'; } else { bannerDesc.innerText = 'Moderate Aid Recalculation: Dropping credits will trigger a Pell Grant reduction of ' + formatMoney(dollarLoss) + ' due to tier adjustments.'; } } else { banner.classList.add('sas-banner-safe'); bannerTitle.innerText = 'Safe Schedule Adjustment'; bannerIcon.innerHTML = ''; if (potentialIncrease) { bannerDesc.innerText = 'Funding Increase Opportunity: Your proposed course addition will elevate your enrollment tier to full-time (12+ credits), qualifying you for maximum Pell Grant disbursement!'; } else { bannerDesc.innerText = 'No Credit-Hour Tier Impact: This schedule adjustment does not cross any Pell Grant funding thresholds. Your estimated grant disbursement remains unaffected.'; } } } // 2. Metrics Cards const elBefore = document.getElementById('res-metric-before'); const elAfter = document.getElementById('res-metric-after'); const elLoss = document.getElementById('res-metric-loss'); if (elBefore) elBefore.innerText = formatMoney(aidBefore); if (elAfter) elAfter.innerText = formatMoney(aidAfter); if (elLoss) { elLoss.innerText = formatMoney(dollarLoss); elLoss.className = dollarLoss > 0 ? 'sas-metric-val text-red' : 'sas-metric-val text-green'; } // 2.5 Visual Gauge Chart const percentRemaining = aidBefore > 0 ? Math.round((aidAfter / aidBefore) * 100) : (aidAfter > 0 ? 100 : 0); const clampedPercent = Math.min(100, Math.max(0, percentRemaining)); const offset = 220 - (220 * clampedPercent / 100); const fg = document.getElementById('gauge-foreground'); if (fg) { fg.setAttribute('stroke-dashoffset', offset); let color = '#059669'; if (severity === 'danger') color = '#dc2626'; else if (severity === 'caution') color = '#d97706'; fg.setAttribute('stroke', color); } const gaugePct = document.getElementById('gauge-percent-text'); const gaugeStat = document.getElementById('gauge-status-text'); if (gaugePct) gaugePct.innerText = percentRemaining + '%'; if (gaugeStat) gaugeStat.innerText = percentRemaining === 100 ? 'Fully Retained' : (percentRemaining === 0 ? 'Fully Lost' : 'Remaining'); // 3. Pell Tier Bar const tiers = [0, 50, 75, 100]; const curTierVal = currentTierPct * 100; const nTierVal = newTierPct * 100; tiers.forEach(function(t) { const node = document.getElementById('tier-node-' + t); const bNode = document.getElementById('badge-' + t); if (!node || !bNode) return; node.className = 'sas-tier-node'; bNode.className = ''; bNode.innerHTML = ''; if (t === curTierVal && t === nTierVal) { node.classList.add('current'); bNode.className = 'sas-tier-badge badge-blue'; bNode.innerText = 'Current & Projected'; } else if (t === curTierVal) { node.classList.add('current'); bNode.className = 'sas-tier-badge badge-blue'; bNode.innerText = 'Current'; } else if (t === nTierVal) { if (nTierVal < curTierVal) { node.classList.add('projected-lower'); bNode.className = 'sas-tier-badge badge-red'; bNode.innerText = 'Projected'; } else { node.classList.add('projected-higher'); bNode.className = 'sas-tier-badge badge-green'; bNode.innerText = 'Projected'; } } }); // 4. SAP Warning Block const sapBlock = document.getElementById('res-sap-warning'); const sapDesc = document.getElementById('res-sap-desc'); if (sapBlock && sapDesc) { if (gpaVal === 'below_1_5' || gpaVal === 'between_1_5') { sapBlock.classList.remove('hidden'); sapDesc.innerText = gpaVal === 'below_1_5' ? 'Critical Standing Alert: With a GPA below 1.5, you are in immediate danger of failing SAP standards. A complete suspension of aid eligibility is highly probable. Speak to counselor immediately.' : 'Completion Rate Risk: Your GPA of 1.5-1.99 is on the borderline. Under SAP, you must maintain a 2.0 cumulative GPA and a 67% course completion rate. Dropping courses damages your completion ratio.'; } else { sapBlock.classList.add('hidden'); } } // 5. Recommended Actions const stepsList = document.getElementById('res-steps-list'); if (stepsList) { stepsList.innerHTML = ''; const actions = [ 'Schedule an urgent session with your financial aid advisor to review this calculation before making any formal changes in the enrollment portal.' ]; if (gpaVal === 'below_1_5' || gpaVal === 'between_1_5') { actions.push('Consult an academic advisor to map out an Academic Recovery Plan and register for campus tutoring services.'); } if (isTitleIVRisk) { actions.push('Ask the Financial Aid Office to execute a formal Return of Title IV (R2T4) calculation to determine the exact cash balance you might owe back to the registrar.'); } if (selectedChange === 'drop_3' || selectedChange === 'drop_4') { actions.push('Check if you can switch to another section, request an incomplete, or perform an academic course substitution instead of dropping.'); actions.push('Confirm with your college registrar if dropping results in a "W" on your transcript, and confirm the census date.'); } else if (selectedChange === 'add_course') { actions.push('Verify that your newly added course falls directly within your declared major or degree program requirements, otherwise it may not qualify for federal aid.'); } actions.push('Check if any auxiliary services (such as campus housing, athletic eligibility, scholarship guidelines, or parent health insurance) require full-time status.'); actions.forEach(function(act) { const li = document.createElement('li'); li.className = 'sas-steps-item'; li.innerText = act; stepsList.appendChild(li); }); } } // RESET SIMULATOR function resetSimulator() { selectedChange = ''; selectedTiming = ''; const elAid = document.getElementById('embed-aid-type'); const elAnnual = document.getElementById('embed-annual-aid'); const elCredits = document.getElementById('embed-credits'); const elGpa = document.getElementById('embed-gpa'); if (elAid) elAid.value = 'pell_only'; if (elAnnual) elAnnual.value = '7395'; if (elCredits) elCredits.value = '12'; if (elGpa) elGpa.value = '2.50_2.99'; document.querySelectorAll('#sas-step-2 .sas-tile, #sas-step-3 .sas-tile').forEach(function(t) { t.classList.remove('selected'); }); closeGateModal(false); closeReportModal(); goToStep(1); } // SHARE SIMULATION function shareResult() { const elAid = document.getElementById('embed-aid-type'); const elAnnual = document.getElementById('embed-annual-aid'); const elCredits = document.getElementById('embed-credits'); const elGpa = document.getElementById('embed-gpa'); const params = new URLSearchParams(); if (elAid) params.set('aidType', elAid.value); if (elAnnual) params.set('annualAid', elAnnual.value); if (elCredits) params.set('currentCredits', elCredits.value); if (elGpa) params.set('gpa', elGpa.value); if (selectedChange) params.set('changeOption', selectedChange); if (selectedTiming) params.set('timingOption', selectedTiming); params.set('shared', 'true'); const shareUrl = window.location.origin + window.location.pathname + '?' + params.toString(); navigator.clipboard.writeText(shareUrl).then(function() { const btnText = document.getElementById('share-btn-text'); if (btnText) { btnText.innerText = 'Link copied to clipboard!'; setTimeout(function() { btnText.innerText = 'Share simulation with advisor'; }, 2000); } }).catch(function(err) { console.warn('Share copy error:', err); }); } // REPORT DOCUMENT GENERATION & PRINTING const PRINT_REPORT_STYLES_JS = ` .report-wrap { width: 100%; max-width: 800px; margin: 0 auto; } .rep-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 10px; border-bottom: 2px solid #1a56db; margin-bottom: 12px; } .rep-brand { display: flex; align-items: center; gap: 10px; } .rep-logo { width: 34px; height: 34px; background: #1a56db; color: #ffffff; border-radius: 6px; display: flex; align-items: center; justify-content: center; } .rep-brand-title { font-size: 14pt; font-weight: 800; color: #0f172a; margin: 0; letter-spacing: -0.02em; line-height: 1.1; } .rep-brand-sub { font-size: 7.5pt; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; } .rep-meta { text-align: right; } .rep-badge { display: inline-block; background: #e0e7ff; color: #1e40af; font-size: 7.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 4px; margin-bottom: 3px; } .rep-date { font-size: 8pt; color: #475569; font-weight: 500; } .rep-id { font-size: 7.5pt; color: #94a3b8; font-family: monospace; } .rep-title-block { margin-bottom: 11px; } .rep-title { font-size: 12.5pt; font-weight: 800; color: #0f172a; margin: 0 0 3px 0; letter-spacing: -0.01em; } .rep-subtitle { font-size: 8pt; color: #64748b; margin: 0; } .section-box { border: 1px solid #e2e8f0; border-radius: 6px; padding: 9px 12px; margin-bottom: 10px; background: #ffffff; page-break-inside: avoid; } .section-title { font-size: 7.5pt; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: #475569; margin-bottom: 7px; display: flex; align-items: center; justify-content: space-between; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px 12px; } .param-item { font-size: 8pt; } .param-label { color: #64748b; font-size: 7pt; font-weight: 600; text-transform: uppercase; margin-bottom: 1px; } .param-val { color: #0f172a; font-weight: 700; font-size: 8.5pt; } .kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; page-break-inside: avoid; } .kpi-card { border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 6px; padding: 8px 10px; text-align: center; } .kpi-card.kpi-highlight-loss { border-color: #fca5a5; background: #fef2f2; } .kpi-card.kpi-highlight-ok { border-color: #86efac; background: #f0fdf4; } .kpi-lbl { font-size: 7pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; margin-bottom: 2px; } .kpi-val { font-size: 14pt; font-weight: 800; color: #0f172a; line-height: 1.1; } .metric-val-red { color: #dc2626 !important; } .metric-val-green { color: #16a34a !important; } .kpi-sub { font-size: 7pt; color: #64748b; margin-top: 2px; font-weight: 500; } .banner-box { border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; border-left: 4px solid; page-break-inside: avoid; } .banner-danger { background: #fef2f2; border-color: #dc2626; color: #991b1b; } .banner-caution { background: #fffbeb; border-color: #d97706; color: #92400e; } .banner-safe { background: #f0fdf4; border-color: #16a34a; color: #166534; } .banner-head { font-size: 9pt; font-weight: 800; margin-bottom: 2px; } .banner-text { font-size: 8pt; line-height: 1.35; margin: 0; } .tier-tbl { width: 100%; border-collapse: collapse; font-size: 7.5pt; margin-top: 3px; } .tier-tbl th { background: #f1f5f9; color: #334155; font-weight: 700; text-align: left; padding: 4px 8px; font-size: 7pt; text-transform: uppercase; border-bottom: 1px solid #cbd5e1; } .tier-tbl td { padding: 4px 8px; border-bottom: 1px solid #e2e8f0; color: #334155; } .tier-tbl tr.row-cur { background: #eff6ff; } .tier-tbl tr.row-proj-loss { background: #fef2f2; } .tier-tbl tr.row-proj-gain { background: #f0fdf4; } .status-badge { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 6.5pt; font-weight: 700; } .badge-blue { background: #1a56db; color: #ffffff; } .badge-red { background: #dc2626; color: #ffffff; } .badge-green { background: #16a34a; color: #ffffff; } .sap-alert-box { background: #fef3e2; border: 1px solid #fed7aa; border-left: 4px solid #ea580c; border-radius: 6px; padding: 8px 11px; margin-bottom: 10px; font-size: 7.5pt; color: #7c2d12; line-height: 1.35; page-break-inside: avoid; } .sap-alert-title { font-weight: 800; font-size: 8pt; margin-bottom: 2px; } .action-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; } .action-item { display: flex; align-items: flex-start; gap: 6px; font-size: 7.5pt; color: #334155; line-height: 1.3; } .chk-box { width: 10px; height: 10px; border: 1.5px solid #64748b; border-radius: 2px; margin-top: 1px; flex-shrink: 0; } .sign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #cbd5e1; margin-bottom: 8px; page-break-inside: avoid; } .sign-line { border-bottom: 1px solid #475569; height: 18px; margin-bottom: 3px; } .sign-lbls { display: flex; justify-content: space-between; font-size: 6.8pt; color: #64748b; font-weight: 600; text-transform: uppercase; } .rep-footer { border-top: 1px solid #e2e8f0; padding-top: 6px; font-size: 6.5pt; color: #64748b; line-height: 1.3; text-align: center; } `; function buildReportHtml() { const elAid = document.getElementById('embed-aid-type'); const elAnnual = document.getElementById('embed-annual-aid'); const elCredits = document.getElementById('embed-credits'); const elGpa = document.getElementById('embed-gpa'); const aidTypeVal = elAid ? elAid.value : 'pell_only'; const annualVal = parseFloat(elAnnual ? elAnnual.value : '') || 7395; const termVal = annualVal / 2; const creditsOption = elCredits ? elCredits.value : '12'; const gpaVal = elGpa ? elGpa.value : '2.50_2.99'; let currentCreditsNum = 12; if (creditsOption === '15') currentCreditsNum = 15; else if (creditsOption === '12') currentCreditsNum = 12; else if (creditsOption === '9') currentCreditsNum = 9; else if (creditsOption === '6') currentCreditsNum = 6; else if (creditsOption === '3') currentCreditsNum = 3; let newCreditsNum = currentCreditsNum; if (selectedChange === 'drop_3') newCreditsNum = Math.max(0, currentCreditsNum - 3); else if (selectedChange === 'drop_4') newCreditsNum = Math.max(0, currentCreditsNum - 4); else if (selectedChange === 'full_withdraw') newCreditsNum = 0; else if (selectedChange === 'go_part_time') newCreditsNum = Math.min(currentCreditsNum, 5); else if (selectedChange === 'late_withdraw') newCreditsNum = currentCreditsNum; else if (selectedChange === 'add_course') newCreditsNum = currentCreditsNum + 3; const bannerTitle = document.getElementById('res-banner-title')?.innerText || 'Aid Assessment'; const bannerDesc = document.getElementById('res-banner-desc')?.innerText || 'Title IV calculation summary.'; const valBefore = document.getElementById('res-metric-before')?.innerText || '$3,698'; const valAfter = document.getElementById('res-metric-after')?.innerText || '$3,698'; const valLoss = document.getElementById('res-metric-loss')?.innerText || '$0'; const aidTypeLabels = { pell_only: 'Federal Pell Grant (Most Common)', pell_state: 'Federal Pell Grant + State Grant', state_only: 'State Need-Based Grant Only', inst_only: 'Institutional Need-Based Grant' }; const gpaLabels = { '3.0_above': '3.00+ GPA (Good Standing / Dean\'s)', '2.50_2.99': '2.50 – 2.99 GPA (Good Standing)', '2.00_2.49': '2.00 – 2.49 GPA (At SAP Minimum)', 'between_1_5': '1.50 – 1.99 GPA (SAP Warning / Probation)', 'below_1_5': 'Below 1.50 GPA (Critical SAP Suspension)' }; const changeLabels = { drop_3: 'Drop a 3-credit course', drop_4: 'Drop a 4-credit course', full_withdraw: 'Full withdrawal from semester', go_part_time: 'Go part-time (= 12) return 'Full-Time (100% Pell)'; if (cr >= 9) return 'Three-Quarter Time (75% Pell)'; if (cr >= 6) return 'Half-Time (50% Pell)'; return 'Less Than Half-Time (0% Pell)'; } const currentTierName = getTierName(currentCreditsNum); const numLoss = parseFloat(valLoss.replace(/[^0-9.-]+/g, '')) || 0; const isLoss = numLoss > 0; const lossClass = isLoss ? 'metric-val-red' : 'metric-val-green'; const kpiLossClass = isLoss ? 'kpi-highlight-loss' : 'kpi-highlight-ok'; const bannerClass = isLoss ? (numLoss >= 1500 ? 'banner-danger' : 'banner-caution') : 'banner-safe'; const currentDate = new Date().toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }); const refId = 'SAG-' + Math.floor(100000 + Math.random() * 900000); function renderTierRow(minCredits, label, crRange, pct) { const isCur = (minCredits === 12 && currentCreditsNum >= 12) || (minCredits === 9 && currentCreditsNum >= 9 && currentCreditsNum = 6 && currentCreditsNum < 9) || (minCredits === 0 && currentCreditsNum = 12) || (minCredits === 9 && newCreditsNum >= 9 && newCreditsNum = 6 && newCreditsNum < 9) || (minCredits === 0 && newCreditsNum < 6); let rClass = ''; let badge = '—'; if (isCur && isProj) { rClass = 'row-cur'; badge = 'Current & Projected'; } else if (isCur) { rClass = 'row-cur'; badge = 'Current Baseline'; } else if (isProj) { if (newCreditsNum < currentCreditsNum) { rClass = 'row-proj-loss'; badge = 'Projected Shift'; } else { rClass = 'row-proj-gain'; badge = 'Projected Shift'; } } return '' + label + '' + crRange + '' + pct + '' + badge + ''; } const sapAlertHtml = (gpaVal === 'below_1_5' || gpaVal === 'between_1_5') ? '' : ''; const stepEls = document.querySelectorAll('#res-steps-list li'); let stepsHtml = ''; if (stepEls && stepEls.length > 0) { stepEls.forEach(function(s) { stepsHtml += ''; }); } else { stepsHtml = '' + '' + ''; } return ''; } function handlePrintButton() { const reportHtml = buildReportHtml(); // 1. Populate report modal for on-screen inspection const reportModal = document.getElementById('sas-report-modal'); const reportBody = document.getElementById('sas-report-modal-body'); if (reportModal && reportBody) { reportBody.innerHTML = reportHtml; reportModal.style.display = 'flex'; } // 2. Trigger the robust printing pipeline executePrintReport(reportHtml); } function executePrintReport(reportHtml) { if (!reportHtml) { reportHtml = buildReportHtml(); } // A. Prepare in-page container as a direct child of document.body let printContainer = document.getElementById('sas-print-container'); if (!printContainer) { printContainer = document.createElement('div'); printContainer.id = 'sas-print-container'; } printContainer.innerHTML = '' + PRINT_REPORT_STYLES_JS + '' + reportHtml; if (printContainer.parentElement !== document.body) { document.body.appendChild(printContainer); } // B. Primary: Use dedicated isolated iframe print (100% immune to WordPress theme conflicts & blank pages) try { let printFrame = document.getElementById('sas-print-frame'); if (printFrame) { printFrame.remove(); } printFrame = document.createElement('iframe'); printFrame.id = 'sas-print-frame'; printFrame.style.position = 'fixed'; printFrame.style.right = '0'; printFrame.style.bottom = '0'; printFrame.style.width = '10px'; printFrame.style.height = '10px'; printFrame.style.opacity = '0'; printFrame.style.border = '0'; printFrame.style.zIndex = '-9999'; printFrame.style.pointerEvents = 'none'; document.body.appendChild(printFrame); const frameDoc = printFrame.contentDocument || printFrame.contentWindow?.document; if (frameDoc && printFrame.contentWindow) { frameDoc.open(); frameDoc.write('@page { size: letter portrait; margin: 10mm 12mm; } * { box-sizing: border-box; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } body { margin: 0; padding: 15px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1e293b; background: #ffffff; font-size: 9pt; line-height: 1.35; } ' + PRINT_REPORT_STYLES_JS + '' + reportHtml + ''); frameDoc.close(); setTimeout(function() { try { printFrame.contentWindow.focus(); printFrame.contentWindow.print(); } catch (iframeErr) { console.warn('Iframe print error, falling back to window.print():', iframeErr); fallbackDirectPrint(); } }, 250); return; } } catch (e) { console.warn('Iframe print creation error, falling back to window.print():', e); } fallbackDirectPrint(); function fallbackDirectPrint() { document.body.classList.add('sas-print-report-active'); const cleanUp = function() { document.body.classList.remove('sas-print-report-active'); window.removeEventListener('afterprint', cleanUp); }; window.addEventListener('afterprint', cleanUp); try { window.print(); } catch (err) { console.error('Window print error:', err); } setTimeout(cleanUp, 3000); } } function closeReportModal() { const reportModal = document.getElementById('sas-report-modal'); if (reportModal) { reportModal.style.display = 'none'; } } // 100% RESILIENT EVENT DELEGATION document.addEventListener('click', function(e) { // 1. Step 1 Continue const btnStep1 = e.target.closest('#sas-btn-step1'); if (btnStep1) { e.preventDefault(); submitStep1(); return; } // 2. Step 2 Tile Selection const tileStep2 = e.target.closest('#sas-step-2 .sas-tile'); if (tileStep2) { const val = tileStep2.getAttribute('data-change'); selectTile2(val, tileStep2); return; } // 3. Step 2 Back const btnBack1 = e.target.closest('#sas-btn-back1'); if (btnBack1) { e.preventDefault(); goToStep(1); return; } // 4. Step 2 Continue const btnStep2 = e.target.closest('#sas-btn-step2'); if (btnStep2) { e.preventDefault(); submitStep2(); return; } // 5. Step 3 Tile Selection const tileStep3 = e.target.closest('#sas-step-3 .sas-tile'); if (tileStep3) { const val = tileStep3.getAttribute('data-timing'); selectTile3(val, tileStep3); return; } // 6. Step 3 Back const btnBack2 = e.target.closest('#sas-btn-back2'); if (btnBack2) { e.preventDefault(); goToStep(2); return; } // 7. Step 3 See My Results const btnStep3 = e.target.closest('#sas-btn-step3'); if (btnStep3) { e.preventDefault(); submitStep3(); return; } // 8. Close Gate Modal (Cancels and returns to Step 3 - does NOT reveal results) const btnCloseGate = e.target.closest('#sas-btn-close-modal'); if (btnCloseGate) { e.preventDefault(); closeGateModal(false); return; } // Modal Backdrop Click (Cancels and returns to Step 3 - does NOT reveal results) if (e.target && e.target.id === 'sas-gate-modal') { e.preventDefault(); closeGateModal(false); return; } // 10. Top Reset / Start Over const btnTopReset = e.target.closest('#sas-btn-top-reset'); const btnReset = e.target.closest('#sas-btn-reset'); if (btnTopReset || btnReset) { e.preventDefault(); resetSimulator(); return; } // 11. Print PDF const btnPrint = e.target.closest('#sas-btn-print'); if (btnPrint) { e.preventDefault(); handlePrintButton(); return; } // 12. Modal Print const btnModalPrint = e.target.closest('#sas-btn-modal-print'); if (btnModalPrint) { e.preventDefault(); executePrintReport(); return; } // 13. Close Report Modal const btnCloseReport = e.target.closest('#sas-btn-close-report'); if (btnCloseReport) { e.preventDefault(); closeReportModal(); return; } // 14. Share Result const btnShare = e.target.closest('#sas-btn-share'); if (btnShare) { e.preventDefault(); shareResult(); return; } }); // FluentCRM form submit handler document.addEventListener('submit', function(e) { const form = e.target.closest('#fluentcrm-form'); if (form) { const nameIn = document.getElementById('gate-first-name'); const emailIn = document.getElementById('gate-email'); const errName = document.getElementById('err-gate-name'); const errEmail = document.getElementById('err-gate-email'); if (errName) errName.classList.add('hidden'); if (errEmail) errEmail.classList.add('hidden'); let valid = true; if (!nameIn || !nameIn.value.trim()) { if (errName) { errName.classList.remove('hidden'); errName.innerText = 'First name is required.'; } valid = false; } if (!emailIn || !emailIn.value.trim() || !emailIn.value.includes('@')) { if (errEmail) { errEmail.classList.remove('hidden'); errEmail.innerText = 'Valid email is required.'; } valid = false; } if (!valid) { e.preventDefault(); return; } // Allow form submission to hidden sink iframe, then transition to results setTimeout(function() { closeGateModal(true); }, 700); } }); // URL parameters restore function restoreSharedResults() { const params = new URLSearchParams(window.location.search); if (params.get('shared') === 'true') { const aidType = params.get('aidType'); const annualAid = params.get('annualAid'); const credits = params.get('currentCredits'); const gpa = params.get('gpa'); const change = params.get('changeOption'); const timing = params.get('timingOption'); const elAid = document.getElementById('embed-aid-type'); const elAnnual = document.getElementById('embed-annual-aid'); const elCredits = document.getElementById('embed-credits'); const elGpa = document.getElementById('embed-gpa'); if (aidType && elAid) elAid.value = aidType; if (annualAid && elAnnual) elAnnual.value = annualAid; if (credits && elCredits) elCredits.value = credits; if (gpa && elGpa) elGpa.value = gpa; if (change) { selectedChange = change; const tile = document.querySelector('#sas-step-2 .sas-tile[data-change="' + change + '"]'); if (tile) tile.classList.add('selected'); } if (timing) { selectedTiming = timing; const tile = document.querySelector('#sas-step-3 .sas-tile[data-timing="' + timing + '"]'); if (tile) tile.classList.add('selected'); } computeResults(); goToStep(4); } } if (document.readyState === 'complete' || document.readyState === 'interactive') { restoreSharedResults(); } else { document.addEventListener('DOMContentLoaded', restoreSharedResults); }