@import url('wia-timeline-card-override.css');

/*
 * Mijn WIA-traject: gebruikt de nieuwe mobiele Trajectly-stijl als basis,
 * maar houdt de pagina zelfstandig omdat hij buiten de dashboardshell kan laden.
 */

.bp-wia-page {
  --slate: #e8572a;
  --slate-light: #f07a52;
  --slate-soft: #f58f6c;
  --slate-pale: #fdeee8;
  --amber: #111314;
  --amber-light: #3a3f44;
  --amber-pale: #e4e5e6;
  --warm-dark: #181c20;
  --warm-mid: #52606a;
  --warm-muted: #8a98a4;
  --warm-line: #dce0e4;
  --white: #ffffff;
  --cream: #f5f6f8;
  --font-body: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  --font-heading: 'D-DIN', 'DIN Alternate', 'DIN Next', Impact, Helvetica, sans-serif;
  box-sizing: border-box;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 32px) clamp(14px, 3vw, 28px) 64px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  font-family: var(--font-body);
  color: var(--warm-dark);
}
.bp-wia-page *, .bp-wia-page *::before, .bp-wia-page *::after { box-sizing: border-box; }
.bp-wia-page h1, .bp-wia-page h2, .bp-wia-page h3, .bp-wia-page .bp-btn { word-break: normal; overflow-wrap: break-word; hyphens: none; }
.bp-wia-page .bp-page-heading,
.bp-wia-page .bp-wia-flash,
.bp-wia-page .bp-wia-overview,
.bp-wia-page .bp-wia-planning-grid,
.bp-wia-page .bp-wia-timeline,
.bp-wia-page .bp-wia-documents { grid-column: 1 / -1; }
.bp-wia-page .bp-page-heading { display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title actions" "subtitle actions";align-items:center;gap:8px 24px;margin:0 0 8px;padding:0 2px; }
.bp-wia-page .bp-page-heading__title { grid-area:title;margin:0;color:#111827;font-family:var(--font-body);font-size:clamp(22px,2.4vw,28px);font-weight:700;line-height:1.2;letter-spacing:0;text-transform:none; }
.bp-wia-page .bp-page-heading__subtitle { grid-area:subtitle;margin:0;color:#536070;font-size:14px;line-height:1.55; }
.bp-wia-page .bp-wia-pdf-button { grid-area:actions;align-self:center;justify-self:end;min-width:128px;padding:11px 18px;border:1px solid var(--slate);border-radius:12px;background:var(--slate);color:#fff;font-weight:700;box-shadow:none; }
.bp-wia-page .bp-wia-pdf-button:hover,.bp-wia-page .bp-wia-pdf-button:focus-visible { border-color:#cf4620;background:#cf4620;color:#fff; }
.bp-wia-page .bp-section-title,.bp-wia-page .bp-card__title { margin:0;color:#111827;font-family:var(--font-body);font-size:18px;font-weight:700;line-height:1.3;letter-spacing:0;text-transform:none; }
.bp-wia-page .bp-card { min-width:0;min-height:100%;border-radius:14px; }
.bp-wia-page .bp-btn { min-width:0; }
.bp-wia-page .bp-btn--primary { background:var(--slate-light);border-color:var(--slate-light);color:#fff; }
.bp-wia-page .bp-btn--primary:hover,.bp-wia-page .bp-btn--primary:focus-visible { background:var(--slate);border-color:var(--slate);color:#fff; }
.bp-wia-page .bp-btn--secondary { background:#fff;border-color:#f4b29a;color:#d85d37; }
.bp-wia-page .bp-btn--secondary:hover,.bp-wia-page .bp-btn--secondary:focus-visible { background:var(--slate-pale);border-color:var(--slate-light);color:#bf4f2f; }
.bp-wia-flash { background:var(--slate-pale);border-left:3px solid var(--slate-light);border-radius:0 10px 10px 0;padding:10px 16px;font-size:13px;color:var(--warm-dark);margin:0; }
.bp-wia-empty { color:var(--warm-muted);font-style:italic; }

.bp-wia-overview { overflow:hidden;padding:0!important;border:1px solid #dce0e4;border-radius:16px!important;background:#fff; }
.bp-wia-overview__header { display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px 16px;border-bottom:1px solid #e7eaed; }
.bp-wia-overview__identity { display:flex;align-items:flex-start;gap:12px;min-width:0; }
.bp-wia-overview__icon { display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--slate);color:#fff;line-height:1; }
.bp-wia-overview__icon svg,.bp-wia-waiting__marker svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.bp-wia-overview__title { margin:4px 0;color:#111827;font-size:17px;font-weight:800;line-height:1.25;text-transform:uppercase; }
.bp-wia-overview__subtitle { margin:0;color:var(--warm-mid);font-size:13px;line-height:1.45; }
.bp-wia-status-pill { display:inline-flex;align-items:center;justify-content:center;flex:none;max-width:100%;padding:6px 12px;border:0;border-radius:999px;background:#fff6bf;color:#795900;font-size:11px;font-weight:700;line-height:1.3;text-align:center; }
.bp-wia-overview__stats { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:28px 20px 24px; }
.bp-wia-overview__stat { min-width:0;min-height:120px;padding:8px 24px;text-align:center; }
.bp-wia-overview__stat + .bp-wia-overview__stat { border-left:1px solid #dce0e4; }
.bp-wia-overview__label { display:block;margin-bottom:7px;color:#94a0aa;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; }
.bp-wia-overview__stat strong { display:block;color:#111827;font-size:15px;font-weight:800;line-height:1.35;overflow-wrap:anywhere; }
.bp-wia-overview__stat:first-child strong,.bp-wia-overview__stat:last-child strong { color:var(--slate); }
.bp-wia-overview__stat small { display:block;margin-top:11px;color:#85919b;font-size:10px;font-weight:700;line-height:1.45;text-transform:uppercase;overflow-wrap:anywhere; }
.bp-wia-waiting { padding:4px 20px 2px;border-top:1px solid #edf0f2; }
.bp-wia-waiting__summary { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;padding:20px 0 18px; }
.bp-wia-waiting__summary > div { display:flex;min-width:0;flex-direction:column;justify-content:center;gap:4px;padding:0 24px;text-align:center; }
.bp-wia-waiting__summary > div + div { border-left:1px solid #dce0e4; }
.bp-wia-waiting__summary span { color:#94a0aa;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;line-height:1.35; }
.bp-wia-waiting__summary strong { color:#111827;font-size:16px;font-weight:800;line-height:1.35;overflow-wrap:anywhere; }
.bp-wia-waiting__summary > div:first-child strong,.bp-wia-waiting__summary > div:last-child strong { color:var(--slate); }
.bp-wia-waiting__track { --bp-wia-progress:0%;position:relative;height:34px;margin:0 10px; }
.bp-wia-waiting__track::before { content:'';position:absolute;left:0;right:0;top:15px;height:4px;border-radius:999px;background:#dfe4e8; }
.bp-wia-waiting__fill { position:absolute;z-index:1;left:0;top:15px;width:var(--bp-wia-progress);max-width:100%;height:4px;border-radius:999px;background:var(--slate); }
.bp-wia-waiting__marker { position:absolute;z-index:2;top:2px;display:grid;place-items:center;width:30px;height:30px;border:1.5px solid #d7dde2;border-radius:9px;background:#f7f8f9;color:#62707b; }
.bp-wia-waiting__marker--start { left:var(--bp-wia-progress);transform:translateX(-50%);border-color:var(--slate);border-radius:50%;background:#fff;color:var(--slate);transition:left .35s ease; }
.bp-wia-waiting__marker--end { right:0;transform:translateX(50%); }
.bp-wia-waiting__labels { display:grid;grid-template-columns:repeat(3,1fr);padding:0 0 8px;color:#85919b;font-size:11px;line-height:1.35; }
.bp-wia-waiting__labels span:nth-child(1){text-align:left}.bp-wia-waiting__labels span:nth-child(2){text-align:center}.bp-wia-waiting__labels span:nth-child(3){text-align:right}.bp-wia-waiting__labels small{font-size:10px}
.bp-wia-overview__note { margin:16px 20px 0;padding:12px 14px;border-left:4px solid var(--slate);border-radius:8px;background:var(--slate-pale);color:var(--warm-mid);font-size:13px;line-height:1.5; }
.bp-wia-details-panel { margin:14px 20px 20px;text-align:right; }
.bp-wia-details-panel summary,.bp-wia-add-event summary,.bp-wia-add-panel summary { cursor:pointer;list-style:none; }
.bp-wia-details-panel summary::-webkit-details-marker,.bp-wia-add-event summary::-webkit-details-marker,.bp-wia-add-panel summary::-webkit-details-marker { display:none; }
.bp-wia-details-panel[open] { text-align:left; }
.bp-wia-edit-grid { display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);gap:18px;padding-top:16px;border-top:1px solid var(--warm-line); }

/* Compacte WIA-planning */
.bp-wia-planning-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px; }
.bp-wia-planning-card { padding:20px;display:flex;flex-direction:column;gap:14px;border:1px solid #e2e6e9;background:#fff; }
.bp-wia-planning-card--wide { grid-column:1 / -1; }
.bp-wia-planning-head { display:flex;align-items:flex-start;justify-content:space-between;gap:16px; }
.bp-wia-planning-head p { margin:5px 0 0;color:var(--warm-mid);font-size:13px; }
.bp-wia-planning-head > strong { color:var(--slate);font-size:22px;line-height:1; }
.bp-wia-progress { height:8px;border-radius:999px;background:#edf0f2;overflow:hidden; }
.bp-wia-progress span { display:block;height:100%;border-radius:inherit;background:var(--slate); }
.bp-wia-checklist,.bp-wia-item-list { display:flex;flex-direction:column;gap:8px; }
.bp-wia-checklist-row,.bp-wia-item,.bp-wia-contact { display:flex;align-items:flex-start;gap:10px;min-width:0;padding:11px 12px;border:1px solid #e5e8eb;border-radius:11px;background:#fafbfc; }
.bp-wia-checklist-row > span,.bp-wia-item > div,.bp-wia-contact > div { min-width:0;flex:1; }
.bp-wia-checklist-row.is-done > span,.bp-wia-item.is-done strong { color:#6f7b84;text-decoration:line-through; }
.bp-wia-check-toggle { display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;border:1.5px solid #c7ced4;border-radius:7px;background:#fff;color:#fff;font-size:14px;font-weight:800;cursor:pointer; }
.bp-wia-checklist-row.is-done .bp-wia-check-toggle { border-color:#2e8b57;background:#2e8b57; }
.bp-wia-item { border-left-width:4px; }
.bp-wia-item.is-neutral { border-left-color:#c8ced3; }
.bp-wia-item.is-upcoming { border-left-color:#5d83ba; }
.bp-wia-item.is-soon { border-left-color:#e9a23b;background:#fffaf1; }
.bp-wia-item.is-overdue { border-left-color:#c94c43;background:#fff5f4; }
.bp-wia-item.is-done { border-left-color:#4d9a69;background:#f4fbf6; }
.bp-wia-item strong,.bp-wia-contact strong { display:block;color:#17202a;font-size:14px;line-height:1.35; }
.bp-wia-item small,.bp-wia-contact small { display:block;margin-top:3px;color:#77838d;font-size:12px;line-height:1.4; }
.bp-wia-item p { margin:6px 0 0;color:var(--warm-mid);font-size:12px;line-height:1.45; }
.bp-wia-contact { gap:12px; }
.bp-wia-contact a { display:inline-block;margin:6px 12px 0 0;color:#c8512d;font-size:12px;text-decoration:none; }
.bp-wia-contact a:hover { text-decoration:underline; }
.bp-wia-mini-form { flex:none;margin:0; }
.bp-wia-item-delete { display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:7px;background:transparent;color:#929ca4;font-size:20px;line-height:1;cursor:pointer; }
.bp-wia-item-delete:hover { background:#fbe9e7;color:#b3261e; }
.bp-wia-small-btn { min-height:32px!important;padding:6px 10px!important;font-size:12px!important; }
.bp-wia-empty-state { margin:4px 0;color:var(--warm-muted);font-size:13px;font-style:italic; }
.bp-wia-add-panel { margin-top:auto;padding-top:4px; }
.bp-wia-add-panel > summary { display:inline-flex; }
.bp-wia-add-panel[open] > summary { margin-bottom:12px; }
.bp-wia-planning-form { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:12px;border-top:1px solid #e5e8eb; }
.bp-wia-planning-form input,.bp-wia-planning-form select,.bp-wia-planning-form textarea { width:100%;min-width:0;border:1px solid var(--warm-line);border-radius:9px;background:#fff;color:var(--warm-dark);font:inherit;font-size:13px;padding:9px 10px; }
.bp-wia-planning-form textarea { min-height:68px;resize:vertical;grid-column:1 / -1; }
.bp-wia-planning-form .bp-btn { justify-self:start; }

.bp-wia-form { display:flex;flex-direction:column;gap:4px;min-width:0; }
.bp-wia-field__label { display:block;font-size:12px;font-weight:600;color:var(--warm-mid);margin-top:10px; }
.bp-wia-input,.bp-wia-select,.bp-wia-textarea { width:100%;max-width:100%;min-width:0;font-family:var(--font-body);font-size:14px;line-height:1.4;color:var(--warm-dark);background:var(--white);border:1px solid var(--warm-line);border-radius:10px;padding:10px 12px; }
.bp-wia-input:focus-visible,.bp-wia-select:focus-visible,.bp-wia-textarea:focus-visible { outline:2px solid var(--slate-light);outline-offset:2px;border-color:var(--slate-light); }
.bp-wia-textarea { min-height:92px;resize:vertical; }
.bp-wia-form .bp-btn { align-self:flex-start;margin-top:14px; }
.bp-wia-section-head { display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px; }

/* Tijdlijnformulier: gesloten als knop rechts, geopend over de volle kaartbreedte. */
.bp-wia-timeline .bp-wia-section-head { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px 24px; }
.bp-wia-add-event { justify-self:end;min-width:0; }
.bp-wia-add-event > summary { display:inline-flex;justify-content:center;white-space:nowrap; }
.bp-wia-add-event[open] { grid-column:1 / -1;justify-self:stretch;width:100%;margin-top:4px;padding:18px;border:1px solid #e5e8eb;border-radius:12px;background:#fafbfc; }
.bp-wia-add-event[open] > summary { margin-left:auto;margin-bottom:14px;background:var(--slate-pale); }
.bp-wia-add-event .bp-wia-form { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"date-label title-label" "date title" "type-label description-label" "type description" "button button";gap:7px 18px; }
.bp-wia-add-event label[for="bp-wia-new-date"] { grid-area:date-label; }
.bp-wia-add-event #bp-wia-new-date { grid-area:date; }
.bp-wia-add-event label[for="bp-wia-new-title"] { grid-area:title-label; }
.bp-wia-add-event #bp-wia-new-title { grid-area:title; }
.bp-wia-add-event label[for="bp-wia-new-type"] { grid-area:type-label; }
.bp-wia-add-event #bp-wia-new-type { grid-area:type;align-self:start; }
.bp-wia-add-event label[for="bp-wia-new-description"] { grid-area:description-label; }
.bp-wia-add-event #bp-wia-new-description { grid-area:description;min-height:110px; }
.bp-wia-add-event .bp-wia-form > .bp-btn { grid-area:button;justify-self:start;margin-top:10px; }
.bp-wia-add-event .bp-wia-field__label { margin-top:0; }

.bp-wia-timeline__list { list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px; }
.bp-wia-timeline__item { position:relative;border-left:3px solid var(--slate-light);background:var(--cream);border-radius:0 12px 12px 0;padding:14px 18px;overflow:hidden; }
.bp-wia-timeline__meta { display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:4px; }
.bp-wia-timeline__date { font-size:12px;font-weight:600;color:var(--warm-dark); }
.bp-wia-timeline__type { max-width:100%;font-size:11px;font-weight:600;text-transform:uppercase;color:#c8512d;background:#fdeee8;border-radius:999px;padding:3px 9px; }
.bp-wia-timeline__title { margin:4px 0;color:var(--warm-dark);font-size:15px;font-weight:700; }
.bp-wia-timeline__desc { margin:0;color:var(--warm-mid);font-size:13px;line-height:1.5; }
.bp-wia-document-list { list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px; }
.bp-wia-document-item { display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border:1px solid var(--warm-line);border-radius:12px;background:#fff; }
.bp-wia-document-item__main { min-width:0; }
.bp-wia-document-item__title { margin:6px 0 0;font-size:14px; }
.bp-wia-document-item__actions { display:flex;gap:8px;flex:none; }

@media (max-width: 760px) {
  .bp-wia-page { padding:20px 14px 42px;gap:16px; }
  .bp-wia-page .bp-page-heading { grid-template-columns:1fr;grid-template-areas:"title" "subtitle" "actions"; }
  .bp-wia-page .bp-wia-pdf-button { justify-self:stretch;width:100%;margin-top:4px; }
  .bp-wia-overview__stats,.bp-wia-waiting__summary { grid-template-columns:1fr; }
  .bp-wia-overview__stat { min-height:0;padding:16px 12px; }
  .bp-wia-overview__stat + .bp-wia-overview__stat,.bp-wia-waiting__summary > div + div { border-left:0;border-top:1px solid #e5e8eb; }
  .bp-wia-waiting__summary > div { padding:14px 8px; }
  .bp-wia-planning-grid { grid-template-columns:1fr; }
  .bp-wia-planning-card--wide { grid-column:auto; }
  .bp-wia-planning-form { grid-template-columns:1fr; }
  .bp-wia-planning-form textarea { grid-column:auto; }
  .bp-wia-edit-grid { grid-template-columns:1fr; }
  .bp-wia-timeline .bp-wia-section-head { grid-template-columns:1fr; }
  .bp-wia-add-event { justify-self:stretch;width:100%; }
  .bp-wia-add-event > summary { width:100%; }
  .bp-wia-add-event[open] { grid-column:auto;padding:14px; }
  .bp-wia-add-event[open] > summary { margin-left:0; }
  .bp-wia-add-event .bp-wia-form { grid-template-columns:1fr;grid-template-areas:"date-label" "date" "title-label" "title" "type-label" "type" "description-label" "description" "button"; }
  .bp-wia-add-event .bp-wia-form > .bp-btn { width:100%;justify-self:stretch; }
  .bp-wia-document-item { align-items:flex-start;flex-direction:column; }
  .bp-wia-document-item__actions { width:100%; }
  .bp-wia-document-item__actions .bp-btn { width:100%; }
}