:root {
  --berk-blue: #2e3192;
  --berk-blue-dark: #23266f;
  --berk-blue-light: #4a4db5;
  --berk-bg: #f4f5fb;
  --berk-border: #d9dbe9;
  --berk-text: #1f2233;
  --berk-muted: #6b6f87;
  --berk-danger: #c0392b;
  --berk-success: #2e8b57;
  --berk-warning: #d98c00;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--berk-bg);
  color: var(--berk-text);
  font-size: 15px;
  line-height: 1.5;
}

a {
  color: var(--berk-blue);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ===== Topbar met logo linksboven ===== */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #fff;
  border-bottom: 3px solid var(--berk-blue);
  padding: 10px 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar .brand img {
  height: 48px;
  width: auto;
  display: block;
}
.topbar nav {
  display: flex;
  gap: 18px;
  flex: 1;
}
.topbar nav a {
  color: var(--berk-text);
  font-weight: 500;
  padding: 6px 4px;
}
.topbar nav a:hover {
  color: var(--berk-blue);
  text-decoration: none;
}
.topbar .user-menu {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--berk-muted);
  font-size: 14px;
}
.topbar .client-logo {
  display: flex;
  align-items: center;
}
/* Elk geüpload logo wordt automatisch passend geschaald: nooit hoger dan de
   bovenbalk en nooit zo breed dat het de rest wegdrukt. */
.topbar .client-logo img {
  height: auto;
  width: auto;
  max-height: 48px;
  max-width: 240px;
  object-fit: contain;
  display: block;
}

/* ===== Layout ===== */
/* Volledige schermbreedte gebruiken; alleen wat lucht aan de zijkanten. */
.container {
  width: 100%;
  max-width: none;
  margin: 24px auto;
  padding: 0 24px;
}
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.page-header h1 {
  font-size: 22px;
  margin: 0;
  color: var(--berk-blue-dark);
}
.page-header .search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 420px;
  margin: 0 16px;
}
.page-header .search-form input[type="search"] {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--berk-border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

/* ===== Cards ===== */
.card {
  background: #fff;
  border: 1px solid var(--berk-border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 18px;
}
.card h2 {
  font-size: 17px;
  margin-top: 0;
  color: var(--berk-blue-dark);
}

/* ===== Tabellen ===== */
table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--berk-border);
  vertical-align: top;
}
th {
  background: var(--berk-blue);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
tr:hover td {
  background: #fafbff;
}
th.sortable { padding: 0; }
th.sortable a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
th.sortable a:hover { background: rgba(255, 255, 255, 0.12); }
th.sortable.sorted a { background: rgba(255, 255, 255, 0.18); }
th .sort-arrow { font-size: 11px; line-height: 1; }
th.draggable-col { cursor: grab; }
th.draggable-col a { cursor: inherit; }
th.draggable-col.dragging {
  opacity: 0.5;
  cursor: grabbing;
}
th.draggable-col.dragging a { background: rgba(255, 255, 255, 0.18); }

/* ===== Permissiematrix (rollenbeheer) ===== */
.perm-matrix-wrap {
  overflow-x: auto;
}
.perm-matrix {
  width: auto;
  min-width: 100%;
}
.perm-matrix th,
.perm-matrix td {
  vertical-align: middle;
}
.perm-matrix .perm-name-col {
  text-align: left;
  white-space: nowrap;
}
/* Rijkoppen (permissienaam) lezen als gewone cel, niet als blauwe balk. */
.perm-matrix tbody th.perm-name-col {
  background: #fafbff;
  color: var(--berk-text);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  position: sticky;
  left: 0;
  z-index: 1;
}
.perm-matrix tr:hover tbody th.perm-name-col,
.perm-matrix tbody tr:hover th.perm-name-col { background: #f1f3fd; }
.perm-matrix .perm-role-col {
  text-align: center;
  vertical-align: top;
  min-width: 120px;
}
.perm-role-name {
  width: 100%;
  min-width: 96px;
  padding: 5px 6px;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  border: 1px solid var(--berk-border);
  border-radius: 4px;
  color: var(--berk-text);
}
.perm-col-toggle {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}
.perm-cell-td { text-align: center; }
.perm-matrix .perm-cell { cursor: pointer; }
.perm-delete-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--berk-border);
}

