/* Visuele verfijning schermweergave - v1.0.0 test */

/* Gedeeld kleurenpalet voor bovenbalk, ticker en agenda */
:root {
  --screen-blue: #21468b;
  --screen-blue-dark: #17366f;
  --screen-blue-light: #dbe7ff;
  --screen-yellow: #ffd43b;
  --screen-white: #ffffff;
}

/* Bovenbalk: koningsblauw en dynamisch passend binnen de breedte */
.screen-info-bar {
  top: 0;
  left: 0;
  right: 0;
  gap: 0;
  flex-wrap: nowrap;
  overflow: hidden;
  border-radius: 0;
  background: var(--screen-blue);
  backdrop-filter: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.screen-info-bar span,
.screen-info-bar .info-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
  padding: 3px 8px;
  min-width: 0;
  border-radius: 0;
  color: var(--screen-white);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  font-size: clamp(.64rem,1.35vw,.88rem);
  line-height: 1.1;
  white-space: nowrap;
  flex: 1 1 0;
  overflow: hidden;
}

.screen-info-bar .info-time { flex: .75 1 0; }
.screen-info-bar .info-weather { flex: 1.05 1 0; }
.screen-info-bar .info-rain { flex: 1.65 1 0; }

.screen-info-bar span + span,
.screen-info-bar .info-segment + .info-segment {
  border-left: 1px solid rgba(255,255,255,.28);
}

.screen-info-bar .info-time {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.screen-info-bar svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.screen-info-bar .weather-icon,
.screen-info-bar .info-rain i {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 1.15rem;
  line-height: 1;
}

.screen-info-bar b,
.screen-info-bar em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screen-info-bar em {
  color: var(--screen-white);
  font-style: normal;
  font-weight: 650;
  opacity: .92;
}

/* Ticker: zelfde blauw/geel/wit-palet, opvallend door kleur en beweging; tekst standaard normaal */
.ticker {
  box-sizing: border-box;
  height: 34px;
  overflow: hidden;
  color: var(--screen-white);
  background: var(--screen-blue-dark);
  border-top: 2px solid var(--screen-yellow);
  border-bottom: 2px solid var(--screen-yellow);
  box-shadow: 0 -2px 8px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.12);
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  color: var(--screen-white);
  font-weight: 500;
  letter-spacing: .01em;
  font-size: calc(clamp(.88rem,1.9vw,1.08rem) * var(--ticker-font-scale,1));
  line-height: 1;
  padding: 0;
  box-sizing: border-box;
  height: 30px;
  max-height: 30px;
  min-width: 0;
  width: max-content;
  margin-left: 100%;
  animation-name: ticker-flow;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-duration: var(--ticker-duration,18s);
  will-change: transform;
}

.ticker-track strong { font-weight: 800; }

