/* === Tab Rail (vertical) === */
/* reset old #tabRail rules */
#tabRail{}
#tabRail .tab-list{ display:flex; flex-direction:column; gap:6px; max-height: 600px; overflow:auto; }
#tabRail .tab-item{
  display:flex; align-items:center; justify-content:space-between;
  padding: 6px 8px; min-width: 120px;
  background: rgba(0,0,0,0.06); color:#111; border-radius:8px; border:1px solid rgba(0,0,0,0.12);
  cursor:pointer; user-select:none;
}
html.dark #tabRail .tab-item{ background: rgba(255,255,255,0.06); color:#f9fafb; border-color: rgba(255,255,255,0.14); }
#tabRail .tab-item.active{ outline: 2px solid #ffffff; }
#tabRail .tab-item .tab-label{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width: 90px; }
#tabRail .tab-item .tab-close{ margin-left:8px; opacity:0.7; }
#tabRail .tab-item .tab-close:hover{ opacity:1; }
#tabRail .tab-add{
  padding: 6px 8px; border-radius:8px; border:1px dashed rgba(0,0,0,0.25); background: transparent;
}
html.dark #tabRail .tab-add{ border-color: rgba(255,255,255,0.35); color:#e5e7eb; }


/* Make viewers transparent when images are loaded */
#imageWrapper.has-images { background: transparent !important; background-color: transparent !important; }
#sideBySideContainer.has-images { background: transparent !important; background-color: transparent !important; }

