/* ── Phase 7 Hotfix: Inter font (FIX 8) ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

*, *::before, *::after {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ── Reset & custom properties ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:     #1e3a5f;
  --blue-md:  #2d5a9e;
  --blue-lt:  #e8eef7;
  --teal:     #1b6b5a;
  --teal-lt:  #e6f4f1;
  --bg:       #f0f4f8;
  --surf:     #ffffff;
  --border:   #d0d9e4;
  --border-2: #e8edf3;
  --text:     #1a2332;
  --text-2:   #4e6070;
  --text-3:   #8fa0b5;
  --green:    #1b7340;
  --amber:    #b85e00;
  --red:      #b82020;
  --shadow:   0 2px 8px rgba(30,58,95,.12);
  --shadow-lg:0 8px 32px rgba(30,58,95,.18);
  --radius:   8px;
  --hdr-h:    56px;
  --sidebar-w:290px;
  --detail-w: 440px;
  font-size: 14px;
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  /* ── Phase 6 Design System ── */
  --panel-bg:               rgba(255, 255, 255, 0.85);
  --panel-border:           0.5px solid rgba(0, 0, 0, 0.07);
  --panel-section-divider:  0.5px solid rgba(0, 0, 0, 0.06);
  --panel-padding:          16px 20px;

  --field-label-size:       10px;
  --field-label-weight:     500;
  --field-label-color:      #8e8e93;
  --body-size:              12px;
  --body-color:             #3c3c43;
  --body-line-height:       1.6;
  --heading-size:           17px;
  --heading-weight:         500;

  --pyramid-bar-male:       rgba(55, 138, 221, 0.72);
  --pyramid-bar-female:     rgba(212, 83, 126, 0.72);
  --pyramid-label-size:     8px;
  --pyramid-axis-size:      8px;
  --pyramid-bar-height:     14px;
  --pyramid-bar-radius:     2px;
  --pyramid-max-pct:        70;

  --rf-mod-bg:              #e8f8f2;
  --rf-mod-text:            #1a7f50;
  --rf-nonmod-bg:           #f2f2f7;
  --rf-nonmod-text:         #3c3c43;
  --rf-genetic-bg:          #f0eeff;
  --rf-genetic-text:        #5234b5;
  --rf-pill-radius:         8px;
  --rf-primary-size:        11px;
  --rf-primary-weight:      500;
  --rf-sub-size:            10px;
  --rf-sub-opacity:         0.75;

  --node-trigger-bg:        #fff0ec;
  --node-trigger-border:    #ffb398;
  --node-mechanism-bg:      #f2f2f7;
  --node-mechanism-border:  #c7c7cc;
  --node-comp-bg:           #fff8ec;
  --node-comp-border:       #ffd080;
  --node-outcome-bg:        #e8f8f2;
  --node-outcome-border:    #5dca9e;
  --node-font-size:         10px;
  --node-radius:            7px;
  --node-min-width:         100px;
  --node-max-width:         160px;
  --edge-color:             #c7c7cc;
  --edge-outcome-color:     #5dca9e;

  --vitals-bg:              rgba(0, 122, 255, 0.04);
  --vitals-border:          rgba(0, 122, 255, 0.15);
  --vitals-label-color:     #185fa5;

  --sp-cardiac-bg:          #fce8e8;
  --sp-cardiac-text:        #991f1f;
  --sp-cardiac-border:      rgba(153, 31, 31, 0.2);
  --sp-resp-bg:             #e6f1fb;
  --sp-resp-text:           #185fa5;
  --sp-resp-border:         rgba(24, 95, 165, 0.2);
  --sp-gi-bg:               #fff0e0;
  --sp-gi-text:             #854f0b;
  --sp-gi-border:           rgba(133, 79, 11, 0.2);
  --sp-neuro-bg:            #eeedfe;
  --sp-neuro-text:          #3c3489;
  --sp-neuro-border:        rgba(60, 52, 137, 0.2);
  --sp-musculo-bg:          #eaf3de;
  --sp-musculo-text:        #3b6d11;
  --sp-musculo-border:      rgba(59, 109, 17, 0.2);
  --sp-uro-bg:              #e6f1fb;
  --sp-uro-text:            #185fa5;
  --sp-uro-border:          rgba(24, 95, 165, 0.2);
  --sp-endo-bg:             #fff0e0;
  --sp-endo-text:           #854f0b;
  --sp-endo-border:         rgba(133, 79, 11, 0.2);
  --sp-haem-bg:             #fce8e8;
  --sp-haem-text:           #991f1f;
  --sp-haem-border:         rgba(153, 31, 31, 0.2);
  --sp-psych-bg:            #eeedfe;
  --sp-psych-text:          #3c3489;
  --sp-psych-border:        rgba(60, 52, 137, 0.2);
  --sp-derm-bg:             #fff0e0;
  --sp-derm-text:           #854f0b;
  --sp-derm-border:         rgba(133, 79, 11, 0.2);
  --sp-gen-bg:              #f2f2f7;
  --sp-gen-text:            #3c3c43;
  --sp-gen-border:          rgba(60, 60, 67, 0.15);

  --marker-kind-bg:         #fff0d6;
  --marker-kind-text:       #a05c00;
  --marker-zwanger-bg:      #fce8f3;
  --marker-zwanger-text:    #9b1d6a;
  --marker-bejaarde-bg:     #e8f0ff;
  --marker-bejaarde-text:   #1a3fa0;
  --marker-alarm-color:     #ff3b30;

  --beh-acuut-bg:           #fef0f0;
  --beh-acuut-text:         #a03030;
  --beh-chronisch-bg:       #f2f2f7;
  --beh-chronisch-text:     #8e8e93;
  --beh-preventief-bg:      #e8f8f2;
  --beh-preventief-text:    #1a7f50;

  --badge-vitaal-bg:        #e6f1fb;
  --badge-vitaal-text:      #185fa5;
  --badge-pos-bg:           #e8f8f2;
  --badge-pos-text:         #1a7f50;
  --badge-neg-bg:           #fef0f0;
  --badge-neg-text:         #a03030;

  --narrative-anamnese-border:   #ff9f0a;
  --narrative-preventie-border:  #5ac8fa;

  --bronnen-link-color:     #185fa5;

  --rel-card-bg:            rgba(255, 255, 255, 0.85);
  --rel-card-border:        0.5px solid rgba(0, 0, 0, 0.07);
  --rel-card-radius:        10px;

  --color-background-secondary: #f2f2f7;
  --color-border-tertiary:      rgba(0, 0, 0, 0.06);
}

html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
input, textarea, select, button { font-family: var(--font-primary); }

/* ── Header ──────────────────────────────────────────────────────────────── */
#hdr {
  height: var(--hdr-h);
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  position: relative;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

#hdr-brand { display: flex; align-items: baseline; gap: 10px; flex-shrink: 0; }
.logo { font-size: 1.25rem; font-weight: 700; letter-spacing: .04em; color: #fff; }
.logo-sub { font-size: .75rem; opacity: .65; white-space: nowrap; }

#hdr-search { flex: 1; max-width: 460px; }
#search-in {
  width: 100%;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: .9rem;
  outline: none;
  transition: border-color .2s, background .2s;
}
#search-in::placeholder { color: rgba(255,255,255,.5); }
#search-in:focus { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.18); }

#hdr-mode { display: flex; gap: 4px; flex-shrink: 0; }
.mode-btn {
  padding: 6px 14px;
  border-radius: 16px;
  border: 1.5px solid rgba(255,255,255,.3);
  background: transparent;
  color: rgba(255,255,255,.75);
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.mode-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.mode-btn.active { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.6); color: #fff; }

/* ── App layout ──────────────────────────────────────────────────────────── */
#app {
  display: flex;
  height: calc(100vh - 48px);
  position: relative;
  overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surf);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

#spec-wrap {
  padding: 10px 8px 8px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 160px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.spec-btn {
  padding: 4px 10px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: .72rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.spec-btn:hover { border-color: var(--blue-md); color: var(--blue); background: var(--blue-lt); }
.spec-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.spec-btn .cnt { opacity: .7; font-size: .68rem; }

#sym-list, #path-list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
}

.sym-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-2);
  gap: 8px;
  transition: background .12s;
}
.sym-item:hover { background: var(--blue-lt); }
.sym-item.active { background: var(--blue-lt); border-left: 3px solid var(--blue); padding-left: 11px; }

.sym-nl { flex: 1; font-size: .85rem; line-height: 1.3; }
.sym-code {
  font-size: .68rem;
  font-weight: 700;
  background: var(--blue);
  color: #fff;
  border-radius: 8px;
  padding: 2px 6px;
  flex-shrink: 0;
}
.sym-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}
.sym-dot.filled { background: var(--green); }

.sym-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: .85rem;
}

/* ── Main panel ──────────────────────────────────────────────────────────── */
#main {
  flex: 1;
  overflow-y: auto;
  position: relative;
  scrollbar-width: thin;
}

/* Welcome */
#welcome { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.welcome-inner { max-width: 540px; text-align: center; }
.welcome-logo {
  font-size: 3rem; font-weight: 800; color: var(--blue);
  letter-spacing: .06em; margin-bottom: 12px; opacity: .15;
}
.welcome-inner h2 { font-size: 1.5rem; color: var(--blue); margin-bottom: 6px; }
.welcome-inner > p { color: var(--text-2); margin-bottom: 20px; }

.stat-row { display: flex; gap: 20px; justify-content: center; margin-bottom: 28px; flex-wrap: wrap; }
.stat-card {
  background: var(--blue-lt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 20px;
  text-align: center;
}
.stat-card .stat-n { font-size: 1.6rem; font-weight: 700; color: var(--blue); line-height: 1; }
.stat-card .stat-l { font-size: .72rem; color: var(--text-2); margin-top: 3px; }

.welcome-hint {
  background: var(--teal-lt);
  border: 1px solid #b2d8d0;
  border-radius: var(--radius);
  padding: 14px 18px;
  text-align: left;
  font-size: .85rem;
  color: var(--text);
  line-height: 1.6;
}
.welcome-hint p + p { margin-top: 8px; }
.edit-hint { display: none; }
body.mode-edit .edit-hint { display: block; }
body.mode-study .edit-hint { display: none; }

/* Symptom detail */
#sym-detail { padding: 28px 32px; }

.sym-header {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.sym-title-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.sym-title { font-size: 1.5rem; font-weight: 700; color: var(--blue); }
.canmeds-num {
  font-size: .8rem; font-weight: 700;
  background: var(--blue); color: #fff;
  border-radius: 10px; padding: 3px 9px;
  margin-top: 5px; flex-shrink: 0;
}
.canmeds-en { font-size: .9rem; color: var(--text-2); margin-bottom: 10px; font-style: italic; }
.spec-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.spec-tag {
  font-size: .75rem; font-weight: 500;
  padding: 3px 10px; border-radius: 10px;
  border: 1.5px solid;
  cursor: pointer;
  transition: opacity .15s;
}
.spec-tag:hover { opacity: .75; }

.path-section { margin-bottom: 28px; }
.path-section-title {
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-2);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.path-count-badge {
  background: var(--blue-lt); color: var(--blue);
  border-radius: 10px; padding: 2px 8px; font-size: .7rem;
}
.path-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }

.path-card {
  background: var(--surf);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s, transform .1s;
}
.path-card:hover { box-shadow: var(--shadow); border-color: var(--blue-md); transform: translateY(-1px); }
.path-card.active { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(30,58,95,.18); }

.pc-spec { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }
.pc-name { font-size: .85rem; font-weight: 500; line-height: 1.35; color: var(--text); }
.pc-bar-wrap { margin-top: 10px; height: 3px; background: var(--border); border-radius: 2px; }
.pc-bar { height: 100%; border-radius: 2px; background: var(--green); transition: width .3s; }

.no-paths { padding: 20px; color: var(--text-3); font-size: .85rem; font-style: italic; }

/* ── Detail panel ────────────────────────────────────────────────────────── */
#detail {
  position: absolute;
  right: 0; top: 0;
  width: var(--detail-w);
  height: 100%;
  background: var(--surf);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  z-index: 15;
  overflow: hidden;
}
#detail.open { transform: translateX(0); }

#detail-hdr {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--blue);
  color: #fff;
  flex-shrink: 0;
}
#detail-close {
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  font-size: 1.1rem;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  margin-top: 2px;
}
#detail-close:hover { background: rgba(255,255,255,.28); }
#detail-meta { flex: 1; min-width: 0; }
#detail-spec { font-size: .7rem; font-weight: 600; opacity: .7; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
#detail-name { font-size: 1rem; font-weight: 700; line-height: 1.3; }

#detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  scrollbar-width: thin;
}

#detail-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  display: none; /* shown only in edit mode */
}
body.mode-edit #detail-foot { display: flex; }

#btn-save {
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 8px 20px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
#btn-save:hover { background: var(--blue); }
#save-msg { font-size: .8rem; color: var(--green); font-weight: 500; }

/* Profile fields */
.prof-field { margin-bottom: 18px; }
.prof-label {
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-2); margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.prof-label .icon { font-size: .85rem; }

.prof-text {
  font-size: .85rem; line-height: 1.6; color: var(--text);
  white-space: pre-wrap;
  min-height: 18px;
}
.prof-text.empty { color: var(--text-3); font-style: italic; }

.prof-textarea {
  width: 100%;
  min-height: 72px;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .85rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  color: var(--text);
  background: var(--bg);
  outline: none;
  transition: border-color .15s;
}
.prof-textarea:focus { border-color: var(--blue-md); background: #fff; }
.prof-textarea.short { min-height: 36px; }

/* Test chips */
.test-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.test-chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: .78rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  gap: 4px;
}
.test-chip:hover { background: var(--blue-lt); border-color: var(--blue-md); color: var(--blue); }
.test-chip .chip-link { font-size: .65rem; opacity: .6; }

/* Study/edit visibility */
body.mode-study .study-hide { display: none; }
body.mode-edit  .study-show { display: none; }

/* ── Bidirectional modal (tests + DDx) ───────────────────────────────────── */
#bi-modal {
  position: fixed; inset: 0;
  background: rgba(20,30,50,.45);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}
#bi-modal[hidden] { display: none; }

#bi-modal-box {
  background: var(--surf);
  border-radius: 12px;
  padding: 24px 26px;
  max-width: 520px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  position: relative;
}

#bi-modal-close {
  position: absolute; top: 14px; right: 14px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 50%; width: 28px; height: 28px;
  font-size: 1rem; cursor: pointer; color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
#bi-modal-close:hover { background: var(--border); }

#bi-modal-title {
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-2); margin-bottom: 14px; padding-right: 30px;
}

