/*
 * Copyright (c) 2024-2026 Тарабанов Александр Викторович
 * All rights reserved.
 * 
 * This software is proprietary and confidential.
 * Unauthorized copying, modification, or distribution is prohibited.
 * 
 * For licensing inquiries: info@hb3-accelerator.com
 * Website: https://hb3-accelerator.com
 * GitHub: https://github.com/VC-HB3-Accelerator
 */

/* frontend/src/assets/styles/app-layout.css */

/* Общий контейнер приложения */
.app-layout {
  display: flex;
  flex-direction: column; /* Header сверху, остальное ниже */
  height: 100vh;
  overflow: hidden; /* Предотвращаем двойную прокрутку */
}

/* Обертка для основного контента и сайдбара */
.app-content-wrapper {
  display: flex;
  flex-grow: 1; /* Занимает все доступное пространство под хедером */
  overflow: hidden; /* Важно для предотвращения двойной прокрутки */
}

/* Контейнер для RouterView */
.main-view {
  flex-grow: 1;
  overflow-y: auto; /* Позволяет прокручивать только контент страницы */
  position: relative; /* Для позиционирования оверлея загрузки */
  height: calc(100vh - var(--header-height, 65px)); /* Высота минус хедер (примерное значение) */
}

/* Оверлей загрузки для основного вида */
.loading-overlay.main-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 1000; /* Выше контента, ниже хедера/сайдбара */
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Стили для сайдбара (возможно, нужно перенести из Sidebar.vue или home.css) */
.wallet-sidebar {
  width: var(--sidebar-width, 300px); /* Ширина сайдбара */
  flex-shrink: 0;
  background-color: var(--color-white);
  border-left: 1px solid var(--color-grey-light);
  transition: width 0.3s ease;
  overflow-y: auto; /* Позволяет прокручивать сайдбар */
  height: calc(100vh - var(--header-height, 65px)); /* Высота минус хедер */
  position: relative; /* Или sticky, если нужно */
}

/* Анимация появления/скрытия сайдбара */
.sidebar-slide-enter-active,
.sidebar-slide-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.sidebar-slide-enter-from,
.sidebar-slide-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

/* Адаптация */
@media (max-width: 768px) {
  /* На мобильных можно скрывать сайдбар по умолчанию 
     и показывать его как оверлей или уменьшать ширину */
  .wallet-sidebar {
    width: var(--sidebar-width-mobile, 250px);
    /* Можно добавить position: fixed; top: var(--header-height); right: 0; 
       если нужен оверлей */
  }
}

/* Определим переменную для высоты хедера, если нужно */
:root {
  --header-height: 65px; /* Примерная высота хедера из Header.vue */
  --sidebar-width: 300px;
  --sidebar-width-mobile: 250px;
}