.badge {
  position: absolute;
  top: 12px;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 9999px;
  background: rgba(31,41,55,0.85);
  color: #e5e7eb;
  pointer-events: none;
  user-select: none;
}
.btn {
  background-color: #344955;
  color: white;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  transition: background-color 0.3s ease;
}
.btn:hover { background-color: #F9AA33; }
.after-img { clip-path: inset(0 50% 0 0); z-index: 2; }
canvas { position: absolute; top: 0; left: 0; z-index: 10; pointer-events: auto; user-select: none; }


/* === Theme V2: Light overrides === */
html.light body { background-color: #f3f4f6; color: #111827; }
html.light nav { background-color: #ffffff !important; }
html.light footer { background-color: #f3f4f6 !important; color: #4b5563 !important; }
html.light .btn { background-color: #16b423; color: #fff; }

/* Override common Tailwind utility backgrounds in light mode */
html.light .bg-gray-900 { background-color: #f3f4f6 !important; }
html.light .bg-gray-800 { background-color: #ffffff !important; }
html.light .bg-gray-700 { background-color: #ffffff !important; }

/* Borders */
html.light .border-gray-600 { border-color: #d1d5db !important; }
html.light .border-gray-700 { border-color: #d1d5db !important; }

/* Text */
html.light .text-gray-100 { color: #111827 !important; }
html.light .text-gray-200 { color: #1f2937 !important; }
html.light .text-gray-300 { color: #513737 !important; }
html.light .text-gray-400 { color: #4b5563 !important; }
html.light .text-gray-500 { color: #6b7280 !important; }

/* Tool wrapper specific */
html.light #imageWrapper:not(.has-images) { background-color: #ffffff !important; border-color: #d1d5db !important; }

#beforeImg,
#afterImg {
  width: 100%;
  height: 100%;
  object-fit: contain; /* gebruik 'cover' i.p.v. 'contain' als je geen letterboxing wilt */
}

/* Dark mode (default) — nav links rechtsboven */
#navMenu a {
  color: #93c5fd;      /* bv. Tailwind blue-300 */
}
#navMenu a:hover {
  color: #bfdbfe;      /* bv. Tailwind blue-200 */
}

/* Light-mode override (html.light) */
html.light #navMenu a {
  color: #1f2937;      /* gray-800 voor light mode */
}
html.light #navMenu a:hover {
  color: #fa0d0d;      /* blue-600 hover in light mode */
}

/* Flush element to the viewport's left edge */
.edge-left{ margin-left: calc(50% - 50vw); padding-left: 1rem; }

/* Larger square buttons */
.mode-btn-square{
  width: 4rem; height: 4rem;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1rem;
  border-radius: 0.75rem;
}

/* Side-by-side overlay canvas */
#sideBySideContainer { position: relative; }
#sideBySideContainer img { display:block; width:100%; height:100%; object-fit:contain; }
#drawCanvasSide { position:absolute; top:0; left:0; z-index:10; pointer-events:auto; user-select:none; }

/* Ensure hidden wins for containers */
#imageWrapper.hidden, #sideBySideContainer.hidden { display: none !important; }
.no-clip { clip-path: none !important; }

/* Active mode button styling */
.mode-active { box-shadow: 0 0 0 2px #3b82f6 inset; }

/* === Side-by-Side overlay positioning (stable) === */
#sideBySideContainer { position: relative; }
#sideBySideContainer .canvas-container { position: absolute; top:0; left:0; right:0; bottom:0; z-index: 10; }
/* Let Fabric manage its own canvas pixels; do not force 100% on canvas */
#sideBySideContainer img { pointer-events: none; }



/* PATCH: reserve 14rem rechts voor beschrijvingspaneel binnen #imageWrapper */
#imageWrapper { position: relative; }
#imageWrapper #beforeImg,
#imageWrapper #afterImg,
#imageWrapper #drawCanvas {
  right: 14rem !important; /* override 'inset-0' */
}
#imageWrapper .badge.right-3 { right: calc(0.75rem + 14rem) !important; } /* verplaats 'After' badge mee */
#imageWrapper .badge.left-3 { left: 0.75rem !important; }

/* Optioneel: zorg dat canvas wrapper zelf ook ruimte respecteert (fabric kan wrapper toevoegen) */
#imageWrapper .canvas-container {
  right: 14rem !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
}


/* PATCH V2: paneel buiten de foto; reset eerdere right:14rem */
#imageWrapper #beforeImg,
#imageWrapper #afterImg,
#imageWrapper #drawCanvas,
#imageWrapper .canvas-container {
  right: 0 !important;
}

/* Plaats #descPanel als absolute sibling rechts van #imageWrapper */
#viewerFloat { position: relative; }
#viewerFloat #descPanel { display: flex; flex-direction: column; height: 100% !important; display: flex; flex-direction: column;
  position: absolute;
  top: 0;
  left: calc(100% + 12px); /* 12px marge rechts van de foto */
  height: 100%;
  width: 18rem; /* w-56 */
  z-index: 40;
}


/* PATCH V4: Flex layout, foto gecentreerd, paneel buiten beeld (rechts), geen overlap */
#viewerFloat {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}
#viewerFloat #descPanel { display: flex; flex-direction: column; height: 100% !important; display: flex; flex-direction: column;
  position: static;
  width: 18rem;           /* vast paneel */
  flex: 0 0 18rem;
}
#viewerFloat #imageWrapper {
  /* breedte: min(viewport minus paneel + marge, max-content) */
  width: min(calc(100vw - 16rem), 64rem);
  min-width: 320px;
  /* centreer het beeldgebied binnen de totale rij */
  margin-left: auto;
  margin-right: auto;
}
/* reset overlay-forcing */
#imageWrapper #beforeImg,
#imageWrapper #afterImg,
#imageWrapper #drawCanvas,
#imageWrapper .canvas-container { right: 0 !important; }

/* PATCH V5: center image by balancing with a left spacer equal to the right panel width */
#viewerFloat {
  justify-content: center; /* center [spacer + imageWrapper + panel] */
}
#viewerFloat .desc-spacer {
  flex: 0 0 18rem;
  width: 18rem;
  height: 1px; /* minimal, height grows not needed */
}

#viewerFloat #descriptionInput { flex: 1 1 auto; }

/* PATCH V8: textarea to full bottom; pin counter at bottom */
#viewerFloat #descPanel { position: relative; padding-bottom: 18px; } /* leave space for counter */
#viewerFloat #descPanel > div:last-child {
  position: absolute;
  bottom: 6px;
  left: 12px;
  right: 12px;
}
#viewerFloat #descriptionInput { flex: 1 1 auto; min-height: 0; height: auto; }


/* === V9: Larger mode buttons with stacked labels (scoped) === */
#viewModeToolbar .mode-btn-square{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.6rem 0.85rem;
  line-height: 1;
}
#viewModeToolbar .mode-btn-square svg{ width: 40px; height: 40px; }
#viewModeToolbar .mode-btn-square .mode-caption{
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: .01em;
}
#viewModeToolbar .mode-btn-square.mode-active{
  box-shadow: 0 0 0 2px rgba(59,130,246,0.55) inset;
  border-radius: 0.6rem;
}



