/* NS CRM - Оптимизированные стили v18.0 (календарь кнопки с контуром 27.01.2025) */
/* ===== СТРУКТУРА ФАЙЛА =====
1. ПЕРЕМЕННЫЕ И БАЗОВЫЕ СТИЛИ
2. АНИМАЦИИ И КЛЮЧЕВЫЕ КАДРЫ
3. HEADER И НАВИГАЦИЯ
4. КНОПКИ И ФОРМЫ
5. МОДАЛЬНЫЕ ОКНА
6. КАРТОЧКИ И СЕТКИ
7. СПОРТпрИВНЫЙ МОДУЛЬ
8. РЕГЛАМЕНТЫ
9. РЕДАКТОР QUILL
10. КАТЕГОРИИ И ТЕГИ
11. КАЛЕНДАРЬ
12. КОЛЕСО БАЛАНСА
13. ЦВЕТОВОЙ ПИКЕР
14. КОНТАКТЫ
15. МОДУЛЬ ЗНАНИЙ
16. МОДУЛЬ ЗДОРОВЬЯ
17. МОДУЛЬ ЦЕЛЕЙ
18. МОДУЛЬ оооо22СОТРУДНИКОВ
19. АДАПТИВНОСТЬ
*/


/* ===== 1. ПЕРЕМЕННЫЕ И БАЗОВЫЕ СТИЛИ ===== */
:root {
  /* Основные цвета */
  --primary: #667eea;
  --primary-hover: #5a67d8;
  --secondary: #667eea;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  /* Фоны */
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --bg-hover: #f3f4f6;
  --bg-active: #e5e7eb;

  /* Границы */
  --border-light: #e5e7eb;
  --border-medium: #d1d5db;
  --border-dark: #9ca3af;

  /* Цвета текста */
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-tertiary: #9ca3af;

  /* Тени */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

  /* Размеры */
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;

  /* Переходы */
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

  /* Цвета модулей */
  --sleep-color: #3498db;
  --wellbeing-color: #2ecc71;
  --mood-color: #f1c40f;
  --sport-color: #e74c3c;
  --alcohol-color: #8e44ad;
  --overeating-color: #e67e22;
  --weed-color: #27ae60;
  --weight-color: #9b59b6;

  /* Цвета методологий целей */
  --methodology-okr: #667eea;
  --methodology-smart: #059669;
  --methodology-simple: #6b7280;

  /* Цвета статусов */
  --status-draft: #6b7280;
  --status-active: #059669;
  --status-paused: #d97706;
  --status-completed: #10b981;
  --status-cancelled: #dc2626;
  --status-failed: #ef4444;

  /* Цвета приоритетов */
  --priority-low: #6b7280;
  --priority-medium: #d97706;
  --priority-high: #dc2626;
  --priority-critical: #7c2d12;

  /* Градиент для header и кнопок */
  --header-gradient: linear-gradient(45deg, #2d1b4e 0%, #1e3a5f 35%, #0d4f4f 70%, #2c2c54 100%);

  /* === УНИФИЦИРОВАННЫЕ СТИЛИ ДЛЯ СОБЫТИЙ КАЛЕНДАРЯ === */
  /* Используются во всех трех видах: месячный, недельный, дневной */
  --event-bg: var(--header-gradient);
  --event-bg-hover: var(--header-gradient);
  --event-border: 1px solid rgba(255, 255, 255, 0.2);
  --event-border-left: 4px solid rgba(255, 255, 255, 0.6);
  --event-border-radius: 8px;
  --event-text-color: white;
  --event-padding: 6px 8px;
  --event-font-size: 0.75rem;
  --event-font-weight: 500;
  --event-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --event-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.25);
  --event-transition: all 0.3s ease;

  /* Динамические градиенты для модальных окон */
  --gradient-blue: linear-gradient(45deg, #1e3a8a 0%, #3b82f6 35%, #60a5fa 70%, #93c5fd 100%);
  --gradient-green: linear-gradient(45deg, #065f46 0%, #059669 35%, #10b981 70%, #34d399 100%);
  --gradient-orange: linear-gradient(45deg, #92400e 0%, #d97706 35%, #f59e0b 70%, #fbbf24 100%);
  --gradient-purple: linear-gradient(45deg, #581c87 0%, #7c3aed 35%, #a855f7 70%, #c084fc 100%);
  --gradient-dark: linear-gradient(45deg, #111827 0%, #1f2937 35%, #374151 70%, #4b5563 100%);
  --gradient-sunset: linear-gradient(45deg, #7c2d12 0%, #dc2626 35%, #f97316 70%, #fbbf24 100%);
}

/* Сброс стилей */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, .section {
  margin: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  width: 100vw !important;
}

/* ИСКЛЮЧЕНИЕ ДЛЯ СТРАНИЦЫ "СЕГОДНЯ": используем 100% вместо 100vw */
body:has(.today-main) .section,
body:has(.today-main) html,
body:has(.today-main) body {
  width: 100% !important; /* КРИТИЧНО: 100% учитывает padding, 100vw - НЕТ! */
}

/* ⚠️ КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ ДЛЯ СТРАНИЦЫ "СЕГОДНЯ":
   100vw НЕ УЧИТЫВАЕТ PADDING! Используем 100% для body и html */
body:has(.today-main),
html:has(body:has(.today-main)) {
  width: 100% !important; /* КРИТИЧНО: 100% учитывает padding, 100vw - НЕТ! */
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

body:has(.today-main).section {
  width: 100% !important;
  max-width: 100% !important;
}

/* ИСКЛЮЧЕНИЕ ДЛЯ СТРАНИЦЫ "СЕГОДНЯ" - ПРАВИЛЬНЫЕ ОТСТУПЫ */
.today-main {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ДИАГНОСТИКА: ЯВНОЕ ОГРАНИЧЕНИЕ ШИРИНЫ ДЛЯ СТРАНИЦЫ "СЕГОДНЯ" */
body:has(.today-main) {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: linear-gradient(45deg, #2d1b4e 0%, #1e3a5f 35%, #0d4f4f 70%, #2c2c54 100%) !important;
  background-size: 600% 600% !important;
  animation: headerGradientShift 12s ease-in-out infinite !important;
}

body:has(.today-main) .today-main {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ: html для страницы "Сегодня" */
html:has(body:has(.today-main)) {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* ИСКЛЮЧЕНИЕ ДЛЯ ЭЛЕМЕНТОВ АВТОРИЗАЦИИ - ВОЗВРАЩАЕМ ИСХОДНЫЕ ОТСТУПЫ */
.auth-card,
.auth-container,
.auth-page {
  padding: initial !important; /* ВОЗВРАЩАЕМ ИСХОДНЫЕ ОТСТУПЫ */
}

/* ИСКЛЮЧЕНИЕ ДЛЯ ШИРИНЫ ЭЛЕМЕНТОВ АВТОРИЗАЦИИ */
.auth-container {
  width: 100% !important; /* ПРИНУДИТЕЛЬНАЯ ШИРИНА 100% */
  max-width: 380px !important; /* ПРИНУДИТЕЛЬНАЯ МАКСИМАЛЬНАЯ ШИРИНА 380px */
  box-sizing: border-box !important; /* ВАЖНО: правильный расчет ширины с padding */
}

/* ИСКЛЮЧЕНИЕ ДЛЯ ЭЛЕМЕНТОВ АВТОРИЗАЦИИ - ЗАЩИТА ОТ ГЛОБАЛЬНЫХ ПРАВИЛ */
html:has(.auth-page) .auth-container,
body:has(.auth-page) .auth-container,
.auth-page .auth-container {
  width: 100% !important;
  max-width: 380px !important;
  min-width: 280px !important; /* МИНИМАЛЬНАЯ ШИРИНА ДЛЯ МОБИЛЬНЫХ */
}

.container {
  margin: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  width: 100vw !important;
}

/* ИСКЛЮЧЕНИЕ ДЛЯ КОНТЕЙНЕРА АВТОРИЗАЦИИ */
.auth-page .container {
  padding: initial !important; /* ВОЗВРАЩАЕМ ИСХОДНЫЕ ОТСТУПЫ */
  width: initial !important; /* ВОЗВРАЩАЕМ ИСХОДНУЮ ШИРИНУ */
  max-width: initial !important; /* ВОЗВРАЩАЕМ ИСХОДНУЮ МАКСИМАЛЬНУЮ ШИРИНУ */
}

body {
  background: #f7fafc;
  color: #222;
  font-family: 'Segoe UI', Arial, sans-serif;
  min-height: 100vh;
}

/* ===== 2. АНИМАЦИИ И КЛЮЧЕВЫЕ КАДРЫ ===== */
@keyframes headerGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes progress-shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== 3. HEADER И НАВИГАЦИЯ ===== */

/* Иконки навигации — Font Awesome */
.nav-item > .nav-icon {
  color: #e8b84b;
  margin-right: 6px;
  font-size: 1rem;
  vertical-align: middle;
}
.nav-dropdown a .nav-icon,
.nav-dropdown .submenu-trigger .nav-icon,
.submenu-dropdown a .nav-icon {
  color: #667eea;
  margin-right: 8px;
  width: 18px;
  text-align: center;
  font-size: 0.9rem;
  display: inline-block;
  vertical-align: middle;
}
.header-root, #header-root {
  align-items: center;
  animation: headerGradientShift 12s ease-in-out infinite !important;
  background-size: 600% 600% !important;
  background: var(--header-gradient) !important;
  box-shadow: 0 2px 8px #0002;
  color: #fff;
  display: flex;
  height: 72px;
  justify-content: space-between;
  padding: 0 32px;
  position: sticky;
  top: 0;
  width: 100vw;
  z-index: 1000;
}

.header-logo {
  height: 40px;
  transition: transform 0.2s;
  width: auto;
}

.header-logo-link {
  align-items: center;
  color: inherit;
  display: flex;
  text-decoration: none;
  transition: transform 0.2s;
}

.header-logo-link:hover {
  transform: scale(1.05);
}

/* Информация об обновлении в шапке */
.header-update-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 0.75rem;
  color: #9ca3af;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  margin-right: 16px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(156, 163, 175, 0.1);
  border: 1px solid rgba(156, 163, 175, 0.2);
  min-width: 120px;
  text-align: center;
}

/* Динамические градиенты для модальных окон */
.gradient-blue {
  background: var(--gradient-blue) !important;
  background-size: 600% 600% !important;
  animation: headerGradientShift 12s ease-in-out infinite !important;
}

.gradient-green {
  background: var(--gradient-green) !important;
  background-size: 600% 600% !important;
  animation: headerGradientShift 12s ease-in-out infinite !important;
}

.gradient-orange {
  background: var(--gradient-orange) !important;
  background-size: 600% 600% !important;
  animation: headerGradientShift 12s ease-in-out infinite !important;
}

.gradient-purple {
  background: var(--gradient-purple) !important;
  background-size: 600% 600% !important;
  animation: headerGradientShift 12s ease-in-out infinite !important;
}

.gradient-dark {
  background: var(--gradient-dark) !important;
  background-size: 600% 600% !important;
  animation: headerGradientShift 12s ease-in-out infinite !important;
}

.gradient-sunset {
  background: var(--gradient-sunset) !important;
  background-size: 600% 600% !important;
  animation: headerGradientShift 12s ease-in-out infinite !important;
}

.header-update-info:hover {
  opacity: 1;
  background: rgba(156, 163, 175, 0.15);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-update-info .update-date {
  font-weight: 500;
  color: #6b7280;
  font-size: 0.7rem;
  line-height: 1;
  text-align: center;
  width: 100%;
}



.header-update-info .update-ago {
  opacity: 0.8;
  font-size: 0.7rem;
  line-height: 1;
  color: #6b7280;
  font-weight: 500;
  text-align: center;
  width: 100%;
}

.header-nav {
  display: flex;
  gap: 0;
  position: relative;
  z-index: 2;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.nav-item {
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: 1.08em;
  padding: 8px 22px;
  position: relative;
  transition: background 0.18s;
  user-select: none;
  white-space: nowrap;
  min-width: fit-content;
  flex-shrink: 0;
}

.nav-item:hover, .nav-item.active {
  background: rgba(255,255,255,0.10);
}

.nav-has-dropdown {
  position: relative;
}

/* CSS анимации отключены - управление через JavaScript */
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown {
  /* display: block; - управляется через JavaScript */
  pointer-events: auto;
  /* transition-delay: 0s; - не нужно */
}

.nav-dropdown {
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 4px 16px #0002;
  color: #222;
  display: none;
  left: 0;
  min-width: 220px;
  width: max-content;
  padding: 6px 0;
  pointer-events: auto;
  position: absolute;
  top: 100%;
  margin-top: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
  z-index: 10;
}

.nav-dropdown a {
  border-radius: 6px;
  color: #222;
  display: block;
  font-size: 1em;
  line-height: 1.2;
  margin: 1px 6px;
  padding: 6px 14px;
  text-decoration: none;
  transition: background 0.15s;
  white-space: nowrap;
}

.nav-dropdown a:hover {
  background: #f3f4f6;
  color: #2563eb;
}

/* Стили для подменю */
.nav-submenu {
  position: relative;
}

.submenu-trigger {
  position: relative;
  padding-right: 30px !important;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.submenu-trigger::after {
  content: '▶';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  transition: transform 0.2s;
}

.nav-submenu.active .submenu-trigger::after {
  transform: translateY(-50%) rotate(90deg);
}

.submenu-dropdown {
  position: absolute;
  left: 100%;
  top: 0;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 4px 16px #0002;
  min-width: 200px;
  width: max-content;
  padding: 8px 0;
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 11;
  margin-left: -5px;
}

/* Убираем автоматическое открытие по hover - теперь управляется JavaScript */
.nav-submenu.active .submenu-dropdown {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Создаем невидимую область перехода между триггером и dropdown */
.nav-submenu.active::after {
  content: '';
  position: absolute;
  left: 95%;
  top: 0;
  width: 10px;
  height: 100%;
  background: transparent;
  z-index: 10;
}

/* Специальные стили для подменю в начале списка */
.nav-dropdown > .nav-submenu:first-child .submenu-dropdown {
  top: 0;
  left: 100%;
}

/* Увеличиваем зону перехода для первого подменю */
.nav-dropdown > .nav-submenu:first-child.active::after {
  width: 15px;
  left: 90%;
}

.submenu-dropdown a {
  margin: 1px 6px;
  padding: 6px 14px;
  font-size: 0.95em;
  line-height: 1.2;
}

.submenu-dropdown a:hover {
  background: #f3f4f6;
  color: #2563eb;
}

/* Разделитель в выпадающем меню */
.dropdown-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 8px 0;
  opacity: 0.6;
  /* Добавляем минимальную высоту для стабильной навигации */
  min-height: 1px;
  pointer-events: none; /* Разделитель не перехватывает события мыши */
}

/* Улучшенные стили для разделителей в подменю */
.submenu-dropdown .dropdown-divider {
  margin: 6px 8px;
  opacity: 0.8;
  border-top-color: #d1d5db;
}

/* Улучшенные стили для разделителей в основных dropdown */
.nav-dropdown .dropdown-divider {
  margin: 4px 10px;
  opacity: 0.5;
  border-top-color: #e5e7eb;
}

/* Группировка элементов в меню */
.nav-dropdown a {
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-dropdown a:hover {
  background-color: #f3f4f6;
  color: #2563eb;
}

.header-right {
  align-items: center;
  display: flex;
  gap: 32px;
}

.header-datetime {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  margin-right: 18px;
}

.header-date {
  color: #fff;
  font-size: 1.08em;
  font-weight: 500;
  opacity: 0.92;
}

.header-time {
  color: #ffe066;
  font-size: 1.3em;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.header-user {
  align-items: center;
  background: rgba(255,255,255,0.10);
  border-radius: 8px;
  box-shadow: 0 1px 4px #0001;
  display: flex;
  gap: 10px;
  padding: 6px 16px 6px 10px;
}

.header-avatar {
  align-items: center;
  background: #fff3;
  border-radius: 50%;
  display: flex;
  font-size: 1.2rem;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.header-user-info {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}

.header-user-name {
  color: #fff;
  font-size: 0.95em;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.header-user-role {
  color: rgba(255,255,255,0.8);
  font-size: 0.85em;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ===== 4. КНОПКИ И ФОРМЫ ===== */
.btn, .btn-primary, .btn-secondary, .add-btn, .filter-btn {
  background: var(--header-gradient);
  background-size: 600% 600%;
  animation: headerGradientShift 12s ease-in-out infinite;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 10px 20px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.9;
}

.btn:hover, .btn-primary:hover, .btn-secondary:hover, .add-btn:hover, .filter-btn:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 27, 78, 0.3);
}

/* Стили для нажатого состояния основных кнопок */
.btn:active, .btn-primary:active, .btn-secondary:active, .add-btn:active, .filter-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(45, 27, 78, 0.3);
  opacity: 0.8;
}

.btn-danger {
  background: #dc3545;
  border-radius: 8px;
  border: none;
  color: white;
  cursor: pointer;
  font-weight: 500;
  padding: 12px 24px;
  transition: all 0.2s;
}

.btn-danger:hover {
  background: #c82333;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
  transform: translateY(-1px);
}

/* Кнопки переноса события (Завтра / +7 дней) — отдельный ряд над form-actions */
.event-status-toggles {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}
.btn-status-toggle {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6b7280;
}
.btn-status-toggle:hover { background: #f9fafb; }
.btn-toggle-completed.active {
  background: #dcfce7;
  border-color: #22c55e;
  color: #15803d;
}
.btn-toggle-important.active {
  background: #fee2e2;
  border-color: #ef4444;
  color: #dc2626;
}

/* Recurrence panel */
.recurrence-custom-panel {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recurrence-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #374151;
}
.recurrence-row span { white-space: nowrap; }
.recurrence-interval-input {
  width: 60px;
  padding: 5px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.85rem;
  text-align: center;
}
.recurrence-weekdays {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.btn-weekday {
  width: 36px;
  height: 32px;
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 500;
  color: #6b7280;
  transition: all 0.15s;
  padding: 0;
}
.btn-weekday:hover { background: #f3f4f6; }
.btn-weekday.active {
  background: #dbeafe;
  border-color: #3b82f6;
  color: #1d4ed8;
}

.postpone-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 0;
  border-top: 1px solid #e5e7eb;
  margin-top: 12px;
}

.postpone-label {
  font-size: 0.82rem;
  color: #6b7280;
  font-weight: 500;
  white-space: nowrap;
  margin-right: 4px;
}

.btn-postpone {
  background: #475569;
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.85rem;
  padding: 10px 16px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.btn-postpone:hover {
  background: #334155;
  box-shadow: 0 4px 12px rgba(51, 65, 85, 0.35);
  transform: translateY(-1px);
}

.btn-postpone:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-success {
  background: #10b981;
  color: white;
}

.btn-success:hover {
  background: #059669;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 0.75rem;
  border-radius: 6px;
}

.btn-icon {
  padding: 10px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: #6b7280;
  transition: all 0.2s ease;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.btn-icon:hover {
  background: white;
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.btn-icon:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(102, 126, 234, 0.2);
}

/* ===== УНИФИЦИРОВАННАЯ СИСТЕМА ФОРМ ===== */

/* Группы полей - УНИФИЦИРОВАННЫЕ ОТСТУПЫ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 5px; /* Унифицированный отступ снизу - изменен с 10px на 5px */
  position: relative;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

/* Улучшенные лейблы */
.form-group label {
  color: #374151;
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  transition: color 0.2s ease;
}

.form-group label.required::after {
  content: ' *';
  color: #dc2626;
}

/* Поля ввода */
.form-group input,
.form-group textarea,
.form-group select {
  border-radius: 12px;
  border: 2px solid #e5e7eb;
  box-sizing: border-box;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  margin-bottom: 0;
  padding: 12px 16px;
  transition: all 0.2s ease;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
  outline: none;
  background: white;
  transform: translateY(-1px);
}

.form-group input:hover:not(:focus),
.form-group textarea:hover:not(:focus),
.form-group select:hover:not(:focus) {
  border-color: #d1d5db;
  background: white;
}

/* Дополнительные стили для select в формах */
.form-group select {
  padding-right: 40px; /* Место для стрелки */
}

.form-group textarea {
  resize: vertical;
  min-height: auto; /* Убираем фиксированную минимальную высоту */
  line-height: 1.5;
  font-size: 16px;
}

/* Файловые поля */
.form-group input[type="file"] {
  border: 2px dashed #d1d5db;
  background: #f9fafb;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 12px;
}

.form-group input[type="file"]:hover {
  border-color: #667eea;
  background: #f0f4ff;
}

/* Глобальное удаление placeholder подсказок */
input::placeholder,
textarea::placeholder,
select::placeholder {
  opacity: 0 !important;
  color: transparent !important;
}

/* Альтернативный способ для старых браузеров */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder {
  opacity: 0 !important;
  color: transparent !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder,
select::-moz-placeholder {
  opacity: 0 !important;
  color: transparent !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
select:-ms-input-placeholder {
  opacity: 0 !important;
  color: transparent !important;
}

/* Унифицированная высота полей в модальных окнах */
.modal-template .form-group input[type="text"],
.modal-template .form-group input[type="email"],
.modal-template .form-group input[type="password"],
.modal-template .form-group input[type="search"],
.modal-template .form-group input[type="tel"],
.modal-template .form-group input[type="url"],
.modal-template .form-group input[type="number"],
.modal-template .form-group select {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  line-height: 1.5 !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
}

/* Специальная высота для textarea в одну строку */
.modal-template .form-group textarea[rows="1"] {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  resize: none !important;
  overflow: hidden !important;
  line-height: 1.5 !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
}

/* Исключение для файловых полей */
.modal-template .form-group input[type="file"] {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  padding: 20px !important;
}

/* Сетки полей */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px; /* Изменен с 10px на 5px для консистентности */
  margin-bottom: 0;
}

.form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px; /* Изменен с 10px на 5px для консистентности */
  margin-bottom: 0;
}

.form-fields {
  display: grid;
  gap: 5px; /* Изменен с 10px на 5px для консистентности */
  grid-template-columns: 1fr;
}

.adaptive-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Действия форм */
.form-actions {
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 20px;
}

/* Валидация полей */
.form-group.error input,
.form-group.error textarea,
.form-group.error select {
  border-color: #dc2626;
  background: #fef2f2;
}

.form-group.error label {
  color: #dc2626;
}

.form-group.success input,
.form-group.success textarea,
.form-group.success select {
  border-color: #16a34a;
  background: #f0fdf4;
}

.form-group.success label {
  color: #16a34a;
}

/* Хелперы */
.form-helper {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
  line-height: 1.4;
}

.form-error {
  font-size: 12px;
  color: #dc2626;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-error::before {
  content: '⚠️';
  font-size: 10px;
}

/* Адаптивная сетка форм */
@media (min-width: 768px) {
  .form-fields {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .form-fields {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1400px) {
  .form-fields {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===== КНОПКИ ДЕЙСТВИЙ (ACTION BUTTONS) ===== */
/* Кнопки действий - располагаются в правой части экрана на линии названия страницы */
.action-btn {
  background: var(--header-gradient);
  background-size: 600% 600%;
  animation: headerGradientShift 12s ease-in-out infinite;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 10px 20px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.9;
  box-shadow: 0 2px 8px rgba(45, 27, 78, 0.2);
  position: relative;
  z-index: 10;
}

.action-btn:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(45, 27, 78, 0.4);
}

.action-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(45, 27, 78, 0.3);
}

/* Размеры кнопок действий */
.action-btn-sm {
  padding: 8px 16px;
  font-size: 0.8rem;
  border-radius: 6px;
}

.action-btn-lg {
  padding: 12px 24px;
  font-size: 1rem;
  border-radius: 10px;
}

/* Кнопки действий с иконками */
.action-btn-icon {
  padding: 10px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn-icon.action-btn-sm {
  width: 32px;
  height: 32px;
  padding: 6px;
}

.action-btn-icon.action-btn-lg {
  width: 48px;
  height: 48px;
  padding: 14px;
}

/* Контейнер для группы кнопок действий */
.action-buttons-container {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  padding: 0 20px;
}

/* Адаптивность для кнопок действий */
@media (max-width: 768px) {
  .action-buttons-container {
    padding: 0 10px;
    gap: 8px;
  }

  .action-btn {
    padding: 8px 16px;
    font-size: 0.8rem;
  }

  .action-btn-icon {
    width: 36px;
    height: 36px;
    padding: 8px;
  }
}


/* ===== 5. МОДАЛЬНЫЕ ОКНА ===== */
.modal, .employee-modal, .user-profile-modal, .universal-modal {
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
  box-sizing: border-box;
  display: none;
  height: 100vh;
  justify-content: center;
  left: 0;
  padding: 20px;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 2000;
}

.modal.active, .employee-modal.active, .user-profile-modal.active, .universal-modal.active {
  display: flex;
}

.modal-content, .universal-modal-content {
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  margin: auto;
  max-height: 90vh;
  max-width: 450px; /* Уменьшено с 600px до 450px */
  overflow: hidden;
  position: relative;
  width: 90%;
}

/* ===== УЛУЧШЕННЫЕ МОДАЛЬНЫЕ ОКНА ===== */

/* Заголовок модального окна (сохраняем любимый градиент!) */
.modal-header {
  align-items: center;
  animation: headerGradientShift 16s ease-in-out infinite;
  background: var(--header-gradient);
  background-size: 400% 400%;
  color: white;
  display: flex;
  justify-content: space-between;
  min-height: 37px;
  padding: 10px 24px;
  position: relative;
  border-radius: 12px 12px 0 0;
}

.modal-header h3 {
  flex: 1;
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* Кнопка закрытия */
.modal-close-btn, .modal-close {
  background: none;
  border-radius: 8px;
  border: none;
  color: white;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1.4rem;
  opacity: 0.8;
  padding: 12px 16px;
  transition: all 0.2s ease;
  margin: 8px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close-btn:hover, .modal-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffeb3b;
  opacity: 1;
  transform: scale(1.1);
  border-radius: 12px;
}

.modal-close-btn:active, .modal-close:active {
  transform: scale(0.95);
}

/* Универсальные модальные окна */
.modal-template {
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  box-sizing: border-box;
  display: none;
  height: 100vh;
  justify-content: center;
  left: 0;
  padding: 20px;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-template.active {
  display: flex;
  opacity: 1;
}

.modal-template-content {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  margin: auto;
  max-height: 90vh;
  max-width: 450px; /* Такая же ширина, как у модального окна проектов */
  overflow: hidden;
  position: relative;
  width: 90%;
  animation: modalSlideIn 0.4s ease-out;
}

.modal-template-content.wide {
  max-width: 1000px;
}

/* Переопределяем для модального окна списка категорий */
.category-management.wide {
  max-width: 800px !important;
  width: 90vw !important;
}

@media (min-width: 1200px) {
  .category-management.wide {
    max-width: 800px !important;
    width: 800px !important;
  }
}

/* Удалено - будет создано заново */

/* Заголовки модальных окон */
.modal-template-header {
  align-items: center;
  animation: headerGradientShift 16s ease-in-out infinite;
  background: var(--header-gradient);
  background-size: 400% 400%;
  color: white;
  display: flex;
  justify-content: space-between;
  min-height: 37px;
  padding: 10px 24px;
  position: relative;
  border-radius: 16px 16px 0 0;
}

.modal-template-title {
  flex: 1;
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.modal-template-close {
  background: none;
  border-radius: 8px;
  border: none;
  color: white;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1.4rem;
  opacity: 0.8;
  padding: 12px 16px;
  transition: all 0.2s ease;
  margin: 8px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-template-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffeb3b;
  opacity: 1;
  transform: scale(1.1);
  border-radius: 12px;
}

/* Содержимое модальных окон */
.modal-template-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: #fafbfc;
  min-height: 200px;
}

.modal-template-actions {
  background: white;
  padding: 20px 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  border-top: 1px solid #e5e7eb;
  border-radius: 0 0 16px 16px;
}

/* Стили для кнопок в модальных окнах */
.modal-template-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.modal-template-btn.primary {
  background: var(--header-gradient);
  background-size: 600% 600%;
  animation: headerGradientShift 12s ease-in-out infinite;
  color: white;
}

.modal-template-btn.primary:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 27, 78, 0.3);
}

.modal-template-btn.secondary {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

.modal-template-btn.secondary:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.modal-template-btn.danger {
  background: #dc3545;
  color: white;
}

.modal-template-btn.danger:hover {
  background: #c82333;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
  transform: translateY(-1px);
}

.modal-template-btn.success {
  background: #10b981;
  color: white;
}

.modal-template-btn.success:hover {
  background: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.modal-footer {
  padding: 16px 24px 24px 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Универсальное модальное окно */
.universal-modal {
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

/* Унифицированные стили для полей форм в модальных окнах */
.modal-form-field {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 16px;
  font-family: 'Segoe UI', Arial, sans-serif;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  box-sizing: border-box;
}

.modal-form-field:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  transform: translateY(-2px);
  outline: none;
  background: white;
}

.modal-form-field:hover:not(:focus) {
  border-color: #d1d5db;
  background: white;
}

/* Специальные стили для textarea в модальных окнах */
.modal-form-field[tagName="TEXTAREA"] {
  resize: vertical;
  min-height: auto; /* Убираем фиксированную минимальную высоту */
  line-height: 1.5;
}

/* ===== ГЛОБАЛЬНЫЕ СТИЛИ ДЛЯ SELECT ЭЛЕМЕНТОВ ===== */
/* Унифицированные стили для всех select элементов */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236b7280%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-12.8z%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px auto;
  padding-right: 40px;
  border-radius: var(--border-radius);
  transition: var(--transition);
}

/* Стили для выпадающего списка (dropdown) */
select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

/* Стили для опций в select */
select option {
  border-radius: var(--border-radius);
  padding: 8px 12px;
  background: white;
  color: var(--text-primary);
  border: none;
}

/* Специальные стили для select в модальных окнах */
.modal-form-field[tagName="SELECT"] {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-12.8z%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px auto;
  padding-right: 40px;
}

.universal-modal-content {
  animation: modalSlideIn 0.3s ease-out;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 1000px;
  min-width: 300px;
  width: 90%;
}

.universal-modal-content .modal-body {
  box-sizing: border-box;
  margin-top: 24px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 0 24px 24px 24px;
  width: 100%;
}

.universal-modal-content .profile-header {
  align-items: center;
  animation: headerGradientShift 16s ease-in-out infinite;
  background: var(--header-gradient);
  background-size: 400% 400%;
  border-radius: 20px 20px 0 0;
  color: white;
  display: flex;
  justify-content: space-between;
  margin: 0;
  min-height: 37px;
  padding: 10px 24px;
  position: relative;
  z-index: 1;
}

.universal-modal-content .close-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1.5rem;
  opacity: 0.8;
  padding: 4px;
  position: absolute;
  right: 24px;
  top: 16px;
  transition: var(--transition);
  z-index: 2;
}

.universal-modal-content .close-btn:hover {
  color: var(--danger);
  opacity: 1;
}

/* Адаптивная сетка для универсальной модальной формы */
@media (min-width: 768px) {
  .universal-modal-content .form-fields {
    grid-template-columns: repeat(2, 1fr);
  }
  .universal-modal-content {
    max-width: 800px;
  }
}

@media (min-width: 1024px) {
  .universal-modal-content .form-fields {
    grid-template-columns: repeat(3, 1fr);
  }
  .universal-modal-content {
    max-width: 1000px;
  }
}

@media (min-width: 1400px) {
  .universal-modal-content .form-fields {
    grid-template-columns: repeat(4, 1fr);
  }
  .universal-modal-content {
    max-width: 1200px;
  }
}

@media (max-width: 700px) {
  .universal-modal-content .form-fields {
    grid-template-columns: 1fr;
  }
  .universal-modal-content .modal-body {
    padding: 0 8px 16px 8px;
  }
}


/* ===== ПРОФИЛЬ ПОЛЬЗОВАТЕЛЯ (модальное окно из хедера) ===== */

.user-profile-content {
  animation: modalSlideIn 0.3s ease-out;
  background: #fff;
  border-radius: var(--border-radius-xl);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI', Arial, sans-serif;
  margin: auto;
  max-height: 92vh;
  max-width: calc(100vw - 40px);
  overflow: hidden;
  position: relative;
  width: 760px;
}

/* Заголовок — фирменный градиент */
.user-profile-content .profile-header {
  align-items: center;
  animation: headerGradientShift 16s ease-in-out infinite;
  background: var(--header-gradient);
  background-size: 400% 400%;
  border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
  color: #fff;
  display: flex;
  justify-content: space-between;
  min-height: 56px;
  padding: 16px 20px 16px 28px;
}

.user-profile-content .profile-header h3 {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
}

.user-profile-content .profile-header .close-btn {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  opacity: 0.8;
  padding: 7px 10px;
  transition: background 0.2s, opacity 0.2s, transform 0.15s;
}

.user-profile-content .profile-header .close-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  opacity: 1;
  transform: scale(1.1);
}

/* Вкладки */
.user-profile-content .profile-tabs {
  background: #f8f9fb;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  padding: 0 20px;
}

.user-profile-content .tab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  margin-bottom: -1px;
  padding: 14px 20px;
  transition: color 0.18s, border-color 0.18s;
  white-space: nowrap;
}

.user-profile-content .tab-btn:hover {
  color: var(--text-primary);
}

.user-profile-content .tab-btn.active {
  border-bottom-color: #3b4fcf;
  color: #3b4fcf;
  font-weight: 600;
}

/* Контентная область — фиксированная высота, чтобы модалка не прыгала */
.user-profile-content .tab-content {
  height: 460px;
  overflow-y: auto;
}

.user-profile-content .tab-pane {
  display: none;
  padding: 28px 32px 28px;
}

.user-profile-content .tab-pane.active {
  display: block;
}

/* Поля формы — 2 колонки, раз места достаточно */
.user-profile-content .form-fields {
  display: grid;
  gap: 18px 24px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 24px;
}

.user-profile-content .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.user-profile-content .form-group label {
  color: var(--text-secondary);
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.user-profile-content .form-group input {
  background: #f8f9fb;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-medium);
  box-sizing: border-box;
  color: var(--text-primary);
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 0.97rem;
  outline: none;
  padding: 10px 14px;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  width: 100%;
}

.user-profile-content .form-group input:focus {
  background: #fff;
  border-color: #3b4fcf;
  box-shadow: 0 0 0 3px rgba(59, 79, 207, 0.12);
}

.user-profile-content .form-group input[readonly] {
  background: #f1f3f7;
  color: var(--text-secondary);
  cursor: default;
}

/* Кнопка сохранения */
.user-profile-content .form-actions {
  display: flex;
  justify-content: flex-end;
}

.user-profile-content .form-actions .btn-primary {
  animation: headerGradientShift 12s ease-in-out infinite;
  background: var(--header-gradient);
  background-size: 600% 600%;
  border-radius: 8px;
  border: none;
  color: #fff;
  cursor: pointer;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  opacity: 0.92;
  padding: 11px 32px;
  transition: opacity 0.18s, transform 0.15s, box-shadow 0.18s;
}

.user-profile-content .form-actions .btn-primary:hover {
  box-shadow: 0 4px 14px rgba(45, 27, 78, 0.3);
  opacity: 1;
  transform: translateY(-1px);
}

.user-profile-content .form-actions .btn-primary:active {
  box-shadow: 0 2px 8px rgba(45, 27, 78, 0.25);
  opacity: 0.85;
  transform: translateY(0);
}

/* Секция администрирования */
.user-profile-content .admin-section h4 {
  color: var(--text-secondary);
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
  text-transform: uppercase;
}

.user-profile-content .admin-links {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.user-profile-content .admin-link {
  align-items: center;
  background: #f8f9fb;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.15s;
}

.user-profile-content .admin-link:hover {
  background: #fff;
  border-color: #3b4fcf;
  box-shadow: 0 2px 10px rgba(59, 79, 207, 0.1);
  transform: translateY(-1px);
}

.user-profile-content .admin-link-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.user-profile-content .admin-link-text {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
}

/* Мобильная адаптация профиля */
@media (max-width: 820px) {
  .user-profile-content {
    width: calc(100vw - 32px);
  }
  .user-profile-content .form-fields {
    grid-template-columns: 1fr;
  }
  .user-profile-content .admin-links {
    grid-template-columns: 1fr;
  }
  .user-profile-content .tab-content {
    height: auto;
    min-height: 280px;
  }
}

/* ===== 6. КАРТОЧКИ И СЕТКИ ===== */
.main-container, .employee-main {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: calc(100vh - 72px);
  padding: 32px 0;
  width: 100vw;
}

.page-content, .columns-list {
  box-sizing: border-box;
  padding: 0 24px;
  width: 100%;
}

/* ===== УНИФИЦИРОВАННАЯ СИСТЕМА КАРТОЧЕК ===== */

/* Сетки для карточек */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
  justify-content: start;
}

/* Базовая карточка */
.ns-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.ns-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Типы карточек */
.ns-card--dashboard {
  background: var(--bg-primary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  cursor: default;
}

.ns-card--content {
  border-left: 4px solid var(--col, #667eea);
  padding: 20px;
}

.ns-card--project {
  border-left: 4px solid var(--col, #667eea);
  padding: 20px;
}

.ns-card--idea {
  border-left: 4px solid var(--col, #667eea);
  padding: 20px;
}

.ns-card--note {
  border-left: 4px solid var(--col, #667eea);
  padding: 20px;
}

.ns-card--checklist {
  border-left: 4px solid var(--col, #667eea);
  padding: 20px;
}

/* Дашборд карточки */
.dashboard-card {
  background: var(--col, #eef2ff);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  padding: 20px;
  transition: all 0.2s ease;
}

.dashboard-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dashboard-card.full-width {
  grid-column: 1 / -1;
}

/* ===== НОВЫЕ СТИЛИ КАРТОЧЕК ДАШБОРДА ===== */

/* Карточки-ссылки для дашборда */
.dashboard-link-card {
  background: var(--col, #eef2ff);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  padding: 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
  text-decoration: none;
  color: inherit;
  display: block;
}

.dashboard-link-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, var(--col, #eef2ff) 0%, rgba(255, 255, 255, 0.8) 100%);
}

.dashboard-link-card:active {
  transform: translateY(-2px);
  transition: all 0.1s ease;
}

/* Заголовок карточки */
.dashboard-link-card .section-header {
  margin-bottom: 16px;
}

.dashboard-link-card .section-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.dashboard-link-card .section-name i {
  font-size: 1.5rem;
  color: rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease;
}

.dashboard-link-card:hover .section-name i {
  color: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

/* Описание карточки */
.dashboard-link-card .section-description {
  color: #6b7280;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 16px;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.dashboard-link-card:hover .section-description {
  opacity: 1;
  color: #4b5563;
}

/* Индикатор перехода */
.dashboard-link-card::after {
  content: '→';
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 1.5rem;
  color: rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  font-weight: 300;
}

.dashboard-link-card:hover::after {
  color: rgba(0, 0, 0, 0.6);
  transform: translateX(4px);
}

/* Адаптивность для карточек */
@media (max-width: 768px) {
  .dashboard-link-card {
    padding: 20px;
  }

  .dashboard-link-card .section-name {
    font-size: 1.1rem;
  }

  .dashboard-link-card .section-description {
    font-size: 0.9rem;
  }
}

/* ===== ОБНОВЛЕННЫЕ СТИЛИ СЕТКИ ДАШБОРДА ===== */

/* Сетка для новых карточек дашборда */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  padding: 20px;
  box-sizing: border-box;
}

/* Адаптивность сетки */
@media (max-width: 1200px) {
  .dash-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .dash-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .dash-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 12px;
  }
}

/* Заголовки карточек */
.card-header, .ns-card__header {
  margin: -20px -20px 16px -20px;
  padding: 20px 24px 16px 24px;
  border-bottom: 1px solid var(--border-light);
  background: color-mix(in srgb, var(--col, #667eea) 50%, transparent);
  border-radius: 8px 8px 0 0;
}

.card-header h3,
.card-header h4,
.ns-card__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  cursor: pointer;
}

.card-content, .ns-card__content {
  padding: 24px;
}

/* Заголовки контентных карточек */
.ns-card__header-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ns-card__title-inline {
  font-weight: 600;
  font-size: 1.1rem;
  color: #1f2937;
  margin: 0;
  cursor: pointer;
  flex: 1;
}

.ns-card__badge {
  background: var(--col, #667eea);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-left: 8px;
}

/* Контент карточек */
.ns-card__body {
  color: #4b5563;
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 200px;
  overflow-y: auto;
}

.ns-card__body.empty {
  color: #9ca3af;
  font-style: italic;
}

/* Подвал карточек */
.ns-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.ns-card__date {
  font-size: 0.875rem;
  color: #6b7280;
}

.ns-card__actions {
  display: flex;
  gap: 8px;
}

.ns-card__action-btn {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s;
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ns-card__action-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.ns-card__action-btn.delete:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* Файлы в карточках */
.ns-card__files {
  margin-top: 12px;
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
}

.ns-card__files-header {
  margin-bottom: 8px;
}

.ns-card__files-title {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

.ns-card__files-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ns-card__file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  gap: 8px;
}



/* Drag and drop для карточек */
.ns-card.dragging {
  opacity: 0.5;
  transform: rotate(5deg);
  z-index: 1000;
  cursor: grabbing;
}

/* Статистические карточки */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.stat-item {
  text-align: center;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-light);
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--info);
  margin: 0;
}

.stat-label {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 4px 0 0 0;
}

/* ===== СОВРЕМЕННЫЕ ЗАГОЛОВКИ СТРАНИЦ ===== */

/* Глобальные стили для основных контейнеров страниц */
.page-main-unified {
  min-height: calc(100vh - 72px);
  width: 100%;
  margin: 0;
  padding: 16px 0 32px 0; /* Правильный padding для выравнивания кнопок */
  display: flex;
  flex-direction: column;
}

/* Унифицированный заголовок страницы с правильной структурой */
.page-header-unified {
  display: flex;
  flex-direction: column; /* Вертикальное расположение для названия + категории */
  align-items: flex-start;
  gap: 16px;
  margin: 0 24px 24px 24px;
  flex-wrap: nowrap;
  min-height: 80px;
  padding: 10px 0;
  border-bottom: 1px solid #e5e7eb;
}

.page-header-unified .page-title-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

/* Первая строка: название + кнопки действий */
.page-header-unified .header-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 16px;
}

/* Унифицированный стиль теперь наследуется от глобального .page-title */

.page-header-unified .page-subtitle {
  color: #6b7280;
  font-size: 1rem;
  margin: 0;
  line-height: 1.4;
}

/* Секция с кнопками категорий под названием */
.page-header-unified .category-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}



/* Секция с кнопками действий в первой строке */
.page-header-unified .actions-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  flex-shrink: 0;
  min-width: 0;
}

/* ===== УНИФИЦИРОВАННЫЕ СТИЛИ ДЛЯ КАТЕГОРИЙ ===== */

/* УНИФИЦИРОВАННЫЕ ОТСТУПЫ ДЛЯ ВСЕХ СТРАНИЦ С КАТЕГОРИЯМИ */
.unified-card-spacing {
  margin-bottom: 5px !important; /* Изменено с 16px на 5px */
}

.unified-grid-spacing {
  gap: 24px !important;
}

.unified-section-spacing {
  margin-bottom: 24px !important;
}

.unified-content-padding {
  padding: 0 24px !important;
}

/* Адаптивные отступы для мобильных устройств */
@media (max-width: 768px) {
  .unified-content-padding {
    padding: 0 16px !important;
  }

  .unified-section-spacing {
    margin-bottom: 5px !important; /* Изменено с 16px на 5px */
  }

  .unified-grid-spacing {
    gap: 16px !important;
  }
}

/* Контейнер для кнопок категорий */
.category-buttons-unified {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 4px;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

.category-buttons-unified::-webkit-scrollbar {
  height: 4px;
}

.category-buttons-unified::-webkit-scrollbar-track {
  background: transparent;
}

.category-buttons-unified::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 2px;
}

.category-buttons-unified::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Унифицированные кнопки категорий */
.category-btn-unified {
  background: var(--header-gradient);
  background-size: 600% 600%;
  animation: headerGradientShift 12s ease-in-out infinite;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 10px 20px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.9;
  position: relative;
  overflow: hidden;
}

.category-btn-unified:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 27, 78, 0.3);
}

.category-btn-unified:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(45, 27, 78, 0.3);
  opacity: 0.8;
}

/* Активное состояние кнопки категории */
.category-btn-unified.active {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 27, 78, 0.4);
  background: var(--gradient-dark);
  background-size: 600% 600%;
  animation: headerGradientShift 12s ease-in-out infinite;
}

/* Унифицированные кнопки действий - наследуют основной стиль кнопок */
/* .action-btn-unified наследует стили от .btn */

/* Hover эффекты для action-btn-unified наследуются от .btn:hover */

/* ========================================
   ПРИНУДИТЕЛЬНЫЕ СТИЛИ ДЛЯ ВСЕХ МОДАЛЬНЫХ ОКОН - МАКСИМАЛЬНАЯ СПЕЦИФИЧНОСТЬ
   Отступы: 7px (вертикальные и горизонтальные)
   Шрифты: единообразные
   ======================================== */

/* ПРИНУДИТЕЛЬНЫЕ СТИЛИ ДЛЯ ВСЕХ МОДАЛЬНЫХ ОКОН - ОТСТУПЫ 7px */
body .modal-template .form-group,
body .modal .form-group,
body .universal-modal .form-group,
body #addTaskModal .form-group,
body #addProjectModal .form-group,
body #addEmployeeModal .form-group,
body #addClientModal .form-group,
body #addCategoryModal .form-group,
body .category-form-group,
body .category-form-group *,
body #addCategoryModal .category-form-group,
body #addCategoryModal .form-group,
body .modal-template .category-form-group,
body .modal .category-form-group,
body .universal-modal .category-form-group,
html body .modal-template .form-group,
html body .modal .form-group,
html body .universal-modal .form-group,
html body #addTaskModal .form-group,
html body #addProjectModal .form-group,
html body #addEmployeeModal .form-group,
html body #addClientModal .form-group,
html body #addCategoryModal .form-group,
html body .category-form-group,
html body .category-form-group *,
html body #addCategoryModal .category-form-group,
html body #addCategoryModal .form-group,
html body .modal-template .category-form-group,
html body .modal .category-form-group,
html body .universal-modal .category-form-group {
  margin-bottom: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
}

/* ПРИНУДИТЕЛЬНЫЕ СТИЛИ ДЛЯ СЕТОК В МОДАЛЬНЫХ ОКНАХ - ОТСТУПЫ 7px */
body .modal-template .form-row,
body .modal .form-row,
body .universal-modal .form-row,
body #addTaskModal .form-row,
body #addProjectModal .form-row,
body #addEmployeeModal .form-row,
body #addClientModal .form-row,
body #addCategoryModal .form-row,
body .category-form-group .form-row,
body #addCategoryModal .form-row,
body #addCategoryModal .form-row-3,
body #addCategoryModal .form-fields,
html body .modal-template .form-row,
html body .modal .form-row,
html body .universal-modal .form-row,
html body #addTaskModal .form-row,
html body #addProjectModal .form-row,
html body #addEmployeeModal .form-row,
html body #addClientModal .form-row,
html body #addCategoryModal .form-row,
html body .category-form-group .form-row,
html body #addCategoryModal .form-row,
html body #addCategoryModal .form-row-3,
html body #addCategoryModal .form-fields {
  gap: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
}

body .modal-template .form-row-3,
body .modal .form-row-3,
body .universal-modal .form-row-3,
body #addTaskModal .form-row-3,
body #addProjectModal .form-row-3,
body #addEmployeeModal .form-row-3,
body #addClientModal .form-row-3,
body #addCategoryModal .form-row-3,
html body .modal-template .form-row-3,
html body .modal .form-row-3,
html body .universal-modal .form-row-3,
html body #addTaskModal .form-row-3,
html body #addProjectModal .form-row-3,
html body #addEmployeeModal .form-row-3,
html body #addClientModal .form-row-3,
html body #addCategoryModal .form-row-3 {
  gap: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
}

body .modal-template .form-fields,
body .modal .form-fields,
body .universal-modal .form-fields,
body #addTaskModal .form-fields,
body #addProjectModal .form-fields,
body #addEmployeeModal .form-fields,
body #addClientModal .form-fields,
body #addCategoryModal .form-fields,
html body .modal-template .form-fields,
html body .modal .form-fields,
html body .universal-modal .form-fields,
html body #addTaskModal .form-fields,
html body #addProjectModal .form-fields,
html body #addEmployeeModal .form-fields,
html body #addClientModal .form-fields,
html body #addCategoryModal .form-fields {
  gap: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
}

/* ПРИНУДИТЕЛЬНЫЕ ШРИФТЫ ДЛЯ ВСЕХ ЛЕЙБЛОВ */
body .modal-template .form-group label,
body .modal .form-group label,
body .universal-modal .form-group label,
body #addTaskModal .form-group label,
body #addProjectModal .form-group label,
body #addEmployeeModal .form-group label,
body #addClientModal .form-group label,
body #addCategoryModal .form-group label,
body .category-form-group label,
body #addCategoryModal .category-form-group label,
body #addCategoryModal .form-group label,
body .modal-template .category-form-group label,
body .modal .category-form-group label,
body .universal-modal .category-form-group label,
html body .modal-template .form-group label,
html body .modal .form-group label,
html body .universal-modal .form-group label,
html body #addTaskModal .form-group label,
html body #addProjectModal .form-group label,
html body #addEmployeeModal .form-group label,
html body #addClientModal .form-group label,
html body #addCategoryModal .form-group label,
html body .category-form-group label,
html body #addCategoryModal .category-form-group label,
html body #addCategoryModal .form-group label,
html body .modal-template .category-form-group label,
html body .modal .category-form-group label,
html body .universal-modal .category-form-group label {
  font-weight: 600 !important;
  color: #374151 !important;
  font-size: 0.95rem !important;
  margin-bottom: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
  font-family: 'Segoe UI', Arial, sans-serif !important;
}

/* ПРИНУДИТЕЛЬНЫЕ ОТСТУПЫ ДЛЯ ВСЕХ ПОЛЕЙ ВВОДА */
body .modal-template .form-group input,
body .modal .form-group input,
body .universal-modal .form-group input,
body #addTaskModal .form-group input,
body #addProjectModal .form-group input,
body #addEmployeeModal .form-group input,
body #addClientModal .form-group input,
body #addCategoryModal .form-group input,
body .category-form-group input,
body #addCategoryModal .category-form-group input,
body .modal-template .category-form-group input,
body .modal .category-form-group input,
body .universal-modal .category-form-group input,
html body .modal-template .form-group input,
html body .modal .form-group input,
html body .universal-modal .form-group input,
html body #addTaskModal .form-group input,
html body #addProjectModal .form-group input,
html body #addEmployeeModal .form-group input,
html body #addClientModal .form-group input,
html body #addCategoryModal .form-group input,
html body .category-form-group input,
html body #addCategoryModal .category-form-group input,
html body .modal-template .category-form-group input,
html body .modal .category-form-group input,
html body .universal-modal .category-form-group input {
  padding: 12px 16px !important; /* ПРИНУДИТЕЛЬНЫЕ ОТСТУПЫ */
  margin-bottom: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
}

/* ПРИНУДИТЕЛЬНЫЕ ОТСТУПЫ ДЛЯ ВСЕХ TEXTAREA */
body .modal-template .form-group textarea,
body .modal .form-group textarea,
body .universal-modal .form-group textarea,
body #addTaskModal .form-group textarea,
body #addProjectModal .form-group textarea,
body #addEmployeeModal .form-group textarea,
body #addClientModal .form-group textarea,
body #addCategoryModal .form-group textarea,
body .category-form-group textarea,
body #addCategoryModal .category-form-group textarea,
body .modal-template .category-form-group textarea,
body .modal .category-form-group textarea,
body .universal-modal .category-form-group textarea,
html body .modal-template .form-group textarea,
html body .modal .form-group textarea,
html body .universal-modal .form-group textarea,
html body #addTaskModal .form-group textarea,
html body #addProjectModal .form-group textarea,
html body #addEmployeeModal .form-group textarea,
html body #addClientModal .form-group textarea,
html body #addCategoryModal .form-group textarea,
html body .category-form-group textarea,
html body #addCategoryModal .category-form-group textarea,
html body .modal-template .category-form-group textarea,
html body .modal .category-form-group textarea,
html body .universal-modal .category-form-group textarea {
  padding: 12px 16px !important; /* ПРИНУДИТЕЛЬНЫЕ ОТСТУПЫ */
  margin-bottom: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
}

/* ПРИНУДИТЕЛЬНЫЕ ОТСТУПЫ ДЛЯ ВСЕХ SELECT */
body .modal-template .form-group select,
body .modal .form-group select,
body .universal-modal .form-group select,
body #addTaskModal .form-group select,
body #addProjectModal .form-group select,
body #addEmployeeModal .form-group select,
body #addClientModal .form-group select,
body #addCategoryModal .form-group select,
body .category-form-group select,
body #addCategoryModal .category-form-group select,
body .modal-template .category-form-group select,
body .modal .category-form-group select,
body .universal-modal .category-form-group select,
html body .modal-template .form-group select,
html body .modal .form-group select,
html body .universal-modal .form-group select,
html body #addTaskModal .form-group select,
html body #addProjectModal .form-group select,
html body #addEmployeeModal .form-group select,
html body #addClientModal .form-group select,
html body #addCategoryModal .form-group select,
html body .category-form-group select,
html body #addCategoryModal .category-form-group select,
html body .modal-template .category-form-group select,
html body .modal .category-form-group select,
html body .universal-modal .category-form-group select {
  padding: 12px 16px !important; /* ПРИНУДИТЕЛЬНЫЕ ОТСТУПЫ */
  padding-right: 40px !important; /* Место для стрелки */
  margin-bottom: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
}

/* ПРИНУДИТЕЛЬНЫЕ ОТСТУПЫ ДЛЯ СПЕЦИФИЧНЫХ ПОЛЕЙ ЗАДАЧ */
body .task-name-field,
body .task-deadline-field,
body .task-employee-section-field,
body .task-employee-field,
html body .task-name-field,
html body .task-deadline-field,
html body .task-employee-section-field,
html body .task-employee-field {
  margin-bottom: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
}

body .task-name-field input,
body .task-deadline-field input,
body .task-employee-section-field select,
body .task-employee-field select,
html body .task-name-field input,
html body .task-deadline-field input,
html body .task-employee-section-field select,
html body .task-employee-field select {
  padding: 12px 16px !important; /* ПРИНУДИТЕЛЬНЫЕ ОТСТУПЫ */
  margin-bottom: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
}

/* ПРИНУДИТЕЛЬНЫЕ ОТСТУПЫ ДЛЯ СЕТОК ЗАДАЧ */
body .task-form-row,
body .task-form-row.employee-row,
html body .task-form-row,
html body .task-form-row.employee-row {
  gap: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
}

/* ПРИНУДИТЕЛЬНЫЕ СТИЛИ ДЛЯ ВЫРАВНИВАНИЯ ПОЛЕЙ В КАТЕГОРИЯХ */
body .category-form-group,
html body .category-form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
  margin-bottom: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
  align-items: stretch !important; /* ПРИНУДИТЕЛЬНОЕ РАСТЯГИВАНИЕ */
}

/* ПРИНУДИТЕЛЬНЫЕ СТИЛИ ДЛЯ ВЫРАВНИВАНИЯ ПОЛЕЙ ВВОДА В КАТЕГОРИЯХ */
body .category-form-group input,
body .category-form-group select,
body .category-form-group textarea,
html body .category-form-group input,
html body .category-form-group select,
html body .category-form-group textarea {
  height: 48px !important; /* ПРИНУДИТЕЛЬНАЯ ВЫСОТА */
  line-height: 1.5 !important; /* ПРИНУДИТЕЛЬНАЯ ВЫСОТА СТРОКИ */
  box-sizing: border-box !important; /* ПРИНУДИТЕЛЬНЫЙ РАЗМЕР */
  margin-bottom: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
  vertical-align: top !important; /* ПРИНУДИТЕЛЬНОЕ ВЫРАВНИВАНИЕ */
}

/* ПРИНУДИТЕЛЬНЫЕ СТИЛИ ДЛЯ СЕТОК КАТЕГОРИЙ */
body .category-form-row,
html body .category-form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; /* ДВЕ РАВНЫЕ КОЛОНКИ */
  gap: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
  align-items: start !important; /* ПРИНУДИТЕЛЬНОЕ ВЫРАВНИВАНИЕ ПО ВЕРХУ */
}

/* ПРИНУДИТЕЛЬНЫЕ СТИЛИ ДЛЯ ПОЛЕЙ В СЕТКАХ КАТЕГОРИЙ */
body .category-form-row .category-form-group,
html body .category-form-row .category-form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
  margin-bottom: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
  height: auto !important; /* ПРИНУДИТЕЛЬНАЯ ВЫСОТА */
}

/* ПРИНУДИТЕЛЬНЫЕ СТИЛИ ДЛЯ ПОЛЕЙ ВВОДА В СЕТКАХ КАТЕГОРИЙ */
body .category-form-row .category-form-group input,
body .category-form-row .category-form-group select,
body .category-form-row .category-form-group textarea,
html body .category-form-row .category-form-group input,
html body .category-form-row .category-form-group select,
html body .category-form-row .category-form-group textarea {
  height: 48px !important; /* ПРИНУДИТЕЛЬНАЯ ВЫСОТА */
  line-height: 1.5 !important; /* ПРИНУДИТЕЛЬНАЯ ВЫСОТА СТРОКИ */
  box-sizing: border-box !important; /* ПРИНУДИТЕЛЬНЫЙ РАЗМЕР */
  margin-bottom: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
  vertical-align: top !important; /* ПРИНУДИТЕЛЬНОЕ ВЫРАВНИВАНИЕ */
}

/* ПРИНУДИТЕЛЬНЫЕ СТИЛИ ДЛЯ ПОЛНОЙ ШИРИНЫ В КАТЕГОРИЯХ */
body .category-form-group.full-width,
html body .category-form-group.full-width {
  grid-column: 1 / -1 !important; /* ПРИНУДИТЕЛЬНАЯ ПОЛНАЯ ШИРИНА */
  gap: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
}

/* ПРИНУДИТЕЛЬНЫЕ СТИЛИ ДЛЯ ПОЛЕЙ ВВОДА В КАТЕГОРИЯХ */
body .category-form-group input,
body .category-form-group textarea,
body .category-form-group select,
html body .category-form-group input,
html body .category-form-group textarea,
html body .category-form-group select {
  margin-bottom: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
  height: 48px !important; /* ПРИНУДИТЕЛЬНАЯ ВЫСОТА */
  line-height: 1.5 !important; /* ПРИНУДИТЕЛЬНАЯ ВЫСОТА СТРОКИ */
  box-sizing: border-box !important; /* ПРИНУДИТЕЛЬНЫЙ РАЗМЕР */
  vertical-align: top !important; /* ПРИНУДИТЕЛЬНОЕ ВЫРАВНИВАНИЕ */
}

/* ПРИНУДИТЕЛЬНЫЕ ОТСТУПЫ ДЛЯ ВСЕХ МОДАЛЬНЫХ ОКОН */
body .modal-template,
body .modal,
body .universal-modal,
body #addTaskModal,
body #addProjectModal,
body #addEmployeeModal,
body #addClientModal,
body #addCategoryModal,
html body .modal-template,
html body .modal,
html body .universal-modal,
html body #addTaskModal,
html body #addProjectModal,
html body #addEmployeeModal,
html body #addClientModal,
html body #addCategoryModal {
  padding: 20px !important; /* ПРИНУДИТЕЛЬНЫЕ ОТСТУПЫ */
}

/* ПРИНУДИТЕЛЬНЫЕ ОТСТУПЫ ДЛЯ КОНТЕНТА МОДАЛЬНЫХ ОКОН */
body .modal-template .modal-content,
body .modal .modal-content,
body .universal-modal .modal-content,
body #addTaskModal .modal-content,
body #addProjectModal .modal-content,
body #addEmployeeModal .modal-content,
body #addClientModal .modal-content,
body #addCategoryModal .modal-content,
html body .modal-template .modal-content,
html body .modal .modal-content,
html body .universal-modal .modal-content,
html body #addTaskModal .modal-content,
html body #addProjectModal .modal-content,
html body #addEmployeeModal .modal-content,
html body #addClientModal .modal-content,
html body #addCategoryModal .modal-content {
  padding: 20px !important; /* ПРИНУДИТЕЛЬНЫЕ ОТСТУПЫ */
}

/* Share-модалки — без padding на wrapper, чтобы header прилипал к краям */
body #icShareModal .modal-content,
html body #icShareModal .modal-content,
body #ocShareModal .modal-content,
html body #ocShareModal .modal-content {
  padding: 0 !important;
}

/* УБРАНО: принудительное ограничение ширины для чек-листов */
/* Теперь используют базовую ширину .modal-template-content (450px) и adaptive-grid */

/* СТАРЫЕ СТИЛИ (устаревшие классы, оставляем для совместимости) */
body #addChecklistItemModal .modal-content,
html body #addChecklistItemModal .modal-content {
  max-width: 450px !important; /* ПРИНУДИТЕЛЬНАЯ ШИРИНА */
  padding: 0 !important; /* УБИРАЕМ ПРИНУДИТЕЛЬНЫЕ ОТСТУПЫ ДЛЯ ЕДИНООБРАЗИЯ */
}

/* ПРАВИЛЬНЫЕ ОТСТУПЫ ДЛЯ ТЕЛА МОДАЛЬНОГО ОКНА СОЗДАНИЯ ЧЕК-ЛИСТА */
body #addChecklistItemModal .modal-body,
html body #addChecklistItemModal .modal-body {
  padding: 20px !important; /* ОТСТУПЫ ТОЛЬКО ДЛЯ КОНТЕНТА, НЕ ДЛЯ ЗАГОЛОВКА */
}

/* ПРИНУДИТЕЛЬНАЯ ШИРИНА ДЛЯ МОДАЛЬНОГО ОКНА ДОБАВЛЕНИЯ ЗАДАЧ */
body #addTaskChecklistItemModal .modal-content,
html body #addTaskChecklistItemModal .modal-content {
  max-width: 450px !important; /* ПРИНУДИТЕЛЬНАЯ ШИРИНА */
  padding: 0 !important; /* УБИРАЕМ ПРИНУДИТЕЛЬНЫЕ ОТСТУПЫ ДЛЯ ЕДИНООБРАЗИЯ */
}

/* ПРАВИЛЬНАЯ ШИРИНА ДЛЯ МОДАЛЬНОГО ОКНА ОШИБОК АВТОРИЗАЦИИ */
body #login-modal .modal-content,
html body #login-modal .modal-content {
  max-width: 400px !important; /* ОПТИМАЛЬНАЯ ШИРИНА ДЛЯ ОШИБОК */
  padding: 0 !important; /* УБИРАЕМ ПРИНУДИТЕЛЬНЫЕ ОТСТУПЫ ДЛЯ ЕДИНООБРАЗИЯ */
}

/* ПРАВИЛЬНЫЕ ОТСТУПЫ ДЛЯ ТЕЛА МОДАЛЬНОГО ОКНА ОШИБОК АВТОРИЗАЦИИ */
body #login-modal .modal-body,
html body #login-modal .modal-body {
  padding: 20px !important; /* ОТСТУПЫ ТОЛЬКО ДЛЯ КОНТЕНТА, НЕ ДЛЯ ЗАГОЛОВКА */
}

/* ИСПРАВЛЕНИЕ ОТОБРАЖЕНИЯ МОДАЛЬНОГО ОКНА АВТОРИЗАЦИИ */
#login-modal {
  display: none !important; /* ПО УМОЛЧАНИЮ СКРЫТО */
  z-index: 9999 !important; /* ВЫСОКИЙ ПРИОРИТЕТ */
}

#login-modal.active {
  display: flex !important; /* ПОКАЗЫВАЕМ ПРИ АКТИВАЦИИ */
}

/* ── Модал "Зависший вопрос" — компактный, без лишних отступов ── */
#addPendingQuestionModal {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px !important;
}
#addPendingQuestionModal.active {
  display: flex !important;
}
#addPendingQuestionModal .modal-content {
  max-width: 420px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
#addPendingQuestionModal .modal-body {
  padding: 20px 24px !important;
}

/* ПРИНУДИТЕЛЬНЫЕ ОТСТУПЫ ДЛЯ КНОПОК */
body .modal-template .btn,
body .modal .btn,
body .universal-modal .btn,
body #addTaskModal .btn,
body #addProjectModal .btn,
body #addEmployeeModal .btn,
body #addClientModal .btn,
body #addCategoryModal .btn,
html body .modal-template .btn,
html body .modal .btn,
html body .universal-modal .btn,
html body #addTaskModal .btn,
html body #addProjectModal .btn,
html body #addEmployeeModal .btn,
html body #addClientModal .btn,
html body #addCategoryModal .btn {
  margin: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
  padding: 10px 20px !important; /* ПРИНУДИТЕЛЬНЫЕ ОТСТУПЫ */
}

/* ========================================
   КОНЕЦ ПРИНУДИТЕЛЬНЫХ СТИЛЕЙ ДЛЯ ВСЕХ МОДАЛЬНЫХ ОКОН
   ======================================== */

/* ПРИНУДИТЕЛЬНЫЕ ОТСТУПЫ ДЛЯ ЦВЕТОВЫХ ПИКЕРОВ */
body .category-color-picker,
html body .category-color-picker {
  gap: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
}

/* УДАЛЕНО: Старые конфликтующие стили заменены на унифицированные */

/* Основная разделительная линия */
.divider-line {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #e5e7eb 20%, #e5e7eb 80%, transparent 100%);
  margin: 24px 0;
  border: none;
  opacity: 0.8;
}

/* Разделительная линия для секций */
.section-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #d1d5db 20%, #d1d5db 80%, transparent 100%);
  margin: 32px 0;
  border: none;
  opacity: 0.6;
}

/* Разделительная линия для заголовков */
.header-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #9ca3af 20%, #9ca3af 80%, transparent 100%);
  margin: 16px 0;
  border: none;
  opacity: 0.8;
}

