/**
 * CRM Layout System - Основная разметка и структура
 * Содержит стили для основного контейнера, боковой панели, топ-бара и контента
 */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}

/* ===== ОСНОВНОЙ КОНТЕЙНЕР ===== */
.app {
  display: flex;
  /* Адаптивная высота: весь экран минус padding body (16px × 2) */
  height: calc(100vh - 32px);
  min-height: 480px;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  border: 0.5px solid var(--color-border-tertiary);
  box-shadow: var(--shadow-app);
}

/* ===== БОКОВАЯ ПАНЕЛЬ (SIDEBAR) ===== */
.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 4px;
  flex-shrink: 0;
  /* Создаём стекинг-контекст: тултипы должны рисоваться поверх .main */
  z-index: 10;
}

/* Логотип в боковой панели */
.sidebar-logo {
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: #fff;
}

/* Элемент навигации */
.nav-item {
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.nav-item.active {
  background: var(--color-primary);
  box-shadow: var(--shadow-glow-primary);
}

.nav-item.active:hover {
  transform: none;
}

.nav-item i {
  color: rgba(255, 255, 255, 0.55);
  font-size: 18px;
  transition: color var(--transition-fast);
}

.nav-item:hover i {
  color: rgba(255, 255, 255, 0.9);
}

.nav-item.active i {
  color: #fff;
}

/* Подсказка при наведении на иконку */
.nav-tooltip {
  position: absolute;
  left: 52px;
  background: var(--sidebar-bg);
  color: #fff;
  font-size: var(--font-size-xs);
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: 99;
}

.nav-item:hover .nav-tooltip {
  opacity: 1;
}

/* Нижняя часть боковой панели */
.sidebar-bottom {
  margin-top: auto;
}

/* ===== ОСНОВНОЕ СОДЕРЖИМОЕ ===== */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--color-background-tertiary);
  overflow: hidden;
}

/* ===== ВЕРХНЯЯ ПАНЕЛЬ (TOPBAR) ===== */
.topbar {
  background: var(--color-background-primary);
  border-bottom: 0.5px solid var(--color-border-tertiary);
  padding: 0 20px;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.topbar-title {
  font-size: var(--font-size-xl);
  font-weight: 500;
  flex: 1;
}

/* ===== ОБЛАСТЬ КОНТЕНТА ===== */
.content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

/* Когда открыт календарь — контент не скроллится сам */
.content:has(#page-calendar.active),
.content:has(#page-works.active) {
  overflow: hidden;
}

/* Страницы (скрыты по умолчанию) */
.page {
  display: none;
}

.page.active {
  display: contents;
}

/* Страницы-календари: нужен flex чтобы toolbar + контейнер шли колонкой */
#page-calendar.active,
#page-works.active {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Аватар пользователя в topbar */
.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}

/* Поле поиска */
.search-input {
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-sm);
  padding: 5px 10px;
  font-size: var(--font-size-sm);
  background: var(--color-background-secondary);
  font-family: var(--font-sans);
  color: var(--color-text-primary);
}

.search-input:focus {
  outline: none;
  border-color: var(--color-primary);
}