/* === V11: Icons-only buttons 2x, labels below (outside) === */
#viewModeToolbar .flex.items-center.gap-3 > .mode-item{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
}

#viewModeToolbar .mode-item .mode-btn-square{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.1rem;      /* enlarge click zone a bit as well */
  line-height: 1;
}

#viewModeToolbar .mode-item .mode-btn-square svg{
  width: 56px;                  /* 2x from ~28px */
  height: 56px;
}

#viewModeToolbar .mode-item .mode-caption-outside{
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}



/* Foto-grootte: optionele brede weergave bij grotere schaal in side-by-side */
#viewerFloat.wide-view #imageWrapper,
#viewerFloat.wide-view #sideBySideContainer{
  max-width: min(90vw, 1600px) !important;
}

/* === V14: full-bleed wide-view === */
#viewerFloat.wide-view{ width:95vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); max-width:1800px; }
#viewerFloat.wide-view #imageWrapper, #viewerFloat.wide-view #sideBySideContainer{ width:100% !important; max-width:none !important; }
#viewerFloat.wide-view .badge.left-3{ left:.75rem !important; } #viewerFloat.wide-view .badge.right-3{ right:.75rem !important; }


/* === V15: Center the wide-view exactly (avoid left shift) === */
#viewerFloat.wide-view{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(95vw, 1800px);
  margin-left: 0 !important;
  margin-right: 0 !important;
}




/* Anti-flicker: verberg dock tot JS 'm gepositioneerd heeft */
#controlsDockLeft { visibility: hidden; opacity: 0; }
.has-controls-dock-left #controlsDockLeft { visibility: visible; opacity: 1; transition: opacity 120ms ease-out; }
@media (prefers-reduced-motion: reduce){
  .has-controls-dock-left #controlsDockLeft { transition: none; }
}


/* === Left Vertical Controls Dock === */
#controlsDockLeft{
  position: fixed;
  top: var(--dock-top, 0px);
  left: 0;
  z-index: 90;
  pointer-events: none; /* restore on inner */
}
#controlsDockLeftInner{
  pointer-events: auto;
  margin-left: 8px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(255, 0, 0, 0.12);
}
.dark #controlsDockLeftInner{
  background: rgba(29, 99, 250, 0.88);
  border-color: rgba(255, 0, 0, 0.08);
}

#controlsDockLeft #controlsStack{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Stack the mode button group vertically and center each item */
#controlsDockLeft .flex.items-center.gap-3{
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#controlsDockLeft .mode-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Vertical slider layout */
#controlsDockLeft .vertical-dock{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
#controlsDockLeft .scale-rail{
  width: 28px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#controlsDockLeft .vertical-range{
  transform: rotate(-90deg);
  width: 160px;  /* after rotation this is visual height */
  height: 28px;
}

/* Don't cover content: add left padding equal to dock width */
.has-controls-dock-left body > main{
  padding-left: calc(var(--dock-left-w, 80px) + 16px);
}



/* === V25: place #singleControls (before/after toggle) in the left dock stack === */
#controlsDockLeft #singleControls{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
#controlsDockLeft #singleControls .btn-group{
  display: flex;
  gap: 6px;
}



/* === V27: Center contents horizontally in left dock; keep dock size unchanged === */
#controlsDockLeftInner,
#controlsDockLeft #controlsStack{
  align-items: center;           /* center whole stack on X-axis */
}

#controlsDockLeft .mode-item{
  align-items: center;           /* button+label centered */
  text-align: center;
}

#controlsDockLeft #singleControls{
  align-items: center;           /* vertical stack centered */
}
#controlsDockLeft #singleControls .btn-group{
  justify-content: center;       /* center the two buttons horizontally */
}

#controlsDockLeft .vertical-dock{
  align-items: center;           /* center label, slider, output */
  text-align: center;
}
#controlsDockLeft .vertical-dock label,
#controlsDockLeft .vertical-dock #photoScaleOut{
  display: block;
  text-align: center;
  width: auto;                   /* do not stretch, avoid width changes */
}


/* === V28: Force horizontal centering of contents inside the left dock === */
#controlsDockLeftInner { align-items: center !important; }
#controlsDockLeft #controlsStack { align-items: center !important; }

#controlsDockLeft .mode-item {
  align-items: center !important;
  text-align: center !important;
}

#controlsDockLeft #singleControls {
  align-items: center !important;
  text-align: center !important;
}
#controlsDockLeft #singleControls .btn-group {
  justify-content: center !important;
}