/* Разделительная линия для карточек */
.card-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #f3f4f6 20%, #f3f4f6 80%, transparent 100%);
  margin: 16px 0;
  border: none;
  opacity: 0.5;
}

/* Вертикальная разделительная линия */
.divider-vertical {
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, #e5e7eb 20%, #e5e7eb 80%, transparent 100%);
  margin: 0 16px;
  border: none;
  opacity: 0.8;
  align-self: stretch;
}

/* Разделительная линия с иконкой */
.divider-with-icon {
  display: flex;
  align-items: center;
  margin: 24px 0;
  gap: 16px;
}

.divider-with-icon::before,
.divider-with-icon::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #e5e7eb 20%, #e5e7eb 80%, transparent 100%);
  opacity: 0.8;
}

.divider-with-icon .divider-icon {
  color: #9ca3af;
  font-size: 1.2rem;
  opacity: 0.6;
}

/* Адаптивность для унифицированных заголовков */
@media (max-width: 1200px) {
  .page-header-unified {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
  }

  .page-header-unified .header-top-row {
    order: 1;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .page-header-unified .category-section {
    order: 2;
    width: 100%;
    justify-content: center;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .page-header-unified .actions-section {
    order: 1;
    width: 100%;
    justify-content: center;
    margin-top: 0;
    margin-left: 0;
  }

  .page-header-unified .page-title-section {
    order: 1;
    margin-bottom: 8px;
  }
}

@media (max-width: 768px) {
  .page-header-unified {
    margin: 0 16px 16px 16px;
    min-height: auto;
    padding: 16px 0;
  }

  .page-header-unified .page-title {
    font-size: 24px;
  }

  .page-header-unified .category-section,
  .page-header-unified .actions-section {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-left: 0;
    margin-right: 0;
  }

  .category-buttons-unified {
    justify-content: center;
    max-width: 100%;
  }

  .category-btn-unified,
  .action-btn-unified {
    padding: 8px 16px;
    font-size: 0.85rem;
  }

  /* Адаптивность для разделительных линий */
  .divider-line,
  .section-divider,
  .header-divider,
  .card-divider {
    margin: 16px 0;
  }

  .divider-vertical {
    margin: 0 8px;
  }

  .divider-with-icon {
    margin: 16px 0;
    gap: 12px;
  }
}

.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 32px 32px 32px;
  flex-wrap: nowrap;
  min-height: 60px;
  padding: 10px 0;
  border-bottom: 1px solid #e5e7eb;
}

.page-title-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-title {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #1f2937;
  background: linear-gradient(135deg, #1f2937 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-subtitle {
  color: #6b7280;
  font-size: 1rem;
  margin: 0;
  line-height: 1.4;
}

.page-update-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #6b7280;
  background: #f9fafb;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
}

.update-date, .update-time, .update-ago {
  font-weight: 500;
}

.update-time {
  color: #059669;
  font-weight: 600;
}

/* Адаптивность для заголовков */
@media (max-width: 768px) {
  .page-header-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    margin: 0 16px 24px 16px;
    padding: 16px 0;
  }

  .page-title {
    font-size: 24px;
  }

  .page-update-info {
    order: 3;
    width: 100%;
    justify-content: center;
  }
}

/* ===== СОВРЕМЕННАЯ СИСТЕМА УВЕДОМЛЕНИЙ ===== */

.ns-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 400px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  backdrop-filter: blur(10px);
}

.ns-notification.show {
  transform: translateX(0);
}

.ns-notification--success {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border: 1px solid #059669;
  color: #047857;
}

.ns-notification--error {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
  border: 1px solid #dc2626;
  color: #b91c1c;
}

.ns-notification--warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #d97706;
  color: #92400e;
}

.ns-notification--info {
  background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 100%);
  border: 1px solid #2563eb;
  color: #1d4ed8;
}

.ns-notification__icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.ns-notification__message {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
}

.ns-notification__close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  font-size: 1.2rem;
  line-height: 1;
  opacity: 0.7;
  transition: all 0.2s ease;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ns-notification__close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
  transform: scale(1.1);
}

/* ===== СИСТЕМА ОШИБОК ===== */

.ns-error-message {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 2px solid #dc2626;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ns-error-message__icon {
  font-size: 1.5rem;
  color: #dc2626;
  flex-shrink: 0;
  margin-top: 2px;
}

.ns-error-message__content {
  flex: 1;
}

.ns-error-message__title {
  font-weight: 600;
  color: #991b1b;
  margin: 0 0 8px 0;
  font-size: 1.1rem;
}

.ns-error-message__text {
  color: #7f1d1d;
  margin: 0;
  line-height: 1.5;
}

/* ===== 9. РЕДАКТОР QUILL ===== */

