/* Interactive budget planner document. Sized in real millimetres so it prints
   at exact scale via the shared @page engine. On screen shrunk with CSS `zoom`
   (layout-affecting) to fit the column with no horizontal scrollbar; print
   resets zoom to 1 for true mm output. */

#preview { display: block; width: 100%; }
.ps-preview-wrap { overflow-x: hidden; align-items: flex-start; height: auto; }

.bg-doc {
  /* width/min-height set inline by JS in mm */
  box-sizing: border-box;
  background: #fff;
  color: #1f2937;
  font-family: Arial, Helvetica, sans-serif;
  padding: 12mm;
  margin: 0 auto;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  zoom: var(--bg-scale, 1);
  --accent: #15803d;
  line-height: 1.3;
}

/* editable fields */
.bg-doc .edit { outline: none; border-radius: 2px; transition: background .1s; min-height: 1em; }
.bg-doc .edit:hover { background: #eefaf1; }
.bg-doc .edit:focus { background: #e3f5ea; box-shadow: 0 0 0 1px var(--accent); }
.bg-doc .edit:empty::before { content: attr(data-ph); color: #b3bcc4; }

/* ---- title ---- */
.bg-title-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 6mm; border-bottom: 0.5mm solid var(--accent); padding-bottom: 2.5mm; }
.bg-title { font-size: 8mm; font-weight: 800; color: var(--accent); letter-spacing: .3mm; }
.bg-period-note { font-size: 3.2mm; color: #374151; text-align: right; }
.bg-period-note .edit { display: inline-block; min-width: 24mm; border-bottom: 0.25mm solid #c9ced6; text-align: right; }

/* ---- generic amounts ---- */
.amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc { color: #111827; }         /* computed (non-editable) figures */

/* ---- section shell ---- */
.bg-section { margin-top: 7mm; }
.bg-sec-title { font-size: 3.6mm; font-weight: 800; letter-spacing: .4mm; color: var(--accent); text-transform: uppercase; margin-bottom: 2mm; }

/* ---- tables ---- */
.bg-table { width: 100%; border-collapse: collapse; font-size: 3.2mm; }
.bg-table th { background: var(--accent); color: #fff; font-weight: 700; font-size: 3mm; text-align: left; padding: 2.2mm 2.5mm; }
.bg-table th.num { text-align: right; }
.bg-table td { border-bottom: 0.25mm solid #d7dee6; padding: 0; vertical-align: middle; }
.bg-table tbody tr:nth-child(even) td { background: #f4f7f5; }
.bg-table .cell { padding: 1.9mm 2.5mm; outline: none; min-height: 5mm; }
.bg-table td.num, .bg-table td.num .cell { text-align: right; }
.bg-table .cell:hover { background: #eafaf0; }
.bg-table .cell:focus { background: #e0f5e9; box-shadow: inset 0 0 0 1px var(--accent); }
.bg-table .cell:empty::before { content: attr(data-ph); color: #b7c0c8; }

.col-name { width: 46%; }
.col-num  { width: 18%; }
.col-del  { width: 7mm; }

/* difference colouring */
.diff-pos { color: #15803d; }   /* under budget / surplus */
.diff-neg { color: #dc2626; }   /* over budget / deficit */

/* totals row inside a table */
.bg-table tr.total-row td { background: #eef6f0 !important; font-weight: 800; border-top: 0.4mm solid var(--accent); }
.bg-table tr.total-row .cell { padding-top: 2.3mm; padding-bottom: 2.3mm; }

/* row controls (screen only) */
td.col-del { text-align: center; }
.row-del { border: none; background: none; color: #cbd5e1; cursor: pointer; font-size: 4mm; line-height: 1; padding: 1mm; }
.row-del:hover { color: #ef4444; }
.bg-add {
  display: inline-flex; align-items: center; gap: 1mm; margin-top: 1.5mm;
  font-size: 2.9mm; color: var(--accent); background: none; border: 0.3mm dashed var(--accent);
  border-radius: 1.5mm; padding: 0.8mm 2.5mm; cursor: pointer;
}
.bg-add:hover { background: #eefaf1; }

/* ---- summary / left-to-save box ---- */
.bg-summary { margin-top: 8mm; display: flex; gap: 6mm; }
.bg-sum-box { flex: 1; border: 0.3mm solid #d7dee6; border-radius: 1.5mm; padding: 3mm 3.5mm; }
.bg-sum-box .l { font-size: 2.7mm; color: #6b7280; font-weight: 700; letter-spacing: .3mm; text-transform: uppercase; }
.bg-sum-box .v { font-size: 5mm; font-weight: 800; margin-top: 1mm; }
.bg-leftover { margin-top: 5mm; background: var(--accent); color: #fff; border-radius: 1.5mm; padding: 3.5mm 4mm; display: flex; justify-content: space-between; align-items: center; }
.bg-leftover .l { font-size: 3.6mm; font-weight: 800; letter-spacing: .3mm; }
.bg-leftover .v { font-size: 6mm; font-weight: 800; }
.bg-leftover.negative { background: #dc2626; }

.btn.tiny { padding: 4px 10px; font-size: .8rem; margin-top: 6px; }

@media (max-width: 820px) { .bg-doc { padding: 9mm; } }

/* ---- print ---- */
@media print {
  .site-header, .site-footer, .controls, .print-note, .ad-slot, .tool-copy, .no-print { display: none !important; }
  .container, .tool-layout, .preview-col, .ps-preview-wrap, #preview {
    display: block !important; margin: 0 !important; padding: 0 !important;
    max-width: none !important; width: auto !important; background: #fff !important;
    box-shadow: none !important; overflow: visible !important;
  }
  .bg-doc { zoom: 1 !important; transform: none !important; box-shadow: none !important; margin: 0 !important; }
  .bg-doc .edit:empty::before, .bg-table .cell:empty::before { visibility: hidden !important; }
  .bg-add, .col-del, .row-del { display: none !important; }
  /* don't print fully-empty rows */
  .bg-table tr.row-empty { display: none !important; }
  .bg-table .cell:hover, .bg-table .cell:focus,
  .bg-doc .edit:hover, .bg-doc .edit:focus { background: transparent !important; box-shadow: none !important; }
  /* keep coloured bars / shading on print */
  .bg-table th, .bg-table tr.total-row td, .bg-leftover, .bg-title-row {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}