:root {
  --bg: #f4f5f7;
  --card-bg: #ffffff;
  --text: #1f2430;
  --text-muted: #6b7280;
  --border: #e2e4e9;
  --accent: #3b5bdb;
  --accent-hover: #2f4bc4;
  --overdue-bg: #fdecec;
  --overdue-border: #e0402f;
  --overdue-text: #b0281a;
  --column-header: #eef0f4;
  --shadow: 0 1px 2px rgba(20, 20, 43, 0.06);
  --done-bg: #f3f6f2;
  --done-header: #e4efe0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.app-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
}

.app-header h1 {
  margin: 0;
  font-size: 20px;
}

.header-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 6px;
}
.header-nav a {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}
.header-nav a:hover { text-decoration: underline; }

.home-nav-btn {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: #1f9d47;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none !important;
}
.home-nav-btn:hover { background: #17843a; }

.config-warning {
  margin-top: 8px;
  font-size: 13px;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-block;
}
.config-warning.hidden { display: none; }
.config-warning code {
  background: rgba(0,0,0,0.06);
  padding: 1px 5px;
  border-radius: 4px;
}

.board-tier {
  display: flex;
  justify-content: center;
  padding: 0 20px;
}
.board-tier .column {
  width: min(320px, 100%);
}

.board-connector {
  margin: 0 auto;
}

.board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  padding: 20px;
  align-items: start;
}

.column {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  min-height: 120px;
  box-shadow: var(--shadow);
}

.column-header {
  padding: 14px 16px;
  background: var(--column-header);
  border-bottom: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.column-header h2,
.column-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.column-header-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dept-verantw {
  font-size: 10px;
  color: var(--text-muted);
}

.column-count {
  font-size: 12px;
  color: var(--text-muted);
  background: rgba(0,0,0,0.05);
  border-radius: 999px;
  padding: 2px 8px;
}

.todo-list {
  list-style: none;
  margin: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 40px;
}

.todo-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 10px 6px;
  text-align: center;
}

.todo-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--card-bg);
  cursor: pointer;
}

.todo-card.overdue {
  background: var(--overdue-bg);
  border-color: var(--overdue-border);
}

.todo-card.done .todo-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.completed-column .column-header {
  background: var(--done-header);
}

.completed-column .todo-list {
  background: var(--done-bg);
}

.dept-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
  padding: 1px 6px;
  margin-right: 6px;
  vertical-align: middle;
}

.todo-check {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

.todo-body {
  flex: 1;
  min-width: 0;
}

.todo-title {
  font-weight: 600;
  font-size: 14px;
  word-break: break-word;
}

.todo-card.overdue .todo-title,
.todo-card.overdue .todo-deadline {
  color: var(--overdue-text);
}

.todo-description {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
  word-break: break-word;
  white-space: pre-wrap;
}

.todo-deadline {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.todo-deadline::before {
  content: "📅 ";
}

.overdue-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--overdue-border);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

.add-btn {
  margin: 10px;
  padding: 8px 10px;
  border: 1px dashed var(--border);
  background: transparent;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
}
.add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

dialog {
  border: none;
  border-radius: 10px;
  padding: 0;
  width: min(420px, 90vw);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}
dialog::backdrop {
  background: rgba(15, 17, 26, 0.45);
}

dialog form {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

dialog form h2 {
  margin: 0 0 4px 0;
  font-size: 17px;
}

dialog form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-muted);
}

dialog form input,
dialog form select,
dialog form textarea {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  resize: vertical;
}

