/* Совместимость с устаревшими Vue-шаблонами + анимации (токены — mp) */
:root {
  --color-background: var(--mp-bg-primary);
  --color-text: var(--mp-text-primary);
  --transition-base: 200ms ease-out;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
}

#app {
  min-height: 100vh;
  font-weight: normal;
}

/* Global link styles */
a {
  color: #6366f1;
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: #5b5bd6;
}

/* PrimeVue overrides для единого дизайна MULTIPASSPORT.DIGITAL */
.p-component {
  color: var(--mp-text-primary);
  font-family: var(--mp-font-family);
}

.p-button {
  background: var(--mp-bg-secondary);
  border-color: var(--mp-border-medium);
  color: var(--mp-text-primary);
  font-family: var(--mp-font-family);
  font-size: var(--mp-text-sm);
  font-weight: var(--mp-font-medium);
  padding: var(--mp-space-3) var(--mp-space-5);
  border-radius: var(--mp-radius-md);
  transition: all var(--mp-transition-base);
}

.p-button:hover {
  background: var(--mp-bg-tertiary);
  border-color: var(--mp-border-dark);
}

.p-button.p-button-primary {
  background: var(--mp-btn-primary-bg);
  border-color: var(--mp-btn-primary-border);
  color: var(--mp-btn-primary-color);
}

.p-button.p-button-primary:hover {
  background: var(--mp-btn-primary-bg-hover);
  border-color: var(--mp-btn-primary-border-hover);
  color: var(--mp-btn-primary-color);
}

.p-inputtext,
.p-dropdown,
.p-textarea,
.p-inputnumber-input {
  background: var(--mp-bg-primary);
  border-color: var(--mp-border-medium);
  color: var(--mp-text-primary);
  font-family: var(--mp-font-family);
  font-size: var(--mp-text-base);
  padding: var(--mp-space-3) var(--mp-space-4);
  border-radius: var(--mp-radius-md);
  transition: all var(--mp-transition-base);
}

.p-inputtext:focus,
.p-dropdown:focus,
.p-textarea:focus,
.p-inputnumber-input:focus {
  border-color: var(--mp-accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  outline: none;
}

.p-card {
  background: var(--mp-bg-elevated);
  border-color: var(--mp-border-light);
  color: var(--mp-text-primary);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow-sm);
}

.p-datatable {
  background: var(--mp-bg-elevated);
  border: 1px solid var(--mp-border-light);
  border-radius: var(--mp-radius-lg);
}

.p-datatable .p-datatable-tbody > tr {
  background: var(--mp-bg-elevated);
  color: var(--mp-text-primary);
  border-bottom: 1px solid var(--mp-border-light);
}

.p-datatable .p-datatable-tbody > tr:nth-child(even) {
  background: var(--mp-bg-secondary);
}

.p-datatable .p-datatable-tbody > tr:hover {
  background: var(--mp-bg-secondary);
}

.p-datatable .p-datatable-thead > tr > th {
  background: var(--mp-bg-secondary);
  color: var(--mp-text-secondary);
  border-color: var(--mp-border-light);
  font-weight: var(--mp-font-semibold);
  font-size: var(--mp-text-xs);
  letter-spacing: var(--mp-tracking-wide);
  text-transform: uppercase;
}

.p-dialog {
  background: var(--mp-bg-elevated);
  border-radius: var(--mp-radius-xl);
  box-shadow: var(--mp-shadow-xl);
  border: 1px solid var(--mp-border-light);
}

.p-dialog .p-dialog-content {
  background: var(--mp-bg-elevated);
  color: var(--mp-text-primary);
  padding: var(--mp-space-6);
}

.p-dialog .p-dialog-header {
  background: var(--mp-bg-elevated);
  color: var(--mp-text-primary);
  border-color: var(--mp-border-light);
  border-bottom: 1px solid var(--mp-border-light);
  padding: var(--mp-space-6);
  border-radius: var(--mp-radius-xl) var(--mp-radius-xl) 0 0;
}