#controlsDockLeft .vertical-dock {
  align-items: center !important;
  text-align: center !important;
}
#controlsDockLeft .vertical-dock label,
#controlsDockLeft .vertical-dock #photoScaleOut {
  display: block;
  text-align: center !important;
  width: auto !important;
}


/* === V47: Enforce two simple visibility rules via root mode class === */
/* Rule 1: Side-by-Side => hide the size slider */
.mode-sidebyside #sizeControls { display: none !important; }
/* (Optional) show slider in other modes explicitly */
.mode-slider #sizeControls,
.mode-single #sizeControls { display: flex !important; }

/* Rule 2: Single => show Before/After; hide otherwise */
.mode-single #singleControls { display: flex !important; }
:not(.mode-single) #singleControls { display: none !important; }



/* === V48: Larger default Side-by-Side frame (restored) === */
.mode-sidebyside #sideBySideContainer{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(95vw, 1400px) !important;
  max-width: none !important;
  height: 600px !important;
}
.mode-sidebyside #sideBySideContainer .grid{ height: 100% !important; }
.mode-sidebyside #drawCanvasSide{ width: 100% !important; height: 100% !important; }



/* === V51: Single controls dock row & visibility rules === */
#controlsDockLeft #singleControls{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
}
#controlsDockLeft #singleControls label{ margin: 0; }

/* Root-class visibility fallback (works even if JS toggles elsewhere) */
.mode-sidebyside #sizeControls { display: none !important; }
.mode-single #singleControls { display: flex !important; }
:not(.mode-single) #singleControls { display: none !important; }


/* === V33: Nudge "Foto-grootte" controls 2px to the left === */
#controlsDockLeft #sizeControls{
  transform: translateX(-8px);
}




/* === Tab Rail position relative to left dock === */
:root { --tab-rail-gap: 80px; --tab-rail-w: 140px; }

/* Place the rail ~80px to the right of the dock; align vertically with dock top */
.has-controls-dock-left #tabRail{
  position: fixed;
  left: calc(var(--dock-left-w, 80px) + var(--tab-rail-gap, 80px));
  top: var(--dock-top, 0px);
  z-index: 89; /* below dock (z=90), above content */
  width: var(--tab-rail-w, 140px);
}

/* Increase left padding to make space for the tab rail (prevents overlap) */
.has-controls-dock-left body > main{
  padding-left: calc(var(--dock-left-w, 80px) + var(--tab-rail-gap, 80px) + var(--tab-rail-w, 140px) + 16px);
}

/* Responsive: on narrow screens, fall back to inline flow */
@media (max-width: 1024px){
  .has-controls-dock-left #tabRail{
    position: static;
    width: auto;
  }
  .has-controls-dock-left body > main{
    padding-left: calc(var(--dock-left-w, 80px) + 16px);
  }
}



/* Override: content padding should only reserve for the left dock, not the tab rail */
.has-controls-dock-left body > main{
  padding-left: calc(var(--dock-left-w, 80px) + 16px) !important;
}



/* Sticky Tab Rail like the dock (independent "dock" next to it) */
:root { --tab-rail-gap: 80px; --tab-rail-w: 140px; }

#tabRail{
  position: fixed;
  left: calc(var(--dock-left-w, 80px) + var(--tab-rail-gap, 80px));
  top: var(--dock-top, 0px);
  z-index: 89;
  width: var(--tab-rail-w, 140px);
  visibility: hidden;
  opacity: 0;
}

/* Show only once the dock has been measured/positioned */
.has-controls-dock-left #tabRail{
  visibility: visible;
  opacity: 1;
  transition: opacity 120ms ease-out;
}

@media (prefers-reduced-motion: reduce){
  .has-controls-dock-left #tabRail{ transition: none; }
}



/* === Right Vertical Controls Dock (mirrors left) === */
#controlsDockRight{
  position: fixed;
  top: var(--dock-top, 0px);
  right: 0;
  z-index: 90;
  pointer-events: none; /* inner handles interaction */
  visibility: hidden; opacity: 0;
}
.has-controls-dock-right #controlsDockRight{ visibility: visible; opacity: 1; transition: opacity 120ms ease-out; }
@media (prefers-reduced-motion: reduce){
  .has-controls-dock-right #controlsDockRight{ transition: none; }
}
#controlsDockRightInner{
  pointer-events: auto;
  margin-right: 8px;
  padding: 10px 8px;
  border-radius: 12px;
  background: rgba(31,41,55,0.9); /* subtle dark glass */
  color: #e5e7eb;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  display:flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 280px;
}

