/* ============================================================
   Tool Styles — IRR Calculator v2.1
   File: /assets/css/modules/calculators/financialcalculators/irr-calculator.v2.1.css
   Purpose:
   - Tool-only layout + investment snapshot + chart + cash flow table
   - No changes to ub-toolkit.v2.1.css required
   - Mobile-first, responsive, 44x44 touch targets
   ============================================================ */

:root{
  --irr-radius: 16px;
  --irr-gap: 14px;
  --irr-soft: rgba(0,0,0,.06);
  --irr-track: rgba(0,0,0,.08);
  --irr-pos: rgba(34,197,94,.82);
  --irr-neg: rgba(239,68,68,.82);
  --irr-zero: rgba(0,0,0,.14);
}

html.ub-theme-dark:root{
  --irr-soft: rgba(255,255,255,.05);
  --irr-track: rgba(255,255,255,.08);
  --irr-zero: rgba(255,255,255,.14);
}

/* Main hero layout */
.ub-hero{
  display:grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: var(--irr-gap);
}

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

/* Snapshot panel */
.irr-hero-panel{
  background: var(--ub-surface-2);
  border: 1px solid var(--ub-border);
  border-radius: var(--irr-radius);
}

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

.irr-panel-title{
  font-size: clamp(13px, 1.2vw, 14px);
  font-weight: 950;
  letter-spacing: .01em;
}

.irr-panel-sub{
  font-size: 12px;
  color: var(--ub-muted);
  margin-top: 2px;
}

/* Status pill */
.irr-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  min-height:44px;
  border-radius:999px;
  border:1px solid var(--ub-border);
  background: var(--ub-card-bg);
  font-size:12px;
  font-weight:950;
}

.irr-status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background: var(--ub-muted);
  flex:0 0 10px;
}

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

.irr-kpi{
  min-width:0;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--ub-border);
  background: var(--ub-card-bg);
}

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

.irr-kpi .v{
  font-family: var(--ub-mono);
  font-weight:950;
  font-size:15px;
  margin-top:4px;
  overflow-wrap:anywhere;
  word-break:break-word;
}

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

/* Chart block */
.irr-chart-wrap{
  margin-top:14px;
  border:1px solid var(--ub-border);
  border-radius:16px;
  background: var(--ub-card-bg);
  overflow:hidden;
}

.irr-chart-header{
  padding:12px 12px 10px;
  border-bottom:1px solid var(--ub-border);
  background: var(--ub-surface-2);
}

.irr-chart{
  padding:12px;
  display:grid;
  gap:10px;
  min-height:220px;
}

.irr-chart-empty{
  min-height:180px;
  display:grid;
  place-items:center;
  text-align:center;
  color: var(--ub-muted);
  border:1px dashed var(--ub-border);
  border-radius:14px;
  background: var(--irr-soft);
  padding:16px;
}

.irr-bar-wrap{
  display:grid;
  grid-template-columns: minmax(70px, 92px) 1fr minmax(92px, 132px);
  gap:10px;
  align-items:center;
}

.irr-bar-label{
  font-size:12px;
  font-weight:900;
  color: var(--ub-text);
  overflow-wrap:anywhere;
}

.irr-bar-track{
  position:relative;
  min-height:18px;
  border-radius:999px;
  background: var(--irr-track);
  overflow:hidden;
  border:1px solid var(--ub-border);
}

.irr-bar-zero{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background: var(--irr-zero);
}

.irr-bar{
  position:relative;
  min-height:18px;
  border-radius:999px;
}

.irr-bar--positive{
  background: linear-gradient(90deg, rgba(34,197,94,.55), var(--irr-pos));
}

.irr-bar--negative{
  background: linear-gradient(90deg, rgba(239,68,68,.55), var(--irr-neg));
}

.irr-bar-value{
  font-family: var(--ub-mono);
  font-size:12px;
  font-weight:900;
  text-align:right;
  overflow-wrap:anywhere;
}

.irr-chart-footer{
  margin-top:4px;
  padding-top:10px;
  border-top:1px solid var(--ub-border);
  font-size:12px;
  color: var(--ub-muted);
  font-weight:900;
}

@media (max-width: 700px){
  .irr-bar-wrap{
    grid-template-columns: 1fr;
    gap:6px;
  }

  .irr-bar-value{
    text-align:left;
  }
}

/* Preset row */
.irr-preset-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.irr-preset-row .ub-chip{
  min-height:44px;
  padding:10px 12px;
}

/* Cash flow section */
.irr-cashflows{
  margin-top:2px;
}

.irr-cashflows-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.irr-table-wrap{
  overflow:auto;
  border-radius:16px;
  border:1px solid var(--ub-border);
  background: var(--ub-card-bg);
}

.irr-table{
  min-width: 760px;
  margin:0;
  border:none;
  border-radius:0;
}

.irr-table th,
.irr-table td{
  vertical-align:middle;
}

.irr-input{
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--ub-border);
  background: var(--ub-surface-1);
  color: var(--ub-text);
  font-size: var(--ub-fs-2);
}

.irr-input::placeholder{
  color: rgba(107,114,128,.85);
}

html.ub-theme-dark .irr-input::placeholder{
  color: rgba(156,163,175,.75);
}

.irr-input:focus-visible{
  outline:3px solid var(--ub-focus);
  outline-offset:2px;
}

.irr-remove-row{
  width:100%;
  min-width:88px;
}

.irr-option-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

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

/* Details polish */
.ub-collapsible summary{
  cursor:pointer;
  font-weight:950;
  min-height:44px;
  display:flex;
  align-items:center;
}

.ub-collapsible summary:focus{
  outline:none;
  box-shadow: 0 0 0 4px var(--ub-focus);
  border-radius:12px;
}

/* Right rail helper */
.ub-btn--block{
  width:100%;
}

/* Table usability on touch */
@media (max-width: 980px){
  .irr-table-wrap{
    -webkit-overflow-scrolling: touch;
  }
}

/* Small-screen tuning */
@media (max-width: 520px){
  .irr-status{
    width:100%;
    justify-content:flex-start;
  }

  .irr-cashflows-head .ub-btn{
    width:100%;
  }

  .irr-option-row{
    flex-direction:column;
    align-items:stretch;
  }

  .irr-option-row .ub-chip{
    justify-content:flex-start;
  }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .irr-bar,
  .irr-kpi,
  .irr-status{
    transition:none !important;
  }
}