/* ===== Formulieren ===== */
label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 14px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--berk-border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--berk-blue);
  box-shadow: 0 0 0 2px rgba(46, 49, 146, 0.15);
}
textarea {
  min-height: 90px;
  resize: vertical;
}
.form-row {
  margin-bottom: 14px;
}
.form-grid {
  display: grid;
  /* Twee kolommen op een normaal scherm, meer naarmate het scherm breder is. */
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Logo-instelling bij de projectgegevens: voorbeeld naast het uploadveld. */
.logo-setting {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.logo-setting .muted { margin: 6px 0 8px; font-size: 13px; }
.logo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 72px;
  padding: 8px 12px;
  border: 1px solid var(--berk-border);
  border-radius: 6px;
  background: #fff;
}
.logo-preview img {
  max-width: 220px;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.checkbox-row input {
  width: auto;
}
.checkbox-row label {
  margin: 0;
  font-weight: 400;
}

/* ===== Knoppen ===== */
.btn {
  display: inline-block;
  background: var(--berk-blue);
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover {
  background: var(--berk-blue-dark);
  text-decoration: none;
}
.btn-secondary {
  background: #fff;
  color: var(--berk-blue);
  border: 1px solid var(--berk-blue);
}
.btn-secondary:hover {
  background: #eef0fb;
}
.btn-danger {
  background: var(--berk-danger);
}
.btn-danger:hover {
  background: #97291c;
}
.btn-sm {
  padding: 5px 10px;
  font-size: 13px;
}

/* ===== Icoonknoppen (opslaan / verwijderen) ===== */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--berk-border);
  border-radius: 6px;
  background: #fff;
  color: var(--berk-blue);
  cursor: pointer;
  line-height: 0;
  text-decoration: none;
}
.icon-btn:hover {
  background: #eef0fb;
  border-color: var(--berk-blue);
  text-decoration: none;
}
.icon-btn svg {
  width: 18px;
  height: 18px;
}
.icon-btn-danger { color: var(--berk-danger); }
.icon-btn-danger:hover {
  background: #fdecea;
  border-color: var(--berk-danger);
}
.icon-btn:disabled {
  color: var(--berk-muted);
  background: #f4f5fb;
  border-color: var(--berk-border);
  cursor: not-allowed;
  opacity: 0.6;
}
.icon-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
/* Formulieren die alleen via het form-attribuut van knoppen/velden bestaan. */
.hidden-form { display: none; }

/* ===== Tabellen met bewerkbare rijen ===== */
.table-mid td,
.table-mid th { vertical-align: middle; }
.table-mid td input[type="text"],
.table-mid td input[type="password"],
.table-mid td select { margin: 0; }
.col-check { text-align: center; width: 90px; }
.col-check input[type="checkbox"] { width: auto; }
.col-actions { width: 92px; white-space: nowrap; }
.col-name { width: 24%; }
.users-table .col-pass { width: 18%; }
.users-table .col-login { width: 130px; white-space: nowrap; }
.members-table .col-role { width: 320px; }

/* ===== Badges ===== */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  background: #eef0fb;
  color: var(--berk-blue-dark);
}
.badge-closed { background: #e6f4ec; color: var(--berk-success); }
.badge-open { background: #eef0fb; color: var(--berk-blue); }
.prio-Urgent { color: var(--berk-danger); font-weight: 700; }
.prio-Hoog { color: var(--berk-warning); font-weight: 600; }

/* ===== Meldingen ===== */
.alert {
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
}
.alert-error { background: #fdecea; color: var(--berk-danger); border: 1px solid #f5c6c0; }
.alert-success { background: #e6f4ec; color: var(--berk-success); border: 1px solid #bfe3cd; }
.alert-info { background: #eef0fb; color: var(--berk-blue-dark); border: 1px solid #c7cbeb; }
.alert-info strong { font-weight: 700; }

/* ===== Login ===== */
.login-wrap {
  max-width: 460px;
  margin: 8vh auto;
  padding: 0 20px;
}
.login-card {
  background: #fff;
  border: 1px solid var(--berk-border);
  border-top: 4px solid var(--berk-blue);
  border-radius: 10px;
  padding: 1.5cm;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.login-card .logo {
  text-align: center;
  margin-bottom: 20px;
}
.login-card .logo img {
  width: 100%;
  height: auto;
  display: block;
}
/* Zelftekenend logo: de animatie gebruikt currentColor, dus de kleur van
   het logo staat hier en nergens anders. */
.login-card .logo .berk-logo {
  color: var(--berk-blue);
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Diversen ===== */
.muted { color: var(--berk-muted); font-size: 13px; }
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.filters .form-row { margin-bottom: 0; }
.inline-form { display: inline; }
.comment {
  border-left: 3px solid var(--berk-blue);
  padding: 8px 14px;
  margin-bottom: 12px;
  background: #fafbff;
  border-radius: 0 6px 6px 0;
}
.comment .meta { font-size: 12px; color: var(--berk-muted); margin-bottom: 4px; }
/* Regelafbrekingen uit het invoerveld behouden bij het tonen. */
.comment-text,
.field-value {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.field-config-row {
  display: grid;
  grid-template-columns: 30px 2fr 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--berk-border);
}
.field-config-head { font-weight: 600; }

/* Rijen die je kunt verslepen om de veldvolgorde te bepalen. */
.field-row { background: #fff; }
.field-row.dragging {
  opacity: 0.5;
  background: #eef0fb;
}
.drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--berk-muted);
  cursor: grab;
  line-height: 0;
}
.drag-handle:active { cursor: grabbing; }
.drag-handle svg { width: 18px; height: 18px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* ===== Kolomkiezer (issue-overzicht) ===== */
.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.column-picker {
  position: relative;
  display: inline-block;
}
.column-picker > summary {
  list-style: none;
  cursor: pointer;
}
.column-picker > summary::-webkit-details-marker { display: none; }
.column-picker-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--berk-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 14px;
}
.column-picker-panel .checkbox-row {
  padding: 4px 0;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-header h2 { margin: 0; }

/* ===== Bijlagen / thumbnails ===== */
.attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.attachment-card {
  border: 1px solid var(--berk-border);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  background: #fff;
}
.attachment-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 110px;
  background: var(--berk-bg, #f4f6f8);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
}
.attachment-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
.attachment-thumb img.attachment-thumb-pdf {
  width: 100%;
  height: 100%;
  object-position: top;
  background: #fff;
}
.attachment-ext {
  font-weight: 700;
  font-size: 18px;
  color: var(--berk-blue-dark);
  letter-spacing: 1px;
}
.attachment-name {
  margin-top: 6px;
  font-size: 13px;
  word-break: break-word;
}
.attachment-meta { font-size: 11px; margin: 2px 0 6px; }

.attachment-viewer { text-align: center; }
.attachment-viewer img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}
.attachment-viewer iframe {
  width: 100%;
  height: 80vh;
  border: 1px solid var(--berk-border);
  border-radius: 6px;
}

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .topbar nav { display: none; }
  .field-config-row { grid-template-columns: 30px 1fr 1fr; }
}

/* ===== Logboek-analyse (Erdilog) ===== */
.erdi-drop {
  display: block;
  border: 2px dashed var(--berk-border);
  border-radius: 10px;
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: #fafbff;
}
.erdi-drop:hover,
.erdi-drop.hover {
  border-color: var(--berk-blue);
  background: #eef0fb;
}
.erdi-drop input[type="file"] { display: none; }
.erdi-drop-big { font-size: 16px; font-weight: 600; color: var(--berk-blue-dark); }
.erdi-fname { margin-top: 10px; font-weight: 600; color: var(--berk-text); }
.erdi-how { margin-top: 22px; }
.erdi-how h3 { margin: 0 0 8px; color: var(--berk-blue-dark); }
.erdi-how ul { margin: 0; padding-left: 20px; color: var(--berk-text); }
.erdi-how li { margin-bottom: 4px; }

.erdi-banner {
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 600;
}
.erdi-banner.hit { background: #fdecea; color: var(--berk-danger); border: 1px solid #f5c6c0; }
.erdi-banner.ok { background: #e6f4ec; color: var(--berk-success); border: 1px solid #bfe3cd; }

.badge.erdi-zeker { background: #fdecea; color: var(--berk-danger); }
.badge.erdi-mogelijk { background: #fff4e0; color: #b26a00; }

/* Naam van de app rechts in de bovenbalk (waar de issuedatabase het klantlogo
   zet). Staat hier en niet in style.css, want de bovenbalk hoort bij de
   huisstijl en wordt op elk scherm getoond. */
.app-titel {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  font-weight: 600;
  color: var(--berk-blue-dark);
  text-align: right;
}
.app-subtitel { font-weight: 400; font-size: 12px; color: var(--berk-muted); }