/* Базовые стили Quill */
.ql-container {
  font-family: inherit;
  font-size: 1rem;
  height: auto;
  min-height: 300px;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

.ql-container.ql-snow {
  border: 1px solid var(--border-light);
  border-top: none;
}

.ql-editor {
  min-height: 300px;
  padding: 20px;
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 1rem;
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Глобальные ограничения для всех элементов внутри редактора */
.ql-editor * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Специально для больших элементов */
.ql-editor > * {
  max-width: 100%;
  overflow: hidden;
}

/* Нормализуем размеры элементов в редакторе */
.ql-editor p {
  margin: 0.5em 0;
  font-size: 1rem;
}

.ql-editor h1 {
  font-size: 2em !important;
  line-height: 1.2;
  margin: 0.5em 0;
}

.ql-editor h2 {
  font-size: 1.5em !important;
  line-height: 1.3;
  margin: 0.5em 0;
}

.ql-editor h3 {
  font-size: 1.25em !important;
  line-height: 1.4;
  margin: 0.5em 0;
}

.ql-editor.ql-blank::before {
  color: var(--text-tertiary);
  font-style: normal;
  left: 20px;
}

.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3 {
  margin: 0;
  padding: 0;
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

.ql-editor ol,
.ql-editor ul {
  padding-left: 1.5em;
}

.ql-editor ol > li,
.ql-editor ul > li {
  list-style-type: none;
}

.ql-editor ol > li::before {
  counter-increment: list-1;
  content: counter(list-1, decimal) '. ';
}

.ql-editor ul > li::before {
  content: '\2022';
}

.ql-editor h1 {
  font-size: 2em;
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.ql-editor h2 {
  font-size: 1.5em;
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.ql-editor h3 {
  font-size: 1.25em;
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.ql-editor a {
  color: var(--primary);
  text-decoration: underline;
}

.ql-editor blockquote {
  border-left: 4px solid var(--border-medium);
  margin: 1em 0;
  padding-left: 1em;
  color: var(--text-secondary);
}

.ql-editor code,
.ql-editor pre {
  background-color: var(--bg-tertiary);
  border-radius: 4px;
}

.ql-editor pre {
  white-space: pre-wrap;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 8px 12px;
}

.ql-editor code {
  font-size: 85%;
  padding: 2px 4px;
}

.ql-editor pre.ql-syntax {
  background-color: #1e293b;
  color: #e2e8f0;
  overflow: visible;
}

.ql-editor img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em auto;
}

/* Ограничиваем размеры изображений в редакторе */
.ql-editor img[style*="width"],
.ql-editor img[style*="height"] {
  max-width: 100% !important;
  height: auto !important;
}

/* Ограничиваем размеры всех графических элементов в редакторе (кроме SVG - они скрыты отдельным правилом) */
.ql-editor canvas,
.ql-editor iframe,
.ql-editor object,
.ql-editor embed {
  max-width: 100% !important;
  max-height: 400px !important;
  height: auto !important;
  display: block;
  margin: 1em auto;
}

/* Нормализуем размеры эмодзи и специальных символов */
.ql-editor {
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

.ql-editor * {
  font-size: inherit;
  max-width: 100%;
  box-sizing: border-box;
}

/* Ограничиваем размеры любых элементов с большими размерами */
.ql-editor [style*="width"],
.ql-editor [style*="height"],
.ql-editor [style*="font-size"] {
  max-width: 100% !important;
  max-height: 500px !important;
  font-size: inherit !important;
}

/* Специально для элементов, которые могут быть огромными */
.ql-editor div,
.ql-editor span,
.ql-editor p {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* КРИТИЧЕСКОЕ: Скрываем элементы с огромными размерами */
.ql-editor div[style*="width"]:not(.welcome-content),
.ql-editor span[style*="width"]:not(.welcome-content *) {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Скрываем все элементы с viewBox (SVG) - они обрабатываются отдельным правилом выше */
.ql-editor svg[viewBox] {
  display: none !important;
}

/* Ограничиваем размеры любых встроенных элементов */
.ql-editor embed,
.ql-editor object,
.ql-editor iframe {
  max-width: 100% !important;
  max-height: 400px !important;
  width: 100% !important;
  height: auto !important;
}

/* Панель инструментов Quill */
.ql-toolbar.ql-snow {
  border: 1px solid var(--border-light);
  border-bottom: none;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  box-sizing: border-box;
  font-family: inherit;
  padding: 12px;
  background: var(--bg-secondary);
}

.ql-toolbar.ql-snow .ql-stroke {
  stroke: var(--text-secondary);
}

.ql-toolbar.ql-snow .ql-fill {
  fill: var(--text-secondary);
}

.ql-toolbar.ql-snow .ql-picker-label {
  color: var(--text-primary);
  border-color: var(--border-light);
}

.ql-toolbar.ql-snow .ql-picker-label:hover {
  color: var(--primary);
}

.ql-toolbar.ql-snow .ql-picker-label.ql-active {
  color: var(--primary);
}

.ql-toolbar.ql-snow .ql-picker-item:hover {
  color: var(--primary);
}

.ql-toolbar.ql-snow .ql-picker-item.ql-selected {
  color: var(--primary);
}

.ql-toolbar.ql-snow button:hover,
.ql-toolbar.ql-snow button:focus,
.ql-toolbar.ql-snow button.ql-active,
.ql-toolbar.ql-snow .ql-picker-label:hover,
.ql-toolbar.ql-snow .ql-picker-label.ql-active {
  color: var(--primary);
}

.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow button:focus .ql-stroke,
.ql-toolbar.ql-snow button.ql-active .ql-stroke,
.ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke,
.ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke {
  stroke: var(--primary);
}

.ql-toolbar.ql-snow button:hover .ql-fill,
.ql-toolbar.ql-snow button:focus .ql-fill,
.ql-toolbar.ql-snow button.ql-active .ql-fill,
.ql-toolbar.ql-snow .ql-picker-label:hover .ql-fill,
.ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-fill {
  fill: var(--primary);
}

.ql-toolbar.ql-snow .ql-picker {
  color: var(--text-primary);
}

.ql-toolbar.ql-snow .ql-picker-options {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  padding: 8px;
  min-width: 140px !important;
  width: auto !important;
}

.ql-toolbar.ql-snow .ql-picker-item {
  padding: 6px 12px;
  border-radius: 4px;
}

.ql-toolbar.ql-snow .ql-picker-item:hover {
  background: var(--bg-hover);
}

/* Режим только чтения */
.ql-container.ql-disabled {
  background: var(--bg-secondary);
}

.ql-container.ql-disabled .ql-editor {
  color: var(--text-secondary);
}

/* ===== 10. КАТЕГОРИИ И ТЕГИ ===== */

/* ===== УЛУЧШЕННОЕ МОДАЛЬНОЕ ОКНО КАТЕГОРИЙ ===== */
.category-modal {
  max-width: 800px !important; /* Унифицируем с задачами */
  width: 90vw !important;
  min-width: 300px;
}

/* Ограничиваем максимальную ширину на больших экранах - как у задач */
@media (min-width: 1200px) {
  .category-modal {
    max-width: 800px !important;
    width: 800px !important; /* Фиксированная ширина на больших экранах */
  }
}

.category-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 8px 0;
}

.category-form-row {
  display: grid;
  grid-template-columns: 0.7fr 0.3fr;
  gap: 20px;
  align-items: end;
}

.category-form-group {
  display: flex;
  flex-direction: column;
  gap: 7px; /* УНИФИЦИРОВАННЫЙ ОТСТУП 7px */
  margin-bottom: 7px !important; /* УНИФИЦИРОВАННЫЙ ОТСТУП 7px */
}

.category-form-group.full-width {
  grid-column: 1 / -1;
}

.category-form-group label {
  font-weight: 600;
  color: #374151;
  font-size: 0.95rem;
  margin-bottom: 7px; /* УНИФИЦИРОВАННЫЙ ОТСТУП 7px */
  font-family: 'Segoe UI', Arial, sans-serif;
}

.category-form-group input,
.category-form-group textarea,
.category-form-group select {
  padding: 12px 16px; /* УНИФИЦИРОВАННЫЕ ОТСТУПЫ */
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: white;
  color: #1f2937;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 7px; /* УНИФИЦИРОВАННЫЙ ОТСТУП 7px */
}

.category-form-group input:focus,
.category-form-group textarea:focus,
.category-form-group select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
  transform: translateY(-1px);
}

/* Дополнительные стили для select в категориях */
.category-form-group select {
  padding-right: 40px; /* Место для стрелки */
  margin-bottom: 7px; /* УНИФИЦИРОВАННЫЙ ОТСТУП 7px */
}

.category-form-group textarea {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  line-height: 1.5;
}

/* УДАЛЕНО: Старые стили категорий заменены на унифицированные */
.category-color-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.category-color-btn {
  width: 60px;
  height: 60px;
  border: 4px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.4rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.category-color-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%);
  border-radius: 8px;
}

.category-color-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  border-color: #667eea;
}

.category-color-btn:active {
  transform: scale(0.95);
}

/* ПРИНУДИТЕЛЬНЫЕ СТИЛИ ДЛЯ СЕЛЕКТОРА ИКОНОК КАТЕГОРИЙ */
body .category-icon-selector select,
html body .category-icon-selector select {
  padding: 12px 16px !important; /* ПРИНУДИТЕЛЬНЫЕ ОТСТУПЫ */
  padding-right: 40px !important; /* ПРИНУДИТЕЛЬНЫЙ ПРАВЫЙ ОТСТУП */
  margin-bottom: 7px !important; /* ПРИНУДИТЕЛЬНЫЙ ОТСТУП 7px */
  height: auto !important; /* ПРИНУДИТЕЛЬНАЯ ВЫСОТА */
  line-height: normal !important; /* ПРИНУДИТЕЛЬНАЯ ВЫСОТА СТРОКИ */
  box-sizing: border-box !important; /* ПРИНУДИТЕЛЬНЫЙ РАЗМЕР */
}

/* Адаптивность */
@media (max-width: 768px) {
  .category-modal {
    max-width: 95%;
    min-width: 320px;
  }

  .category-form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .category-color-btn {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }

  .category-form-group input,
  .category-form-group textarea,
  .category-form-group select {
    padding: 12px 16px;
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .category-modal {
    width: 98%;
    min-width: 280px;
  }

  .category-color-btn {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }
}

/* ===== СТИЛИ СПИСКА КАТЕГОРИЙ ===== */
.categories-content {
  padding: 0;
}

.categories-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 24px;
  padding: 0 0 16px 0;
  border-bottom: 1px solid #e5e7eb;
}

.categories-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  padding: 8px 0;
}

.category-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  cursor: pointer;
}

.category-item:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.category-info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.category-color {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.category-color::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%);
  border-radius: 50%;
}

.category-details {
  flex: 1;
}

.category-details h4 {
  margin: 0 0 4px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
}

.category-details p {
  margin: 0;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.4;
}

.category-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.edit-category-btn {
  background: linear-gradient(135deg, #667eea 0%, #667eea 100%);
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 10px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.edit-category-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.delete-category-btn {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-category-btn:hover {
  background: #dc2626;
  color: white;
  transform: scale(1.05);
}

/* Стили для пустого состояния */
.categories-list:empty::after {
  content: "Нет категорий";
  display: block;
  text-align: center;
  color: #9ca3af;
  font-style: italic;
  padding: 40px 20px;
  font-size: 1rem;
}

.category-stats {
  font-size: 0.75rem;
  color: #9ca3af;
  background: #f3f4f6;
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: 500;
}

/* Удалено - заменено на новые стили выше */

/* Анимация появления элементов */
.category-item {
  animation: slideInFromLeft 0.3s ease-out;
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Удалено - заменено на .categories-list:empty::after */

/* ===== СТИЛИ МОДАЛЬНОГО ОКНА КАТЕГОРИЙ (УДАЛЕНО - БУДЕТ СОЗДАНО ЗАНОВО) ===== */

/* ===============================================
   КАЛЕНДАРЬ NS CRM - СОВРЕМЕННЫЙ ДИЗАЙН v3.0
   =============================================== */

/* Фон страницы календаря */
body.calendar-page {
  background: #f8f9fa;
  height: 100vh;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}

/* Улучшенные скроллбары для календаря */
body.calendar-page *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

body.calendar-page *::-webkit-scrollbar-track {
  background: transparent;
}

body.calendar-page *::-webkit-scrollbar-thumb {
  background: rgba(102, 126, 234, 0.3);
  border-radius: 3px;
}

body.calendar-page *::-webkit-scrollbar-thumb:hover {
  background: rgba(102, 126, 234, 0.5);
}

/* ===============================================
   КАЛЕНДАРЬ NS CRM - ЧИСТЫЕ СОВРЕМЕННЫЕ СТИЛИ
   =============================================== */

/* Основной контейнер календаря */
.calendar-fullscreen {
  padding: 16px;
  margin: 0 !important;
  height: calc(100vh - 72px);
  height: calc(100svh - 72px); /* svh = стабильная высота на мобильных, не прыгает при скролле */
  display: flex;
  flex-direction: column;
  background: transparent;
  box-sizing: border-box;
  overflow: hidden;
}


/* ===============================================
   КАЛЕНДАРЬ NS CRM - ЧИСТЫЕ СОВРЕМЕННЫЕ СТИЛИ
   =============================================== */

/* Основной контейнер календаря - убираем скролл */

/* Панель управления календарём */
.calendar-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 30px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(15px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 25px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}


/* Современные кнопки календаря */
.calendar-controls .btn {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
  border: none;
  border-radius: 12px;
  color: white;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 12px 20px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.25);
  position: relative;
  overflow: hidden;
}

.calendar-controls .btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.calendar-controls .btn:hover {
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, rgba(92, 116, 224, 1) 0%, rgba(108, 65, 152, 1) 100%);
}

.calendar-controls .btn:hover::before {
  left: 100%;
}

.calendar-controls .btn:active {
  box-shadow: 0 3px 12px rgba(102, 126, 234, 0.35);
  opacity: 0.9;
}

/* Заголовок календаря - упрощенный стиль с glassmorphism */
.calendar-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
  min-height: 60px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  border-radius: 12px;
}


.calendar-header-center {
  display: flex;
  align-items: center;
  gap: 30px;
  justify-content: center;
  white-space: nowrap;
}

.calendar-header-right {
  display: flex;
  justify-content: flex-end;
}

/* Старые красные стили удалены - используем стили ниже */

/* Кнопка принудительного обновления в стиле сайта */
.force-refresh-btn {
  background: var(--header-gradient);
  background-size: 600% 600%;
  animation: headerGradientShift 12s ease-in-out infinite;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.85rem;
  padding: 8px 16px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.9;
  margin-left: 12px;
}

.force-refresh-btn:hover {
  opacity: 1;
  box-shadow: 0 6px 18px rgba(45, 27, 78, 0.35);
}

.calendar-header h3 {
  color: #1f2937;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  min-width: 200px;
  text-align: center;
}

/* Кнопки навигации */
.btn-nav {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: rgba(102, 126, 234, 0.8);
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-nav:hover {
  background: rgba(255, 255, 255, 1);
  color: rgba(102, 126, 234, 1);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.2);
}

/* Основной контейнер календаря - ОБЩИЙ СТИЛЬ (может переопределяться для страницы today) */
.calendar-container {
  flex: 1;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Для страницы today - убираем фиксированную высоту и прокрутку */
.today-column.calendar-column .checklist-container .calendar-container {
  height: auto !important; /* ВРУЧНУЮ: убираем фиксированную высоту */
  overflow: visible !important; /* ВРУЧНУЮ: убираем прокрутку */
  max-height: none !important; /* ВРУЧНУЮ: убираем ограничение высоты */
}

/* Контент календаря */
.calendar-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  position: relative;
}

/* Сетка календаря - адаптивная высота */
.calendar-grid {
  display: grid;
  gap: 1px;
  flex: 1;
  background: rgba(248, 249, 250, 0.6);
  backdrop-filter: blur(8px);
  border: none;
  border-radius: 12px;
  overflow: auto; /* Разрешаем прокрутку внутри сетки */
  margin-top: -10px;
  min-width: 700px; /* Уменьшена минимальная ширина для лучшей адаптивности */
  min-height: 500px; /* Уменьшена минимальная высота для средних экранов */
  width: 100%;
}

/* Месячный вид - динамические строки в стиле Google Calendar */
.calendar-grid.month {
  /* Не устанавливаем grid-template-rows здесь - позволяем JavaScript управлять */
  /* grid-template-rows будет установлен динамически в renderMonthView() */
  /* Гармоничное распределение колонок: Пн-Пт одинаковые, Сб-Вс на 20% меньше */
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 0.8fr 0.8fr !important;
}

/* Недельный вид - ПРАВИЛЬНАЯ АРХИТЕКТУРА БЕЗ КОНФЛИКТОВ */
.calendar-grid.week {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  /* НЕ ЗАДАЕМ grid-template-rows - позволяем JavaScript управлять */
  gap: 0px;
  /* НЕ ЗАДАЕМ height - позволяем JavaScript управлять высотой */
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  position: relative;
}

/* ПРОСТАЯ ОДНОУРОВНЕВАЯ CSS GRID АРХИТЕКТУРА */
.calendar-grid.week .calendar-week-hours-grid {
  grid-column: 1;
  grid-row: 2;
  overflow: auto;
  background: #f8f9fa;
  border-right: 1px solid #dee2e6;
  position: sticky;
  left: 0;
  z-index: 5;
  /* Скрываем полосы прокрутки для часов */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.calendar-grid.week .calendar-week-hours-grid::-webkit-scrollbar {
  display: none;
}

.calendar-grid.week .week-day-grid {
  grid-row: 2;
  overflow: auto;
  position: relative;
  border-left: 1px solid #dee2e6;
  background: white;
  /* Красивая полоса прокрутки */
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

.calendar-grid.week .week-day-grid::-webkit-scrollbar {
  width: 6px;
}

.calendar-grid.week .week-day-grid::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.calendar-grid.week .week-day-grid::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.calendar-grid.week .week-day-grid::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* КОНТЕЙНЕР СОДЕРЖИМОГО ДНЯ - ПОЛНАЯ ВЫСОТА 24 ЧАСА ТОЛЬКО С ЧАСОВЫМИ ЛИНИЯМИ */
.calendar-grid.week .day-content {
  min-height: 1440px !important; /* 24 часа * 60px - принудительно */
  position: relative;
  background-image:
    /* Только часовые линии */
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 59px,
      #d1d5db 59px,  /* Часовые линии */
      #d1d5db 60px
    );
}

/* Часовые метки с сеткой */
.calendar-grid.week .calendar-week-hours {
  grid-column: 1;
  background: #f8f9fa;
  border-right: 1px solid #dee2e6;
  position: relative;
}

/* Контейнеры дней с сеткой */
.calendar-grid.week .week-day-container {
  position: relative;
  border-left: 1px solid #dee2e6;
  background: white;
  display: flex;
  flex-direction: column;
}

.calendar-grid.week .all-day-events-container {
  height: 60px;
  border-bottom: 2px solid #dee2e6;
  padding: 4px;
  overflow: hidden;
  background: #f8f9fa;
  flex-shrink: 0;
}

/* СИНХРОНИЗИРОВАННЫЕ КОНТЕЙНЕРЫ */
.calendar-grid.week .week-main-container {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  overflow: auto;
  height: 100%;
  background: white;
}

.calendar-grid.week .calendar-week-hours-sync {
  grid-column: 1;
  background: #f8f9fa;
  border-right: 1px solid #dee2e6;
  position: sticky;
  left: 0;
  z-index: 5;
}

.calendar-grid.week .week-day-sync {
  position: relative;
  border-left: 1px solid #dee2e6;
  background: white;
  min-height: 1440px; /* СТАНДАРТНАЯ высота: 24 часа * 60px = 1440px */
  /* Только часовая сетка */
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 59px,
      #d1d5db 59px,
      #d1d5db 60px
    );
}

.calendar-grid.week .all-day-events-sync {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(248, 249, 250, 0.8);
  border-bottom: 2px solid #dee2e6;
  padding: 4px;
  overflow: hidden;
  z-index: 15;
}

.calendar-grid.week .timed-events-sync {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1440px; /* СТАНДАРТНАЯ высота: 24 часа * 60px = 1440px */
  overflow: visible;
}

/* УНАСЛЕДОВАННЫЕ контейнеры для обратной совместимости */
.calendar-grid.week .timed-events-container {
  position: relative;
  height: 1440px; /* СТАНДАРТНАЯ высота: 24 часа * 60px = 1440px */
  overflow: visible;
}

/* Новые стили для событий в недельном виде - УНИФИЦИРОВАННЫЕ */
.calendar-grid.week .week-event {
  position: absolute;
  left: 2px;
  right: 2px;
  min-height: 20px;
  z-index: 10;
  cursor: pointer;
  /* УНИФИЦИРОВАННЫЕ СТИЛИ */
  background: var(--event-bg);
  background-size: 200% 200%;
  animation: headerGradientShift 20s ease-in-out infinite;
  color: var(--event-text-color);
  border: var(--event-border);
  border-left: var(--event-border-left);
  border-radius: var(--event-border-radius);
  box-shadow: var(--event-shadow);
  font-size: var(--event-font-size);
  font-weight: var(--event-font-weight);
  transition: var(--event-transition);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-grid.week .week-event.all-day-event {
  position: static;
  margin-bottom: 2px;
  padding: var(--event-padding);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-grid.week .week-event.all-day-event:hover {
  background: var(--event-bg-hover);
  background-size: 200% 200%;
  animation: headerGradientShift 20s ease-in-out infinite;
  box-shadow: var(--event-shadow-hover);
  border-color: rgba(255, 255, 255, 0.4);
  filter: brightness(1.05);
}

.calendar-grid.week .week-event.timed-event {
  padding: var(--event-padding);
}

.calendar-grid.week .week-event.timed-event:hover {
  background: var(--event-bg-hover);
  background-size: 200% 200%;
  animation: headerGradientShift 20s ease-in-out infinite;
  box-shadow: var(--event-shadow-hover);
  border-color: rgba(255, 255, 255, 0.4);
  filter: brightness(1.05);
}

/* Индикатор кликабельности для событий в недельном виде */
.calendar-grid.week .week-event::after {
  content: '✏️';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.2s ease;
  font-size: 10px;
}

.calendar-grid.week .week-event:hover::after {
  opacity: 1;
}

/* === УНИФИЦИРОВАННЫЕ DRAG & DROP СТИЛИ === */

/* Базовые стили для перетаскиваемых событий */
.draggable-event {
  cursor: grab !important;
  position: relative;
  transition: all 0.2s ease;
}

.draggable-event:active {
  cursor: grabbing !important;
}

/* === УНИФИЦИРОВАННЫЕ СТИЛИ ДЛЯ ТИПОВ СОБЫТИЙ (ВСЕ ВИДЫ) === */
/* Локальные события - только иконка, без цветного border */
.local-event::before {
  content: '🏠 ';
  font-size: 10px;
  margin-right: 2px;
}

/* Google Calendar события - только иконка, без цветного border */
.google-event::before {
  content: '📅 ';
  font-size: 10px;
  margin-right: 2px;
}

/* Убираем иконки для событий в дневном виде календаря на странице "Сегодня" */
.calendar-grid.today-calendar-grid .day-event.local-event::before,
.calendar-grid.today-calendar-grid .day-event.google-event::before {
  content: '';
  display: none !important;
}

/* Стили для отображения времени и названия событий в календаре "Сегодня" */
.calendar-grid.today-calendar-grid .day-event {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  resize: none !important; /* Убираем возможность изменения размера */
  overflow: hidden !important; /* Исключаем даже псевдоскроллы Windows */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Старые Edge/IE */
  overscroll-behavior: contain; /* Не пробрасываем прокрутку */
}

/* Убираем все resize handles и кнопки изменения размера */
.calendar-grid.today-calendar-grid .day-event::before,
.calendar-grid.today-calendar-grid .day-event::after {
  content: none !important;
  display: none !important;
}

/* Скрываем нативные полосы прокрутки у событий на всех движках */
.calendar-grid.today-calendar-grid .day-event::-webkit-scrollbar,
.calendar-grid.today-calendar-grid .day-event::-webkit-scrollbar-thumb,
.calendar-grid.today-calendar-grid .day-event::-webkit-scrollbar-track,
.calendar-grid.today-calendar-grid .day-event::-webkit-scrollbar-button {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Также скрываем любые полосы у ячеек часов */
.calendar-day.events-slot,
.today-calendar-day.today-events-slot {
  overflow: hidden !important;
  scrollbar-width: none;
}

.calendar-day.events-slot::-webkit-scrollbar,
.calendar-day.events-slot::-webkit-scrollbar-thumb,
.calendar-day.events-slot::-webkit-scrollbar-track,
.calendar-day.events-slot::-webkit-scrollbar-button,
.today-calendar-day.today-events-slot::-webkit-scrollbar,
.today-calendar-day.today-events-slot::-webkit-scrollbar-thumb,
.today-calendar-day.today-events-slot::-webkit-scrollbar-track,
.today-calendar-day.today-events-slot::-webkit-scrollbar-button {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.calendar-grid.today-calendar-grid .day-event .event-time-display {
  font-weight: 600;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.2;
  white-space: nowrap;
  display: block;
  flex-shrink: 0;
  min-width: 35px;
}

.calendar-grid.today-calendar-grid .day-event .event-title-display {
  font-size: 10px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 1) !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-height: 18px !important;
  flex: 1;
  min-width: 0;
  visibility: visible !important;
  opacity: 1 !important;
}

/* === GOOGLE CALENDAR ИНТЕГРАЦИЯ === */

.google-calendar-section {
  border-top: 1px solid #e0e0e0;
  padding-top: 15px;
  margin-top: 15px;
}

/* Скрываем поле описания события */
#event-description,
.form-group:has(#event-description) {
  display: none !important;
}

/* Компактные отступы для формы событий */
.event-form .form-group {
  margin-bottom: 12px;
}

.event-form .form-row {
  margin-bottom: 12px;
}

.event-form .form-row .form-group {
  margin-bottom: 0;
}

/* Строка с названием события и чекбоксом "Весь день" */
.event-title-row {
  position: relative;
}

.event-title-row > label[for="event-title"] {
  display: inline-block;
  margin-bottom: 8px;
}

/* Убираем двойную звездочку для названия события */
.event-title-row > label[for="event-title"]::after {
  content: '';
  display: none;
}

.allday-checkbox-inline {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.allday-checkbox-inline input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0;
}

.allday-checkbox-inline span {
  user-select: none;
}

.google-calendar-status {
  margin-bottom: 10px;
}

/* Компактное горизонтальное размещение Google Calendar элементов */
.google-calendar-section.compact-inline {
  margin-bottom: 12px;
}

.google-calendar-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.auth-status {
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-block;
  height: 36px;
  line-height: 20px;
  box-sizing: border-box;
  white-space: nowrap;
}

.auth-status.connected {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.auth-status.disconnected {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.google-calendar-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Компактная кнопка Google Calendar */
.btn-google-inline {
  height: 36px;
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Компактный чекбокс синхронизации */
.sync-option.inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  height: 36px;
  padding: 0 8px;
}

.btn-google {
  background: rgba(66, 133, 244, 0.9);
  backdrop-filter: blur(10px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-google:hover {
  background: rgba(51, 103, 214, 1);
  box-shadow: 0 6px 16px rgba(66, 133, 244, 0.3);
}

.btn-google:disabled {
  background: rgba(204, 204, 204, 0.7);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Кнопки синхронизации календаря с glassmorphism */
.btn-sync {
  background: rgba(108, 117, 125, 0.85);
  backdrop-filter: blur(10px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-sync:hover {
  background: rgba(52, 58, 64, 0.95);
  box-shadow: 0 6px 16px rgba(52, 58, 64, 0.3);
}

.btn-sync i {
  font-size: 14px;
}

.sync-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.sync-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.draggable-event.dragging {
  opacity: 0.5 !important;
  transform: rotate(2deg);
  z-index: 1000;
}

/* Индикатор того, что событие можно перетаскивать */
.draggable-event::before {
  content: '⋮⋮';
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: -1px;
  line-height: 0.5;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.draggable-event:hover::before {
  opacity: 1;
}

/* Drag & Drop стили для недельного вида */
.calendar-grid.week .week-day-sync.week-drop-target {
  background: rgba(102, 126, 234, 0.1);
  border: 2px dashed var(--primary);
  border-radius: 8px;
}

.calendar-grid.week .week-day-sync.week-drag-over {
  background: rgba(102, 126, 234, 0.15);
  border: 2px solid var(--primary);
  border-radius: 8px;
}

.calendar-grid.week .week-event.dragging {
  opacity: 0.5;
  transform: rotate(2deg);
  z-index: 1000;
}
/* Заголовки дней недели - ГОРИЗОНТАЛЬНЫЕ */
.calendar-grid.week .week-day-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  background: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
  font-weight: 600;
}

.calendar-grid.week .week-day-header.today {
  background: #e3f2fd;
  color: #1976d2;
}

.calendar-grid.week .week-day-header .day-name {
  font-size: 12px;
  font-weight: 500;
  color: #6c757d;
  margin-bottom: 2px;
}

.calendar-grid.week .week-day-header .day-number {
  font-size: 18px;
  font-weight: bold;
  color: #495057;
}

.calendar-grid.week .week-day-header .day-number.today {
  color: #1976d2;
  background: #ffffff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Стили для часовых меток в недельном виде */
.calendar-grid.week .calendar-week-hours-header {
  grid-column: 1;
  grid-row: 1;
  background: #f8f9fa;
  padding: 8px;
  font-weight: bold;
  border-bottom: 2px solid #dee2e6;
  text-align: center;
  font-size: 12px;
  color: #495057;
}

.calendar-grid.week .calendar-week-hours {
  grid-column: 1;
  grid-row: 2 / span 2;
  overflow: visible;
  border-right: 1px solid #dee2e6;
  background: #f8f9fa;
  min-height: 1440px;
  height: auto;
}

.calendar-grid.week .calendar-hour-label {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e9ecef;
  font-size: 11px;
  color: #6c757d;
  font-weight: 500;
  transition: all 0.2s ease;
}

/* Рабочие часы (9-18) - нормальная высота */
.calendar-grid.week .calendar-hour-label.working-hour {
  height: 60px;
  background: rgba(255, 255, 255, 0.8);
  border-left: 3px solid #28a745;
  color: #155724;
  font-weight: 600;
}

/* Нерабочие часы (0-8, 19-23) - немного уже */
.calendar-grid.week .calendar-hour-label.non-working-hour {
  height: 45px;
  background: rgba(248, 249, 250, 0.9);
  color: #6c757d;
  font-size: 10px;
  opacity: 0.8;
}

.calendar-grid.week .calendar-hour-label.major-hour {
  font-weight: bold;
  color: #495057;
  border-bottom: 2px solid #adb5bd;
}

.calendar-grid.week .calendar-hour-label.current-hour {
  background: #fff3cd !important;
  color: #856404 !important;
  font-weight: bold !important;
  border-left: 4px solid #ffc107 !important;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* События на весь день */
.all-day-events {
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(102, 126, 234, 0.2);
  padding-bottom: 4px;
}

.day-event.all-day-event {
  /* УНИФИЦИРОВАННЫЙ фон как у шапки */
  background: var(--event-bg);
  background-size: 200% 200%;
  animation: headerGradientShift 20s ease-in-out infinite;
  border-radius: var(--event-border-radius);
  padding: var(--event-padding);
  margin-bottom: 1px;
  font-size: var(--event-font-size);
  color: var(--event-text-color);
  font-weight: var(--event-font-weight);
  text-align: left;
  border: var(--event-border);
  border-left: 4px solid #dc2626;
  min-height: 16px;
  cursor: pointer;
  transition: var(--event-transition);
  position: relative;
  box-shadow: var(--event-shadow);
}

/* Индикатор кликабельности для событий на весь день */
.day-event.all-day-event::after {
  content: '✏️';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.6rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.day-event.all-day-event:hover {
  background: var(--event-bg-hover);
  background-size: 200% 200%;
  animation: headerGradientShift 20s ease-in-out infinite;
  box-shadow: var(--event-shadow-hover);
  filter: brightness(1.05);
}

.day-event.all-day-event:hover::after {
  opacity: 1;
}

/* События в дневном виде с временными позициями */
.day-event.timed-event {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--header-gradient);
  background-size: 200% 200%;
  animation: headerGradientShift 20s ease-in-out infinite;
  border-radius: 10px;
  padding: 4px 8px;
  margin: 0 2px;
  color: white;
  font-size: 0.75rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 10;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-event.timed-event .event-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
}

.day-event.timed-event .event-time {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.9;
  flex-shrink: 0;
  display: block;
  text-align: left;
  line-height: 1.2;
}

.day-event.timed-event .event-title {
  font-size: 0.75rem;
  font-weight: 500;
  overflow: hidden;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  line-height: 1.1;
  flex: 1;
}

.calendar-grid.week .event-time-small {
  font-weight: 600;
  font-size: 0.65rem;
  opacity: 0.9;
  flex-shrink: 0;
  display: block;
  text-align: left;
  line-height: 1.2;
}

.calendar-grid.week .event-title-small {
  font-weight: 500;
  white-space: normal !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  line-height: 1.1 !important;
  overflow: hidden;
  flex: 1;
  text-overflow: unset !important;
}

/* Заголовки дней недели - унифицированные стили как в недельном виде */
.calendar-day-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 8px !important;
  min-height: 60px !important;
  height: auto !important;
  background: var(--header-gradient) !important;
  background-size: 200% 200% !important;
  animation: headerGradientShift 20s ease-in-out infinite !important;
  opacity: 0.8 !important;
  border-bottom: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
  font-size: 0.8rem !important;
  color: #ffffff !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 8px 8px 0 0 !important;
}

.calendar-day-header:last-child {
  border-right: none;
}

/* Специальные стили для выходных дней в месячном виде - унифицированы с основным стилем */
.calendar-grid.month .calendar-day-header:nth-child(6),
.calendar-grid.month .calendar-day-header:nth-child(7) {
  background: var(--header-gradient) !important;
  background-size: 200% 200% !important;
  animation: headerGradientShift 20s ease-in-out infinite !important;
  opacity: 0.8 !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}

.calendar-grid.month .calendar-day:nth-child(6),
.calendar-grid.month .calendar-day:nth-child(7) {
  background: #fafbfc;
}

/* Специальные стили для выходных дней в недельном виде */
.calendar-grid.week .calendar-day-header:nth-child(7),
.calendar-grid.week .calendar-day-header:nth-child(8) {
  background: #f1f3f4;
  color: #5f6368;
  font-weight: 400;
}

.calendar-grid.week .calendar-day:nth-child(7),
.calendar-grid.week .calendar-day:nth-child(8) {
  background: #fafbfc;
}

/* Фиксация ширины событий в месячном виде */
.calendar-grid.month .day-event {
  max-width: calc(100% - 4px) !important;
  width: auto !important;
  overflow: hidden !important;
  white-space: normal !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
  flex-grow: 0 !important;
  flex-basis: auto !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  line-height: 1.1 !important;
  text-align: left !important;
}

/* Фиксация ширины событий в недельном виде */
.calendar-grid.week .day-event {
  max-width: calc(100% - 4px) !important;
  width: auto !important;
  overflow: hidden !important;
  white-space: normal !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
  flex-grow: 0 !important;
  flex-basis: auto !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  line-height: 1.1 !important;
  text-align: left !important;
}

/* Дни календаря в стиле Google Calendar с glassmorphism */
.calendar-day {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  border-right: 1px solid rgba(218, 220, 224, 0.5);
  border-bottom: none;
  padding: 8px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100px;
}

/* Унифицированный hover для всех типов календарных сеток */
.calendar-day:hover {
  background: rgba(240, 248, 255, 0.9) !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Специальные стили для столбцов с событиями */
.calendar-day.has-events:hover {
  background: #e8f0fe !important;
}

/* Специальные стили для сегодняшнего дня */
.calendar-day.today:hover {
  background: #d2e3fc !important;
}

/* Специальные стили для выходных дней */
.calendar-grid.month .calendar-day:nth-child(6):hover,
.calendar-grid.month .calendar-day:nth-child(7):hover,
.calendar-grid.week .calendar-day:nth-child(7):hover,
.calendar-grid.week .calendar-day:nth-child(8):hover {
  background: #f0f8ff !important;
}

.calendar-day.today {
  background: #e8f0fe;
}

.calendar-day.today .day-number {
  background: #1a73e8;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}

.calendar-day.has-events {
  background: #f8f9fa;
}

/* Выделение выбранной даты */
.calendar-day.selected .day-number {
  background: var(--danger);
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
  transform: scale(1.15);
  transition: var(--transition);
  border: 2px solid white;
}

/* Интерактивность для номера дня в месячном режиме */
.calendar-grid.month .calendar-day .day-number {
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 500 !important;
}

.calendar-grid.month .calendar-day .day-number:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: var(--danger) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
}

.calendar-grid.month .calendar-day.today .day-number:hover {
  background: var(--primary-hover) !important;
  color: white !important;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4) !important;
}

.calendar-day:last-child {
  border-right: none;
}

/* Содержимое дня */
.day-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: visible;
  min-height: 0;
  flex: 1;
  justify-content: flex-start;
  align-items: stretch;
}

.day-number {
  color: #3c4043;
  font-size: 0.875rem;
  font-weight: 400;
  margin-bottom: 4px;
  flex-shrink: 0;
  align-self: flex-start;
  transition: var(--transition);
}

.day-events {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: visible;
  min-height: 0;
  flex: 1;
  justify-content: flex-start;
  align-items: stretch;
}

/* События в стиле Google Calendar с glassmorphism */
.day-event {
  /* УНИФИЦИРОВАННЫЕ СТИЛИ ДЛЯ ВСЕХ ВИДОВ КАЛЕНДАРЯ */
  background: var(--event-bg);
  background-size: 200% 200%;
  animation: headerGradientShift 20s ease-in-out infinite;
  color: var(--event-text-color);
  padding: var(--event-padding);
  border-radius: var(--event-border-radius);
  font-size: var(--event-font-size);
  font-weight: var(--event-font-weight);
  cursor: pointer;
  transition: var(--event-transition);
  border: var(--event-border);
  border-left: var(--event-border-left);
  backdrop-filter: blur(8px);
  box-shadow: var(--event-shadow);
  line-height: 1.2;
  word-wrap: break-word;
  overflow: hidden;
  white-space: normal;
  flex-shrink: 1;
  min-height: 18px;
  margin-bottom: 1px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  position: relative;
  /* Фиксированная ширина для предотвращения растягивания колонок */
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  text-align: left;
}

/* Индикатор кликабельности */
.day-event::after {
  content: '✏️';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.6rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.day-event:hover::after {
  opacity: 1;
}

.day-event:hover {
  background: var(--event-bg-hover);
  background-size: 200% 200%;
  animation: headerGradientShift 20s ease-in-out infinite;
  box-shadow: var(--event-shadow-hover);
  border-color: rgba(255, 255, 255, 0.4);
  filter: brightness(1.05);
}

/* Индикатор повторяющихся событий - ОТКЛЮЧЕН (убрана иконка) */
/* .recurring::after {
  content: '🔁';
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  opacity: 0.8;
} */

.day-event.more-events {
  background: #5f6368;
  text-align: center;
  font-style: italic;
  font-size: 0.7rem;
}

/* === УНИФИЦИРОВАННЫЕ СТИЛИ ДЛЯ ИНДИКАТОРОВ ВРЕМЕНИ (ВСЕ ВИДЫ) === */
.event-time-indicator,
.event-time-inline {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.95;
  flex-shrink: 0;
  display: block;
  text-align: left;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
}

/* Стили для названий событий */
.event-title,
.event-title-inline {
  font-size: var(--event-font-size);
  font-weight: var(--event-font-weight);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

/* События с точкой времени - убрана точка */
.day-event.has-time::before {
    display: none;
}


/* Старые стили hover отключены - используем новые в месячном режиме */

/* Анимация появления событий */
.day-event {
  animation: fadeInUp 0.3s ease-out;
}

/* ========== СТАТУСЫ СОБЫТИЙ: ВАЖНОЕ И ВЫПОЛНЕНО ========== */

/* Кнопки статусов на событиях */
.event-status-buttons {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  gap: 4px;
  z-index: 10;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.day-event:hover .event-status-buttons {
  opacity: 1;
}

.event-status-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
  transition: transform 0.1s ease, filter 0.2s ease;
}

.event-status-btn:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.3));
}

.event-status-btn:active {
  transform: scale(1.0);
}

/* Выполненное событие (Вариант 2) */
.event-completed {
  opacity: 0.6 !important;
}

.event-completed .event-title-text,
.event-completed .event-title {
  text-decoration: line-through !important;
}

/* Важное событие (Вариант 2) */
.event-important {
  border: 2px solid #ef4444 !important;
  border-left: 4px solid #ef4444 !important;
}

.event-important .event-title-text,
.event-important .event-title {
  font-weight: bold !important;
}

/* Комбинация важное + выполнено */
.event-completed.event-important {
  opacity: 0.5 !important;
  border-color: #f59e0b !important; /* Оранжевая рамка для комбинации */
}

/* ========== КОНЕЦ СТАТУСОВ СОБЫТИЙ ========== */

/* Контейнер для поля времени с выпадающим списком */
.time-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.time-input-container input[type="time"] {
    flex: 1;
    margin-right: 8px;
}

/* Кнопка выпадающего списка времени */
.time-dropdown-btn {
    background: var(--header-gradient);
    background-size: 200% 200%;
    animation: headerGradientShift 20s ease-in-out infinite;
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    font-size: 16px;
    height: 40px;
    padding: 0 12px;
    transition: all 0.3s ease;
    width: 40px;
}

.time-dropdown-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Выпадающий список времени */
.time-dropdown {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: none;
    max-height: 200px;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 100%;
    width: 100px;
    z-index: 1000;
}

.time-dropdown.show {
    display: block;
}

.time-option {
    cursor: pointer;
    font-size: 14px;
    padding: 8px 12px;
    transition: background-color 0.2s ease;
}

.time-option:hover {
    background-color: #f5f5f5;
}

.time-option:active {
    background-color: #e0e0e0;
}

/* Унификация шрифтов в полях формы */
.form-group input[type="date"],
.form-group input[type="time"],
.form-group select {
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

/* Контейнер событий в недельном виде для позиционирования по времени */
.calendar-grid.week .day-events {
    position: relative !important;
    height: 1440px; /* 24 часа * 60px на час */
    padding: 0;
    overflow-y: auto !important;
    margin: 0;
    background: transparent;
    max-height: calc(100vh - 200px);
}

/* Сетка для всех дней недели */
.calendar-grid.week .calendar-day {
    background-image:
        /* Только часовые линии (каждые 60px) */
        linear-gradient(to bottom, #d1d5db 1px, transparent 1px);
    background-size: 100% 60px;
    background-position: 0 0;
    min-height: 1440px; /* 24 часа * 60px на час */
}

/* События в недельном виде с позиционированием по времени */
.calendar-grid.week .day-event.timed {
    position: absolute !important;
    width: calc(100% - 4px) !important;
    margin: 0 2px !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    background: var(--header-gradient) !important;
    background-size: 200% 200% !important;
    animation: headerGradientShift 20s ease-in-out infinite !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    z-index: 10 !important;
    overflow: hidden !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Стили прокрутки для недельного вида */
.calendar-grid.week .day-events::-webkit-scrollbar {
    width: 8px;
}

.calendar-grid.week .day-events::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.calendar-grid.week .day-events::-webkit-scrollbar-thumb {
    background: var(--header-gradient);
    border-radius: 4px;
}

.calendar-grid.week .day-events::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

/* Вертикальные линии между днями недели */
.calendar-grid.week .calendar-day {
    border-right: 1px solid #e5e7eb;
    position: relative;
}

.calendar-grid.week .calendar-day:last-child {
    border-right: none;
}

/* События на весь день в недельном виде */
.calendar-grid.week .day-event.all-day-event {
    position: relative;
    width: 100%;
    margin: 2px 0;
    border-radius: 6px;
    padding: 4px 8px;
    box-sizing: border-box;
    background: var(--header-gradient);
    background-size: 200% 200%;
    animation: headerGradientShift 20s ease-in-out infinite;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Заголовки дней недели в недельном виде */
.calendar-grid.week .calendar-day-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 8px !important;
  min-height: 60px !important;
  height: auto !important;
  background: var(--header-gradient) !important;
  background-size: 200% 200% !important;
  animation: headerGradientShift 20s ease-in-out infinite !important;
  opacity: 0.8 !important;
  border-bottom: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
  font-size: 0.8rem !important;
  color: #ffffff !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 8px 8px 0 0 !important;
}

.calendar-grid.week .calendar-day-header:last-child {
  border-right: none;
}

.calendar-grid.week .calendar-day-header .day-name {
  font-weight: 600;
  margin-bottom: 4px;
  color: #ffffff;
  text-shadow: none;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.calendar-grid.week .calendar-day-header .day-number {
  font-weight: 700;
  font-size: 1.2rem;
  color: #ffffff;
  text-shadow: none;
  line-height: 1;
  position: absolute;
  bottom: 8px;
  left: 8px;
  text-align: left;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Стили для пустых дней */
.calendar-day:not(.has-events) {
  position: relative;
}

/* Кнопка для пустых дней (месячный вид) - только для time-slot */
.calendar-day.time-slot:not(.has-events)::after {
  content: '+';
  position: absolute;
  top: 3px;
  right: 3px;
  width: clamp(14px, 2vw, 20px);
  height: clamp(14px, 2vw, 20px);
  min-width: 14px;
  min-height: 14px;
  max-width: 20px;
  max-height: 20px;
  background: var(--header-gradient);
  background-size: 200% 200%;
  animation: headerGradientShift 12s ease-in-out infinite;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(9px, 1.3vw, 12px);
  font-weight: bold;
  line-height: 1;
  padding: 0;
  margin: 0;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(45, 27, 78, 0.3);
}

.calendar-day.time-slot:not(.has-events):hover::after {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 3px 10px rgba(45, 27, 78, 0.4);
}

/* Убираем кнопку из events-slot */
.calendar-day.events-slot:not(.has-events)::after {
  display: none !important;
}

/* ===== ВРЕМЕННАЯ ШКАЛА ДЛЯ НЕДЕЛЬНОГО ВИДА ===== */

/* Контейнер временной шкалы */
.calendar-timeline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
}

/* Линия текущего времени */
.timeline-current-time {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #ea4335;
  z-index: 11;
  pointer-events: none;
  box-shadow: 0 0 4px rgba(234, 67, 53, 0.5);
}

/* Индикатор текущего времени */
.timeline-current-time::before {
  content: '';
  position: absolute;
  left: -6px;
  top: -4px;
  width: 10px;
  height: 10px;
  background: #ea4335;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 4px rgba(234, 67, 53, 0.5);
}

/* Анимация пульсации */
.timeline-current-time::after {
  content: '';
  position: absolute;
  left: -8px;
  top: -6px;
  width: 14px;
  height: 14px;
  background: rgba(234, 67, 53, 0.3);
  border-radius: 50%;
  animation: timelinePulse 2s ease-in-out infinite;
}

@keyframes timelinePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

/* Стили для недельного вида с временной шкалой */
.calendar-grid.week .calendar-day {
  position: relative;
}

/* Скрываем временную шкалу в других видах */
.calendar-grid.month .calendar-timeline,
.calendar-grid.day .calendar-timeline {
  display: none;
}

/* ===== ЧАСОВЫЕ МЕТКИ ДЛЯ НЕДЕЛЬНОГО ВИДА ===== */

/* Контейнер для часовых меток */
.calendar-week-hours {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  background: var(--header-gradient);
  background-size: 200% 200%;
  animation: headerGradientShift 20s ease-in-out infinite;
  opacity: 0.8;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 1440px; /* 24 часа * 60px на час */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* Стили для скроллбара в контейнере часовых меток */
.calendar-week-hours::-webkit-scrollbar {
  width: 6px;
}

.calendar-week-hours::-webkit-scrollbar-track {
  background: transparent;
}

.calendar-week-hours::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.calendar-week-hours::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Заголовок для часовых меток */
.calendar-week-hours-header {
  grid-column: 1;
  grid-row: 1;
  background: var(--header-gradient);
  background-size: 200% 200%;
  animation: headerGradientShift 20s ease-in-out infinite;
  opacity: 0.8;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Отдельная часовая метка */
.calendar-hour-label {
  height: 60px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 4px 8px 0 0;
  font-size: 0.75rem;
  color: #ffffff;
  font-weight: 400;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  box-sizing: border-box;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Унифицированные стили для всех часов */
.calendar-hour-label.major-hour,
.calendar-hour-label.minor-hour {
  font-weight: 500;
  font-size: 0.8rem;
  color: #ffffff;
  opacity: 1;
}

/* Адаптивность для часовых меток */
@media (max-width: 768px) {
  .calendar-grid.week {
    grid-template-columns: 50px repeat(7, 1fr) !important;
  }

  .calendar-week-hours-header {
    font-size: 0.7rem;
  }

  .calendar-hour-label {
    height: 50px;
    font-size: 0.7rem;
    padding: 2px 6px 0 0;
  }

  .calendar-hour-label.major-hour,
  .calendar-hour-label.minor-hour {
    font-size: 0.7rem;
    opacity: 1;
  }
}

/* Дополнительные стили для часовых меток */
.calendar-hour-label:hover {
  background: #f0f8ff;
  color: #333333;
}

.calendar-hour-label.current-hour {
  background: rgba(220, 53, 69, 0.2) !important;
  color: #dc3545 !important;
  font-weight: 600 !important;
  border-left: 3px solid #dc3545;
  position: relative;
}

/* Стили для текущего часа */
.calendar-hour-label.current-hour::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #dc3545;
}

/* Адаптивность временной шкалы */
@media (max-width: 768px) {
  .timeline-current-time::before {
    width: 8px;
    height: 8px;
    left: -4px;
    top: -3px;
  }

  .timeline-current-time::after {
    width: 12px;
    height: 12px;
    left: -6px;
    top: -5px;
  }
}

/* Дополнительные стили для временной шкалы */
.calendar-grid.week .calendar-timeline {
  transition: opacity 0.3s ease;
}

.calendar-grid.week:hover .calendar-timeline {
  opacity: 1;
}

/* Переключатель видов в заголовке */
.view-toggle {
  display: flex;
  gap: 8px;
}

.btn-view {
  background: var(--header-gradient);
  background-size: 600% 600%;
  animation: headerGradientShift 12s ease-in-out infinite;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.85rem;
  padding: 8px 16px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.8;
}

.btn-view:hover {
  opacity: 1;
  box-shadow: 0 6px 18px rgba(45, 27, 78, 0.35);
}

.btn-view.active {
  opacity: 1;
  background: var(--header-gradient);
  background-size: 600% 600%;
  animation: headerGradientShift 12s ease-in-out infinite;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.45);
  border: none;
  position: relative;
  outline: 2px solid #dc3545;
  outline-offset: -2px;
}

/* Убираем красный псевдоэлемент - контур теперь делается через outline */

@keyframes borderShimmer {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.02); }
}



/* Временные слоты для первого блока (00-12) */
.calendar-grid.day .time-slot-1 {
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin: 1px;
  color: #374151;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.05);
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.calendar-grid.day .events-slot-1 {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  margin: 1px;
  padding: 4px 8px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: visible;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  align-items: stretch;
}

/* Временные слоты для второго блока (13-24) */
.calendar-grid.day .time-slot-2 {
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin: 1px;
  color: #374151;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.05);
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.calendar-grid.day .events-slot-2 {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  margin: 1px;
  padding: 4px 8px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: visible;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  align-items: stretch;
}

.calendar-grid.day .events-slot-1.has-events,
.calendar-grid.day .events-slot-2.has-events {
  background: rgba(102, 126, 234, 0.08);
}

.hour-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  overflow: visible;
  min-height: 0;
  flex: 1;
  justify-content: flex-start;
  align-items: stretch;
}

.day-event.hour-event {
  padding: 3px 6px;
  font-size: 0.75rem;
  border-radius: 6px;
  background: var(--header-gradient);
  background-size: 200% 200%;
  animation: headerGradientShift 20s ease-in-out infinite;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  color: white;
  font-weight: 500;
  flex-shrink: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

/* Индикатор кликабельности для событий в дневном виде */
.day-event.hour-event::after {
  content: '✏️';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.6rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.day-event.hour-event:hover::after {
  opacity: 1;
}

.event-time-inline {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.9;
  flex-shrink: 0;
  min-width: 35px;
}

.event-title-inline {
  font-size: 0.75rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  flex: 1;
  justify-content: flex-start;
  align-items: stretch;
}

.event-time-inline {
  font-weight: 600;
  font-size: 0.7rem;
  opacity: 0.9;
  flex-shrink: 0;
}

.event-title-inline {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* Адаптивность */
/* Средние разрешения (1200px - 1400px, включая 1300x700) */
@media (max-width: 1400px) {
  .calendar-fullscreen {
    padding: 14px;
    box-sizing: border-box;
    height: calc(100vh - 72px);
    height: calc(100svh - 72px);
    overflow: hidden;
  }

  .calendar-container {
    overflow: hidden;
  }

  .calendar-content {
    overflow: auto; /* Включаем прокрутку для контента */
    min-height: 0;
  }

  .calendar-grid {
    min-width: 650px; /* Уменьшаем минимальную ширину */
    min-height: 450px; /* Уменьшаем минимальную высоту */
    overflow: auto; /* Гарантируем прокрутку */
  }

  .calendar-grid.month,
  .calendar-grid.week,
  .calendar-grid.day {
    overflow: auto !important; /* Принудительно включаем прокрутку для всех режимов */
  }

  /* Обеспечиваем прокрутку для недельного вида */
  .calendar-grid.week .calendar-week-hours-grid,
  .calendar-grid.week .week-day-grid {
    max-height: calc(100vh - 250px);
  }

  /* Обеспечиваем прокрутку для дневного вида */
  .calendar-grid.day {
    min-width: 650px;
    max-height: calc(100vh - 200px);
    overflow: auto !important;
  }

  /* Компактные кнопки переключения видов */
  .view-toggle {
    gap: 6px;
  }

  .btn-view {
    padding: 6px 10px;
    font-size: 0.85rem;
  }

  .calendar-header h3 {
    font-size: 1.2rem;
    min-width: 180px;
  }
}

@media (max-width: 1200px) {
  .calendar-fullscreen {
    padding: 12px;
    box-sizing: border-box;
  }

  .calendar-header {
    padding: 8px 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
    text-align: center;
  }

  .calendar-header-left {
    display: none;
  }

  .calendar-header-center {
    grid-row: 1;
    gap: 20px;
  }

  .calendar-header-right {
    grid-row: 2;
    justify-content: center;
  }

  .btn-nav {
    width: 45px;
    height: 45px;
    font-size: 1rem;
  }

  /* Улучшения для планшетов */
  .calendar-grid.week .calendar-day {
    min-height: calc(100vh - 200px);
  }

  /* Оптимизация для диагностики */
  .debug-btn {
    font-size: 0.9rem;
    padding: 8px 12px;
  }

  .compare-btn {
    font-size: 0.9rem;
    padding: 8px 12px;
  }

  .time-diagnostic-btn {
    font-size: 0.9rem;
    padding: 8px 12px;
  }

  .force-refresh-btn {
    font-size: 0.9rem;
    padding: 8px 12px;
  }

  .view-toggle .force-refresh-btn {
    margin-left: 10px;
    padding: 6px 10px;
    font-size: 0.8rem;
  }


  .calendar-header h3 {
    font-size: 1.3rem;
  }
}

@media (max-width: 768px) {
  .calendar-fullscreen {
    padding: 8px;
    box-sizing: border-box;
    height: calc(100vh - 60px);
    height: calc(100svh - 60px);
    overflow: hidden;
  }

  .calendar-header {
    padding: 6px 0;
    margin-bottom: 8px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 8px;
  }

  .calendar-header-left {
    display: none;
  }

  .calendar-header-center {
    gap: 15px;
    grid-row: 1;
  }

  .calendar-header-right {
    grid-row: 2;
    justify-content: center;
  }

  .calendar-header h3 {
    font-size: 1.1rem;
    min-width: 150px;
  }

  .btn-nav {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }

  .btn-view {
    padding: 6px 12px;
    font-size: 0.8rem;
  }

  .calendar-grid {
    gap: 4px;
  }

  .calendar-day {
    padding: 4px;
  }

  .day-number {
    font-size: 0.9rem;
    margin-bottom: 4px;
  }

  .day-event {
    font-size: 0.65rem;
    padding: 2px 4px;
  }

  .calendar-day-header {
    padding: 8px 4px;
    font-size: 0.7rem;
    min-height: 60px !important;
  }

  /* Специальные стили для заголовков дней недели в недельном виде на мобильных */
  .calendar-grid.week .calendar-day-header {
    padding: 12px 6px !important;
    min-height: 60px !important;
  }

  /* На мобильных устройствах возвращаем равные колонки */
  .calendar-grid.month {
    grid-template-columns: repeat(7, 1fr);
  }
}

/* Для планшетов сохраняем гармоничное распределение */
@media (min-width: 769px) and (max-width: 1024px) {
  .calendar-grid.month {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 0.8fr 0.8fr;
  }

  .calendar-grid.week {
    grid-template-columns: 60px 1fr 1fr 1fr 1fr 1fr 0.8fr 0.8fr !important;
  }
}

/* Для больших экранов принудительно применяем гармоничное распределение */
@media (min-width: 1025px) {
  .calendar-grid.month {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 0.8fr 0.8fr !important;
  }

  .calendar-grid.week {
    grid-template-columns: 60px 1fr 1fr 1fr 1fr 1fr 0.8fr 0.8fr !important;
  }
}

@media (max-width: 480px) {
  .calendar-fullscreen {
    padding: 6px;
    box-sizing: border-box;
    height: calc(100vh - 56px);
    height: calc(100svh - 56px);
    overflow: hidden;
  }

  .calendar-container {
    padding: 8px;
    box-sizing: border-box;
  }

  .calendar-day {
    min-height: 60px;
    padding: 6px;
  }

  .day-number {
    font-size: 0.85rem;
  }

  .day-event {
    font-size: 0.65rem;
    padding: 3px 5px;
  }
}
/* 🎨 СОВРЕМЕННЫЕ UX ЭЛЕМЕНТЫ ДЛЯ КАЛЕНДАРЯ */

/* Индикатор загрузки */
.calendar-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 20px;
}

.calendar-loading-overlay.show {
  opacity: 1;
}

.calendar-loading-overlay.hide {
  opacity: 0;
}

.calendar-loading-content {
  text-align: center;
  color: white;
}

.calendar-loading-spinner {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(102, 126, 234, 0.8), transparent);
  animation: spin 1.5s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner-gradient {
  width: 45px;
  height: 45px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.loading-progress {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
  margin: 0 auto;
}

.progress-bar {
  width: 100%;
  height: 100%;
  background: var(--header-gradient);
  background-size: 200% 200%;
  animation: headerGradientShift 2s ease-in-out infinite, progressMove 2s ease-in-out infinite;
  transform: translateX(-100%);
}

@keyframes progressMove {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(0%); }
}

/* Анимация обновления календаря */
.calendar-grid.refreshing {
  opacity: 0.6;
  transform: scale(0.98);
  transition: all 0.3s ease;
}

/* Уведомления об ошибках */
.calendar-error-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(231, 76, 60, 0.95);
  backdrop-filter: blur(15px);
  color: white;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 25px rgba(231, 76, 60, 0.3);
  z-index: 1001;
  max-width: 350px;
  animation: slideInRight 0.3s ease;
}

.calendar-error-notification h4 {
  margin: 0 0 10px 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.calendar-error-notification p {
  margin: 0 0 15px 0;
  line-height: 1.4;
}

.error-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.error-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

/* Уведомления об успехе */
.calendar-success-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(39, 174, 96, 0.95);
  backdrop-filter: blur(15px);
  color: white;
  padding: 15px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 25px rgba(39, 174, 96, 0.3);
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: slideInRight 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.calendar-success-notification.hide {
  opacity: 0;
  transform: translateX(100%);
}

.success-icon, .error-icon {
  font-size: 1.2rem;
}

.success-content p {
  margin: 0;
  font-weight: 500;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Улучшения для мобильных уведомлений */
@media (max-width: 480px) {
  .calendar-error-notification,
  .calendar-success-notification {
    left: 10px;
    right: 10px;
    top: 10px;
  }

  .calendar-error-notification {
    max-width: none;
  }
}
@media (max-width: 768px) {
  .header-root, #header-root {
    padding: 0 16px;
  }

  .page-content, .columns-list {
    padding: 0 16px;
    width: 100%;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* .category-tags-menu стили удалены */
}

@media (max-width: 480px) {
  .header-right {
    gap: 16px;
  }

  .header-datetime {
    margin-right: 8px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== 20. СТРАНИЦА АВТОРИЗАЦИИ ===== */

/* Анимации для страницы авторизации */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}



@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

/* Страница авторизации */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--header-gradient);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}

/* Принудительное отключение градиентов для элементов авторизации */
.auth-page * {
  background-image: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
}

.auth-page .auth-subtitle,
.auth-page .login-links a {
  background-image: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
}

.auth-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -100;
}

.auth-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
              radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
  animation: float 6s ease-in-out infinite;
}

/* Контейнер авторизации */
.auth-container {
  position: relative;
  z-index: 1000;
  width: 100%;
  max-width: 380px; /* Уменьшено с 500px до 380px для более компактного вида */
  padding: 20px;
  animation: slideInUp 0.8s ease-out;
}

.auth-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  animation: fadeInScale 0.6s ease-out 0.2s both;
}

.auth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: shimmer 3s infinite;
}

/* Заголовок авторизации */
.auth-header {
  text-align: center;
  margin-bottom: 20px;
}

.auth-logo {
  margin-bottom: 20px;
  margin-left: 19px;
  margin-right: 19px;
  animation: pulse 2s ease-in-out infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
  max-width: calc(100% - 38px);
}

.logo-img {
  height: 102px;
  width: auto;
  max-width: 100%;
  border-radius: 16px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.auth-header .auth-subtitle,
.auth-subtitle {
  font-size: 16px;
  font-weight: 700;
  color: #fff !important;
  margin-bottom: 6px;
  background: var(--header-gradient) !important;
  background-size: 600% 600% !important;
  animation: headerGradientShift 12s ease-in-out infinite !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: 0 2px 4px rgba(45, 27, 78, 0.3) !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  display: inline-block !important;
}

.auth-date {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 8px;
  font-family: inherit;
  font-weight: 400;
}

.page-update-info {
  font-size: 11px;
  color: #9ca3af;
  display: flex;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-weight: 400;
}

/* Форма авторизации */
.auth-form {
  animation: slideInUp 0.8s ease-out 0.4s both;
  padding: 0 16px; /* Уменьшено с 20px до 16px для более компактного вида */
}

/* Удалено - используем унифиц ированные стили выше */

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
  transition: var(--transition);
}

/* Удалено - иконки больше не используются */

/* Специальные стили для полей с иконками */
.form-group input[type="password"],
.form-group input[type="text"] {
  padding-right: 16px; /* Унифицированный отступ - иконки убраны */
}

/* Удалено - используем унифицированные стили выше */

.form-group input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  transform: translateY(-2px);
}

.form-group input::placeholder {
  color: #9ca3af;
  font-style: italic;
}

/* Специфичные стили для поля пароля */
.form-group input[type="password"] {
  padding-right: 16px; /* Унифицированный отступ - иконки убраны */
}

/* Удалено - дублирующий стиль, используем стиль выше */

/* Иконка просмотра пароля - ПРИНУДИТЕЛЬНО ЦЕНТРИРОВАНА */
.password-toggle {
  position: absolute !important;
  right: 12px !important;
  top: calc(50% + 0px) !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: #9ca3af !important;
  transition: all 0.2s ease !important;
  padding: 8px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  z-index: 999 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.password-toggle:hover {
  color: #6b7280 !important;
  background: rgba(156, 163, 175, 0.1) !important;
  transform: translateY(-50%) scale(1.1) !important;
}

.password-toggle:active {
  transform: translateY(-50%) scale(0.9) !important;
  background: rgba(156, 163, 175, 0.2) !important;
}

.password-toggle i {
  font-size: 18px !important;
  transition: all 0.2s ease !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(-2px) !important;
}

.password-toggle.showing i {
  color: #667eea !important;
}



/* ===== НОВЫЕ КНОПКИ АВТОРИЗАЦИИ ===== */
.auth-form .form-actions {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  padding: 0 16px; /* Уменьшено с 20px до 16px для более компактного вида */
}

.auth-btn {
  width: 100% !important;
  background: var(--header-gradient) !important;
  background-size: 600% 600% !important;
  animation: headerGradientShift 12s ease-in-out infinite !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  padding: 16px 24px !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  opacity: 0.95 !important;
  box-shadow: 0 4px 16px rgba(45, 27, 78, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
}

.auth-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.5s ease;
}

.auth-btn:hover {
  opacity: 1 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(45, 27, 78, 0.4) !important;
}

.auth-btn:hover::before {
  left: 100%;
}

.auth-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 16px rgba(45, 27, 78, 0.3) !important;
}

.auth-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.auth-btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  z-index: 1;
  position: relative;
}

.auth-btn-loader {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 1;
  position: relative;
}

.auth-btn .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/* Ссылки */
.login-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px; /* Уменьшено с 14px для компактности */
  padding: 0 16px; /* Уменьшено с 20px до 16px для более компактного вида */
}

.login-links a {
  color: rgba(45, 27, 78, 0.5) !important;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 10px 16px; /* Уменьшено с 12px 20px для компактности */
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.9) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(45, 27, 78, 0.2) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 14px !important;
}

.login-links a:hover {
  color: #fff !important;
  transform: translateY(-2px) !important;
  background: var(--header-gradient) !important;
  background-size: 600% 600% !important;
  animation: headerGradientShift 12s ease-in-out infinite !important;
  box-shadow: 0 8px 24px rgba(45, 27, 78, 0.4) !important;
}

.login-links a:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 16px rgba(45, 27, 78, 0.3) !important;
}

/* Адаптивность для страницы авторизации */
@media (max-width: 480px) {
  .auth-container {
    padding: 16px;
  }

  .auth-card {
    padding: 32px 24px;
    border-radius: 20px;
  }

  /* Адаптивные отступы для формы на мобильных */
  .auth-form {
    padding: 0 12px; /* Минимальные отступы на мобильных */
  }

  .auth-form .form-actions {
    padding: 0 12px; /* Минимальные отступы для кнопок */
  }

  .login-links {
    padding: 0 12px; /* Минимальные отступы для ссылок */
    gap: 6px; /* Еще меньший отступ между кнопками на мобильных */
  }

  .login-links a {
    padding: 8px 12px; /* Компактные отступы для кнопок на мобильных */
    font-size: 12px; /* Уменьшенный размер шрифта */
  }

  .auth-header .auth-subtitle,
  .auth-subtitle {
    font-size: 16px;
    color: #667eea !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
  }

  /* Удалено - используем унифицированные стили выше */

  .btn {
    padding: 14px 20px;
    font-size: 16px;
  }

  .login-links {
    flex-direction: row; /* КНОПКИ В ОДНУ СТРОКУ НА МОБИЛЬНЫХ */
    gap: 8px; /* Уменьшенный отступ между кнопками */
    text-align: center;
  }
}

/* Дополнительные эффекты */
.auth-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
  pointer-events: none;
  z-index: 1;
}





/* Удалено - теги функций больше не используются */

/* Обертка для полей ввода - РАДИКАЛЬНО ПЕРЕРАБОТАНА */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  width: 100%;
}

.input-focus-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #667eea, #667eea);
  transition: width 0.3s ease;
  border-radius: 1px;
}

.form-group input:focus ~ .input-focus-border {
  width: 100%;
}

/* Эффекты для ссылок */
.link-effect {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

/* Удалено - иконки ссылок больше не используются */

/* Статус системы */
.auth-footer {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid rgba(229, 231, 235, 0.5);
  text-align: center;
}

.system-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.status-indicator.online {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.status-indicator.offline {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.status-text {
  font-weight: 500;
}

/* Дополнительные анимации */
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Анимация появления элементов с задержкой */
.auth-header {
  animation: slideInFromLeft 0.8s ease-out 0.2s both;
}

.auth-form {
  animation: slideInFromRight 0.8s ease-out 0.4s both;
}

.auth-footer {
  animation: slideInUp 0.8s ease-out 0.6s both;
}

/* Улучшенные эффекты при наведении */
.auth-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}





/* ===== 19. ГЛОБАЛЬНЫЕ СТИЛИ НАЗВАНИЙ СТРАНИЦ ===== */

/* Контейнер заголовка страницы */
.page-title-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

/* Основное название страницы - УНИФИЦИРОВАНО */
.page-title,
.page-header-unified .page-title {
  margin: 0;
  font-size: 2.1875rem; /* Уменьшено на 5px (с 40px до 35px) */
  font-weight: 600; /* Уменьшено на 100 (с 700 до 600) */
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #1f2937;
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* Информация об обновлении страницы - СКРЫТА (заменена на блок в шапке) */
.page-update-info {
  display: none !important;
}

/* Адаптивность для названий страниц */
@media (max-width: 1200px) {
  .page-title {
    font-size: 1.9375rem; /* Уменьшено на 5px (с 36px до 31px) */
  }
}

@media (max-width: 768px) {
  .page-title {
    font-size: 1.6875rem; /* Уменьшено на 5px (с 32px до 27px) */
    white-space: normal;
  }

  .page-update-info {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 1.4375rem; /* Уменьшено на 5px (с 28px до 23px) */
  }
}

/* ===== 20. СТИЛИ ПРОЕКТОВ ===== */

/* Основной контейнер проектов */
.project-main {
  min-height: calc(100vh - 72px);
  width: 100%;
  margin: 0;
  padding: 32px 0 32px 0;
  display: flex;
  flex-direction: column;
}

/* Заголовок страницы проектов - УДАЛЕНО: дублирующиеся стили */
  flex-wrap: nowrap;
  min-height: 80px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
  flex: 1;
}

/* Сообщения об отсутствии проектов */
.no-projects-message {
  text-align: center;
  padding: 60px 20px;
  max-width: 500px;
  margin: 0 auto;
}

.no-projects-icon {
  font-size: 4rem;
  margin-bottom: 20px;
  opacity: 0.6;
}

.no-projects-message h3 {
  margin: 0 0 16px 0;
  color: #374151;
  font-size: 1.5rem;
  font-weight: 600;
}

.no-projects-message p {
  margin: 0 0 24px 0;
  color: #6b7280;
  font-size: 1rem;
  line-height: 1.5;
}

/* Уведомления */
.error-notification,
.success-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  max-width: 400px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.error-notification {
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.success-notification {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.error-notification.show,
.success-notification.show {
  transform: translateX(0);
}

.error-icon,
.success-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.error-message {
  color: #dc2626;
  font-weight: 500;
  flex: 1;
}

.success-message {
  color: #059669;
  font-weight: 500;
  flex: 1;
}

.error-close,
.success-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.error-close {
  color: #dc2626;
}

.success-close {
  color: #059669;
}

.error-close:hover {
  background: #fee2e2;
}

.success-close:hover {
  background: #d1fae5;
}

/* ===== СТИЛИ КАРТОЧЕК ПРОЕКТОВ ===== */

/* Карточка проекта */
.project-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
  padding: 0;
  transition: all 0.2s ease;
  border-left: 4px solid var(--col, #667eea);
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}

/* ===== СТИЛИ КАРТОЧЕК НАПРАВЛЕНИЙ БОТОВ (как проекты) ===== */

/* Карточка направления ботов */
.bot-section {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  transition: all 0.2s ease;
  border-left: 4px solid var(--col, #667eea);
}

.bot-section:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Заголовок направления ботов */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px 20px;
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.section-title h3 {
  font-weight: 600;
  font-size: 1.1rem;
  color: #1f2937;
  margin: 0;
}

.section-count {
  background: var(--col, #667eea);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.section-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Контент направления */
.section-content {
  padding: 16px 20px;
  min-height: 60px;
}

.bots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

/* Кнопка добавления бота (как в проектах) */
.bot-section .add-task-btn {
  background: var(--col, #667eea);
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.bot-section .add-task-btn:hover {
  background: var(--col, #667eea);
  filter: brightness(1.1);
  transform: scale(1.1);
}

/* Пустое состояние */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #6b7280;
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #374151;
}

.empty-state-description {
  font-size: 0.9rem;
  line-height: 1.5;
}

.project-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.project-card.dragging {
  opacity: 0.5;
  transform: rotate(5deg);
}

/* Заголовок карточки проекта */
.project-header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 6px 16px !important;
  border-bottom: 1px solid var(--border-light) !important;
  background: color-mix(in srgb, var(--col, #667eea) 50%, transparent) !important;
  border-radius: 8px 8px 0 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 55px !important;
  max-height: 55px !important;
  position: relative !important;
  overflow: visible !important;
}

/* Контент проекта */
.project-content {
  padding: 16px;
}

.project-name {
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: #1f2937 !important;
  cursor: pointer !important;
  flex: 1 !important;
  margin-right: 0 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  transition: color 0.2s ease !important;
  line-height: 1.2 !important;
}

.project-name:hover {
  color: #2d1b4e;
}

.add-task-btn {
  background: color-mix(in srgb, #2d1b4e 50%, transparent);
  color: white;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.add-task-btn:hover {
  background: color-mix(in srgb, #2d1b4e 70%, transparent);
  transform: scale(1.1);
}

/* Кнопка today-toggle в заголовке проекта */
.today-toggle-btn {
  background: #9ca3af;
  color: white;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  position: relative;
}

.today-toggle-btn::before {
  content: "📅";
  font-size: 14px;
  pointer-events: none;
}

.today-toggle-btn.active {
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
}

.today-toggle-btn:hover {
  background: #6b7280;
  transform: scale(1.1);
}

.today-toggle-btn.active:hover {
  background: #059669;
}

/* Структура заголовка проекта */
 .project-header-row {
   display: flex !important;
   justify-content: flex-start !important;
   align-items: center !important;
   width: 100% !important;
   height: 100% !important;
   margin: 0 !important;
   padding: 0 !important;
   box-sizing: border-box !important;
   flex: 1 !important;
 }

 .project-header-center {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   flex: 1;
   margin: 0 16px;
 }

 .project-badges-bottom-right {
   position: absolute;
   bottom: 4px;
   right: 4px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 2px;
   align-items: center;
   justify-content: flex-end;
   z-index: 10;
   max-width: 180px;
 }

/* Стили для badges задач в нижнем правом углу */
.task-badges-bottom-right {
  position: absolute;
  bottom: 4px;
  right: 4px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  justify-content: flex-end;
  z-index: 10;
  max-width: 120px;
}

/* Стили для всех badges в задачах */
.task-badges-bottom-right .task-employee-badge,
.task-badges-bottom-right .task-client-badge,
.task-badges-bottom-right .task-goal-badge,
.task-badges-bottom-right .task-checklist-badge,
.task-badges-bottom-right .task-note-badge,
.task-badges-bottom-right .task-idea-badge,
.task-badges-bottom-right .task-edit-badge {
  font-size: 0.7rem;
  padding: 2px 4px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

/* Контейнер для иконки "показывать в сегодня" в верхнем правом углу задачи */
.task-today-toggle-top-right {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 15;
}

/* Стили для today-toggle в верхнем правом углу задачи */
.task-today-toggle-top-right .today-toggle {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #9ca3af !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  position: relative !important;
  border: none !important;
  display: block !important;
}

.task-today-toggle-top-right .today-toggle::before {
  content: "📅" !important;
  font-size: 10px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none;
}

.task-today-toggle-top-right .today-toggle.active {
  background: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3) !important;
}

.task-today-toggle-top-right .today-toggle:hover {
  background: #6b7280 !important;
  transform: scale(1.1) !important;
}

.task-today-toggle-top-right .today-toggle.active:hover {
  background: #059669 !important;
}

.project-header-buttons-bottom {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 100;
  pointer-events: auto;
}

/* Стили для badges проекта */
.project-badges-bottom-right .task-employee-badge,
.project-badges-bottom-right .task-client-badge,
.project-badges-bottom-right .task-goal-badge,
.project-badges-bottom-right .task-checklist-badge,
.project-badges-bottom-right .task-note-badge,
.project-badges-bottom-right .task-idea-badge,
.project-badges-bottom-right .task-edit-badge {
   font-size: 0.7rem;
   padding: 2px 4px;
   border-radius: 3px;
   cursor: pointer;
   transition: all 0.2s ease;
   flex-shrink: 0;
 }

/* Адаптивность для компактной шапки */
@media (max-width: 768px) {
  .project-header {
    padding: 4px 12px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }

  .project-name {
    font-size: 0.9rem !important;
    margin-right: 0 !important;
  }

  .project-header-buttons-bottom {
    top: 4px !important;
    right: 4px !important;
    gap: 2px !important;
    z-index: 100 !important;
  }

  .add-task-btn,
  .today-toggle-btn {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.9rem !important;
  }

  .today-toggle-btn::before {
    font-size: 12px !important;
  }

  .project-badges-bottom-right {
    bottom: 2px !important;
    right: 2px !important;
    gap: 1px !important;
    max-width: 120px !important;
  }

  .project-badges-bottom-right .task-employee-badge,
  .project-badges-bottom-right .task-client-badge,
  .project-badges-bottom-right .task-goal-badge,
  .project-badges-bottom-right .task-checklist-badge,
  .project-badges-bottom-right .task-note-badge,
  .project-badges-bottom-right .task-idea-badge,
  .project-badges-bottom-right .task-edit-badge {
    font-size: 0.6rem !important;
    padding: 1px 2px !important;
  }
}

/* Описание проекта */
.project-description {
  padding: 12px 20px;
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--border-light);
  min-height: 20px;
  box-sizing: border-box;
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.project-description:empty {
  display: none;
}

/* Список задач */
.tasks-list {
  padding: 16px 20px;
  min-height: 60px;
  transition: all 0.2s;
  box-sizing: border-box;
  width: 100%;
}

.tasks-list.drag-over {
  background: rgba(102, 126, 234, 0.1);
  border-radius: var(--border-radius);
}

/* Стили для перетаскивания проектов */
.project-card.drag-over {
  background: rgba(102, 126, 234, 0.1);
  border: 2px dashed #667eea;
  border-radius: var(--border-radius);
  transform: scale(1.02);
}

.project-card.dragging {
  opacity: 0.7;
  transform: rotate(1deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

/* Стили для перетаскивания проектов за шапку */
.project-header[data-drag-type="project"] {
  cursor: grab;
  user-select: none;
}

.project-header[data-drag-type="project"]:active {
  cursor: grabbing;
}

.project-header[data-drag-type="project"].dragging {
  opacity: 0.7;
  transform: rotate(1deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

/* Карточка задачи */
.task-card {
  border: 2px solid color-mix(in srgb, var(--task-color, #667eea) 50%, transparent) !important;
  border-radius: var(--border-radius);
  padding: 12px 16px;
  margin-bottom: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.task-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 3px color-mix(in srgb, var(--task-color, #667eea) 30%, transparent);
  transform: none;
  border-width: 2px !important;
  border-color: color-mix(in srgb, var(--task-color, #667eea) 70%, transparent) !important;
}

.task-card.dragging {
  opacity: 0.5;
  transform: rotate(2deg);
  border-width: 3px !important;
  border-color: color-mix(in srgb, var(--task-color, #667eea) 50%, transparent) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.task-card:last-child {
  margin-bottom: 0;
}

/* Информация о задаче */
.task-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* УДАЛЕНО: Дублирующиеся стили перенесены ниже */

.task-card .task-info .task-name-row .task-name {
  font-weight: 500 !important;
  color: #1f2937 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  flex: 1 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
}

.task-name:hover {
  color: #2d1b4e;
}

/* Верхняя строка задачи с иконками */
.task-card .task-info .task-name-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 4px !important;
  flex-direction: row !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Нижняя строка задачи */
.task-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
}

.task-bottom-row.no-deadline {
  justify-content: flex-end;
}

/* Стили для today-toggle в нижней строке задачи */
.task-bottom-row .today-toggle {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #9ca3af !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  position: relative !important;
  border: none !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
}

.task-bottom-row .today-toggle::before {
  content: "📅" !important;
  font-size: 10px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none;
}

.task-bottom-row .today-toggle.active {
  background: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3) !important;
}

.task-bottom-row .today-toggle:hover {
  background: #6b7280 !important;
  transform: scale(1.1) !important;
}

.task-bottom-row .today-toggle.active:hover {
  background: #059669 !important;
}

/* Дедлайн задачи */
.task-deadline {
  font-size: 0.8rem;
  color: #6b7280;
  padding: 2px 8px;
  border-radius: 12px;
  background: #f3f4f6;
}

.task-deadline.overdue {
  background: #fee2e2;
  color: #dc2626;
}

.task-deadline.today {
  background: #fef3c7;
  color: #d97706;
}

/* Бейджи задач */
.task-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  box-sizing: border-box;
  max-width: 100%;
}

/* Бейджи в верхней части карточки */
.task-card .task-info .task-name-row .task-badges.task-badges-top {
  flex-shrink: 0 !important;
  margin-left: auto !important;
  display: flex !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Адаптивность для иконок в верхней части */
@media (max-width: 768px) {
  .task-card .task-info .task-name-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  .task-card .task-info .task-name-row .task-badges.task-badges-top {
    margin-left: 0 !important;
    align-self: flex-end !important;
    width: auto !important;
  }
}

.task-card .task-info .task-name-row .task-badges.task-badges-top .task-employee-badge,
.task-card .task-info .task-name-row .task-badges.task-badges-top .task-client-badge,
.task-card .task-info .task-name-row .task-badges.task-badges-top .task-goal-badge,
.task-card .task-info .task-name-row .task-badges.task-badges-top .task-checklist-badge,
.task-card .task-info .task-name-row .task-badges.task-badges-top .task-note-badge,
.task-card .task-info .task-name-row .task-badges.task-badges-top .task-idea-badge,
.task-card .task-info .task-name-row .task-badges.task-badges-top .task-edit-badge {
  padding: 2px 6px !important;
  border-radius: 8px !important;
  font-size: 0.75rem !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 15 !important;
}

.task-employee-badge {
  background: #dbeafe;
  color: #1e40af;
}

.task-client-badge {
  background: #dbeafe;
  color: #1e40af;
  font-weight: 600;
  font-size: 0.7rem;
}

.task-checklist-badge {
  background: #fef3c7;
  color: #d97706;
}

.task-note-badge {
  background: #dcfce7;
  color: #166534;
}

.task-idea-badge {
  background: #fef2f2;
  color: #dc2626;
}

.task-goal-badge {
  background: #e0e7ff;
  color: #3730a3;
}

.task-edit-badge {
  background: #f3f4f6;
  color: #6b7280;
}

.task-employee-badge:hover,
.task-client-badge:hover,
.task-goal-badge:hover,
.task-checklist-badge:hover,
.task-note-badge:hover,
.task-idea-badge:hover,
.task-edit-badge:hover {
  transform: scale(1.1);
}

/* УДАЛЕНО: Конфликтующие стили для .today-toggle */

/* Позиционирование для карточек проектов */
.project-card {
  position: relative;
}

/* УДАЛЕНО: дублирующиеся стили для .project-header */

/* Позиционирование для карточек задач */
.task-card {
  position: relative;
}

/* ===== СТИЛИ ДЛЯ СТРАНИЦЫ "СЕГОДНЯ" ===== */

/* Полноширинные секции */
.today-full-width-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
  padding: 0 20px 48px; /* bottom 48px — отступ до низа страницы */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.today-full-width-section {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.today-full-width-section .section-header {
  font-size: 0.75rem;
  font-weight: 700;
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: none;
  background: none;
  border-bottom: none;
  justify-content: flex-start;
}

/* Шапка контента для полноширинных блоков */
.today-full-width-section .section-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  margin: -24px -24px 20px -24px;
  border-radius: 16px 16px 0 0;
}

.today-full-width-section .section-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
  gap: 20px;
  align-items: start;
}

/* Карточки проектов и задач для страницы "Сегодня" */
.today-project-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  padding: 0;
  transition: all 0.2s ease;
  min-height: 200px;
  width: 100%;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--col, #667eea);
  overflow: hidden;
  box-sizing: border-box;
}

.today-task-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  padding: 16px;
  transition: all 0.2s ease;
  min-height: 120px;
  width: 100%;
  box-shadow: var(--shadow-sm);
}

/* Карточки зависших вопросов в стиле чек-листов */
.pending-question-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  padding: 12px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  padding-right: 35px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
}

.pending-question-card:hover {
  background: #f8fafc;
  border-color: var(--col, #667eea);
}

.pending-question-card.completed {
  background: #f0fdf4;
  border-color: #16a34a;
}

.pending-question-card.completed .pending-question-text {
  text-decoration: line-through;
  color: #059669;
  font-weight: 500;
}

.pending-question-card.important {
  background: linear-gradient(135deg, rgba(255, 99, 99, 0.08) 0%, rgba(255, 99, 99, 0.12) 100%);
  border-left: 3px solid #ff6363;
  padding-right: 60px; /* Увеличиваем отступ для иконки огня и удаления */
}

.pending-question-text {
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  color: #374151;
  line-height: 1.4;
  cursor: pointer;
  word-break: break-word;
  overflow-wrap: break-word;
}

.pending-question-text:hover {
  color: var(--primary);
}

/* Чекбоксы для зависших вопросов - унифицированный стиль (скругленные квадраты) */
.pending-question-card .checklist-item-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  position: relative;
  background: white;
}

.pending-question-card .checklist-item-checkbox:hover {
  border-color: var(--col, #667eea);
}

.pending-question-card .checklist-item-checkbox.completed {
  background: #16a34a;
  border-color: #16a34a;
  color: white;
}

.pending-question-card .checklist-item-checkbox.completed::after {
  content: '✓';
  font-size: 12px;
  font-weight: bold;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

/* Кнопки удаления для зависших вопросов - как в чек-листах */
.pending-question-card .delete-item-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #fef2f2;
  color: #dc2626;
  border: none;
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  transition: all 0.2s ease;
  z-index: 2;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  box-sizing: border-box;
}

.pending-question-card .delete-item-btn i {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pending-question-card .delete-item-btn:hover {
  background: #dc2626;
  color: white;
}

/* Иконка важности для зависших вопросов - унифицированный стиль (скругленные квадраты, как чекбокс) */
.pending-question-card .importance-icon {
  position: absolute;
  top: 8px;
  right: 35px; /* Правее кнопки удаления, если она есть */
  width: 20px;
  height: 20px;
  background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
  border: 2px solid transparent;
  border-radius: 6px;
  opacity: 0;
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
  box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
  pointer-events: auto;
}

/* Показываем иконку при наведении на карточку */
.pending-question-card:hover .importance-icon {
  opacity: 1;
  transform: scale(1.1);
}

/* Иконка всегда видна на важных пунктах */
.pending-question-card.important .importance-icon,
.pending-question-card .importance-icon.active {
  opacity: 1;
  background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.5);
}

/* Эмодзи огня внутри иконки */
.pending-question-card .importance-icon::before {
  content: '🔥';
  font-size: 10px;
  line-height: 1;
}

/* Если есть кнопка удаления, иконка важности правее */
.pending-question-card.completed .importance-icon {
  right: 60px;
}

/* Заголовок зависших вопросов с кнопкой */
.pending-questions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.add-pending-question-btn {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  border: 1px solid #1e3a5f;
  background: #1e3a5f;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 6px rgba(30, 58, 95, 0.35);
}

.add-pending-question-btn:hover {
  background: #2d5491;
  border-color: #2d5491;
  box-shadow: 0 3px 10px rgba(30, 58, 95, 0.45);
  transform: scale(1.06);
}

.add-pending-question-btn:active {
  transform: scale(0.95);
}

/* Кнопка удаления чек-листа */
.delete-checklist-btn {
  background: #fef2f2;
  color: #dc2626;
  border: none;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  padding: 0;
  margin: 0;
  overflow: visible;
  box-sizing: border-box;
}

.delete-checklist-btn i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.delete-checklist-btn:hover {
  background: #dc2626;
  color: white;
  transform: scale(1.05);
}

.today-project-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.today-project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 16px 16px 12px 16px;
  border-bottom: 1px solid var(--border-light);
  background: color-mix(in srgb, var(--col, #667eea) 50%, transparent);
  border-radius: 8px 8px 0 0;
  box-sizing: border-box;
  width: 100%;
}

/* Контент проекта на странице "Сегодня" */
.today-project-card .project-content {
  padding: 16px;
}

.today-project-name {
  font-weight: 600;
  font-size: 1.1rem;
  color: #1f2937;
  margin: 0;
}

.today-project-category {
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
}

.today-project-description {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Карточки задач для страницы "Сегодня" */
.today-task-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--primary);
  border-radius: var(--border-radius);
  padding: 16px;
  transition: all 0.2s ease;
}

.today-task-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.today-task-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.today-task-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.today-task-project {
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
}

.today-task-description {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 12px;
}

.today-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.today-task-deadline,
.today-task-employee,
.today-task-client,
.today-task-status {
  font-size: 0.875rem;
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

/* Стили для дедлайнов */
.today-task-deadline.overdue {
  background: #fee2e2;
  color: #dc2626;
}

.today-task-deadline.today {
  background: #fef3c7;
  color: #d97706;
}

.today-task-deadline.soon {
  background: #fef3c7;
  color: #d97706;
}

/* Стили для статусов задач */
.today-task-status.status-todo {
  background: #f3f4f6;
  color: #6b7280;
}

.today-task-status.status-in_progress {
  background: #dbeafe;
  color: #2563eb;
}

.today-task-status.status-completed {
  background: #d1fae5;
  color: #059669;
}

.today-task-status.status-cancelled {
  background: #fee2e2;
  color: #dc2626;
}

/* Сообщение о пустом блоке */
.empty-message {
  text-align: center;
  color: var(--text-secondary);
  font-style: italic;
  padding: 32px;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  border: 2px dashed var(--border-medium);
}

/* Адаптивность для страницы "Сегодня" */

/* Очень широкие экраны (максимум 4 колонки) */
@media (min-width: 1600px) {
  .today-full-width-section .section-content {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  }
}

/* Широкие экраны (3-4 колонки) */
@media (min-width: 1200px) and (max-width: 1599px) {
  .today-full-width-section .section-content {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  }
}

/* Средние экраны (2-3 колонки) */
@media (min-width: 768px) and (max-width: 1199px) {
  .today-full-width-section .section-content {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

/* Мобильные устройства (1 колонка) */
@media (max-width: 767px) {
  .today-full-width-sections {
    padding: 0 12px;
    gap: 16px;
  }

  .today-full-width-section {
    padding: 16px;
  }

  .today-full-width-section .section-content {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .today-project-header,
  .today-task-header {
    flex-direction: column;
    gap: 8px;
  }

  .today-task-meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Сетка проектов */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
  box-sizing: border-box;
  width: 100%;
}

/* Специальные стили для кнопки "Все" удалены - были специфичны для старой системы категорий */



/* Адаптивность сетки проектов */
@media (max-width: 1200px) {
  .projects-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Адаптивность для проектов - УДАЛЕНО: конфликтующие стили */

  .header-actions {
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
    margin-top: 8px;
    gap: 12px;
  }

  /* .category-tags-menu стили удалены */

  .page-title-section {
    margin-bottom: 8px;
  }
}

@media (max-width: 768px) {
  /* УДАЛЕНО: конфликтующие стили для .project-header-row */

  /* .category-tag стили удалены */

  .header-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* .category-tags-menu стили удалены */

  /* Адаптивность для кнопки "Все" удалена */

  /* Адаптивность для заголовка страницы */
  .page-title-section {
    gap: 8px;
  }

  /* Адаптивность для информации об обновлении в шапке */
  .header-update-info {
    font-size: 0.65rem;
    gap: 2px;
    padding: 4px 6px;
    margin-right: 12px;
    min-width: 100px;
  }

  /* Скрываем блок обновления на планшетах */
  .header-update-info {
    display: none !important;
  }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 480px) {
  .auth-card {
    padding: 20px 16px;
  }

  .system-status {
    font-size: 11px;
  }

  .auth-date {
    font-size: 11px;
  }

  .page-update-info {
    font-size: 10px;
  }

  /* Адаптивность для информации об обновлении в шапке */
  .header-update-info {
    font-size: 0.6rem;
    gap: 1px;
    padding: 3px 4px;
    margin-right: 8px;
    min-width: 80px;
  }

  /* Скрываем информацию об обновлении на очень маленьких экранах */
  .header-update-info .update-date {
    display: none;
  }


  /* Удалено - используем унифицированные стили выше */

  .password-toggle {
    right: 8px !important;
    top: calc(50% + 0px) !important;
    width: 28px !important;
    height: 28px !important;
    padding: 6px !important;
  }

  .password-toggle i {
    font-size: 16px !important;
    transform: translateY(3px) !important;
  }

  .form-group input[type="password"],
  .form-group input[type="text"] {
    padding-right: 14px !important; /* Унифицированный отступ для мобильных */
  }

  .btn {
    padding: 8px 16px;
    font-size: 0.75rem;
  }
}

/* ===== СТИЛИ ДЛЯ СТАТУСОВ СОТРУДНИКОВ ===== */

.employee-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.employee-status.active {
  background: #dcfce7;
  color: #166534;
}

.employee-status.inactive {
  background: #fef2f2;
  color: #dc2626;
}

.employee-status.vacation {
  background: #fef3c7;
  color: #92400e;
}

.employee-status.sick {
  background: #fce7f3;
  color: #be185d;
}

/* Иконки для статусов */
.employee-status.active::before {
  content: "●";
  color: #16a34a;
}

.employee-status.inactive::before {
  content: "●";
  color: #dc2626;
}

.employee-status.vacation::before {
  content: "●";
  color: #f59e0b;
}

.employee-status.sick::before {
  content: "●";
  color: #ec4899;
}

/* ===== 10. КАТЕГОРИИ И ТЕГИ ===== */

/* Секция категорий - УДАЛЕНО: используем универсальные стили */

/* Меню тегов категорий */
.category-tags-menu {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  overflow-x: auto;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

.category-tags-menu::-webkit-scrollbar {
  height: 4px;
}

.category-tags-menu::-webkit-scrollbar-track {
  background: transparent;
}

.category-tags-menu::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 2px;
}

/* Теги категорий */
.category-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 20px;
  color: #374151;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}

.category-tag:hover {
  border-color: #2d1b4e;
  background: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 27, 78, 0.3);
}

.category-tag.active {
  background: var(--header-gradient);
  background-size: 600% 600%;
  animation: headerGradientShift 12s ease-in-out infinite;
  border-color: transparent;
  color: white;
  box-shadow: 0 2px 8px rgba(45, 27, 78, 0.3);
  transform: translateY(-1px);
}

.category-tag i {
  font-size: 0.8rem;
  opacity: 0.8;
}

.category-tag.active i {
  opacity: 1;
}

/* Унифицированные стили для стандартных модальных окон */
.standard-modal {
  max-width: 800px !important;
  width: 90vw !important;
}

/* Ограничиваем максимальную ширину на больших экранах */
@media (min-width: 1200px) {
  .standard-modal {
    max-width: 800px !important;
    width: 800px !important; /* Фиксированная ширина на больших экранах */
  }
}

/* Унифицированное модальное окно категорий */
.category-management {
  max-width: 800px !important;
  width: 90vw !important;
}

/* Ограничиваем максимальную ширину на больших экранах - как у задач */
@media (min-width: 1200px) {
  .category-management {
    max-width: 800px !important;
    width: 800px !important; /* Фиксированная ширина на больших экранах */
  }
}

.category-management .modal-template-header {
  background: var(--header-gradient);
  color: white;
  border-radius: 12px 12px 0 0;
  min-height: 37px;
  padding: 10px 24px;
}

.category-management .modal-template-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.4rem; /* Унифицируем с формой создания */
  font-weight: 600;
}

.category-management .modal-template-title i {
  font-size: 1.1rem;
  opacity: 0.9;
}

/* Стили для модального окна задач - как у категорий */
#addTaskModal .modal-template-content {
  max-width: 800px !important;
  width: 90vw !important;
}

/* Ограничиваем максимальную ширину на больших экранах */
@media (min-width: 1200px) {
  #addTaskModal .modal-template-content {
    max-width: 800px !important;
    width: 800px !important; /* Фиксированная ширина на больших экранах */
  }
}

/* Стили для формы задач - ШАГ 1: Первая строка */
.task-form-row {
  display: grid !important;
  grid-template-columns: 65% 35% !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
  width: 100% !important; /* Занимаем всю ширину модального окна */
}

/* Стили для формы задач - ШАГ 2: Вторая строка (50/50) */
.task-form-row.employee-row {
  grid-template-columns: 50% 50% !important; /* Равные колонки */
}

/* Переопределяем медиа-запросы для формы задач */
#addTaskModal .form-fields {
  display: block !important; /* Отключаем grid для .form-fields */
}

/* УНИФИЦИРОВАННЫЕ ОТСТУПЫ ДЛЯ ВСЕХ ПОЛЕЙ В МОДАЛЬНОМ ОКНЕ ЗАДАЧ */
#addTaskModal .form-group input,
#addTaskModal .form-group textarea,
#addTaskModal .form-group select {
  padding: 12px 16px !important; /* УНИФИЦИРОВАННЫЕ ОТСТУПЫ */
  margin-bottom: 7px !important; /* УНИФИЦИРОВАННЫЙ ОТСТУП 7px */
}

/* Дополнительные отступы для select в задачах */
#addTaskModal .form-group select {
  padding-right: 40px !important; /* Место для стрелки */
}

/* УНИФИЦИРОВАННЫЕ ОТСТУПЫ ДЛЯ ЛЕЙБЛОВ В МОДАЛЬНОМ ОКНЕ ЗАДАЧ */
#addTaskModal .form-group label {
  margin-bottom: 7px !important; /* УНИФИЦИРОВАННЫЙ ОТСТУП 7px */
}

/* Унифицированные отступы для всех полей в модальном окне задач */
#addTaskModal .form-group input,
#addTaskModal .form-group textarea,
#addTaskModal .form-group select {
  padding: 12px 16px; /* Унифицированные отступы - конфликты устранены */
}

/* Адаптивные отступы для модального окна задач */
@media (max-width: 768px) {
  #addTaskModal .form-group input,
  #addTaskModal .form-group select {
    padding: 10px 14px; /* Компактные отступы для мобильных */
  }

  /* Адаптивная сетка для мобильных */
  .task-form-row {
    grid-template-columns: 1fr !important; /* Одна колонка на мобильных */
  }
}

@media (max-width: 480px) {
  #addTaskModal .form-group input,
  #addTaskModal .form-group select {
    padding: 8px 12px; /* Очень компактные отступы */
  }
}

.task-name-field {
  /* Название задачи - 65% ширины */
  width: 100% !important;
  margin-bottom: 0 !important; /* Убираем отступ снизу для grid */
}

.task-name-field input {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 16px !important; /* Унифицированные отступы */
}

.task-deadline-field {
  /* Крайний срок - 35% ширины */
  width: 100% !important;
  margin-bottom: 0 !important; /* Убираем отступ снизу для grid */
}

.task-deadline-field input {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 16px !important; /* Унифицированные отступы */
}

.task-employee-section-field {
  /* Раздел сотрудников - 50% ширины */
  width: 100% !important;
  margin-bottom: 0 !important; /* Убираем отступ снизу для grid */
}

.task-employee-section-field select {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 16px !important; /* Унифицированные отступы */
}

.task-employee-field {
  /* Исполнитель - 50% ширины */
  width: 100% !important;
  margin-bottom: 0 !important; /* Убираем отступ снизу для grid */
}

.task-employee-field select {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 16px !important; /* Унифицированные отступы */
}

.management-content {
  padding: 0;
}

.management-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
  padding: 0 24px;
}

.search-box {
  flex: 1;
  max-width: 300px;
  position: relative;
}

.search-box i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  font-size: 0.9rem;
}

.search-box input {
  width: 100%;
  padding: 12px 16px 12px 40px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  background: white;
}

.search-box input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  padding: 0 24px 24px 24px;
}

/* Кнопка добавления категории внизу списка */
.management-footer {
  padding: 16px 24px 8px;
}
.btn-add-category-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border: 1.5px dashed #d1d5db;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-add-category-bottom:hover {
  border-color: #3b82f6;
  color: #3b82f6;
  background: #eff6ff;
}

/* Модальное окно категорий (устаревшие стили) */
.categories-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
}

.categories-search {
  flex: 1;
  max-width: 300px;
}

.categories-search input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.categories-search input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.categories-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  transition: all 0.2s ease;
  animation: fadeInUp 0.3s ease-out;
}

.category-item:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.category-item.uncategorized-category {
  background: #f9fafb;
  border-color: #d1d5db;
}

.category-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.category-color {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.category-details h4 {
  margin: 0 0 4px 0;
  font-size: 1.1rem; /* Унифицируем с первым набором */
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
}

.category-details p {
  margin: 0;
  font-size: 0.875rem; /* Унифицируем с первым набором */
  color: #6b7280;
  line-height: 1.4;
}

.category-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-stats {
  font-size: 0.8rem;
  color: #6b7280;
  padding: 4px 8px;
  background: #f3f4f6;
  border-radius: 4px;
}

.edit-category-btn,
.delete-category-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.edit-category-btn {
  background: #3b82f6;
  color: white;
}

.edit-category-btn:hover {
  background: #2563eb;
  transform: scale(1.05);
}

.delete-category-btn {
  background: #ef4444;
  color: white;
}

.delete-category-btn:hover {
  background: #dc2626;
  transform: scale(1.05);
}

/* Адаптивность для категорий */
@media (max-width: 768px) {

  .categories-header {
    flex-direction: column;
    align-items: stretch;
  }

  .categories-search {
    max-width: none;
  }

  .category-tags-menu {
    gap: 6px;
  }

  .category-tag {
    padding: 6px 12px;
    font-size: 0.85rem;
  }

  .category-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .category-actions {
    justify-content: flex-end;
  }
}

/* ===== НОВОЕ МОДАЛЬНОЕ ОКНО КАТЕГОРИЙ ===== */

/* ===== УНИФИЦИРОВАННЫЕ СТИЛИ ЗАГОЛОВКОВ КАТЕГОРИЙ ===== */
/* Стили для отображения категорий на страницах (идеи, заметки, проекты и т.д.) */

.category-header {
  margin: 16px 0 8px 0 !important;
  padding: 0 !important;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  display: block !important;
  align-items: unset !important;
  gap: unset !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-left: none !important;
}

.category-header:first-child {
  margin-top: 0;
}

.category-header-content {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 0 !important;
  padding: 4px 10px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  min-height: 24px !important;
  max-height: 32px !important;
}

.category-header-content:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(102, 126, 234, 0.15);
}

.category-header-icon {
  width: 16px !important;
  height: 16px !important;
  border-radius: 3px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: #667eea;
  box-shadow: 0 1px 3px rgba(102, 126, 234, 0.2);
  position: relative;
  z-index: 1;
  transition: all 0.2s ease;
}

.category-header-icon i {
  color: white;
  font-size: 0.6rem;
}

.category-header-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative;
  z-index: 1;
}

.category-header-title {
  margin: 0 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
  letter-spacing: 0.02em;
  line-height: 1.1 !important;
  display: inline !important;
}

.category-header-count {
  font-size: 0.8rem !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
  display: inline !important;
}

.category-header-divider {
  height: 1px !important;
  background: #e5e7eb !important;
  border-radius: 0.5px;
  margin: 0 10px !important;
  opacity: 0.5 !important;
  display: block !important;
}

/* Стили для категории "Без категории" */
.category-header.uncategorized {
  order: -1;
}

.category-header.uncategorized .category-header-icon {
  background: #9ca3af;
  box-shadow: 0 2px 8px rgba(156, 163, 175, 0.2);
}

.category-header.uncategorized .category-header-title {
  color: #374151;
}

.category-header.uncategorized .category-header-count {
  color: #9ca3af;
}


/* Адаптивность для заголовков категорий */
@media (max-width: 768px) {
  .category-header {
    margin: 8px 0 4px 0;
  }

  .category-header-content {
    padding: 3px 8px;
    gap: 6px;
    min-height: 20px;
  }

  .category-header-icon {
    width: 14px;
    height: 14px;
  }

  .category-header-icon i {
    font-size: 0.5rem;
  }

  .category-header-title {
    font-size: 0.7rem;
  }

  .category-header-count {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .category-header-content {
    padding: 2px 6px;
    gap: 4px;
    min-height: 18px;
  }

  .category-header-icon {
    width: 12px;
    height: 12px;
  }

  .category-header-icon i {
    font-size: 0.4rem;
  }

  .category-header-title {
    font-size: 0.65rem;
  }

  .category-header-count {
    font-size: 0.65rem;
  }
}

/* ===== СТИЛИ СТРАНИЦЫ ВАКАНСИЙ ===== */
/* Стили для управления вакансиями */

/* Page Header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--bg-primary);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

.page-header h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.8rem;
  font-weight: 600;
}

.page-actions {
  display: flex;
  gap: 1rem;
}

/* Filters Section */
.filters-section {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--bg-primary);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 200px;
}

.filter-group label {
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.filter-select,
.filter-input {
  padding: 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
}

.filter-select:focus,
.filter-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* Дополнительные стили для select в фильтрах */
.filter-select {
  padding-right: 40px; /* Место для стрелки */
}

/* Vacancies Container */
.vacancies-container {
  margin-bottom: 2rem;
}

.vacancies-list {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

/* Vacancy Card */
.vacancy-card {
  background: var(--bg-primary);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid var(--border-light);
}

.vacancy-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.vacancy-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.vacancy-title {
  flex: 1;
}

.vacancy-title h3 {
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
}

.vacancy-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-active {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.status-closed {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.status-draft {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.vacancy-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-icon {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--border-radius);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-icon:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn-icon .icon-edit:hover {
  color: var(--primary);
}

.btn-icon .icon-delete:hover {
  color: var(--danger);
}

/* Vacancy Info */
.vacancy-info {
  margin-bottom: 1rem;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-light);
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.info-value {
  color: var(--text-primary);
  font-size: 0.9rem;
}

/* Vacancy Description */
.vacancy-description {
  margin-bottom: 1rem;
}

.vacancy-description p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
  font-size: 0.9rem;
}

/* Vacancy Requirements */
.vacancy-requirements {
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}

.vacancy-requirements h4 {
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
}

.vacancy-requirements p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
  font-size: 0.9rem;
}

/* Empty State */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 2rem;
  background: var(--bg-primary);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state h3 {
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 600;
}

.empty-state p {
  margin: 0 0 1.5rem 0;
  color: var(--text-secondary);
  font-size: 1rem;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pagination-btn {
  min-width: 40px;
  height: 40px;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.pagination-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.pagination-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.pagination-dots {
  color: var(--text-secondary);
  font-weight: 500;
}

/* Modal Styles for Vacancies */
.modal .form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Удалено - используем унифицированные стили выше */

.form-group label {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.form-group label::after {
  content: ' *';
  color: var(--danger);
  display: none;
}

.form-group label[for*="title"]::after,
.form-group label[for*="department"]::after,
.form-group label[for*="description"]::after {
  display: inline;
}

.form-input,
.form-select,
.form-textarea {
  padding: 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* Дополнительные стили для form-select */
.form-select {
  padding-right: 40px; /* Место для стрелки */
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Responsive Design for Vacancies */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .page-actions {
    justify-content: center;
  }

  .filters-section {
    flex-direction: column;
  }

  .filter-group {
    min-width: auto;
  }

  .vacancies-list {
    grid-template-columns: 1fr;
  }

  .vacancy-header {
    flex-direction: column;
    gap: 1rem;
  }

  .vacancy-actions {
    align-self: flex-end;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .pagination-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 1rem;
  }

  .page-header h1 {
    font-size: 1.5rem;
  }

  .filters-section {
    padding: 1rem;
  }

  .vacancy-card {
    padding: 1rem;
  }

  .vacancy-title h3 {
    font-size: 1.1rem;
  }

  .empty-state {
    padding: 2rem 1rem;
  }

  .empty-icon {
    font-size: 2.5rem;
  }

  .empty-state h3 {
    font-size: 1.3rem;
  }
}

/* ===== СТИЛИ ДЛЯ РОЛЕЙ ПОЛЬЗОВАТЕЛЕЙ ===== */
.role-user {
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
}

.role-employee {
  color: #059669;
  background: #d1fae5;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
}

.role-supervisor {
  color: #7c3aed;
  background: #e9d5ff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
}

.role-manager {
  color: #dc2626;
  background: #fee2e2;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
}

.role-admin {
  color: #ffffff;
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Адаптивность для ролей */
@media (max-width: 768px) {
  .role-user,
  .role-employee,
  .role-supervisor,
  .role-manager,
  .role-admin {
    font-size: 0.75rem;
    padding: 1px 6px;
  }
}

/* ===== СТИЛИ ДЛЯ КАРТОЧЕК НАПРАВЛЕНИЙ ===== */
.direction-card {
  background: white;
  border-radius: 12px;
  padding: 0 0 24px 0; /* Убраны отступы сверху и по бокам, как в проектах */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid #e5e7eb;
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}

.direction-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.direction-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.direction-card-title {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.direction-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  flex-shrink: 0;
}

.direction-card-info h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.direction-description {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

/* ===== СТИЛИ ДЛЯ ШАПКИ НАПРАВЛЕНИЙ (как в проектах) ===== */
.direction-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, rgba(var(--col-rgb, 102, 126, 234), 0.1), rgba(var(--col-rgb, 102, 126, 234), 0.05));
  border-radius: 8px 8px 0 0;
  min-height: 48px;
  position: relative;
  overflow: hidden;
}

.direction-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(135deg, rgba(var(--col-rgb, 102, 126, 234), 0.6), rgba(var(--col-rgb, 102, 126, 234), 0.8));
}

.direction-name {
  flex: 1;
  font-weight: 600;
  font-size: 1.1rem;
  color: #1f2937;
  cursor: pointer;
  padding: 12px 16px;
  margin: 0;
  transition: color 0.2s ease;
  user-select: none;
}

.direction-name:hover {
  color: rgba(var(--col-rgb, 102, 126, 234), 1);
}

.add-client-btn {
  background: rgba(var(--col-rgb, 102, 126, 234), 0.1);
  border: 1px solid rgba(var(--col-rgb, 102, 126, 234), 0.2);
  border-radius: 6px;
  color: rgba(var(--col-rgb, 102, 126, 234), 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 6px 12px 6px 0;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.add-client-btn:hover {
  background: rgba(var(--col-rgb, 102, 126, 234), 0.15);
  border-color: rgba(var(--col-rgb, 102, 126, 234), 0.3);
  color: rgba(var(--col-rgb, 102, 126, 234), 1);
  transform: translateY(-1px);
}

/* Отступы для контента направления */
.clients-list {
  padding: 16px 24px 0 24px;
}

.direction-description {
  padding: 12px 24px 0 24px;
}

.direction-card-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.direction-card-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #1f2937;
  display: block;
  line-height: 1;
}

.stat-label {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 4px;
  display: block;
}

.direction-card-content {
  margin-top: 16px;
}

.employees-list {
  max-height: 300px;
  overflow-y: auto;
}

.employee-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: #f9fafb;
  border-radius: 8px;
  border-left: 4px solid #e5e7eb;
  transition: all 0.2s ease;
}

.employee-item:hover {
  background: #f3f4f6;
  border-left-color: #667eea;
}

/* ===== DnD сотрудников ===== */
.employee-drag-handle {
  cursor: grab;
  color: #c0c4cc;
  padding: 0 8px 0 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  font-size: 13px;
  transition: color 0.15s;
}

.employee-item:hover .employee-drag-handle {
  color: #9ca3af;
}

.employee-drag-handle:active {
  cursor: grabbing;
}

.employee-item--dragging {
  opacity: 0.4;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  cursor: grabbing !important;
}

.direction-card--drop-target {
  outline: 2px dashed var(--col, #667eea);
  outline-offset: 3px;
  background: color-mix(in srgb, var(--col, #667eea) 6%, transparent) !important;
  transition: background 0.1s, outline 0.1s;
}

.employee-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.employee-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #667eea;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.employee-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.employee-name {
  font-weight: 600;
  color: #1f2937;
  font-size: 0.875rem;
}

.employee-position {
  font-size: 0.75rem;
  color: #6b7280;
}

.employee-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.employee-status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.employee-status.active {
  background: #dcfce7;
  color: #166534;
}

.employee-status.inactive {
  background: #fef2f2;
  color: #dc2626;
}

.employee-status.vacation {
  background: #fef3c7;
  color: #92400e;
}

.employee-status.sick {
  background: #fce7f3;
  color: #be185d;
}

.empty-employees {
  text-align: center;
  padding: 24px;
  color: #9ca3af;
  font-style: italic;
  background: #f9fafb;
  border-radius: 8px;
  border: 2px dashed #e5e7eb;
}

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: #6b7280;
}

.empty-state-icon {
  font-size: 4rem;
  color: #d1d5db;
  margin-bottom: 16px;
}

.empty-state h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.empty-state p {
  font-size: 1rem;
  color: #6b7280;
  margin-bottom: 24px;
}

/* Адаптивность для шапки направлений */
@media (max-width: 768px) {
  .direction-header {
    min-height: 44px;
  }

  .direction-name {
    font-size: 1rem;
    padding: 10px 12px;
  }

  .add-client-btn {
    width: 32px;
    height: 32px;
    margin: 6px 10px 6px 0;
  }
}

@media (max-width: 480px) {
  .direction-header {
    min-height: 40px;
  }

  .direction-name {
    font-size: 0.95rem;
    padding: 8px 10px;
  }

  .add-client-btn {
    width: 28px;
    height: 28px;
    margin: 6px 8px 6px 0;
  }

  .add-client-btn i {
    font-size: 0.9rem;
  }

  .clients-list {
    padding: 8px 12px 0 12px;
  }

  .direction-description {
    padding: 6px 12px 0 12px;
  }
}

/* Адаптивность для карточек направлений */
@media (max-width: 768px) {
  .direction-card {
    padding: 0 0 16px 0; /* Убираем отступы сверху и по бокам */
    margin-bottom: 16px;
  }

  .clients-list {
    padding: 12px 16px 0 16px;
  }

  .direction-description {
    padding: 8px 16px 0 16px;
  }

  .direction-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .direction-card-title {
    width: 100%;
  }

  .direction-card-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .direction-card-info h3 {
    font-size: 1.25rem;
  }

  .direction-card-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .direction-card-stats {
    padding: 12px;
  }

  .stat-number {
    font-size: 1.5rem;
  }

  .employee-item {
    padding: 8px 12px;
  }

  .employee-avatar {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }

  .employee-actions {
    flex-direction: column;
    gap: 4px;
  }
}

/* ===== ОПТИМИЗИРОВАННАЯ СЕТКА COLORPICKER 3×17 ===== */

/* Основная сетка для модальных окон */
.color-options-modal {
  display: grid;
  grid-template-columns: repeat(17, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  max-height: none;
  overflow-y: visible;
  padding: 16px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  border-radius: 12px;
  border: 2px solid #e5e7eb;
  margin-top: 12px;
  width: 100%;
  max-width: 100%;
}

.color-option-modal {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.color-option-modal:hover {
  transform: scale(1.15);
  border-color: #374151;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.color-option-modal.selected {
  border-color: #374151;
  transform: scale(1.2);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  z-index: 20;
}

.color-option-modal.selected::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8));
}

/* Белый цвет требует особого обращения */
.color-option-modal[data-color="#ffffff"],
.color-option-modal[data-color="#fff"] {
  border: 1px solid #e5e7eb;
}

.color-option-modal[data-color="#ffffff"]:hover,
.color-option-modal[data-color="#fff"]:hover {
  border-color: #374151;
}

.color-option-modal[data-color="#ffffff"].selected,
.color-option-modal[data-color="#fff"].selected {
  border-color: #374151;
}

/* Адаптивность для модальных окон */
@media (max-width: 768px) {
  .color-options-modal {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 4px;
    padding: 12px;
  }

  .color-option-modal {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 480px) {
  .color-options-modal {
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 3px;
    padding: 8px;
  }

  .color-option-modal {
    width: 20px;
    height: 20px;
  }
}

/* Адаптивность для страницы авторизации */
@media (max-width: 768px) {
  .auth-container {
    max-width: 85%; /* Уменьшено с 90% до 85% для более компактного вида */
    padding: 15px;
  }

  .auth-card {
    padding: 24px 20px;
    border-radius: 20px;
  }

  /* Адаптивные отступы для формы на планшетах */
  .auth-form {
    padding: 0 14px; /* Средние отступы на планшетах */
  }

  .auth-form .form-actions {
    padding: 0 14px; /* Средние отступы для кнопок */
  }

  .login-links {
    padding: 0 14px; /* Средние отступы для ссылок */
    gap: 7px; /* Средний отступ между кнопками на планшетах */
  }

  .login-links a {
    padding: 9px 14px; /* Средние отступы для кнопок на планшетах */
    font-size: 12.5px; /* Средний размер шрифта */
  }

  .auth-logo {
    min-height: 100px;
    margin-left: 15px;
    margin-right: 15px;
  }

  .logo-img {
    max-width: 80px;
    max-height: 80px;
  }

  .auth-subtitle {
    font-size: 14px;
  }

  .auth-date {
    font-size: 12px;
  }

  .form-group input {
    height: 44px;
    font-size: 16px; /* Предотвращает зум на iOS */
    padding: 10px 14px; /* Адаптивные отступы для мобильных */
  }

  .auth-btn {
    padding: 14px 20px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .auth-container {
    max-width: 90%; /* Уменьшено с 95% до 90% для более компактного вида */
    padding: 10px;
  }

  .auth-card {
    padding: 20px 16px;
    border-radius: 16px;
  }

  .auth-logo {
    min-height: 80px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .logo-img {
    max-width: 60px;
    max-height: 60px;
  }

  .auth-subtitle {
    font-size: 13px;
  }

  .auth-date {
    font-size: 11px;
  }

  .form-group input {
    height: 42px;
    font-size: 16px;
    padding: 8px 12px; /* Еще более компактные отступы */
  }

  .auth-btn {
    padding: 12px 18px;
    font-size: 14px;
  }

  .login-links {
    flex-direction: row; /* КНОПКИ В ОДНУ СТРОКУ НА МОБИЛЬНЫХ */
    gap: 8px; /* Уменьшенный отступ между кнопками */
    text-align: center;
  }
}

/* Компактный режим для модальных окон */
.color-picker-group.modal-optimized {
  margin-bottom: 16px;
}

.color-picker-group.modal-optimized label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #374151;
}

.color-picker-component.modal-optimized {
  margin: 0;
}

/* ===== УПРОЩЕННЫЕ КАРТОЧКИ КЛИЕНТОВ ===== */
.client-card-simple {
    background: white !important;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    min-height: 44px;
}

.client-card-simple:hover {
    border-color: #667eea;
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.15);
    transform: translateY(-1px);
}

.client-card-simple .client-name {
    font-weight: 500 !important;
    color: #2d3748 !important;
    font-size: 14px !important;
    flex: 1;
    padding-right: 8px;
    line-height: 1.4;
}

.client-card-simple .client-id {
    font-size: 11px !important;
    color: #718096 !important;
    font-weight: 400 !important;
    background: #f7fafc;
    padding: 2px 6px;
    border-radius: 4px;
    min-width: fit-content;
    white-space: nowrap;
}

/* Убираем старые стили для упрощенных карточек */
.client-card-simple .client-header {
    display: none !important;
}

.client-card-simple .client-description {
    display: none !important;
}

/* ===== МОДАЛЬНОЕ ОКНО ДУБЛИРОВАНИЯ КЛИЕНТОВ ===== */
.duplicate-modal {
    max-width: 600px !important;
    min-height: 400px;
}

.duplicate-client-info {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    margin-bottom: 24px;
}

.client-avatar {
    font-size: 48px;
    opacity: 0.9;
}

.client-details h4 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 600;
}

.client-details p {
    margin: 0;
    opacity: 0.9;
    font-size: 16px;
}

.directions-selection {
    margin-bottom: 20px;
}

.directions-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px;
}

.direction-item {
    margin-bottom: 8px;
}

.direction-item:last-child {
    margin-bottom: 0;
}

.direction-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    position: relative;
}

.direction-checkbox:hover {
    border-color: #667eea;
    background: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.1);
}

.direction-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e0;
    border-radius: 4px;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.direction-checkbox input[type="checkbox"]:checked + .checkmark {
    background: #667eea;
    border-color: #667eea;
}

.direction-checkbox input[type="checkbox"]:checked + .checkmark::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.direction-info {
    flex: 1;
}

.direction-name {
    font-weight: 600;
    color: #2d3748;
    font-size: 16px;
    margin-bottom: 4px;
}

.direction-description {
    color: #718096;
    font-size: 14px;
    line-height: 1.4;
}

.selection-summary {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.selected-count {
    font-weight: 600;
    color: #4a5568;
    font-size: 16px;
}

.selected-count span {
    color: #667eea;
    font-size: 18px;
}

#confirmDuplicateBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#confirmDuplicateBtn:not(:disabled) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    font-weight: 600;
}

#confirmDuplicateBtn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* ===== ПОИСК КЛИЕНТОВ В HEADER ===== */
.search-button-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 0;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 0;
    transition: all 0.2s ease;
    height: 40px;
    min-width: 250px;
}

.search-button-wrapper:hover {
    border-color: #667eea;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.1);
}

.search-button-wrapper:focus-within {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-button-input {
    flex: 1;
    padding: 8px 35px 8px 35px;
    border: none;
    background: transparent;
    font-size: 14px;
    outline: none;
    color: #2d3748;
    height: 100%;
}

.search-button-input::placeholder {
    color: #a0aec0;
    font-style: normal;
}

.search-button-icon {
    position: absolute;
    left: 12px;
    color: #a0aec0;
    font-size: 14px;
    pointer-events: none;
}

.search-button-clear {
    position: absolute;
    right: 6px;
    background: #f7fafc;
    border: none;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #718096;
    transition: all 0.2s ease;
    font-size: 11px;
}

.search-button-clear:hover {
    background: #e2e8f0;
    color: #4a5568;
}

/* Адаптивность поиска в header */
@media (max-width: 1024px) {
    .search-button-wrapper {
        min-width: 200px;
    }
}

@media (max-width: 768px) {
    .search-button-wrapper {
        min-width: 160px;
    }

    .search-button-input {
        font-size: 14px;
        padding: 8px 30px 8px 30px;
    }

    .search-button-input::placeholder {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .search-button-wrapper {
        min-width: 120px;
    }

    .search-button-input::placeholder {
        content: "Поиск...";
    }
}

/* ===== ПОЗИЦИОНИРОВАНИЕ В ACTIONS-SECTION ===== */
.actions-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.actions-section .search-button-wrapper {
    margin-right: 0; /* Убираем дополнительный margin, так как gap уже задан */
}

/* Адаптивность для actions-section */
@media (max-width: 768px) {
    .actions-section {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .actions-section {
        flex-wrap: wrap;
        gap: 6px;
    }

    .search-button-wrapper {
        order: 1;
        flex: 1;
        min-width: 100px;
    }

    .action-btn-unified {
        order: 2;
        flex-shrink: 0;
    }
}

/* ===== АНИМАЦИИ ДЛЯ ПОИСКА ===== */
.direction-card, .category-tag, .category-header {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.direction-card[style*="display: none"] {
    opacity: 0;
    transform: scale(0.95);
}

.category-tag[style*="display: none"] {
    opacity: 0;
    transform: scale(0.9);
}

.category-header[style*="display: none"] {
    opacity: 0;
    transform: scale(0.98);
}

/* Адаптивность для модального окна дублирования */
@media (max-width: 768px) {
    .duplicate-modal {
        max-width: 95% !important;
        margin: 20px auto;
    }

    .duplicate-client-info {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }

    .client-avatar {
        font-size: 36px;
    }

    .client-details h4 {
        font-size: 20px;
    }

    .directions-list {
        max-height: 250px;
    }

    .direction-checkbox {
        padding: 10px 12px;
    }

    .direction-name {
        font-size: 15px;
    }

    .direction-description {
        font-size: 13px;
    }
}

/* ===== СТРАНИЦА "СЕГОДНЯ" - НОВЫЙ ДИЗАЙН ЧЕК-ЛИСТОВ ===== */

/* Карточки чек-листов на странице "сегодня" */
.today-checklist-card,
.today-tasks-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
  transition: all 0.2s ease;
}

.today-checklist-card:hover,
.today-tasks-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Заголовки карточек */
.today-checklist-card .section-header,
.today-tasks-card .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 12px 12px; /* ВЫРАВНИВАНИЕ: верхний padding уменьшен до 6px для единообразия */
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  min-height: 48px; /* ВЫРАВНИВАНИЕ: минимальная высота как у календаря для единообразия */
  height: 48px; /* Фиксированная высота для единообразия с календарем */
  box-sizing: border-box;
}

.today-checklist-card .section-name,
.today-tasks-card .section-name {
  font-weight: 600;
  font-size: 1.1rem;
  color: #1f2937;
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  line-height: 1;
}

.today-checklist-card .section-name i,
.today-tasks-card .section-name i {
  font-size: 1.2rem;
  background: var(--header-gradient);
  background-size: 600% 600%;
  animation: headerGradientShift 12s ease-in-out infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

.today-checklist-card .checklist-id-badge,
.today-tasks-card .checklist-id-badge {
  background: var(--col, #667eea);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Описания карточек */
.today-checklist-card .section-description,
.today-tasks-card .section-description {
  padding: 12px 20px;
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--border-light);
}

/* Списки пунктов */
.today-checklist-card .checklist-items-list,
.today-tasks-card .checklist-items-list {
  padding: 16px 10px; /* СРЕДНЕЕ ЗНАЧЕНИЕ: горизонтальный padding установлен на среднее значение (было 16px, стало 10px - уменьшение на ~37%) */
  min-height: 60px;
}

/* ── Бейджи возраста задачи ──────────────────────────────────────────────── */
.item-age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  line-height: 1.5;
  letter-spacing: 0.4px;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}
.item-age-new {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.25);
}
.item-age-forgotten {
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
  border: 1px solid rgba(124, 58, 237, 0.25);
  font-size: 14px;
  padding: 0 5px;
}
/* В карточках employee-tasks.html — рядом с текстом задачи */
.cl-item .item-age-badge {
  margin-left: 4px;
  vertical-align: middle;
}

/* Карточки пунктов */
.today-checklist-card .checklist-item-card,
.today-tasks-card .checklist-item-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  padding: 12px 16px !important;
  padding-right: 62px !important; /* Зона справа: огонёк (36-56px) + крестик (8-28px) */
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}

.today-checklist-card .checklist-item-card:hover,
.today-tasks-card .checklist-item-card:hover {
  background: #f8fafc;
  border-color: var(--col, #667eea);
}

.today-checklist-card .checklist-item-card.completed,
.today-tasks-card .checklist-item-card.completed {
  background: #f0fdf4;
  border-color: #16a34a;
}

.today-checklist-card .checklist-item-card.completed .checklist-item-content,
.today-tasks-card .checklist-item-card.completed .checklist-item-content {
  text-decoration: line-through;
  color: #059669; /* Более яркий зеленый вместо серого */
  font-weight: 500; /* Делаем текст более заметным */
}

/* Чекбоксы пунктов - унифицированный стиль (скругленные квадраты) */
.today-checklist-card .checklist-item-checkbox,
.today-tasks-card .checklist-item-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  position: relative;
  background: white;
  overflow: visible !important; /* Не клипать ::after галочку */
}

.today-checklist-card .checklist-item-checkbox:hover,
.today-tasks-card .checklist-item-checkbox:hover {
  border-color: var(--col, #667eea);
}

.today-checklist-card .checklist-item-checkbox.completed,
.today-tasks-card .checklist-item-checkbox.completed {
  background: #16a34a;
  border-color: #16a34a;
  color: white;
  position: relative;
}

.today-checklist-card .checklist-item-checkbox.completed::after,
.today-tasks-card .checklist-item-checkbox.completed::after {
  content: '✓';
  font-size: 12px;
  font-weight: bold;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Содержимое пунктов */
.today-checklist-card .checklist-item-content,
.today-tasks-card .checklist-item-content {
  flex: 1;
  font-size: 0.95rem;
  color: #374151;
  line-height: 1.4;
  cursor: pointer;
}

.today-checklist-card .checklist-item-content:hover,
.today-tasks-card .checklist-item-content:hover {
  color: var(--primary);
}

/* Кнопки удаления */
.today-checklist-card .delete-item-btn,
.today-tasks-card .delete-item-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #fef2f2;
  color: #dc2626;
  border: none;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: all 0.2s ease;
  z-index: 4;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  box-sizing: border-box;
}
/* Перекрываем более специфичное section-card-правило, которое сбрасывает position */
.section-card .checklist-item-card .delete-item-btn {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  overflow: visible !important;
}

/* Огонёк в today-карточках — всегда левее крестика, перекрываем position:static из section-card */
.today-checklist-card .checklist-item-card .importance-icon,
.today-tasks-card .checklist-item-card .importance-icon {
  position: absolute !important;
  top: 8px !important;
  right: 34px !important;
  opacity: 0;
}

.today-checklist-card .delete-item-btn i,
.today-tasks-card .delete-item-btn i {
  display: flex;
  align-items: center;
  justify-content: center;
}

.today-checklist-card .delete-item-btn:hover,
.today-tasks-card .delete-item-btn:hover {
  background: #dc2626;
  color: white;
}

/* Ссылки добавления пунктов */
.today-checklist-card .add-item-link,
.today-tasks-card .add-item-link {
  padding: 12px 10px; /* СРЕДНЕЕ ЗНАЧЕНИЕ: горизонтальный padding установлен на среднее значение (было 16px, стало 10px - уменьшение на ~37%) */
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  border-top: 1px solid var(--border-light);
  transition: all 0.2s ease;
}

.today-checklist-card .add-item-link:hover,
.today-tasks-card .add-item-link:hover {
  background: #f8fafc;
  color: var(--primary-hover);
}

/* Сообщение о пустом чек-листе */
.empty-checklist-message {
  text-align: center;
  color: #6b7280;
  padding: 40px 20px;
  font-size: 0.9rem;
}

.empty-checklist-message i {
  font-size: 2rem;
  margin-bottom: 8px;
  opacity: 0.5;
}

/* Поле редактирования */
.checklist-item-edit-input {
  flex: 1;
  border: 2px solid var(--primary);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 0.95rem;
  background: white;
  outline: none;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .today-checklist-card .section-header,
  .today-tasks-card .section-header {
    padding: 12px 16px 8px 16px;
  }

  .today-checklist-card .section-name,
  .today-tasks-card .section-name {
    font-size: 1rem;
  }

  .today-checklist-card .checklist-id-badge,
  .today-tasks-card .checklist-id-badge {
    font-size: 0.7rem;
    padding: 3px 6px;
  }

  .today-checklist-card .section-description,
  .today-tasks-card .section-description {
    padding: 8px 16px;
    font-size: 0.85rem;
  }

  .today-checklist-card .checklist-items-list,
  .today-tasks-card .checklist-items-list {
    padding: 12px 16px;
  }

  .today-checklist-card .checklist-item-card,
  .today-tasks-card .checklist-item-card {
    padding: 10px 12px;
    gap: 8px;
  }

  .today-checklist-card .checklist-item-content,
  .today-tasks-card .checklist-item-content {
    font-size: 0.9rem;
  }

  .today-checklist-card .add-item-link,
  .today-tasks-card .add-item-link {
    padding: 10px 16px;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .today-checklist-card .section-header,
  .today-tasks-card .section-header {
    padding: 10px 12px 6px 12px;
  }

  .today-checklist-card .section-name,
  .today-tasks-card .section-name {
    font-size: 0.95rem;
  }

  .today-checklist-card .checklist-id-badge,
  .today-tasks-card .checklist-id-badge {
    font-size: 0.65rem;
    padding: 2px 5px;
  }

  .today-checklist-card .section-description,
  .today-tasks-card .section-description {
    padding: 6px 12px;
    font-size: 0.8rem;
  }

  .today-checklist-card .checklist-items-list,
  .today-tasks-card .checklist-items-list {
    padding: 8px 12px;
  }

  .today-checklist-card .checklist-item-card,
  .today-tasks-card .checklist-item-card {
    padding: 8px 10px;
    gap: 6px;
  }

  .today-checklist-card .checklist-item-content,
  .today-tasks-card .checklist-item-content {
    font-size: 0.85rem;
  }

  .today-checklist-card .add-item-link,
  .today-tasks-card .add-item-link {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
}

/* ===== СТРАНИЦА "СЕГОДНЯ" ===== */

/* Основной контейнер страницы - ПРИМЕНЯЕМ ТАКОЙ ЖЕ ПОДХОД КАК У .today-full-width-sections */
.today-main {
  display: grid;
  grid-template-columns: 30fr 30fr 40fr;
  grid-template-rows: 1fr auto;
  gap: 20px;
  padding: 20px;
  min-height: calc(100vh - 72px);
  height: calc(100vh - 72px);
  background: transparent;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  position: relative;
}

/* УДАЛЕНА ДИАГНОСТИКА: Визуальный индикатор больше не нужен */

/* Колонки */
.today-column {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(15px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 12px 20px 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* Grid placement */
.today-column.checklist-column {
  grid-column: 1;
  grid-row: 1;
}

.today-column.notes-tasks-column {
  grid-column: 2;
  grid-row: 1;
}

.today-column.calendar-column {
  grid-column: 3;
  grid-row: 1 / 3; /* Календарь на обе строки */
  overflow-x: hidden;
  overflow-y: hidden;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  contain: layout style;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Заголовки колонок */
.column-header {
  font-size: 0.75rem;
  font-weight: 700;
  margin: 0;
  color: #0d2137;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  background: none;
  -webkit-text-fill-color: unset;
  opacity: 1;
}

/* Контейнер заголовка с переключателями */
.column-header-with-switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
  min-height: 36px;
}

.column-header-with-switcher.calendar-header-with-date {
  flex-wrap: nowrap;
}

.calendar-header-main {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
}

.calendar-header-main .column-header {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}

.today-calendar-date-control {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0;
  position: static;
  left: auto;
  transform: none;
  min-width: 0;
}

.today-calendar-date-control .calendar-header-date {
  font-size: 0.8rem;
  font-weight: 600;
  color: #1e3a5f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.today-calendar-date-control .calendar-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  border: 1.5px solid rgba(30, 58, 95, 0.2);
  background: rgba(30, 58, 95, 0.06);
  color: #1e3a5f;
  font-size: 1rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.today-calendar-date-control .calendar-nav-btn:hover {
  background: rgba(30, 58, 95, 0.12);
  border-color: rgba(30, 58, 95, 0.4);
}

.calendar-header-date {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.01em;
}

.calendar-nav-switcher {
  gap: 8px;
}

.calendar-nav-btn {
  width: 34px;
  height: 34px;
  font-size: 1.2rem;
  font-weight: 600;
  color: #374151;
}

.calendar-nav-btn:hover {
  color: #1f2937;
  background: rgba(156, 163, 175, 0.35);
  border-color: rgba(156, 163, 175, 0.75);
}

/* Переключатели чек-листов */
.checklist-switcher {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Кнопки-кружочки переключателей */
.switcher-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(156, 163, 175, 0.5);
  background: rgba(156, 163, 175, 0.2);
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  transform: none;
}

.switcher-btn:hover {
  background: rgba(156, 163, 175, 0.3);
  border-color: rgba(156, 163, 175, 0.7);
  transform: none;
}

.switcher-btn.active {
  background: #1e3a5f;
  border-color: #1e3a5f;
  color: white;
  box-shadow: 0 2px 8px rgba(30, 58, 95, 0.4);
}

.switcher-btn:active {
  transform: none;
}

/* Переключатели чек-листов с текстом — pill-форма вместо круга */
.checklist-switcher .switcher-btn {
  width: auto;
  height: 26px;
  border-radius: 13px;
  padding: 0 10px;
  font-size: 0.72rem;
}

/* Кнопка + добавления во всех колонках — единый стиль */
.add-item-header-btn {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  border: 1px solid #1e3a5f;
  background: #1e3a5f;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(30, 58, 95, 0.35);
}

.add-item-header-btn:hover {
  background: #2d5491;
  border-color: #2d5491;
  box-shadow: 0 3px 10px rgba(30, 58, 95, 0.45);
  transform: scale(1.06);
}

.add-item-header-btn:active {
  transform: scale(0.95);
}

.add-item-header-btn i {
  font-size: 0.875rem;
  line-height: 1;
}

/* Шапка контента для календаря */
.today-column.calendar-column .calendar-container .calendar-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 12px 12px; /* ВЫРАВНИВАНИЕ: верхний padding уменьшен до 6px для единообразия */
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  margin: 0; /* ВЫРАВНИВАНИЕ: нет отрицательных margin, так как у контейнера нет padding */
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  min-height: 48px; /* ВЫРАВНИВАНИЕ: минимальная высота как у чек-листов для единообразия */
  height: 48px; /* Фиксированная высота для единообразия с чек-листами */
  box-sizing: border-box;
}

/* Контент календаря - добавляем padding для выравнивания с чек-листами */
.today-column.calendar-column .calendar-container .calendar-wrapper {
  padding: 0 12px; /* УМЕНЬШЕНИЕ: горизонтальный padding уменьшен на 40% (было 20px, стало 12px) */
}

/* Навигация календаря в заголовке - кнопки справа от даты */
.today-column.calendar-column .calendar-container .calendar-content-header .calendar-header-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

.today-column.calendar-column .calendar-container .calendar-wrapper {
  padding-bottom: 16px; /* Отступ снизу */
}

/* Стили для названий в шапках всех блоков */
.calendar-container .calendar-content-header .section-name,
.today-full-width-section .section-content-header .section-name {
  font-weight: 600;
  font-size: 1.1rem;
  color: #1f2937;
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-container .calendar-content-header .section-name i,
.today-full-width-section .section-content-header .section-name i {
  font-size: 1.2rem;
  background: var(--header-gradient);
  background-size: 600% 600%;
  animation: headerGradientShift 12s ease-in-out infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

/* ===== DRAG AND DROP СТИЛИ ДЛЯ ЧЕК-ЛИСТОВ ===== */
.checklist-item-card {
  cursor: grab;
  transition: all 0.3s ease;
  position: relative;
}

.checklist-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.checklist-item-card.dragging {
  cursor: grabbing;
  opacity: 0.5;
  transform: rotate(5deg) scale(1.05);
  z-index: 1000;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.checklist-item-card.drag-over {
  /* Убраны индикаторы направления - только легкое выделение */
  background: rgba(102, 126, 234, 0.05);
  border-radius: 8px;
}

/* Drag handle убран - весь элемент перетаскиваемый */

/* Анимация для плавного перемещения */
.checklist-item-card.drag-animate {
  transition: transform 0.3s ease;
}

/* ===== СТИЛИ ДЛЯ ВАЖНЫХ ПУНКТОВ ЧЕК-ЛИСТОВ ===== */
.checklist-item-card.important {
  background: linear-gradient(135deg, rgba(255, 99, 99, 0.08) 0%, rgba(255, 99, 99, 0.12) 100%);
  border-left: 3px solid #ff6363;
  position: relative;
}

/* Убираем псевдоэлементы - они могут перекрывать текст */

/* Иконка важности при наведении */
.checklist-item-card:hover .importance-icon {
  opacity: 1;
  transform: scale(1.1);
}

.importance-icon {
  position: absolute;
  top: 8px;
  right: 34px; /* Всегда левее крестика: крестик right:8px+20px=28px, огонёк right:34px */
  width: 20px;
  height: 20px;
  background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
  border: 2px solid transparent;
  border-radius: 6px;
  opacity: 0;
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
  box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
  pointer-events: auto; /* Разрешаем клики только для иконки */
}

/* Иконка всегда видна на важных пунктах */
.checklist-item-card.important .importance-icon {
  opacity: 1;
}

.importance-icon::before {
  content: '🔥';
  font-size: 10px;
  line-height: 1;
}

.importance-icon.active {
  opacity: 1;
  background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.5);
}

/* Анимация для важных пунктов */
@keyframes importantPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.1);
  }
}

.checklist-item-card.important:hover {
  animation: importantPulse 2s infinite;
}

/* Контейнеры */
.checklist-container,
.notes-container {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 11px 1px; /* МИНИМАЛЬНЫЙ: горизонтальный padding установлен на минимальное значение 1px для максимальной ширины чек-листа внутри подложки */
  margin-bottom: 16px;
  margin-top: 0; /* ВЫРАВНИВАНИЕ: убрали отрицательный margin, отступ до названия создается через margin-bottom заголовка */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* КАЛЕНДАРЬ: выравнивание с чек-листами через ту же структуру */
/* Теперь у календаря есть .checklist-container как обертка, а .calendar-container внутри как .section-card */
.today-column.calendar-column .checklist-container {
  /* Используется общее правило для .checklist-container выше - padding: 16px, margin-bottom: 16px */
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.today-column.calendar-column .calendar-container {
  flex: 1;
  /* ВЫРАВНИВАНИЕ: делаем календарь белой карточкой как у .section-card в чек-листах */
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
  margin-top: 2px; /* ВРУЧНУЮ: опускаем блок календаря на 2px (было 9px - 7px) */
  transition: all 0.2s ease;
  padding: 0; /* ВЫРАВНИВАНИЕ: у .section-card нет padding, padding есть только у элементов внутри */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  /* УБИРАЕМ height: 100% и overflow: hidden чтобы блок мог растягиваться по содержимому */
  min-height: 0;
  overflow-y: visible; /* Убираем прокрутку, чтобы блок растягивался */
}

.notes-container {
  margin-bottom: 20px;
}

/* КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ: min-width для .calendar-container */
.calendar-container {
  min-width: 0 !important; /* Позволяет сжиматься меньше содержимого */
  contain: layout style !important; /* НЕСТАНДАРТНЫЙ ПОДХОД: изолирует layout */
  position: relative;
  box-sizing: border-box !important;
}

/* Textarea для заметок */
.notes-textarea {
  width: 100%;
  min-height: 120px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: #374151;
  resize: vertical;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.notes-textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Кнопки */
.action-buttons {
  margin-top: auto;
  padding-top: 16px;
}

.btn-add {
  width: 100%;
  background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

.btn-add:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

.btn-add:active {
  transform: translateY(0);
}

/* Календарь */
.calendar-wrapper {
  flex: 1;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  min-width: 0; /* КРИТИЧНО: позволяет сжиматься */
  overflow-x: hidden; /* Запрещаем выход за границы */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Для страницы today - убираем прокрутку и фиксированную высоту */
.today-column.calendar-column .calendar-wrapper {
  overflow-y: visible !important; /* ВРУЧНУЮ: убираем вертикальную прокрутку */
  height: auto !important; /* ВРУЧНУЮ: высота по содержимому */
  max-height: none !important; /* ВРУЧНУЮ: убираем ограничение высоты */
  flex: none !important; /* ВРУЧНУЮ: убираем flex: 1, чтобы не растягивался на всю высоту */
}

/* Заголовок календаря с навигацией */
.calendar-header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.calendar-header-title {
  color: #374151;
  font-weight: 600;
  font-size: 1rem;
  flex: 1;
  text-align: center;
}

.btn-nav-day {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(156, 163, 175, 0.5);
  background: rgba(156, 163, 175, 0.2);
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.btn-nav-day:hover {
  background: rgba(156, 163, 175, 0.3);
  border-color: rgba(156, 163, 175, 0.7);
  transform: none;
}

.btn-nav-day:active {
  transform: none;
}

.calendar-header {
  color: #374151;
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Календарь на странице "Сегодня" */
.today-calendar-grid {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr); /* minmax(0, 1fr) позволяет колонке сжиматься */
  grid-template-rows: repeat(24, minmax(25px, auto)); /* УБРАНА первая строка с заголовками */
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1px;
  margin-top: 7px; /* ВРУЧНУЮ: отступ 7px между шапкой календаря и первым блоком с временем */
  height: auto;
  min-height: 600px;
  max-height: none !important; /* ВРУЧНУЮ: убираем ограничение высоты */
  overflow-x: hidden !important; /* КРИТИЧНО: запрещаем выход за границы по горизонтали */
  overflow-y: visible !important; /* ВРУЧНУЮ: убираем вертикальную прокрутку */
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0; /* КРИТИЧНО: позволяет grid сжиматься меньше содержимого */
  contain: layout style; /* НЕСТАНДАРТНЫЙ ПОДХОД: изолирует layout */
}

.today-column .calendar-grid.today-calendar-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ: Ограничиваем вторую колонку grid явно */
.today-calendar-grid > *[style*="grid-column: 2"],
.today-calendar-grid > *[style*="gridColumn: 2"],
.today-calendar-header.today-events-header,
.today-calendar-day.today-events-slot {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  contain: layout !important;
}

/* НЕСТАНДАРТНЫЙ ПОДХОД: Используем CSS Grid с явным ограничением второй колонки */
.today-calendar-grid {
  grid-template-columns: 70px minmax(0, 1fr) !important;
}

/* НЕСТАНДАРТНЫЙ ПОДХОД: Принудительное ограничение через margin-right для второй колонки */
.today-calendar-day.today-events-slot::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  margin-left: calc(100% - 100px); /* Принудительно сдвигаем содержимое на 100px */
  pointer-events: none;
}

/* АЛЬТЕРНАТИВНЫЙ ПОДХОД: Используем clip-path для обрезки содержимого */
.today-calendar-grid::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100px;
  background: transparent;
  z-index: 10000;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Заголовки календаря "Сегодня" */
.today-calendar-header.today-time-header {
  grid-column: 1;
  grid-row: 1;
  text-align: center;
  background: rgba(102, 126, 234, 0.2);
  font-weight: 700;
  font-size: 0.85rem;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin: 1px;
}

.today-calendar-header.today-events-header {
  grid-column: 2;
  grid-row: 1;
  text-align: center;
  background: rgba(102, 126, 234, 0.2);
  font-weight: 700;
  font-size: 0.85rem;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin: 1px;
  max-width: 100% !important; /* КРИТИЧНО: явное ограничение */
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Временные слоты календаря "Сегодня" */
.today-calendar-day.today-time-slot {
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin: 1px;
  color: #374151;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  height: auto;
  min-height: 25px;
  box-sizing: border-box;
  text-align: center;
}

.today-calendar-day.today-events-slot {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  margin: 1px;
  padding: 4px 8px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  height: auto;
  min-height: 25px;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow-x: hidden !important; /* КРИТИЧНО: запрещаем выход за границы */
  overflow-y: visible;
  width: 100%;
  max-width: 100%;
  min-width: 0; /* КРИТИЧНО: позволяет сжиматься */
}

.today-calendar-day.today-events-slot.today-has-events {
  min-height: 60px;
}

.today-calendar-day.today-events-slot:hover {
  background: #f0f8ff;
  border-color: #e0e7ff;
}

.today-calendar-day.today-events-slot.today-has-events {
  background: rgba(102, 126, 234, 0.08);
}

/* События в календаре "Сегодня" */
.today-hour-events {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-right: 4px;
  min-width: 0; /* КРИТИЧНО: позволяет сжиматься */
  overflow-x: hidden; /* Запрещаем горизонтальный overflow */
}

.today-day-event.today-hour-event {
  background: rgba(102, 126, 234, 0.85);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  line-height: 1.3;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid rgba(102, 126, 234, 1);
  min-width: 100px;
  max-width: calc(100% - 6px) !important; /* КРИТИЧНО: принудительное ограничение */
  flex-shrink: 1; /* Изменено с 0 на 1 для возможности сжатия */
  flex-grow: 0; /* Запрещаем расширение */
  box-sizing: border-box;
  word-wrap: break-word;
  white-space: normal;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden; /* Скрываем переполнение */
}

.today-day-event.today-hour-event:hover {
  background: rgba(102, 126, 234, 1);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* Drag and drop для событий календаря "Сегодня" */
.today-day-event.today-hour-event {
  cursor: grab;
}

.today-day-event.today-hour-event.dragging-event {
  opacity: 0.5;
  transform: rotate(2deg) scale(1.05);
  z-index: 1000;
  cursor: grabbing;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.today-events-slot.drag-over {
  background: rgba(102, 126, 234, 0.15) !important;
  border: 2px dashed rgba(102, 126, 234, 0.7) !important;
  border-radius: 6px;
  animation: dropTargetPulse 1s ease-in-out infinite;
}

@keyframes dropTargetPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(102, 126, 234, 0);
  }
}

.today-event-time-inline {
  font-size: 0.7rem;
  opacity: 0.95;
  font-weight: 600;
  flex-shrink: 0;
}

.today-event-title-inline {
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1.3;
  word-wrap: break-word;
  white-space: normal;
  overflow: visible;
}

.today-day-content {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 2px;
  width: 100%;
  max-width: 100%;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  min-width: 0; /* КРИТИЧНО: позволяет сжиматься */
  overflow-x: hidden; /* Запрещаем горизонтальный overflow */
}

.today-day-number {
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151;
  text-align: center;
  width: 100%;
}

/* Чек-листы — flex-layout, иконки в отдельном контейнере справа */
.section-card .checklist-item-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

/* Важные пункты — красная подсветка (специфичность выше чем у базового .checklist-item-card.important) */
.section-card .checklist-item-card.important {
  background: linear-gradient(135deg, rgba(255, 99, 99, 0.08) 0%, rgba(255, 99, 99, 0.12) 100%);
  border-left: 3px solid #ff6363;
}

.section-card .checklist-item-card {
  transition: all 0.2s ease;
  position: relative;
}

/* Чекбокс */
.section-card .checklist-item-card .checklist-item-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease;
  position: relative;
  background: white;
  overflow: visible !important;
}
.section-card .checklist-item-card .checklist-item-checkbox.completed {
  background: #16a34a;
  border-color: #16a34a;
}
.section-card .checklist-item-card .checklist-item-checkbox.completed::after {
  content: '✓';
  font-size: 11px;
  font-weight: bold;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

/* Текст — занимает всё свободное место, переносится сам */
.section-card .checklist-item-card .checklist-item-content {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.4;
  cursor: pointer;
}
.section-card .checklist-item-card.completed .checklist-item-content {
  text-decoration: line-through;
  color: #9ca3af;
}

/* Контейнер иконок — flex-элемент, никогда не перекрывает текст */
.checklist-item-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 1px;
  overflow: visible !important; /* Блокируем глобальный overflow-x: hidden на этом контейнере */
}

.checklist-item-actions * {
  overflow: visible !important; /* То же для дочерних иконок — иначе браузер добавляет скроллбар ↕ */
}

/* Огонёк внутри actions — сброс position:absolute */
.section-card .checklist-item-card .importance-icon {
  position: static;
  opacity: 0;
  top: auto;
  right: auto;
  transform: none;
  margin: 0;
}
.section-card .checklist-item-card:hover .importance-icon,
.section-card .checklist-item-card.important .importance-icon,
.section-card .checklist-item-card .importance-icon.active {
  opacity: 1;
}

/* Крестик удаления */
.section-card .checklist-item-card .delete-item-btn {
  position: static;
  cursor: pointer;
  font-size: 1.1rem;
  color: #dc2626;
  line-height: 1;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.section-card .checklist-item-card .delete-item-btn:hover {
  background: #fef2f2;
}

.checklist-item-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.checklist-item-content {
  color: #374151;
  font-size: 14px;
  line-height: 1.4;
}

/* ===== АДАПТИВНОСТЬ СТРАНИЦЫ "СЕГОДНЯ" ===== */

/* Планшет (768px - 1280px) - горизонтальная ориентация */
@media (max-width: 1280px) and (min-width: 769px) {
    .today-main {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
        padding: 15px;
        height: auto;
        min-height: calc(100vh - 72px);
    }

    .today-column {
        height: auto;
        min-height: 300px;
        border-radius: 12px;
        padding: 16px;
    }

    .today-column.checklist-column,
    .today-column.notes-tasks-column {
        flex: 0 0 calc(50% - 6px);
        max-width: calc(50% - 6px);
    }

    .today-column.calendar-column {
        flex: 0 0 100%;
        max-width: 100%;
        min-height: 520px;
    }

    .pinned-goals-block {
        flex: 0 0 100%;
        grid-column: auto;
        grid-row: auto;
    }

    .column-header { font-size: 1rem; }
    .column-header-with-switcher { gap: 6px; }
    .checklist-switcher { gap: 4px; }
    .checklist-switcher .switcher-btn { padding: 0 8px; font-size: 0.68rem; height: 26px; }
    .checklist-switcher .archive-transfer-btn,
    .checklist-switcher .add-item-header-btn { width: 26px; height: 26px; }

    /* Сокращаем текст кнопок: "сейчас" → "S", "архив" → "A" */
    .checklist-switcher .switcher-btn[data-number] {
        font-size: 0;
        padding: 0 6px;
        min-width: 26px;
    }
    .checklist-switcher .switcher-btn[data-number="1"]::after { content: "S"; font-size: 0.68rem; }
    .checklist-switcher .switcher-btn[data-number="2"]::after { content: "A"; font-size: 0.68rem; }

    /* Календарь — компактнее */
    .today-calendar-date-control { gap: 3px; }
    .today-calendar-date-control .calendar-header-date {
        font-size: 0.78rem;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .today-calendar-date-control .calendar-nav-btn {
        width: 26px;
        height: 26px;
        font-size: 0.9rem;
    }
    .today-calendar-date-control .switcher-btn {
        height: 26px;
        padding: 0 6px;
        font-size: 0.68rem;
    }
}

/* Планшет (768px - 1280px) - вертикальная ориентация */
@media (max-width: 1280px) and (min-width: 769px) and (orientation: portrait) {
    .today-main {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 15px;
        padding: 15px;
        height: auto;
        min-height: calc(100vh - 72px);
        align-items: stretch;
    }

    .today-column {
        flex: none;
        max-width: none;
        width: 100%;
        height: auto;
        min-height: 280px;
        margin-bottom: 0;
        border-radius: 12px;
    }

    .today-column.checklist-column {
        margin-right: 0;
    }

    .today-column.calendar-column {
        margin-top: 0;
        min-height: 480px;
        max-height: 65svh;
        max-height: 65vh;
        overflow: hidden;
    }

    .today-column.calendar-column .calendar-container {
        overflow: hidden !important;
    }
    .today-column.calendar-column .calendar-wrapper {
        overflow: hidden !important;
    }
}

/* Мобильные устройства (до 768px) */
@media (max-width: 768px) {
    .today-main {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 12px;
        height: auto;
        min-height: calc(100vh - 72px);
        min-height: calc(100svh - 72px);
    }

    .today-column {
        width: 100%;
        height: auto;
        padding: 16px;
        border-radius: 12px;
    }

    .pinned-goals-block {
        grid-column: auto;
        grid-row: auto;
    }

    .today-column.checklist-column {
        margin-right: 0;
    }

    .today-column.calendar-column {
        margin-top: 0;
        min-height: 420px;
        max-height: 70svh; /* Ограничиваем высоту на мобильных, svh стабилен */
        max-height: 70vh;
        overflow: hidden;
    }

    /* На мобильных: не даём календарю вылезать за пределы контейнера */
    .today-column.calendar-column .calendar-container {
        overflow: hidden !important;
    }
    .today-column.calendar-column .calendar-wrapper {
        overflow: hidden !important;
        height: auto !important;
    }

    .column-header {
        font-size: 1.1rem;
        margin-bottom: 8px;
    }

    .checklist-container,
    .notes-container {
        margin-bottom: 16px;
        width: 100%;
        min-width: 0;
    }

    .column-header-with-switcher { gap: 4px; }
    .checklist-switcher { gap: 3px; }
    .checklist-switcher .switcher-btn {
        padding: 0 7px;
        font-size: 0.65rem;
        height: 24px;
    }
    .checklist-switcher .archive-transfer-btn,
    .checklist-switcher .add-item-header-btn {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }

    /* Сокращаем текст кнопок на мобильных */
    .checklist-switcher .switcher-btn[data-number] {
        font-size: 0;
        padding: 0 5px;
        min-width: 24px;
    }
    .checklist-switcher .switcher-btn[data-number="1"]::after { content: "S"; font-size: 0.65rem; }
    .checklist-switcher .switcher-btn[data-number="2"]::after { content: "A"; font-size: 0.65rem; }

    /* Календарь компактнее */
    .today-calendar-date-control { gap: 3px; }
    .today-calendar-date-control .calendar-header-date {
        font-size: 0.75rem;
        max-width: 85px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .today-calendar-date-control .calendar-nav-btn {
        width: 24px;
        height: 24px;
        font-size: 0.85rem;
    }
    .today-calendar-date-control .switcher-btn {
        height: 24px;
        padding: 0 5px;
        font-size: 0.65rem;
    }

    .notes-textarea {
        min-height: 120px;
        font-size: 14px;
    }

    .action-buttons {
        margin-top: 12px;
    }

    .btn-add {
        width: 100%;
        padding: 12px 16px;
        font-size: 14px;
    }

    /* Обеспечиваем полную ширину для всех контейнеров на мобильных */
    .checklist-container,
    .notes-container,
    .calendar-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* Мобильные устройства (до 480px) */
@media (max-width: 480px) {
    .today-column {
        padding: 12px;
    }

    .column-header {
        font-size: 1.125rem;
        margin-bottom: 8px;
    }

    .checklist-container,
    .notes-container {
        margin-bottom: 12px;
        width: 100%;
        min-width: 0;
    }

    .notes-textarea {
        min-height: 100px;
        font-size: 13px;
        padding: 8px;
    }

    .btn-add {
        padding: 10px 12px;
        font-size: 13px;
    }

    /* Адаптация календаря для мобильных */
    .calendar-container {
        padding: 8px;
        width: 100%;
        min-width: 0;
    }

    .calendar-wrapper {
        min-height: 300px;
    }

    #todayCalendar {
        font-size: 12px;
    }

    /* Адаптация чек-листов для мобильных */
    .checklist-item-card {
        padding: 8px;
        margin-bottom: 8px;
    }

    .checklist-item-content {
        font-size: 13px;
        padding: 6px 8px;
    }
}

/* Очень маленькие экраны (до 320px) */
@media (max-width: 320px) {
    .today-column {
        padding: 8px;
    }

    .column-header {
        font-size: 1rem;
    }

    .notes-textarea {
        min-height: 80px;
        font-size: 12px;
    }

    .btn-add {
        padding: 8px 10px;
        font-size: 12px;
    }

    .checklist-item-content {
        font-size: 12px;
        padding: 4px 6px;
    }
}

/* Адаптация модальных окон для мобильных */
@media (max-width: 768px) {
    .modal-content {
        margin: 10px;
        max-width: calc(100% - 20px);
        max-height: calc(100vh - 20px);
        overflow-y: auto;
    }

    .modal-header h3 {
        font-size: 1.125rem;
    }

    .form-group label {
        font-size: 14px;
    }

    .form-group input,
    .form-group textarea {
        font-size: 14px;
        padding: 10px 12px;
    }

    .form-actions {
        gap: 8px;
    }

    .btn-primary,
    .btn-secondary {
        padding: 10px 16px;
        font-size: 14px;
    }
}

/* Адаптация календарных модальных окон */
@media (max-width: 768px) {
    .modal-content-calendar {
        margin: 10px;
        max-width: calc(100% - 20px);
        max-height: calc(100vh - 20px);
        overflow-y: auto;
    }

    .modal-header-calendar h3 {
        font-size: 1.125rem;
    }

    .form-group-calendar label {
        font-size: 14px;
    }

    .form-group-calendar input,
    .form-group-calendar textarea {
        font-size: 14px;
        padding: 10px 12px;
    }

    .form-actions-calendar {
        gap: 8px;
        flex-wrap: wrap;
    }

    .btn-save-event,
    .btn-cancel-event,
    .btn-danger {
        padding: 10px 16px;
        font-size: 14px;
        flex: 1;
        min-width: 120px;
    }
}

/* ===============================================
   МОДАЛЬНОЕ ОКНО СОБЫТИЯ - NS CRM СТИЛЬ
   =============================================== */

.event-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease-out;
}

.event-modal-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    max-width: 380px;
    width: 90%;
    max-height: 85vh;
    overflow: hidden; /* прокрутка переносится в .event-modal-body, чтобы шапка была на всю ширину */
    animation: modalSlideUp 0.4s ease-out;
    /* Аккуратный скроллбар без визуальных зазоров */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent; /* Firefox */
    overscroll-behavior: contain;
}

/* WebKit скроллбар: аккуратный вид и скругления */
.event-modal-content::-webkit-scrollbar {
    width: 8px;
}
.event-modal-content::-webkit-scrollbar-track { background: transparent; }
.event-modal-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    border: 2px solid transparent; /* создаёт воздушный зазор у краёв */
    background-clip: padding-box;
}
.event-modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

/* Для широких экранов делаем модальное окно еще компактнее */
@media (min-width: 1200px) {
    .event-modal-content {
        max-width: 350px;
        width: 30%;
    }
}

/* Для очень широких экранов (4K+) */
@media (min-width: 1600px) {
    .event-modal-content {
        max-width: 320px;
        width: 25%;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.event-modal-header {
    background: var(--header-gradient);
    background-size: 200% 200%;
    animation: headerGradientShift 20s ease-in-out infinite;
    padding: 20px 25px;
    border-radius: 20px 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    position: relative;
    overflow: hidden;
}

/* Прокручиваемая часть модалки (тело) */
.event-modal-body {
    max-height: calc(85vh - 70px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}
.event-modal-body::-webkit-scrollbar { width: 8px; }
.event-modal-body::-webkit-scrollbar-track { background: transparent; margin: 8px; }
.event-modal-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.event-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.35); }


@keyframes shimmer {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

.event-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.close-modal {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.close-modal:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.event-form {
    padding: 25px;
}

.event-form .form-group {
    margin-bottom: 12px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 14px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    background: rgba(255, 255, 255, 0.95);
}

.form-group textarea {
    min-height: 80px;
    resize: vertical;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.form-group input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
    transform: scale(1.2);
}

.form-group label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid #f3f4f6;
}

.add-event-btn {
    margin-left: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-weight: 600;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.add-event-btn:hover {
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5);
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    filter: brightness(1.1);
}

.add-event-btn:active {
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
    opacity: 0.9;
}

/* Стили для календарных дней с интерактивностью */
.calendar-day {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}


/* Кнопка добавления события - ТОЛЬКО для блоков времени */
.calendar-day.time-slot::after {
    content: '+';
    position: absolute;
    top: 3px;
    right: 3px;
    width: clamp(14px, 2vw, 20px);
    height: clamp(14px, 2vw, 20px);
    min-width: 14px;
    min-height: 14px;
    max-width: 20px;
    max-height: 20px;
    background: var(--header-gradient);
    background-size: 200% 200%;
    animation: headerGradientShift 12s ease-in-out infinite;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(9px, 1.3vw, 12px);
    font-weight: bold;
    line-height: 1;
    padding: 0;
    margin: 0;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease;
    pointer-events: none; /* Блокируем клики когда невидима */
    z-index: 10;
    box-shadow: 0 2px 6px rgba(45, 27, 78, 0.3);
    cursor: pointer;
}

.calendar-day.time-slot:hover::after {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 3px 10px rgba(45, 27, 78, 0.4);
    pointer-events: auto; /* Разрешаем клики при hover */
}

/* Убираем кнопку из блока событий */
.calendar-day.events-slot::after {
    display: none !important;
}

/* Убираем кнопку для дней с событиями (старый стиль) */
.calendar-day.has-events::after {
    display: none;
}

/* Drag & Drop стили - УНИФИЦИРОВАННЫЕ (дублирующиеся стили удалены) */

.calendar-day.drop-target {
    background: rgba(102, 126, 234, 0.1) !important;
    border: 2px dashed rgba(102, 126, 234, 0.5) !important;
    border-radius: 8px;
    animation: dropTargetPulse 1s ease-in-out infinite;
}

.calendar-day.drag-over {
    background: rgba(102, 126, 234, 0.15) !important;
    border: 2px solid rgba(102, 126, 234, 0.7) !important;
    border-radius: 8px;
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

@keyframes dropTargetPulse {
    0%, 100% {
        background: rgba(102, 126, 234, 0.1);
        border-color: rgba(102, 126, 234, 0.5);
    }
    50% {
        background: rgba(102, 126, 234, 0.2);
        border-color: rgba(102, 126, 234, 0.8);
    }
}

/* Индикатор того, что событие можно перетаскивать */
.draggable-event::before {
    content: '⋮⋮';
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 8px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: -1px;
    line-height: 0.5;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .event-modal-content {
        width: 95%;
        max-width: 420px;
        margin: 10px auto;
        border-radius: 15px;
        max-height: 90vh;
        max-height: -webkit-fill-available; /* Safari iOS/iPad: корректная высота без учёта адресной строки */
    }

    .event-modal-header {
        padding: 12px 16px;
        border-radius: 15px 15px 0 0;
    }

    .event-modal-header h3 {
        font-size: 1.1rem;
    }

    .event-form {
        padding: 14px 16px;
    }

    /* Safari iOS: сброс нативных стилей кнопок */
    .event-modal .btn {
        -webkit-appearance: none;
        appearance: none;
    }

    /* Общие form-row на мобильных (не в модалке события) */
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .form-row .form-group:first-child {
        margin-bottom: 20px;
    }

    /* Модалка события: form-row остаётся в 2 колонки */
    .event-modal .form-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .event-modal .form-row .form-group:first-child {
        margin-bottom: 0;
    }

    .event-modal .form-row .form-group {
        margin-bottom: 4px;
    }

    .event-modal .form-group {
        margin-bottom: 8px;
    }

    .event-modal .form-group label {
        margin-bottom: 4px;
        font-size: 12px;
    }

    .event-modal .form-group input,
    .event-modal .form-group textarea,
    .event-modal .form-group select {
        padding: 8px 10px;
        font-size: 16px; /* Минимум 16px — иначе Safari на iPad зумит страницу при фокусе */
        border-radius: 8px;
        -webkit-appearance: none; /* Сбрасываем нативные стили Safari */
        appearance: none;
    }

    .event-modal .form-group textarea {
        min-height: 40px;
        max-height: 60px;
    }

    /* Кнопки в модалке события — в ряд */
    .event-modal .form-actions {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
    }

    .event-modal .form-actions .btn {
        flex: 1;
        min-width: 0;
        padding: 10px 8px;
        font-size: 14px;
    }

    /* Остальные элементы страницы */
    .form-actions {
        flex-wrap: wrap;
        gap: 10px;
    }

    .btn {
        flex: 1;
        min-width: 120px;
    }

    .add-event-btn {
        padding: 8px 16px;
        font-size: 13px;
        margin-left: 10px;
    }

    .calendar-day::after {
        width: 18px;
        height: 18px;
        font-size: 11px;
        top: 3px;
        right: 3px;
    }
}

@media (max-width: 480px) {
    .event-modal-content {
        width: 98%;
        margin: 5px auto;
        border-radius: 10px;
        max-height: 92vh;
    }

    .event-modal-header {
        padding: 10px 14px;
        border-radius: 10px 10px 0 0;
    }

    .event-modal-header h3 {
        font-size: 1rem;
    }

    .event-form {
        padding: 12px 14px;
    }

    .event-modal .form-group label {
        font-size: 11px;
        margin-bottom: 3px;
    }

    .event-modal .form-group input,
    .event-modal .form-group textarea,
    .event-modal .form-group select {
        padding: 7px 9px;
        font-size: 16px; /* Минимум 16px — Safari iPad zoom fix */
    }

    .form-group input,
    .form-group textarea {
        padding: 10px 12px;
        font-size: 16px; /* Минимум 16px — Safari iPad zoom fix */
    }
}

/* ===== НОВЫЙ ДНЕВНОЙ ВИД КАЛЕНДАРЯ ===== */

/* Дневной вид - два столбца с часами (улучшенный дизайн) */
.calendar-grid.day {
  display: grid;
  grid-template-columns: 90px 1fr 90px 1fr;
  grid-template-rows: 55px repeat(24, 65px);
  gap: 2px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
  border-radius: 16px;
  padding: 3px;
  height: 100%;
  overflow: auto; /* Изменено с hidden на auto для прокрутки */
  box-sizing: border-box;
  min-height: 0;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.12);
}

/* Заголовки для первого столбца (00-12) - улучшенный дизайн */
.calendar-grid.day .day-time-header-1 {
  grid-column: 1;
  grid-row: 1;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
  background-size: 200% 200%;
  animation: headerGradientShift 20s ease-in-out infinite;
  border-radius: 12px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-height: 60px;
  height: auto;
}

.calendar-grid.day .day-events-header-1 {
  grid-column: 2;
  grid-row: 1;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
  background-size: 200% 200%;
  animation: headerGradientShift 20s ease-in-out infinite;
  border-radius: 0 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-height: 60px;
  height: auto;
}

/* Заголовки для второго столбца (13-24) - улучшенный дизайн */
.calendar-grid.day .day-time-header-2 {
  grid-column: 3;
  grid-row: 1;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
  background-size: 200% 200%;
  animation: headerGradientShift 20s ease-in-out infinite;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-height: 60px;
  height: auto;
}

.calendar-grid.day .day-events-header-2 {
  grid-column: 4;
  grid-row: 1;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
  background-size: 200% 200%;
  animation: headerGradientShift 20s ease-in-out infinite;
  border-radius: 0 0 12px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-height: 60px;
  height: auto;
}

/* Временные слоты для первого столбца (00-12) - улучшенный дизайн */
.calendar-grid.day .time-slot-1 {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
  border-radius: 8px;
  margin: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
  font-weight: 600;
  font-size: 0.8rem;
  border: 1px solid rgba(229, 231, 235, 0.8);
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: relative;
}

.calendar-grid.day .time-slot-1:hover {
  background: linear-gradient(135deg, #f0f8ff 0%, #e8f4fd 100%);
  color: #1e40af;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.15);
  border-color: rgba(102, 126, 234, 0.3);
}

.calendar-grid.day .events-slot-1 {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
  border-radius: 8px;
  margin: 1px;
  padding: 6px;
  border: 1px solid rgba(229, 231, 235, 0.8);
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: relative;
}

.calendar-grid.day .events-slot-1:hover {
  background: linear-gradient(135deg, #f0f8ff 0%, #e8f4fd 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.15);
  border-color: rgba(102, 126, 234, 0.3);
}

/* Временные слоты для второго столбца (13-24) - улучшенный дизайн */
.calendar-grid.day .time-slot-2 {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
  border-radius: 8px;
  margin: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
  font-weight: 600;
  font-size: 0.8rem;
  border: 1px solid rgba(229, 231, 235, 0.8);
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: relative;
}

.calendar-grid.day .time-slot-2:hover {
  background: linear-gradient(135deg, #f0f8ff 0%, #e8f4fd 100%);
  color: #1e40af;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.15);
  border-color: rgba(102, 126, 234, 0.3);
}

.calendar-grid.day .events-slot-2 {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
  border-radius: 8px;
  margin: 1px;
  padding: 6px;
  border: 1px solid rgba(229, 231, 235, 0.8);
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: relative;
}

.calendar-grid.day .events-slot-2:hover {
  background: linear-gradient(135deg, #f0f8ff 0%, #e8f4fd 100%);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.15);
  border-color: rgba(102, 126, 234, 0.3);
  filter: brightness(1.02);
}

/* Контейнер для нескольких событий в одном часе */
.hour-events-container {
  width: 100%;
  height: 100%;
}

/* События в дневном виде - УНИФИЦИРОВАННЫЕ */
.calendar-grid.day .day-event.hour-event {
  /* УНИФИЦИРОВАННЫЕ СТИЛИ */
  background: var(--event-bg);
  background-size: 200% 200%;
  animation: headerGradientShift 20s ease-in-out infinite;
  color: var(--event-text-color);
  border: var(--event-border);
  border-left: var(--event-border-left);
  border-radius: var(--event-border-radius);
  padding: var(--event-padding);
  font-size: var(--event-font-size);
  font-weight: var(--event-font-weight);
  cursor: pointer;
  transition: var(--event-transition);
  box-shadow: var(--event-shadow);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 36px;
}

.calendar-grid.day .day-event.hour-event:hover {
  background: var(--event-bg-hover);
  background-size: 200% 200%;
  animation: headerGradientShift 20s ease-in-out infinite;
  box-shadow: var(--event-shadow-hover);
  border-color: rgba(255, 255, 255, 0.4);
  filter: brightness(1.05);
}

.calendar-grid.day .day-event.hour-event::after {
  content: '✏️';
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.calendar-grid.day .day-event.hour-event:hover::after {
  opacity: 1;
}

/* Дополнительные стили для дневного вида (переопределяют базовые где нужно) */
.calendar-grid.day .event-time-inline {
  min-width: 40px;
  text-align: center;
}

/* Адаптивные стили для множественных событий в дневном виде */
.events-slot-2[data-events-count="2"] .day-event.hour-event,
.events-slot-2[data-events-count="3"] .day-event.hour-event {
  padding: var(--event-padding);
  font-size: var(--event-font-size);
  min-height: 32px;
}

.events-slot-2[data-events-count="2"] .event-time-inline,
.events-slot-2[data-events-count="3"] .event-time-inline {
  font-size: 0.65rem;
  min-width: 35px;
  margin-right: 4px;
  padding: 1px 4px;
}

.events-slot-2[data-events-count="2"] .event-title-inline,
.events-slot-2[data-events-count="3"] .event-title-inline {
  font-size: 0.7rem;
}

/* Для 4+ событий делаем еще компактнее */
.events-slot-2[data-events-count]:not([data-events-count="1"]):not([data-events-count="2"]):not([data-events-count="3"]) .day-event.hour-event {
  padding: 5px 6px;
  font-size: 0.65rem;
  min-height: 28px;
}

.events-slot-2[data-events-count]:not([data-events-count="1"]):not([data-events-count="2"]):not([data-events-count="3"]) .event-time-inline {
  font-size: 0.6rem;
  min-width: 32px;
  margin-right: 4px;
  padding: 1px 3px;
}

.events-slot-2[data-events-count]:not([data-events-count="1"]):not([data-events-count="2"]):not([data-events-count="3"]) .event-title-inline {
  font-size: 0.65rem;
}

/* Специальные стили для текущего часа в дневном виде */
.calendar-grid.day .time-slot-1.current-hour,
.calendar-grid.day .time-slot-2.current-hour {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  font-weight: 700;
  border: 2px solid #f59e0b;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.calendar-grid.day .events-slot-1.current-hour,
.calendar-grid.day .events-slot-2.current-hour {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid #f59e0b;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Анимация пульсации для текущего часа */
@keyframes pulseCurrentHour {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
  }
  50% {
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.5);
  }
}

.calendar-grid.day .time-slot-1.current-hour,
.calendar-grid.day .time-slot-2.current-hour,
.calendar-grid.day .events-slot-1.current-hour,
.calendar-grid.day .events-slot-2.current-hour {
  animation: pulseCurrentHour 2s ease-in-out infinite;
}

/* === ГЛОБАЛЬНЫЕ ПРАВИЛА ДЛЯ ЦВЕТНЫХ ПОЛОС СОБЫТИЙ === */
/* Применяются ко ВСЕМ видам календаря (месячный, недельный, дневной) */
/* Эти правила должны быть в конце, чтобы перекрыть базовые стили */

/* Повторяющиеся события - ЗЕЛЁНАЯ полоса слева */
.day-event.recurring,
.week-event.recurring,
.recurring {
  border-left: 4px solid #10b981 !important;
}

/* События на весь день - КРАСНАЯ полоса слева */
.day-event.all-day-event,
.week-event.all-day-event,
.all-day-event,
.multi-day {
  border-left: 4px solid #dc2626 !important;
}

/* Обычные события - СЕРАЯ полоса слева (по умолчанию уже установлена через --event-border-left) */

/* ===== 14. КОНТАКТЫ ===== */

/* Основные элементы страницы контактов */
.contacts-main {
  min-height: calc(100vh - 72px);
  width: 100%;
  background: var(--bg-secondary);
  padding: 32px 0;
}

/* Заголовок страницы контактов */
.contacts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding: 0 24px;
  flex-wrap: wrap;
  gap: 20px;
}

.contacts-title-section {
  flex: 1;
  min-width: 200px;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* Контент страницы */
.contacts-content {
  padding: 0 24px;
}

/* Панель фильтров */
.filters-panel {
  background: var(--bg-primary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid var(--border-light);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filters-panel.active {
  max-height: 500px;
  opacity: 1;
  padding: 24px;
}

.filters-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.filter-group select {
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  background: var(--bg-primary);
  font-size: 0.875rem;
  transition: var(--transition);
}

.filter-group select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.filters-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.btn-clear {
  padding: 8px 16px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--border-radius);
  font-size: 0.875rem;
  cursor: pointer;
  transition: var(--transition);
}

.btn-clear:hover {
  background: var(--bg-active);
}

.btn-apply {
  padding: 8px 16px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  font-size: 0.875rem;
  cursor: pointer;
  transition: var(--transition);
}

.btn-apply:hover {
  background: var(--primary-hover);
}

/* Сетка контактов */
.contacts-grid {
  margin-bottom: 32px;
}

/* Группировка контактов по категориям */
.category-group {
  margin-bottom: 32px;
}

/* Стили для заголовков категорий в контактах (отдельные от проектов) */
.contacts-category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 20px;
  background: var(--bg-primary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--primary);
}

.contacts-category-header i {
  font-size: 1.2rem;
  color: var(--primary);
}

.contacts-category-header span {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.category-count {
  background: var(--primary);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  min-width: 24px;
  text-align: center;
}

.category-separator {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--border-light), transparent);
  margin: 24px 0;
  border-radius: 2px;
}

.contacts-in-category {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
}

/* Карточка контакта */
.contact-card {
  background: var(--bg-primary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

/* Действия для карточки */
.contact-actions {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: var(--transition);
  z-index: 10;
}

.contact-card:hover .contact-actions {
  opacity: 1;
}

.action-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}

.action-btn:hover {
  transform: scale(1.1);
  background: white;
  box-shadow: var(--shadow-md);
}

.edit-btn:hover {
  color: var(--primary);
  background: rgba(102, 126, 234, 0.1);
}

.delete-btn:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
}

/* Тело карточки */
.contact-body {
  padding: 20px;
  display: flex;
  gap: 20px;
}

.contact-left {
  flex: 1;
  min-width: 0;
}

.contact-right {
  flex-shrink: 0;
  min-width: 140px;
}

/* Заголовок контакта */
.contact-header {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  align-items: flex-start;
}

.contact-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  flex-shrink: 0;
  text-transform: uppercase;
}

.contact-info {
  flex: 1;
  min-width: 0;
}

.contact-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.contact-company {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0 0 2px 0;
  font-weight: 500;
}

.contact-position {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  margin: 0;
  font-style: italic;
}

/* Детали контакта */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.contact-detail i {
  width: 16px;
  text-align: center;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.contact-detail span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Теги контакта */
.contact-tags-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tags-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tags-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tags-header i {
  font-size: 0.7rem;
}

.tags-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 500;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-tag i {
  font-size: 0.65rem;
  opacity: 0.8;
}

.contact-tag.activity-area {
  background: #2E8B57;
}

.contact-tag.category {
  /* Цвет задается динамически через style */
}

.contact-tag.qualification {
  /* Цвет задается динамически через style */
}

/* Модальные окна контактов */
.contact-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(4px);
}

.contact-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.contact-modal {
  background: var(--bg-primary);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 500px;
  width: auto;
  min-width: 360px;
  max-height: calc(100vh - 40px);
  overflow: hidden;
  transform: scale(0.9) translateY(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Форма контакта - компактная */
#contactModal .contact-modal {
  max-width: 450px;
}

/* Управление квалификациями - чуть шире */
#qualificationsModal .contact-modal {
  max-width: 600px;
}

/* Форма квалификации - компактная */
#qualificationFormModal .contact-modal {
  max-width: 400px;
}

.contact-modal-overlay.active .contact-modal {
  transform: scale(1) translateY(0);
}

/* Заголовок модального окна */
.modal-header {
  background: var(--header-gradient);
  color: white;
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.modal-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
  pointer-events: none;
}

.modal-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.modal-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  backdrop-filter: blur(8px);
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* Форма контакта */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  padding: 24px;
  max-height: 60vh;
  overflow-y: auto;
}

/* Компактная сетка для основной формы контакта */
#contactModal .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 24px;
}

/* Полная ширина для некоторых полей в форме контакта */
#contactModal .form-group.span-4,
#contactModal .form-group.full-width {
  grid-column: 1 / -1;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group.span-4 {
  grid-column: 1 / -1;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-group input,
.form-group textarea,
.form-group select {
  padding: 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  background: var(--bg-primary);
  font-size: 0.875rem;
  transition: var(--transition);
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group textarea {
  min-height: 80px;
  resize: vertical;
}

/* Множественный выбор */
.multi-select-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selected-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
  padding: 8px;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  background: var(--bg-secondary);
}

.selected-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 500;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.selected-item i {
  font-size: 0.7rem;
  opacity: 0.8;
}

.selected-item small {
  opacity: 0.9;
  margin-left: 2px;
}

.remove-btn {
  background: rgba(255, 255, 255, 0.3);
  border: none;
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  margin-left: 4px;
}

.remove-btn:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}

/* Действия формы */
.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 24px 32px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-secondary);
}

.btn-cancel {
  padding: 12px 24px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  border: 1px solid var(--border-medium);
  border-radius: var(--border-radius);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.btn-cancel:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.btn-save {
  padding: 10px 20px;
  background: var(--header-gradient);
  background-size: 400% 400%;
  animation: headerGradientShift 16s ease-in-out infinite;
  color: white;
  border: none;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  opacity: 0.8;
}

.btn-save:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 27, 78, 0.3);
}

.btn-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Управление категориями и квалификациями */
.management-content {
  padding: 32px;
  max-height: 60vh;
  overflow-y: auto;
}

.management-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.qualification-areas {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.qualification-area {
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.area-header {
  background: var(--bg-tertiary);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
}

.area-name {
  font-weight: 600;
  color: var(--text-primary);
}

.area-count {
  background: var(--primary);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  min-width: 24px;
  text-align: center;
}

.qualification-items {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.qualification-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  padding: 16px;
  transition: var(--transition);
}

.qualification-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--primary);
}

.qualification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.qualification-name {
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.qualification-color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: var(--shadow-sm);
}

.qualification-description {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.4;
}

.qualification-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.qualification-actions button {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.qualification-actions button:hover {
  background: var(--primary);
  color: white;
  transform: scale(1.1);
}

.qualification-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Пагинация */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
  padding: 0 24px;
}

.pagination button {
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  background: var(--bg-primary);
  color: var(--text-secondary);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.875rem;
}

.pagination button:hover:not(:disabled) {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.pagination button.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Состояние загрузки и пустое состояние */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-tertiary);
}

.empty-state i {
  font-size: 4rem;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 1.25rem;
  margin: 0 0 8px 0;
  color: var(--text-secondary);
}

.empty-state p {
  margin: 0;
  font-size: 0.875rem;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-light);
  border-top: 3px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Адаптивность для контактов */
@media (min-width: 1400px) {
  /* Увеличиваем размеры модальных окон на больших экранах */
  #contactModal .contact-modal {
    max-width: 550px;
  }

  #qualificationsModal .contact-modal {
    max-width: 700px;
  }

  #qualificationFormModal .contact-modal {
    max-width: 450px;
  }
}

@media (max-width: 1024px) {
  .contacts-in-category {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }

  .contact-body {
    flex-direction: column;
    gap: 16px;
  }

  .contact-right {
    min-width: 0;
  }

  .tags-content {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .contacts-header {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .header-actions {
    justify-content: center;
  }

  .filters-row {
    grid-template-columns: 1fr;
  }

  .contacts-in-category {
    grid-template-columns: 1fr;
  }

  .contact-header {
    flex-direction: row;
    align-items: flex-start;
  }

  .form-grid {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .modal-header {
    padding: 20px 24px;
  }

  .form-actions {
    padding: 20px 24px;
    flex-direction: column;
  }

  .qualification-items {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .contacts-main {
    padding: 16px 0;
  }

  .contacts-content {
    padding: 0 16px;
  }

  .contact-actions {
    position: static;
    opacity: 1;
    margin-bottom: 12px;
    justify-content: flex-end;
  }

  .contact-card {
    padding: 16px;
  }

  .contact-body {
    padding: 0;
  }

  .contact-modal {
    width: auto;
    min-width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    margin: 20px;
  }

  .form-grid {
    padding: 16px;
  }
}

/* ===== 15. МОДУЛЬ ЗНАНИЙ ===== */

/* Основной контейнер базы знаний */
.knowledge-container {
  display: flex;
  width: 100%;
  height: calc(100vh - 72px);
  background: var(--bg-secondary);
  overflow: hidden;
}

/* Боковая панель */
.knowledge-sidebar {
  width: 380px;
  min-width: 320px;
  max-width: 50vw;
  background: var(--bg-primary);
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Заголовок боковой панели */
.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.sidebar-title-section {
  margin-bottom: 16px;
}

.sidebar-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

/* Поиск */
.search-section {
  position: relative;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
  pointer-events: none;
  z-index: 1;
}

.search-input {
  width: 100%;
  padding: 10px 36px 10px 36px;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  font-size: 0.875rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  transition: var(--transition);
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-clear {
  position: absolute;
  right: 8px;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: var(--transition);
}

.search-clear:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.search-clear svg {
  width: 16px;
  height: 16px;
}

/* Результаты поиска */
.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  max-height: 400px;
  overflow-y: auto;
  z-index: 100;
}

.search-result {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: var(--transition);
}

.search-result:last-child {
  border-bottom: none;
}

.search-result:hover {
  background: var(--bg-hover);
}

.search-result-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.search-result-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.search-result-info {
  flex: 1;
  min-width: 0;
}

.search-result-title {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.search-result-excerpt {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.search-result-excerpt mark {
  background: #fef3c7;
  color: var(--text-primary);
  padding: 0 2px;
}

/* Панель инструментов */
.sidebar-toolbar {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.toolbar-btn {
  flex: 1;
  min-width: 100px;
  max-width: 130px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: var(--header-gradient);
  background-size: 600% 600%;
  animation: headerGradientShift 12s ease-in-out infinite;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  opacity: 0.9;
}

.toolbar-btn:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 27, 78, 0.3);
}

.toolbar-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(45, 27, 78, 0.3);
  opacity: 0.8;
}

.toolbar-btn.secondary {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  opacity: 1;
  animation: none;
}

.toolbar-btn.secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-medium);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.toolbar-btn.secondary:active {
  background: var(--bg-secondary);
}

.toolbar-btn.primary {
  background: var(--header-gradient);
  background-size: 600% 600%;
  animation: headerGradientShift 12s ease-in-out infinite;
  color: white;
  border: none;
  opacity: 0.9;
}

.toolbar-btn.primary:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 27, 78, 0.3);
}

.toolbar-btn.primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(45, 27, 78, 0.3);
  opacity: 0.8;
}

.toolbar-btn .btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Дерево навигации */
.tree-section {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}

.tree-container {
  padding: 0 12px;
}

.tree-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Узлы дерева */
.tree-node {
  margin-bottom: 2px;
}

.node-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}

.node-content:hover {
  background: var(--bg-hover);
}

.node-content.active {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
  font-weight: 500;
}

.expand-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s;
  color: var(--text-tertiary);
}

.expand-icon.expanded {
  transform: rotate(90deg);
}

.expand-icon svg {
  width: 12px;
  height: 12px;
}

.node-icon {
  font-size: 1.125rem;
  flex-shrink: 0;
}

.node-title {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.node-children {
  margin-left: 24px;
  margin-top: 2px;
}

/* Ресайзер боковой панели */
.sidebar-resizer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
  background: transparent;
  transition: background 0.2s;
}

.sidebar-resizer:hover,
.sidebar-resizer.resizing {
  background: var(--primary);
}

/* Основная область контента */
.knowledge-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary);
}

.content-header {
  padding: 24px 32px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-primary);
  flex-shrink: 0;
}

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 0.875rem;
}

.breadcrumb-item {
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.breadcrumb-item:hover {
  color: var(--primary);
}

.breadcrumb-item.active {
  color: var(--text-primary);
  font-weight: 500;
  cursor: default;
}

.breadcrumb-separator {
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
}

.breadcrumb-separator svg {
  width: 14px;
  height: 14px;
}

.content-title-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.page-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

.content-meta {
  display: flex;
  gap: 16px;
  align-items: center;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.meta-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.content-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Кнопки действий в базе знаний */
.knowledge-main-content .action-btn,
.action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  min-width: 140px !important;
  border: none !important;
  border-radius: 8px !important;
  background: var(--header-gradient) !important;
  background-size: 600% 600% !important;
  animation: headerGradientShift 12s ease-in-out infinite !important;
  color: #fff !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  opacity: 0.9 !important;
  box-sizing: border-box !important;
}

.knowledge-main-content .action-btn:hover,
.action-btn:hover {
  opacity: 1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(45, 27, 78, 0.3) !important;
}

.knowledge-main-content .action-btn:active,
.action-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(45, 27, 78, 0.3) !important;
  opacity: 0.8 !important;
}

.knowledge-main-content .action-btn.secondary,
.action-btn.secondary {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-light) !important;
  opacity: 1 !important;
  animation: none !important;
}

.knowledge-main-content .action-btn.secondary:hover,
.action-btn.secondary:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border-medium) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.knowledge-main-content .action-btn.secondary:active,
.action-btn.secondary:active {
  background: var(--bg-secondary) !important;
}

.knowledge-main-content .action-btn.primary,
.action-btn.primary {
  background: var(--header-gradient) !important;
  background-size: 600% 600% !important;
  animation: headerGradientShift 12s ease-in-out infinite !important;
  color: white !important;
  border: none !important;
  opacity: 0.9 !important;
}

.knowledge-main-content .action-btn.primary:hover,
.action-btn.primary:hover {
  opacity: 1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(45, 27, 78, 0.3) !important;
}

.knowledge-main-content .action-btn.primary:active,
.action-btn.primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(45, 27, 78, 0.3) !important;
  opacity: 0.8 !important;
}

.action-btn .btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Тело контента */
.content-body {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
}

.editor-wrapper {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  overflow: hidden;
  max-width: 100%;
  position: relative;
}

.editor-container {
  min-height: 400px;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

/* Простой редактор (без Quill) */
.simple-editor {
  min-height: 300px;
  padding: 20px;
  outline: none;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary, #1f2937);
  overflow-wrap: break-word;
  word-wrap: break-word;
  max-width: 100%;
  overflow-x: hidden;
}

.simple-editor:empty:before {
  content: attr(data-placeholder);
  color: var(--text-tertiary, #9ca3af);
  font-style: italic;
}

.simple-editor * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.simple-editor img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 1em auto;
}

/* КРИТИЧЕСКОЕ: Скрываем все SVG в простом редакторе */
.simple-editor svg {
  display: none !important;
}

/* Строгие ограничения для контейнера Quill */
.editor-container .ql-container {
  max-width: 100%;
  overflow-x: hidden;
}

.editor-container .ql-editor {
  max-width: 100%;
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ===== КРИТИЧЕСКОЕ: ПРАВИЛЬНЫЕ РАЗМЕРЫ SVG В ПАНЕЛИ ИНСТРУМЕНТОВ QUILL ===== */
/* SVG иконки в панели инструментов должны иметь фиксированный размер */
.ql-toolbar.ql-snow .ql-stroke,
.ql-toolbar.ql-snow .ql-fill,
.ql-toolbar button svg,
.ql-toolbar .ql-picker-label svg,
.ql-toolbar .ql-stroke,
.ql-toolbar .ql-fill {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
}

/* Панель инструментов Quill - улучшенная высота и выравнивание */
.ql-toolbar.ql-snow {
  padding: 12px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 52px !important;
}

/* Группы кнопок в панели инструментов */
.ql-toolbar.ql-snow .ql-formats {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-right: 0 !important;
}

/* Кнопки в панели инструментов Quill */
.ql-toolbar.ql-snow button {
  width: 32px !important;
  height: 32px !important;
  padding: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
}

/* Выпадающие списки (header, size) */
.ql-toolbar.ql-snow .ql-picker {
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.ql-toolbar.ql-snow .ql-picker-label {
  height: 32px !important;
  padding: 6px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 4px !important;
}

/* Улучшенный размер выпадающих меню */
.ql-toolbar.ql-snow .ql-picker.ql-header,
.ql-toolbar.ql-snow .ql-picker.ql-size {
  width: auto !important;
  min-width: 130px !important;
}

/* Ширина выпадающего списка header */
.ql-toolbar.ql-snow .ql-picker.ql-header .ql-picker-options {
  min-width: 160px !important;
}

/* SVG внутри кнопок Quill */
.ql-toolbar.ql-snow button svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  margin: auto !important;
}

/* ===== КРИТИЧЕСКОЕ ПРАВИЛО: СКРЫВАЕМ ВСЕ SVG В РЕДАКТОРЕ (НО НЕ В ПАНЕЛИ ИНСТРУМЕНТОВ!) ===== */
/* Максимальная специфичность для гарантированного применения - ТОЛЬКО для области редактирования .ql-editor */
.editor-container .ql-editor svg,
.editor-wrapper .editor-container .ql-editor svg,
.knowledge-main-content .content-body .editor-wrapper .editor-container .ql-editor svg,
#quillEditor .ql-editor svg,
.ql-editor:not(.ql-toolbar) svg,
.ql-editor svg[viewBox],
.ql-editor svg[width],
.ql-editor svg[height],
.ql-editor svg[style],
.editor-container .ql-editor svg[viewBox],
.editor-container .ql-editor svg[width],
.editor-container .ql-editor svg[height],
.editor-container .ql-editor svg[style] {
  display: none !important;
  max-width: 0 !important;
  max-height: 0 !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
}

/* НО! Не применяем это правило к панели инструментов */
.ql-toolbar svg,
.ql-toolbar.ql-snow svg,
.ql-toolbar button svg,
.ql-toolbar .ql-picker-label svg {
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  left: auto !important;
  pointer-events: auto !important;
}

/* Секция файлов */
.files-section {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--border-light);
}

.files-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.files-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.section-icon {
  width: 20px;
  height: 20px;
}

.files-count {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.file-upload-area {
  margin-bottom: 24px;
}

.upload-zone {
  border: 2px dashed var(--border-medium);
  border-radius: var(--border-radius);
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  background: var(--bg-secondary);
}

.upload-zone:hover,
.upload-zone.dragover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.upload-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.upload-icon {
  width: 48px;
  height: 48px;
  color: var(--text-tertiary);
}

.upload-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.upload-primary {
  font-weight: 500;
  color: var(--text-primary);
}

.upload-secondary {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.upload-formats {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 8px;
}

.files-list-container {
  margin-top: 20px;
}

.files-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.file-item:hover {
  background: var(--bg-hover);
  border-color: var(--border-medium);
}

.file-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.file-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.file-details {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-meta {
  display: flex;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.file-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.file-action-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.file-action-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-medium);
  color: var(--text-primary);
}

.file-action-btn.delete:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
}

.file-action-btn svg {
  width: 16px;
  height: 16px;
}

.no-files {
  text-align: center;
  padding: 40px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Модальное окно базы знаний */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(4px);
}

.modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.modal-container {
  background: var(--bg-primary);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 500px;
  width: 90%;
  max-height: calc(100vh - 40px);
  overflow: hidden;
  transform: scale(0.9) translateY(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.show .modal-container {
  transform: scale(1) translateY(0);
}

.modal-header {
  background: var(--header-gradient);
  color: white;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  color: white;
}

.modal-close {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: var(--transition);
  opacity: 0.8;
}

.modal-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

.modal-close svg {
  width: 20px;
  height: 20px;
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}

/* Форма в модальном окне */
.modal-body .form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modal-body .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-body .form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}

.modal-body .form-input,
.modal-body .form-select {
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  font-size: 0.875rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: var(--transition);
}

.modal-body .form-input:focus,
.modal-body .form-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.modal-body .form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}

.modal-body .form-btn {
  padding: 10px 20px;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-body .form-btn.secondary {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.modal-body .form-btn.secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-medium);
}

.modal-body .form-btn.primary {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.modal-body .form-btn.primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.modal-body .form-btn .btn-icon {
  width: 16px;
  height: 16px;
}

/* Адаптивность */
@media (max-width: 768px) {
  .knowledge-container {
    flex-direction: column;
  }

  .knowledge-sidebar {
    width: 100%;
    max-width: 100%;
    height: 40vh;
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }

  .content-header {
    padding: 16px;
  }

  .content-body {
    padding: 16px;
  }

  .sidebar-toolbar {
    flex-wrap: wrap;
  }

  .toolbar-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 100px;
    padding: 8px 12px;
    font-size: 0.85rem;
  }

  .action-btn {
    padding: 8px 16px;
    font-size: 0.85rem;
  }

  .modal-container {
    width: 95%;
    max-width: 95%;
  }
}

/* ===== 16. МОДУЛЬ ЗДОРОВЬЯ ===== */

/* Основные элементы страниц здоровья */
.health-main {
  min-height: calc(100vh - 72px);
  width: 100%;
  margin: 0;
  padding: 32px 0;
  display: flex;
  flex-direction: column;
}

.health-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 32px 32px 32px;
}

.health-header-row h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.health-nav-buttons {
  display: flex;
  gap: 12px;
}

.nav-btn {
  background: var(--header-gradient);
  background-size: 400% 400%;
  animation: headerGradientShift 16s ease-in-out infinite;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
  opacity: 0.8;
  display: inline-block;
  font-size: 14px;
}

.nav-btn:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 27, 78, 0.3);
}

.nav-btn.active {
  opacity: 1;
  background: linear-gradient(45deg, #1e3a5f 0%, #2d1b4e 35%, #2c2c54 70%, #0d4f4f 100%);
}

.health-content {
  padding: 0 32px;
  width: 100%;
  box-sizing: border-box;
}

/* Форма быстрого ввода */
.quick-input-section {
  background: white;
  border-radius: var(--border-radius-xl);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-lg);
}

.quick-input-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.quick-input-header h2 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  color: #1f2937;
  flex: 1;
}

.quick-input-header-unified {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.quick-input-header-unified h2 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  color: #1f2937;
  justify-self: start;
}

.quick-input-header-unified .date-selector-center {
  justify-self: center;
}

.quick-input-header-unified .header-actions-right {
  justify-self: end;
}

.date-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.date-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(156, 163, 175, 0.5);
  background: rgba(156, 163, 175, 0.2);
  color: #6b7280;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.date-nav-btn:hover {
  background: rgba(156, 163, 175, 0.3);
  border-color: rgba(156, 163, 175, 0.7);
}

.header-actions-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.date-input {
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-size: 0.875rem;
  height: 32px;
}

.btn-today {
  background: var(--header-gradient);
  background-size: 400% 400%;
  animation: headerGradientShift 16s ease-in-out infinite;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 7px;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.8;
  white-space: nowrap;
}

.btn-today:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 27, 78, 0.3);
}

.date-navigation-hint {
  font-size: 0.8rem;
  color: var(--border-dark);
}

/* Центральная навигация по датам */
.date-navigation-center {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.date-selector-center {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Сетка полей ввода */
.input-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.input-group label {
  font-weight: 500;
  color: #374151;
  font-size: 0.9rem;
}

.form-control {
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  font-size: 0.9rem;
  transition: all 0.2s;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.input-hint {
  font-size: 0.8rem;
  color: var(--border-dark);
}

/* Слайдеры */
.slider-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #e5e7eb;
  outline: none;
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--thumb-color, var(--primary));
  cursor: pointer;
  transition: all 0.2s;
}

.slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--thumb-color, var(--primary));
  cursor: pointer;
  border: none;
}

.slider-value {
  text-align: center;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--primary);
  padding: 0.25rem;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--border-dark);
}

/* Цветовые схемы слайдеров */
.wellbeing-slider {
  background: linear-gradient(to right, #e74c3c 0%, #f39c12 50%, #2ecc71 100%);
}

.mood-slider {
  background: linear-gradient(to right, #3f51b5 0%, #9e9e9e 50%, #f1c40f 100%);
}

.alcohol-slider,
.overeating-slider {
  background: linear-gradient(to right, #2ecc71 0%, #f39c12 50%, #e74c3c 100%);
}

.sport-slider {
  background: linear-gradient(to right, #e0e0e0 0%, #f39c12 50%, #e74c3c 100%);
}

.weed-slider {
  background: linear-gradient(to right, #2ecc71 0%, #27ae60 100%);
}

/* Секция заметок */
.notes-section {
  margin: 2rem 0;
}

.notes-section label {
  display: block;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.5rem;
}

/* Секция сохранения */
.save-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
}

.btn-save {
  background: var(--header-gradient);
  background-size: 400% 400%;
  animation: headerGradientShift 16s ease-in-out infinite;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 7px;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.8;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-save:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 27, 78, 0.3);
}

.save-status {
  font-size: 0.9rem;
  padding: 0.5rem;
  border-radius: 4px;
}

.save-status.loading {
  color: var(--warning);
}

.save-status.success {
  color: var(--success);
}

.save-status.error {
  color: var(--danger);
}

/* Карточки статистики */
.stats-cards {
  background: white;
  border-radius: var(--border-radius-xl);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-lg);
}

.stats-cards h3 {
  margin: 0 0 1.5rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  transition: all 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.stat-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--border-dark);
  margin-bottom: 0.25rem;
}

.stat-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
}

.stat-date {
  font-size: 0.75rem;
  color: var(--border-dark);
  margin-top: 0.25rem;
}

/* Секция графиков */
.charts-section {
  background: white;
  border-radius: var(--border-radius-xl);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-lg);
}

.charts-section h3 {
  margin: 0 0 2rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
}

.chart-container {
  margin-bottom: 3rem;
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

/* Контроль размеров canvas для предотвращения растягивания */
.chart-container canvas {
  max-width: 100% !important;
  max-height: 400px !important;
  height: auto !important;
  width: 100% !important;
  display: block;
}

/* Обертка для графиков Chart.js */
.chart-container .chartjs-size-monitor,
.chart-container .chartjs-size-monitor-expand,
.chart-container .chartjs-size-monitor-shrink {
  max-width: 100% !important;
  max-height: 400px !important;
}

/* Принудительные размеры для конкретных графиков */
#mainChart, #habitsChart, #weightChart, #correlationChart,
#trends-chart, #habits-analytics-chart, #weight-analytics-chart,
#correlations-chart, #distribution-chart, #weekly-patterns-chart {
  max-width: 100% !important;
  max-height: 400px !important;
  height: 400px !important;
}

/* Адаптивные размеры для планшетов */
@media (max-width: 1024px) {
  .chart-container canvas {
    max-height: 350px !important;
    height: 350px !important;
  }

  #mainChart, #habitsChart, #weightChart, #correlationChart,
  #trends-chart, #habits-analytics-chart, #weight-analytics-chart,
  #correlations-chart, #distribution-chart, #weekly-patterns-chart {
    max-height: 350px !important;
    height: 350px !important;
  }
}

