/**
 * Skeleton loaders for /recipes — list cards, edit panel, drag ghost.
 * Uses page tokens from recipes.html :root and dark --dm-* from wesp-zootech-shell.css.
 */

@keyframes dashboard-skeleton-shimmer {
  0% {
    background-position: 240% 0;
  }
  100% {
    background-position: -240% 0;
  }
}

@keyframes dashboard-stat-card-unfold {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --- List skeleton container --- */

.dashboard-list-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 2px 0;
  min-height: 11.5rem;
  transition: opacity 150ms ease;
}

.dashboard-list-skeleton--exit {
  opacity: 0;
  pointer-events: none;
}

/* Card row — matches .list-item */
.dashboard-skeleton-row {
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-strong, #cbd5e1);
  pointer-events: none;
}

.dashboard-skeleton-row:last-child {
  margin-bottom: 0;
}

.dashboard-skeleton-row:nth-child(1) { --skel-i: 0; }
.dashboard-skeleton-row:nth-child(2) { --skel-i: 1; }
.dashboard-skeleton-row:nth-child(3) { --skel-i: 2; }
.dashboard-skeleton-row:nth-child(4) { --skel-i: 3; }

.dashboard-skeleton-row--recipe {
  padding: 1.25rem;
}

.dashboard-skeleton-row--field {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 0;
}

/* --- Bars & pills --- */

