/* ============================================================
 * VinePoster UI Utility Classes
 * Replaces hardcoded inline styles across templates
 * ============================================================ */

/* --- Empty/Permission States --- */
.vp-empty-wrap {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vp-bg, #fdf9f2);
  padding: 60px 20px;
}

.vp-empty-card {
  background: var(--vp-surface, #fff);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  padding: 60px 50px;
  max-width: 580px;
  width: 100%;
  text-align: center;
  border: 1px solid color-mix(in oklab, var(--vp-border,#ddd), transparent 50%);
  color: var(--color-text, #333);
  font-family: var(--vp-font, system-ui, sans-serif);
}

.vp-empty-icon {
  background: var(--vp-accent, #7ea728);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
}

.vp-empty-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-heading, #111);
  margin-bottom: 12px;
}
.vp-empty-title--lg {
  font-size: 1.7rem;
  margin-bottom: 14px;
}

.vp-empty-desc {
  color: var(--color-text-muted, #666);
  line-height: 1.6;
  max-width: 440px;
  margin: 0 auto 30px;
}
.vp-empty-desc--lg {
  color: var(--color-text, #555);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 460px;
  margin: 0 auto 36px;
}

.vp-empty-action {
  background: var(--vp-accent, #7ea728);
  color: var(--vp-on-accent, #fff);
  border: none;
  border-radius: 10px;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s ease;
}
.vp-empty-action--lg {
  border-radius: 12px;
  padding: 14px 30px;
  font-size: 16px;
  gap: 10px;
}

/* --- Typographic Utilities --- */
.vp-icon-on-accent {
  font-size: 52px;
  color: var(--vp-on-accent, #fff);
}
.vp-icon-sm { font-size: 20px; }
.vp-icon-md { font-size: 22px; }

/* --- Forms & Controls --- */
.vp-control-label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
}
.vp-text-danger {
  color: var(--vp-danger, #dc2626);
}
.vp-note {
  color: var(--color-text-muted, #888);
  font-size: 13px;
  margin-top: 6px;
}
.vp-note-sm {
  font-size: 12px;
  color: var(--color-text-muted, #666);
  margin-top: 4px;
}
.vp-w-full { width: 100%; }
.vp-mb-15 { margin-bottom: 15px; }
.vp-d-none { display: none !important; }

/* --- Progress Bar --- */
.vp-progress-track {
  background: var(--vp-border, #f0f0f0);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
}
.vp-progress-fill {
  width: 0%;
  height: 100%;
  background: var(--vp-accent, #7ea728);
  transition: width 0.2s ease;
}
.vp-progress-status {
  font-size: 12px;
  color: var(--color-text-muted, #666);
  margin-top: 4px;
  text-align: center;
}

/* --- Media Containers --- */
.vp-media-ratio {
  aspect-ratio: 16/9;
}
.vp-video-embed {
  width: 100%;
  height: 100%;
}
.vp-video-embed--ratio {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
}

/* --- Chip Dynamic Colors --- */
.vp-chip[style*='--vp-chip'] {
  background-color: var(--vp-chip-bg, #e5e7eb) !important;
  color: var(--vp-chip-fg, #111) !important;
}
.vp-debug-pre {
  background:#000;
  color:#0f0;
  padding:10px;
}