:root{font-family:system-ui,sans-serif;color:#17253b;background:#f3f5f8;line-height:1.5}body{margin:0}header{display:flex;gap:2rem;align-items:center;background:#17253b;color:white;padding:1rem 2rem}header a{color:white;font-weight:bold}header form{margin-left:auto}main{max-width:1400px;margin:auto;padding:1.5rem}a{color:#124da0}h1{font-size:1.7rem}h2{font-size:1.25rem}section,.panel{background:white;border:1px solid #d5dce5;border-radius:8px;padding:1.25rem;margin:1rem 0}.notice{background:#e9efff;padding:1rem;border-left:4px solid #285dba}.warning{background:#fff4d6;padding:1rem;border-left:4px solid #a16800}.filters,.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}label{display:block;font-weight:600;font-size:.9rem}input,select,textarea{box-sizing:border-box;width:100%;font:inherit;border:1px solid #8c9aad;border-radius:4px;padding:.45rem}textarea{height:7rem}button{font:inherit;cursor:pointer;padding:.5rem .9rem;background:#245ba8;color:white;border:0;border-radius:4px}button.secondary{background:#526277}table{width:100%;border-collapse:collapse;font-size:.9rem}td,th{padding:.7rem;border-bottom:1px solid #d5dce5;text-align:left;vertical-align:top}.table{overflow-x:auto;background:white}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f3f5f8;padding:1rem;font-size:.85rem}.muted{color:#526277}.badge{font-weight:600}.errorlist{color:#9f1a24}.actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem}dl{display:grid;grid-template-columns:minmax(130px,220px) 1fr;gap:.4rem}dt{font-weight:600}dd{margin:0;overflow-wrap:anywhere}.pagination{display:flex;gap:1rem;padding:1rem}.comment{white-space:pre-wrap;overflow-wrap:anywhere}@media(max-width:650px){header{padding:1rem;gap:1rem}header span{display:none}main{padding:.75rem}dl{display:block}dd{margin-bottom:.6rem}}

/* The calendar's simple cards also work on a phone. */
article { border: 1px solid #ccd6e4; border-radius: .5rem; padding: 1rem; margin: 1rem 0; }
article p, section p { overflow-wrap: anywhere; }
nav { line-height: 2; }
input, select, textarea { max-width: 100%; box-sizing: border-box; }
header { flex-wrap: wrap; }
input[type=checkbox] { width: auto; min-width: 1.25rem; min-height: 1.25rem; }

/* Shared workspace and exact monetary values stay readable at phone widths. */
header { gap: 1rem; padding: 1rem 1.5rem; }
.brand { flex-shrink: 0; }
.main-navigation, .calendar-navigation { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.main-navigation { flex: 1 1 24rem; }
.main-navigation a, .calendar-navigation a { padding: .4rem 0; }
.account { display: flex; align-items: center; gap: 1rem; margin-left: auto; max-width: 100%; }
.account-identity { min-width: 0; overflow-wrap: anywhere; font-size: .9rem; }
.account-roles { list-style: none; margin: 0; padding: 0; }
.account-username { color: #d5dce5; font-size: .85rem; }
.account form { flex-shrink: 0; margin: 0; }
header span { display: inline; }
main, article, section, form, details { min-width: 0; }
h1, h2, h3, p, a, code, summary { overflow-wrap: anywhere; }
summary { cursor: pointer; }
button, summary { min-height: 44px; }
.status { display: inline-flex; align-items: baseline; gap: .45rem; font-weight: 600; }
.status::before { content: ''; display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; background: #64748b; flex-shrink: 0; }
.status-fact::before { background: #16733b; }
.status-overdue::before { background: #b64b00; }
.status-cancelled::before { background: #b42332; }
.position-amounts { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 1rem 0; }
.position-amounts div { min-width: 0; }
.position-amounts dt { color: #526277; font-size: .9rem; }
.position-amounts dd { font-variant-numeric: tabular-nums; }
.position-remaining dd { font-weight: 700; font-size: 1.15rem; }
.report-table td { overflow-wrap: anywhere; }
@media (max-width: 650px) {
  header { padding: .75rem; }
  .main-navigation { flex-basis: 100%; order: 2; }
  .account { flex: 1 1 100%; justify-content: space-between; }
  header span { display: inline; }
  .report-table, .report-table tbody, .report-table tr, .report-table td { display: block; }
  .report-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .report-table tr { background: white; border: 1px solid #d5dce5; border-radius: 8px; margin: 1rem 0; padding: .5rem; }
  .report-table td { border: 0; padding: .4rem; }
  .report-table td::before { content: attr(data-label); display: block; color: #526277; font-weight: 600; }
  .filters, .fields { grid-template-columns: minmax(0, 1fr); }
}