/* Module roomtours - overzicht, goedkeuringspagina en instellingen.
   Basis (tokens, knoppen, inputs, stats) staat in os.css; .btn, .group,
   .tabelkaart, .warn en .switch komen uit outreach.css en worden hier
   hergebruikt. Alles wat hier bij komt heet .rt-* en staat gescoped onder
   #paneel[data-module="roomtours"], zodat het geen andere module raakt. */

#paneel[data-module="roomtours"] { max-width: 1180px; margin: 0 auto; }

/* ---------- status-pillen ---------- */
#paneel[data-module="roomtours"] .rt-chip,
#paneel[data-module="roomtours"] .rt-kt .rt-chip {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; letter-spacing: -.005em;
  padding: 3px 11px; border-radius: 980px;
  background: rgba(0,0,0,.06); color: var(--ink-2); text-transform: none;
}
#paneel[data-module="roomtours"] .s-wacht_op_volgorde,
#paneel[data-module="roomtours"] .s-wacht_op_prompts { background: var(--tint-soft); color: var(--tint-deep); }
#paneel[data-module="roomtours"] .s-fotos_verzamelen,
#paneel[data-module="roomtours"] .s-volgorde_vastgelegd,
#paneel[data-module="roomtours"] .s-prompts_maken,
#paneel[data-module="roomtours"] .s-genereren,
#paneel[data-module="roomtours"] .s-controleren,
#paneel[data-module="roomtours"] .s-goedgekeurd { background: var(--orange-soft); color: var(--orange); }
#paneel[data-module="roomtours"] .s-klaar,
#paneel[data-module="roomtours"] .t-goedgekeurd { background: var(--green-soft); color: var(--green); }
#paneel[data-module="roomtours"] .s-mislukt,
#paneel[data-module="roomtours"] .s-login_nodig,
#paneel[data-module="roomtours"] .t-afgewezen { background: var(--red-soft); color: var(--red); }

/* ---------- overzicht ---------- */
#paneel[data-module="roomtours"] .rt-tabel tr:not(:first-child) { cursor: pointer; }
#paneel[data-module="roomtours"] .rt-tabel tr:not(:first-child):hover td { background: var(--well); }
#paneel[data-module="roomtours"] .rt-tabel td:first-child b { font-weight: 600; }

#paneel[data-module="roomtours"] .rt-tours {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; margin-top: 10px;
}
#paneel[data-module="roomtours"] .rt-tour {
  display: flex; gap: 12px; background: var(--canvas); border-radius: 12px; padding: 10px; align-items: flex-start;
}
#paneel[data-module="roomtours"] .rt-tour-thumb {
  flex: none; width: 92px; height: 62px; border-radius: 8px; overflow: hidden;
  background: rgba(0,0,0,.06); display: flex; align-items: center; justify-content: center; color: var(--ink-3);
}
#paneel[data-module="roomtours"] .rt-tour-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#paneel[data-module="roomtours"] .rt-tour-tekst { min-width: 0; flex: 1; }
#paneel[data-module="roomtours"] .rt-tour-tekst b { display: block; font-size: 13.5px; letter-spacing: -.01em; }
#paneel[data-module="roomtours"] .rt-tour-tekst .mini { display: block; }
#paneel[data-module="roomtours"] .rt-tour-acties { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }

/* op de opdrachtpagina staat de video zelf in de kaart, om terug te kijken */
#paneel[data-module="roomtours"] .rt-tours-groot { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
#paneel[data-module="roomtours"] .rt-tour-groot { display: block; }
#paneel[data-module="roomtours"] .rt-tour-video {
  width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; display: block;
  background: #000; margin-bottom: 10px;
}

/* ---------- goedkeuringspagina ---------- */
#paneel[data-module="roomtours"] .rt-balk {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-sm);
  padding: 14px 16px; margin: 12px 0 14px; position: sticky; top: calc(var(--topbar-h) + 8px); z-index: 20;
}
#paneel[data-module="roomtours"] .rt-balk b { display: block; font-size: 16px; letter-spacing: -.02em; }
#paneel[data-module="roomtours"] .rt-balk .mini { display: block; max-width: 560px; }
#paneel[data-module="roomtours"] .rt-balk .spacer { flex: 1; }

#paneel[data-module="roomtours"] .rt-kt.uit { opacity: .55; }
#paneel[data-module="roomtours"] .rt-kt h4 .switch-row { margin-right: 2px; }
#paneel[data-module="roomtours"] .rt-kt h4 .mini { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; }
#paneel[data-module="roomtours"] .rt-kt h5 {
  font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em;
  margin: 16px 0 4px;
}

