/* ERP ROI calculator. Uses the Acclaim theme tokens, with fallbacks. */
.roi { --roi-navy: var(--navy, #0f2233); --roi-blue: var(--blue, #0a74bb); --roi-muted: var(--muted, #5b6b7a); --roi-line: var(--line, #e1e8ef); --roi-mist: var(--mist, #f3f7fa); --roi-green: var(--green-text, #067a47); --roi-red: #b42318; margin: 2rem 0 2.5rem; }
.roi h3, .roi .roi-panel__title, .roi .roi-card__title { margin-top: 0; }
.roi .is-negative, .roi .roi-table .is-negative { color: var(--roi-red); }
.roi .roi-row--cost td { color: var(--roi-muted); }

.roi-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 20px; }
.roi-presets__label { font-size: .9rem; color: var(--roi-muted); margin-right: 4px; }
.roi-chip { font: inherit; font-size: .875rem; font-weight: 500; padding: 8px 16px; border: 1px solid var(--roi-line); border-radius: 999px; background: #fff; color: var(--roi-navy); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.roi-chip:hover { border-color: var(--roi-blue); color: var(--roi-blue); }
.roi-chip[aria-pressed="true"] { background: var(--roi-navy); border-color: var(--roi-navy); color: #fff; }

.roi-panel { background: var(--roi-mist); border-radius: var(--radius, 18px); padding: clamp(20px, 3vw, 32px); margin-bottom: 20px; }
.roi-panel__title { font-size: 1.1rem; margin-bottom: 16px !important; }
.roi-panel__note { font-size: .9rem; color: var(--roi-muted); margin: -8px 0 16px; }
.roi-panel__total { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--roi-line); font-size: .95rem; }
.roi-panel__total strong { color: var(--roi-navy); font-size: 1.1rem; }
.roi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 20px; }
.roi-grid--1 { grid-template-columns: 1fr; gap: 12px; }
.roi-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.roi-split .roi-panel { margin-bottom: 0; }
.roi-grid--1 .roi-field { grid-template-columns: 1fr 150px; grid-template-rows: none; align-items: center; gap: 12px; }
.roi-grid--1 .roi-field label, .roi-card__fields .roi-field label { align-self: center; }

.roi-field { display: grid; gap: 6px; grid-template-rows: 1fr auto; }
.roi-field label { align-self: end; }
.roi-field label { font-size: .85rem; font-weight: 500; color: var(--roi-navy); line-height: 1.35; }
.roi-input { position: relative; display: flex; align-items: center; }
.roi-input input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--roi-line); border-radius: 10px; background: #fff; font: inherit; font-size: .95rem; color: var(--roi-navy); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.roi-input input::-webkit-outer-spin-button, .roi-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.roi-input input:focus { outline: none; border-color: var(--roi-blue); box-shadow: 0 0 0 3px rgba(10, 116, 187, .15); }
.roi-input__unit { position: absolute; font-size: .85rem; color: var(--roi-muted); pointer-events: none; }
.roi-field--cur input { padding-left: 26px; }
.roi-field--cur .roi-input__unit { left: 12px; }
.roi-field--pct input, .roi-field--hrs input { padding-right: 42px; }
.roi-field--pct .roi-input__unit, .roi-field--hrs .roi-input__unit { right: 12px; }

.roi-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.roi-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--roi-line); border-radius: var(--radius, 18px); padding: 24px; }
.roi-card__num { margin: 0 0 6px; font-size: .8rem; font-weight: 600; letter-spacing: .12em; color: var(--roi-green); }
.roi-card__title { font-size: 1.05rem; line-height: 1.3; margin-bottom: 6px !important; }
.roi-card__desc { font-size: .875rem; color: var(--roi-muted); margin: 0 0 16px; }
.roi-card__fields { display: grid; gap: 12px; margin-bottom: 16px; }
.roi-card__fields .roi-field { grid-template-columns: 1fr 130px; grid-template-rows: none; align-items: center; gap: 10px; }
.roi-card__result { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--roi-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: .85rem; color: var(--roi-muted); }
.roi-card__result strong { display: block; font-size: 1.1rem; color: var(--roi-navy); font-variant-numeric: tabular-nums; }
.roi-card__result span + span strong { color: var(--roi-green); }