/* Адаптивные размеры для мобильных */
@media (max-width: 768px) {
  .chart-container {
    margin-bottom: 2rem;
  }

  .chart-container canvas {
    max-height: 300px !important;
    height: 300px !important;
  }

  #mainChart, #habitsChart, #weightChart, #correlationChart,
  #trends-chart, #habits-analytics-chart, #weight-analytics-chart,
  #correlations-chart, #distribution-chart, #weekly-patterns-chart {
    max-height: 300px !important;
    height: 300px !important;
  }
}

.chart-container:last-child {
  margin-bottom: 0;
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.chart-header h4 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
}

.chart-subtitle {
  margin: 0;
  font-size: 0.9rem;
  color: var(--border-dark);
}

.chart-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.legend-item.sleep::before {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--sleep-color);
  border-radius: 2px;
}

.legend-item.wellbeing::before {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--wellbeing-color);
  border-radius: 2px;
}

.legend-item.mood::before {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--mood-color);
  border-radius: 2px;
}

.legend-item.sport::before {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--sport-color);
  border-radius: 2px;
}

.legend-item.alcohol::before {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--alcohol-color);
  border-radius: 2px;
}

.legend-item.overeating::before {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--overeating-color);
  border-radius: 2px;
}

/* Аналитика */
.period-selector {
  background: white;
  border-radius: var(--border-radius-xl);
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-lg);
}

