/* Werkruimte Beschikbaarheid */

/* Poppins (SIL Open Font License) – lokaal meegeleverd, geen Google-verbinding nodig */
@font-face {
  font-family: "WRB Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "WRB Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "WRB Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "WRB Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/poppins-700.woff2") format("woff2");
}

.wrb {
  /* Huisstijl */
  --wrb-petrol: #00434b;
  --wrb-teal: #57b6aa;
  --wrb-mist: #c9d9d4;
  --wrb-white: #ffffff;

  --wrb-accent: var(--wrb-petrol);
  --wrb-ink: #0f2f33;
  --wrb-muted: #4d6a6d;
  --wrb-line: #dbe6e2;
  --wrb-bg: var(--wrb-white);
  --wrb-soft: #eef4f2;
  --wrb-free: #e2f2ef;
  --wrb-free-ink: var(--wrb-petrol);
  --wrb-free-edge: var(--wrb-teal);
  --wrb-busy: var(--wrb-petrol);
  --wrb-busy-ink: var(--wrb-white);
  --wrb-busy-edge: var(--wrb-petrol);
  max-width: 560px;
  margin: 0 auto;
  color: var(--wrb-ink);
  font-family: "WRB Poppins", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
.wrb *, .wrb *::before, .wrb *::after { box-sizing: border-box; }
.wrb button { font: inherit; cursor: pointer; }

/* Logo */
.wrb-logo {
  display: block; width: min(180px, 50%); margin: 0 auto 18px; padding: 0;
  background: none; border: 0; line-height: 0;
}
.wrb-logo img { display: block; width: 100%; height: auto; }
button.wrb-logo:focus-visible { outline: 3px solid var(--wrb-teal); outline-offset: 4px; border-radius: 6px; }
@media (min-width: 720px) { .wrb-logo { width: 220px; margin-bottom: 24px; } }

/* Startscherm */
.wrb-title { font-size: 1.35rem; margin: 0 0 16px; font-weight: 600; color: var(--wrb-petrol); }
/* Mobiel: lijst van 5 even grote rijen (foto links, naam rechts) */
.wrb-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
.wrb-room {
  position: relative; display: flex; flex-direction: row; align-items: stretch;
  padding: 0; overflow: hidden; text-align: left; min-height: 84px;
  background: var(--wrb-bg); color: var(--wrb-ink);
  border: 1px solid var(--wrb-line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: transform .12s ease, box-shadow .12s ease;
}
.wrb-room:hover { box-shadow: 0 6px 18px rgba(0,67,75,.14); border-color: var(--wrb-teal); }
.wrb-room:hover .wrb-room-media img { transform: scale(1.04); }
.wrb-room:active { transform: scale(.98); }
.wrb-room-media {
  display: block; flex: none; width: 120px; overflow: hidden;
  background: linear-gradient(135deg, var(--wrb-mist), var(--wrb-soft));
}
.wrb-room-media { position: relative; }
.wrb-room-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.wrb-room-cap {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-left: 4px solid var(--wrb-teal);
}
.wrb-room-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--wrb-teal); flex: none; }
.wrb-room-name { font-size: 1.15rem; font-weight: 600; flex: 1; color: var(--wrb-petrol); }
.wrb-room-arrow { font-size: 1.6rem; color: var(--wrb-teal); line-height: 1; }
.wrb-room:focus-visible, .wrb-nav:focus-visible, .wrb-back:focus-visible, .wrb-today:focus-visible, .wrb-pick:focus-within {
  outline: 3px solid var(--wrb-teal); outline-offset: 2px;
}

/* Groter scherm: fotokaarten in 3 kolommen */
@media (min-width: 720px) {
  .wrb { max-width: 880px; }
  .wrb-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .wrb-room { flex-direction: column; min-height: 0; border-radius: 16px; }
  .wrb-room-media { width: 100%; aspect-ratio: 4 / 3; }
  .wrb-room-cap { border-left: 0; border-top: 4px solid var(--wrb-teal); padding: 10px 12px; min-height: 48px; }
  .wrb-room-name { font-size: 1.2rem; }
}