/* Tab rail lives inside right dock; reset any global fixed rules */
#controlsDockRight #tabRail{
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Make tab list fit and scroll inside the dock */
#controlsDockRight #tabRail .tab-list{
  max-height: min(60vh, 640px);
  overflow:auto;
}

/* --- JS Bubble Tooltip (big) --- */
.ui-tip-bubble{
  position:absolute;
  z-index: 2147483646;
  background:#F9AA33;
  color:#fff;
  padding:16px 18px;
  font-size:24px;
  line-height:1.25;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
  display:none;
  transition:opacity 120ms ease;
  pointer-events:none;
}
.dark .ui-tip-bubble{
  background:#0f172a;
  color:#e5e7eb;
  box-shadow:0 10px 30px rgba(0,0,0,0.55);
}


/* --- Playful SVG hover animations (CSS-only) --- */
@keyframes iconSlideX { from { transform: translateX(-6px); } to { transform: translateX(6px); } }
@keyframes iconPulse   { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes iconBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(0.98); } }
@keyframes iconFocus   { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #modeSliderBtn:hover svg *, 
  #modeSideBtn:hover svg *, 
  #modeSingleBtn:hover svg *,
  #viewModeToolbar .mode-btn-square:hover svg * { animation: none !important; }
}

/* Slider: move the vertical divider (line) and pulse the knob (circle). */
#modeSliderBtn:hover svg line,
#viewModeToolbar .mode-item .mode-btn-square#modeSliderBtn:hover svg line {
  animation: iconSlideX 1200ms ease-in-out infinite alternate;
  transform-origin: center;
}
#modeSliderBtn:hover svg circle,
#viewModeToolbar .mode-item .mode-btn-square#modeSliderBtn:hover svg circle {
  animation: iconPulse 1200ms ease-in-out infinite;
  transform-origin: center;
}

/* Side-by-side: two panels breathe alternately. */
#modeSideBtn:hover svg rect:nth-of-type(1),
#viewModeToolbar .mode-item .mode-btn-square#modeSideBtn:hover svg rect:nth-of-type(1) {
  animation: iconBreathe 1500ms ease-in-out infinite;
  transform-origin: center;
}
#modeSideBtn:hover svg rect:nth-of-type(2),
#viewModeToolbar .mode-item .mode-btn-square#modeSideBtn:hover svg rect:nth-of-type(2) {
  animation: iconBreathe 1500ms ease-in-out 750ms infinite;
  transform-origin: center;
}

/* Single: subtle focus pulse of the frame rect. */
#modeSingleBtn:hover svg rect,
#viewModeToolbar .mode-item .mode-btn-square#modeSingleBtn:hover svg rect {
  animation: iconFocus 1400ms ease-in-out infinite;
  transform-origin: center;
}

/* end icon animations */



/* --- Surgical light/dark fixes (only the needed parts) --- */

/* Light mode: make dock icons visible (force dark strokes on the SVGs) */
html:not(.dark) #modeSliderBtn svg,
html:not(.dark) #modeSideBtn svg,
html:not(.dark) #modeSingleBtn svg { stroke: #ffffff !important; }

/* Light mode: title input + description area should be light */
html:not(.dark) #projectTitle {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #d1d5db !important;
}
html:not(.dark) #projectTitle::placeholder { color: #6b7280; }

html:not(.dark) #descPanel {
  background: rgba(255,255,255,0.92) !important;
  border-color: #e5e7eb !important;
}
html:not(.dark) #descriptionInput {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #d1d5db !important;
}
html:not(.dark) #descriptionInput::placeholder { color: #6b7280; }

/* Dark mode: ensure left dock buttons are dark (in case anything forced them white) */
.dark #viewModeToolbar .mode-item .mode-btn-square {
  background-color: #513737 !important;   /* gray-700 */
  border-color: #4b5563 !important;       /* gray-600 */
  color: #e5e7eb !important;              /* gray-200 for icon strokes via currentColor */
}



/* --- User color matrix overrides (scoped) --- */

