/* --- ГЛОБАЛЬНАЯ ВЕРХНЯЯ ШАПКА (NAVBAR) --- */

/* Фиксируем панель вверху экрана */
.global-navbar {
  position: fixed !important; /* Фиксируем на месте */
  top: 0 !important;          /* Прижимаем к самому верху */
  left: 0 !important;         /* Растягиваем от левого края */
  width: 100% !important;     /* На всю ширину экрана */
  height: 60px !important;    /* Жестко задаем высоту шапки */
  z-index: 9999 !important;   /* Самый важный слой, чтобы шапка была ПОВЕРХ таблиц и кнопок */
  
  /* Ваши остальные стили (фон, шрифты) остаются без изменений */
  background-color: #1e293b !important; 
  display: block !important;
}

/* ОБЯЗАТЕЛЬНО: Добавляем отступ для контента, который идет СЛЕДОМ */
.main-content-wrapper {
  padding-top: 80px !important; /* Высота шапки (60px) + 20px запас на воздух */
  box-sizing: border-box !important;
}

/* Контейнер внутри шапки, который разнесет элементы влево и вправо */
.navbar-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* Разносит левую и правую части по краям */
  padding: 12px 24px !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* Левая и правая группы элементов */
.navbar-left, .navbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important; /* Расстояние между кнопками */
}

/* Логотип */
.nav-logo {
  color: #f8fafc !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-decoration: none !important;
}

/* Текст "Вы вошли как..." */
.nav-user {
  color: #94a3b8 !important;
  font-size: 14px !important;
}
.nav-user strong {
  color: #f1f5f9 !important;
}

/* Стили для ссылок-кнопок в шапке (Главная) */
.nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  background-color: #334155 !important;
  color: #f1f5f9 !important;
  border: 1px solid #475569 !important;
  transition: background-color 0.15s !important;
}
.nav-btn:hover {
  background-color: #475569 !important;
}

/* Стили для вашей новой кнопки "Выйти" в шапке */
.navbar-right button.nav-btn--profile {
  background-color: #334155 !important;
  color: #f1f5f9 !important;
  border: 1px solid #475569 !important;
  cursor: pointer !important;
  height: 34px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 6px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
  transition: background-color 0.15s ease !important;
}

.navbar-right button.nav-btn--profile:hover {
  background-color: #475569 !important;
  color: #ffffff !important;
}

/* Цвет текста внутри серой кнопки */
.navbar-right button.nav-btn--profile strong {
  color: #3b82f6 !important; /* Красивый синий акцент */
}


/* 2. СТИЛЬ ДЛЯ КРАСНОЙ КНОПКИ ВЫХОДА */
.navbar-right button.nav-btn--logout {
  background-color: #7f1d1d !important; 
  color: #fef2f2 !important;
  border: 1px solid #b91c1c !important;
  cursor: pointer !important;
  height: 34px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 6px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
  transition: background-color 0.15s ease !important;
}

.navbar-right button.nav-btn--logout:hover {
  background-color: #991b1b !important;
}


/* Форма поиска по центру */
/* 1. Общий контейнер формы (делаем его полностью скругленным) */
.navbar-search {
  display: flex;
  align-items: center;
  background-color: #334155; /* Мягкий графитовый фон, гармонирующий с темной панелью */
  border: 1px solid #475569;
  border-radius: 20px;       /* Увеличиваем скругление для эффекта капсулы */
  padding: 4px 14px;         /* Увеличиваем внутренние отступы для «воздуха» */
  width: 100%;
  max-width: 320px;          /* Делаем блок чуть компактнее */
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  /* МАГИЯ ЦЕНТРИРОВАНИЯ: автоматически выровняет поиск ровно по центру шапки */
  margin: 0 auto !important;
}

/* Эффект легкого свечения при клике внутрь поиска */
.navbar-search:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* 2. Текстовое поле ввода */
.nav-search-input {
  background: transparent !important; /* Убираем белый фон */
  border: none !important;            /* Убираем рамки */
  color: #ffffff !important;
  font-family: inherit;
  font-size: 14px;
  padding: 4px 8px 4px 4px !important;
  width: 100%;
  outline: none !important;           /* Сбрасываем стандартный дефолтный фокус */
}

/* Цвет подсказки */
.nav-search-input::placeholder {
  color: #94a3b8;
}

/* 3. Кнопка с лупой */
.nav-search-btn {
  background: transparent !important; /* Убираем серый фон кнопки */
  border: none !important;            /* Убираем рамку кнопки */
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px 0 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  order: -1;                          /* Переносит лупу в самое начало (левее текста) */
  transition: transform 0.15s ease;
}

/* Легкий интерактив при наведении на лупу */
.nav-search-btn:hover {
  transform: scale(1.1);
}