.modal-path-item {
  display: flex; align-items: flex-start;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  gap: 10px;
}
.modal-path-item:hover { border-color: var(--blue-md); background: var(--blue-lt); }
.mpi-spec { font-size: .68rem; font-weight: 600; flex-shrink: 0; min-width: 90px; padding-top: 2px; }
.mpi-right { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.mpi-name { font-size: .85rem; font-weight: 500; line-height: 1.35; }
.mpi-bev  { font-size: .75rem; color: var(--text-2); font-style: italic; }
.modal-empty { color: var(--text-3); font-size: .85rem; font-style: italic; }

/* ── Scrollbar styling ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #b0bcc9; }

/* ── Utilities ────────────────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--border-2); margin: 14px 0; }
.card-flag { font-size: .75rem; }

/* ── Detail header: flag + AI buttons ────────────────────────────────────── */
#detail-hdr { align-items: center; }
#detail-hdr-btns { display: flex; gap: 6px; flex-shrink: 0; margin-left: auto; }

#btn-flag {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.75);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: .8rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
#btn-flag:hover { background: rgba(255,255,255,.22); }
#btn-flag.flagged { color: #ff6b6b; border-color: #ff6b6b; background: rgba(255,107,107,.15); }

#btn-ai {
  background: linear-gradient(135deg, rgba(102,126,234,.8), rgba(118,75,162,.8));
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  display: none;
  gap: 4px;
  transition: opacity .15s;
}
body.mode-edit #btn-ai { display: inline-flex; align-items: center; }
#btn-ai:hover { opacity: .85; }
#btn-ai:disabled { opacity: .5; cursor: wait; }

/* ── AI loading overlay ──────────────────────────────────────────────────── */
#ai-overlay {
  position: absolute; inset: 0;
  background: rgba(10,14,26,.88);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-radius: 0;
}
#ai-overlay[hidden] { display: none; }

.ai-spinner-box { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ai-spinner-ring {
  width: 44px; height: 44px;
  border: 3px solid rgba(0,212,170,.2);
  border-top-color: #00d4aa;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ai-spinner-text { color: rgba(0,212,170,.85); font-size: .85rem; letter-spacing: .04em; }

/* ── Dashboard ───────────────────────────────────────────────────────────── */
#main.dash-view { background: #f2f2f7; }

#dashboard {
  min-height: 100%;
  background: #f2f2f7;
  color: #1c1c1e;
  padding: 32px 36px 40px;
}

.dash-header { display: none; }

/* Stat cards */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.dash-stat {
  background: rgba(255,255,255,0.85);
  border: 0.5px solid rgba(0,0,0,0.07);
  border-radius: 12px;
  padding: 18px 20px;
  text-align: center;
  transition: border-color .2s, background .2s;
  color: #1c1c1e;
}
.dash-stat:hover { border-color: rgba(0,0,0,0.15); background: #fff; }
.dash-stat-n {
  font-size: 2.2rem;
  font-weight: 300;
  color: #1c1c1e;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}
.dash-stat-l {
  font-size: .68rem;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
}
.dash-s-done  .dash-stat-n { color: #1a7f50; }
.dash-s-part  .dash-stat-n { color: #f59e0b; }
.dash-s-empty .dash-stat-n { color: #c7c7cc; }

/* Specialty rows */
.dash-specs { display: flex; flex-direction: column; gap: 2px; }

.dash-spec-row {
  display: grid;
  grid-template-columns: 148px 1fr 52px auto;
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
}
.dash-spec-row:hover { background: rgba(0,0,0,0.03); }
.dash-spec-name {
  font-size: .78rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1c1c1e;
}
.dash-prog-wrap {
  height: 4px;
  background: rgba(0,0,0,0.06);
  border-radius: 99px;
  overflow: hidden;
}
.dash-prog-bar { height: 100%; border-radius: 99px; transition: width .6s ease; }

.dash-spec-counts {
  font-size: .7rem;
  color: #8e8e93;
  text-align: right;
  white-space: nowrap;
}
.dsc-done { color: #1a7f50; }
.dsc-sep  { margin: 0 2px; }

.dash-dots { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.dash-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  flex-shrink: 0;
}
.dash-dot:hover { transform: scale(1.6); z-index: 1; }
.dot-complete { background: #00d4aa; }
.dot-partial  { background: #f59e0b; }
.dot-empty    { background: rgba(200,216,232,.12); border: 1px solid rgba(200,216,232,.18); }
.dot-flagged  { box-shadow: 0 0 0 2px #ef4444; }

/* ── Structured field: technische_onderzoeken (study view) ───────────────── */
.tests-study { display: flex; flex-direction: column; gap: 5px; }
.test-item {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 7px;
  transition: border-color .12s, background .12s;
}
.test-item.linkable { cursor: pointer; }
.test-item.linkable:hover { border-color: var(--blue-md); background: var(--blue-lt); }
.ti-name { font-size: .82rem; font-weight: 600; color: var(--text); }
.ti-bev  { font-size: .8rem;  color: var(--text-2); line-height: 1.4; }
.ti-link { font-size: .68rem; color: var(--blue-md); font-weight: 600; white-space: nowrap; }

/* ── Structured field: differentiaaldiagnose (study view) ────────────────── */
.ddx-study { display: flex; flex-direction: column; gap: 4px; }
.ddx-item {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-left: 3px solid var(--border);
  border-radius: 0 6px 6px 0;
  transition: border-color .12s, background .12s;
}
.ddx-item.linkable { cursor: pointer; }
.ddx-item.linkable:hover { border-color: var(--blue-md); background: var(--blue-lt); }
.ddxi-naam    { font-size: .84rem; font-weight: 500; color: var(--text); }
.ddxi-kenmerk { font-size: .8rem;  color: var(--text-2); line-height: 1.4; }

/* ── Dynamic field editor (edit mode) ────────────────────────────────────── */
.field-dynamic { display: flex; flex-direction: column; gap: 0; }
.dyn-header {
  display: grid;
  grid-template-columns: 1fr 1fr 26px;
  gap: 6px;
  padding: 2px 0 5px;
  font-size: .65rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.dyn-row {
  display: grid;
  grid-template-columns: 1fr 1fr 26px;
  gap: 6px;
  margin-bottom: 5px;
  align-items: center;
}
.dyn-input {
  width: 100%;
  padding: 6px 9px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: .82rem;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color .12s;
}
.dyn-input:focus { border-color: var(--blue-md); background: #fff; }
.dyn-rm {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  font-size: .75rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
  flex-shrink: 0;
}
.dyn-rm:hover { background: var(--red); color: #fff; border-color: var(--red); }
.dyn-add {
  border: 1.5px dashed var(--border);
  background: transparent;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: .78rem;
  color: var(--text-3);
  cursor: pointer;
  margin-top: 2px;
  text-align: left;
  transition: border-color .12s, color .12s;
  font-family: inherit;
}
.dyn-add:hover { border-color: var(--blue-md); color: var(--blue); }

/* ── View buttons (Inhoud | Woordenboek) ─────────────────────────────────── */
#hdr-views {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  background: rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 3px;
}
.view-btn {
  padding: 5px 13px;
  border-radius: 14px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.65);
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s, color .18s;
  white-space: nowrap;
}
.view-btn:hover { color: #fff; background: rgba(255,255,255,.12); }
.view-btn.active { background: rgba(255,255,255,.22); color: #fff; }

/* ── Autocomplete dropdown ───────────────────────────────────────────────── */
#ac-dropdown {
  position: fixed;
  z-index: 200;
  background: var(--surf);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  font-size: .82rem;
}
#ac-dropdown[hidden] { display: none; }

.ac-item {
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text);
  transition: background .1s;
  border-bottom: 1px solid var(--border-2);
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover,
.ac-item.ac-active { background: var(--blue-lt); color: var(--blue); }

/* ── Symptom tag-input (anamnese edit mode) ──────────────────────────────── */
.sym-tag-section {
  margin-top: 8px;
  border: 1.5px solid var(--border-2);
  border-radius: var(--radius);
  padding: 8px 10px;
  background: var(--bg);
}
.sym-tag-section-label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-3);
  margin-bottom: 6px;
}
.sym-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
  min-height: 24px;
}
.sym-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--blue-lt);
  border: 1.5px solid var(--blue-md);
  color: var(--blue);
  font-size: .76rem;
  font-weight: 500;
}
.sym-tag-rm {
  border: none;
  background: none;
  color: var(--blue-md);
  cursor: pointer;
  padding: 0;
  font-size: .8rem;
  line-height: 1;
  opacity: .65;
  transition: opacity .12s;
}
.sym-tag-rm:hover { opacity: 1; }
.ac-wrap-inline { margin-top: 2px; }
.sym-tag-input { width: 100%; }

/* Study mode: read-only tag pills */
.sym-tag-view-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.sym-tag-pill-view {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 10px;
  background: var(--blue-lt);
  border: 1.5px solid var(--blue-md);
  color: var(--blue);
  font-size: .74rem;
  font-weight: 500;
}

/* ── Woordenboek view ────────────────────────────────────────────────────── */
body.view-woordenboek #btn-flag,
body.view-woordenboek #btn-ai    { display: none !important; }
body.view-woordenboek #detail-foot { display: none !important; }

#woordenboek {
  min-height: 100%;
  background: transparent;
  color: #1c1c1e;
  padding: 28px 32px 40px;
}

/* Stats bar */
.w-stats {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
}
.w-stat {
  background: rgba(0,212,170,.04);
  border: 1px solid rgba(0,212,170,.14);
  border-radius: 10px;
  padding: 14px 20px;
  text-align: center;
  min-width: 120px;
  transition: border-color .2s;
}
.w-stat:hover { border-color: rgba(0,212,170,.3); }
.w-stat-n {
  font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 1.8rem;
  font-weight: 700;
  color: #00d4aa;
  line-height: 1;
  margin-bottom: 4px;
}
.w-stat-l {
  font-size: .65rem;
  color: rgba(200,216,232,.45);
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Navigation bar */
.w-top { margin-bottom: 20px; }
.w-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.w-tabs {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 3px;
  flex-shrink: 0;
}
.w-tab {
  padding: 5px 14px;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: rgba(200,216,232,.6);
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.w-tab:hover { color: #c8d8e8; background: rgba(255,255,255,.08); }
.w-tab.active { background: rgba(0,212,170,.18); color: #00d4aa; }

.w-search {
  flex: 1;
  min-width: 200px;
  max-width: 380px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid rgba(0,212,170,.2);
  background: rgba(255,255,255,.05);
  color: #c8d8e8;
  font-size: .85rem;
  outline: none;
  transition: border-color .2s, background .2s;
}
.w-search::placeholder { color: rgba(200,216,232,.35); }
.w-search:focus { border-color: rgba(0,212,170,.5); background: rgba(255,255,255,.08); }

/* Term list */
.w-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.w-term-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.w-term-item:hover { background: rgba(0,212,170,.07); border-color: rgba(0,212,170,.15); }
.w-term-item.active { background: rgba(0,212,170,.12); border-color: rgba(0,212,170,.3); }
.w-term-naam { font-size: .88rem; font-weight: 500; color: #c8d8e8; }
.w-term-meta { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

.w-badge {
  font-size: .65rem;
  padding: 2px 7px;
  border-radius: 8px;
  font-weight: 600;
}
.w-alias-badge { background: rgba(200,216,232,.1); color: rgba(200,216,232,.5); }
.w-usage-badge { background: rgba(0,212,170,.12); color: #00d4aa; }

.w-empty {
  padding: 32px;
  text-align: center;
  color: rgba(200,216,232,.3);
  font-size: .85rem;
  font-style: italic;
}

/* ── Woordenboek term detail (inside #detail panel) ──────────────────────── */
.w-detail-usage {
  font-size: .85rem;
  color: var(--text-2);
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--blue-lt);
  border-radius: var(--radius);
}
.w-detail-usage strong { color: var(--blue); }

.w-detail-section { margin-bottom: 18px; }
.w-detail-section-title {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-3);
  margin-bottom: 8px;
}

.w-alias-pills-wrap { display: flex; flex-wrap: wrap; gap: 5px; }
.w-alias-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  color: var(--text-2);
  font-size: .76rem;
}

.w-alias-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.w-alias-btn {
  padding: 6px 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: .78rem;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: border-color .15s, color .15s, background .15s;
  flex-shrink: 0;
}
.w-alias-btn:hover { border-color: var(--blue-md); color: var(--blue); background: var(--blue-lt); }

.w-path-group { margin-bottom: 14px; }
.w-path-group-title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.w-path-item { cursor: pointer; }

/* Mobile responsive */
@media (max-width: 680px) {
  #woordenboek { padding: 16px; }
  .w-stats { flex-wrap: wrap; gap: 8px; }
  .w-stat { min-width: 0; flex: 1; padding: 10px 12px; }
  .w-stat-n { font-size: 1.4rem; }
  .w-nav { gap: 8px; }
  .w-search { max-width: 100%; }
}

/* ── Phase 4: Gear button ────────────────────────────────────────────────── */
#btn-mgmt {
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.75);
  border-radius: 8px;
  width: 34px; height: 34px;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
#btn-mgmt:hover { background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.45); }

/* ── Management panel overlay ────────────────────────────────────────────── */
#mgmt-panel {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.58);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
#mgmt-panel[hidden] { display: none; }

#mgmt-box {
  background: var(--surf);
  border-radius: 12px;
  width: 92%;
  max-width: 960px;
  height: 82vh;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
}

#mgmt-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  flex-shrink: 0;
}
#mgmt-hdr button {
  background: rgba(255,255,255,.15);
  border: none; color: #fff;
  border-radius: 50%; width: 28px; height: 28px;
  font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
#mgmt-hdr button:hover { background: rgba(255,255,255,.28); }

#mgmt-content { display: flex; flex: 1; overflow: hidden; }

#mgmt-spec-col {
  width: 210px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  scrollbar-width: thin;
  background: var(--bg);
  padding: 6px 0;
}

.mgmt-spec-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  cursor: pointer;
  font-size: .82rem;
  color: var(--text-2);
  gap: 8px;
  transition: background .12s, color .12s;
}
.mgmt-spec-item:hover { background: var(--blue-lt); color: var(--blue); }
.mgmt-spec-item.mgmt-spec-active {
  background: var(--blue-lt);
  color: var(--blue);
  font-weight: 600;
  border-left: 3px solid var(--blue);
  padding-left: 11px;
}

.mgmt-spec-cnt {
  font-size: .7rem;
  background: var(--border);
  color: var(--text-2);
  border-radius: 8px;
  padding: 1px 6px;
  flex-shrink: 0;
}

#mgmt-path-col { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.mgmt-path-toolbar {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#mgmt-search {
  flex: 1;
  padding: 7px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .85rem;
  font-family: inherit;
  outline: none;
  background: var(--bg);
  color: var(--text);
  transition: border-color .15s;
}
#mgmt-search:focus { border-color: var(--blue-md); background: #fff; }

#mgmt-add-btn {
  padding: 7px 16px;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  flex-shrink: 0;
  transition: background .15s;
}
#mgmt-add-btn:hover { background: var(--blue); }

#mgmt-path-list { flex: 1; overflow-y: auto; scrollbar-width: thin; }

.mgmt-path-row {
  display: flex; align-items: center;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border-2);
  gap: 10px;
  cursor: pointer;
  transition: background .1s;
}
.mgmt-path-row:hover { background: var(--blue-lt); }

.mgmt-path-name {
  flex: 1; font-size: .84rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mgmt-path-spec { font-size: .72rem; font-weight: 600; flex-shrink: 0; white-space: nowrap; }

.mgmt-del-btn {
  background: transparent; border: none;
  color: var(--text-3); cursor: pointer;
  font-size: .9rem; padding: 2px 5px;
  border-radius: 4px; flex-shrink: 0;
  transition: color .15s, background .15s;
}
.mgmt-del-btn:hover { color: var(--red); background: rgba(184,32,32,.08); }

.mgmt-empty {
  padding: 32px;
  text-align: center;
  color: var(--text-3);
  font-size: .85rem;
  font-style: italic;
}

.mgmt-custom-badge {
  display: inline-block;
  background: rgba(27,107,90,.1);
  color: var(--teal);
  border: 1px solid rgba(27,107,90,.25);
  border-radius: 8px;
  padding: 0 5px;
  font-size: .62rem;
  font-weight: 700;
  margin-left: 5px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Wizard ──────────────────────────────────────────────────────────────── */
#mgmt-wizard {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.40);
  z-index: 110;
  display: flex; align-items: center; justify-content: center;
}
#mgmt-wizard[hidden] { display: none; }

#mgmt-wizard-box {
  background: #f2f2f7;
  border-radius: 16px;
  width: 92%;
  max-width: 560px;
  max-height: 90vh;
  overflow: hidden;
  border: 0.5px solid rgba(0,0,0,0.08);
  display: flex; flex-direction: column;
}

#mgmt-wizard-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 0.5px solid rgba(0,0,0,0.08);
  background: #fff;
  color: #1c1c1e;
  flex-shrink: 0;
}
#mgmt-wizard-hdr span { font-weight: 500; font-size: 14px; letter-spacing: -0.2px; }
#mgmt-wizard-hdr button {
  background: rgba(0,0,0,0.06);
  border: 0.5px solid rgba(0,0,0,0.08); color: #8e8e93;
  border-radius: 50%; width: 26px; height: 26px;
  font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
#mgmt-wizard-hdr button:hover { background: rgba(0,0,0,0.10); }

#mgmt-wizard-body {
  flex: 1; overflow-y: auto;
  padding: 16px 18px;
  scrollbar-width: thin;
  background: #fff;
}

