/* TrackIT — stijl (Elmec huisstijl) */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px; color: #1f2933; background: #f4f6f8; line-height: 1.5;
}
a { color: #00509e; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Topbar */
.topbar { background: #002855; color: #fff; }
.topbar-in { max-width: 1240px; margin: 0 auto; display: flex; align-items: center;
  gap: 10px 20px; padding: 7px 20px; min-height: 52px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; flex: none; }
.brand:hover { text-decoration: none; }
.brand img { display: block; height: 50px; width: auto; background: #fff; border-radius: 6px; padding: 4px 9px; }
.mainnav { display: flex; gap: 18px; flex: 1; }
.mainnav a { color: #cdd9e5; font-weight: 500; }
.mainnav a:hover { color: #fff; text-decoration: none; }
.userbox { display: flex; gap: 14px; align-items: center; font-size: 12.5px; color: #9fb3c8; }
.userbox a { color: #cdd9e5; }

/* Projectselector in de topbar */
.projectkiezer { display: flex; align-items: center; gap: 6px; margin: 0; }
.projectkiezer label { margin: 0; color: #9fb3c8; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; font-weight: 600; }
.projectkiezer select { width: auto; min-width: 220px; max-width: 360px; padding: 4px 8px;
  font-size: 12.5px; background: #0a3a6b; color: #fff; border: 1px solid #1c4f86; border-radius: 5px; }
.projectnaam { color: #e5edf5; font-size: 12.5px; font-weight: 600; background: #0a3a6b;
  padding: 4px 10px; border-radius: 5px; }

/* Projectbeheer: ledenlijst */
.ledenlijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 4px 14px; margin-top: 6px; }
.ledenlijst .lid { display: flex; align-items: center; gap: 7px; font-weight: 400;
  font-size: 13px; margin: 0; }
.ledenlijst .lid input { width: auto; }

.wrap { max-width: 1240px; margin: 22px auto; padding: 0 20px; }
.foot { max-width: 1240px; margin: 30px auto; padding: 0 20px; color: #8a96a3; font-size: 12px; }

h1 { font-size: 20px; margin: 0 0 16px; }
h2 { font-size: 15px; margin: 22px 0 10px; }

/* Flash */
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-weight: 500; }
.flash-ok { background: #d7f0dd; color: #1b5e2b; }
.flash-fout { background: #fde2e2; color: #a51b1b; }
.flash-info { background: #dcecfb; color: #1a4971; }

/* Kaarten / panelen */
.card { background: #fff; border: 1px solid #e1e7ec; border-radius: 8px; padding: 18px; margin-bottom: 18px; }

/* Knoppen */
.btn { display: inline-block; background: #002855; color: #fff; border: 0; border-radius: 6px;
  padding: 8px 15px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.btn:hover { background: #003a7a; text-decoration: none; color: #fff; }
.btn-sec { background: #e1e7ec; color: #1f2933; }
.btn-sec:hover { background: #d0d8df; color: #1f2933; }
.btn-gevaar { background: #c62828; }
.btn-gevaar:hover { background: #a51b1b; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }

/* Formulieren */
label { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 4px; color: #3e4c59; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #cbd2d9; border-radius: 6px;
  font: inherit; color: #1f2933; background: #fff;
}
textarea { min-height: 80px; resize: vertical; }
.form-row { margin-bottom: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* Tabellen */
table.lijst { width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid #e1e7ec; border-radius: 8px; overflow: hidden; }
table.lijst th, table.lijst td { padding: 9px 11px; text-align: left; border-bottom: 1px solid #eef1f4;
  vertical-align: top; }
table.lijst th { background: #f0f3f6; font-size: 12px; text-transform: uppercase;
  letter-spacing: .03em; color: #52606d; }
table.lijst th a { color: #52606d; }
table.lijst tr:last-child td { border-bottom: 0; }
table.lijst tbody tr:nth-child(even) td { background: #eaeff4; }
table.lijst tbody tr:hover td { background: #dce7f0; }
.rij-prio1 { border-left: 3px solid #c62828; }

/* Badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 11px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.s-nieuw     { background: #e3e8ec; color: #3e4c59; }
.s-bezig     { background: #cfe3fb; color: #1a4971; }
.s-wacht     { background: #fdeecb; color: #8a5a00; }
.s-opgelost  { background: #d7f0dd; color: #1b5e2b; }
.s-gesloten  { background: #dfe3e7; color: #616e7c; }
.s-vervallen { background: #f0dede; color: #8a5050; }
.s-tebeoordelen { background: #fde2e2; color: #a51b1b; }
.prio { font-weight: 700; }
.prio-1 { color: #c62828; }
.prio-2 { color: #8a5a00; }
.prio-3 { color: #52606d; }

/* Filterbalk */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filters .form-row { margin-bottom: 0; min-width: 140px; }
.filters label { margin-bottom: 2px; }

/* Detail */
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; }
.kv dt { font-weight: 600; color: #52606d; font-size: 12.5px; }
.kv dd { margin: 0; }

.comment { border: 1px solid #e1e7ec; border-radius: 7px; padding: 11px 13px; margin-bottom: 10px; background: #fff; }
.comment.lev { background: #fffaf0; border-color: #f0e0c0; }
.comment .meta { font-size: 12px; color: #7b8794; margin-bottom: 5px; }
.comment .body { white-space: pre-wrap; }

.hist { list-style: none; padding: 0; margin: 0; font-size: 12.5px; }
.hist li { padding: 5px 0; border-bottom: 1px solid #eef1f4; color: #52606d; }
.hist li:last-child { border-bottom: 0; }

/* Bijlagen / screenshots */
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.thumb { margin: 0; width: 130px; border: 1px solid #e1e7ec; border-radius: 7px; overflow: hidden; background: #fff; }
.thumb a { display: block; }
.thumb img { display: block; width: 100%; height: 96px; object-fit: cover; background: #f0f3f6; }
.thumb figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 4px 6px; font-size: 11px; }
.thumb figcaption form { margin: 0; }
.thumb figcaption .btn-sm { padding: 1px 6px; line-height: 1.4; }

/* Niet-afbeeldingen: tegel met gekleurd bestandstype-icoon */
.thumb-file a { display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 6px 8px; height: 96px; box-sizing: border-box; text-decoration: none; }
.thumb-file a:hover { background: #f8fafb; }
.thumb-file .ft { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 50px; border-radius: 4px; color: #fff; font-size: 10.5px; font-weight: 700; }
.thumb-file .ft-naam { font-size: 10.5px; color: #1f2933; text-align: center; line-height: 1.25;
  width: 100%; max-height: 2.5em; overflow: hidden; word-break: break-word; }
.ft-pdf  { background: #c0392b; }
.ft-doc  { background: #2b579a; }
.ft-xls  { background: #217346; }
.ft-txt  { background: #6b7785; }
.ft-mail { background: #b7791f; }
.ft-zip  { background: #7d5ba6; }
.ft-gen  { background: #52606d; }
#bijlagen-kaart.sleep-over { outline: 2px dashed #00509e; outline-offset: -6px; background: #f0f6fc; }
.comment-afb { margin-top: 8px; }
.comment-afb .thumbs { margin-bottom: 0; gap: 8px; }
.comment-afb .thumb { width: 104px; }
.comment-afb .thumb img { height: 78px; }
.afb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.afb-chip { display: inline-flex; align-items: center; gap: 4px; background: #eef1f4;
  border: 1px solid #d0d8df; border-radius: 12px; padding: 2px 4px 2px 10px; font-size: 12px; }
.afb-chip button { border: 0; background: #c62828; color: #fff; border-radius: 50%;
  width: 16px; height: 16px; line-height: 14px; font-size: 12px; cursor: pointer; padding: 0; }

/* Gekoppelde issues */
.linklijst { list-style: none; padding: 0; margin: 0 0 12px; }
.linklijst li { padding: 8px 0; border-bottom: 1px solid #eef1f4; position: relative; }
.linklijst li:last-child { border-bottom: 0; }
.linklijst li form { position: absolute; top: 6px; right: 0; margin: 0; }
.linklijst li form .btn-sm { padding: 1px 6px; }
.link-rel { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  color: #52606d; font-weight: 700; margin-right: 4px; }
.link-oms { font-size: 12px; margin-top: 2px; padding-right: 28px; }
.link-form { border-top: 1px solid #eef1f4; padding-top: 12px; }
.link-form .form-row { margin-bottom: 10px; }

/* Voortgangsindicator (stations op een lijn) */
.stepper { list-style: none; display: flex; padding: 0; margin: 4px 0 18px;
  counter-reset: step; overflow-x: auto; }
.stepper .step { position: relative; flex: 1 1 0; min-width: 92px; text-align: center;
  padding-top: 26px; font-size: 12px; color: #7b8794; }
.stepper .step-dot { position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%; background: #cbd2d9;
  border: 2px solid #cbd2d9; z-index: 2; box-sizing: border-box; }
/* verbindingslijn tussen de stations */
.stepper .step::before { content: ""; position: absolute; top: 11px; left: -50%; width: 100%;
  height: 3px; background: #cbd2d9; z-index: 1; }
.stepper .step:first-child::before { display: none; }
.stepper .step-label { display: block; line-height: 1.3; }

.stepper .step-klaar { color: #1b5e2b; }
.stepper .step-klaar .step-dot { background: #2e7d32; border-color: #2e7d32; }
.stepper .step-klaar::before { background: #2e7d32; }

.stepper .step-nu { color: #002855; font-weight: 700; }
.stepper .step-nu .step-dot { background: #002855; border-color: #002855;
  box-shadow: 0 0 0 4px rgba(0,40,85,.15); }
.stepper .step-nu::before { background: #2e7d32; }

/* huidige status maar nog niet gefiatteerd */
.stepper .step-wacht { color: #a51b1b; font-weight: 700; }
.stepper .step-wacht .step-dot { background: #fff; border-color: #c62828; }
.stepper .step-wacht::before { background: #cbd2d9; }

.stepper .step-todo::before,
.stepper .step-over::before { background: #cbd2d9; }
.stepper .step-over .step-dot { background: #e1e7ec; border-color: #cbd2d9; }

.stepper.stepper-vervallen .step-dot,
.stepper.stepper-vervallen .step::before { background: #d8c2c2; border-color: #d8c2c2; }
.stepper .step-vervallen { color: #8a5050; font-weight: 700; }
.stepper .step-vervallen .step-dot { background: #b06a6a; border-color: #b06a6a; }

.muted { color: #7b8794; }
.pager { display: flex; gap: 8px; align-items: center; margin-top: 14px; font-size: 13px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }