/* ============================================================
   Utilities Bunker — Margin Calculator (v2.1)
   File: /assets/css/modules/calculators/financialcalculators/margin-calculator.v2.1.css
   Purpose:
   - Tool-only layout and visual styling for the Margin Calculator
   - Keeps shared UB Toolkit untouched
   - Mobile-first, responsive, accessible, fast
   ============================================================ */

/* Local tool tokens */
:root{
  --mc-radius: 16px;
  --mc-gap: 14px;
  --mc-soft: rgba(0,0,0,.06);
  --mc-cost-a: rgba(59,130,246,.16);
  --mc-cost-b: rgba(59,130,246,.28);
  --mc-profit-a: rgba(249,58,19,.22);
  --mc-profit-b: rgba(255,116,38,.38);
}

/* Main hero layout */
.ub-hero{
  display:grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: var(--mc-gap);
}

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

/* Pricing snapshot panel */
.ub-lab{
  background: var(--ub-surface-2);
  border: 1px solid var(--ub-border);
  border-radius: var(--mc-radius);
  padding: 12px;
}

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

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

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

/* KPI tiles */
.ub-kpis{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  justify-content:flex-end;
}

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

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

.ub-kpi .v{
  font-family: var(--ub-mono);
  font-weight: 950;
  font-size: 14px;
  margin-top: 2px;
  overflow-wrap:anywhere;
}

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

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

/* Solve wheel chips */
.ub-wheel{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 10px;
}

.ub-wheel .ub-chip{
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--ub-border);
  background: var(--ub-chip-bg);
  color: var(--ub-chip-text);
  font-weight: 900;
  cursor: pointer;
  user-select:none;
  text-align:center;
}

.ub-wheel .ub-chip:hover{
  background: var(--ub-chip-hover);
}

.ub-wheel .ub-chip[aria-pressed="true"]{
  border-color: rgba(249,58,19,.55);
  box-shadow: 0 0 0 4px rgba(249,58,19,.12);
}

@media (max-width: 640px){
  .ub-wheel{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

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

/* Margin visualization */
.ub-margin-viz{
  margin-top: 14px;
  border: 1px solid var(--ub-border);
  border-radius: 16px;
  background: var(--ub-card-bg);
  padding: 12px;
}

.ub-margin-bar{
  display:flex;
  width:100%;
  min-height: 54px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid var(--ub-border);
  background:
    linear-gradient(180deg, var(--ub-surface-2), var(--ub-surface-3));
}

.ub-margin-bar__cost,
.ub-margin-bar__profit{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width: 0;
  min-height: 54px;
  transition: width .18s ease;
  overflow:hidden;
  position:relative;
}

.ub-margin-bar__cost{
  width: 50%;
  background:
    linear-gradient(135deg, var(--mc-cost-a), var(--mc-cost-b));
}

.ub-margin-bar__profit{
  width: 50%;
  background:
    linear-gradient(135deg, var(--mc-profit-a), var(--mc-profit-b));
}

.ub-margin-bar__label{
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ub-text);
  text-shadow: 0 1px 0 rgba(255,255,255,.15);
}

html.ub-theme-dark .ub-margin-bar__label{
  text-shadow: none;
}

.ub-margin-legend{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-top: 12px;
}

.ub-margin-legend__item{
  display:flex;
  align-items:center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--ub-border);
  border-radius: 12px;
  background: var(--ub-surface-2);
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 640px){
  .ub-margin-legend{
    grid-template-columns: 1fr;
  }
}

.ub-swatch{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  flex: 0 0 14px;
  border: 1px solid rgba(0,0,0,.08);
}

.ub-swatch--cost{
  background: linear-gradient(135deg, var(--mc-cost-a), var(--mc-cost-b));
}

.ub-swatch--profit{
  background: linear-gradient(135deg, var(--mc-profit-a), var(--mc-profit-b));
}

html.ub-theme-dark .ub-swatch{
  border-color: rgba(255,255,255,.10);
}

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

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

/* Utility hint / inline error polish */
.hint{
  margin-top: 6px;
  font-size: 12px;
  color: var(--ub-muted);
}

.ub-inline-error{
  margin-top: 6px;
  font-size: 12px;
  color: var(--ub-danger);
  font-weight: 800;
  min-height: 16px;
}

/* Improve custom currency field spacing */
#customCurrencyWrap{
  margin-top: 2px;
}

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

/* 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;
}

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

/* Better wrapping for long money values */
#outCost,
#outPrice,
#outProfit,
#outMargin,
#outMarkup,
#outCostRatio,
#kpiCost,
#kpiPrice,
#kpiProfit,
#kpiMargin{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Stronger visual grouping for the controls panel */
form.ub-card[aria-label="Margin calculator inputs"] .ub-card-title{
  margin-bottom: 6px;
}

form.ub-card[aria-label="Margin calculator inputs"] .ub-card-subtitle{
  margin-bottom: 12px;
}

/* Small-screen tuning */
@media (max-width: 520px){
  .ub-kpi{
    min-width: 98px;
  }

  .ub-lab{
    padding: 10px;
  }

  .ub-margin-viz{
    padding: 10px;
  }

  .ub-margin-bar,
  .ub-margin-bar__cost,
  .ub-margin-bar__profit{
    min-height: 48px;
  }

  .ub-margin-bar__label{
    font-size: 11px;
    padding: 4px 8px;
  }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .ub-margin-bar__cost,
  .ub-margin-bar__profit{
    transition: none;
  }
}