/* Knipmes Lidmaat Profile v2
   Isolated kp-* namespace to avoid collisions with legacy profile CSS.
*/

.kp-profile {
  display: block;
  margin: 0;
  padding: 0;
  background: #ffffff;
  border: 1px solid #d9e0e5;
  border-radius: 9px;
  overflow: hidden;
  color: #1f2a33;
  text-align: left;
}

.kp-profile,
.kp-profile * {
  box-sizing: border-box;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

.kp-head {
  display: block;
  padding: 11px 13px;
  background: #f5f7fa;
  border-bottom: 1px solid #dfe5e9;
}

.kp-identity {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
}

.kp-avatar {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #4c6696;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}

.kp-namebox {
  display: block;
  min-width: 0;
}

.kp-eyebrow {
  margin: 0 0 2px;
  padding: 0;
  font-size: 10px;
  line-height: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #74808a;
}

.kp-name {
  margin: 0;
  padding: 0;
  font-size: 19px;
  line-height: 22px;
  font-weight: 800;
  color: #1f2a33;
}

.kp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px 7px;
  margin: 4px 0 0;
  padding: 0;
  font-size: 11px;
  line-height: 14px;
  color: #66727b;
}

.kp-status {
  padding: 1px 6px;
  border-radius: 10px;
  background: #e7f4ea;
  color: #2e7147;
  font-weight: 800;
}

.kp-summary {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px 20px;
  margin: 9px 0 0;
  padding: 0;
}

.kp-summary-item {
  display: block;
  flex: 0 1 auto;
  min-width: 130px;
  max-width: 320px;
  margin: 0;
  padding: 0;
  color: inherit;
  text-decoration: none;
  text-align: left;
}

.kp-summary-item > span {
  display: block;
  margin: 0 0 1px;
  padding: 0;
  font-size: 9px;
  line-height: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #7b8790;
}

.kp-summary-item > strong {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 15px;
  font-weight: 700;
  text-align: left;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.kp-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 8px;
  padding: 8px;
  background: #f7f9fa;
}

.kp-section {
  display: block;
  align-self: start;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #dfe5e9;
  border-radius: 7px;
  overflow: hidden;
}

.kp-section-title {
  display: block;
  margin: 0;
  padding: 6px 8px;
  background: #f4f6f8;
  border-bottom: 1px solid #e4e9ed;
  font-size: 12px;
  line-height: 14px;
  font-weight: 800;
  color: #3a4650;
  text-align: left;
}

.kp-fields {
  display: block;
  margin: 0;
  padding: 1px 0;
}


.kp-row {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 3px 8px !important;
  border-bottom: 1px solid #f0f2f4;
  text-align: left !important;
  line-height: normal !important;
  white-space: normal !important;
}

.kp-row:last-child {
  border-bottom: 0;
}

.kp-label {
  display: inline-block !important;
  width: 112px !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top !important;
  font-size: 11px !important;
  line-height: 14px !important;
  font-weight: 700;
  color: #697680;
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  word-break: normal !important;
}

.kp-value {
  display: inline-block !important;
  width: calc(100% - 120px) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top !important;
  font-size: 12px !important;
  line-height: 15px !important;
  font-weight: 400;
  color: #202a31;
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  word-break: normal !important;
  overflow-wrap: break-word;
  white-space: normal !important;
}
.kp-value a {
  color: #2e6197;
  text-decoration: none;
}

.kp-value a:hover {
  text-decoration: underline;
}

.kp-tech {
  display: block;
  margin: 0 8px 8px;
  padding: 0;
  border: 1px solid #ded8e7;
  border-radius: 7px;
  overflow: hidden;
}

.kp-tech > summary {
  display: block;
  margin: 0;
  padding: 6px 8px;
  cursor: pointer;
  background: #f6f3fa;
  color: #625785;
  font-size: 11px;
  line-height: 13px;
  font-weight: 800;
  text-align: left;
}

.kp-tech-fields {
  display: block;
  margin: 0;
  padding: 1px 0;
}


.kp-tech-row {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 3px 8px !important;
  border-top: 1px solid #eeeaf2;
  text-align: left !important;
}

.kp-tech-label {
  display: inline-block !important;
  width: 125px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top !important;
  font-size: 10px;
  line-height: 13px;
  color: #766d83;
  text-align: left !important;
}

.kp-tech-value {
  display: inline-block !important;
  width: calc(100% - 133px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top !important;
  font-size: 11px;
  line-height: 14px;
  color: #283038;
  text-align: left !important;
  word-break: normal;
  overflow-wrap: break-word;
}

@media (max-width: 800px) {
  .kp-sections {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .kp-label {
    width: 95px !important;
  }

  .kp-value {
    width: calc(100% - 103px) !important;
  }

  .kp-summary {
    gap: 6px 14px;
  }

  .kp-summary-item {
    min-width: 110px;
  }
}


/* v4: whitespace fix.
   Template indentation/newlines must never create blank lines inside values. */
.kp-value,
.kp-tech-value {
  white-space: normal !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 15px !important;
}

.kp-row,
.kp-tech-row {
  height: auto !important;
  min-height: 0 !important;
}


/* v5: sections size to their useful content instead of equal half-page columns */
.kp-sections {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 8px !important;
}

.kp-section {
  flex: 0 1 auto !important;
  width: fit-content !important;
  min-width: 300px !important;
  max-width: 560px !important;
}

.kp-fields {
  width: auto !important;
}

.kp-row {
  width: auto !important;
  white-space: nowrap !important;
}

.kp-label {
  width: 108px !important;
  min-width: 108px !important;
}

.kp-value {
  width: auto !important;
  min-width: 120px !important;
  max-width: 420px !important;
  white-space: normal !important;
}

/* Notes can use more width when there is genuinely long text. */
.kp-section-4 {
  max-width: 760px !important;
}

/* Visit details are usually compact but can grow for long addresses. */
.kp-section-visit {
  max-width: 620px !important;
}

@media (max-width: 760px) {
  .kp-section,
  .kp-section-4,
  .kp-section-visit {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .kp-row {
    white-space: normal !important;
  }

  .kp-value {
    min-width: 0 !important;
    max-width: none !important;
  }
}


/* Storting history - lazy-loaded, hidden by default */
.kp-stortings-panel {
  margin: 0 8px 8px;
}

.kp-stortings-toggle {
  display: inline-block;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid #cfd9e1;
  border-radius: 6px;
  background: #eef4f8;
  color: #35566d;
  font-size: 11px;
  line-height: 14px;
  font-weight: 800;
  cursor: pointer;
}

.kp-stortings-toggle.secondary {
  background: #fff;
}

.kp-stortings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
  padding: 7px 8px;
  border: 1px solid #d9e3e9;
  border-radius: 7px;
  background: #f4f8fa;
}

.kp-stortings-head > div > strong {
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.kp-stortings-head > div > span {
  display: block;
  margin-top: 1px;
  font-size: 10px;
  line-height: 12px;
  color: #71808b;
}

.kp-stortings-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 7px;
}

.kp-storting {
  flex: 0 1 auto;
  min-width: 300px;
  max-width: 620px;
  margin: 0;
  padding: 0;
  border: 1px solid #dfe5e9;
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
}

.kp-storting-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 10px;
  padding: 5px 8px;
  background: #f7f9fa;
  border-bottom: 1px solid #e8ecef;
  font-size: 11px;
  line-height: 14px;
}

.kp-storting-title > strong {
  font-size: 12px;
}

.kp-storting-title > span {
  color: #62717b;
}

.kp-storting-meta,
.kp-storting-months {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  padding: 5px 8px;
}

.kp-storting-meta > div,
.kp-storting-months > div {
  min-width: 72px;
}

.kp-storting-meta span,
.kp-storting-months span,
.kp-storting-notes span {
  display: block;
  margin-bottom: 1px;
  font-size: 9px;
  line-height: 10px;
  font-weight: 800;
  color: #7a8790;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.kp-storting-meta strong,
.kp-storting-months strong,
.kp-storting-notes strong {
  display: block;
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
}

.kp-storting-months {
  border-top: 1px solid #eef1f3;
}

.kp-storting-notes {
  padding: 5px 8px;
  border-top: 1px solid #eef1f3;
}

.kp-stortings-empty,
.kp-stortings-error {
  padding: 7px 8px;
  border: 1px solid #dfe5e9;
  border-radius: 7px;
  background: #fff;
  font-size: 11px;
  line-height: 14px;
}

.kp-stortings-error {
  color: #8b2e2e;
  background: #fff3f3;
  border-color: #efcccc;
}

@media (max-width: 620px) {
  .kp-storting {
    min-width: 0;
    width: 100%;
    max-width: none;
  }
}


/* Related members in same besoekgroep */
.kp-related {
  margin: 0 8px 8px;
  border: 1px solid #dfe5e9;
  border-radius: 7px;
  overflow: hidden;
  background: #fff;
  width: fit-content;
  min-width: 420px;
  max-width: 720px;
}

.kp-related-title {
  padding: 6px 8px;
  background: #f4f6f8;
  border-bottom: 1px solid #e4e9ed;
  font-size: 12px;
  line-height: 14px;
  font-weight: 800;
}

.kp-related-list {
  display: block;
}

.kp-related-row {
  display: grid;
  grid-template-columns: minmax(110px,1fr) minmax(110px,1fr) 110px;
  gap: 10px;
  padding: 4px 8px;
  border-bottom: 1px solid #f0f2f4;
  color: inherit;
  text-decoration: none;
  font-size: 11px;
  line-height: 14px;
}

.kp-related-row:last-child {
  border-bottom: 0;
}

.kp-related-row:hover {
  background: #f7fafc;
}

.kp-related-van {
  font-weight: 800;
}

.kp-related-birth {
  color: #65727c;
}

/* Attestaat history */
.kp-attestate-panel {
  margin: 0 8px 8px;
}

.kp-attestate-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 6px;
  padding: 7px 8px;
  border: 1px solid #d9e3e9;
  border-radius: 7px;
  background: #f4f8fa;
}

.kp-attestate-head > strong {
  font-size: 12px;
  line-height: 14px;
}

.kp-attestate-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 7px;
}

.kp-attestaat {
  flex: 0 1 auto;
  min-width: 320px;
  max-width: 720px;
  border: 1px solid #dfe5e9;
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
}

.kp-attestaat-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 10px;
  padding: 5px 8px;
  background: #f7f9fa;
  border-bottom: 1px solid #e8ecef;
  font-size: 11px;
  line-height: 14px;
}