/* A. Linker dock */
/* Light: dock background transparent */
html:not(.dark) #viewModeToolbar { background: transparent !important; }
/* Light: knop-rand zwart */
html:not(.dark) #viewModeToolbar .mode-item .mode-btn-square { border-color: #000 !important; }
/* Light: bijschrift onder iconen zwart */
html:not(.dark) #viewModeToolbar .mode-item .mode-caption-outside { color: #000 !important; }
/* Dark: icoon-kleur wit */
.dark #modeSliderBtn svg,
.dark #modeSideBtn svg,
.dark #modeSingleBtn svg { stroke: #ffffff !important; }

/* B. Titelveld bovenin */
/* Dark: zelfde als nav (nav is bg-gray-800 -> #1f2937), tekst/placeholder wit, rand transparant */
.dark #projectTitle {
  background: #1f2937 !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
.dark #projectTitle::placeholder { color: #ffffff !important; }

/* C. Rechter tekstpaneel (beschrijving) */
/* Dark: paneel-achtergrond gelijk aan nav */
.dark #descPanel { background: #1f2937 !important; }
/* Dark: tekstvak-achtergrond gelijk aan body (bg-gray-900 -> #111827); tekst/placeholder wit */
.dark #descriptionInput,
.dark .desc-panel textarea {
  background: #111827 !important;
  color: #ffffff !important;
}
.dark #descriptionInput::placeholder,
.dark .desc-panel textarea::placeholder { color: #ffffff !important; }

/* (We laten alle 'laat zo' items met rust) */



/* -- Right dock clarity v2 -- */
#controlsDockRightInner{ max-width: 360px; }
#controlsDockRightInner .dock-section{ margin-bottom: 10px; }
#controlsDockRightInner .dock-header{ display:flex; align-items:center; justify-content:space-between; }
#controlsDockRightInner .dock-title{ font-weight:600; font-size:0.95rem; margin:4px 0; }
#controlsDockRightInner .dock-help{ font-size: 0.75rem; opacity: 0.8; margin: 2px 0 6px 0; }
#controlsDockRightInner .tab-list{ display:flex; flex-direction:column; gap:6px; }
#controlsDockRightInner .tab-item{ display:flex; align-items:center; gap:8px; justify-content:space-between; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); }
#controlsDockRightInner .tab-item.active{ outline:2px solid rgba(255,255,255,0.25); }
#controlsDockRightInner .tab-badge{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:9999px; font-size:12px; background: rgba(255,255,255,0.15); }
#controlsDockRightInner .tab-label{ flex:1; text-align:left; }
#controlsDockRightInner .tab-close{ margin-left:8px; cursor:pointer; }
#controlsDockRightInner .tab-add{ padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); }
#controlsDockRightInner .tab-add:hover{ filter: brightness(1.05); }

/* Notes section embeds the existing #descPanel */
#controlsDockRightInner #descPanel{ position: static !important; inset: unset !important; width: 100% !important; left:auto !important; top:auto !important; }
#controlsDockRightInner #descPanel label{ color: #7a7a7a; }
#controlsDockRightInner #descPanel textarea{ width: 100%; min-height: 100px; }


/* -- Dock visibility override -- */
#controlsDockRight { visibility: visible; opacity: 1; }


/* -- Notes always in right dock -- */
#controlsDockRightInner #descPanel { position: static !important; width: 100% !important; left:auto !important; top:auto !important; }


/* === PATCH: Right dock drag & resize handles === */
#controlsDockRightInner{ position: relative; }
.dock__drag-handle{
  -webkit-user-select:none; user-select:none;
  cursor:grab;
  height:32px; line-height:32px;
  padding:0 12px;
  font:500 12px/32px system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:rgba(255,255,255,.85);
  background:linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.10));
  border-bottom:1px solid rgba(255,255,255,.12);
  border-top-left-radius:12px; border-top-right-radius:12px;
}
.dock__drag-handle.is-active{ cursor:grabbing; }
.dock__drag-grip{ letter-spacing:1px; opacity:.7; }

.dock__resize-handle{
  position:absolute; inset:0 auto 0 -6px; /* left edge */
  width:10px; cursor:ew-resize;
  background:transparent;
}