.period-selector label {
  font-weight: 500;
  color: #374151;
  margin-right: 1rem;
}

.period-selector select {
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  font-size: 0.9rem;
  background: white;
}

.analytics-stats {
  background: white;
  border-radius: var(--border-radius-xl);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-lg);
}

.analytics-stats h2 {
  margin: 0 0 1.5rem 0;
  font-size: 1.75rem;
  font-weight: 600;
  color: #1f2937;
}

.analytics-charts {
  background: white;
  border-radius: var(--border-radius-xl);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-lg);
}

.chart-section {
  margin-bottom: 3rem;
}

.chart-section:last-child {
  margin-bottom: 0;
}

.chart-section h3 {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
}

.chart-controls {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.chart-controls label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #374151;
  cursor: pointer;
}

.chart-controls input[type="checkbox"] {
  margin: 0;
}

/* Корреляции */
.correlations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.correlation-item {
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  text-align: center;
}

.correlation-title {
  font-size: 0.9rem;
  color: var(--border-dark);
  margin-bottom: 0.5rem;
}

.correlation-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
}

/* Распределения */
.distribution-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.tab-button {
  padding: 8px 16px;
  border: 1px solid var(--border-light);
  background: white;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
}

.tab-button:hover {
  background: var(--bg-hover);
}

