/**
 * Ultimate Skeleton CSS — Full Page Skeletonization
 * 
 * Affects ALL elements:
 * - Text elements (h1, p, label, span)
 * - Buttons and interactive controls
 * - Form inputs
 * - Navigation items
 * - Cards and containers
 * - Tables and lists
 */

/* ═══════════════════════════════════════════════════════════════════════════
   FULL PAGE LOADING STATE
   ═══════════════════════════════════════════════════════════════════════════ */

[data-skeleton-loading="true"] {
  position: relative;
}

[data-skeleton-hidden="true"] {
  opacity: 0.2 !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ULTIMATE SKELETON TEXT (Headers, Labels, Paragraphs)
   ═══════════════════════════════════════════════════════════════════════════ */

.ultimate-skeleton-text {
  display: block;
  width: 100%;
}

.ultimate-skeleton-text .premium-skeleton-bar {
  width: 100%;
  height: 1em;
  border-radius: 4px;
  background: var(--premium-skeleton-bg);
  animation: premium-skeleton-pulse 2s ease-in-out infinite;
  display: block;
  margin-bottom: 4px;
}

.ultimate-skeleton-text .premium-skeleton-bar:last-child {
  margin-bottom: 0;
  width: 68%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ULTIMATE SKELETON BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */

.ultimate-skeleton-button,
.premium-skeleton-button {
  display: inline-block !important;
  border: 1px solid var(--premium-skeleton-bg) !important;
  border-radius: 8px !important;
  background: var(--premium-skeleton-bg) !important;
  color: transparent !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: 0.6 !important;
  animation: premium-skeleton-pulse 2s ease-in-out infinite !important;
  min-height: 40px !important;
  padding: 10px 16px !important;
}

.ultimate-skeleton-button:disabled {
  opacity: 0.6 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ULTIMATE SKELETON INPUT
   ═══════════════════════════════════════════════════════════════════════════ */

.ultimate-skeleton-input {
  display: block;
  width: 100%;
  height: 40px;
  border: 1px solid var(--premium-skeleton-bg);
  border-radius: 6px;
  background: var(--premium-skeleton-bg);
  animation: premium-skeleton-pulse 2s ease-in-out infinite;
  margin-bottom: 8px;
}

input[disabled],
textarea[disabled],
select[disabled],
.ultimate-skeleton-input {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ULTIMATE SKELETON NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════ */

.ultimate-skeleton-nav {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 4px;
  background: var(--premium-skeleton-bg);
  animation: premium-skeleton-pulse 2s ease-in-out infinite;
}

.ultimate-skeleton-nav .premium-skeleton-bar {
  min-width: 100px;
  height: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ULTIMATE SKELETON CONTAINER (Cards, Sections)
   ═══════════════════════════════════════════════════════════════════════════ */

.ultimate-skeleton-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 16px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px dashed color-mix(in srgb, var(--premium-skeleton-bg) 60%, transparent 40%);
}

.ultimate-skeleton-container .premium-skeleton-bar {
  height: 12px;
  border-radius: 3px;
  display: block;
}

.ultimate-skeleton-container .premium-skeleton-bar:first-child {
  height: 16px;
  width: 76%;
}

.ultimate-skeleton-container .premium-skeleton-bar:last-child {
  width: 56%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ULTIMATE SKELETON TABLE
   ═══════════════════════════════════════════════════════════════════════════ */

table[data-skeleton-hidden="true"] {
  opacity: 0.2;
}

table[data-skeleton-hidden="true"] td,
table[data-skeleton-hidden="true"] th {
  background: var(--premium-skeleton-bg) !important;
  color: transparent !important;
  animation: premium-skeleton-pulse 2s ease-in-out infinite !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ULTIMATE SKELETON LIST
   ═══════════════════════════════════════════════════════════════════════════ */

ul[data-skeleton-hidden="true"],
ol[data-skeleton-hidden="true"],
.list[data-skeleton-hidden="true"] {
  opacity: 0.2;
}

ul[data-skeleton-hidden="true"] li,
ol[data-skeleton-hidden="true"] li,
.list[data-skeleton-hidden="true"] li {
  background: color-mix(in srgb, var(--premium-skeleton-bg) 50%, transparent 50%);
  animation: premium-skeleton-pulse 2s ease-in-out infinite;
  border-radius: 4px;
  min-height: 44px;
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ULTIMATE SKELETON GRID
   ═══════════════════════════════════════════════════════════════════════════ */

[data-skeleton-hidden="true"][style*="grid"],
.grid[data-skeleton-hidden="true"],
[class*="grid"][data-skeleton-hidden="true"] {
  opacity: 0.2;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS (Shared)
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes premium-skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes ultimate-skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .ultimate-skeleton-text .premium-skeleton-bar,
  .ultimate-skeleton-button,
  .ultimate-skeleton-input,
  .ultimate-skeleton-nav,
  .ultimate-skeleton-container .premium-skeleton-bar {
    animation: none !important;
    opacity: 0.7 !important;
  }
}

@media (forced-colors: active) {
  .ultimate-skeleton-text .premium-skeleton-bar,
  .ultimate-skeleton-button,
  .ultimate-skeleton-input,
  .ultimate-skeleton-nav,
  .ultimate-skeleton-container .premium-skeleton-bar {
    background: ButtonBorder !important;
    border: 1px solid ButtonBorder !important;
  }
}

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

:root[data-theme="dark"] .ultimate-skeleton-text .premium-skeleton-bar,
:root[data-theme="dark"] .ultimate-skeleton-button,
:root[data-theme="dark"] .ultimate-skeleton-input,
:root[data-theme="dark"] .ultimate-skeleton-nav,
:root[data-theme="dark"] .ultimate-skeleton-container {
  background: color-mix(in srgb, var(--premium-skeleton-bg, #333844) 70%, transparent 30%) !important;
}

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

@media (max-width: 768px) {
  .ultimate-skeleton-container {
    padding: 12px !important;
    gap: 10px !important;
  }

  .ultimate-skeleton-button {
    min-height: 36px !important;
    padding: 8px 12px !important;
  }

  .ultimate-skeleton-input {
    height: 36px;
  }
}

@media (max-width: 480px) {
  .ultimate-skeleton-container {
    padding: 10px !important;
    gap: 8px !important;
  }

  .ultimate-skeleton-button {
    min-height: 44px !important;
    width: 100% !important;
  }

  .ultimate-skeleton-input {
    height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PERFORMANCE
   ═══════════════════════════════════════════════════════════════════════════ */

.ultimate-skeleton-text,
.ultimate-skeleton-button,
.ultimate-skeleton-input,
.ultimate-skeleton-nav,
.ultimate-skeleton-container {
  will-change: opacity;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DEV DEBUG MODE
   ═══════════════════════════════════════════════════════════════════════════ */

[data-skeleton-debug="true"] .ultimate-skeleton-text,
[data-skeleton-debug="true"] .ultimate-skeleton-button,
[data-skeleton-debug="true"] .ultimate-skeleton-input,
[data-skeleton-debug="true"] .ultimate-skeleton-nav,
[data-skeleton-debug="true"] .ultimate-skeleton-container {
  outline: 2px dashed #ff6b6b;
  outline-offset: 2px;
}

[data-skeleton-debug="true"] [data-skeleton-hidden="true"] {
  outline: 2px dashed #4ecdc4;
  outline-offset: 2px;
}