.kp-attestaat-title > strong {
  font-size: 12px;
}

.kp-attestaat-title > span {
  color: #62717b;
}

.kp-attestaat-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 6px 8px;
}

.kp-attestaat-fields > div {
  min-width: 90px;
  max-width: 280px;
}

.kp-attestaat-fields span,
.kp-attestaat-notes span {
  display: block;
  margin-bottom: 1px;
  font-size: 9px;
  line-height: 10px;
  font-weight: 800;
  color: #7a8790;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.kp-attestaat-fields strong,
.kp-attestaat-notes strong {
  display: block;
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
}

.kp-attestaat-notes {
  padding: 5px 8px;
  border-top: 1px solid #eef1f3;
}

@media (max-width: 620px) {
  .kp-related,
  .kp-attestaat {
    min-width: 0;
    width: 100%;
    max-width: none;
  }

  .kp-related-row {
    grid-template-columns: 1fr 1fr;
  }

  .kp-related-birth {
    grid-column: 1 / -1;
  }
}


/* v10 refinements */
.kp-stortings-list,
.kp-attestate-list {
  display: block !important;
}

.kp-storting,
.kp-attestaat {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-bottom: 7px !important;
}

.lidmaat-list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.wyk-picker {
  margin-bottom: 8px;
}

.wyk-picker select {
  min-width: 280px;
  padding: 6px 8px;
}

.wyk-members {
  border: 1px solid #d8e4e4;
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
}

.wyk-members-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  background: #eef7f6;
  border-bottom: 1px solid #dbe8e7;
  font-size: 12px;
}

