/* ============================================================
   Tool Styles — Budget Planner v2.1
   File: /assets/css/modules/calculators/financialcalculators/budget-planner.v2.1.css
   Purpose:
   - Tool-only layout for Budget Planner (lines UI + results polish)
   - No changes to ub-toolkit.v2.1.css required
   - Mobile-first, 44x44 touch targets, clamp typography
   ============================================================ */

/* Tool-scoped tokens */
:root{
  --bp-radius: 16px;
  --bp-gap: 14px;
  --bp-soft: rgba(0,0,0,.06);
}

/* Main hero split */
.ub-budget-hero{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--bp-gap);
}

/* Stack on smaller screens */
@media (max-width: 980px){
  .ub-budget-hero{ grid-template-columns: 1fr; }
}

/* Panel wrapper (keeps spacing consistent) */
.ub-budget-panel{
  min-width: 0;
}

/* Lines container */
.ub-lines{
  display:flex;
  flex-direction:column;
  gap: 12px;
  margin-top: 10px;
}

/* One line row card */
.ub-line{
  border: 1px solid var(--ub-border);
  background: var(--ub-surface-2);
  border-radius: var(--bp-radius);
  padding: 12px;
}

/* Grid inside a line (labels + controls) */
.ub-line-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  gap: 12px;
}

/* Expenses have category column */
.ub-line[data-type="expense"] .ub-line-grid{
  grid-template-columns: 1.2fr 0.8fr 0.8fr 0.9fr;
}

@media (max-width: 900px){
  .ub-line-grid{ grid-template-columns: 1fr; }
  .ub-line[data-type="expense"] .ub-line-grid{ grid-template-columns: 1fr; }
}

/* Make labels slightly smaller inside line rows */
.ub-line .ub-field label{
  font-size: var(--ub-fs-1);
  margin-bottom: 6px;
}

/* Actions area (remove button) */
.ub-line-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap: 10px;
  margin-top: 10px;
}

@media (max-width: 900px){
  .ub-line-actions{ justify-content:stretch; }
  .ub-line-actions .ub-line-remove{ width:100%; }
}

/* Remove button: keep it obvious but not loud */
.ub-line-remove{
  min-height: var(--ub-hit);
  padding: 10px 14px;
  border-radius: 999px;
}

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

/* Subtle emphasis for negative net in output (JS can toggle later if desired) */
.ub-bp-neg{
  color: var(--ub-danger);
}

/* Improve table readability */
.ub-table td,
.ub-table th{
  vertical-align: top;
}

/* Small-screen polish */
@media (max-width: 520px){
  .ub-line{ padding: 10px; }
}

/* Dark-mode polish: keep panels crisp */
html.ub-theme-dark .ub-line{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.12);
}