/* 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 { background: var(--tint-soft); color: var(--tint-deep); }
#paneel[data-module="roomtours"] .s-fotos_verzamelen,
#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; }

/* ---------- 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: 620px; }
#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; }

/* 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: 108px; }
#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; }

#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; } }
/* De stijl staat onder de twee kolommen, maar houdt wel de breedte van een kolom. */
#paneel[data-module="roomtours"] #rt_stijl { max-width: calc(50% - 7px); }
#paneel[data-module="roomtours"] #rt_stijl + .mini { margin-top: 6px; }
@media (max-width: 560px) { #paneel[data-module="roomtours"] #rt_stijl { max-width: none; } }
#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;
}