#mgmt-wizard-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 18px;
  border-top: 0.5px solid rgba(0,0,0,0.08);
  background: #fff;
  flex-shrink: 0;
}
#mgmt-wizard-prev, #mgmt-wizard-next {
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s, color .15s;
}
#mgmt-wizard-prev {
  background: #fff;
  border: 0.5px solid rgba(0,0,0,0.1);
  color: #3c3c43;
}
#mgmt-wizard-prev:hover { background: rgba(0,0,0,0.04); }
#mgmt-wizard-next {
  background: rgba(0,122,255,0.08);
  border: 0.5px solid rgba(0,122,255,0.2);
  color: #185fa5;
}
#mgmt-wizard-next:hover { background: rgba(0,122,255,0.14); }

.wiz-field { margin-bottom: 14px; }
.wiz-label {
  display: block;
  font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: #8e8e93; margin-bottom: 6px;
}
.wiz-req { color: var(--red); margin-left: 2px; }
.wiz-tip {
  display: inline-block;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-2);
  font-size: .68rem;
  text-align: center; line-height: 15px;
  cursor: help; margin-left: 4px;
  vertical-align: middle;
}
.wiz-dup { display: block; font-size: .78rem; color: var(--amber); margin-top: 4px; }
.wiz-info {
  font-size: .84rem; color: var(--text-2);
  background: var(--bg);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 16px;
  line-height: 1.55;
}

.wiz-mode-btns { display: flex; gap: 12px; }
.wiz-mode-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 16px 12px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  font-family: inherit;
  text-align: center;
}
.wiz-mode-btn:hover { border-color: var(--blue-md); background: var(--blue-lt); }
.wiz-mode-btn.active { border-color: var(--teal); background: var(--teal-lt); }
.wiz-mode-icon { font-size: 1.5rem; }
.wiz-mode-title { font-size: .85rem; font-weight: 700; color: var(--text); }
.wiz-mode-desc { font-size: .75rem; color: var(--text-2); line-height: 1.4; }

/* Wizard symptoom tag-input uses light theme (wizard is light bg) */
#mgmt-wizard-body .sym-tag-section { background: var(--bg); }
#mgmt-wizard-body .sym-tag-section-label { color: var(--text-3); }

/* ── DDx linked row states ───────────────────────────────────────────────── */
.ddx-row.ddx-linked .ddx-naam {
  border-color: var(--teal);
  background: var(--teal-lt);
}
.ddx-link-icon { color: var(--teal); font-size: .72rem; margin-right: 3px; }
.ddx-free-icon { color: var(--amber); font-size: .72rem; margin-right: 3px; }

/* ── Autocomplete: DDx path items ────────────────────────────────────────── */
.ac-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ac-path-spec {
  font-size: .66rem;
  font-weight: 600;
  flex-shrink: 0;
  opacity: .75;
}
.ac-sep { height: 1px; background: var(--border); margin: 2px 0; }
.ac-action {
  padding: 8px 12px;
  cursor: pointer;
  color: var(--blue-md);
  font-size: .8rem;
  font-weight: 500;
  border-bottom: 1px solid var(--border-2);
  transition: background .1s;
}
.ac-action:last-child { border-bottom: none; }
.ac-action:hover { background: var(--blue-lt); }

/* ── Related pathologies ─────────────────────────────────────────────────── */
.rel-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.rel-path-card { font-size: .82rem; }

.rel-search { margin-bottom: 8px; }

.rel-checklist {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 5px;
  background: var(--bg);
}