.tab-button.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Рекомендации */
.recommendations {
  background: white;
  border-radius: var(--border-radius-xl);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-lg);
}

.recommendations h2 {
  margin: 0 0 1.5rem 0;
  font-size: 1.75rem;
  font-weight: 600;
  color: #1f2937;
}

.recommendation-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
}

.recommendation-item:last-child {
  margin-bottom: 0;
}

.rec-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.rec-text {
  flex: 1;
  line-height: 1.5;
  color: #374151;
}

/* Календарь здоровья */
.calendar-container {
  background: white;
  border-radius: var(--border-radius-xl);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-lg);
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.month-navigation {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.calendar-nav-btn {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.calendar-nav-btn:hover {
  background: var(--primary-hover);
  transform: scale(1.1);
}

.current-month {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--primary);
  min-width: 200px;
  text-align: center;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: #e0e0e0;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.calendar-header-cell {
  background: #f5f5f5;
  padding: 1rem;
  text-align: center;
  font-weight: bold;
  color: #666;
}

.calendar-day {
  background: white;
  min-height: 120px;
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}


.calendar-day.other-month {
  background: #fafafa;
  color: #ccc;
}

.calendar-day.today {
  background: #e3f2fd;
  border: 2px solid var(--primary);
}

.day-number {
  font-weight: bold;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.day-indicators {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.indicator-row {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.indicator.wellbeing {
  background: var(--wellbeing-color);
}

.indicator.mood {
  background: var(--mood-color);
}

.indicator.sport {
  background: var(--sport-color);
}

.indicator.alcohol {
  background: var(--alcohol-color);
}

.indicator.overeating {
  background: var(--overeating-color);
}

.sleep-time {
  font-size: 0.7rem;
  color: #666;
  margin-top: auto;
}

.weight-indicator {
  font-size: 0.7rem;
  color: var(--weight-color);
  font-weight: bold;
}

/* Легенда календаря */
.legend {
  background: var(--bg-secondary);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.legend h3 {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
}

.legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.legend-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-indicator.wellbeing {
  background: var(--wellbeing-color);
}

.legend-indicator.mood {
  background: var(--mood-color);
}

.legend-indicator.sport {
  background: var(--sport-color);
}

.legend-indicator.alcohol {
  background: var(--alcohol-color);
}

.legend-indicator.overeating {
  background: var(--overeating-color);
}

/* Модальные окна модуля здоровья */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: white;
  margin: 5% auto;
  padding: 0;
  border-radius: var(--border-radius-xl);
  width: 90%;
  max-width: 450px; /* Уменьшено с 600px до 450px */
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-body {
  padding: 2rem;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #999;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: #f0f0f0;
}

/* Адаптивность модуля здоровья */
@media (max-width: 768px) {
  .health-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin: 0 16px 24px 16px;
  }

  .health-content {
    padding: 0 16px;
  }

  .input-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .correlations-grid {
    grid-template-columns: 1fr;
  }

  .chart-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .chart-controls {
    flex-direction: column;
    gap: 0.5rem;
  }

  .distribution-tabs {
    flex-direction: column;
  }

  .calendar-day {
    min-height: 80px;
    padding: 0.25rem;
  }

  .day-number {
    font-size: 0.8rem;
  }

  .sleep-time,
  .weight-indicator {
    font-size: 0.6rem;
  }

  .indicator {
    width: 6px;
    height: 6px;
  }

  .legend-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== ИСПРАВЛЕНИЕ ГОРИЗОНТАЛЬНОГО СКРОЛЛА СТРАНИЦЫ "СЕГОДНЯ" ===== */

/* Устранение горизонтального скролла для элементов чек-листов */
.today-checklist-card .checklist-item-content,
.today-tasks-card .checklist-item-content {
  word-wrap: break-word !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: normal !important;
}

/* Устранение горизонтального скролла для контейнеров */
.today-main {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 20px !important; /* СТАНДАРТНЫЙ PADDING: 20px со всех сторон, как у .today-full-width-sections */
}

.today-column {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* Устранение горизонтального скролла для элементов задач */
.checklist-item-card {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* Устранение горизонтального скролла для текстовых областей */
.notes-textarea {
  word-wrap: break-word !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* ===== РАДИКАЛЬНОЕ УСТРАНЕНИЕ ГОРИЗОНТАЛЬНОГО СКРОЛЛА ===== */

/* ГЛОБАЛЬНОЕ ОТКЛЮЧЕНИЕ ГОРИЗОНТАЛЬНОГО СКРОЛЛА */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ ДЛЯ СТРАНИЦЫ "СЕГОДНЯ": body должен быть 100%, а не 100vw! */
body:has(.today-main) {
  width: 100% !important; /* КРИТИЧНО: 100% учитывает padding, 100vw - НЕТ! */
  max-width: 100% !important;
}

html:has(body:has(.today-main)) {
  width: 100% !important;
  max-width: 100% !important;
}

/* ПРИНУДИТЕЛЬНОЕ ОГРАНИЧЕНИЕ ВСЕХ ЭЛЕМЕНТОВ (НО НЕ ДЛЯ .today-main и его дочерних, И НЕ ДЛЯ ЭЛЕМЕНТОВ АВТОРИЗАЦИИ) */
*:not(.today-main):not(.today-main *):not(.today-column):not(.today-column *):not(.auth-page):not(.auth-page *):not(.auth-container):not(.auth-card):not(.auth-container *):not(.auth-card *) {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ИСКЛЮЧЕНИЕ ДЛЯ СТРАНИЦЫ "СЕГОДНЯ" - ГАРАНТИРОВАННЫЕ ОТСТУПЫ (как у .today-full-width-sections) */
.today-main {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 20px !important; /* СТАНДАРТНЫЙ PADDING: 20px со всех сторон */
  margin-right: 0 !important;
  margin-left: 0 !important;
  position: relative !important;
  overflow-x: hidden !important;
}

/* УДАЛЕНА ДИАГНОСТИКА: Визуальный индикатор больше не нужен */

/* СПЕЦИАЛЬНОЕ ОГРАНИЧЕНИЕ ДЛЯ СТРАНИЦЫ "СЕГОДНЯ" (ИСКЛЮЧАЕМ .today-main и .today-column) */
.checklist-item-card,
.checklist-item-card *,
.checklist-item-content,
.checklist-item-content * {
  max-width: 100% !important;
  overflow-x: hidden !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* ПРИНУДИТЕЛЬНОЕ ОГРАНИЧЕНИЕ ПРОБЛЕМНЫХ ЭЛЕМЕНТОВ - УДАЛЕНО: конфликтующие стили */
}

/* ОТКЛЮЧЕНИЕ ВСЕХ ОТРИЦАТЕЛЬНЫХ ОТСТУПОВ */
*[style*="margin-left: -"],
*[style*="margin-right: -"],
*[style*="margin: -"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ПРИНУДИТЕЛЬНОЕ ОГРАНИЧЕНИЕ ШИРИНЫ */
*[style*="width: calc(100% +"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* ===== СТИЛИ ДЛЯ СТАТУСОВ СОБЫТИЙ КАЛЕНДАРЯ ===== */
/* Событие выполнено - темно-зеленый цвет */
.day-event.event-completed,
.week-event.event-completed,
.all-day-event.event-completed {
  background: #16a34a !important;
  background-size: 100% 100% !important;
  animation: none !important;
  color: white !important;
}

/* Событие важно - темно-красный цвет */
.day-event.event-important,
.week-event.event-important,
.all-day-event.event-important {
  background: #dc2626 !important;
  background-size: 100% 100% !important;
  animation: none !important;
  color: white !important;
}

/* Комбинированное состояние: выполнено и важно - приоритет важности */
.day-event.event-completed.event-important,
.week-event.event-completed.event-important,
.all-day-event.event-completed.event-important {
  background: #dc2626 !important; /* Важность имеет приоритет */
}

/* Кнопки действий событий */
.event-action-buttons {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
  z-index: 20;
}

.event-completed-btn,
.event-important-btn {
  transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-completed-btn:hover {
  background: rgba(22, 163, 74, 0.8) !important;
  transform: scale(1.1);
}

.event-important-btn:hover {
  background: rgba(220, 38, 38, 0.8) !important;
  transform: scale(1.1);
}

/* ========================================
   Voice Bot — кнопка микрофона в хедере
   ======================================== */

.header-voice-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s, border-color 0.2s;
    flex-shrink: 0;
    padding: 0;
}

.header-voice-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.08);
}

.header-voice-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Состояние: идёт запись */
.header-voice-btn.voice-btn--listening {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #fca5a5;
    animation: voicePulse 1.2s ease-in-out infinite;
}

/* Состояние: отправка на сервер */
.header-voice-btn.voice-btn--processing {
    background: rgba(251, 191, 36, 0.2);
    border-color: #fbbf24;
    color: #fde68a;
}

@keyframes voicePulse {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    70%  { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Состояние: always-listening (wake word) */
.header-voice-btn.voice-btn--always {
    background: rgba(34, 197, 94, 0.2);
    border-color: #22c55e;
    color: #86efac;
    position: relative;
}
.header-voice-btn.voice-btn--always::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 7px;
    height: 7px;
    background: #22c55e;
    border-radius: 50%;
    animation: wakeWordPulse 2s ease-in-out infinite;
}
@keyframes wakeWordPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}
.header-voice-btn.voice-btn--always.voice-btn--listening {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #fca5a5;
    animation: voicePulse 0.8s ease-in-out infinite;
}
.header-voice-btn.voice-btn--always.voice-btn--listening::after {
    background: #ef4444;
    animation: none;
}

/* ── Voice Buffer — синяя кнопка ── */
.header-voice-btn--buffer {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.5);
    color: #93c5fd;
    position: relative;
}
.header-voice-btn--buffer:hover {
    background: rgba(59, 130, 246, 0.4);
    border-color: #3b82f6;
}
.header-voice-btn--buffer.voice-btn--listening {
    background: rgba(34, 197, 94, 0.25);
    border-color: #22c55e;
    color: #86efac;
    animation: bufferPulse 1.2s ease-in-out infinite;
}
.header-voice-btn--buffer.voice-btn--processing {
    background: rgba(251, 191, 36, 0.2);
    border-color: #fbbf24;
    color: #fde68a;
}
@keyframes bufferPulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
/* Badge */
.vb-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #3b82f6;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    padding: 0 3px;
}

/* ========================================
   Voice Bot — модальное окно подтверждения
   ======================================== */

.voice-event-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.voice-event-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
}

.voice-event-modal__box {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 28px 32px 24px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    z-index: 1;
    animation: voiceModalIn 0.18s ease-out;
}

@keyframes voiceModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(-8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.voice-event-modal__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.voice-event-modal__header h3 {
    flex: 1;
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    color: #1e293b;
}

.voice-event-modal__icon {
    font-size: 1.4em;
    line-height: 1;
}

.voice-event-modal__close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1em;
    color: #94a3b8;
    padding: 4px 6px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
    line-height: 1;
}

.voice-event-modal__close:hover {
    color: #1e293b;
    background: #f1f5f9;
}

.voice-event-modal__original {
    background: #f1f5f9;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.88em;
    color: #64748b;
    margin-bottom: 20px;
    font-style: italic;
    line-height: 1.4;
}

.voice-event-modal__fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
}

.voice-event-modal__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.voice-event-modal__field label {
    display: block;
    font-size: 0.8em;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.voice-event-modal__field input {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.93em;
    color: #1e293b;
    background: #f8fafc;
    transition: border-color 0.2s, background 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}

.voice-event-modal__field input:focus {
    outline: none;
    border-color: #3b82f6;
    background: #fff;
}

.voice-event-modal__actions {
    display: flex;
    gap: 10px;
}

.voice-event-modal__btn-save {
    flex: 1;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 0.93em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
}

.voice-event-modal__btn-save:hover    { background: #2563eb; }
.voice-event-modal__btn-save:disabled { background: #94a3b8; cursor: not-allowed; }

.voice-event-modal__btn-cancel {
    background: #f1f5f9;
    color: #64748b;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 0.93em;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
}

.voice-event-modal__btn-cancel:hover { background: #e2e8f0; }

/* ── FullCalendar v6 — светлая тема Google Calendar ───────────────── */

#fc-calendar {
    background: #fff;
    padding: 0;
    flex: 1;
    min-height: 0;
}

/* Typography & borders */
.fc {
    font-family: 'Google Sans', Roboto, system-ui, -apple-system, sans-serif;
    --fc-border-color: #e0e0e0;
    --fc-today-bg-color: #e8f0fe;
    --fc-neutral-bg-color: #f8f9fa;
    --fc-page-bg-color: #fff;
    --fc-highlight-color: rgba(66, 133, 244, 0.12);
    --fc-now-indicator-color: #ea4335;
    --fc-event-bg-color: #3788d8;
    --fc-event-border-color: #3788d8;
    --fc-event-text-color: #fff;
    --fc-more-link-color: #1a73e8;
    --fc-more-link-bg-color: transparent;
}

/* Column headers (Mon, Tue…) */
.fc-col-header-cell {
    background: #fff;
    padding: 8px 0 6px;
}
.fc-col-header-cell-cushion {
    color: #70757a;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .6px;
    text-decoration: none;
}

/* Day numbers */
.fc-daygrid-day-number {
    color: #3c4043;
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    padding: 4px 6px;
    line-height: 22px;
    min-width: 26px;
    text-align: center;
}

/* Today — blue circle on day number */
.fc-day-today .fc-daygrid-day-number {
    background: #1a73e8;
    color: #fff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Event chips */
.fc-event {
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    padding: 1px 4px;
    cursor: pointer;
    border: none !important;
}
.fc-event:hover { filter: brightness(0.92); }

.fc-event-inner {
    display: flex;
    align-items: center;
    gap: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.fc-event-inner span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Completed event — салатовый фон */
.fc-event--completed {
    opacity: 0.9;
}
.fc-event--completed .fc-event-inner span {
    text-decoration: line-through;
}
.fc-event--completed .fc-today-event-time,
.fc-event--completed .fc-today-event-title {
    color: #1a3a1a;
}

/* Important event — red left border */
.fc-event--important {
    border-left: 3px solid #ea4335 !important;
}

/* Recurring event — фиолетовый цвет */
.fc-event--recurring {
    border-left: 3px solid #6d28d9 !important;
}

/* ── Today FullCalendar — event status buttons ── */
.fc-today-event-inner {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 18px;
    gap: 4px;
    overflow: hidden;
    padding: 1px 2px;
}
.fc-today-event-time {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0.9;
}
.fc-today-event-title {
    flex: 1;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fc-today-event-btns {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    margin-left: auto;
}
.fc-today-status-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
    padding: 0;
    transition: background 0.15s, transform 0.1s;
    background: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.7);
    line-height: 1;
}
.fc-today-status-btn:hover {
    background: rgba(255,255,255,0.35);
    transform: scale(1.15);
}
/* Completed button active — dark green on light bg */
.fc-today-btn-done.active {
    background: #166534;
    color: #fff;
}
/* Important button active — dark red */
.fc-today-btn-imp.active {
    background: #991b1b;
    color: #fff;
}
/* On completed event (light green bg) — darker button style */
.fc-event--completed .fc-today-status-btn {
    background: rgba(0,0,0,0.12);
    color: rgba(0,0,0,0.5);
}
.fc-event--completed .fc-today-status-btn:hover {
    background: rgba(0,0,0,0.2);
}
/* On important event (red bg) — adjust button visibility */
.fc-event--important .fc-today-status-btn {
    background: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.8);
}
/* Completed event — title strikethrough */
.fc-event--completed .fc-today-event-title {
    text-decoration: line-through;
    opacity: 0.8;
}
/* Mobile: bigger touch targets */
@media (max-width: 768px) {
    .fc-today-status-btn {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }
}

/* Time grid (week/day) — cleaner hourly lines */
.fc-timegrid-slot {
    height: 44px;
}
.fc-timegrid-slot-label-cushion {
    font-size: 10px;
    color: #70757a;
    font-weight: 400;
}

/* Time axis (left column with hours) — wider for full time display */
.fc-timegrid table {
    table-layout: fixed !important;
}
.fc-timegrid-axis {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
}
.fc-timegrid-slot-label {
    width: 100px !important;
}
.fc-timegrid-slot-label-frame {
    text-align: right !important;
    justify-content: flex-end !important;
    padding-right: 10px !important;
}
.fc-timegrid-slot-label-cushion {
    text-align: right !important;
    padding-right: 8px !important;
}
.fc-timegrid-axis-cushion {
    max-width: none !important;
    padding-right: 10px !important;
    text-align: right !important;
}
.fc-timegrid-axis-frame {
    overflow: hidden !important;
}

/* Current time indicator */
.fc-timegrid-now-indicator-line {
    border-color: #ea4335;
    border-width: 2px;
}
.fc-timegrid-now-indicator-arrow {
    border-top-color: #ea4335;
    border-bottom-color: #ea4335;
}

/* "+N more" link */
.fc-daygrid-more-link {
    font-size: 11px;
    color: #1a73e8;
    font-weight: 500;
    padding: 1px 4px;
}

/* Remove default FullCalendar button styling (we use our own toolbar) */
.fc .fc-button { display: none !important; }

/* Scrollable week/day view */
.fc-scroller {
    overflow-y: auto !important;
}
/* ── End FullCalendar overrides ────────────────────────────────────── */

/* ===================================================
   АДАПТИВНЫЙ ХЕДЕР — ГАМБУРГЕР И МОБИЛЬНОЕ МЕНЮ
   =================================================== */

/* --- Кнопка-бургер (скрыта на десктопе) --- */
.header-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
  border: none;
  background: rgba(255,255,255,0.10);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  transition: background 0.2s;
}
.header-hamburger:hover,
.header-hamburger:active {
  background: rgba(255,255,255,0.22);
}
.header-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.header-hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.header-hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.header-hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Оверлей мобильного меню --- */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.mobile-menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* --- Панель меню (выезжает справа) --- */
.mobile-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  max-width: 88vw;
  height: 100%;
  background: #1a2740;
  box-shadow: -4px 0 32px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.mobile-menu-overlay.open .mobile-menu-panel {
  transform: translateX(0);
}

/* --- Верхняя зона: пользователь + кнопка закрыть --- */
.mobile-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: rgba(0,0,0,0.25);
  flex-shrink: 0;
  min-height: 60px;
}
.mobile-menu-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-menu-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 600;
  flex-shrink: 0;
}
.mobile-menu-username {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
}
.mobile-menu-user-role {
  color: rgba(255,255,255,0.5);
  font-size: 0.78rem;
  line-height: 1.2;
}
.mobile-menu-close {
  background: rgba(255,255,255,0.10);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}
.mobile-menu-close:hover,
.mobile-menu-close:active {
  background: rgba(255,255,255,0.22);
}

/* --- Дата/время в меню --- */
.mobile-menu-datetime {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: rgba(0,0,0,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.mobile-menu-date {
  color: rgba(255,255,255,0.6);
  font-size: 0.82rem;
}
.mobile-menu-time {
  color: #ffe066;
  font-size: 1rem;
  font-weight: 600;
}

/* --- Прокручиваемая навигация --- */
.mobile-menu-nav {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
}

/* --- Секции аккордеона --- */
.mobile-nav-section {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mobile-nav-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  color: rgba(255,255,255,0.9);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  min-height: 52px;
  transition: background 0.18s;
}
.mobile-nav-section-header:hover,
.mobile-nav-section-header:active {
  background: rgba(255,255,255,0.06);
}
.mobile-nav-chevron {
  font-size: 0.6rem;
  opacity: 0.45;
  transition: transform 0.25s;
  flex-shrink: 0;
}
.mobile-nav-section.open .mobile-nav-chevron {
  transform: rotate(180deg);
}
.mobile-nav-section-body {
  display: none;
  background: rgba(0,0,0,0.18);
}
.mobile-nav-section.open .mobile-nav-section-body {
  display: block;
}
.mobile-nav-section-body a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 0 36px;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-size: 0.95rem;
  min-height: 46px;
  transition: background 0.15s, color 0.15s;
  border-left: 2px solid transparent;
}
.mobile-nav-section-body a i.fas,
.mobile-nav-section-body a i.far {
  width: 18px;
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.7;
  flex-shrink: 0;
}
.mobile-nav-section-header i.fas,
.mobile-nav-section-header i.far {
  margin-right: 8px;
  font-size: 0.95rem;
  opacity: 0.8;
}
.mobile-nav-section-body a:hover,
.mobile-nav-section-body a:active {
  background: rgba(255,255,255,0.07);
  color: #fff;
  border-left-color: rgba(255,255,255,0.3);
}

/* --- Вложенные подсекции --- */
.mobile-nav-subsection {
  border-top: 1px solid rgba(255,255,255,0.05);
}
.mobile-nav-subsection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 36px;
  color: rgba(255,255,255,0.55);
  font-size: 0.92rem;
  cursor: pointer;
  user-select: none;
  min-height: 46px;
  transition: background 0.15s;
}
.mobile-nav-subsection-header:hover,
.mobile-nav-subsection-header:active {
  background: rgba(255,255,255,0.04);
}
.mobile-nav-subsection-header i.fas,
.mobile-nav-subsection-header i.far {
  margin-right: 8px;
  font-size: 0.85rem;
  opacity: 0.6;
}
.mobile-nav-subchevron {
  font-size: 0.55rem;
  opacity: 0.4;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.mobile-nav-subsection.open .mobile-nav-subchevron {
  transform: rotate(180deg);
}
.mobile-nav-subsection-body {
  display: none;
}
.mobile-nav-subsection.open .mobile-nav-subsection-body {
  display: block;
}
.mobile-nav-subsection-body a {
  padding-left: 52px !important;
}

/* --- Разделитель в мобильном меню --- */
.mobile-nav-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 3px 0;
  pointer-events: none;
}

/* --- Нижняя зона: кнопка выхода --- */
.mobile-menu-bottom {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.mobile-logout-btn {
  width: 100%;
  padding: 12px;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 8px;
  color: #fca5a5;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.2s;
  min-height: 44px;
}
.mobile-logout-btn:hover,
.mobile-logout-btn:active {
  background: rgba(239, 68, 68, 0.3);
}

/* ===================================================
   АДАПТИВНОСТЬ ХЕДЕРА — МЕДИАЗАПРОСЫ
   =================================================== */

/* Компактный хедер: планшет / маленький десктоп 1024–1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
  .header-root, #header-root {
    padding: 0 20px;
  }
  .header-datetime {
    display: none;
  }
  .header-right {
    gap: 12px;
  }
  .nav-item {
    padding: 8px 12px;
    font-size: 1em;
  }
  /* Скрываем имя/роль — только аватар и иконка выхода */
  .header-user-info {
    display: none;
  }
  #logout-btn {
    margin-left: 6px !important;
  }
}

/* Компактный хедер: планшет-портрет 768–1023px (nav виден, без datetime) */
@media (min-width: 768px) and (max-width: 1023px) {
  .header-root, #header-root {
    padding: 0 16px;
    height: 64px;
    box-sizing: border-box;
    width: 100%;
  }
  /* Уменьшаем nav-пункты */
  .nav-item {
    padding: 7px 7px;
    font-size: 0.9em;
  }
  /* Скрываем дату/время */
  .header-datetime {
    display: none;
  }
  /* Скрываем инфо об обновлении */
  .header-update-info {
    display: none !important;
  }
  /* header-right компактный */
  .header-right {
    gap: 10px;
  }
  /* Скрываем имя/роль — только аватар и крестик выхода */
  .header-user-info {
    display: none;
  }
  #logout-btn {
    margin-left: 4px !important;
  }
  /* Гамбургер не нужен — скрываем явно */
  .header-hamburger {
    display: none !important;
  }
  /* Логотип — небольшой отступ */
  .header-logo {
    margin-right: 10px !important;
  }
}

/* Гамбургер-режим: только телефоны < 768px */
@media (max-width: 767px) {
  .header-root, #header-root {
    padding: 0 16px;
    height: 60px;
    box-sizing: border-box;
    width: 100%;
  }
  /* Скрываем навигацию */
  .header-nav {
    display: none;
  }
  /* Скрываем дату/время */
  .header-datetime {
    display: none;
  }
  /* Скрываем блок пользователя (он в мобильном меню) */
  .header-user {
    display: none;
  }
  /* Скрываем инфо об обновлении */
  .header-update-info {
    display: none !important;
  }
  /* Показываем гамбургер */
  .header-hamburger {
    display: flex;
  }
  /* Компактный header-right: mic + гамбургер */
  .header-right {
    gap: 10px;
    align-items: center;
  }
  /* Логотип — убираем большой отступ */
  .header-logo {
    margin-right: 0 !important;
  }
}

/* Маленький телефон: < 480px */
@media (max-width: 479px) {
  .header-root, #header-root {
    padding: 0 12px;
    height: 56px;
  }
  /* Уменьшаем логотип */
  .header-logo img, #logoImg {
    height: 30px !important;
  }
  /* Компактная панель мобильного меню */
  .mobile-menu-panel {
    width: 100%;
    max-width: 100vw;
  }
}

