/* Budget Flow — Main Stylesheet (Light mode only)
   Max font size across UI: 18px
   Scope your markup with .bf-box and .bf-* classes to avoid clashing with theme styles
*/

:root{
  --bf-font: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --bf-bg: #f8fafc;
  --bf-text: #0f172a;
  --bf-muted: #64748b;
  --bf-border: #e2e8f0;
  --bf-surface: #ffffff;
  --bf-surface-2: #f1f5f9;
  --bf-primary: #2563eb;
  --bf-primary-600: #1d4ed8;
  --bf-success: #16a34a;
  --bf-warning: #f59e0b;
  --bf-danger: #dc2626;
  --bf-radius: 12px;
  --bf-shadow: 0 2px 10px rgba(2,6,23,.07);
}

/* ---------- Base ---------- */
.bf-box, .bf-box *{ box-sizing: border-box; }
.bf-box{
  background: var(--bf-surface);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius);
  box-shadow: var(--bf-shadow);
  padding: 16px;
  font-family: var(--bf-font);
  color: var(--bf-text);
}

/* Typography (cap at 18px) */
.bf-box, .bf-box table{ font-size: 14px; line-height: 1.45; }
.bf-box h3, .bf-box h4{ margin: 0 0 10px; font-size: 18px; line-height: 1.3; color: var(--bf-text); }
.bf-muted{ color: var(--bf-muted); }
.bf-help{ font-size: 13px; line-height: 1.3; color: var(--bf-muted); }

/* ---------- Layout / grids ---------- */
.bf-grid{ display:grid; gap:12px; }
.bf-grid.col-2{ grid-template-columns: 1fr 1fr; }
.bf-grid.col-3{ grid-template-columns: repeat(3,1fr); }
.bf-grid.col-4{ grid-template-columns: repeat(4,1fr); }
.bf-grid.col-5{ grid-template-columns: repeat(5,1fr); }
@media (max-width: 900px){
  .bf-grid.col-2, .bf-grid.col-3, .bf-grid.col-4, .bf-grid.col-5{ grid-template-columns: 1fr; }
}

/* ---------- Forms ---------- */
.bf-box label{ display:block; font-weight: 600; font-size: 14px; margin-bottom:6px; color: var(--bf-text); }
.bf-input, .bf-select, .bf-textarea,
.bf-box input[type="text"], .bf-box input[type="date"], .bf-box input[type="number"],
.bf-box select, .bf-box textarea{
  width:100%;
  font-size: 16px; line-height: 1.35;
  color: var(--bf-text);
  background: var(--bf-surface);
  border: 1px solid var(--bf-border);
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.bf-box input[disabled], .bf-box select[disabled], .bf-box textarea[disabled]{
  background: var(--bf-surface-2);
  color: var(--bf-muted);
  cursor: not-allowed;
}
.bf-box input:focus, .bf-box select:focus, .bf-box textarea:focus{
  border-color: var(--bf-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* ---------- Buttons ---------- */
.bf-btn, .bf-box .button, .bf-btn-outline{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  font-weight: 600; font-size: 15px; line-height: 1;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.bf-btn, .bf-box .button{ background: var(--bf-primary); color:#fff; }
.bf-btn:hover, .bf-box .button:hover{ background: var(--bf-primary-600); }
.bf-btn.success{ background: var(--bf-success); }
.bf-btn.warning{ background: var(--bf-warning); }
.bf-btn.danger{ background: var(--bf-danger); }

.bf-btn-outline{ background: transparent; color: var(--bf-text); border-color: var(--bf-border); }
.bf-btn-outline:hover{ border-color: var(--bf-primary); color: var(--bf-primary); }

.bf-btn.icon{ padding: 6px 10px; font-size: 14px; }
.bf-btn.small{ padding: 6px 10px; font-size: 14px; }

/* Arrow buttons for reorder */
.bf-arrow{ padding: 4px 8px; border-radius: 6px; border:1px solid var(--bf-border); background: var(--bf-surface-2); font-size: 14px; }
.bf-arrow:hover{ border-color: var(--bf-primary); }

/* ---------- Tables ---------- */
.bf-scroll{ overflow:auto; max-width:100%; }
.bf-box table{ width:100%; border-collapse: collapse; }
.bf-box thead th{
  position: sticky; top: 0; z-index: 2;
  background: var(--bf-surface);
  border-bottom: 2px solid var(--bf-border);
  text-align: left; font-weight:700; font-size: 16px;
}
.bf-box th, .bf-box td{ border:1px solid var(--bf-border); padding: 8px; vertical-align: top; }
.bf-box tbody tr:nth-child(even){ background: var(--bf-surface-2); }
.bf-num{ text-align: right; font-variant-numeric: tabular-nums; }
.bf-nowrap{ white-space: nowrap; }

/* Period headers inside table cells */
.bf-period{ display:inline-block; font-weight: 600; font-size: 12px; padding:3px 6px; border-radius: 6px; background: var(--bf-surface-2); color: var(--bf-muted); }

/* Sticky action bar */
.bf-sticky-actions{ position: sticky; bottom: 0; z-index: 3; background: linear-gradient(to top, var(--bf-surface) 70%, rgba(255,255,255,0)); padding-top: 8px; margin-top: 8px; }

/* ---------- Flash messages ---------- */
.bf-flash{ display:flex; align-items:flex-start; gap:10px; border:1px solid var(--bf-border); border-left-width: 4px; padding:10px 12px; border-radius: 10px; margin: 8px 0; background: var(--bf-surface-2); font-size: 16px; }
.bf-flash.success{ border-left-color: var(--bf-success); }
.bf-flash.error{ border-left-color: var(--bf-danger); }
.bf-flash.warning{ border-left-color: var(--bf-warning); }
.bf-flash.info{ border-left-color: var(--bf-primary); }

/* ---------- Badges / chips ---------- */
.bf-badge{ display:inline-block; padding:4px 8px; border-radius: 999px; font-weight: 600; font-size: 12px; background: var(--bf-surface-2); color: var(--bf-muted); }
.bf-badge.primary{ background: rgba(37,99,235,.1); color: var(--bf-primary); }
.bf-badge.success{ background: rgba(22,163,74,.1); color: var(--bf-success); }
.bf-badge.warning{ background: rgba(245,158,11,.1); color: var(--bf-warning); }
.bf-badge.danger{ background: rgba(220,38,38,.1); color: var(--bf-danger); }

/* ---------- Inputs inside table cells ---------- */
.bf-cell-input{ width:100%; text-align:right; font-size: 16px; line-height: 1.25; padding:6px 8px; border:1px solid var(--bf-border); border-radius:6px; background: var(--bf-surface); }
.bf-cell-input:focus{ border-color: var(--bf-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); outline:none; }

/* ---------- Table row accents ---------- */
.bf-total-row{ background: var(--bf-surface-2); font-weight:400; }
.bf-parent-row{ background: #f8fafc; font-weight:600; }

/* ---------- Utilities ---------- */
.bf-right{ text-align:right; }
.bf-center{ text-align:center; }
.bf-hide{ display:none !important; }

/* ---------- Print styles ---------- */
@media print{
  .bf-box{ box-shadow:none; border-color:#ddd; }
  .bf-box form, .bf-sticky-actions, .bf-btn, .bf-box .button{ display:none !important; }
  .bf-box table{ font-size: 14px; }
}