/* ============================================================
   StudioCRM UI: мягкие анимации и микровзаимодействия.
   Лёгкий CSS без библиотек; уважает prefers-reduced-motion.
   ============================================================ */

:root {
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --- плавное появление страницы и карточек --- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
main { animation: fadeUp .28s var(--ease); }
.fade-up { animation: fadeUp .3s var(--ease); }

.row > [class*="col-"] > .card { animation: fadeUp .3s var(--ease) backwards; }
.row > [class*="col-"]:nth-child(2) > .card { animation-delay: .04s; }
.row > [class*="col-"]:nth-child(3) > .card { animation-delay: .08s; }
.row > [class*="col-"]:nth-child(4) > .card { animation-delay: .12s; }
.row > [class*="col-"]:nth-child(5) > .card { animation-delay: .16s; }
.row > [class*="col-"]:nth-child(6) > .card { animation-delay: .2s; }

/* --- карточки: объём и hover --- */
.card {
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(16, 24, 40, .12);
}

/* --- кнопки --- */
.btn {
  transition: transform .12s var(--ease), box-shadow .15s var(--ease),
              background-color .15s ease, color .15s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible {
  outline: 2px solid var(--brand-primary, #0d6efd);
  outline-offset: 2px;
}
.btn-brand { background: var(--brand-primary); color: #fff; border: none; }
.btn-brand:hover { filter: brightness(.92); color: #fff; box-shadow: 0 4px 12px rgba(13, 110, 253, .3); }

/* --- loading-состояние кнопки (JS добавляет .btn-loading при submit) --- */
.btn-loading {
  pointer-events: none;
  opacity: .75;
  position: relative;
}
.btn-loading::after {
  content: "";
  display: inline-block;
  width: .9em; height: .9em;
  margin-left: .5em;
  vertical-align: -.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- формы --- */
.form-control, .form-select {
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-primary, #0d6efd);
  box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .12);
}
.form-error { animation: fadeUp .25s var(--ease); }
.has-error .form-control, .has-error .form-select { border-color: #dc3545; }

/* --- таблицы --- */
.table tbody tr { transition: background-color .12s ease; }
.table tbody tr:hover { background-color: rgba(13, 110, 253, .04); }

/* --- слоты записи --- */
.slot-btn { min-width: 5.5rem; transition: transform .12s var(--ease), box-shadow .15s ease; }
.btn-check:checked + .slot-btn { transform: scale(1.05); box-shadow: 0 2px 8px rgba(13, 110, 253, .35); }

/* --- dropdown / модальные (Bootstrap) --- */
.dropdown-menu { animation: fadeUp .18s var(--ease); }
.modal.fade .modal-dialog { transition: transform .22s var(--ease), opacity .22s ease; }

/* --- toast-уведомления --- */
.toast-container { z-index: 1080; }
.toast { animation: toastIn .3s var(--ease); box-shadow: 0 8px 24px rgba(16, 24, 40, .18); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}

/* --- skeleton для подгружаемых списков --- */
.skeleton {
  background: linear-gradient(90deg, #eceef1 25%, #f6f7f9 50%, #eceef1 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: .375rem;
  min-height: 1rem;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* --- бейджи статусов --- */
.badge { transition: opacity .15s ease; }

/* --- мобильная версия: не увеличиваем hover-эффекты на тач-устройствах --- */
@media (hover: none) {
  .service-card:hover { transform: none; }
  .btn:hover { transform: none; }
}

/* --- уважение системной настройки reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}