/* Report page: month and pay-period controls, budget bars, the
   over-budget and savings box, paycheck summary and month-by-month table. */

/* paycheck summary */
.pc-hero{text-align:center; padding:4px 0 10px;}
.pc-amt{font-size:34px; font-weight:800; letter-spacing:-0.02em; color:var(--pine);}
.pc-amt.short{color:var(--rust);}
.pc-sub{font-size:13px; color:var(--muted); margin-top:2px;}
.pc-meter{height:8px; background:var(--paper-2); border-radius:5px; overflow:hidden; margin:2px 0 12px;}
.pc-meter-fill{height:100%; background:var(--pine-2); border-radius:5px;}
.pc-meter-fill.over{background:var(--rust);}
.pc-row{display:flex; justify-content:space-between; gap:10px; padding:7px 0; font-size:14px; border-top:1px solid var(--line);}
.pc-row .lbl{color:var(--ink);}
.pc-row .lbl small{display:block; color:var(--muted); font-size:12px;}
.pc-row .val{font-weight:700; white-space:nowrap;}
.pc-row.total{font-weight:800;}
.pc-row .edit-link{font-size:12.5px; padding:0; margin-left:6px;}
/* month-by-month table */
.mom-wrap{overflow-x:auto; margin:0 -4px;}
.mom-table{width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums;}
.mom-table th, .mom-table td{padding:7px 4px; text-align:right; white-space:nowrap; border-top:1px solid var(--line);}
.mom-table th{font-size:11.5px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.03em; border-top:none;}
.mom-table th:first-child, .mom-table td:first-child{text-align:left; white-space:normal;}
.mom-table td:first-child{font-weight:600; display:flex; align-items:center;}
.mom-table td.over{color:var(--rust); font-weight:700;}
.mom-table td.zero{color:var(--muted);}
.mom-table tr.total td{font-weight:800; border-top:2px solid var(--line);}
.mom-table .current{background:var(--paper);}
.rolled{font-size:11.5px; color:var(--pine-2); font-weight:600;}
/* report */
.range-row{display:flex; gap:8px; margin-bottom:6px;}
.range-row input{flex:1;}
.quick-row{display:flex; gap:8px; margin-bottom:14px;}
.quick-btn{flex:1; padding:8px; border-radius:9px; border:1px solid var(--line); background:var(--paper); font-size:12.5px; font-weight:600;}
.quick-btn.active{background:var(--ink); color:var(--white); border-color:var(--ink);}
#periodRow .quick-btn{white-space:nowrap; padding:8px 4px;}

.month-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.month-label{font-size:17px; font-weight:700;}
.month-arrow{
  width:40px; height:36px; border-radius:9px; border:1px solid var(--line);
  background:var(--white); color:var(--ink); font-size:20px; line-height:1;
}
.month-arrow:disabled{opacity:.35;}

.total-hero{text-align:center; padding:10px 0 18px;}
.total-hero .amt{font-size:38px; font-weight:800; letter-spacing:-0.02em;}
.total-hero .sub{font-size:13px; color:var(--muted); margin-top:2px;}

.bar-row{margin-bottom:12px;}
.bar-top{display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:5px;}
.bar-top .cat{font-weight:600;}
.bar-track{height:8px; background:var(--paper-2); border-radius:5px; overflow:hidden;}
.bar-fill{height:100%; background:var(--cat, var(--pine-2)); border-radius:5px;}
.split-row{display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid var(--line); font-size:14px;}
.split-row:first-of-type{border-top:none;}

.bar-fill.over{background:var(--rust);} /* over budget is a status, so it overrides the category colour */
.bar-top .over-label{color:var(--rust); font-weight:700;}
.bar-top{gap:10px; align-items:baseline;}
.bar-top .cat{min-width:0;}
.bar-top > span:last-child{white-space:nowrap; flex-shrink:0;}
.over-line, .left-line{font-size:12px; margin-top:4px; text-align:right;}
.over-line{color:var(--rust); font-weight:700;}
.left-line{color:var(--muted);}

.over-row{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:8px 0; border-bottom:1px solid var(--line);}
.over-row .over-cat{font-weight:600; font-size:14.5px;}
.over-row .over-note{font-size:12px; color:var(--muted);}
.over-row .over-amt{font-weight:700; color:var(--rust); white-space:nowrap;}
.savings-box{margin-top:14px; padding:12px 14px; border-radius:10px; background:var(--paper-2);}
.savings-box .savings-amt{font-size:22px; font-weight:800;}
.savings-box .savings-amt.ok{color:var(--pine);}
.savings-box .savings-amt.short{color:var(--rust);}
.savings-box .savings-sub{font-size:12.5px; color:var(--muted); margin-top:2px;}