.wyk-member-row {
  display: grid;
  grid-template-columns: minmax(140px,1fr) minmax(140px,1fr) 120px;
  gap: 10px;
  padding: 5px 8px;
  border-bottom: 1px solid #edf2f2;
  color: inherit;
  text-decoration: none;
  font-size: 11px;
  line-height: 14px;
}

.wyk-member-row:hover {
  background: #f4fbfa;
}

/* shift Lidmaat UI toward blue/green/teal */
.kp-head,
.kp-section-title,
.kp-related-title,
.kp-stortings-head,
.kp-attestate-head,
.kp-storting-title,
.kp-attestaat-title,
.kp-tech > summary {
  background-color: #eef7f6 !important;
  border-color: #d7e7e5 !important;
}

.kp-status,
.kp-stortings-toggle,
.kp-summary-item,
.kp-related-row:hover,
.kp-value a,
.kp-tech summary,
.lidmaat-list-actions .button {
  color: #1f6f72 !important;
}

.kp-stortings-toggle {
  background: #e6f4f2 !important;
  border-color: #bfdedb !important;
}

.kp-stortings-toggle.secondary {
  background: #ffffff !important;
}

.kp-avatar {
  background: #2b7a78 !important;
  color: #ffffff !important;
}

.kp-profile a:hover,
.wyk-member-row:hover {
  color: #155d60 !important;
}

