.sgwp-app {
  --sgwp-bg:#fff; --sgwp-text:#1a1a1a; --sgwp-muted:#6b7280; --sgwp-border:#e5e7eb;
  --sgwp-accent:#dc2626; --sgwp-ok:#16a34a; --sgwp-warn:#d97706; --sgwp-card:#fafafa;
  --sgwp-radius:12px;
  max-width:640px; margin:0 auto; padding:8px 0 40px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--sgwp-text); line-height:1.5; box-sizing:border-box;
}
.sgwp-app * { box-sizing:border-box; }

.sgwp-header { text-align:center; margin-bottom:24px; }
.sgwp-logo { max-width:170px; height:auto; margin:0 auto 8px; display:block; }
.sgwp-h1 { font-size:20px; font-weight:600; margin:8px 0 4px; }
.sgwp-sub { color:var(--sgwp-muted); font-size:14px; margin:0; }
.sgwp-leeg-badge {
  margin-top:6px; font-size:12px; color:var(--sgwp-warn);
  background:#fffbeb; border:1px solid #fde68a; border-radius:6px; padding:4px 8px; display:inline-block;
}

.sgwp-form { background:var(--sgwp-card); border:1px solid var(--sgwp-border); border-radius:var(--sgwp-radius); padding:20px; margin-bottom:20px; }
.sgwp-row { margin-bottom:16px; }
.sgwp-row:last-child { margin-bottom:0; }
.sgwp-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
.sgwp-hint { display:block; font-size:12px; color:var(--sgwp-muted); margin-top:2px; }
.sgwp-input { width:100%; padding:12px 14px; font-size:15px; border:1px solid var(--sgwp-border); border-radius:8px; background:#fff; color:var(--sgwp-text); outline:none; }
.sgwp-input:focus { border-color:var(--sgwp-accent); box-shadow:0 0 0 3px rgba(220,38,38,.12); }
.sgwp-input-short { max-width:140px; }

/* Toggle */
.sgwp-toggle-wrap { display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.sgwp-toggle-wrap input { display:none; }
.sgwp-toggle-slider {
  width:42px; height:24px; background:var(--sgwp-border); border-radius:12px;
  position:relative; transition:background .2s; flex-shrink:0;
}
.sgwp-toggle-slider::after {
  content:''; position:absolute; top:3px; left:3px; width:18px; height:18px;
  background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.sgwp-toggle-wrap input:checked + .sgwp-toggle-slider { background:var(--sgwp-accent); }
.sgwp-toggle-wrap input:checked + .sgwp-toggle-slider::after { transform:translateX(18px); }
.sgwp-label-inline { font-size:14px; font-weight:500; }

/* Button */
.sgwp-btn {
  display:inline-block; padding:14px 28px; font-size:15px; font-weight:600;
  background:var(--sgwp-text); color:#fff; border:none; border-radius:var(--sgwp-radius);
  cursor:pointer; margin-top:8px;
}
.sgwp-btn:disabled { opacity:.5; cursor:wait; }
.sgwp-btn:hover:not(:disabled) { opacity:.9; }

/* Resultaat */
.sgwp-status { text-align:center; padding:20px; color:var(--sgwp-muted); font-size:14px; }
.sgwp-error { padding:14px 18px; background:#fef2f2; border:1px solid #fecaca; border-radius:8px; color:#b91c1c; font-size:14px; }

.sgwp-schema { list-style:none; padding:0; margin:0; }
.sgwp-stap {
  display:flex; align-items:stretch; gap:0; margin-bottom:0;
}

/* Tijdlijn-lijn links */
.sgwp-tijdlijn {
  width:48px; flex-shrink:0; display:flex; flex-direction:column; align-items:center;
  position:relative;
}
.sgwp-tijdlijn-dot {
  width:14px; height:14px; border-radius:50%; background:var(--sgwp-ok); border:2px solid #fff;
  box-shadow:0 0 0 2px var(--sgwp-ok); z-index:1; margin-top:18px; flex-shrink:0;
}
.sgwp-tijdlijn-lijn {
  width:2px; flex:1; background:var(--sgwp-border);
}
.sgwp-stap:last-child .sgwp-tijdlijn-lijn { display:none; }

.sgwp-stap-card {
  flex:1; background:var(--sgwp-card); border:1px solid var(--sgwp-border);
  border-radius:10px; padding:14px 18px; margin:6px 0;
}
.sgwp-stap-nr { font-size:12px; color:var(--sgwp-muted); font-weight:600; text-transform:uppercase; margin-bottom:2px; }
.sgwp-stap-gate { font-size:18px; font-weight:700; }
.sgwp-stap-tijd { font-size:15px; font-weight:700; color:var(--sgwp-text); margin-top:4px; }
.sgwp-stap-venster { font-size:12px; color:var(--sgwp-muted); }

.sgwp-stap-card.fout {
  background:#fef2f2; border-color:#fecaca;
}
.sgwp-stap-card.fout .sgwp-tijdlijn-dot { background:var(--sgwp-accent); box-shadow:0 0 0 2px var(--sgwp-accent); }

.sgwp-looptijd-label {
  text-align:center; font-size:11px; color:var(--sgwp-muted); padding:2px 0;
}

.sgwp-samenvatting {
  margin-top:16px; padding:14px 18px; background:#f0fdf4; border:1px solid #bbf7d0;
  border-radius:10px; font-size:14px;
}
.sgwp-samenvatting.waarschuwing {
  background:#fffbeb; border-color:#fde68a;
}

/* ── Scheidingslijn in formulier ── */
.sgwp-scheiding { border:none; border-top:1px solid var(--sgwp-border); margin:18px 0; }
.sgwp-select { max-width:100%; padding:10px 12px; }
.sgwp-loopblok { padding-left:52px; }
@media (max-width:480px){ .sgwp-loopblok { padding-left:0; } }

/* ── Pier-badge op de kaart ── */
.sgwp-pier-badge {
  display:inline-block; margin-left:6px; padding:1px 7px; font-size:10px; font-weight:700;
  background:#e0e7ff; color:#3730a3; border-radius:10px; letter-spacing:.02em;
}

/* ── Looptijd tussen gates ── */
.sgwp-loop { display:flex; align-items:center; min-height:26px; }
.sgwp-loop-tekst { font-size:11px; color:var(--sgwp-muted); padding-left:4px; }

/* ── Pier-wissel markering ── */
.sgwp-pierwissel { display:flex; align-items:center; min-height:38px; }
.sgwp-pierwissel-tekst {
  font-size:12px; font-weight:600; color:#3730a3; background:#eef2ff;
  border:1px dashed #c7d2fe; border-radius:8px; padding:6px 12px; margin:4px 0;
}

/* ── Foutmarkering ── */
.sgwp-tijdlijn-dot.fout { background:var(--sgwp-accent); box-shadow:0 0 0 2px var(--sgwp-accent); }
.sgwp-stap-tijd.fout { color:#b91c1c; }

/* ── Overgeslagen gates ── */
.sgwp-skip-blok {
  margin-top:16px; padding:14px 18px; background:#fffbeb;
  border:1px solid #fde68a; border-radius:10px;
}
.sgwp-skip-titel { font-size:14px; font-weight:700; color:#92400e; margin-bottom:4px; }
.sgwp-skip-tekst { font-size:12px; color:#78350f; margin-bottom:8px; }
.sgwp-skip-gates { display:flex; flex-wrap:wrap; gap:6px; }
.sgwp-skip-gate {
  font-size:12px; font-weight:600; background:#fff; border:1px solid #fde68a;
  border-radius:6px; padding:4px 10px; color:#92400e;
}

/* ── 24-uurs tijdlijnbalk boven het resultaat ── */
.sgwp-balk-wrap {
  background:var(--sgwp-card); border:1px solid var(--sgwp-border);
  border-radius:12px; padding:14px 16px 12px; margin-bottom:16px;
}
.sgwp-balk-titel {
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--sgwp-muted); margin-bottom:8px;
}
.sgwp-balk {
  position:relative; height:30px; background:#fb923c;   /* oranje = vrij, geen werktijd */
  border-radius:6px; overflow:hidden;
}
.sgwp-seg {
  position:absolute; top:0; bottom:0; min-width:2px;
}
.sgwp-seg-werk  { background:#16a34a; }   /* groen: jouw werktijd */
.sgwp-seg-loop  { background:#facc15; }   /* geel: looptijd */
.sgwp-seg-bezet { background:#dc2626; }   /* rood: gate bezet */

.sgwp-balk-uren {
  position:relative; height:16px; margin-top:6px;
}
.sgwp-balk-uur {
  position:absolute; top:0; transform:translateX(-50%);
  font-size:10px; color:var(--sgwp-muted); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.sgwp-legenda {
  display:flex; flex-wrap:wrap; gap:12px; margin-top:12px;
  padding-top:10px; border-top:1px solid var(--sgwp-border);
  font-size:12px; color:var(--sgwp-muted);
}
.sgwp-leg { display:inline-flex; align-items:center; gap:5px; }
.sgwp-leg-vak {
  width:12px; height:12px; border-radius:3px; display:inline-block;
}
.sgwp-leg-oranje { background:#fb923c; }

/* Werktijd-tekst: extra donker voor de fout-variant */

/* Paar-badge: zelfde vliegtuigplek, ander gatenummer */
.sgwp-gatepair-badge {
  display:inline-block; margin-left:6px; padding:2px 7px;
  font-size:11px; font-weight:600; vertical-align:middle;
  background:#eef2ff; color:#4338ca; border:1px solid #c7d2fe;
  border-radius:999px; cursor:help; white-space:nowrap;
}

/* Werkvenster: vanaf- en tot-tijd */
.sgwp-venster-rij {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.sgwp-input-tijd {
  width:auto; min-width:110px; flex:0 0 auto;
}
.sgwp-venster-tot {
  color:var(--sgwp-muted); font-size:14px;
}
.sgwp-venster-nu {
  padding:6px 12px; font-size:13px; font-weight:600; cursor:pointer;
  background:var(--sgwp-card); color:var(--sgwp-text);
  border:1px solid var(--sgwp-border); border-radius:8px;
}
.sgwp-venster-nu:hover { background:#f3f4f6; }

/* Melding met het venster waarmee gerekend is */
.sgwp-venster-melding {
  background:#f8fafc; border:1px solid var(--sgwp-border);
  border-radius:10px; padding:9px 12px; margin-bottom:12px;
  font-size:13px; color:var(--sgwp-text);
}
.sgwp-venster-melding em { color:var(--sgwp-muted); font-style:normal; }

@media (max-width:480px) {
  .sgwp-venster-nu { width:100%; margin-top:4px; }
}

/* Downloadknop */
.sgwp-download-rij {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:14px;
}
.sgwp-download-btn {
  padding:9px 16px; font-size:14px; font-weight:600; cursor:pointer;
  background:var(--sgwp-card); color:var(--sgwp-text);
  border:1px solid var(--sgwp-border); border-radius:9px;
}
.sgwp-download-btn:hover { background:#f3f4f6; }
.sgwp-download-btn:active { transform:translateY(1px); }

@media (max-width:480px) {
  .sgwp-download-btn { width:100%; }
}