:root {
  --ctl-neg: #c62828;
  --ctl-ok: #2e7d32;
  --ctl-warn-bg: #fff4e5;
  --ctl-warn-border: #f0a030;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ctl-neg: #ef6c6c;
    --ctl-ok: #7bc67e;
    --ctl-warn-bg: #3a2d12;
    --ctl-warn-border: #b07a1c;
  }
}

header nav { flex-wrap: wrap; }
header .menu { flex-wrap: wrap; }
.brand { font-weight: 700; text-decoration: none; }

.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.neg, .overdue { color: var(--ctl-neg); }
.overdue { font-weight: 700; }
.credit { color: var(--ctl-ok); }
.muted { color: var(--pico-muted-color); }
.small { font-size: 0.85em; }

.flash { padding: 0.75rem 1rem; border-radius: var(--pico-border-radius); border-left: 4px solid; }
.flash.ok { border-color: var(--ctl-ok); background: var(--pico-card-background-color); }
.flash.error { border-color: var(--ctl-neg); background: var(--pico-card-background-color); }
article.errors, article.warning { border-left: 4px solid var(--ctl-warn-border); background: var(--ctl-warn-bg); }
article.errors ul, article.warning ul { margin-bottom: 0; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.tile { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.tile strong { font-size: 1.5rem; }

.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
form.inline { display: inline; margin: 0; }
.row-actions { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; justify-content: flex-end; }
button.link {
  background: none; border: none; padding: 0; margin: 0; width: auto;
  color: var(--pico-primary); text-decoration: underline; font-size: inherit; cursor: pointer;
}
button.link.danger { color: var(--ctl-neg); }
button.small { padding: 0.25rem 0.75rem; font-size: 0.85em; margin: 0; }

table.entries td { vertical-align: top; }
tr.carry td { font-style: italic; }
.state-PENDING, .state-SENT { color: var(--ctl-warn-border); }
.state-APPLIED { color: var(--ctl-ok); }

.live-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 10;
  max-width: 40rem; margin: 0 auto; padding: 0.75rem 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; justify-content: space-between;
  background: var(--pico-card-background-color); border-left: 4px solid var(--pico-primary);
  border-radius: var(--pico-border-radius); box-shadow: var(--pico-card-box-shadow);
}

.filters .grid { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.login { max-width: 24rem; margin: 3rem auto; }

@media (max-width: 576px) {
  .tile strong { font-size: 1.25rem; }
  th, td { padding: 0.4rem 0.3rem; }
}