/* Nu beschikbaar */
.wrb-nowbox {
  margin: 0 0 28px; padding: 18px 16px 16px;
  background: var(--wrb-soft); border: 1px solid var(--wrb-mist); border-radius: 16px;
}
.wrb-nowbox-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.wrb-nowbox-title { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--wrb-petrol); }
.wrb-nowbox-clock {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9rem;
  background: var(--wrb-petrol); color: #fff; padding: 3px 10px; border-radius: 999px;
}
.wrb-nowbox-empty, .wrb-nowbox-next { margin: 0; color: var(--wrb-petrol); }
.wrb-nowbox-next { margin-top: 6px; font-size: .9rem; color: var(--wrb-muted); }
.wrb-nowbox-note { margin: 10px 0 0; font-size: .8rem; color: var(--wrb-muted); }
.wrb-nowlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wrb-nowlist li { margin: 0; padding: 0; }
.wrb-nowitem {
  width: 100%; display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 10px 14px; text-align: left;
  background: var(--wrb-bg); color: var(--wrb-petrol);
  border: 1px solid var(--wrb-line); border-left: 4px solid var(--wrb-teal); border-radius: 12px;
}
.wrb-nowitem:hover { border-color: var(--wrb-teal); }
.wrb-nowitem:focus-visible { outline: 3px solid var(--wrb-teal); outline-offset: 2px; }
.wrb-nowitem-name { flex: 1; font-weight: 600; font-size: 1.05rem; }
.wrb-nowitem-until { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wrb-nowitem-until strong { font-size: 1.05rem; }
.wrb-nowitem-sub { font-size: .8rem; color: var(--wrb-muted); }
@media (min-width: 720px) {
  .wrb-nowbox { padding: 20px 22px; }
  .wrb-nowlist { grid-template-columns: repeat(2, 1fr); }
}

/* Kop dagoverzicht */
.wrb-back { background: none; border: 0; color: var(--wrb-muted); padding: 8px 0; margin-bottom: 4px; font-size: .95rem; }
.wrb-back:hover { color: var(--wrb-petrol); }
.wrb-head { margin-bottom: 14px; }
.wrb-head-text { display: flex; align-items: center; gap: 10px; }
.wrb-head-title { margin: 0; font-size: 1.6rem; font-weight: 700; color: var(--wrb-petrol); }
.wrb-head.has-photo { position: relative; border-radius: 16px; overflow: hidden; }
.wrb-head.has-photo img { display: block; width: 100%; height: 150px; object-fit: cover; }
.wrb-head.has-photo .wrb-head-text {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 12px;
  background: linear-gradient(to top, rgba(0,67,75,.85), rgba(0,67,75,0));
}
.wrb-head.has-photo .wrb-head-title { color: #fff; }
.wrb-head.has-photo .wrb-room-dot { box-shadow: 0 0 0 2px #fff; }
.wrb-col { max-width: 560px; margin: 0 auto; }

/* Datumbalk */
.wrb-datebar { display: flex; align-items: stretch; gap: 8px; }
.wrb-nav {
  flex: none; width: 48px; border-radius: 12px;
  border: 1px solid var(--wrb-line); background: var(--wrb-bg); color: var(--wrb-ink);
  font-size: 1.6rem; line-height: 1; color: var(--wrb-petrol);
}
.wrb-nav:hover { background: var(--wrb-soft); }
.wrb-pick {
  position: relative; flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 8px 44px 8px 14px; min-height: 56px;
  border: 1px solid var(--wrb-line); border-radius: 12px; background: var(--wrb-bg);
  cursor: pointer;
}
.wrb-pick-text { color: var(--wrb-petrol); font-weight: 600; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrb-pick-sub { font-size: .85rem; color: var(--wrb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrb-cal { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--wrb-teal); }
.wrb-cal svg { display: block; width: 100%; height: 100%; }
.wrb-date {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: 0; padding: 0; margin: 0; cursor: pointer;
  font-size: 16px; /* voorkomt inzoomen op iOS */
}
.wrb-date::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.wrb-today {
  margin-top: 10px; background: none; border: 1px solid var(--wrb-line); border-radius: 999px;
  padding: 6px 14px; font-size: .9rem; color: var(--wrb-petrol); border-color: var(--wrb-teal);
}
.wrb-today:hover { background: var(--wrb-soft); }

/* Inhoud */
.wrb-body { margin-top: 16px; }
.wrb-loading { padding: 40px 0; text-align: center; color: var(--wrb-muted); }
.wrb-error { padding: 18px; border-radius: 12px; background: var(--wrb-soft); color: var(--wrb-petrol); border: 1px solid var(--wrb-mist); }
.wrb-error p { margin: 0; }
.wrb-demo { font-size: .85rem; background: var(--wrb-soft); color: var(--wrb-petrol); border: 1px dashed var(--wrb-mist); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }

.wrb-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.wrb-badge { display: inline-block; padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: .95rem; }
.wrb-badge.is-free { background: var(--wrb-free); color: var(--wrb-free-ink); }
.wrb-badge.is-busy { background: var(--wrb-busy); color: var(--wrb-busy-ink); }
.wrb-badge.is-part { background: var(--wrb-mist); color: var(--wrb-petrol); }
.wrb-freeline { margin: 0; font-size: .95rem; color: var(--wrb-muted); }
.wrb-freeline strong { color: var(--wrb-petrol); }

/* Tijdlijn */
.wrb-timeline { position: relative; margin: 8px 0 0 52px; border-left: 1px solid var(--wrb-line); }
.wrb-hour { position: absolute; left: 0; right: 0; border-top: 1px solid var(--wrb-line); }
.wrb-hour-label { position: absolute; left: -54px; top: -10px; width: 42px; text-align: right; font-size: .8rem; color: var(--wrb-muted); font-variant-numeric: tabular-nums; }
.wrb-half { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--wrb-soft); }
.wrb-block {
  position: absolute; left: 6px; right: 0;
  border-radius: 10px; padding: 6px 12px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start;
  border-left: 4px solid;
}
.wrb-block.is-short { flex-direction: row; align-items: center; gap: 8px; padding-top: 0; padding-bottom: 0; }
.wrb-free { background: var(--wrb-free); color: var(--wrb-free-ink); border-color: var(--wrb-free-edge); }
.wrb-busy {
  color: var(--wrb-busy-ink); border-color: var(--wrb-busy-edge);
  background: repeating-linear-gradient(135deg, var(--wrb-petrol) 0 10px, #0a4f57 10px 20px);
  z-index: 1;
}
.wrb-block-label { font-weight: 700; font-size: .95rem; }
.wrb-block-time { font-size: .85rem; font-variant-numeric: tabular-nums; }
.wrb-pastshade { position: absolute; left: 0; right: 0; top: 0; background: rgba(255,255,255,.55); z-index: 2; pointer-events: none; }
.wrb-timeline.is-past .wrb-block { opacity: .5; }
.wrb-now { position: absolute; left: 0; right: 0; border-top: 2px solid var(--wrb-teal); box-shadow: 0 1px 0 #fff, 0 -1px 0 #fff; z-index: 3; }
.wrb-now::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--wrb-teal); box-shadow: 0 0 0 2px #fff; }
.wrb-now-label { position: absolute; right: 0; top: -22px; font-size: .75rem; font-weight: 700; background: var(--wrb-teal); color: var(--wrb-petrol); padding: 1px 6px; border-radius: 6px; }

.wrb-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: .85rem; color: var(--wrb-muted); }
.wrb-leg { display: inline-flex; align-items: center; gap: 6px; }
.wrb-leg i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.wrb-leg-free { background: var(--wrb-free); border: 1px solid var(--wrb-free-edge); }
.wrb-leg-busy { background: var(--wrb-petrol); border: 1px solid var(--wrb-petrol); }
.wrb-note { font-size: .8rem; color: var(--wrb-muted); margin: 10px 0 0; }

/* Web-app: pagina */
body.wrb-app-body { margin: 0; background: #fff; min-height: 100vh; }
.wrb-app-shell { padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }

/* Web-app: installatiehint */
body.wrb-has-install { padding-bottom: 120px; }
.wrb-install {
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 50;
  max-width: 520px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px;
  background: var(--wrb-petrol, #00434b); color: #fff; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,67,75,.35);
  font-family: "WRB Poppins", "Poppins", system-ui, sans-serif; font-size: .9rem; line-height: 1.35;
}
.wrb-install-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; background: #fff url("icons/icon-192.png") center / cover no-repeat; }
.wrb-install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wrb-install-text strong { font-weight: 600; }
.wrb-install-how { color: #cfe7e2; }
.wrb-install-how svg { vertical-align: -3px; color: #fff; }
.wrb-install-how b { color: #fff; font-weight: 600; }
.wrb-install-btn { display: none; flex: none; border: 0; border-radius: 999px; padding: 8px 14px; background: #57b6aa; color: #00434b; font: inherit; font-weight: 600; cursor: pointer; }
.wrb-install.can-install .wrb-install-btn { display: block; }
.wrb-install.can-install .wrb-install-how { display: none; }
.wrb-install-close { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.wrb-install-close:hover { background: rgba(255,255,255,.22); }

@media (prefers-reduced-motion: reduce) { .wrb-room { transition: none; } }