/* slides.css — Presentation editor styles */

/* Editor layout */
.slides-editor {
  display: flex;
  height: 100%;
  overflow: hidden;
}

/* Slide panel (left sidebar) */
.slide-panel {
  width: 200px;
  background: var(--color-surface-0);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--space-2);
  gap: var(--space-2);
}

@media (min-width: 2560px) {
  .slide-panel { width: 240px; }
}

.slide-thumbnail {
  position: relative;
  aspect-ratio: 16/9;
  background: white;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 1px 4px oklch(0 0 0 / 0.1);
  transition: border-color var(--transition-fast);
}

.slide-thumbnail:hover {
  border-color: var(--color-border);
}

.slide-thumbnail.active {
  border-color: var(--color-primary);
}

.slide-thumbnail-number {
  position: absolute;
  bottom: 2px;
  left: 4px;
  font-size: 0.625rem;
  color: var(--color-text-muted);
}

.slide-panel-actions {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
}

/* Canvas workspace */
.slides-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Toolbar */
.slides-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-0);
}

.slides-toolbar .toolbar-group {
  display: flex;
  gap: 2px;
  padding: 0 var(--space-2);
  border-right: 1px solid var(--color-border);
}

.slides-toolbar .toolbar-group:last-child {
  border-right: none;
}

/* Canvas area */
.canvas-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-0);
  overflow: hidden;
  padding: var(--space-4);
}

/* Slide canvas (16:9 at 960x540) */
.slide-canvas {
  position: relative;
  width: 960px;
  height: 540px;
  background: white;
  box-shadow: 0 4px 24px oklch(0 0 0 / 0.12);
  border-radius: 2px;
  overflow: hidden;
  transform-origin: center center;
}

/* Slide elements */
.slide-element {
  position: absolute;
  cursor: move;
  user-select: none;
}

.slide-element.selected {
  outline: 2px solid var(--color-primary);
}

/* Resize handles */
.resize-handles {
  position: absolute;
  inset: -4px;
  pointer-events: none;
}

.resize-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: white;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  pointer-events: all;
}

.resize-handle.nw { top: 0; left: 0; cursor: nwse-resize; }
.resize-handle.n  { top: 0; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle.ne { top: 0; right: 0; cursor: nesw-resize; }
.resize-handle.e  { top: 50%; right: 0; transform: translateY(-50%); cursor: ew-resize; }
.resize-handle.se { bottom: 0; right: 0; cursor: nwse-resize; }
.resize-handle.s  { bottom: 0; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle.sw { bottom: 0; left: 0; cursor: nesw-resize; }
.resize-handle.w  { top: 50%; left: 0; transform: translateY(-50%); cursor: ew-resize; }

/* Text box element */
.slide-textbox {
  padding: 8px;
  overflow: hidden;
  outline: none;
}

.slide-textbox:empty::before {
  content: "Click to add text";
  color: oklch(0.7 0 0);
}

/* Shape element (SVG container) */
.slide-shape {
  width: 100%;
  height: 100%;
}

.slide-shape svg {
  width: 100%;
  height: 100%;
}

/* Image element */
.slide-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Alignment guides */
.alignment-guide {
  position: absolute;
  background: oklch(0.6 0.2 25);
  z-index: 100;
  pointer-events: none;
}

.alignment-guide.horizontal {
  height: 1px;
  left: 0;
  right: 0;
}

.alignment-guide.vertical {
  width: 1px;
  top: 0;
  bottom: 0;
}

/* Drag-select marquee */
.selection-marquee {
  position: absolute;
  border: 1px dashed var(--color-primary);
  background: oklch(0.7 0.1 260 / 0.1);
  z-index: 50;
  pointer-events: none;
}

/* Property panel (right sidebar) */
.property-panel {
  width: 240px;
  background: var(--color-surface-0);
  border-left: 1px solid var(--color-border);
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (max-width: 1440px) {
  .property-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 40;
    box-shadow: -4px 0 16px oklch(0 0 0 / 0.08);
  }
}

.property-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.property-group label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.property-group input,
.property-group select {
  font-size: 0.8125rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface-0);
}

/* Speaker notes */
.speaker-notes {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-0);
  transition: height var(--transition-fast);
}

.speaker-notes.collapsed {
  height: 32px;
  overflow: hidden;
}

.speaker-notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.speaker-notes textarea {
  width: 100%;
  height: 100px;
  border: none;
  background: transparent;
  resize: vertical;
  padding: var(--space-2) var(--space-3);
  font-size: 0.8125rem;
  outline: none;
}

/* Presentation mode */
.presentation-mode {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.presentation-slide {
  position: relative;
  background: white;
  aspect-ratio: 16/9;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
}

.presentation-counter {
  position: fixed;
  bottom: 12px;
  right: 16px;
  font-size: 0.875rem;
  color: oklch(0.7 0 0);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 10000;
}

.presentation-mode:hover .presentation-counter {
  opacity: 1;
}

.presentation-blank {
  position: fixed;
  inset: 0;
  z-index: 10001;
}

.presentation-blank.black { background: black; }
.presentation-blank.white { background: white; }

/* Background picker dialog */
.background-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.background-picker .color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 2px solid var(--color-border);
  cursor: pointer;
}

.background-picker .color-swatch.selected {
  border-color: var(--color-primary);
}

/* Slide context menu */
.slide-context-menu {
  position: fixed;
  z-index: 60;
  min-width: 160px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px oklch(0 0 0 / 0.12);
  backdrop-filter: blur(20px);
  padding: var(--space-1);
}

.slide-context-menu-item {
  padding: var(--space-1) var(--space-3);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8125rem;
  transition: background var(--transition-fast);
}

.slide-context-menu-item:hover {
  background: var(--color-surface-1);
}

/* Dark mode */
.dark .slide-canvas {
  background: oklch(0.2 0 0);
}

.dark .slide-thumbnail {
  background: oklch(0.2 0 0);
}

.dark .presentation-slide {
  background: oklch(0.2 0 0);
}

/* Print styles for PDF export */
@media print {
  @page {
    size: landscape;
    margin: 0;
  }

  /* Hide all editor UI */
  .slides-toolbar,
  .slide-panel,
  .property-panel,
  .speaker-notes-header,
  .slide-panel-actions,
  .presentation-mode,
  .background-picker,
  .slide-context-menu,
  .alignment-guide,
  .selection-marquee,
  .resize-handles {
    display: none !important;
  }

  /* Reset editor layout */
  .slides-editor {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  .slides-editor__workspace {
    display: block !important;
    overflow: visible !important;
  }

  .slides-editor__canvas-area {
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Full-page slides */
  .slide-canvas {
    width: 100vw !important;
    height: 100vh !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transform: none !important;
    page-break-after: always;
    break-after: page;
    overflow: hidden !important;
    position: relative !important;
  }

  .slide-canvas:last-of-type {
    page-break-after: auto;
    break-after: auto;
  }

  /* Elements print at full fidelity */
  .slide-element {
    cursor: default !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .slide-element.selected {
    outline: none !important;
  }

  /* Speaker notes: show below slide in print */
  .speaker-notes {
    height: auto !important;
    overflow: visible !important;
    border-top: 1px solid #ccc;
    padding: 0.5rem 1rem;
    font-size: 10pt;
    color: #333;
    page-break-inside: avoid;
  }

  .speaker-notes.collapsed {
    height: auto !important;
    overflow: visible !important;
  }

  .speaker-notes textarea {
    display: none !important;
  }

  .speaker-notes::after {
    content: attr(data-notes);
    white-space: pre-wrap;
    display: block;
  }

  /* Ensure backgrounds print */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}