/* admin-editing.css — Loaded only when body[data-admin="true"] is present
   Premium inline editing UX for Kychon admins */

/* ═══════════════════════════════════════════════════
   1. HOVER STATES — blue glow on editable elements
   ═══════════════════════════════════════════════════ */

body[data-admin="true"] [data-editable]:hover,
body[data-admin="true"] [data-editable-rich]:hover {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
  border-radius: 4px;
  cursor: pointer;
  transition: box-shadow 200ms ease, border-radius 200ms ease;
}

body[data-admin="true"] [data-editable-image]:hover {
  cursor: pointer;
  position: relative;
}

body[data-admin="true"] [data-editable-image]:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--radius, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 200ms ease;
  pointer-events: none;
}

body[data-admin="true"] [data-editable-image]:hover::before {
  content: "\1F4F7  Replace";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  background: rgba(59, 130, 246, 0.85);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ═══════════════════════════════════════════════════
   2. ACTIVE EDITING — solid blue outline
   ═══════════════════════════════════════════════════ */

body[data-admin="true"] [contenteditable="true"] {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.6);
  border-radius: 4px;
  outline: none;
  background: var(--color-surface, #ffffff);
  color: var(--color-text, #111827) !important;
  caret-color: var(--color-primary, #3b82f6);
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor;
  transition: box-shadow 200ms ease, background 200ms ease;
}

body[data-admin="true"] [contenteditable="true"]::selection,
body[data-admin="true"] [contenteditable="true"] *::selection {
  background: rgba(59, 130, 246, 0.24);
  color: var(--color-text, #111827);
}

body[data-admin="true"] [data-admin-tiptap-active="true"] {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.6);
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.04);
  min-height: 3rem;
}

/* ═══════════════════════════════════════════════════
   3. DRAG-TO-REORDER
   ═══════════════════════════════════════════════════ */

body[data-admin="true"] [data-sortable-group] > [data-sortable-id] {
  position: relative;
}

body[data-admin="true"] [data-sortable-group] > [data-sortable-id]:hover > [data-admin-drag-handle],
body[data-admin="true"] [data-admin-drag-handle]:focus {
  display: inline-flex;
}

body[data-admin="true"] [data-sortable-id][data-admin-dragging="true"] {
  opacity: 0.4;
  transform: scale(0.98);
  transition: opacity 200ms ease, transform 200ms ease;
}

/* ═══════════════════════════════════════════════════
   4. IMAGE UPLOAD PROGRESS
   ═══════════════════════════════════════════════════ */

body[data-admin="true"] [data-editable-image][data-admin-uploading="true"] {
  position: relative;
}

body[data-admin="true"] [data-editable-image][data-admin-uploading="true"] > img,
body[data-admin="true"] [data-editable-image][data-admin-uploading="true"] > * {
  opacity: 0.4;
  transition: opacity 300ms ease;
}

body[data-admin="true"] [data-editable-image][data-admin-uploading="true"]::before {
  content: "";
  display: none;
}

body[data-admin="true"] [data-editable-image][data-admin-uploading="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border: 3px solid rgba(59, 130, 246, 0.2);
  border-top-color: var(--color-primary, #3b82f6);
  border-radius: 50%;
  animation: admin-spin 700ms linear infinite;
  z-index: 10;
  pointer-events: none;
}

@keyframes admin-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* composable-layout: cross-zone drag affordances --- */

/* Empty-zone "drop here" placeholder appears only while admin is dragging. */
body[data-admin-dragging="true"] [data-zone] [data-layout-container]:empty::before,
body[data-admin-dragging="true"] #zone-header > [data-layout-container]:empty::before,
body[data-admin-dragging="true"] #zone-footer > [data-layout-container]:empty::before,
body[data-admin-dragging="true"] #sections:empty::before {
  content: 'Drop a block here';
  display: block;
  padding: 1.5rem;
  border: 2px dashed var(--color-border, #d1d5db);
  border-radius: var(--radius, 0.5rem);
  text-align: center;
  color: var(--color-text-muted, #6b7280);
  margin: 0.5rem 0;
}

/* Highlight zones during drag for clarity. */
body[data-admin-dragging="true"] [data-zone] {
  outline: 1px dashed transparent;
  transition: outline-color 120ms ease;
}
body[data-admin-dragging="true"] [data-zone]:hover {
  outline-color: var(--color-primary, #6366f1);
}

/* admin-content-management: preview mode hides admin-only chrome so admins
   can see the page exactly as members do, then restore by toggling off. */
body[data-admin-preview="true"] [data-admin-bar],
body[data-admin-preview="true"] [data-admin-zone-add-button],
body[data-admin-preview="true"] [data-admin-edit-button] {
  display: none !important;
}