/* fotostrip: horizontaal, slepen om te herordenen */
#paneel[data-module="roomtours"] .rt-strip {
  display: flex; gap: 8px; overflow-x: auto; padding: 8px; margin-top: 4px;
  background: var(--well); border-radius: 12px; min-height: 78px; align-items: center;
  outline: 2px dashed transparent; outline-offset: -2px; transition: outline-color .18s, background .18s;
}
#paneel[data-module="roomtours"] .rt-strip.dragover { background: var(--tint-soft); outline-color: var(--tint); }
#paneel[data-module="roomtours"] .rt-foto {
  position: relative; flex: none; width: 116px; height: 78px; border-radius: 9px; overflow: hidden;
  background: rgba(0,0,0,.08); box-shadow: var(--shadow-sm); cursor: grab;
}
#paneel[data-module="roomtours"] .rt-foto img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
#paneel[data-module="roomtours"] .rt-foto.sleept { opacity: .4; }
#paneel[data-module="roomtours"] .rt-foto-leeg { display: block; width: 100%; height: 100%; }
#paneel[data-module="roomtours"] .rt-nr {
  position: absolute; left: 5px; top: 5px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 980px; background: rgba(0,0,0,.68); color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
#paneel[data-module="roomtours"] .rt-foto button {
  border: none; background: rgba(0,0,0,.62); color: #fff; padding: 0;
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s var(--ease), background .15s var(--ease);
}
#paneel[data-module="roomtours"] .rt-foto:hover button, #paneel[data-module="roomtours"] .rt-foto:focus-within button { opacity: 1; }
#paneel[data-module="roomtours"] .rt-foto button:hover { background: rgba(0,0,0,.85); }
#paneel[data-module="roomtours"] .rt-weg { position: absolute; right: 5px; top: 5px; }
#paneel[data-module="roomtours"] .rt-pijlen { position: absolute; right: 5px; bottom: 5px; display: flex; gap: 4px; }
#paneel[data-module="roomtours"] .rt-erbij { position: absolute; right: 5px; top: 5px; }
#paneel[data-module="roomtours"] .rt-foto-overig { cursor: default; opacity: .78; }
#paneel[data-module="roomtours"] .rt-foto-overig:hover { opacity: 1; }

/* een vastgelegde strip: alleen kijken, geen slepen en geen knoppen */
#paneel[data-module="roomtours"] .rt-foto-vast { cursor: default; }

/* overgangen: wat er in stap 1 tussen twee foto's gebeurt. De naam en de twee
   keuzelijstjes op een regel, de reden van de wachter eronder. */
#paneel[data-module="roomtours"] .rt-overgangen { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
#paneel[data-module="roomtours"] .rt-overgang {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  background: var(--well); border-radius: 10px; padding: 8px 12px; font-size: 13px;
}
#paneel[data-module="roomtours"] .rt-overgang-naam { font-weight: 600; letter-spacing: -.01em; flex: none; min-width: 52px; }
#paneel[data-module="roomtours"] .rt-overgang .mini { flex: 1 0 100%; min-width: 0; }
#paneel[data-module="roomtours"] .rt-overgang.onbekend .rt-overgang-naam { color: var(--ink-3); }
#paneel[data-module="roomtours"] .rt-overgang.geknipt { background: none; box-shadow: inset 0 0 0 1px var(--lijn); }
#paneel[data-module="roomtours"] .rt-overgang.geknipt .rt-overgang-naam { color: var(--ink-3); }

/* het type van een overgang: het keuzelijstje naast de naam */
#paneel[data-module="roomtours"] select.rt-type {
  flex: none; width: auto; min-width: 168px;
  padding: 5px 26px 5px 9px; font-size: 12.5px;
  background-position: right 8px center;
}

/* de terugblik: waar bewust geknipt is staat een regel tussen de clips */
#paneel[data-module="roomtours"] .rt-knipregel {
  padding: 7px 12px; font-size: 12.5px; font-weight: 600; letter-spacing: -.01em;
  color: var(--ink-3); border: 1px dashed var(--lijn); border-radius: 10px;
}

