/* Main app: стили для сплэш, сайдбара и страниц */

/* Лендинг: окно на всю ширину, без белых полей */
html.overflow-x-hidden,
html.overflow-x-hidden body {
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}
html.overflow-x-hidden *,
html.overflow-x-hidden *::before,
html.overflow-x-hidden *::after {
  box-sizing: inherit;
}

/* Карточки и таблицы */
.cmc-card {
  background: #fff;
  border: 1px solid #eff2f5;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.cmc-table-header {
  font-size: 0.75rem;
  font-weight: 600;
  color: #58667e;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #eff2f5;
}
.cmc-table-cell {
  padding: 1rem;
  border-bottom: 1px solid #eff2f5;
  font-size: 0.875rem;
}
.cmc-btn-primary {
  background: #3861fb;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: opacity 0.2s;
}
.cmc-btn-primary:hover {
  opacity: 0.9;
}
.text-cmc-muted {
  color: #58667e;
}
.text-main-blue { color: #3861fb; }
.text-main-green { color: #16c784; }
.text-main-red { color: #ea3943; }
.bg-main-blue\/10 { background-color: rgba(56, 97, 251, 0.1); }
.bg-main-green\/10 { background-color: rgba(22, 199, 132, 0.1); }
.bg-main-red\/10 { background-color: rgba(234, 57, 67, 0.1); }

/* Переход при смене страницы */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.18s ease;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-leave-to {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
#app-main {
  position: relative;
  min-height: 100%;
}

/* Дашборд: бегущая строка котировок */
@keyframes dashboard-ratios-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.dashboard-ratios-marquee-track {
  display: flex;
  width: max-content;
  animation: dashboard-ratios-marquee 55s linear infinite;
}
.dashboard-ratios-marquee-track:hover {
  animation-play-state: paused;
}

/* Модалка котировок: горизонтальный скролл без «призраков» соседних колонок (Safari / iOS) */
.dashboard-ratios-modal-scroll {
  -webkit-overflow-scrolling: touch;
}
.dashboard-ratios-modal-table {
  border-collapse: separate;
  border-spacing: 0;
}
.dashboard-ratios-modal-table th.dashboard-ratios-sticky-col,
.dashboard-ratios-modal-table td.dashboard-ratios-sticky-col {
  position: sticky;
  left: 0;
  z-index: 4;
  background-clip: padding-box;
  box-shadow: 6px 0 10px -4px rgba(0, 0, 0, 0.12);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.dashboard-ratios-modal-table thead th.dashboard-ratios-sticky-col {
  z-index: 5;
  background-color: #f9fafb;
}
.dashboard-ratios-modal-table tbody td.dashboard-ratios-sticky-col {
  background-color: #ffffff;
}
.dashboard-ratios-modal-table tbody tr:hover td.dashboard-ratios-sticky-col {
  background-color: #f8fafd;
}
.dashboard-ratios-modal-table tbody td:not(.dashboard-ratios-sticky-col),
.dashboard-ratios-modal-table thead th:not(.dashboard-ratios-sticky-col) {
  position: relative;
  z-index: 0;
}

/* Сайдбар main: мобильный drawer и оверлей */
.sidebar-root {
  position: relative;
}
.sidebar-overlay {
  cursor: pointer;
}
.sidebar-wrap {
  position: relative;
}
.main-sidebar-ball {
  position: absolute;
  right: 24px;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #fff;
  pointer-events: none;
  transition: top 0.2s ease-out;
}
.main-sidebar-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  margin: 0.125rem 0.25rem;
  border-radius: 0.75rem;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: all 0.2s;
}
.main-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.main-sidebar-item.active {
  background: #3861fb;
  color: #fff;
}

/* Модалка «Новое платежное решение»: блок пары валют (фиат/крипта + стрелка) */
.create-modal-currency-panel {
  border-radius: 1rem;
  padding: 1rem;
  background: linear-gradient(
    165deg,
    rgba(56, 97, 251, 0.1) 0%,
    rgba(56, 97, 251, 0.04) 45%,
    rgba(248, 250, 253, 0.95) 100%
  );
  border: 1px solid rgba(56, 97, 251, 0.28);
  box-shadow: 0 2px 12px rgba(56, 97, 251, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.create-modal-currency-panel-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #3861fb;
  margin-bottom: 0.75rem;
}
/* Произвольные md:grid-cols-[…] из Vue в JS не всегда попадают в Tailwind CDN. */
.create-modal-currency-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .create-modal-currency-row {
    grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr);
    align-items: center;
    column-gap: 1rem;
    row-gap: 1rem;
  }
}

/* Строка под парой валют: корп. кошелёк (offRamp) — та же ширина колонки, что и у крипты */
.create-modal-currency-wallet-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .create-modal-currency-wallet-row {
    grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
  }
}

/* onRamp: подсказка под колонкой «Криптовалюта» (на md+ совпадает с 3-й колонкой сетки) */
.create-modal-currency-onramp-hint-row {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .create-modal-currency-onramp-hint-row {
    grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
  }
  .create-modal-currency-onramp-hint-row .create-modal-currency-onramp-hint-text {
    grid-column: 3;
  }
}

/* На мобильном колонка: стрелка «вниз» между полями */
.create-modal-currency-arrow {
  flex-shrink: 0;
  color: rgba(56, 97, 251, 0.65);
  width: 2rem;
  height: 2rem;
}
@media (max-width: 767.98px) {
  .create-modal-currency-arrow {
    transform: rotate(90deg);
  }
}
@media (min-width: 768px) {
  .create-modal-currency-arrow {
    width: 2.25rem;
    height: 2.25rem;
    color: rgba(56, 97, 251, 0.55);
  }
}

.create-modal-fiat-limits-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .create-modal-fiat-limits-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}