/* Slide canvas — SlideRender (.sr-*) + SlideCanvas editor chrome (.sc-*) */

/* ── Renderer (shared: editor, presenter, thumbnails) ── */
.sr-slide {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  flex-shrink: 0;
}
.sr-shape { position: absolute; box-sizing: border-box; }
.sr-textbox { overflow: hidden; }
.sr-text {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  word-wrap: break-word;
  padding: 2px 4px;
}
.sr-text p { margin: 0 0 0.35em; }
/* Explicit list-style: presenter loads Tailwind preflight which resets it. */
.sr-text ul { list-style: disc; }
.sr-text ol { list-style: decimal; }
.sr-text ul, .sr-text ol { margin: 0 0 0.35em; padding-left: 1.2em; }
.sr-valign-top { justify-content: flex-start; }
.sr-valign-middle { justify-content: center; }
.sr-valign-bottom { justify-content: flex-end; }
.sr-image img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.sr-line-svg { width: 100%; height: 100%; display: block; }

/* ── Editor root ── */
#slide-canvas-root {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: var(--bg-secondary, #f5f5f5);
}
.sc-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-viewport { position: relative; }
.sc-editing { cursor: default; }
.sc-editing .sr-shape { cursor: move; }
.sc-editing .sr-shape.sr-textbox .sc-text-editing { cursor: text; }

/* Selection + handles */
.sr-shape.sc-selected { outline: 1.5px solid var(--accent-blue, #079d9d); }
.sc-handles { position: absolute; inset: 0; pointer-events: none; }
.sc-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #fff;
  border: 1.5px solid var(--accent-blue, #079d9d);
  border-radius: 2px;
  pointer-events: auto;
}
.sc-h-nw { left: -5px; top: -5px; cursor: nwse-resize; }
.sc-h-n  { left: calc(50% - 5px); top: -5px; cursor: ns-resize; }
.sc-h-ne { right: -5px; top: -5px; cursor: nesw-resize; }
.sc-h-e  { right: -5px; top: calc(50% - 5px); cursor: ew-resize; }
.sc-h-se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.sc-h-s  { left: calc(50% - 5px); bottom: -5px; cursor: ns-resize; }
.sc-h-sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.sc-h-w  { left: -5px; top: calc(50% - 5px); cursor: ew-resize; }
.sc-h-rotate {
  left: calc(50% - 5px);
  top: -26px;
  border-radius: 50%;
  cursor: grab;
}
.sc-marquee {
  position: absolute;
  border: 1px dashed var(--accent-blue, #079d9d);
  background: rgba(7, 157, 157, 0.08);
  pointer-events: none;
  z-index: 5000;
}

/* Remote-edit flash (Jiva/teammate changed a shape) */
@keyframes sc-flash-kf {
  0% { outline: 2px solid var(--accent-orange, #ffb347); outline-offset: 3px; }
  100% { outline: 2px solid transparent; outline-offset: 3px; }
}
.sr-shape.sc-flash { animation: sc-flash-kf 2s ease-out; }

/* Text editing */
.sc-text-editing {
  outline: 1px dashed var(--accent-blue, #079d9d);
  cursor: text;
  user-select: text;
}

/* Toolbar */
.sc-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--bg-primary, #ffffff);
  flex-wrap: wrap;
}
.sc-tb-group { display: flex; align-items: center; gap: 4px; }
.sc-tb-right { margin-left: auto; }
.sc-tb-sep {
  width: 1px;
  height: 20px;
  background: var(--border, #e5e7eb);
  flex-shrink: 0;
}
/* Not-applicable groups grey out instead of hiding — no layout jumps. */
.sc-tb-group.sc-tb-disabled { opacity: 0.35; pointer-events: none; }
.sc-tb-btn:disabled { opacity: 0.35; cursor: default; }
/* Color input with a glyph label above the swatch (Office-style) so the
   three color wells (text / fill / background) read differently. */
.sc-tb-colorwrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 30px;
  height: 28px;
  padding: 1px 5px 2px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
}
.sc-tb-colorwrap:hover { background: var(--bg-hover, #ececec); }
.sc-tb-colorglyph {
  font-size: 11px;
  line-height: 1;
  color: var(--text-primary, #1a1a1a);
  user-select: none;
}
.sc-tb-colorwrap input[type="color"] {
  width: 20px;
  height: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.sc-tb-colorwrap input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.sc-tb-colorwrap input[type="color"]::-webkit-color-swatch {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}
.sc-tb-btn {
  min-width: 30px;
  height: 28px;
  padding: 0 7px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--text-primary, #1a1a1a);
  cursor: pointer;
  font-size: 14px;
}
.sc-tb-btn:hover { background: var(--bg-hover, #ececec); }
.sc-tb-select, .sc-tb-input {
  height: 28px;
  border: 1px solid var(--border-input, #e5e7eb);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-input, #fcfcfc);
  color: var(--text-primary, #1a1a1a);
  font-size: 12px;
  padding: 0 6px;
}
.sc-tb-select { max-width: 96px; }
.sc-tb-input { width: 46px; }
/* Dropdown menu (align/distribute) */
.sc-menu-popup {
  position: fixed;
  z-index: 3200;
  min-width: 190px;
  padding: 4px;
  background: var(--bg-elevated, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-lg, 0 16px 32px -4px rgba(0,0,0,.18));
  display: flex;
  flex-direction: column;
}
.sc-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--text-primary, #1a1a1a);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.sc-menu-item:hover { background: var(--bg-hover, #ececec); }
.sc-menu-icon { width: 18px; text-align: center; opacity: 0.85; }
.sc-menu-sep { height: 1px; margin: 3px 6px; background: var(--border, #e5e7eb); }
.sc-tb-color {
  width: 30px;
  height: 28px;
  padding: 1px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  cursor: pointer;
}

/* Empty state (UX #4) */
.sc-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
.sc-empty button { pointer-events: auto; }
.sc-empty-title {
  color: var(--text-hint, #9ca3af);
  font-size: 14px;
  margin-bottom: 4px;
}

/* Convert-offer banner on legacy HTML slides */
.sc-convert-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 12px 0;
  padding: 8px 12px;
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: var(--radius-sm, 6px);
  color: var(--text-secondary, #6b7280);
  font-size: 12.5px;
  background: var(--bg-subtle, #f5f5f5);
}

/* P7.D: when the ribbon owns the workspace (desktop ≥900px), the built-in
   toolbar hides — same pattern as the sheet/doc editors. */
@media (min-width: 900px) {
  #slide-canvas-root.sc-ribbon-active .sc-toolbar { display: none; }
}

/* Mobile: view-only (UX #6) */
@media (max-width: 768px) {
  .sc-toolbar { display: none; }
  .sc-editing .sr-shape { pointer-events: none; cursor: default; }
}