.shell { max-width: 1440px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { height: 76px; background: #fffaf0; border-bottom: 1px solid #dfd3c0; display: flex; align-items: center; padding: 0 52px; gap: 24px; }
.logo { display: flex; align-items: baseline; gap: 2px; color: #1d1711; } .logo span:first-child { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.logo .dot { width: 8px; height: 8px; border-radius: 50%; background: #85c16f; display: inline-block; }
.navbar { padding: 20px 52px 0 52px; display: flex; gap: 6px; flex-wrap: nowrap; }
.navbar a { display: inline-flex; align-items: center; text-decoration: none; }
.page { padding: 28px 52px 52px 52px; display: flex; flex-direction: column; gap: 20px; }
.pagehead { display: flex; align-items: flex-end; gap: 16px; }
a.btn { display: inline-flex; align-items: center; text-decoration: none; color: #1d1711; }
a.btn.btn-primary { color: #fff; }
a.tab { text-decoration: none; display: inline-flex; align-items: center; }
.tabs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sep { width: 1px; height: 28px; background: #dfd3c0; margin: 0 6px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.card.pad { padding: 24px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.crumbs a { color: #e6532e; font-weight: 700; }
.nowrap { white-space: nowrap; }
.link { color: #e6532e; font-weight: 700; cursor: pointer; }
tr.klik { cursor: pointer; } tr.klik:hover td { background: #f8f2e6; }
.overlay { position: fixed; inset: 0; background: rgba(29, 23, 17, 0.45); z-index: 40; }
.modal { position: fixed; top: 40px; left: 50%; transform: translateX(-50%); width: 900px; max-width: calc(100vw - 32px); max-height: calc(100vh - 80px); overflow: auto; background: #fffaf0; border: 1px solid #c9bba4; border-radius: 8px; padding: 24px; display: flex; flex-direction: column; gap: 18px; z-index: 41; box-shadow: 0 12px 40px rgba(29, 23, 17, 0.25); box-sizing: border-box; }
input:disabled { background: #f3eee2; color: #5c5047; }
.cell-input.override, input.override { background: #fbeae4; border-color: #e6532e; }
.small { font-size: 12px; }
.formule { font-family: Consolas, "Courier New", monospace; font-size: 12.5px; background: #f3eee2; padding: 2px 6px; border-radius: 4px; }
.kpi .label { margin-bottom: 4px; }
.pos { color: #1e6b45; }

th.sorteer { padding: 0; }
th.sorteer a { display: flex; align-items: center; justify-content: inherit; gap: 4px; color: inherit; padding: 14px 16px; }
.dense th.sorteer a { padding: 9px 8px; }
th.sorteer.num a { justify-content: flex-end; }
th.sorteer a:hover { color: #e6532e; }
th.sorteer .pijl { font-size: 11px; opacity: 0.35; display: none; }
th.sorteer a:hover .pijl { opacity: 0.7; display: inline; }
th.sorteer-actief .pijl { display: inline; }
th.sorteer-actief { color: #e6532e; }
th.sorteer-actief .pijl { opacity: 1; }

/* Begroting: de tabel is breed, dus laat lange namen afbreken in plaats van horizontaal te scrollen. */
.begroting td:first-child { white-space: normal; min-width: 120px; }
.begroting th, .begroting td { padding-left: 6px; padding-right: 6px; }