/* ============================================================
   Сворачиваемые секции (Today: Цели + Здоровье) — светлая тема
   ============================================================ */

/* Заголовок сворачиваемой секции */
.collapsible-section-header {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  gap: 12px;
}

/* section-header внутри collapsible-section-header растягивается, оставляя кнопки справа */
.collapsible-section-header > .section-header {
  flex: 1;
  margin: 0;
}

/* Устаревший класс — оставлен для обратной совместимости */
.collapsible-section-title {
  flex: 1;
}

.collapsible-section-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Кнопка toggle */
.toggle-section-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  flex-shrink: 0;
}

.toggle-section-btn:hover {
  background: #e5e7eb;
  border-color: #d1d5db;
}

.toggle-section-btn i {
  font-size: 0.8rem;
}

/* Ссылка на страницу целей */
.goals-today-page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
  font-size: 0.78rem;
}

.goals-today-page-link:hover {
  background: #e5e7eb;
  color: var(--text-primary);
}

/* Тело сворачиваемой секции */
.collapsible-section-body {
  margin-top: 8px;
}

/* ── Фильтры целей ── */
.goals-today-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.goal-filter-btn {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-light);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.83rem;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  font-family: inherit;
}

.goal-filter-btn:hover {
  background: #e5e7eb;
  color: var(--text-primary);
}

