/* Budgeting in Money: the budget table and the transaction list.
   Everything here is built from the existing tokens, so dark mode comes free -
   app.css redefines the variables and nothing below has to know. */

/* ---------------------------------------------------------------- budget */

.budget{
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--surface);
  margin:var(--s4) 0;
}

.brow{
  display:grid;
  grid-template-columns:1.4fr .8fr 1fr .9fr;
  gap:var(--s3);
  align-items:center;
  padding:var(--s3) var(--s4);
  border-top:1px solid var(--line);
}
.brow:first-child{border-top:0}

.brow.bhead{
  background:var(--surface-2);
  color:var(--ink-3);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:600;
}

.brow.bsep{
  background:var(--sunken);
  color:var(--ink-3);
  font-size:13px;
}
.brow.bsep span:first-child{grid-column:1 / -1}

.bcat{display:flex;flex-direction:column;gap:2px;min-width:0}
.bcat b{color:var(--ink);font-weight:600}

/* The marker on a category whose months are wildly uneven. It is the single
   most useful thing on the page - it is where an annual bill is hiding inside
   an average - so it gets a colour rather than a footnote. */
.bcat i{
  font-style:normal;
  font-size:12px;
  color:var(--warn);
}

.bavg{color:var(--ink-2);font-variant-numeric:tabular-nums}
.brange{color:var(--ink-3);font-size:13px;font-variant-numeric:tabular-nums}
.brange em{font-style:normal;opacity:.75}

.bin input{
  width:100%;
  padding:8px 10px;
  border:1px solid var(--field-line);
  border-radius:var(--r-sm);
  background:var(--field);
  color:var(--ink);
  font:inherit;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.bin input:focus{
  outline:0;
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-ring);
}

.brow.lumpy{background:var(--surface-2)}

/* An over-budget bar has to read as over at a glance, not as a longer bar. */
.bars .track i.over{background:var(--bad)}

/* ---------------------------------------------------------------- txns */

.txns{
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--surface);
  margin:var(--s3) 0;
}

.txn{
  display:grid;
  grid-template-columns:110px 1fr 110px 180px;
  gap:var(--s3);
  align-items:center;
  padding:10px var(--s4);
  border-top:1px solid var(--line);
}
.txn:first-child{border-top:0}

.tdate{color:var(--ink-3);font-size:13px;white-space:nowrap}

.tdesc{
  color:var(--ink);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tamt{
  text-align:right;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  white-space:nowrap;
}
.tamt.in{color:var(--good)}

.tcat select{
  width:100%;
  padding:6px 8px;
  border:1px solid var(--field-line);
  border-radius:var(--r-sm);
  background:var(--field);
  color:var(--ink);
  font:inherit;
  font-size:13px;
}
.tcat form{margin:0}

/* A category nobody has confirmed. Dimmed rather than flagged: it is a guess,
   not a problem, and a page of warning triangles teaches people to ignore
   warning triangles. */
.txn.guessed .tcat select{color:var(--ink-2);border-style:dashed}

/* ---------------------------------------------------------------- narrow */

@media (max-width:820px){
  .brow{
    grid-template-columns:1fr auto;
    gap:var(--s2) var(--s3);
    padding:var(--s3);
  }
  .brow.bhead{display:none}
  .bcat{grid-column:1;grid-row:1}
  .bin{grid-column:2;grid-row:1 / span 2;align-self:center;width:120px}
  .bavg,.brange{
    grid-column:1;
    font-size:12px;
    color:var(--ink-3);
  }
  .bavg{grid-row:2}
  .brange{grid-row:3}
  .brow.bsep{display:block}

  .txn{
    grid-template-columns:1fr auto;
    gap:4px var(--s3);
    padding:var(--s3);
  }
  .tdate{grid-column:1;grid-row:1;font-size:12px}
  .tdesc{grid-column:1;grid-row:2;white-space:normal}
  .tamt{grid-column:2;grid-row:1 / span 2;align-self:center;font-weight:600}
  .tcat{grid-column:1 / -1;grid-row:3;margin-top:4px}
}

/* Printing a budget to argue with at the kitchen table is a real thing people
   do, and the inputs are unreadable as boxes on paper. */
@media print{
  .bin input{border:0;background:none;text-align:right;padding:0}
  .tcat{display:none}
  .txn{grid-template-columns:110px 1fr 110px}
}