@font-face {
  font-family: "Boogaloo";
  src: url("fonts/Boogaloo-Regular.674e6a030ef6.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --togo-green: #006a4e;
  --togo-yellow: #ffce00;
  --togo-red: #d21034;
  --togo-ink: #173c30;
  --togo-soft-green: #e1f1e8;
  --togo-soft-yellow: #fff6cc;
  --togo-soft-red: #fce5e9;
  color: var(--togo-ink);
  background: #f7f9f2;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Boogaloo", "Segoe UI", sans-serif;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
}
h1 { color: var(--togo-green); }
h2 { font-size: 1.55rem; }
a { color: var(--togo-green); }
header {
  border-top: 6px solid var(--togo-green);
  border-bottom: 4px solid var(--togo-yellow);
  gap: 18px 28px;
}
.brand-logo { display: block; width: 120px; height: auto; flex-shrink: 0; }
.brand { gap: 18px; }
.brand small { color: var(--togo-green); }
header > nav { order: 2; flex-basis: 100%; gap: 12px 24px; }
header > nav a { padding: 5px 0; border-bottom: 3px solid transparent; }
header > nav a:hover { border-bottom-color: var(--togo-red); }
header .logout { order: 1; }
.eyebrow { color: var(--togo-green); }
.button, button { background: var(--togo-green); color: white; }
.button:hover, button:hover { background: #004e39; }
.secondary { background: white; color: var(--togo-green); border-color: #96b5a6; }
.secondary:hover { background: var(--togo-soft-green); }
.notice, .warning { background: var(--togo-soft-yellow); color: #514100; }
.notice { border-left: 4px solid var(--togo-yellow); }
.warning { border-left-color: var(--togo-yellow); }
.success, .badge, .next { background: var(--togo-soft-green); color: var(--togo-ink); }
.card:hover { border-color: var(--togo-green); box-shadow: 0 6px 20px #006a4e15; }
.errorlist, .unbalanced { color: var(--togo-red); }
.booking-income { border-left-color: var(--togo-green); }
.booking-expense { border-left-color: var(--togo-red); }
.booking-income .booking-amount { color: var(--togo-green); }
.booking-expense .booking-amount { color: var(--togo-red); }
.release-pending { color: #8e102c; font-weight: 600; }
.release-complete { color: #13482f; font-weight: 600; }
.balance-table .balance-stimmt, .balance-stimmt { background: var(--togo-soft-green); color: #13482f; }
.balance-table .balance-abweichung, .balance-abweichung { background: var(--togo-soft-red); color: #8e102c; }
.balance-table .balance-offen, .balance-offen { background: var(--togo-soft-yellow); color: #514100; }
.work-table th { background: #e4eee4; color: var(--togo-ink); }
.work-table tbody tr:nth-child(even) { background: #f0f6ee; }
.work-table tbody tr:hover { background: var(--togo-soft-yellow); }
.import-summary, .split-footer { background: var(--togo-soft-green); }
:focus-visible { outline-color: var(--togo-red); }
@media (max-width: 600px) {
  .brand-logo { width: 96px; }
  .brand { gap: 12px; }
  header > nav { gap: 10px 18px; }
}

/* The administration also serves its logo and heading font locally. */
#header { border-top: 6px solid var(--togo-green); border-bottom: 4px solid var(--togo-yellow); }
.togo-admin-logo { display: block; width: 96px; height: auto; background: white; border-radius: 6px; }
:root, html[data-theme="light"] {
  --primary: #006a4e;
  --secondary: #006a4e;
  --button-bg: #006a4e;
  --default-button-bg: #006a4e;
  --breadcrumbs-bg: #006a4e;
  --object-tools-bg: #006a4e;
}
html[data-theme="dark"] h1 { color: var(--body-loud-color); }
html[data-theme="dark"] a { color: var(--link-fg); }
/* Internal transfers have no income/expense colour. */
.booking-transfer { border-left: 6px solid #687b78; }
.transfer-balanced { background: #e1f1df; border-left: 6px solid #28783c; }
.transfer-warning { background: #fff0eb; border-left: 6px solid #bc2b27; }
.dashboard-month-reviews { margin-bottom: 32px; }
.member-trend { font-weight: 700; }
.member-trend-positive { color: #216b38; }
.member-trend-negative { color: #b32626; }
.member-trend span { font-size: 1.5em; vertical-align: middle; }
.audit-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.audit-chart-row { display: grid; grid-template-columns: 30px minmax(80px,1fr) minmax(150px,220px); gap: 14px; align-items: center; margin: 12px 0; }
.audit-chart-row span { font-size: .85rem; font-variant-numeric: tabular-nums; }
.audit-bar { height: 9px; margin: 3px 0; border-radius: 2px; }
.audit-income { background: #006a4e; }
.audit-expense { background: #d18e39; }
.audit-income-key { color: #006a4e; }
.audit-expense-key { color: #83571d; }
.audit-hash { overflow-wrap: anywhere; }
@media(max-width:600px) { .audit-chart-row { grid-template-columns: 25px minmax(60px,1fr); } .audit-chart-row span { grid-column: 2; } }

.collaboration { margin-top: 32px; }
.collaboration-recipients { margin: 16px 0; min-width: 0; }
.collaboration-recipient-list { max-height: 220px; overflow-y: auto; padding: 8px; }
.collaboration-recipient-list label { display: flex; gap: 10px; align-items: center; }
.collaboration input[type="checkbox"] { width: auto; }
.collaboration textarea { display: block; width: 100%; box-sizing: border-box; }
.collaboration-text { overflow-wrap: anywhere; }
.communication-icon { width: 24px; height: 24px; flex: 0 0 24px; vertical-align: middle; }
.communication-heading { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.communication-options { display: flex; flex-wrap: wrap; gap: 10px; }
.communication-choice { position: relative; display: inline-flex; gap: 9px; align-items: center; border: 2px solid #8b9c97; border-radius: 10px; padding: 10px 14px; cursor: pointer; font-weight: 700; }
.communication-choice input { position: absolute; width: 1px !important; height: 1px; opacity: 0; }
.communication-choice:has(input:checked) { background: #006a59; color: #fff; border-color: #006a59; }
.communication-choice:has(input:focus-visible) { outline: 3px solid #d18e39; outline-offset: 3px; }
.communication-choices { margin: 16px 0; min-width: 0; }
.communication-notifications { margin-bottom: 28px; }
.communication-unread { border-left: 5px solid #d18e39; }
.communication-done { border-left: 5px solid #006a59; }
.personal-password { max-width: 520px; margin-top: 28px; font-size: .9rem; }
.personal-password summary { cursor: pointer; font-weight: 700; }
.personal-password input { max-width: 360px; }
.balance-dashboard-account { display: flex; align-items: center; gap: 14px; padding: 18px 0; }
.balance-dashboard-logo { width: 58px; flex: 0 0 58px; height: 58px; object-fit: contain; background: #fff; border-radius: 4px; padding: 8px; box-sizing: border-box; }
.balance-dashboard-amount { min-width: 0; font-size: clamp(1.25rem, 3vw, 2rem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.communication-compact { display: grid; gap: 5px; margin-bottom: 20px; }
.communication-compact a { display: block; font-size: .95rem; padding: 3px 0; }
.collaboration article:target { outline: 2px solid #d18e39; outline-offset: 3px; }