.goal-filter-btn.active {
  background: #ede9fe;
  border-color: #c4b5fd;
  color: #5b21b6;
  font-weight: 600;
}

/* ── Список целей ── */
.today-goals-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.today-goals-loading,
.today-goals-error,
.today-goals-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.today-goals-empty {
  flex-direction: column;
  gap: 6px;
}

.today-goals-empty i {
  font-size: 2rem;
  opacity: 0.3;
  color: var(--text-secondary);
}

/* ── Карточка цели ── */
.today-goal-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow 0.18s, border-color 0.18s, transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
}

.today-goal-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #c4b5fd;
  transform: translateY(-1px);
}

/* Заголовок карточки */
.today-goal-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.today-goal-category-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.today-goal-title {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.today-goal-method-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}

/* Прогресс-бар */
.today-goal-progress-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.today-goal-progress-bar {
  flex: 1;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.today-goal-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 3px;
  transition: width 0.4s ease;
  min-width: 2px;
}

.today-goal-progress-pct {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
  min-width: 30px;
  text-align: right;
}

/* Футер карточки */
.today-goal-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.today-goal-priority {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.today-goal-date {
  font-size: 0.72rem;
  color: #9ca3af;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Строка с датой и кнопками внутри блока здоровья */
.health-today-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.health-today-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Контейнер прокрутки календаря на today-странице ── */
.today-calendar-scroll-container {
  min-height: calc(100vh - 180px);
  flex: 1;
}

/* ── Адаптив ── */
@media (max-width: 767px) {
  .today-goals-list {
    grid-template-columns: 1fr;
  }
  .collapsible-section-title {
    font-size: 1.2rem;
  }
  .today-calendar-scroll-container {
    min-height: 380px;
  }
  /* Убираем жёсткую высоту колонок — они сами вычислят по содержимому */
  .today-main {
    height: auto;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .today-calendar-scroll-container {
    min-height: 460px;
  }
}

/* ── Заголовок календаря: дата переносится под заголовок на узких экранах ── */
@media (max-width: 520px) {
  .calendar-header-main {
    gap: 4px;
  }
  .today-calendar-date-control {
    flex: 0 0 100%;           /* на новую строку */
    justify-content: center;  /* центрируем на мобильном */
    gap: 6px;
  }
  .today-calendar-date-control .calendar-header-date {
    font-size: 0.9rem;
    text-align: center;
  }
  .today-calendar-date-control .calendar-nav-btn {
    width: 30px;
    height: 30px;
    font-size: 1rem;
  }
}

/* ── Цели на мобильном: фильтры в один ряд ── */
@media (max-width: 480px) {
  .goals-today-filters {
    gap: 6px;
  }
  .goal-filter-btn {
    padding: 4px 10px;
    font-size: 12px;
  }
  .health-today-date-row {
    flex-direction: column;
    align-items: stretch;
  }
  .health-today-actions {
    justify-content: center;
  }
}

/* ===== ФИНАЛЬНЫЙ ФИКС: actions-контейнер чек-листов =====
   Должен быть в САМОМ КОНЦЕ файла — перебивает глобальный
   .checklist-item-card * { overflow-x: hidden !important }
   и по специфичности (2 класса > 1 класса) и по порядку.
   Без этого браузер добавляет вертикальный скроллбар ↕. */
.section-card .checklist-item-actions,
.today-checklist-card .checklist-item-actions,
.today-tasks-card .checklist-item-actions {
  overflow: visible !important;
  max-width: none !important;
}
.section-card .checklist-item-actions *,
.today-checklist-card .checklist-item-actions *,
.today-tasks-card .checklist-item-actions * {
  overflow: visible !important;
  max-width: none !important;
}

/* ===== Компактные модалы подтверждения удаления =====
   min-height: 200px на .modal-template-body раздувает
   простые confirm-диалоги. Убираем лишнее пространство. */
#confirmDeleteModal .modal-template-body,
#deleteProjectModal .modal-template-body,
#deleteTaskModal .modal-template-body {
  min-height: 0 !important;
  padding: 20px 24px !important;
}
#confirmDeleteModal .modal-template-content,
#deleteProjectModal .modal-template-content,
#deleteTaskModal .modal-template-content {
  max-width: 460px !important;
  width: 90% !important;
}

/* ===== МОБИЛЬНЫЕ ФИКСЫ (iPhone 15 / iPad) ===== */

/* Предотвращаем автозум iOS при фокусе на input */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Универсальная модалка — полная ширина на мобильных */
  .universal-modal-content {
    width: 95% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 16px auto;
  }

  .universal-modal-content .modal-body {
    padding: 0 12px 16px 12px;
  }

  /* Профиль пользователя */
  .user-profile-content {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
  }

  /* Модалки подтверждения удаления */
  #confirmDeleteModal .modal-template-content,
  #deleteProjectModal .modal-template-content,
  #deleteTaskModal .modal-template-content {
    max-width: 90% !important;
  }
}

@media (max-width: 480px) {
  /* Календарь — убираем min-width для корректного отображения */
  .calendar-container {
    min-width: 0 !important;
    overflow-x: auto;
  }

  .calendar-grid {
    min-width: 0 !important;
  }

  .calendar-grid.week {
    min-width: 600px; /* Разрешаем горизонтальную прокрутку, но не ломаем сетку */
  }

  .calendar-grid.week {
    grid-template-columns: 40px repeat(7, 1fr);
  }

  .calendar-grid.day {
    min-width: 0 !important;
  }

  /* Модалки — ещё компактнее на телефонах */
  .universal-modal-content {
    width: 98% !important;
    border-radius: 12px !important;
  }

  .modal-header h3 {
    font-size: 1.05rem;
  }

  /* Кнопки действий карточек — увеличиваем touch-таргеты */
  .ns-card__action-btn {
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ФАЙЛЫ ЗАДАЧ (task-files)                                                   */
/* ═══════════════════════════════════════════════════════════════════════════ */

.task-files-section {
  margin-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 12px;
}

.task-files-section > label {
  font-weight: 600;
  font-size: 0.85rem;
  color: #374151;
  margin-bottom: 8px;
  display: block;
}

.task-files-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.task-files-empty {
  font-size: 0.8rem;
  color: #9ca3af;
  padding: 8px 0;
}

.task-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: background 0.15s;
}

.task-file-item:hover {
  background: #f3f4f6;
}

.task-file-link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: #374151;
  font-size: 0.82rem;
}

.task-file-link i {
  color: #667eea;
  font-size: 1rem;
  flex-shrink: 0;
}

.task-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.task-file-size {
  color: #9ca3af;
  font-size: 0.72rem;
  flex-shrink: 0;
}

.task-file-delete {
  background: none;
  border: none;
  color: #d1d5db;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.task-file-delete:hover {
  color: #ef4444;
  background: rgba(239,68,68,0.08);
}

/* Drop-зона для файлов */
.task-files-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border: 2px dashed #d1d5db;
  border-radius: 10px;
  color: #9ca3af;
  font-size: 0.82rem;
  margin-bottom: 8px;
  transition: all 0.2s;
  cursor: default;
}

.task-files-dropzone i {
  font-size: 1.1rem;
}

.task-files-dropzone.dragover {
  border-color: #667eea;
  background: rgba(102,126,234,0.06);
  color: #667eea;
}

/* Кнопки действий — в ряд */
.task-files-actions {
  display: flex;
  gap: 8px;
}

.task-file-upload-btn {
  cursor: pointer;
}

.task-files-actions .btn-outline {
  background: transparent;
  border: 1px solid #d1d5db;
  color: #6b7280;
  font-size: 0.8rem;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
}

.task-files-actions .btn-outline:hover {
  border-color: #667eea;
  color: #667eea;
  background: rgba(102,126,234,0.04);
}

/* Модалка нового документа */
#taskDocModal .modal-template-content {
  max-width: 450px !important;
  width: 90% !important;
}

#taskDocModal .modal-template-body textarea {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  resize: vertical;
  min-height: 200px;
}

/* Модалка просмотра документа */
#taskDocViewModal .modal-template-content {
  max-width: 550px !important;
  width: 90% !important;
}

.task-doc-view-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: 12px 16px;
  background: var(--bg-secondary, #f5f5f5);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-primary, #333);
}

/* ===== CHECKLIST CONTEXT MENU ===== */
.checklist-ctx-menu {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.08);
  padding: 6px 0;
  min-width: 210px;
  font-size: 14px;
  user-select: none;
  position: fixed;
  z-index: 99999;
  animation: ctxFadeIn .12s ease;
}

.checklist-ctx-submenu {
  animation: ctxFadeIn .1s ease;
}

@keyframes ctxFadeIn {
  from { opacity: 0; transform: scale(.96) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  color: var(--text-primary, #222);
  transition: background .12s;
  border-radius: 6px;
  margin: 0 4px;
}

.ctx-item:hover {
  background: var(--bg-secondary, #f3f4f6);
}

.ctx-item i {
  width: 16px;
  text-align: center;
  color: var(--text-secondary, #666);
  font-size: 13px;
  flex-shrink: 0;
}

.ctx-item--danger {
  color: #dc2626;
}

.ctx-item--danger i {
  color: #dc2626;
}

.ctx-item--danger:hover {
  background: #fef2f2;
}

.ctx-divider {
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: 4px 0;
}

/* Priority row inside context menu */
.ctx-item--has-sub {
  justify-content: flex-start;
  gap: 8px;
}

.ctx-prio-current {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ctx-sub-arrow {
  font-size: 10px !important;
  color: #aaa !important;
  margin-left: auto;
  flex-shrink: 0;
}

.ctx-prio-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ctx-prio-dot--empty {
  background: transparent !important;
  border: 1.5px solid #d1d5db;
}

.ctx-item--active {
  background: var(--bg-secondary, #f3f4f6);
  font-weight: 600;
}

.ctx-item--prio-none {
  color: var(--text-secondary, #666);
}

/* Toast notification */
.ctx-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: #1e293b;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.ctx-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}