dialog form input:read-only {
  background: var(--bg);
  color: var(--text-muted);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.btn-primary, .btn-secondary {
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 14px;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn-secondary:hover { background: var(--bg); }

.hidden { display: none !important; }

/* ---------- Login / rechten ---------- */
.auth-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  margin-left: auto;
}
.header-nav .auth-status { margin-left: 16px; }
.auth-status-floating {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 500;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  box-shadow: var(--shadow);
}
body.has-auth-floating {
  padding-top: calc(48px + env(safe-area-inset-top, 0px));
}
@media (max-width: 480px) {
  body.has-auth-floating { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
}
.auth-user { color: var(--text-muted); }
.auth-login-btn,
.auth-logout-btn {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
}
.auth-login-btn:hover,
.auth-logout-btn:hover { background: var(--accent); color: #fff; }
.auth-settings-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
}
.auth-settings-link:hover { text-decoration: underline; }

.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}
.auth-tab {
  flex: 1;
  padding: 12px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.auth-tab.active {
  color: var(--accent);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.auth-error {
  color: var(--overdue-text);
  font-size: 13px;
  margin: 0;
}

.auth-pending {
  color: var(--overdue-text);
  font-size: 12px;
  font-weight: 600;
}
.auth-pending-link {
  text-decoration: none;
  background: var(--overdue-bg);
  border: 1px solid var(--overdue-border);
  border-radius: 999px;
  padding: 2px 10px;
}
.auth-pending-link:hover { text-decoration: underline; }

.auth-no-access {
  max-width: 480px;
  margin: 60px auto;
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.auth-no-access button { margin-top: 14px; }

.home-login-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--card-bg);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.home-login-banner p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

/* ---------- Agenda ---------- */

.agenda-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px;
}

.agenda-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.event-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

.month-heading {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 14px;
}
.month-heading:first-child { margin-top: 0; }

.month-heading.m0  { color: #3b5bdb; }
.month-heading.m1  { color: #c23b8f; }
.month-heading.m2  { color: #1f9d5a; }
.month-heading.m3  { color: #b4890a; }
.month-heading.m4  { color: #7b3bdb; }
.month-heading.m5  { color: #178fae; }
.month-heading.m6  { color: #c2653b; }
.month-heading.m7  { color: #5a9d1f; }
.month-heading.m8  { color: #3b5bdb; }
.month-heading.m9  { color: #b46a0a; }
.month-heading.m10 { color: #1f9d47; }
.month-heading.m11 { color: #c23b52; }

.event-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
}
.event-card:hover { border-color: var(--accent); }

.event-date-badge {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #e7ecfb;
}
.event-date-badge.large {
  width: 64px;
  height: 64px;
  border-radius: 12px;
}
.event-day {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
}
.event-month {
  font-size: 11px;
  text-transform: uppercase;
  opacity: 0.75;
}

.event-date-badge.m0  { background: #e7ecfb; }
.event-date-badge.m1  { background: #fbe7f3; }
.event-date-badge.m2  { background: #e7fbf0; }
.event-date-badge.m3  { background: #fff6d9; }
.event-date-badge.m4  { background: #eee7fb; }
.event-date-badge.m5  { background: #e7f6fb; }
.event-date-badge.m6  { background: #fbeee7; }
.event-date-badge.m7  { background: #f0fbe7; }
.event-date-badge.m8  { background: #e7ecfb; }
.event-date-badge.m9  { background: #fbe9d9; }
.event-date-badge.m10 { background: #e7fbe9; }
.event-date-badge.m11 { background: #fbe7ea; }

.event-card-title {
  font-weight: 600;
  font-size: 14px;
}

.event-card-when {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.back-link {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

.event-detail-card {
  display: flex;
  gap: 16px;
  padding: 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}

.event-detail-card h2 {
  margin: 0 0 4px 0;
  font-size: 18px;
}

.event-detail-body {
  flex: 1;
  min-width: 0;
}

.event-detail-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.event-detail-title-row h2 { flex: 1; }
.event-detail-title-row .btn-secondary {
  padding: 4px 12px;
  font-size: 12px;
  flex-shrink: 0;
}

.event-detail-when {
  font-size: 13px;
  color: var(--text-muted);
}

.event-detail-description {
  margin-top: 10px;
  font-size: 14px;
  white-space: pre-wrap;
}

.linked-todos {
  margin-bottom: 24px;
}

.footer-link {
  display: block;
  text-align: center;
  margin: 8px 0 28px;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}
.footer-link:hover { text-decoration: underline; }

.home-link { color: var(--text-muted); }

/* ---------- Startscherm ---------- */

.home-header {
  background: var(--accent);
  border-bottom: none;
  padding: 18px 24px;
}
.home-header h1 {
  color: #fff;
  font-size: 18px;
}

.home-page {
  max-width: 420px;
  margin: 0 auto;
  padding: 24px 20px;
}

.form-page {
  max-width: 480px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

.form-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 24px;
}

.form-intro {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 4px 0 20px;
}

.form-card form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-card form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-muted);
}

.form-card form input,
.form-card form select {
  font: inherit;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}

.form-card form button[type="submit"] {
  margin-top: 6px;
}

.form-back-link {
  display: inline-block;
  margin-top: 16px;
  text-decoration: none;
}

.home-section {
  margin-top: 32px;
}

.home-section-title {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--accent);
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  min-height: 110px;
}
.tile:hover { border-color: var(--accent); }

.tile.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.tile-icon {
  font-size: 34px;
  line-height: 1;
}

.tile-label {
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  text-align: center;
}

.tile-in-progress {
  position: relative;
}
.in-progress-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #7b3bdb;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: var(--shadow);
}

.tile-soon {
  font-size: 11px;
  color: var(--text-muted);
}

/* ---------- Kleurkompas ---------- */

.kk-body {
  background: #f7f2e7;
}

.kk-page {
  max-width: 420px;
  margin: 0 auto;
  padding: 28px 20px 12px;
  text-align: center;
}

.kk-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.kk-title {
  font-size: 24px;
  margin: 10px 0 6px;
  line-height: 1.25;
}
.kk-title em {
  color: #1f9d5a;
  font-style: italic;
}

.kk-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 20px;
}

.kk-compass-img {
  width: 100%;
  max-width: 260px;
  margin: 0 auto 24px;
  display: block;
}

.kk-name-input {
  display: block;
  width: 100%;
  padding: 10px 16px;
  margin-bottom: 14px;
  border: 1.5px solid #a9c9ab;
  border-radius: 999px;
  background: #eef5ec;
  font: inherit;
  text-align: center;
  color: var(--text);
}
.kk-name-input:focus { outline: 2px solid var(--accent); }

.kk-start-btn {
  display: block;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: 700;
  cursor: not-allowed;
}
.kk-start-btn:not(:disabled) {
  color: #fff;
  background: var(--accent);
  cursor: pointer;
}
.kk-start-btn:not(:disabled):hover { background: var(--accent-hover); }

.kk-browse-btn {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.kk-browse-btn:hover { background: #eef1fc; }

.kk-progress {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.kk-question-title {
  font-size: 32px;
  line-height: 1.2;
  margin: 0 0 24px;
}
@media (min-width: 380px) {
  .kk-question-title { font-size: 45px; }
}

.kk-answers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kk-answer-btn {
  padding: 20px 18px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.kk-answer-btn:hover {
  background: var(--accent-hover);
}
.kk-answer-btn.kk-answer-selected {
  background: #1f2f8f;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.5);
}
.kk-answer-btn:disabled {
  opacity: 1;
  cursor: default;
}

.kk-result-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 18px;
}
#kk-result-name {
  font-size: 17px;
  font-weight: 700;
  color: #d22d37;
}

.kk-score-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 30px;
}

.kk-score-box {
  border-radius: 10px;
  padding: 14px 10px;
}
.kk-score-box.blauw { background: #d9eafb; }
.kk-score-box.rood  { background: #fbe0e2; }
.kk-score-box.groen { background: #e0f2e6; }
.kk-score-box.geel  { background: #fbf1d9; }

.kk-score-label {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
}
.kk-score-box.blauw .kk-score-label { color: #0070c0; }
.kk-score-box.rood  .kk-score-label { color: #d22d37; }
.kk-score-box.groen .kk-score-label { color: #239155; }
.kk-score-box.geel  .kk-score-label { color: #b4890a; }

.kk-score-value {
  font-size: 16px;
  color: var(--text-muted);
}
.kk-score-value.kk-score-main {
  font-weight: 700;
}
.kk-score-value.kk-score-high {
  color: #1f9d47;
  font-weight: 700;
  font-size: 19px;
}

.kk-result-text {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.kk-color-bar {
  width: 100%;
  height: 22px;
  border-radius: 11px;
  margin-bottom: 12px;
}

.kk-main-color-heading {
  margin-bottom: 32px;
}

.kk-main-color-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.kk-main-color-names {
  font-size: 18px;
  font-weight: 700;
}

.kk-detail-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.kk-detail-btn {
  padding: 12px;
  border: none;
  border-radius: 8px;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.kk-detail-btn.rood  { background: #d22d37; }
.kk-detail-btn.groen { background: #239155; }
.kk-detail-btn.geel  { background: #d4a000; }
.kk-detail-btn.blauw { background: #236ebe; }
.kk-detail-btn:hover { filter: brightness(1.08); }

.kk-result-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.kk-saved-btn {
  padding: 10px 20px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.kk-saved-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}
.kk-saved-btn:disabled {
  border-color: var(--border);
  background: #f0f0f0;
  color: var(--text-muted);
  cursor: not-allowed;
}

.kk-restart-btn {
  padding: 10px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.kk-restart-btn:hover { background: #eef1fc; }

.kk-back-btn {
  display: block;
  margin: 0 0 16px;
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.kk-back-btn:hover { text-decoration: underline; }

#kk-color-detail {
  --kk-theme: var(--accent);
  --kk-theme-tint: #eef1fc;
  text-align: left;
}

.kk-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.kk-detail-bar {
  width: 6px;
  height: 22px;
  border-radius: 3px;
  background: var(--kk-theme);
  flex-shrink: 0;
}

.kk-detail-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--kk-theme);
}

.kk-detail-subtitle {
  font-size: 26px;
  margin: 0 0 14px;
  color: var(--kk-theme);
}

.kk-detail-text {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 18px;
}

.kk-detail-heading {
  font-size: 15px;
  margin: 0 0 8px;
  color: var(--kk-theme);
}

.kk-detail-box {
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.kk-strengths-box {
  background: var(--kk-theme-tint);
}
.kk-pressure-box {
  background: var(--card-bg);
  border: 1px solid var(--border);
}
.kk-pressure-box .kk-detail-text,
.kk-strengths-box .kk-detail-text { margin-bottom: 0; }

.kk-strengths-list {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
}

.kk-growtip {
  margin-bottom: 20px;
}

.kk-detail-team-img {
  width: 100%;
  max-width: 320px;
  display: block;
  margin: 0 auto 16px;
}

.kk-functions-bar {
  background: var(--kk-theme-tint);
  border-radius: 10px;
  padding: 12px 16px;
  text-align: center;
  margin-bottom: 20px;
}

.kk-functions-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.kk-functions-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--kk-theme);
}

/* ---------- Functie ---------- */

.fn-body {
  background: #eaf3fc;
}

.fn-page {
  max-width: 420px;
  margin: 0 auto;
  padding: 28px 20px 12px;
  text-align: center;
}

.fn-view.hidden { display: none; }

.fn-title {
  font-size: 26px;
  margin: 0 0 10px;
  line-height: 1.25;
}
.fn-title-accent {
  color: #236ebe;
  font-weight: 600;
}

.fn-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 20px;
}

.fn-icon-img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 auto 20px;
  display: block;
}

.fn-instructions-title {
  text-align: left;
  font-size: 14px;
  margin: 0 0 10px;
}

.fn-instructions {
  text-align: left;
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 10px;
  color: var(--text);
}

.fn-name-input {
  display: block;
  width: 100%;
  padding: 10px 16px;
  margin: 16px 0 14px;
  border: 1.5px solid #a9c9ab;
  border-radius: 999px;
  background: #eef5ec;
  font: inherit;
  text-align: center;
  color: var(--text);
}
.fn-name-input:focus { outline: 2px solid #236ebe; }

.fn-start-btn {
  display: block;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 999px;
  background: #e3e3e3;
  color: #9a9a9a;
  font: inherit;
  font-weight: 700;
  cursor: not-allowed;
}
.fn-start-btn:not(:disabled) {
  color: #fff;
  background: #2f5233;
  cursor: pointer;
}
.fn-start-btn:not(:disabled):hover { background: #24401f; }

.fn-browse-btn {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  border: 1.5px solid #236ebe;
  border-radius: 999px;
  background: #fff;
  color: #236ebe;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.fn-browse-btn:hover { background: #eaf3fc; }

.fn-progress {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #b5651d;
  text-align: left;
  margin-bottom: 8px;
}

.fn-question-title {
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 18px;
  color: #236ebe;
}

.fn-answers {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}

.fn-answer-btn {
  position: relative;
  padding: 18px 16px;
  border: 1.5px solid #cfd8e3;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.fn-answer-btn:hover { border-color: #236ebe; }
.fn-answer-btn.selected {
  background: #70ad47;
  border-color: #4c7a2d;
  color: #fff;
}
.fn-answer-btn.selected-second {
  background: #d5e8c9;
  border-color: #a9d18e;
  color: #375823;
}

.fn-answer-badge {
  display: none;
  position: absolute;
  top: -9px;
  left: -9px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #4c7a2d;
  color: #4c7a2d;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.fn-answer-badge:not(:empty) { display: flex; }

.fn-next-btn {
  display: block;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 10px;
  background: #e3e3e3;
  color: #9a9a9a;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: not-allowed;
}
.fn-next-btn:not(:disabled) {
  background: #236ebe;
  color: #fff;
  cursor: pointer;
}
.fn-next-btn:not(:disabled):hover { background: #1c5896; }

.fn-result-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 18px;
}
#fn-result-name { font-size: 17px; }

.fn-main-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  padding: 14px;
  margin-bottom: 16px;
}
.fn-main-label {
  font-weight: 700;
  font-size: 15px;
}
.fn-main-score {
  color: #1f9d47;
  font-weight: 700;
  font-size: 17px;
  margin-top: 2px;
}

.fn-score-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 20px;
}
.fn-score-box {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  padding: 8px 4px;
}
.fn-score-label {
  font-size: 11px;
  font-weight: 600;
}
.fn-score-value {
  font-size: 12px;
  color: var(--text);
  margin-top: 2px;
}
.fn-score-value.fn-score-high {
  color: #1f9d47;
  font-weight: 700;
}

.fn-score-team {
  grid-column: 1 / -1;
  margin-top: 4px;
  border-color: var(--accent);
  background: #eef1fc;
}
.fn-score-team .fn-score-label { color: var(--accent); }
.fn-score-team .fn-score-value { color: var(--accent); font-weight: 700; }

.fn-result-text {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.fn-cta-text {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.fn-detail-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.fn-detail-btn {
  padding: 12px 8px;
  border: none;
  border-radius: 8px;
  background: #b9c9d6;
  color: #1f2430;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.fn-detail-btn:hover { filter: brightness(0.96); }

.fn-result-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.fn-saved-btn {
  padding: 10px;
  border: none;
  border-radius: 999px;
  background: #236ebe;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: not-allowed;
  opacity: 0.9;
}
.fn-restart-btn {
  padding: 10px;
  border: 1.5px solid #236ebe;
  border-radius: 999px;
  background: #fff;
  color: #236ebe;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.fn-restart-btn:hover { background: #eaf3fc; }

.fn-back-btn {
  display: block;
  margin: 0 0 16px;
  background: none;
  border: none;
  color: #236ebe;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.fn-back-btn:hover { text-decoration: underline; }

#fn-detail {
  text-align: left;
}

.fn-detail-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.fn-detail-bar {
  width: 6px;
  height: 22px;
  border-radius: 3px;
  background: #236ebe;
  flex-shrink: 0;
}
.fn-detail-badge {
  display: inline-block;
  background: #d9e6f2;
  color: #236ebe;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 6px 14px;
  border-radius: 999px;
}

.fn-detail-subtitle {
  font-size: 22px;
  color: #236ebe;
  margin: 0 0 14px;
}

.fn-detail-text {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 18px;
}

.fn-detail-heading {
  font-size: 15px;
  margin: 0 0 8px;
  color: #236ebe;
}

.fn-detail-box {
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.fn-taken-box {
  background: #fbf1d9;
}
.fn-verwacht-box {
  background: #d9eafb;
}
.fn-verwacht-box .fn-detail-text { margin-bottom: 0; }

.fn-taken-list {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
}

/* ---------- Boekhouding ---------- */

.bk-page {
  padding: 20px;
}

.laatst-gewijzigd-info {
  font-size: 12px;
  color: var(--text-muted);
  text-align: left;
  padding: 0 20px;
  margin: 2px 0 20px;
}

.bk-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bk-product-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
}

.bk-regels-label {
  font-size: 13px;
  color: var(--text-muted);
}

.bk-regels-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bk-regel-row {
  display: grid;
  grid-template-columns: 2fr 0.8fr 1fr auto;
  gap: 6px;
  align-items: center;
}
.bk-regel-row select,
.bk-regel-row input {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  width: 100%;
}

.bk-regel-remove {
  background: none;
  border: none;
  color: var(--overdue-border);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 4px;
}

.bk-regel-add-btn {
  align-self: flex-start;
  margin-top: 4px;
}

.bk-regels-total {
  font-size: 13px;
  margin-top: 6px;
  text-align: right;
}

.bk-hub-page {
  max-width: 560px;
}

.bk-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
  max-width: 900px;
}

.bk-stat-box {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 8px;
  box-shadow: var(--shadow);
  min-width: 0;
}
.bk-stat-total { background: #eef1fc; border-color: var(--accent); }
.bk-stat-rode { background: #fdecec; border-color: var(--overdue-border); }
.bk-stat-paarse { background: #f2e9fb; border-color: #7b3bdb; }
.bk-stat-clickable {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.bk-stat-clickable:hover { border-color: var(--accent); }
.bk-stat-clickable .bk-stat-label { color: var(--accent); }

.bk-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.bk-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0 12px;
}

.bk-schulden-group-row td {
  background: var(--column-header);
  font-weight: 600;
  padding-top: 10px;
}

.bk-schulden-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.bk-schulden-link:hover { text-decoration: underline; }

.todo-deadline-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.deadline-history-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.deadline-history-btn:hover { border-color: var(--accent); color: var(--accent); }

.laatst-gewijzigd-btn {
  margin-left: 6px;
  vertical-align: middle;
}

.rechten-matrix-table th,
.rechten-matrix-table td {
  padding: 6px 8px;
  font-size: 13px;
  white-space: nowrap;
}
.rechten-matrix-table select {
  font-size: 12px;
  padding: 3px 4px;
}

button.opgeslagen-tab-btn {
  font: inherit;
  border: 1px solid var(--border);
  background: var(--card-bg);
  cursor: pointer;
  width: 100%;
}

.bk-stat-value {
  font-size: clamp(13px, 4.2vw, 19px);
  font-weight: 700;
  white-space: nowrap;
}

.bk-board {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bk-table-section { width: 100%; }

.bk-chart-section {
  width: 100%;
  margin-top: 20px;
}

.bk-chart-wrap {
  position: relative;
  padding: 16px;
  height: 280px;
}

.bk-filter-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 10px 14px;
  background: var(--column-header);
  border-bottom: 1px solid var(--border);
}
.bk-filter-input {
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  min-width: 0;
}
.bk-filter-input:focus { outline: 2px solid var(--accent); }

.bk-table-wrap,
.kk-results-table-wrap {
  overflow-x: auto;
}

.bk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

.bk-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--column-header);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  position: sticky;
  top: 0;
}

.bk-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}

.bk-table tbody tr.bk-data-row { cursor: pointer; }
.bk-table tbody tr.bk-data-row:hover { background: #f5f7fd; }

.bk-table td.bk-num,
.bk-table th.bk-num { text-align: right; }
.bk-table td.bk-num { font-variant-numeric: tabular-nums; }
.bk-table td.bk-wrap { white-space: normal; min-width: 160px; }

.bk-month-row td {
  background: var(--bg);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding-top: 12px;
  padding-bottom: 12px;
}

.bk-month-row.bk-month-row-highlight td {
  background: #fff3b0;
  transition: background 0.3s ease;
}

.bk-totals-row td {
  background: #eef1fc;
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  padding-top: 6px;
  padding-bottom: 6px;
}

.bk-betaal-bank { color: #236ebe; font-weight: 600; }
.bk-betaal-kas { color: #7b3bdb; font-weight: 600; }

.bk-table td a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.bk-table td a:hover { text-decoration: underline; }

.bk-month-row-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bk-totals-btn {
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.bk-totals-btn:hover { background: var(--accent-hover); }

.totals-dialog-body { padding: 20px; width: min(340px, 90vw); }

.totals-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.totals-dialog-header h2 { margin: 0; font-size: 18px; }

.totals-close-btn {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}
.totals-close-btn:hover { color: var(--text); }

.totals-box {
  background: #eef1fc;
  border-radius: 10px;
  padding: 4px 16px;
}

.totals-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.totals-row:last-of-type { border-bottom: none; }

.totals-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
}
.totals-value {
  font-weight: 700;
  color: var(--accent);
}

.totals-row-total {
  margin: 6px 0 10px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 8px;
  border-bottom: none;
}

.bk-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  color: var(--text);
}

.bk-tag-orange {
  background: #fdead0;
  color: #b4650a;
}

.bk-list {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bk-product-info {
  font-size: 13px;
  color: var(--text-muted);
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
}
.bk-product-info strong { color: var(--text); }

.bk-margin-positive { color: #1f9d47; font-weight: 700; }
.bk-margin-negative { color: #b0281a; font-weight: 700; }

.bk-history-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.bk-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.bk-history-row:last-child { border-bottom: none; }
.bk-history-main { min-width: 0; }
.bk-history-main a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.bk-history-main a:hover { text-decoration: underline; }
.bk-history-date {
  color: var(--text-muted);
  margin-left: 6px;
}
.bk-history-amount {
  font-weight: 700;
  white-space: nowrap;
}

.balans-note {
  font-size: 13px;
  color: var(--text-muted);
  padding: 0 14px 10px;
  margin: 0;
}

.balans-table td, .balans-table th { white-space: nowrap; }

.balans-input,
.balans-budget-input {
  width: 90px;
  text-align: right;
  font: inherit;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
}
.balans-input:focus,
.balans-budget-input:focus { outline: 2px solid var(--accent); }
.balans-budget-input { background: var(--bg); }

tr.balans-omzet td:not(:first-child):not(.bk-margin-positive):not(.bk-margin-negative) { color: #1f9d47; font-weight: 600; }
tr.balans-negatief td:not(:first-child):not(.bk-margin-positive):not(.bk-margin-negative) { color: #b0281a; }
tr.balans-resultaat {
  background: #d9f3fb;
  font-weight: 700;
}
tr.balans-resultaat td:first-child { border-radius: 0; }

.kas-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 800px) {
  .kas-layout { grid-template-columns: 1fr; }
}

.kas-telling-column .column-header { justify-content: flex-start; }

.kas-telling-form {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}
.kas-telling-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-muted);
}
.kas-telling-form input {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}

.kas-telling-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.kas-telling-actions .btn-primary,
.kas-telling-actions .btn-secondary {
  flex: 1;
}

.bk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  cursor: pointer;
}
.bk-row:hover { border-color: var(--accent); }

.bk-row-title {
  font-weight: 600;
  font-size: 14px;
}

.bk-row-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.bk-row-amount {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}
.bk-amount-negative { color: #b0281a; }
.bk-amount-positive { color: #1f9d47; }

/* ---------- Waarde aandelen ---------- */

.wa-note {
  background: #fef3c7;
  color: #92400e;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 20px;
}

.wa-section + .wa-section {
  margin-top: 20px;
}

.wa-total {
  font-weight: 700;
  color: var(--accent);
}

.wa-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.wa-row:last-child { border-bottom: none; }

.wa-row-btn {
  width: 100%;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.wa-row-btn:hover { background: #f5f7fd; }

#todos-list-dialog {
  width: min(600px, 92vw);
}

.bk-foto-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 4px;
  vertical-align: middle;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.1);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  filter: brightness(0.75) contrast(1.3);
}
.bk-foto-link:hover { background: rgba(0,0,0,0.2); }

.bk-foto-huidige-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.bk-foto-huidige-btn:hover { text-decoration: underline; }

#foto-dialog {
  width: min(700px, 94vw);
}

.foto-dialog-img {
  max-width: 100%;
  max-height: 75vh;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}

.foto-dialog-frame {
  width: 100%;
  height: 75vh;
  border: none;
  border-radius: 8px;
}

.bk-foto-huidige {
  font-size: 13px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}
.bk-foto-huidige a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.bk-foto-huidige a:hover { text-decoration: underline; }

.wa-row.wa-sub {
  padding-left: 32px;
  background: var(--bg);
}
.wa-row.wa-sub .wa-label {
  font-size: 13px;
  color: var(--text-muted);
}

.wa-label {
  font-size: 14px;
}

.wa-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wa-value.wa-highlight {
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
}

.wa-input {
  width: 120px;
  text-align: right;
  font: inherit;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
}
.wa-input:focus { outline: 2px solid var(--accent); }

.wa-input-wide {
  width: 260px;
  max-width: 100%;
  text-align: left;
}

.info-extra-label {
  display: block;
  padding: 12px 0 6px;
  font-size: 14px;
}

.info-extra-label textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  resize: vertical;
}
.info-extra-label textarea:focus { outline: 2px solid var(--accent); }

.wa-result {
  border: 2px solid var(--accent);
}

/* ---------- App overzicht ---------- */

.ov-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 520px) {
  .ov-grid {
    grid-template-columns: 1fr;
  }
}

.ov-column .column-header {
  justify-content: center;
}

.ov-subheader {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--column-header);
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
}

/* ---------- Organigram ---------- */

.org-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.org-connector {
  width: 2px;
  height: 24px;
  background: var(--border);
}

.org-top {
  display: flex;
}

.org-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.org-box {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 14px 16px;
  width: 170px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.org-top .org-box {
  border-color: var(--accent);
  border-width: 2px;
}

.org-role {
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  color: var(--accent);
}

.org-input {
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  text-align: center;
}
.org-input:focus { outline: 2px solid var(--accent); }