/* Een actuele KNMI-waarschuwing gebruikt tijdelijk exact de plek en hoogte van de ticker. */
.knmi-warning-ticker { border-color: rgba(0,0,0,.3); }
.knmi-warning-ticker .ticker-track { font-weight: 800; }
.knmi-warning-ticker.level-yellow { color:#161616; background:#ffd43b; }
.knmi-warning-ticker.level-yellow .ticker-track { color:#161616; }
.knmi-warning-ticker.level-orange { color:#fff; background:#d86812; }
.knmi-warning-ticker.level-orange .ticker-track { color:#fff; }
.knmi-warning-ticker.level-red { color:#fff; background:#b52222; }
.knmi-warning-ticker.level-red .ticker-track { color:#fff; }

@keyframes ticker-flow {
  from { transform: translateX(0); }
  to { transform: translateX(var(--ticker-distance, -900px)); }
}

/* Bij uitzonderlijk weinig posterhoogte mag alleen de ticker compacter worden. */
.display.ticker-compact .ticker-track {
  padding: 3px 0;
  font-size: clamp(.82rem,1.75vw,1rem);
}
.display.ticker-compact .ticker {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

/* Onderste agendabalk: dezelfde koningsblauwe stijl */
.room-strip {
  color: var(--screen-white);
  background: var(--screen-blue);
}

.room-strip h3 {
  color: rgba(255,255,255,.78);
  font-weight: 700;
  font-size: 1.02em;
  letter-spacing: .025em;
  text-transform: none;
  margin-bottom: .15em;
}

.ticker-track.effect-once { animation-iteration-count: 1; animation-fill-mode: forwards; }
.ticker-track.effect-static { width:100%; margin-left:0; text-align:center; animation:none; }
.ticker-track.effect-center { animation-name:ticker-center; animation-timing-function:ease-in-out; }
.ticker-track.effect-blink { animation-name:ticker-center-blink; animation-timing-function:ease-in-out; }
.ticker-paused .ticker-track { animation-play-state:paused; }
.ticker-arming .ticker-track { animation-play-state:paused; }
.ticker-accent.bold { font-weight:800; }
.ticker-icon { display:inline-block; margin:0 .18em; }
.ticker-animated-icon {
  display:inline-block;
  width:1.25em;
  height:1.25em;
  max-height:24px;
  margin:0 .08em;
  text-align:center;
  line-height:1.2;
  vertical-align:-.12em;
  transform-origin:50% 55%;
  will-change:transform,opacity;
}
.ticker-live-icon { display:block; flex:0 0 26px; width:26px; height:26px; max-width:26px; max-height:26px; margin:0 .12em; object-fit:contain; }
.theme-ticker-space { display:inline-block;flex:0 0 8ch;width:8ch; }
.theme-ticker-icon { margin:0; }
.ticker-live-icon-pending { opacity:0; }
.ticker-live-icon-phase-1 { animation:dm-noto-phase 4.6s ease-in-out infinite -1.1s; }
.ticker-live-icon-phase-2 { animation:dm-noto-phase 5.1s ease-in-out infinite -2.7s; }
.ticker-live-icon-phase-3 { animation:dm-noto-phase 4.8s ease-in-out infinite -3.6s; }
.ticker-live-icon-phase-0 { animation:dm-noto-phase 5.3s ease-in-out infinite -.4s; }
@keyframes dm-noto-phase { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-1.5px) rotate(1.5deg)} }
.ticker-icon-fallback { display:none; }

.ticker-editor-preview { overflow:hidden; min-height:34px; border-radius:7px; background:var(--screen-blue-dark); }
.ticker-editor-preview .ticker { width:100%; }
.ticker-editor-preview .ticker-track { white-space:nowrap; }
.ticker-symbol-picker { position:relative; }
.ticker-symbol-picker > summary { list-style:none; cursor:pointer; padding:10px 12px; border:1px solid #c5d2cd; border-radius:9px; background:#fff; }
.ticker-symbol-picker > summary::-webkit-details-marker { display:none; }
.ticker-symbol-picker > summary::after { content:"▾"; float:right; color:var(--muted); }
.ticker-symbol-picker[open] > summary::after { content:"▴"; }
.ticker-symbol-menu { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:7px; padding:10px; border:1px solid #c5d2cd; border-radius:10px; background:#fff; box-shadow:0 12px 28px rgba(25,45,38,.12); }
.ticker-symbol-menu fieldset { min-width:0; margin:0; padding:8px; border:1px solid var(--line); border-radius:9px; }
.ticker-symbol-group { background:#fbfdfc; }
.ticker-symbol-group > section + section { margin-top:10px; padding-top:9px; border-top:1px solid var(--line); }
.ticker-symbol-group > section > strong { display:block; margin-bottom:5px; color:#244c40; font-size:.75rem; }
.ticker-symbol-grid-animated { grid-template-columns:repeat(auto-fill,minmax(48px,1fr)); }
.ticker-symbol-grid-animated button { min-height:76px; background:#fff; display:grid;place-items:center;align-content:start;gap:3px; }
.ticker-symbol-grid-animated .ticker-live-icon { width:38px; height:38px; max-width:none; max-height:none; margin:0 auto; }
.ticker-symbol-grid-animated button > span { font-size:10px;line-height:1.05;text-align:center;color:#334b45; }
.ticker-symbol-menu legend { padding:0 5px; color:var(--muted); font-size:.76rem; font-weight:700; }
.ticker-symbol-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(36px,1fr)); gap:5px; }
.ticker-symbol-grid button { min-width:36px; min-height:36px; padding:4px; border:1px solid #c5d2cd; border-radius:7px; background:#fff; font-size:1.1rem; cursor:pointer; }
.ticker-symbol-grid button:hover,.ticker-symbol-grid button:focus-visible { border-color:var(--screen-blue); background:#edf3ff; outline:2px solid rgba(33,70,139,.18); }
@media (max-width:720px){.ticker-symbol-menu{grid-template-columns:1fr}}

.item:has(.poster-thumb) { grid-template-columns:64px minmax(0,1fr) auto; align-items:center; }
.poster-thumb { width:58px; height:82px; object-fit:cover; border:1px solid var(--line); border-radius:7px; background:#fff; }
.poster-date { display:block; margin-top:3px; }
.poster-new { border-color:#52a88c; box-shadow:0 0 0 2px rgba(22,92,75,.1); }
.poster-upload-notice { margin-bottom:14px; }
.poster-analysis { min-height:20px; margin-top:8px; padding:8px 10px; border-radius:8px; font-size:.86rem; }
.poster-analysis:empty { display:none; }
.poster-analysis.busy { color:#315a8a; background:#edf4fb; }
.poster-analysis.found { color:#14513f; background:#e6f5ef; font-weight:700; }
.poster-analysis.neutral { color:#6b5730; background:#fff5dc; }
@media (max-width:720px){.item:has(.poster-thumb){grid-template-columns:54px minmax(0,1fr)}.poster-thumb{width:48px;height:68px}.item:has(.poster-thumb) .item-actions{grid-column:1/-1}}

@keyframes ticker-center {
  0% { transform:translateX(0); }
  35%,65% { transform:translateX(var(--ticker-center)); }
  100% { transform:translateX(var(--ticker-distance,-900px)); }
}

@keyframes ticker-center-blink {
  0% { transform:translateX(0); opacity:1; }
  35%,45%,55%,65% { transform:translateX(var(--ticker-center)); opacity:1; }
  40%,50% { transform:translateX(var(--ticker-center)); opacity:.18; }
  100% { transform:translateX(var(--ticker-distance,-900px)); opacity:1; }
}

.room-strip {
  box-sizing: border-box;
  height: var(--agenda-height, 116px);
  padding-top: 8px;
  overflow: hidden;
}

.agenda-viewport {
  position: relative;
  height: 76px;
  overflow: hidden;
}

.agenda-page {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity .65s ease-in-out;
}

.agenda-page-next { opacity: 0; }
.agenda-page-out { opacity: 0; }
.agenda-page-next.agenda-page-in { opacity: 1; }

.room-row { padding: 2px 0; }

.poster-layer {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 1.2s ease-in-out;
}

.poster-layer-next { opacity: 0; }
.poster-layer-out { opacity: 0; }
.poster-layer-next.poster-layer-in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .agenda-page, .poster-layer { transition: none; }
}

.room-row {
  color: var(--screen-white);
  border-top-color: rgba(255,255,255,.24);
}

.room-row span:last-child {
  color: var(--screen-white);
}

/* Een bijeenkomst die al gestart is wordt geel */
.room-row.started,
.room-row.started span,
.room-row.started span:last-child {
  color: var(--screen-yellow);
}

/* Posters blijven volledig beeldvullend */
.poster-image {
  object-fit: cover;
  background: transparent;
}

/* Teller hoort niet op de werkelijke schermen zichtbaar te zijn */
.poster-count {
  display: none !important;
}

/* Screen layout v1.0 refinement */
.display { display:flex !important; flex-direction:column; }
.screen-info-bar { position:relative !important; top:auto !important; left:auto !important; right:auto !important; flex:0 0 auto; border-radius:0 !important; }
.weather-warning { position:relative !important; top:auto !important; left:auto !important; right:auto !important; flex:0 0 auto; border-radius:0 !important; }
.poster-stage { flex:1 1 auto; min-height:0; }
.poster-image { width:100%; height:100%; object-fit:fill !important; }
.ticker, .room-strip { flex:0 0 auto; }
.poster-count { display:none !important; }
.duration-field { display:flex; align-items:center; gap:8px; }
.duration-field input { max-width:90px; }
.duration-field span { color:var(--muted); font-size:.85rem; }
.duration-inline { display:inline-flex; align-items:center; gap:5px; padding:5px 7px; border:1px solid var(--line); border-radius:9px; background:white; font-size:.75rem; color:var(--muted); }
.duration-inline input { width:54px; border:0; border-bottom:1px solid #bac9c3; padding:2px 3px; text-align:center; color:var(--ink); background:transparent; }
.duration-inline b { font-weight:650; }
.poster-title { color:#167052; }
.duration-inline.deviation { color:#852b24; background:#f8dfdc; border-color:#e7b5af; }
.duration-inline.deviation input { color:#852b24; border-bottom-color:#c97870; }
.poster-groups { display:grid; gap:10px; }
.poster-group { border:1px solid var(--line); border-radius:10px; background:#f8fbfa; overflow:hidden; }
.poster-group > summary { cursor:pointer; padding:11px 13px; font-weight:750; }
.poster-group > .item-list { padding:0 10px 10px; }
.rain-hours { display:grid; grid-template-columns:repeat(4,minmax(48px,1fr)); gap:5px; width:100%; }
.rain-hours > span { display:grid; text-align:center; padding:2px 4px; border-radius:6px; background:rgba(255,255,255,.08); }
.screen-info-bar .rain-hours > span + span { border-left:0; }
.rain-hours small { font-size:.62em; opacity:.8; }
.rain-hours b { font-size:.72em; white-space:nowrap; }
.rain-hours .wet { background:rgba(82,168,204,.25); color:#dff6ff; }
.target-actions{display:flex;gap:8px;margin:0 0 8px}.item[draggable="true"]{cursor:grab}.item[draggable="true"].is-dragging{opacity:.45;outline:2px dashed #176b59}
.dm-poster-extra{border:1px solid #cfdbd7;border-radius:12px;padding:0!important;overflow:hidden}.dm-poster-extra>summary{cursor:pointer;font-weight:800;padding:12px 14px;color:#164f43}.dm-poster-extra>.form-grid{padding:0 14px 14px}