/* =====================================================================
   VPD CALCULATOR STYLING & INPUT OVERRIDES
   ===================================================================== */
#vpd-tool .th-calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 28px;
}

#vpd-tool .th-field {
  margin-bottom: 18px;
}

#vpd-tool .th-field label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--mc-ink, #064E3B);
  margin-bottom: 8px;
}

#vpd-tool .th-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #DCFCE7;
  color: #15803D;
  font-size: 11.5px;
  font-weight: 700;
  flex-shrink: 0;
}

#vpd-tool input[type="number"],
#vpd-tool select {
  width: 100% !important;
  height: 46px !important;
  padding: 0 14px !important;
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 10px !important;
  font-size: 14.5px !important;
  font-family: inherit !important;
  color: #374151 !important;
  outline: none !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.02) !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

#vpd-tool input[type="number"]:focus,
#vpd-tool select:focus {
  border-color: #16A34A !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15) !important;
}

#vpd-tool .th-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

#vpd-tool .th-hint {
  font-size: 11.5px;
  color: var(--mc-text-soft, #6B7280);
  margin-top: 4px;
}

#vpd-tool .th-gauge-wrap {
  text-align: center;
  padding: 20px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 16px;
  margin-bottom: 20px;
}

#vpd-tool .th-gauge {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto 12px;
}

#vpd-tool .th-gauge svg {
  width: 100%;
  height: 100%;
}

#vpd-tool .th-gauge-value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#vpd-tool .th-gauge-value strong {
  font-size: 32px;
  line-height: 1;
  color: var(--mc-ink, #064E3B);
  font-family: var(--mc-font-heading);
}

#vpd-tool .th-gauge-value span {
  font-size: 10.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mc-text-soft, #6B7280);
  margin-top: 4px;
}

#vpd-tool .th-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}

#vpd-tool .th-status--ok { background: #DCFCE7; color: #15803D; }
#vpd-tool .th-status--low { background: #FEF3C7; color: #B45309; }
#vpd-tool .th-status--high { background: #FEE2E2; color: #B91C1C; }

#vpd-tool .th-target-line {
  font-size: 12px;
  color: var(--mc-text-soft, #6B7280);
  font-weight: 600;
}

#vpd-tool .th-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

#vpd-tool .th-stat {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}

#vpd-tool .th-stat span {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--mc-text-soft, #6B7280);
  font-weight: 700;
  margin-bottom: 2px;
}

#vpd-tool .th-stat strong {
  font-size: 14.5px;
  color: var(--mc-ink, #064E3B);
}

#vpd-tool .th-recs {
  background: #FFFFFF;
  border: 1px solid var(--mc-line, #E5E7EB);
  border-radius: 12px;
  padding: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: #334155;
  margin-bottom: 12px;
}

#vpd-tool .th-recs strong {
  color: var(--mc-ink, #064E3B);
  display: block;
  margin-bottom: 4px;
}

#vpd-tool .th-config-summary {
  font-size: 12px;
  color: var(--mc-text-soft, #6B7280);
  background: #F1F5F9;
  padding: 8px 12px;
  border-radius: 8px;
}

/* Reference Table Cell Padding Fix */
#vpd-tool .th-table-wrap table th,
#vpd-tool .th-table-wrap table td {
  padding: 12px 16px !important;
  text-align: left;
  vertical-align: middle;
}

@media (max-width: 640px) {
  #vpd-tool .th-row2,
  #vpd-tool .th-stat-row {
    grid-template-columns: 1fr;
  }
}