@media (max-width: 620px) {
  .wyk-member-row {
    grid-template-columns: 1fr 1fr;
  }
  .wyk-member-row span:last-child {
    grid-column: 1 / -1;
  }
}


/* v11 layout/readability fixes */

/* Attestate typography matches surrounding profile boxes */
.kp-attestaat-title,
.kp-attestaat-fields strong,
.kp-attestaat-notes strong {
  font-size: 12px !important;
  line-height: 15px !important;
}

.kp-attestaat-title > strong {
  font-size: 12px !important;
  line-height: 15px !important;
}

.kp-attestaat-fields span,
.kp-attestaat-notes span {
  font-size: 11px !important;
  line-height: 14px !important;
}

/* Keep Jan-Dec on one row for each Storting record */
.kp-storting-months {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(58px, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  overflow-x: auto !important;
  padding: 0 !important;
}

.kp-storting-months > div {
  min-width: 58px !important;
  padding: 5px 6px !important;
  border-right: 1px solid #edf2f2 !important;
}

.kp-storting-months > div:last-child {
  border-right: 0 !important;
}

.kp-storting-months span,
.kp-storting-months strong {
  white-space: nowrap !important;
}

/* readable top action buttons */
.lidmaat-list-actions .button,
.lidmaat-list-actions a.button,
.lidmaat-list-actions .secondary {
  background: #e9f4ef !important;
  color: #245f50 !important;
  border: 1px solid #b8d6ca !important;
  text-decoration: none !important;
  font-size: 13px !important;
}

.lidmaat-list-actions .button:hover,
.lidmaat-list-actions a.button:hover,
.lidmaat-list-actions .secondary:hover {
  background: #dceee7 !important;
  color: #183f36 !important;
}

/* remove teal text from gray button-like controls */
.kp-stortings-toggle {
  background: #e7f2f3 !important;
  color: #175761 !important;
  border-color: #bdd5d8 !important;
}

.kp-stortings-toggle:hover {
  background: #d7eaec !important;
  color: #123f46 !important;
}

.kp-stortings-toggle.secondary {
  background: #ffffff !important;
  color: #175761 !important;
}

@media (max-width: 900px) {
  .kp-storting-months {
    min-width: 760px !important;
  }
}