/* ============================================================
   Utilities Bunker — ROI Calculator (v2.1)
   File: /assets/css/modules/calculators/financialcalculators/roi-calculator.v2.1.css
   Purpose:
   - Tool-only layout and visual styling for ROI Calculator
   - Keeps all shared styles in ub-toolkit.v2.1.css untouched
   - Mobile-first, fast, accessible, UB-CERT aligned
   ============================================================ */

:root{
  --roi-radius: 16px;
  --roi-gap: 14px;
  --roi-soft: rgba(0,0,0,.06);
  --roi-panel-bg: linear-gradient(180deg, var(--ub-card-bg), var(--ub-surface-2));
  --roi-accent: rgba(249,58,19,.14);
  --roi-accent-strong: rgba(249,58,19,.24);
}

/* Header card */
.roi-head{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
}

.roi-page-title{
  margin:0;
  font-size:var(--ub-fs-5);
}

.roi-page-subtitle{
  margin:6px 0 0;
  max-width:72ch;
}

/* How-to list */
.roi-steps{
  margin:0;
  padding-left:18px;
}

.roi-steps li + li{
  margin-top:8px;
}

/* Main tool hero */
.roi-hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--roi-gap);
  align-items:start;
}

@media (max-width: 980px){
  .roi-hero{
    grid-template-columns:1fr;
  }
}

/* Shared panel feel */
.roi-panel{
  background:var(--roi-panel-bg);
  border:1px solid var(--ub-border);
  border-radius:var(--roi-radius);
  padding:12px;
}

.roi-panel-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.roi-eyebrow{
  font-size:12px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ub-muted);
}

.roi-panel-title{
  margin:4px 0 0;
  font-size:var(--ub-fs-3);
  font-weight:950;
  letter-spacing:-.01em;
}

.roi-panel-subtitle{
  margin:6px 0 0;
  color:var(--ub-muted);
  font-size:12px;
}

.roi-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--ub-border);
  background:var(--ub-card-bg);
  font-size:12px;
  font-weight:950;
  white-space:nowrap;
}

/* KPI grid */
.roi-kpis{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

@media (max-width: 520px){
  .roi-kpis{
    grid-template-columns:1fr;
  }
}

.roi-kpi{
  min-height:96px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--ub-border);
  background:var(--ub-card-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.roi-kpi-label{
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ub-muted);
}

.roi-kpi-value{
  margin-top:8px;
  font-family:var(--ub-mono);
  font-size:clamp(18px, 1.15rem + .55vw, 24px);
  font-weight:950;
  line-height:1.15;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Meter */
.roi-meter-wrap{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--ub-border);
  background:var(--ub-card-bg);
}

.roi-meter-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:8px;
  font-size:12px;
  font-weight:900;
}

.roi-meter{
  width:100%;
  height:14px;
  overflow:hidden;
  border-radius:999px;
  border:1px solid var(--ub-border);
  background:var(--ub-surface-3);
}

.roi-meter-bar{
  width:0%;
  height:100%;
  border-radius:999px;
  transition:width 180ms ease;
  background:linear-gradient(92deg, var(--ub-btn-grad-a), var(--ub-btn-grad-b));
}

.roi-meter-bar.is-neutral{
  background:linear-gradient(92deg, #9ca3af, #6b7280);
}

.roi-meter-bar.is-negative{
  background:linear-gradient(92deg, #ef4444, #b91c1c);
}

.roi-meter-bar.is-flat{
  background:linear-gradient(92deg, #94a3b8, #64748b);
}

.roi-meter-bar.is-modest{
  background:linear-gradient(92deg, #f59e0b, #d97706);
}

.roi-meter-bar.is-strong{
  background:linear-gradient(92deg, #22c55e, #16a34a);
}

.roi-meter-bar.is-high{
  background:linear-gradient(92deg, #10b981, #059669);
}

.roi-meter-bar.is-very-high{
  background:linear-gradient(92deg, #06b6d4, #2563eb);
}

.roi-meter-note{
  margin:10px 0 0;
  color:var(--ub-muted);
  font-size:12px;
  line-height:1.5;
}

/* Presets */
.roi-presets{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.roi-presets .ub-chip{
  min-height:44px;
  padding:10px 12px;
}

/* Input form enhancements */
.roi-panel--inputs .ub-card{
  margin-bottom:0;
  border-radius:14px;
}

.roi-inputrow-split{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) 132px;
  gap:8px;
}

.roi-inputrow-split > input,
.roi-inputrow-split > select{
  margin-top:0 !important;
}

@media (max-width: 520px){
  .roi-inputrow-split{
    grid-template-columns:1fr;
  }
}

.roi-toggle-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.roi-chip-check{
  display:inline-flex;
  gap:8px;
  align-items:center;
}

.roi-actions{
  margin-top:12px;
}

/* Results grid */
.roi-results-grid .ub-v{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Work block */
.roi-work{
  font-family:var(--ub-mono);
  font-size:13px;
  line-height:1.6;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.roi-work-note{
  margin-top:10px;
  color:var(--ub-muted);
  font-size:12px;
}

/* Formula section */
.roi-formula-list{
  margin:0;
  padding-left:18px;
}

.roi-formula-list li + li{
  margin-top:8px;
}

.roi-formula-note{
  margin-top:10px;
  color:var(--ub-muted);
  font-size:12px;
  line-height:1.55;
}

/* FAQ */
.roi-faq-q{
  margin:12px 0 6px;
  font-size:var(--ub-fs-2);
  font-weight:900;
}

.roi-faq-a{
  margin:0 0 10px;
}

/* Rail polish */
.ub-rail-actions .ub-btn:last-child{
  margin-bottom:0;
}

/* Improve touch targets on preset buttons and chips */
.roi-presets .ub-chip,
.roi-toggle-row .ub-chip,
.roi-badge{
  min-height:44px;
}

/* Strong focus for tool-specific controls */
.roi-presets .ub-chip:focus,
.roi-toggle-row .ub-chip:focus,
.roi-badge:focus{
  outline:none;
  box-shadow:0 0 0 4px var(--ub-focus);
}

/* Subtle depth tweaks */
.roi-panel--summary{
  position:relative;
  overflow:hidden;
}

.roi-panel--summary::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:88px;
  background:
    radial-gradient(circle at top right, var(--roi-accent-strong), transparent 42%),
    radial-gradient(circle at top left, var(--roi-accent), transparent 34%);
  pointer-events:none;
}

.roi-panel--summary > *{
  position:relative;
  z-index:1;
}

/* Dark mode tuning */
html.ub-theme-dark .roi-panel,
html.ub-theme-dark .roi-meter-wrap,
html.ub-theme-dark .roi-kpi,
html.ub-theme-dark .roi-badge{
  box-shadow:none;
}

html.ub-theme-dark .roi-panel--summary::before{
  background:
    radial-gradient(circle at top right, rgba(249,58,19,.18), transparent 42%),
    radial-gradient(circle at top left, rgba(249,58,19,.10), transparent 34%);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  .roi-meter-bar{
    transition:none;
  }
}