/**
 * Premium Skeleton CSS — Best-in-class animations and styling.
 * 
 * Features:
 * - Sophisticated pulse animation (subtle, realistic)
 * - Optional shimmer effect (premium visual)
 * - Fade transition on reveal
 * - Accessibility: respects prefers-reduced-motion
 * - Dark mode support
 * - Responsive refinements
 */

:root {
  --premium-skeleton-bg: var(--panel-border, #e2e8f0);
  --premium-skeleton-shimmer-light: rgba(255, 255, 255, 0.3);
  --premium-skeleton-pulse-opacity-min: 0.5;
  --premium-skeleton-pulse-opacity-max: 1;
  --premium-skeleton-animation-duration: 2s;
}

:root[data-theme="dark"] {
  --premium-skeleton-bg: color-mix(in srgb, var(--panel-border, #333844) 80%, transparent 20%);
  --premium-skeleton-shimmer-light: rgba(255, 255, 255, 0.08);
}

/* Base skeleton bar */
.premium-skeleton-bar {
  display: block;
  width: 88%;
  height: 1em;
  min-height: 10px;
  border-radius: 4px;
  background: var(--premium-skeleton-bg);
  animation: premium-skeleton-pulse var(--premium-skeleton-animation-duration) ease-in-out infinite;
  pointer-events: none;
  flex-shrink: 0;
}

/* Skeleton text block (multiple lines) */
.premium-skeleton-text-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.premium-skeleton-text-block .premium-skeleton-bar {
  width: 100%;
}

.premium-skeleton-text-block .premium-skeleton-bar:last-child {
  width: 68%;
}

/* Skeleton card */
.premium-skeleton-card {
  border-radius: 8px;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.premium-skeleton-card .premium-skeleton-bar {
  width: 100%;
}

.premium-skeleton-card > :first-child {
  height: 1.5em;
  width: 72%;
}

.premium-skeleton-card > :nth-child(2) {
  height: 0.9em;
  width: 48%;
}

/* Skeleton header */
.premium-skeleton-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.premium-skeleton-header .premium-skeleton-bar:first-child {
  height: 1.8em;
  width: 56%;
}

.premium-skeleton-header .premium-skeleton-bar:not(:first-child) {
  height: 0.85em;
  width: 42%;
}

/* Skeleton stat (label + value) */
.premium-skeleton-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.premium-skeleton-stat .premium-skeleton-bar:first-child {
  height: 0.75em;
  width: 56%;
}

.premium-skeleton-stat .premium-skeleton-bar:last-child {
  height: 1.4em;
  width: 72%;
}

/* Skeleton row/list item */
.premium-skeleton-row,
.premium-skeleton-list-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--premium-skeleton-bg) 50%, transparent 50%);
  min-height: 56px;
}

.premium-skeleton-row span,
.premium-skeleton-list-item span {
  flex: 1;
  height: 12px;
  border-radius: 3px;
}

.premium-skeleton-row span:last-child,
.premium-skeleton-list-item span:last-child {
  width: 40%;
}

/* Skeleton value (hides text, shows pulse) */
.premium-skeleton-value {
  color: transparent !important;
  border-radius: 4px;
  background: var(--premium-skeleton-bg) !important;
  animation: premium-skeleton-pulse var(--premium-skeleton-animation-duration) ease-in-out infinite !important;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Subtle pulse (default, accessible) */
@keyframes premium-skeleton-pulse {
  0%, 100% {
    opacity: var(--premium-skeleton-pulse-opacity-max, 1);
  }
  50% {
    opacity: var(--premium-skeleton-pulse-opacity-min, 0.5);
  }
}

/* Premium shimmer (optional, smooth wave effect) */
@keyframes premium-skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Apply shimmer conditionally (data-skeleton-shimmer="true") */
[data-skeleton-shimmer="true"] .premium-skeleton-bar,
[data-skeleton-shimmer="true"] .premium-skeleton-value {
  background: linear-gradient(
    90deg,
    var(--premium-skeleton-bg) 0%,
    var(--premium-skeleton-shimmer-light) 50%,
    var(--premium-skeleton-bg) 100%
  );
  background-size: 200% 100%;
  animation: premium-skeleton-shimmer 1.5s ease-in-out infinite !important;
}

/* Fade in transition (when real content appears) */
@keyframes premium-skeleton-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.premium-skeleton-fade-exit {
  animation: premium-skeleton-fade-out 300ms ease-out forwards;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════════ */

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .premium-skeleton-bar,
  .premium-skeleton-value {
    animation: none !important;
    opacity: var(--premium-skeleton-pulse-opacity-max, 1) !important;
  }
}

/* Forced colors mode (Windows High Contrast) */
@media (forced-colors: active) {
  .premium-skeleton-bar,
  .premium-skeleton-value {
    background: ButtonBorder !important;
    animation: none !important;
    border: 1px solid ButtonBorder;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE REFINEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .premium-skeleton-card {
    gap: 10px;
  }

  .premium-skeleton-row,
  .premium-skeleton-list-item {
    padding: 10px;
    min-height: 48px;
  }

  .premium-skeleton-header {
    margin-bottom: 16px;
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .premium-skeleton-card {
    gap: 8px;
    padding: 12px;
  }

  .premium-skeleton-row,
  .premium-skeleton-list-item {
    padding: 8px;
    gap: 8px;
    min-height: 44px;
  }

  .premium-skeleton-header .premium-skeleton-bar:first-child {
    width: 68%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PERFORMANCE: Layer optimizations
   ═══════════════════════════════════════════════════════════════════════════ */

.premium-skeleton-bar,
.premium-skeleton-value {
  will-change: opacity;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Disable animations during reduced-data mode */
@media (prefers-reduced-data: reduce) {
  .premium-skeleton-bar,
  .premium-skeleton-value {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE REFINEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] .premium-skeleton-bar,
:root[data-theme="dark"] .premium-skeleton-value {
  background: color-mix(in srgb, var(--panel-border, #333844) 70%, transparent 30%);
}

:root[data-theme="dark"] .premium-skeleton-row,
:root[data-theme="dark"] .premium-skeleton-list-item {
  border-bottom-color: color-mix(in srgb, var(--panel-border, #333844) 40%, transparent 60%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DEVELOPER TOOLS (optional debug mode)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Show skeleton boundaries in dev mode */
[data-skeleton-debug="true"] .premium-skeleton-bar,
[data-skeleton-debug="true"] .premium-skeleton-value {
  outline: 1px dashed #ff6b6b;
  outline-offset: 2px;
}

[data-skeleton-debug="true"] .premium-skeleton-card,
[data-skeleton-debug="true"] .premium-skeleton-row,
[data-skeleton-debug="true"] .premium-skeleton-list-item {
  outline: 1px dashed #4ecdc4;
  outline-offset: 1px;
}

/* Label skeleton regions */
[data-skeleton-debug="true"]::after {
  content: attr(data-skeleton-region);
  display: block;
  font-size: 8px;
  color: #666;
  opacity: 0.5;
  margin-top: 2px;
}