/* === YMAGE SINGLE THEME (no dark/light) === */
:root{
  --bg: #f7f7f7;
  --text: #111111;
  --muted: #ff0000;
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --border: #E5E7EB;
  --accent: #ffffff;
  --accent-600: #E2992E;
  --accent-700: #CC8929;
  --accent-contrast: #FFFFFF;
  --nav-bg: #344955;      /* light grey nav */
  --dock-bg: #344955;     /* dark contrasting dock */
  --dock-border: rgba(0,0,0,0.18);
  --input-bg: #FFFFFF;
  --input-text: #111111;
  --input-placeholder: #50505085;
}

/* Base */
html, body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Nav (light grey) */
nav, .navbar, header#topbar{
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
nav a, nav button, .navbar a{
  color: var(--text) !important;
}
.nav-cta, .btn-primary{
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  border-color: transparent !important;
}
.nav-cta:hover, .btn-primary:hover{ background: var(--accent-600) !important; }
.nav-cta:active, .btn-primary:active{ background: var(--accent-700) !important; }

/* Viewer mode toolbar (dark, contrasting) */
#viewModeToolbar{
  background: var(--dock-bg) !important;
  border: 1px solid var(--dock-border) !important;
  backdrop-filter: none !important;
}
#viewModeToolbar .mode-item .mode-caption-outside{ color: #FFFFFF !important; }
#modeSplitBtn svg, #modeSideBtn svg, #modeSingleBtn svg{ stroke: #FFFFFF !important; }
#viewModeToolbar .mode-item .mode-btn-square{ border-color: rgba(255,255,255,0.35) !important; }

/* Right dock surface (dark, contrasting) */
#controlsDockRightInner{
  background: var(--dock-bg) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--dock-border) !important;
  border-radius: 12px !important;
  overflow: clip;
}
#controlsDockRightInner input, #controlsDockRightInner textarea, #controlsDockRightInner select{
  background: rgba(255,255,255,0.96) !important;
  color: #111111 !important;
  border: 1px solid var(--border) !important;
}
#controlsDockRightInner input::placeholder, #controlsDockRightInner textarea::placeholder{
  color: var(--input-placeholder) !important;
}

/* Project title + Description panel */
#projectTitle{
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
#projectTitle::placeholder{ color: var(--input-placeholder) !important; }

#descPanel{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}
#descriptionInput{
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  border: 1px solid var(--border) !important;
}
#descriptionInput::placeholder{ color: var(--input-placeholder) !important; }

/* Generic cards/panels */
.card, .panel, .tool-card{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* Links */
a{ color: var(--accent) !important; }
a:hover{ color: var(--accent-600) !important; }

/* Hide/remove any leftover toggle */
#modeToggle{ display:none !important; }



/* === YMAGE: orange mode buttons in left dock === */
#viewModeToolbar .mode-item .mode-btn-square{
  background: var(--accent) !important;      /* #F9AA33 */
  color: var(--accent-contrast) !important;  /* white text if any */
  border-color: transparent !important;
}
#viewModeToolbar .mode-item .mode-btn-square:hover{
  background: var(--accent-600) !important;  /* #E2992E */
}
#viewModeToolbar .mode-item .mode-btn-square:active,
#viewModeToolbar .mode-item .mode-btn-square.active,
#viewModeToolbar .mode-item .mode-btn-square[aria-pressed="true"]{
  background: var(--accent-700) !important;  /* #CC8929 */
}
#modeSplitBtn svg, #modeSideBtn svg, #modeSingleBtn svg{ stroke: #FFFFFF !important; }
#viewModeToolbar .mode-item .mode-caption-outside{ color: #FFFFFF !important; }



/* === Floating Single-mode Before/After toggle (fixed at bottom) === */
#singleControlsFloating {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 10000;
  background: rgba(123, 132, 150, 0.92); /* slate-900-ish */
  color: #fff;
  border-radius: 9999px;
  padding: 8px 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  display: none; /* shown only in Single mode via JS */
  gap: 12px;
  align-items: center;
  font: 500 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
#singleControlsFloating label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  margin: 0 4px;
}
#singleControlsFloating input[type="radio"] {
  accent-color: #60a5fa; /* tailwind sky-400-like */
}
@media (max-width: 640px){
  #singleControlsFloating { bottom: 8px; padding: 6px 10px; }
}



/* === Position the Single-mode pill under the LEFT dock stack === */
#controlsDockLeftInner #singleControlsFloating {
  position: static;            /* inherit from dock flow */
  left: auto;
  bottom: auto;
  transform: none;
  margin-top: 6px;
  align-self: stretch;         /* stretch pill width to dock width */
  justify-content: center;     /* center label group inside */
}