.p-dialog .p-dialog-header .p-dialog-title {
  font-size: var(--mp-text-xl);
  font-weight: var(--mp-font-semibold);
  color: var(--mp-text-primary);
  font-family: var(--mp-font-family);
}

.p-dialog .p-dialog-footer {
  background: var(--mp-bg-elevated);
  border-top: 1px solid var(--mp-border-light);
  padding: var(--mp-space-6);
  border-radius: 0 0 var(--mp-radius-xl) var(--mp-radius-xl);
}

.p-menubar {
  background: #1a1a1a;
  border-color: #333333;
}

.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
  color: #ffffff;
}

.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:hover {
  background: #2a2a2a;
}

.p-toast .p-toast-message {
  background: #1a1a1a;
  color: #ffffff;
  border-color: #333333;
}

.p-tabview .p-tabview-nav {
  background: #1a1a1a;
  border-color: #333333;
}

.p-tabview .p-tabview-nav li .p-tabview-nav-link {
  color: #cccccc;
  background: #1a1a1a;
  border-color: #333333;
}

.p-tabview .p-tabview-nav li .p-tabview-nav-link:hover {
  background: #2a2a2a;
  color: #ffffff;
}

.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
  background: #6366f1;
  color: #ffffff;
  border-color: #6366f1;
}

.p-dropdown {
  background: #1a1a1a;
  border-color: #333333;
  color: #ffffff;
}

.p-dropdown:not(.p-disabled):hover {
  border-color: #444444;
}

.p-dropdown:not(.p-disabled).p-focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
}

.p-dropdown-panel {
  background: #1a1a1a;
  border-color: #333333;
}

.p-dropdown-panel .p-dropdown-items .p-dropdown-item {
  color: #ffffff;
}

.p-dropdown-panel .p-dropdown-items .p-dropdown-item:hover {
  background: #2a2a2a;
}

.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
  background: #6366f1;
  color: #ffffff;
}

.p-fileupload {
  background: #1a1a1a;
  border-color: #333333;
}

.p-fileupload .p-button {
  background: #6366f1;
  border-color: #6366f1;
}

.p-fileupload .p-button:hover {
  background: #5b5bd6;
  border-color: #5b5bd6;
}

.p-paginator {
  background: #1a1a1a;
  border-color: #333333;
  color: #ffffff;
}

.p-paginator .p-paginator-page {
  background: #1a1a1a;
  border-color: #333333;
  color: #ffffff;
}

.p-paginator .p-paginator-page:hover {
  background: #2a2a2a;
}

.p-paginator .p-paginator-page.p-highlight {
  background: #6366f1;
  border-color: #6366f1;
}

.p-progressspinner .p-progressspinner-circle {
  stroke: #6366f1;
}

/* Микро-анимации для улучшения UX */

/* Плавное появление элементов */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Анимация для карточек при загрузке */
.work-card,
.stat-card,
.p-card {
  animation: fadeInScale var(--duration-base) var(--ease-out);
}

/* Улучшенные hover-эффекты для ссылок */
a {
  position: relative;
  transition: color var(--transition-base);
}

a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--mp-primary);
  transition: width var(--transition-base) var(--ease-out);
}

a:hover::after {
  width: 100%;
}

/* Анимация для кнопок при клике */
.p-button:active {
  transform: scale(0.98);
  transition: transform var(--duration-fast) var(--ease-out);
}

/* Плавная загрузка изображений */
img {
  transition: opacity var(--transition-base);
}

img[loading="lazy"] {
  opacity: 0;
  animation: fadeIn var(--duration-base) var(--ease-out) forwards;
}

/* Responsive design */
@media (max-width: 768px) {
  #app {
    padding: 0;
  }
  
  /* Отключаем некоторые анимации на мобильных для производительности */
  a::after {
    display: none;
  }
}

/* Bitrix: аналог #app из Vue */
main.mp-home {
  min-height: 100vh;
  font-weight: normal;
}