/* ================================================
   Компонентные утилиты VideoMania
   ================================================ */

/* Glossy button стиль (заменяет 18+ дубликатов) */
.vm-button-glossy {
  background: var(--gray-glossy);
  border: 1px solid var(--gray-glossy-border);
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  /* Оптимизация для предотвращения мерцания */
  min-height: 44px;
  transform: translateZ(0);
  will-change: transform, opacity, background-color;
  backface-visibility: hidden;
  contain: layout style paint;
  transition: background-color 0.15s ease,
              box-shadow 0.15s ease,
              transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.vm-button-glossy:hover {
  background: var(--gray-glossy-hover);
  transform: translate3d(0, -2px, 0);
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.vm-button-glossy:active {
  transform: translate3d(0, 0, 0);
  transition-duration: 0.05s;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Flex центрирование (заменяет 50+ дубликатов) */
.vm-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vm-flex-center-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.vm-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vm-flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.vm-flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Hover эффекты */
.vm-hover-lift {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  transform: translateZ(0);
}

.vm-hover-lift:hover {
  transform: translate3d(0, -2px, 0);
}

.vm-hover-scale {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  transform: translateZ(0);
}

.vm-hover-scale:hover {
  transform: scale3d(1.05, 1.05, 1);
}

.vm-hover-glow:hover {
  box-shadow: 0 0 20px rgba(var(--vm-primary-rgb), 0.4);
}

/* Border radius система */
.vm-radius-sm { border-radius: 6px; }
.vm-radius-md { border-radius: 8px; }
.vm-radius-lg { border-radius: 12px; }
.vm-radius-xl { border-radius: 16px; }
.vm-radius-2xl { border-radius: 20px; }
.vm-radius-full { border-radius: 9999px; }

/* Spacing утилиты */
.vm-gap-xs { gap: 0.25rem; }
.vm-gap-sm { gap: 0.5rem; }
.vm-gap-md { gap: 1rem; }
.vm-gap-lg { gap: 1.5rem; }
.vm-gap-xl { gap: 2rem; }

/* Padding утилиты */
.vm-p-xs { padding: 0.25rem; }
.vm-p-sm { padding: 0.5rem; }
.vm-p-md { padding: 1rem; }
.vm-p-lg { padding: 1.5rem; }
.vm-p-xl { padding: 2rem; }

/* Margin утилиты */
.vm-m-auto { margin: auto; }
.vm-mx-auto { margin-left: auto; margin-right: auto; }
.vm-my-auto { margin-top: auto; margin-bottom: auto; }

/* Text утилиты */
.vm-text-center { text-align: center; }
.vm-text-left { text-align: left; }
.vm-text-right { text-align: right; }

.vm-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Shadow утилиты */
.vm-shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.vm-shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
              0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.vm-shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.vm-shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
              0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Transition утилиты */
.vm-transition-all {
  transition: all var(--vm-transition-duration, 0.15s) var(--vm-transition-ease, cubic-bezier(0.4, 0, 0.2, 1));
  will-change: auto;
}

.vm-transition-colors {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vm-transition-transform {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  transform: translateZ(0);
}

.vm-transition-opacity {
  transition: opacity 0.15s ease;
  will-change: opacity;
}

/* Glass morphism утилиты */
.vm-glass {
  background: rgba(var(--vm-card-bg-rgb, 31, 31, 31), 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.vm-glass-dark {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Overflow утилиты */
.vm-overflow-hidden { overflow: hidden; }
.vm-overflow-auto { overflow: auto; }
.vm-overflow-scroll { overflow: scroll; }
.vm-overflow-x-auto { overflow-x: auto; }
.vm-overflow-y-auto { overflow-y: auto; }

/* Position утилиты */
.vm-relative { position: relative; }
.vm-absolute { position: absolute; }
.vm-fixed { position: fixed; }
.vm-sticky { position: sticky; }

/* Z-index утилиты */
.vm-z-0 { z-index: 0; }
.vm-z-10 { z-index: 10; }
.vm-z-20 { z-index: 20; }
.vm-z-30 { z-index: 30; }
.vm-z-40 { z-index: 40; }
.vm-z-50 { z-index: 50; }
.vm-z-max { z-index: 9999; }

/* Display утилиты */
.vm-hidden { display: none; }
.vm-block { display: block; }
.vm-inline-block { display: inline-block; }
.vm-flex { display: flex; }
.vm-inline-flex { display: inline-flex; }
.vm-grid { display: grid; }

/* Width/Height утилиты */
.vm-w-full { width: 100%; }
.vm-h-full { height: 100%; }
.vm-w-auto { width: auto; }
.vm-h-auto { height: auto; }
.vm-min-w-0 { min-width: 0; }
.vm-min-h-0 { min-height: 0; }

/* Cursor утилиты */
.vm-cursor-pointer { cursor: pointer; }
.vm-cursor-default { cursor: default; }
.vm-cursor-wait { cursor: wait; }
.vm-cursor-not-allowed { cursor: not-allowed; }

/* Opacity утилиты */
.vm-opacity-0 { opacity: 0; }
.vm-opacity-50 { opacity: 0.5; }
.vm-opacity-75 { opacity: 0.75; }
.vm-opacity-100 { opacity: 1; }

/* Pointer events */
.vm-pointer-events-none { pointer-events: none; }
.vm-pointer-events-auto { pointer-events: auto; }

/* Select утилиты */
.vm-select-none { user-select: none; }
.vm-select-text { user-select: text; }
.vm-select-all { user-select: all; }

/* Визуальная доступность */
.vm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus утилиты */
.vm-focus-visible:focus-visible {
  outline: 2px solid var(--vm-primary);
  outline-offset: 2px;
}

.vm-focus-within:focus-within {
  box-shadow: 0 0 0 3px rgba(var(--vm-primary-rgb), 0.2);
}

/* ================================================
   Dashboard Toggle Button Component
   ПРИМЕЧАНИЕ: Стили перенесены в animated-arrow-button.css
   ================================================ */

/* Стили для анимированной кнопки dashboard toggle теперь находятся в:
   wwwroot/css/animated-arrow-button.css
   
   Новый компонент использует структуру:
   - .btn-conteiner как wrapper
   - .btn-content как кнопка
   - .icon-arrow с анимированными SVG стрелками
*/