/* ============================================================================
   F12  XERO INVOICES: DATED WHEN APPROVED, A WARNING BEFORE THE CAP
   Tokens only, from app.css, so both themes work without a second set of
   colours. The approvals meter is a bar like the Money screen's own: green
   while there is room, amber from the warning point, red at Xero's limit. Its
   width is carried on data-w and set by applyWidths (the CSP forbids inline
   styles). The small dot before a line follows F11's: green done, amber a
   problem, blue on its way, grey waiting on something.
   ============================================================================ */

/* ------------------------------------------------------ the invoice drawer */
.f12-inv h4{margin-top:4px}
.f12-lives{border-left:3px solid var(--info);padding-left:10px}
.f12-open{margin:4px 0 8px}
.f12-open a.btn{text-decoration:none}
.f12-line{position:relative;padding-left:14px}
.f12-line::before{
  content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;border-radius:50%;
  background:var(--ink-3)
}
.f12-line.f12-good::before{background:var(--good)}
.f12-line.f12-warn::before{background:var(--warn)}
.f12-line.f12-info::before{background:var(--info)}
.f12-line.f12-mute::before{background:var(--line)}
.f12-dim{color:var(--ink-3)}
.note.f12-q{border-left-color:var(--info)}
.f12-btns{margin:2px 0 6px}
.f12-btns .btn{white-space:normal;text-align:left;line-height:1.3}

/* ------------------------------------------------------------- Money */
.f12-cap{margin-bottom:18px}
.f12-meter{border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:var(--panel, transparent)}
.f12-meter-t{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;margin-bottom:8px}
.f12-meter-t b{font-size:15px}
.f12-left{color:var(--ink-2);font-size:13px}
.f12-bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.f12-bar-f{height:100%;width:0;border-radius:4px;background:var(--good)}
.f12-near .f12-bar-f{background:var(--warn)}
.f12-full .f12-bar-f{background:var(--crit)}
.f12-near{border-color:var(--warn)}
.f12-full{border-color:var(--crit)}
.f12-near .f12-left{color:var(--warn)}
.f12-full .f12-left{color:var(--crit)}
.f12-months{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.f12-m{font-size:12px;padding:2px 8px;border-radius:10px;background:var(--line);color:var(--ink-2);border:0}
.f12-m.f12-near{background:var(--warn-bg);color:var(--warn)}
.f12-m.f12-full{background:var(--crit-bg);color:var(--crit)}
.f12-cap .x-note{margin-top:10px}
[data-f12="cap"] .tw td .pill{white-space:nowrap}
[data-f12="cap"] tr[hidden]{display:none}
.f12-more{margin-top:8px}

@media(max-width:700px){
  .f12-btns .btn{text-align:center}
  .f12-line{font-size:13px}
  .f12-meter{padding:10px 12px}
  .f12-meter-t b{font-size:14px}
}