.roi-tco { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 1px; margin-top: 24px; border-radius: var(--radius, 18px); overflow: hidden; background: rgba(255, 255, 255, .12); }
.roi-tco > div { background: var(--roi-navy); color: rgba(255, 255, 255, .78); padding: 22px 24px; font-size: .875rem; display: grid; gap: 4px; }
.roi-tco strong { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 600; font-variant-numeric: tabular-nums; }
.roi-tco__total { background: var(--navy-2, #123b55) !important; }

.roi .roi-table-wrap { overflow-x: auto; margin: 24px 0; border: 1px solid var(--roi-line); border-radius: var(--radius, 18px); }
.roi .roi-table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; min-width: 720px; }
.roi .roi-table caption { text-align: left; padding: 16px 20px 0; font-weight: 600; color: var(--roi-navy); }
.roi .roi-table th, .roi .roi-table td { padding: 12px 16px; text-align: right; border: 0; background: none; color: inherit; border-bottom: 1px solid var(--roi-line); white-space: nowrap; }
.roi .roi-table thead th { font-size: .8rem; font-weight: 600; color: var(--roi-muted); text-transform: uppercase; letter-spacing: .06em; }
.roi .roi-table tbody th { text-align: left; font-weight: 500; color: var(--roi-navy); }
.roi .roi-table tr:last-child th, .roi .roi-table tr:last-child td { border-bottom: 0; }
.roi .roi-table td:last-child, .roi .roi-table th:last-child { background: var(--roi-mist); font-weight: 600; }
.roi-row--cum td, .roi-row--cum th { font-weight: 600; }

.roi-chart { margin: 0; }
.roi-chart svg { display: block; width: 100%; height: auto; }
.roi-chart figcaption { font-size: .85rem; color: var(--roi-muted); margin-top: 6px; }
.roi-chart__zero { stroke: var(--roi-line); stroke-width: 2; }
.roi-chart__axis { font-size: 12px; fill: var(--roi-muted); font-family: inherit; }
.roi-chart__area { fill: rgba(10, 116, 187, .08); }
.roi-chart__line { fill: none; stroke: var(--roi-blue); stroke-width: 3; stroke-linejoin: round; }
.roi-chart__dot { fill: #fff; stroke: var(--roi-green); stroke-width: 3; }
.roi-chart__dot.is-negative { stroke: var(--roi-red); }

.roi-summary { background: var(--roi-navy); color: #fff; border-radius: var(--radius, 18px); padding: clamp(24px, 4vw, 44px); }
.roi-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.roi-kpi { display: grid; gap: 4px; padding-left: 18px; border-left: 3px solid; border-image: var(--brand-gradient, linear-gradient(#089858, #28a8d8)) 1; }
.roi-kpi strong { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.roi-kpi strong.is-negative { color: #ffb4ab; }
.roi-kpi span { font-size: .875rem; color: rgba(255, 255, 255, .75); }
.roi-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; }
.roi-summary .btn--outline { border-color: rgba(255, 255, 255, .5); color: #fff; }
.roi-summary .btn--outline:hover { border-color: #fff; color: #fff; }
.roi-reset { font: inherit; font-size: .875rem; background: none; border: 0; color: rgba(255, 255, 255, .78); text-decoration: underline; cursor: pointer; padding: 8px 0; }
.roi-reset:hover { color: #fff; }
.roi-disclaimer { font-size: .8rem; color: rgba(255, 255, 255, .65); margin: 20px 0 0; }

@media (max-width: 860px) {
	.roi-split, .roi-tco { grid-template-columns: 1fr; }
	.roi-kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.roi-kpis { grid-template-columns: 1fr; }
	.roi-grid--1 .roi-field, .roi-card__fields .roi-field { grid-template-columns: 1fr 120px; }
}

@media print {
	.site-header, .site-footer, .topbar, .cta-band, .crumbs, .roi-presets, .roi-actions, .skip-link { display: none !important; }
	body { font-size: 10pt; }
	.roi-panel, .roi-card, .roi-summary, .roi-tco > div { break-inside: avoid; }
	.roi-summary, .roi-tco > div { background: #fff !important; color: #000 !important; border: 1px solid #ccc; }
	.roi-kpi strong, .roi-tco strong, .roi-kpi span, .roi-disclaimer { color: #000 !important; }
	.roi-input input { border: 0; padding-left: 0; }
	.roi-table { min-width: 0; }
}