.rel-check-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-size: .82rem;
  transition: background .1s;
  user-select: none;
}
.rel-check-item:hover { background: var(--blue-lt); }
.rel-check-item.checked { background: rgba(27,107,90,.07); }
.rel-check-item input { flex-shrink: 0; cursor: pointer; accent-color: var(--teal); }
.rel-check-name { flex: 1; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-check-spec { font-size: .68rem; font-weight: 700; flex-shrink: 0; }

.rel-more {
  margin-top: 6px;
  font-size: .74rem;
  color: var(--text-3);
  font-style: italic;
  text-align: center;
}

/* ── Woordenboek CRUD ────────────────────────────────────────────────────── */
.w-add-form {
  background: rgba(0,0,0,0.02);
  border: 0.5px solid rgba(0,0,0,0.08);
  border-radius: 9px;
  padding: 10px 12px;
  margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.w-add-form .dyn-input {
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,0,0,0.12);
  color: #1c1c1e;
  font-size: 11px;
}
.w-add-form .dyn-input:focus { border-color: rgba(15,110,86,0.4); background: #fff; }
.w-add-form .dyn-input::placeholder { color: #8e8e93; }

.w-add-form-btns { display: flex; gap: 8px; }

.w-add-save-btn {
  padding: 5px 12px; border-radius: 7px;
  font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  border: 0.5px solid rgba(0,122,255,0.2);
  background: rgba(0,122,255,0.08);
  color: #185fa5;
  transition: background .15s;
}
.w-add-save-btn:hover { background: rgba(0,122,255,0.14); }

.w-add-cancel-btn {
  padding: 5px 12px; border-radius: 7px;
  font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  border: 0.5px solid rgba(0,0,0,0.1);
  background: #fff;
  color: #3c3c43;
  transition: background .15s;
}
.w-add-cancel-btn:hover { background: rgba(0,0,0,0.04); }

.w-add-btn {
  padding: 5px 14px;
  border-radius: var(--radius);
  font-size: .78rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
  background: rgba(0,212,170,.12);
  color: #00d4aa;
  border: 1px solid rgba(0,212,170,.25);
  flex-shrink: 0;
  transition: background .15s;
}
.w-add-btn:hover { background: rgba(0,212,170,.22); }

.w-bulk-btn {
  padding: 5px 13px;
  border-radius: var(--radius);
  font-size: .75rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
  background: rgba(245,158,11,.1);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,.25);
  flex-shrink: 0;
  transition: background .15s;
}
.w-bulk-btn:hover { background: rgba(245,158,11,.2); }

.w-edit-form {
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px 0; width: 100%;
}
.w-edit-form .dyn-input {
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,0,0,0.12);
  color: #1c1c1e;
  width: 100%;
}
.w-edit-form .dyn-input:focus { border-color: rgba(15,110,86,0.4); background: #fff; }
.w-edit-form .dyn-input::placeholder { color: #8e8e93; }

.w-edit-form-btns { display: flex; gap: 8px; }

.w-edit-save-btn {
  padding: 5px 12px; border-radius: var(--radius);
  font-size: .78rem; font-weight: 600;
  cursor: pointer; font-family: inherit; border: none;
  background: #0f6e56; color: #fff;
  transition: opacity .15s;
}
.w-edit-save-btn:hover { opacity: .85; }

.w-edit-cancel-btn {
  padding: 5px 12px; border-radius: var(--radius);
  font-size: .78rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
  border: 0.5px solid rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.85);
  color: #3c3c43;
  transition: background .15s;
}
.w-edit-cancel-btn:hover { background: #fff; }

.w-term-editing {
  flex-direction: column !important;
  align-items: stretch !important;
  background: rgba(0,212,170,.06) !important;
  border-color: rgba(0,212,170,.28) !important;
}

.w-term-actions { display: flex; gap: 4px; flex-shrink: 0; }

.w-term-edit-btn, .w-term-del-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 3px 7px;
  font-size: .8rem;
  cursor: pointer;
  color: rgba(200,216,232,.35);
  transition: background .12s, color .12s, border-color .12s;
}
.w-term-edit-btn:hover {
  color: #c8d8e8;
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.15);
}
.w-term-del-btn:hover {
  color: #f87171;
  background: rgba(248,113,113,.1);
  border-color: rgba(248,113,113,.2);
}

.w-spec-badge {
  background: rgba(200,216,232,.1);
  color: rgba(200,216,232,.5);
}

.w-freetext-match { opacity: .7; }
.w-freetext-match .mpi-name { font-style: italic; }

/* ── Phase 4 mobile responsive ───────────────────────────────────────────── */
@media (max-width: 680px) {
  #mgmt-box { width: 98%; height: 94vh; }
  #mgmt-content { flex-direction: column; }
  #mgmt-spec-col { width: 100%; max-height: 120px; border-right: none; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; padding: 4px; }
  .mgmt-spec-item { padding: 5px 10px; font-size: .75rem; }
  .wiz-mode-btns { flex-direction: column; }
  .rel-checklist { max-height: 160px; }
}

/* ── Phase 5: Epidemiologie ──────────────────────────────────────────────── */
.epi-section-label { font-size: 11px; font-weight: 600; color: #8e8e93; text-transform: uppercase; letter-spacing: .04em; margin: 10px 0 5px; }
.epi-inc-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.epi-inc-item { display: flex; flex-direction: column; gap: 2px; }
.epi-inc-val  { font-size: 1.6rem; font-weight: 600; color: var(--text); }
.epi-inc-pop  { font-size: 12px; color: var(--text-2); }
.epi-inc-bron { font-size: 11px; color: #007aff; }
.epi-approx   { cursor: help; font-size: 10px; color: #8e8e93; }

/* Population pyramid */
.pop-pyramid  { display: block; margin: 6px 0 10px; }
.pyr-label    { font-size: 9px; fill: #8e8e93; }
.pyr-legend   { font-size: 10px; font-weight: 500; }
.pyr-m        { fill: #378ADD; }
.pyr-f        { fill: #D4537E; }

/* Risk factor pills */
.rf-groups  { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.rf-group   { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.rf-group-label { font-size: 10px; font-weight: 600; color: #8e8e93; }
.rf-pills   { display: flex; flex-wrap: wrap; gap: 4px; }
.rf-pill    { font-size: 12px; padding: 2px 8px; border-radius: 99px; }
.rf-mod     { background: #e8f5ee; color: #1a7340; }
.rf-nmod    { background: #f2f2f7; color: #3c3c43; }
.rf-gen     { background: #f3eeff; color: #6a35d4; }

/* Epidemiologie edit */
.epi-edit-section { margin-bottom: 12px; }
.epi-inc-header, .epi-edit-header { display: grid; grid-template-columns: 64px 48px 1fr 120px 28px; gap: 4px; font-size: 10px; color: #8e8e93; font-weight: 500; padding: 0 0 2px; }
.epi-edit-row { display: grid; grid-template-columns: 64px 48px 1fr 120px 28px; gap: 4px; align-items: center; margin-bottom: 4px; }
.epi-rf-field { margin-bottom: 6px; }
.epi-ld-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px; }
.epi-ld-row   { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.epi-ld-dec   { width: 40px; font-size: 12px; color: #8e8e93; }
.epi-ld-row input { width: 52px; }

/* ── Phase 5: Pathofysiologie graph ──────────────────────────────────────── */
.patho-graph { display: block; margin: 6px 0 8px; border-radius: 8px; background: rgba(255,255,255,0.5); }
.patho-summary { font-style: italic; color: var(--text-2); }
.patho-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.pl-item  { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-2); }
.pl-dot   { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.patho-edit-section { margin-bottom: 10px; }
.patho-node-row, .patho-edge-row { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.patho-node-row input, .patho-node-row select,
.patho-edge-row select { flex: 1; }

/* ── Phase 5: Klinisch Onderzoek ─────────────────────────────────────────── */
.ko-item { grid-template-columns: 38% 1fr; gap: 8px; cursor: default; }
.ko-item.linkable { cursor: pointer; }
.ko-item.linkable:hover .ko-bev { color: #007aff; }
.ko-bev { font-weight: 500; color: #1c1c1e; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ko-sig { color: #3c3c43; line-height: 1.5; font-size: 13px; }
.ko-badge { display: inline-block; padding: 1px 6px; border-radius: 99px; font-size: 10px; font-weight: 600; }
.badge-vitaal   { background: #e1effe; color: #1a56db; }
.badge-positief { background: #def7ec; color: #03543f; }
.badge-afwezig  { background: #fde8e8; color: #9b1c1c; }
/* KO edit */
.ko-edit .dyn-header { grid-template-columns: 1fr 1fr 80px 28px; }
.ko-row { display: grid; grid-template-columns: 1fr 1fr 80px 28px; gap: 4px; align-items: center; margin-bottom: 4px; }

/* ── Phase 5: Behandeling ────────────────────────────────────────────────── */
.beh-study { display: flex; flex-direction: column; gap: 6px; }
.beh-fase-group { border-radius: 8px; overflow: hidden; border: 0.5px solid rgba(0,0,0,0.07); }
.beh-fase-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 5px 10px; }
.beh-fase-acuut .beh-fase-header     { background: #fff0f0; color: #a03030; }
.beh-fase-chronisch .beh-fase-header { background: var(--surf); color: #3c3c43; }
.beh-fase-preventief .beh-fase-header{ background: #f0fff4; color: #1a7f50; }
.beh-cat-label { font-size: 10px; font-weight: 600; color: #8e8e93; text-transform: uppercase; padding: 4px 10px 2px; }
.beh-item { padding: 5px 10px; font-size: 13px; border-top: 0.5px solid rgba(0,0,0,0.05); }
.beh-item.linkable { cursor: pointer; }
.beh-item.linkable:hover .beh-item-name { color: #007aff; }
.beh-item-name  { font-weight: 500; color: #1c1c1e; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.beh-item-detail{ font-size: 12px; color: #3c3c43; margin-top: 1px; line-height: 1.4; }
.beh-sub-pill { display: inline-block; padding: 1px 6px; border-radius: 99px; background: rgba(0,0,0,0.06); color: #3c3c43; font-size: 10px; font-weight: 500; }
/* Beh edit */
.beh-edit .dyn-header { grid-template-columns: 80px 90px 80px 1fr 1fr 28px; }
.beh-row { display: grid; grid-template-columns: 80px 90px 80px 1fr 1fr 28px; gap: 4px; align-items: center; margin-bottom: 4px; }

/* ── Phase 5: Bronnen ────────────────────────────────────────────────────── */
.bronnen-toggle-wrap { padding: 10px 0 0; }
.bronnen-toggle { background: none; border: none; color: #007aff; font-size: 13px; cursor: pointer; padding: 4px 0; display: flex; align-items: center; gap: 5px; }
.bronnen-chevron { font-size: 11px; }
.bronnen-list { padding: 8px 0 4px; }
.bronnen-item { font-size: 12px; color: var(--text-2); line-height: 1.5; padding: 2px 0; }
.bronnen-link { color: #007aff; text-decoration: none; margin-left: 4px; }
.bronnen-field { border-top: 0.5px solid rgba(0,0,0,0.06); margin-top: 4px; padding-top: 10px; }
.bronnen-edit .dyn-header { grid-template-columns: 1fr 200px 28px; }
.bronnen-row { display: grid; grid-template-columns: 1fr 200px 28px; gap: 4px; align-items: center; margin-bottom: 4px; }
.bronnen-tip { font-size: 11px; color: #8e8e93; margin-top: 6px; font-style: italic; }

/* ── Phase 5: Apple-inspired light theme overrides ──────────────────────── */
:root {
  --bg:       #f2f2f7;
  --surf:     #ffffff;
  --border:   rgba(0,0,0,0.09);
  --border-2: rgba(0,0,0,0.06);
  --text:     #1c1c1e;
  --text-2:   #3c3c43;
  --text-3:   #8e8e93;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
}

/* Cards / panels */
.path-card, .dash-stat, .path-section { background: rgba(255,255,255,0.85); border-radius: 14px; border: 0.5px solid rgba(0,0,0,0.07); }

/* Field label dot */
.field-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; flex-shrink: 0; }
.prof-label { font-size: 11px; font-weight: 500; color: #8e8e93; display: flex; align-items: center; margin-bottom: 6px; }

/* Textareas */
.prof-textarea {
  border: 0.5px solid rgba(0,0,0,0.10);
  border-radius: 10px;
  background: rgba(255,255,255,0.8);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  width: 100%;
  color: var(--text);
  resize: vertical;
}
.prof-textarea::placeholder { color: #c7c7cc; }
.prof-textarea:focus { outline: none; border-color: rgba(0,122,255,0.4); background: #fff; }

/* Progress bars */
.pc-bar-wrap { background: rgba(0,0,0,0.06); height: 4px; border-radius: 99px; overflow: hidden; }
.pc-bar { height: 100%; background: #34c759; border-radius: 99px; transition: width .3s; }
.dash-prog-wrap { background: rgba(0,0,0,0.06); height: 4px; border-radius: 99px; overflow: hidden; flex: 1; }

/* Sidebar light */
#sidebar { background: rgba(255,255,255,0.72); border-right: 0.5px solid rgba(0,0,0,0.08); }
.spec-btn { font-size: 13px; }
.spec-btn.active { background: rgba(0,122,255,0.1); color: #007aff; }
.sym-item.active { background: rgba(0,122,255,0.1); color: #007aff; }

/* Primary button */
#btn-save { background: #007aff; color: #fff; border-radius: 8px; font-size: 13px; border: none; padding: 8px 18px; cursor: pointer; }
#btn-save:hover { background: #0069d9; }

/* Dots */
.dash-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-complete { background: #34c759; }
.dot-partial  { background: #ff9f0a; }
.dot-empty    { background: #d1d1d6; }
.dot-flagged  { background: transparent !important; border: 1.5px solid #ff3b30; }

/* Tables (tests, ko) */
.tests-study, .ko-study { display: grid; gap: 0; }
.test-item, .ko-item { display: grid; grid-template-columns: 38% 1fr auto; align-items: start; padding: 7px 4px; border-top: 0.5px solid rgba(0,0,0,0.06); font-size: 13px; }
.test-item:first-child, .ko-item:first-child { border-top: none; }
.ti-name, .ko-bev { font-weight: 500; color: #1c1c1e; }
.ti-bev, .ko-sig  { color: #3c3c43; line-height: 1.5; }

/* Full-window toggle */
#btn-fullwindow { background: none; border: 1px solid rgba(255,255,255,0.3); color: #fff; border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
body.full-window #sidebar { width: 0; overflow: hidden; border: none; }
body.full-window #detail  { width: 100%; max-width: 100%; }

/* ── Phase 4a: AI prefill notices ────────────────────────────────────────── */
.ai-setup-notice {
  margin: 12px 0;
  padding: 12px 16px;
  background: #fff8e6;
  border: 1px solid #e6c44a;
  border-radius: 8px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text);
}
.ai-setup-notice a { color: var(--blue-md); }

.ai-draft-notice {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: #fff8e6;
  border-left: 4px solid #e6a817;
  border-radius: 0 6px 6px 0;
  font-size: .83rem;
  color: #7a5200;
  font-weight: 500;
}

/* ── DDx unmatched rows ──────────────────────────────────────────────────── */
.ddx-row.ddx-unmatched { background: #fffbec; border: 1px solid #f0c040; border-radius: 6px; }
.ddx-row.ddx-unmatched .ddx-naam { border-color: #e6b800; }
.ddx-unmatched-note {
  grid-column: 1 / -1;
  font-size: .75rem;
  color: #9a6200;
  padding: 2px 4px 4px;
  font-style: italic;
}

/* ── Phase 6: Inline marker badges ──────────────────────────────────────── */
.marker-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin: 0 3px;
  vertical-align: middle;
  letter-spacing: 0.2px;
}
.marker-kind     { background: var(--marker-kind-bg);     color: var(--marker-kind-text); }
.marker-zwanger  { background: var(--marker-zwanger-bg);  color: var(--marker-zwanger-text); }
.marker-bejaarde { background: var(--marker-bejaarde-bg); color: var(--marker-bejaarde-text); }
.marker-alarm    { color: var(--marker-alarm-color); font-weight: 600; margin-right: 2px; }

/* ── Phase 6: Narrative text blocks ─────────────────────────────────────── */
.narrative-block {
  font-size: var(--body-size);
  line-height: 1.7;
  color: var(--body-color);
  padding-left: 10px;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 8px;
}
.narrative-anamnese { border-left: 3px solid var(--narrative-anamnese-border); }
.narrative-preventie { border-left: 3px solid var(--narrative-preventie-border); }

/* ── Phase 6: Population pyramid ────────────────────────────────────────── */
.pop-pyramid-wrap { overflow-x: auto; }
.pop-pyramid { display: block; }

/* ── Phase 6: Risk factor pills (two-line) ───────────────────────────────── */
.rf-pill {
  display: inline-flex;
  flex-direction: column;
  border-radius: var(--rf-pill-radius);
  max-width: 280px;
  padding: 5px 10px;
  font-size: var(--rf-primary-size);
  vertical-align: top;
}
.rf-pill .rf-primary {
  font-weight: var(--rf-primary-weight);
  font-size: var(--rf-primary-size);
  line-height: 1.3;
}
.rf-pill .rf-sub {
  font-size: var(--rf-sub-size);
  opacity: var(--rf-sub-opacity);
  line-height: 1.3;
}
.rf-mod  { background: var(--rf-mod-bg);    color: var(--rf-mod-text); }
.rf-nmod { background: var(--rf-nonmod-bg); color: var(--rf-nonmod-text); }
.rf-gen  { background: var(--rf-genetic-bg);color: var(--rf-genetic-text); }

/* ── Phase 6: Anamnese system-grouped pills ──────────────────────────────── */
.sym-tag-view-row { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.sym-system-group { display: flex; flex-direction: column; gap: 4px; }
.sym-system-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--field-label-color);
  font-weight: 500;
}
.sym-system-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.sym-pill-view {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; border-radius: 99px; padding: 4px 12px;
  cursor: pointer; border: 1px solid transparent;
  transition: opacity 0.15s;
}
.sym-pill-view:hover { opacity: 0.8; }
.sym-pill-cardiac  { background: var(--sp-cardiac-bg);  color: var(--sp-cardiac-text);  border-color: var(--sp-cardiac-border); }
.sym-pill-resp     { background: var(--sp-resp-bg);     color: var(--sp-resp-text);     border-color: var(--sp-resp-border); }
.sym-pill-gi       { background: var(--sp-gi-bg);       color: var(--sp-gi-text);       border-color: var(--sp-gi-border); }
.sym-pill-neuro    { background: var(--sp-neuro-bg);    color: var(--sp-neuro-text);    border-color: var(--sp-neuro-border); }
.sym-pill-musculo  { background: var(--sp-musculo-bg);  color: var(--sp-musculo-text);  border-color: var(--sp-musculo-border); }
.sym-pill-uro      { background: var(--sp-uro-bg);      color: var(--sp-uro-text);      border-color: var(--sp-uro-border); }
.sym-pill-endo     { background: var(--sp-endo-bg);     color: var(--sp-endo-text);     border-color: var(--sp-endo-border); }
.sym-pill-haem     { background: var(--sp-haem-bg);     color: var(--sp-haem-text);     border-color: var(--sp-haem-border); }
.sym-pill-psych    { background: var(--sp-psych-bg);    color: var(--sp-psych-text);    border-color: var(--sp-psych-border); }
.sym-pill-derm     { background: var(--sp-derm-bg);     color: var(--sp-derm-text);     border-color: var(--sp-derm-border); }
.sym-pill-gen      { background: var(--sp-gen-bg);      color: var(--sp-gen-text);      border-color: var(--sp-gen-border); }

/* ── Phase 6: Vitals box ─────────────────────────────────────────────────── */
.vitals-box {
  background: var(--vitals-bg);
  border: 0.5px solid var(--vitals-border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.vitals-box-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--vitals-label-color);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}

/* ── Phase 6: KO category labels ────────────────────────────────────────── */
.ko-category-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #c7c7cc;
  padding: 6px 0 3px;
  font-weight: 500;
}

/* ── Phase 6: Badge variants (override old rules with CSS variables) ────── */
.badge-vitaal   { background: var(--badge-vitaal-bg);  color: var(--badge-vitaal-text); }
.badge-positief { background: var(--badge-pos-bg);     color: var(--badge-pos-text); }
.badge-afwezig  { background: var(--badge-neg-bg);     color: var(--badge-neg-text); }

/* ── Phase 6: Test category labels ──────────────────────────────────────── */
.test-category-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #c7c7cc;
  padding: 6px 0 3px;
  font-weight: 500;
}
.test-category-group { margin-bottom: 4px; }

/* ── Phase 6: Behandeling fase headers ───────────────────────────────────── */
.beh-fase {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 5px 10px;
  border-radius: 6px;
  margin: 8px 0 5px;
  display: inline-block;
}
.beh-fase.acuut      { background: var(--beh-acuut-bg);      color: var(--beh-acuut-text); }
.beh-fase.chronisch  { background: var(--beh-chronisch-bg);  color: var(--beh-chronisch-text); }
.beh-fase.preventief { background: var(--beh-preventief-bg); color: var(--beh-preventief-text); }

/* ── Phase 6: Behandeling "meer tonen" ──────────────────────────────────── */
.beh-detail-truncated { font-size: 12px; color: #6c6c70; line-height: 1.5; margin-top: 2px; }
.beh-meer-tonen-link  { font-size: 10px; color: var(--bronnen-link-color); text-decoration: none; margin-left: 2px; }
.beh-meer-tonen-link:hover { text-decoration: underline; }

/* ── Phase 6: Gerelateerde pathologieën — specialty sections ─────────────── */
.rel-spec-section { margin-bottom: 8px; }
.rel-spec-divider { height: 0.5px; background: var(--color-border-tertiary); margin: 8px 0; }
.rel-spec-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 3px 10px;
  border-radius: 99px;
  margin-bottom: 6px;
}
.rel-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.rel-path-card-v6 {
  background: var(--rel-card-bg);
  border: var(--rel-card-border);
  border-radius: var(--rel-card-radius);
  padding: 10px 12px;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.rel-path-card-v6:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.rel-path-card-v6 .pc-name { font-size: 12px; font-weight: 500; color: #1c1c1e; line-height: 1.4; }

/* ── Phase 6: Modal spec group ───────────────────────────────────────────── */
.modal-spec-group { margin-bottom: 12px; }
.modal-spec-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: #8e8e93; font-weight: 600; margin-bottom: 4px; }

/* ── Phase 6b: Anamnese line-by-line narrative ───────────────────────────── */
.anam-narrative {
  border-left: 3px solid var(--narrative-anamnese-border);
  padding-left: 10px;
  margin-bottom: 14px;
}
.anam-narrative.narrative-preventie { border-left-color: var(--narrative-preventie-border); }
.anam-line {
  font-size: 12px;
  color: var(--body-color);
  line-height: 1.5;
  padding: 3px 0;
}

/* ── Phase 6b: Symptom pills — new class names ───────────────────────────── */
.sym-group { margin-bottom: 8px; }
.sym-group-label {
  font-size: 9px;
  font-weight: 500;
  color: var(--field-label-color);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.sym-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.sym-pill {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 99px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.sym-pill.cardiaal       { background: var(--sp-cardiac-bg);  color: var(--sp-cardiac-text);  border: 1px solid var(--sp-cardiac-border); }
.sym-pill.respiratoir    { background: var(--sp-resp-bg);     color: var(--sp-resp-text);     border: 1px solid var(--sp-resp-border); }
.sym-pill.gi             { background: var(--sp-gi-bg);       color: var(--sp-gi-text);       border: 1px solid var(--sp-gi-border); }
.sym-pill.neurologisch   { background: var(--sp-neuro-bg);    color: var(--sp-neuro-text);    border: 1px solid var(--sp-neuro-border); }
.sym-pill.musculo        { background: var(--sp-musculo-bg);  color: var(--sp-musculo-text);  border: 1px solid var(--sp-musculo-border); }
.sym-pill.urogenitaal    { background: var(--sp-uro-bg);      color: var(--sp-uro-text);      border: 1px solid var(--sp-uro-border); }
.sym-pill.endocrien      { background: var(--sp-endo-bg);     color: var(--sp-endo-text);     border: 1px solid var(--sp-endo-border); }
.sym-pill.hematologisch  { background: var(--sp-haem-bg);     color: var(--sp-haem-text);     border: 1px solid var(--sp-haem-border); }
.sym-pill.psychiatrisch  { background: var(--sp-psych-bg);    color: var(--sp-psych-text);    border: 1px solid var(--sp-psych-border); }
.sym-pill.dermatologisch { background: var(--sp-derm-bg);     color: var(--sp-derm-text);     border: 1px solid var(--sp-derm-border); }
.sym-pill.algemeen       { background: var(--sp-gen-bg);      color: var(--sp-gen-text);      border: 1px solid var(--sp-gen-border); }
.chip-n  { font-size: 9px; color: #185fa5; font-weight: 500; }
.chip-arr{ font-size: 9px; color: #185fa5; font-weight: 500; margin-left: 3px; }
.sym-legend {
  font-size: 10px;
  color: var(--field-label-color);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 0.5px solid rgba(0,0,0,0.06);
}

/* ── Phase 6b: KLO tinted category boxes ────────────────────────────────── */
.klo-box {
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 8px;
}
.klo-box-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.klo-vitals { background: rgba(0,122,255,0.04);   border: 0.5px solid rgba(0,122,255,0.15); }
.klo-vitals .klo-box-label { color: #185fa5; }
.klo-insp   { background: rgba(52,199,89,0.04);   border: 0.5px solid rgba(52,199,89,0.2); }
.klo-insp   .klo-box-label { color: #1a7f50; }
.klo-palp   { background: rgba(255,159,10,0.05);  border: 0.5px solid rgba(255,159,10,0.2); }
.klo-palp   .klo-box-label { color: #854f0b; }
.klo-ausc   { background: rgba(175,82,222,0.04);  border: 0.5px solid rgba(175,82,222,0.18); }
.klo-ausc   .klo-box-label { color: #5234b5; }
.klo-man    { background: rgba(255,107,107,0.04); border: 0.5px solid rgba(255,107,107,0.18); }
.klo-man    .klo-box-label { color: #991f1f; }
.klo-neur   { background: rgba(127,119,221,0.04); border: 0.5px solid rgba(127,119,221,0.2); }
.klo-neur   .klo-box-label { color: #4a3faa; }
.klo-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 5px 0;
  border-top: 0.5px solid rgba(0,0,0,0.05);
}
.klo-row:first-of-type { border-top: none; }
.klo-finding { width: 38%; flex-shrink: 0; }
.klo-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(0,0,0,0.04);
  border: 0.5px solid rgba(0,0,0,0.08);
  cursor: pointer;
  word-break: break-word;
}
.klo-chip:hover { background: rgba(0,0,0,0.07); }
.klo-row.linkable .klo-chip { cursor: pointer; }
.klo-sig {
  font-size: 11px;
  color: var(--body-color);
  line-height: 1.5;
  flex: 1;
}

/* ── Phase 6b: Behandeling compact cards ────────────────────────────────── */
.beh-phase-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 6px;
  margin-top: 4px;
}
.beh-phase-label.acuut      { background: var(--beh-acuut-bg);      color: var(--beh-acuut-text); }
.beh-phase-label.chronisch  { background: var(--beh-chronisch-bg);   color: var(--beh-chronisch-text); }
.beh-phase-label.preventief { background: var(--beh-preventief-bg);  color: var(--beh-preventief-text); }
.beh-cards { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.beh-card {
  background: rgba(255,255,255,0.85);
  border: 0.5px solid rgba(0,0,0,0.07);
  border-radius: 9px;
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.beh-card-left {
  width: 3px;
  border-radius: 2px;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 32px;
}
.bl-acuut      { background: #e24b4a; }
.bl-chronisch  { background: #8e8e93; }
.bl-preventief { background: #34c759; }
.beh-card-body { flex: 1; min-width: 0; }
.beh-card-top  { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; flex-wrap: wrap; }
.beh-subcat {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(0,0,0,0.05);
  color: var(--field-label-color);
  flex-shrink: 0;
}
.beh-item   { font-size: 12px; font-weight: 500; color: var(--text); }
.beh-detail { font-size: 11px; color: #6c6c70; line-height: 1.5; }
.meer-tonen { font-size: 10px; color: #185fa5; cursor: pointer; margin-left: 4px; text-decoration: none; }
.meer-tonen:hover { text-decoration: underline; }

/* ── Phase 7: Page background ───────────────────────────────────────────── */
body { background: #f2f2f7; }
#app { background: #f2f2f7; }
#main { background: #f2f2f7; }

/* ── Phase 7: Topbar ────────────────────────────────────────────────────── */
.topbar {
  height: 48px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar-logo {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.logo-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #0F6E56;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-text {
  font-size: 15px;
  font-weight: 600;
  color: #1c1c1e;
  letter-spacing: -0.3px;
}
.topbar-search {
  flex: 1;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f2f2f7;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 6px 12px;
  margin: 0 12px;
}
.topbar-search input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 12px;
  color: #1c1c1e;
  flex: 1;
  font-family: inherit;
}
.topbar-search input::placeholder { color: #8e8e93; }
.topbar-nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.nav-pill {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 7px;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  color: #3c3c43;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.nav-pill:hover { background: rgba(0, 0, 0, 0.04); }
.nav-pill.active {
  background: #1c1c1e;
  color: #fff;
  border-color: #1c1c1e;
}
.nav-pill--edit {
  background: rgba(15, 110, 86, 0.08);
  color: #0F6E56;
  border-color: rgba(15, 110, 86, 0.2);
}
.nav-pill--edit.active {
  background: #0F6E56;
  color: #fff;
  border-color: #0F6E56;
}
.topbar-settings {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 4px;
  flex-shrink: 0;
}
.topbar-settings:hover { background: rgba(0, 0, 0, 0.04); }

/* ── Phase 7: Sidebar ───────────────────────────────────────────────────── */
#sidebar {
  width: 220px;
  background: rgba(255, 255, 255, 0.85);
  border-right: 0.5px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}

/* ── Phase 7: Specialty chips ───────────────────────────────────────────── */
.spec-chips {
  padding: 8px 10px 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
.spec-chip {
  font-size: 10px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: opacity 0.12s;
  font-family: inherit;
}
.spec-chip:hover { opacity: 0.8; }
.sc-active { outline: 1.5px solid currentColor; outline-offset: 1px; }
.sc-all  { background: #f2f2f7; color: #3c3c43; }
.sc-hart   { background: #fce8e8; color: #991f1f; }
.sc-long   { background: #e6f1fb; color: #185fa5; }
.sc-spijs  { background: #fff0e0; color: #854f0b; }
.sc-neuro  { background: #eeedfe; color: #3c3489; }
.sc-nier   { background: #eaf3de; color: #3b6d11; }
.sc-bloed  { background: #fce8e8; color: #a03030; }
.sc-stof   { background: #fff0e0; color: #854f0b; }
.sc-huid   { background: #fbeaf0; color: #993556; }
.sc-loco   { background: #e1f5ee; color: #0f6e56; }
.sc-nko    { background: #f2f2f7; color: #3c3c43; }
.sc-oog    { background: #e6f1fb; color: #185fa5; }
.sc-imm    { background: #eeedfe; color: #5234b5; }
.sc-psych  { background: #eeedfe; color: #3c3489; }
.sc-pedi   { background: #faeeda; color: #633806; }
.sc-ha     { background: #eaf3de; color: #27500a; }
.sc-micro  { background: #e1f5ee; color: #085041; }

/* ── Phase 7: Symptom list ──────────────────────────────────────────────── */
#sym-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex: 1; }
.sym-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.sym-item:hover { background: rgba(0, 0, 0, 0.03); }
.sym-item.active { background: rgba(15, 110, 86, 0.07); }
.sym-name {
  font-size: 12px;
  color: #1c1c1e;
  line-height: 1.3;
  flex: 1;
  padding-right: 8px;
}
.sym-item.active .sym-name { color: #0f6e56; font-weight: 500; }
.sym-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 99px;
  background: #1c1c1e;
  color: #fff;
  flex-shrink: 0;
}
.sym-item.active .sym-badge { background: #0f6e56; }
.sym-badge.empty { background: rgba(0, 0, 0, 0.08); color: #8e8e93; }

/* ── Sidebar toggle ──────────────────────────────────────────────────────── */
#sb-toggle {
  display: flex;
  background: rgba(0,0,0,.06);
  margin: 0 8px 6px;
  border-radius: 7px;
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}
.sb-toggle-btn {
  flex: 1;
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  padding: 4px 0;
  border-radius: 5px;
  cursor: pointer;
  color: #8e8e93;
  user-select: none;
  transition: background .12s, color .12s;
}
.sb-toggle-btn.active {
  background: #ffffff;
  color: #1c1c1e;
  box-shadow: 0 0.5px 2px rgba(0,0,0,.1);
}

/* ── Path list status dot ─────────────────────────────────────────────────── */
.path-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.path-dot-full  { background: #34c759; }
.path-dot-part  { background: #ef9f27; }
.path-dot-empty { background: transparent; border: 1.5px solid rgba(0,0,0,.18); }
.path-item.active .sym-name { color: #0f6e56; font-weight: 500; }

/* ── Phase 7: Related pathologies specialty pill ────────────────────────── */
.spec-group-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 99px;
  margin-bottom: 9px;
}

/* ── Phase 7: Woordenboek light theme ───────────────────────────────────── */
#woordenboek {
  background: transparent;
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
}
.wb-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.wb-stat {
  background: rgba(255, 255, 255, 0.85);
  border: 0.5px solid rgba(0, 0, 0, 0.07);
  border-radius: 11px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.wb-stat:hover { border-color: rgba(0, 0, 0, 0.15); }
.wb-stat-num {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -0.5px;
  line-height: 1;
}
.wb-stat-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 4px;
  opacity: 0.7;
}
.wb-stat--sym  { color: #185fa5; }
.wb-stat--test { color: #1a7f50; }
.wb-stat--ond  { color: #854f0b; }
.wb-stat--beh  { color: #5234b5; }
.wb-stat--ddx  { color: #a03030; }
.wb-stat--sym.wb-stat--active  { border-color: rgba(24,95,165,0.3); }
.wb-stat--test.wb-stat--active { border-color: rgba(26,127,80,0.3); }
.wb-stat--ond.wb-stat--active  { border-color: rgba(133,79,11,0.2); }
.wb-stat--beh.wb-stat--active  { border-color: rgba(82,52,181,0.2); }
.wb-stat--ddx.wb-stat--active  { border-color: rgba(160,48,48,0.2); }
.wb-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
}
.wb-tab {
  font-size: 11px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
  border: 0.5px solid transparent;
  color: #8e8e93;
  background: transparent;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.wb-tab:hover { color: #3c3c43; }
.wb-tab.active {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
  color: #1c1c1e;
}
.wb-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.85);
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 9px;
  padding: 7px 12px;
  margin-bottom: 12px;
}
.wb-search input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 12px;
  color: #1c1c1e;
  flex: 1;
  font-family: inherit;
}
.wb-search input::placeholder { color: #8e8e93; }
.wb-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  align-items: center;
}
.wb-add-btn {
  font-size: 11px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 7px;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  background: rgba(255,255,255,0.85);
  color: #1c1c1e;
  cursor: pointer;
  font-family: inherit;
}
.wb-add-btn:hover { background: #fff; }
.wb-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.85);
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
}
.wb-row:hover { background: #fff; }
.wb-row.active { background: #fff; outline: 1.5px solid #0f6e56; }
.wb-row-name {
  font-size: 12px;
  font-weight: 500;
  color: #1c1c1e;
}
.wb-row-meta {
  display: flex;
  gap: 6px;
  align-items: center;
}
.wb-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 99px;
  background: #f2f2f7;
  color: #8e8e93;
}
.wb-tag.has-paths {
  background: #eaf3de;
  color: #3b6d11;
}
.wb-row.w-term-editing {
  display: block;
  cursor: default;
}
.wb-row.w-term-editing:hover { background: rgba(255,255,255,0.85); }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 7 HOTFIX — !important overrides that win over old ID-selector rules
   ═══════════════════════════════════════════════════════════════════════════ */

/* FIX 9 — Page & main content background */
html, body {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
  margin: 0 !important;
  padding: 0 !important;
}
#main, #app { background: #f2f2f7 !important; }

/* FIX 1 — Topbar white (overrides old #hdr dark-blue) */
#hdr, .topbar {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
  color: #1c1c1e !important;
  height: 48px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}
/* Old #hdr search input → transparent to match topbar */
#search-in {
  border: none !important;
  background: transparent !important;
  color: #1c1c1e !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
}
#search-in::placeholder { color: #8e8e93 !important; }
#search-in:focus { border-color: transparent !important; background: transparent !important; }
/* Old logo */
.logo, .logo-sub { color: #1c1c1e !important; }

/* Nav pill overrides */
.nav-pill.active, .nav-pill[data-active="true"] {
  background: #1c1c1e !important;
  color: #fff !important;
  border-color: #1c1c1e !important;
}
.nav-pill--edit {
  background: rgba(15, 110, 86, 0.08) !important;
  color: #0F6E56 !important;
  border-color: rgba(15, 110, 86, 0.2) !important;
}
.nav-pill--edit.active {
  background: #0F6E56 !important;
  color: #fff !important;
  border-color: #0F6E56 !important;
}

/* FIX 4 — Sidebar always visible */
#sidebar {
  width: 220px !important;
  min-width: 220px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border-right: 0.5px solid rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  height: 100% !important;
}

/* FIX 5 — Specialty chips always visible */
.spec-chips {
  padding: 8px 10px 6px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06) !important;
  flex-shrink: 0 !important;
  background: transparent !important;
}
.spec-chip {
  font-size: 10px !important;
  font-weight: 500 !important;
  padding: 3px 8px !important;
  border-radius: 99px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  border: 1px solid transparent !important;
  line-height: 1.4 !important;
}
.sc-active { outline: 1.5px solid currentColor !important; outline-offset: 1px !important; }

/* FIX 6 — Woordenboek white */
#woordenboek, .woordenboek-view {
  background: transparent !important;
  color: #1c1c1e !important;
}
.wb-stat {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 0.5px solid rgba(0, 0, 0, 0.07) !important;
  border-radius: 11px !important;
  padding: 12px 14px !important;
  cursor: pointer !important;
}
.wb-stat-num { font-size: 24px !important; font-weight: 300 !important; line-height: 1 !important; }
.wb-stat-label {
  font-size: 10px !important; font-weight: 500 !important; text-transform: uppercase !important;
  letter-spacing: 0.3px !important; opacity: 0.7 !important; margin-top: 4px !important;
  color: inherit !important;
}
.wb-tab {
  font-size: 11px !important; font-weight: 500 !important; padding: 5px 12px !important;
  border-radius: 7px !important; border: 0.5px solid transparent !important;
  color: #8e8e93 !important; background: transparent !important; cursor: pointer !important;
}
.wb-tab.active, .wb-tab[data-active="true"] {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #1c1c1e !important;
}
.wb-search, .term-search {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 9px !important;
  padding: 7px 12px !important;
}
.wb-search input, .term-search input {
  background: transparent !important; color: #1c1c1e !important;
  border: none !important; outline: none !important; font-size: 12px !important;
}
.wb-row, .term-row {
  background: rgba(255, 255, 255, 0.85) !important;
  border-radius: 8px !important; padding: 9px 14px !important;
  color: #1c1c1e !important; border: none !important;
}
.wb-row:hover, .term-row:hover { background: #fff !important; }
.wb-row-name { font-size: 12px !important; font-weight: 500 !important; color: #1c1c1e !important; }
.wb-tag { background: #f2f2f7 !important; color: #8e8e93 !important; }
.wb-tag.has-paths { background: #eaf3de !important; color: #3b6d11 !important; }

/* FIX 7 — Gerelateerde pathologieën: no outer card box */
.rel-spec-section {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Sym list items light theme */
#sym-list { background: transparent !important; }
.sym-item { color: #1c1c1e !important; }
.sym-empty { color: #8e8e93 !important; font-size: 12px !important; padding: 12px !important; }

/* Dashboard stat cards */
.dash-stat, .path-card { color: #1c1c1e !important; }

/* Woordenboek w-add-btn / w-bulk-btn light theme */
.w-add-btn { background: rgba(15,110,86,0.08) !important; color: #0f6e56 !important; border-color: rgba(15,110,86,0.2) !important; }
.w-add-btn:hover { background: rgba(15,110,86,0.15) !important; }
.w-bulk-btn { color: #f59e0b !important; }

/* Old woordenboek term items — hide entirely (replaced by .wb-row) */
.w-term-item { display: none !important; }
.w-term-item.w-term-editing { display: flex !important; }

/* w-stats old container — hidden (replaced by .wb-stats) */
.w-stats { display: none !important; }
.w-tabs { display: none !important; }
.w-nav, .w-top, .w-list { display: none !important; }

/* ── Phase 8: Path Header + Body Map + Tab Strip ────────────────────────────── */
#path-header {
  background: rgba(255,255,255,0.97);
  border-bottom: 0.5px solid rgba(0,0,0,0.07);
  flex-shrink: 0;
}
.path-header-top {
  display: block;
  padding: 16px 20px 10px;
}
.path-meta { width: 100%; }
.path-name {
  font-size: 18px;
  font-weight: 500;
  color: #1c1c1e;
  letter-spacing: -0.3px;
  margin-bottom: 3px;
  line-height: 1.2;
}
.path-sub  { font-size: 11px; color: #8e8e93; letter-spacing: 0.1px; }

#body-map-slot { display: none; }
.body-map-wrap { display: none; }

/* Path tab strip */
.path-tabs {
  display: flex;
  gap: 0;
  border-top: 0.5px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.97);
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.path-tabs::-webkit-scrollbar { display: none; }
.ptab {
  font-size: 11px;
  font-weight: 500;
  padding: 8px 12px;
  color: #8e8e93;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
  user-select: none;
}
.ptab:hover { color: #3c3c43; }
.ptab.active {
  color: var(--specialty-accent, #1c1c1e);
  border-bottom-color: var(--specialty-accent, #1c1c1e);
}

/* Path sections — each field-group in the scrollable body */
.path-section { padding-bottom: 4px; }

/* Active symptom item teal accent */
.sym-item.active .sym-name { color: #0f6e56 !important; font-weight: 500 !important; }
.sym-item.active .sym-badge { background: #0f6e56 !important; }

/* ── Phase 8: Lokalisatie Editor ───────────────────────────────────────────── */
.lokalisatie-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.lok-inputs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 140px;
}
.lok-inputs input[type="color"] {
  width: 48px;
  height: 28px;
  border: 0.5px solid rgba(0,0,0,0.12);
  border-radius: 6px;
  padding: 2px;
  cursor: pointer;
  background: transparent;
}
.lok-picker-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.lok-picker {
  width: 88px;
  height: 160px;
  cursor: crosshair;
  border: 0.5px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  overflow: hidden;
  background: #fafafa;
  flex-shrink: 0;
}
.lok-picker svg { display: block; }
.lok-hint {
  font-size: 9px;
  color: #8e8e93;
  text-align: center;
  max-width: 88px;
  line-height: 1.3;
}

/* ── Phase 8: detail panel specialty accent + header overrides ───────────────── */
#detail { --specialty-accent: #1c1c1e; }

/* Compact detail-meta — hide in favour of path-header when open */
#detail.open #detail-meta { display: none; }

/* Detail header: light theme override */
#detail-hdr {
  background: rgba(255,255,255,0.97) !important;
  border-bottom: 0.5px solid rgba(0,0,0,0.08) !important;
  color: #1c1c1e !important;
}
#detail-close {
  background: rgba(0,0,0,0.05) !important;
  color: #3c3c43 !important;
}
#detail-close:hover { background: rgba(0,0,0,0.1) !important; }
#detail-spec { color: #8e8e93 !important; opacity: 1 !important; }
#detail-name { color: #1c1c1e !important; }
#btn-flag, #btn-ai, #btn-fullwindow {
  background: transparent !important;
  border: 0.5px solid rgba(0,0,0,0.1) !important;
  color: #3c3c43 !important;
  border-radius: 7px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  cursor: pointer !important;
}
#btn-flag:hover, #btn-ai:hover, #btn-fullwindow:hover { background: rgba(0,0,0,0.05) !important; }
#btn-flag.flagged { color: #e24b4a !important; border-color: rgba(226,75,74,0.3) !important; }

/* ── Phase 9: Anamnese Redesign ─────────────────────────────────────────── */
.anam-block {
  border-radius: 9px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.anam-block-label {
  font-size: 9px;
  font-weight: 600;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 7px;
}
.anam-hk {
  background: rgba(0,0,0,0.02);
  border: 0.5px solid rgba(0,0,0,0.06);
}
.anam-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 3px 0;
  font-size: 11px;
  color: #3c3c43;
  line-height: 1.5;
}
.anam-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c7c7cc;
  flex-shrink: 0;
  margin-top: 6px;
}
.anam-alarm {
  background: #fff6f6;
  border: 0.5px solid rgba(255,59,48,0.20);
}
.anam-alarm-label {
  color: #ff3b30 !important;
  display: flex;
  align-items: center;
  gap: 4px;
}
.alarm-icon {
  font-size: 11px;
  color: #ff3b30;
  flex-shrink: 0;
  margin-top: 1px;
}
.anam-pop {
  background: rgba(0,0,0,0.02);
  border: 0.5px solid rgba(0,0,0,0.06);
}
.pop-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}
.pop-kind     { background: #fff0d6; color: #a05c00; }
.pop-zwanger  { background: #fce8f3; color: #9b1d6a; }
.pop-bejaarde { background: #e8f0ff; color: #1a3fa0; }
.sym-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 0.5px solid rgba(0,0,0,0.06);
}
/* Edit mode anamnese */
.anam-edit-section { margin-bottom: 10px; }
.anam-edit-label {
  font-size: 10px;
  font-weight: 600;
  color: #8e8e93;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.anam-alarm-ta { border-left: 3px solid #ff3b30 !important; }
.anam-pop-rows { display: flex; flex-direction: column; gap: 6px; }
.anam-pop-row { display: flex; align-items: center; gap: 8px; }
.anam-pop-row .dyn-input { flex: 1; }

/* ── Phase 9: Risk Factor Pill Redesign ─────────────────────────────────── */
.rfp {
  padding: 5px 10px;
  border-radius: 8px;
  max-width: 280px;
}
.rfp-p { font-size: 11px; font-weight: 500; line-height: 1.3; }
.rfp-s { font-size: 10px; opacity: 0.72; line-height: 1.3; }
.rfp-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.rfp-dots { display: flex; gap: 2px; align-items: center; }
.dot-filled {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: 0.8;
}
.dot-empty {
  width: 5px; height: 5px; border-radius: 50%;
  border: 1px solid currentColor; opacity: 0.35;
}
.rfp-rr { font-size: 9px; font-weight: 600; opacity: 0.85; }
.rfp-pop {
  display: inline-block;
  font-size: 8px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  vertical-align: middle;
}
.rfp-pop-kind         { background: #fff0d6; color: #a05c00; }
.rfp-pop-zwangerschap { background: #fce8f3; color: #9b1d6a; }
.rfp-pop-bejaarde     { background: #e8f0ff; color: #1a3fa0; }
.rf-mod     { background: #e8f8f2; color: #1a7f50; }
.rf-nonmod  { background: #f2f2f7; color: #3c3c43; }
.rf-genetic { background: #f0eeff; color: #5234b5; }
.rf-legend {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 0.5px solid rgba(0,0,0,0.06);
  flex-wrap: wrap;
}
.rf-leg-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #8e8e93;
}
/* Edit mode RF rows */
.epi-rf-section { margin-bottom: 8px; }
.epi-rf-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.rf-row {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.rf-row .rf-label, .rf-row .rf-detail { min-width: 100px; }
.rf-row .rf-rr  { width: 64px !important; flex-shrink: 0; }
.rf-row .rf-pop { width: 110px !important; flex-shrink: 0; }

/* ── Phase 10: Visual Fixes & Layout Corrections ───────────────────────── */

/* FIX 1 — Section wrappers: no border/background/box-shadow */
.path-section, .section, .profile-section, .tab-pane {
  padding: 20px 24px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 0.5px solid rgba(0,0,0,0.05) !important;
}

/* FIX 3a — Path header meta */
.path-name {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: #1c1c1e !important;
  letter-spacing: -0.3px !important;
  margin-bottom: 3px !important;
}
.path-sub {
  font-size: 12px !important;
  color: #8e8e93 !important;
  margin-bottom: 8px !important;
}
.path-badges {
  display: flex !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
  margin-bottom: 0 !important;
}
.pbadge {
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-radius: 99px !important;
}
.pb-spec { /* color from sc-* class applied alongside */ }
.pb-can {
  background: #1c1c1e !important;
  color: #fff !important;
}

/* FIX 3b — Incidence numbers */
.epi-nums {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.epi-block { }
.epi-val {
  font-size: 22px;
  font-weight: 300;
  color: #1c1c1e;
  letter-spacing: -0.5px;
  line-height: 1;
}
.epi-unit {
  font-size: 12px;
  color: #8e8e93;
  margin-left: 1px;
}
.epi-pop {
  font-size: 11px;
  color: #3c3c43;
  margin-top: 2px;
  line-height: 1.3;
}
.epi-src {
  font-size: 10px;
  color: #185fa5;
  margin-top: 1px;
}

/* FIX 4 — Middle inhoud area */
#main, .main, .main-content, .inhoud-view, .center-panel,
#main-panel, .symptom-detail, .pathology-grid-view {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
}
.sym-header, .sym-detail-header {
  background: transparent !important;
  padding: 20px 24px 16px !important;
  border-bottom: 0.5px solid rgba(0,0,0,0.06) !important;
}
.sym-title {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: #1c1c1e !important;
  letter-spacing: -0.3px !important;
}
.canmeds-en {
  font-size: 12px !important;
  color: #8e8e93 !important;
  margin-top: 2px !important;
}
.canmeds-num {
  background: #1c1c1e !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-radius: 99px !important;
  margin-left: 8px !important;
  vertical-align: middle !important;
  display: inline-block !important;
}
.spec-tags {
  display: flex !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
  margin-top: 8px !important;
}
/* Specialty chips in sym-detail header */
.spec-tags .spec-chip {
  font-size: 10px !important;
  font-weight: 500 !important;
  padding: 3px 10px !important;
  border-radius: 99px !important;
  border: 0.5px solid rgba(0,0,0,0.1) !important;
  cursor: default !important;
}
.rel-heading, .gerelateerde-heading, .path-section-title {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #8e8e93 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  padding: 16px 24px 10px !important;
}

/* FIX 5 — Gerelateerde always visible */
.path-tab-content {
  flex: 1;
  overflow-y: auto;
  background: #f2f2f7;
}
.rel-section {
  padding: 16px 24px 24px !important;
  background: #f2f2f7 !important;
  border: none !important;
  border-top: 0.5px solid rgba(0,0,0,0.06) !important;
  margin-top: 8px !important;
}
.rel-hdr {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 14px;
}
.rel-title {
  font-size: 10px;
  font-weight: 500;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.rel-count { font-size: 10px; font-weight: 500; color: #8e8e93; letter-spacing: 0.4px; }

/* FIX 6 — Detail panel width and position */
#detail {
  position: fixed !important;
  top: 48px !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(640px, calc(100vw - 220px)) !important;
  max-width: 100% !important;
  background: #fff !important;
  border-left: 0.5px solid rgba(0,0,0,0.08) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 200 !important;
}
@media (max-width: 900px) {
  #detail {
    width: 100vw !important;
    left: 0 !important;
  }
}
#detail-close {
  position: absolute !important;
  top: 12px !important;
  left: 16px !important;
  width: 28px !important; height: 28px !important;
  border-radius: 7px !important;
  border: 0.5px solid rgba(0,0,0,0.08) !important;
  background: transparent !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important;
  font-size: 14px !important; color: #8e8e93 !important;
}
#detail-hdr-btns {
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  display: flex !important; gap: 6px !important;
}

/* FIX 7 — Pathologieënbeheer modal: light theme */
#mgmt-panel {
  background: rgba(0,0,0,0.35) !important;
}
#mgmt-box {
  background: #fff !important;
  border-radius: 14px !important;
  border: 0.5px solid rgba(0,0,0,0.1) !important;
  overflow: hidden !important;
}
#mgmt-hdr {
  background: rgba(255,255,255,0.97) !important;
  border-bottom: 0.5px solid rgba(0,0,0,0.08) !important;
  padding: 14px 20px !important;
  color: #1c1c1e !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
#mgmt-close {
  width: 28px !important; height: 28px !important;
  border-radius: 7px !important;
  border: 0.5px solid rgba(0,0,0,0.08) !important;
  background: transparent !important;
  color: #8e8e93 !important;
}
#mgmt-spec-col {
  background: rgba(248,248,248,0.95) !important;
  border-right: 0.5px solid rgba(0,0,0,0.08) !important;
  padding: 8px 0 !important;
}
.mgmt-spec-item {
  font-size: 12px !important;
  color: #3c3c43 !important;
  padding: 6px 16px !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
}
.mgmt-spec-item:hover { background: rgba(0,0,0,0.04) !important; }
.mgmt-spec-active {
  background: rgba(15,110,86,0.08) !important;
  color: #0f6e56 !important;
  font-weight: 500 !important;
}
.mgmt-spec-cnt {
  font-size: 10px !important;
  color: #8e8e93 !important;
  background: rgba(0,0,0,0.06) !important;
  padding: 1px 6px !important;
  border-radius: 99px !important;
}
#mgmt-path-col {
  background: #f2f2f7 !important;
  padding: 12px 16px !important;
}
#mgmt-search {
  background: rgba(255,255,255,0.85) !important;
  border: 0.5px solid rgba(0,0,0,0.08) !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
  margin-bottom: 10px !important;
  width: 100% !important;
  font-size: 12px !important;
  color: #1c1c1e !important;
  outline: none !important;
}
.mgmt-path-row {
  background: rgba(255,255,255,0.85) !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  margin-bottom: 3px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #1c1c1e !important;
  font-size: 12px !important;
  border: none !important;
}
.mgmt-path-row:hover { background: #fff !important; }
.mgmt-path-name { font-weight: 500 !important; color: #1c1c1e !important; }
.mgmt-path-spec { font-size: 10px !important; }
#mgmt-add-btn {
  background: #0f6e56 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

/* ── Phase 10b: Surgical Header & Layout Fixes ──────────────────────────────── */

/* FIX 2a — Spec group container: full-width column stack (override old .rel-cards grid) */
.rel-cards {
  display: block !important;
}
.spec-group {
  margin-bottom: 4px !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.spec-group-pill {
  margin-left: 0 !important;
  margin-bottom: 8px !important;
}
.spec-group-count {
  font-size: 10px !important;
  opacity: 0.6 !important;
}
.path-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 7px !important;
  margin-left: 0 !important;
  margin-bottom: 14px !important;
}

/* FIX 2c — Reduce spacing between specialty groups */
.rel-spec-divider {
  height: 0.5px !important;
  background: rgba(0,0,0,0.06) !important;
  border: none !important;
  margin: 4px 0 12px !important;
}

/* FIX 3 — pc-spec label in related path cards */
.rel-path-card-v6 .pc-spec {
  font-size: 9px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 3px !important;
  opacity: 0.85 !important;
}

/* FIX 4 — Remove border crossing header buttons:
   #detail-hdr has padding 16+14=30px; buttons are position:absolute top:12px height:28px
   so they span y=12–40px — the border-bottom at y=30px cuts through them. Remove it.
   path-tabs border-bottom is the only divider needed. */
#detail-hdr {
  border-bottom: none !important;
  min-height: 52px !important;
}
#path-header {
  border-top: none !important;
  border-bottom: none !important;
}
.path-tabs {
  border-top: none !important;
  border-bottom: 0.5px solid rgba(0,0,0,0.06) !important;
}

/* FIX 5 — Full-screen expand: override Phase 10 !important width */
body.full-window #detail {
  width: 100vw !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

/* ── Phase 11: Bug Fixes ─────────────────────────────────────────────────────── */

/* FIX 3 — Opslaan / Annuleren buttons in panel header */
.btn-opslaan {
  background: #0f6e56;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.btn-opslaan:hover { background: #0a5a45; }
.btn-annuleren {
  background: transparent;
  color: #8e8e93;
  border: 0.5px solid rgba(0,0,0,0.12);
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.btn-annuleren:hover { background: rgba(0,0,0,0.04); }

/* FIX 5a — Reduce gap between rel-hdr and first spec-group */
.rel-hdr { margin-bottom: 10px !important; }
.spec-group:first-child { margin-top: 0 !important; }
.spec-group { margin-top: 0 !important; }
.spec-group-pill { margin-top: 0 !important; }

/* ── Phase 12: Beloop Tab + Header Simplification ────────────────────────────── */

/* Location badge */
.pbadge.pb-loc {
  background: #f2f2f7;
  color: #6c6c70;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 500;
}

/* Beloop tab active color */
.ptab[data-section="beloop"].active {
  color: #0f6e56 !important;
  border-bottom-color: #0f6e56 !important;
}

/* Beloop empty state */
.beloop-empty {
  padding: 48px 0;
  text-align: center;
  color: #8e8e93;
  font-size: 13px;
}
.btn-ai-beloop {
  display: inline-block;
  margin-top: 12px;
  background: rgba(15,110,86,0.08);
  color: #0f6e56;
  border: 0.5px solid rgba(15,110,86,0.2);
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

/* Beloop chart wrapper */
.beloop-view { padding: 0 20px 24px; }
.bl-chart-wrap { position: relative; }

/* Y-axis labels inside the track */
.bl-y-axis {
  position: absolute;
  left: 4px;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3px 0;
  pointer-events: none;
  z-index: 2;
}
.bl-y-val {
  font-size: 9px;
  color: rgba(100,100,100,0.45);
  line-height: 1;
  font-family: inherit;
}


/* Zone section labels */
.bl-zone-label {
  font-size: 9px;
  font-weight: 600;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 8px 0 6px 124px;
}

/* Phase strip */
.bl-phase-strip {
  display: flex;
  margin-left: 124px;
  margin-bottom: 8px;
  gap: 2px;
}
.bl-phase-band {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 2px;
  border-radius: 3px;
}
.bl-phase-label {
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Continuous variable rows */
.bl-cont-zone { margin-bottom: 0; }
.bl-cv-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.bl-cv-label {
  flex-shrink: 0;
  padding-right: 12px;
  text-align: right;
}
.bl-cv-name {
  font-size: 11px;
  font-weight: 500;
  color: #3c3c43;
  line-height: 1.3;
}
.bl-cv-norm  { font-size: 9px; color: #8e8e93; margin-top: 1px; }
.bl-cv-noot  { font-size: 9px; color: #8e8e93; font-style: italic; margin-top: 1px; }
.bl-cv-track {
  flex: 1;
  min-width: 0;
  position: relative;
  background: rgba(0,0,0,0.018);
  border: 0.5px solid rgba(0,0,0,0.06);
  border-radius: 6px;
  overflow: hidden;
  height: 52px;
}
.bl-peak-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.85;
}
.bl-ref-label {
  position: absolute;
  right: 6px;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 500;
  opacity: 0.55;
  pointer-events: none;
  white-space: nowrap;
  font-family: inherit;
}
.bl-cv-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Divider between zones */
.bl-zone-divider {
  margin: 10px 0 10px 124px;
  border: none;
  border-top: 0.5px solid rgba(0,0,0,0.07);
}

/* Swimlane zone */
.bl-swim-zone { margin-bottom: 4px; }
.bl-swim-row {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.bl-swim-label {
  flex-shrink: 0;
  font-size: 10px;
  color: #6c6c70;
  text-align: right;
  padding-right: 10px;
  line-height: 1.3;
}
.bl-swim-track {
  flex: 1;
  min-width: 0;
  height: 19px;
  position: relative;
}
.bl-swim-bar {
  position: absolute;
  height: 100%;
  min-width: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 5px;
  overflow: hidden;
}
.bl-swim-noot {
  font-size: 8px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* X-axis */
.bl-axis {
  position: relative;
  margin-left: 124px;
  border-top: 0.5px solid rgba(0,0,0,0.07);
  margin-top: 12px !important;
  height: 28px;
}
.bl-tick {
  position: absolute;
  transform: translateX(-50%);
}
.bl-tick span {
  font-size: 9px !important;
  color: rgba(100,100,100,0.45) !important;
  display: block;
  padding-top: 4px;
}
.bl-axis-label {
  text-align: center;
  font-size: 9px !important;
  color: rgba(100,100,100,0.45) !important;
  margin-top: 8px !important;
  margin-left: 124px;
}
.bl-yaxis {
  position: relative;
  width: 28px;
  flex-shrink: 0;
  height: 52px;
}
.bl-ytick {
  position: absolute;
  left: 4px;
  transform: translateY(-50%);
  font-size: 8px;
  color: rgba(100,100,100,0.38);
  line-height: 1;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  white-space: nowrap;
}

/* Legend */
.bl-legend {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 0.5px solid rgba(0,0,0,0.06);
  flex-wrap: wrap;
  align-items: center;
  font-size: 10px;
  color: #8e8e93;
}
.bl-leg-item { display: flex; align-items: center; gap: 5px; }
.bl-leg-line { width: 22px; height: 2px; border-radius: 1px; background: #e24b4a; }
.bl-leg-bar-grad { width: 22px; height: 8px; border-radius: 2px;
                   background: linear-gradient(to right, rgba(255,159,10,0.2), rgba(255,159,10,0.7)); }
.bl-leg-bar-flat { width: 22px; height: 8px; border-radius: 2px;
                   background: rgba(142,142,147,0.25); }
.bl-leg-note { margin-left: auto; font-style: italic; color: #c7c7cc; }

/* Beloop edit form */
.beloop-edit { padding: 16px 20px; }
.bl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.bl-edit-lbl { font-size: 11px; font-weight: 500; color: #3c3c43; min-width: 90px; }
.bl-edit-section-hdr {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8e8e93;
  margin: 16px 0 8px;
}
.bl-edit-fase-row,
.bl-edit-sym-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.bl-edit-cv { margin-bottom: 14px; border: 0.5px solid rgba(0,0,0,0.08); border-radius: 8px; padding: 10px; }
.bl-edit-cv-hdr { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.bl-tp-table { font-size: 11px; border-collapse: collapse; }
.bl-tp-table th { font-weight: 500; color: #8e8e93; padding: 2px 6px; }
.bl-tp-table td { padding: 2px 4px; }
.bl-tp-del { background: none; border: none; color: #e24b4a; cursor: pointer; font-size: 13px; padding: 0 4px; }
.bl-tp-add, .bl-add-btn { background: rgba(0,0,0,0.04); border: 0.5px solid rgba(0,0,0,0.1); border-radius: 6px; padding: 4px 10px; font-size: 11px; cursor: pointer; font-family: inherit; margin-top: 4px; }

/* Beloop dashboard dot */
.bl-dot { border-radius: 3px !important; }

/* ── Phase 14: Se/Sp bars ──────────────────────────────────────────────────── */
.sesp-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-left: 2px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.sesp-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.sesp-label {
  font-size: 9px;
  font-weight: 600;
  width: 14px;
  flex-shrink: 0;
  font-family: inherit;
}
.sesp-bar-bg {
  width: 72px;
  height: 5px;
  background: rgba(0,0,0,0.07);
  border-radius: 99px;
  overflow: hidden;
  flex-shrink: 0;
}
.sesp-bar-fill {
  height: 100%;
  border-radius: 99px;
}
.sesp-pct {
  font-size: 9px;
  color: var(--color-text-secondary, #8e8e93);
  min-width: 26px;
  font-family: inherit;
}
.sesp-note {
  font-size: 9px;
  color: var(--color-text-secondary, #8e8e93);
  font-style: italic;
  font-family: inherit;
}
.test-sesp {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.test-sesp .sesp-wrap {
  margin-top: 0;
  gap: 6px;
}
.sesp-legend {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 0.5px solid rgba(0,0,0,0.06);
  flex-wrap: wrap;
}
.sesp-leg-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--color-text-secondary, #8e8e93);
}
.sesp-leg-bar {
  width: 32px;
  height: 5px;
  border-radius: 99px;
  flex-shrink: 0;
}
.sesp-leg-note {
  font-style: italic;
  color: rgba(100,100,100,0.5);
}

/* klo-row: column layout so sesp-wrap appears below klo-row-top */
.klo-row { flex-direction: column; }
.klo-row-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}

/* test-item left column (for Se/Sp) */
.test-item { align-items: flex-start; }
.test-item-left { display: flex; flex-direction: column; }

/* ── Phase 14: DDx priority tiers ────────────────────────────────────────── */
.ddx-tier-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 12px 0 6px;
}
.ddx-tier-label:first-child { margin-top: 0; }
.ddx-tier-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ddx-row:not(.dyn-row) {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 0;
  border-bottom: 0.5px solid rgba(0,0,0,0.05);
}
.ddx-row:not(.dyn-row):last-child { border-bottom: none; }
.ddx-row:not(.dyn-row):hover { background: rgba(0,0,0,0.02); border-radius: 4px; }
.ddx-left {
  width: 44%;
  flex-shrink: 0;
}
.ddx-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-primary, #1c1c1e);
  line-height: 1.3;
}
.ddx-feature {
  flex: 1;
  font-size: 11px;
  color: var(--color-text-secondary, #6c6c70);
  line-height: 1.5;
}

/* ── Phase 15: Per-row hoofdklacht edit ─────────────────────────────────── */
.hk-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.hk-row {
  background: rgba(0,0,0,0.02);
  border: 0.5px solid rgba(0,0,0,0.08);
  border-radius: 9px;
  padding: 8px 10px;
}
.hk-row-top {
  display: flex; gap: 6px; align-items: center; margin-bottom: 6px;
}
.hk-row-top .hk-tekst { flex: 1; font-size: 12px; }
.hk-row-del {
  background: transparent; border: none; cursor: pointer;
  font-size: 14px; color: #8e8e93; padding: 4px 8px;
  border-radius: 5px;
}
.hk-row-del:hover { background: rgba(255,59,48,0.10); color: #ff3b30; }
.hk-row-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px;
}
.hk-row-grid .dyn-input { font-size: 10px; }
.hk-add { margin-top: 4px; }

/* Phase 15: clickable hoofdklacht items in study view */
.anam-item-clickable { cursor: pointer; border-radius: 5px; padding: 3px 4px; transition: background 0.15s; }
.anam-item-clickable:hover { background: rgba(0,122,255,0.06); }
.anam-dot.anam-dot-rich { background: #007aff; box-shadow: 0 0 0 2px rgba(0,122,255,0.18); }

/* ── Phase 15: Symptoom vergelijkingsmodal ─────────────────────────────── */
.sym-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.40);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 1000;
}
.sym-modal {
  background: #f2f2f7;       /* gray body — header overrides to white */
  border-radius: 16px;
  width: 100%; max-width: 720px; max-height: 85vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  border: 0.5px solid rgba(0,0,0,0.08);
}
.sym-modal-header {
  background: #fff;
  padding: 16px 20px 0;
  border-bottom: 0.5px solid rgba(0,0,0,0.07);
  display: flex; align-items: flex-start; justify-content: space-between;
}
.sym-modal-title {
  font-size: 18px; font-weight: 500;
  color: #1c1c1e; letter-spacing: -0.2px;
}
.sym-modal-sub {
  font-size: 11px; color: #8e8e93;
  margin-top: 2px; margin-bottom: 10px;
}
.sym-modal-close {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  border: 0.5px solid rgba(0,0,0,0.08);
  cursor: pointer; font-size: 13px; color: #8e8e93;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-family: inherit;
}
.sym-modal-tabs {
  display: flex;
  background: #fff;
  padding: 0 18px;
  border-bottom: 0.5px solid rgba(0,0,0,0.08);
}
.sym-mtab {
  font-size: 11px; font-weight: 500;
  padding: 8px 14px; color: #8e8e93;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -0.5px;
}
.sym-mtab.active { color: #1c1c1e; border-bottom-color: #1c1c1e; }
.sym-modal-body {
  overflow-y: auto;
  padding: 12px 16px 16px;
  flex: 1;
}
.sym-qual-card {
  background: #fff;          /* white card on the gray modal body */
  border-radius: 10px;
  border: 0.5px solid rgba(0,0,0,0.07);
  border-left-width: 3px;    /* colored left border encodes specialty (set inline) */
  border-left-color: #c7c7cc;
  padding: 11px 13px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.sym-qual-card:hover { border-color: rgba(0,0,0,0.14); /* keep specialty color on left */ }
.sym-qual-path-row { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.sym-qual-path-name { font-size: 12px; font-weight: 500; color: #1c1c1e; }
.sym-qual-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.sym-qual-col-label {
  font-size: 8px; font-weight: 600;
  color: #8e8e93;
  text-transform: uppercase; letter-spacing: 0.3px;
  margin-bottom: 3px;
}
.sym-qual-col-val { font-size: 11px; color: #1c1c1e; line-height: 1.4; }
.sym-qual-col-val.alarm { color: #a03030; font-weight: 500; }
.sym-quant-wrap {
  background: #fff;
  border-radius: 10px;
  border: 0.5px solid rgba(0,0,0,0.07);
  padding: 12px;
}
.sym-quant-row { display: flex; align-items: flex-start; margin-bottom: 14px; }
.sym-quant-row:last-of-type { margin-bottom: 6px; }
.sym-quant-label {
  width: 170px; flex-shrink: 0;
  text-align: right; padding-right: 12px; line-height: 1.25;
  padding-top: 1px;
}
.sym-quant-name {
  font-size: 11px; font-weight: 500; color: #3c3c43; line-height: 1.3;
  /* Allow wrapping for long pathology names instead of truncating with ellipsis */
  white-space: normal;
  overflow-wrap: anywhere;
}
.sym-quant-unit {
  font-size: 9px; color: #8e8e93;
  margin-top: 1px; line-height: 1;
}
.sym-quant-col { flex: 1; min-width: 0; }
.sym-quant-track {
  width: 100%; height: 14px;
  background: rgba(0,0,0,0.035);
  border-radius: 99px;
  position: relative; overflow: hidden;
  margin-bottom: 0;
}
.sym-quant-bar {
  position: absolute; top: 0; bottom: 0;
  border-radius: 99px;
}
.sym-tick-row {
  position: relative;
  height: 18px;
  margin-top: 1px;
}
.sym-tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 8px;
  color: rgba(100,100,100,0.55);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.sym-tick::before {
  content: '';
  display: block;
  width: 1px;
  height: 4px;
  background: rgba(0,0,0,0.18);
  margin: 0 auto 2px;
}
.sym-tick-piek { font-weight: 500; }
.sym-tick-piek::before { background: currentColor; opacity: 0.55; }
.sym-sec-label {
  font-size: 9px; font-weight: 600;
  color: #8e8e93;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin: 12px 0 8px;
}
.sym-sec-label:first-child { margin-top: 0; }
.sym-legend {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; font-size: 10px; color: #8e8e93;
  align-items: center;
}
.sym-leg-item { display: flex; align-items: center; gap: 4px; }
.sym-leg-bar { width: 20px; height: 4px; border-radius: 2px; }
.sym-noqual-pill {
  display: inline-block;
  font-size: 11px; padding: 4px 11px; border-radius: 99px;
  background: #fff; border: 0.5px solid rgba(0,0,0,0.08);
  color: #6c6c70; cursor: pointer;
  margin-right: 4px; margin-bottom: 4px;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
.sym-noqual-pill:hover { color: #1c1c1e; border-color: rgba(0,0,0,0.14); }

/* Phase 15: "Vergelijk presentatie" button in left-column symptom detail */
.sym-vergelijk-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 7px;
  font-size: 11px; font-weight: 500;
  background: rgba(0,122,255,0.08);
  border: 0.5px solid rgba(0,122,255,0.2);
  color: #185fa5;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s;
}
.sym-vergelijk-btn:hover { background: rgba(0,122,255,0.14); }

/* Phase 15: SNOMED badge */
.snomed-num {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10px; font-weight: 600;
  background: rgba(127,119,221,0.10);
  color: #4f46b8;
  margin-left: 8px;
}


/* Phase 15: Kwantitatief mode toggle (per pathologie / shared log) */
.sym-quant-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 10px;
}
.sym-quant-mode {
  display: inline-flex;
  background: rgba(0,0,0,0.04);
  border: 0.5px solid rgba(0,0,0,0.08);
  border-radius: 7px;
  padding: 2px;
}
.sym-quant-mode-btn {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 10px; font-weight: 500;
  padding: 4px 10px;
  border-radius: 5px;
  color: #6c6c70;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sym-quant-mode-btn:hover { color: #1c1c1e; }
.sym-quant-mode-btn.active {
  background: #fff;
  color: #1c1c1e;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.08);
}

/* Shared-axis variants */
.sym-quant-track-shared {
  /* same as default track; kept as a hook for future tweaks */
}
.sym-quant-piek-mark {
  position: absolute;
  top: -1px; bottom: -1px;
  width: 1.5px;
  border-radius: 1px;
  pointer-events: none;
  opacity: 0.85;
}
.sym-shared-axis-wrap {
  margin-left: 170px;       /* align under the bar tracks (label column = 170px) */
  margin-top: 6px;
  margin-bottom: 8px;
  border-top: 0.5px solid rgba(0,0,0,0.08);
  padding-top: 4px;
  position: relative;
}
.sym-shared-axis {
  position: relative;
  height: 14px;
}
.sym-shared-tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 9px;
  color: #8e8e93;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sym-shared-tick::before {
  content: '';
  display: block;
  width: 1px; height: 4px;
  background: rgba(0,0,0,0.18);
  margin: -4px auto 1px;
}

/* ── Phase 16: Symptoom 6-Dimensie Panel ─────────────────────────────────── */
:root {
  --sym6-bg:        #f2f2f7;
  --sym6-card:      #fff;
  --sym6-border:    0.5px solid rgba(0,0,0,0.08);
  --sym6-radius:    12px;
  --sym6-must-miss: #ff3b30;
  --sym6-frequent:  #ff9f0a;
  --sym6-zeldzaam:  #c7c7cc;
  --sym6-teal:      #0f6e56;
}

/* Panel header */
.sym6-panel-hdr {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 0 8px;
  border-bottom: var(--sym6-border);
  margin-bottom: 10px;
}
.sym6-dim-num {
  font-size: 9px; font-weight: 700;
  color: #8e8e93; text-transform: uppercase; letter-spacing: 0.4px;
  flex-shrink: 0;
}
.sym6-dim-title {
  font-size: 12px; font-weight: 600; color: #1c1c1e;
}
.sym6-dim-sub {
  font-size: 10px; color: #8e8e93; margin-left: 2px;
}

/* Row layout — name column + visual column */
.sym6-row {
  display: flex; align-items: center;
  padding: 7px 10px;
  background: var(--sym6-card);
  border-radius: 8px;
  border: var(--sym6-border);
  margin-bottom: 5px;
  cursor: pointer;
  transition: border-color 0.12s;
  gap: 10px;
}
.sym6-row:hover { border-color: rgba(0,0,0,0.15); }
.sym6-pc {
  width: 150px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.sym6-pn {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; color: #1c1c1e;
  line-height: 1.25;
}
.sym6-pd {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.sym6-sc {
  font-size: 8.5px; font-weight: 500;
  padding: 2px 6px; border-radius: 4px;
  align-self: flex-start; margin-left: 11px;
  white-space: nowrap;
}
.sym6-vc { flex: 1; min-width: 0; }

/* Shared time-axis */
.sym6-time-axis {
  position: relative;
  height: 18px;
  margin: 0 0 4px 150px;
  border-bottom: 0.5px solid rgba(0,0,0,0.1);
  padding-bottom: 2px;
}
.sym6-ta-tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 8px; color: #8e8e93;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sym6-ta-tick::before {
  content: '';
  display: block;
  width: 1px; height: 4px;
  background: rgba(0,0,0,0.15);
  margin: 0 auto 1px;
}

/* Waveform SVG track */
.sym6-waveform {
  width: 100%; height: 28px;
  display: block;
}

/* Dot matrix (Karakter) */
.sym6-kar-grid {
  display: grid;
  gap: 4px;
  align-items: center;
}
.sym6-karcol {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.sym6-karcol-hdr {
  font-size: 7.5px; font-weight: 600; color: #8e8e93;
  text-transform: uppercase; letter-spacing: 0.2px;
  text-align: center; margin-bottom: 2px;
}
.dots { display: flex; flex-direction: column; gap: 3px; }
.df {
  width: 8px; height: 8px; border-radius: 50%;
}
.de {
  width: 8px; height: 8px; border-radius: 50%;
  background: transparent;
  border: 1.5px solid;
}

/* NRS bar (Ernst) */
.sym6-nrs-axis {
  position: relative;
  height: 16px;
  margin: 0 0 4px 150px;
  border-bottom: 0.5px solid rgba(0,0,0,0.1);
}
.sym6-nrs-tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 8px; color: #8e8e93;
  white-space: nowrap;
}
.sym6-nrs-tick::before {
  content: '';
  display: block;
  width: 1px; height: 4px;
  background: rgba(0,0,0,0.15);
  margin: 0 auto 1px;
}
.sym6-nrs-track {
  width: 100%; height: 14px;
  background: rgba(0,0,0,0.04);
  border-radius: 99px;
  position: relative;
  overflow: visible;
}
.sym6-nrs-range {
  position: absolute; top: 0; bottom: 0;
  border-radius: 99px;
}
.sym6-nrs-peak {
  position: absolute;
  top: -1px; bottom: -1px;
  width: 8px; height: 16px;
  border-radius: 50%;
  transform: translateX(-50%);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.sym6-nrs-arrow {
  position: absolute; right: -16px; top: 50%;
  transform: translateY(-50%);
  font-size: 11px; color: #e24b4a;
  font-weight: 700;
}
.sym6-nrs-chips {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.ec {
  font-size: 10px; padding: 2px 8px; border-radius: 99px;
  font-weight: 500;
}
.ec.f { background: rgba(0,122,255,0.10); color: #0a5fa5; }
.ec.d { background: rgba(52,199,89,0.12); color: #1a6b2a; }
.ec.e { background: rgba(226,75,74,0.10); color: #8b1c1c; }

/* Lokalisatie head SVG */
.sym6-lok-wrap {
  display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap;
}
.sym6-lok-head {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.sym6-lok-label {
  font-size: 8px; color: #8e8e93; text-align: center;
}
.sym6-lok-desc {
  font-size: 10px; color: #3c3c43; flex: 1; min-width: 0;
  align-self: center;
}

/* Uitlokkers */
.sym6-uitl-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  width: 100%;
}
.sym6-uitl-hdr {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin: 0 0 6px 150px;
  font-size: 9px; color: #8e8e93; font-weight: 500;
}
.ut {
  display: inline-block;
  font-size: 10px; padding: 2px 8px; border-radius: 99px;
  background: #fef0f0; color: #7c2020;
  margin: 2px 2px 0 0;
  white-space: nowrap;
}
.ur {
  display: inline-block;
  font-size: 10px; padding: 2px 8px; border-radius: 99px;
  background: #e8f8f2; color: #0f5a35;
  margin: 2px 2px 0 0;
  white-space: nowrap;
}
.sym6-no-reliever {
  font-style: italic; color: #8e8e93; font-size: 10px;
}

/* Geassocieerd chips */
.sym6-geo-wrap {
  display: flex; flex-wrap: wrap; gap: 4px;
  width: 100%;
}
.ac {
  display: inline-block;
  font-size: 10px; padding: 3px 9px; border-radius: 99px;
  border: 0.5px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
  color: #3c3c43;
}
.ac.sn { background: rgba(127,119,221,0.10); color: #3a3570; }
.ac.sg { background: rgba(52,199,89,0.10);   color: #1a5c2a; }
.ac.se { background: rgba(90,200,250,0.12);  color: #0a5070; }
.ac.so { background: rgba(52,199,89,0.10);   color: #1a5c2a; }
.ac.sk { background: rgba(0,122,255,0.10);   color: #0a4fa5; }
.ac.sd { background: rgba(255,149,0,0.10);   color: #7c3800; }
.ac.sl { background: rgba(255,149,0,0.10);   color: #7c3800; }
.ac.s3 { font-weight: 600; opacity: 1; }
.ac.s2 { font-weight: 400; opacity: 0.72; }
.ac.s1 { font-weight: 400; opacity: 0.42; }

/* No-data section */
.sym6-nodata-section {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--sym6-card);
  border-radius: 8px;
  border: var(--sym6-border);
}
.sym6-sec-label {
  font-size: 9px; font-weight: 600; color: #8e8e93;
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.sym6-empty-dim {
  margin-top: 16px;
  padding: 18px 20px;
  background: var(--sym6-card);
  border-radius: 8px;
  border: var(--sym6-border);
  text-align: center;
}
.sym6-empty-dim-title {
  font-size: 12px; font-weight: 500; color: #3c3c43;
  margin-bottom: 6px;
}
.sym6-empty-dim-sub {
  font-size: 11px; color: #8e8e93; line-height: 1.5;
  max-width: 480px; margin: 0 auto;
}


/* ── Sym modal: klinisch profiel ─────────────────────────────────────────── */
.sym6-kp-block{border-bottom:0.5px solid var(--color-border-tertiary);}
.sym6-kp-block:last-of-type{border-bottom:none;}
.sym6-kp-head{padding:11px 20px 7px;display:flex;align-items:center;gap:7px;}
.sym6-kp-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.sym6-kp-name{font-size:13px;font-weight:500;color:var(--color-text-primary);}
.sym6-kp-dims{display:flex;flex-direction:column;padding:0 20px 10px;}
.sym6-kp-row{display:flex;align-items:flex-start;padding:5px 0;border-top:0.5px solid var(--color-border-tertiary);}
.sym6-kp-label-col{width:90px;flex-shrink:0;display:flex;align-items:flex-start;gap:6px;padding-top:4px;}
.sym6-kp-accent{width:3px;min-height:18px;align-self:stretch;flex-shrink:0;border-radius:0;}
.sym6-kp-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.45px;color:var(--color-text-secondary);}
.sym6-kp-content{flex:1;padding:3px 0 3px 10px;display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start;align-items:flex-start;}
.sym6-kp-actie{font-size:11px;color:var(--color-text-secondary);line-height:1.5;padding:3px 0;width:100%;}

/* Chip base — consistent size across all variants */
.sym6-kp-chip{font-size:10.5px;padding:3px 9px;border-radius:99px;border:0.5px solid;line-height:1.3;white-space:nowrap;}
.sym6-kp-chip-neutral{background:rgba(0,0,0,.05);color:var(--color-text-primary);border-color:rgba(0,0,0,.1);}
.sym6-kp-chip-neutral.sym6-kp-chip-strong{font-weight:500;border-color:rgba(0,0,0,.18);}
.sym6-kp-chip-alarm{background:#fcebeb;color:#a32d2d;border-color:rgba(163,45,45,.2);font-weight:500;}
.sym6-kp-chip-blue{background:#e6f1fb;color:#0c447c;border-color:rgba(24,95,165,.18);}
.sym6-kp-chip-neg{background:rgba(0,0,0,.03);color:var(--color-text-tertiary);border-color:rgba(0,0,0,.07);text-decoration:line-through;}

/* Geassocieerd legend strip */
.sym6-assoc-legend{display:flex;gap:6px;padding:7px 20px;border-bottom:0.5px solid var(--color-border-tertiary);background:var(--color-background-secondary);flex-wrap:wrap;align-items:center;}

/* Karakter grid — no hardcoded column count */
.sym6-kar-grid{display:grid;gap:4px;align-items:center;}

/* Samenvatting in path-header */
.path-samenvatting{padding:4px 20px 10px;}
.path-samenvatting p{font-size:11px;line-height:1.55;color:var(--color-text-secondary,#8e8e93);margin:0;}