.dashboard-skeleton-bar,
.dashboard-skeleton-pill {
  border-radius: 5px;
  background: linear-gradient(
    105deg,
    var(--border-subtle, #e2e8f0) 0%,
    var(--border-subtle, #e2e8f0) 34%,
    rgba(255, 255, 255, 0.92) 50%,
    var(--border-subtle, #e2e8f0) 66%,
    var(--border-subtle, #e2e8f0) 100%
  );
  background-size: 240% 100%;
  animation: dashboard-skeleton-shimmer 1.2s ease-in-out infinite;
  animation-delay: calc(var(--skel-i, 0) * 0.08s);
}

.dashboard-skeleton-bar {
  height: 0.72rem;
  margin-bottom: 0.65rem;
  width: 100%;
}

.dashboard-skeleton-bar:last-child {
  margin-bottom: 0;
}

.dashboard-skeleton-bar--narrow {
  width: 58%;
  height: 0.62rem;
}

.dashboard-skeleton-bar--head-title {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 72%;
  margin-bottom: 0;
}

.dashboard-skeleton-bar--meta-half {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
}

.dashboard-skeleton-bar--actions-left {
  width: 32%;
  height: 0.62rem;
  margin-bottom: 0;
}

.dashboard-skeleton-bar--actions-right {
  width: 38%;
  margin-bottom: 0;
  margin-left: auto;
  max-width: 40%;
}

.dashboard-skeleton-bar--title {
  width: 92%;
  margin-bottom: 0;
}

.dashboard-skeleton-bar--subtitle {
  width: 70%;
  margin-top: 0.65rem;
}

.dashboard-skeleton-bar--meta {
  height: 0.58rem;
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
}

.dashboard-skeleton-bar--meta.dashboard-skeleton-bar--narrow {
  flex: 0 0 30%;
  width: auto;
}

.dashboard-skeleton-bar--label {
  width: 40%;
  height: 0.62rem;
  margin-bottom: 0.5rem;
}

.dashboard-skeleton-bar--input {
  height: 2.5rem;
  margin-bottom: 0;
  border-radius: 6px;
}

.dashboard-skeleton-bar--hero-title {
  width: min(420px, 72%);
  height: 1rem;
}

.dashboard-skeleton-bar--hero-sub {
  width: 36%;
  margin-top: 0.65rem;
}

.dashboard-skeleton-pill {
  flex: 0 0 auto;
  width: 4.75rem;
  height: 1.25rem;
  border-radius: 999px;
  margin-bottom: 0;
}

.dashboard-skeleton-pill--wide {
  width: 5.5rem;
}

/* --- Layout rows inside skeleton cards --- */

.dashboard-skeleton-row-head,
.dashboard-skeleton-row-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  justify-content: space-between;
}

.dashboard-skeleton-row-head {
  margin-bottom: 0.75rem;
}

.dashboard-skeleton-row-foot--end {
  justify-content: flex-end;
}

.dashboard-skeleton-flex-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.dashboard-skeleton-flex-row--actions {
  margin-bottom: 0.65rem;
}

.dashboard-skeleton-flex-row--actions-end {
  justify-content: flex-end;
  margin-bottom: 0.65rem;
}

.dashboard-skeleton-flex-row--actions-end .dashboard-skeleton-pill {
  width: 2.25rem;
  height: 2.25rem;
}

.dashboard-skeleton-card-inner--mill > .dashboard-skeleton-bar--subtitle {
  margin-bottom: 0.65rem;
}

.dashboard-skeleton-flex-row--meta .dashboard-skeleton-bar {
  flex: 1 1 0;
  min-width: 0;
}

.dashboard-skeleton-card-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dashboard-skeleton-card-inner > .dashboard-skeleton-bar--subtitle {
  margin-bottom: 0.65rem;
}

/* --- Edit panel skeleton --- */

.recipe-edit-skeleton-panel {
  display: none;
}

.recipe-edit-panel--loading .recipe-edit-skeleton-panel {
  display: flex;
  align-items: center;
  justify-content: center;
}

.recipe-edit-panel--loading #recipeForm {
  display: none !important;
}

.recipe-edit-skeleton-hero {
  margin-bottom: 1.35rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}

.recipe-edit-skeleton-field {
  margin-bottom: 0;
}

.recipe-edit-skeleton-table {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 10rem;
  padding: 0.25rem 0;
}

.recipe-edit-panel:not(.recipe-edit-panel--loading) #recipeForm.recipe-form--enter {
  animation: dashboard-stat-card-unfold 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --- Drag ghost --- */

.recipe-card-drag-ghost {
  box-sizing: border-box;
  padding: 1.25rem;
  margin: 0;
  border-radius: 8px;
  border: 1px solid var(--border-strong, #cbd5e1);
  background: var(--surface-card, #fff);
  box-shadow: var(--box-shadow-hover, 0 10px 28px rgba(15, 23, 42, 0.14));
}

.recipe-card-drag-ghost--follow {
  position: fixed;
  z-index: 1300;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0.96;
  will-change: transform, left, top;
}

.recipe-card-drag-ghost .dashboard-skeleton-bar {
  margin-bottom: 0;
}

.recipe-card-drag-ghost .dashboard-skeleton-flex-row--actions {
  margin-bottom: 0.65rem;
}

.recipe-card-drag-ghost .dashboard-skeleton-card-inner > .dashboard-skeleton-bar--subtitle {
  margin-bottom: 0.65rem;
}

/* --- Dark theme --- */

html[data-theme="dark"] .dashboard-skeleton-row {
  background: var(--dm-surface, #2c3338);
  border-color: var(--dm-border, rgba(255, 255, 255, 0.12));
}

html[data-theme="dark"] .dashboard-skeleton-bar,
html[data-theme="dark"] .dashboard-skeleton-pill {
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.06) 34%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.06) 66%,
    rgba(255, 255, 255, 0.06) 100%
  );
  background-size: 240% 100%;
}

html[data-theme="dark"] .recipe-card-drag-ghost {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] #recipeEdit .recipe-edit-skeleton-panel {
  background: var(--dm-surface) !important;
}

html[data-theme="dark"] #recipeEdit .recipe-edit-skeleton-hero {
  border-bottom-color: var(--dm-border) !important;
}

/* --- Reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  .dashboard-skeleton-bar,
  .dashboard-skeleton-pill {
    animation: none !important;
    background: var(--border-subtle, #e2e8f0);
  }

  html[data-theme="dark"] .dashboard-skeleton-bar,
  html[data-theme="dark"] .dashboard-skeleton-pill {
    background: rgba(255, 255, 255, 0.12);
  }

  .dashboard-list-skeleton--exit {
    transition: none;
  }

  .recipe-edit-panel:not(.recipe-edit-panel--loading) #recipeForm.recipe-form--enter {
    animation: none !important;
  }
}