/* de duur van een clip: een smal keuzelijstje, rechts in de regel */
#paneel[data-module="roomtours"] select.rt-duur {
  flex: none; width: auto; min-width: 74px; margin-left: auto;
  padding: 5px 26px 5px 9px; font-size: 12.5px;
  background-position: right 8px center;
}
#paneel[data-module="roomtours"] .rt-duur-rij {
  display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 0 2px 4px;
  font-size: 13px; font-weight: 600; letter-spacing: -.01em;
}
#paneel[data-module="roomtours"] .rt-duur-rij select.rt-duur { margin-left: 0; }
#paneel[data-module="roomtours"] .rt-duur-rij .mini { flex: 1; min-width: 0; font-weight: 500; }
@media (max-width: 560px) {
  #paneel[data-module="roomtours"] .rt-duur-rij { flex-wrap: wrap; }
  #paneel[data-module="roomtours"] .rt-duur-rij .mini { flex-basis: 100%; }
}

/* een knop die als tekst leest, voor de omweg terug naar de volgorde */
#paneel[data-module="roomtours"] .rt-tekstknop {
  border: none; background: none; padding: 6px 4px; color: var(--ink-2);
  font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
#paneel[data-module="roomtours"] .rt-tekstknop:hover { color: var(--ink); }

/* clips: uitklapbaar, in knip een per foto, in doorlopend een per overgang */
#paneel[data-module="roomtours"] .rt-clips { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
#paneel[data-module="roomtours"] .rt-clip { background: var(--well); border-radius: 10px; overflow: hidden; }
#paneel[data-module="roomtours"] .rt-clip-kop {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: none; background: none; color: var(--ink); padding: 9px 12px; font-size: 13px;
}
#paneel[data-module="roomtours"] .rt-clip-kop:hover { background: rgba(0,0,0,.04); }
#paneel[data-module="roomtours"] .rt-clip-naam { font-weight: 600; letter-spacing: -.01em; flex: none; min-width: 190px; white-space: nowrap; }
#paneel[data-module="roomtours"] .rt-clip-prompt {
  flex: 1; min-width: 0; color: var(--ink-2); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#paneel[data-module="roomtours"] .rt-clip-kop .ic { color: var(--ink-3); flex: none; }
#paneel[data-module="roomtours"] .rt-clip.open .rt-clip-kop .ic { transform: rotate(90deg); }
#paneel[data-module="roomtours"] .rt-clip-body { padding: 0 12px 12px; }
#paneel[data-module="roomtours"] .rt-clip-body label { margin-top: 8px; }

/* terugkijken: dezelfde clipregels, maar alleen lezen (details/summary) */
#paneel[data-module="roomtours"] .rt-clip-terug > summary { list-style: none; cursor: pointer; }
#paneel[data-module="roomtours"] .rt-clip-terug > summary::-webkit-details-marker { display: none; }
#paneel[data-module="roomtours"] .rt-clip-terug[open] .rt-clip-kop .ic { transform: rotate(90deg); }
#paneel[data-module="roomtours"] .rt-prompt-vast {
  margin: 0; padding-top: 4px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
#paneel[data-module="roomtours"] .rt-terugblik { margin-top: 22px; }
#paneel[data-module="roomtours"] .rt-kopje {
  margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.02em; color: var(--ink);
}

#paneel[data-module="roomtours"] .rt-fase { font-size: 14px; margin: 10px 0 0; }
#paneel[data-module="roomtours"] .rt-feiten { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 14px; }

/* ---------- instellingen ---------- */
#paneel[data-module="roomtours"] .rt-inst { max-width: 760px; }
#paneel[data-module="roomtours"] .rt-status-rij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
#paneel[data-module="roomtours"] .rt-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { #paneel[data-module="roomtours"] .rt-twee { grid-template-columns: 1fr; } }
/* Stijl en standaardduur staan in een eigen tweekolomsrij onder model en omvang. */
#paneel[data-module="roomtours"] .rt-twee + .mini { margin-top: 10px; }
#paneel[data-module="roomtours"] .rt-code, #paneel[data-module="roomtours"] pre.rt-code {
  background: var(--well); border-radius: 10px; padding: 12px 14px; margin: 6px 0 0;
  font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
  color: var(--ink-2); overflow-x: auto; white-space: pre; line-height: 1.6;
}
#paneel[data-module="roomtours"] .rt-melding {
  background: var(--orange-soft); color: var(--orange); border-radius: 12px; padding: 12px 14px; margin-top: 10px; font-size: 12.5px;
}
#paneel[data-module="roomtours"] .rt-token { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
#paneel[data-module="roomtours"] .rt-token code {
  flex: 1; min-width: 220px; background: var(--surface); border-radius: 8px; padding: 8px 10px;
  font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--ink);
  overflow-wrap: anywhere;
}